/* =================================================================
   Bâltio — Design System v3 "ARRÊTE."
   Direction de marque : tutoiement, phrases courtes, énergie de
   story Instagram — blocs de couleur pleine page (encre / orange),
   typographie d'impact pour les titres, voix directe pour le corps.
   ================================================================= */

/* -------------------------------------------------- *
 * 0. Polices — IBM Plex Sans (corps, self-hostée) +
 *    Archivo Black (titres d'impact, self-hostée)
 * -------------------------------------------------- */
@font-face {
  font-family: "IBM Plex Sans Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 700;
  src: url("/assets/fonts/ibm-plex-sans-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo Black";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("/assets/fonts/archivo-black-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

/* -------------------------------------------------- *
 * 1. Design tokens
 * -------------------------------------------------- */
:root {
  /* Palette — dossier de chantier : papier chaud, encre, un seul accent.
     Plus aucune teinte froide (bleu-gris) : tout est réchauffé pour évoquer
     le papier et l'encre plutôt que l'écran. */
  --paper:      #fbf9f5;   /* fond principal — papier, jamais blanc pur */
  --surface:    #f2ede4;   /* fond alterné — papier légèrement jauni, pas gris-bleu */
  --anthracite: #1c1a17;   /* encre — un seul aplat sombre dans toute la page */
  --ink:        #201d19;   /* texte principal — noir chaud, jamais #000 */
  --ink-soft:   #4d473d;   /* texte secondaire */
  --muted:      #766f61;   /* texte tertiaire — sert aussi de bordure pour tout
                               composant interactif dont le contour est l'unique
                               indice d'affordance (ex. bouton fantôme) */
  /* --accent = couleur d'énergie de la marque (cf. matériel de com : blocs
     oranges pleine page, mots surlignés, badge de prix). Utilisé largement,
     pas réservé à l'andamio — la doc produit reste vraie dans l'appli elle-même. */
  --accent:       #ea580c;
  --accent-deep:  #c2410c;
  /* Bleu fonctionnel — hérité de l'appli réelle (« Aujourd'hui », liens actifs,
     « S'abonner maintenant »). C'est la seule couleur de marque secondaire :
     CTA secondaires, liens, emphase de texte. Le noir reste l'action primaire
     (dans l'appli, « Nouveau chantier » est un bouton noir, pas bleu). */
  --accent-blue:      #2555a6;
  --accent-blue-deep: #1e478f;
  --line:       #e2dcd0;   /* bordure — trait fin, jamais de bordure décorative
                               en couleur */

  --on-dark:      #f7f4ee;
  --on-dark-soft: #b8b0a0;

  --success:      #3d6b45;
  --success-soft: #e9efe6;

  /* Typographie — IBM Plex Sans pour le corps (lisible, discret),
     Archivo Black pour les titres d'impact (la voix qui crie "ARRÊTE."). */
  --font: "IBM Plex Sans Variable", "IBM Plex Sans", -apple-system, "Segoe UI",
          system-ui, Roboto, Arial, sans-serif;
  --font-display: "Archivo Black", "IBM Plex Sans Variable", var(--font);

  --fs-xs:   0.8125rem;                       /* 13px — mentions légales */
  --fs-sm:   0.9375rem;                       /* 15px — légendes, labels */
  --fs-base: 1.0625rem;                       /* 17px — corps de texte */
  --fs-md:   1.1875rem;                       /* 19px — lead */
  --fs-lg:   1.5625rem;                       /* 25px — h3 */
  --fs-xl:   clamp(1.875rem, 1.6rem + 1.2vw, 2.125rem);  /* 30-34px — h2 mobile */
  --fs-2xl:  clamp(2.5rem, 1.9rem + 2.8vw, 3.25rem);     /* 40-52px — h2 desktop */
  --fs-hero: clamp(2.75rem, 1.7rem + 5vw, 5.5rem);       /* 44-88px — h1, impact */

  --measure: 60ch; /* colonne de lecture unique, tout le site */

  /* Espacement */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;
  --sp-11: 10rem;

  /* Rayons — coins ronds et confiants, comme les cartes du matériel
     de com (cover story, badge de prix). */
  --r-card: 20px;
  --r-btn: 10px;
  --r-shot: 16px;

  /* Ombres — une seule valeur, portée courte, jamais un halo.
     Sert uniquement à détacher la capture produit du papier, comme une
     feuille physique surélevée de quelques millimètres. */
  --shadow-sm: 0 1px 2px rgba(32, 29, 25, 0.06);
  --shadow-md: 0 1px 2px rgba(32, 29, 25, 0.06);
  --shadow-shot: 0 1px 2px rgba(32, 29, 25, 0.05), 0 12px 28px rgba(32, 29, 25, 0.10);
  --shadow-shot-hover: 0 1px 2px rgba(32, 29, 25, 0.05), 0 12px 28px rgba(32, 29, 25, 0.10);

  --container: 1140px;
  --container-narrow: 760px;

  /* Rythme des sections */
  --pad-normal:   clamp(4rem, 8vw, 6rem);
  --pad-destacada: clamp(5rem, 10vw, 8rem);
  --pad-respiro:  clamp(6rem, 12vw, 10rem);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* -------------------------------------------------- *
 * 2. Reset & base
 * -------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 86px; /* header 70px + 16px de respiration */
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variation-settings: "wght" 400;
}

h1, h2, h3 {
  margin: 0 0 var(--sp-4);
  line-height: 0.98;
  letter-spacing: -0.01em;
  font-family: var(--font-display);
  font-weight: 400; /* Archivo Black n'a qu'une graisse : elle EST le gras */
  color: var(--ink);
  text-wrap: balance;
}
h4 { margin: 0 0 var(--sp-4); line-height: 1.15; font-weight: 700; color: var(--ink); text-wrap: balance; }
h1 { font-size: var(--fs-hero); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-lg); line-height: 1.1; }
h4 { font-size: var(--fs-md); }

p { margin: 0 0 var(--sp-4); }
a { color: inherit; text-decoration: none; }

img, svg { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.2rem; }
li { margin-bottom: var(--sp-2); }

strong { font-weight: 600; color: var(--ink); }

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

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: 0.75rem 1.25rem;
  z-index: 1000;
  border-radius: 0 0 var(--r-card) 0;
}
.skip-link:focus { left: 0; }

/* -------------------------------------------------- *
 * 3. Layout utilitaires
 * -------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-5);
}
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--pad-normal); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section--destacada { padding-block: var(--pad-destacada); }
.section--respiro { padding-block: var(--pad-respiro); }

.section--dark {
  background: var(--anthracite);
  color: var(--on-dark);
}
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }
.section--dark p { color: var(--on-dark-soft); }

.section--surface { background: var(--surface); }

/* Bloc orange plein écran — le coup de poing visuel du matériel de marque
   (slide "Un endroit. Toute la vérité.", badge de prix "Point final."). */
.section--accent {
  background: var(--accent);
  color: #fff;
}
.section--accent h1, .section--accent h2, .section--accent h3, .section--accent h4 { color: #fff; }
.section--accent p { color: rgba(255,255,255,.82); }
/* La carte .plan reste claire même posée sur l'orange : TOUT son texte
   revient aux encres normales (le blanc hérité du bloc la rendrait
   illisible — vu en prod sur "Prix par artisan individuel"). */
.section--accent .plan h3, .section--accent .plan .amount { color: var(--ink); }
.section--accent .plan p { color: var(--ink-soft); }
.section--accent .plan .plan-desc,
.section--accent .plan .price-sub,
.section--accent .plan .per { color: var(--muted); }
.section--accent .section-head p { color: rgba(255,255,255,.85); }
.section--accent .btn--primary { --btn-bg: var(--ink); --btn-fg: #fff; }
.section--accent .btn--ghost { --btn-fg: #fff; border-color: rgba(255,255,255,.5); }
.section--accent .btn--ghost:hover { --btn-bg: rgba(255,255,255,.12); border-color: #fff; }

.center { text-align: center; }
.mx-auto { margin-inline: auto; }
.measure { max-width: var(--measure); }
.measure-center { max-width: var(--measure); margin-inline: auto; }

.grid { display: grid; gap: var(--sp-5); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.section-head { max-width: var(--measure); margin-bottom: var(--sp-7); }
.section-head.center { margin-inline: auto; }
.section-head p { font-size: var(--fs-md); color: var(--ink-soft); }
.section--dark .section-head p { color: var(--on-dark-soft); }

.lead { font-size: var(--fs-md); color: var(--ink-soft); }

/* Kicker de plateforme (installation.html) — repère de scan au-dessus du h2 */
.platform-kicker {
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent-blue);
  margin-bottom: var(--sp-2);
}

/* Déroulé d'installation Android : 3 vraies captures d'écran, une par
   geste. En rangée sur desktop, filmstrip qui se fait glisser sur mobile. */
.install-shots {
  list-style: none;
  padding: 0;
  margin: var(--sp-7) auto 0;
  max-width: 900px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}
.install-shot { margin: 0; }
.install-shot img {
  width: 100%;
  height: auto;
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-shot);
  background: #fff;
}
.install-shot-cap {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: .5em;
}
.install-shot-num {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7em;
  height: 1.7em;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: .85em;
}
@media (max-width: 640px) {
  .install-shots {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 74%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: var(--sp-2);
  }
  .install-shots::-webkit-scrollbar { display: none; }
  .install-shot { scroll-snap-align: center; }
}

/* -------------------------------------------------- *
 * 4. Boutons
 * -------------------------------------------------- */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.3;
  padding: 0.95rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--r-btn);
  background: var(--btn-bg);
  color: var(--btn-fg);
  cursor: pointer;
  transition: transform 0.15s var(--ease-out), background 0.15s var(--ease-out),
              box-shadow 0.15s var(--ease-out);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* Bouton primaire = noir, comme « Nouveau chantier » dans l'appli réelle.
   L'orange reste le andamio/en attente : jamais un bouton. */
.btn--primary { --btn-bg: var(--ink); --btn-fg: #fff; box-shadow: var(--shadow-sm); }
.btn--primary:hover { --btn-bg: #000; box-shadow: var(--shadow-md); }

.btn--dark { --btn-bg: var(--ink); --btn-fg: #fff; }
.btn--dark:hover { --btn-bg: #000; }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border-color: var(--muted);
}
.btn--ghost:hover { --btn-bg: var(--surface); border-color: var(--ink); }

.section--dark .btn--ghost { --btn-fg: #fff; border-color: rgba(255, 255, 255, 0.4); }
.section--dark .btn--ghost:hover { --btn-bg: rgba(255, 255, 255, 0.08); border-color: #fff; }
/* Le noir se fond dans un fond déjà noir : sur section sombre, le bouton
   primaire s'inverse (clair sur sombre) pour rester l'action la plus visible —
   jamais l'orange, qui casserait sa signification d'état dans l'appli. */
.section--dark .btn--primary { --btn-bg: var(--on-dark); --btn-fg: var(--ink); }
.section--dark .btn--primary:hover { --btn-bg: #fff; }

.btn--lg { padding: 1.1rem 1.9rem; font-size: var(--fs-base); }
.btn--block { width: 100%; }

.btn .ic { width: 18px; height: 18px; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.btn-row.center { justify-content: center; }

.btn-note {
  font-size: var(--fs-xs);
  color: var(--muted);
  margin-top: var(--sp-3);
}
.section--dark .btn-note { color: var(--on-dark-soft); }
.section--accent .btn-note { color: rgba(255,255,255,.85); }

@media (max-width: 460px) {
  .btn { white-space: normal; }
  .nav-actions { flex-wrap: wrap; }
}

/* -------------------------------------------------- *
 * 5. Header / navigation
 * -------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
  gap: var(--sp-5);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.brand-mark { width: 30px; height: 30px; flex: 0 0 auto; }

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  display: inline-block;
  padding: 0.5rem 0.85rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-soft);
  border-radius: var(--r-btn);
  transition: color 0.15s, background 0.15s;
}
.nav-links a:hover { color: var(--ink); background: var(--surface); }
.nav-links a[aria-current="page"] { color: var(--ink); font-weight: 600; }

.nav-actions { display: flex; align-items: center; gap: var(--sp-5); }
.nav-login {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-soft);
  transition: color 0.15s;
}
.nav-login:hover { color: var(--ink); }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid var(--muted);
  border-radius: var(--r-btn);
  background: #fff;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.nav-toggle .ic { width: 22px; height: 22px; }

@media (max-width: 880px) {
  /* Barre mobile épurée : marque à gauche, bouton menu à droite.
     Tout ce qui est dans .nav-actions sauf le bouton menu passe dans le menu
     plein écran — les garder dans la barre faisait déborder puis wrapper le
     header (bug corrigé). Règle robuste quelle que soit la page. */
  .nav-links,
  .nav-actions:has(.nav-toggle) > :not(.nav-toggle) { display: none; }
  .nav-toggle { display: inline-flex; }
}

/* -------------------------------------------------- *
 * 5b. Menu mobile plein écran (overlay + backdrop)
 * -------------------------------------------------- */
.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 23, 26, 0.5);
  z-index: 200;
  opacity: 0;
  transition: opacity 0.28s var(--ease-out);
}
.nav-backdrop[hidden] { display: none; }
html.nav-open .nav-backdrop { opacity: 1; }

.mobile-menu {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(86vw, 360px);
  z-index: 210;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  box-shadow: -12px 0 44px rgba(20, 23, 26, 0.18);
  transform: translateX(100%);
  transition: transform 0.3s var(--ease-out);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: max(var(--sp-4), env(safe-area-inset-top))
           max(var(--sp-5), env(safe-area-inset-right))
           max(var(--sp-6), env(safe-area-inset-bottom))
           var(--sp-5);
}
.mobile-menu[hidden] { display: none; }
html.nav-open .mobile-menu { transform: none; }

.mobile-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-6);
}
.menu-close {
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
}
.menu-close .ic { width: 22px; height: 22px; }

.mobile-nav { display: flex; flex-direction: column; margin-bottom: var(--sp-6); }
.mobile-nav a {
  padding: var(--sp-4) var(--sp-1);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.mobile-nav a:hover, .mobile-nav a:active { color: var(--accent-blue); }
.mobile-nav a[aria-current="page"] { color: var(--accent-blue); }

.mobile-menu-actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: auto;
  padding-top: var(--sp-6);
}

html.nav-open, html.nav-open body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .mobile-menu, .nav-backdrop { transition: none; }
}
@media (min-width: 881px) {
  .mobile-menu, .nav-backdrop { display: none !important; }
}

/* -------------------------------------------------- *
 * 6. Hero — le produit, immense, immédiatement.
 *    Empilé (texte au-dessus, capture en dessous), jamais un split
 *    côte-à-côte : la capture reste pleine largeur, jamais coupée
 *    en deux par une colonne de texte.
 * -------------------------------------------------- */
.hero {
  /* Padding resserré (surtout en haut) pour que le Gantt affleure au-dessus
     de la ligne de flottaison, même sur un portable ~800px : le produit se
     montre tout de suite, on ne scrolle pas un mur de texte avant de le voir. */
  padding-block: clamp(2rem, 4.5vw, var(--sp-7)) clamp(2rem, 4vw, var(--sp-6));
  overflow: hidden;
}
.hero-copy {
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: var(--sp-6);
  text-align: center;
}
.hero-copy h1 { margin-bottom: var(--sp-3); }
.hero-tag {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--sp-3);
}
.hero-sub {
  font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
  color: var(--ink-soft);
  max-width: 46ch;
  margin-inline: auto;
  margin-bottom: var(--sp-5);
}
.hero-copy .btn { margin-bottom: var(--sp-3); }
.hero-reassurance {
  font-size: var(--fs-sm);
  color: var(--muted);
  margin-top: var(--sp-3);
  margin-bottom: 0;
}
.hero-visual {
  position: relative;
  padding-inline: var(--sp-5);
}

/* -------------------------------------------------- *
 * 8. Problème — liste verticale, sans cards
 * -------------------------------------------------- */
.pain-list { display: flex; flex-direction: column; gap: 0; max-width: var(--measure); }
.pain-row {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: var(--sp-5);
  padding-block: var(--sp-6);
  border-top: 1px solid var(--line);
}
.pain-row h3 { font-size: var(--fs-md); margin-bottom: var(--sp-2); }
.pain-row p { font-size: var(--fs-sm); color: var(--ink-soft); margin-bottom: 0; }

/* -------------------------------------------------- *
 * 9. Comment ça marche — séquence reliée (pas 3 cartes isolées)
 * -------------------------------------------------- */
.flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); position: relative; }
.flow-step { position: relative; }
/* Trait reliant chaque badge au suivant : part du centre du badge (20px)
   et rejoint exactement le centre du badge de l'étape d'après (une colonne
   + une gouttière plus loin). Aligné sur les badges, pas sur les colonnes. */
.flow-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 20px; left: 20px;
  width: calc(100% + var(--sp-6));
  height: 1px;
  background: rgba(255, 255, 255, 0.16);
  z-index: 0;
}
.flow-step .num {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--r-btn);
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: var(--fs-base);
  margin-bottom: var(--sp-4);
}
.flow-step h3 { font-size: var(--fs-md); color: #fff; }
.flow-step p { color: var(--on-dark-soft); font-size: var(--fs-sm); margin-bottom: 0; }

@media (max-width: 720px) {
  .flow { grid-template-columns: 1fr; gap: var(--sp-7); }
  .flow-step:not(:last-child)::after { display: none; }
}

/* -------------------------------------------------- *
 * 9b. Étapes numérotées simples (installation.html) */
.steps { counter-reset: step; }
.step { position: relative; padding-top: var(--sp-5); }
.step .step-num {
  counter-increment: step;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--r-btn);
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: var(--fs-base);
  margin-bottom: var(--sp-4);
}
.step .step-num::before { content: counter(step); }
.step h3 { font-size: var(--fs-md); }
.step p { color: var(--ink-soft); font-size: var(--fs-sm); }

