/* ==========================================================================
   Electro Jenner — feuille de style du site
   Conception VD Studio. HTML/CSS/JS sans dépendance.
   Palette alignée sur le logo officiel : bleu profond, bleu cyan ; le vert et l'ambre ne signalent plus que des états.
   Sommaire :
   1. Polices et variables      9. Situations (onglets)
   2. Base                      10. Bandes photo, avis, interlocuteur
   3. Utilitaires               11. Zone d'intervention (carte)
   4. Boutons                   12. Pages intérieures (fiches, jauge, frise…)
   5. En-tête et menu           13. Contact et formulaire
   6. Héros de l'accueil        14. Pied de page, barre mobile, retour en haut
   7. Cadres photo              15. Apparitions et mouvement réduit
   8. Le fil conducteur         16. Électricité & électroménager (v2) :
                                    héros « maison sous tension », métiers,
                                    Extra.fr, parcours, tableau interactif
   ========================================================================== */

/* 1. Polices et variables ------------------------------------------------ */
@font-face {
  font-family: "Sora";
  src: url("../fonts/sora-variable.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Onest";
  src: url("../fonts/onest-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Polices de secours calibrées pour limiter le décalage au chargement */
@font-face { font-family: "Sora Secours"; src: local("Arial"); size-adjust: 107%; ascent-override: 92%; descent-override: 26%; }
@font-face { font-family: "Onest Secours"; src: local("Arial"); size-adjust: 98%; ascent-override: 98%; descent-override: 26%; }

:root {
  /* Bleu nuit (dérivé du bleu profond du logo) : textes et fonds sombres */
  --graphite-950: #0a121d;
  --graphite-900: #0e1927;
  --graphite-800: #162436;
  --graphite-700: #223249;
  --ardoise-600: #424d5c;
  --ardoise-500: #586474;
  /* Acier et porcelaine (gris bleutés) : lignes et fonds clairs */
  --acier-400: #8b95a2;
  --acier-300: #b1b9c3;
  --acier-200: #d0d5dc;
  --porcelaine-200: #e2e6ec;
  --porcelaine-100: #ebeff4;
  --porcelaine-50: #f4f6f9;
  --blanc: #ffffff;
  /* Bleus du logo : actions, liens, accents, courant qui circule */
  --marque-800: #003068;   /* marine des lettres EJ */
  --marque-700: #00589f;
  --marque-600: #0b72c5;
  --marque-500: #1389dc;
  --marque-300: #4cc8f4;   /* cyan lumineux du câble, pour les fonds sombres */
  --marque-100: #dceefb;
  --marque-nom: #00167a;   /* bleu profond du nom « ELECTRO JENNER » */
  /* Voyant vert : uniquement les états (en service, sous tension, réparer) */
  --voyant-700: #0f5f43;
  --voyant-600: #167a57;
  --voyant-500: #1d9168;
  --voyant-300: #63d3a2;
  --voyant-100: #d9f1e6;
  /* Ambre : l'attente, la panne, remplacer (usage ponctuel) */
  --ambre-500: #e5a23a;
  --ambre-300: #f3c77e;
  --ambre-700: #8d5809;

  --texte: var(--graphite-900);
  --texte-2: var(--ardoise-600);
  --fond: var(--porcelaine-50);
  --trait: var(--acier-200);

  --f-titre: "Sora", "Sora Secours", system-ui, sans-serif;
  --f-texte: "Onest", "Onest Secours", system-ui, sans-serif;

  --conteneur: 1240px;
  --gouttiere: clamp(16px, 4vw, 40px);
  --section: clamp(4.5rem, 9vw, 8.5rem);
  --rayon: 6px;
  --rayon-l: 14px;
  --biseau: 22px;
  --entete-h: 76px;
  --barre-h: 0px;
  --ease: cubic-bezier(.22, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* 2. Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--entete-h) + 16px); }
body {
  margin: 0;
  font-family: var(--f-texte);
  font-size: 1.0625rem;
  line-height: 1.62;
  color: var(--texte);
  background: var(--fond);
  font-feature-settings: "ss01" 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, picture { display: block; max-width: 100%; }
/* Taille par défaut des icônes du jeu commun (les composants la précisent au besoin) */
svg:has(> use) { width: 1.25em; height: 1.25em; flex: none; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--f-titre); line-height: 1.12; letter-spacing: -.022em; margin: 0; font-weight: 600; text-wrap: balance; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; }
strong { font-weight: 600; }
::selection { background: var(--marque-100); color: var(--graphite-950); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--marque-500); outline-offset: 3px; border-radius: 3px; }
.sombre :focus-visible, .section--sombre :focus-visible { outline-color: var(--marque-300); }
[hidden] { display: none !important; }

/* 3. Utilitaires --------------------------------------------------------- */
.conteneur { width: 100%; max-width: calc(var(--conteneur) + 2 * var(--gouttiere)); margin-inline: auto; padding-inline: var(--gouttiere); }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.lien-evitement {
  position: fixed; left: 16px; top: -80px; z-index: 200;
  background: var(--graphite-950); color: var(--blanc); padding: .8rem 1.1rem; border-radius: var(--rayon);
  font-weight: 600; text-decoration: none; transition: top .2s var(--ease);
}
.lien-evitement:focus { top: 12px; }
.sans-retour { white-space: nowrap; }

/* Voyant lumineux (pastille d'état) */
.voyant {
  display: inline-block; flex: none; width: .62em; height: .62em; border-radius: 50%;
  background: var(--voyant-500);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--voyant-500) 22%, transparent);
  vertical-align: .08em;
}
.sombre .voyant, .section--sombre .voyant { background: var(--voyant-300); box-shadow: 0 0 0 3px rgba(99, 211, 162, .18), 0 0 14px rgba(99, 211, 162, .55); }
.voyant--ambre, .sombre .voyant--ambre { background: var(--ambre-500); box-shadow: 0 0 0 3px rgba(229, 162, 58, .2), 0 0 14px rgba(229, 162, 58, .6); }

/* Intertitre de section */
.section { padding-block: var(--section); position: relative; }
.section--porcelaine { background: var(--porcelaine-100); }
.section--sombre { background: var(--graphite-900); color: var(--porcelaine-100); }
.section--sombre .texte-2, .sombre .texte-2 { color: var(--acier-300); }
.section--serre { padding-block: clamp(3.5rem, 6vw, 5.5rem); }
.section__tete { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section__tete--large { max-width: 60rem; }
.section__titre { font-size: clamp(2rem, 1.35rem + 2.6vw, 3.35rem); }
.section__intro { font-size: clamp(1.08rem, 1rem + .3vw, 1.22rem); color: var(--texte-2); margin-top: 1.1rem; max-width: 40rem; }
.section--sombre .section__intro { color: var(--acier-300); }
.texte-2 { color: var(--texte-2); }
.petit { font-size: .92rem; }

/* Lien fléché sobre */
.lien-suite {
  display: inline-flex; align-items: center; gap: .55rem; font-weight: 600; text-decoration: none;
  color: var(--marque-700); padding-block: .3rem; border-bottom: 1px solid currentColor;
}
.lien-suite svg { width: 1em; height: 1em; transition: transform .25s var(--ease); }
.lien-suite:hover svg { transform: translateX(4px); }
.section--sombre .lien-suite, .sombre .lien-suite { color: var(--marque-300); }

/* 4. Boutons ------------------------------------------------------------- */
.btn {
  --btn-fond: var(--graphite-900); --btn-texte: var(--blanc); --btn-bord: var(--btn-fond);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .65rem;
  min-height: 52px; padding: .85rem 1.4rem; border-radius: var(--rayon);
  background: var(--btn-fond); color: var(--btn-texte); border: 1.5px solid var(--btn-bord);
  font-family: var(--f-titre); font-weight: 600; font-size: 1rem; letter-spacing: -.005em; line-height: 1.15;
  text-decoration: none; text-align: left;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease), box-shadow .25s var(--ease);
}
.btn svg { width: 1.2em; height: 1.2em; flex: none; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--appel { --btn-fond: var(--marque-600); --btn-bord: var(--marque-600); box-shadow: 0 10px 26px -14px rgba(11, 114, 197, .9); }
.btn--appel:hover { --btn-fond: var(--marque-700); --btn-bord: var(--marque-700); box-shadow: 0 14px 30px -14px rgba(11, 114, 197, 1); }
.btn--contour { --btn-fond: transparent; --btn-texte: var(--graphite-900); --btn-bord: var(--acier-300); }
.btn--contour:hover { --btn-bord: var(--graphite-900); }
.sombre .btn--contour, .section--sombre .btn--contour { --btn-texte: var(--blanc); --btn-bord: rgba(208, 213, 220, .4); }
.sombre .btn--contour:hover, .section--sombre .btn--contour:hover { --btn-bord: var(--blanc); background: rgba(255, 255, 255, .06); }
.btn__num { display: block; font-family: var(--f-texte); font-weight: 500; font-size: .86rem; letter-spacing: .01em; margin-top: .15rem; font-variant-numeric: tabular-nums; }
.btn--deux-lignes { padding-block: .7rem; }
.btn--plein { width: 100%; }
.groupe-btn { display: flex; flex-wrap: wrap; gap: .8rem; }

/* 5. En-tête et menu ----------------------------------------------------- */
.entete {
  position: fixed; inset: 0 0 auto 0; z-index: 90; height: var(--entete-h);
  color: var(--graphite-900);
  transition: background-color .3s var(--ease), box-shadow .3s var(--ease), color .3s var(--ease), transform .35s var(--ease);
}
.entete__in { height: 100%; display: flex; align-items: center; gap: 1.5rem; }
.entete--solide { background: rgba(244, 246, 249, .94); box-shadow: 0 1px 0 var(--trait); color: var(--graphite-900); }
@supports (backdrop-filter: blur(8px)) { .entete--solide { background: rgba(244, 246, 249, .82); backdrop-filter: saturate(1.4) blur(14px); } }
body[data-entete="sombre"] .entete:not(.entete--solide) { color: var(--blanc); }

/* Logo officiel : symbole EJ (câble et prise) + nom en capitales. Les dessins sont définis une fois par page
   (bloc .logo-defs en tête de <body>) et repris par <use> ; les lettres suivent --logo-encre / --logo-nom. */
.logo-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.marque { --logo-encre: var(--marque-800); --logo-nom: var(--marque-nom); display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; margin-right: auto; flex: 1 1 auto; min-width: 0; }
/* Le symbole dépasse de 3 px en haut et en bas de sa ligne : le bloc garde ainsi la hauteur qu'il avait (pied de page, menu) */
.marque__logo { width: 46px; height: 46px; margin-block: -3px; flex: none; color: var(--logo-encre); transition: color .3s var(--ease), filter .3s var(--ease); }
.marque__texte { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; }
.marque__nom { align-self: flex-start; width: 10.15rem; max-width: 100%; height: auto; aspect-ratio: 1157.7 / 131; color: var(--logo-nom); transition: color .3s var(--ease); }
.marque__metier { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .74rem; letter-spacing: .02em; opacity: .78; margin-top: .1rem; }
/* Sur fond sombre : lettres blanches, câble légèrement éclairci */
body[data-entete="sombre"] .entete:not(.entete--solide) .marque, html:not(.js) .entete .marque, .sombre .marque, .pied .marque { --logo-encre: var(--blanc); --logo-nom: var(--blanc); }
body[data-entete="sombre"] .entete:not(.entete--solide) .marque__logo, html:not(.js) .entete .marque__logo, .sombre .marque__logo, .pied .marque__logo { filter: brightness(1.16) saturate(1.06); }

.nav { display: none; }
.nav__liste { list-style: none; display: flex; gap: .25rem; }
.nav__lien {
  position: relative; display: block; padding: .55rem .75rem; border-radius: var(--rayon);
  text-decoration: none; font-weight: 500; font-size: .96rem; white-space: nowrap;
}
.nav__lien::after {
  content: ""; position: absolute; left: .75rem; right: .75rem; bottom: .3rem; height: 2px; border-radius: 2px;
  background: var(--marque-500); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.nav__lien:hover::after, .nav__lien[aria-current="page"]::after { transform: scaleX(1); }
body[data-entete="sombre"] .entete:not(.entete--solide) .nav__lien::after { background: var(--marque-300); }

.entete__appel { min-height: 46px; padding: .55rem 1rem; font-size: .95rem; white-space: nowrap; flex: none; }
.entete__appel .entete__appel-txt { font-variant-numeric: tabular-nums; }

.burger {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  height: 46px; min-width: 46px; padding: 0 .8rem; border-radius: var(--rayon);
  background: transparent; border: 1.5px solid currentColor; border-color: color-mix(in srgb, currentColor 35%, transparent);
  font-weight: 600; font-size: .95rem;
}
.burger__barres { position: relative; width: 18px; height: 12px; }
.burger__barres::before, .burger__barres::after, .burger__barres span { content: ""; position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor; }
.burger__barres::before { top: 0; }
.burger__barres span { top: 5px; }
.burger__barres::after { bottom: 0; right: 5px; }

/* Panneau de menu (mobile et tablette) */
.menu {
  position: fixed; inset: 0; z-index: 120; background: var(--graphite-950); color: var(--porcelaine-100);
  display: flex; flex-direction: column; padding: 0 var(--gouttiere) calc(24px + env(safe-area-inset-bottom));
  visibility: hidden; opacity: 0; transform: translateY(-12px);
  transition: opacity .3s var(--ease), transform .35s var(--ease), visibility 0s linear .35s;
  overflow-y: auto;
}
.menu--ouvert { visibility: visible; opacity: 1; transform: none; transition: opacity .3s var(--ease), transform .35s var(--ease), visibility 0s; }
.menu__haut { height: var(--entete-h); display: flex; align-items: center; justify-content: space-between; flex: none; }
.menu__fermer { height: 46px; min-width: 46px; padding: 0 .9rem; border-radius: var(--rayon); background: transparent; color: inherit; border: 1.5px solid rgba(208, 213, 220, .35); font-weight: 600; display: inline-flex; align-items: center; gap: .5rem; }
.menu__fermer svg { width: 18px; height: 18px; }
.menu__liste { list-style: none; margin: 2rem 0 auto; border-top: 1px solid rgba(177, 185, 195, .16); }
.menu__liste li { border-bottom: 1px solid rgba(177, 185, 195, .16); }
.menu__liste a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.05rem 0; text-decoration: none; font-family: var(--f-titre); font-size: clamp(1.3rem, 1rem + 1.6vw, 1.75rem); letter-spacing: -.02em; }
.menu__liste a[aria-current="page"] { color: var(--marque-300); }
.menu__liste svg { width: 20px; height: 20px; opacity: .55; }
.menu__contact { margin-top: 2rem; display: grid; gap: .8rem; }
.menu__contact p { color: var(--acier-300); font-size: .95rem; }

/* Navigation complète à partir de 1240 px : en dessous, les cinq libellés, le logo et le bouton d'appel ne tiennent pas sans collision */
@media (min-width: 77.5em) {
  .nav { display: block; }
  .burger { display: none; }
}
/* Juste au-dessus du seuil, la place manque pour la ligne « Électricité & électroménager » : le nom reste entier, sans coupure */
@media (min-width: 77.5em) and (max-width: 80.49em) {
  .entete .marque__metier { display: none; }
}
@media (max-width: 400px) {
  .entete__appel { display: none; } /* la barre d'appel mobile prend le relais */
}
@media (max-width: 340px) {
  .marque__metier { display: none; }
}
@media (max-width: 520px) {
  :root { --entete-h: 66px; }
  .marque { gap: .55rem; }
  .marque__logo { width: 40px; height: 40px; margin-block: -2px; }
  .marque__nom { width: 8.85rem; }
  .marque__metier { font-size: .7rem; letter-spacing: .005em; }
  .entete__appel .entete__appel-txt { display: none; }
  .entete__appel { padding: .55rem .8rem; }
  .entete__in { gap: .6rem; }
  .burger__mot { display: none; }
}

/* 6. Héros de l'accueil -------------------------------------------------- */
.heros {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--graphite-950); color: var(--porcelaine-100);
  min-height: min(100svh, 920px);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-top: calc(var(--entete-h) + 2rem);
}
.heros__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.heros__media picture { display: block; width: 100%; height: 100%; }
.heros__media img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%; transform: scale(1.04); transition: transform 2.4s var(--ease-out); }
.est-charge .heros__media img { transform: none; }
/* Voile directionnel + assombrissement localisé derrière le texte */
.heros__voile {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(70% 80% at 16% 64%, rgba(10, 18, 29, .72) 0%, rgba(10, 18, 29, 0) 70%),
    linear-gradient(90deg, rgba(10, 18, 29, .97) 0%, rgba(10, 18, 29, .94) 30%, rgba(10, 18, 29, .62) 52%, rgba(10, 18, 29, .14) 76%, rgba(10, 18, 29, .3) 100%),
    linear-gradient(0deg, rgba(10, 18, 29, .92) 0%, rgba(10, 18, 29, 0) 34%);
}
/* Repères d'angle façon plan technique */
.heros__reperes { position: absolute; inset: calc(var(--entete-h) + 14px) clamp(12px, 2vw, 28px) 110px; pointer-events: none; z-index: -1; }
.heros__reperes::before, .heros__reperes::after {
  content: ""; position: absolute; width: 26px; height: 26px; border-color: rgba(208, 213, 220, .38); border-style: solid;
}
.heros__reperes::before { top: 0; right: 0; border-width: 1px 1px 0 0; }
.heros__reperes::after { bottom: 0; right: 0; border-width: 0 1px 1px 0; }
.heros__corps { position: relative; padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.heros__contenu { max-width: 50rem; }
.heros__etat {
  display: inline-flex; align-items: center; gap: .65rem; margin-bottom: 1.6rem;
  font-size: .95rem; color: var(--acier-300);
}
.heros__etat .voyant { transition: background-color .6s var(--ease), box-shadow .6s var(--ease); }
.heros__etat-texte { position: relative; display: inline-grid; }
.heros__etat-texte > span { grid-area: 1 / 1; transition: opacity .5s var(--ease), transform .5s var(--ease); }
.heros__etat-texte .apres { opacity: 0; transform: translateY(6px); }
.courant-retabli .heros__etat .voyant { background: var(--voyant-300); box-shadow: 0 0 0 3px rgba(99, 211, 162, .18), 0 0 16px rgba(99, 211, 162, .7); }
.courant-retabli .heros__etat-texte .avant { opacity: 0; transform: translateY(-6px); }
.courant-retabli .heros__etat-texte .apres { opacity: 1; transform: none; }

.heros__titre { font-size: clamp(2.35rem, 1.25rem + 3.5vw, 4.4rem); font-weight: 600; letter-spacing: -.035em; line-height: 1.03; }
.heros__titre .ligne-seo {
  display: block; margin-top: 1.1rem; font-size: clamp(1.08rem, .95rem + .55vw, 1.4rem); line-height: 1.35;
  letter-spacing: -.01em; font-weight: 400; color: var(--porcelaine-200); max-width: 34rem;
}
.heros__texte { margin-top: 1.3rem; max-width: 36rem; color: var(--acier-300); font-size: 1.05rem; }
.heros__actions { margin-top: 2rem; }
.heros__bandeau { position: relative; border-top: 1px solid rgba(177, 185, 195, .18); }
.heros__bandeau ul { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.heros__bandeau li { padding: 1.15rem 1.2rem 1.25rem 0; display: flex; gap: .85rem; align-items: baseline; color: var(--acier-300); font-size: .95rem; }
.heros__bandeau li + li { padding-left: 1.2rem; border-left: 1px solid rgba(177, 185, 195, .18); }
.heros__bandeau strong { color: var(--blanc); font-family: var(--f-titre); font-weight: 600; font-size: 1.02rem; display: block; }
.heros__etoiles { color: var(--ambre-300); vertical-align: -.1em; margin-right: .35rem; }
.heros__etoiles svg { width: 14px; height: 14px; }

/* Le fil qui part du héros et descend vers la suite */
.heros__fil { position: absolute; left: var(--gouttiere); bottom: 0; width: 2px; height: 0; }

@media (max-width: 900px) {
  .heros { min-height: 0; justify-content: flex-start; padding-top: 0; }
  .heros__media { position: relative; inset: auto; height: min(58svh, 520px); z-index: 0; }
  .heros__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 18, 29, .55) 0%, rgba(10, 18, 29, 0) 26%, rgba(10, 18, 29, .15) 50%, rgba(10, 18, 29, .9) 80%, rgba(10, 18, 29, 1) 100%); }
  .heros__media img { object-position: 50% 45%; }
  .heros__voile, .heros__reperes { display: none; }
  .heros__corps { margin-top: -5.5rem; z-index: 1; }
  .heros__bandeau ul { grid-template-columns: minmax(0, 1fr); }
  .heros__bandeau li { padding: .95rem 0; }
  .heros__bandeau li + li { padding-left: 0; border-left: 0; border-top: 1px solid rgba(177, 185, 195, .14); }
}
@media (max-width: 520px) {
  .heros__actions .btn { width: 100%; }
}
/* Héros v2 (schéma SVG) : grille texte / visuel, photo fondue sous le texte */
.heros--schema { --heros-pt: calc(var(--entete-h) + 1.5rem); justify-content: center; min-height: min(88svh, 800px); padding-top: var(--heros-pt); }
/* Photo d'arrière-plan : moitié gauche du héros, voilée sous le texte et entièrement fondue au milieu,
   pour que le schéma de la maison reste sur fond uni. Le voile se termine sur la couleur exacte du fond. */
