/* ==========================================================================
   Algo Data · charte Éditeur v1.1 · ad-4d.css
   La page Ingénierie 4D (/developpement-4d), brief d'exécution graphique d'Antoine du 07/10/2026
   (08_contenu/briefs/ingenierie-4d-brief-antoine-2026-10-07.md). Se charge après ad-composants.css
   et ne sert qu'à cette page.
   Un motif porte toute la page : les STRATES d'une application (données, règles métier, interfaces,
   échanges), dessinées comme des couches qui s'accumulent au fil des versions et continuent après
   « aujourd'hui ». On le retrouve dans l'ouverture, les quatre trajectoires, le ruban de la bande de
   nuit, les besoins et le schéma du système d'information. Rien d'autre : ni code en fond, ni
   personnage, ni nuage.
   Jaune : le bouton principal (un par écran), et en accent seulement (points, surlignage pâle).
   Requêtes écrites en max-width : aucun « < » dans la feuille.
   ========================================================================== */

/* 0. Dans les colonnes de la page, l'espace entre paragraphes est celui de la grille (gap) : la marge
   de .ad-texte + .ad-texte du socle s'y ajouterait. Paragraphes en « pretty » (pas de mot seul en fin). */
:is(.ad-4d-tete__texte, .ad-4d-probleme__texte, .ad-4d-editeur__texte, .ad-4d-offre__intro, .ad-4d-transmission__texte,
    .ad-4d-antoine__texte, .ad-4d-preuves__intro, .ad-4d-systeme .ad-fonction__texte) > .ad-texte + .ad-texte { margin-top: 0; }
:is(.ad-4d-tete__texte, .ad-4d-probleme__texte, .ad-4d-editeur__texte, .ad-4d-offre__intro, .ad-4d-transmission__texte,
    .ad-4d-antoine__texte, .ad-4d-preuves__intro, .ad-4d-systeme .ad-fonction__texte, .ad-4d-esn__texte) > p { text-wrap: pretty; }
.ad-4d-promesse > .ad-titre-2 { max-width: 12em; }

/* 1. Surtitre et micro-preuve --------------------------------------------------------------- */
.ad-4d-sur { 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); display: block; }
.ad-4d-sur::before { content: ""; display: inline-block; vertical-align: .08em; margin-right: 10px; width: 7px; height: 7px; border-radius: 50%;
                     background: var(--ad-planete); box-shadow: 0 0 0 1px rgba(17, 17, 18, .12) inset; }
.ad-4d-micro { display: flex; align-items: center; gap: 10px; padding-top: var(--ad-e-5); border-top: 1px solid var(--ad-filet);
               font-weight: 600; color: var(--ad-texte); }
.ad-4d-micro::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ad-planete);
                       box-shadow: 0 0 0 1px rgba(17, 17, 18, .14) inset; }
.ad-4d-pastille-4d { display: inline-grid; place-items: center; flex: none; min-width: 2.2em; height: 1.8em; padding: 0 .4em; border-radius: 6px;
                     background: var(--ad-ui-encre); color: var(--ad-ui-blanc); font-weight: 700; font-size: .84em; letter-spacing: .02em; }

/* 2. Ouverture : le titre sur la largeur (une phrase par ligne), puis le texte 5/12 et la scène 7/12 */
.ad-4d-ouverture { padding-block: clamp(32px, 3vw + 20px, 72px) clamp(56px, 5vw + 24px, 104px); overflow: clip; }
.ad-4d-tete { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "titre titre" "texte visuel";
              column-gap: clamp(32px, 5vw, 72px); row-gap: clamp(28px, 3.4vw, 48px); align-items: center; }
.ad-4d-tete__titre { grid-area: titre; display: grid; gap: var(--ad-e-5); }
.ad-4d-tete__texte { grid-area: texte; display: grid; gap: var(--ad-e-5); align-content: center; }
.ad-4d-tete__visuel { grid-area: visuel; }
.ad-4d-h1 { font-size: clamp(2.25rem, 1.3rem + 3vw, 4rem); line-height: 1.04; letter-spacing: -0.03em; max-width: none; }
.ad-4d-h1 > span { display: block; }
.ad-4d-h1 > span + span { color: var(--ad-texte-doux); }
.ad-4d-tete__accroche { color: var(--ad-texte); }
.ad-4d-tete__actions { margin-top: var(--ad-e-1); gap: var(--ad-e-3); }
.ad-4d-scene { padding: clamp(14px, 2.6vw, 36px); }
.ad-4d-feuille { background: var(--ad-ui-blanc); color: var(--ad-ui-encre); border-radius: var(--ad-r-3); box-shadow: var(--ad-ombre-cadre-court);
                 padding: clamp(14px, 2vw, 24px); font-family: var(--ad-police-ui); container: ad-4d-feuille / inline-size; }

