/* ═══════════════════════════════════════════════════════════════════════
   LES PAGES D'ACTIVITÉ — le gabarit (Digital d'abord, puis les trois
   autres par duplication).

   Chargée APRÈS style.css : elle s'appuie sur ses jetons (--noir, --or,
   --display, --mono, --sortie…) et sur ses briques (.enveloppe, .etiq,
   .tt, .intro, .btn, .lien, .fil, .ruban, .photo, data-vu, data-coupe),
   et n'ajoute que ce que la page d'activité invente. Tout est préfixé
   (act-, tl, eng, outil, iac, fm, rc, porte) pour ne rien écraser.

   Une manière d'interagir par section — c'est le parti pris :
     en-tête      le film du trait : six prestations dessinées d'un fil d'or
     situation    un sélecteur : on choisit, on lit notre réponse
     prestations  la scène collée qui change au fil de la lecture
     déroulé      la frise qui se remplit d'or au défilement
     engagements  des tuiles qui se retournent (se déplient en étroit)
     outils       le mur de logos, gris, qui reprend couleur sous le doigt
     IA           un interrupteur : ce que l'IA prépare / ce qu'on finit
     formules     des cartes qui s'inclinent sous le pointeur
     réalisations un rail qu'on tire
     et aussi     trois portes, celle qu'on survole s'ouvre

   En étroit, rien ne s'allonge : ce qui n'est pas essentiel passe en
   rail horizontal ou en tuiles dépliantes.
   ═══════════════════════════════════════════════════════════════════════ */

.act { --act-pad: clamp(6.5rem, 12vw, 11rem); }
.act [hidden] { display: none !important; }
.act-sec { position: relative; padding-block: var(--act-pad); }
.act .tt em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; color: var(--or); }

/* l'en-tête de section : de l'air, une mesure de lecture */
.act-tete { max-width: 44rem; }
.act-tete--large { max-width: 62rem; }
.act-tete--centre { max-width: 46rem; margin-inline: auto; text-align: center; }
.act-tete .tt { margin: 0; }
.act-tete .intro { margin: clamp(1.2rem, 2vw, 1.6rem) 0 0; max-width: 38rem; }
.act-tete--centre .intro { margin-inline: auto; }

/* ── Les fonds photographiques, en parallaxe ─────────────────────────
   La photo déborde de 20 % en haut et en bas : eat.js la fait glisser
   (data-para) sans jamais découvrir de bord. Le voile, propre à chaque
   section, tient la lecture et fond la section dans le noir voisin. */
.act-sec--fond { overflow: clip; isolation: isolate; }
.act-fond { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--noir); }
.act-fond__p { position: absolute; inset: -20% 0; will-change: transform; }
.act-fond__p img { display: block; width: 100%; height: 100%; object-fit: cover; }
.act-fond::after { content: ""; position: absolute; inset: 0; background: var(--voile, rgb(11 11 12 / .85)); }
.act-fond--clair img { filter: brightness(.62) saturate(.75) contrast(1.05); }

/* ═══ 1. L'EN-TÊTE ═══════════════════════════════════════════════════ */
.act-hero {
  position: relative; min-height: 100svh; display: flex; align-items: flex-end;
  padding: calc(var(--bar-h) + 3rem) 0 clamp(3.2rem, 7vh, 5.5rem);
  overflow: clip; isolation: isolate;
}
.act-hero__fond { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--noir); }
/* ── film du trait : début (généré par _sources/activites/film_lib.py, ne pas éditer ici) ── */
/* Le film est dans le fond de l'en-tête, à droite du texte (en haut en
   étroit). Le cadre 1200 x 780 est mis à l'échelle par --ech ; l'espace
   porte la perspective ; le pivot suit le pointeur ; le monde est la
   caméra. Trois plans : le fond (la table, le décor) à -260 px, la
   planche de dessin à 0, l'avant (le nom de la prestation, la poussière
   d'or) à +150 px. Aucune opacité sur ces plans : elle aplatirait la 3D. */
.hf { position: absolute; left: 42%; right: 0; top: var(--bar-h); bottom: 0; pointer-events: none; }
.hf__cadre { --ech: .7; position: absolute; left: 50%; top: 50%; width: 1200px; height: 780px; margin: -390px 0 0 -600px; transform: scale(var(--ech)); }
.hf__espace { position: absolute; inset: 0; perspective: 1500px; perspective-origin: 50% 46%; }
.hf__pivot { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; transform: rotateX(calc(var(--py, 0) * -3deg)) rotateY(calc(var(--px, 0) * 5deg)); }
.hf__monde { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; will-change: transform; }
.hf__face { position: absolute; }
.hf__face--fond { left: -750px; top: -460px; width: 1500px; height: 920px; transform: translateZ(-260px); }
.hf__face--dessin { left: -500px; top: -310px; width: 1000px; height: 620px; }
.hf__face--avant { left: -500px; top: -310px; width: 1000px; height: 620px; transform: translateZ(150px); }
.hf-sv { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }

/* le trait : un cheveu d'or, quelle que soit l'échelle */
.hf-t { fill: none; stroke: var(--or); stroke-width: calc(1.15px / var(--ech)); stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1.06; stroke-dashoffset: 1.02; }
.hf-contour, .hf-contour2 { stroke-width: calc(1.45px / var(--ech)); }
.hf-plein { fill: var(--or); opacity: 0; }
.hf-l { fill: var(--or); stroke: none; opacity: 0; }
.hf-x { fill: var(--or-clair); clip-path: inset(-40% 104% -40% -4%); }
.hf-main { font-family: var(--main); }
.hf-mono { font-family: var(--mono); letter-spacing: .14em; }
.hf-or { fill: var(--or); }
.hf-sourd { fill: var(--gris-sourd); }
.hf-fixe { fill: none; stroke: var(--or); stroke-width: calc(1px / var(--ech)); stroke-linecap: round; opacity: .2; }
.hf-onde { fill: none; stroke: var(--or-clair); stroke-width: calc(1.2px / var(--ech)); opacity: 0; transform-box: fill-box; transform-origin: center; }
.hf-badge { transform-box: fill-box; transform-origin: center; }
.hf-led, .hf-paquet { fill: var(--or-clair); opacity: 0; }
.hf-app { opacity: 0; }
.hf-poudre circle { fill: var(--or); opacity: 0; animation: hf-poudre var(--dur) linear var(--dly) infinite; }
@keyframes hf-poudre { 0% { opacity: 0; transform: translate(0, 26px); } 25% { opacity: .5; } 75% { opacity: .35; } 100% { opacity: 0; transform: translate(var(--mx), -38px); } }

/* hors de vue, le film s'arrête (tout ensemble : il reste en phase) */
.hf.est-hors, .hf.est-hors * { animation-play-state: paused !important; }

/* les six rangs : un trait se trace (décalage 1,02 vers 0), tient, puis
   part par son début (0 vers -1,03). Le motif 1 / 1,06 et ces bornes
   laissent le trait caché d'un bout à l'autre, sans point au bout.
   Chaque scène est décalée de --k x 6 s. Les textes s'écrivent
   (hf-e), les lavis paraissent (hf-p). */
