@charset "utf-8";
/* ==========================================================================
   Klymair · habillage de la page d'accueil et de la page devis
   Structure et rythme repris d'une référence de design, adaptés à l'identité
   Klymair (bleu #2E86E8, Poppins + Plus Jakarta Sans auto-hébergées).

   Les pages légales utilisent encore klymair.css : les deux feuilles ne se
   croisent jamais, une page charge l'une ou l'autre, jamais les deux.
   ========================================================================== */

/* ---------- polices locales (réutilisées du site) ---------- */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/plus-jakarta-sans-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/plus-jakarta-sans-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/poppins-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/poppins-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/poppins-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/poppins-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/poppins-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/poppins-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- variables ---------- */
:root{
  --bleu:#2E86E8;
  --bleu-fonce:#1660B4;
  --cyan:#7FE3FA;
  --encre:#17181C;
  --nuit:#010009;
  --nuit-2:#0A0B12;
  --gris:#F6F6F6;
  --texte:#6B7480;
  --texte-nuit:#8A93A0;
  --filet:#E4E7EB;
  --filet-nuit:#1C1E27;

  --marge:clamp(20px,4.4vw,64px);
  --max:1512px;
  --tete:88px;
  /* décalage réservé à un bandeau d'annonce en haut de page. À zéro tant qu'il
     n'y en a pas : plusieurs calculs de position s'y adossent. */
  --bandeau:0px;

  --titre:'Poppins','Plus Jakarta Sans',system-ui,sans-serif;
  --corps:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-doux:cubic-bezier(.4,0,.2,1);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:#fff;
  color:var(--encre);
  font-family:var(--corps);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  /* clip et non hidden : hidden créerait un contexte de défilement
     qui casserait le position:sticky de la section déroulé */
  overflow-x:clip;
}
img,svg,picture{display:block;max-width:100%}
img{height:auto}
ul,ol{margin:0;padding:0;list-style:none}
p{margin:0}
h1,h2,h3{margin:0;font-family:var(--titre);font-weight:700;letter-spacing:-.028em;line-height:1.06}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--bleu);color:#fff}