/* 3. Le schéma des strates (fragment src/ecrans/strates-4d.html) ----------------------------------
   Une rangée par couche : nom à gauche, piste à droite ; chaque segment est une époque de la couche.
   Les repères de version et la ligne d'aujourd'hui sont posés par-dessus les pistes (calque absolu
   aligné sur la colonne des pistes). Après aujourd'hui, les couches continuent en tireté. */
.ad-4d-strates { display: grid; gap: 12px; font-size: 12px; line-height: 1.3; }
.ad-4d-strates__tete { display: flex; align-items: center; gap: 9px; padding-bottom: 12px; border-bottom: 1px solid var(--ad-ui-perle); font-size: 13px; }
.ad-4d-strates__tete b { font-weight: 600; }
.ad-4d-strates__corps { --lab: 7.6em; --cg: 14px; --h: 26px; position: relative; display: grid; grid-template-columns: var(--lab) minmax(0, 1fr);
                        grid-auto-rows: var(--h); row-gap: 11px; column-gap: var(--cg); padding: 32px 0 36px; }
.ad-4d-strates__corps .ad-4d-couche__nom { grid-column: 1; align-self: center; text-align: right; font-weight: 600; color: var(--ad-ui-ardoise); line-height: 1.15; }
.ad-4d-piste { position: relative; display: block; height: var(--h); z-index: 1; }
.ad-4d-strates__corps .ad-4d-piste { grid-column: 2; }
.ad-4d-seg { position: absolute; top: 0; bottom: 0; left: var(--a); right: calc(100% - var(--b)); border-radius: 4px; background: var(--seg); }
.ad-4d-piste--donnees { --seg: var(--ad-ui-encre); }
.ad-4d-piste--regles { --seg: var(--ad-ui-ardoise); }
.ad-4d-piste--interfaces { --seg: var(--ad-ui-filet-fort); }
.ad-4d-piste--echanges { --seg: var(--ad-surlignage); }
.ad-4d-seg.is-neuf { box-shadow: inset 0 0 0 1px var(--ad-ui-encre); }
/* depuis la v17, le code des règles change de forme (sources en texte) : une trame verticale fine */
.ad-4d-seg.is-projet { background: repeating-linear-gradient(90deg, var(--ad-ui-ardoise) 0 9px, var(--ad-ui-graphite) 9px 10px); }
.ad-4d-seg.is-demain { background: none; border: 1.5px dashed var(--ad-ui-acier); border-left: 0; border-radius: 0 4px 4px 0; }
.ad-4d-strates__reperes { position: absolute; top: 0; bottom: 0; left: calc(var(--lab) + var(--cg)); right: 0; pointer-events: none; }
.ad-4d-version { position: absolute; top: 0; bottom: 30px; left: var(--x); width: 0; }
.ad-4d-version::before { content: ""; position: absolute; left: -.5px; top: 24px; bottom: 0; border-left: 1px dashed var(--ad-ui-filet-fort); }
.ad-4d-version b { position: absolute; top: 0; left: 0; transform: translateX(-50%); white-space: nowrap; padding: 1px 7px; border-radius: 999px;
                   font-size: 11px; font-weight: 600; color: var(--ad-ui-ardoise); background: var(--ad-ui-neige); box-shadow: inset 0 0 0 1px var(--ad-ui-perle); }
.ad-4d-strates__demain { position: absolute; left: 80%; right: -6px; top: 24px; bottom: 30px; border-radius: 0 8px 8px 0; background: var(--ad-ui-neige); }
.ad-4d-strates__jour { position: absolute; left: 80%; top: 22px; bottom: 26px; border-left: 1.5px solid var(--ad-ui-encre); z-index: 2; }
.ad-4d-strates__jour::after { content: ""; position: absolute; left: -5.25px; bottom: -5px; width: 9px; height: 9px; border-radius: 50%;
                              background: var(--ad-planete); box-shadow: 0 0 0 1.5px var(--ad-ui-encre); }
