/* ============ Polices auto-hébergées ============
   Servies depuis climyo.fr et non depuis fonts.googleapis.com :
   deux connexions tierces en moins au chargement, et surtout aucune
   adresse IP de visiteur transmise à Google avant son consentement.
   Sous-ensemble latin uniquement, poids réellement utilisés seulement. */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/bricolage-grotesque-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:800;font-display:swap;
  src:url('fonts/bricolage-grotesque-latin-800-normal.woff2') format('woff2')}
@font-face{font-family:'Figtree';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/figtree-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Figtree';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/figtree-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Figtree';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/figtree-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Figtree';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/figtree-latin-700-normal.woff2') format('woff2')}

/* ============ Contenu visible même si le JavaScript échoue ============
   styles.css met .reveal à opacity:0 en attendant que main.js l'observe.
   Si le JS ne s'exécute pas — erreur, blocage, réseau coupé — toute la page
   reste invisible. On inverse la logique : le masquage n'est appliqué que si
   le script d'amorçage a bien tourné. */
.reveal{opacity:1;transform:none}
html.cy-anim .reveal{opacity:0;transform:translateY(16px)}
html.cy-anim .reveal.vu{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){html.cy-anim .reveal{opacity:1;transform:none}}

/* ============ CLIMYO — calculateur, financement, packs, conversion ============
   Complément de styles.css. À charger APRÈS styles.css.
   Réutilise le design system existant (--encre, --accent, --givre, --radius…),
   y compris la bascule été / hiver qui repeint --accent.
   Toutes les classes propres à ce fichier sont préfixées .cy-
   ============================================================================ */

/* ============ En-tête : 6 entrées de menu au lieu de 4 ============
   Rien ne doit se couper en deux lignes, ni les libellés ni le bouton.
   Libellés raccourcis côté HTML, burger déclenché à 1020 px au lieu de 920,
   et resserrement léger entre 1021 et 1200 px. */
nav.menu a,
.nav-actions .btn,
.tel { white-space: nowrap; }

@media(min-width:1021px) and (max-width:1200px){
  nav.menu{gap:19px}
  nav.menu a{font-size:.9rem}
  .nav-actions{gap:11px}
  .nav-actions .btn{padding:9px 17px;font-size:.9rem}
  .tel{font-size:.9rem}
}

/* Reprise du comportement mobile natif du site, seuil relevé à 1020 px.
   (.tel .txt reste visible jusqu'à 920 px, où la règle d'origine le masque.) */
@media(max-width:1020px){
  nav.menu{
    position:fixed;inset:70px 0 auto 0;background:var(--blanc);
    flex-direction:column;gap:0;padding:10px 0 16px;
    border-bottom:1px solid var(--givre);box-shadow:var(--shadow);
    transform:translateY(-130%);transition:transform .3s;align-items:stretch;
  }
  nav.menu.ouvert{transform:none}
  nav.menu a{padding:13px 24px;font-size:.95rem}
  nav.menu a.actif::after{display:none}
  .burger{display:block}
}

/* ============ Bande de réassurance (sous l'en-tête) ============ */
.cy-reassurance{background:var(--encre);color:#fff}
.cy-reassurance .cy-inner{max-width:1120px;margin:0 auto;padding:11px 22px;display:flex;gap:26px;align-items:center;justify-content:center;flex-wrap:wrap;font-size:.86rem;font-weight:600}
.cy-reassurance b{color:var(--chaud);font-weight:700}
.cy-reassurance .cy-sep{opacity:.32}
@media(max-width:760px){
  .cy-reassurance .cy-inner{gap:12px;font-size:.75rem;padding:9px 16px}
  .cy-reassurance .cy-sep{display:none}
}

/* ============ Bandeau marques ============ */
.cy-marques{padding:40px 0 36px;background:var(--blanc);overflow:hidden}
.cy-marques .cy-titre{text-align:center;font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--encre-45);margin-bottom:24px}
.cy-piste{display:flex;gap:56px;width:max-content;align-items:center;animation:cy-defile 34s linear infinite}
.cy-marques:hover .cy-piste{animation-play-state:paused}
@keyframes cy-defile{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.cy-marque{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.25rem;letter-spacing:-.01em;color:var(--encre-45);white-space:nowrap;transition:color .2s}
.cy-marque:hover{color:var(--encre)}
@media(prefers-reduced-motion:reduce){.cy-piste{animation:none;flex-wrap:wrap;justify-content:center;width:auto;gap:28px}}

/* ============ Calculateur ============ */
.cy-calc{background:var(--blanc);border:1px solid var(--givre);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.cy-calc-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:18px 24px;border-bottom:1px solid var(--givre);background:var(--glace)}
.cy-calc-head h3{font-size:1.08rem;font-weight:800}
.cy-calc-head .cy-eyebrow{display:block;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-fonce);margin-bottom:4px}
.cy-chrono{background:var(--blanc);border:1px solid var(--givre);border-radius:999px;padding:5px 12px;font-size:.76rem;font-weight:700;color:var(--encre-45);white-space:nowrap}
.cy-calc-body{padding:22px 24px 24px}

