/* ==========================================================================
   Algo Data · charte Éditeur v1.1 · ad-composants.css
   Les blocs de page : états, scène et lumière, planète (lever et sceau), légende, objets de
   l'événement, photographie, portes, preuves, plateformes, fonctions, offres, sections denses,
   fin de page, formulaire, ouvertures. Se charge après ad-socle.css et ad-ecrans.css : les
   compositions de page règlent les écrans qu'elles posent.
   ========================================================================== */

/* 1. États des fonctions ✓ ● ◐ ○ (dessinés : absents des polices) -------------------
   Le remplissage dit l'état ; la couleur ne dit que « en service ». Le mot suit toujours. */
.ad-etat { display: inline-flex; align-items: center; gap: 8px; font-size: var(--ad-t-petit); font-weight: 560; white-space: nowrap; }
.ad-etat::before { content: ""; flex: none; width: 14px; height: 14px; border-radius: 50%; box-sizing: border-box; }
.ad-etat--service { color: var(--ad-ok); }
.ad-etat--service::before {
  background: var(--ad-ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.6 7.3l2.2 2.2 4.6-4.8' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;
}
.ad-etat--demo { color: var(--ad-demo); }
.ad-etat--demo::before { background: var(--ad-demo); width: 10px; height: 10px; margin: 2px; }
.ad-etat--dev { color: var(--ad-dev); }
.ad-etat--dev::before { border: 2px solid currentColor; background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.ad-etat--avenir { color: var(--ad-avenir); }
.ad-etat--avenir::before { border: 2px solid currentColor; }
.ad-etat--pastille { padding: 4px 10px 4px 7px; border-radius: 999px; font-size: var(--ad-t-legende); }
.ad-etat--pastille.ad-etat--service { background: var(--ad-ok-fond); }
.ad-etat--pastille.ad-etat--dev { background: var(--ad-dev-fond); box-shadow: inset 0 0 0 1px var(--ad-filet); }
.ad-etat--pastille.ad-etat--avenir { background: var(--ad-avenir-fond); box-shadow: inset 0 0 0 1px var(--ad-filet); }
.ad-etat--pastille.ad-etat--demo { background: var(--ad-fond-alt); box-shadow: inset 0 0 0 1px var(--ad-filet); }
.ad-legende-etats { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.ad-legende-etats .ad-etat { font-size: var(--ad-t-legende); }

/* Statut d'offre (commercial) : neutre. « Sur devis » sans pictogramme d'état (le ✓ est aux
   fonctions), « pilote » en ◐ graphite. */
.ad-statut { display: inline-flex; align-items: center; gap: 10px; padding: 5px 12px 5px 9px; border-radius: 999px; max-width: 100%;
             background: var(--ad-fond-alt); font-size: var(--ad-t-petit); font-weight: 560; }   /* sans bordure : un statut, pas un bouton */
.ad-statut .ad-etat { font-size: inherit; color: var(--ad-texte); }
.ad-statut .ad-etat--service { gap: 0; padding-left: 4px; }
.ad-statut .ad-etat--service::before { display: none; }
.ad-statut .ad-etat--dev::before { border-color: var(--ad-statut-pilote); background: linear-gradient(90deg, var(--ad-statut-pilote) 50%, transparent 50%); }
@media (max-width: 400px) { .ad-statut .ad-etat, .ad-etat { white-space: normal; } }

/* Tableau des états (version de base) */
.ad-etats { width: 100%; border-collapse: collapse; font-size: var(--ad-t-petit); }
.ad-etats caption { text-align: left; caption-side: bottom; padding-top: var(--ad-e-4); }
.ad-etats th, .ad-etats td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--ad-filet); vertical-align: top; }
.ad-etats thead th { font-size: var(--ad-t-legende); font-weight: 600; color: var(--ad-texte-discret); border-bottom-color: var(--ad-filet-fort); }
.ad-etats tbody th { font-weight: 560; }
.ad-etats td:last-child { white-space: nowrap; }
@media (max-width: 640px) {
  /* l'en-tête reste dans l'arbre d'accessibilité (masqué à l'œil seulement) ; rôles explicites dans le HTML */
  .ad-etats thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ad-etats tr { display: grid; grid-template-columns: 1fr; padding: 12px 0; border-bottom: 1px solid var(--ad-filet); }
  .ad-etats th, .ad-etats td { border: 0; padding: 2px 0; }
  .ad-etats td:last-child { white-space: normal; }
}

/* 2. La scène, éclairée par la planète ------------------------------------------------
   Brume nette, sans trame ni lueur. La planète est la seule source de lumière : une lumière
   BLANCHE (un jaune fondu sur la brume donne du crème), qui vient d'en haut à droite, là où elle
   se lève ; pénombre #ECECEC à l'opposé. En nuit, la scène devient une salle et la planète sa lampe. */
.ad-scene { position: relative; isolation: isolate; border-radius: var(--ad-r-5); overflow: hidden;
            background-color: var(--ad-scene);
            background-image: radial-gradient(ellipse 95% 110% at 88% 0%,
              var(--ad-scene-lumiere) 0%, var(--ad-scene-lumiere) 10%, var(--ad-scene) 58%, var(--ad-scene-penombre) 100%);
            box-shadow: inset 0 0 0 1px var(--ad-scene-contour); }
.ad-figure { margin: 0; }

/* 2 bis. Fondu : un écran coupé par le bas de sa scène s'efface sur 48 px, au-dessus de tout ce que
   porte la scène (écran, téléphone, objet) ; jamais au milieu d'une ligne laissée nue. */
.ad-fondu { position: relative; }
.ad-fondu::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 48px; z-index: 4; pointer-events: none;
                   background: linear-gradient(to bottom, transparent, var(--ad-scene-penombre)); }

/* 3. La planète du logo (géométrie exacte de logo/planete.svg) ---------------------------
   Orbite déjà coupée par la réserve de l'anneau, aucun identifiant : on peut la répéter.
   Règles : toujours derrière un horizon (le lever) ou entière dans la bande d'encre (le sceau) ;
   une par écran, deux par page au plus ; jamais devant le produit ni un texte, jamais en lettre,
   puce ou icône, jamais avec lueur, étoiles ou trame, jamais recolorée ou étirée. */
.ad-astre { display: block; width: 100%; height: auto; overflow: visible; }
.ad-astre__disque { fill: var(--ad-astre-disque); }
.ad-astre__anneau { fill: var(--ad-astre-anneau); }
.ad-astre__orbite { fill: var(--ad-astre-orbite); }

/* 3.1 Le lever : la planète monte derrière un horizon, qui est toujours le produit.
   Géométrie (viewBox 409,44 × 321,54 ; disque r = 122,35) : largeur du SVG = 1,6732 d ;
   centre du disque à 0,8337 d du bord gauche ; haut du disque à 0,1575 d du haut.
   --ad-lv-d diamètre du disque · --ad-lv-x abscisse de son centre (depuis le bord gauche de la
   scène) · --ad-lv-f part du diamètre levée au-dessus de l'horizon (un tiers à la moitié). */
.ad-lever-cadre { position: relative; }
.ad-lever { position: absolute; z-index: 0; pointer-events: none;
            --ad-lv-h: calc(var(--ad-lv-d) * (var(--ad-lv-f) + .1575));        /* l'horizon, depuis le haut du SVG */
            width: calc(var(--ad-lv-d) * 1.6732);
            left: calc(var(--ad-lv-x) - var(--ad-lv-d) * .8337);
            top: calc(-1 * var(--ad-lv-h));
            clip-path: polygon(-50% -50%, 150% -50%, 150% var(--ad-lv-h), -50% var(--ad-lv-h)); }
.ad-lever .ad-astre { width: 100%; }
@media (prefers-reduced-motion: no-preference) {   /* le seul mouvement de la page : la planète se lève, une fois */
  .ad-lever .ad-astre { animation: ad-lever-monte 1.1s cubic-bezier(.2, .7, .2, 1) .12s backwards; }
  @keyframes ad-lever-monte { from { transform: translateY(14%); } to { transform: none; } }
}

/* 3.2 Le sceau : la planète entière, dans la bande d'encre de fin (anneau clair) */
.ad-sceau { --ad-astre-anneau: var(--ad-encre-anneau); --ad-astre-orbite: var(--ad-encre-orbite); }

/* 4. Légende de scène : une ligne de crédit signée de la planète, pas un avertissement ----
   Mots et ordre inchangés. La mention « Interface simplifiée — données fictives. » est un
   crédit (13 px, graphite) ; la description (14 px, ardoise) mène la lecture. Au-dessus de
   720 px : deux colonnes séparées d'un filet, comme une légende de catalogue. */
.ad-legende-scene {
  margin-top: var(--ad-e-5);
  display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 6px; column-gap: 20px; align-items: baseline;
  font-size: var(--ad-t-legende-texte); line-height: 1.5; color: var(--ad-texte-doux); text-wrap: pretty;
}
.ad-fictif { display: inline-flex; align-items: baseline; gap: 11px;
             font-size: var(--ad-t-legende); line-height: 1.45; font-weight: 400; letter-spacing: .005em; color: var(--ad-texte-discret); }
.ad-fictif::before { content: ""; flex: none; width: 17px; height: 12px; transform: translateY(1px);
                     background: var(--ad-legende-signe) center / contain no-repeat; }
.ad-legende__texte { max-width: 64ch; }
@media (min-width: 720px) {
  .ad-legende-scene { grid-template-columns: max-content minmax(0, 64ch); }
  .ad-legende-scene .ad-fictif { white-space: nowrap; }
  .ad-legende-scene .ad-legende__texte { border-left: 1px solid var(--ad-legende-filet); padding-left: 20px; }
}
/* légende qui change avec la composition (bureau : back-office et téléphone ; mobile : téléphone seul) */
.ad-seul-mobile { display: none; }
@media (max-width: 640px) { .ad-seul-mobile { display: inline; } .ad-seul-bureau { display: none; } }

/* 5. Annotation et surlignage ---------------------------------------------------------- */
.ad-annot { position: absolute; z-index: 3; display: inline-flex; align-items: flex-start; gap: 10px; background: var(--ad-surface); color: var(--ad-texte);
            font-size: 13.5px; line-height: 1.35; font-weight: 560; padding: 10px 14px 10px 12px; border-radius: 12px; max-width: 280px;
            box-shadow: var(--ad-ombre-objet); text-wrap: pretty; }
.ad-annot__point { flex: none; width: 10px; height: 10px; margin-top: 4px; border-radius: 50%; background: var(--ad-planete); box-shadow: 0 0 0 4px var(--ad-surlignage); }
.ad-marque { background: var(--ad-surlignage); box-shadow: 0 0 0 2px var(--ad-action); border-radius: 6px; }
/* second anneau de focus : sur une scène, une couleur d'organisateur ou une photo */
.ad-scene :focus-visible, .ad-figure :focus-visible { box-shadow: 0 0 0 7px var(--ad-focus-halo); }