/* La zone photo suit la colonne de texte : son bord gauche reste à 10rem avant le titre (jamais avant le bord de l'écran),
   pour que le visage (flouté) tombe toujours derrière le titre, quelle que soit la largeur. Bord droit : le milieu du héros. */
.heros__photo { position: absolute; z-index: 0; top: 0; bottom: 0; left: max(0px, calc(50% - var(--conteneur) / 2 - 10rem)); right: 50%; overflow: hidden; pointer-events: none; }
@media (min-width: 1561px) {
  /* Très grands écrans : la photo ne part plus du bord de l'écran, son bord gauche se fond dans le fond */
  .heros__photo { -webkit-mask-image: linear-gradient(90deg, transparent, #000 10rem); mask-image: linear-gradient(90deg, transparent, #000 10rem); }
}
/* L'image est hors flux : la photo prend la taille de sa zone (moitié du héros, ou zone du texte sur mobile) sans jamais l'agrandir */
.heros__photo picture, .heros__photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.heros__photo img { object-fit: cover; object-position: 50% 0%; filter: saturate(.8) contrast(1.02);
  opacity: 0; transform: scale(1.04); transition: opacity 1.4s var(--ease-out), transform 2.6s var(--ease-out); }
.est-charge .heros__photo img, html:not(.js) .heros__photo img { opacity: 1; transform: none; }
.heros__photo::after { content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 18, 29, .5) 0%, rgba(10, 18, 29, 0) 22%, rgba(10, 18, 29, 0) 44%, rgba(10, 18, 29, .32) 62%, rgba(10, 18, 29, .32) 80%, rgba(10, 18, 29, .92) 100%),
    linear-gradient(90deg, rgba(10, 18, 29, .54) 0%, rgba(10, 18, 29, .6) 40%, rgba(10, 18, 29, .78) 72%, #0a121d 100%); }
/* Lisibilité sur la photo : textes secondaires éclaircis et halo sombre discret (le contraste AA est atteint sans le halo) */
.heros--schema .heros__texte, .heros--schema .heros__etat, .heros--schema .heros__lieu { color: var(--porcelaine-200); text-shadow: 0 0 2px rgba(10, 18, 29, .55), 0 1px 18px rgba(10, 18, 29, .9); }
.heros--schema .heros__titre { text-shadow: 0 2px 30px rgba(10, 18, 29, .45); }
.heros--schema .heros__corps { position: static; }
.heros--schema .heros__contenu, .heros--schema .heros__bandeau { position: relative; z-index: 1; }
.heros--schema .heros__visuel { z-index: 1; }
.heros--schema .heros__titre { font-size: clamp(2.5rem, 1.3rem + 3.9vw, 4.6rem); max-width: 12ch; }
.heros__lieu { display: inline-flex; align-items: center; gap: .55rem; margin-top: 1.1rem; font-size: .98rem; color: var(--porcelaine-200); }
.heros__lieu svg { width: 1.15em; height: 1.15em; color: var(--marque-300); flex: none; }
.heros--schema .heros__texte { margin-top: 1rem; }
.heros--schema .heros__corps { padding-bottom: clamp(2rem, 4vw, 3.5rem); }
.heros__grille { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.heros--schema .heros__contenu { max-width: 40rem; }
.heros__visuel { position: relative; }
.heros__trame { position: absolute; inset: -8% -6%; z-index: -1; opacity: .7; pointer-events: none;
  background-image: linear-gradient(rgba(177, 185, 195, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(177, 185, 195, .07) 1px, transparent 1px); background-size: 48px 48px;
  mask-image: radial-gradient(62% 60% at 55% 48%, #000 0%, transparent 100%); -webkit-mask-image: radial-gradient(62% 60% at 55% 48%, #000 0%, transparent 100%); }
.heros__tel { margin-top: 1.4rem; font-size: .95rem; color: var(--acier-300); }
.heros__tel a { color: var(--blanc); font-family: var(--f-titre); font-weight: 600; text-decoration: none; font-variant-numeric: tabular-nums; }
.heros__tel a:hover { color: var(--marque-300); }
@media (max-width: 900px) {
  .heros--schema { --heros-pt: calc(var(--entete-h) + 1.25rem); min-height: 0; padding-top: var(--heros-pt); }
  .heros--schema .heros__corps { margin-top: 0; padding-bottom: 1.5rem; }
  .heros__grille { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
  /* Mobile : identité, titre, texte, bouton principal, puis le schéma dans un espace maîtrisé */
  .heros__visuel { order: 1; grid-row: 2; width: min(100%, 360px); margin: .4rem auto 0; }
  /* La photo occupe exactement la zone du texte (même cellule de grille), du haut de l'écran au bouton,
     et s'efface vers le bas : le schéma reste sur fond uni */
  .heros--schema .heros__contenu { grid-row: 1; grid-column: 1; }
  .heros__photo { position: relative; grid-row: 1; grid-column: 1; align-self: stretch; top: auto; bottom: auto; left: auto; right: auto; width: auto;
    margin: calc(-1 * var(--heros-pt)) calc(-1 * var(--gouttiere)) 0; }
  /* Cadrage vertical réglé pour que le visage reste derrière le titre */
  .heros__photo img { object-position: 50% 14%; }
  .heros__photo::after { background: linear-gradient(180deg, rgba(10, 18, 29, .68) 0%, rgba(10, 18, 29, .64) 30%, rgba(10, 18, 29, .78) 56%, rgba(10, 18, 29, .9) 78%, #0a121d 100%); }
  .heros__trame { inset: 0; }
  .heros--schema .heros__etat { margin-bottom: 1rem; }
  .heros--schema .heros__titre { max-width: none; font-size: clamp(2.2rem, 1.2rem + 5vw, 2.8rem); }
  .heros__lieu { font-size: .92rem; margin-top: .9rem; }
  .heros--schema .heros__texte { font-size: 1rem; }
  .heros--schema .heros__actions { margin-top: 1.5rem; }
  .heros__bandeau li { padding: .8rem 0; }
}
@media (max-width: 600px) {
  /* Recadrage portrait : visage placé derrière le titre */
  .heros__photo img { object-position: 50% 20%; }
}
@media (max-width: 380px) {
  .heros--schema { --heros-pt: calc(var(--entete-h) + .75rem); padding-top: var(--heros-pt); }
  .heros--schema .heros__etat { margin-bottom: .8rem; font-size: .88rem; }
  .heros--schema .heros__titre { font-size: 2.1rem; }
  .heros__lieu { font-size: .88rem; }
  .heros--schema .heros__texte { font-size: .96rem; margin-top: .8rem; }
  .heros--schema .heros__actions { margin-top: 1.25rem; }
}

/* En-tête des pages intérieures */
.page-tete {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--graphite-950); color: var(--porcelaine-100);
  padding: calc(var(--entete-h) + clamp(2rem, 5vw, 4rem)) 0 clamp(3rem, 6vw, 5.5rem);
}
.page-tete::before { /* trame technique très discrète */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image: linear-gradient(rgba(177, 185, 195, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(177, 185, 195, .06) 1px, transparent 1px);
  background-size: 48px 48px; mask-image: linear-gradient(90deg, #000 0%, transparent 70%); -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 70%);
}
.page-tete__grille { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.page-tete__titre { font-size: clamp(2.15rem, 1.3rem + 3.4vw, 3.9rem); letter-spacing: -.032em; line-height: 1.05; }
.page-tete__intro { margin-top: 1.4rem; font-size: clamp(1.06rem, 1rem + .3vw, 1.2rem); color: var(--acier-300); max-width: 36rem; }
.page-tete .groupe-btn { margin-top: 2rem; }
.page-tete--claire { background: var(--porcelaine-100); color: var(--texte); }
.page-tete--claire::before { opacity: 1; background-image: linear-gradient(rgba(66, 77, 92, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(66, 77, 92, .07) 1px, transparent 1px); }
.page-tete--claire .page-tete__intro { color: var(--texte-2); }
@media (max-width: 900px) {
  .page-tete__grille { grid-template-columns: minmax(0, 1fr); }
}

/* Fil d'Ariane */
.ariane { margin-bottom: 1.6rem; font-size: .9rem; color: var(--acier-300); }
.ariane ol { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem .6rem; }
.ariane li { display: inline-flex; align-items: center; gap: .6rem; }
.ariane li + li::before { content: ""; width: 14px; height: 1px; background: currentColor; opacity: .6; }
.ariane a { text-decoration: none; display: inline-block; padding: .35rem 0; }
.ariane a:hover { text-decoration: underline; }
.page-tete--claire .ariane { color: var(--texte-2); }

/* 7. Cadres photo -------------------------------------------------------- */
/* Biseau d'angle, trait décalé, repère « Fig. » : une fiche technique plutôt qu'un simple rectangle */
.cadre { position: relative; margin: 0; }
.cadre__img {
  position: relative; overflow: hidden; background: var(--graphite-800);
  clip-path: polygon(0 0, calc(100% - var(--biseau)) 0, 100% var(--biseau), 100% 100%, 0 100%);
}
.cadre__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-out); }
.cadre::before { /* trait décalé */
  content: ""; position: absolute; inset: 14px -14px -14px 14px; z-index: -1; pointer-events: none;
  border: 1px solid var(--acier-300);
  clip-path: polygon(0 0, calc(100% - var(--biseau)) 0, 100% var(--biseau), 100% 100%, 0 100%);
}
.cadre--gauche::before { inset: 14px 14px -14px -14px; }
.sombre .cadre::before, .section--sombre .cadre::before, .page-tete .cadre::before { border-color: rgba(177, 185, 195, .3); }
.page-tete--claire .cadre::before { border-color: var(--acier-300); }
.cadre__legende {
  position: absolute; left: 0; bottom: 0; z-index: 1; display: inline-flex; align-items: center; gap: .55rem;
  padding: .55rem .85rem; background: var(--graphite-950); color: var(--porcelaine-100);
  font-size: .8rem; line-height: 1.25; max-width: calc(100% - 2rem);
}
.cadre__legende .voyant { width: .5rem; height: .5rem; }
.cadre__fig { font-family: var(--f-titre); font-weight: 600; color: var(--marque-300); }
.cadre:hover .cadre__img img { transform: scale(1.025); }
.cadre--rond .cadre__img { clip-path: circle(50% at 50% 50%); border-radius: 50%; aspect-ratio: 1; }
.cadre--rond::before { display: none; }
@media (max-width: 600px) {
  .cadre::before { inset: 10px -8px -10px 10px; }
  .cadre--gauche::before { inset: 10px 10px -10px -8px; }
}

/* 8. Le fil conducteur --------------------------------------------------- */
.chaine { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.chaine__intro { position: sticky; top: calc(var(--entete-h) + 2rem); }
.chaine__intro .cadre { margin-top: 2.4rem; max-width: 420px; }
.chaine__intro .cadre__img { aspect-ratio: 4 / 3; }
.circuit {
  position: relative; isolation: isolate; --x-fil: 23px; --noeud: 48px; --decal: calc(2 * var(--x-fil) + 26px);
  --fil-fond: var(--fond); /* fond opaque des pastilles et de la fin de ligne, selon la section */
  padding-left: var(--decal);
}
.section--porcelaine .circuit { --fil-fond: var(--porcelaine-100); }
.chaine--sombre .circuit, .section--sombre .circuit { --fil-fond: var(--graphite-900); }
.circuit__liste { list-style: none; }
/* Piste du fil + remplissage piloté par la lecture (--p de 0 à 1) */
.piste {
  position: absolute; z-index: 0; left: var(--x-fil); top: 22px; bottom: 0; width: 2px; --p: 0;
  background: linear-gradient(180deg, var(--acier-200) 0%, var(--acier-200) 88%, transparent 100%);
}
.piste::after {
  content: ""; position: absolute; inset: 0; transform-origin: top; transform: scaleY(var(--p));
  background: linear-gradient(180deg, var(--ambre-500) 0, var(--marque-500) 160px, var(--marque-500) 88%, transparent 100%);
}
.etape { position: relative; padding-bottom: clamp(2.4rem, 4vw, 3.4rem); }
.etape:last-child { padding-bottom: 0; }
/* La ligne s'arrête au centre du dernier nœud : le bas est couvert par le fond de la section */
.etape:last-child::after { content: ""; position: absolute; z-index: 0; left: calc(var(--x-fil) - 3px - var(--decal)); width: 8px; top: 22px; bottom: 0; background: var(--fil-fond); }
.noeud {
  position: absolute; left: calc(var(--x-fil) + 1px - var(--noeud) / 2 - var(--decal)); top: -2px;
  width: var(--noeud); height: var(--noeud); border-radius: 50%; display: grid; place-items: center; z-index: 1;
  background: var(--fil-fond); border: 1.5px solid var(--acier-300); color: var(--ardoise-500);
  font-family: var(--f-titre); font-weight: 600; font-size: .88rem; font-variant-numeric: tabular-nums;
  transition: border-color .4s var(--ease), color .4s var(--ease), background-color .4s var(--ease), box-shadow .5s var(--ease);
}
.noeud.est-allume { border-color: var(--marque-500); color: var(--marque-700); background: var(--marque-100); box-shadow: 0 0 0 6px color-mix(in srgb, var(--marque-500) 12%, transparent); }
.noeud--panne.est-allume { border-color: var(--ambre-500); color: var(--ambre-700); background: #fbefd9; box-shadow: 0 0 0 6px rgba(229, 162, 58, .16); }
.etape__titre { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem); padding-top: .6rem; }
.etape__texte { margin-top: .6rem; color: var(--texte-2); max-width: 36rem; }

/* Bifurcation : réparer / remplacer */
.fourche__question { position: relative; font-family: var(--f-titre); font-weight: 600; font-size: 1.12rem; letter-spacing: -.01em; padding-top: .55rem; }
.fourche__losange { /* le nœud de décision */
  position: absolute; z-index: 1; left: calc(var(--x-fil) + 1px - 14px - var(--decal)); top: .55rem; width: 28px; height: 28px;
  background: var(--fil-fond); border: 1.5px solid var(--acier-300); transform: rotate(45deg);
  transition: border-color .4s var(--ease), background-color .4s var(--ease), box-shadow .5s var(--ease);
}
.fourche__losange.est-allume { border-color: var(--marque-500); background: var(--marque-100); box-shadow: 0 0 0 6px color-mix(in srgb, var(--marque-500) 12%, transparent); }
.fourche__voies { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2.5vw, 1.8rem); margin-top: 2rem; }
/* Dérivation : le fil principal file à gauche, une branche part vers la voie « remplacer » */
.fourche__voies::before, .fourche__voies::after { content: ""; position: absolute; background: var(--acier-200); transition: background-color .5s var(--ease); }
.fourche__voies::before { top: -1rem; height: 2px; left: calc(var(--x-fil) - var(--decal)); right: 25%; }
.fourche__voies::after { top: -1rem; height: 1rem; width: 2px; right: calc(25% - 1px); }
.fourche:has(.fourche__losange.est-allume) .fourche__voies::before,
.fourche:has(.fourche__losange.est-allume) .fourche__voies::after { background: var(--acier-400); }
.voie {
  position: relative; padding: 1.4rem 1.4rem 1.6rem; background: var(--blanc); border: 1px solid var(--trait);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}
.voie--principale { border-color: color-mix(in srgb, var(--voyant-500) 45%, var(--trait)); box-shadow: inset 3px 0 0 var(--voyant-500); }
.voie--secondaire { box-shadow: inset 3px 0 0 var(--ambre-500); }
.voie__etiquette { display: inline-flex; align-items: center; gap: .55rem; font-size: .92rem; font-weight: 600; color: var(--voyant-700); }
.voie--secondaire .voie__etiquette { color: var(--ambre-700); }
.voie__liste { list-style: none; margin-top: 1rem; display: grid; gap: 1.2rem; }
.voie__liste li { display: grid; grid-template-columns: 2.1rem 1fr; gap: .15rem .5rem; }
.voie__num { font-family: var(--f-titre); font-weight: 600; color: var(--voyant-600); font-size: .92rem; padding-top: .12rem; font-variant-numeric: tabular-nums; }
.voie--secondaire .voie__num { color: var(--ambre-700); }
.voie__liste h3 { font-size: 1.08rem; letter-spacing: -.015em; line-height: 1.25; }
.voie__liste p { grid-column: 2; color: var(--texte-2); font-size: .97rem; margin-top: .2rem; }

@media (max-width: 1000px) {
  .chaine { grid-template-columns: minmax(0, 1fr); }
  .chaine__intro { position: static; }
  .chaine__intro .cadre { display: none; }
}
@media (max-width: 680px) {
  .circuit { --x-fil: 17px; --noeud: 36px; --decal: 52px; }
  .noeud { font-size: .78rem; }
  .etape__titre { padding-top: .35rem; }
  .fourche__losange { width: 22px; height: 22px; left: calc(var(--x-fil) + 1px - 11px - var(--decal)); top: .65rem; }
  .fourche__voies { grid-template-columns: minmax(0, 1fr); margin-top: 1.4rem; }
  .fourche__voies::before, .fourche__voies::after { display: none; }
  .voie { padding: 1.2rem 1.1rem 1.3rem; }
}

/* 9. Situations (onglets) ------------------------------------------------ */
.situations { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.situations__liste { display: grid; gap: .55rem; }
.onglet {
  position: relative; display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 1rem;
  width: 100%; padding: .85rem 1.1rem .85rem .85rem; text-align: left;
  background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon);
  font-family: var(--f-titre); font-weight: 500; font-size: 1.02rem; letter-spacing: -.01em; line-height: 1.25;
  transition: border-color .2s var(--ease), background-color .2s var(--ease), box-shadow .25s var(--ease), transform .2s var(--ease);
}
.onglet:hover { border-color: var(--acier-400); transform: translateX(3px); }
.onglet__ico { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--porcelaine-100); color: var(--graphite-700); transition: background-color .25s var(--ease), color .25s var(--ease); }
.onglet__ico svg { width: 26px; height: 26px; }
.onglet .voyant { opacity: 0; transform: scale(.4); transition: opacity .25s var(--ease), transform .3s var(--ease); }
.onglet[aria-selected="true"] { border-color: var(--graphite-900); background: var(--graphite-900); color: var(--blanc); }
.onglet[aria-selected="true"] .onglet__ico { background: rgba(255, 255, 255, .08); color: var(--marque-300); }
.onglet[aria-selected="true"] .voyant { opacity: 1; transform: none; background: var(--voyant-300); box-shadow: 0 0 12px rgba(99, 211, 162, .6); }
.panneau { display: grid; gap: 1.8rem; }
.panneau[hidden] { display: none; }
.panneau .cadre__img { aspect-ratio: 16 / 10; }
.panneau__titre { font-size: clamp(1.45rem, 1.2rem + 1vw, 2rem); }
.panneau__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem 2rem; margin-top: 1.2rem; }
.panneau__bloc h4 { font-family: var(--f-texte); font-size: .95rem; font-weight: 600; display: flex; align-items: center; gap: .5rem; margin-bottom: .4rem; letter-spacing: 0; }
.panneau__bloc p { color: var(--texte-2); font-size: .98rem; }
.panneau .groupe-btn { margin-top: 1.6rem; }
.js .panneau.entre { animation: panneau-entre .45s var(--ease-out) both; }
@keyframes panneau-entre { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 960px) {
  .situations { grid-template-columns: minmax(0, 1fr); }
  .situations__liste { grid-template-columns: 1fr 1fr; }
  .onglet { grid-template-columns: 40px 1fr; padding: .75rem; font-size: .95rem; }
  .onglet__ico { width: 40px; height: 40px; }
  .onglet__ico svg { width: 22px; height: 22px; }
  .onglet .voyant { display: none; }
  .onglet:hover { transform: none; }
}
@media (max-width: 560px) {
  .situations__liste { grid-template-columns: minmax(0, 1fr); }
  .panneau__cols { grid-template-columns: minmax(0, 1fr); }
}

/* 10. Bandes photo, avis, interlocuteur ---------------------------------- */
.bande { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.bande--inverse .bande__media { order: 2; }
.bande__media .cadre__img { aspect-ratio: 4 / 3; }
.bande__titre { font-size: clamp(1.9rem, 1.3rem + 2.3vw, 3rem); }
.bande__texte { margin-top: 1.2rem; color: var(--texte-2); font-size: 1.08rem; }
.section--sombre .bande__texte { color: var(--acier-300); }
.arguments { list-style: none; margin-top: 1.8rem; display: grid; gap: 1rem; }
.arguments li { display: grid; grid-template-columns: 1.6rem 1fr; gap: .8rem; align-items: start; }
.arguments svg { width: 1.4rem; height: 1.4rem; color: var(--marque-600); margin-top: .1rem; }
.section--sombre .arguments svg { color: var(--marque-300); }
.arguments strong { display: block; font-family: var(--f-titre); font-weight: 600; letter-spacing: -.01em; }
.arguments span { color: var(--texte-2); }
.section--sombre .arguments span { color: var(--acier-300); }
.bande .lien-suite, .bande .groupe-btn { margin-top: 2rem; }
@media (max-width: 900px) {
  .bande { grid-template-columns: minmax(0, 1fr); }
  .bande--inverse .bande__media { order: 0; }
}

/* Avis clients */
.avis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.6rem); }
.avis__carte {
  position: relative; display: flex; flex-direction: column; gap: 1.2rem; margin: 0;
  padding: clamp(1.5rem, 2.5vw, 2rem); background: var(--blanc); border: 1px solid var(--trait);
  clip-path: polygon(0 0, calc(100% - var(--biseau)) 0, 100% var(--biseau), 100% 100%, 0 100%);
}
.section--sombre .avis__carte { background: var(--graphite-800); border-color: var(--graphite-700); color: var(--porcelaine-100); }
.avis__haut { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.etoiles { display: inline-flex; gap: 2px; color: var(--ambre-500); }
.etoiles svg { width: 18px; height: 18px; }
.avis__appareil { font-size: .82rem; font-weight: 600; color: var(--marque-700); background: var(--marque-100); padding: .25rem .6rem; border-radius: 100px; white-space: nowrap; }
.section--sombre .avis__appareil { color: var(--marque-300); background: rgba(76, 200, 244, .1); }
.avis__texte { margin: 0; font-size: 1.06rem; line-height: 1.6; flex: 1; }
.avis__texte p { margin: 0; }
/* Guillemets écrits dans le HTML ; la fin de citation et le guillemet fermant forment un groupe insécable */
.insecable { white-space: nowrap; }
.avis__auteur { display: flex; align-items: center; gap: .8rem; padding-top: 1.1rem; border-top: 1px solid var(--trait); font-size: .92rem; }
.section--sombre .avis__auteur { border-color: var(--graphite-700); }
.avis__initiale { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--porcelaine-100); color: var(--graphite-800); font-family: var(--f-titre); font-weight: 600; flex: none; }
.section--sombre .avis__initiale { background: var(--graphite-700); color: var(--porcelaine-100); }
.avis__nom { font-weight: 600; display: block; }
.avis__meta { color: var(--texte-2); }
.section--sombre .avis__meta { color: var(--acier-300); }
.avis__pied { margin-top: 1.8rem; display: flex; flex-wrap: wrap; gap: .8rem 1.6rem; align-items: center; justify-content: space-between; color: var(--texte-2); font-size: .92rem; }
@media (max-width: 960px) { .avis { grid-template-columns: minmax(0, 1fr); max-width: 40rem; } }

/* Votre interlocuteur */
.interlocuteur { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.interlocuteur__titre { font-size: clamp(1.9rem, 1.3rem + 2.3vw, 3rem); }
.interlocuteur__texte { margin-top: 1.2rem; color: var(--texte-2); font-size: 1.08rem; }
.citation-courte { margin: 1.8rem 0 0; padding: 1rem 0 0 1.2rem; border-left: 2px solid var(--marque-500); font-family: var(--f-titre); font-size: 1.12rem; letter-spacing: -.01em; line-height: 1.45; }
.citation-courte footer { margin-top: .5rem; font-family: var(--f-texte); font-size: .88rem; color: var(--texte-2); letter-spacing: 0; }
.interlocuteur__visuel { max-width: 440px; width: 100%; padding: 0 0 2.5rem 1.5rem; }
.interlocuteur__reperes { list-style: none; margin-top: 1.6rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.6rem; }
.interlocuteur__reperes li { padding-top: .9rem; border-top: 2px solid var(--graphite-900); }
.interlocuteur__reperes strong { display: block; font-family: var(--f-titre); font-weight: 600; letter-spacing: -.01em; }
.interlocuteur__reperes span { color: var(--texte-2); font-size: .95rem; }
@media (max-width: 900px) {
  .interlocuteur { grid-template-columns: minmax(0, 1fr); }
  .interlocuteur__visuel { max-width: 400px; }
}
@media (max-width: 480px) { .interlocuteur__reperes { grid-template-columns: minmax(0, 1fr); } }

/* Portrait (bloc conservé de la v1, non utilisé en v2 : l'entreprise est présentée collectivement) */
.portrait { position: relative; margin: 0; }
.portrait__cadre {
  position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--graphite-800);
  clip-path: polygon(0 0, calc(100% - var(--biseau)) 0, 100% var(--biseau), 100% 100%, 0 100%);
}
.portrait__cadre img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transition: transform 1.2s var(--ease-out); }
.portrait:hover .portrait__cadre img { transform: scale(1.02); }
.portrait::before { /* trait décalé */
  content: ""; position: absolute; inset: 16px -16px -16px 16px; z-index: -1; pointer-events: none; border: 1px solid var(--acier-300);
  clip-path: polygon(0 0, calc(100% - var(--biseau)) 0, 100% var(--biseau), 100% 100%, 0 100%);
}
.sombre .portrait::before { border-color: rgba(177, 185, 195, .3); }
.portrait__badge {
  position: absolute; top: -16px; left: -16px; z-index: 1; margin: 0;
  display: grid; gap: .15rem; padding: .7rem 1rem .75rem; border-radius: 12px; line-height: 1.1;
  background: var(--marque-600); color: var(--blanc); font-family: var(--f-titre); font-weight: 600;
  box-shadow: 0 0 0 5px var(--fond), 0 18px 34px -16px rgba(11, 114, 197, .9);
}
.sombre .portrait__badge { box-shadow: 0 0 0 5px var(--graphite-950), 0 18px 34px -16px rgba(0, 0, 0, .8); }
.section--porcelaine .portrait__badge { box-shadow: 0 0 0 5px var(--porcelaine-100), 0 18px 34px -16px rgba(11, 114, 197, .9); }
.portrait__badge-nb { font-size: 1.55rem; letter-spacing: -.035em; }
.portrait__badge-txt { font-family: var(--f-texte); font-weight: 500; font-size: .84rem; opacity: .95; }
.portrait__carte {
  position: absolute; left: -1.5rem; bottom: -2.5rem; min-width: 250px; max-width: 80%;
  display: grid; gap: .2rem; padding: 1.2rem 1.4rem 1.25rem;
  background: var(--graphite-900); color: var(--porcelaine-100); border: 1px solid var(--graphite-700);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
  box-shadow: 0 30px 60px -30px rgba(10, 18, 29, .6);
}
.portrait__nom { font-family: var(--f-titre); font-weight: 600; font-size: 1.22rem; letter-spacing: -.02em; }
.portrait__role { color: var(--acier-300); font-size: .92rem; }
.portrait__ligne { display: flex; align-items: center; gap: .55rem; margin-top: .7rem; padding-top: .75rem; border-top: 1px solid var(--graphite-700); font-size: .88rem; color: var(--acier-300); }
.page-tete__portrait { width: min(100%, 420px); margin: 1.5rem auto 2.5rem; }
@media (max-width: 600px) {
  .portrait__badge { top: -12px; left: -8px; padding: .55rem .8rem .6rem; }
  .portrait__badge-nb { font-size: 1.3rem; }
  .portrait__carte { left: -.5rem; min-width: 0; max-width: 88%; }
  .portrait::before { inset: 10px -8px -10px 10px; }
}

/* « Celui qui vient chez vous » + plaque signalétique */
.qui { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.qui__texte > p { color: var(--texte-2); font-size: 1.06rem; max-width: 38rem; }
.qui__texte .section__titre { margin-bottom: 1.4rem; }
.qui__texte .qui__chapo { font-family: var(--f-titre); font-size: clamp(1.25rem, 1.1rem + .6vw, 1.55rem); line-height: 1.4; letter-spacing: -.015em; color: var(--texte); margin-bottom: 1.2em; }
.plaque {
  position: sticky; top: calc(var(--entete-h) + 2rem);
  padding: 1.8rem 1.8rem 1.4rem; border-radius: 12px; color: var(--graphite-900);
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .22) 0 1px, rgba(0, 0, 0, .025) 1px 3px),
    linear-gradient(160deg, #f1f3f6 0%, #d4d9e0 45%, #e8ebef 70%, #c8ced7 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -1px 0 rgba(0, 0, 0, .08), 0 24px 50px -30px rgba(10, 18, 29, .55);
  border: 1px solid #b8c0ca;
}
.plaque__rivets span { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #99a3b0 70%); box-shadow: 0 1px 1px rgba(0, 0, 0, .25); }
.plaque__rivets span:nth-child(1) { top: 12px; left: 12px; } .plaque__rivets span:nth-child(2) { top: 12px; right: 12px; }
.plaque__rivets span:nth-child(3) { bottom: 12px; left: 12px; } .plaque__rivets span:nth-child(4) { bottom: 12px; right: 12px; }
.plaque__titre { display: flex; align-items: center; gap: .7rem; font-family: var(--f-titre); font-weight: 600; font-size: 1.2rem; letter-spacing: -.02em; padding-bottom: 1rem; border-bottom: 1.5px solid rgba(14, 25, 39, .55); }
.plaque__logo { width: 40px; height: 40px; margin-block: -3px; flex: none; color: var(--marque-800); }
.plaque__lignes { display: grid; grid-template-columns: auto minmax(0, 1fr); margin: 0; }
.plaque__lignes dt, .plaque__lignes dd { padding: .62rem 0; border-bottom: 1px solid rgba(14, 25, 39, .16); font-size: .93rem; }
.plaque__lignes dt { font-weight: 600; padding-right: 1.2rem; color: var(--ardoise-600); }
.plaque__lignes dd { margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.plaque__pied { display: flex; align-items: center; gap: .55rem; margin-top: 1rem; font-weight: 600; font-size: .92rem; }
@media (max-width: 960px) { .qui { grid-template-columns: minmax(0, 1fr); } .plaque { position: relative; top: auto; max-width: 30rem; } }

/* Appel final */
.appel-final { position: relative; overflow: hidden; }
.appel-final__grille { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(2rem, 5vw, 5rem); align-items: end; }
.appel-final__titre { font-size: clamp(2.1rem, 1.3rem + 3.2vw, 3.8rem); letter-spacing: -.035em; line-height: 1.04; }
.appel-final__texte { margin-top: 1.2rem; color: var(--texte-2); font-size: 1.1rem; max-width: 34rem; }
.appel-final__actions { display: grid; gap: .8rem; }
.appel-final__tel { display: block; font-family: var(--f-titre); font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3rem); font-weight: 600; letter-spacing: -.03em; text-decoration: none; color: var(--graphite-900); font-variant-numeric: tabular-nums; line-height: 1; }
.appel-final__tel:hover { color: var(--marque-700); }
.appel-final__legende { color: var(--texte-2); font-size: .92rem; margin-bottom: .6rem; display: flex; gap: .6rem; align-items: center; }
@media (max-width: 860px) { .appel-final__grille { grid-template-columns: minmax(0, 1fr); align-items: start; } }

/* 11. Zone d'intervention ------------------------------------------------ */
.zone { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.carte { position: relative; }
.carte svg { width: 100%; height: auto; overflow: visible; }
.carte__fond { fill: none; }
.carte__rhin { fill: none; stroke: rgba(99, 160, 190, .26); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.page-tete--claire .carte__rhin, .carte--claire .carte__rhin { stroke: rgba(70, 130, 160, .2); }
.carte__anneau { fill: none; stroke: rgba(177, 185, 195, .28); stroke-width: 1; stroke-dasharray: 3 6; }
.carte--claire .carte__anneau { stroke: rgba(66, 77, 92, .3); }
.carte__anneau-txt { fill: var(--acier-400); font-size: 12px; font-family: var(--f-texte); }
.carte__balayage { fill: url(#balayage); transform-origin: var(--cx) var(--cy); animation: balayage 9s linear infinite; }
@keyframes balayage { to { transform: rotate(360deg); } }
.carte__lien { stroke: rgba(76, 200, 244, .0); stroke-width: 1.5; transition: stroke .3s var(--ease); }
.carte__point circle.p { fill: var(--porcelaine-100); stroke: var(--graphite-900); stroke-width: 2; transition: r .25s var(--ease), fill .25s var(--ease); }
.carte--claire .carte__point circle.p { fill: var(--graphite-900); stroke: var(--porcelaine-50); }
.carte__point text { fill: var(--porcelaine-200); font-size: 13.5px; font-family: var(--f-texte); font-weight: 500; paint-order: stroke; stroke: var(--graphite-900); stroke-width: 4px; stroke-linejoin: round; }
.carte--claire .carte__point text { fill: var(--graphite-900); stroke: var(--porcelaine-100); }
.carte__point.est-actif circle.p { fill: var(--marque-300); r: 7; }
.carte__point.est-actif text { fill: var(--blanc); font-weight: 600; }
.carte--claire .carte__point.est-actif text { fill: var(--marque-700); }
.carte__point.est-actif .carte__lien { stroke: rgba(76, 200, 244, .55); }
.carte__base circle.halo { fill: rgba(76, 200, 244, .14); animation: pulsation 2.8s var(--ease) infinite; transform-origin: center; transform-box: fill-box; }
.carte__base circle.coeur { fill: var(--marque-300); stroke: var(--graphite-900); stroke-width: 3; }
.carte__base text { fill: var(--blanc); font-family: var(--f-titre); font-weight: 600; font-size: 16px; paint-order: stroke; stroke: var(--graphite-900); stroke-width: 5px; }
.carte--claire .carte__base text { fill: var(--graphite-900); stroke: var(--porcelaine-100); }
@keyframes pulsation { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.8); opacity: 0; } }
.carte__repere text { fill: var(--acier-400); font-size: 13px; font-family: var(--f-texte); font-style: italic; }
.carte__repere circle { fill: none; stroke: var(--acier-400); stroke-width: 1.5; }
.carte__pays { fill: var(--acier-400); font-size: 12px; font-family: var(--f-texte); letter-spacing: .04em; }
.carte__note { margin-top: .8rem; font-size: .85rem; color: var(--acier-400); }
@media (max-width: 600px) {
  .carte__point text { font-size: 19px; stroke-width: 5px; }
  .carte__base text { font-size: 22px; }
  .carte__anneau-txt, .carte__pays, .carte__repere text { font-size: 17px; }
}
.communes { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.6rem; }
.commune {
  display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .8rem; border-radius: 100px;
  background: transparent; border: 1px solid rgba(177, 185, 195, .3); color: inherit; font-size: .93rem;
  transition: border-color .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease);
}
.commune::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .5; }
.commune:hover, .commune.est-actif { border-color: var(--marque-300); color: var(--blanc); background: rgba(76, 200, 244, .1); }
.commune.est-actif::before { background: var(--marque-300); opacity: 1; }
.commune--base { border-color: var(--marque-300); }
.carte--claire ~ * .commune, .zone--claire .commune { border-color: var(--acier-300); }
.zone--claire .commune:hover, .zone--claire .commune.est-actif { color: var(--marque-700); border-color: var(--marque-500); background: var(--marque-100); }
.zone__texte { margin-top: 1.2rem; color: var(--acier-300); }
.zone--claire .zone__texte { color: var(--texte-2); }
.zone--tete { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }
@media (max-width: 960px) { .zone, .zone--tete { grid-template-columns: minmax(0, 1fr); } }

/* Encadré « vous nous connaissiez à Fegersheim » */
.encart {
  position: relative; padding: clamp(1.6rem, 3vw, 2.4rem); background: var(--blanc); border: 1px solid var(--trait);
  display: grid; grid-template-columns: auto 1fr; gap: 1.4rem; align-items: start;
  clip-path: polygon(0 0, calc(100% - var(--biseau)) 0, 100% var(--biseau), 100% 100%, 0 100%);
}
.encart__ico { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--marque-100); color: var(--marque-700); }
.encart__ico svg { width: 26px; height: 26px; }
.encart h2, .encart h3 { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); }
.encart p { margin-top: .7rem; color: var(--texte-2); }
.encart--alerte .encart__ico { background: #fbefd9; color: var(--ambre-700); }
@media (max-width: 560px) { .encart { grid-template-columns: minmax(0, 1fr); } }

/* 12. Pages intérieures -------------------------------------------------- */
/* Index des appareils (suit la lecture) */
.index-appareils { position: sticky; top: var(--entete-h); z-index: 20; background: rgba(244, 246, 249, .92); border-bottom: 1px solid var(--trait); }
@supports (backdrop-filter: blur(8px)) { .index-appareils { background: rgba(244, 246, 249, .8); backdrop-filter: blur(12px); } }
.index-appareils ul { list-style: none; display: flex; gap: .4rem; overflow-x: auto; padding-block: .7rem; scrollbar-width: none; }
.index-appareils ul::-webkit-scrollbar { display: none; }
.index-appareils a { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .85rem; border-radius: 100px; text-decoration: none; font-size: .93rem; font-weight: 500; white-space: nowrap; border: 1px solid transparent; transition: background-color .2s var(--ease), border-color .2s var(--ease); }
.index-appareils a:hover { border-color: var(--acier-300); }
.index-appareils a.est-actif { background: var(--graphite-900); color: var(--blanc); }
.index-appareils svg { width: 18px; height: 18px; }

.fiche { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4.5rem); padding-block: clamp(3rem, 6vw, 5rem); border-bottom: 1px solid var(--trait); scroll-margin-top: calc(var(--entete-h) + 64px); }
.fiche:last-of-type { border-bottom: 0; }
.fiche__tete { display: flex; flex-direction: column; gap: 1.2rem; }
.fiche__ico { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--graphite-900); color: var(--marque-300); }
.fiche__ico svg { width: 34px; height: 34px; }
.fiche__titre { font-size: clamp(1.6rem, 1.25rem + 1.4vw, 2.3rem); }
.fiche__intro { color: var(--texte-2); }
.fiche .cadre__img { aspect-ratio: 4 / 3; }
.fiche__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 2.2rem; align-content: start; }
.fiche__bloc h3 { font-family: var(--f-texte); font-size: 1rem; font-weight: 600; letter-spacing: 0; display: flex; gap: .55rem; align-items: center; padding-bottom: .7rem; margin-bottom: .8rem; border-bottom: 1px solid var(--trait); }
.puces { list-style: none; display: grid; gap: .55rem; }
.puces li { position: relative; padding-left: 1.3rem; color: var(--texte-2); }
.puces li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border: 1.5px solid var(--marque-500); border-radius: 50%; }
.puces--ambre li::before { border-color: var(--ambre-500); }
/* Dans les couples d'état (à surveiller / sans risque, remplacer / réparer), la puce garde la couleur du signal */
.fiche__bloc .puces:not(.puces--ambre) li::before, .balance__col--reparer .puces li::before { border-color: var(--voyant-500); }
.section--sombre .puces li { color: var(--acier-300); }
.fiche__action { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.4rem; padding-top: 1.4rem; }
@media (max-width: 960px) { .fiche { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .fiche__cols { grid-template-columns: minmax(0, 1fr); } }

/* Déroulé d'une intervention */
.deroule { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; counter-reset: deroule; position: relative; }
.deroule li { position: relative; padding: 2.4rem 1.6rem 0 0; }
.deroule li::before { content: ""; position: absolute; left: 0; right: 0; top: 13px; height: 2px; background: rgba(177, 185, 195, .25); }
.deroule li::after { content: ""; position: absolute; left: 0; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--graphite-900); border: 2px solid var(--marque-300); box-shadow: 0 0 12px rgba(76, 200, 244, .5); }
.deroule__num { font-family: var(--f-titre); font-weight: 600; color: var(--marque-300); font-size: .92rem; font-variant-numeric: tabular-nums; }
.deroule h3 { font-size: 1.2rem; margin-top: .45rem; }
.deroule p { margin-top: .55rem; color: var(--acier-300); font-size: .98rem; }
@media (max-width: 900px) {
  .deroule { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .deroule li { padding: 0 0 2rem 2.6rem; }
  .deroule li::before { left: 7px; right: auto; top: 18px; bottom: 0; width: 2px; height: auto; }
  .deroule li:last-child::before { display: none; }
  .deroule li::after { top: 2px; }
}

/* Questions fréquentes */
.faq { max-width: 52rem; border-top: 1px solid var(--trait); }
.faq details { border-bottom: 1px solid var(--trait); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1.5rem; align-items: center;
  padding: 1.3rem 0; font-family: var(--f-titre); font-weight: 600; font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); letter-spacing: -.015em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 14px; height: 14px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-3px, -3px); transition: transform .3s var(--ease); opacity: .6; }
.faq details[open] summary::after { transform: rotate(225deg) translate(-3px, -3px); }
.faq__rep { padding: 0 0 1.4rem; color: var(--texte-2); max-width: 44rem; }

/* Jauge « réparer ou remplacer » */
.jauge-zone { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.questions { display: grid; gap: 1.6rem; }
.question { border: 0; margin: 0; padding: 0; min-width: 0; }
.question legend { font-family: var(--f-titre); font-weight: 600; font-size: 1.08rem; letter-spacing: -.01em; padding: 0; margin-bottom: .75rem; display: flex; gap: .7rem; align-items: baseline; }
.question legend span { color: var(--marque-300); font-size: .9rem; font-variant-numeric: tabular-nums; }
.choix { display: flex; flex-wrap: wrap; gap: .5rem; }
.choix label { position: relative; }
.choix input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choix span {
  display: inline-flex; align-items: center; min-height: 44px; padding: .55rem 1rem; border-radius: var(--rayon);
  border: 1px solid rgba(177, 185, 195, .3); font-size: .95rem; cursor: pointer;
  transition: border-color .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease);
}
.choix span:hover { border-color: var(--acier-300); }
.choix input:checked + span { background: var(--porcelaine-100); color: var(--graphite-950); border-color: var(--porcelaine-100); font-weight: 600; }
.choix input:focus-visible + span { outline: 2px solid var(--marque-300); outline-offset: 2px; }
.jauge { position: sticky; top: calc(var(--entete-h) + 2rem); padding: clamp(1.5rem, 3vw, 2.4rem); background: var(--graphite-800); border: 1px solid var(--graphite-700); clip-path: polygon(0 0, calc(100% - var(--biseau)) 0, 100% var(--biseau), 100% 100%, 0 100%); }
.jauge > svg { width: 100%; height: auto; max-width: 440px; margin-inline: auto; }
.jauge__arc { fill: none; stroke-width: 14; stroke-linecap: butt; }
.jauge__graduation { stroke: var(--acier-400); stroke-width: 1.5; }
.jauge__lib { fill: var(--acier-300); font-family: var(--f-titre); font-size: 15px; font-weight: 600; }
.jauge__aiguille { transform-origin: 220px 232px; transform: rotate(var(--angle, 0deg)); transition: transform 1s cubic-bezier(.34, 1.4, .5, 1); }
.jauge__aiguille line { stroke: var(--blanc); stroke-width: 3; stroke-linecap: round; }
.jauge__axe { fill: var(--graphite-950); stroke: var(--blanc); stroke-width: 3; }
.jauge__verdict { text-align: center; margin-top: 1rem; }
.jauge__verdict strong { display: block; font-family: var(--f-titre); font-size: clamp(1.4rem, 1.2rem + .9vw, 1.9rem); letter-spacing: -.02em; color: var(--blanc); }
.jauge__verdict p { margin-top: .6rem; color: var(--acier-300); font-size: .98rem; }
.jauge__rappel { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--graphite-700); font-size: .9rem; color: var(--acier-300); display: flex; gap: .6rem; align-items: flex-start; }
.jauge__rappel .voyant { margin-top: .45rem; }
.jauge__actions { margin-top: 1.4rem; display: grid; gap: .6rem; }
@media (max-width: 960px) {
  .jauge-zone { grid-template-columns: minmax(0, 1fr); }
  .jauge { position: static; }
}

