/* ============================================================================
   4W4MI — Couche mouvement
   Séquence d'arrivée, révélations au scroll, parallaxe, curseur, micro-
   interactions. Tout repose sur transform/opacity (composité GPU) et se
   désactive intégralement sous prefers-reduced-motion.
   ============================================================================ */

:root{
  --e-mask:cubic-bezier(.76,0,.24,1);
  --e-soft:cubic-bezier(.33,1,.68,1);
  --t-rev:.82s;
}

/* ------------------------------------------------ 1. RÉVÉLATIONS AU SCROLL */
/* État initial posé par JS (.motion-on) afin que, sans JS, tout reste visible. */
.motion-on [data-reveal]{ opacity:0; }
.motion-on [data-reveal="up"]     { transform:translate3d(0,30px,0); }
.motion-on [data-reveal="down"]   { transform:translate3d(0,-24px,0); }
.motion-on [data-reveal="left"]   { transform:translate3d(-34px,0,0); }
.motion-on [data-reveal="right"]  { transform:translate3d(34px,0,0); }
.motion-on [data-reveal="scale"]  { transform:scale(.965); }
.motion-on [data-reveal="fade"]   { transform:none; }
/* Sur petit écran, la marge latérale est plus étroite que le glissement :
   les entrées latérales deviennent verticales (aucun débordement horizontal). */
@media (max-width:720px){
  .motion-on [data-reveal="left"],
  .motion-on [data-reveal="right"]{ transform:translate3d(0,26px,0); }
}

.motion-on [data-reveal].is-in{
  opacity:1; transform:none;
  transition:opacity var(--t-rev) var(--e-soft) var(--d,0ms),
             transform var(--t-rev) var(--e-out) var(--d,0ms);
}

/* Révélation par masque — pour toute plaque photographique. */
.motion-on [data-reveal="mask"]{ opacity:1; }
.motion-on [data-reveal="mask"] .frame{ clip-path:inset(0 0 101% 0); }
.motion-on [data-reveal="mask"] .frame img{ transform:scale(1.12); }
.motion-on [data-reveal="mask"].is-in .frame{
  clip-path:inset(0 0 0 0);
  transition:clip-path 1.05s var(--e-mask) var(--d,0ms);
}
.motion-on [data-reveal="mask"].is-in .frame img{
  transform:none;
  transition:transform 1.5s var(--e-mask) var(--d,0ms);
}
.frame{ display:block; overflow:hidden; }

/* Révélation ligne par ligne — réservée aux grands titres. */
.lines .line{
  display:block; overflow:hidden;
  padding-bottom:.14em; margin-bottom:-.14em;
}
.motion-on .lines .line > span{ display:block; transform:translate3d(0,112%,0); }
.motion-on .lines.is-in .line > span{
  transform:none;
  transition:transform .95s var(--e-mask) calc(var(--d,0ms) + var(--i,0) * 95ms);
}

/* Entrée en fondu du contenu du Hero — le délai est posé par playIntro (--d).
   Le grand titre garde sa révélation ligne par ligne (pas de translation ici). */
.motion-on [data-in]{ opacity:0; }
.motion-on [data-in]:not(.lines){ transform:translate3d(0,16px,0); }
.motion-on [data-in].is-in{
  opacity:1; transform:none;
  transition:opacity .8s var(--e-out) var(--d,0ms), transform .8s var(--e-out) var(--d,0ms);
}
@media (prefers-reduced-motion:reduce){
  .motion-on [data-in]{ opacity:1!important; transform:none!important; transition:none!important; }
}

/* Barre de filet qui se déploie. */
.motion-on [data-reveal] .rule-4 > i,
.motion-on .rule-4.is-rule > i{ transform:scaleX(0); transform-origin:0 50%; }
.motion-on [data-reveal].is-in .rule-4 > i,
.motion-on .rule-4.is-rule.is-in > i{
  transform:none;
  transition:transform .7s var(--e-mask) calc(var(--d,0ms) + 180ms + var(--ri,0) * 90ms);
}

/* ------------------------------------------------- 2. SÉQUENCE D'ARRIVÉE */
/* Le logo puis le contenu du Hero se mettent en place, vite et sobrement. */
.motion-on .nav__logo,
.motion-on .nav__links a,
.motion-on .nav__end > *{ opacity:0; transform:translate3d(0,-10px,0); }
.motion-on .nav.is-ready .nav__logo,
.motion-on .nav.is-ready .nav__links a,
.motion-on .nav.is-ready .nav__end > *{
  opacity:1; transform:none;
  transition:opacity .6s var(--e-soft) var(--d,0ms), transform .6s var(--e-out) var(--d,0ms);
}

/* ------------------------------------------------------- 3. PARALLAXE */
[data-parallax]{ will-change:transform; }

/* ------------------------------------------------ 4. CURSEUR PERSONNALISÉ */
.has-cursor,
.has-cursor a,
.has-cursor button,
.has-cursor [role="button"]{ cursor:none; }
/* On rend la main aux champs de saisie : le curseur texte y est fonctionnel. */
.has-cursor input,
.has-cursor textarea,
.has-cursor select,
.has-cursor [contenteditable]{ cursor:auto; }

.cursor{
  position:fixed; top:0; left:0; z-index:9999; pointer-events:none;
  opacity:0; transition:opacity .28s var(--e-out);
}
.cursor.is-on{ opacity:1; }
.cursor__ring,
.cursor__dot{
  position:absolute; top:0; left:0; border-radius:50%;
  translate:-50% -50%;
}
.cursor__ring{
  width:36px; height:36px;
  border:1px solid rgb(var(--accent-rgb) / .6);
  background:rgb(var(--accent-rgb) / .05);
  transition:width .3s var(--e-out), height .3s var(--e-out),
             background .3s var(--e-out), border-color .3s var(--e-out);
}
.cursor__dot{
  width:5px; height:5px; background:var(--braise);
  transition:width .25s var(--e-out), height .25s var(--e-out), opacity .25s var(--e-out);
}
.cursor__word{
  position:absolute; top:0; left:0; translate:-50% -50%;
  font-family:var(--sans); font-size:.625rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ivoire);
  opacity:0; scale:.7; transition:opacity .26s var(--e-out), scale .26s var(--e-out);
  white-space:nowrap;
}
/* Survol d'un lien : le cercle se resserre légèrement. */
.cursor.on-link .cursor__ring{ width:26px; height:26px; border-color:rgb(var(--accent-rgb) / .9); }
/* Survol d'un bouton : le cercle s'élargit et se remplit discrètement. */
.cursor.on-button .cursor__ring{ width:54px; height:54px; background:rgb(var(--accent-rgb) / .16); border-color:transparent; }
.cursor.on-button .cursor__dot{ width:0; height:0; }
/* Survol d'une image : le cercle s'ouvre et annonce l'action. */
.cursor.on-media .cursor__ring{ width:78px; height:78px; background:rgb(var(--ink-rgb) / .62); border-color:transparent; }
.cursor.on-media .cursor__dot{ width:0; height:0; }
.cursor.on-media .cursor__word{ opacity:1; scale:1; }
.cursor.is-down .cursor__ring{ scale:.86; }

