/* ============================================================
   TOKENS
   ============================================================ */
:root{
  --givre:#EDF2F5;
  --glace:#C4D8E3;
  --acier:#03293B;
  --acier-clair:#0C3B52;
  --bleu:#1C6E9E;
  --bleu-fonce:#0F4F76;
  --ambre:#EFA00B;
  --encre:#0D1A22;
  --gris:#5B7183;

  --display:'Archivo','Helvetica Neue',Arial,sans-serif;
  --corps:'IBM Plex Sans','Segoe UI',Arial,sans-serif;
  --data:'IBM Plex Mono','SFMono-Regular',Consolas,monospace;

  --pad:clamp(1.25rem,5vw,4.5rem);
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--givre);color:var(--encre);
  font-family:var(--corps);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:1.05;margin:0}
h1{font-size:clamp(2.3rem,6.5vw,4.1rem)}
h2{font-size:clamp(1.8rem,4.2vw,2.9rem)}
h3{font-size:1.15rem;letter-spacing:-.02em;font-weight:600}

.eyebrow{
  font-family:var(--data);font-size:.72rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--bleu);
  margin:0 0 1rem;
}
.eyebrow--pale{color:var(--glace)}

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

/* ============================================================
   BANDEAU ASTREINTE + EN-TÊTE
   ============================================================ */
