/* =============================================================================
   CHTECH — feuille de style unique
   Charte « CHTECH - Accueil v2 » (Claude Design) : Bricolage Grotesque pour
   les titres, Archivo pour les surtitres et boutons, Manrope pour le corps.

   Ordre du fichier :
     1. Tokens & base           7. Réalisations (carrousel)
     2. Boutons & surtitres     8. Primes énergie
     3. En-tête & navigation    9. CTA + statistiques
     4. Héros                  10. Suivi, avis, FAQ
     5. Cartes services        11. Galerie, formulaire
     6. Bandeau partenaires    12. Pied de page
                               13. Responsive

   Les couleurs, rayons et graisses viennent toutes de la maquette : ne pas
   inventer de valeur intermédiaire, réutiliser les variables ci-dessous.
   ========================================================================== */

/* --- 1. Tokens & base ---------------------------------------------------- */

:root {
  --bleu: #082B4C;
  --rouge: #EE2027;
  --rouge-pale: #FDECEC;
  --texte: #5C6673;
  /* Les gris secondaires de la maquette tombaient sous le seuil WCAG AA :
     #7C8693 donnait 3,5:1 sur le fond clair et #939CA8 2,8:1 sur blanc.
     Assombris juste ce qu'il faut pour passer 4,5:1, la teinte est conservée.
     --texte-tendre ne sert qu'aux numéros d'étape (décoratifs, doublés par le
     titre juste en dessous) : laissé tel quel. */
  --texte-doux: #69727E;
  --texte-nav: #6E7885;
  --texte-meta: #6A737F;
  --texte-tendre: #B9C0C8;
  --fond: #F7F8FA;
  --blanc: #ffffff;
  --bord: rgba(8, 43, 76, .09);
  --bord-fin: rgba(8, 43, 76, .08);
  --bord-clair: rgba(255, 255, 255, .12);
  --titre: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
  --etiq: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --corps: 'Manrope', 'Helvetica Neue', Arial, sans-serif;
  --largeur: 1300px;
  --marge-h: 36px;
  --souple: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--corps);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

a { color: var(--rouge); text-decoration: none; }
a:hover { color: var(--bleu); }
p { margin: 0; }
img { max-width: 100%; }
input, textarea, button, select { font-family: inherit; }

.page { width: 100%; overflow-x: hidden; background: var(--fond); }
.conteneur { max-width: var(--largeur); margin: 0 auto; }

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

@keyframes v2-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes v2-zoom    { from { transform: scale(1); }     to { transform: scale(1.1); } }
@keyframes v2-pulse   { 0%, 100% { opacity: .4; transform: scale(1); } 50% { opacity: 1; transform: scale(1.4); } }

/* Apparition au défilement : l'état final est posé par JS via data-shown.
   Sans JS, la règle de repli en fin de fichier laisse tout visible. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .9s var(--souple), transform .9s var(--souple);
}
[data-reveal][data-shown] { opacity: 1 !important; transform: none !important; }
[data-reveal="2"] { transition-delay: .12s; }
[data-reveal="3"] { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* --- 2. Boutons & surtitres ---------------------------------------------- */

.bouton {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--rouge);
  color: var(--blanc);
  font-family: var(--etiq);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  padding: 19px 30px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: transform .35s var(--souple), background .35s ease, color .35s ease;
}
.bouton:hover { background: var(--blanc); color: var(--bleu); transform: translateY(-3px); }

/* Sur fond clair, l'inverse du survol : le rouge passe au bleu. */
.bouton--sombre:hover { background: var(--bleu); color: var(--blanc); }

.bouton--compact { font-size: 11px; padding: 17px 28px; gap: 10px; }
.bouton--mini { font-size: 11px; padding: 14px 22px; gap: 10px; }

.bouton--contour {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .28);
  color: var(--blanc);
  padding: 18px 28px;
}
.bouton--contour:hover { background: rgba(255, 255, 255, .12); color: var(--blanc); }

.bouton--contour-sombre {
  background: transparent;
  border: 1px solid rgba(8, 43, 76, .18);
  color: var(--bleu);
  padding: 16px 26px;
}
.bouton--contour-sombre:hover { border-color: var(--rouge); color: var(--rouge); background: transparent; }

/* Surtitre numéroté : « 01 — Nos services ». */
.surtitre {
  font-family: var(--etiq);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--rouge);
}
.surtitre--pale { color: rgba(255, 255, 255, .45); }

/* --- Titres --------------------------------------------------------------- */

.titre {
  margin: 0;
  font-family: var(--titre);
  font-size: clamp(30px, 4vw, 56px);
  line-height: 1.02;
  font-weight: 500;
  letter-spacing: -.038em;
  color: var(--bleu);
}
.titre--clair { color: var(--blanc); }
.titre--moyen { font-size: clamp(30px, 3.8vw, 52px); line-height: 1.04; }
.titre--petit { font-size: clamp(28px, 3.6vw, 48px); line-height: 1.04; }
.titre--mini { font-size: clamp(27px, 3.2vw, 44px); line-height: 1.06; letter-spacing: -.035em; }
.titre--section { font-size: clamp(24px, 2.4vw, 34px); line-height: 1.1; letter-spacing: -.03em; }
.titre .accent { color: var(--rouge); }

.intro { font-size: 14.5px; line-height: 1.8; color: var(--texte-doux); }
.texte { font-size: 15px; line-height: 1.8; color: var(--texte-doux); max-width: 56ch; }
.texte strong { color: var(--bleu); font-weight: 700; }
.texte-groupe { display: flex; flex-direction: column; gap: 14px; }