/* 6. Objets de l'événement (outils/objets.py, objets/*.svg) ---------------------------------
   Grille 160 × 160, trait d'encre constant de 1,5 px, aplats neutres, un seul point soleil cerclé
   d'encre. Toujours décoratifs (aria-hidden) ; jamais de personnage, de texte lisible, de couleur
   d'organisateur ; jamais posés sur un écran ; trois par écran au plus. */
.ad-evt { display: block; width: 100%; height: auto; overflow: visible; pointer-events: none; }
.ad-evt .t, .ad-evt .p, .ad-evt .o, .ad-evt .c, .ad-evt .s {
  stroke-width: var(--ad-evt-epaisseur); stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ad-evt .t { fill: none; stroke: var(--ad-evt-trait); }
.ad-evt .p { fill: var(--ad-evt-papier); stroke: var(--ad-evt-trait); }
.ad-evt .o { fill: var(--ad-evt-creux); stroke: var(--ad-evt-trait); }
.ad-evt .e { fill: var(--ad-evt-trait); }
.ad-evt .l, .ad-evt .cf { fill: var(--ad-evt-ligne); }
.ad-evt .c { fill: none; stroke: var(--ad-evt-cloison); }
.ad-evt .s { fill: var(--ad-evt-soleil); stroke: var(--ad-evt-trait); }
.ad-evt .sp { fill: var(--ad-evt-pale); }
.ad-evt .pf { fill: var(--ad-evt-papier); }
.ad-evt .of { fill: var(--ad-evt-creux); }
.ad-evt .g { fill: var(--ad-evt-moyen); }
/* dans un cadre d'écran, l'objet suit les rôles d'écran : il reste clair en sombre */
.ad-evt--ecran { --ad-evt-trait: var(--ad-ui-encre); --ad-evt-papier: var(--ad-ui-blanc); --ad-evt-creux: var(--ad-ui-brume); --ad-evt-moyen: var(--ad-ui-acier);
                 --ad-evt-ligne: var(--ad-ui-filet-fort); --ad-evt-cloison: var(--ad-ui-perle); --ad-evt-soleil: var(--ad-c-soleil);
                 --ad-evt-pale: var(--ad-c-soleil-pale); }
.ad-evt--petit { width: 96px; }
.ad-evt--moyen { width: 160px; }
.ad-evt--grand { width: 240px; }
.ad-evt-tuile { display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; aspect-ratio: 1; padding: 12%; border-radius: var(--ad-r-4); background: var(--ad-scene); }

/* 7. Photographie ----------------------------------------------------------------------
   Une photo réelle, datée ; contour d'un pixel, rayon d'un cadre. Le modèle « à produire » ne
   part jamais en production : sans photo, la macro n'émet rien. */
.ad-photo { margin: 0; display: grid; gap: var(--ad-e-3); }
.ad-photo__cadre { position: relative; aspect-ratio: var(--ad-photo-ratio, 4 / 5); border-radius: var(--ad-r-4); overflow: hidden;
                   background: var(--ad-photo-fond); outline: 1px solid var(--ad-photo-contour); outline-offset: -1px; }
.ad-photo__cadre img { width: 100%; height: 100%; object-fit: cover; }
.ad-photo--portrait { --ad-photo-ratio: 4 / 5; }
.ad-photo--lieu { --ad-photo-ratio: 3 / 2; }
.ad-photo--evenement { --ad-photo-ratio: 16 / 9; }
.ad-photo__legende { font-size: var(--ad-t-legende); line-height: 1.45; color: var(--ad-texte-discret); text-wrap: pretty; }
.ad-photo__legende b { color: var(--ad-texte-doux); font-weight: 560; }
.ad-photo--a-produire .ad-photo__cadre {
  --r: var(--ad-photo-repere);
  background:
    linear-gradient(var(--r), var(--r)) 33.333% 0 / 1px 100% no-repeat,
    linear-gradient(var(--r), var(--r)) 66.667% 0 / 1px 100% no-repeat,
    linear-gradient(var(--r), var(--r)) 0 33.333% / 100% 1px no-repeat,
    linear-gradient(var(--r), var(--r)) 0 66.667% / 100% 1px no-repeat,
    var(--ad-photo-fond); }
.ad-photo--a-produire .ad-photo__cadre::after {
  content: ""; position: absolute; inset: 16px; pointer-events: none; --k: var(--ad-texte-discret);
  background:
    linear-gradient(var(--k), var(--k)) 0 0 / 18px 1.5px no-repeat, linear-gradient(var(--k), var(--k)) 0 0 / 1.5px 18px no-repeat,
    linear-gradient(var(--k), var(--k)) 100% 0 / 18px 1.5px no-repeat, linear-gradient(var(--k), var(--k)) 100% 0 / 1.5px 18px no-repeat,
    linear-gradient(var(--k), var(--k)) 0 100% / 18px 1.5px no-repeat, linear-gradient(var(--k), var(--k)) 0 100% / 1.5px 18px no-repeat,
    linear-gradient(var(--k), var(--k)) 100% 100% / 18px 1.5px no-repeat, linear-gradient(var(--k), var(--k)) 100% 100% / 1.5px 18px no-repeat; }
.ad-photo__point { position: absolute; width: 14px; height: 14px; border-radius: 50%; transform: translate(-50%, -50%);
                   background: var(--ad-planete); box-shadow: 0 0 0 5px var(--ad-surlignage), inset 0 0 0 1px rgba(17, 17, 18, .2); }
.ad-photo__objet { position: absolute; left: 50%; top: 50%; width: 34%; transform: translate(-50%, -50%); opacity: .55; }
.ad-photo__etiquette { position: absolute; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px; max-width: calc(100% - 32px);
                       padding: 6px 12px 6px 10px; border-radius: 999px; background: var(--ad-surface); color: var(--ad-texte);
                       font-size: var(--ad-t-legende); font-weight: 560; line-height: 1.3; box-shadow: var(--ad-ombre-objet); }
.ad-photo__etiquette::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ad-planete);
                               box-shadow: inset 0 0 0 1px rgba(17, 17, 18, .2); }

/* 8. Bande de preuves : une ligne fine sous l'ouverture, à la place des logos clients ---------
   Taille commune des chiffres bornée par la bande dès 961 px (« Aucune commission » tient à 1 024). */
.ad-preuves { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--ad-filet); container-type: inline-size; }
.ad-preuve { padding: var(--ad-e-5) var(--ad-e-6); display: grid; gap: 2px; align-content: start; }
.ad-preuve:first-child { padding-left: 0; }
.ad-preuve + .ad-preuve { border-left: 1px solid var(--ad-filet); }
.ad-preuve__valeur, .ad-frise__date {
  font-family: var(--ad-police-titre); font-size: var(--ad-t-chiffre); line-height: var(--ad-il-chiffre);
  font-weight: var(--ad-gr-chiffre); letter-spacing: var(--ad-ap-chiffre); font-feature-settings: var(--ad-chiffre-fonctions); }
.ad-preuve__valeur { white-space: nowrap; }
@media (min-width: 961px) { .ad-preuve__valeur { font-size: min(var(--ad-t-chiffre), 2.34cqi); } }
/* les deux dates de preuve (1994, 2000) au corps d'un titre 1 : c'est dans ses chiffres que le titrage se
   distingue le plus d'Inter. Les quatre preuves partagent leurs rangées (sous-grille) : les textes restent alignés. */
.ad-preuves { grid-template-rows: auto auto auto; }
.ad-preuve { grid-row: span 3; grid-template-rows: subgrid; row-gap: 2px; }
.ad-preuve__valeur { align-self: end; }
.ad-preuve--an .ad-preuve__valeur { font-size: var(--ad-t-titre-1); line-height: .92; font-weight: 520; letter-spacing: -0.035em; margin-bottom: 4px; }
@media (min-width: 961px) { .ad-preuve--an .ad-preuve__valeur { font-size: min(var(--ad-t-titre-1), 5.2cqi); } }
.ad-preuve__texte { color: var(--ad-texte-doux); font-size: var(--ad-t-petit); line-height: 1.45; text-wrap: pretty; }
.ad-preuve__source { font-size: var(--ad-t-legende); line-height: var(--ad-il-legende); color: var(--ad-texte-discret); margin-top: 4px; }
@media (max-width: 960px) {
  .ad-preuves { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto auto auto auto auto; }
  .ad-preuve, .ad-preuve:first-child { padding: var(--ad-e-4) var(--ad-e-4) var(--ad-e-4) 0; }
  .ad-preuve + .ad-preuve { border-left: 0; }
  .ad-preuve:nth-child(even) { padding-left: var(--ad-e-4); border-left: 1px solid var(--ad-filet); }
  .ad-preuve:nth-child(n+3) { border-top: 1px solid var(--ad-filet); }
}
@media (max-width: 560px) {
  .ad-preuves { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .ad-preuve { grid-row: auto; grid-template-rows: none; }
  .ad-preuve, .ad-preuve:first-child, .ad-preuve:nth-child(even) { padding: 14px 0; border-left: 0; }
  .ad-preuve + .ad-preuve { border-top: 1px solid var(--ad-filet); }
  .ad-preuve__valeur { white-space: normal; }
}

/* 9. Portes de public : chacune avec la vignette de son écran ------------------------------
   La porte 4D a la même carte, la même bordure et une vignette (le code repris). */
.ad-portes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ad-e-6); }
.ad-porte { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; gap: var(--ad-e-4); padding: 0 0 var(--ad-e-6);
            background: var(--ad-surface); border: 1px solid var(--ad-filet); border-radius: var(--ad-r-3); overflow: hidden; }
.ad-porte > :not(.ad-porte__vue):not(.ad-porte__objet) { margin-inline: var(--ad-e-8); }
.ad-porte__vue { position: relative; padding: 20px 20px 0; height: 172px; overflow: hidden; border-bottom: 1px solid var(--ad-filet); margin-bottom: var(--ad-e-2);
                 background-color: var(--ad-scene);
                 background-image: radial-gradient(ellipse 120% 140% at 92% 0%, var(--ad-scene-lumiere) 0%, var(--ad-scene) 60%, var(--ad-scene-penombre) 100%); }
.ad-porte__vue::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40px; z-index: 1; pointer-events: none;
                        background: linear-gradient(to bottom, transparent, var(--ad-scene-penombre)); }
/* l'événement sur la porte Organisateurs : le badge et son cordon, posé à cheval sur la vignette et la carte
   (incliné de 4°, comme le badge imprimé du jour J). La vignette est recadrée pour lui : les pastilles de
   règlement quittent le cadre (l'état reste dit par l'icône de tête de ligne), le badge prend leur place ;
   aucun mot dessous (contrôle « Recouvrement » de outils/mesure.js). */
