/* =========================================================================
   /projets-amelioration/ : ce que le socle (leanskipper, smart-lp, v2) ne
   fournit pas. Le test, le lecteur de l'agent, le schéma des données, les
   cartes, le simulateur, et la lumière sur les boutons.
   Mouvement : un effet décoratif dure moins de cinq secondes et ne boucle
   qu'au survol. La démonstration de l'agent et les vidéos, plus longues, ont
   leur bouton Pause. Tout s'arrête en mouvement réduit (fin du fichier).
   Sans JavaScript : le <noscript> de la page masque .pa-js, et les blocs que
   projets.js pilote ([data-pret]) se lisent à plat, l'un sous l'autre.
   ========================================================================= */
@property --pa-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.pa { --pa-vert: #5fa878; --pa-jaune: #d9a441; --pa-rouge: #c9603c; --pa-voile: oklch(73% 0.125 83 / 0.07); }
.pa .ls-section-title { max-width: 26ch; }
/* Dans une rangée de hauteurs inégales, chaque bloc garde son contenu en haut. */
.pa :is(.v2-causes li, .ls-calc-stat) { align-content: start; }

/* ---------- Le fil de lecture : une ligne or suit le défilement ------------ */
.pa-progres { position: fixed; inset: 0 0 auto; z-index: 101; height: 2px; background: var(--metal-gold); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }
@supports (animation-timeline: scroll()) { .pa-progres { animation: pa-barre linear both; animation-timeline: scroll(root); } }
@keyframes pa-barre { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- Le héros : la scène du blason, plus courte --------------------- */
.pa-hero { --hero-scroll-height: 220vh; }
@media (max-width: 899px) { .pa-hero { --hero-scroll-height: 180vh; } }
.pa-hero h1 { max-width: 21ch; font-size: clamp(2rem, 4.2vw, 3.5rem); }
.pa-hero .v2-lede { max-width: 52ch; }
.pa-hero .pa-hero-promesse { color: var(--text-primary); }
/* Quatre couches au plus : au-delà, blason-hero.js n'efface pas la dernière tout à fait. */
.pa-hero-textes { display: grid; justify-items: center; gap: inherit; }
.pa-hero-note { margin-top: var(--space-4); font: var(--text-body-sm); color: var(--text-muted); }
.pa-hero .ls-btn--primary { animation: pa-halo 2000ms var(--ease-nautical) 400ms 2; }
@keyframes pa-halo { from { box-shadow: 0 0 0 0 oklch(73% 0.125 83 / 0.5); } to { box-shadow: 0 0 0 18px oklch(73% 0.125 83 / 0); } }
@media (max-width: 560px) { :is(.pa-hero, .pa .ls-cta-done) .v2-long { display: none; } }
@media (max-height: 820px) { .pa-hero-note { display: none; } }
@media (min-width: 721px) and (max-height: 720px) {
  .pa-hero .v2-hero-content { gap: var(--space-4); padding-block: calc(var(--space-16) + var(--space-3)) var(--space-8); }
  .pa-hero h1 { max-width: 26ch; font-size: clamp(2rem, 3.4vw, 2.75rem); }
}
/* Écran bas : la scène ne se déroule plus, le héros s'allonge avec son texte,
   et le texte reste (blason-hero.js l'effacerait au premier défilement). */
@media (max-height: 599px), (max-width: 720px) and (max-height: 699px) {
  .pa-hero, .pa-hero .ls-hero-sticky { height: auto; min-height: 100svh; }
  .pa-hero .ls-hero-sticky { position: relative; overflow: visible; }
  .pa-hero [data-hero-layer] { opacity: 1 !important; transform: none !important; visibility: visible !important; }
  .pa-hero .ls-hero-scrim { opacity: 1 !important; }
}

/* ---------- Les boutons : la lumière passe, sans rebond -------------------- */
.pa .ls-btn { position: relative; isolation: isolate; overflow: hidden; }
.pa .ls-btn:active { scale: 0.98; }
.pa .ls-btn--primary::before, .pa .ls-btn--primary::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
/* Un reflet traverse le bouton or au survol ; il revient sans se montrer. */
.pa .ls-btn--primary::before { background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / 0.55) 50%, transparent 65%); translate: -120% 0; }
.pa .ls-btn--primary:hover::before, .pa .ls-btn--primary:focus-visible::before { translate: 120% 0; transition: translate 900ms var(--ease-nautical); }
/* Un halo suit le pointeur (--gx et --gy viennent de projets.js). */
.pa .ls-btn--primary::after { background: radial-gradient(5rem circle at var(--gx, 50%) var(--gy, 50%), rgb(255 255 255 / 0.45), transparent 70%); opacity: 0; transition: opacity var(--duration-base) var(--ease-nautical); }
.pa .ls-btn--primary:hover::after { opacity: 1; }
/* Le bouton discret : un point de lumière fait le tour du cadre au survol. */
.pa .ls-btn--ghost, .pa .ls-btn--ghost:hover { border-color: transparent; background: linear-gradient(var(--ink-950), var(--ink-950)) padding-box, conic-gradient(from var(--pa-angle, 0deg), var(--border-strong) 0 62%, var(--gold-300) 80%, var(--border-strong) 100%) border-box; }
@media (hover: hover) { .pa .ls-btn--ghost:hover, .pa .ls-btn--ghost:focus-visible { animation: pa-tour 2400ms linear infinite; } }
@keyframes pa-tour { to { --pa-angle: 360deg; } }
.pa-fleche { flex: none; width: 0.5em; height: 0.5em; border: solid currentColor; border-width: 2px 2px 0 0; rotate: 45deg; transition: translate var(--duration-base) var(--ease-nautical); }
.ls-btn:hover .pa-fleche { translate: 4px 0; }

