/* ==========================================================================
   Algo Data · charte Éditeur v1.1 · ad-socle.css
   Direction A « Clair produit », affinée le 03/10/2026 (cinq chantiers intégrés :
   logo, typographie, couleur, signature, écrans). Proposition, à juger par Antoine.

   Trois feuilles de production, chargées dans cet ordre :
     1. ad-socle.css       polices, jetons (jour et nuit), base, typographie, mise en page,
                           en-tête, boutons et liens, pied : ce que porte chaque page ;
     2. ad-ecrans.css      cadres d'appareil, kit d'interface, écrans produit, recadrage ;
     3. ad-composants.css  scènes, planète, objets, photo, et tous les blocs de page.
   La planche (ad-planche.css) ne part jamais en production.

   Règles : classes ad-*, propriétés --ad-* ; aucun hex hors du bloc 2 ; les composants ne lisent
   que des rôles. Valeurs de référence et règles d'usage : ../../DESIGN.md.
   ========================================================================== */

/* 1. Polices -----------------------------------------------------------------
   Sous-ensembles « latin+ » faits à partir des fichiers sources (google/fonts), toutes fonctions
   OpenType gardées : l'Inter de Google Fonts n'a ni U+202F ni variantes cv/ss. OFL 1.1 (licences
   dans ../polices/licences). En production : static-cid, noms de fichiers versionnés, préchargés
   par <link rel="preload">, jamais par @import dans une feuille compilée. */
@font-face {
  font-family: "Inter";
  src: url("/polices/inter-latin.woff2") format("woff2");
  font-weight: 400 650;   /* axe opsz 14–32 gardé : coupe Text en petit, Display en grand */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("/polices/schibsted-grotesk-latin.woff2") format("woff2");
  font-weight: 450 650;
  font-style: normal;
  font-display: swap;
}
/* Schibsted Grotesk n'a ni U+202F, ni U+2009, ni ᵉ ʳ : la famille les emprunte à Inter (même fichier). */
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("/polices/inter-latin.woff2") format("woff2");
  font-weight: 450 650;
  font-style: normal;
  font-display: swap;
  unicode-range: U+202F, U+2009, U+1D49, U+02B3;
}
/* Replis métriques (fontTools contre Arial) : la page ne saute pas quand la police arrive. */
@font-face {
  font-family: "Inter repli";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 106.6%; ascent-override: 90.9%; descent-override: 22.6%; line-gap-override: 0%;
}
@font-face {
  font-family: "Schibsted repli";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 106.4%; ascent-override: 91.8%; descent-override: 24.2%; line-gap-override: 0%;
}

/* 2. Palette brute : jamais lue par un composant -----------------------------
   OKLCH en commentaire (L C h). Neutres à chroma nulle, de jour comme de nuit. */
:root {
  /* neutres de jour */
  --ad-c-blanc: #FFFFFF;           /* 1.000 0 */
  --ad-c-neige: #FAFAFA;           /* 0.985 0 */
  --ad-c-brume: #F3F3F3;           /* 0.964 0 */
  --ad-c-penombre: #ECECEC;        /* 0.943 0 — la scène loin de la lumière */
  --ad-c-perle: #EAEAEA;           /* 0.937 0 */
  --ad-c-filet: #E4E4E4;           /* 0.919 0 */
  --ad-c-filet-fort: #CDCDCD;      /* 0.848 0 */
  --ad-c-acier: #8C8C8C;           /* 0.640 0 — 3,36:1 : bordures seulement */
  --ad-c-graphite: #6A6A6A;        /* 0.524 0 — 5,41:1 */
  --ad-c-ardoise: #4F4F4F;         /* 0.428 0 — 8,19:1 */
  --ad-c-fusain: #2E2E2E;          /* 0.301 0 */
  --ad-c-encre: #111112;           /* 0.178 0.002 — l'encre du logo */
  /* neutres de nuit (A avait C ≈ 0,004 vers 286° : un rien bleuté) */
  --ad-c-nuit: #0C0C0C;            /* 0.154 0 — page */
  --ad-c-nuit-2: #161616;          /* 0.200 0 — bandes, surfaces */
  --ad-c-nuit-3: #1F1F1F;          /* 0.239 0 — scène, bande de fin */
  --ad-c-nuit-4: #2A2A2A;          /* 0.285 0 — la lumière de la salle */
  --ad-c-nuit-filet: #303030;
  --ad-c-nuit-filet-fort: #4A4A4A;
  --ad-c-nuit-texte: #F2F2F2;
  --ad-c-nuit-doux: #B4B4B4;
  --ad-c-nuit-discret: #9C9C9C;
  --ad-c-nuit-clair: #DADADA;      /* survol d'un aplat clair en nuit (bouton Contact) */
  /* le logo : seule source de couleur de la marque */
  --ad-c-soleil: #FFDA1A;          /* 0.893 0.180 96 — la planète */
  --ad-c-soleil-vif: #FFCE00;      /* survol du bouton */
  --ad-c-soleil-pale: #FFF1A8;     /* 0.953 0.093 99 — surlignage ; plancher de chroma du jaune */
  --ad-c-anneau: #807F7C;
  --ad-c-anneau-clair: #C8C7C4;    /* anneau sur fond sombre : la teinte de l'anneau d'origine, sans l'amplifier (C 0,0043) */
  --ad-c-orbite: #B4B5B4;
  --ad-c-lettrage: #646564;
  --ad-c-lettrage-clair: #ECEBEA;  /* logo clair (C 0,0017 ; le lettrage clair du tour 1, C 0,0083, était plus chaud que le crème refusé) */
  /* états (site) */
  --ad-c-vert: #0F7A47;
  --ad-c-vert-pale: #E5F4EC;
  --ad-c-rouge: #B3261E;
  --ad-c-rouge-pale: #FCEBEA;
  --ad-c-vert-nuit: #5CC995;  --ad-c-vert-nuit-fond: #12301F;
  --ad-c-rouge-nuit: #F2948C; --ad-c-rouge-nuit-fond: #3A1512;
  /* ambre : écrans produit seulement (« en attente »). Son pâle est en zone crème */
  --ad-c-ambre: #965A00;
  --ad-c-ambre-pale: #FCF1DA;
  /* organisateurs FICTIFS des démonstrations : jamais Algo Data, jamais hors d'un écran.
     Trois palettes à luminance égale (7,7 à 8,1:1 avec le blanc). */
  --ad-c-sarcelle-pale: #E2EFEE;  --ad-c-sarcelle-clair: #CFE6E4;  --ad-c-sarcelle-vif: #1C7C79;
  --ad-c-sarcelle: #0E5A5C;       --ad-c-sarcelle-fonce: #093E40;  --ad-c-corail: #F08A5D;   /* Lorvalle */
  --ad-c-aubergine-pale: #F4E9F3; --ad-c-aubergine-clair: #EAD9E9; --ad-c-aubergine-vif: #8E598C;
  --ad-c-aubergine: #6C416A;      --ad-c-aubergine-fonce: #4A2B49; --ad-c-rose: #EDA3AF;     /* Club des industriels */
  --ad-c-brique-pale: #FAE9E3;    --ad-c-brique-clair: #F2DAD1;    --ad-c-brique-vif: #AF5234;
  --ad-c-brique: #8B3A25;         --ad-c-brique-fonce: #612616;    --ad-c-menthe: #98D7C2;   /* Salon de l'emploi */
  /* Univers : son logotype dans ses propres écrans */
  --ad-c-univers: #2B49E0;
  --ad-c-univers-pale: #E4E9FC;
}

