/* ============================================================================
   VELM — CSS de la home refondue (grammaire Apple)
   ----------------------------------------------------------------------------
   Ce fichier ne s'applique qu'à la home (chargé par index.html uniquement).
   Les pages secondaires continuent d'utiliser velm.css jusqu'à leur
   harmonisation (déploiement 3).
   Créé le 2 septembre 2026 dans le cadre de la refonte direction Apple
   demandée par le DA. Neuf tuiles alternées ivoire/vert, densité basse,
   zéro traits de séparation, une seule couleur d'action (laiton).
   ============================================================================ */

:root {
  color-scheme: light only;
  --vert: #0F2E24;
  --vert-deep: #0a2019;
  --vert-soft: #174535;
  --ivoire: #F2EBDA;
  --ivoire-pur: #FAF7EF;
  --ivoire-warm: #EDE4CF;
  --laiton: #B8935A;
  --laiton-soft: #C9A772;
  --laiton-deep: #9A7842;
  /* Laiton assombri pour le petit texte informatif sur fond clair : le
     laiton et même le laiton-deep n'atteignent pas le rapport de 4,5
     exigé par WCAG AA (2,67 et 3,82). Celui-ci donne 4,55 sur l'ivoire
     le plus sombre. Le laiton clair reste réservé au décor et aux
     grandes tailles. */
  --laiton-texte: #7E6136;
  --charbon: #1C1A17;
  --charbon-soft: rgba(28, 26, 23, 0.66);
  /* 0,40 ne donnait qu'un rapport de 2,47 — insuffisant pour du texte.
     0,64 atteint 4,6 sur l'ivoire le plus sombre. La hiérarchie avec
     --charbon-soft reste portée par la taille et la graisse. */
  --charbon-mute: rgba(28, 26, 23, 0.64);
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Manrope', -apple-system, system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* ============================================================================
   FINITIONS — amélioration 6 (3 septembre 2026)
   ============================================================================ */

/* Anneau de focus clavier — indicateur unique, visible partout.
   Le survol change la couleur ; le focus clavier ajoute cet anneau. Les deux
   états sont dissociés : un changement de couleur seul ne suffit pas à
   signaler le focus à une personne qui navigue au clavier. */
:focus-visible {
  outline: 2px solid var(--laiton);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Sur fond vert profond, l'anneau passe en ivoire pour rester lisible */
.tuile--sombre :focus-visible,
.nav-top :focus-visible,
.pan-rep :focus-visible,
.footer :focus-visible,
.prest-sect :focus-visible {
  outline-color: var(--ivoire);
}
/* Les pilules et segments sont déjà arrondis : l'anneau suit leur forme */
.pill:focus-visible,
.nav-top__cta:focus-visible,
.seg:focus-visible,
.btn-gen:focus-visible,
.skip-lien:focus-visible {
  border-radius: 9999px;
}
.av-opt:focus-visible,
textarea.av-perso:focus-visible {
  border-radius: 12px;
}
/* Les cibles d'ancre reçoivent le focus par programme, sans anneau :
   ce ne sont pas des éléments interactifs. */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible {
  outline: none;
}

/* ----------------------------------------------------------------------------
   Filet de sécurité sur les liens — 4 septembre 2026
   ----------------------------------------------------------------------------
   Un lien sans règle de couleur tombe sur le bleu du navigateur, et sur le
   violet sombre une fois visité. Sur fond vert profond, c'était illisible.
   La règle ci-dessous garantit qu'aucun lien ne puisse plus jamais y tomber :
   par défaut il prend la couleur de son texte porteur, toujours lisible.
   Sa faible spécificité laisse toutes les règles existantes l'emporter.
   ---------------------------------------------------------------------------- */
a { color: inherit; }

/* Les liens dans le texte courant se signalent par le laiton et un
   soulignement discret — la seule couleur d'action de la maison. */
p a,
li a {
  color: var(--laiton-texte);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.24s ease;
}
p a:hover,
li a:hover { color: var(--vert); }

/* Sur les fonds sombres, le laiton passe en clair pour rester lisible */
.tuile--sombre p a,
.tuile--sombre li a,
.page-hero p a,
.prest-sect p a,
.footer p a {
  color: var(--laiton-soft);
}
.tuile--sombre p a:hover,
.tuile--sombre li a:hover,
.page-hero p a:hover,
.prest-sect p a:hover,
.footer p a:hover { color: var(--ivoire); }

/* Sélection de texte aux couleurs de la maison */
::selection {
  background: var(--laiton-soft);
  color: var(--vert);
}
::-moz-selection {
  background: var(--laiton-soft);
  color: var(--vert);
}

/* Pas de flash bleu au toucher sur mobile */
* {
  -webkit-tap-highlight-color: rgba(184, 147, 90, 0.18);
}

/* Barre de défilement discrète, dans la palette */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--laiton-soft) var(--ivoire-warm);
}
::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}
::-webkit-scrollbar-track {
  background: var(--ivoire-warm);
}
::-webkit-scrollbar-thumb {
  background: rgba(184, 147, 90, 0.65);
  border-radius: 9999px;
  border: 3px solid var(--ivoire-warm);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--laiton);
}

/* Les caractères décoratifs ne sont pas sélectionnables : ils pollueraient
   un copier-coller sans rien apporter. */
.losange-fin,
.footer-lo,
.prob-prog__lb,
.scroll-hint__lb {
  user-select: none;
  -webkit-user-select: none;
}

/* Quand le JS pilote le défilement des ancres, on rend la main au natif :
   sinon chaque appel à scrollTo de la boucle d'animation serait lui-même
   adouci par le navigateur, et les deux mécanismes se combattraient. */
html.js { scroll-behavior: auto; }

