/* ==========================================================================
   3D Nuisibles Seine-et-Marne 77 — Feuille de style principale
   Mobile-first (320px -> 1920px) | WCAG 2.1 AA
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Archivo — la fonte variable du reseau, auto-hebergee
   --------------------------------------------------------------------------
   Le franchiseur sert Archivo depuis son propre domaine, en fonte variable :
   un seul fichier couvre les graisses 400 a 800 et les chasses 62 a 125 %.
   L'axe de chasse (wdth) est ensuite pilote element par element : le corps
   de texte reste a 100, les titres et les chiffres sont legerement etendus.
   C'est ce reglage, plus que la police elle-meme, qui donne le rendu du
   reseau. Fichiers recuperes le 10 septembre 2026, licence SIL Open Font.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../fonts/archivo-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: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   1. Variables
   -------------------------------------------------------------------------- */
:root {
  /* ------------------------------------------------------------------------
     PALETTE — alignee sur le site du franchiseur lecongelothermique.com
     (jetons releves le 10 septembre 2026). Le nom du jeton d'origine est
     rappele en commentaire : ne modifiez ces valeurs que si la charte du
     reseau change, et reportez alors la modification ici uniquement.
     Les ratios de contraste indiques sont calcules sur fond blanc.
     ------------------------------------------------------------------------ */

  /* Rouge — signal, urgence, CTA principal */
  --rouge:         #EA1D21; /* --brand-red  · accent decoratif             */
  --rouge-fonce:   #DE1C1F; /* --red        · boutons et texte  · 4,9:1 AA */
  --rouge-survol:  #BF181B; /* --red-h      · survol et petits textes · 5,6:1 sur rouge pale */
  --rouge-clair:   #FDF0F0; /* --red-l      · aplats et encadres          */

  /* Bleu marine — fond des sections sombres, titres */
  --bleu:          #0D1826; /* --navy       · 17,5:1                      */
  --bleu-nuit:     #16273C; /* --navy2      · degrades                    */

  /* Bleu — liens, elements secondaires */
  --bleu-clair:    #3871BE; /* --blue       · liens · 4,9:1 AA            */
  --bleu-survol:   #2F5FA0; /* --blue-h                                   */
  --bleu-marque:   #3A76C6; /* --brand-blue                               */
  --bleu-pale:     #ECF2FB; /* --blue-l                                   */

  /* Vert — bouton d'appel, validation */
  --vert:          #0F7A38; /* --green      · 5,4:1 AA                    */
  --vert-fonce:    #0B5C2A; /* survol et texte sur vert pale              */
  --vert-pale:     #EDF7F1; /* --green-l                                  */

  /* Ambre — avis clients et marqueurs a completer */
  --etoile:        #E8A317; /* --star       · etoiles (decoratif)         */
  --ambre:         #8A6108; /* --amber      · texte · 5,9:1 AA            */
  --ambre-pale:    #FBF5E8; /* --amber-l                                  */

  /* Neutres */
  --fond:          #F4F6F9; /* --off        · fond de section             */
  --blanc:         #FFFFFF; /* --white                                    */
  --gris-900:      #14181F; /* --text       · texte courant · 16,3:1      */
  --gris-700:      #5C6675; /* --muted      · texte secondaire · 5,8:1    */
  --gris-400:      #68717C; /* --subtle     · bordures de champ · 4,9:1   */
  --gris-200:      #E1E6ED; /* --border     · filets et separateurs       */
  --gris-100:      #F4F6F9; /* --off                                      */

  /* Teintes de texte sur fond bleu marine (contrastes verifies sur --bleu) */
  --sur-sombre:      #DDE6F2; /* paragraphes  · 14,0:1 */
  --sur-sombre-doux: #C3CCD8; /* pied de page · 11,0:1 */
  --sur-sombre-lien: #9CC0EC; /* liens        ·  9,5:1 */

  /* Typographie — une seule famille, comme chez le franchiseur */
  --font-titre: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-corps: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Axe de chasse de la fonte variable (font-variation-settings "wdth").
     Le reseau etend legerement les titres et les chiffres, jamais le texte. */
  --wd-corps:   100;
  --wd-titre:   112;
  --wd-chiffre: 114;

  /* Echelle typographique fluide — bornes relevees sur lecongelothermique.com */
  --fs-2xs:  0.71875rem;                       /* 11,5 px · kickers          */
  --fs-xs:   0.8125rem;                        /* 13 px   · notes            */
  --fs-sm:   0.9375rem;                        /* 15 px   · legendes         */
  --fs-base: 1rem;                             /* 16 px   · texte courant    */
  --fs-md:   1.125rem;                         /* 18 px   · chapos           */
  --fs-lg:   1.3125rem;                        /* 21 px   · h3               */
  --fs-xl:   clamp(1.375rem, 2vw + .75rem, 1.75rem);
  --fs-2xl:  clamp(1.75rem, 3.6vw, 2.625rem);  /* 28 -> 42 px · h2           */
  --fs-3xl:  clamp(2.25rem, 5.4vw, 3.625rem);  /* 36 -> 58 px · h1           */
  --fs-4xl:  clamp(2.5rem, 5.4vw, 4.25rem);    /* 40 -> 68 px · h1 du hero   */
  --fs-stat: clamp(2.5rem, 4.4vw, 3.5rem);     /* 40 -> 56 px · chiffres cles */

  /* Espacements */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 5.5rem;
  --sp-10: 6rem;   /* 96 px · rythme des sections en grand ecran */

  /* Icone telephone des CTA d'appel — masque SVG, teinte par currentColor.
     Remplace l'emoji telephone : le site du reseau utilise lui aussi une
     icone vectorielle dans ses boutons d'appel (classe .btn-tel). */
  --icone-tel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.2a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E");

  /* Icone etoile du lien vers la fiche Google — masque CSS, teinte par
     currentColor, meme principe que --icone-tel. */
  --icone-etoile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2.6l2.9 5.9 6.5.9-4.7 4.6 1.1 6.4-5.8-3-5.8 3 1.1-6.4L2.6 9.4l6.5-.9L12 2.6z'/%3E%3C/svg%3E");

  /* Divers */
  --radius:    8px;   /* boutons et champs        */
  --radius-lg: 14px;  /* cartes                   */
  --radius-xl: 16px;  /* visuels                  */
  /* Le reseau n'utilise qu'une ombre, profonde, reservee a l'objet principal
     de la page. Partout ailleurs : un filet de 1 px. */
  --ombre-sm:  0 1px 2px rgba(13, 24, 38, .04);
  --ombre:     0 2px 20px rgba(0, 0, 0, .07);
  --ombre-lg:  0 30px 70px -30px rgba(0, 0, 0, .55);
  --largeur:   1200px;
  --largeur-texte: 62ch;
  --transition: 180ms cubic-bezier(.4, 0, .2, 1);
}

