/* AnzarSeha — feuille de style des documents juridiques.
   Alignée sur la charte de la vitrine (jetons repris de src/index.css /
   public/presentation) : même police AnzarSans, même bleu Anzar / sarcelle
   Seha, mêmes cartes à ombre-anneau. Aucun appel à un tiers. */
@font-face {
  font-family: 'AnzarSans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/presentation/fonts/anzarsans.woff2) format('woff2');
}

/* ── Jetons — repris du produit (mode clair) ─────────────────────────── */
: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 — même règle que le corpus et la vitrine. */
  --tap-min: 44px;
  --bg: #f4f6fa;
  --card: #ffffff;
  --fg: #0f172a;
  --muted-fg: #556278;
  --soft-fg: #5b6b81;
  --border: #e3e8ef;
  --border-strong: #d3dbe6;
  --muted: #eef2f7;
  --primary: #1d4ed8;
  --primary-strong: #1e40af;
  --primary-soft: #eff6ff;
  --anzar: #0C4A6E;
  --seha: #0D9488;
  --seha-ink: #0f766e;
  --tile-a: #0EA5E9;
  --tile-b: #0D9488;
  --green-soft: #dcfce7; --green-fg: #15803d;
  --blue-soft: #e0f2fe;  --blue-fg: #0369a1;
  --radius-card: 16px;
  --radius-frame: 24px;
  --shadow-card: 0 1px 2px rgba(15, 23, 42, .05), 0 0 0 1px var(--border);
  --shadow-pop: 0 18px 44px rgba(15, 23, 42, .12);
  --ring: #1d4ed8;
}

/* La vitrine AnzarSeha est en thème clair uniquement ; les pages juridiques
   le sont donc aussi, pour rester cohérentes avec le reste du site — quel que
   soit le réglage clair/sombre du système. Toutes les couleurs sont peintes
   explicitement ci-dessus, aucun bloc « prefers-color-scheme: dark ». */
:root { 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;
}
.wrap { max-width: 776px; margin: 0 auto; padding: 0 24px; }
p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }

/* Étiquette « eyebrow » — reprise de la vitrine, remplace le monospace. */
.kicker, .toc h2, .tbl thead th, .docref dt {
  font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
}

/* ── Barre supérieure « verre » — même traitement que l'en-tête de la
   vitrine : translucide, floutée, contenu qui glisse dessous. ────────── */
