/* ==========================================================================
   DEROVIA — Feuille de style
    1. Jetons de design
    2. Réinitialisation
    3. Décor (fond animé, grain)
    4. Deck & diapositives
    5. En-tête fixe & repères de section
    6. Panneau de navigation
    7. Boutons
    8. Accueil
    9. Sections de contenu (expertises, méthode)
   10. Démonstration
   11. Rentabilité
   12. Logiciel (téléchargement Windows)
   13. Questionnaire
   14. Vidéo (diapositive et page)
   15. Pages légales
   16. Animations
   17. Petits écrans
   18. Mode défilement (téléphones, fenêtres basses)
   ========================================================================== */

/* ==========================================================================
   1. Jetons de design
   ========================================================================== */
:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --bg-primary: #fbfbfd;
  --surface-solid: #ffffff;
  --surface-card: rgba(255, 255, 255, 0.88);
  --surface-raised: rgba(255, 255, 255, 0.72);
  --surface-muted: #f3f4f7;
  --surface-border: rgba(255, 255, 255, 0.92);

  --text-primary: #1d1d1f;
  --text-secondary: #515154;
  --text-tertiary: #86868b;
  --text-inverse: #ffffff;

  --accent: #0071e3;
  --accent-soft: rgba(0, 113, 227, 0.12);
  --danger: #d93025;

  --ink: #1d1d1f;
  --ink-strong: #000000;

  --line-soft: rgba(0, 0, 0, 0.06);
  --line: rgba(0, 0, 0, 0.09);
  --line-strong: rgba(0, 0, 0, 0.18);

  --shadow-button: 0 14px 30px -10px rgba(0, 0, 0, 0.25), 0 4px 10px rgba(0, 0, 0, 0.06);
  --shadow-button-hover: 0 20px 40px -10px rgba(0, 0, 0, 0.35), 0 8px 16px rgba(0, 0, 0, 0.08);
  --shadow-card: 0 16px 44px -12px rgba(0, 0, 0, 0.07), 0 0 0 1px rgba(0, 0, 0, 0.04);
  --shadow-raised: 0 10px 30px -14px rgba(0, 0, 0, 0.18);
  --shadow-bubble: 0 2px 8px rgba(0, 0, 0, 0.04);

  --radius-card: 28px;
  --radius-panel: 20px;
  --radius-field: 14px;
  --radius-pill: 9999px;

  --ease-slide: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-apple: cubic-bezier(0.16, 1, 0.3, 1);

  --slide-duration: 0.85s;
  --header-height: 92px;
  --gutter: 48px;
  --content-width: 1080px;
}

/* ==========================================================================
   2. Réinitialisation
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html,
body {
  width: 100%;
  position: relative;
  font-family: var(--font-sans);
  color: var(--text-primary);
  background-color: var(--bg-primary);
}

/* `html.deck` n'est posée que sur la page du deck : celle-ci occupe exactement
   la fenêtre et ne défile pas. Les pages légales sont des documents ordinaires. */
html.deck,
html.deck body,
html.video,
html.video body {
  height: 100%;
  overflow: hidden;
}

/* Révélé par main.js une fois le fond dessiné : ni canevas blanc, ni animation
   d'entrée entamée à moitié. Sans JS, la classe `js` est absente et rien ne
   masque ; sans `deck`, les pages légales s'affichent immédiatement. */
html.js.deck body,
html.js.video body {
  opacity: 0;
}

html.js.deck body.is-ready,
html.js.video body.is-ready {
  opacity: 1;
  transition: opacity 0.4s ease;
}

button {
  font: inherit;
  color: inherit;
  border: none;
  background: none;
  cursor: pointer;
  outline: none;
}

ul,
ol {
  list-style: none;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Escamoté jusqu'à recevoir le focus : premier arrêt de la navigation clavier. */
.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-inverse);
  background: var(--ink);
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 0.25s var(--ease-apple);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

/* Message de repli du parcours, affiché uniquement sans JavaScript. */
.survey-noscript {
  padding: 18px 20px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-panel);
  background: rgba(255, 255, 255, 0.7);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.survey-noscript a {
  color: var(--accent);
}

/* Conteneur des <symbol> : présent dans le flux mais jamais visible. */
.svg-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ==========================================================================
   3. Décor
   ========================================================================== */
#bg-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  filter: contrast(102%) brightness(101%);
}

.noise-overlay {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* ==========================================================================
   4. Deck & diapositives
   ========================================================================== */
.deck-viewport {
  position: relative;
  z-index: 2;
  width: 100vw;
  height: 100vh;
  /* `clip` plutôt que `hidden` : le conteneur ne devient pas défilable, donc
     aucun défilement automatique ne peut annuler le décalage des diapositives. */
  overflow: hidden;
  overflow: clip;
}

/* Hauteur laissée au contenu : les diapositives ne se compriment pas, donc la
   mise en page est déjà juste au premier rendu, avant même que le JS ne tourne. */
.deck-track {
  width: 100%;
  display: flex;
  flex-direction: column;
  will-change: transform;
  transform: translateY(calc(var(--slide-index, 0) * -100vh));
  transition: transform var(--slide-duration) var(--ease-slide);
}

/* `min-height: 0` neutralise la hauteur minimale automatique des éléments
   flex : une diapositive fait exactement 100vh, jamais plus, sinon le pas de
   défilement du deck ne tomberait plus sur ses frontières. */
.slide-section {
  position: relative;
  flex: 0 0 100vh;
  min-height: 0;
  width: 100vw;
  display: flex;
  flex-direction: column;
}

.slide-inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--header-height) var(--gutter) 32px;
  /* Filet pour les fenêtres très basses : le contenu défile au lieu de déborder
     sur la diapositive suivante. */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Sections lues plutôt que contemplées : contenu centré et borné.
   `safe center` évite que le haut du contenu passe sous l'en-tête, et donc
   devienne inatteignable, lorsqu'il dépasse la hauteur de la fenêtre. */
.slide-content {
  justify-content: safe center;
  gap: 28px;
  max-width: var(--content-width);
  margin: 0 auto;
}

/* ==========================================================================
   5. En-tête fixe & repères de section
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  height: var(--header-height);
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.brand-symbol {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-inverse);
  background: linear-gradient(135deg, #1d1d1f 0%, #434346 100%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  transition: transform 0.4s var(--ease-apple);
}

.brand-mark:hover .brand-symbol {
  transform: scale(1.05);
}

.brand-glyph {
  display: block;
  width: 18px;
  height: 18px;
}

.brand-name {
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-primary);
}

/* Placé en tête du groupe de droite, qui est aligné à droite : l'afficher ou le
   masquer ne fait bouger que le bord gauche du groupe. La marque, elle, reste
   collée au bord gauche de la page en toutes circonstances. */
.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-right: 6px;
  padding: 8px 16px 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: all 0.3s var(--ease-apple);
}

.btn-back svg {
  width: 15px;
  height: 15px;
}

.btn-back:hover {
  background: var(--surface-solid);
  border-color: var(--line-strong);
  transform: translateY(-2px);
}