/* --- 3. En-tête & navigation --------------------------------------------- */

.entete {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--bord);
}
.entete__inner {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 14px var(--marge-h);
  display: flex;
  align-items: center;
  gap: 36px;
}
.entete__logo { flex: 0 0 auto; display: block; }
.entete__logo img { height: 48px; width: auto; display: block; }

.nav {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 30px;
  font-size: 14.5px;
  font-weight: 500;
}
.nav a {
  color: var(--texte-nav);
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  transition: color .3s ease, border-color .3s ease;
}
.nav a:hover { color: var(--bleu); border-bottom-color: var(--rouge); }
.nav a[aria-current="page"] { color: var(--bleu); border-bottom-color: var(--rouge); }

.nav__groupe { position: relative; display: flex; align-items: center; }
.nav__declencheur { display: inline-flex; align-items: center; gap: 6px; }
.nav__sous-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -130px;
  padding-top: 18px;
  width: 260px;
  display: none;
}
.nav__groupe:hover .nav__sous-menu,
.nav__groupe:focus-within .nav__sous-menu,
.nav__groupe.est-ouvert .nav__sous-menu { display: block; }
.nav__sous-menu > div {
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: 14px;
  box-shadow: 0 20px 44px rgba(8, 43, 76, .14);
  padding: 8px;
  display: flex;
  flex-direction: column;
}
.nav__sous-menu a {
  padding: 10px 14px;
  border-radius: 9px;
  border-bottom: none;
  font-size: 14px;
  color: var(--bleu);
}
.nav__sous-menu a:hover { background: var(--fond); color: var(--rouge); border-bottom: none; }

/* Téléphone du bandeau, avec sa pastille qui bat. */
.entete__tel {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--titre);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--bleu);
}
.entete__tel:hover { color: var(--rouge); }
.entete__pastille {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--rouge); display: inline-block;
  animation: v2-pulse 2.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .entete__pastille { animation: none; }
}

.entete__cta { flex: 0 0 auto; }

/* Burger : absent de la maquette (pensée desktop), indispensable en réel. */
.burger {
  display: none;
  flex: 0 0 auto;
  width: 46px; height: 46px;
  border: 1px solid var(--bord);
  border-radius: 12px;
  background: var(--blanc);
  color: var(--bleu);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.burger span { display: block; position: relative; width: 20px; height: 2px; background: currentColor; }
.burger span::before,
.burger span::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: currentColor;
}
.burger span::before { top: -6px; }
.burger span::after { top: 6px; }

/* --- 4. Héros ------------------------------------------------------------ */

.hero {
  position: relative;
  min-height: 86vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--bleu);
}
.hero__fond { position: absolute; inset: 0; }
.hero__fond img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.5s ease;
  animation: v2-zoom 16s ease-in-out infinite alternate;
}
.hero__fond img.est-visible { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero__fond img { animation: none; }
}
.hero__voile {
  position: absolute; inset: 0;
  background: linear-gradient(96deg,
    rgba(8, 43, 76, .96) 0%, rgba(8, 43, 76, .88) 42%,
    rgba(8, 43, 76, .5) 74%, rgba(8, 43, 76, .22) 100%);
}
.hero__contenu {
  position: relative;
  width: 100%;
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 130px var(--marge-h) 110px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 12px;
  padding: 9px 18px;
  font-family: var(--etiq);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--blanc);
}
.badge a { color: var(--blanc); display: inline-flex; align-items: center; gap: 7px; }
.badge a:hover { color: var(--blanc); text-decoration: underline; }

