/* ============================================================
A FLORE D'EAU — feuille partagée
Direction « Eau noire, granit, un seul poisson rouge »
Règles tenues ici (dossier de conception, chap. 5) :
· l'état par défaut du DOM est l'état final lisible ;
· aucune animation hors du bloc
@supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) {…} }
sauf les transitions de survol et les fondus courts ;
· animation-timeline toujours déclaré APRÈS le raccourci animation ;
· overflow-x: clip, jamais hidden, sur les ancêtres d'un sticky ;
· perspective dans la fonction transform, jamais sur un ancêtre ;
· plages entry / exit, jamais contain / cover ;
· 100svh ;
· will-change uniquement dans le bloc @supports.
============================================================ */
:root{
--deep:#0B1416;
--deeper:#050A10; /* le noir du fond tire vers le bleu : la lumière rouge est absorbée la première */
--granit:#1C2528;
--ardoise:#33454B;
--eau:#6FA39C;
--eau-2:#3F6B67;
--ecume:#EAF0EC;
--ecume-60:rgba(234,240,236,.62);
--ecume-30:rgba(234,240,236,.3);
--ecume-12:rgba(234,240,236,.12);
--hi:#E4512B;
--hi-2:#f0653f;
--display:"Bricolage Grotesque","Arial Narrow",Arial,sans-serif;
--text:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
--gutter:clamp(1.1rem,4vw,4rem);
--ease:cubic-bezier(.16,.84,.3,1);
--nav-h:4.4rem;
color-scheme:dark;
}
/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:var(--nav-h);-webkit-text-size-adjust:100%}
body{
margin:0;
background:var(--deep);
color:var(--ecume);
font-family:var(--text);
font-size:clamp(1rem,.95rem + .3vw,1.125rem);
line-height:1.55;
-webkit-font-smoothing:antialiased;
overflow-x:clip; /* clip, pas hidden : ne crée pas de conteneur de défilement */
}
img,video,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
h1,h2,h3,h4{font-family:var(--display);margin:0;font-weight:700;letter-spacing:-.02em;line-height:.98;text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--hi);outline-offset:4px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:var(--gutter);top:-4rem;z-index:100;padding:.6rem 1rem;background:var(--hi);color:var(--ecume);border-radius:999px;font-family:var(--display);font-weight:700}
.skip:focus{top:1rem}
.wrap{padding-inline:var(--gutter);max-width:1500px;margin-inline:auto}
.wrap--narrow{max-width:62rem}
.wrap--text{max-width:44rem}
.label{
font-family:var(--display);font-stretch:75%;font-weight:600;
font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--eau);
}
.label--hi{color:var(--hi)}
.label--dim{color:var(--ecume-30)}
.lede{font-size:clamp(1.05rem,1.1vw + .7rem,1.35rem);color:var(--ecume-60);line-height:1.5;max-width:38rem;text-wrap:pretty}
.muted{color:var(--ecume-60)}
.todo{
display:inline-block;padding:.1em .45em;border:1px dashed var(--hi);border-radius:.3em;
color:var(--hi);font-family:var(--display);font-stretch:85%;font-size:.85em;font-weight:600;letter-spacing:.02em;
background:rgba(228,81,43,.08);
}
/* Boutons */
.btn{
display:inline-flex;align-items:center;gap:.6rem;
font-family:var(--display);font-stretch:85%;font-weight:700;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;
padding:.85rem 1.35rem;border:1px solid var(--ecume-30);border-radius:999px;
color:var(--ecume);background:transparent;cursor:pointer;text-decoration:none;
transition:background .35s,border-color .35s,color .35s,translate .35s var(--ease);
}
.btn:hover{background:var(--ecume);color:var(--deep);border-color:var(--ecume);text-decoration:none;translate:0 -2px}
.btn--hi{background:var(--hi);border-color:var(--hi);color:var(--ecume)}
.btn--hi:hover{background:var(--hi-2);border-color:var(--hi-2);color:var(--deep)}
.btn--sm{padding:.55rem .95rem;font-size:.74rem}
.btn svg{width:1em;height:1em;flex:none}
.btn[aria-disabled="true"]{opacity:.35;pointer-events:none}
/* Puces */
.chip{
display:inline-block;font-family:var(--display);font-stretch:80%;font-weight:600;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
padding:.35rem .6rem;border:1px solid var(--ecume-30);border-radius:999px;color:var(--ecume);white-space:nowrap;
}
.chip--hi{border-color:var(--hi);color:var(--hi)}
.chips{display:flex;flex-wrap:wrap;gap:.45rem}
/* Grain minéral, desktop seulement */
.grain{position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.07;mix-blend-mode:overlay;
background-image:url("data:image/svg+xml;utf8,");
background-size:220px 220px}
@media (max-width:900px){.grain{display:none}}
/* ---------- Les couches d'eau ----------
Toutes invisibles par défaut. Le plancton et la caustique n'existent que dans
le bloc @supports + no-preference, sur écran large.
Deux couches ont été retirées à la demande de Gabriel : les particules le
8 sept. 2026 (les points blancs le gênaient), puis les bulles de la plongée
le 1er oct. 2026 (« elles ne font pas terrible finalement »). Le canvas, son
code d'animation et les attributs data-plonge sont partis avec. */
.plancton{display:none}
.caustique{display:none}
/* Réfraction : une copie de la photo vue à travers l'eau qui bouge. N'existe
que dans le bloc @supports + no-preference, sur écran large ; sinon rien. */
.refrac{display:none}
.defs{position:absolute;width:0;height:0;overflow:hidden}
@property --onde{syntax:'';inherits:false;initial-value:0%}
/* Fond qui s'assombrit avec la profondeur (animé plus bas) */
.depth{position:fixed;inset:0;z-index:-1;background:var(--deeper);opacity:0;pointer-events:none}
/* ---------- Navigation ---------- */
.nav{
position:fixed;inset:0 0 auto 0;z-index:50;
display:flex;align-items:center;justify-content:space-between;gap:1rem;
min-height:var(--nav-h);padding:.6rem var(--gutter);
background-image:linear-gradient(rgba(11,20,22,.85),rgba(11,20,22,0));
border-bottom:1px solid transparent;
}
.nav--solid{background-color:rgba(11,20,22,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom-color:var(--ecume-12)}
.brand{font-family:var(--display);font-weight:800;font-stretch:85%;letter-spacing:-.01em;font-size:1.1rem;display:flex;align-items:center;gap:.6rem;white-space:nowrap}
.brand:hover{text-decoration:none}
.brand small{font-family:var(--display);font-stretch:75%;font-weight:500;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--eau);margin-top:.15rem}
.brand .dot{width:.55rem;height:.55rem;border-radius:50%;background:var(--hi);box-shadow:0 0 0 3px rgba(228,81,43,.18);flex:none}
.nav__menu{display:flex;align-items:center;gap:1.6rem}
.nav__menu a{font-family:var(--display);font-stretch:80%;font-weight:600;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ecume-60);transition:color .3s}
.nav__menu a:hover,.nav__menu a[aria-current="page"]{color:var(--ecume);text-decoration:none}
.nav__menu a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--hi);text-underline-offset:.45em;text-decoration-thickness:2px}
.nav__burger{display:none;border:1px solid var(--ecume-30);background:transparent;border-radius:999px;padding:.55rem .9rem;font-family:var(--display);font-stretch:85%;font-weight:700;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
@media (max-width:900px){
.brand small{display:none}
.nav__burger{display:inline-block}
/* Le menu mobile est un popover natif : aucun script requis */
.nav__menu[popover]{
position:fixed;inset:auto 0 0 0;margin:0;width:auto;max-width:none;
flex-direction:column;align-items:stretch;gap:0;
padding:1rem var(--gutter) max(1.2rem,env(safe-area-inset-bottom));
background:var(--granit);color:var(--ecume);border:0;border-top:1px solid var(--ardoise);
border-radius:1.2rem 1.2rem 0 0;box-shadow:0 -20px 60px rgba(0,0,0,.5);
}
.nav__menu[popover]:not(:popover-open){display:none}
.nav__menu[popover]:popover-open{display:flex}
.nav__menu[popover] a{padding:.9rem 0;border-bottom:1px solid var(--ecume-12);font-size:1rem}
.nav__menu[popover] .btn{margin-top:1rem;justify-content:center;border-bottom:1px solid var(--hi)}
.nav__menu::backdrop{background:rgba(6,9,11,.6)}
}
/* 8 entrees dans la barre : elle ne tient pas sous 1060 px, on garde
le menu deroulant plus longtemps plutot que de faire deborder la page */
@media (min-width:1060px){
/* Spécificité > la règle UA [popover]:not(:popover-open):not(dialog[open]) */
.nav .nav__menu[popover],.nav .nav__menu[popover]:not(:popover-open){display:flex;position:static;inset:auto;margin:0;padding:0;border:0;background:transparent;overflow:visible;color:inherit;width:auto;height:auto}
.nav__menu .btn{margin-left:.4rem}
}
/* ---------- Bouton pause vidéo (WCAG 2.2.2) ---------- */
.vpause{
position:fixed;right:var(--gutter);bottom:max(1rem,env(safe-area-inset-bottom));z-index:55;
display:inline-flex;align-items:center;gap:.5rem;
padding:.5rem .8rem .5rem .6rem;border:1px solid var(--ecume-30);border-radius:999px;
background:rgba(11,20,22,.8);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
font-family:var(--display);font-stretch:85%;font-weight:600;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
color:var(--ecume);cursor:pointer;transition:border-color .3s,color .3s;
}
.vpause:hover{border-color:var(--ecume)}
.vpause svg{width:.9rem;height:.9rem}
.vpause .on,.vpause .off{display:none}
.vpause[aria-pressed="false"] .on{display:inline}
.vpause[aria-pressed="true"] .off{display:inline}
.vpause[aria-pressed="true"]{color:var(--hi);border-color:var(--hi)}
/* ---------- Médias ---------- */
.media{position:relative;background:var(--granit);overflow:clip}
.media img,.media video{width:100%;height:100%;object-fit:cover}
.media--43{aspect-ratio:4/3}
.media--169{aspect-ratio:16/9}
.media--1610{aspect-ratio:16/10}
.media--34{aspect-ratio:3/4}
.media--35{aspect-ratio:3/5}
.media--v{aspect-ratio:9/16}
.media figcaption,.cap{font-size:.82rem;color:var(--ecume-60);padding-top:.55rem;line-height:1.4}
figure{margin:0}
video[data-auto]{background:var(--granit)}
.veil{position:absolute;inset:0;pointer-events:none;
background:linear-gradient(180deg,rgba(11,20,22,.45) 0%,rgba(11,20,22,.05) 35%,rgba(11,20,22,.25) 65%,rgba(11,20,22,.92) 100%)}
/* ---------- Sections génériques ---------- */
.section{padding-block:clamp(4rem,10vh,8rem)}
.section--tight{padding-block:clamp(2.5rem,6vh,4.5rem)}
.section--granit{background:var(--granit)}
.section__head{display:grid;gap:.9rem;margin-bottom:clamp(2rem,5vh,3.5rem);max-width:52rem}
.section__head h2,.h-xl{font-size:clamp(2.2rem,5.4vw,5rem);font-stretch:85%;font-weight:750}
.h-lg{font-size:clamp(1.8rem,3.6vw,3.2rem);font-stretch:85%;font-weight:750}
.h-md{font-size:clamp(1.3rem,2.2vw,1.9rem);font-stretch:85%;font-weight:700}
.rule{border:0;border-top:1px solid var(--ardoise);margin:0}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.2rem,3vw,3rem)}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2vw,2rem)}
@media (max-width:860px){.grid-2,.grid-3{grid-template-columns:1fr}}
.prose{display:grid;gap:1.1rem;max-width:44rem;text-wrap:pretty}
.prose h2,.prose h3{margin-top:1.2rem}
.prose ul{display:grid;gap:.5rem;padding-left:1.1rem;list-style:"— ";color:var(--ecume-60)}
.prose strong{color:var(--ecume)}
.facts{display:grid;border-top:1px solid var(--ardoise)}
.facts div{display:grid;grid-template-columns:minmax(8rem,auto) 1fr;gap:1rem;align-items:baseline;padding:.9rem 0;border-bottom:1px solid var(--ardoise)}
.facts b{font-family:var(--display);font-stretch:80%;font-weight:700;font-size:1.02rem}
.facts span{color:var(--ecume-60);font-size:.95rem}
/* ---------- Hero plein écran, épinglé ---------- */
.hero{position:relative;height:155svh;background:var(--deep)}
.hero--flat{height:auto;min-height:70svh}
.hero__pin{position:sticky;top:0;height:100svh;overflow:clip}
.hero--flat .hero__pin{position:relative;height:auto;min-height:70svh}
.hero__media{position:absolute;inset:0}
.hero__media img,.hero__media video{width:100%;height:100%;object-fit:cover;filter:saturate(.85) contrast(1.05)}
.hero__tint{position:absolute;inset:0;background:
linear-gradient(90deg,rgba(11,20,22,.74) 0%,rgba(11,20,22,.4) 38%,rgba(11,20,22,.08) 68%,rgba(11,20,22,0) 85%),
linear-gradient(180deg,rgba(11,20,22,.55) 0%,rgba(11,20,22,.1) 35%,rgba(11,20,22,.5) 70%,rgba(11,20,22,.88) 100%)}
.hero__deep{position:absolute;inset:0;background:#06111B;opacity:0}
.hero__content{position:relative;z-index:2;height:100%;display:grid;align-content:end;gap:1.3rem;padding:calc(var(--nav-h) + 2rem) var(--gutter) clamp(5rem,13vh,8rem)}
.hero--flat .hero__content{min-height:70svh;padding-bottom:clamp(3rem,8vh,5rem)}
.hero__title{font-size:var(--titre,clamp(2.6rem,8.6vw,8.4rem));font-stretch:88%;font-weight:750;line-height:.9;max-width:12ch}
.hero__title em{font-style:normal;color:var(--eau)}
.hero__title .hi{color:var(--hi)}
/* Le reflet du titre : le titre est posé sur l'eau du bassin, son double
inversé, comprimé, flou, tremble dessous. Copie du texte marquée aria-hidden ;
même typographie que le h1 pour que les lignes se coupent au même endroit.
Rien sous 760 px : le titre y prend déjà tout l'écran. */
.hero__h{display:grid;--titre:clamp(2.6rem,8.6vw,8.4rem)}
/* Fenetre courte — un portable, un ecran 16/10 : le titre se regle aussi
sur la hauteur, sinon le bloc deborde par le haut et passe sous la
barre de navigation. */
@media (min-width:761px) and (max-height:880px){
.hero__h{--titre:clamp(2.4rem,min(8.6vw,13svh),8.4rem)}
.hero__content{gap:1rem;padding-bottom:clamp(3.5rem,9vh,5rem)}
}
.hero__reflet{display:none}
@media (min-width:761px){
.hero__reflet{
display:block;position:relative;height:.62em;margin-top:.04em;overflow:clip;pointer-events:none;user-select:none;
font:750 var(--titre,clamp(2.6rem,8.6vw,8.4rem))/.9 var(--display);font-stretch:88%;letter-spacing:-.02em;
-webkit-mask-image:linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.26) 48%,transparent);mask-image:linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.26) 48%,transparent);
}
.hero__reflet>span{display:block;max-width:12ch;text-wrap:balance;transform:translateY(88%) scaleY(-.88);transform-origin:50% 0;filter:blur(1.1px)}
.hero__reflet em{font-style:normal;color:var(--eau)}
}
.hero__ctas{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:.4rem}
.hero__caption{position:absolute;right:var(--gutter);bottom:4.6rem;z-index:3;text-align:right;color:var(--ecume-60);font-size:.78rem;display:grid;gap:.2rem}
.hero__caption b{font-family:var(--display);font-stretch:80%;font-weight:700;color:var(--ecume)}
.hero__scroll{position:absolute;left:var(--gutter);bottom:1.6rem;z-index:3;display:flex;align-items:center;gap:.7rem;color:var(--ecume-60);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-family:var(--display);font-stretch:80%}
.hero__scroll i{width:1px;height:2.4rem;background:linear-gradient(var(--ecume),transparent);display:block;position:relative;overflow:clip}
@media (max-width:760px){.hero__caption{display:none}.hero__content{gap:1rem}}
/* Vague de surface entre le hero et la suite */
.surface{position:relative;z-index:2;background:var(--deep)}
.surface__wave{position:absolute;left:0;right:0;top:0;translate:0 -99%;height:14vh;min-height:80px;overflow:clip;pointer-events:none}
.surface__wave svg{position:absolute;bottom:0;left:0;height:100%;width:200%}
.surface__wave .w2{opacity:.55}
/* ---------- Manifeste (accueil) ---------- */
/* La caustique de ::before deborde volontairement de 10% de chaque cote.
On la contient ici : clip et non hidden, pour ne pas creer de conteneur
de defilement qui casserait le sticky de .side et les timelines. */
.manifesto{padding:clamp(4rem,12vh,9rem) 0 clamp(4rem,10vh,7rem);position:relative;overflow-x:clip}
.manifesto .grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.1fr);gap:clamp(1.5rem,5vw,6rem);align-items:start}
@media (max-width:860px){.manifesto .grid{grid-template-columns:1fr}}
.manifesto .side{display:grid;gap:1rem;position:sticky;top:6rem}
.manifesto .side p{color:var(--ecume-60);font-size:.95rem;max-width:26rem}
.words{font-family:var(--display);font-stretch:90%;font-weight:600;font-size:clamp(1.5rem,3.2vw,3.2rem);line-height:1.12;letter-spacing:-.015em;text-wrap:pretty}
.words .hi{color:var(--hi)}
.words .eau{color:var(--eau)}
.triptych{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ardoise);margin-top:clamp(2.5rem,6vh,4rem);border:1px solid var(--ardoise)}
.triptych > div{background:var(--deep);padding:1.4rem 1.3rem;display:grid;gap:.5rem;align-content:start}
.triptych b{font-family:var(--display);font-stretch:85%;font-weight:700;font-size:1.2rem;letter-spacing:-.01em}
.triptych p{color:var(--ecume-60);font-size:.92rem}
@media (max-width:720px){.triptych{grid-template-columns:1fr}}
/* ---------- Les six familles (accueil) : la plongée par paliers ---------- */
.familles{display:grid;gap:1px;background:var(--ardoise);border-block:1px solid var(--ardoise)}
.famille-row{
position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);min-height:min(62svh,560px);
background:var(--deep);color:inherit;text-decoration:none;
}
.famille-row:hover{text-decoration:none}
.famille-row:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
.famille-row:nth-child(even) .famille-row__media{order:2}
.famille-row__media{position:relative;overflow:clip;background:var(--granit)}
.famille-row__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.9);transition:filter .6s}
.famille-row:hover .famille-row__media img{filter:saturate(1.05)}
.famille-row__body{display:grid;align-content:center;gap:1rem;padding:clamp(1.6rem,4vw,3.6rem) var(--gutter)}
.famille-row__idx{display:flex;align-items:center;gap:1rem;font-family:var(--display);font-stretch:75%;font-weight:500;font-size:.75rem;letter-spacing:.2em;color:var(--eau)}
.famille-row__idx::after{content:"";height:1px;width:3rem;background:var(--eau);opacity:.6}
.famille-row h3{font-size:clamp(1.9rem,4vw,3.6rem);font-stretch:85%;font-weight:750}
.famille-row p{color:var(--ecume-60);max-width:32rem}
.famille-row__go{margin-top:.4rem;display:inline-flex;align-items:center;gap:.5rem;font-family:var(--display);font-stretch:85%;font-weight:700;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ecume)}
.famille-row__go svg{width:1em;height:1em;transition:translate .3s var(--ease)}
.famille-row:hover .famille-row__go svg{translate:4px 0}
@media (max-width:760px){
.famille-row,.famille-row:nth-child(even){grid-template-columns:1fr;min-height:0}
.famille-row:nth-child(even) .famille-row__media{order:0}
.famille-row__media{aspect-ratio:16/10}
}
/* ---------- RÉALISATIONS : navigation à deux axes ---------- */
/* Ligne de sonde (axe vertical), desktop : une cordelette qui tombe du haut de la
fenêtre — la surface — et se gradue au niveau des paliers ; un plomb marque
le palier courant et glisse d'un cran à l'autre (le script pose --sonde). */
.gauge{position:fixed;right:calc(var(--gutter) - .4rem);top:50%;translate:0 -50%;z-index:40;display:none;--pas:1.7rem}
@media (min-width:1100px){.gauge{display:block}}
.gauge::before{content:"";position:absolute;left:.19rem;bottom:100%;width:1px;height:calc(50vh - 50%);background:linear-gradient(transparent,var(--ecume-12) 25%,var(--ecume-12))}
.gauge ol{display:grid;grid-auto-rows:var(--pas);position:relative;padding-block:.2rem}
.gauge ol::before{content:"";position:absolute;left:0;top:0;bottom:0;width:.4rem;pointer-events:none;
background:
linear-gradient(var(--ecume-12),var(--ecume-12)) .19rem 0/1px 100% no-repeat,
repeating-linear-gradient(var(--ecume-12) 0 1px,transparent 1px calc(var(--pas) / 4)) 0 calc(.2rem + var(--pas) / 2 + 1px)/.2rem calc(100% - .4rem) no-repeat}
.gauge li{display:grid}
.gauge a{position:relative;display:flex;align-items:center;gap:.8rem;font-family:var(--display);font-stretch:80%;font-weight:600;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ecume-30);transition:color .3s;text-decoration:none}
.gauge a i{width:.55rem;height:1px;background:currentColor;flex:none;position:relative;z-index:1}
.gauge a span{opacity:0;translate:4px 0;transition:opacity .3s,translate .3s var(--ease)}
.gauge:hover a span,.gauge a[aria-current="true"] span{opacity:1;translate:0}
.gauge a[aria-current="true"]{color:var(--hi)}
.gauge a:hover{color:var(--ecume)}
.gauge__plomb{position:absolute;left:.19rem;top:calc(.2rem + var(--pas) / 2 + var(--sonde,0) * var(--pas));translate:-50% -50%;width:.46rem;height:.72rem;z-index:2;
background:var(--hi);clip-path:polygon(50% 0,100% 32%,82% 100%,18% 100%,0 32%);box-shadow:0 0 0 3px var(--deep);transition:top .7s var(--ease)}
/* Version mobile / tablette : chips en tête de page */
.gauge-inline{display:flex;flex-wrap:wrap;gap:.45rem}
@media (min-width:1100px){.gauge-inline{display:none}}
/* Un palier = une famille de chantiers */
.palier{position:relative}
.palier__cover{
position:sticky;top:0;height:100svh;overflow:clip;background:var(--deep);
display:grid;align-content:center;
}
.palier__cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.85)}
.palier__cover::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--absorb);mix-blend-mode:multiply}
/* L'anneau lumineux au bord de l'onde (animé dans le bloc @supports) */
.palier__cover::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;
background:radial-gradient(circle farthest-corner at 50% 0%,transparent calc(var(--onde) - 6%),rgba(234,240,236,.22) calc(var(--onde) - 1.2%),rgba(111,163,156,.5) var(--onde),transparent calc(var(--onde) + 1.6%))}
/* Palier après palier, l'eau absorbe la lumière : le rouge part en premier, il
reste le bleu-vert. Même fond pour la bande qui recouvre. */
.palier{--absorb:rgba(14,58,82,.04);--fond:#0B1416}
.palier:nth-of-type(2){--absorb:rgba(13,52,78,.14);--fond:#0A1219}
.palier:nth-of-type(3){--absorb:rgba(12,46,74,.24);--fond:#09101A}
.palier:nth-of-type(4){--absorb:rgba(10,40,70,.34);--fond:#080E19}
.palier:nth-of-type(5){--absorb:rgba(8,34,64,.44);--fond:#060B16}
.palier:nth-of-type(6){--absorb:rgba(6,28,58,.54);--fond:#050912}
.palier__cover{background:var(--fond)}
.palier__cover .veil{background:
linear-gradient(90deg,rgba(11,20,22,.7) 0%,rgba(11,20,22,.35) 45%,rgba(11,20,22,0) 75%),
linear-gradient(180deg,rgba(11,20,22,.55) 0%,rgba(11,20,22,.05) 30%,rgba(11,20,22,.1) 60%,rgba(11,20,22,.9) 100%)}
/* Le titre vit dans la moitié haute : la bande qui monte recouvre d'abord le bas de l'image. */
.palier__title{position:relative;z-index:2;display:grid;gap:.9rem;padding:var(--nav-h) var(--gutter) 30svh;max-width:48rem}
/* Temps de pause : la couverture reste pleine pendant 30svh avant que la bande la recouvre. */
.palier__pause{height:30svh;pointer-events:none}
.palier__idx{display:flex;align-items:center;gap:1rem;font-family:var(--display);font-stretch:75%;font-weight:500;font-size:.75rem;letter-spacing:.2em;color:var(--eau)}
.palier__idx::after{content:"";height:1px;width:3rem;background:var(--eau);opacity:.6}
.palier__title h2{font-size:clamp(2.2rem,6vw,5.6rem);font-stretch:85%;font-weight:750;line-height:.9}
.palier__title p{color:var(--ecume-60);max-width:34rem}
.palier__title .chips{margin-top:.2rem}
/* La bande horizontale, qui vient recouvrir la couverture épinglée */
.palier__strip{position:relative;z-index:2;background:var(--fond,var(--deep));border-top:1px solid var(--ardoise);padding:clamp(1.6rem,4vh,2.6rem) 0 clamp(2.4rem,6vh,4rem)}
.strip__head{display:flex;align-items:end;justify-content:space-between;gap:1rem;margin-bottom:1.2rem}
.strip__head h3{font-size:1rem;font-stretch:85%;font-weight:600;color:var(--ecume-60)}
.strip__head h3 b{color:var(--ecume);font-weight:700}
.strip__nav{display:flex;gap:.4rem}
.strip__nav button{
width:2.6rem;height:2.6rem;border-radius:50%;border:1px solid var(--ecume-30);background:transparent;cursor:pointer;
display:grid;place-items:center;transition:border-color .3s,background .3s,color .3s;
}
.strip__nav button:hover{border-color:var(--ecume);background:var(--ecume);color:var(--deep)}
.strip__nav button[disabled]{opacity:.3;cursor:default}
.strip__nav button[disabled]:hover{background:transparent;color:inherit;border-color:var(--ecume-30)}
.strip__nav svg{width:1rem;height:1rem}
.strip__nav{display:none} /* flèches : souris + script seulement */
@media (pointer:fine){.js .strip__nav{display:flex}}
/* Le rail : défilement natif, accrochage, pas de JS pour le geste */
.rail{
display:grid;grid-auto-flow:column;grid-auto-columns:min(78vw,600px);gap:clamp(.8rem,2vw,1.4rem);
overflow-x:auto;overflow-y:clip;overscroll-behavior-x:contain;
scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);
padding:.5rem var(--gutter) 1.6rem;margin:0; /* marge basse ≥ amplitude du rebond (22 px) */
scrollbar-width:none;
}
.rail::-webkit-scrollbar{display:none}
.rail::after{content:"";width:1px} /* respire à droite */
.rail > li{scroll-snap-align:start;scroll-snap-stop:always;display:block}
.rail:focus-visible{outline-offset:-2px}
/* Rail de carnet : photos à hauteur fixe, largeur selon le format */
.rail--carnet{grid-auto-columns:max-content;align-items:start}
.rail--carnet figure{display:grid;gap:.5rem;max-width:min(78vw,520px)}
.rail--carnet img{height:clamp(200px,32vh,320px);width:auto;max-width:min(78vw,520px);object-fit:cover;background:var(--granit)}
.rail--carnet figcaption{font-size:.8rem;color:var(--ecume-60);line-height:1.35;max-width:36ch}
/* Carte chantier */
.fiche-card{position:relative;display:grid;gap:.9rem;background:var(--granit);border:1px solid var(--ardoise);padding:1px}
.fiche-card__media{position:relative;aspect-ratio:16/10;overflow:clip;background:var(--deep)}
.fiche-card__media img,.fiche-card__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fiche-card__body{display:grid;gap:.6rem;padding:.4rem 1.2rem 1.3rem}
.fiche-card h4{font-size:clamp(1.3rem,2.2vw,1.8rem);font-stretch:85%;font-weight:750;line-height:1}
.fiche-card h4 small{display:block;font-size:.72rem;font-stretch:75%;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--eau);margin-bottom:.45rem}
.fiche-card p{color:var(--ecume-60);font-size:.95rem}
.fiche-card__foot{display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap;margin-top:.2rem}
.fiche-card a.stretch::after{content:"";position:absolute;inset:0}
.fiche-card:has(a.stretch:hover) h4{color:var(--eau)}
.fiche-card:has(a.stretch:focus-visible){outline:2px solid var(--hi);outline-offset:4px}
/* Le galet qui ricoche : indicateur horizontal */
.ricochet{
position:relative;container-type:inline-size;height:1.4rem;margin:.6rem var(--gutter) 0;padding-inline:.7rem;
display:flex;align-items:center;justify-content:space-between;
}
.ricochet::before{content:"";position:absolute;left:.7rem;right:.7rem;top:50%;height:1px;background:var(--ecume-12)}
.ricochet button{margin-inline:-.7rem}
.ricochet button{
position:relative;width:1.4rem;height:1.4rem;border:0;background:transparent;padding:0;cursor:pointer;border-radius:50%;
}
.ricochet button::before{content:"";position:absolute;inset:50%;translate:-50% -50%;width:.35rem;height:.35rem;border-radius:50%;background:var(--ecume-30);transition:background .3s,scale .3s}
.ricochet button[aria-current="true"]::before{background:var(--hi);scale:1.4}
.ricochet button::after{content:"";position:absolute;inset:50%;translate:-50% -50%;width:.35rem;height:.35rem;border-radius:50%;border:1px solid var(--hi);opacity:0}
.ricochet__pebble{
position:absolute;left:.7rem;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
background:var(--ecume);pointer-events:none;display:none;
}
/* Fin de page réalisations */
.remontee{position:relative;z-index:2;background:var(--granit);border-top:1px solid var(--ardoise)}
/* ---------- FICHE CHANTIER ---------- */
.fiche-hero .hero__content{align-content:end}
.fiche-hero .hero__title{font-size:clamp(2.3rem,6.4vw,6.4rem);max-width:16ch}
.fiche-meta{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;color:var(--ecume-60)}
.fiche-meta .commune{font-family:var(--display);font-stretch:85%;font-weight:700;font-size:1.05rem;color:var(--ecume)}
.fiche-nav{position:relative;z-index:3;display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;align-items:center;justify-content:space-between;padding:1rem var(--gutter);border-block:1px solid var(--ardoise);background:var(--deep);font-size:.85rem;color:var(--ecume-60)}
.fiche-nav a{font-family:var(--display);font-stretch:85%;font-weight:600;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ecume);display:inline-flex;gap:.5rem;align-items:center}
.fiche-nav svg{width:.9em;height:.9em}
.fiche-nav .center{display:inline-flex;gap:.6rem;align-items:center}
.etape{padding-block:clamp(3rem,8vh,6rem);border-top:1px solid var(--ardoise)}
.etape__head{display:grid;grid-template-columns:auto 1fr;gap:1.2rem 2rem;align-items:baseline;margin-bottom:clamp(1.6rem,4vh,2.6rem)}
.etape__num{font-family:var(--display);font-stretch:75%;font-weight:500;font-size:.75rem;letter-spacing:.2em;color:var(--eau)}
.etape__head h2{font-size:clamp(1.8rem,3.8vw,3.4rem);font-stretch:85%;font-weight:750}
.etape__head p{grid-column:2;color:var(--ecume-60);max-width:40rem}
@media (max-width:640px){.etape__head{grid-template-columns:1fr}.etape__head p{grid-column:1}}
.galerie{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(.6rem,1.4vw,1.2rem)}
/* La vitrine des lanternes : des photos carrees de catalogue, autant par
ligne que la largeur le permet. La galerie des chantiers, elle, reste en
six colonnes : ce n'est pas le meme rythme. */
.media--11{aspect-ratio:1}
.vitrine{display:grid;grid-template-columns:repeat(auto-fit,minmax(10.5rem,1fr));gap:clamp(.6rem,1.4vw,1.2rem)}
.vitrine figure{margin:0}
.vitrine figcaption{margin-top:.5rem;font-size:.86rem;color:var(--ecume-60)}
.vitrine figcaption b{color:var(--ecume)}
.galerie > *{grid-column:span 3}
.galerie .w2{grid-column:span 2}
.galerie .w4{grid-column:span 4}
.galerie .w6{grid-column:span 6}
@media (max-width:760px){.galerie > *,.galerie .w2,.galerie .w4{grid-column:span 6}}
/* Avant / après : deux images, un curseur natif */
.compare{position:relative;aspect-ratio:4/3;overflow:clip;background:var(--granit);--pos:50%;isolation:isolate}
.compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.compare .after{clip-path:inset(0 0 0 var(--pos))}
.compare .tag{position:absolute;top:.8rem;z-index:2;padding:.3rem .6rem;background:rgba(11,20,22,.7);border-radius:999px;font-family:var(--display);font-stretch:80%;font-weight:600;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase}
.compare .tag--avant{left:.8rem}
.compare .tag--apres{right:.8rem;color:var(--eau)}
.compare input[type=range]{
position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:3;
-webkit-appearance:none;appearance:none;
}
.compare input[type=range]:focus-visible{opacity:1;outline:2px solid var(--hi);outline-offset:-2px;background:transparent}
.compare input[type=range]:focus-visible::-webkit-slider-thumb{-webkit-appearance:none;width:1px;height:100%;background:transparent}
.compare .bar{position:absolute;top:0;bottom:0;left:var(--pos);width:1px;background:var(--ecume);z-index:2;pointer-events:none;translate:-50% 0}
.compare .bar::after{content:"";position:absolute;top:50%;left:50%;translate:-50% -50%;width:2.4rem;height:2.4rem;border-radius:50%;border:1px solid var(--ecume);background:rgba(11,20,22,.7);
background-image:url("data:image/svg+xml;utf8,");background-size:1rem;background-repeat:no-repeat;background-position:center}
/* Sans JS ni curseur : les deux images côte à côte via la classe .compare--static */
.compare--static{aspect-ratio:auto;display:grid;grid-template-columns:1fr 1fr;gap:2px}
.compare--static img{position:static;aspect-ratio:4/3}
.compare--static .after{clip-path:none}
.chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:1px;background:var(--ardoise);border:1px solid var(--ardoise)}
.chiffres div{background:var(--deep);padding:1.2rem 1.1rem;display:grid;gap:.35rem}
.chiffres b{font-family:var(--display);font-stretch:85%;font-weight:750;font-size:clamp(1.4rem,2.4vw,2.1rem);letter-spacing:-.02em}
.chiffres span{color:var(--ecume-60);font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;font-family:var(--display);font-stretch:80%}
/* Un recit a la premiere personne, plus long qu'une citation : meme filet
que .temoignage, mais au corps du texte courant — a 1,5 rem on ne lit pas
760 caracteres. */
.recit{border-left:2px solid var(--eau-2);padding:.2rem 0 .2rem 1.4rem;display:grid;gap:.9rem;max-width:42rem;margin:1.4rem 0}
.recit p{margin:0;color:var(--ecume-60)}
.recit p:first-child{color:var(--ecume)}
.temoignage{border-left:2px solid var(--hi);padding:.4rem 0 .4rem 1.4rem;display:grid;gap:.8rem;max-width:40rem}
.temoignage p{font-family:var(--display);font-stretch:90%;font-weight:500;font-size:clamp(1.15rem,1.8vw,1.5rem);line-height:1.3}
.temoignage cite{font-style:normal;color:var(--ecume-60);font-size:.9rem}
.fiche-cta{display:grid;gap:1.2rem;justify-items:start;padding-block:clamp(3rem,8vh,6rem);border-top:1px solid var(--ardoise)}
/* ---------- Formulaire ---------- */
.form{display:grid;gap:1.3rem;max-width:44rem}
.form fieldset{border:0;padding:0;margin:0;display:grid;gap:.7rem}
.form legend,.form label{font-family:var(--display);font-stretch:85%;font-weight:600;font-size:.85rem;letter-spacing:.04em;color:var(--ecume)}
.form legend{margin-bottom:.4rem}
.form .field{display:grid;gap:.45rem}
.form .hint{color:var(--ecume-60);font-size:.85rem}
.form input[type=text],.form input[type=tel],.form input[type=email],.form textarea,.form select{
width:100%;padding:.85rem 1rem;background:var(--granit);border:1px solid var(--ardoise);border-radius:.4rem;color:var(--ecume);font:inherit;
}
.form input:focus,.form textarea:focus,.form select:focus{outline:2px solid var(--hi);outline-offset:2px;border-color:var(--eau)}
.form textarea{min-height:9rem;resize:vertical}
.form .radios{display:flex;flex-wrap:wrap;gap:.6rem}
.form .radios label{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1rem;border:1px solid var(--ardoise);border-radius:999px;cursor:pointer;font-weight:600}
.form .radios label:has(input:checked){border-color:var(--hi);color:var(--hi)}
.form .radios input{accent-color:var(--hi)}
.form input[type=file]{color:var(--ecume-60);font-size:.9rem}
.form input[type=file]::file-selector-button{font:inherit;font-family:var(--display);font-weight:700;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;padding:.6rem 1rem;margin-right:.8rem;border:1px solid var(--ecume-30);border-radius:999px;background:transparent;color:var(--ecume);cursor:pointer}
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form .consent{display:flex;gap:.7rem;align-items:start;font-size:.88rem;color:var(--ecume-60);font-family:var(--text);font-weight:400}
.form .consent input{accent-color:var(--hi);margin-top:.3rem}
.form .actions{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
.tel{font-family:var(--display);font-stretch:85%;font-weight:750;font-size:clamp(1.4rem,2.6vw,2.2rem);letter-spacing:-.01em}
/* ---------- Bas de page ---------- */
.contact-band{position:relative;padding:clamp(5rem,14vh,10rem) 0 clamp(3rem,8vh,5rem);background:var(--deep);border-top:1px solid var(--ardoise)}
.contact-band .wrap{display:grid;gap:1.4rem;justify-items:start}
.contact-band h2{font-size:clamp(2.6rem,7vw,7rem);font-stretch:85%;font-weight:750;line-height:.9;max-width:12ch}
.contact-band p{color:var(--ecume-60);max-width:34rem}
footer{position:relative;z-index:2;padding:2.4rem var(--gutter) max(2rem,env(safe-area-inset-bottom));border-top:1px solid var(--ardoise);color:var(--ecume-60);font-size:.85rem;background:var(--deep)}
footer .cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.6rem 2rem;max-width:1500px;margin-inline:auto}
@media (max-width:860px){footer .cols{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){footer .cols{grid-template-columns:1fr}}
footer .cols > div{display:grid;gap:.5rem;align-content:start}
footer b{color:var(--ecume);font-family:var(--display);font-stretch:85%}
footer ul{display:grid;gap:.35rem}
footer .legal{margin-top:2rem;padding-top:1.2rem;border-top:1px solid var(--ecume-12);display:flex;flex-wrap:wrap;gap:.6rem 2rem;justify-content:space-between;font-size:.78rem;color:var(--ecume-30);max-width:1500px;margin-inline:auto}
/* ============================================================
COUCHE MOUVEMENT — uniquement si le navigateur sait faire
ET si la personne n'a pas demandé moins de mouvement.
Tout ce qui précède reste l'état final, lisible sans rien.
============================================================ */
@media (prefers-reduced-motion:no-preference){
/* Rappels de surface, boucles courtes (≤ 5 s ou purement décoratives et hors contenu) */
.hero__scroll i::after{content:"";position:absolute;inset:0;background:var(--hi);animation:drip 1.8s infinite var(--ease)}
.surface__wave svg{animation:houle 18s linear infinite}
.surface__wave .w2{animation-duration:29s;animation-direction:reverse}
.ricochet button[aria-current="true"]::after{animation:onde-pt 1.6s ease-out infinite}
/* Le « plouf » au clic passe par une transition, pas par le raccourci animation :
celui-ci remettrait animation-timeline à auto et décrocherait le galet du rail. */
.ricochet__pebble{transition:scale .25s var(--ease)}
.ricochet__pebble.splash{scale:1.7 .6}
/* Le reflet : une houle lente qui le penche, des rides qui le traversent */
.hero__reflet>span{animation:tremble 7s ease-in-out infinite alternate}
.hero__reflet::after{content:"";position:absolute;inset:0;pointer-events:none;
background:repeating-linear-gradient(180deg,rgba(11,20,22,0) 0,rgba(11,20,22,.45) 4px,rgba(11,20,22,0) 10px);background-size:100% 10px;
animation:ondulation 2.4s linear infinite}
}
@keyframes drip{0%{transform:translateY(-100%)}100%{transform:translateY(100%)}}
@keyframes houle{to{transform:translateX(-50%)}}
@keyframes onde-pt{0%{opacity:.9;scale:1}100%{opacity:0;scale:5}}
@keyframes tremble{from{transform:translateY(88%) scaleY(-.88) skewX(-2.2deg)}to{transform:translateY(88%) scaleY(-.88) skewX(2.2deg)}}
@keyframes ondulation{to{background-position:0 10px}}
@supports (animation-timeline: view()){
@media (prefers-reduced-motion:no-preference){
/* --- Le fond s'assombrit avec la descente (toute page) --- */
.depth{animation:deepen linear both;animation-timeline:scroll(root)}
/* --- La barre de navigation se solidifie sur les 160 premiers pixels --- */
.nav{animation:nav-solid linear both;animation-timeline:scroll(root);animation-range:0 160px}
/* --- Hero épinglé : la plongée sous la surface ---
Piste de 170svh, contenu collé 100svh, toujours en tête de page.
Vérifié sur pièce : pour un sujet plus haut que la fenêtre, la plage
« entry » de view() se termine dès que son bord haut touche le haut de
la fenêtre — donc AVANT la phase épinglée. On pilote le hero par le
défilement du document lui-même : de 0 à 70svh, exactement la durée
pendant laquelle le pin tient. Pas de contain, pas de cover. */
.hero:not(.hero--flat) .hero__media img,
.hero:not(.hero--flat) .hero__media video{
will-change:transform;
animation:hero-zoom linear both;animation-timeline:scroll(root);animation-range:0 70svh}
.hero:not(.hero--flat) .hero__deep{animation:hero-deep linear both;animation-timeline:scroll(root);animation-range:0 70svh}
.hero:not(.hero--flat) .hero__content{will-change:transform,opacity;animation:hero-sink linear both;animation-timeline:scroll(root);animation-range:0 66svh}
.hero:not(.hero--flat) .hero__scroll,.hero:not(.hero--flat) .hero__caption{animation:fade-out linear both;animation-timeline:scroll(root);animation-range:0 20svh}
/* --- Révélations génériques : fondu + courte montée (≤ 24 px) --- */
.rise{animation:rise linear both;animation-timeline:view();animation-range:entry 5% entry 60%}
.rise--late{animation-range:entry 20% entry 90%}
.unveil img,.unveil video{will-change:transform;animation:unveil linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
/* --- Manifeste : rai de lumière qui traverse --- */
.manifesto::before{content:"";position:absolute;inset:-20% -10%;pointer-events:none;
background:radial-gradient(60% 45% at 30% 10%,rgba(111,163,156,.22),transparent 70%);
animation:shaft linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
/* --- Accueil, six familles : chaque bande s'ouvre en onde --- */
.famille-row__media img{will-change:transform;animation:unveil linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
.famille-row__body{animation:rise linear both;animation-timeline:view();animation-range:entry 10% entry 70%}
/* --- Réalisations, axe vertical : la couverture du palier s'ouvre en onde
depuis la ligne de jonction, puis se creuse quand la bande la recouvre --- */
.palier{view-timeline:--palier block}
.palier__cover{will-change:clip-path;animation:onde linear both;animation-timeline:--palier;animation-range:entry 0% entry 60%}
.palier__cover img{will-change:transform;animation:palier-zoom linear both;animation-timeline:--palier;animation-range:entry 0% exit 100%}
.palier__title{animation:rise linear both;animation-timeline:--palier;animation-range:entry 15% entry 50%}
/* --- Réalisations, axe horizontal : le galet qui ricoche ---
Chaque carte rebondit à l'entrée et se pose au centre (view sur l'axe inline). */
.rail > li{
will-change:transform,opacity;
animation:ricochet-card linear both;animation-timeline:view(inline);animation-range:entry 0% exit 100%}
/* Le galet suit le défilement du rail (chronologie nommée, portée au palier). */
.palier{timeline-scope:--rail}
.rail{scroll-timeline:--rail inline}
.ricochet__pebble{display:block;animation:hop2 linear both;animation-timeline:--rail}
.ricochet[data-n="3"] .ricochet__pebble{animation-name:hop3}
.ricochet[data-n="4"] .ricochet__pebble{animation-name:hop4}
.ricochet[data-n="5"] .ricochet__pebble{animation-name:hop5}
.ricochet[data-n="1"] .ricochet__pebble{display:none}
/* --- L'anneau de l'onde : un ménisque de lumière qui suit le bord du cercle --- */
.palier__cover::after{animation:onde-ring linear both;animation-timeline:--palier;animation-range:entry 0% entry 60%}
/* --- Écran large seulement : caustique et plancton ---
La caustique est le réseau de lumière que le soleil dessine au fond d'un
bassin. Deux calques de la même tuile, poussés par le défilement en sens
inverse : l'eau bouge quand on descend et se calme quand on lit. Vive
pendant le passage, discrète une fois le palier posé, masquée à gauche
pour laisser le titre lisible. */
@media (min-width:768px){
/* Réfraction : pendant que la photo entre dans la fenêtre, on la voit à
travers une surface qui bouge (copie de l'image passée par un filtre de
déplacement SVG) ; la copie s'efface à mesure que l'image se pose, et
l'eau est calme quand on la regarde. Même zoom que l'image dessous,
sinon les deux calques se dédoublent. visibility:hidden en fin de plage
libère le calque composité. */
.refrac{display:block;position:absolute;inset:0;pointer-events:none;background:var(--img) center/cover no-repeat;will-change:opacity,transform}
/* --img est posé en style= dans le HTML ; un url() passé par var() se résout par rapport à CETTE feuille, d'où le ../medias/ dans le HTML. */
.palier__cover .refrac{filter:url(#refraction) saturate(.85);
animation:palier-zoom linear both,eau-calme linear both;animation-timeline:--palier,--palier;animation-range:entry 0% exit 100%,entry 15% entry 100%}
.famille-row__media .refrac{filter:url(#refraction) saturate(.9);
animation:unveil linear both,eau-calme linear both;animation-timeline:view(),view();animation-range:entry 0% entry 100%,entry 0% entry 90%}
.caustique{display:block;position:absolute;inset:-25% -15%;z-index:1;pointer-events:none;mix-blend-mode:screen;
-webkit-mask-image:linear-gradient(100deg,transparent 28%,#000 62%);mask-image:linear-gradient(100deg,transparent 28%,#000 62%);
animation:calme linear both;animation-timeline:--palier;animation-range:entry 0% entry 100%}
.caustique::before,.caustique::after{content:"";position:absolute;inset:0;will-change:transform;background:url("data:image/svg+xml;utf8,") 0 0/760px}
.caustique::before{animation:derive-a linear both;animation-timeline:--palier;animation-range:entry 0% exit 100%}
.caustique::after{background-size:440px;opacity:.55;animation:derive-b linear both;animation-timeline:--palier;animation-range:entry 0% exit 100%}
/* Plancton : un voile de particules en suspension, fixé à l'eau et non à
la page. Il glisse lentement à contresens quand on descend. */
.plancton{display:none;position:fixed;inset:0 0 -130vh 0;z-index:1;pointer-events:none;opacity:.5;will-change:transform;
background:url("data:image/svg+xml;utf8,") 0 0/700px;animation:plancton linear both;animation-timeline:scroll(root)}
}
/* --- Fiche chantier : galeries et comparateur --- */
.galerie > *,.planche > *{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
.chiffres div{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
}
}
@keyframes deepen{from{opacity:0}to{opacity:.85}}
@keyframes nav-solid{from{background-color:transparent;backdrop-filter:blur(0);border-bottom-color:transparent}to{background-color:rgba(11,20,22,.82);backdrop-filter:blur(14px);border-bottom-color:var(--ecume-12)}}
@keyframes hero-zoom{from{transform:scale(1)}to{transform:scale(1.28)}}
@keyframes hero-deep{from{opacity:0}to{opacity:.92}}
@keyframes hero-sink{from{transform:translateY(0);opacity:1}to{transform:translateY(-8svh);opacity:0}}
@keyframes fade-out{from{opacity:1}to{opacity:0}}
@keyframes rise{from{opacity:.001;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes unveil{from{transform:scale(1.08)}to{transform:scale(1)}}
@keyframes eau-calme{from{opacity:1;visibility:visible}to{opacity:0;visibility:hidden}}
@keyframes shaft{from{background-position:-20% 0}to{background-position:40% 0}}
/* 100 % = le coin le plus loin : le cercle reste un cercle jusqu'au bout de la plage, au lieu de se perdre hors champ. */
@keyframes onde{from{clip-path:circle(0% at 50% 0%)}to{clip-path:circle(101% at 50% 0%)}}
@keyframes onde-ring{0%{--onde:0%;opacity:1}85%{opacity:1}100%{--onde:106%;opacity:0}}
@keyframes calme{from{opacity:.5}60%{opacity:.16}to{opacity:.13}}
@keyframes derive-a{from{transform:translate3d(0,0,0)}to{transform:translate3d(-9%,-12%,0)}}
@keyframes derive-b{from{transform:translate3d(0,0,0)}to{transform:translate3d(7%,-16%,0)}}
@keyframes plancton{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-120vh,0)}}
@keyframes plancton-pres{from{transform:translate3d(0,0,0)}to{transform:translate3d(-3vw,-40vh,0)}}
@keyframes palier-zoom{from{transform:scale(1.06)}to{transform:scale(1)}}
@keyframes ricochet-card{
0%{transform:translateY(22px) scale(.94);opacity:.55}
36%{transform:translateY(0) scale(1);opacity:1}
64%{transform:translateY(0) scale(1);opacity:1}
100%{transform:translateY(22px) scale(.94);opacity:.55}
}
/* Le galet : autant de rebonds que de cartes moins une. 100cqi = distance entre le premier et le dernier galet. */
@keyframes hop2{0%{translate:0 0}50%{translate:50cqi -9px}100%{translate:100cqi 0}}
@keyframes hop3{0%{translate:0 0}25%{translate:25cqi -9px}50%{translate:50cqi 0}75%{translate:75cqi -7px}100%{translate:100cqi 0}}
@keyframes hop4{0%{translate:0 0}16.7%{translate:16.7cqi -9px}33.3%{translate:33.3cqi 0}50%{translate:50cqi -7px}66.7%{translate:66.7cqi 0}83.3%{translate:83.3cqi -5px}100%{translate:100cqi 0}}
@keyframes hop5{0%{translate:0 0}12.5%{translate:12.5cqi -9px}25%{translate:25cqi 0}37.5%{translate:37.5cqi -7px}50%{translate:50cqi 0}62.5%{translate:62.5cqi -6px}75%{translate:75cqi 0}87.5%{translate:87.5cqi -4px}100%{translate:100cqi 0}}
/* Mouvement réduit : on garde les fondus, on coupe tout déplacement. Le
bloc ci-dessus ne s'applique déjà plus ; on neutralise en plus les transitions
de déplacement du survol. */
@media (prefers-reduced-motion:reduce){
.btn:hover,.famille-row:hover .famille-row__go svg{translate:0}
.hero{height:auto}
.hero__pin{position:relative;height:100svh}
.palier__cover{position:relative}
.gauge__plomb{transition:none}
}
@media print{
.nav,.grain,.depth,.vpause,.gauge,.strip__nav,.ricochet,.skip,.plancton,.caustique,.refrac,.hero__reflet{display:none!important}
body{background:#fff;color:#000}
.palier__cover{position:static;height:auto}
}