/* ====================================================================
   Vitrine Stovo, feuille partagée (lot V1 de la refonte, 01/10/2026).

   Une seule feuille pour les cinq pages à terme : ce lot ne branche que
   index.html, le lot V2 y raccordera fonctions.html et les pages
   légales. Elle sort de la page parce que la CSP du .htaccess n'autorise
   un script intégré que par son empreinte : un fichier externe se
   retouche sans rien recalculer.

   Le monde ne change pas (DESIGN.md) : crème, cartes blanches au filet
   chaud, encre, une seule flamme pour agir, le teal pour « Validé »
   seulement, une seule ombre chaude (le compteur). La composition, elle,
   change : une grille de preuves autour de la démo jouable.
   ==================================================================== */

/* ---------- Polices auto-hébergées (jamais de CDN : RGPD, pas de
   dépendance réseau). Chemins relatifs à ce fichier, d'où le ../ ; les
   préchargements du <head> pointent sur la même adresse finale. ---------- */
@font-face{
  font-family:'DM Sans';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('../fonts/dm-sans-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Instrument Serif';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/instrument-serif-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Navigation entre pages du site : le logotype glisse d'une page à
   l'autre. Ignoré sans bruit par les navigateurs qui ne le gèrent pas. */
@view-transition{navigation:auto;}

/* ====================================================================
   JETONS : un rôle, une couleur (DESIGN.md, règles gravées 1 à 4).
   Contrastes calculés, pas estimés :
   --gris 6,4:1 sur blanc, 6,05:1 sur crème, 5,7:1 sur --fond-contact.
   --gris-clair 3,2:1 sur crème : décor et très grands chiffres seulement.
   --creme-attenue 7,9:1 sur --encre : le texte secondaire de la carte en
   encre (la seule surface sombre de la page).
   ==================================================================== */
:root{
  --creme:#FFF8F1;
  --carte:#FFFFFF;
  --filet:#E3D6C5;
  --encre:#1D1E1C;
  --gris:#615F5C;
  --gris-clair:#8E8B87;
  --flamme:#FA5D00;
  --flamme-sombre:#C94A00;
  --valide:#0F766E;
  --fond-contact:#FFF1E4;
  --creme-attenue:#B9B1A8;

  --gouttiere:clamp(20px,6vw,96px);
  --entete-h:61px;
  /* Le rythme : plus d'espace au-dessus d'un titre qu'en dessous, une
     seule règle par type, posée d'un seul côté (le haut) pour que deux
     sections voisines n'additionnent jamais leurs marges. */
  --espace-section:clamp(72px,9vw,112px);
  --espace-majeur:clamp(96px,12vw,160px);
  --sous-titre:clamp(24px,3vw,40px);
}
@media (min-width:960px){:root{--entete-h:73px;}}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:var(--entete-h);}
body{
  margin:0;
  font-family:'DM Sans','Helvetica Neue',Arial,sans-serif;
  font-size:17px;
  line-height:1.6;
  color:var(--encre);
  background:var(--creme);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,p,ul,li,figure,figcaption{margin:0;}
ul{padding:0; list-style:none;}
img{max-width:100%; display:block;}
button{font-family:inherit; cursor:pointer;}

/* Sans cette règle, une classe qui pose un display écrase [hidden]
   (piège payé dans l'app). */
[hidden]{display:none !important;}

.num{font-variant-numeric:tabular-nums;}

.visuellement-cache{
  position:absolute !important;
  width:1px; height:1px;
  margin:-1px; padding:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* Le focus clavier en encre : le teal est réservé à « Validé ». */
a:focus-visible, button:focus-visible, summary:focus-visible{
  outline:2.5px solid var(--encre);
  outline-offset:3px;
  border-radius:6px;
}

.saut{
  position:absolute;
  left:-9999px; top:0;
  z-index:100;
  padding:12px 20px;
  background:var(--encre);
  color:var(--creme);
  border-radius:0 0 12px 0;
}
.saut:focus{left:0;}

/* ---------- Gabarit ---------- */
.zone{
  width:min(1240px, calc(100% - 2 * var(--gouttiere)));
  margin-inline:auto;
}
/* Pas de scroll-margin-top ici : le scroll-padding-top de html suffit,
   les deux s'additionnaient (ancre posée deux bandeaux plus bas). */
.section{padding-top:var(--espace-section);}
.section--majeure{padding-top:var(--espace-majeur);}

/* La grille à douze colonnes du bureau : le titre en 1 à 5, le contenu
   en 6 à 12. Sous 960 px, tout s'empile dans l'ordre du HTML. */
.grille__titre{margin-bottom:var(--sous-titre);}
@media (min-width:960px){
  .grille{
    display:grid;
    grid-template-columns:repeat(12,minmax(0,1fr));
    column-gap:24px;
    align-items:start;
  }
  .grille__titre{grid-column:1 / span 5; margin-bottom:0; padding-right:24px;}
  .grille__contenu{grid-column:6 / span 7;}
}

/* ---------- Typographie ---------- */
h1{
  font-family:'Instrument Serif',Georgia,'Times New Roman',serif;
  font-weight:400;
  font-size:clamp(46px,11vw,104px);
  line-height:.98;
  letter-spacing:-0.02em;
  text-wrap:balance;
}
/* 'opsz' 40 : DM Sans déclare l'axe de taille optique (9 à 40). Mesuré
   au navigateur le 01/10/2026 : la ligne change bien le dessin (voir le
   compte rendu du lot V1). */
h2{
  font-size:clamp(32px,5vw,56px);
  line-height:1.08;
  font-weight:650;
  letter-spacing:-0.02em;
  font-variation-settings:'opsz' 40;
  text-wrap:balance;
}
h3{
  font-size:clamp(22px,2.2vw,26px);
  line-height:1.2;
  font-weight:650;
  letter-spacing:-0.015em;
  text-wrap:balance;
}
/* Les textes d'introduction : en encre, plus grands que le corps. */
.intro{
  font-size:clamp(19px,1.5vw,21px);
  line-height:1.55;
  color:var(--encre);
  max-width:46ch;
  text-wrap:pretty;
}
.legende{
  font-size:15px;
  line-height:1.5;
  color:var(--gris);
  text-wrap:pretty;
}
/* Lien dans une phrase : 11 px de rembourrage vertical, invisibles,
   portent la zone de toucher à 44 px sans bouger la ligne. */
.lien{
  padding-block:11px;
  color:var(--encre);
  text-decoration:underline;
  text-decoration-thickness:1.5px;
  text-underline-offset:3px;
  text-decoration-color:var(--gris-clair);
}
.lien:hover{text-decoration-color:var(--encre);}

/* ---------- Cartes ---------- */
.carte{
  background:var(--carte);
  border:1px solid var(--filet);
  border-radius:20px;
  box-shadow:0 1px 2px rgba(29,30,28,.06);
}
/* L'unique ombre chaude de la page : la carte du compteur. */
.carte--chaude{
  box-shadow:
    rgba(250,166,0,.22) 6px 4px 24px,
    rgba(29,30,28,.05) 0 1px 2px;
}

/* ---------- Boutons ---------- */
.bouton{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:48px;
  padding:13px 24px;
  font-family:inherit;
  font-size:19px;
  font-weight:700;
  line-height:1.15;
  text-decoration:none;
  border-radius:16px;
  white-space:nowrap;
  transition:background-color .2s ease, border-color .2s ease, color .2s ease, transform .12s ease;
}
/* Réponse au toucher, pas une animation. */
.bouton:active, .compteur__phrase:active{transform:scale(.97);}
/* contraste-ok : blanc sur flamme, 3,17:1, permis parce que 19 px gras
   (taille posée par .bouton) est du texte large au sens WCAG (seuil
   18,66 px gras). Ne jamais descendre en dessous de cette taille. */
.bouton--flamme{
  color:#FFFFFF;
  background:var(--flamme);
  border:1px solid transparent;
  box-shadow:0 1px 4px rgba(0,0,0,.2);
}
.bouton--flamme:hover{background:var(--flamme-sombre);}
.bouton--contour{
  font-size:17px;
  color:var(--encre);
  background:var(--carte);
  border:1.5px solid var(--filet);
}
.bouton--contour:hover{border-color:var(--gris-clair);}
.bouton--petit{min-height:44px; padding:10px 16px; font-size:15px; gap:8px;}
.bouton__fleche{width:18px; height:18px; flex:0 0 auto;}
.bouton--petit .bouton__fleche{width:16px; height:16px;}
/* Très petits écrans (320 px) : un libellé de bouton peut passer à la
   ligne plutôt que de pousser la page hors de l'écran. */
@media (max-width:359px){
  .bouton{white-space:normal; text-align:center;}
  .bouton--petit{padding:10px 12px;}
  .bouton--petit .bouton__fleche{display:none;}
}

/* ====================================================================
   BANDEAU : collant, crème plein, filet en bas, sans flou.
   ==================================================================== */
.bandeau{
  position:sticky;
  top:0;
  z-index:50;
  background:var(--creme);
  border-bottom:1px solid var(--filet);
}
.bandeau__interieur{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:calc(var(--entete-h) - 1px);
  padding-block:8px;
}
/* Le mot Stovo est le logotype : flamme à 3:1 sur crème, exemptée au
   même titre qu'un logo (WCAG 1.4.5). */
.logo{
  font-size:22px;
  font-weight:700;
  letter-spacing:-0.02em;
  color:var(--flamme);
  text-decoration:none;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  view-transition-name:logo;
}
.bandeau__nav{display:flex; align-items:center; gap:4px;}
.bandeau__lien{
  display:none;
  align-items:center;
  min-height:44px;
  padding:0 12px;
  font-size:15px;
  font-weight:500;
  color:var(--gris);
  text-decoration:none;
  border-radius:10px;
}
.bandeau__lien:hover{color:var(--encre); text-decoration:underline; text-underline-offset:4px;}
@media (min-width:960px){
  .bandeau__interieur{padding-block:14px;}
  .bandeau__lien{display:inline-flex;}
  .bandeau__nav .bouton{margin-left:12px;}
}
/* Au téléphone, un seul « Écrire à Corentin » visible à la fois : quand
   la barre au pouce paraît, le bouton du bandeau s'efface (classe posée
   sur <html> par le script de la barre), et revient quand elle se cache.
   visibility:hidden : effacé, il ne prend plus le focus clavier. */
@media (max-width:959px){
  .bandeau .bouton--contour{
    transition:opacity .2s ease, visibility 0s, background-color .2s ease, border-color .2s ease, transform .12s ease;
  }
  .barre-pouce-visible .bandeau .bouton--contour{
    opacity:0;
    visibility:hidden;
    transition:opacity .2s ease, visibility 0s linear .2s;
  }
  /* À la place du bouton effacé, un lien texte vers l'app (lot V3) : le
     bandeau ne reste pas vide, et l'app est à un toucher. Il n'existe que
     pendant que la barre est visible ; sans script, la classe n'est
     jamais posée, il ne paraît donc jamais. */
  .bandeau__nav{position:relative;}
  .bandeau__app{
    position:absolute;
    right:0; top:50%;
    display:inline-flex;
    align-items:center;
    min-height:44px;
    padding:0 4px;
    font-size:15px;
    font-weight:600;
    color:var(--encre);
    white-space:nowrap;
    text-decoration:underline;
    text-decoration-thickness:1.5px;
    text-underline-offset:4px;
    transform:translateY(-50%);
    opacity:0;
    visibility:hidden;
    transition:opacity .2s ease, visibility 0s linear .2s;
  }
  .barre-pouce-visible .bandeau__app{
    opacity:1;
    visibility:visible;
    transition:opacity .2s ease, visibility 0s;
  }
}
@media (min-width:960px){.bandeau__app{display:none;}}

/* ====================================================================
   1. ACCROCHE
   Au téléphone : le texte, la carte du compteur, puis l'action et les
   repères (la carte est l'écran qu'on tend à quelqu'un, elle doit tenir
   en entier dans le premier écran). Au bureau : texte, action et
   repères en colonnes 1 à 6, le compteur en 8 à 12, centré.
   ==================================================================== */
/* Au téléphone, chaque pixel du haut compte : la carte entière (jusqu'à
   « Rien ne s'écrit sans votre oui. ») doit tenir dans 390 × 844. */
.accroche{padding-top:12px;}
.accroche__grille{display:grid; grid-template-columns:minmax(0,1fr); gap:16px;}
.accroche__texte{order:0;}
.compteur{order:1;}
.accroche__action{order:2;}
.reperes{order:3;}

.accroche__soustitre{
  margin-top:10px;
  font-size:clamp(19px,1.9vw,23px);
  line-height:1.42;
  color:var(--gris);
  max-width:34ch;
  text-wrap:pretty;
}
.accroche__action{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
  margin-top:12px;
}
.accroche__minutage{font-size:15px; line-height:1.45; color:var(--gris);}

.reperes{display:flex; flex-direction:column; gap:12px; margin-top:12px; padding-top:20px; border-top:1px solid var(--filet);}
.repere{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:15px;
  line-height:1.35;
  color:var(--encre);
  text-wrap:balance;
}
.repere__icone{width:20px; height:20px; flex:0 0 auto; color:var(--gris);}

@media (min-width:960px){
  .accroche{padding-top:clamp(40px,5vw,72px);}
  .accroche__grille{
    grid-template-columns:repeat(12,minmax(0,1fr));
    column-gap:24px;
    row-gap:0;
    align-items:center;
  }
  .accroche__texte{grid-column:1 / span 6; grid-row:1;}
  .accroche__action{grid-column:1 / span 6; grid-row:2; margin-top:36px; gap:14px;}
  /* Les trois repères : une rangée de trois cases égales sous un filet,
     l'icône au-dessus du texte. */
  .reperes{
    grid-column:1 / span 6; grid-row:3;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:24px;
    margin-top:48px;
    padding-top:22px;
  }
  .repere{flex-direction:column; align-items:flex-start; gap:10px;}
  .compteur{grid-column:8 / span 5; grid-row:1 / span 3; align-self:center;}
  .accroche__soustitre{margin-top:28px;}
  /* Au bureau, le titre n'a que six colonnes : il suit leur largeur
     (74 px à 1024, 104 px dès 1440) au lieu de celle de l'écran. */
  h1{font-size:clamp(72px,7.2vw,104px);}
}

/* ---------- Le compteur (démo jouable) ---------- */
.compteur{
  padding:18px 20px 20px;
  display:flex;
  flex-direction:column;
  gap:14px;
  min-width:0;
}
@media (min-width:640px){.compteur{padding:28px 28px 26px; gap:18px;}}
.compteur__tete{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.compteur__label{
  font-size:13px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--gris);
}
/* La trace « 12 → 24 » : deux nombres autour d'une flèche en trait
   (U+2192 n'est pas dans DM Sans, il tombait en police de secours).
   Largeur minimale en ch, alignée à droite : quand la trace passe de
   « 12 » à « 12 → 24 », rien d'autre ne bouge dans la tête. */
.compteur__trace{
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  min-width:7.5ch;
  font-size:14px;
  font-weight:600;
  color:var(--gris);
  white-space:nowrap;
}
.compteur__trace-suite{display:inline-flex; align-items:center; gap:6px;}
.compteur__fleche{width:14px; height:14px;}
/* Sous 380 px, « JUS DE FRUITS · EN STOCK » passait sur deux lignes et
   décalait la trace : un cran plus petit, moins espacé, sur une ligne.
   La réserve de 7,5ch de la trace la ferait alors sortir de la carte
   (252 px pour 238 à 320 px, mesuré) : elle prend sa largeur réelle ;
   alignée à droite, l'étiquette ne bouge pas quand elle change. */
@media (max-width:379px){
  .compteur__label{font-size:12px; letter-spacing:.06em; white-space:nowrap;}
  .compteur__tete{gap:8px;}
  .compteur__trace{min-width:0;}
}

.compteur__valeur{display:flex; align-items:baseline; gap:14px;}
/* Proposée : gris chaud (--gris-clair, permis à cette taille, texte très
   large, 3:1 suffit). Validée : encre. La couleur raconte le mécanisme. */
.compteur__cible{
  font-size:clamp(80px,24vw,164px);
  line-height:.9;
  font-weight:700;
  letter-spacing:-.04em;
  color:var(--encre);
  transition:color .4s ease;
}
@media (min-width:960px){.compteur__cible{font-size:clamp(96px,11vw,164px);}}
/* contraste-ok : 80 px et plus, texte très large, seuil 3:1 (3,4:1 sur blanc). */
.compteur__cible--propose{color:var(--gris-clair);}
.compteur__unite{font-size:clamp(18px,2vw,22px); font-weight:500; color:var(--gris);}

/* Le roulement des chiffres (emprunt au tableau à palettes) : chaque
   chiffre est une colonne 0 à 9 qui glisse verticalement. Le fantôme,
   invisible et dans le flux, donne à la colonne sa ligne de base ; la
   pile, posée en absolu, ne compte pas dans la ligne. Le découpage
   passe par clip-path, pas par overflow, qui déplacerait la ligne de
   base de la colonne et décalerait « bouteilles ».
   Les chiffres de DM Sans sont proportionnels (le sous-ensemble latin
   n'a pas de chiffres tabulaires, mesuré le 01/10/2026 : « 1 » fait
   0,32 em, « 0 » 0,69 em) : le script donne à chaque colonne la largeur
   de son chiffre. Cette largeur se pose d'un coup, au départ du
   roulement : la faire glisser serait animer une propriété de mise en
   page (le navigateur recalcule la ligne à chaque image), et aucune
   transformation ne peut changer la place qu'un élément occupe. Seul le
   chiffre roule, en transform. Le découpage horizontal laisse 0,12 em
   de marge : un chiffre large qui sort d'une colonne devenue étroite
   n'est pas rogné pendant les 300 ms du roulement. L'approche de
   -0,04 em du compteur passe en marge négative, pour que le chiffre
   reste centré dans sa colonne. */
.compteur__rouleaux{display:inline-block; white-space:nowrap;}
.chiffre{
  display:inline-block;
  position:relative;
  margin-right:-.04em;
  letter-spacing:0;
  clip-path:inset(0 -0.12em);
}
.chiffre__fantome{visibility:hidden;}
.chiffre__pile{
  position:absolute;
  left:50%; top:0;
  display:flex;
  flex-direction:column;
  transform:translateX(-50%);
  transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.chiffre__pile > span{display:block; text-align:center;}

.compteur__separateur{height:1px; background:var(--filet);}

.compteur__choix{display:flex; flex-direction:column; gap:10px;}
/* « Essayez : » seul sur sa ligne, les trois phrases en colonne dessous
   (lot V3) : en ligne, elles se coupaient au hasard de la largeur. */
.compteur__phrases{display:flex; flex-direction:column; align-items:flex-start; gap:6px;}
@media (min-width:640px){.compteur__phrases{gap:8px;}}
.compteur__essayez{font-size:15px; font-weight:600; color:var(--gris);}
.compteur__phrase{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  max-width:100%;
  padding:9px 16px;
  font-size:15px;
  font-weight:600;
  line-height:1.3;
  color:var(--encre);
  background:var(--carte);
  border:1.5px solid var(--filet);
  border-radius:999px;
  text-align:left;
  transition:background-color .2s ease, border-color .2s ease, transform .12s ease;
}
.compteur__phrase:hover{border-color:var(--gris-clair);}
/* La phrase en train d'être dite : crème, bordure encre. */
.compteur__phrase[aria-pressed="true"]{background:var(--creme); border-color:var(--encre);}
/* Pendant la frappe : aria-disabled (et non disabled, qui ferait perdre
   le focus clavier). Sans cette règle, l'état serait invisible. */
.compteur__phrase[aria-disabled="true"]{opacity:.55; cursor:default;}
.compteur__phrase[aria-disabled="true"]:active{transform:none;}
.compteur__honnete{font-size:14px; line-height:1.4; color:var(--gris);}

.compteur__dictee{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:17px;
  line-height:1.4;
  color:var(--encre);
  min-height:34px;
}
@media (min-width:640px){.compteur__dictee{font-size:18px;}}
/* contraste-ok : l'icône micro, décorative (aria-hidden), aucun texte. */
.compteur__micro-rond{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:34px; height:34px;
  border-radius:999px;
  background:var(--creme);
  color:var(--flamme);
}
.compteur__dictee-fin{white-space:nowrap;}
.compteur__curseur{
  display:inline-block;
  width:2px; height:1.05em;
  margin-left:1px;
  background:var(--flamme);
  vertical-align:text-bottom;
  opacity:0;
}
.compteur__dictee[data-actif] .compteur__curseur{animation:clignote .9s steps(1) infinite;}
@keyframes clignote{0%,49%{opacity:1;}50%,100%{opacity:0;}}
/* Au repos, avant tout jeu : guillemets vides en gris décor (le seul
   texte en --gris-clair toléré, il n'y a alors aucun mot). */
.compteur__dictee-corps{color:var(--encre);}
/* contraste-ok : au repos il n'y a aucun mot, seulement les guillemets décoratifs (DESIGN.md, règle 3). */
.compteur__dictee-corps--repos{color:var(--gris-clair);}
.compteur__dictee-corps--repos .compteur__curseur{opacity:1;}

.compteur__validation{display:flex; align-items:center; gap:10px 12px; flex-wrap:wrap; min-height:34px;}
.compteur__validation .bouton{padding:11px 22px; min-height:46px;}
.compteur__non{
  color:var(--encre);
  background:var(--carte);
  border:1.5px solid var(--filet);
  font-size:17px;
}
/* Blanc sur teal : 5,5:1. Le seul teal de la page. */
.compteur__pastille{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 14px;
  background:var(--valide);
  color:#FFFFFF;
  font-weight:700;
  font-size:14px;
  line-height:1.3;
  border-radius:999px;
}
.compteur__pastille--contour{
  background:var(--carte);
  color:var(--encre);
  border:1.5px solid var(--filet);
  padding:6px 14px;
}
.compteur__promesse{font-size:14px; line-height:1.4; color:var(--gris); flex-basis:100%;}

/* ====================================================================
   2. LE PROBLÈME : trois constats en lignes éditoriales, pas en cartes.
   ==================================================================== */
.constats li{
  padding:22px 0;
  font-size:clamp(22px,2.6vw,28px);
  line-height:1.3;
  font-weight:500;
  letter-spacing:-0.01em;
  color:var(--encre);
  text-wrap:balance;
}
.constats li:first-child{padding-top:0;}
.constats li + li{border-top:1px solid var(--filet);}
.constats__conclusion{
  margin-top:28px;
  max-width:48ch;
  font-size:19px;
  line-height:1.6;
  color:var(--encre);
  text-wrap:pretty;
}
.constats__chute{
  margin-top:20px;
  font-size:clamp(22px,2.2vw,26px);
  line-height:1.3;
  font-weight:650;
  letter-spacing:-0.015em;
}
@media (min-width:960px){
  .constats li{padding:28px 0;}
  .constats__conclusion{margin-top:36px;}
}

/* ====================================================================
   3. LES GESTES : la bande blanche pleine largeur, la grille de preuves.
   La bande a un fond : son rembourrage du bas est intérieur, il ne
   s'additionne à rien.
   ==================================================================== */
.bande{
  margin-top:var(--espace-section);
  padding:var(--espace-majeur) 0 var(--espace-section);
  background:var(--carte);
  border-block:1px solid var(--filet);
}
.bande__tete{margin-bottom:var(--sous-titre);}
.bande__tete .grille__titre{margin-bottom:16px;}
@media (min-width:960px){
  .bande__tete{align-items:end; margin-bottom:56px;}
  .bande__tete .grille__titre{margin-bottom:0;}
  .bande__tete .intro{padding-bottom:6px;}
}

/* Les tuiles : crème sur la bande blanche, jamais une carte dans une
   carte. Au téléphone, empilées dans l'ordre A à E. */
.preuves{display:grid; gap:16px;}
.tuile{
  display:flex;
  flex-direction:column;
  gap:28px;
  padding:clamp(24px,3vw,40px);
  background:var(--creme);
  border:1px solid var(--filet);
  border-radius:24px;
  min-width:0;
}
.tuile__texte{display:flex; flex-direction:column; gap:12px;}
.tuile__texte p{font-size:17px; line-height:1.6; color:var(--encre); max-width:44ch; text-wrap:pretty;}
.tuile__texte .tuile__citation{font-size:19px; line-height:1.4; font-weight:600;}
.tuile__tete{display:flex; align-items:center; gap:14px;}
/* Les pastilles 1-2-3 : un des quatre usages de la flamme. 19 px gras,
   texte large, 3,17:1. */
.pastille-geste{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:40px; height:40px;
  border-radius:999px;
  background:var(--flamme);
  color:#FFFFFF;
  font-size:19px;
  font-weight:700;
}
.tuile__figure{display:flex; flex-direction:column; align-items:center; gap:14px;}
.tuile__figure .legende{align-self:stretch; text-align:center; max-width:44ch; margin-inline:auto;}

/* Le téléphone : un seul composant pour toutes les captures. Ombre
   NEUTRE (la seule ombre chaude reste au compteur). La place est
   réservée par aspect-ratio : la page ne saute pas quand l'image
   paresseuse arrive. */
.telephone{
  width:100%;
  max-width:300px;
  aspect-ratio:390 / 844;
  border:7px solid var(--encre);
  border-radius:34px;
  overflow:hidden;
  background:var(--creme);
  box-shadow:0 1px 2px rgba(29,30,28,.06), 0 24px 48px -24px rgba(29,30,28,.22);
}
.telephone img{width:100%; height:100%; object-fit:cover; object-position:top;}
/* La variante recadrée : le haut de l'écran seulement, fondu vers le
   bas. Chaque capture a sa hauteur, réglée sur ce qu'elle doit montrer
   (la bulle et le Oui ; la liste et « Copier la liste » ; les premières
   pastilles du stock). */
.telephone--haut{
  --fondu:88px;
  border-bottom:0;
  border-radius:34px 34px 0 0;
  -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - var(--fondu)), transparent);
  mask-image:linear-gradient(to bottom, #000 calc(100% - var(--fondu)), transparent);
}
.telephone--proposition{aspect-ratio:390 / 520;}
/* Fondu plus court : « Copier la liste », que la légende annonce, reste net. */
.telephone--pilotage{aspect-ratio:390 / 720; --fondu:44px;}
.telephone--stock{aspect-ratio:390 / 640;}

/* Le cadre simple de la tuile D : une image, pas un téléphone. Bornée :
   en pleine largeur, le « Oui » orange de la capture deviendrait le plus
   gros bouton de la page. */
.cadre{
  width:100%;
  max-width:460px;
  border:1px solid var(--filet);
  border-radius:16px;
  overflow:hidden;
  background:var(--carte);
}
.cadre img{width:100%; height:auto;}

.voir-tout{
  margin-top:48px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:16px;
}
.voir-tout p{font-size:17px; line-height:1.55; color:var(--encre); max-width:44ch;}

@media (min-width:960px){
  .preuves{
    grid-template-columns:repeat(12,minmax(0,1fr));
    gap:24px;
  }
  /* Lot V3 : chaque téléphone fait 320 px, sinon le texte de la capture
     tombait à 7-9 px et la preuve ne se lisait plus. À cette largeur, une
     tuile de sept colonnes ne loge plus texte et téléphone côte à côte
     (il restait 212 px au texte à 1280), et la grande tuile A posée à
     côté de B et C empilées gardait 690 px de vide à 1024 (mesuré). D'où
     trois rangées : A en pleine largeur (texte à gauche, centré, le
     téléphone à droite), puis B et C, puis D et E, en deux moitiés. */
  .tuile--a{
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:minmax(0,1fr) 320px;
    column-gap:clamp(32px,4vw,64px);
    align-items:center;
  }
  .tuile--b, .tuile--d{grid-column:1 / span 6;}
  .tuile--c, .tuile--e{grid-column:7 / span 6;}
  .preuves .telephone{max-width:320px;}
  /* B et C, côte à côte : texte puis téléphone posé au bas (de même E).
     La capture de B montre plus d'écran qu'au téléphone (390/720 comme
     celle de C) : les deux tuiles ont la même hauteur, sans vide sous la
     bulle. */
  .telephone--proposition{aspect-ratio:390 / 720;}
  /* D (retouche du lot V2) : la bulle juste sous le texte, à la largeur
     de sa colonne (520 px au plus), la légende dessous. La tuile E fixe
     la hauteur de la rangée : centrer la bulle dans ce qui reste ouvrait
     92 px sous le texte à 1440. Un espaceur souple (le ::after, placé
     entre texte et bulle par order) prend 28 à 64 px de ce reste, la
     marge automatique du bas prend le surplus. */
  .tuile--d{gap:0;}
  .tuile--d::after{content:''; order:1; flex:1 1 0; min-height:28px; max-height:64px;}
  .tuile--d .tuile__figure{order:2; margin-bottom:auto; align-items:stretch; max-width:520px;}
  .tuile--d .cadre{max-width:none;}
  .tuile--d .tuile__figure .legende{text-align:left; margin-inline:0;}
  .tuile--cote .tuile__figure, .tuile--e .tuile__figure{margin-top:auto;}
  .voir-tout{flex-direction:row; align-items:center; gap:28px;}
}

/* ====================================================================
   4. CE QUE STOVO NE FAIT PAS : la carte en encre, le seul aplat sombre
   de la page. Les refus sont des cases vides à bord pointillé : la case
   vide dit ce qui n'y est pas. Aucune flamme ici (règle 2).
   ==================================================================== */
.refus{
  padding:clamp(32px,6vw,80px) clamp(24px,6vw,80px);
  background:var(--encre);
  color:var(--creme);
  border-radius:28px;
}
/* Le fond est redéclaré sur chaque texte de la carte : le balayage des
   contrastes ne suit pas l'héritage, il mesure ainsi le vrai couple
   (crème 15,9:1, crème atténuée 7,9:1 sur l'encre). */
.refus h2{color:var(--creme); background:var(--encre); max-width:17ch;}
.refus__cases{
  margin-top:clamp(32px,4vw,56px);
  display:grid;
  gap:12px;
}
/* Au téléphone (retouche du lot V2) : la croix à gauche du texte, sur
   la même ligne ; au bureau, la croix au-dessus (plus bas). La croix
   descend de 1 px pour se caler sur la première ligne (24 px contre
   26,6 px d'interligne). */
.refus__case{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:14px;
  align-items:start;
  padding:19px 20px;
  border:1.5px dashed rgba(255,248,241,.35);
  border-radius:16px;
  font-size:19px;
  line-height:1.4;
  color:var(--creme);
  background:var(--encre);
}
.refus__croix{width:24px; height:24px; margin-top:1px; color:var(--creme-attenue); background:var(--encre); font-size:24px;}
.refus__conclusion{
  margin-top:clamp(28px,3.5vw,48px);
  max-width:46ch;
  font-size:19px;
  line-height:1.6;
  color:var(--creme-attenue);
  background:var(--encre);
  text-wrap:pretty;
}
.refus__accent{color:var(--creme); background:var(--encre); font-weight:650; font-size:19px;}
@media (min-width:960px){
  .refus__cases{grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px;}
  .refus__case{display:flex; flex-direction:column; gap:18px; min-height:168px; justify-content:space-between; padding:26px 26px 28px;}
  .refus__croix{margin-top:0;}
}

/* ====================================================================
   5. OÙ EN EST STOVO : le récit, en encre, sans étiquette au-dessus.
   ==================================================================== */
.recit p{font-size:19px; line-height:1.62; color:var(--encre); max-width:50ch; text-wrap:pretty;}
.recit p + p{margin-top:18px;}
.recit .recit__accent{
  margin-top:28px;
  font-size:clamp(22px,2.2vw,26px);
  line-height:1.3;
  font-weight:650;
  letter-spacing:-0.015em;
}

/* ====================================================================
   6. LES QUESTIONS : le titre collant à gauche au bureau.
   ==================================================================== */
.questions__liste{border-bottom:1px solid var(--filet);}
.question{border-top:1px solid var(--filet);}
.question__intitule{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  min-height:64px;
  padding:16px 0;
  font-size:19px;
  line-height:1.35;
  font-weight:600;
  color:var(--encre);
  cursor:pointer;
  list-style:none;
}
.question__intitule::-webkit-details-marker{display:none;}
.question__intitule:hover .question__chevron{color:var(--encre);}
.question__chevron{flex:0 0 auto; color:var(--gris); transition:transform .2s ease, color .2s ease;}
.question[open] .question__chevron{transform:rotate(180deg);}
.question__reponse{
  max-width:44ch;
  padding:0 0 26px;
  font-size:17px;
  line-height:1.65;
  color:var(--encre);
  text-wrap:pretty;
}
@media (min-width:960px){
  .questions__titre{
    grid-column:1 / span 4;
    position:sticky;
    top:calc(var(--entete-h) + 24px);
  }
  .questions__liste{grid-column:6 / span 7;}
}

/* ====================================================================
   7. CONTACT
   ==================================================================== */
.contact{
  display:grid;
  gap:32px;
  padding:clamp(32px,6vw,72px) clamp(24px,6vw,72px);
  background:var(--fond-contact);
  border-radius:24px;
}
.contact h2{max-width:16ch;}
.contact .intro{margin-top:var(--sous-titre); max-width:48ch;}
.contact__actions{display:flex; flex-direction:column; align-items:flex-start; gap:14px;}
.contact__adresse{
  margin-top:4px;
  font-size:17px;
  color:var(--encre);
  user-select:all;
  -webkit-user-select:all;
}
@media (min-width:960px){
  .contact{grid-template-columns:minmax(0,7fr) minmax(0,4fr); column-gap:64px; align-items:end;}
  .contact__actions{padding-bottom:4px;}
}

/* ====================================================================
   PIED
   ==================================================================== */
.pied{
  margin-top:var(--espace-section);
  padding:28px 0 calc(112px + env(safe-area-inset-bottom));
  border-top:1px solid var(--filet);
}
.pied__interieur{display:flex; flex-direction:column; gap:16px;}
.pied__mention{font-size:15px; color:var(--gris);}
/* Au téléphone : une grille de deux colonnes régulières (lot V3), un
   lien par case, chaque case de 44 px au moins. */
.pied__liens{display:grid; grid-template-columns:1fr 1fr; gap:4px 24px;}
.pied__liens a{
  display:flex;
  align-items:center;
  min-height:44px;
  font-size:15px;
  color:var(--gris);
  text-decoration:none;
}
.pied__liens a:hover{color:var(--encre); text-decoration:underline; text-underline-offset:4px;}
@media (min-width:960px){
  .pied{padding-bottom:40px;}
  .pied__interieur{flex-direction:row; align-items:center; justify-content:space-between;}
  .pied__liens{display:flex; flex-wrap:wrap; gap:0 28px;}
}

/* ====================================================================
   BARRE AU POUCE (téléphone seulement). Cachée dans le HTML, révélée
   par le script ; elle paraît quand l'accroche est passée et s'efface
   à l'arrivée du contact. visibility:hidden quand elle est retirée :
   son bouton ne prend alors jamais le focus clavier.
   ==================================================================== */
.barre-pouce{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:40;
  padding:12px 12px calc(12px + env(safe-area-inset-bottom));
  background:rgba(255,248,241,.94);
  border-top:1px solid var(--filet);
  opacity:0;
  transform:translateY(16px);
  visibility:hidden;
  transition:opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.barre-pouce.est-visible{
  opacity:1;
  transform:none;
  visibility:visible;
  transition:opacity .2s ease, transform .2s ease, visibility 0s;
}
.barre-pouce .bouton{width:100%;}
@media (min-width:960px){.barre-pouce{display:none;}}

/* ====================================================================
   PAGES SECONDAIRES (fonctions.html et les trois pages légales, lot V2)
   Même bandeau et même pied que l'accueil. Le lien « Retour à
   l'accueil » est un .bandeau__lien au bureau, et ce lien-ci, sous le
   h1, au téléphone.
   ==================================================================== */
.retour-mobile{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  margin-top:6px;
  font-size:15px;
  font-weight:500;
  color:var(--gris);
  text-decoration:none;
}
.retour-mobile svg{width:16px; height:16px; flex:0 0 auto;}
.retour-mobile:hover{color:var(--encre); text-decoration:underline; text-underline-offset:4px;}
@media (min-width:960px){.retour-mobile{display:none;}}
/* Sans barre au pouce (elle ne vit que sur l'accueil), le pied n'a pas
   à lui réserver 112 px. */
body:not(:has(.barre-pouce)) .pied{padding-bottom:calc(40px + env(safe-area-inset-bottom));}
/* Le bandeau des pages secondaires porte un lien de plus (« Retour à
   l'accueil ») : mesuré à 960 px, il passait à 76 px de haut, un
   libellé coupé. Entre 960 et 1099 px, ses liens se resserrent ; celui
   de l'accueil n'est pas touché. */
@media (min-width:960px) and (max-width:1099px){
  .bandeau__nav:has(.bandeau__lien[href="./"]) .bandeau__lien{padding:0 8px;}
}

/* ====================================================================
   PAGE DES FONCTIONS (fonctions.html, lot V2) : une liste éditoriale.
   Chaque famille : le titre à gauche (collant au bureau, comme la FAQ
   de l'accueil), ses fonctions à droite, une fonction par ligne sous un
   filet, jamais en carte.
   ==================================================================== */
/* Les couleurs des pastilles de l'app, pour l'exergue « Vert ou rouge »
   seulement : elles montrent le produit, pas une action (DESIGN.md,
   « La page des fonctions »). */
:root{
  --app-ok:#0d9488;
  --app-danger:#dc2626;
}
/* La barre du sommaire colle sous le bandeau : les ancres et les titres
   collants se posent sous les deux. Le script remesure sa hauteur (elle
   passerait sur deux rangs si une police de secours élargissait les
   pastilles). */
:root:has(.sommaire){--sommaire-h:65px;}
html:has(.sommaire){scroll-padding-top:calc(var(--entete-h) + var(--sommaire-h));}

.fonctions-tete{padding:clamp(24px,5vw,72px) 0 clamp(28px,4vw,48px);}
.fonctions-tete h1{max-width:13ch;}
.fonctions-tete__soustitre{
  margin-top:clamp(14px,2vw,28px);
  font-size:clamp(19px,1.9vw,23px);
  line-height:1.42;
  color:var(--gris);
  max-width:40ch;
  text-wrap:pretty;
}
.fonctions-tete__soustitre strong{color:var(--encre); font-weight:650;}

/* Le sommaire. Au téléphone : une barre de pastilles qui défile en x,
   chaque pastille se cale à gauche, sans barre de défilement, avec un
   fondu au bord droit qui dit qu'il y a la suite ; de même au bureau
   tant que les sept pastilles ne tiennent pas sur une rangée, qui ne
   passe à la ligne qu'au-delà. La famille courante est marquée par le
   script (aria-current) ; sans lui, la barre reste un sommaire juste. */
.sommaire{
  position:sticky;
  top:var(--entete-h);
  z-index:30;
  background:var(--creme);
  border-bottom:1px solid var(--filet);
}
.sommaire__liste{
  display:flex;
  gap:8px;
  padding:10px calc(var(--gouttiere) + 40px) 10px var(--gouttiere);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:var(--gouttiere);
  scrollbar-width:none;
  -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 48px), transparent);
  mask-image:linear-gradient(to right, #000 calc(100% - 48px), transparent);
}
.sommaire__liste::-webkit-scrollbar{display:none;}
.sommaire__liste > li{flex:0 0 auto;}
.sommaire__lien{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 16px;
  font-size:15px;
  font-weight:600;
  color:var(--encre);
  text-decoration:none;
  white-space:nowrap;
  background:var(--carte);
  border:1.5px solid var(--filet);
  border-radius:999px;
  scroll-snap-align:start;
  transition:background-color .2s ease, border-color .2s ease, color .2s ease;
}
.sommaire__lien:hover{border-color:var(--gris-clair);}
.sommaire__lien[aria-current="true"]{color:var(--creme); background:var(--encre); border-color:var(--encre);}
/* Les sept pastilles demandent 1 237 px (mesuré) : la zone de contenu ne
   les loge sur une rangée qu'à partir de 1 405 px d'écran. En dessous, la
   barre défilante du téléphone reste en place (sur deux rangées, elle
   prenait 121 px de hauteur, 194 px avec le bandeau). */
@media (min-width:1408px){
  .sommaire__liste{
    flex-wrap:wrap;
    width:min(1240px, calc(100% - 2 * var(--gouttiere)));
    margin-inline:auto;
    padding:12px 0;
    overflow-x:visible;
    -webkit-mask-image:none;
    mask-image:none;
  }
}

/* Une famille : titre et intro, puis la liste. */
.famille__tete{margin-bottom:var(--sous-titre);}
.famille__tete .intro{margin-top:16px;}
@media (min-width:960px){
  .famille__tete{
    grid-column:1 / span 4;
    margin-bottom:0;
    padding-right:24px;
    position:sticky;
    top:calc(var(--entete-h) + var(--sommaire-h) + 24px);
  }
  .famille__liste{grid-column:5 / span 8;}
}

/* Une fonction = une ligne : l'exergue, puis le titre et le texte ; au
   bureau, l'exergue à gauche (5 parts), le titre et le texte à droite
   (7 parts). Une ligne sans exergue garde son texte dans la colonne de
   droite. */
.fonction{
  display:grid;
  gap:14px;
  padding:30px 0;
  border-top:1px solid var(--filet);
}
.famille__liste > .fonction:first-child{padding-top:0; border-top:0;}
.fonction__corps h3{
  font-size:19px;
  line-height:1.3;
  font-weight:650;
  letter-spacing:-0.01em;
}
.fonction__corps p{
  margin-top:8px;
  max-width:60ch;
  font-size:17px;
  line-height:1.6;
  color:var(--gris);
  text-wrap:pretty;
}
.fonction__corps .fonction__note{font-size:15px;}
@media (min-width:960px){
  .fonction{grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:32px; align-items:start;}
  .fonction__exergue{grid-column:1;}
  .fonction__corps{grid-column:2;}
}

/* Exergue « phrase dite » : la pastille micro, puis la phrase. Sur la
   crème de la page, la pastille est blanche au filet (une pastille
   crème y disparaîtrait). */
.phrase{display:flex; align-items:flex-start; gap:12px;}
/* contraste-ok : l'icône micro, décorative (aria-hidden), aucun texte ; 3,17:1 tient de toute façon le 3:1 d'un élément graphique. */
.phrase__micro{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:32px; height:32px;
  border-radius:999px;
  background:var(--carte);
  border:1px solid var(--filet);
  color:var(--flamme);
}
.fonction__phrase{
  font-size:clamp(20px,2.2vw,24px);
  line-height:1.3;
  font-weight:600;
  letter-spacing:-0.01em;
  color:var(--encre);
  text-wrap:balance;
}

/* Exergues « Bouton », « À l'écran », « Lien » : une étiquette plate,
   sans bord, qui ne ressemble ni à un champ ni à un bouton. Un <span> :
   rien n'est cliquable, on montre un libellé de l'app. */
.etiquette{
  display:inline-flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:2px 8px;
  max-width:100%;
  padding:6px 10px;
  font-size:14px;
  font-weight:600;
  line-height:1.4;
  color:var(--encre);
  background:var(--carte);
  border-radius:6px;
}
.etiquette__type{font-weight:500; color:var(--gris);}

/* Exergue « Vert ou rouge » : les formes de l'app (décor, aria-hidden),
   les mots portent le sens. La troisième, vide, dit « pas encore
   compté ». */
.feux{display:flex; flex-wrap:wrap; gap:10px 20px; padding-top:4px;}
.feu{display:inline-flex; align-items:center; gap:8px; font-size:16px; font-weight:600; color:var(--encre);}
.feu__forme{display:inline-block; flex:0 0 auto; width:12px; height:12px;}
.feu__forme--rond{border-radius:999px; background:var(--app-ok);}
.feu__forme--carre{border-radius:2px; background:var(--app-danger);}
.feu__forme--vide{border-radius:999px; border:1.5px solid var(--gris-clair);}

/* L'écran du matin : la ligne large, texte puis le téléphone recadré de
   l'accueil ; au bureau, le téléphone à droite du texte. */
.fonction__figure{display:flex; justify-content:center;}
.fonction__figure .telephone{max-width:260px;}
@media (min-width:960px){
  .fonction--large{grid-template-columns:minmax(0,1fr) minmax(0,clamp(200px,19vw,256px)); column-gap:40px;}
  .fonction--large .fonction__corps{grid-column:1;}
  .fonction--large .fonction__figure{grid-column:2; justify-content:flex-end;}
}

/* Les limites : la carte en encre et ses cases vides (accueil), avec un
   titre et une explication par case. Fond redéclaré pour le balayage
   des contrastes, comme sur l'accueil. */
.refus__titre{font-size:19px; line-height:1.35; font-weight:650; color:var(--creme); background:var(--encre);}
.refus__texte{margin-top:8px; font-size:17px; line-height:1.55; color:var(--creme-attenue); background:var(--encre); text-wrap:pretty;}
.refus__conclusion a{
  white-space:nowrap;
  padding-block:11px;
  color:var(--creme);
  background:var(--encre);
  text-decoration:underline;
  text-decoration-thickness:1.5px;
  text-underline-offset:3px;
}
@media (min-width:960px){
  .refus__case:has(.refus__titre){justify-content:flex-start; gap:22px;}
}

/* ====================================================================
   PAGES LÉGALES (mentions-legales.html, confidentialite.html,
   vos-donnees.html, lot V2) : le mode lecture. Une colonne de 68
   caractères au plus ; au bureau, le sommaire des h2 collant dans la
   marge gauche (colonnes 1 à 3), le texte en 5 à 11. Les h2 gardent la
   voix de ceux de l'accueil (650, approche serrée, opsz), à une taille
   de lecture.
   ==================================================================== */
.lecture{padding-top:clamp(24px,5vw,72px);}
.lecture__sommaire{display:none;}
/* 34em et non 68ch : le « 0 » de DM Sans, qui définit le ch, est bien
   plus large que la lettre moyenne ; 68ch laissait 83 caractères par
   ligne à 1440. 34em (578 px) en donne environ 66. */
.lecture__texte{max-width:34em;}
.lecture__texte h1{font-size:clamp(46px,6vw,84px);}
.lecture__intro{margin-top:20px; font-size:19px; line-height:1.5; color:var(--gris);}
/* scroll-margin-top s'ajoute exprès au scroll-padding de html : un
   saut par le sommaire pose le titre 24 px sous le bandeau, pas collé. */
.lecture__texte h2{
  scroll-margin-top:24px;
  margin:clamp(48px,6vw,64px) 0 16px;
  font-size:clamp(26px,2.6vw,34px);
  line-height:1.15;
}
.lecture__texte p, .lecture__texte li{font-size:17px; line-height:1.65; color:var(--encre);}
.lecture__texte p + p{margin-top:16px;}
.lecture__texte strong{font-weight:650;}
.lecture__texte ul, .lecture__texte ol{margin:16px 0; padding-left:1.25em;}
.lecture__texte ul{list-style:disc;}
.lecture__texte ol{list-style:decimal;}
.lecture__texte li + li{margin-top:10px;}
.lecture__texte li::marker{color:var(--gris);}
/* Liens soulignés ; 12 px de rembourrage invisibles portent la zone de
   toucher à 44 px sans bouger la ligne (11 px suffisaient en 17 px,
   pas en 16 px dans le tableau). */
.lecture__texte :is(p, li, td) a{
  padding-block:12px;
  color:var(--encre);
  text-decoration:underline;
  text-decoration-thickness:1.5px;
  text-underline-offset:3px;
  text-decoration-color:var(--gris-clair);
}
.lecture__texte :is(p, li, td) a:hover{text-decoration-color:var(--encre);}
/* Le tableau des prestataires : il défile dans son propre cadre au
   téléphone, la page, elle, ne bouge pas en largeur. */
.legal-table-wrap{
  margin-top:16px;
  overflow-x:auto;
  background:var(--carte);
  border:1px solid var(--filet);
  border-radius:12px;
}
.legal-table{width:100%; min-width:34em; border-collapse:collapse; font-size:16px; line-height:1.5;}
.legal-table th, .legal-table td{padding:12px 16px; text-align:left; vertical-align:top; color:var(--encre); background:var(--carte); border-bottom:1px solid var(--filet);}
.legal-table tr:last-child td{border-bottom:0;}
.legal-table th{font-size:13px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--gris); white-space:nowrap;}
/* Au téléphone (lot V3) : le défilement cachait la colonne « Où » sans
   signe qu'elle existait. Chaque ligne devient un bloc sous un filet, et
   chaque cellule porte devant elle l'intitulé de sa colonne, tiré de son
   attribut data-titre (écrit dans le HTML, copie exacte de l'en-tête).
   L'en-tête, devenu redondant, est masqué. */
@media (max-width:639px){
  .legal-table{min-width:0;}
  .legal-table thead{display:none;}
  .legal-table, .legal-table tbody, .legal-table tr, .legal-table td{display:block;}
  .legal-table tr{padding:14px 0; border-bottom:1px solid var(--filet);}
  .legal-table tr:last-child{border-bottom:0;}
  .legal-table td{padding:0 16px; border-bottom:0;}
  .legal-table td + td{margin-top:10px;}
  .legal-table td:first-child{font-weight:600;}
  .legal-table td::before{
    content:attr(data-titre);
    display:block;
    font-size:13px;
    font-weight:600;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--gris);
  }
}

.lecture__sommaire a{
  display:flex;
  align-items:center;
  min-height:44px;
  padding:6px 0 6px 14px;
  font-size:15px;
  line-height:1.35;
  color:var(--gris);
  text-decoration:none;
  border-left:1px solid var(--filet);
}
.lecture__sommaire a:hover{color:var(--encre);}
.lecture__sommaire a[aria-current="true"]{color:var(--encre); font-weight:600; border-left-color:var(--encre);}
@media (min-width:960px){
  .lecture{
    display:grid;
    grid-template-columns:repeat(12,minmax(0,1fr));
    column-gap:24px;
    align-items:start;
  }
  .lecture__sommaire{
    display:block;
    grid-column:1 / span 3;
    grid-row:1;
    position:sticky;
    top:calc(var(--entete-h) + 32px);
  }
  .lecture__texte{grid-column:5 / span 7; grid-row:1;}
  .lecture__texte p, .lecture__texte li{font-size:18px;}
}

/* ====================================================================
   PAGE « CE QUI AVANCE » (ce-qui-avance.html, 05/10/2026). Elle reprend
   la liste éditoriale de Fonctions (.famille, .fonction) ; seul ce qui
   n'existait pas est ajouté ici.
   - .fonction--ligne : une ligne sans exergue. Sans cette règle, le texte
     d'une ligne sans exergue se range dans la colonne de droite (7 parts)
     de la grille de Fonctions et laisse 5 parts vides à sa gauche ; ici il
     prend toute la largeur de la liste.
   - .fonctions-tete .legende : l'espace sous le chapeau pour la ligne
     « Mise à jour le … ».
   ==================================================================== */
@media (min-width:960px){
  .fonction--ligne{grid-template-columns:minmax(0,1fr);}
  .fonction--ligne .fonction__corps{grid-column:1;}
}
.fonctions-tete .legende{margin-top:16px;}

/* ====================================================================
   MOUVEMENT RÉDUIT : aucun roulement, aucune transition de la barre,
   défilement instantané.
   ==================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    transition-delay:0s !important;
  }
}