.hero__titre {
  margin: 32px 0 0;
  font-family: var(--titre);
  font-size: clamp(44px, 6.6vw, 96px);
  line-height: .96;
  font-weight: 500;
  letter-spacing: -.04em;
  color: var(--blanc);
  max-width: 16ch;
}
.hero__titre .accent { color: var(--rouge); }
.hero__bloc {
  margin-top: 38px;
  max-width: 540px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.hero__texte { font-size: 16px; line-height: 1.8; color: rgba(255, 255, 255, .78); }
.hero__texte strong { color: var(--blanc); font-weight: 700; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Bandeau de chiffres collé au bas du héros. */
.faits {
  position: absolute; left: 0; right: 0; bottom: 0;
  border-top: 1px solid var(--bord-clair);
  background: rgba(8, 43, 76, .4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.faits__grille {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 0 var(--marge-h);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.fait {
  min-width: 0;
  padding: 20px 24px;
  display: flex; flex-direction: column; gap: 5px;
  border-left: 1px solid var(--bord-clair);
}
.fait__valeur {
  font-family: var(--titre); font-size: 24px; font-weight: 500;
  letter-spacing: -.03em; color: var(--blanc); line-height: 1;
}
.fait__label {
  font-family: var(--etiq); font-size: 9.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .5);
}

/* Héros des pages intérieures : même langage, plus court. */
.hero--page { min-height: 52vh; }
.hero--page .hero__contenu { padding: 120px var(--marge-h) 100px; }
.hero--page .hero__titre {
  font-size: clamp(34px, 4.6vw, 64px);
  line-height: 1;
  margin-top: 26px;
  max-width: 20ch;
}

/* --- Sections génériques -------------------------------------------------- */

.section { padding: 104px var(--marge-h); }
.section--claire { background: var(--fond); }
.section--bleue { background: var(--bleu); }
.section--blanche { background: var(--blanc); }

.section__entete {
  display: flex; flex-wrap: wrap; gap: 48px;
  align-items: flex-end; justify-content: space-between; margin-bottom: 44px;
}
.section__entete-gauche { flex: 1 1 500px; display: flex; flex-direction: column; gap: 20px; }
.section__entete-gauche .titre { max-width: 20ch; }
.section__entete-droite { flex: 1 1 320px; max-width: 400px; }

.section__centre {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  text-align: center; margin-bottom: 40px;
}
.section__centre .intro { max-width: 60ch; }
.section__centre .texte { max-width: 60ch; }

.duo { display: flex; flex-wrap: wrap; gap: 60px; align-items: center; }
.duo--haut { align-items: flex-start; }
.duo__texte { flex: 1 1 480px; display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.duo__media { flex: 1 1 380px; display: flex; justify-content: center; min-width: 290px; }
.duo__media img { width: 100%; max-width: 420px; height: auto; display: block; border-radius: 14px; }
.duo__slider { flex: 1 1 420px; min-width: 300px; }

/* Listes « ✅ … » : en v2 chaque ligne devient une carte blanche. */
.liste-check { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.liste-check__titre {
  font-family: var(--etiq); font-size: 10.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--bleu);
  margin-bottom: 2px;
}
.check {
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--blanc);
  border: 1px solid var(--bord-fin);
  border-radius: 12px;
  padding: 14px 18px;
  font-size: 13.5px; line-height: 1.65; color: var(--texte);
}
.check svg { margin-top: 3px; flex: 0 0 auto; }
.check strong { color: var(--bleu); font-weight: 700; }
.check--croix svg { stroke: var(--texte-meta); }

.liste-puces {
  margin: 0; padding-left: 20px;
  display: flex; flex-direction: column; gap: 10px;
  font-size: 14px; line-height: 1.7; color: var(--texte-doux); max-width: 56ch;
}
.liste-puces strong { color: var(--bleu); font-weight: 700; }
.liste-puces::marker { color: var(--rouge); }

/* --- 5. Cartes services --------------------------------------------------- */

.grille-services {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 20px;
}
.carte {
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: 14px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: inherit;
  transition: transform .5s var(--souple), border-color .4s ease;
}
a.carte:hover { transform: translateY(-6px); border-color: var(--rouge); color: inherit; }
.carte__visuel { position: relative; overflow: hidden; border-radius: 10px; }
.carte__visuel img {
  width: 100%; height: 208px; object-fit: cover; display: block;
  transition: transform .85s var(--souple);
}
.carte:hover .carte__visuel img { transform: scale(1.08); }
.carte__num {
  position: absolute; top: 12px; left: 12px;
  background: rgba(255, 255, 255, .94);
  color: var(--bleu);
  font-family: var(--etiq); font-size: 10px; font-weight: 700; letter-spacing: .14em;
  padding: 7px 12px; border-radius: 8px;
}
.carte__corps { padding: 4px 12px; display: flex; flex-direction: column; gap: 10px; }
.carte__titre {
  margin: 0;
  font-family: var(--titre); font-size: 22px; line-height: 1.15;
  font-weight: 500; letter-spacing: -.025em; color: var(--bleu);
}
.carte__texte { font-size: 13.5px; line-height: 1.7; color: var(--texte-doux); }
.carte__pied {
  margin-top: auto;
  padding: 12px 12px 10px;
  border-top: 1px solid var(--bord-fin);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.carte__lien {
  font-family: var(--etiq); font-size: 10.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--rouge);
}

/* Colonnes de texte (gaz/propane/mazout, techniques d'adoucisseur…). */
.grille-colonnes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px;
}
.colonne {
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: 14px;
  padding: 30px 28px;
  display: flex; flex-direction: column; gap: 16px;
}
.colonne .check { border: none; padding: 0; background: transparent; }
.colonne .liste-check { gap: 8px; }

/* --- 6. Bandeau partenaires ---------------------------------------------- */

.marques { background: var(--bleu); padding: 44px 0 48px; overflow: hidden; }
.marques__titre { max-width: var(--largeur); margin: 0 auto; padding: 0 var(--marge-h) 22px; }
.marques__piste-cadre { overflow: hidden; }
.marques__piste { display: flex; width: max-content; animation: v2-marquee 72s linear infinite; }
/* La maquette posait les logos à nu sur le bleu, avec un
   « grayscale(1) brightness(2.4) ». Or ces fichiers ont tous un fond BLANC
   opaque : le filtre les transformait en simples pavés blancs. On les pose
   donc dans une pastille, ce qui garde le bandeau sombre tout en rendant les
   marques lisibles. */
.marques__logo {
  width: 180px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  margin: 0 10px;
  background: var(--blanc);
  border-radius: 12px;
  padding: 14px 18px;
  opacity: .92;
  transition: opacity .35s ease;
}
.marques__logo:hover { opacity: 1; }
.marques__logo img {
  max-width: 115px; max-height: 40px; width: auto; height: auto;
  object-fit: contain; display: block;
}
@media (prefers-reduced-motion: reduce) { .marques__piste { animation: none; } }

/* --- 7. Réalisations (carrousel) ------------------------------------------ */

.realisations { background: var(--bleu); padding: 104px 0; }
.realisations__entete {
  max-width: var(--largeur); margin: 0 auto 40px;
  padding: 0 var(--marge-h);
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 34px;
}
.realisations__titres { display: flex; flex-direction: column; gap: 20px; }
.carrousel__commandes { display: flex; gap: 10px; }
.carrousel__fleche {
  width: 52px; height: 52px; border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .22);
  background: transparent; color: var(--blanc); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .35s ease, border-color .35s ease;
}
.carrousel__fleche:hover { background: var(--rouge); border-color: var(--rouge); color: var(--blanc); }

.carrousel { overflow: hidden; padding: 0 var(--marge-h); }
.carrousel__piste {
  max-width: var(--largeur); margin: 0 auto;
  display: flex; gap: 20px;
  transition: transform .9s cubic-bezier(.16, .8, .24, 1);
}
.carrousel__vue { flex: 0 0 calc((100% - 40px) / 2.6); overflow: hidden; border-radius: 14px; }
.carrousel__vue img {
  width: 100%; height: 400px; object-fit: cover; display: block;
  transition: transform .95s var(--souple);
}
.carrousel__vue:hover img { transform: scale(1.07); }

/* --- 8. Primes énergie ---------------------------------------------------- */

.primes__media {
  flex: 1 1 340px; min-width: 290px;
  display: flex; justify-content: center;
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: 14px;
  padding: 40px;
}
.primes__media img { width: 100%; max-width: 380px; height: auto; display: block; border-radius: 0; }

/* --- 9. CTA + statistiques ------------------------------------------------ */

.cta { background: var(--bleu); padding: 104px var(--marge-h); }
.cta__inner {
  max-width: var(--largeur); margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 22px;
}
.cta__titre {
  font-size: clamp(30px, 4.6vw, 68px); line-height: 1; letter-spacing: -.04em;
  text-align: center; max-width: 22ch;
}
.cta__texte {
  font-size: 15px; line-height: 1.8; color: rgba(255, 255, 255, .72);
  max-width: 58ch; text-align: center;
}
.cta__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 6px; }

.stats {
  width: 100%; margin-top: 54px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 20px;
}
.stat {
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--bord-clair);
  border-radius: 14px;
  padding: 30px 26px;
  display: flex; flex-direction: column; gap: 10px;
}
.stat__valeur {
  font-family: var(--titre); font-size: clamp(34px, 3.6vw, 50px); line-height: 1;
  font-weight: 500; letter-spacing: -.04em; color: var(--blanc);
}
.stat__valeur .suffixe { color: var(--rouge); }
.stat__label {
  font-family: var(--etiq); font-size: 9.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .5);
}

