/* ============================================================
   PrivteintPro — système visuel
   ------------------------------------------------------------
   Direction : Tesla plutôt qu'Apple.
   Concrètement, quatre décisions qui changent tout :
     · angles quasi nuls (3 px) au lieu de 12–16
     · contraste fort sur fond très sombre, un seul accent
     · densité : filets d'un pixel, pas d'ombres molles
     · mouvement rapide et linéaire, jamais de rebond
   La marque ne change pas : l'or PrivTeint reste le seul accent.
   ============================================================ */

/* ══════════════════════════════════════════════════════════
   JETONS
   ══════════════════════════════════════════════════════════ */
:root {
  /* Surfaces — quasi noir TEINTÉ BLEU NUIT.
     privteint.fr est bâti sur #0C1B2E ; un pro en noir pur donnait
     l'impression de changer d'entreprise en changeant de site. On
     garde la profondeur Tesla, on emprunte la teinte de la marque. */
  --n0: #070B12;          /* fond de page */
  --n1: #0C1220;          /* surface */
  --n2: #121A2A;          /* surface élevée */
  --n3: #1A2437;          /* survol */
  --filet: rgba(255,255,255,.085);
  --filet-fort: rgba(255,255,255,.16);

  /* Encre */
  --blanc: #FFFFFF;
  --txt: #E8EAED;
  --gris: #9BA1AA;
  --gris-2: #808690;   /* 4,75:1 au pire fond rencontre.
                          #6B717A donnait 3,80 — sous le seuil de
                          lisibilite pour du texte courant. */

  /* Accent unique — l'or de la marque */
  --or: #C9A84C;
  --or-clair: #E0C477;
  --or-sombre: #9A7F2F;

  /* États — réservés, jamais décoratifs */
  --ok: #34C77B;
  --alerte: #E0A020;
  --rouge: #E82127;

  /* ── Verre liquide ──────────────────────────────────────
     La matière d'Apple, la géométrie de Tesla. Une surface de
     verre se reconnaît à trois choses, et pas une de plus :
       · elle laisse deviner ce qu'il y a derrière (flou + saturation)
       · elle a un liseré de lumière sur son arête haute
       · elle s'éclaircit très légèrement au survol
     Tout le reste — angles, filets, mouvement — reste anguleux. */
  --verre-1: rgba(255,255,255,.042);
  --verre-2: rgba(255,255,255,.075);
  --verre-3: rgba(255,255,255,.115);
  --verre-bord:  rgba(255,255,255,.13);
  --verre-bord-fort: rgba(255,255,255,.22);
  --verre-lueur: rgba(255,255,255,.34);
  --verre-flou: 20px;
  --verre-sat: 175%;
  --verre-ombre: 0 8px 32px rgba(0,0,0,.42);

  /* Géométrie — entre les deux sites.
     privteint.fr arrondit à 12 px, la première version du pro était à
     3 px : trop tranchée à côté. 6 px garde la ligne droite lisible
     sans donner l'impression de deux marques différentes. */
  --r: 6px;
  --r-l: 8px;
  --filet-w: 1px;

  /* Rythme : une échelle stricte, pas de valeurs au hasard */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;
  --e5: 24px; --e6: 32px; --e7: 48px; --e8: 64px; --e9: 96px;

  /* Mouvement — précis, jamais élastique */
  --t-court: 120ms cubic-bezier(.2,0,0,1);
  --t: 180ms cubic-bezier(.2,0,0,1);
  --t-long: 420ms cubic-bezier(.16,1,.3,1);

  --police: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI',
            Roboto, 'Helvetica Neue', system-ui, sans-serif;
  --largeur: 1240px;
  --gouttiere: clamp(20px, 5vw, 56px);
  --entete-h: 72px;
}

/* ══════════════════════════════════════════════════════════
   BASE
   ══════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--entete-h) + var(--e5));
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

body {
  background: var(--n0);
  color: var(--txt);
  font-family: var(--police);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--or); color: #000; }

:focus-visible {
  outline: 2px solid var(--or);
  outline-offset: 2px;
}

/* Lien d'évitement — obligatoire, invisible tant qu'il n'a pas le focus */
.evitement {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--or); color: #000; padding: var(--e3) var(--e5);
  font-weight: 600; border-radius: 0 0 var(--r) 0;
}
.evitement:focus { left: 0; }

/* ══════════════════════════════════════════════════════════
   TYPOGRAPHIE
   Serrée, hiérarchie nette. Les micro-libellés en capitales
   sont la signature du tableau de bord Tesla.
   ══════════════════════════════════════════════════════════ */
.t-micro {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gris-2);
  line-height: 1.4;
}
.t-micro--or { color: var(--or); }

h1, .t1 {
  font-size: clamp(2.1rem, 5.6vw, 4.1rem);
  line-height: 1.04;
  letter-spacing: -.035em;
  font-weight: 600;
  color: var(--blanc);
}
h2, .t2 {
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  line-height: 1.12;
  letter-spacing: -.028em;
  font-weight: 600;
  color: var(--blanc);
}
h3, .t3 {
  /* Le minimum passe de 1.12 a 1.25rem : sur telephone, un h3 a
     17,9 px contre 16,3 px de corps ne se lisait pas comme un
     titre. A 20 px, le pas redevient perceptible. */
  font-size: clamp(1.25rem, 1.9vw, 1.38rem);
  line-height: 1.28;
  letter-spacing: -.018em;
  font-weight: 600;
  color: var(--blanc);
}
h4, .t4 { font-size: 1rem; font-weight: 600; letter-spacing: -.01em; color: var(--blanc); }

p { color: var(--gris); }
.chapeau {
  font-size: clamp(1.02rem, 1.8vw, 1.22rem);
  line-height: 1.62;
  color: var(--txt);
  max-width: 62ch;
}
.texte-long { max-width: 68ch; }
.texte-long p + p { margin-top: var(--e4); }
.texte-long h2 { margin: var(--e8) 0 var(--e4); }
.texte-long h3 { margin: var(--e6) 0 var(--e3); }
.texte-long ul, .texte-long ol { margin: var(--e4) 0 var(--e4) var(--e5); color: var(--gris); }
.texte-long li { margin-bottom: var(--e2); }
.texte-long strong { color: var(--blanc); font-weight: 600; }
.texte-long a { color: var(--or); border-bottom: 1px solid rgba(201,168,76,.35); }
.texte-long a:hover { border-bottom-color: var(--or); }

/* Chiffres alignés : indispensable dès qu'on compare des valeurs */
.chiffre { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

/* ══════════════════════════════════════════════════════════
   MISE EN PAGE
   ══════════════════════════════════════════════════════════ */
.enveloppe { width: 100%; max-width: var(--largeur); margin: 0 auto; padding-inline: var(--gouttiere); }
.section { padding-block: clamp(var(--e8), 9vw, 128px); }
.section--serre { padding-block: clamp(var(--e7), 6vw, var(--e9)); }
.section--filet { border-top: var(--filet-w) solid var(--filet); }

.grille { display: grid; gap: var(--e5); }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .g3, .g4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } }

.duo { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(var(--e6), 6vw, var(--e9)); align-items: center; }
@media (max-width: 900px) { .duo { grid-template-columns: 1fr; gap: var(--e6); } }

.entete-section { max-width: 66ch; margin-bottom: var(--e7); }
.entete-section .t-micro { margin-bottom: var(--e3); }
.entete-section p { margin-top: var(--e4); }

/* ══════════════════════════════════════════════════════════
   EN-TÊTE
   ------------------------------------------------------------
   Une seule barre, en verre, qui flotte au-dessus du contenu.
   Hiérarchie assumée des actions, de gauche à droite :
     marque › navigation › recherche › TÉLÉPHONE › chiffrage › site
   Le téléphone est l'action la plus visible parce que c'est
   celle qui aboutit le plus vite ; « Chiffrage » reste un lien
   sobre, pas un bouton criard qui écrase le reste.
   ══════════════════════════════════════════════════════════ */
.entete {
  position: sticky; top: 0; z-index: 100;
  height: var(--entete-h);
  background: linear-gradient(180deg, rgba(12,18,32,.78), rgba(7,11,18,.68));
  -webkit-backdrop-filter: blur(var(--verre-flou)) saturate(var(--verre-sat));
  backdrop-filter: blur(var(--verre-flou)) saturate(var(--verre-sat));
  border-bottom: var(--filet-w) solid transparent;
  transition: border-color var(--t), background var(--t), box-shadow var(--t);
}
/* Le liseré spéculaire : une ligne de lumière sur l'arête haute.
   C'est ce détail, plus que le flou, qui fait lire « verre ». */
.entete::after {
  content: ''; position: absolute; inset: auto 0 -1px; height: 1px;
  background: linear-gradient(90deg, transparent,
              var(--verre-bord) 15%, var(--verre-bord) 85%, transparent);
  opacity: 0; transition: opacity var(--t); pointer-events: none;
}
.entete.est-colle {
  background: linear-gradient(180deg, rgba(12,18,32,.94), rgba(7,11,18,.9));
  box-shadow: 0 1px 24px rgba(0,0,0,.4);
}
.entete.est-colle::after { opacity: 1; }

.entete-in {
  height: 100%; display: flex; align-items: center; gap: var(--e6);
  max-width: 1440px; margin: 0 auto; padding-inline: clamp(20px, 4vw, 48px);
}

/* La marque : le monogramme séparé du mot par un filet vertical, et
   « Pro » en petites capitales espacées plutôt qu'en simple mot doré.
   C'est ce détail qui distingue une signature d'une étiquette. */
.marque { display: flex; align-items: center; gap: var(--e3); flex: 0 0 auto; }
.marque svg { width: 28px; height: 28px; color: var(--blanc); }
.marque-txt {
  display: flex; align-items: baseline; gap: 9px;
  font-weight: 600; letter-spacing: -.02em; font-size: 1.08rem; color: var(--blanc);
}
.marque-txt span {
  padding-left: 9px; border-left: var(--filet-w) solid var(--filet-fort);
  color: var(--or); font-weight: 600; font-size: .66em;
  letter-spacing: .18em; text-transform: uppercase;
}

/* ── Navigation ─────────────────────────────────────────── */
.nav { display: flex; align-items: center; gap: var(--e2); margin-left: var(--e5); }
/* `static` volontaire : le tiroir se positionne sur l'EN-TÊTE, pas sur
   l'entrée de menu, sinon il ferait la largeur du mot « Solutions ».
   L'en-tête est en position:sticky, ce qui suffit à l'ancrer. */
.nav-item { position: static; }
/* `.nav > a` et non `.nav a` : la seconde forme atteignait aussi les
   liens du tiroir, et son `white-space: nowrap` l'emportait sur celui
   du tiroir (0,1,1 contre 0,1,0). Résultat : chaque description tenait
   sur une ligne et débordait de sa colonne. On restreint la portée
   plutôt que de surenchérir en spécificité. */
.nav > a, .nav-decl {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 9px var(--e4);
  white-space: nowrap;
  font-size: .86rem; font-weight: 500; color: var(--gris);
  background: none; border: 0; cursor: pointer;
  border-radius: var(--r);
  transition: color var(--t-court), background var(--t-court);
}
.nav > a:hover, .nav-decl:hover { color: var(--blanc); background: var(--verre-2); }
.nav > a[aria-current="page"] { color: var(--blanc); }
.nav-decl svg { transition: transform var(--t); opacity: .7; }
.nav-item.est-ouvert .nav-decl { color: var(--blanc); background: var(--verre-2); }
.nav-item.est-ouvert .nav-decl svg { transform: rotate(180deg); }

.entete-fin { margin-left: auto; display: flex; align-items: center; gap: var(--e3); }

/* ── Bouton de recherche ────────────────────────────────── */
.btn-rech {
  /* Une icône, pas un faux champ. Le champ vit dans le panneau qui se
     déplie ; le mettre AUSSI dans la barre donnait deux endroits où
     écrire pour une seule et même recherche. */
  display: inline-flex; align-items: center; justify-content: center;
  height: 40px; width: 40px; padding: 0;
  background: none;
  border: var(--filet-w) solid transparent;
  border-radius: var(--r);
  color: var(--gris); cursor: pointer;
  transition: background var(--t-court), color var(--t-court), border-color var(--t-court);
}
.btn-rech:hover { background: var(--verre-2); color: var(--blanc); border-color: var(--verre-bord); }
.btn-rech svg { flex: 0 0 17px; }

/* ── Téléphone : l'action la plus visible ──────────────── */
.btn-tel {
  display: inline-flex; align-items: center; flex: 0 0 auto;
  height: 40px; padding: 0 var(--e4);
  background: linear-gradient(180deg, var(--verre-3), var(--verre-1));
  border: var(--filet-w) solid rgba(201,168,76,.34);
  border-radius: var(--r);
  color: var(--blanc); font-size: .86rem; font-weight: 600;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  position: relative;
  transition: background var(--t-court), border-color var(--t-court);
}
.btn-tel::after {
  content: ''; position: absolute; inset: 0 0 auto; height: 1px;
  background: linear-gradient(90deg, transparent, var(--verre-lueur), transparent);
  pointer-events: none;
}
.btn-tel:hover { background: linear-gradient(180deg, rgba(201,168,76,.22), var(--verre-2)); border-color: var(--or); }
.btn-tel svg { color: var(--or); flex: 0 0 15px; }
/* Le numéro reste replié derrière l'icône et se déroule au survol ou à
   la tabulation. On anime `max-width`, pas `display` : un display ne
   s'anime pas, et le lecteur d'écran garde le numéro complet via
   l'aria-label du lien, replié ou non. */
.btn-tel .tel-num {
  display: inline-block; vertical-align: middle; flex: 0 0 auto;
  width: max-content;          /* la boite fait la taille du texte, point */
  max-width: 0; opacity: 0; overflow: hidden;
  transition: max-width var(--t-long), opacity var(--t-court), margin-left var(--t-long);
}
.btn-tel:hover .tel-num,
.btn-tel:focus-visible .tel-num {
  max-width: 12rem; opacity: 1; margin-left: var(--e3);
}
/* Un appareil sans survol n'a aucun moyen de déplier : sur ces
   écrans le lien reste ce qu'il doit être, un appel direct. */
@media (hover: none) { .btn-tel .tel-num { display: none; } }
@media (prefers-reduced-motion: reduce) { .btn-tel .tel-num { transition: none; } }

/* ── Espace client : une icone, comme la loupe ─────────── */
.entete .btn-espace {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--r);
  color: var(--enc-2, #c3ccd9);
  transition: background var(--t-court), color var(--t-court);
}
.entete .btn-espace:hover { background: rgba(255,255,255,.06); color: var(--or); }
/* Elle reste visible la ou « Contact » disparait : un client qui
   vient chercher sa facture n'a pas de second chemin sur un
   ecran etroit. */

/* ── Chiffrage : volontairement discret ────────────────── */
.entete .btn-chiffrage {
  display: inline-flex; align-items: center; gap: 7px;
  height: 40px; padding: 0 var(--e4); margin-inline: var(--e2);
  font-size: .84rem; font-weight: 600; color: var(--or);
  border-radius: var(--r);
  transition: background var(--t-court), color var(--t-court);
}
.entete .btn-chiffrage:hover { background: rgba(201,168,76,.1); color: var(--or-clair); }
.entete .btn-chiffrage svg { transition: transform var(--t); }
.entete .btn-chiffrage:hover svg { transform: translateX(2px); }
@media (max-width: 1320px) { .entete .btn-chiffrage { display: none; } }

