/* ═══════════════════════════════════════════════════════════════════════
   ATELIER ERÈS — maquette du nouveau site
   ───────────────────────────────────────────────────────────────────────
   Parti pris : le site EST un plan d'architecte. Pas « inspiré de », pas
   « aux couleurs de » — un plan. Grille visible, filets d'un demi-pixel,
   cotes qui se tracent, annotations en monospace dans les marges, et des
   mots qu'on mesure comme on mesure une façade.

   C'est ce qui distingue une entreprise de travaux d'une autre sur un
   écran : pas la promesse d'être « minutieux » — tout le monde l'écrit —
   mais un site qui, lui, l'est.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* La charte : le pourpre du logo, et rien qui lui dispute la vedette. */
  --pourpre: #4a154b;
  --pourpre-clair: #6b3170;
  --pourpre-voile: #f3eff4;
  --encre: #17111a;
  --encre-2: #3d3542;
  --encre-3: #6b6470;
  --encre-4: #9b94a2;
  /* Les neutres tirent vers le violet d'un cheveu : un gris pur se voit
     comme un gris pas choisi. */
  --papier: #faf9fa;
  --papier-2: #f2f0f3;
  --trait: #e2dee5;
  --trait-2: #cbc4d0;
  /* Le vert des pins, en second — jamais en concurrence avec le pourpre. */
  --pin: #2f4a3c;
  --grille: rgba(23, 17, 26, .055);

  /* ── La typographie ─────────────────────────────────────────────
     Instrument Serif : un serif à fort contraste, déliés très fins,
     dessiné pour les grandes tailles. C'est le registre des agences
     d'architecture — celui qui dit « on regarde les proportions »
     plutôt que « on construit vite ». En bas de casse et serré : un
     serif fin mis en capitales et espacé perd exactement ce qui fait
     sa finesse.
     Inter en maigre pour le texte courant, neutre et lisible à 16 px.
     Plex Mono pour les annotations, comme les cotes d'un plan. */
  --titre: "Instrument Serif", "Times New Roman", Georgia, serif;
  --corps: "Inter", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --marge: clamp(18px, 5vw, 76px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--papier); color: var(--encre);
  font-family: var(--corps); font-weight: 350; font-size: 16.5px; line-height: 1.66;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }

/* ── <picture> ne doit rien peser dans la mise en page ──────────────────
   Les images publiées par le back-office sont désormais enveloppées dans
   un <picture>, pour servir le WebP à qui le prend. Or <picture> est un
   élément EN LIGNE, sans dimension : glissé entre un cadre et son image,
   il rompt tous les « width:100% ; height:100% » écrits pour l'image, et
   la photo se recroqueville au milieu de son cadre. C'est ce qui est
   arrivé aux portraits de l'équipe le 9 septembre 2026.

   `display: contents` fait disparaître l'enveloppe de la mise en page :
   l'image redevient l'enfant direct de son cadre, et toutes les règles
   écrites avant continuent de s'appliquer sans qu'on y touche. Une ligne,
   plutôt qu'une règle par cadre — et surtout, plutôt qu'un cadre oublié
   qu'on découvrirait dans six mois sur la page d'un client. */
picture { display: contents; }
a { color: inherit; }

/* ── La grille du plan, en fond de page ─────────────────────────────── */
.calque-grille {
  position: fixed; inset: -88px; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, var(--grille) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grille) 1px, transparent 1px);
  background-size: 88px 88px;
  -webkit-mask-image: radial-gradient(ellipse 120% 90% at 50% 20%, #000 35%, transparent 100%);
  mask-image: radial-gradient(ellipse 120% 90% at 50% 20%, #000 35%, transparent 100%);
  /* La grille dérive d'une case toutes les quarante secondes. On ne le
     voit pas ; on le sent — la page respire au lieu d'être une image
     fixe. Une trame de plan qu'on décale d'un module reste une trame
     de plan : le mouvement ne coûte rien à la lisibilité. */
  animation: grilleDerive 24s linear infinite;
}
@keyframes grilleDerive { to { transform: translate3d(88px, 88px, 0); } }

/* ── Le tracé de fond, qui tourne très lentement ──────────────────────
   Un cercle de compas et deux axes, comme le repère qu'on trace avant
   de dessiner. Un tour en six minutes : personne ne le regarde tourner,
   tout le monde sent que quelque chose vit derrière la page. */
.calque-tracé {
  position: fixed; z-index: 0; pointer-events: none;
  right: -14vw; top: 8vh; width: min(62vh, 54vw); aspect-ratio: 1;
  opacity: .5;
  animation: traceTourne 140s linear infinite;
}
.calque-tracé svg { width: 100%; height: 100%; display: block; }
@keyframes traceTourne { to { transform: rotate(360deg); } }
.calque-tracé2 {
  position: fixed; z-index: 0; pointer-events: none;
  left: -18vw; bottom: -6vh; width: min(48vh, 42vw); aspect-ratio: 1;
  opacity: .38;
  animation: traceTourne2 200s linear infinite;
}
.calque-tracé2 svg { width: 100%; height: 100%; display: block; }
@keyframes traceTourne2 { to { transform: rotate(-360deg); } }
@media (prefers-reduced-motion: reduce) {
  .calque-grille, .calque-tracé, .calque-tracé2,
  .calque-rose, .calque-rose .rose-tour, .calque-rose .rose-aiguille { animation: none; }
}
.contenu { position: relative; z-index: 1; }

/* ── Les annotations de plan ────────────────────────────────────────── */
.cote {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--encre-4);
}
.cote-b { color: var(--pourpre); }

/* Le filet horizontal qui se trace : la « cote » d'une section. */
.filet { position: relative; height: 1px; background: var(--trait);
         transform-origin: left; transform: scaleX(0);
         transition: transform 1.1s cubic-bezier(.22,.7,.24,1); }
.vu .filet { transform: scaleX(1); }

/* ═══ EN-TÊTE ═══════════════════════════════════════════════════════ */
header.barre {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 22px;
  padding: 14px var(--marge);
  background: color-mix(in srgb, var(--papier) 86%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, padding .3s;
}
header.barre.pose { border-bottom-color: var(--trait); padding-top: 10px; padding-bottom: 10px; }
.marque { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }
.marque img { height: 46px; width: auto; }
nav.menu { display: flex; gap: 26px; margin-left: auto; }
nav.menu a {
  font-family: var(--mono); font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; text-decoration: none; color: var(--encre-2);
  position: relative; padding: 4px 0;
}
nav.menu a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--pourpre); transform: scaleX(0); transform-origin: right;
  transition: transform .34s cubic-bezier(.22,.7,.24,1);
}
nav.menu a:hover::after { transform: scaleX(1); transform-origin: left; }
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 22px; border-radius: 2px; border: 1px solid var(--pourpre);
  background: var(--pourpre); color: #fff; text-decoration: none;
  font-family: var(--mono); font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; cursor: pointer;
  position: relative; overflow: hidden; isolation: isolate;
}
.btn::before {
  content: ""; position: absolute; inset: 0; background: var(--encre);
  transform: translateY(101%); transition: transform .42s cubic-bezier(.22,.7,.24,1);
  z-index: -1;
}
.btn:hover::before { transform: translateY(0); }
.btn.creux { background: transparent; color: var(--pourpre); }
.btn.creux:hover { color: #fff; }
/* La flèche est un glyphe de monospace : son dessin occupe le bord droit
   de sa gouttière, alors qu'une lettre garde une marge naturelle. À
   padding égal, elle paraît donc collée au bord du bouton — c'est un
   défaut de rendu, pas de mesure. On lui rend cette marge à la main.
   Sur les grands boutons, la flèche glisse au survol : la réserve doit
   être assez large pour que le mouvement ne la fasse pas toucher. */
.btn .fleche { transition: transform .34s cubic-bezier(.22,.7,.24,1);
               padding-right: 4px; }
.btn:hover .fleche { transform: translateX(4px); }
.burger { display: none; }

/* ═══ HÉROS ═════════════════════════════════════════════════════════ */
.heros {
  position: relative; padding: clamp(48px, 9vw, 104px) var(--marge) clamp(40px, 7vw, 84px);
  min-height: min(88vh, 820px); display: flex; flex-direction: column; justify-content: center;
}
.heros-cote { display: flex; align-items: baseline; gap: 14px; margin-bottom: clamp(20px, 4vw, 38px); }
.heros-cote .trait { flex: 1; height: 1px; background: var(--trait-2);
  transform-origin: left; transform: scaleX(0); animation: traceX 1.4s .3s cubic-bezier(.22,.7,.24,1) forwards; }
@keyframes traceX { to { transform: scaleX(1); } }

/* Le titre. Chaque lettre monte à son tour — c'est l'effet demandé, et il
   a une raison : un plan se lit trait après trait, pas d'un bloc. */
h1.titre {
  font-family: var(--titre); font-weight: 400;
  font-size: clamp(38px, 7.4vw, 104px); line-height: 1.02;
  /* Négatif, et franchement : un serif à déliés fins se resserre. Mis en
     capitales et espacé, il perd exactement ce qui fait sa finesse. */
  letter-spacing: -.022em; margin: 0; text-wrap: balance;
}
h1.titre em { font-style: italic; }
h1.titre .mot { display: inline-block; white-space: nowrap; }
h1.titre .l {
  display: inline-block; transform: translateY(102%) rotate(4deg); opacity: 0;
  animation: lettreMonte .92s cubic-bezier(.19,.9,.24,1) forwards;
  animation-delay: var(--d, 0s);
}
h1.titre .ligne { display: block; overflow: hidden; padding-bottom: .06em; }
@keyframes lettreMonte { to { transform: none; opacity: 1; } }
h1.titre em { font-style: normal; color: var(--pourpre); }

.heros-bas {
  display: grid; grid-template-columns: 1fr auto; gap: clamp(20px, 4vw, 56px);
  align-items: end; margin-top: clamp(28px, 5vw, 54px);
}
.heros-lede {
  max-width: 46ch; font-size: clamp(16px, 1.6vw, 19px); color: var(--encre-2);
  opacity: 0; animation: monteDoux .9s 1.15s cubic-bezier(.22,.7,.24,1) forwards;
}
@keyframes monteDoux { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.heros-actions { display: flex; gap: 12px; flex-wrap: wrap;
  opacity: 0; animation: monteDoux .9s 1.3s cubic-bezier(.22,.7,.24,1) forwards; }

/* Les trois secteurs, en cote sous le héros. */
.secteurs { display: flex; flex-wrap: wrap; gap: 6px 26px; margin-top: clamp(30px, 5vw, 56px);
  opacity: 0; animation: monteDoux .9s 1.45s cubic-bezier(.22,.7,.24,1) forwards; }
.secteurs b { font-family: var(--titre); font-weight: 400; font-size: 18px;
  letter-spacing: -.01em; }
.secteurs span { color: var(--encre-4); }

/* ═══ LE RUBAN DES PRESTATIONS ══════════════════════════════════════ */
.ruban {
  border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait);
  background: var(--papier); overflow: hidden; padding: 16px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.ruban-piste { display: flex; width: max-content; animation: ruban 36s linear infinite; }
.ruban:hover .ruban-piste { animation-play-state: paused; }
@keyframes ruban { to { transform: translateX(-50%); } }
.ruban i {
  font-style: normal; font-family: var(--titre); font-weight: 400;
  font-size: clamp(16px, 1.7vw, 21px); letter-spacing: -.01em;
  color: var(--encre-2); white-space: nowrap; padding: 0 26px; display: inline-flex;
  align-items: center; gap: 26px;
}
.ruban i::after { content: ""; width: 4px; height: 4px; border-radius: 50%;
                  background: var(--pourpre); opacity: .5; }
.ruban i.fort { color: var(--pourpre); font-style: italic; }
@media (prefers-reduced-motion: reduce) {
  .ruban-piste { animation: none; }
  .ruban { -webkit-mask-image: none; mask-image: none; overflow-x: auto; }
}

/* ═══ SECTIONS ══════════════════════════════════════════════════════ */
section { padding: clamp(56px, 9vw, 132px) var(--marge); position: relative; }
.tete { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: baseline;
        margin-bottom: clamp(26px, 4vw, 52px); }
.tete .num { font-family: var(--mono); font-size: 12px; color: var(--pourpre);
             letter-spacing: .1em; }
h2 {
  font-family: var(--titre); font-weight: 400;
  font-size: clamp(26px, 3.6vw, 46px); line-height: 1.06; letter-spacing: -.016em;
  margin: 0; max-width: 20ch; text-wrap: balance;
}
h2 em { font-style: italic; color: var(--pourpre); }
h2 em { font-style: normal; color: var(--pourpre); }
.chapo { max-width: 62ch; color: var(--encre-2); font-size: clamp(15.5px, 1.4vw, 18px);
         margin: 18px 0 0; }

/* Révélation au défilement */
.rv { opacity: 0; transform: translateY(26px);
      transition: opacity .8s cubic-bezier(.22,.7,.24,1), transform .8s cubic-bezier(.22,.7,.24,1); }
.rv.vu { opacity: 1; transform: none; }
.rv.d1 { transition-delay: .07s; } .rv.d2 { transition-delay: .14s; }
.rv.d3 { transition-delay: .21s; } .rv.d4 { transition-delay: .28s; }

/* ═══ LA PROMESSE + CHIFFRES ════════════════════════════════════════ */
.promesse { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(24px, 5vw, 72px); align-items: start; }
.chiffres { display: grid; gap: 1px; background: var(--trait); border: 1px solid var(--trait); }
.chiffre { background: var(--papier); padding: 22px 24px; }
.chiffre b { display: block; font-family: var(--titre); font-weight: 400;
             font-size: clamp(30px, 3.4vw, 42px); line-height: 1; letter-spacing: -.018em; }
.chiffre span { display: block; margin-top: 6px; font-size: 13.5px; color: var(--encre-3); }

/* ═══ SAVOIR-FAIRE — la grille qui s'ouvre au survol ════════════════ */
.metiers { display: grid; grid-template-columns: repeat(auto-fill, minmax(224px, 1fr));
           gap: 1px; background: var(--trait); border: 1px solid var(--trait); }
.metier {
  position: relative; background: var(--papier); padding: 26px 24px 24px;
  min-height: 178px; display: flex; flex-direction: column; overflow: hidden;
  cursor: default; isolation: isolate;
}
.metier::before {
  content: ""; position: absolute; inset: 0; background: var(--pourpre);
  transform: translateY(100%); transition: transform .5s cubic-bezier(.22,.7,.24,1);
  z-index: -1;
}
.metier:hover::before, .metier:focus-within::before { transform: translateY(0); }

/* ── Une photo derrière un savoir-faire ────────────────────────────────
   Elle vit SOUS le voile pourpre, pas à sa place. Au repos elle est
   absente ; au survol elle monte avec le voile, à peine plus visible
   qu'une texture. On la devine, on ne la lit pas — et le texte blanc
   reste lisible, ce qui est la seule chose qui compte ici.

   Le voile devient légèrement translucide quand il y a une photo : à
   pleine opacité il la cacherait entièrement, et poser une image qu'on
   ne voit pas n'a aucun intérêt. */
.metier-fond { position: absolute; inset: 0; z-index: -2; overflow: hidden;
  opacity: 0; transition: opacity .55s cubic-bezier(.22,.7,.24,1); }
/* LA PHOTO EST ASSOMBRIE AVANT LE VOILE, et c'est ce qui garantit la
   lisibilité quoi qu'on y mette. Un voile seul suffit sur une photo
   sombre et échoue sur un ciel de septembre : la lisibilité dépendrait
   alors de la photo choisie, donc de personne. Assombrie ici, elle ne
   peut plus surprendre — et le voile peut être moins opaque, donc on
   voit mieux le chantier. */
.metier-fond img { display: block; width: 100%; height: 100%;
  filter: grayscale(.15) brightness(.82) contrast(1.03);
  object-fit: cover; transform: scale(1.06);
  transition: transform 1.1s cubic-bezier(.22,.7,.24,1); }
.metier.a-photo:hover .metier-fond,
.metier.a-photo:focus-within .metier-fond { opacity: 1; }
.metier.a-photo:hover .metier-fond img,
.metier.a-photo:focus-within .metier-fond img { transform: scale(1); }
/* ── LE VOILE DES SAVOIR-FAIRE : PRESQUE PLEIN ─────────────────────────
   Ilyes, le 9 septembre 2026 : « pour les services et métiers, reviens
   comme avant mais juste un tout petit peu plus transparent. Là ce n'est
   pas beau. »

   Il a raison, et l'erreur était de raisonner en contraste seul. À 62 %,
   le texte se lisait — mais la carte devenait une photo assombrie avec du
   texte dessus, c'est-à-dire n'importe quelle carte de n'importe quel
   site. Le voile plein, lui, faisait une SURFACE : une couleur de la
   maison qui monte, et le texte posé dessus. C'est ce qui était beau, et
   ce n'est pas une question de lisibilité.

   84 % : la surface revient, et l'on devine la photo dessous — assez pour
   savoir qu'il y en a une, pas assez pour qu'elle prenne le dessus.

   Réglé à 90, puis ramené à 84 le 9 septembre 2026 sur demande d'Ilyes :
   « juste le rendre un peu plus transparent, ne change rien ». Six points,
   et rien d'autre — ni la photo, ni le texte, ni le mouvement. Ce genre de
   réglage se fait à l'œil et par petits pas ; le mesurer ne sert qu'à
   savoir jusqu'où l'on peut aller sans perdre la lisibilité, et on en est
   très loin. */
.metier.a-photo::before {
  background: color-mix(in srgb, var(--pourpre) 84%, transparent);
  transition: transform .58s .16s cubic-bezier(.22,.7,.24,1);
}
.metier.a-photo .metier-fond { transition: opacity .38s cubic-bezier(.22,.7,.24,1); }
.metier.a-photo p { transition: opacity .4s .34s, transform .4s .34s, color .4s .2s; }
.metier.a-photo h3, .metier.a-photo .i { transition: color .4s .24s; }
/* Sans photo, rien ne change : le voile reste plein. */
@media (prefers-reduced-motion: reduce) {
  .metier-fond, .metier-fond img { transition: none; }
  .metier.a-photo:hover .metier-fond img { transform: scale(1); }
  /* Le décalage est un effet : qui n'en veut pas ne doit pas l'attendre. */
  .metier.a-photo::before,
  .metier.a-photo p,
  .metier.a-photo h3,
  .metier.a-photo .i { transition-delay: 0s; }
}
.metier .i { font-family: var(--mono); font-size: 11px; color: var(--encre-4);
             letter-spacing: .1em; transition: color .4s; }
.metier h3 { font-family: var(--titre); font-weight: 400;
             font-size: 20px; letter-spacing: -.014em; margin: 10px 0 0; line-height: 1.14;
             transition: color .4s; }
.metier p { margin: 10px 0 0; font-size: 13.6px; line-height: 1.5; color: var(--encre-3);
            opacity: 0; transform: translateY(10px);
            transition: opacity .42s .06s, transform .42s .06s, color .4s; }
.metier:hover p, .metier:focus-within p { opacity: 1; transform: none; }
.metier:hover .i, .metier:focus-within .i { color: rgba(255,255,255,.62); }
.metier:hover h3, .metier:focus-within h3 { color: #fff; }
.metier:hover p, .metier:focus-within p { color: rgba(255,255,255,.86); }
.metier .angle { position: absolute; right: 18px; bottom: 16px; width: 14px; height: 14px;
  border-right: 1px solid var(--trait-2); border-bottom: 1px solid var(--trait-2);
  transition: border-color .4s, transform .4s; }
.metier:hover .angle { border-color: rgba(255,255,255,.5); transform: translate(3px, 3px); }

/* ═══ LES TROIS FINITIONS ═══════════════════════════════════════════ */
.finitions { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 26px); }
.fin {
  position: relative; border: 1px solid var(--trait); background: var(--papier);
  display: flex; flex-direction: column; overflow: hidden;
  transition: border-color .45s cubic-bezier(.22,.7,.24,1), transform .45s cubic-bezier(.22,.7,.24,1);
}
.fin:hover { border-color: var(--pourpre); transform: translateY(-5px); }
.fin-image { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--papier-2); }
.fin-image svg { width: 100%; height: 100%; display: block; }
/* Une photo posée sur une gamme depuis le back-office. Même traitement
   que les cartes de chantier : gris au repos, couleur et léger
   rapprochement au survol — la couleur récompense le geste plutôt que de
   crier avant lui. Le cartouche reste lisible : un voile part du bas. */
.fin-image img { width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(1) contrast(1.03);
  transition: filter .55s, transform .8s cubic-bezier(.22,.7,.24,1); }
.fin:hover .fin-image img { filter: none; transform: scale(1.04); }
/* ── LE TRACÉ SUR LA PHOTO D'UNE GAMME ─────────────────────────────────
   Même parti que les portraits de l'équipe : le dessin ne disparaît pas
   quand la photo arrive, il change de rôle. Il passe en blanc, à
   mi-force, et s'estompe au survol — à ce moment-là on regarde le
   chantier, pas le schéma.

   L'ombre portée est ce qui le rend lisible sur une photo claire : un
   trait blanc sur un ciel blanc n'existe pas, et on ne choisit pas les
   ciels. */
.calque-gamme {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 2; pointer-events: none;
  opacity: .34;
  filter: drop-shadow(0 1px 2px rgba(23,17,26,.65));
  transition: opacity .6s cubic-bezier(.22,.7,.24,1);
}
.fin:hover .calque-gamme, .fin:focus-within .calque-gamme { opacity: .16; }
@media (prefers-reduced-motion: reduce) { .calque-gamme { transition: none; } }

.fin-image.a-photo::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 46%;
  background: linear-gradient(to top, rgba(0,0,0,.34), transparent);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .fin-image img { transition: none; }
  .fin:hover .fin-image img { transform: none; }
}
.fin-image .etiq {
  position: absolute; left: 14px; top: 14px; padding: 5px 10px;
  background: color-mix(in srgb, var(--papier) 88%, transparent);
  backdrop-filter: blur(6px);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--encre-3);
}
.fin-corps { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.fin-lettre {
  font-family: var(--titre); font-weight: 400; font-size: 58px; line-height: .8;
  letter-spacing: -.03em; color: var(--pourpre); margin-bottom: 4px;
}
.fin h3 { font-family: var(--titre); font-weight: 400;
          font-size: 23px; margin: 6px 0 0; letter-spacing: -.016em; line-height: 1.12; }
.fin .sous { font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
             text-transform: uppercase; color: var(--pourpre); margin-top: 8px; }
.fin p { font-size: 14.4px; color: var(--encre-2); margin: 14px 0 0; }
.fin ul { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 8px; }
.fin li { position: relative; padding-left: 20px; font-size: 13.8px; color: var(--encre-2); }
.fin li::before { content: ""; position: absolute; left: 0; top: .62em; width: 9px; height: 1px;
                  background: var(--pourpre); }
.fin .pour { margin-top: auto; padding-top: 18px; font-size: 13px; color: var(--encre-3);
             border-top: 1px solid var(--trait); }
.fin .pour b { color: var(--encre); font-weight: 600; }

/* ═══ SECTEURS ══════════════════════════════════════════════════════ */
.zones { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
         background: var(--trait); border: 1px solid var(--trait); }
.zone { background: var(--papier); padding: 30px 26px 28px; position: relative; }
.zone h3 { font-family: var(--titre); font-weight: 400;
           font-size: clamp(21px, 2.2vw, 27px); margin: 10px 0 0; letter-spacing: -.016em; }
.zone p { font-size: 14.4px; color: var(--encre-2); margin: 12px 0 0; }
.zone .villes { margin-top: 16px; font-family: var(--mono); font-size: 11.5px;
                line-height: 1.9; color: var(--encre-3); }
.zone .villes a { text-decoration: none; border-bottom: 1px solid var(--trait-2); }
.zone .villes a:hover { color: var(--pourpre); border-color: var(--pourpre); }

/* ── LE BANDEAU D'UN SECTEUR ───────────────────────────────────────────
   La seule section du site EN COULEUR, et c'est délibéré. Tout le reste
   vit en noir et blanc jusqu'au survol — mais le Bassin, les Landes et la
   Dordogne ne se racontent pas au trait : c'est précisément le paysage
   qu'on est venu chercher sur cette page.

   LE BANDEAU A SA PROPRE FORME, il ne prend pas celle de la photo. Une
   galerie de chantier montre la photo, donc elle s'y plie ; un bandeau
   est un élément de mise en page, donc c'est la photo qui s'y plie. Les
   deux règles se contrediraient si on les appliquait au même endroit —
   elles ne s'appliquent pas au même endroit. */
.zone.a-photo { padding-top: 0; overflow: hidden; }
.zone-vue {
  position: relative; margin: 0 -26px 26px;
  aspect-ratio: 16 / 7; overflow: hidden; background: var(--papier-2);
}
.zone-vue img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  /* Légèrement retenue au repos, pleine au survol : la couleur arrive
     comme une récompense plutôt qu'elle ne s'impose. */
  filter: saturate(.88) contrast(1.02);
  transform: scale(1.02);
  transition: filter .7s cubic-bezier(.22,.7,.24,1),
              transform 1.1s cubic-bezier(.22,.7,.24,1);
}
.zone.a-photo:hover .zone-vue img,
.zone.a-photo:focus-within .zone-vue img {
  filter: saturate(1.06) contrast(1.03); transform: scale(1.07);
}
/* Le voile ne sert qu'à porter la côte : il ne couvre que le bas, et il
   ne monte pas plus haut qu'il ne faut pour la lire. */
.zone-vue::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 58%;
  background: linear-gradient(to top, rgba(8,4,10,.62), rgba(8,4,10,.18) 45%, transparent);
  pointer-events: none;
}
.zone-vue .cote {
  position: absolute; left: 26px; bottom: 14px; z-index: 1;
  color: #fff; text-shadow: 0 1px 3px rgba(8,4,10,.55);
}
@media (max-width: 720px) {
  .zone-vue { margin: 0 -20px 20px; aspect-ratio: 16 / 8; }
  .zone-vue .cote { left: 20px; bottom: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .zone-vue img { transition: none; transform: none; }
  .zone.a-photo:hover .zone-vue img { transform: none; }
}

/* ═══ L'ÉQUIPE ══════════════════════════════════════════════════════ */
.equipe { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
          gap: 1px; background: var(--trait); border: 1px solid var(--trait); }
.pers { background: var(--papier); padding: 0 0 24px; position: relative; overflow: hidden; }
.pers-photo { aspect-ratio: 4 / 5; background: var(--papier-2); position: relative;
              overflow: hidden; display: grid; place-items: center; }
.pers-photo img { width: 100%; height: 100%; object-fit: cover;
                  filter: grayscale(1) contrast(1.04); transition: filter .5s, transform .7s cubic-bezier(.22,.7,.24,1); }
.pers:hover .pers-photo img { filter: none; transform: scale(1.03); }
.pers-photo .attente { font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--encre-4); text-align: center; padding: 16px; }
.pers-txt { padding: 20px 22px 0; }
.pers h3 { font-family: var(--titre); font-weight: 400; font-size: 22px;
           letter-spacing: -.018em; margin: 0; line-height: 1.05; }
.pers .role { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
              text-transform: uppercase; color: var(--pourpre); margin-top: 8px; }
.pers .zone-p { font-size: 14px; color: var(--encre-2); margin-top: 12px; }
.pers .joindre { margin-top: 14px; display: grid; gap: 4px; }
.pers .joindre a { font-family: var(--mono); font-size: 12px; color: var(--encre-3);
                   text-decoration: none; border-bottom: 1px solid var(--trait);
                   padding-bottom: 3px; width: fit-content; transition: color .3s, border-color .3s; }
.pers .joindre a:hover { color: var(--pourpre); border-color: var(--pourpre); }

/* ═══ RÉALISATIONS ══════════════════════════════════════════════════ */
.travaux { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
           gap: clamp(14px, 2vw, 24px); }
.travail { border: 1px solid var(--trait); background: var(--papier); overflow: hidden;
           transition: border-color .4s; }
.travail:hover { border-color: var(--trait-2); }
.travail .vue { aspect-ratio: 3 / 2; background: var(--papier-2); position: relative;
                display: grid; place-items: center; }
.travail .vue svg { width: 100%; height: 100%; }
.travail .txt { padding: 18px 20px 22px; }
.travail .txt .cote { display: block; margin-bottom: 7px; }
.travail h3 { font-family: var(--titre); font-weight: 400; font-size: 19px;
              margin: 0; letter-spacing: -.015em; line-height: 1.15; }
.travail p { font-size: 13.6px; color: var(--encre-3); margin: 7px 0 0; }

