/* ══════════════════════════════════════════════════════════════════════════
   GnPublic.css — LA FEUILLE DES BLOCS PUBLICS (en-tête de site, héros, cartes, section éditoriale, appel, tarifs,
   contact, pied). Une seule feuille : la liste des blocs est GnPublic::BLOCKS.
   ───────────────────────────────────────────────────────────────────────────
   - Aucune couleur écrite ici : tout vient des jetons du système de design de l'application (--gn-*, --ui-*). Une
     application qui n'en suit aucun retombe sur les couleurs du navigateur (Canvas, CanvasText, LinkText), qui
     suivent elles aussi le clair et le sombre.
   - Le mode sombre est la classe .dark de <body>.
   - Droite-à-gauche : propriétés logiques seulement (inline / block, start / end). Les flèches se retournent.
   - Cibles de 44 px au moins ; le texte courant tient 4,5:1 sur son fond (mesuré par tests/e2e/public_blocks.mjs).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Les jetons, relus une fois ──────────────────────────────────────── */
.gnp {
  color-scheme: light;
  --p-bg: var(--gn-bg, Canvas);
  --p-surface: var(--gn-c-card-background, var(--gn-surface, Canvas));
  --p-surface-2: var(--gn-surface-2, color-mix(in srgb, CanvasText 5%, Canvas));
  --p-text: var(--gn-text, CanvasText);
  --p-muted: var(--gn-muted, color-mix(in srgb, CanvasText 70%, Canvas));
  --p-line: var(--gn-c-card-border-color, var(--gn-line, color-mix(in srgb, CanvasText 16%, Canvas)));
  --p-line-strong: var(--gn-line-strong, color-mix(in srgb, CanvasText 45%, Canvas));
  --p-brand: var(--gn-primary-fill, var(--color-primary, LinkText));
  --p-on-brand: var(--gn-on-primary, Canvas);
  --p-ink: var(--color-primary, LinkText);
  --p-fill: var(--gn-c-button-background, var(--p-brand));
  --p-on-fill: var(--gn-c-button-text, var(--p-on-brand));
  --p-link: var(--gn-action-ink, var(--p-ink));
  --p-soft: var(--gn-action-soft, var(--gn-primary-soft, color-mix(in srgb, LinkText 12%, Canvas)));
  --p-radius: var(--gn-c-card-radius, var(--ui-radius-lg, 12px));
  --p-radius-btn: var(--gn-c-button-radius, var(--ui-radius-sm, 8px));
  --p-font: var(--ui-font, system-ui, sans-serif);
  --p-font-head: var(--ui-font-head, var(--p-font));
  --p-font-mono: var(--ui-font-mono, ui-monospace, monospace);
  --p-gap: var(--gn-gap, 18px);
  --p-shadow: var(--gn-elev-2, 0 18px 40px -28px color-mix(in srgb, CanvasText 55%, transparent));
  --p-max: 1200px;
  --p-pad: 24px;
  box-sizing: border-box;
  background: var(--p-bg);
  color: var(--p-text);
  font-family: var(--p-font);
  font-size: 16px;
  line-height: 1.55;
  inline-size: 100%;
  min-inline-size: 0;
  text-align: start;
  overflow-wrap: break-word;
}
body.dark .gnp { color-scheme: dark; }
/* Une application qui ne suit AUCUN système de design (pas d'attribut data-gn-sys) garde ses couleurs d'origine, que rien ne
   garantit lisibles : son bleu porte du blanc à 2,9:1 en sombre (mesuré sur « sirh », 11 octobre 2026). Ici la couleur de marque
   est rapprochée du texte (clair) ou du fond (sombre), et ce qu'on écrit dessus prend l'autre extrémité : le couple tient 4,5:1. Sous un système,
   rien de cela ne joue — ses jetons sont déjà mesurés. */
body:not([data-gn-sys]) .gnp { --p-brand: color-mix(in srgb, var(--gn-primary-fill, var(--color-primary, LinkText)) 55%, var(--gn-text, CanvasText)); --p-on-brand: var(--gn-bg, Canvas); --p-ink: color-mix(in srgb, var(--gn-primary-fill, var(--color-primary, LinkText)) 55%, var(--gn-text, CanvasText)); }
body.dark:not([data-gn-sys]) .gnp { --p-brand: color-mix(in srgb, var(--gn-primary-fill, var(--color-primary, LinkText)) 40%, var(--gn-bg, Canvas)); --p-on-brand: var(--gn-text, CanvasText); }
.gnp.gnp-solo { background: transparent; }
.gnp *, .gnp *::before, .gnp *::after { box-sizing: border-box; }
[dir="rtl"] .gnp { line-height: 1.8; }

/* les tons d'une section : page (défaut) · doux · sombre · marque */
.gnp.gnp-tone-soft { --p-bg: var(--gn-surface-2, color-mix(in srgb, CanvasText 5%, Canvas)); border-block: 1px solid var(--p-line); }
.gnp.gnp-tone-dark {
  --p-bg: var(--gn-text, CanvasText);
  --p-text: var(--gn-bg, Canvas);
  --p-surface: color-mix(in srgb, var(--gn-bg, Canvas) 8%, var(--gn-text, CanvasText));
  --p-surface-2: color-mix(in srgb, var(--gn-bg, Canvas) 12%, var(--gn-text, CanvasText));
  --p-muted: color-mix(in srgb, var(--gn-bg, Canvas) 78%, var(--gn-text, CanvasText));
  --p-line: color-mix(in srgb, var(--gn-bg, Canvas) 24%, var(--gn-text, CanvasText));
  --p-line-strong: color-mix(in srgb, var(--gn-bg, Canvas) 60%, var(--gn-text, CanvasText));
  --p-fill: var(--gn-bg, Canvas);
  --p-on-fill: var(--gn-text, CanvasText);
  --p-link: var(--gn-bg, Canvas);
  --p-soft: color-mix(in srgb, var(--gn-bg, Canvas) 14%, var(--gn-text, CanvasText));
  --p-shadow: none;
}
/* en mode sombre, une section « sombre » ne devient pas une bande claire : elle prend la surface haute du système */
body.dark .gnp.gnp-tone-dark {
  --p-bg: var(--gn-surface-2, color-mix(in srgb, CanvasText 8%, Canvas));
  --p-text: var(--gn-text, CanvasText);
  --p-surface: var(--gn-surface, Canvas);
  --p-surface-2: var(--gn-bg, Canvas);
  --p-muted: var(--gn-muted, color-mix(in srgb, CanvasText 70%, Canvas));
  --p-line: var(--gn-line, color-mix(in srgb, CanvasText 16%, Canvas));
  --p-line-strong: var(--gn-line-strong, color-mix(in srgb, CanvasText 45%, Canvas));
  --p-fill: var(--gn-text, CanvasText);
  --p-on-fill: var(--gn-bg, Canvas);
  --p-link: var(--gn-text, CanvasText);
  --p-soft: var(--gn-surface, Canvas);
  border-block: 1px solid var(--p-line);
}
.gnp.gnp-tone-brand {
  --p-bg: var(--p-brand);
  --p-text: var(--p-on-brand);
  --p-muted: var(--p-on-brand);   /* sur la couleur de marque, seule l'encre garantie par le système tient 4,5:1 : pas de texte atténué */
  --p-line: color-mix(in srgb, var(--p-on-brand) 30%, var(--p-brand));
  --p-line-strong: color-mix(in srgb, var(--p-on-brand) 60%, var(--p-brand));
  --p-surface: var(--p-brand);   /* une carte posée sur la bande garde SON fond : seul le couple marque / encre est garanti à 4,5:1 */
  --p-fill: var(--p-on-brand);
  --p-on-fill: var(--p-brand);
  --p-link: var(--p-on-brand);
  --p-soft: color-mix(in srgb, var(--p-on-brand) 14%, var(--p-brand));
  --p-shadow: none;
}

/* ── 2. Ce que tous partagent ───────────────────────────────────────────── */
.gnp-wrap { max-inline-size: var(--p-max); margin-inline: auto; padding-inline: var(--p-pad); padding-block: 64px; display: flex; flex-direction: column; gap: 32px; min-inline-size: 0; }
.gnp-head { display: flex; flex-direction: column; gap: 10px; max-inline-size: 46em; min-inline-size: 0; }
.gnp-center > .gnp-wrap > .gnp-head { margin-inline: auto; text-align: center; align-items: center; }
.gnp :is(h1, h2, h3, p, ul, ol, dl, dd, figure) { margin: 0; padding: 0; }
.gnp :is(ul, ol) { list-style: none; }
.gnp :is(h1, h2, h3) { font-family: var(--p-font-head); color: var(--p-text); text-wrap: balance; }
.gnp-h1 { font-size: clamp(34px, 5.4vw, 58px); line-height: 1.05; font-weight: 800; letter-spacing: -0.025em; }
.gnp-h2 { font-size: clamp(26px, 3.4vw, 36px); line-height: 1.14; font-weight: 700; letter-spacing: -0.015em; }
.gnp-h3 { font-size: clamp(19px, 2.2vw, 22px); line-height: 1.22; font-weight: 700; }
[dir="rtl"] .gnp :is(.gnp-h1, .gnp-h2, .gnp-h3) { letter-spacing: 0 !important; line-height: 1.35; }
.gnp-kicker { font-family: var(--p-font-mono); font-size: 13px; line-height: 1.4; letter-spacing: 0.06em; text-transform: uppercase; color: var(--p-muted); }
[dir="rtl"] .gnp-kicker { font-family: var(--p-font); letter-spacing: 0; font-size: 14px; }
/* sous un système de design, tout le texte hérite du corps (gn-design.css, § 13) : les repères en chasse fixe du site
   la reprennent ici, sinon le surtitre « IBM Plex Mono » de la maquette sortait en police de texte (mesuré le 12 oct. 2026) */