@media (max-width: 1080px) { .nav { display: none; } }

/* ══════════════════════════════════════════════════════════
   SÉLECTEUR SEGMENTÉ
   Le composant du tableau de bord Tesla : « Off | On | Night Only ».
   Sert ici à la bascule Particulier / Pro et aux filtres.
   ══════════════════════════════════════════════════════════ */
.segmente {
  display: inline-flex; position: relative;
  background: var(--verre-1);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  backdrop-filter: blur(10px) saturate(160%);
  border: var(--filet-w) solid var(--verre-bord);
  border-radius: var(--r);
  padding: 2px;
}
.segmente a, .segmente button {
  position: relative; z-index: 1;
  padding: 6px 14px;
  font-size: .78rem; font-weight: 600; letter-spacing: .01em;
  color: var(--gris-2); background: none; border: 0; cursor: pointer;
  border-radius: 2px; white-space: nowrap;
  transition: color var(--t);
}
.segmente a:hover, .segmente button:hover { color: var(--txt); }
.segmente .est-actif { color: var(--blanc); }
/* Le curseur glisse : c'est lui qui donne le caractère mécanique */
.segmente-curseur {
  position: absolute; top: 2px; bottom: 2px; left: 2px;
  background: var(--verre-3);
  border: var(--filet-w) solid var(--verre-bord-fort);
  border-radius: 2px;
  transition: transform var(--t), width var(--t);
  pointer-events: none;
}
/* Version compacte de l'en-tête : la bascule ne doit pas peser
   autant que le téléphone, elle sert une fois par visite. */
.entete .segmente { margin-left: var(--e2); }
.entete .segmente a { padding: 7px 14px; font-size: .76rem; }
@media (max-width: 1080px) { .entete .segmente { display: none; } }

/* ══════════════════════════════════════════════════════════
   BOUTONS — angles quasi nuls, aucune ombre
   ══════════════════════════════════════════════════════════ */
.btn {
  /* Forme Tesla : large, pleine, une largeur minimale qui met les deux
     actions à égalité. Un bouton étroit à côté d'un bouton large donne
     l'impression que le second est le vrai choix. */
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  min-width: 168px;
  padding: 13px 28px;
  font-size: .9rem; font-weight: 600; letter-spacing: .005em;
  border-radius: var(--r); border: var(--filet-w) solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: background var(--t-court), color var(--t-court),
              border-color var(--t-court), opacity var(--t-court);
}
/* Tesla n'écrase pas ses boutons au clic : il les atténue. */
.btn:active { opacity: .82; }
.btn--nu { min-width: 0; }
.btn--or { background: var(--or); color: #0A0A0A; }
.btn--or:hover { background: var(--or-clair); }
.btn--blanc { background: var(--blanc); color: #0A0A0A; }
.btn--blanc:hover { background: #E6E8EB; }
.btn--fantome {
  background: var(--verre-1); color: var(--blanc); border-color: var(--verre-bord);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
  position: relative;
}
.btn--fantome::after {
  content: ''; position: absolute; inset: 0 0 auto; height: 1px; border-radius: inherit;
  background: linear-gradient(90deg, transparent, var(--verre-lueur), transparent);
  pointer-events: none;
}
.btn--fantome:hover { background: var(--verre-3); border-color: var(--verre-bord-fort); }
.btn--nu { background: none; color: var(--gris); padding-inline: 0; }
.btn--nu:hover { color: var(--blanc); }
.btn--l { padding: 15px 32px; font-size: .96rem; min-width: 190px; }
/* Sur téléphone, deux actions côte à côte se partagent la largeur —
   comme sur les cartes de tesla.com. */

.btn--bloc { width: 100%; }

.lien-fleche {
  display: inline-flex; align-items: center; gap: var(--e2);
  color: var(--or); font-weight: 600; font-size: .875rem;
}
.lien-fleche svg { transition: transform var(--t); }
.lien-fleche:hover svg { transform: translateX(3px); }

/* ══════════════════════════════════════════════════════════
   RANGÉE DE COMPTEURS
   L'autre composant repris du tableau de bord : un micro-libellé
   au-dessus, la valeur en grand, séparés par des filets verticaux.
   ══════════════════════════════════════════════════════════ */
.compteurs {
  position: relative;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  border: var(--filet-w) solid var(--verre-bord);
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--verre-2), var(--verre-1));
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  backdrop-filter: blur(16px) saturate(170%);
  overflow: hidden;
}
.compteurs::after {
  content: ''; position: absolute; inset: 0 0 auto; height: 1px;
  background: linear-gradient(90deg, transparent, var(--verre-lueur), transparent);
  pointer-events: none;
}
.compteur { padding: var(--e5) var(--e4); border-left: var(--filet-w) solid var(--filet); }
.compteur:first-child { border-left: 0; }
.compteur-val {
  display: block;
  font-size: clamp(1.5rem, 3vw, 2.05rem);
  font-weight: 600; letter-spacing: -.03em; color: var(--blanc);
  line-height: 1.1; margin-top: var(--e2);
  font-variant-numeric: tabular-nums;
}
.compteur-val small { font-size: .5em; font-weight: 500; color: var(--gris); margin-left: 2px; }
.compteur-note { display: block; margin-top: var(--e1); font-size: .76rem; color: var(--gris-2); }
@media (max-width: 760px) {
  .compteurs { grid-auto-flow: row; grid-auto-columns: auto; }
  .compteur { border-left: 0; border-top: var(--filet-w) solid var(--filet); }
  .compteur:first-child { border-top: 0; }
}

/* ══════════════════════════════════════════════════════════
   CARTES
   ══════════════════════════════════════════════════════════ */
.carte {
  position: relative;
  background: linear-gradient(180deg, var(--verre-2), var(--verre-1));
  border: var(--filet-w) solid var(--verre-bord);
  border-radius: var(--r);
  padding: var(--e5);
  transition: border-color var(--t), background var(--t), transform var(--t);
}
/* Arête haute éclairée : le détail qui fait lire « verre » plutôt
   que « rectangle gris ». Posé en ::after pour laisser ::before
   libre aux cartes qui portent déjà un décor. */
.carte::after {
  content: ''; position: absolute; inset: 0 0 auto; height: 1px;
  background: linear-gradient(90deg, transparent,
              var(--verre-lueur) 20%, var(--verre-lueur) 80%, transparent);
  opacity: .55; pointer-events: none;
}
a.carte:hover {
  border-color: var(--verre-bord-fort);
  background: linear-gradient(180deg, var(--verre-3), var(--verre-2));
  transform: translateY(-2px);
}
a.carte:hover::after { opacity: 1; }
.carte-num { font-size: .76rem; font-weight: 600; color: var(--or); letter-spacing: .1em; }
.carte h3 { margin: var(--e3) 0 var(--e2); }
.carte p { font-size: .92rem; }
.carte-pied { margin-top: var(--e4); padding-top: var(--e4); border-top: var(--filet-w) solid var(--filet); }

/* Carte média : image en haut, texte dessous, angles nets */
.carte-media { overflow: hidden; padding: 0; display: flex; flex-direction: column; }
.carte-media-img { aspect-ratio: 16 / 10; background: var(--n2); overflow: hidden; }
.carte-media-img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-long); }
a.carte-media:hover .carte-media-img img { transform: scale(1.03); }
.carte-media-corps { padding: var(--e5); flex: 1; display: flex; flex-direction: column; }
.carte-media-corps .lien-fleche { margin-top: auto; padding-top: var(--e4); }

/* ══════════════════════════════════════════════════════════
   TABLEAU DE CARACTÉRISTIQUES
   Tesla publie ses fiches techniques ainsi : deux colonnes,
   filets fins, valeurs alignées à droite.
   ══════════════════════════════════════════════════════════ */
.specs { width: 100%; border-collapse: collapse; }
.specs th, .specs td { padding: var(--e3) 0; border-bottom: var(--filet-w) solid var(--filet); text-align: left; }
.specs th { font-weight: 500; color: var(--gris); font-size: .9rem; }
.specs td { text-align: right; color: var(--blanc); font-weight: 600; font-variant-numeric: tabular-nums; }
.specs tr:last-child th, .specs tr:last-child td { border-bottom: 0; }

/* ══════════════════════════════════════════════════════════
   HÉROS
   ══════════════════════════════════════════════════════════ */
.heros {
  position: relative;
  min-height: min(88vh, 760px);
  display: flex; align-items: flex-end;
  padding-block: var(--e9) var(--e8);
  border-bottom: var(--filet-w) solid var(--filet);
  overflow: hidden;
}
.heros-fond { position: absolute; inset: 0; z-index: 0; }
.heros-fond img { width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.heros-fond::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,11,18,.55) 0%, rgba(7,11,18,.75) 55%, var(--n0) 100%);
}

/* Variante « forte » du premier écran : l'image respire davantage et
   le voile ne la couvre plus que là où court le texte. Un dégradé
   uniforme protège la lisibilité mais éteint la photo — ici on la
   protège en biais, à gauche, où se trouvent le titre et les boutons. */
.heros-fond--fort img { opacity: .82; }
.heros-fond--fort::after {
  background:
    linear-gradient(100deg, rgba(7,11,18,.94) 0%, rgba(7,11,18,.82) 34%,
                    rgba(7,11,18,.42) 62%, rgba(7,11,18,.24) 100%),
    linear-gradient(180deg, rgba(7,11,18,.55) 0%, transparent 22%,
                    transparent 62%, var(--n0) 100%);
}
@media (max-width: 860px) {
  /* Sur téléphone le texte occupe toute la largeur : le dégradé
     redevient vertical, sinon le bas du titre passe sur la partie
     claire de la photo. */
  .heros-fond--fort::after {
    background: linear-gradient(180deg, rgba(7,11,18,.72) 0%, rgba(7,11,18,.5) 30%,
                                rgba(7,11,18,.86) 72%, var(--n0) 100%);
  }
  .heros-fond--fort img { opacity: .9; }
}
/* ── Premier écran immersif (solutions et secteurs) ──────────────
   L'image tenait 88 vh plafonnés à 760 px, à moitié éteinte : sur un
   grand écran elle devenait une bande, pas une vue. Ici elle occupe
   l'écran — mais on garde la mesure du site pro : arêtes vives
   (--r: 3px), pas d'arrondi, et SURTOUT on ne retire aucun texte.
   Un décideur qui compare trois prestataires a besoin du chapeau et
   des chiffres dès le premier écran ; le dépouillement du site
   particuliers serait ici un défaut, pas une qualité.
   On plafonne quand même à 880 px sur ordinateur : au-delà, le
   contenu commencerait trop bas pour une lecture professionnelle. */
.heros--immersif { min-height: min(92vh, 880px); }
@media (max-width: 860px) {
  /* svh et non vh : sur iOS la barre du navigateur mange sinon le bas
     du hero, et les boutons passent sous la ligne de flottaison. */
  .heros--immersif { min-height: 100svh; }
}

.heros-in { position: relative; z-index: 1; width: 100%; }
.heros h1 { max-width: 18ch; }
.heros .chapeau { margin-top: var(--e5); }
.heros-actions { display: flex; flex-wrap: wrap; gap: var(--e3); margin-top: var(--e6); }
.heros .compteurs { margin-top: var(--e8); }

/* Héros compact des pages intérieures */
.heros--page { min-height: auto; padding-block: calc(var(--entete-h) + var(--e8)) var(--e8); }
.heros--outil { padding-block: calc(var(--entete-h) + var(--e5)) var(--e5); }
.heros--outil h1 { font-size: clamp(1.9rem, 3.4vw, 2.5rem); }
.heros--outil .chapeau { margin-top: var(--e3); font-size: 1rem; }
.heros--outil .ariane { margin-bottom: var(--e3); }
.heros--page h1 { max-width: 22ch; }

/* ══════════════════════════════════════════════════════════
   FIL D'ARIANE
   ══════════════════════════════════════════════════════════ */
.ariane { font-size: .8rem; color: var(--gris-2); margin-bottom: var(--e4); }
.ariane a { color: var(--gris); }
.ariane a:hover { color: var(--blanc); }
.ariane span { margin-inline: var(--e2); opacity: .5; }

/* ══════════════════════════════════════════════════════════
   ÉTIQUETTES
   ══════════════════════════════════════════════════════════ */
.etiq {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px; border-radius: 2px;
  font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  background: var(--n3); color: var(--gris); border: var(--filet-w) solid var(--filet);
}
.etiq--or { background: rgba(201,168,76,.12); color: var(--or); border-color: rgba(201,168,76,.3); }

/* ══════════════════════════════════════════════════════════
   ACCORDÉON
   ══════════════════════════════════════════════════════════ */
.acc { border-top: var(--filet-w) solid var(--filet); }
.acc-item { border-bottom: var(--filet-w) solid var(--filet); }
.acc-tete {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--e4);
  padding: var(--e5) 0; background: none; border: 0; cursor: pointer; text-align: left;
  font-size: 1rem; font-weight: 600; color: var(--blanc);
  transition: color var(--t-court);
}
.acc-tete:hover { color: var(--or); }
.acc-signe { position: relative; width: 14px; height: 14px; flex: 0 0 14px; }
.acc-signe::before, .acc-signe::after {
  content: ''; position: absolute; background: currentColor; transition: transform var(--t);
}
.acc-signe::before { inset: 6px 0 auto; height: 1.5px; }
.acc-signe::after { inset: 0 6px auto; width: 1.5px; height: 14px; }
.acc-item[open] .acc-signe::after { transform: scaleY(0); }
.acc-corps { padding-bottom: var(--e5); }
.acc-corps p { max-width: 72ch; }

/* ══════════════════════════════════════════════════════════
   PIED DE PAGE
   ══════════════════════════════════════════════════════════ */
.pied { border-top: var(--filet-w) solid var(--filet); padding-block: var(--e8) var(--e6); background: var(--n1); }
.pied-grille { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--e6); }
@media (max-width: 900px) { .pied-grille { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pied-grille { grid-template-columns: 1fr; } }
.pied h4 { font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--gris-2); margin-bottom: var(--e4); font-weight: 600; }
.pied ul { list-style: none; display: flex; flex-direction: column; gap: var(--e2); }
.pied a { font-size: .9rem; color: var(--gris); transition: color var(--t-court); }
.pied a:hover { color: var(--blanc); }
.pied-bas {
  margin-top: var(--e8); padding-top: var(--e5);
  border-top: var(--filet-w) solid var(--filet);
  display: flex; flex-wrap: wrap; gap: var(--e4); align-items: center;
  font-size: .8rem; color: var(--gris-2);
}
.pied-bas nav { margin-left: auto; display: flex; gap: var(--e4); flex-wrap: wrap; }

/* ══════════════════════════════════════════════════════════
   FORMULAIRE
   ══════════════════════════════════════════════════════════ */
.champ { display: flex; flex-direction: column; gap: var(--e2); margin-bottom: var(--e4); }
.champ label { font-size: .8rem; font-weight: 600; color: var(--txt); }
.champ label span { color: var(--gris-2); font-weight: 400; }
.champ input, .champ select, .champ textarea {
  background: var(--n0);
  border: var(--filet-w) solid var(--filet-fort);
  border-radius: var(--r);
  padding: 12px 14px; font-size: .94rem; color: var(--blanc);
  transition: border-color var(--t-court);
}
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: 0; border-color: var(--or); }
.champ textarea { resize: vertical; min-height: 110px; }
.champ-erreur { color: var(--rouge); font-size: .8rem; }