.ad-porte--badge .ad-vgn__ligne > .ad-ui-pill { display: none; }
.ad-porte__objet { position: absolute; z-index: 2; top: 66px; right: 4px; width: 156px; transform: rotate(4deg); pointer-events: none;
                   filter: drop-shadow(-3px 8px 8px rgba(17, 17, 18, .18)); }
.ad-porte--badge > .ad-porte__public { padding-right: 96px; }
@media (max-width: 400px) { .ad-porte__objet { width: 128px; top: 76px; } .ad-porte--badge > .ad-porte__public { padding-right: 76px; } }
.ad-porte__public a { text-decoration: none; }
.ad-porte__public a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.ad-porte__risque { color: var(--ad-texte-doux); text-wrap: pretty; }
.ad-porte__pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; font-weight: 560; font-size: var(--ad-t-petit); padding-top: var(--ad-e-2); }
.ad-porte__pied .bi { margin-left: auto; transition: transform .15s ease; }
.ad-porte__pied--groupe { justify-content: flex-start; column-gap: var(--ad-e-6); }   /* hors carte : les produits restent groupés */
@media (hover: hover) {
  .ad-porte { transition: border-color .15s ease, box-shadow .15s ease; }
  .ad-porte:hover { border-color: var(--ad-filet-fort); box-shadow: -4px 16px 40px -24px rgba(17, 17, 18, .28); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .ad-porte:hover .ad-porte__pied .bi { transform: translateX(3px); } }
.ad-porte:focus-within { outline: 2px solid var(--ad-focus); outline-offset: 3px; }
.ad-porte:focus-within a:focus-visible { outline: none; }
.ad-vignette { --ad-ui-l: 30; border-radius: 12px 12px 0 0; box-shadow: var(--ad-ombre-objet); }
.ad-vignette .ad-cadre__chrome { height: 26px; padding: 0 12px; }
.ad-vignette .ad-cadre__feux i { width: 8px; height: 8px; }
.ad-vgn { padding: .9em 1.1em 1.2em; display: grid; gap: .1em; }
.ad-vgn__tete { display: flex; justify-content: space-between; align-items: center; gap: 1em; padding-bottom: .7em; color: var(--ad-ui-graphite); font-size: .92em; }
.ad-vgn__marque { display: inline-flex; align-items: center; gap: .5em; font-weight: 600; color: var(--ad-ui-encre); font-size: 1.08em; }
.ad-vgn__marque i { width: 1.5em; height: 1.5em; border-radius: .4em; display: grid; place-items: center; background: var(--ad-ui-encre); color: var(--ad-ui-blanc); font-style: normal; font-size: .92em; }
.ad-vgn .ad-un__marque { font-size: 1.15em; }
.ad-vgn__ligne { display: grid; grid-template-columns: 1.6em minmax(0, 1fr) auto; gap: .6em; align-items: center; padding: .55em 0; border-top: 1px solid var(--ad-ui-perle); }
.ad-vgn__ligne b { font-weight: 600; white-space: nowrap; min-width: 0; }
/* vignette étroite : le nom passe à la ligne plutôt que de glisser sous la pastille (DA, mineur 2) */
.ad-porte__vue .ad-vgn__ligne b { white-space: normal; }
.ad-vgn__site { width: 1.6em; height: 1.6em; border-radius: .4em; background: var(--ad-ui-brume); display: grid; place-items: center; color: var(--ad-ui-ardoise); font-size: .95em; }
/* le pluriel des organisateurs : chacun sa palette, là où ils se côtoient */
.ad-vgn__site[class*="ad-org--"] { background: var(--ad-org); color: var(--ad-c-blanc); position: relative; }
.ad-vgn__site[class*="ad-org--"]::after { content: ""; position: absolute; right: .2em; top: .2em; width: .42em; height: .42em; border-radius: 50%; background: var(--ad-org-accent); }
.ad-vgn__compte { color: var(--ad-ui-graphite); font-size: .92em; white-space: nowrap; }
/* largeur de conception des vignettes bornée : elles ne grossissent plus à 768 px (a11y) */
.ad-porte__vue .ad-vignette > .ad-ui { font-size: clamp(12px, 100cqw / var(--ad-ui-l), 12.5px); }
/* la porte 4D : la vignette prend la moitié de la carte (un éditeur de code, sans un caractère) ;
   le lien suit la citation au lieu de tomber au bas d'une colonne vide */
.ad-porte--4d { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 1fr auto auto auto 1fr;
                column-gap: var(--ad-e-8); row-gap: var(--ad-e-3); padding: 0; }
.ad-porte--4d > .ad-porte__public { grid-row: 2; }
.ad-porte--4d > .ad-porte__risque { grid-row: 3; }
.ad-porte--4d > .ad-porte__pied { grid-row: 4; }
.ad-porte--4d > .ad-porte__vue { grid-column: 1; grid-row: 1 / -1; height: auto; min-height: 248px; margin: 0;
                                 border-bottom: 0; border-right: 1px solid var(--ad-filet); padding: 24px 0 0 24px; }
.ad-porte--4d > :not(.ad-porte__vue) { grid-column: 2; margin-inline: 0 var(--ad-e-8); }
.ad-porte--4d > .ad-porte__pied { padding: var(--ad-e-3) 0 0; align-self: start; justify-content: flex-start; gap: 12px; }
.ad-porte--4d > .ad-porte__pied .bi { margin-left: 0; }
.ad-porte--4d > .ad-porte__pied > span { color: var(--ad-texte); }
.ad-vignette--code { border-radius: 12px 0 0 0; height: 100%; }
.ad-vignette--code .ad-evt { width: 100%; height: 100%; }
@media (max-width: 960px) {
  .ad-portes { grid-template-columns: minmax(0, 1fr); }
  .ad-porte > :not(.ad-porte__vue):not(.ad-porte__objet) { margin-inline: var(--ad-e-6); }
  .ad-porte--4d { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; row-gap: var(--ad-e-4); padding: 0 0 var(--ad-e-6); }
  .ad-porte--4d > .ad-porte__vue { grid-column: 1; grid-row: auto; height: 196px; min-height: 0; border-right: 0;
                                   border-bottom: 1px solid var(--ad-filet); padding: 20px 20px 0; margin-bottom: var(--ad-e-2); }
  .ad-porte--4d > :not(.ad-porte__vue) { grid-column: 1; grid-row: auto; margin-inline: var(--ad-e-6); }
  .ad-porte--4d > .ad-porte__public { padding-top: 0; }
  .ad-porte--4d > .ad-porte__pied { padding: var(--ad-e-2) 0 0; justify-content: space-between; }
  .ad-porte--4d > .ad-porte__pied .bi { margin-left: auto; }
  .ad-vignette--code { border-radius: 12px 12px 0 0; }
}
@media (max-width: 400px) { .ad-porte > :not(.ad-porte__vue):not(.ad-porte__objet) { margin-inline: var(--ad-e-5); } }

/* 10. Cartes de plateforme : l'écran entier en largeur, effacé en bas dans la scène ------------- */
.ad-plateformes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ad-e-6); }
.ad-plateforme { display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--ad-filet); border-radius: var(--ad-r-4); background: var(--ad-surface); overflow: hidden; }
.ad-plateforme__texte { padding: var(--ad-e-8) var(--ad-e-8) var(--ad-e-6); display: grid; gap: var(--ad-e-3); align-content: start; }
.ad-plateforme__haut { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.ad-plateforme__produit { font-size: var(--ad-t-legende); font-weight: 600; color: var(--ad-texte-discret); }
.ad-plateforme__vue { --ad-vue-pad: var(--ad-e-8); display: flex; flex-direction: column; padding: 0 var(--ad-vue-pad) var(--ad-e-6);
                      background-color: var(--ad-scene);
                      background-image: radial-gradient(ellipse 120% 140% at 92% 0%, var(--ad-scene-lumiere) 0%, var(--ad-scene) 60%, var(--ad-scene-penombre) 100%); }
/* La fenêtre recadre l'écran et l'efface dans la scène ; l'état et le lien restent dessous, toujours visibles.
   Elle déborde du rembourrage de la scène pour ne pas rogner l'ombre du cadre sur les côtés. */
.ad-plateforme__fenetre { flex: none; max-height: 340px; overflow: hidden; margin-inline: calc(-1 * var(--ad-vue-pad));
                          padding: var(--ad-vue-pad) var(--ad-vue-pad) 0;
                          -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 48px), transparent);
                          mask-image: linear-gradient(to bottom, #000 calc(100% - 48px), transparent); }
.ad-plateforme__fenetre > .ad-modele__cadre { position: relative; left: auto; right: auto; top: auto; }
.ad-plateforme__fenetre > .ad-cadre, .ad-plateforme__fenetre > .ad-modele__cadre > .ad-cadre { border-radius: var(--ad-r-3) var(--ad-r-3) 0 0; }
.ad-plateforme__vue > p { margin: 0; }
.ad-plateforme__fenetre + p { margin-top: auto; padding-top: var(--ad-e-5); }
.ad-plateforme__vue > p + p { margin-top: var(--ad-e-3); }
.ad-plateforme__etats { display: flex; flex-wrap: wrap; gap: 6px; }
.ad-vue-insc { --ad-ui-l: 50; }
.ad-vue-site { --ad-ui-l: 48; }
.ad-vue-mail { --ad-ui-l: 44; }
.ad-vue-univers { --ad-ui-l: 50; }
@media (max-width: 960px) {
  .ad-plateformes { grid-template-columns: minmax(0, 1fr); }
  .ad-plateforme__texte { padding: var(--ad-e-6) var(--ad-e-6) var(--ad-e-5); }
  .ad-plateforme__vue { --ad-vue-pad: var(--ad-e-4); padding-bottom: var(--ad-e-5); }
  .ad-plateforme__fenetre { padding-top: var(--ad-e-5); }
}
@media (max-width: 640px) {
  .ad-plateforme__vue .ad-cadre { --ad-ui-l: 38; }
  .ad-plateforme__vue.ad-vue-mail .ad-cadre { --ad-ui-l: 40; }
  .ad-plateforme__vue { --ad-vue-pad: 12px; }
  .ad-plateforme__fenetre { padding-top: 12px; max-height: 380px; }
}
/* Mail-ADNS recadré sur le tableau des cliqueurs (colonne Qualité comprise) */
.ad-mail-tableau .ad-mail-tete, .ad-mail-tableau .ad-mail-kpis { display: none; }
.ad-plateformes__legende { margin-top: var(--ad-e-5); }

/* 11. Rangées de fonction (texte + écran, inversable) ---------------------------------------
   Le titre 2 prend sa propre rangée, sur sept colonnes : dans une colonne de cinq, la chaîne
   insécable « et les clics » ou « par profil, » le jetait sur quatre lignes en escalier (M-3).
   Dessous, le texte (5/12) et l'écran (7/12), alignés en tête ; l'inverse échange les colonnes. */
.ad-fonction { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "titre titre" "texte visuel";
               column-gap: clamp(32px, 6vw, 88px); row-gap: clamp(28px, 3vw, 44px); align-items: start; }
.ad-fonction--inverse { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "titre titre" "visuel texte"; }
.ad-fonction > .ad-fonction__titre { grid-area: titre; max-width: calc(7 / 12 * 100%); }
.ad-fonction > .ad-fonction__texte { grid-area: texte; }
.ad-fonction > .ad-fonction__visuel { grid-area: visuel; }
.ad-fonction__texte { display: grid; gap: var(--ad-e-5); align-content: start; container-type: inline-size; }
/* titre de colonne étroite : entre 961 et 1 279 px, le H2 suit la mesure de sa colonne, 28 px au moins */
@media (min-width: 961px) and (max-width: 1279px) {
  .ad-fonction__texte > .ad-titre-2 { font-size: max(1.75rem, min(var(--ad-t-titre-2), 9cqi)); }
}
.ad-points { display: grid; gap: var(--ad-e-3); padding: 0; list-style: none; }
.ad-points li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; color: var(--ad-texte-doux); }
.ad-points li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ad-texte); margin: .62em 0 0 4px; }
.ad-points b { color: var(--ad-texte); font-weight: 560; }
@media (max-width: 960px) {
  .ad-fonction, .ad-fonction--inverse { grid-template-columns: minmax(0, 1fr); grid-template-areas: "titre" "texte" "visuel"; }
  .ad-fonction > .ad-fonction__titre { max-width: none; }
}