.ad-4d-temps { position: absolute; bottom: 0; font-size: 11px; color: var(--ad-ui-graphite); white-space: nowrap; }
.ad-4d-temps.is-origine { left: 0; }
.ad-4d-temps.is-jour { left: 80%; transform: translateX(-50%); font-weight: 700; color: var(--ad-ui-encre); }
.ad-4d-temps.is-demain { right: 0; }
@container ad-4d-feuille (max-width: 470px) {
  .ad-4d-strates__corps { --lab: 6.2em; --cg: 10px; --h: 22px; row-gap: 9px; }
  .ad-4d-strates__corps .ad-4d-couche__nom { font-size: 11px; }
  .ad-4d-temps.is-demain { display: none; }
}
@container ad-4d-feuille (max-width: 340px) {
  /* téléphone étroit : les noms passent au-dessus de leur piste, la piste prend toute la largeur */
  .ad-4d-strates__corps { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; row-gap: 0; padding-top: 30px; }
  .ad-4d-strates__corps .ad-4d-couche__nom { text-align: left; margin: 9px 0 4px; }
  .ad-4d-strates__corps .ad-4d-couche__nom:first-child { margin-top: 2px; }
  .ad-4d-strates__corps .ad-4d-piste { grid-column: 1; }
  .ad-4d-strates__reperes { left: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  /* le seul moment orchestré de la page : les couches se posent, de la plus ancienne à la plus récente */
  .ad-4d-strates .ad-4d-seg { transform-origin: left center; animation: ad-4d-pose .7s cubic-bezier(.2, .7, .2, 1) backwards; }
  .ad-4d-strates .ad-4d-piste--donnees .ad-4d-seg { animation-delay: .25s; }
  .ad-4d-strates .ad-4d-piste--regles .ad-4d-seg { animation-delay: .4s; }
  .ad-4d-strates .ad-4d-piste--interfaces .ad-4d-seg { animation-delay: .55s; }
  .ad-4d-strates .ad-4d-piste--echanges .ad-4d-seg { animation-delay: .7s; }
  .ad-4d-strates .ad-4d-seg.is-demain { animation: ad-4d-apparait .5s ease-out 1.05s backwards; }
  @keyframes ad-4d-pose { from { transform: scaleX(0); opacity: .4; } to { transform: none; opacity: 1; } }
  @keyframes ad-4d-apparait { from { opacity: 0; } to { opacity: 1; } }
}

/* 4. Le problème : la valeur à gauche, les cinq situations en registre numéroté à droite --------- */
.ad-4d-probleme { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.ad-4d-probleme__texte { display: grid; gap: var(--ad-e-5); }
.ad-4d-sujet { margin-top: var(--ad-e-3); font-family: var(--ad-police-titre); font-feature-settings: var(--ad-titre-fonctions);
               font-size: clamp(1.75rem, 1.5rem + .9vw, 2.125rem); line-height: 1.16; font-weight: 560; letter-spacing: -0.02em; color: var(--ad-texte); text-wrap: balance; }
.ad-4d-sujet mark { color: inherit; padding: 0 .06em; background: linear-gradient(transparent 60%, var(--ad-surlignage) 60%, var(--ad-surlignage) 94%, transparent 94%);
                    -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.ad-4d-situations { counter-reset: ad-4d-s; border-top: 1px solid var(--ad-filet-fort); }
.ad-4d-situations li { counter-increment: ad-4d-s; display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); column-gap: var(--ad-e-4); row-gap: 4px;
                       padding: clamp(18px, 1.6vw, 24px) 0; border-bottom: 1px solid var(--ad-filet); }
.ad-4d-situations li::before { content: counter(ad-4d-s, decimal-leading-zero); grid-row: 1 / span 2; font-family: var(--ad-police-titre);
                               font-feature-settings: var(--ad-chiffre-fonctions); font-size: var(--ad-t-chiffre); line-height: 1.05; font-weight: 520;
                               letter-spacing: -0.02em; color: var(--ad-texte-discret); }
.ad-4d-situation__titre { font-size: var(--ad-t-titre-4); line-height: var(--ad-il-titre-4); font-weight: 600; color: var(--ad-texte); text-wrap: balance; }
.ad-4d-situation__texte { color: var(--ad-texte-doux); text-wrap: pretty; }

/* 5. La promesse : comprendre, puis quatre trajectoires qui partent du même point --------------- */
.ad-4d-promesse { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: start;
                  margin-bottom: clamp(48px, 5vw, 80px); }
.ad-4d-comprendre { display: grid; gap: var(--ad-e-5); padding-top: .35em; }
.ad-4d-comprendre__intro { color: var(--ad-texte); font-weight: 500; }
.ad-4d-lecture { border-top: 1px solid var(--ad-filet-fort); }
.ad-4d-lecture li { display: flex; align-items: baseline; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--ad-filet);
                    font-size: var(--ad-t-titre-3); line-height: 1.3; font-weight: 500; letter-spacing: -0.012em; color: var(--ad-texte); }
.ad-4d-lecture li::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ad-texte); transform: translateY(-.12em); }
.ad-4d-lecture li.is-demain::before { background: var(--ad-planete); }
.ad-4d-voies { --g: var(--ad-e-6); }
.ad-4d-voies__entree { position: relative; padding-left: 28px; font-size: var(--ad-t-titre-4); font-weight: 600; color: var(--ad-texte); }
.ad-4d-voies__entree::before { content: ""; position: absolute; left: 0; top: .32em; width: 12px; height: 12px; border-radius: 50%;
                               background: var(--ad-fond); box-shadow: inset 0 0 0 2px var(--ad-texte); }
.ad-4d-trajets { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--g); padding-top: 46px; }
/* le rail : du point de départ, une ligne qui dessert les quatre trajectoires */
.ad-4d-trajets::before { content: ""; position: absolute; left: 5.25px; top: -10px; height: 34px; border-left: 1.5px solid var(--ad-filet-fort); }
.ad-4d-trajets::after { content: ""; position: absolute; left: 5.25px; top: 22.5px; right: calc((100% - 3 * var(--g)) / 8);
                        border-top: 1.5px solid var(--ad-filet-fort); border-bottom-left-radius: 2px; }
