/* Le Baliseur — feuille de styles */

@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap; src: url("fonts/barlow-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-display: swap; src: url("fonts/barlow-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap; src: url("fonts/barlow-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-display: swap; src: url("fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap; src: url("fonts/barlow-condensed-latin-700-normal.woff2") format("woff2"); }

:root {
  --signal: #F2B23A;
  --sapin: #24493A;
  --sapin-clair: #3A6352;
  --ardoise: #1C2420;
  --calcaire: #EEF0EC;
  --gris: #3E4A44;
  --trait: #D3D8D2;
  --bord-champ: #A9B2AC;
  --blanc: #FFFFFF;
  --sur-sombre: #D9DED8;
  --sur-vert: #E4EAE5;
  --cond: "Barlow Condensed", "Arial Narrow", sans-serif;
  --corps: "Barlow", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--corps); color: var(--ardoise); background: var(--calcaire); line-height: 1.5; }
img, svg { display: block; }
a { color: var(--sapin); }
a:hover { color: var(--ardoise); }
:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }

.lien-evitement { position: absolute; left: -9999px; top: 0; background: var(--signal); color: var(--ardoise); padding: 10px 16px; z-index: 10; }
.lien-evitement:focus { left: 16px; top: 16px; }

.conteneur { max-width: 1200px; margin: 0 auto; padding-inline: 24px; }
.section { padding-block: 96px; }
@media (max-width: 640px) { .section { padding-block: 64px; } }

.surtitre { margin: 0 0 10px; font-family: var(--cond); font-weight: 600; font-size: 18px; letter-spacing: 3px; text-transform: uppercase; color: var(--sapin); }
.titre-1 { margin: 0; font-family: var(--cond); font-weight: 700; font-size: clamp(44px, 6vw, 80px); line-height: 0.98; text-transform: uppercase; }
.titre-2 { margin: 0 0 48px; font-family: var(--cond); font-weight: 700; font-size: clamp(36px, 4.5vw, 56px); line-height: 1; text-transform: uppercase; }
.accroche { margin: 0; font-family: var(--cond); font-weight: 600; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.15; color: var(--sapin); }
.chapo { margin: 0; font-size: 20px; line-height: 1.55; color: var(--gris); max-width: 600px; }

/* Boutons */
.bouton { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; text-decoration: none; font-family: var(--cond); font-weight: 700; font-size: 20px; text-transform: uppercase; letter-spacing: 0.5px; padding: 12px 24px; border-radius: 6px; border: 2px solid transparent; cursor: pointer; }
.bouton-signal { background: var(--signal); color: var(--ardoise); }
.bouton-signal:hover { background: #F5C25E; color: var(--ardoise); }
.bouton-sombre { background: var(--ardoise); color: var(--blanc); }
.bouton-sombre:hover { background: #2E3A34; color: var(--blanc); }
.bouton-contour { border-color: var(--ardoise); color: var(--ardoise); }
.bouton-contour:hover { background: var(--ardoise); color: var(--blanc); }

/* En-tête */
.entete { border-bottom: 1px solid var(--trait); background: var(--calcaire); }
.entete .conteneur { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-block: 18px; }
.marque { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ardoise); }
.marque span { font-family: var(--cond); font-weight: 700; font-size: 28px; text-transform: uppercase; letter-spacing: 0.5px; }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; }
.nav a:not(.bouton) { text-decoration: none; font-weight: 500; color: var(--ardoise); padding-block: 8px; }
.nav a[aria-current="page"] { font-weight: 600; box-shadow: inset 0 -3px 0 var(--signal); }
.nav a.langue { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.langue svg { border-radius: 2px; box-shadow: 0 0 0 1px rgba(28, 36, 32, 0.2); }
.nav .bouton { font-size: 18px; padding: 10px 18px; }

/* Héros */
.heros { display: flex; flex-wrap: wrap; align-items: center; gap: 56px; padding-block: 80px 96px; }
.heros-texte { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.origine { background: var(--blanc); border-radius: 8px; padding: 16px 20px; max-width: 600px; }
.origine p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--gris); }
.origine strong { color: var(--ardoise); }
.heros-actions { display: flex; flex-wrap: wrap; gap: 14px; padding-top: 8px; }
.heros-panneau { flex: 1 1 340px; min-width: 0; display: flex; justify-content: center; }

