/* ===========================================================================
   Site vitrine sooluo.fr
   Même identité que l'application (public/assets/css/app.css) : l'encre, une
   seule couleur d'action, Space Grotesk pour les titres, Inter pour le texte,
   IBM Plex Mono pour tout ce qui se compare. Aucune ressource externe.
   =========================================================================== */

@font-face {
  font-family: "Inter var";
  src: url("fonts/inter-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/space-grotesk-variable.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibm-plex-mono-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

:root {
  --encre: #0b1422;
  --nuit: #10214d;
  --fond: #f1f2f4;
  --surface: #ffffff;
  --voile: #f9fafb;
  --action: #1b4de4;
  --action-fonce: #1339b0;
  --action-pale: #eaefff;
  --vert: #0f9d63;
  --vert-fonce: #0b7d4e;
  --vert-pale: #e4f5ed;
  --sable: #9c5d05;
  --sable-pale: #fff0da;
  --info: #1d6e85;
  --info-pale: #e2f1f6;
  --gris: #55606a;
  --gris-faible: #7c8791;
  --filet: #e1e4e7;
  --filet-fort: #cbd2d9;

  --font-titre: "Space Grotesk", system-ui, sans-serif;
  --font-sans: "Inter var", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Mono", monospace;

  --largeur: 72rem;
  --gouttiere: clamp(1rem, 4vw, 2.5rem);
  --radius: 6px;
  --radius-lg: 10px;
  --ombre: 0 1px 2px rgb(11 20 34 / 0.05), 0 1px 3px rgb(11 20 34 / 0.07);
  --ombre-portee: 0 4px 6px rgb(11 20 34 / 0.05), 0 16px 40px rgb(11 20 34 / 0.12);
  --touch: 3rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@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: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }
a { color: var(--action); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--action); outline-offset: 2px; }

h1, h2, h3, h4 {
  font-family: var(--font-titre);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
}
h2 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); }
h3 { font-size: 1.25rem; }
p { margin: 0; }

