/* ============================================================
   zufo.ski V2, feuille de style unique (pas de chaîne de build)

   COULEURS : direction « Indigo » (v2-1), choisie le 28/09/2026
   par Hervé, Marie-Victoire et un avis extérieur, parmi quatre
   directions issues de six. Jetons d'origine dans le Drive :
   refonte/design/essais-couleurs/, fichier tokens-zufo.css.

   TYPOGRAPHIE : Plus Jakarta Sans, choisie le 30/09/2026 par
   Hervé après comparaison de six versions des vraies pages
   (Drive : refonte/design/essais-typographie/).

   ⛔ Aucune ressource externe (ni police, ni CDN), délibéré.
   La police est donc HÉBERGÉE CHEZ NOUS, dans assets/polices/,
   avec son fichier de licence. C'est une police VARIABLE : un
   seul fichier par sous-ensemble porte toutes les graisses.
============================================================ */

/* ---------- La police, servie par nous ---------- */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(../polices/plus-jakarta-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(../polices/plus-jakarta-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+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Couleurs, direction « Indigo » du 28/09/2026 */
  --encre: #121b45;          /* texte courant, le bleu nuit d'Indigo */
  --encre-douce: #414a70;    /* texte secondaire */
  --fond: #ffffff;           /* le blanc des cartes, inchangé */
  --fond-page: #f3f5fa;      /* le corps de page, un blanc bleuté */
  --fond-teinte: #e6eaf7;    /* sections teintées, la pervenche claire */
  --accent: #1f3697;         /* le bleu du logo à peine éclairci : liens, boutons */
  --accent-fort: #121b45;    /* survol, le bleu nuit */
  --vif: #d4264a;            /* le rouge tempéré, un seul par écran */
  --filet: #d9dff0;          /* bordures discrètes */

  /* Jetons venus de la direction « Indigo », employés par les morceaux du design.
     Les quatre premiers ne sont que d'autres noms pour des couleurs déjà définies
     ci-dessus : on les rattache plutôt que de les recopier, pour qu'il n'y ait
     jamais deux sources de vérité pour une même couleur.
     ⛔ --largeur-page des jetons d'origine vaut 1280px et N'EST PAS reprise :
     la nôtre vaut 72rem, et le débord des schémas en dépend. */
  --blanc: var(--fond);
  --bleu-profond: var(--accent);
  --glace-claire: var(--fond-teinte);
  --lisere: var(--filet);
  --encre-pale: #535c80;     /* le pied de page d'Indigo */
  --surface-bandeau: var(--bleu-profond);
  --surface-carte: var(--blanc);
  --degrade-accent: linear-gradient(135deg, #22399e, #5b3aa6, #9e2a5a);

  /* Tailles et formes des morceaux. Volontairement en pixels, comme le design
     les a définies : ces valeurs servent aussi d'unité de calcul aux espacements
     internes des morceaux, et doivent donc rester stables. */
  --texte-chapo: 19px;
  --texte-courant: 16px;
  --texte-nav: 14px;
  --texte-pied: 13px;
  --rayon-pilule: 999px;
  --rayon-bloc: 32px;
  --rayon-carte: 24px;
  --gouttiere-page: clamp(16px, 3.12vw, 40px);
  --manifeste-taille: clamp(19px, 2.1vw, 28px);
  /* ⭐ LE RYTHME VERTICAL DE LA PAGE (05/10/2026). Ces cinq mesures sont relevées sur les trois
     maquettes de Marie-Victoire du 02/10, où elles ne varient pas d'une page à l'autre. Elles
     remplacent l'ancien jeton unique (36 à 80 px en haut et en bas de chaque section), qui
     donnait 144 à 184 px entre deux sections à 1440 px, contre 115 sur ses maquettes : la
     remarque W.5 du document du 30/09, « trop élevé ? ». Les règles qui les emploient sont
     réunies plus bas, sous « Le rythme vertical ». */
  --rythme: clamp(64px, 8vw, 128px);        /* entre deux blocs de page */
  --rythme-serre: clamp(40px, 5vw, 64px);   /* entre deux articles d'un même texte, autour d'une ligne brève */
  --rythme-fin: clamp(48px, 6vw, 80px);     /* sous le dernier bloc, avant le pied de page */
  --bande-y: clamp(56px, 7vw, 104px);       /* la marge intérieure d'une bande, en haut et en bas */
  --ecart-blocs: clamp(12px, 2vw, 24px);    /* entre deux blocs à fond qui se tiennent */
  /* ⭐ LE GRAND TITRE D'UNE TÊTE DE PAGE A UNE SEULE TAILLE (05/10/2026). Consigne d'Hervé :
     « Aligne les tailles sur la taille actuelle de ACCUEIL et TECHNOLOGIE ». Mesuré ce jour-là,
     c'était, avec le titre du bandeau final d'Essayer ASCENT, la seule taille de texte qui
     changeait d'une page à l'autre : 86 px sur l'accueil, 72 sur Technologie et Essayer ASCENT,
     101 sur ASCENT, L'aventure, la FAQ, Professionnels et Presse. Les autres tailles (titres de
     section, texte courant, accroches) étaient déjà les mêmes partout, et ne changent pas.
     La taille de l'accueil devient celle de toutes les têtes ; un titre long garde celle
     de Technologie (.titre-long, 72 px), une tête compacte la sienne (.compacte, 60 px, pages
     utilitaires). ⚠ Plus petit que les maquettes de Marie-Victoire, qui montaient à 101 px sur
     ASCENT : c'est voulu, ne pas « réaligner » sur elles sans redemander. */
  --titre-tete: clamp(44px, 6vw, 88px);
  --appel-pad: clamp(28px, 4.5vw, 64px);
  --glace: #bfcbef;          /* la pervenche des aplats */
  --sur-sombre: #c3cbed;     /* le texte pose sur le bloc sombre */
  --rouge-appuye: #b81f40;   /* le rouge au survol */
  --surface-bloc-glace: linear-gradient(135deg, var(--glace-claire), var(--glace));
  --surface-bloc-sombre: linear-gradient(160deg, var(--bleu-profond), var(--encre));
  --surface-bouton: var(--vif);
  --surface-bouton-survol: var(--rouge-appuye);
  /* Le fond des blocs produit (page ASCENT, maquette de Marie-Victoire du 02/10/2026) : un halo
     de bleu clair derrière le produit, tiré des jetons existants plutôt que de nouvelles couleurs. */
  --surface-bloc-produit: radial-gradient(ellipse 55% 70% at 70% 50%,
    color-mix(in srgb, var(--bleu-profond) 78%, var(--glace)) 0%, var(--bleu-profond) 45%, var(--encre) 100%);

  /* Typographie — pile système en attendant la charte */
  --police: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI",
             Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Gabarit */
  --largeur-texte: 46rem;    /* largeur de colonne de lecture, gouttieres comprises */
  /* ⭐ La colonne de texte REELLE, une fois les gouttieres deduites. Une section
     ordinaire inclut ses gouttieres dans sa largeur ; une bande teintee, qui va
     d un bord a l autre, ne les inclut pas. Sans ce jeton, le texte d une bande
     et celui d une section ordinaire ne commencent pas au meme endroit : 40 px
     d ecart, mesures le 30/09 sur la page Technologie. */
  --colonne-texte: calc(var(--largeur-texte) - 2 * var(--gouttiere-page));
  --largeur-page: 72rem;     /* largeur maxi des grilles et bandeaux */
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--police);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--encre);
  background: var(--fond-page);
}

/* Échelle typographique de la direction « Indigo », resserrée pour des pages de
   contenu : la maquette d'accueil pousse les titres très haut, ce qui convient à
   une page d'entrée et pas à une FAQ de vingt-trois questions. */
h1, h2, h3 { margin: 0 0 0.55em; color: var(--encre); }
h1 {
  font-size: clamp(30px, 4.6vw, 52px);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -.03em;
}
h2 {
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -.02em;
  margin-top: 0;
}
h3 {
  font-size: var(--texte-chapo);
  line-height: 1.25;
  font-weight: 700;
}

p { margin: 0 0 1em; }

a { color: var(--accent); }
a:hover { color: var(--accent-fort); }

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


/* ---------- Enveloppe commune, version « Indigo » du 28/09/2026 ----------
   Bandeau d'annonce, en-tête à navigation en pastilles, pied de page.
   Reprise de la maquette d'accueil validée. Le balisage des pages n'a pas
   changé : seules ces règles font la forme. */

.bandeau-annonce {
  background: var(--surface-bandeau);
  color: var(--blanc);
  text-align: center;
  padding: 11px var(--gouttiere-page);
  font-size: var(--texte-nav);
  font-weight: 600;
  margin: 0;
}
.bandeau-annonce a { color: inherit; text-decoration: none; }
.bandeau-annonce a:hover { text-decoration: underline; }

.entete {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 28px;
  padding: 20px var(--gouttiere-page);
  max-width: none;
  border-bottom: 0;
}

.entete-logo { display: flex; line-height: 0; }
.entete-logo img { height: 36px; width: auto; display: block; }

.entete-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 auto;
  background: var(--blanc);
  border-radius: var(--rayon-pilule);
  padding: 6px;
  box-shadow: 0 1px 0 var(--lisere);
}

.entete-nav a {
  padding: 9px 16px;
  border-radius: var(--rayon-pilule);
  color: var(--encre);
  text-decoration: none;
  font-size: var(--texte-nav);
  font-weight: 600;
  white-space: nowrap;
}
.entete-nav a:hover { background: var(--glace-claire); color: var(--encre); }
.entete-nav a[aria-current="page"] { background: var(--encre); color: var(--blanc); }

.entete-langue {
  font-size: var(--texte-nav);
  font-weight: 600;
  color: var(--encre);
  text-decoration: none;
  border: 0;
  padding: 0;
  border-radius: 0;
}
.entete-langue:hover { color: var(--bleu-profond); }

/* Le pied de page (22/10/2026, demande d'Hervé) : le logo à gauche, et deux lignes centrées sur la page, les liens et les
   réseaux, puis la mention de la marque. La troisième colonne, vide, a la même largeur minimale que celle du logo : c'est
   elle qui garde les deux lignes au milieu de la page. */
.pied {
  display: grid;
  grid-template-columns: minmax(56px, 1fr) auto minmax(56px, 1fr);
  align-items: center;
  gap: 14px 28px;
  padding: var(--gouttiere-page);
  max-width: none;
  border-top: 0;
  font-size: var(--texte-pied);
  color: var(--encre-pale);
}
.pied-logo { justify-self: start; }
.pied-logo img { height: 24px; width: auto; display: block; }
.pied-centre { display: grid; justify-items: center; gap: 10px; text-align: center; }
.pied-liens { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 28px; }
.pied-marque { margin: 0; }
.pied-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.pied-nav a { color: inherit; text-decoration: none; }
.pied-nav a:hover { color: var(--bleu-profond); text-decoration: underline; }

