/* ==========================================================================
   Clim&Confort — mise en page : en-tête, sections, pied de page (mobile-first)
   ========================================================================== */

/* ---------- En-tête ---------- */
.entete {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--blanc);
  border-bottom: 2px solid var(--encre);
}
/* Filet bicolore bleu / rouge, repris du logo */
.entete::before {
  content: "";
  display: block;
  height: 4px;
  background: linear-gradient(90deg, var(--bleu) 0 50%, var(--rouge) 50% 100%);
}
.entete__barre { display: flex; align-items: center; gap: 10px; min-height: 64px; }
.entete__logo { flex: none; margin-right: auto; }
.entete__logo img { height: 34px; width: auto; }
@media (min-width: 400px) { .entete__logo img { height: 38px; } }
@media (min-width: 640px) { .entete__logo img { height: 46px; } }

.entete__cta { min-height: 44px; padding: 0 14px; font-size: 0.9375rem; }
.cta-long { display: none; }
@media (min-width: 480px) { .cta-long { display: inline; } .cta-court { display: none; } }

.nav-bascule {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  padding: 0;
  background: none;
  border: 2px solid var(--encre);
  border-radius: 6px;
}
.nav-bascule__barres,
.nav-bascule__barres::before,
.nav-bascule__barres::after {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--encre);
  transition: transform 0.2s;
}
.nav-bascule__barres { position: relative; }
.nav-bascule__barres::before, .nav-bascule__barres::after { content: ""; position: absolute; left: 0; }
.nav-bascule__barres::before { top: -6px; }
.nav-bascule__barres::after { top: 6px; }
.entete--ouvert .nav-bascule__barres { background: transparent; }
.entete--ouvert .nav-bascule__barres::before { transform: translateY(6px) rotate(45deg); }
.entete--ouvert .nav-bascule__barres::after { transform: translateY(-6px) rotate(-45deg); }

.nav {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--blanc);
  border-bottom: 2px solid var(--encre);
}
.entete--ouvert .nav { display: block; }
.nav ul { list-style: none; margin: 0; padding: 4px 20px 16px; }
.nav a {
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid var(--trait);
  color: var(--encre);
  font-weight: 700;
  font-size: 1.125rem;
  text-decoration: none;
}
.nav a.actif { color: var(--bleu); }

@media (min-width: 1100px) {
  .nav-bascule { display: none; }
  .nav { display: block; position: static; border: 0; background: none; }
  .nav ul { display: flex; gap: 2px; padding: 0; }
  .nav a { padding: 8px 12px; border: 0; border-radius: 6px; font-size: 1rem; }
  .nav a:hover { background: var(--papier); color: var(--encre); }
  .nav a.actif { color: var(--bleu); box-shadow: inset 0 -3px 0 var(--bleu); border-radius: 0; }
  .entete__cta { min-height: 48px; padding: 0 20px; font-size: 1rem; margin-left: 8px; }
}

/* ---------- Sections ---------- */
.section { padding: 64px 0; }
@media (min-width: 900px) { .section { padding: 96px 0; } }
.section--papier { background: var(--papier); }
.section--bleu { background: var(--bleu); color: var(--blanc); }
.section--bordee { border-top: 2px solid var(--encre); }

.section__entete { max-width: 720px; margin-bottom: 40px; }
.section__entete p:last-child { margin-bottom: 0; }
.section__entete > p:not(.surtitre) { font-size: 1.125rem; color: var(--gris); }
.section__entete--centre { margin-left: auto; margin-right: auto; text-align: center; }
.section__entete--inverse .surtitre { color: var(--blanc); }
.section__entete--inverse > p:not(.surtitre) { color: rgba(255, 255, 255, 0.88); }

