/* UPVIS — feuille de style du site. Valeurs : Charte UPVIS (thème graphite).
   https://claude.ai/artifact/BYX4HZKjrFJg6hzMLurpn9 */

@font-face { font-family: "Hanken Grotesk"; src: url("../fonts/hanken-grotesk-latin.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/ibm-plex-mono-400-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/ibm-plex-mono-500-latin.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  /* Couleurs (charte, thème graphite) */
  --fond: #141619;
  --surface: #1d2024;
  --surface-2: #24282d;
  --ligne: #f1ede61c;
  --ligne-forte: #f1ede633;
  --texte: #f1ede6;
  --texte-2: #a29d95;
  --texte-3: #8e8981;  /* 07/10 : #8a857d ne tenait que 4,46 sur --surface (Charte : 4,5 minimum) ; 4,71 sur surface, 5,22 sur fond */
  --texte-hero: #c9c4bb;  /* paragraphe des hauts de page (07/10, Lucas) : contraste 10,4 sur --fond au lieu de 6,7, reste distinct du titre */
  /* Cuivre brillant (06/10, variante D choisie par Lucas sur DA/test-cuivre.html ; avant : #c8834f) */
  --cuivre: #d98e55;
  --cuivre-texte: #d98e55;
  --cuivre-rgb: 217, 142, 85;   /* même couleur que --cuivre, pour les lueurs en transparence : les changer ensemble */
  --cuivre-clair: #ecb184;      /* bord des numéros allumés */
  --cuivre-reflet: linear-gradient(135deg, #f6c193 0%, #e0955c 42%, #c4733a 78%, #d98e55 100%); /* aplats seulement */
  --sur-cuivre: #16181b;
  --vert: #5bb98a;
  --erreur: #ec8f80;
  --rouge: #ef5446;   /* rouge vif des résultats de l'audit (06/10) : ressort sur le graphite, s'accorde au cuivre et au vert ; les erreurs de formulaire gardent --erreur */
  --focus: var(--cuivre);
  /* Typographie */
  --font-titre: "Hanken Grotesk", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-texte: "Hanken Grotesk", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-cote: "IBM Plex Mono", ui-monospace, Consolas, "Courier New", monospace;
  /* Espacements */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 72px; --space-9: 112px;
  /* Arrondis */
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-pill: 999px;
  --ombre-flottante: 0 24px 60px -30px rgba(0, 0, 0, 0.6);
  --largeur: 1180px;
  --gouttiere: clamp(16px, 5vw, 24px); /* marge latérale sur téléphone (.wrap, et les éléments qui débordent jusqu'au bord) */
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; background: var(--fond); color: var(--texte); font: 400 17px/1.6 var(--font-texte); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { max-width: 100%; height: auto; }
a { color: var(--cuivre-texte); text-underline-offset: 3px; }
a:hover { color: var(--texte); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-titre); font-weight: 600; text-wrap: balance; color: var(--texte); }
.display { font-size: clamp(2.25rem, 6.2vw, 4rem); line-height: 1.02; letter-spacing: -0.03em; }
h1, .h1 { font-size: clamp(2rem, 5vw, 3rem); line-height: 1.05; letter-spacing: -0.025em; }
h2, .h2 { font-size: clamp(1.625rem, 3.6vw, 2.125rem); line-height: 1.12; letter-spacing: -0.02em; }
h3, .h3 { font-size: 1.375rem; line-height: 1.25; letter-spacing: -0.01em; }
.lead { font-size: clamp(1.125rem, 2vw, 1.25rem); line-height: 1.55; color: var(--texte-2); }
.small { font-size: 0.875rem; line-height: 1.5; }
.label { font: 500 12px/1.4 var(--font-cote); letter-spacing: 0.08em; text-transform: uppercase; color: var(--cuivre-texte); }
.data { font: 400 14px/1.5 var(--font-cote); color: var(--texte-3); }
.muted { color: var(--texte-2); }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: 100%; max-width: var(--largeur); margin: 0 auto; padding-inline: var(--gouttiere); } /* 06/10 (Lucas) : marge qui grandit avec le téléphone (16 px à 320, 22 px à 440) ; 16 px faisait collé sur les grands écrans */
@media (min-width: 760px) { .wrap { padding-inline: var(--space-6); } }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--texte); color: var(--fond); padding: 8px 12px; border-radius: var(--radius-sm); }
.skip:focus { left: 8px; }

/* ---------- En-tête ----------
   Fixe. En haut de page : transparent, pleine largeur. Après 60 px de défilement (.est-pilule, site.js) :
   pilule flottante, plus étroite, fond graphite translucide et flouté, comme l'ancien upvis.io. */
body { padding-top: 69px; }
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; pointer-events: none; }
.header-row { position: relative; pointer-events: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 68px; border: 1px solid transparent; border-radius: 0; background: transparent; transition: max-width .4s ease, min-height .4s ease, margin-top .4s ease, padding .4s ease, background-color .4s ease, border-color .4s ease, border-radius .4s ease, box-shadow .4s ease; }
.est-pilule .header-row { width: calc(100% - 24px); max-width: 1140px; min-height: 56px; margin-top: 10px; padding-inline: var(--space-3) var(--space-2); border-color: var(--ligne-forte); border-radius: var(--radius-pill); background: rgba(29, 32, 36, 0.82); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); box-shadow: var(--ombre-flottante); }
@media (min-width: 760px) { .est-pilule .header-row { padding-inline: var(--space-5) var(--space-3); } }
.brand { display: inline-flex; align-items: center; line-height: 0; }
/* Logo : taille fixe en pixels entiers (24 px de haut, 118 de large), sans animation, pour qu'il reste net */
.brand svg, .brand img { height: 30px; width: 119px; shape-rendering: geometricPrecision; } /* 30 px depuis le 06/10 (logo C : mot fin et plus petit, symbole plus grand) ; pixels entiers pour rester net */
.menu-toggle::after { content: ""; position: absolute; inset: -5px -2px; } /* zone tactile ≈ 44 px */
.menu-toggle { position: relative; display: inline-flex; align-items: center; gap: 8px; background: var(--surface); color: var(--texte); border: 1px solid var(--ligne); border-radius: var(--radius-pill); padding: 9px 14px; font: 600 15px/1 var(--font-texte); cursor: pointer; }
.menu-toggle span { display: block; width: 18px; height: 2px; background: currentColor; box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor; }

/* Menu déroulant (téléphone, tablette) : carte flottante sous l'en-tête */
.menu { display: none; }
.menu.is-open { display: grid; gap: var(--space-4); position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: var(--surface); border: 1px solid var(--ligne-forte); border-radius: var(--radius-lg); padding: var(--space-4); box-shadow: var(--ombre-flottante); }
.menu-liens { display: grid; }
.menu-liens > a { color: var(--texte); text-decoration: none; font-weight: 500; padding: 12px 4px; border-bottom: 1px solid var(--ligne); }
.menu-liens > a:last-child { border-bottom: 0; }
.menu-liens > a:hover { color: var(--cuivre-texte); }
.menu-boutons { display: grid; gap: var(--space-2); }
.menu-boutons .btn, .menu-boutons .tel-pill { justify-content: center; }

@media (min-width: 1040px) {
  .menu-toggle { display: none; }
  .menu, .menu.is-open { display: flex; align-items: center; gap: var(--space-6); position: static; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  /* Liens centrés sur la largeur du site, quel que soit l'écart entre le logo et les boutons */
  .menu-liens { display: flex; align-items: center; gap: var(--space-5); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
  .menu-liens > a { padding: 0; border: 0; font-size: 15px; color: var(--texte-2); }
  .menu-liens > a:hover { color: var(--texte); }
  .menu-boutons { display: flex; align-items: center; gap: var(--space-2); }
}
/* Menu déroulant « Outils gratuits » : se déplie dans le menu sur téléphone, panneau flottant sur ordinateur */
.deroulant { position: relative; border-bottom: 1px solid var(--ligne); }
.deroulant-btn { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 6px; padding: 12px 4px; background: none; border: 0; color: var(--texte); font: 500 17px/1.3 var(--font-texte); cursor: pointer; }
.deroulant-btn svg { width: 16px; height: 16px; transition: transform .25s ease; }
.deroulant.ouvert .deroulant-btn svg { transform: rotate(180deg); }
.deroulant-panneau { list-style: none; margin: 0; padding: 0 0 var(--space-2); display: none; gap: var(--space-1); }
.deroulant.ouvert .deroulant-panneau { display: grid; }
.outil { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: start; padding: 10px; border-radius: var(--radius-md); color: var(--texte); text-decoration: none; transition: background-color .2s ease; }
a.outil:hover { background: var(--surface-2); color: var(--texte); }
.outil-ico { width: 36px; height: 36px; border-radius: var(--radius-sm); background: var(--surface-2); display: grid; place-items: center; color: var(--cuivre); }
a.outil:hover .outil-ico { background: var(--fond); }
.outil-ico svg { width: 18px; height: 18px; }
.outil-txt b { display: flex; align-items: center; gap: var(--space-2); font-weight: 600; font-size: 15px; }
.outil-txt small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.45; color: var(--texte-2); }
.outil.bientot { cursor: default; }
.outil.bientot .outil-ico { color: var(--texte-3); }
.pastille-bientot { font: 500 10px/1 var(--font-cote); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--texte-3); border: 1px solid var(--ligne-forte); border-radius: var(--radius-pill); padding: 3px 6px; }
@media (min-width: 1040px) {
  .deroulant { border: 0; }
  .deroulant-btn { width: auto; padding: 0; font-size: 15px; color: var(--texte-2); }
  .deroulant-btn:hover, .deroulant.ouvert .deroulant-btn { color: var(--texte); }
  .deroulant-panneau { position: absolute; top: calc(100% + 18px); left: 50%; width: 340px; padding: var(--space-2); transform: translateX(-50%); background: var(--surface); border: 1px solid var(--ligne-forte); border-radius: var(--radius-lg); box-shadow: var(--ombre-flottante); }
  .deroulant-panneau::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; }
}

/* Téléphone de l'en-tête sur ordinateur : icône seule, la pastille s'élargit au survol pour montrer le numéro */
@media (min-width: 1040px) {
  .tel-pill.tel-entete { gap: 0; padding: 9px 11px; }
  .tel-entete .tel-numero { display: inline-block; max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap; transition: max-width .3s ease, opacity .25s ease, margin-left .3s ease; }
  .tel-entete:hover .tel-numero, .tel-entete:focus-visible .tel-numero, .tel-entete.copie .tel-numero, .tel-entete.montre .tel-numero { max-width: 150px; opacity: 1; margin-left: 8px; }
  .tel-entete.copie { border-color: var(--vert); color: var(--vert); }
}
.tel-pill { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--ligne-forte); border-radius: var(--radius-pill); padding: 8px 14px; font-weight: 600; font-size: 15px; color: var(--texte); text-decoration: none; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tel-pill svg { width: 15px; height: 15px; }

/* ---------- Boutons ---------- */
.btn { display: inline-flex; align-items: center; gap: var(--space-2); font: 600 16px/1.25 var(--font-texte); padding: 14px 22px; border-radius: var(--radius-md); border: 1.5px solid transparent; text-decoration: none; cursor: pointer; transition: transform .18s ease, background-color .18s ease, border-color .18s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-action { background: var(--cuivre); color: var(--sur-cuivre); }
/* Reflet métallique sur les aplats cuivre (boutons, badges, numéros, pastilles), jamais sur les textes ni les traits.
   background-origin : border-box, sinon le dégradé se répète sous le bord transparent (fine barre claire à droite) */
.btn-action, .epingle .etiquette, .resultats li.vous.actif .rang, .resultats li.vous.actif .appel, .parcours li.allume .pt,
.comp-poignee, .pastille-remise, .badge-reco, .appel-flottant, .fg-btns span:first-child {
  background-image: var(--cuivre-reflet); background-origin: border-box;
}
.btn-action:hover { filter: brightness(1.07); color: var(--sur-cuivre); } /* garde le reflet */
.btn-second { background: transparent; color: var(--texte); border-color: var(--ligne-forte); }
.btn-second:hover { border-color: var(--texte-2); color: var(--texte); }
.btn-tel { background: var(--surface); color: var(--texte); font-variant-numeric: tabular-nums; }
.btn-small { padding: 10px 16px; font-size: 15px; }
.btn svg { width: 16px; height: 16px; flex: none; }

/* ---------- Sections ---------- */
.section { padding-block: var(--space-8); position: relative; }
@media (min-width: 900px) { .section { padding-block: var(--space-9); } }
.section-alt { background: var(--surface); border-block: 1px solid var(--ligne); }
.section-head { max-width: 760px; margin-bottom: var(--space-7); display: grid; gap: var(--space-3); }
.section-head .lead { margin: 0; }

/* ---------- Héros ---------- */
.hero { position: relative; padding-block: var(--space-7) var(--space-8); overflow: hidden; }
@media (min-width: 900px) { .hero { padding-block: var(--space-8) var(--space-9); } }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(var(--ligne) 1px, transparent 1px), linear-gradient(90deg, var(--ligne) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 70% 40%, #000 10%, transparent 75%); mask-image: radial-gradient(ellipse 70% 60% at 70% 40%, #000 10%, transparent 75%); opacity: .55; }
/* Flux cuivre (site.js) : remplace le quadrillage quand JavaScript tourne. Atténué côté texte pour ne pas gêner la lecture */
.hero-flux { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.30) 30%, #000 60%); mask-image: linear-gradient(90deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.30) 30%, #000 60%); }
@media (max-width: 999px) { .hero-flux { -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.40) 0%, rgba(0,0,0,.40) 40%, #000 70%); mask-image: linear-gradient(180deg, rgba(0,0,0,.40) 0%, rgba(0,0,0,.40) 40%, #000 70%); } }
.hero.a-flux::before { display: none; }
/* Fond photo des hauts de page (07/10, Lucas : option B de DA/options-fonds.html ; fond_photo() dans inc/config.php).
   Noir et blanc assombri, teinte cuivre, fondu vers le graphite côté texte. Le flux de l'accueil reste devant. */
.hero.a-photo::before { display: none; }
.fond-photo { position: absolute; inset: 0; pointer-events: none; overflow: hidden; isolation: isolate; }
.fond-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1) brightness(.62); }
.fond-photo::before { content: ""; position: absolute; inset: 0; background: var(--cuivre); mix-blend-mode: color; opacity: .55; }
.fond-photo::after { content: ""; position: absolute; inset: 0; }
.fond-photo-droite img { left: 38%; width: 62%; }
.fond-photo-droite::after { background: linear-gradient(90deg, var(--fond) 0%, var(--fond) 38%, rgba(20, 22, 25, .55) 62%, rgba(20, 22, 25, .45) 100%), linear-gradient(0deg, var(--fond) 0%, transparent 22%); }
.fond-photo-centre img { object-position: center 45%; }
.fond-photo-centre::after { background: radial-gradient(ellipse 60% 50% at 50% 22%, rgba(20, 22, 25, .55), rgba(20, 22, 25, .82) 70%), linear-gradient(0deg, var(--fond) 0%, rgba(20, 22, 25, 0) 45%); }
@media (max-width: 999px) {
  /* 07/10 (Lucas : illisible sur téléphone) : la photo n'étire plus sur toute la hauteur du haut de page (une fine bande
     très agrandie) ; elle garde presque ses proportions en haut, derrière le titre, puis se fond dans le graphite */
  .fond-photo-droite img { left: 0; width: 100%; height: min(85vw, 460px); object-position: var(--fp-x, 50%) center;
    -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent); mask-image: linear-gradient(180deg, #000 72%, transparent); }
  .fond-photo-droite::after { background: linear-gradient(180deg, rgba(20, 22, 25, .40) 0%, rgba(20, 22, 25, .55) min(62vw, 330px), var(--fond) min(100vw, 540px)); }
}
.hero-grid { position: relative; display: grid; gap: var(--space-7); align-items: center; }
@media (min-width: 1000px) { .hero-grid { grid-template-columns: 1.05fr .95fr; gap: var(--space-7); } }
.hero .display { margin: var(--space-4) 0 var(--space-5); }
.hero .lead { max-width: 560px; margin-bottom: var(--space-6); }
.hero .lead, .audit-hero .lead, .sm-tete .lead { color: var(--texte-hero); }
.hero .lead + .hero-question { margin-top: calc(-1 * var(--space-2)); }
.hero-question { margin: 0 0 var(--space-3); font-weight: 600; color: var(--texte); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.puces { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); color: var(--texte-2); font-size: 15px; }
.puces li { display: inline-flex; align-items: center; gap: var(--space-2); }
/* Mobile et tablette (une seule colonne) : textes du haut de page centrés, au-dessus de la démo */
@media (max-width: 999px) {
  .hero-grid > div:first-child { text-align: center; }
  .hero .lead { margin-inline: auto; }
  .hero-actions, .puces { justify-content: center; }
}
.puces li::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--cuivre); }
.mot { display: inline-block; }
.js .mot { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s cubic-bezier(.2, .7, .2, 1); }
.js .titre-pret .mot { opacity: 1; transform: none; }