.poteau { position: relative; width: 400px; max-width: 100%; display: flex; flex-direction: column; gap: 14px; padding-bottom: 60px; }
.poteau::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 16px; margin-left: -8px; background: var(--ardoise); border-radius: 2px; }
.poteau-tete { position: relative; align-self: center; background: var(--blanc); border: 3px solid var(--ardoise); border-radius: 8px; padding: 12px 22px; text-align: center; }
.poteau-tete strong { display: block; font-family: var(--cond); font-weight: 700; font-size: 26px; text-transform: uppercase; line-height: 1; }
.poteau-tete span { display: block; font-size: 15px; font-weight: 500; color: var(--gris); padding-top: 4px; }
.plaque { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 52px 12px 20px; background: var(--blanc); clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%); font-family: var(--cond); text-transform: uppercase; }
.plaque.gauche { padding: 12px 20px 12px 52px; clip-path: polygon(10% 0, 100% 0, 100% 100%, 10% 100%, 0 50%); }
.plaque b { font-weight: 700; font-size: 24px; line-height: 1.05; }
.plaque small { font-weight: 600; font-size: 20px; white-space: nowrap; text-transform: none; }
.plaque.signal { background: var(--signal); }
.plaque.arrivee { background: var(--sapin); color: var(--blanc); }
.plaque.arrivee b { font-size: 22px; }

/* Bandeau sombre */
.sombre { background: var(--ardoise); color: var(--blanc); }
.sombre .conteneur { display: flex; flex-wrap: wrap; gap: 56px; }
.sombre .titre-2 { margin: 0; }
.colonne { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.sombre p { margin: 0; font-size: 19px; line-height: 1.6; color: var(--sur-sombre); }
.etiquettes { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 6px 0 0; list-style: none; }
.etiquettes li { border: 1px solid var(--signal); color: var(--signal); padding: 6px 12px; border-radius: 4px; font-weight: 500; font-size: 15px; }

/* Cartes */
.grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.carte { background: var(--blanc); border-radius: 10px; padding: 32px; display: flex; flex-direction: column; gap: 14px; }
.carte h3 { margin: 0; font-family: var(--cond); font-weight: 700; font-size: 30px; text-transform: uppercase; line-height: 1.05; }
.carte p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--gris); }
.numero { width: 48px; height: 48px; border-radius: 6px; background: var(--signal); display: flex; align-items: center; justify-content: center; font-family: var(--cond); font-weight: 700; font-size: 26px; }
.offert { color: var(--sapin); }

/* Offres */
.fond-blanc { background: var(--blanc); }
.offre { border: 2px solid var(--trait); border-radius: 10px; padding: 32px; display: flex; flex-direction: column; gap: 16px; }
.offre h3 { margin: 0; font-family: var(--cond); font-weight: 700; font-size: 28px; text-transform: uppercase; }
.offre .prix { margin: 0; font-family: var(--cond); font-weight: 700; font-size: 48px; line-height: 1; }
.offre .prix span { font-size: 24px; }
.offre p:not(.prix) { margin: 0; font-size: 16px; line-height: 1.6; color: var(--gris); }
.offre.vedette { background: var(--signal); border: 3px solid var(--ardoise); }
.offre.vedette p:not(.prix) { color: var(--ardoise); }
.note { margin: 28px 0 0; font-size: 16px; color: var(--gris); }

/* Témoignages */
.entete-section { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 48px; }
.entete-section .titre-2 { margin: 0; }
.mention-demo { display: inline-block; background: var(--blanc); border: 1px dashed var(--bord-champ); color: var(--gris); padding: 6px 12px; border-radius: 4px; font-size: 14px; font-weight: 500; }
.temoignage { margin: 0; background: var(--blanc); border-radius: 10px; padding: 32px; display: flex; flex-direction: column; gap: 20px; border-top: 6px solid var(--signal); }
.temoignage blockquote { margin: 0; font-size: 19px; line-height: 1.55; }
.temoignage figcaption { font-size: 15px; color: var(--gris); }
.temoignage figcaption strong { display: block; font-family: var(--cond); font-size: 20px; text-transform: uppercase; color: var(--ardoise); }
.service { align-self: flex-start; background: var(--calcaire); color: var(--sapin); padding: 4px 10px; border-radius: 4px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }
.lien-fleche { display: inline-block; margin-top: 32px; font-family: var(--cond); font-weight: 700; font-size: 20px; text-transform: uppercase; letter-spacing: 0.5px; }

/* À propos */
.vert { background: var(--sapin); color: var(--blanc); }
.vert .conteneur { display: flex; flex-wrap: wrap; align-items: center; gap: 56px; }
.vert .surtitre { color: var(--signal); margin: 0; }
.vert .titre-2 { margin: 0; }
.vert p { margin: 0; font-size: 19px; line-height: 1.6; color: var(--sur-vert); }
.portrait { flex: 1 1 280px; max-width: 360px; aspect-ratio: 4 / 5; background: var(--sapin-clair); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--sur-vert); font-size: 15px; }
.apropos-texte { flex: 999 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }

/* Formulaire */
.contact { display: flex; flex-wrap: wrap; gap: 56px; }
.contact-intro { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.contact-intro .titre-2 { margin: 0; }
.contact-intro p { margin: 0; font-size: 18px; line-height: 1.6; color: var(--gris); }
.formulaire { flex: 999 1 520px; min-width: 0; background: var(--blanc); border-radius: 10px; padding: 32px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.champ { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 15px; }
.champ input, .champ select { font: inherit; font-weight: 400; font-size: 16px; border: 1px solid var(--bord-champ); border-radius: 6px; padding: 12px 14px; min-height: 48px; background: var(--blanc); color: var(--ardoise); }
.large { grid-column: 1 / -1; }
.consentement { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--gris); }
.consentement input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; }
.piege { position: absolute; left: -9999px; }
.formulaire .bouton { justify-self: start; }
.statut { margin: 0; font-weight: 600; }
.statut.ok { color: var(--sapin); }
.statut.erreur { color: #A12D1F; }

/* Appel final */
.appel .conteneur { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; padding-block: 72px; }
.appel .titre-2 { margin: 0; font-size: clamp(34px, 4vw, 52px); }

/* Pages légales */
.legal { max-width: 800px; }
.legal h2 { font-family: var(--cond); font-weight: 700; font-size: 30px; text-transform: uppercase; margin: 40px 0 12px; }
.legal p, .legal li { font-size: 17px; line-height: 1.65; color: var(--gris); }

/* Pied de page */
.pied { background: var(--ardoise); color: var(--sur-sombre); }
.pied .conteneur { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding-block: 40px; }
.pied-marque { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.pied nav { display: flex; flex-wrap: wrap; gap: 20px; font-size: 14px; }
.pied a { color: var(--sur-sombre); }
.pied a:hover { color: var(--blanc); }
.pied a.en { color: var(--signal); font-weight: 600; }

/* Auto-diagnostic */
.autodiag { max-width: 820px; }
#autodiag { min-height: 1000px; }
.autodiag-questions { display: flex; flex-direction: column; gap: 16px; }
.question { margin: 0; border: 0; background: var(--blanc); border-radius: 10px; padding: 24px 28px; display: flex; flex-direction: column; gap: 16px; }
.question legend { float: left; width: 100%; padding: 0; font-size: 19px; font-weight: 600; line-height: 1.4; }
.question-num { display: block; font-family: var(--cond); font-weight: 600; font-size: 15px; letter-spacing: 2px; text-transform: uppercase; color: var(--sapin); margin-bottom: 6px; }
.choix { clear: both; display: flex; flex-wrap: wrap; gap: 10px; }
.choix label { position: relative; cursor: pointer; }
.choix input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choix span { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 20px; border: 2px solid var(--trait); border-radius: 999px; font-weight: 500; background: var(--blanc); }
.choix label:hover span { border-color: var(--ardoise); }
.choix input:checked + span { background: var(--ardoise); border-color: var(--ardoise); color: var(--blanc); }
.choix input:focus-visible + span { outline: 3px solid var(--signal); outline-offset: 2px; }
.autodiag-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding-top: 8px; }
.autodiag-resultat { margin-top: 40px; background: var(--blanc); border-radius: 10px; padding: 32px; display: flex; flex-direction: column; gap: 18px; }
.autodiag-resultat:focus { outline: none; }
.jauge-entete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 20px; }
.jauge-entete .surtitre { flex-basis: 100%; }
.jauge-score { margin: 0; font-family: var(--cond); font-weight: 700; font-size: 28px; color: var(--gris); }
.jauge-score span { font-size: 72px; line-height: 1; color: var(--ardoise); }
.jauge-niveau { margin: 0; font-family: var(--cond); font-weight: 700; font-size: 30px; text-transform: uppercase; }
.jauge { position: relative; height: 18px; background: var(--calcaire); border-radius: 999px; overflow: hidden; }
.jauge-remplie { height: 100%; border-radius: 999px; transition: width 0.8s ease; }
.jauge-repere { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--blanc); }
.jauge-legende { display: grid; grid-template-columns: 50% 30% 20%; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--gris); }
.jauge-texte { margin: 0; font-size: 18px; line-height: 1.6; }
.titre-3 { margin: 8px 0 0; font-family: var(--cond); font-weight: 700; font-size: 28px; text-transform: uppercase; }
.priorites { margin: 0; padding-left: 24px; display: flex; flex-direction: column; gap: 12px; }
.priorites li { font-size: 17px; line-height: 1.5; }
.priorites strong { display: block; }
.priorites span { color: var(--gris); }
.jauge-note { margin: 0; font-size: 15px; color: var(--gris); }
@media (prefers-reduced-motion: reduce) { .jauge-remplie { transition: none; } html { scroll-behavior: auto; } }

