/* ===========================================================================
   Site vitrine sooluo.fr — nouvelle identité (novembre 2026)

   Jetons repris du canvas « Sooluo — Refonte interface » (sooluo-tokens.css) :
   encre bleu nuit, une seule couleur d'action (le bleu ne sert qu'à ce qui
   s'appuie), fond bleuté clair, cartes blanches posées dessus, Inter pour
   tout le texte, JetBrains Mono pour tout ce qui se compare (montant,
   puissance, date, référence). Rayons 8 / 12 / 16 px et la gélule.

   Aucune ressource externe : les polices sont dans assets/fonts.
   Points de rupture de la charte : mobile < 768 px, tablette 768–1199 px,
   bureau ≥ 1200 px.
   =========================================================================== */

/* --- Polices ------------------------------------------------------------- */
@font-face {
  font-family: "Inter var";
  src: url("fonts/inter-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
/* JetBrains Mono, licence OFL (fonts/JetBrainsMono-OFL.txt) : sous-ensemble
   latin des fichiers officiels v2.304 (€, °, ², espaces fines, flèches). */
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

/* --- Jetons ---------------------------------------------------------------- */
:root {
  /* Charte */
  --encre: #0e1630;
  --fond-clair: #f5f7fb;
  --action: #1e3fd8;
  --action-fonce: #152e9e;
  --action-pale: #ebf0ff;
  --action-100: #d6dffd;
  --vert: #1a7f4b;
  --vert-fonce: #17663a;
  --vert-pale: #e2f5e9;
  --sable: #8a4b00;
  --sable-pale: #fdf0dc;
  --info: #0f6b66;
  --info-pale: #e1f3f1;
  --violet: #4d3f85;
  --violet-pale: #eeebf5;
  --danger: #b42318;
  --gris-texte: #3b4458;
  --gris-tertiaire: #5b6475;
  --filet: #e4e8f0;
  --filet-fort: #d9dee8;
  --surface: #ffffff;
  --surface-voile: #fafbfd;
  --surface-muted: #eef1f6;
  --survol: #f1f4fa;

  /* Typographie : 7 tailles */
  --font-sans: "Inter var", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
  --t-xs: 0.75rem;
  --t-sm: 0.875rem;
  --t-md: 0.9375rem;
  --t-body: 1.0625rem;
  --t-lg: 1.3125rem;
  --t-xl: 1.75rem;
  --t-2xl: 2.5rem;
  --serrage-titre: -0.02em;

  /* Espacements : grille de 4 px */
  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-5: 1.5rem;
  --e-6: 2rem;
  --e-7: 3rem;

  /* Cibles, formes, ombres */
  --touch: 3rem;
  --touch-lg: 3.5rem;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --ombre-douce: 0 1px 2px rgb(14 22 48 / 0.08);
  --ombre-portee: 0 8px 24px rgb(14 22 48 / 0.18);

  /* Mise en page du site */
  --largeur: 76rem;
  --gouttiere: clamp(1rem, 4vw, 2.5rem);
  --hauteur-entete: 4.5rem;
}

/* --- Base -------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--hauteur-entete) + 1rem);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--surface);
  color: var(--encre);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01";
  overflow-x: hidden;
  /* Une page courte (404) garde son pied en bas de l'écran. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
body > main { flex: 1 0 auto; }
/* Un élément masqué par le script (contact vide) le reste, même quand une
   règle lui donne un affichage. */
[hidden] { display: none !important; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4 {
  margin: 0;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: var(--serrage-titre);
  text-wrap: balance;
}
h3, h4 { font-weight: 600; }
p, ul, ol, dl { margin: 0; }
a { color: var(--action); text-underline-offset: 0.18em; }
a:hover { color: var(--action-fonce); }
:focus-visible { outline: 3px solid var(--action); outline-offset: 2px; border-radius: 4px; }
b, strong { font-weight: 600; }
.mono { font-family: var(--font-mono); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.lien-evitement {
  position: absolute; left: var(--e-4); top: -4rem; z-index: 100;
  background: var(--encre); color: #fff; padding: var(--e-3) var(--e-4);
  border-radius: var(--radius); text-decoration: none; font-weight: 600;
}
.lien-evitement:focus { top: var(--e-3); color: #fff; }

.conteneur {
  width: 100%;
  max-width: calc(var(--largeur) + 2 * var(--gouttiere));
  margin-inline: auto;
  padding-inline: max(var(--gouttiere), env(safe-area-inset-left, 0px));
}

/* Surtitre : étiquette en capitales, en mono, au-dessus d'un titre. */
.surtitre {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--action);
}
.chapeau {
  margin-top: var(--e-4);
  max-width: 40rem;
  font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
  line-height: 1.6;
  color: var(--gris-texte);
}

/* --- Boutons ----------------------------------------------------------------
   48 px minimum, 56 px pour l'action principale. Un seul bouton bleu par zone. */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: var(--touch);
  padding: 0 1.375rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font: 600 var(--t-md)/1.2 var(--font-sans);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.bouton svg { width: 1.125rem; height: 1.125rem; flex: none; }
.bouton--action { background: var(--action); color: #fff; }
.bouton--action:hover { background: var(--action-fonce); color: #fff; }
.bouton--encre { background: var(--encre); color: #fff; }
.bouton--encre:hover { background: #1c2747; color: #fff; }
.bouton--contour { background: var(--surface); color: var(--encre); border-color: var(--filet-fort); }
.bouton--contour:hover { background: var(--survol); color: var(--encre); border-color: var(--gris-tertiaire); }
.bouton--clair { background: rgb(255 255 255 / 0.1); color: #fff; border-color: rgb(255 255 255 / 0.28); }
.bouton--clair:hover { background: rgb(255 255 255 / 0.18); color: #fff; }
.bouton--grand { min-height: var(--touch-lg); padding-inline: 1.75rem; font-size: var(--t-body); }
.bouton:active { transform: translateY(1px); }
.actions { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-top: var(--e-6); }

/* Pastilles en gélule. */
.pastille {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 1.75rem;
  padding: 0.125rem 0.75rem;
  border-radius: var(--radius-pill);
  background: var(--surface-muted);
  color: var(--gris-texte);
  font-size: var(--t-sm);
  font-weight: 600;
  white-space: nowrap;
}
.pastille--action { background: var(--action-pale); color: var(--action); }
.pastille--vert { background: var(--vert-pale); color: var(--vert-fonce); }
.pastille--sable { background: var(--sable-pale); color: var(--sable); }
.pastille--info { background: var(--info-pale); color: var(--info); }
.pastille--violet { background: var(--violet-pale); color: var(--violet); }
.pastille__point { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: currentColor; }

/* --- En-tête : barre blanche, collée en haut ------------------------------- */
.entete {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgb(255 255 255 / 0.94);
  border-bottom: 1px solid var(--filet);
  padding-top: env(safe-area-inset-top, 0px);
}
@supports (backdrop-filter: blur(8px)) {
  .entete { background: rgb(255 255 255 / 0.82); backdrop-filter: saturate(1.4) blur(12px); }
}
.entete__barre {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  min-height: var(--hauteur-entete);
}
.marque {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--encre);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
  flex: none;
}
.marque:hover { color: var(--encre); }
.marque__pave {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 10px;
  background: var(--encre);
}
.marque__pave svg { width: 1.5rem; height: 1.5rem; }
/* Le ruban est toujours blanc sur le pavé encre, quelle que soit la page. */
.marque__pave svg path { stroke: #fff; }

.nav { display: flex; align-items: center; gap: var(--e-1); margin-left: auto; }
.nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  padding: 0 0.875rem;
  border-radius: 10px;
  color: var(--gris-texte);
  font-size: var(--t-md);
  font-weight: 500;
  text-decoration: none;
}
.nav a:hover { background: var(--survol); color: var(--encre); }
.nav a[aria-current="page"] { color: var(--encre); font-weight: 600; }
.nav__separateur { width: 1px; height: 1.75rem; background: var(--filet); margin-inline: var(--e-2); }
.nav a.bouton { color: #fff; font-weight: 600; padding-inline: 1.25rem; margin-left: var(--e-1); }
.nav a.bouton:hover { background: var(--action-fonce); color: #fff; }

.menu {
  display: none;
  place-items: center;
  width: var(--touch);
  height: var(--touch);
  margin-left: auto;
  border: 1px solid var(--filet-fort);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--encre);
  cursor: pointer;
}
.menu svg { width: 1.375rem; height: 1.375rem; }
.menu .menu__fermer { display: none; }
.menu[aria-expanded="true"] .menu__ouvrir { display: none; }
.menu[aria-expanded="true"] .menu__fermer { display: block; }

@media (max-width: 1199.98px) {
  .menu { display: grid; }
  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--e-3) var(--gouttiere) var(--e-5);
    background: var(--surface);
    border-bottom: 1px solid var(--filet);
    box-shadow: var(--ombre-portee);
    max-height: calc(100dvh - var(--hauteur-entete));
    overflow-y: auto;
  }
  .nav.est-ouvert { display: flex; }
  .nav a { min-height: 3.25rem; font-size: var(--t-body); }
  .nav__separateur { width: auto; height: 1px; margin: var(--e-2) 0; }
  .nav a.bouton { margin: var(--e-2) 0 0; justify-content: center; }
}

/* --- Sections ---------------------------------------------------------------- */
.section { padding-block: clamp(2.5rem, 5.5vw, 4rem); }
.section--fond { background: var(--fond-clair); }
.section--encre { background: var(--encre); color: #fff; }
.section--encre .chapeau { color: #c3cadb; }
.section--encre .surtitre { color: #9db0ff; }
.section__tete { max-width: 46rem; margin-bottom: clamp(1.5rem, 3.5vw, 2.25rem); }
.section__tete--centre { margin-inline: auto; text-align: center; }
.section__tete--centre .chapeau { margin-inline: auto; }
.section__tete h2 { margin-top: var(--e-3); font-size: clamp(1.875rem, 4.2vw, 2.875rem); }

/* Carte posée : un filet, pas d'ombre. L'ombre est réservée à ce qui flotte. */
.carte {
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 3vw, 1.75rem);
}

/* --- Appel final (et page 404) ---------------------------------------------- */
.final { text-align: center; }
.final h1, .final h2 { margin-top: var(--e-3); font-size: clamp(2rem, 4.5vw, 3.25rem); }
.final .chapeau { margin-inline: auto; }
.final .actions { justify-content: center; }

/* --- Pied de page ------------------------------------------------------------ */
.pied {
  background: var(--fond-clair);
  border-top: 1px solid var(--filet);
  padding-block: var(--e-7) calc(var(--e-6) + env(safe-area-inset-bottom, 0px));
  color: var(--gris-tertiaire);
  font-size: var(--t-sm);
}
.pied__grille {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e-5) var(--e-6);
  align-items: center;
}
.pied nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 var(--e-1); }
.pied nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  padding: 0 0.625rem;
  border-radius: var(--radius-sm);
  color: var(--gris-texte);
  font-weight: 500;
  text-decoration: none;
}
.pied nav a:hover { background: var(--surface-muted); color: var(--encre); }
.pied nav a[aria-current="page"] { color: var(--encre); font-weight: 600; }
.pied__mention { grid-column: 1 / -1; padding-top: var(--e-5); border-top: 1px solid var(--filet); }
@media (max-width: 767.98px) {
  .pied__grille { grid-template-columns: 1fr; }
  .pied nav { justify-content: flex-start; margin-left: -0.625rem; }
}

/* --- Pages légales ------------------------------------------------------------
   Trames à faire valider par un juriste : les champs à compléter se voient
   de loin, c'est ce qu'on cherche en relisant. */
.legal { background: var(--fond-clair); padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.legal__corps { max-width: 52rem; }
.legal h1 { margin-top: var(--e-3); font-size: clamp(2rem, 4.5vw, 3rem); }
.legal .chapeau { max-width: none; }

.trame {
  margin-top: var(--e-6);
  padding: var(--e-4) 1.25rem;
  border: 1px solid #ecd2a8;
  border-radius: var(--radius-lg);
  background: var(--sable-pale);
}
.trame__titre { display: flex; align-items: center; gap: var(--e-2); font-weight: 700; font-size: 1.125rem; color: var(--sable); line-height: 1.3; }
.trame__titre::before { content: ""; width: 0.625rem; height: 0.625rem; border-radius: 50%; background: currentColor; flex: none; }
.trame p { margin-top: var(--e-2); font-size: var(--t-md); color: var(--gris-texte); }

.sommaire {
  margin-top: var(--e-6);
  padding: 1.125rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: var(--radius-lg);
}
.sommaire h2 {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gris-tertiaire);
}
.sommaire ol { margin: var(--e-2) 0 0; padding-left: 1.5rem; columns: 2 16rem; column-gap: var(--e-6); }
.sommaire li { break-inside: avoid; }
.sommaire li::marker { font-family: var(--font-mono); font-size: var(--t-sm); color: var(--gris-tertiaire); }
/* En bloc, et non en ligne-bloc : un intitulé sur deux lignes gardait son
   numéro en face de la seconde. */
.sommaire a { display: block; padding-block: 0.625rem; line-height: 1.4; font-weight: 500; text-decoration: none; }
.sommaire a:hover { text-decoration: underline; }

.clause {
  margin-top: var(--e-4);
  padding: 1.375rem 1.5rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: var(--radius-lg);
  scroll-margin-top: calc(var(--hauteur-entete) + 1rem);
}
.clause h2 { font-size: clamp(1.25rem, 2.6vw, var(--t-lg)); }
.clause h3 { font-size: var(--t-body); margin-top: 1.25rem; }
.clause p, .clause ul, .clause .champs, .clause .tableau-defile { margin-top: var(--e-3); }
.clause ul { padding-left: 1.25rem; }
.clause li + li { margin-top: 0.375rem; }
.clause__objet { color: var(--gris-texte); font-size: var(--t-md); }
.clause__objet b { color: var(--encre); }
@media (max-width: 767.98px) { .clause { padding: 1.125rem 1.125rem 1.25rem; } }

.a-completer {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.85em;
  color: #6f3c00;
  background: #ffe8a3;
  padding: 0.05em 0.4em;
  border-radius: 4px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.champs { display: grid; margin-bottom: 0; }
.champs > div {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: var(--e-1) var(--e-4);
  padding: 0.625rem 0;
  border-top: 1px solid var(--filet);
}
.champs dt { font-weight: 600; }
.champs dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 767.98px) { .champs > div { grid-template-columns: minmax(0, 1fr); } }

/* Les tableaux défilent dans leur cadre : jamais la page entière. */
.tableau-defile { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--filet); border-radius: var(--radius); }
.tableau-legal { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: var(--t-md); }
.tableau-legal th, .tableau-legal td { text-align: left; vertical-align: top; padding: 0.625rem 0.75rem; border-top: 1px solid var(--filet); }
.tableau-legal thead th { border-top: 0; background: var(--surface-voile); font-weight: 600; }
/* Sur téléphone, chaque ligne devient une fiche, chaque cellule annonce sa
   colonne (`data-label`). Les en-têtes restent lus par les lecteurs d'écran. */
@media (max-width: 767.98px) {
  .tableau-defile { overflow: visible; border: 0; border-radius: 0; }
  .tableau-legal { min-width: 0; }
  .tableau-legal thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tableau-legal tbody, .tableau-legal tr, .tableau-legal td { display: block; }
  .tableau-legal tr { padding: 0.75rem 0; border-top: 1px solid var(--filet); }
  .tableau-legal td { border: 0; padding: 0.125rem 0; }
  .tableau-legal td:first-child { font-weight: 600; padding-bottom: var(--e-1); }
  .tableau-legal td[data-label]::before { content: attr(data-label) "\00a0: "; color: var(--gris-tertiaire); }
}

.note-travail {
  margin-top: 0.875rem;
  padding: var(--e-3) var(--e-4);
  border: 1px solid #bfe1dd;
  background: var(--info-pale);
  border-radius: var(--radius);
  font-size: var(--t-md);
}
.note-travail b { color: var(--info); }

.legal__maj { margin-top: var(--e-6); color: var(--gris-tertiaire); font-size: var(--t-md); }

/* ===========================================================================
   Page d'accueil — courte et imagée (novembre 2026, deuxième version)
   Base claire, beaucoup d'images : photos de chantier, écrans de l'appli,
   documents. Une phrase par bloc.
   =========================================================================== */

.note { margin-top: var(--e-5); font-size: var(--t-sm); color: var(--gris-tertiaire); line-height: 1.55; }
.note--centre { text-align: center; max-width: 46rem; margin-inline: auto; }

/* Cadres d'appareils, autour d'une capture (image, pas iframe). */
.tablette, .telephone { margin: 0; background: var(--encre); box-shadow: 0 24px 60px rgb(14 22 48 / 0.28), 0 4px 12px rgb(14 22 48 / 0.12); }
.tablette { padding: 0.625rem; border-radius: 1.5rem; }
.telephone { padding: 0.4rem; border-radius: 2rem; }
.tablette img { border-radius: 1rem; width: 100%; height: auto; }
.telephone img { border-radius: 1.65rem; width: 100%; height: auto; }

/* Bulles : une donnée clé posée sur un visuel. */
.bulle {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: 0.75rem 1rem 0.75rem 0.75rem;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px rgb(14 22 48 / 0.18), 0 2px 6px rgb(14 22 48 / 0.08);
  line-height: 1.25;
}
.bulle > span:last-child { display: grid; gap: 0.125rem; }
.bulle small { font-size: var(--t-xs); color: var(--gris-tertiaire); font-weight: 500; }
.bulle b { font-size: var(--t-md); }
.bulle b.mono { font-size: 1.375rem; }
.bulle__icone {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius);
  background: var(--action-pale);
  color: var(--action);
  font-size: var(--t-xs);
  font-weight: 700;
}
.bulle__icone svg { width: 1.25rem; height: 1.25rem; }
.bulle__icone--vert { background: var(--vert-pale); color: var(--vert-fonce); }
.bulle__icone--violet { background: var(--violet-pale); color: var(--violet); }

/* --- 1. Héros ---------------------------------------------------------------- */
.une {
  padding-block: clamp(1.5rem, 3.5vw, 3rem) clamp(2rem, 4vw, 3.5rem);
  background: linear-gradient(180deg, var(--action-pale) 0%, var(--surface) 100%);
  overflow: hidden;
}
.une__grille { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.une h1 { margin-top: var(--e-5); font-size: clamp(2.5rem, 5.6vw, 4.25rem); line-height: 1.02; letter-spacing: -0.04em; }
.une h1 em { font-style: normal; color: var(--action); }
.une__chapeau { margin-top: var(--e-5); max-width: 32rem; font-size: clamp(1.125rem, 1.8vw, 1.3125rem); line-height: 1.5; color: var(--gris-texte); }
.une__prix { margin-top: var(--e-4); font-size: var(--t-sm); color: var(--gris-tertiaire); }
.une__prix b { color: var(--encre); }
.une .pastille { white-space: normal; }
.une__visuel { position: relative; padding: 0 0 4rem 3rem; }
.une__photo { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 1.75rem; box-shadow: 0 24px 60px rgb(14 22 48 / 0.18); }
.une__tablette { position: absolute; left: 0; bottom: 0; width: 38%; transform: rotate(-3deg); }
.une__bulle { position: absolute; }
.une__bulle--haut { top: 8%; right: -0.75rem; }
.une__bulle--bas { bottom: 1.5rem; right: 12%; }
@media (max-width: 1199.98px) {
  .une__grille { grid-template-columns: minmax(0, 1fr); }
  .une__visuel { max-width: 40rem; width: 100%; margin-inline: auto; }
  .une__bulle--haut { right: 0.5rem; }
}
@media (max-width: 767.98px) {
  .une__visuel { padding: 0 0 3rem 1.5rem; }
  .une__tablette { width: 42%; }
  .une__bulle { padding: 0.5rem 0.75rem 0.5rem 0.5rem; }
  .une__bulle .bulle__icone { width: 2rem; height: 2rem; }
  .une__bulle b.mono { font-size: 1.125rem; }
  .une__bulle--haut { top: 0.75rem; right: 0.5rem; }
  .une__bulle--bas { right: 0.5rem; bottom: 0.25rem; }
  .une .actions .bouton { flex: 1 1 100%; }
}

/* --- 1b. Avant / avec ---------------------------------------------------------- */
.avant-avec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4); max-width: 60rem; margin-inline: auto; }
.avant-avec__col { padding: var(--e-5); border-radius: 1.25rem; background: var(--surface); border: 1px solid var(--filet); }
.avant-avec__col--avec { background: var(--action-pale); border-color: transparent; }
.avant-avec h3 { font-size: var(--t-lg); color: var(--gris-tertiaire); }
.avant-avec__col--avec h3 { color: var(--action); }
.avant-avec ul { list-style: none; margin: var(--e-4) 0 0; padding: 0; display: grid; gap: var(--e-3); }
.avant-avec li { display: flex; gap: var(--e-3); align-items: flex-start; line-height: 1.45; }
.avant-avec__icone { display: grid; place-items: center; flex: none; width: 1.75rem; height: 1.75rem; margin-top: 0.05rem; border-radius: 50%; background: var(--surface-muted); color: var(--gris-tertiaire); }
.avant-avec__icone--vert { background: var(--vert-pale); color: var(--vert-fonce); }
.avant-avec__icone svg { width: 1rem; height: 1rem; }
@media (max-width: 767.98px) { .avant-avec { grid-template-columns: minmax(0, 1fr); } }

/* --- 2. En 3 temps ------------------------------------------------------------ */
.temps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2rem); counter-reset: temps; }
.temps__carte { position: relative; }
.temps__image { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 1.25rem; background: var(--fond-clair); }
.temps__image img { width: 100%; height: 100%; object-fit: cover; }
.temps__image--ecran { background: var(--action-pale); padding: 1.5rem 1.5rem 0; }
.temps__image--ecran img { object-fit: cover; object-position: top; border-radius: 0.75rem 0.75rem 0 0; box-shadow: 0 8px 24px rgb(14 22 48 / 0.16); }
.temps__image--papier { background: var(--vert-pale); padding: 1.5rem 2.5rem 0; }
.temps__image--papier img { object-fit: cover; object-position: top; box-shadow: 0 8px 24px rgb(14 22 48 / 0.16); }
.temps__num {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--action);
  color: #fff;
  box-shadow: var(--ombre-douce);
}
.temps h3 { margin-top: var(--e-4); font-size: var(--t-lg); }
.temps p { margin-top: var(--e-1); color: var(--gris-texte); }
@media (max-width: 1199.98px) { .temps { grid-template-columns: minmax(0, 1fr); max-width: 32rem; margin-inline: auto; } }

/* --- 3. Documents -------------------------------------------------------------- */
.section--bleu { background: var(--action-pale); }
.documents-v2 { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.documents-v2 h2 { margin-top: var(--e-3); font-size: clamp(1.875rem, 4.2vw, 2.875rem); }
.documents-v2__liste { list-style: none; margin: var(--e-5) 0 0; padding: 0; display: grid; gap: var(--e-2); }
.documents-v2__liste button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  width: 100%;
  min-height: var(--touch);
  padding: 0 var(--e-4);
  border: 1px solid #cfd9fb;
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--encre);
  font: 600 var(--t-md)/1.2 var(--font-sans);
  text-align: left;
  cursor: pointer;
}
.documents-v2__liste button:hover { border-color: var(--action); color: var(--action); }
.documents-v2__liste button span { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--gris-tertiaire); }
.eventail { position: relative; aspect-ratio: 1 / 0.95; }
.eventail__page {
  position: absolute;
  bottom: 0;
  width: 46%;
  padding: 0;
  border: 0;
  background: #fff;
  cursor: pointer;
  box-shadow: 0 2px 6px rgb(14 22 48 / 0.12), 0 18px 40px rgb(14 22 48 / 0.18);
  transform-origin: 50% 100%;
  transition: transform 0.2s;
}
.eventail__page img { width: 100%; height: auto; }
.eventail__page--1 { left: 5%; transform: rotate(-12deg); }
.eventail__page--2 { left: 18%; transform: rotate(-5deg); }
.eventail__page--3 { left: 36%; transform: rotate(3deg); }
/* Resserrée : inclinée, la dernière page dépassait l'écran sur téléphone. */
.eventail__page--4 { left: 47%; transform: rotate(8deg); }
.eventail__page:hover, .eventail__page:focus-visible { transform: rotate(0) translateY(-1.25rem); z-index: 5; }
@media (prefers-reduced-motion: reduce) { .eventail__page { transition: none; } }
@media (max-width: 1199.98px) {
  .documents-v2 { grid-template-columns: minmax(0, 1fr); }
  .eventail { max-width: 36rem; width: 100%; margin-inline: auto; order: -1; }
}