body {
  font-family: var(--sans);
  background: var(--ivoire-pur);
  color: var(--charbon);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100vh;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Lien d'évitement — hors écran jusqu'à ce qu'il reçoive le focus clavier */
.skip-lien {
  position: absolute;
  top: -100px;
  left: 20px;
  z-index: 200;
  background: var(--laiton-soft);
  color: var(--vert);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14px;
  padding: 12px 22px;
  border-radius: 9999px;
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip-lien:focus {
  top: 16px;
  outline: 2px solid var(--vert);
  outline-offset: 2px;
}

/* ============================================================================
   NAVIGATION — fixe, glassmorphism vert profond
   ============================================================================ */
.nav-top {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 48px;
  background: rgba(15, 46, 36, 0.72);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.nav-top__wm {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 0.3em;
  color: var(--ivoire);
  padding-left: 0.3em;
  text-decoration: none;
}
.nav-top__lk {
  display: flex;
  gap: 34px;
  align-items: center;
}
.nav-top__lk a {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 14px;
  color: rgba(242, 235, 218, 0.75);
  text-decoration: none;
  transition: color 0.2s;
}
.nav-top__lk a:hover {
  color: var(--ivoire);
}
.nav-top__cta {
  background: var(--laiton-soft);
  color: var(--vert) !important;
  padding: 9px 18px;
  border-radius: 9999px;
  font-weight: 500;
  transition: background 0.2s, transform 0.2s;
}
.nav-top__cta:hover,
.nav-top__cta:focus-visible {
  background: var(--ivoire);
  transform: translateY(-1px);
}
@media (max-width: 900px) {
  .nav-top { padding: 16px 24px; }
  .nav-top__lk { gap: 20px; }
  .nav-top__lk a:not(.nav-top__cta) { display: none; }
}

/* ============================================================================
   TUILE GÉNÉRIQUE — chaque section fait une hauteur d'écran, densité basse
   ============================================================================ */
.tuile {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 120px 40px;
  position: relative;
}
.tuile--compacte { min-height: auto; padding: 110px 40px; }
.tuile--sombre { background: var(--vert); color: var(--ivoire); }
.tuile--vert-deep { background: var(--vert-deep); }
.tuile--claire { background: var(--ivoire-pur); color: var(--charbon); }
.tuile--warm { background: var(--ivoire); color: var(--charbon); }

/* Kicker : petite étiquette au-dessus du titre */
.kicker {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  margin-bottom: 22px;
}
.tuile--sombre .kicker { color: var(--laiton-soft); }
.tuile--claire .kicker,
.tuile--warm .kicker { color: var(--laiton-texte); }

/* Titre de section */
.titre {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 64px;
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-variation-settings: "opsz" 144, "SOFT" 30;
  max-width: 860px;
  margin-bottom: 26px;
}
.titre--ivoire { color: var(--ivoire); }
.titre--compact { font-size: 44px; margin-bottom: 52px; }
.tuile--claire .titre,
.tuile--warm .titre { color: var(--vert); }
.titre em {
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}
.tuile--sombre .titre em { color: var(--laiton-soft); }
.tuile--claire .titre em,
.tuile--warm .titre em { color: var(--laiton-deep); }

/* Chapeau sous le titre */
.lede {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 22px;
  line-height: 1.5;
  max-width: 560px;
  margin-bottom: 42px;
}
.tuile--sombre .lede { color: rgba(242, 235, 218, 0.72); }
.tuile--claire .lede,
.tuile--warm .lede { color: var(--charbon-soft); }

/* Pilule d'action — une seule couleur, le laiton */
.pill {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 17px;
  padding: 16px 36px;
  border-radius: 9999px;
  text-decoration: none;
  display: inline-block;
  transition: transform 0.18s, background 0.22s;
}
.pill--laiton { background: var(--laiton-soft); color: var(--vert); }
.pill--laiton:hover { background: var(--ivoire); }
.pill--vert { background: var(--vert); color: var(--ivoire); }
.pill--vert:hover { background: var(--vert-soft); }
.pill:active { transform: scale(0.96); }

.sous-pill {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 15px;
  margin-top: 20px;
}
.tuile--sombre .sous-pill { color: rgba(242, 235, 218, 0.45); }
.tuile--claire .sous-pill,
.tuile--warm .sous-pill { color: var(--charbon-mute); }

/* Reveal au scroll */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.vu { opacity: 1; transform: translateY(0); }

/* Variante à échelle — pour les visuels et les artefacts produit.
   L'élément entre en montant légèrement en échelle plutôt qu'en simple
   fondu : la sensation est celle d'un objet qui s'avance, pas d'un
   calque qui s'allume. Amélioration 1 (3 septembre 2026). */
.reveal--scale {
  opacity: 0;
  transform: translateY(40px) scale(0.965);
  transition: opacity 1.05s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1.05s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal--scale.vu {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ============================================================================
   CHORÉGRAPHIE D'ENTRÉE — amélioration 4 (3 septembre 2026)
   ----------------------------------------------------------------------------
   Les éléments d'un même groupe n'apparaissent plus en bloc : ils entrent
   les uns après les autres, avec 90 ms d'écart. Le décalage est déclaré en
   CSS par nth-child plutôt que calculé en JS — c'est prévisible, ça survit
   à l'ordre d'exécution, et ça ne coûte rien à l'exécution.
   Le décalage ne s'applique qu'aux groupes dont les éléments entrent
   ensemble dans le viewport ; ailleurs il créerait une latence perçue.
   ============================================================================ */

/* En-têtes de section — étiquette, titre, chapeau */
.prob-tete > .reveal:nth-child(1),
.simu-sect > .reveal:nth-child(1),
.prest-intro > .reveal:nth-child(1) { transition-delay: 0ms; }
.prob-tete > .reveal:nth-child(2),
.simu-sect > .reveal:nth-child(2),
.prest-intro > .reveal:nth-child(2) { transition-delay: 90ms; }
.prob-tete > .reveal:nth-child(3),
.simu-sect > .reveal:nth-child(3) { transition-delay: 180ms; }
.simu-sect > .reveal:nth-child(4) { transition-delay: 300ms; }

/* Section tarif — étiquette, titre, chapeau, grille */
#tarif > .reveal:nth-child(1) { transition-delay: 0ms; }
#tarif > .reveal:nth-child(2) { transition-delay: 90ms; }
#tarif > .reveal:nth-child(3) { transition-delay: 180ms; }
#tarif > .reveal:nth-child(4) { transition-delay: 300ms; }

/* Section preuve — étiquette, titre, intro, blocs, engagements, bouton, mention */
.preuve > .reveal:nth-child(1) { transition-delay: 0ms; }
.preuve > .reveal:nth-child(2) { transition-delay: 90ms; }
.preuve > .reveal:nth-child(3) { transition-delay: 180ms; }
.preuve > .reveal:nth-child(4) { transition-delay: 270ms; }
.preuve > .reveal:nth-child(5) { transition-delay: 360ms; }
.preuve > .reveal:nth-child(6) { transition-delay: 450ms; }
.preuve > .reveal:nth-child(7) { transition-delay: 520ms; }

/* Liste « tout est inclus » — huit lignes en cascade rapide */
.inc-l:nth-child(1) { transition-delay: 0ms; }
.inc-l:nth-child(2) { transition-delay: 60ms; }
.inc-l:nth-child(3) { transition-delay: 120ms; }
.inc-l:nth-child(4) { transition-delay: 180ms; }
.inc-l:nth-child(5) { transition-delay: 240ms; }
.inc-l:nth-child(6) { transition-delay: 300ms; }
.inc-l:nth-child(7) { transition-delay: 360ms; }
.inc-l:nth-child(8) { transition-delay: 420ms; }

/* Questions fréquentes — quatre entrées */
.faq-item:nth-child(1) { transition-delay: 0ms; }
.faq-item:nth-child(2) { transition-delay: 110ms; }
.faq-item:nth-child(3) { transition-delay: 220ms; }
.faq-item:nth-child(4) { transition-delay: 330ms; }

/* Clôture — manifeste, bouton, mention, losange */
.tuile--warm.tuile--compacte > .reveal:nth-child(1) { transition-delay: 0ms; }
.tuile--warm.tuile--compacte > .reveal:nth-child(2) { transition-delay: 120ms; }
.tuile--warm.tuile--compacte > .reveal:nth-child(3) { transition-delay: 240ms; }
.tuile--warm.tuile--compacte > .reveal:nth-child(4) { transition-delay: 340ms; }

/* En mouvement réduit, aucun décalage : tout est déjà visible */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal--scale, .inc-l, .faq-item { transition-delay: 0ms !important; }
}
.hero {
  background: var(--vert);
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 70% 45%, rgba(23, 69, 53, 0.5) 0%, transparent 55%),
    radial-gradient(ellipse at 25% 80%, rgba(184, 147, 90, 0.07) 0%, transparent 50%);
}
.hero-inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: 40px;
  max-width: 1280px;
  width: 100%;
  position: relative;
  z-index: 2;
  text-align: left;
}
.hero-txt { color: var(--ivoire); }
.hero-titre {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 56px;
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: var(--ivoire);
  font-variation-settings: "opsz" 144, "SOFT" 40;
  margin-bottom: 28px;
}
.hero-titre span {
  display: block;
  opacity: 0;
  transform: translateY(20px);
}
.hero-titre .a1 { animation: rise 1s cubic-bezier(0.22, 1, 0.36, 1) 2.3s forwards; }
.hero-titre .a2 { animation: rise 1s cubic-bezier(0.22, 1, 0.36, 1) 2.5s forwards; }
.hero-titre em {
  font-style: italic;
  color: var(--laiton-soft);
  /* WONK 1 : glyphes italiques alternatifs de Fraunces. Reserve aux
     grandes tailles, ou il donne du caractere sans se remarquer comme
     un effet. */
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}
.hero-lede {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 20px;
  line-height: 1.5;
  color: rgba(242, 235, 218, 0.8);
  max-width: 430px;
  margin-bottom: 42px;
  opacity: 0;
  transform: translateY(20px);
  animation: rise 1s cubic-bezier(0.22, 1, 0.36, 1) 2.75s forwards;
}
.hero-cta {
  opacity: 0;
  transform: translateY(20px);
  animation: rise 1s cubic-bezier(0.22, 1, 0.36, 1) 2.9s forwards;
}
.hero .sous-pill {
  color: rgba(242, 235, 218, 0.45);
  opacity: 0;
  animation: fadein 1s ease 3.2s forwards;
}

/* Scène téléphone + bruit qui s'apaise */
.scene {
  position: relative;
  height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bruit {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.carte {
  position: absolute;
  background: rgba(242, 235, 218, 0.07);
  border: 1px solid rgba(242, 235, 218, 0.12);
  border-radius: 10px;
  padding: 13px 15px;
  width: 210px;
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
}
.carte .pa {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(184, 147, 90, 0.3);
  flex-shrink: 0;
}
.carte .lncol { flex: 1; }
.carte .ln {
  height: 5px;
  border-radius: 3px;
  background: rgba(242, 235, 218, 0.25);
  margin-bottom: 5px;
}
.carte .ln.c { width: 55%; }
.k1 { top: 30px; left: 20px; animation: cv1 4s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards; }
.k2 { top: 110px; right: 10px; animation: cv2 4s cubic-bezier(0.4, 0, 0.2, 1) 0.5s forwards; }
.k3 { top: 290px; left: -10px; animation: cv3 4s cubic-bezier(0.4, 0, 0.2, 1) 0.7s forwards; }
.k4 { bottom: 80px; right: 30px; animation: cv4 4s cubic-bezier(0.4, 0, 0.2, 1) 0.55s forwards; }
.k5 { bottom: 30px; left: 50px; animation: cv5 4s cubic-bezier(0.4, 0, 0.2, 1) 0.9s forwards; }
@keyframes cv1 {
  0%   { opacity: 0; transform: translate(0, 0) rotate(-4deg) scale(0.9); }
  30%  { opacity: 1; transform: translate(10px, -6px) rotate(-4deg) scale(1); }
  60%  { opacity: 1; transform: translate(10px, -6px) rotate(-4deg) scale(1); }
  100% { opacity: 0; transform: translate(110px, 80px) rotate(0) scale(0.85); }
}
@keyframes cv2 {
  0%   { opacity: 0; transform: translate(0, 0) rotate(5deg) scale(0.9); }
  30%  { opacity: 1; transform: translate(-8px, 8px) rotate(5deg) scale(1); }
  60%  { opacity: 1; transform: translate(-8px, 8px) rotate(5deg) scale(1); }
  100% { opacity: 0; transform: translate(-80px, 100px) rotate(0) scale(0.85); }
}
@keyframes cv3 {
  0%   { opacity: 0; transform: translate(0, 0) rotate(-6deg) scale(0.9); }
  35%  { opacity: 1; transform: translate(6px, -4px) rotate(-6deg) scale(1); }
  60%  { opacity: 1; transform: translate(6px, -4px) rotate(-6deg) scale(1); }
  100% { opacity: 0; transform: translate(130px, 40px) rotate(0) scale(0.85); }
}
@keyframes cv4 {
  0%   { opacity: 0; transform: translate(0, 0) rotate(4deg) scale(0.9); }
  32%  { opacity: 1; transform: translate(-10px, -8px) rotate(4deg) scale(1); }
  60%  { opacity: 1; transform: translate(-10px, -8px) rotate(4deg) scale(1); }
  100% { opacity: 0; transform: translate(-110px, -50px) rotate(0) scale(0.85); }
}
@keyframes cv5 {
  0%   { opacity: 0; transform: translate(0, 0) rotate(-3deg) scale(0.9); }
  38%  { opacity: 1; transform: translate(8px, 6px) rotate(-3deg) scale(1); }
  60%  { opacity: 1; transform: translate(8px, 6px) rotate(-3deg) scale(1); }
  100% { opacity: 0; transform: translate(80px, -80px) rotate(0) scale(0.85); }
}

/* Wrapper de parallaxe — porte le translate3d piloté par le JS.
   Le téléphone garde son animation de flottement, les deux transforms
   ne se marchent plus dessus. */
.phone-wrap {
  position: relative;
  z-index: 4;
  /* will-change est posé et retiré dynamiquement par le JS selon la
     visibilité, pour ne pas réserver de mémoire GPU en permanence. */
}

/* Téléphone */
/* Téléphone — proportions et détails d'un iPhone moderne.
   Angles très arrondis, bord en dégradé qui imite le titane brossé,
   boutons latéraux, barre d'accueil en bas de l'écran. */
.phone {
  position: relative;
  z-index: 4;
  width: 286px;
  height: 573px;
  /* Le châssis : un dégradé oblique donne l'impression d'une tranche
     métallique qui capte la lumière différemment selon l'angle. */
  background: linear-gradient(145deg, #2b2b28 0%, #131310 20%, #0b0b09 50%, #131310 80%, #262622 100%);
  border-radius: 46px;
  padding: 3px;
  box-shadow:
    0 45px 95px rgba(0, 0, 0, 0.55),
    0 0 0 0.5px rgba(184, 147, 90, 0.28),
    inset 0 0 2px rgba(255, 255, 255, 0.10);
  opacity: 0;
  transform: translateY(40px) scale(0.94);
  animation:
    phone-in 1.4s cubic-bezier(0.22, 1, 0.36, 1) 2.0s forwards,
    flotte 7s ease-in-out 3.6s infinite;
}

/* Boutons latéraux — volume et veille, en léger relief sur la tranche */
.phone::before,
.phone::after {
  content: "";
  position: absolute;
  width: 2.5px;
  border-radius: 2px;
  background: linear-gradient(180deg, #24241f, #131310);
}
/* Volume haut, volume bas et bouton d'action, à gauche */
.phone::before {
  left: -2.5px;
  top: 118px;
  height: 108px;
  box-shadow: 0 -46px 0 0 #1c1c18, 0 -74px 0 0 #1c1c18;
}
/* Bouton de veille, à droite, plus long */
.phone::after {
  right: -2.5px;
  top: 148px;
  height: 74px;
}

/* Liseré intérieur noir entre le châssis et la dalle */
.ph-ecran {
  width: 100%;
  height: 100%;
  background: var(--ivoire);
  border-radius: 43px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 0 0 5px #060605;
}
.encoche {
  position: absolute;
  top: 11px;
  left: 50%;
  transform: translateX(-50%);
  width: 82px;
  height: 25px;
  background: #0c0c0c;
  border-radius: 20px;
  z-index: 12;
}
.statusbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 42px;
  padding: 15px 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: -apple-system, 'SF Pro Text', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--vert);
  z-index: 11;
  pointer-events: none;
}
.sb-hr {
  padding-left: 10px;
  line-height: 1;
  letter-spacing: -0.01em;
}
.sb-ic {
  display: flex;
  align-items: center;
  gap: 5px;
  padding-right: 8px;
}
/* Icônes de la barre d'état en SVG : les formes sont exactes, là où un
   clip-path CSS donnait des silhouettes approximatives. La couleur suit
   celle du texte de la barre. */
.sb-i {
  display: block;
  height: 11px;
  width: auto;
  fill: currentColor;
  color: var(--vert);
}
.sb-i--batt { height: 12px; }

.ecrans { position: absolute; inset: 0; }
.ecran {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  opacity: 0;
  visibility: hidden;
  background: var(--ivoire);
  transition: opacity 0.5s ease, visibility 0s linear 0.5s;
  z-index: 1;
}
.ecran.on {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease, visibility 0s linear 0s;
  z-index: 2;
}
/* Barre d'accueil — le trait fin en bas des iPhone modernes */
.barre-accueil {
  position: absolute;
  bottom: 9px;
  left: 50%;
  transform: translateX(-50%);
  width: 108px;
  height: 4px;
  border-radius: 2px;
  background: rgba(15, 46, 36, 0.28);
  z-index: 9;
}

/* Points du carrousel — sous le telephone, pas dessus. Les vraies captures
   ont deja leur propre barre d'onglets en bas d'ecran : superposer les deux
   brouillait la lecture. */
.points {
  display: flex;
  gap: 7px;
  justify-content: center;
  margin-top: 26px;
}
.points .pt {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(242, 235, 218, 0.22);
  transition: all 0.4s;
}
.points .pt.on {
  background: var(--laiton-soft);
  width: 20px;
  border-radius: 3px;
}
.scene::after {
  content: "";
  position: absolute;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(184, 147, 90, 0.13) 0%, transparent 68%);
  z-index: 1;
  opacity: 0;
  animation: fadein 2s ease 2.4s forwards;
}

@keyframes rise      { to { opacity: 1; transform: translateY(0); } }
@keyframes fadein    { to { opacity: 1; } }
@keyframes phone-in  { to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes flotte    { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ============================================================================
   2. PROBLÈME — voir règles cinématographiques plus bas
   ============================================================================ */
.prob .titre { max-width: 760px; }

/* ============================================================================
   3. SIMULATEUR — pièce maîtresse, qualité Apple radicale (2 sept 2026)
   ============================================================================ */
.simu-sect {
  padding-top: 130px;
  padding-bottom: 130px;
}
.simu-eb {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.24em;
  text-transform: lowercase;
  color: var(--laiton-deep);
  margin-bottom: 28px;
}
.simu-plateau {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  max-width: 1180px;
  width: 100%;
  background: #fff;
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 60px 160px rgba(15, 46, 36, 0.18), 0 8px 30px rgba(15, 46, 36, 0.06);
  min-height: 620px;
  text-align: left;
  margin-top: 24px;
}
.pan-reg {
  padding: 60px 52px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--ivoire-warm);
}
.etp { margin-bottom: 40px; }
.etp-n {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 22px;
}
.etp-n .n {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--vert);
  color: var(--laiton-soft);
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.etp-n .lb {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15px;
  color: var(--vert);
}
.segs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.seg {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 13.5px;
  color: var(--charbon-soft);
  background: var(--ivoire-pur);
  border: 1px solid var(--ivoire-warm);
  padding: 10px 18px;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.2s;
}
.seg:hover { border-color: var(--laiton-soft); }
.seg.on {
  background: var(--vert);
  color: var(--ivoire);
  border-color: var(--vert);
}
.av-opt {
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.5;
  color: var(--charbon-soft);
  background: var(--ivoire-pur);
  border: 1px solid var(--ivoire-warm);
  padding: 15px 17px;
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s;
  display: block;
  width: 100%;
  margin-bottom: 8px;
}
.av-opt:hover { border-color: var(--laiton-soft); }
.av-opt.on {
  border-color: var(--laiton);
  background: #fff;
  box-shadow: 0 6px 20px rgba(184, 147, 90, 0.14);
}
.av-opt .e {
  color: var(--laiton);
  font-size: 11.5px;
  letter-spacing: 2px;
  display: block;
  margin-bottom: 5px;
}
textarea.av-perso {
  width: 100%;
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.5;
  color: var(--charbon);
  background: var(--ivoire-pur);
  border: 1px solid var(--ivoire-warm);
  border-radius: 12px;
  padding: 15px 17px;
  resize: none;
  min-height: 72px;
  margin-top: 8px;
  transition: border-color 0.2s;
}
textarea.av-perso:focus {
  border-color: var(--laiton);
  box-shadow: 0 0 0 3px rgba(184, 147, 90, 0.14);
}
.btn-gen {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 16px;
  color: var(--vert);
  background: var(--laiton-soft);
  border: none;
  border-radius: 100px;
  padding: 17px 32px;
  cursor: pointer;
  margin-top: auto;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.btn-gen:hover:not(:disabled) {
  background: var(--laiton);
  transform: translateY(-1px);
}
.btn-gen:disabled { opacity: 0.5; cursor: default; }
.pan-rep {
  padding: 60px 52px;
  background: var(--vert);
  color: var(--ivoire);
  display: flex;
  flex-direction: column;
  position: relative;
}
.pan-rep::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 80% 30%, rgba(184, 147, 90, 0.08) 0%, transparent 60%);
  pointer-events: none;
}
.rep-tete {
  display: flex;
  align-items: center;
  gap: 13px;
  padding-bottom: 26px;
  margin-bottom: 28px;
  border-bottom: 1px solid rgba(242, 235, 218, 0.14);
  position: relative;
}
.rep-tete .g {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--vert-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 13px;
  color: var(--laiton-soft);
  font-weight: 600;
}
.rep-tete .t {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14px;
  color: rgba(242, 235, 218, 0.9);
}
.rep-tete .bg {
  margin-left: auto;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--laiton-soft);
  font-weight: 500;
}
.rap-av {
  background: rgba(242, 235, 218, 0.06);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 24px;
  position: relative;
}
.rap-av .e {
  color: var(--laiton-soft);
  font-size: 12px;
  letter-spacing: 2px;
  margin-bottom: 7px;
}
.rap-av .t {
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.55;
  color: rgba(242, 235, 218, 0.8);
  font-style: italic;
}
.rep-lb {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--laiton-soft);
  margin-bottom: 14px;
  display: none;
  position: relative;
}
.rep-lb.on { display: block; }
.rep-co {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.75;
  color: var(--ivoire);
  flex: 1;
  font-variation-settings: "opsz" 80;
  min-height: 130px;
  position: relative;
}
.rep-co .cur {
  display: inline-block;
  width: 2px;
  height: 18px;
  background: var(--laiton-soft);
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: clign 0.8s step-end infinite;
}
@keyframes clign { 50% { opacity: 0; } }
.rep-vide {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: rgba(242, 235, 218, 0.4);
}
.rep-vide .lo {
  font-size: 22px;
  color: var(--laiton-soft);
  margin-bottom: 16px;
  opacity: 0.7;
}
.rep-vide p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
}
.charg {
  display: flex;
  gap: 6px;
}
.charg span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--laiton-soft);
  animation: pulse 1.2s ease-in-out infinite;
}
.charg span:nth-child(2) { animation-delay: 0.15s; }
.charg span:nth-child(3) { animation-delay: 0.3s; }
@keyframes pulse {
  0%, 100% { opacity: 0.3; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1); }
}