/* --------------------------------------------------------------------------
   2. Reset / base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-corps);
  font-variation-settings: 'wdth' var(--wd-corps);
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--gris-900);
  /* Fond legerement teinte : le blanc des cartes et des sections devient une
     matiere posee dessus, au lieu de se confondre avec la page. */
  background: var(--fond);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Espace pour la barre CTA collante en bas sur mobile */
  padding-bottom: 68px;
}

@media (min-width: 768px) {
  body { padding-bottom: 0; }
}

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-titre);
  font-variation-settings: 'wdth' var(--wd-titre);
  font-weight: 800;
  line-height: 1.2;
  color: var(--bleu);
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
}

h1 { font-size: var(--fs-3xl); font-weight: 800; line-height: 1.01; letter-spacing: -.022em; }
h2 { font-size: var(--fs-2xl); font-weight: 700; line-height: 1.06; letter-spacing: -.018em; margin-bottom: var(--sp-4); }
h3 { font-size: var(--fs-lg);  font-weight: 700; line-height: 1.2;  letter-spacing: -.012em; }
h4 { font-size: var(--fs-md);  font-weight: 700; line-height: 1.25; letter-spacing: -.008em; }

p { margin: 0 0 var(--sp-4); }
p, li { text-wrap: pretty; }

a {
  color: var(--bleu-clair);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--transition);
}
a:hover { color: var(--bleu); }