.ad-4d-trajet { position: relative; display: grid; align-content: start; gap: var(--ad-e-3); padding: var(--ad-e-4) var(--ad-e-4) var(--ad-e-6);
                border-radius: var(--ad-r-3); background: var(--ad-surface); box-shadow: inset 0 0 0 1px var(--ad-filet-fort); }
.ad-4d-trajet::before { content: ""; position: absolute; left: 50%; top: -23.5px; height: 23.5px; border-left: 1.5px solid var(--ad-filet-fort); }
.ad-4d-trajet::after { content: ""; position: absolute; left: calc(50% - 3.25px); top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--ad-texte); }
.ad-4d-trajet__vue { border-radius: var(--ad-r-2); background: var(--ad-fond-alt); padding: 16px 18px; margin-bottom: 4px; }
.ad-4d-trajet .ad-titre-3 { margin-top: 2px; }
.ad-4d-conclusion { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(16px, 6vw, 96px); align-items: baseline;
                    margin-top: clamp(40px, 5vw, 64px); padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--ad-filet-fort); }
.ad-4d-conclusion__fort { font-family: var(--ad-police-titre); font-feature-settings: var(--ad-titre-fonctions); font-size: clamp(1.75rem, 1.5rem + .9vw, 2.125rem);
                          line-height: 1.16; font-weight: 560; letter-spacing: -0.02em; text-wrap: balance; }
.ad-4d-conclusion .ad-chapeau { color: var(--ad-texte-doux); }

/* 6. Glyphes des strates (trajectoires, besoins, transmission) : SVG décoratifs, couleurs par rôles */
.ad-4d-glyphe { display: block; width: 100%; height: auto; max-height: 76px; overflow: visible; }
.ad-4d-glyphe--large { max-width: 230px; max-height: 100px; margin-inline: auto; }
.ad-4d-glyphe .g-i { fill: var(--ad-filet-fort); }
.ad-4d-glyphe .g-r { fill: var(--ad-texte-doux); }
.ad-4d-glyphe .g-d { fill: var(--ad-texte); }
.ad-4d-glyphe .g-n { fill: var(--ad-surlignage); stroke: var(--ad-texte); stroke-width: 1; }
.ad-4d-glyphe .g-o { fill: var(--ad-surface); stroke: var(--ad-texte); stroke-width: 1; }
.ad-4d-glyphe .g-t { fill: none; stroke: var(--ad-texte-discret); stroke-width: 1; stroke-dasharray: 3 3; }
.ad-4d-glyphe .g-trait, .ad-4d-glyphe .g-fleche { fill: none; stroke: var(--ad-texte); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ad-4d-glyphe .g-voie { fill: none; stroke: var(--ad-texte); stroke-width: 2; stroke-linecap: round; }
.ad-4d-glyphe .g-voie--option { stroke: var(--ad-texte-discret); stroke-width: 1.5; stroke-dasharray: 4 4; }
.ad-4d-glyphe .g-noeud { fill: var(--ad-surface); stroke: var(--ad-texte); stroke-width: 2; }
.ad-4d-glyphe .g-depart { fill: var(--ad-texte); }
.ad-4d-glyphe .g-fin { fill: var(--ad-surface); stroke: var(--ad-texte-discret); stroke-width: 1.5; }
.ad-4d-glyphe .g-cadre { fill: none; stroke: var(--ad-texte-discret); stroke-width: 1; stroke-dasharray: 4 4; }
.ad-4d-glyphe .g-membre { fill: var(--ad-texte-doux); }
.ad-4d-glyphe .g-lien { fill: none; stroke: var(--ad-filet-fort); stroke-width: 1.5; }
.ad-4d-glyphe .g-renfort { fill: var(--ad-surlignage); stroke: var(--ad-texte); stroke-width: 1.5; }

/* 7. La bande de nuit : l'éditeur ; la devise en grand ; le ruban des strates qui court jusqu'au bord */
.ad-4d-editeur { overflow: clip; }
.ad-4d-editeur__grille { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.ad-4d-editeur__texte { display: grid; gap: var(--ad-e-5); }
.ad-4d-editeur__texte .ad-chapeau { color: var(--ad-texte); }
.ad-4d-devise { position: relative; padding-top: var(--ad-e-8); font-family: var(--ad-police-titre); font-feature-settings: var(--ad-titre-fonctions);
                font-size: clamp(2rem, 1.2rem + 2.6vw, 3.5rem); line-height: 1.06; font-weight: 560; letter-spacing: -0.028em; text-wrap: balance; }
.ad-4d-devise::before { content: ""; position: absolute; left: 0; top: 0; width: 56px; height: 3px; border-radius: 2px; background: var(--ad-planete); }
.ad-4d-devise > span { display: block; }
.ad-4d-devise > span:first-child { color: var(--ad-texte-discret); }
.ad-4d-devise > span + span { margin-top: .14em; color: var(--ad-texte); }
.ad-4d-ruban { position: relative; display: grid; gap: 7px; margin-top: clamp(56px, 6vw, 96px);
               -webkit-mask-image: linear-gradient(90deg, black 62%, transparent 98%); mask-image: linear-gradient(90deg, black 62%, transparent 98%); }
.ad-4d-ruban .ad-4d-piste { height: 6px; }
.ad-4d-ruban .ad-4d-seg { border-radius: 3px; }
.ad-4d-ruban .ad-4d-piste--donnees { --seg: var(--ad-texte-discret); }
.ad-4d-ruban .ad-4d-piste--regles { --seg: var(--ad-filet-fort); }
.ad-4d-ruban .ad-4d-piste--interfaces { --seg: var(--ad-filet-fort); opacity: .7; }

/* 8. Trois besoins : trois cartes de même poids, le bouton au pied ------------------------------- */
.ad-4d-besoins { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ad-e-6); align-items: stretch; }
.ad-4d-besoin { display: flex; flex-direction: column; gap: var(--ad-e-3); padding: var(--ad-e-6); border-radius: var(--ad-r-4);
                background: var(--ad-surface); box-shadow: inset 0 0 0 1px var(--ad-filet-fort); }
.ad-4d-besoin__vue { display: grid; place-items: center; height: 132px; padding: 18px; margin-bottom: var(--ad-e-3); border-radius: var(--ad-r-3);
                     background: var(--ad-fond-alt); box-shadow: inset 0 0 0 1px var(--ad-filet); }
.ad-4d-besoin__accroche { font-weight: 600; color: var(--ad-texte); text-wrap: pretty; }
.ad-4d-besoin .ad-petit { text-wrap: pretty; }
.ad-4d-besoin__chute { color: var(--ad-texte); font-weight: 560; }
.ad-4d-besoin__points { display: grid; gap: 6px; margin-top: var(--ad-e-1); padding-top: var(--ad-e-4); border-top: 1px solid var(--ad-filet);
                        font-size: var(--ad-t-petit); line-height: 1.45; }
.ad-4d-besoin__points li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 8px; color: var(--ad-texte-doux); }
.ad-4d-besoin__points li::before { content: ""; width: 6px; height: 6px; margin-top: .55em; border-radius: 50%; background: var(--ad-texte); }
.ad-4d-besoin > :nth-last-child(2) { margin-bottom: var(--ad-e-5); }
.ad-4d-besoin__action { margin-top: auto; align-self: flex-start; }