/* Sur l'accueil il n'y a rien à quitter : le bouton libère sa place. */
body[data-slide="hero"] .btn-back {
  display: none;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* --- Bouton du panneau ---
   Il remplace le menu horizontal, qui gagnait un onglet à chaque section
   ajoutée. Les deux barres se croisent à l'ouverture : le même bouton ferme. */
.btn-menu {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-right: 6px;
  padding: 8px 17px 8px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: all 0.3s var(--ease-apple);
}

.btn-menu:hover {
  background: var(--surface-solid);
  border-color: var(--line-strong);
  transform: translateY(-2px);
}

.btn-menu-barres {
  position: relative;
  width: 15px;
  height: 11px;
}

.btn-menu-barres i {
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.3s var(--ease-apple);
}

.btn-menu-barres i:first-child { top: 0; }
.btn-menu-barres i:last-child { bottom: 0; }

/* (11 − 1,5) / 2 : chaque barre rejoint exactement le centre avant de pivoter. */
body.menu-ouvert .btn-menu-barres i:first-child {
  transform: translateY(4.75px) rotate(45deg);
}

body.menu-ouvert .btn-menu-barres i:last-child {
  transform: translateY(-4.75px) rotate(-45deg);
}

/* --- Les deux pastilles de l'en-tête : le logiciel et le téléphone ---
   Discrètes à côté de l'appel à l'action : qui vient pour le logiciel ou
   préfère appeler ne doit pas avoir à chercher, mais l'en-tête ne doit pas
   redevenir une barre d'outils. Sur petit écran il ne reste que le combiné :
   l'appel est à un doigt, et le logiciel se retrouve dans le panneau. --- */
.btn-tel,
.btn-logiciel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: 0.88rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  text-decoration: none;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: all 0.3s var(--ease-apple);
}

.btn-tel svg {
  width: 15px;
  height: 15px;
  color: var(--accent);
}

.btn-tel:hover,
.btn-logiciel:hover {
  background: var(--surface-solid);
  border-color: var(--line-strong);
  transform: translateY(-2px);
}

.btn-nav {
  margin-left: 8px;
  padding: 9px 20px;
  border-radius: var(--radius-pill);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text-inverse);
  background-color: var(--ink);
  box-shadow: var(--shadow-raised);
  transition: all 0.3s var(--ease-apple);
}

.btn-nav:hover {
  background-color: var(--ink-strong);
  transform: translateY(-1px);
}

/* Inutile de proposer le parcours quand on y est déjà. */
body[data-slide="parcours"] .btn-nav {
  opacity: 0;
  pointer-events: none;
}

.deck-dots {
  position: fixed;
  top: 50%;
  right: 26px;
  z-index: 20;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Le point visible est le ::before : le bouton lui-même reste large pour
   offrir une cible cliquable confortable. */
.deck-dot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 26px;
  height: 22px;
  padding: 0;
}

.deck-dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.2);
  transition: all 0.35s var(--ease-apple);
}

.deck-dot:hover::before {
  background: rgba(0, 0, 0, 0.45);
}

.deck-dot.is-current::before {
  height: 22px;
  background: var(--ink);
}

.deck-dot-label {
  position: absolute;
  right: 22px;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  font-size: 0.78rem;
  font-weight: 500;
  white-space: nowrap;
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--shadow-raised);
  opacity: 0;
  transform: translateX(6px);
  pointer-events: none;
  transition: all 0.3s var(--ease-apple);
}

.deck-dot:hover .deck-dot-label,
.deck-dot:focus-visible .deck-dot-label {
  opacity: 1;
  transform: translateX(0);
}

/* ==========================================================================
   6. Panneau de navigation
   ========================================================================== */
/* Il se place SOUS l'en-tête (z-index inférieur) : la marque et le bouton qui
   l'a ouvert restent visibles et en place, et ce même bouton le referme. */
.menu-panneau {
  position: fixed;
  inset: 0;
  z-index: 15;
  display: flex;
  flex-direction: column;
  /* `safe` : sur un écran trop bas, la liste se cale en haut plutôt que de
     déborder des deux côtés, où le début deviendrait inatteignable. */
  justify-content: safe center;
  align-items: center;
  padding: calc(var(--header-height) + 10px) var(--gutter) 40px;
  overflow-y: auto;
  background: rgba(251, 251, 253, 0.7);
  backdrop-filter: blur(34px) saturate(140%);
  -webkit-backdrop-filter: blur(34px) saturate(140%);
  /* Fermé par `visibility` et non par `display` : l'élément reste rendu, donc
     la transition part au premier coup sans qu'on ait à attendre une image.
     `visibility: hidden` le retire tout de même du focus, du pointeur et de
     l'arbre d'accessibilité — il est bien absent, pas seulement transparent. */
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.32s var(--ease-apple), visibility 0s linear 0.32s;
}

.menu-panneau.is-open {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.32s var(--ease-apple), visibility 0s;
}

.menu-liste {
  width: 100%;
  max-width: 660px;
}

/* L'entrée en scène est portée par la ligne, le survol par le bouton : les
   deux transformations ne se disputent pas la même propriété. */
.menu-liste li {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.45s var(--ease-apple), transform 0.45s var(--ease-apple);
  transition-delay: calc(var(--i, 0) * 35ms);
}

.menu-panneau.is-open .menu-liste li {
  opacity: 1;
  transform: none;
}

.menu-entree {
  width: 100%;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: baseline;
  gap: 0 16px;
  padding: 13px 16px;
  border-radius: var(--radius-panel);
  text-align: left;
  transition: background-color 0.25s var(--ease-apple), transform 0.25s var(--ease-apple);
}

.menu-entree:hover {
  background: rgba(255, 255, 255, 0.7);
  transform: translateX(5px);
}

.menu-numero {
  font-size: 0.8rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
}

.menu-texte {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.menu-titre {
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.menu-resume {
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

/* Une page autonome quitte le deck : elle se distingue des sections par un
   filet et une flèche, plutôt que par un numéro d'ordre qu'elle n'a pas. */
.menu-ligne-page {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
}

.menu-page {
  text-decoration: none;
}

.menu-page .menu-numero {
  font-size: 0.95rem;
  color: var(--accent);
}

/* Les repères latéraux font double emploi avec le panneau : ils s'effacent
   le temps qu'il est ouvert. */
body.menu-ouvert .deck-dots {
  opacity: 0;
  transition: opacity 0.25s var(--ease-apple);
}

/* La section où l'on se trouve déjà : reconnaissable sans être un bouton mort. */
.menu-entree.is-current .menu-numero,
.menu-entree.is-current .menu-titre {
  color: var(--accent);
}

/* ==========================================================================
   7. Boutons
   ========================================================================== */
.btn-primary,
.btn-secondary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 17px 36px;
  border-radius: var(--radius-pill);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: all 0.4s var(--ease-apple);
}

/* `display: inline-flex` l'emporterait sur l'attribut `hidden` : sans cette
   règle, masquer un bouton depuis le script ne le masque pas. */
.btn-primary[hidden],
.btn-secondary[hidden] {
  display: none;
}

.btn-primary {
  color: var(--text-inverse);
  background-color: var(--ink);
  box-shadow: var(--shadow-button);
}

/* Liseré lumineux sur le pourtour du bouton (bordure en dégradé via masque). */
.btn-primary::before {
  content: "";
  position: absolute;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.05) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.btn-primary:hover {
  background-color: var(--ink-strong);
  box-shadow: var(--shadow-button-hover);
  transform: translateY(-2px) scale(1.02);
}

.btn-primary:active {
  transform: translateY(0) scale(0.98);
}

.btn-primary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.btn-block {
  width: 100%;
}

/* Variante réduite : les sections de contenu sont serrées en hauteur. */
.btn-compact {
  padding: 13px 26px;
  font-size: 0.97rem;
}

.btn-secondary {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--line);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.btn-secondary:hover {
  background: var(--surface-solid);
  border-color: var(--line-strong);
  transform: translateY(-2px);
}

.btn-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.15);
  transition: transform 0.3s var(--ease-apple);
}

.btn-icon svg {
  width: 14px;
  height: 14px;
}

.btn-primary:hover .btn-icon {
  background: rgba(255, 255, 255, 0.25);
  transform: translateX(4px);
}

/* ==========================================================================
   8. Accueil
   ========================================================================== */
.hero {
  margin: auto;
  padding: 0 16px;
  max-width: 1100px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transform: translateY(-2vh);
}