/* ---------- Les cartes : un halo or suit le pointeur ----------------------- */
.pa-carte { position: relative; isolation: isolate; overflow: hidden; display: grid; align-content: start; gap: var(--space-3); padding: var(--space-6); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-card); box-shadow: var(--shadow-card); transition: border-color var(--duration-base) var(--ease-nautical), translate var(--duration-base) var(--ease-nautical); }
.pa-carte::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(22rem circle at var(--gx, 50%) var(--gy, 0%), oklch(73% 0.125 83 / 0.16), transparent 60%); opacity: 0; transition: opacity var(--duration-base) var(--ease-nautical); pointer-events: none; }
.pa-carte:hover { border-color: var(--border-gold); translate: 0 -2px; }
.pa-carte:hover::before { opacity: 1; }
.pa-carte h3 { font: 500 1.1875rem/1.35 var(--font-display); }
.pa-carte p, .pa-carte li { color: var(--text-secondary); }
.pa-carte .pa-carte-note { font: var(--text-body-sm); color: var(--text-muted); }
.pa-carte ul { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.pa-carte li { position: relative; padding-left: var(--space-5); }
.pa-carte li::before { content: ''; position: absolute; left: 0; top: 0.75em; width: 10px; height: 1px; background: var(--accent-primary); }
.pa-carte .ls-badge { justify-self: start; }

/* ---------- L'entrée en cascade : chaque élément après le précédent -------- */
:is(.pa-cascade, .pa-criteres, .pa-8d, .pa-fil) > :nth-child(2) { --i: 1; }
:is(.pa-cascade, .pa-criteres, .pa-8d, .pa-fil) > :nth-child(3) { --i: 2; }
:is(.pa-cascade, .pa-criteres, .pa-8d, .pa-fil) > :nth-child(4) { --i: 3; }
:is(.pa-cascade, .pa-criteres, .pa-8d, .pa-fil) > :nth-child(5) { --i: 4; }
:is(.pa-cascade, .pa-criteres, .pa-8d, .pa-fil) > :nth-child(6) { --i: 5; }
:is(.pa-cascade, .pa-criteres, .pa-8d, .pa-fil) > :nth-child(7) { --i: 6; }
:is(.pa-cascade, .pa-criteres, .pa-8d, .pa-fil) > :nth-child(8) { --i: 7; }
.pa-cascade.is-visible > *, [data-vu] [data-actif] :is(.pa-criteres, .pa-8d, .pa-fil) > * { animation: pa-monte var(--duration-slow) var(--ease-nautical) backwards; animation-delay: calc(var(--i, 0) * 90ms); }
@keyframes pa-monte { from { opacity: 0; translate: 0 14px; } }

/* ---------- Le test : six cases, un verdict en trois couleurs -------------- */
.pa-test { display: grid; gap: var(--space-8) var(--space-12); align-items: start; }
@media (min-width: 900px) { .pa-test { grid-template-columns: 1.35fr 1fr; } }
.pa-test-liste { min-width: 0; margin: 0; padding: 0; border: 0; }
.pa-coche { display: flex; align-items: center; gap: var(--space-4); min-height: 60px; padding: var(--space-3) 0; border-top: 1px solid var(--border-subtle); color: var(--text-secondary); cursor: pointer; transition: color var(--duration-base) var(--ease-nautical); }
.pa-test-liste .pa-coche:last-child { border-bottom: 1px solid var(--border-subtle); }
.pa-coche:hover, .pa-coche:has(:checked) { color: var(--text-primary); }
.pa-coche input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--gold-500); cursor: pointer; }
.pa-verdict { display: grid; gap: var(--space-4); padding: var(--space-8) var(--space-6); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-card); box-shadow: var(--shadow-card); transition: border-color var(--duration-slow) var(--ease-nautical); }
.pa-verdict[data-etat='vert'] { border-color: var(--pa-vert); }
.pa-verdict[data-etat='jaune'] { border-color: var(--pa-jaune); }
.pa-verdict[data-etat='rouge'] { border-color: var(--pa-rouge); }
.pa-verdict h3 { font: var(--text-display-sm); }
.pa-verdict p { color: var(--text-secondary); }
.pa-verdict [data-test-cas] { display: grid; gap: var(--space-3); }
.pa-verdict .ls-btn { justify-self: start; }
.pa-verdict-score b { font: var(--text-display-md); color: var(--text-primary); font-variant-numeric: tabular-nums; }
.pa-verdict-plage { font: var(--text-mono-sm); letter-spacing: var(--tracking-label); text-transform: uppercase; }
/* Les trois feux : une forme et une couleur par verdict, comme sur le tableau. */
.pa-andon { display: flex; align-items: center; gap: var(--space-4); }
.pa-andon i { width: 26px; height: 26px; background: currentColor; opacity: 0.22; transition: opacity var(--duration-slow) var(--ease-nautical), filter var(--duration-slow) var(--ease-nautical); }
.pa-andon [data-feu='vert'] { color: var(--pa-vert); border-radius: 50%; }
.pa-andon [data-feu='jaune'] { color: var(--pa-jaune); clip-path: polygon(50% 4%, 100% 96%, 0 96%); }
.pa-andon [data-feu='rouge'] { color: var(--pa-rouge); }
[data-etat='vert'] [data-feu='vert'], [data-etat='jaune'] [data-feu='jaune'], [data-etat='rouge'] [data-feu='rouge'] { opacity: 1; filter: drop-shadow(0 0 10px currentColor); }
[data-pret] :is([data-test-cas], .pa-verdict-plage) { display: none; }
[data-pret] [data-etat='attente'] [data-test-cas='attente'], [data-pret] [data-etat='rouge'] [data-test-cas='rouge'], [data-pret] [data-etat='jaune'] [data-test-cas='jaune'], [data-pret] [data-etat='vert'] [data-test-cas='vert'] { display: grid; }