/* -------------------------------------------------- *
 * 10. Split (Pourquoi + preuve terrain, et fonctionnalités)
 * -------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.split--start { align-items: start; }
.split--reverse .split-media { order: 2; }
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .split--reverse .split-media { order: 0; }
}

.check-list { list-style: none; padding: 0; }
.check-list li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: var(--sp-3);
  color: var(--ink-soft);
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 2px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--success-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231f7a4d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.section--dark .check-list li { color: var(--on-dark-soft); }

/* -------------------------------------------------- *
 * 11. Témoignages — citations sans ornement de couleur
 * -------------------------------------------------- */
.terrain-retours h3 { font-size: var(--fs-md); margin-bottom: var(--sp-5); }
.terrain-retours blockquote {
  margin: 0 0 var(--sp-5);
  padding: var(--sp-5) 0 0;
  border-top: 1px solid var(--line);
  font-size: var(--fs-md);
  font-style: italic;
  color: var(--ink);
}
.terrain-retours blockquote:first-of-type { padding-top: 0; border-top: 0; }
.terrain-retours blockquote:last-child { margin-bottom: 0; }
.terrain-retours blockquote footer {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  font-style: normal;
  font-weight: 600;
  color: var(--muted);
}

/* -------------------------------------------------- *
 * 12. Respiro — pause visuelle volontaire
 * -------------------------------------------------- */