/* Choix multiple façon cases mécaniques */
.choix { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--e2); }
.choix label {
  display: flex; align-items: center; gap: var(--e2);
  padding: 11px 13px; cursor: pointer;
  background: var(--n1); border: var(--filet-w) solid var(--filet); border-radius: var(--r);
  font-size: .875rem; font-weight: 500;
  transition: border-color var(--t-court), background var(--t-court);
}
.choix label:hover { border-color: var(--filet-fort); }
.choix input { accent-color: var(--or); width: 15px; height: 15px; }
.choix input:checked + span { color: var(--blanc); }
.choix label:has(input:checked) { border-color: var(--or); background: rgba(201,168,76,.07); }

/* ══════════════════════════════════════════════════════════
   APPARITION AU DÉFILEMENT
   Déplacement court et rapide. Une animation lente ou élastique
   trahirait immédiatement la direction voulue.
   ══════════════════════════════════════════════════════════ */
.apparait { opacity: 0; transform: translateY(10px); transition: opacity var(--t-long), transform var(--t-long); }
.apparait.est-vu { opacity: 1; transform: none; }
.apparait-1 { transition-delay: 60ms; }
.apparait-2 { transition-delay: 120ms; }
.apparait-3 { transition-delay: 180ms; }
/* Sans JavaScript, tout reste visible : jamais de contenu piégé */
.no-js .apparait { opacity: 1; transform: none; }

/* ══════════════════════════════════════════════════════════
   MENU MOBILE
   ══════════════════════════════════════════════════════════ */
.burger {
  display: none; width: 38px; height: 38px; align-items: center; justify-content: center;
  background: none; border: var(--filet-w) solid var(--filet); border-radius: var(--r); cursor: pointer;
}
.burger span { display: block; width: 16px; height: 1.5px; background: var(--blanc); position: relative; transition: background var(--t); }
.burger span::before, .burger span::after {
  content: ''; position: absolute; left: 0; width: 16px; height: 1.5px; background: var(--blanc);
  transition: transform var(--t), top var(--t);
}
.burger span::before { top: -5px; }
.burger span::after { top: 5px; }
.menu-ouvert .burger span { background: transparent; }
.menu-ouvert .burger span::before { top: 0; transform: rotate(45deg); }
.menu-ouvert .burger span::after { top: 0; transform: rotate(-45deg); }
@media (max-width: 1080px) {
  .burger { display: flex; }
  /* Une seule ligne, et le même ordre que sur privteint.fr : la
     marque, puis le moyen d'appeler, puis l'action. Passer d'un site
     à l'autre ne doit pas donner l'impression de changer d'entreprise.
     La recherche descend dans le menu : elle n'est pas ce qu'on vient
     faire en arrivant. */
  .entete-in { gap: var(--e2); }
  /* Trois éléments, pas un de plus : la marque, le moyen d'appeler,
     le menu. « Chiffrage » n'est PAS ici — il est déjà porté par le
     bouton fixe en bas d'écran et par le bas du menu. Trois endroits
     pour la même action, c'est deux de trop. */
  .btn-rech { display: none; }
  .btn-tel { height: 42px; width: 42px; padding: 0; justify-content: center; }
  .btn-tel .tel-num { display: none !important; }
  .entete .btn-chiffrage { display: none; }
}

.menu-mobile {
  position: fixed; inset: var(--entete-h) 0 0; z-index: 99;
  /* La barre d'adresse du navigateur mobile recouvre le bas de
     l'écran : sans cette réserve, « Demander un chiffrage » se
     retrouve à moitié caché — ce qu'on voyait sur la capture. */
  background: linear-gradient(180deg, rgba(12,18,32,.96), rgba(7,11,18,.98));
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  backdrop-filter: blur(26px) saturate(180%);
  padding: var(--e5) var(--gouttiere) calc(var(--e9) + env(safe-area-inset-bottom) + 96px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity var(--t), transform var(--t), visibility var(--t);
}
.menu-ouvert .menu-mobile { opacity: 1; visibility: visible; transform: none; }
.menu-mobile .segmente { display: flex; width: 100%; margin-bottom: var(--e5); }
.menu-mobile .segmente a { flex: 1; text-align: center; padding: 10px 12px; font-size: .85rem; }
.menu-mobile a {
  display: block; padding: var(--e4) 0;
  border-bottom: var(--filet-w) solid var(--filet);
  font-size: 1.06rem; font-weight: 500; color: var(--txt);
}
.menu-mobile a:hover { color: var(--or); }
.menu-mobile .btn { margin-top: var(--e6); }

/* ══════════════════════════════════════════════════════════
   BANDEAU D'APPEL
   ══════════════════════════════════════════════════════════ */
.appel {
  border: var(--filet-w) solid var(--filet);
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--n2), var(--n1));
  padding: clamp(var(--e6), 5vw, var(--e8));
  text-align: center;
}
.appel h2 { max-width: 20ch; margin-inline: auto; }
.appel p { margin: var(--e4) auto 0; max-width: 56ch; }
.appel .heros-actions { justify-content: center; margin-top: var(--e6); }

/* ══════════════════════════════════════════════════════════
   DIVERS
   ══════════════════════════════════════════════════════════ */
.filet { height: var(--filet-w); background: var(--filet); border: 0; }
.centre { text-align: center; }
.gris { color: var(--gris); }
.or { color: var(--or); }
.masque { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ══════════════════════════════════════════════════════════
   MENU À TIROIR (MEGA)
   ------------------------------------------------------------
   Un panneau de verre qui descend sous la barre. Il ne se
   déclenche PAS au simple survol : un tiroir qui s'ouvre quand
   la souris passe par accident est la première cause de menus
   détestés. Il s'ouvre au clic, et se ferme au clic ailleurs,
   à Échap, ou quand la souris quitte franchement la zone.
   ══════════════════════════════════════════════════════════ */
.mega {
  position: absolute; top: calc(100% + 1px); left: 0; right: 0; z-index: 98;
  background: linear-gradient(180deg, rgba(12,18,32,.97), rgba(7,11,18,.96));
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  backdrop-filter: blur(26px) saturate(180%);
  border-bottom: var(--filet-w) solid var(--verre-bord);
  box-shadow: var(--verre-ombre);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--t), transform var(--t), visibility var(--t);
}
.nav-item.est-ouvert .mega { opacity: 1; visibility: visible; transform: none; }

/* Un voile assombrit la page sous le tiroir. Sans lui, le grand titre
   du héros transparaît à travers le verre et rend les libellés
   pénibles à lire : la translucidité est belle, l'illisibilité non. */
.mega-voile {
  position: fixed; inset: var(--entete-h) 0 0; z-index: 97;
  background: rgba(4,5,7,.5);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--t), visibility var(--t);
  pointer-events: none;
}
body.tiroir-ouvert .mega-voile { opacity: 1; visibility: visible; }
@media (max-width: 1080px) { .mega-voile { display: none; } }
.mega-in {
  max-width: var(--largeur); margin: 0 auto;
  padding: var(--e6) var(--gouttiere) var(--e6);
  display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: var(--e7);
  align-items: start;
}
@media (max-width: 1180px) { .mega-in { grid-template-columns: minmax(0, 1fr); gap: var(--e5); } }

/* La rangée de vignettes : l'image d'abord, le nom dessous.
   C'est la façon dont tesla.com montre sa gamme, et ça marche parce
   qu'on reconnaît un produit avant de lire son nom. */
.mega-vitrine {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--e3);
}
.mega--large .mega-vitrine { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1180px) {
  .mega-vitrine, .mega--large .mega-vitrine { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.mega-vig {
  display: block; text-align: center; padding: var(--e2);
  border-radius: var(--r); border: var(--filet-w) solid transparent;
  transition: background var(--t-court), border-color var(--t-court);
}
.mega-vig:hover { background: var(--verre-2); border-color: var(--verre-bord); }
.mega-vig-img {
  display: block; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: var(--r); background: var(--n2);
  border: var(--filet-w) solid var(--verre-bord);
  margin-bottom: var(--e3);
}
.mega-vig-img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-long); }
.mega-vig:hover .mega-vig-img img { transform: scale(1.05); }
.mega-vig strong { display: block; font-size: .88rem; font-weight: 600; color: var(--blanc); }
.mega-vig-txt {
  display: block; margin-top: 3px; font-size: .76rem; line-height: 1.4; color: var(--gris-2);
}
.mega-vig-prix {
  display: block; margin-top: var(--e2); font-size: .74rem; font-weight: 600; color: var(--or);
}

/* Colonne de droite : ce qui se lit, pas ce qui s'achète. */
.mega-liens {
  display: flex; flex-direction: column; gap: 2px;
  padding-left: var(--e6); border-left: var(--filet-w) solid var(--filet);
}
@media (max-width: 1180px) {
  .mega-liens {
    padding-left: 0; border-left: 0; padding-top: var(--e4);
    border-top: var(--filet-w) solid var(--filet);
    display: grid; grid-template-columns: repeat(3, 1fr);
  }
}
.mega-liens a {
  padding: 7px 0; font-size: .85rem; color: var(--gris);
  transition: color var(--t-court);
}
.mega-liens a:hover { color: var(--blanc); }

.mega-lien {
  display: block; padding: var(--e3); border-radius: var(--r);
  border: var(--filet-w) solid transparent;
  transition: background var(--t-court), border-color var(--t-court);

  /* Deux corrections indispensables, mesurées :
     · `.nav a { white-space: nowrap }` s'applique aussi ici — sans le
       remettre à `normal`, chaque description reste sur une ligne.
     · un élément de grille ne descend jamais sous son `min-width: auto`,
       c'est-à-dire sous sa largeur de contenu minimale. Avec du texte
       qui ne peut pas se couper, la colonne fait la largeur de la
       phrase : le tiroir mesurait 3 403 px pour une fenêtre de 1 440. */
  white-space: normal;
  min-width: 0;
}
.mega-lien:hover { background: var(--verre-2); border-color: var(--verre-bord); }
.mega-lien strong { display: block; font-size: .93rem; font-weight: 600; color: var(--blanc); }
.mega-lien span { display: block; margin-top: 3px; font-size: .8rem; color: var(--gris-2); line-height: 1.45; }
.mega-pied {
  border-top: var(--filet-w) solid var(--filet);
  background: rgba(0,0,0,.22);
  font-size: .82rem; color: var(--gris-2);
}
.mega-pied .enveloppe {
  display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center;
  padding-block: var(--e4);
}
.mega-pied a { color: var(--or); font-weight: 600; }
.mega-pied a:hover { color: var(--or-clair); }
@media (max-width: 1080px) { .mega { display: none; } }

/* ══════════════════════════════════════════════════════════
   RECHERCHE
   ------------------------------------------------------------
   Elle indexe TOUT le site : solutions, secteurs, pages et
   articles. L'ordre des groupes n'est pas alphabétique, il est
   utile : on cherche d'abord ce qu'on peut acheter, ensuite son
   propre métier, et seulement après la documentation.
   ══════════════════════════════════════════════════════════ */
.rech-voile {
  position: fixed; inset: 0; z-index: 150;
  opacity: 0; visibility: hidden;
  transition: opacity var(--t), visibility var(--t);
}
.rech-ouverte .rech-voile { opacity: 1; visibility: visible; }

/* Le panneau se DÉPLIE depuis le bouton de la barre : il s'ouvre
   depuis le coin haut-droit, là où l'on vient de cliquer, plutôt que
   d'apparaître au milieu sans lien avec le geste. */
.rech-boite {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(12,18,32,.985), rgba(7,11,18,.99));
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  transform-origin: calc(100% - 150px) 0;
  transform: scale(.94) translateY(-18px);
  opacity: 0;
  transition: transform var(--t-long), opacity var(--t);
}
.rech-ouverte .rech-boite { transform: none; opacity: 1; }

.rech-haut {
  flex: 0 0 auto; height: var(--entete-h);
  display: flex; align-items: center; justify-content: space-between;
  max-width: 1440px; width: 100%; margin: 0 auto;
  padding-inline: clamp(20px, 4vw, 48px);
}
.rech-fermer {
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  background: var(--verre-1); border: var(--filet-w) solid var(--verre-bord);
  border-radius: var(--r); color: var(--gris); cursor: pointer;
  transition: background var(--t-court), color var(--t-court);
}
.rech-fermer:hover { background: var(--verre-3); color: var(--blanc); }

/* Le champ au centre : c'est la seule chose à faire ici, rien ne doit
   se disputer l'attention avec lui. */
.rech-centre {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  width: 100%; max-width: 760px; margin: 0 auto;
  padding: clamp(var(--e6), 9vh, 108px) var(--e5) 0;
}
.rech-champ-boite {
  flex: 0 0 auto; display: flex; align-items: center; gap: var(--e4);
  padding: var(--e4) var(--e5);
  background: var(--verre-1);
  border: var(--filet-w) solid var(--verre-bord-fort);
  border-radius: var(--r);
  transition: border-color var(--t-court);
}
.rech-champ-boite:focus-within { border-color: var(--or); }
.rech-champ-boite svg { flex: 0 0 20px; color: var(--gris-2); }
#rech-champ {
  flex: 1; min-width: 0; background: none; border: 0; outline: 0;
  font-size: 1.2rem; color: var(--blanc); padding: 6px 0;
}
#rech-champ::placeholder { color: var(--gris-2); }
.rech-corps {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: var(--e3) 0 var(--e6);
}
.rech-groupe-titre {
  padding: var(--e5) var(--e2) var(--e2);
  font-size: 10.5px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gris-2);
}
.rech-res {
  display: flex; align-items: flex-start; gap: var(--e3);
  padding: var(--e3) var(--e4);
  border-radius: var(--r);
  border-left: 2px solid transparent;
  transition: background var(--t-court), border-color var(--t-court);
}
.rech-res:hover, .rech-res.est-vise { background: var(--verre-2); border-left-color: var(--or); }
.rech-res-txt { min-width: 0; }
.rech-res strong { display: block; font-size: .93rem; font-weight: 600; color: var(--blanc); }
.rech-res span { display: block; margin-top: 2px; font-size: .8rem; color: var(--gris-2); line-height: 1.45; }
.rech-res mark { background: rgba(201,168,76,.24); color: var(--or-clair); border-radius: 2px; padding: 0 2px; }
.rech-res .etiq { flex: 0 0 auto; margin-top: 2px; }
.rech-vide { padding: var(--e8) var(--e4); text-align: center; color: var(--gris-2); font-size: .95rem; }
.rech-vide strong { display: block; color: var(--txt); margin-bottom: var(--e2); font-size: .95rem; }
.rech-pied {
  flex: 0 0 auto;
  padding: var(--e4) clamp(20px, 4vw, 48px);
  border-top: var(--filet-w) solid var(--filet);
  display: flex; flex-wrap: wrap; gap: var(--e5); justify-content: center;
  font-size: .74rem; color: var(--gris-2);
}
@media (max-width: 700px) { .rech-pied { display: none; } }
.rech-pied kbd {
  font: inherit; padding: 1px 5px; border-radius: 2px;
  background: var(--verre-2); border: var(--filet-w) solid var(--verre-bord);
}
.rech-sugg { display: flex; flex-wrap: wrap; gap: var(--e2); padding: var(--e3) var(--e2) var(--e4); }
.rech-sugg button {
  padding: 6px 11px; border-radius: 2px; cursor: pointer;
  background: var(--verre-1); border: var(--filet-w) solid var(--verre-bord);
  color: var(--gris); font-size: .8rem;
  transition: background var(--t-court), color var(--t-court);
}
.rech-sugg button:hover { background: var(--verre-3); color: var(--blanc); }
/* Le corps ne défile plus derrière la recherche ouverte */
body.rech-ouverte { overflow: hidden; }