.cy-champ{margin-bottom:20px}
.cy-lbl{display:block;font-size:.85rem;font-weight:700;margin-bottom:9px;color:var(--encre-70)}
.cy-seg{display:flex;gap:6px;background:var(--glace);border:1px solid var(--givre);border-radius:999px;padding:5px}
.cy-seg button{flex:1;border:none;background:transparent;border-radius:999px;padding:10px 8px;font-family:inherit;font-size:.92rem;font-weight:700;color:var(--encre-45);cursor:pointer;transition:background .25s,color .25s}
.cy-seg button[aria-pressed="true"]{background:var(--accent);color:#fff}

.cy-pieces{display:flex;flex-direction:column;gap:9px}
.cy-piece{display:grid;grid-template-columns:1fr 110px 42px;gap:9px;align-items:center}
.cy-piece input{width:100%;border:1px solid var(--givre);border-radius:12px;padding:12px 14px;font-family:inherit;font-size:.95rem;color:var(--encre);background:var(--blanc);-moz-appearance:textfield}
.cy-piece input::-webkit-outer-spin-button,.cy-piece input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.cy-piece input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(46,155,198,.16)}
.cy-piece input:focus-visible{outline:3px solid var(--encre);outline-offset:2px}
.cy-m2{position:relative;display:block}
.cy-m2::after{content:"m²";position:absolute;right:13px;top:50%;transform:translateY(-50%);font-size:.85rem;font-weight:700;color:var(--encre-45);pointer-events:none}
.cy-m2 input{padding-right:38px}
.cy-suppr{border:1px solid var(--givre);background:var(--blanc);border-radius:12px;width:42px;height:42px;cursor:pointer;color:var(--encre-45);font-size:1.15rem;line-height:1;font-family:inherit;transition:border-color .2s,color .2s,background .2s}
.cy-suppr:hover{border-color:#E0B4B4;color:#C0392B;background:#FDF4F4}
.cy-suppr:disabled{opacity:.32;cursor:not-allowed}
.cy-ajouter{margin-top:11px;border:1.5px dashed var(--givre);background:transparent;border-radius:12px;padding:12px 16px;width:100%;cursor:pointer;font-family:inherit;font-size:.9rem;font-weight:700;color:var(--accent-fonce);transition:background .2s,border-color .2s}
.cy-ajouter:hover{background:var(--glace);border-color:var(--accent)}
.cy-ajouter:disabled{opacity:.4;cursor:not-allowed}

.cy-synthese{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;background:var(--glace);border-radius:12px;padding:13px 16px;margin-top:16px;font-size:.87rem;font-weight:600;color:var(--encre-70)}
.cy-synthese b{color:var(--encre)}
.cy-synthese .cy-conf{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;color:var(--accent-fonce)}

.cy-resultat{margin-top:20px;background:var(--encre);color:#fff;border-radius:var(--radius);padding:22px 24px}
.cy-resultat .cy-kicker{font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--chaud);margin-bottom:8px}
.cy-resultat .cy-detail{font-size:.86rem;opacity:.72;margin-bottom:8px}
.cy-prix{font-family:'Bricolage Grotesque',sans-serif;font-size:2.5rem;font-weight:800;line-height:1;letter-spacing:-.02em}
.cy-prix small{font-size:.9rem;font-weight:600;opacity:.7;letter-spacing:0;margin-left:6px;font-family:'Figtree',sans-serif}
.cy-mensu{margin-top:15px;padding-top:15px;border-top:1px solid rgba(255,255,255,.16);display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:.88rem}
.cy-choix-x{display:flex;gap:6px}
.cy-choix-x button{border:1px solid rgba(255,255,255,.24);background:transparent;color:#fff;border-radius:999px;padding:6px 12px;font-family:inherit;font-size:.8rem;font-weight:700;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.cy-choix-x button[aria-pressed="true"]{background:var(--chaud);color:#fff;border-color:var(--chaud)}
.cy-mensu .cy-val{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.15rem}
.cy-inclus{margin-top:14px;font-size:.8rem;opacity:.62;line-height:1.5}
.cy-calc-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.cy-calc-cta .btn{flex:1;min-width:158px;text-align:center;padding:13px 20px;font-size:.95rem}
.cy-note-calc{margin-top:14px;font-size:.78rem;line-height:1.55;color:var(--encre-45)}

/* ============ Financement ============ */
.cy-fin-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:center}
@media(max-width:880px){.cy-fin-grid{grid-template-columns:1fr;gap:34px}}
.cy-fin-liste{list-style:none;margin:22px 0 0}
.cy-fin-liste li{position:relative;padding:5px 0 5px 26px;font-size:.97rem;color:var(--encre-70)}
.cy-fin-liste li::before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:800}
.cy-fin-liste.cy-sup li::before{content:"+";color:var(--chaud-fonce)}
.cy-fin-liste li b{color:var(--encre)}