/* ============================================================================
   5. PRESTATIONS — section épinglée (3 septembre 2026)
   Le visuel reste fixe (position: sticky) pendant que les quatre textes
   défilent ; le visuel actif change au passage de chaque texte, piloté par
   IntersectionObserver côté JS. Pattern Apple emblématique.
   ============================================================================ */
.prest-sect {
  background: var(--vert);
  padding-bottom: 40px;
}
.prest-intro {
  padding: 130px 40px 40px;
  text-align: center;
}
.prest-intro .titre { margin: 0 auto; }

.prest-pin {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 40px;
  align-items: start;
}

/* Colonne visuelle — épinglée pendant toute la traversée */
.prest-pin__vis {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.prest-pin__cadre {
  position: relative;
  width: 100%;
  max-width: 420px;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Chaque visuel occupe le même emplacement ; un seul est actif à la fois */
.pvs {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(24px) scale(0.97);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              visibility 0s linear 0.6s;
  will-change: opacity, transform;
}
.pvs.on {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              visibility 0s linear 0s;
}

/* Colonne textuelle — défile normalement */
.prest-pin__txt {
  padding: 12vh 0 18vh;
}
.prest-bloc {
  min-height: 78vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Estompage uniquement si le JS tourne : sans lui, tout reste lisible */
.js .prest-bloc { opacity: 0.28; }
.js .prest-bloc.actif { opacity: 1; }
.prest-bloc__eb {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.28em;
  color: var(--laiton-soft);
  margin-bottom: 26px;
}
.prest-bloc__ti {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 62px;
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--ivoire);
  font-variation-settings: "opsz" 144, "SOFT" 40;
  margin-bottom: 26px;
}
.prest-bloc__desc {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 20px;
  line-height: 1.55;
  color: rgba(242, 235, 218, 0.72);
  max-width: 440px;
}

/* Les visuels sur fond vert : ombres portées plus profondes */
.pvs .ap-avis,
.pvs .ap-fiche {
  box-shadow: 0 50px 120px rgba(0, 0, 0, 0.42);
}

/* Visuel 01 — avis Google */
.ap-avis {
  background: var(--ivoire);
  border-radius: 20px;
  padding: 32px 30px;
  max-width: 400px;
  width: 100%;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.35);
}
.ap-avis__tete { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ap-avis__g {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--vert); color: var(--laiton-soft);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-weight: 600; font-size: 13px;
}
.ap-avis__nom { font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--vert); }
.ap-avis__et { color: var(--laiton); font-size: 14px; letter-spacing: 2px; margin-bottom: 10px; }
.ap-avis__ms {
  font-family: var(--serif); font-size: 15px; line-height: 1.55;
  color: var(--charbon-soft); margin-bottom: 20px; font-variation-settings: "opsz" 80;
}
.ap-avis__rep {
  border-left: 2px solid var(--laiton);
  padding: 4px 0 4px 16px;
  margin-top: 20px;
}
.ap-avis__rep-eb {
  font-family: var(--sans); font-size: 10px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--laiton-deep);
  margin-bottom: 6px;
}
.ap-avis__rep-tx {
  font-family: var(--serif); font-style: italic; font-size: 14.5px;
  line-height: 1.55; color: var(--vert); font-variation-settings: "opsz" 80, "SOFT" 100;
}

