/* AnzarSeha — feuille de style du corpus éditorial.
   Reprend la charte de la vitrine et des documents juridiques : même police
   AnzarSans servie depuis la même adresse, mêmes jetons, mêmes cartes à
   ombre-anneau. Aucun appel à un tiers — la politique de sécurité du site
   interdit toute origine externe, et c'est très bien ainsi.

   Volontairement AUTONOME plutôt que dépendante de /legal/legal.css : les
   documents juridiques et le corpus éditorial évoluent à des rythmes
   différents, et une feuille partagée ferait qu'une retouche éditoriale
   pourrait casser une page juridique.

   Prend en charge les trois langues, dont l'arabe en écriture de droite à
   gauche : les marges internes sont exprimées en propriétés logiques
   (`padding-inline-start`), pas en gauche/droite, pour que la mise en page se
   retourne d'elle-même. */

@font-face {
  font-family: 'AnzarSans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/presentation/fonts/anzarsans.woff2) format('woff2');
}

:root {
  /* ── L'échelle des rayons ────────────────────────────────────────────
     Cinq crans, pas un de plus, et chacun a un emploi :
       control 10px — champ, petit bouton
       sm      12px — bloc court, ligne de liste
       card    16px — carte, panneau
       frame   24px — la coquille de page
       pill   999px — pastille, bouton rond
     Mesuré avant : la vitrine en portait NEUF (8 · 9 · 10 · 12 · 14 · 16 ·
     20 · 24 · 999) sur des éléments de même rang. Un rayon qui n'est pas
     dans l'échelle est un trou dans l'échelle, pas une exception. */
  --r-control: 10px;
  --r-sm: 12px;
  --r-card: 16px;
  --r-frame: 24px;
  --r-pill: 999px;
  /* Le plancher typographique. Rien de visible ne descend en dessous : le
     lectorat est senior, et 10 px se paie en lunettes, pas en densité. */
  --fs-min: 12px;
  /* Cible tactile minimale — la charte l'exigeait pour l'application ;
     elle vaut maintenant pour les surfaces publiques aussi. */
  --tap-min: 44px;
  --bg: #f4f6fa;
  --card: #ffffff;
  --fg: #0f172a;
  --muted-fg: #556278;
  --soft-fg: #5b6b81;
  --border: #e3e8ef;
  --muted: #eef2f7;
  --primary: #1d4ed8;
  --primary-strong: #1e40af;
  --primary-soft: #eff6ff;
  --anzar: #0C4A6E;
  --seha: #0D9488;
  /* L'encre sarcelle : la seule nuance de vert qui porte du texte blanc
     (5,1:1). `--seha` ne monte qu'à 3,5:1 et ne sert qu'aux filets. */
  --seha-ink: #0f766e;
  --blue-soft: #e0f2fe;
  --blue-fg: #0369a1;
  --radius-card: 16px;
  --shadow-card: 0 1px 2px rgba(15, 23, 42, .05), 0 0 0 1px var(--border);
  --ring: #1d4ed8;
  color-scheme: light;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

body {
  color: var(--fg);
  font-family: 'AnzarSans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* L'arabe se lit mieux un cran plus grand et plus aéré : les diacritiques et
   les liaisons demandent de la hauteur de ligne, pas seulement de la chasse. */
/* ── Arabe ────────────────────────────────────────────────────────────────
   AnzarSans est une police LATINE : elle ne porte aucun glyphe arabe, et un
   texte arabe y retombe de toute façon sur ce que le navigateur veut bien
   choisir. Les documents juridiques nommaient déjà cette pile de repli ; le
   corpus la laissait au hasard — deux réponses à la même question. On garde
   la meilleure : la pile est nommée, le mot-symbole reste latin. */
html[lang="ar"] body {
  font-family: 'Segoe UI', 'Noto Sans Arabic', 'Geeza Pro', 'Dubai', Tahoma, ui-sans-serif, system-ui, sans-serif;
  font-size: 17px; line-height: 1.85;
}
html[lang="ar"] .brand .wm { font-family: 'AnzarSans', ui-sans-serif, system-ui, sans-serif; }

.wrap { max-width: 776px; margin: 0 auto; padding: 0 24px; }
p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }

.skip {
  position: absolute; inset-inline-start: -9999px; top: 0; z-index: 100;
  background: var(--card); color: var(--primary-strong);
  padding: 10px 16px; border-radius: 0 0 12px 0; font-weight: 600; font-size: 14px;
  box-shadow: var(--shadow-card); text-decoration: none;
}
.skip:focus { inset-inline-start: 0; }

/* ── Barre supérieure ─────────────────────────────────────────────────── */
/* La barre est collante : toute mise au point (`focus`) qui fait défiler
   doit lui laisser sa hauteur, sinon le champ atteint se cale sous elle et
   la question au-dessus disparaît de l'écran. Mesuré à 390 px sur la porte :
   sans cette ligne, passer au deuxième temps posait le visiteur dans une
   zone de texte dont l'intitulé était à −43 px. Même valeur que le
   `scroll-margin-top` des sections (l. 156) : une seule marge à retenir. */
html { scroll-padding-block-start: 76px; }

.topbar {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(14px) saturate(1.35);
  -webkit-backdrop-filter: blur(14px) saturate(1.35);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.topbar-in {
  max-width: 776px; margin: 0 auto; padding: 11px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.topbar-r { display: flex; align-items: center; gap: 10px; }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.brand svg { width: 32px; height: 32px; border-radius: var(--r-control); box-shadow: var(--shadow-card); flex: none; }
.brand .wm { font-weight: 800; font-size: 18px; letter-spacing: -.02em; line-height: 1.1; }
.brand .wm .a { color: var(--anzar); }
.brand .wm .s { color: var(--seha); }

.langs { display: inline-flex; align-items: center; gap: 2px; background: var(--muted); border-radius: var(--r-pill); padding: 2px; }
.langs .lg {
  font-size: 12px; font-weight: 600; text-decoration: none; color: var(--soft-fg);
  padding: 4px 10px; border-radius: var(--r-pill); line-height: 1.4;
}
.langs .lg:hover { color: var(--primary-strong); }
.langs .lg.is-on { background: var(--card); color: var(--anzar); box-shadow: var(--shadow-card); }

.topbar .home {
  font-size: 13px; font-weight: 600; color: var(--primary-strong); text-decoration: none;
  padding: 6px 12px; border-radius: var(--r-pill); border: 1px solid var(--border);
  background: color-mix(in srgb, var(--card) 70%, transparent); white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease;
}
.topbar .home:hover { background: var(--primary-soft); border-color: color-mix(in srgb, var(--primary) 30%, var(--border)); }

/* ── La porte, dans la barre ──────────────────────────────────────────────
   Ces 75 pages sont l'acquisition : un lecteur venu d'une recherche y arrive
   au milieu, lit ce qu'il cherchait, et repart. L'encart de bas de page se
   trouvait à 92–95 % de la hauteur — mesuré jusqu'à DIX écrans sur un
   téléphone. La barre étant collante, ce bouton suit le lecteur du premier
   au dernier écran, sur les 75 pages et dans les trois langues.

   Il ne remplace pas l'encart : celui-là s'adresse à qui a tout lu, et garde
   sa phrase. Aucun rappel n'a été inséré au milieu du texte — sur des pages
   éditoriales, un péage à mi-lecture coûterait la confiance qu'elles bâtissent.

   Le libellé raccourcit sous 700 px : la barre n'y a plus la place du long. */
.btn-porte {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 36px; padding: 8px 15px; border-radius: var(--r-pill);
  background: linear-gradient(120deg, var(--anzar), var(--seha-ink));
  color: #fff; font-size: 13px; font-weight: 650; text-decoration: none;
  white-space: nowrap; box-shadow: 0 2px 10px rgba(15, 118, 110, .25);
  transition: box-shadow .15s ease, transform .15s ease, filter .15s ease;
}
.btn-porte:hover { filter: brightness(1.10); box-shadow: 0 6px 18px rgba(12, 74, 110, .28); transform: translateY(-1px); }
.btn-porte:active { transform: none; filter: brightness(.98); }
.btn-porte .lbl-short { display: none; }
@media (max-width: 700px) {
  .btn-porte .lbl-long { display: none; }
  .btn-porte .lbl-short { display: inline; }
}
/* ── Ce que la barre lâche, et dans quel ordre ────────────────────────────
   Quatre blocs y tiennent : la marque, les langues, « Retour au site », la
   porte. À 320 px ils demandent 432 px — mesuré : la barre débordait de 90 px,
   et `.frame { overflow: clip }` masquait ce débordement au contrôle de page,
   qui répondait donc « aucun » pendant que le bouton était coupé.

   L'ordre d'abandon suit l'utilité, pas la place :
     · d'abord « Retour au site » — la marque, à gauche, y mène déjà ;
     · puis le mot-symbole — l'icône identifie la maison à elle seule ;
     · les langues et la porte ne partent jamais : l'une est la condition
       d'usage d'un site trilingue, l'autre est ce que la page sert.

   Les seuils sont MESURÉS, pas devinés : balayage de 320 à 1600 px, marge
   interne restante jamais négative. */
@media (max-width: 759px) { .topbar .home { display: none; } }
@media (max-width: 560px) { .brand .wm { display: none; } }
/* Le sélecteur de langue passe au code abrégé en dessous de 560 px — là où
   le mot-symbole a déjà cédé. Le nom entier reste dans le document pour les
   lecteurs d'écran ; seul l'affichage change. */
.langs .lg .lbl-short { display: none; }
@media (max-width: 560px) {
  .langs .lg .lbl-long { display: none; }
  .langs .lg .lbl-short { display: inline; }
  .langs .lg { padding-inline: 11px; }
}
/* Sous 380 px, la barre resserre encore ses écarts plutôt que de déborder. */
@media (max-width: 380px) {
  .topbar-in { padding-inline: 14px; gap: 8px; }
  .topbar-r { gap: 7px; }
}

/* ── La règle des 44 px ───────────────────────────────────────────────────
   Le lectorat est debout, entre deux consultations, au pouce. La charte
   l'exige déjà pour l'application : « les boutons dessinés font 32 à 38 px ;
   sur écran tactile, une zone transparente les porte à 44 px ». Elle n'avait
   jamais été portée aux surfaces publiques. Mesuré avant correction :
   sélecteur de langue 20×33 (juridique), 25×60 (corpus), fil d'Ariane 16 px
   de haut, sommaire 18 px, liens de pied 24 px.

   La zone s'étend par un pseudo-élément : le DESSIN ne bouge pas d'un pixel,
   seule la surface qui répond au doigt grandit. `inset` négatif en bloc
   uniquement là où les cibles se suivent verticalement — deux zones qui se
   chevauchent donneraient un lien qui répond à la place de son voisin.

   Elle ne s'applique QU'AU TACTILE (`pointer: coarse`) : à la souris, une
   cible de 44 px sous un texte de 13 px déborderait sur ses voisines sans
   rien apporter à un curseur qui vise au pixel. */
@media (pointer: coarse) {
  .langs .lg, .crumb a, .toc a, .topbar .home, .btn-porte, .totop, .porte-cta a,
  .brand, .doc-foot .nav a, .srcs > li > a { position: relative; }
  .langs .lg::after, .crumb a::after, .topbar .home::after, .btn-porte::after,
  .totop::after, .brand::after {
    content: ""; position: absolute; inset: 50% 0 50% 0;
    block-size: var(--tap-min); inline-size: 100%;
    transform: translateY(-50%); top: 50%; bottom: auto;
  }
  /* Listes verticales : on n'étend qu'à la moitié de l'écart, sinon deux
     liens voisins se disputeraient le même doigt. */
  /* Le sommaire, les liens du pied de document et la liste des sources :
     des colonnes de liens courts, empilés. `.srcs > li > a` seulement — le
     `>` évite les liens NOYÉS DANS une phrase de source, qui n'ont pas à
     grossir : WCAG 2.5.8 exempte le lien en ligne, et l'élargir décalerait
     le texte qui l'entoure. */
  .toc a::after, .doc-foot .nav a::after, .srcs > li > a::after {
    content: ""; position: absolute; inset-inline: 0;
    top: 50%; transform: translateY(-50%);
    block-size: max(var(--tap-min), 100%);
  }
}

/* ── En-tête du document ──────────────────────────────────────────────── */
.doc-head { padding: 30px 0 0; }
.crumb { font-size: 13px; color: var(--soft-fg); margin: 0; }
.crumb a { color: var(--primary-strong); text-decoration: none; }
.crumb a:hover { text-decoration: underline; }
.crumb [aria-current] { color: var(--soft-fg); }

h1 {
  font-weight: 800; font-size: clamp(29px, 5vw, 44px); line-height: 1.06;
  letter-spacing: -.03em; margin: 22px 0 0; color: var(--fg);
}
html[lang="ar"] h1 { letter-spacing: 0; line-height: 1.35; }

.meta {
  font-size: var(--fs-min); color: var(--soft-fg); margin: 16px 0 0;
  font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
html[lang="ar"] .meta { letter-spacing: 0; text-transform: none; font-size: 13px; }

.lead { font-size: clamp(16.5px, 1.6vw, 18.5px); line-height: 1.62; color: var(--muted-fg); margin: 18px 0 0; }
html[lang="ar"] .lead { line-height: 1.9; }

/* ── Sommaire ─────────────────────────────────────────────────────────── */
.toc { margin: 30px 0 0; border-radius: var(--r-card); background: var(--card); padding: 20px 22px; box-shadow: var(--shadow-card); }
.toc h2 { font-size: var(--fs-min); color: var(--soft-fg); margin: 0 0 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
html[lang="ar"] .toc h2 { letter-spacing: 0; text-transform: none; font-size: 13px; }
.toc ol { list-style: none; counter-reset: toc; columns: 2; column-gap: 30px; }
@media (max-width: 560px) { .toc ol { columns: 1; } }
.toc li { counter-increment: toc; font-size: 14.5px; margin: 0 0 8px; break-inside: avoid; }
.toc li a { color: var(--fg); text-decoration: none; border-bottom: 1px solid transparent; }
.toc li a::before {
  content: counter(toc, decimal-leading-zero); margin-inline-end: 9px;
  color: var(--primary); font-weight: 700; font-size: 12px; font-variant-numeric: tabular-nums;
}
.toc li a:hover { border-bottom-color: var(--primary); }

/* ── Sections ─────────────────────────────────────────────────────────── */
main { padding: 24px 0 0; counter-reset: sec; }
section.art { padding: 34px 0; border-top: 1px solid var(--border); scroll-margin-top: 76px; }
section.art > h2 {
  counter-increment: sec; font-weight: 800; font-size: 21px; letter-spacing: -.02em;
  line-height: 1.25; margin: 0; display: flex; gap: 13px; align-items: baseline; color: var(--fg);
}
html[lang="ar"] section.art > h2 { letter-spacing: 0; line-height: 1.5; }
section.art > h2::before {
  content: counter(sec, decimal-leading-zero);
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 23px; padding: 0 9px; border-radius: var(--r-pill);
  background: var(--primary-soft); color: var(--primary-strong);
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; flex: none;
  transform: translateY(-2px);
}
section.art h3 { font-size: 16.5px; font-weight: 700; margin: 26px 0 0; color: var(--fg); letter-spacing: -.01em; }
section.art p { margin: 14px 0 0; color: var(--muted-fg); }
section.art strong { color: var(--fg); font-weight: 600; }
code {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: .85em;
  background: var(--blue-soft); color: var(--blue-fg); padding: 1px 6px; border-radius: 6px;
  direction: ltr; unicode-bidi: embed;
}

/* ── Listes — marges logiques, pour que l'arabe se retourne seul ──────── */
ul, ol.body { margin: 14px 0 0; list-style: none; display: grid; gap: 10px; }
ul li, ol.body li { position: relative; padding-inline-start: 24px; color: var(--muted-fg); font-size: 15.5px; }
ul li::before {
  content: ""; position: absolute; inset-inline-start: 3px; top: 10px;
  width: 7px; height: 7px; border-radius: 2px; background: var(--seha);
}
ol.body { counter-reset: it; }
ol.body li { counter-increment: it; }
ol.body li::before {
  content: counter(it); position: absolute; inset-inline-start: 0; top: 1px;
  color: var(--primary); font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums;
}
li strong { color: var(--fg); font-weight: 600; }

/* ── Tableaux ─────────────────────────────────────────────────────────── */
.tbl { margin: 18px 0 0; border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow-card); background: var(--card); }
.tbl-scroll { overflow-x: auto; }
.tbl table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tbl caption { text-align: start; padding: 12px 15px 0; font-size: 13px; color: var(--soft-fg); }
.tbl th, .tbl td { text-align: start; padding: 12px 15px; vertical-align: top; border-top: 1px solid var(--border); }
.tbl thead th {
  background: color-mix(in srgb, var(--primary-soft) 60%, var(--card));
  border-top: none; font-size: var(--fs-min); color: var(--soft-fg); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
}
html[lang="ar"] .tbl thead th { letter-spacing: 0; text-transform: none; font-size: 13px; }
.tbl tbody th { color: var(--fg); font-weight: 600; font-size: 14.5px; }
.tbl td { color: var(--muted-fg); }
.tbl td strong { color: var(--fg); }

/* ── Encadrés ─────────────────────────────────────────────────────────── */
.callout {
  margin: 18px 0 0; border-inline-start: 3px solid var(--primary); background: var(--card);
  border-radius: var(--r-card); padding: 16px 19px; font-size: 15px; color: var(--muted-fg);
  box-shadow: var(--shadow-card);
}
.callout.green { border-inline-start-color: var(--seha); }
.callout strong { color: var(--fg); font-weight: 600; }

/* ── Figures ──────────────────────────────────────────────────────────── */
.shotfig { margin: 22px 0 0; }
.shotfig img {
  width: 100%; height: auto; display: block; border-radius: var(--r-card);
  box-shadow: var(--shadow-card); background: var(--muted);
}
.shotfig figcaption { font-size: 13px; color: var(--soft-fg); margin: 10px 0 0; }

/* ── Questions fréquentes ─────────────────────────────────────────────── */
.qa { margin: 16px 0 0; display: grid; gap: 10px; }
.qa details { background: var(--card); border-radius: var(--r-card); box-shadow: var(--shadow-card); overflow: hidden; }
.qa summary { cursor: pointer; padding: 15px 19px; list-style: none; display: flex; align-items: center; gap: 12px; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: "+"; margin-inline-start: auto; color: var(--primary); font-weight: 700; font-size: 18px;
  line-height: 1; flex: none;
}
.qa details[open] summary::after { content: "–"; }
.qa summary h3 { font-size: 15.5px; font-weight: 700; color: var(--fg); margin: 0; }
.qa .qa-a { padding: 0 19px 17px; }
.qa .qa-a p { margin: 0; color: var(--muted-fg); font-size: 15.5px; }

/* ── Sources ──────────────────────────────────────────────────────────── */
.srcs li { font-size: 15px; }

/* ── Liens contextuels ────────────────────────────────────────────────── */
.next { border-top: 1px solid var(--border); padding: 30px 0 0; margin-top: 6px; }
.next > h2 {
  font-size: var(--fs-min); color: var(--soft-fg); font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; margin: 0 0 14px;
}
html[lang="ar"] .next > h2 { letter-spacing: 0; text-transform: none; font-size: 13px; }
.cards { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.cards li { padding: 0; }
.cards li::before { display: none; }
.cards a {
  display: grid; gap: 5px; height: 100%; text-decoration: none;
  background: var(--card); border-radius: var(--r-card); padding: 15px 17px;
  box-shadow: var(--shadow-card); transition: box-shadow .15s ease, transform .15s ease;
}
.cards a:hover { box-shadow: 0 8px 24px rgba(15, 23, 42, .09), 0 0 0 1px color-mix(in srgb, var(--primary) 25%, var(--border)); }
.cards .k { font-weight: 700; font-size: 15px; color: var(--fg); letter-spacing: -.01em; }
.cards .d { font-size: 13.5px; color: var(--soft-fg); line-height: 1.55; }

/* ── Liens en ligne, focus ────────────────────────────────────────────── */
a.inl { color: var(--primary-strong); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--primary) 35%, transparent); }
a.inl:hover { border-bottom-color: var(--primary); }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 3px; }

/* ── Pied ─────────────────────────────────────────────────────────────── */
.doc-foot { border-top: 1px solid var(--border); margin-top: 30px; padding: 28px 0 64px; }
.doc-foot .nav { display: flex; flex-wrap: wrap; gap: 10px 18px; font-size: 14px; margin: 18px 0 0; }
.doc-foot .nav a { color: var(--primary-strong); text-decoration: none; }
.doc-foot .nav a:hover { text-decoration: underline; }
.doc-foot .fin { font-size: 12.5px; color: var(--soft-fg); margin: 0; line-height: 1.7; }
.doc-foot .fin + .fin { margin-top: 16px; }

@media print {
  body { background: #fff; }
  .topbar, .next, .skip { display: none; }
  .toc, .tbl, .callout, .qa details { box-shadow: none; border: 1px solid #ddd; }
  .qa details { display: block; }
}

/* ── La porte : « décrivez votre problème » ─────────────────────────────
   Le bouton bicolore est la SIGNATURE du parcours : le seul élément du site
   où les deux couleurs du logo — « Anzar » bleu, « Seha » vert — se
   rencontrent. Partout ailleurs elles restent séparées ; ici elles disent
   que les deux activités de l'entité répondent ensemble. */
.btn-mesure {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 10px 22px; border: 0; border-radius: var(--r-pill);
  /* Borné sur `--seha-ink` : mesuré au pixel, le sarcelle vif ne portait le
     blanc qu'à 3,5:1. L'encre tient 5,1:1 sur toute la longueur du dégradé. */
  background: linear-gradient(120deg, var(--anzar), var(--seha-ink));
  color: #fff; font: inherit; font-size: 15px; font-weight: 650;
  letter-spacing: .01em; text-decoration: none; cursor: pointer;
  box-shadow: 0 2px 10px rgba(15, 118, 110, .25);
  transition: box-shadow .15s ease, transform .15s ease, filter .15s ease;
}
.btn-mesure:hover { filter: brightness(1.10); box-shadow: 0 6px 18px rgba(12, 74, 110, .28); transform: translateY(-1px); }
.btn-mesure:active { transform: none; filter: brightness(.98); }

/* L'encart posé par le générateur au pied de chaque page du corpus. */
.porte-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  flex-wrap: wrap; margin-top: 30px; padding: 20px 22px;
  background: var(--card); border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  border-inline-start: 3px solid var(--seha);
}
.porte-cta .k { margin: 0 0 4px; font-weight: 700; font-size: 16px; color: var(--fg); }
.porte-cta .d { margin: 0; font-size: 14px; color: var(--muted-fg); line-height: 1.6; max-width: 56ch; }

/* `hidden` doit GAGNER. La feuille de l'agent utilisateur pose
   `[hidden] { display: none }` à une spécificité que n'importe quelle règle
   de classe dépasse : `.btn-mesure { display: inline-flex }` suffisait à
   faire réapparaître le bouton d'envoi dès le premier temps, alors que
   l'attribut était bien posé. Trouvé à la capture, pas au sondage du DOM —
   un contrôle qui lit `element.hidden` répond « caché » pendant que l'œil
   voit le contraire. La règle vaut pour toute la feuille, pas seulement
   pour ce formulaire : le piège se retendrait ailleurs. */
[hidden] { display: none !important; }

/* Le formulaire en quatre temps. Corps généreux : le lectorat est senior,
   et un champ de 13 px se paie en lunettes, pas en élégance. */
.pf-cadre { margin-bottom: 8px; }
.pf-nojs { background: var(--muted); border-radius: var(--r-control); padding: 12px 15px; font-size: 15px; }
.pf { background: var(--card); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: 22px 24px 20px; }

/* Le jalonnier. Quatre pastilles numérotées, trois barres de liaison : le
   visiteur voit d'un coup d'œil où il est, combien il reste, et que ce
   n'est pas long. Il est DÉCORATIF — l'information vit dans le compteur
   `aria-live` juste dessous, en toutes lettres.

   La barre se remplit dans le SENS DE LECTURE : `transform-origin` bascule
   à droite en arabe, sinon le remplissage remonterait à contre-courant. */
.pf-jalons { display: flex; align-items: center; gap: 6px; height: 28px; margin: 0 0 10px; }
.pf-jalon { flex: none; inline-size: 28px; block-size: 28px; border-radius: var(--r-pill);
  display: grid; place-items: center; font-size: 13px; font-weight: 650;
  color: var(--soft-fg); background: var(--muted); border: 1px solid var(--border);
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease; }
.pf-jalon b { font-weight: inherit; }
.pf-jalon .pf-ok { inline-size: 14px; block-size: 14px; display: none; }
.pf-jalon.ok, .pf-jalon.cur { background: var(--primary); border-color: var(--primary); color: #fff; }
.pf-jalon.cur { box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent); }
.pf-jalon.ok b { display: none; }
.pf-jalon.ok .pf-ok { display: block; }
.pf-lien { flex: 1; block-size: 3px; border-radius: var(--r-pill); background: var(--border); position: relative; overflow: hidden; }
.pf-lien::after { content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: var(--primary); transform: scaleX(0); transform-origin: left;
  transition: transform .24s ease; }
html[dir="rtl"] .pf-lien::after { transform-origin: right; }
.pf-lien.on::after { transform: scaleX(1); }
.pf-count { margin: 0 0 14px; font-size: 12.5px; font-weight: 650; color: var(--soft-fg); }
.pf-step { border: 0; padding: 0; margin: 0; min-width: 0; }
.pf-step legend { font-weight: 700; font-size: 17px; color: var(--fg); padding: 0; margin-bottom: 12px; }
.pf-situations { display: grid; gap: 10px; }
.pf-sit { display: flex; align-items: center; gap: 12px; padding: 14px 16px; min-block-size: 64px;
  border: 1px solid var(--border); border-radius: var(--r-sm); cursor: pointer;
  font-size: 15.5px; line-height: 1.45; color: var(--fg); background: var(--card);
  transition: border-color .12s ease, background .12s ease; }
/* Le survol ne vaut QUE sur pointeur fin : au doigt, un survol qui reste
   collé après le geste fait croire à une sélection qui n'a pas eu lieu. */
@media (hover: hover) and (pointer: fine) {
  .pf-sit:hover { border-color: color-mix(in srgb, var(--seha) 45%, var(--border)); }
  .pf-sit:has(input:checked):hover { background: color-mix(in srgb, var(--seha) 10%, var(--card)); }
}
.pf-sit:has(input:focus-visible) { outline: 2px solid var(--seha-ink); outline-offset: 2px; }
.pf-sit:has(input:checked) { border-color: var(--seha); background: color-mix(in srgb, var(--seha) 6%, var(--card)); }
.pf-sit:has(input:checked) > span { font-weight: 550; }
.pf-sit input { inline-size: 18px; block-size: 18px; accent-color: var(--seha); flex: none; }
/* L'icône suit son texte : jamais de couleur propre, jamais de sens propre.
   Elle DOUBLE le libellé — la retirer ne retire rien. */
.pf-ico { inline-size: 20px; block-size: 20px; flex: none; color: var(--soft-fg); transition: color .12s ease; }
.pf-sit:has(input:checked) .pf-ico { color: var(--seha-ink); }
/* « Autre chose » : la précision se déplie sous la carte choisie. Tant que
   l'option n'est pas cochée, la zone n'existe pas — ni au clavier, ni pour
   un lecteur d'écran (`hidden`, posé par le script). */
.pf-precise { margin-top: 8px; }
.pf .pf-precise { font-size: 14.5px; line-height: 1.5; }
.pf textarea, .pf input:not([type="radio"]), .pf select {
  width: 100%; font: inherit; font-size: 15.5px; color: var(--fg);
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-control);
  padding: 11px 13px; }
.pf textarea { resize: vertical; line-height: 1.65; }
/* L'invite ne s'en remet pas au navigateur. Mesurée telle quelle, la valeur
   par défaut de Chromium — rgb(117,117,117) — tient 4,61:1 sur blanc : elle
   passe, de onze centièmes, et elle change d'un navigateur à l'autre.
   `--soft-fg` tient 5,43:1 et appartient à la palette. */
.pf ::placeholder { color: var(--soft-fg); opacity: 1; }
/* Le focus d'un champ parle la langue du formulaire : l'encre sarcelle, pas
   le bleu que le navigateur pose par défaut — qui jurait avec la carte
   choisie juste au-dessus. */
.pf textarea:focus-visible, .pf input:not([type="radio"]):focus-visible, .pf select:focus-visible {
  border-color: var(--seha-ink); outline: 2px solid var(--seha-ink); outline-offset: 2px; }
/* Le champ fautif se signale AUSSI par son bord : le message sous le
   formulaire dit quoi, le bord dit où.

   Les trois sélecteurs focalisés sont écrits AU LONG, et non en un
   `.pf-faute:focus-visible` compact : `:not([type="radio"])` ajoute sa
   propre spécificité à la règle de focus juste au-dessus, qui gagnait donc
   sur un `<input>` fautif — le champ en faute se bordait de sarcelle. Le
   `<textarea>`, lui, virait bien au rouge. Deux comportements pour la même
   intention : mesuré, puis corrigé. */
.pf .pf-faute,
.pf textarea.pf-faute:focus-visible,
.pf input.pf-faute:not([type="radio"]):focus-visible,
.pf select.pf-faute:focus-visible { border-color: #b42318; outline-color: #b42318; }
.pf-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pf-chip { font: inherit; font-size: 13px; font-weight: 600; color: var(--muted-fg);
  background: var(--muted); border: 0; border-radius: var(--r-pill); padding: 7px 13px;
  min-height: 32px; cursor: pointer; }
.pf-chip:hover { color: var(--fg); background: color-mix(in srgb, var(--seha) 12%, var(--muted)); }
.pf-alerte { margin: 10px 0 0; padding: 10px 13px; border-radius: var(--r-control); font-size: 13.5px;
  line-height: 1.55; color: #7c4a03; background: #fef6e7; border: 1px solid #f5dfb8; }
.pf-champs { display: grid; gap: 12px; }
.pf-champs label { display: grid; gap: 5px; font-size: 13.5px; font-weight: 650; color: var(--soft-fg); }
@media (min-width: 640px) { .pf-champs { grid-template-columns: 1fr 1fr; } }
.pf-recap { display: grid; gap: 10px; }
.pf-recap .bloc { background: var(--muted); border-radius: var(--r-sm); padding: 12px 15px; }
.pf-recap .bloc .h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 3px; }
.pf-recap .bloc .h b { font-size: var(--fs-min); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--soft-fg); }
html[lang="ar"] .pf-recap .bloc .h b { letter-spacing: 0; text-transform: none; font-size: 12.5px; }
.pf-recap .bloc .h button { font: inherit; font-size: 13px; font-weight: 600; color: var(--primary-strong);
  background: none; border: 0; cursor: pointer; padding: 2px 0; min-height: 24px; }
.pf-recap .bloc .h button:hover { text-decoration: underline; }
.pf-recap .bloc p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--fg); white-space: pre-wrap; overflow-wrap: anywhere; }
.pf-garde { display: block; margin: 14px 0 0; padding: 11px 14px; border-radius: var(--r-control);
  font-size: 13.5px; line-height: 1.55; color: var(--muted-fg);
  background: var(--muted); border-inline-start: 3px solid var(--seha); }
