/* =========================================================================
   SPLASH AVENTURES — feuille de style
   1. Jetons      2. Base       3. Boutons    4. En-tete    5. Hero
   6. Ligne d'eau 7. Couloirs   8. Blocs      9. Formulaire 10. Pied de page
   ========================================================================= */

/* ---------- 1. JETONS ---------------------------------------------------- */
:root{
  --abysse:#06293B;
  --abysse-2:#0A3C55;
  --abysse-3:#125A7A;
  --lagon:#0FB5C4;
  --lagon-fonce:#0A8F9C;
  --lagon-clair:#6FE0E8;
  --corail:#FF6A4D;
  --corail-fonce:#E8492A;
  --soleil:#FFC24A;
  --creme:#FFF7EF;
  --creme-2:#FBE9DC;
  --blanc:#FFFFFF;
  --encre:#0E2430;
  --gris:#54707E;
  --gris-clair:#8FA5AF;
  --bordure:rgba(6,41,59,.12);
  --bordure-forte:rgba(6,41,59,.22);

  --ombre-s:0 1px 2px rgba(6,41,59,.06),0 4px 12px rgba(6,41,59,.06);
  --ombre-m:0 2px 4px rgba(6,41,59,.05),0 12px 32px rgba(6,41,59,.10);
  --ombre-l:0 4px 8px rgba(6,41,59,.06),0 28px 60px rgba(6,41,59,.16);

  --r-s:10px; --r-m:18px; --r-l:28px; --r-xl:40px;
  --conteneur:1240px;
  --gouttiere:clamp(1.15rem,4vw,2.5rem);
  --section:clamp(4rem,8vw,7.5rem);

  --police-titre:"Fredoka","Trebuchet MS",system-ui,sans-serif;
  --police-texte:"Outfit","Segoe UI",system-ui,-apple-system,sans-serif;
}

/* ---------- 2. BASE ------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
/* Un mot insecable (adresse email, lien) ne doit jamais elargir la page. */
body{overflow-wrap:break-word}
body{
  margin:0;background:var(--creme);color:var(--encre);
  font-family:var(--police-texte);font-size:1.0625rem;line-height:1.7;
  font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--corail);outline-offset:3px;border-radius:4px}

h1,h2,h3,h4{font-family:var(--police-titre);font-weight:600;line-height:1.08;
  letter-spacing:-.02em;margin:0 0 .5em;color:var(--abysse)}
h1{font-size:clamp(2.4rem,5.4vw,4.4rem)}
h2{font-size:clamp(1.95rem,3.6vw,3rem)}
h3{font-size:clamp(1.2rem,1.9vw,1.55rem);letter-spacing:-.01em}
h4{font-size:1.05rem;letter-spacing:0}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
strong{font-weight:600}

.conteneur{width:100%;max-width:var(--conteneur);margin-inline:auto;padding-inline:var(--gouttiere)}
.conteneur--etroit{max-width:820px}
.section{padding-block:var(--section)}
.section--creme{background:var(--creme)}
.section--blanc{background:var(--blanc)}
.section--sable{background:linear-gradient(180deg,var(--creme) 0%,var(--creme-2) 100%)}
.section--abysse{background:var(--abysse);color:#D8E7EE}
.section--abysse h2,.section--abysse h3{color:var(--blanc)}

.surtitre{
  display:inline-flex;align-items:center;gap:.55rem;
  font-size:.74rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--lagon-fonce);margin:0 0 1rem;
}
.surtitre::before{content:"";width:26px;height:2px;background:currentColor;border-radius:2px}
.section--abysse .surtitre{color:var(--lagon-clair)}