/* 3. Rôles, jour : seuls lus par les composants ------------------------------ */
:root {
  color-scheme: light;
  /* surfaces et textes */
  --ad-fond: var(--ad-c-blanc);
  --ad-fond-alt: var(--ad-c-neige);
  --ad-surface: var(--ad-c-blanc);
  --ad-surface-creuse: var(--ad-c-neige);
  --ad-texte: var(--ad-c-encre);
  --ad-texte-doux: var(--ad-c-ardoise);
  --ad-texte-discret: var(--ad-c-graphite);
  --ad-filet: var(--ad-c-filet);
  --ad-filet-fort: var(--ad-c-filet-fort);
  --ad-champ-bordure: var(--ad-c-acier);
  /* la scène : éclairée par la planète, lumière BLANCHE (un jaune fondu donne du crème), sans trame */
  --ad-scene: var(--ad-c-brume);
  --ad-scene-lumiere: var(--ad-c-blanc);
  --ad-scene-penombre: var(--ad-c-penombre);
  --ad-scene-contour: rgba(17, 17, 18, .06);
  /* action, liens, focus */
  --ad-action: var(--ad-c-soleil);
  --ad-action-survol: var(--ad-c-soleil-vif);
  --ad-sur-action: var(--ad-c-encre);
  --ad-secondaire-bordure: var(--ad-c-acier);   /* 3,36:1 */
  --ad-lien: var(--ad-c-encre);
  --ad-lien-trait: var(--ad-c-graphite);        /* 5,41:1 */
  --ad-lien-survol: var(--ad-c-soleil-pale);    /* le surligneur qui se dessine au survol */
  --ad-surlignage: var(--ad-c-soleil-pale);
  --ad-planete: var(--ad-c-soleil);
  --ad-focus: var(--ad-c-encre);
  --ad-focus-halo: var(--ad-c-blanc);
  --ad-courant: var(--ad-c-encre);              /* trait de 2 px sous la page courante */
  --ad-encre-survol: var(--ad-c-fusain);        /* survol du bouton d'encre (Contact) : blanc sur fusain 13,7:1 */
  /* états : la couleur ne dit que « en service », le remplissage dit le reste */
  --ad-ok: var(--ad-c-vert);
  --ad-ok-fond: var(--ad-c-vert-pale);
  --ad-demo: var(--ad-c-encre);
  --ad-dev: var(--ad-c-ardoise);
  --ad-dev-fond: var(--ad-c-neige);
  --ad-avenir: var(--ad-c-graphite);
  --ad-avenir-fond: var(--ad-c-neige);
  --ad-erreur: var(--ad-c-rouge);
  --ad-erreur-fond: var(--ad-c-rouge-pale);
  --ad-statut-pilote: var(--ad-c-graphite);
  /* la planète (lever, sceau) et le logo en ligne */
  --ad-astre-disque: var(--ad-c-soleil);
  --ad-astre-anneau: var(--ad-c-anneau);
  --ad-astre-orbite: var(--ad-c-orbite);
  --ad-logo-disque: var(--ad-c-soleil);
  --ad-logo-anneau: var(--ad-c-anneau);
  --ad-logo-orbite: var(--ad-c-orbite);
  --ad-logo-lettrage: var(--ad-c-lettrage);
  --ad-logo-std: block;
  --ad-logo-clair: none;
  /* la bande d'encre de fin */
  --ad-encre-fond: var(--ad-c-encre);
  --ad-encre-bord: var(--ad-c-encre);
  --ad-encre-texte: var(--ad-c-nuit-texte);
  --ad-encre-doux: var(--ad-c-nuit-doux);
  --ad-encre-filet: var(--ad-c-nuit-filet);
  --ad-encre-anneau: var(--ad-c-anneau-clair);
  --ad-encre-orbite: var(--ad-c-anneau);
  /* cadres, appareils, objets posés : une seule lumière, la planète, en haut à droite ;
     les ombres tombent en bas à gauche. Trois altitudes. */
  --ad-cadre-fond: var(--ad-c-blanc);
  --ad-cadre-chrome: var(--ad-c-neige);
  --ad-appareil-contour: rgba(17, 17, 18, .5);
  --ad-appareil-biseau: inset 0 2px 0 1px var(--ad-c-fusain);
  --ad-ombre-objet:                  /* altitude 1 : badge, facture, registre, feuille */
    0 0 0 1px rgba(17, 17, 18, .07),
    0 1px 2px rgba(17, 17, 18, .06),
    -3px 10px 22px -12px rgba(17, 17, 18, .28);
  --ad-ombre-cadre:                  /* altitude 2 : fenêtre de navigateur sur la scène */
    0 0 0 1px rgba(17, 17, 18, .08),
    0 1px 2px rgba(17, 17, 18, .05),
    -4px 12px 28px -10px rgba(17, 17, 18, .16),
    -16px 40px 80px -28px rgba(17, 17, 18, .22);
  --ad-ombre-cadre-court:            /* même altitude, marge de 12 px */
    0 0 0 1px rgba(17, 17, 18, .08),
    0 1px 2px rgba(17, 17, 18, .05),
    -2px 8px 18px -8px rgba(17, 17, 18, .18);
  --ad-ombre-appareil:               /* altitude 3 : téléphone, tablette tenus */
    0 0 0 1px var(--ad-appareil-contour),
    -10px 30px 60px -20px rgba(17, 17, 18, .45),
    -4px 12px 24px -12px rgba(17, 17, 18, .3);
  --ad-cadre-ombre: var(--ad-ombre-cadre);
  --ad-carte-posee: var(--ad-ombre-objet);
  /* légende de scène : une ligne de crédit signée de la planète en miniature (sans orbite) */
  --ad-legende-filet: var(--ad-c-filet-fort);
  --ad-legende-signe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='15 24 410 283'%3E%3Cpath fill='%23807F7C' d='M422.67 304.25A245.38 55.46 34.47 0 1 188.98 211.09A245.38 55.46 34.47 0 1 18.07 26.49A245.38 55.46 34.47 0 1 251.76 119.65A245.38 55.46 34.47 0 1 422.67 304.25ZM399.79 290.97A216.49 48.94 34.47 0 0 249.01 128.09A216.49 48.94 34.47 0 0 42.83 45.91A216.49 48.94 34.47 0 0 193.61 208.79A216.49 48.94 34.47 0 0 399.79 290.97Z'/%3E%3Ccircle fill='%23FFDA1A' cx='219.66' cy='180.05' r='122.35'/%3E%3Cpath fill='%23807F7C' d='M169.34 68.53A245.38 55.46 34.47 0 1 341.68 188.99A122.35 122.35 0 0 1 340.36 200.06A216.49 48.94 34.47 0 0 159.05 73.77A122.35 122.35 0 0 1 169.34 68.53Z'/%3E%3C/svg%3E");
  /* objets de l'événement, photographie, parcours */
  --ad-evt-trait: var(--ad-c-encre);
  --ad-evt-papier: var(--ad-c-blanc);
  --ad-evt-creux: var(--ad-c-brume);
  --ad-evt-ligne: var(--ad-c-filet-fort);
  --ad-evt-moyen: var(--ad-c-acier);
  --ad-evt-cloison: var(--ad-c-orbite);
  --ad-evt-soleil: var(--ad-c-soleil);
  --ad-evt-pale: var(--ad-c-soleil-pale);
  --ad-evt-epaisseur: 1.5px;
  --ad-photo-fond: var(--ad-c-brume);
  --ad-photo-contour: rgba(17, 17, 18, .1);
  --ad-photo-repere: var(--ad-c-filet-fort);
  --ad-parcours: var(--ad-c-orbite);

  /* typographie : familles et fonctions */
  --ad-police-texte: "Inter", "Inter repli", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ad-police-titre: "Schibsted Grotesk", "Schibsted repli", "Inter", ui-sans-serif, system-ui, sans-serif;
  --ad-police-ui: var(--ad-police-texte);
  --ad-police: var(--ad-police-texte);
  --ad-titre-fonctions: "kern", "lnum";
  --ad-chiffre-fonctions: "kern", "lnum", "tnum";
  /* échelle par rôle, 390 → 1 440 px : clamp(min, a + b·vw, max) ; b = (max − min) / 1 050 × 100 */
  --ad-t-affichage: clamp(2.5rem, 1.85rem + 2.667vw, 4.25rem);     /* 40 → 68 : la planète se lève dans le quart vide */
  --ad-il-affichage: 1.04;  --ad-gr-affichage: 540;  --ad-ap-affichage: -0.03em;
  --ad-t-titre-1: clamp(2.25rem, 1.693rem + 2.286vw, 3.75rem);    /* 36 → 60 */
  --ad-il-titre-1: 1.06;    --ad-gr-titre-1: 550;    --ad-ap-titre-1: -0.026em;
  --ad-t-titre-2: clamp(1.875rem, 1.504rem + 1.524vw, 2.875rem);  /* 30 → 46 */
  --ad-il-titre-2: 1.1;     --ad-gr-titre-2: 550;    --ad-ap-titre-2: -0.022em;
  --ad-t-titre-3: clamp(1.25rem, 1.18rem + 0.286vw, 1.4375rem);   /* 20 → 23, Inter */
  --ad-il-titre-3: 1.25;    --ad-gr-titre-3: 600;    --ad-ap-titre-3: -0.014em;
  --ad-t-titre-4: clamp(1.0625rem, 1.039rem + 0.095vw, 1.125rem); /* 17 → 18, Inter */
  --ad-il-titre-4: 1.35;    --ad-gr-titre-4: 600;    --ad-ap-titre-4: -0.008em;
  --ad-t-chapeau: clamp(1.125rem, 1.055rem + 0.286vw, 1.3125rem); /* 18 → 21 */
  --ad-il-chapeau: 1.5;     --ad-gr-chapeau: 400;    --ad-ap-chapeau: -0.006em;
  --ad-t-texte: clamp(1rem, 0.977rem + 0.095vw, 1.0625rem);       /* 16 → 17 */
  --ad-il-texte: 1.6;       --ad-gr-texte: 400;      --ad-ap-texte: 0em;
  --ad-t-petit: 0.9375rem;  --ad-il-petit: 1.55;                   /* 15 */
  --ad-t-legende: 0.8125rem; --ad-il-legende: 1.45;  --ad-ap-legende: 0.004em;  /* 13 */
  --ad-t-legende-texte: 0.875rem;                                  /* 14 : description de scène */
  --ad-t-poincon: 0.75rem;  --ad-il-poincon: 1.3;    --ad-gr-poincon: 600;  --ad-ap-poincon: 0.07em;  /* 12 */
  --ad-t-chiffre: clamp(1.375rem, 1.236rem + 0.571vw, 1.75rem);   /* 22 → 28 */
  --ad-il-chiffre: 1.1;     --ad-gr-chiffre: 560;    --ad-ap-chiffre: -0.015em;

  /* espace : multiples de 4 px */
  --ad-e-1: 4px; --ad-e-2: 8px; --ad-e-3: 12px; --ad-e-4: 16px; --ad-e-5: 20px;
  --ad-e-6: 24px; --ad-e-8: 32px; --ad-e-10: 40px; --ad-e-12: 48px; --ad-e-16: 64px;
  --ad-e-20: 80px; --ad-e-24: 96px;
  --ad-bande-esp: clamp(72px, 50px + 5.6vw, 128px);
  --ad-max: 1200px;
  --ad-gouttiere: clamp(16px, 2vw + 8px, 32px);
  /* rayons concentriques : extérieur = intérieur + marge */
  --ad-r-1: 6px;   /* pastilles, puces */
  --ad-r-2: 10px;  /* boutons, champs */
  --ad-r-3: 16px;  /* cartes, fenêtres de navigateur */
  --ad-r-4: 20px;  /* cadres de page, photo, registre */
  --ad-r-5: 28px;  /* scène = 16 + 12 */
}
/* Sous 390 px (petits téléphones, zoom à 400 %) : les titres suivent la fenêtre, en proportion. */
@media (max-width: 389.98px) {
  :root {
    --ad-t-affichage: clamp(1.75rem, 10.256vw, 2.5rem);   /* plancher en rem : suit le zoom du texte seul */
    --ad-t-titre-1: clamp(1.625rem, 9.231vw, 2.25rem);
    --ad-t-titre-2: clamp(1.5rem, 7.692vw, 1.875rem);
  }
}
/* Variante de titrage : <html data-typo="inter">, tout en Inter, coupe Display réglée (zéro octet). */
:root[data-typo="inter"] {
  --ad-police-titre: var(--ad-police-texte);
  --ad-titre-fonctions: "kern", "cv10", "cv12", "cv13", "ss01";
  --ad-chiffre-fonctions: "kern", "ss01", "tnum";
  --ad-gr-affichage: 560; --ad-ap-affichage: -0.036em;
  --ad-gr-titre-1: 580;   --ad-ap-titre-1: -0.03em;
  --ad-gr-titre-2: 580;   --ad-ap-titre-2: -0.026em;
  --ad-gr-chiffre: 580;   --ad-ap-chiffre: -0.02em;
  --ad-ap-poincon: 0.085em;
}