/* ═══ APPEL / FORMULAIRE ════════════════════════════════════════════ */
.appel { background: var(--encre); color: #fff; }
.appel h2 { color: #fff; }
.appel h2 em { color: #c9a5cd; }
.appel .chapo { color: rgba(255,255,255,.72); }
.appel .tete .num { color: #c9a5cd; }
.appel-grille { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 64px); align-items: start; }
.form { display: grid; gap: 14px; }
.form .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form label { display: block; font-family: var(--mono); font-size: 10.5px;
              letter-spacing: .12em; text-transform: uppercase;
              color: rgba(255,255,255,.5); margin-bottom: 7px; }
.form input, .form select, .form textarea {
  width: 100%; padding: 12px 14px; border: 1px solid rgba(255,255,255,.17);
  background: rgba(255,255,255,.04); color: #fff; font: inherit; font-size: 15px;
  border-radius: 2px; transition: border-color .3s, background .3s;
}
.form input:focus, .form select:focus, .form textarea:focus {
  outline: 0; border-color: #c9a5cd; background: rgba(255,255,255,.07);
}
.form option { color: var(--encre); }
.appel .btn { border-color: #fff; background: #fff; color: var(--encre); justify-self: start; }
.appel .btn::before { background: var(--pourpre-clair); }
.appel .btn:hover { color: #fff; }
.engagements { display: grid; gap: 1px; background: rgba(255,255,255,.13);
               border: 1px solid rgba(255,255,255,.13); }
.eng { background: var(--encre); padding: 20px 22px; }
.eng b { display: block; font-family: var(--titre); font-weight: 400; font-size: 18.5px;
         letter-spacing: -.015em; }
.eng span { display: block; margin-top: 5px; font-size: 13.6px; color: rgba(255,255,255,.62); }

/* ═══ JOURNAL ═══════════════════════════════════════════════════════ */
.journal { display: grid; gap: 1px; background: var(--trait); border-top: 1px solid var(--trait);
           border-bottom: 1px solid var(--trait); }
.art { background: var(--papier); display: grid; grid-template-columns: auto 1fr auto;
       gap: clamp(14px, 3vw, 40px); align-items: center; padding: 22px var(--marge);
       text-decoration: none; transition: background .34s, padding-left .34s; }
.art:hover { background: var(--pourpre-voile); padding-left: calc(var(--marge) + 8px); }
.art .date { font-family: var(--mono); font-size: 11.5px; color: var(--encre-4); white-space: nowrap; }
.art h3 { font-family: var(--titre); font-weight: 400; font-size: clamp(17px, 1.9vw, 21px);
          margin: 0; letter-spacing: -.015em; line-height: 1.2; }
.art .lire { font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
             text-transform: uppercase; color: var(--pourpre); white-space: nowrap;
             opacity: 0; transform: translateX(-6px); transition: opacity .34s, transform .34s; }
.art:hover .lire { opacity: 1; transform: none; }

/* ═══ PARTENAIRES ═══════════════════════════════════════════════════ */
.partenaires { display: flex; flex-wrap: wrap; gap: 10px; }
.part { border: 1px solid var(--trait); padding: 12px 18px; font-family: var(--mono);
        font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase;
        color: var(--encre-3); transition: border-color .3s, color .3s; }
.part:hover { border-color: var(--pourpre); color: var(--pourpre); }

/* ═══ MÉMOIRE ═══════════════════════════════════════════════════════ */
.memoire {
  border-top: 1px solid var(--trait); background: var(--papier-2);
  padding: clamp(44px, 7vw, 88px) var(--marge);
}
.memoire-bloc { max-width: 760px; margin: 0 auto; display: grid;
                grid-template-columns: auto 1fr; gap: clamp(20px, 4vw, 40px); align-items: center; }
.memoire-photo {
  width: clamp(120px, 17vw, 178px); aspect-ratio: 1; flex: none;
  background: var(--papier); overflow: visible; position: relative;
  padding: 9px; border: 1px solid var(--trait-2);
}
/* Un portrait au crayon est une feuille : on l'encadre, on ne le découpe
   pas en pastille. Les deux équerres reprennent le trait du plan. */
.memoire-photo::before, .memoire-photo::after {
  content: ""; position: absolute; width: 13px; height: 13px; border: 1px solid var(--pourpre);
}
.memoire-photo::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.memoire-photo::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.memoire-photo img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.04); }
.memoire-photo .attente { position: absolute; inset: 0; display: grid; place-items: center;
  text-align: center; font-family: var(--mono); font-size: 9.5px; line-height: 1.5;
  letter-spacing: .06em; color: var(--encre-4); padding: 12px; }
.memoire .cote { display: block; margin-bottom: 12px; }
.memoire blockquote { margin: 0; font-family: var(--titre); font-weight: 400;
  font-style: italic; font-size: clamp(17px, 1.9vw, 21px); line-height: 1.5;
  color: var(--encre-2); letter-spacing: -.012em; }
.memoire .sig { margin-top: 14px; font-family: var(--mono); font-size: 11.5px;
                letter-spacing: .12em; text-transform: uppercase; color: var(--pourpre); }

/* ═══ PIED ══════════════════════════════════════════════════════════ */
footer.pied { background: var(--encre); color: rgba(255,255,255,.72); padding: clamp(44px, 6vw, 76px) var(--marge) 30px; }
.pied-haut { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: clamp(20px, 4vw, 48px); }
.pied h4 { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
           text-transform: uppercase; color: rgba(255,255,255,.42); margin: 0 0 14px; font-weight: 500; }
.pied ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.pied a { text-decoration: none; font-size: 14.4px; transition: color .3s; }
.pied a:hover { color: #fff; }
.pied-marque img { height: 74px; width: auto; opacity: .95; }
.pied-bas { margin-top: clamp(32px, 5vw, 54px); padding-top: 20px;
            border-top: 1px solid rgba(255,255,255,.13);
            display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between;
            font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em;
            color: rgba(255,255,255,.4); text-transform: uppercase; }

/* ═══ RESPONSIVE ════════════════════════════════════════════════════ */
@media (max-width: 1020px) {
  .promesse, .appel-grille { grid-template-columns: 1fr; }
  .finitions, .zones { grid-template-columns: 1fr; }
  .pied-haut { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  nav.menu { display: none; }
  .heros-bas { grid-template-columns: 1fr; }
  .form .duo { grid-template-columns: 1fr; }
  .memoire-bloc { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .art { grid-template-columns: 1fr; gap: 6px; }
  .art .lire { display: none; }
  .pied-haut { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════
   LE TÉLÉPHONE ET LA TABLETTE
   ───────────────────────────────────────────────────────────────────
   Plus de la moitié des demandes arriveront d'un téléphone, souvent
   depuis un chantier, une main sur le volant. Ce n'est donc pas une
   version réduite du site : c'est le site.

   Trois règles tenues partout : ce qui ne tient pas passe à la ligne,
   jamais ne se comprime ; toute cible tactile fait au moins 44 points ;
   et le titre garde sa force — un héros minuscule sur un téléphone,
   c'est une entreprise qui n'ose pas.
   ═══════════════════════════════════════════════════════════════════ */

/* Le tiroir de navigation */
.burger { display: none; width: 46px; height: 46px; flex: none; border: 1px solid var(--trait-2);
  background: transparent; border-radius: 2px; cursor: pointer; position: relative;
  padding: 0; }
.burger span { position: absolute; left: 13px; right: 13px; height: 1.5px; background: var(--encre);
  transition: transform .34s cubic-bezier(.22,.7,.24,1), opacity .2s; }
.burger span:nth-child(1) { top: 18px; } .burger span:nth-child(2) { bottom: 18px; }
body.ouvert .burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
body.ouvert .burger span:nth-child(2) { transform: translateY(-6.5px) rotate(-45deg); }
.tiroir {
  position: fixed; inset: 0; z-index: 60; background: var(--encre); color: #fff;
  /* `dvh` et non `vh` : sur iPhone, la barre d'adresse de Safari se
     rétracte au défilement et `100vh` vaut la hauteur SANS elle. Le
     menu dépassait donc du bas de l'écran au premier affichage. */
  height: 100dvh;
  display: flex; flex-direction: column; gap: 22px;
  padding: 84px var(--marge) calc(26px + env(safe-area-inset-bottom));
  opacity: 0; transition: opacity .34s cubic-bezier(.22,.7,.24,1);
  overflow-y: auto; overscroll-behavior: contain;

  /* Le centrage vertical, mais « safe ». C'est la correction du bug :
     un `justify-content: center` classique, quand le contenu est plus
     haut que la boîte, déborde des DEUX côtés — et comme on ne peut pas
     défiler vers le haut, le premier élément devient inatteignable.
     « Accueil » disparaissait exactement pour cette raison, et seulement
     sur les téléphones où la barre du navigateur rogne assez de hauteur.
     Le mot-clé `safe` dit au navigateur : centre si ça tient, sinon
     aligne au début. La ligne précédente sert de repli aux navigateurs
     qui ne le connaissent pas — eux aussi alignent au début. */
  justify-content: flex-start;
  justify-content: safe center;
}
.tiroir[hidden] { display: none; }
.tiroir.on { opacity: 1; }
.tiroir nav { display: grid; gap: 0; flex: none; }
.tiroir nav a {
  display: flex; align-items: baseline; gap: 14px; text-decoration: none; color: #fff;
  font-family: var(--titre); font-weight: 400;
  font-size: clamp(21px, 5.6vw, 30px); letter-spacing: -.018em; line-height: 1.14;
  padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.12);
  opacity: 0; transform: translateY(14px);
  position: relative;
}
/* Le titre du tiroir : deux mots qui disent où l'on est. Un menu qui
   s'ouvre sans se nommer oblige à deviner. */
.tiroir-titre {
  font-family: var(--mono); font-size: 10px; letter-spacing: .22em;
  text-transform: uppercase; color: rgba(255,255,255,.42);
  margin: 0 0 2px; flex: none;
}
/* La page où l'on se trouve, marquée. C'est l'information que tout le
   monde cherche en ouvrant un menu, et qu'on oublie presque toujours. */
.tiroir nav a[aria-current="page"] { color: #c9a5cd; }
.tiroir nav a[aria-current="page"] i { color: #c9a5cd; }
.tiroir nav a[aria-current="page"]::before {
  content: ""; position: absolute; left: -14px; top: 50%; width: 6px; height: 6px;
  margin-top: -3px; background: #c9a5cd; border-radius: 50%;
}
/* Le chiffrage porte son argument : c'est la page qui rapporte. */
.tiroir nav a em {
  font-family: var(--mono); font-style: normal; font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--encre); background: #c9a5cd;
  padding: 3px 7px; margin-left: auto; align-self: center; white-space: nowrap;
}
.tiroir.on nav a { animation: tiroirEntre .5s cubic-bezier(.19,.9,.24,1) forwards;
                   animation-delay: calc(.06s + var(--i, 0) * .05s); }
@keyframes tiroirEntre { to { opacity: 1; transform: none; } }
.tiroir nav a i { font-family: var(--mono); font-style: normal; font-size: 12px;
                  color: #c9a5cd; flex: none; }
.tiroir-pied { display: grid; gap: 14px; justify-items: start; flex: none;
               opacity: 0; transition: opacity .4s .34s; }
.tiroir.on .tiroir-pied { opacity: 1; }
.tiroir-pied .btn { border-color: #fff; background: #fff; color: var(--encre); }
.tiroir-pied .btn::before { background: var(--pourpre-clair); }
.tiroir-pied .btn:hover { color: #fff; }
.tiroir-pied > a[href^="tel"] { font-family: var(--mono); font-size: 15px;
  letter-spacing: .06em; color: rgba(255,255,255,.7); text-decoration: none; }
body.ouvert { overflow: hidden; }

/* ── La tablette : le menu ne tient plus, le tiroir prend le relais ──
   Onze entrées depuis l'ajout des outils : on resserre plus tôt et en
   deux temps, pour que le bouton DEVIS ne soit jamais poussé hors du
   cadre. Il l'a été, à 1280 exactement, et ça ne se voyait qu'à cette
   largeur-là. */
@media (max-width: 1340px) {
  nav.menu { gap: 20px; }
}
@media (max-width: 1180px) {
  nav.menu { gap: 15px; }
  nav.menu a { font-size: 11.5px; }
}
@media (max-width: 1100px) {
  nav.menu { gap: 13px; }
  nav.menu a { font-size: 11px; }
}
@media (max-width: 940px) {
  nav.menu { display: none; }
  .burger { display: block; margin-left: auto; }
  header.barre { gap: 14px; }
  #btnDevis { order: 2; }
  .burger { order: 3; margin-left: 0; }
  .marque { margin-right: auto; }
  /* Deux colonnes plutôt qu'une seule : sur un iPad en portrait, une
     colonne unique laisse la moitié de l'écran vide. */
  .finitions { grid-template-columns: repeat(2, 1fr); }
  .zones { grid-template-columns: repeat(2, 1fr); }
  .promesse { grid-template-columns: 1fr; }
  .appel-grille { grid-template-columns: 1fr; }
  .chiffres { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .finitions, .zones, .chiffres { grid-template-columns: 1fr; }
}

/* ── Le téléphone ───────────────────────────────────────────────── */
@media (max-width: 640px) {
  :root { --marge: 20px; }
  header.barre { padding: 10px 20px; }
  .marque img { width: 84px; }
  /* Le libellé du bouton se raccourcit plutôt que de rétrécir : un
     bouton de dix pixels de haut ne se vise pas avec un pouce. */
  /* La réserve rendue à la flèche élargit le bouton de quatre pixels :
     sur un écran de 360 px, ces quatre pixels débordaient. On les reprend
     sur les côtés — l'équilibre optique est conservé, la largeur aussi. */
  #btnDevis { padding: 12px 13px; font-size: 11px; }
  #btnDevis .long { display: none; }

  .heros { min-height: 0; padding-top: 30px; padding-bottom: 42px; }
  h1.titre { font-size: clamp(34px, 10vw, 66px); letter-spacing: -.022em; line-height: 1.04; }
  .heros-cote { flex-wrap: wrap; gap: 6px 12px; }
  .heros-cote .trait { display: none; }
  .heros-lede { font-size: 16.5px; }
  .heros-actions { width: 100%; }
  .heros-actions .btn { flex: 1 1 100%; justify-content: center; }
  .secteurs { gap: 4px 14px; }

  section { padding-top: 46px; padding-bottom: 46px; }
  .tete { grid-template-columns: 1fr; gap: 8px; }
  .tete .num { display: block; }
  h2 { font-size: clamp(25px, 6.6vw, 36px); letter-spacing: -.016em; }

  /* Les métiers : deux colonnes tiennent, et le survol n'existe pas —
     on ouvre donc le détail d'emblée plutôt que de le cacher derrière
     un geste qui n'arrivera jamais. */
  .metiers { grid-template-columns: 1fr; }
  .metier { min-height: 0; padding: 20px; }
  .metier p { opacity: 1; transform: none; }
  .metier .angle { display: none; }

  .fin-corps { padding: 20px; }
  .fin-lettre { font-size: 48px; }
  .zone { padding: 24px 20px; }
  .art { padding: 18px 20px; }
  .eng { padding: 17px 19px; }
  .btn { padding: 13px 18px; }
  .form input, .form select, .form textarea { font-size: 16px; }  /* pas de zoom iOS */
  .appel .btn { width: 100%; justify-content: center; }
  .pied-bas { flex-direction: column; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-delay: 0s !important;
      transition-duration: .01ms !important; }
  h1.titre .l { opacity: 1; transform: none; }
  .rv { opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PAS DE CASE VIDE — sur aucun écran
   ───────────────────────────────────────────────────────────────────────
   Dix-neuf métiers dans une grille de quatre colonnes font seize cases
   pleines et trois pleines : il reste un trou en bas à droite, et ce trou
   se voit plus que tout le reste. On ne le bouche pas avec du vide : on y
   met ce qui manquait vraiment à la page — la filiale.

   Le compte tombe alors juste à 2, 4 et 5 colonnes. À 3, la carte de la
   filiale s'étale sur les deux dernières cases plutôt que d'en laisser
   une seule orpheline.
   ═══════════════════════════════════════════════════════════════════════ */
.metier.metier-filiale {
  background: var(--encre); color: #fff;
}
.metier-filiale::before { background: var(--pourpre); }
.metier-filiale .i { color: rgba(255,255,255,.5); }
.metier-filiale h3 { color: #fff; }
.metier-filiale p { color: rgba(255,255,255,.72); opacity: 1; transform: none; }
.metier-filiale:hover h3, .metier-filiale:focus-within h3 { color: #fff; }
.metier-filiale .angle { border-color: rgba(255,255,255,.4); }
.metier-filiale .sortant {
  margin-top: auto; padding-top: 14px; font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: #c9a5cd; display: inline-flex; align-items: center; gap: 8px;
}
.metier-filiale .sortant span { transition: transform .34s cubic-bezier(.22,.7,.24,1); }
.metier-filiale:hover .sortant span { transform: translateX(4px); }
a.metier { text-decoration: none; color: inherit; }

/* ── Les chantiers livrés : cliquables ─────────────────────────────── */
.travail { cursor: pointer; text-align: left; width: 100%; font: inherit;
           color: inherit; padding: 0; }
.travail:hover { border-color: var(--pourpre); }
.travail .vue img { width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.03); transition: filter .55s, transform .8s cubic-bezier(.22,.7,.24,1); }
.travail:hover .vue img { filter: none; transform: scale(1.04); }
.travail .vue { overflow: hidden; }
.travail .plus { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--pourpre); }
.travail .plus span { transition: transform .34s cubic-bezier(.22,.7,.24,1); }
.travail:hover .plus span { transform: translateX(4px); }

/* La fiche d'un chantier, en plein écran */
.fiche { position: fixed; inset: 0; z-index: 70; background: var(--papier);
         overflow-y: auto; opacity: 0; transition: opacity .34s cubic-bezier(.22,.7,.24,1); }
.fiche[hidden] { display: none; }
.fiche.on { opacity: 1; }
.fiche-barre { position: sticky; top: 0; z-index: 2; display: flex; align-items: center;
  gap: 16px; padding: 14px var(--marge);
  background: color-mix(in srgb, var(--papier) 90%, transparent);
  backdrop-filter: blur(12px); border-bottom: 1px solid var(--trait); }
.fiche-corps { padding: clamp(26px, 5vw, 56px) var(--marge) clamp(50px, 8vw, 100px); }

/* ── La fiche d'un chantier : sa propre échelle ────────────────────────
   Le titre héritait du h2 des sections, jusqu'à 46 px. C'est la taille
   d'une accroche de page d'accueil, pas d'un titre de fiche : on lit ici
   un chantier précis, pas une promesse. Réduit, et resserré sur une
   mesure lisible — au-delà de 70 caractères par ligne, l'œil perd la
   ligne suivante en revenant à la marge. */
.fiche-corps { max-width: 1180px; margin: 0 auto; }
/* UNE SECTION DANS UNE FICHE N'EST PAS UNE SECTION DE PAGE.
   Ilyes, le 9 septembre 2026 : « j'ai beaucoup de vides sur la page de
   réalisation. »

   Les lots et les avant/après sont écrits en <section>, parce que c'en
   sont — et la règle générale du site donne à toute section 132 px de
   respiration en haut et en bas, plus une marge latérale. C'est juste
   pour une section de page, qui doit se détacher de la précédente ; c'est
   absurde à l'intérieur d'une fiche, où tout appartient au même objet.
   D'où les grands vides, et le décalage des lots vers la droite.

   On remet à zéro plutôt que de renoncer à la balise : le sens du
   marquage vaut mieux que l'évitement d'une règle. */
.fiche-corps section { padding: 0; }
.fiche-corps h2 { font-size: clamp(24px, 2.7vw, 34px); line-height: 1.1;
  max-width: 24ch; margin-top: 8px; }
.fiche-corps .chapo { font-size: clamp(15px, 1.15vw, 16.5px); line-height: 1.72;
  max-width: 68ch; color: var(--encre-2); }
.fiche-corps .cote-b { color: var(--pourpre); }
.fiche-corps .dv-cotes { margin-top: 16px; }
/* Le récit est le seul texte long de la fiche : sur un téléphone il tient
   la largeur, ailleurs il se resserre pour rester lisible d'une traite. */
@media (max-width: 620px) {
  .fiche-corps .chapo { font-size: 15px; }
  .fiche-lots li { font-size: 12.5px; padding: 6px 10px; }
  .fiche-chiffres > div { padding: 12px 16px 11px 0; margin-right: 16px; }
  .fiche-chiffres dd { font-size: 19px; }
}
/* ── La galerie d'un chantier ──────────────────────────────────────────
   LE CADRE PREND LA FORME DE LA PHOTO, PAS L'INVERSE.

   Le cadre imposait un 3/2 à toutes les images. Une photo verticale y
   perdait la moitié de sa hauteur, sans que rien ne le dise. Le
   back-office mesure chaque image au dépôt : `--r` porte son rapport
   réel, et le cadre s'y règle. Une photo verticale reste verticale.

   `--r` a une valeur de repli : un contenu publié avant cette version ne
   porte pas de dimensions, et doit s'afficher quand même. */
.fiche-galerie { display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr));
  gap: clamp(10px, 1.4vw, 16px); align-items: start;
  margin-top: clamp(22px, 3vw, 36px); }
.fiche-galerie figure { margin: 0; background: var(--papier-2); position: relative;
  border: 1px solid var(--trait); overflow: hidden; }
.fiche-galerie .cadre { aspect-ratio: var(--r, 3 / 2); display: block; overflow: hidden; }
.fiche-galerie img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .9s cubic-bezier(.22,.7,.24,1); }
.fiche-galerie figure:hover img { transform: scale(1.03); }
.fiche-galerie svg { width: 100%; height: 100%; display: block; }
/* Une photo nettement horizontale prend deux colonnes — à largeur égale
   d'un portrait, elle ne serait qu'une vignette. Seulement quand il y a
   au moins deux colonnes à prendre. */
@media (min-width: 620px) {
  .fiche-galerie figure.large { grid-column: span 2; }
}
.fiche-galerie figcaption { padding: 11px 14px; font-family: var(--mono); font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--encre-3);
  border-top: 1px solid var(--trait); }
@media (prefers-reduced-motion: reduce) {
  .fiche-galerie img { transition: none; }
  .fiche-galerie figure:hover img { transform: none; }
}
.fiche-galerie .attente { font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--encre-4); text-align: center; padding: 20px; }
/* ── LES LOTS D'UN CHANTIER ────────────────────────────────────────────
   Ils s'affichaient en lignes pleine largeur, numérotées, à la taille du
   texte courant. Onze lots faisaient onze pavés : sur un téléphone, un mur
   à faire défiler avant d'arriver aux photos — et c'est les photos qu'on
   est venu voir.

   Le numéro s'en va avec. Il ressemblait à un ordre d'exécution ; les lots
   d'un chantier n'en ont pas. Numéroter ce qui n'est pas une séquence
   raconte quelque chose de faux, et occupe la place de ce qui est vrai.

   Reste une liste de matières, en petites étiquettes : on l'embrasse d'un
   coup d'œil, ce qui est exactement l'usage qu'on en fait. */
.fiche-lots { margin-top: clamp(22px, 3vw, 30px); }
.fiche-lots h3 {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--encre-3); font-weight: 400;
  margin: 0 0 12px;
}
.fiche-lots ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 7px;
}
.fiche-lots li {
  font-size: 13px; line-height: 1.25; color: var(--encre-2);
  padding: 7px 12px; border: 1px solid var(--trait);
  background: var(--papier-2); white-space: nowrap;
}

/* ── LES CHIFFRES DU CHANTIER ──────────────────────────────────────────
   Durée, corps d'état, vues : trois nombres qui répondent aux trois
   questions qu'on se pose devant une réalisation — c'était long ? c'était
   gros ? est-ce qu'on voit quelque chose ? */
.fiche-chiffres {
  display: flex; flex-wrap: wrap; gap: 0; margin: clamp(20px, 3vw, 28px) 0 0;
  border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait);
}
.fiche-chiffres > div {
  padding: 14px 22px 13px 0; margin-right: 22px;
  border-right: 1px solid var(--trait);
}
.fiche-chiffres > div:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.fiche-chiffres dt {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--encre-4);
}
.fiche-chiffres dd {
  margin: 5px 0 0; font-family: var(--titre); font-weight: 400;
  font-size: 22px; line-height: 1; letter-spacing: -.01em; color: var(--encre);
  font-variant-numeric: tabular-nums;
}

/* La photo d'équipe, en tête de « Votre interlocuteur ». Noir et blanc au
   repos, couleur au survol : le noir et blanc tient la page ensemble, la
   couleur récompense celui qui s'arrête. */
.eq-ban { margin: 0 0 clamp(18px, 3vw, 30px); border: 1px solid var(--trait);
          overflow: hidden; background: var(--papier-2); }
.eq-ban img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; display: block;
  filter: grayscale(1) contrast(1.04); transition: filter .7s cubic-bezier(.22,.7,.24,1); }
.eq-ban:hover img { filter: none; }
.eq-ban figcaption { padding: 13px 18px; font-size: 13.5px; color: var(--encre-3);
                     border-top: 1px solid var(--trait); }
.memoire-photo img { filter: contrast(1.02); }
@media (max-width: 640px) { .eq-ban img { aspect-ratio: 4 / 3; } }

/* Le tableau comparatif des finitions. Il défile dans son cadre sur un
   téléphone — la page, elle, ne bouge pas. Et la première colonne reste
   visible : sans elle, on lit trois « Oui » sans savoir de quoi. */
.cmp-cadre { overflow-x: auto; -webkit-overflow-scrolling: touch;
             border: 1px solid var(--trait); background: var(--papier); }
table.cmp { border-collapse: collapse; width: 100%; min-width: 660px; font-size: 14.2px; }
table.cmp th, table.cmp td { padding: 13px 16px; text-align: left; vertical-align: top;
                             border-bottom: 1px solid var(--trait); }
table.cmp thead th { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--encre-3); font-weight: 500;
  background: var(--papier-2); position: sticky; top: 0; z-index: 1; }
table.cmp tbody td:first-child, table.cmp thead th:first-child {
  position: sticky; left: 0; background: var(--papier); font-weight: 500;
  border-right: 1px solid var(--trait); }
table.cmp thead th:first-child { background: var(--papier-2); z-index: 2; }
table.cmp tr.sep td { background: var(--pourpre-voile); font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--pourpre); }
table.cmp tbody tr:hover td { background: color-mix(in srgb, var(--pourpre) 4%, transparent); }
table.cmp tbody tr:hover td:first-child { background: color-mix(in srgb, var(--pourpre) 7%, transparent); }


/* ── La rose des vents ───────────────────────────────────────────────
   Le compas donne le cercle ; la rose donne le nord. Elle tourne dans
   le sens des aiguilles, l'aiguille tourne à contresens et plus vite :
   deux vitesses valent mieux qu'une, l'œil accroche le décalage sans
   savoir pourquoi. */
.calque-rose {
  position: fixed; z-index: 0; pointer-events: none;
  right: -10vw; bottom: -12vh; width: min(52vh, 44vw); aspect-ratio: 1;
  opacity: .42;
}
.calque-rose svg { width: 100%; height: 100%; display: block; overflow: visible; }
.calque-rose .rose-tour { transform-origin: 200px 200px; animation: roseTourne 96s linear infinite; }
.calque-rose .rose-aiguille { transform-origin: 200px 200px; animation: roseAiguille 34s linear infinite; }
@keyframes roseTourne { to { transform: rotate(360deg); } }
@keyframes roseAiguille { to { transform: rotate(-360deg); } }
@media (max-width: 640px) { .calque-rose { opacity: .3; right: -26vw; } }

/* ── Comparatif : la ligne « identique sur les trois » ──────────────── */
table.cmp tr.meme td { background: var(--pourpre-voile); color: var(--pourpre); }
table.cmp tr.meme td:first-child { background: var(--pourpre-voile); }
table.cmp tr.meme td[colspan] { font-weight: 500; }


/* ── Mentions légales ────────────────────────────────────────────────
   Une page qu'on lit mal quand elle est mal composée : colonne étroite,
   sous-titres qui accrochent l'œil, et la fiche d'identité en deux
   colonnes comme un cartouche de plan. */
.heros-court { padding-top: clamp(96px, 13vw, 150px); }
.legal { max-width: 74ch; }
.legal article { padding: clamp(22px, 3vw, 34px) 0; border-top: 1px solid var(--trait); }
.legal article:first-child { border-top: 0; padding-top: 0; }
.legal h2 { font-family: var(--titre); font-weight: 400; font-size: clamp(21px, 2.4vw, 27px);
            letter-spacing: -.016em; margin: 0 0 14px; }
.legal p { margin: 0 0 12px; font-size: 15px; line-height: 1.75; color: var(--encre-2); }
.legal p:last-child { margin-bottom: 0; }
.legal strong { font-weight: 500; color: var(--encre); }
.legal a { color: var(--pourpre); text-underline-offset: 3px; }
.legal .a-remplir {
  border-left: 2px solid var(--pourpre); background: var(--pourpre-voile);
  padding: 12px 16px; font-size: 14px; color: var(--encre-2);
}
.fiche-legale { margin: 0; display: grid; gap: 0; border: 1px solid var(--trait); }
.fiche-legale > div { display: grid; grid-template-columns: 210px 1fr;
                      border-bottom: 1px solid var(--trait); }
.fiche-legale > div:last-child { border-bottom: 0; }
.fiche-legale dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--encre-3); padding: 12px 16px;
  background: var(--papier-2); border-right: 1px solid var(--trait); }