body:not(#gn_)[data-gn-font] .gnp :is(.gnp-kicker, .gnp-track-input) { font-family: var(--p-font-mono) !important; }
[dir="rtl"] body:not(#gn_)[data-gn-font] .gnp .gnp-kicker, body:not(#gn_)[data-gn-font][dir="rtl"] .gnp .gnp-kicker { font-family: var(--p-font) !important; }
.gnp-lead { font-size: clamp(17px, 1.6vw, 19px); color: var(--p-muted); max-inline-size: 36em; }
.gnp-center > .gnp-wrap > :is(.gnp-head, .gnp-hero-copy) > .gnp-lead { margin-inline: auto; }
.gnp-text { color: var(--p-muted); font-size: 16px; }
.gnp-note { color: var(--p-muted); font-size: 14px; }
.gnp a { color: var(--p-link); text-underline-offset: 0.18em; }
.gnp a:hover { text-decoration-thickness: 2px; }
.gnp :is(a, button):focus-visible { outline: 2px solid var(--p-link); outline-offset: 2px; border-radius: 4px; }
.gnp img { max-inline-size: 100%; block-size: auto; }
/* un lien de texte isolé : une cible de 44 px, sans grossir le texte */
.gnp-link { display: inline-flex; align-items: center; min-block-size: 44px; min-inline-size: 44px; font-weight: 600; gap: 6px; }
/* un lien dont le nom n'est pas dans le modèle : le texte reste, sans promettre un clic (GnPublic::a) */
.gnp [data-gnp-dead] { text-decoration: none; cursor: default; }
.gnp :is(.gnp-card-go, .gnp-link, .gnp-foot-l)[data-gnp-dead] { color: var(--p-muted); font-weight: 400; }
.gnp [data-gnp-dead] > .gnp-arrow { display: none; }

/* les boutons : des liens (jamais un <button> pour aller quelque part) */
.gnp-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.gnp-center > .gnp-wrap > .gnp-hero-copy > .gnp-actions { justify-content: center; }
.gnp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-block-size: 48px; padding-block: 10px; padding-inline: 22px;
  border: 1.5px solid transparent; border-radius: var(--p-radius-btn); font-family: var(--p-font); font-size: 16px; line-height: 1.25; font-weight: 600; text-decoration: none; text-align: center;
  transition: filter var(--gn-motion-duration-hover, 120ms) var(--gn-motion-easing-default, ease), background-color var(--gn-motion-duration-hover, 120ms) var(--gn-motion-easing-default, ease); }
.gnp a.gnp-btn-primary, .gnp span.gnp-btn-primary { background: var(--p-fill); border-color: var(--p-fill); color: var(--p-on-fill); }
.gnp a.gnp-btn-primary:hover { filter: brightness(0.92); }
.gnp a.gnp-btn-ghost, .gnp span.gnp-btn-ghost { background: transparent; border-color: var(--p-line-strong); color: var(--p-text); }
.gnp a.gnp-btn-ghost:hover { background: var(--p-soft); color: var(--p-text); }
.gnp-btn-sm { min-block-size: 44px; padding-inline: 16px; font-size: 15px; }
.gnp-arrow { display: inline-block; inline-size: 1em; block-size: 1em; flex: none; }
[dir="rtl"] .gnp-arrow { transform: scaleX(-1); }

/* ── 3. L'en-tête de site (NavigationBar) ───────────────────────────────── */
.gnp-nav { --p-bg: var(--gn-surface, Canvas); border-block-end: 1px solid var(--p-line); position: relative; z-index: 30; }
.gnp-nav-in { max-inline-size: var(--p-max); margin-inline: auto; padding-inline: var(--p-pad); padding-block: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; min-inline-size: 0; }
.gnp a.gnp-brand { display: inline-flex; align-items: center; gap: 10px; min-block-size: 44px; min-inline-size: 0; text-decoration: none; color: var(--p-text); flex: 0 1 auto; }
.gnp-brand .gn-sb-mark, .gnp-brand .gn-sb-mark > svg, .gnp-brand .gn-sb-mark > img { inline-size: 34px; block-size: 34px; }
.gnp-brand .gn-sb-mark.gn-sb-wide, .gnp-brand .gn-sb-mark.gn-sb-wide > img { inline-size: auto; block-size: 34px; max-inline-size: 180px; }
.gnp-brand-txt { display: flex; flex-direction: column; line-height: 1.2; min-inline-size: 0; }
.gnp-brand-name { font-family: var(--p-font-head); font-weight: 800; font-size: 19px; letter-spacing: -0.01em; overflow-wrap: anywhere; }
[dir="rtl"] .gnp-brand-name { letter-spacing: 0; line-height: 1.4; }
/* un nom de marque se lit dans le sens de SES lettres : « Amicale.tn. » dans une page en arabe sortait « .e.tnAmical » (12 oct. 2026) */
.gnp-brand-name, .gnp-brand-name > * { unicode-bidi: plaintext; }
.gnp-brand-suffix { margin-inline-start: 6px; font-family: var(--p-font); font-size: 12.5px; font-weight: 500; letter-spacing: 0; color: var(--p-muted); }
.gnp-brand-sub { font-size: 12.5px; color: var(--p-muted); }
.gnp-nav-panel { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; flex: 1 1 560px; min-inline-size: 0; }   /* 560px : la barre reste sur UNE ligne tant que le panneau a cette place (mesuré : 4 px de trop la coupaient en deux à 1440, 12 oct. 2026) */
.gnp-nav-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; flex: 1 1 auto; min-inline-size: 0; }
.gnp-nav-links a, .gnp-nav-links span { display: inline-flex; align-items: center; min-block-size: 44px; min-inline-size: 44px; font-size: 15px; font-weight: 500; text-decoration: none; color: var(--p-text); }
.gnp-nav-links a:hover { color: var(--p-link); text-decoration: underline; }
.gnp-nav-links a[aria-current="page"] { color: var(--p-link); font-weight: 600; }
.gnp-nav-side { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.gnp-nav-side a.gnp-nav-login, .gnp-nav-side a.gnp-lang { display: inline-flex; align-items: center; min-block-size: 44px; min-inline-size: 44px; justify-content: center; padding-inline: 10px; font-size: 15px; font-weight: 500; text-decoration: none; color: var(--p-text); }
.gnp-nav-side a.gnp-nav-login:hover, .gnp-nav-side a.gnp-lang:hover { color: var(--p-link); text-decoration: underline; }
.gnp-langs { display: flex; align-items: center; gap: 0; }
.gnp-nav-toggle { display: none; align-items: center; justify-content: center; gap: 8px; min-block-size: 44px; min-inline-size: 44px; padding-inline: 10px; margin-inline-start: auto;
  background: transparent; color: var(--p-text); border: 1.5px solid var(--p-line-strong); border-radius: var(--p-radius-btn); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.gnp-nav-toggle svg { inline-size: 20px; block-size: 20px; flex: none; }
.gnp-nav-toggle .gnp-ico-close, .gnp-nav-toggle[aria-expanded="true"] .gnp-ico-open { display: none; }
.gnp-nav-toggle[aria-expanded="true"] .gnp-ico-close { display: block; }
@media (max-width: 880px) {
  /* le menu se replie SEULEMENT si le script est là pour le rouvrir (classe posée par GnPublic.js) : sans script, tout reste lisible */
  .gnp-nav.is-js .gnp-nav-toggle { display: inline-flex; }
  /* la marque laisse sa place au bouton « Menu » : un nom de deux lignes plutôt qu’une barre de deux rangées (mesuré à 390 px) */
  .gnp-nav.is-js a.gnp-brand { max-inline-size: calc(100% - 124px); }
  .gnp-nav.is-js .gnp-brand-name { font-size: 16px; line-height: 1.2; }
  .gnp-nav.is-js .gnp-brand-name.is-long { font-size: 14px; }
  .gnp-nav.is-js .gnp-nav-panel { display: none; flex-basis: 100%; }
  .gnp-nav.is-js .gnp-nav-panel.is-open { display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding-block: 8px 12px; border-block-start: 1px solid var(--p-line); }
  .gnp-nav.is-js .gnp-nav-panel.is-open .gnp-nav-links { flex-direction: column; align-items: stretch; gap: 0; }
  .gnp-nav.is-js .gnp-nav-panel.is-open .gnp-nav-links :is(a, span) { min-block-size: 48px; border-block-end: 1px solid var(--p-line); font-size: 16px; }
  .gnp-nav.is-js .gnp-nav-panel.is-open .gnp-nav-side { padding-block-start: 8px; }
  .gnp-nav.is-js .gnp-nav-panel.is-open .gnp-btn { flex: 1 1 100%; }
}
/* au-delà de 880 px : replié aussi quand la rangée ne tient PAS (beaucoup de liens, nom long, page rétrécie par un panneau) — GnPublic.js le mesure */
.gnp-nav.is-js.is-serre .gnp-nav-toggle { display: inline-flex; }
.gnp-nav.is-js.is-serre a.gnp-brand { max-inline-size: calc(100% - 124px); }
.gnp-nav.is-js.is-serre .gnp-brand-name { font-size: 16px; line-height: 1.2; }
.gnp-nav.is-js.is-serre .gnp-brand-name.is-long { font-size: 14px; }
.gnp-nav.is-js.is-serre .gnp-nav-panel { display: none; flex-basis: 100%; }
.gnp-nav.is-js.is-serre .gnp-nav-panel.is-open { display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding-block: 8px 12px; border-block-start: 1px solid var(--p-line); }
.gnp-nav.is-js.is-serre .gnp-nav-panel.is-open .gnp-nav-links { flex-direction: column; align-items: stretch; gap: 0; }
.gnp-nav.is-js.is-serre .gnp-nav-panel.is-open .gnp-nav-links :is(a, span) { min-block-size: 48px; border-block-end: 1px solid var(--p-line); font-size: 16px; }
.gnp-nav.is-js.is-serre .gnp-nav-panel.is-open .gnp-nav-side { padding-block-start: 8px; }
.gnp-nav.is-js.is-serre .gnp-nav-panel.is-open .gnp-btn { flex: 1 1 100%; }

/* ── 4. Le héros ────────────────────────────────────────────────────────── */
.gnp-hero { position: relative; overflow: hidden; }
.gnp-hero-fx { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.gnp-hero > .gnp-wrap { position: relative; z-index: 1; padding-block: clamp(48px, 8vw, 88px); gap: 40px; }
.gnp-hero-split > .gnp-wrap { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 40px 48px; }
.gnp-hero-copy { display: flex; flex-direction: column; gap: 20px; flex: 1 1 420px; min-inline-size: 0; }
/* le bandeau sobre (layout: start) : le texte au début de la ligne, à sa hauteur — pas les 420 px de base d'une colonne partagée */
.gnp-hero-start > .gnp-wrap { padding-block: clamp(40px, 6vw, 64px) clamp(16px, 3vw, 32px); }
.gnp-hero-start > .gnp-wrap > .gnp-hero-copy { flex: 0 1 auto; max-inline-size: 46em; }
.gnp-center > .gnp-wrap > .gnp-hero-copy { align-items: center; text-align: center; max-inline-size: 52em; margin-inline: auto; flex: 0 1 auto; }
.gnp-assure { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 14px; color: var(--p-muted); }
.gnp-center > .gnp-wrap > .gnp-hero-copy > .gnp-assure { justify-content: center; }
.gnp-assure li { display: inline-flex; align-items: center; gap: 7px; }
.gnp-assure li::before { content: ""; inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--p-line-strong); flex: none; }
.gnp-hero-media { flex: 1 1 480px; min-inline-size: 0; }
.gnp-center > .gnp-wrap > .gnp-hero-media { flex: 0 1 auto; inline-size: 100%; max-inline-size: 960px; margin-inline: auto; }
.gnp-hero-media > img { display: block; inline-size: 100%; border-radius: var(--p-radius); border: 1px solid var(--p-line); }
/* l'emplacement « écran » : un cadre, et dedans le bloc enfant (l'écran de démonstration viendra s'y poser) */
.gnp-screen { background: var(--gn-surface, Canvas); color: var(--gn-text, CanvasText); border: 1px solid var(--p-line); border-radius: var(--p-radius); box-shadow: var(--p-shadow); overflow: hidden; min-inline-size: 0; }
.gnp-screen > * { max-inline-size: 100%; }
/* un bloc posé dans un emplacement (l'écran du héros, la zone d'écriture du contact) : sans son fond ni ses grandes marges */
.gnp :is(.gnp-screen, .gnp-contact-form) .gnp { background: transparent; border: 0; }
.gnp :is(.gnp-screen, .gnp-contact-form) .gnp > .gnp-wrap { padding: 18px; gap: 14px; }
.gnp :is(.gnp-screen, .gnp-contact-form) .gnp-grid { --gnp-min: 150px; }
.gnp-screen-empty { min-block-size: 220px; display: grid; place-items: center; padding: 24px; color: var(--gn-muted, GrayText); font-size: 14px; text-align: center;
  background: repeating-linear-gradient(135deg, transparent 0 14px, color-mix(in srgb, currentColor 7%, transparent) 14px 15px); }

/* ── 5. Les cartes (CardGrid / CardItem) et la liste de points forts (TechFeatureSection) ── */
.gnp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--gnp-min, 250px)), 1fr)); gap: 16px; min-inline-size: 0; }
.gnp-grid[data-cols="1"] { --gnp-min: 100%; }
.gnp-grid[data-cols="2"] { --gnp-min: 400px; }
.gnp-grid[data-cols="3"] { --gnp-min: 300px; }
.gnp-grid[data-cols="4"] { --gnp-min: 240px; }
.gnp-card { display: flex; flex-direction: column; gap: 10px; padding: 22px; min-inline-size: 0; background: var(--p-surface); color: var(--p-text); border: 1px solid var(--p-line); border-radius: var(--p-radius); }
.gnp-card .gnp-kicker { font-size: 12.5px; text-transform: none; letter-spacing: 0; }
.gnp-card-text { color: var(--p-muted); font-size: 15px; }
.gnp-card-go { margin-block-start: auto; padding-block-start: 6px; font-weight: 600; color: var(--p-link); display: inline-flex; align-items: center; gap: 6px; min-block-size: 44px; }
.gnp-card-icon { inline-size: 40px; block-size: 40px; border-radius: var(--p-radius-btn); background: var(--p-soft); color: var(--p-link); display: grid; place-items: center; flex: none; }
.gnp-card-icon :is(svg, .iconify) { inline-size: 22px; block-size: 22px; }
/* la « porte » : la carte entière est le lien */
.gnp a.gnp-card.gnp-door { text-decoration: none; color: var(--p-text); transition: border-color var(--gn-motion-duration-hover, 120ms) ease, box-shadow var(--gn-motion-duration-hover, 120ms) ease; }
.gnp a.gnp-card.gnp-door:hover { border-color: var(--p-link); box-shadow: var(--p-shadow); }
.gnp a.gnp-card.gnp-door:hover .gnp-card-go { text-decoration: underline; }
.gnp-card.is-featured { border: 2px solid var(--p-link); padding: 21px; }
/* variante « tableau » : les cartes se touchent, une seule bordure autour */
.gnp-grid.gnp-joined { gap: 0; border: 1px solid var(--p-line); border-radius: var(--p-radius); overflow: hidden; background: var(--p-surface); }
.gnp-grid.gnp-joined .gnp-card { border: 0; border-radius: 0; box-shadow: 0 0 0 1px var(--p-line); padding: 24px; }
/* variante « liste » : des lignes séparées par un filet */
.gnp-grid.gnp-rows { display: flex; flex-direction: column; gap: 0; border-block-start: 1px solid var(--p-line); max-inline-size: 760px; }
.gnp-grid.gnp-rows .gnp-card { background: transparent; border: 0; border-block-end: 1px solid var(--p-line); border-radius: 0; padding-block: 16px; padding-inline: 0; gap: 4px; }
/* « rows » sur écran large (maquette, section de confiance) : le titre à gauche, les lignes à droite sur deux colonnes, sans filet */
@media (min-width: 960px) {
  .gnp-cards-rows > .gnp-wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: 56px; align-items: start; }
  .gnp-cards-rows > .gnp-wrap > .gnp-note { grid-column: 1 / -1; }
  .gnp-cards-rows .gnp-grid.gnp-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 40px; border: 0; max-inline-size: none; }
  .gnp-cards-rows .gnp-grid.gnp-rows[data-cols="1"] { grid-template-columns: minmax(0, 1fr); }
  .gnp-cards-rows .gnp-grid.gnp-rows .gnp-card { border: 0; padding: 0; }
  .gnp-cards-rows > .gnp-wrap > .gnp-head .gnp-h2 { font-size: clamp(24px, 2.3vw, 30px); }
}
/* sur une bande sombre, les cartes deviennent des colonnes coiffées d'un filet (maquette, « trois tâches ») */
.gnp-tone-dark.gnp-cards .gnp-grid:not(.gnp-joined):not(.gnp-rows) .gnp-card { background: transparent; border: 0; border-block-start: 2px solid var(--p-line-strong); border-radius: 0; box-shadow: none; padding-inline: 0; padding-block: 18px 0; }
.gnp-tone-dark.gnp-cards .gnp-grid:not(.gnp-joined):not(.gnp-rows) { gap: 28px; }
/* points forts numérotés : un filet de marque au-dessus de chacun */
.gnp-feats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 24px 20px; counter-reset: gnp-feat; }
.gnp-feat { display: flex; flex-direction: column; gap: 8px; padding-block-start: 18px; border-block-start: 2px solid var(--p-link); min-inline-size: 0; }
.gnp-feat .gnp-kicker { color: var(--p-muted); text-transform: none; letter-spacing: 0; }
.gnp-feat-text { color: var(--p-muted); }