.respiro-statement {
  max-width: 42ch;
  margin-inline: auto;
  text-align: center;
}
.respiro-statement h2 { margin-bottom: 0; } /* symétrie du bloc plein */
.respiro-statement p { font-size: var(--fs-xl); color: var(--ink-soft); margin-bottom: 0; line-height: 1.4; }

/* -------------------------------------------------- *
 * 13. Tarifs
 * -------------------------------------------------- */
.plan {
  position: relative;
  background: #fff;
  border: 1px solid #E4E8EE;
  border-radius: 20px;
  padding: var(--sp-8) var(--sp-7);
}
.plan h3 { font-size: var(--fs-md); margin-bottom: var(--sp-2); }
.plan .plan-desc { font-size: var(--fs-sm); color: var(--muted); margin-bottom: var(--sp-5); }
.price { display: flex; align-items: baseline; gap: 0.35rem; margin-bottom: var(--sp-1); }
.price .amount { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -0.02em; }
.price .per { font-size: var(--fs-sm); color: var(--muted); font-weight: 500; }
.price-sub { font-size: var(--fs-xs); color: var(--muted); margin-bottom: var(--sp-5); }
.plan .btn { width: 100%; margin-bottom: var(--sp-5); }
.plan .check-list li { font-size: var(--fs-sm); }