/* 12. Offre, paliers, confiance -------------------------------------------------------------- */
.ad-offres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ad-e-6); }
.ad-offre { display: grid; grid-template-rows: auto auto 1fr auto; gap: var(--ad-e-4); padding: var(--ad-e-8); background: var(--ad-surface);
            border: 1px solid var(--ad-filet); border-radius: var(--ad-r-3); align-content: start; justify-items: start; }
.ad-offre > * { justify-self: stretch; }
.ad-offre > .ad-statut { justify-self: start; }
.ad-offre__pour { color: var(--ad-texte-doux); font-size: var(--ad-t-petit); }
.ad-offre__inclus { list-style: none; padding: 0; display: grid; gap: 10px; font-size: var(--ad-t-petit); border-top: 1px solid var(--ad-filet); padding-top: var(--ad-e-4); }
.ad-offre__inclus li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; }
.ad-offre__inclus .bi { color: var(--ad-texte); font-size: 15px; line-height: 1.5; }
.ad-offre__prix { border-top: 1px solid var(--ad-filet); padding-top: var(--ad-e-4); display: grid; gap: 4px; }
.ad-offre__prix b { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.015em; }
.ad-offre__unite { font-size: var(--ad-t-legende); color: var(--ad-texte-discret); }
@media (max-width: 960px) { .ad-offres { grid-template-columns: minmax(0, 1fr); } .ad-offre { padding: var(--ad-e-6); } }

.ad-paliers { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--ad-t-petit); }
.ad-paliers th, .ad-paliers td { padding: 14px 18px; border-bottom: 1px solid var(--ad-filet); text-align: left; }
.ad-paliers thead th { vertical-align: bottom; padding-bottom: 18px; border-bottom-color: var(--ad-filet-fort); }
.ad-paliers thead th:not(:first-child), .ad-paliers td { text-align: center; width: 26%; }
.ad-paliers__nom { display: block; font-size: 1.25rem; color: var(--ad-texte); }
.ad-paliers__pour { display: block; font-weight: 400; font-size: var(--ad-t-legende); color: var(--ad-texte-discret); margin-top: 4px; }
.ad-paliers tbody th { font-weight: 500; color: var(--ad-texte); }
.ad-paliers .ad-inclus, .ad-paliers .ad-option, .ad-paliers .ad-absent { display: inline-flex; align-items: center; gap: 6px; font-size: var(--ad-t-legende); font-weight: 560; }
.ad-paliers .ad-inclus .bi { color: var(--ad-texte); font-size: 1.1rem; }
.ad-paliers .ad-option { color: var(--ad-texte-doux); }
.ad-paliers .ad-absent { color: var(--ad-texte-discret); }
.ad-paliers tfoot td, .ad-paliers tfoot th { border-bottom: 0; padding-top: 20px; }
.ad-paliers__prix { font-weight: 600; font-size: 1.0625rem; }
.ad-paliers-mobile { display: none; }
@media (max-width: 720px) { .ad-paliers { display: none; } .ad-paliers-mobile { display: grid; gap: var(--ad-e-4); } }

.ad-confiance { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: var(--ad-e-6); align-items: start;
                padding: var(--ad-e-6) var(--ad-e-8); border: 1px solid var(--ad-filet); border-radius: var(--ad-r-3); background: var(--ad-surface); }
.ad-confiance__item { display: grid; grid-template-columns: 24px 1fr; gap: 12px; font-size: var(--ad-t-petit); }
.ad-confiance__item .bi { font-size: 1.15rem; line-height: 1.35; }
.ad-confiance__item b { display: block; font-weight: 600; }
.ad-confiance__item span { color: var(--ad-texte-doux); }
.ad-confiance__lien { align-self: center; }
@media (max-width: 960px) { .ad-confiance { grid-template-columns: minmax(0, 1fr); padding: var(--ad-e-6); } }

/* 13. Frise, personne, carte de contact, modèle à l'année --------------------------------------- */
.ad-frise { --ad-esc: 88px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--ad-e-6); list-style: none; padding: 0; position: relative; }
.ad-frise::before { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--ad-esc) / 2); height: 1px; background: var(--ad-filet-fort); }
.ad-frise li { position: relative; padding-top: calc(var(--ad-esc) + var(--ad-e-5)); display: grid; gap: 6px; align-content: start; }
.ad-frise li::before { content: ""; position: absolute; top: calc(var(--ad-esc) / 2 - 7.5px); left: 0; width: 15px; height: 15px; border-radius: 50%; background: var(--ad-surface);
                       box-shadow: inset 0 0 0 1.5px var(--ad-texte); }
/* escale à objet : une tuile de scène de 88 px, l'objet dessiné à 68 px, posée sur la ligne du temps */
.ad-frise li.is-objet::before { display: none; }
.ad-frise__escale { position: absolute; top: 0; left: 0; width: var(--ad-esc); height: var(--ad-esc); padding: 10px; border-radius: var(--ad-r-4);
                    background: var(--ad-scene); box-shadow: inset 0 0 0 1px var(--ad-filet); }
.ad-frise__escale .ad-evt { width: 100%; }
.ad-frise li.is-planete::before { background: var(--ad-planete); box-shadow: inset 0 0 0 1.5px var(--ad-texte); }
.ad-frise__titre { font-weight: 600; }
.ad-frise__texte { color: var(--ad-texte-doux); font-size: var(--ad-t-petit); text-wrap: pretty; }
.ad-frise-bloc { padding-top: clamp(40px, 4vw, 64px); border-top: 1px solid var(--ad-filet); }
@media (max-width: 960px) {
  .ad-frise { --ad-esc: 64px; grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ad-frise::before { left: 32px; right: auto; top: 8px; bottom: 8px; width: 1px; height: auto; }
  .ad-frise li { padding: 0 0 var(--ad-e-8) 88px; min-height: calc(var(--ad-esc) + var(--ad-e-8)); }
  .ad-frise li::before { top: 4px; left: 24.5px; }
  .ad-frise__escale { padding: 7px; }
}
.ad-personne { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
@media (max-width: 960px) { .ad-personne { grid-template-columns: minmax(0, 1fr); } .ad-personne > .ad-contact-carte { order: 2; } }
/* carte de contact : l'ombre seule (relief par bordure OU ombre) ; le téléphone est souligné (WCAG 1.4.1) */
.ad-contact-carte { position: relative; border-radius: var(--ad-r-4); background: var(--ad-surface); padding: var(--ad-e-8);
                    display: grid; gap: var(--ad-e-5); box-shadow: var(--ad-ombre-objet); }
.ad-contact-carte dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 24px; font-size: var(--ad-t-petit); margin: 0; padding-top: var(--ad-e-5); border-top: 1px solid var(--ad-filet); }
.ad-contact-carte dt { color: var(--ad-texte-discret); }
.ad-contact-carte dd { margin: 0; font-weight: 560; }
.ad-contact-carte dd a { text-decoration: underline; text-decoration-color: var(--ad-lien-trait); text-decoration-thickness: 1px; text-underline-offset: .22em; }
/* avec un portrait : une carte d'identité (portrait et nom en tête, coordonnées dessous) */
.ad-contact-carte--portrait { grid-template-columns: 112px minmax(0, 1fr); align-items: end; column-gap: var(--ad-e-5); }
.ad-contact-carte--portrait > .ad-photo { grid-row: 1; }
.ad-contact-carte--portrait > dl { grid-column: 1 / -1; }
.ad-contact-carte--portrait > .ad-photo .ad-photo__cadre { border-radius: var(--ad-r-3); }
.ad-contact-carte--portrait > .ad-photo .ad-photo__cadre::after { inset: 8px; }
.ad-contact-carte--portrait > .ad-photo .ad-photo__etiquette { left: 6px; bottom: 6px; padding: 3px 8px 3px 6px; font-size: 11px; white-space: nowrap; gap: 5px; }
.ad-modele { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.ad-modele__texte { display: grid; gap: var(--ad-e-6); align-content: start; }
.ad-modele__scene { height: 440px; }
.ad-modele__cadre { position: absolute; left: 32px; right: 32px; top: 40px; --ad-ui-l: 48; }
@media (max-width: 960px) { .ad-modele { grid-template-columns: minmax(0, 1fr); } }

/* 14. Contrat, FAQ, limites ------------------------------------------------------------------ */
.ad-contrat { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 88px); }
.ad-contrat__liste { list-style: none; padding: 0; counter-reset: c; display: grid; }
.ad-contrat__liste li { counter-increment: c; display: grid; grid-template-columns: 40px 1fr; gap: 8px; padding: 16px 0; border-bottom: 1px solid var(--ad-filet); }
.ad-contrat__liste li::before { content: counter(c); font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ad-texte-discret); }
.ad-contrat__liste b { display: block; font-weight: 600; }
.ad-contrat__liste span { color: var(--ad-texte-doux); font-size: var(--ad-t-petit); }
.ad-faq { display: grid; border-top: 1px solid var(--ad-filet); }
.ad-faq details { border-bottom: 1px solid var(--ad-filet); }
.ad-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 56px; padding: 14px 0; }
.ad-faq summary::-webkit-details-marker { display: none; }
.ad-faq summary .bi { flex: none; }
.ad-faq details[open] summary .bi { transform: rotate(45deg); }
@media (prefers-reduced-motion: no-preference) { .ad-faq summary .bi { transition: transform .15s ease; } }
.ad-faq details p { padding: 0 0 18px; color: var(--ad-texte-doux); max-width: 62ch; }
@media (max-width: 860px) { .ad-contrat { grid-template-columns: minmax(0, 1fr); } }
.ad-limites { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--ad-e-8); padding: var(--ad-e-8);
              border-radius: var(--ad-r-3); background: var(--ad-fond-alt); border: 1px solid var(--ad-filet); }