strong, b { font-weight: 700; }

ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.35rem; }
li { margin-bottom: var(--sp-2); }

hr {
  border: 0;
  border-top: 1px solid var(--gris-200);
  margin: var(--sp-6) 0;
}

/* Focus visible - accessibilite clavier (WCAG 2.4.7) */
:focus-visible {
  outline: 3px solid var(--bleu-clair);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Sur les fonds sombres, le bleu du focus manque de contraste : on passe au blanc */
.hero :focus-visible,
.page-entete :focus-visible,
.section--sombre :focus-visible,
.cta-final :focus-visible,
.bandeau-urgence :focus-visible,
.pied :focus-visible,
.bloc-contact :focus-visible {
  outline-color: var(--blanc);
}

/* Lien d'evitement */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: var(--sp-3) var(--sp-5);
  background: var(--bleu);
  color: var(--blanc);
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus {
  left: 0;
  color: var(--blanc);
}

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

/* --------------------------------------------------------------------------
   3. Mise en page
   -------------------------------------------------------------------------- */
.conteneur {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--sp-4);
}

@media (min-width: 768px) {
  .conteneur { padding-inline: var(--sp-6); }
}

.section {
  padding-block: var(--sp-8);
  background: var(--blanc);
}

@media (min-width: 768px) {
  .section { padding-block: var(--sp-10); }
}

.section--pale  { background: var(--gris-100); }
.section--bleue { background: var(--bleu-pale); }
.section--fond  { background: var(--fond); }

.section--sombre {
  background: var(--bleu);
  color: var(--blanc);
}
.section--sombre h2,
.section--sombre h3 { color: var(--blanc); }
.section--sombre a { color: var(--sur-sombre-lien); }

/* Les cartes, encadres et formulaires posent un fond clair AU SEIN d'une
   section sombre : leurs titres et leurs liens doivent redevenir sombres,
   sans quoi ils sont blancs sur blanc. */
.section--sombre .carte h2,
.section--sombre .carte h3,
.section--sombre .carte h4,
.section--sombre .encadre h2,
.section--sombre .encadre h3,
.section--sombre .formulaire h2,
.section--sombre .formulaire h3,
.section--sombre .temoignage h3,
.section--sombre .faq__item h3 { color: var(--bleu); }

.section--sombre .carte a,
.section--sombre .encadre a,
.section--sombre .formulaire a { color: var(--bleu-clair); }

/* --------------------------------------------------------------------------
   Surfaces claires et surfaces sombres
   --------------------------------------------------------------------------
   Depuis que les etapes et les kickers sont traites en filet et en typographie
   plutot qu'en carte, leur couleur depend du fond SUR LEQUEL ils tombent, et
   ce fond peut changer deux fois dans la meme section : un encadre clair pose
   au milieu d'un bloc marine, par exemple.

   Enumerer les selecteurs ne tient pas : une regle « .section--sombre .etape »
   s'applique aussi aux etapes posees dans un encadre clair de cette section.
   On passe donc par des variables heritees : les surfaces sombres les
   redefinissent, les conteneurs clairs les remettent a leur valeur d'origine,
   et l'imbrication se resout toute seule, quel que soit le niveau.
   -------------------------------------------------------------------------- */
:root,
.carte, .encadre, .formulaire, .temoignage, .carte-flottante,
.faq, .faq__item, .tableau-wrap, .etape--clair {
  --c-kicker:      var(--rouge-survol);
  --c-etape-filet: var(--gris-900);
  --c-etape-titre: var(--bleu);
  --c-etape-texte: var(--gris-700);
  --c-etape-duree: var(--gris-400);
}

.section--sombre, .cta-final, .page-entete, .hero, .bloc-contact, .pied {
  --c-kicker:      rgba(255, 255, 255, .62);
  --c-etape-filet: rgba(255, 255, 255, .28);
  --c-etape-titre: var(--blanc);
  --c-etape-texte: var(--sur-sombre);
  --c-etape-duree: rgba(255, 255, 255, .62);
}