/* Visuel 02 — SMS de rappel */
.ap-sms {
  max-width: 360px;
  width: 100%;
}
.ap-sms__eb {
  font-family: var(--sans); font-weight: 600; font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--laiton-deep);
  margin-bottom: 20px; text-align: center;
}
.ap-sms__bulle {
  background: var(--vert);
  color: var(--ivoire);
  border-radius: 20px 20px 20px 4px;
  padding: 18px 22px;
  font-family: var(--serif); font-size: 15.5px; line-height: 1.5;
  margin-bottom: 12px;
  box-shadow: 0 20px 50px rgba(15, 46, 36, 0.14);
  max-width: 300px;
}
.ap-sms__bulle--rep {
  background: rgba(15, 46, 36, 0.09);
  color: var(--vert);
  border-radius: 20px 20px 4px 20px;
  margin-left: auto;
  max-width: 245px;
  box-shadow: none;
}
/* Confirmation — ce que la reponse du client declenche dans la maison */
.ap-sms__etat {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--laiton-deep);
  text-align: right;
  margin-top: 14px;
}

/* Visuel 03 — Fiche Google */
.ap-fiche {
  background: #fff;
  border-radius: 16px;
  padding: 28px 30px;
  max-width: 400px;
  width: 100%;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.35);
}
.ap-fiche__nom {
  font-family: var(--serif); font-weight: 500; font-size: 22px;
  color: var(--vert); margin-bottom: 4px; font-variation-settings: "opsz" 80;
}
.ap-fiche__meta {
  font-family: var(--sans); font-size: 13px; color: var(--charbon-mute);
  margin-bottom: 22px;
}
.ap-fiche__rows { margin-bottom: 20px; }
.ap-fiche__row {
  display: flex; justify-content: space-between; padding: 10px 0;
  border-bottom: 1px solid rgba(28, 26, 23, 0.06);
  font-family: var(--sans); font-size: 13.5px;
}
.ap-fiche__row:last-child { border-bottom: none; }
.ap-fiche__j { color: var(--charbon-soft); font-weight: 500; }
.ap-fiche__h { color: var(--vert); }
.ap-fiche__h--ferme { color: var(--charbon-mute); }
.ap-fiche__ok {
  font-family: var(--sans); font-size: 12px; color: var(--laiton-deep);
  padding-top: 14px; border-top: 1px solid rgba(184, 147, 90, 0.2);
  letter-spacing: 0.02em;
}