@media (hover:none),(pointer:coarse){ .cursor{ display:none; } }

/* --------------------------------------------- 5. MICRO-INTERACTIONS */

/* Bandeaux photo : transition du zoom au survol. */
.band > .frame img{ transition:transform 1.1s var(--e-out); }

/* Mur partenaires : la cellule se soulève et le filet se tire. */
.wall__cell{ transition:background var(--t), transform .4s var(--e-out); }
.wall__cell:hover{ transform:translateY(-3px); }

/* Lignes de légende : décalage à l'entrée du curseur. */
.legend__row b,.legend__row span{ transition:transform .45s var(--e-out); }
.legend__row:hover b{ transform:translateX(6px); }
.legend__row:hover span{ transform:translateX(4px); }
.legend__swatch{ transition:transform .45s var(--e-out); }
.legend__row:hover .legend__swatch{ transform:scale(1.45); }

/* Index équipe. */
.team-index a b{ transition:transform .45s var(--e-out); }
.team-index a:hover b{ transform:translateX(6px); }

/* Agenda : la date avance légèrement. */
.agenda__when{ transition:transform .5s var(--e-out); }
.agenda__item:hover .agenda__when{ transform:translateX(5px); }

/* Canaux de contact. */
.channels__mark{ transition:transform .45s var(--e-out), border-color .3s var(--e-out), background .3s var(--e-out); }
.channels__item:hover .channels__mark{ transform:scale(1.08); border-color:var(--ch); }

/* ------------------------------------------------------- 6. COMPTE À REBOURS */
.countdown{ display:flex; flex-wrap:wrap; gap:1.25rem 2rem; margin-top:1.75rem; }
.countdown__cell{ display:flex; flex-direction:column; gap:.4rem; min-width:4.5rem; }
.countdown__num{
  font-family:var(--display); font-size:clamp(1.9rem,4vw,2.9rem); font-weight:500;
  line-height:.9; color:var(--or-300); font-variant-numeric:tabular-nums;
}
.countdown__lbl{
  font-size:.625rem; font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; color:var(--on-deep-3);
}
.countdown__num span{ display:inline-block; }
.countdown__num span.is-tick{ animation:tick .5s var(--e-out); }
@keyframes tick{
  0%{ transform:translateY(-42%); opacity:0; }
  100%{ transform:none; opacity:1; }
}

/* ------------------------------------------- 7. TRANSITIONS DE SECTION */
/* Une couture : un arc repris du sceau assure le passage d'un fond a l'autre.
   Les deux couleurs sont declarees dans le HTML, la couture reste generique. */
