/* Feuille générée par l'usine — ne pas éditer à la main, éditer gabarit/styles.mjs. */

/* ── 1. Jetons ──────────────────────────────────────────────────────────────────────── */
:root {
  /* La direction qui a rendu cette feuille. Lue par la recette. */
  --direction: atelier;
  --encre: #1C150E;
  --texte: #2F2519;
  --doux: #5D5040;
  --marque: #3A4E56;
  --marque-fonce: #2B3A42;
  --marque-pale: #E9E1D4;
  --action: #B23A18;
  --action-fonce: #8E2C10;
  --action-clair: #EF9066;
  --action-pale: #F7EBE4;
  --fond: #EDE6DB;
  /* La surface claire. Elle valait #ffffff en dur : dans une direction à nuit CHAUDE, un
     blanc pur posé sur du papier ocre se lit comme une découpe, pas comme une carte. Une
     palette peut donc l'avancer ; celles qui ne le font pas gardent le blanc franc. */
  --surface: #FBF7F1;
  --bord: #DBD0BF;
  --pied: #17120C;

  /* Les surfaces de NUIT. --nuit porte le premier écran et les blocs d'appel ; --nuit-2
     est la surface qui se pose DESSUS (bande de chiffres, pied). L'écart entre les deux
     est de 1,2:1 — assez pour qu'un œil voie deux plans, trop peu pour qu'il voie deux
     couleurs. C'est du tone-on-tone, et c'est la mesure « environ 980 teintes, pas 2 200 ». */
  --nuit: #17120C;
  --nuit-2: #241C13;
  --accent-nuit: #D6A94E;
  --voile: rgba(255,255,255,.12);
  --voile-fort: rgba(255,255,255,.24);
  --sur-nuit: rgba(255,255,255,.80);
  --sur-nuit-doux: rgba(255,255,255,.66);

  /* LES TROIS RAYONS. Il n'y en a pas d'autre, et il n'y a plus de jeton de pilule.
     Voir l'en-tête du fichier : neuf des dix références « cher » posent leurs commandes
     entre 0 et 8 px, et VU-08 mesure 10 px de médiane tous éléments confondus.
     Les trois valeurs viennent de la DIRECTION : une plaque de constructeur et une
     devanture menuisée ne cassent pas leurs arêtes de la même façon. Elles restent toutes
     dans la bande mesurée des références (16/18 des « cher » sous 8 px). */
  --r-fin: 2px;
  --r-ctrl: 2px;
  --r-bloc: 4px;

  /* DEUX ombres, et elles sont réservées à ce qui survole réellement du contenu.
     Une ombre sur un bloc qui ne flotte pas est le tell du kit d'application : elle dit
     « objet manipulable » à propos d'un paragraphe. Le reste du site tient par le
     CONTRASTE DE SURFACE, qui est ce que font Les Bons Artisans, BOXT et IZI by EDF. */
  --e-flottant: 0 8px 26px rgba(16,32,52,.14);
  --e-nuit: 0 10px 30px rgba(0,0,0,.34);

  --gouttiere: 20px;
  --large: 1120px;
  --prose: 68ch;
  --t-court: 140ms;
  --t-moyen: 260ms;
}

/* ── 2. Base ────────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 17px; line-height: 1.65; color: var(--texte);
  background: var(--fond);
  -webkit-font-smoothing: antialiased;
  /* La réserve pour la barre collante est portée par le PIED, pas par le body : portée
     ici, elle laissait une bande claire sous le footer sombre (relecture du 26/08). */
}
img, svg { max-width: 100%; }
svg.ic { display: block; flex: none; }
a { color: var(--marque); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--marque-fonce); }
:focus-visible { outline: 3px solid var(--marque); outline-offset: 2px; border-radius: var(--r-fin); }

/* 🔴 LE DISPLAY, posé le 02/09 sur verdict de Florian (« la font de l'enseigne est très
   arrondie, ça sonne encore ARES »). Choisie à l'oeil le 02/09 parmi cinq candidates
   rendues côte à côte, toutes tirées du relevé typo des 45 références (Archivo, essayée
   d'abord, restait trop ronde ; Roboto Condensed, préférée un instant, est interdite par
   le contrat de Max §4.1). Barlow Semi Condensed : condensée, mesurée chez Cheuvreux, un
   site jugé « cher ». Une seule graisse embarquée (700), c'est la seule qu'on utilise.
   La mesure ne pouvait pas trancher seule : Inter, Montserrat et Poppins se trouvent des
   DEUX côtés du verdict cher/pauvre — le nom de la famille ne discrimine rien (VU-06),
   seule la mise en oeuvre compte. Elle porte l'ENSEIGNE et
   les TITRES ; le corps de texte reste en Plus Jakarta Sans, qui s'y lit mieux. Deux
   familles, deux rôles : c'est ce qu'exige le contrat d'allure (allure-artisan §TYPO).
   Le repli est une pile système sans system-ui seul (interdit du cookbook).
   🔴 Depuis le 02/09, la famille vient de la DIRECTION : Barlow Semi Condensed reste celle
   du rendu en service, l'atelier prend Big Shoulders Display, la devanture Zilla Slab.
   Le CORPS ne bouge dans aucune direction — on lit 600 mots dessus. */
h1, h2, h3 { color: var(--encre); margin: 0 0 .5em; font-weight: 700; text-wrap: balance;
             font-family: 'Big Shoulders Display', 'Plus Jakarta Sans', 'Segoe UI', Arial, sans-serif; }
h1 { font-size: clamp(30px, 7.4vw, 46px); line-height: 1.12; letter-spacing: -.024em; }
h2 { font-size: clamp(24px, 5vw, 32px); line-height: 1.2; letter-spacing: -.018em; }
h3 { font-size: clamp(19px, 3.4vw, 22px); line-height: 1.3; letter-spacing: -.012em; }
p { margin: 0 0 1.05em; max-width: var(--prose); }
strong { font-weight: 700; color: var(--encre); }
ul, ol { max-width: var(--prose); padding-left: 1.2em; }
li { margin-bottom: .45em; }

.enveloppe { width: 100%; max-width: var(--large); margin: 0 auto; padding: 0 var(--gouttiere); }
.section { padding: 44px 0; }
.section--pale { background: var(--marque-pale); }
.section--blanche { background: var(--surface); }
.chapeau { max-width: 58ch; }
.chapeau p { font-size: 18px; color: var(--doux); }