.visuellement-cache{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.evitement{position:absolute;left:-9999px;top:0;z-index:200;background:#fff;color:#000;padding:12px 18px}
.evitement:focus{left:12px;top:12px}
:focus-visible{outline:2px solid var(--bleu);outline-offset:3px;border-radius:4px}

/* ==========================================================================
   EN-TÊTE
   ========================================================================== */
.entete{
  position:fixed;top:var(--bandeau);left:0;right:0;z-index:50;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:20px var(--marge);
  transition:background .45s var(--ease-doux),backdrop-filter .45s,box-shadow .45s;
}
.entete__gauche{display:flex;align-items:center;gap:10px}
.entete__droite{display:flex;align-items:center;gap:10px;justify-content:flex-end}

.marque{display:flex;align-items:center;gap:9px;font-family:var(--titre);font-weight:700;font-size:20px;letter-spacing:-.02em}
.marque__mark{width:24px;height:auto}
.marque__mot{white-space:nowrap}

.pill{
  display:inline-flex;align-items:center;gap:8px;
  height:42px;padding:0 17px;border-radius:99px;
  font-size:14.5px;white-space:nowrap;
  border:1px solid transparent;
  transition:background .35s,border-color .35s,color .35s;
}

.rond{
  width:42px;height:42px;border-radius:99px;
  display:grid;place-items:center;
  border:1px solid transparent;
  transition:background .35s,border-color .35s,transform .25s;
}
.rond:hover{transform:scale(1.06)}
.burger{display:grid;gap:4px;width:15px}
.burger i{display:block;height:1.5px;background:currentColor;border-radius:2px;transition:transform .3s var(--ease),width .3s}
.burger i:last-child{width:9px;justify-self:start}
.entete.menu-ouvert .burger i:first-child{transform:translateY(2.75px) rotate(45deg)}
.entete.menu-ouvert .burger i:last-child{width:15px;transform:translateY(-2.75px) rotate(-45deg)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:44px;padding:0 22px;border-radius:99px;
  font-size:15px;font-weight:500;white-space:nowrap;
  border:1px solid transparent;
  transition:background .3s,color .3s,transform .25s var(--ease),box-shadow .3s;
}
.btn:hover{transform:translateY(-2px)}
.btn--cta{background:var(--bleu);color:#fff;box-shadow:0 10px 26px -12px rgba(46,134,232,.75)}
.btn--cta:hover{background:#2278d9}
.btn--blanc{background:#fff;color:var(--encre);height:50px;padding:0 28px;font-size:15.5px}
.btn--verre{background:rgba(255,255,255,.16);color:#fff;backdrop-filter:blur(14px);border-color:rgba(255,255,255,.24);height:50px;padding:0 28px;font-size:15.5px}
.btn--verre:hover{background:rgba(255,255,255,.26)}

/* états du header selon la section survolée.
   Le mark est la version dégradée bleu-cyan : elle tient sur fond clair comme
   sur fond sombre, donc aucun filtre à appliquer selon l'état. */
.entete[data-etat="hero"]{color:#fff}
.entete[data-etat="hero"] .pill,
.entete[data-etat="hero"] .rond{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.2);backdrop-filter:blur(16px)}
.entete[data-etat="hero"] .btn--cta{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.24);backdrop-filter:blur(16px);box-shadow:none}
.entete[data-etat="hero"] .btn--cta:hover{background:rgba(255,255,255,.28)}

.entete[data-etat="clair"]{color:var(--encre);background:rgba(255,255,255,.82);backdrop-filter:blur(18px);box-shadow:0 1px 0 rgba(16,20,26,.06)}
.entete[data-etat="clair"] .pill,
.entete[data-etat="clair"] .rond{border-color:var(--filet);background:#fff}

.entete[data-etat="nuit"]{color:#fff;background:rgba(1,0,9,.72);backdrop-filter:blur(18px);box-shadow:0 1px 0 rgba(255,255,255,.06)}
.entete[data-etat="nuit"] .pill,
.entete[data-etat="nuit"] .rond{border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.05)}
.entete[data-etat="nuit"] .btn--cta{background:#fff;color:var(--encre);box-shadow:none}
.entete[data-etat="nuit"] .btn--cta:hover{background:#E9EEF4}

/* libellé court du bouton sur téléphone (inc/header-refonte.php) */
.cta-court{display:none}
@media (max-width:480px){
  .entete .cta-long{display:none}
  .entete .cta-court{display:inline}
  .entete .btn--cta{padding:0 16px}
}

/* menu plein écran */
.menu-plein{
  position:fixed;inset:0;z-index:45;
  background:rgba(1,0,9,.96);backdrop-filter:blur(6px);
  display:flex;flex-direction:column;justify-content:center;
  padding:0 var(--marge);
  opacity:0;transition:opacity .4s var(--ease-doux);
}
.menu-plein[hidden]{display:none}
.menu-plein.est-visible{opacity:1}
.menu-plein nav{display:grid;gap:6px;max-width:var(--max);width:100%;margin:0 auto}
.menu-plein a{
  font-family:var(--titre);font-weight:600;color:#fff;
  font-size:clamp(30px,5.6vw,60px);letter-spacing:-.03em;line-height:1.18;
  opacity:0;transform:translateY(22px);
  transition:opacity .5s var(--ease),transform .5s var(--ease),color .25s;
}
.menu-plein.est-visible a{opacity:1;transform:none}
.menu-plein.est-visible a:nth-child(1){transition-delay:.06s}
.menu-plein.est-visible a:nth-child(2){transition-delay:.11s}
.menu-plein.est-visible a:nth-child(3){transition-delay:.16s}
.menu-plein.est-visible a:nth-child(4){transition-delay:.21s}
.menu-plein.est-visible a:nth-child(5){transition-delay:.26s}
.menu-plein a:hover{color:var(--bleu)}
.menu-plein__pied{
  max-width:var(--max);width:100%;margin:48px auto 0;
  color:var(--texte-nuit);font-size:13px;letter-spacing:.06em;text-transform:uppercase;
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{position:relative;min-height:100svh;display:grid;align-items:end;overflow:hidden;background:#8FB6D6}
.hero__fond{position:absolute;inset:0}
.hero__fond img{width:100%;height:100%;object-fit:cover;object-position:center 42%;transform:scale(1.06);will-change:transform}
.hero__voile{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(10,32,54,.34) 0%,rgba(10,32,54,0) 26%),
    linear-gradient(0deg,rgba(10,32,54,.42) 0%,rgba(10,32,54,0) 48%);
}
/* le bloc de texte est plaqué bas : l'unité de climatisation doit rester
   seule dans le haut du cadre, sans texte par-dessus */
.hero__contenu{
  position:relative;z-index:2;
  width:100%;max-width:var(--max);margin:0 auto;
  padding:calc(var(--tete) + var(--bandeau)) var(--marge) clamp(24px,3.6vh,52px);
  text-align:center;color:#fff;
}
.hero__titre{
  max-width:1140px;margin-inline:auto;
  font-size:clamp(33px,5.1vw,73px);
  letter-spacing:-.035em;line-height:1.04;
  text-shadow:0 2px 40px rgba(8,24,44,.22);
}
.hero__titre .ligne{display:block;overflow:hidden;padding-bottom:.06em}
.hero__titre .ligne>span{display:block;transform:translateY(110%);transition:transform 1.05s var(--ease)}
.hero.est-pret .ligne:nth-child(1)>span{transform:none}
.hero.est-pret .ligne:nth-child(2)>span{transform:none;transition-delay:.1s}

.hero__chapo{
  margin:18px auto 0;max-width:560px;
  font-size:16.5px;line-height:1.6;color:rgba(255,255,255,.92);
  opacity:0;transform:translateY(16px);transition:opacity .8s .34s,transform .8s .34s var(--ease);
}
.hero__actions{
  margin-top:26px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap;
  opacity:0;transform:translateY(16px);transition:opacity .8s .44s,transform .8s .44s var(--ease);
}
.hero.est-pret .hero__chapo,.hero.est-pret .hero__actions{opacity:1;transform:none}

/* fine barre de progression en bas du hero, comme la référence */
.hero__defiler{
  position:absolute;left:var(--marge);right:var(--marge);bottom:0;
  height:1px;background:rgba(255,255,255,.22);overflow:hidden;z-index:2;
}
.hero__defiler span{display:block;width:34%;height:100%;background:#fff;animation:defiler 3.4s var(--ease-doux) infinite}
@keyframes defiler{0%{transform:translateX(-100%)}100%{transform:translateX(300%)}}

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.section{position:relative;padding:clamp(76px,9vw,132px) 0}
.section>*{max-width:var(--max);margin-inline:auto;padding-inline:var(--marge)}
.section--clair{background:#fff}
.section--nuit{background:var(--nuit);color:#fff}
.section--faq{padding-top:clamp(40px,5vw,70px)}

/* grille surtitre / titre */
.grille-titre{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.grille-titre__droite{max-width:560px}
.surtitre{
  display:flex;align-items:center;gap:11px;
  font-size:13px;font-weight:500;letter-spacing:.085em;text-transform:uppercase;
  margin-top:6px;
}
.surtitre i{width:7px;height:7px;border-radius:99px;background:var(--bleu);flex:none}
.titre-section{font-size:clamp(30px,4.3vw,60px);letter-spacing:-.032em}
.chapo{margin-top:20px;color:var(--texte);font-size:16.5px;line-height:1.62;max-width:470px}
.section--nuit .chapo{color:var(--texte-nuit)}

/* révélation au scroll */
[data-rev]{opacity:0;transform:translateY(26px);transition:opacity .85s var(--ease-doux),transform .85s var(--ease)}
[data-rev].est-vu{opacity:1;transform:none}

/* ==========================================================================
   STATS / ENGAGEMENTS
   ========================================================================== */
.stats{margin-top:clamp(46px,6vw,88px)}
.stat{
  display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:end;
  border-top:1px solid var(--filet);
  padding-top:10px;
}
.stat:last-child{border-bottom:1px solid var(--filet)}
/* Une seule taille pour les quatre valeurs, mots et chiffres confondus : un mot
   rendu plus petit qu'un chiffre déséquilibrait la colonne. La contrepartie est
   que la valeur doit rester très courte, huit caractères au maximum, sinon elle
   déborde de sa moitié de grille sur les grands écrans. */
.stat__valeur{
  display:block;overflow:hidden;
  font-family:var(--titre);font-weight:500;
  font-size:clamp(58px,11.4vw,158px);
  line-height:1.02;letter-spacing:-.05em;
  color:var(--bleu);
}
.stat__valeur>span{display:block;transform:translateY(105%);transition:transform 1.1s var(--ease)}
.stat.est-vu .stat__valeur>span{transform:none}
.stat__label{
  font-size:13px;letter-spacing:.07em;text-transform:uppercase;line-height:1.5;
  padding-bottom:clamp(12px,2.4vw,34px);max-width:330px;
}
/* écrans peu hauts : on resserre pour que les quatre lignes tiennent d'un regard */
@media (min-width:861px) and (max-height:960px){
  #engagements{padding-block:clamp(50px,6.4vw,92px)}
  .stat__valeur{font-size:clamp(52px,9.4vw,128px)}
  .stat__label{padding-bottom:clamp(8px,1.7vh,22px)}
}
@media (min-width:861px) and (max-height:790px){
  #engagements{padding-block:clamp(34px,4.6vw,58px)}
  #engagements .titre-section{font-size:clamp(26px,3.2vw,40px)}
  .stat__valeur{font-size:clamp(44px,7.4vw,94px)}
  .stat__label{padding-bottom:6px;font-size:12px}
}

/* ==========================================================================
   BANDE PHOTO
   ========================================================================== */
.bande-photo{padding:0 0 clamp(76px,9vw,132px);background:#fff}
.bande-photo__cadre{
  position:relative;max-width:var(--max);margin-inline:auto;padding-inline:var(--marge);
}
.bande-photo__cadre picture{display:block;overflow:hidden;background:var(--gris)}
.bande-photo img{width:100%;aspect-ratio:16/9;object-fit:cover;transform:scale(1.08);transition:transform 1.6s var(--ease)}
.bande-photo__cadre.est-vu img{transform:scale(1)}
.bande-photo__legende{
  position:absolute;left:calc(var(--marge) + 26px);bottom:24px;
  background:rgba(255,255,255,.9);backdrop-filter:blur(10px);
  padding:9px 16px;border-radius:99px;
  font-size:13px;letter-spacing:.02em;
}

/* ==========================================================================
   PRESTATIONS
   ========================================================================== */
.presta{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);
  align-items:center;margin-top:clamp(40px,5vw,64px);
}
.presta__visuel{position:relative;aspect-ratio:1;display:grid;place-items:center}
.illu{
  position:absolute;inset:0;display:block;
  opacity:0;transform:scale(.94) translateY(14px);
  transition:opacity .6s var(--ease-doux),transform .7s var(--ease);
  pointer-events:none;
}
.illu img{width:100%;height:100%;object-fit:contain}
.illu.est-active{opacity:1;transform:none;animation:flotte 7s ease-in-out 1.2s infinite}
@keyframes flotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* Titres d'accordéon et de FAQ.
   Un bouton ne peut pas contenir de titre : c'est le titre qui enveloppe le
   bouton. Ce conteneur ne doit donc rien peser visuellement, d'où le font:inherit
   qui annule la mise en forme par défaut des h1, h2, h3. */
.tete-h3{font:inherit;letter-spacing:inherit;margin:0}

.accordeon{border-left:1px solid var(--filet)}
.acc{position:relative}
.acc::before{
  content:"";position:absolute;left:-1px;top:0;bottom:0;width:2px;
  background:var(--bleu);transform:scaleY(0);transform-origin:top;
  transition:transform .5s var(--ease);
}
.acc.est-ouvert::before{transform:scaleY(1)}
.acc__tete{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:22px 0 22px 26px;text-align:left;
}
.acc__titre{
  font-family:var(--titre);font-weight:500;
  font-size:clamp(19px,2vw,25px);letter-spacing:-.02em;line-height:1.25;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
.badge{
  font-family:var(--corps);font-style:normal;font-weight:400;
  font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--bleu);background:#EAF2FE;
  padding:4px 10px;border-radius:99px;
}
.acc__fleche{
  flex:none;width:38px;height:38px;border-radius:99px;
  display:grid;place-items:center;
  border:1px solid var(--filet);color:var(--texte);
  transition:background .35s,color .35s,border-color .35s,transform .35s var(--ease);
}
.acc.est-ouvert .acc__fleche{background:var(--bleu);border-color:var(--bleu);color:#fff}
.acc__tete:hover .acc__fleche{border-color:#C3D3E4}
.acc__corps{
  display:grid;grid-template-rows:0fr;overflow:hidden;
  transition:grid-template-rows .55s var(--ease);
  padding-left:26px;
}
.acc.est-ouvert .acc__corps{grid-template-rows:1fr}
.acc__corps p{
  min-height:0;overflow:hidden;color:var(--texte);
  font-size:15.5px;line-height:1.6;max-width:400px;
  opacity:0;transition:opacity .4s .1s;
}
.acc.est-ouvert .acc__corps p{opacity:1;padding-bottom:22px}
.acc:not(:last-child) .acc__tete{border-bottom:1px solid var(--filet)}
.acc.est-ouvert:not(:last-child) .acc__tete{border-bottom-color:transparent}
.acc:not(:last-child) .acc__corps{border-bottom:1px solid var(--filet)}

.marques{
  display:flex;flex-wrap:wrap;gap:10px 34px;align-items:center;
  margin-top:clamp(44px,5vw,72px);padding-top:26px;border-top:1px solid var(--filet);
  font-size:14px;color:var(--texte);letter-spacing:.03em;
}

/* ==========================================================================
   ÉTAPES  ·  section épinglée : l'écran se fige, le scroll change de carte
   ========================================================================== */
.deroule{position:relative;background:#fff}
.deroule__piste{position:relative}
.deroule__ecran{display:flex;align-items:center}
.deroule__inner{
  width:100%;max-width:var(--max);margin-inline:auto;
  padding:clamp(76px,9vw,132px) var(--marge);
  display:flex;flex-direction:column;
}

/* le mode épinglé ne s'active que si l'écran est assez large ET assez haut */
@media (min-width:861px) and (min-height:600px){
  .deroule__piste{height:calc(100svh + 5 * 56svh)}
  .deroule__ecran{
    position:sticky;top:0;height:100svh;overflow:hidden;
  }
  .deroule__inner{
    height:100%;
    padding-top:calc(var(--bandeau) + var(--tete) + clamp(8px,2.4vh,40px));
    padding-bottom:clamp(20px,4.4vh,64px);
  }
  .deroule__inner .grille-titre{flex:0 0 auto}
  .deroule__inner .etapes{flex:1 1 auto;min-height:0;margin-top:clamp(18px,3.4vh,54px)}
  .deroule__inner .et{min-height:0;height:100%}
  /* le chapeau passe à la trappe sur les écrans courts : la place va aux cartes */
  @media (max-height:780px){
    .deroule__inner .chapo{display:none}
    .deroule__inner .titre-section{font-size:clamp(28px,3.4vw,44px)}
  }
}

.etapes{
  display:flex;gap:14px;margin-top:clamp(42px,5.5vw,76px);
  align-items:stretch;
}
.et{
  position:relative;flex:0 0 auto;width:clamp(120px,13vw,210px);
  background:var(--gris);
  min-height:clamp(320px,38vw,452px);
  padding:clamp(16px,2.2vh,24px);
  display:flex;flex-direction:column;justify-content:space-between;
  transition:width .7s var(--ease),background .55s var(--ease-doux),color .4s;
  overflow:hidden;cursor:pointer;
}
.et.est-active{width:clamp(240px,33vw,462px);background:var(--bleu);color:#fff}
.et__tete{display:flex;gap:12px;font-size:12.5px;letter-spacing:.075em;text-transform:uppercase;color:var(--texte);transition:color .4s}
.et.est-active .et__tete{color:rgba(255,255,255,.82)}
.et__num{flex:none}
.et__cat{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.et__bas{display:grid;gap:12px}
.et__icone{color:var(--bleu);transition:color .4s;display:block}
.et.est-active .et__icone{color:#fff}
.et__icone svg{width:34px;height:34px}
.et h3{
  font-family:var(--titre);font-weight:500;font-size:clamp(18px,2.1vw,27px);
  letter-spacing:-.022em;line-height:1.18;
  opacity:0;transform:translateY(10px);
  transition:opacity .5s .1s,transform .5s .1s var(--ease);
}
.et p{
  font-size:15px;line-height:1.55;color:rgba(255,255,255,.88);max-width:340px;
  opacity:0;transform:translateY(10px);
  transition:opacity .5s .18s,transform .5s .18s var(--ease);
}
.et.est-active h3,.et.est-active p{opacity:1;transform:none}
.et:not(.est-active) h3,.et:not(.est-active) p{position:absolute;pointer-events:none;visibility:hidden}

/* écrans peu hauts : on resserre pour que la carte tienne entière */
@media (max-height:860px){
  .et__bas{gap:9px}
  .et h3{font-size:clamp(17px,1.9vw,23px)}
  .et p{font-size:14.5px;line-height:1.5}
  .et__icone svg{width:28px;height:28px}
}
@media (max-height:720px){
  .et__tete{font-size:11.5px}
  .et__icone{display:none}
  .et h3{font-size:19px}
  .et p{font-size:13.5px}
}

/* ==========================================================================
   AVIS
   ========================================================================== */
.carrousel{position:relative;margin-top:clamp(44px,5.5vw,80px);max-width:100%!important;padding-inline:0!important;overflow:hidden}
.carrousel__piste{
  display:flex;gap:14px;
  padding-inline:var(--marge);
  transition:transform .85s var(--ease);
  will-change:transform;
}
.avis{
  position:relative;flex:0 0 clamp(255px,31vw,462px);
  aspect-ratio:1/.84;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:30px;
  background:var(--nuit-2);
  isolation:isolate;
}
.avis__fond{
  position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(120% 90% at 20% 0%,rgba(46,134,232,calc(.1 + var(--t) * .06)) 0%,rgba(46,134,232,0) 62%),
    linear-gradient(200deg,#12141D 0%,#080910 100%);
}
.avis__fond::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(60% 40% at 82% 12%,rgba(127,227,250,.14) 0%,rgba(127,227,250,0) 70%);
}
.avis::before{
  content:"\201C";position:absolute;top:44px;left:24px;
  font-family:var(--titre);font-weight:700;font-size:190px;line-height:1;
  color:rgba(127,227,250,.1);pointer-events:none;
}
.avis blockquote{
  margin:0;font-size:clamp(15px,1.55vw,18px);line-height:1.52;
  letter-spacing:-.008em;
}
.avis__sign{
  margin-top:20px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;color:#9AA3B0;
}
.etoiles{color:var(--bleu);letter-spacing:.12em;font-size:11px}
.avis--vide{border:1px dashed rgba(255,255,255,.14)}
.avis--vide blockquote{color:#6B7480}

.carrousel__nav{display:flex;gap:10px;margin-top:26px;padding-inline:var(--marge)}
.rond--nav{
  width:46px;height:46px;color:#fff;
  border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.05);
}
.rond--nav:hover{background:rgba(255,255,255,.13)}
.rond--nav:disabled{opacity:.3;cursor:default;transform:none}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{margin-top:clamp(40px,5vw,72px)}
.q{border-bottom:1px solid var(--filet-nuit)}
.q:first-child{border-top:1px solid var(--filet-nuit)}
.q__tete{
  width:100%;display:grid;grid-template-columns:1fr 1fr auto;gap:20px;
  align-items:center;padding:26px 0;text-align:left;
}
.q__num{font-size:14px;color:#4E545E;letter-spacing:.06em}
.q__txt{font-size:clamp(16px,1.5vw,20px);letter-spacing:-.014em;line-height:1.35}
.q__plus{
  position:relative;flex:none;width:44px;height:44px;border-radius:99px;
  background:#14161F;transition:background .35s,transform .45s var(--ease);
}
.q__plus::before,.q__plus::after{
  content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;
  background:var(--cyan);border-radius:2px;transition:transform .4s var(--ease),background .35s;
}
.q__plus::before{width:13px;height:1.5px}
.q__plus::after{width:1.5px;height:13px}
.q.est-ouvert .q__plus{background:var(--bleu)}
.q.est-ouvert .q__plus::before,.q.est-ouvert .q__plus::after{background:#fff}
.q.est-ouvert .q__plus::after{transform:scaleY(0)}
.q__tete:hover .q__plus{background:#1B1E29}
.q__corps{
  display:grid;grid-template-rows:0fr;overflow:hidden;
  transition:grid-template-rows .55s var(--ease);
}
.q.est-ouvert .q__corps{grid-template-rows:1fr}
.q__corps p{
  min-height:0;overflow:hidden;
  color:var(--texte-nuit);font-size:16px;line-height:1.62;
  max-width:620px;margin-left:50%;
  opacity:0;transition:opacity .45s .12s;
}
.q.est-ouvert .q__corps p{opacity:1;padding-bottom:28px}

/* ==========================================================================
   CTA FINALE
   ========================================================================== */
.final{position:relative;min-height:100svh;display:grid;align-items:end;overflow:hidden;background:#2A2D33}
.final__fond{position:absolute;inset:0}
.final__fond img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.final__voile{
  position:absolute;inset:0;
  background:
    linear-gradient(0deg,rgba(6,14,24,.82) 0%,rgba(6,14,24,.5) 38%,rgba(6,14,24,.1) 68%,rgba(6,14,24,.26) 100%),
    linear-gradient(90deg,rgba(6,14,24,.42) 0%,rgba(6,14,24,0) 46%);
}
.final__contenu{
  position:relative;z-index:2;
  width:100%;max-width:var(--max);margin:0 auto;
  padding:0 var(--marge) clamp(50px,7vw,96px);
  display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:end;color:#fff;
}
.final__titre{font-size:clamp(32px,4.6vw,64px);letter-spacing:-.035em;line-height:1.04;text-shadow:0 2px 40px rgba(8,20,36,.34)}
.final__droite{max-width:470px}
.final__droite p{font-size:16px;line-height:1.62;color:rgba(255,255,255,.9)}
.final__actions{margin-top:26px;display:flex;gap:12px;flex-wrap:wrap}
.final__actions .btn--cta{height:50px;padding:0 28px;font-size:15.5px}

/* ==========================================================================
   PIED
   ========================================================================== */
.pied{background:#000;color:#fff;padding:clamp(64px,8vw,110px) 0 40px}
.pied>*{max-width:var(--max);margin-inline:auto;padding-inline:var(--marge)}
.pied__cols{display:grid;grid-template-columns:1fr 1fr 1.5fr;gap:clamp(30px,5vw,70px)}
.pied__label{
  font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:#6B7480;
  margin-bottom:26px;
}
.pied__col ul{display:grid;gap:15px}
.pied__col a{transition:color .25s}
.pied__col a:hover{color:var(--bleu)}
.pied__deps{grid-template-columns:1fr 1fr;gap:13px 20px;font-size:15px;color:#B4BCC7}
.pied__accroche{font-size:17px;margin-bottom:22px}
.pied__form{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.pied__form input{
  flex:1 1 175px;min-width:0;
  background:none;border:0;border-bottom:1px solid rgba(255,255,255,.35);
  color:#fff;font:inherit;font-size:16px;padding:8px 2px;
  transition:border-color .3s;
}
.pied__form input::placeholder{color:#7C8593}
.pied__form input:focus{outline:0;border-bottom-color:var(--bleu)}

.pied__bas{
  display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;
  margin-top:clamp(60px,8vw,120px);
}
.lockup{display:flex;align-items:center;gap:18px;font-family:var(--titre);font-weight:700;letter-spacing:-.035em;font-size:clamp(38px,5.6vw,74px);line-height:1}
.lockup img{width:clamp(42px,5.4vw,72px);height:auto}
.pied__legal{text-align:right;color:#6B7480;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;display:grid;gap:12px}
.pied__liens{display:flex;gap:22px;justify-content:flex-end;flex-wrap:wrap}
.pied__liens a{transition:color .25s}
.pied__liens a:hover{color:#fff}

/* Signature de l'agence, centrée sous le filet, discrète par construction :
   le nom seul est en blanc, le reste reste dans le gris du pied. */
.pied__signature{
  margin-top:clamp(38px,4.4vw,60px);padding-top:26px;
  border-top:1px solid var(--filet-nuit);
  text-align:center;color:#6B7480;font-size:13px;letter-spacing:.02em;
}
.pied__signature a{color:#B4BCC7;font-weight:500;transition:color .25s}
.pied__signature a:hover{color:#fff}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1080px){
  .grille-titre{grid-template-columns:1fr;gap:14px}
  .grille-titre__droite{max-width:none}
  .stat{grid-template-columns:1fr;gap:0;align-items:start}
  .stat__label{padding-bottom:22px;max-width:none}
  .presta{grid-template-columns:1fr;gap:34px}
  .presta__visuel{max-width:420px;margin-inline:auto;width:100%}
  .q__tete{grid-template-columns:auto 1fr auto;gap:16px}
  .q__corps p{margin-left:0}
  .final__contenu{grid-template-columns:1fr;align-items:start;gap:22px}
  .pied__cols{grid-template-columns:1fr 1fr}
  .pied__col--form{grid-column:1/-1}
}

@media (max-width:860px){
  .entete{grid-template-columns:auto 1fr auto;padding:14px var(--marge);gap:10px}
  .marque{justify-self:center;font-size:18px}
  /* variantes portrait dédiées (hero-mob, exterieur-mob, cta-mob) : l'unité y est
     cadrée en haut. On descend la zone image sous la barre pour que le produit ne
     passe pas derrière l'en-tête ; la bande libérée reprend la teinte du mur. */
  .hero{background:#6993B3}
  /* 82px : la barre mesure 72px de haut sur mobile, le reste est la respiration */
  .hero__fond{top:calc(var(--bandeau) + 82px)}
  .hero__fond img{object-position:center top}
  .final__fond img{object-position:center top}
  .bande-photo img{aspect-ratio:4/5}
  .pill--tel span{display:none}
  .pill--tel{padding:0 13px}

  .etapes{flex-direction:column;gap:10px}
  .et,.et.est-active{width:100%;min-height:0}
  .et{padding:20px}
  .et:not(.est-active){min-height:76px;justify-content:center}
  .et.est-active{padding:24px 20px 28px}
  .et__bas{margin-top:20px}
  .et:not(.est-active) .et__bas{display:none}
  .et:not(.est-active) h3,.et:not(.est-active) p{position:static}

  .pied__bas{flex-direction:column;align-items:flex-start}
  .pied__legal{text-align:left}
  .pied__liens{justify-content:flex-start}
}

@media (max-width:640px){
  body{font-size:16px}
  /* la légende doit être bornée à droite, sinon la pastille sort du cadre photo */
  .bande-photo__legende{
    left:calc(var(--marge) + 12px);right:calc(var(--marge) + 12px);
    bottom:14px;font-size:12px;padding:8px 14px;border-radius:14px;line-height:1.45;
  }
  .hero__chapo{font-size:15.5px}
  .btn--blanc,.btn--verre{height:46px;padding:0 22px;font-size:15px}
  .avis{padding:24px;aspect-ratio:1/1.12}
  .pied__cols{grid-template-columns:1fr}
  .pied__deps{font-size:14px}
  .marques{gap:8px 20px;font-size:13px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  [data-rev]{opacity:1;transform:none}
  .hero__titre .ligne>span,.stat__valeur>span{transform:none}
  .hero__chapo,.hero__actions{opacity:1;transform:none}
  .bande-photo img{transform:none}
}

/* ==========================================================================
   PAGE CONTACT
   ========================================================================== */
.page-tete{
  background:var(--nuit);color:#fff;
  padding:calc(var(--bandeau) + var(--tete) + clamp(40px,7vw,86px)) 0 clamp(56px,7vw,96px);
}
.page-tete>*{max-width:var(--max);margin-inline:auto;padding-inline:var(--marge)}
.page-tete .chapo{color:var(--texte-nuit)}

.contact-rapide{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,44px);
  margin-top:clamp(40px,5vw,72px);padding-top:clamp(26px,3vw,38px);
  border-top:1px solid var(--filet-nuit);
}
.contact-rapide dt{
  font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:#6B7480;
  margin-bottom:10px;
}
.contact-rapide dd{margin:0;font-size:clamp(16px,1.6vw,19px);line-height:1.45}
.contact-rapide a{transition:color .25s}
.contact-rapide a:hover{color:var(--cyan)}

/* mise en page du bloc formulaire */
.contact{
  display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(34px,6vw,90px);
  align-items:start;
}
.contact__aparte{position:sticky;top:calc(var(--bandeau) + var(--tete) + 24px)}
.contact__aparte h2{font-size:clamp(24px,2.6vw,34px);letter-spacing:-.028em}
.suite{margin-top:26px;display:grid;gap:20px;counter-reset:suite}
.suite li{
  position:relative;padding-left:44px;counter-increment:suite;
  font-size:15.5px;line-height:1.55;color:var(--texte);
}
.suite li::before{
  content:counter(suite);position:absolute;left:0;top:-2px;
  width:30px;height:30px;border-radius:99px;
  display:grid;place-items:center;
  background:#EAF2FE;color:var(--bleu);
  font-family:var(--titre);font-weight:600;font-size:13.5px;
}
.suite strong{display:block;color:var(--encre);font-weight:500;margin-bottom:3px}
.rassure{
  margin-top:30px;padding-top:24px;border-top:1px solid var(--filet);
  display:flex;gap:26px;flex-wrap:wrap;
}
.rassure div{min-width:96px}
.rassure b{
  display:block;font-family:var(--titre);font-weight:600;
  font-size:clamp(24px,2.4vw,32px);color:var(--bleu);letter-spacing:-.03em;
}
.rassure span{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--texte)}

/* rappel en tête de formulaire quand la validation serveur a refusé la saisie.
   Le détail reste sous chaque champ concerné, ce bloc ne fait que l'annoncer. */
.form__alerte{
  margin-bottom:22px;padding:16px 20px;border-radius:14px;
  background:#FDF3F2;border:1px solid #E0736A;color:#8E2F24;
  font-size:15px;line-height:1.55;
}

/* formulaire : gouttières resserrées, l'emplacement de message réservé
   sous chaque champ fournissant déjà une part de la respiration */
.form{display:grid;gap:12px}
.form__duo{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.champ{display:grid;gap:7px}
.champ label{font-size:14.5px;font-weight:500}
.champ .opt{color:var(--texte);font-weight:400}
.champ input,.champ textarea{
  width:100%;font:inherit;font-size:16px;color:var(--encre);
  background:var(--gris);border:1px solid transparent;border-radius:13px;
  padding:14px 16px;
  transition:background .25s,border-color .25s,box-shadow .25s;
}
.champ textarea{resize:vertical;min-height:132px;line-height:1.55}
.champ input::placeholder,.champ textarea::placeholder{color:#98A2AE}
.champ input:hover,.champ textarea:hover{background:#F1F3F5}
.champ input:focus,.champ textarea:focus{
  outline:0;background:#fff;border-color:var(--bleu);
  box-shadow:0 0 0 4px rgba(46,134,232,.16);
}
.champ .aide{font-size:13px;color:var(--texte)}
/* L'emplacement du message d'erreur est TOUJOURS réservé et on ne joue que sur
   la visibilité. Avec un display:none/block, l'apparition d'une erreur au blur
   décalait le bouton d'envoi entre le mousedown et le mouseup : le clic était
   perdu et il fallait cliquer deux fois. Ici la hauteur ne bouge jamais. */
.champ .erreur{font-size:13.5px;line-height:1.45;color:#C0392B;display:block;visibility:hidden}
.champ.est-invalide .erreur{visibility:visible}
.champ.est-invalide input,.champ.est-invalide textarea{
  background:#FDF3F2;border-color:#E0736A;
}

.form__pied{
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  margin-top:4px;
}
.form__pied .btn{height:52px;padding:0 30px;font-size:16px}
.form__mention{font-size:13px;color:var(--texte);max-width:330px;line-height:1.5}
.form__mention a{text-decoration:underline;text-underline-offset:2px}

/* pot de miel anti robot : jamais visible, jamais annoncé */
.leurre{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* confirmation après envoi */
.merci{
  display:none;gap:18px;
  background:var(--gris);border-radius:20px;padding:clamp(26px,3.4vw,42px);
}
.merci.est-visible{display:grid}
.merci__pastille{
  width:52px;height:52px;border-radius:99px;background:var(--bleu);
  display:grid;place-items:center;color:#fff;
}
.merci h2{font-size:clamp(22px,2.4vw,30px);letter-spacing:-.026em}
.merci p{color:var(--texte);font-size:16px;line-height:1.6;max-width:460px}
.form.est-envoye{display:none}

@media (max-width:1080px){
  .contact{grid-template-columns:1fr;gap:38px}
  .contact__aparte{position:static}
}
@media (max-width:640px){
  .contact-rapide{grid-template-columns:1fr;gap:20px}
  .form__duo{grid-template-columns:1fr}
  .form__pied{gap:14px}
  .form__pied .btn{width:100%}
  .form__mention{max-width:none}
}

/* ==========================================================================
   REPLI SANS JAVASCRIPT

   Tout ce qui attend une révélation, une ouverture au clic ou un défilement
   piloté doit être visible d'emblée quand le script n'a pas la main. Sans ce
   bloc, la page s'afficherait presque vide.

   La classe js est posée sur <html> par inc/head.php, par un script inline
   placé avant la feuille de style : il n'y a donc pas de clignotement.
   ========================================================================== */
html:not(.js) .hero__titre .ligne>span,
html:not(.js) .stat__valeur>span{transform:none}

html:not(.js) .hero__chapo,
html:not(.js) .hero__actions,
html:not(.js) [data-rev]{opacity:1;transform:none}

html:not(.js) .bande-photo img{transform:none}

/* accordéon et FAQ : tout est déplié, faute de pouvoir l'ouvrir.
   Les pastilles + et → disparaissent, elles ne promettraient rien. */
html:not(.js) .acc__corps,
html:not(.js) .q__corps{grid-template-rows:1fr}
html:not(.js) .acc__corps p{opacity:1;padding-bottom:22px}
html:not(.js) .q__corps p{opacity:1;padding-bottom:28px}
html:not(.js) .acc__fleche,
html:not(.js) .q__plus{display:none}
html:not(.js) .acc:not(:last-child) .acc__tete{border-bottom-color:var(--filet)}

/* déroulé : plus d'épinglage, les cinq cartes s'empilent en pleine largeur.
   Elles passent toutes en bleu : le texte des étapes est écrit en blanc. */
html:not(.js) .deroule__piste{height:auto}
html:not(.js) .deroule__ecran{position:static;height:auto;overflow:visible}
html:not(.js) .deroule__inner{height:auto}
html:not(.js) .etapes{flex-direction:column}
html:not(.js) .deroule__inner .et,
html:not(.js) .et{width:100%;height:auto;min-height:0;background:var(--bleu);color:#fff;cursor:default}
html:not(.js) .et__tete{color:rgba(255,255,255,.82)}
html:not(.js) .et__icone{color:#fff}
html:not(.js) .et h3,
html:not(.js) .et p{position:static;visibility:visible;opacity:1;transform:none}

/* avis : le carrousel se parcourt à la main, les flèches ne servent plus */
html:not(.js) .carrousel{overflow-x:auto}
html:not(.js) .carrousel__nav{display:none}