.section--sombre .etape a { color: var(--sur-sombre-lien); }

/* Intro de section — le reseau aligne a gauche sur 62 caracteres et pose un
   kicker en capitales espacees au-dessus du titre. Le centrage systematique
   est ce qui distingue le plus nettement un site generique d'un site tenu. */
.section__intro {
  max-width: var(--largeur-texte);
  margin-inline: 0;
  text-align: left;
  margin-bottom: var(--sp-7);
}
.section__intro h2 { margin: 0; }
.section__intro p {
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-md);
  line-height: 1.65;
  color: var(--gris-700);
}
.section--sombre .section__intro p { color: var(--sur-sombre); }

.grille {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .grille--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) {
  .grille--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grille--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 640px) and (max-width: 899px) {
  .grille--3, .grille--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.texte-centre { text-align: center; }
.contenu-texte { max-width: var(--largeur-texte); }
.contenu-texte h2 { margin-top: var(--sp-6); }

/* --------------------------------------------------------------------------
   4. En-tete + navigation
   -------------------------------------------------------------------------- */
.entete {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--blanc);
  /* Filet rouge sous l'en-tete : signature visuelle du reseau */
  border-bottom: 2px solid var(--rouge-fonce);
  box-shadow: 0 2px 20px rgba(0, 0, 0, .07);
}

/* La barre de navigation deborde du gabarit de 1180 px une fois le logo du
   reseau en place (logo + telephone + 6 rubriques + CTA = 1135 px de contenu).
   On elargit donc le conteneur de l'en-tete seul, le corps de page reste a
   1180 px. */
.entete > .conteneur { max-width: 1280px; }

.entete__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 68px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  flex-shrink: 0;
}

/* L'ours du reseau, dans le meme gabarit que sur le site du franchiseur
   (il l'affiche a 70x38). Fichier fourni en 2x pour les ecrans a haute densite. */
.logo img {
  width: 81px;
  height: 38px;
  object-fit: contain;
}

.logo__texte {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--font-titre);
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1;
}
.logo__l1 {
  font-size: .875rem;
  font-weight: 700;
  color: var(--gris-900);
}
.logo__l2 {
  font-size: .75rem;
  font-weight: 700;
  color: var(--rouge-fonce);
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  width: 48px; height: 48px;
  padding: 0;
  background: var(--blanc);
  border: 1px solid var(--gris-400);
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--bleu);
}
.nav-toggle__barres {
  position: relative;
  display: block;
  width: 22px; height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: background var(--transition);
}
.nav-toggle__barres::before,
.nav-toggle__barres::after {
  content: '';
  position: absolute;
  left: 0;
  width: 22px; height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--transition), top var(--transition);
}
.nav-toggle__barres::before { top: -7px; }
.nav-toggle__barres::after  { top: 7px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__barres { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__barres::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__barres::after  { top: 0; transform: rotate(-45deg); }

.nav {
  position: fixed;
  top: 0; right: 0;
  z-index: 120;
  width: min(320px, 86vw);
  height: 100dvh;
  padding: var(--sp-6) var(--sp-5);
  background: var(--blanc);
  box-shadow: var(--ombre-lg);
  transform: translateX(102%);
  transition: transform var(--transition);
  overflow-y: auto;
}
.nav[data-ouvert="true"] { transform: translateX(0); }

.nav__fermer {
  position: absolute;
  top: var(--sp-4); right: var(--sp-4);
  width: 44px; height: 44px;
  font-size: 1.5rem;
  line-height: 1;
  background: none;
  border: 1px solid var(--gris-200);
  border-radius: var(--radius);
  color: var(--bleu);
  cursor: pointer;
}

.nav__liste {
  list-style: none;
  margin: var(--sp-7) 0 0;
  padding: 0;
}
.nav__liste li { margin: 0; }

.nav__liste a {
  display: block;
  padding: var(--sp-3) var(--sp-2);
  font-family: var(--font-titre);
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--bleu);
  text-decoration: none;
  border-bottom: 1px solid var(--gris-200);
}
.nav__liste a:hover,
.nav__liste a[aria-current="page"] { color: var(--rouge-survol); } /* 5,6:1 sur l'aplat rouge pale */
.nav__liste a[aria-current="page"] { font-weight: 800; }

.nav__cta { margin-top: var(--sp-5); display: grid; gap: var(--sp-3); }

.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: rgba(13, 24, 38, .55);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition);
}
.nav-overlay[data-ouvert="true"] { opacity: 1; visibility: visible; }