.placeholder {
  background: #fdeee4;
  color: var(--accent-deep);
  font-weight: 600;
  padding: 0.05em 0.4em;
  border-radius: 4px;
  font-size: 0.9em;
}

/* -------------------------------------------------- *
 * 14. FAQ accordion
 * -------------------------------------------------- */
.faq { max-width: 820px; margin-inline: auto; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  text-align: left;
  background: none;
  border: 0;
  padding: var(--sp-5) 0;
  font-family: inherit;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.faq-q .ic { width: 22px; height: 22px; flex: 0 0 auto; color: var(--muted); transition: transform 0.2s var(--ease-out); }
.faq-q[aria-expanded="true"] .ic { transform: rotate(45deg); color: var(--accent-blue); }
.faq-a {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s var(--ease-out);
}
.faq-a-inner { padding-bottom: var(--sp-5); color: var(--ink-soft); }
.faq-a-inner p:last-child { margin-bottom: 0; }

/* -------------------------------------------------- *
 * 15. CTA final — section pleine largeur, plus de carte flottante
 * -------------------------------------------------- */
.cta-content { text-align: center; }
.cta-content p { max-width: 48ch; margin-inline: auto; }

/* -------------------------------------------------- *
 * 16. Formulaire (contact)
 * -------------------------------------------------- */
.form-grid { display: grid; gap: var(--sp-4); }
.field label { display: block; font-size: var(--fs-sm); font-weight: 600; margin-bottom: var(--sp-2); }
.field input, .field textarea, .field select {
  width: 100%;
  font-family: inherit;
  font-size: var(--fs-base);
  padding: 0.85rem 1rem;
  border: 1px solid var(--muted);
  border-radius: var(--r-btn);
  background: #fff;
  color: var(--ink);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px #e7edf7;
}
.field textarea { min-height: 150px; resize: vertical; }
.field .hint { font-size: var(--fs-xs); color: var(--muted); margin-top: var(--sp-2); }
.checkbox-row { display: flex; gap: 0.6rem; align-items: flex-start; font-size: var(--fs-sm); color: var(--ink-soft); }
.checkbox-row input { width: 20px; height: 20px; margin-top: 2px; flex: 0 0 auto; }

/* Confirmation d'envoi — remplace le formulaire une fois le message parti */
.form-success { text-align: center; border-color: var(--success); }
.form-success-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; margin: 0 auto var(--sp-4);
  border-radius: 50%; background: var(--success-soft); color: var(--success);
}
.form-success-icon svg { width: 34px; height: 34px; }
.form-success h2 { font-size: var(--fs-xl); margin-bottom: var(--sp-2); }
.form-success p { color: var(--ink-soft); margin-bottom: var(--sp-5); }
@media (prefers-reduced-motion: no-preference) {
  .form-success[hidden] { display: none; }
  .form-success:not([hidden]) { animation: successPop 0.32s ease-out; }
}
@keyframes successPop {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

.contact-cards { display: grid; gap: var(--sp-4); }
.contact-card { display: flex; gap: var(--sp-4); padding: var(--sp-5); border: 1px solid var(--line); border-radius: var(--r-card); background: #fff; }
.contact-card .ic-box { margin-bottom: 0; flex: 0 0 auto; }
.contact-card h3 { font-size: var(--fs-base); margin-bottom: var(--sp-1); }
.contact-card p { margin-bottom: 0; font-size: var(--fs-sm); color: var(--ink-soft); }

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: var(--sp-6);
  box-shadow: 0 20px 50px -30px rgba(20,23,26,.22);
}
.ic-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border-radius: var(--r-btn);
  background: var(--anthracite);
  color: #fff;
  margin-bottom: var(--sp-4);
}
.ic-box .ic { width: 24px; height: 24px; }
.card h3 { font-size: var(--fs-md); margin-bottom: var(--sp-2); }
.card p { color: var(--ink-soft); margin-bottom: 0; font-size: var(--fs-sm); }

/* -------------------------------------------------- *
 * 17. Fiche technique — fonctionnalites.html
 * -------------------------------------------------- */
.specs { max-width: 880px; margin-inline: auto; }
.spec-row {
  display: grid;
  grid-template-columns: 15ch 1fr;
  gap: var(--sp-6);
  padding-block: var(--sp-6);
  border-top: 1px solid var(--line);
}
.specs .spec-row:last-child { border-bottom: 1px solid var(--line); }
.spec-row h3 { font-size: var(--fs-base); margin-bottom: 0; }
.spec-row p { font-size: var(--fs-sm); color: var(--ink-soft); margin-bottom: 0; }

@media (max-width: 640px) {
  .spec-row { grid-template-columns: 1fr; gap: var(--sp-2); }
}

/* -------------------------------------------------- *
 * 18. Pages légales / contenu long
 * -------------------------------------------------- */