.ad-limites ul { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 32px; }
.ad-limites li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; color: var(--ad-texte-doux); }
.ad-limites li .bi { color: var(--ad-texte); font-size: 1.05rem; line-height: 1.5; }
@media (max-width: 860px) { .ad-limites { grid-template-columns: minmax(0, 1fr); padding: var(--ad-e-6); } .ad-limites ul { grid-template-columns: minmax(0, 1fr); } }

/* 15. Sections denses de fin d'Organisateurs (M9) ---------------------------------------------
   Même ordre, même texte ; jamais deux bandes de suite sans écran ni objet : gestion ▣ · états
   (registre) ▣ · contrat (feuille + sceau de la saison) ◆ · limites et confiance réunies · fin ●. */
/* 15.1 Les phases : la légende des états devient le cycle d'une fonction */
.ad-legende-etats--phases { display: grid; gap: 0; margin-top: var(--ad-e-6); position: relative; justify-items: start; }
.ad-legende-etats--phases::before { content: ""; position: absolute; left: 11.25px; top: 20px; bottom: 20px; width: 1.5px; background: var(--ad-parcours); }
.ad-legende-etats--phases .ad-etat { position: relative; min-height: 44px; gap: 14px; font-size: var(--ad-t-petit); }
.ad-legende-etats--phases .ad-etat::before { width: 24px; height: 24px; }
.ad-legende-etats--phases .ad-etat--service::before { background-size: 24px; }
.ad-legende-etats--phases .ad-etat--demo::before { width: 16px; height: 16px; margin: 4px; box-shadow: 0 0 0 4px var(--ad-fond-alt); }
.ad-legende-etats--phases .ad-etat--dev::before { border-width: 2px; background: linear-gradient(90deg, currentColor 50%, var(--ad-fond-alt) 50%); }
.ad-legende-etats--phases .ad-etat--avenir::before { border-width: 2px; background: var(--ad-fond-alt); }
/* 15.2 Le registre : le tableau des états posé comme un écran, daté en tête */
.ad-etats--registre { border-collapse: separate; border-spacing: 0; background: var(--ad-surface); border-radius: var(--ad-r-4); box-shadow: var(--ad-carte-posee); }
.ad-etats--registre caption { caption-side: top; text-align: right; padding: 0 4px var(--ad-e-3); font-variant-numeric: tabular-nums; }
.ad-etats--registre th, .ad-etats--registre td { padding: 15px 16px; }
.ad-etats--registre thead th { background: var(--ad-fond-alt); padding-block: 12px; border-bottom-color: var(--ad-filet); }
.ad-etats--registre thead th:first-child { border-top-left-radius: var(--ad-r-4); }
.ad-etats--registre thead th:last-child { border-top-right-radius: var(--ad-r-4); }
.ad-etats--registre tr > :first-child { padding-left: var(--ad-e-6); }
.ad-etats--registre tr > :last-child { padding-right: var(--ad-e-6); }
.ad-etats--registre tbody td:nth-child(2) { color: var(--ad-texte-doux); font-size: var(--ad-t-legende); font-weight: 560; white-space: nowrap; padding-top: 17px; }
.ad-etats--registre tbody tr:last-child > * { border-bottom: 0; }
.ad-etats--registre tbody tr:last-child > :first-child { border-bottom-left-radius: var(--ad-r-4); }
.ad-etats--registre tbody tr:last-child > :last-child { border-bottom-right-radius: var(--ad-r-4); }
.ad-etats--registre tbody tr:has(.ad-etat--dev) > *, .ad-etats--registre tbody tr:has(.ad-etat--avenir) > * { background: var(--ad-fond-alt); }
.ad-etats--registre .ad-etat { padding: 3px 10px 3px 6px; border-radius: 999px; font-size: var(--ad-t-legende); }
.ad-etats--registre .ad-etat--service { background: var(--ad-ok-fond); }
.ad-etats--registre .ad-etat--dev { background: var(--ad-dev-fond); box-shadow: inset 0 0 0 1px var(--ad-filet); }
.ad-etats--registre .ad-etat--avenir { background: var(--ad-surface); box-shadow: inset 0 0 0 1px var(--ad-filet-fort); }
/* 15.2 bis Le registre posé sur une scène : une carte par fonction, dans l'ordre des lignes (M-5).
   Le produit et l'état en tête de carte, la fonction dessous. Ce qui n'est pas encore en service
   n'est pas « posé » : carte en creux, sans ombre. Rôles ARIA de tableau dans le HTML (a11y m4) :
   l'affichage en grille ne fait pas perdre la sémantique. */
.ad-etats-scene { padding: clamp(16px, 2.6vw, 36px); }
.ad-etats-scene .ad-etats--registre { display: block; background: none; box-shadow: none; border-radius: 0; }
.ad-etats-scene .ad-etats--registre caption { display: block; text-align: right; padding: 0 2px var(--ad-e-4); color: var(--ad-texte-discret); }
.ad-etats-scene .ad-etats--registre thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ad-etats-scene .ad-etats--registre tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ad-etats-scene .ad-etats--registre tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "produit etat" "fonction fonction";
                                         align-items: center; gap: 10px 12px; padding: 14px 16px 16px; border-radius: var(--ad-r-3);
                                         background: var(--ad-surface); box-shadow: var(--ad-ombre-objet); }
.ad-etats-scene .ad-etats--registre tr > * { padding: 0 !important; border: 0 !important; background: none !important; border-radius: 0 !important; }
.ad-etats-scene .ad-etats--registre tbody th { grid-area: fonction; font-weight: 560; line-height: 1.4; text-wrap: pretty; }
.ad-etats-scene .ad-etats--registre tbody td:nth-child(2) { grid-area: produit; padding-top: 0; white-space: normal; }
.ad-etats-scene .ad-etats--registre tbody td:last-child { grid-area: etat; justify-self: end; }
.ad-etats-scene .ad-etats--registre tbody tr:has(.ad-etat--dev), .ad-etats-scene .ad-etats--registre tbody tr:has(.ad-etat--avenir) {
  background: var(--ad-fond-alt); box-shadow: inset 0 0 0 1px var(--ad-filet-fort); }
.ad-etats-scene .ad-etats--registre .ad-etat { padding: 3px 10px 3px 6px; }
.ad-etats-scene .ad-etats--registre .ad-etat--service { background: var(--ad-ok-fond) !important; }
.ad-etats-scene .ad-etats--registre .ad-etat--dev { background: var(--ad-dev-fond) !important; box-shadow: inset 0 0 0 1px var(--ad-filet-fort); }
.ad-etats-scene .ad-etats--registre .ad-etat--avenir { background: var(--ad-surface) !important; box-shadow: inset 0 0 0 1px var(--ad-filet-fort); }
@media (max-width: 720px) { .ad-etats-scene .ad-etats--registre tbody { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .ad-etats-scene { margin-inline: calc(-1 * var(--ad-gouttiere)); border-radius: 0; padding: 20px var(--ad-gouttiere); } }
@media (max-width: 640px) {
  .ad-etats--registre tr { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 12px; padding: 14px var(--ad-e-5); }
  .ad-etats--registre tbody th { grid-column: 1 / -1; }
  .ad-etats--registre th, .ad-etats--registre td,
  .ad-etats--registre tr > :first-child, .ad-etats--registre tr > :last-child,
  .ad-etats--registre tbody td:nth-child(2) { padding: 0; }
  .ad-etats--registre td:last-child { white-space: nowrap; }
  .ad-etats--registre tbody tr:has(.ad-etat--dev), .ad-etats--registre tbody tr:has(.ad-etat--avenir) { background: var(--ad-fond-alt); }
  .ad-etats--registre tbody tr:last-child { border-bottom: 0; border-radius: 0 0 var(--ad-r-4) var(--ad-r-4); }
  .ad-etats--registre tbody tr:first-child { border-radius: var(--ad-r-4) var(--ad-r-4) 0 0; }
  .ad-etats--registre caption { text-align: left; }
}
.ad-etats-bloc { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.ad-etats-bloc .ad-legende-etats { margin-top: var(--ad-e-2); }
@media (max-width: 960px) { .ad-etats-bloc { grid-template-columns: minmax(0, 1fr); } }
/* 15.3 Le contrat : une feuille, scellée par la saison (l'orbite d'une année) */
.ad-contrat__feuille { position: relative; margin-top: var(--ad-e-10); padding: var(--ad-e-3) var(--ad-e-8) var(--ad-e-6);
                       background: var(--ad-surface); border-radius: var(--ad-r-4); box-shadow: var(--ad-carte-posee); }
.ad-contrat__feuille .ad-contrat__liste li:last-child { border-bottom: 0; }
.ad-contrat__feuille .ad-contrat__liste li:first-child { padding-right: 120px; }
.ad-contrat__feuille > p { padding-top: var(--ad-e-3); border-top: 1px solid var(--ad-filet); }
/* l'année du contrat : le calendrier de douze mois, posé en travers du coin de la feuille (incliné de 4°) */
.ad-contrat__sceau { position: absolute; top: -58px; right: 18px; width: 120px; transform: rotate(4deg);
                     filter: drop-shadow(-3px 8px 9px rgba(17, 17, 18, .18)); }
.ad-contrat .ad-faq { margin-top: var(--ad-e-4); }
@media (max-width: 640px) {
  .ad-contrat__feuille { padding: var(--ad-e-2) var(--ad-e-5) var(--ad-e-5); margin-top: 64px; }
  .ad-contrat__feuille .ad-contrat__liste li:first-child { padding-right: 0; padding-top: 44px; }
  .ad-contrat__sceau { width: 100px; top: -50px; right: 12px; }
}
/* 15.4 Limites et confiance : une seule bande, deux cartes */
.ad-bande-duo { background: var(--ad-fond-alt); border-block: 1px solid var(--ad-filet); padding-block: var(--ad-bande-esp); }
.ad-bande-duo__grille { width: 100%; max-width: calc(var(--ad-max) + 2 * var(--ad-gouttiere)); margin-inline: auto; padding-inline: var(--ad-gouttiere);
                        display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--ad-e-6); align-items: stretch; }
.ad-bande-duo .ad-bande { padding-block: 0; }
.ad-bande-duo .ad-wrap { max-width: none; padding-inline: 0; height: 100%; }
.ad-bande-duo .ad-limites { height: 100%; grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--ad-e-6);
                            background: var(--ad-surface); padding: var(--ad-e-8); }