/* 9. Le diagnostic : une offre, encadrée ; le livrable posé sur sa scène, ses neuf questions ------ */
.ad-4d-offre { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); grid-template-areas: "intro livrable" "suite livrable";
               column-gap: clamp(32px, 6vw, 88px); row-gap: var(--ad-e-8); padding: clamp(24px, 5vw, 64px); border-radius: var(--ad-r-5);
               background: var(--ad-surface); box-shadow: inset 0 0 0 1px var(--ad-filet-fort); }
.ad-4d-offre__intro { grid-area: intro; display: grid; gap: var(--ad-e-4); align-content: start; }
.ad-4d-offre__intro .ad-chapeau { color: var(--ad-texte); }
.ad-4d-offre__livrable { grid-area: livrable; align-self: stretch; display: grid; align-items: center; padding: clamp(18px, 3.4vw, 44px) clamp(16px, 3vw, 40px); }
.ad-4d-offre__suite { grid-area: suite; display: grid; gap: var(--ad-e-2); align-content: end; padding-top: var(--ad-e-6); border-top: 1px solid var(--ad-filet); }
.ad-4d-offre__decision { font-size: var(--ad-t-titre-4); line-height: 1.45; font-weight: 500; color: var(--ad-texte-doux); }
.ad-4d-offre__liberte { text-wrap: balance; font-family: var(--ad-police-titre); font-feature-settings: var(--ad-titre-fonctions); font-size: clamp(1.75rem, 1.55rem + .7vw, 2.125rem);
                        line-height: 1.12; font-weight: 560; letter-spacing: -0.02em; color: var(--ad-texte); }
.ad-4d-offre__actions { margin-top: var(--ad-e-5); gap: var(--ad-e-3) var(--ad-e-5); }
.ad-4d-offre__prix { margin: 0; color: var(--ad-texte-doux); }
.ad-4d-livrable { position: relative; z-index: 1; padding: clamp(18px, 2.6vw, 30px) clamp(16px, 2.6vw, 30px) clamp(16px, 2vw, 24px); border-radius: var(--ad-r-1);
                  background: var(--ad-ui-blanc); color: var(--ad-ui-encre); box-shadow: var(--ad-ombre-objet); }