@media (max-width: 860px) {
  .pied { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .pied-logo { justify-self: center; }
}

/* Le menu du téléphone (demande d'Hervé du 02/11/2026, registre I-429) : à 390 px de large, les pastilles et la langue
   occupaient 272 px de haut, la moitié de l'écran avec les deux bandeaux. Dès que le logo, les six liens et la langue ne
   tiennent plus sur une ligne (mesuré jusqu'à 908 px en français avec une barre de défilement, d'où 920 par marge),
   l'en-tête ne garde que le logo, la langue et un bouton à trois traits, qui ouvre la liste par-dessus la page. La langue
   reste visible : c'est là qu'un visiteur anglophone la cherche. Le bouton est tenu par assets/js/menu.js ; au-dessus de
   920 px, rien ne change. */
.entete-menu { display: none; }

@media (max-width: 920px) {
  .entete { position: relative; flex-wrap: nowrap; gap: 6px; padding-block: 12px; }
  .entete-logo { margin-right: auto; }
  .entete-langue { order: 1; padding: 10px 8px; }
  .entete-menu {
    order: 2;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: var(--rayon-pilule);
    background: var(--blanc);
    box-shadow: 0 1px 0 var(--lisere);
    color: var(--encre);
    cursor: pointer;
  }
  .entete-menu:focus-visible { outline: 2px solid var(--bleu-profond); outline-offset: 2px; }
  @media (hover: hover) {
    .entete-menu:hover { background: var(--glace-claire); }
  }
  .entete-menu svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  .entete-menu .icone-fermer,
  .entete-menu[aria-expanded="true"] .icone-menu { display: none; }
  .entete-menu[aria-expanded="true"] .icone-fermer { display: inline; }
  .entete-nav {
    display: none;
    position: absolute;
    z-index: 20;
    top: 100%;
    right: var(--gouttiere-page);
    width: min(360px, 100% - 2 * var(--gouttiere-page));
    flex-flow: column nowrap;
    gap: 2px;
    margin: 0;
    padding: 8px;
    border-radius: var(--rayon-carte);
    box-shadow: 0 1px 0 var(--lisere), 0 24px 48px -24px color-mix(in srgb, var(--encre) 55%, transparent);
  }
  .entete-menu[aria-expanded="true"] + .entete-nav { display: flex; }
  .entete-nav a { padding: 12px 16px; font-size: var(--texte-courant); }
  @media (prefers-reduced-motion: no-preference) {
    .entete-menu[aria-expanded="true"] + .entete-nav { animation: apparition-image .15s ease-out; }
  }
}

/* Sans JavaScript, le bouton ne ferait rien : on garde alors les liens visibles, sous le logo. */
@media (max-width: 920px) and (scripting: none) {
  .entete { flex-wrap: wrap; }
  .entete-menu { display: none; }
  .entete-nav { display: flex; position: static; order: 3; width: 100%; flex-flow: row wrap; justify-content: center; }
}

/* ---------- La pastille ---------- */
/* Le bloc « hero » centré des premières versions a disparu le 02/10/2026 : toutes les
   pages ont désormais une tête sombre (.mise-en-avant ou .tete-photo, plus bas). */

/* La pastille qui nomme la technologie, reprise de la maquette d'accueil. */
.pastille {
  display: inline-block;
  background: var(--glace);
  color: var(--bleu-profond);
  font-size: var(--texte-nav);
  font-weight: 700;
  padding: 8px 14px;
  border-radius: var(--rayon-pilule);
  margin-bottom: 1.2rem;
}

/* ---------- Bloc section ---------- */

.section {
  max-width: var(--largeur-texte);
  margin: 0 auto;
  padding: var(--rythme) var(--gouttiere-page);
}

/* ---------- Le rythme vertical ---------- */
/* ⭐ UNE SEULE MESURE SÉPARE DEUX BLOCS DE PAGE, QUELS QU'ILS SOIENT (05/10/2026). C'est la
   règle des maquettes de Marie-Victoire : les sections sans fond portent le rythme, en haut
   et en bas ; un bloc à fond (tête, bande, bandeau d'appel, bloc des éléments) ne porte rien.
   Mesuré juste avant, à 1440 px : 74 px sous la tête, 98 après une bande, 116 avant, et de
   144 à 184 entre deux sections. Désormais 115 partout (64 sur téléphone) et 127 sous la tête,
   les valeurs de ses maquettes. Ces sélecteurs sont assez précis pour ne pas dépendre de leur
   place dans la feuille. */

/* Deux sections sans fond qui se suivent ne comptent le rythme qu'une fois. */
.section:not(.bande, .section-teintee) + .section:not(.bande, .section-teintee) { padding-top: 0; }
/* Le premier et le dernier élément d'une section n'ajoutent pas leur marge à la sienne : sans
   cela, la marge du premier traverse le haut d'une section sans marge intérieure et s'ajoute
   au rythme (16 px de trop au-dessus d'une carte en ligne, mesurés sur L'aventure). */
main > .section > :first-child { margin-top: 0; }
main > .section > :last-child { margin-bottom: 0; }
/* Même chose pour le dernier paragraphe d'une colonne de texte, dans les blocs à deux colonnes. */
.deux-colonnes > * > :last-child, .deux-temps-texte > :last-child { margin-bottom: 0; }
/* Deux blocs à fond qui se suivent sont séparés par le rythme, eux aussi... */
:is(.bande, .section-teintee, .elements, .bandeau-cta, .tete-photo, main > .mise-en-avant)
  + :is(.bande, .elements, .bandeau-cta) { margin-top: var(--rythme); }
/* ...sauf une bande posée sous la tête ou sous une autre bande : ces deux-là se tiennent. */
:is(.bande, .tete-photo, main > .mise-en-avant) + .bande { margin-top: var(--ecart-blocs); }
/* Les articles d'un même texte se serrent : deux sections en colonne de lecture qui se
   suivent (mentions légales, protection des données), et la ligne brève des brevets. */
.section:not(.large, .bande, .section-teintee):has(+ .section:not(.large, .bande, .section-teintee)) { padding-bottom: var(--rythme-serre); }
.section:has(> .ligne-mention) { padding-block: var(--rythme-serre); }
/* Sous le dernier bloc de la page, avant le pied. */
main > .section:not(.bande, .section-teintee):last-child { padding-bottom: var(--rythme-fin); }
main > :is(.bande, .elements, .bandeau-cta):last-child { margin-bottom: var(--rythme-fin); }

/* ⭐ LA BANDE TEINTÉE VA D'UN BORD À L'AUTRE DE L'ÉCRAN.
   C'est elle qui fait qu'une page cesse de ressembler à un document : le
   texte garde sa mesure de lecture, mais la page occupe tout l'écran, et
   l'alternance des fonds donne son rythme à la lecture.
   Demande d'Hervé et de Marie-Victoire du 30/09/2026 : « on a un site qui
   ressemble un peu trop à un fichier Word ». */
.section-teintee {
  max-width: none;
  padding-block: var(--bande-y);
  background: var(--surface-bloc-glace);
}
.section-teintee > * {
  max-width: var(--colonne-texte);
  margin-inline: auto;
}
/* ⭐ LE TEXTE GARDE SA COLONNE, SEUL LE BLOC DÉBORDE (leçon du 30/09, mesurée sur Technologie :
   quatre bords gauches sur une seule page). La bande teintée pleine largeur ne sert plus
   qu'à la page d'erreur ; les pages reprises le 02/10 emploient la bande arrondie (.bande,
   plus bas), qui tient la même règle : le texte sur sa colonne, les blocs sur la page. Les
   variantes « large » de la bande teintée, l'accroche à filet, le manifeste centré
   (.signature) et la plaque, sans emploi depuis la reprise des pages, sont retirés le 02/10. */

/* Deux bandes teintées ne se touchent jamais : elles se fondraient en une
   seule et le rythme disparaîtrait. */
.section-teintee + .section-teintee { background: var(--blanc); }

/* ---------- Appel à l'action ---------- */

.bandeau-cta {
  background: var(--surface-bloc-sombre);
  color: var(--blanc);
  text-align: center;
  border-radius: var(--rayon-bloc);
  padding: var(--appel-pad) var(--gouttiere-page);
  /* Une largeur et non un maximum (02/10/2026) : avec « max-width », le bandeau collait aux
     bords de l'écran sur téléphone, quand tous les autres blocs gardent leur gouttière. */
  width: min(var(--largeur-page), calc(100% - 2 * var(--gouttiere-page)));
  margin: 0 auto;   /* l'espace au-dessus et au-dessous : voir « Le rythme vertical » */
}
/* Le titre du bandeau final a la même taille sur toutes les pages, que le bandeau soit centré
   ou en deux colonnes (05/10/2026) : celui d'Essayer ASCENT, centré, restait à la taille d'un
   titre de section, 32 px au lieu de 46. */
.bandeau-cta h2 { color: var(--blanc); font-size: clamp(28px, 3.4vw, 46px); line-height: 1.1; letter-spacing: -.03em; }   /* 1,1 : à 1,05, le « q » touchait le « à » sur téléphone (FAQ, 22/10) */
.bandeau-cta p {
  font-size: 1.05rem;
  color: var(--sur-sombre);
  max-width: 52ch;
  margin: 0 auto 1.4rem;
}
.bandeau-cta .bouton { background: var(--surface-bouton); color: var(--blanc); }
.bandeau-cta .bouton:hover { background: var(--surface-bouton-survol); color: var(--blanc); }
/* Le lien secondaire du bandeau, en blanc : en bleu foncé sur le fond sombre, il ne se lisait
   pas (relevé le 02/10/2026 sur ASCENT et Technologie). */
.bandeau-cta .lien-lecture { color: var(--blanc); border-bottom-color: color-mix(in srgb, var(--blanc) 40%, transparent); }
.bandeau-cta .lien-lecture:hover { color: var(--blanc); border-bottom-color: var(--blanc); }

/* ---------- Boutons et liens ---------- */

.bouton {
  display: inline-block;
  text-decoration: none;
  border-radius: var(--rayon-pilule);
  padding: 15px 26px;
  font-weight: 700;
  font-size: 1rem;
  background: var(--encre);
  color: var(--blanc);
}
.bouton:hover { background: var(--bleu-profond); color: var(--blanc); }

.bouton-clair {
  background: var(--blanc);
  color: var(--encre);
  box-shadow: inset 0 0 0 1.5px var(--encre);
}
.bouton-clair:hover { background: var(--glace-claire); color: var(--encre); }

.lien-lecture {
  display: inline-block;
  font-weight: 700;
  text-decoration: none;
  color: var(--bleu-profond);
  border-bottom: 2px solid var(--lisere);
  padding-bottom: 2px;
}
.lien-lecture:hover { color: var(--encre); border-bottom-color: var(--bleu-profond); }

.lien-secondaire { font-weight: 500; }


/* ---------- Le carré des quatre dimensions ----------
   Même composant que les quatre cartes de l'accueil : les deux pages parlent
   ainsi la même langue. ⭐ Les pastilles portent ici la lettre de la dimension,
   et la marque de la dimension, posée à côté depuis le 01/10, porte le dessin
   (voir plus bas). */
.dimensions.carre { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 1.75rem 0 clamp(36px, 5vw, 80px); }

a.dimension { display: block; text-decoration: none; color: inherit; }
a.dimension:hover { box-shadow: 0 2px 4px rgba(16,28,44,.08), 0 12px 28px rgba(16,28,44,.10); }

.dimension-code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  padding: 5px 12px;
  border-radius: var(--rayon-pilule);
  background: var(--glace);
  color: var(--bleu-profond);
  font-size: var(--texte-pied);
  font-weight: 700;
  letter-spacing: .04em;
  margin-bottom: calc(var(--texte-courant) * 1.25);
}

.dimension-phrase {
  font-size: var(--texte-nav);
  line-height: 1.5;
  color: var(--encre-douce);
  margin: 0.35rem 0 0;
}

/* Le mot du type de caractéristique, réglable, liberté ou mesurable, mis en exergue dans
   chaque carte et dans chaque titre de la page Technologie (demande d'Hervé et de
   Marie-Victoire du 01/10/2026, registre I-289). Il redit en toutes lettres ce que dit
   le pictogramme de la marque, et donne à chaque carte sa direction : « le comportement
   mécanique » ne disait pas où l'on voulait en venir, « mesurable » le dit. */
.dimension-type { color: var(--bleu-profond); font-weight: 700; }

@media (max-width: 40em) {
  .dimensions.carre { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Les marques des quatre dimensions (01/10/2026, registre I-285 et I-287) ----------
   Une marque = un DESSIN qui explique les paramètres + un PICTOGRAMME qui dit la
   caractéristique (réglage, mesure, liberté). Les deux vivent dans l'image, tracée
   aux couleurs du site (encre, rouge vif, blanc).
   La marque se pose à gauche du texte quand la carte est assez large, et au-dessus
   quand elle ne l'est pas : c'est la largeur de la CARTE qui décide du retour à la
   ligne, pas celle de la fenêtre, donc aucun point de rupture à régler.
   alt vide : la marque redit le texte de sa carte, comme les pictogrammes des valeurs.
   ⛔ Une marque déjà en ligne ne se remplace jamais sous le même nom (cache d'OVH) :
   on passe à -v2, ici et dans la page. */
.dimensions.carre.avec-marques a.dimension {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
}
.dimension-marque { flex: 0 0 11rem; width: 11rem; height: 11rem; }
.dimension-texte { flex: 1 1 11rem; min-width: 0; }

.dimensions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: calc(var(--texte-courant) * .875);
  margin: 1.5rem 0;
}
.dimension {
  background: var(--surface-carte);
  border-radius: var(--rayon-carte);
  padding: calc(var(--texte-courant) * 1.25);
}
/* Le pictogramme de type sur les cartes de l'accueil (02/10/2026, registre I-291) : le même
   que dans les marques de la page Technologie (réglage, liberté, mesure). Il redit le mot mis
   en exergue dans la carte, d'où son alt vide.
   Le chiffre reste en haut à gauche, le pictogramme se pose AU CENTRE de la carte, à la hauteur
   du chiffre (demande d'Hervé du 02/10 : « pas complètement en haut à droite »). Trois colonnes,
   la troisième vide, pour que le centre soit celui de la carte et non celui de l'espace restant.
   ⛔ Nom versionné (-v1) : le cache d'OVH garde un fichier statique sous son nom. */
.dimension-tete {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin-bottom: calc(var(--texte-courant) * 1.5);
}
.dimension-tete .dimension-num { justify-self: start; }
.dimension-picto { justify-self: center; width: 56px; height: 32px; }
.dimension-nom { font-weight: 700; font-size: var(--texte-courant); margin: 0 0 2px; }

/* Trois valeurs, trois cartes de même hauteur : un texte plus long que les
   autres ne doit pas laisser deux cartes courtes flotter à côté de lui.
   Demande d'Hervé du 30/09, page L'aventure. */
.dimensions.valeurs { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.dimensions.valeurs .dimension-nom { font-size: var(--texte-chapo); margin-bottom: 0.5rem; }
/* Le pictogramme de la valeur, redessine au trait a partir de celui du
   site V1. Il porte deja les couleurs du site : le trait est a l encre,
   le remplissage au blanc des cartes. Voir le commentaire de chaque SVG. */
.valeur-picto { display: block; width: 72px; height: 72px; margin: 0 0 1.1rem; }
.dimension-sous { font-size: var(--texte-nav); color: var(--encre-douce); margin: 0; }

.large { max-width: var(--largeur-page); }
/* ⭐ UNE SECTION LARGE ALIGNE SES BLOCS SUR LA LARGEUR DE PAGE, COMME LE RESTE (02/10/2026).
   Mesuré à 1440 px sur l'accueil : la tête en photo et le bandeau d'appel commençaient à
   137 px, le contenu des sections larges à 177 px, parce que la section comptait ses
   gouttières dans sa largeur. Trois bords au lieu de deux, l'écueil déjà relevé le 30/09
   (voir la bande teintée plus haut). La section s'élargit donc de ses deux gouttières,
   et son contenu tombe sur les 1152 px des autres blocs. Les bandes teintées gardent leur
   propre règle. */
.section.large:not(.section-teintee) { max-width: calc(var(--largeur-page) + 2 * var(--gouttiere-page)); }
/* Une section large laisse respirer ses blocs, mais pas son texte : une ligne
   de cent quarante caracteres ne se lit pas. */
.large > p, .large > h2 { max-width: 64ch; }


/* ---------- Grille de cartes ---------- */
/* Version « Indigo » du 28/09/2026. Employées depuis le 02/10 par la page ASCENT, puis
   par chaque page qui prend le même format. Deux variantes à colonnes fixes, plus bas
   dans les blocs communs : .grille.quatre et .grille.deux. */
.grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  gap: calc(var(--texte-courant) * 1);
}
.carte {
  border: 0;
  border-radius: var(--rayon-carte);
  background: var(--surface-carte);
  padding: calc(var(--texte-courant) * 1.5);
  color: var(--encre);
}
.carte > :first-child { margin-top: 0; }
.carte > :last-child { margin-bottom: 0; }
.carte h3 { font-size: var(--texte-chapo); line-height: 1.25; margin: 0 0 calc(var(--texte-courant) * .5); }
.carte p { font-size: var(--texte-courant); line-height: 1.55; color: var(--encre-douce); }

/* ---------- Les étapes : une suite qui se lit dans l'ordre (01/10/2026) ----------
   Modèle « colonnes numérotées » retenu par Hervé et Marie-Victoire sur le site de
   Roc Amadeus (document de commentaires du 30/09, remarque W.12, registre I-278) :
   un grand chiffre posé sur un filet, une colonne par étape. Leurs mots : « on se
   sent presque immergé voire aspiré (1 puis 2 puis…) dans l'expérience ».
   ⭐ Ce n'est pas le composant des quatre cartes de l'accueil, et c'est voulu : les
   cartes sont un ENSEMBLE (quatre dimensions, sans ordre), les étapes une SUITE.
   Un format par type de message (registre I-273).
   Toutes les étapes tiennent sur une ligne, quel que soit leur nombre, puis passent
   en une colonne sur petit écran : jamais de « deux plus une ».
   Le chiffre vit dans le titre, pour que les lecteurs d'écran le disent ; la liste
   est ordonnée, et role="list" la maintient quand ses puces sont retirées. */
.etapes {
  list-style: none;
  margin: 2rem 0 1.75rem;
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 2rem clamp(1.5rem, 3vw, 2.75rem);
}
.etape { margin: 0; }
.etape h3 { margin: 0 0 0.6rem; }
.etape-num {
  display: block;
  font-size: clamp(48px, 5.2vw, 72px);
  line-height: 1;
  font-weight: 300;
  letter-spacing: -.04em;
  color: var(--bleu-profond);
  padding-bottom: 1rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--bleu-profond) 30%, transparent);
}
.etape p {
  font-size: var(--texte-courant);
  line-height: 1.6;
  color: var(--encre-douce);
  margin: 0;
}
@media (max-width: 860px) {
  .etapes { grid-auto-flow: row; }
}

/* ---------- L'encadré : un cadre qui casse la monotonie (01/10/2026) ----------
   Modèle retenu le 30/09 (remarque W.8 du document de commentaires) : un cadre qui
   arrête l'œil au milieu d'une suite de paragraphes. Rouge tempéré, et un seul par
   écran (règle de --vif). ⛔ Jamais jaune : le jaune est réservé aux repères du
   chantier (.a-completer), qui disparaissent à la bascule. */
.encadre {
  background: var(--blanc);
  border: 2px solid var(--vif);
  border-radius: var(--rayon-carte);
  padding: calc(var(--texte-courant) * 1.5) calc(var(--texte-courant) * 1.75);
  margin: 1.5rem 0 0;
}
.encadre > :last-child { margin-bottom: 0; }
@media (max-width: 40em) {
  /* Sur téléphone, le cadre rend de la largeur au texte. */
  .encadre { padding: calc(var(--texte-courant) * 1.1) calc(var(--texte-courant) * 1.15); }
}

/* ---------- La liste à coches (01/10/2026) ----------
   Modèle « liste argumentaire à coches » retenu le 30/09 (remarque W.13) : chaque
   ligne commence par une coche, et la liste se parcourt d'un coup d'œil. La coche
   est dessinée en CSS : ni image, ni police d'icônes, aucune ressource externe. */
.coches {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.coches li { position: relative; padding-left: 2.5rem; }
.coches + p { margin-top: 1.25rem; }
.coches li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.05rem;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 8px;
  background: var(--glace-claire);
}
.coches li::after {
  content: "";
  position: absolute;
  left: 0.6rem;
  top: 0.32rem;
  width: 0.42rem;
  height: 0.78rem;
  border: solid var(--bleu-profond);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

/* ============================================================
   LES BLOCS COMMUNS DU SITE (nés sur la page ASCENT le 02/10/2026, registre I-294)
   D'après la maquette de Marie-Victoire : plus de contraste, de grandes surfaces bleu foncé,
   l'image du produit. Les couleurs restent les jetons Indigo (la maquette en arrondissait
   certaines), et les blocs se replient en une colonne sous 860 px.
   ⭐ Des noms de blocs, jamais des noms de pages (renommés le 02/10, quand Hervé a décidé de
   passer toutes les pages à ce format) : un bloc sert sur plusieurs pages, son nom dit ce
   qu'il est, pas où il est né. Inventaire : .surtitre, .mise-en-avant, .bouton-blanc et
   .bouton-contour, .tete-photo, .manifeste, .image-et-texte et .carte-image, .carte-ligne,
   le bandeau d'appel en deux colonnes, .deux-temps, .carte-trait, .grille.quatre et
   .grille.deux, .note-sombre, .elements (une image annotée et sa légende), .bloc-glace,
   .carac et .carte-prix (pages produit), .video (une image à nous qui devient le lecteur
   au clic).
   ⭐ L'espace entre deux blocs ne se règle jamais bloc par bloc (05/10/2026) : aucun bloc à
   fond ne porte de marge en haut ni en bas, tout vient des jetons du rythme et des règles
   réunies sous « Le rythme vertical », juste après le bloc section. Seule exception, les
   12 px sous une tête de page, repris du cadre de la maquette.
   ============================================================ */

/* Le surtitre : la petite ligne en capitales au-dessus d'un titre. Rouge par défaut. */
.surtitre {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vif);
  margin: 0 0 0.9rem;
}
.surtitre.bleu { color: var(--bleu-profond); }