/* Bandeau auto-diagnostic */
.bandeau-test { background: var(--signal); }
.bandeau-test .conteneur { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding-block: 48px; }
.bandeau-test .titre-2 { margin: 0; font-size: clamp(30px, 3.6vw, 44px); }
.bandeau-test p { margin: 6px 0 0; font-size: 18px; }

/* Carte de classement */
.carte-section { display: flex; flex-wrap: wrap; align-items: center; gap: 48px; }
.carte-texte { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.carte-texte .titre-2 { margin: 0; }
.carte-texte p { margin: 0; font-size: 18px; line-height: 1.6; color: var(--gris); }
.carte { flex: 1 1 420px; min-width: 0; max-width: 560px; }
.carte-svg { width: 100%; height: auto; font-family: var(--corps); }
.carte-bascule { display: flex; gap: 10px; flex-wrap: wrap; }
.carte-bascule .bouton { font-size: 18px; padding: 8px 18px; }
.carte-bascule .bouton[aria-pressed="true"] { background: var(--ardoise); color: var(--blanc); }
.carte-texte .carte-resume { font-size: 20px; color: var(--ardoise); }
.carte-legende { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; padding: 0; list-style: none; font-weight: 600; font-size: 15px; }
.carte-legende li { display: flex; align-items: center; gap: 8px; }
.carte-legende span { width: 16px; height: 16px; border-radius: 50%; }
.carte-texte .mention-demo { align-self: flex-start; }

/* ===== Révision de style ===== */

/* Scène du poteau : paysage vert pour que chaque plaque se détache */
.heros-panneau .scene { position: relative; width: 100%; max-width: 460px; background: var(--sapin); border-radius: 14px; padding: 40px 28px 0; overflow: hidden; display: flex; justify-content: center; }
.scene .montagnes { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 110px; z-index: 2; pointer-events: none; }
.scene .poteau { z-index: 1; padding-bottom: 96px; }
.scene .poteau::before { background: #3B2F25; width: 14px; margin-left: -7px; }
.scene .poteau-tete { border-color: var(--ardoise); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25); }
.scene .plaque { box-shadow: none; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.25)); }
.scene .plaque.arrivee { background: var(--ardoise); color: var(--blanc); }

/* Listes à balise (remplacent les étiquettes qui ressemblaient à des boutons) */
.etiquettes { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 24px; }
.etiquettes li { border: 0; padding: 0 0 0 24px; border-radius: 0; position: relative; color: inherit; font-size: 16px; font-weight: 500; line-height: 1.4; }
.etiquettes li::before { content: ""; position: absolute; left: 0; top: 4px; width: 14px; height: 11px; background: var(--signal); clip-path: polygon(0 0, 65% 0, 100% 50%, 65% 100%, 0 100%); }
.sombre .etiquettes li { color: var(--blanc); }
.vert .etiquettes li { color: var(--blanc); }

/* À propos : mesure de lecture */
.apropos-texte p { max-width: 64ch; }

/* Témoignages sur fond blanc */
.fond-blanc .temoignage { background: var(--calcaire); }
.titre-2 { margin-top: 0; }

/* Offres sur fond calcaire : cartes blanches sans contour */
#offres .offre, #pricing .offre { background: var(--blanc); border-color: var(--blanc); }
#offres .offre.vedette, #pricing .offre.vedette { background: var(--signal); border-color: var(--ardoise); }

/* Formulaire : lien de confidentialité dans le texte */
.consentement span a { white-space: normal; }