/* Démonstration Google Maps + ChatGPT */
.demo { position: relative; min-height: 640px; }
@media (max-width: 999px) { .demo { min-height: 0; display: grid; gap: var(--space-4); } }
.demo-card { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--ombre-flottante); }
@media (min-width: 1000px) {
  .demo-maps { position: absolute; top: 0; left: 0; width: 84%; }
  .demo-chat { position: absolute; right: 0; bottom: 0; width: 70%; }
}
.demo-head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); }
.demo-head .label { color: var(--texte-3); }
.demo-head svg { width: 16px; height: 16px; color: var(--cuivre); }
.demo-head .logo-ia svg { color: var(--texte); }
.champ-recherche { display: flex; align-items: center; gap: var(--space-2); background: var(--surface-2); border-radius: var(--radius-pill); padding: 10px 14px; font-size: 15px; color: var(--texte); min-height: 42px; }
.champ-recherche svg { width: 15px; height: 15px; color: var(--texte-3); flex: none; }
#demo-saisie { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.curseur { display: inline-block; width: 2px; height: 1.05em; background: var(--cuivre); margin-left: 1px; vertical-align: -2px; animation: clignote 1s steps(1) infinite; }
.carte-mini { position: relative; height: 150px; margin: var(--space-3) 0; border-radius: var(--radius-md); overflow: hidden; background: #191c20; }
.carte-mini svg.rues { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Plan de Lyon dessiné (tracé simplifié) : eau, parc, axes, dans l'esprit des fonds de carte sombres */
.pl-eau { fill: none; stroke: #23303b; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.pl-rhone { stroke-width: 12; }
.pl-parc { fill: #1d2620; }
.pl-route { fill: none; stroke: #2c3036; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.pl-petite { fill: none; stroke: #23262b; stroke-width: 1.6; stroke-linecap: round; }
.pl-nom { font: italic 500 9px var(--font-cote); fill: #4a5a68; letter-spacing: .06em; }
/* Étiquette du repère « Votre entreprise » (façon mapcn) */
.epingle .etiquette { position: absolute; left: 50%; top: 100%; transform: translate(-50%, 4px); white-space: nowrap; padding: 3px 8px; border-radius: var(--radius-pill); background: var(--cuivre); color: var(--sur-cuivre); font: 600 11px/1.3 var(--font-texte); box-shadow: 0 4px 12px rgba(0, 0, 0, .35); }
.epingle { position: absolute; width: 22px; height: 22px; margin: -22px 0 0 -11px; transition: transform .45s cubic-bezier(.3, 1.6, .5, 1), opacity .3s ease; }
.epingle svg { width: 22px; height: 22px; display: block; }
.js .demo .epingle { opacity: 0; transform: translateY(-14px); }
.js .demo.montre-epingles .epingle, .js .demo.etat-final .epingle { opacity: 1; transform: none; }
.js .demo .epingle:nth-of-type(2) { transition-delay: .12s; }
.js .demo .epingle:nth-of-type(3) { transition-delay: .24s; }
.epingle.vous svg { color: var(--cuivre); }
.epingle.autre svg { color: #5d5a55; }
.resultats { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.resultats li { display: grid; grid-template-columns: 26px 1fr auto; gap: var(--space-3); align-items: center; padding: 10px 12px; border-radius: var(--radius-md); border: 1px solid transparent; font-size: 15px; transition: border-color .4s ease, background-color .4s ease, opacity .4s ease; }
.resultats .rang { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 600 13px/1 var(--font-texte); background: var(--surface-2); color: var(--texte-2); }
.resultats b { font-weight: 600; display: block; }
.resultats small { color: var(--texte-3); font-size: 13px; }
.resultats .appel { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--texte-2); }
.resultats .appel svg { width: 15px; height: 15px; }
.resultats li.autre { opacity: .55; }
.resultats li.vous.actif { border-color: var(--cuivre); background: rgba(var(--cuivre-rgb), 0.08); }
.resultats li.vous.actif .rang { background: var(--cuivre); color: var(--sur-cuivre); }
.resultats li.vous.actif .appel { background: var(--cuivre); color: var(--sur-cuivre); }
.bulle { border-radius: var(--radius-md); padding: 12px 14px; font-size: 15px; line-height: 1.55; }
/* ChatGPT : avatar du client à droite de sa question, logo de l'assistant à gauche de la réponse, actions dessous */
.echange { display: flex; gap: 10px; align-items: flex-start; }
.echange-q { justify-content: flex-end; margin-bottom: var(--space-3); }
.echange-r > div { flex: 1; min-width: 0; }
.avatar { flex: none; width: 30px; height: 30px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; }
.avatar svg { width: 100%; height: 100%; display: block; }
.avatar-ia { background: var(--texte); color: var(--fond); }
.avatar-ia svg { width: 18px; height: 18px; }
.actions-ia { display: flex; gap: 12px; margin-top: 8px; padding-left: 4px; }
.actions-ia svg { width: 15px; height: 15px; fill: none; stroke: var(--texte-3); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bulle-q { background: var(--surface-2); margin-left: 12%; transition: opacity .4s ease, transform .4s ease; }
.bulle-r { border: 1px solid var(--ligne); color: var(--texte-2); min-height: 76px; }
.bulle-r strong { color: var(--texte); font-weight: 600; box-shadow: inset 0 -2px 0 var(--cuivre); }
.js .demo .bulle-q { opacity: 0; transform: translateY(8px); }
.js .demo.montre-question .bulle-q, .js .demo.etat-final .bulle-q { opacity: 1; transform: none; }
/* La carte ChatGPT entre à son tour, par-dessus les concurrents, une fois « Votre entreprise » en tête */
.js .demo .demo-chat { opacity: 0; transform: translateY(28px); transition: opacity .5s ease, transform .65s cubic-bezier(.2, .7, .2, 1); }
.js .demo.montre-question .demo-chat, .js .demo.etat-final .demo-chat { opacity: 1; transform: none; }
/* Mobile : la carte ChatGPT, de la même largeur que la carte Maps, chevauche son bas sous le résultat 2
   (le 1 et le 2 restent visibles) et n'entre qu'au défilement (site.js) */
@media (max-width: 999px) {
  .demo-chat { position: relative; z-index: 2; margin: -112px 0 0; }
  .js .demo .demo-chat, .js .demo.montre-question .demo-chat, .js .demo.etat-final .demo-chat { opacity: 0; transform: translateY(28px); }
  .js .demo.chat-vu .demo-chat { opacity: 1; transform: none; }
}
.js .demo.montre-question .bulle-q { transition-delay: .35s; }

/* ---------- Bande des plateformes (sous le haut de page) ---------- */
.plateformes { position: relative; overflow: hidden; border-block: 1px solid var(--ligne); padding-block: var(--space-5); }
.plateformes h2.label { display: block; text-align: center; color: var(--texte-3); margin-bottom: var(--space-4); }
.plateformes-piste { display: flex; width: max-content; animation: defile-logos 120s linear infinite; } /* 40 s par copie de la liste, × 3 copies */
.plateformes:hover .plateformes-piste { animation-play-state: paused; }
.plateformes ul { list-style: none; margin: 0; padding: 0 var(--space-8) 0 0; display: flex; gap: var(--space-8); }
.plateformes::before, .plateformes::after { content: ""; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2; pointer-events: none; }
.plateformes::before { left: 0; background: linear-gradient(90deg, var(--fond), transparent); }
.plateformes::after { right: 0; background: linear-gradient(270deg, var(--fond), transparent); }
.plat { display: inline-flex; align-items: center; gap: 10px; color: var(--texte-2); font-weight: 600; font-size: 16px; white-space: nowrap; transition: color .2s ease; }
.plat svg { width: 22px; height: 22px; flex: none; }
.plat:hover { color: var(--texte); }
.plat-texte span { font-weight: 700; letter-spacing: -0.01em; }
@keyframes defile-logos { to { transform: translateX(-50%); } }

/* ---------- Le problème : parcours du client, la barre avance au défilement ----------
   Lueur cuivre légère (voyant qui s'allume) : exception à la règle « pas de halo », validée par Lucas le 05/10,
   réservée à ce parcours. */
.parcours-cadre { --progression: 0; --lueur: rgba(var(--cuivre-rgb), 0.55); position: relative; }
.parcours { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); position: relative; }
.parcours::before, .parcours::after { content: ""; position: absolute; left: 15px; top: 16px; width: 1px; height: calc(100% - 48px); }
.parcours::before { background: repeating-linear-gradient(180deg, var(--ligne-forte) 0 6px, transparent 6px 12px); }
.parcours::after { left: 14.5px; width: 2px; border-radius: 2px; background: var(--cuivre); box-shadow: 0 0 6px var(--lueur), 0 0 14px rgba(var(--cuivre-rgb), 0.25); transform: scaleY(var(--progression)); transform-origin: top; }
.parcours-tete { position: absolute; z-index: 0; left: 15.5px; top: calc(16px + (100% - 48px) * var(--progression)); width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--texte); box-shadow: 0 0 6px 2px rgba(var(--cuivre-rgb), 0.85), 0 0 18px 5px rgba(var(--cuivre-rgb), 0.35); pointer-events: none; }
.parcours li { position: relative; padding-left: 52px; }
.parcours .pt { position: absolute; left: 0; top: 0; z-index: 1; width: 31px; height: 31px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--ligne-forte); font: 500 12px/1 var(--font-cote); color: var(--texte-2); transition: background-color .35s ease, border-color .35s ease, color .35s ease, box-shadow .5s ease; }
.parcours li.allume .pt { background: var(--cuivre); border-color: var(--cuivre-clair); color: var(--sur-cuivre); box-shadow: 0 0 0 4px rgba(var(--cuivre-rgb), 0.14), 0 0 14px var(--lueur), 0 0 32px rgba(var(--cuivre-rgb), 0.2); animation: allumage .7s ease-out; }
.parcours .quand { font: 500 11px/1.4 var(--font-cote); letter-spacing: .08em; text-transform: uppercase; color: var(--texte-3); transition: color .35s ease, text-shadow .35s ease; }
.parcours li.allume .quand { color: var(--cuivre-texte); text-shadow: 0 0 10px rgba(var(--cuivre-rgb), 0.35); }
.parcours b { display: block; margin: 6px 0; font: 600 19px/1.3 var(--font-titre); }
.parcours p { margin: 0; color: var(--texte-2); font-size: 16px; }
.parcours .requete { display: inline-block; margin-top: 8px; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--surface-2); font-size: 14px; color: var(--texte); }
@keyframes allumage {
  0% { transform: scale(.92); box-shadow: 0 0 0 0 rgba(var(--cuivre-rgb), 0.7), 0 0 4px var(--lueur); }
  45% { transform: scale(1.1); box-shadow: 0 0 0 8px rgba(var(--cuivre-rgb), 0.18), 0 0 22px var(--lueur); }
  100% { transform: scale(1); box-shadow: 0 0 0 4px rgba(var(--cuivre-rgb), 0.14), 0 0 14px var(--lueur), 0 0 32px rgba(var(--cuivre-rgb), 0.2); }
}
@media (min-width: 760px) {
  /* Titre centré au-dessus de la frise horizontale ; à gauche sur mobile, comme la frise verticale */
  .section-head.centre-ordi { margin-inline: auto; text-align: center; justify-items: center; }
  .parcours { grid-template-columns: repeat(4, 1fr); gap: 0; }
  /* Centré : la ligne relie le centre de la 1re étape au centre de la 4e */
  .parcours::before, .parcours::after { left: 12.5%; top: 15px; width: 75%; height: 1px; }
  .parcours::before { background: repeating-linear-gradient(90deg, var(--ligne-forte) 0 6px, transparent 6px 12px); }
  .parcours::after { top: 14.5px; height: 2px; transform: scaleX(var(--progression)); transform-origin: left; }
  .parcours-tete { top: 15.5px; left: calc(12.5% + 75% * var(--progression)); }
  .parcours li { padding: 47px var(--space-4) 0; text-align: center; }
  .parcours .pt { left: calc(50% - 15.5px); }
}
.chute { margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--ligne); text-align: center; }
.chute p { margin: 0 auto; max-width: 760px; font: 600 22px/1.35 var(--font-titre); }
.chute p em { font-style: normal; color: var(--cuivre-texte); }
.chute p.chute-lien { margin-top: var(--space-3); font: 400 17px/1.5 var(--font-texte); color: var(--texte-2); } /* 07/10 : lien vers /simulateur */
.metier-croise { margin: var(--space-6) 0 0; text-align: center; color: var(--texte-2); } /* 07/10 : lien vers l'autre page métier */

/* ---------- Carrousels circulaires (site.js) : coverflow des 3 leviers (accueil), éventail des 7 points (audit) ----------
   Sans JavaScript : les cartes en grille. Avec : une carte active, les autres de part et d'autre ; balayage au doigt ou à la souris. */
.carrousel-scene { display: grid; gap: var(--space-4); }
@media (min-width: 700px) { .carrousel-scene { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } }
.carrousel-nav { display: none; }
.js .carrousel-scene { --glisse: 0px; display: block; position: relative; touch-action: pan-y; -webkit-user-select: none; user-select: none; overflow: hidden; contain: paint; }
/* 06/10 : « overflow: hidden » + « contain: paint » au lieu de « overflow-x: clip » : Safari (et iOS < 16) laissait les cartes
   de côté élargir la page, qui perdait ses marges sur téléphone. La scène est assez haute pour ne rien couper en bas. */
.js .carrousel-scene.glisse > * { transition: none !important; }
/* Bords : les cartes s'effacent dans le fond au lieu d'être coupées net (06/10, Lucas). Un dégradé de la couleur du fond
   est posé par-dessus, sans masque ni flou sur la scène : un masque fait rendre toute la scène comme une image et ramollit
   le texte des cartes inclinées. Le fondu ne dépasse jamais l'écart entre la carte active et le bord : elle n'est jamais touchée. */
.js .carrousel-scene { --fond-scene: var(--fond); --fondu: min(72px, calc((100% - var(--fw)) / 2)); }
.section-alt .carrousel-scene { --fond-scene: var(--surface); }
.js .carrousel-scene::before, .js .carrousel-scene::after { content: ""; position: absolute; z-index: 15; top: 0; bottom: 0; width: var(--fondu); pointer-events: none; }
.js .carrousel-scene::before { left: 0; background: linear-gradient(to right, var(--fond-scene), transparent); }
.js .carrousel-scene::after { right: 0; background: linear-gradient(to left, var(--fond-scene), transparent); }
.js .carrousel-nav { position: relative; z-index: 2; display: flex; justify-content: center; align-items: center; gap: var(--space-4); margin-top: var(--space-3); } /* au-dessus de la scène, qui peut la recouvrir un peu (coverflow) */
.carrousel-btn { width: 48px; height: 48px; display: grid; place-items: center; background: transparent; color: var(--texte); border: 1.5px solid var(--ligne-forte); border-radius: var(--radius-sm); cursor: pointer; transition: border-color .2s ease, color .2s ease; }
.carrousel-btn:hover { border-color: var(--cuivre); color: var(--cuivre-texte); }
.carrousel-btn svg { width: 20px; height: 20px; }
.carrousel-compte { min-width: 64px; text-align: center; }
/* Mobile : indice « Glissez » sous la carte active, effacé au premier changement de carte (site.js) */
.carrousel-indice { display: none; }
@media (max-width: 759px) {
  .js .carrousel-indice { position: absolute; z-index: 20; left: 50%; bottom: 0; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; border-radius: var(--radius-pill); background: var(--fond); border: 1px solid var(--cuivre); color: var(--cuivre-texte); font: 500 11px/1 var(--font-cote); letter-spacing: .08em; text-transform: uppercase; pointer-events: none; transition: opacity .4s ease; }
  .carrousel-indice svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; animation: indice-glisse 1.4s ease-in-out infinite; }
  .carrousel.indice-vu .carrousel-indice { opacity: 0; }
}
@keyframes indice-glisse { 0%, 100% { transform: translateX(-3px); } 50% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .carrousel-indice svg { animation: none; } }

/* Coverflow (modèle « Coverflow Carousel », ruixen, 21st.dev) : la carte du milieu de face, les autres pivotées vers le lecteur */
.cflow-carte { position: relative; display: grid; align-content: start; gap: var(--space-3); padding: 28px 26px 64px; border: 1px solid var(--ligne-forte); border-radius: var(--radius-lg); background: var(--surface); color: var(--texte); }
.cflow-carte .n { font: 500 12px/1 var(--font-cote); letter-spacing: .08em; color: var(--cuivre-texte); }
.cflow-carte .ico { width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--surface-2); display: grid; place-items: center; color: var(--cuivre); }
.cflow-carte .ico svg { width: 22px; height: 22px; }
.cflow-carte h3 { font-size: 1.3rem; }
.cflow-carte p { margin: 0; color: var(--texte-2); font-size: 15.5px; line-height: 1.5; }
.cflow-carte .pied { position: absolute; left: 26px; right: 26px; bottom: 22px; font: 500 11px/1.4 var(--font-cote); letter-spacing: .08em; text-transform: uppercase; color: var(--texte-3); }
/* 07/10 (Lucas) : numéro et icône sur la même ligne, partout (avant : l'icône sous le numéro, une ligne perdue) */
.cflow-carte { grid-template-columns: auto 1fr; column-gap: var(--space-3); }
.cflow-carte .n { grid-area: 1 / 1; align-self: center; }
.cflow-carte .ico { grid-area: 1 / 2; align-self: center; justify-self: start; }
.cflow-carte > :not(.n):not(.ico):not(.pied) { grid-column: 1 / -1; }
.js .coverflow .carrousel-scene { --fw: 340px; --fh: 430px; --k1: .96; height: calc(var(--fh) + 100px); perspective: 1200px; -webkit-transform: translateZ(0); transform: translateZ(0); }
/* La scène est découpée (marges sur téléphone) : elle descend assez bas pour garder toute la lueur de la carte active,
   et les flèches remontent d'autant (06/10). */
.js .coverflow .carrousel-nav { margin-top: -18px; }
/* translateZ(0) : Safari ne découpe les cartes pivotées en 3D que si la scène a son propre calque ; sans lui, elles élargissaient la page sur iPhone (06/10) */
.js .cflow-carte { --x: 0px; --ry: 0deg; --s: 1; position: absolute; left: 50%; top: 24px; width: var(--fw); height: var(--fh); cursor: pointer; box-shadow: 0 30px 50px -28px rgba(0, 0, 0, .8);
  transform: translateX(-50%) translateX(calc(var(--x) + var(--glisse))) rotateY(var(--ry)) scale(var(--s));
  transition: transform .55s cubic-bezier(.4, 0, .2, 1), border-color .4s ease, filter .4s ease; }
.js .cflow-carte:not(.active) { filter: brightness(.6); }
.js .cflow-carte.active { cursor: default; border-color: var(--cuivre); box-shadow: 0 0 0 1px var(--cuivre) inset, 0 34px 60px -30px rgba(var(--cuivre-rgb), .55); }
@media (max-width: 759px) {
  .js .coverflow .carrousel-scene { --fw: 264px; --fh: 424px; --k1: .84; height: calc(var(--fh) + 90px); }
  .js .coverflow .carrousel-indice { bottom: 34px; }
  .js .coverflow .carrousel-nav { margin-top: -22px; }
  .cflow-carte { padding: 22px 20px 58px; } .cflow-carte h3 { font-size: 1.15rem; } .cflow-carte p { font-size: 15px; } .cflow-carte .pied { left: 20px; right: 20px; }
}

/* Éventail (modèle « Stacked Card Carousel », shadcnspace, 21st.dev) : la carte active passe devant, en thème clair (une fiche) ;
   les voisines gardent leur texte, dans une colonne resserrée pour ne pas passer sous la carte active (--cache) */
.feuille { position: relative; display: grid; align-content: start; gap: var(--space-3); padding: 26px 24px 24px; background: var(--surface); border: 1.5px solid var(--ligne-forte); color: var(--texte); clip-path: polygon(0 0, calc(100% - 44px) 0, 100% 44px, 100% 100%, 0 100%); }
.section-alt .feuille { background: var(--fond); }
.feuille .coin { position: absolute; right: -2px; top: 42px; width: 62.2px; height: 1.5px; background: var(--ligne-forte); transform: rotate(45deg); transform-origin: top right; }
.feuille .n { font: 500 12px/1 var(--font-cote); letter-spacing: .08em; color: var(--cuivre-texte); }
.feuille .ico { width: 42px; height: 42px; border-radius: var(--radius-md); background: var(--surface-2); display: grid; place-items: center; color: var(--cuivre); }
.section-alt .feuille .ico { background: var(--surface); }
.feuille .ico svg { width: 22px; height: 22px; }
.feuille .pts { font: 600 34px/1 var(--font-texte); letter-spacing: -0.02em; color: var(--cuivre-texte); margin-top: 6px; }
.feuille .pts small { font: 500 12px/1 var(--font-cote); letter-spacing: .08em; text-transform: uppercase; margin-left: 6px; }
.feuille h3 { color: inherit; font-size: 1.25rem; }
.feuille p { margin: 0; color: var(--texte-2); font-size: 15.5px; line-height: 1.5; }
.js .eventail .carrousel-scene { --fw: 300px; --fh: 410px; --pas: 236px; --cache: 58px; height: calc(var(--fh) + 80px); }
.js .feuille { --d: 0; --ad: 0; position: absolute; left: 50%; top: 20px; width: var(--fw); height: var(--fh); cursor: pointer;
  transform: translateX(-50%) translateX(calc(var(--d) * var(--pas) + var(--glisse))) translateY(calc(var(--ad) * 18px)) rotate(calc(var(--d) * 5deg)) scale(calc(1 - var(--ad) * .06));
  transform-origin: 50% 100%; transition: transform .5s cubic-bezier(.4, 0, .2, 1), background-color .5s ease, border-color .5s ease, color .5s ease, opacity .5s ease, filter .5s ease, padding .5s ease; }
.js .feuille:hover { border-color: rgba(var(--cuivre-rgb), 0.5); }
.js .feuille.gauche { padding-right: calc(24px + var(--cache)); }
.js .feuille.droite { padding-left: calc(24px + var(--cache)); }
.js .feuille.loin { opacity: .55; filter: blur(1.5px); } /* le flou ne touche que les cartes du bout, jamais les voisines de la carte active */
.js .feuille.cachee { opacity: 0; pointer-events: none; }
.js .feuille.active { cursor: default; background: #f4f3f0; border-color: #f4f3f0; color: #16181b; }
.js .feuille.active .coin { background: var(--cuivre); }
.js .feuille.active .n, .js .feuille.active .pts { color: #9a5a2c; }
.js .feuille.active .ico { background: #ebe9e4; color: #9a5a2c; }
.js .feuille.active p { color: #5c6068; }
.js .feuille.active :focus-visible { outline-color: #9a5a2c; }
@media (max-width: 759px) {
  .js .eventail .carrousel-scene { --fw: 236px; --fh: 356px; --pas: 206px; --cache: 0px; height: calc(var(--fh) + 72px); }
  .feuille { padding: 22px 20px 20px; } .feuille h3 { font-size: 1.125rem; } .feuille p { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .js .feuille, .js .cflow-carte { transition: none; } }

/* Ligne de preuve sous les cartes */
.rapport-mensuel { margin: var(--space-6) auto 0; max-width: 920px; text-align: center; color: var(--texte-2); }
/* Icône dans le fil du texte : elle reste collée au début de la première ligne si la phrase passe sur deux lignes */
.rapport-mensuel svg { display: inline-block; width: 22px; height: 22px; margin-right: var(--space-2); vertical-align: -5px; color: var(--cuivre); }
.rapport-mensuel strong { color: var(--texte); font-weight: 600; }

/* ---------- Résultats : comparateur avant / après (modèle « Image Comparison Slider », 21st.dev) ---------- */
/* Un seul cas client : comparateur vertical (capture de téléphone) à gauche, chiffres avant → après à droite */
.cas-unique { display: grid; gap: var(--space-6); align-items: center; }
@media (min-width: 900px) { .cas-unique { grid-template-columns: minmax(0, 380px) 1fr; gap: var(--space-8); } }
.cas { margin: 0; }
.comparateur.portrait { max-width: 380px; margin-inline: auto; background: #fff; }
.cas-legende { margin-top: var(--space-3); text-align: center; font-size: 14px; color: var(--texte-3); }
.cas-texte h3 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin: var(--space-2) 0 var(--space-2); }
.cas-qui { margin: 0 0 var(--space-5); color: var(--texte-2); }
.cas-chiffres { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ligne); }
.cas-chiffres li { display: grid; grid-template-columns: 1fr auto auto auto; gap: var(--space-3); align-items: baseline; padding: var(--space-3) 0; border-bottom: 1px solid var(--ligne); font-variant-numeric: tabular-nums; }
.cc-quoi { font: 500 12px/1.4 var(--font-cote); letter-spacing: .08em; text-transform: uppercase; color: var(--texte-3); }
.cc-avant { color: var(--texte-3); font-size: 17px; }
.cc-fl { color: var(--cuivre); }
.cc-apres { font: 600 22px/1.2 var(--font-titre); color: var(--texte); min-width: 3ch; text-align: right; }
/* Résultats pour le client : ce que la fiche a rapporté, en vert validé */
.cas-gains { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; gap: var(--space-3); }
.cas-gains li { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid color-mix(in srgb, var(--vert) 35%, transparent); border-radius: var(--radius-md); background: color-mix(in srgb, var(--vert) 8%, transparent); color: var(--texte); font-size: 17px; }
.cas-gains svg { flex: none; width: 20px; height: 20px; color: var(--vert); }
.cas-gains b { font: 700 22px/1.2 var(--font-titre); color: var(--vert); margin-right: 2px; }
.cas-source { margin: var(--space-3) 0 0; font-size: 13px; color: var(--texte-3); }
.comparateur { --pos: 50%; position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--ligne-forte); background: var(--fond); cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none; outline: none; }
.comparateur:focus-visible { box-shadow: 0 0 0 2px var(--fond), 0 0 0 4px var(--focus); }
.comp-calque { position: absolute; inset: 0; }
.comp-calque img { width: 100%; height: 100%; object-fit: cover; display: block; }
.comp-avant { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.comp-etiq { position: absolute; bottom: 14px; z-index: 5; font: 500 11px/1 var(--font-cote); letter-spacing: .12em; text-transform: uppercase; color: var(--texte-2); pointer-events: none; padding: 5px 8px; border-radius: var(--radius-sm); background: rgba(20, 22, 25, .75); }
.comp-etiq.g { left: 14px; }
.comp-etiq.d { right: 14px; color: var(--cuivre-texte); }
.comp-trait { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; transform: translateX(-50%); background: var(--cuivre); z-index: 6; pointer-events: none; }
.comp-poignee { position: absolute; top: 50%; left: var(--pos); z-index: 7; width: 42px; height: 42px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--cuivre); color: var(--sur-cuivre); display: grid; place-items: center; pointer-events: none; box-shadow: 0 8px 22px -6px rgba(0, 0, 0, .6); }
.comp-poignee svg { width: 18px; height: 14px; }
.comp-ex { position: absolute; top: 14px; right: 14px; z-index: 5; font: 500 11px/1 var(--font-cote); letter-spacing: .08em; text-transform: uppercase; color: var(--texte-3); border: 1px solid var(--ligne-forte); border-radius: var(--radius-pill); padding: 4px 8px; pointer-events: none; }
/* Fausse fiche Google (brouillon uniquement) */
.scene-fiche { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--space-5); }
.scene-fiche.avant { background: #191c20; }
.scene-fiche.apres { background: #202328; }
.fiche-g { width: min(320px, 86%); background: var(--surface); border: 1px solid var(--ligne-forte); border-radius: var(--radius-md); padding: var(--space-4); display: grid; gap: 6px; font-size: 14px; color: var(--texte-2); }
.fiche-g b { color: var(--texte); font-size: 17px; }
.fg-photos { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 4px; height: 70px; margin-bottom: 4px; }
.fg-photos span { border-radius: 4px; background: #2c3036; }
.fiche-g.vide .fg-photos span { background: repeating-linear-gradient(45deg, #24282d 0 6px, #202328 6px 12px); }
.fiche-g.pleine .fg-photos span:nth-child(1) { background: #3a3530; }
.fiche-g.pleine .fg-photos span:nth-child(2) { background: #2f3a36; }
.fiche-g.pleine .fg-photos span:nth-child(3) { background: #3a332c; }
.fg-note { color: #e3b341; }
.fg-note em { font-style: normal; color: var(--texte-3); }
.fiche-g.vide .fg-note { color: var(--texte-3); }
.fg-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.fg-btns span { padding: 4px 10px; border-radius: var(--radius-pill); border: 1px solid var(--ligne-forte); font-size: 12px; color: var(--texte); }
.fg-btns span:first-child { background: var(--cuivre); color: var(--sur-cuivre); border-color: var(--cuivre); }

/* ---------- Chiffres ---------- */
.chiffres { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
@media (min-width: 900px) { .chiffres { grid-template-columns: repeat(4, 1fr); } }
.chiffre { padding: var(--space-5); border: 1px solid var(--ligne); border-radius: var(--radius-lg); background: var(--fond); }
.chiffre .valeur { display: block; font: 600 clamp(2rem, 5vw, 2.75rem)/1 var(--font-titre); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--texte); }
.chiffre .valeur em { font-style: normal; color: var(--cuivre); }
.chiffre .legende { display: block; margin-top: var(--space-2); color: var(--texte-2); font-size: 15px; line-height: 1.45; }

/* ---------- Cartes ---------- */
.grille { display: grid; gap: var(--space-4); }
@media (min-width: 760px) { .grille-2 { grid-template-columns: repeat(2, 1fr); } .grille-3 { grid-template-columns: repeat(3, 1fr); } .grille-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .grille-4 { grid-template-columns: repeat(4, 1fr); } }
.carte { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--radius-lg); padding: var(--space-5); display: grid; gap: var(--space-3); align-content: start; min-width: 0; transition: border-color .2s ease, transform .2s ease; }
@media (min-width: 900px) { .carte { padding: var(--space-6); } }
.section-alt .carte { background: var(--fond); }
.carte p { margin: 0; color: var(--texte-2); }
.carte .ico { width: 42px; height: 42px; border-radius: var(--radius-md); background: var(--surface-2); display: grid; place-items: center; color: var(--cuivre); }
.section-alt .carte .ico { background: var(--surface); }
.carte .ico svg { width: 22px; height: 22px; }
.carte-lien { position: relative; text-decoration: none; color: inherit; }
/* Lien étendu (07/10) : le lien est sur la phrase du bas, son ::after couvre toute la carte ; le focus clavier entoure la carte comme avant */
.lien-carte { text-decoration: none; }
.lien-carte::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.lien-carte:focus-visible { outline: none; }
.carte-lien:has(.lien-carte:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.carte-lien:hover { border-color: var(--cuivre); transform: translateY(-2px); color: inherit; }
.carte-lien .suite { color: var(--cuivre-texte); font-weight: 600; display: inline-flex; align-items: center; gap: var(--space-2); }
.carte-lien:hover .suite svg { transform: translateX(3px); }
.suite svg { width: 16px; height: 16px; transition: transform .2s ease; }

/* Cartes métier avec illustration */
.metier { padding: 0; overflow: hidden; }
.metier .illu { background: var(--fond); border-bottom: 1px solid var(--ligne); }
.section-alt .metier .illu { background: var(--surface); }
.metier .illu svg { display: block; width: 100%; height: auto; }
.metier .corps { padding: var(--space-5); display: grid; gap: var(--space-3); }
@media (min-width: 900px) { .metier .corps { padding: var(--space-6); } }
/* Votre métier (06/10, Lucas : cadres peu lisibles) : cartes détachées du fond alterné, et la carte qui passe
   au milieu de l'écran s'allume en cuivre (classe .allume posée par site.js ; même lueur que le parcours,
   exception « pas de halo » étendue à cette section). Sans JavaScript : le survol seul. */
.section-alt .metier { background: var(--fond); border-color: var(--ligne-forte); }
#metiers .metier { transition: border-color .45s ease, box-shadow .45s ease, opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); } /* id : passe devant .js .apparait */
.section-alt .metier .illu { background: var(--fond); }
.metier.allume { border-color: var(--cuivre); box-shadow: 0 0 0 1px var(--cuivre) inset, 0 0 18px rgba(var(--cuivre-rgb), 0.28), 0 0 44px rgba(var(--cuivre-rgb), 0.12); }
.metier.allume .illu { border-bottom-color: rgba(var(--cuivre-rgb), 0.35); }
@media (prefers-reduced-motion: reduce) { #metiers .metier { transition: none; } }

/* Autres métiers : bande secondaire sous les deux cartes métier */
.autre-metier { margin-top: var(--space-4); display: grid; gap: var(--space-4); align-items: center; padding: var(--space-5); border: 1px solid var(--ligne); border-radius: var(--radius-lg); background: var(--fond); }
@media (min-width: 760px) { .autre-metier { grid-template-columns: 1fr auto; gap: var(--space-5); padding: var(--space-5) var(--space-6); } }
.autre-metier h3 { font-size: 1.2rem; margin-bottom: var(--space-2); }
.autre-metier p { margin: 0; font-size: 15px; color: var(--texte-3); }
.autre-metier .btn { justify-self: start; }
.pastilles { list-style: none; margin: 0 0 var(--space-2); padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pastilles li { padding: 4px 12px; border-radius: var(--radius-pill); background: var(--surface-2); font-size: 14px; color: var(--texte-2); }

/* ---------- Prix ---------- */
/* ---------- Prix : interrupteur, onglets, cartes, tableau « Comparer » ---------- */
.tarifs-commandes { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-4) var(--space-6); margin-bottom: var(--space-6); }
.facturation { display: flex; align-items: center; gap: var(--space-3); }
.fact-lib { font-size: 15px; font-weight: 500; color: var(--texte-2); transition: color .2s ease; }
.tarifs:not(.trimestre) .fact-mois, .tarifs.trimestre .fact-trim { color: var(--texte); }
.interrupteur { position: relative; width: 48px; height: 28px; border-radius: var(--radius-pill); border: 1px solid var(--ligne-forte); background: var(--surface-2); cursor: pointer; padding: 0; transition: background-color .2s ease, border-color .2s ease; }
.interrupteur span { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--texte); transition: transform .2s ease; }
.interrupteur[aria-checked="true"] { background: var(--cuivre); border-color: var(--cuivre); }
.interrupteur[aria-checked="true"] span { transform: translateX(20px); background: var(--sur-cuivre); }
.pastille-remise { font: 500 11px/1 var(--font-cote); letter-spacing: .06em; color: var(--sur-cuivre); background: var(--cuivre); border-radius: var(--radius-pill); padding: 5px 8px; }
.onglets { display: inline-flex; padding: 4px; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--ligne-forte); }
.onglets [role="tab"] { border: 0; background: none; color: var(--texte-2); font: 600 14px/1 var(--font-texte); padding: 9px 16px; border-radius: var(--radius-pill); cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.onglets [role="tab"][aria-selected="true"] { background: var(--surface-2); color: var(--texte); }
/* Zones tactiles agrandies sans changer le dessin (≈ 44 px de haut pour le doigt) */
.interrupteur::after { content: ""; position: absolute; inset: -8px -6px; }
.onglets [role="tab"] { position: relative; }
.onglets [role="tab"]::after { content: ""; position: absolute; inset: -6px 0; }
/* Sans JavaScript : pas de commandes, les deux panneaux l'un sous l'autre, les deux modes de paiement affichés */
html:not(.js) .tarifs-commandes { display: none; }
html:not(.js) #panneau-comparer { margin-top: var(--space-6); }
.tarifs .v-trim { display: none; }
.tarifs.trimestre .v-trim { display: inline; }
.tarifs.trimestre .v-mois { display: none; }
html:not(.js) .cp-facture .v-trim { display: block; margin-top: 4px; }
.cartes-prix { display: grid; gap: var(--space-5); max-width: 520px; margin-inline: auto; }
@media (min-width: 1000px) { .cartes-prix { max-width: none; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); align-items: stretch; } }
.carte-prix { position: relative; display: grid; grid-template-rows: auto auto auto auto auto 1fr auto; gap: var(--space-3); padding: var(--space-6); border: 1px solid var(--ligne-forte); border-radius: var(--radius-lg); background: var(--surface); }
.carte-prix.reco { border-color: var(--cuivre); box-shadow: 0 0 0 1px var(--cuivre) inset; }
.badge-reco { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); font: 500 11px/1 var(--font-cote); letter-spacing: .08em; text-transform: uppercase; color: var(--sur-cuivre); background: var(--cuivre); border-radius: var(--radius-pill); padding: 6px 10px; white-space: nowrap; }
.carte-prix h3 { font-size: 1.5rem; }
.cp-pour { margin: 0; color: var(--texte-2); font-size: 15px; min-height: 2.9em; } /* 2 lignes réservées : les prix restent alignés d'une carte à l'autre */
#prix .prix-meta, #prix .garantie { max-width: 1040px; margin-inline: auto; }
#prix .prix-meta { text-align: center; }
.cp-prix { margin: var(--space-2) 0 0; font: 600 clamp(2.6rem, 6vw, 3.2rem)/1 var(--font-titre); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--texte); }
.cp-prix small { font: 400 16px/1 var(--font-texte); letter-spacing: 0; color: var(--texte-2); }
.cp-facture { margin: 0; font-size: 14px; color: var(--texte-3); min-height: 2.6em; }
.cp-facture.cp-mep { min-height: 0; margin-top: calc(-1 * var(--space-2)); } /* ligne « Mise en place » (06/10) */
.cp-mep b { font-weight: 600; color: var(--texte-2); }
.cp-liste { list-style: none; margin: var(--space-2) 0 var(--space-3); padding: 0; display: grid; gap: var(--space-3); align-content: start; }
.cp-liste li { display: grid; grid-template-columns: 20px 1fr; gap: var(--space-3); align-items: start; font-size: 16px; line-height: 1.45; color: var(--texte); }
.cp-liste svg { width: 18px; height: 18px; margin-top: 2px; }
.cp-liste .oui svg { color: var(--vert); }
.cp-liste .non { color: var(--texte-3); }
.cp-liste .non svg { color: var(--texte-3); }
.cp-liste .lien svg { color: var(--cuivre); }
.cp-liste .lien a { color: var(--cuivre-texte); font-weight: 600; text-decoration: none; }
.cp-liste .lien a:hover { text-decoration: underline; text-underline-offset: 3px; }
.carte-prix .btn { justify-content: center; }
.comparatif-cadre { max-width: 1040px; margin-inline: auto; border: 1px solid var(--ligne-forte); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); }
.comparatif { width: 100%; border-collapse: collapse; font-size: 15px; }
.comparatif th, .comparatif td { padding: 12px var(--space-4); border-bottom: 1px solid var(--ligne); text-align: left; vertical-align: middle; }
.comparatif thead th { padding-block: var(--space-4); font: 600 16px/1.3 var(--font-titre); color: var(--texte); background: var(--surface-2); }
.comparatif thead th:first-child { font: 500 12px/1.4 var(--font-cote); letter-spacing: .08em; text-transform: uppercase; color: var(--texte-3); }
.comparatif thead th.reco { color: var(--cuivre-texte); }
.comparatif thead th:not(:first-child), .comparatif td { width: 17%; text-align: center; }
.ct-prix { display: block; margin-top: 4px; font: 400 13px/1 var(--font-texte); color: var(--texte-2); }
.comparatif tbody th { font-weight: 400; color: var(--texte); }
.comparatif tr.groupe th { padding-top: var(--space-4); font: 500 11px/1.4 var(--font-cote); letter-spacing: .1em; text-transform: uppercase; color: var(--cuivre-texte); border-bottom-color: var(--ligne-forte); }
.comparatif td svg { width: 18px; height: 18px; vertical-align: middle; }
.comparatif td.oui svg { color: var(--vert); }
.comparatif td.non svg { color: var(--texte-3); }
/* Cellule texte : le niveau diffère d'une formule à l'autre */
.comparatif td.txt { font-size: 13px; line-height: 1.3; color: var(--texte-2); }
.comparatif tbody tr:last-child th, .comparatif tbody tr:last-child td { border-bottom: 0; }
/* Téléphone (05/10, choix de Lucas) : tableau gardé à 3 colonnes, libellés et valeurs courts (classes t-court),
   colonne des libellés séparée par un trait, noms et prix des formules collés sous l'en-tête pendant le défilement */
@media (max-width: 759px) {
  .comparatif-cadre { overflow: clip; }
  .comparatif { table-layout: fixed; font-size: 13px; }
  .comparatif thead th { position: sticky; top: 66px; z-index: 2; padding: 10px 2px; font-size: 13px; line-height: 1.2; border-bottom: 1px solid var(--ligne-forte); }
  .comparatif thead th:first-child { width: 34%; font-size: 0; }
  .comparatif thead th:not(:first-child), .comparatif td { width: 22%; padding: 9px 2px; }
  .comparatif thead th:first-child, .comparatif tbody tr:not(.groupe) th { border-right: 1px solid var(--ligne-forte); }
  .ct-prix { margin-top: 3px; font-size: 11px; }
  .ct-prix small { display: none; }
  .comparatif tbody th { padding: 9px 8px 9px 12px; font-size: 13px; line-height: 1.3; }
  .comparatif tr.groupe th { padding: 12px 12px 6px; }
  .comparatif td.txt { font-size: 11.5px; line-height: 1.25; }
  .comparatif td svg { width: 16px; height: 16px; }
}
@media (max-width: 359px) {
  .comparatif thead th:first-child { width: 31%; }
  .comparatif thead th:not(:first-child), .comparatif td { width: 23%; }
  .comparatif thead th { font-size: 12px; }
}

/* Téléphone (05/10, variante B choisie par Lucas) : formules en carrousel à balayer, ouvert sur Visibilité au centre ;
   cartes réduites pour montrer le bord des voisines (≈ 55 px de chaque côté) ; points et indice « Glissez » (site.js) */
.prix-navig { display: none; }
@media (max-width: 759px) {
  .cartes-prix { --carte: 66vw; display: flex; gap: 10px; max-width: none; margin-inline: calc(-1 * var(--gouttiere)); padding: 16px calc((100vw - var(--carte)) / 2) 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .cartes-prix::-webkit-scrollbar { display: none; }
  .carte-prix { flex: 0 0 var(--carte); scroll-snap-align: center; padding: var(--space-4) 14px; gap: var(--space-2); }
  .carte-prix h3 { font-size: 1.2rem; }
  .cp-pour { font-size: 13px; min-height: 0; }
  .cp-prix { font-size: 2.1rem; }
  .cp-prix small { font-size: 13px; }
  .cp-facture { font-size: 12px; min-height: 0; }
  .cp-liste { gap: var(--space-2); }
  .cp-liste li { font-size: 13.5px; grid-template-columns: 16px 1fr; gap: var(--space-2); }
  .cp-liste svg { width: 15px; height: 15px; }
  .carte-prix .btn { padding: 11px 8px; font-size: 13.5px; }
  .badge-reco { font-size: 9.5px; padding: 5px 8px; }
  .prix-navig { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); margin-top: var(--space-3); }
  .prix-points { display: flex; gap: 6px; }
  .prix-points span { width: 6px; height: 6px; border-radius: 50%; background: var(--ligne-forte); transition: width .3s ease, background-color .3s ease; }
  .prix-points span.on { width: 18px; border-radius: 3px; background: var(--cuivre); }
  .prix-indice { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; border-radius: var(--radius-pill); background: var(--fond); border: 1px solid var(--cuivre); color: var(--cuivre-texte); font: 500 11px/1 var(--font-cote); letter-spacing: .08em; text-transform: uppercase; pointer-events: none; transition: opacity .4s ease; }
  .prix-indice svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; animation: indice-glisse 1.4s ease-in-out infinite; }
  .prix-navig.indice-vu .prix-indice { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .prix-indice svg { animation: none; } }

/* ---------- UPVIS face au marché : ligne cuivre qui se remplit au défilement (même lueur que le parcours) ---------- */
.section-head.centre { margin-inline: auto; text-align: center; justify-items: center; }
.vs-titre { font-size: clamp(1.9rem, 4.5vw, 3rem); line-height: 1.12; }
.vs-autres { color: var(--texte-3); }
.vs-nous { color: var(--cuivre-texte); }
.vs-cadre { --progression: 0; max-width: 980px; margin-inline: auto; padding: var(--space-5) var(--space-4); border: 1px solid var(--ligne-forte); border-radius: var(--radius-lg); background: var(--fond); }
.vs-entete { display: none; }
.vs-lignes { list-style: none; margin: 0; padding: 0; position: relative; }
.vs-lignes::before, .vs-lignes::after { content: ""; position: absolute; top: 0; bottom: 0; left: 27px; width: 2px; }
.vs-lignes::before { background: repeating-linear-gradient(180deg, var(--ligne-forte) 0 6px, transparent 6px 12px); width: 1px; left: 27.5px; }
.vs-lignes::after { background: var(--cuivre); box-shadow: 0 0 6px rgba(var(--cuivre-rgb), 0.55), 0 0 14px rgba(var(--cuivre-rgb), 0.25); transform: scaleY(var(--progression)); transform-origin: top; }
.vs-ligne { position: relative; display: grid; grid-template-columns: 56px 1fr; column-gap: var(--space-4); row-gap: 6px; padding: var(--space-4) 0; border-bottom: 1px dashed var(--ligne); }
.vs-ligne:last-child { border-bottom: 0; }
.vs-repere { grid-column: 1; grid-row: 1 / span 2; align-self: center; position: relative; z-index: 1; width: 56px; height: 56px; display: grid; place-content: center; text-align: center; border-radius: var(--radius-md); border: 1px solid var(--ligne-forte); background: var(--surface); transition: border-color .35s ease, box-shadow .5s ease; }
.vs-repere b { font: 500 13px/1 var(--font-cote); color: var(--texte-2); transition: color .35s ease; }
.vs-repere small { margin-top: 4px; font: 500 9px/1 var(--font-cote); letter-spacing: .06em; text-transform: uppercase; color: var(--texte-3); }
.vs-n, .vs-m { margin: 0; display: flex; gap: var(--space-2); align-items: flex-start; font-size: 15px; line-height: 1.45; }
.vs-n { grid-column: 2; color: var(--texte-2); transition: color .35s ease; }
.vs-m { grid-column: 2; color: var(--texte-3); }
.vs-n svg, .vs-m svg { flex: none; width: 17px; height: 17px; margin-top: 2px; }
.vs-n svg { color: var(--texte-3); transition: color .35s ease; }
.vs-m svg { color: var(--texte-3); order: -1; }
.vs-ligne.allume .vs-repere { border-color: var(--cuivre); box-shadow: 0 0 0 3px rgba(var(--cuivre-rgb), 0.12), 0 0 18px rgba(var(--cuivre-rgb), 0.35); }
.vs-ligne.allume .vs-repere b { color: var(--cuivre-texte); }
.vs-ligne.allume .vs-n { color: var(--texte); }
.vs-ligne.allume .vs-n svg { color: var(--vert); }
@media (min-width: 900px) {
  .vs-cadre { padding: var(--space-5) var(--space-6); }
  .vs-entete { display: grid; grid-template-columns: 1fr 96px 1fr; padding-bottom: var(--space-3); border-bottom: 1px solid var(--ligne); }
  .vs-entete .label:first-child { text-align: right; }
  .vs-entete .label:last-child { color: var(--texte-3); }
  .vs-lignes::before { left: calc(50% - 0.5px); }
  .vs-lignes::after { left: calc(50% - 1px); }
  .vs-ligne { grid-template-columns: 1fr 96px 1fr; column-gap: 0; padding: var(--space-5) 0; }
  .vs-repere { grid-column: 2; grid-row: 1; justify-self: center; width: 64px; height: 64px; }
  .vs-n { grid-column: 1; grid-row: 1; justify-content: flex-end; text-align: right; padding-right: var(--space-5); align-self: center; font-size: 16px; }
  .vs-n svg { order: -1; }
  .vs-m { grid-column: 3; grid-row: 1; padding-left: var(--space-5); align-self: center; font-size: 16px; }
  .vs-m svg { order: 2; }
}
/* Téléphone (moins de 760 px) : les deux colonnes de l'ordinateur, resserrées, avec les textes courts
   (modèle de l'ancien UpVision mobile). Tablette et ordinateur ne changent pas. */
.t-court { display: none; }
@media (max-width: 759px) {
  .vs-cadre { padding: var(--space-4) var(--space-3); }
  .vs-entete { display: grid; grid-template-columns: minmax(0, 1fr) 66px minmax(0, 1fr); padding-bottom: var(--space-3); border-bottom: 1px solid var(--ligne); }
  .vs-entete .label { font-size: 11px; }
  .vs-entete .label:last-child { text-align: right; color: var(--texte-3); }
  .vs-lignes::before { left: calc(50% - 0.5px); }
  .vs-lignes::after { left: calc(50% - 1px); }
  .vs-ligne { grid-template-columns: minmax(0, 1fr) 66px minmax(0, 1fr); column-gap: 0; row-gap: 0; padding: 14px 0; }
  .vs-repere { grid-column: 2; grid-row: 1; justify-self: center; width: 60px; height: 52px; }
  .vs-repere b { font-size: 12px; }
  .vs-repere small { font-size: 10px; letter-spacing: .04em; }
  .vs-n, .vs-m { grid-row: 1; align-self: center; gap: 6px; font-size: 13px; line-height: 1.4; }
  .vs-n { grid-column: 1; padding-right: var(--space-2); }
  .vs-m { grid-column: 3; justify-content: flex-end; text-align: right; padding-left: var(--space-2); }
  .vs-m svg { order: 2; }
  .vs-n svg, .vs-m svg { width: 15px; height: 15px; margin-top: 1px; }
}
@media (max-width: 759px) {
  .t-long { display: none; }
  .t-court { display: inline; }
}
/* « Le calcul » des pages métier : la preuve client tient sur une ligne jusqu'à 320 px (06/10, Lucas) */
@media (max-width: 359px) {
  .calcul-gain li { padding-inline: 10px; gap: var(--space-2); }
}
@media (max-width: 359px) { .vs-n, .vs-m { font-size: 12px; } }
.vs-cta { margin-top: var(--space-7); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-3) var(--space-5); color: var(--texte-2); }

.prix-meta { margin-top: var(--space-5); color: var(--texte-2); }
/* Garantie (06/10) : un titre et une phrase, l'icône centrée verticalement sur le bloc, dans une pastille verte */
.garantie { margin-top: var(--space-5); display: grid; grid-template-columns: auto 1fr; gap: var(--space-5); align-items: center; padding: var(--space-5) var(--space-6); border: 1px solid var(--ligne); border-radius: var(--radius-lg); background: var(--surface); }
.section-alt .garantie { background: var(--fond); }
.garantie .ico { width: 48px; height: 48px; border-radius: 50%; background: color-mix(in srgb, var(--vert) 14%, transparent); border: 1px solid color-mix(in srgb, var(--vert) 35%, transparent); display: grid; place-items: center; }
.garantie .ico svg { width: 24px; height: 24px; color: var(--vert); }
.garantie b { display: block; color: var(--vert); font-weight: 600; font-size: 18px; margin-bottom: 2px; }
@media (max-width: 599px) { .garantie { gap: var(--space-4); padding: var(--space-4); } .garantie .ico { width: 42px; height: 42px; } .garantie .ico svg { width: 21px; height: 21px; } }
.garantie p { margin: 0; color: var(--texte-2); }
.garantie p + p { margin-top: var(--space-2); }


/* ---------- Fondateur ---------- */
/* Qui : portrait + citation + 3 arguments + carte de la zone (option A) */
/* Ordinateur : la photo prend toute la hauteur du texte (alignée en haut et en bas) */
.fondateur { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
.fondateur-photo { position: relative; max-width: 440px; }
.fondateur-photo img { width: 100%; height: auto; display: block; border-radius: var(--radius-lg); border: 1px solid var(--ligne-forte); }
@media (min-width: 900px) {
  .fondateur { grid-template-columns: 400px 1fr; column-gap: 64px; align-items: stretch; }
  .fondateur-photo img { height: 100%; object-fit: cover; object-position: 45% 30%; }
}
.fondateur-plaque { position: absolute; left: 16px; bottom: 16px; padding: 10px 14px; border-radius: var(--radius-md); background: rgba(20, 22, 25, .82); backdrop-filter: blur(6px); border: 1px solid var(--ligne-forte); }
.fondateur-plaque b { display: block; color: var(--texte); font-weight: 600; }
.fondateur-plaque span { font: 500 11px/1.4 var(--font-cote); letter-spacing: .08em; text-transform: uppercase; color: var(--cuivre-texte); }
.fondateur-cit { margin: var(--space-5) 0 0; padding-left: var(--space-4); border-left: 2px solid var(--cuivre); font: 500 19px/1.45 var(--font-titre); color: var(--texte); }
.fondateur-cit cite { display: block; margin-top: var(--space-2); font: 500 12px/1.4 var(--font-cote); letter-spacing: .08em; text-transform: uppercase; font-style: normal; color: var(--texte-3); }
.fondateur-points { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; gap: var(--space-4); }
.fondateur-points li { display: grid; grid-template-columns: 40px 1fr; gap: var(--space-3); align-items: start; }
.fondateur-points .i { width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--surface-2); display: grid; place-items: center; color: var(--cuivre); }
.fondateur-points .i svg { width: 18px; height: 18px; }
.fondateur-points b { display: block; color: var(--texte); font-weight: 600; }
.fondateur-points span:not(.i) { color: var(--texte-2); font-size: 15px; }
/* Carte de la zone : petite vignette en fin de texte (contours en données ouvertes, zone en cuivre) */
.zone { margin: var(--space-5) 0 0; padding: var(--space-3) var(--space-4) var(--space-3) var(--space-3); max-width: 420px; display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: var(--space-4); align-items: center; border: 1px solid var(--ligne); border-radius: var(--radius-md); background: var(--surface); }
.zone figcaption { display: grid; gap: var(--space-1); color: var(--texte); font-size: 15px; }
@media (max-width: 400px) { .zone { grid-template-columns: 112px minmax(0, 1fr); gap: var(--space-3); } } /* 07/10 : la légende dépassait de 4 px à 320 px */
.zone .cz-nom { display: none; }
.carte-zone { width: 100%; height: auto; display: block; }
.cz-voisin { fill: none; stroke: var(--ligne-forte); stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.cz-zone { fill: rgba(var(--cuivre-rgb), .16); stroke: var(--cuivre); stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.cz-ville { fill: var(--texte); stroke: var(--surface); stroke-width: 2; }
.cz-nom { font: 500 21px var(--font-cote); fill: var(--texte); paint-order: stroke; stroke: var(--surface); stroke-width: 6px; stroke-linejoin: round; }

/* ---------- FAQ ---------- */
/* FAQ : accordéon centré, questions séparées par des filets (modèle « FAQ Accordion Section », 21st.dev) */
.faq { max-width: 760px; margin-inline: auto; border-top: 1px solid var(--ligne); }
.faq details { border-bottom: 1px solid var(--ligne); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-5) var(--space-1); font: 600 18px/1.35 var(--font-titre); color: var(--texte); transition: color .2s ease; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--cuivre-texte); }
.faq summary svg { flex: none; width: 20px; height: 20px; color: var(--texte-3); transition: transform .3s ease, color .2s ease; }
.faq details[open] summary svg { transform: rotate(180deg); color: var(--cuivre); }
.faq-reponse { padding: 0 var(--space-1) var(--space-5); }
.faq-reponse p { margin: 0; color: var(--texte-2); max-width: 680px; }
/* Ouverture animée là où le navigateur le permet (sinon instantanée) */
:root { interpolate-size: allow-keywords; }
.faq details::details-content { block-size: 0; overflow: hidden; transition: block-size .3s ease, content-visibility .3s ease allow-discrete; }
.faq details[open]::details-content { block-size: auto; }
.faq-contact { max-width: 760px; margin: var(--space-7) auto 0; display: grid; justify-items: center; gap: var(--space-3); padding: var(--space-6) var(--space-5); text-align: center; border: 1px solid var(--ligne-forte); border-radius: var(--radius-lg); background: var(--fond); }
.faq-contact-ico { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--cuivre); }
.faq-contact-ico svg { width: 22px; height: 22px; }
.faq-contact h3 { margin: 0; }
.faq-contact p { margin: 0; max-width: 520px; color: var(--texte-2); }
.faq-contact-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-2); }

/* ---------- Audit / formulaire ---------- */
.audit-grid { display: grid; gap: var(--space-6); align-items: start; }
@media (min-width: 900px) { .audit-grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center; } }
.form-card { background: var(--surface); border: 1px solid var(--ligne-forte); border-radius: var(--radius-lg); padding: var(--space-5); }
@media (min-width: 760px) { .form-card { padding: var(--space-6); } }
.field { margin-bottom: var(--space-4); }
.field label { display: block; font-weight: 600; font-size: 15px; margin-bottom: 6px; }
.field input, .field select { width: 100%; font: 400 17px/1.3 var(--font-texte); color: var(--texte); background: var(--surface-2); border: 1px solid var(--ligne-forte); border-radius: var(--radius-sm); padding: 13px 14px; transition: border-color .2s ease; }
.field select option { background: var(--surface); color: var(--texte); }
.field input:focus, .field select:focus { outline: 2px solid var(--focus); outline-offset: 1px; border-color: transparent; }
.form-card .btn { width: 100%; justify-content: center; margin-top: var(--space-2); }
.form-note { margin: var(--space-4) 0 0; font-size: 14px; color: var(--texte-3); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.alerte { padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); margin-bottom: var(--space-4); font-size: 15px; }
.alerte-erreur { border: 1px solid var(--erreur); color: var(--erreur); }
.promesses { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; gap: var(--space-3); }
.promesses li { display: flex; gap: var(--space-3); align-items: center; color: var(--texte-2); }
.promesses svg { width: 18px; height: 18px; color: var(--vert); flex: none; }

/* ---------- Pages de contenu ---------- */
.page-intro { padding-block: var(--space-7) var(--space-6); border-bottom: 1px solid var(--ligne); }
.page-intro .lead { max-width: 680px; margin: var(--space-4) 0 0; }
.prose { max-width: 760px; }
.prose h2 { margin: var(--space-7) 0 var(--space-3); font-size: 1.5rem; }
.prose h3 { margin: var(--space-5) 0 var(--space-2); font-size: 1.15rem; }
.prose p, .prose li { color: var(--texte-2); }
.prose strong { color: var(--texte); font-weight: 600; }
.prose ul { padding-left: 20px; }
.prose li { margin-bottom: var(--space-2); }
.emplacement { border: 1.5px dashed var(--ligne-forte); border-radius: var(--radius-lg); background: var(--surface); padding: var(--space-6); text-align: center; color: var(--texte-3); }
.calcul { display: grid; gap: var(--space-2); font-variant-numeric: tabular-nums; }
.calcul .ligne-c { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--ligne); }
.calcul .ligne-c:last-child { border-bottom: 0; font-weight: 600; color: var(--texte); }
.calcul .ligne-c span:first-child { color: var(--texte-2); }
.calcul .ligne-c span:last-child { white-space: nowrap; text-align: right; }
/* Gain d'un client réel sous le calcul (même style que les gains de l'accueil, en plus compact) */
.calcul-gain { margin-top: var(--space-4); }
.calcul-gain li { font-size: 15px; }
.calcul-gain b { font-size: 19px; }

/* Accueil : onglets des cas clients (06/10) */
.onglets-cas { display: flex; width: max-content; max-width: 100%; margin: 0 auto var(--space-6); }
.onglets-cas [role="tab"] { white-space: nowrap; }
@media (max-width: 400px) { .onglets-cas [role="tab"] { padding-inline: 12px; font-size: 13.5px; } }
.cas-panneau[hidden] { display: none; }
/* Balayage d'un cas à l'autre (site.js) : le cas suit le doigt, revient s'il n'est pas lâché assez loin, le suivant entre par le côté */
.js .cas-panneau { touch-action: pan-y pinch-zoom; transition: transform .25s ease, opacity .25s ease; }
.js .cas-panneau.cas-glisse { transition: none; }
.cas-entre-droite { animation: cas-entre-droite .35s cubic-bezier(.2, .7, .2, 1); }
.cas-entre-gauche { animation: cas-entre-gauche .35s cubic-bezier(.2, .7, .2, 1); }
@keyframes cas-entre-droite { from { opacity: 0; transform: translateX(40px); } }
@keyframes cas-entre-gauche { from { opacity: 0; transform: translateX(-40px); } }
@media (prefers-reduced-motion: reduce) { .js .cas-panneau { transition: none; } .cas-entre-droite, .cas-entre-gauche { animation: none; } }

/* Pages métier : cas client (inc/cas-metier.php) — site refait (écran + téléphone) ou fiche Google */
.cas-metier { display: grid; gap: var(--space-7); align-items: center; }
@media (min-width: 900px) { .cas-metier { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-8); } }
.cas-visuel { position: relative; margin: 0; }
.cas-visuel-site { margin: 0 0 9% 0; }
.cas-ecran { border-radius: 12px; overflow: hidden; border: 1px solid var(--ligne-forte); background: #0d0f11; box-shadow: var(--ombre-flottante); }
.cas-ecran-barre { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: var(--surface-2); border-bottom: 1px solid var(--ligne); }
.cas-ecran-barre span { width: 9px; height: 9px; border-radius: 50%; background: var(--ligne-forte); }
.cas-ecran-barre em { margin-left: 10px; font: 500 11px/1 var(--font-cote); font-style: normal; letter-spacing: .04em; color: var(--texte-3); }
.cas-ecran img, .cas-tel img, .cas-fiche img { display: block; width: 100%; height: auto; }
.cas-ecran .comparateur { border: 0; border-radius: 0; }
.cas-metier .comparateur.portrait { max-width: 340px; }
.cas-tel { position: absolute; right: -2%; bottom: -12%; width: 27%; border-radius: 20px; border: 5px solid #2a2d32; overflow: hidden; background: #000; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .7); }
@media (max-width: 599px) { .cas-tel { right: 0; width: 31%; border-width: 4px; border-radius: 16px; } }
/* Fiche Google (06/10, Lucas) : sans arrondi ni cadre épais (ils rognaient le titre), plus large pour être lisible sur mobile */
.cas-fiche { max-width: 380px; margin-inline: auto; border: 1px solid rgba(241, 237, 230, .3); border-radius: 5px; overflow: hidden; background: #fff; box-shadow: var(--ombre-flottante); } /* 06/10 (Lucas) : léger cadre et arrondi de 5 px (IM Énergies, Thermiclim ; Lumëel a son cadre d'écran) */
.cas-sous-titre { margin: var(--space-5) 0 var(--space-3); font: 500 11px/1.4 var(--font-cote); letter-spacing: .1em; text-transform: uppercase; color: var(--texte-3); }
.cas-fait { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.cas-fait li { display: grid; grid-template-columns: 20px 1fr; gap: var(--space-3); align-items: start; color: var(--texte); }
.cas-fait svg { width: 18px; height: 18px; margin-top: 3px; color: var(--vert); }
/* Détail des actions sous chaque catégorie (06/10) : plus petit, filet cuivre en guise de puce */
.cas-fait { gap: var(--space-2); }
.cf-titre { display: block; font-weight: 600; color: var(--texte); }
/* Détail replié (06/10) : la ligne entière s'ouvre ; étiquette « Voir le détail » / « Masquer » pour que ce soit clair */
.cas-fait > li { display: block; }
.cf summary { display: grid; grid-template-columns: 20px 1fr auto; gap: var(--space-3); align-items: center; min-height: 44px; list-style: none; cursor: pointer; border-radius: var(--radius-sm); }
.cf summary::-webkit-details-marker { display: none; }
.cf summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cf summary svg { margin-top: 0; }
.cf-voir { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font: 500 11px/1 var(--font-cote); letter-spacing: .08em; text-transform: uppercase; color: var(--cuivre-texte); }
.cf-voir::before { content: "Voir le détail"; }
.cf-voir::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.cf[open] .cf-voir::before { content: "Masquer"; }
@media (max-width: 599px) { .cf-voir::before { content: "Détail"; } .cf[open] .cf-voir::before { content: "Masquer"; } }
.cf[open] .cf-voir::after { transform: translateY(2px) rotate(-135deg); }
.cf summary:hover .cf-titre { color: var(--cuivre-texte); }
.cas-fait .cas-fait-detail { list-style: none; margin: 4px 0 var(--space-2) 32px; padding: 0; display: grid; gap: 4px; }
@media (prefers-reduced-motion: reduce) { .cf-voir::after { transition: none; } }
.cas-fait .cas-fait-detail li { display: block; position: relative; padding-left: 16px; font-size: 15px; line-height: 1.45; color: var(--texte-2); }
.cas-fait .cas-fait-detail li::before { content: ""; position: absolute; left: 0; top: .72em; width: 8px; height: 1px; background: var(--cuivre); }
.cas-auj { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ligne); }
.cas-auj li { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--ligne); color: var(--texte-2); }
.cas-auj b { color: var(--texte); font-weight: 600; }
.cas-lien { display: inline-block; padding-block: 10px; margin-top: var(--space-2); color: var(--cuivre-texte); font-weight: 600; text-decoration: none; }
.cas-lien:hover { text-decoration: underline; }

/* Pages métier : « Leads ou appels directs » (lead acheté face à l'appel venu de la fiche) */
.leads-duel { display: grid; gap: var(--space-4); }
@media (min-width: 760px) { .leads-duel { grid-template-columns: 1fr 1fr; } }
.leads-col h3 { font-size: 19px; }
.leads-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.leads-col li { display: grid; grid-template-columns: 20px 1fr; gap: var(--space-3); align-items: start; font-size: 15.5px; line-height: 1.45; }
.leads-col li svg { width: 18px; height: 18px; margin-top: 2px; }
.leads-achete { background: transparent; }
.leads-achete h3, .leads-achete li { color: var(--texte-3); }
.leads-achete li svg { color: var(--texte-3); }
.leads-fiche { border-color: var(--cuivre); box-shadow: 0 0 0 1px var(--cuivre) inset; }
.leads-fiche li { color: var(--texte); }
.leads-fiche li svg { color: var(--vert); }
.leads-calcul { margin: var(--space-5) 0 0; padding: var(--space-4) var(--space-5); border-left: 3px solid var(--cuivre); background: var(--surface); border-radius: 0 var(--radius-md) var(--radius-md) 0; color: var(--texte-2); }
.leads-calcul b { color: var(--texte); font-weight: 600; }
.leads-source { margin-top: var(--space-3); }

/* Pages métier : « Ce que tapent vos clients » (vraies recherches suggérées par Google) */
.requetes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
@media (min-width: 760px) { .requetes { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); } }
.requete { display: grid; gap: var(--space-3); align-content: start; padding: var(--space-4); border: 1px solid var(--ligne); border-radius: var(--radius-lg); background: var(--fond); }
.requete .champ-recherche { min-width: 0; font-size: 15px; line-height: 1.35; padding-block: 9px; }
.requete .champ-recherche span { min-width: 0; }
.requete p { margin: 0; color: var(--texte-2); font-size: 15px; }
.requete p b { color: var(--cuivre-texte); font-weight: 600; }

/* Glossaire */
.filtre { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); }
.filtre input { flex: 1 1 260px; font: 400 17px/1.3 var(--font-texte); color: var(--texte); background: var(--surface); border: 1px solid var(--ligne-forte); border-radius: var(--radius-sm); padding: 12px 14px; }
.termes { display: grid; gap: var(--space-3); }
@media (min-width: 900px) { .termes { grid-template-columns: 1fr 1fr; } }
.terme { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--radius-lg); padding: var(--space-5); }
.terme h2 { font-size: 1.15rem; margin-bottom: var(--space-2); }
.terme p { margin: 0; color: var(--texte-2); font-size: 16px; }
.terme .label { display: inline-block; margin-bottom: var(--space-2); color: var(--texte-3); }
.aucun { color: var(--texte-3); }

/* ---------- Pied de page ---------- */
.site-footer { border-top: 1px solid var(--ligne); padding-block: 72px var(--space-5); color: var(--texte-2); font-size: 15px; }
.footer-grid { display: grid; gap: var(--space-6); }
@media (min-width: 600px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; } }
.site-footer .logo-pied { margin: 0; }
.site-footer .logo-pied svg, .site-footer .logo-pied img { width: 180px; height: auto; }
.footer-desc { max-width: 320px; margin: var(--space-4) 0 0; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.site-footer a { color: var(--texte); text-decoration: none; }
.site-footer a:hover { color: var(--cuivre-texte); }
.footer-titre { margin: 0 0 14px; font: 500 11px/1.4 var(--font-cote); letter-spacing: .1em; text-transform: uppercase; color: var(--texte-3); }
.footer-contact li { display: flex; gap: 10px; align-items: center; }
.footer-contact svg { width: 16px; height: 16px; color: var(--cuivre); flex: none; }
.footer-bas { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--ligne); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); color: var(--texte-3); font-size: 13px; }
.footer-bas nav { display: flex; gap: 20px; }
.site-footer .footer-bas a { color: var(--texte-3); }
.site-footer .footer-bas a:hover { color: var(--cuivre-texte); }
/* Téléphone (06/10, option B choisie par Lucas) : pied compact et centré, liens à la suite, téléphone et e-mail en gros boutons */
@media (max-width: 599px) {
  .site-footer { padding-top: 44px; text-align: center; }
  .footer-grid { gap: 24px; justify-items: center; }
  .footer-desc { margin: 12px auto 0; }
  .footer-titre { display: none; }
  .site-footer nav ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 0; }
  .site-footer nav ul li + li::before { content: "·"; margin: 0 10px; color: var(--texte-3); }
  .footer-grid > nav + nav { margin-top: -14px; }
  .footer-grid > nav:first-of-type ul { flex-direction: column; gap: 6px; }
  .footer-grid > nav:first-of-type ul li::before { content: none; }
  .footer-contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; width: 100%; }
  .footer-contact li { min-width: 0; justify-content: center; min-height: 48px; padding: 0 10px; border: 1px solid var(--ligne-forte); border-radius: var(--radius-md); font-size: 14px; }
  .footer-contact li:last-child { grid-column: 1 / -1; border: 0; min-height: 0; color: var(--texte-3); }
  .footer-contact li:nth-child(2) a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .footer-bas { margin-top: 28px; justify-content: center; text-align: center; }
}