/* La mise en avant : une bande bleu foncé à coins arrondis, le texte à gauche, l'image à
   droite. En tête de page, elle porte le titre de la page (ASCENT) ; en milieu de page, dans
   une section, un titre de niveau 2 et une image moins haute (l'accueil, « ASCENT : une
   seule paire »). Sur ASCENT, le seul rouge de l'écran est le bouton. */
.mise-en-avant {
  width: min(var(--largeur-page), calc(100% - 2 * var(--gouttiere-page)));
  margin: var(--ecart-blocs) auto 12px;
  border-radius: 28px;
  background: var(--surface-bloc-produit);
  color: var(--blanc);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
  padding: clamp(32px, 5vw, 72px) clamp(24px, 4vw, 64px);
}
/* Sur le fond à halo (point clair au centre), le surtitre est une pervenche éclaircie : la
   pervenche pure tombait à 4,1 sur le point le plus clair (calcul du 02/10, seuil 4,5),
   celle-ci y tient 4,9. */
.mise-en-avant .surtitre { color: color-mix(in srgb, var(--glace) 60%, var(--blanc)); }
.mise-en-avant h1 {
  color: var(--blanc);
  font-size: var(--titre-tete);
  line-height: 1.04;
  letter-spacing: -.05em;
  margin: 0 0 1rem;
}
/* La pervenche de l'accroche est éclaircie de 30 % de blanc (05/10/2026). Pure, elle tombait à
   4,1 sur le point le plus clair du halo, et sous 1200 px de large l'accroche fait moins de
   24 px : le seuil est alors de 4,5 (à 1440 px elle est assez grande pour le seuil de 3, et
   le contrôle du 02/10 ne l'avait pas relevée). Éclaircie, elle tient 4,8 partout. */
.mise-en-avant-accroche {
  font-size: clamp(21px, 2vw, 30px);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -.02em;
  color: color-mix(in srgb, var(--sur-sombre) 70%, var(--blanc));
  margin: 0 0 1.2rem;
}
/* La promesse de la tête d'ASCENT : plus grande que les accroches des autres pages, proche du titre (demande d'Hervé
   du 30/10/2026, registre I-421). La couleur reste celle de l'accroche, éclaircie pour le contraste. */
.mise-en-avant-accroche.promesse {
  font-size: clamp(27px, 3.1vw, 44px);
  line-height: 1.12;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.mise-en-avant-texte > p:not(.surtitre):not(.mise-en-avant-accroche) {
  color: color-mix(in srgb, var(--blanc) 82%, transparent);
  max-width: 50ch;
}
.mise-en-avant-texte strong { color: var(--blanc); }
.mise-en-avant .bouton { background: var(--surface-bouton); color: var(--blanc); margin-top: 0.4rem; }
.mise-en-avant .bouton:hover { background: var(--surface-bouton-survol); color: var(--blanc); }
.mise-en-avant-image img {
  width: 100%;
  height: auto;
  max-height: 640px;
  object-fit: contain;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .45));
}
.section > .mise-en-avant {
  width: auto;
  margin: 0;
  padding: clamp(28px, 4vw, 56px) clamp(24px, 4vw, 56px);
}
.mise-en-avant h2 {
  color: var(--blanc);
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.05;
  letter-spacing: -.03em;
  margin: 0 0 1rem;
}
.section > .mise-en-avant .mise-en-avant-image img { max-height: 360px; }
/* En milieu de page, l'accroche est plus petite : elle passe presque au blanc, la pervenche
   tombant à 4,1 sur le point le plus clair du fond (calcul du 02/10, seuil 4,5). */
.section > .mise-en-avant .mise-en-avant-accroche {
  font-size: clamp(18px, 1.6vw, 22px);
  color: color-mix(in srgb, var(--blanc) 92%, var(--glace));
}

/* Deux boutons pour les fonds sombres et les photos (maquette de l'accueil de Marie-Victoire) :
   le blanc pour l'action principale, le contour pour la seconde. Le rouge reste au bandeau
   d'appel du bas de page. */
.bouton.bouton-blanc,
.mise-en-avant .bouton.bouton-blanc { background: var(--blanc); color: var(--encre); }
.bouton.bouton-blanc:hover,
.mise-en-avant .bouton.bouton-blanc:hover { background: var(--glace-claire); color: var(--encre); }
.bouton.bouton-contour {
  background: transparent;
  color: var(--blanc);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--blanc) 70%, transparent);
}
.bouton.bouton-contour:hover { background: color-mix(in srgb, var(--blanc) 14%, transparent); color: var(--blanc); }

/* La tête en photo : la photo occupe tout le bloc, un voile bleu nuit tient le texte lisible
   à gauche (maquette de l'accueil de Marie-Victoire). ⚠ Un texte posé sur une photo est le
   piège noté au chapitre 8 de la carte (la version anglaise s'allonge) : le bloc grandit
   donc avec son texte, il n'a qu'une hauteur minimale, et sur téléphone le texte passe sous
   le haut de la photo, sur un voile plus sombre. */
.tete-photo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: min(var(--largeur-page), calc(100% - 2 * var(--gouttiere-page)));
  margin: var(--ecart-blocs) auto 12px;
  border-radius: 28px;
  background: var(--encre);
  color: var(--blanc);
  min-height: clamp(480px, 46vw, 660px);
  display: flex;
  align-items: center;
}
.tete-photo-fond {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}
.tete-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--encre) 88%, transparent) 0%,
    color-mix(in srgb, var(--encre) 76%, transparent) 42%,
    color-mix(in srgb, var(--encre) 40%, transparent) 62%,
    transparent 86%);
}
.tete-photo-texte { position: relative; max-width: 600px; padding: clamp(32px, 5vw, 72px) clamp(24px, 4vw, 64px); }
.tete-photo h1 {
  color: var(--blanc);
  font-size: var(--titre-tete);
  line-height: 1.04;
  letter-spacing: -.05em;
  margin: 0 0 1.2rem;
}
.tete-photo-texte > p { color: color-mix(in srgb, var(--blanc) 90%, transparent); max-width: 48ch; }
.tete-photo-boutons { display: flex; flex-wrap: wrap; gap: 12px; margin: 1.6rem 0 0; }
/* La pastille sur la photo, sur un voile bleu nuit et non blanc : sur téléphone, un voile
   blanc à 16 % la laissait à 3,2 de contraste sur le ciel (mesuré le 02/10, seuil 4,5) ;
   à l'encre 45 %, elle passe à 8,0 sur téléphone et 12,9 sur ordinateur. */
.tete-photo .pastille {
  background: color-mix(in srgb, var(--encre) 45%, transparent);
  color: var(--blanc);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blanc) 35%, transparent);
}

/* Le manifeste en grand texte, en deux couleurs : le constat à l'encre, la réponse de zUFO en
   bleu (maquette de l'accueil). */
.manifeste {
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--encre);
  margin: 0 0 1.4rem;
}
.large > p.manifeste { max-width: 29em; }
.manifeste-suite { color: var(--bleu-profond); }

/* Une image dans une carte sombre à gauche, le texte à droite (l'exosquelette à côté des quatre
   dimensions, sur l'accueil). */
.image-et-texte {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.carte-image {
  background: var(--surface-bloc-produit);
  border-radius: 28px;
  padding: clamp(20px, 2.4vw, 32px);
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: clamp(320px, 38vw, 520px);
}
.carte-image .surtitre { color: color-mix(in srgb, var(--glace) 60%, var(--blanc)); margin: 0; }
.carte-image img {
  width: min(82%, 440px);
  height: auto;
  justify-self: center;
  align-self: center;
  filter: drop-shadow(0 24px 34px rgba(0, 0, 0, .45));
}
.image-et-texte .dimensions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.image-et-texte-suite > :last-child { margin-bottom: 0; }

/* Une carte en ligne : le titre, le texte, puis l'action, côte à côte (« Essayer cet hiver »). */
.carte-ligne {
  background: var(--surface-carte);
  border-radius: var(--rayon-carte);
  padding: clamp(22px, 2.6vw, 32px) clamp(24px, 3.2vw, 44px);
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr) auto;
  gap: clamp(18px, 3vw, 48px);
  align-items: center;
  margin-top: 1rem;
}
.carte-ligne h2, .carte-ligne p { margin: 0; }
.carte-ligne .surtitre { margin-bottom: .4rem; }

/* Le bandeau d'appel en deux colonnes, le texte à gauche et les actions à droite (maquettes de
   l'accueil et d'ASCENT). Il ne s'applique qu'aux bandeaux qui portent leurs deux enveloppes :
   une page pas encore reprise garde son bandeau centré. */
.bandeau-cta:has(> .bandeau-cta-actions) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
  text-align: left;
  padding: var(--appel-pad) clamp(28px, 5vw, 72px);
}
.bandeau-cta-texte h2 { margin: 0 0 .9rem; }
.bandeau-cta .bandeau-cta-texte p { margin: 0; max-width: 52ch; }
.bandeau-cta-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
/* Une petite phrase sous le bouton (Professionnels : « Cela n'engage à rien »). */
.bandeau-cta .bandeau-cta-actions p { margin: 0; max-width: 32ch; font-size: var(--texte-nav); }
.bandeau-cta .bandeau-cta-texte p + p { margin-top: 0.8rem; }

/* La pastille et le lien de lecture sur fond sombre (têtes et mises en avant). */
.mise-en-avant .pastille {
  background: color-mix(in srgb, var(--encre) 45%, transparent);
  color: var(--blanc);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blanc) 35%, transparent);
}
.mise-en-avant .lien-lecture { color: var(--blanc); border-bottom-color: color-mix(in srgb, var(--blanc) 40%, transparent); }
.mise-en-avant .lien-lecture:hover { color: var(--blanc); border-bottom-color: var(--blanc); }
/* Un titre de page long (Technologie) : plus petit, et la colonne de texte un peu plus large. */
.mise-en-avant.titre-long { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.mise-en-avant.titre-long h1 { font-size: clamp(40px, 5vw, 72px); line-height: 1.04; letter-spacing: -.04em; }

/* Le nom de la marque garde ses minuscules dans un surtitre en capitales : « zUFO », jamais
   « ZUFO » à l'écran. */
.marque { text-transform: none; letter-spacing: .02em; }

/* zUFO⁴ écrit comme un logo dans le texte (point G2 de l'arbitrage de l'audit de Xavier, Hervé, 10/11/2026) : en gras,
   le 4 au rouge du site, comme dans le dessin de la marque (I-384). Sur les fonds bleus, le rouge éclairci de la tête
   de la page Technologie, seul lisible sur le bleu. Le balisage est posé par un script sur chaque « zUFO⁴ » visible du
   contenu des pages ; les attributs, les titres d'onglet et les descriptions n'en ont pas besoin. */
.z4 { font-weight: 700; text-transform: none; letter-spacing: .02em; white-space: nowrap; }
.z4-chiffre { color: var(--vif); }
:is(.mise-en-avant, .bande.sombre, .bandeau-cta, .tete-photo, .col-zufo, .carte-image) .z4-chiffre { color: #ff5470; }
/* Le lien de lecture posé sur la photo de tête (points A1 et A4, 10/11/2026) : blanc, comme sur les autres fonds sombres. */
.tete-photo .lien-lecture { color: var(--blanc); border-bottom-color: color-mix(in srgb, var(--blanc) 40%, transparent); }
.tete-photo .lien-lecture:hover { color: var(--blanc); border-bottom-color: var(--blanc); }
.tete-photo-boutons { align-items: center; }

/* La bande : un fond arrondi qui va presque d'un bord à l'autre de l'écran, son contenu
   aligné sur les autres blocs (maquette de Technologie de Marie-Victoire). Trois fonds :
   pâle par défaut, .sombre, .claire (blanc). Une bande .texte ne porte que du texte, en
   colonne de lecture centrée. Le contenu tombe sur les 1152 px de la page parce que la
   marge intérieure se calcule sur la largeur de l'écran, moins la marge de la bande. */
.bande {
  --bande-marge: clamp(8px, 1vw, 12px);
  max-width: none;
  margin: 0 var(--bande-marge);   /* l'espace au-dessus et au-dessous : voir « Le rythme vertical » */
  padding-block: var(--bande-y);
  border-radius: 28px;
  padding-inline: max(var(--gouttiere-page), calc((100% - var(--largeur-page)) / 2 - var(--bande-marge)));
  background: var(--surface-bloc-glace);
}
.bande > p, .bande > h2, .bande > h3 { max-width: 64ch; }
.bande.texte > * { max-width: var(--colonne-texte); margin-inline: auto; }
.bande.claire { background: var(--surface-carte); }
.bande.sombre { background: var(--surface-bloc-sombre); color: var(--blanc); }
.bande.sombre h2, .bande.sombre strong { color: var(--blanc); }
.bande.sombre p { color: color-mix(in srgb, var(--blanc) 85%, transparent); }
.bande.sombre .surtitre { color: var(--glace); }
.bande.sombre .lien-lecture { color: var(--blanc); border-bottom-color: color-mix(in srgb, var(--blanc) 40%, transparent); }
.bande.sombre .lien-lecture:hover { color: var(--blanc); border-bottom-color: var(--blanc); }

/* Le grand titre en deux tons : la première phrase à l'encre, la seconde en bleu. */
.grand-titre { font-size: clamp(30px, 3.6vw, 48px); line-height: 1.05; letter-spacing: -.03em; }
.grand-titre-suite { display: block; color: var(--bleu-profond); }

/* Le manifeste court : une phrase-choc, plus grasse, une phrase par ligne. Sur une bande
   sombre, la seconde passe en pervenche. */
.manifeste.court { font-size: clamp(26px, 2.6vw, 34px); font-weight: 800; letter-spacing: -.03em; line-height: 1.12; }
.manifeste.court .manifeste-suite { display: block; }
.bande.sombre .manifeste { color: var(--blanc); }
.bande.sombre .manifeste-suite { color: var(--glace); }

/* Le paragraphe fort : une phrase qui ouvre, un cran au-dessus du texte courant. */
.texte-fort { font-size: clamp(19px, 1.7vw, 23px); line-height: 1.42; font-weight: 500; letter-spacing: -.01em; color: var(--encre); }
.texte-fort strong { font-weight: 800; }
.en-bleu { color: var(--bleu-profond); }
.texte-fort .en-bleu, p.texte-fort.en-bleu { font-weight: 650; }

/* Dans une section large, le tableau et le schéma prennent la largeur des blocs. */
.section.large > .tableau-cadre { max-width: none; margin-inline: 0; }
.section.large > .schema { margin-inline: 0; }

/* Le tableau en relief : la colonne zUFO en bleu profond, le texte en blanc (Technologie). */
.tableau-comparatif.relief .col-zufo { background: var(--bleu-profond); color: var(--blanc); }
.tableau-comparatif.relief thead .col-zufo { background: color-mix(in srgb, var(--bleu-profond) 70%, var(--encre)); color: var(--blanc); }
.tableau-comparatif.relief tbody .col-zufo { font-weight: 700; }
.tableau-comparatif.relief tbody tr + tr > .col-zufo { border-top-color: color-mix(in srgb, var(--blanc) 18%, transparent); }
/* Les colonnes « Avant » et « Avec zUFO⁴ » de même largeur (demande d'Hervé du 23/10). La mise en page fixe prend les
   largeurs de la ligne d'en-tête, quel que soit le texte. Sur téléphone, le tableau est empilé et elles ne jouent plus. */
@media (min-width: 40.0625em) {
  .tableau-comparatif.relief { table-layout: fixed; }
  .tableau-comparatif.relief thead th:first-child { width: 22%; }
  .tableau-comparatif.relief thead th:nth-child(2),
  .tableau-comparatif.relief thead th:nth-child(3) { width: 39%; }
}

/* Une ligne de mention : l'étiquette, puis le texte, côte à côte et centrés. */
.ligne-mention { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 6px 28px; }
.ligne-mention > .surtitre { margin: 0; }
.ligne-mention > .mention-legale { margin: 0; max-width: 64ch; }

/* Deux colonnes égales, alignées en haut (Essayer ASCENT : ce qu'on attend de vous, et les
   conditions de l'essai dans une carte). */
.deux-colonnes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}
.deux-colonnes > * > :first-child { margin-top: 0; }
/* Un emplacement d'illustration dans une colonne en prend toute la hauteur (le portrait de
   L'aventure). Par le contexte, jamais par une classe ajoutée à « illu » (greps de bascule). */
.deux-colonnes > .illu { margin: 0; max-width: none; align-self: stretch; }

/* La vidéo (L'aventure, 06/10/2026, registre I-309). Une vidéo hébergée chez un tiers ne se
   charge jamais avec la page : le cadre montre une image à nous et un bouton, et le lecteur
   du tiers n'arrive qu'au clic du visiteur, qui a la mention sous les yeux. Le site reste sans
   JavaScript : le cadre est un <iframe srcdoc>, et c'est le lien qu'il contient qui remplace
   son propre contenu par le lecteur.
   ⚠ L'image et le bouton vivent DANS le cadre, où cette feuille n'entre pas : leur style est
   écrit dans la page, et les couleurs y sont recopiées en clair (--encre, --accent,
   --fond-teinte, --encre-pale). Si l'une d'elles change ici, la changer là-bas aussi.
   ⛔ Le lecteur de YouTube refuse de jouer quand la page ne dit pas d'où elle vient (son
   « erreur 153 ») : ne jamais poser « Referrer-Policy: no-referrer » ni « same-origin » sur le
   site sans retirer la vidéo ou la refaire autrement. */
.video { margin: 0; }
/* La fenêtre : l'arrondi, l'ombre et la proportion. Elle rogne ce qui dépasse du cadre, agrandi de 2 % : le lecteur
   de YouTube montre son image de couverture, qui porte de fines bandes noires en haut et en bas (trois lignes sur 720,
   un trait noir vu par Hervé le 22/10). Rogner 1 % de chaque bord les fait disparaître, à toutes les tailles. En plein
   écran, l'agrandissement est annulé (le navigateur le fait déjà, la dernière règle ci-dessous le redit). */
.video-fenetre {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--rayon-carte);
  box-shadow: 0 24px 48px -24px color-mix(in srgb, var(--encre) 55%, transparent);
}
.video-cadre {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  transform: scale(1.02);
  /* Le fond sombre ne sert que l'instant où le lecteur arrive, pour qu'on ne voie pas la page
     au travers. Il s'arrête à un pixel et demi des bords : la hauteur du cadre tombe rarement
     sur un pixel entier, et le fond dépassait alors d'une ligne sombre sous l'image (relevé le
     06/10 à 1440 px de large, signalé par Hervé). */
  background: linear-gradient(var(--encre), var(--encre)) center / calc(100% - 3px) calc(100% - 3px) no-repeat;
}
.video-cadre:fullscreen { transform: none; }
.video-mention {
  font-size: var(--texte-pied);
  line-height: 1.5;
  color: var(--encre-pale);
  margin: .9rem 0 0;
  max-width: none;
}