/* La micro-étiquette. Elle garde ses capitales espacées — c'est le SEUL endroit du site
   qui y a droit — et son filet passe de 18x2 px à 26x3 px : chez Abritherm et chez Les
   Bons Artisans (deux « cher »), le trait qui accompagne une étiquette de section est une
   BARRE franche, pas un tiret. À 2 px il se lisait comme une salissure ; à 3 px il se lit
   comme une marque d'atelier. Il ne coûte pas une couleur : il prend celle de l'étiquette. */
.oeil { display: flex; align-items: center; gap: 11px;
        font-size: 12.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
        color: var(--marque); margin: 0 0 12px; }
.oeil::before { content: ""; width: 26px; height: 3px; flex: none; background: currentColor; }
.section--pale .oeil { color: var(--marque-fonce); }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
      clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── 3. Boutons — cible 52 px, jamais moins ─────────────────────────────────────────── */
/* 🔴 LE changement le plus visible de la passe du 01/09 : la pilule disparaît. Un bouton
   pilule est le motif signature des kits d'app mobile, et il ne se rencontre chez AUCUN
   des sites artisans jugés « cher » : Les Bons Artisans pose des rectangles (2 px),
   Art Plomberie 4 px, Abritherm 6 px, BOXT 0 px. On prend 6 px — la valeur d'Abritherm,
   qui est le site du panel le plus proche du nôtre (même métier, même ville, même
   architecture d'écran : aplat de nuit + carte claire à droite).
   L'ombre portée disparaît aussi : un bouton posé dans le flux ne flotte pas. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 22px; border-radius: var(--r-ctrl);
  font-size: 17px; font-weight: 700; letter-spacing: -.005em;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: background-color var(--t-court) ease, border-color var(--t-court) ease, transform var(--t-court) ease;
}
/* Un bouton d'écran s'ENFONCE, il ne rétrécit pas : le scale(.975) était l'appui d'une
   icône d'application. Un demi-pixel de descente suffit à donner la réponse au doigt. */
