/* Pontis v2 · creative.css : couche créative. Jetons de mouvement : voir motion.css (--ease-out, --spring, --d-fast…).
   Uniquement transform + opacity pour ce qui bouge. Aucun filter:blur animé, backdrop-filter préfixé -webkit- ailleurs.
   Décoratif : aria-hidden. prefers-reduced-motion : tout est figé ou en fondu. */

/* ---- héros réseau : l'hôte est un calque plein cadre derrière le texte (le texte reste lisible avant toute animation) ---- */
[data-hero-network]{position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden;pointer-events:none;z-index:0}

/* ---- titre cinétique : largeur réservée par le mot le plus long, aucun décalage de mise en page ---- */
.kt{display:inline}
/* texte réel du titre, masqué à l'œil mais lu partout ; inline-block (et non absolu, qui le rendrait « bloc » : innerText y ajouterait un saut de ligne) */
.kt-sr{display:inline-block;width:1px;height:1px;margin:-1px;overflow:hidden;vertical-align:top;white-space:nowrap}
.kt-stack{display:inline-grid;vertical-align:baseline;white-space:nowrap;overflow:hidden;padding:.1em 0;margin:-.1em 0;color:var(--bleu);-webkit-user-select:none;user-select:none}
/* la pile de mots n'a AUCUN nœud texte : le mot vient du contenu CSS (data-w). Le texte réel du titre est .kt-sr ("seule.") */
.kt-w::before{content:attr(data-w)}
.kt-w{grid-area:1/1;opacity:0;transform:translate3d(0,70%,0);transition:transform var(--d-slow,520ms) var(--ease-out,cubic-bezier(.22,1,.36,1)),opacity var(--d-base,280ms) var(--ease-out,cubic-bezier(.22,1,.36,1))}
.kt-w.is-on{opacity:1;transform:none}
.kt-w.is-out{opacity:0;transform:translate3d(0,-70%,0)}

/* ---- spotlight, tilt, magnétisme, soulignement ---- */
[data-spotlight]{position:relative}
[data-spotlight]::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity var(--d-base,280ms) var(--ease-out,cubic-bezier(.22,1,.36,1));background:radial-gradient(280px circle at var(--sx,50%) var(--sy,50%),rgba(43,63,214,.17),rgba(43,63,214,0) 65%)}
[data-spotlight="dark"]::after{background:radial-gradient(260px circle at var(--sx,50%) var(--sy,50%),rgba(255,255,255,.14),rgba(255,255,255,0) 65%)}
[data-spotlight].is-spot::after{opacity:1}
[data-tilt]{transition:transform var(--d-slow,520ms) var(--ease-out,cubic-bezier(.22,1,.36,1))}
[data-tilt].is-tilt{transition:transform var(--d-fast,160ms) var(--ease-out,cubic-bezier(.22,1,.36,1))}
[data-magnetic]{transition:translate var(--d-base,280ms) var(--ease-out,cubic-bezier(.22,1,.36,1)),transform var(--d-fast,160ms) var(--ease-out,cubic-bezier(.22,1,.36,1)),background-color var(--d-fast,160ms),color var(--d-fast,160ms),box-shadow var(--d-base,280ms),border-color var(--d-fast,160ms)}
.u-link{position:relative;text-decoration:none}
.u-link::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;border-radius:var(--pilule);background:currentColor;transform:scaleX(0);transform-origin:100% 50%;transition:transform var(--d-base,280ms) var(--ease-out,cubic-bezier(.22,1,.36,1))}
.u-link:hover::after,.u-link:focus-visible::after{transform:scaleX(1);transform-origin:0 50%}
[dir="rtl"] .u-link::after{transform-origin:0 50%}
[dir="rtl"] .u-link:hover::after,[dir="rtl"] .u-link:focus-visible::after{transform-origin:100% 50%}

/* ---- barre de lecture (créée par creative.js si <body data-read-progress>) ---- */
.m-read{position:fixed;top:0;left:0;right:0;height:3px;z-index:70;pointer-events:none}
.m-read i{display:block;height:100%;background:var(--bleu);transform:scaleX(0);transform-origin:0 50%}
[dir="rtl"] .m-read i{transform-origin:100% 50%}

/* ---- transitions entre pages : fondu court, ne bloque jamais un lien ---- */
html.m-pt body{animation:m-pt-in var(--d-fast,160ms) linear backwards}
html.m-leaving body{opacity:0;transition:opacity var(--d-fast,160ms) linear}
@keyframes m-pt-in{from{opacity:0}to{opacity:1}}

