/* ==========================================================================
   Mohimont Toiture — feuille de style principale
   Palette : ardoise / anthracite + accent terracotta
   ========================================================================== */

:root{
  /* Couleurs */
  --ink:            #101318;
  --slate-900:      #171b22;
  --slate-800:      #1f242d;
  --slate-700:      #2b323d;
  --slate-500:      #6b7583;
  --slate-400:      #97a0ac;
  --mist:           #f5f4f1;
  --mist-2:         #ebe9e4;
  --paper:          #ffffff;
  --accent:         #c0562b;
  --accent-hover:   #a3441f;
  --accent-soft:    #fbeee7;
  --line:           rgba(16,19,24,.10);
  --line-dark:      rgba(255,255,255,.10);

  /* Typo */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Rythme */
  --radius: 14px;
  --radius-lg: 22px;
  --maxw: 1180px;
  --pad: clamp(20px, 5vw, 40px);
  --section: clamp(72px, 10vw, 128px);

  --shadow-sm: 0 1px 2px rgba(16,19,24,.05), 0 4px 14px rgba(16,19,24,.05);
  --shadow-md: 0 2px 6px rgba(16,19,24,.06), 0 18px 40px rgba(16,19,24,.09);
  --shadow-lg: 0 30px 70px rgba(16,19,24,.16);
}

/* ---------- Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:88px; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font);
  font-size:17px;
  line-height:1.65;
  color:var(--slate-800);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; }

h1,h2,h3,h4{
  color:var(--ink);
  font-weight:750;
  letter-spacing:-.032em;
  line-height:1.1;
  margin:0 0 .5em;
  text-wrap:balance;
}
h1{ font-size:clamp(2.4rem, 6.2vw, 4.1rem); }
h2{ font-size:clamp(1.95rem, 4.3vw, 3rem); }
h3{ font-size:clamp(1.15rem, 2vw, 1.35rem); letter-spacing:-.02em; }
p{ margin:0 0 1.1em; text-wrap:pretty; }
p:last-child{ margin-bottom:0; }

.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.section{ padding-block:var(--section); }
.section--tint{ background:var(--mist); }
.section--dark{ background:var(--ink); color:var(--slate-400); }
.section--dark h2,.section--dark h3{ color:#fff; }

.lede{ font-size:clamp(1.05rem,1.6vw,1.18rem); color:var(--slate-500); max-width:62ch; }
.section--dark .lede{ color:var(--slate-400); }

/* ---------- Eyebrow / titres de section ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:.75rem; font-weight:650; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); margin-bottom:1rem;
}
.eyebrow::before{ content:""; width:26px; height:2px; background:var(--accent); border-radius:2px; }
.section--dark .eyebrow{ color:#e08a5c; }
.section--dark .eyebrow::before{ background:#e08a5c; }

.section-head{ max-width:70ch; margin-bottom:clamp(40px,5vw,64px); }
.section-head--center{ margin-inline:auto; text-align:center; }
.section-head--center .eyebrow::before{ display:none; }

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.95rem 1.6rem; border-radius:100px; border:1.5px solid transparent;
  font-weight:620; font-size:.98rem; letter-spacing:-.01em; cursor:pointer;
  transition:transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn--primary{ background:var(--accent); color:#fff; box-shadow:0 8px 22px rgba(192,86,43,.28); }
.btn--primary:hover{ background:var(--accent-hover); box-shadow:0 12px 28px rgba(192,86,43,.34); }
.btn--dark{ background:var(--ink); color:#fff; }
.btn--dark:hover{ background:var(--slate-800); }
.btn--ghost{ border-color:var(--line); color:var(--ink); background:transparent; }
.btn--ghost:hover{ border-color:var(--ink); background:var(--ink); color:#fff; }
.btn--ghost-light{ border-color:rgba(255,255,255,.28); color:#fff; background:rgba(255,255,255,.04); }
.btn--ghost-light:hover{ background:#fff; color:var(--ink); border-color:#fff; }
.btn--lg{ padding:1.1rem 2rem; font-size:1.02rem; }
.btn svg{ width:18px; height:18px; flex:none; }

/* ---------- En-tête ---------- */
.header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  background:rgba(255,255,255,0);
  transition:background .3s ease, box-shadow .3s ease, border-color .3s ease;
  border-bottom:1px solid transparent;
}
.header__inner{ display:flex; align-items:center; gap:1rem; height:78px; position:relative; }
.header.is-scrolled{
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom-color:var(--line);
  box-shadow:0 1px 20px rgba(16,19,24,.05);
}

.logo{ display:flex; align-items:center; gap:.7rem; margin-right:auto; }
.logo__mark{ width:38px; height:38px; flex:none; }
.logo__text{ display:flex; flex-direction:column; line-height:1.05; }
.logo__name{ font-weight:760; font-size:1.02rem; letter-spacing:-.03em; color:#fff; transition:color .3s; }
.logo__tag{ font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.62); transition:color .3s; }
.header.is-scrolled .logo__name{ color:var(--ink); }
.header.is-scrolled .logo__tag{ color:var(--slate-500); }
/* Le logo est un chevron en trait, toujours orange : aucune bascule
   de couleur entre l'en-tête sombre et l'en-tête clair. */
.logo__mark path.roof{
  fill:none; stroke:var(--accent); stroke-width:4.7;
  stroke-linecap:round; stroke-linejoin:round;
}

/* Le menu n'est plus une barre de liens : c'est un panneau qui s'ouvre
   depuis l'icône, à gauche, sur ordinateur comme sur mobile. */
.nav{
  position:absolute; top:calc(100% - 8px); left:0;
  display:flex; flex-direction:column; align-items:stretch; gap:2px;
  min-width:236px; padding:.45rem;
  background:var(--paper); border:1px solid var(--line); border-radius:15px;
  box-shadow:var(--shadow-md);
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .22s ease, transform .22s ease, visibility .22s;
}
body.nav-open .nav{ opacity:1; visibility:visible; transform:translateY(0); }
.nav a{
  font-size:.95rem; font-weight:550; color:var(--slate-700);
  padding:.62rem .8rem; border-radius:10px; transition:background .18s, color .18s;
}
.nav a:hover{ background:var(--mist); color:var(--ink); }

.header__cta{ display:flex; align-items:center; gap:.75rem; }
.header__phone{
  display:inline-flex; align-items:center; gap:.5rem; font-weight:650; font-size:.95rem;
  color:#fff; transition:color .3s;
}
.header.is-scrolled .header__phone{ color:var(--ink); }
.header__phone svg{ width:17px; height:17px; color:var(--accent); }

.burger{
  display:flex; width:42px; height:42px; margin-left:-9px; flex:none;
  border:none; background:transparent; cursor:pointer;
  align-items:center; justify-content:center; border-radius:11px; padding:0;
  transition:background .2s ease;
}
.burger:hover{ background:rgba(255,255,255,.10); }
.header.is-scrolled .burger:hover{ background:var(--mist-2); }
.burger:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.burger span{ display:block; width:20px; height:2px; background:#fff; border-radius:2px; position:relative; transition:background .3s; }
.burger span::before,.burger span::after{
  content:""; position:absolute; left:0; width:20px; height:2px; background:#fff; border-radius:2px;
  transition:transform .3s ease, top .3s ease, background .3s ease;
}
.burger span::before{ top:-6.5px; } .burger span::after{ top:6.5px; }
.header.is-scrolled .burger span,
.header.is-scrolled .burger span::before,
.header.is-scrolled .burger span::after{ background:var(--ink); }
body.nav-open .burger span{ background:transparent !important; }
body.nav-open .burger span::before{ top:0; transform:rotate(45deg); }
body.nav-open .burger span::after{ top:0; transform:rotate(-45deg); }

/* ---------- Hero ---------- */
.hero{
  position:relative; min-height:min(94vh, 880px); display:flex; align-items:flex-end;
  background:var(--ink); color:#fff; overflow:hidden; padding-bottom:clamp(56px,7vw,88px); padding-top:150px;
}
.hero__bg{ position:absolute; inset:0; z-index:0; }
.hero__bg img{ width:100%; height:100%; object-fit:cover; opacity:1; }

/* Vidéo de fond du hero */
.hero__poster{ position:absolute; inset:0; }
/* L'animation ne sert que sur mobile : sur ordinateur la photo rend mieux.
   Masquée par défaut, révélée uniquement sous 860 px. */
.hero__video{
  display:none;
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1.4s ease; pointer-events:none;
}
.hero__video.is-ready{ opacity:.94; }
/* la vidéo prend le relais : on masque l'image de repli en dessous */
.hero__bg.has-video .hero__poster{ opacity:0; transition:opacity 1.4s ease; }
.hero__bg.has-video.is-empty{ background:var(--ink); }
/* La scène animée est déjà sombre et vignettée : on allège la superposition,
   sinon le double assombrissement efface l'image. La zone du titre (haut
   gauche) reste sombre dans la vidéo elle-même, le contraste est préservé. */
.hero__bg.has-video::after{
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(192,86,43,.16), transparent 60%),
    linear-gradient(185deg, rgba(16,19,24,.30) 0%, rgba(16,19,24,.44) 42%, rgba(16,19,24,.92) 100%);
}

/* Bouton lecture / pause (obligatoire pour l'accessibilité sur une vidéo automatique) */
.hero__vidctrl{
  display:none;
  position:absolute; z-index:3; right:var(--pad); bottom:calc(var(--pad) + 4px);
  width:44px; height:44px; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; color:#fff;
  background:rgba(16,19,24,.45); border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.hero__vidctrl:hover{ background:rgba(16,19,24,.72); border-color:rgba(255,255,255,.55); transform:scale(1.06); }
.hero__vidctrl:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.hero__vidctrl svg{ width:16px; height:16px; }
.hero__vidctrl .ico-play{ display:none; }
.hero__vidctrl.is-paused .ico-pause{ display:none; }
.hero__vidctrl.is-paused .ico-play{ display:block; margin-left:2px; }
/* Voile calibré pour une photographie : la photo est déjà assombrie et
   dégradée à la fabrication, le voile ne fait que sécuriser la lisibilité. */
/* Voile de lisibilité, identique sur tous les écrans : c'est lui, et non le
   fichier image, qui détermine la luminosité perçue de la photo. Le teinté
   orange et l'assombrissement à 92 % qui s'appliquaient sur ordinateur
   rendaient la même photo sensiblement plus sombre que sur mobile. */
.hero__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,14,20,.46) 0%, rgba(11,14,20,.18) 26%,
                                      rgba(11,14,20,.62) 70%, rgba(11,14,20,.76) 100%);
}
/* Voile sous l'en-tête : sans lui le logo blanc tombe sur le ciel clair. */
.hero__bg::before{
  content:""; position:absolute; inset:0 0 auto 0; height:132px; z-index:1;
  background:linear-gradient(180deg, rgba(8,10,14,.76) 0%, rgba(8,10,14,.40) 54%, transparent 100%);
}