/* le titre de la carte est un H2 de section : il prend le rôle titre 2 */
.ad-bande-duo .ad-limites .ad-titre-3 { font-family: var(--ad-police-titre); font-feature-settings: var(--ad-titre-fonctions);
                                        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-bande-duo .ad-confiance { height: 100%; grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--ad-e-5); padding: var(--ad-e-8); }
.ad-bande-duo .ad-confiance__lien { align-self: start; margin-top: var(--ad-e-1); }
@media (max-width: 960px) { .ad-bande-duo__grille { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 860px) { .ad-bande-duo .ad-limites, .ad-bande-duo .ad-confiance { padding: var(--ad-e-6); } }

/* 16. Fin de page : la seule bande d'encre, et le sceau ---------------------------------------- */
.ad-fin { background: var(--ad-encre-fond); color: var(--ad-encre-texte); border-radius: var(--ad-r-5); padding: clamp(40px, 6vw, 72px);
          box-shadow: inset 0 0 0 1px var(--ad-encre-bord);
          display: grid; grid-template-columns: minmax(0, 1fr) 240px; grid-template-areas: "texte astre" "droite astre";
          column-gap: var(--ad-e-12); row-gap: var(--ad-e-8); align-items: center; position: relative; overflow: hidden; isolation: isolate;
          --ad-lien-survol: transparent; }   /* a11y M-1 : pas de surligneur pâle sous un texte clair */
.ad-fin > .ad-fonction__texte { grid-area: texte; }
.ad-fin__astre { grid-area: astre; width: 240px; --ad-astre-anneau: var(--ad-encre-anneau); --ad-astre-orbite: var(--ad-encre-orbite); }
.ad-fin .ad-titre-2 { color: var(--ad-encre-texte); }
.ad-fin p { color: var(--ad-encre-doux); }
.ad-fin a:not(.ad-btn) { color: var(--ad-encre-texte); text-decoration-color: var(--ad-encre-doux); }
.ad-fin :focus-visible { outline-color: var(--ad-planete); }
.ad-fin__droite { grid-area: droite; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
@media (hover: hover) { .ad-fin a:not(.ad-btn):hover { text-decoration-color: var(--ad-planete); } }   /* le trait passe au soleil, comme en nuit */
@media (max-width: 1080px) {
  .ad-fin { grid-template-columns: minmax(0, 1fr) 184px; }
  .ad-fin__astre { width: 184px; }
}
@media (max-width: 640px) {
  .ad-fin { grid-template-columns: minmax(0, 1fr); grid-template-areas: "astre" "texte" "droite"; border-radius: var(--ad-r-4); padding: 32px 24px 36px; gap: var(--ad-e-6); }
  .ad-fin__astre { width: 204px; justify-self: start; margin-left: -4px; }
  .ad-fin__droite { display: grid; justify-items: start; }
}
@media (max-width: 400px) { .ad-fin { padding: 28px 20px 32px; } .ad-fin__droite { justify-items: stretch; } }

/* 17. Formulaire de contact (le vrai formulaire est un profil Web-Adns : adProfil l'habille) ------- */
.ad-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ad-e-5) var(--ad-e-6); }
.ad-champ { display: grid; gap: 8px; align-content: start; }
.ad-champ--large { grid-column: 1 / -1; }
.ad-champ label { font-weight: 560; font-size: var(--ad-t-petit); }
.ad-champ .ad-aide { font-size: var(--ad-t-legende); color: var(--ad-texte-discret); }
.ad-champ input, .ad-champ select, .ad-champ textarea { font: inherit; font-size: 16px; color: var(--ad-texte); background: var(--ad-surface); min-height: 48px;
          border: 1px solid var(--ad-champ-bordure); border-radius: var(--ad-r-2); padding: 11px 14px; width: 100%; }
.ad-champ textarea { min-height: 120px; resize: vertical; }
.ad-champ input:focus-visible, .ad-champ select:focus-visible, .ad-champ textarea:focus-visible { outline: 2px solid var(--ad-focus); outline-offset: 1px; border-color: var(--ad-focus); }
.ad-champ--erreur input { border-color: var(--ad-erreur); box-shadow: 0 0 0 1px var(--ad-erreur); }
.ad-erreur { color: var(--ad-erreur); font-size: var(--ad-t-legende); font-weight: 560; display: flex; gap: 6px; align-items: start; }
.ad-objet { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.ad-objet label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--ad-filet-fort);
                  font-size: var(--ad-t-petit); font-weight: 500; cursor: pointer; }
.ad-objet input { accent-color: var(--ad-texte); width: 16px; height: 16px; margin: 0; }
.ad-objet label:has(input:checked) { border-color: var(--ad-texte); box-shadow: inset 0 0 0 1px var(--ad-texte); font-weight: 600; }
@media (max-width: 640px) { .ad-form { grid-template-columns: minmax(0, 1fr); } }

/* 18. Ouverture de l'accueil : le lever ---------------------------------------------------------
   H1 sur toute la largeur (trois lignes au plus à 1 440), texte à gauche, scène qui déborde à
   droite. La planète se lève derrière le bord haut de la scène (≥ 641 px) ou derrière le
   téléphone (≤ 640 px) ; le titre et le texte passent toujours devant elle.

   Révision du tour 1 (B-1) : le téléphone ne recouvre plus jamais un mot du back-office. Sa place
   est calculée (--ad-tel-x, --ad-tel-base : 17 em de large) et le back-office se cale sur son bord
   droit (--ad-bo-x) : le téléphone ne couvre que les 12 premiers pixels du cadre (sa bordure et la
   marge du rail d'icônes), le rail reste visible, la colonne de contenu commence au moins 50 px
   plus loin. Le cadre s'arrête 16 px au-delà du bord de la fenêtre (≥ 1 081 px) ou 24 px avant le
   bord de la scène (≤ 1 080 px) : il se recadre (§ cadrages d'ad-ecrans.css) au lieu d'être
   tranché par la fenêtre. Contrôle : outils/mesure.js, « Recouvrement » (0 mot masqué, 0 rogné). */
.ad-ouverture { padding-block: clamp(32px, 3vw + 20px, 72px) clamp(40px, 3vw + 24px, 64px); overflow: clip; }
.ad-bande--preuves { padding-block: 0; }
.ad-ouverture__grille { display: grid; row-gap: clamp(28px, 3vw, 44px); align-items: start;
  grid-template-columns: [plein-debut] minmax(var(--ad-gouttiere), 1fr) [texte-debut] minmax(0, 420px) [texte-fin] 56px [scene-debut] minmax(0, 724px) [contenu-fin] minmax(var(--ad-gouttiere), 1fr) [plein-fin]; }
.ad-ouverture__titre { grid-column: texte-debut / contenu-fin; max-width: 1000px; position: relative; z-index: 2; }
.ad-ouverture__texte { grid-column: texte-debut / texte-fin; display: grid; gap: var(--ad-e-6); align-content: start; padding-top: var(--ad-e-2); position: relative; z-index: 2; }
.ad-ouverture__texte .ad-poincon { margin-top: var(--ad-e-2); }
.ad-ouverture__visuel { grid-column: scene-debut / plein-fin; position: relative; container-type: inline-size;
                        /* la planète reste calée sur la colonne de 1 200 px au-delà de 1 440 (ni plus grande, ni au bord de la fenêtre) */
                        --ad-lv-d: min(48cqw, 405px); --ad-lv-x: min(80cqw, 675px); --ad-lv-f: .48;
                        --ad-tel-x: 1.2cqw; --ad-tel-y: 2.4cqw; --ad-tel-base: clamp(15.5px, 1.8cqw, 18px);
                        --ad-bo-x: calc(var(--ad-tel-x) + 17 * var(--ad-tel-base) - 12px); --ad-bo-debord: 16px; }
.ad-ouverture__scene { position: relative; z-index: 1; height: min(70cqw, 690px); border-radius: var(--ad-r-5) 0 0 var(--ad-r-5);
  /* la lumière part du centre de la planète, juste sous l'horizon ; un filet dessine l'horizon */
  background-image: radial-gradient(circle at var(--ad-lv-x) calc(var(--ad-lv-d) * (.5 - var(--ad-lv-f))),
    var(--ad-scene-lumiere) 0, var(--ad-scene-lumiere) calc(var(--ad-lv-d) * .42), var(--ad-scene) calc(var(--ad-lv-d) * 1.05), var(--ad-scene-penombre) calc(var(--ad-lv-d) * 1.9));
  box-shadow: inset 0 1px 0 rgba(17, 17, 18, .09), inset 0 0 0 1px var(--ad-scene-contour); }
.ad-ouverture__bo { position: absolute; left: var(--ad-bo-x); top: 4.4cqw; width: calc(100cqw - var(--ad-bo-x) + var(--ad-bo-debord)); z-index: 1; }
/* le cadre déborde de 16 px hors de la fenêtre : son contenu s'arrête au bord de la fenêtre, jamais au-delà */
@media (min-width: 1081px) { .ad-ouverture__bo > .ad-cadre > .ad-ui { margin-right: var(--ad-bo-debord); } }
/* sous 560 px de cadre, l'écran passe en variante téléphone (barre de produit, sans rail) : il se pose alors à
   16 px du téléphone, sans recouvrement. Seuils sur la largeur de la scène (requête de conteneur) : la
   largeur où le cadre recouvert tomberait sous 560 px (téléphone au plancher de 15,5 px, 263,5 px de large). */
@media (min-width: 1081px) { @container (max-width: 805.98px) { .ad-ouverture__bo { --ad-bo-x: calc(var(--ad-tel-x) + 17 * var(--ad-tel-base) + 16px); } } }
@media (max-width: 1080px) { @container (max-width: 845.98px) { .ad-ouverture__bo { --ad-bo-x: calc(var(--ad-tel-x) + 17 * var(--ad-tel-base) + 16px); } } }
.ad-ouverture__bo .ad-ui-main { min-height: 40em; }
.ad-ouverture__bo .ad-ui-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ad-ouverture__bo .ad-ui-bas { display: grid; grid-template-columns: minmax(0, 1fr); }
.ad-ouverture__bo .ad-ui-vide { display: table-cell; width: 100%; }
.ad-ouverture__tel { position: absolute; left: var(--ad-tel-x); top: var(--ad-tel-y); z-index: 2; }
.ad-ouverture__visuel > figcaption { padding-right: var(--ad-gouttiere); }
/* l'orbite : seul son arc du haut se lève ; l'arc du bas, qui ne dépassait de l'horizon qu'en une
   « parenthèse » de 70 px détachée du disque (DA, M1), reste sous l'horizon */