.ad-4d-livrable__tete { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px solid var(--ad-ui-perle); font-size: 13px; }
.ad-4d-livrable__tete i, .ad-4d-livrable__pied i { display: block; height: 8px; border-radius: 4px; background: var(--ad-ui-filet-fort); }
.ad-4d-livrable__tete i:nth-of-type(1) { width: 38%; }
.ad-4d-livrable__tete i:nth-of-type(2) { width: 16%; margin-left: auto; background: var(--ad-ui-perle); }
.ad-4d-livrable__pied { display: flex; gap: 10px; padding-top: 16px; }
.ad-4d-livrable__pied i { width: 22%; background: var(--ad-ui-perle); }
.ad-4d-livrable__pied i + i { width: 12%; }
.ad-4d-questions { counter-reset: ad-4d-q; }
.ad-4d-questions li { counter-increment: ad-4d-q; display: grid; grid-template-columns: 2.1em minmax(0, 1fr) 14px; align-items: baseline; column-gap: 10px;
                      padding: 9px 0; border-bottom: 1px solid var(--ad-ui-perle); font-size: var(--ad-t-petit); line-height: 1.4; color: var(--ad-ui-encre); }
.ad-4d-questions li::before { content: counter(ad-4d-q, decimal-leading-zero); font-family: var(--ad-police-titre); font-feature-settings: var(--ad-chiffre-fonctions);
                              font-size: 12px; font-weight: 600; color: var(--ad-ui-graphite); }
.ad-4d-questions li::after { content: ""; align-self: center; width: 13px; height: 13px; border-radius: 3px; box-shadow: inset 0 0 0 1.5px var(--ad-ui-acier); }
@media (min-width: 961px) { .ad-4d-livrable { transform: rotate(-1deg); } }

/* 10. 4D dans le système d'information : la rangée de fonction, la phrase mise en avant, le schéma - */
.ad-4d-phrase { margin-top: var(--ad-e-3); padding-top: var(--ad-e-5); border-top: 2px solid var(--ad-texte); font-family: var(--ad-police-titre);
                font-feature-settings: var(--ad-titre-fonctions); font-size: clamp(1.75rem, 1.5rem + .9vw, 2.125rem); line-height: 1.14; font-weight: 560;
                letter-spacing: -0.02em; color: var(--ad-texte); text-wrap: balance; }
.ad-4d-systeme .ad-fonction__visuel { align-self: center; }
.ad-4d-si { --g: 34px; display: grid; grid-template-columns: minmax(0, 1.12fr) auto minmax(0, 1fr); column-gap: var(--g); align-items: center;
            font-size: 13px; line-height: 1.3; }
.ad-4d-si__app { position: relative; display: grid; gap: 10px; padding: 14px; border-radius: 12px; background: var(--ad-ui-neige); box-shadow: inset 0 0 0 1px var(--ad-ui-perle); }
.ad-4d-si__app::after { content: ""; position: absolute; left: 100%; top: 50%; width: var(--g); border-top: 1.5px solid var(--ad-ui-encre); }
.ad-4d-si__nom { display: flex; align-items: center; gap: 8px; }
.ad-4d-si__nom b { font-weight: 600; }
.ad-4d-si__couches { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ad-4d-si__couches li { padding: 7px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; }
.ad-4d-si__couches .is-interfaces { background: var(--ad-ui-filet-fort); color: var(--ad-ui-encre); }
.ad-4d-si__couches .is-regles { background: var(--ad-ui-ardoise); color: var(--ad-ui-blanc); }
.ad-4d-si__couches .is-donnees { background: var(--ad-ui-encre); color: var(--ad-ui-blanc); }
.ad-4d-si__bus { align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 14px 10px; border-radius: 14px;
                 background: var(--ad-surlignage); box-shadow: inset 0 0 0 1px var(--ad-ui-encre); }
.ad-4d-si__bus span { font-size: 12px; font-weight: 700; text-align: center; white-space: nowrap; }
.ad-4d-si__bus span + span { padding-top: 10px; border-top: 1px solid rgba(17, 17, 18, .25); }
.ad-4d-si__services { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ad-4d-si__services li { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px;
                         background: var(--ad-ui-blanc); box-shadow: inset 0 0 0 1px var(--ad-ui-filet-fort); }
.ad-4d-si__services li::before { content: ""; position: absolute; right: 100%; top: 50%; width: var(--g); border-top: 1.5px solid var(--ad-ui-acier); }
.ad-4d-si__services b { font-weight: 600; }
.ad-4d-si__services .bi { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 13px;
                          background: var(--ad-ui-neige); color: var(--ad-ui-ardoise); box-shadow: inset 0 0 0 1px var(--ad-ui-perle); }
@container ad-4d-feuille (max-width: 500px) {
  .ad-4d-si { --g: 22px; grid-template-columns: minmax(0, 1fr); row-gap: var(--g); }
  .ad-4d-si__app::after { left: 50%; top: 100%; width: 0; height: var(--g); border-top: 0; border-left: 1.5px solid var(--ad-ui-encre); }
  .ad-4d-si__bus { flex-direction: row; gap: 16px; padding: 10px 14px; border-radius: 999px; }
  .ad-4d-si__bus span + span { padding: 0 0 0 16px; border-top: 0; border-left: 1px solid rgba(17, 17, 18, .25); }
  .ad-4d-si__services { position: relative; }
  .ad-4d-si__services::before { content: ""; position: absolute; left: 50%; bottom: 100%; height: var(--g); border-left: 1.5px solid var(--ad-ui-acier); }
  .ad-4d-si__services li::before { display: none; }
}

/* 11. Transmission : le cas réel, posé ; puis ce qui reste quand la mission se termine ------------ */
.ad-4d-transmission { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.ad-4d-transmission__texte { display: grid; gap: var(--ad-e-5); }
.ad-4d-cas { display: grid; gap: var(--ad-e-4); padding: clamp(24px, 3.4vw, 40px); border-radius: var(--ad-r-4); background: var(--ad-surface); box-shadow: var(--ad-ombre-objet); }
.ad-4d-cas::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--ad-planete); box-shadow: 0 0 0 4px var(--ad-surlignage), inset 0 0 0 1px rgba(17, 17, 18, .2); margin: 4px 0 4px 4px; }
.ad-4d-cas__recit { font-size: var(--ad-t-chapeau); line-height: 1.5; font-weight: 500; color: var(--ad-texte); text-wrap: pretty; }
.ad-4d-cas__reserve { padding-top: var(--ad-e-4); border-top: 1px solid var(--ad-filet); font-size: var(--ad-t-petit); color: var(--ad-texte-discret); }
.ad-4d-relais { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 5vw, 80px); align-items: center;
                margin-top: clamp(48px, 6vw, 88px); padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--ad-filet-fort); }