/* Navigation desktop */
@media (min-width: 1100px) {
  .nav-toggle, .nav__fermer, .nav-overlay { display: none; }
  .nav {
    position: static;
    width: auto; height: auto;
    padding: 0;
    background: none;
    box-shadow: none;
    transform: none;
    overflow: visible;
    display: flex;
    align-items: center;
    gap: var(--sp-5);
  }
  .nav__liste {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    margin: 0;
  }
  .nav__liste a {
    padding: var(--sp-2) var(--sp-3);
    font-size: .9375rem;
    border-bottom: 0;
    border-radius: var(--radius);
    white-space: nowrap;
  }
  .nav__liste a:hover { background: var(--gris-100); }
  .nav__liste a[aria-current="page"] { background: var(--rouge-clair); }
  .nav__cta { margin: 0; display: flex; gap: var(--sp-2); }
  .nav__cta .btn { padding: .6rem 1rem; font-size: .875rem; }
}

/* Bandeau d'urgence au-dessus de l'en-tete */
.bandeau-urgence {
  background: var(--bleu);
  color: var(--blanc);
  font-size: var(--fs-xs);
  text-align: center;
  padding: var(--sp-2) var(--sp-4);
}
.bandeau-urgence a {
  color: var(--blanc);
  font-weight: 700;
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   5. Fil d'Ariane
   -------------------------------------------------------------------------- */
.fil-ariane {
  background: var(--gris-100);
  border-bottom: 1px solid var(--gris-200);
  padding-block: var(--sp-3);
  font-size: var(--fs-xs);
}
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.breadcrumb li { margin: 0; display: flex; align-items: center; gap: var(--sp-2); }
.breadcrumb li + li::before {
  content: '›';
  color: var(--gris-400);
  font-weight: 700;
}
.breadcrumb a { color: var(--gris-700); }
.breadcrumb [aria-current="page"] { color: var(--bleu); font-weight: 600; }

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: linear-gradient(160deg, rgba(13,24,38,.97) 0%, rgba(13,24,38,.93) 48%, rgba(22,39,60,.90) 100%), var(--bleu-nuit);
  color: var(--blanc);
  padding-block: var(--sp-9) var(--sp-8);
  overflow: hidden;
}
/* Sur mobile, l'ecran ne fait que 812 px de haut et la barre d'action
   collante en consomme 60. Une respiration de 88 px au-dessus du titre
   repoussait le second appel a l'action hors du premier ecran : on la
   ramene a 44 px, ce qui ne coute rien a la lisibilite. */
@media (max-width: 767px) {
  .hero { padding-block: var(--sp-6) var(--sp-6); }
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .22;
}
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
}

.hero__inner { position: relative; z-index: 1; }

.hero__grille {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 1024px) {
  .hero__grille { grid-template-columns: 1.15fr .85fr; gap: var(--sp-7); }
}

.hero h1 { color: var(--blanc); margin-bottom: var(--sp-4); }
.hero__accroche {
  font-size: var(--fs-md);
  color: var(--sur-sombre);
  max-width: 58ch;
  margin-bottom: var(--sp-5);
}
.hero__accroche strong { color: var(--blanc); }

.hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
  padding: 0;
  list-style: none;
}
.hero__badges li {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 7px 16px;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 99px;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}

.hero__preuve {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  color: var(--sur-sombre);
}

