/* Gestes ExauLab. Chaque geste dépend d'un attribut data-anim-* sur <html> : retirer l'attribut retire le geste.
   N'anime que transform (et translate, scale), opacity, filter. Sans script ou en mouvement réduit : tout est visible et immobile. */
:root{--ani-flou:10px;--ani-flou-fort:16px}
@media (max-width:820px){:root{--ani-flou:6px;--ani-flou-fort:8px}}

/* Le script pose cette classe seulement sur ce qui est encore hors écran. */
.anim-attend{opacity:0}
.anim-mot{display:inline-block}
@media print{.anim-attend{opacity:1!important}}

@media (prefers-reduced-motion:no-preference){

  /* data-anim-titres : le titre d'une page intérieure se précise à l'arrivée. Sans opacité : le LCP n'attend pas. */
  [data-anim-titres] .page-heros:not(.court) h1{animation:ani-net 700ms var(--ressort) both}
  @keyframes ani-net{from{filter:blur(var(--ani-flou))}to{filter:blur(0)}}

  /* data-anim-pages : passage entre pages en sortie et entrée de flou, la barre reste en place. */
  @view-transition{navigation:auto}
  [data-anim-pages] .barre{view-transition-name:barre}
  [data-anim-pages]::view-transition-old(root){animation:ani-page-sort 400ms var(--ressort) both}
  [data-anim-pages]::view-transition-new(root){animation:ani-page-entre 550ms var(--ressort) both}
  [data-anim-pages]::view-transition-group(barre){animation-duration:400ms;animation-timing-function:var(--ressort)}
  :root:not([data-anim-pages])::view-transition-group(*),
  :root:not([data-anim-pages])::view-transition-old(*),
  :root:not([data-anim-pages])::view-transition-new(*){animation:none}
  @keyframes ani-page-sort{to{opacity:0;filter:blur(var(--ani-flou))}}
  @keyframes ani-page-entre{from{opacity:0;filter:blur(var(--ani-flou))}}

  /* data-anim-ciel : variantes du héros, la photo d'origine reste nette et à sa place. */
  .js[data-anim-ciel] .heros-voile::after{content:"";position:absolute;inset:0;background:#141C2C;opacity:.3}
  .ciel-pret[data-anim-ciel] .heros-voile::after{opacity:0;transition:opacity 1400ms var(--ressort)}
  .js[data-anim-ciel] .heros-fond{scale:1.04;transform-origin:50% 62%}
  .js[data-anim-ciel] .heros-avant{scale:1.07;transform-origin:50% 100%}
  .js[data-anim-ciel="a"] .heros-avant,.js[data-anim-ciel="b"] .heros-avant{translate:0 2.4%}
  .js[data-anim-ciel] .couture-heros{transform-origin:50% 100%}
  .ciel-pret[data-anim-ciel] .heros-fond{scale:1;transition:scale 1400ms var(--ressort)}
  .ciel-pret[data-anim-ciel] .heros-avant{scale:1;translate:0 0;transition:scale 1400ms var(--ressort),translate 1400ms var(--ressort)}

  /* A et B : la nappe du bas dérive, très lentement. Elle déborde un peu pour ne jamais découvrir ses bords. */
  .js[data-anim-ciel="a"] .couture-heros,.js[data-anim-ciel="b"] .couture-heros{scale:1.06 1;animation:ani-derive 64s ease-in-out infinite alternate}
  @keyframes ani-derive{from{translate:-2% 0}to{translate:2% 0}}

  /* B : une seconde nappe entre la mer de brouillard et les sapins, et le jour qui respire sur l'horizon. */
  .ciel-brume{position:absolute;left:0;right:0;bottom:11%;height:clamp(120px,13vw,190px);z-index:2;pointer-events:none;opacity:.3;background:url(nappe.webp) center bottom/100% 100% no-repeat;transform:scaleX(-1.06);animation:ani-derive-2 88s ease-in-out infinite alternate}
  @keyframes ani-derive-2{from{translate:2.5% 0}to{translate:-2.5% 0}}
  .ciel-jour{position:absolute;left:30%;right:-10%;top:18%;height:44%;z-index:1;pointer-events:none;background:radial-gradient(closest-side,rgba(255,206,160,.34),rgba(255,206,160,0));opacity:.55;animation:ani-jour 11s ease-in-out infinite alternate}
  @keyframes ani-jour{to{opacity:1}}
  .ciel-hors .couture-heros,.ciel-hors .ciel-brume,.ciel-hors .ciel-jour{animation-play-state:paused}

  /* data-anim-lueur : une seule lumière qui suit la souris, derrière les sapins, en haut de l'accueil. */
  .ciel-lueur{position:absolute;left:0;top:0;width:52vw;height:52vw;margin:-26vw 0 0 -26vw;z-index:2;pointer-events:none;background:radial-gradient(closest-side,rgba(255,232,206,.42),rgba(255,232,206,.13) 55%,rgba(255,232,206,0));opacity:0;transition:opacity 700ms var(--ressort);will-change:transform}
  .ciel-lueur.allumee{opacity:1}

  /* data-anim-offres : un seul reflet glisse d'une ligne à l'autre de la plaque. */
  .plaque-reflet{position:absolute;left:12px;right:12px;top:0;height:100px;border-radius:14px;background:color-mix(in srgb,var(--accent) 7%,var(--plaque));opacity:0;pointer-events:none;transition:transform 450ms var(--ressort),height 450ms var(--ressort),opacity 300ms var(--ressort)}
  .plaque-reflet.sans-glisse{transition:opacity 300ms var(--ressort)}
  .duo .plaque-reflet{left:-16px;right:-16px}
  [data-anim-offres] .plaque a{position:relative;transition:color 300ms var(--ressort),border-color 300ms var(--ressort)}
  [data-anim-offres] .plaque h3{transition:translate 450ms var(--ressort)}
  [data-anim-offres] .plaque p{transition:color 300ms var(--ressort)}
  @media (hover:hover){
    [data-anim-offres] .plaque:hover a{border-bottom-color:transparent}
    [data-anim-offres] .plaque a:hover h3{translate:6px 0}
    [data-anim-offres] .plaque a:hover p{color:var(--texte)}
    [data-anim-offres] .plaque a:hover .ic{transform:translateX(6px);color:var(--accent-texte)}
  }
  [data-anim-offres] .plaque a:focus-visible h3{translate:6px 0}

  /* data-anim-survol : liseré qui s'allume et lueur qui descend du haut, 500 ms. */
  @media (hover:hover){
    [data-anim-survol] .carte{position:relative}
    [data-anim-survol] .carte::after,[data-anim-survol] .ecran::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(to bottom,rgba(47,107,255,.16),rgba(47,107,255,0) 46%);box-shadow:inset 0 1.5px 0 rgba(95,145,255,.95);opacity:0;transition:opacity 500ms var(--ressort)}
    [data-anim-survol] .carte:hover::after,[data-anim-survol] a.ecran:hover::after{opacity:1}
    [data-anim-survol] .ecran img{transition:scale 700ms var(--ressort)}
    [data-anim-survol] a.ecran:hover img{scale:1.025}
  }
}