/* ---- fond maillé vivant : [data-mesh="light|dark"] ---- */
[data-mesh]{position:relative;isolation:isolate;overflow:hidden}
[data-mesh]::before{content:"";position:absolute;top:-25%;left:-25%;right:-25%;bottom:-25%;z-index:-2;pointer-events:none;
  background:radial-gradient(38% 42% at 22% 28%,rgba(111,130,242,.30),rgba(111,130,242,0) 70%),radial-gradient(34% 40% at 78% 24%,rgba(18,184,134,.12),rgba(18,184,134,0) 70%),radial-gradient(40% 44% at 70% 78%,rgba(43,63,214,.17),rgba(43,63,214,0) 70%),radial-gradient(30% 36% at 20% 82%,rgba(217,105,43,.09),rgba(217,105,43,0) 70%);
  animation:m-mesh 26s var(--ease-in-out,cubic-bezier(.65,0,.35,1)) infinite alternate}
[data-mesh]::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;z-index:-1;pointer-events:none;opacity:.32;background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%27160%27%20height=%27160%27%3E%3Cfilter%20id=%27n%27%3E%3CfeTurbulence%20type=%27fractalNoise%27%20baseFrequency=%27.85%27%20numOctaves=%272%27%20stitchTiles=%27stitch%27/%3E%3CfeColorMatrix%20values=%270%200%200%200%20.08%200%200%200%200%20.1%200%200%200%200%20.3%200%200%200%20.55%200%27/%3E%3C/filter%3E%3Crect%20width=%27100%25%27%20height=%27100%25%27%20filter=%27url%28%23n%29%27/%3E%3C/svg%3E");background-size:160px 160px}
[data-mesh="dark"]::before{background:radial-gradient(38% 42% at 20% 30%,rgba(43,63,214,.55),rgba(43,63,214,0) 70%),radial-gradient(34% 40% at 80% 22%,rgba(18,184,134,.16),rgba(18,184,134,0) 70%),radial-gradient(40% 44% at 72% 80%,rgba(111,130,242,.28),rgba(111,130,242,0) 70%),radial-gradient(30% 36% at 18% 84%,rgba(217,105,43,.14),rgba(217,105,43,0) 70%)}
[data-mesh="dark"]::after{opacity:.2}
@keyframes m-mesh{0%{transform:translate3d(-3%,-2%,0) rotate(0deg) scale(1)}50%{transform:translate3d(3%,2%,0) rotate(6deg) scale(1.08)}100%{transform:translate3d(-2%,3%,0) rotate(-5deg) scale(1.04)}}

/* ---- marquee des secteurs ---- */
.mq{position:relative;overflow:hidden;padding:10px 0;-webkit-mask-image:linear-gradient(90deg,transparent,var(--nuit) 8%,var(--nuit) 92%,transparent);mask-image:linear-gradient(90deg,transparent,var(--nuit) 8%,var(--nuit) 92%,transparent)}
.mq-lane{display:flex;width:max-content;animation:mq var(--mqd,40s) linear infinite}
.mq-track{display:flex;flex:none;list-style:none;margin:0;padding:0}
.mq-track li{display:inline-flex;align-items:center;margin:0 7px;padding:11px 20px;background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--pilule);font:700 .98rem/1 var(--titre,"Plus Jakarta Sans",system-ui,sans-serif);color:var(--nuit);white-space:nowrap;box-shadow:var(--ombre)}
.mq-track li::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--bleu);margin:0 10px 0 0;flex:none}
[dir="rtl"] .mq-track li::before{margin:0 0 0 10px}
.mq-track li:nth-child(3n+2)::before{background:var(--network)}
.mq-track li:nth-child(3n)::before{background:var(--suite)}
@keyframes mq{to{transform:translate3d(calc(var(--mqs,-1) * 50%),0,0)}}
.mq:hover .mq-lane,.mq:focus-within .mq-lane{animation-play-state:paused}