@keyframes hf-r0 { 0%, 0.278% { stroke-dashoffset: 1.02; } 4.167%, 14.583% { stroke-dashoffset: 0; } 16.667%, 100% { stroke-dashoffset: -1.03; } }
@keyframes hf-p0 { 0%, 1.639% { opacity: 0; } 4.167%, 14.583% { opacity: var(--op, 1); } 15.833%, 100% { opacity: 0; } }
@keyframes hf-e0 { 0%, 0.278% { clip-path: inset(-40% 104% -40% -4%); } 4.167%, 14.583% { clip-path: inset(-40% -4% -40% -4%); } 16.667%, 100% { clip-path: inset(-40% -4% -40% 104%); } }
@keyframes hf-r1 { 0%, 1.667% { stroke-dashoffset: 1.02; } 4.444%, 14.833% { stroke-dashoffset: 0; } 16.917%, 100% { stroke-dashoffset: -1.03; } }
@keyframes hf-p1 { 0%, 2.639% { opacity: 0; } 4.444%, 14.833% { opacity: var(--op, 1); } 16.083%, 100% { opacity: 0; } }
@keyframes hf-e1 { 0%, 1.667% { clip-path: inset(-40% 104% -40% -4%); } 4.444%, 14.833% { clip-path: inset(-40% -4% -40% -4%); } 16.917%, 100% { clip-path: inset(-40% -4% -40% 104%); } }
@keyframes hf-r2 { 0%, 2.917% { stroke-dashoffset: 1.02; } 5.694%, 15.083% { stroke-dashoffset: 0; } 17.167%, 100% { stroke-dashoffset: -1.03; } }
@keyframes hf-p2 { 0%, 3.889% { opacity: 0; } 5.694%, 15.083% { opacity: var(--op, 1); } 16.333%, 100% { opacity: 0; } }
@keyframes hf-e2 { 0%, 2.917% { clip-path: inset(-40% 104% -40% -4%); } 5.694%, 15.083% { clip-path: inset(-40% -4% -40% -4%); } 17.167%, 100% { clip-path: inset(-40% -4% -40% 104%); } }
@keyframes hf-r3 { 0%, 4.167% { stroke-dashoffset: 1.02; } 6.944%, 15.333% { stroke-dashoffset: 0; } 17.417%, 100% { stroke-dashoffset: -1.03; } }
@keyframes hf-p3 { 0%, 5.139% { opacity: 0; } 6.944%, 15.333% { opacity: var(--op, 1); } 16.583%, 100% { opacity: 0; } }
@keyframes hf-e3 { 0%, 4.167% { clip-path: inset(-40% 104% -40% -4%); } 6.944%, 15.333% { clip-path: inset(-40% -4% -40% -4%); } 17.417%, 100% { clip-path: inset(-40% -4% -40% 104%); } }
@keyframes hf-r4 { 0%, 5.417% { stroke-dashoffset: 1.02; } 8.194%, 15.583% { stroke-dashoffset: 0; } 17.667%, 100% { stroke-dashoffset: -1.03; } }
@keyframes hf-p4 { 0%, 6.389% { opacity: 0; } 8.194%, 15.583% { opacity: var(--op, 1); } 16.833%, 100% { opacity: 0; } }
@keyframes hf-e4 { 0%, 5.417% { clip-path: inset(-40% 104% -40% -4%); } 8.194%, 15.583% { clip-path: inset(-40% -4% -40% -4%); } 17.667%, 100% { clip-path: inset(-40% -4% -40% 104%); } }
@keyframes hf-r5 { 0%, 6.667% { stroke-dashoffset: 1.02; } 9.444%, 15.833% { stroke-dashoffset: 0; } 17.917%, 100% { stroke-dashoffset: -1.03; } }
@keyframes hf-p5 { 0%, 7.639% { opacity: 0; } 9.444%, 15.833% { opacity: var(--op, 1); } 17.083%, 100% { opacity: 0; } }
@keyframes hf-e5 { 0%, 6.667% { clip-path: inset(-40% 104% -40% -4%); } 9.444%, 15.833% { clip-path: inset(-40% -4% -40% -4%); } 17.917%, 100% { clip-path: inset(-40% -4% -40% 104%); } }
.hf .hf-r0 { animation: hf-r0 36s cubic-bezier(.45, .05, .25, 1) infinite both; animation-delay: calc(var(--k) * 6s - 36.5s); }
.hf .hf-p0 { animation: hf-p0 36s ease-out infinite both; animation-delay: calc(var(--k) * 6s - 36.5s); }
.hf .hf-e0 { animation: hf-e0 36s cubic-bezier(.35, .1, .45, 1) infinite both; animation-delay: calc(var(--k) * 6s - 36.5s); }
.hf .hf-plein.hf-r0 { animation-name: hf-r0, hf-p0; animation-duration: 36s; animation-timing-function: cubic-bezier(.45, .05, .25, 1), ease-out; animation-iteration-count: infinite; animation-fill-mode: both; animation-delay: calc(var(--k) * 6s - 36.5s); }
.hf .hf-r1 { animation: hf-r1 36s cubic-bezier(.45, .05, .25, 1) infinite both; animation-delay: calc(var(--k) * 6s - 36.5s); }
.hf .hf-p1 { animation: hf-p1 36s ease-out infinite both; animation-delay: calc(var(--k) * 6s - 36.5s); }
.hf .hf-e1 { animation: hf-e1 36s cubic-bezier(.35, .1, .45, 1) infinite both; animation-delay: calc(var(--k) * 6s - 36.5s); }
.hf .hf-plein.hf-r1 { animation-name: hf-r1, hf-p1; animation-duration: 36s; animation-timing-function: cubic-bezier(.45, .05, .25, 1), ease-out; animation-iteration-count: infinite; animation-fill-mode: both; animation-delay: calc(var(--k) * 6s - 36.5s); }
.hf .hf-r2 { animation: hf-r2 36s cubic-bezier(.45, .05, .25, 1) infinite both; animation-delay: calc(var(--k) * 6s - 36.5s); }
.hf .hf-p2 { animation: hf-p2 36s ease-out infinite both; animation-delay: calc(var(--k) * 6s - 36.5s); }
.hf .hf-e2 { animation: hf-e2 36s cubic-bezier(.35, .1, .45, 1) infinite both; animation-delay: calc(var(--k) * 6s - 36.5s); }
.hf .hf-plein.hf-r2 { animation-name: hf-r2, hf-p2; animation-duration: 36s; animation-timing-function: cubic-bezier(.45, .05, .25, 1), ease-out; animation-iteration-count: infinite; animation-fill-mode: both; animation-delay: calc(var(--k) * 6s - 36.5s); }
.hf .hf-r3 { animation: hf-r3 36s cubic-bezier(.45, .05, .25, 1) infinite both; animation-delay: calc(var(--k) * 6s - 36.5s); }
.hf .hf-p3 { animation: hf-p3 36s ease-out infinite both; animation-delay: calc(var(--k) * 6s - 36.5s); }
.hf .hf-e3 { animation: hf-e3 36s cubic-bezier(.35, .1, .45, 1) infinite both; animation-delay: calc(var(--k) * 6s - 36.5s); }
.hf .hf-plein.hf-r3 { animation-name: hf-r3, hf-p3; animation-duration: 36s; animation-timing-function: cubic-bezier(.45, .05, .25, 1), ease-out; animation-iteration-count: infinite; animation-fill-mode: both; animation-delay: calc(var(--k) * 6s - 36.5s); }
.hf .hf-r4 { animation: hf-r4 36s cubic-bezier(.45, .05, .25, 1) infinite both; animation-delay: calc(var(--k) * 6s - 36.5s); }
.hf .hf-p4 { animation: hf-p4 36s ease-out infinite both; animation-delay: calc(var(--k) * 6s - 36.5s); }
.hf .hf-e4 { animation: hf-e4 36s cubic-bezier(.35, .1, .45, 1) infinite both; animation-delay: calc(var(--k) * 6s - 36.5s); }
.hf .hf-plein.hf-r4 { animation-name: hf-r4, hf-p4; animation-duration: 36s; animation-timing-function: cubic-bezier(.45, .05, .25, 1), ease-out; animation-iteration-count: infinite; animation-fill-mode: both; animation-delay: calc(var(--k) * 6s - 36.5s); }
.hf .hf-r5 { animation: hf-r5 36s cubic-bezier(.45, .05, .25, 1) infinite both; animation-delay: calc(var(--k) * 6s - 36.5s); }
.hf .hf-p5 { animation: hf-p5 36s ease-out infinite both; animation-delay: calc(var(--k) * 6s - 36.5s); }
.hf .hf-e5 { animation: hf-e5 36s cubic-bezier(.35, .1, .45, 1) infinite both; animation-delay: calc(var(--k) * 6s - 36.5s); }
.hf .hf-plein.hf-r5 { animation-name: hf-r5, hf-p5; animation-duration: 36s; animation-timing-function: cubic-bezier(.45, .05, .25, 1), ease-out; animation-iteration-count: infinite; animation-fill-mode: both; animation-delay: calc(var(--k) * 6s - 36.5s); }
/* les gestes : le clic sur « Nous trouver », le panier qui passe à +1,
   notre résultat qui remonte en tête, les cœurs qui s'envolent, les
   voyants du serveur, les données qui circulent */
@keyframes hf-onde { 0%, 9.722% { opacity: 0; transform: scale(.3); } 10.056% { opacity: .9; } 11.944%, 100% { opacity: 0; transform: scale(1.8); } }
@keyframes hf-badge { 0%, 9.583% { transform: scale(1); } 10.278% { transform: scale(1.28); } 11.111%, 100% { transform: scale(1); } }
@keyframes hf-monte { 0%, 7.639% { transform: none; } 9.861%, 100% { transform: translateY(-186px); } }
@keyframes hf-desc { 0%, 7.639% { transform: none; } 9.861%, 100% { transform: translateY(62px); } }
@keyframes hf-vole { 0%, 9.722% { transform: none; opacity: 1; } 13.611%, 100% { transform: translateY(-96px); opacity: 0; } }
@keyframes hf-apparait { 0%, 8.333% { opacity: 0; } 9.167%, 13.889% { opacity: 1; } 14.722%, 100% { opacity: 0; } }
@keyframes hf-clig { 0%, 45% { fill-opacity: 1; } 55%, 100% { fill-opacity: .2; } }
@keyframes hf-glisse { 0%, 7.639% { transform: none; } 9.861%, 100% { transform: translate(var(--dx, 0px), var(--dy, 0px)); } }
@keyframes hf-tourne { 0%, 7.778% { transform: none; } 10.000%, 100% { transform: rotate(var(--rot, 0deg)); } }
@keyframes hf-voyage { 0% { transform: none; fill-opacity: 0; } 15%, 80% { fill-opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)); fill-opacity: 0; } }
.hf .hf-onde { animation: hf-onde 36s ease-out infinite both; animation-delay: calc(var(--k) * 6s - 36.5s); }
.hf .hf-badge { animation: hf-badge 36s cubic-bezier(.3, 1.4, .5, 1) infinite both; animation-delay: calc(var(--k) * 6s - 36.5s); }
.hf .hf-monte { animation: hf-monte 36s cubic-bezier(.65, .05, .3, 1) infinite both; animation-delay: calc(var(--k) * 6s - 36.5s); }
.hf .hf-desc { animation: hf-desc 36s cubic-bezier(.65, .05, .3, 1) infinite both; animation-delay: calc(var(--k) * 6s - 36.5s); }
.hf .hf-vole { animation: hf-vole 36s cubic-bezier(.3, .2, .5, 1) infinite both; animation-delay: calc(var(--k) * 6s - 36.5s + var(--v) * .22s); }
.hf .hf-glisse { animation: hf-glisse 36s cubic-bezier(.65, .05, .3, 1) infinite both; animation-delay: calc(var(--k) * 6s - 36.5s); }
.hf .hf-tourne { transform-box: fill-box; transform-origin: var(--ox, 50%) var(--oy, 50%); animation: hf-tourne 36s cubic-bezier(.5, .05, .3, 1.25) infinite both; animation-delay: calc(var(--k) * 6s - 36.5s); }
.hf .hf-app { animation: hf-apparait 36s linear infinite both; animation-delay: calc(var(--k) * 6s - 36.5s); }
.hf .hf-led { animation: hf-apparait 36s linear infinite both, hf-clig 1.1s linear infinite; animation-delay: calc(var(--k) * 6s - 36.5s), calc(var(--v) * -.37s); }
.hf .hf-paquet { animation: hf-apparait 36s linear infinite both, hf-voyage 1.3s cubic-bezier(.45, 0, .55, 1) infinite; animation-delay: calc(var(--k) * 6s - 36.5s), calc(var(--v) * -.43s); }
/* la caméra : une pose par prestation, une dérive lente pendant le
   dessin, un mouvement pendant l'effacement ; 0 % et 100 % identiques */