/* ── 6. La section éditoriale (TextBlock structuré) ─────────────────────── */
.gnp-edito > .gnp-wrap { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 32px 48px; }
.gnp-edito-copy { flex: 1 1 420px; min-inline-size: 0; display: flex; flex-direction: column; gap: 14px; }
.gnp-edito-body { color: var(--p-muted); max-inline-size: 44em; display: flex; flex-direction: column; gap: 12px; }
.gnp-edito-list { display: flex; flex-direction: column; gap: 0; border-block-start: 1px solid var(--p-line); max-inline-size: 44em; }
.gnp-edito-list li { padding-block: 12px; border-block-end: 1px solid var(--p-line); display: flex; gap: 10px; align-items: baseline; }
.gnp-edito-list li::before { content: ""; inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--p-link); flex: none; transform: translateY(-1px); }
.gnp-edito-media { flex: 1 1 380px; min-inline-size: 0; }
.gnp-edito-media img { display: block; inline-size: 100%; border-radius: var(--p-radius); border: 1px solid var(--p-line); }

/* ── 7. L'appel à l'action (CallToAction) ───────────────────────────────── */
.gnp-cta > .gnp-wrap { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 24px 32px; padding-block: 56px; }
.gnp-cta-copy { flex: 2 1 420px; min-inline-size: 0; display: flex; flex-direction: column; gap: 8px; }
.gnp-cta > .gnp-wrap > .gnp-actions { flex: 0 1 auto; }