.ad-4d-relais__schema { display: block; width: 100%; max-width: 420px; height: auto; overflow: visible; }
.ad-4d-relais__schema .g-mission { fill: var(--ad-texte-doux); }
.ad-4d-relais__schema .g-fin-mission { fill: none; stroke: var(--ad-texte-discret); stroke-width: 1.25; stroke-dasharray: 3 4; }
.ad-4d-relais__schema .g-competence { fill: var(--ad-texte); }
.ad-4d-relais__schema .g-fleche { fill: none; stroke: var(--ad-texte); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ad-4d-relais__schema .g-soleil { fill: var(--ad-planete); stroke: var(--ad-texte); stroke-width: 1.25; }
.ad-4d-relais__texte { display: grid; gap: 6px; }
.ad-4d-relais__un { font-size: var(--ad-t-chapeau); line-height: 1.45; color: var(--ad-texte-doux); }
.ad-4d-relais__deux { font-family: var(--ad-police-titre); font-feature-settings: var(--ad-titre-fonctions); font-size: clamp(1.75rem, 1.35rem + 1.3vw, 2.5rem);
                      line-height: 1.1; font-weight: 560; letter-spacing: -0.024em; color: var(--ad-texte); text-wrap: balance; }

/* 12. ESN : secondaire, encadrée d'un filet, sans aplat ----------------------------------------- */
.ad-4d-esn { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(24px, 5vw, 72px); align-items: start;
             padding: clamp(24px, 4vw, 40px); border-radius: var(--ad-r-4); box-shadow: inset 0 0 0 1px var(--ad-filet-fort); }
.ad-4d-esn__texte { display: grid; gap: var(--ad-e-3); }
.ad-4d-esn__titre { margin-bottom: var(--ad-e-1); }
.ad-4d-esn__offre { display: grid; gap: var(--ad-e-5); justify-items: start; }
.ad-4d-coches { display: grid; gap: 8px; font-size: var(--ad-t-petit); line-height: 1.45; }
.ad-4d-coches li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; }
.ad-4d-coches .bi { margin-top: .2em; color: var(--ad-texte); }

/* 13. Preuves : une frise de 1994 à aujourd'hui, quatre stations, la flèche continue --------------- */
.ad-4d-preuves__tete { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(24px, 5vw, 72px); align-items: end;
                       margin-bottom: clamp(40px, 5vw, 72px); }
.ad-4d-preuves__intro { display: grid; gap: var(--ad-e-3); }
.ad-4d-frise { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto auto; }
.ad-4d-frise::before { content: ""; position: absolute; left: 0; right: 2px; top: 8px; border-top: 1.5px solid var(--ad-texte); }
.ad-4d-frise::after { content: ""; position: absolute; right: 1px; top: 4.5px; width: 8px; height: 8px; transform: rotate(45deg);
                      border-top: 1.5px solid var(--ad-texte); border-right: 1.5px solid var(--ad-texte); }
.ad-4d-frise li { position: relative; grid-row: span 3; display: grid; grid-template-rows: subgrid; row-gap: 10px; padding-right: var(--ad-e-6); }
.ad-4d-frise li::before { content: ""; width: 17px; height: 17px; border-radius: 50%; background: var(--ad-fond-alt); box-shadow: inset 0 0 0 2px var(--ad-texte); }
.ad-4d-frise li.is-origine::before { background: var(--ad-planete); }
.ad-4d-frise__valeur { align-self: end; margin-top: var(--ad-e-5); font-family: var(--ad-police-titre); font-feature-settings: var(--ad-chiffre-fonctions);
                       font-size: clamp(1.75rem, 1rem + 2vw, 2.75rem); line-height: 1; font-weight: 520; letter-spacing: -0.03em; text-wrap: balance; }