@keyframes hf-cam { 0% { transform: translateZ(0px) rotateX(7deg) rotateY(-11deg); animation-timing-function: cubic-bezier(.3, 0, .7, 1); } 12.917% { transform: translateZ(34px) rotateX(6deg) rotateY(-8.5deg); animation-timing-function: cubic-bezier(.55, .05, .3, 1); } 16.667% { transform: translateZ(0px) rotateX(4deg) rotateY(8deg); animation-timing-function: cubic-bezier(.3, 0, .7, 1); } 29.583% { transform: translateZ(34px) rotateX(3deg) rotateY(5.5deg); animation-timing-function: cubic-bezier(.55, .05, .3, 1); } 33.333% { transform: translateZ(0px) rotateX(8deg) rotateY(-7deg); animation-timing-function: cubic-bezier(.3, 0, .7, 1); } 46.250% { transform: translateZ(34px) rotateX(7deg) rotateY(-4.5deg); animation-timing-function: cubic-bezier(.55, .05, .3, 1); } 50.000% { transform: translateZ(0px) rotateX(5deg) rotateY(10deg); animation-timing-function: cubic-bezier(.3, 0, .7, 1); } 62.917% { transform: translateZ(34px) rotateX(4deg) rotateY(7.5deg); animation-timing-function: cubic-bezier(.55, .05, .3, 1); } 66.667% { transform: translateZ(0px) rotateX(7deg) rotateY(-9deg); animation-timing-function: cubic-bezier(.3, 0, .7, 1); } 79.583% { transform: translateZ(34px) rotateX(6deg) rotateY(-6.5deg); animation-timing-function: cubic-bezier(.55, .05, .3, 1); } 83.333% { transform: translateZ(0px) rotateX(4deg) rotateY(7deg); animation-timing-function: cubic-bezier(.3, 0, .7, 1); } 96.250% { transform: translateZ(34px) rotateX(3deg) rotateY(4.5deg); animation-timing-function: cubic-bezier(.55, .05, .3, 1); } 100% { transform: translateZ(0px) rotateX(7deg) rotateY(-11deg); } }
.hf__monde { animation: hf-cam 36s linear infinite both; animation-delay: -35.9s; }
/* mouvement réduit : la première prestation, dessinée, posée */
@media (prefers-reduced-motion: reduce) {
  .hf *, .hf__monde { animation: none !important; }
  .hf .hf-s--0 .hf-t { stroke-dashoffset: 0; }
  .hf .hf-s--0 .hf-l, .hf .hf-s--0 .hf-plein { opacity: var(--op, 1); }
  .hf .hf-s--0 .hf-x { clip-path: none; }
  .hf .hf-s--0 .hf-app, .hf .hf-s--0 .hf-led { opacity: 1; }
  .hf__monde { transform: rotateX(6deg) rotateY(-8deg); }
  .hf-poudre circle { opacity: .25; }
}
/* ── film du trait : fin ── */

.act-hero__voile {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, var(--noir) 0%, rgb(11 11 12 / 0) 26%),
    linear-gradient(to bottom, rgb(11 11 12 / .7) 0%, rgb(11 11 12 / 0) 18%),
    linear-gradient(90deg, rgb(11 11 12 / .94) 0%, rgb(11 11 12 / .82) 26%, rgb(11 11 12 / .34) 48%, rgb(11 11 12 / 0) 62%);
}

.act-hero__txt { position: relative; z-index: 2; }
.act-hero .fil { margin-bottom: clamp(1.4rem, 3vh, 2.2rem); }
.act-h1 { display: flex; flex-direction: column; margin: 0; max-width: 46rem; }
.act-h1__k { font: 700 .72rem/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--or); margin-bottom: 1.3rem; }
.act-h1__g {
  display: block; font-family: var(--display); font-weight: 800; font-variation-settings: 'wdth' 88, 'opsz' 72;
  letter-spacing: -.04em; line-height: .96; font-size: clamp(2.7rem, 6.2vw, 5.8rem); color: var(--blanc);
}
.act-h1__g--2 { margin-top: .08em; }
.act-hero__chapo { max-width: 34rem; margin: clamp(1.4rem, 3vh, 2rem) 0 0; font-size: clamp(1.02rem, 1.25vw, 1.16rem); line-height: 1.66; color: var(--gris-txt); }
.act-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 2rem; margin-top: clamp(1.8rem, 4vh, 2.6rem); }
.act-cles { display: grid; grid-template-columns: repeat(3, minmax(0, 13rem)); gap: clamp(1.4rem, 3.4vw, 3rem); margin: clamp(2.4rem, 6vh, 4rem) 0 0; padding: 1.4rem 0 0; list-style: none; border-top: 1px solid var(--filet); max-width: 46rem; }
.act-cles b { display: block; font: 800 clamp(1.7rem, 2.6vw, 2.3rem)/1 var(--display); letter-spacing: -.03em; color: var(--or); }
.act-cles span { display: block; margin-top: .5rem; font: 400 .82rem/1.45 var(--texte); color: var(--gris-txt); }

/* grand écran : la droite est au film. « Activité 01 sur 04 » reste
   avec le fil d'Ariane, à gauche ; entre 900 et 1279 px, le titre et le
   chapeau se resserrent (le titre passe sur trois lignes) et le film
   recule un peu : le texte et le dessin ne se croisent pas. */
@media (min-width: 900px) {
  .act-hero .fil em { margin-left: 1.1rem; padding-left: 1.1rem; border-left: 1px solid var(--filet-fort); }
}
@media (min-width: 900px) and (max-width: 1279px) {
  .act-h1 { max-width: 50vw; }
  .act-hero__chapo { max-width: 44vw; }
  .hf { left: 46%; }
}

/* l'invitation à descendre : un fil, une goutte d'or qui y glisse */
.act-hero__suite { position: absolute; right: var(--marge); bottom: clamp(3rem, 7vh, 5rem); width: 1px; height: 84px; background: var(--filet-fort); overflow: hidden; }
.act-hero__suite span { position: absolute; left: -1px; top: 0; width: 3px; height: 24px; background: var(--or); animation: act-goutte 2.2s var(--douce) infinite; }
@keyframes act-goutte { 0% { transform: translateY(-100%); } 100% { transform: translateY(360%); } }

/* les réalisations d'un métier qui n'a pas encore de fiche : un mot, deux liens */
.act-real--vide .act-real__tete { display: block; }
.act-real__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 2rem; margin-top: clamp(1.6rem, 3vw, 2.2rem); }

/* ═══ Le sommaire flottant ═══════════════════════════════════════════ */
.act-som { position: fixed; right: clamp(14px, 1.5vw, 26px); top: 50%; z-index: 40; transform: translateY(-50%); opacity: 0; pointer-events: none; transition: opacity .5s var(--sortie); }
.act-som.est-visible { opacity: 1; pointer-events: auto; }
.act-som ol { display: grid; gap: .95rem; margin: 0; padding: 0; list-style: none; }
.act-som a { display: flex; align-items: center; justify-content: flex-end; gap: .75rem; padding: .15rem 0; color: var(--gris-txt); }
.act-som a::after { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--gris-sourd); transition: background .35s, border-color .35s, transform .45s var(--ressort); }
.act-som span { font: 700 .6rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; opacity: 0; transform: translateX(6px); transition: opacity .35s, transform .45s var(--sortie); white-space: nowrap; padding: .35rem .5rem; background: rgb(11 11 12 / .8); }
/* les libellés ne sortent qu'au survol du sommaire : ils mordraient
   sinon sur le bord droit des sections */
.act-som:hover span, .act-som a:focus-visible span { opacity: 1; transform: none; }
.act-som a.est-actif { color: var(--or); }
.act-som a.est-actif::after { background: var(--or); border-color: var(--or); transform: scale(1.35); }
@media (max-width: 1199px) { .act-som { display: none; } }

/* ═══ 2. VOTRE SITUATION ═════════════════════════════════════════════ */
.act-besoins { --voile: linear-gradient(to bottom, var(--noir) 0%, rgb(11 11 12 / .78) 16%, rgb(11 11 12 / .66) 50%, rgb(11 11 12 / .8) 84%, var(--noir) 100%); }
.act-besoins__jeu { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2rem, 5vw, 5.5rem); align-items: start; margin-top: clamp(3rem, 6vw, 4.6rem); }
.act-choix { display: grid; gap: .7rem; margin: 0; padding: 0; list-style: none; }
.act-choix__b {
  display: flex; align-items: center; gap: 1rem; width: 100%; padding: 1.15rem 1.35rem; text-align: left;
  font: 500 1.02rem/1.3 var(--texte); color: var(--blanc);
  background: rgb(11 11 12 / .5); border: 1px solid var(--filet-fort);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: border-color .35s, background .35s, color .35s, transform .45s var(--sortie);
}
.act-choix__b:hover { border-color: rgb(224 206 146 / .6); transform: translateX(6px); }
.act-choix__b[aria-pressed="true"] { border-color: var(--or); background: rgb(224 206 146 / .1); color: var(--or-clair); transform: translateX(10px); }
.act-choix__o { position: relative; flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--or); }
.act-choix__o::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--or); transform: scale(0); transition: transform .4s var(--ressort); }
.act-choix__b[aria-pressed="true"] .act-choix__o::after { transform: none; }