/* ── 8. Les tarifs (PricingCards / PricingCard) ─────────────────────────── */
.gnp-prices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 16px; align-items: stretch; }
.gnp-price { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 26px; background: var(--p-surface); border: 1px solid var(--p-line); border-radius: var(--p-radius); min-inline-size: 0; }
.gnp-price.is-featured { border: 2px solid var(--p-link); padding: 25px; box-shadow: var(--p-shadow); }
.gnp-price-badge { align-self: flex-start; padding-block: 3px; padding-inline: 10px; border-radius: var(--gn-chip-radius, 999px); background: var(--p-fill); color: var(--p-on-fill); font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
[dir="rtl"] .gnp-price-badge { letter-spacing: 0; }
.gnp-price-ribbon { align-self: flex-start; padding-block: 3px; padding-inline: 10px; border-radius: var(--gn-chip-radius, 999px); background: var(--p-surface-2); color: var(--p-text); border: 1px solid var(--p-line); font-size: 12.5px; font-weight: 600; }
.gnp-price-amount { font-family: var(--p-font-head); font-size: 44px; line-height: 1; font-weight: 800; font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.gnp-price-cur { font-size: 20px; font-weight: 700; }
.gnp-price-feats { display: flex; flex-direction: column; gap: 10px; }
.gnp-price-feats li { display: flex; gap: 10px; align-items: flex-start; }
.gnp-price-feats svg { inline-size: 18px; block-size: 18px; flex: none; color: var(--p-link); margin-block-start: 3px; }
.gnp-price .gnp-btn { margin-block-start: auto; }
.gnp-trial { border: 1px solid var(--p-line); border-radius: var(--p-radius); background: var(--p-surface); padding: 24px; display: flex; flex-direction: column; gap: 6px; max-inline-size: 760px; margin-inline: auto; text-align: center; align-items: center; }

/* ── 9. Le contact (ContactCard) ────────────────────────────────────────── */
.gnp-contact > .gnp-wrap { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 32px 48px; }
.gnp-contact-info { flex: 1 1 320px; min-inline-size: 0; display: flex; flex-direction: column; gap: 14px; }
.gnp-contact-ways { display: flex; flex-direction: column; gap: 2px; }
.gnp-contact-ways :is(a, span).gnp-way { display: inline-flex; align-items: center; gap: 10px; min-block-size: 44px; font-weight: 500; overflow-wrap: anywhere; }
.gnp-contact-ways .gnp-way svg { inline-size: 20px; block-size: 20px; flex: none; color: var(--p-muted); }
.gnp-contact-ways span.gnp-way { color: var(--p-text); }
.gnp-contact-form { flex: 1 1 380px; min-inline-size: 0; background: var(--p-surface); border: 1px solid var(--p-line); border-radius: var(--p-radius); padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.gnp-contact-form.is-slot { padding: 0; overflow: hidden; }
.gnp-contact-form.is-slot > .gnp-h3 { padding-block-start: 22px; padding-inline: 18px; }
.gnp-social { display: flex; flex-wrap: wrap; gap: 0 18px; }

/* ── 10. Le pied de site (FooterSection) ────────────────────────────────── */
.gnp-foot { --p-bg: var(--gn-surface, Canvas); border-block-start: 1px solid var(--p-line); font-size: 14.5px; }
.gnp-foot > .gnp-wrap { padding-block: 40px 28px; gap: 28px; }
.gnp-foot-top { display: flex; flex-wrap: wrap; gap: 28px 48px; align-items: flex-start; }
.gnp-foot-brand { flex: 1 1 260px; min-inline-size: 0; display: flex; flex-direction: column; gap: 8px; }
.gnp-foot-name { font-family: var(--p-font-head); font-weight: 800; font-size: 18px; color: var(--p-text); }
.gnp-foot-cols { flex: 3 1 420px; min-inline-size: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 20px 32px; }
.gnp-foot-col { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.gnp-foot-col-t { font-family: var(--p-font-head); font-weight: 700; font-size: 15px; color: var(--p-text); padding-block-end: 4px; }
.gnp-foot :is(a, span).gnp-foot-l { display: inline-flex; align-items: center; min-block-size: 44px; min-inline-size: 44px; color: var(--p-muted); text-decoration: none; }
.gnp-foot a.gnp-foot-l:hover { color: var(--p-link); text-decoration: underline; }
.gnp-foot-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0 26px; padding-block-start: 16px; border-block-start: 1px solid var(--p-line); color: var(--p-muted); }
.gnp-foot-legal { flex: 1 1 320px; min-inline-size: 0; display: flex; flex-direction: column; gap: 2px; padding-block: 8px; }
.gnp-foot-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 22px; }

@media (max-width: 640px) {
  .gnp { --p-pad: 18px; }
  .gnp-wrap { padding-block: 44px; gap: 24px; }
  .gnp-actions { flex-direction: column; align-items: stretch; }
  .gnp-actions .gnp-btn { inline-size: 100%; }
  .gnp-cta > .gnp-wrap > .gnp-actions { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { .gnp * { transition: none !important; } }

/* ── 11. Les données publiques (GnLecture) : la liste en mode public (DataTable3), l'annuaire dans une page
        (DirectoryBlock), la fiche vitrine (ViewRecord, viewMode « showcase »). Mêmes cartes, mêmes boutons, mêmes
        jetons que les blocs ci-dessus — rien n'est redéfini, seulement ce qui leur manquait. ── */
.gnp button.gnp-btn { font-family: inherit; cursor: pointer; }
.gnp button.gnp-btn-primary { background: var(--p-fill); border-color: var(--p-fill); color: var(--p-on-fill); }
.gnp button.gnp-btn-primary:hover { filter: brightness(0.92); }
.gnp button.gnp-btn[disabled] { opacity: 0.6; cursor: progress; }
.gnp-card-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-block-start: auto; padding-block-start: 8px; }
.gnp-card .gnp-h3 a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; min-block-size: 44px; }
.gnp-card .gnp-h3 a:hover { text-decoration: underline; color: var(--p-link); }
.gnp-empty { padding: 24px; border: 1px dashed var(--p-line-strong); border-radius: var(--p-radius); color: var(--p-muted); }
/* la fiche : une page qui se lit — surtitre, titre, texte, puis les champs en liste de définitions sur la largeur de lecture */
.gnp-record > .gnp-wrap { gap: 28px; }
.gnp-record-in { display: flex; flex-direction: column; gap: 22px; max-inline-size: 46em; min-inline-size: 0; }
.gnp-record-head { display: flex; flex-direction: column; gap: 10px; }
.gnp-record-body { display: flex; flex-direction: column; gap: 12px; font-size: 17px; color: var(--p-text); }
.gnp-defs { display: grid; grid-template-columns: minmax(0, 13em) minmax(0, 1fr); border-block-start: 1px solid var(--p-line); }
.gnp-defs > dt, .gnp-defs > dd { padding-block: 13px; border-block-end: 1px solid var(--p-line); min-inline-size: 0; }
.gnp-defs > dt { color: var(--p-muted); font-size: 14.5px; font-weight: 600; padding-inline-end: 20px; }
/* l'annuaire dans une page (.gn-an-bloc : le balisage est celui de GnAnnuaire, l'allure celle des blocs publics) */
.gn-an-bloc .gn-an-tete { display: flex; flex-direction: column; gap: 10px; max-inline-size: 46em; }
.gn-an-bloc .gn-an-chapo { color: var(--p-muted); font-size: clamp(17px, 1.6vw, 19px); }
.gn-an-bloc .gn-an-aide, .gn-an-bloc .gn-an-note, .gn-an-bloc .gn-an-extrait { color: var(--p-muted); font-size: 14px; }
.gn-an-bloc .gn-an-recherche { display: flex; flex-direction: column; gap: 6px; max-inline-size: 46em; }
.gn-an-bloc .gn-an-recherche label { font-size: 14.5px; font-weight: 600; }
.gn-an-bloc .gn-an-saisie { display: flex; flex-wrap: wrap; gap: 8px; }
.gn-an-bloc .gn-an-saisie input { flex: 1 1 240px; min-inline-size: 0; min-block-size: 48px; padding-block: 10px; padding-inline: 14px; font: inherit; color: var(--p-text); background: var(--p-surface); border: 1px solid var(--p-line-strong); border-radius: var(--p-radius-btn); }
.gn-an-bloc .gn-an-saisie input:focus-visible { outline: 2px solid var(--p-link); outline-offset: 2px; }
.gn-an-bloc .gn-an-corps { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 28px 32px; align-items: start; }
.gn-an-bloc .gn-an-corps > :only-child { grid-column: 1 / -1; }
.gn-an-bloc .gn-an-cote { display: flex; flex-direction: column; gap: 20px; min-inline-size: 0; }
.gn-an-bloc .gn-an-cote h2 { font-size: 15px; font-weight: 700; padding-block-end: 4px; }
.gn-an-bloc .gn-an-repartition a { display: grid; grid-template-columns: minmax(0, 1fr) 56px auto; gap: 8px; align-items: center; min-block-size: 44px; padding-inline: 8px; border-radius: var(--p-radius-btn); color: var(--p-text); text-decoration: none; }
.gn-an-bloc .gn-an-repartition a:hover, .gn-an-bloc .gn-an-repartition a[aria-current] { background: var(--p-soft); }
.gn-an-bloc .gn-an-repartition a[aria-current], .gn-an-bloc .gn-an-lien[aria-current] { font-weight: 700; color: var(--p-text); text-decoration: none; }
.gn-an-bloc .gn-an-absent { color: var(--p-muted); }
.gn-an-bloc .gn-an-barre { block-size: 6px; border-radius: 3px; background: linear-gradient(to right, var(--p-link) var(--gn-part, 0%), var(--p-line) var(--gn-part, 0%)); }
[dir="rtl"] .gn-an-bloc .gn-an-barre { background: linear-gradient(to left, var(--p-link) var(--gn-part, 0%), var(--p-line) var(--gn-part, 0%)); }
.gn-an-bloc .gn-an-n { color: var(--p-muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.gn-an-bloc .gn-an-lien, .gn-an-bloc .gn-an-bascule { display: inline-flex; align-items: center; gap: 8px; min-block-size: 44px; font-weight: 600; }
.gn-an-bloc .gn-an-resultats { display: flex; flex-direction: column; gap: 14px; min-inline-size: 0; }
.gn-an-bloc .gn-an-total { font-size: 18px; }
.gn-an-bloc .gn-an-ou { color: var(--p-muted); font-weight: 400; }
.gn-an-bloc .gn-an-pages { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; font-size: 14.5px; color: var(--p-muted); }
.gn-an-bloc .gn-an-carte-titre a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; min-block-size: 44px; }
.gn-an-bloc .gn-an-carte-titre a:hover { text-decoration: underline; color: var(--p-link); }
.gn-an-bloc .gn-an-carte-ligne { font-size: 15px; }
.gn-an-bloc .gn-an-carte-lib { font-size: 13px; font-weight: 600; color: var(--p-muted); }
.gn-an-bloc .gn-an-manque { color: var(--p-muted); }
.gn-an-bloc .gn-an-vide, .gn-an-bloc .gn-an-encadre { padding: 24px; border: 1px dashed var(--p-line-strong); border-radius: var(--p-radius); color: var(--p-muted); display: flex; flex-direction: column; gap: 8px; }
.gn-an-bloc .gn-an-actions { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.gn-an-bloc .gn-an-table { overflow-x: auto; background: var(--p-surface); border: 1px solid var(--p-line); border-radius: var(--p-radius); }
.gn-an-bloc table { border-collapse: collapse; inline-size: 100%; font-size: 15px; }
.gn-an-bloc th { text-align: start; font-size: 13px; color: var(--p-muted); border-block-end: 1px solid var(--p-line-strong); padding: 10px 12px; white-space: nowrap; }
.gn-an-bloc td { border-block-end: 1px solid var(--p-line); padding: 10px 12px; vertical-align: top; }
.gn-an-bloc mark { background: var(--p-soft); color: inherit; padding-inline: 2px; }
.gn-an-bloc .gn-an-pied:empty { display: none; }
.gn-an-bloc .gn-an-pied { color: var(--p-muted); font-size: 14px; }
@media (max-width: 860px) { .gn-an-bloc .gn-an-corps { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .gnp-defs { grid-template-columns: minmax(0, 1fr); }
  .gnp-defs > dt { border-block-end: 0; padding-block-end: 0; }
  .gnp-defs > dd { padding-block-start: 2px; }
  .gnp-card-acts { flex-direction: column; align-items: stretch; }
  .gnp-card-acts .gnp-btn { inline-size: 100%; }
}

/* ── Les chiffres, les questions, les clients, l'étude de cas, la bannière d'essai, le bouton de son
      (StatsCards / StatsCard, FAQCards / FAQCard, ClientsCard, ImpactShowcaseCard, TrailBanner, MusicAndSound) ── */
.gnp-stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 16px; }
.gnp-stat { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 18px; text-align: center; min-inline-size: 0;
  background: var(--p-surface); border: 1px solid var(--p-line); border-radius: var(--p-radius); color: var(--p-text); }
.gnp-stat-value { font-family: var(--p-font-head); font-size: clamp(34px, 4.4vw, 52px); line-height: 1.05; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--p-text); }
.gnp-stat-label { font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--p-muted); }
[dir="rtl"] .gnp-stat-label { letter-spacing: 0; font-size: 15px; }
.gnp-stat.is-underlined .gnp-stat-value { padding-block-end: 10px; border-block-end: 3px solid var(--p-line-strong); }
.gnp-stat.is-shiny { transition: border-color var(--gn-motion-duration-hover, 120ms) ease, transform var(--gn-motion-duration-hover, 120ms) ease; }
.gnp-stat.is-shiny:hover { border-color: var(--p-line-strong); transform: translateY(-2px); }
.gnp-stats-framed { outline: 10px solid color-mix(in srgb, var(--p-text) 14%, transparent); outline-offset: -10px; }
/* le fond qui respire : un voile très léger, de la couleur du texte de la bande — immobile si l'on a demandé moins d'animations */
.gnp-stats-breathe { position: relative; overflow: hidden; }
.gnp-stats-breathe::before { content: ""; position: absolute; inset-block-start: -30%; inset-inline-start: 10%; inline-size: 46%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--p-text) 10%, transparent) 0%, transparent 68%); animation: gnp-breathe 9s ease-in-out infinite; }
.gnp-stats-breathe > .gnp-wrap { position: relative; }
@keyframes gnp-breathe { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(18px) scale(1.08); } }