.chapo{font-size:clamp(1.08rem,1.5vw,1.28rem);line-height:1.62;color:var(--gris);max-width:64ch}
.section--abysse .chapo{color:#A9C5D2}

.entete-section{max-width:58ch;margin-bottom:clamp(2.5rem,4vw,3.75rem)}
.entete-section--centre{margin-inline:auto;text-align:center}
.entete-section--centre .surtitre{justify-content:center}

.saut-contenu{position:absolute;left:-9999px;top:0;background:var(--corail);color:#fff;
  padding:.8rem 1.2rem;z-index:200;border-radius:0 0 var(--r-s) 0;font-weight:600}
.saut-contenu:focus{left:0}

/* ---------- 3. BOUTONS --------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.92rem 1.65rem;border:2px solid transparent;border-radius:999px;
  font-weight:600;font-size:.97rem;letter-spacing:.01em;cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease;
  text-align:center;
}
/* Un libelle long (adresse email) ne doit pas elargir la page. */
.btn{max-width:100%;overflow-wrap:anywhere}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--corail{background:var(--corail);color:#fff;box-shadow:0 8px 22px rgba(255,106,77,.32)}
.btn--corail:hover{background:var(--corail-fonce);box-shadow:0 12px 30px rgba(255,106,77,.4)}
.btn--lagon{background:var(--lagon);color:#03242C;box-shadow:0 8px 22px rgba(15,181,196,.3)}
.btn--lagon:hover{background:var(--lagon-fonce);color:#fff}
.btn--soleil{background:var(--soleil);color:#3A2604;box-shadow:0 8px 22px rgba(255,194,74,.35)}
.btn--soleil:hover{background:#FFB01F}
.btn--abysse{background:var(--abysse);color:#fff}
.btn--abysse:hover{background:var(--abysse-2)}
.btn--fantome{background:transparent;color:currentColor;border-color:currentColor}
.btn--fantome:hover{background:rgba(255,255,255,.12)}
.btn--contour{background:transparent;color:var(--abysse);border-color:var(--bordure-forte)}
.btn--contour:hover{border-color:var(--abysse);background:rgba(6,41,59,.04)}
.btn--sm{padding:.62rem 1.15rem;font-size:.88rem}
.btn--lg{padding:1.08rem 2.1rem;font-size:1.04rem}
.btn--bloc{display:flex;width:100%}
.btn .ico{width:19px;height:19px;flex:none}

.lien-fleche{display:inline-flex;align-items:center;gap:.45rem;font-weight:600;color:var(--lagon-fonce)}
.lien-fleche .ico{width:18px;height:18px;transition:transform .2s ease}
.lien-fleche:hover .ico{transform:translateX(4px)}

.ico{width:24px;height:24px;flex:none}
.ico--sm{width:18px;height:18px}

/* ---------- 4. EN-TETE --------------------------------------------------- */
.entete{
  position:sticky;top:0;z-index:100;
  background:rgba(255,247,239,.86);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .25s ease,box-shadow .25s ease,background .25s ease;
}
.entete.est-collee{border-bottom-color:var(--bordure);box-shadow:0 6px 24px rgba(6,41,59,.07)}
.entete__inner{
  max-width:var(--conteneur);margin-inline:auto;padding:.85rem var(--gouttiere);
  display:flex;align-items:center;gap:1.5rem;
}
.logo{display:flex;align-items:center;gap:.6rem;flex:none}
.logo__mark{width:34px;height:34px;color:var(--lagon);display:block}
.logo__mark svg{width:100%;height:100%;display:block}
.logo__mots{display:flex;flex-direction:column;line-height:1;font-family:var(--police-titre)}
.logo__mots strong{font-size:1.22rem;font-weight:600;color:var(--abysse);letter-spacing:-.02em}
.logo__mots em{font-style:normal;font-size:.7rem;font-weight:500;letter-spacing:.19em;
  text-transform:uppercase;color:var(--lagon-fonce);margin-top:.18rem}
.logo--inverse .logo__mots strong{color:#fff}
.logo--inverse .logo__mots em{color:var(--lagon-clair)}

.nav{margin-left:auto}
.nav__liste{display:flex;align-items:center;gap:.15rem;list-style:none;margin:0;padding:0}
.nav__item{position:relative}
.nav__lien{display:inline-flex;align-items:center;gap:.3rem;padding:.55rem .78rem;border-radius:999px;
  font-size:.94rem;font-weight:500;color:var(--encre);transition:background .18s ease,color .18s ease}
.nav__lien:hover,.nav__lien.est-actif{background:rgba(15,181,196,.13);color:var(--lagon-fonce)}
.nav__chevron{width:11px;height:8px;transition:transform .2s ease}
.nav__item--deroulant:hover .nav__chevron{transform:rotate(180deg)}

.sous-menu{
  position:absolute;top:calc(100% + .5rem);left:50%;transform:translateX(-50%) translateY(8px);
  width:330px;background:var(--blanc);border:1px solid var(--bordure);border-radius:var(--r-m);
  box-shadow:var(--ombre-l);padding:.5rem;opacity:0;visibility:hidden;transition:all .2s ease;
}
.nav__item--deroulant:hover .sous-menu,
.nav__item--deroulant:focus-within .sous-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.sous-menu ul{list-style:none;margin:0;padding:0}
.sous-menu a{display:block;padding:.65rem .8rem;border-radius:var(--r-s);transition:background .16s ease}
.sous-menu a:hover{background:var(--creme)}
.sous-menu span{display:block;font-weight:600;font-size:.94rem;color:var(--abysse)}
.sous-menu small{display:block;font-size:.8rem;color:var(--gris);line-height:1.45;margin-top:.1rem}

.entete__actions{display:flex;align-items:center;gap:.7rem;flex:none}
.tel-entete{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;font-size:.92rem;
  color:var(--abysse);white-space:nowrap}
.tel-entete:hover{color:var(--lagon-fonce)}

.burger{display:none;width:44px;height:44px;border:1px solid var(--bordure);background:var(--blanc);
  border-radius:12px;flex-direction:column;justify-content:center;align-items:center;gap:5px;padding:0}
.burger span{display:block;width:19px;height:2px;background:var(--abysse);border-radius:2px;transition:transform .25s,opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.menu-mobile{position:fixed;inset:0;top:0;z-index:99;background:var(--creme);
  padding:5.5rem var(--gouttiere) 2rem;overflow-y:auto}
.menu-mobile[hidden]{display:none}
.menu-mobile ul{list-style:none;margin:0 0 1.5rem;padding:0}
.menu-mobile li a{display:block;padding:.95rem .25rem;font-size:1.18rem;font-weight:500;
  font-family:var(--police-titre);color:var(--abysse);border-bottom:1px solid var(--bordure)}
.menu-mobile__sep{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--lagon-fonce);font-weight:600;padding:1.4rem .25rem .4rem}
.menu-mobile__pied{display:grid;gap:.7rem}
.menu-mobile__pied .btn--fantome{color:var(--abysse)}
body.menu-ouvert{overflow:hidden}

/* ---------- 5. HERO ------------------------------------------------------ */
.hero{position:relative;background:var(--abysse);color:#fff;overflow:hidden;isolation:isolate}
.hero__eau{
  position:absolute;inset:-25%;z-index:0;
  background:
    radial-gradient(36% 42% at 18% 22%,rgba(111,224,232,.30),transparent 62%),
    radial-gradient(30% 38% at 80% 16%,rgba(15,181,196,.34),transparent 64%),
    radial-gradient(50% 55% at 62% 92%,rgba(18,90,122,.75),transparent 72%);
  filter:blur(6px);animation:derive 30s ease-in-out infinite alternate;
}
.hero__grain{
  position:absolute;inset:0;z-index:1;opacity:.5;mix-blend-mode:soft-light;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='3' seed='7'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
@keyframes derive{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(-3%,2%,0) scale(1.08)}
}
.hero__inner{position:relative;z-index:2;max-width:var(--conteneur);margin-inline:auto;
  padding:clamp(2rem,4vw,3.2rem) var(--gouttiere) clamp(2rem,4vw,3.2rem);
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(2rem,4vw,3.5rem);align-items:center}
.hero__mots{min-width:0}
.hero__marque{display:inline-flex;align-items:center;gap:.6rem;padding:.42rem .95rem .42rem .5rem;
  border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);
  font-size:.79rem;font-weight:500;letter-spacing:.05em;color:#CFE9EF;margin-bottom:1.1rem}
.hero__marque b{display:inline-flex;align-items:center;gap:.3rem;background:var(--soleil);color:#3A2604;
  padding:.16rem .6rem;border-radius:999px;font-size:.72rem;font-weight:700;letter-spacing:.04em}
.hero h1{color:#fff;max-width:21ch;margin-bottom:.3em}
.hero h1 .surlign{color:var(--soleil)}

.hero__texte{font-size:clamp(1.05rem,1.55vw,1.3rem);color:#B9D5E0;max-width:52ch;line-height:1.6}
.hero__actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:1.6rem}
/* Bande de preuves, sous les couloirs */
.bande-preuves{background:var(--creme);border-bottom:1px solid var(--bordure)}
.preuves{display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem 2rem;list-style:none;
  max-width:var(--conteneur);margin-inline:auto;padding:1rem var(--gouttiere)}
.preuves li{display:flex;align-items:center;gap:.5rem;font-size:.88rem;color:var(--gris);font-weight:500}
.preuves .ico{width:17px;height:17px;color:var(--lagon-fonce);flex:none}

/* ------------------------------------------------------------------------
   LES TROIS COULOIRS — l'element signature de la page.
   Metaphore assumee : trois couloirs de piscine, numerotes comme dans un
   bassin, chacun sa couleur. C'est la premiere chose que le visiteur doit
   comprendre, donc c'est le seul endroit ou l'on force le contraste.
   ------------------------------------------------------------------------ */
.couloirs__intro .intro-court{display:none}
.couloirs__intro{margin:0 0 .7rem;font-size:.75rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.55)}
.couloirs{min-width:0;display:flex;flex-direction:column;gap:.6rem}
.couloir{
  position:relative;display:flex;align-items:center;gap:1rem;text-decoration:none;
  padding:.95rem 1.2rem .95rem 1.15rem;border-radius:var(--r-m);overflow:hidden;isolation:isolate;
  background:#fff;border:1.5px solid rgba(255,255,255,.9);
  box-shadow:0 10px 26px rgba(0,0,0,.22);
  transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s ease,
             background .28s ease,border-color .28s ease;
}

/* La ligne d'eau : bandeau plein en haut de chaque couloir */
.couloir::before{content:"";position:absolute;left:0;top:0;bottom:0;width:7px;background:var(--lagon)}
.couloir--corail::before{background:var(--corail)}
.couloir--soleil::before{background:var(--soleil)}
.couloir:hover{transform:translateX(5px);box-shadow:0 16px 36px rgba(0,0,0,.34)}

.couloir:focus-visible{outline:3px solid var(--soleil);outline-offset:3px}
/* Le numero de couloir, en gros, comme au bord d'un bassin */
.couloir__num{flex:none;width:1.75em;text-align:center;white-space:nowrap;
  font-family:var(--police-titre);font-size:1.9rem;font-weight:700;line-height:1;
  color:#0A8F9C}
.couloir--lagon .couloir__num{color:#0A8F9C}
.couloir--corail .couloir__num{color:#E14C2C}
.couloir--soleil .couloir__num{color:#B87C00}
.couloir__corps{flex:1;min-width:0;display:flex;flex-direction:column;gap:.05rem}
.couloir__marque{font-size:.7rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--lagon-fonce)}
.couloir--corail .couloir__marque{color:#D4421F}
.couloir--soleil .couloir__marque{color:#A66E00}
.couloir__titre{font-family:var(--police-titre);font-size:clamp(1.1rem,1.5vw,1.28rem);
  font-weight:600;color:var(--abysse);line-height:1.2;margin-top:.15rem}
.couloir__age{font-size:.85rem;color:var(--gris);margin-top:.05rem}
.couloir__lien{flex:none;display:inline-flex;align-items:center;color:var(--lagon-fonce);font-size:0}
.couloir__lien .ico{width:22px;height:22px}
.couloir:hover .couloir__lien{transform:translateX(3px)}
.couloir__lien{transition:transform .25s ease}
.couloir__lien .ico{width:17px;height:17px;transition:transform .2s ease}
.couloir:hover .couloir__lien .ico{transform:translateX(4px)}

/* ---------- 6. LIGNE D'EAU (element signature) --------------------------- */
.ligne-eau{
  height:22px;width:100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='22' viewBox='0 0 40 22'%3E%3Crect y='9.6' width='40' height='2.8' fill='%23C7DBE4'/%3E%3Ccircle cx='10' cy='11' r='9.2' fill='%230FB5C4'/%3E%3Ccircle cx='30' cy='11' r='9.2' fill='%23FF6A4D'/%3E%3C/svg%3E");
  background-repeat:repeat-x;background-position:center;background-size:40px 22px;
}
.ligne-eau--sombre{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='22' viewBox='0 0 40 22'%3E%3Crect y='9.6' width='40' height='2.8' fill='%230A3C55'/%3E%3Ccircle cx='10' cy='11' r='9.2' fill='%230FB5C4'/%3E%3Ccircle cx='30' cy='11' r='9.2' fill='%23FFC24A'/%3E%3C/svg%3E");
}
.ligne-eau--fine{height:14px;background-size:26px 14px;opacity:.75}

/* ---------- 7. POLES (sections detaillees) ------------------------------- */
.pole{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.pole--inverse .pole__media{order:2}
.pole__media{position:relative;border-radius:var(--r-l);overflow:hidden;box-shadow:var(--ombre-l);
  aspect-ratio:4/3;background:var(--abysse-2)}
.pole__media img{width:100%;height:100%;object-fit:cover}
.pole__etiquette{position:absolute;left:1.1rem;bottom:1.1rem;background:var(--blanc);
  padding:.5rem 1rem;border-radius:999px;font-size:.8rem;font-weight:600;color:var(--abysse);
  box-shadow:var(--ombre-s)}
.pole__num{font-family:var(--police-titre);font-size:.8rem;font-weight:600;letter-spacing:.2em;
  color:var(--lagon-fonce);display:block;margin-bottom:.6rem}
.pole__marque{display:inline-block;font-size:.76rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;padding:.3rem .75rem;border-radius:999px;margin-bottom:1rem;
  background:rgba(15,181,196,.14);color:var(--lagon-fonce)}
.pole--corail .pole__marque{background:rgba(255,106,77,.14);color:var(--corail-fonce)}
.pole--soleil .pole__marque{background:rgba(255,194,74,.22);color:#94640B}
.pole--corail .pole__num{color:var(--corail-fonce)}
.pole--soleil .pole__num{color:#94640B}
.pole__accroche{font-family:var(--police-titre);font-size:clamp(1.08rem,1.5vw,1.24rem);
  font-weight:500;color:var(--abysse);line-height:1.45;margin-bottom:.9rem}
.pole__puces{list-style:none;margin:1.4rem 0 1.9rem;padding:0;display:grid;gap:.65rem}
.pole__puces li{display:flex;gap:.65rem;align-items:flex-start;font-size:.98rem;color:var(--gris)}
.pole__puces .ico{width:20px;height:20px;color:var(--lagon);margin-top:.15rem}
.pole--corail .pole__puces .ico{color:var(--corail)}
.pole--soleil .pole__puces .ico{color:var(--soleil)}

/* ---------- 8. BLOCS ----------------------------------------------------- */
.grille{display:grid;gap:1.35rem}
.grille--2{grid-template-columns:repeat(2,1fr)}
.grille--3{grid-template-columns:repeat(3,1fr)}
.grille--4{grid-template-columns:repeat(4,1fr)}

.carte{background:var(--blanc);border:1px solid var(--bordure);border-radius:var(--r-m);
  padding:1.75rem;transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease}
.carte:hover{transform:translateY(-4px);box-shadow:var(--ombre-m);border-color:transparent}
.carte h3{margin-bottom:.5rem}
.carte p{font-size:.96rem;color:var(--gris);margin:0}
.carte__ico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  background:rgba(15,181,196,.13);color:var(--lagon-fonce);margin-bottom:1.1rem}
.carte__ico .ico{width:23px;height:23px}
.carte--cible{font-size:.76rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--lagon-fonce)}

/* Chiffres */
.chiffres{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;list-style:none;margin:0;padding:0}
.chiffre{text-align:center;padding:1.6rem 1rem;border-radius:var(--r-m);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.chiffre__val{display:block;font-family:var(--police-titre);font-size:clamp(2.2rem,4.4vw,3.2rem);
  font-weight:600;color:var(--soleil);line-height:1;font-variant-numeric:tabular-nums}
.chiffre__label{display:block;font-weight:600;color:#fff;margin-top:.6rem;font-size:.98rem}
.chiffre__detail{display:block;font-size:.83rem;color:#9FC2D0;margin-top:.2rem}

/* Sur mesure */
.sur-mesure{display:grid;gap:0;border:1px solid var(--bordure);border-radius:var(--r-m);
  overflow:hidden;background:var(--blanc)}
.sur-mesure__ligne{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) auto;
  gap:1.5rem;align-items:center;padding:1.6rem 1.75rem;border-bottom:1px solid var(--bordure);
  transition:background .2s ease}
.sur-mesure__ligne:last-child{border-bottom:0}
.sur-mesure__ligne:hover{background:var(--creme)}
.sur-mesure__ligne h3{margin:0 0 .25rem;font-size:1.12rem}
.sur-mesure__cible{font-size:.78rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--lagon-fonce)}
.sur-mesure__ligne p{font-size:.94rem;color:var(--gris);margin:0}

/* Avis */
.avis{display:grid;grid-template-columns:repeat(3,1fr);gap:1.35rem}
.avis__carte{background:var(--blanc);border:1px solid var(--bordure);border-radius:var(--r-m);padding:1.7rem}
.avis__notes{display:flex;gap:.15rem;color:var(--soleil);margin-bottom:.9rem}
.avis__notes .ico{width:18px;height:18px;fill:currentColor}
.avis__texte{font-size:1rem;color:var(--encre);line-height:1.62}
.avis__auteur{margin-top:1.1rem;font-weight:600;font-size:.94rem}
.avis__detail{font-size:.85rem;color:var(--gris)}

/* Zone d'intervention */
.zone__communes{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:1.8rem 0 0;padding:0}
.zone__communes li{font-size:.87rem;padding:.42rem .85rem;border-radius:999px;
  background:var(--blanc);border:1px solid var(--bordure);color:var(--gris)}

/* FAQ */
.faq{max-width:820px;margin-inline:auto;display:grid;gap:.7rem}
.faq__item{background:var(--blanc);border:1px solid var(--bordure);border-radius:var(--r-m);overflow:hidden}
.faq__q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1.2rem;
  padding:1.2rem 1.45rem;background:none;border:0;text-align:left;font-family:var(--police-titre);
  font-size:1.05rem;font-weight:500;color:var(--abysse)}
.faq__plus{position:relative;width:22px;height:22px;flex:none}
.faq__plus::before,.faq__plus::after{content:"";position:absolute;background:var(--lagon-fonce);
  border-radius:2px;transition:transform .25s ease}
.faq__plus::before{left:0;top:10px;width:22px;height:2px}
.faq__plus::after{left:10px;top:0;width:2px;height:22px}
.faq__item.est-ouvert .faq__plus::after{transform:rotate(90deg)}
.faq__r{padding:0 1.45rem;max-height:0;overflow:hidden;transition:max-height .3s ease,padding .3s ease}
.faq__item.est-ouvert .faq__r{padding-bottom:1.4rem;max-height:460px}
.faq__r p{font-size:.98rem;color:var(--gris);margin:0}

/* Timeline / histoire */
.jalons{list-style:none;margin:0;padding:0;display:grid;gap:0;position:relative}
.jalon{display:grid;grid-template-columns:120px 1fr;gap:1.8rem;padding:1.8rem 0;
  border-top:1px solid var(--bordure)}
.jalon:first-child{border-top:0;padding-top:0}
.jalon__annee{font-family:var(--police-titre);font-size:1.5rem;font-weight:600;color:var(--lagon-fonce);
  line-height:1.1}
.jalon h3{margin-bottom:.4rem}
.jalon p{font-size:.98rem;color:var(--gris);margin:0}

/* Equipe */
.equipe{display:grid;grid-template-columns:repeat(4,1fr);gap:1.35rem}
.membre{background:var(--blanc);border:1px solid var(--bordure);border-radius:var(--r-m);overflow:hidden}
.membre__photo{aspect-ratio:1/1;background:linear-gradient(140deg,var(--abysse-2),var(--lagon-fonce));
  display:grid;place-items:center;color:#fff;font-family:var(--police-titre);font-size:2.4rem;font-weight:600}
.membre__photo img{width:100%;height:100%;object-fit:cover}
.membre__corps{padding:1.25rem 1.35rem 1.5rem}
.membre h3{font-size:1.08rem;margin-bottom:.15rem}
.membre__role{font-size:.82rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--lagon-fonce);margin-bottom:.6rem}
.membre p{font-size:.92rem;color:var(--gris);margin:0}

/* Galerie */
.galerie-filtres{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-bottom:2.2rem}
.galerie-filtres button{padding:.55rem 1.15rem;border-radius:999px;border:1px solid var(--bordure);
  background:var(--blanc);font-size:.9rem;font-weight:500;color:var(--gris);transition:all .18s ease}
.galerie-filtres button:hover{border-color:var(--abysse)}
.galerie-filtres button.est-actif{background:var(--abysse);border-color:var(--abysse);color:#fff}
.galerie{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.galerie figure{margin:0;position:relative;border-radius:var(--r-m);overflow:hidden;
  aspect-ratio:4/3;background:var(--abysse-2)}
.galerie img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.galerie figure:hover img{transform:scale(1.05)}
.galerie figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.6rem 1.1rem .9rem;
  background:linear-gradient(transparent,rgba(6,41,59,.85));color:#fff;font-size:.9rem;font-weight:500}
.galerie figure[hidden]{display:none}

/* Postes */
.poste{background:var(--blanc);border:1px solid var(--bordure);border-radius:var(--r-m);
  padding:1.7rem 1.8rem;display:grid;gap:.6rem}
.poste__entete{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.6rem}
.poste h3{margin:0}
.poste__contrat{font-size:.82rem;font-weight:600;color:var(--lagon-fonce);
  background:rgba(15,181,196,.12);padding:.32rem .8rem;border-radius:999px}
.poste dl{display:grid;gap:.35rem;margin:0}
.poste dt{font-size:.78rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--gris-clair)}
.poste dd{margin:0;font-size:.96rem;color:var(--gris)}

/* ---------- 9. FORMULAIRE ------------------------------------------------ */
.contact-grille{display:grid;grid-template-columns:1.25fr .85fr;gap:clamp(2rem,4vw,3.5rem);align-items:start}
.contact-grille > *{min-width:0}
.form-carte{background:var(--blanc);border:1px solid var(--bordure);border-radius:var(--r-l);
  padding:clamp(1.6rem,3vw,2.6rem);box-shadow:var(--ombre-m)}
.champ{display:grid;gap:.4rem;margin-bottom:1.15rem}
.champ label{font-size:.9rem;font-weight:600;color:var(--abysse)}
.champ label .obl{color:var(--corail)}
.champ input,.champ select,.champ textarea{
  width:100%;padding:.85rem 1rem;border:1.5px solid var(--bordure);border-radius:var(--r-s);
  font-family:inherit;font-size:1rem;color:var(--encre);background:var(--creme);
  transition:border-color .18s ease,background .18s ease}
.champ input:focus,.champ select:focus,.champ textarea:focus{
  outline:none;border-color:var(--lagon);background:var(--blanc)}
.champ textarea{min-height:150px;resize:vertical}
.champ small{font-size:.83rem;color:var(--gris)}
.champ-duo{display:grid;grid-template-columns:1fr 1fr;gap:1.15rem}
.case{display:flex;gap:.7rem;align-items:flex-start;font-size:.9rem;color:var(--gris);margin-bottom:1.3rem}
.case input{width:19px;height:19px;margin-top:.15rem;flex:none;accent-color:var(--lagon)}
.pot-de-miel{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}

.infos-contact{display:grid;gap:1rem;min-width:0}
.info-bloc{background:var(--blanc);border:1px solid var(--bordure);border-radius:var(--r-m);padding:1.4rem 1.5rem;
  display:flex;gap:1rem;align-items:flex-start}
.info-bloc > div{min-width:0}
.info-bloc .ico{color:var(--lagon-fonce);margin-top:.15rem}
.info-bloc h3{font-size:1rem;margin:0 0 .25rem}
.info-bloc p,.info-bloc address{font-size:.94rem;color:var(--gris);margin:0;font-style:normal;line-height:1.6}
.info-bloc a{color:var(--lagon-fonce);font-weight:600}
.info-bloc p,.info-bloc address,.info-bloc a{overflow-wrap:anywhere}
.carte-map{border-radius:var(--r-m);overflow:hidden;border:1px solid var(--bordure);aspect-ratio:16/10}
.carte-map iframe{width:100%;height:100%;border:0;display:block}

/* ---------- 10. CTA + PIED DE PAGE --------------------------------------- */
.cta-final{background:linear-gradient(135deg,var(--abysse) 0%,var(--abysse-3) 100%);color:#fff;
  padding-block:clamp(3.2rem,6vw,5rem);position:relative;overflow:hidden}
.cta-final__inner{display:grid;gap:1.6rem;justify-items:center;text-align:center;position:relative;z-index:1}
.cta-final h2{color:#fff;margin:0}
.cta-final__texte p{color:#B9D5E0;margin:.6rem 0 0;font-size:1.06rem;max-width:52ch}
.cta-final__actions{display:flex;flex-wrap:wrap;gap:.85rem;justify-content:center}
.cta-final .btn--fantome{color:#fff}
.cta-final__note{font-size:.87rem;color:#8FB3C3;margin:0}

.pied{background:var(--abysse);color:#A9C5D2;padding-top:clamp(3rem,5vw,4.5rem)}
.pied__grille{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.4fr;gap:2.5rem;padding-bottom:3rem}
.pied__baseline{font-size:.95rem;line-height:1.6;margin:1.1rem 0 1.3rem;max-width:34ch}
.pied__reseaux{display:flex;flex-wrap:wrap;gap:.5rem}
.pied__reseaux a{font-size:.83rem;padding:.4rem .9rem;border-radius:999px;
  border:1px solid rgba(255,255,255,.18);transition:background .18s ease,border-color .18s ease}
.pied__reseaux a:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.4);color:#fff}
.pied__col h3{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--lagon-clair);
  margin-bottom:1.1rem;font-family:var(--police-texte);font-weight:600}
.pied__col ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.pied__col a{font-size:.95rem;transition:color .18s ease}
.pied__col a:hover{color:#fff}
.pied address{font-style:normal;font-size:.95rem;line-height:1.65;margin-bottom:1rem}
.pied__contact{list-style:none;margin:0 0 1.2rem;padding:0;display:grid;gap:.4rem;font-size:.95rem}
.pied__contact a:hover{color:#fff}
.pied__antennes{list-style:none;margin:0;padding:1rem 0 0;border-top:1px solid rgba(255,255,255,.12);
  display:grid;gap:.6rem}
.pied__antennes strong{display:block;font-size:.88rem;color:#fff;font-weight:600}
.pied__antennes span{font-size:.83rem;color:#7FA3B4}
.pied__bas{border-top:1px solid rgba(255,255,255,.12);padding-block:1.4rem}
.pied__bas-inner{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center}
.pied__bas p{font-size:.85rem;margin:0;color:#7FA3B4}
.pied__legal{display:flex;flex-wrap:wrap;gap:1.2rem}
.pied__legal a{font-size:.85rem}
.pied__legal a:hover{color:#fff}

/* Boutons flottants */
.tel-flottant{position:fixed;left:1rem;bottom:1rem;z-index:90;display:none;align-items:center;gap:.5rem;
  background:var(--corail);color:#fff;padding:.85rem 1.3rem;border-radius:999px;font-weight:600;
  box-shadow:0 10px 26px rgba(255,106,77,.4);
  /* Cache tant que le hero est a l'ecran : il y ferait doublon et recouvrirait
     le bouton principal sur les petits telephones. */
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .25s ease,transform .25s ease,visibility .25s}
.tel-flottant.est-visible{opacity:1;visibility:visible;transform:none}
.retour-haut{position:fixed;right:1rem;bottom:1rem;z-index:90;width:46px;height:46px;border-radius:50%;
  border:1px solid var(--bordure);background:var(--blanc);color:var(--abysse);display:grid;place-items:center;
  opacity:0;visibility:hidden;transition:all .25s ease;box-shadow:var(--ombre-m)}
.retour-haut svg{width:21px;height:21px}
.retour-haut.est-visible{opacity:1;visibility:visible}

/* ---------- FIL D'ARIANE + BANNIERE DE PAGE ------------------------------ */
.banniere{background:var(--abysse);color:#fff;padding-block:clamp(3rem,6vw,4.5rem);position:relative;overflow:hidden}
.banniere__eau{position:absolute;inset:-30%;
  background:radial-gradient(40% 60% at 25% 30%,rgba(15,181,196,.32),transparent 65%),
             radial-gradient(35% 50% at 82% 70%,rgba(111,224,232,.2),transparent 68%)}
.banniere .conteneur{position:relative;z-index:1}
.banniere h1{color:#fff;margin-bottom:.4em}
.banniere p{color:#B9D5E0;font-size:clamp(1.02rem,1.4vw,1.18rem);max-width:60ch;margin:0}
.fil{background:var(--blanc);border-bottom:1px solid var(--bordure)}
.fil ol{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:.85rem 0;font-size:.85rem;color:var(--gris)}
.fil li+li::before{content:"›";margin-right:.5rem;color:var(--gris-clair)}
.fil a:hover{color:var(--lagon-fonce)}

/* ---------- PAGES DE TEXTE ----------------------------------------------- */
.texte-legal{max-width:78ch;margin-inline:auto}
.texte-legal h2{font-size:clamp(1.4rem,2.2vw,1.85rem);margin-top:2.6rem}
.texte-legal h2:first-child{margin-top:0}
.texte-legal h3{font-size:1.12rem;margin-top:1.8rem}
.texte-legal p,.texte-legal li{color:var(--gris);font-size:1rem}
.texte-legal ul{padding-left:1.2rem;display:grid;gap:.4rem}
.texte-legal a{color:var(--lagon-fonce);font-weight:600;text-decoration:underline}
.encadre{background:var(--blanc);border:1px solid var(--bordure);border-left:4px solid var(--soleil);
  border-radius:var(--r-s);padding:1.2rem 1.4rem;margin:1.6rem 0}
.encadre p{margin:0;font-size:.95rem}

/* Plan du site */
.plan{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.plan h2{font-size:1.1rem;padding-bottom:.7rem;border-bottom:2px solid var(--lagon);margin-bottom:1rem}
.plan ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.plan a{font-size:.97rem;color:var(--gris)}
.plan a:hover{color:var(--lagon-fonce)}

/* Page 404 / merci */
.centre-message{min-height:52vh;display:grid;place-items:center;text-align:center;padding-block:var(--section)}
.centre-message__inner{max-width:56ch}
.centre-message .btn{margin-top:1.6rem}

/* ---------- ANIMATIONS --------------------------------------------------- */
/* Sans JavaScript, le contenu reste visible : le masquage est conditionne a la
   classe « js » posee par le script en-tete. */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.js .reveal.est-vu{opacity:1;transform:none}
.js .reveal[data-delai="1"]{transition-delay:.08s}
.js .reveal[data-delai="2"]{transition-delay:.16s}
.js .reveal[data-delai="3"]{transition-delay:.24s}

/* ---------- RESPONSIVE --------------------------------------------------- */
@media (max-width:980px){
  .hero__inner{grid-template-columns:1fr;gap:1.8rem;align-items:start}
  .hero h1{max-width:none}
}
@media (max-width:1080px){
  .nav{display:none}
  .burger{display:flex}
  .tel-entete span{display:none}
  .pied__grille{grid-template-columns:1fr 1fr;gap:2rem}
  .equipe{grid-template-columns:repeat(2,1fr)}
  .grille--4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .couloirs{grid-template-columns:1fr;gap:.85rem}
  .pole{grid-template-columns:1fr;gap:2rem}
  .pole--inverse .pole__media{order:0}
  .contact-grille{grid-template-columns:1fr}
  .chiffres{grid-template-columns:repeat(2,1fr)}
  .grille--3{grid-template-columns:1fr 1fr}
  .avis{grid-template-columns:1fr}
  .galerie{grid-template-columns:repeat(2,1fr)}
  .plan{grid-template-columns:1fr 1fr}
  .sur-mesure__ligne{grid-template-columns:1fr;gap:.6rem;padding:1.35rem 1.4rem}
}
@media (max-width:620px){
  /* Sur telephone, l'objectif est que LES TROIS couloirs soient visibles
     sans defiler : on degraisse le bloc de texte au-dessus. */
  .hero__inner{padding-top:1.4rem;padding-bottom:1.6rem;gap:1.3rem}
  .hero__marque{font-size:.72rem;margin-bottom:.8rem;padding:.34rem .8rem .34rem .42rem}
  .hero__marque .villes{display:none}
  .hero h1{font-size:1.95rem;line-height:1.1;margin-bottom:.45rem}
  .hero__texte{font-size:.98rem;margin-bottom:.2rem}
  .hero__actions{margin-top:.95rem;gap:.6rem}
  /* Un seul bouton pleine largeur : le telephone est deja dans l'en-tete
     et le bouton d'appel flottant apparait au premier defilement. */
  .hero__actions .btn--fantome{display:none}
  .hero__actions .btn{width:100%}
  .couloirs{gap:.45rem}
  .couloir{padding:.65rem 1rem .65rem 1.05rem;gap:.75rem}
  .couloir__num{font-size:1.5rem;width:1.8em}
  .couloir__titre{font-size:1.05rem}
  .couloir__age{font-size:.78rem}
  /* Le trait absolu ne suit pas les retours a la ligne : on passe au
     soulignement natif, qui les suit, pour que le titre ne soit jamais coupe. */
  body{font-size:1.02rem}
  .entete__actions .btn{display:none}
  .grille--2,.grille--3,.grille--4{grid-template-columns:1fr}
  .equipe{grid-template-columns:1fr 1fr}
  .galerie{grid-template-columns:1fr}
  .plan{grid-template-columns:1fr}
  .jalon{grid-template-columns:1fr;gap:.5rem;padding:1.4rem 0}
  .champ-duo{grid-template-columns:1fr}
  .pied__grille{grid-template-columns:1fr}
  .tel-flottant{display:inline-flex}
  .retour-haut{right:1rem;bottom:5.2rem}
  .hero__preuves{gap:.8rem 1.2rem}
  .cta-final__actions{width:100%;flex-direction:column}
  .cta-final__actions .btn{width:100%}
}

/* ---------- PREFERENCES & IMPRESSION ------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  .js .reveal{opacity:1;transform:none}
  .hero__eau{animation:none}
}
@media print{
  .entete,.menu-mobile,.cta-final,.pied,.tel-flottant,.retour-haut,.fil{display:none !important}
  body{background:#fff;color:#000;font-size:11pt}
  .hero,.banniere{background:#fff;color:#000}
  .hero h1,.banniere h1{color:#000}
}

/* ---------- ÉCRANS COURTS ------------------------------------------------
   Sur un ecran peu haut, le hero prendrait toute la place et les trois
   couloirs passeraient sous le pli. On degraisse encore. */
@media (max-height:700px) and (max-width:900px){
  .hero__inner{padding-top:.9rem;padding-bottom:1.1rem;gap:.9rem}
  .hero__marque{display:none}
  .hero h1{font-size:1.62rem;margin-bottom:.35rem}
  .hero__texte{display:none}
  .hero__actions{margin-top:.7rem}
  .couloirs__intro{margin-bottom:.4rem}
  .couloirs__intro .intro-long{display:none}
  .couloirs__intro .intro-court{display:inline}
  .couloir{padding:.5rem .85rem .5rem .9rem;gap:.65rem}
  .couloir__age{display:none}
  .couloir__marque{font-size:.63rem;letter-spacing:.1em}
  .couloir__titre{font-size:.98rem;line-height:1.18}
  .couloir__num{font-size:1.3rem;width:1.7em}
  .couloirs{gap:.4rem}
  .hero__actions .btn{padding:.72rem 1rem;font-size:.98rem}
}