/* ═════════════════════════════════════════════════════════════
   PISCINNOVA — maquette home refondue
   Système : eau profonde / calcaire de Provence / lumière
   Signature : « la ligne d'eau », filet animé de caustiques
   ═════════════════════════════════════════════════════════════ */

:root{
  /* ── Couleur ── */
  --abysse:  #06202e;   /* eau profonde : sections sombres, pied de page */
  --eau:     #0b3b54;   /* mi-profondeur : voiles, dégradés */
  --lagon:   #2bb3dc;   /* la lumière qui traverse l'eau : accent froid */
  --soleil:  #e9cb92;   /* caustiques : accent chaud, uniquement sur la ligne */
  --calcaire:#eceee8;   /* pierre de Provence : fonds clairs */
  --craie:   #fafaf8;   /* fond de page */
  --encre:   #0d1b22;   /* texte */
  --brume:   #5f7078;   /* texte secondaire */
  --filet:   #d3d7cf;   /* filets sur clair */
  --filet-s: #1a3b4c;   /* filets sur sombre */

  /* ── Typographie ── */
  --titre: "Archivo", system-ui, sans-serif;
  --texte: "Instrument Sans", system-ui, sans-serif;
  --util:  "DM Mono", ui-monospace, monospace;

  /* ── Trame ── */
  --marge: clamp(1.25rem, 5vw, 5rem);
  --large: 1560px;
  --duree: .9s;
  --courbe: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

section[id]{scroll-margin-top:5.5rem}

body{
  margin:0;
  background:var(--craie);
  color:var(--encre);
  font-family:var(--texte);
  font-size:1.0625rem;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:500}
p{margin:0}
ul,ol,dl,dd{margin:0;padding:0}
li{list-style:none}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.skip{
  position:fixed;left:0;top:0;z-index:100;
  background:var(--abysse);color:#fff;padding:.75rem 1.25rem;
  transform:translateY(-130%);
}
.skip:focus{transform:none}

:focus-visible{outline:2px solid var(--lagon);outline-offset:3px}

/* ─────────────────────────────────────────
   TYPOGRAPHIE
   ───────────────────────────────────────── */

.titre-xl,.titre-l,.titre-m{
  font-family:var(--titre);
  font-variation-settings:"wdth" 112;
  letter-spacing:-.03em;
}

.titre-xl{
  font-size:clamp(2.25rem, 4.2vw, 4.25rem);
  line-height:1.02;
  font-weight:500;
}
.titre-xl em{font-style:normal;font-variation-settings:"wdth" 118;font-weight:500}

.titre-l{
  font-size:clamp(1.875rem, 4.2vw, 3.5rem);
  line-height:1.04;
  font-weight:600;
}

.titre-m{
  font-size:clamp(1.25rem, 2.1vw, 1.75rem);
  line-height:1.18;
  font-weight:600;
  letter-spacing:-.02em;
}

.mono{
  font-family:var(--util);
  font-size:.6875rem;
  line-height:1.6;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--brume);
}

.etiq{margin-bottom:1.5rem}

/* ─────────────────────────────────────────
   BOUTONS ET LIENS
   ───────────────────────────────────────── */

.bouton{
  display:inline-block;
  font-family:var(--util);
  font-size:.6875rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  text-decoration:none;
  padding:1.15rem 2rem;
  border:1px solid currentColor;
  background:none;
  color:inherit;
  cursor:pointer;
  transition:background .4s var(--courbe), color .4s var(--courbe);
}
.bouton--clair{background:var(--craie);color:var(--abysse);border-color:var(--craie)}
.bouton--clair:hover{background:var(--lagon);border-color:var(--lagon);color:var(--abysse)}
.bouton--sombre{background:var(--abysse);color:var(--craie);border-color:var(--abysse)}
.bouton--sombre:hover{background:transparent;color:var(--abysse)}

.lien{
  display:inline-block;
  font-family:var(--util);
  font-size:.6875rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-decoration:none;
  padding-bottom:.35rem;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:100% 1px;
  background-position:0 100%;
  background-repeat:no-repeat;
  transition:background-size .5s var(--courbe);
}
.lien:hover{background-size:34% 1px}