.act-reponse {
  position: relative; padding: clamp(2rem, 3.4vw, 3rem); min-height: 100%;
  background: rgb(21 21 23 / .72); border: 1px solid var(--filet-or);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  display: flex; flex-direction: column;
}
.act-reponse::before { content: ""; position: absolute; left: -1px; top: -1px; width: 38%; height: 2px; background: var(--or); }
.act-reponse__r h3 { margin: .9rem 0 1rem; font-family: var(--display); font-weight: 800; font-variation-settings: 'wdth' 90; letter-spacing: -.03em; line-height: 1; font-size: clamp(2rem, 3.4vw, 3rem); color: var(--blanc); }
.act-reponse__r p { margin: 0; font-size: clamp(1.02rem, 1.2vw, 1.12rem); line-height: 1.66; color: var(--gris-txt); max-width: 30rem; }
.act-reponse__e { font: 700 .66rem/1 var(--mono) !important; letter-spacing: .16em; text-transform: uppercase; color: var(--or) !important; }
.act-reponse__r.est-entree { animation: act-entre .7s var(--sortie) both; }
@keyframes act-entre { from { opacity: 0; transform: translateY(14px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
.act-reponse__actions { display: flex; flex-wrap: wrap; gap: 1rem 2.2rem; margin-top: auto; padding-top: 2.2rem; }
.lien--sourd { color: var(--gris-txt); }

/* ═══ 3. LES PRESTATIONS ═════════════════════════════════════════════ */
.act-presta__grille { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(3rem, 6vw, 7rem); margin-top: clamp(2.4rem, 5vw, 4rem); }
.act-scene { position: sticky; top: calc(var(--bar-h) + 5vh); height: calc(100vh - var(--bar-h) - 10vh); display: grid; place-items: center; }
.act-scene__cadre { position: relative; width: 100%; aspect-ratio: 4 / 3; max-height: 100%; }
.act-scene__halo { position: absolute; inset: -12%; border-radius: 50%; background: radial-gradient(closest-side, rgb(224 206 146 / .13), rgb(224 206 146 / .04) 55%, transparent 72%); animation: act-halo 9s ease-in-out infinite; }
@keyframes act-halo { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.act-scene__num {
  position: absolute; left: -2%; top: -14%; font: 800 clamp(7rem, 15vw, 15rem)/1 var(--display); letter-spacing: -.06em;
  color: transparent; -webkit-text-stroke: 1px rgb(224 206 146 / .28); pointer-events: none;
  transition: opacity .3s;
}
.act-scene__num.est-change { opacity: 0; }
.act-scene__ill { position: absolute; inset: 0; opacity: 0; transform: scale(.95) translateY(12px); transition: opacity .45s var(--sortie), transform .8s var(--sortie); }
.act-scene__ill.est-active { opacity: 1; transform: none; }
.act-scene__ill .il { width: 100%; height: 100%; overflow: visible; display: block; }
.act-scene__pas { position: absolute; left: 50%; bottom: -3.2rem; display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; transform: translateX(-50%); }
.act-scene__pas li { width: 26px; height: 2px; background: var(--filet-fort); transition: background .4s, width .5s var(--sortie); }
.act-scene__pas li.est-active { width: 46px; background: var(--or); }

.act-presta__liste { margin: 0; padding: 0; list-style: none; counter-reset: none; }
.act-pr {
  display: flex; flex-direction: column; justify-content: center; min-height: 54vh;
  padding-block: clamp(2.4rem, 5vw, 4rem); border-top: 1px solid var(--filet);
  opacity: .28; transition: opacity .6s var(--sortie);
}
.act-pr:last-child { min-height: 62vh; }
.act-pr.est-active { opacity: 1; }
.act-pr__ill { display: none; }
.act-pr__n { margin: 0 0 1rem; font: 700 .72rem/1 var(--mono); letter-spacing: .16em; color: var(--or); }
.act-pr__t { margin: 0; font-family: var(--display); font-weight: 800; font-variation-settings: 'wdth' 90, 'opsz' 48; letter-spacing: -.035em; line-height: 1; font-size: clamp(2rem, 3.4vw, 3.2rem); color: var(--blanc); }
.act-pr__a { margin: 1rem 0 0; font: italic 400 clamp(1.25rem, 1.8vw, 1.55rem)/1.3 var(--serif); color: var(--or-clair); }
.act-pr__p { margin: 1.2rem 0 0; max-width: 34rem; font-size: 1.04rem; line-height: 1.7; color: var(--gris-txt); }
.act-pr__tags { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.8rem 0 0; padding: 0; list-style: none; }
.act-pr__tags li { padding: .55rem .8rem; font: 700 .62rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gris-txt); border: 1px solid var(--filet-fort); }
.act-pr.est-active .act-pr__tags li { border-color: var(--filet-or); color: var(--blanc); }

/* les rails : une barre de navigation commune (étroit surtout) */
.act-rail-nav { display: none; align-items: center; gap: 1rem; margin-top: 1.6rem; }
.act-rail-nav__b { display: grid; place-items: center; width: 46px; height: 46px; flex: none; color: var(--blanc); border: 1px solid var(--filet-fort); background: none; transition: border-color .3s, color .3s, opacity .3s; }
.act-rail-nav__b:hover { border-color: var(--or); color: var(--or); }
.act-rail-nav__b:disabled { opacity: .3; }
.act-jauge { position: relative; flex: 1; height: 2px; background: var(--filet); overflow: hidden; }
.act-jauge i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(12% + var(--p, 0) * 88%); background: var(--or); transition: width .2s linear; }

/* ═══ 4. LE DÉROULÉ : la frise ═══════════════════════════════════════ */
.act-deroule { --voile: linear-gradient(to bottom, var(--noir) 0%, rgb(11 11 12 / .88) 12%, rgb(11 11 12 / .84) 50%, rgb(11 11 12 / .9) 88%, var(--noir) 100%); }
.tl { position: relative; margin-top: clamp(3.6rem, 7vw, 6rem); --p: 0; }
.tl__axe { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--filet); }
.tl__rempli { position: absolute; left: 0; top: 0; width: 100%; height: calc(var(--p) * 100%); background: linear-gradient(to bottom, var(--or-eteint), var(--or)); box-shadow: 0 0 16px rgb(224 206 146 / .55); }
.tl__curseur {
  position: absolute; left: 50%; top: calc(var(--p) * 100%); z-index: 3;
  width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%;
  display: grid; place-items: center; font: 700 .82rem/1 var(--mono); letter-spacing: .06em; color: var(--noir);
  background: var(--plein); box-shadow: 0 0 0 7px rgb(11 11 12 / .85), 0 0 36px rgb(224 206 146 / .45);
}
.tl__liste { margin: 0; padding: 0; list-style: none; }
.tl__e { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr); align-items: center; padding-block: clamp(2.2rem, 4.6vw, 3.9rem); }
.tl__g, .tl__d { transition: opacity .8s var(--sortie), transform 1s var(--sortie); opacity: .22; }
.tl__g { grid-column: 1; grid-row: 1; text-align: right; padding-right: clamp(1.2rem, 3vw, 3rem); transform: translateX(-28px); }
.tl__d { grid-column: 3; grid-row: 1; padding-left: clamp(1.2rem, 3vw, 3rem); transform: translateX(28px); }
.tl__e:nth-child(even) .tl__g { grid-column: 3; text-align: left; padding: 0 0 0 clamp(1.2rem, 3vw, 3rem); transform: translateX(28px); }
.tl__e:nth-child(even) .tl__d { grid-column: 1; text-align: right; padding: 0 clamp(1.2rem, 3vw, 3rem) 0 0; transform: translateX(-28px); }
.tl__e.est-atteinte .tl__g, .tl__e.est-atteinte .tl__d { opacity: 1; transform: none; }
.tl__noeud {
  grid-column: 2; grid-row: 1; justify-self: center; position: relative; z-index: 1;
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: var(--noir); border: 1px solid var(--filet-fort);
  transition: background .5s, border-color .5s, box-shadow .6s;
}
.tl__noeud svg { width: 20px; height: 20px; fill: none; stroke: var(--gris-sourd); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke .5s; }
.tl__e.est-atteinte .tl__noeud { background: var(--noir); border-color: var(--or); box-shadow: 0 0 0 6px rgb(224 206 146 / .1); }
.tl__e.est-atteinte .tl__noeud svg { stroke: var(--or); }
.tl__n { display: block; margin-bottom: .5rem; font: 800 clamp(3rem, 5vw, 4.6rem)/1 var(--display); letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1px var(--or); transition: color .8s; }
.tl__e.est-atteinte .tl__n { color: rgb(224 206 146 / .16); }
.tl__g h3 { margin: 0; font-family: var(--display); font-weight: 700; font-variation-settings: 'wdth' 92; letter-spacing: -.025em; line-height: 1.05; font-size: clamp(1.45rem, 2.2vw, 2.05rem); color: var(--blanc); }
.tl__delai { display: inline-block; margin-top: 1rem; padding: .5rem .75rem; font: 700 .62rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--or); border: 1px solid var(--filet-or); }
.tl__d p { margin: 0; font-size: 1.02rem; line-height: 1.7; color: var(--gris-txt); max-width: 30rem; }
.tl__e:nth-child(even) .tl__d p { margin-left: auto; }
.tl__d ul { display: flex; flex-direction: column; gap: .5rem; margin: 1.1rem 0 0; padding: 0; list-style: none; }
.tl__e:nth-child(even) .tl__d ul { align-items: flex-end; }
.tl__d li { display: flex; align-items: center; gap: .6rem; font: 700 .64rem/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--blanc); }
.tl__d li::before { content: ""; width: 12px; height: 1px; background: var(--or); flex: none; }