.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);
}
/* Filet dégradé — accent « en-tête officiel » qui reste visible en sticky. */
.topbar::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--tile-a), var(--tile-b));
}
.topbar-in {
  max-width: 776px; margin: 0 auto; padding: 11px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.topbar-actions { display: flex; align-items: center; gap: 9px; }
.topbar .home, .topbar .act {
  font-size: 13px; font-weight: 600; color: var(--primary-strong); text-decoration: none;
  padding: 6px 13px; 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 .act { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-family: inherit; }
.topbar .act svg { color: var(--seha-ink); }
.topbar .home:hover, .topbar .act:hover { background: var(--primary-soft); border-color: color-mix(in srgb, var(--primary) 30%, var(--border)); }

/* ── Le contrat de barre, commun aux surfaces publiques ───────────────────
   Vitrine, corpus, porte, documents juridiques et page introuvable partagent
   désormais la même barre : marque à gauche ; à droite, les langues, un lien
   secondaire, et la porte en dernier. Ces documents étaient les seuls à ne
   proposer AUCUNE route vers la porte — un lecteur qui finissait les
   mentions légales n'avait plus qu'à repartir.

   Les langues portent deux libellés : le nom entier, qui reste dans le
   document pour les lecteurs d'écran, et le code abrégé quand la barre
   manque de place. Auparavant seul « FR / EN / ع » figurait ici, tandis que
   le corpus écrivait « Français / English / العربية » — deux vocabulaires
   pour une même commande. */
.langsw a .lbl-short { display: none; }
@media (max-width: 620px) {
  .langsw a .lbl-long { display: none; }
  .langsw a .lbl-short { display: inline; }
}

.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: 760px) {
  .btn-porte .lbl-long { display: none; }
  .btn-porte .lbl-short { display: inline; }
}
/* Ce que la barre lâche, et dans quel ordre — même règle que le corpus :
   « Imprimer » puis « Retour au site » puis le mot-symbole ; les langues et
   la porte ne partent jamais. Seuils mesurés, pas devinés. */
@media (max-width: 860px) { .topbar .home { display: none; } }
@media (max-width: 620px) { .brand .wm { display: none; } }
@media (max-width: 460px) { .topbar-in { padding-inline: 14px; } }

/* ── La règle des 44 px ───────────────────────────────────────────────────
   Mesuré avant correction sur cette page : sélecteur de langue 20×33 — le
   plus petit de tout le site — « Imprimer » 30 px, « Accueil » 16 px,
   « Haut de page » 22 px. La zone s'étend par pseudo-élément : le dessin ne
   bouge pas, seule la surface qui répond au doigt grandit. Tactile
   uniquement : au curseur, une cible de 44 px sous un texte de 12 px
   déborderait sur ses voisines sans rien apporter. */
@media (pointer: coarse) {
  .langsw a, .topbar .home, .topbar .act, .doc-foot .totop, .doc-foot a,
  .brand, .toc a, .callout > a.inl, .btn-porte { position: relative; }
  .langsw a::after, .topbar .home::after, .topbar .act::after, .doc-foot .totop::after,
  .doc-foot a::after, .brand::after, .toc a::after, .callout > a.inl::after,
  .btn-porte::after {
    content: ""; position: absolute; inset-inline: 0;
    top: 50%; transform: translateY(-50%);
    block-size: max(var(--tap-min), 100%);
  }
}
@media (max-width: 460px) { .topbar .act span { display: none; } .topbar .act { padding: 6px 9px; } }

/* Sélecteur de langue — petit contrôle segmenté FR / EN / ع. */
.langsw {
  display: inline-flex; align-items: center; gap: 2px; padding: 2px;
  border: 1px solid var(--border); border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--card) 70%, transparent);
}
.langsw a {
  font-size: 12px; font-weight: 700; color: var(--soft-fg); text-decoration: none;
  padding: 4px 9px; border-radius: var(--r-pill); line-height: 1;
}
.langsw a[aria-current] { background: var(--primary); color: #fff; }
.langsw a:not([aria-current]):hover { color: var(--primary-strong); background: var(--primary-soft); }
@media (max-width: 380px) { .topbar-in { flex-wrap: wrap; } }

/* ── Arabe / droite-à-gauche ─────────────────────────────────────────────
   AnzarSans est une police latine ; le corps arabe passe à une pile système
   arabe, avec un interligne un peu plus généreux. Le mot-symbole reste latin. */
[dir="rtl"] body {
  font-family: 'Segoe UI', 'Noto Sans Arabic', 'Geeza Pro', 'Dubai', Tahoma, ui-sans-serif, system-ui, sans-serif;
  line-height: 1.9;
}
[dir="rtl"] .brand .wm { font-family: 'AnzarSans', ui-sans-serif, system-ui, sans-serif; }
[dir="rtl"] .docref dd.mono, [dir="rtl"] code { direction: ltr; unicode-bidi: embed; }

/* ── En-tête du document ─────────────────────────────────────────────── */
.doc-head { padding: 30px 0 0; }
.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); }
.crumb { font-size: 13px; color: var(--soft-fg); margin: 22px 0 0; }
.crumb a { color: var(--primary-strong); text-decoration: none; }
.crumb a:hover { text-decoration: underline; }

.kicker { font-size: var(--fs-min); color: var(--seha-ink); margin: 22px 0 0; }
h1 {
  font-weight: 800; font-size: clamp(30px, 5.2vw, 46px); line-height: 1.04;
  letter-spacing: -.03em; margin: 10px 0 0; color: var(--fg);
}
.lead { font-size: clamp(16.5px, 1.6vw, 18.5px); line-height: 1.62; color: var(--muted-fg); margin: 18px 0 0; }

/* Bloc de références — front matter d'un document officiel. */
.docref {
  margin: 24px 0 0; border-radius: var(--r-card); background: var(--card);
  box-shadow: var(--shadow-card); overflow: hidden;
  display: grid; grid-template-columns: repeat(2, 1fr);
}
.docref > div { padding: 13px 18px; border-top: 1px solid var(--border); border-inline-start: 1px solid var(--border); }
.docref > div:nth-child(-n+2) { border-top: none; }
.docref > div:nth-child(odd) { border-inline-start: none; }
.docref .wide { grid-column: 1 / -1; }
.docref dt { font-size: var(--fs-min); color: var(--soft-fg); margin: 0 0 3px; }
.docref dd { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--fg); }
.docref dd.mono { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-weight: 500; letter-spacing: .02em; }
@media (max-width: 520px) {
  .docref { grid-template-columns: 1fr; }
  .docref > div { border-inline-start: none; border-top: 1px solid var(--border); }
  .docref > div:first-child { border-top: none; }
}