.hero-title {
  max-width: 980px;
  font-size: clamp(2.5rem, 5.8vw, 5rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.035em;
  animation: fade-in-down 0.9s var(--ease-apple) backwards;
}

/* Le dégradé est découpé sur les glyphes : il ne peint donc rien au-delà de la
   boîte. Or l'interlettrage négatif la referme avant la fin du dernier
   caractère, ce qui rognait la panse du « ? ». Le rembourrage rouvre la boîte,
   la marge négative annule son effet sur le centrage. */
.text-gradient {
  display: inline-block;
  padding-right: 0.06em;
  margin-right: -0.06em;
  background: linear-gradient(135deg, #1d1d1f 20%, #4b4d54 70%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-lead {
  max-width: 620px;
  margin-top: 26px;
  font-size: 1.12rem;
  line-height: 1.6;
  color: var(--text-secondary);
  animation: fade-in-up 1s var(--ease-apple) 0.1s backwards;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 40px;
  animation: fade-in-up 1s var(--ease-apple) 0.2s backwards;
}

/* Quatre liens et une mention : sur un téléphone, la ligne se replie plutôt
   que de dépasser du bord. */
.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: 0.85rem;
  color: var(--text-tertiary);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
}

.footer-links a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-links a:hover {
  color: var(--text-primary);
}

/* ==========================================================================
   9. Sections de contenu
   ========================================================================== */
.section-head {
  max-width: 640px;
}

.section-eyebrow {
  margin-bottom: 12px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.section-title {
  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.028em;
}

.section-lead {
  margin-top: 14px;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.section-cta {
  display: flex;
}

/* Panneau translucide reprenant la matière de la carte du parcours : le texte
   se détache du fond animé, qui sinon gêne la lecture. */
.section-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 28px 34px;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-card);
  background: var(--surface-card);
  backdrop-filter: blur(40px) saturate(150%);
  -webkit-backdrop-filter: blur(40px) saturate(150%);
  box-shadow: var(--shadow-card);
}

/* --- Les fondateurs ---
   Deux visages, deux prénoms, deux zones. Sur un marché où l'on confie ses
   devis à un inconnu, savoir qui décrochera vaut plus qu'un argumentaire. --- */
.fondateurs {
  display: grid;
  /* Deux colonnes déclarées, pas devinées. `auto-fit` avec un plancher en
     pixels retombait à une seule colonne de 460 px : la section doublait de
     hauteur et la carte débordait. Deux pistes `1fr` se réduisent toujours. */
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  max-width: 620px;
  margin: 0 auto;
}

.fondateur {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 22px 20px;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-panel);
  background: var(--surface-raised);
  box-shadow: var(--shadow-raised);
  text-align: center;
}

.fondateur-photo {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
}

/* En attendant les portraits : un disque, jamais une image cassée. */
.fondateur-photo-vide {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
  background: var(--surface-muted);
}

.fondateur-prenom {
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.fondateur-zone {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* --- Cartes d'expertise --- */
/* Plancher calculé pour que les quatre cartes tiennent sur une ligne à
   l'intérieur du panneau : 4 x 196 + 3 x 18 = 838 px, sous les 891 px utiles.
   Au-dessus, la quatrième descendait d'une ligne et faisait déborder la
   section. */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  gap: 18px;
}

.card {
  padding: 22px 20px;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-panel);
  background: var(--surface-raised);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  box-shadow: var(--shadow-raised);
  transition: transform 0.4s var(--ease-apple), box-shadow 0.4s var(--ease-apple);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
}

.card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: 14px;
  border-radius: 12px;
  color: var(--accent);
  background: var(--accent-soft);
}

.card-icon svg {
  width: 21px;
  height: 21px;
}

.card h3 {
  font-size: 1.06rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.card p {
  margin-top: 8px;
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

/* --- Étapes de la méthode --- */
.steps {
  display: grid;
  /* Même plancher que les cartes d'expertise, pour la même raison. */
  grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  gap: 18px;
}

.step {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 18px;
  border-top: 2px solid var(--line);
  transition: border-color 0.4s var(--ease-apple);
}

.step:hover {
  border-top-color: var(--accent);
}

.step-index {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--text-tertiary);
}

.step h3 {
  font-size: 1.06rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.step p {
  margin-top: 8px;
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

.step-meta {
  display: inline-block;
  margin-top: 12px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
  color: var(--text-tertiary);
  background: rgba(255, 255, 255, 0.6);
}

/* ==========================================================================
   10. Démonstration — le même schéma, décliné par métier
   ========================================================================== */
.demo {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* --- Onglets métiers --- */
.demo-trades {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.demo-trade {
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.6);
  transition: all 0.3s var(--ease-apple);
}

.demo-trade:hover {
  color: var(--text-primary);
  border-color: var(--line-strong);
}

.demo-trade.is-current {
  color: var(--text-inverse);
  background: var(--ink);
  border-color: var(--ink);
}

/* --- Les deux versants, et la flèche entre eux --- */
.demo-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 18px;
}

.demo-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 22px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-panel);
  background: var(--surface-solid);
  box-shadow: var(--shadow-raised);
}

/* Le versant automatisé porte la couleur : c'est là que se joue la promesse. */
.demo-panel-reponse {
  border-color: rgba(0, 113, 227, 0.22);
  background: linear-gradient(180deg, rgba(0, 113, 227, 0.05) 0%, var(--surface-solid) 60%);
}

.demo-panel-title {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.demo-panel-reponse .demo-panel-title {
  color: var(--accent);
}

/* Hauteur réservée : le texte change sans faire sauter la mise en page. */
.demo-panel-text {
  min-height: 4.8em;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-primary);
  transition: opacity 0.22s ease, transform 0.22s var(--ease-apple);
}

.demo-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  color: var(--accent);
}

.demo-arrow svg {
  width: 22px;
  height: 22px;
}

/* --- Le gain, en bas --- */
.demo-gain {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border: 1px solid rgba(0, 113, 227, 0.22);
  border-radius: var(--radius-panel);
  background: var(--accent-soft);
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--text-primary);
}

.demo-gain span[data-role] {
  transition: opacity 0.22s ease, transform 0.22s var(--ease-apple);
}

.demo-gain-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: var(--surface-solid);
  background: var(--accent);
}

.demo-gain-mark svg {
  width: 14px;
  height: 14px;
}

/* Effacement bref pendant le remplacement du texte. */
.demo-panel-text.is-leaving,
.demo-gain span[data-role].is-leaving {
  opacity: 0;
  transform: translateY(6px);
}

/* --- Pied de la démonstration --- */
.demo-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  font-size: 0.86rem;
  color: var(--text-tertiary);
}

@media (max-width: 760px) {
  .demo-flow {
    grid-template-columns: 1fr;
  }

  .demo-arrow {
    width: 100%;
    transform: rotate(90deg);
  }

  .demo-panel-text {
    min-height: 0;
  }
}

/* ==========================================================================
   11. Rentabilité — ce que le temps rendu rapporte
   ========================================================================== */
#slide-rentabilite .section-card {
  padding: 24px 32px 20px;
  gap: 16px;
}

#slide-rentabilite .slide-inner {
  overflow-y: clip;
}

@media (max-height: 640px) {
  #slide-rentabilite .slide-inner {
    overflow-y: auto;
  }
}

.roi {
  width: 100%;
}

/* Grille 2 colonnes calibrée pour un équilibre parfait */
.roi-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: 24px;
  align-items: stretch;
}

/* --- Colonne gauche : Simulateur & Visualisation --- */
.roi-cockpit {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 20px;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-panel);
  background: var(--surface-raised);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: var(--shadow-raised);
}