/* Tambour gradué (en-tête « réparer ou remplacer ») */
.tambour { position: relative; width: min(100%, 460px); margin-inline: auto; padding: 7%; }
.tambour .graduations { position: absolute; inset: 0; width: 100%; height: 100%; animation: tambour 60s linear infinite; }
@keyframes tambour { to { transform: rotate(360deg); } }
.tambour .cadre__img { box-shadow: 0 0 0 1px rgba(177, 185, 195, .25); }

/* Balance pour / contre */
.balance { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--trait); background: var(--blanc); }
.balance__col { padding: clamp(1.6rem, 3vw, 2.6rem); }
.balance__col + .balance__col { border-left: 1px solid var(--trait); }
.balance__col h3 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.55rem); display: flex; align-items: center; gap: .7rem; margin-bottom: 1.2rem; }
.balance__col--reparer h3 { color: var(--voyant-700); }
.balance__col h3 svg { width: 1.3em; height: 1.3em; color: var(--ambre-700); }
.balance__col--reparer h3 svg { color: var(--voyant-600); }
@media (max-width: 760px) { .balance { grid-template-columns: minmax(0, 1fr); } .balance__col + .balance__col { border-left: 0; border-top: 1px solid var(--trait); } }

/* Services de remplacement */
.services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--trait); }
.service { display: grid; grid-template-columns: 56px 1fr; gap: 1.2rem; padding: 1.8rem 1.6rem 1.8rem 0; border-bottom: 1px solid var(--trait); }
.service:nth-child(even) { padding-left: 1.6rem; border-left: 1px solid var(--trait); }
.service__ico { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--porcelaine-100); color: var(--graphite-800); }
.service__ico svg { width: 28px; height: 28px; }
.service h3 { font-size: 1.2rem; }
.service p { margin-top: .45rem; color: var(--texte-2); }
@media (max-width: 760px) { .services { grid-template-columns: minmax(0, 1fr); } .service:nth-child(even) { padding-left: 0; border-left: 0; } .service { padding-right: 0; } }