/* ---------- Le coût des réunions, la comparaison effort et résultat -------- */
.pa-champs { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); align-items: end; }
.pa-formule { font: var(--text-mono-sm); letter-spacing: 0.04em; color: var(--text-muted); }
.pa-compare { overflow-x: auto; margin-bottom: var(--space-10); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-card); }
.pa-compare table { width: 100%; min-width: 620px; border-collapse: collapse; }
.pa-compare caption { padding: var(--space-5) var(--space-6); text-align: left; font: var(--text-mono-sm); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent-primary); }
.pa-compare :is(th, td) { padding: var(--space-4) var(--space-6); border-top: 1px solid var(--border-subtle); text-align: left; vertical-align: top; }
.pa-compare thead th { font: var(--text-mono-sm); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); }
.pa-compare tbody th { font: 500 1.0625rem/1.4 var(--font-display); }
.pa-compare td { color: var(--text-secondary); }
.pa-compare :is(td, thead th):last-child { background: var(--pa-voile); color: var(--text-primary); }
/* Au téléphone, chaque projet s'empile, l'effort puis le résultat : rien ne défile de côté. */
@media (max-width: 700px) {
  .pa-compare table { min-width: 0; }
  .pa-compare thead { display: none; }
  .pa-compare :is(table, caption, tbody, tr, th, td) { display: block; }
  .pa-compare td { padding-top: 0; border-top: 0; }
  .pa-compare td:last-child { padding-top: var(--space-4); }
  .pa-compare td::before { content: "L'effort"; display: block; font: var(--text-mono-sm); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); }
  .pa-compare td:last-child::before { content: 'Le résultat'; color: var(--accent-primary); }
}