.seam{
  position:relative; height:clamp(44px,6.5vw,92px); overflow:hidden;
  pointer-events:none; background:var(--seam-from,var(--bg));
  margin-block:-1px;
}
.seam svg{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.seam path{ fill:var(--seam-to,var(--bg-deep)); }

/* ------------------------------------------------- 8. NAV AU DÉFILEMENT */
.nav{ will-change:height,background; }
.nav.is-stuck{ height:calc(var(--nav-h) - 12px); }
.nav.is-stuck .nav__logo img{ height:clamp(26px,3.4vw,32px); }
.nav__logo img{ transition:height .35s var(--e-out); }
/* Indicateur de progression de lecture. */
.nav__progress{
  position:absolute; left:0; bottom:-1px; height:2px; width:100%;
  transform:scaleX(var(--p,0)); transform-origin:0 50%;
  background:linear-gradient(90deg,var(--violet),var(--bleu),var(--vert),var(--rose));
  opacity:0; transition:opacity .3s var(--e-out);
}
.nav.is-stuck .nav__progress{ opacity:1; }

/* ------------------------------------------- 9. MOUVEMENT RÉDUIT */
@media (prefers-reduced-motion:reduce){
  .motion-on [data-reveal],
  .motion-on .lines .line > span,
  .motion-on .nav__logo,
  .motion-on .nav__links a,
  .motion-on .nav__end > *{ opacity:1!important; transform:none!important; }
  .motion-on [data-reveal="mask"] .frame{ clip-path:none!important; }
  .motion-on [data-reveal="mask"] .frame img{ transform:none!important; }
  .motion-on [data-reveal] .rule-4 > i{ transform:none!important; }
  .cursor{ display:none!important; }
  .has-cursor,.has-cursor a,.has-cursor button{ cursor:auto!important; }
  [data-parallax]{ transform:none!important; }
  .countdown__num span.is-tick{ animation:none!important; }
}

@media print{ .cursor,.seam,.nav__progress{ display:none!important; } }

/* ============================================================================
   10. ÉCRAN DE CHARGEMENT
   Loader → logo → révélation → Hero. Ne bloque jamais : il s'efface au plus
   tard après un court délai, même si une ressource traîne.
   ============================================================================ */
.loader{
  position:fixed; inset:0; z-index:10000;
  display:grid; place-items:center; gap:0;
  background:var(--cacao-900);
  transition:opacity .5s var(--e-out), visibility 0s linear .5s;
  /* FILET DE SÉCURITÉ CSS : si le JavaScript ne s'exécute jamais (script
     bloqué, cache corrompu, erreur), le loader s'efface tout seul. Aucune
     panne JS ne peut donc laisser l'utilisateur devant un écran noir. */
  animation:loader-failsafe .6s var(--e-out) 4.5s forwards;
}
.loader[hidden]{ display:grid!important; opacity:0; visibility:hidden; pointer-events:none; }
@keyframes loader-failsafe{ to{ opacity:0; visibility:hidden; pointer-events:none; } }
.loader__inner{ display:grid; justify-items:center; gap:1.75rem; padding-inline:var(--gutter); }
/* Le logo garde ses couleurs, ses proportions et son ratio : aucun filtre. */
.loader__logo{
  width:min(62vw,320px); height:auto;
  opacity:0; transform:translate3d(0,14px,0) scale(.97);
}
.loader.is-live .loader__logo{
  opacity:1; transform:none;
  transition:opacity .7s var(--e-soft), transform .9s var(--e-out);
}
.loader__bar{
  position:relative; width:min(62vw,320px); height:1px;
  background:var(--rule-deep-2); overflow:hidden;
  opacity:0; transition:opacity .4s var(--e-out) .25s;
}
.loader.is-live .loader__bar{ opacity:1; }
.loader__bar i{
  position:absolute; inset:0; transform-origin:0 50%;
  transform:scaleX(var(--p,0));
  background:linear-gradient(90deg,var(--violet),var(--bleu),var(--vert),var(--rose));
  transition:transform .35s var(--e-out);
}
.loader__meta{
  display:flex; align-items:baseline; gap:.7rem;
  font-size:.625rem; font-weight:600; letter-spacing:.28em; text-transform:uppercase;
  color:var(--on-deep-3);
  opacity:0; transition:opacity .4s var(--e-out) .3s;
}
.loader.is-live .loader__meta{ opacity:1; }
.loader__count{ font-family:var(--display); font-size:.95rem; letter-spacing:.06em;
  color:var(--or-300); font-variant-numeric:tabular-nums; }
.loader.is-out{ opacity:0; visibility:hidden; }
/* Tant que le loader tourne, la page ne défile pas. */
html.is-loading, html.is-loading body{ overflow:hidden; }

/* ============================================================================
   11. EFFET MACHINE À ÉCRIRE
   Réservé à une seule phrase stratégique. La hauteur est réservée d'avance
   (le texte complet occupe déjà la place) : aucun décalage de mise en page.
   ============================================================================ */
/* Aucun curseur : le texte seul est animé. */
.tw-title{ position:relative; display:block; }
.tw-title__ghost{ visibility:hidden; display:block; }
.tw-title__live{ position:absolute; inset:0; display:block; }

@media (prefers-reduced-motion:reduce){
  .tw-title__live{ position:static; }
  .tw-title__ghost{ display:none; }
}

/* ============================================================================
   15. LE SCEAU DANS LES EN-TÊTES DE PAGE
   L'image du VRAI sceau, recadrée depuis logo-4w4mi-horizontal.png
   (assets/img/logo/seal-4w4mi.webp) : médaillon, quatre arcs et quatre points
   d'or d'origine. Aucun anneau reconstruit, aucune rotation du M et du W.
   ============================================================================ */
.phead__seal{
  position:absolute; top:50%; right:calc(var(--gutter) * -1);
  translate:0 -50%;
  width:min(38vw,360px); aspect-ratio:1;
  pointer-events:none; z-index:0;
}
/* L'image du sceau est posée au centre exact du bloc. */
.phead__seal > *{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  margin:0;
}
.phead__seal .seal-img{ width:92%; height:auto; }

/* Respiration très lente, sans rotation : le M et le W restent droits, le
   sceau reste parfaitement reconnaissable. Le translate de centrage est
   conservé dans chaque image clé. */
.phead__seal .seal-img{ animation:seal-breathe 11s var(--e-in-out) infinite; }
@keyframes seal-breathe{
  0%,100%{ transform:translate(-50%,-50%) scale(1); }
  50%    { transform:translate(-50%,-50%) scale(1.022); }
}

/* Arrivée : le sceau se pose. L'échelle s'applique au bloc entier, donc
   toutes les couches restent concentriques pendant l'apparition. */
.motion-on .phead__seal{ opacity:0; scale:.92; }
.motion-on .phead__seal.is-in{
  opacity:1; scale:1;
  transition:opacity 1s var(--e-soft) .15s, scale 1.1s var(--e-out) .15s;
}

/* La parallaxe au pointeur s'ajoute au centrage vertical au lieu de le
   remplacer (sans ce calc, « translate » écraserait le -50%). */
[data-scene] .phead__seal[data-depth]{
  translate:var(--px,0) calc(-50% + var(--py,0));
}

@media (max-width:900px){
  /* En filigrane derrière le texte, jamais devant le titre. */
  .phead__seal{ right:-22%; width:min(70vw,300px); opacity:.22; }
  .motion-on .phead__seal.is-in{ opacity:.2; }
}
@media (max-width:480px){
  /* Sur petit écran le sceau reste présent, mais très en retrait : il ne doit
     jamais gêner la lecture du titre. Le centrage reste identique. */
  .phead__seal{ right:-32%; width:min(76vw,250px); opacity:.14; }
  .motion-on .phead__seal.is-in{ opacity:.12; }
}

@media (prefers-reduced-motion:reduce){
  .phead__seal .seal-img{ animation:none!important; transform:translate(-50%,-50%)!important; }
  .motion-on .phead__seal{ opacity:1!important; scale:1!important; }
}

/* ============================================================================
   12. SÉLECTEUR DE THÈME
   Cinq choix : quatre couleurs du sceau + « Original » (restauration).
   Placé en bas à gauche : jamais en conflit avec le bouton WhatsApp.
   ============================================================================ */
.theme{
  position:fixed; left:var(--float-inset); bottom:var(--float-inset);
  z-index:150; display:flex; align-items:center; gap:.5rem;
}
.theme__toggle{
  display:grid; place-items:center; width:46px; height:46px; border-radius:50%;
  background:var(--surface); border:1px solid var(--rule); color:var(--text-2);
  box-shadow:0 10px 26px -14px rgb(var(--ink-rgb) / .5);
  transition:transform var(--t), border-color var(--t), color var(--t);
}
.theme__toggle:hover{ transform:translateY(-2px); border-color:var(--accent); color:var(--accent-text); }
.theme__panel{
  display:flex; align-items:center; gap:.4rem;
  padding:.4rem; border-radius:var(--r-pill);
  background:var(--surface); border:1px solid var(--rule);
  box-shadow:0 10px 26px -14px rgb(var(--ink-rgb) / .5);
  transform-origin:0 50%;
  opacity:0; transform:scale(.9) translateX(-6px); pointer-events:none;
  transition:opacity .28s var(--e-out), transform .28s var(--e-out);
}
.theme.is-open .theme__panel{ opacity:1; transform:none; pointer-events:auto; }
.theme__swatch{
  position:relative; width:30px; height:30px; border-radius:50%;
  border:2px solid transparent; background:var(--sw);
  transition:transform var(--t), border-color var(--t);
}
.theme__swatch:hover{ transform:scale(1.12); }
.theme__swatch[aria-checked="true"]{ border-color:var(--text); }
.theme__swatch--original{
  background:conic-gradient(var(--violet) 0 25%, var(--bleu) 0 50%, var(--vert) 0 75%, var(--rose) 0);
}
.theme__swatch--original::after{
  content:''; position:absolute; inset:7px; border-radius:50%; background:var(--surface);
}
@media (max-width:560px){
  .theme__toggle{ width:42px; height:42px; }
  .theme__swatch{ width:26px; height:26px; }
}

@media (prefers-reduced-motion:reduce){
  .loader,.loader__logo,.loader__bar i{ transition:none!important; }
}
@media print{ .loader,.theme{ display:none!important; } }

/* ------------------------------------------ 13. PROFONDEUR AU POINTEUR */
/* La translation du pointeur se compose avec le reste : on l'exprime en
   variables et on ne l'applique qu'aux couches concernees. */
[data-scene] [data-depth]{ translate:var(--px,0) var(--py,0); transition:translate .1s linear; }
@media (prefers-reduced-motion:reduce){ [data-scene] [data-depth]{ translate:none!important; } }
@media (hover:none),(pointer:coarse){ [data-scene] [data-depth]{ translate:none!important; } }

/* ============================================================================
   16. COMPOSITIONS ÉDITORIALES AU SCROLL
   Chorégraphies en opacity / transform / clip-path, déclenchées par la même
   révélation (IntersectionObserver). Sans JS, et sous prefers-reduced-motion,
   tout est visible immédiatement.
   ============================================================================ */

/* Un groupe porte la chorégraphie de ses enfants : lui-même reste visible. */
.motion-on [data-reveal="group"]{ opacity:1; transform:none; }

/* Un titre en lignes contenu dans un bloc révélé se lève ligne par ligne. */
.motion-on [data-reveal].is-in .lines .line > span{
  transform:none;
  transition:transform .95s var(--e-mask) calc(var(--d,0ms) + var(--i,0) * 95ms);
}

/* Le sceau réel se pose : léger scale et rotation résiduelle qui s'annule.
   Au repos il est parfaitement droit. */
.motion-on [data-reveal="seal"]{ opacity:0; transform:scale(.92) rotate(-6deg); }
.motion-on [data-reveal="seal"].is-in{
  opacity:1; transform:none;
  transition:opacity 1.1s var(--e-soft) var(--d,0ms), transform 1.7s var(--e-out) var(--d,0ms);
}

/* ---- Hero : ouverture de campagne ------------------------------------------ */
/* La photographie apparaît en fondu et se pose (zoom qui se résorbe), puis le
   filet, le titre ligne par ligne, la phrase, et les noms 1 → 2 → 3 → 4. */
/* Carrousel des femmes (mobile) : même travelling très lent que le Hero. */
.motion-on .hero__wslide.is-active img{ animation:hero-drift 6s cubic-bezier(.45,.05,.55,.95) both; }
@media (prefers-reduced-motion:reduce){
  .hero__wslide.is-active img{ animation:none!important; }
  .hero__wslide:not(.is-active){ opacity:0!important; visibility:hidden!important; }
}
.motion-on .hero__slides[data-in]{ opacity:0; transform:none; }
.motion-on .hero__slides[data-in] .hero__zoom{ transform:scale(1.07); }
.motion-on .hero__slides[data-in].is-in{ opacity:1; transition:opacity 1.4s var(--e-soft) var(--d,0ms); }
.motion-on .hero__slides[data-in].is-in .hero__zoom{
  transform:none; transition:transform 2.8s var(--e-out) var(--d,0ms);
}
.motion-on .hero__rule[data-in] > i{ transform:scaleX(0); transform-origin:0 50%; }
.motion-on .hero__rule[data-in].is-in > i{
  transform:none;
  transition:transform .8s var(--e-mask) calc(var(--d,0ms) + 200ms + var(--ri,0) * 110ms);
}
.motion-on .hero__names li[data-in]{ transform:translate3d(0,18px,0); }
.motion-on .hero__names li[data-in].is-in{ transition-duration:1s; }
.motion-on .hero__names li[data-in].is-in:nth-child(1){ transition-delay:1050ms; }
.motion-on .hero__names li[data-in].is-in:nth-child(2){ transition-delay:1230ms; }
.motion-on .hero__names li[data-in].is-in:nth-child(3){ transition-delay:1410ms; }
.motion-on .hero__names li[data-in].is-in:nth-child(4){ transition-delay:1590ms; }

/* ---- Prochain rendez-vous ---------------------------------------------------- */
/* 1. Tête : la date arrive d'abord, puis BREAK & TALK ligne par ligne. */
.motion-on .rdv__head .rdv__topline > *{ opacity:0; transform:translate3d(0,14px,0); }
.motion-on .rdv__head .rdv__date > *{ opacity:0; transform:translate3d(0,42px,0); }
.motion-on .rdv__head.is-in .rdv__topline > *{
  opacity:1; transform:none;
  transition:opacity .7s var(--e-soft), transform .8s var(--e-out);
}
.motion-on .rdv__head.is-in .rdv__topline > :nth-child(2){ transition-delay:120ms; }
.motion-on .rdv__head.is-in .rdv__day{
  opacity:1; transform:none;
  transition:opacity .9s var(--e-soft) 80ms, transform 1.2s var(--e-mask) 80ms;
}
.motion-on .rdv__head.is-in .rdv__month{
  opacity:1; transform:none;
  transition:opacity .8s var(--e-soft) 240ms, transform 1s var(--e-out) 240ms;
}
.motion-on .rdv__head.is-in .rdv__title .line > span{
  transition-delay:calc(420ms + var(--i,0) * 130ms);
}

/* 2. L'image principale se dévoile depuis le bord de l'écran et se pose. */
.motion-on .rdv__media .rdv__main{ clip-path:inset(0 100% 0 0); }
.motion-on .rdv__media .rdv__plx img{ transform:scale(1.18); }
.motion-on .rdv__media.is-in .rdv__main{
  clip-path:inset(0 0 0 0); transition:clip-path 1.35s var(--e-mask);
}
.motion-on .rdv__media.is-in .rdv__plx img{ transform:scale(1.03); }
.motion-on .rdv__media.is-in .rdv__main:hover .rdv__plx img{ transform:scale(1.07); }

/* 3. La seconde image arrive avec un décalage et monte dans la composition.
   Le masque déborde du cadre (valeurs négatives) pour laisser vivre l'ombre. */
.motion-on .rdv__media .rdv__second{
  opacity:0; transform:translate3d(0,70px,0); clip-path:inset(100% -30% -30% -30%);
}
.motion-on .rdv__media .rdv__second .rdv__slide img{ transform:scale(1.22); }
.motion-on .rdv__media.is-in .rdv__second{
  opacity:1; transform:none; clip-path:inset(-30% -30% -30% -30%);
  transition:opacity .9s var(--e-soft) 480ms, transform 1.3s var(--e-out) 480ms,
             clip-path 1.2s var(--e-mask) 480ms;
}
.motion-on .rdv__media.is-in .rdv__second .rdv__slide img{
  transform:scale(1.02); transition:transform 1.8s var(--e-out) 480ms;
}
.motion-on .rdv__media.is-in .rdv__second-wrap:hover .rdv__second .rdv__slide img{
  transform:scale(1.07); transition-delay:0ms;
}

/* 4. Le texte arrive légèrement après l'image, élément par élément. */
.motion-on .rdv__body > *{ opacity:0; transform:translate3d(0,26px,0); }
.motion-on .rdv__body.is-in > *{
  opacity:1; transform:none;
  transition:opacity .9s var(--e-soft), transform 1s var(--e-out);
}
.motion-on .rdv__body.is-in > :nth-child(1){ transition-delay:260ms; }
.motion-on .rdv__body.is-in > :nth-child(2){ transition-delay:380ms; }
.motion-on .rdv__body.is-in > :nth-child(3){ transition-delay:520ms; }
.motion-on .rdv__body.is-in > :nth-child(4){ transition-delay:640ms; }
/* Les quatre cases du compte à rebours se posent l'une après l'autre. */
.motion-on .rdv__count .countdown__cell{ opacity:0; transform:translate3d(0,12px,0); }
.motion-on .rdv__body.is-in .rdv__count .countdown__cell{
  opacity:1; transform:none;
  transition:opacity .7s var(--e-soft) 440ms, transform .8s var(--e-out) 440ms;
}
.motion-on .rdv__body.is-in .rdv__count .countdown__cell:nth-child(2){ transition-delay:530ms; }
.motion-on .rdv__body.is-in .rdv__count .countdown__cell:nth-child(3){ transition-delay:620ms; }
.motion-on .rdv__body.is-in .rdv__count .countdown__cell:nth-child(4){ transition-delay:710ms; }

/* ---- Cartes équipe : le portrait se dévoile de bas en haut -------------------- */
.motion-on .tcard[data-reveal] .tcard__media{ clip-path:inset(100% 0 0 0); }
.motion-on .tcard[data-reveal].is-in .tcard__media{
  clip-path:inset(0 0 0 0);
  transition:clip-path 1.1s var(--e-mask) calc(var(--d,0ms) + 80ms);
}

/* ---- Mouvement permanent, très lent ------------------------------------------ */
/* Rendez-vous, image principale : zoom très lent + léger glissement vertical
   (propriétés « scale » et « translate » indépendantes : elles se composent
   avec le zoom de révélation et le survol, en « transform », sans les écraser).
   Le glissement reste vertical : le cadre a une marge de 6 % en haut et en bas,
   aucune sur les côtés — un glissement horizontal découvrirait le fond. */
.rdv__plx img{ animation:rdv-breathe 20s ease-in-out infinite alternate; }
@keyframes rdv-breathe{ from{ scale:1; translate:0 0; } to{ scale:1.06; translate:0 -1.1%; } }

/* Rendez-vous, vignette : chaque femme (ou photographie) qui apparaît est
   animée d'un très lent travelling (zoom + glissement), relancé à chaque
   changement de diapo. Sens alterné d'une diapo à l'autre. Le cadre carré est
   rogné (overflow:hidden) et le zoom (× 1,08) réserve la marge du glissement :
   jamais de fond découvert. */
.rdv__slide.is-active img{ animation:rdv-ken 6.5s ease-out both; }
.rdv__slide:nth-child(even).is-active img{ animation-name:rdv-ken-b; }
@keyframes rdv-ken  { from{ scale:1; translate:0 0; } to{ scale:1.08; translate:-1.6% 1%; } }
@keyframes rdv-ken-b{ from{ scale:1; translate:0 0; } to{ scale:1.08; translate:1.6% 1%; } }

/* Le sceau réel : respiration et balancement très lents (± 2°). Il reste
   toujours lisible : le M et le W ne basculent jamais. */
.seal-figure__turn{ animation:seal-sway 14s ease-in-out infinite; }
@keyframes seal-sway{
  0%,100%{ rotate:-2deg; scale:1; }
  50%    { rotate:2deg;  scale:1.02; }
}

@media (prefers-reduced-motion:reduce){
  .motion-on .rdv__media .rdv__main,
  .motion-on .rdv__media .rdv__second,
  .motion-on .tcard[data-reveal] .tcard__media{ clip-path:none!important; }
  .motion-on .hero__slides[data-in] .hero__zoom,
  .motion-on .hero__rule[data-in] > i,
  .motion-on .rdv__media .rdv__plx img,
  .motion-on .rdv__media .rdv__second img{ transform:none!important; }
  .motion-on .hero__slides[data-in],
  .motion-on .rdv__head .rdv__topline > *,
  .motion-on .rdv__head .rdv__date > *,
  .motion-on .rdv__media .rdv__second,
  .motion-on .rdv__body > *,
  .motion-on .rdv__count .countdown__cell{ opacity:1!important; transform:none!important; }
  .rdv__plx img,.rdv__second,.rdv__slide img,
  .seal-figure__turn{ animation:none!important; }
  .rdv__slide:not(.is-active){ opacity:0!important; visibility:hidden!important; }
  .rdv__tick{ display:none!important; }
}

/* ============================================================================
   17. VIE PERMANENTE — système d'animations continues (toutes les pages)
   Deux systèmes complémentaires :
   · la RÉVÉLATION (sections 1 et 16) : un élément apparaît au scroll ;
   · la VIE PERMANENTE (ici) : une fois apparu, il continue à vivre, très
     lentement — respiration, flottement, balancement, zoom, lignes.
   Règles : uniquement opacity et les propriétés individuelles translate /
   scale / rotate, qui se composent avec le « transform » des révélations et
   de la parallaxe sans l'écraser ; durées lentes (4 à 75 s) ; phases
   décalées (--amb-d, .amb-relay) pour que les mouvements se relaient ; pause
   hors écran (.amb-off, posée par motion.js) ; amplitude réduite sur mobile ;
   coupé sous prefers-reduced-motion.
   ============================================================================ */
:root{ --amb-y:-6px; --amb-s:1.03; --amb-r:2deg; --amb-z:1.04; }
@media (max-width:767px){ :root{ --amb-y:-3px; --amb-s:1.015; --amb-r:1deg; --amb-z:1.025; } }

/* ---- Les classes du système ---- */
.amb-breathe{ animation:amb-breathe var(--amb-t,8s)  ease-in-out var(--amb-d,0s) infinite alternate; }
.amb-float  { animation:amb-float   var(--amb-t,6s)  ease-in-out var(--amb-d,0s) infinite alternate; }
.amb-sway   { animation:amb-sway    var(--amb-t,14s) ease-in-out var(--amb-d,0s) infinite alternate; }
.amb-glint  { animation:amb-glint   var(--amb-t,6s)  ease-in-out var(--amb-d,0s) infinite alternate; }
.amb-zoom   { animation:amb-zoom    var(--amb-t,16s) ease-in-out var(--amb-d,0s) infinite; }
@keyframes amb-breathe{ from{ scale:1; } to{ scale:var(--amb-s); } }
@keyframes amb-float  { from{ translate:0 0; } to{ translate:0 var(--amb-y); } }
@keyframes amb-sway   { from{ rotate:calc(var(--amb-r) * -1); } to{ rotate:var(--amb-r); } }
@keyframes amb-glint  { from{ opacity:.5; } to{ opacity:1; } }
/* Photographies : scale(1) → scale(1.04) → scale(1), glissement minime.
   Jamais de déformation : l'image reste dans son cadre (overflow:hidden). */
@keyframes amb-zoom   { 0%,100%{ scale:1; translate:0 0; } 50%{ scale:var(--amb-z); translate:-.6% -.4%; } }

/* Une lueur parcourt lentement un filet (quatre couleurs, rails, barres). */
.amb-line{ position:relative; overflow:hidden; }
.amb-line::after{ content:''; position:absolute; top:0; bottom:0; left:0; width:28%; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(255,251,234,.8), transparent);
  translate:-110% 0;
  animation:amb-line var(--amb-t,8s) cubic-bezier(.45,.05,.55,.95) var(--amb-d,0s) infinite; }