.fiche-legale dd { margin: 0; padding: 12px 16px; font-size: 14.5px; }
.legal .maj { font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
              text-transform: uppercase; color: var(--encre-4); margin-top: 26px; }
@media (max-width: 620px) { .fiche-legale > div { grid-template-columns: 1fr; }
  .fiche-legale dt { border-right: 0; border-bottom: 1px solid var(--trait); } }


/* Une grille de cinq colonnes avec quatre cases laisse un trou. On compte
   les enfants et on ajuste — un plan ne se rend pas avec une case vide. */
.metiers:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, 1fr); }
.metiers:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
.metiers:has(> :nth-child(6):last-child) { grid-template-columns: repeat(3, 1fr); }
.metiers:has(> :nth-child(8):last-child) { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .metiers:has(> :nth-child(4):last-child),
  .metiers:has(> :nth-child(3):last-child) { grid-template-columns: repeat(2, 1fr); }
}


/* ═══ LES PETITS EFFETS ═════════════════════════════════════════════
   Portés par assets/effets.js. Chacun se coupe si le système demande
   moins d'animation — et aucun n'intervient dans la lecture du texte,
   donc rien de tout cela ne pèse sur l'accessibilité ni sur le SEO. */

/* La cote de lecture, en haut de page */
.cote-lecture { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 60; pointer-events: none; }
.cote-lecture i { display: block; height: 100%; width: 100%; background: var(--pourpre);
  transform: scaleX(0); transform-origin: left; opacity: .85; }

/* Le réticule de CAO */
.reticule { position: fixed; inset: 0; z-index: 55; pointer-events: none;
  opacity: 0; transition: opacity .35s; mix-blend-mode: multiply; }
.reticule.on { opacity: 1; }
.reticule.discret { opacity: .3; }
/* Sur une image, il disparaît. Voir assets/effets.js : deux traits qui se
   croisent sur du papier se lisent comme une visée, les mêmes sur une
   photographie se lisent comme une rature. */
.reticule.efface { opacity: 0; }
.reticule i { position: absolute; background: var(--pourpre); opacity: .17; display: block; }
.reticule .rx { top: 0; bottom: 0; left: 0; width: 1px; }
.reticule .ry { left: 0; right: 0; top: 0; height: 1px; }
.reticule .rc { position: absolute; top: 0; left: 0; font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .09em; color: var(--pourpre); opacity: .42; white-space: nowrap; }
@media (pointer: coarse) { .reticule { display: none; } }

/* Les dessins qui se tracent */
@keyframes eresTracer { to { stroke-dashoffset: 0; } }

/* L'échelle graphique du pied de page */
.pied-bas .echelle { display: inline-flex; align-items: center; color: rgba(255,255,255,.34); }
.pied-bas .echelle svg { width: 110px; height: auto; display: block; }
@media (max-width: 620px) { .pied-bas .echelle { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .cote-lecture, .reticule { display: none; }
  .fin-image svg *, .travail .vue svg * { stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important; animation: none !important; }
}


/* ═══ TACTILE ═══════════════════════════════════════════════════════
   Au doigt, une cible de moins de 28 px se rate une fois sur trois. Les
   listes de communes, les liens du pied de page et ceux du menu tiroir
   gagnent de quoi être touchés — sans changer d'un pixel leur allure au
   trackpad, puisque la règle ne vaut que pour les pointeurs grossiers. */
@media (pointer: coarse) {
  .zone .villes a, .zone .villes span,
  .joindre a, .pied ul a, .pied-bas a {
    display: inline-block; min-height: 30px; line-height: 30px;
  }
  /* Le menu tiroir est déjà large et haut : il n'a pas besoin de cette
     règle, et elle lui coûtait sa mise en page — passé en `inline-block`,
     il perdait le `flex` qui range le numéro à gauche et la pastille à
     droite. On lui donne juste une hauteur de cible confortable. */
  .tiroir nav a { min-height: 46px; }
  .zone .villes { line-height: 30px; }
  .pied ul { gap: 4px; }
}


/* ═══ LES DESSINS À LA PLACE DES PHOTOS ═════════════════════════════
   Un emplacement photo vide se remplit d'un dessin au trait. Les règles
   ci-dessous ne font qu'une chose : donner au SVG exactement le cadre
   qu'aurait eu la photo, pour que le jour où elle arrive, rien ne bouge. */
.pers-photo svg, .fiche-galerie .cadre svg,
.cadre-dessin svg, .art-vue svg { width: 100%; height: 100%; display: block; }
.pers-photo svg { transition: transform .7s cubic-bezier(.22,.7,.24,1); }
.pers:hover .pers-photo svg { transform: scale(1.03); }

.cadre-dessin { overflow: hidden; background: var(--papier-2); }
.cadre-dessin.large { aspect-ratio: 20 / 7; }
.cadre-dessin img { width: 100%; height: 100%; object-fit: cover;
                    filter: grayscale(1) contrast(1.04); }

/* Le journal gagne une vignette : une liste de titres nus se lit mal, et
   un schéma dit en un coup d'œil de quoi parle l'article. */
.art { grid-template-columns: 132px auto 1fr auto; }
.art-vue { width: 132px; aspect-ratio: 5 / 3; overflow: hidden; display: block;
           border: 1px solid var(--trait); background: var(--papier-2); }
.art-vue img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
  .art { grid-template-columns: 92px 1fr; grid-template-areas: "vue date" "vue titre"; align-items: start; }
  .art-vue { grid-area: vue; width: 92px; }
  .art .date { grid-area: date; }
  .art h3 { grid-area: titre; margin-top: 6px; }
  .art .lire { display: none; }
}


/* ═══ LES MÉTIERS PARTENAIRES ═══════════════════════════════════════
   Soixante-seize métiers en vrac font un mur de mots. Rangés en six
   familles, avec leur numéro, ils redeviennent une nomenclature — ce
   qu'ils sont vraiment sur un dossier de consultation. */
.familles { display: grid; gap: 1px; background: var(--trait);
            border: 1px solid var(--trait); }
@media (min-width: 900px) { .familles { grid-template-columns: repeat(2, 1fr); } }
.famille { background: var(--papier); padding: clamp(20px, 2.6vw, 30px); }
.famille h3 { font-family: var(--titre); font-weight: 400; font-size: clamp(19px, 2.1vw, 24px);
  letter-spacing: -.016em; margin: 0 0 16px; display: flex; align-items: baseline; gap: 12px; }
.famille .num-fam { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  color: var(--pourpre); flex: none; }
.famille .partenaires { gap: 7px; }
.famille .part { padding: 8px 13px; font-size: 10.8px; }

.ouverture { display: grid; gap: clamp(26px, 4vw, 52px); margin-top: clamp(30px, 4vw, 52px);
  border-top: 1px solid var(--trait); padding-top: clamp(28px, 4vw, 46px); }
@media (min-width: 900px) { .ouverture { grid-template-columns: 1fr 1fr; } }
.ouverture h3 { font-family: var(--titre); font-weight: 400; font-size: clamp(22px, 2.6vw, 30px);
  letter-spacing: -.018em; line-height: 1.12; margin: 12px 0 14px; max-width: 22ch; }
.ouverture p { font-size: 14.6px; color: var(--encre-2); margin: 0 0 12px; max-width: 62ch; }
.promesses { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 0; }
.promesses li { font-size: 14.4px; color: var(--encre-2); padding: 12px 0 12px 26px;
  border-top: 1px solid var(--trait); position: relative; }
.promesses li:first-child { border-top: 0; }
.promesses li::before { content: ""; position: absolute; left: 2px; top: 19px;
  width: 7px; height: 7px; border: 1px solid var(--pourpre); transform: rotate(45deg); }
.promesses b { font-weight: 500; color: var(--encre); }
.rangee-ouverture { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }


/* ═══ LES PHOTOS SE DESSINENT AUSSI ═════════════════════════════════
   Le cadre se trace, la règle balaie, la photo se découvre derrière
   elle, le cadre s'efface. Une image qui remplace un dessin garde ainsi
   le même geste — c'est la seule façon qu'une photo n'ait pas l'air
   rapportée sur une page entièrement dessinée. */
.photo-tracee { position: relative; overflow: hidden; }
.photo-tracee > img { clip-path: inset(0 100% 0 0); }
.photo-tracee.on > img { animation: eresDevoile 1.05s .5s cubic-bezier(.35,.55,.15,1) forwards; }
@keyframes eresDevoile { to { clip-path: inset(0 0 0 0); } }

.photo-tracee .calque-dessin { position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 2; }
.photo-tracee.on .calque-dessin { animation: eresEstompe .7s 1.5s ease forwards; }
@keyframes eresEstompe { to { opacity: 0; } }

.photo-tracee .regle { position: absolute; top: 0; bottom: 0; left: 0; width: 0;
  /* La règle qui balaie s'affine avec le reste : elle accompagne le
     cadre, elle ne le double pas. */
  border-right: .7px solid var(--pourpre); opacity: 0; z-index: 3; pointer-events: none; }
.photo-tracee.on .regle { animation: eresRegle 1.05s .5s cubic-bezier(.35,.55,.15,1) forwards; }
@keyframes eresRegle {
  0% { width: 0; opacity: .9; } 92% { opacity: .9; } 100% { width: 100%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .photo-tracee > img { clip-path: none !important; animation: none !important; }
  .photo-tracee .calque-dessin, .photo-tracee .regle { display: none; }
}

/* Un article annoncé mais pas écrit ne promet pas « Lire — 8 min ». */
.art[aria-disabled] { cursor: default; }
.art[aria-disabled] .lire { opacity: 1; transform: none; color: var(--encre-4); }
.art[aria-disabled]:hover { background: var(--papier); padding-left: var(--marge); }


/* ═══ CORRECTIFS ════════════════════════════════════════════════════ */

/* Le menu du téléphone se refermait mal : le tiroir passait au-dessus de
   la barre, donc au-dessus du bouton qui sert à le fermer. On remonte la
   barre au-dessus du tiroir et on l'habille pour le fond sombre. */
body.ouvert { overflow: hidden; }
body.ouvert header.barre { z-index: 65; background: transparent; border-bottom-color: transparent; }
body.ouvert .marque img { filter: brightness(0) invert(1); }
body.ouvert .burger { border-color: rgba(255,255,255,.4); }
body.ouvert .burger span { background: #fff; }
body.ouvert #btnDevis { opacity: 0; pointer-events: none; }
.tiroir-titre { order: 0; } .tiroir nav { order: 1; } .tiroir-pied { order: 2; }
.tiroir-fermer { order: 3; align-self: flex-start; font-family: var(--mono);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.55);
  background: none; border: 0; padding: 12px 0; cursor: pointer; min-height: 44px; }
.tiroir-fermer:hover { color: #fff; }
@media (min-width: 941px) { .tiroir-fermer { display: none; } }

/* Le taureau seul est une marque étroite : à 46 px il se perdait à côté
   du menu. On le remonte, et on lui donne de l'air à sa droite. */
.marque img { height: 56px; width: auto; }
.marque { min-height: 56px; }
@media (max-width: 940px) { .marque img { height: 46px; } .marque { min-height: 46px; } }
@media (max-width: 400px) { .marque img { height: 40px; } }
.pied-marque img { height: 88px; }


/* ── « Pour tous les budgets » ────────────────────────────────────────
   Le doute que le tableau des gammes fait naître — « le C, c'est le
   moins bien » — se désamorce avant, pas après. Donc en tête de section,
   en grand, avant les trois colonnes. */
.tous-budgets { border: 1px solid var(--trait); border-left: 3px solid var(--pourpre);
  background: var(--papier); padding: clamp(20px, 3vw, 34px);
  margin-bottom: clamp(26px, 4vw, 44px); }
.tous-budgets .mono { color: var(--pourpre); margin: 0 0 12px; }
.tous-budgets .grande { font-family: var(--titre); font-weight: 400;
  font-size: clamp(21px, 3vw, 31px); line-height: 1.22; letter-spacing: -.018em;
  max-width: 34ch; margin: 0; }
.tous-budgets .grande em { font-style: normal; color: var(--pourpre); }
.tous-budgets-points { display: grid; gap: 16px; margin-top: clamp(20px, 3vw, 28px);
  padding-top: clamp(18px, 2.5vw, 24px); border-top: 1px solid var(--trait); }
@media (min-width: 820px) { .tous-budgets-points { grid-template-columns: repeat(3, 1fr); gap: 26px; } }
.tous-budgets-points div { font-size: 14.2px; color: var(--encre-2); line-height: 1.6; }
.tous-budgets-points b { display: block; color: var(--encre); font-weight: 500; margin-bottom: 4px; }


/* ── Les articles qui se déplient ─────────────────────────────────── */
.art-bloc { background: var(--papier); border-bottom: 1px solid var(--trait); }
.art-bloc:last-child { border-bottom: 0; }
.art { width: 100%; text-align: left; border: 0; background: none; cursor: pointer;
       font: inherit; color: inherit; }
.art .pm { position: relative; width: 16px; height: 16px; flex: none; opacity: .6; }
.art .pm::before, .art .pm::after { content: ""; position: absolute; inset: 50% 0 auto 0;
  height: 1px; background: var(--pourpre); transition: transform .4s cubic-bezier(.22,.7,.24,1); }
.art .pm::after { transform: rotate(90deg); }
.art-bloc.ouvert .art .pm::after { transform: rotate(0); }
.art-bloc.ouvert .art { background: var(--pourpre-voile); }
.art-bloc.ouvert .art .lire { opacity: 1; transform: none; }
.art-corps { height: 0; overflow: hidden; transition: height .45s cubic-bezier(.22,.7,.24,1); }
.art-texte { padding: 4px var(--marge) clamp(26px, 4vw, 40px)
             calc(var(--marge) + 132px + clamp(14px, 3vw, 40px)); max-width: 82ch; }
.art-texte h4 { font-family: var(--titre); font-weight: 400; font-size: clamp(18px, 2.2vw, 23px);
  letter-spacing: -.016em; margin: 22px 0 8px; color: var(--encre); }
.art-texte p { font-size: 15px; line-height: 1.72; color: var(--encre-2); margin: 0 0 12px; }
.art-texte ul { margin: 0 0 14px; padding-left: 1.1em; display: grid; gap: 7px;
  font-size: 15px; line-height: 1.6; color: var(--encre-2); }
.art-texte b { color: var(--encre); font-weight: 500; }
.art-texte .chapeau { font-family: var(--titre); font-size: clamp(17px, 2vw, 20px);
  line-height: 1.45; color: var(--encre); margin-bottom: 16px; }
@media (max-width: 900px) { .art-texte { padding-left: var(--marge); padding-right: var(--marge); } }



/* ── L'estimateur ─────────────────────────────────────────────────────
   Un outil, pas un gadget : les réglages à gauche, le résultat à droite,
   et un avertissement qui ne se cache pas. Sur téléphone, le résultat
   passe en premier — c'est lui qu'on vient chercher. */
.estimateur { display: grid; gap: 1px; background: var(--trait);
  border: 1px solid var(--trait); }
@media (min-width: 900px) { .estimateur { grid-template-columns: 1.05fr .95fr; } }
.es-reglages { background: var(--papier); padding: clamp(20px, 3vw, 32px);
  display: grid; gap: clamp(20px, 3vw, 28px); align-content: start; }
.es-champ { border: 0; padding: 0; margin: 0; }
.es-champ label, .es-champ legend { display: block; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--encre-3); margin-bottom: 12px;
  padding: 0; }
.es-champ label output { float: right; color: var(--pourpre); font-variant-numeric: tabular-nums; }

.es-reglages input[type=range] { width: 100%; -webkit-appearance: none; appearance: none;
  height: 2px; background: var(--trait-2); outline: none; margin: 6px 0; }
.es-reglages input[type=range]::-webkit-slider-thumb { -webkit-appearance: none;
  width: 26px; height: 26px; border-radius: 50%; background: var(--pourpre);
  cursor: grab; border: 3px solid var(--papier); box-shadow: 0 0 0 1px var(--pourpre); }
.es-reglages input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%;
  background: var(--pourpre); cursor: grab; border: 3px solid var(--papier); }
.es-echelle { display: flex; justify-content: space-between; font-family: var(--mono);
  font-size: 9.5px; color: var(--encre-4); letter-spacing: .06em; }

.es-options { display: grid; gap: 7px; }
.es-options > label { display: block; margin: 0; padding: 0; text-transform: none;
  letter-spacing: 0; font-family: var(--corps); font-size: inherit; color: inherit; }
.es-options label span { display: flex; flex-direction: column; gap: 1px;
  border: 1px solid var(--trait); border-radius: 3px; padding: 11px 14px; cursor: pointer;
  transition: border-color .25s, background .25s; min-height: 46px; justify-content: center; }
.es-options label b { font-weight: 500; font-size: 14.5px; }
.es-options label small { font-size: 12px; color: var(--encre-3); }
.es-options input { position: absolute; opacity: 0; width: 0; height: 0; }
.es-options input:checked + span { border-color: var(--pourpre); background: var(--pourpre-voile); }
.es-options input:focus-visible + span { outline: 2px solid var(--pourpre); outline-offset: 2px; }

.es-resultat { background: var(--encre); color: #fff; padding: clamp(20px, 3vw, 32px);
  display: flex; flex-direction: column; gap: 12px; }
.es-etiquette { color: rgba(255,255,255,.5); margin: 0; }
.es-total { font-family: var(--titre); font-weight: 400; font-size: clamp(28px, 5vw, 44px);
  line-height: 1.05; letter-spacing: -.022em; margin: 0; font-variant-numeric: tabular-nums; }
.es-m2 { font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em;
  color: #c9a5cd; margin: 0; }
.es-barre { display: flex; gap: 2px; height: 46px; margin: 8px 0 4px; }
.es-part { background: rgba(255,255,255,.09); border-top: 2px solid #c9a5cd;
  padding: 6px 8px; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between;
  min-width: 0; transition: background .25s; }
.es-part:hover { background: rgba(255,255,255,.16); }
.es-part:nth-child(1) { border-top-color: #e6d3e8; }
.es-part:nth-child(2) { border-top-color: #c9a5cd; }
.es-part:nth-child(3) { border-top-color: #a878ae; }
.es-part:nth-child(4) { border-top-color: #7d4f84; }
.es-part-nom { font-size: 10px; line-height: 1.25; color: rgba(255,255,255,.72);
  overflow: hidden; text-overflow: ellipsis; }
.es-part-pct { font-family: var(--mono); font-size: 10px; color: rgba(255,255,255,.55); }
.es-explique { font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,.78); margin: 0; }
.es-explique b { color: #fff; font-weight: 400; }
.es-detail { font-size: 12.5px; color: rgba(255,255,255,.55); margin: 0; min-height: 1em; }
.es-resultat .btn { align-self: flex-start; margin-top: 6px; border-color: #fff;
  background: #fff; color: var(--encre); }
.es-resultat .btn::before { background: var(--pourpre-clair); }
.es-resultat .btn:hover { color: #fff; }
.es-avert { font-size: 11.5px; line-height: 1.55; color: rgba(255,255,255,.42);
  margin: 6px 0 0; border-top: 1px solid rgba(255,255,255,.12); padding-top: 12px; }
@media (max-width: 899px) { .estimateur { grid-template-columns: 1fr; }
  .es-resultat { order: -1; } }


/* ── Le niveau à bulle du pied de page ────────────────────────────── */
.niveau { display: inline-flex; align-items: center; }
.niveau .fiole { position: relative; display: block; width: 92px; height: 18px;
  border: 1px solid rgba(255,255,255,.28); border-radius: 9px; background: rgba(255,255,255,.04); }
.niveau .bulle { position: absolute; top: 50%; left: 50%; width: 13px; height: 13px;
  border-radius: 50%; background: rgba(201,165,205,.55); border: 1px solid rgba(255,255,255,.5);
  transform: translate(-50%,-50%); }
.niveau .repere { position: absolute; top: 3px; bottom: 3px; width: 1px;
  background: rgba(255,255,255,.3); }
.niveau .repere:nth-of-type(1) { left: 38px; }
.niveau .repere:nth-of-type(2) { left: 53px; }
@media (max-width: 720px) { .niveau { display: none; } }


/* ── Les métiers sur téléphone ────────────────────────────────────────
   Vingt métiers empilés en pleine largeur faisaient quatre mille pixels
   de défilement. On ne retire aucun métier — on réduit la carte : deux
   colonnes, moins de marge, un titre plus sobre, et la phrase de détail
   qui n'apparaît qu'au toucher. La liste complète tient alors en un
   écran et demi au lieu de six. */
@media (max-width: 720px) {
  .metiers { grid-template-columns: repeat(2, 1fr); }
  .metier { min-height: 0; padding: 13px 12px 12px; }
  .metier .i { font-size: 9.5px; }
  .metier h3 { font-size: 15.5px; margin-top: 5px; line-height: 1.16; }
  .metier p { display: none; }
  .metier .angle { display: none; }
  /* Le voile pourpre qui monte au survol n'a pas de sens au doigt : le
     navigateur le déclenche sur simple appui et ne le retire jamais.
     On le coupe, et l'ouverture se marque par un fond clair. */
  .metier::before { display: none; }
  .metier.deplie { background: var(--pourpre-voile); }
  .metier.deplie h3 { color: var(--pourpre); }
  .metier.deplie p { display: block; margin-top: 7px; font-size: 12.6px;
                     color: var(--encre-2); opacity: 1; transform: none; }

  /* ── LA PHOTO, AU DOIGT ────────────────────────────────────────────
     Ilyes, le 9 septembre 2026 : « ça ne s'agrandit plus avec le texte
     depuis qu'on a les photos. Ce serait bien que l'on ait toujours
     l'ouverture comme avant. Quitte à ajouter un voile sur la photo
     pour rendre le texte lisible ? »

     Ce qui s'était passé : le voile pourpre est coupé sur écran tactile
     — le navigateur le déclenche au simple appui et ne le retire jamais
     — et la photo, elle, s'affichait sur ce même faux survol. Résultat :
     une photo en clair, un texte sombre par-dessus, et l'ouverture
     noyée dedans.

     La photo obéit donc à `deplie`, qui est un VRAI geste : elle
     n'apparaît qu'à l'ouverture, avec son voile, et le texte passe en
     blanc. La carte grandit comme avant — c'est `p { display: block }`
     qui le fait, et il n'a jamais cessé de le faire. */
  .metier.a-photo .metier-fond,
  .metier.a-photo:hover .metier-fond,
  .metier.a-photo:focus-within .metier-fond { opacity: 0; }
  .metier.a-photo.deplie .metier-fond { opacity: 1; }
  /* PLUS TRANSPARENT AU DOIGT. Ilyes, le 9 septembre 2026 : « sur le
     téléphone je pense qu'on peut augmenter encore un peu la
     transparence du violet afin de voir un peu plus les photos. »

     55 % au lieu de 62. La limite n'est pas le goût, c'est le contraste :
     éprouvé sur le pire cas — un ciel surexposé — le blanc reste à sept
     pour un, soit le niveau le plus exigeant tout juste tenu. En dessous,
     on lirait moins bien un jour de soleil, et personne ne saurait
     pourquoi. */
  .metier.a-photo.deplie::before {
    display: block; transform: translateY(0);
    background: color-mix(in srgb, var(--pourpre) 84%, transparent);
  }
  .metier.a-photo.deplie { background: var(--papier); }
  .metier.a-photo.deplie .i { color: rgba(255,255,255,.62); }
  .metier.a-photo.deplie h3 { color: #fff; }
  .metier.a-photo.deplie p { color: rgba(255,255,255,.92); }
}
@media (max-width: 380px) {
  .metier h3 { font-size: 14.5px; }
  .metier { padding: 11px 10px 10px; }
}


/* ═══ CORRECTIFS 2 ══════════════════════════════════════════════════ */

/* Le logo complet — le taureau ET le tracé. Il est plus large que haut,
   on le cale donc sur la hauteur et on lui laisse sa largeur. */
.marque img { height: 52px; width: auto; }
.marque { min-height: 52px; }
@media (max-width: 940px) { .marque img { height: 44px; } .marque { min-height: 44px; } }
@media (max-width: 400px) { .marque img { height: 38px; } }
.pied-marque img { height: 96px; width: auto; }

/* La croix de fermeture, dessinée juste. Les deux barres partent du
   centre exact et font la même longueur : c'est ce qui manquait, une
   croix décentrée se voit tout de suite même sans savoir pourquoi. */
.burger { width: 48px; height: 48px; border-radius: 3px; }
.burger span { left: 50%; right: auto; width: 22px; height: 1.5px; margin-left: -11px;
  border-radius: 1px; }
.burger span:nth-child(1) { top: 20px; }
.burger span:nth-child(2) { top: 27px; bottom: auto; }
body.ouvert .burger span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
body.ouvert .burger span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }
body.ouvert .burger { border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.06); }

/* Les numéros du menu touchaient le libellé. */
.tiroir nav a { gap: 0; }
.tiroir nav a i { margin-right: 20px; min-width: 26px; }
@media (max-width: 400px) { .tiroir nav a i { margin-right: 14px; min-width: 22px; } }

/* L'accueil, en tête du menu comme partout ailleurs. */
nav.menu a.actuel { color: var(--pourpre); }

/* ── L'interlocuteur du secteur ───────────────────────────────────────
   Un visiteur qui a trouvé sa commune veut appeler, pas remplir un
   formulaire. On lui donne le numéro de la personne qui suit ce
   secteur, directement dans la carte. */
.zone-contact { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--trait);
  display: grid; gap: 4px; }
.zone-contact .qui { font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--encre-4); }
.zone-contact .nom { font-family: var(--titre); font-size: 18px; letter-spacing: -.014em;
  color: var(--encre); }
.zone-contact a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  font-family: var(--mono); font-size: 13px; letter-spacing: .04em; color: var(--pourpre);
  min-height: 40px; }
.zone-contact a:hover { text-decoration: underline; text-underline-offset: 3px; }
.zone-contact .mail { font-size: 11.5px; color: var(--encre-3); }


/* ═══════════════════════════════════════════════════════════════════════
   LE PRÉ-CHIFFRAGE
   ───────────────────────────────────────────────────────────────────────
   Un formulaire de chiffrage a un ennemi unique : l'abandon. Tout ce qui
   suit est écrit contre lui. Une question par écran plutôt que trente en
   colonne. Un total qui suit en bas et qui bouge à chaque réponse — on
   reste parce qu'on voit le chiffre vivre. Des cases assez grandes pour
   un pouce. Et, au bout, le résultat AVANT le formulaire de contact :
   celui qui a déjà obtenu ce qu'il venait chercher donne son numéro plus
   volontiers que celui à qui on le réclame en péage.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Les preuves d'entrée : quatre nombres, avant même de commencer ─── */
.ch-preuve {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--trait); border: 1px solid var(--trait);
  margin: 0 0 clamp(22px, 3vw, 34px);
}
.ch-preuve > div { background: var(--papier); padding: 18px 16px; text-align: center; }
.ch-preuve b { display: block; font-family: var(--titre); font-weight: 400;
  font-size: clamp(22px, 2.6vw, 30px); line-height: 1; color: var(--pourpre); }
.ch-preuve span { display: block; margin-top: 6px; font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--encre-3); }
@media (max-width: 640px) {
  .ch-preuve { grid-template-columns: repeat(2, 1fr); }
  .ch-preuve > div { padding: 14px 10px; }
}

/* ── Le cadre de l'outil ───────────────────────────────────────────── */
.ch {
  border: 1px solid var(--trait-2); background: #fff;
  box-shadow: 0 1px 0 var(--trait), 0 22px 60px -42px rgba(23,17,26,.5);
  scroll-margin-top: 96px;
}
.ch .mono { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--pourpre); margin: 0; }

/* L'en-tête : les cinq étapes, et la cote qui se remplit.
   Les numéros sont en monospace comme les repères d'un plan. */
.ch-entete { border-bottom: 1px solid var(--trait); }
.ch-etapes {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr);
}
.ch-etapes li {
  padding: 15px 12px; display: flex; align-items: baseline; gap: 8px;
  border-left: 1px solid var(--trait); color: var(--encre-4);
  transition: color .35s, background .35s;
}
.ch-etapes li:first-child { border-left: 0; }
.ch-etapes li b { font-family: var(--mono); font-weight: 400; font-size: 11px; letter-spacing: .08em; }
.ch-etapes li span { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em;
  text-transform: uppercase; }