/* ─────────────────────────────────────────
   SIGNATURE — LA LIGNE D'EAU
   Un filet d'1 px qui porte les caustiques :
   le dessin que la lumière fait au fond d'un bassin.
   ───────────────────────────────────────── */

.ligne-eau{
  position:relative;
  height:5px;
  background:linear-gradient(
    rgba(26,59,76,.35), var(--filet-s) 45%, var(--filet-s) 60%, rgba(26,59,76,.35));
  overflow:hidden;
}
.ligne-eau i{
  position:absolute;
  top:-3px;left:0;
  height:11px;width:200%;
  background:repeating-linear-gradient(90deg,
    rgba(233,203,146,0)   0px,
    rgba(233,203,146,.95) 66px,
    rgba(233,203,146,0)   148px,
    rgba(43,179,220,0)    214px,
    rgba(43,179,220,.9)   292px,
    rgba(43,179,220,0)    366px,
    rgba(255,255,255,0)   430px,
    rgba(255,255,255,.7)  478px,
    rgba(255,255,255,0)   534px,
    rgba(127,227,208,0)   592px,
    rgba(127,227,208,.6)  640px,
    rgba(127,227,208,0)   700px);
  filter:blur(3.2px);
  animation:derive 42s linear infinite;
}
@keyframes derive{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.ligne-eau--pied{background:var(--filet-s)}
.ligne-eau--haut{position:absolute;inset:0 0 auto;z-index:2}
.ligne-eau--bas{position:absolute;inset:auto 0 0;z-index:2}

/* ─────────────────────────────────────────
   EN-TÊTE
   ───────────────────────────────────────── */

.tete{
  position:fixed;inset:0 0 auto;z-index:50;
  transition:background .5s var(--courbe), color .5s var(--courbe);
  color:var(--craie);
}
/* voile discret pour tenir la lisibilité au-dessus de la photo */
.tete::before{
  content:"";position:absolute;inset:0 0 -4.5rem;z-index:-1;
  background:linear-gradient(rgba(6,32,46,.72), rgba(6,32,46,0));
  transition:opacity .5s var(--courbe);
}
.tete.est-fixe::before{opacity:0}
.tete__in{
  display:flex;align-items:center;gap:clamp(1rem,3vw,3rem);
  padding:1.1rem var(--marge);
  max-width:var(--large);margin-inline:auto;
}

.marque{display:flex;align-items:center;gap:.7rem;text-decoration:none;flex:none}
.marque img{
  width:34px;height:auto;
  filter:brightness(0) invert(1);          /* logo blanc au-dessus de la photo */
  transition:filter .5s var(--courbe);
}
.est-fixe .marque img{filter:none}
.marque span{
  font-family:var(--titre);font-weight:600;font-size:1.0625rem;
  font-variation-settings:"wdth" 108;letter-spacing:-.02em;
}

.nav{display:flex;gap:clamp(1rem,2.2vw,2.1rem);margin-inline:auto}
.nav a{
  text-decoration:none;font-size:.9375rem;
  opacity:.82;transition:opacity .3s;
}
.nav a:hover{opacity:1}

.tete__act{display:flex;align-items:center;gap:1.75rem;flex:none}
.tel{text-decoration:none;display:block;line-height:1.25}
.tel .mono{display:block;font-size:.625rem;color:inherit;opacity:.75}
.tel strong{font-family:var(--titre);font-weight:600;font-size:1.0625rem;letter-spacing:-.01em}
/* l'appel à l'action reste identique dans les deux états : c'est le seul
   endroit où le bleu de marque apparaît en aplat */
.tete .bouton{
  padding:.9rem 1.5rem;
  background:var(--lagon);color:var(--abysse);border-color:var(--lagon);
}
.tete .bouton:hover{background:var(--craie);border-color:var(--craie)}

/* état « décollé » : fond plein */
.tete.est-fixe{background:var(--craie);color:var(--encre);border-bottom:1px solid var(--filet)}
.tete.est-fixe .bouton:hover{background:var(--abysse);border-color:var(--abysse);color:var(--craie)}

.burger{display:none}

.nav-mob{display:none}

/* ─────────────────────────────────────────
   HÉRO
   ───────────────────────────────────────── */

/* Panneau sombre à gauche, photo pleine à droite : le texte n'écrase
   jamais l'eau, et la photo garde sa définition. */
.hero{
  position:relative;
  background:var(--abysse);
  color:var(--craie);
  display:grid;grid-template-columns:1fr;
}
.hero__media{position:relative;overflow:hidden;aspect-ratio:4/3}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.hero__voile{
  position:absolute;inset:0;
  background:linear-gradient(to top, rgba(6,32,46,.55), rgba(6,32,46,.05) 45%);
}
.hero__in{
  padding:2.75rem var(--marge) clamp(3rem,6vw,4.5rem);
}
.hero__in .mono{color:rgba(250,250,248,.62)}
.hero__sub{
  max-width:42ch;margin-top:2rem;
  font-size:clamp(1rem,1.35vw,1.1875rem);
  color:rgba(250,250,248,.8);
}
.hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:2rem;margin-top:2.75rem}