/* Bouton d'appel flottant (mobile) */
.appel-flottant { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 40; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--cuivre); color: var(--sur-cuivre); box-shadow: var(--ombre-flottante); }
.appel-flottant svg { width: 22px; height: 22px; }
@media (min-width: 1040px) { .appel-flottant { display: none; } }
/* Tant que le bouton d'appel flotte, le bas du pied de page lui laisse la place */
@media (max-width: 1039px) { .site-footer { padding-bottom: 96px; } }

/* ---------- Apparitions au défilement ---------- */
.js .apparait { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.js .apparait.visible { opacity: 1; transform: none; }

/* ---------- Illustrations animées ---------- */
.air { stroke-dasharray: 10 12; animation: flux 1.8s linear infinite; }
.vue-mobile { display: none; }
@media (max-width: 759px) { .vue-ordi { display: none; } .vue-mobile { display: inline; } }
.flux-cable { stroke-dasharray: 2 16; animation: flux-cable 1.2s linear infinite; }
.charge { animation: charge 3.2s ease-in-out infinite; transform-origin: left center; transform-box: fill-box; }
.onde-logo { animation: onde 2.8s ease-in-out infinite; transform-origin: 20px 27px; transform-box: view-box; }

/* Brouillon : affirmations à vérifier avant mise en ligne */
.a-verifier { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: var(--radius-sm); border: 1px solid #f2b24c66; color: #f2b24c; font: 500 11px/1.6 var(--font-cote); letter-spacing: .04em; vertical-align: middle; }

@keyframes clignote { 50% { opacity: 0; } }
@keyframes flux { to { stroke-dashoffset: -28; } }
@keyframes flux-cable { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -36; } }
@keyframes charge { 0% { transform: scaleX(.12); } 70%, 100% { transform: scaleX(1); } }
@keyframes onde { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ---------- Pages métier : roue des services (05/10, modèle « Works Wheel » de 21st.dev choisi par Lucas) ----------
   Réécrite pour tourner avec le défilement normal de la page (l'original bloquait le défilement) : la scène reste collée
   sous l'en-tête, un service par pas de défilement, texte du service actif au centre. Construite par site.js ;
   sans JavaScript ou si le visiteur réduit les animations, la grille d'origine reste affichée. */
.roue-scene { --pas: 42vh; --haut: 66px; position: relative; overflow-x: clip; height: calc(100vh - var(--haut) + 5 * var(--pas)); margin-top: calc(-1 * var(--space-7)); }
.roue-liste { display: none; }
.roue-stage { position: sticky; top: var(--haut); height: calc(100vh - var(--haut)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-5); text-align: center; }
.roue-stage .section-head { margin: 0; justify-items: center; text-align: center; }
.roue { --d: min(calc(100vw - 60px), 340px); /* 07/10 (Lucas) : 315 px sur un téléphone de 375 px, au lieu de 295 ; 30 px de marge = les icônes (48 px, à cheval sur le cercle) restent entières */ --rot: 0deg; position: relative; width: var(--d); height: var(--d); flex: none; margin: 22px 0; }
@media (min-width: 760px) { .roue { --d: 500px; } }
@media (min-width: 760px) and (max-height: 820px) { .roue { --d: min(500px, calc(100vh - 300px)); } }
/* Écrans courts (petits téléphones) : le chapeau sous le titre est masqué dans la scène et la roue rétrécit, pour que tout tienne à l'écran */
@media (max-width: 759px) and (max-height: 700px) {
  .roue-stage .section-head .lead { display: none; }
  .roue { --d: min(calc(100vw - 60px), 300px); } /* 07/10 : 260 px à 320 de large (avant 240) ; icônes entières */
  .roue-stage { gap: var(--space-3); }
}
.roue-trace { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.roue-trace .fond { fill: none; stroke: var(--ligne-forte); stroke-width: .35; stroke-dasharray: 1 1.6; }
.roue-trace .avance { fill: none; stroke: var(--cuivre); stroke-width: .5; stroke-linecap: round; transition: stroke-dashoffset .15s linear; }
.roue-anneau { position: absolute; inset: 0; transform: rotate(var(--rot)); }
.roue-noeud { --a: 0deg; position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; padding: 0; display: grid; place-items: center;
  border-radius: var(--radius-md); border: 1px solid var(--ligne-forte); background: var(--surface); color: var(--texte-3); cursor: pointer;
  transform: rotate(var(--a)) translateY(calc(var(--d) / -2)) rotate(calc(-1 * var(--a) - var(--rot)));
  transition: border-color .35s ease, background-color .35s ease, color .35s ease, box-shadow .35s ease; }
.roue-noeud svg { width: 22px; height: 22px; }
.section-alt .roue-noeud { background: var(--fond); }
.roue-noeud.vu { color: var(--cuivre-texte); }
.roue-noeud.actif { border-color: var(--cuivre); background: #2a2420; color: var(--cuivre); box-shadow: 0 0 0 4px rgba(var(--cuivre-rgb), .14); }
.roue-centre { position: absolute; left: 50%; top: 50%; width: calc(var(--d) * .64); transform: translate(-50%, -50%); display: grid; gap: 8px; justify-items: center; transition: opacity .25s ease, transform .25s ease; }
.roue-centre.change { opacity: 0; transform: translate(-50%, calc(-50% + 6px)); }
.roue-centre .n { font: 500 12px/1 var(--font-cote); letter-spacing: .08em; color: var(--cuivre-texte); }
.roue-centre h3 { margin: 0; font-size: 20px; line-height: 1.2; }
.roue-centre p { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--texte-2); }
.roue-centre.long p { font-size: 13px; line-height: 1.4; }
@media (max-width: 359px) { .roue-centre { width: calc(var(--d) * .72); gap: 6px; } .roue-centre p { font-size: 13px; line-height: 1.4; } .roue-centre h3 { font-size: 18px; } } /* 07/10 : téléphones de 320 px */ /* 07/10 : plus de 100 caractères, pour ne jamais déborder sur la roue */
.services-audit { margin: var(--space-5) auto 0; max-width: 620px; text-align: center; color: var(--texte-2); } /* 07/10 : lien vers l'audit, sorti de la roue */
@media (min-width: 760px) { .roue-centre h3 { font-size: 26px; } .roue-centre p { font-size: 16px; } }
.roue-indice { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; border-radius: var(--radius-pill); border: 1px solid var(--cuivre); color: var(--cuivre-texte);
  font: 500 11px/1 var(--font-cote); letter-spacing: .08em; text-transform: uppercase; transition: opacity .4s ease; }
.roue-indice svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; animation: roue-descend 1.4s ease-in-out infinite; }
.roue-scene.parti .roue-indice { opacity: 0; }
@keyframes roue-descend { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .apparait, .js .mot { opacity: 1 !important; transform: none !important; }
  .parcours-cadre, .vs-cadre { --progression: 1 !important; }
  .plateformes-piste { width: auto; justify-content: center; }
  .plateformes-piste ul { flex-wrap: wrap; justify-content: center; gap: var(--space-4) var(--space-6); padding: 0 var(--space-4); }
  .plateformes-piste ul[aria-hidden] { display: none; }
  .plateformes::before, .plateformes::after { display: none; }
}

/* ---------- Simulateur de chantiers (06/10, page /simulateur ; comportement : site.js, #simu) ----------
   Champs à gauche, résultat à droite sur ordinateur ; l'un sous l'autre sur téléphone. Le formulaire de contact
   (simulation détaillée + audit) suit, dans la même balise <form>. */
.simu-titre { margin: 0; font-size: clamp(2rem, 4.4vw, 3rem); line-height: 1.08; letter-spacing: -0.025em; }
.simu-grille { display: grid; gap: var(--space-5); align-items: start; }
@media (min-width: 900px) { .simu-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-6); } }
.simu-etape { margin: 0 0 var(--space-4); font: 500 12px/1.4 var(--font-cote); letter-spacing: .08em; text-transform: uppercase; color: var(--cuivre-texte); }
.simu-duo { display: grid; gap: 0 var(--space-4); }
@media (min-width: 480px) { .simu-duo { grid-template-columns: 1fr 1fr; } }
.simu-duo { align-items: end; } /* champs alignés même si un libellé passe sur 2 lignes */
.simu .field select, .simu .field input { min-height: 48px; font-size: 17px; }
.simu-volume { margin: 0 0 var(--space-3); font-size: 15px; color: var(--texte-2); }
.simu-volume b { color: var(--texte); }
.simu-ville-exemples { margin: -8px 0 var(--space-4); font-size: 13px; color: var(--texte-3); }
.simu-repere { margin: var(--space-2) 0 0; font-size: 13px; color: var(--texte-3); }
.simu-resultat { gap: var(--space-2); padding: var(--space-5); border-color: var(--ligne-forte); }
@media (min-width: 900px) { .simu-resultat { position: sticky; top: 96px; padding: var(--space-6); } }
.simu-resultat .simu-ca { margin: var(--space-2) 0 0; font: 600 clamp(1.9rem, 4vw, 2.5rem)/1.1 var(--font-titre); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--texte); }
.simu-resultat .simu-ca-sous { margin: 0 0 var(--space-3); color: var(--texte-2); }
.simu-resultat .simu-part { margin: var(--space-3) 0 var(--space-4); color: var(--texte-2); font-size: 15px; }
.simu-part b { color: var(--texte); }
.simu-resultat .btn { justify-content: center; }
.simu-avertissement { margin: var(--space-3) 0 0; }
.simu-resultat.recalcule .simu-ca { animation: simu-pulse .45s ease-out; }
@keyframes simu-pulse { from { color: var(--cuivre-texte); } to { color: var(--texte); } }
@media (prefers-reduced-motion: reduce) { .simu-resultat.recalcule .simu-ca { animation: none; } }
.simu-contact { margin-top: var(--space-8); }
.simu-aide { margin: 6px 0 0; font-size: 13px; color: var(--texte-3); }
.simu-methode { max-width: 860px; }
.simu-etapes { margin: 0 0 var(--space-4); padding-left: 1.3em; display: grid; gap: var(--space-4); color: var(--texte-2); }
.simu-etapes li::marker { color: var(--cuivre-texte); font-weight: 600; }
.simu-etapes b { color: var(--texte); font-weight: 600; }
/* ---------- Simulateur en entonnoir (06/10, variante C de DA/options-simulateur.html, choisie par Lucas) ---------- */
/* Fond « plan et épingles » de /audit derrière le simulateur (06/10, Lucas), même opacité */
.simu-section { position: relative; overflow: hidden; }
.simu-section > .wrap { position: relative; z-index: 1; }
/* Fond du simulateur (07/10, Lucas : option A de DA/options-fonds.html ; simu_fond() dans inc/simulateur.php) :
   papier millimétré + allure des recherches sur l'année, derrière le titre. Pages outil = fond graphique, pages vitrine = photo. */