.ad-lever .ad-astre__orbite--bas { display: none; }
/* bureau : le H1 tient en trois lignes et ne rejoint jamais la planète */
@media (min-width: 1081px) { .ad-ouverture__titre { max-width: 12em; } }
/* portable de bureau, fenêtre basse (1 366 × 650, 1 280 × 720) : le titre suit aussi la hauteur,
   la planète lève un peu moins ; poinçon et tuiles du produit restent au-dessus de la ligne */
@media (min-width: 1081px) and (max-height: 760px) {
  .ad-ouverture { padding-top: 24px; }
  .ad-ouverture__grille { row-gap: 24px; }
  .ad-ouverture__titre { font-size: min(var(--ad-t-affichage), 9.2vh); }
  .ad-ouverture__texte { gap: var(--ad-e-4); padding-top: 0; }
  .ad-ouverture__texte .ad-poincon { margin-top: 0; }
  .ad-ouverture__visuel { --ad-lv-d: min(46cqw, 388px); --ad-lv-f: .38; --ad-tel-y: 1.6cqw; }
  .ad-ouverture__bo { top: 3.4cqw; }
}
/* tablette et petit portable (641 à 1 080 px) : composition empilée, la planète monte à droite du texte ;
   le cadre reste dans la scène, à 24 px de son bord */
@media (max-width: 1080px) {
  .ad-ouverture__grille { grid-template-columns: [plein-debut texte-debut scene-debut] minmax(0, 1fr) [texte-fin contenu-fin plein-fin]; padding-inline: var(--ad-gouttiere); }
  .ad-ouverture__titre, .ad-ouverture__texte, .ad-ouverture__visuel { grid-column: 1 / -1; }
  .ad-ouverture__texte { max-width: 30rem; }
  .ad-ouverture__scene { border-radius: var(--ad-r-5); height: 70cqw; }
  .ad-ouverture__visuel { --ad-lv-d: 34cqw; --ad-lv-x: 80cqw; --ad-lv-f: .40; --ad-bo-debord: -24px; }
}
/* sous 900 px, la planète monte plus à droite pour ne jamais passer derrière le lien (a11y m1) ; le
   texte passe à 24 rem et son poinçon sur deux lignes */
@media (max-width: 900px) {
  .ad-ouverture__texte { max-width: 24rem; }
  .ad-ouverture__visuel { --ad-lv-d: 30cqw; --ad-lv-x: 84cqw; }
  /* colonne de 24 rem : le poinçon tient sur deux lignes, sans point orphelin */
  .ad-ouverture__texte .ad-poincon > span:last-child { flex-basis: 100%; }
  .ad-ouverture__texte .ad-poincon > span:nth-last-child(2) .ad-point { display: none; }
}
/* téléphone (≤ 640 px) : le téléphone fait l'horizon ; la planète passe dans la scène, devant la
   brume et derrière le téléphone, et lève 110 px de disque et d'anneau au-dessus de lui (le plancher
   du DA). Texte resserré : à 390 × 844, l'en-tête et le titre du mini-site sont au-dessus de la ligne. */
@media (max-width: 640px) {
  .ad-ouverture { padding-top: 12px; }
  .ad-ouverture__grille { row-gap: 16px; }
  .ad-ouverture__texte { gap: var(--ad-e-3); padding-top: 0; }
  .ad-ouverture__texte .ad-poincon { row-gap: 2px; }
  .ad-ouverture__texte .ad-actions { row-gap: 4px; }
  .ad-ouverture__texte .ad-poincon { margin-top: 0; }
  .ad-ouverture__visuel .ad-lever-cadre { overflow: hidden; border-radius: var(--ad-r-4); isolation: isolate; }
  .ad-ouverture__scene { z-index: auto; isolation: auto; height: auto; padding: 110px 0 28px; display: grid; justify-items: center;
                         border-radius: var(--ad-r-4);
                         background-image: radial-gradient(circle at 50% calc(110px - var(--ad-lv-d) * (var(--ad-lv-f) - .5)),
                           var(--ad-scene-lumiere) 0, var(--ad-scene-lumiere) calc(var(--ad-lv-d) * .45), var(--ad-scene) calc(var(--ad-lv-d) * 1.1), var(--ad-scene-penombre) calc(var(--ad-lv-d) * 2));
                         box-shadow: inset 0 0 0 1px var(--ad-scene-contour); }
  .ad-ouverture__visuel { --ad-lv-d: 72cqw; --ad-lv-x: 50cqw; --ad-lv-f: .4; }
  .ad-ouverture__visuel .ad-lever { z-index: 1; top: calc(110px - var(--ad-lv-h)); clip-path: none; }
  .ad-lever .ad-astre__orbite--bas { display: block; }
  .ad-ouverture__bo { display: none; }
  .ad-ouverture__tel { position: relative; left: auto; top: auto; z-index: 2; --ad-tel-base: 15.5px; }   /* le plancher des téléphones */
  .ad-ouverture__visuel > figcaption { padding: 0; margin-top: 16px; }
}


/* 19. Page d'offre ------------------------------------------------------------------------------
   Pas de lever : l'ouverture n'a pas de quart vide (titre à gauche, chapeau à droite). La planète
   vient en sceau dans la bande de fin ; la scène garde sa lumière, venue d'en haut à droite. */
.ad-ouverture--offre { padding-top: clamp(40px, 3vw + 24px, 80px); }
.ad-offre-tete { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: end; margin-bottom: clamp(40px, 4vw, 64px); }
.ad-offre-tete__titre { display: grid; gap: var(--ad-e-5); }
.ad-offre-tete__droite { display: grid; gap: var(--ad-e-6); }
.ad-offre-scene { container-type: inline-size; }
.ad-offre-scene__fond { height: 50cqw; }
.ad-offre-scene__bo { position: absolute; left: 6cqw; top: 4.7cqw; width: 88cqw; }
.ad-offre-scene .ad-bo-cible { background: var(--ad-surlignage); box-shadow: 0 0 0 2px var(--ad-action); color: var(--ad-ui-encre); }
/* l'étiquette se pose sur les barres du graphique (aucun mot dessous) et déborde dans la marge de la scène */
.ad-annot--bo { right: 2cqw; top: 31cqw; max-width: 200px; }
@media (max-width: 960px) { .ad-offre-tete { grid-template-columns: minmax(0, 1fr); align-items: start; } }