/* Visuel 04 — présentoir QR de table.
   Le code est un vrai QR scannable pointant vers velm.tech, généré en SVG
   et posé en ligne dans la page. La carte imite un chevalet posé sur une
   table : fond ivoire, léger basculement en perspective, ombre sous le
   bord inférieur. */
.ap-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  max-width: 300px;
  width: 100%;
}
.ap-qr__carte {
  background: var(--ivoire);
  border-radius: 14px;
  padding: 26px 24px 22px;
  width: 100%;
  max-width: 232px;
  text-align: center;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.42),
              0 2px 0 rgba(0, 0, 0, 0.3);
  transform: perspective(760px) rotateX(6deg);
  transform-origin: bottom center;
}
.ap-qr__eb {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--laiton-deep);
  margin-bottom: 16px;
}
.ap-qr .qr {
  display: block;
  width: 134px;
  height: 134px;
  margin: 0 auto 16px;
}
.ap-qr__nom {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 14px;
  color: var(--vert);
  padding-top: 12px;
  border-top: 1px solid rgba(15, 46, 36, 0.12);
  font-variation-settings: "opsz" 60;
}
.ap-qr__lb {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: rgba(242, 235, 218, 0.8);
  line-height: 1.5;
  text-align: center;
  font-variation-settings: "opsz" 80, "SOFT" 100;
}

/* ============================================================================
   MICRO-INTERACTIONS — 2 septembre 2026
   Élévation subtile sur les éléments interactifs, transitions plus fluides.
   ============================================================================ */