.simu-fond { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.simu-fond-mm { position: absolute; inset: 0;
  background-image: linear-gradient(rgba(130, 140, 152, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(130, 140, 152, .07) 1px, transparent 1px),
                    linear-gradient(rgba(130, 140, 152, .13) 1px, transparent 1px), linear-gradient(90deg, rgba(130, 140, 152, .13) 1px, transparent 1px);
  background-size: 12px 12px, 12px 12px, 60px 60px, 60px 60px;
  -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 20%, #000 10%, transparent 80%); mask-image: radial-gradient(ellipse 70% 55% at 50% 20%, #000 10%, transparent 80%); }
.simu-fond svg { position: absolute; inset: 0 0 auto 0; width: 100%; height: 640px; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 55%, transparent 100%); }
.simu-fond .tr { fill: none; stroke: rgba(130, 140, 152, .48); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.simu-fond .cu { fill: none; stroke: rgba(var(--cuivre-rgb), .62); stroke-width: 2.2; }
.simu-fond .courbe { vector-effect: non-scaling-stroke; stroke-width: 2.4; }
.simu-fond .tirets { stroke-dasharray: 6 6; }
.simu-fond .courbe.tirets { stroke: rgba(130, 140, 152, .2); } /* 07/10 (Lucas) : la courbe de la clim passe derrière le titre et le paragraphe, presque de la même couleur */
@media (max-width: 760px) { .simu-fond svg { height: 520px; } }
.sm-tete { text-align: center; display: grid; justify-items: center; margin-bottom: var(--space-6); }
.sm-titre { margin: 12px 0 16px; font-size: clamp(2.1rem, 5vw, 3.4rem); line-height: 1.08; letter-spacing: -0.025em; max-width: 24ch; text-wrap: balance; }
.sm-tete .lead { max-width: 660px; margin: 0; }
.sm-barre { display: grid; gap: 14px; padding: 16px; border: 1px solid var(--ligne-forte); border-radius: 18px; background: var(--surface); box-shadow: var(--ombre-flottante); }
@media (min-width: 900px) { .sm-barre { grid-template-columns: 1.15fr 1fr 1fr 1fr; align-items: start; padding: 18px 20px; } }
.sm-barre .field { margin: 0; }
.sm-barre label { display: block; margin: 0 0 8px 2px; font: 500 11px/1.3 var(--font-cote); letter-spacing: .08em; text-transform: uppercase; color: var(--texte-3); }
.sm-barre select { width: 100%; min-height: 52px; border: 0; border-radius: 8px; background: var(--surface-2); padding-inline: 14px; font-size: 16px; }
.sm-fourchette { margin: 8px 2px 0; font-size: 13px; line-height: 1.4; color: var(--texte-3); }
.sm-regle { display: grid; gap: 12px; }
@media (min-width: 900px) { .sm-regle { padding-top: 0; } }
.sm-regle-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.sm-regle-tete label { margin: 0; }
.sm-regle-tete output { font: 600 18px/1 var(--font-titre); color: var(--cuivre-texte); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sm-regle input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; margin: 14px 0 6px; border-radius: 99px; background: linear-gradient(90deg, var(--cuivre) 0 var(--p, 50%), var(--surface-2) var(--p, 50%)); outline: none; }
.sm-regle input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: #f4f3f0; border: 3px solid var(--cuivre); cursor: grab; box-shadow: 0 2px 8px rgba(0, 0, 0, .4); }
.sm-regle input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #f4f3f0; border: 3px solid var(--cuivre); cursor: grab; }
.sm-regle input[type=range]:focus-visible { outline: 2px solid var(--focus); outline-offset: 6px; }
.sm-calculer { justify-content: center; }
.sm-repere { margin: 10px 0 0; text-align: center; font-size: 13px; color: var(--texte-3); }
.sm-entonnoir { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 900px) { .sm-entonnoir { grid-template-columns: repeat(5, 1fr); gap: 0; } }
.sm-marche { position: relative; padding: 20px 16px 18px; border: 1px solid var(--ligne); background: var(--surface); display: grid; align-content: start; gap: 6px; border-radius: 12px; }
@media (min-width: 900px) { .sm-marche { border-radius: 0; } .sm-marche:first-child { border-radius: 14px 0 0 14px; } .sm-marche:last-child { border-radius: 0 14px 14px 0; } .sm-marche + .sm-marche { border-left: 0; } }
.sm-etq { font: 500 11px/1.3 var(--font-cote); letter-spacing: .08em; text-transform: uppercase; color: var(--texte-3); }
.sm-marche b { font: 700 24px/1.15 var(--font-titre); color: var(--texte); font-variant-numeric: tabular-nums; }
.sm-marche p { margin: 0; font-size: 13.5px; color: var(--texte-3); }
.sm-fois { position: absolute; z-index: 1; right: 14px; top: -12px; font: 500 12px/1 var(--font-cote); color: var(--cuivre-texte); background: var(--fond); border: 1px solid rgba(var(--cuivre-rgb), .5); border-radius: 99px; padding: 5px 8px; white-space: nowrap; }
@media (min-width: 900px) { .sm-fois { right: auto; left: -1px; top: 0; transform: translate(-50%, -50%); } }
.sm-fin { background: radial-gradient(120% 120% at 100% 0%, rgba(var(--cuivre-rgb), .2), transparent 70%), var(--surface); border-color: rgba(var(--cuivre-rgb), .6) !important; }
.sm-fin b { color: var(--cuivre-texte); font-size: 26px; }
.sm-entonnoir.recalcule .sm-fin b { animation: simu-pulse .45s ease-out; }
.sm-abo { margin: var(--space-5) 0 0; text-align: center; color: var(--texte-2); }
.sm-abo b { color: var(--vert); }
.sm-avert { margin: 8px 0 0; text-align: center; }
/* Bande « Ce que nos clients ont vraiment gagné » (06/10) */
.sb-bande { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 900px) { .sb-bande { grid-template-columns: repeat(3, 1fr); } }
.sb-bande li { display: grid; gap: 6px; align-content: start; padding: 22px 24px; border: 1px solid var(--ligne-forte); border-radius: 14px; background: var(--fond); }
.sb-val { font: 700 44px/1 var(--font-titre); letter-spacing: -0.02em; color: var(--vert); }
.sb-lib { font-weight: 600; color: var(--texte); }
.sb-qui { font-size: 14px; color: var(--texte-3); }
.sb-qui b { color: var(--texte-2); font-weight: 600; }
.sb-pied { margin: var(--space-4) 0 0; text-align: center; font-size: 14px; color: var(--texte-3); }
.sb-pied a { color: var(--cuivre-texte); font-weight: 600; margin-left: 6px; }
/* « Le calcul », vérifié sur un vrai client (06/10, variante C) */
.sc-grille { display: grid; gap: 28px; align-items: start; }
@media (min-width: 900px) { .sc-grille { grid-template-columns: 1.2fr 1fr; gap: 48px; } }
.sc-liste { list-style: none; margin: 0; padding: 0; }
.sc-liste li { padding: 16px 0; border-top: 1px solid var(--ligne); }
.sc-liste li:first-child { border-top: 0; padding-top: 0; }
.sc-liste p { margin: 0; color: var(--texte-2); font-size: 15.5px; }
.sc-liste .sc-haut { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 6px; }
.sc-liste b { color: var(--texte); font-weight: 600; }
.sc-fois { font: 500 12px/1 var(--font-cote); color: var(--cuivre-texte); background: var(--fond); border: 1px solid rgba(var(--cuivre-rgb), .5); border-radius: 99px; padding: 5px 9px; white-space: nowrap; }
.sc-cas { display: grid; gap: 14px; padding: 24px; border: 1px solid rgba(var(--cuivre-rgb), .6); border-radius: 16px; background: radial-gradient(120% 100% at 100% 0%, rgba(var(--cuivre-rgb), .14), transparent 65%), var(--fond); }
.sc-cas h3 { margin: 0; font-size: 1.3rem; }
.sc-cas p { margin: 0; color: var(--texte-2); font-size: 15px; }
.sc-cas .sc-lieu { color: var(--texte-3); font-size: 14px; }
.sc-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sc-compare div { display: grid; gap: 4px; padding: 14px; border: 1px solid var(--ligne); border-radius: 12px; background: var(--surface); }
.sc-compare b { font: 700 28px/1 var(--font-titre); color: var(--texte); }
.sc-compare .sc-reel b { color: var(--vert); }
.sc-compare span { font-size: 13.5px; color: var(--texte-3); }
.sc-cas .btn { justify-self: start; }
.sc-formule { margin: var(--space-5) 0 0; }

/* ---------- Audit automatique (06/10, page /audit ; moteur : inc/audit.php) ---------- */
.audit-wrap { max-width: 880px; }
.audit-titre { margin: 0; font-size: clamp(2rem, 4.4vw, 3rem); line-height: 1.08; letter-spacing: -0.025em; }
.audit-form { max-width: 620px; }
.audit-form .field select, .audit-form .field input { min-height: 48px; }
.audit-facultatif { font-weight: 400; color: var(--texte-3); }
.js .audit-metier-libre:not(.ouvert) { display: none; }
.audit-h2 { margin: var(--space-6) 0 var(--space-4); font-size: clamp(1.3rem, 2.6vw, 1.6rem); line-height: 1.25; }
.audit-form .audit-h2 { margin-top: 0; }
.audit-aide { margin: 0 0 var(--space-4); color: var(--texte-2); font-size: 15px; }
.audit-choix { border: 0; margin: 0 0 var(--space-4); padding: 0; display: grid; gap: var(--space-2); }
.audit-option { display: grid; grid-template-columns: 22px 1fr; gap: var(--space-3); align-items: start; padding: var(--space-3) var(--space-4); min-height: 48px; border: 1px solid var(--ligne-forte); border-radius: var(--radius-md); background: var(--surface-2); cursor: pointer; }
.audit-option:has(input:checked) { border-color: var(--cuivre); }
.audit-option input { margin: 4px 0 0; width: 18px; height: 18px; accent-color: var(--cuivre); }
.audit-option b { display: block; font-weight: 600; }
.audit-option small { display: block; color: var(--texte-3); font-size: 14px; }
.audit-qui { margin: 0 0 var(--space-5); color: var(--texte-2); }
.audit-qui b { color: var(--texte); }
.audit-grille { display: grid; gap: var(--space-4); }
@media (min-width: 700px) { .audit-grille { grid-template-columns: 1fr 1fr; } }
.audit-bloc { padding: var(--space-5); border-color: var(--ligne-forte); }
.audit-bloc .audit-chiffre { margin: var(--space-2) 0 0; font: 600 clamp(2.6rem, 6vw, 3.4rem)/1 var(--font-titre); letter-spacing: -0.03em; color: var(--texte); font-variant-numeric: tabular-nums; }
.audit-bloc .audit-chiffre sup { font-size: .45em; vertical-align: .9em; margin-left: 2px; }
.audit-bloc .audit-chiffre small { font-size: .4em; color: var(--texte-3); letter-spacing: 0; }
.audit-bloc .audit-sous { margin: var(--space-2) 0 0; font-size: 14px; color: var(--texte-3); }
.audit-bloc .audit-phrase { margin: var(--space-3) 0 0; color: var(--texte-2); font-size: 15px; }
.audit-jauge { height: 8px; margin-top: var(--space-3); border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.audit-jauge span { display: block; height: 100%; border-radius: inherit; background: var(--cuivre); background-image: var(--cuivre-reflet); }
.audit-top { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ligne); }
.audit-top li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: var(--space-3) 0; border-bottom: 1px solid var(--ligne); }
.audit-top li.vous { color: var(--cuivre-texte); }
.audit-top em { font-style: normal; color: var(--cuivre-texte); }
.audit-rang { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); font: 600 13px/1 var(--font-texte); color: var(--texte-2); }
.audit-top li.vous .audit-rang { background: var(--cuivre); background-image: var(--cuivre-reflet); color: var(--sur-cuivre); }
.audit-nom { min-width: 0; overflow-wrap: anywhere; }
.audit-avis { font-size: 14px; color: var(--texte-3); white-space: nowrap; }
.audit-avis [class^="v-"] { font-weight: 600; }
.audit-avis .v-ref, .audit-avis .v-ok { color: var(--vert); }
.audit-avis .v-faible { color: var(--texte-2); } /* note d'un concurrent sous 4,0 (07/10) */
.audit-avis .v-moyen { color: var(--cuivre-texte); }
.audit-avis .v-non { color: var(--rouge); }
.audit-criteres { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.audit-criteres li { display: grid; grid-template-columns: 28px 1fr; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--ligne); border-radius: var(--radius-md); background: var(--surface); color: var(--texte-2); }
.audit-criteres b { color: var(--texte); font-weight: 600; }
.audit-criteres small { display: block; margin-top: 4px; font-size: 14px; color: var(--texte-3); }
.audit-marque { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 700 15px/1 var(--font-texte); }
.audit-marque svg { width: 16px; height: 16px; }
.etat-ok .audit-marque { color: var(--vert); background: color-mix(in srgb, var(--vert) 14%, transparent); }
.etat-moyen .audit-marque { color: var(--cuivre-texte); background: rgba(var(--cuivre-rgb), .14); }
.etat-non .audit-marque { color: var(--erreur); background: color-mix(in srgb, var(--erreur) 14%, transparent); }
/* Couleur des lignes du détail selon l'état (06/10, Lucas) : bordure et fond teintés, marque pleine, points colorés */
.audit-criteres li.etat-ok { border-color: color-mix(in srgb, var(--vert) 75%, transparent); background: color-mix(in srgb, var(--vert) 15%, var(--surface)); }
.audit-criteres li.etat-moyen { border-color: rgba(var(--cuivre-rgb), .8); background: color-mix(in srgb, var(--cuivre) 15%, var(--surface)); }
.audit-criteres li.etat-non { border-color: color-mix(in srgb, var(--rouge) 80%, transparent); background: color-mix(in srgb, var(--rouge) 16%, var(--surface)); }
.audit-criteres li.etat-ok .audit-marque { color: var(--sur-cuivre); background: var(--vert); }
.audit-criteres li.etat-moyen .audit-marque { color: var(--sur-cuivre); background: var(--cuivre); }
.audit-criteres li.etat-non .audit-marque { color: #fff; background: var(--rouge); }
.audit-criteres li.etat-ok .num { color: var(--vert); }
.audit-criteres li.etat-moyen .num { color: var(--cuivre-texte); }
.audit-criteres li.etat-non .num { color: var(--rouge); }
.audit-criteres .num { font-weight: 600; }
/* 06/10 : les 10 points vérifiés par Lucas (jamais attribués en ligne) */
.etat-verifier { border-style: dashed !important; border-color: rgba(var(--cuivre-rgb), .5) !important; }
.etat-verifier .audit-marque { color: var(--cuivre-texte); background: rgba(var(--cuivre-rgb), .14); }
.audit-a-verifier { display: grid; gap: 4px; margin-top: 8px; }
.audit-a-verifier span { position: relative; padding-left: 16px; font-size: 14.5px; }
.audit-a-verifier span::before { content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--cuivre); }
.audit-jauge-90 { position: relative; }
.audit-jauge-90::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: var(--a-verifier, 10%); background: repeating-linear-gradient(135deg, rgba(var(--cuivre-rgb), .45) 0 3px, transparent 3px 7px); }
.audit-alerte-nom { margin-bottom: var(--space-3); } /* 07/10 : alerte « nom de fiche avec mots-clés », au-dessus du détail */
.audit-jauge-note { margin: 6px 0 0; font-size: 13px; color: var(--texte-3); }
/* Couleur du score : le chiffre et le remplissage de la jauge (le cadre reste neutre) */
.audit-score-rouge .audit-chiffre { color: var(--rouge); }
.audit-score-rouge .audit-jauge span { background: var(--rouge); background-image: none; }
.audit-score-orange .audit-chiffre { color: var(--cuivre-texte); }
.audit-score-vert .audit-chiffre { color: var(--vert); }
.audit-score-vert .audit-jauge span { background: var(--vert); background-image: none; }
.audit-score-rouge .audit-chiffre small, .audit-score-orange .audit-chiffre small, .audit-score-vert .audit-chiffre small { color: var(--texte-3); }
.audit-reste { max-width: 720px; margin: var(--space-5) auto 0; text-align: center; font-size: 15px; color: var(--texte-3); }
.audit-suite { margin-top: var(--space-6); padding: var(--space-5); border-color: var(--ligne-forte); }
.audit-suite p { margin: var(--space-2) 0 var(--space-4); }
.audit-suite .audit-h2 { margin-top: var(--space-2); }
.audit-source { margin-top: var(--space-4); }
.btn.en-attente { opacity: .75; pointer-events: none; }
.audit-suite .btn-tel { border-color: var(--ligne-forte); }
/* Audit : contenu de référencement sous le formulaire (06/10) */
.audit-prose { max-width: 820px; }
.audit-prose h2 { margin: 12px 0 16px; }
.audit-prose > p { color: var(--texte-2); }
.audit-liste { margin: var(--space-3) 0 var(--space-4); padding-left: 1.2em; display: grid; gap: var(--space-2); color: var(--texte-2); }
.audit-liste li::marker { color: var(--cuivre-texte); }
.audit-liste b { color: var(--texte); font-weight: 600; }
.audit-duo { display: grid; gap: var(--space-4); }
@media (min-width: 760px) { .audit-duo { grid-template-columns: 1fr 1fr; } }
.audit-duo .label { margin-bottom: var(--space-2); }
.audit-duo h3 { margin: 0; }
/* ---------- Audit : « Et ensuite » (frise), « Classement » (schéma de la distance), « Fiche introuvable » (fiche de contrôle)
   06/10, variantes A, C et C de DA/options-audit-sections.html, choisies par Lucas ---------- */