/* Quadrillage « plan technique » */
.fond-plan {
  background-color: var(--papier);
  background-image:
    linear-gradient(var(--trait-leger) 1px, transparent 1px),
    linear-gradient(90deg, var(--trait-leger) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* ---------- Hero ---------- */
.hero { padding: 44px 0 56px; border-bottom: 2px solid var(--encre); }
.hero__grille { display: grid; gap: 36px; align-items: center; }
@media (min-width: 900px) {
  .hero { padding: 72px 0 84px; }
  .hero__grille { grid-template-columns: 1.1fr 0.9fr; gap: 48px; }
}
.hero h1 { margin-bottom: 18px; }
.hero__intro { font-size: 1.1875rem; max-width: 34em; margin-bottom: 28px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 32px; }
.hero__actions .bouton { flex: 1 1 220px; }
@media (min-width: 640px) { .hero__actions .bouton { flex: 0 0 auto; } }

.hero__preuves {
  display: grid;
  gap: 12px;
  list-style: none;
  padding: 20px 0 0;
  border-top: 2px solid var(--encre);
}
@media (min-width: 640px) { .hero__preuves { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
.hero__preuves li { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; line-height: 1.35; }
.hero__preuves .ico { width: 28px; height: 28px; color: var(--bleu); stroke-width: 1.5; }

.hero__visuel svg { width: 100%; height: auto; max-width: 520px; margin: 0 auto; }

/* ---------- Illustrations ---------- */
.illus { fill: none; stroke: var(--encre); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.illus .fin { stroke-width: 2; }
.illus .froid { stroke: var(--bleu); }
.illus .chaud { stroke: var(--rouge); }
.illus .discret { stroke: var(--trait); }
.illus .tirets { stroke-dasharray: 7 7; }

/* ---------- Services ---------- */
.services { display: grid; gap: 28px; }
@media (min-width: 900px) { .services { grid-template-columns: 1fr 1fr; } }

.service {
  display: flex;
  flex-direction: column;
  background: var(--blanc);
  border: 2px solid var(--encre);
  border-radius: 10px;
  overflow: hidden;
}
.service__visuel { padding: 24px; border-bottom: 2px solid var(--encre); }
.service--clim .service__visuel { background: var(--bleu-pale); }
.service--cet .service__visuel { background: var(--rouge-pale); }
.service__visuel svg { width: 100%; max-width: 380px; height: auto; margin: 0 auto; }

.service__corps { display: flex; flex-direction: column; flex: 1; padding: 24px 22px 28px; }
@media (min-width: 640px) { .service__corps { padding: 30px 32px 34px; } }
.service__titre { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.service__titre .ico { width: 30px; height: 30px; stroke-width: 1.5; }
.service__titre span { flex-basis: 100%; }
@media (min-width: 480px) { .service__titre span { flex-basis: auto; margin-left: 6px; } }
.service__corps .lien-fleche { align-self: flex-start; margin-top: auto; padding-top: 8px; }
.service--cet .lien-fleche { color: var(--rouge); }

.liste-check { list-style: none; padding: 0; margin: 0 0 24px; }
.liste-check li { display: flex; gap: 10px; padding: 7px 0; line-height: 1.45; }
.liste-check li + li { border-top: 1px solid var(--trait); }
.liste-check .ico { margin-top: 2px; color: var(--bleu); stroke-width: 2.25; }
.service--cet .liste-check .ico { color: var(--rouge); }

/* ---------- Pourquoi nous ---------- */
.atouts { display: grid; gap: 18px; list-style: none; padding: 0; }
@media (min-width: 640px) { .atouts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .atouts { grid-template-columns: repeat(4, 1fr); } }

.atout {
  position: relative;
  padding: 26px 22px 24px;
  background: var(--blanc);
  border: 2px solid var(--encre);
  border-top: 6px solid var(--bleu);
  border-radius: 8px;
}
.atout--fort { border-top-color: var(--rouge); background: var(--rouge-pale); }
.atout__badge {
  position: absolute;
  top: -15px;
  right: 16px;
  padding: 2px 10px;
  background: var(--rouge);
  color: var(--blanc);
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.atout__icone {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin-bottom: 16px;
  border: 2px solid var(--encre);
  border-radius: 50%;
  background: var(--blanc);
}
.atout__icone .ico { width: 30px; height: 30px; stroke-width: 1.5; }
.atout h3 { font-size: 1.3rem; }
.atout p { margin: 0; font-size: 1rem; }
.atout p + p { margin-top: 10px; }

/* ---------- Avis clients ---------- */
.avis-grille { display: grid; gap: 18px; }
@media (min-width: 640px) { .avis-grille { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .avis-grille { grid-template-columns: repeat(4, 1fr); } }

.avis {
  display: flex;
  flex-direction: column;
  padding: 24px 22px;
  background: var(--blanc);
  border: 2px solid var(--trait);
  border-radius: 8px;
}
.avis__note { display: flex; gap: 3px; margin: 0 0 14px; color: var(--rouge); }
.avis__note .ico { width: 22px; height: 22px; stroke-width: 1.5; }
.avis__note .etoile--pleine { fill: currentColor; }
.avis__texte { margin: 0 0 18px; flex: 1; }
.avis__texte p { margin: 0; font-size: 1.0625rem; }
.avis__texte p::before { content: "“"; display: block; height: 0.55em; font-family: var(--police-titre); font-weight: 800; font-size: 3.4rem; line-height: 1; color: var(--bleu); }
.avis__auteur { padding-top: 14px; border-top: 1px solid var(--trait); font-size: 0.9375rem; color: var(--gris); }
.avis__auteur strong { display: block; color: var(--encre); font-size: 1rem; }
.avis-grille.avis-grille--seul { grid-template-columns: 1fr; max-width: 600px; margin-inline: auto; }
.avis-lien { margin-top: 28px; text-align: center; }

/* ---------- Zone d'intervention ---------- */
.zone { display: grid; gap: 28px; align-items: start; }
@media (min-width: 900px) { .zone { grid-template-columns: 1fr 1fr; gap: 48px; } }

.zone__carte { margin: 0; border: 2px solid var(--encre); border-radius: 10px; overflow: hidden; background: var(--blanc); }
.zone__carte svg { width: 100%; height: auto; }
.zone__carte figcaption { padding: 14px 18px; border-top: 2px solid var(--encre); font-size: 0.9375rem; }

.secteurs { display: grid; gap: 12px; list-style: none; padding: 0; margin: 0 0 20px; }
.secteur {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 16px;
  background: var(--blanc);
  border: 2px solid var(--trait);
  border-radius: 8px;
}
.secteur__dep {
  display: grid;
  place-items: center;
  flex: none;
  width: 52px;
  height: 52px;
  background: var(--bleu);
  color: var(--blanc);
  border-radius: 6px;
  font-family: var(--police-titre);
  font-weight: 800;
  font-size: 1.4rem;
}
.secteur__nom { font-size: 1.15rem; margin-bottom: 2px; }
.secteur__villes { margin: 0; color: var(--gris); font-size: 0.9375rem; }

/* ---------- Pied de page ---------- */
.pied { background: var(--encre); color: var(--blanc); padding: 64px 0 0; }
@media (min-width: 900px) { .pied { padding-top: 96px; } }
.pied a { color: var(--blanc); }
.pied a:hover { color: var(--blanc); text-decoration-thickness: 2px; }
.pied .surtitre { color: var(--blanc); }

.pied__grille { display: grid; gap: 40px; }
@media (min-width: 900px) { .pied__grille { grid-template-columns: 1.35fr 1fr; gap: 64px; } }

.contact-carte { padding: 26px 20px; background: var(--blanc); color: var(--encre); border-radius: 12px; }
@media (min-width: 640px) { .contact-carte { padding: 36px 36px 32px; } }
.contact-carte h2 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem); }
.contact-carte a { color: var(--bleu); }
.contact-carte .surtitre { color: var(--rouge); }
.contact-carte .intro { color: var(--gris); }
.form-ligne { display: grid; gap: 0 16px; }
@media (min-width: 640px) { .form-ligne { grid-template-columns: 1fr 1fr; } }
.contact-carte .bouton { width: 100%; margin-top: 8px; }
@media (min-width: 640px) { .contact-carte .bouton { width: auto; } }
.mention-requis { font-size: 0.875rem; color: var(--gris); }

.coordonnees h2 { font-size: 1.6rem; }
.coordonnees__liste { list-style: none; padding: 0; margin: 0 0 32px; }
.coordonnees__liste li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.18); }
.coordonnees__liste .ico { width: 26px; height: 26px; margin-top: 1px; stroke-width: 1.5; }
.coordonnees__liste small { display: block; font-size: 0.875rem; opacity: 0.75; }
.coordonnees__liste a { font-weight: 700; font-size: 1.125rem; text-decoration: none; }
.coordonnees__liste a:hover { text-decoration: underline; }

.pied__logo { display: inline-block; margin-bottom: 20px; padding: 10px 14px; background: var(--blanc); border-radius: 6px; }
.pied__logo img { height: 40px; width: auto; }

.reseaux { display: flex; gap: 10px; list-style: none; padding: 0; margin: 12px 0 0; }
.reseaux a {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  transition: background-color 0.15s, color 0.15s;
}
.reseaux a:hover { background: var(--blanc); color: var(--encre); }
.reseaux .ico { width: 22px; height: 22px; }

.pied__bas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
  margin-top: 56px;
  padding: 22px 0 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.78);
}
.pied__bas ul { display: flex; flex-wrap: wrap; gap: 8px 20px; list-style: none; padding: 0; }
.pied__bas p { margin: 0; }

/* ---------- Page mentions légales ---------- */
.page-texte { padding: 48px 0 80px; }
.page-texte h1 { font-size: clamp(2rem, 1.5rem + 2vw, 2.8rem); }
.page-texte h2 { font-size: 1.5rem; margin-top: 40px; padding-top: 24px; border-top: 2px solid var(--encre); }
.page-texte ul { padding-left: 1.2em; margin-bottom: 1em; }

/* ---------- Carte en pleine largeur (visuel à gauche, texte à droite) ---------- */
.service__grille { display: flex; flex-direction: column; flex: 1; }
@media (min-width: 900px) {
  .service--large { grid-column: 1 / -1; }
  .service--large .service__grille { display: grid; grid-template-columns: 1.05fr 1fr; }
  .service--large .service__visuel { border-bottom: 0; border-right: 2px solid var(--encre); display: grid; place-items: center; }
}
.service--gainable .service__visuel { background: var(--papier); display: grid; place-items: center; }
.service--gainable .service__visuel svg { max-width: 460px; }

/* ---------- Bandeau entretien ---------- */
.bandeau-entretien {
  display: grid;
  gap: 16px;
  align-items: center;
  margin-top: 36px;
  padding: 22px;
  background: var(--bleu-pale);
  border: 2px solid var(--encre);
  border-radius: 10px;
  text-align: center;
  justify-items: center;
}
@media (min-width: 860px) {
  .bandeau-entretien {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 24px;
    padding: 22px 28px;
    text-align: left;
    justify-items: stretch;
  }
}
.bandeau-entretien__icone {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  background: var(--blanc);
  border: 2px solid var(--encre);
  border-radius: 50%;
}
.bandeau-entretien__icone .ico { width: 28px; height: 28px; stroke-width: 1.5; }
.bandeau-entretien p { margin: 0; }
.bandeau-entretien .bouton { align-self: center; }

/* ---------- Bandeau financement ---------- */
.financement {
  padding: 48px 0;
  background: var(--bleu-pale);
  border-top: 2px solid var(--encre);
  border-bottom: 2px solid var(--encre);
}
.financement__grille { display: grid; gap: 22px; align-items: center; }
@media (min-width: 900px) {
  .financement { padding: 64px 0; }
  .financement__grille { grid-template-columns: auto minmax(0, 1fr) auto; gap: 36px; }
}
.financement__icone {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  background: var(--blanc);
  border: 2px solid var(--encre);
  border-radius: 50%;
}
.financement__icone .ico { width: 34px; height: 34px; stroke-width: 1.5; }
.financement h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); }
.financement p { margin-bottom: 0.6em; }
.financement p:last-child { margin-bottom: 0; }
.financement__mention { font-size: 0.9375rem; }