/* En-tête mobile : logo + bouton sur une ligne, menu défilant dessous */
@media (max-width: 760px) {
  .marque span { font-size: 24px; }
  .nav { flex-wrap: nowrap; overflow-x: auto; gap: 22px; margin-top: 8px; padding-bottom: 6px; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a:not(.bouton) { white-space: nowrap; }
  .heros { padding-block: 40px 64px; gap: 40px; }
}
.heros-panneau { flex: 0 1 480px; }
.heros-panneau .scene { max-width: 480px; padding: 40px 18px 0; }
.scene .poteau { width: 100%; max-width: 440px; }
.scene .plaque b { font-size: 22px; }
.scene .plaque { padding-right: 46px; }
.scene .plaque.gauche { padding-left: 46px; padding-right: 18px; }
@media (max-width: 760px) { .heros-panneau { flex-basis: 100%; } .scene .plaque b { font-size: 20px; } }

#offres .grille, #pricing .grille { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.offre h3 { line-height: 1.1; min-height: 2.2em; }

/* En-tête : actions (langue + bouton) à droite, sur toutes les tailles */
.entete .nav { margin-left: auto; }
.entete-actions { display: flex; align-items: center; gap: 20px; margin-left: 12px; }
.entete-actions a.langue { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; color: var(--ardoise); }
.entete-actions .bouton { font-size: 18px; padding: 10px 18px; }
@media (max-width: 760px) {
  .entete .conteneur { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 16px; padding-block: 12px 4px; }
  .marque { grid-row: 1; grid-column: 1 / 3; }
  .marque span { white-space: nowrap; }
  .entete-actions { display: contents; }
  .entete-actions .bouton { grid-row: 1; grid-column: 3; font-size: 16px; padding: 8px 14px; min-height: 40px; white-space: nowrap; }
  .entete-actions a.langue { grid-row: 2; grid-column: 1; padding-block: 8px; padding-right: 14px; border-right: 1px solid var(--trait); }
  .entete .nav { grid-row: 2; grid-column: 2 / -1; margin-left: 0; margin-top: 0; }
}

/* Premiers clients */
.fondateurs { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; }
.offre-fondateur { background: var(--signal); border-radius: 10px; padding: 32px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.offre-fondateur h3, .cas-en-cours h3 { margin: 0; font-family: var(--cond); font-weight: 700; font-size: 34px; line-height: 1.05; text-transform: uppercase; }
.offre-fondateur p, .cas-en-cours p { margin: 0; font-size: 17px; line-height: 1.6; }
.offre-badge, .cas-statut { font-family: var(--cond); font-weight: 700; font-size: 16px; text-transform: uppercase; letter-spacing: 1px; }
.offre-fondateur .places { font-size: 16px; }
.cas-en-cours { background: var(--calcaire); border-radius: 10px; padding: 32px; display: flex; flex-direction: column; gap: 14px; border: 2px dashed var(--bord-champ); }
.cas-en-cours .cas-statut { color: var(--sapin); }
.cas-en-cours p:not(.cas-statut) { color: var(--gris); }
.cas-en-cours .etiquettes li { color: var(--ardoise); }
.contact-intro .promesse { background: var(--blanc); border-left: 0; border-radius: 8px; padding: 14px 16px; color: var(--ardoise); }

/* Portrait */
.vert .conteneur { align-items: flex-start; }
.portrait { flex: 0 0 220px; max-width: 220px; aspect-ratio: 1; background: none; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 6px var(--signal); margin-top: 8px; }
.portrait img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) { .portrait { flex-basis: 160px; max-width: 160px; } }

/* ===== Pages services et FAQ ===== */
.offre .lien-fleche { margin-top: auto; padding-top: 4px; font-size: 18px; }
.page-service { padding-block: 40px 96px; display: flex; flex-direction: column; gap: 28px; }
.fil { font-size: 15px; color: var(--gris); display: flex; gap: 8px; flex-wrap: wrap; }
.fil a { color: var(--sapin); font-weight: 600; }
.service-tete { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
.service-intro { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.service-intro .titre-1 { font-size: clamp(44px, 5.5vw, 72px); }
.prix-encart { flex: 1 1 260px; max-width: 360px; background: var(--signal); border-radius: 10px; padding: 26px 28px; display: flex; flex-direction: column; gap: 8px; position: relative; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.prix-titre { margin: 0; font-family: var(--cond); font-weight: 700; font-size: 16px; text-transform: uppercase; letter-spacing: 1px; }
.prix-montant { margin: 0; font-family: var(--cond); font-weight: 700; font-size: 48px; line-height: 1; }
.prix-montant span { font-size: 22px; }
.prix-detail { margin: 0; font-size: 15px; line-height: 1.5; }
.service-corps { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.service-corps > div { background: var(--blanc); border-radius: 10px; padding: 28px; }
.page-service .titre-3, .faq .titre-3 { margin: 8px 0 14px; }
.liste-balise { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.liste-balise li { position: relative; padding-left: 24px; font-size: 17px; line-height: 1.5; }
.liste-balise li::before { content: ""; position: absolute; left: 0; top: 7px; width: 14px; height: 11px; background: var(--signal); clip-path: polygon(0 0, 65% 0, 100% 50%, 65% 100%, 0 100%); }
.etapes { margin: 0; padding: 0; list-style: none; counter-reset: etape; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.etapes li { counter-increment: etape; background: var(--blanc); border-radius: 10px; padding: 22px 22px 22px 64px; position: relative; display: flex; flex-direction: column; gap: 6px; }
.etapes li::before { content: counter(etape); position: absolute; left: 20px; top: 20px; width: 32px; height: 32px; border-radius: 5px; background: var(--signal); font-family: var(--cond); font-weight: 700; font-size: 20px; display: flex; align-items: center; justify-content: center; }
.etapes strong { font-family: var(--cond); font-size: 22px; text-transform: uppercase; line-height: 1.1; }
.etapes span { font-size: 16px; line-height: 1.5; color: var(--gris); }
.note-service { margin: 0; font-size: 16px; color: var(--gris); }
.formules { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.formule { background: var(--blanc); border-radius: 10px; padding: 26px; display: flex; flex-direction: column; gap: 12px; border: 2px solid var(--blanc); }
.formule.vedette { border-color: var(--ardoise); }
.formule h3 { margin: 0; font-family: var(--cond); font-weight: 700; font-size: 26px; text-transform: uppercase; }
.formule .prix-montant { font-size: 40px; }
.qrs { display: flex; flex-direction: column; gap: 10px; }
.qr { background: var(--blanc); border-radius: 10px; padding: 0 22px; }
.qr summary { cursor: pointer; list-style: none; padding: 18px 32px 18px 0; position: relative; font-weight: 600; font-size: 18px; line-height: 1.4; }
.qr summary::-webkit-details-marker { display: none; }
.qr summary::after { content: ""; position: absolute; right: 4px; top: 24px; width: 12px; height: 12px; border-right: 3px solid var(--sapin); border-bottom: 3px solid var(--sapin); transform: rotate(45deg); transition: transform 0.2s; }
.qr[open] summary::after { transform: rotate(-135deg); top: 30px; }
.qr p { margin: 0 0 20px; font-size: 17px; line-height: 1.65; color: var(--gris); max-width: 72ch; }
.faq { max-width: 900px; display: flex; flex-direction: column; gap: 28px; }
.faq-appel p { margin: 0; font-size: 18px; }
.grille-services { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.carte-service { background: var(--blanc); border-radius: 10px; padding: 30px; display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: var(--ardoise); border-top: 6px solid var(--signal); }
.carte-service:hover { box-shadow: 0 0 0 2px var(--ardoise); color: var(--ardoise); }
.carte-service h2 { margin: 0; font-family: var(--cond); font-weight: 700; font-size: 30px; text-transform: uppercase; line-height: 1.05; }
.carte-service .prix-montant { font-size: 36px; }
.carte-service p:not(.prix-montant) { margin: 0; font-size: 17px; line-height: 1.5; color: var(--gris); }
.carte-service .lien-fleche { margin-top: auto; color: var(--sapin); }
@media (prefers-reduced-motion: reduce) { .qr summary::after { transition: none; } }

/* Je viens vous voir */
.local { background: var(--ardoise); color: var(--blanc); }
.local-grille { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; }
.local-intro { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.local-intro .titre-2 { margin: 0; }
.local-intro p { margin: 0; font-size: 19px; line-height: 1.6; color: var(--sur-sombre); max-width: 52ch; }
.local-points { flex: 1 1 420px; min-width: 0; gap: 16px; }
.local-points li { font-size: 18px; color: var(--sur-sombre); }
.local-points strong { color: var(--blanc); }

/* Exemples */
.exemples { display: flex; flex-direction: column; gap: 72px; }
.exemple { display: flex; flex-wrap: wrap; align-items: center; gap: 40px 56px; }
.exemple:nth-child(even) { flex-direction: row-reverse; }
.exemple-visuel { flex: 1 1 420px; min-width: 0; display: block; background: var(--blanc); border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 1px var(--trait), 0 18px 40px -24px rgba(28, 36, 32, 0.45); }
.exemple-visuel:hover { box-shadow: 0 0 0 2px var(--ardoise), 0 18px 40px -24px rgba(28, 36, 32, 0.45); }
.exemple-barre { display: flex; gap: 6px; padding: 10px 14px; background: var(--calcaire); border-bottom: 1px solid var(--trait); }
.exemple-barre i { width: 10px; height: 10px; border-radius: 50%; background: var(--bord-champ); }
.exemple-visuel img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.exemple-texte { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.exemple-texte .surtitre, .exemple-texte .titre-3 { margin: 0; }
.exemple-texte .titre-3 { font-size: clamp(32px, 3.6vw, 44px); line-height: 1; }
.exemple-texte p:not(.surtitre) { margin: 0; font-size: 18px; line-height: 1.6; color: var(--gris); }
.exemple-texte .etiquettes { width: 100%; padding: 4px 0 8px; }
.exemples-appel { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.exemples-appel .titre-2 { margin: 0; }

/* ===== Refonte : héros téléphone, vitrine, classement, méthode, menu mobile, pied ===== */

/* Héros : téléphone avec la carte Google */
.heros-panneau .scene-tel { padding: 36px 24px 0; display: block; }
.telephone { position: relative; z-index: 3; width: 100%; max-width: 300px; margin: 0 auto 72px; background: #111614; border-radius: 34px; padding: 10px; box-shadow: 0 24px 40px -18px rgba(0, 0, 0, 0.6); }
.tel-ecran { background: var(--blanc); border-radius: 26px; overflow: hidden; display: flex; flex-direction: column; }
.tel-recherche { margin: 14px 12px 10px; display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; background: var(--calcaire); color: var(--gris); font-size: 14px; }
.tel-carte { width: 100%; height: auto; }
.tel-resultats { list-style: none; margin: 0; padding: 0 0 8px; }
.tel-resultats li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-top: 1px solid var(--trait); color: var(--gris); font-size: 13px; line-height: 1.3; }
.tel-resultats li:first-child { border-top: 0; }
.tel-rang { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--trait); color: var(--ardoise); font-weight: 600; font-size: 12px; display: flex; align-items: center; justify-content: center; }
.tel-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tel-info strong { color: var(--ardoise); font-size: 15px; }
.etoiles { color: #D99A1E; letter-spacing: 1px; }
.tel-premier { background: #FFF6E3; box-shadow: inset 4px 0 0 var(--signal); }
.tel-premier .tel-rang { background: var(--signal); }
.tel-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tel-actions span { border: 1px solid var(--sapin); color: var(--sapin); border-radius: 999px; padding: 3px 9px; font-size: 12px; font-weight: 600; }
.tel-actions span:first-child { background: var(--sapin); color: var(--blanc); }
.tel-badge { position: absolute; z-index: 4; top: 20px; right: 12px; margin: 0; background: var(--signal); color: var(--ardoise); font-family: var(--cond); font-weight: 700; font-size: 20px; text-transform: uppercase; padding: 8px 14px; border-radius: 6px; transform: rotate(4deg); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25); }

/* Vitrine des exemples */
.vitrine-chapo { margin: -24px 0 40px; }
.vitrine { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 40px 32px; }
.vitrine-item { display: flex; flex-direction: column; gap: 18px; text-decoration: none; color: var(--ardoise); }
.appareils { position: relative; display: block; padding: 0 30px 30px 0; }
.ecran-portable { display: block; background: var(--ardoise); border-radius: 10px 10px 4px 4px; padding: 7px 7px 13px; box-shadow: 0 18px 30px -20px rgba(28, 36, 32, 0.55); transition: box-shadow 0.15s; }
.ecran-portable img { width: 100%; height: auto; border-radius: 3px; }
.ecran-tel { position: absolute; right: 0; bottom: 0; width: 29%; background: var(--ardoise); border-radius: 14px; padding: 4px; box-shadow: 0 12px 24px -12px rgba(28, 36, 32, 0.6); }
.ecran-tel img { width: 100%; height: auto; border-radius: 10px; }
.vitrine-item:hover .ecran-portable { box-shadow: 0 0 0 3px var(--signal), 0 18px 30px -20px rgba(28, 36, 32, 0.55); }
.vitrine-legende { display: flex; flex-direction: column; gap: 4px; }
.vitrine-legende strong { font-family: var(--cond); font-weight: 700; font-size: 28px; line-height: 1.05; text-transform: uppercase; }
.vitrine-legende .lien-fleche { margin-top: 0; color: var(--sapin); }
@media (prefers-reduced-motion: reduce) { .ecran-portable { transition: none; } }

/* Section sombre : la ligne où les clients s'arrêtent */
.classement { list-style: none; margin: 36px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-width: 460px; }
.classement li { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 8px; background: rgba(255, 255, 255, 0.08); color: var(--blanc); font-size: 17px; font-weight: 500; }
.classement b { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--signal); color: var(--ardoise); display: flex; align-items: center; justify-content: center; font-family: var(--cond); font-size: 18px; }
.classement em { margin-left: auto; font-style: normal; font-weight: 600; color: var(--signal); white-space: nowrap; }
.classement .coupure { background: none; padding: 6px 0; gap: 12px; color: var(--signal); font-family: var(--cond); font-weight: 700; font-size: 17px; text-transform: uppercase; letter-spacing: 1px; }
.classement .coupure::before, .classement .coupure::after { content: ""; flex: 1 1 24px; border-top: 2px dashed var(--signal); }
.classement .coupure span { flex: none; }
.classement .cache { color: #8E9A93; background: rgba(255, 255, 255, 0.03); }
.classement .cache b { background: #4A5650; color: #C9D0CB; }
.classement .cache em { color: #8E9A93; }
.classement .vous { outline: 2px dashed #6E7B74; outline-offset: -2px; }

/* Méthode : étapes + poteau */
.methode-grille { display: flex; flex-wrap: wrap; align-items: center; gap: 48px 56px; }
.methode-texte { flex: 999 1 480px; min-width: 0; }
.methode-texte .titre-2 { margin-bottom: 32px; }
.methode-etapes { display: flex; flex-direction: column; gap: 16px; }
.methode-etapes .carte { flex: none; max-width: none; display: grid; grid-template-columns: 48px 1fr; align-items: start; gap: 6px 20px; padding: 24px; }
.methode-etapes .numero { grid-row: span 2; }
.heros-panneau.methode-panneau { flex: 1 1 360px; }

/* Menu mobile */
.menu-bouton { display: none; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border: 2px solid var(--ardoise); border-radius: 6px; background: transparent; color: var(--ardoise); font-family: var(--cond); font-weight: 700; font-size: 18px; text-transform: uppercase; cursor: pointer; }
@media (max-width: 1080px) {
  .entete .conteneur { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 0 12px; padding-block: 12px; }
  .marque { grid-row: 1; grid-column: 1; }
  .entete-actions { display: contents; }
  .entete-actions .bouton { grid-row: 1; grid-column: 2; font-size: 17px; padding: 8px 14px; min-height: 44px; white-space: nowrap; }
  .menu-bouton { display: inline-flex; grid-row: 1; grid-column: 3; }
  .entete .nav, .entete-actions a.langue { display: none; }
  .entete.menu-ouvert .nav { display: flex; grid-row: 2; grid-column: 1 / -1; flex-direction: column; align-items: stretch; gap: 0; margin: 12px 0 0; padding: 0; overflow: visible; border-top: 1px solid var(--trait); }
  .entete.menu-ouvert .nav a:not(.bouton) { padding: 14px 4px; border-bottom: 1px solid var(--trait); font-size: 18px; }
  .entete.menu-ouvert .nav a[aria-current="page"] { box-shadow: inset 4px 0 0 var(--signal); padding-left: 14px; }
  .entete.menu-ouvert .entete-actions a.langue { display: inline-flex; grid-row: 3; grid-column: 1 / -1; justify-self: start; padding: 14px 4px; border-right: 0; }
}
@media (max-width: 560px) {
  .entete-actions .bouton { display: none; }
  .entete.menu-ouvert .entete-actions .bouton { display: inline-flex; grid-row: 4; grid-column: 1 / -1; margin: 4px 0 8px; }
}

/* Pied de page */
.pied .pied-haut { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); align-items: start; gap: 40px; padding-block: 64px 40px; }
.pied .pied-bas { border-top: 1px solid rgba(255, 255, 255, 0.12); padding-block: 24px; }
.pied .pied-col { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; font-size: 15px; }
.pied-col p { margin: 0; line-height: 1.5; }
.pied-nom { display: flex; align-items: center; gap: 12px; font-family: var(--cond); font-weight: 700; font-size: 26px; text-transform: uppercase; color: var(--blanc); }
.pied-titre { font-family: var(--cond); font-weight: 700; font-size: 18px; text-transform: uppercase; letter-spacing: 1px; color: var(--blanc); }
.pied a.bouton-signal { color: var(--ardoise); margin-top: 8px; font-size: 18px; }
.pied a.bouton-signal:hover { color: var(--ardoise); }
.etoile-vide { color: var(--trait); }
.exemple-visuel.exemple-appareils { background: none; border-radius: 0; overflow: visible; box-shadow: none; }
.exemple-visuel.exemple-appareils:hover { box-shadow: none; }
.exemple-appareils img, .exemple-appareils .ecran-tel img { aspect-ratio: auto; object-fit: fill; }
.exemple-appareils:hover .ecran-portable { box-shadow: 0 0 0 3px var(--signal), 0 18px 30px -20px rgba(28, 36, 32, 0.55); }

/* Pack Lancement */
.bandeau-lancement { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; background: var(--blanc); border: 3px dashed var(--sapin); border-radius: 10px; padding: 28px 32px; }
.lancement-texte { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.lancement-texte h3 { margin: 0; font-family: var(--cond); font-weight: 700; font-size: 32px; line-height: 1.05; text-transform: uppercase; }
.lancement-texte p { margin: 0; font-size: 17px; line-height: 1.5; color: var(--gris); }
.lancement-texte .lancement-badge { font-family: var(--cond); font-weight: 700; font-size: 18px; text-transform: uppercase; letter-spacing: 1px; color: var(--sapin); }