/* Une tête sans image (L'aventure) : une seule colonne, le halo reste à droite, vide. */
.mise-en-avant.sans-image { grid-template-columns: minmax(0, 1fr); }
.mise-en-avant.sans-image .mise-en-avant-texte { max-width: 760px; }
/* La tête compacte des pages utilitaires (mentions légales, protection des données, page
   d'erreur) : la même bande sombre, moins haute, un titre plus petit. */
.mise-en-avant.compacte { padding: clamp(28px, 4vw, 48px) clamp(24px, 4vw, 56px); }
.mise-en-avant.compacte h1 { font-size: clamp(36px, 4.4vw, 60px); line-height: 1.06; letter-spacing: -.04em; }   /* 1,06 : à 1, le « g » touchait le « l » de la ligne suivante (page d'erreur, 22/10) */

/* Dans une bande, le manifeste et les schémas gardent les mesures qu'ils ont ailleurs. Une
   bande .texte garde, elle, sa colonne de lecture pour tout, manifeste compris. */
.bande:not(.texte) > p.manifeste { max-width: 29em; }
.bande > .schema { margin-inline: 0; }
.carte-ligne + .a-completer { margin-top: 1rem; }

/* Les grands titres des têtes se répartissent en lignes égales : pas de mot seul en bas. */
.mise-en-avant h1, .mise-en-avant h2, .tete-photo h1 { text-wrap: balance; }

/* Deux temps : le texte à gauche, deux cartes à droite, un peu plus bas que le titre. */
.deux-temps {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
.deux-temps-cartes { padding-top: 2.2rem; }

/* Une carte qui ouvre sur un petit trait bleu, pour les bénéfices. */
.carte-trait::before {
  content: "";
  display: block;
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--bleu-profond);
  margin-bottom: 1rem;
}
.grille.quatre { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* 28/10/2026 : trois cartes, « Ce que ça change, concrètement » d'ASCENT (registre I-406). */
.grille.trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grille.deux { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* La note sombre : un encadré bleu foncé qui porte une phrase clé, sous une illustration. */
.note-sombre {
  background: var(--surface-bloc-sombre);
  color: var(--blanc);
  border-radius: var(--rayon-carte);
  padding: 22px 26px;
  display: grid;
  gap: 6px;
  margin-top: 1.25rem;
}
.note-sombre .surtitre { color: var(--glace); margin: 0; }
.note-sombre p { margin: 0; color: color-mix(in srgb, var(--blanc) 88%, transparent); }
.note-sombre strong { color: var(--blanc); }

/* Dans une section large, l'emplacement d'illustration prend la largeur de la section. ⛔ Par le contexte et non par une classe de plus : les greps de bascule cherchent
   exactement class="illu", et un class="illu autre-chose" leur échapperait. */
.section.large > .illu { max-width: none; margin-inline: 0; }

/* Les quatre éléments : une bande sombre, l'image numérotée à gauche, la liste à droite.
   Les repères se placent en pourcentage de l'image (--x, --y), donc suivent sa taille. */
.elements {
  width: min(var(--largeur-page), calc(100% - 2 * var(--gouttiere-page)));
  margin: 0 auto;   /* l'espace au-dessus et au-dessous : voir « Le rythme vertical » */
  border-radius: 28px;
  background: var(--surface-bloc-sombre);
  color: var(--blanc);
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  overflow: hidden;
}
.elements-image {
  background: var(--surface-bloc-produit);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  min-height: 420px;
}
.elements-cadre { position: relative; width: min(80%, 520px); }
.elements-cadre img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 24px 34px rgba(0, 0, 0, .45));
}
.repere {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--blanc);
  color: var(--encre);
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .18);
}
.elements-texte {
  padding: clamp(32px, 5vw, 72px) clamp(24px, 4vw, 56px);
  display: grid;
  gap: 22px;
  align-content: center;
}
.elements-texte h2 { color: var(--blanc); margin: 0; }
.elements-liste { list-style: none; margin: 0; padding: 0; }
.elements-liste li {
  display: flex;
  gap: 16px;
  align-items: baseline;
  padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.elements-num { font-size: 13px; font-weight: 800; color: var(--glace); min-width: 20px; }
.elements-liste p { margin: 0; font-size: 14px; color: var(--sur-sombre); }
.elements-liste .elements-nom { font-size: 18px; font-weight: 700; color: var(--blanc); margin-bottom: 2px; }
.elements-texte > p { margin: 0; font-size: 15px; color: var(--sur-sombre); }
.elements-texte strong { color: var(--blanc); }

/* Le bloc pâle à deux colonnes : la thèse à gauche, le développement à droite. */
.bloc-glace {
  background: var(--surface-bloc-glace);
  border-radius: 28px;
  padding: clamp(28px, 5vw, 64px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: clamp(28px, 5vw, 64px);
}
.bloc-glace h2 { margin: 0 0 1rem; }
.bloc-glace-suite > :last-child, .bloc-glace-tete > :last-child { margin-bottom: 0; }

/* Les caractéristiques : la carte de prix et sa note à gauche, le tableau à droite.
   Modèle « carte de prix » retenu sur Roc Amadeus le 30/09 (remarque W.3). */
.carac {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}
.carac-tete { display: grid; gap: 18px; }
.carac-tete h2, .carac-tete p { margin: 0; }
.carte-prix {
  background: var(--surface-bloc-sombre);
  color: var(--blanc);
  border-radius: var(--rayon-carte);
  padding: clamp(22px, 2.6vw, 34px);
  display: grid;
  gap: 10px;
}
.carte-prix p { margin: 0; }
.carte-prix .surtitre { color: var(--glace); }
.carte-prix-montant {
  font-size: clamp(48px, 4.6vw, 68px);
  line-height: .95;
  letter-spacing: -.045em;
  font-weight: 800;
}
/* « la paire » reste dans le montant, en plus petit : le chiffre demeure ce qui frappe, et la ligne
   ne se coupe pas en deux sur la carte (27/10/2026, registre I-399). */
.carte-prix-unite { font-size: .38em; letter-spacing: 0; font-weight: 700; white-space: nowrap; }
.carte-prix-portee { font-size: 14px; color: var(--sur-sombre); }
.carte-prix-note { font-size: 12px; line-height: 1.55; color: var(--sur-sombre); }
.carac-conception { font-size: 14px; color: var(--encre-douce); }
/* Deux classes, pour passer devant « .tableau-cadre », écrit plus bas dans la feuille : avec
   une seule, cette règle n'a jamais joué, et le tableau des caractéristiques commençait 32 px
   sous le haut de sa colonne voisine (relevé le 05/10 en mesurant le rythme). Il prend la
   largeur de sa colonne, comme tout tableau d'une section large. */
.tableau-cadre.carac-tableau { margin: 0; max-width: none; }

@media (max-width: 1100px) {
  .grille.quatre { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .carac { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .mise-en-avant, .mise-en-avant.titre-long, .deux-temps, .elements, .bloc-glace, .image-et-texte,
  .carte-ligne, .deux-colonnes, .grille.trois, .bandeau-cta:has(> .bandeau-cta-actions) { grid-template-columns: minmax(0, 1fr); }
  .mise-en-avant-image img { max-height: 420px; }
  .section > .mise-en-avant .mise-en-avant-image img { max-height: 300px; }
  .deux-temps-cartes { padding-top: 0; }
  .carte-image { min-height: 0; }
  .tete-photo { min-height: 0; align-items: flex-end; }
  .tete-photo-fond { object-position: 38% 30%; }
  .tete-photo::before {
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--encre) 15%, transparent) 0%,
      color-mix(in srgb, var(--encre) 70%, transparent) 30%,
      color-mix(in srgb, var(--encre) 88%, transparent) 55%,
      color-mix(in srgb, var(--encre) 92%, transparent) 100%);
  }
  .tete-photo-texte { padding-top: 44vw; }
}
@media (max-width: 40em) {
  .grille.quatre, .grille.deux { grid-template-columns: minmax(0, 1fr); }
  .elements-image { min-height: 0; padding: 32px 16px; }
}
@media (max-width: 30em) {
  .image-et-texte .dimensions { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- FAQ ---------- */
/* Dépliable et filtrable par thème, SANS UNE LIGNE DE JAVASCRIPT : les questions
   sont des <details>, le filtre est fait de boutons radio et de sélecteurs frères.
   Choix d'Hervé du 28/09/2026, registre I-271 : « les boutons radio suffiront
   largement, et ce sera plus joli qu'un filtre type Excel ». */

.faq > input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }

.faq-filtres { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 1.75rem; }
.faq-filtres label {
  cursor: pointer;
  padding: 9px 16px;
  border-radius: var(--rayon-pilule);
  background: var(--blanc);
  color: var(--encre);
  font-size: var(--texte-nav);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--lisere);
}
.faq-filtres label:hover { background: var(--glace-claire); }
.faq > input[type="radio"]:focus-visible ~ .faq-filtres label { outline: 2px solid var(--bleu-profond); }

.faq-liste { display: flex; flex-direction: column; gap: 10px; }

.faq-groupe {
  font-size: var(--texte-pied);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--encre-douce);
  margin: 1.5rem 0 0.1rem;
}
.faq-groupe:first-child { margin-top: 0; }

.faq-item {
  background: var(--surface-carte);
  border: 0;
  border-radius: var(--rayon-carte);
  padding: 0;
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  position: relative;
  padding: 16px 54px 16px 20px;
  font-weight: 700;
  border-radius: var(--rayon-carte);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  font-weight: 400;
  color: var(--bleu-profond);
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-item summary:hover { background: var(--glace-claire); }
.faq-item[open] summary { background: var(--glace-claire); }

.faq-reponse { padding: 14px 20px 2px; }
.faq-reponse > :last-child { margin-bottom: 16px; }

/* Un lien posé juste après une liste de questions a besoin de respirer,
   sinon il se lit comme une huitième question. */
.faq + p { margin-top: 1.6rem; }

/* Une question atteinte par un lien reste visible, même si un filtre la masque. */
.faq-item:target { display: block; }
/* Un passage d'une réponse atteint par un lien (« /faq/#pointures », depuis la page ASCENT) ne se
   colle pas au haut de l'écran. Le navigateur ouvre de lui-même la question qui le contient. */
.faq-reponse [id] { scroll-margin-top: 1.5rem; }

/* La FAQ à filtres, sur grand écran (02/10/2026, passe de format) : les thèmes en colonne à
   gauche, qui restent visibles quand on descend, et la liste à droite, à une largeur de
   lecture. Les boutons radio, cachés et sortis du flux, ne prennent aucune case de la
   grille. Une FAQ sans filtres (Essayer ASCENT) n'est pas concernée. */
@media (min-width: 1000px) {
  .faq:has(> .faq-filtres) {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: clamp(32px, 4vw, 56px);
    align-items: start;
  }
  .faq:has(> .faq-filtres) > .faq-filtres {
    flex-direction: column;
    align-items: stretch;
    position: sticky;
    top: 1.5rem;
    margin: 0;
  }
  .faq:has(> .faq-filtres) > .faq-liste { max-width: 780px; }
}

#f-projet:checked ~ .faq-liste [data-theme]:not([data-theme="projet"]) { display: none; }
#f-produit:checked ~ .faq-liste [data-theme]:not([data-theme="produit"]) { display: none; }
#f-canting:checked ~ .faq-liste [data-theme]:not([data-theme="canting"]) { display: none; }
#f-achat:checked ~ .faq-liste [data-theme]:not([data-theme="achat"]) { display: none; }
#f-essais:checked ~ .faq-liste [data-theme]:not([data-theme="essais"]) { display: none; }
#f-tout:checked ~ .faq-filtres label[for="f-tout"] { background: var(--encre); color: var(--blanc); box-shadow: none; }
#f-projet:checked ~ .faq-filtres label[for="f-projet"] { background: var(--encre); color: var(--blanc); box-shadow: none; }
#f-produit:checked ~ .faq-filtres label[for="f-produit"] { background: var(--encre); color: var(--blanc); box-shadow: none; }
#f-canting:checked ~ .faq-filtres label[for="f-canting"] { background: var(--encre); color: var(--blanc); box-shadow: none; }
#f-achat:checked ~ .faq-filtres label[for="f-achat"] { background: var(--encre); color: var(--blanc); box-shadow: none; }
#f-essais:checked ~ .faq-filtres label[for="f-essais"] { background: var(--encre); color: var(--blanc); box-shadow: none; }

/* La source d'une réponse, posée sous elle plutôt qu'en bibliographie de fin :
   avec vingt-sept questions, personne ne saurait quelle source va avec quoi. */
.source {
  font-size: var(--texte-pied);
  line-height: 1.5;
  color: var(--encre-pale);
  border-left: 2px solid var(--lisere);
  padding-left: 0.9rem;
  margin: -0.4rem 0 1.4rem;
}
.source a { color: var(--encre-pale); }
.source a:hover { color: var(--bleu-profond); }

/* ---------- Média ---------- */

.media { margin: 1.5rem 0; }
.media figcaption {
  font-size: 0.9rem;
  color: var(--encre-douce);
  margin-top: 0.4rem;
}

/* ---------- Note ---------- */

.note {
  font-size: 0.9rem;
  color: var(--encre-douce);
}

/* ---------- Placeholder (retiré à la rédaction) ---------- */

.placeholder {
  max-width: var(--largeur-texte);
  margin: 3rem auto;
  padding: 2rem 1.25rem;
  border: 1px dashed var(--filet);
  border-radius: 8px;
  text-align: center;
  color: var(--encre-douce);
}

/* ---------- Éléments de contenu (ajoutés à la rédaction, 27/08) ---------- */

.mention-legale {
  font-size: 0.88rem;
  color: var(--encre-douce);
  max-width: var(--largeur-texte);
  margin: 0 auto;
}

/* Tableau de caractéristiques, version « Indigo » du 28/09/2026.
   Trois comportements, posés par des classes sur le tableau :
     .fiche   deux colonnes, libellé puis valeur (page ASCENT)
     .empile  sur téléphone, chaque ligne devient une fiche
     .defile  sur téléphone, le tableau défile dans son cadre, première colonne
              figée. Prévu pour le futur tableau des pointures. */
.tableau-cadre {
  max-width: var(--largeur-texte);
  margin: calc(var(--texte-courant) * 2) auto;
  background: var(--blanc);
  border: 1px solid var(--lisere);
  border-radius: var(--rayon-carte);
}

.tableau-comparatif {
  display: table;
  width: 100%;
  max-width: none;
  margin: 0;
  overflow: visible;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--texte-courant);
  line-height: 1.5;
  color: var(--encre);
}