.gnp-faq-list { display: flex; flex-direction: column; gap: 12px; inline-size: 100%; max-inline-size: 760px; margin-inline: auto; text-align: start; }
.gnp-faq-item { background: var(--p-surface); border: 1px solid var(--p-line); border-radius: var(--p-radius); min-inline-size: 0; }
.gnp-faq-item > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-block-size: 56px; padding-block: 12px; padding-inline: 20px; cursor: pointer; list-style: none; border-radius: var(--p-radius); }
.gnp-faq-item > summary::-webkit-details-marker { display: none; }
.gnp-faq-item > summary:focus-visible { outline: 2px solid var(--p-link); outline-offset: 2px; }
.gnp-faq-chevron { inline-size: 20px; block-size: 20px; flex: none; color: var(--p-link); transition: transform var(--gn-motion-duration-hover, 120ms) ease; }
.gnp-faq-item[open] .gnp-faq-chevron { transform: rotate(180deg); }
.gnp-faq-answer { padding-block: 0 18px; padding-inline: 20px; color: var(--p-muted); display: flex; flex-direction: column; gap: 10px; }
.gnp-faq-item.has-border { border-inline-start: 4px solid var(--p-link); }
.gnp-faq-item.has-shadow, .gnp-faq-item.hover-shadow:hover { box-shadow: var(--p-shadow); }
.gnp-faq-item.hover-border:hover { border-color: var(--p-link); }
.gnp-faq-item.hover-ink > summary:hover .gnp-h3 { color: var(--p-link); }
.gnp-faq-item.is-animated[open] .gnp-faq-answer { animation: gnp-reveal 240ms ease; }
@keyframes gnp-reveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.gnp-clients-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 14px; }
.gnp-client { display: grid; place-items: center; min-block-size: 84px; padding: 16px; text-align: center; background: var(--p-surface); border: 1px solid var(--p-line); border-radius: var(--p-radius);
  font-family: var(--p-font-head); font-weight: 700; font-size: 18px; color: var(--p-text); overflow-wrap: anywhere; }
.gnp figure.gnp-quote { inline-size: 100%; max-inline-size: 760px; margin-inline: auto; padding: 28px; text-align: start; background: var(--p-surface); border: 1px solid var(--p-line); border-inline-start: 4px solid var(--p-link); border-radius: var(--p-radius); display: flex; flex-direction: column; gap: 16px; }
.gnp-quote blockquote { margin: 0; font-size: clamp(17px, 1.8vw, 20px); font-style: italic; color: var(--p-text); }
[dir="rtl"] .gnp-quote blockquote { font-style: normal; }
.gnp-quote figcaption { display: flex; flex-direction: column; gap: 2px; }
.gnp-quote-author { font-weight: 700; color: var(--p-text); }

.gnp-case-card { display: flex; flex-wrap: wrap; text-align: start; background: var(--p-surface); border: 1px solid var(--p-line); border-radius: var(--p-radius); overflow: hidden; box-shadow: var(--p-shadow); }
.gnp-case-figure { flex: 1 1 260px; min-inline-size: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 36px 24px; text-align: center;
  background: var(--p-brand); color: var(--p-on-brand); }
.gnp-case-value { font-family: var(--p-font-head); font-size: clamp(44px, 6vw, 64px); line-height: 1; font-weight: 800; }
.gnp-case-what { font-size: 18px; }
.gnp p.gnp-case-client { margin-block-start: 14px; padding-block: 8px; padding-inline: 14px; border: 1px solid currentColor; border-radius: var(--p-radius-btn); font-weight: 700; }
.gnp-case-body { flex: 2 1 420px; min-inline-size: 0; display: flex; flex-direction: column; gap: 16px; padding: 32px; }
.gnp-case-table { overflow-x: auto; border: 1px solid var(--p-line); border-radius: var(--p-radius-btn); }
.gnp-case-table table { inline-size: 100%; border-collapse: collapse; font-size: 15px; }
.gnp-case-table :is(th, td) { padding-block: 11px; padding-inline: 16px; text-align: start; border-block-end: 1px solid var(--p-line); color: var(--p-text); font-weight: 400; }
.gnp-case-table thead th { background: var(--p-surface-2); font-weight: 600; font-size: 13.5px; }
.gnp-case-table tbody tr:last-child :is(th, td) { border-block-end: 0; }
.gnp-case-table td { color: var(--p-muted); }
.gnp-case-table td.gnp-case-after { color: var(--p-link); font-weight: 600; }

.gnp-banner > .gnp-wrap { padding-block: 48px; }

/* le bouton de son : posé sur la page, en bas à la fin de la ligne (ou selon `buttonPosition`) */
.gnp.gnp-sound { position: fixed; inset-block-end: 24px; inset-inline-end: 24px; inline-size: auto; z-index: 50; }
.gnp.gnp-sound.is-top { inset-block-end: auto; inset-block-start: 24px; }
.gnp.gnp-sound.is-start { inset-inline-end: auto; inset-inline-start: 24px; }
.gnp-sound-btn { display: inline-flex; align-items: center; gap: 8px; min-block-size: 44px; min-inline-size: 44px; padding-block: 8px; padding-inline: 14px; cursor: pointer;
  background: var(--gn-surface, Canvas); color: var(--gn-text, CanvasText); border: 1px solid var(--p-line-strong); border-radius: 999px; box-shadow: var(--p-shadow); font: inherit; font-size: 14px; font-weight: 500; }
.gnp-sound-btn svg { inline-size: 20px; block-size: 20px; flex: none; }
.gnp-sound-btn .gnp-sound-on, .gnp-sound-btn[aria-pressed="true"] .gnp-sound-off { display: none; }
.gnp-sound-btn[aria-pressed="true"] .gnp-sound-on { display: inline; }

@media (max-width: 640px) {
  .gnp-case-body { padding: 22px; }
  .gnp.gnp-sound { inset-block-end: 14px; inset-inline-end: 14px; }
  .gnp-sound-label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { .gnp-stats-breathe::before, .gnp-faq-item.is-animated[open] .gnp-faq-answer { animation: none !important; } .gnp-stat.is-shiny:hover { transform: none; } }

/* ══ LOT 3 — avis datés (NoticeBoard), écran de démonstration (DemoScreen), suivi d'état (StatusTracker), plan à zones (ZoneMap) ══
   Mêmes règles que le reste de la feuille : jetons seulement, propriétés logiques, sombre par .dark de <body>. */
.gnp-sr { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* une pastille d'état : la paire fond / encre du ton, telle que le système de design la garantit lisible */
.gnp-chip { --chip-bg: var(--gn-neutral-soft, color-mix(in srgb, CanvasText 8%, Canvas)); --chip-ink: var(--gn-neutral-ink, CanvasText); --chip-line: var(--gn-neutral-line, color-mix(in srgb, CanvasText 30%, Canvas));
  display: inline-flex; align-items: center; min-block-size: 26px; padding-block: 2px; padding-inline: 10px; border: 1px solid var(--chip-line); border-radius: var(--gn-chip-radius, 999px);
  background: var(--chip-bg); color: var(--chip-ink); font-size: 13.5px; font-weight: 600; line-height: 1.3; white-space: nowrap; }
.gnp-chip.is-ok { --chip-bg: var(--gn-ok-soft, color-mix(in srgb, CanvasText 8%, Canvas)); --chip-ink: var(--gn-ok-ink, CanvasText); --chip-line: var(--gn-ok-line, color-mix(in srgb, CanvasText 30%, Canvas)); }
.gnp-chip.is-warn { --chip-bg: var(--gn-warn-soft, color-mix(in srgb, CanvasText 8%, Canvas)); --chip-ink: var(--gn-warn-ink, CanvasText); --chip-line: var(--gn-warn-line, color-mix(in srgb, CanvasText 30%, Canvas)); }
.gnp-chip.is-danger { --chip-bg: var(--gn-danger-soft, color-mix(in srgb, CanvasText 8%, Canvas)); --chip-ink: var(--gn-danger-ink, CanvasText); --chip-line: var(--gn-danger-line, color-mix(in srgb, CanvasText 30%, Canvas)); }
.gnp-chip.is-info { --chip-bg: var(--gn-info-soft, color-mix(in srgb, CanvasText 8%, Canvas)); --chip-ink: var(--gn-info-ink, CanvasText); --chip-line: var(--gn-info-line, color-mix(in srgb, CanvasText 30%, Canvas)); }

/* ce qui se pose sur la surface de la PAGE au milieu d'une section teintée (un cadre d'écran, un plan, un avis d'alerte) relit les encres de la page */
.gnp :is(.gnp-demo-frame, .gnp-zone-scroll, .gnp-notice.is-alert, .gnp-track-msg) {
  --p-text: var(--gn-text, CanvasText); --p-muted: var(--gn-muted, color-mix(in srgb, CanvasText 70%, Canvas)); --p-link: var(--gn-action-ink, var(--color-primary, LinkText));
  --p-line: var(--gn-line, color-mix(in srgb, CanvasText 16%, Canvas)); --p-line-strong: var(--gn-line-strong, color-mix(in srgb, CanvasText 45%, Canvas));
  --p-soft: var(--gn-action-soft, var(--gn-primary-soft, color-mix(in srgb, LinkText 12%, Canvas))); color: var(--p-text); }

/* ── les avis datés ── */
.gnp-notice-list { display: flex; flex-direction: column; gap: 12px; max-inline-size: 820px; min-inline-size: 0; }
.gnp-notice { display: flex; flex-direction: column; gap: 6px; padding-block: 18px; padding-inline: 20px; min-inline-size: 0; background: var(--p-surface); color: var(--p-text);
  border: 1px solid var(--p-line); border-inline-start: 4px solid var(--p-line-strong); border-radius: var(--p-radius); }
.gnp-notice-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; max-inline-size: none; }
.gnp-notice-cards > .gnp-notice { block-size: 100%; }
.gnp-notice-action { margin-block-start: auto; padding-block-start: 14px; }
.gnp-notice-action > .gnp-btn { inline-size: 100%; justify-content: center; text-align: center; }
.gnp-notice-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 14px; color: var(--p-muted); }
.gnp-notice-kind { font-weight: 700; color: var(--p-text); }
.gnp-notice-pin { font-weight: 600; }
.gnp-notice-text { color: var(--p-muted); }
.gnp-notice-lang { font-size: 13.5px; color: var(--p-muted); font-style: italic; }
[dir="rtl"] .gnp-notice-lang { font-style: normal; }
/* la nature d'alerte (une coupure) : la paire « danger » du système, pas une couleur choisie ici */
.gnp-notice.is-alert { background: var(--gn-danger-soft, var(--gn-surface, Canvas)); border-color: var(--gn-danger-line, var(--p-line-strong)); border-inline-start-color: var(--gn-danger, var(--p-line-strong)); }
.gnp .gnp-notice.is-alert :is(h3, .gnp-notice-text) { color: var(--gn-text, CanvasText); }
.gnp-notice.is-alert :is(.gnp-notice-meta, .gnp-notice-kind, .gnp-notice-lang) { color: var(--gn-danger-ink, var(--gn-text, CanvasText)); }