@keyframes amb-line{ 0%{ translate:-110% 0; } 60%,100%{ translate:400% 0; } }
.amb-line--y::after{ right:0; bottom:auto; width:auto; height:28%;
  background:linear-gradient(180deg, transparent, rgba(255,251,234,.8), transparent);
  translate:0 -110%; animation-name:amb-line-y; }
@keyframes amb-line-y{ 0%{ translate:0 -110%; } 60%,100%{ translate:0 400%; } }
@media (max-width:820px){
  .poster__rule.amb-line--y::after{ right:auto; bottom:0; width:28%; height:auto;
    background:linear-gradient(90deg, transparent, rgba(255,251,234,.8), transparent);
    translate:-110% 0; animation-name:amb-line; }
}

/* Relais : des éléments frères démarrent à des phases différentes. */
.amb-relay > :nth-child(2){ --amb-d:-1.7s; }
.amb-relay > :nth-child(3){ --amb-d:-3.4s; }
.amb-relay > :nth-child(4){ --amb-d:-5.1s; }
.amb-relay > :nth-child(5){ --amb-d:-6.8s; }
.amb-relay > :nth-child(6){ --amb-d:-8.5s; }

/* Bandeau défilant très lent (contenu réel, dupliqué : boucle sans à-coup). */
.marquee{ position:relative; overflow:hidden; white-space:nowrap; }
.marquee__track{ display:flex; width:max-content; animation:amb-marquee var(--amb-t,50s) linear infinite; }
.marquee__track > span{ display:flex; align-items:center; flex:none; }
.marquee i{ font-style:normal; padding-inline:clamp(.9rem,2vw,1.6rem); color:var(--or-500); }
@keyframes amb-marquee{ from{ translate:0 0; } to{ translate:-50% 0; } }