.cy-echeanciers{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),1fr));gap:12px}
.cy-ech{position:relative;background:var(--blanc);border:1.5px solid var(--givre);border-radius:var(--radius);padding:22px 16px;text-align:center;transition:transform .2s,box-shadow .2s,border-color .2s}
.cy-ech:hover{border-color:var(--accent);box-shadow:var(--shadow-sm);transform:translateY(-3px)}
.cy-ech.cy-top{border-color:var(--chaud);background:var(--blanc);box-shadow:var(--shadow-sm)}
.cy-ech .cy-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--chaud);color:#fff;border-radius:999px;padding:4px 13px;font-size:.7rem;font-weight:700;white-space:nowrap}
.cy-ech .cy-x{font-family:'Bricolage Grotesque',sans-serif;font-size:1.8rem;font-weight:800;line-height:1}
.cy-ech .cy-m{margin:9px 0 3px;font-size:1.1rem;font-weight:800;color:var(--accent-fonce);font-family:'Bricolage Grotesque',sans-serif}
.cy-ech .cy-sous{font-size:.78rem;color:var(--encre-45);line-height:1.45}
.cy-ech .cy-sf,.cy-ech .cy-tx{display:inline-block;margin-top:9px;border-radius:999px;padding:3px 11px;font-size:.7rem;font-weight:700}
.cy-ech .cy-sf{background:#E4F4EC;color:#1B7A56}
.cy-ech .cy-tx{background:var(--givre);color:var(--accent-fonce)}
.cy-fin-note{margin-top:20px;font-size:.78rem;line-height:1.6;color:var(--encre-45)}
.cy-fin-note b{color:var(--encre-70)}
.cy-cb{display:flex;gap:8px;align-items:center;margin-top:18px;flex-wrap:wrap;font-size:.8rem;font-weight:700;color:var(--encre-45)}
.cy-cb span{border:1px solid var(--givre);border-radius:8px;padding:5px 11px;background:var(--blanc)}

/* ============ Cartes entretien / packs ============ */
.cy-cartes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:20px}
.cy-carte-serv{display:flex;flex-direction:column;background:var(--blanc);border:1px solid var(--givre);border-radius:var(--radius);padding:28px 26px;box-shadow:var(--shadow-sm);text-decoration:none;color:inherit;transition:transform .2s,box-shadow .2s,border-color .2s}
a.cy-carte-serv:hover{border-color:var(--accent);box-shadow:var(--shadow);transform:translateY(-3px)}
.cy-carte-serv .cy-tag{align-self:flex-start;background:var(--givre);color:var(--accent-fonce);border-radius:999px;padding:5px 13px;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:16px}
.cy-carte-serv.cy-pack .cy-tag{background:#FBEEE1;color:var(--chaud-fonce)}
.cy-carte-serv h3{font-size:1.18rem;margin-bottom:8px}
.cy-carte-serv p{font-size:.94rem;color:var(--encre-70);margin-bottom:18px}
.cy-carte-serv .cy-des{margin-top:auto;font-family:'Bricolage Grotesque',sans-serif;font-size:1.5rem;font-weight:800;line-height:1.15}
.cy-carte-serv .cy-des small{display:block;font-family:'Figtree',sans-serif;font-size:.78rem;font-weight:600;color:var(--encre-45);margin-top:3px}
.cy-carte-serv .cy-fleche{margin-top:14px;font-weight:700;font-size:.92rem;color:var(--accent-fonce)}
a.cy-carte-serv:hover .cy-fleche{text-decoration:underline}
.cy-carte-serv .btn{align-self:flex-start;margin-top:18px}

/* ============ Étapes numérotées ============ */
.cy-etapes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:20px}
.cy-etape{position:relative;overflow:hidden;background:var(--blanc);border:1px solid var(--givre);border-radius:var(--radius);padding:30px 26px;box-shadow:var(--shadow-sm)}
.cy-etape::before{content:attr(data-num);position:absolute;top:-18px;right:10px;font-family:'Bricolage Grotesque',sans-serif;font-size:5.2rem;font-weight:800;color:var(--givre);line-height:1;pointer-events:none}
.cy-etape > *{position:relative}
.cy-etape .cy-kick{font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-fonce);margin-bottom:10px}
.cy-etape h3{font-size:1.18rem;margin-bottom:10px}
.cy-etape p{font-size:.95rem;color:var(--encre-70);margin-bottom:14px}
.cy-etape ul{list-style:none}
.cy-etape li{font-size:.87rem;font-weight:600;color:var(--encre-45);padding:4px 0 4px 20px;position:relative}
.cy-etape li::before{content:"—";position:absolute;left:0;color:var(--accent)}