/* 4. Rôles d'écran et palettes d'organisateurs fictifs ------------------------
   Les écrans restent des « captures » claires dans les deux thèmes : la nuit ne
   redéfinit aucun --ad-ui-*. La marque de l'organisateur passe par --ad-org-* ;
   --ad-ui-sarcelle-* en sont des alias, pour que les fragments ne changent pas. */
:root,
[class*="ad-org--"] {
  --ad-ui-acier: var(--ad-c-acier);
  --ad-ui-ambre: var(--ad-c-ambre);
  --ad-ui-ambre-pale: var(--ad-c-ambre-pale);
  --ad-ui-ardoise: var(--ad-c-ardoise);
  --ad-ui-blanc: var(--ad-c-blanc);
  --ad-ui-brume: var(--ad-c-brume);
  --ad-ui-encre: var(--ad-c-encre);
  --ad-ui-filet-fort: var(--ad-c-filet-fort);
  --ad-ui-fusain: var(--ad-c-fusain);
  --ad-ui-graphite: var(--ad-c-graphite);
  --ad-ui-neige: var(--ad-c-neige);
  --ad-ui-perle: var(--ad-c-perle);
  --ad-ui-univers: var(--ad-c-univers);
  --ad-ui-univers-pale: var(--ad-c-univers-pale);
  --ad-ui-vert: var(--ad-c-vert);
  --ad-ui-vert-pale: var(--ad-c-vert-pale);
  --ad-ui-sarcelle: var(--ad-org);
  --ad-ui-sarcelle-fonce: var(--ad-org-fonce);
  --ad-ui-sarcelle-vif: var(--ad-org-vif);
  --ad-ui-sarcelle-clair: var(--ad-org-clair);
  --ad-ui-sarcelle-pale: var(--ad-org-pale);
  --ad-ui-corail: var(--ad-org-accent);
  --ad-marque-demo: var(--ad-org);
  --ad-marque-demo-fonce: var(--ad-org-fonce);
  --ad-marque-demo-pale: var(--ad-org-pale);
  --ad-marque-demo-accent: var(--ad-org-accent);
}
:root,
.ad-org--sarcelle {
  --ad-org: var(--ad-c-sarcelle);
  --ad-org-fonce: var(--ad-c-sarcelle-fonce);
  --ad-org-vif: var(--ad-c-sarcelle-vif);
  --ad-org-clair: var(--ad-c-sarcelle-clair);
  --ad-org-pale: var(--ad-c-sarcelle-pale);
  --ad-org-accent: var(--ad-c-corail);
}
.ad-org--aubergine {
  --ad-org: var(--ad-c-aubergine);
  --ad-org-fonce: var(--ad-c-aubergine-fonce);
  --ad-org-vif: var(--ad-c-aubergine-vif);
  --ad-org-clair: var(--ad-c-aubergine-clair);
  --ad-org-pale: var(--ad-c-aubergine-pale);
  --ad-org-accent: var(--ad-c-rose);
}
.ad-org--brique {
  --ad-org: var(--ad-c-brique);
  --ad-org-fonce: var(--ad-c-brique-fonce);
  --ad-org-vif: var(--ad-c-brique-vif);
  --ad-org-clair: var(--ad-c-brique-clair);
  --ad-org-pale: var(--ad-c-brique-pale);
  --ad-org-accent: var(--ad-c-menthe);
}