.conteneur {
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.mono {
  font-family: var(--font-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.surtitre {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--action);
  margin-bottom: 0.875rem;
}

.chapeau {
  color: var(--gris);
  font-size: 1.125rem;
  max-width: 44rem;
  margin-top: 1rem;
}

/* --- Boutons ------------------------------------------------------------- */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--touch);
  padding: 0.75rem 1.375rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font: 600 1rem/1.2 var(--font-sans);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.bouton--action { background: var(--action); color: #fff; }
.bouton--action:hover { background: var(--action-fonce); }
.bouton--action:active { transform: translateY(1px); }
.bouton--blanc { background: #fff; color: var(--encre); }
.bouton--blanc:hover { background: #eef2ff; }
.bouton--contour { background: transparent; color: var(--encre); border-color: var(--filet-fort); }
.bouton--contour:hover { border-color: var(--encre); }
.bouton--clair { background: rgb(255 255 255 / 0.12); color: #fff; border-color: rgb(255 255 255 / 0.25); }
.bouton--clair:hover { background: rgb(255 255 255 / 0.2); }
.bouton--grand { min-height: 3.5rem; padding-inline: 1.75rem; font-size: 1.0625rem; }

/* --- En-tête --------------------------------------------------------------- */

.entete {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 20;
  background: linear-gradient(112deg, var(--encre) 0%, var(--nuit) 100%);
  color: #fff;
}
.entete::after {
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(90deg, #1b4de4, #6ea0ff 55%, #1b4de4);
}
.entete__barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4rem;
}
.marque {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: #fff;
  text-decoration: none;
  font-family: var(--font-titre);
  font-weight: 600;
  font-size: 1.375rem;
  letter-spacing: -0.02em;
}
.marque__pave {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.6rem;
  background: #fff;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.marque__pave svg { width: 1.5rem; height: 1.5rem; }

.nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.nav a {
  color: rgb(255 255 255 / 0.85);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9375rem;
  padding: 0.75rem 0.875rem;
  border-radius: var(--radius);
  min-height: var(--touch);
  display: inline-flex;
  align-items: center;
}
.nav a:hover { color: #fff; background: rgb(255 255 255 / 0.08); }
.nav .bouton { margin-left: 0.5rem; }

.menu {
  display: none;
  width: var(--touch);
  height: var(--touch);
  border: 1px solid rgb(255 255 255 / 0.25);
  background: transparent;
  color: #fff;
  border-radius: var(--radius);
  font-size: 1.375rem;
  cursor: pointer;
}

@media (max-width: 860px) {
  .menu { display: grid; place-items: center; }
  .nav {
    display: none;
    position: absolute;
    left: 0; right: 0; top: 100%;
    flex-direction: column;
    align-items: stretch;
    background: var(--nuit);
    padding: 0.75rem var(--gouttiere) 1.25rem;
    border-bottom: 1px solid rgb(255 255 255 / 0.15);
  }
  .nav.est-ouvert { display: flex; }
  .nav .bouton { margin: 0.5rem 0 0; }
}

/* --- Héros ---------------------------------------------------------------- */

.heros {
  background:
    radial-gradient(60rem 30rem at 85% -10%, rgb(27 77 228 / 0.10), transparent 60%),
    var(--fond);
  border-bottom: 1px solid var(--filet);
}
.heros__grille {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding-block: clamp(3rem, 7vw, 6rem) clamp(2.5rem, 6vw, 5rem);
}
.heros h1 {
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  letter-spacing: -0.03em;
}
.heros h1 em { font-style: normal; color: var(--action); }
.heros__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}
.heros__preuves {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
  color: var(--gris);
  font-size: 0.9375rem;
}
.heros__preuves li { display: inline-flex; align-items: center; gap: 0.5rem; }
.heros__preuves li::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--vert);
}

/* En une colonne, `minmax(0, 1fr)` et non `1fr` : la piste des étapes de la
   maquette ne se coupe pas, et son min-content élargirait la page au-delà de
   l'écran. Avec 0 en minimum, la tablette prend la largeur disponible et
   l'écran clippe. */
@media (max-width: 960px) {
  .heros__grille { grid-template-columns: minmax(0, 1fr); }
}
.tablette { min-width: 0; }

/* --- Tablette / maquettes ------------------------------------------------- */

.tablette {
  background: #111827;
  border-radius: 1.5rem;
  padding: 0.75rem;
  box-shadow: var(--ombre-portee);
  max-width: 100%;
}
.ecran {
  background: var(--fond);
  border-radius: 1rem;
  overflow: hidden;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--encre);
  min-height: 24rem;
}
.m-barre {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  background: linear-gradient(112deg, var(--encre), var(--nuit));
  color: #fff;
  font-weight: 600;
}
.m-barre::after { content: ""; }
.m-barre__pave {
  width: 1.375rem; height: 1.375rem;
  border-radius: 0.375rem;
  background: #fff;
  display: grid; place-items: center;
}
.m-barre__pave svg { width: 0.9rem; height: 0.9rem; }
.m-barre__tenant { font-size: 0.8125rem; }
.m-barre__role {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.6);
  margin-left: 0.25rem;
}
.m-barre__client {
  margin-left: auto;
  font-size: 0.6875rem;
  font-weight: 500;
  padding: 0.25rem 0.5rem;
  border: 1px solid rgb(255 255 255 / 0.3);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.08);
}
.m-parcours {
  display: flex;
  gap: 0.25rem;
  padding: 0.5rem 0.875rem 0;
  overflow: hidden;
  white-space: nowrap;
}
.m-parcours span {
  font-size: 0.625rem;
  font-weight: 600;
  padding: 0.125rem 0.4rem;
  border-radius: 999px;
  border: 1px solid var(--filet-fort);
  color: var(--gris);
  background: var(--surface);
}
.m-parcours .fait { color: var(--vert-fonce); border-color: var(--vert-fonce); background: var(--vert-pale); }
.m-parcours .courant { color: #fff; background: var(--action); border-color: var(--action); }
.m-corps { padding: 0.75rem 0.875rem 0.875rem; display: grid; gap: 0.625rem; }
.m-titre {
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
}
.m-sous { color: var(--gris); font-size: 0.75rem; }
.m-carte {
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: var(--radius);
  padding: 0.625rem 0.75rem;
}
.m-carte h4 {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gris);
  margin: 0 0 0.375rem;
}
.m-ligne {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.25rem 0;
  border-top: 1px solid var(--filet);
}
.m-ligne:first-of-type { border-top: 0; }
.m-ligne b { font-weight: 600; }
.m-ligne .mono { font-weight: 500; }
.m-ligne--total { font-weight: 700; }
.m-ligne--aide .mono { color: var(--vert-fonce); }
.m-kpi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.m-kpi div { background: var(--surface); border: 1px solid var(--filet); border-radius: var(--radius); padding: 0.5rem 0.625rem; }
.m-kpi b { display: block; font-family: var(--font-mono); font-weight: 600; font-size: 1rem; letter-spacing: -0.01em; }
.m-kpi span { font-size: 0.6875rem; color: var(--gris); }
.m-etiquette {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  background: var(--vert-pale);
  color: var(--vert-fonce);
}
.m-etiquette--info { background: var(--info-pale); color: var(--info); }
.m-etiquette--sable { background: var(--sable-pale); color: var(--sable); }
.m-etiquette--action { background: var(--action-pale); color: var(--action-fonce); }
.m-notice {
  font-size: 0.6875rem;
  padding: 0.5rem 0.625rem;
  border-radius: var(--radius);
  background: var(--info-pale);
  color: var(--info);
  border-left: 3px solid var(--info);
}
.m-reste {
  background: var(--encre);
  color: #fff;
  border-radius: var(--radius);
  padding: 0.625rem 0.75rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.m-reste b { font-family: var(--font-mono); font-size: 1.25rem; font-weight: 600; }
.m-bouton {
  display: block;
  text-align: center;
  background: var(--action);
  color: #fff;
  font-weight: 600;
  padding: 0.625rem;
  border-radius: var(--radius);
}
.m-jauge { height: 8px; background: var(--filet); border-radius: 999px; overflow: hidden; display: flex; }
.m-jauge i { display: block; height: 100%; }
.m-legende { display: flex; gap: 0.75rem; font-size: 0.6875rem; color: var(--gris); flex-wrap: wrap; }
.m-legende i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 0.25rem; }
.m-machine { display: grid; grid-template-columns: 1fr auto; gap: 0.25rem 0.75rem; align-items: center; padding: 0.4rem 0; border-top: 1px solid var(--filet); }
.m-machine:first-of-type { border-top: 0; }
.m-machine small { color: var(--gris); font-size: 0.6875rem; }
.m-machine .mono { font-weight: 600; }
.m-doc {
  background: #fff;
  border: 1px solid var(--filet);
  padding: 0.75rem 0.875rem;
  font-size: 0.6875rem;
  box-shadow: var(--ombre);
}
.m-doc__tete { display: flex; justify-content: space-between; border-bottom: 2px solid var(--encre); padding-bottom: 0.375rem; margin-bottom: 0.5rem; }
.m-doc__tete b { font-family: var(--font-titre); font-size: 0.875rem; }
.m-doc__mention { color: var(--gris); font-style: italic; margin-top: 0.5rem; }
.m-champ { display: grid; grid-template-columns: 1fr 1fr; gap: 0.375rem 0.75rem; }
.m-champ label { font-size: 0.625rem; color: var(--gris); display: block; }
.m-champ span { display: block; border: 1px solid var(--filet-fort); border-radius: 4px; padding: 0.3rem 0.45rem; background: #fff; font-weight: 500; }
.m-sauve { font-size: 0.625rem; color: var(--vert-fonce); text-align: right; }

/* --- Sections -------------------------------------------------------------- */

.section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.section--fond { background: var(--fond); border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet); }
.section--sombre { background: linear-gradient(112deg, var(--encre), var(--nuit)); color: #fff; }
.section--sombre .surtitre { color: #8fb0ff; }
.section--sombre .chapeau { color: rgb(255 255 255 / 0.75); }
.section__tete { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3rem); }

.grille-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.grille-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.grille-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
@media (max-width: 960px) {
  .grille-3, .grille-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .grille-2, .grille-3, .grille-4 { grid-template-columns: 1fr; }
}

/* --- Arguments ------------------------------------------------------------- */

.argument {
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.argument__chiffre {
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: 2.75rem;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--action);
}
.argument__chiffre small { font-size: 1rem; letter-spacing: 0; color: var(--gris); font-weight: 500; margin-left: 0.25rem; }
.argument p { color: var(--gris); font-size: 1rem; }

/* --- Parcours -------------------------------------------------------------- */

.etapes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 0.5rem;
  counter-reset: etape;
}
.etapes li {
  counter-increment: etape;
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: var(--radius);
  padding: 0.875rem 0.75rem;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  position: relative;
}
.etapes li::before {
  content: counter(etape, decimal-leading-zero);
  display: block;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.6875rem;
  color: var(--action);
  letter-spacing: 0.08em;
  margin-bottom: 0.375rem;
}
.etapes li small { display: block; font-weight: 400; color: var(--gris); font-size: 0.8125rem; margin-top: 0.25rem; }
@media (max-width: 1100px) { .etapes { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .etapes { grid-template-columns: repeat(2, 1fr); } }

/* --- Aperçu ---------------------------------------------------------------- */

.apercu {
  display: grid;
  grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}
.onglets {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin: 0;
  padding: 0;
}
.onglets button {
  text-align: left;
  min-height: var(--touch);
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--filet);
  background: var(--surface);
  color: var(--encre);
  font: 600 0.9375rem/1.3 var(--font-sans);
  cursor: pointer;
}
.onglets button small { display: block; font-weight: 400; color: var(--gris); font-size: 0.8125rem; margin-top: 0.125rem; }
.onglets button[aria-selected="true"] {
  border-color: var(--action);
  background: var(--action-pale);
  box-shadow: inset 3px 0 0 var(--action);
}
.apercu .tablette { justify-self: center; width: 100%; max-width: 40rem; }
@media (max-width: 860px) {
  .apercu { grid-template-columns: minmax(0, 1fr); }
  .onglets { flex-direction: row; overflow-x: auto; padding-bottom: 0.25rem; }
  .onglets button { flex: 0 0 auto; }
  .onglets button small { display: none; }
}

/* --- Fonctionnalités ------------------------------------------------------- */

.fonction {
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: var(--radius-lg);
  padding: 1.375rem 1.375rem 1.5rem;
}
.fonction__icone {
  width: 2.5rem; height: 2.5rem;
  border-radius: 0.625rem;
  background: var(--action-pale);
  color: var(--action);
  display: grid;
  place-items: center;
  margin-bottom: 0.875rem;
}
.fonction__icone svg { width: 1.375rem; height: 1.375rem; }
.fonction h3 { font-size: 1.125rem; margin-bottom: 0.375rem; }
.fonction p { color: var(--gris); font-size: 0.9375rem; }

/* --- Pilotage -------------------------------------------------------------- */

.pilotage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.pilotage ul { margin: 1.5rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.875rem; }
.pilotage li { display: grid; grid-template-columns: 1.5rem 1fr; gap: 0.75rem; align-items: start; }
.pilotage li b { display: block; }
.pilotage li span { color: rgb(255 255 255 / 0.75); font-size: 0.9375rem; }
.coche { width: 1.5rem; height: 1.5rem; border-radius: 50%; background: rgb(255 255 255 / 0.12); color: #8fb0ff; display: grid; place-items: center; margin-top: 0.125rem; }
.coche svg { width: 0.875rem; height: 0.875rem; }
.pilotage .tablette { background: #050a14; }
.m-classement { display: grid; gap: 0.5rem; }
.m-personne { display: grid; grid-template-columns: 7rem 1fr auto; gap: 0.75rem; align-items: center; font-size: 0.75rem; }
.m-personne .m-jauge { height: 10px; }
.m-personne .mono { font-weight: 600; }
@media (max-width: 960px) { .pilotage { grid-template-columns: minmax(0, 1fr); } }

/* --- Marques --------------------------------------------------------------- */

.logos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.75rem;
}
.logos li {
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: var(--radius);
  min-height: 5.5rem;
  display: grid;
  place-items: center;
  padding: 1rem 1.25rem;
}
.logos img { max-height: 2.5rem; width: auto; max-width: 100%; object-fit: contain; }
@media (max-width: 960px) { .logos { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 560px) { .logos { grid-template-columns: repeat(3, 1fr); } .logos li { min-height: 4.5rem; padding: 0.75rem; } }
.marques-note { margin-top: 1.25rem; color: var(--gris); font-size: 0.9375rem; }

/* --- Tarifs ---------------------------------------------------------------- */

.offres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; align-items: stretch; }
.offre {
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
}
.offre--mise-en-avant { border-color: var(--action); box-shadow: 0 0 0 3px var(--action-pale), var(--ombre-portee); }
.offre__badge {
  position: absolute;
  top: -0.8rem; left: 1.5rem;
  background: var(--action);
  color: #fff;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3rem 0.625rem;
  border-radius: 999px;
}
.offre h3 { font-size: 1.25rem; }
.offre__prix { display: flex; align-items: baseline; gap: 0.375rem; font-family: var(--font-titre); }
.offre__prix b { font-size: 3rem; font-weight: 700; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.offre__prix span { color: var(--gris); font-size: 1rem; }
.offre__detail { color: var(--gris); font-size: 0.9375rem; min-height: 3.2em; }
.offre__economie { display: inline-block; align-self: flex-start; font-size: 0.8125rem; font-weight: 600; color: var(--vert-fonce); background: var(--vert-pale); padding: 0.25rem 0.625rem; border-radius: 999px; }
.offre ul { margin: 0.5rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; font-size: 0.9375rem; }
.offre li { display: grid; grid-template-columns: 1.125rem 1fr; gap: 0.5rem; align-items: start; }
.offre li svg { width: 1.125rem; height: 1.125rem; color: var(--vert-fonce); margin-top: 0.2rem; }
.offre .bouton { margin-top: auto; }
.tarifs-note { margin-top: 1.5rem; color: var(--gris); font-size: 0.9375rem; max-width: 46rem; }
@media (max-width: 960px) { .offres { grid-template-columns: 1fr; max-width: 28rem; margin-inline: auto; } }

.inclus { margin-top: 2.5rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem 1.5rem; padding: 0; list-style: none; font-size: 0.9375rem; }
.inclus li { display: grid; grid-template-columns: 1.125rem 1fr; gap: 0.5rem; align-items: start; }
.inclus svg { width: 1.125rem; height: 1.125rem; color: var(--vert-fonce); margin-top: 0.2rem; }
@media (max-width: 960px) { .inclus { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .inclus { grid-template-columns: 1fr; } }

/* --- FAQ ------------------------------------------------------------------- */

.faq { max-width: 46rem; display: grid; gap: 0.625rem; }
.faq details { background: var(--surface); border: 1px solid var(--filet); border-radius: var(--radius); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1rem 1.25rem;
  font-weight: 600;
  min-height: var(--touch);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-mono); color: var(--action); font-size: 1.25rem; }
.faq details[open] summary::after { content: "−"; }
.faq details > p { padding: 0 1.25rem 1.125rem; color: var(--gris); }

/* --- Appel final ------------------------------------------------------------ */

.final { text-align: center; }
.final h2 { font-size: clamp(2rem, 4vw, 3rem); }
.final .chapeau { margin-inline: auto; }
.final .heros__actions { justify-content: center; }

/* --- Pied ------------------------------------------------------------------ */

.pied { border-top: 1px solid var(--filet); padding-block: 2rem; color: var(--gris); font-size: 0.875rem; }
.pied__grille { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; align-items: center; }
.pied nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
.pied a { color: var(--gris); }
.pied .marque { color: var(--encre); font-size: 1.125rem; }
.pied .marque__pave { background: var(--encre); }
.pied .marque__pave svg path { stroke: #fff; }

/* --- Vrais écrans : cadres d'appareils et iframes mises à l'échelle ------- */

/* Chaque cadre affiche une page autonome de site/apercu/, rendue avec la
   feuille de style de l'application. L'iframe a la largeur réelle de
   l'appareil (820 px tablette, 390 px téléphone, 1280 px ordinateur) et se
   réduit par transform pour tenir dans le cadre : le rendu est celui de
   l'appareil, pas une version étirée. */
.appareil {
  position: relative;
  background: #111827;
  box-shadow: var(--ombre-portee);
  overflow: hidden;
  min-width: 0;
}
.appareil--tablette { border-radius: 1.5rem; padding: 0.75rem; }
.appareil--telephone { border-radius: 2rem; padding: 0.5rem; background: #0b1422; }
.appareil--ordinateur { border-radius: 0.75rem 0.75rem 0 0; padding: 0.5rem 0.5rem 0; }
.appareil__ecran {
  position: relative;
  overflow: hidden;
  background: var(--fond);
  border-radius: 1rem;
  width: 100%;
  aspect-ratio: var(--ratio, 820 / 1100);
}
.appareil--telephone .appareil__ecran { border-radius: 1.5rem; --ratio: 390 / 780; }
.appareil--ordinateur .appareil__ecran { border-radius: 0.4rem 0.4rem 0 0; --ratio: 1280 / 800; }
.appareil__ecran iframe {
  position: absolute;
  top: 0; left: 0;
  border: 0;
  width: var(--ecran-largeur, 820px);
  height: var(--ecran-hauteur, 1100px);
  transform: scale(var(--echelle, 1));
  transform-origin: 0 0;
  background: var(--fond);
  pointer-events: none;
}
.appareil--telephone .appareil__ecran iframe { --ecran-largeur: 390px; --ecran-hauteur: 780px; }
.appareil--ordinateur .appareil__ecran iframe { --ecran-largeur: 1280px; --ecran-hauteur: 800px; }
.appareil--telephone::after {
  content: "";
  position: absolute;
  top: 0.9rem; left: 50%;
  width: 5rem; height: 0.35rem;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.12);
}
.appareil__socle {
  height: 0.75rem;
  background: #d5d9df;
  border-radius: 0 0 0.75rem 0.75rem;
  margin: 0 -0.5rem;
}

/* (Le héros ne pose plus de tablette ni de téléphone : voir `.resultat`.) */

/* Les trois appareils, côte à côte. */
.trio {
  display: grid;
  grid-template-columns: 2.2fr 1.3fr 0.7fr;
  gap: 1.5rem;
  align-items: end;
}
.trio figure { margin: 0; min-width: 0; }
.trio figcaption {
  margin-top: 0.875rem;
  font-weight: 600;
  font-size: 0.9375rem;
}
.trio figcaption small { display: block; font-weight: 400; color: var(--gris); }
@media (max-width: 860px) {
  .trio { grid-template-columns: 1fr 1fr; }
  .trio figure:first-child { grid-column: 1 / -1; }
}
@media (max-width: 520px) { .trio { grid-template-columns: 1fr; } }

/* L'aperçu : onglets + bascule tablette / téléphone. */
.apercu__tete { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.bascule { display: inline-flex; border: 1px solid var(--filet-fort); border-radius: 999px; padding: 0.2rem; background: var(--surface); }
.bascule button {
  min-height: 2.5rem;
  padding: 0.4rem 1rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font: 600 0.875rem/1 var(--font-sans);
  color: var(--gris);
  cursor: pointer;
}
.bascule button[aria-pressed="true"] { background: var(--encre); color: #fff; }
.apercu__scene { display: grid; place-items: start center; }
.apercu__scene .appareil--tablette { width: min(100%, 44rem); }
.apercu__scene .appareil--telephone { width: min(100%, 22rem); }
.apercu__scene [hidden] { display: none !important; }
.apercu__legende { margin-top: 1rem; color: var(--gris); font-size: 0.9375rem; max-width: 44rem; text-align: center; }

/* --- Fonctionnalités, version courte et colorée -------------------------- */

.tuiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.tuile {
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.25rem 1.375rem;
  background: var(--surface);
  border: 1px solid var(--filet);
  display: grid;
  gap: 0.625rem;
  align-content: start;
}
.tuile__icone {
  width: 2.75rem; height: 2.75rem;
  border-radius: 0.75rem;
  display: grid; place-items: center;
  background: var(--teinte-pale, var(--action-pale));
  color: var(--teinte, var(--action));
}
.tuile__icone svg { width: 1.5rem; height: 1.5rem; }
.tuile h3 { font-size: 1.0625rem; }
.tuile p { color: var(--gris); font-size: 0.9375rem; line-height: 1.45; }
.tuile--bleu   { --teinte: #1b4de4; --teinte-pale: #eaefff; }
.tuile--vert   { --teinte: #0b7d4e; --teinte-pale: #e4f5ed; }
.tuile--sable  { --teinte: #9c5d05; --teinte-pale: #fff0da; }
.tuile--info   { --teinte: #1d6e85; --teinte-pale: #e2f1f6; }
.tuile--violet { --teinte: #4d3f85; --teinte-pale: #eeebf5; }
.tuile--rose   { --teinte: #c25a8a; --teinte-pale: #fbe9f1; }
.tuile--orange { --teinte: #d98a2b; --teinte-pale: #fdf0e0; }
.tuile--encre  { --teinte: #0b1422; --teinte-pale: #e9ebef; }
@media (max-width: 960px) { .tuiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .tuiles { grid-template-columns: 1fr; } }

/* Trois vignettes illustrées au-dessus des tuiles. */
.vignettes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-bottom: 1.5rem; }
.vignette {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--filet);
  background: var(--surface);
  display: grid;
  grid-template-rows: auto 1fr;
}
.vignette__visuel { background: var(--teinte-pale, var(--fond)); padding: 1.25rem 1.25rem 0; display: grid; place-items: end center; min-height: 11rem; }
.vignette__visuel svg { width: 100%; max-width: 20rem; height: auto; display: block; }
.vignette__texte { padding: 1rem 1.25rem 1.25rem; }
.vignette__texte h3 { font-size: 1.0625rem; margin-bottom: 0.25rem; }
.vignette__texte p { color: var(--gris); font-size: 0.9375rem; }
.vignette--ciel { --teinte-pale: #e2f1f6; }
.vignette--herbe { --teinte-pale: #e4f5ed; }
.vignette--sable { --teinte-pale: #fff0da; }
@media (max-width: 860px) { .vignettes { grid-template-columns: 1fr; } }

/* L'échelle DPE dessinée. */
.dpe { display: grid; gap: 3px; width: 100%; max-width: 14rem; }
.dpe span {
  display: flex; align-items: center;
  height: 1.35rem;
  padding-left: 0.5rem;
  color: #fff;
  font: 700 0.8125rem/1 var(--font-titre);
  border-radius: 0 4px 4px 0;
}
.dpe .a { width: 40%; background: #2f9e44; }
.dpe .b { width: 50%; background: #66a80f; }
.dpe .c { width: 60%; background: #c9a800; }
.dpe .d { width: 70%; background: #f08c00; }
.dpe .e { width: 80%; background: #e8590c; }
.dpe .f { width: 90%; background: #d9480f; outline: 3px solid var(--encre); outline-offset: 2px; }
.dpe .g { width: 100%; background: #c92a2a; }

/* Pourquoi : un liseré de couleur par carte. */
.argument--bleu { border-top: 4px solid #1b4de4; }
.argument--vert { border-top: 4px solid #0f9d63; }
.argument--sable { border-top: 4px solid #d98a2b; }
.argument--vert .argument__chiffre { color: var(--vert-fonce); }
.argument--sable .argument__chiffre { color: #b8721f; }

/* --- Les prix, lisibles de loin ------------------------------------------- */

.offre__prix { display: grid; grid-template-columns: auto 1fr; column-gap: 0.625rem; align-items: baseline; }
.offre__prix b { font-size: 4.5rem; font-weight: 700; letter-spacing: -0.05em; line-height: 0.95; font-variant-numeric: tabular-nums; }
.offre__prix span { font-size: 1rem; color: var(--gris); line-height: 1.25; }
.offre__prix span strong { display: block; color: var(--encre); font-size: 1.125rem; }
.offre--mise-en-avant .offre__prix b { color: var(--action); }
.offre__gratuit {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-weight: 600; font-size: 0.9375rem;
  color: var(--vert-fonce); background: var(--vert-pale);
  padding: 0.4rem 0.75rem; border-radius: 999px;
  align-self: flex-start;
}

/* Le prix se dit dès le héros. */
.heros__prix {
  display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem;
  margin-top: 1.75rem;
  padding: 0.875rem 1.25rem;
  border: 1px solid var(--filet);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--ombre);
}
.heros__prix b { font-family: var(--font-titre); font-size: 2.5rem; font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.heros__prix span { color: var(--gris); font-size: 0.9375rem; }
.heros__prix em { font-style: normal; font-weight: 600; color: var(--vert-fonce); }

/* Onglets de l'aperçu en ligne, au-dessus de la scène. */
.onglets--ligne { flex-direction: row; flex-wrap: wrap; gap: 0.375rem; }
.onglets--ligne button { padding: 0.625rem 0.875rem; }
.onglets--ligne button small { display: none; }
@media (max-width: 860px) {
  .onglets--ligne { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; }
}
.apercu__tete .bascule { flex-shrink: 0; }

/* --- Pourquoi : trois cartes illustrées, une phrase chacune -------------- */

.raisons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.raison {
  border-radius: var(--radius-lg);
  border: 1px solid var(--filet);
  background: var(--surface);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
}
.raison__visuel { background: var(--teinte-pale); padding: 1.5rem 1.5rem 0; display: grid; place-items: end center; min-height: 12rem; }
.raison__visuel svg { width: 100%; max-width: 18rem; height: auto; display: block; }
.raison__texte { padding: 1.125rem 1.375rem 1.375rem; }
.raison__chiffre { font-family: var(--font-titre); font-weight: 700; font-size: 2rem; letter-spacing: -0.04em; line-height: 1; color: var(--teinte); margin-bottom: 0.375rem; }
.raison__chiffre small { font-size: 0.9375rem; letter-spacing: 0; color: var(--gris); font-weight: 500; margin-left: 0.375rem; }
.raison h3 { font-size: 1.125rem; margin-bottom: 0.25rem; }
.raison p { color: var(--gris); font-size: 0.9375rem; }
.raison--bleu { --teinte: #1b4de4; --teinte-pale: #eaefff; }
.raison--vert { --teinte: #0b7d4e; --teinte-pale: #e4f5ed; }
.raison--sable { --teinte: #b8721f; --teinte-pale: #fff0da; }
@media (max-width: 860px) { .raisons { grid-template-columns: 1fr; } }

/* --- Le parcours à suivre : étapes numérotées, précédent / suivant -------- */

.parcours-demo__etapes {
  list-style: none; margin: 0 0 1rem; padding: 0;
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 0.375rem;
  counter-reset: demo;
}
.parcours-demo__etapes button {
  counter-increment: demo;
  width: 100%; min-height: var(--touch);
  padding: 0.5rem 0.5rem 0.625rem;
  border: 1px solid var(--filet); border-radius: var(--radius);
  background: var(--surface); color: var(--encre);
  font: 600 0.8125rem/1.2 var(--font-sans);
  text-align: left; cursor: pointer;
  display: grid; gap: 0.25rem;
}
.parcours-demo__etapes button::before {
  content: counter(demo);
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em;
  color: var(--gris);
}
.parcours-demo__etapes button[aria-selected="true"] { border-color: var(--action); background: var(--action-pale); box-shadow: inset 0 3px 0 var(--action); }
.parcours-demo__etapes button[aria-selected="true"]::before { color: var(--action); }
.parcours-demo__etapes button.est-vue::before { color: var(--vert-fonce); }
@media (max-width: 960px) { .parcours-demo__etapes { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 520px) { .parcours-demo__etapes { grid-template-columns: repeat(2, 1fr); } }

.parcours-demo__barre { height: 4px; background: var(--filet); border-radius: 999px; overflow: hidden; margin-bottom: 1rem; }
.parcours-demo__barre i { display: block; height: 100%; background: var(--action); width: 12.5%; transition: width 300ms ease; }
@media (prefers-reduced-motion: reduce) { .parcours-demo__barre i { transition: none; } }

.parcours-demo__nav {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-bottom: 1rem;
}
.parcours-demo__ou { font-weight: 600; }
.parcours-demo__ou small { display: block; font-weight: 400; color: var(--gris); font-size: 0.875rem; }
.parcours-demo__nav .bouton { white-space: nowrap; }
.parcours-demo__conseil { color: var(--gris); font-size: 0.9375rem; margin: 0.75rem 0 1rem; display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.parcours-demo__conseil .bascule { margin-left: auto; }
@media (max-width: 600px) {
  .parcours-demo__nav { flex-wrap: wrap; }
  .parcours-demo__ou { order: -1; width: 100%; }
}

/* --- Les prix, encore plus grands ---------------------------------------- */

.offre__prix b { font-size: 5.5rem; }
.offre--mise-en-avant .offre__prix b { font-size: 6rem; }
.offre__prix span strong { font-size: 1.25rem; }
.offre__prix span { font-size: 1.0625rem; }
.offre h3 { font-size: 1.375rem; }
.offre__gratuit { font-size: 1.0625rem; padding: 0.5rem 0.875rem; }
.heros__prix b { font-size: 3rem; }
.heros__prix span, .heros__prix em { font-size: 1.0625rem; }
@media (max-width: 520px) {
  .offre__prix b, .offre--mise-en-avant .offre__prix b { font-size: 4.5rem; }
}

/* --- CORRECTIF : le chiffre du prix héritait de la taille du libellé -------
   `.offre__prix span` et `.heros__prix span` visaient aussi le <span> qui
   porte le nombre à l'intérieur du <b> : « 49 » sortait en 16 px à côté d'un
   « € » en 88 px. Les libellés ne ciblent plus que les enfants directs. */
.offre__prix > b span, .heros__prix > b span { font-size: inherit; color: inherit; font-family: inherit; font-weight: inherit; }
.offre__prix > b, .heros__prix > b { font-family: var(--font-titre); color: var(--encre); }
.offre--mise-en-avant .offre__prix > b { color: var(--action); }
.offre__prix > b { font-size: 6.5rem; line-height: 0.9; }
.offre--mise-en-avant .offre__prix > b { font-size: 7rem; }
.heros__prix > b { font-size: 3.5rem; }
@media (max-width: 520px) { .offre__prix > b, .offre--mise-en-avant .offre__prix > b { font-size: 5.5rem; } }

/* --- La visite guidée : un chemin d'étapes, l'écran, et l'explication ------ */

.chemin { display: flex; list-style: none; margin: 0 0 1.75rem; padding: 0.25rem 0 0.5rem; overflow-x: auto; scrollbar-width: thin; }
.chemin li { flex: 1 0 auto; min-width: 6.75rem; position: relative; }
.chemin li:not(:last-child)::after {
  content: ""; position: absolute; z-index: 0;
  top: calc(0.5rem + 1.25rem); left: 50%; width: 100%; height: 3px;
  background: var(--filet-fort);
}
.chemin li.est-passee:not(:last-child)::after { background: var(--vert); }
.chemin button {
  position: relative; z-index: 1;
  width: 100%; min-height: var(--touch);
  background: none; border: 0; padding: 0.5rem 0.25rem 0.25rem;
  display: grid; justify-items: center; gap: 0.5rem;
  font: 600 0.8125rem/1.2 var(--font-sans); color: var(--gris);
  cursor: pointer; text-align: center;
}
.chemin__num {
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  border: 3px solid var(--filet-fort); background: var(--surface);
  display: grid; place-items: center;
  font-family: var(--font-mono); font-weight: 600; font-size: 0.9375rem;
  transition: background-color 150ms ease, border-color 150ms ease;
}
.chemin button[aria-selected="true"] { color: var(--encre); }
.chemin button[aria-selected="true"] .chemin__num { background: var(--action); border-color: var(--action); color: #fff; box-shadow: 0 0 0 4px var(--action-pale); }
.chemin button.est-vue .chemin__num { background: var(--vert-pale); border-color: var(--vert); color: var(--vert-fonce); }
.chemin button.est-vue .chemin__num::before { content: "✓"; }
.chemin button.est-vue .chemin__num span { display: none; }

.guide { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.guide__ecran { min-width: 0; }
.guide__ecran .appareil--tablette { width: 100%; }
.guide__ecran .appareil--telephone { width: min(100%, 22rem); margin-inline: auto; }
.guide__texte { position: sticky; top: 5.5rem; display: grid; gap: 1rem; }
.guide__numero { font-family: var(--font-mono); font-weight: 600; font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--action); }
.guide__titre { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.guide__explication { color: var(--gris); font-size: 1.0625rem; }
.guide__boutons { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.guide__boutons .bouton { flex: 1 1 10rem; }
.guide__note { color: var(--gris-faible); font-size: 0.875rem; }
.guide__appareil { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; font-size: 0.875rem; color: var(--gris); }
.guide__progression { height: 6px; background: var(--filet); border-radius: 999px; overflow: hidden; }
.guide__progression i { display: block; height: 100%; background: var(--action); width: 12.5%; transition: width 300ms ease; }
@media (prefers-reduced-motion: reduce) { .guide__progression i { transition: none; } }
@media (max-width: 860px) {
  .guide { grid-template-columns: 1fr; }
  .guide__texte { position: static; }
}

/* Le prix sur sa propre ligne, jamais coupé : « 49 € » puis le libellé. */
.offre__prix { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.375rem; align-items: start; }
.offre__prix > b { font-size: 6rem; line-height: 0.9; white-space: nowrap; letter-spacing: -0.06em; }
.offre--mise-en-avant .offre__prix > b { font-size: 6.5rem; }
.offre__prix > span { font-size: 1.0625rem; color: var(--gris); line-height: 1.4; }
.offre__prix > span strong { display: inline; font-size: 1.25rem; color: var(--encre); }
.offre__prix > span strong::after { content: " · "; color: var(--gris-faible); font-weight: 400; }
@media (max-width: 520px) { .offre__prix > b, .offre--mise-en-avant .offre__prix > b { font-size: 5.5rem; } }
.offre__badge { top: -0.9rem; }
.offre--mise-en-avant { padding-top: 2.25rem; }

/* --- Deux métiers, dits d'emblée ------------------------------------------ */

.metiers { display: flex; flex-wrap: wrap; gap: 0.625rem; margin: 0 0 1.25rem; padding: 0; list-style: none; }
.metiers li {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.875rem; border-radius: 999px;
  font-weight: 600; font-size: 0.9375rem;
  border: 1px solid transparent;
}
.metiers li svg { width: 1.125rem; height: 1.125rem; }
.metiers--pac { background: #fff0da; color: #8a5510; border-color: #f2d9b0; }
.metiers--clim { background: #e2f1f6; color: #1d6e85; border-color: #bfe0ea; }

/* --- Les documents produits ---------------------------------------------- */

.documents { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.25rem; }
.document {
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  text-align: left;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.document:hover { border-color: var(--filet-fort); box-shadow: var(--ombre-portee); }
.document__page {
  background: var(--fond);
  padding: 1rem 1rem 0;
  aspect-ratio: 1 / 1.08;
  overflow: hidden;
  position: relative;
}
.document__page img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 1px 2px rgb(11 20 34 / 0.12), 0 8px 24px rgb(11 20 34 / 0.14);
  border: 1px solid rgb(11 20 34 / 0.06);
}
.document__pages {
  position: absolute; right: 0.75rem; top: 0.75rem;
  font-family: var(--font-mono); font-weight: 600; font-size: 0.6875rem;
  background: var(--encre); color: #fff;
  padding: 0.2rem 0.5rem; border-radius: 999px;
}
.document__texte { padding: 0.875rem 1rem 1rem; display: grid; gap: 0.25rem; align-content: start; }
.document__texte h3 { font-size: 1rem; }
.document__texte p { color: var(--gris); font-size: 0.875rem; line-height: 1.4; }
.document__texte span { color: var(--action); font-weight: 600; font-size: 0.875rem; margin-top: 0.25rem; }
@media (max-width: 1100px) { .documents { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px) { .documents { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } .document__texte p { display: none; } }

/* La liseuse : toutes les pages d'un document, en grand. */
.liseuse { border: 0; padding: 0; background: transparent; max-width: min(56rem, 100vw); width: 100%; }
.liseuse::backdrop { background: rgb(11 20 34 / 0.78); }
.liseuse__cadre {
  background: var(--fond);
  border-radius: var(--radius-lg);
  overflow: hidden;
  max-height: 92vh;
  display: grid;
  grid-template-rows: auto 1fr;
}
.liseuse__tete {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  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); font-weight: 400; font-size: 0.875rem; }
.liseuse__fermer {
  min-width: var(--touch); min-height: var(--touch);
  border: 1px solid var(--filet-fort); border-radius: var(--radius);
  background: var(--surface); font-size: 1.25rem; cursor: pointer; color: var(--encre);
}
.liseuse__pages { overflow: auto; padding: 1.25rem; display: grid; gap: 1.25rem; justify-items: center; }
.liseuse__pages img { width: 100%; max-width: 50rem; height: auto; box-shadow: 0 2px 6px rgb(11 20 34 / 0.12), 0 12px 32px rgb(11 20 34 / 0.18); background: #fff; }

/* --- Téléphone : l'explication et « Suivant » avant l'écran, pas après ----
   Sur un téléphone, le cadre de l'écran fait deux hauteurs d'écran : le
   bouton « Suivant » était sous la ligne de flottaison, invisible. Le texte
   et les boutons passent devant ; l'écran suit. */
@media (max-width: 860px) {
  .guide__texte { order: -1; }
  .guide__explication { font-size: 1rem; }
}


/* --- Audit à trois largeurs (22/09/2026) ---------------------------------- */

/* Deux boutons cassés par la cascade : le bouton blanc du menu prenait la
   couleur blanche des liens de navigation (texte invisible), et un bouton
   masqué par `hidden` restait affiché parce que `.bouton` fixe un `display`. */
[hidden] { display: none !important; }
.nav a.bouton--blanc { color: var(--encre); font-weight: 600; }
.nav a.bouton--blanc:hover { color: var(--encre); background: #eef2ff; }

/* Le héros montre le résultat d'une étude — le reste à charge du client,
   aides déduites — écrit en grand, à la place de deux écrans réduits dont
   rien ne se lisait. C'est l'argument de vente, il se lit à toutes les
   largeurs, téléphone compris. */
.heros__visuel { position: relative; min-width: 0; }
.heros__visuel::before {
  content: "";
  position: absolute;
  inset: 10% -8% -8% 6%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(27 77 228 / 0.18), transparent 72%);
  pointer-events: none;
}
.resultat {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: 1rem;
  box-shadow: var(--ombre-portee);
  padding: 1.25rem 1.5rem 0;
  display: grid;
  gap: 0.875rem;
  overflow: hidden;
}
.resultat__entete { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem 0.75rem; flex-wrap: wrap; }
.resultat__societe { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-titre); font-weight: 700; font-size: 1rem; }
.resultat__pave { width: 2rem; height: 2rem; border-radius: 0.5rem; background: var(--encre); color: #fff; display: grid; place-items: center; font-size: 0.75rem; letter-spacing: 0.06em; }
.resultat__chrono { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--vert-pale); color: var(--vert-fonce); font-weight: 600; font-size: 0.8125rem; padding: 0.375rem 0.75rem; border-radius: 999px; white-space: nowrap; }
.resultat__chrono svg { width: 1rem; height: 1rem; flex: none; }
.resultat__titre { margin: 0; font-family: var(--font-titre); font-weight: 700; font-size: 1.375rem; letter-spacing: -0.02em; line-height: 1.2; }
.resultat__client { margin: 0.25rem 0 0; color: var(--gris); font-size: 0.9375rem; }
.resultat__machine { display: flex; align-items: center; gap: 0.875rem; padding: 0.75rem 0.875rem; border: 1px solid var(--filet); border-radius: var(--radius-lg); background: var(--voile); min-width: 0; }
.resultat__machine img { width: 4rem; height: auto; flex: none; }
.resultat__machine div { min-width: 0; }
.resultat__machine b { display: block; font-size: 0.9375rem; }
.resultat__machine span { display: block; color: var(--gris); font-size: 0.8125rem; line-height: 1.4; }
.resultat__lignes { margin: 0; display: grid; gap: 0.45rem; }
.resultat__lignes div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: 0.9375rem; }
.resultat__lignes dt { margin: 0; }
.resultat__lignes dd { margin: 0; font-family: var(--font-mono); font-weight: 600; white-space: nowrap; }
.resultat__lignes dd small { font-family: var(--font-sans); font-weight: 500; font-size: 0.75rem; color: var(--gris); }
.resultat__aide dt, .resultat__aide dd { color: var(--vert-fonce); }
.resultat__reste { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.875rem 1rem; border-radius: var(--radius-lg); background: var(--action-pale); border: 1px solid rgb(27 77 228 / 0.22); }
.resultat__reste span { font-weight: 600; font-size: 1rem; }
.resultat__reste b { font-family: var(--font-titre); font-size: clamp(2rem, 3.4vw, 2.75rem); font-weight: 700; letter-spacing: -0.03em; color: var(--action); line-height: 1; white-space: nowrap; }
.resultat__pied { margin: 0 -1.5rem; padding: 0.875rem 1.5rem 1rem; background: var(--fond); border-top: 1px solid var(--filet); display: grid; gap: 0.625rem; }
.resultat__gains { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
.resultat__gains li { display: grid; gap: 0.125rem; min-width: 0; }
.resultat__gains b { font-family: var(--font-titre); font-size: 1.125rem; letter-spacing: -0.02em; line-height: 1.1; white-space: nowrap; }
.resultat__gains span { color: var(--gris); font-size: 0.75rem; line-height: 1.3; }
.resultat__mention { margin: 0; color: var(--gris-faible); font-size: 0.75rem; line-height: 1.4; }
@media (max-width: 960px) {
  .heros__visuel { width: 100%; max-width: 34rem; margin-inline: auto; }
}
@media (max-width: 700px) {
  .heros__grille { padding-bottom: 2rem; }
  .resultat { padding: 1rem 1rem 0; border-radius: 0.875rem; }
  .resultat__pied { margin-inline: -1rem; padding-inline: 1rem; }
  .resultat__reste b { font-size: 2.125rem; }
  .resultat__gains { gap: 0.5rem; }
  .resultat__gains b { font-size: 1rem; }
  .resultat__gains span { font-size: 0.6875rem; }
}

/* Téléphone : les cinq documents se feuillettent d'un glissement du pouce,
   au lieu d'une grille à deux colonnes qui laissait le cinquième orphelin. */
@media (max-width: 680px) {
  .documents {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 0.75rem;
    padding-bottom: 0.75rem;
    scrollbar-width: thin;
  }
  .document { flex: 0 0 min(16rem, 74vw); scroll-snap-align: start; }
  .document__texte p { display: block; }
}


/* --- Une seule offre (23/09/2026) ----------------------------------------
   Une formule mensuelle unique remplace les trois cartes : la carte à
   gauche, ce qu'elle comprend à droite ; l'une sous l'autre dès la
   tablette. La grille `.offres` reste définie plus haut, sans usage. */
.tarif {
  display: grid;
  grid-template-columns: minmax(0, 27rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.offre--unique { gap: 1.125rem; }
.offre--unique ul { margin-top: 0; }
.offre--unique .bouton { margin-top: 0.5rem; width: 100%; }
.tarif__inclus h3 { font-size: 1.25rem; margin-bottom: 1.25rem; }
.tarif .inclus { margin-top: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.875rem 1.5rem; font-size: 1rem; }
@media (max-width: 960px) {
  .tarif { grid-template-columns: minmax(0, 1fr); max-width: 32rem; margin-inline: auto; }
}
@media (max-width: 560px) { .tarif .inclus { grid-template-columns: minmax(0, 1fr); } }

/* « 39,99 € » compte trois signes de plus que « 49 € » : à la taille
   d'avant (5,5 rem, soit 88 px sur téléphone), il occupait environ 290 px
   des 293 disponibles dans la carte à 375 px, et débordait en dessous. La
   taille suit la largeur de l'écran : 75 px à 375 px (246 px mesurés),
   96 px au plus. Dans le héros, le nombre et « € » ne se séparent jamais. */
.offre--unique .offre__prix > b { font-size: clamp(3.5rem, 20vw, 6rem); }
.heros__prix > b { white-space: nowrap; }

/* Le halo bleu derrière le résultat du héros (`.heros__visuel::before`,
   8 % au-delà de la carte) sortait de l'écran sur téléphone : 11 px de
   défilement horizontal à 375 px. On le coupe au bord du héros, sans
   toucher au défilement vertical. */
.heros { overflow-x: clip; }


/* --- Pages légales (trames) ----------------------------------------------
   Mentions légales, conditions générales, confidentialité : même en-tête,
   même pied que l'accueil. Chaque page reste une trame tant qu'un juriste
   ne l'a pas relue, et le dit en tête, en grand. */
.legal { background: var(--fond); padding-block: clamp(2.5rem, 6vw, 4.5rem); border-bottom: 1px solid var(--filet); }
.legal__corps { max-width: 50rem; }
.legal h1 { font-size: clamp(2rem, 4.5vw, 3rem); letter-spacing: -0.03em; }
.legal .chapeau { max-width: none; }

.trame {
  margin: 1.75rem 0 0;
  padding: 1.125rem 1.25rem;
  border: 2px dashed var(--sable);
  border-radius: var(--radius-lg);
  background: var(--sable-pale);
}
.trame__titre { display: block; font-family: var(--font-titre); font-weight: 700; font-size: 1.1875rem; color: var(--sable); line-height: 1.3; }
.trame p { margin-top: 0.5rem; font-size: 0.9375rem; }

.sommaire { margin-top: 2rem; padding: 1.125rem 1.25rem; background: var(--surface); border: 1px solid var(--filet); border-radius: var(--radius-lg); }
.sommaire h2 { font-size: 1rem; font-family: var(--font-mono); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gris); }
.sommaire ol { margin: 0.625rem 0 0; padding-left: 1.5rem; columns: 2 16rem; column-gap: 2rem; }
.sommaire li { break-inside: avoid; }
/* 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.5rem; line-height: 1.4; }

.clause {
  margin-top: 1rem;
  padding: 1.25rem 1.5rem 1.375rem;
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: var(--radius-lg);
  scroll-margin-top: 5.5rem;
}
.clause h2 { font-size: clamp(1.25rem, 2.6vw, 1.5rem); }
.clause h3 { font-size: 1.0625rem; margin-top: 1.25rem; }
.clause p, .clause ul, .clause .champs, .clause .tableau-defile { margin-top: 0.75rem; }
.clause ul { padding-left: 1.25rem; }
.clause li + li { margin-top: 0.375rem; }
.clause__objet { color: var(--gris); font-size: 0.9375rem; }
.clause__objet b { color: var(--encre); }

/* Un champ à compléter se voit de loin : c'est ce qu'on cherche en relisant. */
.a-completer {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.875em;
  color: #7a4300;
  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: 0.25rem 1rem; 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: 600px) { .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: 0.9375rem; }
.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(--voile); font-weight: 600; }
/* Sur téléphone, un tableau à trois colonnes ne se lit qu'à moitié, même
   en défilant : 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: 600px) {
  .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: 0.25rem; }
  .tableau-legal td[data-label]::before { content: attr(data-label) "\00a0: "; color: var(--gris); }
}

/* « À trancher » : une question posée au juriste, distincte du texte. */
.note-travail { margin-top: 0.875rem; padding: 0.75rem 1rem; border-left: 4px solid var(--info); background: var(--info-pale); border-radius: 0 var(--radius) var(--radius) 0; font-size: 0.9375rem; }
.note-travail b { color: var(--info); }

.legal__maj { margin-top: 2rem; color: var(--gris); font-size: 0.9375rem; }

/* Entre 861 et 1 100 px, sept liens et le bouton « Essai gratuit » ne
   tenaient pas sur la barre : le bouton passait sur deux ou trois lignes et,
   vers 870 px, la page débordait de 55 px à droite. Les liens se resserrent,
   le bouton reste sur une ligne. En dessous de 861 px, le menu prend le
   relais. */
@media (min-width: 861px) and (max-width: 1100px) {
  .entete__barre { gap: 0.5rem; }
  .nav { gap: 0; }
  .nav a { padding-inline: 0.5rem; font-size: 0.875rem; }
  .nav .bouton { white-space: nowrap; margin-left: 0.375rem; padding-inline: 0.875rem; }
}