.ad-4d-frise__texte { max-width: 30ch; font-size: var(--ad-t-petit); line-height: var(--ad-il-petit); color: var(--ad-texte-doux); text-wrap: pretty; }

/* 14. Trente minutes avec Antoine : la place du portrait, puis l'invitation ------------------------ */
.ad-4d-antoine { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: clamp(32px, 7vw, 112px); row-gap: var(--ad-e-8); align-items: center; }
.ad-4d-antoine__portrait { width: 100%; max-width: 380px; }
.ad-4d-antoine__texte { display: grid; gap: var(--ad-e-5); }
.ad-4d-antoine__amorce { font-weight: 600; color: var(--ad-texte); margin-bottom: calc(-1 * var(--ad-e-2)); }
.ad-4d-sujets { border-top: 1px solid var(--ad-filet-fort); }
.ad-4d-sujets li { display: flex; align-items: baseline; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--ad-filet); color: var(--ad-texte); }
.ad-4d-sujets li::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ad-texte); transform: translateY(-.08em); }
.ad-4d-antoine .ad-actions { margin-top: var(--ad-e-2); }

/* 15. Fin : une phrase par ligne sur grand écran ------------------------------------------------ */
.ad-4d-fin__titre > span { display: block; }

/* 16. Survols (≤ 150 ms, couleur seulement) ---------------------------------------------------- */
@media (hover: hover) {
  .ad-4d-trajet, .ad-4d-trajet::before, .ad-4d-besoin { transition: box-shadow .12s ease, border-color .12s ease; }
  .ad-4d-trajet:hover, .ad-4d-besoin:hover { box-shadow: inset 0 0 0 1px var(--ad-texte); }
  .ad-4d-trajet:hover::before { border-color: var(--ad-texte); }
}
.ad-4d-besoin:focus-within { box-shadow: inset 0 0 0 1px var(--ad-texte); }

/* 17. Tailles intermédiaires et téléphone ------------------------------------------------------- */
@media (max-width: 1100px) {
  .ad-4d-editeur__grille { grid-template-columns: minmax(0, 1fr); row-gap: var(--ad-e-12); }
  .ad-4d-editeur__texte { max-width: 46rem; }
  .ad-4d-trajets { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 0; margin-top: var(--ad-e-6); }
  .ad-4d-trajets::before, .ad-4d-trajets::after, .ad-4d-trajet::before, .ad-4d-trajet::after { display: none; }
}
@media (max-width: 960px) {
  .ad-4d-tete { grid-template-columns: minmax(0, 1fr); grid-template-areas: "titre" "texte" "visuel"; }
  .ad-4d-tete__texte { max-width: 40rem; }
  .ad-4d-probleme, .ad-4d-promesse, .ad-4d-editeur__grille, .ad-4d-transmission, .ad-4d-relais, .ad-4d-esn,
  .ad-4d-preuves__tete, .ad-4d-antoine, .ad-4d-conclusion { grid-template-columns: minmax(0, 1fr); }
  .ad-4d-besoins { grid-template-columns: minmax(0, 1fr); max-width: 40rem; }
  .ad-4d-offre { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "livrable" "suite"; }
  .ad-4d-offre__livrable { margin-inline: calc(-1 * clamp(8px, 2vw, 16px)); }
  .ad-4d-relais__schema { max-width: 360px; }
  .ad-4d-antoine__portrait { max-width: 260px; }
  /* la frise devient verticale : la ligne du temps descend le long des stations */
  .ad-4d-frise { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: var(--ad-e-6); padding-left: 34px; }
  .ad-4d-frise::before { left: 8px; right: auto; top: 8px; bottom: 0; border-top: 0; border-left: 1.5px solid var(--ad-texte); }
  .ad-4d-frise::after { left: 4.5px; right: auto; top: auto; bottom: 1px; transform: rotate(135deg); }
  .ad-4d-frise li { grid-row: auto; grid-template-rows: none; row-gap: 6px; padding-right: 0; }
  .ad-4d-frise li::before { position: absolute; left: -34px; top: .55em; }
  .ad-4d-frise__valeur { margin-top: 0; }
}
@media (max-width: 640px) {
  .ad-4d-h1 { font-size: var(--ad-t-titre-1); }
  .ad-4d-trajets { grid-template-columns: minmax(0, 1fr); }
  .ad-4d-tete__actions .ad-btn { width: 100%; }
  .ad-4d-situations li { grid-template-columns: 2.6rem minmax(0, 1fr); }
  .ad-4d-besoin { padding: var(--ad-e-5); }
  .ad-4d-besoin__vue { height: 116px; }
  .ad-4d-esn__offre .ad-btn { width: 100%; }
}