/* 5. Nuit : un seul bloc de rôles, composé ------------------------------------
   Atteint par data-theme="dark" sur <html> (maquettes) ou sur <body> (production : le CMS écrit
   lui-même <html>), et par .ad-nuit pour un fragment. La bascule par prefers-color-scheme est
   produite par le build à partir de CE bloc (outils/construire.py, SOMBRE_SYSTEME) : une seule
   source, activée après la recette complète du sombre. */
:root[data-theme="dark"],
body[data-theme="dark"],
.ad-nuit {
  color-scheme: dark;
  --ad-fond: var(--ad-c-nuit);
  --ad-fond-alt: var(--ad-c-nuit-2);
  --ad-surface: var(--ad-c-nuit-2);
  --ad-surface-creuse: var(--ad-c-nuit-3);
  --ad-texte: var(--ad-c-nuit-texte);
  --ad-texte-doux: var(--ad-c-nuit-doux);
  --ad-texte-discret: var(--ad-c-nuit-discret);
  --ad-filet: var(--ad-c-nuit-filet);
  --ad-filet-fort: var(--ad-c-nuit-filet-fort);
  --ad-champ-bordure: var(--ad-c-graphite);
  /* la scène devient une salle, et la planète sa lampe */
  --ad-scene: var(--ad-c-nuit-3);
  --ad-scene-lumiere: var(--ad-c-nuit-4);
  --ad-scene-penombre: var(--ad-c-nuit-2);
  --ad-scene-contour: rgba(255, 255, 255, .06);
  --ad-secondaire-bordure: var(--ad-c-graphite);
  --ad-lien: var(--ad-c-nuit-texte);
  --ad-lien-trait: var(--ad-c-acier);
  --ad-lien-survol: transparent;
  --ad-focus: var(--ad-c-soleil);
  --ad-focus-halo: var(--ad-c-nuit);
  --ad-courant: var(--ad-c-soleil);
  --ad-encre-survol: var(--ad-c-nuit-clair);    /* en nuit, le bouton d'encre est clair : il fonce au survol */
  --ad-ok: var(--ad-c-vert-nuit); --ad-ok-fond: var(--ad-c-vert-nuit-fond);
  --ad-demo: var(--ad-c-nuit-texte);
  --ad-dev: var(--ad-c-nuit-doux); --ad-dev-fond: var(--ad-c-nuit-2);
  --ad-avenir: var(--ad-c-nuit-discret); --ad-avenir-fond: var(--ad-c-nuit-2);
  --ad-erreur: var(--ad-c-rouge-nuit); --ad-erreur-fond: var(--ad-c-rouge-nuit-fond);
  --ad-statut-pilote: var(--ad-c-nuit-discret);
  --ad-astre-anneau: var(--ad-c-anneau-clair);
  --ad-astre-orbite: var(--ad-c-anneau);
  --ad-logo-anneau: var(--ad-c-anneau-clair);
  --ad-logo-orbite: var(--ad-c-anneau);
  --ad-logo-lettrage: var(--ad-c-lettrage-clair);
  --ad-logo-std: none;
  --ad-logo-clair: block;
  --ad-encre-fond: var(--ad-c-nuit-3);
  --ad-encre-bord: var(--ad-c-nuit-filet-fort);
  --ad-cadre-chrome: var(--ad-c-neige);
  --ad-appareil-contour: rgba(255, 255, 255, .18);
  --ad-ombre-objet: 0 0 0 1px var(--ad-c-nuit-filet-fort), -3px 12px 26px -12px rgba(0, 0, 0, .7);
  --ad-ombre-cadre:
    0 0 0 1px rgba(255, 255, 255, .10),
    -4px 12px 28px -10px rgba(0, 0, 0, .5),
    -16px 40px 80px -28px rgba(0, 0, 0, .6);
  --ad-ombre-cadre-court: 0 0 0 1px rgba(255, 255, 255, .10), -2px 8px 18px -8px rgba(0, 0, 0, .55);
  --ad-ombre-appareil:
    0 0 0 1px var(--ad-appareil-contour),
    -10px 30px 60px -20px rgba(0, 0, 0, .6),
    -4px 12px 24px -12px rgba(0, 0, 0, .5);
  --ad-legende-filet: var(--ad-c-fusain);
  --ad-legende-signe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='15 24 410 283'%3E%3Cpath fill='%23C8C7C4' d='M422.67 304.25A245.38 55.46 34.47 0 1 188.98 211.09A245.38 55.46 34.47 0 1 18.07 26.49A245.38 55.46 34.47 0 1 251.76 119.65A245.38 55.46 34.47 0 1 422.67 304.25ZM399.79 290.97A216.49 48.94 34.47 0 0 249.01 128.09A216.49 48.94 34.47 0 0 42.83 45.91A216.49 48.94 34.47 0 0 193.61 208.79A216.49 48.94 34.47 0 0 399.79 290.97Z'/%3E%3Ccircle fill='%23FFDA1A' cx='219.66' cy='180.05' r='122.35'/%3E%3Cpath fill='%23C8C7C4' d='M169.34 68.53A245.38 55.46 34.47 0 1 341.68 188.99A122.35 122.35 0 0 1 340.36 200.06A216.49 48.94 34.47 0 0 159.05 73.77A122.35 122.35 0 0 1 169.34 68.53Z'/%3E%3C/svg%3E");
  --ad-evt-trait: var(--ad-c-nuit-texte);
  --ad-evt-papier: var(--ad-c-nuit-2);
  --ad-evt-creux: var(--ad-c-nuit-3);
  --ad-evt-ligne: var(--ad-c-ardoise);
  --ad-evt-moyen: var(--ad-c-nuit-discret);
  --ad-evt-cloison: var(--ad-c-anneau);
  --ad-photo-fond: var(--ad-c-nuit-3);
  --ad-photo-contour: rgba(255, 255, 255, .1);
  --ad-photo-repere: var(--ad-c-fusain);
  --ad-parcours: var(--ad-c-anneau);
}
.ad-nuit { background-color: var(--ad-fond); color: var(--ad-texte); }