/* ---------- Alignement de la luminosité entre ordinateur et mobile ----------
   Le voile est le même, mais il ne couvre pas la même chose : sur mobile la
   photo n'occupe que les 69 % supérieurs du hero, sur ordinateur elle le
   remplit entièrement. À hauteur de photo égale, le dégradé est donc bien plus
   avancé sur ordinateur — et la même image y paraissait plus sombre.
   Les arrêts ci-dessous sont le report, rangée de pixels par rangée de pixels,
   des valeurs que la photo reçoit sur mobile — jusqu'à 58 % de la hauteur.
   Au-delà, on assombrit franchement : c'est la zone du titre, et sur mobile il
   n'y a de toute façon plus de photo à cet endroit. La comparaison de
   luminosité porte sur le toit, qui est au-dessus. */
@media (min-width:861px){
  .hero__bg::after{
    background:linear-gradient(180deg, rgba(11,14,20,.40) 0%, rgba(11,14,20,.18) 35%,
                                        rgba(11,14,20,.42) 58%, rgba(11,14,20,.86) 100%);
  }
}
/* Motif de tuiles en repli si aucune photo */
.hero__bg.is-empty{
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(192,86,43,.26), transparent 55%),
    repeating-linear-gradient(115deg, #1a1f27 0 62px, #171b22 62px 124px),
    var(--ink);
}
.hero__bg.is-empty img{ display:none; }

.hero__inner{ position:relative; z-index:1; width:100%; }
/* Badge « Perwez · Entreprise de toiture » retiré partout le 16/08/2026 :
   le H1 dit désormais « Toiture à Perwez », il faisait doublon.
   Les styles restent au cas où il reviendrait. */
.hero .hero__badge{ display:none; }

.hero__badge{
  display:inline-flex; align-items:center; gap:.6rem; padding:.45rem 1rem .45rem .55rem;
  border:1px solid rgba(255,255,255,.18); border-radius:100px; background:rgba(255,255,255,.06);
  backdrop-filter:blur(8px); font-size:.83rem; font-weight:550; color:rgba(255,255,255,.92); margin-bottom:1.6rem;
}
.hero__badge b{ background:var(--accent); color:#fff; font-size:.7rem; font-weight:700; letter-spacing:.06em;
  padding:.22rem .6rem; border-radius:100px; text-transform:uppercase; }
/* Titre plus long que la moyenne : taille légèrement réduite et largeur
   libérée pour que la première ligne tienne d'un bloc sur ordinateur. */
.hero h1{
  color:#fff; margin-bottom:1.1rem; max-width:none;
  font-size:clamp(2.05rem, 4.9vw, 3.5rem);
}
.hero h1 em{ font-style:normal; color:#e5946a; }
/* Une arête de zinc claire traverse la zone du titre : sans cette ombre, les
   pixels les plus vifs du fond passent sous le minimum WCAG. */
.hero h1{ text-shadow:0 2px 16px rgba(6,8,12,.55); }
.hero__sub{ font-size:clamp(1.05rem,1.9vw,1.24rem); color:rgba(255,255,255,.8); max-width:56ch; margin-bottom:2.2rem; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:.85rem; margin-bottom:clamp(48px,6vw,72px); }

/* ---------- Les deux appels à l'action du hero, côte à côte à parts égales ----------
   minmax(0,1fr) et non 1fr : le contenu des boutons est en `white-space:nowrap`,
   donc leur largeur minimale vaut celle de leur texte. Avec 1fr, la grille refuse
   de descendre en dessous et déborde du conteneur au lieu de partager la place.
   Cette règle doit rester APRÈS le `display:flex` ci-dessus. */
.hero__actions{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:stretch; gap:.7rem; max-width:560px;
}
.hero__actions .btn{ width:auto; min-width:0; }
/* « Prendre un rendez-vous » demande ~200 px alors que la moitié n'en fait que
   169 sur un téléphone : le libellé raccourcit sous 600 px. */
.lbl-court{ display:none; }
@media (max-width:600px){
  .lbl-long{ display:none; }
  .lbl-court{ display:inline; }
  .hero__actions{ max-width:520px; }
  .hero__actions .btn--lg{ padding-left:.7rem; padding-right:.7rem; }
}

/* ---------- Hero : sans le paragraphe de description ----------
   Le badge, les deux boutons et la bande de chiffres restent en place.
   Seul le paragraphe sous le titre est retiré : les mêmes arguments sont
   déjà repris par le bandeau de confiance juste en dessous. */
.hero .hero__sub{ display:none; }
.hero h1{ margin-bottom:2rem; }

/* Repère vers la tuile : un fil d'un pixel, un point cerclé sur la matière,
   et son nom en petites capitales. Masqué sous 1020 px, où le recadrage
   de la photo ferait pointer le repère à côté de la tuile. */
.hero__annot{
  position:absolute; z-index:2; right:calc(var(--pad) + 10px); top:26%;
  color:rgba(255,255,255,.78); pointer-events:none;
  display:flex; flex-direction:column; align-items:flex-end;
}
.hero__annot-txt{
  font-size:.7rem; letter-spacing:.15em; text-transform:uppercase; font-weight:520;
  color:rgba(255,255,255,.78); white-space:nowrap; margin-bottom:.35rem;
  text-shadow:0 1px 10px rgba(0,0,0,.55);
}
.hero__annot-txt b{ color:rgba(255,255,255,.94); font-weight:660; letter-spacing:.12em; }
.hero__annot-fil{ width:132px; height:96px; filter:drop-shadow(0 1px 6px rgba(0,0,0,.5)); }

/* ---------- Grand écran : la photo occupe tout l'écran d'accueil ---------- */
@media (min-width:861px){
  .hero{ min-height:100vh; min-height:100svh; }
}

/* Le repère était masqué entre 861 et 1020 px : à l'époque, le recadrage de
   l'ancienne photo 16:9 y faisait pointer le fil à côté des tuiles. Avec la
   photo 4:3 la cible reste bonne — contrôlé de 861 à 1020 px. */

/* ---------- Caractéristiques de la tuile, sous le repère ----------
   Cinq mentions qui se relaient, une toutes les trois secondes. */
.hero__annot-qual{
  list-style:none; margin:.3rem 0 0; padding:0; position:relative;
  height:15px; width:230px; text-align:right;
}
.hero__annot-qual li{
  position:absolute; inset:0; font-size:.66rem; letter-spacing:.05em; font-weight:560;
  color:rgba(255,255,255,.90); white-space:nowrap; opacity:0;
  text-shadow:0 1px 8px rgba(6,8,12,.75);
  animation:tuile-qual 9s linear infinite; animation-delay:calc(var(--i) * 3s);
}
/* Trois mentions, trois secondes chacune : le cycle fait 9 s et chaque ligne
   occupe donc un tiers de la boucle, fondu compris. */
@keyframes tuile-qual{
  0%{opacity:0; transform:translateY(4px)} 5%{opacity:1; transform:none}
  28%{opacity:1; transform:none} 33%{opacity:0; transform:translateY(-4px)} 100%{opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .hero__annot-qual li{ animation:none; opacity:0; }
  .hero__annot-qual li:first-child{ opacity:1; }
}

/* ---------- Recalage du repère sur ordinateur ----------
   La photo est désormais la même que sur mobile : l'original en 4:3. Sur tout
   écran d'ordinateur plus large que 4:3 — c'est-à-dire tous — le recadrage
   `cover` est piloté par la LARGEUR. Conséquence heureuse : 80 % de la largeur
   affichée correspond toujours à la colonne 80 % de la photo, quel que soit
   l'écran, et l'ordonnée se réduit elle aussi à une proportion constante.
   Le point du dessin est à 124 px du bord droit du bloc, et le fil plus les
   deux lignes de texte occupent 108 px au-dessus de lui.
   Contrôlé sur la photo source : la cible tombe en plein champ de tuiles, à
   bonne distance de la toiture en ardoise du premier plan. */
.hero__annot{ right:calc(37.5% - 124px); top:calc(37.2% - 108px); }



/* Bande de chiffres : les proportions d'origine — valeur en clamp jusqu'à
   1,75 rem, libellé en 0,82 rem casse normale, mêmes marges intérieures, donc
   même hauteur (93 px) et même position qu'avant — mais présentées en colonnes
   aérées : plus de cadre, plus de fond, plus de filets verticaux. Un seul trait
   d'un pixel au-dessus donne son assise à la bande ; sans lui les quatre
   mentions flottent quand la photo est claire à cet endroit. La première
   colonne n'a pas de marge à gauche : sa valeur s'aligne exactement sur le
   titre. */
.hero__stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  background:transparent; border:0; border-top:1px solid rgba(255,255,255,.17);
  border-radius:0; overflow:visible;
}
/* Colonne flex : quelle que soit la longueur de la valeur (une ou deux lignes),
   les libellés restent alignés sur le bas de la rangée. */
.hero__stat{ background:transparent; padding:1.15rem 1.3rem 1.15rem 0;
  display:flex; flex-direction:column; }
.hero__stat b{ display:block; font-size:clamp(1.26rem,2.4vw,1.75rem); font-weight:760;
  color:#fff; letter-spacing:-.035em; line-height:1.12; text-wrap:balance; }
.hero__stat span{ display:block; font-size:.82rem; color:rgba(255,255,255,.62);
  line-height:1.35; margin-top:auto; padding-top:.35rem; }

/* ---------- Bandeau confiance ---------- */
/* Bandeau de confiance : retiré du HTML le 16/08/2026. Styles conservés
   au cas où il reviendrait ; aucun élément ne les utilise aujourd'hui. */
.trust{ background:var(--slate-900); border-top:1px solid var(--line-dark); }
.trust__inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:1rem 2.4rem; padding-block:1.15rem; }
.trust__item{ display:flex; align-items:center; gap:.6rem; font-size:.9rem; color:rgba(255,255,255,.78); font-weight:520; }
.trust__item svg{ width:18px; height:18px; color:var(--accent); flex:none; }

/* ---------- Services ---------- */
.grid{ display:grid; gap:clamp(16px,2vw,24px); }
.grid--3{ grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); }
.grid--2{ grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); }
.grid--4{ grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }

.card{
  position:relative; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:clamp(26px,3vw,34px); transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  display:flex; flex-direction:column; overflow:hidden;
}
.card::before{
  content:""; position:absolute; inset:auto 0 0 0; height:3px; background:var(--accent);
  transform:scaleX(0); transform-origin:left; transition:transform .3s ease;
}
.card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:transparent; }
.card:hover::before{ transform:scaleX(1); }
.card__icon{
  width:52px; height:52px; border-radius:14px; background:var(--accent-soft); color:var(--accent);
  display:grid; place-items:center; margin-bottom:1.3rem; flex:none;
}
.card__icon svg{ width:26px; height:26px; }
.card h3{ margin-bottom:.55rem; }
.card p{ color:var(--slate-500); font-size:.97rem; margin-bottom:1.2rem; }
.card__list{ list-style:none; margin:0 0 1.4rem; padding:0; display:flex; flex-direction:column; gap:.45rem; }
.card__list li{ position:relative; padding-left:1.4rem; font-size:.92rem; color:var(--slate-700); }
.card__list li::before{
  content:""; position:absolute; left:0; top:.55em; width:7px; height:7px; border-radius:50%;
  background:var(--accent); opacity:.55;
}
.card__link{
  margin-top:auto; display:inline-flex; align-items:center; gap:.4rem; font-weight:620; font-size:.93rem; color:var(--accent);
}
.card__link svg{ width:15px; height:15px; transition:transform .2s ease; }
.card:hover .card__link svg{ transform:translateX(4px); }
/* Toute la fiche est cliquable. C'est le lien « En savoir plus » qui s'étend
   sur la carte entière : un calque posé sur la carte, comme avant, recouvrait
   le lien et empêchait justement de cliquer. `.card__link` doit rester sans
   position pour que son `inset:0` se cale sur la carte. */
.card--link{ cursor:pointer; }
.card--link .card__link::after{ content:""; position:absolute; inset:0; }
/* Le corps de la fiche photo était en `position:relative` : le calque du lien
   se calait dessus et ne couvrait que le texte, pas la photo. On le remet en
   flux normal pour que le calque se cale sur la carte entière. */
.card--link .card__bd{ position:static; }
.card--link .card__link:focus-visible{ outline:none; }
.card--link:has(.card__link:focus-visible){
  outline:3px solid var(--accent); outline-offset:3px;
}

/* ---------- À propos ---------- */
.about{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:center; }
.about__media{ position:relative; }
.about__photo{
  border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:4/5; background:var(--mist-2);
  box-shadow:var(--shadow-md);
}
.about__photo img{ width:100%; height:100%; object-fit:cover; }
.about__photo.is-empty{
  background:
    linear-gradient(160deg, var(--slate-800), var(--ink));
  display:grid; place-items:center;
}
.about__photo.is-empty img{ display:none; }
.about__photo.is-empty::after{
  content:"Votre photo ici"; color:rgba(255,255,255,.35); font-size:.85rem; letter-spacing:.1em; text-transform:uppercase;
}
.about__stamp{
  position:absolute; right:-14px; bottom:26px; background:var(--accent); color:#fff;
  padding:1.1rem 1.4rem; border-radius:var(--radius); box-shadow:var(--shadow-lg); max-width:200px;
}
.about__stamp b{ display:block; font-size:1.7rem; font-weight:770; letter-spacing:-.03em; line-height:1; }
.about__stamp span{ font-size:.82rem; opacity:.9; }
.about__points{ list-style:none; margin:1.8rem 0 2rem; padding:0; display:flex; flex-direction:column; gap:1.05rem; }
.about__points li{ display:flex; gap:.9rem; align-items:flex-start; }
.about__points svg{ width:22px; height:22px; color:var(--accent); flex:none; margin-top:2px; }
.about__points b{ display:block; color:var(--ink); font-weight:640; }
.about__points span{ font-size:.94rem; color:var(--slate-500); }

/* ---------- Processus ---------- */
.steps{ counter-reset:step; }
.step{ position:relative; padding-top:2.4rem; }
.step::before{
  counter-increment:step; content:counter(step,decimal-leading-zero);
  position:absolute; top:0; left:0; font-size:.82rem; font-weight:700; letter-spacing:.1em; color:var(--accent);
}
.step::after{
  content:""; position:absolute; top:1.75rem; left:0; right:14px; height:1px; background:var(--line);
}
.section--dark .step::after{ background:var(--line-dark); }
.step h3{ font-size:1.1rem; margin-bottom:.4rem; }
.step p{ font-size:.94rem; color:var(--slate-500); margin:0; }
.section--dark .step p{ color:var(--slate-400); }

/* ---------- Galerie ---------- */
.gallery{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; }
.gallery__item{
  position:relative; aspect-ratio:4/3; border-radius:var(--radius); overflow:hidden; background:var(--mist-2);
}
.gallery__item:nth-child(1),.gallery__item:nth-child(6){ grid-column:span 2; aspect-ratio:8/5; }
.gallery__item img{ width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.2,.7,.3,1); }
.gallery__item:hover img{ transform:scale(1.05); }
.gallery__item figcaption{
  position:absolute; inset:auto 0 0 0; padding:1.6rem 1.2rem .95rem;
  background:linear-gradient(transparent, rgba(16,19,24,.85));
  color:#fff; font-size:.9rem; font-weight:550;
}
.gallery__item.is-empty{
  background:repeating-linear-gradient(135deg,var(--mist) 0 12px,var(--mist-2) 12px 24px);
  display:grid; place-items:center; border:1px dashed rgba(16,19,24,.18);
}
.gallery__item.is-empty img{ display:none; }
.gallery__item.is-empty figcaption{ position:static; background:none; color:var(--slate-500); padding:0; text-align:center; font-weight:500; }