/* Hors écran : tout est en pause. */
.amb-off,.amb-off::before,.amb-off::after,
.amb-off *,.amb-off *::before,.amb-off *::after{ animation-play-state:paused!important; }
/* Mobile : on garde l'essentiel, les mouvements secondaires s'arrêtent. */
@media (max-width:767px){ .amb-desk{ animation:none!important; } }

/* ---- Toutes les pages internes : le vrai sceau de l'en-tête respire et se
   balance très lentement (± 2°), sans jamais basculer. ---- */
.phead__seal .seal-img{
  animation:seal-breathe 11s var(--e-in-out) infinite, amb-sway 16s ease-in-out -4s infinite alternate;
}
/* Bandeau final (toutes les pages) : le sceau en filigrane respire. */
.closer__ring .amb-breathe{ --amb-t:12s; --amb-s:1.05; }

/* ---- Accueil ---- */
.team-grid .amb-zoom{ --amb-t:18s; }

/* ---- Notre Histoire : une histoire qui se construit ---- */
/* La ligne du récit se dessine au rythme de la lecture (--p posé par JS). */
.story{ position:relative; }
.story__line{ position:absolute; top:0; bottom:0; left:calc(var(--gutter) - 1.5rem); width:1px;
  background:var(--rule); pointer-events:none; }