/* ── l'écran de démonstration ── */
.gnp-demo-frame { margin: 0; background: var(--gn-surface, Canvas); border: 1px solid var(--p-line); border-radius: var(--p-radius); box-shadow: var(--p-shadow); overflow: hidden; min-inline-size: 0; inline-size: 100%; }
.gnp-demo-bar { display: flex; align-items: center; gap: 10px; padding-block: 9px; padding-inline: 14px; border-block-end: 1px solid var(--p-line); background: var(--gn-surface-2, color-mix(in srgb, CanvasText 5%, Canvas)); min-inline-size: 0; }
.gnp-demo-dots { display: inline-flex; gap: 5px; flex: none; }
.gnp-demo-dots i { inline-size: 9px; block-size: 9px; border-radius: 50%; background: var(--p-line-strong); }
.gnp-demo-title { flex: 1 1 auto; min-inline-size: 0; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gnp-demo-badge { flex: none; padding-block: 2px; padding-inline: 10px; border-radius: var(--gn-chip-radius, 999px); font-size: 12.5px; font-weight: 700; white-space: nowrap;
  background: var(--gn-info-soft, color-mix(in srgb, CanvasText 8%, Canvas)); color: var(--gn-info-ink, CanvasText); border: 1px solid var(--gn-info-line, color-mix(in srgb, CanvasText 30%, Canvas)); }
.gnp-demo-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); border-block-end: 1px solid var(--p-line); }
.gnp-demo-figs li { display: flex; flex-direction: column; gap: 2px; padding-block: 14px; padding-inline: 16px; min-inline-size: 0; box-shadow: 0 0 0 0.5px var(--p-line); }
.gnp-demo-fig-l { font-size: 13px; color: var(--p-muted); }
.gnp-demo-fig-v { align-self: flex-start; font-family: var(--p-font-head); font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.gnp-demo-body { min-inline-size: 0; overflow-x: auto; }
.gnp-demo-dt3 { min-inline-size: 0; }
.gnp-demo-img { display: block; inline-size: 100%; }
/* la liste montrée en démonstration : ni menu d'actions ni options de colonne (rien à exporter, rien à régler), et une recherche à hauteur de doigt */
.gnp .gnp-demo-dt3 :is([data-role="morebtn"], .dt3-hmenu) { display: none; }
.gnp .gnp-demo-dt3 .dt3-search { padding-block: 0; }
.gnp .gnp-demo-dt3 .dt3-search input { min-block-size: 44px; }
.gnp-demo-table { inline-size: 100%; border-collapse: collapse; font-size: 14.5px; }
.gnp-demo-table :is(th, td) { padding-block: 10px; padding-inline: 14px; text-align: start; white-space: nowrap; border-block-end: 1px solid var(--p-line); }
.gnp-demo-table th { font-size: 13px; font-weight: 600; color: var(--p-muted); }
.gnp-demo-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; padding-block: 4px; padding-inline: 16px; border-block-start: 1px solid var(--p-line); font-size: 14.5px; color: var(--p-muted); }
/* view: record (lot 11, 12 oct. 2026) : une fiche — un statut, puis libellé/valeur */
.gnp-demo-record { padding-block: 4px; }
.gnp-demo-rec-head { padding-block: 14px; padding-inline: 16px; border-block-end: 1px solid var(--p-line); }
.gnp-demo-rec-status { display: inline-flex; padding-block: 3px; padding-inline: 11px; border-radius: var(--gn-chip-radius, 999px); font-size: 13px; font-weight: 700;
  background: var(--gn-info-soft, color-mix(in srgb, CanvasText 8%, Canvas)); color: var(--gn-info-ink, CanvasText); border: 1px solid var(--gn-info-line, color-mix(in srgb, CanvasText 30%, Canvas)); }
.gnp-demo-rec-body { margin: 0; }
.gnp-demo-rec-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; padding-block: 11px; padding-inline: 16px; border-block-end: 1px solid var(--p-line); }
.gnp-demo-rec-row dt { margin: 0; font-size: 13.5px; color: var(--p-muted); }
.gnp-demo-rec-row dd { margin: 0; font-size: 14.5px; font-weight: 600; text-align: end; }
/* view: dashboard (lot 11, 12 oct. 2026) : les chiffres déclarés en tuiles, puis une courte liste */
.gnp-demo-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: 1px; border-block-end: 1px solid var(--p-line); background: var(--p-line); }
.gnp-demo-tile { display: flex; flex-direction: column; gap: 4px; padding-block: 16px; padding-inline: 16px; background: var(--gn-surface, Canvas); }
.gnp-demo-tile-v { font-family: var(--p-font-head); font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; align-self: flex-start; }
.gnp-demo-tile-l { font-size: 13px; color: var(--p-muted); }
/* dans l'emplacement « écran » d'un héros, c'est le cadre du héros qui encadre */
.gnp .gnp-screen .gnp.gnp-demo > .gnp-wrap { padding: 0; }
.gnp-screen .gnp-demo-frame { border: 0; border-radius: 0; box-shadow: none; }

/* ── le suivi d'état ── */
.gnp-steps { display: flex; align-items: flex-start; min-inline-size: 0; }
.gnp-step { position: relative; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 4px; min-inline-size: 0; padding-inline: 6px; text-align: center; }
.gnp-step::before { content: ""; position: absolute; inset-block-start: 17px; inset-inline-start: -50%; inline-size: 100%; block-size: 2px; background: var(--p-line-strong); }
.gnp-step:first-child::before { display: none; }
.gnp-step:is(.is-done, .is-cur)::before { background: var(--p-fill); }
.gnp-step-dot { position: relative; z-index: 1; inline-size: 36px; block-size: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: 15px; font-weight: 700; line-height: 1;
  background: var(--p-bg); border: 2px solid var(--p-line-strong); color: var(--p-muted); }
.gnp-step.is-done .gnp-step-dot { background: var(--p-fill); border-color: var(--p-fill); color: var(--p-on-fill); }
.gnp-step.is-cur .gnp-step-dot { border-color: var(--p-fill); color: var(--p-text); box-shadow: 0 0 0 4px var(--p-soft); }
.gnp-step-lab { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.gnp-step.is-todo .gnp-step-lab { font-weight: 500; color: var(--p-muted); }
.gnp-step-state { font-size: 13px; color: var(--p-muted); }
.gnp-step.is-cur .gnp-step-state { font-weight: 700; color: var(--p-text); }
/* une étape éventuelle : un point creux en pointillés, sans rang — « si nécessaire » */
.gnp-step.is-opt:not(.is-cur) .gnp-step-dot { background: transparent; border-style: dashed; border-color: var(--p-muted); inline-size: 22px; block-size: 22px; margin-block: 7px; }
.gnp-step.is-opt:not(.is-cur) .gnp-step-lab { font-weight: 500; font-style: italic; color: var(--p-muted); }
.gnp-track-form { display: flex; flex-direction: column; gap: 8px; max-inline-size: 540px; min-inline-size: 0; }
.gnp-track-label { font-weight: 600; }
.gnp-track-row { display: flex; flex-wrap: wrap; gap: 10px; }
.gnp-track-input { flex: 1 1 200px; min-inline-size: 0; min-block-size: 48px; padding-block: 8px; padding-inline: 14px; font-family: var(--p-font-mono); font-size: 17px; letter-spacing: 0.06em;
  background: var(--gn-c-field-background, var(--gn-surface, Canvas)); color: var(--gn-c-field-text, var(--gn-text, CanvasText));
  border: 1.5px solid var(--gn-c-field-border-color, var(--gn-line-strong, color-mix(in srgb, CanvasText 45%, Canvas))); border-radius: var(--gn-c-field-radius, var(--p-radius-btn)); }
.gnp-track-input:focus-visible { outline: 2px solid var(--p-link); outline-offset: 2px; }
.gnp button.gnp-btn-primary { cursor: pointer; background: var(--p-fill); border-color: var(--p-fill); color: var(--p-on-fill); }
.gnp button.gnp-btn-primary:hover { filter: brightness(0.92); }
.gnp-track-result { max-inline-size: 540px; }
.gnp-track-result:empty { display: none; }
.gnp-track-msg { padding-block: 12px; padding-inline: 14px; max-inline-size: 540px; background: var(--gn-surface, Canvas); border: 1px solid var(--p-line-strong); border-radius: var(--p-radius-btn); }
.gnp-track-msg.is-refused { background: var(--gn-warn-soft, var(--gn-surface, Canvas)); border-color: var(--gn-warn-line, var(--p-line-strong)); color: var(--gn-warn-ink, var(--gn-text, CanvasText)); }
.gnp-track-now { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 17px; }
.gnp-track-now .gnp-chip { font-size: 15px; min-block-size: 32px; }
.gnp-track-date { color: var(--p-muted); }

/* ── le plan à zones ──
   Constat du 12 oct. 2026 (lot 11) : en arabe à 390 px, la zone 1 (x=6 %) disparaît du cadre au chargement — scrollLeft
   initial à 0, Chromium ET Firefox l'ancrent au bord DROIT du plan de 560 px quand le cadre hérite dir="rtl" de la page.
   Le plan est une image physique (jamais mirée pour l'arabe, voir le commentaire de ZoneMap::zonesDites) : son défilement
   ne doit donc jamais suivre le sens d'écriture de la page — direction: ltr fige le bord gauche (x=0) comme ancre, dans
   les deux langues, pour que le chargement montre toujours la même partie du plan. */
.gnp-zone-scroll { overflow-x: auto; direction: ltr; background: var(--gn-surface, Canvas); border: 1px solid var(--p-line); border-radius: var(--p-radius); min-inline-size: 0; }
.gnp-zone-scroll:focus-visible { outline: 2px solid var(--p-link); outline-offset: 2px; }
.gnp-zone-plan { min-inline-size: 560px; }
.gnp-zone-svg { display: block; inline-size: 100%; block-size: auto; }
.gnp-zone-ground { fill: var(--gn-surface-2, color-mix(in srgb, CanvasText 5%, Canvas)); }
.gnp-zone { --z-bg: var(--gn-neutral-soft, color-mix(in srgb, CanvasText 10%, Canvas)); --z-ink: var(--gn-neutral-ink, CanvasText); --z-line: var(--gn-neutral-line, color-mix(in srgb, CanvasText 45%, Canvas)); cursor: pointer; }
.gnp-zone.is-ok { --z-bg: var(--gn-ok-soft, color-mix(in srgb, CanvasText 10%, Canvas)); --z-ink: var(--gn-ok-ink, CanvasText); --z-line: var(--gn-ok-line, color-mix(in srgb, CanvasText 45%, Canvas)); }
.gnp-zone.is-warn { --z-bg: var(--gn-warn-soft, color-mix(in srgb, CanvasText 10%, Canvas)); --z-ink: var(--gn-warn-ink, CanvasText); --z-line: var(--gn-warn-line, color-mix(in srgb, CanvasText 45%, Canvas)); }
.gnp-zone.is-danger { --z-bg: var(--gn-danger-soft, color-mix(in srgb, CanvasText 10%, Canvas)); --z-ink: var(--gn-danger-ink, CanvasText); --z-line: var(--gn-danger-line, color-mix(in srgb, CanvasText 45%, Canvas)); }
.gnp-zone.is-info { --z-bg: var(--gn-info-soft, color-mix(in srgb, CanvasText 10%, Canvas)); --z-ink: var(--gn-info-ink, CanvasText); --z-line: var(--gn-info-line, color-mix(in srgb, CanvasText 45%, Canvas)); }
.gnp-zone :is(rect, polygon, circle) { fill: var(--z-bg); stroke: var(--z-line); stroke-width: 0.35; }
.gnp-zone text { fill: var(--z-ink); font-family: var(--p-font); font-size: 2.6px; font-weight: 700; pointer-events: none; }
.gnp-zone:is(:hover, :focus-visible) :is(rect, polygon, circle) { stroke: var(--p-link); stroke-width: 0.9; }
.gnp a.gnp-zone:focus-visible { outline: 2px solid var(--p-link); outline-offset: 1px; }
.gnp-zone-legend { display: flex; flex-wrap: wrap; gap: 8px; }
.gnp-zone-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 8px; min-inline-size: 0; }
.gnp-zone-item { display: flex; align-items: center; gap: 10px; min-block-size: 48px; padding-block: 8px; padding-inline: 12px; min-inline-size: 0; background: var(--p-surface); color: var(--p-text);
  border: 1px solid var(--p-line); border-radius: var(--p-radius-btn); scroll-margin-block-start: 90px; }