.pill--laiton,
.pill--vert {
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.22s ease,
              box-shadow 0.28s ease;
}
.pill--laiton:hover,
.pill--vert:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(184, 147, 90, 0.28);
}
.palier-c {
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.32s ease,
              border-color 0.32s ease;
}
.palier-c--actif:hover {
  transform: translateY(-4px);
  box-shadow: 0 40px 100px rgba(184, 147, 90, 0.22);
}
.pv-bloc {
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.32s ease;
}
.pv-bloc:hover {
  transform: translateY(-3px);
  background: rgba(242, 235, 218, 0.09);
}
.faq-item {
  transition: padding 0.28s ease;
}

/* ============================================================================
   SCROLL-HINT — flèche pulsante en bas du hero
   ============================================================================ */
.scroll-hint {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: rgba(242, 235, 218, 0.55);
  z-index: 5;
  opacity: 0;
  animation: scroll-hint-in 1s ease 3.6s forwards;
  transition: color 0.24s ease;
}
.scroll-hint:hover {
  color: var(--laiton-soft);
}
.scroll-hint__lb {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.scroll-hint__arrow {
  width: 1px;
  height: 30px;
  background: currentColor;
  position: relative;
  animation: scroll-bounce 2.2s ease-in-out infinite;
}
.scroll-hint__arrow::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 7px;
  height: 7px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
}
@keyframes scroll-hint-in {
  to { opacity: 1; }
}
@keyframes scroll-bounce {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50% { transform: translateY(6px); opacity: 1; }
}

/* ============================================================================
   PROBLÈME épinglé — amélioration 1 (3 septembre 2026)
   Le chiffre-vedette reste fixe (position: sticky) pendant que les trois
   douleurs défilent à côté. Pattern Apple, sans JS, accéléré GPU.
   La tuile passe en align-items: stretch pour que la grille prenne
   toute la largeur et que le sticky ait de la course.
   ============================================================================ */
.prob {
  justify-content: flex-start;
  padding-top: 130px;
  padding-bottom: 130px;
}
.prob-tete {
  max-width: 860px;
  margin: 0 auto 100px;
  text-align: center;
}
.prob-tete .lede {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
}

.prob-pin {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 90px;
  max-width: 1140px;
  width: 100%;
  margin: 0 auto;
  align-items: start;
}

/* Colonne fixe — reste épinglée pendant le défilement du flux */
.prob-pin__fixe {
  position: sticky;
  top: 26vh;
  text-align: left;
  align-self: start;
}
.prob-hero__ch {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: 82px;
  line-height: 0.98;
  letter-spacing: -0.04em;
  color: var(--vert);
  margin-bottom: 28px;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}
.prob-hero__dc {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.6;
  color: var(--charbon-soft);
  max-width: 380px;
}
/* Indicateur de progression — chantier a de l'amélioration 1.
   Un filet laiton qui se remplit à mesure que les trois douleurs défilent. */
.prob-prog {
  margin-top: 40px;
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 300px;
}
.prob-prog__rail {
  flex: 1;
  height: 1px;
  background: rgba(28, 26, 23, 0.14);
  position: relative;
  overflow: hidden;
}
.prob-prog__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 33.33%;
  background: var(--laiton);
  transition: width 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.prob-prog__lb {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--laiton-deep);
  white-space: nowrap;
}
/* Les douleurs s'estompent hors focus, comme les blocs de prestations */
.prob-item {
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.js .prob-item { opacity: 0.32; }
.js .prob-item.actif { opacity: 1; }

/* Colonne qui défile */
.prob-pin__flux {
  text-align: left;
  padding-top: 8px;
}
.prob-item {
  padding: 44px 0;
  min-height: 46vh;
  border-bottom: 1px solid rgba(28, 26, 23, 0.09);
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 30px;
  align-content: center;
  align-items: start;
}
.prob-item:first-child { padding-top: 0; }
.prob-item:last-child { border-bottom: none; padding-bottom: 0; }
.prob-item__n {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 34px;
  color: var(--laiton);
  line-height: 1;
  padding-top: 4px;
  font-variation-settings: "opsz" 144;
}
.prob-item__co b {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 24px;
  color: var(--vert);
  display: block;
  margin-bottom: 10px;
  line-height: 1.25;
  font-variation-settings: "opsz" 80;
}
.prob-item__desc {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--charbon-soft);
}

/* ============================================================================
   PREUVE renforcée — intro + blocs maisons + engagements + trust signal
   ============================================================================ */
.pv-intro {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.65;
  color: rgba(242, 235, 218, 0.75);
  max-width: 620px;
  margin: 0 auto 40px;
  font-variation-settings: "opsz" 60;
}
.pv-engagements {
  margin: 60px auto 40px;
  max-width: 900px;
  width: 100%;
  padding-top: 48px;
  border-top: 1px solid rgba(242, 235, 218, 0.14);
}
.pv-eng-titre {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--laiton-soft);
  margin-bottom: 32px;
  text-align: center;
}
.pv-eng-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  text-align: left;
}
.pv-eng {
  padding: 0;
}
.pv-eng-nom {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 17px;
  color: var(--ivoire);
  margin-bottom: 10px;
  font-variation-settings: "opsz" 80;
}
.pv-eng-desc {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(242, 235, 218, 0.6);
}

/* ============================================================================
   5. PREUVE (paragraphe fondateur retiré selon arbitrage David du 2 sept)
   ============================================================================ */
.preuve .titre { max-width: 780px; }
.preuve-blocs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 720px;
  width: 100%;
  margin: 40px 0;
  text-align: center;
}
.pv-bloc {
  background: rgba(242, 235, 218, 0.06);
  border-radius: 16px;
  padding: 40px 32px;
}
.pv-nom {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 22px;
  color: var(--ivoire);
  font-variation-settings: "opsz" 80;
}

/* ============================================================================
   6. TARIF — trois paliers côte à côte (2 septembre 2026)
   Essential dominant visuellement (seul avec bouton actif), Pro et
   Premium en horizon avec statut "retour en ouverture".
   ============================================================================ */