.as-titre { margin: 12px 0 16px; }
.as-intro { color: var(--texte-2); max-width: 760px; margin: 0 0 var(--space-6); }
/* Frise en deux étapes : ligne cuivre du rond 1 au rond 2 (verticale sur téléphone) */
.as-frise { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
@media (min-width: 760px) { .as-frise { grid-template-columns: 1fr 1fr; gap: 48px; } }
.as-etape { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 16px; }
@media (min-width: 760px) { .as-etape { grid-template-columns: 1fr; gap: 18px; } }
.as-etape:first-child::before { content: ""; position: absolute; left: 21px; top: 44px; bottom: -28px; width: 2px; background: linear-gradient(var(--cuivre), rgba(var(--cuivre-rgb), .35)); }
@media (min-width: 760px) { .as-etape:first-child::before { left: 44px; right: -48px; top: 21px; bottom: auto; width: auto; height: 2px; background: linear-gradient(90deg, var(--cuivre), rgba(var(--cuivre-rgb), .35)); } }
.as-noeud { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font: 600 16px/1 var(--font-cote); background: var(--fond); border: 2px solid var(--cuivre); color: var(--cuivre-texte); position: relative; z-index: 1; }
.as-deux .as-noeud { background: var(--cuivre-reflet); color: var(--sur-cuivre); border-color: transparent; }
.as-quand { font: 500 12px/1 var(--font-cote); letter-spacing: .08em; text-transform: uppercase; color: var(--cuivre-texte); }
.as-etape h3 { margin: 8px 0 14px; font-size: 1.35rem; }
.as-coches { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; color: var(--texte-2); }
.as-coches li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; }
.as-coches svg { width: 18px; height: 18px; margin-top: 3px; color: var(--vert); }
/* Étiquettes */
.as-tag { display: inline-block; vertical-align: middle; font: 500 11px/1 var(--font-cote); letter-spacing: .08em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; white-space: nowrap; }
.as-tag-vert { color: var(--vert); background: color-mix(in srgb, var(--vert) 14%, transparent); }
.as-tag-gris { color: var(--texte-3); background: var(--surface-2); }
.as-tag-cuivre { color: var(--cuivre-texte); background: rgba(var(--cuivre-rgb), .14); }
/* Classement : schéma de la distance + les trois critères */
.as-schema { display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) { .as-schema { grid-template-columns: 1fr 1fr; gap: 48px; } }
.as-plan { width: 100%; height: auto; border-radius: 14px; background: #191c20; border: 1px solid var(--ligne); }
.as-plan .rue { stroke: rgba(241, 237, 230, .07); stroke-width: 6; fill: none; stroke-linecap: round; }
.as-plan .rond { fill: none; stroke: rgba(var(--cuivre-rgb), .35); stroke-dasharray: 3 5; }
.as-plan text { font: 500 11px var(--font-cote); letter-spacing: .06em; fill: var(--texte-3); text-transform: uppercase; }
.as-crit { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.as-crit li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; }
.as-ico { width: 40px; height: 40px; border-radius: 10px; background: var(--fond); display: grid; place-items: center; color: var(--cuivre); }
.as-ico svg { width: 20px; height: 20px; }
.as-crit .as-fixe .as-ico { color: var(--texte-3); }
.as-crit h3 { margin: 0 0 4px; font-size: 1.1rem; }
.as-crit h3 .as-tag { margin-left: 6px; }
.as-crit p { margin: 0; color: var(--texte-2); font-size: 15.5px; }
.as-encart { margin-top: var(--space-6); padding: 20px 24px; border-left: 3px solid var(--cuivre); background: var(--fond); border-radius: 0 12px 12px 0; }
.as-encart p { margin: 0; color: var(--texte-2); }
.as-encart .as-encart-titre { margin-bottom: 6px; color: var(--texte); font-weight: 600; font-size: 1.1rem; }
.as-source { margin: var(--space-4) 0 0; }
/* Fiche introuvable : fiche de contrôle à cocher (rien n'est enregistré) */
.as-fiche { border: 1px solid var(--ligne-forte); border-radius: 14px; background: var(--surface); overflow: hidden; box-shadow: var(--ombre-flottante); }
.as-fiche-haut { margin: 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 24px; border-bottom: 1px solid var(--ligne); background: var(--surface-2); font: 500 12px/1.3 var(--font-cote); letter-spacing: .08em; text-transform: uppercase; color: var(--texte-2); }
.as-ctrl { list-style: none; margin: 0; padding: 0; }
.as-ctrl li + li { border-top: 1px dashed var(--ligne-forte); }
.as-ctrl label { display: grid; grid-template-columns: 24px 1fr; gap: 16px; padding: 18px 24px; cursor: pointer; color: var(--texte-2); }
.as-ctrl b { color: var(--texte); font-weight: 600; }
.as-ctrl input { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin: 2px 0 0; border: 1.5px solid var(--cuivre); border-radius: 5px; background: transparent; display: grid; place-items: center; cursor: pointer; }
.as-ctrl input::after { content: ""; width: 6px; height: 11px; border-right: 2px solid var(--sur-cuivre); border-bottom: 2px solid var(--sur-cuivre); transform: translateY(-1px) rotate(45deg); opacity: 0; }
.as-ctrl input:checked { background: var(--cuivre); }
.as-ctrl input:checked::after { opacity: 1; }
.as-ctrl input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.as-ctrl label:hover b { color: var(--cuivre-texte); }
.as-appel { margin-top: var(--space-5); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; border: 1px solid rgba(var(--cuivre-rgb), .45); border-radius: 12px; background: rgba(var(--cuivre-rgb), .06); }
.as-appel p { margin: 0; color: var(--texte); font-weight: 600; max-width: 560px; }
.as-liens { margin-top: var(--space-5); color: var(--texte-2); }
@media (max-width: 599px) {
  .as-fiche-haut, .as-ctrl label { padding-inline: 16px; }
  .as-appel { padding: 18px; } .as-appel .btn { width: 100%; justify-content: center; }
}
.audit-liens { margin-top: var(--space-5); color: var(--texte-2); }

/* ---------- Audit : hero avec barre de recherche (06/10, variante B choisie par Lucas) ----------
   Fond « plan et épingles » choisi par Lucas (pistes flux et ondes écartées) */
.audit-hero { position: relative; overflow: hidden; padding: calc(var(--space-9) + 40px) 0 var(--space-9); text-align: center; border-bottom: 1px solid var(--ligne); }
@media (max-width: 759px) { .audit-hero { padding: calc(var(--space-8) + 56px) 0 var(--space-8); } }
.audit-fond { position: absolute; inset: 0; pointer-events: none; }
.audit-hero .audit-fond { opacity: .6; } /* 06/10 (Lucas) : fond du hero de /audit adouci (avant : 1) */
.audit-hero-contenu { position: relative; z-index: 1; display: grid; justify-items: center; }
.audit-hero .audit-titre { margin: 12px 0 16px; font-size: clamp(2.1rem, 5vw, 3.6rem); max-width: 16ch; }
.audit-hero .lead { max-width: 640px; margin: 0 0 var(--space-6); }
.audit-recherche { width: 100%; max-width: 1000px; }
.audit-recherche .barre { display: grid; gap: var(--space-3); padding: 14px; border: 1px solid var(--ligne-forte); border-radius: 18px; background: rgba(29, 32, 36, .88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--ombre-flottante); text-align: left; }
@media (min-width: 760px) { .audit-recherche .barre { grid-template-columns: 1.15fr 1.35fr 1fr auto; align-items: end; padding: 16px 16px 16px 20px; } } /* 06/10 (Lucas) : arrondis resserrés, la forme en pilule ne faisait pas pro */
.audit-recherche .field { margin: 0; }
.audit-recherche .barre label { margin: 0 0 8px 2px; font: 500 11px/1 var(--font-cote); letter-spacing: .08em; text-transform: uppercase; color: var(--texte-3); }
.audit-recherche .barre input, .audit-recherche .barre select { min-height: 54px; padding-inline: 16px; border: 0; border-radius: 8px; background: var(--surface-2); }
.audit-recherche .barre .btn { min-height: 54px; padding-inline: 28px; border-radius: 8px; justify-content: center; white-space: nowrap; }
.audit-recherche .audit-metier-libre { max-width: 360px; margin: var(--space-3) auto 0; text-align: left; }
.audit-recherche .alerte { text-align: left; }
.barre-suite { margin: var(--space-4) 0 0; font-size: 14px; color: var(--texte-3); }
/* Entrée de l'audit sur l'accueil et les pages métier (06/10) : barre de l'outil, puis rappel, appel ou WhatsApp */
.audit-entree { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; } /* minmax(0, 1fr) : la liste des métiers ne doit pas élargir la grille (débordement à 320 px) */
.audit-recherche .barre select { min-width: 0; }
.audit-entree h2 { margin: 12px 0 16px; max-width: 30ch; text-wrap: balance; }
.audit-entree .lead { max-width: 640px; margin: 0 0 var(--space-6); }
.audit-autres { width: 100%; max-width: 640px; margin-top: var(--space-7); padding-top: var(--space-6); border-top: 1px solid var(--ligne); display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: var(--space-3); }
.audit-autres-titre { margin: 0; font-weight: 600; color: var(--texte); }
.audit-autres .alerte { text-align: left; width: 100%; }
.rappel { display: flex; gap: var(--space-2); width: 100%; max-width: 420px; }
.rappel input { flex: 1; min-width: 0; min-height: 50px; border-radius: 8px; padding-inline: 16px; border: 1px solid var(--ligne-forte); background: var(--surface-2); box-shadow: none; }
.rappel input:focus { border-color: var(--cuivre); }
.rappel .btn { border-radius: 8px; white-space: nowrap; }
.audit-contacts { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 12px; color: var(--texte-2); }
.audit-contacts a { display: inline-flex; align-items: center; gap: 6px; color: var(--cuivre-texte); font-weight: 600; text-decoration: none; }
.audit-contacts a:hover { text-decoration: underline; text-underline-offset: 3px; }
.audit-contacts svg { width: 17px; height: 17px; }
.audit-autres .form-note { margin: 0; }
@media (max-width: 599px) { .audit-contacts > span[aria-hidden] { display: none; } }
@media (max-width: 420px) { .rappel .btn { padding-inline: 16px; } }
.audit-reperes { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; list-style: none; margin: var(--space-5) 0 0; padding: 0; color: var(--texte-2); font-size: 15px; }
.audit-reperes li { display: flex; align-items: center; gap: 8px; }
.audit-reperes svg { width: 18px; height: 18px; color: var(--vert); flex: none; }
.audit-ou { margin-top: var(--space-5); }
.champs-2 { display: grid; gap: 0 var(--space-4); }
@media (min-width: 640px) { .champs-2 { grid-template-columns: 1fr 1fr; } }

/* b · Plan de rues et épingles qui apparaissent l'une après l'autre ; l'épingle cuivre s'allume en dernier */
.audit-plan { position: absolute; inset: 0; width: 100%; height: 100%; -webkit-mask-image: radial-gradient(ellipse 80% 75% at 50% 50%, #000 30%, transparent 95%); mask-image: radial-gradient(ellipse 80% 75% at 50% 50%, #000 30%, transparent 95%); }
.audit-plan .rues path { fill: none; stroke: rgba(98, 108, 120, .2); stroke-width: 6; stroke-linecap: round; } /* 06/10 (Lucas) : gris ardoise au lieu de blanc, le texte blanc ressort */
.audit-plan .rues path.petite { stroke-width: 3; stroke: rgba(98, 108, 120, .14); }
.audit-plan .rues path.fleuve { stroke: rgba(76, 110, 140, .16); stroke-width: 26; }
.audit-plan .epingle path { fill: rgba(110, 120, 132, .4); }
.audit-plan .epingle circle { fill: var(--fond); }
.audit-plan .epingle { opacity: 0; animation: epingle 9s ease-out infinite; animation-delay: calc(var(--k) * .55s); transform-box: fill-box; }
.audit-plan .epingle.vous path { fill: var(--cuivre); }
.audit-plan .epingle.vous .halo { fill: rgba(var(--cuivre-rgb), .18); animation: halo-vous 3s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes epingle { 0% { opacity: 0; } 6% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes halo-vous { from { transform: scale(.4); opacity: .9; } to { transform: scale(1.6); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .audit-plan .epingle { animation: none; opacity: 1; }
  .audit-plan .epingle.vous .halo { animation: none; opacity: .5; }
}

/* Audit, étape 2 (06/10, demande de Lucas : centrée et plus soignée) : fond plan discret, frise, rappel de la recherche */
.audit-etape { position: relative; overflow: hidden; }
.audit-etape .audit-fond { opacity: .55; }
.audit-etape .audit-wrap { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; }
.audit-etape .section-head { text-align: center; justify-items: center; margin-bottom: var(--space-5); }
.audit-etape .audit-titre { font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
.audit-etape .form-card { width: 100%; max-width: 640px; box-shadow: var(--ombre-flottante); background: rgba(29, 32, 36, .94); }
.audit-etape .audit-h2 { text-align: center; margin-top: var(--space-2); }
.audit-etape .audit-aide { text-align: center; }
.audit-frise { display: flex; justify-content: center; align-items: center; gap: var(--space-2); list-style: none; margin: 0 0 var(--space-5); padding: 0; font-size: 14px; color: var(--texte-3); flex-wrap: wrap; }
.audit-frise li { display: flex; align-items: center; gap: 8px; }
.audit-frise li + li::before { content: ""; width: 28px; height: 1px; background: var(--ligne-forte); margin-right: 6px; }
.audit-frise span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--ligne-forte); font: 600 13px/1 var(--font-texte); color: var(--texte-2); }
.audit-frise span svg { width: 14px; height: 14px; }
.audit-frise .fait { color: var(--texte-2); }
.audit-frise .fait span { border-color: transparent; background: color-mix(in srgb, var(--vert) 16%, transparent); color: var(--vert); }
.audit-frise .actif { color: var(--texte); font-weight: 600; }
.audit-frise .actif span { border-color: transparent; background: var(--cuivre); background-image: var(--cuivre-reflet); color: var(--sur-cuivre); }
.audit-frise em { font-style: normal; }
@media (max-width: 479px) { .audit-frise { flex-wrap: nowrap; } .audit-frise li + li::before { width: 18px; } .audit-frise li:not(.actif) em { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } } /* téléphone : seul le libellé de l'étape en cours reste visible */
.audit-rappel { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-4); padding: 10px 14px; border: 1px solid var(--ligne); border-radius: 999px; background: var(--surface-2); font-size: 14px; color: var(--texte-2); }
.audit-rappel svg { width: 16px; height: 16px; color: var(--cuivre-texte); flex: none; }
.audit-rappel span { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.audit-rappel a { flex: none; font-weight: 600; padding: 6px 0; }
.audit-option { grid-template-columns: 22px 34px 1fr; align-items: center; transition: border-color .2s ease, background-color .2s ease; }
.audit-option input { margin: 0; }
.audit-option:has(input:checked) { background: rgba(var(--cuivre-rgb), .07); }
.audit-option-ico { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--fond); color: var(--texte-3); }
.audit-option-ico svg { width: 17px; height: 17px; }
.audit-option:has(input:checked) .audit-option-ico { color: var(--cuivre-texte); }
.audit-etape .audit-ou { text-align: left; }
/* Étape 2 : le résultat s'affiche juste après (06/10, Lucas) */
.audit-promesse { margin: 0 0 var(--space-4); padding: 14px 18px; border: 1px solid color-mix(in srgb, var(--vert) 45%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--vert) 9%, transparent); text-align: left; }
.audit-promesse-titre { margin: 0 0 6px; display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--texte); }
.audit-promesse-titre svg { width: 20px; height: 20px; flex: none; color: var(--vert); }
.audit-promesse ul { margin: 0; padding-left: 30px; display: grid; gap: 2px; color: var(--texte-2); font-size: 15px; }
.audit-promesse li::marker { color: var(--vert); }

/* Bandeau de consentement (07/10) : en bas, sobre ; « Refuser » et « Accepter » strictement identiques (CNIL) */
.bandeau-cookies { position: fixed; z-index: 60; left: 50%; bottom: var(--space-4); transform: translateX(-50%); width: min(760px, calc(100% - 2 * var(--gouttiere)));
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4) var(--space-5); align-items: center; padding: var(--space-4) var(--space-5);
  background: var(--surface); border: 1px solid var(--ligne-forte); border-radius: var(--radius-lg); box-shadow: var(--ombre-flottante), 0 10px 40px rgba(0, 0, 0, .45); }
.bandeau-cookies[hidden] { display: none; }
.bandeau-cookies p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--texte-2); }
.bandeau-cookies .bc-titre { margin-bottom: 2px; font-weight: 600; color: var(--texte); }
.bandeau-cookies .bc-actions { display: flex; gap: var(--space-3); }
.bandeau-cookies .bc-actions .btn { min-width: 112px; justify-content: center; }
@media (max-width: 640px) {
  .bandeau-cookies { grid-template-columns: 1fr; bottom: var(--space-3); padding: var(--space-4); }
  .bandeau-cookies .bc-actions .btn { flex: 1; }
}
.lien-cookies { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.lien-cookies:hover { color: var(--texte); }

/* ---------- Blog (07/10) : article « B » (haut graphite, texte sur fond blanc, formule Visibilité à droite) et page /blog
   « thèmes + grille », choisis par Lucas (DA/options-blog.html, DA/options-blog-liste.html). Le blanc = thème « clair »
   de la Charte (documents) : on y redéfinit les jetons de couleur. ---------- */
.b-haut, .l-haut { padding-block: 140px var(--space-7); border-bottom: 1px solid var(--ligne); }
.b-haut .b-col { max-width: 860px; }
.b-haut h1, .l-haut h1 { font-size: clamp(32px, 4.4vw, 50px); line-height: 1.06; margin: 12px 0 0; max-width: 860px; }
.b-chapeau, .l-chapeau { font-size: 20px; line-height: 1.55; color: var(--texte-hero); margin: var(--space-5) 0 0; max-width: 720px; }
@media (max-width: 759px) { .b-chapeau, .l-chapeau { font-size: 18px; } }
.b-fil { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--texte-3); margin-bottom: var(--space-5); }
.b-fil a { color: var(--texte-2); text-decoration: none; } .b-fil a:hover { color: var(--cuivre-texte); }
.b-fil span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.b-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: var(--space-5) 0 0; font-size: 15px; color: var(--texte-2); }
.b-meta img { width: 32px; height: 32px; border-radius: 50%; }
.b-meta span + span::before { content: "·"; margin-right: 16px; color: var(--texte-3); }
.b-programme { display: inline-block; margin-bottom: 10px; padding: 4px 10px; border-radius: var(--radius-pill); background: #e9b949; color: #16181b; font: 500 12px/1.4 var(--font-cote); }
.b-papier, .l-papier { --texte: #16181b; --texte-2: #5c6068; --texte-3: #6b6f77; --cuivre-texte: #9a5a2c; --ligne: #16181b1f; --ligne-forte: #16181b33; --surface: #f4f3f0;
  background: #ffffff; color: var(--texte); }
.b-papier { padding-block: var(--space-8); }
.l-papier { padding-block: var(--space-7) var(--space-8); }
.b-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
@media (min-width: 1000px) { .b-grille { grid-template-columns: minmax(0, 620px) 260px; justify-content: space-between; } }
.b-cote { display: grid; gap: var(--space-5); align-content: start; }
@media (min-width: 1000px) { .b-cote { position: sticky; top: 88px; align-self: start; order: 2; } .b-offre-mobile { display: none; } }
@media (max-width: 999px) { .b-offre-cote { display: none; } }
.b-sommaire { padding: var(--space-5); background: var(--surface); border-radius: var(--radius-lg); }
.b-sommaire ol { list-style: none; padding: 0; margin: 10px 0 0; counter-reset: s; }
.b-sommaire li { counter-increment: s; margin: 0; }
.b-sommaire a { display: flex; gap: 10px; padding: 7px 0; font-size: 15px; line-height: 1.4; text-decoration: none; color: var(--texte-2); }
.b-sommaire a::before { content: counter(s, decimal-leading-zero); font: 400 13px/1.6 var(--font-cote); color: var(--texte-3); }
.b-sommaire a:hover { color: var(--cuivre-texte); }
@media (min-width: 1000px) { .b-cote .b-sommaire { padding: 16px 18px; } .b-cote .b-sommaire a { padding: 4px 0; font-size: 14px; } }
/* Un vrai article a 8 à 10 parties : la colonne collante ne doit jamais dépasser l'écran. L'offre reste entière,
   le sommaire prend la place qui reste et défile tout seul si besoin. */
@media (min-width: 1000px) {
  .b-cote { max-height: calc(100vh - 108px); grid-template-rows: minmax(0, 1fr) auto; }
  .b-cote .b-sommaire { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; min-height: 0; }
}
.b-corps { font-size: 17px; line-height: 1.7; }
.b-corps h2 { font-size: 26px; line-height: 1.2; margin: var(--space-7) 0 var(--space-3); scroll-margin-top: 100px; }
.b-corps > h2:first-child { margin-top: 0; }
.b-corps h3 { font-size: 20px; margin: var(--space-5) 0 var(--space-2); }
.b-corps p, .b-corps li { margin: 0 0 var(--space-4); color: #2c2f34; }
.b-corps strong { color: var(--texte); font-weight: 600; }
.b-corps ul, .b-corps ol { padding-left: 22px; }
.b-corps a { color: var(--cuivre-texte); text-underline-offset: 3px; }
.b-tableau { overflow-x: auto; margin: var(--space-4) 0 var(--space-2); }
.b-tableau table { width: 100%; border-collapse: collapse; font-size: 16px; }
.b-tableau th { text-align: left; font: 500 12px/1.4 var(--font-cote); letter-spacing: .08em; text-transform: uppercase; padding: 10px 12px; border-bottom: 1px solid var(--ligne-forte); }
.b-tableau td { padding: 12px; border-bottom: 1px solid var(--ligne); }
.b-tableau td.num { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 600px) { /* 4 colonnes doivent tenir à 320-375 px sans défilement de côté */
  .b-tableau table { font-size: 14px; } .b-tableau th { font-size: 10.5px; letter-spacing: .04em; }
  .b-tableau th, .b-tableau td { padding: 8px 6px; } .b-tableau td.num { white-space: normal; }
}
.b-corps .b-source { font-size: 14px; color: var(--texte-3); }
.b-formule { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--radius-lg); padding: var(--space-5); margin: var(--space-5) 0; }
.b-corps .b-formule p { margin: 8px 0 0; font-size: 20px; font-weight: 600; color: var(--texte); }
.b-corps .b-formule .b-formule-ex { font: 400 15px/1.5 var(--font-cote); color: var(--texte-2); }
.b-note { background: var(--surface); border-radius: var(--radius-lg); padding: var(--space-5); margin: var(--space-5) 0; }
.b-corps .b-note p { margin: 6px 0 0; }
.b-encart, .b-fin { background: #141619; color: #f1ede6; border-radius: var(--radius-lg); }
.b-encart { padding: var(--space-5); margin: var(--space-6) 0; }
.b-encart .label, .b-fin .label { color: #d98e55; }
.b-corps .b-encart p, .b-fin p { color: #c9c4bb; margin: 8px 0 var(--space-4); } .b-corps .b-encart strong { color: #f1ede6; }
.b-corps details { border-bottom: 1px solid var(--ligne); padding: 14px 0; }
.b-corps summary { font-weight: 600; cursor: pointer; }
.b-corps details p { margin: 10px 0 0; }
.b-auteur { display: flex; gap: var(--space-4); align-items: flex-start; border-top: 1px solid var(--ligne); padding-top: var(--space-5); margin-top: var(--space-7); }
.b-auteur img { width: 64px; height: 64px; border-radius: 50%; flex: none; }
.b-auteur p { margin: 6px 0 0; font-size: 15px; line-height: 1.6; color: var(--texte-2); }
.b-fin { padding: var(--space-6) var(--space-5); margin-top: var(--space-7); text-align: center; }
.b-fin h2 { font-size: 26px; margin: 10px 0; color: #f1ede6; } .b-fin p { margin: 0 auto var(--space-5); max-width: 520px; }
.b-suite { margin-top: var(--space-7); }
.b-cartes { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); margin-top: var(--space-3); }
@media (min-width: 700px) { .b-cartes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.b-carte { display: block; padding: var(--space-5); border-radius: var(--radius-lg); text-decoration: none; background: var(--surface); color: var(--texte); }
.b-carte strong { display: block; margin-top: 6px; font-size: 18px; line-height: 1.35; font-weight: 600; }
.b-carte:hover strong { color: var(--cuivre-texte); }
.b-carte-meta { font: 500 12px/1.4 var(--font-cote); letter-spacing: .06em; text-transform: uppercase; color: var(--texte-3); }
/* Encadré de la formule Visibilité (graphite sur la page blanche) */
.b-offre { position: relative; background: #141619; color: #f1ede6; border: 1px solid #d98e55; border-radius: var(--radius-lg); padding: 30px var(--space-5) var(--space-5); text-align: center; }
.b-offre-mobile { margin: var(--space-7) auto 0; max-width: 420px; }
.b-offre .label { color: #d98e55; }
.b-offre-badge { font-size: 10px; }
.b-offre-nom { margin: 4px 0 0; font-size: 26px; font-weight: 600; color: #f1ede6; }
.b-offre-pour { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: #c9c4bb; }
.b-offre-prix { margin: var(--space-4) 0 0; font-size: 15px; color: #a29d95; } .b-offre-prix strong { font-size: 34px; font-weight: 600; color: #f1ede6; }
.b-offre-mep { margin: 4px 0 var(--space-4); font-size: 13px; color: #5bb98a; }
.b-offre ul { list-style: none; padding: 0; margin: 0 0 var(--space-4); text-align: left; display: grid; gap: 8px; }
.b-offre li { display: flex; gap: 8px; font-size: 14px; line-height: 1.4; color: #c9c4bb; } .b-offre li svg { width: 16px; height: 16px; flex: none; color: #d98e55; margin-top: 2px; }
.b-offre .btn { width: 100%; justify-content: center; }
.b-offre-audit { display: inline-block; margin-top: 12px; font-size: 14px; color: #c9c4bb; } .b-offre-audit:hover { color: #d98e55; }
/* Sur ordinateur, la colonne de droite doit tenir dans un écran de portable (≈ 700 px utiles) : offre sans la liste */
@media (min-width: 1000px) {
  .b-offre-cote { padding: 24px 18px 18px; }
  .b-offre-cote ul, .b-offre-cote .b-offre-pour { display: none; }
  .b-offre-cote .b-offre-nom { font-size: 22px; }
  .b-offre-cote .b-offre-prix { margin-top: 10px; } .b-offre-cote .b-offre-prix strong { font-size: 28px; }
}
/* Page /blog */
.l-filtres { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--space-6); }
.l-filtres button { padding: 8px 14px; border-radius: var(--radius-pill); border: 1px solid var(--ligne-forte); background: #fff; font: 500 14px/1.3 var(--font-texte); color: var(--texte-2); cursor: pointer; }
.l-filtres button:hover { border-color: var(--texte-2); color: var(--texte); }
.l-filtres button.actif { background: #141619; color: #f1ede6; border-color: #141619; }
.l-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
@media (min-width: 700px) { .l-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1050px) { .l-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.l-carte { display: flex; flex-direction: column; gap: 8px; padding: var(--space-5); border: 1px solid var(--ligne); border-radius: var(--radius-lg); background: #fff; min-height: 220px; text-decoration: none; color: var(--texte); }
.l-carte:hover { border-color: var(--cuivre-texte); } .l-carte:hover .l-titre { color: var(--cuivre-texte); }
.l-carte[hidden] { display: none; }
.l-carte .b-programme { align-self: flex-start; margin-bottom: 0; }
.l-theme { font: 500 12px/1.4 var(--font-cote); letter-spacing: .08em; text-transform: uppercase; color: var(--cuivre-texte); }
.l-titre { font-size: 20px; line-height: 1.3; font-weight: 600; }
.l-desc { font-size: 16px; line-height: 1.55; color: var(--texte-2); }
.l-meta { font-size: 14px; color: var(--texte-3); margin-top: auto; padding-top: 4px; }
.l-vide { color: var(--texte-2); }
.l-avenir { margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--ligne); }
.l-avenir ul { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 8px; color: var(--texte-2); }
.l-avenir li::before { content: "À paraître · "; font: 500 12px/1.4 var(--font-cote); letter-spacing: .06em; text-transform: uppercase; color: var(--texte-3); }
.l-bandeau { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-8);
  background: #141619; color: #f1ede6; border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6); }
.l-bandeau .label { color: #d98e55; display: block; margin-bottom: 6px; } .l-bandeau strong { font-size: 20px; font-weight: 600; }