.tableau-comparatif th,
.tableau-comparatif td {
  border: 0;
  padding: calc(var(--texte-courant) * .875) calc(var(--texte-courant) * 1.25);
  text-align: left;
  vertical-align: top;
  background: transparent;
  white-space: normal;
  font-weight: 400;
}

.tableau-comparatif tbody tr + tr > * { border-top: 1px solid var(--lisere); }

/* En-têtes de colonnes */
.tableau-comparatif thead th {
  font-size: var(--texte-pied);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--encre-douce);
  border-bottom: 1px solid var(--lisere);
}

/* En-têtes de lignes */
.tableau-comparatif tbody th {
  font-weight: 700;
  color: var(--encre);
}

/* Colonne mise en avant : « Avec zUFO⁴ » */
.tableau-comparatif .col-zufo { background: var(--glace-claire); }
.tableau-comparatif thead .col-zufo { color: var(--bleu-profond); }
.tableau-comparatif tbody .col-zufo { font-weight: 600; }
.tableau-comparatif thead tr > :last-child { border-top-right-radius: calc(var(--rayon-carte) - 1px); }
.tableau-comparatif tbody tr:last-child > :last-child { border-bottom-right-radius: calc(var(--rayon-carte) - 1px); }

/* « Avant » en retrait */
.tableau-comparatif tbody td:not(.col-zufo) { color: var(--encre-douce); }
.tableau-comparatif.fiche tbody td { color: var(--encre); }

/* Fiche : libellé / valeur */
.tableau-comparatif.fiche tbody th {
  width: 32%;
  font-size: var(--texte-nav);
  font-weight: 600;
  color: var(--encre-douce);
  padding-top: calc(var(--texte-courant) * .95);
}

/* ---------- Téléphone ---------- */
@media (max-width: 40em) {

  /* Empilé : chaque ligne devient une fiche */
  .tableau-comparatif.empile,
  .tableau-comparatif.empile tbody,
  .tableau-comparatif.empile tr,
  .tableau-comparatif.empile th,
  .tableau-comparatif.empile td { display: block; width: auto; }

  .tableau-comparatif.empile thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .tableau-comparatif.empile tr {
    padding: calc(var(--texte-courant) * 1) calc(var(--texte-courant) * 1.125);
  }
  .tableau-comparatif.empile tbody tr + tr { border-top: 1px solid var(--lisere); }
  .tableau-comparatif.empile tbody tr + tr > * { border-top: 0; }

  .tableau-comparatif.empile th,
  .tableau-comparatif.empile td { padding: 0; border-radius: 0; }

  .tableau-comparatif.empile tbody th { margin-bottom: calc(var(--texte-courant) * .375); }
  .tableau-comparatif.fiche.empile tbody th { font-size: var(--texte-pied); letter-spacing: .04em; text-transform: uppercase; }

  .tableau-comparatif.empile td + td { margin-top: calc(var(--texte-courant) * .5); }

  .tableau-comparatif.empile td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: var(--texte-pied);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--encre-douce);
    margin-bottom: calc(var(--texte-courant) * .125);
  }

  .tableau-comparatif.empile td.col-zufo {
    padding: calc(var(--texte-courant) * .5) calc(var(--texte-courant) * .75);
    border-radius: calc(var(--rayon-carte) / 2);
  }
  .tableau-comparatif.empile td.col-zufo::before { color: var(--bleu-profond); }
  .tableau-comparatif.empile.relief td.col-zufo::before { color: var(--glace); }
}

/* Tableau dense : des lignes serrées et des chiffres alignés, pour un tableau de nombres à
   beaucoup de lignes (les dix-sept pointures de la FAQ, 05/10/2026). */
.tableau-comparatif.dense { font-variant-numeric: tabular-nums; }
.tableau-comparatif.dense th,
.tableau-comparatif.dense td { padding: calc(var(--texte-courant) * .5) calc(var(--texte-courant) * .9); }
.tableau-comparatif.dense tbody td { color: var(--encre); }

/* Sur téléphone, les en-têtes d'un tableau dense passent sur deux lignes et ses marges se
   resserrent, pour montrer le plus de colonnes possible avant de défiler. */
@media (max-width: 40em) {
  .tableau-cadre.defile .tableau-comparatif.dense { width: 100%; }
  .tableau-cadre.defile .tableau-comparatif.dense thead th { white-space: normal; }
  .tableau-comparatif.dense th,
  .tableau-comparatif.dense td { padding-inline: calc(var(--texte-courant) * .6); }
}

/* Défilement : le cadre défile, jamais la page */
.tableau-cadre.defile { overflow-x: auto; }
/* ⭐ Une ombre au bord dit qu'il reste des colonnes à faire défiler (05/10/2026) : sans elle,
   sur téléphone, la dernière colonne du tableau des pointures était coupée net et rien ne
   l'annonçait. Sans script : deux caches blancs qui suivent le contenu, deux ombres qui
   restent au bord du cadre. Quand le tableau tient en entier, les caches couvrent les ombres. */
.tableau-cadre.defile {
  background:
    linear-gradient(to right, var(--blanc) 40%, transparent) left center / 36px 100% no-repeat local,
    linear-gradient(to left, var(--blanc) 40%, transparent) right center / 36px 100% no-repeat local,
    linear-gradient(to right, color-mix(in srgb, var(--encre) 18%, transparent), transparent) left center / 12px 100% no-repeat scroll,
    linear-gradient(to left, color-mix(in srgb, var(--encre) 18%, transparent), transparent) right center / 12px 100% no-repeat scroll,
    var(--blanc);
}
.tableau-cadre.defile:focus-visible { outline: 2px solid var(--bleu-profond); outline-offset: 2px; }
.tableau-cadre.defile .tableau-comparatif { width: max-content; min-width: 100%; }
.tableau-cadre.defile th,
.tableau-cadre.defile td { white-space: nowrap; }
.tableau-cadre.defile tbody th,
.tableau-cadre.defile thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--blanc);
  box-shadow: inset -1px 0 0 var(--lisere);
}
.tableau-cadre.defile thead th:first-child { border-top-left-radius: calc(var(--rayon-carte) - 1px); }
.tableau-cadre.defile tbody tr:last-child th { border-bottom-left-radius: calc(var(--rayon-carte) - 1px); }


/* ---------- Schémas éditoriaux (texte réel, pas d'image) ---------- */

.schema { margin: 2.25rem auto; }

/* Au-delà de 1200 px, un schéma sort de la colonne de lecture et prend la largeur
   de page : la marge disponible de part et d'autre (232 px) dépasse le débord
   demandé (208 px), donc aucun débordement horizontal possible. */
@media (min-width: 1200px) {
  .schema { margin-inline: calc((var(--largeur-texte) - var(--largeur-page)) / 2); }
}
.schema-source {
  font-size: 0.82rem;
  color: var(--encre-douce);
  margin: 0.7rem 0 0;
  text-align: center;
}

/* Frise du paradigme, version « Indigo » du 28/09/2026. Le passé est un fil,
   le basculement est une matière pleine : le seul dégradé bleu vers rouge de la
   page est sur les deux étapes « bascule ». Le balisage n'a pas bougé.
   Sa propre bascule en une colonne est incluse ci-dessous. */
.frise {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: calc(var(--texte-courant) * .75);
  row-gap: calc(var(--texte-courant) * 1.25);
}

/* Les deux phases : des pilules */
.frise-phase {
  grid-row: 1;
  align-self: start;
  font-size: var(--texte-pied);
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  line-height: 1.3;
  padding: calc(var(--texte-courant) * .5) calc(var(--texte-courant) * .875);
  border-radius: var(--rayon-pilule);
}
.frise-phase.avant { grid-column: 1 / 4; background: var(--glace-claire); color: var(--encre-douce); }
.frise-phase.apres { grid-column: 4 / 6; background: var(--bleu-profond); color: var(--blanc); }

/* Les étapes du passé : un filet, un point */
.frise-etape {
  grid-row: 2;
  position: relative;
  border: 0;
  border-top: 2px solid var(--lisere);
  border-radius: 0;
  background: transparent;
  padding: calc(var(--texte-courant) * 1.25) calc(var(--texte-courant) * .5) 0 0;
}
.frise-etape::before {
  content: "";
  position: absolute;
  top: calc(var(--texte-courant) * -.3125 - 1px);
  left: 0;
  width: calc(var(--texte-courant) * .625);
  height: calc(var(--texte-courant) * .625);
  border-radius: var(--rayon-pilule);
  background: var(--fond-page);
  border: 2px solid var(--encre-pale);
}

.frise > .frise-etape:nth-child(2) { grid-column: 1; }
.frise > .frise-etape:nth-child(3) { grid-column: 2; }
.frise > .frise-etape:nth-child(4) { grid-column: 3; }
.frise > .frise-etape:nth-child(6) { grid-column: 4; }
.frise > .frise-etape:nth-child(7) { grid-column: 5; }

.frise-date {
  font-size: var(--texte-pied);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--encre-douce);
  margin: 0;
}
.frise-titre {
  font-size: var(--texte-courant);
  font-weight: 700;
  line-height: 1.3;
  color: var(--encre);
  margin: calc(var(--texte-courant) * .25) 0 calc(var(--texte-courant) * .375);
}
.frise-texte {
  font-size: var(--texte-nav);
  line-height: 1.5;
  color: var(--encre-douce);
  margin: 0;
}

/* Le basculement : un ruban, le dégradé de la page */
.frise-etape.bascule {
  border-top: 0;
  border-radius: var(--rayon-carte);
  padding: calc(var(--texte-courant) * 1.25);
  background: var(--degrade-accent);
  background-size: 200% 100%;
}
.frise > .frise-etape.bascule:nth-child(6) { background-position: 0 0; }
.frise > .frise-etape.bascule:nth-child(7) { background-position: 100% 0; }
.frise-etape.bascule::before { display: none; }
.frise-etape.bascule .frise-date,
.frise-etape.bascule .frise-titre { color: var(--blanc); }
.frise-etape.bascule .frise-texte { color: color-mix(in srgb, var(--blanc) 85%, transparent); }

/* ---------- Sous 1200 px : une colonne, le fil devient vertical ---------- */
@media (max-width: 1199px) {
  .frise { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .frise-phase,
  .frise-etape { grid-row: auto; }
  .frise-phase.avant,
  .frise-phase.apres,
  .frise > .frise-etape:nth-child(2),
  .frise > .frise-etape:nth-child(3),
  .frise > .frise-etape:nth-child(4),
  .frise > .frise-etape:nth-child(6),
  .frise > .frise-etape:nth-child(7) { grid-column: 1; }

  .frise-phase { justify-self: start; margin-bottom: calc(var(--texte-courant) * 1); }
  .frise-phase.apres { margin-top: calc(var(--texte-courant) * .75); }

  .frise-etape {
    border-top: 0;
    border-left: 2px solid var(--lisere);
    margin-left: calc(var(--texte-courant) * .5);
    padding: 0 0 calc(var(--texte-courant) * 1.5) calc(var(--texte-courant) * 1.25);
  }
  .frise-etape::before {
    top: calc(var(--texte-courant) * .125);
    left: calc(var(--texte-courant) * -.3125 - 1px);
  }

  .frise-etape.bascule {
    border-left: 0;
    margin-left: 0;
    padding: calc(var(--texte-courant) * 1.25);
    background-size: 100% 200%;
  }
  .frise > .frise-etape.bascule:nth-child(6) { background-position: 0 0; border-radius: var(--rayon-carte) var(--rayon-carte) 0 0; }
  .frise > .frise-etape.bascule:nth-child(7) { background-position: 0 100%; border-radius: 0 0 var(--rayon-carte) var(--rayon-carte); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--blanc) 25%, transparent); }
}


/* ---------- La séparation des fonctions (Technologie, 23/10/2026) ----------
   Deux panneaux sombres, d'après le carrousel LinkedIn « Série tech #1 » : le texte à gauche, l'image à droite ;
   sur téléphone, le texte au-dessus de l'image. Aux couleurs du site (demande d'Hervé : pas de fond noir, le bleu du
   site) : le dégradé des blocs sombres, le titre en blanc puis en pervenche. La radiographie a un fond noir : elle se
   fond dans le bleu du panneau par un mélange « écran », qui ne garde que sa lumière. */
.separation { display: grid; gap: var(--ecart-blocs); margin: clamp(28px, 4vw, 48px) 0; }
.separation-panneau {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(20px, 4vw, 56px);
  background: var(--surface-bloc-sombre);
  color: var(--blanc);
  border-radius: var(--rayon-bloc);
  padding: clamp(28px, 4.5vw, 64px);
  overflow: hidden;
  isolation: isolate;
}
.separation-titre {
  font-size: clamp(26px, 2.8vw, 40px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.1;
  margin: 0 0 .6em;
  color: var(--blanc);
}
.separation-titre span { display: block; color: var(--glace); }
.separation-intro { color: var(--sur-sombre); font-size: clamp(17px, 1.4vw, 20px); line-height: 1.45; margin: 0 0 1.6em; max-width: 26em; }
.separation-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.3em; }
.separation-liste li { border-left: 3px solid var(--glace); padding-left: 14px; color: var(--blanc); line-height: 1.45; }
.separation-liste strong {
  display: block;
  color: var(--glace);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .9em;
  margin-bottom: .15em;
}
.separation-chute { margin: 1.8em 0 0; font-weight: 800; font-size: clamp(18px, 1.5vw, 22px); color: var(--blanc); }
.separation-image { display: block; width: 100%; max-width: 480px; height: auto; justify-self: center; }
.separation-image.ecran { mix-blend-mode: screen; }
/* Avant / après (Hervé, 13/11/2026, point T9) : chaque panneau dit d'abord de quoi il parle, et l'habillage le confirme.
   L'ancien monde, la coque rigide, passe en graphite avec des touches rouges, le rouge de la mousse sur la
   radiographie ; zUFO⁴ garde le bleu du site. Contrastes mesurés sur le point le plus clair du dégradé (#2d3244) :
   étiquette et rubriques #ff8a9b à 5,7, sous-titre #aeb5c6 à 6,2, filet rouge #ff5470 à 4,1 (élément graphique,
   seuil 3) ; sur le bleu, l'étiquette en pervenche tient 6,4. */