/* Carte d'appel rapide dans le hero */
.hero__carte {
  background: var(--blanc);
  color: var(--gris-900);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  box-shadow: var(--ombre-lg);
}
.hero__carte h2 {
  font-size: var(--fs-lg);
  margin-bottom: var(--sp-3);
}
.hero__carte ul {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sp-4);
}
.hero__carte li {
  position: relative;
  padding-left: 1.75rem;
  font-size: var(--fs-sm);
}
.hero__carte li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--vert);
  font-weight: 800;
}

/* --------------------------------------------------------------------------
   7. En-tete de page interne
   -------------------------------------------------------------------------- */
.page-entete {
  background: linear-gradient(150deg, var(--bleu) 0%, var(--bleu-nuit) 100%);
  color: var(--blanc);
  padding-block: var(--sp-7);
}
.page-entete h1 { color: var(--blanc); }
.page-entete p {
  font-size: var(--fs-md);
  color: var(--sur-sombre);
  max-width: 62ch;
  margin-bottom: var(--sp-5);
}
.page-entete__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

/* --------------------------------------------------------------------------
   8. Pied de page
   -------------------------------------------------------------------------- */
.pied {
  background: var(--bleu);
  color: var(--sur-sombre-doux);
  padding-block: var(--sp-7) var(--sp-5);
  font-size: var(--fs-sm);
}
.pied h2, .pied h3 {
  color: var(--blanc);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: var(--sp-4);
}
.pied a { color: var(--sur-sombre-doux); text-decoration: none; }
.pied a:hover { color: var(--blanc); text-decoration: underline; }

/* ... sauf sur les boutons, qui gardent leur propre couleur de texte :
   sinon le libelle passait a 3,35:1 sur le vert. */
.pied .btn--appel,
.pied .btn--appel:hover,
.pied .btn--principal,
.pied .btn--principal:hover,
.pied .btn--bleu,
.pied .btn--bleu:hover { color: var(--blanc); text-decoration: none; }
.pied .btn--secondaire { color: var(--bleu); text-decoration: none; }

.pied__grille {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .pied__grille { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pied__grille { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }

.pied__liste { list-style: none; margin: 0; padding: 0; }
.pied__liste li { margin-bottom: var(--sp-2); }

.pied__logo {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.pied__logo img { width: 76px; height: 36px; object-fit: contain; }
.pied__logo span {
  font-family: var(--font-titre);
  font-weight: 800;
  color: var(--blanc);
  font-size: 1.0625rem;
}

.pied__nap {
  font-style: normal;
  line-height: 1.9;
}
.pied__nap strong { color: var(--blanc); }

.pied__bas {
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid rgba(255,255,255,.16);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  justify-content: space-between;
  font-size: var(--fs-xs);
}
.pied__bas ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  list-style: none;
  margin: 0; padding: 0;
}
.pied__bas li { margin: 0; }
/* Appartenance au reseau. Prend toute la largeur et passe en derniere
   position : sans cela, .pied__bas etant en flex/space-between, la ligne
   viendrait s'intercaler entre le copyright et les mentions legales. */
.pied__reseau {
  flex: 1 0 100%;
  order: 3;
  margin: 0;
  opacity: .85;
}
/* Ailleurs dans le pied de page, la ligne entiere est un lien : la position
   suffit a le signaler. Ici seul le nom du reseau l'est, au milieu d'une
   phrase — sans soulignement, rien n'indiquerait qu'il est cliquable. */
.pied__reseau a { text-decoration: underline; text-underline-offset: 2px; }

/* --------------------------------------------------------------------------
   9. Barre CTA collante (mobile)
   -------------------------------------------------------------------------- */
.cta-sticky {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--gris-200);
  box-shadow: 0 -4px 16px rgba(13,24,38,.18);
}
.cta-sticky a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 60px;
  padding: var(--sp-2);
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: .9375rem;
  text-decoration: none;
  color: var(--blanc);
}
.cta-sticky__appel { background: var(--vert); }
.cta-sticky__appel:hover { background: var(--vert-fonce); color: var(--blanc); }
.cta-sticky__devis { background: var(--rouge-fonce); }
.cta-sticky__devis:hover { background: var(--rouge-survol); color: var(--blanc); }