.ch-etapes li.faite { color: var(--encre-3); }
.ch-etapes li.faite b::after { content: " ✓"; color: var(--pourpre); }
.ch-etapes li.en-cours { color: var(--pourpre); background: var(--pourpre-voile); }
.ch-barre { height: 2px; background: var(--trait); }
.ch-barre i { display: block; height: 100%; background: var(--pourpre);
  transform-origin: left; transform: scaleX(0);
  transition: transform .55s cubic-bezier(.22,.7,.24,1); }
/* Sur téléphone, seule l'étape en cours dit son nom — les quatre autres
   se réduisent à leur numéro. Le fil d'étapes doit rester une ligne :
   dès qu'il en fait deux, il ressemble à un menu et on cherche à cliquer
   dessus. On passe donc de la grille au flux, où l'étape ouverte peut
   prendre la place que les autres lui laissent. */
@media (max-width: 760px) {
  .ch-etapes { display: flex; }
  .ch-etapes li { flex: 0 0 auto; justify-content: center; padding: 12px 10px; }
  .ch-etapes li span { display: none; }
  .ch-etapes li.en-cours { flex: 1 1 auto; min-width: 0; }
  .ch-etapes li.en-cours span { display: inline; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 400px) {
  .ch-etapes li { padding: 12px 7px; }
  .ch-etapes li b { font-size: 10.5px; }
}

.ch-scene { padding: clamp(22px, 3.4vw, 42px); }
.ch-question {
  font-family: var(--titre); font-weight: 400; font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.14; letter-spacing: -.012em; margin: 0 0 8px; max-width: 34ch;
}
.ch-scene > .ch-question:not(:first-child) { margin-top: clamp(30px, 4vw, 46px); }
.ch-aide { margin: 0 0 18px; max-width: 68ch; font-size: 14.5px; color: var(--encre-3); }

/* ── Les cartes à cocher ───────────────────────────────────────────── */
.ch-cartes { display: grid; gap: 10px; }
.ch-cartes.quatre { grid-template-columns: repeat(4, 1fr); }
.ch-cartes.trois  { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .ch-cartes.quatre { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .ch-cartes.trois  { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .ch-cartes.quatre { grid-template-columns: 1fr; } }

.ch-carte {
  position: relative; display: block; cursor: pointer;
  border: 1px solid var(--trait-2); background: var(--papier);
  padding: 15px 16px; min-height: 74px;
  transition: border-color .28s, background .28s, transform .28s;
}
.ch-carte:hover { border-color: var(--pourpre-clair); background: #fff; }
.ch-carte input { position: absolute; opacity: 0; width: 0; height: 0; }
.ch-carte b { display: block; font-weight: 500; font-size: 15.5px; line-height: 1.3; }
.ch-carte small { display: block; margin-top: 5px; font-size: 13px; line-height: 1.5;
  color: var(--encre-3); }
.ch-carte.on { border-color: var(--pourpre); background: var(--pourpre-voile); }
.ch-carte.on b { color: var(--pourpre); }
/* Le repère d'angle : une équerre, pas une pastille. On est sur un plan. */
.ch-carte.on::after {
  content: ""; position: absolute; top: -1px; right: -1px; width: 13px; height: 13px;
  border-top: 2px solid var(--pourpre); border-right: 2px solid var(--pourpre);
}
.ch-carte input:focus-visible + span { outline: 2px solid var(--pourpre); outline-offset: 6px; }

/* ── Le curseur de surface ─────────────────────────────────────────── */
.ch-curseur { max-width: 620px; }
.ch-curseur output {
  display: block; font-family: var(--titre); font-weight: 400;
  font-size: clamp(30px, 4.4vw, 46px); line-height: 1; color: var(--pourpre);
  margin-bottom: 10px;
}
.ch-curseur input[type=range] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 30px;
  background: transparent; cursor: pointer; display: block;
}
.ch-curseur input[type=range]::-webkit-slider-runnable-track {
  height: 2px; background: var(--trait-2);
}
.ch-curseur input[type=range]::-moz-range-track { height: 2px; background: var(--trait-2); }
.ch-curseur input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin-top: -10px;
  border-radius: 50%; background: var(--pourpre); border: 3px solid #fff;
  box-shadow: 0 0 0 1px var(--pourpre);
}
.ch-curseur input[type=range]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; background: var(--pourpre);
  border: 3px solid #fff; box-shadow: 0 0 0 1px var(--pourpre);
}
.ch-echelle { display: flex; justify-content: space-between; font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .06em; color: var(--encre-4); }

/* ── Les lots ──────────────────────────────────────────────────────── */
.ch-famille { margin-bottom: 26px; }
.ch-fam-nom {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--pourpre); margin: 0 0 10px;
  padding-bottom: 8px; border-bottom: 1px solid var(--trait);
}
.ch-lots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (max-width: 820px) { .ch-lots { grid-template-columns: 1fr; } }
.ch-lot {
  border: 1px solid var(--trait); background: var(--papier);
  transition: border-color .28s, background .28s;
}
.ch-lot.on { border-color: var(--pourpre); background: var(--pourpre-voile); }
.ch-lot-tete { display: flex; gap: 12px; align-items: flex-start; padding: 13px 15px;
  cursor: pointer; min-height: 56px; }
.ch-lot-tete input {
  appearance: none; -webkit-appearance: none; flex: none;
  width: 19px; height: 19px; margin: 2px 0 0; border: 1px solid var(--trait-2);
  background: #fff; cursor: pointer; position: relative;
}
.ch-lot-tete input:checked { border-color: var(--pourpre); background: var(--pourpre); }
.ch-lot-tete input:checked::after {
  content: ""; position: absolute; left: 5px; top: 1px; width: 6px; height: 11px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(42deg);
}
.ch-lot-tete input:focus-visible { outline: 2px solid var(--pourpre); outline-offset: 3px; }
.ch-lot-nom b { display: block; font-weight: 500; font-size: 15px; line-height: 1.3; }
.ch-lot-nom small { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.5;
  color: var(--encre-3); }
.ch-lot.on .ch-lot-nom b { color: var(--pourpre); }

.ch-qte { display: none; align-items: center; gap: 9px; padding: 0 15px 13px 46px; }
.ch-lot.on .ch-qte { display: flex; }
.ch-qte label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--encre-3); }
.ch-qte input {
  width: 92px; padding: 8px 10px; border: 1px solid var(--trait-2); background: #fff;
  font-family: var(--mono); font-size: 14px; color: var(--encre); border-radius: 0;
}
.ch-qte input:focus { outline: none; border-color: var(--pourpre); }
.ch-qte-u { font-family: var(--mono); font-size: 12px; color: var(--encre-3); }

/* ── Le mot qui rassure, à l'écran des gammes ──────────────────────── */
.ch-rassure {
  margin: 20px 0 0; padding: 16px 18px; border-left: 2px solid var(--pourpre);
  background: var(--pourpre-voile); font-size: 14.5px; line-height: 1.65;
  color: var(--encre-2); max-width: 78ch;
}
.ch-rassure b { color: var(--pourpre); font-weight: 500; }

.ch-vide { text-align: center; padding: 40px 0; }
.ch-vide p { color: var(--encre-3); margin: 0 0 16px; }

/* ── Le message d'alerte ───────────────────────────────────────────── */
.ch-message {
  margin: 0 clamp(22px, 3.4vw, 42px); padding: 11px 14px;
  border-left: 2px solid var(--pourpre); background: var(--pourpre-voile);
  font-size: 14px; color: var(--pourpre);
}

/* ── La navigation de l'outil ──────────────────────────────────────── */
.ch-nav {
  display: flex; align-items: center; gap: 12px;
  padding: 16px clamp(22px, 3.4vw, 42px); border-top: 1px solid var(--trait);
  background: var(--papier);
}
@media (max-width: 520px) {
  .ch-nav { flex-wrap: wrap; }
  .ch-nav .btn { flex: 1; justify-content: center; }
}

/* ── Le bandeau qui suit : le total, toujours visible ──────────────────
   C'est la pièce qui fait aller au bout. Un chiffre qui bouge sous les
   yeux vaut tous les « plus que deux étapes ! » du monde. */
.ch-bandeau {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  background: var(--encre); color: #fff;
  padding: 11px var(--marge); border-top: 1px solid var(--pourpre-clair);
  animation: chMonte .45s cubic-bezier(.22,.7,.24,1);
}
@keyframes chMonte { from { transform: translateY(100%); } }
.ch-bandeau > div { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  max-width: 1400px; margin: 0 auto; }
.ch-bandeau .mono { color: #c9a5cd; font-family: var(--mono); font-size: 10px;
  letter-spacing: .13em; text-transform: uppercase; margin: 0; }
.ch-bandeau b { font-family: var(--titre); font-weight: 400; font-size: clamp(19px, 2.3vw, 26px);
  line-height: 1; }
.ch-bandeau small { font-family: var(--mono); font-size: 11px; letter-spacing: .05em;
  color: rgba(255,255,255,.6); margin-left: auto; }
@media (max-width: 620px) {
  .ch-bandeau { padding: 9px 16px; }
  .ch-bandeau small { margin-left: 0; width: 100%; }
}

/* ── LE RÉSULTAT ───────────────────────────────────────────────────── */
.ch-resultat {
  border: 1px solid var(--pourpre); padding: clamp(24px, 3.6vw, 40px);
  background: linear-gradient(180deg, var(--pourpre-voile), #fff 68%);
  text-align: center;
}
.ch-etiq { margin: 0 0 12px !important; }
.ch-total {
  font-family: var(--titre); font-weight: 400;
  font-size: clamp(32px, 6.4vw, 62px); line-height: 1.02; letter-spacing: -.02em;
  color: var(--pourpre); margin: 0;
}
.ch-total > #ch-t1, .ch-total > #ch-t2 {
  display: inline-block; animation: chChiffre .6s cubic-bezier(.22,.7,.24,1) both;
}
.ch-total > #ch-t2 { animation-delay: .1s; }
@keyframes chChiffre { from { opacity: 0; transform: translateY(14px); } }

/* ── « Pourquoi cette fourchette ? » ─────────────────────────────────────
   Le point d'interrogation d'un plan : un petit cercle au trait, posé en
   exposant contre le chiffre. Il s'ouvre au survol, au clic et au clavier
   — le survol seul laisserait les téléphones dehors. */
.ch-quoi-hote { position: relative; display: inline-block; vertical-align: middle; }
.ch-quoi {
  width: 21px; height: 21px; padding: 0; margin: 0 0 .35em .28em;
  border: 1px solid var(--trait-2); border-radius: 50%;
  background: var(--papier); color: var(--encre-3);
  font: 400 12px/1 var(--mono); cursor: help;
  display: inline-flex; align-items: center; justify-content: center;
  vertical-align: middle;
  transition: border-color .18s, color .18s, background .18s;
}
.ch-quoi:hover, .ch-quoi:focus-visible,
.ch-quoi-hote.ouvert .ch-quoi {
  border-color: var(--pourpre); color: var(--pourpre); background: var(--pourpre-voile);
}
.ch-quoi:focus-visible { outline: 2px solid var(--pourpre); outline-offset: 2px; }

.ch-bulle {
  position: absolute; z-index: 40;
  top: calc(100% + 11px); left: 50%; transform: translate(-50%, 6px);
  width: min(380px, calc(100vw - 40px));
  padding: 20px 22px;
  background: var(--papier);
  border: 1px solid var(--trait-2);
  box-shadow: 0 18px 44px rgba(23, 17, 26, .13);
  text-align: left;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s, transform .2s, visibility .2s;
}
/* La petite pointe, comme un renvoi de cote. */
.ch-bulle::before {
  content: ""; position: absolute; top: -5px; left: 50%;
  width: 9px; height: 9px; margin-left: -5px;
  background: var(--papier);
  border-left: 1px solid var(--trait-2); border-top: 1px solid var(--trait-2);
  transform: rotate(45deg);
}
.ch-quoi-hote:hover .ch-bulle,
.ch-quoi:focus-visible + .ch-bulle,
.ch-quoi-hote.ouvert .ch-bulle {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translate(-50%, 0);
}
.ch-bulle > b {
  display: block; margin-bottom: 10px;
  font: 400 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--pourpre);
}
.ch-bulle .pp {
  display: block; border: 0; background: none; padding: 0;
  margin: 0 0 10px; font-family: var(--corps); font-weight: 300;
  font-size: 13.5px; line-height: 1.58; color: var(--encre-2);
  letter-spacing: 0; text-transform: none;
}
.ch-bulle .pp:last-child { margin-bottom: 0; }
.ch-bulle .pp.fin {
  margin-top: 13px; padding-top: 13px;
  border: 0; border-top: 1px solid var(--trait);
}
.ch-bulle .pp.fin b { font-weight: 500; color: var(--encre); font-size: 13.5px;
  letter-spacing: 0; text-transform: none; display: inline; margin: 0; color: var(--encre); }

/* Dans le tableau, la bulle déborderait à droite sur les petits écrans :
   on l'ancre à gauche plutôt qu'au centre. */
.ch-tableau .ch-quoi { width: 18px; height: 18px; font-size: 11px; margin: 0 0 .1em .3em; }
.ch-tableau .ch-bulle { left: 0; transform: translate(-14px, 6px); }
.ch-tableau .ch-quoi-hote:hover .ch-bulle,
.ch-tableau .ch-quoi:focus-visible + .ch-bulle,
.ch-tableau .ch-quoi-hote.ouvert .ch-bulle { transform: translate(-14px, 0); }
.ch-tableau .ch-bulle::before { left: 22px; }

@media (max-width: 620px) {
  .ch-bulle { position: fixed; top: auto; bottom: 14px; left: 14px; right: 14px;
    width: auto; transform: translate(0, 10px); }
  .ch-quoi-hote:hover .ch-bulle,
  .ch-quoi:focus-visible + .ch-bulle,
  .ch-quoi-hote.ouvert .ch-bulle { transform: translate(0, 0); }
  .ch-bulle::before { display: none; }
  /* Dans le tableau, pas de `fixed` : les lignes portent une transformation
     d'apparition, et une transformation crée un bloc conteneur qui capture
     les éléments fixés. La bulle se recalerait sur la ligne, pas sur
     l'écran. On l'ancre donc sur la cellule et non sur le point
     d'interrogation : la cellule commence au bord gauche du tableau, la
     bulle tombe toujours au même endroit, qu'on ait fait défiler ou non. */
  .ch-tableau .ch-quoi-hote { position: static; }
  .ch-tableau tbody td:first-child { position: relative; }
  .ch-tableau .ch-bulle {
    position: absolute; top: calc(100% + 8px); bottom: auto;
    left: 0; right: auto; width: min(300px, 74vw);
    transform: translate(0, 6px);
  }
  .ch-tableau .ch-quoi-hote.ouvert .ch-bulle,
  .ch-tableau .ch-quoi:focus-visible + .ch-bulle,
  .ch-tableau .ch-quoi-hote:hover .ch-bulle { transform: translate(0, 0); }
}
@media print { .ch-quoi { display: none; } }
.ch-sous { margin: 10px 0 0; font-size: 14.5px; color: var(--encre-3); }
.ch-cles {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  margin-top: clamp(22px, 3vw, 32px); background: var(--trait); border: 1px solid var(--trait);
}
.ch-cles > div { background: #fff; padding: 16px 12px; }
.ch-cles b { display: block; font-family: var(--titre); font-weight: 400;
  font-size: clamp(22px, 2.8vw, 30px); line-height: 1; }
.ch-cles span { display: block; margin-top: 6px; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--encre-3); }
@media (max-width: 640px) { .ch-cles { grid-template-columns: 1fr; } }

/* ── Le détail lot par lot ─────────────────────────────────────────── */
.ch-tableau { overflow-x: auto; border: 1px solid var(--trait); }
.ch-tableau table { width: 100%; border-collapse: collapse; min-width: 520px; }
.ch-tableau th {
  text-align: left; font-family: var(--mono); font-weight: 400; font-size: 10.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--encre-3);
  padding: 12px 16px; border-bottom: 1px solid var(--trait-2); background: var(--papier);
}
.ch-tableau th.n, .ch-tableau td.n { text-align: right; white-space: nowrap; }
.ch-tableau td { padding: 13px 16px; border-bottom: 1px solid var(--trait);
  font-size: 14.5px; vertical-align: top; }
.ch-tableau td b { font-weight: 500; }
.ch-tableau td small { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.5;
  color: var(--encre-3); max-width: 52ch; }
.ch-tableau tbody tr { animation: chLigne .5s cubic-bezier(.22,.7,.24,1) both; }
@keyframes chLigne { from { opacity: 0; transform: translateX(-10px); } }
.ch-tableau tr.alea td { background: var(--pourpre-voile); }
.ch-tableau tfoot td {
  border-bottom: 0; border-top: 1px solid var(--pourpre); background: var(--papier);
  font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  padding: 15px 16px;
}
.ch-tableau tfoot b { font-family: var(--titre); font-size: 20px; font-weight: 400;
  letter-spacing: 0; text-transform: none; color: var(--pourpre); }

/* ── Les trois gammes côte à côte ──────────────────────────────────── */
.ch-compare { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 760px) { .ch-compare { grid-template-columns: 1fr; } }
.ch-comp {
  border: 1px solid var(--trait-2); padding: 20px; text-align: center; background: var(--papier);
  transition: border-color .3s, background .3s;
}
.ch-comp.on { border-color: var(--pourpre); background: var(--pourpre-voile); }
.ch-comp .mono { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--pourpre); margin: 0; }
.ch-comp-total { font-family: var(--titre); font-weight: 400; font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.12; margin: 12px 0 16px; }
.ch-comp-total span { font-family: var(--corps); font-size: 14px; color: var(--encre-3); }
.btn.mini { padding: 9px 14px; font-size: 10.5px; }

/* ── Les deux encarts d'explication ────────────────────────────────── */
.ch-deux { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 820px) { .ch-deux { grid-template-columns: 1fr; } }
.ch-encart { border: 1px solid var(--trait); padding: 22px; background: var(--papier); }
.ch-encart .mono { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--pourpre); margin: 0 0 14px; }
.ch-encart ul { margin: 0; padding-left: 18px; }
.ch-encart li { font-size: 14px; line-height: 1.62; color: var(--encre-2); margin-bottom: 11px; }
.ch-encart li:last-child { margin-bottom: 0; }
.ch-encart li b { font-weight: 500; color: var(--encre); }