/* ── Ouverture de page ──
   Le titre se lève ligne à ligne derrière un cache, comme une surface
   d'eau qui se stabilise. Les états au repos sont les styles de base :
   sans animation, tout reste lisible. */
.titre-xl .ligne{
  display:block;
  overflow:hidden;
  padding-block:.02em .14em;
  margin-block:-.02em -.14em;
}
.titre-xl .ligne i{display:block;font-style:normal}

.js .hero__media img{animation:hero-cadre 2.2s var(--courbe) both}
.js .hero__in .etiq{animation:hero-monte .8s var(--courbe) .15s both}
.js .titre-xl .ligne i{animation:hero-leve .95s var(--courbe) both}
.js .titre-xl .ligne:nth-child(1) i{animation-delay:.24s}
.js .titre-xl .ligne:nth-child(2) i{animation-delay:.33s}
.js .titre-xl .ligne:nth-child(3) i{animation-delay:.42s}
.js .titre-xl .ligne:nth-child(4) i{animation-delay:.51s}
.js .hero__sub{animation:hero-monte .9s var(--courbe) .72s both}
.js .hero__cta{animation:hero-monte .9s var(--courbe) .86s both}
.js .hero .ligne-eau{transform-origin:0 50%;animation:hero-trait 1.4s var(--courbe) 1.05s both}