/* ══════════════════════════════════════════════════════════
   FENÊTRE D'OFFRE
   ------------------------------------------------------------
   Règles que l'on s'impose, parce qu'un bandeau mal réglé fait
   plus de mal que de bien :
     · ordinateur uniquement — sur mobile il masquerait la page
     · après un vrai signe d'intérêt, jamais à l'arrivée
     · une fois, puis plus rien pendant deux semaines
     · fermable au clic, à Échap, et en cliquant à côté
   ══════════════════════════════════════════════════════════ */
.offre-voile {
  position: fixed; inset: 0; z-index: 140;
  background: rgba(4,5,7,.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-long), visibility var(--t-long);
  display: flex; align-items: center; justify-content: center; padding: var(--e5);
}
.offre-ouverte .offre-voile { opacity: 1; visibility: visible; }
.offre {
  position: relative; width: 100%; max-width: 560px;
  background: linear-gradient(180deg, rgba(18,26,42,.97), rgba(12,18,32,.97));
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  border: var(--filet-w) solid var(--verre-bord-fort);
  border-radius: var(--r-l);
  box-shadow: var(--verre-ombre);
  padding: var(--e7);
  transform: translateY(14px) scale(.985);
  transition: transform var(--t-long);
}
.offre-ouverte .offre { transform: none; }
.offre::after {
  content: ''; position: absolute; inset: 0 0 auto; height: 1px;
  background: linear-gradient(90deg, transparent, var(--verre-lueur), transparent);
  pointer-events: none;
}
.offre h2 { font-size: clamp(1.4rem, 2.4vw, 1.85rem); margin-top: var(--e3); }
.offre > p { margin-top: var(--e4); font-size: .95rem; }
.offre-liste { margin-top: var(--e5); display: flex; flex-direction: column; gap: var(--e2); }
.offre-item {
  display: flex; align-items: flex-start; gap: var(--e3);
  padding: var(--e3) var(--e4);
  background: var(--verre-1);
  border: var(--filet-w) solid var(--verre-bord);
  border-radius: var(--r);
  transition: background var(--t-court), border-color var(--t-court);
}
.offre-item:hover { background: var(--verre-3); border-color: var(--verre-bord-fort); }
.offre-item strong { display: block; font-size: .9rem; color: var(--blanc); }
.offre-item span { display: block; margin-top: 2px; font-size: .8rem; color: var(--gris-2); line-height: 1.45; }
.offre-item .or { flex: 0 0 auto; font-size: .82rem; font-weight: 700; margin-top: 1px; }
.offre-actions { margin-top: var(--e6); display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center; }
.offre-fermer {
  position: absolute; top: var(--e4); right: var(--e4);
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  background: var(--verre-1); border: var(--filet-w) solid var(--verre-bord);
  border-radius: var(--r); color: var(--gris); cursor: pointer; font-size: 15px; line-height: 1;
  transition: background var(--t-court), color var(--t-court);
}
.offre-fermer:hover { background: var(--verre-3); color: var(--blanc); }
.offre-note { margin-top: var(--e4); font-size: .74rem; color: var(--gris-2); }
/* Jamais sur téléphone : la fenêtre couvrirait la page entière */
@media (max-width: 860px) { .offre-voile { display: none !important; } }

/* ══════════════════════════════════════════════════════════
   CHIFFRAGE PAS À PAS
   ------------------------------------------------------------
   Une étape à l'écran, une seule. Un choix fait avance tout seul
   après une courte pause : assez pour voir sa sélection se
   marquer, trop court pour avoir le temps de s'ennuyer.
   ══════════════════════════════════════════════════════════ */
.chiffrage {
  position: relative;
  /* La demande occupe l'écran, et rien d'autre. Le reste de la page
     existe toujours — les moteurs le lisent, et on y revient après —
     mais il commence FRANCHEMENT sous la ligne de flottaison. Voir un
     bout de la section suivante pendant qu'on remplit un formulaire,
     c'est exactement ce qui fait décrocher. `dvh` et non `vh` : sur
     un téléphone, la barre du navigateur mange une partie de `vh`. */
  /* On retire aussi la hauteur du héros compact (≈ 220 px) : sans
     ça, hero + bloc dépassent d'un écran et la section suivante
     réapparaît à mi-hauteur. */
  min-height: calc(100dvh - var(--entete-h) - 232px);
  display: flex; flex-direction: column;
}
#chi-etapes {
  flex: 1;
  display: flex; flex-direction: column;
  /* `flex-start` et non `center`. Le bloc est centré dans SA boîte,
     mais cette boîte commence sous le héros : le centrer y creusait
     un vide de 400 px au-dessus de la première question. Le contenu
     part donc du haut de sa zone, ce qui le place naturellement au
     milieu de l'écran. */
  justify-content: flex-start;
  padding-block: var(--e5);
}
@media (max-width: 860px) {
  /* Sur téléphone, l'écran est déjà rempli : centrer ne fait que
     créer du vide en haut et en bas. On repart du haut. */
  #chi-etapes { justify-content: flex-start; padding-block: var(--e4); }
  .chiffrage { min-height: calc(100dvh - var(--entete-h) - var(--e6)); }

  /* Le héros d'un OUTIL n'a pas à occuper la moitié du premier écran :
     le visiteur vient remplir, pas lire. Titre seul, chapeau retiré. */
  .heros--outil { padding-block: calc(var(--entete-h) + var(--e4)) var(--e4); }
  .heros--outil .chapeau { display: none; }
  .heros--outil .ariane { display: none; }
  .heros--outil h1 { font-size: clamp(1.6rem, 7vw, 2.1rem); }
  .heros--outil .t-micro { font-size: 10px; }
}
/* Sur les écrans hauts, on ne veut pas que trois cartes se perdent au
   milieu de 900 px de vide : le contenu se centre, sans s'étirer. */
.chi-etape.est-active { width: 100%; }
/* La première question doit être visible sans défiler. Le rythme
   général du site — 128 px de respiration entre sections — est juste
   pour de la lecture, trop lâche pour un outil. */
.section:has(.chiffrage) { padding-block: var(--e5) var(--e8); }
.chiffrage + * { margin-top: var(--e6); }

.chi-jauge {
  position: sticky; top: var(--entete-h); z-index: 20;
  display: flex; align-items: center; gap: var(--e4);
  padding: var(--e4) 0;
  background: linear-gradient(180deg, rgba(8,9,11,.92), rgba(8,9,11,.7) 70%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);

  /* Le dégradé déborde sous la jauge et couvre le haut de l'étape.
     Sans cette ligne, un bouton qui se retrouve sous cette zone
     reçoit un clic… avalé par un bandeau décoratif. Un élément
     purement visuel ne doit jamais intercepter un geste. */
  pointer-events: none;
}
.chi-jauge > * { pointer-events: auto; }

/* Quand le navigateur amène une étape à l'écran, il doit laisser la
   place de l'en-tête ET de la jauge au-dessus — sinon le contenu
   arrive caché derrière. */
.chi-etape, .chi-actions, .chi-prix {
  scroll-margin-top: calc(var(--entete-h) + 96px);
}
.chi-jauge-piste { flex: 1; height: 2px; background: var(--filet); border-radius: 2px; overflow: hidden; }
.chi-jauge-part {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--or-sombre), var(--or));
  transition: width var(--t-long);
}
.chi-jauge-txt {
  font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gris-2); white-space: nowrap; font-variant-numeric: tabular-nums;
}

.chi-etape { display: none; }
.chi-etape.est-active { display: block; animation: chi-entre var(--t-long) both; }
@keyframes chi-entre {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
/* Sortie vers la gauche quand on avance, vers la droite quand on
   recule : le sens du mouvement dit dans quelle direction on va. */
.chi-etape.part-avant { animation: chi-sort-g 180ms both; }
.chi-etape.part-arriere { animation: chi-sort-d 180ms both; }
@keyframes chi-sort-g { to { opacity: 0; transform: translateX(-22px); } }
@keyframes chi-sort-d { to { opacity: 0; transform: translateX(22px); } }
@media (prefers-reduced-motion: reduce) {
  .chi-etape.est-active, .chi-etape.part-avant, .chi-etape.part-arriere { animation: none; }
}

.chi-question { font-size: clamp(1.35rem, 3vw, 2rem); letter-spacing: -.028em; }
.chi-aide { margin-top: var(--e3); color: var(--gris); max-width: 58ch; }

/* Grands choix cliquables : c'est eux qui font avancer */
.chi-choix { display: grid; gap: var(--e3); margin-top: var(--e6); }
.chi-choix--2 { grid-template-columns: repeat(2, 1fr); }
.chi-choix--3 { grid-template-columns: repeat(3, 1fr); }
.chi-choix--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px) { .chi-choix--3, .chi-choix--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .chi-choix { grid-template-columns: 1fr !important; } }

.chi-carte {
  position: relative; text-align: left; cursor: pointer;
  padding: var(--e5);
  background: linear-gradient(180deg, var(--verre-2), var(--verre-1));
  border: var(--filet-w) solid var(--verre-bord);
  border-radius: var(--r);
  transition: border-color var(--t-court), background var(--t-court), transform var(--t-court);
}
.chi-carte::after {
  content: ''; position: absolute; inset: 0 0 auto; height: 1px;
  background: linear-gradient(90deg, transparent, var(--verre-lueur), transparent);
  opacity: .5; pointer-events: none;
}
.chi-carte:hover { border-color: var(--verre-bord-fort); background: linear-gradient(180deg, var(--verre-3), var(--verre-2)); }
.chi-carte:active { transform: scale(.99); }
.chi-carte.est-choisi { border-color: var(--or); background: rgba(201,168,76,.1); }
.chi-carte-ico { display: block; width: 24px; height: 24px; color: var(--or); margin-bottom: var(--e3); }
.chi-carte strong { display: block; font-size: 1rem; font-weight: 600; color: var(--blanc); }
.chi-carte span { display: block; margin-top: var(--e2); font-size: .85rem; color: var(--gris); line-height: 1.5; }
.chi-carte em { display: block; margin-top: var(--e3); font-style: normal; font-size: .78rem; color: var(--or); font-weight: 600; }

/* Marque de sélection : une coche qui apparaît le temps que
   l'étape suivante prenne la main. */
.chi-coche {
  position: absolute; top: var(--e4); right: var(--e4);
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--or); color: #0A0A0A;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(.6);
  transition: opacity var(--t-court), transform var(--t-court);
}
.chi-carte.est-choisi .chi-coche { opacity: 1; transform: none; }

.chi-actions {
  margin-top: var(--e7); padding-top: var(--e5);
  border-top: var(--filet-w) solid var(--filet);
  display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center;
}
.chi-actions .chi-retour { margin-right: auto; }

/* ── Le prix qui se met à jour en direct ────────────────── */
.chi-prix {
  position: relative; margin-top: var(--e6);
  padding: var(--e5);
  background: linear-gradient(180deg, rgba(201,168,76,.13), var(--verre-1));
  border: var(--filet-w) solid rgba(201,168,76,.32);
  border-radius: var(--r);
}
.chi-prix::after {
  content: ''; position: absolute; inset: 0 0 auto; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,168,76,.6), transparent);
  pointer-events: none;
}
.chi-prix-val {
  display: block; margin-top: var(--e2);
  font-size: clamp(1.8rem, 4.2vw, 2.6rem); font-weight: 600;
  letter-spacing: -.035em; color: var(--blanc); line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.chi-prix-val small { font-size: .42em; font-weight: 500; color: var(--gris); margin-left: 4px; }
.chi-prix-val .etoile { color: var(--or); font-size: .5em; vertical-align: super; }
.chi-prix-detail {
  margin-top: var(--e4); padding-top: var(--e4);
  border-top: var(--filet-w) solid rgba(201,168,76,.22);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--e3);
}
.chi-prix-detail div span { display: block; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gris-2); }
.chi-prix-detail div strong { display: block; margin-top: 2px; font-size: .95rem; color: var(--txt); font-variant-numeric: tabular-nums; }
.chi-mention { margin-top: var(--e4); font-size: .76rem; line-height: 1.6; color: var(--gris-2); }
.chi-mention .etoile { color: var(--or); font-weight: 700; }

/* ── Récapitulatif ──────────────────────────────────────── */
.chi-recap { margin-top: var(--e5); }
.chi-recap-ligne {
  display: flex; justify-content: space-between; gap: var(--e4);
  padding: var(--e3) 0; border-bottom: var(--filet-w) solid var(--filet);
  font-size: .89rem;
}
.chi-recap-ligne:last-child { border-bottom: 0; }
.chi-recap-ligne span { color: var(--gris); }
.chi-recap-ligne strong { color: var(--blanc); font-weight: 600; text-align: right; }
.chi-recap-modif {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--or); font-size: .78rem; font-weight: 600; text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Photos ─────────────────────────────────────────────── */
.chi-photos { margin-top: var(--e4); }
.chi-depot {
  display: flex; flex-direction: column; align-items: center; gap: var(--e2);
  padding: var(--e6) var(--e4); cursor: pointer; text-align: center;
  background: var(--verre-1);
  border: 1px dashed var(--verre-bord-fort);
  border-radius: var(--r);
  color: var(--gris); font-size: .86rem;
  transition: background var(--t-court), border-color var(--t-court);
}
.chi-depot:hover, .chi-depot.est-survole { background: var(--verre-3); border-color: var(--or); color: var(--blanc); }
.chi-depot svg { color: var(--or); }
.chi-vignettes { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e3); }
.chi-vignette { position: relative; width: 78px; height: 78px; border-radius: var(--r); overflow: hidden; border: var(--filet-w) solid var(--verre-bord); }
.chi-vignette img { width: 100%; height: 100%; object-fit: cover; }
.chi-vignette button {
  position: absolute; top: 2px; right: 2px; width: 19px; height: 19px;
  background: rgba(8,9,11,.8); border: 0; border-radius: 2px;
  color: #fff; cursor: pointer; font-size: 12px; line-height: 1;
}

/* ── Champs, en version verre ───────────────────────────── */
.champ input, .champ select, .champ textarea {
  background: var(--verre-1);
  border-color: var(--verre-bord);
}
.champ input:hover, .champ select:hover, .champ textarea:hover { border-color: var(--verre-bord-fort); }