/* ── LA CAPTURE : après le résultat, jamais avant ──────────────────── */
.ch-lead {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 48px);
  background: var(--encre); color: #fff; padding: clamp(26px, 4vw, 46px);
  margin-top: clamp(30px, 4vw, 46px);
}
@media (max-width: 900px) { .ch-lead { grid-template-columns: 1fr; } }
.ch-lead .mono { color: #c9a5cd; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .13em; text-transform: uppercase; margin: 0 0 12px; }
.ch-lead h3 { font-family: var(--titre); font-weight: 400;
  font-size: clamp(24px, 3.2vw, 36px); line-height: 1.1; letter-spacing: -.014em;
  margin: 0 0 14px; max-width: 20ch; color: #fff; }
.ch-lead-txt p { font-size: 15px; line-height: 1.68; color: rgba(255,255,255,.74); margin: 0; }
.ch-promesses { list-style: none; margin: 20px 0 0; padding: 0; }
.ch-promesses li { position: relative; padding-left: 24px; font-size: 14px;
  color: rgba(255,255,255,.86); margin-bottom: 10px; }
.ch-promesses li::before {
  content: ""; position: absolute; left: 2px; top: 6px; width: 5px; height: 10px;
  border: solid #c9a5cd; border-width: 0 1.5px 1.5px 0; transform: rotate(42deg);
}

.ch-form { display: grid; gap: 12px; align-content: start; }
.ch-form label { display: block; }
.ch-form label > span { display: block; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.6);
  margin-bottom: 6px; }
.ch-form input, .ch-form select {
  width: 100%; padding: 13px 14px; border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.05); color: #fff; font-family: var(--corps);
  font-size: 15.5px; border-radius: 0; -webkit-appearance: none; appearance: none;
}
.ch-form select { background-image: linear-gradient(45deg, transparent 50%, #c9a5cd 50%),
  linear-gradient(135deg, #c9a5cd 50%, transparent 50%);
  background-position: calc(100% - 19px) 21px, calc(100% - 13px) 21px;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.ch-form select option { color: var(--encre); }
.ch-form input:focus, .ch-form select:focus { outline: none; border-color: #c9a5cd;
  background: rgba(255,255,255,.09); }
.ch-form .btn { border-color: #fff; background: #fff; color: var(--encre);
  justify-content: center; margin-top: 4px; }
.ch-form .btn::before { background: var(--pourpre-clair); }
.ch-form .btn:hover { color: #fff; }
.ch-rgpd { font-size: 12px; line-height: 1.55; color: rgba(255,255,255,.5); margin: 0; }
.ch-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.ch-actions-fin { display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: clamp(26px, 3.4vw, 38px); }
@media (max-width: 560px) { .ch-actions-fin .btn { flex: 1 1 100%; justify-content: center; } }

.ch-avert {
  margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--trait);
  font-size: 12.5px; line-height: 1.65; color: var(--encre-3); max-width: 84ch;
}
.ch-avert b { color: var(--encre-2); font-weight: 500; }

/* Le résultat respire : les blocs s'espacent les uns des autres. */
.ch-scene > .ch-tableau, .ch-scene > .ch-compare, .ch-scene > .ch-deux { margin-top: 4px; }
.ch-scene > .ch-resultat + .ch-question { margin-top: clamp(34px, 4.6vw, 54px); }

/* ── La méthode, en fond sombre ────────────────────────────────────── */
.ch-explique { background: var(--encre); color: #fff; }
.ch-explique h2 { color: #fff; }
.ch-explique .chapo { color: rgba(255,255,255,.72); }
.ch-explique .tete .num { color: #c9a5cd; }
.ch-explique .cote { color: rgba(255,255,255,.5); }
.ch-methode { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.14); }
@media (max-width: 900px) { .ch-methode { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .ch-methode { grid-template-columns: 1fr; } }
.ch-methode > div { background: var(--encre); padding: 24px 22px; }
.ch-methode .mono { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: #c9a5cd; margin: 0 0 12px; }
.ch-methode p + p { font-size: 14px; line-height: 1.68; color: rgba(255,255,255,.74); margin: 0; }

/* ── La foire aux questions ────────────────────────────────────────── */
.ch-faq { max-width: 82ch; border-top: 1px solid var(--trait); }
.ch-faq details { border-bottom: 1px solid var(--trait); }
.ch-faq summary {
  cursor: pointer; list-style: none; padding: 18px 40px 18px 0; position: relative;
  font-family: var(--titre); font-weight: 400; font-size: clamp(18px, 2vw, 23px);
  line-height: 1.24; letter-spacing: -.01em;
}
.ch-faq summary::-webkit-details-marker { display: none; }
.ch-faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 13px; height: 13px;
  margin-top: -6px;
  background:
    linear-gradient(var(--pourpre), var(--pourpre)) center/13px 1px no-repeat,
    linear-gradient(var(--pourpre), var(--pourpre)) center/1px 13px no-repeat;
  transition: transform .35s cubic-bezier(.22,.7,.24,1);
}
.ch-faq details[open] summary::after { transform: rotate(90deg);
  background: linear-gradient(var(--pourpre), var(--pourpre)) center/13px 1px no-repeat; }
.ch-faq details[open] summary { color: var(--pourpre); }
.ch-faq p { margin: 0 0 20px; max-width: 74ch; font-size: 15px; line-height: 1.72;
  color: var(--encre-2); }
.ch-faq a { color: var(--pourpre); text-underline-offset: 3px; }

.appel-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.appel .btn.creux { background: transparent; border-color: rgba(255,255,255,.4); color: #fff; }
.appel .btn.creux:hover { color: var(--encre); }
.appel .btn.creux::before { background: #fff; }

/* Sur écran tactile, on ne vise rien de moins de 46 px. */
@media (pointer: coarse) {
  .ch-carte { min-height: 82px; }
  .ch-lot-tete { min-height: 62px; }
  .ch-faq summary { padding-top: 20px; padding-bottom: 20px; }
}

/* Le bandeau fixe ne doit pas manger la fin de page. */
body:has(.ch-bandeau:not([hidden])) .pied-bas { padding-bottom: 76px; }

/* ── À l'impression : un vrai document à poser sur une table ──────────
   Le visiteur qui imprime son chiffrage le montre à quelqu'un. Autant
   qu'il ressemble à une pièce de dossier, pas à une page web capturée. */
@media print {
  .barre, .tiroir, .ch-bandeau, .ch-nav, .ch-entete, .ch-lead, .ch-actions-fin,
  .pied-haut, .calque-grille, .calque-tracé, .calque-tracé2, .calque-rose,
  .cote-lecture, .reticule, .ch-preuve, .ch-explique, .appel, .ch-faq,
  .heros-cote, .heros-bas { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  section { padding: 0 !important; }
  .ch { border: 0; box-shadow: none; }
  .ch-scene { padding: 0; }
  .ch-resultat { background: none; border: 1px solid #000; }
  .ch-tableau { overflow: visible; }
  .ch-tableau table { min-width: 0; }
  .ch-compare, .ch-deux { break-inside: avoid; }
  h1.titre { font-size: 22pt; }
  .pied { color: #000; background: none; }
  .pied-bas { border: 0; }
}

/* Le lien « Chiffrage » ne s'affiche dans la barre que s'il y a la place
   pour lui sans serrer les autres. En dessous, le tiroir le porte. */
@media (max-width: 1150px) { nav.menu a.opt { display: none; } }

.ch-passerelle { margin: 18px 0 0; max-width: 58ch; font-size: 14.5px; color: var(--encre-3); }
.ch-passerelle a { color: var(--pourpre); text-underline-offset: 3px; }
@media (pointer: coarse) { .ch-qte input { padding: 12px 10px; font-size: 16px; } }

/* Un élément marqué `hidden` doit disparaître, quelle que soit la règle
   d'affichage qu'il porte par ailleurs. Sans cette ligne, un bouton en
   `inline-flex` reste visible alors que le script le croit caché. */
[hidden] { display: none !important; }

/* ── Les pages de secteur ──────────────────────────────────────────── */
.ch-contexte { max-width: 78ch; font-size: clamp(15.5px, 1.4vw, 17.5px); line-height: 1.72;
  color: var(--encre-2); margin: 0; }
.ch-villes { max-width: 82ch; margin: 22px 0 0; padding-top: 18px;
  border-top: 1px solid var(--trait); font-size: 14px; line-height: 1.7; color: var(--encre-3); }
.ch-villes b { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--pourpre); display: block; margin-bottom: 6px; }
.ch-villes a { color: var(--pourpre); text-underline-offset: 3px; white-space: nowrap; }

.ch-secteurs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 900px) { .ch-secteurs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .ch-secteurs { grid-template-columns: 1fr; } }
.ch-secteurs a {
  display: block; padding: 20px; border: 1px solid var(--trait-2); background: #fff;
  text-decoration: none; position: relative;
  transition: border-color .3s, transform .3s;
}
.ch-secteurs a:hover { border-color: var(--pourpre); transform: translateY(-2px); }
.ch-secteurs a::after {
  content: "→"; position: absolute; right: 18px; bottom: 16px; color: var(--pourpre);
  opacity: 0; transform: translateX(-6px); transition: opacity .3s, transform .3s;
}
.ch-secteurs a:hover::after { opacity: 1; transform: none; }
.ch-secteurs b { display: block; font-family: var(--titre); font-weight: 400;
  font-size: 21px; line-height: 1.16; }
.ch-secteurs span { display: block; margin-top: 8px; font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .06em; color: var(--encre-3); }

/* ═══ POURQUOI CE CHIFFRE PLUTÔT QU'UN AUTRE ═══════════════════════════
   La démonstration tient en une image : à gauche un nombre qui ne tient
   pas en place, à droite un nombre qui ne bouge pas. On n'explique pas
   la différence entre une addition et une phrase plausible — on la met
   côte à côte, et le lecteur conclut tout seul. C'est plus court et
   c'est plus honnête qu'un paragraphe qui dirait du mal des robots. */
.ch-preuve-ia { background: var(--papier); }

.ch-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: stretch; }
@media (max-width: 860px) { .ch-vs { grid-template-columns: 1fr; } }

.ch-vs-carte {
  position: relative; padding: clamp(22px, 3vw, 34px); background: #fff;
  border: 1px solid var(--trait-2); display: flex; flex-direction: column;
}
.ch-vs-carte .mono {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; margin: 0 0 16px; color: var(--encre-4);
}
.ch-vs-q { margin: 0 0 18px; font-size: 15px; line-height: 1.58; color: var(--encre-3); }

.ch-vs-nb {
  font-family: var(--titre); font-weight: 400; line-height: 1;
  font-size: clamp(30px, 4.4vw, 46px); letter-spacing: -.018em; margin: 0;
  font-variant-numeric: tabular-nums;
}
.ch-vs-note {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .09em;
  text-transform: uppercase; margin: 10px 0 20px; color: var(--encre-4);
}
.ch-vs-liste { list-style: none; margin: auto 0 0; padding: 0; border-top: 1px solid var(--trait);
  padding-top: 16px; }
.ch-vs-liste li { position: relative; padding-left: 20px; font-size: 13.5px; line-height: 1.6;
  color: var(--encre-2); margin-bottom: 9px; }
.ch-vs-liste li:last-child { margin-bottom: 0; }

/* ── La colonne de gauche : tout y est instable ────────────────────── */
.ch-vs-carte.flou { border-style: dashed; background: var(--papier-2); }
.ch-vs-carte.flou .ch-vs-nb { color: var(--encre-4); }
.ch-vs-carte.flou .ch-vs-liste li::before {
  content: "?"; position: absolute; left: 3px; top: 0;
  font-family: var(--mono); font-size: 12px; color: var(--encre-4);
}
/* Le nombre se brouille une fraction de seconde avant de changer d'avis. */
.ch-vs-nb.change { animation: chIncertain .5s cubic-bezier(.4,.1,.3,1); }
@keyframes chIncertain {
  0%   { filter: blur(0);     opacity: 1;   transform: none; }
  38%  { filter: blur(5px);   opacity: .28; transform: translateY(-5px) skewX(-5deg); }
  62%  { filter: blur(3px);   opacity: .4;  transform: translateY(4px)  skewX(3deg); }
  100% { filter: blur(0);     opacity: 1;   transform: none; }
}

/* ── La colonne de droite : elle est posée, et elle le montre ──────── */
.ch-vs-carte.net { border-color: var(--pourpre); }
.ch-vs-carte.net .mono { color: var(--pourpre); }
.ch-vs-carte.net .ch-vs-nb { color: var(--pourpre); }
.ch-vs-carte.net .ch-vs-q { color: var(--encre-2); }
.ch-vs-carte.net .ch-vs-liste li::before {
  content: ""; position: absolute; left: 4px; top: 6px; width: 5px; height: 10px;
  border: solid var(--pourpre); border-width: 0 1.5px 1.5px 0; transform: rotate(42deg);
}
.ch-vs-note.stable { color: var(--pourpre); }
/* L'équerre d'angle se trace quand la carte entre à l'écran : le même
   geste que partout ailleurs sur le site, c'est un repère de plan. */
.ch-vs-equerre {
  position: absolute; top: -1px; right: -1px; width: 34px; height: 34px;
  border-top: 2px solid var(--pourpre); border-right: 2px solid var(--pourpre);
  transform-origin: top right; transform: scale(0); opacity: 0;
}
.ch-vs.vu .ch-vs-equerre { animation: chEquerre .7s .25s cubic-bezier(.22,.7,.24,1) forwards; }
@keyframes chEquerre { to { transform: scale(1); opacity: 1; } }

/* La cote qui relie les deux cartes : « le même projet », pour que
   personne ne croie qu'on compare deux choses différentes. */
@media (min-width: 861px) {
  .ch-vs { position: relative; }
  .ch-vs::before {
    content: "même projet"; position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%) rotate(-90deg); z-index: 2;
    background: var(--papier); padding: 5px 9px;
    font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--encre-4); white-space: nowrap;
  }
}

/* ── Les quatre garanties ──────────────────────────────────────────── */
.ch-garanties {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--trait); border: 1px solid var(--trait);
  margin-top: clamp(20px, 3vw, 30px);
}
@media (max-width: 1000px) { .ch-garanties { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .ch-garanties { grid-template-columns: 1fr; } }
.ch-garanties > div { background: #fff; padding: 22px 20px; }
.ch-garanties .mono { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--pourpre); margin: 0 0 12px; }
.ch-garanties p + p { margin: 0; font-size: 13.5px; line-height: 1.66; color: var(--encre-2); }

@media (prefers-reduced-motion: reduce) {
  .ch-vs-nb.change { animation: none; }
  .ch-vs .ch-vs-equerre { animation: none; transform: scale(1); opacity: 1; }
}
@media print { .ch-preuve-ia { display: none !important; } }

/* ═══════════════════════════════════════════════════════════════════════
   LA PLANCHE VIVANTE
   ───────────────────────────────────────────────────────────────────────
   Les figures du fond ne tournent pas : elles se tracent, se tiennent un
   moment, puis s'effacent. C'est la différence entre un décor animé et un
   dessin en train de se faire — et c'est ce que la page raconte.

   Tout est en `stroke-dashoffset` et en `opacity`, sur des cycles longs
   et décalés. Aucune figure ne doit être lisible d'un coup d'œil : si on
   la remarque avant le texte, elle est trop forte, on baisse l'opacité.
   ═══════════════════════════════════════════════════════════════════════ */
.planche {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  /* Pas de masque plein écran ici : un masque posé sur une couche dont
     les enfants s'animent oblige le navigateur à repeindre tout l'écran
     à chaque image. Vingt images par seconde, pour un décor. Les figures
     sont donc placées dans les marges et laissées très pâles — même
     résultat à l'œil, sans la facture. */
}
.pl-fig {
  position: absolute; aspect-ratio: 1 / 1.07;
  transform: translate(-50%, -50%);
  overflow: visible;
  /* Chaque figure repeint dans sa propre boîte et nulle part ailleurs. */
  contain: layout paint style;
  will-change: transform;
}
/* Chaque trait de la figure se trace, attend, puis se retire. Les traits
   partent l'un après l'autre : une figure dont tous les traits
   apparaissent ensemble ressemble à une image qu'on allume. */
.pl-g > * {
  stroke-dasharray: 260; stroke-dashoffset: 260; opacity: 0;
  animation: plTrace var(--v, 26s) cubic-bezier(.5,.1,.35,1) infinite;
  animation-delay: calc(var(--d, 0s) + var(--i, 0) * .5s);
}
.pl-g > *:nth-child(1) { --i: 0; } .pl-g > *:nth-child(2) { --i: 1; }
.pl-g > *:nth-child(3) { --i: 2; } .pl-g > *:nth-child(4) { --i: 3; }
.pl-g > *:nth-child(5) { --i: 4; } .pl-g > *:nth-child(6) { --i: 5; }
.pl-g > *:nth-child(7) { --i: 6; } .pl-g > *:nth-child(8) { --i: 7; }

@keyframes plTrace {
  0%   { stroke-dashoffset: 260; opacity: 0; visibility: visible; }
  4%   { opacity: .5; }
  22%  { stroke-dashoffset: 0;   opacity: .5; }   /* tracé fini */
  56%  { stroke-dashoffset: 0;   opacity: .5; }   /* on le laisse vivre */
  76%  { stroke-dashoffset: -260; opacity: .34; } /* la gomme passe */
  82%  { stroke-dashoffset: -260; opacity: 0; }
  83%  { visibility: hidden; }
  100% { stroke-dashoffset: -260; opacity: 0; visibility: hidden; }
}

/* La figure entière respire et dérive d'un souffle pendant qu'elle vit :
   sans ça, elle a l'air imprimée sur la page plutôt que posée dessus. */
.pl-fig { animation: plDerive calc(var(--v, 26s) * 2) ease-in-out infinite alternate; }
@keyframes plDerive {
  from { transform: translate(-50%, -50%) scale(.96) rotate(-1.2deg); }
  to   { transform: translate(-50%, -50%) scale(1.04) rotate(1.2deg); }
}

/* ── Les règles qui traversent ─────────────────────────────────────────
   Un trait horizontal et un vertical, très pâles, qui balaient l'écran
   comme la règle qu'on fait glisser avant de tracer. Ils passent une fois
   toutes les vingt secondes environ : assez rare pour qu'on croie l'avoir
   imaginé, assez régulier pour que la page ne semble jamais figée. */
.pl-regle { position: absolute; pointer-events: none; will-change: transform, opacity; }
.pl-h {
  left: 0; right: 0; height: 1px; top: 0;
  background: linear-gradient(90deg, transparent,
    rgba(74,21,75,.20) 18%, rgba(74,21,75,.20) 82%, transparent);
  animation: plRegleH 19s cubic-bezier(.6,0,.4,1) infinite;
}
.pl-v {
  top: 0; bottom: 0; width: 1px; left: 0;
  background: linear-gradient(180deg, transparent,
    rgba(74,21,75,.16) 18%, rgba(74,21,75,.16) 82%, transparent);
  animation: plRegleV 27s 6s cubic-bezier(.6,0,.4,1) infinite;
}
@keyframes plRegleH {
  0%, 8%   { transform: translateY(-2vh); opacity: 0; }
  16%      { opacity: 1; }
  84%      { opacity: 1; }
  100%     { transform: translateY(102vh); opacity: 0; }
}
@keyframes plRegleV {
  0%, 8%   { transform: translateX(-2vw); opacity: 0; }
  16%      { opacity: 1; }
  84%      { opacity: 1; }
  100%     { transform: translateX(102vw); opacity: 0; }
}

/* Onglet en arrière-plan : on coupe tout, net. */
.planche.pl-pause *, .planche.pl-pause { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) { .planche { display: none; } }
@media print { .planche { display: none; } }

/* ── Les calques d'origine, réveillés ──────────────────────────────────
   Ils tournaient en cent quarante secondes : à cette vitesse, on ne voit
   rien bouger, on voit juste une image. On resserre, et on ajoute une
   respiration d'échelle pour que la rotation ne soit pas le seul geste. */
/* Rotation ET respiration d'échelle. La rotation seule donne un décor qui
   pivote ; l'échelle qui va et vient donne une planche sur laquelle
   quelqu'un travaille. `will-change` promeut la couche : le navigateur la
   dessine une fois et se contente ensuite de la déplacer, au lieu de la
   redessiner soixante fois par seconde. */
.calque-tracé  { animation: traceTourne 82s linear infinite,
                            calqueRespire 30s ease-in-out infinite alternate;
                 will-change: transform, scale; }
.calque-tracé2 { animation: traceTourne2 108s linear infinite,
                            calqueRespire2 38s ease-in-out infinite alternate;
                 will-change: transform, scale; }
@keyframes calqueRespire  { from { scale: .95; } to { scale: 1.05; } }
@keyframes calqueRespire2 { from { scale: 1.04; } to { scale: .96; } }
.calque-rose .rose-tour { animation-duration: 58s; }
.calque-rose .rose-aiguille { animation-duration: 21s; }
.calque-grille { animation-duration: 17s; will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .calque-tracé, .calque-tracé2 { animation: none; scale: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════
   LES DESSINS DE POSTE, POSÉS SUR LES PHOTOS
   ───────────────────────────────────────────────────────────────────────
   L'idée tient en une phrase : la photo arrive, le dessin reste.

   Ailleurs sur le site, le cadre dessiné s'efface une fois la photo
   révélée — c'est voulu, il n'avait rien à dire. Ici c'est l'inverse :
   le tracé porte une information — le métier de la personne — donc il
   demeure, en clair et en transparence, comme une annotation portée au
   crayon sur un tirage.

   La difficulté est la lisibilité : un trait blanc disparaît sur un mur
   blanc, et la moitié des photos de chantier sont claires. D'où le voile
   pourpre posé sur l'image et l'ombre portée sous le tracé. Les deux
   s'allègent au survol, quand c'est la personne qu'on veut voir.
   ═══════════════════════════════════════════════════════════════════════ */
.pers-photo.a-photo { background: var(--encre); }
.pers-photo.a-photo img {
  /* Un virage pourpre plutôt qu'un gris : la photo entre dans la charte
     au lieu d'être posée à côté. */
  filter: grayscale(1) contrast(1.06) brightness(.86) sepia(.34)
          hue-rotate(255deg) saturate(1.5);
  transition: filter .6s cubic-bezier(.22,.7,.24,1),
              transform .8s cubic-bezier(.22,.7,.24,1);
}
/* ── POURQUOI hue-rotate(360deg) ET NON hue-rotate(0deg) ───────────────
   Ilyes, le 9 septembre 2026 : « lors du passage du violet au coloré, on
   a l'impression de voir les photos vertes. Ça fait bizarre. »

   Il voyait juste. Le navigateur interpole un filtre FONCTION PAR
   FONCTION : quand la liste d'arrivée est plus courte, il complète avec
   les valeurs neutres — sepia(0), hue-rotate(0deg), saturate(1). La
   teinte parcourait donc 255° → 0°, et ce chemin passe par le vert. Une
   demi-seconde de photos vertes, à chaque survol.

   360° est le MÊME point d'arrivée que 0°, par l'autre côté du cercle :
   la teinte descend de 255° vers 360°, c'est-à-dire par le pourpre et le
   rouge, et n'atteint jamais le vert. Le résultat final est identique au
   pixel près ; seul le trajet change.

   Les six fonctions sont écrites des deux côtés, dans le même ordre.
   C'est ce qui rend l'interpolation prévisible — une liste plus courte
   se fait compléter par le navigateur, et il ne choisit pas comme nous. */
.pers:hover .pers-photo.a-photo img,
.pers:focus-within .pers-photo.a-photo img {
  filter: grayscale(.12) contrast(1.02) brightness(.98) sepia(0)
          hue-rotate(360deg) saturate(1);
  transform: scale(1.045);
}
/* Le voile : dégradé du haut vers le bas, plus dense là où se pose le
   cartouche. Sans lui, le tracé se perd dans les zones claires. */
.pers-photo.a-photo::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(74,21,75,.34) 0%, rgba(23,17,26,.10) 42%,
                    rgba(23,17,26,.52) 82%, rgba(23,17,26,.72) 100%);
  transition: opacity .6s;
}
.pers:hover .pers-photo.a-photo::after { opacity: .55; }

.calque-poste {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 2; pointer-events: none;
  color: #fff; opacity: 0;
  filter: drop-shadow(0 1px 2px rgba(23,17,26,.6));
  transition: opacity .6s, color .6s;
}
/* Le tracé principal est franc, les annotations plus discrètes : c'est
   la hiérarchie d'une planche, l'objet d'abord, le reste ensuite. */
.calque-poste .pd-trait { stroke-opacity: .95; }
.calque-poste .pd-cartouche path { stroke-opacity: .5; }

/* Le dessin apparaît en même temps que la photo se dévoile, puis se
   stabilise à mi-force. Il ne doit jamais concurrencer un visage. */
.photo-tracee.avec-poste.on .calque-poste {
  animation: pdPose 1.5s .55s cubic-bezier(.22,.7,.24,1) forwards;
}
@keyframes pdPose { from { opacity: 0; } to { opacity: .52; } }
/* Au survol on l'estompe encore : à ce moment-là, on regarde la personne. */
.pers:hover .photo-tracee.avec-poste.on .calque-poste,
.pers:focus-within .photo-tracee.avec-poste.on .calque-poste { opacity: .26; }

/* Sans photo, le dessin occupe seul le cadre : il reprend le pourpre et
   toute sa force — c'est lui le sujet. */
.pers-photo:not(.a-photo) svg { color: var(--pourpre); }

/* Le survol fait glisser le dessin d'un cheveu, comme un calque qu'on
   déplace sur la planche. */
.pers-photo.a-photo .calque-poste { transform: translate(0, 0) scale(1); }
.pers:hover .pers-photo.a-photo .calque-poste { transform: translate(0, -4px) scale(1.015); }

@media (prefers-reduced-motion: reduce) {
  .photo-tracee.avec-poste .calque-poste { animation: none; opacity: .5; }
  .pers-photo.a-photo .calque-poste, .pers:hover .pers-photo.a-photo .calque-poste {
    transform: none;
  }
}

/* Quand le menu déborde, on le dit : un dégradé en pied laisse deviner
   qu'il y a encore quelque chose dessous. Sans lui, on croit la liste
   finie et on ne voit jamais le bouton de devis. */
.tiroir::after {
  content: ""; position: fixed; left: 0; right: 0;
  bottom: 0; height: 68px; pointer-events: none;
  background: linear-gradient(transparent, var(--encre) 78%);
  opacity: 0; transition: opacity .3s;
}
.tiroir.deborde::after { opacity: 1; }
.tiroir.deborde.au-bout::after { opacity: 0; }

/* ── La couche du dessus ───────────────────────────────────────────────
   Une figure sur trois passe PAR-DESSUS le texte. C'est ce qui donne
   l'épaisseur : sur une planche, le calque qu'on annote se pose sur le
   tirage, il ne se glisse pas dessous. Deux précautions pour que ça
   reste lisible — et elles ne sont pas négociables :

   · `mix-blend-mode: multiply` : le trait assombrit ce qu'il croise au
     lieu de le recouvrir. Une lettre traversée reste une lettre.
   · une opacité très basse, et jamais au-dessus de la barre de menu ni
     des boutons — z-index 3, sous les 40 de l'en-tête.

   Le jour où l'une de ces figures gêne une lecture, c'est elle qui part,
   pas le texte. */
/* ── LA PLANCHE REPASSE DERRIÈRE ───────────────────────────────────────
   Elle était à 3, au-dessus du contenu (`.contenu`, z-index 1), pour que
   ses figures passent sur le texte. Une main qui trace par-dessus les
   mots : c'était joli tant que la page n'était que du texte.

   Depuis qu'il y a des photos, le même carré traversé de ses diagonales
   se lit comme une image annulée. Et il était IMPOSSIBLE de l'exclure des
   seules photos : `.planche-dessus` et `.contenu` sont deux contextes
   d'empilement frères, et rien de ce qui vit dans l'un ne peut passer
   au-dessus de l'autre — quel que soit son z-index. C'est ce qui a fait
   échouer les deux correctifs précédents.

   Elle passe donc à 0, derrière le contenu, comme l'autre couche. Le fond
   continue de vivre ; il ne traverse plus rien. */
.planche-dessus { z-index: 0; }
/* La fusion se règle sur CHAQUE figure, jamais sur la couche entière :
   un `mix-blend-mode` posé sur un calque fixe plein écran oblige le
   navigateur à recomposer tout l'écran à chaque image — sept images par
   seconde perdues, mesurées. Sur une figure de deux cents pixels, le
   même effet ne coûte rien. */
.planche-dessus .pl-fig { mix-blend-mode: multiply; }
.planche-dessus .pl-g > * { animation-name: plTraceDessus; }
@keyframes plTraceDessus {
  0%   { stroke-dashoffset: 260; opacity: 0; visibility: visible; }
  4%   { opacity: .3; }
  22%  { stroke-dashoffset: 0;   opacity: .3; }
  56%  { stroke-dashoffset: 0;   opacity: .3; }
  76%  { stroke-dashoffset: -260; opacity: .2; }
  82%  { stroke-dashoffset: -260; opacity: 0; }
  83%  { visibility: hidden; }
  100% { stroke-dashoffset: -260; opacity: 0; visibility: hidden; }
}
/* Sur fond sombre, « multiply » ne se voit plus : on repasse en
   superposition claire pour que la figure existe encore. */


/* Sur téléphone les figures sont plus grandes — une figure réduite à
   quarante pixels n'est plus un dessin, c'est une tache — donc plus
   discrètes en opacité pour ne pas concurrencer un écran déjà chargé. */
@media (max-width: 760px) {
  .planche .pl-g > * { animation-name: plTracePetit; }
  .planche-dessus .pl-g > * { animation-name: plTraceDessusPetit; }
  @keyframes plTracePetit {
    0%   { stroke-dashoffset: 260; opacity: 0; visibility: visible; }
    4%   { opacity: .34; } 22% { stroke-dashoffset: 0; opacity: .34; }
    56%  { stroke-dashoffset: 0; opacity: .34; }
    76%  { stroke-dashoffset: -260; opacity: .22; }
    82%  { stroke-dashoffset: -260; opacity: 0; }
    83%  { visibility: hidden; }
    100% { stroke-dashoffset: -260; opacity: 0; visibility: hidden; }
  }
  @keyframes plTraceDessusPetit {
    0%   { stroke-dashoffset: 260; opacity: 0; visibility: visible; }
    4%   { opacity: .2; } 22% { stroke-dashoffset: 0; opacity: .2; }
    56%  { stroke-dashoffset: 0; opacity: .2; }
    76%  { stroke-dashoffset: -260; opacity: .13; }
    82%  { stroke-dashoffset: -260; opacity: 0; }
    83%  { visibility: hidden; }
    100% { stroke-dashoffset: -260; opacity: 0; visibility: hidden; }
  }
  /* Les règles qui balaient sont plus rares au téléphone : sur un petit
     écran, un trait qui traverse se remarque beaucoup plus. */
  .pl-h { animation-duration: 31s; }
  .pl-v { animation-duration: 43s; }
}

/* Le menu ouvert masque tout le fond : une figure qui traverse un menu
   plein écran n'est plus un détail, c'est un défaut. */
body.ouvert .planche { display: none; }

/* ═══════════════════════════════════════════════════════════════════════
   LES PROJETS À RÉALISER
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Les filtres ─────────────────────────────────────────────────────── */
.pf-barre {
  border: 1px solid var(--trait); background: var(--papier);
  padding: clamp(16px, 2.2vw, 24px); margin-bottom: clamp(20px, 3vw, 30px);
  display: grid; gap: 18px;
}
@media (min-width: 900px) { .pf-barre { grid-template-columns: 1fr 1fr 1fr; align-items: start; } }
.pf-nom { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--encre-3); margin-bottom: 9px; }
.pf-choix { display: flex; flex-wrap: wrap; gap: 6px; }
.pf {
  font-family: var(--mono); font-size: 11px; letter-spacing: .05em;
  padding: 7px 12px; border: 1px solid var(--trait-2); background: #fff;
  color: var(--encre-2); cursor: pointer; border-radius: 0;
  transition: border-color .25s, background .25s, color .25s;
}
.pf:hover { border-color: var(--pourpre-clair); }
.pf.on { border-color: var(--pourpre); background: var(--pourpre); color: #fff; }
.pf-curseur output { display: block; font-family: var(--mono); font-size: 13px;
  color: var(--pourpre); margin-bottom: 6px; }
.pf-curseur input[type=range] { width: 100%; }
.pf-compte { grid-column: 1 / -1; margin: 0; padding-top: 12px;
  border-top: 1px solid var(--trait); font-family: var(--mono); font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--encre-3); }
@media (pointer: coarse) { .pf { padding: 10px 14px; } }

/* ── La grille de projets ────────────────────────────────────────────── */
.projets { display: grid; gap: 1px; background: var(--trait); border: 1px solid var(--trait); }
@media (min-width: 700px)  { .projets { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1180px) { .projets { grid-template-columns: repeat(3, 1fr); } }
.projets.pj-vide { border-color: transparent; }
.pj { background: var(--papier); }
/* La carte est une colonne : l'image en haut, le texte qui prend le reste,
   et le prix poussé en bas par `margin-top:auto`. C'est ce qui aligne les
   prix de toutes les cartes d'une rangée, quelle que soit la longueur des
   descriptions — sans quoi l'œil ne peut pas comparer. */
.pj-lien { display: flex; flex-direction: column; text-decoration: none;
           color: inherit; height: 100%; }
.pj-vue { position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--papier-2); flex: none; }
.pj-vue img, .pj-vue svg { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .8s cubic-bezier(.22,.7,.24,1); }
.pj-lien:hover .pj-vue img, .pj-lien:hover .pj-vue svg { transform: scale(1.035); }
.pj-type {
  position: absolute; left: 0; top: 0; z-index: 2;
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  background: var(--pourpre); color: #fff; padding: 6px 11px;
}
.pj-txt { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.pj-ou { font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--pourpre); margin: 0 0 8px; }
.pj h3 { font-family: var(--titre); font-weight: 400; font-size: clamp(20px, 2vw, 24px);
  line-height: 1.16; letter-spacing: -.014em; margin: 0 0 10px; }
.pj-chapo { font-size: 14px; line-height: 1.62; color: var(--encre-3); margin: 0 0 16px; }
.pj-cles { display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--trait); border: 1px solid var(--trait); margin: 0 0 14px; }
.pj-cles > div { background: var(--papier); padding: 9px 11px; }
.pj-cles dt { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--encre-4); }
.pj-cles dd { margin: 3px 0 0; font-size: 14.5px; font-weight: 500; }
.pj-prix { margin: auto 0 12px; font-size: 13px; color: var(--encre-3); }
.pj-prix span { font-family: var(--titre); font-size: 21px; color: var(--pourpre);
  margin-right: 6px; }
.pj-suite { font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--pourpre); }
.pj-suite b { display: inline-block; transition: transform .34s cubic-bezier(.22,.7,.24,1); }
.pj-lien:hover .pj-suite b { transform: translateX(5px); }

/* ── L'outil d'implantation ──────────────────────────────────────────── */
.implantation {
  display: grid; gap: 1px; background: var(--trait);
  border: 1px solid var(--trait); overflow: hidden;
}
@media (min-width: 900px) { .implantation { grid-template-columns: 1.25fr .75fr; } }
.im-plan { background: #fff; padding: clamp(14px, 2vw, 22px); }
.im-plan svg { width: 100%; height: auto; aspect-ratio: 1; display: block; touch-action: none; }
.im-terrain { fill: var(--papier-2); stroke: var(--pourpre); stroke-width: .7; }
.im-hachure { pointer-events: none; }
.im-recul { fill: none; stroke: var(--pourpre); stroke-width: .5;
  stroke-dasharray: 2 2; stroke-opacity: .75; }
.im-maison { cursor: grab; }
.implantation.im-tenu .im-maison { cursor: grabbing; }
.im-maison:focus-visible #im-corps { stroke-width: 1.6; outline: none; }
#im-corps { fill: var(--pourpre); fill-opacity: .16; stroke: var(--pourpre); stroke-width: 1; }
#im-croix { stroke: var(--pourpre); stroke-width: .4; stroke-opacity: .5; fill: none; }
.im-etiq { font-family: var(--mono); font-size: 4px; fill: var(--pourpre);
  fill-opacity: .8; pointer-events: none; }
.implantation.im-faute #im-corps { fill: #8f2233; fill-opacity: .14; stroke: #8f2233; }
.im-cotes path { stroke: var(--pourpre); stroke-width: .4; stroke-opacity: .55; }
.im-cotes text { font-family: var(--mono); font-size: 3.4px; fill: var(--pourpre);
  fill-opacity: .7; }
.im-cotes path.faute, .im-cotes text.faute { stroke: #8f2233; fill: #8f2233; stroke-opacity: 1; }
.im-aide { margin: 10px 0 0; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--encre-4); text-align: center; }

.im-reglages { background: var(--papier); padding: clamp(18px, 2.4vw, 26px);
  display: flex; flex-direction: column; gap: 10px; }
.im-reglages .mono { font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--pourpre); margin: 8px 0 2px; }
.im-reglages .mono:first-child { margin-top: 0; }
.im-reglages label { display: block; font-size: 13px; color: var(--encre-2); }
.im-reglages output { float: right; font-family: var(--mono); font-size: 12.5px;
  color: var(--pourpre); }
.im-reglages input[type=range] { width: 100%; margin: 4px 0 0; }
.im-bilan { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--trait); }
.im-chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.im-chiffres b { display: block; font-family: var(--titre); font-weight: 400;
  font-size: clamp(17px, 2vw, 21px); line-height: 1; color: var(--pourpre); }
.im-chiffres span { display: block; margin-top: 5px; font-size: 11px; line-height: 1.4;
  color: var(--encre-3); }
.im-chiffres .faute b { color: #8f2233; }
.im-verdict { margin: 0; font-size: 12.5px; line-height: 1.6; padding: 11px 13px;
  border-left: 2px solid var(--pourpre); background: var(--pourpre-voile); color: var(--encre-2); }
.im-verdict.faute { border-left-color: #8f2233; background: #f8e9eb; color: #6d1a28; }

/* Les curseurs, dans le vocabulaire du site */
.pf-curseur input[type=range], .im-reglages input[type=range] {
  -webkit-appearance: none; appearance: none; height: 26px; background: transparent; cursor: pointer;
}
.pf-curseur input[type=range]::-webkit-slider-runnable-track,
.im-reglages input[type=range]::-webkit-slider-runnable-track {
  height: 2px; background: var(--trait-2);
}
.pf-curseur input[type=range]::-moz-range-track,
.im-reglages input[type=range]::-moz-range-track { height: 2px; background: var(--trait-2); }
.pf-curseur input[type=range]::-webkit-slider-thumb,
.im-reglages input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin-top: -8px;
  border-radius: 50%; background: var(--pourpre); border: 3px solid #fff;
  box-shadow: 0 0 0 1px var(--pourpre);
}
.pf-curseur input[type=range]::-moz-range-thumb,
.im-reglages input[type=range]::-moz-range-thumb {
  width: 15px; height: 15px; border-radius: 50%; background: var(--pourpre);
  border: 3px solid #fff; box-shadow: 0 0 0 1px var(--pourpre);
}
.pj-note { max-width: 76ch; margin: clamp(20px,3vw,28px) 0 0; font-size: 14.5px;
  line-height: 1.7; color: var(--encre-3); }
.pj-note a { color: var(--pourpre); text-underline-offset: 3px; }
.im-note { max-width: 78ch; margin: 20px 0 0; font-size: 13.5px; line-height: 1.7;
  color: rgba(255,255,255,.62); }
.im-note em { font-style: normal; color: #c9a5cd; }

/* ── La fiche d'un projet ────────────────────────────────────────────── */
.pr-vues { margin-bottom: clamp(26px, 3.6vw, 42px); }
.pr-photo { margin: 0 0 12px; }
.pr-photo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.pr-plans { display: grid; gap: 12px; }
@media (min-width: 820px) { .pr-plans { grid-template-columns: repeat(3, 1fr); } }
.pr-plan { margin: 0; }
.pr-plan .cadre-dessin { aspect-ratio: 4 / 3; overflow: hidden; background: var(--papier-2); }
.pr-plan svg { width: 100%; height: 100%; display: block; }
.pr-plan figcaption { padding: 10px 2px 0; }
.pr-plan figcaption b { display: block; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--pourpre); }
.pr-plan figcaption span { display: block; margin-top: 4px; font-size: 12.5px;
  line-height: 1.5; color: var(--encre-3); }
.pr-galerie { display: grid; gap: 12px; margin-top: 12px; }
@media (min-width: 700px) { .pr-galerie { grid-template-columns: repeat(2, 1fr); } }
.pr-galerie img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }

.pr-grille { display: grid; gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (min-width: 1000px) { .pr-grille { grid-template-columns: minmax(0,1.55fr) minmax(0,.95fr); } }

.pr-fiche { display: grid; gap: 1px; background: var(--trait);
  border: 1px solid var(--trait); margin: 0 0 clamp(26px,3.4vw,38px); }
@media (min-width: 620px) { .pr-fiche { grid-template-columns: 1fr 1fr; } }
.pr-fiche > div { background: var(--papier); padding: 12px 15px; }
.pr-fiche dt { font-family: var(--mono); font-size: 10px; letter-spacing: .11em;
  text-transform: uppercase; color: var(--encre-4); }
.pr-fiche dd { margin: 4px 0 0; font-size: 15.5px; font-weight: 500; }

.pr-recit p { max-width: 74ch; font-size: 15.5px; line-height: 1.75;
  color: var(--encre-2); margin: 0 0 16px; }
.pr-recit strong { font-weight: 500; color: var(--encre); }
.pr-h2 { font-family: var(--titre); font-weight: 400; font-size: clamp(21px, 2.4vw, 28px);
  line-height: 1.14; letter-spacing: -.014em; margin: clamp(30px,4vw,44px) 0 14px; max-width: 24ch; }
.pr-intro { max-width: 72ch; font-size: 14.5px; line-height: 1.7; color: var(--encre-3);
  margin: 0 0 16px; }
.pr-atouts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-width: 72ch; }
.pr-atouts li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.6;
  color: var(--encre-2); }