@keyframes hero-cadre{from{transform:scale(1.07)}to{transform:none}}
@keyframes hero-leve{from{transform:translateY(105%)}to{transform:none}}
@keyframes hero-monte{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes hero-trait{from{transform:scaleX(0);opacity:0}to{transform:none;opacity:1}}

.hero .ligne-eau{
  position:absolute;inset:auto 0 0;z-index:3;
  background:linear-gradient(
    rgba(250,250,248,.1), rgba(250,250,248,.3) 45%, rgba(250,250,248,.3) 60%, rgba(250,250,248,.1));
}

@media (min-width:900px){
  .hero{
    grid-template-columns:52% 48%;
    min-height:min(88svh,780px);
    align-items:center;
    overflow:hidden;
  }
  /* la photo remonte sous le panneau et s'y dissout : pas de couture */
  .hero__media{
    position:absolute;inset:0 0 0 22%;
    aspect-ratio:auto;
    -webkit-mask-image:linear-gradient(to right,
      transparent 0%, rgba(0,0,0,.22) 24%, rgba(0,0,0,.7) 44%, #000 58%);
    mask-image:linear-gradient(to right,
      transparent 0%, rgba(0,0,0,.22) 24%, rgba(0,0,0,.7) 44%, #000 58%);
  }
  .hero__voile{
    background:linear-gradient(to top, rgba(6,32,46,.4), transparent 42%);
  }
  /* voile de lisibilité posé au-dessus du masque, pour que le titre tienne */
  .hero::before{
    content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(to right,
      rgba(6,32,46,.82) 0%, rgba(6,32,46,.62) 30%,
      rgba(6,32,46,.24) 50%, rgba(6,32,46,0) 66%);
  }
  .hero__in{position:relative;z-index:2}
  .hero__in{
    /* aligné sur la gouttière du conteneur, même au-delà de 1560 px */
    padding-block:9rem clamp(4rem,7vw,6rem);
    padding-right:clamp(2rem,4vw,4.5rem);
    padding-left:max(var(--marge), calc((100vw - var(--large)) / 2 + var(--marge)));
  }
}

/* ─────────────────────────────────────────
   BANDEAU DE PREUVE
   ───────────────────────────────────────── */

.preuve{background:var(--abysse);color:var(--craie)}
.preuve__in{
  max-width:var(--large);margin-inline:auto;
  padding:2.75rem var(--marge);
  display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;
}
.preuve__item{display:flex;flex-direction:column;gap:.55rem}
.preuve__item strong{
  font-family:var(--titre);font-weight:600;
  font-size:1.625rem;line-height:1;letter-spacing:-.02em;
  font-variation-settings:"wdth" 112;
}
.preuve__item .mono{color:rgba(250,250,248,.55)}
.note{color:var(--soleil)}

/* ─────────────────────────────────────────
   MANIFESTE — révélation au défilement
   ───────────────────────────────────────── */

.manifeste{background:var(--craie);padding:clamp(5.5rem,12vw,10rem) 0}
.manifeste__in{
  max-width:var(--large);margin-inline:auto;padding-inline:var(--marge);
  display:grid;grid-template-columns:1fr;gap:2.5rem;
}
.manifeste__in .bouton{justify-self:start}
.revele{
  font-family:var(--titre);
  font-variation-settings:"wdth" 104;
  font-weight:400;
  font-size:clamp(1.25rem, 2.3vw, 2rem);
  line-height:1.38;
  letter-spacing:-.018em;
  max-width:30ch;
}
.revele .mot{color:rgba(13,27,34,.16);transition:color .5s linear}
.revele .mot.vu{color:var(--encre)}

.manifeste__vue{margin:0}
.manifeste__vue img{width:100%;aspect-ratio:4/3;object-fit:cover}
.manifeste__vue figcaption{margin-top:1rem;color:var(--brume);max-width:34ch}

.reperes{display:grid;border-top:1px solid var(--filet)}
.reperes > div{
  display:grid;gap:.35rem;
  padding:1rem 0;border-bottom:1px solid var(--filet);
}
.reperes dt{color:var(--brume)}
.reperes dd{margin:0;font-size:.9375rem;max-width:46ch}

@media (min-width:900px){
  .manifeste__in{
    grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);
    gap:0 clamp(2.5rem,6vw,7rem);
    align-items:start;
  }
  .manifeste__vue{grid-column:1;grid-row:1 / span 4}
  .manifeste__vue img{aspect-ratio:4/5}
  .manifeste__in .etiq{grid-column:2;grid-row:1;margin:0 0 1.75rem}
  .revele{grid-column:2;grid-row:2;max-width:34ch}
  .reperes{grid-column:2;grid-row:3;margin-top:3.25rem}
  .manifeste__in .bouton{grid-column:2;grid-row:4;margin-top:2.5rem;justify-self:start}
}

@media (min-width:1200px){
  .reperes > div{grid-template-columns:9rem 1fr;gap:2rem;align-items:baseline}
  .reperes dt{padding-top:.15rem}
}

/* ─────────────────────────────────────────
   RÉALISATIONS
   ───────────────────────────────────────── */

.real{background:var(--calcaire);padding-bottom:clamp(4rem,8vw,7rem)}
.real__tete{
  max-width:var(--large);margin-inline:auto;
  padding:clamp(4rem,8vw,7rem) var(--marge) clamp(2.5rem,5vw,4rem);
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:2rem;
}
.real__tete .mono{min-width:0}
@media (min-width:900px){
  .real__tete .mono{text-align:right;flex:none}
}

.projet__img{overflow:hidden;background:var(--filet)}
.projet__img img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.03);
  transition:transform 1.4s var(--courbe);
}
.projet:hover .projet__img img{transform:scale(1)}