/* 6. Base, posée sous body.ad (rien sur un élément nu : le profil Bootstrap et les textes
   riches du CMS ne sont pas touchés). :where() garde la spécificité d'un sélecteur nu. ---- */
.ad {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%; font-synthesis: none;
  margin: 0;
  background: var(--ad-fond);
  color: var(--ad-texte);
  font-family: var(--ad-police-texte);
  font-size: var(--ad-t-texte);
  line-height: var(--ad-il-texte);
  font-weight: var(--ad-gr-texte);
  letter-spacing: var(--ad-ap-texte);
  font-kerning: normal;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
:where(.ad) *, :where(.ad) *::before, :where(.ad) *::after { box-sizing: border-box; }
:where(.ad) :where(img, svg) { display: block; max-width: 100%; }
:where(.ad) :where(h1, h2, h3, h4, p, ul, ol, dl, figure, blockquote) { margin: 0; }
:where(.ad) :where(ul[role="list"], ol[role="list"]) { list-style: none; padding: 0; }
:where(.ad) a { color: var(--ad-lien); text-decoration-line: underline; text-decoration-color: var(--ad-lien-trait);
                text-decoration-thickness: 1px; text-underline-offset: .22em; }
@media (hover: hover) {
  :where(.ad) a:hover { text-decoration-color: currentColor; transition: text-decoration-color .12s ease; }
}
:where(.ad) :focus-visible { outline: 2px solid var(--ad-focus); outline-offset: 3px; border-radius: 4px; }
/* Surfaces du navigateur (passe impeccable, 05/10/2026) : sélection, curseur de saisie et barres de
   défilement prennent la charte au lieu des valeurs par défaut. Le soleil en aplat, l'encre dessus. */
:where(.ad) ::selection { background: var(--ad-c-soleil); color: var(--ad-c-encre); }
:where(.ad) :where(input, textarea, [contenteditable]) { caret-color: var(--ad-texte); }
html:has(body.ad) { scrollbar-color: var(--ad-c-filet-fort) transparent; }
:where(.ad) [id] { scroll-margin-top: 96px; }
:where(.ad) q { quotes: "«\202F" "\202F»" "“" "”"; }
.ad-num, .ad time, .ad-tel-num { font-variant-numeric: tabular-nums; }
.ad-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ad-saut { position: absolute; left: 16px; top: -48px; z-index: 50; background: var(--ad-texte); color: var(--ad-fond);
           padding: 10px 16px; border-radius: var(--ad-r-2); text-decoration: none; }
.ad-saut:focus { top: 12px; }
/* coupures françaises (outils/coupures.py) : noms de produits jamais coupés ; groupes de sens insécables dès 960 px */
.ad-insec { white-space: nowrap; }
@media (min-width: 60em) { .ad-groupe { white-space: nowrap; } }
/* dans les titres 1 et 2, un groupe de sens (vingt signes au plus) tient dès 600 px */
@media (min-width: 37.5em) { .ad-titre-1 .ad-groupe, .ad-titre-2 .ad-groupe { white-space: nowrap; } }
/* groupe court (18 signes au plus, outils/coupures.py GROUPES_COURTS) : insécable à toutes les largeurs */
.ad-groupe--court { white-space: nowrap; }

/* 7. Typographie par rôle -----------------------------------------------------
   Titrage (Schibsted Grotesk) : affichage, titres 1 et 2, chiffres, poinçon. Inter : tout le
   reste. Le titrage ne descend jamais sous 28 px, sauf le chiffre et le poinçon (des signes). */
.ad-affichage, .ad-titre-1, .ad-titre-2 {
  font-family: var(--ad-police-titre);
  font-feature-settings: var(--ad-titre-fonctions);
  hyphens: manual;
  text-wrap: balance;
  overflow-wrap: break-word;   /* WCAG 1.4.12 : sous un espacement forcé, une chaîne insécable passe à la ligne au lieu d'être rognée */
  color: var(--ad-texte);
}
.ad-affichage { font-size: var(--ad-t-affichage); line-height: var(--ad-il-affichage); font-weight: var(--ad-gr-affichage); letter-spacing: var(--ad-ap-affichage); }
.ad-titre-1   { font-size: var(--ad-t-titre-1);   line-height: var(--ad-il-titre-1);   font-weight: var(--ad-gr-titre-1);   letter-spacing: var(--ad-ap-titre-1); }
.ad-titre-2   { font-size: var(--ad-t-titre-2);   line-height: var(--ad-il-titre-2);   font-weight: var(--ad-gr-titre-2);   letter-spacing: var(--ad-ap-titre-2); }
.ad-titre-3, .ad-porte__public, .ad-offre__nom, .ad-contact-carte__nom, .ad-paliers__nom {
  font-family: var(--ad-police-texte);
  font-size: var(--ad-t-titre-3); line-height: var(--ad-il-titre-3);
  font-weight: var(--ad-gr-titre-3); letter-spacing: var(--ad-ap-titre-3);
  text-wrap: balance; color: var(--ad-texte);
}
.ad-titre-4, .ad-pied__signature, .ad-faq summary {
  font-size: var(--ad-t-titre-4); line-height: var(--ad-il-titre-4);
  font-weight: var(--ad-gr-titre-4); letter-spacing: var(--ad-ap-titre-4);
}
.ad-chapeau { font-size: var(--ad-t-chapeau); line-height: var(--ad-il-chapeau); font-weight: var(--ad-gr-chapeau);
              letter-spacing: var(--ad-ap-chapeau); color: var(--ad-texte-doux); text-wrap: pretty; max-width: 58ch; }
.ad-texte { max-width: 66ch; }
.ad-texte + .ad-texte { margin-top: var(--ad-e-4); }
.ad-petit { font-size: var(--ad-t-petit); line-height: var(--ad-il-petit); }
.ad-legende { font-size: var(--ad-t-legende); line-height: var(--ad-il-legende); letter-spacing: var(--ad-ap-legende);
              color: var(--ad-texte-discret); text-wrap: pretty; }
.ad-doux { color: var(--ad-texte-doux); }
/* Poinçon : capitales par text-transform, au titrage avec « case » ; le point suit le segment qu'il clôt.
   Sous 480 px, le poinçon d'identité passe en colonne ; le poinçon d'offre reste sur une ligne. */
.ad-poincon { font-family: var(--ad-police-titre); font-size: var(--ad-t-poincon); line-height: var(--ad-il-poincon);
              font-weight: var(--ad-gr-poincon); letter-spacing: var(--ad-ap-poincon);
              font-feature-settings: var(--ad-titre-fonctions), "case";
              text-transform: uppercase; color: var(--ad-texte-discret); font-variant-numeric: tabular-nums;
              display: flex; flex-wrap: wrap; row-gap: 6px; }
.ad-poincon > span { white-space: nowrap; display: inline-flex; align-items: center; }
.ad-poincon .ad-point { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ad-planete);
                        margin: 0 .7em 0 .6em; box-shadow: 0 0 0 1px rgba(17, 17, 18, .12) inset; }