.pr-atouts li::before { content: ""; position: absolute; left: 4px; top: 6px;
  width: 6px; height: 11px; border: solid var(--pourpre); border-width: 0 1.6px 1.6px 0;
  transform: rotate(42deg); }
.pr-lots { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pr-lots li { font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  border: 1px solid var(--trait-2); padding: 6px 11px; color: var(--encre-2);
  background: var(--papier); }

/* La colonne de droite, qui suit le lecteur. */
.pr-cote { display: grid; gap: 12px; }
@media (min-width: 1000px) { .pr-cote { position: sticky; top: 92px; } }
.pr-prix { border: 1px solid var(--pourpre); padding: 22px;
  background: linear-gradient(180deg, var(--pourpre-voile), #fff 70%); }
.pr-prix .mono { font-family: var(--mono); font-size: 10px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--pourpre); margin: 0 0 10px; }
.pr-montant { font-family: var(--titre); font-weight: 400; font-size: clamp(25px, 3vw, 34px);
  line-height: 1.06; letter-spacing: -.018em; color: var(--pourpre); margin: 0; }
.pr-sous { margin: 8px 0 0; font-size: 13px; color: var(--encre-3); }
.pr-avert { margin: 12px 0 16px; font-size: 12px; line-height: 1.55; color: var(--encre-3);
  padding-top: 12px; border-top: 1px solid var(--trait); }

.pr-form { background: var(--encre); color: #fff; padding: 24px; display: grid; gap: 11px; }
.pr-form .mono { font-family: var(--mono); font-size: 10px; letter-spacing: .13em;
  text-transform: uppercase; color: #c9a5cd; margin: 0; }
.pr-form h2 { font-family: var(--titre); font-weight: 400; font-size: clamp(21px, 2.2vw, 26px);
  line-height: 1.14; letter-spacing: -.014em; margin: 0; color: #fff; max-width: 18ch; }
.pr-form-txt { margin: 0 0 4px; font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,.72); }
.pr-form label > span { display: block; font-family: var(--mono); font-size: 10px;
  letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-bottom: 5px; }
.pr-form input[type=text], .pr-form input[type=email], .pr-form input[type=tel], .pr-form input:not([type]) {
  width: 100%; padding: 12px 13px; border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.05); color: #fff; font-family: var(--corps);
  font-size: 15.5px; border-radius: 0; -webkit-appearance: none; appearance: none;
}
.pr-form input:focus { outline: none; border-color: #c9a5cd; background: rgba(255,255,255,.09); }
.pr-accord { display: flex; gap: 10px; align-items: flex-start; margin-top: 4px; cursor: pointer; }
.pr-accord input {
  appearance: none; -webkit-appearance: none; flex: none; width: 19px; height: 19px;
  margin: 2px 0 0; border: 1px solid rgba(255,255,255,.4); background: transparent;
  cursor: pointer; position: relative;
}
.pr-accord input:checked { background: #c9a5cd; border-color: #c9a5cd; }
.pr-accord input:checked::after { content: ""; position: absolute; left: 6px; top: 2px;
  width: 5px; height: 10px; border: solid var(--encre); border-width: 0 2px 2px 0;
  transform: rotate(42deg); }
.pr-accord input:focus-visible { outline: 2px solid #c9a5cd; outline-offset: 3px; }
.pr-accord > span { font-size: 12.5px; line-height: 1.55; color: rgba(255,255,255,.8); }
.pr-form .btn { border-color: #fff; background: #fff; color: var(--encre);
  justify-content: center; margin-top: 4px; }
.pr-form .btn::before { background: var(--pourpre-clair); }
.pr-form .btn:hover { color: #fff; }
.pr-rgpd { margin: 0; font-size: 10.5px; line-height: 1.55; color: rgba(255,255,255,.45); }
.pr-rgpd a { color: rgba(255,255,255,.7); text-underline-offset: 2px; }

/* ═══════════════════════════════════════════════════════════════════════
   L'ÉTAT DES LIEUX — la page des données personnelles
   ───────────────────────────────────────────────────────────────────────
   Un bandeau cookies est laid parce qu'il est subi. Celui-ci ne s'impose
   jamais : on l'ouvre parce qu'on veut savoir. Il pouvait donc être beau,
   et il devait l'être — c'est l'endroit où l'on demande à être cru.
   ═══════════════════════════════════════════════════════════════════════ */
.edl { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center;
       padding: clamp(12px, 3vw, 40px); opacity: 0; transition: opacity .32s; }
.edl.on { opacity: 1; }
.edl[hidden] { display: none !important; }
.edl-fond { position: absolute; inset: 0; background: rgba(23,17,26,.72);
            backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
body.edl-ouvert { overflow: hidden; }

.edl-feuille {
  position: relative; z-index: 1; width: min(760px, 100%);
  max-height: min(92dvh, 940px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--papier); color: var(--encre);
  padding: clamp(24px, 4vw, 46px);
  border: 1px solid var(--pourpre);
  transform: translateY(14px) scale(.985);
  transition: transform .4s cubic-bezier(.22,.7,.24,1);
  /* La trame du plan, jusqu'ici : ce panneau appartient au site, il n'est
     pas un module de conformité collé par-dessus. */
  background-image:
    linear-gradient(to right, rgba(23,17,26,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(23,17,26,.045) 1px, transparent 1px);
  background-size: 34px 34px;
}
.edl.on .edl-feuille { transform: none; }

.edl-fermer {
  position: absolute; top: 14px; right: 14px; width: 38px; height: 38px;
  border: 1px solid var(--trait-2); background: var(--papier); cursor: pointer;
  z-index: 2; padding: 0;
}
.edl-fermer span { position: absolute; left: 50%; top: 50%; width: 16px; height: 1.5px;
  margin-left: -8px; background: var(--encre); }
.edl-fermer span:first-child { transform: rotate(45deg); }
.edl-fermer span:last-child  { transform: rotate(-45deg); }
.edl-fermer:hover { border-color: var(--pourpre); }

.edl-cote { font-family: var(--mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--pourpre); margin: 0 0 14px; }
.edl-tete h2 { font-family: var(--titre); font-weight: 400;
  font-size: clamp(28px, 4.4vw, 46px); line-height: 1.03; letter-spacing: -.02em;
  margin: 0 0 16px; max-width: 18ch; }
.edl-tete h2 em { font-style: normal; color: var(--pourpre); }
.edl-chapo { margin: 0; max-width: 62ch; font-size: 15px; line-height: 1.72;
  color: var(--encre-2); }

/* Les trois chiffres. Le troisième — zéro envoyé à un tiers — est le seul
   qui compte vraiment, et il est le plus court à lire. */
.edl-compteur { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--trait); border: 1px solid var(--trait);
  margin: clamp(22px, 3vw, 32px) 0; }
.edl-compteur > div { background: var(--papier); padding: 15px 14px; }
.edl-compteur b { display: block; font-family: var(--titre); font-weight: 400;
  font-size: clamp(22px, 3vw, 32px); line-height: 1; color: var(--pourpre); }
.edl-compteur span { display: block; margin-top: 6px; font-size: 11.5px; line-height: 1.4;
  color: var(--encre-3); }
@media (max-width: 560px) { .edl-compteur { grid-template-columns: 1fr; } }

.edl-titre-bloc { font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--encre-3); margin: 0 0 10px; }
.edl-nomen { border-top: 1px solid var(--trait); }
.edl-l { border-bottom: 1px solid var(--trait); }
.edl-l summary {
  cursor: pointer; list-style: none; display: grid;
  grid-template-columns: 30px 1fr auto; gap: 12px; align-items: center;
  padding: 14px 26px 14px 0; position: relative;
}
.edl-l summary::-webkit-details-marker { display: none; }
.edl-l summary::after {
  content: ""; position: absolute; right: 4px; top: 50%; width: 11px; height: 11px;
  margin-top: -5px;
  background: linear-gradient(var(--encre-4), var(--encre-4)) center/11px 1px no-repeat,
              linear-gradient(var(--encre-4), var(--encre-4)) center/1px 11px no-repeat;
  transition: transform .3s;
}
.edl-l[open] summary::after { transform: rotate(90deg);
  background: linear-gradient(var(--pourpre), var(--pourpre)) center/11px 1px no-repeat; }
.edl-sym { display: block; width: 26px; height: 26px; color: var(--encre-4); }
.edl-sym svg { width: 100%; height: 100%; }
.edl-l.vif .edl-sym { color: var(--pourpre); }
.edl-l.alerte .edl-sym { color: #8a5a12; }
.edl-nom { font-size: 15px; font-weight: 500; }
.edl-etat { font-family: var(--mono); font-size: 10px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--encre-3); text-align: right; }
.edl-l.vif .edl-etat { color: var(--pourpre); }
.edl-l.alerte .edl-etat { color: #8a5a12; }
.edl-detail { padding: 0 26px 18px 42px; }
.edl-detail p { margin: 0 0 12px; font-size: 14px; line-height: 1.68; color: var(--encre-2);
  max-width: 66ch; }
.edl-detail dl { display: grid; gap: 1px; background: var(--trait);
  border: 1px solid var(--trait); margin: 0; }
@media (min-width: 560px) { .edl-detail dl { grid-template-columns: 1fr 1fr; } }
.edl-detail dl > div { background: var(--papier-2); padding: 9px 12px; }
.edl-detail dt { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--encre-4); }
.edl-detail dd { margin: 3px 0 0; font-size: 13.5px; }
@media (max-width: 560px) {
  .edl-l summary { grid-template-columns: 26px 1fr; }
  .edl-etat { grid-column: 2; text-align: left; margin-top: 2px; }
  .edl-detail { padding-left: 0; }
}

.edl-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; }
.edl-actions .btn[disabled] { opacity: .38; pointer-events: none; }
@media (max-width: 520px) { .edl-actions .btn { flex: 1 1 100%; justify-content: center; } }
.edl-brut {
  margin: 14px 0 0; padding: 14px; background: var(--encre); color: #d9d2df;
  font-family: var(--mono); font-size: 11.5px; line-height: 1.6;
  white-space: pre-wrap; word-break: break-all; max-height: 220px; overflow: auto;
}
.edl-note { margin: 14px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--pourpre);
  border-left: 2px solid var(--pourpre); padding: 10px 14px; background: var(--pourpre-voile); }
.edl-note:empty { display: none; }

.edl-pied { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--trait); }
.edl-pied p { margin: 0 0 10px; font-size: 12.5px; line-height: 1.62; color: var(--encre-3); }
.edl-pied a { color: var(--pourpre); text-underline-offset: 3px; }
.edl-cnil { font-size: 11px !important; color: var(--encre-4) !important; }

@media (prefers-reduced-motion: reduce) {
  .edl, .edl-feuille { transition: none; }
  .edl-feuille { transform: none; }
}

/* ── Le nom, à côté du logo ────────────────────────────────────────────
   Le logo seul ne dit pas le nom : il faut déjà connaître l'entreprise
   pour le lire. Sur ordinateur, la barre est pleine — dix entrées de
   menu et un bouton — donc le nom n'y tient pas. En dessous de 940 px le
   menu disparaît dans le tiroir : la place est là, et c'est justement là
   qu'on ne savait pas chez qui on était. */
.marque-nom { display: none; line-height: 1.1; }
.marque-nom b { display: block; font-family: var(--titre); font-weight: 400;
  font-size: 19px; letter-spacing: -.012em; color: var(--encre); }
/* Le slogan tient sur deux lignes, décidées dans le texte plutôt que
   laissées au hasard de la largeur : « Rénovation · Construction », puis
   « Aménagement ». Sur une seule ligne il mesurait deux cents pixels et
   écrasait le bouton de devis ; laissé libre, il se cassait en trois
   morceaux inégaux. Deux lignes choisies valent mieux que trois subies. */
.marque-nom i { display: block; margin-top: 3px; font-family: var(--mono); font-style: normal;
  font-size: 8.2px; line-height: 1.4; letter-spacing: .1em; text-transform: uppercase;
  color: var(--encre-4); text-align: left; }
@media (max-width: 940px) { .marque-nom { display: block; } }
/* Le slogan complet est long. Sur les écrans étroits il passe sur deux
   lignes plutôt que de comprimer le bouton de devis — qui, poussé, se
   réduisait à « DE » et ne voulait plus rien dire. Le bouton ne rétrécit
   donc plus jamais, et c'est le texte qui s'adapte : entre les deux,
   c'est le bouton qui rapporte. */
.marque { min-width: 0; }
.marque-nom { min-width: 0; }
.hdr-devis, #btnDevis { flex: none; }
@media (max-width: 470px) {
  .marque-nom i { font-size: 7.6px; letter-spacing: .06em; }
}
@media (max-width: 400px) { .marque-nom b { font-size: 17px; } }
@media (max-width: 340px) { .marque-nom i { display: none; } }
/* Sous 360 px — les tout petits téléphones — le bouton de devis, la
   marque et le menu ne tiennent plus sur une ligne : le dernier
   débordait de cinq pixels. On retire le bouton de la barre ; il est en
   tête du tiroir, à un appui, et le nom de l'entreprise vaut mieux là
   qu'un bouton tronqué. */
@media (max-width: 359px) { .hdr-devis, #btnDevis { display: none; } }
/* Menu ouvert : le fond est sombre, le nom doit suivre. */
body.ouvert .marque-nom b { color: #fff; }
body.ouvert .marque-nom i { color: rgba(255,255,255,.5); }

/* ── Réglage des intensités ────────────────────────────────────────────
   Les figures de la planche reculent d'un cran : elles étaient justes,
   elles sont maintenant discrètes. La rose des vents, elle, avance — et
   tourne plus vite. C'est le seul élément du fond qui soit un objet
   plutôt qu'un tracé, et le seul qu'on ait envie de regarder : autant
   qu'on la voie. */
.planche .pl-g > * { animation-name: plTraceDoux; }
@keyframes plTraceDoux {
  0%   { stroke-dashoffset: 260; opacity: 0; visibility: visible; }
  4%   { opacity: .33; } 22% { stroke-dashoffset: 0; opacity: .33; }
  56%  { stroke-dashoffset: 0; opacity: .33; }
  76%  { stroke-dashoffset: -260; opacity: .2; }
  82%  { stroke-dashoffset: -260; opacity: 0; }
  83%  { visibility: hidden; }
  100% { stroke-dashoffset: -260; opacity: 0; visibility: hidden; }
}
.planche-dessus .pl-g > * { animation-name: plTraceDessusDoux; }
@keyframes plTraceDessusDoux {
  0%   { stroke-dashoffset: 260; opacity: 0; visibility: visible; }
  4%   { opacity: .18; } 22% { stroke-dashoffset: 0; opacity: .18; }
  56%  { stroke-dashoffset: 0; opacity: .18; }
  76%  { stroke-dashoffset: -260; opacity: .11; }
  82%  { stroke-dashoffset: -260; opacity: 0; }
  83%  { visibility: hidden; }
  100% { stroke-dashoffset: -260; opacity: 0; visibility: hidden; }
}
@media (max-width: 760px) {
  .planche .pl-g > * { animation-name: plTracePetitDoux; }
  .planche-dessus .pl-g > * { animation-name: plTraceDessusPetitDoux; }
  @keyframes plTracePetitDoux {
    0%   { stroke-dashoffset: 260; opacity: 0; visibility: visible; }
    4%   { opacity: .22; } 22% { stroke-dashoffset: 0; opacity: .22; }
    56%  { stroke-dashoffset: 0; opacity: .22; }
    76%  { stroke-dashoffset: -260; opacity: .14; }
    82%  { stroke-dashoffset: -260; opacity: 0; }
    83%  { visibility: hidden; }
    100% { stroke-dashoffset: -260; opacity: 0; visibility: hidden; }
  }
  @keyframes plTraceDessusPetitDoux {
    0%   { stroke-dashoffset: 260; opacity: 0; visibility: visible; }
    4%   { opacity: .12; } 22% { stroke-dashoffset: 0; opacity: .12; }
    56%  { stroke-dashoffset: 0; opacity: .12; }
    76%  { stroke-dashoffset: -260; opacity: .08; }
    82%  { stroke-dashoffset: -260; opacity: 0; }
    83%  { visibility: hidden; }
    100% { stroke-dashoffset: -260; opacity: 0; visibility: hidden; }
  }
}
/* Les règles qui balaient reculent aussi : elles accompagnaient des
   figures plus fortes qu'elles ne le sont maintenant. */
.pl-h { background: linear-gradient(90deg, transparent,
    rgba(74,21,75,.13) 18%, rgba(74,21,75,.13) 82%, transparent); }
.pl-v { background: linear-gradient(180deg, transparent,
    rgba(74,21,75,.11) 18%, rgba(74,21,75,.11) 82%, transparent); }

/* ── La rose des vents, mise en avant ─────────────────────────────── */
.calque-rose { opacity: .68; }
/* Sur téléphone, la rose remonte à hauteur du titre et grandit. En bas
   de l'écran elle passait sous le pouce et sous le pli : on la voyait à
   peine. À hauteur du titre, elle est la première chose que l'œil croise
   après le nom — et comme elle vit derrière le contenu, elle ne gêne pas
   la lecture. Elle déborde volontairement à droite : une rose entière et
   centrée deviendrait un logo, ce qu'elle n'est pas. */
@media (max-width: 760px) {
  .calque-rose {
    opacity: .5;
    top: 15vh; bottom: auto;
    right: -24vw;
    width: min(62vh, 82vw);
  }
}
@media (max-width: 400px) { .calque-rose { top: 13vh; right: -28vw; width: 88vw; } }
/* Tourner plus vite coûte plus cher : à chaque image, le navigateur
   redessine le groupe. `will-change` le promeut sur sa propre couche —
   il le dessine une fois et se contente ensuite de le faire pivoter. */
.calque-rose .rose-tour { animation-duration: 34s; will-change: transform; }
.calque-rose .rose-aiguille { animation-duration: 12s; will-change: transform; }
.calque-rose { will-change: transform; }

/* Les promesses, et l'interlocuteur, dans le formulaire de dossier. */
.pr-promesses { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 7px; }
.pr-promesses li { position: relative; padding-left: 22px; font-size: 13px; line-height: 1.5;
  color: rgba(255,255,255,.86); }
.pr-promesses li::before { content: ""; position: absolute; left: 3px; top: 4px;
  width: 5px; height: 10px; border: solid #c9a5cd; border-width: 0 1.5px 1.5px 0;
  transform: rotate(42deg); }
.pr-charge { margin: 6px 0 4px; padding: 14px 15px; border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.04); }
.pr-charge:empty { display: none; }
.pr-charge-quoi { font-family: var(--mono); font-size: 9.5px; letter-spacing: .13em;
  text-transform: uppercase; color: rgba(255,255,255,.5); margin: 0 0 6px; }
.pr-charge-qui { font-family: var(--titre); font-weight: 400; font-size: 19px;
  line-height: 1.2; color: #fff; margin: 0; }
.pr-charge-qui span { display: block; margin-top: 3px; font-family: var(--mono);
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #c9a5cd; }
.pr-charge-tel { display: flex; flex-direction: column; gap: 2px; margin-top: 12px;
  padding-top: 12px; border-top: 1px solid rgba(255,255,255,.14); text-decoration: none; }
.pr-charge-tel span { font-size: 11.5px; color: rgba(255,255,255,.55); }
.pr-charge-tel b { font-family: var(--mono); font-size: 16px; letter-spacing: .05em;
  font-weight: 400; color: #fff; }
.pr-charge-tel:hover b { color: #c9a5cd; }

/* ── Le choix sur la mesure d'audience ─────────────────────────────────
   Deux boutons de même taille, côte à côte, un clic chacun. La loi
   l'exige ; l'honnêteté aussi. Un « refuser » relégué en petit gris sous
   un « tout accepter » en gros est un consentement extorqué, et la CNIL
   l'a dit assez clairement pour qu'on ne s'y risque pas. */
.edl-choix { margin: 24px 0 0; padding-top: 20px; border-top: 1px solid var(--trait); }
.edl-deux { display: grid; gap: 10px; }
@media (min-width: 480px) { .edl-deux { grid-template-columns: 1fr 1fr; } }
.edl-deux .btn { justify-content: center; }
.edl-egal { margin: 10px 0 0; font-size: 11.5px; line-height: 1.55; color: var(--encre-4); }
/* Quand le panneau s'ouvre pour demander, le choix passe en tête. */
.edl.edl-demande .edl-choix { order: -1; }
.edl.edl-demande .edl-feuille { display: flex; flex-direction: column; }
.edl.edl-demande .edl-tete { order: -2; }
.edl.edl-demande .edl-fond { pointer-events: none; }

/* ── La signature du prestataire ───────────────────────────────────────
   Une mention d'auteur se met en pied de page, discrète, et se distingue
   des mentions obligatoires qui la précèdent : celles-ci engagent
   l'entreprise, celle-là dit seulement qui a fait le site. D'où le trait
   qui les sépare et la teinte plus sourde. */
.pied-bas .propulse {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.38);
}
.pied-bas .propulse a {
  color: rgba(255,255,255,.62); text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.22); padding-bottom: 1px;
  transition: color .3s, border-color .3s;
}
.pied-bas .propulse a:hover { color: #c9a5cd; border-color: #c9a5cd; }
@media (min-width: 900px) {
  /* Sur large écran, la signature se détache à droite, après un filet. */
  .pied-bas .propulse { margin-left: auto; padding-left: 20px;
    border-left: 1px solid rgba(255,255,255,.14); }
}


/* ═══════════════════════════════════════════════════════════════════════
   LES OUTILS — socle commun
   ───────────────────────────────────────────────────────────────────────
   Permis, carnet de visite, gain énergétique et les deux jeux partagent
   le même cadre : un rectangle au trait, une jauge d'avancement fine en
   haut, une scène, un pied avec les boutons. On l'écrit une fois.
   ═══════════════════════════════════════════════════════════════════════ */
.pm-cadre, .cv-cadre, .en-cadre, .jx-cadre {
  border: 1px solid var(--trait); background: #fff;
  margin-top: clamp(20px, 3vw, 32px);
  position: relative; overflow: hidden;
}
.pm-jauge, .en-jauge {
  height: 2px; background: var(--trait); position: relative;
}
.pm-jauge i, .en-jauge i {
  position: absolute; inset: 0; background: var(--pourpre);
  transform-origin: left; transition: transform .5s cubic-bezier(.22,.7,.24,1);
}
.pm-scene, .en-scene { padding: clamp(24px, 4vw, 46px); }
.pm-pied, .en-pied {
  display: flex; align-items: center; gap: 12px;
  padding: 16px clamp(18px, 3vw, 30px);
  border-top: 1px solid var(--trait); background: var(--papier-2);
}

/* ── Une question ───────────────────────────────────────────────────── */
.pm-num, .en-num { margin: 0 0 10px; font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--encre-4); }
.pm-q h2, .en-q h2 {
  margin: 0; font-family: var(--titre); font-weight: 400;
  font-size: clamp(25px, 3.6vw, 38px); line-height: 1.1; letter-spacing: -.015em;
  text-wrap: balance;
}
.pm-aide, .en-aide {
  margin: 12px 0 0; max-width: 64ch; font-size: 15px; line-height: 1.6;
  color: var(--encre-3);
}

/* ── Les cartes de réponse ──────────────────────────────────────────── */
.pm-choix {
  display: grid; gap: 10px; margin-top: clamp(20px, 3vw, 30px);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.pm-choix.large { grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }
.pm-carte {
  display: block; position: relative; cursor: pointer;
  padding: 17px 18px 18px; border: 1px solid var(--trait);
  background: #fff; transition: border-color .18s, background .18s, transform .18s;
}
.pm-carte:hover { border-color: var(--trait-2); transform: translateY(-1px); }
.pm-carte.on { border-color: var(--pourpre); background: var(--pourpre-voile); }
.pm-carte input { position: absolute; opacity: 0; width: 0; height: 0; }
.pm-carte:focus-within { outline: 2px solid var(--pourpre); outline-offset: 2px; }
.pm-carte-n { display: block; font-weight: 500; font-size: 15.5px; line-height: 1.3; }
.pm-carte-d { display: block; margin-top: 6px; font-size: 13.5px; line-height: 1.5;
  color: var(--encre-3); }
.pm-secoue { animation: pmSecoue .42s; }
@keyframes pmSecoue { 25% { transform: translateX(-5px) } 75% { transform: translateX(5px) } }

/* ── Le curseur de surface ──────────────────────────────────────────── */
.pm-nombre { display: flex; align-items: center; gap: clamp(16px, 3vw, 30px);
  margin-top: clamp(22px, 3vw, 32px); flex-wrap: wrap; }
.pm-nombre input[type=range] { flex: 1 1 220px; min-width: 180px; accent-color: var(--pourpre); }
.pm-nombre-val { display: flex; align-items: baseline; gap: 7px; }
.pm-nombre-val input {
  width: 4.6ch; border: 0; border-bottom: 1px solid var(--trait-2);
  background: none; font-family: var(--titre); font-weight: 400;
  font-size: clamp(34px, 5vw, 52px); line-height: 1; color: var(--pourpre);
  text-align: right; padding: 0 0 4px; -moz-appearance: textfield;
}
.pm-nombre-val input::-webkit-outer-spin-button,
.pm-nombre-val input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pm-nombre-val input:focus-visible { outline: 2px solid var(--pourpre); outline-offset: 3px; }
.pm-nombre-val span { font-size: 15px; color: var(--encre-3); }

/* ── Le résultat ────────────────────────────────────────────────────── */
.pm-res {
  text-align: center; padding: clamp(26px, 4vw, 44px) clamp(18px, 3vw, 32px);
  border: 1px solid var(--trait); background: var(--pourpre-voile);
  margin-bottom: clamp(26px, 4vw, 40px);
}
.pm-res-rien { background: var(--papier-2); }
.pm-etiq { margin: 0 0 12px; font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--encre-3); }
.pm-verdict {
  margin: 0; font-family: var(--titre); font-weight: 400;
  font-size: clamp(32px, 6vw, 60px); line-height: 1.02; letter-spacing: -.02em;
  color: var(--pourpre);
  animation: chChiffre .6s cubic-bezier(.22,.7,.24,1) both;
}
.pm-sous { margin: 14px auto 0; max-width: 62ch; font-size: 15px; line-height: 1.6;
  color: var(--encre-2); }
.pm-cles {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  margin-top: clamp(22px, 3vw, 30px); background: var(--trait);
  border: 1px solid var(--trait);
}
.pm-cles > div { background: #fff; padding: 15px 10px; }
.pm-cles b { display: block; font-family: var(--titre); font-weight: 400;
  font-size: clamp(20px, 2.6vw, 27px); line-height: 1; }
.pm-cles span { display: block; margin-top: 6px; font-family: var(--mono);
  font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--encre-3); }
@media (max-width: 620px) { .pm-cles { grid-template-columns: 1fr; } }

.pm-h3 { margin: clamp(28px,4vw,44px) 0 16px; font-family: var(--titre);
  font-weight: 400; font-size: clamp(21px, 2.8vw, 27px); letter-spacing: -.01em; }

.pm-motifs { display: flex; flex-direction: column; gap: 1px; background: var(--trait);
  border: 1px solid var(--trait); }
.pm-motif { background: #fff; padding: 18px 20px;
  animation: pmMotif .5s cubic-bezier(.22,.7,.24,1) both;
  animation-delay: calc(var(--i) * .07s); }
@keyframes pmMotif { from { opacity: 0; transform: translateY(10px); } }
.pm-motif b { display: block; font-weight: 500; font-size: 15.5px; margin-bottom: 6px; }
.pm-motif p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--encre-2); }
.pm-motif-loc b { color: var(--pourpre); }
.pm-motif-doute { border-left: 2px solid var(--pourpre); }

.pm-encart { margin-top: clamp(24px,3vw,36px); padding: 20px 22px;
  border: 1px solid var(--trait); background: var(--papier-2); }
.pm-encart .mono { margin: 0 0 9px; font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--encre-4); }
.pm-encart p:last-child { margin: 0; font-size: 14.5px; line-height: 1.62; color: var(--encre-2); }

/* ── Le contenu de fond, hors outil ─────────────────────────────────── */
.pm-seuils { display: grid; gap: 1px; background: var(--trait);
  border: 1px solid var(--trait); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  margin-top: clamp(22px,3vw,34px); }
.pm-seuils > div { background: #fff; padding: 24px 22px 26px; }
.pm-seuils .mono { margin: 0; font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--encre-4); }
.pm-seuils h3 { margin: 10px 0 10px; font-family: var(--titre); font-weight: 400;
  font-size: clamp(21px,2.6vw,26px); line-height: 1.12; letter-spacing: -.01em; }
.pm-seuils p { margin: 0; font-size: 14.5px; line-height: 1.62; color: var(--encre-2); }
.pm-seuils .pm-cle { background: var(--pourpre-voile); }
.pm-seuils .pm-cle h3 { color: var(--pourpre); }

.pm-note { margin-top: clamp(20px,3vw,28px); padding: 22px 24px;
  border: 1px solid var(--trait); border-left: 2px solid var(--pourpre); background: #fff; }
.pm-note .mono { margin: 0 0 10px; font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--pourpre); }
.pm-note p:last-child { margin: 0; font-size: 15px; line-height: 1.65; color: var(--encre-2); }

.pm-local { display: grid; gap: 1px; background: var(--trait); border: 1px solid var(--trait);
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); margin-top: clamp(22px,3vw,34px); }
.pm-local article { background: #fff; padding: 24px 22px 26px; }
.pm-local h3 { margin: 0 0 14px; font-family: var(--titre); font-weight: 400;
  font-size: clamp(20px,2.4vw,25px); letter-spacing: -.01em; color: var(--pourpre); }
.pm-local ul { margin: 0; padding-left: 17px; display: flex; flex-direction: column; gap: 9px; }
.pm-local li { font-size: 14.5px; line-height: 1.58; color: var(--encre-2); }
.pm-local li::marker { color: var(--trait-2); }

.pm-delais { display: grid; gap: clamp(18px,3vw,28px); margin-top: clamp(22px,3vw,34px);
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 820px) { .pm-delais { grid-template-columns: 1fr; } }
.pm-delais table { width: 100%; border-collapse: collapse; border: 1px solid var(--trait);
  background: #fff; }
.pm-delais caption { caption-side: top; text-align: left; padding: 14px 16px;
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--encre-4); border: 1px solid var(--trait); border-bottom: 0; background: var(--papier-2); }
.pm-delais th, .pm-delais td { padding: 13px 16px; text-align: left;
  border-bottom: 1px solid var(--trait); font-size: 14.5px; }
.pm-delais th { font-family: var(--mono); font-weight: 400; font-size: 10.5px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--encre-3); }
.pm-delais .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pm-delais tbody tr:last-child td { border-bottom: 0; }
.pm-apres { padding: 22px 24px; border: 1px solid var(--trait); background: var(--papier-2); }
.pm-apres .mono { margin: 0 0 12px; font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--encre-4); }
.pm-apres ul { margin: 0; padding-left: 17px; display: flex; flex-direction: column; gap: 9px; }
.pm-apres li { font-size: 14.5px; line-height: 1.58; color: var(--encre-2); }

.pm-cas { display: grid; gap: 1px; background: var(--trait); border: 1px solid var(--trait);
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); margin-top: clamp(22px,3vw,34px); }
.pm-cas article { background: #fff; padding: 22px 20px 24px; }
.pm-cas h3 { margin: 0 0 9px; font-family: var(--titre); font-weight: 400;
  font-size: 20px; letter-spacing: -.01em; }
.pm-cas p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--encre-2); }