.btn:active { transform: translateY(1px); }
.btn--appel { background: var(--action); color: #fff; }
.btn--appel:hover { background: var(--action-fonce); color: #fff; }
.btn--devis { background: var(--marque); color: #fff; }
.btn--devis:hover { background: var(--marque-fonce); color: #fff; }
.btn--contour { background: var(--surface); color: var(--marque-fonce); border-color: var(--bord); }
.btn--contour:hover { background: var(--marque-pale); color: var(--marque-fonce); border-color: var(--marque); }
.btn--large { width: 100%; }
.btns { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 0; }
.btns .btn { flex: 1 1 220px; }

/* ── 4. Bandeau d'urgence + en-tête ─────────────────────────────────────────────────── */
/* 🔴 Le bandeau n'est plus ROUGE (03/09). Verdict de Florian sur le site en ligne, sur
   son téléphone : « le haut de la page est trop chargé, trop de rouge ». Trois masses
   rouges tenaient dans le même écran : ce bandeau, le bouton d'appel du héros, la barre
   collante. Le rouge est la couleur de l'ACTION, et une seule action doit le porter par
   écran. Le bandeau devient une bande de nuit, le numéro en accent : il reste lisible et
   cliquable (cible de 46 px), il ne crie plus. */
.urgence {
  background: #241C13; color: var(--sur-nuit); font-size: 14.5px; font-weight: 600;
  letter-spacing: .005em; border-bottom: 1px solid rgba(255,255,255,.08);
}
/* La bande entière est cliquable : min-height 44 px, c'est une CIBLE, pas une mention. */
.urgence .enveloppe { display: flex; align-items: center; gap: 9px; min-height: 46px;
                      padding-top: 7px; padding-bottom: 7px; color: #fff; text-decoration: none; }
.urgence .enveloppe:hover { color: #fff; background: rgba(255,255,255,.10); }
.urgence strong { color: var(--accent-nuit); font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.urgence .ic { flex: none; }

/* L'en-tête reste en NUIT (décision mesurée du 26/08) : sur les trois sites du métier
   notés « cher », la bande d'urgence, la navigation et le premier écran forment UN SEUL
   bloc profond de trois étages ; sur ceux notés pauvres, une barre blanche flotte au-dessus
   d'un contenu blanc. C'est le levier d'encre le plus direct du premier écran (53 % chez
   les chers, 28 % chez les pauvres) et il ne coûte pas un mot de contenu. */
.entete { position: sticky; top: 0; z-index: 40; background: var(--nuit);
          border-bottom: 1px solid var(--voile); }
.entete .enveloppe { display: flex; align-items: center; gap: 14px; min-height: 68px; }
.marque { display: flex; align-items: center; gap: 12px; min-height: 46px; text-decoration: none;
          color: #fff; font-weight: 700; font-size: 18px; letter-spacing: -.005em; line-height: 1.1;
          font-family: 'Big Shoulders Display', 'Plus Jakarta Sans', 'Segoe UI', Arial, sans-serif; }
.marque:hover { color: var(--accent-nuit); }
/* 🔴 La PLAQUE de marque, ex-« monogramme ». C'était un carré de 42 px à rayon 14 portant
   des initiales SUR un picto fantôme : l'icône d'application, motif pour motif. Les sites
   artisans « cher » n'en ont aucun — Les Bons Artisans, Abritherm et Art Plomberie posent
   un mot, pas une vignette. On garde une plaque parce qu'une fiche client n'a pas de logo
   (SCHEMA.md) et qu'une ligne de texte nue fait « site pas fini », mais elle devient ce
   qu'elle est : une PLAQUE gravée. Presque droite (3 px), une seule chose dessus. */
.monogramme { display: grid; place-items: center; width: 40px; height: 40px; flex: none;
              border-radius: var(--r-fin); background: var(--marque); color: #fff; }
.monogramme-txt { font-size: 15px; font-weight: 800; letter-spacing: .02em; }
.marque-bloc { display: flex; flex-direction: column; min-width: 0; }
.marque-sous { font-size: 11.5px; font-weight: 700; color: var(--sur-nuit-doux); letter-spacing: .09em;
               line-height: 1.3; text-transform: uppercase; }
/* Sur 390 px, « Plombier chauffagiste · Villeurbanne » passait à la ligne et cassait
   l'en-tête en trois étages. La commune est déjà dans le H1 : elle sort du sous-titre. */
.marque-ville { display: none; }

/* Le menu est un <details> : AUCUN JavaScript sur ce site. Le repli est natif, il marche
   avec le clavier, et il survit à un JS désactivé — c'est C4 rendu structurel.
   Le bouton est en VERRE SIMULÉ (blanc à 8 % sur la nuit, jamais backdrop-filter). */
.menu { margin-left: auto; }
.menu > summary {
  list-style: none; display: flex; align-items: center; gap: 8px;
  min-height: 46px; min-width: 46px; padding: 0 14px; border-radius: var(--r-ctrl);
  border: 1px solid var(--voile-fort); background: rgba(255,255,255,.08); color: #fff;
  font-size: 14px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu[open] > summary { background: #fff; border-color: #fff; color: var(--nuit); }
/* Le panneau reste CLAIR : c'est une liste qu'on lit et sur laquelle on vise, pas un décor.
   Il SURVOLE le contenu — c'est l'un des trois seuls objets du site qui a droit à une ombre. */
.menu-panneau {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--surface); border-bottom: 2px solid var(--nuit); box-shadow: var(--e-flottant);
  padding: 4px var(--gouttiere) 14px;
}
.menu-panneau ul { list-style: none; margin: 0; padding: 0; max-width: none; }
.menu-panneau li { margin: 0; border-bottom: 1px solid var(--bord); }
.menu-panneau li:last-child { border-bottom: 0; }
.menu-panneau a { display: flex; align-items: center; gap: 12px; min-height: 54px;
                  text-decoration: none; color: var(--encre); font-weight: 700; }
.menu-panneau a:hover { color: var(--marque-fonce); }
.menu-panneau .ic { color: var(--marque); }
.entete-tel { display: none; }
/* La nav bureau n'existe qu'au-dessus de 960 px — voir la note dans gabarit.mjs. */
.nav-bureau { display: none; }

/* ── 5. Barre d'action collante — LE ticket d'entrée du marché ──────────────────────── */
/* Elle survole le contenu : ombre légitime. En revanche le fond translucide à 96 % part —
   c'est du verre d'application posé sur un site qui n'en a pas besoin. Fond opaque et un
   FILET FRANC de 2 px en nuit : la barre se lit comme un établi, pas comme un calque. */
.barre {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; gap: 10px; padding: 10px var(--gouttiere);
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--surface); border-top: 2px solid var(--nuit);
  box-shadow: 0 -8px 26px rgba(16,32,52,.14);
}
.barre .btn { flex: 1; min-height: 54px; font-size: 16.5px; padding: 0 12px; }
.barre-tel { font-variant-numeric: tabular-nums; }

/* ── 6. Héro — L'APLAT DE NUIT ──────────────────────────────────────────────────────── */
/* Le premier écran est le seul endroit du site où on a trois secondes pour valoir 10 000 €.
   Il porte donc l'aplat le plus profond de la feuille, et tout ce qui compte se détache
   dessus en blanc : titre, promesse, ligne de faits, et la carte d'appel qui, elle, reste
   BLANCHE — le plus fort contraste du site tombe exactement sur le numéro. */
.hero { position: relative; overflow: hidden; background: var(--nuit); color: var(--sur-nuit); }
/* Le motif passe DERRIÈRE le titre, en blanc à très basse opacité, et il s'efface vers la
   droite (masque de dégradé) pour ne jamais entrer sous la carte d'appel. */
.hero .motif { position: absolute; inset: 0; width: 100%; height: 100%; color: #fff;
               pointer-events: none; opacity: .16; }
.hero .enveloppe { position: relative; padding-top: 26px; padding-bottom: 30px; }
.hero h1 { color: #fff; margin-bottom: 14px; letter-spacing: -.028em; }
.hero .promesse { font-size: 18.5px; color: var(--sur-nuit); max-width: 46ch; margin-bottom: 4px; }
.hero .promesse strong { color: #fff; }
.hero .btns { margin-top: 24px; }
/* Sur mobile, la barre collante porte déjà « Appeler » : le bouton d'appel du héros était
   un rouge de plus dans le même écran (verdict de Florian, 03/09, site en ligne). Il ne
   s'affiche qu'à partir de 960 px, là où la barre collante disparaît. */
@media (max-width: 959px) { .hero .btns .btn--appel { display: none; } }
/* Sur la nuit, le bouton secondaire n'a pas de fond blanc : il devient un contour de verre,
   sinon deux pavés blancs se disputent le regard avec la carte d'appel. */
.hero .btn--contour { background: rgba(255,255,255,.08); color: #fff; border-color: var(--voile-fort); }
.hero .btn--contour:hover { background: rgba(255,255,255,.16); color: #fff; border-color: #fff; }
/* Sur l'aplat de nuit, le bouton de devis passe en BLANC PLEIN : le bleu de marque a trop
   peu d'écart avec la nuit pour se détacher comme un objet cliquable. L'appel garde le
   rouge — l'ordre des deux gestes ne change pas, seulement leur matière. */
.hero .btn--devis { background: #fff; color: var(--nuit); }
.hero .btn--devis:hover { background: var(--accent-nuit); color: var(--nuit); }
/* …sauf DANS la carte d'appel, qui est déjà blanche : là, le bouton reprend le bleu. */
.hero .carte-appel .btn--devis { background: var(--marque); color: #fff; }
.hero .carte-appel .btn--devis:hover { background: var(--marque-fonce); color: #fff; }

/* 🔴 LA LIGNE DE FAITS — ex-« épingles », ex-rangée de pastilles de verre.
   Trois jetons arrondis empilés au-dessus d'un titre, c'est la rangée de chips d'un kit
   d'app, et c'est ce qui saute aux yeux en premier sur la capture du 26/08. La référence
   qui règle la question est Art Plomberie (« cher », plombier, même architecture) : elle
   écrit ses preuves en TEXTE NU au-dessus du H1 — « 4,4/5 · 97 avis Google · 18 ans à
   Paris » — sans un seul conteneur. Abritherm fait la même chose avec une étiquette.
   Ici : mêmes mots, mêmes pictos, zéro pastille, et un filet sous la ligne pour la tenir.
   Aucune densité n'est perdue (VU-01 : 41 mots médians au premier écran chez les cher) —
   on retire des CONTENANTS, pas du contenu. */
.epingles { display: flex; flex-wrap: wrap; align-items: center; column-gap: 22px; row-gap: 6px;
            margin: 0 0 18px; padding: 0 0 14px; list-style: none; max-width: none;
            border-bottom: 1px solid var(--voile); }
.epingles li { margin: 0; }
.puce {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14.5px; font-weight: 700; color: var(--sur-nuit); letter-spacing: .005em;
}
.puce .ic { color: var(--accent-nuit); }
/* Le fait d'URGENCE est le seul allumé : le picto passe en rouge clair — le rouge plein
   ne rend que 2,89:1 sur la nuit, il est interdit ici (mesuré, voir metiers/*.mjs). */
.puce--action { color: #fff; }
.puce--action .ic { color: var(--action-clair); }

/* ── 7. Preuves (la bande de chiffres) ──────────────────────────────────────────────── */
/* 🔴 Quatre cellules détachées par des gouttières d'1 px, c'est une rangée de « stat tiles »
   de tableau de bord. Elle devient une BANDE CONTINUE divisée par des filets : une seule
   surface, quatre colonnes, comme une ligne de caractéristiques. Les chiffres passent en
   accent de nuit, qui est déjà la couleur du second ton du H1 : la même couleur employée
   deux fois est de la tenue, pas du kitsch — ce qui allume trop, c'est DEUX accents. */
.preuves { display: grid; grid-template-columns: repeat(2, 1fr);
           background: var(--nuit-2); border-bottom: 1px solid var(--voile); }
.preuve { padding: 16px 14px; text-align: center;
          border-left: 1px solid var(--voile); border-top: 1px solid var(--voile); }
.preuve:nth-child(odd) { border-left: 0; }
.preuve b { display: block; font-size: 25px; font-weight: 800; color: var(--accent-nuit);
            letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.preuve span { display: block; font-size: 13px; color: var(--sur-nuit-doux); font-weight: 700;
               margin-top: 3px; letter-spacing: .02em; }

/* ── 8. Cartes ──────────────────────────────────────────────────────────────────────── */
.grille { display: grid; gap: 14px; grid-template-columns: 1fr; margin: 26px 0 0; padding: 0; list-style: none; max-width: none; }
.grille li { margin: 0; }
.grille--2 { grid-template-columns: 1fr; }
/* 🔴 La carte devient PLATE. Le 26/08 avait déjà retiré la bordure (trois matières pour
   dire une chose) mais l'avait remplacée par une ombre à deux couches et un rayon de
   22 px : on avait échangé un tell de gabarit générique contre un tell de kit d'app.
   IZI by EDF (« cher ») pose ses blocs en aplat pâle, sans bordure NI ombre ; Les Bons
   Artisans et BOXT n'ombrent rien du tout. Le contraste --fond / --surface porte la carte
   à lui seul — c'est exactement pour ça que --fond a été assombri le 26/08. */
.carte {
  display: flex; flex-direction: column; gap: 8px; height: 100%;
  background: var(--surface); border-radius: var(--r-bloc);
  padding: 20px 20px 18px; text-decoration: none; color: inherit;
  border-top: 3px solid transparent;
  transition: border-color var(--t-court) ease, background-color var(--t-court) ease;
}
/* Le survol ne SOULÈVE plus la carte : il allume le filet de tête. Une carte qui décolle
   sous le doigt est un objet d'application ; ici c'est un lien vers une page. */
a.carte:hover { border-top-color: var(--marque); color: inherit; }
/* Sur une SECTION BLANCHE, une carte blanche n'existerait plus : elle prend alors la teinte
   de marque. La règle est « la carte ne porte jamais la même surface que sa section ». */
.section--blanche .carte, .section--blanche .voie { background: var(--marque-pale); }
/* 🔴 La tuile d'icône est SUPPRIMÉE. Un carré de 48 px rempli d'aplat de marque avec un
   picto blanc dedans est LE motif signature des kits d'app (skill ui-moderne, « tuile
   d'icône »). Aucun site artisan « cher » n'en porte : Les Bons Artisans, Abritherm et
   Art Plomberie posent le picto au trait, sans pavé. La classe survit — le HTML ne bouge
   pas — mais elle ne dessine plus qu'un picto en couleur de marque, un peu plus grand. */
.tuile { display: grid; place-items: center; width: 28px; height: 28px; flex: none;
         color: var(--marque); margin-bottom: 2px; }
.tuile .ic { width: 28px; height: 28px; }
.carte h3 { margin: 0; font-size: 19px; }
.carte p { margin: 0; font-size: 15.5px; color: var(--doux); }
.carte .lire { margin-top: auto; padding-top: 12px; display: inline-flex; align-items: center; gap: 6px;
               font-size: 14px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
               color: var(--marque); }
a.carte:hover .lire { color: var(--marque-fonce); gap: 10px; }
.carte .lire .ic { transition: transform var(--t-court) ease; }

/* ── 9. Listes de villes ────────────────────────────────────────────────────────────── */
/* Quarante communes en pastilles arrondies, c'est un nuage de tags d'application. Ce sont
   des LIENS D'INDEX : ils reprennent le rayon des commandes et un filet, et la liste se
   lit comme une table des matières — ce qu'elle est. */
.villes { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; max-width: none; }
.villes li { margin: 0; }
.villes a {
  display: inline-flex; align-items: center; gap: 7px; min-height: 46px; padding: 0 16px;
  border-radius: var(--r-ctrl); background: var(--surface); border: 1px solid var(--bord);
  font-size: 15.5px; font-weight: 700; color: var(--encre); text-decoration: none;
}
.villes a:hover { border-color: var(--marque); background: var(--marque); color: #fff; }
.villes a:hover .ic { color: #fff; }
.villes .ic { color: var(--marque); }
/* 🔴 Défaut PRÉ-EXISTANT trouvé à l'œil le 01/09 sur la page secteurs, jamais attrapé par
   un constat : la classe ville-plate — la commune SANS page dédiée, qui n'est donc pas un
   lien — n'était stylée nulle part, ni dans cette feuille ni dans la précédente. Son picto
   est un svg de classe ic, en display block : sans règle, il passait à la ligne et la liste
   s'affichait picto AU-DESSUS du nom, cinq colonnes écrasées. Elle reprend la géométrie de
   sa voisine mais pas sa matière : pas de surface, pas de filet, texte en gris — ce qui
   n'est pas cliquable ne doit pas ressembler à ce qui l'est. */
.villes .ville-plate {
  display: inline-flex; align-items: center; gap: 7px; min-height: 46px; padding: 0 4px;
  font-size: 15.5px; font-weight: 600; color: var(--doux);
}
.villes .ville-plate .ic { color: var(--doux); }

/* ── 10. (Étapes : retirées le 23/09 avec le déroulé des prestations, qui était une méthode.) */

/* ── 11. Cases à cocher (garanties, signes) ─────────────────────────────────────────── */
/* Déjà plate depuis le 26/08 : une grille de lignes séparées par des filets, pas un
   paragraphe haché. Elle ne change pas — c'est le registre qu'on vise partout ailleurs. */
.coches { list-style: none; padding: 0; margin: 22px 0 0; max-width: var(--prose); }
.coches li { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 0;
             padding: 13px 0; border-bottom: 1px solid var(--bord); font-size: 16px; }
.coches li:last-child { border-bottom: 0; }
.coches .ic { color: #2F6B3A; margin-top: 3px; }

/* ── 12. Encadré d'appel ────────────────────────────────────────────────────────────── */
/* Le second aplat de nuit de la page. Le filet d'accent en tête dit « c'est le bloc qui
   compte » sans allumer une couleur de plus — le remplissage d'accent, lui, mettrait deux
   surfaces vives sur le même écran, et c'est là que le kitsch commence. */
.rappel {
  margin: 34px 0 0; padding: 26px 24px; border-radius: var(--r-bloc);
  background: var(--nuit); color: var(--sur-nuit);
  position: relative; overflow: hidden;
}
/* Le filet en ::before, pas en border-top que le rayon courbe dans les coins. 4 px : à 3 px
   sur un bloc de 26 px de réserve, le trait se lisait comme un artefact de rendu. */
.rappel::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--action);
}
.rappel h2, .rappel h3 { color: #fff; margin-bottom: 6px; }
.rappel p { color: var(--sur-nuit); margin-bottom: 0; }
.rappel .btns .btn--contour { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.rappel .btns .btn--contour:hover { background: rgba(255,255,255,.12); color: #fff; border-color: #fff; }

/* ── 13. Questions fréquentes — <details>, donc sans JS ─────────────────────────────── */
/* 🔴 Chaque question était une carte blanche à rayon 18 avec son ombre : dix cartes
   empilées, dix objets flottants pour dix lignes de texte. Effy et BOXT (deux « cher »)
   posent leurs questions en LIGNES séparées par un filet. C'est plus dense, ça se parcourt
   à l'œil, et ça ne fabrique aucune matière supplémentaire. */
.faq { margin: 24px 0 0; max-width: var(--prose); border-top: 1px solid var(--bord); }
.faq details { border-bottom: 1px solid var(--bord); }
.faq summary {
  list-style: none; cursor: pointer; padding: 16px 46px 16px 0; position: relative;
  font-weight: 700; color: var(--encre); font-size: 16.5px; min-height: 54px;
  display: flex; align-items: center;
}
.faq summary:hover { color: var(--marque-fonce); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 10px; height: 10px;
  border-right: 2.2px solid var(--marque); border-bottom: 2.2px solid var(--marque);
  transform: translateY(-70%) rotate(45deg); transition: transform var(--t-court) ease;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details[open] summary { color: var(--marque-fonce); }
.faq .reponse { padding: 0 46px 4px 0; }
.faq .reponse p:last-child { margin-bottom: 18px; }

/* ── 14. Galerie (n'apparaît QUE si photos[] est rempli) ────────────────────────────── */
.galerie { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 24px 0 0;
           padding: 0; list-style: none; max-width: none; }
.galerie li { margin: 0; }
/* Une photo n'a pas besoin d'un cadre : le filet gris autour d'une image est une habitude
   de gabarit, pas une décision. Rayon de bloc, rien d'autre. */
.galerie img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover;
               border-radius: var(--r-bloc); background: var(--marque-pale); }

/* ── 15. Avis (n'apparaît QUE si la fiche en porte) ─────────────────────────────────── */
/* Ex-pastille blanche ombrée. Art Plomberie écrit la même information en une ligne nue,
   étoile en tête : « 4,4/5 · 97 avis Google ». On fait ça, sous un filet. */
.avis { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 10px;
        padding: 0 0 12px; border-bottom: 2px solid var(--bord);
        font-weight: 700; color: var(--encre); }
.avis .note { font-size: 22px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.avis .etoiles { color: #8A6108; letter-spacing: .06em; font-size: 18px; }
.avis .nb { font-weight: 600; color: var(--doux); font-size: 14.5px; }

/* ── 16. Plaque d'en-tête de prestation ─────────────────────────────────────────────── */
/* 🔴 Le médaillon est MASQUÉ sur téléphone. Vu en capture : un disque solitaire sous les
   boutons, qui ne dit rien et coûte un demi-écran de défilement. Règle maison : « chaque
   pixel porte une donnée ou une action ». Il reste sur le bureau, où il occupe une colonne
   qui serait vide de toute façon — et il n'est plus un viseur à cercles concentriques
   (voir illustrations.mjs) mais une plaque de plan, cohérente avec la trame du héro. */
.medaillon { display: none; }

/* ── 17. Fil d'Ariane ───────────────────────────────────────────────────────────────── */
.fil { font-size: 14px; color: var(--doux); padding: 14px 0 0; }
.fil ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; max-width: none; }
.fil li { margin: 0; display: flex; align-items: center; gap: 6px; }
.fil li + li::before { content: "›"; color: var(--bord); font-weight: 700; }
.fil a { color: var(--doux); }
.fil a:hover { color: var(--marque); }

/* ── 18. Contact ────────────────────────────────────────────────────────────────────── */
/* Même traitement que .carte : blocs plats, aucune ombre, aucune bordure. C'était l'écran
   le plus « application » du site — quatre cartes blanches flottantes portant chacune sa
   tuile bleue de 48 px. */
.voies { display: grid; gap: 14px; grid-template-columns: 1fr; margin: 26px 0 0; padding: 0; list-style: none; max-width: none; }
.voies li { margin: 0; }
/* 🔴 Vu en capture après la première passe du 01/09 : un filet de marque de 3 px en tête
   de CHACUNE des quatre voies, c'est quatre fois le même accent sur un écran qui n'a
   qu'une hiérarchie. Le filet de tête est réservé à ce qui le mérite — la carte d'appel
   et le bloc de rappel. Ici, la surface suffit : c'est le traitement d'IZI by EDF
   (« cher »), des blocs pleins sans bordure ni ombre. */
.voie { display: flex; gap: 14px; align-items: flex-start; background: var(--surface);
        border-radius: var(--r-bloc); padding: 20px; height: 100%; }
.voie .tuile { margin: 2px 0 0; }
.voie b { display: block; color: var(--encre); font-size: 17.5px; }
.voie p { margin: 2px 0 10px; font-size: 15.5px; color: var(--doux); }
.voie .grand { font-size: 22px; font-weight: 800; color: var(--marque-fonce); text-decoration: none;
               letter-spacing: -.01em; font-variant-numeric: tabular-nums;
               display: inline-flex; align-items: center; min-height: 46px; }
.voie .grand:hover { text-decoration: underline; }
/* 🔴 Vu sur le site EN LIGNE, mobile 390, le 03/09 : « contact@plomberie- » et rien après.
   Un courriel de 28 caractères en 22 px gras ne tient pas dans la carte, et l'enfant du
   flex ne pouvait pas rétrécir (min-width auto) : la carte débordait au lieu de couper
   le mot. Deux règles : l'enfant peut rétrécir, et le courriel se coupe où il faut, un
   cran plus petit que le numéro. Le téléphone garde sa taille : il ne dépasse jamais. */
.voie > div { min-width: 0; flex: 1 1 auto; }
.voie .grand:not(.grand--tel) { font-size: 18px; letter-spacing: 0; display: inline; overflow-wrap: anywhere; }
/* Le numéro de téléphone porte la couleur d'ACTION partout, sans exception : c'est ce qui
   fait qu'on le repère sans lire. */
.voie .grand--tel { color: var(--action-fonce); }
.voie .grand--tel:hover { color: var(--action); }

/* ── 19. Pied ───────────────────────────────────────────────────────────────────────── */
.pied { background: var(--nuit-2); color: var(--sur-nuit); padding: 44px 0 30px; font-size: 15.5px;
        border-top: 4px solid var(--marque); }
/* Les titres de colonne sont des micro-étiquettes : capitales espacées, petit corps. Dans
   un pied, trois H2 de 19 px pèsent autant que le contenu qu'ils annoncent. */
.pied h2 { color: var(--sur-nuit-doux); font-size: 12.5px; font-weight: 800; letter-spacing: .12em;
           text-transform: uppercase; margin-bottom: 12px; }
.pied a { color: #fff; }
.pied a:hover { color: var(--accent-nuit); }
.pied .cols { display: grid; gap: 30px; grid-template-columns: 1fr; }
.pied ul { list-style: none; padding: 0; margin: 0; max-width: none; }
.pied li { margin-bottom: 2px; }
/* Un lien de NAVIGATION ne se souligne pas : c'est une liste, sa nature se lit à sa place. */
.pied ul a { text-decoration: none; }
.pied ul a:hover { text-decoration: underline; }
/* Un lien de pied est une cible tactile comme une autre : 44 px, mesuré, pas supposé. */
.pied li a { display: flex; align-items: center; min-height: 44px; }
.pied .tel-pied { font-size: 24px; font-weight: 800; color: #fff; text-decoration: none;
                  letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pied .bas { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--voile);
             font-size: 13.5px; color: rgba(255,255,255,.62); display: flex; flex-wrap: wrap; gap: 8px 18px; }

/* ── 19 bis. Carte d'appel du héro — le numéro, pas un décor ────────────────────────── */
/* LE contraste maximal du site tombe ici, et c'est voulu : une carte blanche franche posée
   sur l'aplat de nuit, avec le filet d'action en tête. C'est l'objet exact d'Abritherm —
   même métier, même ville, noté « cher » : une carte claire à droite d'un aplat profond,
   qui porte le geste. Elle garde son ombre : elle est l'un des trois seuls objets du site
   qui survole vraiment quelque chose. Rayon de BLOC (10 px), pas 22. */
/* 🔴 color: var(--texte) n'est PAS décoratif : la carte est blanche mais elle vit DANS le
   héro, qui pose du blanc sur toute sa descendance. Sans cette ligne, les trois lignes de
   renseignement s'écrivent en blanc sur blanc — elles avaient disparu d'une capture,
   pictos seuls, texte introuvable. Vu à l'œil, aucun constat ne mesure une couleur de texte. */
.carte-appel {
  margin: 22px 0 0; padding: 20px; border-radius: var(--r-bloc);
  background: var(--surface); color: var(--texte);
  box-shadow: var(--e-nuit);
  position: relative; overflow: hidden;
}
/* Le filet d'accent. En border-top, le grand rayon le courbait dans les coins : à 1280 px
   on ne voyait que deux petits arcs et un centre évanoui. Un ::before posé À L'INTÉRIEUR
   du rayon reste droit et continu à toutes les largeurs. */
.carte-appel::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--action);
}
.carte-appel .oeil { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; color: var(--action-fonce); }
/* Le filet de .oeil ne se pose PAS ici : la ligne porte déjà un picto, et deux signes
   devant trois mots, c'est un signe de trop. */
.carte-appel .oeil::before { display: none; }
.carte-appel .num {
  display: inline-flex; align-items: center; min-height: 46px;
  font-size: clamp(29px, 8.2vw, 38px); font-weight: 800;
  letter-spacing: -.03em; color: var(--action-fonce); text-decoration: none;
  font-variant-numeric: tabular-nums; line-height: 1.15;
}
.carte-appel .num:hover { color: var(--action); text-decoration: underline; }
.carte-appel .num-aide { font-size: 14.5px; color: var(--doux); margin: 2px 0 14px; }
.carte-appel .lignes { list-style: none; padding: 0; margin: 0 0 18px; max-width: none;
                       border-top: 1px solid var(--bord); }
.carte-appel .lignes li { display: flex; gap: 10px; align-items: flex-start; margin: 0;
                          padding: 11px 0; border-bottom: 1px solid var(--bord); font-size: 15.5px; }
.carte-appel .lignes .ic { color: var(--marque); margin-top: 2px; }

/* ── 19 ter. Blocs de texte long ────────────────────────────────────────────────────── */
.hero-txt { min-width: 0; }
/* Le titre en DEUX TONS — le nom de la prestation en blanc, la commune en accent de nuit.
   C'est le seul geste typographique du gabarit, et Abritherm (« cher ») le fait mot pour
   mot : « Chauffagiste & » en blanc, « Pompe à Chaleur » en bleu, « à Lyon » en blanc.
   Il vaut 9,15:1 sur la nuit, il est donc lisible, pas décoratif. */
.h1-ville { color: var(--accent-nuit); }
/* La page de prestation garde le même bloc d'ouverture que l'accueil — la version blanche
   d'avant faisait deux gabarits là où il en faut un. */
.hero--presta .enveloppe { padding-top: 26px; padding-bottom: 30px; }
.bloc-texte { max-width: var(--prose); }
.bloc-texte + .bloc-texte { margin-top: 30px; }
.bloc-texte h2 { margin-top: 0; }
p.intro { font-size: 18.5px; color: var(--texte); }
/* L'avertissement n'est pas une carte : c'est une mise en garde. Un filet épais à gauche
   la marque comme telle — c'est la convention typographique de l'encadré d'alerte, et
   elle ne fabrique pas un quatrième objet flottant. */
.avertissement {
  margin: 22px 0 26px; padding: 14px 18px; border-radius: 0 var(--r-fin) var(--r-fin) 0;
  background: var(--action-pale); border-left: 4px solid #E3BEA9; max-width: var(--prose);
}
.avertissement p { margin: 0; font-size: 15.5px; color: var(--action-fonce); }
.a-remplir {
  display: inline-block; padding: 1px 9px; border-radius: var(--r-fin);
  background: var(--fond); border: 1px dashed var(--bord); color: var(--doux);
  font-size: 14.5px; font-style: italic;
}

/* ── 19 ter. LA MARQUE DU RELEVÉ — « à confirmer avec vous » (T35, 12/09) ───────────────
   Le skill faits-client (§3) fixe l'exigence et laisse le traitement à Flo : « lisible sans
   effort sur mobile, nommée en toutes lettres, impossible à confondre avec le contenu
   voisin ». Trois décisions, et leurs raisons :

   1. LA MARQUE EST UN MOT, PAS UNE NUANCE. Un gris, une italique ou un pointillé seuls sont
      du style : ils s'effacent au soleil, au fort grossissement et à l'impression. Ici les
      mots sont écrits, à 14,5 px, en graisse 700.
   2. ELLE NE PREND NI LE ROUGE NI L'AMBRE. Le rouge est celui du « REQUIS » légal, qui dit
      « ce site est illégal en l'état » ; l'ambre est celui de la structure éditrice et du
      bandeau de démonstration, qui parlent de NOUS. Celle-ci parle du CLIENT et de ce qu'il
      nous dira : elle prend l'encre sur fond neutre, la seule famille encore libre.
   3. ELLE EST ENCADRÉE. Aucun fragment de phrase n'est encadré ailleurs dans cette feuille :
      un contour continu autour de quelques mots ne peut donc pas se lire comme de la donnée.
      C'est le test qui compte, et il ne dépend pas de la couleur — un daltonien, une
      impression en noir et blanc ou un écran délavé le passent tous.

   ⚠️ Ces marques sont faites pour une DÉMO. Sur un site LIVRÉ il n'en reste aucune, et ce
   n'est pas une consigne : c'est un constat de verifier.mjs qui bloque. */
.a-confirmer, .a-completer {
  display: inline-block; vertical-align: baseline;
  margin-left: 4px; padding: 1px 9px; border-radius: var(--r-fin);
  background: #fff; border: 1.5px solid var(--encre); color: var(--encre);
  font-size: 14.5px; font-weight: 700; font-style: normal; line-height: 1.5;
  /* Le texte marqué ne doit jamais se couper en deux entre la valeur et sa marque. */
  white-space: nowrap;
}
/* « à compléter » remplace une valeur ABSENTE au lieu de la qualifier : il n'y a rien à sa
   gauche, donc pas de marge, et le fond neutre dit qu'il n'y a pas de donnée là. */
.a-completer { margin-left: 0; background: var(--fond); }
/* Les deux marques peuvent tomber dans une ligne longue : le non-coupé protège la marque
   elle-même, jamais la phrase entière. Sous 520 px, on le relâche plutôt que de pousser un
   débordement horizontal. */
@media (max-width: 520px) {
  .a-confirmer, .a-completer { white-space: normal; }
}

/* ── 19 quater. Conformité — le champ REQUIS qui manque ─────────────────────────────────
   🔴 Ce style n'est PAS décoratif : c'est le seul endroit du site qui a le droit d'être
   laid. Un champ légalement obligatoire absent doit se VOIR — de loin, en rouge, sans
   qu'on ait à lire. verifier.mjs compte ces marques et refuse le site tant qu'il en
   reste une. La discrétion, ici, serait une faute : elle laisserait partir un site
   incomplet chez un client qui, lui, est responsable devant la loi. */
.requis {
  display: inline-block; padding: 2px 10px; border-radius: var(--r-fin);
  background: #fff1f2; border: 1px solid #f43f5e; color: #9f1239;
  font-size: 14.5px; font-weight: 700;
}
.requis--structure { background: #fffbeb; border-color: #d97706; color: #78350f; }
.bandeau-demo { background: #fef3c7; border-bottom: 1px solid #f59e0b; color: #78350f; }
.bandeau-demo .enveloppe {
  display: flex; align-items: center; min-height: 28px;
  padding-top: 5px; padding-bottom: 5px; font-size: 13.5px; font-weight: 600;
}
.legal h2 { font-size: 21px; margin-top: 34px; }
.legal h2:first-child { margin-top: 0; }
/* La page des tarifs n'avait qu'UNE surface, du fil d'Ariane au pied — la seule page du
   site sans alternance. Les listes de barème et de mentions restent des blocs blancs posés
   sur le fond : chaque rangée redevient une ligne de tableau, ce qui est sa fonction.
   L'ombre part, comme partout ailleurs : un barème ne flotte pas. */
.legal ul { list-style: none; padding: 4px 20px; margin: 14px 0 0; max-width: var(--prose);
            background: var(--surface); border-radius: var(--r-bloc); }
.legal ul li { padding: 11px 0; border-bottom: 1px solid var(--bord); }
.legal ul li:last-child { border-bottom: 0; }
.section--blanche .legal ul { background: var(--fond); }
.legal .source {
  display: block; margin-top: 6px; font-size: 14px; color: var(--doux);
}
.note-rgpd {
  margin-top: 22px; padding: 14px 16px; border-radius: var(--r-fin);
  background: var(--fond); border-left: 4px solid var(--bord);
  font-size: 14.5px; color: var(--doux); max-width: var(--prose);
}

/* ── 20. Bureau ─────────────────────────────────────────────────────────────────────── */
@media (min-width: 700px) {
  .grille, .voies { grid-template-columns: repeat(2, 1fr); }
  /* Les garanties passent en deux colonnes : la largeur de prose ne les concerne pas, ce
     sont des lignes courtes qu'on parcourt, pas un texte qu'on lit. */
  .coches { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 40px;
            max-width: 900px; }
  .coches li:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
  /* Quatre colonnes : le filet ne saute plus une cellule sur deux, il n'y a qu'une rangée.
     Ordre des règles = ordre des priorités — :first-child passe après :nth-child(odd). */
  /* Autant de colonnes que de chiffres (24/09) : une bande de 2 chiffres sur 4 colonnes laissait la
     moitié droite vide, et un lecteur neutre l'a vue comme une case manquante. */
  .preuves { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; }
  .preuve { border-top: 0; padding: 18px 16px; }
  .preuve:nth-child(odd) { border-left: 1px solid var(--voile); }
  .preuve:first-child { border-left: 0; }
  .galerie { grid-template-columns: repeat(3, 1fr); }
  .section { padding: 60px 0; }
  .hero .enveloppe { padding-top: 52px; padding-bottom: 58px; }
  .pied .cols { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 960px) {
  :root { --gouttiere: 32px; }
  body { padding-bottom: 0; }              /* plus de barre collante : le téléphone est en tête */
  .barre { display: none; }
  .grille { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .grille--2 { grid-template-columns: repeat(2, 1fr); }
  .menu { display: none; }                   /* le <details> replié est un objet MOBILE */
  .nav-bureau { display: block; margin-left: auto; }
  .nav-bureau ul { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; max-width: none; }
  .nav-bureau li { margin: 0; }
  /* 🔴 La navigation de bureau passe en CAPITALES ESPACÉES, et c'est une DÉVIATION
     assumée de la règle maison « capitales espacées = micro-étiquettes uniquement ».
     Cette règle vient des tableaux de bord du workspace. Ici, DEUX des références jugées
     « cher » — Abritherm et Les Bons Artisans, les deux artisans français du panel —
     écrivent toute leur navigation en capitales espacées, et c'est le signal typographique
     qui sépare le plus nettement un site d'entreprise d'une interface d'application.
     Une casse de phrase à 15,5 px sur un aplat sombre, c'est une barre d'onglets. */
  .nav-bureau a { display: flex; align-items: center; min-height: 44px; padding: 0 14px;
                  border-radius: var(--r-ctrl); text-decoration: none; color: var(--sur-nuit);
                  font-weight: 800; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
  .nav-bureau a:hover { background: rgba(255,255,255,.10); color: #fff; }
  .entete-tel { display: inline-flex; }
  .entete .enveloppe { min-height: 80px; gap: 18px; }
  /* Le padding bureau est calé sur la COLONNE DE DROITE, pas sur l'idée qu'un héro doit
     respirer : la carte d'appel fait la hauteur du bloc, et une réserve trop généreuse
     ouvrait un rectangle de nuit vide sous la promesse, à gauche. Vu en capture. */
  /* start, pas center (03/09, vu sur le site en ligne) : centré, le texte démarrait
     ~100 px sous le haut de la carte d'appel et laissait un vide en haut à gauche du
     premier écran — de la densité perdue là où VU-01 en demande. Les deux colonnes
     partent maintenant de la même ligne. */
  .hero .enveloppe { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(320px, .88fr);
                     gap: 44px; align-items: start;
                     padding-top: 44px; padding-bottom: 48px; }
  .hero h1 { font-size: 48px; }
  .carte-appel { margin: 0; padding: 28px; }
  .hero .motif { opacity: .20; }
  /* La plaque de plan vit sur la nuit : trait blanc, picto en accent de nuit. */
  .medaillon { display: grid; place-items: center; position: relative;
               width: 176px; height: 176px; margin: 0 auto; color: #fff; }
  .medaillon-fond { position: absolute; inset: 0; width: 100%; height: 100%; }
  .medaillon-picto { position: relative; width: 96px; height: 96px; color: var(--accent-nuit); }
  .hero--presta .enveloppe { grid-template-columns: minmax(0, 1fr) 210px; align-items: center;
                             padding-top: 46px; padding-bottom: 50px; }
}

/* ── 21. Mouvement — le kill-switch, pas une option ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .btn:active { transform: none; }
}

/* ── 22. Impression — un artisan imprime son devis, et un client imprime la page ────── */
/* La réserve de la barre collante, portée par le pied pour rester sombre jusqu'en bas. */
.pied { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }

/* Le lien d'évitement : invisible jusqu'au focus clavier, alors il se pose en haut. */
.sr-lien:focus {
  position: fixed; top: 10px; left: 10px; z-index: 10000;
  width: auto; height: auto; margin: 0; padding: 10px 16px; overflow: visible; clip: auto;
  background: var(--nuit); color: #fff; border-radius: var(--r-ctrl); text-decoration: none;
}

/* Le héros raccourci de la page secteurs : même langage, moins de hauteur. */
.hero--court .enveloppe { padding-top: 18px; padding-bottom: 22px; }

@media print {
  .barre, .menu, .urgence, .hero .motif { display: none !important; }
  body { padding-bottom: 0; font-size: 12pt; }
  .pied { padding-bottom: 0; }
  .entete { position: static; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; color: #555; }
  .faq details { break-inside: avoid; }
  /* Un <details> fermé ne rend pas son contenu : forcer display sur .reponse était
     inopérant. Les réponses FAQ ne s'impriment pas, et c'est dit ici plutôt que promis
     par une règle morte. */
}

/* ── 23. Le supplément de la DIRECTION ──────────────────────────────────────────────────
   Il vient EN DERNIER, et c'est tout ce qu'il a le droit d'être : la casse, la géométrie
   de la signature, et les deux ou trois filets qu'une couleur de direction rend invisibles.
   Il est vide pour la direction en service — le rendu par défaut ne traverse pas une ligne
   de CSS de plus qu'avant. */
/* ── ATELIER ── la casse de plaque. Une enseigne d'atelier est FRAPPÉE, pas écrite. */
.marque-bloc > span:first-child, h1 { text-transform: uppercase; }
/* Une condensée en capitales a besoin d'air : sans ce +.012em, les fûts se touchent et le
   mot devient un peigne. C'est l'inverse du réglage d'un titre en casse de phrase. */
h1 { letter-spacing: .012em; line-height: 1.04; }
.hero h1 { letter-spacing: .012em; }
.marque-bloc > span:first-child { letter-spacing: .02em; font-size: 19px; }
/* La plaque : le SVG dessine le laiton et les rivets, les initiales restent du TEXTE
   (une lettre en <text> SVG se centre mal d'un navigateur à l'autre, et elle ne se
   sélectionne pas). Le creux de la frappe : une ombre claire d'un demi-pixel sous la lettre. */
.monogramme { position: relative; width: 44px; height: 44px; background: none;
              border-radius: 0; color: var(--accent-nuit); }
.plaque-fond { position: absolute; inset: 0; width: 100%; height: 100%; }
.monogramme-txt { position: relative; color: #2A1F0C; font-size: 15px; font-weight: 800;
                  letter-spacing: .04em; text-shadow: 0 1px 0 rgba(255,255,255,.28); }
/* Le pied reprend le laiton : un filet de marque zinc sur du brun-noir ne se voit pas. */
.pied { border-top-color: var(--accent-nuit); }
/* 🔴 VU EN CAPTURE : la plaque du médaillon sortait BLANCHE — le SVG prend currentColor, et
   .medaillon posait color:#fff pour le cartouche de plan de la direction en service. Une
   plaque blanche à rivets gris ressemble à un interrupteur. Elle prend le laiton, et les
   traits gravés reprennent la couleur du creux. */
.medaillon { color: var(--accent-nuit); }
.medaillon-picto { color: #2A1F0C; }