/* Frise des adresses */
.frise { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); position: relative; }
.frise--quatre { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.section--porcelaine .frise li::after { background: var(--porcelaine-100); }
.section--porcelaine .frise li.est-actuel::after { background: var(--marque-500); }
.frise li { position: relative; padding: 3rem 1.6rem 0 0; }
.frise li::before { content: ""; position: absolute; left: 0; right: 0; top: 15px; height: 2px; background: var(--acier-200); }
.frise li::after { content: ""; position: absolute; left: 0; top: 8px; width: 16px; height: 16px; border-radius: 50%; background: var(--fond); border: 2px solid var(--acier-400); }
.frise li.est-actuel::after { background: var(--marque-500); border-color: var(--marque-500); box-shadow: 0 0 0 6px color-mix(in srgb, var(--marque-500) 16%, transparent); }
.frise li.est-actuel::before { background: linear-gradient(90deg, var(--marque-500), var(--acier-200)); }
.frise__annee { font-family: var(--f-titre); font-weight: 600; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.frise h3 { font-size: 1.1rem; margin-top: .3rem; }
.frise p { margin-top: .4rem; color: var(--texte-2); font-size: .98rem; }
@media (max-width: 900px) { .frise--quatre { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; } }
@media (max-width: 760px) {
  .frise, .frise--quatre { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .frise li { padding: 0 0 2rem 2.4rem; }
  .frise li::before { left: 7px; right: auto; top: 20px; bottom: 0; width: 2px; height: auto; }
  .frise li:last-child::before { display: none; }
  .frise li::after { top: 4px; }
}

/* Anatomie d'un lave-linge (page L'artisan) */
.savoirs { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4rem; margin-bottom: clamp(3rem, 6vw, 4.5rem); }
.savoir { padding-top: 1rem; border-top: 2px solid var(--c, var(--acier-300)); }
.savoir strong { display: block; font-family: var(--f-titre); font-weight: 600; font-size: 1.15rem; letter-spacing: -.015em; color: var(--blanc); }
.savoir span { display: block; margin-top: .4rem; color: var(--acier-300); font-size: .95rem; }
.savoir--electricite, .tag--electricite, .domaine--electricite { --c: #f0d27a; }
.savoir--electronique, .tag--electronique, .domaine--electronique { --c: #63d3a2; }
.savoir--mecanique, .tag--mecanique, .domaine--mecanique { --c: #d0d5dc; }
.savoir--hydraulique, .tag--hydraulique, .domaine--hydraulique { --c: #86bbd8; }
.anatomie { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.anatomie__schema { position: sticky; top: calc(var(--entete-h) + 1.5rem); }
.schema { width: 100%; max-width: 440px; height: auto; margin-inline: auto; overflow: visible; }
.schema__caisse { fill: rgba(255, 255, 255, .02); stroke: var(--acier-300); stroke-width: 2; }
.schema__detail { fill: none; stroke: rgba(177, 185, 195, .42); stroke-width: 1.5; }
.schema__cache { fill: none; stroke: rgba(177, 185, 195, .28); stroke-width: 1.5; stroke-dasharray: 4 6; }
.schema__vitre { fill: rgba(134, 187, 216, .06); stroke: rgba(177, 185, 195, .5); stroke-width: 1.5; }
.piece { cursor: pointer; transition: opacity .35s var(--ease); }
.piece__forme * { fill: none; stroke: rgba(177, 185, 195, .6); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s var(--ease), stroke-width .3s var(--ease); }
.piece[data-piece="joint"] .piece__forme circle { stroke-width: 7; stroke: rgba(177, 185, 195, .22); }
.piece__point { fill: var(--graphite-900); stroke: var(--marque-300); stroke-width: 2; transition: fill .25s var(--ease); }
.piece__halo { fill: rgba(76, 200, 244, .22); opacity: 0; transform-box: fill-box; transform-origin: center; }
.piece:hover .piece__forme * { stroke: var(--porcelaine-100); }
.piece.est-actif .piece__forme * { stroke: var(--marque-300); stroke-width: 2.6; }
.piece.est-actif[data-piece="joint"] .piece__forme circle { stroke: rgba(76, 200, 244, .55); stroke-width: 8; }
.piece.est-actif .piece__point { fill: var(--marque-300); }
.piece.est-actif .piece__halo { opacity: 1; animation: pulsation 2.4s var(--ease) infinite; }
.anatomie__legende { margin-top: 1rem; text-align: center; font-size: .86rem; color: var(--acier-400); }
.domaines { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.4rem; }
.domaine {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 40px; padding: .4rem .85rem; border-radius: 100px;
  background: transparent; color: var(--porcelaine-100); border: 1px solid rgba(177, 185, 195, .3); font-size: .9rem; font-weight: 500;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.domaine::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--acier-300)); }
.domaine[data-domaine="tout"]::before { background: conic-gradient(#f0d27a 0 25%, #63d3a2 0 50%, #d0d5dc 0 75%, #86bbd8 0); }
.domaine:hover { border-color: var(--acier-300); }
.domaine[aria-pressed="true"] { background: var(--porcelaine-100); color: var(--graphite-950); border-color: var(--porcelaine-100); font-weight: 600; }
.anatomie__fiche { min-height: 15rem; }
.fiche-piece { padding: clamp(1.4rem, 3vw, 2rem); background: var(--graphite-800); border: 1px solid var(--graphite-700); clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%); }
.js .fiche-piece.entre { animation: panneau-entre .4s var(--ease-out) both; }
.fiche-piece__nom { font-size: clamp(1.35rem, 1.15rem + .8vw, 1.8rem); color: var(--blanc); }
.fiche-piece__tags { display: flex; flex-wrap: wrap; gap: .4rem; margin: .7rem 0 1.1rem; }
.tag { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 600; padding: .2rem .6rem; border-radius: 100px; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); }
.tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.fiche-piece dl { margin: 0; display: grid; gap: .25rem; }
.fiche-piece dt { font-weight: 600; font-size: .86rem; color: var(--marque-300); margin-top: .7rem; }
.fiche-piece dt:first-child { margin-top: 0; }
.fiche-piece dd { margin: 0; color: var(--porcelaine-200); }
.pieces { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; margin-top: 1.2rem; }
.piece-btn {
  width: 100%; display: flex; align-items: center; gap: .65rem; min-height: 46px; padding: .55rem .8rem; text-align: left;
  background: transparent; color: var(--porcelaine-100); border: 1px solid rgba(177, 185, 195, .2); border-radius: var(--rayon); font-size: .93rem; line-height: 1.25;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), opacity .3s var(--ease);
}
.piece-btn:hover { border-color: var(--acier-300); }
.piece-btn__point { flex: none; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--marque-300); }
.piece-btn[aria-pressed="true"] { background: rgba(76, 200, 244, .1); border-color: var(--marque-300); font-weight: 600; }
.piece-btn[aria-pressed="true"] .piece-btn__point { background: var(--marque-300); }
/* Filtre par savoir-faire : les pièces des autres domaines s'estompent */
[data-domaine="electricite"] .piece:not([data-domaines~="electricite"]), [data-domaine="electricite"] .piece-btn:not([data-domaines~="electricite"]),
[data-domaine="electronique"] .piece:not([data-domaines~="electronique"]), [data-domaine="electronique"] .piece-btn:not([data-domaines~="electronique"]),
[data-domaine="mecanique"] .piece:not([data-domaines~="mecanique"]), [data-domaine="mecanique"] .piece-btn:not([data-domaines~="mecanique"]),
[data-domaine="hydraulique"] .piece:not([data-domaines~="hydraulique"]), [data-domaine="hydraulique"] .piece-btn:not([data-domaines~="hydraulique"]) { opacity: .28; }
/* les boutons estompés restent lisibles (contraste AA) */
.anatomie .piece-btn { --estompe: .56; }
[data-domaine="electricite"] .piece-btn:not([data-domaines~="electricite"]), [data-domaine="electronique"] .piece-btn:not([data-domaines~="electronique"]),
[data-domaine="mecanique"] .piece-btn:not([data-domaines~="mecanique"]), [data-domaine="hydraulique"] .piece-btn:not([data-domaines~="hydraulique"]) { opacity: var(--estompe); }
[data-domaine="electricite"] .piece[data-domaines~="electricite"] .piece__forme *,
[data-domaine="electronique"] .piece[data-domaines~="electronique"] .piece__forme *,
[data-domaine="mecanique"] .piece[data-domaines~="mecanique"] .piece__forme *,
[data-domaine="hydraulique"] .piece[data-domaines~="hydraulique"] .piece__forme * { stroke: var(--porcelaine-50); }
.autres { margin-top: clamp(3.5rem, 7vw, 5.5rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--graphite-700); }
.autres__titre { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.9rem); color: var(--blanc); margin-bottom: .6rem; }
.autres__intro { color: var(--acier-300); margin-bottom: 1.6rem; max-width: 40rem; }
.autres__liste { list-style: none; display: grid; grid-template-columns: 1fr; gap: .9rem; }
.autres__liste li { display: flex; flex-direction: column; gap: .7rem; padding: 1.25rem 1.2rem 1.35rem; background: var(--graphite-800); border: 1px solid var(--graphite-700); border-radius: var(--rayon); }
.autre__ico { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(76, 200, 244, .1); color: var(--marque-300); flex: none; }
.autre__ico svg { width: 24px; height: 24px; }
.autres__liste h3 { font-size: 1.05rem; color: var(--blanc); }
.autres__liste p { margin-top: .3rem; color: var(--acier-300); font-size: .93rem; line-height: 1.5; }
@media (min-width: 560px) {
  .autres__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .autres__liste li:last-child:nth-child(odd) { grid-column: 1 / -1; flex-direction: row; align-items: flex-start; }
}
@media (min-width: 1180px) {
  .autres__liste { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
  .autres__liste li:last-child:nth-child(odd) { grid-column: auto; flex-direction: column; }
}
@media (max-width: 1000px) { .savoirs { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) {
  .anatomie { grid-template-columns: minmax(0, 1fr); }
  .anatomie__schema { position: static; }
  .schema { max-width: 340px; }
}
@media (max-width: 520px) { .savoirs, .pieces { grid-template-columns: minmax(0, 1fr); } }

/* Le diagnostic, geste par geste */
.gestes { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.2rem, 2.5vw, 2rem); }
.gestes li { padding-top: 1.3rem; border-top: 2px solid var(--graphite-900); }
.gestes__ico { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--marque-100); color: var(--marque-700); margin-bottom: 1rem; }
.gestes__ico svg { width: 24px; height: 24px; }
.gestes h3 { font-size: 1.25rem; }
.gestes p { margin-top: .5rem; color: var(--texte-2); font-size: .98rem; }
@media (max-width: 960px) { .gestes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .gestes { grid-template-columns: minmax(0, 1fr); } }

/* Réparer en 2026 */
.reperes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.6rem); }
.repere { padding: clamp(1.5rem, 3vw, 2rem); background: var(--blanc); border: 1px solid var(--trait); clip-path: polygon(0 0, calc(100% - var(--biseau)) 0, 100% var(--biseau), 100% 100%, 0 100%); }
.repere__chiffre { font-family: var(--f-titre); font-weight: 600; font-size: clamp(2rem, 1.5rem + 1.8vw, 2.8rem); letter-spacing: -.04em; line-height: 1; color: var(--marque-600); margin-bottom: 1rem; }
.repere h3 { font-size: 1.15rem; }
.repere p:last-child { margin-top: .6rem; color: var(--texte-2); font-size: .97rem; }
.reperes__conclusion { margin-top: 2rem; display: flex; gap: .7rem; align-items: baseline; font-family: var(--f-titre); font-weight: 600; font-size: 1.12rem; letter-spacing: -.01em; }
.reperes__sources { margin-top: .8rem; font-size: .84rem; color: var(--texte-2); }
@media (max-width: 900px) { .reperes { grid-template-columns: minmax(0, 1fr); max-width: 40rem; } }

/* Ce que ses clients retiennent */
.qualites { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.6rem); }
.qualites li { padding: 1.5rem 1.4rem; background: var(--porcelaine-100); border-top: 3px solid var(--marque-500); display: flex; flex-direction: column; gap: .8rem; }
.qualite__mot { font-family: var(--f-titre); font-weight: 600; font-size: clamp(1.35rem, 1.2rem + .6vw, 1.7rem); letter-spacing: -.025em; }
.qualites blockquote { margin: 0; flex: 1; color: var(--ardoise-600); font-size: 1rem; line-height: 1.5; }
.qualite__auteur { font-size: .86rem; color: var(--texte-2); }
@media (max-width: 960px) { .qualites { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .qualites { grid-template-columns: minmax(0, 1fr); } }

/* Engagements */
.engagements { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.2rem, 2.5vw, 2rem); }
.engagement { padding-top: 1.4rem; border-top: 2px solid var(--graphite-900); }
.engagement h3 { font-size: 1.25rem; display: flex; gap: .7rem; align-items: center; }
.engagement h3 svg { width: 1.3em; height: 1.3em; color: var(--marque-600); }
.section--sombre .engagement h3 svg { color: var(--marque-300); }
.engagement p { margin-top: .6rem; color: var(--texte-2); }
.section--sombre .engagement { border-color: var(--marque-300); }
.section--sombre .engagement p { color: var(--acier-300); }
@media (max-width: 760px) { .engagements { grid-template-columns: minmax(0, 1fr); } }