/* ── Le formulaire de reprise de contact ────────────────────────────── */
.pm-lead { display: grid; gap: clamp(22px,3vw,40px); margin-top: clamp(30px,4vw,50px);
  padding: clamp(24px,4vw,40px); border: 1px solid var(--pourpre);
  background: var(--pourpre-voile);
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: start; }
@media (max-width: 860px) { .pm-lead { grid-template-columns: 1fr; } }
.pm-lead-txt .mono { margin: 0 0 10px; font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--pourpre); }
.pm-lead-txt h3 { margin: 0 0 12px; font-family: var(--titre); font-weight: 400;
  font-size: clamp(23px,3.2vw,31px); line-height: 1.14; letter-spacing: -.015em;
  text-wrap: balance; }
.pm-lead-txt p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--encre-2); }
.pm-lead-l { margin: 16px 0 0; padding-left: 17px; display: flex; flex-direction: column; gap: 7px; }
.pm-lead-l li { font-size: 14px; line-height: 1.5; color: var(--encre-2); }
.pm-lead-l li::marker { color: var(--pourpre); }
.pm-form { background: #fff; border: 1px solid var(--trait); padding: 22px 22px 24px;
  display: flex; flex-direction: column; gap: 12px; }
.pm-form > .mono { margin: 0 0 2px; font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--encre-4); }
.pm-form-l { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pm-form label { display: block; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--encre-3); }
.pm-form input[type=text], .pm-form input[type=tel], .pm-form input[type=email] {
  display: block; width: 100%; margin-top: 6px; padding: 11px 12px;
  border: 1px solid var(--trait); background: var(--papier);
  font-family: var(--corps); font-weight: 300; font-size: 15px; color: var(--encre);
  letter-spacing: 0; text-transform: none;
}
.pm-form input:focus-visible { outline: 2px solid var(--pourpre); outline-offset: 1px; }
.pm-consent { display: flex; gap: 10px; align-items: flex-start;
  font-family: var(--corps); font-size: 12.5px; line-height: 1.5; letter-spacing: 0;
  text-transform: none; color: var(--encre-3); }
.pm-consent input { margin-top: 2px; accent-color: var(--pourpre); flex: none; }
.pm-consent a { color: var(--pourpre); }
.pm-form-tel { margin: 4px 0 0; font-size: 13px; color: var(--encre-3); }
.pm-form-tel a { color: var(--pourpre); font-weight: 500; }

/* ── Les renvois vers les autres outils ─────────────────────────────── */
.pm-suite { display: grid; gap: 1px; background: var(--trait); border: 1px solid var(--trait);
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin-top: clamp(24px,3vw,36px); }
.pm-suite-c { background: #fff; padding: 22px 22px 24px; text-decoration: none;
  color: inherit; display: block; transition: background .18s; }
.pm-suite-c:hover { background: var(--papier-2); }
.pm-suite-c .mono { margin: 0 0 8px; font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--encre-4); }
.pm-suite-c b { display: block; font-family: var(--titre); font-weight: 400;
  font-size: 22px; letter-spacing: -.01em; }
.pm-suite-c span { display: block; margin-top: 7px; font-size: 14px; color: var(--encre-3); }

/* Le tableau des délais déborde sous 380 px : on lui donne son propre
   défilement plutôt que de le laisser pousser la page. */
.pm-tab { overflow-x: auto; }
.pm-tab table { min-width: 340px; }


/* ═══════════════════════════════════════════════════════════════════════
   LE CARNET DE VISITE
   ───────────────────────────────────────────────────────────────────────
   Il se coche debout, dans un couloir, sur un téléphone. Donc : des
   cibles larges, un contraste franc, et rien qui demande de viser.
   ═══════════════════════════════════════════════════════════════════════ */
.cv-entete {
  display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap;
  padding: clamp(18px,3vw,26px) clamp(18px,3vw,30px);
  border-bottom: 1px solid var(--trait); background: var(--papier-2);
}
.cv-entete > div { flex: 1 1 240px; }
.cv-entete .mono { margin: 0 0 8px; font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--encre-4); }
#cv-bien {
  width: 100%; padding: 10px 12px; border: 1px solid var(--trait); background: #fff;
  font-family: var(--corps); font-weight: 300; font-size: 15px; color: var(--encre);
}
#cv-bien:focus-visible { outline: 2px solid var(--pourpre); outline-offset: 1px; }

.cv-fam { border-bottom: 1px solid var(--trait); }
.cv-fam:last-child { border-bottom: 0; }
.cv-fam h2 {
  margin: 0; padding: 20px clamp(18px,3vw,30px) 14px;
  font-family: var(--titre); font-weight: 400; font-size: clamp(21px,2.6vw,27px);
  line-height: 1.1; letter-spacing: -.01em;
}
.cv-fam h2 span { display: block; margin-top: 5px; font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--encre-4); }
.cv-fam ul { list-style: none; margin: 0; padding: 0; }

.cv-pt { border-top: 1px solid var(--trait); transition: background .18s; }
.cv-pt.on { background: var(--pourpre-voile); }
.cv-tete {
  display: grid; grid-template-columns: 26px 1fr auto; gap: 0 14px;
  align-items: start; cursor: pointer;
  padding: 15px clamp(18px,3vw,30px);
  min-height: 54px;
}
.cv-tete input { position: absolute; opacity: 0; width: 0; height: 0; }
.cv-case {
  width: 22px; height: 22px; border: 1px solid var(--trait-2); background: #fff;
  position: relative; margin-top: 1px; transition: border-color .16s, background .16s;
}
.cv-case::after {
  content: ""; position: absolute; left: 7px; top: 3px;
  width: 6px; height: 12px; border: solid #fff; border-width: 0 1.8px 1.8px 0;
  transform: rotate(45deg) scale(0); transform-origin: center;
  transition: transform .18s cubic-bezier(.22,.7,.24,1);
}
.cv-pt.on .cv-case { background: var(--pourpre); border-color: var(--pourpre); }
.cv-pt.on .cv-case::after { transform: rotate(45deg) scale(1); }
.cv-tete:focus-within .cv-case { outline: 2px solid var(--pourpre); outline-offset: 2px; }
.cv-n { font-weight: 500; font-size: 15.5px; line-height: 1.35; }
.cv-g {
  display: inline-block; margin-left: 9px; padding: 2px 7px; vertical-align: 2px;
  font-family: var(--mono); font-style: normal; font-size: 9.5px;
  letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  border: 1px solid var(--trait-2); color: var(--encre-3);
}
.cv-g3 { border-color: var(--pourpre); color: var(--pourpre); }
.cv-prix { font-family: var(--mono); font-size: 12px; color: var(--encre-3);
  white-space: nowrap; padding-top: 3px; font-variant-numeric: tabular-nums; }
.cv-prix-0 { color: var(--encre-4); font-style: italic; }
.cv-corps { padding: 0 clamp(18px,3vw,30px) 16px 70px; }
.cv-q { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--encre-2); }
.cv-q::before { content: "→ "; color: var(--pourpre); }
.cv-p { margin: 7px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--encre-3); }

.cv-notes { padding: clamp(18px,3vw,26px) clamp(18px,3vw,30px);
  border-top: 1px solid var(--trait); background: var(--papier-2); }
.cv-notes label { display: block; margin-bottom: 8px; font-size: 10.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--encre-4); }
#cv-txt { width: 100%; padding: 11px 12px; border: 1px solid var(--trait);
  background: #fff; font-family: var(--corps); font-weight: 300; font-size: 15px;
  line-height: 1.55; color: var(--encre); resize: vertical; }
#cv-txt:focus-visible { outline: 2px solid var(--pourpre); outline-offset: 1px; }

.cv-vide { margin-top: clamp(20px,3vw,28px); padding: 22px 24px;
  border: 1px dashed var(--trait-2); background: var(--papier-2); }
.cv-vide .mono { margin: 0 0 8px; font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--encre-4); }
.cv-vide p:last-child { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--encre-3); }

.cv-res { margin-top: clamp(22px,3vw,32px); text-align: center;
  padding: clamp(26px,4vw,40px) clamp(18px,3vw,30px);
  border: 1px solid var(--pourpre); background: var(--pourpre-voile); }
.cv-etiq { margin: 0 0 12px; font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--encre-3); }
.cv-total { margin: 0; font-family: var(--titre); font-weight: 400;
  font-size: clamp(30px,5.6vw,56px); line-height: 1.02; letter-spacing: -.02em;
  color: var(--pourpre); animation: chChiffre .6s cubic-bezier(.22,.7,.24,1) both; }
.cv-sous { margin: 14px auto 0; max-width: 60ch; font-size: 14.5px; line-height: 1.6;
  color: var(--encre-2); }
.cv-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px;
  justify-content: center; }

/* À l'impression, le carnet devient une feuille qu'on emporte : on retire
   le décor, le menu, le formulaire, et on garde les points cochés. */
@media print {
  .barre, .tiroir, .pied, .calque-grille, .calque-tracé, .calque-tracé2,
  .calque-rose, .planche, .cote-lecture, .reticule, .heros-cote,
  .cv-actions, #cv-lead, #cv-vider, .cv-pt:not(.on) { display: none !important; }
  .cv-cadre, .cv-res { border: 1px solid #999; }
  .cv-pt.on { background: none; }
  .cv-pt.on .cv-case { background: none; border: 1px solid #000; }
  .cv-pt.on .cv-case::after { border-color: #000; }
  body { background: #fff; }
}

/* La version statique des 22 points — celle que Google lit, et celle que
   lit quelqu'un qui n'ouvrira jamais l'outil. */
.cvs-fam { margin-top: clamp(28px,4vw,44px); }
.cvs-fam h2 { margin: 0 0 4px; font-family: var(--titre); font-weight: 400;
  font-size: clamp(23px,3vw,30px); line-height: 1.1; letter-spacing: -.015em; }
.cvs-fam h2 span { display: block; margin-top: 6px; font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--encre-4); }
.cvs-l { display: grid; gap: 1px; background: var(--trait); border: 1px solid var(--trait);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: 16px; }
.cvs-pt { background: #fff; padding: 20px 20px 22px; }
.cvs-pt h3 { margin: 0 0 10px; font-weight: 500; font-size: 15.5px; line-height: 1.35;
  font-family: var(--corps); }
.cvs-q { margin: 0; font-size: 14px; line-height: 1.55; color: var(--encre-2); }
.cvs-q::before { content: "→ "; color: var(--pourpre); }
.cvs-p { margin: 7px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--encre-3); }
.cvs-prix { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--trait);
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--encre-3);
  font-variant-numeric: tabular-nums; }
.cv-large { margin: 14px auto 0; max-width: 62ch; padding-top: 14px;
  border-top: 1px solid var(--trait-2); font-size: 13.5px; line-height: 1.6;
  color: var(--encre-3); text-align: left; }


/* ═══════════════════════════════════════════════════════════════════════
   L'ESTIMATEUR DE GAIN ÉNERGÉTIQUE
   ───────────────────────────────────────────────────────────────────────
   Les couleurs d'étiquette du DPE sont réglementaires et connues de
   tous : on ne les réinvente pas. C'est le seul endroit du site où une
   autre couleur que le pourpre est légitime — parce qu'elle porte une
   information officielle, pas une envie de décorer.
   ═══════════════════════════════════════════════════════════════════════ */
.en-eA { --dpe: #319a6d; } .en-eB { --dpe: #4fae5b; } .en-eC { --dpe: #a6c948; }
.en-eD { --dpe: #f0e622; } .en-eE { --dpe: #f2b13a; } .en-eF { --dpe: #ea7c3a; }
.en-eG { --dpe: #d7382f; }

.en-echelle { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(20px,3vw,30px); }
.en-lettre {
  flex: 1 1 78px; position: relative; cursor: pointer; text-align: center;
  padding: 14px 6px 12px; border: 1px solid var(--trait); background: #fff;
  transition: border-color .16s, transform .16s;
}
.en-lettre:hover { transform: translateY(-2px); }
.en-lettre input { position: absolute; opacity: 0; width: 0; height: 0; }
.en-lettre:focus-within { outline: 2px solid var(--pourpre); outline-offset: 2px; }
.en-lettre b {
  display: block; width: 40px; height: 40px; margin: 0 auto 8px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; font-family: var(--titre);
  font-weight: 400; font-size: 21px; line-height: 1;
}
.en-lettre:nth-child(1) b { background: #319a6d; }
.en-lettre:nth-child(2) b { background: #4fae5b; }
.en-lettre:nth-child(3) b { background: #a6c948; }
.en-lettre:nth-child(4) b { background: #f0e622; color: #3d3542; }
.en-lettre:nth-child(5) b { background: #f2b13a; color: #3d3542; }
.en-lettre:nth-child(6) b { background: #ea7c3a; }
.en-lettre:nth-child(7) b { background: #d7382f; }
.en-lettre span { display: block; font-family: var(--mono); font-size: 10.5px;
  color: var(--encre-4); font-variant-numeric: tabular-nums; }
.en-lettre.on { border-color: var(--pourpre); border-width: 2px; background: var(--pourpre-voile); }
.en-echelle-l { flex: 1 0 100%; margin: 6px 0 0; font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--encre-4); }

.en-gestes { display: flex; flex-direction: column; gap: 1px; background: var(--trait);
  border: 1px solid var(--trait); margin-top: clamp(20px,3vw,30px); }
.en-geste { display: grid; grid-template-columns: 26px 1fr; gap: 0 14px; align-items: start;
  padding: 16px 18px; background: #fff; cursor: pointer; transition: background .16s; }
.en-geste.on { background: var(--pourpre-voile); }
.en-geste input { position: absolute; opacity: 0; width: 0; height: 0; }
.en-geste.on .cv-case { background: var(--pourpre); border-color: var(--pourpre); }
.en-geste.on .cv-case::after { transform: rotate(45deg) scale(1); }
.en-geste:focus-within .cv-case { outline: 2px solid var(--pourpre); outline-offset: 2px; }
.en-geste-t b { display: block; font-weight: 500; font-size: 15.5px; }
.en-geste-t span { display: block; margin-top: 5px; font-size: 13.5px; line-height: 1.5;
  color: var(--encre-3); }

.en-res { text-align: center; padding: clamp(26px,4vw,44px) clamp(18px,3vw,32px);
  border: 1px solid var(--trait); background: var(--pourpre-voile);
  margin-bottom: clamp(24px,3vw,36px); }
.en-saut { display: flex; align-items: center; justify-content: center; gap: clamp(16px,4vw,40px);
  margin: 8px 0 18px; flex-wrap: wrap; }
.en-saut-c { display: flex; flex-direction: column; align-items: center; gap: 9px; }
.en-saut-c .mono { font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--encre-3); }
.en-etiq { width: clamp(58px,9vw,82px); height: clamp(58px,9vw,82px); border-radius: 50%;
  display: grid; place-items: center; background: var(--dpe); color: #fff;
  font-family: var(--titre); font-weight: 400; font-size: clamp(28px,4.4vw,40px); line-height: 1;
  animation: chChiffre .6s cubic-bezier(.22,.7,.24,1) both; }
.en-etiq.en-eD, .en-etiq.en-eE { color: #3d3542; }
.en-fleche { font-family: var(--mono); font-size: clamp(20px,3vw,28px); color: var(--pourpre); }
.en-verdict { margin: 0; font-family: var(--titre); font-weight: 400;
  font-size: clamp(26px,4.6vw,44px); line-height: 1.05; letter-spacing: -.02em;
  color: var(--pourpre); }
.en-a { font-family: var(--corps); font-size: .5em; color: var(--encre-3); }
.en-gain { display: inline-block; margin-left: 10px; font-family: var(--mono);
  font-style: normal; font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--pourpre); border: 1px solid var(--pourpre); padding: 2px 7px; vertical-align: 2px; }

.en-blocage, .en-somme { margin-top: clamp(20px,3vw,30px); padding: 22px 24px;
  border: 1px solid var(--trait); border-left: 2px solid var(--pourpre); background: #fff; }
.en-blocage .mono, .en-somme .mono { margin: 0 0 10px; font-size: 10.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--pourpre); }
.en-blocage p:last-child, .en-somme p:last-child { margin: 0; font-size: 15px;
  line-height: 1.65; color: var(--encre-2); }
.en-somme { border-left-color: var(--trait-2); background: var(--papier-2); }
.en-somme .mono { color: var(--encre-4); }


/* ═══════════════════════════════════════════════════════════════════════
   LES JEUX
   ───────────────────────────────────────────────────────────────────────
   Règle tenue : un jeu, ici, doit avoir l'air d'un exercice de dessin.
   Pas de confettis, pas de son, pas de badge — un score discret et un
   trait bien tracé. C'est ce qui fait qu'il ne détonne pas au milieu du
   reste et qu'on n'a pas honte de partager l'adresse.
   ═══════════════════════════════════════════════════════════════════════ */
.jx-barre { display: flex; align-items: center; gap: 16px;
  padding: 14px clamp(16px,3vw,26px); border-bottom: 1px solid var(--trait);
  background: var(--papier-2); }
.jx-barre .mono { margin: 0; font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--encre-4); }
.jx-points { display: flex; gap: 6px; margin-left: auto; }
.jx-pt { width: 10px; height: 10px; border: 1px solid var(--trait-2); border-radius: 50%;
  display: block; }
.jx-p1 { background: var(--trait-2); border-color: var(--trait-2); }
.jx-p2 { background: var(--pourpre-clair); border-color: var(--pourpre-clair); }
.jx-p3 { background: var(--pourpre); border-color: var(--pourpre); }
.jx-p0 { background: none; }

.jx-consigne { margin: 0; padding: clamp(20px,3vw,30px) clamp(16px,3vw,26px) 4px;
  font-family: var(--titre); font-weight: 400; font-size: clamp(22px,3.2vw,32px);
  line-height: 1.15; letter-spacing: -.015em; }
.jx-consigne b { color: var(--pourpre); font-weight: 400; }
.jx-consigne span { display: block; margin-top: 7px; font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--encre-4); }

.jx-plan { position: relative; margin: clamp(14px,2vw,20px) clamp(16px,3vw,26px);
  height: clamp(200px, 34vw, 300px); border: 1px solid var(--trait);
  background: var(--papier); cursor: crosshair; touch-action: none;
  overflow: hidden; user-select: none; }
.jx-plan:focus-visible { outline: 2px solid var(--pourpre); outline-offset: 2px; }
.jx-fond { position: absolute; inset: 0; width: 100%; height: 100%; }
.jx-aide-plan { position: absolute; inset: auto 0 12px; margin: 0; text-align: center;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--encre-4); pointer-events: none; }

/* La cote qu'on trace : deux traits d'about et une ligne, comme sur un plan. */
.jx-cote { position: absolute; top: 50%; height: 0; pointer-events: none;
  display: flex; align-items: center; }
.jx-cote-t { width: 1px; height: 16px; background: var(--pourpre); flex: none; }
.jx-cote-l { flex: 1; height: 1px; background: var(--pourpre); }
.jx-cote-v { position: absolute; left: 50%; top: -26px; transform: translateX(-50%);
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--pourpre);
  background: var(--papier); padding: 2px 7px; white-space: nowrap; }
.jx-vrai { position: absolute; top: calc(50% + 26px); height: 0; pointer-events: none; }
.jx-vrai i { position: absolute; inset: 0; height: 1px; background: var(--pin);
  box-shadow: 0 0 0 0 transparent; }
.jx-vrai i::before, .jx-vrai i::after { content: ""; position: absolute; top: -7px;
  width: 1px; height: 15px; background: var(--pin); }
.jx-vrai i::before { left: 0; } .jx-vrai i::after { right: 0; }
.jx-vrai b { position: absolute; left: 50%; top: 10px; transform: translateX(-50%);
  font-family: var(--mono); font-weight: 400; font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--pin); white-space: nowrap; }

.jx-echelle { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 0 clamp(16px,3vw,26px) clamp(16px,2vw,22px); }
.jx-echelle .mono { font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--encre-4); }
.jx-regle { position: relative; height: 18px; display: flex; align-items: center; }
.jx-regle i { display: block; height: 1px; background: var(--encre-3); position: relative; }
.jx-regle i::before, .jx-regle i::after { content: ""; position: absolute; top: -5px;
  width: 1px; height: 11px; background: var(--encre-3); }
.jx-regle i::before { left: 0; } .jx-regle i::after { right: 0; }
.jx-regle b { position: absolute; left: 50%; top: -16px; transform: translateX(-50%);
  font-family: var(--mono); font-weight: 400; font-size: 10px; color: var(--encre-3); }
.jx-ech-n { margin-left: auto; }

.jx-pied { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px clamp(16px,3vw,26px); border-top: 1px solid var(--trait);
  background: var(--papier-2); }
.jx-verdict { margin: 0; font-family: var(--titre); font-weight: 400;
  font-size: clamp(19px,2.6vw,25px); line-height: 1.15; }
.jx-verdict span { display: block; margin-top: 5px; font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--encre-3); }
.jx-v3 { color: var(--pourpre); }

.jx-fin { text-align: center; padding: clamp(30px,5vw,52px) clamp(18px,3vw,30px); }
.jx-fin .mono { margin: 0 0 14px; font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--encre-4); }
.jx-note { margin: 0; font-family: var(--titre); font-weight: 400;
  font-size: clamp(48px,9vw,88px); line-height: 1; letter-spacing: -.03em; color: var(--pourpre);
  animation: chChiffre .6s cubic-bezier(.22,.7,.24,1) both; }
.jx-note span { font-size: .34em; color: var(--encre-4); margin-left: 6px; }
.jx-fin h2 { margin: 16px 0 10px; font-family: var(--titre); font-weight: 400;
  font-size: clamp(24px,3.6vw,34px); letter-spacing: -.015em; }
.jx-fin-p { margin: 0 auto; max-width: 56ch; font-size: 15px; line-height: 1.62;
  color: var(--encre-2); }
.jx-fin-m { margin: 18px 0 0; font-family: var(--mono); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--encre-3); }
.jx-detail { display: flex; flex-direction: column; gap: 1px; background: var(--trait);
  border: 1px solid var(--trait); margin-top: clamp(20px,3vw,28px); text-align: left; }
.jx-detail > div { background: #fff; padding: 11px 16px; display: flex;
  align-items: center; gap: 12px; flex-wrap: wrap; }
.jx-detail .mono { margin: 0; flex: 0 0 78px; font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--encre-4); }
.jx-detail b { font-family: var(--titre); font-weight: 400; font-size: 18px; }
.jx-detail em { font-style: normal; font-size: 13px; color: var(--encre-3); }
.jx-detail .jx-pt { margin-left: auto; }