.legal { padding-block: clamp(2.5rem, 5vw, 4rem) var(--sp-9); }
.legal-doc { max-width: var(--container-narrow); margin-inline: auto; }
.legal-doc h2 { font-size: var(--fs-lg); margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--line); }
.legal-doc h2:first-of-type { border-top: 0; padding-top: 0; }
.legal-doc h3 { font-size: var(--fs-md); margin-top: var(--sp-5); }
.legal-doc p, .legal-doc li { color: var(--ink-soft); font-size: var(--fs-sm); }
.legal-meta { font-size: var(--fs-sm); color: var(--muted); margin-bottom: var(--sp-6); }
.legal-note {
  background: #fdeee4;
  border: 1px solid #f6c9ac;
  border-radius: var(--r-card);
  padding: var(--sp-4) var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--accent-deep);
  margin-bottom: var(--sp-6);
}
.legal-doc .table-wrap { overflow-x: auto; margin: var(--sp-4) 0; }
.legal-doc table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.legal-doc th, .legal-doc td { text-align: left; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--line); vertical-align: top; }
.legal-doc thead th { background: var(--surface, #f6f4f1); color: var(--ink); font-weight: 650; }
.legal-doc td { color: var(--ink-soft); }

.page-head { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 4vw, 3rem); }
.page-head h1 { margin-bottom: var(--sp-4); }
.page-head p { font-size: var(--fs-md); color: var(--ink-soft); max-width: var(--measure); }

.crumbs { font-size: var(--fs-xs); color: var(--muted); margin-bottom: var(--sp-4); }
.crumbs a { display: inline-block; padding-block: 0.6rem; margin-block: -0.6rem; } /* zone tactile élargie sans bouger la mise en page */
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs span { margin-inline: 0.4rem; }
.section--dark .crumbs { color: var(--on-dark-soft); }
.section--dark .crumbs a:hover { color: #fff; }
.page-head.section--dark p { color: var(--on-dark-soft); }

/* -------------------------------------------------- *
 * 19. Footer
 * -------------------------------------------------- */
.site-footer { background: var(--anthracite); color: var(--on-dark-soft); padding-block: var(--sp-8) var(--sp-6); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: var(--sp-6);
  padding-bottom: var(--sp-7);
  border-bottom: 1px solid var(--anthracite);
}
.footer-brand .brand { color: #fff; margin-bottom: var(--sp-4); }
.footer-brand p { font-size: var(--fs-sm); max-width: 34ch; }
.footer-col h4 { color: #fff; font-size: var(--fs-sm); letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: var(--sp-4); }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: var(--sp-1); }
.footer-col a {
  font-size: var(--fs-sm);
  color: var(--on-dark-soft);
  transition: color 0.15s;
  /* Zone tactile >= 44px de pas : lien sur toute la ligne, padding vertical */
  display: inline-block;
  padding-block: 0.55rem;
}
.footer-col a:hover { color: #fff; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-top: var(--sp-5);
  font-size: var(--fs-xs);
  color: var(--muted);
}
.footer-bottom a:hover { color: #fff; }

@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 460px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* -------------------------------------------------- *
 * 20. Responsive grilles
 * -------------------------------------------------- */
@media (max-width: 880px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .container { padding-inline: var(--sp-4); }
  .pain-row { grid-template-columns: 1fr; gap: var(--sp-2); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* -------------------------------------------------- *
 * 22. Divers
 * -------------------------------------------------- */
.hr { height: 1px; background: var(--line); border: 0; margin-block: var(--sp-6); }
.mt-0 { margin-top: 0; } .mt-4 { margin-top: var(--sp-5); } .mt-6 { margin-top: var(--sp-6); }
.mb-0 { margin-bottom: 0; }

/* -------------------------------------------------- *
 * 23. Gantt du hero — réplique fidèle du composant réel de l'app
 *     (valeurs extraites du CSS source, pas d'invention).
 * -------------------------------------------------- */
.gantt-demo {
  --gdw: 36px;        /* largeur d'une colonne-jour, valeur réelle de l'app */
  --info-w: 280px;    /* largeur colonne noms, valeur réelle de l'app */
  --gantt-days: 92;
  /* fit-content : le cadre s'arrête au bord de la table (280px + 20 jours),
     sinon une bande vide de ~140px apparaissait à droite sur grand écran. */
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  font-family: var(--font);
  overflow: hidden;
}
.gantt-demo-scroll {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  cursor: grab;
  border: 1px solid #E2E8F0;
  border-radius: var(--r-shot);
  box-shadow: var(--shadow-shot);
  background: #F8FAFC;
  transition: box-shadow 0.25s var(--ease-out), transform 0.25s var(--ease-out);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.gantt-demo-scroll::-webkit-scrollbar { display: none; }
.gantt-demo-scroll.is-grabbing { cursor: grabbing; }
.hero-visual:hover .gantt-demo-scroll { box-shadow: var(--shadow-shot-hover); transform: translateY(-4px); }
@media (prefers-reduced-motion: reduce) {
  .hero-visual:hover .gantt-demo-scroll { transform: none; }
}
/* border-collapse: separate — avec collapse, Chrome peint les bordures
   dans la couche de la table et elles transparaissent à travers la
   colonne sticky pendant le scroll. Toutes nos bordures sont mono-côté
   (right/bottom), donc separate ne double rien. */
.gantt-demo-table { border-collapse: separate; border-spacing: 0; table-layout: fixed; background: #fff; }
.gantt-demo .th-info {
  position: sticky;
  left: 0;
  z-index: 6;
  width: var(--info-w);
  min-width: var(--info-w);
  text-align: left;
  padding: 7px 10px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #475569;
  background: #fff;
  border-right: 1.5px solid #E2E8F0;
  border-bottom: 2px solid #E2E8F0;
}
.gantt-demo .th-month {
  font-size: .7rem; font-weight: 700; text-align: left;
  padding: 7px 10px;
  border-right: 1.5px solid #E2E8F0;
  border-bottom: 2px solid #E2E8F0;
  background: #FFFFFF;
  color: #475569; letter-spacing: .06em; text-transform: uppercase;
}
/* inline-block : nécessaire pour que le translateX de suivi de scroll
   (main.js) s'applique — transform est ignoré sur un inline simple. */
.gantt-demo .month-label { display: inline-block; }
.gantt-demo .th-day {
  width: var(--gdw);
  text-align: center;
  padding: 10px 0;
  border-right: 1px solid #EDF0F5;
  background: #FAFBFC;
  box-shadow: inset 0 -2px 0 #E2E8F0;
}
.gantt-demo .dn { font-size: .72rem; font-weight: 600; color: #94A3B8; display: block; }
.gantt-demo .dw { font-size: .58rem; color: #C1CBD8; display: block; font-weight: 500; letter-spacing: .03em; }
.gantt-demo .th-day.is-t {
  background: #EEF4FF;
  /* Soulignement bleu en box-shadow inset, PAS en border-bottom :
     avec border-collapse, Chrome peint les bordures de cellules dans une
     couche de la table qui passe AU-DESSUS de la colonne sticky des noms
     pendant le scroll (la ligne bleue « transparaissait »). Une ombre
     interne appartient à la cellule et reste correctement recouverte. */
  box-shadow: inset 0 -2px 0 #3B82F6;
}
.gantt-demo .th-day.is-t .dn { color: #2563EB; font-weight: 800; font-size: .78rem; }
.gantt-demo .th-day.is-t .dw { color: #93C5FD; font-weight: 600; }
.gantt-demo .th-day.is-we .dn { color: #CBD5E1; }

.gantt-demo .td-info {
  position: sticky;
  left: 0;
  z-index: 5;
  width: var(--info-w);
  min-width: var(--info-w);
  padding: 0 10px;
  font-size: .78rem;
  font-weight: 600;
  color: #0F172A;
  background: #fff;
  border-right: 1.5px solid #E2E8F0;
  border-bottom: 1px solid #E2E8F0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
.gantt-demo .g-row:nth-child(even) .td-info { background: #FAFBFF; }
.gantt-demo .td-track { padding: 0; border-bottom: 1px solid #E2E8F0; vertical-align: top; height: 76px; overflow: hidden; }
.gantt-demo .track {
  position: relative;
  width: calc(var(--gantt-days) * var(--gdw));
  min-height: 76px;
  height: 100%;
  background-color: #FFFFFF;
  background-image: repeating-linear-gradient(
    to right, transparent 0, transparent 35px, #F1F5F9 35px, #F1F5F9 36px
  );
}
.gantt-demo .g-row:nth-child(even) .track { background-color: #FAFBFF; }
.gantt-demo .hl { position: absolute; top: 0; bottom: 0; width: var(--gdw); pointer-events: none; }
.gantt-demo .hl.we { background: rgba(241, 245, 249, .7); }

.gantt-demo .gantt-today-col {
  position: absolute;
  top: 0;
  left: calc(var(--info-w) + 252px);
  width: var(--gdw);
  height: 100%;
  background: rgba(37, 99, 235, 0.06);
  pointer-events: none;
  z-index: 1;
}

.gantt-demo .bar {
  position: absolute;
  height: 24px;
  top: 26px;
  border-radius: 5px;
  z-index: 10;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
  display: flex;
  align-items: center;
  overflow: hidden;
}
.gantt-demo .bar-label-sticky {
  font-size: .68rem; font-weight: 700;
  color: rgba(255, 255, 255, .95);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .2);
  padding: 0 8px;
}
/* Échafaudage = toujours orange, quelle que soit la couleur du chantier —
   c'est un état ("andamio monté"), pas une identité de chantier. Conforme
   à l'appli réelle : la texture rayée orange est le seul repère visuel de
   "non-travail" et ne doit jamais se confondre avec une couleur de chantier. */
.gantt-demo .bar.ech {
  height: 6px;
  top: 8px;
  border-radius: 999px;
  background: var(--accent) !important;
  background-image: repeating-linear-gradient(
    45deg, transparent, transparent 4px, rgba(255, 255, 255, .45) 4px, rgba(255, 255, 255, .45) 8px
  ) !important;
}

/* Barres de phase (Dépose, Couverture…) : sous la barre principale,
   jamais superposées — sinon elles cachent le nom du chantier. */
.gantt-demo .bar.phase {
  height: 16px;
  top: 46px;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .14);
}
.gantt-demo .bar.phase .bar-label-sticky { font-size: .58rem; font-weight: 700; padding: 0 6px; }

/* Animation d'entrée des barres — staggered, jamais en boucle.
   Masquage scopé sous html.js : sans JavaScript, personne n'ajoute
   .is-visible, et un Gantt vide à jamais serait pire que pas d'animation. */
html.js .bar-reveal {
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
/* Même préfixe html.js : sans lui, la règle de masquage (plus spécifique)
   gagnerait et les barres ne se révéleraient jamais. */
html.js .bar-reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 640px) {
  .gantt-demo { --info-w: 170px; }
}

@media (prefers-reduced-motion: reduce) {
  html.js .bar-reveal { opacity: 1; transform: none; transition-delay: 0s !important; }
}

/* -------------------------------------------------- *
 * 24. Captures d'écran réelles de l'application
 * -------------------------------------------------- */
.shot-desktop {
  border-radius: var(--r-shot);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-shot);
}
.shot-mobile {
  border-radius: 30px;   /* seule exception : c'est un contour de téléphone, pas une carte */
  border: 1px solid var(--line);
  max-width: 300px;
  margin-inline: auto;
}
/* ============================================================ *
 * 25. DIRECTION — Dossier de chantier
 *
 *     Principe : chaque décision visuelle doit rappeler un document
 *     de métier bien tenu (carnet, devis, fiche technique), jamais
 *     une interface d'application. Pas de dégradé, pas de lueur, pas
 *     d'ombre portée large, pas de survol qui fait "flotter" un bloc.
 *     Une seule police, une seule teinte d'accent, des traits fins.
 * ============================================================ */

/* ---- Hero : fond encre, cri d'accroche. Le Gantt reste la preuve. ---- */
.hero:not(.section--dark) { background: var(--paper); }
.hero h1 .hl-accent { color: var(--accent); }

.hero-copy h1,
.hero-copy .hero-sub,
.hero-copy .btn-row,
.hero-reassurance,
.hero .app-window {
  animation: dossierIn .5s var(--ease-out) both;
}
.hero-copy .hero-sub { animation-delay: .04s; }
.hero-copy .btn-row  { animation-delay: .08s; }
.hero-reassurance     { animation-delay: .1s; }
.hero .app-window      { animation-delay: .06s; }
@keyframes dossierIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .hero-copy h1, .hero-copy .hero-sub, .hero-copy .btn-row,
  .hero-reassurance, .hero .app-window { animation: none; }
}

/* La fenêtre qui encadre le Gantt : un document épinglé, à plat.
   Pas de barre de titre façon navigateur, pas d'inclinaison 3D. */
.app-window {
  /* Le cadre s'arrête au bord de la table : sur grand écran, un cadre
     plein-largeur laissait ~400px de blanc mort à droite du jour 20. */
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  border-radius: var(--r-shot);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-shot);
  background: var(--paper);
  /* Sans ceci, la table carrée à l'intérieur débordait dans les angles
     arrondis du cadre : coins pointus d'un côté, arrondis de l'autre. Le
     clip aligne le contenu sur le rayon du cadre. Le scroll horizontal
     reste géré par .gantt-demo-scroll (son propre overflow-x). */
  overflow: hidden;
}
.app-window .gantt-demo-scroll { border: 0; border-radius: 0; box-shadow: none; }
.app-window .gantt-demo { max-width: 100%; }
.app-chrome, .app-url, .hero-eyebrow, .pulse-dot { display: none; } /* non utilisés : la preuve n'a pas besoin d'emballage */

/* Colonne de noms toujours lisible au-dessus des barres */
.gantt-demo .th-info { z-index: 22 !important; }
.gantt-demo .td-info { z-index: 20 !important; box-shadow: 3px 0 6px -4px rgba(32,29,25,.12); }

/* Les barres restent celles de l'app réelle : pas de dégradé ajouté,
   juste une entrée discrète qui suggère "le planning se remplit". */
html.js .gantt-demo .bar-reveal {
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .35s var(--ease-out), transform .35s var(--ease-out);
}
html.js .gantt-demo .bar-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js .gantt-demo .bar-reveal { opacity: 1; transform: none; transition: none; }
}

/* Colonne « aujourd'hui » : un repère net, immobile — pas de pulsation. */
.gantt-demo .gantt-today-col { background: rgba(32,29,25,.05); }

/* Indice de glissement : une étiquette de marge, pas une bulle d'app.
   Statique, posée, disparaît proprement à la première interaction. */
.gantt-hint {
  position: absolute;
  bottom: 10px; left: 50%; transform: translateX(-50%);
  padding: .4rem .85rem;
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  background: var(--paper);
  color: var(--ink-soft);
  font-size: .78rem; font-weight: 500;
  white-space: nowrap;
  transition: opacity .3s var(--ease-out);
}
.gantt-hint.is-hidden { opacity: 0; }

/* Invitation posée au-dessus du planning : « teste-le toi-même ». */
.gantt-cue {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-sm); font-weight: 600;
  color: var(--on-dark-soft);
  text-align: center;
}
.gantt-cue-arrow { display: inline-block; color: var(--accent); font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
  .gantt-cue-arrow { animation: cueNudge 1.6s var(--ease-out) infinite; }
}
@keyframes cueNudge {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(5px); }
}
.gantt-cue.is-hidden { opacity: 0; transition: opacity .3s var(--ease-out); }

.gantt-legend {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .5rem 1.3rem;
  margin-top: var(--sp-5);
  padding-inline: var(--sp-5);
}
.gantt-legend .lg {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .8rem; font-weight: 600; color: var(--muted);
}
.gantt-legend .lg i { width: 18px; height: 10px; border-radius: 3px; display: inline-block; }
/* Échafaudage = toujours orange (état, pas identité de chantier) */
.gantt-legend .lg-hatch {
  background: repeating-linear-gradient(45deg, var(--accent) 0 4px, rgba(193,68,14,.4) 4px 8px);
  border-radius: 999px !important; height: 6px !important;
}
.gantt-legend .lg-today {
  background: rgba(37,99,235,.15);
  box-shadow: inset 0 0 0 1.5px rgba(37,99,235,.5);
}
@media (max-width: 640px) {
  .gantt-legend { gap: .45rem .9rem; }
  .gantt-legend .lg { font-size: .72rem; }
}

/* ---- Boutons : aplat, pas de lueur. Le repos vaut mieux que l'éclat. ---- */
.btn--primary { background-image: none; box-shadow: none; }
.btn--primary:hover { box-shadow: none; }
.btn:hover { transform: none; } /* pas de bouton qui "flotte" au survol */
.btn:active { transform: none; }

/* ---- Rythme des sections : le papier domine, l'encre ponctue.
   Une seule section sombre dans toute la page (le CTA final) au lieu
   de l'alternance mécanique clair/sombre — chaque page du dossier
   garde la même teinte, seul le dernier feuillet change de registre. ---- */
.section--surface { background: var(--surface); }

/* Chapitre : rupture par un trait, pas par un bloc de couleur */
.section--chapitre {
  background: var(--paper);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.section--chapitre h2,
.section--chapitre p { color: var(--ink); }
.section--chapitre .section-head p { color: var(--ink-soft); }

/* ---- Problème : trois entrées de dossier, numérotées comme des
   références de fiche technique — pas des puces décoratives. ---- */
.pain-rows { max-width: 760px; margin-inline: auto; }
.pain-row {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: var(--sp-5);
  padding-block: var(--sp-6);
  border-top: 1px solid var(--line);
}
/* Pas de bordure basse ici : le trait au-dessus de .pain-cost sert de
   séparateur unique (évite la double ligne de largeurs différentes). */
.pain-num {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.pain-row h3 { font-size: var(--fs-md); margin-bottom: var(--sp-2); }
.pain-row p { font-size: var(--fs-sm); color: var(--ink-soft); margin-bottom: 0; }
@media (max-width: 560px) { .pain-row { grid-template-columns: 1fr; gap: var(--sp-2); } }
/* Coût réel : ferme la section problème en nommant l'enjeu, pas juste le symptôme. */
.pain-cost {
  max-width: 760px;
  margin: var(--sp-7) auto 0;
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
  font-size: var(--fs-md);
  line-height: 1.5;
  color: var(--ink-soft);
  text-align: center;
}
.pain-cost strong { color: var(--ink); }

/* ---- Preuve terrain : une citation en marge du texte, pas une vitrine.
   Trait vertical à gauche, comme une annotation manuscrite retenue —
   pas de guillemet géant en dégradé. ---- */
.terrain-retours {
  padding-left: var(--sp-6);
  border-left: 2px solid var(--line);
  background: none;
  border-radius: 0;
  box-shadow: none;
}
.terrain-retours::before { content: none; }
.terrain-retours h3 { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; }
.terrain-intro { font-size: var(--fs-sm); color: var(--ink-soft); margin-bottom: var(--sp-5); max-width: 42ch; }
.terrain-retours blockquote { border-top: 0; padding-top: 0; }
.terrain-retours blockquote + blockquote { margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--line); }

/* Tous les avis vivent ici, un seul endroit — on défile pour les voir tous
   plutôt que de dupliquer une deuxième section de témoignages plus bas. */
.terrain-retours-scroll {
  max-height: 340px;
  overflow-y: auto;
  padding-right: var(--sp-4);
  scrollbar-width: thin;
  scrollbar-color: var(--muted) transparent;
  mask-image: linear-gradient(to bottom, #000 calc(100% - 32px), transparent 100%);
}
.terrain-retours-scroll::-webkit-scrollbar { width: 6px; }
.terrain-retours-scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }

/* ---- Respiro : la phrase-pivot, sobre, sans emphase de couleur. ---- */
.respiro-statement p { font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }

/* ---- Tarifs : un devis, pas une vitrine produit. Lignes de valeur,
   bordure fine, aucune barre de couleur en tête de carte. ---- */
.plan {
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  box-shadow: none;
  background: var(--paper);
}
.plan::before { display: none; }
.price .amount { background: none; -webkit-text-fill-color: initial; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---- FAQ : pas d'effet de survol lumineux — un lien actif, comme dans l'appli. ---- */
.faq-q:hover { color: var(--accent-blue-deep); }

/* ---- CTA final : le seul feuillet à l'encre de toute la page. ---- */
.section--dark { position: relative; }
.section--dark::before { content: none; } /* plus de halo bleu/orange */

/* ---- Footer : trait simple, pas de liseré dégradé. ---- */
.site-footer { border-top: 1px solid rgba(247,244,238,.08); border-image: none; }
.footer-col a:hover { transform: none; }

/* ---- Installation : timeline documentaire, repères à l'encre. ---- */
.steps::before { background: var(--line); }
.step .step-num {
  background: var(--paper);
  border: 1.5px solid var(--ink);
  color: var(--ink);
}
.install-steps .step-num { background: var(--ink); border-color: var(--ink); color: var(--on-dark); }

/* ---- Menu mobile : ouverture nette, sans cascade chorégraphiée. ---- */
.mobile-menu { border-radius: 0; }
.mobile-nav a {
  opacity: 1; transform: none; transition: color .15s;
}
.mobile-menu-actions { opacity: 1; transform: none; }

/* ---- Repos général : pas de transform au survol des blocs de contenu. ---- */
.pain-row:hover, .flow-step:hover, .contact-card:hover { background: none; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .hero-copy h1, .hero-copy .hero-sub, .hero-copy .btn-row,
  .hero-reassurance, .hero .app-window { animation: none; }
}

/* ============================================================ *
 * 30. Ruban d'échafaudage — signature graphique unique du site.
 *     Reprend exactement la texture "échafaudage" de l'appli réelle :
 *     orange plein avec un hachurage blanc en diagonale — jamais un
 *     ruban de balisage noir/orange, qui n'existe pas dans le produit.
 *     Utilisé à deux endroits seulement (jamais en motif répété
 *     partout, sinon ça devient du bruit décoratif).
 * ============================================================ */
.hatch-divider {
  height: 10px;
  background-color: var(--accent);
  background-image: repeating-linear-gradient(
    45deg, transparent, transparent 5px, rgba(255, 255, 255, .45) 5px, rgba(255, 255, 255, .45) 10px
  );
}

/* ============================================================ *
 * 31. Un seul téléphone, les captures défilent à l'intérieur —
 *     pas trois écrans posés côte à côte. Contour de téléphone réel
 *     (bordure + encoche), glissable à la souris comme au doigt.
 * ============================================================ */
.phone-mock { max-width: 280px; margin-inline: auto; text-align: center; }
.phone-mock-frame {
  position: relative;
  width: 240px;
  aspect-ratio: 1125 / 2436;
  margin-inline: auto;
  background: var(--ink);
  border-radius: 34px;
  padding: 10px;
  box-shadow: var(--shadow-shot);
}
.phone-mock-notch {
  position: absolute;
  top: 10px; left: 50%;
  transform: translateX(-50%);
  width: 76px; height: 18px;
  background: var(--ink);
  border-radius: 0 0 14px 14px;
  z-index: 2;
}
.phone-mock-screen {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 24px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
  background: #fff;
}
.phone-mock-screen::-webkit-scrollbar { display: none; }
.phone-mock-screen.is-grabbing { cursor: grabbing; user-select: none; scroll-snap-type: none; }
.phone-mock-track { display: flex; height: 100%; width: 300%; }
.phone-mock-slide { flex: 0 0 33.3334%; height: 100%; scroll-snap-align: center; margin: 0; }
.phone-mock-slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  pointer-events: none; /* le drag glisse l'écran, pas l'image */
}
.phone-mock-dots { display: flex; justify-content: center; gap: .4rem; margin-top: var(--sp-5); }
.phone-mock-dots .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--line);
  transition: background .2s var(--ease-out);
}
.phone-mock-dots .dot.is-active { background: var(--ink); }
.phone-mock-caption {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  min-height: 1.4em;
}

/* Indice de glissement discret, SOUS le téléphone (hors de l'écran).
   Disparaît dès la première interaction (géré dans main.js). */
.phone-swipe-hint {
  display: inline-flex; align-items: center; gap: .35rem;
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--muted);
  letter-spacing: .02em;
  transition: opacity .3s var(--ease-out);
}
.phone-swipe-hint .ic-chev { width: 13px; height: 13px; opacity: .7; }
.phone-swipe-hint.is-hidden { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .phone-swipe-hint .ic-chev:first-child { animation: chevNudgeL 1.7s var(--ease-out) infinite; }
  .phone-swipe-hint .ic-chev:last-child  { animation: chevNudgeR 1.7s var(--ease-out) infinite; }
}
@keyframes chevNudgeL { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-2px); } }
@keyframes chevNudgeR { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(2px); } }


/* ============================================================ *
 * 33. Téléphone statique — même contour que le carrousel, une
 *     seule image, utilisé sur les pages internes pour rester
 *     cohérent avec la home.
 * ============================================================ */
.phone-mock-frame--static { width: 260px; margin-inline: auto; }
.phone-mock-frame--static .phone-mock-screen { overflow: hidden; cursor: default; }
.phone-mock-screen > img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* ============================================================ *
 * 34. "ARRÊTE." — refonte finale, cohérente avec le matériel de
 *     marque (stories). Ces règles gagnent en cascade sur celles
 *     du système "dossier de chantier" ci-dessus qu'elles remplacent.
 * ============================================================ */

/* Le mot surligné redevient orange : c'est la couleur d'énergie de la
   marque, pas une réserve fonctionnelle. */
.hl-accent { color: var(--accent); }
.section--dark .hl-accent { color: var(--accent); }

/* Badge de prix — pilule à contour, comme sur la cover story. */
.price-badge {
  display: inline-flex;
  align-items: baseline;
  gap: .3em;
  padding: .5em .9em;
  border: 1.5px solid var(--accent);
  border-radius: 999px;
  color: var(--accent);
  font-weight: 700;
  font-size: var(--fs-sm);
  white-space: nowrap;
  max-width: 100%;
}
/* Badge d'essai : le contour « respire » — un halo orange qui monte et
   descend lentement. Ça capte l'œil et crée une urgence discrète, sans
   sauter ni scintiller (un clignotement rapide ferait bug/spam ; un
   battement d'échelle faisait arnaque). Le fait énoncé reste vrai. */
.trial-badge {
  gap: .5em;
  margin-bottom: var(--sp-5);
  border-color: rgba(234, 88, 12, .55);
  color: var(--on-dark-soft);
  background: rgba(234, 88, 12, .07);
  animation: badgeGlow 2.8s ease-in-out infinite;
}
@keyframes badgeGlow {
  0%, 100% {
    border-color: rgba(234, 88, 12, .4);
    box-shadow: 0 0 0 0 rgba(234, 88, 12, 0);
  }
  50% {
    border-color: rgba(234, 88, 12, .95);
    box-shadow: 0 0 16px 1px rgba(234, 88, 12, .3);
  }
}
.trial-badge::before {
  content: "";
  align-self: center;
  flex: 0 0 auto;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 7px rgba(234, 88, 12, .7);
}
@media (prefers-reduced-motion: reduce) {
  .trial-badge { animation: none; border-color: rgba(234, 88, 12, .6); }
}
@media (max-width: 380px) {
  .trial-badge { font-size: var(--fs-xs); padding-inline: .7em; }
}
.price-badge .unit { font-size: .75em; font-weight: 500; opacity: .85; }
.trial-badge strong { color: var(--on-dark); }

/* Bulle de notification — mockup WhatsApp détaché sous le paragraphe.
   Jamais dans le fil du texte : plus haute que la ligne, elle recouvrait
   les mots des lignes voisines. */
.chat-bubble {
  display: inline-block;
  margin-top: var(--sp-2);
  background: #fff;
  color: var(--ink);
  padding: .55em 1em;
  border-radius: 999px 999px 999px 4px;
  font-weight: 600;
  font-size: var(--fs-sm);
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
  border: 1px solid var(--line);
}

/* Trait de marqueur — soulignement à main levée, jamais un underline propre. */
.marker {
  position: relative;
  white-space: nowrap;
}
.marker::after {
  content: "";
  position: absolute;
  left: -2%; right: -2%; bottom: -0.12em;
  height: .22em;
  background: var(--accent);
  opacity: .55;
  transform: rotate(-1deg);
  border-radius: 999px;
}

/* Cartes produit dans les blocs sombres/oranges — fond papier, jamais
   transparentes, pour que la capture reste lisible sur fond de couleur. */
.section--dark .app-window,
.section--accent .app-window,
.section--dark .phone-mock-frame,
.section--accent .phone-mock-frame { box-shadow: 0 20px 50px rgba(0,0,0,.35); }

.btn { border-radius: var(--r-btn); font-weight: 700; }
.plan { border-radius: var(--r-card); }