.bandeau-avis {
  width: 100%; margin-top: 22px;
  background: var(--rouge); border-radius: 14px; padding: 18px 26px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px;
}
.bandeau-avis__etoiles { display: inline-flex; gap: 4px; }
.bandeau-avis__texte {
  font-family: var(--titre); font-size: 16px; font-weight: 600;
  letter-spacing: -.015em; color: var(--blanc); text-align: center;
}

/* --- 10. Suivi, avis, FAQ ------------------------------------------------- */

.grille-etapes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px;
}
.etape {
  background: var(--blanc); border: 1px solid var(--bord); border-radius: 14px;
  padding: 12px; display: flex; flex-direction: column; gap: 14px;
  transition: transform .5s var(--souple), border-color .4s ease;
}
.etape:hover { transform: translateY(-6px); border-color: var(--rouge); }
.etape__visuel { overflow: hidden; border-radius: 10px; }
.etape__visuel img {
  width: 100%; height: 186px; object-fit: cover; display: block;
  transition: transform .85s var(--souple);
}
.etape:hover .etape__visuel img { transform: scale(1.08); }
.etape__corps { padding: 2px 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.etape__num {
  font-family: var(--etiq); font-size: 10px; font-weight: 700;
  letter-spacing: .16em; color: var(--texte-tendre);
}
.etape__titre {
  margin: 0;
  font-family: var(--titre); font-size: 19px; line-height: 1.2;
  font-weight: 600; letter-spacing: -.022em; color: var(--rouge);
}
.etape__texte { font-size: 13px; line-height: 1.7; color: var(--texte-doux); }

/* Atouts « Service complet » / « Techniciens agréés ». */
.atouts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 10px; width: 100%; }
.atout {
  background: var(--blanc); border: 1px solid var(--bord); border-radius: 14px;
  padding: 26px 24px; display: flex; flex-direction: column; gap: 12px;
}
.atout__icone {
  width: 44px; height: 44px; border-radius: 12px; background: var(--rouge-pale);
  display: inline-flex; align-items: center; justify-content: center;
}
.atout__titre {
  font-family: var(--titre); font-size: 18px; font-weight: 600;
  letter-spacing: -.02em; color: var(--bleu);
}
.atout__texte { font-size: 13px; line-height: 1.7; color: var(--texte-doux); }

/* Vignette du fondateur, posée en débord sur la photo. */
.apropos__media { flex: 1 1 420px; min-width: 300px; position: relative; }
.apropos__cadre { overflow: hidden; border-radius: 14px; }
.apropos__cadre img {
  width: 100%; height: auto; display: block; transition: transform 1s var(--souple);
}
.apropos__media:hover .apropos__cadre img { transform: scale(1.05); }
.signature {
  position: absolute; left: 20px; bottom: -26px;
  background: var(--blanc); border: 1px solid var(--bord); border-radius: 14px;
  padding: 14px 22px 14px 14px;
  display: flex; align-items: center; gap: 14px;
}
.signature img { width: 50px; height: 50px; border-radius: 10px; object-fit: cover; display: block; }
.signature__nom { font-family: var(--titre); font-size: 16px; font-weight: 600; color: var(--bleu); }
.signature__role {
  font-family: var(--etiq); font-size: 9.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--texte-meta);
}