/* Le film et la carte des offres : un seul objet, à cheval sur la limite haute de la section et sur le fil en bas.
   Le cadre garde sa place avant le chargement (aspect-ratio), l'image d'attente est hors écran au chargement. */
:root{--film-debord:clamp(72px,9.4vw,136px)}
.mur,.offres,.fil{display:flow-root}
.mur:has(+ .offres .duo){padding-bottom:calc(var(--air) + var(--film-debord))}
.mur:has(+ .offres .duo) .mur-rangee.r2{margin-bottom:0}
.offres:has(.duo){padding-block:0}
.duo{position:relative;z-index:2;margin-top:calc(-1*var(--film-debord));margin-bottom:-120px;display:grid;gap:clamp(20px,2.4vw,32px)}
.film{margin:0}
.film-cadre{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:24px;background:var(--fond-2);box-shadow:var(--e3),var(--haut)}
@media (max-width:560px){.film-cadre{aspect-ratio:4/5}}
.film-attente,.film-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.film-video{opacity:0;transition:opacity 400ms var(--ressort)}
.film-video.pret{opacity:1}
.film-pause{position:absolute;right:clamp(10px,1.4vw,16px);bottom:clamp(10px,1.4vw,16px);width:44px;height:44px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;cursor:pointer;color:#fff;background:rgba(16,20,28,.62);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:transform 100ms var(--ressort)}
.film-pause[hidden]{display:none}
.film-pause:active{transform:scale(.94)}
.film-pause:focus-visible{outline:2px solid #fff;outline-offset:2px}
.film-pause svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.film-pause .icone-lecture,.film-pause.arretee .icone-pause{display:none}
.film-pause.arretee .icone-lecture{display:block}
.duo-corps{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,4vw,56px);padding:clamp(28px,3.2vw,44px) clamp(20px,2.8vw,40px);border-radius:24px;background:var(--plaque);box-shadow:var(--e3),var(--haut)}
.film-legende{margin-top:16px;color:var(--doux);font-size:15px;line-height:1.5;text-wrap:pretty}
@media (min-width:821px){.duo .plaque a{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 24px}}
.duo .plaque{margin:-14px 0;padding:0;background:none;box-shadow:none;border-radius:0}
@media (max-width:820px){.duo{margin-bottom:-72px}.film-cadre,.duo-corps{border-radius:16px}.duo-corps{grid-template-columns:1fr;padding:24px 20px 12px}.duo .plaque{margin:0}}

/* Bloc de la demande : les 3 étapes occupent le vide au-dessus du titre. Le texte reste sur le fond sombre, le formulaire déborde seul. */
.demande-suite{margin-top:clamp(24px,3vw,36px);max-width:30em;list-style:none;padding:0;counter-reset:etape;display:grid;gap:14px}
.demande-suite li{counter-increment:etape;position:relative;padding-left:44px;color:#C2C9D6;line-height:1.45}
.demande-suite li::before{content:counter(etape);position:absolute;left:0;top:-2px;width:30px;height:30px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.22);border-radius:50%;color:#BFD2FF;font-size:14px;font-weight:650;font-variant-numeric:tabular-nums}
.demande-suite b{display:block;color:#EEF1F7;font-weight:650}