.story__line i{ position:absolute; inset:0; transform-origin:50% 0; transform:scaleY(var(--p,0));
  background:linear-gradient(var(--violet),var(--bleu),var(--rose),var(--vert)); }
/* Chaque chapitre porte un point d'or qui palpite, en relais. */
.story .chapter__num::before{ content:''; display:inline-block; width:6px; height:6px; margin-right:.55rem;
  border-radius:50%; background:var(--or-500); vertical-align:.15em; }
@media (max-width:800px){ .story__line{ display:none; } }

/* ---- L'Équipe : du mouvement autour du collectif ---- */
/* Les portraits zooment très lentement, l'un après l'autre. Un canal par
   mouvement : le zoom lent vit sur le cadre (.frame), l'image garde son zoom
   d'harmonisation (--zoom) et sa révélation. Rien n'est animé deux fois, tout
   reste composité, et le cadre est rogné par le portrait (aucun débordement). */
.bio__portrait{ overflow:hidden; }
.bio__portrait .frame{ animation:amb-zoom 18s ease-in-out infinite; }
#isis .bio__portrait .frame{ animation-delay:-4.5s; }
#awa .bio__portrait .frame{ animation-delay:-9s; }
#fatim .bio__portrait .frame{ animation-delay:-13.5s; }
.bio__portrait::after{ z-index:1; }
.band .amb-zoom{ --amb-t:20s; }

/* ---- Événements : davantage d'énergie ---- */
.marquee--event{ background:var(--cacao-900); color:var(--or-300); border-block:1px solid var(--rule-deep-2);
  padding-block:clamp(.85rem,1.8vw,1.3rem); font-family:var(--display); font-style:italic;
  font-size:clamp(1.1rem,2.2vw,1.75rem); line-height:1.2; }
.marquee--event .marquee__track{ --amb-t:60s; }
/* Frise des éditions : la ligne du temps se dessine, les dates palpitent. */
.agenda{ position:relative; }
.agenda__line{ position:absolute; top:0; bottom:0; left:-1.5rem; width:1px; background:var(--rule); pointer-events:none; }
.agenda__line i{ position:absolute; inset:0; background:var(--or-500); transform-origin:50% 0; transform:scaleY(var(--p,0)); }
.agenda__item{ position:relative; }
.agenda__item::before{ content:''; position:absolute; left:calc(-1.5rem - 3px); top:calc(clamp(2rem,4vw,3rem) + .6rem);
  width:7px; height:7px; border-radius:50%; background:var(--or-500); box-shadow:0 0 0 4px var(--bg); }
@media (max-width:700px){ .agenda__line,.agenda__item::before{ display:none; } }

/* ---- Partenaires : institutionnel et élégant ---- */
.marquee--names{ margin-top:clamp(1.25rem,2.5vw,2rem); padding-block:.85rem; border-block:1px solid var(--rule);
  font-family:var(--display); font-style:italic; font-size:clamp(1.05rem,1.8vw,1.35rem); color:var(--text-2);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); }
.marquee--names .marquee__track{ --amb-t:75s; animation-direction:reverse; }

.steps__bar{ height:2px; }
/* Le formulaire se révèle champ par champ quand sa colonne entre à l'écran. */
.panel > form > *{ transition:opacity .7s var(--e-soft), translate .8s var(--e-out); }
.motion-on [data-reveal]:not(.is-in) .panel > form > *{ opacity:0; translate:0 16px; }
.panel > form > :nth-child(1){ transition-delay:.18s; }
.panel > form > :nth-child(2){ transition-delay:.26s; }
.panel > form > :nth-child(3){ transition-delay:.34s; }
.panel > form > :nth-child(4){ transition-delay:.42s; }
.panel > form > :nth-child(5){ transition-delay:.5s; }
.panel > form > :nth-child(6){ transition-delay:.58s; }
.panel > form > :nth-child(7){ transition-delay:.66s; }
.panel > form > :nth-child(8){ transition-delay:.74s; }

/* ---- Marqueur éditorial (toutes les pages, grand écran) ----
   Numéro de la section en cours, fine ligne verticale dont le repère (aux
   quatre couleurs du sceau) avance avec la lecture, nom de la page. */
.pagemark{ --rail-h:clamp(90px,17vh,160px);
  position:fixed; z-index:60; top:50%; right:clamp(.55rem,1.1vw,1rem); translate:0 -50%;
  display:flex; flex-direction:column; align-items:center; gap:.85rem;
  pointer-events:none; color:var(--text-3); transition:color .5s var(--e-out); }
.pagemark.is-dark{ color:var(--on-deep-2); text-shadow:0 1px 10px rgba(10,5,2,.45); }
.pagemark__num{ writing-mode:vertical-rl; font-family:var(--display); font-size:.8125rem; letter-spacing:.08em; }
.pagemark__num b{ font-weight:500; color:var(--or-700); transition:color .5s var(--e-out); }
.pagemark.is-dark .pagemark__num b{ color:var(--or-300); }
.pagemark__num i{ font-style:normal; opacity:.5; margin-block:.25rem; }
.pagemark__rail{ position:relative; width:1px; height:var(--rail-h); background:currentColor; }
.pagemark__rail i{ position:absolute; left:-1px; top:0; width:3px; height:26px; border-radius:2px;
  background:linear-gradient(var(--violet),var(--bleu),var(--vert),var(--rose));
  transform:translateY(calc(var(--p,0) * (var(--rail-h) - 26px))); }