.gnp-zone-item:is(:target, :focus) { border-color: var(--p-link); box-shadow: 0 0 0 2px var(--p-soft); outline: none; }
.gnp-zone-key { font-weight: 700; white-space: nowrap; }
.gnp-zone-name { flex: 1 1 auto; min-inline-size: 0; overflow-wrap: anywhere; color: var(--p-muted); }

/* LE FORMULAIRE DE CRÉATION D'ESPACE (TenantSignup, lot 8, 12 octobre 2026) : un champ par ligne, cibles de 44 px,
   le même encadré « succès » que le dépôt public (gn-depot-ok), sous un autre nom pour ne pas s'y confondre. */
.gnp-ins-wrap { max-inline-size: 560px; }
.gnp-ins-field { display: flex; flex-direction: column; gap: 6px; margin-block-end: 16px; }
.gnp-ins-field label { font-weight: 600; font-size: 15px; color: var(--p-text); }
.gnp-ins-field input, .gnp-ins-field select { font: inherit; font-size: 16px; min-block-size: 48px; min-inline-size: 0; padding-block: 10px; padding-inline: 14px;
  border: 1.5px solid var(--p-line); border-radius: var(--p-radius-btn); background: var(--p-surface); color: var(--p-text); box-sizing: border-box; inline-size: 100%; }
.gnp-ins-field input:focus-visible, .gnp-ins-field select:focus-visible { outline: 2px solid var(--p-link); outline-offset: 2px; }
.gnp-ins-help { font-size: 14px; color: var(--p-muted); }
.gnp-ins-err { font-size: 14px; color: var(--gn-danger-ink, CanvasText); }
.gnp-ins-field.has-err input, .gnp-ins-field.has-err select { border-color: var(--gn-danger-line, color-mix(in srgb, CanvasText 45%, Canvas)); }
.gnp-ins-trap { position: absolute; inline-size: 1px; block-size: 1px; margin-inline-start: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
/* le champ piège lui-même : un <input> est un élément REMPLACÉ, sa largeur par défaut (~200 px, selon le moteur)
   ne se réduit jamais à celle de son conteneur (contrairement à un simple <div>) — mesuré le 12 octobre 2026
   (Firefox seul, 390 px : débordement de 4 px). Le conteneur l'écrase déjà visuellement (clip-path+overflow) ;
   ceci force aussi sa BOÎTE à rester dans ce même pixel, dans les deux moteurs. */
.gnp-ins-trap input { max-inline-size: 100%; }
.gnp-ins-legal { font-size: 13.5px; color: var(--p-muted); margin-block-start: 6px; }
.gnp-ins-ok { margin: 0; padding: 28px 24px; border: 1px solid var(--gn-ok-line, color-mix(in srgb, CanvasText 30%, Canvas)); border-inline-start-width: 6px;
  border-radius: var(--p-radius); background: var(--gn-ok-soft, color-mix(in srgb, CanvasText 8%, Canvas)); color: var(--p-text); text-align: start; }
.gnp-ins-ok[hidden] { display: none; }
.gnp-ins-ok:focus { outline: 2px solid var(--p-link); outline-offset: 3px; }
.gnp-ins-trial { margin-block-start: 14px; padding: 12px 14px; border: 1px solid var(--gn-warn-line, var(--p-line)); border-radius: var(--p-radius);
  background: var(--gn-warn-soft, var(--p-soft)); color: var(--p-text); font-size: 14px; }

@media (max-width: 640px) {
  /* la frise se lit de haut en bas : rien à faire défiler */
  .gnp-steps { flex-direction: column; gap: 14px; }
  .gnp-step { flex: none; flex-direction: row; align-items: center; gap: 12px; padding-inline: 0; text-align: start; inline-size: 100%; }
  .gnp-step::before { inset-block-start: -14px; inset-inline-start: 17px; inline-size: 2px; block-size: 14px; }
  .gnp-step-state { margin-inline-start: auto; }
  .gnp-ins-ok { padding: 20px 16px; }
  .gnp-track-row .gnp-btn { flex: 1 1 100%; }
}

/* Le panneau d'édition d'un bloc (étiquette bleue « [std]… · Studio », en développement) reste caché tant que l'éditeur
   de page ne le montre pas. La règle ne vivait que dans les gabarits de l'application : sur une page du site public
   les étiquettes s'affichaient en permanence, visiteur compris (vu le 12 oct. 2026). */
.editBlockPanelHidden { display: none !important; visibility: hidden; }

/* ── La page en deux volets (GnPublicBlock::gnpVolets — maquette « Présentation » et « Créer mon espace ») ───────
   Le volet sombre dit pourquoi on est là, l'autre porte ce qu'il y a à faire. Sous 900 px ils s'empilent, le volet
   sombre d'abord et sans hauteur imposée. Propriétés logiques seulement : en droite-à-gauche le volet sombre passe à droite. */
.gnp-volets { display: grid; grid-template-columns: minmax(0, 1fr); min-inline-size: 0; }
.gnp-volets-dit { display: flex; min-inline-size: 0; }
.gnp-volets-dit-in { display: flex; flex-direction: column; gap: 40px; inline-size: 100%; max-inline-size: 640px; margin-inline-start: auto; padding-block: 40px 32px; padding-inline: var(--p-pad); min-inline-size: 0; }
.gnp-volets-dit .gnp-brand { color: var(--p-text); text-decoration: none; display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; min-block-size: 44px; }
.gnp-volets-msg { display: flex; flex-direction: column; gap: 16px; min-inline-size: 0; }
.gnp-volets-msg .gnp-h1 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.08; }
.gnp-volets-msg .gnp-h3 { margin-block-start: 12px; }
.gnp .gnp-volets-pied { margin-block-start: auto; font-size: 14px; color: var(--p-muted); }
.gnp-volets-pied .gnp-link { font-weight: 600; text-decoration: underline; }
.gnp-volets-fait { display: flex; align-items: center; min-inline-size: 0; }
.gnp-volets-fait-in { display: flex; flex-direction: column; gap: 24px; inline-size: 100%; max-inline-size: 620px; padding-block: 48px; padding-inline: var(--p-pad); min-inline-size: 0; }
.gnp-volets-fait-in .gnp-h2 { font-size: clamp(24px, 2.4vw, 30px); }
.gnp-volets-fait-in .gnp-lead { font-size: 15.5px; }
.gnp-volets .gnp-contact-form { border: 0; padding: 0; background: transparent; }
.gnp-volets-fait-in form .gnp-btn { inline-size: 100%; min-block-size: 52px; }
.gnp-checks { display: flex; flex-direction: column; gap: 14px; }
.gnp-checks li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; line-height: 1.45; }
.gnp-check { flex: none; inline-size: 20px; block-size: 20px; margin-block-start: 2px; color: var(--p-muted); }
@media (min-width: 900px) {
  .gnp-volets { grid-template-columns: minmax(0, 9fr) minmax(0, 11fr); min-block-size: 100vh; }
  .gnp-volets-dit-in { padding-block: 44px 40px; padding-inline: 48px; }
  .gnp-volets-fait-in { padding-block: 64px; padding-inline: 64px; margin-inline: auto; }
}