.separation-etiquette {
  margin: 0 0 1.1em;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--glace);
}
.separation-panneau.avant { background: linear-gradient(160deg, #2d3244, #161922); }
.separation-panneau.avant .separation-etiquette,
.separation-panneau.avant .separation-liste strong { color: #ff8a9b; }
.separation-panneau.avant .separation-titre span { color: #aeb5c6; }
.separation-panneau.avant .separation-liste li { border-left-color: #ff5470; }
@media (max-width: 760px) {
  .separation-panneau { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Le formulaire (07/10/2026, registre I-321) ----------
   Premier formulaire du site : la liste d'attente des essais. ⭐ Il vit sur SA PROPRE PAGE,
   /essayer-ascent/liste-d-attente/, qu'un bouton de la page Essayer ASCENT ouvre : monté
   d'abord dans le bandeau d'appel de cette page, il en est sorti le jour même, sur le retour
   d'Hervé (« le formulaire ne doit pas du tout être dans la page »). Une carte blanche, sur
   le fond de page. SANS JAVASCRIPT, comme tout le site : la validation est celle du
   navigateur (required, type, pattern), et le message d'erreur de chaque champ s'affiche par
   :user-invalid, que les navigateurs récents comprennent. Les autres montrent leurs propres
   messages, dans leur langue.
   ⭐ Le bord d'un champ n'est pas le filet des cartes : --filet ne fait que 1,3 de contraste
   sur le blanc, et un champ doit en faire 3 pour se voir (calculé le 07/10 : 3,8).
   ⭐ Une étoile rouge marque une réponse obligatoire (demande d'Hervé du 07/10).
   ⛔ Les « name » et les « value » de la page ne se retouchent pas ici ni là-bas sans
   prévenir le portail : voir le commentaire au-dessus du <form>. */
.formulaire {
  --bord-champ: color-mix(in srgb, var(--encre) 55%, var(--blanc));
  position: relative;
  max-width: 44rem;
  margin: 2rem auto 0;
  padding: clamp(20px, 4vw, 40px);
  border-radius: var(--rayon-carte);
  background: var(--blanc);
  color: var(--encre);
  text-align: left;
}

/* Ce qu'il faut savoir avant de commencer : un aplat pâle en tête de carte. */
.formulaire-avant {
  background: var(--glace-claire);
  border-radius: 16px;
  padding: 16px 20px;
}
.formulaire .formulaire-avant-titre { font-size: 15px; font-weight: 700; color: var(--encre); max-width: none; margin: 0 0 .4rem; }
.formulaire-avant ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; font-size: 15px; line-height: 1.5; }
.formulaire .formulaire-avant li { position: relative; padding: .2rem .5rem .2rem 1.1rem; }
.formulaire-avant li::before {
  content: "";
  position: absolute;
  left: .15rem;
  top: .85em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bleu-profond);
}

/* Les questions vont par groupes, séparés d'un filet ; le titre du groupe a la forme d'un surtitre. */
.formulaire-groupe, .formulaire-fin {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--lisere);
}
.formulaire-groupe { display: grid; gap: 20px; }
.formulaire-groupe > h2 {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bleu-profond);
  margin: 0;
}
.etoile { color: var(--vif); font-weight: 700; }
.formulaire .formulaire-legende { font-size: 13px; line-height: 1.45; color: var(--encre-pale); max-width: none; margin: 20px 0 0; }
.formulaire-legende + .formulaire-groupe { margin-top: 12px; }
.formulaire .groupe-aide { font-size: 14px; line-height: 1.5; color: var(--encre-douce); max-width: none; margin: -8px 0 0; }

/* Un champ : son libellé, sa case, son aide, son message d'erreur. Deux champs courts se
   tiennent côte à côte sur ordinateur. Un <fieldset> perd ici son cadre et sa largeur minimale. */
.champs-deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; align-items: start; }
.champ { margin: 0; padding: 0; border: 0; min-width: 0; }
.champ > label, .champ > legend {
  display: block;
  padding: 0;
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--encre);
}

.formulaire :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea) {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  border: 1.5px solid var(--bord-champ);
  border-radius: 12px;
  background-color: var(--blanc);
  color: var(--encre);
  font: inherit;
  font-size: 16px;   /* jamais moins : en dessous, un iPhone agrandit la page à chaque champ */
  line-height: 1.4;
}
.formulaire :is(input, select, textarea):hover { border-color: var(--encre); }
.formulaire :is(input, select, textarea):focus-visible {
  outline: 2px solid var(--bleu-profond);
  outline-offset: 2px;
  border-color: var(--bleu-profond);
}
.formulaire .court { max-width: 9rem; }
/* Ces deux règles nomment le champ par sa case (.champ) pour peser autant que la règle commune
   ci-dessus : écrites plus court, elles perdraient contre elle, et la flèche ne se verrait pas. */
.formulaire .champ textarea { min-height: 6.5rem; resize: vertical; }
/* La flèche de la liste est dessinée par deux dégradés : ni image, ni police d'icônes. */
.formulaire .champ select {
  appearance: none;
  padding-right: 42px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--encre) 50%),
    linear-gradient(135deg, var(--encre) 50%, transparent 50%);
  background-position: calc(100% - 21px) 50%, calc(100% - 15px) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}
/* L'âge se tape : les deux petites flèches d'un champ de nombre n'apportent rien. */
.formulaire input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
.formulaire input[type="number"]::-webkit-inner-spin-button,
.formulaire input[type="number"]::-webkit-outer-spin-button { appearance: none; margin: 0; }

.formulaire .champ-aide { font-size: 13px; line-height: 1.45; color: var(--encre-pale); max-width: none; margin: 6px 0 0; }
.formulaire legend + .champ-aide { margin: -2px 0 8px; }

/* Le message d'erreur d'un champ ne se montre qu'une fois le champ quitté, ou l'envoi tenté. */
.formulaire .champ-erreur, .formulaire .formulaire-erreur {
  display: none;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 600;
  color: var(--vif);
  max-width: none;
  margin: 6px 0 0;
}
.champ:has(:user-invalid) > .champ-erreur { display: block; }
/* L'email a deux messages (Hervé, 13/11/2026) : « Indiquez votre adresse email » quand la case est vide, « ne semble pas
   valide » quand elle est mal écrite. Sans programme : le champ porte un placeholder d'une espace, invisible, et
   :placeholder-shown dit s'il est vide. */
.champ:has(:user-invalid) > .champ-erreur.vide,
.champ:has(:user-invalid) > .champ-erreur.format { display: none; }
.champ:has(input:user-invalid:placeholder-shown) > .champ-erreur.vide,
.champ:has(input:user-invalid:not(:placeholder-shown)) > .champ-erreur.format { display: block; }
.formulaire :is(input, select, textarea):user-invalid { border-color: var(--vif); }

/* Une question à choix : chaque réponse est une case entière, que l'on touche du doigt. */
.choix { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(12.5rem, 100%), 1fr)); gap: 8px; }
.choix.court { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 20rem; }
.choix.trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }   /* trois réponses : une seule ligne à l'ordinateur */
.choix-option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 14px;
  border: 1.5px solid var(--bord-champ);
  border-radius: 12px;
  background: var(--blanc);
  font-size: 15px;
  line-height: 1.3;
  cursor: pointer;
}
.choix-option:hover { border-color: var(--encre); }
.choix-option input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--bleu-profond); }
.choix-option small { display: block; font-size: 13px; color: var(--encre-pale); }
.choix-option:has(input:checked) {
  border-color: var(--bleu-profond);
  background: var(--glace-claire);
  box-shadow: inset 0 0 0 1px var(--bleu-profond);
}
.choix-option:has(input:focus-visible) { outline: 2px solid var(--bleu-profond); outline-offset: 2px; }
.formulaire .choix-option input:focus-visible { outline: 0; }
.champ:has(:user-invalid) .choix-option { border-color: var(--vif); }

/* La case à cocher de la fin, et son texte sur plusieurs lignes. */
.champ > label.case { display: flex; align-items: flex-start; gap: 12px; margin: 0; font-size: 15px; font-weight: 400; line-height: 1.5; cursor: pointer; }
.case input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--bleu-profond); }

.formulaire .formulaire-erreur { font-size: 14px; margin: 20px 0 0; }
.formulaire:has(:user-invalid) .formulaire-erreur { display: block; }
.formulaire .formulaire-envoi { max-width: none; margin: 20px 0 0; }
/* Le bouton d'envoi est le seul rouge de la page. Inactif, il pâlit et ne répond plus. */
button.bouton { border: 0; font: inherit; font-weight: 700; font-size: 1rem; cursor: pointer; }
.formulaire .bouton { background: var(--surface-bouton); color: var(--blanc); }
.formulaire .bouton:hover { background: var(--surface-bouton-survol); }
.formulaire .bouton:disabled { background: var(--surface-bouton); opacity: .45; cursor: not-allowed; }

/* Le champ piège : hors de l'écran, hors de la tabulation, caché aux lecteurs d'écran. Un
   visiteur ne le voit pas ; s'il arrive rempli, le portail garde l'inscription et la marque.
   ⛔ Son nom ne doit évoquer ni un site, ni une adresse, ni un téléphone : un navigateur le
   remplirait tout seul à la place d'un vrai visiteur (relevé par le projet 10 le 07/10). */
.formulaire-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Un texte que seul un lecteur d'écran dit. */
.hors-ecran { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Les repères jaunes du chantier, à l'intérieur de la carte. */
.formulaire p.a-completer { max-width: none; margin: 0 0 20px; font-size: 14px; line-height: 1.5; }
.formulaire :is(.champ, .formulaire-fin) > p.a-completer { margin: 12px 0 0; }
.formulaire p.groupe-aide.a-completer { margin: -8px 0 0; }

@media (max-width: 40em) {
  .formulaire { padding: 18px 16px 22px; margin-top: 1.5rem; }
  .champs-deux, .choix.trois { grid-template-columns: minmax(0, 1fr); }
  /* Choix d'Hervé du 14/10 (registre I-337) : les deux questions de pratique, huit et sept réponses
     courtes, sur deux colonnes au téléphone, pour raccourcir le formulaire. */
  .choix.deux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .formulaire-envoi .bouton { width: 100%; }
}

/* ---------- Les pages de retour du formulaire (10/10/2026, registre I-327) ----------
   Après l'envoi, le portail renvoie le visiteur sur l'une de ces deux pages :
   /essayer-ascent/demande-enregistree/ ou /essayer-ascent/demande-non-enregistree/.
   Elles reprennent la tête compacte et la carte blanche du formulaire, à la même largeur,
   pour que le visiteur ne change pas de décor. Dans la carte : une pastille et une phrase
   disent l'issue d'un coup d'œil, puis vient la suite, avec UNE action principale.
   ⛔ Ces deux adresses sont fixées dans le code du portail : qui les renomme le prévient. */
.retour {
  max-width: 44rem;
  margin: 0 auto;
  padding: clamp(20px, 4vw, 40px);
  border-radius: var(--rayon-carte);
  background: var(--blanc);
  color: var(--encre);
  text-align: left;
}
.retour p { max-width: none; }
.retour > p { margin: 16px 0 0; line-height: 1.55; color: var(--encre-douce); }

/* L'issue : une pastille ronde, pâle, dont le signe est bleu quand c'est noté et rouge quand
   rien n'est parti. Pâle exprès : le seul aplat rouge de l'écran reste le bouton (règle du
   rouge, « un seul par écran »). Le sens est porté par la phrase, la pastille ne fait que
   l'annoncer : elle est cachée aux lecteurs d'écran. */
.retour-issue { display: flex; align-items: center; gap: 14px; }
.retour-pastille {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--glace-claire);
  color: var(--bleu-profond);
}
.retour.echec .retour-pastille { background: color-mix(in srgb, var(--vif) 12%, var(--blanc)); color: var(--vif); }
.retour .retour-issue p { margin: 0; font-size: var(--texte-chapo); font-weight: 700; line-height: 1.3; color: var(--encre); }

/* La suite va par parties, séparées d'un filet, comme les groupes du formulaire. */
.retour-partie { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--lisere); }
.retour-partie > h2 {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bleu-profond);
  margin: 0 0 12px;
}
.retour-partie > p { margin: 0; line-height: 1.55; color: var(--encre-douce); }
.retour-partie > p + p { margin-top: 12px; }
.retour-partie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; line-height: 1.5; color: var(--encre-douce); }
.retour-partie li { position: relative; padding-left: 1.1rem; }
.retour-partie li::before {
  content: "";
  position: absolute;
  left: .15rem;
  top: .62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bleu-profond);
}

/* L'action principale porte le rouge du bouton d'envoi ; le lien secondaire reste un lien. */
.retour .retour-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 20px; }
.retour .bouton { background: var(--surface-bouton); color: var(--blanc); }
.retour .bouton:hover { background: var(--surface-bouton-survol); color: var(--blanc); }
.retour p.a-completer { margin: 16px 0 0; font-size: 14px; line-height: 1.5; }
.retour > p.a-completer:first-child { margin: 0 0 20px; }

@media (max-width: 40em) {
  .retour { padding: 18px 16px 22px; }
  .retour-actions .bouton { width: 100%; text-align: center; }
}

/* ============================================================
   CHANTIER — repères visuels du travail en cours (demande d'Hervé, 27/08).
   ⚠️ TOUT CE BLOC SE RETIRE À LA BASCULE, avec les balises qu'il stylise :
   la checklist de go-live vérifie qu'il ne reste ni .a-completer ni .illu.
   ============================================================ */

/* Texte provisoire : surligné en jaune discret, pour qu'on voie d'un
   coup d'œil tout ce qui reste à écrire. */
.a-completer {
  background: #fdf6d8;
  box-shadow: 0 0 0 2px #fdf6d8;
  border-bottom: 1px solid #e8d98a;
  border-radius: 2px;
}

/* Le même, quand il occupe un bloc entier */
p.a-completer, li.a-completer {
  display: block;
  padding: 0.35rem 0.5rem;
  box-shadow: none;
}

/* Sur un fond sombre, le texte du bloc sombre (pervenche, blanc) devenait illisible sur le
   jaune : le texte provisoire reste à l'encre partout (relevé le 02/10 sur le bandeau
   d'Essayer ASCENT). */
:is(.bandeau-cta, .bande.sombre, .mise-en-avant, .note-sombre, .carte-prix) .a-completer,
:is(.bandeau-cta, .bande.sombre, .mise-en-avant, .note-sombre, .carte-prix) .a-completer strong { color: var(--encre); }

/* Étiquette qui nomme ce qui manque, à poser en tête d'un bloc provisoire */
.a-completer .quoi {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8a6d0b;
  margin-right: 0.4rem;
}