/* ── les engagements : des tuiles qui se retournent ────────────────── */
.act-eng { margin-top: clamp(5.5rem, 11vw, 9rem); }
.act-eng__t { margin: 0; text-align: center; font-family: var(--display); font-weight: 800; font-variation-settings: 'wdth' 90; letter-spacing: -.035em; line-height: 1; font-size: clamp(1.9rem, 3.4vw, 3rem); color: var(--blanc); }
.act-eng__t em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--or); }
.act-eng__grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: clamp(2.4rem, 5vw, 3.6rem) 0 0; padding: 0; list-style: none; }
.eng { perspective: 1100px; }
.eng__b {
  position: relative; display: block; width: 100%; height: 270px; padding: 0; border: 0; background: none;
  color: inherit; text-align: left; font: inherit; transform-style: preserve-3d;
  transition: transform .9s var(--sortie);
}
.eng__face {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between;
  padding: 1.7rem 1.6rem; border: 1px solid var(--filet); background: rgb(21 21 23 / .82);
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
/* la face avant : le picto au centre, dans un cercle et une lueur, le
   titre dessous ; le picto se dessine quand la tuile entre à l'écran */
.eng__face--av { align-items: center; justify-content: center; gap: 1.3rem; text-align: center; padding-bottom: 2rem; }
.eng__rond { position: relative; display: grid; place-items: center; width: 108px; height: 108px; border-radius: 50%; border: 1px solid var(--filet-or); background: radial-gradient(closest-side, rgb(224 206 146 / .12), rgb(224 206 146 / 0)); flex: none; transition: transform .6s var(--ressort), border-color .4s; }
.eng__face--ar { transform: rotateY(180deg); justify-content: center; background: var(--plein); border-color: var(--plein); color: var(--sur-vif); }
.eng__p { width: 58px; height: 58px; fill: none; stroke: var(--or); stroke-width: 1.05; stroke-linecap: round; stroke-linejoin: round; }
.eng__p > :not(.eng__plein) { stroke-dasharray: 1 1.06; stroke-dashoffset: 0; }
.eng.est-vu .eng__p > :not(.eng__plein) { animation: eng-trace 1.3s cubic-bezier(.3, 0, .2, 1) calc(var(--vu-i, 0) * 70ms + 200ms) both; }
@keyframes eng-trace { from { stroke-dashoffset: 1.02; } to { stroke-dashoffset: 0; } }
.eng:hover .eng__rond { transform: scale(1.06); border-color: var(--or); }
.eng:nth-child(2) { --vu-i: 1; } .eng:nth-child(3) { --vu-i: 2; } .eng:nth-child(4) { --vu-i: 3; } .eng:nth-child(5) { --vu-i: 4; } .eng:nth-child(6) { --vu-i: 5; }
.eng__p .eng__plein { fill: var(--or); stroke: none; }
.eng__t { font-family: var(--display); font-weight: 700; font-variation-settings: 'wdth' 92; letter-spacing: -.02em; line-height: 1.1; font-size: clamp(1.2rem, 1.6vw, 1.45rem); color: var(--blanc); max-width: 15em; }
.eng__plus { position: absolute; right: 1.2rem; bottom: 1.2rem; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--filet-or); }
.eng__plus::before, .eng__plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1px; margin: 0 0 0 -5px; background: var(--or); transition: transform .5s var(--sortie); }
.eng__plus::after { transform: rotate(90deg); }
.eng__txt { font-size: 1.02rem; line-height: 1.6; }
@media (hover: hover) and (min-width: 900px) {
  .eng:hover .eng__b, .eng__b:focus-visible, .eng__b[aria-expanded="true"] { transform: rotateY(180deg); }
}

.act-outils { --voile: linear-gradient(to bottom, var(--noir) 0%, rgb(11 11 12 / .86) 14%, rgb(11 11 12 / .82) 50%, rgb(11 11 12 / .92) 86%, var(--noir) 100%); }
/* ═══ 5. L'ATELIER : le mur de logos ═════════════════════════════════
   Vingt tuiles carrées, le logo seul, centré. En gris au repos ; sous le
   pointeur, au focus ou au toucher, la tuile passe au papier, le logo
   reprend sa couleur, monte d'un cran, et son nom paraît dessous. La
   légende, sous le mur, dit à quoi l'outil nous sert.
   Les icônes Adobe sont les fichiers officiels, en couleur : c'est un
   filtre qui les éteint au repos. Les autres (Simple Icons) sont des
   tracés d'une couleur, qu'on remplit de la teinte de la marque. */
.act-mur {
  position: relative; display: grid; grid-template-columns: repeat(var(--cols, 10), minmax(0, 1fr)); gap: 1px;
  max-width: min(1180px, calc(var(--cols, 10) * 124px)); margin: clamp(2.4rem, 4.5vw, 3.2rem) auto 0; padding: 1px; list-style: none;
  background: radial-gradient(300px circle at var(--mx, -400px) var(--my, -400px), rgb(224 206 146 / .85), rgb(224 206 146 / 0) 70%), var(--filet);
}
.outil { display: flex; }
.outil__b {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .55rem;
  width: 100%; aspect-ratio: 1 / .9; padding: .6rem .4rem; border: 0; background: #111113; color: inherit; text-align: center;
  transition: background .4s var(--sortie);
}
.outil__logo { display: grid; place-items: center; width: 36px; height: 36px; transition: transform .55s var(--ressort); }
.outil__svg { width: 100%; height: 100%; fill: var(--gris-txt); transition: fill .4s, filter .4s; }
.outil__svg--couleur { fill: none; filter: grayscale(1) brightness(1.5) contrast(.85) opacity(.8); }
/* les outils sans marque : un picto au trait, gris au repos, or au survol */
.outil .outil__svg--trait { fill: none; stroke: var(--gris-txt); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke .4s; }
.outil.est-actif .outil__svg--trait, .outil__b:focus-visible .outil__svg--trait { fill: none; stroke: #8A6F1E; }
/* les logotypes tout en largeur (Synology) : plus larges que hauts */
.outil--large .outil__logo { width: 80%; height: 22px; }
.outil__nom { position: absolute; left: .3rem; right: .3rem; bottom: .7rem; font: 700 .56rem/1.15 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--noir); opacity: 0; transform: translateY(6px); transition: opacity .35s var(--sortie), transform .45s var(--sortie); }
.outil.est-actif .outil__b, .outil__b:focus-visible { background: #F4EFE3; }
.outil.est-actif .outil__logo, .outil__b:focus-visible .outil__logo { transform: translateY(-9px) scale(1.08); }
.outil.est-actif .outil__svg, .outil__b:focus-visible .outil__svg { fill: var(--c); }
.outil.est-actif .outil__svg--couleur, .outil__b:focus-visible .outil__svg--couleur { filter: none; }
.outil.est-actif .outil__nom, .outil__b:focus-visible .outil__nom { opacity: 1; transform: none; }
/* la légende : le nom, et l'usage */
.act-mur__legende { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: .3rem .9rem; min-height: 1.4rem; max-width: 1180px; margin: 1.3rem auto 0; font: 700 .66rem/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gris-txt); text-align: center; }
.act-mur__legende b { color: var(--or); font-weight: 700; }
/* au doigt, les logos entrent en couleur, l'un après l'autre */
@media (hover: none) {
  .act-mur.est-vu .outil__svg { fill: var(--c); transition-delay: calc(var(--k) * 45ms + .2s); }
  .act-mur.est-vu .outil__svg--couleur { filter: none; transition-delay: calc(var(--k) * 45ms + .2s); }
  .act-mur.est-vu .outil__svg--trait { fill: none; stroke: var(--c); transition-delay: calc(var(--k) * 45ms + .2s); }
}

/* ═══ 6. L'IA : l'interrupteur ═══════════════════════════════════════ */
.act-ia { --voile: linear-gradient(to bottom, var(--noir) 0%, rgb(11 11 12 / 0) 18%, rgb(11 11 12 / 0) 82%, var(--noir) 100%), linear-gradient(90deg, rgb(11 11 12 / .95) 0%, rgb(11 11 12 / .86) 45%, rgb(11 11 12 / .62) 100%); }
.act-ia__tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 2rem 3rem; }
.act-inter { display: flex; align-items: center; gap: 1rem; font: 700 .66rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.act-inter__l { color: var(--or); transition: color .4s; }
.act-inter__l + .act-inter__b + .act-inter__l { color: var(--gris-sourd); }
.est-nous .act-inter__l:first-child { color: var(--gris-sourd); }
.est-nous .act-inter__l + .act-inter__b + .act-inter__l { color: var(--or); }
.act-inter__b { position: relative; width: 68px; height: 36px; flex: none; padding: 0; border-radius: 36px; border: 1px solid var(--or); background: rgb(11 11 12 / .6); }
.act-inter__b i { position: absolute; left: 4px; top: 4px; width: 26px; height: 26px; border-radius: 50%; background: var(--or); transition: left .5s var(--ressort); box-shadow: 0 0 18px rgb(224 206 146 / .5); }
.act-inter__b[aria-checked="true"] i { left: 36px; }
.act-inter__b:not([data-touche]) { animation: act-appel 2.4s ease-in-out 1.2s 3; }
@keyframes act-appel { 0%, 100% { box-shadow: 0 0 0 0 rgb(224 206 146 / .45); } 50% { box-shadow: 0 0 0 10px rgb(224 206 146 / 0); } }

.act-ia__cartes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: clamp(2.6rem, 5vw, 3.6rem) 0 0; padding: 0; list-style: none; }
.iac {
  position: relative; min-height: 300px; padding: 1.8rem 1.5rem 2rem; overflow: hidden;
  border: 1px solid var(--filet-or); background: rgb(11 11 12 / .55);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: border-color .5s, background .5s;
}
.iac__n { font: 700 .66rem/1 var(--mono); letter-spacing: .16em; color: var(--or); }
.iac h3 { margin: .9rem 0 0; font-family: var(--display); font-weight: 700; font-variation-settings: 'wdth' 92; letter-spacing: -.02em; line-height: 1.1; font-size: 1.45rem; color: var(--blanc); }
.iac__f { position: absolute; left: 1.5rem; right: 1.5rem; top: 7.4rem; margin: 0; font-size: 1rem; line-height: 1.62; color: var(--gris-txt); transition: opacity .5s var(--sortie), transform .7s var(--sortie), clip-path .8s var(--sortie); }
.iac:nth-child(2) .iac__f { transition-delay: 70ms; }
.iac:nth-child(3) .iac__f { transition-delay: 140ms; }
.iac:nth-child(4) .iac__f { transition-delay: 210ms; }
.iac__f b { display: block; margin-bottom: .7rem; font: 700 .64rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--or); }
.iac__f--nous { opacity: 0; transform: translateY(16px); clip-path: inset(0 0 100% 0); color: var(--blanc); }
.est-nous .iac { border-color: var(--or); background: rgb(224 206 146 / .09); }
.est-nous .iac__f--ia { opacity: 0; transform: translateY(-16px); clip-path: inset(100% 0 0 0); }
.est-nous .iac__f--nous { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }

.act-ia__bas { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2.4rem, 6vw, 6rem); align-items: start; margin-top: clamp(4rem, 8vw, 6.4rem); }
/* « 3 à 5 jours » : le mot « jours » porte autant que les chiffres */
.act-gain__n { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .9rem; margin: 0; }
.act-gain__n b { font: 800 clamp(5rem, 9.6vw, 8.6rem)/.84 var(--display); letter-spacing: -.06em; color: var(--or); }
.act-gain__n span { font: italic 400 clamp(2rem, 3.6vw, 3.2rem)/1 var(--serif); color: var(--or-clair); }
.act-gain__n em { font: 800 clamp(3.2rem, 6.4vw, 5.8rem)/.84 var(--display); font-style: normal; letter-spacing: -.045em; color: var(--blanc); }
.act-gain__g { margin: 1rem 0 0; font: 700 .78rem/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--or); }
.act-gain__t { margin: 1.2rem 0 0; max-width: 28rem; font-size: 1.05rem; line-height: 1.66; color: var(--gris-txt); }
.act-gain__t strong { color: var(--blanc); font-weight: 600; }
.act-refus ul { margin: 0; padding: 0; list-style: none; }
.act-refus li { position: relative; padding: 1.05rem 0 1.05rem 2.6rem; border-top: 1px solid var(--filet); font-size: 1.02rem; line-height: 1.5; color: var(--blanc); }
.act-refus li:last-child { border-bottom: 1px solid var(--filet); }
.act-refus li::before { content: ""; position: absolute; left: 0; top: 1.15rem; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--or); }
.act-refus li::after { content: ""; position: absolute; left: 2px; top: calc(1.15rem + 8px); width: 14px; height: 1.5px; background: var(--or); transform: rotate(-45deg); }

/* ═══ 7. LES FORMULES ════════════════════════════════════════════════ */
/* deux onglets : Sites / Digital. Un fond d'or glisse sous l'onglet actif */
.act-onglets { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: min(100%, 460px); margin: clamp(2.2rem, 4vw, 3rem) auto 0; padding: 4px; border: 1px solid var(--filet-or); border-radius: 60px; background: rgb(21 21 23 / .8); }
.act-onglet { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: .6rem; padding: .95rem 1rem; border: 0; border-radius: 60px; background: none; font: 700 .68rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gris-txt); transition: color .4s; }
.act-onglet span { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 1px solid currentColor; font-size: .6rem; letter-spacing: 0; }
.act-onglet[aria-selected="true"] { color: var(--noir); }
.act-onglets__fond { position: absolute; left: 4px; top: 4px; bottom: 4px; width: calc(50% - 4px); border-radius: 60px; background: var(--plein); transition: transform .6s var(--ressort); }
.act-onglets.est-digital .act-onglets__fond { transform: translateX(100%); }
.act-formules__rail.est-entree .fm { animation: act-fm-entre .8s var(--sortie) both; }
.act-formules__rail.est-entree li:nth-child(2) .fm { animation-delay: 70ms; }
.act-formules__rail.est-entree li:nth-child(3) .fm { animation-delay: 140ms; }
.act-formules__rail.est-entree li:nth-child(4) .fm { animation-delay: 210ms; }
@keyframes act-fm-entre { from { opacity: 0; translate: 0 26px; } to { opacity: 1; translate: 0 0; } }
.act-formules__liste { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: stretch; margin: clamp(2.8rem, 5vw, 3.8rem) 0 0; padding: 0; list-style: none; }
.act-formules__liste > li { display: flex; }
.fm {
  position: relative; display: flex; flex-direction: column; width: 100%; padding: 2.1rem 1.6rem 1.9rem;
  background: var(--gris); border: 1px solid var(--filet);
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .4s var(--sortie), border-color .4s;
}
.fm::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgb(224 206 146 / .13), transparent 62%); }
.fm:hover { border-color: var(--filet-or); }
.fm:hover::before { opacity: 1; }
.fm--phare { border-color: var(--or); background: linear-gradient(180deg, rgb(224 206 146 / .11), var(--gris) 58%); }
@media (min-width: 900px) { .act-formules__liste > li:nth-child(2) { margin-top: -1.6rem; margin-bottom: 1.6rem; } }
.fm__badge { position: absolute; left: 1.6rem; top: -.8rem; padding: .5rem .75rem; font: 700 .58rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--noir); background: var(--plein); }
.fm__r { margin: 0; font: 700 .62rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--gris-sourd); }
.fm__t { margin: .9rem 0 0; font-family: var(--display); font-weight: 800; font-variation-settings: 'wdth' 90; letter-spacing: -.03em; line-height: 1; font-size: clamp(1.6rem, 2.1vw, 1.9rem); color: var(--blanc); }
.fm__s { margin: .5rem 0 0; font: italic 400 1.12rem/1.3 var(--serif); color: var(--or-clair); }
.fm__p { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .45rem; margin: 1.6rem 0 1.3rem; }
.fm__p span { font: 700 .62rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gris-txt); }
.fm__p span:first-child { flex-basis: 100%; margin-bottom: .35rem; }
.fm__p b { font: 800 clamp(2rem, 2.8vw, 2.6rem)/1 var(--display); letter-spacing: -.04em; color: var(--blanc); }
.fm--phare .fm__p b { color: var(--or); }
.fm__l { margin: 0; padding: 0; list-style: none; }
.fm__l li { position: relative; padding: .6rem 0 .6rem 1.3rem; border-top: 1px solid var(--filet); font-size: .92rem; line-height: 1.45; color: var(--gris-txt); }
.fm__l li::before { content: ""; position: absolute; left: 0; top: 1.05rem; width: 6px; height: 6px; background: var(--or); transform: rotate(45deg); }
.fm__d { margin: auto 0 0; padding-top: 1.5rem; font: 700 .62rem/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--or); }
.fm .lien, .fm .btn { margin-top: 1.2rem; align-self: flex-start; }
.act-formules__note { max-width: 46rem; margin: clamp(2.6rem, 5vw, 3.6rem) auto 0; text-align: center; font-size: .92rem; line-height: 1.66; color: var(--gris-sourd); }

/* ═══ 8. LES RÉALISATIONS : le rail ══════════════════════════════════ */
.act-real__tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.6rem 3rem; }
.act-real__piste {
  --bord: max(var(--marge), calc((100vw - 1480px) / 2));
  display: flex; gap: clamp(14px, 1.6vw, 24px); margin: clamp(2.6rem, 5vw, 3.6rem) 0 0; padding: 0 var(--bord);
  list-style: none; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: var(--bord);
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.act-real__piste::-webkit-scrollbar { display: none; }
.act-real__piste.est-tire { scroll-snap-type: none; cursor: grabbing; }
.rc { flex: 0 0 clamp(280px, 34vw, 520px); scroll-snap-align: start; }
.rc__l { display: block; }
.rc__ph { --rapport: 16 / 9; margin: 0; border: 1px solid var(--filet); }
.rc__ph img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--sortie); }
.rc__l:hover .rc__ph img { transform: scale(1.05); }
.rc__i { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem 1rem; margin-top: 1rem; }
.rc__t { font-family: var(--display); font-weight: 700; font-variation-settings: 'wdth' 92; letter-spacing: -.02em; font-size: 1.3rem; color: var(--blanc); }
.rc__m { font: 700 .6rem/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gris-txt); }
.act-real__nav { display: flex; align-items: center; gap: 1rem; margin-top: 2rem; }
.act-real .act-jauge--large { max-width: none; }