/* Prose (pages légales) */
.prose { max-width: 46rem; }
.prose h2 { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); margin: 2.6rem 0 .9rem; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.1rem; margin: 1.8rem 0 .6rem; }
.prose p, .prose li { color: var(--texte-2); }
.prose ul { padding-left: 1.2rem; margin: 0 0 1em; }
.prose li { margin-bottom: .35rem; }
.prose dl { display: grid; grid-template-columns: minmax(10rem, auto) 1fr; gap: .6rem 1.6rem; margin: 0 0 1em; }
.prose dt { font-weight: 600; }
.prose dd { margin: 0; color: var(--texte-2); }
.a-confirmer { background: #fbefd9; color: var(--ambre-700); padding: .05em .35em; border-radius: 3px; font-weight: 600; font-size: .92em; }
@media (max-width: 600px) { .prose dl { grid-template-columns: minmax(0, 1fr); gap: .2rem; } .prose dd { margin-bottom: .8rem; } }

/* 13. Contact et formulaire ---------------------------------------------- */
.contact { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.coordonnees { display: grid; gap: 1.6rem; position: sticky; top: calc(var(--entete-h) + 2rem); }
.coord-tel { padding: clamp(1.5rem, 3vw, 2.2rem); background: var(--graphite-900); color: var(--porcelaine-100); clip-path: polygon(0 0, calc(100% - var(--biseau)) 0, 100% var(--biseau), 100% 100%, 0 100%); }
.coord-tel p { color: var(--acier-300); }
.coord-tel__num { display: block; margin: .6rem 0 1.4rem; font-family: var(--f-titre); font-weight: 600; font-size: clamp(1.8rem, 1.3rem + 2vw, 2.6rem); letter-spacing: -.03em; text-decoration: none; color: var(--blanc); font-variant-numeric: tabular-nums; }
.coord-liste { list-style: none; display: grid; gap: 1.1rem; }
.coord-liste li { display: grid; grid-template-columns: 44px 1fr; gap: 1rem; align-items: start; }
.coord-liste .ico { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--porcelaine-100); color: var(--graphite-800); }
.coord-liste .ico svg { width: 22px; height: 22px; }
.coord-liste strong { display: block; font-family: var(--f-titre); font-weight: 600; }
.coord-liste span, .coord-liste a { color: var(--texte-2); overflow-wrap: anywhere; }
.preparer { padding: 1.4rem 1.5rem; border: 1px solid var(--trait); background: var(--blanc); }
.preparer h2 { font-size: 1.1rem; margin-bottom: .8rem; }

.formulaire { padding: clamp(1.5rem, 3.5vw, 2.8rem); background: var(--blanc); border: 1px solid var(--trait); }
.formulaire__titre { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); }
.formulaire__intro { color: var(--texte-2); margin-top: .6rem; }
.champs { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem 1.2rem; margin-top: 1.8rem; }
.champ { display: grid; gap: .4rem; align-content: start; }
.champ--large { grid-column: 1 / -1; }
.champ label { font-weight: 600; font-size: .95rem; }
.champ .facultatif { font-weight: 400; color: var(--texte-2); font-size: .88rem; }
.champ input, .champ select, .champ textarea {
  width: 100%; min-height: 50px; padding: .75rem .9rem; border-radius: var(--rayon);
  border: 1.5px solid var(--acier-300); background: var(--porcelaine-50);
  transition: border-color .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease);
}
.champ textarea { min-height: 140px; resize: vertical; line-height: 1.5; }
.champ select { appearance: none; -webkit-appearance: none; padding-right: 2.6rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 7.5l5 5 5-5' fill='none' stroke='%23424d5c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .8rem center; background-size: 18px; }
.champ input:hover, .champ select:hover, .champ textarea:hover { border-color: var(--acier-400); }
.champ input:focus, .champ select:focus, .champ textarea:focus { border-color: var(--marque-500); background-color: var(--blanc); box-shadow: 0 0 0 4px color-mix(in srgb, var(--marque-500) 18%, transparent); outline: none; }
.champ .aide { font-size: .86rem; color: var(--texte-2); }
.champ .erreur { display: none; font-size: .88rem; font-weight: 600; color: #a3321f; }
.champ.est-invalide input, .champ.est-invalide select, .champ.est-invalide textarea { border-color: #b83d27; background: #fdf4f2; }
.champ.est-invalide .erreur { display: flex; gap: .4rem; align-items: center; }
.pot-de-miel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulaire__bas { margin-top: 1.6rem; display: grid; gap: 1rem; }
.formulaire__rgpd { font-size: .86rem; color: var(--texte-2); }
.formulaire__resume { padding: .9rem 1rem; border-left: 3px solid #b83d27; background: #fdf4f2; color: #7c2717; font-weight: 600; font-size: .95rem; }
.formulaire__demo { padding: .9rem 1rem; border-left: 3px solid var(--ambre-500); background: #fbefd9; color: var(--ambre-700); font-size: .92rem; }
@media (max-width: 960px) {
  .contact { grid-template-columns: minmax(0, 1fr); }
  .coordonnees { display: contents; }
  .coord-tel { order: 1; } .coord-liste { order: 2; } .contact .formulaire { order: 3; } .preparer { order: 4; }
}
@media (max-width: 600px) { .champs { grid-template-columns: minmax(0, 1fr); } }

/* Pages courtes (merci, 404) */
.page-courte { min-height: 78svh; display: flex; align-items: center; padding: calc(var(--entete-h) + 3rem) 0 4rem; background: var(--graphite-950); color: var(--porcelaine-100); }
.page-courte__titre { font-size: clamp(2.2rem, 1.4rem + 3.4vw, 4rem); letter-spacing: -.035em; max-width: 22ch; }
.page-courte p { margin-top: 1.2rem; color: var(--acier-300); max-width: 38rem; font-size: 1.08rem; }
.page-courte .groupe-btn { margin-top: 2rem; }
.page-courte__code { font-family: var(--f-titre); font-weight: 600; font-size: .95rem; color: var(--ambre-300); display: flex; gap: .6rem; align-items: center; margin-bottom: 1.4rem; }

/* 14. Pied de page, barre mobile, retour en haut ------------------------- */
.pied { background: var(--graphite-950); color: var(--acier-300); padding: clamp(3.5rem, 6vw, 5rem) 0 calc(2rem + var(--barre-h)); font-size: .96rem; }
.pied__grille { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem; }
.pied .marque { color: var(--porcelaine-100); margin-bottom: 1.2rem; }
.pied__desc { max-width: 22rem; }
.pied h2 { font-family: var(--f-texte); font-size: .95rem; font-weight: 600; color: var(--porcelaine-100); letter-spacing: 0; margin-bottom: 1rem; }
.pied ul { list-style: none; display: grid; gap: .6rem; }
.pied a { text-decoration: none; }
.pied a:hover { color: var(--blanc); text-decoration: underline; }
.pied__tel { font-family: var(--f-titre); font-weight: 600; color: var(--blanc); font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.pied__bas { margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid rgba(177, 185, 195, .14); display: flex; flex-wrap: wrap; justify-content: space-between; gap: .8rem 2rem; font-size: .88rem; }
.pied__bas ul { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
@media (max-width: 960px) { .pied__grille { grid-template-columns: 1fr 1fr; } .pied__grille > :first-child { grid-column: 1 / -1; } }
@media (max-width: 520px) { .pied__grille { grid-template-columns: minmax(0, 1fr); } }

/* Barre d'appel mobile */
.barre { display: none; }
@media (max-width: 860px) {
  :root { --barre-h: calc(72px + env(safe-area-inset-bottom)); }
  .barre {
    display: grid; grid-template-columns: 1.15fr 1fr; gap: .6rem;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    padding: .7rem var(--gouttiere) calc(.7rem + env(safe-area-inset-bottom));
    background: rgba(10, 18, 29, .96); border-top: 1px solid rgba(177, 185, 195, .16);
    transform: translateY(0); transition: transform .35s var(--ease);
  }
  @supports (backdrop-filter: blur(8px)) { .barre { background: rgba(10, 18, 29, .86); backdrop-filter: blur(14px); } }
  .barre .btn { min-height: 50px; padding: .6rem .9rem; font-size: .98rem; }
  .barre .btn--contour { --btn-texte: var(--blanc); --btn-bord: rgba(208, 213, 220, .38); }
  .menu-ouvert .barre { transform: translateY(110%); }
}

/* Retour en haut : anneau qui suit la progression de lecture */
.haut {
  position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: calc(var(--barre-h) + 16px); z-index: 85;
  width: 52px; height: 52px; border-radius: 50%; border: 0; padding: 0;
  background: var(--graphite-900); color: var(--blanc); display: grid; place-items: center;
  box-shadow: 0 12px 28px -12px rgba(10, 18, 29, .55);
  opacity: 0; visibility: hidden; transform: translateY(10px) scale(.92);
  transition: opacity .3s var(--ease), transform .35s var(--ease), visibility 0s linear .35s, background-color .2s var(--ease);
}
.haut.est-visible { opacity: 1; visibility: visible; transform: none; transition: opacity .3s var(--ease), transform .35s var(--ease), visibility 0s, background-color .2s var(--ease); }
.haut:hover { background: var(--graphite-700); }
.haut svg { grid-area: 1 / 1; }
.haut__anneau { width: 52px; height: 52px; transform: rotate(-90deg); }
.haut__anneau circle { fill: none; stroke-width: 2.5; }
.haut__anneau .fond { stroke: rgba(255, 255, 255, .14); }
.haut__anneau .prog { stroke: var(--marque-300); stroke-linecap: round; stroke-dasharray: 144.5; stroke-dashoffset: calc(144.5 * (1 - var(--lecture, 0))); }
.haut__fleche { width: 20px; height: 20px; }
.menu-ouvert .haut { opacity: 0; visibility: hidden; }
@media (max-width: 860px) { .haut { width: 46px; height: 46px; right: 12px; } .haut__anneau { width: 46px; height: 46px; } }

/* 15. Apparitions et mouvement réduit ------------------------------------ */
.js [data-apparition] { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease-out), transform .9s var(--ease-out); transition-delay: var(--delai, 0s); }
.js [data-apparition].est-visible { opacity: 1; transform: none; }
.js [data-apparition="cadre"] { opacity: 1; transform: none; }
.js [data-apparition="cadre"] .cadre__img { clip-path: polygon(0 0, 0 0, 0 0, 0 100%, 0 100%); transition: clip-path 1.1s var(--ease-out); transition-delay: var(--delai, 0s); }
.js [data-apparition="cadre"].est-visible .cadre__img { clip-path: polygon(0 0, calc(100% - var(--biseau)) 0, 100% var(--biseau), 100% 100%, 0 100%); }
.js [data-apparition="cadre"]::before { opacity: 0; transform: translate(-10px, -10px); transition: opacity .8s var(--ease) .5s, transform 1s var(--ease-out) .5s; }
.js [data-apparition="cadre"].est-visible::before { opacity: 1; transform: none; }
.js .cadre--rond[data-apparition="cadre"] .cadre__img { clip-path: circle(0% at 50% 50%); }
.js .cadre--rond[data-apparition="cadre"].est-visible .cadre__img { clip-path: circle(50% at 50% 50%); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .js [data-apparition], .js [data-apparition="cadre"]::before { opacity: 1; transform: none; }
  .js [data-apparition="cadre"] .cadre__img { clip-path: polygon(0 0, calc(100% - var(--biseau)) 0, 100% var(--biseau), 100% 100%, 0 100%); }
  .js .cadre--rond[data-apparition="cadre"] .cadre__img { clip-path: circle(50% at 50% 50%); }
  .heros__media img, .heros__photo img { transform: none; }
  .carte__balayage { display: none; }
  .tambour .graduations { animation: none; }
  .piece.est-actif .piece__halo { animation: none; }
  .piste { --p: 1 !important; }
  .maison__courant path { stroke-dashoffset: 0; }
  .tableau__logement .halo, .maison__point .halo { transition: none; }
}

/* Sans JavaScript : navigation complète dans l'en-tête, tous les contenus repliés sont affichés */
html:not(.js) .entete { position: static; height: auto; background: var(--graphite-950); color: var(--blanc); }
html:not(.js) .entete__in { flex-wrap: wrap; height: auto; padding-block: .8rem; row-gap: .6rem; }
html:not(.js) .nav { display: block; width: 100%; order: 3; }
html:not(.js) .nav__liste { flex-wrap: wrap; gap: .1rem .3rem; }
html:not(.js) .burger { display: none; }
html:not(.js) .heros { padding-top: 2rem; }
html:not(.js) .page-tete { padding-top: clamp(2rem, 5vw, 4rem); }
html:not(.js) .panneau[hidden], html:not(.js) .fiche-piece[hidden] { display: grid !important; margin-top: 1.5rem; }
html:not(.js) .champ[hidden] { display: grid !important; }
html:not(.js) .haut { display: none; }

/* Impression : l'essentiel, sans habillage */
@media print {
  .entete, .barre, .haut, .menu, .heros__media, .heros__voile, .heros__photo, .index-appareils { display: none !important; }
  .heros, .page-tete, .section--sombre, .pied { background: #fff !important; color: #000 !important; }
  body { padding: 0; }
}

/* Très petits écrans : barre d'appel sur une ligne */
@media (max-width: 360px) {
  .barre { grid-template-columns: 1fr 1fr; gap: .5rem; }
  .barre .btn { padding: .6rem .6rem; font-size: .92rem; white-space: nowrap; gap: .45rem; }
}

/* 16. Électricité & électroménager (v2) ----------------------------------- */
/* Surtitre de section */
.surtitre { display: inline-flex; align-items: center; gap: .6rem; margin-bottom: 1rem; font-family: var(--f-titre); font-weight: 600; font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--marque-700); }
.surtitre::before { content: ""; width: 22px; height: 2px; background: currentColor; }
.sombre .surtitre, .section--sombre .surtitre, .heros .surtitre, .page-tete:not(.page-tete--claire) .surtitre, .metier--principal .surtitre { color: var(--marque-300); }
.surtitre--ambre, .sombre .surtitre--ambre { color: var(--ambre-300); }

/* Maison sous tension (héros de l'accueil) */
.maison { width: 100%; height: auto; overflow: visible; }
.maison__sol path { stroke: rgba(177, 185, 195, .35); stroke-width: 2; stroke-linecap: round; }
.maison__murs path { fill: none; stroke: var(--acier-300); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; opacity: .72; }
.maison__etiquettes text { fill: var(--acier-400); font-family: var(--f-texte); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.maison__tableau > rect { fill: var(--graphite-800); stroke: var(--acier-300); stroke-width: 1.6; }
.maison__module { fill: var(--graphite-700); stroke: rgba(177, 185, 195, .5); stroke-width: 1; }
.maison__levier { stroke: var(--porcelaine-200); stroke-width: 1.6; stroke-linecap: round; }
.maison__voyant { fill: var(--ambre-500); filter: drop-shadow(0 0 4px rgba(229, 162, 58, .9)); transition: fill .6s var(--ease), filter .6s var(--ease); }
.courant-retabli .maison__voyant { fill: var(--voyant-300); filter: drop-shadow(0 0 6px rgba(99, 211, 162, .9)); }
.maison__gaines path { fill: none; stroke: rgba(177, 185, 195, .3); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 2 5; }
.maison__courant path { fill: none; stroke: var(--marque-300); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 3px rgba(76, 200, 244, .55)); transition: stroke-dashoffset 1s var(--ease-out); }
.maison__courant path.est-allume, html:not(.js) .maison__courant path { stroke-dashoffset: 0; }
.maison__point .forme { fill: var(--graphite-900); stroke: var(--acier-300); stroke-width: 1.8; transition: stroke .4s var(--ease), fill .4s var(--ease); }
.maison__point .rayons { fill: none; stroke: var(--acier-300); stroke-width: 1.6; stroke-linecap: round; opacity: 0; transition: opacity .4s var(--ease), stroke .4s var(--ease); }
.maison__point .plot { fill: var(--acier-300); stroke: var(--acier-300); stroke-width: 2; stroke-linecap: round; transition: fill .4s var(--ease), stroke .4s var(--ease); }
.maison__point .halo { fill: var(--marque-300); opacity: 0; transition: opacity .6s var(--ease); }
.maison__point.est-allume .forme, html:not(.js) .maison__point .forme { stroke: var(--marque-300); }
.maison__point.est-allume .rayons, html:not(.js) .maison__point .rayons { opacity: 1; stroke: var(--marque-300); }
.maison__point.est-allume .plot, html:not(.js) .maison__point .plot { fill: var(--marque-300); stroke: var(--marque-300); }
.maison__point.est-allume .halo { opacity: .14; }
.maison__point--lampe.est-allume .forme { fill: var(--marque-300); }
.maison__point--lampe.est-allume .halo { opacity: .28; }

/* Repères chiffrés (1996, trois personnes, deux métiers) */
.reperes-cles { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem 1.6rem; margin-top: 1.8rem; }
.reperes-cles li { padding-top: .9rem; border-top: 2px solid var(--graphite-900); }
.section--sombre .reperes-cles li, .sombre .reperes-cles li { border-color: var(--marque-300); }
.reperes-cles strong { display: block; font-family: var(--f-titre); font-weight: 600; font-size: clamp(1.45rem, 1.2rem + 1vw, 2.1rem); letter-spacing: -.03em; line-height: 1.1; }
.reperes-cles span { display: block; margin-top: .3rem; color: var(--texte-2); font-size: .95rem; }
.section--sombre .reperes-cles span, .sombre .reperes-cles span { color: var(--acier-300); }
@media (max-width: 520px) { .reperes-cles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem 1rem; } }
@media (max-width: 360px) { .reperes-cles { grid-template-columns: minmax(0, 1fr); } }

/* Nos métiers : deux univers, hiérarchisés */
.metiers { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(1.2rem, 2.5vw, 2rem); align-items: stretch; }
.metier { position: relative; display: flex; flex-direction: column; padding: clamp(1.8rem, 3.5vw, 3rem); overflow: hidden; clip-path: polygon(0 0, calc(100% - var(--biseau)) 0, 100% var(--biseau), 100% 100%, 0 100%); }
.metier--principal { background: var(--graphite-900); color: var(--porcelaine-100); min-height: 32rem; }
.metier--secondaire { background: var(--blanc); border: 1px solid var(--trait); }
.section--porcelaine .metier--secondaire { background: var(--blanc); }
/* Motif de circuit : confiné au quart supérieur droit, que le texte n'occupe jamais (colonne de texte limitée à 58 %),
   fondu progressif vers le bas et la gauche ; affiché seulement quand la carte est assez large */
.metier__motif { display: none; position: absolute; z-index: 0; right: 0; top: 0; width: 40%; height: 46%; max-height: 250px; pointer-events: none; opacity: .85;
  mask-image: radial-gradient(110% 120% at 100% 0%, #000 0%, rgba(0, 0, 0, .7) 40%, transparent 78%); -webkit-mask-image: radial-gradient(110% 120% at 100% 0%, #000 0%, rgba(0, 0, 0, .7) 40%, transparent 78%); }
.metier__motif path { fill: none; stroke: rgba(76, 200, 244, .3); stroke-width: 1.5; stroke-linejoin: round; }
.metier__motif circle { fill: var(--marque-300); opacity: .7; }
.metier__corps { position: relative; z-index: 1; display: flex; flex-direction: column; flex: 1; }
@media (min-width: 961px) {
  .metier--principal .metier__motif { display: block; }
  .metier--principal .surtitre, .metier--principal .metier__titre, .metier--principal .metier__texte { max-width: 58%; }
}
.metier__titre { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.4rem); max-width: 16ch; }
.metier--secondaire .metier__titre { font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2.1rem); }
.metier__texte { margin-top: 1rem; max-width: 34rem; color: var(--acier-300); font-size: 1.05rem; }
.metier--secondaire .metier__texte { color: var(--texte-2); }
.metier__liste { list-style: none; margin-top: 1.4rem; display: grid; gap: .55rem; }
.metier__liste li { display: flex; gap: .6rem; align-items: flex-start; font-size: .98rem; }
.metier__liste svg { width: 1.2rem; height: 1.2rem; flex: none; margin-top: .2rem; color: var(--marque-300); }
.metier--secondaire .metier__liste svg { color: var(--marque-600); }
.metier__liste a { text-decoration-color: rgba(177, 185, 195, .5); }
.metier--principal .lien-suite { color: var(--marque-300); }
.metier__actions { margin-top: auto; padding-top: 2rem; display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.metier__photo { margin: 1.4rem 0 0; }
.metier__photo .cadre__img { aspect-ratio: 2.4 / 1; }
.metier__exemples { list-style: none; margin-top: 1.8rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.metier__exemples li { padding: 1rem 1rem 1.1rem; background: var(--graphite-800); border: 1px solid rgba(177, 185, 195, .18); border-radius: var(--rayon); }
.metier__exemples svg { width: 1.5rem; height: 1.5rem; color: var(--marque-300); margin-bottom: .6rem; }
.metier__exemples strong { display: block; font-family: var(--f-titre); font-weight: 600; font-size: 1rem; letter-spacing: -.01em; }
.metier__exemples span { display: block; margin-top: .3rem; color: var(--acier-300); font-size: .88rem; line-height: 1.45; }
@media (max-width: 1100px) and (min-width: 961px), (max-width: 560px) { .metier__exemples { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 960px) { .metiers { grid-template-columns: minmax(0, 1fr); } .metier--principal { min-height: 0; } }

/* Extra.fr : parcours d'achat externe, signalé comme tel */
.extra { display: grid; grid-template-columns: auto 1fr auto; gap: 1.4rem 2rem; align-items: center; padding: clamp(1.6rem, 3vw, 2.6rem); background: var(--blanc); border: 1px solid var(--trait); border-left: 4px solid var(--marque-500); }
.extra__ico { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--marque-100); color: var(--marque-700); }
.extra__ico svg { width: 30px; height: 30px; }
.extra h2, .extra h3 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); }
.extra p { margin-top: .6rem; color: var(--texte-2); max-width: 44rem; }
.extra__action { display: grid; gap: .5rem; justify-items: start; }
.note-externe { font-size: .84rem; color: var(--texte-2); display: inline-flex; gap: .4rem; align-items: center; }
.note-externe svg { width: 1em; height: 1em; }
.btn--extra { --btn-fond: var(--graphite-900); --btn-bord: var(--graphite-900); }
.btn--extra svg:last-of-type { width: .95em; height: .95em; opacity: .75; }
.section--sombre .extra { background: var(--graphite-800); border-color: var(--graphite-700); border-left-color: var(--marque-300); }
.section--sombre .extra p, .section--sombre .note-externe { color: var(--acier-300); }
.section--sombre .extra__ico { background: rgba(76, 200, 244, .12); color: var(--marque-300); }
.section--sombre .btn--extra { --btn-fond: var(--porcelaine-100); --btn-texte: var(--graphite-950); --btn-bord: var(--porcelaine-100); }
@media (max-width: 860px) { .extra { grid-template-columns: minmax(0, 1fr); } .extra__action, .extra .btn { width: 100%; } }

/* Trois parcours (page Vente & conseils) */
.parcours { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.6rem); }
.parcours__carte { display: flex; flex-direction: column; gap: .9rem; padding: clamp(1.5rem, 2.5vw, 2rem); background: var(--blanc); border: 1px solid var(--trait); clip-path: polygon(0 0, calc(100% - var(--biseau)) 0, 100% var(--biseau), 100% 100%, 0 100%); }
.parcours__ico { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--porcelaine-100); color: var(--graphite-800); }
.parcours__ico svg { width: 26px; height: 26px; }
.parcours__carte h3 { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem); }
.parcours__carte p { color: var(--texte-2); flex: 1; }
.parcours__carte .btn, .parcours__carte .lien-suite { align-self: flex-start; }
.parcours__carte--extra { border-top: 3px solid var(--marque-500); }
.parcours__carte--extra .parcours__ico { background: var(--marque-100); color: var(--marque-700); }
@media (max-width: 900px) { .parcours { grid-template-columns: minmax(0, 1fr); max-width: 40rem; } }

/* Tableau électrique interactif (page Rénovation) : un module par étape */
.tableau-bloc { margin-top: 2rem; padding: clamp(1.2rem, 2.5vw, 2rem) clamp(1rem, 2vw, 1.6rem); background: var(--graphite-900); border: 1px solid var(--graphite-700); clip-path: polygon(0 0, calc(100% - var(--biseau)) 0, 100% var(--biseau), 100% 100%, 0 100%); }
.tableau-bloc__note { margin-top: .8rem; text-align: center; font-size: .86rem; color: var(--acier-400); }
.tableau { width: 100%; max-width: 420px; height: auto; margin-inline: auto; overflow: visible; }
.tableau__coffret { fill: var(--graphite-800); stroke: var(--acier-300); stroke-width: 1.5; }
.tableau__rail { stroke: rgba(177, 185, 195, .28); stroke-width: 6; }
.tableau__titre { fill: var(--acier-400); font-family: var(--f-titre); font-size: 10px; letter-spacing: .14em; font-weight: 600; }
.module__corps { fill: var(--graphite-700); stroke: rgba(177, 185, 195, .45); stroke-width: 1.2; transition: stroke .4s var(--ease); }
.module__levier { fill: var(--porcelaine-200); transform-box: fill-box; transform-origin: center; transition: transform .35s cubic-bezier(.34, 1.4, .5, 1), fill .35s var(--ease); }
.module__led { fill: rgba(177, 185, 195, .3); transition: fill .4s var(--ease), filter .4s var(--ease); }
.module__num { fill: var(--acier-300); font-family: var(--f-titre); font-size: 11px; font-weight: 600; transition: fill .4s var(--ease); }
.module__depart { fill: none; stroke: rgba(177, 185, 195, .3); stroke-width: 2; transition: stroke .4s var(--ease); }
.module.est-allume .module__corps { stroke: var(--marque-300); }
.module.est-allume .module__levier { transform: translateY(-8px); fill: var(--marque-300); }
.module.est-allume .module__led { fill: var(--voyant-300); filter: drop-shadow(0 0 5px rgba(99, 211, 162, .9)); }
.module.est-allume .module__num { fill: var(--blanc); }
.module.est-allume .module__depart { stroke: var(--marque-300); }
.tableau__bus, .tableau__arrivee { fill: none; stroke: rgba(177, 185, 195, .3); stroke-width: 2.5; stroke-linecap: round; transition: stroke .5s var(--ease); }
.tableau__bus.est-allume, .tableau__arrivee.est-allume { stroke: var(--marque-300); }
.tableau__logement .toit, .tableau__logement .corps, .tableau__logement .porte, .tableau__logement .fenetre { fill: none; stroke: var(--acier-300); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; transition: stroke .5s var(--ease), fill .5s var(--ease); }
.tableau__logement .halo { fill: var(--marque-300); opacity: 0; transition: opacity .8s var(--ease); }
.tableau__logement.est-allume .toit, .tableau__logement.est-allume .corps, .tableau__logement.est-allume .porte { stroke: var(--marque-300); }
.tableau__logement.est-allume .fenetre { fill: var(--marque-300); stroke: var(--marque-300); }
.tableau__logement.est-allume .halo { opacity: .1; }
.tableau__legende { fill: var(--acier-400); font-family: var(--f-texte); font-size: 12px; transition: fill .5s var(--ease); }
.tableau__legende.est-allume { fill: var(--marque-300); }
.chaine--sombre .noeud { background: var(--fil-fond); border-color: rgba(177, 185, 195, .4); color: var(--acier-300); }
/* Pastille allumée : fond opaque (le fil ne transparaît jamais), teinte verte en ombre interne, halo conservé */
.chaine--sombre .noeud.est-allume { background: var(--fil-fond); border-color: var(--marque-300); color: var(--marque-300); box-shadow: inset 0 0 0 40px rgba(76, 200, 244, .14), 0 0 0 6px rgba(76, 200, 244, .1), 0 0 18px rgba(76, 200, 244, .3); }
.chaine--sombre .piste { background: linear-gradient(180deg, rgba(177, 185, 195, .3) 0%, rgba(177, 185, 195, .3) 88%, transparent 100%); }
.chaine--sombre .piste::after { background: linear-gradient(180deg, var(--marque-300) 0, var(--marque-300) 88%, transparent 100%); }
.chaine--sombre .etape__texte { color: var(--acier-300); }
@media (max-width: 1000px) { .tableau-bloc { max-width: 30rem; margin-bottom: 2.5rem; } }

/* Périmètre d'une rénovation : exemples, à préciser selon le logement */
.perimetre { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.perimetre li { display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; padding: 1.15rem 1.1rem 1.25rem; background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon); }
.perimetre svg { width: 1.6rem; height: 1.6rem; flex: none; color: var(--marque-600); margin-bottom: .2rem; }
.perimetre strong { display: block; font-family: var(--f-titre); font-weight: 600; font-size: 1.02rem; letter-spacing: -.01em; line-height: 1.25; }
.perimetre span { display: block; font-size: .9rem; line-height: 1.45; color: var(--texte-2); }
@media (max-width: 400px) {
  .perimetre { grid-template-columns: minmax(0, 1fr); }
  .perimetre li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .9rem; row-gap: .1rem; align-items: center; padding: .9rem 1rem; }
  .perimetre svg { grid-row: 1 / span 2; margin: 0; }
}
@media (min-width: 680px) { .perimetre { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .perimetre { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .9rem; } }
.perimetre__note { margin-top: 1.4rem; display: flex; gap: .7rem; align-items: flex-start; font-size: .95rem; color: var(--texte-2); max-width: 46rem; }
.perimetre__note .voyant { margin-top: .5rem; }

/* Situations sans photo (page Rénovation) */
.panneau--seul { grid-template-columns: 1fr; }
.panneau--seul .panneau__cols { margin-top: 1rem; }

/* Formulaire : champs conditionnels */
.champ[hidden] { display: none !important; }
.champ__legende { grid-column: 1 / -1; margin: .4rem 0 -.4rem; font-family: var(--f-titre); font-weight: 600; font-size: .95rem; display: flex; align-items: center; gap: .55rem; }
.champ__legende[hidden] { display: none !important; }

/* Encart « deux métiers » dans une page */
.encart--lien { align-items: center; }
.encart--lien .lien-suite { margin-top: .9rem; }