/* ============ Barre d'action mobile ============ */
.cy-barre-mobile{position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;gap:9px;padding:9px 14px calc(9px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-top:1px solid var(--givre);box-shadow:0 -6px 24px rgba(14,42,56,.10)}
.cy-barre-mobile .btn{flex:1;text-align:center;padding:13px 10px;font-size:.95rem}
@media(max-width:820px){
  .cy-barre-mobile{display:flex}
  body{padding-bottom:76px}
  .cookie-bandeau{bottom:84px}
}

/* ============ Modale « me faire rappeler » ============ */
.cy-modale{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(14,42,56,.55);backdrop-filter:blur(3px)}
.cy-modale.cy-ouverte{display:flex}
.cy-modale-boite{position:relative;background:var(--blanc);border-radius:var(--radius);padding:34px 30px;width:100%;max-width:430px;box-shadow:0 22px 64px rgba(14,42,56,.28);animation:cy-pop .22s ease}
@keyframes cy-pop{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.cy-modale-boite h3{font-size:1.35rem;margin-bottom:8px}
.cy-modale-boite p{font-size:.93rem;color:var(--encre-70);margin-bottom:20px}
.cy-modale-boite input{width:100%;border:1px solid var(--givre);border-radius:12px;padding:14px 15px;font-family:inherit;font-size:1rem;color:var(--encre);margin-bottom:12px;background:var(--blanc)}
.cy-modale-boite input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(46,155,198,.16)}
.cy-modale-boite .btn{width:100%;text-align:center}
.cy-fermer{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;border:1px solid var(--givre);background:var(--blanc);cursor:pointer;font-size:1.15rem;line-height:1;color:var(--encre-45);font-family:inherit}
.cy-fermer:hover{background:var(--glace);color:var(--encre)}
.cy-mini-note{font-size:.76rem;line-height:1.55;color:var(--encre-45);margin-top:14px}
/* Mention RGPD de la modale de rappel : obligatoire mais elle ne doit pas
   peser autant que le formulaire lui-même. Repliée derrière un <details>
   sur mobile, discrète mais toujours accessible d'un geste. */
.cy-modale-boite .cy-mini-note{font-size:.68rem;line-height:1.45;color:var(--encre-45);opacity:.85;margin-top:12px}
.cy-rgpd{margin-top:12px;font-size:.7rem;color:var(--encre-45)}
.cy-rgpd summary{cursor:pointer;list-style:none;font-size:.72rem;font-weight:600;color:var(--encre-45);text-decoration:underline;text-underline-offset:2px}
.cy-rgpd summary::-webkit-details-marker{display:none}
.cy-rgpd summary:hover{color:var(--encre-70)}
.cy-rgpd p{margin-top:7px;font-size:.68rem;line-height:1.5}
.cy-rgpd a{color:var(--accent-fonce)}
.cy-mini-note a{color:var(--accent-fonce)}
.cy-err{display:none;color:#C0392B;font-size:.86rem;font-weight:700;margin-bottom:10px}
.cy-ok{text-align:center}
.cy-ok .cy-check{font-size:2.6rem;margin-bottom:10px}

/* ============ Correctifs responsive ============
   Le style en ligne du pied de page écrasait la règle mobile de styles.css :
   la grille restait à 4 colonnes sur téléphone. On la redéclare ici. */
.foot-grid{grid-template-columns:1.2fr 1fr 1fr 1fr;gap:32px}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.foot-grid{grid-template-columns:1fr;gap:26px}}

/* Colonne « Zones d'intervention » : 15 villes, deux colonnes dès qu'il y a
   la place, pour ne pas allonger le pied de page démesurément. */
.foot-grid > div:nth-child(3) ul{columns:2;column-gap:18px}
@media(max-width:600px){.foot-grid > div:nth-child(3) ul{columns:2}}

/* Formulaire de devis : les grilles à deux colonnes en style en ligne
   débordent sous 520 px. On les repasse en pile. */
@media(max-width:520px){
  .devis-page .form-row{grid-template-columns:1fr !important}
  .devis-page .choix{grid-template-columns:1fr !important}
}

/* Tableaux des pages légales : lisibles sans déborder sur mobile. */
@media(max-width:640px){
  .legal table{font-size:.82rem}
  .legal th,.legal td{padding:8px 7px}
}

/* La bannière cookies ne doit pas passer sous la barre d'action mobile. */
@media(max-width:820px){.cookie-bandeau{bottom:88px}}

/* ============ Page devis en landing page ============
   Aucune sortie latérale : ni menu, ni liens de pied de page, ni barre
   mobile pointant vers la page où l'on se trouve déjà. */
.cy-lp .burger{display:none}
.cy-lp .cy-barre-mobile{display:none}
.cy-lp .logo{cursor:default}
.cy-lp-foot{padding-top:26px}
.cy-lp-foot .foot-bas{border-top:none;margin-top:0;padding-top:0}
.cy-lp-foot a,.cy-lp-foot button{color:inherit;background:none;border:0;padding:0;font:inherit;cursor:pointer;text-decoration:underline}
@media(max-width:820px){ .cy-lp{padding-bottom:0} }
.cy-lp .nav-actions .btn{padding:9px 18px;font-size:.88rem}
@media(max-width:600px){ .cy-lp .nav-actions .btn{display:none} }

/* ============ Consentement (RGPD) ============ */
.cy-consent{margin:18px 0 4px;padding:16px 18px;background:var(--glace);border:1px solid var(--givre);border-radius:12px}
.cy-consent.invalide{border-color:#C0392B;background:#FDF4F4}
.cy-consent label{display:flex;align-items:flex-start;gap:11px;padding:7px 0;cursor:pointer;font-size:.88rem;line-height:1.55;color:var(--encre-70)}
.cy-consent label + label{border-top:1px solid var(--givre);padding-top:14px;margin-top:7px}
.cy-consent input[type=checkbox]{flex:none;margin-top:3px;width:18px;height:18px;accent-color:var(--accent);cursor:pointer}
.cy-consent b{color:var(--encre);font-weight:700;white-space:nowrap}
.cy-consent-err{display:none;margin-top:10px;font-size:.84rem;font-weight:700;color:#C0392B}
.cy-modale-boite .cy-consent{margin:6px 0 14px;padding:14px 16px}
.cy-modale-boite .cy-consent label{font-size:.84rem}

/* ============ Rappel d'estimation (page devis) ============ */
.cy-rappel-est{display:none;max-width:640px;margin:0 auto 26px;background:var(--glace);border:1px solid var(--givre);border-radius:var(--radius);padding:16px 20px;font-size:.94rem;line-height:1.6}
.cy-rappel-est b{color:var(--accent-fonce)}
.cy-raccourci{text-align:center;margin-bottom:28px;font-size:.93rem;color:var(--encre-70)}
.cy-raccourci .btn{margin-left:8px;padding:10px 20px;font-size:.9rem}

/* ============ Ajustements mobiles ============ */
@media(max-width:560px){
  .cy-calc-head{padding:15px 17px}
  .cy-calc-body{padding:18px 17px 20px}
  .cy-prix{font-size:2.1rem}
  .cy-piece{grid-template-columns:1fr 92px 40px;gap:7px}
  .cy-calc-cta .btn{min-width:100%}
}