.avis-bloc { flex: 1 1 380px; max-width: 460px; display: flex; flex-direction: column; gap: 22px; }
.avis-bloc__texte {
  font-size: 14.5px; line-height: 1.8; color: rgba(255, 255, 255, .72); max-width: 44ch;
}
.avis-bloc .bouton { align-self: flex-start; }
.avis-grille {
  flex: 1 1 520px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px;
}
.avis {
  background: var(--blanc); border-radius: 14px; padding: 28px 24px;
  display: flex; flex-direction: column; gap: 16px; margin: 0;
}
.avis__haut { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.avis__etoiles { display: inline-flex; gap: 3px; }
.avis__texte { font-size: 14px; line-height: 1.75; color: var(--texte); margin: 0; }
.avis__auteur {
  display: flex; align-items: center; gap: 12px;
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--bord-fin);
}
.avis__pastille {
  width: 36px; height: 36px; border-radius: 10px; background: #7B2A9E; color: var(--blanc);
  font-family: var(--titre); font-size: 14px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.avis__nom { font-family: var(--titre); font-size: 14px; font-weight: 600; color: var(--bleu); }
.avis__date { font-size: 11.5px; color: var(--texte-meta); }

.faq { flex: 1 1 520px; display: flex; flex-direction: column; gap: 12px; }
.faq__intro { flex: 1 1 340px; max-width: 420px; display: flex; flex-direction: column; gap: 20px; }
.faq__item {
  background: var(--blanc); border: 1px solid var(--bord); border-radius: 14px; overflow: hidden;
}
.faq__question {
  width: 100%; padding: 22px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  text-align: left; cursor: pointer; list-style: none;
  font-family: var(--titre); font-size: 17px; line-height: 1.35;
  font-weight: 500; letter-spacing: -.02em; color: var(--bleu);
  transition: color .3s ease;
}
.faq__question::-webkit-details-marker { display: none; }
.faq__question::after {
  content: "+";
  flex: 0 0 auto;
  width: 30px; height: 30px; border-radius: 9px; background: var(--fond);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--rouge); font-size: 16px; line-height: 1;
  transition: transform .45s var(--souple);
}
.faq__item[open] .faq__question { color: var(--rouge); }
.faq__item[open] .faq__question::after { transform: rotate(135deg); }
.faq__reponse {
  padding: 0 24px 24px; font-size: 13.5px; line-height: 1.85;
  color: var(--texte-doux); max-width: 64ch;
}

/* --- 11. Galerie, diaporama, formulaire ----------------------------------- */

.diapo { width: 100%; overflow: hidden; border-radius: 14px; }
.diapo__piste { display: flex; transition: transform .6s var(--souple); }
.diapo__vue { flex: 0 0 100%; }
.diapo__vue img { width: 100%; height: 440px; object-fit: cover; display: block; }

.galerie { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.galerie__vignette {
  position: relative; padding: 0; border: none;
  background: var(--blanc); border-radius: 14px; overflow: hidden;
  cursor: pointer; aspect-ratio: 1 / 1; display: block; width: 100%;
}
.galerie__vignette img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .85s var(--souple);
}
.galerie__vignette:hover img { transform: scale(1.06); }
.galerie__vignette::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(8, 43, 76, 0); transition: background .35s ease;
}
.galerie__vignette:hover::after { background: rgba(8, 43, 76, .3); }

.visionneuse {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(8, 43, 76, .94);
  display: flex; align-items: center; justify-content: center;
  padding: 40px 70px;
}
.visionneuse[hidden] { display: none; }
.visionneuse img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; border-radius: 14px; }
.visionneuse__bouton {
  position: absolute;
  width: 52px; height: 52px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .1); color: var(--blanc);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .35s ease, border-color .35s ease;
}
.visionneuse__bouton:hover { background: var(--rouge); border-color: var(--rouge); color: var(--blanc); }
.visionneuse__bouton--fermer { top: 24px; right: 26px; }
.visionneuse__bouton--prev { left: 18px; top: 50%; margin-top: -26px; }
.visionneuse__bouton--next { right: 18px; top: 50%; margin-top: -26px; }

.contact-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.contact-carte {
  background: var(--blanc); border: 1px solid var(--bord); border-radius: 14px;
  padding: 26px 24px; display: flex; align-items: center; gap: 18px;
}
.contact-carte__icone {
  flex: 0 0 auto; width: 48px; height: 48px; border-radius: 12px;
  background: var(--rouge-pale); color: var(--rouge);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .3s ease, color .3s ease;
}
a.contact-carte__icone:hover { background: var(--rouge); color: var(--blanc); }
.contact-carte__corps { display: flex; flex-direction: column; gap: 6px; }
.contact-carte__titre {
  font-family: var(--titre); font-size: 17px; font-weight: 600;
  letter-spacing: -.02em; color: var(--bleu);
}
a.contact-carte__titre:hover { color: var(--rouge); }
.contact-carte__texte { font-size: 13.5px; line-height: 1.7; color: var(--texte-doux); }