.paliers-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  gap: 18px;
  max-width: 1180px;
  width: 100%;
  margin-top: 40px;
  align-items: stretch;
}
.palier-c {
  background: rgba(242, 235, 218, 0.04);
  border: 1px solid rgba(242, 235, 218, 0.08);
  border-radius: 18px;
  padding: 34px 26px 30px;
  display: flex;
  flex-direction: column;
  text-align: left;
  position: relative;
}
.palier-c--actif {
  background: var(--ivoire);
  border-color: var(--laiton);
  box-shadow: 0 30px 80px rgba(184, 147, 90, 0.18);
}
.palier-c--horizon {
  opacity: 0.65;
}
.palier-c__eb {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--laiton-deep);
  margin-bottom: 22px;
  padding-left: 0.22em;
}
.palier-c--horizon .palier-c__eb {
  color: rgba(184, 147, 90, 0.6);
}
.palier-c__nom {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 30px;
  color: var(--vert);
  margin-bottom: 14px;
  font-variation-settings: "opsz" 80;
}
.palier-c--horizon .palier-c__nom {
  color: rgba(242, 235, 218, 0.75);
}
.palier-c__prix {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 2px;
}
.palier-c__chiffre {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 56px;
  line-height: 1;
  color: var(--vert);
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 144;
}
.palier-c--horizon .palier-c__chiffre {
  color: rgba(242, 235, 218, 0.7);
}
.palier-c__eu {
  font-family: var(--serif);
  font-size: 26px;
  color: var(--laiton-deep);
}
.palier-c--horizon .palier-c__eu {
  color: rgba(184, 147, 90, 0.55);
}
.palier-c__ht {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 13px;
  color: var(--charbon-mute);
  margin-left: 4px;
  letter-spacing: 0.02em;
}
.palier-c--horizon .palier-c__ht {
  color: rgba(242, 235, 218, 0.4);
}
.palier-c__per {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--charbon-mute);
  margin-bottom: 24px;
}
.palier-c--horizon .palier-c__per {
  color: rgba(242, 235, 218, 0.4);
}
.palier-c__pr {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.5;
  color: var(--vert);
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(28, 26, 23, 0.08);
  font-variation-settings: "opsz" 80, "SOFT" 100;
  min-height: 68px;
}
.palier-c--horizon .palier-c__pr {
  color: rgba(242, 235, 218, 0.6);
  border-bottom-color: rgba(242, 235, 218, 0.1);
}
.palier-c__heritage {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--charbon-mute);
  margin: 0 0 14px;
  font-variation-settings: "opsz" 80, "SOFT" 100;
}
.palier-c--horizon .palier-c__heritage {
  color: rgba(242, 235, 218, 0.5);
}
.palier-c__caps {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  flex: 1;
}
.palier-c__caps li {
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--charbon-soft);
  padding: 8px 0 8px 18px;
  position: relative;
}
.palier-c__caps li::before {
  content: "—";
  color: var(--laiton);
  position: absolute;
  left: 0;
  font-weight: 300;
}
.palier-c--horizon .palier-c__caps li {
  color: rgba(242, 235, 218, 0.55);
}
.palier-c--horizon .palier-c__caps li::before {
  color: rgba(184, 147, 90, 0.5);
}
.palier-c__cta {
  align-self: flex-start;
  margin-top: 8px;
}
/* Conditions du palier — frais, engagement, preavis. L'ancien site les
   donnait, leur absence rendait l'offre moins claire qu'elle ne l'est. */
.palier-c__cond {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid rgba(28, 26, 23, 0.1);
}
.palier-c__cond p {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--charbon-mute);
  margin-bottom: 11px;
}
.palier-c__cond p:last-child { margin-bottom: 0; }
.palier-c__cond-prix em {
  font-family: var(--serif);
  font-style: italic;
  color: var(--vert);
  font-variation-settings: "opsz" 60, "SOFT" 100;
}
.palier-c--horizon .palier-c__cond {
  border-top-color: rgba(242, 235, 218, 0.12);
  margin-top: auto;
}
.palier-c--horizon .palier-c__cond p { color: rgba(242, 235, 218, 0.45); }
.palier-c--horizon .palier-c__statut { margin-top: 18px; }

/* Mention de livraison progressive — exigence de l'article 3 des CGV */
.tarif-mention {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(242, 235, 218, 0.5);
  text-align: center;
  max-width: 620px;
  margin: 48px auto 0;
  font-variation-settings: "opsz" 80, "SOFT" 100;
}
.palier-c__statut {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: lowercase;
  color: var(--laiton);
  padding-top: 16px;
  border-top: 1px solid rgba(242, 235, 218, 0.12);
  margin-top: auto;
  line-height: 1.5;
}

/* ============================================================================
   7a. INCLUS — liste dense en deux colonnes
   ============================================================================ */
.inclus {
  max-width: 680px;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 52px;
  margin-top: 8px;
  text-align: left;
}
.inc-l {
  display: flex;
  align-items: baseline;
  gap: 13px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(28, 26, 23, 0.09);
  font-family: var(--serif);
  font-size: 17px;
  color: var(--charbon);
  font-variation-settings: "opsz" 60;
}
.inc-l .p {
  color: var(--laiton);
  flex-shrink: 0;
  font-size: 13px;
}

/* ============================================================================
   7b. FAQ
   ============================================================================ */
.faq-liste {
  max-width: 720px;
  width: 100%;
  margin-top: 20px;
  text-align: left;
}
.faq-item {
  border-bottom: 1px solid rgba(242, 235, 218, 0.14);
  padding: 26px 0;
}
.faq-item:last-child { border-bottom: none; }
.faq-q {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 21px;
  color: var(--ivoire);
  margin-bottom: 12px;
  font-variation-settings: "opsz" 80;
}
.faq-a {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(242, 235, 218, 0.72);
}

/* ============================================================================
   7c. FINAL / MANIFESTE
   ============================================================================ */
.final-manifeste {
  max-width: 620px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 26px;
  line-height: 1.5;
  color: var(--vert);
  margin-bottom: 40px;
  font-variation-settings: "opsz" 144, "SOFT" 100;
}
.final-manifeste b {
  font-style: normal;
  font-weight: 500;
}
.losange-fin {
  color: var(--laiton);
  font-size: 18px;
  margin-top: 48px;
}

/* ============================================================================
   FOOTER
   ============================================================================ */
