/* Inter, hébergée chez nous : licence libre (SIL OFL), aucun appel à un service
   de polices tiers depuis le navigateur du médecin. C'est la police de Heidi,
   et surtout celle qui fait qu'un site cesse de ressembler au réglage par défaut
   du système — San Francisco sur un Mac, Segoe sur un PC, jamais le même dessin.
   Une seule fonte variable par style : deux fichiers, 150 Ko en tout.
   La licence exige que son texte accompagne la police : `inter-OFL.txt`, à côté. */
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/site/inter-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Inter"; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url("/site/inter-latin-italic.woff2") format("woff2");
}

/* Solys — le site. Rien de commun avec l'application : sa propre grille, sa propre
   palette, son propre rythme. Seule la marque est partagée : l'accent et le glyphe d'onde. */

/* Essai du 25/09 : l'accent n'est plus le bleu mais le vert lime, celui de l'encadré
   « 3 fois ». Le bleu ne reste que là, en encadré inversé. Le lime est clair : sur une
   surface lime on écrit à l'encre, jamais en blanc, et pour du texte sur papier on
   descend à l'olive (--accent-texte), sinon rien n'est lisible. */
:root {
  --accent: #d6f24b;
  --accent-fonce: #bfdd2f;        /* survol, fin de dégradé */
  --accent-clair: #f3fbd2;        /* lavis, pastilles */
  --accent-texte: #56690a;        /* l'accent quand il doit être lu sur du papier */
  --accent-nuit: #242e07;         /* la respiration sombre de la page */
  --sur-accent: #1c1b19;          /* ce qu'on écrit sur du lime */
  --accent-rgb: 214, 242, 75;
  --bleu: #2b54e6;                /* gardé pour l'encadré inversé, et lui seul */
  --encre: #1c1b19;
  --encre-2: #55524c;
  --encre-3: #8b877f;
  --papier: #ffffff;
  --papier-2: #faf9f7;
  --papier-3: #f5f4f1;
  --bord: #e8e6e1;
  --bord-fort: #d7d4cd;
  --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 34px; --r-pill: 999px;
  --large: 1180px;
  --font: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --t: 260ms cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--font); color: var(--encre); background: var(--papier);
  -webkit-font-smoothing: antialiased; font-size: 17px; line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.contenu { width: min(100% - 40px, var(--large)); margin-inline: auto; }

/* ------------------------------------------------------------- navigation */
/* Un vrai bandeau, sur toute la largeur, du haut à la fin du défilement. La
   pilule flottante faisait joli sur une capture et mal sur un téléphone : elle
   coupait le texte en deux, et son flou d'arrière-plan coûtait une image sur
   deux au défilement. */
.nav {
  position: sticky; top: 0; z-index: 50; width: 100%;
  background: rgba(255, 255, 255, .92);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t), box-shadow var(--t);
}
.nav-inner {
  width: min(100% - 40px, var(--large)); margin-inline: auto;
  display: flex; align-items: center; gap: 8px; height: 68px;
}
/* Dès qu'on a quitté le haut, le bandeau se détache par un filet. */
.nav.pose { border-bottom-color: var(--bord); box-shadow: 0 1px 12px rgba(28, 27, 25, .05); }
.nav-marque { display: flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: -.01em; color: var(--encre); }

.marque-tuile {
  display: grid; place-items: center; flex: none; width: 28px; height: 28px;
  border-radius: 9px; background: var(--accent); color: var(--sur-accent);
}
.marque-tuile svg { width: 16px; height: 16px; }
.nav.pose .marque-tuile { background: var(--accent); }
.nav-liens { display: flex; align-items: center; gap: 4px; margin-left: 18px; }
.nav-lien {
  padding: 8px 12px; border-radius: var(--r-pill); font-size: 14.5px; color: var(--encre-2);
  transition: background var(--t), color var(--t);
}
.nav-lien:hover { background: var(--papier-2); color: var(--encre); }

.nav-fin { margin-left: auto; display: flex; align-items: center; gap: 8px; }
/* FR | NL : discret, mais visible aussi sur téléphone, où les liens de la barre disparaissent. */
.nav-langue {
  padding: 6px 10px; border-radius: var(--r-pill); font-size: 13px; font-weight: 600;
  letter-spacing: .04em; color: var(--encre-2); transition: background var(--t), color var(--t);
}
.nav-langue:hover { background: var(--papier-2); color: var(--encre); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; padding: 0 20px; border: 0; border-radius: var(--r-pill);
  font: inherit; font-size: 15px; font-weight: 550; cursor: pointer; white-space: nowrap;
  transition: transform var(--t), background var(--t), box-shadow var(--t);
}
.btn:hover { transform: translateY(-1px); }
.btn-clair { background: var(--accent); color: var(--sur-accent); box-shadow: 0 10px 26px rgba(150, 180, 30, .34); }
.btn-clair:hover { background: var(--accent-fonce); }
.btn-bleu { background: var(--accent); color: var(--sur-accent); box-shadow: 0 10px 28px rgba(150, 180, 30, .40); }
.btn-bleu:hover { background: var(--accent-fonce); }
.btn-fantome { background: var(--papier); color: var(--encre); border: 1px solid var(--bord-fort); }
.btn-fantome:hover { background: var(--papier-2); }
.btn-sm { height: 36px; padding: 0 16px; font-size: 14px; }
.btn-lg { height: 52px; padding: 0 28px; font-size: 16.5px; }

/* ------------------------------------------------------------------- héros */
.heros {
  position: relative; padding: 96px 0 0; text-align: center; color: var(--encre); overflow: hidden;
  background:
    radial-gradient(70% 60% at 50% -10%, rgba(var(--accent-rgb), .42) 0%, rgba(var(--accent-rgb), 0) 70%),
    linear-gradient(180deg, var(--papier) 0%, var(--papier-2) 60%, var(--papier-3) 100%);
}
/* Un voile d'étoiles : la texture des références, sans image. */
.heros::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(28, 27, 25, .16) 1px, transparent 1.2px);
  background-size: 34px 34px; opacity: .35;
  mask-image: radial-gradient(64% 52% at 50% 16%, #000 0%, transparent 72%);
}
.heros > * { position: relative; }
.heros h1 {
  margin: 0 auto 22px; max-width: 15ch; font-size: clamp(42px, 6.4vw, 78px); line-height: 1.02;
  letter-spacing: -.035em; font-weight: 600;
}
.heros h1 em { font-family: var(--serif); font-style: italic; font-weight: 400; }
.heros p.accroche {
  margin: 0 auto; max-width: 56ch; font-size: clamp(17px, 1.6vw, 20px); color: var(--encre-2);
}
.heros .actions { display: flex; gap: 12px; justify-content: center; margin-top: 34px; flex-wrap: wrap; }
.heros .mention { margin-top: 16px; font-size: 13.5px; color: var(--encre-3); }

/* --------------------------------------------------------------- l'onde
   Le glyphe de la marque, mais vivant : une dictée de cinquante secondes posée
   là, avec sa durée comme sur un vocal, puis un trait et une flèche qui
   descendent vers les encadrés. C'est la seule animation en boucle du site —
   elle porte l'idée que rien d'autre ne dit en une image : on parle, ça s'écrit.

   Les barres gardent chacune leur hauteur propre et ne font que respirer : une
   forme d'onde enregistrée, pas un égaliseur qui danse au hasard. */