/* Poinçon d'identité (trois segments) : sous 480 px, et toujours dans le pied, il tient sur deux lignes —
   « NANTES • ÉDITEUR DEPUIS 1994 » / « EN LIGNE DEPUIS 2000 » : le dernier segment passe seul à la
   ligne et le point qui l'annonçait s'efface (jamais de point orphelin en fin de ligne). */
.ad-pied .ad-poincon > span:last-child { flex-basis: 100%; }
.ad-pied .ad-poincon > span:nth-last-child(2) .ad-point { display: none; }
@media (max-width: 480px) {
  .ad-poincon:not(.ad-offre-tete .ad-poincon) > span:last-child { flex-basis: 100%; }
  .ad-poincon:not(.ad-offre-tete .ad-poincon) > span:nth-last-child(2) .ad-point { display: none; }
}

/* 8. Mise en page ------------------------------------------------------------ */
.ad-wrap { width: 100%; max-width: calc(var(--ad-max) + 2 * var(--ad-gouttiere)); margin-inline: auto; padding-inline: var(--ad-gouttiere); }
.ad-bande { padding-block: var(--ad-bande-esp); }
.ad-bande--alt { background: var(--ad-fond-alt); border-block: 1px solid var(--ad-filet); }
.ad-bande--serree { padding-block: calc(var(--ad-bande-esp) * .6); }
.ad-bande--suite { padding-top: 0; border-top: 0; }
.ad-tete { display: grid; gap: var(--ad-e-4); margin-bottom: clamp(32px, 20px + 3vw, 56px); max-width: 820px; }
.ad-tete--centre { margin-inline: auto; text-align: center; justify-items: center; }
.ad-grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--ad-e-6); }

