/* =================================================================
   NETTOYAGE DE TOITURES — Feuille de style unique
   Charte : manifeste v1.0 (bleu nuit / vert). Mobile-first.
   Sommaire :
     1. Variables (:root)            10. À propos
     2. Base & reset                 11. Zones d'intervention
     3. Utilitaires / signature      12. Avis clients
     4. Boutons                      13. FAQ
     5. Badges d'icônes & icônes     14. Bandeau CTA
     6. Header / topbar / nav        15. Contact / formulaire
     7. Hero + comparateur           16. Footer
     8. Cartes                       17. Animations / reveal
     9. Avant/Après + méthode        18. Responsive
   ================================================================= */

/* ============ 1. VARIABLES ============ */
:root {
  /* Bleus */
  --bleu-nuit: #0D3B66;
  --bleu-principal: #1565A6;
  --bleu-clair: #4A97D2;
  --bleu-pale: #EAF2FA;
  /* Verts */
  --vert-accent: #5CAA3C;
  --vert-action: #3F7E28;
  --vert-action-hover: #356B21;
  --vert-doux: #EAF6E3;
  /* Neutres */
  --encre: #16232E;
  --ardoise: #556472;
  --gris-bordure: #E2E8F0;
  --gris-fond: #F5F8FB;
  --blanc: #FFFFFF;
  /* Overlay */
  --overlay-fonce: rgba(13, 59, 102, .55);
  /* Typographie */
  --police-titre: 'Poppins', sans-serif;
  --police-texte: 'Montserrat', sans-serif;
  /* Espacement */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;
  --space-4: 16px;  --space-5: 24px;  --space-6: 32px;
  --space-7: 48px;  --space-8: 64px;  --space-9: 96px;  --space-10: 128px;
  --section-y: clamp(3rem, 8vw, 6rem);
  --conteneur-max: 1200px;
  --conteneur-pad: clamp(1rem, 4vw, 1.5rem);
  /* Rayons */
  --radius-xs: 6px;   --radius-sm: 10px;  --radius-md: 14px;
  --radius-lg: 20px;  --radius-xl: 28px;  --radius-full: 999px;
  /* Ombres */
  --ombre-xs: 0 1px 2px rgba(13,59,102,.06);
  --ombre-sm: 0 2px 8px rgba(13,59,102,.08);
  --ombre-md: 0 10px 24px rgba(13,59,102,.12);
  --ombre-lg: 0 18px 40px rgba(13,59,102,.16);
  --ombre-icone: 0 4px 10px rgba(92,170,60,.13);
  --ombre-icone-bleue: 0 4px 10px rgba(21,101,166,.12);
  /* Transitions */
  --transition-rapide: 150ms ease;
  --transition-base: 250ms ease;
  --transition-douce: 350ms cubic-bezier(.4,0,.2,1);
}

/* ============ 2. BASE & RESET ============ */
* { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--police-texte); font-size: 1rem; line-height: 1.7;
  color: var(--encre); background: var(--blanc); overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--police-titre); margin: 0; color: var(--encre); }
p { margin: 0; }
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--bleu-principal); text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }

h1 { font-weight: 700; font-size: clamp(2.25rem, 5vw, 3.5rem); line-height: 1.1; letter-spacing: -0.02em; }
h2 { font-weight: 700; font-size: clamp(1.75rem, 3.5vw, 2.5rem); line-height: 1.15; letter-spacing: -0.01em; }
h3 { font-weight: 600; font-size: clamp(1.125rem, 2vw, 1.375rem); line-height: 1.3; }

:focus-visible { outline: 3px solid rgba(21,101,166,.5); outline-offset: 2px; border-radius: 4px; }

.skip-link {
  position: absolute; left: 50%; top: -60px; transform: translateX(-50%);
  background: var(--bleu-nuit); color: #fff; padding: 10px 18px;
  border-radius: var(--radius-md); z-index: 2000; transition: top var(--transition-base);
}
.skip-link:focus { top: 8px; }

/* ============ 3. UTILITAIRES / SIGNATURE ============ */
.conteneur { width: 100%; max-width: var(--conteneur-max); margin-inline: auto; padding-inline: var(--conteneur-pad); }
.conteneur--etroit { max-width: 820px; }

.section { padding-block: var(--section-y); }
.section--pale { background: var(--gris-fond); }
.section--sombre { background: var(--bleu-nuit); color: #DCE7F2; }
.section--sombre h2, .section--sombre h3 { color: #fff; }

.section__tete { max-width: 720px; margin-bottom: var(--space-8); }
.section__tete--centre { margin-inline: auto; text-align: center; }
.section__tete h2 { margin-bottom: var(--space-4); }

.lead { font-size: 1.125rem; line-height: 1.7; color: var(--ardoise); max-width: 62ch; }
.section__tete--centre .lead { margin-inline: auto; }
/* Mobile : 64px sous un titre de section, c'est trop — surtout pour un
   en-tête réduit à son sur-titre (« Comment ça fonctionne ? »). */
@media (max-width: 767px) {
  .section__tete { margin-bottom: var(--space-6); }
  .section__tete h2 { margin-bottom: var(--space-3); }
}
.lead--clair { color: #C6D6E8; }

/* Eyebrow + ligne de faîtage (signature) */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-3);
  font-family: var(--police-texte); font-weight: 600; font-size: 0.875rem;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--vert-accent);
  margin-bottom: var(--space-4);
}
.eyebrow--clair { color: var(--vert-accent); }
.eyebrow--centre { justify-content: center; }
.faitage {
  display: inline-block; width: 56px; height: 4px; border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--bleu-principal), var(--vert-accent));
  transform: rotate(-4deg);
}
.faitage--inv { background: linear-gradient(90deg, var(--vert-accent), var(--bleu-principal)); }