/* --- 4. L'appli, annotée -------------------------------------------------------- */
.appli { position: relative; max-width: 58rem; margin-inline: auto; padding: 1rem 0 2rem; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; }
.appli__tablette { width: min(100%, 30rem); }
.appli__telephone { position: absolute; right: 6%; bottom: 0; width: min(28%, 11.5rem); }
.appli__bulle { position: absolute; max-width: 16rem; }
.appli__bulle--1 { left: 0; top: 30%; }
.appli__bulle--2 { right: 0; top: 18%; }
.appli__bulle--3 { left: 2%; bottom: 14%; }
@media (max-width: 1199.98px) {
  .appli { padding-bottom: 0; }
  .appli__bulle { position: static; max-width: none; width: min(100%, 30rem); margin-top: var(--e-3); }
  .appli__telephone { display: none; }
}

/* --- 5. Matériel et marques ------------------------------------------------------ */
.metiers-v2 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-4); }
.metier-v2 { position: relative; margin: 0; overflow: hidden; border-radius: 1.25rem; aspect-ratio: 4 / 3; background: var(--action-pale); }
.metier-v2 img { width: 100%; height: 100%; object-fit: cover; }
.metier-v2 figcaption {
  position: absolute;
  inset: auto 0 0 0;
  display: grid;
  gap: 0.125rem;
  padding: 2.5rem 1.25rem 1.125rem;
  background: linear-gradient(180deg, transparent, rgb(14 22 48 / 0.82));
  color: #fff;
}
.metier-v2 figcaption b { font-size: var(--t-lg); }
.metier-v2 figcaption span { font-size: var(--t-sm); color: #dfe4f0; }
/* Le produit occupe la hauteur libre au-dessus de la légende, entier : la
   légende de cette carte ne fonce pas le fond, elle reste lisible sur le bleu pâle. */
.metier-v2__dessin { position: absolute; inset: 0; }
.metier-v2__dessin svg { height: 70%; width: auto; }
/* Le ballon est détouré : il se pose sur le fond de la carte, avec une ombre douce. */
/* Hauteur explicite (la carte tient sa hauteur de aspect-ratio : un pourcentage
   sur un enfant en flux n'y résout pas), image entière centrée par object-fit. */
.metier-v2__dessin img { position: absolute; left: 0; top: 1rem; width: 100%; height: calc(100% - 6.75rem); object-fit: contain; filter: drop-shadow(0 16px 24px rgb(14 22 48 / 0.22)); }
.metier-v2--dessin figcaption { padding-top: 1.25rem; background: linear-gradient(180deg, rgb(235 240 255 / 0), rgb(235 240 255 / 0.96) 40%); color: var(--encre); }
.metier-v2--dessin figcaption span { color: var(--gris-texte); }
/* La clim est à gauche de la photo : on garde ce côté au recadrage. */
.metier-v2__clim { object-position: 10% 50%; }
/* Le ballon est à gauche de la buanderie : on garde ce côté, et le bas de l'appareil. */
.metier-v2__ballon { object-position: 30% 60%; }
@media (max-width: 1199.98px) { .metiers-v2 { grid-template-columns: minmax(0, 1fr); max-width: 32rem; margin-inline: auto; } }

.produits { list-style: none; margin: var(--e-5) 0 var(--e-6); padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-4); }
.produits li { display: grid; place-items: center; aspect-ratio: 4 / 3; padding: var(--e-4); background: var(--surface); border: 1px solid var(--filet); border-radius: var(--radius-lg); }
.produits img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
@media (max-width: 767.98px) { .produits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.logos { list-style: none; margin: var(--e-5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: var(--e-2); }
.logos li { display: grid; place-items: center; min-height: 4rem; padding: var(--e-2) var(--e-3); background: var(--surface); border: 1px solid var(--filet); border-radius: var(--radius); }
.logos img { max-height: 1.75rem; width: auto; max-width: 100%; object-fit: contain; }
@media (max-width: 1199.98px) { .logos { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .logos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* --- 6. Tarifs ------------------------------------------------------------------------ */
.tarifs__roi { margin: var(--e-4) auto 0; max-width: 40rem; text-align: center; font-weight: 500; color: var(--encre); }
.offres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-4); align-items: stretch; }
.offre { position: relative; display: flex; flex-direction: column; gap: var(--e-2); padding: var(--e-6) 1.5rem 1.5rem; background: var(--surface); border: 1px solid var(--filet); border-radius: var(--radius-lg); }
.offre h3 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); font-size: var(--t-lg); }
.offre__prix { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--e-1) var(--e-2); margin-top: var(--e-3); }
.offre__prix b { font-size: clamp(2rem, 3.4vw, var(--t-2xl)); line-height: 1; letter-spacing: -0.03em; }
.offre__prix > span { color: var(--gris-tertiaire); font-size: var(--t-sm); }
.offre__detail { color: var(--gris-texte); font-size: var(--t-sm); min-height: 1.5em; }
.offre__detail .mono { font-family: inherit; font-weight: 600; letter-spacing: 0; }
.offre .bouton { margin-top: auto; }
.offre__detail + .bouton { margin-top: var(--e-5); }
/* Le compte en plus (D-405), sous le prix de la formule. */
.offre__siege { color: var(--gris-texte); font-size: var(--t-sm); margin: .2rem 0 0; }
.offre__siege + .bouton { margin-top: var(--e-5); }
.offre--mise-en-avant { border: 2px solid var(--action); box-shadow: var(--ombre-portee); }
.offre__badge { position: absolute; top: 0; left: 1.5rem; transform: translateY(-50%); padding: 0.25rem 0.75rem; border-radius: var(--radius-pill); background: var(--action); color: #fff; font-size: var(--t-xs); font-weight: 600; }
@media (max-width: 1199.98px) { .offres { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .offres { grid-template-columns: minmax(0, 1fr); } .offre--mise-en-avant { order: -1; } }

/* --- 7. Questions et appel final ------------------------------------------------- */
.faq-grille { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: clamp(1.5rem, 5vw, 4rem); align-items: start; }
.faq { display: grid; gap: var(--e-3); }
.faq details { background: var(--surface); border: 1px solid var(--filet); border-radius: var(--radius-lg); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); min-height: var(--touch-lg); padding: var(--e-3) 1.25rem; font-weight: 600; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 0.625rem; height: 0.625rem; border-right: 2px solid var(--gris-tertiaire); border-bottom: 2px solid var(--gris-tertiaire); transform: rotate(45deg) translateY(-2px); transition: transform 0.15s; }
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.faq details p { padding: 0 1.25rem 1.25rem; color: var(--gris-texte); font-size: var(--t-md); }
@media (max-width: 1199.98px) { .faq-grille { grid-template-columns: minmax(0, 1fr); } .faq-grille .section__tete { margin-bottom: 0; } }

.final-photo { position: relative; isolation: isolate; overflow: hidden; color: #fff; }
.final-photo > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.final-photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(14 22 48 / 0.88) 0%, rgb(14 22 48 / 0.62) 55%, rgb(14 22 48 / 0.2) 100%); }
.final-photo__contenu { padding-block: clamp(3rem, 6vw, 5rem); }
.final-photo h2 { max-width: 34rem; font-size: clamp(2rem, 4.5vw, 3.25rem); }
.final-photo p { margin-top: var(--e-4); max-width: 30rem; font-size: var(--t-lg); color: #dfe4f0; }
@media (max-width: 767.98px) { .final-photo::before { background: rgb(14 22 48 / 0.72); } .final-photo .actions .bouton { flex: 1 1 100%; } }

/* --- Liseuse : toutes les pages d'un document ------------------------------------ */
.liseuse { width: 100%; max-width: min(56rem, 100vw); padding: 0; border: 0; background: transparent; }
.liseuse::backdrop { background: rgb(14 22 48 / 0.78); }
.liseuse__cadre { display: grid; grid-template-rows: auto 1fr; max-height: 92vh; overflow: hidden; border-radius: var(--radius-lg); background: var(--fond-clair); }
.liseuse__tete { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); padding: 0.875rem 1.25rem; background: var(--surface); border-bottom: 1px solid var(--filet); }
.liseuse__tete h3 { font-size: 1.125rem; }
.liseuse__tete small { display: block; color: var(--gris-tertiaire); font-weight: 400; font-size: var(--t-sm); }
.liseuse__fermer { flex: none; min-width: var(--touch); min-height: var(--touch); border: 1px solid var(--filet-fort); border-radius: var(--radius); background: var(--surface); color: var(--encre); font-size: 1.125rem; cursor: pointer; }
.liseuse__pages { display: grid; justify-items: center; gap: 1.25rem; padding: 1.25rem; overflow: auto; }
.liseuse__pages img { width: 100%; max-width: 50rem; height: auto; background: #fff; box-shadow: 0 2px 6px rgb(14 22 48 / 0.12), 0 12px 32px rgb(14 22 48 / 0.18); }

/* --- Formulaire de demande de démo (Netlify Forms) ----------------------------- */
.formulaire { width: 100%; max-width: min(34rem, 100vw); padding: 0; border: 0; background: transparent; }
.formulaire::backdrop { background: rgb(14 22 48 / 0.78); }
.formulaire__cadre { max-height: 92vh; overflow-y: auto; border-radius: var(--radius-lg); background: var(--surface); }
.formulaire__tete { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e-4); padding: 1rem 1.25rem; border-bottom: 1px solid var(--filet); }
.formulaire__tete h3 { font-size: 1.25rem; }
.formulaire__tete small { display: block; margin-top: 0.125rem; color: var(--gris-tertiaire); font-weight: 400; font-size: var(--t-sm); }
.formulaire__corps { display: grid; gap: var(--e-4); padding: 1.25rem; }
.formulaire__grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3); }
.formulaire label { display: grid; gap: 0.375rem; font-size: var(--t-sm); font-weight: 600; color: var(--gris-texte); }
.formulaire input, .formulaire textarea { width: 100%; min-height: var(--touch); padding: 0.625rem 0.875rem; border: 1px solid var(--filet-fort); border-radius: var(--radius); background: var(--surface); font: inherit; font-size: 1rem; color: var(--encre); }
.formulaire textarea { min-height: 5rem; resize: vertical; }
.formulaire input:focus, .formulaire textarea:focus { outline: 3px solid var(--action); outline-offset: 1px; border-color: var(--action); }
/* Le champ piège à robots : hors écran, jamais rempli par un humain. */
.formulaire__piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; margin: 0; }
.formulaire .note { margin-top: 0; }
.formulaire__erreur { margin: 0; color: #b42318; font-weight: 600; }
.formulaire__merci { font-size: var(--t-lg); line-height: 1.5; }
@media (max-width: 767.98px) { .formulaire__grille { grid-template-columns: minmax(0, 1fr); } }

/* --- 5b. Qui est derrière Sooluo --------------------------------------------- */
.fondateur { max-width: 46rem; margin-inline: auto; text-align: center; }
.fondateur h2 { margin-top: var(--e-3); font-size: clamp(1.75rem, 3.6vw, 2.5rem); }
.fondateur .chapeau { margin: var(--e-4) auto 0; font-size: clamp(1.0625rem, 1.6vw, 1.1875rem); }
.fondateur__signature { margin-top: var(--e-5); font-size: var(--t-sm); color: #9db0ff; font-weight: 600; }

/* --- Étiquette énergie (DPE) ----------------------------------------------------
   Couleurs de l'étiquette officielle ; texte foncé sur les classes claires
   (C, D, E) pour rester lisible. */
.dpe { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 0.375rem; font-weight: 800; font-size: 0.9375rem; color: #fff; }
.dpe--a { --dpe: #009c6d; --dpe-texte: #fff; }
.dpe--b { --dpe: #52b153; --dpe-texte: #fff; }
.dpe--c { --dpe: #a5cc74; --dpe-texte: #0e1630; }
.dpe--d { --dpe: #f4e70f; --dpe-texte: #0e1630; }
.dpe--e { --dpe: #f0b40f; --dpe-texte: #0e1630; }
.dpe--f { --dpe: #eb8235; --dpe-texte: #fff; }
.dpe--g { --dpe: #d7221f; --dpe-texte: #fff; }
.dpe.dpe--a, .dpe.dpe--b, .dpe.dpe--c, .dpe.dpe--d, .dpe.dpe--e, .dpe.dpe--f, .dpe.dpe--g { background: var(--dpe); color: var(--dpe-texte); }
.dpe-saut { display: flex; align-items: center; gap: 0.25rem; flex: none; color: var(--gris-tertiaire); }
.dpe-saut svg { width: 1rem; height: 1rem; }

/* --- Rénovation énergétique : avant / après ------------------------------------ */
.energie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-4); }
.energie__carte { margin: 0; display: flex; flex-direction: column; gap: var(--e-4); padding: var(--e-5); background: var(--surface); border: 1px solid var(--filet); border-radius: 1.25rem; }
.energie__carte figcaption { display: grid; gap: 0.125rem; }
.energie__carte figcaption b { font-size: var(--t-lg); }
.energie__carte figcaption span { font-size: var(--t-sm); color: var(--gris-tertiaire); }
.energie__carte--vert { background: var(--vert-pale); border-color: transparent; }

.echelle-dpe { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3125rem; }
.echelle-dpe li { display: flex; align-items: center; gap: var(--e-2); }
.echelle-dpe li span { display: flex; align-items: center; height: 1.625rem; padding-left: 0.625rem; border-radius: 0.25rem 0.875rem 0.875rem 0.25rem; background: var(--dpe); color: var(--dpe-texte); font-weight: 800; font-size: var(--t-sm); }
.echelle-dpe li:nth-child(1) span { width: 30%; }
.echelle-dpe li:nth-child(2) span { width: 38%; }
.echelle-dpe li:nth-child(3) span { width: 46%; }
.echelle-dpe li:nth-child(4) span { width: 54%; }
.echelle-dpe li:nth-child(5) span { width: 62%; }
.echelle-dpe li:nth-child(6) span { width: 70%; }
.echelle-dpe li:nth-child(7) span { width: 78%; }
.echelle-dpe em { font-style: normal; font-size: var(--t-xs); font-weight: 700; padding: 0.125rem 0.5rem; border-radius: 999px; }
.echelle-dpe .est-avant em { background: #fff1e6; color: #a34a0c; }
.echelle-dpe .est-apres em { background: var(--vert-pale); color: var(--vert-fonce); }
.echelle-dpe .est-avant span, .echelle-dpe .est-apres span { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--encre); }

.facture { display: grid; gap: var(--e-2); }
.facture__ligne { display: flex; justify-content: space-between; gap: var(--e-3); font-size: var(--t-sm); }
.facture__ligne b { font-size: var(--t-md); }
.facture__barre { height: 1.125rem; width: var(--part); border-radius: 0.375rem; }
.facture__barre--avant { background: #eb8235; }
.facture__barre--apres { background: var(--action); margin-bottom: var(--e-2); }
.energie__gain { margin: auto 0 0; padding-top: var(--e-3); border-top: 1px solid var(--filet); color: var(--vert-fonce); font-weight: 600; }
.energie__gain b { font-size: 1.75rem; margin-right: 0.25rem; }
.energie__chiffre { margin: 0; display: grid; gap: 0.25rem; color: var(--vert-fonce); }
.energie__chiffre b { font-size: clamp(2.5rem, 5vw, 3.5rem); line-height: 1; letter-spacing: -0.02em; }
.energie__chiffre span { font-weight: 600; }
.energie__note { margin: auto 0 0; font-size: var(--t-sm); color: var(--gris-texte); }
.energie__source { margin-top: var(--e-4); text-align: center; }
@media (max-width: 1199.98px) { .energie { grid-template-columns: minmax(0, 1fr); max-width: 32rem; margin-inline: auto; } }

/* --- Guides (référencement naturel) ------------------------------------------- */
.guide { background: var(--fond-clair); padding-block: clamp(2rem, 5vw, 3.5rem) clamp(3rem, 6vw, 5rem); }
.guide__corps { max-width: 46rem; }
.guide__corps--large { max-width: 60rem; }
.fil { margin-bottom: var(--e-4); font-size: var(--t-sm); color: var(--gris-tertiaire); }
.fil a { color: var(--gris-texte); text-decoration: none; }
.fil a:hover { color: var(--action); text-decoration: underline; }
.guide h1 { margin-top: var(--e-3); font-size: clamp(1.875rem, 4.2vw, 2.75rem); line-height: 1.1; letter-spacing: -0.03em; }
.guide .chapeau { max-width: none; margin-top: var(--e-4); }
.guide__meta { margin-top: var(--e-3); font-size: var(--t-sm); color: var(--gris-tertiaire); }
.guide__texte { margin-top: var(--e-6); padding: clamp(1.25rem, 3vw, 2.25rem); background: var(--surface); border: 1px solid var(--filet); border-radius: 1.25rem; font-size: 1.0625rem; line-height: 1.6; }
.guide__texte h2 { margin-top: var(--e-6); font-size: clamp(1.25rem, 2.6vw, 1.5rem); line-height: 1.25; }
.guide__texte h2:first-child { margin-top: 0; }
.guide__texte p, .guide__texte ul, .guide__texte ol, .guide__texte table { margin-top: var(--e-3); }
.guide__texte ul, .guide__texte ol { padding-left: 1.25rem; }
.guide__texte li + li { margin-top: 0.375rem; }
.guide__texte table { width: 100%; border-collapse: collapse; font-size: var(--t-md); }
.guide__texte caption { caption-side: top; padding-bottom: 0.5rem; text-align: left; font-size: var(--t-sm); color: var(--gris-tertiaire); }
.guide__texte th, .guide__texte td { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--filet); text-align: left; vertical-align: top; }
.guide__texte th { font-size: var(--t-sm); font-weight: 600; color: var(--gris-tertiaire); }
.guide__texte td:last-child, .guide__texte th:last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.guide__cta { margin-top: var(--e-5); padding: clamp(1.25rem, 3vw, 2rem); border-radius: 1.25rem; background: var(--encre); color: #fff; }
.guide__cta h2 { font-size: clamp(1.25rem, 2.6vw, 1.5rem); }
.guide__cta p { margin-top: var(--e-3); color: #dfe4f0; }
.guide__cta .actions { margin-top: var(--e-4); }
.guide__cta .bouton--contour { background: transparent; color: #fff; border-color: rgb(255 255 255 / 0.4); }
.guide__cta .bouton--contour:hover { background: rgb(255 255 255 / 0.12); color: #fff; }
.guide__suite { margin-top: var(--e-6); }
.guide__suite h2 { font-size: var(--t-lg); }
.guide__suite ul { margin-top: var(--e-3); padding-left: 1.25rem; display: grid; gap: 0.5rem; }
.guides-liste { list-style: none; margin: var(--e-6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4); }
.guides-liste__carte a { display: flex; flex-direction: column; gap: var(--e-3); height: 100%; padding: var(--e-5); background: var(--surface); border: 1px solid var(--filet); border-radius: 1.25rem; color: var(--encre); text-decoration: none; }
.guides-liste__carte a:hover { border-color: var(--action); color: var(--encre); }
.guides-liste__carte h2 { font-size: var(--t-lg); line-height: 1.25; }
.guides-liste__carte p { font-size: var(--t-md); line-height: 1.5; color: var(--gris-texte); }
.guides-liste__meta { margin-top: auto; font-family: var(--font-mono); font-size: var(--t-xs); color: var(--action); }
@media (max-width: 767.98px) {
  .guides-liste { grid-template-columns: minmax(0, 1fr); }
  .guide__texte td:last-child, .guide__texte th:last-child { white-space: normal; }
}


/* --- Ajouts du 09/11/2026 : WhatsApp, offre de lancement, pages cibles ------ */
/* WhatsApp dans l'en-tête : texte et icône sur bureau, icône seule sur mobile. */
.entete__whatsapp {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: var(--touch);
  padding: 0 0.875rem;
  border: 1px solid var(--filet-fort);
  border-radius: var(--radius);
  background: var(--surface);
  color: #128c4b;
  font-size: var(--t-md);
  font-weight: 600;
  text-decoration: none;
  flex: none;
}
.entete__whatsapp:hover { background: var(--vert-pale); color: var(--vert-fonce); }
.entete__whatsapp svg { width: 1.375rem; height: 1.375rem; }
.entete__whatsapp[hidden] { display: none; }
@media (max-width: 1199.98px) {
  .entete__whatsapp { order: 1; margin-left: auto; }
  .menu { order: 2; margin-left: 0; }
}
@media (max-width: 767.98px) {
  .entete__whatsapp { width: var(--touch); padding: 0; justify-content: center; }
  .entete__whatsapp span { display: none; }
}
[data-whatsapp][hidden] { display: none !important; }

/* Offre de lancement, au-dessus des formules normales. */
.lancement {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--e-5) var(--e-6);
  align-items: center;
  margin: 0 auto var(--e-6);
  max-width: 60rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--surface);
  border: 2px solid var(--action);
  border-radius: var(--radius-lg);
  box-shadow: var(--ombre-portee);
}
.lancement__texte p { margin-top: var(--e-2); color: var(--gris-texte); }
.lancement__prix { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--e-1) var(--e-3); margin-top: var(--e-3) !important; }
.lancement__prix b { font-size: clamp(2.5rem, 5vw, 3.25rem); line-height: 1; letter-spacing: -0.03em; color: var(--encre); }
.lancement__prix span { color: var(--encre); font-weight: 600; }
.lancement__prix s { color: var(--gris-tertiaire); font-size: var(--t-md); }
.lancement__suite { font-size: var(--t-sm); }
.lancement__actions { display: grid; gap: var(--e-3); }
.lancement__actions .bouton { width: 100%; white-space: normal; text-align: center; }
.tarifs__normal { margin: 0 0 var(--e-4); text-align: center; color: var(--gris-tertiaire); font-size: var(--t-sm); font-weight: 600; }
@media (max-width: 767.98px) { .lancement { grid-template-columns: minmax(0, 1fr); } }

/* Pages cibles (courtiers, équipes) : une colonne, des cartes simples. */
.cible-une { padding-block: clamp(2.5rem, 6vw, 4.5rem); background: linear-gradient(180deg, var(--action-pale), var(--surface)); }
.cible-une h1 { max-width: 46rem; margin-top: var(--e-4); font-size: clamp(2.125rem, 5.5vw, 3.5rem); line-height: 1.08; letter-spacing: -0.03em; color: var(--encre); }
.cible-une h1 em { font-style: normal; color: var(--action); }
.cible-une__chapeau { max-width: 40rem; margin-top: var(--e-4); font-size: var(--t-lg); line-height: 1.5; }
.cible-une .note { margin-top: var(--e-4); }
.cible-cartes { list-style: none; margin: var(--e-6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-4); }
.cible-carte { padding: 1.5rem; background: var(--surface); border: 1px solid var(--filet); border-radius: var(--radius-lg); }
.cible-carte__num { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--action); color: #fff; font-weight: 700; }
.cible-carte h3 { margin-top: var(--e-3); font-size: var(--t-lg); color: var(--encre); }
.cible-carte p { margin-top: var(--e-1); }
.cible-liste { list-style: none; margin: var(--e-5) 0 0; padding: 0; display: grid; gap: var(--e-3); max-width: 46rem; }
.cible-liste li { display: flex; gap: var(--e-3); align-items: flex-start; }
.cible-liste li::before { content: "✓"; flex: none; color: var(--vert); font-weight: 700; }
.cible-encadre { margin-top: var(--e-6); max-width: 46rem; padding: 1.25rem 1.5rem; background: var(--action-pale); border-left: 4px solid var(--action); border-radius: var(--radius); color: var(--encre); }
@media (max-width: 1199.98px) { .cible-cartes { grid-template-columns: minmax(0, 1fr); max-width: 40rem; } }
@media (max-width: 767.98px) {
  .cible-une .actions .bouton, .cible-encadre + .actions .bouton { flex: 1 1 100%; white-space: normal; text-align: center; }
}
.cible-une__chapeau + .lancement { margin-top: var(--e-6); margin-left: 0; }

/* Prise de rendez-vous dans la boîte de démo (09/11/2026). */
.formulaire__agenda { display: grid; gap: var(--e-2); padding: 1.25rem 1.25rem 0; }
.formulaire__agenda[hidden] { display: none; }
.formulaire__agenda .bouton { width: 100%; white-space: normal; text-align: center; }
.formulaire__agenda .note { margin-top: 0; }