.projet--phare{
  margin:0;
  max-width:var(--large);margin-inline:auto;
  padding-inline:var(--marge);
  display:grid;gap:clamp(1.75rem,3vw,3rem);
}
.projet--phare .projet__img{aspect-ratio:16/9}
.projet__leg{display:flex;flex-direction:column;align-items:flex-start;gap:1.25rem}

.specs{
  width:100%;
  border-top:1px solid var(--filet);
  margin-top:.5rem;
}
.specs > div{
  display:flex;justify-content:space-between;gap:2rem;
  padding:.7rem 0;border-bottom:1px solid var(--filet);
}
.specs dt{
  font-family:var(--util);font-size:.6875rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--brume);
}
.specs dd{font-size:.9375rem;text-align:right}

.grille-projets{
  max-width:var(--large);margin:clamp(3rem,6vw,5.5rem) auto 0;
  padding-inline:var(--marge);
  display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,3.5rem);
}
.grille-projets .projet {
  background: #FFF;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}
.projet figcaption{padding:1.1rem}
.projet figcaption h3{
  font-family:var(--titre);font-weight:500;font-size:1.125rem;
  letter-spacing:-.015em;margin-top:.3rem;
}

.specs--compact{margin-top:1.25rem}
.specs--compact > div{padding:.5rem 0}
.specs--compact dt{font-size:.625rem}
.specs--compact dd{font-size:.875rem}
.grille-projets .projet__img{aspect-ratio:3/2}

.real__pied{
  max-width:var(--large);margin-inline:auto;
  padding:clamp(3rem,6vw,5rem) var(--marge) 0;
  text-align:center;
}

@media (min-width:900px){
  .projet--phare{grid-template-columns:1.55fr 1fr;align-items:center}
  .projet--phare .projet__img{aspect-ratio:4/3}
  .grille-projets{grid-template-columns:1fr 1fr}
}

/* ─────────────────────────────────────────
   GAMMES — lignes séparées par des filets,
   l'image envahit la colonne vide au survol
   ───────────────────────────────────────── */

.gammes{background:var(--craie);border-top:1px solid var(--filet)}
.gammes__tete{
  max-width:var(--large);margin-inline:auto;
  padding:clamp(4.5rem,9vw,8rem) var(--marge) clamp(3rem,5vw,4.5rem);
  display:grid;gap:1.75rem;
}
.gammes__tete p{max-width:44ch;color:var(--brume)}

.gamme{
  border-top:1px solid var(--filet);
  display:grid;grid-template-columns:1fr;
}
.gammes .gamme:last-child{border-bottom:1px solid var(--filet)}

.gamme__media{position:relative;overflow:hidden;background:var(--calcaire);aspect-ratio:16/10}
.gamme__media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.gamme__corps{
  padding:clamp(2.25rem,4vw,4rem) var(--marge);
  display:flex;flex-direction:column;align-items:flex-start;gap:1.1rem;
  max-width:52ch;
}
.gamme__corps p{color:var(--brume)}
.gamme__corps .lien{margin-top:.9rem;color:var(--encre)}
.gamme__corps .etiq{margin:0;color:var(--lagon)}

@media (min-width:900px){
  .gamme{grid-template-columns:46% 54%;min-height:min(56vh,480px);align-items:center}
  .gamme__media{position:absolute;inset:0;width:46%;aspect-ratio:auto}
  .gamme{position:relative}
  /* l'image envahit la colonne vide à l'entrée dans la fenêtre */
  .gamme__media img{
    clip-path:inset(0 100% 0 0);
    transform:scale(1.06);
    transition:clip-path .68s var(--courbe), transform 1.1s var(--courbe);
  }
  .gamme.photo-prete .gamme__media img{clip-path:inset(0);transform:scale(1)}
  .gamme:hover .gamme__media img{transform:scale(1.04)}
  .gamme__corps{
    grid-column:2;
    padding-block:clamp(3rem,5vw,5rem);
    padding-inline:clamp(2rem,4vw,4.5rem) var(--marge);
  }
}

/* ─────────────────────────────────────────
   PARCOURS
   ───────────────────────────────────────── */

.parcours{background:var(--calcaire);padding-bottom:clamp(4rem,8vw,7rem)}
.parcours__tete{
  max-width:var(--large);margin-inline:auto;
  padding:clamp(4.5rem,9vw,8rem) var(--marge) clamp(2.5rem,5vw,4rem);
  display:grid;gap:1.75rem;
}
.parcours__tete p{max-width:42ch;color:var(--brume)}

.etapes{
  max-width:var(--large);margin-inline:auto;padding-inline:var(--marge);
  display:grid;grid-template-columns:1fr;
  border-top:1px solid var(--filet);
}
.etapes li{
  display:grid;gap:.65rem;
  padding:2.25rem 0;
  border-bottom:1px solid var(--filet);
}
.num{color:var(--lagon);font-size:.75rem}
.etapes h3{
  font-family:var(--titre);font-weight:600;font-size:1.1875rem;letter-spacing:-.015em;
}
.etapes p{color:var(--brume);font-size:.9375rem;max-width:38ch}
.delai{color:var(--encre);margin-top:.4rem}

@media (min-width:820px){
  /* la grille déborde de la valeur du padding interne pour que le texte
     de la première étape reste aligné sur la gouttière de page */
  .etapes{
    grid-template-columns:repeat(4,1fr);gap:0;
    margin-inline:calc(clamp(1.5rem,2.2vw,2.5rem) * -1);
    width:auto;
  }
  .etapes li{
    padding:2.75rem clamp(1.5rem,2.2vw,2.5rem) 3.25rem;
    border-bottom:0;border-right:1px solid var(--filet);
    align-content:start;
  }
  .etapes li:last-child{border-right:0}
}

/* ─────────────────────────────────────────
   DEVIS — le halo reprend les caustiques
   ───────────────────────────────────────── */

.devis{
  position:relative;
  background:var(--abysse);
  padding:clamp(4.5rem,9vw,9rem) var(--marge);
  overflow:hidden;
}
/* Le halo déborde du panneau : la lumière que l'eau renvoie sur les murs. */
.devis__cadre{position:relative;max-width:var(--large);margin-inline:auto}
.devis__halo{
  position:absolute;inset:-4px;
  filter:blur(54px);
  opacity:.85;
  animation:respire 14s ease-in-out infinite alternate;
}
/* nappe de fond : les couleurs glissent le long du panneau */
.devis__halo::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(104deg,
    var(--soleil) 0%, var(--lagon) 26%, #7fe3d0 44%,
    var(--eau) 62%, var(--lagon) 80%, var(--soleil) 100%);
  background-size:260% 100%;
  animation:halo-derive 26s ease-in-out infinite alternate;
}
/* deux foyers qui dérivent l'un vers l'autre, comme des reflets sur un mur */
.devis__halo::after{
  content:"";position:absolute;inset:-14%;
  background:
    radial-gradient(38% 58% at 28% 38%, rgba(233,203,146,.95), transparent 68%),
    radial-gradient(42% 52% at 74% 66%, rgba(43,179,220,.9), transparent 70%),
    radial-gradient(30% 44% at 54% 22%, rgba(127,227,208,.75), transparent 72%);
  animation:halo-flotte 19s ease-in-out infinite alternate;
}
@keyframes respire{from{opacity:.6}to{opacity:.95}}
@keyframes halo-derive{from{background-position:0% 50%}to{background-position:100% 50%}}
@keyframes halo-flotte{
  from{transform:translate3d(-3%,-2%,0) scale(1)}
  to{transform:translate3d(4%,3%,0) scale(1.1)}
}