/* Emplacement d'image : cadre barré d'une croix, avec sa légende. */
.illu {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 220px;
  margin: 2rem auto;
  max-width: var(--largeur-texte);
  padding: 1.5rem;
  border: 2px dashed #c9b57a;
  border-radius: 8px;
  background:
    linear-gradient(to top right, transparent calc(50% - 1px), #e3d5a8 50%, transparent calc(50% + 1px)),
    linear-gradient(to bottom right, transparent calc(50% - 1px), #e3d5a8 50%, transparent calc(50% + 1px)),
    #fdfbf3;
  color: #8a6d0b;
  text-align: center;
}

.illu .titre {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: #fdfbf3;
  padding: 0 0.5rem;
}

.illu .desc {
  font-size: 0.9rem;
  max-width: 34ch;
  background: #fdfbf3;
  padding: 0.15rem 0.5rem;
}

/* Bandeau permanent en haut de chaque page de préproduction */
.bandeau-chantier {
  background: #8a6d0b;
  color: #fff;
  text-align: center;
  font-size: 0.8rem;
  padding: 0.4rem 1rem;
  letter-spacing: 0.02em;
}

/* ---------- Infobulle de transparence, version « Indigo » du 28/09/2026 ----------
   Toujours sans JavaScript. Ouverte, la bulle se déplie SOUS la ligne, dans le
   flux, et repousse la suite : aucun recouvrement, aucun débordement latéral,
   même au bord d'un téléphone. */
/* Un <details> ne peut pas vivre dans un <p> (le navigateur ferme le <p> avant) :
   hors tableau et liste, on l'enveloppe dans <div class="avec-infobulle">. */
.avec-infobulle { margin: 0 0 1em; }

details.infobulle {
  display: inline;
  margin-left: .3em;
}

details.infobulle > summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  height: 1.5em;
  border-radius: var(--rayon-pilule);
  border: 1.5px solid var(--bleu-profond);
  background: var(--blanc);
  color: var(--bleu-profond);
  font-size: var(--texte-pied);
  font-weight: 700;
  font-style: normal;
  line-height: 1;
  vertical-align: .1em;
}
details.infobulle > summary::-webkit-details-marker { display: none; }

/* Zone de toucher d'environ 44 px autour du petit cercle */
details.infobulle > summary::before {
  content: "";
  position: absolute;
  inset: -.95em;
  border-radius: var(--rayon-pilule);
}

details.infobulle > summary:hover { background: var(--glace-claire); }
details.infobulle > summary:focus-visible { outline: 2px solid var(--bleu-profond); outline-offset: 2px; }
details.infobulle[open] > summary { background: var(--bleu-profond); color: var(--blanc); }

details.infobulle > .bulle {
  display: block;
  position: static;
  width: auto;
  transform: none;
  margin: calc(var(--texte-courant) * .625) 0 calc(var(--texte-courant) * .25);
  padding: calc(var(--texte-courant) * .75) calc(var(--texte-courant) * 1);
  background: var(--glace-claire);
  border: 0;
  border-radius: calc(var(--rayon-carte) / 2);
  box-shadow: none;
  font-size: var(--texte-nav);
  line-height: 1.5;
  font-weight: 400;
  font-style: normal;
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
  color: var(--encre);
}

/* ---------- La presse (19/10/2026, registre I-342) ----------
   Sur l'accueil, les logos des médias en gris, chacun ouvre l'article ; sur la page Presse, la liste des articles,
   une ligne par article : le logo ou le nom du média, la date discrète, le lien.
   Huit logos depuis le 14/11/2026 (Le Figaro Magazine ajouté par Hervé) : en ligne souple, un logo restait seul sur
   une deuxième ligne à plusieurs largeurs. La rangée est donc une grille, réglée sur la largeur de la section :
   une ligne de huit quand elle tient (huit logos font 874 px, plus sept écarts de 24 px), sinon deux lignes de
   quatre, et quatre lignes de deux sur téléphone. Jamais de logo orphelin. */
.presse-logos { text-align: center; container-type: inline-size; }
.presse-logos-liste { list-style: none; margin: 20px auto 0; padding: 0; display: grid;
  grid-template-columns: repeat(4, auto); justify-content: center; justify-items: center; align-items: center;
  gap: 28px 48px; max-width: 66rem; }
@container (min-width: 1050px) { .presse-logos-liste { grid-template-columns: repeat(8, auto); gap: 24px; } }
@container (max-width: 600px) { .presse-logos-liste { grid-template-columns: repeat(2, auto); gap: 24px 40px; } }
.presse-logos-liste a { display: block; opacity: .75; }
/* Un logo sans lien (Le Figaro Magazine, article papier, 14/11/2026) garde la même teinte que les autres. */
.presse-logos-liste li > img { opacity: .75; }
.presse-logos-liste a:hover, .presse-logos-liste a:focus-visible { opacity: 1; }
.presse-logos-liste img { display: block; max-width: 100%; height: auto; }
.presse-articles { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; max-width: 52rem; }
.presse-articles li { display: grid; grid-template-columns: minmax(0, 1fr) 9rem 11.5rem; align-items: center;
  gap: 8px 24px; padding: 16px 0; border-bottom: 1px solid var(--lisere); }
.presse-articles li:first-child { border-top: 1px solid var(--lisere); }
.presse-marque img { display: block; max-width: 100%; height: auto; }
.presse-nom { font-weight: 700; color: var(--encre-pale); }
.presse-date { font-size: 14px; color: var(--encre-pale); }
@media (max-width: 40em) {
  .presse-articles li { grid-template-columns: minmax(0, 1fr) auto; }
  .presse-articles .lien-lecture { grid-column: 1 / -1; justify-self: start; }
}

/* ---------- La FAQ : chaque filtre commence à la même hauteur (19/10/2026) ----------
   Relevé par Marie-Victoire : sur « Tout » et « Le projet », la liste commence à la hauteur des thèmes ; sur les
   quatre autres, le titre du thème choisi gardait la marge d'un titre de milieu de liste, 24 px plus bas. */
#f-projet:checked ~ .faq-liste .faq-groupe[data-theme="projet"],
#f-produit:checked ~ .faq-liste .faq-groupe[data-theme="produit"],
#f-canting:checked ~ .faq-liste .faq-groupe[data-theme="canting"],
#f-achat:checked ~ .faq-liste .faq-groupe[data-theme="achat"],
#f-essais:checked ~ .faq-liste .faq-groupe[data-theme="essais"] { margin-top: 0; }

/* ---------- Les photos de Marie-Victoire (19/10/2026) ----------
   En-têtes en photo de L'aventure et d'Essayer ASCENT : le composant de l'accueil (.tete-photo), avec le surtitre
   et l'accroche de la tête sombre (.mise-en-avant). */
.tete-photo .surtitre { color: color-mix(in srgb, var(--glace) 60%, var(--blanc)); }
.tete-photo .tete-photo-accroche {
  font-size: clamp(21px, 2vw, 30px);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -.02em;
  color: color-mix(in srgb, var(--sur-sombre) 70%, var(--blanc));
  max-width: none;
  margin: 0 0 1.2rem;
}
.tete-photo-texte strong { color: var(--blanc); }
.tete-photo .bouton { margin-top: .4rem; }
/* Sur la photo de L'aventure, les trois skieurs sont au milieu : l'image déborde à droite d'un tiers, ce qui les
   pousse hors de la colonne de texte. */
.tete-photo-aventure .tete-photo-fond { width: 135%; object-position: 50% 45%; }
@media (max-width: 860px) {
  .tete-photo-accueil .tete-photo-fond { object-position: 70% 30%; }
  .tete-photo-aventure .tete-photo-fond { width: 100%; object-position: 46% 40%; }
  .tete-photo-essayer .tete-photo-fond { object-position: 72% 40%; }
}

/* Les chaussures de la frise de L'aventure, détourées */
.frise-image { display: block; width: auto; max-width: 100%; height: 96px; margin: 0 0 calc(var(--texte-courant) * .75); }

/* Le portrait du fondateur */
.portrait { margin: 0; }
.portrait img { display: block; width: 100%; max-width: 26rem; height: auto; border-radius: var(--rayon-carte); }

/* Les photos des coulisses : sur une ligne, à la même hauteur (chaque photo grandit selon sa largeur relative) */
.galerie { display: flex; gap: 16px; align-items: flex-start; margin: 1.6rem 0 0; }
.galerie figure { margin: 0; min-width: 0; }
.galerie-panorama { flex: 2.443 1 0; }
.galerie-photo { flex: 1.304 1 0; }
.galerie img { display: block; width: 100%; height: auto; border-radius: var(--rayon-carte); }
.galerie figcaption { font-size: 14px; color: var(--encre-pale); margin-top: 8px; }
@media (max-width: 40em) {
  .galerie { flex-direction: column; }
  .galerie figure { flex: none; width: 100%; }
}

/* Essayer ASCENT : l'image d'ASCENT à côté des quatre étapes (19/10/2026, choix d'Hervé). Les étapes passent sur deux
   colonnes, l'image prend la troisième ; sur téléphone, l'image vient avant les étapes. La liste des étapes de la page
   ASCENT n'est pas concernée. */
.etapes-et-image {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  margin: 2rem 0 1.75rem;
}
.etapes-et-image .etapes { margin: 0; grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.etapes-image { margin: 0; }
.etapes-image img {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  margin-inline: auto;
  filter: drop-shadow(0 24px 32px rgba(18, 27, 69, .22));
}
@media (max-width: 860px) {
  .etapes-et-image { grid-template-columns: minmax(0, 1fr); }
  .etapes-et-image .etapes { grid-template-columns: minmax(0, 1fr); }
  .etapes-image { order: -1; }
  .etapes-image img { max-width: 300px; }
}

/* Les soutiens, sur L'aventure (19/10/2026) : le gris et l'opacité des logos de presse. Centrés depuis le 02/11/2026
   (règle d'Hervé, registre I-432). Sur ordinateur, les dix logos tiennent sur une ligne : elle va d'un bord à l'autre
   de la section, donc centrée sur la page, son premier logo sous le titre et le dernier au bord du cadre qui suit.
   Sous 1 100 px, ils ne tiennent plus sur une ligne : la largeur limitée les range en deux lignes de cinq, au lieu
   de laisser un logo seul sur la seconde. */
.soutiens-logos { list-style: none; margin: 1.6rem auto 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 20px 40px; }
.soutiens-logos img { display: block; max-width: 100%; height: auto; opacity: .75; }
@media (min-width: 1100px) {
  .soutiens-logos { justify-content: space-between; }
}
@media (max-width: 1099px) {
  .soutiens-logos { max-width: 38rem; }
}
@media (max-width: 40em) {
  .soutiens-logos { gap: 16px 28px; }
}

/* Les réseaux sociaux de zUFO, dans le pied de page (choix d'Hervé du 21/10/2026) : LinkedIn, Instagram, YouTube. */
.pied-reseaux { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.pied-reseaux a { color: inherit; text-decoration: none; font-weight: 600; }
.pied-reseaux a:hover, .pied-reseaux a:focus-visible { color: var(--bleu-profond); text-decoration: underline; }
@media (max-width: 860px) {
  .pied-reseaux { justify-content: center; }
}

/* ---------- Le bandeau cookies (tarteaucitron.js, 21/10/2026) ----------
   Aux couleurs et à la police du site. « Tout accepter » et « Tout refuser » ont exactement le même poids : refuser doit
   être aussi facile qu'accepter. Les règles de la bibliothèque portent souvent !important, d'où celles-ci. */
#tarteaucitronRoot, #tarteaucitronRoot * { font-family: inherit !important; }
#tarteaucitronRoot #tarteaucitronAlertBig {
  background: var(--encre) !important;
  color: var(--blanc) !important;
  font-size: 15px !important;
  padding: 18px var(--gouttiere-page) !important;
  box-sizing: border-box !important;   /* sans elle, la marge s'ajoute à la pleine largeur et le bandeau déborde à droite (21/10) */
}
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronDisclaimerAlert { color: var(--blanc) !important; font-size: 15px !important; }
#tarteaucitronRoot #tarteaucitronAlertBig button {
  border-radius: var(--rayon-pilule) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  padding: 10px 18px !important;
}
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronPersonalize2,
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronAllDenied2 {
  background: var(--blanc) !important;
  color: var(--encre) !important;
  border: 0 !important;
}
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronPrivacyUrl {
  background: transparent !important;
  color: var(--blanc) !important;
  text-decoration: underline !important;
  padding: 10px 6px !important;
}
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronCloseAlert {
  background: transparent !important;
  color: var(--blanc) !important;
  border: 1px solid color-mix(in srgb, var(--blanc) 60%, transparent) !important;
}
/* Quand le texte et les boutons ne tiennent pas sur une ligne, ils s'empilaient sans aucun air (21/10) : un peu d'espace
   entre les rangées, et sur téléphone le texte au-dessus des boutons. */
#tarteaucitronRoot #tarteaucitronAlertBig button { margin-top: 5px !important; margin-bottom: 5px !important; }
@media (max-width: 860px) {
  #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronDisclaimerAlert {
    display: block !important;
    margin: 0 0 8px !important;
    line-height: 1.45 !important;
  }
}

/* Le panneau détaillé des cookies (bouton « Personnaliser », passe de finitions du 22/10/2026) : il était resté aux
   couleurs de la bibliothèque, boutons jaunes et petites cases. Il prend celles du site : boutons en pilule au contour
   bleu nuit, le choix fait se remplit et porte une coche, « Tout accepter » et « Tout refuser » restent strictement
   égaux. Les cases vides disparaissent : sur « Tout accepter » et « Tout refuser », elles ne se cochaient jamais. La
   feuille de la bibliothèque est chargée après la nôtre, d'où des sélecteurs plus précis que les siens. */
html body #tarteaucitronRoot button#tarteaucitronBack {
  background: var(--encre) !important;
  opacity: .55 !important;
}
html body #tarteaucitronRoot #tarteaucitron { color: var(--encre-douce) !important; }
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronClosePanel {
  background: var(--blanc) !important;
  color: var(--encre) !important;
  font-size: 13px !important;
}
html body #tarteaucitronRoot #tarteaucitron .tarteaucitronH1 {
  color: var(--encre) !important;
  font-size: clamp(22px, 2.2vw, 28px) !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
  line-height: 1.15 !important;
}
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronInfo {
  color: var(--encre-douce) !important;
  border-color: var(--filet) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
}
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronPrivacyUrlDialog {
  background: transparent !important;
  color: var(--accent) !important;
  font-size: 15px !important;
  text-decoration: underline !important;
}
html body #tarteaucitronRoot #tarteaucitron .tarteaucitronH2,
html body #tarteaucitronRoot #tarteaucitron .tarteaucitronH3,
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronServices .tarteaucitronTitle button {
  color: var(--encre) !important;
}
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronServices_mandatory .tarteaucitronH3,
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronServices [id^="tarteaucitronDetails"],
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronServices .tarteaucitronName .tacCurrentStatus,
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronServices .tarteaucitronName .tarteaucitronReadmoreSeparator,
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronServices .tarteaucitronName .tarteaucitronListCookies {
  color: var(--encre-douce) !important;
}
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronServices .tarteaucitronName a {
  color: var(--accent) !important;
  text-decoration: underline !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}
/* Les boutons de choix, tous du même poids. */
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronServices .tarteaucitronAllow,
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronServices .tarteaucitronDeny {
  background: var(--blanc) !important;
  color: var(--encre) !important;
  border: 0 !important;
  box-shadow: inset 0 0 0 1.5px var(--encre) !important;
  border-radius: var(--rayon-pilule) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  padding: 10px 18px !important;
  opacity: 1 !important;
}
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronServices .tarteaucitronAllow:hover,
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronServices .tarteaucitronDeny:hover {
  background: var(--glace-claire) !important;
}
/* Le choix fait : rempli de bleu nuit, avec une coche (la bibliothèque le signale par aria-pressed). */
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronServices [aria-pressed="true"].tarteaucitronAllow,
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronServices [aria-pressed="true"].tarteaucitronDeny {
  background: var(--encre) !important;
  color: var(--blanc) !important;
  box-shadow: none !important;
}
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronServices [aria-pressed="true"].tarteaucitronAllow:hover,
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronServices [aria-pressed="true"].tarteaucitronDeny:hover {
  background: var(--bleu-profond) !important;
}
html body #tarteaucitronRoot #tarteaucitron .tarteaucitronCheck::before,
html body #tarteaucitronRoot #tarteaucitron .tarteaucitronCross::before { content: none !important; }
html body #tarteaucitronRoot #tarteaucitron [aria-pressed="true"] .tarteaucitronCheck::before,
html body #tarteaucitronRoot #tarteaucitron [aria-pressed="true"] .tarteaucitronCross::before {
  content: "\2713" !important;
  color: inherit !important;   /* la bibliothèque la teint en noir, invisible sur le bleu nuit */
  margin-right: .35em;
}
html body #tarteaucitronRoot #tarteaucitron .tarteaucitronCheck,
html body #tarteaucitronRoot #tarteaucitron .tarteaucitronCross,
html body #tarteaucitronRoot #tarteaucitron .tarteaucitronPlus,
html body #tarteaucitronRoot #tarteaucitron .tarteaucitronPlus::before { color: inherit !important; }
/* « Enregistrer », le bouton du site. */
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronServices #tarteaucitronSaveButton.tarteaucitronAllow {
  background: var(--encre) !important;
  color: var(--blanc) !important;
  box-shadow: none !important;
  font-size: 16px !important;
  padding: 12px 26px !important;
}
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronServices #tarteaucitronSaveButton.tarteaucitronAllow:hover {
  background: var(--bleu-profond) !important;
}
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronServices .tarteaucitronLine.tarteaucitronIsAllowed,
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronServices .tarteaucitronLine.tarteaucitronIsDenied {
  border-color: transparent !important;
}
html body #tarteaucitronRoot #tarteaucitron button:focus-visible,
html body #tarteaucitronRoot #tarteaucitron a:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px !important;
}

/* Les grands titres d'en-tête (21/10/2026, lot d'Hervé, point 1.1) : à .95, sur un grand écran, le jambage du « p » de
   « pied » touchait le « l » de « la » à la ligne suivante. À 1.04, les lettres ne se touchent plus à aucune largeur. */

/* Le titre du bandeau des médias (lot d'Hervé, point 1.2) : « zUFO dans les médias », un peu plus grand que le surtitre,
   à l'encre du site au lieu du rouge. */
.presse-logos .presse-logos-titre {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--encre);
  margin: 0 auto;
}

/* La ligne de preuves de l'accueil (Hervé, 30/10/2026, registres I-422 et I-426) : à la fin du bloc, sous les logos, à la
   même distance que deux rangées de logos entre elles. Sur une ligne à l'ordinateur ; plus étroit, une preuve par ligne,
   pour qu'aucun point médian ne reste seul en bout de ligne. */
.presse-logos .presse-preuves {
  max-width: none;
  margin: 24px auto 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--encre);
}
/* G4 (Hervé, 10/11/2026, registre I-436) : la ligne est mise en valeur, l'encre du texte et le demi-gras au lieu du gris
   pâle ; le point médian reste pâle, pour que les preuves se détachent. */
.presse-preuves .point { color: var(--encre-pale); font-weight: 400; }

/* Le logo du prix de l'INPI sur L'aventure (G4, 10/11/2026) : sous le texte qui le cite, aligné sur lui, dans le gris et
   l'opacité des logos des soutiens. */
/* 12/11/2026 : deux logos, l'INPI recomposé et le badge du CES, centrés côte à côte. */
.prix-logos { margin: 1.6rem 0 1.8rem; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 20px 48px; }
.prix-logos img { display: block; height: auto; max-width: 100%; opacity: .75; }
@media (max-width: 56em) {
  .presse-preuves span { display: block; text-wrap: balance; }
  .presse-preuves .point { display: none; }
}

/* La citation d'Hervé (L'aventure, lot d'Hervé, point 3.3) : une prise de parole personnelle, distincte du texte qui la
   précède ; un grand guillemet pâle, un filet, un texte un peu plus grand, la signature en petites capitales. Pas de
   police manuscrite. Tout est dans le gris bleuté de la signature, le guillemet en plus pâle (choix d'Hervé du 22/10 :
   plus discret et homogène). Le guillemet est placé au-dessus du texte, sans le toucher : à 64 px et en interligne 1, son dessin
   occupe de 28 à 54 px de sa boîte (mesuré le 21/10), d'où le décalage de -28 px et les 30 px de marge haute, qui laissent
   une douzaine de pixels avant la première ligne. */