/* Mot-clé vert souligné dans le H1 */
.mot-cle { color: var(--vert-accent); position: relative; white-space: nowrap; }
.mot-cle::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 5px;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--bleu-principal), var(--vert-accent));
  transform: rotate(-1.5deg) scaleX(0); transform-origin: left;
  animation: tracer-faitage 500ms ease .35s forwards;
}
@keyframes tracer-faitage { to { transform: rotate(-1.5deg) scaleX(1); } }

/* Grilles */
.grille { display: grid; gap: var(--space-5); }
.grille--2, .grille--3, .grille--4 { grid-template-columns: 1fr; }
.grille--2 { gap: var(--space-6); }

/* ============ 4. BOUTONS ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--police-titre); font-weight: 600; font-size: 1rem; letter-spacing: 0.01em;
  padding: 14px 28px; border-radius: var(--radius-md); border: 2px solid transparent;
  cursor: pointer; text-align: center; min-height: 48px; line-height: 1.2;
  transition: transform var(--transition-base), box-shadow var(--transition-base),
              background-color var(--transition-base), color var(--transition-base);
}
.btn--lg { padding: 16px 36px; font-size: 1.125rem; }
.btn--sm { padding: 10px 20px; font-size: 0.875rem; min-height: 40px; }

.btn--primaire { background: var(--vert-action); color: #fff; box-shadow: var(--ombre-sm); }
.btn--primaire:hover { background: var(--vert-action-hover); transform: translateY(-2px); box-shadow: var(--ombre-md); }
.btn--primaire:active { transform: translateY(0); }

.btn--secondaire { background: transparent; color: var(--bleu-nuit); border-color: var(--bleu-nuit); padding: 12px 26px; }
.btn--lg.btn--secondaire { padding: 14px 34px; }
.btn--secondaire:hover { background: var(--bleu-pale); }

/* Bouton contour vert : se remplit au survol (cartes de services) */
.btn--contour-vert { background: transparent; color: var(--vert-action-hover); border: 1px solid var(--vert-action); font-weight: 500; padding: 13px 26px; }
.btn--contour-vert:hover { background: var(--vert-action); color: #fff; border-color: var(--vert-action); }

/* Contour clair : sur fond foncé (héro) */
.btn--secondaire-clair { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); padding: 12px 26px; }
.btn--lg.btn--secondaire-clair { padding: 14px 34px; }
.btn--secondaire-clair:hover { background: rgba(255,255,255,.12); border-color: #fff; }

.btn--contour-clair { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); padding: 12px 26px; }
.btn--contour-clair:hover { background: rgba(255,255,255,.12); border-color: #fff; }

/* ============ 5. BADGES D'ICÔNES & ICÔNES ============ */
.badge-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 72px; height: 72px; border-radius: var(--radius-lg);
  background: var(--vert-doux); box-shadow: var(--ombre-icone); flex: none;
}
.badge-ico svg { width: 32px; height: 32px; fill: none; stroke: var(--vert-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.badge-ico--bleu { background: var(--bleu-pale); box-shadow: var(--ombre-icone-bleue); }
.badge-ico--bleu svg { stroke: var(--bleu-principal); }
.badge-ico--sm { width: 48px; height: 48px; border-radius: var(--radius-md); }
.badge-ico--sm svg { width: 22px; height: 22px; }
.badge-ico--sur-carte { width: 56px; height: 56px; }
.badge-ico--sur-carte svg { width: 28px; height: 28px; }

.ico { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ico--vert { stroke: var(--vert-accent); width: 20px; height: 20px; }
.check { width: 22px; height: 22px; fill: none; stroke: var(--vert-accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ============ 6. HEADER / TOPBAR / NAV ============ */
.topbar { background: var(--bleu-nuit); color: #DCE7F2; font-size: 0.8125rem; }
/* Barre supérieure masquée en mobile (< 640px) — cf. manifeste §10 */
@media (max-width: 639px) { .topbar { display: none; } }
.topbar__inner { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); min-height: 40px; flex-wrap: wrap; }
.topbar__infos, .topbar__contact { display: flex; gap: var(--space-5); flex-wrap: wrap; }
.topbar__infos li, .topbar__contact li { display: inline-flex; align-items: center; gap: var(--space-2); }
.topbar__contact a { color: #DCE7F2; display: inline-flex; align-items: center; gap: var(--space-2); }
.topbar__contact a:hover { color: #fff; }
.topbar .ico { stroke: var(--vert-accent); }

.header { position: sticky; top: 0; z-index: 900; background: var(--blanc); border-bottom: 1px solid var(--gris-bordure); transition: box-shadow var(--transition-base); }
.header.scrolled { box-shadow: var(--ombre-sm); border-bottom-color: transparent; }
.header__inner { display: flex; align-items: center; gap: var(--space-5); min-height: 76px; }
.header__logo { flex: none; }
.header__logo img { height: 42px; width: auto; }

.nav { margin-left: auto; }
.nav__list { display: flex; gap: var(--space-6); }
.nav__list a { font-family: var(--police-texte); font-weight: 500; font-size: 1rem; color: var(--encre); position: relative; padding: 6px 2px; }
.nav__list a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--bleu-principal); border-radius: var(--radius-full); transform: scaleX(0); transform-origin: left; transition: transform var(--transition-base); }
.nav__list a:hover { color: var(--bleu-principal); }
.nav__list a:hover::after, .nav__list a.actif::after { transform: scaleX(1); }
.nav__list a.actif { color: var(--bleu-principal); }
.header__cta { margin-left: var(--space-2); }

.burger { display: none; width: 44px; height: 44px; margin-left: auto; background: transparent; border: 0; cursor: pointer; padding: 10px; }
.burger span { display: block; height: 2.5px; background: var(--bleu-nuit); border-radius: 2px; transition: transform var(--transition-base), opacity var(--transition-base); }
.burger span + span { margin-top: 5px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

.menu-mobile { position: fixed; inset: 0; z-index: 1000; visibility: hidden; }
.menu-mobile.ouvert { visibility: visible; }
.menu-mobile::before { content: ""; position: absolute; inset: 0; background: rgba(13,59,102,.5); opacity: 0; transition: opacity var(--transition-base); }
.menu-mobile.ouvert::before { opacity: 1; }
.menu-mobile__panneau {
  position: absolute; top: 0; right: 0; height: 100%; width: min(86vw, 360px);
  background: var(--blanc); padding: var(--space-6) var(--space-6) var(--space-8);
  display: flex; flex-direction: column; gap: var(--space-5);
  transform: translateX(100%); transition: transform var(--transition-douce);
  box-shadow: var(--ombre-lg); overflow-y: auto;
}
.menu-mobile.ouvert .menu-mobile__panneau { transform: translateX(0); }
.menu-mobile__fermer { align-self: flex-end; width: 44px; height: 44px; background: transparent; border: 0; cursor: pointer; }
.menu-mobile__fermer svg { width: 26px; height: 26px; fill: none; stroke: var(--bleu-nuit); stroke-width: 2; stroke-linecap: round; }
.menu-mobile__list { display: flex; flex-direction: column; gap: var(--space-1); }
.menu-mobile__list a { display: block; font-family: var(--police-titre); font-weight: 600; font-size: 1.125rem; color: var(--encre); padding: 12px 4px; border-bottom: 1px solid var(--gris-bordure); }
.menu-mobile__list a:hover { color: var(--bleu-principal); }
.menu-mobile__cta { margin-top: var(--space-3); }

/* ============ 7. HERO (split diagonal) + COMPARATEUR ============ */
/* Mobile-first : panneau foncé (texte) empilé au-dessus du média */
.hero { position: relative; background: var(--bleu-nuit); color: #fff; overflow: hidden; }
.hero__panel { padding: clamp(1.5rem, 4.5vw, 2.25rem) var(--conteneur-pad) clamp(1.25rem, 3vw, 1.75rem); }
.hero__texte { max-width: 36rem; margin-inline: auto; }
/* Titre héro volontairement plus compact que l'échelle H1 générale */
.hero__texte h1 { color: #fff; font-size: clamp(1.9875rem, calc(3.5vw + 3px), 2.8875rem); margin: var(--space-2) 0 var(--space-4); text-wrap: balance; }
/* « près de chez vous » passe à la ligne : « Nettoyage de toiture » reste d'un bloc.
   width:fit-content pour que le trait décoratif s'arrête à la fin du texte. */
.hero__texte h1 .mot-cle { display: block; width: fit-content; }
.hero__actions { display: flex; flex-wrap: nowrap; gap: var(--space-3); margin-top: var(--space-5); }
.hero__actions .btn--lg { font-size: 0.9375rem; padding: 13px 20px; white-space: nowrap; }
/* Libellés courts réservés aux petits écrans (display:none les retire aussi
   de la lecture des lecteurs d'écran : un seul texte est annoncé). */
.btn__court { display: none; }
@media (max-width: 560px) {
  .hero__actions { gap: 10px; }
  .hero__actions .btn--lg { flex: 1 1 0; min-width: 0; font-size: 0.875rem; padding: 13px 8px; }
  .btn__long { display: none; }
  .btn__court { display: inline; }
}

.hero__media { position: relative; padding: var(--space-5) var(--conteneur-pad) clamp(2.5rem, 6vw, 3.5rem); }

/* Image bannière du héro */
.hero__image {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius-xl); overflow: hidden;
  border: 1px solid var(--gris-bordure); box-shadow: var(--ombre-lg);
}

/* Pastille ronde flottante (« Devis gratuit — Réponse rapide ») */
.hero__pastille {
  position: absolute; right: calc(var(--conteneur-pad) + 8px); bottom: -22px; z-index: 6;
  width: 116px; height: 116px; border-radius: 50%;
  background: var(--bleu-principal); color: #fff; box-shadow: var(--ombre-lg);
  border: 3px solid rgba(255,255,255,.92);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; line-height: 1.05;
}
.hero__pastille strong { font-family: var(--police-titre); font-weight: 700; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.03em; }
.hero__pastille em { font-family: var(--police-titre); font-weight: 700; font-size: 1.35rem; font-style: normal; margin: 1px 0 5px; }
.hero__pastille span { font-size: 0.7rem; color: #CFE0F1; }

/* ---- Formulaire de rappel du héro ----
   Entrée différée : l'image de bannière reste seule ~2,5 s avant que la
   carte n'apparaisse. */
.hero__form {
  background: var(--blanc); border-radius: var(--radius-xl);
  border: 1px solid var(--gris-bordure); box-shadow: var(--ombre-lg);
  padding: clamp(1.5rem, calc(2vw + 8px), 1.875rem);
  margin-top: var(--space-5);
  animation: hero-form-entree 650ms cubic-bezier(.22,.9,.3,1) 1s backwards;
}
.hero__form-titre {
  font-size: clamp(1.2rem, 2vw, 1.45rem); color: var(--bleu-nuit);
  margin: 5px 0; line-height: 1.25;
}
.hero__form-champs { display: grid; gap: var(--space-3); }
.hero__form-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hero__form-grille .champ--pleine { grid-column: 1 / -1; }
.hero__form-champs .champ { gap: 4px; }
.hero__form-champs .champ label { font-size: 0.75rem; }
.hero__form-champs .champ input:not([type="checkbox"]),
.hero__form-champs .champ textarea { padding: 11px 12px; font-size: 0.875rem; }
/* Case de consentement : texte resserré, la carte reste compacte */
.hero__form-champs .champ--case { gap: 10px; }
.hero__form-champs .champ--case input { width: 17px; height: 17px; margin-top: 1px; }
.hero__form-champs .champ--case label { font-size: 0.75rem; line-height: 1.45; min-width: 0; }
.hero__form-champs .champ textarea { min-height: 0; }
.hero__form-champs .champ__erreur { font-size: 0.75rem; }
.hero__form-envoyer { width: 100%; margin-top: 0; padding: 12px 20px; font-size: 0.9375rem; }
.hero__form-note { text-align: center; font-size: 0.7rem; color: var(--ardoise); margin: 0; }

/* Deux champs par ligne y compris sur mobile : gouttière resserrée
   pour que les champs restent confortables sur écran étroit. */
@media (max-width: 560px) {
  .hero__form-grille { gap: 10px 8px; }
  .hero__form-champs .champ label { font-size: 0.7rem; }
}

@keyframes hero-form-entree {
  from { opacity: 0; transform: translateY(26px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__form { animation: none; }
}

.comparateur {
  position: relative; border-radius: var(--radius-xl); overflow: hidden;
  box-shadow: var(--ombre-lg); aspect-ratio: 4 / 3; border: 1px solid var(--gris-bordure);
  touch-action: pan-y; isolation: isolate; user-select: none; cursor: ew-resize;
}
.comparateur.focus, .comparateur:focus-visible { outline: 3px solid rgba(21,101,166,.6); outline-offset: 3px; }
.comparateur:focus { outline: none; }
.comparateur--glisse { cursor: grabbing; }
.comparateur__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; user-select: none; pointer-events: none; }
.comparateur__img--avant { clip-path: inset(0 50% 0 0); }
.comparateur__etiquette {
  position: absolute; top: var(--space-4); z-index: 3; font-family: var(--police-titre);
  font-weight: 600; font-size: 0.75rem; color: #fff; padding: 6px 12px;
  border-radius: var(--radius-sm); letter-spacing: 0.03em;
}
.comparateur__etiquette--avant { left: var(--space-4); background: rgba(13,59,102,.85); }
.comparateur__etiquette--apres { right: var(--space-4); background: var(--vert-accent); }
.comparateur__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; z-index: 4; pointer-events: none; }
.comparateur__poignee {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; transform: translateX(-50%);
  background: #fff; z-index: 3; pointer-events: none;
  display: flex; align-items: center; justify-content: center; gap: 7px;
}
.comparateur__poignee::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 48px; height: 48px; border-radius: var(--radius-full); background: #fff; box-shadow: var(--ombre-md); transition: transform .15s ease, box-shadow .15s ease; }
.comparateur:hover .comparateur__poignee::before { transform: translate(-50%,-50%) scale(1.06); }
.comparateur--glisse .comparateur__poignee::before { transform: translate(-50%,-50%) scale(1.12); box-shadow: var(--ombre-lg); }
.comparateur__poignee svg {
  position: relative; z-index: 1; flex: none; width: 10px; height: 18px;
  fill: none; stroke: var(--bleu-nuit); stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ============ 8. CARTES ============ */
.carte {
  background: var(--blanc); border: 1px solid var(--gris-bordure); border-radius: var(--radius-lg);
  padding: var(--space-6); box-shadow: var(--ombre-sm); position: relative; overflow: hidden;
  transition: transform var(--transition-douce), box-shadow var(--transition-douce), border-color var(--transition-douce);
}
.carte::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--bleu-principal), var(--vert-accent)); transform: scaleX(0); transform-origin: left; transition: transform var(--transition-douce); }
.carte:hover { transform: translateY(-6px); box-shadow: var(--ombre-md); border-color: rgba(92,170,60,.35); }
.carte:hover::before { transform: scaleX(1); }

.carte--service img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-md); margin-bottom: var(--space-5); }
.carte--service h3 { margin-bottom: var(--space-3); }
.carte--service { display: flex; flex-direction: column; }
.carte--service p { font-size: 0.9375rem; color: var(--ardoise); line-height: 1.6; margin-bottom: var(--space-5); }
/* margin-top:auto colle le bouton en bas : les 3 cartes restent alignées
   même si les descriptions n'ont pas le même nombre de lignes. */
.carte__cta { margin-top: auto; align-self: stretch; text-align: center; }

.carte--atout { text-align: center; }
.carte--atout .badge-ico { margin: 0 auto var(--space-5); }
.carte--atout h3 { margin-bottom: var(--space-3); }
.carte--atout p { font-size: 0.9375rem; color: var(--ardoise); line-height: 1.6; }

/* ============ 9. AVANT/APRÈS + MÉTHODE ============ */
.ap-figure { margin: 0; }
.ap-figure figcaption { margin-top: var(--space-4); text-align: center; font-family: var(--police-titre); font-weight: 600; color: #fff; font-size: 1rem; }

.methode { display: grid; gap: var(--space-5); position: relative; }
.etape { background: var(--blanc); border: 1px solid var(--gris-bordure); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--ombre-sm); position: relative; z-index: 1; }
.etape__num { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: var(--radius-full); background: var(--bleu-pale); color: var(--bleu-principal); font-family: var(--police-titre); font-weight: 700; font-size: 1.5rem; margin-bottom: var(--space-4); box-shadow: var(--ombre-icone-bleue); }
.etape h3 { margin-bottom: var(--space-2); }
.etape p { font-size: 0.9375rem; color: var(--ardoise); line-height: 1.6; }

/* ============ 10. À PROPOS ============ */
.apropos__inner { display: grid; gap: var(--space-8); align-items: center; }
.apropos__visuel { position: relative; }
.apropos__visuel img { border-radius: var(--radius-lg); box-shadow: var(--ombre-md); width: 100%; }
.apropos__badge {
  position: absolute; right: -10px; bottom: -18px; background: var(--blanc);
  border: 1px solid var(--gris-bordure); border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5); box-shadow: var(--ombre-lg);
  display: flex; align-items: center; gap: var(--space-3); max-width: 78%;
}
.apropos__badge strong { display: block; font-family: var(--police-titre); font-size: 1rem; color: var(--encre); }
.apropos__badge span { font-size: 0.8125rem; color: var(--ardoise); }
/* Colonne unique : le badge est recentré sous l'image plutôt que débordant à droite */
@media (max-width: 1023px) {
  .apropos__badge {
    right: auto; left: 50%; transform: translateX(-50%);
    max-width: calc(100% - 1.5rem); white-space: nowrap;
  }
}
@media (max-width: 380px) {
  .apropos__badge { padding: var(--space-3) var(--space-4); gap: var(--space-2); }
  .apropos__badge span { font-size: 0.75rem; }
}
.apropos__texte h2 { margin-bottom: var(--space-4); }
.apropos__texte .lead { margin-bottom: var(--space-4); }
.apropos__texte > p { color: var(--ardoise); }
.apropos__points { margin: var(--space-6) 0; display: grid; gap: var(--space-3); }
.apropos__points li { display: flex; align-items: flex-start; gap: var(--space-3); font-weight: 500; }
.stats { display: flex; flex-wrap: wrap; gap: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--gris-bordure); }
.stat strong { display: block; font-family: var(--police-titre); font-weight: 700; font-size: 1.375rem; color: var(--bleu-principal); }
.stat span { font-size: 0.8125rem; color: var(--ardoise); }

/* ============ 11. ZONES D'INTERVENTION ============ */
.zones__inner { display: grid; gap: var(--space-8); align-items: center; }
.zones__texte h2 { margin-bottom: var(--space-4); }
.communes { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-5) 0; }
.communes li { background: var(--bleu-pale); color: var(--bleu-nuit); font-weight: 500; font-size: 0.875rem; padding: 6px 14px; border-radius: var(--radius-full); }
.zones__france { display: flex; align-items: center; gap: var(--space-2); font-weight: 600; color: var(--encre); }
.zones__carte {
  position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-lg);
  border: 1px solid var(--gris-bordure); box-shadow: var(--ombre-sm); overflow: hidden;
  background: var(--gris-fond);
}
.zones__iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.zones__carte-lien {
  position: absolute; left: var(--space-4); bottom: var(--space-4); z-index: 2;
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--police-titre); font-weight: 600; font-size: 0.8125rem;
  color: var(--bleu-nuit); background: rgba(255,255,255,.92); box-shadow: var(--ombre-sm);
  padding: 8px 14px; border-radius: var(--radius-full);
  transition: background-color var(--transition-base), color var(--transition-base);
}
.zones__carte-lien:hover { background: #fff; color: var(--bleu-principal); }
.zones__carte-lien svg { width: 16px; height: 16px; fill: none; stroke: var(--vert-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ============ 12. AVIS ============ */
.avis { margin: 0; background: var(--blanc); border: 1px solid var(--gris-bordure); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--ombre-sm); display: flex; flex-direction: column; gap: var(--space-4); transition: transform var(--transition-douce), box-shadow var(--transition-douce); }
.avis:hover { transform: translateY(-4px); box-shadow: var(--ombre-md); }
.avis__etoiles { display: flex; gap: 2px; }
.avis__etoiles svg { width: 20px; height: 20px; fill: #F2B01E; stroke: none; }
.avis blockquote { margin: 0; font-size: 1rem; line-height: 1.65; color: var(--encre); flex: 1; }
.avis figcaption { display: flex; align-items: center; gap: var(--space-3); border-top: 1px solid var(--gris-bordure); padding-top: var(--space-4); }
.avis__initiale { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border-radius: var(--radius-full); background: var(--bleu-principal); color: #fff; font-family: var(--police-titre); font-weight: 700; }
.avis__auteur { display: flex; flex-direction: column; font-size: 0.875rem; color: var(--ardoise); line-height: 1.3; }
.avis__auteur strong { font-family: var(--police-titre); color: var(--encre); font-size: 1rem; }

/* Carrousel d'avis — défilement infini avec bords estompés */
.avis-carrousel {
  position: relative; margin-top: var(--space-8); overflow: hidden;
  /* Masque : les avis s'estompent en entrant/sortant par les bords G/D */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
}
.avis-piste { display: flex; width: max-content; padding-block: var(--space-3); }
.avis-piste.pret { animation: avis-defile var(--avis-duree, 44s) linear infinite; }
.avis-carrousel:hover .avis-piste.pret,
.avis-carrousel:focus-within .avis-piste.pret { animation-play-state: paused; }
.avis-piste .avis {
  flex: 0 0 clamp(280px, 80vw, 360px); width: clamp(280px, 80vw, 360px);
  margin-right: var(--space-5); box-shadow: var(--ombre-sm);
}
/* Décalage exact d'une série (mesuré en JS) => raccord dernier→premier sans trou */
@keyframes avis-defile { from { transform: translateX(0); } to { transform: translateX(calc(-1 * var(--avis-shift, 50%))); } }

@media (prefers-reduced-motion: reduce) {
  .avis-piste.pret { animation: none; }
  .avis-carrousel { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ============ 13. FAQ ============ */
.faq { border-top: 1px solid var(--gris-bordure); }
.faq__item { border-bottom: 1px solid var(--gris-bordure); }
.faq__q { width: 100%; text-align: left; background: transparent; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); font-family: var(--police-titre); font-weight: 600; font-size: 1.0625rem; color: var(--encre); padding: var(--space-5) var(--space-2); line-height: 1.4; }
.faq__q:hover { color: var(--bleu-principal); }
.faq__plus { position: relative; width: 22px; height: 22px; flex: none; }
.faq__plus::before, .faq__plus::after { content: ""; position: absolute; top: 50%; left: 50%; background: var(--vert-accent); border-radius: 2px; transition: transform var(--transition-base), opacity var(--transition-base); }
.faq__plus::before { width: 16px; height: 2.5px; transform: translate(-50%,-50%); }
.faq__plus::after { width: 2.5px; height: 16px; transform: translate(-50%,-50%); }
.faq__q[aria-expanded="true"] .faq__plus::after { transform: translate(-50%,-50%) rotate(90deg); opacity: 0; }
.faq__q[aria-expanded="true"] .faq__plus::before { transform: translate(-50%,-50%) rotate(180deg); }
.faq__r { overflow: hidden; height: 0; transition: height var(--transition-douce); }
.faq__r p { padding: 0 var(--space-2) var(--space-5); color: var(--ardoise); font-size: 1rem; line-height: 1.7; max-width: 65ch; }

/* ============ 14. BANDEAU CTA ============ */
.cta-bandeau {
  position: relative; padding-block: var(--section-y);
  background: linear-gradient(var(--overlay-fonce), var(--overlay-fonce)), url('../images/cta-toiture.webp');
  background-size: cover; background-position: center;
}
.cta-carte {
  background: rgba(13,59,102,.5); backdrop-filter: blur(2px); border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--radius-xl); padding: clamp(1.75rem, 4vw, 3rem);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-6); box-shadow: var(--ombre-lg);
}
.cta-carte__texte { color: #fff; max-width: 34rem; }
.cta-carte__texte h2 { color: #fff; margin-bottom: var(--space-3); }
.cta-carte__texte p { color: #DCE7F2; }
.cta-carte__actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }

/* ============ 15. CONTACT / FORMULAIRE ============ */
.contact__inner { display: grid; gap: var(--space-8); align-items: start; }
.contact__intro h2 { margin-bottom: var(--space-3); }
/* Mention de réactivité sous le titre du formulaire de contact */
.contact__reactivite {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--vert-doux); color: var(--vert-action-hover);
  font-family: var(--police-titre); font-weight: 600; font-size: 0.8125rem;
  padding: 7px 14px; border-radius: var(--radius-full);
  margin-bottom: var(--space-4);
}
.contact__pouls {
  flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: var(--vert-action); animation: contact-pouls 1.8s ease-in-out infinite;
}
@keyframes contact-pouls {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .4; transform: scale(.75); }
}
@media (prefers-reduced-motion: reduce) { .contact__pouls { animation: none; } }

/* Colonne d'information : parcours après l'envoi du formulaire.
   Timeline verticale : pastilles dégradées reliées par un filet, dans le
   même bleu -> vert que les traits « faitage » du reste du site. */
.contact__suite {
  margin-top: var(--space-7); padding-top: var(--space-7);
  border-top: 1px solid var(--gris-bordure);
}
.contact__etapes { display: grid; gap: var(--space-6); }
.contact__etapes li {
  position: relative; display: flex; gap: var(--space-4); align-items: flex-start;
}
/* Filet de liaison entre deux pastilles */
.contact__etapes li:not(:last-child)::before {
  content: ""; position: absolute; left: 17px; top: 42px; bottom: calc(-1 * var(--space-6));
  width: 2px; border-radius: var(--radius-full);
  background: linear-gradient(180deg, var(--bleu-principal), rgba(92,170,60,.45));
}
.contact__etape-num {
  flex: none; width: 36px; height: 36px; border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--bleu-principal), var(--vert-accent));
  color: #fff; font-family: var(--police-titre); font-weight: 700; font-size: 0.9375rem;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(21,101,166,.28);
  transition: transform var(--transition-douce), box-shadow var(--transition-douce);
}
.contact__etapes li:hover .contact__etape-num {
  transform: scale(1.1); box-shadow: 0 6px 18px rgba(21,101,166,.38);
}
.contact__etapes strong {
  display: block; font-family: var(--police-titre); font-size: 1rem;
  color: var(--bleu-nuit); margin-bottom: 4px; padding-top: 7px;
}
.contact__etapes p { font-size: 0.875rem; color: var(--ardoise); line-height: 1.55; margin: 0; }

.formulaire { background: var(--blanc); border: 1px solid var(--gris-bordure); border-radius: var(--radius-xl); padding: clamp(1.5rem, 3vw, 2rem); box-shadow: var(--ombre-md); display: grid; gap: var(--space-4); }
/* Deux champs par ligne : hauteur des champs inchangée, seuls les
   interlignes se resserrent. Textarea et case à cocher restent pleine largeur. */
.formulaire__grille { display: grid; grid-template-columns: 1fr 1fr; gap: 14px var(--space-4); }
.formulaire__grille .champ--pleine { grid-column: 1 / -1; }
@media (max-width: 560px) {
  .formulaire__grille { gap: 12px 8px; }
  .formulaire__grille .champ label { font-size: 0.8125rem; }
  .formulaire__grille .champ input, .formulaire__grille .champ select { padding: 11px 10px; }
}
.champ { display: flex; flex-direction: column; gap: var(--space-2); }
.champ-groupe { display: grid; gap: var(--space-5); }
.champ label { font-family: var(--police-titre); font-weight: 600; font-size: 0.9375rem; color: var(--encre); }
.champ label span { color: var(--vert-action); }
.champ input, .champ select, .champ textarea {
  font-family: var(--police-texte); font-size: 1rem; color: var(--encre); padding: 12px 14px;
  border: 1px solid var(--gris-bordure); border-radius: var(--radius-sm); background: var(--gris-fond);
  width: 100%; transition: border-color var(--transition-base), box-shadow var(--transition-base), background-color var(--transition-base);
}
.champ textarea { resize: vertical; min-height: 84px; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-color: var(--bleu-principal); background: #fff; box-shadow: 0 0 0 3px rgba(21,101,166,.14); }
.champ input[aria-invalid="true"], .champ textarea[aria-invalid="true"] { border-color: #C0392B; box-shadow: 0 0 0 3px rgba(192,57,43,.12); }
.champ__erreur { color: #C0392B; font-size: 0.8125rem; font-weight: 500; }
.champ--case { flex-direction: row; align-items: flex-start; gap: var(--space-3); flex-wrap: wrap; }
.champ--case input { width: 20px; height: 20px; margin-top: 3px; flex: none; accent-color: var(--vert-action); }
.champ--case label { font-family: var(--police-texte); font-weight: 400; font-size: 0.875rem; color: var(--ardoise); flex: 1; min-width: 0; }
.champ--case .champ__erreur { flex-basis: 100%; }
.champ--case label a { color: var(--bleu-principal); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.champ--case label a:hover { color: var(--bleu-nuit); }
.formulaire__envoyer { width: 100%; margin-top: var(--space-2); }
.formulaire__note { text-align: center; font-size: 0.8125rem; color: var(--ardoise); }
.formulaire__succes { background: var(--vert-doux); color: var(--vert-action-hover); border: 1px solid rgba(92,170,60,.4); border-radius: var(--radius-md); padding: var(--space-4); text-align: center; font-weight: 600; }
.formulaire__echec { background: #FDECEA; color: #A03027; border: 1px solid rgba(192,57,43,.35); border-radius: var(--radius-md); padding: var(--space-4); text-align: center; font-weight: 600; }

/* ============ 16. FOOTER ============ */
.footer { background: var(--bleu-nuit); color: #C6D6E8; padding-top: var(--section-y); }
.footer__grille { display: grid; gap: var(--space-7); grid-template-columns: 1fr; padding-bottom: var(--space-8); }
.footer__col h3 { color: #fff; font-size: 1.0625rem; margin-bottom: var(--space-4); }
.footer__col ul { display: grid; gap: var(--space-2); }
.footer__col a { color: #C6D6E8; }
.footer__col a:hover { color: var(--vert-accent); }
.footer__col--marque img { height: 42px; width: auto; margin-bottom: var(--space-4); }
.footer__col--marque p { color: #AFC3D9; font-size: 0.9375rem; max-width: 34ch; margin-bottom: var(--space-5); }
.footer .btn--contour-clair { margin-top: var(--space-4); }
.footer__bas { border-top: 1px solid rgba(255,255,255,.12); padding-block: var(--space-5); }
.footer__bas-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); font-size: 0.8125rem; color: #9FB4CC; }

/* ============ 17. ANIMATIONS / REVEAL ============ */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity 500ms ease, transform 500ms ease; }
.reveal.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  .mot-cle::after { transform: rotate(-1.5deg) scaleX(1); animation: none; }
}

/* ============ 18. RESPONSIVE ============ */
@media (min-width: 640px) {
  .grille--3, .grille--4 { grid-template-columns: repeat(2, 1fr); }
  .grille--2 { grid-template-columns: repeat(2, 1fr); }
  .methode { grid-template-columns: repeat(2, 1fr); }
  .champ-groupe { grid-template-columns: 1fr 1fr; }
  .footer__grille { grid-template-columns: repeat(2, 1fr); }
  .footer__col--marque { grid-column: 1 / -1; }
}

@media (max-width: 899px) {
  .nav, .header__cta { display: none; }
  .burger { display: block; }
}

@media (min-width: 1024px) {
  .grille--3 { grid-template-columns: repeat(3, 1fr); }
  .grille--4 { grid-template-columns: repeat(4, 1fr); }
  .methode { grid-template-columns: repeat(4, 1fr); }

  /* Héro : composition en split diagonal */
  .hero { min-height: 560px; display: flex; align-items: stretch; }
  .hero__panel {
    position: relative; z-index: 2; width: 60%; display: flex; align-items: center;
    background: var(--bleu-nuit);
    clip-path: polygon(0 0, 100% 0, calc(100% - 150px) 100%, 0 100%);
    padding: clamp(4.875rem, calc(3vw + 50px), 5.625rem) 170px
             clamp(4.875rem, calc(3vw + 50px), 5.625rem)
             max(var(--conteneur-pad), calc((100vw - var(--conteneur-max)) / 2));
  }
  /* Menu centré dans le header, indépendamment de la largeur
     du logo et du bouton (positionnement absolu). */
  .header__inner { position: relative; }
  .nav { position: absolute; left: 50%; transform: translateX(-50%); margin-left: 0; }
  .header__cta { margin-left: auto; }
  /* Espacement resserré tant que le header est étroit :
     évite que « Contact » ne vienne toucher le bouton de devis. */
  @media (max-width: 1199px) {
    .nav__list { gap: var(--space-5); }
  }

  .hero__texte { margin-inline: 0; }
  .hero__actions { flex-wrap: nowrap; }
  .hero__media {
    position: absolute; inset: 0 0 0 auto; width: 62%; padding: 0;
    display: flex; align-items: center; justify-content: flex-end;
    padding-right: clamp(1.5rem, 4vw, 4rem);
  }
  .hero__media .hero__image {
    position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto;
    object-position: center; border-radius: 0; border: 0; box-shadow: none;
  }
  /* Carte de rappel posée sur l'image, à droite de la bannière */
  .hero__media .hero__form {
    position: relative; z-index: 3; flex: none;
    width: clamp(320px, 34vw, 470px); margin-top: 0;
  }
  .hero__pastille { right: clamp(2rem, 5vw, 5rem); bottom: clamp(2rem, 5vw, 4rem); width: 132px; height: 132px; }
  .hero__pastille em { font-size: 1.5rem; }

  .apropos__inner { grid-template-columns: 1fr 1.1fr; gap: var(--space-9); }
  .zones__inner { grid-template-columns: 1.2fr 1fr; gap: var(--space-9); }
  .contact__inner { grid-template-columns: 1fr 1.15fr; gap: var(--space-9); }
  .footer__grille { grid-template-columns: 1.6fr 1fr 1fr 1.3fr; }
  .footer__col--marque { grid-column: auto; }
  /* Trait faîtage reliant les étapes de méthode */
  .methode::before { content: ""; position: absolute; left: 12%; right: 12%; top: calc(var(--space-6) + 26px); height: 2px; background: linear-gradient(90deg, var(--bleu-clair), var(--vert-accent)); opacity: .5; z-index: 0; }
}

@media (min-width: 1280px) {
  .hero { padding-block: 6.25rem; }
}