.pagemark__label{ writing-mode:vertical-rl; max-height:28vh; overflow:hidden; white-space:nowrap;
  font-size:.625rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase; }
@media (max-width:1023px){ .pagemark{ display:none; } }
@media print{ .pagemark,.marquee{ display:none!important; } }

@media (prefers-reduced-motion:reduce){
  [class*="amb-"],[class*="amb-"]::before,[class*="amb-"]::after,
  .marquee__track,.phead__seal .seal-img,.story .chapter__num::before,
  .bio__portrait .frame,.bio__portrait::before,.bio__cabinet::before,.team-index a::after,
  .agenda__item::before,.wall__cell::before,.offer__item::before,.ambient-bg::before,
  .steps__item b::after,.pagemark__rail i,.status::after,.rdv__tick i{ animation:none!important; }
  .bio__portrait::before,.steps__item b::after{ display:none; }
  .motion-on [data-reveal] .panel > form > *{ opacity:1!important; translate:none!important; }
}


/* ============================================================================
   18. DIRECTION PREMIUM — mouvement
   Même contrat que le reste : transform / opacity (et translate / scale
   indépendants), pause hors écran (.amb), amplitude réduite sur mobile,
   coupé sous prefers-reduced-motion.
   ============================================================================ */

/* ---- 18a. Écran de chargement : le logo officiel sur son fond crème ----
   Sur le fond cacao d'origine, le lettrage brun du logo disparaissait
   (contraste 1,3:1) : on voyait « 4 4 » et un cercle. Le loader reprend le
   fond de la navigation ; le logo officiel est intact. */
.loader{ background:var(--creme); }
.loader__bar{ background:var(--rule); }
.loader__meta{ color:var(--text-3); }
.loader__count{ color:var(--or-700); }

/* ---- 18b. Hero : les quatre noms ----
   Entrée décalée 1 → 2 → 3 → 4 (fondu, montée, légère mise à l'échelle), puis
   le filet de couleur se dessine. Aucun mouvement permanent : lecture intacte. */
.hero__names li{ position:relative; border-top:0; }
.hero__names li::before{ content:''; position:absolute; left:0; right:0; top:0; height:2px;
  background:var(--na); transform-origin:0 50%; }
.motion-on .hero__names li[data-in]{ transform:translate3d(0,18px,0) scale(.965); transform-origin:0 100%; }
/* Spécificité supérieure à la règle d'état initial : le nom se pose vraiment. */
.motion-on .hero__names li[data-in].is-in{ transform:none; }
.motion-on .hero__names li[data-in]::before{ transform:scaleX(0); }
.motion-on .hero__names li[data-in].is-in::before{ transform:none; transition:transform 1.1s var(--e-mask) 1300ms; }
.motion-on .hero__names li[data-in].is-in:nth-child(2)::before{ transition-delay:1480ms; }
.motion-on .hero__names li[data-in].is-in:nth-child(3)::before{ transition-delay:1660ms; }
.motion-on .hero__names li[data-in].is-in:nth-child(4)::before{ transition-delay:1840ms; }
@media (max-width:520px){
  .hero__names li{ border-left:0; }
  .hero__names li::before{ right:auto; bottom:0; width:3px; height:auto; transform-origin:50% 0; }
  .motion-on .hero__names li[data-in]::before{ transform:scaleY(0); }
}

/* ---- 18c. Liens : la flèche avance au survol ---- */
.link .icon--arrow{ transition:transform .35s var(--e-out); }
.link:hover .icon--arrow{ transform:translateX(4px); }

/* ---- 18e. Diaporama de l'identité ----
   Un élément par mouvement. Le conteneur .idn__slide porte le fondu enchaîné :
   le portrait entrant apparaît par-dessus le sortant, qui reste net dessous
   puis s'efface. L'image porte la révélation par masque (transform, règle
   commune avec L'Équipe) et le zoom lent (× 1,07) avec léger glissement, en
   propriétés indépendantes scale / translate — le principe de amb-zoom.
   (Le fondu posé directement sur l'image était annulé par la transition de la
   révélation par masque, plus spécifique : d'où ce conteneur dédié.) */
.idn__slide{ position:absolute; inset:0; display:block; opacity:0; visibility:hidden;
  transition:opacity 1.8s var(--e-out), visibility 0s linear 1.8s; }
.idn__slide.is-active{ z-index:2; opacity:1; visibility:visible; transition:opacity 1.8s var(--e-out), visibility 0s; }
.idn__slide.is-prev{ z-index:1; opacity:0; visibility:hidden; transition:opacity 0s linear 1.8s, visibility 0s linear 1.8s; }
.idn__slide.is-active .idn__img{ animation:idn-ken var(--gal-dur,7.8s) cubic-bezier(.33,.1,.55,1) both; }
.idn__slide.is-prev .idn__img{ animation:idn-out 1.8s linear both; }
.idn__slide:nth-child(even).is-active .idn__img{ animation-name:idn-ken-b; }
.idn__slide:nth-child(even).is-prev .idn__img{ animation-name:idn-out-b; }
@keyframes idn-ken  { from{ scale:var(--zoom,1); translate:0 0; }
                      to{ scale:calc(var(--zoom,1) * 1.07); translate:-1.6% .9%; } }
@keyframes idn-out  { from{ scale:calc(var(--zoom,1) * 1.07); translate:-1.6% .9%; }
                      to{ scale:calc(var(--zoom,1) * 1.09); translate:-2.1% 1.2%; } }
@keyframes idn-ken-b{ from{ scale:var(--zoom,1); translate:0 0; }
                      to{ scale:calc(var(--zoom,1) * 1.07); translate:1.6% .9%; } }
@keyframes idn-out-b{ from{ scale:calc(var(--zoom,1) * 1.07); translate:1.6% .9%; }
                      to{ scale:calc(var(--zoom,1) * 1.09); translate:2.1% 1.2%; } }
/* Segments de progression (cliquables) ; numéro et nom changent en glissant. */
.idn__segs{ display:flex; gap:.4rem; }
.idn__segs button{ position:relative; flex:1; height:22px; padding:0; }
.idn__segs button::before,.idn__segs i{ content:''; position:absolute; left:0; right:0; top:50%; height:2px; margin-top:-1px; }
.idn__segs button::before{ background:var(--rule); }
.idn__segs i{ background:var(--accent); transform:scaleX(0); transform-origin:0 50%; }
.idn__segs button.is-done i{ transform:scaleX(1); }
.idn__segs button.is-on i{ animation:idn-progress var(--gal-step,6000ms) linear forwards; }
@keyframes idn-progress{ to{ transform:scaleX(1); } }
.idn__segs button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.idn__cap .is-swap{ animation:idn-swap .8s var(--e-out) both; }
@keyframes idn-swap{ from{ opacity:0; translate:0 .45em; } to{ opacity:1; translate:0 0; } }