.onde {
  --onde-u: 1px;            /* l'unité de hauteur : la seule chose à changer pour la réduire */
  display: flex; flex-direction: column; align-items: center; gap: 0;
  margin-top: 44px;
}
/* La même onde, à l'échelle du téléphone. */
.onde-sm { --onde-u: .62px; margin-top: 0; }
.onde-sm .onde-barres { gap: 3px; height: calc(var(--onde-u) * 56); }
.onde-sm .onde-barres i { width: 3px; }
.onde-sm .onde-duree { margin-left: 10px; font-size: 12.5px; }
/* La durée sort du flux : sinon elle décale l'onde vers la gauche, et le trait
   ne tombe plus sous son centre mais sous le blanc qui la suit. Le `relative`
   est ici, sur le bloc dont elle doit longer le bord droit. */
.onde-voix { position: relative; display: flex; align-items: center; }
.onde-barres { display: flex; align-items: center; gap: 5px; height: calc(var(--onde-u) * 56); }
.onde-barres i {
  display: block; width: 4px; border-radius: var(--r-pill);
  background: var(--encre); opacity: .82;
  transform-origin: center;
  animation: onde-respire 1.5s var(--t) infinite;
}
/* Chaque barre part à son tour : sans décalage, ce serait un clignotement. */
.onde-barres i:nth-child(1 ) { animation-delay: 0.00s; height: calc(var(--onde-u) * 10); }
.onde-barres i:nth-child(2 ) { animation-delay: 0.06s; height: calc(var(--onde-u) * 16); }
.onde-barres i:nth-child(3 ) { animation-delay: 0.12s; height: calc(var(--onde-u) * 24); }
.onde-barres i:nth-child(4 ) { animation-delay: 0.18s; height: calc(var(--onde-u) * 34); }
.onde-barres i:nth-child(5 ) { animation-delay: 0.24s; height: calc(var(--onde-u) * 44); }
.onde-barres i:nth-child(6 ) { animation-delay: 0.30s; height: calc(var(--onde-u) * 28); }
.onde-barres i:nth-child(7 ) { animation-delay: 0.36s; height: calc(var(--onde-u) * 52); }
.onde-barres i:nth-child(8 ) { animation-delay: 0.42s; height: calc(var(--onde-u) * 38); }
.onde-barres i:nth-child(9 ) { animation-delay: 0.48s; height: calc(var(--onde-u) * 22); }
.onde-barres i:nth-child(10) { animation-delay: 0.54s; height: calc(var(--onde-u) * 46); }
.onde-barres i:nth-child(11) { animation-delay: 0.60s; height: calc(var(--onde-u) * 30); }
.onde-barres i:nth-child(12) { animation-delay: 0.66s; height: calc(var(--onde-u) * 50); }
.onde-barres i:nth-child(13) { animation-delay: 0.72s; height: calc(var(--onde-u) * 24); }
.onde-barres i:nth-child(14) { animation-delay: 0.78s; height: calc(var(--onde-u) * 40); }
.onde-barres i:nth-child(15) { animation-delay: 0.84s; height: calc(var(--onde-u) * 18); }
.onde-barres i:nth-child(16) { animation-delay: 0.90s; height: calc(var(--onde-u) * 32); }
.onde-barres i:nth-child(17) { animation-delay: 0.96s; height: calc(var(--onde-u) * 22); }
.onde-barres i:nth-child(18) { animation-delay: 1.02s; height: calc(var(--onde-u) * 14); }
.onde-barres i:nth-child(19) { animation-delay: 1.08s; height: calc(var(--onde-u) * 10); }
.onde-barres i:nth-child(20) { animation-delay: 1.14s; height: calc(var(--onde-u) * 8); }
/* La durée, comme au dos d'un message vocal. */
.onde-duree {
  position: absolute; left: 100%; top: 50%; transform: translateY(-50%); margin-left: 16px;
  font-size: 14px; font-weight: 550; color: var(--encre-3);
  font-variant-numeric: tabular-nums; letter-spacing: .01em;
}
/* Le trait, puis la flèche : la voix devient une ligne, la ligne devient les encadrés. */
.onde-trait {
  width: 1px; height: 46px; margin-top: 12px;
  background: linear-gradient(var(--bord-fort) 0%, var(--bord-fort) 55%, transparent 100%);
}
/* Le mot, entre la voix et les encadrés. Un visiteur à qui on montrait la page
   n'avait pas fait le lien : la flèche seule ne disait pas qu'il se passait
   quelque chose entre les deux. */
.onde-etape {
  margin: 10px 0; padding: 6px 14px; border-radius: var(--r-pill);
  background: var(--accent); color: var(--sur-accent);
  font-size: 13px; font-weight: 600; letter-spacing: -.005em;
}
.onde-trait-bref { height: 26px; margin-top: 0;
  background: linear-gradient(var(--bord-fort) 0%, var(--bord-fort) 100%); }

/* Le trait se divise : une dictée, trois encadrés. Les branches reprennent la
   largeur des cartes (300 · 340 · 300) pour tomber sur leur milieu. */