/* ---------- la richesse du contenu : points d'une carte, étapes numérotées, panneau de preuve du bandeau ---------- */
.gnp .gnp-card-points { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 7px; font-size: 14.5px; color: var(--p-text); }
.gnp .gnp-card-points > li { position: relative; padding-inline-start: 20px; }
.gnp .gnp-card-points > li::before { content: ""; position: absolute; inset-inline-start: 2px; inset-block-start: .55em; inline-size: 8px; block-size: 8px; border-radius: 2px; background: var(--p-link); opacity: .75; }
.gnp-steps { counter-reset: gnp-step; }
.gnp-steps > .gnp-card { counter-increment: gnp-step; }
.gnp-steps > .gnp-card::before { content: counter(gnp-step, decimal-leading-zero); font: 600 13px/1 var(--ui-font-mono, ui-monospace, monospace); letter-spacing: .06em; color: var(--p-link); padding-block-end: 10px; border-block-end: 1px solid var(--p-line); }
.gnp-facts { background: var(--p-surface); color: var(--p-text); border: 1px solid var(--p-line); border-radius: var(--p-radius); padding: 22px 24px; display: grid; gap: 14px; text-align: start; }
.gnp .gnp-facts > ul { list-style: none; margin: 0; padding: 0; display: grid; }
.gnp .gnp-facts > ul > li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-block: 11px; border-block-start: 1px solid var(--p-line); font-size: 15px; }
.gnp .gnp-facts > ul > li > span { color: var(--p-muted); }
.gnp .gnp-facts > ul > li > b { font-weight: 600; text-align: end; }

/* ── Le texte légal (LegalText — mentions légales, confidentialité, conditions, cookies) ──────────────────────
   Un document à LIRE, pas une section de vitrine : mesure resserrée (~70 caractères), sommaire cliquable vers
   chaque section, numérotation naturelle (<ol>) qui suit déjà le sens d'écriture sans classe « gauche / droite ». */
.gnp-legal-wrap { max-inline-size: 840px; }
.gnp-legal-updated { color: var(--p-muted); font-size: 14px; }
.gnp-legal-toc { background: var(--p-surface); border: 1px solid var(--p-line); border-radius: var(--p-radius); padding: 18px 22px; }
.gnp-legal-toc-title { font-family: var(--p-font-head); font-weight: 700; font-size: 15px; color: var(--p-text); margin-block-end: 8px; }
.gnp-legal-toc ol { margin: 0; padding-inline-start: 1.2em; display: grid; gap: 6px; }
.gnp-legal-toc a { font-size: 15px; }
.gnp-legal-body { display: flex; flex-direction: column; gap: 28px; }
.gnp-legal-section { display: flex; flex-direction: column; gap: 10px; max-inline-size: 70ch; }
.gnp-legal-section p { color: var(--p-text); font-size: 16px; line-height: 1.6; }
.gnp-legal-section ul { margin: 0; padding-inline-start: 1.2em; display: grid; gap: 6px; color: var(--p-text); font-size: 16px; line-height: 1.5; }
[dir="rtl"] .gnp-legal-section p, [dir="rtl"] .gnp-legal-section ul { line-height: 1.9; }
.gnp .gnp-facts > .gnp-note { margin: 0; font-size: 13px; }

/* ── le site d'un locataire (« …/s/{slug}/… », classe gnp-local) : un site de proximité, serré comme sa maquette ── */
.gnp-local > .gnp-wrap { padding-block: 40px; gap: 18px; }
.gnp-local.gnp-hero > .gnp-wrap { padding-block: 56px 16px; gap: 24px; }
.gnp-local .gnp-hero-copy { gap: 14px; }
.gnp-local .gnp-h1 { font-size: clamp(30px, 4.6vw, 48px); line-height: 1.06; letter-spacing: -0.02em; }
.gnp-local .gnp-h2 { font-size: clamp(22px, 2.8vw, 28px); letter-spacing: -0.01em; }
.gnp-local .gnp-h3 { font-size: clamp(18px, 2vw, 21px); }
.gnp-local .gnp-lead { font-size: clamp(16px, 1.5vw, 18px); }
.gnp-local.gnp-cta > .gnp-wrap { padding-block: 48px; }
.gnp-local.gnp-cta .gnp-h2 { font-size: clamp(22px, 2.6vw, 26px); }
.gnp-local.gnp-cta .gnp-lead { font-size: 16px; max-inline-size: none; }
.gnp-local.gnp-contact .gnp-h2 { font-size: clamp(20px, 2.2vw, 22px); }
.gnp-local.gnp-contact .gnp-lead { font-size: 16px; }
.gnp-local.gnp-contact .gnp-contact-info { gap: 6px; }
/* la bande douce d'un site de proximité prend une pointe de la couleur du locataire */
.gnp-local.gnp-tone-soft { --p-bg: color-mix(in srgb, var(--p-brand) 7%, var(--gn-bg, Canvas)); }

/* la pastille aux initiales (un locataire sans logo) et un nom long */
.gnp-brand-tile { inline-size: 38px; block-size: 38px; flex: none; display: grid; place-items: center; border-radius: var(--p-radius); background: var(--p-fill); color: var(--p-on-fill);
  font-family: var(--p-font-head); font-weight: 800; font-size: 14px; letter-spacing: 0.02em; line-height: 1; }
.gnp a.gnp-brand:has(.gnp-brand-name.is-long) { max-inline-size: min(calc(100% - 124px), 340px); }   /* 124 px : la place du bouton « Menu » sur un téléphone */
.gnp-brand-name.is-long { font-size: 15.5px; line-height: 1.2; text-wrap: balance; }

/* les cartes d'avis : pas de filet d'accent, le repère (nature · date) en chasse fixe, le détail, puis le mot sous la liste */
.gnp-notice-cards > .gnp-notice:not(.is-alert) { border-inline-start: 1px solid var(--p-line); padding: 20px; gap: 8px; }
.gnp-notice-cards .gnp-notice-meta { font-family: var(--p-font-mono); font-size: 12.5px; gap: 0 8px; }
body:not(#gn_)[data-gn-font] .gnp .gnp-notice-cards .gnp-notice-meta { font-family: var(--p-font-mono) !important; }
[dir="rtl"] .gnp-notice-cards .gnp-notice-meta, [dir="rtl"] body:not(#gn_)[data-gn-font] .gnp .gnp-notice-cards .gnp-notice-meta, body:not(#gn_)[data-gn-font][dir="rtl"] .gnp .gnp-notice-cards .gnp-notice-meta { font-family: var(--p-font) !important; font-size: 13.5px; }
.gnp-notice-cards .gnp-notice-kind { font-weight: 500; color: inherit; }
.gnp-notice-kind:not(:last-child)::after { content: "·"; margin-inline-start: 8px; }   /* le point reste collé à la nature : jamais en tête de ligne */
.gnp-notice-detail { font-size: 15px; }
.gnp-notice-cards .gnp-notice-action { padding-block-start: 6px; }
.gnp-notice-note { font-size: 14px; color: var(--p-muted); max-inline-size: none; }

/* nous joindre en deux colonnes titrées */
.gnp-contact-cols > .gnp-wrap { gap: 24px; }
.gnp-contact-cols .gnp-contact-info { flex: 1 1 300px; }

/* le pied sur une ligne */
.gnp-foot-line { --p-bg: var(--gn-bg, Canvas); border-block-start: 0; }
.gnp-foot-line > .gnp-wrap { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 28px; padding-block: 12px 28px; border-block-start: 1px solid var(--p-line); font-size: 14px; color: var(--p-muted); }
.gnp-foot-line .gnp-foot-said { flex: 1 1 280px; min-inline-size: 0; }
.gnp-foot-line :is(a, span).gnp-foot-l { text-decoration: underline; text-underline-offset: 3px; }

/* « Gérer notre site » : la pastille de qui tient le site (NavigationBar) — dans un coin, elle ne déplace rien */
.gnp-gerer{position:fixed;inset-block-end:16px;inset-inline-start:16px;z-index:60;display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:999px;background:var(--p-text);color:var(--p-surface);font-weight:600;font-size:13px;line-height:1.2;text-decoration:none;box-shadow:0 6px 20px color-mix(in srgb,var(--p-text) 28%,transparent)}
.gnp-gerer:hover{background:var(--p-link)}
.gnp-gerer:focus-visible{outline:2px solid var(--p-link);outline-offset:3px}
@media print{.gnp-gerer{display:none}}


/* ── réglages de mise en page communs à toutes les sections (sectionAlign / sectionSpacing / sectionWidth) ──
   '' = le défaut du bloc (aucune classe). Propriétés logiques : valable en droite-à-gauche et sous .gnp-local.
   La barre de menu et le pied ne suivent que la LARGEUR (leur alignement et leur rythme sont fixes). */
/* alignement : début */
.gnp.gnp-al-start:not(.gnp-nav) :is(.gnp-head, .gnp-hero-copy) { margin-inline: 0; text-align: start; align-items: flex-start; }
.gnp.gnp-al-start:not(.gnp-nav) :is(.gnp-lead, .gnp-h1, .gnp-h2) { margin-inline: 0; text-align: start; }
.gnp.gnp-al-start:not(.gnp-nav) .gnp-actions { justify-content: flex-start; }
/* alignement : centré */
.gnp.gnp-al-center:not(.gnp-nav) :is(.gnp-head, .gnp-hero-copy) { margin-inline: auto; text-align: center; align-items: center; }
.gnp.gnp-al-center:not(.gnp-nav) :is(.gnp-lead, .gnp-h1, .gnp-h2) { margin-inline: auto; text-align: center; }
.gnp.gnp-al-center:not(.gnp-nav) .gnp-actions { justify-content: center; }
/* espacement : le défaut est 64 px (40 px sous .gnp-local) de marge verticale du .gnp-wrap */
.gnp.gnp-sp-compact:not(.gnp-nav) > .gnp-wrap { padding-block: 36px; gap: 20px; }
.gnp.gnp-sp-airy:not(.gnp-nav) > .gnp-wrap { padding-block: 96px; gap: 44px; }
.gnp.gnp-sp-compact.gnp-local > .gnp-wrap { padding-block: 22px; gap: 12px; }
.gnp.gnp-sp-airy.gnp-local > .gnp-wrap { padding-block: 60px; gap: 28px; }
/* largeur du contenu : le défaut est var(--p-max) = 1200 px */
.gnp.gnp-w-narrow :is(.gnp-wrap, .gnp-nav-in) { max-inline-size: 760px; }
.gnp.gnp-w-wide :is(.gnp-wrap, .gnp-nav-in) { max-inline-size: 1400px; }
/* un ton choisi sur une bannière à fond animé (nuages, particules) : un voile de la couleur du ton passe sur l'effet,
   sinon un titre clair reste posé sur un ciel clair */
.gnp[class*="gnp-tone-"] .gnp-hero-fx::after { content: ""; position: absolute; inset: 0; z-index: 1; background: color-mix(in srgb, var(--p-bg) 74%, transparent); pointer-events: none; }