.devis__panneau{
  position:relative;z-index:1;
  background:#0a2634;
  border:1px solid var(--filet-s);
  color:var(--craie);
  padding:clamp(2.25rem,5vw,4.5rem);
  display:grid;grid-template-columns:1fr;gap:clamp(2.5rem,5vw,5rem);
}
.devis__texte{display:flex;flex-direction:column;align-items:flex-start;gap:1.5rem}
.devis__texte .mono{color:var(--soleil)}
.devis__texte .etiq{margin:0}
.devis__points{display:grid;gap:.75rem;margin-top:.5rem}
.devis__points li{
  padding-left:1.4rem;position:relative;
  color:rgba(250,250,248,.78);font-size:.9375rem;
}
.devis__points li::before{
  content:"";position:absolute;left:0;top:.72em;
  width:.55rem;height:1px;background:var(--lagon);
}
.devis__tel{
  text-decoration:none;margin-top:1rem;display:block;
}
.devis__tel .mono{display:block;color:rgba(250,250,248,.5);margin-bottom:.35rem}
.devis__tel strong{
  font-family:var(--titre);font-weight:600;
  font-size:clamp(1.5rem,2.6vw,2.125rem);letter-spacing:-.025em;
}

.devis__form{display:grid;gap:1.5rem;align-content:start}
.champ{display:grid;gap:.4rem}
.champ label{
  font-family:var(--util);font-size:.6875rem;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(250,250,248,.55);
}
.champ input,.champ select{
  font-family:var(--texte);font-size:1rem;color:var(--craie);
  background:transparent;border:0;border-bottom:1px solid var(--filet-s);
  padding:.65rem 0;border-radius:0;
  transition:border-color .4s;
}
.champ select{
  appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-size:6px 6px, 6px 6px;
  background-position:right 8px center, right 2px center;
  background-repeat:no-repeat;
  padding-right:1.75rem;
}
.champ select option{background:#0a2634;color:var(--craie)}
.champ input:focus,.champ select:focus{outline:0;border-bottom-color:var(--lagon)}
.devis__form .bouton{justify-self:start;margin-top:.75rem}
.mention{font-size:.8125rem;color:rgba(250,250,248,.45)}

@media (min-width:900px){
  .devis__panneau{grid-template-columns:1fr 1fr}
}

/* ─────────────────────────────────────────
   ACTUALITÉS
   ───────────────────────────────────────── */

.actus{background:var(--craie);padding:clamp(4.5rem,9vw,8rem) 0}
.actus__tete{
  max-width:var(--large);margin-inline:auto;
  padding:0 var(--marge) clamp(2rem,4vw,3rem);
  display:flex;justify-content:space-between;align-items:baseline;gap:2rem;
  border-bottom:1px solid var(--filet);
  padding-bottom:1.5rem;
}
.actus__grille{
  max-width:var(--large);margin-inline:auto;
  padding:clamp(2rem,4vw,3rem) var(--marge) 0;
  display:grid;grid-template-columns:1fr;gap:clamp(2rem,3vw,3rem);
}
.actu{text-decoration:none;display:block}
.actu__img{aspect-ratio:16/10;overflow:hidden;background:var(--calcaire);margin-bottom:1.1rem}
.actu__img img{width:100%;height:100%;object-fit:cover;transform:scale(1.03);transition:transform 1.4s var(--courbe)}
.actu:hover .actu__img img{transform:scale(1)}
.actu h3{
  font-family:var(--titre);font-weight:500;font-size:1.0625rem;
  letter-spacing:-.015em;margin-top:.35rem;max-width:26ch;
}

@media (min-width:760px){
  .actus__grille{grid-template-columns:repeat(3,1fr)}
}

/* ─────────────────────────────────────────
   PIED DE PAGE
   ───────────────────────────────────────── */

.pied{background:var(--abysse);color:var(--craie)}
.pied__in{
  max-width:var(--large);margin-inline:auto;
  padding:clamp(3.5rem,7vw,6rem) var(--marge);
  display:grid;grid-template-columns:1fr;gap:3rem;
}
.pied__marque img{width:74px;height:auto;margin-bottom:1.5rem}
.pied address{font-style:normal;color:rgba(250,250,248,.66);font-size:.9375rem;line-height:1.7}
.pied__tel{
  display:inline-block;margin-top:1rem;text-decoration:none;
  font-family:var(--titre);font-weight:600;font-size:1.375rem;letter-spacing:-.02em;
}
.reseaux{display:flex;gap:.5rem;margin-top:1.75rem}
.reseaux a{
  width:2.5rem;height:2.5rem;display:grid;place-items:center;
  border:1px solid var(--filet-s);text-decoration:none;
  transition:background .35s,color .35s,border-color .35s;
}
.reseaux svg{width:1.125rem;height:1.125rem;display:block}
.reseaux a:hover{background:var(--lagon);border-color:var(--lagon);color:var(--abysse)}

.pied__nav{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem}
.pied__nav h2{margin-bottom:1.1rem;color:rgba(250,250,248,.45);font-weight:400}
.pied__nav a{
  display:block;text-decoration:none;font-size:.9375rem;
  padding:.32rem 0;color:rgba(250,250,248,.78);transition:color .3s;
}
.pied__nav a:hover{color:var(--lagon)}

.pied__bas{
  max-width:var(--large);margin-inline:auto;
  padding:1.75rem var(--marge);
  border-top:1px solid var(--filet-s);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;
  font-size:.8125rem;color:rgba(250,250,248,.5);
}
.pied__bas a{text-decoration:none;margin-right:1.5rem}
.pied__bas a:hover{color:var(--lagon)}

@media (min-width:900px){
  .pied__in{grid-template-columns:1fr 1.4fr}
  .pied__nav{grid-template-columns:repeat(3,1fr)}
}

/* ─────────────────────────────────────────
   APPEL À L'ACTION FLOTTANT (petits écrans)
   ───────────────────────────────────────── */

.flottant{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:none;
}
.flottant a{
  flex:1;text-align:center;text-decoration:none;
  font-family:var(--util);font-size:.6875rem;letter-spacing:.14em;
  text-transform:uppercase;padding:1.1rem .5rem;
}
.flottant__tel{background:var(--abysse);color:var(--craie)}
.flottant__devis{background:var(--lagon);color:var(--abysse)}

/* ─────────────────────────────────────────
   RÉVÉLATION AU DÉFILEMENT
   ───────────────────────────────────────── */

/* état masqué uniquement si le JS est là pour le lever */
.js [data-vue]{
  opacity:0;transform:translateY(16px);
  transition:opacity .62s var(--courbe), transform .62s var(--courbe);
}
.js [data-vue].vu{opacity:1;transform:none}

/* ─────────────────────────────────────────
   PETITS ÉCRANS
   ───────────────────────────────────────── */

@media (max-width:1100px){
  .nav{display:none}
  .tete__act{margin-left:auto}
  .tete__act .bouton{display:none}
  .burger{
    display:grid;gap:5px;place-content:center;
    width:2.75rem;height:2.75rem;flex:none;
    background:none;border:1px solid currentColor;color:inherit;cursor:pointer;
  }
  .burger span{display:block;width:16px;height:1px;background:currentColor}
  .nav-mob{
    display:block;background:var(--craie);color:var(--encre);
    border-top:1px solid var(--filet);
    padding:1rem var(--marge) 2rem;
  }
  .nav-mob[hidden]{display:none}
  .nav-mob a{
    display:block;text-decoration:none;padding:.85rem 0;
    border-bottom:1px solid var(--filet);
    font-family:var(--titre);font-weight:500;font-size:1.125rem;
  }
  .nav-mob a:last-child{border-bottom:0}
  .nav-mob__cta{color:var(--eau)}
}

@media (max-width:760px){
  .preuve__in{grid-template-columns:1fr 1fr;gap:1.75rem}
  .real__tete .mono{text-align:left}
  .flottant{display:flex}
  body{padding-bottom:3.4rem}
}

@media (min-width:600px) and (max-width:899px){
  .hero__media{aspect-ratio:16/9}
}

/* ─────────────────────────────────────────
   MOUVEMENT RÉDUIT
   ───────────────────────────────────────── */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .js [data-vue]{opacity:1;transform:none}
  .revele .mot{color:var(--encre)}
  .gamme__media img{clip-path:inset(0) !important;transform:none !important}
  .ligne-eau i{display:none}
}