.roi-controle {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.roi-controle-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.roi-label {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.roi-valeur {
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* Curseur Apple avec thumb blanc élégant et track dynamique */
.roi-curseur {
  width: 100%;
  height: 6px;
  border-radius: var(--radius-pill);
  appearance: none;
  cursor: pointer;
  background: linear-gradient(
    to right,
    var(--accent) 0 var(--part, 30%),
    rgba(0, 0, 0, 0.08) var(--part, 30%) 100%
  );
  outline: none;
  transition: background 0.1s ease;
}

.roi-curseur:focus-visible {
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.roi-curseur::-webkit-slider-thumb {
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16), 0 0 1px rgba(0, 0, 0, 0.12);
  cursor: grab;
  transition: transform 0.2s var(--ease-apple), box-shadow 0.2s var(--ease-apple);
}

.roi-curseur::-webkit-slider-thumb:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
}

.roi-curseur::-webkit-slider-thumb:active {
  cursor: grabbing;
  transform: scale(0.96);
}

.roi-curseur::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16), 0 0 1px rgba(0, 0, 0, 0.12);
  cursor: grab;
  transition: transform 0.2s var(--ease-apple), box-shadow 0.2s var(--ease-apple);
}

.roi-curseur::-moz-range-thumb:hover {
  transform: scale(1.1);
}

/* Repères cliquables sous le slider */
.roi-reperes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.roi-repere {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.65);
  font-size: 0.8rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.25s var(--ease-apple);
}

.roi-repere strong {
  font-weight: 600;
  color: var(--text-primary);
  transition: color 0.25s var(--ease-apple);
}

.roi-repere:hover {
  background: var(--surface-solid);
  border-color: var(--line-strong);
  transform: translateY(-1px);
}

.roi-repere.is-current {
  color: var(--text-inverse);
  background: var(--ink);
  border-color: var(--ink);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14);
}

.roi-repere.is-current strong {
  color: var(--text-inverse);
}

/* Visualisation graphique SVG */
.roi-visual {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.55);
  border-radius: var(--radius-field);
  border: 1px solid var(--line-soft);
  padding: 4px 6px;
}

.roi-graphe {
  width: 100%;
  height: 122px;
  max-height: 130px;
  display: block;
}

.roi-axe {
  stroke: var(--line);
  stroke-width: 1;
}

.roi-prix {
  stroke: var(--text-tertiary);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
}

.roi-courbe {
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.roi-seuil {
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-dasharray: 3 3;
  opacity: 0.6;
}

.roi-point {
  fill: var(--accent);
  stroke: var(--surface-solid);
  stroke-width: 2.5;
}

.roi-etiquette,
.roi-mois {
  font-size: 11px;
  fill: var(--text-tertiary);
  font-family: var(--font-sans);
}

.roi-mois-fin {
  text-anchor: end;
}

.roi-seuil-texte {
  font-size: 12px;
  font-weight: 600;
  fill: var(--accent);
  font-family: var(--font-sans);
}

/* Micro-formule en bas du cockpit */
.roi-calcul-wrap {
  display: flex;
  align-items: center;
}

.roi-calcul {
  display: inline-block;
  font-size: 0.78rem;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* --- Colonne droite : Synthèse & Impact financier --- */
.roi-dashboard {
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: space-between;
}

/* Grande carte héroïque pour le gain net */
.roi-hero-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 20px 22px;
  border-radius: var(--radius-panel);
  border: 1px solid rgba(0, 113, 227, 0.22);
  background: linear-gradient(145deg, rgba(0, 113, 227, 0.08) 0%, rgba(255, 255, 255, 0.95) 100%);
  box-shadow: 0 10px 28px -8px rgba(0, 113, 227, 0.12);
  position: relative;
  overflow: hidden;
}

.roi-hero-badge-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.roi-hero-tag {
  display: inline-flex;
  align-items: center;
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #ffffff;
  background: var(--accent);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}

.roi-hero-amorti {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.roi-hero-amorti strong {
  color: var(--accent);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.roi-hero-amount {
  font-size: clamp(2.1rem, 3.2vw, 2.7rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  margin: 4px 0 2px;
}

.roi-hero-caption {
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

/* Micro-cartes de soutien */
.roi-subcards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.roi-subcard {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-field);
  background: var(--surface-solid);
  box-shadow: var(--shadow-raised);
}

.roi-subcard-label {
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--text-tertiary);
}

.roi-subcard-value {
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 860px) {
  .roi-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* ==========================================================================
   12. Logiciel — téléchargement de la suite Windows
   ========================================================================== */
.dl-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: 26px;
  align-items: start;
}

/* --- Colonne gauche : l'action, puis ce qu'il faut savoir avant de cliquer --- */
.dl-action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.btn-download {
  padding: 15px 28px;
  font-size: 1rem;
}

/* La flèche descend au survol : on télécharge, on ne passe pas à la suite. */
.btn-download:hover .btn-icon {
  transform: translateY(3px);
}

/* Une seule ligne qui se replie, ponctuée de points : cinq informations
   courtes empilées prenaient 116 px pour ce qui se lit d'un regard. */
/* --- L'adresse avant le lien ---
   Contrepartie d'un outil gratuit, jamais un péage : le lien de passage
   reste en clair sous le champ. Une adresse arrachée ne vaut rien. --- */
.dl-capture {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.dl-capture-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.dl-capture-ligne {
  display: flex;
  gap: 10px;
}

.dl-capture-ligne .champ-saisie {
  flex: 1;
  min-width: 0;
}

.dl-capture-ligne .btn-download {
  flex: none;
}

.dl-capture-legal {
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text-tertiary);
}

.dl-merci {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-primary);
}

.dl-merci a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* `display` l'emporterait sur l'attribut `hidden` — le piège habituel. */
.dl-capture[hidden],
.dl-merci[hidden] {
  display: none;
}

.dl-specs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 10px;
  font-size: 0.87rem;
  color: var(--text-secondary);
}

.dl-specs li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dl-specs li:not(:last-child)::after {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.55;
}

/* --- L'avertissement Windows ---
   En bleu, jamais en rouge : l'écran SmartScreen fait déjà peur, le rôle de
   l'encadré est de le désamorcer. Annoncé avant le clic, il transforme une
   surprise inquiétante en étape attendue. --- */
.dl-alerte {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 16px 18px;
  border: 1px solid rgba(0, 113, 227, 0.2);
  border-radius: var(--radius-panel);
  background: var(--accent-soft);
}

.dl-alerte-titre {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.97rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.dl-alerte-marque {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-inverse);
  background: var(--accent);
}

.dl-alerte > p {
  font-size: 0.89rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* --- Reproduction de la fenêtre SmartScreen ---
   Une illustration, pas une capture : elle montre où cliquer sans alourdir
   la page d'une image, et suit le thème du site. --- */
.smartscreen {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.ss-fenetre {
  padding: 13px 15px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-solid);
  box-shadow: var(--shadow-raised);
}

.ss-titre {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
}

.ss-corps {
  margin-top: 4px;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--text-tertiary);
}

.ss-lien {
  margin-top: 9px;
  font-size: 0.78rem;
  color: var(--accent);
}

.ss-boutons {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 11px;
}

.ss-bouton {
  padding: 5px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  font-size: 0.75rem;
  color: var(--text-secondary);
  background: var(--surface-muted);
}

/* Les deux seuls éléments sur lesquels cliquer, cerclés comme sur une notice. */
.ss-cible {
  display: inline-block;
  border-radius: 6px;
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.smartscreen figcaption {
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.smartscreen figcaption strong {
  font-weight: 600;
  color: var(--text-primary);
}

.dl-etape {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  margin-right: 2px;
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-inverse);
  background: var(--accent);
}

/* --- Les trois outils --- */
.dl-outils {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}

/* Icône à gauche du texte plutôt qu'au-dessus : la même carte, 60 px de moins
   en hauteur — de quoi faire tenir la section sur un portable 720 px. */
.dl-outils .card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 13px;
  padding: 15px 17px;
}

.dl-outils .card-icon {
  grid-row: span 2;
  align-self: start;
  width: 32px;
  height: 32px;
  margin-bottom: 0;
  border-radius: 10px;
}

.dl-outils .card-icon svg {
  width: 18px;
  height: 18px;
}

.dl-outils .card h3 {
  align-self: center;
  font-size: 1rem;
}

.dl-outils .card p {
  margin-top: 3px;
  font-size: 0.89rem;
  line-height: 1.5;
}

.dl-note {
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--text-tertiary);
}