/* ---------- La démo : la règle 1, 10, 100, 1000 et les trois vidéos -------- */
.pa-temps b { font: var(--text-display-md); font-variant-numeric: tabular-nums; background: var(--metal-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pa-clips { display: grid; gap: var(--space-8); margin-bottom: var(--space-12); }
@media (min-width: 900px) { .pa-clips { grid-template-columns: 1fr 1fr; } .pa-clip--large { grid-column: 1 / -1; } }
.pa-clip { display: grid; align-content: start; gap: var(--space-4); margin: 0; }
.pa-clip video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: #05070c; box-shadow: 0 36px 70px -34px rgb(1 6 18 / 0.95); }
.pa-clip figcaption { display: grid; gap: var(--space-2); }
.pa-clip figcaption b { font: var(--text-display-sm); }
.pa-clip figcaption span:last-child { max-width: 72ch; color: var(--text-secondary); }

/* ---------- Le lecteur de l'agent : quatre temps, une vue à la fois -------- */
.pa-agent { border: 1px solid var(--border-gold); border-radius: var(--radius-lg); background: var(--surface-panel); box-shadow: var(--shadow-card); overflow: hidden; }
.pa-agent > * { min-width: 0; }
.pa-agent-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 60px; padding: var(--space-3) var(--space-6); border-bottom: 1px solid var(--border-subtle); }
.pa-agent-pause { min-height: 36px; padding: 0 var(--space-4); border: 1px solid var(--border-strong); border-radius: var(--radius-full); background: transparent; color: var(--text-secondary); font: var(--text-mono-sm); letter-spacing: var(--tracking-label); text-transform: uppercase; cursor: pointer; transition: border-color var(--duration-base) var(--ease-nautical), color var(--duration-base) var(--ease-nautical); }
.pa-agent-pause:hover { border-color: var(--border-gold); color: var(--accent-primary); }
.pa-agent-etapes { display: flex; overflow-x: auto; scroll-behavior: smooth; border-bottom: 1px solid var(--border-subtle); }
.pa-agent-etapes button { position: relative; flex: 1 0 auto; display: flex; align-items: center; gap: var(--space-3); min-height: 56px; padding: var(--space-3) var(--space-5); border: 0; background: transparent; color: var(--text-muted); font: 500 0.9375rem/1.3 var(--font-body); white-space: nowrap; cursor: pointer; transition: color var(--duration-base) var(--ease-nautical); }
.pa-agent-etapes button:hover, .pa-agent-etapes [aria-selected='true'] { color: var(--text-primary); }
.pa-agent-etapes b { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid currentColor; border-radius: 50%; font: var(--text-mono-sm); }
.pa-agent-etapes [aria-selected='true'] b { border-color: transparent; background: var(--metal-gold); color: var(--text-on-gold); }
/* Sous l'onglet actif, un trait ; en lecture automatique, il se remplit le temps de l'étape. */
.pa-agent-etapes button::after { content: ''; position: absolute; inset: auto 0 0; height: 2px; background: var(--accent-primary); transform: scaleX(0); transform-origin: 0 50%; }
.pa-agent-etapes [aria-selected='true']::after { transform: scaleX(1); }
[data-auto] .pa-agent-etapes [aria-selected='true']::after { animation: pa-barre var(--pa-duree, 8s) linear both; }
/* La bande défile et le lecteur coupe ce qui dépasse : le contour du focus se trace en dedans. */
.pa-agent-etapes button:focus-visible, .pa-agent-vue:focus-visible { outline-offset: -3px; }
.pa-agent-vue { display: grid; align-content: start; gap: var(--space-5); padding: var(--space-8) var(--space-6); }
.pa-agent-vue + .pa-agent-vue { border-top: 1px solid var(--border-subtle); }
.pa-agent-vue > h3 { font: var(--text-display-sm); }
/* Avec le script : les quatre vues partagent la même case, la plus haute donne
   la hauteur, et rien ne saute sous le lecteur quand l'étape change. */
.pa-agent[data-pret] { display: grid; }
[data-pret] > .pa-agent-vue { grid-area: 3 / 1; border-top: 0; }
[data-pret] > .pa-agent-vue:not([data-actif]) { visibility: hidden; }
[data-pret] > .pa-agent-vue > h3 { display: none; }
[data-vu] [data-actif] .pa-agent-corps { animation: pa-monte var(--duration-slow) var(--ease-nautical) backwards; }
.pa-agent-corps { display: grid; gap: var(--space-6); }
@media (min-width: 820px) { .pa-agent-corps { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } .pa-agent-corps > :not(.pa-tache, .pa-note) { grid-column: 1 / -1; } }
.pa-tache { display: grid; gap: var(--space-3); padding: var(--space-5) var(--space-6); border: 1px dashed var(--border-strong); border-radius: var(--radius-md); background: var(--surface-card); }
.pa-tache--or { border: 1px solid var(--border-gold); }
.pa-tache-texte { font: 500 clamp(1.125rem, 1.6vw, 1.375rem)/1.4 var(--font-display); }
.pa-tache-meta { font: var(--text-mono-sm); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ember-300); }
/* La note : un anneau qui se remplit, le chiffre au centre. */
.pa-note { position: relative; display: grid; place-items: center; justify-self: center; width: 132px; height: 132px; }
.pa-note svg { position: absolute; inset: 0; rotate: -90deg; }
.pa-note circle { fill: none; stroke: var(--border-subtle); stroke-width: 8; }
.pa-note .pa-note-arc { stroke-linecap: round; stroke-dasharray: 100; }
.pa-note--rouge .pa-note-arc { stroke: var(--pa-rouge); stroke-dashoffset: 90; }
.pa-note--vert .pa-note-arc { stroke: var(--pa-vert); stroke-dashoffset: 0; }
[data-vu] [data-actif] .pa-note-arc { animation: pa-anneau var(--duration-ritual) var(--ease-nautical) backwards; }
@keyframes pa-anneau { from { stroke-dashoffset: 100; } }
.pa-note p { text-align: center; font: var(--text-mono-sm); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); }
.pa-note b { display: block; font: 600 2.5rem/1 var(--font-display); letter-spacing: 0; color: var(--text-primary); }
.pa-criteres, .pa-8d, .pa-fil { display: grid; margin: 0; padding: 0; list-style: none; }
.pa-criteres li { display: grid; grid-template-columns: 1fr auto; gap: var(--space-1) var(--space-4); padding: var(--space-3) 0; border-top: 1px solid var(--border-subtle); }
.pa-criteres span { font-weight: 500; }
.pa-criteres b { font: var(--text-mono-md); color: var(--ember-300); white-space: nowrap; }
.pa-criteres li:last-child b { color: var(--pa-jaune); }
.pa-criteres small { grid-column: 1 / -1; font: var(--text-body-sm); color: var(--text-secondary); }
.pa-question { display: grid; gap: var(--space-2); padding: var(--space-4) var(--space-5); border-left: 3px solid var(--accent-primary); border-radius: 0 var(--radius-md) var(--radius-md) 0; background: var(--pa-voile); }
.pa-question p:last-child { font: 500 1.125rem/1.4 var(--font-display); }
.pa-agent-texte { max-width: 70ch; color: var(--text-secondary); }
.pa-agent-regle { font: var(--text-body-sm); color: var(--text-muted); }
.pa-8d { gap: var(--space-2); grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }
.pa-8d li { display: flex; align-items: center; gap: var(--space-3); min-height: 48px; padding: var(--space-2) var(--space-4); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); font: var(--text-body-sm); color: var(--text-secondary); }
.pa-8d b { font: var(--text-mono-md); color: var(--text-muted); }
.pa-8d .pa-8d-ici { border-color: var(--border-gold); background: var(--pa-voile); color: var(--text-primary); }
.pa-8d-ici b { color: var(--accent-primary); }
.pa-fil { gap: var(--space-6); }
.pa-fil li { display: grid; grid-template-columns: 7rem 1fr; gap: var(--space-2) var(--space-4); padding-left: var(--space-5); border-left: 2px solid var(--border-gold); }
.pa-fil b { font: var(--text-mono-md); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent-primary); }
.pa-fil p { color: var(--text-secondary); }
@media (max-width: 560px) { .pa-fil li { grid-template-columns: 1fr; } .pa-agent-vue { padding: var(--space-6) var(--space-4); } }
.pa-repere { max-width: 76ch; margin-top: var(--space-6); font: var(--text-body-sm); color: var(--text-muted); }