.pf-trap { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
.pf-err { margin: 12px 0 0; font-size: 14px; font-weight: 600; color: #b42318; }
.pf-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; }
.pf-back { font: inherit; font-size: 14.5px; font-weight: 600; color: var(--muted-fg);
  background: none; border: 0; cursor: pointer; padding: 8px 4px; min-height: 44px; }
.pf-back:hover { color: var(--fg); }
.pf-next { font: inherit; font-size: 15px; font-weight: 650; color: #fff;
  background: var(--primary); border: 0; border-radius: var(--r-pill); padding: 10px 24px;
  min-height: 44px; cursor: pointer; margin-inline-start: auto; }
.pf-next:hover { background: var(--primary-strong); }
.pf-send { margin-inline-start: auto; }
.pf-send[disabled], .pf-next[disabled] { opacity: .6; cursor: default; }
.pf-fait { background: var(--card); border-radius: var(--r-card); box-shadow: var(--shadow-card);
  border-inline-start: 3px solid var(--seha); padding: 22px 24px; }
.pf-fait h3 { margin: 0 0 6px; font-size: 18px; }
.pf-fait p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--muted-fg); }
.pf-echec { margin-top: 14px; padding: 12px 15px; border-radius: var(--r-control); font-size: 14.5px;
  line-height: 1.6; color: #7c2d12; background: #fff1ec; border: 1px solid #fcd9cc; }
/* Les quatre repères de l'en-tête : ce qui va se passer, avant le
   formulaire. Grille de quatre sur large, de deux sur tablette, d'une sur
   téléphone — un repère coupé sur deux lignes ne repère plus rien. */
.pf-reperes { list-style: none; margin: 16px 0 0; padding: 0;
  display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .pf-reperes { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .pf-reperes { grid-template-columns: repeat(4, 1fr); } }
/* Le corpus pose une puce sarcelle sur tout `ul li` (l. 182) : ici elle
   n'a rien à marquer — l'icône fait déjà ce travail — et elle laissait un
   carré orphelin dans le coin.

   L'icône tient la PREMIÈRE LIGNE avec le titre ; la phrase passe dessous,
   sur toute la largeur. Mesuré : à quatre de front dans un cadre de 728 px,
   une icône qui occupe sa propre colonne sur deux rangs ne laissait que
   115 px au texte — seize caractères par ligne, et trois lignes pour dire
   « dix minutes ». */
.pf-reperes li { display: grid; grid-template-columns: auto 1fr; gap: 4px 9px;
  align-items: center; padding: 12px 14px; border-radius: var(--r-sm);
  padding-inline-start: 14px; font-size: inherit; color: inherit;
  background: var(--card); border: 1px solid var(--border); }
.pf-reperes li::before { content: none; display: none; }
.pf-repere-ico { inline-size: 20px; block-size: 20px; color: var(--seha-ink); }
.pf-reperes span { grid-column: 1 / -1; }
.pf-reperes b { font-size: 14px; font-weight: 700; color: var(--fg); }
.pf-reperes span { font-size: 13px; line-height: 1.5; color: var(--muted-fg); }

@media (prefers-reduced-motion: reduce) {
  .btn-mesure, .pf-sit, .pf-ico, .pf-jalon, .pf-lien::after { transition: none; }
}

/* Sous 480 px, les actions s'empilent et « Continuer » passe en premier,
   pleine largeur : le pouce d'un praticien debout dans un couloir n'a pas à
   viser un bouton de 120 px calé à droite. */
@media (max-width: 479px) {
  .pf { padding: 18px 16px 16px; }
  .pf-jalon { inline-size: 24px; block-size: 24px; font-size: 12px; }
  .pf-lien { block-size: 2px; }
  .pf-sit { padding: 12px 14px; }
  .pf-actions { flex-direction: column-reverse; align-items: stretch; }
  .pf-next, .pf-send { inline-size: 100%; margin-inline-start: 0; }
  .pf-back { min-height: 44px; }
}

/* ── La relecture intelligente (phase 2) ────────────────────────────────
   Le brief revient affiché comme la plateforme affiche une extraction :
   étiquettes hautes, valeurs éditables — de VRAIS champs, car c'est la
   relecture du visiteur qui fait foi, pas la sortie du modèle. */
.pf-brief {
  display: grid; gap: 10px; margin-bottom: 10px; padding: 13px 15px;
  background: var(--card); border-radius: var(--r-sm);
  border: 1px solid color-mix(in srgb, var(--seha) 30%, var(--border));
  border-inline-start: 3px solid var(--seha);
}
.pf-brief .h b { font-size: var(--fs-min); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--soft-fg); }
html[lang="ar"] .pf-brief .h b { letter-spacing: 0; text-transform: none; font-size: 12.5px; }
.pf-brief-note { margin: -4px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--soft-fg); }
.pf-brief-lecture { margin: 0; font-size: 13.5px; color: var(--soft-fg); }
.pf-brief-rang { display: grid; gap: 4px; }
.pf-brief-rang > span { font-size: var(--fs-min); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--soft-fg); }
html[lang="ar"] .pf-brief-rang > span { letter-spacing: 0; text-transform: none; font-size: 12.5px; }
.pf textarea.pf-brief-champ {
  font-size: 14.5px; line-height: 1.55; padding: 8px 11px;
  background: var(--muted); border-color: transparent; resize: none;
}
.pf textarea.pf-brief-champ:focus { background: var(--card); border-color: var(--border); }
.pf-brief-questions { font-size: 13.5px; line-height: 1.6; color: var(--muted-fg); }
.pf-brief-questions > span { display: block; font-size: var(--fs-min); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--soft-fg); margin-bottom: 4px; }
html[lang="ar"] .pf-brief-questions > span { letter-spacing: 0; text-transform: none; font-size: 12.5px; }
.pf-brief-questions ul { margin: 0; padding-inline-start: 18px; display: grid; gap: 3px; }