/* ═══ 9. LES PORTES ══════════════════════════════════════════════════ */
.portes { display: flex; gap: 12px; height: clamp(360px, 48vh, 500px); margin: clamp(2.6rem, 5vw, 3.6rem) 0 0; padding: 0; list-style: none; }
.portes > li { flex: 1 1 0; min-width: 0; transition: flex-grow .9s var(--sortie), opacity .95s var(--sortie), transform .95s var(--sortie); }
.portes > li:hover, .portes > li:focus-within { flex-grow: 2.3; }
.porte { position: relative; display: block; height: 100%; overflow: hidden; isolation: isolate; border: 1px solid var(--filet); }
.porte { background: radial-gradient(ellipse 70% 55% at 50% 42%, rgb(224 206 146 / .08), transparent 70%), #111113; transition: border-color .5s, background .6s; }
.porte::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(11 11 12 / .95) 0%, rgb(11 11 12 / 0) 42%); }
.porte__ill { position: absolute; left: 50%; top: 42%; width: min(82%, 320px); translate: -50% -50%; transition: transform 1s var(--sortie), filter .8s; filter: saturate(.7) brightness(.85); }
.porte__ill .il { display: block; width: 100%; height: auto; overflow: visible; }
.portes > li:hover .porte, .porte:focus-visible { border-color: var(--filet-or); background: radial-gradient(ellipse 70% 55% at 50% 42%, rgb(224 206 146 / .18), transparent 70%), #111113; }
.portes > li:hover .porte__ill, .porte:focus-visible .porte__ill { transform: scale(1.08); filter: none; }
.porte__n { position: absolute; left: 1.6rem; top: 1.5rem; font: 700 .66rem/1 var(--mono); letter-spacing: .16em; color: var(--or); }
.porte__txt { position: absolute; left: 1.6rem; right: 1.6rem; bottom: 1.6rem; display: flex; flex-direction: column; gap: .8rem; }
.porte__t { font-family: var(--display); font-weight: 800; font-variation-settings: 'wdth' 90; letter-spacing: -.035em; line-height: 1; font-size: clamp(1.8rem, 3vw, 2.8rem); color: var(--blanc); }
.porte__s { max-width: 24rem; font-size: .98rem; line-height: 1.55; color: var(--gris-txt); opacity: 0; transform: translateY(10px); transition: opacity .6s var(--sortie) .1s, transform .8s var(--sortie) .1s; }
.portes > li:hover .porte__s, .porte:focus-visible .porte__s { opacity: 1; transform: none; }
.porte__fl { position: absolute; right: 1.4rem; top: 1.2rem; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--filet-or); color: var(--or); font-size: 1.1rem; transform: rotate(-45deg); transition: transform .6s var(--sortie), background .4s, color .4s; }
.portes > li:hover .porte__fl { transform: none; background: var(--or); color: var(--noir); }

/* ═══ Les illustrations de la page ═══════════════════════════════════
   La palette et l'état de départ des pièces (.il, .il-pop, .il-trace…)
   viennent du bloc 31 de style.css. Ici : QUAND elles s'animent (la
   scène active, la carte entrée dans l'écran), et les quatre gestes
   propres à cette page. */