.citation { position: relative; margin: 2.4rem 0 0; padding: 30px 0 0 1.6rem; border-left: 3px solid var(--encre-pale); }
.citation::before {
  content: "\00AB";
  content: "\00AB" / "";   /* décoratif : les lecteurs d'écran ne l'annoncent pas (la première ligne sert aux navigateurs anciens) */
  position: absolute;
  top: -28px;
  left: 1.6rem;
  font-size: 64px;
  line-height: 1;
  font-weight: 800;
  color: color-mix(in srgb, var(--encre-pale) 35%, transparent);
}
.citation blockquote { margin: 0; }
.citation blockquote p {
  font-size: clamp(18px, 1.45vw, 21px);
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--encre-pale);   /* plus discret, choix d'Hervé du 22/10 : le gris bleuté de la signature, 6 pour 1 de contraste */
  margin: 0 0 .8rem;
}
.citation figcaption {
  margin-top: 1rem;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--encre-pale);
}

/* ---------- La page Technologie centrée sur zUFO⁴ (choix d'Hervé du 22/10/2026) ----------
   La tête de page est la marque : le nom en très grand, l'exposant 4 dans le rouge du logo, puis le nom en toutes lettres
   (« Technologie zUFO puissance quatre ») pour qu'on ne lise pas « zUFO 4 ». Ce n'est pas un logo : le nom, composé dans
   la police du site. Les quatre cartes qui suivent portent un chiffre, 1 à 4, dans le même rouge. */
.mise-en-avant.zufo4-tete { display: block; text-align: center; padding-block: clamp(48px, 8vw, 104px); }
.zufo4-tete-texte { max-width: 52rem; margin: 0 auto; }
.mise-en-avant.zufo4-tete h1.zufo4-marque {
  margin: 0 0 .3em;
  color: var(--blanc);
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: .9;
  font-size: clamp(72px, 13vw, 196px);
}
/* La marque zUFO⁴ (choix d'Hervé du 23/10, piste C5 « le cadre à quatre coins ») : son dessin vit dans
   assets/img/marques/zufo4.svg et la page y fait référence. Elle se centre dans la tête de page, à 1,45 fois la taille
   du titre. Le 4 y prend le rouge du logo éclairci (choix d'Hervé du 22/10) : sur le fond bleu, le rouge du logo ne se
   détachait qu'à 2,2 pour 1, celui-ci à 3,2. Le nom reste écrit en toutes lettres, masqué à l'écran par la classe commune
   .hors-ecran, pour les lecteurs d'écran et les moteurs de recherche. */
.mise-en-avant.zufo4-tete h1.zufo4-marque { --accent: #ff5470; }
.zufo4-dessin { display: block; height: 1.45em; width: auto; max-width: 100%; margin: 0 auto; overflow: visible; }
.zufo4-techno {
  display: block;
  font-size: max(.12em, 14px);
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--blanc);
  margin-top: 1.1em;
  padding-left: .24em;
  line-height: 1.4;
}
.zufo4-techno .marque { text-transform: none; letter-spacing: .06em; }
.zufo4-signature {
  color: var(--blanc);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.12;
  font-size: clamp(24px, 3.2vw, 44px);
  margin: .2em 0 .7em;
}
.zufo4-signature span { color: var(--glace); display: inline-block; }   /* la seconde phrase passe entière à la ligne */
.zufo4-explication { color: var(--blanc); font-size: clamp(17px, 1.35vw, 20px); margin: 0 auto .6em; max-width: 40rem; }
.zufo4-explication strong { color: var(--blanc); }
/* Les quatre cartes : les schémas un peu plus grands, et un chiffre dans le coin haut droit */
.zufo4-dimensions .dimension-marque { flex-basis: 13rem; width: 13rem; height: 13rem; }
/* Les renvois aux quatre cartes (demande d'Hervé du 22/10) : le chiffre de la dimension à la fin de chaque titre de
   détail, et à droite de chaque ligne du tableau « avant, après », dans la colonne zUFO⁴. En fin de titre plutôt qu'en
   tête, pour qu'on ne le prenne pas pour une numérotation de paragraphes. Dans les titres, le mot du type (réglable,
   liberté, mesurable) est souligné d'un trait de feutre (voir plus bas), qui le relie à son chiffre, et il prend la
   couleur de son titre (demande d'Hervé du 23/10 : souligné, il n'a plus besoin du bleu). */
.zufo4-dimensions h3 .dimension-type { color: inherit; }
/* Le trait de feutre (demande d'Hervé du 23/10, sur le modèle d'un site de référence) : un soulignement tracé comme au
   feutre, plus épais au milieu et relevé à la fin, au lieu du trait droit. Le dessin s'étire à la largeur des mots ; si
   les mots passent à la ligne, chaque morceau garde son trait. Il descend sous la ligne de base, sans toucher le corps
   des lettres. */
.trait-feutre,
.zufo4-dimensions h3 .dimension-type {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'%3E%3Cpath fill='%23d4264a' d='M3 13C55 12.6 130 12.2 195 11.2C238 10.4 272 8.2 297 4.2C299.5 3.8 300 6 297.5 7C272 13.2 238 16 195 17.2C130 18.6 55 18.4 3 16.4C.5 16 .5 13.4 3 13Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% .4em;
  padding-bottom: .16em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  text-decoration: none;
}
/* Sur une bande sombre (Technologie, « Le point de départ », 23/10), le trait prend le rouge éclairci du 4 de la
   tête, lisible sur le bleu, au lieu du rouge tempéré. */
.bande.sombre .trait-feutre {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'%3E%3Cpath fill='%23ff5470' d='M3 13C55 12.6 130 12.2 195 11.2C238 10.4 272 8.2 297 4.2C299.5 3.8 300 6 297.5 7C272 13.2 238 16 195 17.2C130 18.6 55 18.4 3 16.4C.5 16 .5 13.4 3 13Z'/%3E%3C/svg%3E");
}
/* Les chiffres 1 à 4 des dimensions portent le motif de la marque zUFO⁴, ses quatre coins (choix d'Hervé du 26/10) :
   le chiffre, dans la police du site, au milieu d'un cadre à quatre coins. Ils se reconnaissent ainsi partout comme les
   quatre dimensions, sur les cartes, après les titres de détail et dans le tableau, et ne se confondent ni avec un titre
   ni avec les étapes numérotées des pages ASCENT. Couleur : le rouge du site, jamais le rouge du logo tel quel (règle 2
   de la palette Indigo du 28/09) ; le rouge éclairci sur le bleu du tableau, où le rouge du site ne se lirait pas. Les
   coins sont huit dégradés unis (règle 5 : aucun vrai dégradé sur les petits éléments) qui prennent la couleur du
   chiffre. Les cartes de l'accueil les ont rejoints le 30/10 (.dimension-num, plus bas). */
.dimension-num, .dimension-chiffre, .dimension-renvoi {
  --trait: 3px;
  display: inline-grid;
  place-items: center;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  color: var(--vif);
  background:
    linear-gradient(currentColor, currentColor) 0 0 / 34% var(--trait) no-repeat,
    linear-gradient(currentColor, currentColor) 0 0 / var(--trait) 34% no-repeat,
    linear-gradient(currentColor, currentColor) 100% 0 / 34% var(--trait) no-repeat,
    linear-gradient(currentColor, currentColor) 100% 0 / var(--trait) 34% no-repeat,
    linear-gradient(currentColor, currentColor) 0 100% / 34% var(--trait) no-repeat,
    linear-gradient(currentColor, currentColor) 0 100% / var(--trait) 34% no-repeat,
    linear-gradient(currentColor, currentColor) 100% 100% / 34% var(--trait) no-repeat,
    linear-gradient(currentColor, currentColor) 100% 100% / var(--trait) 34% no-repeat;
}
.dimension-renvoi { --trait: 2px; width: 1.4em; height: 1.4em; font-size: .74em; margin-left: .45em; vertical-align: .1em; }
.tableau-comparatif .col-zufo .dimension-renvoi {
  float: right;
  width: 1.75em;
  height: 1.75em;
  margin: -.15em 0 0 .75em;
  font-size: .9em;
  vertical-align: 0;
  color: #ff5470;   /* le rouge éclairci du 4 de la tête, lisible sur le bleu */
}
/* Le texte réclame 16rem avant de se poser à côté du dessin : depuis le 22/10, l'étiquette porte le mot anglais
   (« zUFO⁴/A · Ankle Freedom »), et plus à l'étroit elle passait sur deux lignes et touchait le chiffre du coin
   (mesuré à 1 024 px). Une carte plus étroite pose son texte sous le dessin. */
.zufo4-dimensions .dimension-texte { flex-basis: 16rem; }
.zufo4-dimensions .dimension { position: relative; }
/* Au téléphone, dans une même section, chaque sujet n'est traité qu'une fois (règle d'Hervé du 02/11/2026, registre I-430) :
   les cartes s'y empilent, et 2 083 px séparaient la carte 1 de son texte. Le texte détaillé vient donc dans sa carte, à la
   place de la phrase courte, qu'il contient toujours, et le titre détaillé, qui redit la carte, s'efface. La devise conclut
   les quatre dimensions, puis viennent les paragraphes généraux. La page ne change pas : seul l'ordre d'affichage change,
   donc rien à écrire deux fois. */
@media (max-width: 40em) {
  .zufo4-dimensions { display: flex; flex-direction: column; }
  .zufo4-dimensions .dimensions { display: contents; }
  .zufo4-dimensions > h2 { margin-bottom: 1.75rem; }
  .zufo4-dimensions > h3, .zufo4-dimensions .dimension-phrase { display: none; }
  .zufo4-dimensions a.dimension {
    padding-bottom: 0;
    border-radius: var(--rayon-carte) var(--rayon-carte) 0 0;
    pointer-events: none;
  }
  .zufo4-dimensions > p { order: 10; }
  .zufo4-dimensions > h3 + p {
    max-width: none;
    margin: 0 0 calc(var(--texte-courant) * .875);
    padding: 12px calc(var(--texte-courant) * 1.25) calc(var(--texte-courant) * 1.25);
    border-radius: 0 0 var(--rayon-carte) var(--rayon-carte);
    background: var(--surface-carte);
    font-size: var(--texte-courant);
  }
  .zufo4-dimensions a.dimension:nth-child(1) { order: 1; }
  .zufo4-dimensions > #lean + p { order: 2; }
  .zufo4-dimensions a.dimension:nth-child(2) { order: 3; }
  .zufo4-dimensions > #ankle + p { order: 4; }
  .zufo4-dimensions a.dimension:nth-child(3) { order: 5; }
  .zufo4-dimensions > #flex + p { order: 6; }
  .zufo4-dimensions a.dimension:nth-child(4) { order: 7; }
  .zufo4-dimensions > #canting + p { order: 8; }
  .zufo4-dimensions > .manifeste { order: 9; margin-top: 1.5rem; }
}
.dimension-chiffre {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 46px;
  height: 46px;
  font-size: 24px;
}
/* Sur les cartes de l'accueil, le même chiffre dans ses quatre coins (demande d'Hervé du 30/10/2026, registre I-425 : la
   pastille ronde bleue n'avait pas suivi le choix du 26/10). Il garde sa place en haut à gauche, à côté du pictogramme,
   et il est un peu plus petit, comme la carte. */
.dimension-num { width: 40px; height: 40px; font-size: 21px; }

/* ---------- Les effets discrets (passe de finitions, 22/10/2026) ----------
   Choix C1 d'Hervé du 21/10 : une petite passe, sans programme, trois effets. Tous se coupent quand l'appareil du
   visiteur demande moins d'animations (réglage d'accessibilité), et un navigateur qui ne les connaît pas affiche
   simplement la page telle qu'avant. L'agrandissement des photos au clic attendra les photos du shooting. */

/* ① Les sections apparaissent en douceur au défilement : elles remontent de 32 px en entrant à l'écran, et leurs
   images se dévoilent en fondu. L'effet suit le défilement lui-même, sans minuterie : il s'achève quand les premiers
   pixels sont entrés à l'écran (220 pour une section, 160 pour une image), et ce qui est déjà visible au chargement
   s'affiche aussitôt. La tête de page n'est pas concernée.
   ⚠ Le texte ne passe jamais par la transparence : à moitié transparent, il se lit mal, et les contrôles
   d'accessibilité automatiques, ceux de Google compris, le comptent comme illisible (39 erreurs de contraste
   mesurées sur la FAQ au téléphone le 22/10, avec un fondu de toute la section). Les images, elles, le peuvent.
   Les deux animations ne décrivent que leur point de départ : l'arrivée est l'état normal de l'élément, ce qui
   garde par exemple l'opacité voulue des logos des soutiens. */
@keyframes apparition-douce { from { translate: 0 32px; } }
@keyframes apparition-image { from { opacity: 0; } }
@media screen and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    main > section:not(:first-child) {
      animation-name: apparition-douce;
      animation-fill-mode: both;
      animation-timing-function: ease-out;
      animation-timeline: view();
      animation-range: entry 0px entry 220px;
    }
    main > section:not(:first-child) img {
      animation-name: apparition-image;
      animation-fill-mode: both;
      animation-timing-function: linear;
      animation-timeline: view();
      animation-range: entry 0px entry 160px;
    }
  }
}

/* ② Ce qui se clique réagit au passage de la souris : les couleurs changent en douceur au lieu de basculer, les
   boutons se soulèvent d'un pixel, les cartes cliquables des quatre dimensions de trois. */
@media (prefers-reduced-motion: no-preference) {
  a, button, summary, label, input, select, textarea {
    transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease, opacity .18s ease;
  }
  .bouton, a.dimension {
    transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .22s ease, translate .22s ease;
  }
  @media (hover: hover) {
    .bouton:not(:disabled):hover { translate: 0 -1px; }
    a.dimension:hover { translate: 0 -3px; }
  }
  .bouton:active, a.dimension:active { translate: none; }
}

/* ③ Les photos d'en-tête font un zoom très lent, une seule fois : elles partent de 105 % et reviennent en 18 secondes
   au cadrage choisi, qui est donc aussi celui où elles s'arrêtent. */
@keyframes zoom-lent {
  from { scale: 1.05; }
  to { scale: 1; }
}
@media screen and (prefers-reduced-motion: no-preference) {
  .tete-photo-fond { animation: zoom-lent 18s ease-out both; }
}

/* ---------- Les médias du shooting du 30/10/2026 (plan A à G accepté par Hervé le 13/11/2026) ----------
   Photos et vidéos de l'exosquelette ASCENT. Sur les cartes bleues, une chaussure noire détourée n'avait aucun
   contraste au bord (mesuré à 1,0 le 13/11) : elle reçoit un halo qui suit son contour, choix d'Hervé du 13/11 (il a
   refusé la tache de lumière ronde, « un point blanc centré sur un objet qui n'est pas circulaire »). Mesuré avec ce
   halo : 2,2 au bord, 3,0 sur les parties les plus sombres. Il remplace l'ombre portée sombre de ces blocs. */
.mise-en-avant-image .halo-contour,
img.halo-contour {
  filter: drop-shadow(0 0 2px rgba(215, 225, 255, .95))
          drop-shadow(0 0 10px rgba(180, 198, 255, .75))
          drop-shadow(0 0 28px rgba(150, 175, 255, .5));
}
.mise-en-avant-image picture, .carte-image picture { display: contents; }
/* La rotation de l'accueil porte son halo DANS le fichier (13/11/2026) : calculé en direct par le navigateur sur une
   animation, il était coupé en rectangle et scintillait sur le côté chez Hervé et Vic. Plus aucun effet à calculer ici.
   Le fichier a une marge transparente où le halo s'éteint : on l'affiche plus haut et on reprend cette marge en
   marges négatives, pour que la chaussure garde sa taille et le bloc sa hauteur. */
.mise-en-avant-image img.halo-integre { filter: none; }
.section > .mise-en-avant .mise-en-avant-image img.halo-integre { max-height: 440px; margin-block: -40px; }

/* Les vidéos sur fond blanc (chausser, marcher, l'exosquelette seul) se posent sur les pages claires dans un encadré
   blanc arrondi : leur fond se confond avec lui. */
.media-encadre {
  margin: 0;
  padding: clamp(8px, 1.4vw, 16px);
  border-radius: var(--rayon-carte, 24px);
  background: var(--blanc);
}
.media-encadre video, .media-encadre img { display: block; width: 100%; height: auto; }
/* La jambe entre par le haut de l'image (vidéos où l'on chausse et où l'on marche) : pas de marge au-dessus, sinon
   elle semble coupée en l'air. */
.media-encadre.jambe { padding-top: 0; }

/* A · Page ASCENT, « Trois gestes » : les deux vidéos à la place du cadre « Illustration ». */
.gestes-medias {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(16px, 2.4vw, 28px);
  align-items: center;
  margin: clamp(24px, 3vw, 40px) 0;
}