/* ── 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; }
.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 / articles ─────────────────────────────────────────────── */
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.22; margin: 0; display: flex; gap: 13px; align-items: center; color: var(--fg);
}
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; letter-spacing: .02em;
  font-variant-numeric: tabular-nums; flex: none;
}
section.art h3 { font-size: 16px; font-weight: 700; margin: 24px 0 0; color: var(--fg); letter-spacing: -.01em; }
section.art p { margin: 14px 0 0; color: var(--muted-fg); }
section.art p.first { margin-top: 18px; }
section.art strong { color: var(--fg); font-weight: 600; }
section.art 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;
}

/* Listes */
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 de données / définitions */
.tbl { margin: 18px 0 0; border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow-card); background: var(--card); }
.tbl table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.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;
}
.tbl td { color: var(--muted-fg); }
.tbl td strong { color: var(--fg); }
.tbl-scroll { overflow-x: auto; }

/* 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; }

/* Liens en ligne */
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 — navigation entre documents ───────────────────────────────── */
.doc-foot { border-top: 1px solid var(--border); margin-top: 14px; padding: 26px 0 64px; }
.doc-foot .totop { display: inline-block; font-size: 13px; font-weight: 600; color: var(--soft-fg); text-decoration: none; margin: 0 0 22px; }
.doc-foot .totop:hover { color: var(--primary-strong); }
.doc-foot .nav { display: flex; flex-wrap: wrap; gap: 10px 18px; font-size: 14px; }
.doc-foot .nav a { color: var(--primary-strong); text-decoration: none; }
.doc-foot .nav a:hover { text-decoration: underline; }
.doc-foot .nav a[aria-current] { color: var(--soft-fg); pointer-events: none; }
.doc-foot .fin { font-size: 12.5px; color: var(--soft-fg); margin: 20px 0 0; line-height: 1.7; }

/* Bouton flottant « Haut de page » (injecté par legal.js). */
.totop-float {
  position: fixed; inset-inline-end: 22px; bottom: 22px; z-index: 70;
  width: 42px; height: 42px; border-radius: var(--r-pill); cursor: pointer;
  border: 1px solid var(--border); color: var(--primary-strong); font-size: 18px; line-height: 1;
  background: color-mix(in srgb, var(--card) 82%, transparent);
  backdrop-filter: blur(10px) saturate(1.3); -webkit-backdrop-filter: blur(10px) saturate(1.3);
  box-shadow: var(--shadow-pop);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.totop-float.show { opacity: 1; visibility: visible; transform: none; }
.totop-float:hover { background: var(--primary-soft); }
@media (prefers-reduced-motion: reduce) { .totop-float { transition: none; } }

/* ── Impression / archivage — mise en page de document officiel ───────── */
@media print {
  @page { margin: 18mm 16mm; }
  html { scroll-behavior: auto; }
  body { background: #fff; color: #000; font-size: 10.6pt; }
  .topbar, .totop-float, .doc-foot .totop { display: none !important; }
  .wrap { max-width: none; padding: 0; }
  .doc-head { padding: 0; }
  .kicker { color: #333; }
  h1 { font-size: 22pt; }
  .toc, .tbl, .callout, .docref { box-shadow: none; border: 1px solid #bbb; }
  .docref > div, .tbl th, .tbl td { border-color: #bbb; }
  section.art { border-top: 1px solid #ccc; break-inside: auto; }
  section.art > h2 { break-after: avoid; }
  h3 { break-after: avoid; }
  .tbl, .callout, .docref, ul li, ol.body li { break-inside: avoid; }
  section.art p, li { color: #111; }
  /* Les liens deviennent vérifiables sur papier : l'URL suit le libellé. */
  a.inl[href^="http"]::after,
  a.inl[href^="mailto:"]::after { content: " (" attr(href) ")"; font-size: .85em; color: #444; word-break: break-all; }
  a.inl { color: #000; border-bottom: none; }
  .doc-foot { border-top: 1px solid #ccc; }
}

/* ── 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; }
}