.il .il-barre { transform: scaleY(0); transform-origin: 50% 100%; }
.il .il-coeur { opacity: 0; }
.il .il-flux { fill: none; stroke: var(--il-trait); stroke-width: 2.4; stroke-dasharray: 3 8; stroke-linecap: round; }
.il .il-o2 { fill: var(--il-or2); }   /* l'or profond : la classe courte de certaines illustrations */
.il .il-vieux { stroke: #6E6B65; }
.il .il-f.il-vieux { fill: #19191B; }
.il .il-lentille { fill: rgb(224 206 146 / .1); stroke: none; }
.il .il-epais { stroke-width: 5; }
.il .il-manche { stroke-width: 10; stroke: var(--il-or2); }
.il .il-reflet { stroke: var(--il-or-clair); stroke-width: 2.6; }
.il .il-fleche { stroke: var(--il-or-clair); stroke-width: 4; }
@keyframes il-barre { to { transform: none; } }
@keyframes il-led { 0%, 100% { opacity: 1; } 45% { opacity: 1; } 50% { opacity: .15; } 60% { opacity: 1; } }
@keyframes il-coeur { 0% { opacity: 0; transform: translateY(20px) scale(.6); } 15% { opacity: 1; transform: translateY(0) scale(1); } 80% { opacity: .8; } 100% { opacity: 0; transform: translateY(-70px) scale(.9); } }
@keyframes il-flux { to { stroke-dashoffset: -22; } }
@keyframes il-badge { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }

:is(.act-scene__ill.est-active, .act-pr.est-active .act-pr__ill.est-vu, .portes > li.est-vu) .il-pop { animation: il-pop .8s var(--ressort) calc(var(--i, 0) * 95ms) both; }
:is(.act-scene__ill.est-active, .act-pr.est-active .act-pr__ill.est-vu, .portes > li.est-vu) .il-trace { animation: il-trace 1.3s cubic-bezier(.3, 0, .2, 1) 650ms both; }
:is(.act-scene__ill.est-active, .act-pr.est-active .act-pr__ill.est-vu, .portes > li.est-vu) .il-barre { animation: il-barre 1s var(--ressort) calc(var(--i, 0) * 110ms) both; }
:is(.act-scene__ill.est-active, .act-pr.est-active .act-pr__ill.est-vu, .portes > li.est-vu) .il-flotte { animation: il-pop .8s var(--ressort) calc(var(--i, 0) * 95ms) both, il-flotte 4.6s ease-in-out 1.4s infinite; }
:is(.act-scene__ill.est-active, .act-pr.est-active .act-pr__ill.est-vu, .portes > li.est-vu) .il-fusee { animation: il-pop .8s var(--ressort) calc(var(--i, 0) * 95ms) both, il-fusee 3.2s ease-in-out 1.2s infinite; }
:is(.act-scene__ill.est-active, .act-pr.est-active .act-pr__ill.est-vu, .portes > li.est-vu) .il-flamme { transform-origin: 50% 0; animation: il-flamme .28s ease-in-out 1s infinite; }
:is(.act-scene__ill.est-active, .act-pr.est-active .act-pr__ill.est-vu, .portes > li.est-vu) .il-curseur { animation: il-pop .8s var(--ressort) calc(var(--i, 0) * 95ms) both, il-clic 2.2s ease-in-out 1.8s infinite; }
:is(.act-scene__ill.est-active, .act-pr.est-active .act-pr__ill.est-vu, .portes > li.est-vu) .il-eclats { animation: il-pop .8s var(--ressort) calc(var(--i, 0) * 95ms) both, il-eclats 2.6s ease-in-out 1.6s infinite; }
:is(.act-scene__ill.est-active, .act-pr.est-active .act-pr__ill.est-vu, .portes > li.est-vu) .il-badge { animation: il-pop .8s var(--ressort) calc(var(--i, 0) * 95ms) both, il-badge 2s ease-in-out 1.8s infinite; }
:is(.act-scene__ill.est-active, .act-pr.est-active .act-pr__ill.est-vu, .portes > li.est-vu) .il-led { animation: il-led 1.6s steps(1, end) var(--d, 0s) infinite; }
:is(.act-scene__ill.est-active, .act-pr.est-active .act-pr__ill.est-vu, .portes > li.est-vu) .il-coeur { animation: il-coeur 3.4s ease-out var(--d, 0s) infinite; }
:is(.act-scene__ill.est-active, .act-pr.est-active .act-pr__ill.est-vu, .portes > li.est-vu) .il-flux { animation: il-flux 1.1s linear infinite; }
:is(.act-scene__ill.est-active, .act-pr.est-active .act-pr__ill.est-vu, .portes > li.est-vu) .il-flux--inverse { animation-direction: reverse; }
/* les gestes des illustrations de l'accueil (store, feuille qui sort,
   enseigne, feuillage, crayon) : leurs clés sont dans style.css, bloc 31 */
:is(.act-scene__ill.est-active, .act-pr.est-active .act-pr__ill.est-vu, .portes > li.est-vu) .il-store { animation: il-store .9s var(--sortie) 380ms both; }
:is(.act-scene__ill.est-active, .act-pr.est-active .act-pr__ill.est-vu, .portes > li.est-vu) .il-sort { animation: il-sort 1.4s cubic-bezier(.3, 0, .15, 1) 900ms both; }
:is(.act-scene__ill.est-active, .act-pr.est-active .act-pr__ill.est-vu, .portes > li.est-vu) .il-enseigne { animation: il-allume 1.4s steps(1, end) 900ms both; }
:is(.act-scene__ill.est-active, .act-pr.est-active .act-pr__ill.est-vu, .portes > li.est-vu) .il-feuilles { transform-origin: 70px 272px; transform-box: view-box; animation: il-feuilles 3.8s ease-in-out 1.4s infinite; }
:is(.act-scene__ill.est-active, .act-pr.est-active .act-pr__ill.est-vu, .portes > li.est-vu) .il-crayon { animation: il-pop .8s var(--ressort) calc(var(--i, 0) * 95ms) both, il-crayon 2.4s ease-in-out 1.6s infinite; }

/* ═══ ÉTROIT (< 900 px) : rien ne s'allonge ══════════════════════════ */
@media (max-width: 899px) {
  .act { --act-pad: clamp(4.6rem, 16vw, 6rem); }

  /* l'en-tête : le film en haut, sous la barre ; le texte ensuite, sur le noir */
  .act-hero { --film-h: min(72vw, 420px); min-height: 0; align-items: flex-start; padding-top: calc(var(--bar-h) + var(--film-h) + 1.4rem); padding-bottom: 3.6rem; }
  .act-hero__voile { background: linear-gradient(to bottom, rgb(11 11 12 / .6) 0, rgb(11 11 12 / 0) calc(var(--bar-h) + 8px), rgb(11 11 12 / 0) calc(var(--bar-h) + var(--film-h) * .78), var(--noir) calc(var(--bar-h) + var(--film-h) * 1.06)); }
  .hf { left: 0; right: 0; bottom: auto; height: var(--film-h); }
  .act-h1__k { font-size: .62rem; margin-bottom: 1rem; }
  .act-h1__g { font-size: clamp(2.4rem, 11vw, 3.4rem); }
  .act-hero__chapo { font-size: 1rem; }
  .act-cles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
  .act-cles b { font-size: 1.5rem; }
  .act-cles span { font-size: .72rem; }
  .act-hero__suite { display: none; }

  /* les rails : un geste commun à toutes les sections qui glissent */
  .act-rail { display: flex; }
  .act-presta__liste, .tl__liste, .act-ia__cartes, .act-formules__liste {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--marge)); padding-inline: var(--marge); scroll-padding-inline: var(--marge);
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .act-presta__liste::-webkit-scrollbar, .tl__liste::-webkit-scrollbar, .act-ia__cartes::-webkit-scrollbar, .act-formules__liste::-webkit-scrollbar { display: none; }
  .act-rail-nav { display: flex; }

  /* situation : les choix en ruban, la réponse dessous */
  .act-besoins__jeu { grid-template-columns: 1fr; gap: 1.2rem; margin-top: 2.2rem; }
  .act-choix { display: flex; gap: .5rem; overflow-x: auto; margin-inline: calc(-1 * var(--marge)); padding: .2rem var(--marge) .4rem; scrollbar-width: none; }
  .act-choix::-webkit-scrollbar { display: none; }
  .act-choix li { flex: none; }
  .act-choix__b { padding: .85rem 1rem; font-size: .9rem; white-space: nowrap; }
  .act-choix__b:hover, .act-choix__b[aria-pressed="true"] { transform: none; }
  .act-choix__o { width: 14px; height: 14px; }
  .act-choix__o::after { inset: 2px; }
  .act-reponse { padding: 1.6rem 1.4rem; }
  .act-reponse__r h3 { font-size: 1.9rem; }
  .act-reponse__actions { padding-top: 1.6rem; }

  /* prestations : le grand écran, couché. Pas de cadre : chaque
     prestation garde son illustration sur son halo, son grand numéro au
     trait derrière, puis le texte. Celle qui est à l'accroche du rail est
     active (activite.js) : son texte s'allume, son illustration se
     dessine ; les voisines attendent, à peine visibles, comme en grand
     écran. */
  .act-presta__grille { display: block; margin-top: 1.4rem; }
  .act-scene { display: none; }
  .act-presta__liste { gap: 28px; }
  .act-pr { flex: 0 0 84%; scroll-snap-align: start; min-height: 0 !important; padding: 2.2rem 0 .4rem; border: 0; justify-content: flex-start; }
  .act-pr__ill { display: block; position: relative; aspect-ratio: 4 / 3; margin: 0 0 1.9rem; }
  .act-pr__halo { position: absolute; inset: -12%; border-radius: 50%; background: radial-gradient(closest-side, rgb(224 206 146 / .13), rgb(224 206 146 / .04) 55%, transparent 72%); }
  .act-pr.est-active .act-pr__halo { animation: act-halo 9s ease-in-out infinite; }
  .act-pr__num {
    position: absolute; left: -2%; top: -15%; font: 800 clamp(6rem, 31vw, 9.5rem)/1 var(--display); letter-spacing: -.06em;
    color: transparent; -webkit-text-stroke: 1px rgb(224 206 146 / .3); pointer-events: none;
  }
  .act-pr__ill .il { position: relative; width: 100%; height: 100%; overflow: visible; display: block; }
  .act-pr__t { font-size: 1.9rem; }
  .act-pr__a { font-size: 1.15rem; }
  .act-pr__p { font-size: .96rem; }
  .act-pr__tags { margin-top: 1.3rem; }
  .act-pr__ill[data-vu] { opacity: 1; transform: none; }

  /* la frise, couchée : la ligne en haut, les étapes dessous, on glisse */
  .tl { margin-top: 2.4rem; }
  .tl__axe { left: 0; right: 0; top: 23px; bottom: auto; width: auto; height: 2px; margin: 0; }
  .tl__rempli { height: 100%; width: calc(var(--p) * 100%); }
  .tl__curseur { display: none; }
  .tl__e { flex: 0 0 80%; scroll-snap-align: start; display: flex; flex-direction: column; align-items: flex-start; padding: 0 1rem 0 0; }
  .tl__noeud { order: -1; margin-bottom: 1.4rem; justify-self: auto; }
  .tl__g, .tl__d, .tl__e:nth-child(even) .tl__g, .tl__e:nth-child(even) .tl__d { grid-column: auto; text-align: left; padding: 0; transform: none; opacity: .4; }
  .tl__e.est-atteinte .tl__g, .tl__e.est-atteinte .tl__d { opacity: 1; }
  .tl__e:nth-child(even) .tl__d p { margin-left: 0; }
  .tl__e:nth-child(even) .tl__d ul { align-items: flex-start; }
  .tl__n { font-size: 2.6rem; }
  .tl__g h3 { font-size: 1.4rem; }
  .tl__delai { margin-top: .7rem; }
  .tl__d { margin-top: 1rem; }
  .tl__d p { font-size: .96rem; }

  /* les engagements : des tuiles qui se déplient, une à la fois */
  .act-eng { margin-top: 4.4rem; }
  .act-eng__t { text-align: left; font-size: 1.8rem; }
  .act-eng__grille { grid-template-columns: 1fr; gap: 8px; margin-top: 1.8rem; }
  .eng { perspective: none; }
  .eng__b { height: auto; transform: none !important; transform-style: flat; border: 1px solid var(--filet); background: rgb(21 21 23 / .82); }
  .eng__face { position: static; -webkit-backface-visibility: visible; backface-visibility: visible; border: 0; background: none; }
  .eng__face--av { flex-direction: row; align-items: center; justify-content: flex-start; gap: 1rem; padding: .9rem 1.1rem; text-align: left; }
  .eng__rond { width: 50px; height: 50px; }
  .eng__p { width: 28px; height: 28px; stroke-width: 1.35; }
  .eng__t { font-size: 1.05rem; padding-right: 2.4rem; max-width: none; }
  .eng__plus { right: 1.1rem; top: 1.65rem; bottom: auto; }
  .eng__face--ar { transform: none; display: grid; grid-template-rows: 0fr; padding: 0 1.1rem; color: var(--gris-txt); transition: grid-template-rows .5s var(--sortie), padding .5s var(--sortie); }
  .eng__txt { overflow: hidden; min-height: 0; font-size: .96rem; }
  .eng__b[aria-expanded="true"] { border-color: var(--filet-or); }
  .eng__b[aria-expanded="true"] .eng__face--ar { grid-template-rows: 1fr; padding-bottom: 1.2rem; }
  .eng__b[aria-expanded="true"] .eng__plus::after { transform: rotate(0deg); }

  /* les outils : cinq colonnes, quatre rangs */
  .act-mur { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 1.8rem; max-width: none; }
  .act-mur--12 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .outil__b { aspect-ratio: 1 / 1; }
  .outil__logo { width: 28px; height: 28px; }
  .outil__nom { bottom: .45rem; font-size: .46rem; letter-spacing: .04em; }
  .outil.est-actif .outil__logo { transform: translateY(-7px) scale(1.05); }
  .act-mur__legende { font-size: .58rem; }
  .outil--large .outil__logo { width: 88%; height: 16px; }
  .act-onglet { gap: .4rem; padding: .85rem .5rem; font-size: .58rem; letter-spacing: .08em; }
  .act-onglet span { display: none; }

  /* l'IA : l'interrupteur sous le titre, les cartes en rail */
  .act-ia__tete { flex-direction: column; align-items: flex-start; gap: 1.6rem; }
  .act-ia__cartes { margin-top: 2rem; }
  .iac { flex: 0 0 78%; scroll-snap-align: start; min-height: 270px; }
  .act-ia__bas { grid-template-columns: 1fr; gap: 2.6rem; margin-top: 3.2rem; }
  .act-gain__n b { font-size: 5.2rem; }
  .act-gain__n em { font-size: 3.6rem; }

  /* les formules : en rail, la plus choisie d'abord visible */
  .act-formules__liste { margin-top: 2.6rem; padding-top: 1rem; }
  .act-formules__liste > li { flex: 0 0 84%; scroll-snap-align: start; }
  .act-formules__note { text-align: left; }

  /* les réalisations */
  .rc { flex-basis: 78vw; }
  .act-real__nav { margin-top: 1.4rem; }

  /* les portes : trois lignes compactes, la photo en couleur */
  .portes { flex-direction: column; height: auto; gap: 8px; margin-top: 2rem; }
  .portes > li, .portes > li:hover { flex: none; }
  .porte { height: 128px; }
  .porte::after { display: none; }
  .porte__ill { left: 1rem; top: 50%; width: 118px; translate: 0 -50%; filter: none; }
  .porte__txt { left: 9.2rem; right: 3.6rem; bottom: auto; top: 50%; translate: 0 -50%; gap: .35rem; }
  .porte__t { font-size: 1.6rem; }
  .porte__s { opacity: 1; transform: none; font-size: .82rem; line-height: 1.4; }
  .porte__n { display: none; }
  .porte__fl { right: 1rem; top: auto; bottom: 1.1rem; width: 40px; height: 40px; transform: none; }
}

/* ═══ Mouvement réduit : tout est posé, rien ne boucle ═══════════════ */
@media (prefers-reduced-motion: reduce) {
  .act-hero__suite span, .act-scene__halo { animation: none; }
  .tl__g, .tl__d { opacity: 1 !important; transform: none !important; }
  .tl__rempli { height: 100%; }
  .act-scene__ill, .act-pr, .act-reponse__r { transition: none; animation: none !important; }
  .act-scene__ill .il *, .act-pr__ill .il * { animation: none !important; }
  .il .il-pop, .il .il-barre, .il .il-coeur { opacity: 1; transform: none; }
  .il .il-trace { stroke-dashoffset: 0; }
  .eng__b, .fm, .porte img, .portes > li, .eng__rond { transition: none; }
  .eng__p > * { animation: none !important; stroke-dashoffset: 0 !important; }
  .act-inter__b { animation: none; }
}