/* 9. En-tête -------------------------------------------------------------------
   Logo SVG de 28 px (26 px sous 1 080 px), zone de protection ½ H = 8 px, lien ≥ 44 px.
   Sous 1 080 px, le panneau du menu s'ouvre DANS le flux : il pousse la page au lieu de la
   recouvrir, si bien qu'aucun élément focalisable n'est masqué (WCAG 2.4.11). */
.ad-barre { border-bottom: 1px solid var(--ad-filet); font-size: var(--ad-t-legende); color: var(--ad-texte-doux); }
.ad-barre .ad-wrap { display: flex; justify-content: flex-end; align-items: center; gap: var(--ad-e-6); min-height: 36px; }
.ad-barre a { color: var(--ad-texte-doux); text-decoration: none; padding-block: 8px; }
@media (hover: hover) { .ad-barre a:hover { color: var(--ad-texte); } }
.ad-barre .ad-tel-num { color: var(--ad-texte); font-weight: 560; }
.ad-entete { position: relative; z-index: 10; background: var(--ad-fond); }
.ad-entete__principal { display: flex; align-items: center; flex-wrap: wrap; column-gap: var(--ad-e-8); min-height: 72px; }
.ad-logo { display: inline-flex; align-items: center; min-height: 44px; padding-block: 8px; flex: none; }
.ad-logo img, .ad-logo .ad-logo-svg { height: 28px; width: auto; }
.ad-logo-svg { aspect-ratio: 1844.94 / 321.54; }               /* logo en ligne : la largeur suit la hauteur */
.ad-logo .ad-logo-svg { width: 161px; }
.ad-logo .ad-logo__std, .ad-pied__marque .ad-logo__std { display: var(--ad-logo-std); }
.ad-logo .ad-logo__clair, .ad-pied__marque .ad-logo__clair { display: var(--ad-logo-clair); }
/* logo en ligne (logo/logo-jetons.svg) : couleurs portées par les jetons */
.ad-logo__disque { fill: var(--ad-logo-disque); }
.ad-logo__anneau { fill: var(--ad-logo-anneau); }
.ad-logo__orbite { fill: var(--ad-logo-orbite); }
.ad-logo__lettrage { fill: var(--ad-logo-lettrage); }
.ad-nav { display: flex; align-items: center; gap: var(--ad-e-1); margin-left: auto; }
.ad-nav a { color: var(--ad-texte-doux); text-decoration: none; font-size: var(--ad-t-petit); font-weight: 500;
            padding: 10px 12px; border-radius: 8px; min-height: 44px; display: inline-flex; align-items: center; }
.ad-nav a[aria-current="page"] { color: var(--ad-texte); background: transparent; border-radius: 0; box-shadow: inset 0 -2px 0 var(--ad-courant); }
@media (hover: hover) { .ad-nav a:not([aria-current]):hover { color: var(--ad-texte); background: var(--ad-fond-alt); transition: background-color .12s ease, color .12s ease; } }
.ad-entete__contact { margin-left: var(--ad-e-3); }
.ad-menu { display: none; margin-left: auto; }
.ad-menu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
                     padding: 0 16px; border: 1px solid var(--ad-secondaire-bordure); border-radius: var(--ad-r-2); font-weight: 560; font-size: var(--ad-t-petit); }
.ad-menu > summary::-webkit-details-marker { display: none; }
.ad-menu__panneau { background: var(--ad-fond); display: grid; gap: 2px; padding: 4px 0 24px; }
.ad-menu__panneau a { font-size: 1.125rem; font-weight: 560; text-decoration: none; padding: 12px 0; border-bottom: 1px solid var(--ad-filet); }
.ad-menu[open] > summary .bi-list::before { content: "\f659"; }   /* ouvert : la croix (bi-x-lg) */
.ad-menu__panneau a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--ad-courant); padding-left: 14px; }
.ad-menu__panneau > a[href="/contact"] { margin-top: 14px; border: 0; border-radius: var(--ad-r-2); background: var(--ad-texte); color: var(--ad-fond);
                                          min-height: 48px; display: flex; align-items: center; justify-content: center; }