.chi-msg {
  margin-top: var(--e4); padding: var(--e4);
  border-radius: var(--r); font-size: .88rem;
  border: var(--filet-w) solid;
}
.chi-msg--erreur { background: rgba(232,33,39,.1); border-color: rgba(232,33,39,.4); color: #FFB4B6; }
.chi-msg--ok { background: rgba(52,199,123,.1); border-color: rgba(52,199,123,.4); color: #9EE9C2; }

.chi-fini { text-align: center; padding: var(--e8) var(--e4); }
.chi-fini-rond {
  width: 58px; height: 58px; margin: 0 auto var(--e5);
  border-radius: 50%; background: rgba(52,199,123,.14);
  border: var(--filet-w) solid rgba(52,199,123,.45);
  display: flex; align-items: center; justify-content: center; color: var(--ok);
  animation: chi-pop var(--t-long) both;
}
@keyframes chi-pop { from { transform: scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }

/* ══════════════════════════════════════════════════════════
   INDEX DES SECTEURS ET DES SOLUTIONS
   ══════════════════════════════════════════════════════════ */
.tuile-liste { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e4); }
@media (max-width: 980px) { .tuile-liste { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .tuile-liste { grid-template-columns: 1fr; } }
.tuile {
  position: relative; display: flex; flex-direction: column;
  padding: var(--e5);
  background: linear-gradient(180deg, var(--verre-2), var(--verre-1));
  border: var(--filet-w) solid var(--verre-bord);
  border-radius: var(--r);
  transition: border-color var(--t), background var(--t), transform var(--t);
}
.tuile::after {
  content: ''; position: absolute; inset: 0 0 auto; height: 1px;
  background: linear-gradient(90deg, transparent, var(--verre-lueur) 20%, var(--verre-lueur) 80%, transparent);
  opacity: .5; pointer-events: none;
}
.tuile:hover { border-color: var(--verre-bord-fort); background: linear-gradient(180deg, var(--verre-3), var(--verre-2)); transform: translateY(-2px); }
.tuile h3 { margin-bottom: var(--e2); }
.tuile p { font-size: .88rem; flex: 1; }
.tuile-mots { display: flex; flex-wrap: wrap; gap: 5px; margin-top: var(--e4); }
.tuile-mot { font-size: .7rem; color: var(--gris-2); background: var(--verre-1); border: var(--filet-w) solid var(--filet); border-radius: 2px; padding: 2px 6px; }
.tuile-pied { margin-top: var(--e4); padding-top: var(--e4); border-top: var(--filet-w) solid var(--filet); }

/* ══════════════════════════════════════════════════════════
   SITUATIONS (pages secteur)
   Deux colonnes de « cas vécus ». Chaque carte doit se
   reconnaître en une ligne : c'est le test de la page.
   ══════════════════════════════════════════════════════════ */
.situations { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e4); }
@media (max-width: 860px) { .situations { grid-template-columns: 1fr; } }
.situation {
  position: relative; padding: var(--e5) var(--e5) var(--e5) var(--e6);
  background: linear-gradient(180deg, var(--verre-2), var(--verre-1));
  border: var(--filet-w) solid var(--verre-bord);
  border-radius: var(--r);
}
.situation::before {
  content: ''; position: absolute; left: 0; top: var(--e5); bottom: var(--e5);
  width: 2px; background: linear-gradient(180deg, var(--or), transparent);
}
.situation h3 { font-size: 1.02rem; }
.situation p { margin-top: var(--e3); font-size: .89rem; }
.situation .lien-fleche { margin-top: var(--e4); }

/* ══════════════════════════════════════════════════════════
   MAILLAGE — « à lire aussi », « autres secteurs »
   ══════════════════════════════════════════════════════════ */
.liens-liste { display: flex; flex-wrap: wrap; gap: var(--e2); }
.lien-pilule {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 13px; border-radius: var(--r);
  background: var(--verre-1);
  border: var(--filet-w) solid var(--verre-bord);
  font-size: .84rem; font-weight: 500; color: var(--txt);
  transition: background var(--t-court), border-color var(--t-court), color var(--t-court);
}
.lien-pilule:hover { background: var(--verre-3); border-color: var(--verre-bord-fort); color: var(--blanc); }
.lien-pilule .etiq { padding: 1px 5px; font-size: .62rem; }

/* ══════════════════════════════════════════════════════════
   BANDEAU D'APPEL — matière de verre
   ══════════════════════════════════════════════════════════ */
.appel {
  position: relative;
  background: linear-gradient(180deg, var(--verre-3), var(--verre-1));
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);
  border-color: var(--verre-bord);
}
.appel::after {
  content: ''; position: absolute; inset: 0 0 auto; height: 1px;
  background: linear-gradient(90deg, transparent, var(--verre-lueur), transparent);
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════
   MENU MOBILE — groupes dépliants
   ══════════════════════════════════════════════════════════ */
/* La loupe a quitté la barre du téléphone : sans cette entrée, la
   recherche ne serait plus atteignable au doigt — seulement au
   clavier, ce qui ne veut rien dire sur un mobile. */
.mm-rech {
  width: 100%; display: flex; align-items: center; gap: var(--e3);
  padding: var(--e4); margin-bottom: var(--e4);
  background: var(--verre-1); border: var(--filet-w) solid var(--verre-bord);
  border-radius: var(--r); color: var(--gris); font-size: .95rem; cursor: pointer;
}
.mm-rech:active { background: var(--verre-3); color: var(--blanc); }

.mm-groupe { border-bottom: var(--filet-w) solid var(--filet); }
.mm-tete {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: var(--e4); padding: var(--e4) 0;
  background: none; border: 0; cursor: pointer; text-align: left;
  font-size: 1.06rem; font-weight: 600; color: var(--txt);
}
.mm-tete svg { transition: transform var(--t); opacity: .6; flex: 0 0 16px; }
.mm-groupe.est-ouvert .mm-tete { color: var(--or); }
.mm-groupe.est-ouvert .mm-tete svg { transform: rotate(180deg); }
.mm-corps { display: none; padding-bottom: var(--e4); }
.mm-groupe.est-ouvert .mm-corps { display: block; animation: chi-entre 240ms both; }
.mm-corps a {
  display: block; padding: var(--e3) 0 var(--e3) var(--e4);
  border-bottom: 0; border-left: 2px solid var(--filet);
  font-size: .96rem; font-weight: 500; color: var(--gris);
}
.mm-corps a:hover { color: var(--blanc); border-left-color: var(--or); }
.menu-mobile .mm-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--e3);
  margin-top: var(--e7);
  padding-top: var(--e5);
  border-top: var(--filet-w) solid var(--filet);
}
/* `.menu-mobile a { display:block }` écrasait le centrage des boutons :
   les libellés se collaient à gauche. On rétablit ici, et on supprime
   le filet du dernier lien pour ne pas doubler celui du bloc d'actions. */
.menu-mobile .mm-actions .btn {
  margin-top: 0; min-width: 0; padding-inline: var(--e3);
  display: inline-flex; justify-content: center; text-align: center;
}
.menu-mobile > a:last-of-type { border-bottom: 0; }
.menu-mobile .mm-groupe:last-of-type { border-bottom: 0; }
/* L'action principale occupe toute la largeur et arrive EN PREMIER :
   c'est elle qu'on vient chercher, les deux autres sont des recours. */
.menu-mobile .mm-actions .btn--bloc { grid-column: 1 / -1; order: -1; }
.menu-mobile .mm-actions .btn--fantome { font-size: .88rem; }

/* ══════════════════════════════════════════════════════════
   CARTE DES VILLES
   ══════════════════════════════════════════════════════════ */
.villes { display: flex; flex-wrap: wrap; gap: var(--e2); }
.ville-pilule {
  padding: 7px 12px; border-radius: var(--r);
  background: var(--verre-1); border: var(--filet-w) solid var(--verre-bord);
  font-size: .84rem; color: var(--txt);
}
.ville-pilule small { color: var(--gris-2); margin-left: 5px; font-variant-numeric: tabular-nums; }

/* ══════════════════════════════════════════════════════════
   VITRINES — la carte de tesla.com
   Image plein cadre, titre par-dessus, deux actions dessous.
   ══════════════════════════════════════════════════════════ */
.vitrines { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e4); }
@media (max-width: 1020px) { .vitrines { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px)  { .vitrines { grid-template-columns: 1fr; } }

.vitrine {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  border: var(--filet-w) solid var(--verre-bord);
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--verre-2), var(--verre-1));
  transition: border-color var(--t), transform var(--t);
}
.vitrine:hover { border-color: var(--verre-bord-fort); transform: translateY(-2px); }
.vitrine-img { position: relative; aspect-ratio: 16 / 11; overflow: hidden; background: var(--n2); }
.vitrine-img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-long); }
.vitrine:hover .vitrine-img img { transform: scale(1.035); }
.vitrine-img::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,9,11,.12) 0%, rgba(8,9,11,.55) 68%, rgba(8,9,11,.94) 100%);
}
.vitrine-txt { position: relative; padding: var(--e5); flex: 1; margin-top: -60px; z-index: 1; }
.vitrine-txt h3 { margin: var(--e2) 0 var(--e3); font-size: 1.3rem; }
.vitrine-txt p { font-size: .9rem; }
.vitrine-chiffre {
  margin-top: var(--e4); padding-top: var(--e4);
  border-top: var(--filet-w) solid var(--filet);
  font-size: .78rem; color: var(--gris-2);
}
.vitrine-chiffre span {
  display: block; font-size: 1.7rem; font-weight: 600; letter-spacing: -.03em;
  color: var(--blanc); font-variant-numeric: tabular-nums; margin-bottom: 2px;
}
.vitrine-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--e2);
  padding: 0 var(--e5) var(--e5);
}
.vitrine-actions .btn { min-width: 0; width: 100%; padding-inline: var(--e3); font-size: .86rem; }

/* ══════════════════════════════════════════════════════════
   BOUTON FIXE EN BAS
   Sur téléphone seulement : sur grand écran, l'en-tête suffit.
   Il s'efface près du pied de page pour ne pas couvrir les liens
   légaux — un bouton qui ne part jamais finit par gêner.
   ══════════════════════════════════════════════════════════ */
.cta-fixe {
  position: fixed; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); z-index: 90;
  display: inline-flex; align-items: stretch;
  background: rgba(232,234,237,.96);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  color: #0A0A0A; font-size: .9rem; font-weight: 600;
  border-radius: var(--r); border: var(--filet-w) solid rgba(255,255,255,.5);
  box-shadow: 0 6px 26px rgba(0,0,0,.45);
  transform: translate(-50%, 130%);
  transition: transform var(--t-long), opacity var(--t);
  opacity: 0; white-space: nowrap; overflow: hidden;
  max-width: min(760px, calc(100vw - 2 * var(--gouttiere)));
}
.cta-fixe-part {
  display: inline-flex; align-items: center; gap: var(--e2);
  padding: 13px 22px; color: inherit; font: inherit; background: none; border: 0;
  transition: background var(--t-court);
  min-width: 0;
}
.cta-fixe-part svg { color: var(--or-sombre); flex: 0 0 auto; }
.cta-fixe-part:hover { background: rgba(10,10,10,.06); }
/* La moitié « recherche » se comporte comme un champ, pas comme un
   bouton : texte discret, et le trait de séparation la borne. */