/* ── Le vice caché ──────────────────────────────────────────────────── */
.vc-compte { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.vc-compte .mono { font-size: 13px; color: var(--pourpre);
  font-variant-numeric: tabular-nums; min-width: 2.4ch; text-align: right; }
.vc-jauge { display: block; width: 72px; height: 2px; background: var(--trait-2); }
.vc-jauge b { display: block; height: 100%; background: var(--pourpre);
  transform-origin: left; transition: transform 1s linear; }

.vc-scene { position: relative; margin: clamp(14px,2vw,20px) clamp(16px,3vw,26px);
  border: 1px solid var(--trait); background: var(--papier); overflow: hidden;
  user-select: none; }
.vc-svg { display: block; width: 100%; height: auto; }
/* Un défaut ne doit RIEN avoir de particulier tant qu'on ne l'a pas
   trouvé : même trait, même opacité, même épaisseur que le reste du
   dessin. Ils étaient dessinés plus pâles, ce qui les désignait au
   premier coup d'œil — le jeu se gagnait sans regarder. */
.vc-d { transition: stroke .3s, stroke-width .3s; }
.vc-d.on { stroke: #4a154b; stroke-opacity: 1; stroke-width: 1.8; }
.vc-d.rate { stroke: #b03a2e; stroke-opacity: .9; stroke-width: 1.4; }

/* L'écran de départ. Le chronomètre partait au chargement de la page :
   quelqu'un qui lisait l'introduction trouvait la partie déjà perdue. */
.vc-depart { position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(250, 249, 250, .93); text-align: center; padding: 20px;
  transition: opacity .35s, visibility .35s; }
.vc-depart.parti { opacity: 0; visibility: hidden; }
.vc-depart .mono { margin: 0 0 10px; font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--encre-4); }
.vc-depart h3 { margin: 0 0 10px; font-family: var(--titre); font-weight: 400;
  font-size: clamp(26px, 4vw, 38px); line-height: 1.1; letter-spacing: -.02em; }
.vc-depart-p { margin: 0 auto 20px; max-width: 40ch; font-size: 14.5px;
  line-height: 1.55; color: var(--encre-3); }

.vc-cible {
  position: absolute; width: 46px; height: 46px; margin: -23px 0 0 -23px;
  padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%;
}
.vc-cible::after {
  content: ""; position: absolute; inset: 12px; border-radius: 50%;
  border: 1px solid transparent; transition: border-color .2s, transform .2s;
}
.vc-cible:hover::after { border-color: var(--trait-2); transform: scale(1.35); }
.vc-cible:focus-visible { outline: 2px solid var(--pourpre); outline-offset: 0; }
.vc-cible.on { cursor: default; }
.vc-cible.on::after { border-color: var(--pourpre); border-width: 1.5px; transform: scale(1.5); }
.vc-cible.rate::after { border-color: #b03a2e; border-style: dashed; transform: scale(1.5); }
.vc-rate { animation: vcRate .4s; }
@keyframes vcRate { 50% { background: var(--papier-2); } }

.vc-liste { display: flex; flex-direction: column; gap: 1px; background: var(--trait);
  border-top: 1px solid var(--trait); }
.vc-liste:empty { display: none; }
.vc-fiche { background: #fff; padding: 16px clamp(16px,3vw,26px);
  animation: pmMotif .45s cubic-bezier(.22,.7,.24,1) both; }
.vc-fiche b { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  font-weight: 500; font-size: 15.5px; margin-bottom: 7px; }
.vc-fiche b em { font-style: normal; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--pourpre);
  border: 1px solid var(--pourpre); padding: 2px 7px; margin-left: auto; white-space: nowrap; }
.vc-v { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--encre-2); }
.vc-v::before { content: "→ "; color: var(--pourpre); }
.vc-s { margin: 6px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--encre-3); }
.vc-manque { background: var(--papier-2); }
.vc-manque b em { color: #b03a2e; border-color: #b03a2e; }
.vc-manque .vc-v::before { content: "✕ "; color: #b03a2e; }

.vc-fin { background: var(--pourpre-voile); padding: 22px clamp(16px,3vw,26px) 24px; }
.vc-fin .mono { margin: 0 0 10px; font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--pourpre); }
.vc-fin p:nth-child(2) { margin: 0; font-size: 15px; line-height: 1.62; color: var(--encre-2);
  max-width: 66ch; }
.vc-fin-b { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }

/* ── La page carrefour des outils ───────────────────────────────────── */
.ou-l-g { display: grid; gap: 1px; background: var(--trait); border: 1px solid var(--trait);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin-top: clamp(22px,3vw,34px); }
.ou-c { background: #fff; padding: 26px 24px 28px; text-decoration: none; color: inherit;
  display: flex; flex-direction: column; transition: background .2s; }
.ou-c:hover { background: var(--pourpre-voile); }
.ou-h { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.ou-h .mono { margin: 0; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--pourpre); }
.ou-t { margin-left: auto; font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--encre-4); border: 1px solid var(--trait-2);
  padding: 3px 8px; white-space: nowrap; }
.ou-c h3 { margin: 0 0 10px; font-family: var(--titre); font-weight: 400;
  font-size: clamp(22px,2.8vw,28px); line-height: 1.12; letter-spacing: -.015em;
  text-wrap: balance; }
.ou-c > p { margin: 0 0 18px; font-size: 14.5px; line-height: 1.6; color: var(--encre-2); flex: 1; }
.ou-l { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--pourpre); }
.ou-l b { transition: transform .2s; display: inline-block; }
.ou-c:hover .ou-l b { transform: translateX(4px); }

/* ── Les deux jeux, sur l'accueil ───────────────────────────────────────
   Un bloc à part des outils : on ne mélange pas ce qui sert et ce qui
   amuse. Le dessin de chaque carte reprend le geste du jeu — une cote
   pour l'un, une loupe sur un défaut pour l'autre. */
.jeux-accueil {
  display: grid; gap: clamp(20px,3vw,36px); margin-top: clamp(18px,2.5vw,26px);
  padding: clamp(24px,3.5vw,38px);
  border: 1px solid var(--trait); background: var(--papier-2);
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center;
}
@media (max-width: 860px) { .jeux-accueil { grid-template-columns: 1fr; } }
.jeux-txt .mono { margin: 0 0 9px; font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--pourpre); }
.jeux-txt h3 { margin: 0 0 10px; font-family: var(--titre); font-weight: 400;
  font-size: clamp(23px,3vw,30px); line-height: 1.12; letter-spacing: -.015em; }
.jeux-txt p { margin: 0; font-size: 15px; line-height: 1.62; color: var(--encre-2); }
.jeux-l { display: grid; gap: 1px; background: var(--trait);
  border: 1px solid var(--trait); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.jeux-c { background: #fff; padding: 20px 20px 22px; text-decoration: none; color: inherit;
  display: flex; flex-direction: column; transition: background .2s, color .2s; }
.jeux-c:hover { background: var(--pourpre-voile); color: var(--pourpre); }
.jeux-c svg { width: 100%; max-width: 130px; height: auto; margin-bottom: 14px;
  color: var(--pourpre); }
.jeux-c b { font-family: var(--titre); font-weight: 400; font-size: 22px;
  letter-spacing: -.01em; color: var(--encre); }
.jeux-c:hover b { color: var(--pourpre); }
.jeux-c span { display: block; margin: 7px 0 12px; font-size: 14px; line-height: 1.5;
  color: var(--encre-3); flex: 1; }
.jeux-c em { font-style: normal; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--pourpre); }

/* Les jeux, en sous-entrées du tiroir mobile */
.tiroir nav a.tiroir-fils { padding-left: 26px; }
.tiroir nav a.tiroir-fils span { font-size: .92em; color: var(--encre-2); }
.tiroir nav a.tiroir-fils i { opacity: .5; }

/* Une grille en « auto-fit » laisse un trou dès que le nombre de cartes
   n'est pas un multiple du nombre de colonnes. On compte les enfants et
   on ajuste — quatre cartes se rangent en deux fois deux, cinq se
   partagent une trame de six. Même principe que la grille des métiers. */
@media (min-width: 900px) {
  .ou-l-g:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); }
  .ou-l-g:has(> :nth-child(5):last-child) { grid-template-columns: repeat(6, 1fr); }
  .ou-l-g:has(> :nth-child(5):last-child) > :nth-child(-n+3) { grid-column: span 2; }
  .ou-l-g:has(> :nth-child(5):last-child) > :nth-child(n+4) { grid-column: span 3; }
  .ou-l-g:has(> :nth-child(6):last-child) { grid-template-columns: repeat(3, 1fr); }
}
/* Entre 620 et 900 px la grille tombe à deux colonnes : un nombre impair
   de cartes laisse alors la dernière seule. On lui fait occuper toute la
   largeur plutôt que la moitié. */
@media (min-width: 620px) and (max-width: 899px) {
  .ou-l-g:has(> :nth-child(3):last-child) > :nth-child(3),
  .ou-l-g:has(> :nth-child(5):last-child) > :nth-child(5) { grid-column: 1 / -1; }
}

/* ═══════════════════════════════════════════════════════════════════════
   UN ARTICLE, SUR SA PROPRE PAGE
   ───────────────────────────────────────────────────────────────────────
   Colonne unique, mesure courte — soixante-cinq signes environ. Un texte
   de huit minutes se lit mal sur toute la largeur d'un écran.
   ═══════════════════════════════════════════════════════════════════════ */
.pa { max-width: 74ch; margin: 0 auto; }
.pa-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-bottom: 16px; border-bottom: 1px solid var(--trait);
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--encre-4); }
.pa-meta a { color: var(--pourpre); text-decoration: none; }
.pa-meta a:hover { text-decoration: underline; text-underline-offset: 3px; }

.pa-corps { padding-top: clamp(22px,3vw,34px); }
.pa-corps p { margin: 0 0 18px; font-size: 17px; line-height: 1.72; color: var(--encre-2); }
.pa-corps .chapeau { font-size: clamp(18px,2.2vw,21px); line-height: 1.6;
  color: var(--encre); margin-bottom: 26px; padding-left: 16px;
  border-left: 2px solid var(--pourpre); }
.pa-corps h4 { margin: clamp(30px,4vw,42px) 0 14px; font-family: var(--titre);
  font-weight: 400; font-size: clamp(23px,3vw,30px); line-height: 1.15;
  letter-spacing: -.015em; text-wrap: balance; }
.pa-corps ul { margin: 0 0 18px; padding-left: 20px; display: flex;
  flex-direction: column; gap: 9px; }
.pa-corps li { font-size: 16px; line-height: 1.65; color: var(--encre-2); }
.pa-corps li::marker { color: var(--pourpre); }
.pa-corps b { font-weight: 500; color: var(--encre); }
.pa-corps a { color: var(--pourpre); text-decoration-thickness: 1px;
  text-underline-offset: 3px; }
.pa-corps a:hover { background: var(--pourpre-voile); }

.pa-pied { margin-top: clamp(32px,4vw,48px); padding: clamp(22px,3vw,30px);
  border: 1px solid var(--trait); background: var(--papier-2); }
.pa-pied .mono { margin: 0 0 9px; font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--pourpre); }
.pa-pied p:nth-child(2) { margin: 0; font-size: 15px; line-height: 1.6; color: var(--encre-2); }
.pa-pied-b { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.art-lien { margin: 22px 0 0 !important; padding-top: 16px;
  border-top: 1px solid var(--trait); }
.art-lien a { font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--pourpre); text-decoration: none; }
.art-lien a:hover { text-decoration: underline; text-underline-offset: 4px; }
.art-lien b { display: inline-block; transition: transform .2s; }
.art-lien a:hover b { transform: translateX(4px); }


/* ═══ AGRANDIR UNE PHOTO ════════════════════════════════════════════════
   Fond noir plutôt que sombre-teinté : la photo est le sujet, et tout ce
   qui a une couleur autour d'elle en discute. Les commandes restent
   discrètes jusqu'à ce qu'on les cherche.
   ═══════════════════════════════════════════════════════════════════════ */
.zoom {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(8, 4, 10, .94);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  display: grid; place-items: center; padding: clamp(14px, 4vw, 48px);
  opacity: 0; transition: opacity .22s cubic-bezier(.22,.7,.24,1);
}
.zoom.on { opacity: 1; }
.zoom[hidden] { display: none; }

.zoom-scene { margin: 0; display: grid; gap: 14px; justify-items: center;
  max-width: 100%; max-height: 100%; }
.zoom-vue { display: grid; place-items: center; max-width: 100%; min-height: 0; }
.zoom-vue img { display: block; max-width: min(1400px, 100%);
  /* La photo tient dans l'écran, cartouche compris : sans cette réserve,
     une photo verticale pousse sa légende hors du champ. */
  max-height: calc(100vh - clamp(120px, 18vh, 190px)); width: auto; height: auto;
  object-fit: contain; border-radius: 2px; }
.zoom.on .zoom-vue img { animation: zoom-pose .34s cubic-bezier(.22,.7,.24,1) both; }
@keyframes zoom-pose { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }

.zoom-scene figcaption { display: flex; gap: 16px; align-items: baseline;
  justify-content: center; flex-wrap: wrap; text-align: center; }
.zoom-l { color: rgba(255,255,255,.9); font-size: 14px; max-width: 62ch; }
.zoom-compte { color: rgba(255,255,255,.42); font-variant-numeric: tabular-nums; }

.zoom-bt { position: absolute; display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  color: #fff; font-size: 20px; line-height: 1; cursor: pointer;
  transition: background .18s, border-color .18s, transform .18s; }
.zoom-bt:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.34); }
.zoom-bt:active { transform: scale(.94); }
.zoom-bt[hidden] { display: none; }
.zoom-fermer { top: clamp(12px, 2vw, 22px); right: clamp(12px, 2vw, 22px); }
.zoom-prec { left: clamp(10px, 2vw, 26px); top: 50%; margin-top: -23px; }
.zoom-suiv { right: clamp(10px, 2vw, 26px); top: 50%; margin-top: -23px; }
/* Sur un écran étroit, les flèches passent en bas : au milieu, le pouce
   les rencontre avant la photo. */
@media (max-width: 620px) {
  .zoom-prec, .zoom-suiv { top: auto; bottom: clamp(12px, 4vw, 22px); margin-top: 0; }
  .zoom-prec { left: 22%; } .zoom-suiv { right: 22%; }
  .zoom-scene { padding-bottom: 58px; }
}

/* La vignette dit qu'elle s'ouvre : le curseur, et un signe au survol. */
.fiche-galerie [data-zoom] { cursor: zoom-in; position: relative; }
.fiche-galerie [data-zoom]:focus-visible { outline: 2px solid var(--pourpre); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .zoom, .zoom-bt { transition: none; }
  .zoom.on .zoom-vue img { animation: none; }
}

/* ── La photo en tête d'une page de projet ou d'article ────────────────
   Ces pages sont celles que Google indexe. Une photo y sert deux fois :
   elle donne à voir, et elle entre dans Google Images — qui amène du
   monde à une entreprise de rénovation. Le cadre prend le rapport de la
   photo, comme partout ailleurs sur le site. */
.pr-photo, .art-photo {
  margin: clamp(20px, 3vw, 34px) var(--marge) 0;
  border: 1px solid var(--trait); background: var(--papier-2);
  overflow: hidden;
}
.pr-photo img, .art-photo img {
  width: 100%; height: auto; display: block;
  filter: grayscale(1) contrast(1.03);
  transition: filter .7s cubic-bezier(.22,.7,.24,1);
}
.pr-photo:hover img, .art-photo:hover img { filter: none; }
.pr-photo figcaption {
  padding: 12px 16px; border-top: 1px solid var(--trait);
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--encre-3);
}
@media (prefers-reduced-motion: reduce) {
  .pr-photo img, .art-photo img { transition: none; }
}


/* ═══ LES MIRES DE CADRAGE ══════════════════════════════════════════════
   Ilyes, le 9 septembre 2026 : « il y a des croix qui apparaissent sur les
   photos, on a l'impression que la photo est barrée. Trouve un bel effet
   qui fait architecte. »

   Ce qui traverse une image la barre ; ce qui se pose à ses angles la
   CADRE. C'est la différence entre une rature et un repérage, et c'est
   exactement le geste d'une planche : les mires de cadrage, les quatre
   équerres qu'on trouve aux coins d'un tirage, d'un calque, d'un plan
   qu'on va découper.

   L'animation dit ce que fait l'outil : les quatre équerres arrivent
   larges et se RESSERRENT sur l'image, comme un viseur qui accroche. Le
   cadre se ferme sur le sujet au lieu de lui passer dessus.

   Huit dégradés d'un pixel, aucune image, aucun script. La règle
   s'applique partout où une photo attend d'être regardée — et nulle part
   ailleurs, parce qu'une mire sur un dessin au trait ne cadre rien. */
.zone-vue,
.fin-image.a-photo,
.pr-photo,
.art-photo,
.fiche-galerie [data-zoom] { --mire: rgba(255,255,255,.92); }

.zone-vue::before,
.fin-image.a-photo::before,
.pr-photo::before,
.art-photo::before,
.fiche-galerie [data-zoom]::before {
  content: ""; position: absolute; inset: 6px; z-index: 3; pointer-events: none;
  background:
    linear-gradient(var(--mire), var(--mire)) left  top    / 20px 1px no-repeat,
    linear-gradient(var(--mire), var(--mire)) left  top    / 1px 20px no-repeat,
    linear-gradient(var(--mire), var(--mire)) right top    / 20px 1px no-repeat,
    linear-gradient(var(--mire), var(--mire)) right top    / 1px 20px no-repeat,
    linear-gradient(var(--mire), var(--mire)) left  bottom / 20px 1px no-repeat,
    linear-gradient(var(--mire), var(--mire)) left  bottom / 1px 20px no-repeat,
    linear-gradient(var(--mire), var(--mire)) right bottom / 20px 1px no-repeat,
    linear-gradient(var(--mire), var(--mire)) right bottom / 1px 20px no-repeat;
  opacity: 0;
  filter: drop-shadow(0 1px 2px rgba(8,4,10,.55));
  transition: opacity .34s cubic-bezier(.22,.7,.24,1),
              inset .52s cubic-bezier(.22,.7,.24,1);
}
.zone.a-photo:hover .zone-vue::before,
.zone.a-photo:focus-within .zone-vue::before,
.fin:hover .fin-image.a-photo::before,
.fin:focus-within .fin-image.a-photo::before,
.pr-photo:hover::before,
.art-photo:hover::before,
.fiche-galerie [data-zoom]:hover::before,
.fiche-galerie [data-zoom]:focus-visible::before { opacity: 1; inset: 13px; }

/* La mire du bandeau d'un secteur est déjà sur du sombre en bas : elle
   reste blanche, mais on lui laisse le dégradé par-dessus. */
.zone-vue::before { z-index: 3; }

/* ── LE CADRE DE LA GALERIE ────────────────────────────────────────────
   Le « + » dans un rond disait « on peut agrandir », et il disait aussi
   « photo barrée » à qui ne l'attendait pas. Un mot en petites capitales,
   posé dans le coin, dit la même chose sans rien traverser. */
.fiche-galerie [data-zoom]::after {
  content: "Agrandir";
  position: absolute; right: 15px; bottom: 13px; z-index: 4;
  width: auto; height: auto; border-radius: 0; background: none;
  font-family: var(--mono); font-size: 9px; letter-spacing: .14em;
  text-transform: uppercase; color: #fff;
  text-shadow: 0 1px 3px rgba(8,4,10,.7);
  opacity: 0; transform: translateY(4px);
  transition: opacity .34s .06s cubic-bezier(.22,.7,.24,1),
              transform .34s .06s cubic-bezier(.22,.7,.24,1);
  pointer-events: none;
}
.fiche-galerie [data-zoom]:hover::after,
.fiche-galerie [data-zoom]:focus-visible::after { opacity: .92; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .zone-vue::before, .fin-image.a-photo::before, .pr-photo::before,
  .art-photo::before, .fiche-galerie [data-zoom]::before,
  .fiche-galerie [data-zoom]::after { transition: none; }
}


/* ═══ AVANT / APRÈS ═════════════════════════════════════════════════════
   Deux photos du même cadrage, superposées, et l'on découvre l'une sous
   l'autre en faisant glisser. C'est la preuve la plus efficace qu'un
   chantier puisse donner.

   LES DEUX COUCHES FONT LA MÊME TAILLE, et seule la DÉCOUPE bouge. Une
   couche qu'on rétrécirait déformerait sa photo ou l'obligerait à
   coulisser — deux défauts qu'on voit tout de suite et qu'on ne sait plus
   corriger après. `clip-path` ne touche à rien, il masque.
   ═══════════════════════════════════════════════════════════════════════ */
.fiche-avap { margin-top: clamp(22px, 3vw, 36px); }
.fiche-avap h3 {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--encre-3); font-weight: 400;
  margin: 0 0 12px;
}
.avap { margin: 0 0 clamp(14px, 2vw, 20px); }
.avap-cadre {
  position: relative; aspect-ratio: var(--r, 3 / 2);
  overflow: hidden; border: 1px solid var(--trait); background: var(--papier-2);
  /* pan-y laisse le doigt faire défiler la page verticalement : sans lui,
     le curseur avale le geste et l'on reste bloqué sur la comparaison. */
  touch-action: pan-y;
  cursor: ew-resize; user-select: none; -webkit-user-select: none;
}
.avap-couche { position: absolute; inset: 0; }
/* `object-position` dit CE QU'ON GARDE quand il faut rogner. Deux photos
   prises à six mois d'écart n'ont jamais exactement le même cadre — un
   sol refait se perd si l'on rogne par le bas, un plafond si l'on rogne
   par le haut. Le client répond en clair au back-office, le pont traduit,
   et ici on applique. */
.avap-couche img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  object-position: var(--ou, 50% 50%);
}
.avap-avant { clip-path: inset(0 calc(100% - var(--x, 50%)) 0 0); }

.avap-poignee {
  position: absolute; top: 0; bottom: 0; left: var(--x, 50%);
  width: 46px; transform: translateX(-50%);
  display: grid; place-items: center; cursor: ew-resize;
  /* `touch-action` NE S'HÉRITE PAS. Le cadre le portait, la poignée non :
     au doigt, poser le doigt exactement sur la poignée — ce que tout le
     monde fait — rendait le geste au navigateur, qui faisait défiler la
     page au lieu de déplacer le curseur. La poignée était donc le seul
     endroit où l'avant/après ne marchait pas. */
  touch-action: pan-y;
}
.avap-poignee i { touch-action: pan-y; }
.avap-poignee::before {
  content: ""; position: absolute; top: 0; bottom: 0; width: 1.5px;
  background: #fff; box-shadow: 0 0 0 1px rgba(8,4,10,.28);
}
.avap-poignee i {
  position: relative; width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,.94); box-shadow: 0 2px 10px rgba(8,4,10,.32);
  display: grid; place-items: center;
  transition: transform .22s cubic-bezier(.22,.7,.24,1);
}
/* Deux chevrons : le geste se lit avant qu'on l'essaie. */
.avap-poignee i::before, .avap-poignee i::after {
  content: ""; position: absolute; width: 7px; height: 7px;
  border-top: 1.6px solid var(--pourpre); border-right: 1.6px solid var(--pourpre);
}
.avap-poignee i::before { transform: rotate(-135deg) translate(-3px, -3px); }
.avap-poignee i::after  { transform: rotate(45deg) translate(-3px, -3px); }
.avap-cadre:hover .avap-poignee i { transform: scale(1.08); }
.avap-cadre.tire .avap-poignee i { transform: scale(.94); }
.avap-poignee:focus-visible { outline: none; }
.avap-poignee:focus-visible i {
  outline: 2px solid var(--pourpre); outline-offset: 3px; transform: scale(1.08);
}

.avap-etiq {
  position: absolute; top: 12px; z-index: 2;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: #fff;
  padding: 5px 9px; background: rgba(8,4,10,.46);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  pointer-events: none;
}
.avap-ea { left: 12px; }
.avap-eb { right: 12px; }

.avap figcaption {
  margin-top: 9px; font-family: var(--mono); font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--encre-3);
}

/* À l'ouverture, le curseur fait UN aller-retour : le geste s'apprend en
   le voyant, et personne ne lit une consigne sous une image. Une seule
   fois, à l'ouverture de la fiche — pas à chaque survol. */
@keyframes avapMontre {
  0%   { --x: 50%; }
  38%  { --x: 76%; }
  72%  { --x: 30%; }
  100% { --x: 50%; }
}
@property --x { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
/* L'animation d'arrivée pilote `--x`, et une animation l'emporte sur le
   style en ligne. Tant qu'elle tourne, le geste du visiteur n'aurait
   aucun effet visible : on la coupe DÉFINITIVEMENT au premier contact —
   `.touche` reste, là où `.tire` s'en va au relâchement. Sans cette
   distinction, l'animation reprenait la main dès qu'on lâchait, et le
   curseur repartait tout seul. */
.fiche.on .avap-cadre:not(.tire):not(.touche) {
  animation: avapMontre 2.1s .45s cubic-bezier(.4,.1,.2,1) 1;
}

@media (max-width: 620px) {
  .avap-etiq { font-size: 8.5px; padding: 4px 7px; top: 9px; }
  .avap-ea { left: 9px; } .avap-eb { right: 9px; }
  .avap-poignee i { width: 32px; height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .fiche.on .avap-cadre { animation: none; }
  .avap-poignee i { transition: none; }
}




/* ═══ CE MUR EST-IL PORTEUR ? ═══════════════════════════════════════════
   Un questionnaire qui pèse des indices. Chaque réponse dit ce qu'elle
   indique et pourquoi — le raisonnement se lit en même temps qu'on
   répond, ce qui est le seul moyen qu'il serve encore sur le mur suivant.
   ═══════════════════════════════════════════════════════════════════════ */
.mp-questions { list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1px; background: var(--trait);
  border: 1px solid var(--trait); }
.mp-q { background: var(--papier); padding: clamp(20px, 3vw, 30px) clamp(18px, 2.6vw, 30px);
  transition: background .3s; }
.mp-q.repondue { background: var(--papier-2); }
.mp-num { font-size: 10px; letter-spacing: .12em; color: var(--encre-4); margin: 0; }
.mp-q h3 { font-family: var(--titre); font-weight: 400; font-size: clamp(18px, 1.9vw, 23px);
  letter-spacing: -.014em; margin: 8px 0 0; line-height: 1.18; }
.mp-aide { font-size: 13px; color: var(--encre-3); margin: 7px 0 0; max-width: 62ch; }
.mp-choix { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 15px; }
.mp-r { font: inherit; font-size: 13.4px; line-height: 1.3; text-align: left;
  padding: 9px 13px; border: 1px solid var(--trait-2); background: var(--papier);
  color: var(--encre-2); cursor: pointer;
  transition: border-color .18s, background .18s, color .18s; }
.mp-r:hover { border-color: var(--pourpre); color: var(--pourpre); }
.mp-r.on { background: var(--pourpre); border-color: var(--pourpre); color: #fff; }
/* Ce que la réponse indique. C'est la moitié de la valeur de l'outil :
   sans elle, on obtient un verdict sans avoir rien appris. */
.mp-pourquoi { margin: 13px 0 0; padding-left: 13px; border-left: 2px solid var(--pourpre);
  font-size: 13.2px; line-height: 1.6; color: var(--encre-2); max-width: 74ch; }

.mp-attente { margin: 22px 0 0; font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--encre-4); }

.mp-verdict { margin-top: clamp(26px, 4vw, 40px); padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--trait); border-left: 4px solid var(--encre-4);
  background: var(--papier); }
.mp-verdict.est-porteur { border-left-color: var(--pourpre); }
.mp-verdict.est-doute   { border-left-color: #a96608; }
.mp-verdict.est-cloison { border-left-color: var(--pin); }
.mp-verdict h3 { font-family: var(--titre); font-weight: 400;
  font-size: clamp(22px, 2.6vw, 31px); letter-spacing: -.016em; margin: 8px 0 0; }
.mp-quoi { margin: 12px 0 0; font-size: 15px; line-height: 1.66; max-width: 70ch; }
.mp-suite { margin: 10px 0 0; font-size: 14px; line-height: 1.66;
  color: var(--encre-2); max-width: 70ch; }

/* Les deux plateaux de la balance, côte à côte : on voit d'un coup ce qui
   penche et de combien. */
.mp-balance { display: grid; gap: 1px; background: var(--trait);
  border: 1px solid var(--trait); border-top: 0; }
@media (min-width: 780px) { .mp-balance { grid-template-columns: 1fr 1fr; } }
.mp-balance > div { background: var(--papier); padding: clamp(18px, 2.4vw, 26px); }
.mp-balance p.mono { font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--encre-3); margin: 0 0 12px; }
.mp-balance ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.mp-balance li b { display: block; font-weight: 500; font-size: 13.8px; }
.mp-balance li span { display: block; font-size: 12.8px; line-height: 1.55;
  color: var(--encre-3); margin-top: 3px; }
.mp-balance .mp-rien { color: var(--encre-4); font-size: 13.4px; }

.mp-garde { border: 1px solid var(--trait); border-top: 0;
  background: var(--papier-2); padding: clamp(20px, 3vw, 30px); }
.mp-garde p { font-size: 13.8px; line-height: 1.7; max-width: 78ch; margin: 0 0 .8em; }
.mp-garde p:last-child { margin-bottom: 0; }

.mp-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

/* À l'impression, on garde le diagnostic et on jette les boutons : la
   feuille part chez quelqu'un qui ne peut pas cliquer. */
@media print {
  .mp-choix, .mp-actions, .mp-attente { display: none !important; }
  .mp-q, .mp-verdict, .mp-balance > div, .mp-garde { background: #fff !important; }
  .mp-q:not(.repondue) { display: none !important; }
}