.astreinte{background:var(--acier);color:#fff;font-family:var(--data);font-size:.78rem}
.astreinte__in{display:flex;gap:.6rem;align-items:center;justify-content:center;padding:.5rem 1rem;flex-wrap:wrap;text-align:center}
.voyant{width:8px;height:8px;border-radius:50%;background:var(--ambre);flex:none;animation:bat 2.4s ease-in-out infinite}
@keyframes bat{0%,100%{opacity:1}50%{opacity:.25}}
.astreinte a{color:var(--ambre);text-decoration:none;font-weight:600}
.astreinte a:hover{text-decoration:underline}

.entete{position:sticky;top:0;z-index:40;background:rgba(237,242,245,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--glace)}
.entete__in{display:flex;align-items:center;gap:1.5rem;padding-top:.9rem;padding-bottom:.9rem}
.marque{display:block;text-decoration:none;line-height:1}
.marque img{height:30px;width:auto;display:block}
.marque span{display:block;font-family:var(--data);font-size:.56rem;font-weight:400;letter-spacing:.16em;color:var(--gris);text-transform:uppercase;margin-top:.4rem}
@media(min-width:1000px){.marque img{height:34px}}
/* logotype en texte, pour les cas où l'image n'est pas possible */
.wordmark{font-family:var(--display);font-weight:700;letter-spacing:-.02em;color:var(--acier)}
.menu{display:none;gap:1.6rem;margin-left:auto;font-size:.9rem}
.menu a{text-decoration:none;color:var(--gris);font-weight:500}
.menu a:hover{color:var(--bleu)}
.entete .btn{margin-left:auto}
@media(min-width:1000px){
  .menu{display:flex}
  .entete .btn{margin-left:0}
}

/* ============================================================
   BOUTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--display);font-weight:600;font-size:.92rem;letter-spacing:-.01em;
  padding:.78rem 1.35rem;border-radius:2px;border:1px solid transparent;
  text-decoration:none;cursor:pointer;transition:transform .12s ease,background .18s ease;
}
.btn:active{transform:translateY(1px)}
.btn--ambre{background:var(--ambre);color:var(--acier)}
.btn--ambre:hover{background:#ffb52e}
.btn--ligne{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.btn--ligne:hover{border-color:#fff}
.btn--sombre{background:var(--acier);color:#fff}
.btn--sombre:hover{background:var(--acier-clair)}

/* ============================================================
   HERO
   ============================================================ */
.hero{background:var(--acier);color:#fff;position:relative;overflow:hidden}
.hero::after{
  content:"";position:absolute;inset:auto 0 0 0;height:4px;
  background:linear-gradient(90deg,#0F4F76,#1C6E9E 38%,#8FB8CC 62%,var(--ambre));
}
.hero__in{display:grid;gap:3rem;padding-top:clamp(3rem,8vw,5.5rem);padding-bottom:clamp(3.5rem,9vw,6rem)}
@media(min-width:940px){.hero__in{grid-template-columns:1.15fr .85fr;align-items:center;gap:4rem}}
.hero h1 .deg{font-family:var(--data);font-weight:600;letter-spacing:-.02em}
.hero p.chapeau{font-size:1.05rem;color:#B9CCD8;max-width:44ch;margin:1.4rem 0 2rem}
.hero__actions{display:flex;gap:.75rem;flex-wrap:wrap}

/* console */
.console{background:var(--acier-clair);border:1px solid rgba(196,216,227,.18);border-radius:3px;padding:1.4rem}
.console__titre{font-family:var(--data);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:#7E97A8;display:flex;justify-content:space-between;gap:1rem;border-bottom:1px solid rgba(196,216,227,.15);padding-bottom:.7rem;margin-bottom:1.1rem}
.releve{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding:.75rem 0;border-bottom:1px dashed rgba(196,216,227,.14)}
.releve:last-child{border-bottom:0;padding-bottom:0}
.releve__nom{font-size:.8rem;color:#B9CCD8;line-height:1.3}
.releve__nom em{display:block;font-style:normal;font-family:var(--data);font-size:.65rem;color:#6E8A9C;letter-spacing:.08em}
.releve__val{font-family:var(--data);font-weight:600;font-size:1.5rem;color:#fff;white-space:nowrap}
.releve__val.ok{color:#7FC4E8}
.releve__val.alerte{color:var(--ambre)}

/* ============================================================
   SIGNATURE : L'AXE DES TEMPÉRATURES
   ============================================================ */
.axe{padding-top:clamp(3.5rem,8vw,6rem);padding-bottom:clamp(3.5rem,8vw,6rem)}
.axe__tete{max-width:52ch;margin-bottom:3rem}
.axe__tete p{color:var(--gris);margin:.9rem 0 0}
.echelle{--gut:5rem;--rail:3.5rem;position:relative;padding-left:var(--gut)}
.echelle::before{
  content:"";position:absolute;left:var(--rail);top:.5rem;bottom:.5rem;width:6px;border-radius:3px;
  background:linear-gradient(180deg,#0F4F76,#1C6E9E 40%,#6FA6C4 70%,var(--ambre));
}
@media(min-width:640px){.echelle{--gut:6rem;--rail:4.2rem}}
.palier{position:relative;padding:0 0 1.6rem}
.palier:last-child{padding-bottom:0}
.palier__temp{
  position:absolute;left:calc(-1 * var(--gut));top:1.5rem;width:calc(var(--rail) - .6rem);text-align:right;
  font-family:var(--data);font-weight:600;font-size:.82rem;color:var(--acier);
}
/* repère posé sur le rail */
.palier::after{
  content:"";position:absolute;left:calc(var(--rail) - var(--gut) - 3px);top:1.5rem;
  width:12px;height:12px;border-radius:50%;background:var(--givre);
  border:2px solid var(--bleu-fonce);
}
/* trait du repère vers la carte */
.palier::before{
  content:"";position:absolute;left:calc(var(--rail) - var(--gut) + 10px);top:1.9rem;
  width:calc(var(--gut) - var(--rail) - 10px);height:1px;background:var(--glace);
}
.carte{
  background:#fff;border:1px solid var(--glace);border-radius:3px;
  padding:1.5rem 1.6rem;transition:border-color .18s ease,transform .18s ease;
}
.carte:hover{border-color:var(--bleu);transform:translateX(3px)}
.carte p{margin:.6rem 0 0;color:var(--gris);font-size:.95rem}
.carte__liste{margin:1rem 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:.4rem}
.carte__liste li{font-family:var(--data);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--bleu-fonce);background:#EAF2F7;padding:.28rem .55rem;border-radius:2px}

/* ============================================================
   DÉRIVE : ENTRETIEN + DÉPANNAGE
   ============================================================ */
.derive{background:var(--acier);color:#fff;padding-top:clamp(3.5rem,8vw,5.5rem);padding-bottom:clamp(3.5rem,8vw,5.5rem)}
.derive h2{max-width:22ch}
.derive__chapeau{color:#B9CCD8;max-width:50ch;margin:1rem 0 2.8rem}
.duo{display:grid;gap:1.5rem}
@media(min-width:800px){.duo{grid-template-columns:1fr 1fr}}
.bloc{border:1px solid rgba(196,216,227,.2);border-radius:3px;padding:1.8rem}
.bloc--urgence{border-color:rgba(239,160,11,.55);background:rgba(239,160,11,.06)}
.bloc h3{margin-bottom:.7rem}
.bloc p{color:#B9CCD8;font-size:.95rem;margin:0 0 1.2rem}
.bloc ul{margin:0 0 1.4rem;padding-left:1.1rem;color:#B9CCD8;font-size:.93rem}
.bloc li{margin-bottom:.4rem}

/* ============================================================
   GARANTIES
   ============================================================ */
.garanties{padding-top:clamp(3rem,7vw,4.5rem);padding-bottom:clamp(3rem,7vw,4.5rem)}
.grille4{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.gar{border-top:2px solid var(--acier);padding-top:1rem}
.gar strong{display:block;font-family:var(--display);font-size:1.6rem;letter-spacing:-.03em}
.gar span{display:block;font-size:.88rem;color:var(--gris);margin-top:.25rem}

/* ============================================================
   SECTEURS
   ============================================================ */
.secteurs{background:#fff;border-top:1px solid var(--glace);border-bottom:1px solid var(--glace);padding-top:clamp(3rem,7vw,4.5rem);padding-bottom:clamp(3rem,7vw,4.5rem)}
.tags{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.8rem}
.tags span{border:1px solid var(--glace);border-radius:2px;padding:.5rem .9rem;font-size:.9rem;color:var(--bleu-fonce)}

/* ============================================================
   CONTACT
   ============================================================ */
.contact{padding-top:clamp(3.5rem,8vw,5.5rem);padding-bottom:clamp(3.5rem,8vw,5.5rem)}
.contact__in{display:grid;gap:3rem}
@media(min-width:900px){.contact__in{grid-template-columns:.85fr 1.15fr;gap:4rem}}
.contact p{color:var(--gris)}
.tel{font-family:var(--data);font-weight:600;font-size:1.5rem;color:var(--encre);text-decoration:none;display:inline-block;margin-top:.6rem;border-bottom:2px solid var(--ambre)}
.champs{display:grid;gap:1rem}
@media(min-width:620px){.paire{display:grid;grid-template-columns:1fr 1fr;gap:1rem}}
.champ label{display:block;font-family:var(--data);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);margin-bottom:.4rem}
.champ input,.champ select,.champ textarea{
  width:100%;font-family:var(--corps);font-size:1rem;color:var(--encre);
  background:#fff;border:1px solid var(--glace);border-radius:2px;padding:.75rem .85rem;
}
.champ textarea{min-height:130px;resize:vertical}
.champ input:focus,.champ select:focus,.champ textarea:focus{border-color:var(--bleu);outline:none;box-shadow:0 0 0 3px rgba(28,110,158,.15)}
.mention{font-size:.8rem;color:var(--gris);margin:0}

/* ============================================================
   PIED
   ============================================================ */
.pied{background:var(--acier);color:#8FA7B6;padding-top:3rem;padding-bottom:2rem;font-size:.88rem}
.pied__grille{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-bottom:2.5rem}
.pied h4{font-family:var(--data);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:#fff;margin:0 0 .9rem;font-weight:500}
.pied ul{list-style:none;margin:0;padding:0}
.pied li{margin-bottom:.45rem}
.pied a{text-decoration:none}
.pied a:hover{color:#fff}
.pied__bas{border-top:1px solid rgba(196,216,227,.15);padding-top:1.4rem;font-size:.78rem;font-family:var(--data)}

.aremplir{background:rgba(239,160,11,.18);border-bottom:1px dotted var(--ambre);padding:0 .15rem}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}
.btn--sombre{color:#fff !important}
.contact .champs{align-content:start;gap:1.4rem}

/* ================= PAGES DE TEXTE (mentions, confidentialite, CGV) ================= */
.texte{padding-top:clamp(2.5rem,6vw,4.5rem);padding-bottom:clamp(3rem,8vw,5.5rem)}
.texte__tete{border-bottom:1px solid var(--glace);padding-bottom:1.6rem;margin-bottom:2.6rem}
.texte__tete h1{font-size:clamp(1.9rem,4.5vw,2.9rem)}
.maj{font-family:var(--data);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gris);margin:.9rem 0 0}

.texte__corps{max-width:72ch}
.texte__corps h2{font-size:clamp(1.2rem,2.6vw,1.55rem);margin:2.8rem 0 .9rem;padding-top:1.3rem;border-top:2px solid var(--acier)}
.texte__corps h2:first-child{margin-top:0;padding-top:0;border-top:0}
.texte__corps h3{margin:1.7rem 0 .5rem;font-size:1.02rem}
.texte__corps p{margin:0 0 1rem;color:#32444E}
.texte__corps ul{margin:0 0 1.2rem;padding-left:1.2rem;color:#32444E}
.texte__corps li{margin-bottom:.42rem}
.texte__corps a{color:var(--bleu)}

/* fiche d'identite : libelle + valeur */
.fiche{list-style:none;margin:0 0 1.5rem;padding:0;display:grid;gap:.6rem}
.fiche li{border-bottom:1px dashed var(--glace);padding-bottom:.6rem;margin:0}
@media(min-width:620px){.fiche li{display:grid;grid-template-columns:13rem 1fr;gap:1rem;align-items:baseline}}
.fiche b{display:block;font-family:var(--data);font-size:.68rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--gris)}

/* encart d'avertissement */
.encart{background:#fff;border:1px solid var(--glace);border-left:3px solid var(--ambre);padding:1.1rem 1.3rem;margin:0 0 1.6rem}
.encart p{margin:0;font-size:.94rem}

/* correctifs contact */
.btn--sombre{color:#fff}
.contact .champs{align-content:start;gap:1.4rem}

/* ================= PAGES DE SERVICE ================= */

/* bandeau de tête */
.tete{background:var(--acier);color:#fff;position:relative;overflow:hidden}
.tete::after{content:"";position:absolute;inset:auto 0 0 0;height:4px;
  background:linear-gradient(90deg,#0F4F76,#1C6E9E 38%,#8FB8CC 62%,var(--ambre))}
.tete__in{padding-top:clamp(2.5rem,6vw,4.2rem);padding-bottom:clamp(3rem,7vw,4.6rem);max-width:60ch}
.tete h1{font-size:clamp(2rem,5vw,3.3rem)}
.tete p{color:#B9CCD8;font-size:1.03rem;margin:1.3rem 0 0}
.tete .hero__actions{margin-top:2.2rem}

.fil{font-family:var(--data);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:#7E97A8;margin:0 0 1.1rem}
.fil a{color:#B9CCD8;text-decoration:none}
.fil a:hover{color:#fff}

/* bloc de contenu courant */
.bloctxt{padding-top:clamp(2.8rem,7vw,4.5rem);padding-bottom:clamp(2.8rem,7vw,4.5rem)}
.bloctxt h2{max-width:24ch;margin-bottom:1.2rem}
.bloctxt__corps{max-width:70ch}
.bloctxt__corps p{margin:0 0 1rem;color:#32444E}
.bloctxt__corps ul{margin:0 0 1.3rem;padding-left:1.2rem;color:#32444E}
.bloctxt__corps li{margin-bottom:.45rem}
.bloctxt__corps h3{margin:2rem 0 .6rem}

/* etapes numerotees */
.etapes{counter-reset:e;list-style:none;margin:2rem 0 0;padding:0}
.etapes li{position:relative;padding:1.45rem 0 1.45rem 3.6rem;border-top:1px solid var(--glace);margin:0}
.etapes li:last-child{border-bottom:1px solid var(--glace)}
.etapes li::before{counter-increment:e;content:counter(e,decimal-leading-zero);
  position:absolute;left:0;top:1.55rem;font-family:var(--data);font-weight:600;
  font-size:.82rem;letter-spacing:.05em;color:var(--bleu)}
.etapes h3{margin:0 0 .35rem;font-size:1.05rem}
.etapes p{margin:0;color:var(--gris);font-size:.95rem;max-width:64ch}

/* grille de points techniques */
.points{display:grid;gap:1.3rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-top:2rem}
.point{background:#fff;border:1px solid var(--glace);border-radius:3px;padding:1.4rem 1.5rem}
.point h3{margin:0 0 .5rem;font-size:1.02rem}
.point p{margin:0;color:var(--gris);font-size:.93rem}

/* questions frequentes */
.faq{max-width:74ch;margin-top:2rem}
.faq details{border-top:1px solid var(--glace);padding:1.15rem 0}
.faq details:last-of-type{border-bottom:1px solid var(--glace)}
.faq summary{cursor:pointer;list-style:none;font-family:var(--display);font-weight:600;
  font-size:1.03rem;letter-spacing:-.02em;padding-right:2rem;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:-.1rem;
  font-family:var(--data);font-weight:400;font-size:1.2rem;color:var(--bleu)}
.faq details[open] summary::after{content:"\2013"}
.faq details p{margin:.85rem 0 0;color:#32444E;max-width:68ch}

/* bandeau de rappel en fin de page */
.rappel{background:var(--acier);color:#fff}
.rappel__in{padding-top:clamp(2.6rem,6vw,3.8rem);padding-bottom:clamp(2.6rem,6vw,3.8rem);
  display:grid;gap:1.6rem;align-items:center}
@media(min-width:820px){.rappel__in{grid-template-columns:1.3fr .7fr;gap:3rem}}
.rappel h2{font-size:clamp(1.5rem,3.2vw,2.1rem);max-width:22ch}
.rappel p{color:#B9CCD8;margin:.8rem 0 0;font-size:.97rem}
.rappel__actions{display:flex;gap:.7rem;flex-wrap:wrap}

/* liens vers les autres prestations */
.autres{padding-bottom:clamp(2.8rem,7vw,4.5rem)}
.autres__liste{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-top:1.6rem}
.autres__liste a{display:block;background:#fff;border:1px solid var(--glace);border-radius:3px;
  padding:1.05rem 1.2rem;text-decoration:none;font-family:var(--display);font-weight:600;
  font-size:.98rem;letter-spacing:-.02em;transition:border-color .18s ease,transform .18s ease}
.autres__liste a:hover{border-color:var(--bleu);transform:translateX(3px)}
.autres__liste span{display:block;font-family:var(--corps);font-weight:400;font-size:.87rem;
  color:var(--gris);letter-spacing:0;margin-top:.25rem}

/* ================= CONFIGURATEUR DE CONTRAT ================= */
.cfg{padding-top:clamp(2.5rem,6vw,4rem);padding-bottom:clamp(3rem,7vw,4.5rem)}
.cfg__etape{margin-bottom:2.6rem}
.cfg__num{font-family:var(--data);font-size:.7rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--bleu);margin:0 0 .5rem}
.cfg__etape h2{font-size:clamp(1.3rem,2.8vw,1.75rem);margin-bottom:.35rem}
.cfg__etape > p{color:var(--gris);margin:0 0 1.5rem;font-size:.95rem}

/* choix du systeme */
.cfg__sys{display:grid;gap:.9rem;grid-template-columns:repeat(2,1fr)}
@media(min-width:680px){.cfg__sys{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.cfg__sys{grid-template-columns:repeat(6,1fr)}}

.cfg__choix{position:relative;background:#fff;border:1px solid var(--glace);border-radius:3px;
  padding:1.15rem 1rem;text-align:left;cursor:pointer;width:100%;font-family:inherit;
  transition:border-color .16s ease,transform .16s ease}
.cfg__choix:hover{border-color:var(--bleu);transform:translateY(-2px)}
.cfg__choix[aria-pressed="true"]{border-color:var(--acier);border-width:2px;padding:calc(1.15rem - 1px) calc(1rem - 1px);background:#E9F1F6}
.cfg__choix::after{content:"";position:absolute;top:.7rem;right:.7rem;width:14px;height:14px;
  border-radius:50%;border:1px solid var(--glace);background:#fff}
.cfg__choix[aria-pressed="true"]::after{background:var(--acier);border-color:var(--acier);
  box-shadow:inset 0 0 0 3px #fff}

.cfg__nom{display:block;font-family:var(--display);font-weight:700;font-size:.92rem;
  letter-spacing:-.02em;color:var(--acier)}
.cfg__unites{display:block;font-family:var(--data);font-size:.66rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gris);margin-top:.25rem}
.cfg__tarif{display:block;font-family:var(--data);font-weight:600;font-size:.92rem;
  color:var(--bleu-fonce);margin-top:.7rem}

/* choix de la frequence */
.cfg__freq{display:grid;gap:1rem}
@media(min-width:680px){.cfg__freq{grid-template-columns:1fr 1fr}}
.cfg__freq .cfg__choix{padding:1.4rem 1.5rem}
.cfg__freq .cfg__choix[aria-pressed="true"]{padding:calc(1.4rem - 1px) calc(1.5rem - 1px)}
.cfg__etiq{display:inline-block;background:var(--ambre);color:var(--acier);
  font-family:var(--data);font-size:.62rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;padding:.2rem .55rem;border-radius:2px;margin-bottom:.7rem}
.cfg__freq h3{margin:0 0 .35rem;font-size:1.08rem}
.cfg__freq p{margin:0;color:var(--gris);font-size:.9rem;line-height:1.55;max-width:38ch}

/* panneau de resultat */
.cfg__resultat{background:var(--acier);color:#fff;border-radius:3px;padding:clamp(1.6rem,4vw,2.4rem);display:none}
.cfg__resultat.visible{display:block}
.cfg__resultat::before{content:"";display:block;height:3px;margin:-1.6rem -1.6rem 1.6rem;
  background:linear-gradient(90deg,#0F4F76,#1C6E9E 38%,#8FB8CC 62%,var(--ambre))}
@media(min-width:640px){.cfg__resultat::before{margin:-2.4rem -2.4rem 2rem}}
.cfg__resultat-in{display:grid;gap:2rem}
@media(min-width:860px){.cfg__resultat-in{grid-template-columns:1fr 17rem;gap:3rem;align-items:start}}

.cfg__label{font-family:var(--data);font-size:.66rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:#7E97A8;margin:0 0 .6rem}
.cfg__titre{font-family:var(--display);font-weight:800;font-size:clamp(1.25rem,2.6vw,1.7rem);
  letter-spacing:-.03em;margin:0 0 .5rem}
.cfg__detail{color:#B9CCD8;font-size:.9rem;margin:0 0 1.5rem;line-height:1.55}
.cfg__inclus{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.45rem}
.cfg__inclus li{background:rgba(196,216,227,.1);border:1px solid rgba(196,216,227,.16);
  border-radius:2px;padding:.35rem .7rem;font-size:.8rem;color:#DCE7EE}
.cfg__inclus li::before{content:"\2713";color:var(--ambre);margin-right:.4rem;font-size:.75rem}

/* bascule annuel / mensuel */
.cfg__bascule{display:flex;gap:2px;background:rgba(196,216,227,.12);border-radius:2px;padding:2px;margin-bottom:1.4rem}
.cfg__bascule button{flex:1;border:0;border-radius:2px;padding:.55rem .5rem;cursor:pointer;
  font-family:var(--display);font-weight:600;font-size:.82rem;color:#B9CCD8;background:transparent}
.cfg__bascule button[aria-pressed="true"]{background:var(--ambre);color:var(--acier)}

.cfg__prix{font-family:var(--data);font-weight:600;font-size:clamp(2.4rem,6vw,3rem);
  line-height:1;letter-spacing:-.03em}
.cfg__prix sup{font-size:1.1rem;vertical-align:top;margin-left:.1rem}
.cfg__periode{font-family:var(--data);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:#7E97A8;margin:.5rem 0 1.4rem}
.cfg__souscrire{display:block;width:100%;text-align:center;border:0;cursor:pointer;
  background:var(--ambre);color:var(--acier);font-family:var(--display);font-weight:700;
  font-size:.98rem;padding:.95rem 1rem;border-radius:2px;text-decoration:none;
  transition:background .16s ease,transform .12s ease}
.cfg__souscrire:hover{background:#ffb52e}
.cfg__souscrire:active{transform:translateY(1px)}
.cfg__paiement{font-family:var(--data);font-size:.66rem;letter-spacing:.08em;color:#6E8A9C;
  text-align:center;margin:.8rem 0 0}

/* invite avant selection */
.cfg__invite{border:1px dashed var(--glace);border-radius:3px;padding:1.6rem;text-align:center;
  color:var(--gris);font-size:.94rem}
.cfg__invite.masque{display:none}

/* espace client */
.cfg__portail{background:#fff;border:1px solid var(--glace);border-left:3px solid var(--bleu);
  border-radius:3px;padding:1.6rem 1.8rem;margin-top:2rem;display:grid;gap:1.2rem;align-items:center}
@media(min-width:780px){.cfg__portail{grid-template-columns:1fr auto;gap:2rem}}
.cfg__portail h3{margin:0 0 .4rem;font-size:1.02rem}
.cfg__portail p{margin:0;color:var(--gris);font-size:.9rem}
.cfg__portail ul{list-style:none;margin:.8rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.9rem}
.cfg__portail li{font-family:var(--data);font-size:.68rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gris)}

/* ================= MENU MOBILE ================= */

/* la case a cocher pilote l'ouverture, sans JavaScript */
.bascule-menu{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

.burger{margin-left:auto;display:flex;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:11px;cursor:pointer;background:#fff;
  border:1px solid var(--glace);border-radius:2px;flex:none}
.burger span{display:block;height:2px;background:var(--acier);border-radius:2px;transition:opacity .15s ease}
.bascule-menu:focus-visible + .burger{outline:3px solid var(--ambre);outline-offset:3px}
.bascule-menu:checked + .burger{border-color:var(--acier);background:var(--acier)}
.bascule-menu:checked + .burger span{background:#fff}
.bascule-menu:checked + .burger span:nth-child(2){opacity:0}

@media(max-width:1099px){
  .entete__in{flex-wrap:wrap;gap:.8rem}
  .entete .btn{display:none}

  .menu{display:none;order:5;width:100%;flex-direction:column;gap:0;margin:0;
    border-top:1px solid var(--glace);padding-bottom:.6rem}
  .bascule-menu:checked ~ .menu{display:flex}

  .menu a{padding:.95rem .1rem;border-bottom:1px solid var(--glace);
    font-family:var(--display);font-weight:600;font-size:1rem;letter-spacing:-.02em;color:var(--acier)}
  .menu a:last-child{border-bottom:0}
  .menu .menu__cta{display:block;margin-top:1rem;border-bottom:0;background:var(--ambre);
    color:var(--acier);text-align:center;border-radius:2px;padding:.85rem 1rem}
}

@media(min-width:1100px){
  .burger{display:none}
  .menu{display:flex}
  .menu .menu__cta{display:none}
  .entete .btn{display:inline-flex;margin-left:0}
}

/* ================= TRANSITIONS ENTRE LES PAGES ================= */

/* 1. Supprime le flash blanc pendant le chargement.
      Sans cette ligne, le navigateur affiche sa page blanche par defaut
      entre le clic et le rendu de la page suivante. */
html{background:var(--givre)}

/* 2. Fondu enchaine entre les pages (navigateurs compatibles) */
@view-transition{navigation:auto}

::view-transition-old(root){animation:pageSortie .16s ease-out both}
::view-transition-new(root){animation:pageEntree .3s ease-out both}

@keyframes pageSortie{to{opacity:0}}
@keyframes pageEntree{from{opacity:0;transform:translateY(10px)}}

/* 3. L'en-tete et le bandeau d'astreinte ne clignotent plus :
      ils sont identifies comme persistants d'une page a l'autre. */
.astreinte{view-transition-name:bandeau-astreinte}
.entete{view-transition-name:bandeau-entete}

/* 4. Repli pour les navigateurs sans fondu enchaine :
      le contenu monte doucement au lieu d'apparaitre sec. */
body{animation:pageEntree .3s ease-out both}
@supports (view-transition-name:none){
  body{animation:none}
}

/* 5. Adoucit aussi les ancres internes (#contact, #prestations) */
html{scroll-behavior:smooth;scroll-padding-top:5.5rem}

/* 6. Respect du reglage systeme : aucune animation si l'utilisateur
      a demande a les reduire. */
@media(prefers-reduced-motion:reduce){
  ::view-transition-old(root),
  ::view-transition-new(root){animation:none}
  body{animation:none}
  html{scroll-behavior:auto}
}

/* --- derniers ajustements --- */
.entete .btn--sombre,
.tete .btn--ambre,
.tete .btn--ligne{color:inherit}
.tete .btn--ambre{color:var(--acier) !important}
.tete .btn--ligne{color:#fff !important}

.tete p{margin-top:1.8rem}
.bloctxt__corps p{margin-bottom:1.25rem}

.marque img{height:36px}
@media(min-width:1100px){.marque img{height:46px}}

body{font-size:22px}

.bloctxt__corps p,.bloctxt__corps li,.texte__corps p,.texte__corps li{font-size:1.12rem}

.astreinte{font-size:1.10rem}

.astreinte{font-size:.88rem}
.astreinte a{font-size:1.05em}

a.btn--ambre{color:var(--acier) !important}
a.btn--ligne{color:#fff !important}
a.btn--sombre{color:#fff !important}

.derive__chapeau{margin-top:1.6rem}

@media(max-width:700px){
  .echelle{--gut:3.6rem;--rail:2.4rem}
  .palier__temp{font-size:.58rem}
  .hero__actions .btn{flex:1;justify-content:center}
}