.contact-duo { display: flex; flex-wrap: wrap; gap: 20px; align-items: stretch; }
.contact-formulaire {
  flex: 1 1 480px; min-width: 300px;
  background: var(--blanc); border: 1px solid var(--bord); border-radius: 14px;
  padding: 36px 32px; display: flex; flex-direction: column; gap: 22px;
}
.formulaire { display: flex; flex-direction: column; gap: 14px; }
.formulaire input,
.formulaire textarea {
  width: 100%;
  background: var(--fond);
  border: 1px solid var(--bord);
  border-radius: 12px;
  padding: 15px 16px;
  font-size: 14px;
  color: var(--bleu);
  outline: none;
  transition: border-color .2s ease, background .2s ease;
}
.formulaire input:focus,
.formulaire textarea:focus { border-color: var(--rouge); background: var(--blanc); }
.formulaire input::placeholder,
.formulaire textarea::placeholder { color: var(--texte-meta); }
.formulaire textarea { resize: vertical; }
.formulaire__ligne { display: flex; flex-wrap: wrap; gap: 14px; }
.formulaire__ligne input { flex: 1 1 200px; width: auto; }
.formulaire button[type="submit"] { align-self: flex-start; justify-content: center; }
.formulaire__retour { font-size: 13.5px; line-height: 1.7; color: #1E7A46; font-weight: 600; }
.formulaire__retour[hidden] { display: none; }
.formulaire__piege { position: absolute; left: -9999px; opacity: 0; height: 0; }

.contact-carte-geo { flex: 1 1 420px; min-width: 300px; display: flex; }
.contact-carte-geo iframe {
  width: 100%; min-height: 540px; border: 0; border-radius: 14px; display: block;
  background: var(--blanc);
}

/* --- 12. Pied de page ----------------------------------------------------- */

.pied { background: var(--bleu); padding: 90px var(--marge-h) 0; }
.pied__grille {
  max-width: var(--largeur); margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 50px; padding-bottom: 60px;
}
.pied__colonne { display: flex; flex-direction: column; gap: 16px; }
.pied__colonne--marque { gap: 20px; align-items: flex-start; }
.pied__logo img {
  width: 84px; height: auto; display: block;
  background: var(--blanc); border-radius: 12px; padding: 8px;
}
.pied__baseline { font-size: 13px; line-height: 1.8; color: rgba(255, 255, 255, .62); max-width: 26ch; }
.pied__baseline strong { color: var(--blanc); font-weight: 700; }
.pied__social {
  width: 40px; height: 40px; border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .18);
  color: var(--blanc);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .35s ease, border-color .35s ease;
}
.pied__social:hover { background: var(--rouge); border-color: var(--rouge); color: var(--blanc); }
.pied__titre {
  font-family: var(--etiq); font-size: 10.5px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .42);
}
.pied__liens { display: flex; flex-direction: column; gap: 11px; font-size: 13px; }
.pied__liens a { color: rgba(255, 255, 255, .72); }
.pied__liens a:hover { color: var(--rouge); }
.pied__adresse { font-size: 13px; line-height: 1.8; color: rgba(255, 255, 255, .72); }
.pied__contact { display: flex; flex-direction: column; gap: 9px; font-size: 13px; }
.pied__contact a { color: rgba(255, 255, 255, .72); }
.pied__contact a:hover { color: var(--rouge); }

.pied__communes {
  max-width: var(--largeur); margin: 0 auto;
  border-top: 1px solid var(--bord-clair);
  padding: 26px 0;
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
}
.pied__communes span {
  background: rgba(255, 255, 255, .07); border-radius: 9px; padding: 7px 14px;
  font-family: var(--etiq); font-size: 10px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .6);
}
.pied__bas {
  max-width: var(--largeur); margin: 0 auto;
  border-top: 1px solid var(--bord-clair);
  padding: 22px 0 32px; text-align: center;
}
.pied__bas p { font-size: 11.5px; color: rgba(255, 255, 255, .38); }

/* --- 13. Responsive ------------------------------------------------------- */

@media (max-width: 1120px) {
  .entete__inner { gap: 20px; }
  .nav { gap: 22px; font-size: 14px; }
  .entete__tel { display: none; }
}

@media (max-width: 1000px) {
  .entete__inner { flex-wrap: wrap; gap: 14px; }
  .burger { display: inline-flex; order: 3; }
  .entete__cta { order: 2; margin-left: auto; }
  .entete__tel { display: none; }

  .nav {
    order: 4; flex: 1 1 100%;
    display: none; flex-direction: column; align-items: stretch;
    gap: 0; border-top: 1px solid var(--bord); padding-top: 8px; margin-bottom: 6px;
  }
  .nav.est-ouverte { display: flex; }
  .nav > a, .nav__declencheur { padding: 13px 2px; font-size: 15px; border-bottom: none; }
  .nav > a[aria-current="page"] { border-bottom: none; color: var(--rouge); }
  .nav__groupe { display: block; }
  .nav__sous-menu { position: static; width: 100%; margin-left: 0; padding-top: 0; display: none; }
  .nav__groupe:hover .nav__sous-menu { display: none; }
  .nav__groupe.est-ouvert .nav__sous-menu { display: block; }
  .nav__sous-menu > div { border: none; box-shadow: none; padding: 0 0 8px 14px; }

  .carrousel__vue { flex: 0 0 calc((100% - 20px) / 1.6); }
}