/* ---------- Primes ---------- */
.prime{
  display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(28px,4vw,56px); align-items:center;
  background:var(--slate-900); color:var(--slate-400); border-radius:var(--radius-lg);
  padding:clamp(30px,4vw,54px); overflow:hidden; position:relative;
}
.prime::after{
  content:""; position:absolute; right:-90px; top:-90px; width:320px; height:320px; border-radius:50%;
  background:radial-gradient(circle, rgba(192,86,43,.28), transparent 68%);
}
.prime h2,.prime h3{ color:#fff; }
.prime__table{ position:relative; z-index:1; background:rgba(255,255,255,.05); border:1px solid var(--line-dark); border-radius:var(--radius); overflow:hidden; }
.prime__row{ display:flex; justify-content:space-between; gap:1rem; padding:.85rem 1.2rem; border-bottom:1px solid var(--line-dark); font-size:.93rem; }
.prime__row:last-child{ border-bottom:none; }
.prime__row span{ color:rgba(255,255,255,.72); }
.prime__row b{ color:#fff; font-weight:650; white-space:nowrap; }
.prime__row--head{ background:rgba(255,255,255,.05); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; }
.prime__row--head span,.prime__row--head b{ color:rgba(255,255,255,.5); font-weight:600; }
.prime__note{ font-size:.82rem; color:var(--slate-500); margin-top:1rem; }
.prime__note a{ color:#e5946a; text-decoration:underline; text-underline-offset:3px; }

/* ---------- Avis ---------- */
.review{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(24px,3vw,32px); }
.review__stars{ display:flex; gap:3px; margin-bottom:1rem; color:#e8a33d; }
.review__stars svg{ width:17px; height:17px; }
.review p{ font-size:1rem; color:var(--slate-700); }
.review__who{ display:flex; align-items:center; gap:.8rem; margin-top:1.4rem; }
.review__avatar{
  width:42px; height:42px; border-radius:50%; background:var(--accent-soft); color:var(--accent);
  display:grid; place-items:center; font-weight:700; font-size:.95rem; flex:none;
}
.review__who b{ display:block; font-size:.94rem; color:var(--ink); }
.review__who span{ font-size:.84rem; color:var(--slate-500); }

/* ---------- FAQ ---------- */
.faq{ max-width:820px; margin-inline:auto; border-top:1px solid var(--line); }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  background:none; border:none; padding:1.4rem 0; text-align:left; cursor:pointer;
  font-size:1.05rem; font-weight:620; color:var(--ink); letter-spacing:-.015em;
}
.faq__q:hover{ color:var(--accent); }
.faq__icon{ width:26px; height:26px; flex:none; position:relative; border-radius:50%; background:var(--mist-2); transition:background .25s; }
.faq__icon::before,.faq__icon::after{
  content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  background:var(--ink); border-radius:2px; transition:transform .3s ease, background .25s;
}
.faq__icon::before{ width:11px; height:1.8px; }
.faq__icon::after{ width:1.8px; height:11px; }
.faq__item.is-open .faq__icon{ background:var(--accent); }
.faq__item.is-open .faq__icon::before,.faq__item.is-open .faq__icon::after{ background:#fff; }
.faq__item.is-open .faq__icon::after{ transform:translate(-50%,-50%) rotate(90deg); }
.faq__a{ overflow:hidden; max-height:0; transition:max-height .35s ease; }
.faq__a > div{ padding-bottom:1.5rem; color:var(--slate-500); font-size:.99rem; max-width:70ch; }

/* ---------- Zone ---------- */
.zone{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.8rem; }
.zone span{
  padding:.5rem 1.05rem; border-radius:100px; border:1px solid var(--line);
  font-size:.9rem; color:var(--slate-700); background:var(--paper);
}
.zone span.is-main{ background:var(--ink); color:#fff; border-color:var(--ink); font-weight:600; }

/* ---------- Contact ---------- */
.contact{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(32px,4vw,64px); align-items:start; }
.contact__methods{ list-style:none; margin:2rem 0 0; padding:0; display:flex; flex-direction:column; gap:1.4rem; }
.contact__methods li{ display:flex; gap:1rem; align-items:flex-start; }
.contact__ico{
  width:44px; height:44px; border-radius:12px; background:rgba(255,255,255,.07); border:1px solid var(--line-dark);
  color:#e5946a; display:grid; place-items:center; flex:none;
}
.contact__ico svg{ width:20px; height:20px; }
.contact__methods b{ display:block; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--slate-500); margin-bottom:.15rem; }
.contact__methods a,.contact__methods p{ color:#fff; font-size:1.05rem; font-weight:600; margin:0; }
.contact__methods a:hover{ color:#e5946a; }
.contact__methods small{ display:block; color:var(--slate-500); font-weight:400; font-size:.85rem; margin-top:.2rem; }
/* Lien vers la fiche Google : il vit dans le <small>, il doit donc en
   prendre la taille plutôt que celle du numéro de téléphone. */
.contact__methods small a{ font-size:inherit; font-weight:500; color:#e5946a;
  text-decoration:underline; text-underline-offset:3px; }
.contact__methods small a:hover{ color:#fff; }

.section--dark .form h3{ color:var(--ink); }
.form{ background:var(--paper); border-radius:var(--radius-lg); padding:clamp(26px,3.5vw,40px); box-shadow:var(--shadow-lg); }
.form h3{ margin-bottom:.35rem; }
.form__intro{ color:var(--slate-500); font-size:.94rem; margin-bottom:1.7rem; }
.field{ margin-bottom:1.05rem; }
.field label{ display:block; font-size:.84rem; font-weight:600; color:var(--slate-700); margin-bottom:.4rem; }
.field label span{ color:var(--accent); }
.field input,.field select,.field textarea{
  width:100%; padding:.85rem 1rem; border:1.5px solid var(--line); border-radius:10px;
  font:inherit; font-size:.97rem; color:var(--ink); background:var(--paper);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.field textarea{ resize:vertical; min-height:118px; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 4px rgba(192,86,43,.12);
}
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.05rem; }
.form .btn{ width:100%; margin-top:.6rem; }
.form__legal{ font-size:.79rem; color:var(--slate-500); margin-top:1rem; text-align:center; }
.form__ok{
  display:none; background:var(--accent-soft); border:1px solid rgba(192,86,43,.25); color:var(--accent-hover);
  padding:1rem 1.2rem; border-radius:10px; font-size:.93rem; margin-bottom:1.2rem;
}
.form__ok.is-visible{ display:block; }
/* Même bandeau, en rouge, quand l'envoi n'a pas abouti. */
.form__ok--erreur{
  background:#fdeceb; border-color:rgba(176,42,42,.28); color:#8c2018;
}
.form__ok a{ color:inherit; text-decoration:underline; font-weight:640; }

/* ---------- CTA final ---------- */
.cta-band{ background:var(--accent); color:#fff; }
.cta-band__inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.8rem; padding-block:clamp(44px,5vw,64px); }
.cta-band h2{ color:#fff; margin:0; max-width:18ch; }
.cta-band p{ color:rgba(255,255,255,.86); margin:.6rem 0 0; max-width:44ch; }
.cta-band .btn--ghost-light{ border-color:rgba(255,255,255,.55); }

/* ---------- Pied de page ---------- */
.footer{ background:var(--ink); color:var(--slate-500); padding-block:clamp(50px,6vw,72px) 0; }
.footer__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:clamp(28px,4vw,48px); padding-bottom:3rem; }
.footer h4{ color:#fff; font-size:.78rem; letter-spacing:.13em; text-transform:uppercase; margin-bottom:1.1rem; font-weight:650; }
.footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6rem; }
.footer a{ font-size:.93rem; color:var(--slate-400); transition:color .2s; }
.footer a:hover{ color:#fff; }
.footer__about p{ font-size:.93rem; color:var(--slate-400); max-width:38ch; margin-top:1.1rem; }
.footer__bottom{
  border-top:1px solid var(--line-dark); padding-block:1.5rem;
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; font-size:.85rem;
}
.footer__social{ display:flex; gap:.6rem; margin-top:1.4rem; }
.footer__social a{
  width:38px; height:38px; border-radius:10px; border:1px solid var(--line-dark);
  display:grid; place-items:center; color:var(--slate-400);
}
.footer__social a:hover{ background:var(--accent); border-color:var(--accent); color:#fff; }
.footer__social svg{ width:18px; height:18px; }

/* ---------- Barre d'action mobile ---------- */
.mobile-bar{
  position:fixed; inset:auto 0 0 0; z-index:99; display:none; gap:1px; background:var(--line);
  box-shadow:0 -6px 24px rgba(16,19,24,.14); padding-bottom:env(safe-area-inset-bottom);
}
.mobile-bar a{
  flex:1; display:flex; align-items:center; justify-content:center; gap:.5rem;
  padding:1rem .6rem; font-weight:640; font-size:.94rem; background:var(--paper); color:var(--ink);
}
.mobile-bar a.is-primary{ background:var(--accent); color:#fff; }
.mobile-bar svg{ width:17px; height:17px; }

/* ---------- Animations d'apparition ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .65s cubic-bezier(.2,.7,.3,1), transform .65s cubic-bezier(.2,.7,.3,1); }
.reveal.is-in{ opacity:1; transform:none; }

/* ---------- Page intérieure (services) ---------- */
.pagehead{ background:var(--ink); color:#fff; padding:calc(78px + clamp(56px,7vw,96px)) 0 clamp(56px,7vw,88px); position:relative; overflow:hidden; }
.pagehead::after{
  content:""; position:absolute; right:-120px; top:-60px; width:460px; height:460px; border-radius:50%;
  background:radial-gradient(circle, rgba(192,86,43,.24), transparent 66%);
}
.pagehead__inner{ position:relative; z-index:1; }
.pagehead h1{ color:#fff; max-width:18ch; }
.pagehead p{ color:rgba(255,255,255,.75); max-width:58ch; font-size:1.08rem; }
.breadcrumb{ font-size:.85rem; color:var(--slate-500); margin-bottom:1.4rem; }
.breadcrumb a:hover{ color:#fff; }
.breadcrumb span{ margin-inline:.45rem; opacity:.5; }

.prose{ max-width:74ch; }
.prose h2{ font-size:clamp(1.55rem,2.6vw,1.95rem); margin-top:2.6rem; }
.prose h2:first-child{ margin-top:0; }
.prose h3{ font-size:clamp(1.05rem,1.7vw,1.18rem); margin-top:1.9rem; }
.prose ul{ padding-left:0; list-style:none; display:flex; flex-direction:column; gap:.6rem; margin:0 0 1.4rem; }
.prose ul li{ position:relative; padding-left:1.7rem; color:var(--slate-700); }
.prose ul li::before{
  content:""; position:absolute; left:0; top:.52em; width:8px; height:8px; border-radius:2px;
  background:var(--accent); transform:rotate(45deg);
}
.sidebox{
  background:var(--mist); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:clamp(24px,3vw,32px); position:sticky; top:100px;
}
.sidebox h3{ font-size:1.15rem; }
.sidebox p{ font-size:.94rem; color:var(--slate-500); }
.sidebox .btn{ width:100%; margin-bottom:.6rem; }
.layout-side{ display:grid; grid-template-columns:1fr 350px; gap:clamp(32px,5vw,64px); align-items:start; }

/* ---------- Responsive ---------- */
@media (max-width:1020px){
  .about,.contact,.prime,.layout-side{ grid-template-columns:1fr; }
  .sidebox{ position:static; }
  .about__media{ max-width:440px; }
  .hero__stats{ grid-template-columns:repeat(2,1fr); }
}
/* En-tête sur grand écran : le téléphone et le bouton n'apparaissent qu'au
   premier défilement, pour laisser la barre du haut respirer à l'ouverture.
   `visibility` est retardée d'autant que la transition afin que les deux liens
   sortent réellement de l'ordre de tabulation tant qu'ils sont invisibles. */
@media (min-width:861px){
  .header__phone, .header__cta .btn{
    opacity:0; transform:translateY(-8px); visibility:hidden; pointer-events:none;
    transition:opacity .3s ease, transform .3s cubic-bezier(.4,0,.2,1), visibility 0s .3s;
  }
  body.a-defile .header__phone,
  body.a-defile .header__cta .btn{
    opacity:1; transform:none; visibility:visible; pointer-events:auto;
    transition:opacity .3s ease, transform .3s cubic-bezier(.4,0,.2,1), visibility 0s 0s;
  }
}

@media (max-width:860px){
  .nav{
    position:fixed; top:78px; left:0; right:0; min-width:0;
    border-radius:0; border-left:0; border-right:0; border-top:0;
    padding:.6rem var(--pad) 1.2rem;
    max-height:calc(100vh - 78px); overflow-y:auto;
  }
  .nav a{ padding:.9rem .2rem; border-radius:0; border-bottom:1px solid var(--line); font-size:1.02rem; font-weight:600; }
  .nav a:last-child{ border-bottom:none; }
  body.nav-open .header{ background:#fff; border-bottom-color:transparent; }
  body.nav-open .logo__name{ color:var(--ink); }
  body.nav-open .logo__tag{ color:var(--slate-500); }
  body.nav-open .burger span::before,
  body.nav-open .burger span::after{ background:var(--ink); }
  .header__cta .btn, .header__phone{ display:none; }
  .mobile-bar{ display:flex; }
  /* La barre d'appel ne s'affiche qu'au premier défilement : à l'ouverture,
     le bas de l'écran reste noir et le hero respire. `visibility` est
     retardée pour que les deux liens ne soient pas atteignables au clavier
     tant que la barre est escamotée. */
  .mobile-bar{
    transform:translateY(110%); visibility:hidden;
    transition:transform .3s cubic-bezier(.4,0,.2,1), visibility 0s .3s;
  }
  body.a-defile .mobile-bar{
    transform:none; visibility:visible;
    transition:transform .3s cubic-bezier(.4,0,.2,1), visibility 0s 0s;
  }
  /* ---------- Hero mobile ----------
     La photo repasse en fond, plein cadre depuis le haut, et se coupe
     exactement 18 px au-dessus du bouton de devis. Le titre est posé dessus,
     calé juste au-dessus de la coupe ; les deux boutons sont sur le fond nu
     en dessous. Le badge et la bande de quatre chiffres sont retirés — leurs
     arguments sont repris par le bandeau de confiance juste en dessous.

     La coupe n'est pas un pourcentage : elle se calcule depuis le bas, ce qui
     la garde à 18 px du bouton sur tous les formats, d'un iPhone SE à un grand
     Android. Attention : .hero__poster EST l'image, pas un conteneur. */
  .hero{
    --bas:calc(60px + env(safe-area-inset-bottom) + 16px);  /* barre d'appel */
    --zbtn:64px;                                             /* les deux boutons, une seule rangée */
    --ecart:18px;                                            /* respiration sous la coupe */
    /* Le facteur 0,85 n'est pas cosmétique : à cette hauteur le navigateur
       cesse d'agrandir la photo et se met à la réduire (facteur 0,97 au lieu
       de 1,14 sur un iPhone 14). Réduire ne coûte aucune netteté ; agrandir en
       coûte beaucoup. Mesuré : la netteté des tuiles passe de 93 à 182. */
    --hphoto:calc((100% - var(--bas) - var(--zbtn) - var(--ecart)) * .85);
    min-height:100vh; min-height:100svh;
    padding-top:78px; padding-bottom:var(--bas);
    align-items:stretch;
  }
  /* (le badge est déjà masqué partout, voir la règle globale) */
  .hero .hero__stats{ display:none; }

  .hero__bg .hero__poster{
    display:block; position:absolute; inset:0 0 auto 0; width:100%;
    height:var(--hphoto);
    object-fit:cover; object-position:58% 42%;
    -webkit-mask-image:linear-gradient(180deg, #000 82%, transparent 100%);
            mask-image:linear-gradient(180deg, #000 82%, transparent 100%);
  }
  .hero__bg{
    background:
      radial-gradient(96% 26% at 70% 82%, rgba(232,152,108,.12), transparent 72%),
      linear-gradient(180deg, #0d1016 0%, #14171f 46%, #1c1a22 78%, #292025 100%);
  }
  /* (le voile est défini une seule fois, plus haut, pour les deux tailles) */

  .hero__inner{ display:flex; flex-direction:column; }
  .hero__inner::before{ content:""; flex:1 1 0; min-height:8px; }
  /* La marge sous le titre le remonte : les boutons sont ancrés en bas. */
  .hero h1{ margin-bottom:calc(var(--ecart) + 38px); }
  /* (l'ombre portée du titre est définie pour tous les écrans, plus haut) */
  .hero__actions{ flex:none; margin-bottom:0; }

  /* ---------- Repère vers la tuile, version mobile ----------
     Le point vise le pixel source (1114, 455), en plein champ de tuiles.
     L'abscisse 1114 = 0,58 × 1920 n'est pas un hasard : c'est le point fixe
     du recadrage `object-position:58%`. À cette abscisse-là, et à elle seule,
     la position à l'écran ne dépend plus du rapport de forme du téléphone —
     elle vaut 58 % de la largeur sur tous les formats. L'ordonnée suit la
     hauteur de la photo, puisque le recadrage est piloté par la hauteur.
     Les 98 px et 85 px retranchés placent le POINT, et non le bloc, sur la
     cible : le point est en bas à gauche du dessin. */
  .hero__annot{
    display:flex; left:auto; right:calc(42% - 98px);
    top:calc(var(--hphoto) * .415 - 106px);   /* 85 + 21 : la ligne défilante */
    color:rgba(255,255,255,.74);
  }
  .hero__annot-txt{ font-size:.64rem; letter-spacing:.13em; margin-bottom:.3rem; }
  .hero__annot-fil{ width:104px; height:76px; }
  .hero__annot-qual{ height:14px; width:205px; }
  .hero__annot-qual li{ font-size:.61rem; }

/* Écrans très courts (iPhone SE de 1re génération et assimilés) : le bloc du
   repère remontait au-dessus de l'en-tête et l'étiquette venait chevaucher le
   logo. On y renonce à la ligne défilante et on raccourcit le fil ; le point,
   lui, ne bouge pas — les 33 px gagnés au-dessus sont rendus à l'offset. */
@media (max-width:860px) and (max-height:620px){
  .hero__annot-qual{ display:none; }
  .hero__annot-fil{ width:88px; height:64px; }
  .hero__annot{ top:calc(var(--hphoto) * .415 - 73px); }
}
/* En dessous de 500 px de haut — téléphone couché, fenêtre écrasée — il n'y a
   plus la place : le repère chevaucherait le logo quoi qu'on fasse. */
@media (max-height:500px){ .hero__annot{ display:none; } }

  body{ padding-bottom:60px; }
  .gallery__item:nth-child(1),.gallery__item:nth-child(6){ grid-column:span 1; aspect-ratio:4/3; }
  .footer__grid{ grid-template-columns:1fr 1fr; }
  .about__stamp{ right:12px; }
}
/* Entre 541 et 860 px les deux boutons tiennent sur une seule ligne :
   la zone à réserver sous la coupe est bien plus basse. */
@media (min-width:541px) and (max-width:860px){
  .hero{ --zbtn:64px; }
}
/* Écrans courts : boutons un peu plus plats, titre d'un cran en dessous. */
@media (max-width:860px) and (max-height:760px){
  .hero{ --zbtn:55px; }
  .hero h1{ font-size:1.9rem; }
  .hero__actions .btn{ padding-block:.8rem; }
}
@media (max-width:540px){
  body{ font-size:16px; }
  .field-row{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr; }
  .trust__inner{ gap:.7rem 1.4rem; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
}


/* ---------- Hero : bloc titre + boutons resserré de 7,5 % (ordinateur) ----------
   Sur un écran réel le bloc paraissait plus haut que dans les aperçus. On reprend
   16 px sur les 219 qu'occupaient le titre, sa marge et les deux boutons :
   titre 56 → 52 px, marge 32 → 30, boutons 64 → 59. Le mobile n'est pas touché,
   sa composition élastique est calée au pixel près.
   Ces règles sont en fin de feuille à dessein : à spécificité égale c'est la
   dernière qui gagne, et elles doivent écraser les définitions de base. */
@media (min-width:861px){
  .hero h1{ font-size:clamp(1.9rem, 4.53vw, 3.24rem); margin-bottom:1.85rem; }
  .hero .btn--lg{ padding-top:.95rem; padding-bottom:.95rem; }
}


/* ---------- Cartes de service avec photo ----------
   La photo remplace le pictogramme : elle occupe le haut de la carte en 16:9 et
   porte le titre en surimpression. Le dégradé sous le titre n'est pas décoratif —
   sans lui, un ciel clair fait tomber le contraste du blanc sous le seuil WCAG.
   Mesuré sur les six photos : de 7,1 à 15,4 pour 1, et jamais moins de 4,0 sur
   le pire pixel.
   `aspect-ratio` plus `width`/`height` sur l'image réservent la place avant le
   chargement : la page ne saute pas quand les photos arrivent.
   En fin de feuille à dessein : ces règles doivent écraser `.card`. */
.card--photo{ padding:0; overflow:hidden; }
.card__ph{ position:relative; aspect-ratio:16/9; overflow:hidden; }
.card__ph img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .55s cubic-bezier(.2,.6,.2,1); }
.card--photo:hover .card__ph img{ transform:scale(1.045); }
.card__ph::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(16,19,24,0) 34%, rgba(16,19,24,.38) 62%,
                                     rgba(16,19,24,.82) 100%); }
.card__titre{ position:absolute; left:clamp(20px,2.2vw,24px); right:18px; bottom:13px;
  z-index:2; margin:0; color:#fff; font-size:1.13rem; font-weight:660;
  letter-spacing:-.015em; line-height:1.25; text-shadow:0 1px 10px rgba(6,8,12,.6); }
.card__bd{ padding:clamp(22px,2.4vw,26px) clamp(24px,2.6vw,30px) clamp(24px,2.6vw,30px);
  display:flex; flex-direction:column; flex:1; position:relative; z-index:1; }
.card--photo p{ color:var(--slate-500); font-size:.97rem; margin-bottom:1.2rem; }
@media (prefers-reduced-motion:reduce){
  .card--photo:hover .card__ph img{ transform:none; }
}


/* ---------- À propos : deux photos qui défilent ----------
   Le défilement natif du navigateur fait tout le travail : `scroll-snap` cale
   chaque photo au pixel, et le geste tactile est celui du système — pas une
   imitation en JavaScript. Les flèches et les points ne font que piloter ce
   même défilement, donc tout reste cohérent quoi qu'on fasse.
   Les flèches n'apparaissent qu'au survol, et disparaissent complètement sur
   écran tactile : là, c'est le doigt qui commande.
   En fin de feuille à dessein. */
.about__piste{
  display:flex; height:100%; overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; scrollbar-width:none; -ms-overflow-style:none;
}
.about__piste::-webkit-scrollbar{ display:none; }
.about__vue{ flex:0 0 100%; height:100%; margin:0; scroll-snap-align:center; }
.about__vue img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Deux bulles centrées sous la photo. Le bouton fait 24 px pour rester
   attrapable au doigt, mais seule la bulle de 9 px se voit : la cible tactile
   ne doit pas dicter le dessin. */
.about__pts{
  position:absolute; left:0; right:0; bottom:16px; z-index:3;
  display:flex; justify-content:center; gap:14px;
}
.about__pt{
  width:24px; height:24px; padding:0; border:0; background:none; cursor:pointer;
  display:grid; place-items:center;
}
.about__pt::before{
  content:""; width:8px; height:8px; border-radius:50%;
  background:rgba(255,255,255,.48); box-shadow:0 1px 3px rgba(6,8,12,.3);
  transition:background .3s ease;
}
.about__pt.is-actif::before{ background:rgba(255,255,255,.92); }
.about__pt:focus-visible{ outline:2px solid #fff; outline-offset:-2px; border-radius:50%; }

@media (prefers-reduced-motion:reduce){ .about__piste{ scroll-behavior:auto; } }


/* ---------- Débordement horizontal à 320 px ----------
   La page glissait latéralement de 11 px sur un écran de 320. Deux causes,
   toutes deux dans la section Contact :

   1. `grid-template-columns:1fr` vaut `minmax(auto,1fr)` : la piste refuse de
      descendre sous la largeur minimale de son contenu. `minmax(0,1fr)` lève
      cette limite. C'est le même piège que les deux boutons du hero.
   2. Une fois la piste libre, c'est l'adresse e-mail qui débordait : un mot de
      27 caractères sans espace n'offre aucun endroit où couper. `anywhere`
      autorise la coupure ; contrairement à `break-word`, il compte aussi dans
      le calcul de la largeur minimale, ce qui est précisément ce qu'il faut ici.

   `min-width:0` sur les enfants de grille et sur la colonne de texte du bloc
   coordonnées : sans lui, la valeur `auto` par défaut réintroduit le plancher.

   Contrôlé de 320 à 1440 px : plus aucun débordement, et les grilles à deux
   colonnes des grands écrans sont inchangées. */
@media (max-width:1020px){
  .about, .contact, .prime, .layout-side{ grid-template-columns:minmax(0,1fr); }
}
.about > *, .contact > *, .prime > *, .layout-side > *{ min-width:0; }
.contact__methods li > div{ min-width:0; }
.contact__methods a{ overflow-wrap:anywhere; }


/* ---------- À propos : les quatre repères, empilés ----------
   Plus de coche ni de description : quatre mentions en petites capitales
   espacées, l'une sous l'autre, chacune précédée d'un point terracotta de
   quatre pixels. C'est la typographie des surtitres du site (« À PROPOS »,
   « NOS SERVICES »), reprise ici en plus petit — donc rien de nouveau à
   apprendre pour l'œil.
   Empilées plutôt qu'en ligne : sur une seule ligne, les quatre débordaient et
   la quatrième retombait seule en dessous, ce qui déséquilibrait le bloc.
   La photo reste en colonne 0,8 contre 1,2 pour que les deux colonnes se
   terminent ensemble. */
@media (min-width:1021px){
  .about{ grid-template-columns:.8fr 1.2fr; }
}
.about__points{
  display:flex; flex-direction:column; gap:.8rem;
  margin:1.8rem 0 2rem; padding:0; list-style:none;
}
.about__points li{
  display:flex; align-items:center; gap:.85rem;
  font-size:.8rem; font-weight:640; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink);
}
.about__points li::before{
  content:""; width:4px; height:4px; border-radius:50%;
  background:var(--accent); flex:none;
}


/* ---------- Galerie : grille régulière + bouton « voir plus » ----------
   Six chantiers affichés, les suivants masqués derrière un bouton. Toutes les
   tuiles sont au même format 4:3 et de même taille : plus de première et de
   sixième tuiles doublées, qui obligeaient à choisir deux photos « fortes » et
   laissaient un trou dès que le compte ne tombait pas juste.
   Le bouton reste `hidden` tant qu'aucune tuile n'est masquée — c'est le script
   qui le révèle. Une galerie de six photos n'affiche donc aucun bouton inutile.
   En fin de feuille pour écraser les règles d'origine de `.gallery`. */
.gallery{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.gallery__item{ aspect-ratio:4/3; border-radius:12px; }
.gallery__item:nth-child(1),
.gallery__item:nth-child(6){ grid-column:auto; aspect-ratio:4/3; }
.gallery__item[hidden]{ display:none; }
.gallery__item figcaption{ padding:1.5rem .95rem .75rem; font-size:.85rem; }
.gallery__plus{ display:flex; justify-content:center; margin-top:26px; }
.gallery__plus button[hidden]{ display:none; }
@media (max-width:820px){ .gallery{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px){ .gallery{ grid-template-columns:minmax(0,1fr); } }


/* ==========================================================================
   Jour et heure du rendez-vous (formulaire de devis).
   En semaine 17h00 ou 18h00, le samedi et le dimanche 10h00.
   Ajouté en fin de feuille : à spécificité égale, la dernière règle gagne.
   ========================================================================== */
/* Jour et heure côte à côte : la date à gauche, la liste des créneaux à
   droite. Une liste déroulante tient les vingt-trois demi-heures sans
   encombrer le formulaire, et sur téléphone elle ouvre le sélecteur natif. */
.rdv{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,190px); gap:.7rem; }
.rdv > input[type="date"]{ width:100%; min-width:0; }
.rdv select{
  width:100%; min-width:0; appearance:none; -webkit-appearance:none;
  padding-right:2.5rem; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234d5156' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;
  background-position:right .95rem center; background-size:15px;
}
.rdv__aide{ font-size:.81rem; color:var(--slate-500); margin-top:.55rem; line-height:1.45; }
.rdv__aide b{ color:var(--ink); font-weight:640; }
@media (max-width:520px){
  .rdv{ grid-template-columns:minmax(0,1fr); }
}

/* Titres de groupe dans le formulaire de devis */
.form__groupe{
  font-size:.75rem; font-weight:650; letter-spacing:.13em; text-transform:uppercase;
  color:var(--slate-500); margin:0 0 .85rem; padding-bottom:.6rem;
  border-bottom:1px solid var(--line);
}
.form__groupe + .field, .form__groupe + .field-row{ margin-top:0; }
.field-row + .form__groupe, .field + .form__groupe{ margin-top:1.6rem; }


/* ==========================================================================
   Formulaire de devis en deux étapes.
   Étape 1 : quand et où. Étape 2 : qui vous êtes.
   Les deux volets sont côte à côte sur une piste deux fois plus large que le
   cadre ; on fait glisser la piste vers la gauche pour passer au second.
   Le cadre est donc deux fois moins haut, et le visiteur ne voit jamais
   qu'une poignée de champs à la fois.
   ========================================================================== */

/* En-tête d'étape */
.etapes__tete{ margin:.9rem 0 1.6rem; }
.etapes__rang{
  font-size:.75rem; font-weight:650; letter-spacing:.11em; text-transform:uppercase;
  color:var(--slate-500); margin:0 0 .6rem;
}
.etapes__rang b{ color:var(--ink); font-weight:700; }
.etapes__barre{ height:3px; border-radius:999px; background:var(--mist-2); overflow:hidden; }
.etapes__barre i{
  display:block; height:100%; width:50%; border-radius:999px; background:var(--accent);
  transition:width .42s cubic-bezier(.2,.7,.3,1);
}

/* Piste et volets */
.etapes{
  /* Le débordement est masqué pour cacher le volet suivant. Les marges
     négatives, combinées à `content-box`, rendent la zone masquée un peu plus
     grande que les champs : le halo de focus et l'ombre du bouton ne sont donc
     pas coupés net sur les bords. */
  box-sizing:content-box;
  margin:-8px -26px -44px; padding:8px 26px 44px;
  overflow:hidden;
  transition:height .42s cubic-bezier(.2,.7,.3,1);
}
.etapes__piste{
  display:flex; align-items:flex-start; width:200%;
  transition:transform .42s cubic-bezier(.2,.7,.3,1);
}
.etapes__piste.est-a-deux{ transform:translateX(-50%); }
.etape{ flex:0 0 50%; min-width:0; visibility:hidden; }
.etape.est-active,
.etapes__piste.bouge .etape{ visibility:visible; }
.etape > .form__groupe:first-child{ margin-top:0; }

/* Boutons de navigation entre les étapes */
.etape__nav{ margin-top:1.5rem; }
.etape__nav--deux{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:.7rem; }
.form .etape__nav .btn{ width:100%; margin-top:0; }
.form .etape__nav--deux .btn--ghost{ padding-inline:1.4rem; }
.form .etape__nav--deux .btn--ghost svg{ margin-right:-.2rem; }

@media (max-width:420px){
  .etape__nav--deux{ grid-template-columns:minmax(0,1fr); }
}

/* Sans animation pour les visiteurs qui la refusent dans leur système */
@media (prefers-reduced-motion:reduce){
  .etapes, .etapes__piste, .etapes__barre i{ transition:none; }
}


/* ==========================================================================
   Petits écrans : le formulaire d'abord, les coordonnées ensuite.
   Sur téléphone, la colonne de gauche passait au-dessus du formulaire et il
   fallait défiler longtemps avant d'atteindre le premier champ. On garde donc
   le titre en tête, puis vient le formulaire, et le téléphone, l'e-mail et la
   zone d'intervention se retrouvent juste en dessous — à portée de pouce pour
   celui qui préfère appeler plutôt qu'écrire.
   `display:contents` dissout le bloc de gauche : ses éléments deviennent des
   cases de la grille et peuvent être réordonnés un par un.
   ========================================================================== */
@media (max-width:1020px){
  .contact{ gap:0; }
  .contact > div{ display:contents; }
  .contact > div > *{ min-width:0; }

  .contact .eyebrow{ order:1; }
  .contact h2{ order:2; }
  .contact .lede{ order:3; }
  .contact .form{ order:4; margin-top:1.7rem; }
  .contact__methods{ order:5; margin-top:2.4rem; }
}


/* Bouton d'appel sous les quatre étapes du parcours, centré. */
.steps__cta{ display:flex; justify-content:center; margin-top:clamp(34px,4vw,52px); }
@media (max-width:520px){ .steps__cta .btn{ width:100%; justify-content:center; } }


/* ==========================================================================
   Estimateur de prix — page « Toiture complète ».
   Le cadre reprend celui du formulaire de devis : mêmes champs, même
   en-tête d'étape. Les étapes s'affichent l'une après l'autre, sans
   glissement latéral : elles sont trop hautes pour être animées sans
   secouer la page.
   ========================================================================== */
.form--calc{ max-width:820px; margin-inline:auto; }
.calc__etape{ display:none; }
.calc__etape.est-active{ display:block; }
.calc__etape > .form__groupe:first-child{ margin-top:0; }

.calc__aide{
  font-size:.86rem; color:var(--slate-500); line-height:1.55;
  margin:.9rem 0 0; padding-left:.9rem; border-left:2px solid var(--line);
}
.calc__erreur{
  background:#fdeceb; border:1px solid rgba(176,42,42,.28); color:#8c2018;
  padding:.85rem 1.1rem; border-radius:10px; font-size:.92rem; margin:0 0 1.2rem;
}
.calc__erreur[hidden]{ display:none; }

/* Les modèles de couverture, en pastilles */
.calc__modeles{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.2rem; }
.calc__modele{
  padding:.62rem 1.1rem; border-radius:999px; cursor:pointer;
  font:inherit; font-size:.92rem; font-weight:600;
  border:1.5px solid var(--line); background:var(--mist); color:var(--slate-700);
  transition:border-color .18s ease, background .18s ease, color .18s ease;
}
.calc__modele:hover{ border-color:var(--accent); color:var(--accent); }
.calc__modele.est-choisi{ border-color:var(--accent); background:var(--accent); color:#fff; }

.calc__nav{ display:flex; gap:.7rem; margin-top:1.8rem; }
.form .calc__nav .btn{ width:auto; flex:1 1 0; margin-top:0; }
.form .calc__nav .btn[hidden]{ display:none; }
.form .calc__recommencer{ width:auto; margin-top:1.6rem; }

/* ---------- Le devis affiché à la fin ---------- */
.devis__tete{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1rem 1.6rem; padding-bottom:1.2rem; border-bottom:1px solid var(--line);
}
.devis__eyebrow{
  font-size:.72rem; font-weight:650; letter-spacing:.13em; text-transform:uppercase;
  color:var(--accent); margin:0 0 .25rem;
}
.devis__tete h3{ margin:0; font-size:1.25rem; }
.devis__modele{ margin:.2rem 0 0; font-size:.88rem; color:var(--slate-500); }
.devis__surface{ text-align:right; }
.devis__surface span{ display:block; font-size:1.6rem; font-weight:800; color:var(--ink); line-height:1.1; }
.devis__surface small{ font-size:.78rem; color:var(--slate-500); }

.devis__table{ width:100%; border-collapse:collapse; margin-top:1.4rem; font-size:.94rem; }
.devis__table th, .devis__table td{ padding:.8rem .7rem; text-align:left; vertical-align:top; }
.devis__table thead th{
  font-size:.72rem; font-weight:650; letter-spacing:.11em; text-transform:uppercase;
  color:var(--slate-500); border-bottom:1px solid var(--line); padding-bottom:.6rem;
}
.devis__table tbody tr + tr td{ border-top:1px dashed var(--line); }

/* Les catégories : installation de chantier, charpente, isolation… */
.devis__groupe + .devis__groupe .devis__cat th,
.devis__groupe + .devis__groupe .devis__cat td{ padding-top:1.6rem; }
.devis__cat th{
  font-size:.78rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink); padding-bottom:.5rem;
}
.devis__cat td{
  font-size:.9rem; font-weight:700; color:var(--slate-700); padding-bottom:.5rem;
  border-bottom:1px solid var(--line);
}
.devis__cat th{ border-bottom:1px solid var(--line); }
.devis__cat-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; margin-right:.55rem; border-radius:99px;
  background:var(--accent); color:#fff; font-size:.7rem; font-weight:800;
  letter-spacing:0; vertical-align:middle;
}
.devis__groupe tr:nth-child(2) td{ border-top:0; padding-top:.7rem; }
.devis__table tbody td{ color:var(--slate-700); }
.devis__qte{ color:var(--slate-500); white-space:nowrap; }
.devis__table .a-droite{ text-align:right; white-space:nowrap; }
.devis__table tfoot th{ font-weight:600; color:var(--slate-500); font-size:.9rem; }
.devis__table tfoot tr:first-child th,
.devis__table tfoot tr:first-child td{ border-top:1px solid var(--line); padding-top:1rem; }
.devis__total th, .devis__total td{
  font-size:1.12rem; font-weight:800; color:var(--ink);
  border-top:2px solid var(--ink); padding-top:.9rem;
}
/* Le bandeau de la prime, dans le devis */
.devis__prime{
  display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.6rem;
  margin-top:1.5rem; padding:1.1rem 1.3rem; border-radius:12px;
  background:#eaf3ec; border:1px solid rgba(31,91,52,.18);
}
.devis__prime-txt{ flex:1 1 260px; font-size:.88rem; line-height:1.6; color:#1f5b34; }
.devis__prime-txt b{ font-weight:800; }
.devis__prime-montant{ text-align:right; }
.devis__prime-montant b{ display:block; font-size:1.25rem; font-weight:800; color:#1f5b34; }
.devis__prime-montant small{ font-size:.76rem; color:#3d7a52; }
@media (max-width:620px){
  .devis__prime-montant{ text-align:left; }
}

.devis__avis{
  margin-top:1.5rem; padding:1.05rem 1.2rem; border-radius:12px;
  background:var(--mist); color:var(--slate-700); font-size:.88rem; line-height:1.6;
}
.devis__actions{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.5rem; }
.form .devis__actions .btn{ width:auto; margin-top:0; }

@media (max-width:620px){
  .devis__tete{ flex-direction:column; align-items:flex-start; }
  .devis__surface{ text-align:left; }
  .calc__nav{ flex-direction:column-reverse; }
  .devis__table{ font-size:.87rem; }
  .devis__table th, .devis__table td{ padding:.65rem .35rem; }
  .form .devis__actions .btn{ width:100%; }
}


/* ---------- Choix illustrés de l'estimateur (gouttières, planches) ---------- */
.calc__choix{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:clamp(12px,1.6vw,18px); margin-top:1.2rem;
}
.calc__carte{
  display:flex; flex-direction:column; text-align:left; cursor:pointer;
  padding:0 0 1rem; border:1.5px solid var(--line); border-radius:var(--radius);
  background:var(--paper); font:inherit; overflow:hidden;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.calc__carte:hover{ border-color:rgba(16,19,24,.24); box-shadow:var(--shadow-lg); transform:translateY(-2px); }
.calc__carte:focus-visible{ outline:none; box-shadow:0 0 0 4px rgba(192,86,43,.16); }
.calc__carte img{ display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; }
.calc__carte-nom{
  display:block; margin:.75rem 1rem .1rem; font-size:.98rem; font-weight:700; color:var(--ink);
}
.calc__carte-txt{ display:block; margin:0 1rem; font-size:.85rem; line-height:1.5; color:var(--slate-500); }

.calc__carte.est-choisi{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(192,86,43,.16); }
.calc__carte[hidden]{ display:none; }

/* Vignette dessinée à l'échelle (modèles de couverture) */
.calc__vignette{ position:relative; display:block; aspect-ratio:3/2; overflow:hidden; }
.calc__vignette svg{ display:block; width:100%; height:100%; }
.calc__vignette i{
  position:absolute; right:8px; bottom:8px; font-style:normal;
  font-size:.62rem; letter-spacing:.07em; text-transform:uppercase;
  color:rgba(255,255,255,.82); background:rgba(16,19,24,.42);
  padding:.18rem .45rem; border-radius:99px;
}
/* Pastilles de coloris, sous la vignette */
.calc__pastilles{ display:flex; flex-wrap:wrap; gap:.4rem; margin:.85rem 1rem 0; }
.calc__pastille{
  width:22px; height:22px; border-radius:99px; cursor:pointer;
  border:2px solid var(--paper); box-shadow:0 0 0 1.5px var(--line);
  transition:box-shadow .15s ease, transform .15s ease;
}
.calc__pastille:hover{ transform:scale(1.12); box-shadow:0 0 0 1.5px var(--slate-400); }
.calc__pastille.est-choisie{ box-shadow:0 0 0 2px var(--accent); }
.calc__carte-couleur{
  display:block; margin:.1rem 1rem .2rem; font-size:.82rem; color:var(--accent-hover); font-weight:600;
}
.calc__carte-specs{
  display:block; margin:.15rem 1rem 0; font-size:.8rem; line-height:1.5; color:var(--slate-500);
}
.calc__carte-alerte{
  display:block; margin:.5rem 1rem 0; padding:.4rem .6rem; border-radius:8px;
  background:#fdeceb; color:#8c2018; font-size:.78rem; line-height:1.4;
}
.calc__carte-alerte[hidden]{ display:none; }
/* Le prix de l'option, calculé sur les mesures encodées */
.calc__carte-prix{
  display:block; margin:.85rem 1rem 0; padding-top:.7rem; border-top:1px solid var(--line);
}
.calc__carte-prix:empty{ display:none; }
/* Le rappel de la Prime Habitation, sur les vignettes d'isolation */
.calc__prime{
  display:block; margin-top:.5rem; padding:.4rem .6rem; border-radius:8px;
  background:#eaf3ec; color:#1f5b34; font-size:.79rem; font-style:normal; line-height:1.45;
}
.calc__carte-prix .calc__prime b,
.calc__carte.est-choisi .calc__carte-prix .calc__prime b{ display:block; font-weight:800; color:#1f5b34; font-size:1rem; margin:.1rem 0; }
.calc__carte-prix b{ display:block; font-size:1.12rem; font-weight:800; color:var(--ink); }
.calc__carte-prix small{ display:block; font-size:.76rem; color:var(--slate-500); margin-top:.1rem; }
.calc__carte.est-choisi .calc__carte-prix b{ color:var(--accent-hover); }
.calc__choix--modeles{ grid-template-columns:repeat(auto-fit,minmax(205px,1fr)); }
/* Intertitre de famille dans la grille des couvertures : il occupe toute la
   largeur et sépare tuiles, ardoises naturelles et ardoises artificielles. */
.calc__famille{
  grid-column:1/-1; margin:.6rem 0 -.2rem; font-family:var(--font-titre,inherit);
  font-size:.78rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:var(--slate-500); padding-bottom:.45rem; border-bottom:1px solid var(--mist-2);
}
.calc__famille:first-child{ margin-top:0; }

/* Quand toutes les options coûtent la même chose */
.calc__prix-commun{
  margin:1.1rem 0 0; padding:.85rem 1.1rem; border-radius:10px;
  background:var(--accent-soft); color:var(--slate-700); font-size:.92rem;
}
.calc__prix-commun[hidden]{ display:none; }
.calc__prix-commun b{ color:var(--accent-hover); font-weight:800; }
.calc__prix-commun span{ color:var(--slate-500); }
.calc__prix-commun + .calc__choix{ margin-top:.9rem; }
.calc__carte.est-choisi .calc__carte-nom{ color:var(--accent-hover); }
/* La pastille de validation, en haut à droite de la vignette */
.calc__carte.est-choisi img{ opacity:.97; }
.calc__carte.est-choisi::before{
  content:"✓"; position:absolute; top:.7rem; left:.7rem; z-index:2;
  width:28px; height:28px; border-radius:99px; background:var(--accent); color:#fff;
  font-size:.9rem; font-weight:800; display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 12px rgba(16,19,24,.28);
}
.calc__carte{ position:relative; }

/* ============================================================
   Bandeau « Dans toute la Wallonie », entre le hero et Services.
   Sur téléphone il s'empile ; à partir de 861 px il passe sur une
   ligne, le ruban de communes occupant la place qui reste.
   ============================================================ */
.zone{ margin:0; background:var(--ink); color:#fff; padding:1.6rem 0 1.5rem; overflow:hidden; }
.zone__inner{ text-align:center; }

.zone__titre{
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  margin:0 0 .95rem; font-size:1.06rem; font-weight:700; letter-spacing:-.01em;
}
/* La camionnette donne le ton du bandeau : un peu plus grande que le texte. */
.zone__camion{ width:38px; height:29px; color:var(--accent); flex:none; }

/* Le ruban défile en boucle. Il est dupliqué dans le HTML : la moitié
   suffit à faire un tour complet, d'où le translateX(-50%). */
.zone__piste{
  position:relative; margin:0 -1.2rem;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.zone__ruban{ display:flex; gap:.5rem; width:max-content; animation:zoneDefile 34s linear infinite; }
.zone__ruban span{
  padding:.34rem .82rem; border-radius:100px; white-space:nowrap;
  border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.05);
  font-size:.83rem; color:rgba(255,255,255,.82);
}
@keyframes zoneDefile{ to{ transform:translateX(-50%); } }

/* Les communes qui ont leur page sont des liens, mais rien ne les
   distingue des autres jetons : même bordure, même fond, même couleur,
   au repos comme au survol. */
.zone__ruban a{
  padding:.34rem .82rem; border-radius:100px; white-space:nowrap;
  border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.05);
  font-size:.83rem; color:rgba(255,255,255,.82); text-decoration:none;
}
/* Le ruban s'arrête quand on le survole : sans cela, la commune se dérobe
   sous le curseur avant qu'on ait pu cliquer dessus. */
.zone__piste:hover .zone__ruban{ animation-play-state:paused; }

/* --- Blog ---------------------------------------------------------------
   La date d'un article, discrète, au-dessus du résumé. */
.blog__date{
  margin:0 0 .5rem; font-size:.74rem; font-weight:650; letter-spacing:.1em;
  text-transform:uppercase; color:var(--slate-400);
}
.blog__date time{ color:inherit; }

/* --- Articles du blog ---------------------------------------------------
   Une colonne de lecture plus étroite que le reste du site : au-delà de
   70 caractères par ligne, l'œil perd le début de la ligne suivante. */
.container--texte{ max-width:760px; }
.container--texte h2{ margin-bottom:.8rem; }
.container--texte p{ margin:0 0 1rem; }

/* Les puces d'un article respirent plus que celles d'une page de service. */
.svc__liste--large li{ margin-bottom:.7rem; }

/* La date et la signature, sous le titre de l'article. */
/* Une photo seule, hors de la mise en page à deux colonnes. */
.svc__figure--seule{ margin:0; }
.svc__figure--seule img{ width:100%; height:auto; display:block; }

.article__meta{
  margin:.2rem 0 1.1rem; font-size:.8rem; letter-spacing:.06em;
  text-transform:uppercase; font-weight:600; color:rgba(255,255,255,.5);
}



.zone__note{ margin:.95rem 0 0; font-size:.82rem; line-height:1.5; color:rgba(255,255,255,.55); }

@media (min-width:861px){
  .zone{ padding:1.5rem 0; }
  /* Deux colonnes : le message à gauche, le ruban à droite sur toute la
     hauteur. Le trait vertical sépare la promesse des communes. */
  .zone__inner{
    display:grid; grid-template-columns:max-content 1fr; align-items:center;
    gap:.2rem 2.4rem; text-align:left;
  }
  .zone__titre{
    grid-column:1; grid-row:1; margin:0; justify-content:flex-start;
    font-size:1.12rem; white-space:nowrap;
  }
  .zone__note{ grid-column:1; grid-row:2; margin:.3rem 0 0; max-width:31ch; }
  /* Pas de trait de séparation ici : le masque qui fait disparaître le ruban
     en fondu effacerait aussi la bordure. L'écart suffit à séparer. */
  .zone__piste{
    grid-column:2; grid-row:1 / span 2; margin:0;
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 86%, transparent);
            mask-image:linear-gradient(90deg, transparent, #000 7%, #000 86%, transparent);
  }
}

/* Le ruban ne bouge pas pour qui a désactivé les animations. */
@media (prefers-reduced-motion:reduce){
  .zone__ruban{ animation:none; flex-wrap:wrap; width:auto; justify-content:center; }
  .zone__piste{ mask-image:none; -webkit-mask-image:none; margin:0; }
}

/* ==========================================================================
   PAGES DE SERVICE — mise en page refondue
   En-tête avec repères, texte accompagné d'une photo, déroulement du
   chantier, options, bande sombre « bon à savoir ».
   ========================================================================== */

/* --- Repères et boutons dans l'en-tête de page ------------------------- */
.pagehead--svc p{ margin-bottom:0; }

.svc__reperes{
  list-style:none; margin:1.9rem 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:.7rem 1.8rem;
}
.svc__reperes li{
  display:flex; align-items:center; gap:.55rem;
  font-size:.92rem; font-weight:550; color:rgba(255,255,255,.86);
}
.svc__reperes svg{ width:16px; height:16px; flex:none; color:var(--accent); }

.svc__actions{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2.1rem; }

/* --- Texte + photo ----------------------------------------------------- */
.svc__deux{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(32px,4vw,60px); align-items:start;
}
.svc__texte h2{ margin-top:0; }
.svc__texte h3{
  margin:2.2rem 0 .9rem; font-size:1.02rem; font-weight:750;
  letter-spacing:.02em; text-transform:uppercase; color:var(--slate-500);
}
.svc__texte p{ color:var(--slate-700); }

.svc__liste{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6rem; }
.svc__liste li{ position:relative; padding-left:1.7rem; color:var(--slate-700); }
.svc__liste li::before{
  content:""; position:absolute; left:0; top:.52em; width:8px; height:8px;
  border-radius:2px; background:var(--accent); transform:rotate(45deg);
}

/* La photo suit la lecture sur grand écran, sans jamais dépasser l'écran. */
.svc__figure{
  margin:0; position:sticky; top:100px;
  border-radius:var(--radius-lg); overflow:hidden;
  background:var(--mist-2); box-shadow:var(--shadow-md);
}
.svc__figure img{ display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; }
.svc__figure figcaption{
  padding:.9rem 1.1rem 1rem; font-size:.85rem; line-height:1.55; color:var(--slate-500);
  background:#fff; border-top:1px solid var(--line);
}

/* --- Cartes d'options -------------------------------------------------- */
.svc__opt h3{ font-size:1.12rem; margin-bottom:.6rem; }
.svc__opt > p{ font-size:.94rem; color:var(--slate-500); margin-bottom:1.1rem; }
.svc__points{ list-style:none; margin:0; padding:1.05rem 0 0; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:.5rem; }
.svc__points li{ display:flex; align-items:flex-start; gap:.55rem; font-size:.88rem; color:var(--slate-700); }
.svc__points svg{ width:15px; height:15px; flex:none; margin-top:.22em; color:var(--accent); }

/* --- Bande sombre « bon à savoir » ------------------------------------- */
.svc__bande-inner{
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(30px,4vw,58px); align-items:center;
}
.svc__bande-photo{
  margin:0; border-radius:var(--radius-lg); overflow:hidden; background:var(--slate-900);
}
.svc__bande-photo img{ display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; }
.svc__bande-txt h2{ color:#fff; margin:.9rem 0 1.1rem; }
.svc__bande-txt p{ color:rgba(255,255,255,.72); }
.svc__bande-txt .btn{ margin-top:1.4rem; }

@media (max-width:1020px){
  .svc__deux{ grid-template-columns:1fr; }
  .svc__figure{ position:static; max-width:560px; }
  .svc__bande-inner{ grid-template-columns:1fr; }
  .svc__bande-photo{ max-width:560px; }
}
@media (max-width:520px){
  .svc__actions{ flex-direction:column; }
  .svc__actions .btn{ width:100%; justify-content:center; }
  .svc__reperes{ gap:.55rem 1.2rem; }
}

/* Deuxième ligne du titre sur une page de service : « et dans toute la
   Wallonie » sous « Toiture complète à Perwez ». Elle reste hors du <h1>
   pour que le titre garde son mot-clé principal, mais elle se lit comme sa
   suite naturelle. La spécificité doit dépasser celle de « .pagehead p ». */
.pagehead .pagehead__sous{
  margin:-.75rem 0 0; max-width:30ch;
  font-weight:750; line-height:1.15; letter-spacing:-.02em;
  font-size:clamp(1.4rem,3.2vw,2.1rem);
  color:#e5946a;   /* le même orange clair que la deuxième ligne du titre d'accueil */
}
.pagehead .pagehead__sous + p{ margin-top:1.5rem; }

/* Phrase d'introduction entre le petit titre et la liste à puces. */
.svc__liste-intro{ margin:0 0 1rem; font-size:.95rem; color:var(--slate-500); }


/* ---------- Bandeau de consentement (mesure d'audience) ----------------
   Il n'apparaît qu'une fois, tant que le visiteur n'a pas tranché, et se
   place en bas pour ne jamais masquer le titre ni le bouton d'appel. Sur
   mobile il remonte au-dessus de la barre fixe du bas. */
.cookies{
  position:fixed; left:1rem; right:1rem; bottom:1rem; z-index:120;
  display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.4rem;
  max-width:760px; margin-inline:auto; padding:1.1rem 1.3rem;
  background:var(--slate-900); color:rgba(255,255,255,.86);
  border:1px solid var(--line-dark); border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
  opacity:0; transform:translateY(12px); transition:opacity .3s, transform .3s;
}
.cookies.est-visible{ opacity:1; transform:none; }
.cookies__txt{ flex:1 1 300px; margin:0; font-size:.88rem; line-height:1.6; }
.cookies__txt a{ color:#e5946a; text-decoration:underline; text-underline-offset:3px; }
.cookies__act{ display:flex; gap:.6rem; flex:0 0 auto; }
.cookies__act .btn{ padding:.6rem 1.1rem; font-size:.88rem; }
@media (max-width:760px){
  .cookies{ bottom:calc(var(--barre-mobile, 64px) + 1rem); }
  .cookies__act{ width:100%; }
  .cookies__act .btn{ flex:1; justify-content:center; }
}
@media (prefers-reduced-motion:reduce){
  .cookies{ transition:none; }
}