/* ── Le cadre flottant ───────────────────────────────────────────────────
   La coquille de la vitrine, portée ici : une toile doucement teintée —
   bleu vers sarcelle, les deux pôles du logo — et, posée dessus, une feuille
   franche à filet, rayon et ombre. Le corpus et les documents juridiques
   cessent d'être des pages nues sur fond gris : ce sont les mêmes feuilles
   que la page d'accueil, au même endroit de l'écran.

   Le cadre est plus étroit que celui de la vitrine (1080 px contre 1280) :
   la vitrine porte des grilles pleine largeur, ces pages portent une colonne
   de lecture de 776 px. Un cadre trop large la laisserait flotter au milieu
   d'un vide. La colonne, elle, ne bouge pas — c'est une mesure typographique,
   pas une décoration.

   `overflow: clip` fait tenir l'en-tête collant DANS le rayon : sans lui, sa
   bande carrée déborderait des coins arrondis au premier pixel de défilement.
   C'est le mécanisme exact de la vitrine, et il y est éprouvé. */
:root {
  --radius-frame: 24px;
  --frame-max: 1080px;
}

body {
  background:
    linear-gradient(165deg,
      color-mix(in oklab, var(--primary) 9%, var(--bg)),
      var(--bg) 46%,
      color-mix(in oklab, var(--seha) 11%, var(--bg)));
  padding: clamp(10px, 2.2vw, 28px);
  min-height: 100vh;
}

.frame {
  max-width: var(--frame-max);
  margin: 0 auto;
  background: var(--bg);
  border: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
  border-radius: var(--r-frame);
  box-shadow: 0 24px 70px rgba(15, 23, 42, .10);
  overflow: clip;
}

/* L'en-tête épouse le cadre, plus la colonne de lecture : c'est la coiffe de
   la feuille, pas le titre du texte. */
.topbar-in { max-width: none; padding-inline: clamp(18px, 3vw, 32px); }

/* Sous 700 px, la feuille EST l'écran : le cadre perdrait son sens et ne
   coûterait que des pixels de marge sur un téléphone. */
@media (max-width: 700px) {
  body { padding: 0; }
  .frame { border-radius: 0; border-inline: 0; border-top: 0; box-shadow: none; }
}

@media print {
  body { background: #fff; padding: 0; }
  .frame { border: 0; border-radius: 0; box-shadow: none; max-width: none; }
}