@media (max-width: 860px) {
  :root { --marge-h: 22px; }

  /* Le héros est un conteneur flex : une fois le bandeau de chiffres sorti
     du positionnement absolu, il devient un frère du contenu et lui prend
     la moitié de la largeur. On empile. */
  .hero { min-height: auto; flex-direction: column; align-items: stretch; }
  .hero__contenu { padding: 90px var(--marge-h) 70px; }

  /* En desktop le bandeau de chiffres est posé en absolu au bas du héros.
     En mobile il passe sur deux lignes et recouvrait les boutons : on le
     remet dans le flux plutôt que de deviner un padding de compensation. */
  /* `relative` et non `static` : la photo de fond et le voile du héros sont
     positionnés, donc peints au-dessus de tout élément non positionné du même
     contexte d'empilement. En static, le bandeau disparaissait sous l'image. */
  .faits { position: relative; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .fait:nth-child(odd) { border-left: none; }
  .hero--page { min-height: auto; }
  .hero--page .hero__contenu { padding: 80px var(--marge-h) 70px; }

  /* Le dégradé horizontal de la maquette éclaircit la droite : correct en
     desktop où le texte tient à gauche, illisible en mobile où il occupe
     toute la largeur. On repasse sur un voile plein. */
  .hero__voile { background: rgba(8, 43, 76, .9); }

  .hero__titre { font-size: clamp(38px, 11vw, 56px); max-width: none; }
  .hero--page .hero__titre { font-size: clamp(30px, 9vw, 44px); }
  .fait { padding: 16px 18px; }

  .section { padding: 64px var(--marge-h); }
  .cta { padding: 64px var(--marge-h); }
  .realisations { padding: 64px 0; }
  .pied { padding-top: 60px; }

  .duo { gap: 36px; }
  .section__entete { gap: 26px; margin-bottom: 30px; }

  /* La vignette du fondateur déborde du visuel : on la repasse dans le flux. */
  .signature { position: static; margin-top: 14px; }

  .carrousel__vue { flex: 0 0 100%; }
  .carrousel__vue img { height: 280px; }
  .diapo__vue img { height: 300px; }
  .visionneuse { padding: 70px 16px; }
  .contact-carte-geo iframe { min-height: 380px; }
  .formulaire button[type="submit"] { width: 100%; }
}

@media (max-width: 520px) {
  .entete__logo img { height: 40px; }
  .entete__cta { font-size: 10px; padding: 12px 14px; }
  .grille-services { grid-template-columns: 1fr; }
  .galerie { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .faits__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .visionneuse__bouton { width: 44px; height: 44px; }
}


/* --- 14. Pages locales (/seo/) -------------------------------------------- */

/* Pastilles des communes voisines : même vocabulaire que celles du pied de
   page, mais cliquables et sur fond clair. */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips a,
.chips span {
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: 9px;
  padding: 9px 16px;
  font-family: var(--etiq);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texte-doux);
  transition: border-color .3s ease, color .3s ease;
}
.chips a:hover { border-color: var(--rouge); color: var(--rouge); }

/* Bandeau de réassurance : ville · délai · TVA. */
.reassurance {
  display: flex; flex-wrap: wrap; gap: 12px;
  background: var(--bleu);
  border-radius: 14px;
  padding: 22px 26px;
}
.reassurance div {
  flex: 1 1 200px; min-width: 0;
  display: flex; align-items: center; gap: 12px;
}
.reassurance svg { flex: 0 0 auto; }
.reassurance p { font-size: 13.5px; line-height: 1.55; color: rgba(255, 255, 255, .82); }
.reassurance strong { color: var(--blanc); font-weight: 700; display: block; }

/* Deux colonnes de texte pour les sections longues des pages locales. */
.deux-colonnes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px;
}

/* --- 15. Pages de texte long (légal) -------------------------------------- */

.prose { max-width: 78ch; display: flex; flex-direction: column; gap: 14px; }
.prose h2 {
  margin: 26px 0 4px;
  font-family: var(--titre); font-size: clamp(20px, 2vw, 26px); line-height: 1.2;
  font-weight: 600; letter-spacing: -.025em; color: var(--bleu);
}
.prose h2:first-child { margin-top: 0; }
.prose p { font-size: 14.5px; line-height: 1.85; color: var(--texte); }
.prose ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 7px; }
.prose li { font-size: 14.5px; line-height: 1.75; color: var(--texte); }
.prose li::marker { color: var(--rouge); }
.prose a { word-break: break-word; }
.prose__maj {
  font-family: var(--etiq); font-size: 10.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--texte-meta);
}

/* Plan du site : une colonne de liens par rubrique. */
.plan { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.plan__groupe {
  background: var(--blanc); border: 1px solid var(--bord); border-radius: 14px; padding: 26px 24px;
  display: flex; flex-direction: column; gap: 12px;
}
.plan__groupe h2 {
  margin: 0; font-family: var(--titre); font-size: 18px; font-weight: 600;
  letter-spacing: -.02em; color: var(--bleu);
}
.plan__groupe a { font-size: 14px; line-height: 1.6; color: var(--texte-doux); }
.plan__groupe a:hover { color: var(--rouge); }

/* --- 16. Blog ------------------------------------------------------------- */
/*  Le standard blog BE WEB (article-brief, reno-btn…) vient d'un autre
    template. Ici on garde uniquement les trois classes dont dépend
    assets/js/blog-schedule.js — .blog-card, .publish-gate__content,
    .publish-gate__locked — et on habille le reste avec les composants v2.
    Blog volontairement SANS images (décision Wakny, 26/07/2026).            */

.blog-grille {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px;
}
.blog-card {
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: 14px;
  padding: 28px 26px;
  display: flex; flex-direction: column; gap: 12px;
  color: inherit;
  transition: transform .5s var(--souple), border-color .4s ease;
}
a.blog-card:hover { transform: translateY(-6px); border-color: var(--rouge); color: inherit; }
.blog-card__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  font-family: var(--etiq); font-size: 10px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--texte-meta);
}
.blog-card__meta .categorie { color: var(--rouge); }
.blog-card__titre {
  margin: 0; font-family: var(--titre); font-size: 20px; line-height: 1.2;
  font-weight: 500; letter-spacing: -.025em; color: var(--bleu);
}
.blog-card__extrait { font-size: 13.5px; line-height: 1.7; color: var(--texte-doux); }
.blog-card__lien {
  margin-top: auto; padding-top: 12px;
  font-family: var(--etiq); font-size: 10.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--rouge);
}