.cta-fixe-rech { color: #4A4E55; font-weight: 500; cursor: text; }
.cta-fixe-rech span { overflow: hidden; text-overflow: ellipsis; }
.cta-fixe-devis { border-left: 1px solid rgba(10,10,10,.14); }
/* Sur ordinateur, la pastille porte deux propositions : chercher, ou
   demander un prix. Elles ne pèsent pas pareil — l'aplat d'or désigne
   celle qui compte, exactement comme le bouton « Devis » de l'en-tête.
   Sur téléphone la pastille est seule : rien à départager, on garde le
   fond clair. */
@media (min-width: 1081px) {
  .cta-fixe-devis {
    background: var(--or); color: #0A0A0A; font-weight: 700;
    border-left: 0; padding-inline: 24px;
  }
  .cta-fixe-devis:hover { background: var(--or-clair); }
}
body.cta-visible .cta-fixe { transform: translate(-50%, 0); opacity: 1; }
/* Sous le pouce, on ne garde que l'action. */
@media (max-width: 1080px) { .cta-fixe-rech { display: none; }
  .cta-fixe-devis { border-left: 0; } }
/* Le menu, la recherche ou le consentement passent devant. */
body.menu-ouvert .cta-fixe,
body.rech-ouverte .cta-fixe,
body.offre-ouverte .cta-fixe,
body.cookies-visible .cta-fixe { opacity: 0; pointer-events: none; }

/* ══════════════════════════════════════════════════════════
   CONSENTEMENT
   Carte claire, deux réponses de même poids visuel : refuser
   doit être aussi facile qu'accepter.
   ══════════════════════════════════════════════════════════ */
.cookies {
  position: fixed; inset: auto 0 0; z-index: 120;
  padding: var(--e4) var(--gouttiere) max(var(--e4), env(safe-area-inset-bottom));
  transform: translateY(115%);
  transition: transform var(--t-long);
}
body.cookies-visible .cookies { transform: none; }
.cookies-in {
  max-width: var(--largeur); margin: 0 auto;
  display: flex; align-items: center; gap: var(--e6); flex-wrap: wrap;
  padding: var(--e5) var(--e6);
  background: #F4F5F7;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 8px;
  box-shadow: 0 12px 44px rgba(0,0,0,.42);
}
.cookies-txt { flex: 1 1 380px; min-width: 0; }
.cookies-txt strong { display: block; font-size: 1.02rem; font-weight: 600; color: #16181C; }
.cookies-txt p { margin-top: 6px; font-size: .84rem; line-height: 1.55; color: #4A5058; max-width: 78ch; }
.cookies-txt a { color: #16181C; text-decoration: underline; text-underline-offset: 2px; }
.cookies-btns { display: flex; gap: var(--e3); flex: 0 0 auto; }
.cookies-btns .btn { min-width: 132px; padding: 11px 22px; font-size: .875rem; }
.cookies-btns .btn--blanc { background: #16181C; color: #fff; }
.cookies-btns .btn--blanc:hover { background: #303338; }
.cookies-btns .btn--fantome {
  background: #fff; color: #16181C; border-color: rgba(0,0,0,.22);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.cookies-btns .btn--fantome::after { display: none; }
.cookies-btns .btn--fantome:hover { background: #E9EBEE; }
@media (max-width: 760px) {
  .cookies-in { padding: var(--e4); gap: var(--e4); }
  .cookies-btns { width: 100%; }
  .cookies-btns .btn { flex: 1; min-width: 0; }
}

/* Deux actions côte à côte sur téléphone, comme sur les cartes de
   tesla.com. Placé ICI, après la section « héros » : déclarée plus
   haut, la règle était écrasée par `.heros-actions { display: flex }`. */
@media (max-width: 560px) {
  .heros-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e2); }
  .heros-actions .btn { min-width: 0; width: 100%; padding-inline: var(--e3); font-size: .86rem; }
  .heros-actions .btn--nu { grid-column: 1 / -1; }
  .appel .heros-actions { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════
   BANDEAU DES FOURNISSEURS
   Défilement lent et continu. Il s'arrête au survol — sinon on ne
   peut pas lire un nom qui vous intéresse — et il ne démarre pas
   du tout si le visiteur a demandé moins d'animations.
   ══════════════════════════════════════════════════════════ */
.fournisseurs {
  padding-block: var(--e6);
  border-block: var(--filet-w) solid var(--filet);
  overflow: hidden;
}
.fournisseurs .t-micro { margin-bottom: var(--e5); }
.fourn-piste {
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.fourn-defile {
  display: flex; align-items: center; gap: clamp(40px, 6vw, 88px);
  width: max-content;
  animation: fourn-glisse 38s linear infinite;
}
.fourn-piste:hover .fourn-defile { animation-play-state: paused; }
/* Les logos sont écrits deux fois : à −50 %, la seconde moitié est
   exactement là où était la première — la boucle ne se voit pas. */
@keyframes fourn-glisse {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.fourn-logo { flex: 0 0 auto; display: block; }
.fourn-logo img {
  height: 34px; width: auto;
  opacity: .5; filter: grayscale(1);
  transition: opacity var(--t), filter var(--t);
}
.fourn-logo:hover img { opacity: .95; filter: grayscale(0); }
@media (prefers-reduced-motion: reduce) {
  .fourn-defile { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
}
@media (max-width: 640px) { .fourn-logo img { height: 27px; } }

@media (max-width: 560px) {
  /* La barre doit tenir sur l'écran le plus étroit du marché (320 px).
     On réduit le pas, la hauteur et la marque plutôt que de laisser un
     élément déborder : mesuré à 320, 360 et 390 px. */
  :root { --entete-h: 62px; }
  .entete-in { gap: var(--e2); padding-inline: 14px; }
  .marque { gap: 9px; min-width: 0; }
  .marque svg { width: 24px; height: 24px; }
  .marque-txt { font-size: .96rem; gap: 7px; min-width: 0; }
  .marque-txt span { padding-left: 7px; font-size: .62em; letter-spacing: .13em; }
  .btn-tel { height: 40px; width: 40px; }
  .burger { width: 40px; height: 40px; }
}
@media (max-width: 360px) {
  .marque-txt { font-size: .88rem; }
  .marque-txt span { display: none; }   /* « PRO » saute avant le nom */
  .entete-in { gap: 6px; }
}

/* ══════════════════════════════════════════════════════════
   AVIS TRUSTINDEX
   Le petit widget est dessiné pour du blanc : posé sur le fond
   sombre du site, il donnait du gris sur gris. On lui construit
   donc sa bande claire, et on inverse l'encre du titre qui va
   avec — sinon c'est le titre qui devient illisible.
   ══════════════════════════════════════════════════════════ */
.section--clair {
  background: #F4F5F7;
  border-block: var(--filet-w) solid rgba(0,0,0,.08);
  padding-block: clamp(var(--e6), 5vw, var(--e8));
}
.section--clair .t-micro { color: #6B717A; }
.section--clair .t-micro--or { color: #9A7F2F; }
.section--clair h2, .section--clair h3 { color: #12151A; }
.section--clair p { color: #4A5058; }
.section--clair .entete-section { margin-bottom: var(--e5); }

.avis { width: 100%; }
/* Trustindex insère son widget à la place de la balise <script> :
   le conteneur doit donc pouvoir grandir tout seul. */
.avis--petit { max-width: 560px; }
.avis--grand { margin-top: var(--e2); }
.avis iframe, .avis .ti-widget { max-width: 100%; }
@media (max-width: 620px) { .avis--petit { max-width: 100%; } }

@media print {
  .entete, .pied, .menu-mobile, .heros-fond { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ══════════════════════════════════════════════════════════
   CÔTES DES OUVERTURES — saisie facultative
   Repliée par défaut : la demande de chiffrage doit rester
   possible sans sortir un mètre. Dépliée, elle calcule le
   métrage à la place du visiteur.
   ══════════════════════════════════════════════════════════ */
.chi-cotes { margin-top: var(--e5); border-top: var(--filet-w) solid var(--verre-bord); }
.chi-cotes-tete {
  display: flex; align-items: center; gap: var(--e3);
  width: 100%; padding: var(--e4) 0; background: none; border: 0;
  color: var(--gris); font-size: .88rem; font-weight: 500; text-align: left;
  transition: color var(--t-court);
}
.chi-cotes-tete:hover { color: var(--blanc); }
.chi-cotes-tete > span:first-of-type { flex: 1; min-width: 0; }
.chi-cotes-tete svg:first-child { color: var(--or); flex: 0 0 auto; }
.chi-cotes-fac {
  font-size: .72rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--gris-2); border: var(--filet-w) solid var(--verre-bord);
  border-radius: 999px; padding: 2px 9px; flex: 0 0 auto;
}
.chi-cotes-chev { flex: 0 0 auto; transition: transform var(--t); }
.chi-cotes.est-ouvert .chi-cotes-chev { transform: rotate(180deg); }
.chi-cotes-corps { padding-bottom: var(--e4); }

.chi-cote {
  display: grid; grid-template-columns: 1fr auto 1fr auto minmax(0, .62fr) auto;
  align-items: end; gap: var(--e3); margin-bottom: var(--e3);
}
/* Les champs d'une ligne sont des cases de grille : sans min-width,
   leur largeur minimale automatique fait déborder la ligne entière. */
.chi-cote .champ { margin: 0; min-width: 0; }
.chi-cote .champ label { font-size: .74rem; }
.chi-cote .champ label span { color: var(--gris-2); text-transform: none; }
.chi-cote .champ input { height: 42px; }
.chi-cote-x { color: var(--gris-2); padding-bottom: 12px; font-size: .9rem; }
.chi-cote-moins {
  width: 42px; height: 42px; display: inline-flex; align-items: center;
  justify-content: center; background: none; color: var(--gris-2);
  border: var(--filet-w) solid var(--verre-bord); border-radius: var(--r);
  transition: color var(--t-court), border-color var(--t-court);
}
.chi-cote-moins:hover { color: #E06C6C; border-color: rgba(224,108,108,.5); }

.chi-cotes-bas {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e4); flex-wrap: wrap; margin-top: var(--e4);
}
.chi-cotes-plus {
  background: none; border: var(--filet-w) dashed var(--verre-bord);
  border-radius: var(--r); padding: 9px var(--e4);
  color: var(--gris); font-size: .84rem; font-weight: 600;
  transition: color var(--t-court), border-color var(--t-court);
}
.chi-cotes-plus:hover { color: var(--or); border-color: rgba(201,168,76,.5); }
.chi-cotes-total { font-size: .84rem; color: var(--gris-2); }
.chi-cotes-total.est-rempli { color: var(--or); font-weight: 600; }

@media (max-width: 620px) {
  .chi-cote { grid-template-columns: 1fr 1fr; grid-template-areas: 'l h' 'n x'; }
  .chi-cote .chi-cote-x { display: none; }
  .chi-cote .champ:nth-of-type(1) { grid-area: l; }
  .chi-cote .champ:nth-of-type(2) { grid-area: h; }
  .chi-cote .champ:nth-of-type(3) { grid-area: n; }
  .chi-cote-moins { grid-area: x; justify-self: end; }
}


/* ══════════════════════════════════════════════════════════
   MENU DU TÉLÉPHONE — ILLUSTRÉ
   Les solutions en vignettes, les secteurs en rangées à pastille.
   Un menu qui montre le produit se lit plus vite qu'un menu qui le
   nomme : l'œil reconnaît une façade filmée avant de lire « film
   solaire ».
   ══════════════════════════════════════════════════════════ */
.mm-vitrine {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: .45rem; padding: .2rem 0 .55rem;
}
.mm-vig {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 16 / 10; border-radius: 14px; text-decoration: none;
  border: var(--filet-w) solid var(--filet);
  padding: 0 !important;                    /* .mm-corps a impose un retrait */
  transition: transform var(--t);
}
.mm-vig:active { transform: scale(.97); }
.mm-vig-img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  background-color: var(--verre-2);
}
.mm-vig-img::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(8,14,24,.9) 0%, rgba(8,14,24,.12) 64%);
}
.mm-vig-tx {
  position: absolute; inset: auto 0 0; z-index: 2;
  padding: .42rem .58rem; color: var(--blanc);
  font-size: .82rem; font-weight: 700; line-height: 1.2;
  text-shadow: 0 1px 6px rgba(0,0,0,.55);
}

.mm-rangs { padding: .2rem 0 .35rem; }
.mm-rang {
  display: flex; align-items: center; gap: .6rem;
  padding: .4rem .5rem !important; border-radius: 12px;
  border-left: 0 !important;
}
.mm-rang:active { background: var(--verre-2); }
.mm-rang-img {
  flex: 0 0 38px; width: 38px; height: 38px; border-radius: 9px;
  background-size: cover; background-position: center;
  background-color: var(--verre-2);
  border: var(--filet-w) solid var(--filet);
}
.mm-rang-tx { font-size: .92rem; line-height: 1.25; }
.mm-tout { font-size: .88rem !important; opacity: .78; }


/* ══════════════════════════════════════════════════════════
   CHIFFRAGE — LES CHOIX SE MONTRENT
   Sur le site particulier, les visiteurs confondaient deux films
   voisins tant qu'ils étaient présentés en texte. Montrer le
   produit a réglé la confusion ; le formulaire pro engage des
   montants plus élevés, il mérite le même traitement.

   ⚠ `.chi-carte span` vaut (0,1,1) et gagnerait contre
   `.chi-carte-img` (0,1,0). D'où le sélecteur à deux classes.
   ══════════════════════════════════════════════════════════ */
.chi-carte--photo {
  position: relative; overflow: hidden;
  padding-top: calc(148px + var(--e4));
}
.chi-carte--photo .chi-carte-img {
  position: absolute; top: 0; left: 0; right: 0; height: 148px;
  margin: 0; display: block;
  background-size: cover; background-position: center;
  background-color: var(--verre-2);
  transition: transform var(--t);
}
.chi-carte--photo .chi-carte-img::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,14,24,0) 45%, rgba(8,14,24,.55) 100%);
}
.chi-carte--photo:hover .chi-carte-img { transform: scale(1.04); }
.chi-carte--photo.est-choisi .chi-carte-img {
  filter: saturate(1.06);
}
/* La coche repasse au-dessus de la photo. */
.chi-carte--photo .chi-coche { z-index: 3; }

@media (max-width: 640px) {
  .chi-carte--photo { padding-top: calc(112px + var(--e3)); }
  .chi-carte--photo .chi-carte-img { height: 112px; }
}


/* ══════════════════════════════════════════════════════════
   TUILES ILLUSTRÉES — /solutions/ et /secteurs/
   Le menu montre déjà des vignettes ; arriver sur la page
   complète et n'y trouver que du texte était un recul.
   ══════════════════════════════════════════════════════════ */
.tuile--photo { padding: 0 0 var(--e5); overflow: hidden; }
.tuile--photo .tuile-img {
  display: block; margin: 0 0 var(--e4);
  aspect-ratio: 16 / 10; overflow: hidden;
  background: var(--verre-2);
  border-bottom: var(--filet-w) solid var(--filet);
}
.tuile--photo .tuile-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 420ms cubic-bezier(.2,.7,.2,1);
}
.tuile--photo:hover .tuile-img img { transform: scale(1.05); }
/* Le texte reprend le retrait que la photo a annulé en haut. */
.tuile--photo > h3,
.tuile--photo > p,
.tuile--photo > .tuile-mots,
.tuile--photo > .tuile-pied { padding-inline: var(--e5); }
.tuile--photo > .tuile-pied { padding-bottom: 0; }


/* ══════════════════════════════════════════════════════════
   AVANT / APRÈS
   Une seule variable, --ava, pilote tout : la découpe du volet
   « après » et la position du trait. Le curseur ne fait que la
   mettre à jour.
   ══════════════════════════════════════════════════════════ */
.ava { margin: var(--e6) 0 0; }
.ava-cadre {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--r);
  border: var(--filet-w) solid var(--verre-bord);
  background: var(--verre-2);
  touch-action: pan-y;                    /* le doigt garde le défilement vertical */
}
.ava-cadre > .ava-img {
  display: block; width: 100%; height: auto;
  /* Deux des paires sont en portrait : à pleine largeur, le bloc
     ferait plus de mille pixels de haut et l'on ne verrait plus les
     deux états d'un seul regard. On plafonne, l'image recadre. */
  max-height: min(68vh, 620px); object-fit: cover;
}
.ava-volet {
  position: absolute; inset: 0;
  clip-path: inset(0 0 0 var(--ava));
}
.ava-volet .ava-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.ava-trait {
  position: absolute; top: 0; bottom: 0; left: var(--ava);
  width: 2px; margin-left: -1px; z-index: 3;
  background: rgba(255,255,255,.9);
  box-shadow: 0 0 0 1px rgba(0,0,0,.28);
  pointer-events: none;
}
.ava-rond {
  position: absolute; top: 50%; left: 50%;
  width: 42px; height: 42px; margin: -21px 0 0 -21px;
  border-radius: 50%;
  background: rgba(255,255,255,.94);
  box-shadow: 0 2px 14px rgba(0,0,0,.4);
}
/* Les deux chevrons du rond, dessinés sans image. */
.ava-rond::before, .ava-rond::after {
  content: ''; position: absolute; top: 50%; width: 7px; height: 7px;
  margin-top: -4px; border: 2px solid #16202f; border-width: 2px 2px 0 0;
}
.ava-rond::before { left: 11px; transform: rotate(-135deg); }
.ava-rond::after  { right: 11px; transform: rotate(45deg); }

.ava-etiq {
  position: absolute; top: var(--e3); z-index: 2;
  padding: .28rem .6rem; border-radius: 999px;
  font-size: .7rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--blanc);
  background: rgba(8,14,24,.62);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  pointer-events: none;
}
.ava-etiq--av { left: var(--e3); }
.ava-etiq--ap { right: var(--e3); }

/* Le curseur couvre toute l'image : on saisit où l'on veut. */
.ava-curseur {
  position: absolute; inset: 0; z-index: 4;
  width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: ew-resize;
  -webkit-appearance: none; appearance: none; background: transparent;
}
.ava-curseur::-webkit-slider-thumb {
  -webkit-appearance: none; width: 44px; height: 100vh; cursor: ew-resize;
}
.ava-curseur::-moz-range-thumb {
  width: 44px; height: 100vh; border: 0; background: transparent; cursor: ew-resize;
}
/* Le focus clavier doit se voir : le curseur est invisible, donc
   c'est le cadre qui le montre. */
.ava-cadre:focus-within { outline: 2px solid var(--or); outline-offset: 3px; }

.ava-leg {
  margin-top: var(--e3); font-size: .85rem; color: var(--gris); line-height: 1.55;
}

/* Une seule invitation, à l'entrée dans l'écran. */
@media (prefers-reduced-motion: no-preference) {
  .ava-invite .ava-volet,
  .ava-invite .ava-trait { transition: none; }
  .ava-invite { animation: ava-clin 1.5s cubic-bezier(.4,0,.2,1); }
}
@keyframes ava-clin {
  0%   { --ava: 50%; }
  35%  { --ava: 66%; }
  70%  { --ava: 38%; }
  100% { --ava: 50%; }
}
@property --ava { syntax: '<percentage>'; inherits: true; initial-value: 50%; }


/* ══════════════════════════════════════════════════════════
   FIGURE ILLUSTRÉE
   Une image et sa légende. Utile là où une seule photo dit
   mieux les choses qu'un comparateur — notamment quand la
   preuve est déjà DANS l'image.
   ══════════════════════════════════════════════════════════ */
.fig { margin: var(--e6) 0 0; }
.fig img {
  display: block; width: 100%; height: auto;
  max-height: min(70vh, 660px); object-fit: cover;
  border-radius: var(--r);
  border: var(--filet-w) solid var(--verre-bord);
  background: var(--verre-2);
}
.fig-leg {
  margin-top: var(--e3); font-size: .85rem; color: var(--gris); line-height: 1.55;
}


/* Cartes d'article illustrées — /ressources/ */
.carte--photo { padding-top: 0; overflow: hidden; }
.carte--photo .carte-img {
  display: block; margin: 0 0 var(--e4);
  aspect-ratio: 16 / 9; overflow: hidden; background: var(--verre-2);
  border-bottom: var(--filet-w) solid var(--filet);
}
.carte--photo .carte-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 420ms cubic-bezier(.2,.7,.2,1);
}
.carte--photo:hover .carte-img img { transform: scale(1.05); }
.carte--photo > .t-micro,
.carte--photo > h3,
.carte--photo > p,
.carte--photo > .carte-pied { padding-inline: var(--e5); }
.carte--photo { padding-inline: 0; padding-bottom: var(--e5); }

/* ══════════════════════════════════════════════════════════
   TROIS WIDGETS D'ACCUEIL
   Le mouvement est en CSS : rien à charger, rien à réparer si un
   script échoue. Tout s'arrête si le système demande moins
   d'animation.
   ══════════════════════════════════════════════════════════ */

/* ── Carrousel de chantiers ────────────────────────────────
   Défilement natif avec accroche : le doigt et le clavier suffisent,
   aucun JavaScript n'est nécessaire pour passer d'un volet à l'autre. */
.carrousel { margin: var(--e8) 0; }
.car-piste {
  display: flex; gap: var(--e4);
  overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: var(--e4) max(1.2rem, calc((100vw - 1180px) / 2));
  scrollbar-width: none;
}
.car-piste::-webkit-scrollbar { display: none; }
.car-volet {
  position: relative; flex: 0 0 min(100%, 880px);
  scroll-snap-align: center;
  border-radius: 20px; overflow: hidden; isolation: isolate;
  min-height: 340px; display: flex; align-items: flex-end;
}
.car-fond {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.04);
  transition: transform 6s ease;
}
.car-volet:hover .car-fond { transform: scale(1); }
.car-volet::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(15deg, rgba(6,12,22,.92) 12%, rgba(6,12,22,.55) 52%, rgba(6,12,22,.15) 100%);
}
.car-texte { padding: var(--e5); max-width: 34rem; }
.car-texte h3 { margin: var(--e2) 0 var(--e3); font-size: clamp(1.3rem, 3vw, 1.9rem); line-height: 1.18; }
.car-texte p { margin: 0 0 var(--e4); opacity: .88; }
.car-points { display: flex; gap: .45rem; justify-content: center; margin-top: var(--e3); }
.car-point {
  width: 26px; height: 4px; border-radius: 99px;
  background: rgba(255,255,255,.22); transition: background .2s;
}
.car-point:hover, .car-point:focus-visible { background: var(--or); }

/* ── Bandeau défilant des films ────────────────────────────
   Même principe que les fournisseurs : la liste est écrite deux fois
   pour que la boucle se referme sans saut visible. */
.bandeau-films { margin: var(--e6) 0; }
.bfilm-piste { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.bfilm-defile { display: flex; gap: var(--e3); width: max-content; animation: bfilm-glisse 46s linear infinite; }
.bfilm-piste:hover .bfilm-defile { animation-play-state: paused; }
@keyframes bfilm-glisse { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.bfilm {
  flex: 0 0 auto; display: flex; align-items: center; gap: .7rem;
  padding: .55rem .9rem .55rem .55rem;
  border: 1px solid var(--ligne); border-radius: 14px;
  background: var(--panneau); text-decoration: none; color: inherit;
  transition: border-color .2s, transform .2s;
}
.bfilm:hover { border-color: var(--or); transform: translateY(-2px); }
.bfilm img { width: 56px; height: 42px; object-fit: cover; border-radius: 9px; flex: 0 0 auto; }
.bfilm-txt { display: flex; flex-direction: column; line-height: 1.3; }
.bfilm-txt strong { font-size: .92rem; }
.bfilm-txt small { font-size: .76rem; opacity: .62; }
.bfilm-prix { font-size: .8rem; color: var(--or); font-weight: 700; white-space: nowrap; }

/* ── Quel film pour quel besoin ────────────────────────────── */
.besoins { margin: var(--e8) 0; }
.besoins-grille {
  display: grid; gap: var(--e4); margin-top: var(--e5);
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
}
.besoin {
  display: block; padding: var(--e4);
  border: 1px solid var(--ligne); border-radius: 18px;
  background: var(--panneau); text-decoration: none; color: inherit;
  transition: border-color .2s, transform .2s;
}
.besoin:hover { border-color: var(--or); transform: translateY(-3px); }
.besoin-imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-bottom: var(--e3); }
.besoin-imgs img { width: 100%; height: 74px; object-fit: cover; border-radius: 9px; }
.besoin h3 { margin: 0 0 .35rem; font-size: 1.05rem; }
.besoin p { margin: 0 0 var(--e3); font-size: .87rem; opacity: .7; line-height: 1.5; }
.besoin-plus { font-size: .84rem; color: var(--or); font-weight: 700; display: inline-flex; align-items: center; gap: .3rem; }

@media (max-width: 620px) {
  .car-volet { min-height: 300px; }
  .car-texte { padding: var(--e4); }
  .besoin-imgs img { height: 88px; }
}

/* Le mouvement est un agrément, jamais le seul moyen d'accéder à
   quelque chose : on peut donc tout arrêter sans rien perdre. */
@media (prefers-reduced-motion: reduce) {
  .bfilm-defile { animation: none; }
  .car-piste { scroll-behavior: auto; }
  .car-fond, .besoin, .bfilm { transition: none; }
}

/* ══════════════════════════════════════════════════════════
   EN-TÊTE MOBILE — cibles tactiles et lisibilité

   Mesuré sur iPhone (390 px) et Android (360 px) : les trois seules
   cibles de l'en-tête faisaient 40×40, 40×40 et 128×25. Le seuil
   utilisable est 44×44 — en dessous, on vise et on rate, ce qui se
   paie en abandons plutôt qu'en plaintes.

   On agrandit la ZONE, pas le dessin : les icônes gardent leur
   taille, c'est la surface qui accueille le doigt qui grandit.
   ══════════════════════════════════════════════════════════ */
@media (max-width: 1080px) {

  /* Une barre un peu plus haute : 44 px de cible + le souffle autour. */
  .entete-in { min-height: 60px; }

  .btn-tel,
  .burger {
    width: 44px; height: 44px;
    /* La cible s'étend sans que le bouton grossisse visuellement. */
    display: inline-flex; align-items: center; justify-content: center;
  }

  /* Le logo était haut de 25 px : on lui donne la hauteur d'une cible
     sans changer sa taille apparente. */
  .marque {
    min-height: 44px;
    display: inline-flex; align-items: center;
  }

  /* Un peu d'air entre deux cibles voisines : côte à côte à 44 px, on
     touche encore le voisin. */
  .entete-fin { gap: 6px; }
}

/* ── Le devis, atteignable dès le premier écran ────────────────
   La barre fixe du bas est volontairement masquée tant que le bandeau
   de consentement est affiché — c'est le bon choix, mais cela laisse
   le visiteur sans action permanente pendant tout ce temps. Une
   pastille compacte dans l'en-tête comble exactement cet intervalle. */
/* ── En-tête mobile : la marque et le menu, rien d'autre ──────────
   Mesuré le 15/09 sur un écran de 390 px : l'en-tête portait CINQ
   cibles — marque, téléphone, espace client, « Contact » et le menu —
   soit 350 px d'éléments dans 390 px de large. La pastille « Contact »
   avait été ajoutée parce que la barre du bas n'apparaissait qu'après
   420 px de défilement ; cette barre est désormais permanente sur
   téléphone (pro.js), donc la pastille n'a plus de raison d'être.

   Rien ne devient inatteignable : le téléphone et l'espace client
   sont dans le menu, le chiffrage est dans la barre du bas. On
   retrouve la sobriété de privteint.fr, sans lui emprunter ses
   arrondis — la géométrie du site pro reste vive. */
@media (max-width: 1080px) {
  .entete .btn-chiffrage,
  .entete .btn-espace,
  .entete .btn-tel { display: none; }
  /* Deux cibles, chacune largement dimensionnée pour le pouce. */
  .entete-in { justify-content: space-between; }
  .entete-fin { gap: 0; }
  .burger { width: 44px; height: 44px; }
}

/* ── Carrousel : cibles et lisibilité ────────────────────────── */
.car-points { padding: 6px 0; }
.car-point {
  /* La barre reste fine ; la zone tactile fait 44 px de haut, prise
     sur du vide qui ne se voit pas. */
  position: relative;
  height: 4px;
}
.car-point::after {
  content: ''; position: absolute;
  left: -9px; right: -9px; top: -20px; bottom: -20px;
}
@media (max-width: 620px) {
  /* Le texte du volet respire davantage : à 390 px, un titre de trois
     lignes collé au bouton se lit mal. */
  .car-texte h3 { font-size: 1.22rem; line-height: 1.24; }
  .car-texte p { font-size: .92rem; }
  .car-texte .btn { width: 100%; justify-content: center; }
}

/* ── Liens de contenu : la cible, pas le dessin ────────────────
   Mesuré à 390 px : les liens « → » faisaient 22 px de haut et les
   pilules 34 px. Sous 44 px, on vise et on rate — et une cible
   ratée ne se plaint pas, elle repart.

   On étend la zone sensible sans changer la typographie : le lien
   garde exactement son aspect, il devient seulement atteignable. */
@media (max-width: 1080px) {
  .lien-fleche {
    position: relative;
    /* La zone déborde du texte, en haut et en bas, sans décaler la
       mise en page — un pseudo-élément ne prend pas de place. */
    min-height: 24px;
  }
  .lien-fleche::after {
    content: ''; position: absolute;
    left: -6px; right: -6px; top: 50%;
    height: 44px; transform: translateY(-50%);
  }
  .lien-pilule { min-height: 44px; padding-block: 10px; }
}

/* Sur téléphone, deux liens « → » qui se suivent doivent garder de
   l'air : leurs zones se chevaucheraient sinon, et le doigt
   déclencherait le mauvais. */
@media (max-width: 620px) {
  .lien-fleche + .lien-fleche { margin-top: 10px; }
}

/* ═════════════════════════════════════════════════════════════
   LE LOGO PRIVTEINTPRO

   Deux fichiers, un cadre identique : ils se superposent au pixel
   près, donc le logo ne saute pas quand le thème change. Le
   <picture> choisit sans script et ne charge qu'une seule version.
   ═════════════════════════════════════════════════════════════ */
.marque-logo { display: block; flex: 0 0 auto; line-height: 0; }
.marque-logo img {
  display: block;
  width: auto; height: 30px;
  /* Le trait du logo est déjà optiquement calé : pas de filtre,
     pas de teinte — on affiche le fichier prévu pour le fond. */
}
@media (max-width: 1080px) { .marque-logo img { height: 26px; } }
@media (max-width: 379px)  { .marque-logo img { height: 23px; } }
/* Dans le panneau mobile, le logo respire un peu plus. */
.menu-mobile .marque-logo img { height: 24px; }


/* ═════════════════════════════════════════════════════════════
   LOGO À L'IMPRESSION

   Le site est sombre en toute circonstance : c'est un parti pris,
   pas un thème par défaut. Le logo blanc est donc servi partout —
   sauf sur papier, la seule surface réellement claire, où il
   disparaîtrait. On y bascule sur la version noire.
   ═════════════════════════════════════════════════════════════ */
@media print {
  .marque-logo img {
    content: url(/assets/img/privteintpro-logo-noir.webp);
    height: 22px;
  }
}


/* ═════════════════════════════════════════════════════════════
   CIBLES TACTILES ET LISIBILITÉ — TÉLÉPHONE
   ─────────────────────────────────────────────────────────────
   Mesuré sur six largeurs et douze pages : aucun débord
   horizontal, mais 85 cibles sous 44 px et 171 textes sous 12 px.

   Deux principes tenus ici :

     · on agrandit la ZONE cliquable, pas le dessin. Un lien de
       pied de page qu'on grossit visuellement déforme la mise en
       page ; une marge interne verticale l'atteint sans rien
       déplacer ;

     · on ne remonte une taille de texte que si la lisibilité est
       en jeu. Les raccourcis clavier et les micro-étiquettes
       décoratives restent tels quels : les grossir ferait du
       bruit sans rien apporter.

   44 px est le minimum retenu par Apple comme par le RGAA. Sous
   ce seuil, le pouce vise à côté — et sur un site qui vend des
   rendez-vous, viser à côté coûte un appel.
   ═════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {

  /* Liens de listes — pied de page, tiroirs, index de secteurs.
     Ils mesuraient 20 px de haut. La marge interne les porte à 44
     sans changer leur apparence, et le retrait négatif horizontal
     évite qu'ils ne s'écartent les uns des autres. */
  .pied a,
  .pied li > a,
  .liste-liens a,
  nav.fil a,
  .fil a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-block: 4px;
  }

  /* Le fil d'Ariane : ses maillons sont courts et serrés. On les
     espace pour qu'un doigt ne prenne pas le voisin. */
  .fil a { padding-inline: 2px; }
  .fil li + li { margin-left: 2px; }

  /* Liens fléchés en fin de bloc : ce sont des appels à l'action
     déguisés en texte, ils méritent une vraie zone. */
  .lien-fleche {
    min-height: 44px;
    padding-block: 6px;
  }

  /* Coordonnées du pied de page : téléphone et courriel sont des
     chemins de conversion. Ils faisaient 24 px de haut. */
  .pied a[href^="tel:"],
  .pied a[href^="mailto:"] {
    min-height: 44px;
    padding-block: 8px;
  }

  /* Étiquettes de tuiles : 11,2 px, et il y en a vingt-quatre par
     page. Ce sont des mots-clés qu'on lit vraiment. */
  .tuile-mot { font-size: .78rem; padding: 3px 7px; }

  /* Sur-titres : 11 px en capitales espacées est à la limite du
     lisible sur un écran de téléphone tenu à bout de bras. */
  .t-micro { font-size: 12px; }
}

/* Les points d'un carrousel mesuraient 26 × 4 px : impossibles à
   viser. On garde le trait fin visible, on élargit la zone
   autour — la même astuce que pour les liens de listes. */
.carrousel-points button,
.chantiers-points button,
[class*="-points"] button {
  position: relative;
}
.carrousel-points button::after,
.chantiers-points button::after,
[class*="-points"] button::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px;
}

/* ─────────────────────────────────────────────────────────────
   SECOND PASSAGE — ce que le premier correctif avait manqué
   ───────────────────────────────────────────────────────────── */

/* Les points de carrousel : mesurés à 26 × 4 px. Le trait fin
   reste dessiné tel quel ; c'est la zone autour qu'on élargit,
   invisible mais atteignable au pouce. */
.car-point,
[class*="car-point"],
[class*="-point"]:not(p):not(div[class*="points"]) {
  position: relative;
}
.car-point::after,
[class*="car-point"]::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px;
}

@media (max-width: 860px) {
  /* Fil d'Ariane : les sélecteurs précédents ne l'atteignaient
     pas — il ne porte pas la classe que j'avais visée. On cible
     le <nav> par son rôle, qui lui est stable. */
  nav[aria-label*="ariane"] a,
  nav[aria-label*="Ariane"] a,
  .ariane a,
  .breadcrumb a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-block: 4px;
  }

  /* Textes secondaires : 11,2 px pour les <small>, 9,9 px pour
     les étiquettes. Douze pixels est le seuil sous lequel un
     texte cesse d'être confortable sur un téléphone tenu à bout
     de bras. */
  small,
  .etiq,
  .chi-jauge-txt,
  .chi-cotes-fac { font-size: 12px; }

  /* .lien-pilule .etiq vaut 0,2,0 et l emportait sur la regle
     ci-dessus : il faut egaler sa specificite, pas la contourner
     avec un !important qui rendrait la suite illisible. */
  .lien-pilule .etiq { font-size: 12px; padding: 2px 6px; }

  /* Les raccourcis clavier restent petits : ils sont décoratifs,
     personne n'a besoin de les lire de loin. */
  kbd { font-size: 11.5px; }
}