.ad-menu__panneau .ad-menu__barre { display: flex; flex-wrap: wrap; gap: 4px 20px; padding-top: 12px; font-size: var(--ad-t-petit); }
.ad-menu__panneau .ad-menu__barre a { font-size: var(--ad-t-petit); font-weight: 500; border: 0; padding: 10px 0; color: var(--ad-texte-doux); }
.ad-menu__panneau .ad-menu__barre .ad-tel-num { color: var(--ad-texte); text-decoration: underline; text-decoration-color: var(--ad-lien-trait); }
@media (max-width: 1080px) {
  .ad-entete .ad-nav, .ad-entete .ad-entete__contact { display: none; }
  .ad-entete__principal { position: relative; }
  .ad-menu { display: block; }
  /* ouvert, le menu prend toute la largeur sous le logo ; son bouton reste à sa place */
  .ad-menu[open] { flex: 0 0 100%; order: 3; margin-left: 0; }
  .ad-menu[open] > summary { position: absolute; right: var(--ad-gouttiere); top: 10px; }
  .ad-barre { display: none; }
  .ad-entete__principal { min-height: 64px; }
  .ad-logo img, .ad-logo .ad-logo-svg { height: 26px; }
  .ad-logo .ad-logo-svg { width: 149px; }
}

/* 10. Boutons et liens -----------------------------------------------------------
   La flèche est réservée au bouton principal et aux portes ; les liens texte n'en portent pas.
   Un seul aplat jaune par écran (le bouton principal). */
.ad-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px;
          padding: 0 20px; border-radius: var(--ad-r-2); font: inherit; font-size: 1rem; font-weight: 600; letter-spacing: -0.005em;
          text-decoration: none; border: 1px solid transparent; cursor: pointer; white-space: nowrap; text-align: center; }
.ad-btn .bi { font-size: 1em; color: currentColor; }
.ad-btn--fleche { padding-right: 18px; }                     /* côté icône = côté texte − 2 px */
.ad-btn--principal { background: var(--ad-action); color: var(--ad-sur-action);
                     box-shadow: inset 0 -1px 0 rgba(17, 17, 18, .14), 0 1px 2px rgba(17, 17, 18, .08); }
.ad-btn--secondaire { background: var(--ad-surface); color: var(--ad-texte); border-color: var(--ad-secondaire-bordure); }
.ad-btn--encre { background: var(--ad-texte); color: var(--ad-fond); }
.ad-btn--petit { min-height: 44px; padding: 0 16px; font-size: var(--ad-t-petit); }
@media (hover: hover) {
  .ad-btn--principal:hover { background: var(--ad-action-survol); transition: background-color .12s ease; }
  .ad-btn--secondaire:hover { border-color: var(--ad-texte); transition: border-color .12s ease; }
  .ad-btn--encre:hover { background: var(--ad-encre-survol); transition: background-color .12s ease; }
}
.ad-btn:focus-visible { outline-offset: 3px; }
@media (max-width: 400px) {   /* 320 px (zoom 400 %) : le libellé passe à la ligne plutôt que de déborder */
  .ad-btn { white-space: normal; min-height: 48px; padding-block: 10px; }
}
.ad-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ad-e-3) var(--ad-e-6); }
.ad-lien { display: inline-flex; align-items: center; min-height: 44px; font-weight: 560; }
/* survol : un surligneur soleil pâle se dessine sous le mot (en nuit : le trait passe au soleil) */
@media (hover: hover) {
  .ad-lien:hover,
  :where(.ad-texte, .ad-chapeau, .ad-petit, .ad-legende, .ad-legende-scene, .ad-faq, .ad-contact-carte, .ad-confiance) a:not(.ad-btn):hover {
    background: linear-gradient(var(--ad-lien-survol), var(--ad-lien-survol)) 0 88% / 100% .42em no-repeat;
    text-decoration-color: var(--ad-texte); transition: text-decoration-color .12s ease;
  }
  :root[data-theme="dark"] .ad-lien:hover, body[data-theme="dark"] .ad-lien:hover, .ad-nuit .ad-lien:hover { text-decoration-color: var(--ad-c-soleil); }
}

/* 11. Pied de page --------------------------------------------------------------- */
.ad-pied { border-top: 1px solid var(--ad-filet); background: var(--ad-fond-alt); padding-block: 64px 32px; font-size: var(--ad-t-petit); }
.ad-pied__grille { display: grid; grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2.6fr)); gap: var(--ad-e-8); }
.ad-pied__marque { display: grid; gap: var(--ad-e-4); align-content: start; justify-items: start; }
.ad-pied__marque img { height: 28px; width: auto; }
.ad-pied__signature { max-width: 26ch; text-wrap: balance; }
.ad-pied h2 { font-size: var(--ad-t-legende); font-weight: 600; color: var(--ad-texte-discret); margin-bottom: 12px; }
.ad-pied ul { list-style: none; padding: 0; display: grid; gap: 0; }
.ad-pied ul a { display: inline-flex; min-height: 34px; align-items: center; color: var(--ad-texte-doux); text-decoration: none; }
@media (hover: hover) { .ad-pied ul a:hover { color: var(--ad-texte); text-decoration: underline; } }
.ad-pied address { font-style: normal; color: var(--ad-texte-doux); display: grid; gap: 4px; line-height: 1.5; justify-items: start; }
.ad-pied address a { color: var(--ad-texte); font-weight: 560; text-decoration-color: var(--ad-lien-trait); }
.ad-pied__bas { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--ad-filet); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
                font-size: var(--ad-t-legende); color: var(--ad-texte-discret); }
.ad-pied__bas nav { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.ad-pied__bas a { color: var(--ad-texte-doux); min-height: 32px; display: inline-flex; align-items: center; }
/* Au doigt, les liens du pied atteignent 44 px (cible tactile) sans changer leur rendu à la souris. */
@media (pointer: coarse) { .ad-pied ul a, .ad-pied__bas a { min-height: 44px; } }
@media (max-width: 960px) { .ad-pied__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ad-pied__marque { grid-column: 1 / -1; } }
@media (max-width: 520px) { .ad-pied__grille { grid-template-columns: minmax(0, 1fr); } }

/* 12. Mouvement : un seul moment orchestré par page ---------------------------------
   L'entrée de l'ouverture (et, sur l'accueil, le lever de la planète). Toujours sous
   prefers-reduced-motion: no-preference, en « backwards » (rien ne reste figé à l'état final). */
@media (prefers-reduced-motion: no-preference) {
  .ad-entree { animation: ad-entree .5s cubic-bezier(.2, .7, .2, 1) backwards; }
  .ad-entree--2 { animation-delay: .08s; }
  .ad-entree--3 { animation-delay: .16s; }
  @keyframes ad-entree { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}