/* Index du blog avant la sortie du premier article : évite la page blanche. */
.blog-vide {
  background: var(--blanc); border: 1px solid var(--bord); border-radius: 14px;
  padding: 34px 28px; text-align: center; font-size: 14.5px; line-height: 1.8;
  color: var(--texte-doux);
}
.blog-vide strong { color: var(--bleu); }

/* Écran d'attente affiché tant que la date de publication n'est pas atteinte. */
.publish-gate__locked {
  background: var(--blanc); border: 1px solid var(--bord); border-radius: 14px;
  padding: 40px 32px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.publish-gate__locked p { font-size: 14.5px; line-height: 1.8; color: var(--texte-doux); }
.publish-gate__locked strong { color: var(--bleu); }

/* --- Corps d'article ------------------------------------------------------ */

.article { max-width: 78ch; margin: 0 auto; }
.article__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 26px;
  font-family: var(--etiq); font-size: 10px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--texte-meta);
}
.article__meta .categorie { color: var(--rouge); }

.article__corps { display: flex; flex-direction: column; gap: 16px; }
.article__corps h2 {
  margin: 30px 0 2px;
  font-family: var(--titre); font-size: clamp(21px, 2.2vw, 28px); line-height: 1.22;
  font-weight: 600; letter-spacing: -.028em; color: var(--bleu);
}
.article__corps h3 {
  margin: 18px 0 0;
  font-family: var(--titre); font-size: 18px; line-height: 1.3;
  font-weight: 600; letter-spacing: -.02em; color: var(--bleu);
}
.article__corps p { font-size: 15.5px; line-height: 1.85; color: var(--texte); }
.article__corps strong { color: var(--bleu); font-weight: 700; }
.article__corps ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.article__corps li { font-size: 15.5px; line-height: 1.75; color: var(--texte); }
.article__corps li::marker { color: var(--rouge); }

/* Résumé en tête : trois puces, aucune promotion. */
.article__brief {
  background: var(--blanc); border: 1px solid var(--bord); border-left: 3px solid var(--rouge);
  border-radius: 14px; padding: 26px 28px; display: flex; flex-direction: column; gap: 12px;
}
.article__brief h2 {
  margin: 0; font-family: var(--etiq); font-size: 10.5px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--rouge);
}
.article__brief ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; }
.article__brief li { font-size: 15px; line-height: 1.7; color: var(--texte); }

.article__toc {
  background: var(--blanc); border: 1px solid var(--bord); border-radius: 14px; padding: 24px 28px;
}
.article__toc h2 {
  margin: 0 0 12px; font-family: var(--etiq); font-size: 10.5px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--texte-meta);
}
.article__toc ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.article__toc a { font-size: 14.5px; line-height: 1.6; color: var(--texte-doux); }
.article__toc a:hover { color: var(--rouge); }

.article__quote {
  margin: 8px 0; padding: 22px 26px;
  background: var(--bleu); border-radius: 14px;
  font-family: var(--titre); font-size: 18px; line-height: 1.45;
  font-weight: 500; letter-spacing: -.02em; color: var(--blanc);
}

/* Encadré réalisations, au milieu de l'article. */
.article__realisations {
  background: var(--bleu); border-radius: 14px; padding: 34px 32px;
  display: flex; flex-direction: column; gap: 14px; align-items: flex-start;
}
.article__realisations h3 {
  margin: 0; font-family: var(--titre); font-size: clamp(21px, 2.2vw, 28px);
  line-height: 1.2; font-weight: 500; letter-spacing: -.03em; color: var(--blanc);
}
.article__realisations p { font-size: 14.5px; line-height: 1.75; color: rgba(255, 255, 255, .78); }
.article__boutons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }

.article__zones {
  background: var(--blanc); border: 1px solid var(--bord); border-radius: 14px;
  padding: 26px 28px; display: flex; flex-direction: column; gap: 14px;
}
.article__zones h2 {
  margin: 0; font-family: var(--titre); font-size: 19px; font-weight: 600;
  letter-spacing: -.02em; color: var(--bleu);
}
.article__zones p { font-size: 14.5px; line-height: 1.75; color: var(--texte-doux); }

.article__more { display: flex; flex-direction: column; gap: 12px; }
.article__more h2 {
  margin: 0; font-family: var(--titre); font-size: 19px; font-weight: 600;
  letter-spacing: -.02em; color: var(--bleu);
}
.article__more-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.article__more a {
  background: var(--blanc); border: 1px solid var(--bord); border-radius: 12px;
  padding: 16px 18px; font-size: 14px; line-height: 1.5; color: var(--bleu);
  transition: border-color .3s ease, color .3s ease;
}
.article__more a:hover { border-color: var(--rouge); color: var(--rouge); }

@media (max-width: 860px) {
  .article__brief, .article__toc, .article__realisations,
  .article__zones, .publish-gate__locked { padding: 22px 20px; }
  .article__quote { padding: 18px 20px; font-size: 16.5px; }
}