/* Le prix du menu deroulant se lisait a 11,8 px. C'est un chiffre
   qu'on vient chercher : il merite d'etre lisible sans effort. */
.mega-vig-prix { font-size: 12.5px; }

/* ═════════════════════════════════════════════════════════════
   COMPARATIF DES SOLUTIONS
   ─────────────────────────────────────────────────────────────
   Un tableau se lit en balayant une colonne, pas en la
   reconstituant. Les chiffres sont donc alignes a droite et en
   chasse fixe : deux prix ne se comparent a l oeil que si leurs
   virgules tombent au meme endroit.

   Sur telephone, le tableau defile lateralement dans son propre
   conteneur — jamais la page entiere. La premiere colonne reste
   collee : sans elle, on ne sait plus de quelle solution on lit
   le prix.
   ═════════════════════════════════════════════════════════════ */
.cmp-table { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 700px; }
.cmp-table th, .cmp-table td {
  padding: .85rem .9rem; text-align: left; vertical-align: top;
  border-bottom: var(--filet-w) solid var(--filet);
}
.cmp-table thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--n2); color: var(--gris);
  font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap;
}
.cmp-table tbody th {
  position: sticky; left: 0; z-index: 1;
  background: var(--n1); min-width: 190px; font-weight: 500;
}
.cmp-table tbody th a { color: var(--blanc); text-decoration: none; }
.cmp-table tbody th a:hover { color: var(--or); }
.cmp-table tbody tr:hover td { background: var(--verre-1); }
.cmp-sous { display: block; margin-top: .2rem; font-size: .78rem; color: var(--gris-2); font-weight: 400; }
.cmp-chiffre { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cmp-chiffre b { color: var(--or); font-size: 1.02rem; }

/* Le choix par le probleme : personne ne cherche un « facteur
   solaire », on cherche une piece qui redevient vivable. */
.cmp-pbs { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.cmp-pbs li {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .8rem .95rem; background: var(--verre-1);
  border: var(--filet-w) solid var(--filet); border-radius: 3px;
}
.cmp-pb { font-size: .93rem; }
.cmp-rep { color: var(--or); font-weight: 600; font-size: .88rem; white-space: nowrap; }
@media (max-width: 620px) {
  .cmp-pbs li { flex-direction: column; align-items: flex-start; gap: .4rem; }
  .cmp-rep { min-height: 44px; display: inline-flex; align-items: center; }
}


/* ══════════════════════════════════════════════════════════
   AMORTISSEMENT — en combien d'étés le film se rembourse
   ──────────────────────────────────────────────────────────
   Deux colonnes : à gauche ce qu'on règle, à droite ce que ça
   donne. Le chiffre clé est isolé en haut à droite — c'est celui
   qu'on retiendra et qu'on répétera en réunion ; tout le reste
   n'est là que pour le rendre crédible.
   ══════════════════════════════════════════════════════════ */
.amortissement { margin: var(--e6) 0; }

.am-grille {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: var(--e5);
  align-items: start;
}

/* ── Les réglages ───────────────────────────────────────── */
.am-form {
  background: linear-gradient(180deg, var(--verre-2), var(--verre-1));
  border: var(--filet-w) solid var(--verre-bord);
  border-radius: var(--r-l);
  padding: var(--e5);
  backdrop-filter: blur(var(--verre-flou)) saturate(var(--verre-sat));
  -webkit-backdrop-filter: blur(var(--verre-flou)) saturate(var(--verre-sat));
}
.am-h {
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gris-2); margin: 0 0 var(--e4); font-weight: 600;
}
.am-h--2 {
  margin-top: var(--e6); padding-top: var(--e4);
  border-top: var(--filet-w) solid var(--filet);
}
.am-l {
  display: block; margin-bottom: var(--e4);
  font-size: .88rem; color: var(--gris);
}
.am-in { display: flex; align-items: center; gap: var(--e2); margin-top: var(--e2); }
.am-in em { font-style: normal; color: var(--gris-2); font-size: .82rem; white-space: nowrap; }
.am-form input, .am-form select {
  width: 100%; margin-top: var(--e2);
  background: var(--n0); color: var(--txt);
  border: var(--filet-w) solid var(--verre-bord);
  border-radius: var(--r); padding: 10px 12px;
  font: inherit; font-size: 16px;   /* sous 16 px, iOS zoome au focus */
  min-height: 44px;
}
.am-in input { margin-top: 0; }
.am-form input:focus, .am-form select:focus {
  outline: 2px solid var(--or); outline-offset: -1px; border-color: var(--or);
}
.am-note {
  font-size: .82rem; color: var(--gris-2); line-height: 1.6;
  margin: var(--e3) 0 var(--e4);
}
.am-note b { color: var(--txt); font-weight: 600; }

/* ── Le résultat ────────────────────────────────────────── */
.am-res { min-width: 0; }
.am-cle {
  background: linear-gradient(140deg, rgba(201,168,76,.16), rgba(201,168,76,.05));
  border: var(--filet-w) solid rgba(201,168,76,.34);
  border-radius: var(--r-l);
  padding: var(--e5) var(--e5) var(--e4);
  margin-bottom: var(--e4);
}
.am-cle-lab {
  display: block; font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--or); font-weight: 600;
}
.am-cle-val {
  display: block; font-size: clamp(1.9rem, 4.6vw, 2.7rem); font-weight: 800;
  letter-spacing: -.03em; color: var(--blanc); line-height: 1.1;
  margin: var(--e2) 0 var(--e1);
}
.am-cle-sous { display: block; font-size: .88rem; color: var(--gris); }