/* trois téléphones : ce que voit le participant, reliés par l'orbite déroulée (le parcours) */
.ad-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ad-e-6); }
.ad-trio__item { display: grid; justify-items: center; gap: var(--ad-e-5); }
.ad-trio__item > figcaption { display: grid; gap: 4px; text-align: center; max-width: 30ch; }
.ad-trio__item > figcaption b { font-weight: 600; }
.ad-trio__note { margin-top: var(--ad-e-8); margin-inline: auto; justify-content: center; text-align: left; max-width: max-content; }
.ad-trio--parcours { position: relative; isolation: isolate; }
.ad-trio--parcours > .ad-trio__item { position: relative; z-index: 1; }
.ad-parcours { position: absolute; z-index: 0; left: -2%; right: -2%; top: 0; height: 580px; pointer-events: none; }
.ad-parcours svg { width: 100%; height: 100%; overflow: visible; }
.ad-parcours path { fill: none; stroke: var(--ad-parcours); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.ad-parcours__escale { position: absolute; width: 11px; height: 11px; border-radius: 50%; transform: translate(-50%, -50%);
                       background: var(--ad-fond-alt); box-shadow: inset 0 0 0 1.5px var(--ad-parcours); }
.ad-parcours__escale--depart { left: 0; top: 65%; }
.ad-parcours__escale--arrivee { left: 100%; top: 65%; width: 13px; height: 13px; background: var(--ad-planete); box-shadow: inset 0 0 0 1px rgba(17, 17, 18, .25); }
@media (max-width: 960px) {
  .ad-trio { grid-template-columns: minmax(0, 1fr); gap: var(--ad-e-10); }
  .ad-trio .ad-tel__ecran { height: 39em; }
  .ad-parcours { display: none; }
}

/* rangées de fonction avec scène : l'écran entier en largeur, coupé seulement en bas */
.ad-fonction__scene { height: 500px; }
.ad-fonction__cadre { position: absolute; left: 32px; right: 32px; top: 64px; --ad-ui-l: 54; }
.ad-fonction__cadre.ad-sans-side { --ad-ui-l: 46; }
.ad-fonction__scene--site .ad-fonction__cadre { top: 40px; --ad-ui-l: 52; }
.ad-insc-surligne .ad-marque-cible { background: var(--ad-surlignage); box-shadow: 0 0 0 2px var(--ad-action); border-radius: 6px; color: var(--ad-ui-encre); }
.ad-mail-surligne .ad-mail-humains { background: var(--ad-surlignage); box-shadow: 0 0 0 2px var(--ad-action); border-color: transparent; }
.ad-annot--insc { right: 24px; top: 12px; }
.ad-annot--mail { right: 24px; top: 12px; }
@media (min-width: 1101px) { .ad-mail-scene { height: 600px; } .ad-mail-scene .ad-fonction__cadre { top: 80px; } }
.ad-trois-faits { margin-top: clamp(56px, 6vw, 96px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ad-e-8); }
.ad-trois-faits > div { display: grid; gap: var(--ad-e-3); padding-top: var(--ad-e-5); border-top: 1px solid var(--ad-filet-fort); align-content: start; }
@media (max-width: 860px) { .ad-trois-faits { grid-template-columns: minmax(0, 1fr); gap: var(--ad-e-6); } }
/* accueil sur site : tablette et badge imprimé. Le badge ne couvre que le cadre de la tablette, la
   scène et la place libérée par le cadrage (la liste des passages quitte le cadre moyen) */
.ad-accueil-scene { height: 700px; }
.ad-accueil-scene__tablette { position: absolute; left: 32px; top: 172px; width: calc(100% - 64px); }
/* Le jour J se passe dans la salle : la bande passe en nuit (.ad-nuit, rôles de nuit, une seule bande
   de nuit par page en plus de la fin). La scène devient la salle, la planète sa lampe, entière, en
   haut à droite, derrière la tablette ; la lumière part d'elle. Tablette et badge restent clairs. */
.ad-bande.ad-nuit { color: var(--ad-texte); }
.ad-lampe { position: absolute; z-index: 0; top: 8px; right: 20px; width: 214px; pointer-events: none; }
.ad-scene:has(> .ad-lampe) { background-image: radial-gradient(circle at calc(100% - 20px - 89px) 92px,
                               var(--ad-scene-lumiere) 0, var(--ad-scene-lumiere) 90px, var(--ad-scene) 360px, var(--ad-scene-penombre) 720px); }
.ad-accueil-scene > :not(.ad-lampe) { z-index: 1; }
.ad-accueil-scene__badge { position: absolute; right: 40px; bottom: 36px; transform: rotate(4deg); z-index: 2 !important; }
.ad-accueil-scene__badge .ad-badge { font-size: 12px; }
/* gestion : un seul écran, en grand */
.ad-gestion-tete { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(24px, 4vw, 64px); align-items: last baseline; margin-bottom: clamp(32px, 4vw, 56px); }
.ad-gestion-scene { height: 560px; }
.ad-gestion-scene .ad-gestion__cadre { position: absolute; left: 48px; right: 48px; top: 56px; }
@media (max-width: 960px) { .ad-gestion-tete { grid-template-columns: minmax(0, 1fr); } }

/* 20. Scènes qui portent un écran, sous 1 100 px --------------------------------------------------
   L'écran passe en flux, la scène prend sa hauteur ; sous 960 px, marge de 12 px (28 = 16 + 12) ;
   sous 480 px, la scène d'un écran recadré va bord à bord (32 px de plus pour l'écran). */
/* le récapitulatif d'inscription se montre entier : le détail désigné est en bas de l'écran */
.ad-fonction__scene:has(.ad-insc-surligne) { height: auto; padding: 84px 32px 32px; }
.ad-fonction__scene:has(.ad-insc-surligne) .ad-fonction__cadre { position: relative; inset: auto; }
@media (max-width: 1100px) {
  .ad-fonction__scene:has(.ad-cadre--recadre) { height: auto; padding: 84px 32px 32px; }
  .ad-accueil-scene { height: auto; padding: 132px 24px 24px; }
  .ad-lampe { width: 168px; top: 10px; right: 20px; }
  .ad-accueil-scene__tablette { position: relative; left: auto; top: auto; width: 100%; }
  .ad-accueil-scene__badge { position: relative; right: auto; bottom: auto; transform: rotate(3deg); margin: -48px 8px 0 auto; width: max-content; }
  .ad-fonction__scene:has(.ad-cadre--recadre) .ad-fonction__cadre { position: relative; inset: auto; }
  .ad-offre-scene__fond { height: auto; padding: 24px 24px 20px; }
  .ad-offre-scene__bo { position: relative; left: auto; top: auto; width: 100%; }
  .ad-offre-scene .ad-annot--bo { position: relative; inset: auto; margin: 14px 0 0; max-width: none; }
}
@media (max-width: 960px) {
  .ad-fonction__scene, .ad-accueil-scene, .ad-gestion-scene, .ad-modele__scene { height: auto; padding: 20px 16px 0; overflow: hidden; }
  .ad-fonction__cadre, .ad-gestion-scene .ad-gestion__cadre, .ad-modele__cadre, .ad-accueil-scene__tablette { position: relative; left: auto; right: auto; top: auto; width: 100%; }
  .ad-fonction__cadre, .ad-gestion-scene .ad-gestion__cadre, .ad-modele__cadre { border-radius: var(--ad-r-3) var(--ad-r-3) 0 0; }
  .ad-scene .ad-annot { position: relative; inset: auto; margin: 12px 0 16px; max-width: none; }
  .ad-accueil-scene { padding-top: 116px; padding-bottom: 20px; }
  .ad-lampe { width: 150px; top: 10px; right: 16px; }
  .ad-accueil-scene__badge { position: relative; right: auto; top: auto; transform: none; margin: 16px 0 0 auto; width: max-content; }
  .ad-accueil-scene__badge .ad-badge { font-size: 12px; }
  .ad-offre-scene__fond,
  .ad-fonction__scene:has(.ad-cadre--recadre),
  .ad-gestion-scene:has(.ad-cadre--recadre),
  .ad-modele__scene:has(.ad-cadre--recadre) { padding: 12px; }
  .ad-offre-scene .ad-annot--bo, .ad-scene:has(.ad-cadre--recadre) .ad-annot { margin: 12px 0 0; }
  .ad-scene .ad-cadre--recadre { box-shadow: var(--ad-ombre-cadre-court); }
}
@media (max-width: 640px) {
  .ad-fonction__cadre, .ad-gestion-scene .ad-gestion__cadre, .ad-modele__cadre { --ad-ui-l: 38; }
  .ad-accueil-scene__tablette .ad-tablette { border-radius: 18px; padding: 8px; }
  .ad-fonction__cadre.ad-sans-side { --ad-ui-l: 40; }
  .ad-cadre:not(.ad-cadre--recadre) .ad-ui-table th, .ad-cadre:not(.ad-cadre--recadre) .ad-ui-table td { padding-inline: .65em; }
}
@media (max-width: 480px) {
  .ad-offre-scene__fond,
  .ad-fonction__scene:has(.ad-cadre--recadre),
  .ad-gestion-scene:has(.ad-cadre--recadre),
  .ad-modele__scene:has(.ad-cadre--recadre) { margin-inline: calc(-1 * var(--ad-gouttiere)); border-radius: 0; }
}

/* ---- Accueil, brief maître (passe impeccable, 05/10/2026) : styles locaux promus en composants ---- */
/* Frise sans objet d'escale : la ligne colle aux titres (88 px réservés aux objets dessinés sinon). */
.ad-frise--simple { --ad-esc: 16px; }
/* Les quatre situations de l'ingénierie : le cœur visuel de la section. */
.ad-situations { margin-top: 0; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.ad-situations .ad-situation__titre { font-family: var(--ad-police-titre); font-size: var(--ad-t-titre-3, 1.6rem); line-height: 1.15; letter-spacing: -0.02em; font-weight: 520; }
/* Notes sous un parcours, et rythme des blocs qui suivent une grille. */
.ad-notes { margin-top: var(--ad-e-6); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.ad-suite { margin-top: var(--ad-e-8); }
.ad-suite--court { margin-top: var(--ad-e-5); }
.ad-suite--moyen { margin-top: var(--ad-e-6); }
.ad-cartes-debut { align-items: start; }
.ad-mesure { max-width: 760px; }
.ad-pictogramme { width: 48px; }

/* La chaîne de la plateforme (07/10/2026) : les vignettes sont les stations, posées sur la ligne et
   reliées par une flèche ; les rangées (écran, titre, texte, relais, produit) s'alignent d'une
   colonne à l'autre (sous-grille). Le relais dit ce qui passe à l'étape suivante. */
.ad-chaine { --ad-chaine-vue: 132px; grid-template-rows: var(--ad-chaine-vue) auto auto 1fr auto; row-gap: 0; }
.ad-chaine::before { top: calc(var(--ad-chaine-vue) / 2); background: var(--ad-filet-fort); }
.ad-chaine li { padding-top: 0; grid-row: span 5; display: grid; grid-template-rows: subgrid; row-gap: 0; }
.ad-chaine li::before { display: none; }
.ad-chaine li:not(:last-child)::after { content: "\f138"; font-family: "ad-icones"; font-size: 13px; line-height: 1;
  position: absolute; top: calc(var(--ad-chaine-vue) / 2 - 13px); right: calc(var(--ad-e-6) / -2 - 13px); z-index: 2;
  width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%;
  background: var(--ad-surface); color: var(--ad-texte); box-shadow: inset 0 0 0 1px var(--ad-filet-fort); }
.ad-chaine__vue { position: relative; z-index: 1; display: flex; align-items: center; height: var(--ad-chaine-vue); }
.ad-chaine__vue > .ad-cadre { width: 100%; box-shadow: var(--ad-ombre-objet); }
.ad-chaine .ad-frise__titre { margin-top: var(--ad-e-6); font-family: var(--ad-police-titre); font-size: var(--ad-t-titre-3); font-weight: 560; letter-spacing: -0.01em; }
.ad-chaine > li > .ad-frise__texte { margin-top: var(--ad-e-2); }
.ad-chaine__relais { margin-top: var(--ad-e-4); padding-top: var(--ad-e-3); border-top: 1px solid var(--ad-filet);
  display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: start; align-self: start;
  font-size: var(--ad-t-petit); line-height: var(--ad-il-petit); color: var(--ad-texte); text-wrap: pretty; }
.ad-chaine__relais > i { margin-top: .3em; font-size: .85em; color: var(--ad-texte-discret); }
.ad-chaine__relais b { font-weight: 600; }
.ad-chaine__produit { margin-top: var(--ad-e-4); font-size: .8125rem; color: var(--ad-texte-discret);
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.ad-chaine__produit .ad-etat { white-space: nowrap; }
@media (max-width: 960px) {
  .ad-chaine { grid-template-rows: none; }
  .ad-chaine::before { top: 8px; }
  .ad-chaine li { grid-row: auto; grid-template-rows: none; padding: 0 0 var(--ad-e-10) 88px; }
  .ad-chaine li::before { display: block; top: 4px; left: 24.5px; }
  .ad-chaine li:not(:last-child)::after { display: none; }
  .ad-chaine__vue { height: auto; max-width: 300px; margin-bottom: var(--ad-e-2); }
  .ad-chaine .ad-frise__titre { margin-top: var(--ad-e-4); }
}

/* ---- Passe impeccable du 08/10/2026 (critique 20/28) ---------------------------------------- */
/* Hero : centrer le texte sur la scène a été essayé le 08/10 et retiré (il creusait un vide entre le titre et le sous-titre). */
/* Accueil seulement (d'autres pages partagent cette feuille). Une frise de quatre étapes occupe toute la largeur (elle laissait une colonne vide sur cinq). */
@media (min-width: 961px) { #acquisition .ad-frise:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Usages : une seule enveloppe par contenu. La carte s'ouvre ; seul l'écran garde son cadre. */
.ad-usages .ad-plateforme { border: 0; border-radius: 0; background: transparent; overflow: visible; grid-template-rows: auto 1fr; }
.ad-usages .ad-plateforme__texte { padding: 0 0 var(--ad-e-6); }
.ad-usages .ad-plateforme__vue { border-radius: var(--ad-r-4); padding-top: var(--ad-e-8); }
.ad-usages .ad-plateformes { gap: clamp(32px, 4vw, 56px); }
/* La note d'abonnement : une phrase sous un filet, à sa mesure. */
.ad-note { margin-top: var(--ad-e-6); padding-top: var(--ad-e-5); border-top: 1px solid var(--ad-filet-fort); max-width: 70ch; }
/* Accueil seulement. Avant la bande de fin, le dernier bloc ne double pas la respiration. */
#ingenierie.ad-bande:has(+ .ad-bande--fin) { padding-bottom: calc(var(--ad-bande-esp) * .55); }
/* Mobile : la chaîne garde sa ligne, ses titres, ses textes et ses relais ; les écrans restent sur ordinateur. */
@media (max-width: 960px) { .ad-chaine__vue, .ad-chaine-legende { display: none; } .ad-chaine li { padding-bottom: var(--ad-e-8); } }