.onde-branches {
  position: relative; display: flex; justify-content: center; gap: 22px;
  width: min(100%, 984px); height: 30px;   /* 300 + 340 + 300 + deux fois 22 d'écart */
}
.onde-branches::before {
  content: ""; position: absolute; top: 0; left: 150px; right: 150px;
  border-top: 1px solid var(--bord-fort);
}
.branche { position: relative; width: 300px; }
.branche:nth-child(2) { width: 340px; }
.branche::before {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 9px;
  border-left: 1px solid var(--bord-fort);
}
.branche::after {
  content: ""; position: absolute; left: 50%; bottom: 0; width: 7px; height: 7px;
  margin-left: -4px; border-right: 1.4px solid var(--encre-3); border-bottom: 1.4px solid var(--encre-3);
  transform: rotate(45deg); opacity: .8;
}
@keyframes onde-respire {
  0%, 100% { transform: scaleY(.42); }
  50%      { transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
  .onde-barres i { animation: none; transform: none; }
}

/* Les cartes du produit, inclinées, qui sortent du dégradé. */
.vitrine { position: relative; margin-top: 10px; padding-bottom: 90px; perspective: 1400px; }
.vitrine-rangee {
  display: flex; align-items: flex-end; justify-content: center; gap: 22px;
  transform: rotateX(9deg); transform-style: preserve-3d;
}
.carte {
  width: 300px; text-align: left; background: #fff; color: var(--encre);
  border: 1px solid var(--bord);
  border-radius: var(--r-lg); box-shadow: 0 24px 50px rgba(28, 27, 25, .10);
  padding: 18px; transition: transform var(--t);
}
.carte:hover { transform: translateY(-8px); }
.carte.gauche { transform: rotate(-4deg) translateY(26px); }
.carte.droite { transform: rotate(4deg) translateY(26px); }
.carte.centre { width: 340px; z-index: 2; }
.carte-tete { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.carte-tete h4 { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.copier {
  height: 28px; padding: 0 12px; white-space: nowrap; border-radius: var(--r-pill); border: 0;
  background: var(--accent); color: var(--sur-accent); font: inherit; font-size: 12.5px; font-weight: 550;
}
/* Copié : l'encre, pas un deuxième vert — deux verts côte à côte se brouillent. */
.copier.fait { background: var(--encre); color: #fff; }
.carte p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--encre-2); }
.carte p + p { margin-top: 7px; }
.carte .etiq { color: var(--encre); font-weight: 600; }
.carte-mini { font-size: 12.5px; color: var(--encre-3); margin-top: 12px; display: flex; gap: 6px; align-items: center; }

/* ---------------------------------------------------------------- sections */
section { padding: 96px 0; }
.titre-section {
  margin: 0 auto 14px; max-width: 20ch; text-align: center;
  font-size: clamp(30px, 3.6vw, 46px); line-height: 1.06; letter-spacing: -.03em; font-weight: 600;
}
.titre-section em { font-family: var(--serif); font-style: italic; font-weight: 400; }
.sous-titre { margin: 0 auto 52px; max-width: 58ch; text-align: center; color: var(--encre-2); }
.oeil {
  display: block; text-align: center; margin-bottom: 18px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-texte);
}

.chiffres { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.chiffre { padding: 30px 26px; border-radius: var(--r-lg); background: var(--papier-2); border: 1px solid var(--bord); }
.chiffre b { display: block; font-size: 44px; line-height: 1; letter-spacing: -.04em; margin-bottom: 10px; }
.chiffre span { color: var(--encre-2); font-size: 15px; }
.chiffre.sombre { background: var(--encre); color: #fff; border-color: transparent; }
.chiffre.sombre span { color: rgba(255, 255, 255, .72); }
/* L'encadré inversé : tout le site est lime, celui-ci est bleu. */
.chiffre.vive { background: var(--bleu); border-color: transparent; color: #fff; }
.chiffre.vive span { color: rgba(255, 255, 255, .78); }


.logiciels { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.logiciel {
  padding: 11px 18px; border-radius: var(--r-pill); border: 1px solid var(--bord);
  background: #fff; font-size: 15px; font-weight: 550;
}
.logiciel span { color: var(--encre-3); font-weight: 400; }

.garanties { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin-top: 44px; }
.garantie { padding: 24px; border-radius: var(--r-md); background: var(--papier-2); border: 1px solid var(--bord); }
.garantie h4 { margin: 0 0 6px; font-size: 16px; }
.garantie p { margin: 0; font-size: 14.5px; color: var(--encre-2); }

/* ------------------------------------------------------------ liste d'attente */
.liste { background: var(--papier-2); border-top: 1px solid var(--bord); }
.liste-carte {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 0;
  border-radius: var(--r-xl); overflow: hidden; background: #fff;
  border: 1px solid var(--bord); box-shadow: 0 30px 70px rgba(12, 19, 48, .10);
}
.liste-gauche {
  padding: 46px 42px; color: var(--encre);
  background: radial-gradient(120% 120% at 0% 0%, #eafaa8 0%, var(--accent) 45%, var(--accent-fonce) 100%);
}
.liste-gauche h2 { margin: 0 0 10px; font-size: clamp(32px, 3.8vw, 46px); line-height: 1.04; letter-spacing: -.03em; font-weight: 600; }
.liste-gauche h2 em { font-family: var(--serif); font-style: italic; font-weight: 400; }
.liste-gauche p { margin: 0 0 26px; color: rgba(28, 27, 25, .74); font-size: 15.5px; }
.champ { display: block; margin-bottom: 12px; }
.champ input, .champ select {
  width: 100%; height: 48px; padding: 0 16px; font: inherit; font-size: 15.5px;
  border-radius: var(--r-sm); border: 1px solid rgba(28, 27, 25, .22);
  background: rgba(255, 255, 255, .62); color: var(--encre);
}
.champ input::placeholder { color: rgba(28, 27, 25, .5); }
.champ select option { color: var(--encre); }
.champ input:focus, .champ select:focus { outline: 2px solid var(--encre); outline-offset: 1px; background: #fff; }
.deux { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.liste form .btn { width: 100%; margin-top: 6px; }
/* Sur le panneau lime, un bouton lime disparaîtrait : il passe à l'encre. */
.liste-gauche .btn-clair, .liste-gauche .btn-bleu {
  background: var(--encre); color: #fff; box-shadow: 0 10px 26px rgba(28, 27, 25, .22);
}
.liste-gauche .btn-clair:hover, .liste-gauche .btn-bleu:hover { background: #33312d; }
.liste-note { margin-top: 14px; font-size: 13px; color: rgba(28, 27, 25, .6); }
.liste-droite { display: flex; flex-direction: column; justify-content: center; padding: 46px 42px; font-family: var(--serif); font-size: 19px; line-height: 1.55; color: var(--encre); }
.liste-droite .a { color: var(--encre-3); margin-bottom: 26px; }
.liste-droite p { margin: 0 0 18px; }
.liste-droite .signature { font-size: 16px; color: var(--encre-3); font-style: italic; }
.message { margin-top: 16px; padding: 12px 14px; border-radius: var(--r-sm); font-size: 14.5px; }
.message.ok { background: rgba(255, 255, 255, .7); color: var(--encre); border: 1px solid rgba(28, 27, 25, .18); }
.message.erreur { background: rgba(28, 27, 25, .9); color: #fff; border: 1px solid transparent; }
.message.hidden { display: none; }

/* ------------------------------------------------------------------- pied */
footer { padding: 54px 0 70px; border-top: 1px solid var(--bord); color: var(--encre-3); font-size: 14.5px; }
.pied { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; }
.pied-marque { display: flex; align-items: center; gap: 10px; color: var(--encre); font-weight: 600; }
.pied-marque .marque-tuile { width: 26px; height: 26px; border-radius: 8px; }
.pied a:hover { color: var(--encre); }

/* -------------------------------------------------------------- apparition */
/* L'apparition n'est qu'un agrément : sans JavaScript, ou avant que l'observateur
   ait vu l'élément, le contenu doit être lisible. Une section entière est restée
   invisible sur téléphone à cause de ça. */
.js .apparait { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--t), transform .7s var(--t); }
.js .apparait.vu { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  /* `.js .apparait` est plus spécifique que `.apparait` : sans le même sélecteur
     ici, un visiteur en mouvement réduit gardait des blocs à opacité zéro et ne
     devait leur apparition qu'à l'observateur. Un écran entier en dépendait. */
  .apparait, .js .apparait { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

@media (max-width: 900px) {
  .nav-liens { display: none; }
  .heros { padding-top: 104px; }
  .heros .actions { gap: 10px; }
  .heros .accroche { font-size: 16.5px; }
  .heros .mention { margin-top: 14px; font-size: 12.5px; }

  /* Les trois encadrés ne s'empilent plus : ils défilent, comme sur un téléphone
     on fait défiler une note. Sinon il faut trois écrans avant la suite. */
  .vitrine { margin-top: 40px; padding-bottom: 60px; perspective: none; }
  .vitrine-rangee {
    transform: none; gap: 14px; align-items: stretch;
    justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory;
    padding: 4px 20px 18px; margin-inline: -20px;
    scrollbar-width: none;
  }
  .vitrine-rangee::-webkit-scrollbar { display: none; }
  .carte, .carte.centre { width: 82vw; max-width: 330px; flex: none; scroll-snap-align: center; }
  .carte.gauche, .carte.droite { transform: none; }

  .liste-carte { grid-template-columns: 1fr; }
  .liste-droite { border-top: 1px solid var(--bord); }
  section { padding: 64px 0; }
  .titre-section { margin-bottom: 12px; }
  .sous-titre { margin-bottom: 34px; }
}
@media (max-width: 620px) {
  .chiffre { padding: 22px 20px; }
  .chiffre b { font-size: 34px; }
  .etape { padding: 22px 20px 24px; }
  .route li { padding: 20px 20px 20px 24px; }
  .garantie { padding: 20px; }
  /* La barre ne tient pas deux boutons : le CTA est juste en dessous, dans le héros.
     Et son flou d'arrière-plan disparaît : c'est la première cause de saccade au
     défilement sur iOS. Un blanc à 94 % fait le même effet, pour rien. */
  .nav { background: rgba(255, 255, 255, .94); }
  .nav-inner { width: calc(100% - 36px); height: 60px; }
  .nav-fin .btn-fantome { display: none; }   /* « Se connecter » reste dans le pied de page */
  .nav-fin .btn-clair { padding: 0 14px; font-size: 13.5px; }
  .annonce { max-width: 92%; text-align: center; font-size: 13px; line-height: 1.35; }
  .heros h1 { font-size: clamp(34px, 9vw, 46px); }
  .liste-gauche, .liste-droite { padding: 32px 24px; }
  .deux { grid-template-columns: 1fr; }
  .pied { justify-content: center; text-align: center; }
}

/* ===================================================================== modal
   « Accès anticipé » ouvre ceci, et rien d'autre ne bouge sur la page.
   Le visiteur doit comprendre en une phrase que Solys n'est pas encore ouvert. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.btn-plein { width: 100%; }

.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; }
/* Sans cette ligne, `display: grid` écrase l'attribut `hidden` : le modal reste
   invisible mais couvre l'écran et avale tous les clics, jusque dans l'entête.
   Vu en production le 24/09 — la page semblait morte. */
.modal[hidden] { display: none; }
.modal-fond {
  position: absolute; inset: 0; background: rgba(24, 28, 10, .55);
  backdrop-filter: blur(6px); opacity: 0; transition: opacity 220ms var(--t);
}
.modal.ouvert .modal-fond { opacity: 1; }
.modal-boite {
  /* Une carte de papier, avec le panneau d'offre posé dedans : c'est la forme
     qu'on garde de la référence, transposée à l'accent de Solys. */
  position: relative; width: min(100%, 880px); max-height: 92vh; overflow: auto;
  display: grid; grid-template-columns: 1.02fr .98fr;
  padding: 14px; background: #f7f4ee; border-radius: 30px;
  border: 1.5px dashed rgba(63, 59, 51, .22);   /* le liseré perforé de la référence */
  box-shadow: 0 40px 90px rgba(24, 28, 10, .38);
  opacity: 0; transform: translateY(14px) scale(.97);
  transition: opacity 220ms var(--t), transform 220ms var(--t);
}
.modal.ouvert .modal-boite { opacity: 1; transform: none; }

.modal-offre {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  min-height: 384px; padding: 34px 32px 32px; border-radius: 20px; color: var(--encre);
  background: linear-gradient(168deg, #fbfee9 0%, #ecf8b8 30%, #dff474 62%, var(--accent) 100%);
}
/* Le disque en bas à droite, comme le soleil de la référence. */
.modal-offre::after {
  content: ""; position: absolute; right: -60px; bottom: -130px; width: 340px; height: 340px;
  border-radius: 50%; background: rgba(255, 255, 255, .38); pointer-events: none;
}
.modal-offre > * { position: relative; z-index: 1; }
.modal-vue { display: flex; flex-direction: column; flex: 1; }
.modal-vue[hidden] { display: none; }
.modal-titre {
  margin: 0 0 8px; font-family: var(--serif); font-weight: 400; letter-spacing: -.01em;
  font-size: clamp(34px, 4vw, 46px); line-height: 1.02; color: #2a3406;
}
.modal-fine { margin: 0; font-size: 14px; color: rgba(42, 52, 6, .72); }
.modal-bas { margin-top: auto; padding-top: 24px; }
.modal-texte { margin: 0 0 16px; font-size: 16.5px; line-height: 1.45; color: var(--encre); }
.modal-champ {
  width: 100%; height: 50px; padding: 0 18px; margin-bottom: 10px; font: inherit; font-size: 16px;
  border: 1px solid rgba(28, 27, 25, .2); border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .6); color: var(--encre);
}
.modal-champ::placeholder { color: rgba(28, 27, 25, .5); }
.modal-champ:focus { outline: 0; background: #fff; border-color: var(--encre); }
.modal-action {
  width: 100%; height: 50px; border: 0; border-radius: var(--r-pill); cursor: pointer;
  background: var(--encre); color: #fff; font: inherit; font-size: 15.5px; font-weight: 600;
  transition: transform var(--t), box-shadow var(--t);
}
.modal-action:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(24, 28, 10, .28); }
.modal-action:disabled { opacity: .75; cursor: default; transform: none; }
/* Les questions posées après l'inscription : des boutons, jamais un formulaire.
   Un clic par réponse, et la réponse part aussitôt. */
.modal-choix { display: flex; flex-direction: column; gap: 8px; }
.modal-puce {
  width: 100%; padding: 11px 16px; text-align: left; cursor: pointer;
  border: 1px solid rgba(28, 27, 25, .2); border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .6); color: var(--encre); font: inherit; font-size: 15px;
  transition: background var(--t), border-color var(--t), transform var(--t);
}
.modal-puce:hover { background: #fff; border-color: var(--encre); transform: translateY(-1px); }
.modal-select {
  width: 100%; height: 50px; padding: 0 16px; font: inherit; font-size: 15.5px; cursor: pointer;
  border: 1px solid rgba(28, 27, 25, .2); border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .6); color: var(--encre);
}
.modal-select option { color: var(--encre); }
.modal-passer {
  margin: 14px auto 0; padding: 4px 8px; display: block; cursor: pointer;
  border: 0; background: none; font: inherit; font-size: 13.5px;
  color: rgba(28, 27, 25, .7); text-decoration: underline;
}
.modal-passer:hover { color: var(--encre); }

.modal-erreur {
  margin: 0 0 10px; padding: 9px 14px; border-radius: var(--r-pill); font-size: 13.5px;
  background: rgba(255, 255, 255, .94); color: #a2352a;
}

.modal-lettre {
  display: flex; flex-direction: column; justify-content: center; gap: 0;
  padding: 40px 42px; font-family: var(--serif); font-size: 19px; line-height: 1.5;
  color: #3f3b33;
}
/* `pretty` équilibre les dernières lignes : sans lui, un mot reste seul en bas
   d'un paragraphe et la lettre paraît mal posée. */
.modal-lettre p { margin: 0 0 20px; text-wrap: pretty; }
.modal-lettre p:last-child { margin-bottom: 0; }
.modal-a { margin-bottom: 26px; font-size: 16.5px; color: #8b8478; }

.modal-x {
  position: absolute; top: 20px; right: 20px; z-index: 2; display: grid; place-items: center;
  width: 32px; height: 32px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .72); color: #3f3b33; transition: background var(--t);
}
.modal-x:hover { background: #fff; }
.modal-x svg { width: 16px; height: 16px; }

@media (max-width: 760px) {
  .modal { padding: 12px; }
  .modal-boite { grid-template-columns: 1fr; padding: 10px; border-radius: 24px; }
  .modal-offre { min-height: 0; padding: 28px 24px 24px; }
  /* Sur téléphone, la lettre pousse le formulaire hors de l'écran : le pop-up
     ne garde que ce qu'on y fait, une adresse et un bouton. */
  .modal-lettre { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .modal-fond, .modal-boite { transition: none; }
}

/* ================================================== la vision, sur la page
   Une règle tient tout ce bloc : ce qui n'existe pas encore doit se voir. */
.note-source { margin: 26px auto 0; max-width: 62ch; text-align: center; font-size: 14px; color: var(--encre-3); }

.flux { display: grid; grid-template-columns: 1fr auto 1.1fr; gap: 26px; align-items: stretch; }
.flux-dit {
  display: flex; flex-direction: column; justify-content: center; padding: 30px 28px; border-radius: var(--r-lg); color: var(--encre);
  background: linear-gradient(160deg, #eafaa8 0%, var(--accent) 55%, var(--accent-fonce) 100%);
}
.flux-etiq {
  display: block; margin-bottom: 12px; font-size: 12px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: rgba(28, 27, 25, .58);
}
.flux-dit p { margin: 0; font-family: var(--serif); font-size: 19px; line-height: 1.45; }
.flux-fleche { display: grid; place-items: center; color: #b7bf98; }
.flux-fleche svg { width: 30px; height: 30px; }
.flux-sorties { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.flux-sorties li {
  display: flex; flex-direction: column; gap: 2px; padding: 13px 16px;
  border-radius: var(--r-md); background: #fff; border: 1px solid var(--bord);
}
.flux-sorties b { font-size: 15.5px; font-weight: 600; }
.flux-sorties span { font-size: 14px; color: var(--encre-2); }
/* La feuille de route : une colonne, avec le fait en couleur et la suite en gris. */
.route { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: etape; }
.route li {
  position: relative; padding: 24px 26px 24px 30px; border-radius: var(--r-lg);
  background: var(--papier-2); border: 1px solid var(--bord);
}
.route li::before {
  content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px;
  border-radius: var(--r-pill); background: var(--border-strong, #d7d4cd);
}
.route li.fait { background: #fff; border-color: #dcecab; }
.route li.fait::before { background: var(--accent); }
.route .jalon {
  display: inline-block; margin-bottom: 8px; font-size: 12px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--encre-3);
}
.route li.fait .jalon { color: var(--accent-texte); }
.route h3 { margin: 0 0 6px; font-size: 19px; letter-spacing: -.015em; }
.route p { margin: 0; color: var(--encre-2); font-size: 15.5px; }

@media (max-width: 900px) {
  .flux { grid-template-columns: 1fr; }
  .flux-fleche { justify-self: center; transform: rotate(90deg); }
}

/* ============================================ le schéma des connexions
   Une source à gauche, les logiciels à droite, reliés par des traits.
   Ce qui est branché brille ; le reste attend, en pointillé. */
.reseau {
  position: relative; display: grid; grid-template-columns: 1fr 1.15fr; gap: 0; align-items: center;
  padding: 44px 40px; border-radius: var(--r-xl); overflow: hidden;
  /* Un aplat de marque, pas un lavis : c'est le seul endroit de la page où la
     couleur porte l'idée — une voix à gauche, tous les logiciels à droite. Sur
     du lime, les pastilles blanches se détachent d'un coup d'œil. */
  background: linear-gradient(150deg, #eafaa8 0%, var(--accent) 52%, #c9e64a 100%);
  border: 1px solid transparent;
}
.reseau-centre { position: relative; display: grid; place-items: center; }
/* Le trait qui sort du micro et rejoint la colonne. */
.reseau-centre::after {
  content: ""; position: absolute; left: calc(50% + 92px); right: -26px; top: 50%;
  border-top: 1px dashed rgba(28, 27, 25, .34);
}
.noeud {
  display: flex; align-items: center; gap: 14px; padding: 16px 22px 16px 18px;
  border-radius: var(--r-pill); background: #fff;
  box-shadow: 0 14px 30px rgba(28, 27, 25, .12);
}
.noeud-icone {
  display: grid; place-items: center; width: 42px; height: 42px; flex: none;
  border-radius: 50%; background: var(--accent); color: var(--sur-accent);
}
.noeud-icone svg { width: 21px; height: 21px; }
.noeud-texte { display: flex; flex-direction: column; line-height: 1.25; }
.noeud-texte b { font-size: 17px; letter-spacing: -.01em; }
.noeud-texte span { font-size: 13.5px; color: var(--encre-3); }

.reseau-liens { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
/* La colonne qui rassemble les traits : une seule source, plusieurs sorties. */
.reseau-liens::before {
  content: ""; position: absolute; right: 100%; margin-right: 26px; top: 28px; bottom: 28px;
  border-left: 1px dashed rgba(28, 27, 25, .34);
}
.reseau-liens li {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 12px 18px 12px 14px; border-radius: var(--r-pill);
  background: #fff; border: 1px solid transparent; box-shadow: 0 6px 16px rgba(28, 27, 25, .10);
  color: var(--encre); font-size: 15px;
}
/* Le trait qui relie chaque pastille à la source. */
.reseau-liens li::before {
  content: ""; position: absolute; right: 100%; width: 26px; height: 1px;
  border-top: 1px dashed rgba(28, 27, 25, .34);
}
.reseau-liens li.actif {
  background: #fff; border-style: solid; border-color: transparent; color: var(--encre);
  box-shadow: 0 12px 26px rgba(28, 27, 25, .14);
}
.reseau-liens li.actif::before { border-top-style: solid; border-color: rgba(28, 27, 25, .5); }
.reseau-liens b { font-weight: 600; }
.reseau-liens .tuile {
  display: grid; place-items: center; width: 34px; height: 34px; flex: none;
  border-radius: 11px; background: var(--accent-clair); color: var(--accent-texte);
  border: 1px solid rgba(28, 27, 25, .06);
  font-size: 12.5px; font-weight: 700; letter-spacing: .02em;
}
.reseau-liens li.actif .tuile { background: var(--encre); color: #fff; border-color: transparent; }
.reseau-liens .etat { margin-left: auto; font-size: 12.5px; color: var(--encre-3); white-space: nowrap; }
.reseau-liens li.actif .etat { color: var(--encre); font-weight: 600; }

@media (max-width: 900px) {
  .reseau { grid-template-columns: 1fr; gap: 26px; padding: 28px 20px; }
  .reseau-liens li::before { display: none; }
  /* L'état reste visible partout : sans lui, la liste promet des intégrations qui n'existent pas. */
  .reseau-liens .etat { font-size: 11.5px; white-space: normal; text-align: right; line-height: 1.25; }
}

/* ======================================================== une journée
   Deux colonnes : ce qui se passe aujourd'hui, et ce que ça devient.
   Le contraste fait le travail ; le texte reste court. */
.journee {
  border-radius: var(--r-xl); overflow: hidden;
  border: 1px solid var(--bord); background: #fff;
}
.journee-tete, .journee-ligne {
  display: grid; grid-template-columns: 150px 1fr 1fr; align-items: start; gap: 24px;
  padding: 18px 26px;
}
.journee-tete {
  padding-block: 14px; background: var(--papier-2); border-bottom: 1px solid var(--bord);
  font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
.journee-avant { color: var(--encre-3); }
.journee-apres { color: var(--accent-texte); }
.journee-ligne + .journee-ligne, .journee-ligne { border-top: 1px solid var(--bord); }
.journee-ligne:first-of-type { border-top: 0; }
.journee .heure { font-size: 14.5px; font-weight: 600; color: var(--encre); }
.journee p { margin: 0; font-size: 15px; line-height: 1.5; }
.journee .avant { color: var(--encre-3); }
.journee .apres { color: var(--encre); }
/* La dernière ligne est celle qui ne changera jamais : on la marque. */
.journee-ligne.finale { background: var(--accent-clair); }
.journee-ligne.finale .apres { font-weight: 550; }

.deja {
  display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap;
  margin-top: 26px; padding: 22px 26px; border-radius: var(--r-lg);
  background: var(--papier-2); border: 1px dashed var(--border-strong, #d7d4cd);
}
.deja-etiq {
  flex: none; padding: 5px 12px; border-radius: var(--r-pill); background: var(--accent); color: var(--sur-accent);
  font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.deja p { margin: 0; flex: 1; min-width: 260px; font-size: 15px; color: var(--encre-2); line-height: 1.55; }

@media (max-width: 860px) {
  .journee-tete { display: none; }
  .journee-ligne { grid-template-columns: 1fr; gap: 8px; padding: 20px; }
  .journee .avant::before { content: "Aujourd'hui — "; color: var(--encre-3); font-weight: 600; }
  .journee .apres::before { content: "Avec Solys — "; color: var(--accent-texte); font-weight: 600; }
}

/* ================================================ le téléphone : un écran par section
   Le mobile n'est pas le bureau en plus petit : chaque section occupe un écran
   entier. Mais le défilement est libre — aucun aimant, aucun cran. C'est la
   composition qui fait les écrans, pas un mécanisme qui retient le doigt.

   Trois choses rendaient ce défilement poussif, et les trois sont parties :
   l'aimant (`scroll-snap`), qui happait chaque poussée ; les taches floues
   calculées à chaque image (`filter: blur`), que le téléphone recalcule pendant
   qu'on défile ; et le flou d'arrière-plan de la barre du haut, le pire des
   trois sur iOS. Les mêmes taches sont maintenant des dégradés déjà flous par
   nature : même image, aucun calcul.

   Le prix à payer est une règle de rédaction : ce qui ne tient pas dans un écran de
   téléphone ne monte pas sur le téléphone. D'où les coupes ci-dessous — la journée
   entière, les descriptions des six sorties, les notes de bas de section. Elles
   restent sur le bureau, où il y a la place.

   `svh` et non `vh` : sur iOS, `vh` compte la hauteur barre d'adresse rétractée,
   donc un écran en `100vh` dépasse toujours d'une barre au chargement. */
.court { display: none; }
.mobile-flux { display: none; }

@media (max-width: 760px) {
  .long { display: none; }
  .court { display: block; }

  /* Un seul fond, du premier écran au dernier. Les sections alternaient papier
     et teinte : au défilement, ça se lisait comme une pile de carrés qui se
     succèdent, avec une couture franche entre chacun. */
  body { background: var(--papier); }

  /* --- l'écran lui-même ---------------------------------------------------- */
  .heros, section {
    min-height: 100vh;
    min-height: 100svh;
    margin: 0; border: 0; border-radius: 0;
    padding: 40px 0 34px;
    display: flex; flex-direction: column; justify-content: center;
  }
  /* `.court { display: block }` l'emporterait sur `section` : l'écran des trois
     temps n'existe que sur téléphone, il lui faut sa propre ligne. */
  section.court { display: flex; }
  section, section[style] { background: transparent !important; }   /* les fonds du bureau ne s'appliquent plus */
  .contenu { width: calc(100% - 36px); }
  /* Sur un téléphone ces grilles n'ont qu'une lecture possible : on la nomme,
     au lieu de laisser `auto-fit` la deviner à chaque largeur d'écran. */
  .chiffres { grid-template-columns: 1fr; }
  .garanties { grid-template-columns: 1fr 1fr; }
  footer { margin: 0; padding: 30px 0 38px; border-top: 1px solid var(--bord); }

  /* Le rythme ne vient plus du fond mais de la composition : une idée par écran,
     et de l'air autour. Aucun aplat ne change entre deux sections. */

  /* --- ce qui n'a pas sa place sur un écran de téléphone -------------------- */
  #etapes { display: none; }        /* la journée : sept lignes, deux colonnes. Le bureau la garde */
  .vitrine { display: none; }       /* les trois encadrés inclinés : remplacés par l'écran « comment » */
  .sous-titre { display: none; }
  .sous-titre.court { display: block; margin-bottom: 22px; font-size: 15px; }
  .note-source { display: none; }
  #probleme .note-source { display: block; margin-top: 16px; font-size: 12.5px; }

  /* --- les titres ---------------------------------------------------------- */
  section { text-align: center; }
  .titre-section { font-size: clamp(29px, 8.8vw, 38px); max-width: none; margin-bottom: 22px;
                   line-height: 1.02; letter-spacing: -.035em; }
  .oeil { margin-bottom: 12px; font-size: 11.5px; }

  /* --- écran 1 : qui, quoi, pourquoi, une action --------------------------- */
  /* Le héros fait la hauteur de son contenu, pas celle de l'écran : le haut de
     la section suivante dépasse, et c'est lui qui dit qu'il y a une suite —
     mieux qu'une flèche, et sans le vide que laissait un écran entier. */
  .heros { min-height: 0; padding: 30px 0 46px; }
  /* L'échelle est ce qui fait la différence sur un téléphone : un titre bridé à
     quinze caractères de large occupe les deux tiers de l'écran et paraît petit,
     quelle que soit sa taille en points. Il va donc chercher les bords. */
  .heros h1 {
    margin-bottom: 14px; max-width: none;
    font-size: clamp(36px, 11.4vw, 52px); line-height: .99; letter-spacing: -.04em;
  }
  .heros .accroche { font-size: 17px; max-width: 30ch; color: var(--encre-2); }
  /* Deux actions côte à côte, de largeur égale : mesuré sur la référence, les
     deux boutons y font 167 et 165 px sur un écran de 500, avec 20 px d'écart —
     donc deux tiers de largeur à eux deux, et jamais l'un plus large que l'autre.
     `.court` remet l'affichage des boutons, que la règle générale passerait en bloc. */
  .heros .actions {
    margin: 24px auto 0; gap: 20px; flex-wrap: nowrap;
    width: min(100%, 352px);
  }
  .heros .actions .btn {
    flex: 1 1 0; min-width: 0; height: 43px; padding: 0 10px; font-size: 14.5px;
  }
  .btn.court { display: inline-flex; }
  .heros .mention { margin-top: 14px; font-size: 12.5px; }
  /* La flèche dit qu'il y a une suite, et où elle se trouve. */
  .defile { display: none; }   /* l'écran suivant dépasse déjà : la flèche ferait doublon */

  /* --- écran 2 : le constat, trois chiffres -------------------------------- */
  .chiffres { gap: 8px; text-align: left; }   /* une colonne : voir plus haut */
  .chiffre { padding: 14px 16px; }
  .chiffre b { font-size: 27px; margin-bottom: 4px; }
  .chiffre span { font-size: 13px; }
  #probleme .note-source { margin-top: 12px; font-size: 11.5px; }

  /* --- écran 3 : les trois temps ------------------------------------------- */
  .mobile-flux { display: flex; flex-direction: column; align-items: center; padding: 6px 0 0; }
  .mf-etape {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
    opacity: 0; animation: mf-entre .6s var(--t) forwards;
  }
  .mf-1 { animation-delay: .15s; }
  .mf-2 { animation-delay: .75s; }
  .mf-3 { animation-delay: 1.35s; }
  .mf-etape { gap: 3px; width: 100%; }
  .mf-etape b { font-size: 15.5px; font-weight: 600; }
  .mf-etape > span:last-child { font-size: 13px; color: var(--encre-3); }
  .mf-icone {
    display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 2px;
    border-radius: 50%; background: #fff; border: 1px solid var(--bord);
    box-shadow: 0 10px 24px rgba(28, 27, 25, .08); color: var(--encre-2);
  }
  .mf-icone svg { width: 21px; height: 21px; }
  /* La classe garde son nom dans le HTML ; c'est la pastille d'accent. */
  .mf-bleu { background: var(--accent); border-color: transparent; color: var(--sur-accent);
             box-shadow: 0 12px 28px rgba(150, 180, 30, .38); }
  .mf-trait {
    width: 1px; height: 20px; margin: 6px 0;
    background: linear-gradient(var(--bord-fort), transparent);
    opacity: 0; animation: mf-entre .5s var(--t) forwards; animation-delay: .55s;
  }
  .mf-trait + .mf-etape + .mf-trait { animation-delay: 1.15s; }
  /* Les trois encadrés, sur toute la largeur : c'est le nombre et la largeur
     qui disent « chaque case du logiciel », pas un carré posé au centre. */
  .mf-cartes { display: grid; gap: 8px; width: 100%; margin-bottom: 12px; }
  .mf-carte {
    display: grid; gap: 4px; width: 100%;
    padding: 11px 13px; text-align: left;
    background: #fff; border: 1px solid var(--bord); border-radius: var(--r-md);
    box-shadow: 0 8px 22px rgba(28, 27, 25, .07);
  }
  .mf-carte-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .mf-carte-tete b { font-size: 14px; }
  .mf-copier {
    flex: none; padding: 3px 10px; border-radius: var(--r-pill);
    background: var(--accent); color: var(--sur-accent); font-size: 11.5px; font-weight: 600;
  }
  .mf-ligne { font-size: 13px; color: var(--encre); }
  .mf-ligne i { display: inline-block; min-width: 62px; font-style: normal; font-size: 11.5px;
                font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--encre-3); }
  .mf-coche { flex: none; padding: 3px 10px; border-radius: var(--r-pill);
              background: var(--encre); color: #fff; font-size: 11.5px; font-weight: 600; }

  /* --- écran 4 : une phrase, six endroits ---------------------------------- */
  .flux { gap: 16px; }
  .flux-dit { padding: 20px 18px; text-align: left; }
  .flux-dit p { font-size: 16px; line-height: 1.4; }
  .flux-fleche { display: none; }
  /* Les six sorties deviennent une grille de noms : sur un écran, ce sont les
     noms qu'on lit, jamais les sous-titres. */
  .flux-sorties { grid-template-columns: 1fr 1fr; gap: 7px; }
  .flux-sorties li { padding: 11px 12px; align-items: center; text-align: center; }
  .flux-sorties b { font-size: 13.5px; line-height: 1.25; }
  .flux-sorties span { display: none; }

  /* --- écran 5 : les logiciels --------------------------------------------- */
  .reseau { grid-template-columns: 1fr; gap: 16px; padding: 20px 14px; text-align: left; }
  .reseau-liens { grid-template-columns: 1fr 1fr; }
  .reseau-centre::after { display: none; }
  .reseau-liens::before { display: none; }
  .reseau-liens li::before { display: none; }
  .reseau-liens { gap: 7px; }
  .reseau-liens li { padding: 7px 12px 7px 10px; font-size: 13.5px; }
  .reseau-liens .tuile { width: 27px; height: 27px; border-radius: 9px; font-size: 11px; }
  .noeud { padding: 10px 18px 10px 12px; }
  .noeud-icone { width: 34px; height: 34px; }
  .noeud-icone svg { width: 17px; height: 17px; }
  .noeud-texte b { font-size: 15px; }
  .reseau-liens .etat { font-size: 11px; white-space: normal; text-align: right; line-height: 1.25; }

  /* --- écran 6 : la feuille de route --------------------------------------- */
  .route { gap: 7px; text-align: left; }
  .route li { padding: 11px 14px 11px 18px; }
  .route .jalon { margin-bottom: 4px; font-size: 11px; }
  .route h3 { font-size: 15.5px; }
  .route p { display: none; }
  .route li.fait p { display: block; font-size: 13.5px; line-height: 1.45; }

  /* --- écran 7 : les limites ----------------------------------------------- */
  .garanties { gap: 10px; margin-top: 0; text-align: left; }
  .garantie { padding: 15px 14px; }
  .garantie h4 { font-size: 14px; }
  .garantie p { font-size: 12.5px; }
  /* La respiration sombre est tombée avec le reste : sur téléphone, elle était
     le dernier aplat qui coupait la page en deux. Les limites se lisent aussi
     bien sur du papier, encadrées. */
  #confiance .garantie { background: var(--papier-2); }

  /* --- écran 8 : la liste d'attente ---------------------------------------- */
  .liste { background: var(--papier-2) !important; }
  .liste-carte { border-radius: var(--r-xl); box-shadow: 0 20px 50px rgba(28, 27, 25, .10); }
  .liste-gauche { padding: 28px 22px; }
  /* La lettre ne tient pas dans un écran de téléphone avec le formulaire : le
     pop-up avait déjà tranché pareil (.modal-lettre). Il reste ce qu'on y fait. */
  .liste-droite { display: none; }
  .liste-gauche h2 { font-size: clamp(26px, 7.4vw, 34px); }
  .liste-gauche p { margin-bottom: 20px; font-size: 14.5px; }
  .deux { grid-template-columns: 1fr; }
  .pied { justify-content: center; text-align: center; }

  /* Les formes floues : deux taches de marque, derrière le héros. */
  .heros { position: relative; }
  .heros::after {
    content: ""; position: absolute; inset: -12% -28% auto -28%; height: 62%; z-index: 0;
    background:
      radial-gradient(60% 62% at 16% 24%, rgba(var(--accent-rgb), .52) 0%, rgba(var(--accent-rgb), 0) 72%),
      radial-gradient(56% 58% at 88% 8%, rgba(196, 232, 92, .54) 0%, rgba(196, 232, 92, 0) 74%),
      radial-gradient(52% 56% at 62% 64%, rgba(120, 145, 25, .18) 0%, rgba(120, 145, 25, 0) 72%);
    pointer-events: none;
  }
  .heros::before { opacity: .22; }   /* la trame de points s'efface sous les taches */
  .heros > * { position: relative; z-index: 1; }

  .liste { position: relative; overflow: hidden; }
  .liste::before {
    content: ""; position: absolute; inset: -6% -20% 20% -20%; z-index: 0;
    background: radial-gradient(62% 64% at 28% 38%, rgba(var(--accent-rgb), .50) 0%, rgba(var(--accent-rgb), 0) 74%),
                radial-gradient(58% 60% at 82% 62%, rgba(196, 232, 92, .42) 0%, rgba(196, 232, 92, 0) 76%);
    pointer-events: none;
  }
  .liste .contenu { position: relative; z-index: 1; }

  /* La barre ne tient pas deux boutons : le CTA est juste en dessous, dans le héros.
     Et son flou d'arrière-plan disparaît : c'est la première cause de saccade au
     défilement sur iOS. Un blanc à 94 % fait le même effet, pour rien. */
  .nav { background: rgba(255, 255, 255, .94); }
  .nav-inner { width: calc(100% - 36px); height: 60px; }
  .nav-fin .btn-fantome { display: none; }   /* « Se connecter » reste dans le pied de page */
  .nav-fin .btn-clair { padding: 0 14px; font-size: 13.5px; }
}

/* Les petits téléphones (iPhone SE et compagnie : moins de 700 px de hauteur utile).
   Quatre écrans dépassaient de 40 à 170 px — mesuré, pas supposé. On coupe ce qui
   décrit, on garde ce qui nomme. */
@media (max-width: 760px) and (max-height: 700px) {
  .titre-section { font-size: clamp(23px, 6.6vw, 28px); margin-bottom: 16px; }
  .heros, section { padding: 78px 0 26px; }

  #probleme .note-source { display: none; }
  .chiffre { padding: 12px 14px; }
  .chiffre b { font-size: 25px; }

  .mf-etape > span:last-child { display: none; }   /* le nom du temps suffit */
  .mf-icone { width: 42px; height: 42px; }
  .mf-trait { height: 14px; margin: 5px 0; }

  .noeud-texte span { display: none; }
  .reseau { gap: 10px; padding: 12px 12px; }
  .reseau-liens { gap: 5px; }
  .reseau-liens li { padding: 6px 10px; }

  .route li { padding: 9px 12px 9px 16px; }
  .route li.fait p { display: none; }   /* le jalon et le titre portent déjà l'idée */
}

@keyframes mf-entre {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes defile-respire {
  0%, 100% { transform: translateY(0); opacity: .55; }
  50%      { transform: translateY(5px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .mf-etape, .mf-trait { opacity: 1; animation: none; }
  .defile { animation: none; }
}

/* Photos du téléphone (mobile.css, chargée sous 600 px) : absentes de l'ordinateur et de la tablette. */
.photo-m { display: none; }

/* Les mêmes photos que le téléphone, sur l'ordinateur et la tablette, et seulement là :
   au-dessus de 600 px. Le téléphone a les siennes (mobile.css) et ne doit rien voir
   bouger, ni les photos ni l'espacement qu'elles demandent. */
@media (min-width: 601px) {
  .photo-d picture, .photo-d img { display: block; width: 100%; height: 100%; }
  .photo-d img { object-fit: cover; }

  /* Le panneau des logiciels : la moitié gauche était un aplat vide autour de
     « Votre dictée ». La photo la remplit, fondue dans le lime vers les traits. */
  .photo-reseau { position: absolute; top: 0; bottom: 0; left: 0; width: 46.5%; z-index: 0; }
  .photo-reseau::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(214, 242, 75, 0) 55%, rgba(214, 242, 75, .55) 85%, #d8f050 100%);
  }
  .reseau-centre, .reseau-liens { z-index: 1; }
  .reseau-centre { min-height: 380px; align-self: stretch; }
  .reseau-centre .noeud { align-self: end; margin-bottom: 8px; box-shadow: 0 12px 32px rgba(28, 27, 25, .18); }
  /* Le trait part du micro, qui est descendu en bas de la photo : il descend avec lui. */
  .reseau-centre::after { top: auto; bottom: 44px; }

  /* La carte « dicté en sortant de la chambre » : le couloir au-dessus de la phrase. */
  .photo-flux { margin: -30px -28px 22px; aspect-ratio: 5 / 3; border-radius: var(--r-lg) var(--r-lg) 0 0; overflow: hidden; }
  .flux-dit:has(.photo-flux) { justify-content: flex-start; }

  /* Le problème : la feuille, en bandeau au-dessus des trois chiffres. */
  .photo-bandeau { margin: 0 0 20px; aspect-ratio: 3 / 1; border-radius: var(--r-lg); overflow: hidden; }
  .photo-bandeau img { object-position: 50% 60%; }

  @media (max-width: 900px) {
    /* Le panneau passe en une colonne : la photo devient un bandeau en tête. */
    .photo-reseau { position: relative; width: auto; height: auto; aspect-ratio: 16 / 9; margin: -28px -20px 0;
                    border-radius: var(--r-xl) var(--r-xl) 0 0; overflow: hidden; }
    .photo-reseau::after { background: linear-gradient(180deg, rgba(214, 242, 75, 0) 60%, #e3f78a 100%); }
    .reseau-centre { min-height: 0; margin-top: -48px; }
    .reseau-centre::after { top: 50%; bottom: auto; }
    .photo-flux { aspect-ratio: 16 / 9; }
    .reseau-centre .noeud { margin-bottom: 0; }
    .photo-bandeau { aspect-ratio: 16 / 7; }
  }
}

/* Version néerlandaise : Solys écrit en français aujourd'hui, et la page le dit d'emblée. */
.taal-melding {
  margin: 0 0 22px; padding: 12px 16px; border: 1px solid var(--bord); border-radius: 12px;
  background: var(--papier-2); color: var(--encre-2); font-size: 14.5px; line-height: 1.5;
}
.taal-melding b { color: var(--encre); }
.heros .taal-melding { max-width: 60ch; margin: 18px 0 0; }

/* La confiance n'attend pas le pied de page : DPO, fondateur, questions, à portée de main. */
.heros-confiance { margin: 14px 0 0; font-size: 13.5px; color: var(--encre-2); }
.heros-confiance a, .confiance-liens a { color: var(--encre); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: rgba(28, 27, 25, .3); }
.confiance-liens { margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 15px; }
.confiance-liens a::after { content: " →"; }

/* ================================================================ la démo
   Trente secondes de voix, une note prête : la dictée s'écrit, puis remplit les
   encadrés, puis un encadré se copie. Sans JavaScript, ou avec le mouvement réduit,
   on voit directement l'état final : la démo ne cache jamais rien. */
.dm { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 22px; align-items: stretch; }
.dm-panneau { background: #fff; border: 1px solid var(--bord); border-radius: var(--r-lg);
  box-shadow: 0 18px 40px rgba(28, 27, 25, .08); padding: 22px; min-width: 0; }
.dm-tete { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.dm-micro { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: var(--sur-accent); flex: none; }
.dm-micro svg { width: 19px; height: 19px; }
.dm-horloge { font-variant-numeric: tabular-nums; font-weight: 650; font-size: 18px; line-height: 1.1; }
.dm-etat { font-size: 12.5px; color: var(--encre-3); }
.dm-etat::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: #e5484d; margin-right: 6px; vertical-align: 1px; }
.dm.fini .dm-etat::before { background: var(--accent-texte); }
.dm-onde { margin-left: auto; display: flex; align-items: center; gap: 3px; height: 28px; }
.dm-onde i { width: 3px; height: 30%; border-radius: 2px; background: var(--encre-3); }
.dm.joue .dm-onde i { animation: dm-onde 1s ease-in-out infinite; background: var(--encre); }
.dm-onde i:nth-child(2n) { animation-delay: -.3s; } .dm-onde i:nth-child(3n) { animation-delay: -.6s; }
.dm-onde i:nth-child(5n) { animation-delay: -.15s; }
@keyframes dm-onde { 0%, 100% { height: 25%; } 50% { height: 95%; } }
.dm-dit { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--encre-2); min-height: 8.5em; }
.dm-dit .curseur { display: inline-block; width: 2px; height: 1.05em; background: var(--encre); vertical-align: -2px;
  margin-left: 1px; animation: dm-clignote 1s steps(1) infinite; }
.dm.fini .dm-dit .curseur { display: none; }
@keyframes dm-clignote { 50% { opacity: 0; } }
.dm-legende { margin: 14px 0 0; font-size: 12.5px; color: var(--encre-3); }

.dm-onglets { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.dm-onglet { font-size: 13px; padding: 5px 12px; border-radius: var(--r-pill); border: 1px solid var(--bord);
  color: var(--encre-2); background: var(--papier-2); transition: opacity var(--t), transform var(--t); }
.dm-onglet em { font-style: normal; color: var(--encre-3); margin-left: 4px; }
.dm-onglet.on { background: var(--encre); color: #fff; border-color: transparent; }
.dm-onglet.on em { color: rgba(255, 255, 255, .7); }
.dm-encadre { border: 1px solid var(--bord); border-radius: var(--r-md); padding: 12px 14px; margin-top: 10px;
  transition: border-color var(--t), background var(--t); }
.dm-encadre-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 13px; font-weight: 650; margin-bottom: 6px; }
.dm-copier { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: var(--r-pill);
  border: 1px solid var(--bord-fort); background: #fff; white-space: nowrap; }
.dm-encadre.copie { border-color: var(--accent-fonce); background: var(--accent-clair); }
.dm-encadre.copie .dm-copier { background: var(--accent); border-color: transparent; }
.dm-ligne { margin: 2px 0; font-size: 14.5px; line-height: 1.5; transition: opacity .35s var(--t), transform .35s var(--t); }
.dm-ligne b { font-weight: 650; }

/* L'animation ne cache que lorsqu'elle peut montrer : classe posée par le script. */
.dm.prepare .dm-ligne, .dm.prepare .dm-onglet.suivant { opacity: 0; transform: translateY(6px); }
.dm.prepare .dm-ligne.vu, .dm.prepare .dm-onglet.suivant.vu { opacity: 1; transform: none; }

.dm-bas { display: flex; align-items: center; gap: 16px; margin-top: 18px; flex-wrap: wrap; }
.dm-rejouer { font: inherit; font-size: 14px; font-weight: 600; background: none; border: 0; padding: 0;
  cursor: pointer; color: var(--encre); text-decoration: underline; text-underline-offset: 3px; }
.dm-rejouer[hidden] { display: none; }
.dm-note { font-size: 13.5px; color: var(--encre-2); margin: 0; }

@media (max-width: 900px) {
  .dm { grid-template-columns: 1fr; }
  .dm-dit { min-height: 0; }
}
@media (max-width: 600px) {
  .dm-panneau { padding: 16px; border-radius: var(--r-md); }
  .dm-dit { font-size: 14.5px; }
  .dm-ligne { font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .dm.joue .dm-onde i { animation: none; }
  .dm-dit .curseur { display: none; }
}