.footer {
  background: var(--vert-deep);
  color: rgba(242, 235, 218, 0.55);
  padding: 70px 40px 60px;
  text-align: center;
  font-family: var(--sans);
  font-size: 14px;
}
.footer-inner {
  max-width: 820px;
  margin: 0 auto;
}
.footer-wm {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.3em;
  color: var(--ivoire);
  padding-left: 0.3em;
  margin-bottom: 14px;
  display: block;
}
.footer-baseline {
  font-family: var(--sans);
  font-size: 14px;
  color: rgba(242, 235, 218, 0.55);
  margin-bottom: 4px;
}
.footer-lo {
  color: var(--laiton);
  margin: 24px 0;
  font-size: 16px;
}
.footer-liens {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px 26px;
  margin-bottom: 26px;
}
.footer-liens a {
  color: rgba(242, 235, 218, 0.7);
  text-decoration: none;
  font-family: var(--sans);
  font-size: 13px;
  transition: color 0.2s;
}
.footer-liens a:hover { color: var(--ivoire); }
.footer-coord {
  font-family: var(--sans);
  font-size: 13px;
  color: rgba(242, 235, 218, 0.55);
  margin-bottom: 12px;
  line-height: 1.7;
}
.footer-coord a {
  color: rgba(242, 235, 218, 0.55);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-coord a:hover { color: var(--ivoire); }
.footer-coord .sep {
  margin: 0 10px;
  color: rgba(242, 235, 218, 0.3);
}
.footer-legal {
  font-family: var(--sans);
  font-size: 12px;
  color: rgba(242, 235, 218, 0.4);
  letter-spacing: 0.02em;
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width: 1080px) {
  /* Prestations — l'épinglage est abandonné : les deux colonnes passent en
     display: contents, leurs enfants deviennent enfants directs de la grille,
     et l'ordre entrelace les paires visuel / texte. */
  .prest-pin {
    grid-template-columns: 1fr;
    gap: 0;
    max-width: 560px;
  }
  .prest-pin__vis,
  .prest-pin__txt {
    display: contents;
    position: static;
    height: auto;
  }
  .prest-pin__cadre {
    display: contents;
  }
  .pvs {
    position: static;
    inset: auto;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-height: auto;
    padding: 24px 0 44px;
  }
  .pvs[data-i="0"] { order: 2; }
  .pvs[data-i="1"] { order: 4; }
  .pvs[data-i="2"] { order: 6; }
  .pvs[data-i="3"] { order: 8; }
  .prest-bloc[data-i="0"] { order: 1; }
  .prest-bloc[data-i="1"] { order: 3; }
  .prest-bloc[data-i="2"] { order: 5; }
  .prest-bloc[data-i="3"] { order: 7; }
  .prest-bloc {
    min-height: auto;
    opacity: 1;
    padding-top: 56px;
    text-align: center;
  }
  .prest-bloc__desc { margin: 0 auto; }
  .prest-pin__txt { padding: 0; }
  /* Paliers légèrement resserrés à cette taille, mais toujours en 3 colonnes */
  .palier-c { padding: 28px 22px 26px; }
  .palier-c__chiffre { font-size: 48px; }
}
@media (max-width: 900px) {
  /* Problème — le layout épinglé passe en colonne unique, sticky désactivé.
     La hauteur imposée aux douleurs est levée : sans épinglage, elle ne
     créerait que du vide. */
  .prob-pin {
    grid-template-columns: 1fr;
    gap: 56px;
    max-width: 560px;
  }
  .prob-pin__fixe {
    position: static;
    top: auto;
    text-align: center;
  }
  .prob-item {
    min-height: auto;
    padding: 32px 0;
  }
  .prob-prog { margin: 36px auto 0; }
  .prob-hero__dc { margin: 0 auto; }
  .prob-tete { margin-bottom: 64px; }
  .prob { padding-top: 100px; padding-bottom: 100px; }
  /* Bascule paliers en colonne unique seulement en dessous de 900px */
  .paliers-grid { grid-template-columns: 1fr; max-width: 540px; gap: 24px; }
  .palier-c--horizon { opacity: 0.75; }
  .palier-c__pr { min-height: auto; }
  .palier-c { padding: 34px 28px 30px; }
  .palier-c__chiffre { font-size: 56px; }
  /* Engagements passent en 2 colonnes */
  .pv-eng-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  /* Chiffre-vedette réduit */
  .prob-hero__ch { font-size: 62px; }
  .titre { font-size: 40px; }
  .titre--compact { font-size: 34px; margin-bottom: 40px; }
  .hero-inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 48px;
  }
  .hero-txt { text-align: center; }
  .hero-titre { font-size: 38px; }
  .hero-lede { margin: 0 auto 42px; }
  .scene { order: 2; height: 540px; }
  .simu-plateau { grid-template-columns: 1fr; }
  .pan-reg {
    border-right: none;
    border-bottom: 1px solid var(--ivoire-warm);
  }
  .preuve-blocs { grid-template-columns: 1fr; }
  .inclus { grid-template-columns: 1fr; }
  .tuile { padding: 100px 24px; }
  .tuile--compacte { padding: 80px 24px; }
  .footer-coord .sep { display: block; margin: 4px 0; visibility: hidden; height: 4px; }
  .prest-bloc__ti { font-size: 42px; }
  .prest-intro { padding: 100px 24px 24px; }
  .prest-pin { padding: 0 24px; }
}
@media (max-width: 560px) {
  .titre { font-size: 34px; }
  .hero-titre { font-size: 32px; }
  .prest-bloc__ti { font-size: 34px; }
  .palier-c__chiffre { font-size: 46px; }
  .prob-hero__ch { font-size: 46px; }
  .pv-eng-grid { grid-template-columns: 1fr; gap: 24px; }
  .prob-item { grid-template-columns: 42px 1fr; gap: 20px; }
  .prob-item__n { font-size: 24px; }
  .prob-item__co b { font-size: 19px; }
}

/* ============================================================================
   PRÉFÉRENCES DE MOUVEMENT — respect strict de prefers-reduced-motion
   Toutes les animations sont neutralisées, seuls les états finaux comptent.
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .hero-titre span,
  .hero-lede,
  .hero-cta,
  .hero .sous-pill,
  .phone { opacity: 1 !important; transform: none !important; }
  .carte { opacity: 0 !important; }
  .reveal { opacity: 1 !important; transform: none !important; transition-delay: 0s !important; }
  .reveal--scale { opacity: 1 !important; transform: none !important; transition-delay: 0s !important; }
  .scroll-hint { opacity: 1 !important; }
  .scroll-hint__arrow { animation: none !important; }
  /* Amélioration 1 — la parallaxe est déjà coupée côté JS ; on neutralise
     aussi les transforms résiduels et l'épinglage, qui peut désorienter. */
  .phone-wrap,
  .scene, .hero-txt { transform: none !important; }
  .prob-pin__fixe { position: static !important; }
}

/* ============================================================================
   IMPRESSION — amélioration 6 (3 septembre 2026)
   ----------------------------------------------------------------------------
   Un restaurateur peut vouloir imprimer la page pour la relire ou la montrer
   à son associé. On retire tout ce qui n'a pas de sens sur papier — fonds
   sombres, animations, éléments épinglés, navigation, décor — et on rend le
   texte lisible en noir sur blanc. Les prix et les capacités restent l'objet
   du document.
   ============================================================================ */
@media print {
  html, body {
    background: #fff !important;
    color: #000 !important;
  }

  /* Rien de tout cela n'a de sens sur papier */
  .nav-top,
  .skip-lien,
  .scroll-hint,
  .scene,
  .phone-wrap,
  .bruit,
  .prob-prog,
  .simu-plateau,
  .pvs { display: none !important; }

  /* Les fonds sombres deviennent blancs, le texte devient noir */
  .tuile,
  .tuile--sombre,
  .tuile--vert-deep,
  .tuile--claire,
  .tuile--warm,
  .prest-sect,
  .footer {
    background: #fff !important;
    color: #000 !important;
    min-height: auto !important;
    padding: 20px 0 !important;
    page-break-inside: avoid;
  }

  .titre,
  .titre--ivoire,
  .hero-titre,
  .prest-bloc__ti,
  .palier-c__nom,
  .prob-hero__ch,
  .faq-q,
  .pv-nom,
  .pv-eng-nom { color: #000 !important; }

  .lede,
  .hero-lede,
  .prest-bloc__desc,
  .prob-item__desc,
  .faq-a,
  .palier-c__caps li,
  .pv-eng-desc { color: #333 !important; }

  .kicker,
  .simu-eb,
  .prest-bloc__eb,
  .palier-c__eb,
  .prob-item__n,
  .palier-c__statut { color: #666 !important; }

  /* Les prix restent l'information centrale */
  .palier-c__chiffre,
  .palier-c__eu,
  .palier-c__ht { color: #000 !important; }

  /* Aucun épinglage, aucune animation, aucune opacité résiduelle */
  .prob-pin__fixe,
  .prest-pin__vis {
    position: static !important;
    height: auto !important;
  }
  .prob-pin,
  .prest-pin,
  .paliers-grid,
  .pv-eng-grid,
  .inclus {
    display: block !important;
  }
  .reveal,
  .reveal--scale,
  .prest-bloc,
  .prob-item,
  .palier-c,
  .palier-c--horizon {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    box-shadow: none !important;
  }
  .prest-bloc,
  .prob-item {
    min-height: auto !important;
    padding: 14px 0 !important;
  }
  .palier-c {
    border: 1px solid #999 !important;
    margin-bottom: 16px;
    page-break-inside: avoid;
  }

  /* L'adresse des liens est imprimée : sur papier, un lien sans URL est mort */
  a[href^="/"]::after {
    content: " (velm.tech" attr(href) ")";
    font-size: 0.85em;
    color: #666;
  }
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #666;
  }
  a[href^="#"]::after { content: ""; }
}