@media (min-width: 768px) { .cta-sticky { display: none; } }

/* --------------------------------------------------------------------------
   10. Bandeau cookies
   -------------------------------------------------------------------------- */
.cookies {
  position: fixed;
  left: var(--sp-4);
  right: var(--sp-4);
  bottom: 76px;
  z-index: 95;
  max-width: 620px;
  margin-inline: auto;
  padding: var(--sp-3) var(--sp-4);
  background: var(--blanc);
  border: 1px solid var(--gris-200);
  border-left: 5px solid var(--bleu-clair);
  border-radius: var(--radius);
  box-shadow: var(--ombre-lg);
  font-size: var(--fs-xs);
}
/* Le bandeau est ancre au-dessus de la barre d'action collante. Il doit rester
   court : chaque ligne gagnee est une ligne rendue au message d'accueil. */
@media (min-width: 620px) {
  .cookies { display: flex; align-items: center; gap: var(--sp-4); }
  .cookies p { margin-bottom: 0; }
  .cookies__actions { flex: 0 0 auto; flex-wrap: nowrap; }
}
@media (min-width: 768px) { .cookies { bottom: var(--sp-4); } }
.cookies p { margin-bottom: var(--sp-2); }
.cookies__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.cookies[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   11. Utilitaires
   -------------------------------------------------------------------------- */
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mb-5 { margin-bottom: var(--sp-5); }
.mb-6 { margin-bottom: var(--sp-6); }
.mt-6 { margin-top: var(--sp-6); }
.nowrap { white-space: nowrap; }

/* Palier intermediaire : navigation horizontale mais barre etroite.
   Sans cela l'en-tete deborde de ~30 px entre 1100 et 1279 px. */
@media (min-width: 1100px) and (max-width: 1279px) {
  .entete__tel { display: none !important; }
  .nav__liste a { font-size: .8125rem; padding: var(--sp-2) .4rem; }
  .nav__cta .btn { padding: .55rem .8rem; font-size: .8125rem; }
}

/* Numero de telephone dans l'en-tete (desktop) */
.entete__tel {
  display: none;
  font-family: var(--font-titre);
  font-weight: 800;
  font-size: 1.0625rem;
  color: var(--vert-fonce);
  text-decoration: none;
  white-space: nowrap;
}
.entete__tel:hover { color: var(--vert); text-decoration: underline; }
.entete__tel small {
  display: block;
  font-family: var(--font-corps);
  font-size: .6875rem;
  font-weight: 600;
  color: var(--gris-700);
  letter-spacing: .02em;
}
@media (min-width: 1100px) {
  .entete__tel { display: block; }
  .nav__liste a { padding: var(--sp-2); font-size: .875rem; }
  .nav { gap: var(--sp-3); }
}

/* En desktop, le numero est deja affiche a gauche de la navigation :
   on masque le bouton d'appel du menu pour eviter le doublon et la
   compression des libelles. */
@media (min-width: 1100px) {
  .nav__cta .btn--appel { display: none; }
  .nav__cta .btn { white-space: nowrap; }
}

/* --------------------------------------------------------------------------
   Appartenance au reseau — troisieme ligne sous le logo.
   Reprise de l'en-tete de l'agence des Hauts-de-Seine, qui affiche
   « Franchise du reseau Le Congelo Thermique » sous le nom du departement.
   Masquee sous 1280 px : l'en-tete compact du site ne peut pas l'absorber
   sans deborder. La mention reste presente dans le pied de page, sur toutes
   les pages, et dans les mentions legales.
   -------------------------------------------------------------------------- */
.logo__l3 { display: none; }
@media (min-width: 1280px) {
  .logo__l3 {
    display: block;
    font-family: var(--font-corps);
    font-size: .6875rem;
    font-weight: 600;
    line-height: 1.2;
    text-transform: none;
    letter-spacing: 0;
    color: var(--gris-700);
    white-space: nowrap;
  }
}