/* ---- histoire épinglée : isolé, relié, équipé ---- */
.story{position:relative;height:320vh;background:transparent}
.story-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.story-cv{position:absolute;top:0;left:0;width:100%;height:100%;display:block}
.story-caps{position:absolute;left:0;right:0;bottom:0;margin:0;padding:0 0 70px;list-style:none;display:grid}
.story-cap{grid-area:1/1;width:min(1160px,100% - 40px);margin:0 auto;opacity:0;transform:translate3d(0,24px,0);transition:opacity var(--d-slow,520ms) var(--ease-out,cubic-bezier(.22,1,.36,1)),transform var(--d-slow,520ms) var(--ease-out,cubic-bezier(.22,1,.36,1));pointer-events:none}
.story-cap.is-on{opacity:1;transform:none;pointer-events:auto}
.story-cap b{display:block;font:800 clamp(1.8rem,5vw,3rem)/1.1 var(--titre,"Plus Jakarta Sans",system-ui,sans-serif);color:var(--nuit);margin-bottom:8px}
.story-cap span{display:block;max-width:52ch;font-size:1.1rem;color:var(--texte)}
.story-mini{display:none}
.story-prog{position:absolute;left:0;right:0;bottom:28px;width:min(1160px,100% - 40px);margin:0 auto;height:4px;border-radius:var(--pilule);background:var(--ligne)}
.story-prog i{position:absolute;top:0;left:0;right:0;bottom:0;border-radius:var(--pilule);background:var(--bleu);transform:scaleX(0);transform-origin:0 50%}
[dir="rtl"] .story-prog i{transform-origin:100% 50%}
.story-prog span{position:absolute;top:-4px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--blanc);border:2px solid var(--ligne);transition:border-color var(--d-base,280ms),transform var(--d-base,280ms) var(--spring,cubic-bezier(.34,1.56,.64,1))}
.story-prog span:nth-of-type(1){left:0;margin-left:0}.story-prog span:nth-of-type(2){left:50%}.story-prog span:nth-of-type(3){left:100%;margin-left:-12px}
[dir="rtl"] .story-prog span:nth-of-type(1){left:auto;right:0}[dir="rtl"] .story-prog span:nth-of-type(2){left:auto;right:50%;margin-left:0;margin-right:-6px}[dir="rtl"] .story-prog span:nth-of-type(3){left:auto;right:100%;margin-left:0;margin-right:-12px}
.story-prog span.is-on{border-color:var(--bleu);transform:scale(1.25)}
/* sans épinglage : mobile, mouvement réduit, mode faible puissance */
.story.is-flat{height:auto}
.story.is-flat .story-pin{position:relative;height:auto;overflow:visible;padding:40px 0}
.story.is-flat .story-cv,.story.is-flat .story-prog{display:none}
.story.is-flat .story-caps{position:static;display:grid;gap:22px;padding:0;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));width:min(1160px,100% - 40px);margin:0 auto}
.story.is-flat .story-cap{grid-area:auto;width:auto;margin:0;opacity:1;transform:none;background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r-c);padding:18px 18px 24px;box-shadow:var(--ombre)}
.story.is-flat .story-mini{display:block;width:100%;height:auto;aspect-ratio:4/3;margin-bottom:14px;border-radius:var(--r-s);background:var(--brume)}
@supports not (aspect-ratio:4/3){.story.is-flat .story-mini{height:220px}}

/* ---- mode faible puissance et mouvement réduit : on garde les fondus ----
   Les !important de cette fin de feuille sont justifiés : ils doivent l'emporter sur les styles EN LIGNE que creative.js pose (transform, translate : inclinaison, aimant)
   et sur les animations de chaque composant monté, pour le mode faible puissance, la pause (WCAG 2.2.2) et le mouvement réduit. */
.m-lowpower [data-tilt],.m-lowpower [data-magnetic]{transform:none!important;translate:none!important}
.m-lowpower [data-mesh]::before,.m-lowpower .mq-lane{animation-play-state:paused}
/* pause des animations : le mot réel remplace la pile, le reste suit les règles du mouvement réduit */
html.m-paused .kt-stack{display:none}
html.m-paused .kt-sr{display:inline;width:auto;height:auto;margin:0;overflow:visible;white-space:nowrap;color:var(--bleu)}
html.m-paused .mq{-webkit-mask-image:none;mask-image:none;overflow:visible}
html.m-paused .mq-lane{width:auto;flex-wrap:wrap;justify-content:center}html.m-paused .mq-clone{display:none}
html.m-paused [data-tilt],html.m-paused [data-magnetic]{transform:none!important;translate:none!important}
@media (prefers-reduced-motion:reduce){
  [data-mesh]::before,.mq-lane{animation:none!important}
  .mq{-webkit-mask-image:none;mask-image:none;overflow:visible}
  .mq-lane{width:auto;flex-wrap:wrap;justify-content:center}.mq-clone{display:none}
  .kt-w{transition:opacity var(--d-slow,520ms) linear;transform:none!important}
  [data-tilt],[data-magnetic]{transform:none!important;translate:none!important}
  html.m-pt body{animation:none}
  .u-link::after{transition:none}
}