.am-tab {
  border: var(--filet-w) solid var(--verre-bord);
  border-radius: var(--r-l); overflow: hidden; margin-bottom: var(--e4);
}
.am-r {
  display: flex; align-items: baseline; gap: var(--e4);
  padding: var(--e3) var(--e4);
  border-bottom: var(--filet-w) solid var(--filet);
  background: var(--verre-1);
}
.am-r:last-child { border-bottom: 0; }
.am-r.est-fort { background: var(--verre-2); }
.am-r-l { flex: 1 1 auto; font-size: .9rem; color: var(--txt); min-width: 0; }
.am-r-l em {
  display: block; font-style: normal; font-size: .78rem;
  color: var(--gris-2); margin-top: 2px;
}
.am-r-v {
  flex: 0 0 auto; font-size: .95rem; color: var(--txt);
  font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap;
}
.am-r.est-fort .am-r-v { font-size: 1.15rem; }
.am-r-v b { color: var(--or); font-weight: 700; }

.am-plus {
  background: var(--verre-1); border: var(--filet-w) solid var(--filet);
  border-radius: var(--r-l); padding: var(--e4) var(--e5); margin-bottom: var(--e4);
}
.am-plus h3 {
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gris-2); margin: 0 0 var(--e3); font-weight: 600;
}
.am-plus ul { margin: 0; padding-left: 1.1rem; }
.am-plus li { font-size: .89rem; color: var(--gris); line-height: 1.65; margin-bottom: var(--e2); }
.am-plus li:last-child { margin-bottom: 0; }
.am-plus b { color: var(--txt); font-weight: 600; }

.am-mention {
  font-size: .82rem; color: var(--gris-2); line-height: 1.65;
  border-left: 2px solid var(--verre-bord); padding-left: var(--e4);
  margin: 0 0 var(--e5);
}
.am-mention b { color: var(--txt); font-weight: 600; }

.am-cta { display: flex; gap: var(--e3); flex-wrap: wrap; }

@media (max-width: 900px) {
  .am-grille { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .am-form { padding: var(--e4); }
  .am-r { flex-direction: column; gap: var(--e1); }
  .am-r-v { text-align: left; }
  .am-cta .btn { flex: 1 1 auto; justify-content: center; }
}


/* ══════════════════════════════════════════════════════════
   FICHE TECHNIQUE — une page à faire circuler
   ══════════════════════════════════════════════════════════ */
.est-fiche { background: var(--n0); }
.est-fiche #contenu { padding: 0; }

.fiche {
  max-width: 780px;
  margin: var(--e7) auto var(--e9);
  padding: var(--e7);
  background: var(--n1);
  border: var(--filet-w) solid var(--verre-bord);
  border-radius: var(--r-l);
}
.fi-tete {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--e5); padding-bottom: var(--e4); margin-bottom: var(--e5);
  border-bottom: 2px solid var(--or);
}
.fi-marque img { display: block; height: 30px; width: auto; }
.fi-ref {
  text-align: right; font-size: .74rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gris-2); line-height: 1.8;
}
.fi-ref b { color: var(--txt); font-size: .92rem; letter-spacing: 0; text-transform: none; }

.fiche h1 {
  font-size: clamp(1.5rem, 3.4vw, 2rem); line-height: 1.15;
  letter-spacing: -.02em; margin: 0 0 var(--e4); color: var(--blanc);
}
.fi-chapeau { font-size: 1.02rem; color: var(--txt); line-height: 1.6; margin: 0 0 var(--e5); }
.fi-resume { font-size: .95rem; color: var(--gris); line-height: 1.7; margin: 0 0 var(--e4); }
.fiche p { font-size: .93rem; color: var(--gris); line-height: 1.7; margin: 0 0 var(--e4); }
.fiche b { color: var(--txt); font-weight: 600; }

.fi-chiffres {
  display: flex; flex-wrap: wrap; gap: var(--e3); margin: 0 0 var(--e5);
}
.fi-chiffres > div {
  flex: 1 1 130px; background: var(--verre-1);
  border: var(--filet-w) solid var(--filet); border-radius: var(--r);
  padding: var(--e3) var(--e4);
}
.fi-chiffres b {
  display: block; font-size: 1.4rem; color: var(--or); letter-spacing: -.02em;
}
.fi-chiffres span { font-size: .78rem; color: var(--gris-2); line-height: 1.4; }

.fi-bloc { margin: 0 0 var(--e5); }
.fi-bloc h2 {
  font-size: .76rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gris-2); margin: 0 0 var(--e3); font-weight: 600;
  padding-bottom: var(--e2); border-bottom: var(--filet-w) solid var(--filet);
}
.fi-specs { width: 100%; border-collapse: collapse; }
.fi-specs th, .fi-specs td {
  text-align: left; vertical-align: top; padding: var(--e2) 0;
  border-bottom: var(--filet-w) solid var(--filet); font-size: .89rem;
}
.fi-specs th { color: var(--gris-2); font-weight: 500; width: 44%; padding-right: var(--e4); }
.fi-specs td { color: var(--txt); }
.fi-specs tr:last-child th, .fi-specs tr:last-child td { border-bottom: 0; }

.fi-cas { list-style: none; margin: 0; padding: 0; }
.fi-cas li {
  padding: var(--e2) 0; border-bottom: var(--filet-w) solid var(--filet);
  font-size: .89rem;
}
.fi-cas li:last-child { border-bottom: 0; }
.fi-cas b { display: block; color: var(--txt); }
.fi-cas span { color: var(--gris-2); font-size: .85rem; }

.fi-prix { margin: 0 0 var(--e2); }
.fi-prix b { font-size: 1.3rem; color: var(--or); }
.fi-prix span { color: var(--gris-2); font-size: .86rem; }
.fi-mention { font-size: .78rem; color: var(--gris-2); line-height: 1.6; margin: 0; }

.fi-pied {
  display: flex; flex-wrap: wrap; gap: var(--e5);
  padding-top: var(--e4); margin-top: var(--e6);
  border-top: 2px solid var(--or);
  font-size: .82rem; color: var(--gris-2); line-height: 1.7;
}
.fi-pied > div { flex: 1 1 180px; }
.fi-pied b { color: var(--txt); }
.fi-src { text-align: right; }

.fi-actions { display: flex; gap: var(--e3); margin-top: var(--e6); flex-wrap: wrap; }

/* Le renvoi vers la fiche, sur la page de solution. */
.vers-fiche {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e5); flex-wrap: wrap;
  background: linear-gradient(140deg, var(--verre-2), var(--verre-1));
  border: var(--filet-w) solid var(--verre-bord);
  border-radius: var(--r-l); padding: var(--e4) var(--e5);
  margin: var(--e6) 0;
}
.vers-fiche b { display: block; color: var(--txt); font-size: 1rem; }
.vers-fiche span { display: block; color: var(--gris-2); font-size: .87rem; margin-top: 2px; }

@media (max-width: 640px) {
  .fiche { padding: var(--e5); margin: var(--e5) var(--e3) var(--e7); }
  .fi-tete { flex-direction: column; gap: var(--e3); }
  .fi-ref { text-align: left; }
  .fi-src { text-align: left; }
  .fi-actions .btn { flex: 1 1 auto; justify-content: center; }
  .vers-fiche .btn { width: 100%; justify-content: center; }
}

/* ══════════════════════════════════════════════════════════
   À L'IMPRESSION
   ──────────────────────────────────────────────────────────
   C'est la raison d'être de la page. Le fond sombre du site
   coûterait une cartouche et rendrait le texte gris sur gris ;
   les boutons n'ont aucun sens sur papier ; et un tableau coupé
   en deux pages donne un document bâclé.
   ══════════════════════════════════════════════════════════ */
@media print {
  @page { size: A4; margin: 14mm 15mm; }

  html, body, .est-fiche { background: #fff !important; color: #111 !important; }
  .site-header, .site-footer, .bandeau-mesure, .cta-banner,
  .fi-actions, .vers-fiche, nav, .recherche, .flottant { display: none !important; }

  .fiche {
    max-width: none; margin: 0; padding: 0;
    background: #fff; border: 0; border-radius: 0;
  }
  .fiche h1 { color: #000; font-size: 20pt; }
  .fiche p, .fi-resume, .fi-chapeau { color: #222; font-size: 10.5pt; }
  .fiche b, .fi-specs td, .fi-cas b { color: #000; }
  .fi-bloc h2, .fi-ref, .fi-chiffres span, .fi-mention, .fi-pied, .fi-cas span,
  .fi-prix span, .fi-specs th { color: #444 !important; }
  .fi-tete, .fi-pied { border-color: #C9A84C !important; }
  .fi-specs th, .fi-specs td, .fi-cas li { border-color: #ddd !important; }
  .fi-chiffres > div {
    background: #f6f6f4 !important; border-color: #ddd !important;
  }
  .fi-chiffres b, .fi-prix b { color: #8a6d1f !important; }

  /* Ce qui rend un document propre ou bâclé. */
  .fi-bloc, .fi-chiffres > div, .fi-cas li { break-inside: avoid; page-break-inside: avoid; }
  .fi-bloc h2, .fiche h1 { break-after: avoid; page-break-after: avoid; }
  .fi-specs tr { break-inside: avoid; }
  .fi-pied { break-before: avoid; }

  /* Sur papier, l'adresse d'un lien est perdue : on l'écrit. */
  .fiche a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8.5pt; color: #666; }
}