/* Réservée au mode défilement, où l'encadré d'avertissement n'a plus lieu
   d'être. Sur grand écran, on est déjà sur la machine qui installera. */
.dl-plateforme {
  display: none;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* ==========================================================================
   13. Questionnaire
   ========================================================================== */
.parcours {
  width: 100%;
  max-width: 780px;
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 26px 34px 24px;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-card);
  background: var(--surface-card);
  backdrop-filter: blur(40px) saturate(150%);
  -webkit-backdrop-filter: blur(40px) saturate(150%);
  box-shadow: var(--shadow-card);
}

/* --- Progression --- */
.survey-progress {
  display: flex;
  align-items: center;
  gap: 16px;
}

.survey-progress-track {
  flex: 1;
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--line-soft);
  overflow: hidden;
}

.survey-progress-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--ink);
  transition: width 0.6s var(--ease-apple);
}

.survey-step {
  flex-shrink: 0;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* --- Une étape --- */
.form-besoin {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.etape {
  display: flex;
  flex-direction: column;
  gap: 18px;
  animation: fade-in-up 0.4s var(--ease-apple);
}

/* `display: flex` l'emporterait sur l'attribut `hidden` : sans cette règle,
   les six étapes s'affichent d'un coup. */
.etape[hidden] {
  display: none;
}

.etape-titre {
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.etape-aide {
  margin-top: -12px;
  font-size: 0.93rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

.champ {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.champ-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.champ-saisie {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius-field);
  font-family: inherit;
  font-size: 0.97rem;
  color: var(--text-primary);
  background: var(--surface-solid);
  resize: vertical;
  transition: border-color 0.25s var(--ease-apple), box-shadow 0.25s var(--ease-apple);
}

.champ-saisie:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.champ-autre {
  display: block;
  margin-top: 2px;
}

/* --- Pastilles ---
   De vrais boutons radio et cases à cocher, seulement habillés : le clavier,
   le lecteur d'écran et le groupement natif fonctionnent sans qu'on ait à les
   réécrire, et l'état coché tient dans une seule règle. --- */
.pastilles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pastille {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 9px 17px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.62);
  cursor: pointer;
  transition: all 0.25s var(--ease-apple);
}

/* La commande reste focalisable et annoncée : elle est rendue invisible,
   jamais retirée de l'arbre d'accessibilité. */
.pastille input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.pastille:hover {
  border-color: var(--line-strong);
  background: var(--surface-solid);
}

.pastille:has(input:checked) {
  color: var(--text-inverse);
  border-color: var(--ink);
  background: var(--ink);
}

.pastille:has(input:focus-visible) {
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* --- Curseurs --- */
.curseur-ligne {
  display: flex;
  align-items: center;
  gap: 16px;
}

.curseur-ligne .roi-curseur {
  flex: 1;
}

.curseur-valeur {
  flex-shrink: 0;
  min-width: 9.5em;
  text-align: right;
  font-size: 0.97rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

/* --- Le calcul, en direct ---
   C'est le moment qui décide : le montant bouge pendant qu'on règle les
   curseurs, sans rien attendre d'un service extérieur. --- */
.calcul {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 16px 20px;
  border: 1px solid rgba(0, 113, 227, 0.18);
  border-radius: var(--radius-panel);
  background: var(--accent-soft);
}

.calcul-libelle {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.calcul-temps {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
}

.calcul-argent {
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--text-primary);
}

.calcul-base {
  margin-top: 5px;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--text-tertiary);
}

.lien-texte {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.lien-texte:hover {
  opacity: 0.75;
}

/* --- Récapitulatif de la dernière étape --- */
/* Pas d'encadré dans l'encadré : la carte du questionnaire suffit. Le
   récapitulatif est une liste, tenue par deux filets — plus plat, donc
   plus calme. */
.form-recap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 13px 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

.recap-titre {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.summary-fields {
  display: grid;
  grid-template-columns: minmax(120px, auto) 1fr;
  gap: 7px 20px;
  font-size: 0.92rem;
}

.summary-fields dt {
  font-weight: 500;
  color: var(--text-tertiary);
}

.summary-fields dd {
  color: var(--text-primary);
}

/* Les deux dernières lignes sont celles qui emportent la décision : le temps
   rendu et ce qu'il vaut. Un filet les sépare du relevé, et la couleur
   d'accent les fait sortir de la liste. */
.summary-fields dt[data-key="gainTemps"],
.summary-fields dd[data-key="gainTemps"] {
  margin-top: 4px;
  padding-top: 11px;
  border-top: 1px solid var(--line-soft);
}

.summary-fields dd[data-key^="gain"] {
  font-weight: 600;
  color: var(--text-primary);
}

.summary-fields dd[data-key="gainArgent"] {
  font-size: 1.1rem;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

/* La dernière étape porte le récapitulatif ET les coordonnées : c'est la plus
   haute. Les deux champs facultatifs, qui sont courts, partagent une ligne. */
/* --- La dernière étape, en deux colonnes ---
   Elle porte le récapitulatif ET les coordonnées. Empilés, ils formaient un
   ruban de 440 px qui débordait de la carte. Côte à côte, on voit ce qu'on a
   répondu pendant qu'on saisit son adresse — et tout tient sans défilement.

   `:not([hidden])` est indispensable : `:has()` emprunte la spécificité de
   son argument, et un identifiant l'emporte sur `.etape[hidden]`. Sans lui,
   cette étape resterait affichée en permanence, sous la première. --- */
.etape:not([hidden]):has(#form-recap) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 14px 26px;
}

/* Par défaut tout occupe la largeur : titre, message d'erreur, commandes. */
.etape:not([hidden]):has(#form-recap) > * {
  grid-column: 1 / -1;
}

/* Le récapitulatif tient la colonne de gauche sur toute la hauteur des
   champs qui lui font face. */
.etape:not([hidden]):has(#form-recap) .form-recap {
  grid-column: 1;
  grid-row: 3 / span 4;
}

.etape:not([hidden]):has(#form-recap) .champ[data-nom="email"],
.etape:not([hidden]):has(#form-recap) .champ[data-nom="company"],
.etape:not([hidden]):has(#form-recap) .champ[data-nom="telephone"],
.etape:not([hidden]):has(#form-recap) .champ[data-nom="contact"] {
  grid-column: 2;
}

/* --- Commandes --- */
.form-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Le bouton d'avancée reste le plus à droite, que « Retour » soit affiché ou
   non : la cible ne se déplace pas d'une étape à l'autre. */
.form-actions .btn-primary {
  margin-left: auto;
}

.form-error {
  font-size: 0.88rem;
  color: var(--danger);
}

.form-legal {
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--text-tertiary);
}

/* --- Phases --- */
.survey-done {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 13px;
  padding: 26px 0 12px;
  text-align: center;
  animation: fade-in-up 0.5s var(--ease-apple);
}

.survey-done h3 {
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.survey-done p {
  font-size: 0.95rem;
  color: var(--text-secondary);
}

/* Le lien de réservation suit la confirmation : c'est le moment où le
   prospect est le plus disposé à poser une date. */
.survey-done .btn-primary {
  margin-top: 4px;
}

.done-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  color: var(--accent);
  background: var(--accent-soft);
}

.done-badge svg {
  width: 24px;
  height: 24px;
}

/* Pendant la transmission, le formulaire reste visible mais inerte : le
   visiteur voit ce qu'il vient d'écrire plutôt qu'un écran vide. */
.parcours[data-phase="envoi"] .form-besoin {
  opacity: 0.55;
  pointer-events: none;
}

.parcours[data-phase="envoye"] .form-besoin,
.parcours[data-phase="envoye"] .survey-progress,
.parcours[data-phase="envoye"] .form-legal {
  display: none;
}

.parcours[data-phase="envoye"] .survey-done {
  display: flex;
}

/* ==========================================================================
   14. Vidéo — diapositive du deck et page autonome
   ========================================================================== */

/* --- Diapositive : un titre bref, puis le film, rien d'autre --- */
.video-slide {
  gap: 22px;
}

.video-slide-head {
  flex-shrink: 0;
  text-align: center;
  max-width: none;
}

/* Le conteneur absorbe la hauteur restante ; le lecteur s'y inscrit sans
   jamais déformer le 16/9. Poser `min-height: 0` sur le lecteur lui-même le
   laisserait se réduire à zéro, puisqu'un élément flex se rétracte par défaut. */
.video-stage {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.video-page .video-stage {
  padding-top: 28px;
}

.video-page {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 28px var(--gutter) 40px;
}

/* Commun aux pages autonomes : vidéo et logiciel. */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-shrink: 0;
}

/* Le lecteur occupe toute la place restante, sans jamais déborder ni sur la
   largeur ni sur la hauteur : le format 16:9 est préservé dans les deux sens. */
/* --- Le lecteur, partagé par la diapositive et la page autonome --- */
.video-player {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-card);
  background: var(--ink);
  box-shadow: var(--shadow-card);
}

@media (max-width: 900px) {
  .video-page {
    padding: 20px var(--gutter) 28px;
  }

  .video-player {
    border-radius: 18px;
  }
}

/* --- Page autonome qui défile (le logiciel) ---
   La page vidéo occupe exactement l'écran ; celle-ci est plus haute que lui et
   doit donc défiler normalement. Elle ne porte aucune classe sur `html` : rien
   ne verrouille sa hauteur. --- */
.page-autonome {
  position: relative;
  z-index: 2;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding: 28px var(--gutter) 0;
}

.page-corps {
  width: 100%;
  max-width: var(--content-width);
  margin: 0 auto;
  flex: 1;
}

.page-pied {
  max-width: var(--content-width);
  width: 100%;
  margin: 0 auto;
  padding: 22px 0 28px;
  border-top: 1px solid var(--line-soft);
}

/* ==========================================================================
   15. Pages légales (documents autonomes, sans deck ni fond animé)
   ========================================================================== */
.legal-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px var(--gutter) 80px;
}

.legal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 28px;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--line-soft);
}

.legal-page h1 {
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.028em;
}

.legal-updated {
  margin-top: 10px;
  font-size: 0.88rem;
  color: var(--text-tertiary);
}

.legal-page h2 {
  margin-top: 44px;
  margin-bottom: 14px;
  font-size: 1.22rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.legal-page h3 {
  margin-top: 26px;
  margin-bottom: 8px;
  font-size: 1.02rem;
  font-weight: 600;
}

.legal-page p,
.legal-page li {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

.legal-page p + p {
  margin-top: 14px;
}

.legal-page ul {
  margin-top: 12px;
  padding-left: 0;
  list-style: none;
}

.legal-page li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 8px;
}

.legal-page li::before {
  content: "";
  position: absolute;
  top: 0.7em;
  left: 4px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--line-strong);
}

.legal-page a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.legal-page a:hover {
  border-bottom-color: currentColor;
}

.legal-page strong {
  color: var(--text-primary);
  font-weight: 600;
}

/* Blocs d'identité : intitulé à gauche, valeur à droite. */
.legal-facts {
  display: grid;
  grid-template-columns: minmax(160px, auto) 1fr;
  gap: 10px 24px;
  margin-top: 16px;
  padding: 22px 24px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-panel);
  background: rgba(255, 255, 255, 0.6);
  font-size: 0.96rem;
}

.legal-facts dt {
  font-weight: 500;
  color: var(--text-tertiary);
}

.legal-facts dd {
  color: var(--text-primary);
}

/* Marqueur volontairement voyant : ces valeurs doivent être renseignées
   avant toute mise en ligne réelle. */
.todo {
  display: inline-block;
  padding: 1px 8px;
  border: 1px dashed #b8860b;
  border-radius: 6px;
  font-size: 0.9em;
  font-weight: 500;
  color: #7a5c07;
  background: #fdf6e3;
}

.legal-callout {
  margin-top: 20px;
  padding: 18px 22px;
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-field) var(--radius-field) 0;
  background: var(--accent-soft);
}

.legal-callout p {
  color: var(--text-primary);
}

.legal-footer {
  margin-top: 60px;
  padding-top: 26px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  font-size: 0.85rem;
  color: var(--text-tertiary);
}

.legal-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

@media (max-width: 640px) {
  .legal-facts {
    grid-template-columns: 1fr;
    gap: 2px 0;
  }

  .legal-facts dd {
    margin-bottom: 12px;
  }
}

/* ==========================================================================
   16. Animations
   ========================================================================== */
@keyframes fade-in-down {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slide-in {
  from { opacity: 0; transform: translateX(10px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

@keyframes pulse {
  0%, 100% { opacity: 0.5; transform: scale(0.8); }
  50%      { opacity: 1;   transform: scale(1.2); }
}

/* ==========================================================================
   17. Petits écrans
   ========================================================================== */
/* Écrans bas : le panneau se resserre plutôt que de faire défiler la section. */
@media (max-height: 800px) {
  .section-card {
    gap: 16px;
    padding: 22px 30px;
  }

  .section-head {
    max-width: 720px;
  }

  /* Le titre est le plus gros poste de hauteur : il donne le plus en cédant. */
  .section-title {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
  }

  .section-lead {
    margin-top: 10px;
    font-size: 0.97rem;
  }

  .demo {
    gap: 16px;
  }

  .demo-panel-text {
    min-height: 4.2em;
  }

  .dl-grid {
    gap: 18px;
  }

  .dl-action {
    gap: 12px;
  }

  .dl-alerte {
    gap: 6px;
    padding: 13px 15px;
  }

  .smartscreen {
    gap: 7px;
  }

  #telechargement {
    gap: 13px;
  }

  .dl-outils .card {
    padding: 13px 15px;
  }

  .ss-fenetre {
    padding: 11px 13px 10px;
  }

  .ss-lien {
    margin-top: 7px;
  }

  .ss-boutons {
    margin-top: 8px;
  }

  /* Le questionnaire est le panneau le plus chargé, et celui où le visiteur
     décide : les commandes doivent rester visibles sans défilement. */
  .parcours {
    gap: 13px;
    padding: 18px 22px 16px;
  }

  .form-besoin,
  .etape {
    gap: 13px;
  }

  .summary-fields {
    gap: 5px 20px;
  }

  .calcul-argent {
    font-size: 1.6rem;
  }

  /* La rentabilité : ajustement fin sur écrans bas */
  #slide-rentabilite .section-card {
    padding: 18px 26px 16px;
    gap: 12px;
  }

  .roi-grid {
    gap: 16px;
  }

  .roi-cockpit {
    padding: 12px 16px;
    gap: 8px;
  }

  .roi-controle {
    gap: 6px;
  }

  .roi-valeur {
    font-size: 1.25rem;
  }

  .roi-graphe {
    height: 104px;
    max-height: 112px;
  }

  .roi-hero-card {
    padding: 14px 18px;
    gap: 4px;
  }

  .roi-hero-amount {
    font-size: 1.95rem;
    margin: 2px 0;
  }

  .roi-hero-caption {
    font-size: 0.78rem;
  }

  .roi-subcards {
    gap: 8px;
  }

  .roi-subcard {
    padding: 8px 12px;
  }

  .roi-subcard-value {
    font-size: 1.02rem;
  }
}

@media (max-width: 900px) {
  .dl-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  :root {
    --gutter: 22px;
    --header-height: 76px;
  }

  .btn-back span,
  .btn-menu-libelle {
    display: none;
  }

  .btn-menu {
    margin-right: 8px;
    padding: 8px 11px;
  }

  .btn-back {
    margin-right: 10px;
    padding: 8px 10px;
  }

  /* Seul le bouton d'action subsiste : il doit rester compact et sur une ligne. */
  .btn-nav {
    margin-left: 0;
    padding: 8px 16px;
    font-size: 0.86rem;
    white-space: nowrap;
  }

  .deck-dots {
    right: 12px;
  }

  .survey {
    padding: 24px 20px;
    border-radius: 22px;
  }

  .slide-content {
    gap: 24px;
  }
}

@media (max-width: 640px) {
  .deck-dots {
    display: none;
  }

  .section-cta .btn-compact {
    width: 100%;
  }

  .site-footer {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }

  .hero-actions {
    flex-direction: column;
    width: 100%;
  }

  .hero-actions button {
    width: 100%;
  }

  .summary-fields {
    grid-template-columns: 1fr;
    gap: 4px 0;
  }

  .summary-fields dd {
    margin-bottom: 8px;
  }

  /* Pleine largeur, et le libellé se raccourcit : « pour Windows » tiendrait
     sur une seconde ligne, alors que la ligne juste en dessous le redit. */
  /* Côte à côte, le champ tomberait sous les 200 px utiles. */
  .fondateurs {
    grid-template-columns: 1fr;
  }

  .dl-capture-ligne {
    flex-direction: column;
  }

  .btn-download {
    width: 100%;
  }

  .btn-download-os {
    display: none;
  }

  /* Empilés, l'intitulé et la valeur porteraient chacun leur filet. */
  .summary-fields dd[data-key="gainTemps"] {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }
}

/* Portables 1366x768 : la fenêtre utile tombe à ~640 px. Toutes les autres
   sections y tiennent, celle du logiciel doit y tenir aussi. Ce bloc suit
   celui des 800 px, sinon il serait écrasé par lui. */
@media (max-height: 640px) {
  #telechargement {
    gap: 11px;
  }

  .dl-outils .card {
    padding: 11px 14px;
  }

  .dl-outils .card p {
    font-size: 0.85rem;
  }

  .dl-note {
    font-size: 0.8rem;
  }

  .ss-corps {
    margin-top: 3px;
  }

  .ss-boutons {
    margin-top: 7px;
  }

  /* Les huit entrées du panneau doivent tenir sans défilement : un menu qu'on
     fait glisser pour en voir le bout n'en est plus tout à fait un. */
  .menu-panneau {
    padding-top: calc(var(--header-height) + 4px);
    padding-bottom: 16px;
  }

  .menu-entree {
    padding: 8px 16px;
  }

  .menu-titre {
    font-size: 1.15rem;
  }

  .menu-resume {
    font-size: 0.85rem;
  }

  /* L'encadré devient le poste le plus haut de la section : c'est lui qui
     doit céder les derniers pixels. */
  /* La dernière étape du questionnaire est son état le plus haut : c'est
     elle qui décide si une barre apparaît. */
  .parcours {
    gap: 10px;
    padding: 14px 20px 12px;
  }

  .form-besoin {
    gap: 11px;
  }

  .etape:not([hidden]):has(#form-recap) {
    gap: 10px 20px;
  }

  .form-recap {
    gap: 6px;
    padding: 10px 0;
  }

  .summary-fields {
    gap: 4px 16px;
  }

  .form-legal {
    font-size: 0.74rem;
  }

  /* Trois pixels de trop à 1366x640 : assez pour une barre de défilement. */
  #slide-rentabilite .section-card {
    padding: 14px 26px 12px;
    gap: 10px;
  }

  .dl-alerte {
    gap: 5px;
    padding: 11px 14px;
  }

  .ss-fenetre {
    padding: 9px 12px 9px;
  }

  .smartscreen {
    gap: 6px;
  }
}

/* ==========================================================================
   18. Mode défilement — téléphones et fenêtres basses
   ==========================================================================
   Le deck cesse d'être un deck : les sections s'empilent et la page défile.
   Sur un écran de téléphone, une diapositive plein écran oblige à faire
   défiler l'intérieur d'une section pendant que le glissement sert déjà à en
   changer — deux gestes pour un seul doigt. Ici, il n'y en a plus qu'un.

   ⚠ Requête identique à REQUETE_DEFILEMENT dans config.js : deck.js s'y
     accorde pour cesser d'intercepter la molette, le glissement et les
     flèches. Modifier l'une sans l'autre casserait la navigation.
   ========================================================================== */
@media (max-width: 820px), (max-height: 680px) {
  html.deck,
  html.deck body {
    height: auto;
    overflow: visible;
  }

  /* `100vw` compte la barre de défilement, qui n'existait pas tant que la page
     ne défilait pas : la largeur dépassait désormais de sa largeur exacte, et
     la page glissait latéralement. */
  .deck-viewport {
    width: 100%;
    height: auto;
    overflow: visible;
  }

  .deck-track {
    transform: none;
    transition: none;
    will-change: auto;
  }

  /* La section prend la hauteur de son contenu, ni plus ni moins : plus rien
     à comprimer, plus rien à faire défiler à l'intérieur. */
  .slide-section {
    flex: 0 0 auto;
    min-height: 0;
    width: 100%;
    /* L'en-tête est fixe : sans cette marge, une section visée par le panneau
       viendrait se ranger dessous. */
    scroll-margin-top: calc(var(--header-height) - 8px);
  }

  .slide-inner {
    height: auto;
    overflow: visible;
    justify-content: flex-start;
    padding: 30px var(--gutter) 34px;
  }

  .slide-content {
    justify-content: flex-start;
    gap: 20px;
  }

  /* Seule la première section réserve la place de l'en-tête au-dessus d'elle. */
  #slide-hero .slide-inner {
    padding-top: calc(var(--header-height) + 16px);
  }

  /* Flottant au-dessus de diapositives centrées, l'en-tête n'avait besoin
     d'aucun fond. Sur une page qui défile, le texte lui passe dessous.
     Un fond plein tracé jusqu'à un filet donnait un bandeau blanc coupé net.
     Le voile est donc porté par un calque en dégradé, dont le flou est fondu
     par le même masque : il s'éteint au lieu de s'arrêter. Le calque est un
     pseudo-élément et non l'en-tête lui-même, sinon le masque emporterait
     aussi la marque et les boutons. */
  .site-header::before {
    content: "";
    position: absolute;
    /* Le voile couvre l'en-tête en plein, puis déborde de 26 px en dessous :
       le fondu se joue entièrement dans ce débord. Dégradé sur toute la
       hauteur, le texte qui passait sous la moitié basse de l'en-tête n'était
       ni flouté ni voilé — il s'y lisait en filigrane, comme une trace. */
    /* Le voile s'arrête au bas de l'en-tête : il débordait de 22 px en dessous,
       et venait mordre sur le titre. Le fondu se joue donc dans les 16 derniers
       pixels de l'en-tête lui-même — plus court, et plus rien en dessous. */
    inset: -1px 0 0;
    z-index: -1;
    pointer-events: none;
    background: rgba(251, 251, 253, 0.9);
    backdrop-filter: blur(20px) saturate(145%);
    -webkit-backdrop-filter: blur(20px) saturate(145%);
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 16px), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 16px), transparent 100%);
  }

  .site-header {
    gap: 12px;
  }

  /* Rendu à la fin du document, il reprend l'allure d'un vrai pied de page. */
  .site-footer {
    padding: 26px var(--gutter) 34px;
    border-top: 1px solid var(--line-soft);
  }

  /* --- Largeur utile ---
     Les cartes s'emboîtaient : gouttière 22, carte de section 34, panneau
     intérieur 18. Il ne restait que 263 px de texte sur un écran de 375, d'où
     des paragraphes en colonne étroite et des pastilles seules sur leur ligne.
     En rognant les deux premiers niveaux, le texte récupère une cinquantaine
     de pixels — presque une ligne de gagnée à chaque paragraphe. */
  :root {
    --gutter: 16px;
    /* Le voile épouse l'en-tête : le raccourcir le raccourcit d'autant.
       Les boutons font 40 px, il reste 14 px de marge de part et d'autre. */
    --header-height: 68px;
  }

  .section-card {
    padding: 20px 16px;
    border-radius: 22px;
  }

  /* --- Titres ---
     `3.6vw` ne donne plus rien d'utile sous 400 px : le titre tombait au
     minimum de la fourchette, calibré pour un grand écran. */
  .section-title {
    font-size: 1.55rem;
    line-height: 1.18;
  }

  .section-lead {
    margin-top: 10px;
    font-size: 0.95rem;
    line-height: 1.5;
  }

  .section-eyebrow {
    margin-bottom: 8px;
    font-size: 0.72rem;
  }

  /* --- Sélecteurs en rail ---
     Un libellé comme « Plomberie & chauffage » fait 170 px : deux n'ont jamais
     tenu sur une ligne, et le retour à la ligne les empilait une par une. En
     rail horizontal ils tiennent sur une seule, comme les filtres d'une
     application. Les marges négatives font courir le rail jusqu'au bord de la
     carte, sinon la dernière pastille paraîtrait coupée par une marge. */
  .demo-trades,
  .roi-reperes {
    flex-wrap: nowrap;
    overflow-x: auto;
    /* Sans `min-width: 0`, un enfant de flex ou de grille refuse de passer
       sous la largeur de son contenu : au lieu de défiler, le rail élargissait
       toute la carte et la poussait hors de l'écran. */
    min-width: 0;
    scrollbar-width: none;
  }

  /* Chaque rail court jusqu'au bord de son contenant, faute de quoi la
     dernière pastille paraît tranchée au milieu d'une marge — un défaut,
     pas une invitation à faire glisser. Les valeurs sont fixées ici pour que
     le débord corresponde exactement au rembourrage. */
  .demo-trades {
    margin-inline: -16px;
    padding-inline: 16px;
  }

  .roi-cockpit {
    padding: 14px 16px;
  }

  .roi-reperes {
    margin-inline: -16px;
    padding-inline: 16px;
  }

  /* La chaîne entière doit accepter de rétrécir, sinon le débordement remonte
     de parent en parent jusqu'à la carte. */
  .roi-grid,
  .roi-cockpit,
  .roi-controle,
  .roi-subcards {
    min-width: 0;
  }

  .demo-trades::-webkit-scrollbar,
  .roi-reperes::-webkit-scrollbar {
    display: none;
  }

  .demo-trade,
  .roi-repere {
    flex: none;
    white-space: nowrap;
  }

  /* --- Listes de cartes ---
     Icône au-dessus du titre, une carte mesurait 130 px pour trois lignes de
     texte. À gauche du titre, elle en mesure 80 : quatre cartes empilées
     gagnent 200 px, sans qu'un mot disparaisse. */
  .card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 13px;
    padding: 14px 16px;
  }

  .card-icon {
    grid-row: span 2;
    align-self: start;
    width: 30px;
    height: 30px;
    margin-bottom: 0;
  }

  .card-icon svg {
    width: 17px;
    height: 17px;
  }

  .card h3 {
    align-self: center;
    font-size: 0.98rem;
  }

  .card p {
    margin-top: 3px;
    font-size: 0.88rem;
    line-height: 1.45;
  }

  .card-grid {
    gap: 10px;
  }

  /* Même traitement pour les étapes : le numéro passe en regard du titre. */
  .steps {
    gap: 10px;
  }

  .step {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 12px;
    gap: 0 12px;
    padding: 12px 2px 14px;
  }

  .step-index {
    align-self: center;
  }

  .step h3 {
    font-size: 0.98rem;
  }

  .step p {
    margin-top: 3px;
    font-size: 0.88rem;
    line-height: 1.45;
  }

  .step-meta {
    margin-top: 7px;
  }

  /* --- Le questionnaire ---
     Le panneau se resserre et les pastilles descendent d'un cran : une étape
     doit tenir sur un écran, sinon la commande « Continuer » naît sous le
     bord et on croit le formulaire fini. */
  .parcours {
    padding: 18px 16px 16px;
    border-radius: 22px;
  }

  .etape-titre {
    font-size: 1.2rem;
  }

  .pastille {
    padding: 8px 14px;
    font-size: 0.88rem;
  }

  .curseur-ligne {
    flex-direction: column;
    align-items: stretch;
    gap: 7px;
  }

  /* Deux colonnes seraient trop étroites ici, et la page défile de toute façon. */
  /* Deux colonnes seraient trop étroites ici, et la page défile de toute
     façon. Les placements explicites doivent tomber avec elles, sinon la
     colonne 2 renaît en colonne implicite. */
  .etape:not([hidden]):has(#form-recap) {
    grid-template-columns: 1fr;
  }

  /* Les sélecteurs doivent égaler ceux qu'ils annulent : `> *` pesait moins
     que `.champ[data-nom=…]`, et la colonne 2 survivait. */
  .etape:not([hidden]):has(#form-recap) .form-recap,
  .etape:not([hidden]):has(#form-recap) .champ[data-nom="email"],
  .etape:not([hidden]):has(#form-recap) .champ[data-nom="company"],
  .etape:not([hidden]):has(#form-recap) .champ[data-nom="telephone"],
  .etape:not([hidden]):has(#form-recap) .champ[data-nom="contact"] {
    grid-column: 1;
    grid-row: auto;
  }

  .curseur-valeur {
    text-align: left;
  }

  /* --- Téléchargement ---
     Un téléphone n'installe pas une application Windows. Tout ce qui décrit
     l'installation s'efface donc : l'avertissement SmartScreen, sa marche à
     suivre et la note du premier lancement décrivent des moments qui
     n'arriveront pas ici. Ils reviennent en entier sur l'ordinateur, avant le
     clic qui compte — rien n'est caché à qui s'apprête à installer.
     À la place, la seule chose utile ici : où ça s'installe. */
  .dl-alerte,
  .dl-note {
    display: none;
  }

  .dl-plateforme {
    display: block;
  }

  /* --- Rentabilité ---
     « 6 h × 47 sem. × 28 € = 7 896 € / an » répète le montant que la carte
     « Valeur annuelle créée » affiche trois lignes plus bas. Sur grand écran
     les deux se lisent d'un coup d'œil ; empilés, c'est deux fois la même
     chose à lire. La ligne « Base : … » conserve d'où viennent les chiffres. */
  .roi-calcul-wrap {
    display: none;
  }

  /* Le graphique de rentabilité disparaît. Sur 280 px de large, ses libellés
     — « Mise en service », « Remboursé au 4ᵉ mois », « 12 mois » — ne se
     lisent plus : il n'illustre plus rien, il occupe. Les montants juste en
     dessous portent seuls la démonstration, et mieux. */
  .roi-visual {
    display: none;
  }

  /* Les pastilles supposaient un nombre fini d'écrans : sur une page qui
     défile, la barre du navigateur dit déjà où l'on en est. */
  .deck-dots {
    display: none;
  }

  html {
    scroll-behavior: smooth;
  }
}

/* Sous 480 px, le monogramme porte seul la marque : le mot « Derovia » coûtait
   93 px, soit précisément ce qui manquait à l'appel à l'action pour tenir sur
   la ligne. Le monogramme ramène toujours à l'accueil, et le nom reste écrit
   dans le titre comme dans le pied de page. */
@media (max-width: 480px) {
  .btn-logiciel {
    display: none;
  }

  .btn-tel-numero {
    display: none;
  }

  .btn-tel {
    padding: 8px 11px;
  }

  .brand-name {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Respect de la préférence système « animations réduites ». */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}