/* ---------- Vos données : les sources, le tableau, l'agent ----------------- */
.pa-flux { --de: -100% 0; --a: 100% 0; display: grid; align-items: center; gap: var(--space-4); margin-bottom: var(--space-12); padding: var(--space-8) var(--space-6); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-panel); }
@media (min-width: 900px) { .pa-flux { grid-template-columns: 1.3fr 0.5fr 1fr 0.5fr 1fr; } }
.pa-flux-sources { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.pa-flux-sources li { padding: var(--space-2) var(--space-3); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font: var(--text-mono-sm); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-secondary); }
.pa-flux-noeud { display: grid; gap: var(--space-1); padding: var(--space-5); border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface-card); text-align: center; }
.pa-flux-noeud b { font: var(--text-display-sm); }
.pa-flux-noeud span { font: var(--text-body-sm); color: var(--text-secondary); }
.pa-flux-noeud--or { border-color: var(--border-gold); box-shadow: var(--glow-gold); }
/* Le lien : un trait, et une lumière qui le parcourt trois fois à l'arrivée. */
.pa-flux-lien { position: relative; height: 2px; background: var(--border-strong); overflow: hidden; }
.pa-flux-lien::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--gold-300), transparent); translate: var(--de); }
.pa-flux.is-visible .pa-flux-lien::after { animation: pa-file 1400ms var(--ease-nautical) 3; }
@media (hover: hover) { .pa-flux:hover .pa-flux-lien::after { animation: pa-file 1400ms linear infinite; } }
@keyframes pa-file { to { translate: var(--a); } }
@media (max-width: 899px) { .pa-flux { --de: 0 -100%; --a: 0 100%; } .pa-flux-lien { justify-self: center; width: 2px; height: var(--space-8); } .pa-flux-lien::after { background: linear-gradient(180deg, transparent, var(--gold-300), transparent); } }
.pa-lectures, .pa-cas, .pa-prix { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(min(17.5rem, 100%), 1fr)); }
.pa-graphe { width: 100%; height: auto; margin-bottom: var(--space-2); }
.pa-graphe path { fill: none; stroke-width: 1.5; }
.pa-graphe-axe { stroke: var(--border-strong); }
.pa-graphe-limite { stroke: var(--pa-rouge); stroke-dasharray: 4 4; }
.pa-graphe-trait { stroke: var(--gold-400); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.pa-graphe .pa-graphe-zone { fill: var(--pa-rouge); fill-opacity: 0.55; stroke: none; }
.pa-graphe-points { fill: var(--fog-300); }
.pa-graphe-points--alerte { fill: var(--pa-jaune); }
.pa-lectures.is-visible .pa-graphe-trait { animation: pa-trace 1600ms var(--ease-nautical) 300ms backwards; }
@keyframes pa-trace { from { stroke-dashoffset: 1; } }

/* ---------- L'offre et les tarifs : cas floutés, niveaux, simulateur ------- */
@media (min-width: 600px) { .pa-cas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .pa-cas { grid-template-columns: repeat(4, 1fr); } }
.pa-cas figure { position: relative; margin: calc(var(--space-6) * -1) calc(var(--space-6) * -1) var(--space-2); border-bottom: 1px solid var(--border-subtle); overflow: hidden; }
.pa-cas img { width: 100%; height: auto; transition: scale var(--duration-slow) var(--ease-nautical); }
.pa-cas .pa-carte:hover img { scale: 1.04; }
.pa-cas figcaption { position: absolute; top: var(--space-3); right: var(--space-3); padding: 2px var(--space-3); border: 1px solid var(--gold-600); border-radius: var(--radius-full); background: var(--ink-950); font: var(--text-mono-sm); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--gold-300); }
.pa-prix { margin-bottom: var(--space-12); }
.pa-prix .pa-carte { gap: var(--space-4); padding: var(--space-8) var(--space-6); }
.pa-prix h3 { font: var(--text-display-md); }
.pa-prix :is(.pa-prix-ligne, .pa-prix-offre) b { font: 600 2rem/1 var(--font-display); color: var(--text-primary); white-space: nowrap; }
.pa-prix .pa-prix-offre { padding: var(--space-3) var(--space-4); border: 1px solid var(--border-gold); border-radius: var(--radius-md); background: var(--pa-voile); color: var(--text-primary); }
/* Le niveau mis en avant : un faisceau fait deux fois le tour du cadre, puis s'éteint. */
.pa-carte--phare { border-color: var(--border-gold); }
.pa-carte--phare::after { content: ''; position: absolute; inset: 0; z-index: -1; padding: 2px; border-radius: inherit; background: conic-gradient(from var(--pa-angle, 0deg), transparent 0 72%, var(--gold-300) 88%, transparent 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box exclude, linear-gradient(#fff 0 0); opacity: 0; pointer-events: none; }
.pa-prix.is-visible .pa-carte--phare::after { animation: pa-faisceau 4500ms linear 500ms; }
@media (hover: hover) { .pa-prix .pa-carte--phare:hover::after { opacity: 1; animation: pa-tour 3000ms linear infinite; } }
@keyframes pa-faisceau { 0% { --pa-angle: 0deg; opacity: 0; } 10%, 85% { opacity: 1; } 100% { --pa-angle: 720deg; opacity: 0; } }
.pa-sim { display: grid; gap: var(--space-8); padding: var(--space-8) var(--space-6); border: 1px solid var(--border-gold); border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--surface-card), transparent 70%); }
@media (min-width: 900px) { .pa-sim { grid-template-columns: 1fr 1.15fr; gap: var(--space-12); padding: var(--space-10); } }
.pa-sim h3 { font: var(--text-display-md); }
.pa-sim-reglages, .pa-sim-resultat { display: grid; align-content: start; gap: var(--space-5); }
.pa-sim .pa-coche { border-block: 1px solid var(--border-subtle); }
.pa-periode { display: flex; flex-wrap: wrap; gap: var(--space-2); min-width: 0; margin: 0; padding: 0; border: 0; }
.pa-periode legend { margin-bottom: var(--space-2); padding: 0; font: var(--text-mono-sm); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); }
.pa-periode label { position: relative; cursor: pointer; }
.pa-periode input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pa-periode span { display: inline-flex; align-items: center; min-height: 54px; padding: 0 var(--space-5); border: 1px solid var(--border-input); border-radius: var(--radius-md); color: var(--text-secondary); transition: border-color var(--duration-base) var(--ease-nautical), color var(--duration-base) var(--ease-nautical); }
.pa-periode input:checked + span { border-color: var(--gold-500); background: var(--pa-voile); color: var(--text-primary); }
.pa-periode input:focus-visible + span { outline: 2px solid var(--gold-400); outline-offset: 3px; }
.pa-sim-prix { color: var(--text-secondary); }
.pa-sim-prix b { margin-right: var(--space-2); font: 600 clamp(2.75rem, 5vw, 3.75rem)/1 var(--font-display); font-variant-numeric: tabular-nums; background: var(--metal-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pa-sim-part { padding-left: var(--space-4); border-left: 3px solid var(--accent-primary); color: var(--text-primary); }
/* L'adresse laissée, « en parler d'abord » n'a plus lieu d'être : le rendez-vous est déjà dans la confirmation. */
.pa [data-lead-done]:not([hidden]) + .ls-cta-book-note { display: none; }
/* Au téléphone, les deux boutons de la confirmation gardent la taille des autres boutons. */
@media (max-width: 560px) { .pa .ls-cta-done .ls-btn { padding-inline: var(--space-5); font: var(--text-mono-md); } }

/* ---------- Mouvement réduit : plus aucune animation sur la page ----------- */
@media (prefers-reduced-motion: reduce) {
  .pa *, .pa *::before, .pa *::after { animation: none !important; scroll-behavior: auto !important; }
  .pa .ls-btn::before, .pa-fleche, .pa-carte, .pa-cas img { transition: none !important; }
}