/* ---- 18f. Bandeau d'identité (accueil) : plein écran, or et quatre couleurs ---- */
.marquee--brand{ background:var(--or-300); color:var(--cacao-900);
  padding-block:clamp(1.05rem,2.3vw,1.7rem); font-family:var(--display);
  font-size:clamp(1.35rem,3vw,2.35rem); line-height:1.15; letter-spacing:-.01em; }
.marquee--brand i{ color:var(--cacao-600); }
.marquee--brand .marquee__track{ --amb-t:80s; }
.marquee--brand::before,.marquee--brand::after{ content:''; position:absolute; left:0; right:0; height:3px; z-index:1;
  background:linear-gradient(90deg, var(--violet) 0 25%, var(--bleu) 0 50%, var(--vert) 0 75%, var(--rose) 0); }
.marquee--brand::before{ top:0; }
.marquee--brand::after{ bottom:0; }

/* ---- 18g. Sections sceau + informations : le sceau ancré, les informations vivent ----
   Le sceau ne suit jamais le défilement : aucune parallaxe, aucune mise à
   l'échelle liée au scroll ; il ne fait que respirer et se balancer (± 2°).
   Autour de lui, les informations bougent : les convictions glissent vers le
   sceau et leurs filets se tirent jusqu'à lui (--p, data-draw) ; dans les
   listes [data-spotlight], l'information qui passe au centre de l'écran
   s'affirme pendant que les autres s'estompent légèrement. */
@media (min-width:821px){
  [data-spotlight][data-spot-on] > .is-in{ transition:opacity .7s var(--e-out), transform .9s var(--e-out); }
  [data-spotlight][data-spot-on] > .is-in:not(.is-current){ opacity:.55; }
  .seal-notes li.is-current::before{ scale:1.5; }
}
.seal-notes li::before{ transition:scale .5s var(--e-out); }

/* ---- 18h. Nos partenaires : défilement continu, sans saut ---- */
.pmarq__track{ animation:amb-marquee 64s linear infinite; }
/* Tous les bandeaux défilants s'arrêtent au survol et au focus. */
.pmarq:hover .pmarq__track,.pmarq:focus-within .pmarq__track,
.marquee:hover .marquee__track,.marquee:focus-within .marquee__track{ animation-play-state:paused; }
.pmarq .pmark__name{ transition:filter .6s var(--e-out), opacity .6s var(--e-out), color .6s var(--e-out),
  background-size .6s var(--e-out), translate .6s var(--e-out); }
.pmark:hover .pmark__name{ translate:0 -3px; }

/* ---- 18i. WhatsApp : respiration discrète ---- */
.wa-float{ overflow:visible; isolation:isolate; }
.wa-float span{ overflow:hidden; }
.wa-float::before{ content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none;
  background:#1E9E55; opacity:0; animation:wa-breathe 9s var(--e-out) 4s infinite; }
@keyframes wa-breathe{ 0%{ scale:1; opacity:.3; } 38%,100%{ scale:1.35; opacity:0; } }
.wa-float:hover::before,.wa-float:focus-visible::before{ animation:none; }

/* ---- 18j. Curseur : réactions plus riches, toujours sobres ---- */
.cursor.on-logo .cursor__ring{ width:68px; height:68px; background:transparent; border-color:rgb(var(--accent-rgb) / .85); }
.cursor.on-logo .cursor__dot{ width:3px; height:3px; }
.cursor.on-media .cursor__ring{ border-color:rgb(var(--accent-rgb) / .75); }

@media print{ .pmarq{ display:none!important; } }

@media (prefers-reduced-motion:reduce){
  .idn__img,.idn__cap .is-swap,.pmarq__track,.wa-float::before{ animation:none!important; }
  .motion-on .hero__names li[data-in]::before{ transform:none!important; }
  .idn__segs button.is-on i{ animation:none!important; transform:scaleX(1); }
  .pmarq{ -webkit-mask-image:none; mask-image:none; }
  .pmarq__track{ width:auto; justify-content:center; }
  .pmarq__set{ flex-wrap:wrap; justify-content:center; }
  .pmarq__set + .pmarq__set,.pmarq__set > :nth-child(n+5){ display:none; }
  .pmark::after{ display:none; }
}

/* ---- 18m. Le sceau se construit ----
   Dans l'ordre du récit : le M (le socle), le W (la femme posée dessus), les
   deux points orange, puis les quatre arcs qui se referment en anneau. Chaque
   étape est une copie de l'image officielle découpée par un clipPath injecté
   par motion.js ; à la fin, l'image entière et intacte reprend seule la place
   (aucune couture). Sans JS ou en mouvement réduit : l'image entière. */
@property --seal-sweep{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
.seal-build{ position:relative; display:block; }
.seal-build__part{ display:none; }
.has-parts > .seal-build__part{ display:block; position:absolute; inset:0; width:100%; height:100%; opacity:0; }
.seal-build__m{ clip-path:url(#seal-clip-m); }
.seal-build__w{ clip-path:url(#seal-clip-w); }
.seal-build__dots{ clip-path:url(#seal-clip-dots); }
.seal-build__arcs{ clip-path:url(#seal-clip-arcs);
  -webkit-mask-image:conic-gradient(from 0deg at 49.87% 50.24%, #000 var(--seal-sweep), transparent 0);
  mask-image:conic-gradient(from 0deg at 49.87% 50.24%, #000 var(--seal-sweep), transparent 0); }
.motion-on [data-reveal="build"]{ opacity:1; transform:scale(.97); }
.motion-on .has-parts .seal-build__full{ opacity:0; }
.motion-on .has-parts.is-in .seal-build__full{ opacity:1; transition:opacity 0s linear 3.05s; }
.motion-on .has-parts.is-in > .seal-build__part{ visibility:hidden; transition:visibility 0s linear 3.2s; }
.motion-on .has-parts.is-in > .seal-build__m{ animation:seal-rise 1s var(--e-out) .1s both; }
.motion-on .has-parts.is-in > .seal-build__w{ animation:seal-rise 1s var(--e-out) .7s both; }
.motion-on .has-parts.is-in > .seal-build__dots{ animation:seal-fade .5s var(--e-out) 1.35s both; }
.motion-on .has-parts.is-in > .seal-build__arcs{ animation:seal-arcs 1.25s cubic-bezier(.45,.05,.55,.95) 1.75s both; }
@keyframes seal-rise{ from{ opacity:0; translate:0 5%; } to{ opacity:1; translate:0 0; } }
@keyframes seal-fade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes seal-arcs{ from{ opacity:1; --seal-sweep:0deg; } to{ opacity:1; --seal-sweep:360deg; } }
@media (prefers-reduced-motion:reduce){
  .has-parts > .seal-build__part{ display:none!important; }
  .motion-on .has-parts .seal-build__full{ opacity:1!important; }
}

/* ---- 18l. Parallaxe de l'identité : mouvement lissé ----
   Le calque photo (±30 px) suit le défilement dans son cadre, avec une légère
   inertie : profondeur perceptible, jamais brusque. */
.idn__plx{ transition:transform .7s cubic-bezier(.22,.61,.36,1); }
@media (prefers-reduced-motion:reduce){ .idn__plx{ transition:none; } }