/* CAP TDAH · charte « Crayon cabossé » 2.0, une couleur par visuel.
   Fond blanc cassé partout. Chaque bloc parle orange (le vécu, l'action) ou bleu (la science) ;
   les deux ensemble seulement dans un bloc duo (haut de l'accueil, Thierry et Chimok, le programme).
   Jamais de texte blanc sur orange : sur orange, le texte est en encre. */

/* police de secours calée sur la largeur de Lexend (mesurée le 2 novembre 2026 : Lexend est 8,7 % plus large qu'Arial en 400,
   5 % en gras) : quand Lexend arrive, les lignes ne se recoupent pas et la page ne saute pas (le haut de page sur téléphone) */
/* titres : Barlow Condensed fait 84 % de la largeur d'Arial Narrow et 64 % de celle d'Arial en gras (mesuré le 2 novembre 2026) */
@font-face { font-family: 'Barlow repli etroit'; src: local('Arial Narrow Bold'), local('ArialNarrow-Bold'); size-adjust: 84%; }
@font-face { font-family: 'Barlow repli'; src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Neue Bold'), local('Roboto Bold'); size-adjust: 64%; }
@font-face { font-family: 'Lexend repli'; src: local('Arial'), local('Helvetica Neue'), local('Helvetica'), local('Roboto'); font-weight: 100 549; size-adjust: 109%; }
@font-face { font-family: 'Lexend repli'; src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Neue Bold'), local('Roboto Bold'); font-weight: 550 900; size-adjust: 105%; }
:root {
  --fond: #F8F7F7;          /* blanc cassé */
  --surface: #FFFFFF;       /* cartes posées sur le fond */
  --encre: #222323;
  --gris: #5F5E5C;          /* légendes, sources : 6,1:1 sur le fond */
  --ligne: #E3E1DE;
  --orange: #ED6F1D;        /* formes et fonds seulement, jamais de texte */
  --orange-texte: #B44F0B;  /* orange lisible pour le texte sur fond clair */
  --nuance-orange: #F6E4D8;
  --bleu: #3056A3;
  --nuance-bleue: #E0E4ED;

  --titre: 'Barlow Condensed', 'Barlow repli etroit', 'Barlow repli', 'Arial Narrow', sans-serif;
  --texte: 'Lexend', 'Lexend repli', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --main: 'Gochi Hand', 'Comic Sans MS', cursive;

  --rayon: 16px;
  --largeur: 1160px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--fond); color: var(--encre); font-family: var(--texte); font-size: 17px; line-height: 1.6; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--bleu); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3, p, ul, ol, blockquote, figure { margin: 0; }
h2 { text-wrap: balance; }
p, li { text-wrap: pretty; }

.lien-evitement { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--encre); color: var(--fond); padding: 10px 16px; border-radius: 999px; }
.lien-evitement:focus { top: 12px; color: var(--fond); }
.conteneur { max-width: var(--largeur); margin: 0 auto; padding: 0 20px; }
.etroit { max-width: 760px; }

/* ---------- typographie ---------- */
.titre-1, .titre-2, .titre-3 { font-family: var(--titre); font-weight: 800; text-transform: uppercase; letter-spacing: 0.005em; line-height: 1; }
.titre-1 { font-size: clamp(46px, 6vw, 72px); line-height: 0.96; }
.titre-2 { font-size: clamp(36px, 4.2vw, 52px); }
.titre-3 { font-size: clamp(24px, 2.2vw, 30px); }
.surtitre { font-family: var(--main); font-size: 23px; line-height: 1.15; color: var(--orange-texte); }
.eyebrow { font-family: var(--titre); font-weight: 700; font-size: 15px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange-texte); }
.annotation { font-family: var(--main); font-weight: 400; font-size: clamp(22px, 2vw, 27px); line-height: 1.15; color: var(--orange-texte); }
.annotation--bleu, .surtitre--bleu { color: var(--bleu); }
.annotation--encre { color: var(--encre); }
.chapeau { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.55; max-width: 36em; }
.discret { color: var(--gris); }
.petit { font-size: 14px; line-height: 1.5; }
.souligne-main { position: relative; display: inline-block; color: var(--orange-texte); }
.souligne-main svg { position: absolute; left: -2%; bottom: -16px; width: 104%; height: auto; }
.hero__gratuit { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.annotation--fleche { display: inline-flex; align-items: center; gap: 4px; }
.annotation--fleche svg { width: 54px; height: auto; flex: none; margin-top: -10px; }
.vecu { color: var(--orange-texte); }
.science { color: var(--bleu); }

/* ---------- boutons : pilule, écriture manuscrite (charte 2.0) ---------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 6px 26px; border: 2.5px solid var(--encre); border-radius: 999px;
  font-family: var(--main); font-size: 22px; line-height: 1.1; text-align: center;
  color: var(--encre); background: transparent; text-decoration: none; cursor: pointer;
  transition: transform .15s ease, background-color .15s ease;
}
.bouton:hover { color: var(--encre); background: var(--surface); transform: translateY(-1px); }
.bouton--action { background: var(--orange); border-color: var(--orange); }   /* texte encre sur orange */
.bouton--action:hover { background: var(--orange); }
.bouton--bleu { background: var(--bleu); border-color: var(--bleu); color: var(--fond); }
.bouton--bleu:hover { background: var(--bleu); color: var(--fond); }
.bouton--encre { background: var(--encre); border-color: var(--encre); color: var(--fond); }
.bouton--encre:hover { background: var(--encre); color: var(--fond); }
.bouton--large { width: 100%; min-height: 60px; font-size: clamp(24px, calc(1vw + 15px), 29px); }
.bouton--petit { min-height: 44px; padding: 4px 20px; font-size: 20px; }
@media (prefers-reduced-motion: reduce) { .bouton { transition: none; } .bouton:hover { transform: none; } }

/* ---------- en-tête ---------- */
.entete { position: sticky; top: 0; z-index: 30; background: var(--fond); border-bottom: 1px solid var(--ligne); }
.entete__ligne { display: flex; align-items: center; gap: 10px 26px; min-height: 72px; padding-top: 8px; padding-bottom: 8px; }
.entete__logo { flex: none; line-height: 0; }
.entete__logo img { width: 80px; }
.nav { flex: 1 1 auto; display: flex; justify-content: flex-end; gap: 0 24px; white-space: nowrap; }
.nav a { font-family: var(--titre); font-weight: 700; font-size: 16px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--encre); text-decoration: none; padding: 10px 0; }
.nav a:hover, .nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 3px; text-underline-offset: 6px; }
@media (max-width: 1080px) {
  .entete { position: static; }
  .entete__ligne { flex-wrap: wrap; }
  .entete__bouton { margin-left: auto; }
  .nav { order: 3; flex: 1 1 100%; justify-content: flex-start; overflow-x: auto; gap: 0 20px; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
}

/* ---------- sections ---------- */
.section { padding: clamp(56px, 7vw, 96px) 0; }
.section--trait { border-top: 1px solid var(--ligne); }
.section--orange { background: var(--nuance-orange); }   /* bloc en voix orange */
.section--bleue { background: var(--nuance-bleue); }     /* bloc en voix bleue */
.section--colle { padding-top: 0; }
.pile { display: flex; flex-direction: column; gap: 32px; }
.pile--serre { gap: 14px; }
.entete-section { display: flex; flex-direction: column; gap: 12px; max-width: 800px; }
.entete-section p:not(.annotation):not(.surtitre):not(.fil):not(.eyebrow) { font-size: 18px; }
.grille { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 260px), 100%), 1fr)); }
.deux-colonnes { display: flex; flex-wrap: wrap; align-items: center; gap: 40px 56px; }
.deux-colonnes > * { flex: 1 1 420px; min-width: 0; }

/* ---------- cartes ---------- */
.carte { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 22px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.carte--orange { background: var(--nuance-orange); border-color: transparent; }
.carte--bleue { background: var(--nuance-bleue); border-color: transparent; }
.carte--trait-orange { border: 2px solid var(--orange); }
.carte--trait-bleu { border: 2px solid var(--bleu); }
.carte h3 { font-size: 19px; line-height: 1.3; font-weight: 600; }
.carte p:not(.annotation):not(.eyebrow) { font-size: 16px; line-height: 1.55; }
.carte .titre-carte { font-family: var(--titre); font-weight: 800; font-size: 26px; line-height: 1; text-transform: uppercase; }
.carte--bleue .titre-carte { color: var(--bleu); }
.lien-fleche { font-weight: 600; }
.carte--orange .lien-fleche { color: var(--encre); }

/* premier écran (bloc duo) */
.hero { padding: clamp(36px, 5vw, 72px) 0 clamp(48px, 6vw, 88px); }
.hero__texte { flex: 1.15 1 480px; display: flex; flex-direction: column; gap: 20px; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }
.hero__visuel img { width: 100%; max-width: 560px; margin: 0 auto; }
.coches { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 10px 22px; font-size: 15px; line-height: 1.45; }
.coches li { display: flex; gap: 9px; align-items: flex-start; }
.coches svg { flex: none; margin-top: 1px; }
.hero__visuel .calque { position: relative; max-width: 560px; margin: 0 auto; }
.hero__visuel .calque > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.preuve { display: flex; gap: 12px; align-items: center; font-size: 14px; line-height: 1.45; color: var(--gris); max-width: 36em; }
.preuve img { flex: none; width: 44px; height: 44px; }

/* douleurs (voix orange) : picto au-dessus sur ordinateur, à côté sur téléphone */
.douleur { flex-flow: row wrap; align-items: flex-start; gap: 12px 14px; padding: 20px; border-color: transparent; }
.douleur img { flex: none; width: 96px; height: 96px; margin: -10px -6px -6px -8px; }
.douleur__texte { flex: 1 1 150px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.douleur h3 { font-size: 18px; }
.douleur p:not(.annotation) { font-size: 15px; color: var(--gris); }

/* duo */
.duo-cartes { position: relative; }
.duo-lien { display: none; }
@media (min-width: 760px) {
  .duo-cartes { padding-top: 92px; }
  .duo-lien { display: block; position: absolute; top: 0; left: 50%; width: min(42%, 330px); transform: translateX(-50%); }
  .duo-lien svg { width: 100%; height: auto; display: block; }
}
.personne { padding: 28px; gap: 16px; }
.personne__tete { display: flex; align-items: center; gap: 18px; }
.personne__tete img { width: 108px; height: 108px; border-radius: 50%; object-fit: cover; border: 3px solid currentColor; flex: none; }
.personne__nom { font-family: var(--titre); font-weight: 800; font-size: 32px; line-height: 1; text-transform: uppercase; color: var(--encre); }
.puces { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 16px; line-height: 1.45; }
.puces li { display: flex; gap: 10px; }
.puces li::before { content: ""; flex: none; width: 9px; height: 9px; margin-top: 7px; border-radius: 50%; background: var(--puce, var(--encre)); }
.puces--bleu { --puce: var(--bleu); }
.puces--orange { --puce: var(--orange); }
.encart { padding: 16px 18px; border-radius: 12px; font-size: 18px; line-height: 1.45; font-weight: 500; }
.encart--bleu { background: var(--nuance-bleue); color: var(--bleu); }
.encart--orange { background: var(--nuance-orange); color: var(--encre); }

/* programme (bloc duo) : chaque module a sa moitié bleue (science) et sa moitié orange (vécu) */
.modules { list-style: none; padding: 0; --min: 300px; }
.module { padding: 0; gap: 0; overflow: hidden; }
.module__num { display: flex; align-items: center; gap: 10px; padding: 12px 20px 10px; font-family: var(--titre); font-weight: 800; font-size: 22px; letter-spacing: 0.04em; text-transform: uppercase; }
.module__num svg { flex: none; }
.module__partie { flex: 1; padding: 14px 20px 16px; font-size: 17px; line-height: 1.35; font-weight: 600; }
.module__partie span { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 13px; font-weight: 500; }
.module__partie span::before { content: ""; width: 9px; height: 9px; border-radius: 50%; flex: none; }
.module__partie--science { background: var(--nuance-bleue); }
.module__partie--science span { color: var(--bleu); }
.module__partie--science span::before { background: var(--bleu); }
.module__partie--vecu { background: var(--nuance-orange); }
.module__partie--vecu span::before { background: var(--orange); }
.etapes { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.etapes li { display: flex; gap: 14px; align-items: flex-start; }
.etapes svg { flex: none; margin-top: -4px; }
/* un module pas à pas (bloc duo) : schéma en ligne sur ordinateur, en colonne sur téléphone ; les étapes arrivent en 2 s */
.schema-module { --pas: .5s; padding: clamp(20px, 3vw, 32px); gap: 6px; }
.carte.schema-module h3 { font-size: clamp(24px, 2.2vw, 30px); font-weight: 800; }
.schema-module svg { width: 100%; height: auto; display: block; }
.schema-module__h { max-width: 820px; margin: 0 auto; }
.schema-module__v { display: none !important; max-width: 340px; }
@media (max-width: 640px) { .schema-module__h { display: none !important; } .schema-module__v { display: block !important; } }
.js [data-anim] .ouvre { transition: transform .45s cubic-bezier(.34,1.56,.5,1) var(--retard, 0s); }
.js [data-anim]:not(.vu) .ouvre { transform: none !important; }
/* aperçu d'une fiche récap */
.fiche-apercu { margin: 8px 0 0; display: flex; align-items: flex-end; gap: 4px 14px; flex-wrap: wrap; }
.fiche-apercu img { width: 168px; border-radius: 6px; box-shadow: 0 6px 18px rgba(34, 35, 35, .14); transform: rotate(-3deg); background: var(--surface); }
.fiche-apercu figcaption { font-size: 22px; max-width: 9em; }
/* l'app, dessinée : trois écrans en éventail (en ligne qui défile sur téléphone) */
.ecrans { flex: 1 1 460px; display: grid; grid-template-columns: 1fr 1.18fr 1fr; align-items: end; max-width: 620px; margin: 0 auto; padding-top: 12px; }
.ecran svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 8px 14px rgba(34, 35, 35, .12)); }
.ecran--gauche { margin-right: -16%; transform: rotate(-5deg) translateY(4%); }
.ecran--centre { position: relative; z-index: 1; }
.ecran--droite { margin-left: -16%; transform: rotate(5deg) translateY(4%); }
.ecrans__note { grid-column: 1 / -1; text-align: center; margin-top: 18px; }
@media (max-width: 560px) {
  .ecrans { display: flex; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; padding: 12px 4px 4px; }
  .ecran, .ecran--centre { flex: none; width: 72%; margin: 0; transform: none; scroll-snap-align: center; }
  .ecran--centre { order: -1; }
  .ecrans__note { display: none; }
}

/* concrètement (voix orange) */
.lou { flex: 0 1 240px; display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0 auto; text-align: center; }
.lou img { max-width: 230px; }
.lou__dessin { position: relative; width: 230px; max-width: 100%; }
.lou__declic { position: absolute; left: 40%; top: 1%; width: 20%; }
.lou__declic svg { width: 100%; height: auto; display: block; }
.outils { flex: 1 1 560px; --min: 320px; }

/* prix (voix orange) */
.prix { display: flex; flex-wrap: wrap; gap: 28px; align-items: stretch; }
.offre { position: relative; flex: 1.35 1 400px; min-width: 0; background: var(--surface); border: 2.5px solid var(--encre); border-radius: 22px; padding: clamp(20px, 2.4vw, 30px); display: flex; flex-direction: column; gap: 12px; }
.offre__sticker { position: absolute; top: -58px; right: -12px; width: 112px; transform: rotate(5deg); }
.offre__montant { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; }
.offre__prix { font-family: var(--titre); font-weight: 800; font-size: clamp(60px, 6vw, 78px); line-height: 0.9; }
.offre__fois { font-size: 22px; font-weight: 600; color: var(--orange-texte); }
.offre__inclus { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 6px 18px; font-size: 15px; line-height: 1.4; }
.offre__inclus li { display: flex; gap: 10px; }
.offre__inclus svg { flex: none; margin-top: 1px; }
.offre__bas { margin-top: auto; padding-top: 4px; display: flex; flex-direction: column; gap: 8px; text-align: center; }
.offre h3 { font-size: 20px !important; }
.offre .bouton--large { min-height: 54px; }
.garanties { gap: 12px; }
.garantie { padding: 18px; }
.garanties { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.garantie { flex-direction: row; gap: 14px; align-items: flex-start; border-color: transparent; }
.garantie svg { flex: none; margin-top: -4px; }
.garantie h3 { font-family: var(--titre); font-weight: 800; font-size: 24px; line-height: 1; text-transform: uppercase; }
.garantie p:not(.annotation) { font-size: 15px; }
.infos { list-style: none; padding: 0; --min: 260px; gap: 12px 24px; font-size: 15px; line-height: 1.5; }
.infos li { border-top: 2px dotted var(--encre); padding-top: 10px; }

/* témoignages (voix orange) */
.temoignages { --min: 300px; gap: 18px; }
.temoignage blockquote { font-size: 16px; line-height: 1.55; }
.temoignage cite { font-style: normal; font-size: 14px; font-weight: 600; color: var(--gris); }
.temoignage--vedette { grid-row: span 2; justify-content: center; gap: 18px; padding: 30px; }
.temoignage--vedette blockquote { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.3; font-weight: 500; }
.temoignage--vedette cite { font-size: 15px; color: var(--encre); }
.guillemet { width: 40px; height: 34px; }
.temoignage--vedette .guillemet { width: 56px; height: 47px; }
.lien-video { display: inline-flex; align-items: center; gap: 12px; font-weight: 600; color: var(--encre); text-decoration: none; line-height: 1.35; }
.lien-video svg { flex: none; transition: transform .2s ease; }
.lien-video:hover span { text-decoration: underline; text-decoration-thickness: 2px; }
.lien-video:hover svg { transform: scale(1.08); }
.note-avis { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px; font-weight: 600; color: var(--encre); }
@media (prefers-reduced-motion: reduce) { .lien-video svg { transition: none; } .lien-video:hover svg { transform: none; } }

/* pour qui (voix bleue) */
.pas-ca { background: var(--surface); border: 2px dashed var(--bleu); border-radius: 20px; padding: clamp(20px, 3vw, 30px); display: flex; flex-direction: column; gap: 12px; }
.pas-ca ul { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 10px 28px; font-size: 16px; line-height: 1.5; }

/* questions (voix bleue) */
.faq-mise-en-page { display: flex; flex-wrap: wrap; gap: 32px 56px; }
.faq-mise-en-page__cote { flex: 0 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.faq-mise-en-page__cote img { width: 190px; transform: rotate(-4deg); }
.faq-mise-en-page__liste { flex: 1 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.question h3 { font-size: 19px; line-height: 1.35; }
details.question { padding: 0; }
details.question summary { list-style: none; cursor: pointer; padding: 20px 56px 20px 22px; position: relative; font-size: 18px; font-weight: 600; line-height: 1.35; }
details.question summary::-webkit-details-marker { display: none; }
details.question summary::after { content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font-family: var(--titre); font-weight: 800; font-size: 30px; color: var(--bleu); }
details.question[open] summary::after { content: "−"; }
details.question .reponse { padding: 0 22px 22px; display: flex; flex-direction: column; gap: 10px; }
details.question summary:hover { color: var(--bleu); }
details.question[open] { border-color: var(--bleu); }
details.question[open] .reponse { animation: capReponse .25s ease; }
@keyframes capReponse { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { details.question[open] .reponse { animation: none; } }
/* page questions : thèmes, un picto chacun, sommaire collé à gauche sur ordinateur */
.theme-questions { display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 96px; }
.theme-questions + .theme-questions { margin-top: 26px; }
.theme-questions__titre { display: flex; align-items: center; gap: 12px; font-family: var(--titre); font-weight: 800; font-size: clamp(26px, 2.6vw, 32px); line-height: 1; text-transform: uppercase; color: var(--bleu); }
.theme-questions__titre svg { flex: none; }
.themes { display: flex; flex-direction: column; gap: 6px; }
.themes a { display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 6px; border-radius: 12px; color: var(--encre); font-weight: 600; font-size: 16px; text-decoration: none; }
.themes a:hover { background: var(--nuance-bleue); }
.themes svg { flex: none; }
@media (min-width: 900px) { .faq-mise-en-page__cote--colle { position: sticky; top: 92px; align-self: flex-start; } }
@media (max-width: 899px) { .themes { flex-flow: row wrap; } .faq-mise-en-page__cote--colle img { display: none; } }

/* page contact (voix orange) */
.contact { display: flex; flex-wrap: wrap; gap: 32px 56px; align-items: flex-start; }
.contact__intro { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.contact__sticker { width: 170px; transform: rotate(-4deg); }
.contact__carte { flex: 1.2 1 440px; min-width: 0; padding: clamp(22px, 3vw, 34px); gap: 16px; border: 2.5px solid var(--encre); border-radius: 22px; }
.contact__email { font-size: clamp(22px, 3.2vw, 30px); font-weight: 600; color: var(--orange-texte); overflow-wrap: anywhere; user-select: all; }
.contact__boutons { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }
.contact__copie:empty { display: none; }
.contact__sujets { display: flex; flex-direction: column; gap: 10px; border-top: 2px dotted var(--encre); padding-top: 16px; }
.sujets { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sujet { display: inline-block; padding: 7px 14px; border: 2px solid var(--ligne); border-radius: 999px; background: var(--surface); color: var(--encre); font-size: 15px; font-weight: 500; text-decoration: none; }
.sujet:hover { border-color: var(--orange); }
.sujet:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.champ { display: flex; flex-direction: column; gap: 6px; }
.champ label { font-weight: 600; }
.champ input, .champ select, .champ textarea { width: 100%; min-height: 50px; padding: 12px 16px; border: 2px solid var(--encre); border-radius: 14px; font: inherit; font-size: 16px; background: var(--surface); color: var(--encre); }
.champ textarea { resize: vertical; min-height: 160px; line-height: 1.5; }
.champ input:focus-visible, .champ select:focus-visible, .champ textarea:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.formulaire-contact__bas { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.raccourcis { list-style: none; padding: 0; --min: 240px; }
.raccourci { flex-direction: row; align-items: flex-start; gap: 14px; height: 100%; color: var(--encre); text-decoration: none; border-color: transparent; background: var(--nuance-orange); }
.raccourci svg { flex: none; }
.raccourci span { display: flex; flex-direction: column; gap: 4px; font-size: 15px; line-height: 1.45; }
.raccourci strong { font-size: 17px; }
.raccourci:hover strong { text-decoration: underline; text-decoration-thickness: 2px; }

/* la fleur (voix bleue) */
.encadre { background: var(--surface); border: 2px solid var(--bleu); border-radius: 24px; padding: clamp(24px, 4vw, 48px); }
.encadre .fleur-illu { width: 100%; max-width: 460px; margin: 0 auto; }
/* bas de l'accueil : la fleur complète de Thierry prend plus de place que le texte */
.encadre--fleur > .pile { flex: 0 1 340px; }
.encadre--fleur .fleur-illu { flex: 1 1 520px; max-width: 700px; }
.fleur-illu svg { width: 100%; height: auto; display: block; }

/* liste d'attente et formulaires */
.attente { border-top: 1px solid var(--ligne); padding: 36px 0; }
.formulaire { display: flex; flex-wrap: wrap; gap: 10px; }
.formulaire input[type="email"] { flex: 1 1 220px; min-width: 0; min-height: 52px; padding: 0 20px; border: 2px solid var(--encre); border-radius: 999px; font: inherit; font-size: 16px; background: var(--surface); color: var(--encre); }
.formulaire input[type="email"]::placeholder { color: #7A7875; }
.formulaire__message { flex-basis: 100%; font-size: 14px; color: var(--gris); }
.visuellement-cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- pages de contenu (blog, légal) : voix bleue pour le blog ---------- */
.fil { font-size: 14px; color: var(--gris); }
.fil a { color: var(--gris); }
.prose { font-size: 18px; line-height: 1.7; overflow-wrap: anywhere; }
.prose > * + * { margin-top: 1em; }
.prose h2 { font-family: var(--titre); font-weight: 800; text-transform: uppercase; font-size: clamp(28px, 3vw, 36px); line-height: 1.05; margin-top: 1.8em; }
.prose h3 { font-size: 21px; line-height: 1.3; font-weight: 600; margin-top: 1.5em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 0.4em; }
.prose li::marker { color: var(--bleu); }
.prose blockquote { border-left: 4px solid var(--bleu); padding: 4px 0 4px 18px; font-weight: 500; }
.prose table { border-collapse: collapse; width: 100%; font-size: 16px; }
.prose th, .prose td { border: 1px solid var(--ligne); padding: 8px 10px; text-align: left; vertical-align: top; }
.sources { font-size: 14px; line-height: 1.55; color: var(--gris); }
.sources p + p { margin-top: 8px; }
.sources a { color: var(--gris); word-break: break-word; }
.a-completer { background: var(--nuance-orange); outline: 1.5px dashed var(--orange); padding: 0 5px; border-radius: 4px; font-weight: 600; }
.episodes { list-style: none; padding: 0; --min: 320px; }
.episode { padding: 0; overflow: hidden; }
.episode a { color: var(--encre); text-decoration: none; display: flex; flex-direction: column; gap: 8px; padding: 0 22px 22px; height: 100%; }
.episode__vignette { width: calc(100% + 44px); max-width: none; margin: 0 -22px 6px; aspect-ratio: 16 / 9; object-fit: cover; border-bottom: 1px solid var(--ligne); }
/* schémas du blog : posés dans l'article, en pleine largeur de texte */
.prose figure.schema { margin: 1.8em 0; }
.prose figure.schema img { width: 100%; border-radius: 14px; border: 1px solid var(--ligne); background: var(--surface); }
.prose figure.schema figcaption { margin-top: 8px; font-size: 15px; line-height: 1.45; color: var(--gris); text-align: center; }
.episode a:hover h2 { text-decoration: underline; text-decoration-color: var(--bleu); }
.episode__jour { font-family: var(--main); font-size: 22px; color: var(--bleu); }
.episode h2 { font-size: 20px; line-height: 1.3; font-weight: 600; }
.episode p { font-size: 15px; color: var(--gris); }
.fin-article { margin-top: 56px; }

/* outil fleur (voix bleue) */
/* encart : l'outil sert à démarrer, la vraie fleur se dessine à la main */
/* la fleur reste visible pendant qu'on règle : à droite sur ordinateur, collée en haut sur téléphone */
.outil-fleur { display: flex; gap: 32px 48px; align-items: flex-start; }
.outil-fleur__reglages { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.outil-fleur__dessin { flex: 1.1 1 0; min-width: 0; text-align: center; position: sticky; top: 90px; }
.outil-fleur__dessin svg { width: 100%; max-width: 500px; height: auto; margin: 0 auto; display: block; }
#resume-fleur { font-weight: 600; margin-top: 8px; }
.reglages { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.reglages__titre { padding: 0; margin-bottom: 4px; font-family: var(--titre); font-weight: 800; font-size: 26px; line-height: 1; text-transform: uppercase; }
.reglages__groupe { border: 0; margin: 0; padding: 0; min-width: 0; }
.reglages__groupe legend { padding: 0; margin-bottom: 10px; font-weight: 600; color: var(--bleu); }
.nuancier, .formes { display: flex; flex-wrap: wrap; gap: 10px; }
.pastille, .forme { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; }
.pastille input, .forme input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pastille span { width: 40px; height: 40px; border-radius: 50%; background: var(--f); border: 5px solid var(--c); box-shadow: 0 0 0 3px var(--fond); }
.pastille span.pastille--multi { border: 0; background: conic-gradient(#3056A3 0 72deg, #ED6F1D 0 144deg, #3F7D5C 0 216deg, #C2456E 0 288deg, #6A4FA3 0); }
.pastille b, .forme b { font-size: 12px; font-weight: 500; color: var(--gris); }
.pastille input:checked + span { outline: 3px solid var(--encre); outline-offset: 2px; }
.forme svg { width: 58px; height: 58px; padding: 4px; border: 2px solid var(--ligne); border-radius: 14px; background: var(--surface); }
.forme input:checked + svg { border-color: var(--encre); box-shadow: 0 0 0 1px var(--encre); }
/* le pétale qu'on habille : pastilles à choisir, ou clic sur le pétale dans le dessin */
.reglages__aide { font-size: 15px; color: var(--gris); margin-top: -8px; }
.cibles { display: flex; flex-wrap: wrap; gap: 8px; }
.cible { position: relative; cursor: pointer; }
.cible input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cible span { display: inline-block; padding: 7px 14px; border: 2px solid var(--ligne); border-radius: 999px; background: var(--surface); font-size: 15px; font-weight: 500; }
.cible input:checked + span { border-color: var(--encre); background: var(--encre); color: var(--fond); }
.cible input:focus-visible + span { outline: 3px solid var(--orange); outline-offset: 2px; }
#dessin-fleur .petale-outil { cursor: pointer; }
.pastille input:focus-visible + span, .forme input:focus-visible + svg { outline: 3px solid var(--orange); outline-offset: 3px; }
@media (max-width: 760px) {
  .outil-fleur { flex-direction: column; align-items: stretch; }
  /* la fleur reste collée en haut : un trait et une ombre douce la détachent des réglages qui défilent dessous,
     sinon son sol (de la couleur du fond) s'y fond et on se perd */
  .outil-fleur__dessin { order: -1; top: 0; z-index: 5; background: var(--fond); margin: 0 -20px; padding: 6px 20px 4px; border-bottom: 2px solid #D2CEC9; box-shadow: 0 10px 12px -10px rgba(34, 35, 35, .3); }
  .outil-fleur__dessin svg { max-height: 38vh; }
  /* sur téléphone, le résumé reste lu par les lecteurs d'écran mais ne prend pas de place dans la bande collée */
  #resume-fleur { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .outil-fleur__suite { display: none; }
}
.curseur label { display: flex; justify-content: space-between; gap: 12px; font-weight: 600; color: var(--bleu); }
.curseur output { font-family: var(--titre); font-weight: 800; font-size: 22px; color: var(--encre); min-width: 2ch; text-align: right; }
.curseur input[type="range"] { width: 100%; accent-color: var(--bleu); height: 32px; }
.curseur__bornes { display: flex; justify-content: space-between; font-size: 13px; color: var(--gris); }
.petale-extremes { padding: clamp(20px, 3vw, 32px); gap: 14px; }
.petale-extremes svg { width: 100%; max-width: 640px; height: auto; display: block; margin: 0 auto; }

/* conférence : la miniature du replay, cliquable */
.miniature-video { display: block; border-radius: 18px; overflow: hidden; box-shadow: 0 10px 28px rgba(34, 35, 35, .16); transition: transform .2s ease; }
.miniature-video:hover { transform: translateY(-2px) rotate(-.4deg); }
@media (prefers-reduced-motion: reduce) { .miniature-video { transition: none; } .miniature-video:hover { transform: none; } }

/* page introuvable : Lou perdue, la boussole cherche */
.page-perdue { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 56px; }
.page-perdue__dessin { position: relative; flex: 0 1 300px; margin: 0 auto; }
.page-perdue__dessin img { width: 100%; }
.page-perdue__boussole { position: absolute; right: -6%; bottom: 8%; width: 34%; }
.page-perdue__boussole svg { width: 100%; height: auto; display: block; }
.page-perdue > .pile { flex: 1 1 380px; }

/* feuille A4 « Ma fleur TDAH » : n'existe qu'à l'impression */
.imprimer-seulement { display: none; }

/* ---------- pied de page : bandeau bleu, logo blanc ---------- */
.pied { background: var(--bleu); color: var(--fond); padding: 56px 0 36px; font-size: 15px; line-height: 1.7; }
.pied a { color: var(--fond); }
.pied__grille { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.pied__grille > div, .pied__grille > nav { display: flex; flex-direction: column; }
.pied__titre { font-family: var(--titre); font-weight: 700; font-size: 16px; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 6px; }
.pied__logo { width: 104px; margin-bottom: 12px; }
.pied__bas { margin-top: 28px; padding-top: 18px; border-top: 1px solid rgba(248, 247, 247, 0.35); font-size: 13px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; }

/* ---------- bannière de cookies (cookies.js) : seulement quand un identifiant de mesure est renseigné dans build.py ----------
   Une carte posée en bas à gauche, présente dans les deux modes, en position fixe (elle ne pousse rien). Pendant qu'elle est
   ouverte, la barre du bas des téléphones s'efface.
   Les deux boutons (7/11/2026) : même taille, même forme, même police, même trait, même ombre, côte à côte, un clic chacun
   (CNIL : refuser aussi simplement qu'accepter, « même niveau, même format »). Seule la couleur change : Tout accepter en
   orange, la couleur d'action du site ; Tout refuser en blanc, trait et texte encre, parfaitement lisible (contraste 15:1 ;
   5,2:1 pour l'encre sur l'orange). Pas d'animation pour pousser à accepter. */
.cookies { position: fixed; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 40; width: min(420px, calc(100vw - 32px));
  display: flex; flex-direction: column; gap: 12px; padding: 16px 18px 18px; background: var(--surface); color: var(--encre);
  border: 2px solid var(--encre); border-radius: 20px; box-shadow: 0 10px 28px rgba(34, 35, 35, .18); }
.cookies[hidden] { display: none; }
.cookies__texte { font-size: 15px; line-height: 1.5; }
.cookies__texte strong { font-weight: 600; }
.cookies__texte a { color: inherit; font-weight: 600; }
.cookies__boutons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cookies__boutons .bouton { width: 100%; font-size: 18px; padding: 4px 12px; border: 2.5px solid var(--encre); color: var(--encre);
  box-shadow: 0 3px 0 var(--encre); transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; }
.cookies__boutons .bouton:hover { transform: translateY(-2px); box-shadow: 0 5px 0 var(--encre); }
.cookies__boutons .bouton:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--encre); }
.cookies__boutons .cookies__refuser, .cookies__boutons .cookies__refuser:hover { background: var(--surface); }
.cookies__boutons .cookies__accepter, .cookies__boutons .cookies__accepter:hover { background: var(--orange); }
@media (prefers-reduced-motion: reduce) { .cookies__boutons .bouton:hover, .cookies__boutons .bouton:active { transform: none; } }
.vivant .cookies { animation: capCookies .5s cubic-bezier(.34,1.3,.5,1); }
@keyframes capCookies { from { translate: 0 calc(100% + 30px); } }
.cookies-ouvert .barre-mobile { visibility: hidden; }
.pied__cookies { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
@media (max-width: 760px) { .cookies { left: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); width: calc(100vw - 20px); } }
@media (prefers-reduced-motion: reduce) { .vivant .cookies { animation: none; } }
/* le cookie (7/11/2026) : accroché au bord de la carte, il en sort en haut à droite. Trois visages : en attente, au survol de
   Tout accepter (miam, merci !), au survol de Tout refuser (pas de souci !). Les boutons, eux, ne changent pas (CNIL). */
.cookies .cookie { position: absolute; right: 6px; top: -112px; width: 353px; height: 121px; pointer-events: none; overflow: visible; }
.cookie .cookie--oui, .cookie .cookie--non { opacity: 0; }
.cookies:has([data-cookies-choix="oui"]:hover, [data-cookies-choix="oui"]:focus-visible) .cookie .cookie--attente,
.cookies:has([data-cookies-choix="non"]:hover, [data-cookies-choix="non"]:focus-visible) .cookie .cookie--attente { opacity: 0; }
.cookies:has([data-cookies-choix="oui"]:hover, [data-cookies-choix="oui"]:focus-visible) .cookie .cookie--oui { opacity: 1; }
.cookies:has([data-cookies-choix="non"]:hover, [data-cookies-choix="non"]:focus-visible) .cookie .cookie--non { opacity: 1; }
.cookie .cookie__visage, .cookie .cookie__mot, .cookie .cookie__coeurs, .cookie .cookie__miettes { transition: opacity .15s; }
/* avec la vision TDAH : il sort de derrière la carte, cligne des yeux, les cœurs montent ; sans elle, il ne bouge pas */
.vivant .cookie__corps { animation: cookieSort .6s cubic-bezier(.34, 1.4, .5, 1) .35s both; }
@keyframes cookieSort { from { translate: 0 46px; } }
.vivant .cookie__yeux { transform-box: fill-box; transform-origin: center; animation: cookieCligne 4.6s 1.4s infinite; }
@keyframes cookieCligne { 0%, 94%, 100% { scale: 1 1; } 97% { scale: 1 .1; } }
.vivant .cookie__coeurs { transform-box: fill-box; transform-origin: center bottom; }
.vivant .cookies:has([data-cookies-choix="oui"]:hover) .cookie__coeurs { animation: cookieCoeurs .9s ease-out; }
@keyframes cookieCoeurs { from { translate: 0 8px; scale: .6; } }
@media (prefers-reduced-motion: reduce) { .vivant .cookie__corps, .vivant .cookie__yeux, .vivant .cookie__coeurs { animation: none; } }
@media (max-width: 380px) { .cookies .cookie { width: 290px; height: 99px; top: -92px; } }

/* ---------- barre du bas sur téléphone (navigation.js) ----------
   Une bulle posée en bas de l'écran qui raconte la page : une phrase par section, le prix seulement à partir du bloc prix.
   Cachée en haut de page, pendant la saisie d'un champ et sur le pied de page. Sans JavaScript, elle ne s'affiche pas. */
.barre-mobile { display: none; }
@media (max-width: 760px) {
  .avec-barre { padding-bottom: 96px; }
  .avec-barre .entete__bouton { display: none; }
  .barre-mobile { display: block; position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 20;
    background: var(--surface); border: 2px solid var(--encre); border-radius: 20px; box-shadow: 0 10px 28px rgba(34, 35, 35, .18);
    transform: translateY(calc(100% + 30px)); visibility: hidden; }
  .barre-mobile.est-visible { transform: none; visibility: visible; }
  .js .barre-mobile { transition: transform .35s cubic-bezier(.4,0,.6,1), visibility 0s .35s; }
  .js .barre-mobile.est-visible { transition: transform .5s cubic-bezier(.34,1.3,.5,1), visibility 0s; }
  .barre-mobile__etape { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 66px; padding: 8px 8px 8px 16px; }
  .barre-mobile__etape[hidden] { display: none; }
  .barre-mobile__mots { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .barre-mobile__note { font-family: var(--main); font-size: 17px; line-height: 1.1; color: var(--orange-texte); }
  .barre-mobile__note--gris { font-family: var(--texte); font-size: 12px; line-height: 1.3; color: var(--gris); }
  .barre-mobile__texte { font-size: 15px; font-weight: 600; line-height: 1.3; }
  .barre-mobile__prix { font-family: var(--titre); font-weight: 800; font-size: 27px; line-height: 1; text-transform: uppercase; }
  .barre-mobile__prix span { font-family: var(--texte); font-size: 14px; font-weight: 600; text-transform: none; color: var(--orange-texte); }
  .barre-mobile .bouton { flex: none; min-height: 48px; padding: 4px 16px; font-size: 19px; }
  /* une étape qui remplace la précédente : les mots montent doucement ; le prix arrive avec un petit rebond */
  .js .barre-mobile__etape--entre .barre-mobile__mots { animation: capBarre .35s cubic-bezier(.2,.7,.3,1) both; }
  .js .barre-mobile__etape--entre .bouton { animation: capBarre .35s cubic-bezier(.2,.7,.3,1) .06s both; }
  .js .barre-mobile__etape--prix.barre-mobile__etape--entre .barre-mobile__prix { animation: capPrix .55s cubic-bezier(.34,1.56,.5,1) both; }
}
@keyframes capBarre { from { opacity: 0; transform: translateY(10px); } }
@keyframes capPrix { from { opacity: 0; transform: scale(.6); } }

/* ---------- animations (motion.js) ----------
   Une idée, un mouvement : chaque visuel s'anime une fois en arrivant à l'écran, puis se tient tranquille.
   Tout est lié à html.js, posé seulement sans « réduire les animations ». Si motion.js ne se charge pas,
   tout réapparaît au bout de 2,5 s (html.js sans .motion). */
.js [data-anim] { --d: calc(var(--i, 0) * 110ms); }
.js:not(.motion) [data-anim], .js:not(.motion) [data-anim] * { animation: capSecours 0s 2.5s both !important; }
@keyframes capSecours { to { opacity: 1; transform: none; stroke-dashoffset: 0; } }

.js [data-anim="apparait"] { opacity: 0; transform: translateY(16px); transition: opacity .6s ease var(--d), transform .6s cubic-bezier(.2,.7,.3,1) var(--d); }
.js [data-anim="pop"] { opacity: 0; transform: scale(.7) rotate(-4deg); transition: opacity .3s ease var(--d), transform .55s cubic-bezier(.34,1.56,.5,1) var(--d); }
.js [data-anim="apparait"].vu, .js [data-anim="pop"].vu { opacity: 1; transform: none; }

/* tracés à la main : chemins pathLength="1" de classe .trace, pointes de flèche .trace-tete */
.js [data-anim] .trace { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset var(--duree, .9s) cubic-bezier(.45,.05,.3,1) calc(var(--d) + var(--retard, 0s)); }
.js [data-anim] .trace-tete, .js [data-anim] .apres { opacity: 0; transition: opacity .25s ease calc(var(--d) + var(--retard, 0s) + var(--duree, .9s) - .1s); }
.js [data-anim].vu .trace { stroke-dashoffset: 0; }
.js [data-anim].vu .trace-tete, .js [data-anim].vu .apres { opacity: 1; }

/* éléments d'un schéma qui surgissent dans l'ordre (--i), et pétales qui s'ouvrent */
.js [data-anim] [data-etape], .js [data-anim] .petale, .js [data-anim] .surgit { opacity: 0; transform: scale(.4); transform-box: fill-box; transform-origin: center; transition: opacity .3s ease calc(var(--i, 0) * var(--pas, 160ms) + var(--retard, 0s)), transform .5s cubic-bezier(.34,1.56,.5,1) calc(var(--i, 0) * var(--pas, 160ms) + var(--retard, 0s)); }
.js [data-anim] .petale { transform: scale(.15); }
.js [data-anim].vu [data-etape], .js [data-anim].vu .petale, .js [data-anim].vu .surgit { opacity: 1; transform: none; }

/* boussole : l'aiguille cherche le cap puis se pose (une fois, au chargement du haut de page) */
.cap-aiguille { transform-box: fill-box; transform-origin: center; }  /* l'aiguille de la boussole du kit est centrée sur son pivot */
.js [data-anim="boussole"]:not(.vu) .cap-aiguille { transform: rotate(-70deg); }
.js [data-anim="boussole"].vu .cap-aiguille { animation: capCherche 2.2s cubic-bezier(.45,0,.55,1) .35s both; }
@keyframes capCherche { 0% { transform: rotate(-70deg); } 18% { transform: rotate(40deg); } 34% { transform: rotate(-24deg); } 50% { transform: rotate(13deg); } 66% { transform: rotate(-6deg); } 82% { transform: rotate(2deg); } 100% { transform: rotate(0deg); } }
/* page introuvable : la boussole cherche sans s'arrêter */
.boussole-perdue .cap-aiguille { animation: capPerdue 3.2s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes capPerdue { 0%, 100% { transform: rotate(-50deg); } 25% { transform: rotate(80deg); } 45% { transform: rotate(20deg); } 70% { transform: rotate(160deg); } 85% { transform: rotate(110deg); } }
@media (prefers-reduced-motion: reduce) { .boussole-perdue .cap-aiguille { animation: none; } }

/* bouton qui attend une réponse : petite boussole qui tourne */
.chargement { display: inline-block; width: 22px; height: 24px; flex: none; }
.chargement .cap-aiguille { animation: capTourne 1.1s linear infinite; }
@keyframes capTourne { to { transform: rotate(360deg); } }

/* ---------- impression (fleur et pages légales) ---------- */
@media print {
  .entete, .pied, .barre-mobile, .ne-pas-imprimer { display: none !important; }
  body { background: #fff; }
  .section { padding: 16px 0; }
  /* page de la fleur : on imprime la feuille A4, pas la page */
  @page { size: A4; margin: 14mm; }
  main:has(.feuille-fleur) > *:not(.feuille-fleur) { display: none !important; }
  .imprimer-seulement { display: block; }
  .feuille-fleur { color: var(--encre); }
  .feuille-fleur__tete { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 3px solid var(--bleu); padding-bottom: 10px; }
  .feuille-fleur__tete img { width: 92px; }
  .feuille-fleur__titre { font-family: var(--titre); font-weight: 800; font-size: 40px; line-height: 1; text-transform: uppercase; color: var(--bleu); text-align: right; }
  .feuille-fleur__date { text-align: right; font-size: 13px; color: var(--gris); }
  .feuille-fleur__corps { display: flex; align-items: center; gap: 18px; margin: 14px 0 10px; }
  .feuille-fleur__dessin { flex: 0 0 56%; }
  .feuille-fleur__dessin svg { width: 100%; height: auto; display: block; }
  .feuille-fleur__valeurs { border-collapse: collapse; width: 100%; font-size: 13px; }
  .feuille-fleur__valeurs th { text-align: left; font-weight: 600; color: var(--bleu); padding: 5px 6px 5px 0; }
  .feuille-fleur__valeurs td { padding: 5px 0; white-space: nowrap; }
  .jauge { display: inline-block; width: 70px; height: 8px; border: 1.5px solid var(--bleu); border-radius: 99px; overflow: hidden; vertical-align: middle; margin-right: 6px; }
  .jauge span { display: block; height: 100%; background: var(--bleu); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .feuille-fleur__resume { font-weight: 600; font-size: 13px; margin-top: 10px; }
  .feuille-fleur__lignes { height: 62mm; margin-top: 6px; background-image: linear-gradient(#B9B6B2 1px, transparent 1px); background-size: 100% 10mm; background-position: 0 10mm; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .feuille-fleur__pied { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--ligne); font-size: 11px; color: var(--gris); }
}

/* ---------- sélecteur de modules « Le même programme qu'à l'hôpital » (bloc duo) ----------
   Deux onglets dessinés : Chimok (voix orange) à gauche, Thierry (voix bleue) à droite, affiché par défaut.
   L'onglet actif prend la couleur de son panneau, comme un intercalaire. Sans JavaScript : les deux listes, sans onglets. */
.selecteur { display: flex; flex-direction: column; }
.selecteur__consigne { display: flex; align-items: flex-end; gap: 6px; margin: 0 0 4px 10px; }
.selecteur__consigne .annotation { font-size: 22px; }
/* la flèche descend sur les onglets : elle reste devant eux dans les deux modes (sans TDAH, sans animation, elle passait dessous) */
.selecteur__consigne svg { flex: none; margin-bottom: -22px; position: relative; z-index: 1; }
.selecteur:not(.selecteur--actif) .selecteur__consigne, .selecteur:not(.selecteur--actif) [role="tablist"] { display: none; }
.selecteur__onglets { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.onglet {
  display: flex; align-items: flex-end; gap: 4px 18px; min-width: 0; padding: 14px 20px 0; overflow: hidden;
  border: 2px solid var(--ligne); border-bottom: 0; border-radius: 20px 20px 0 0; background: var(--surface);
  color: var(--encre); font: inherit; text-align: left; cursor: pointer; transition: background-color .2s ease, border-color .2s ease;
}
.onglet img { flex: none; width: 116px; height: auto; transition: opacity .2s ease, transform .2s ease; }
.onglet__texte { display: flex; flex-direction: column; gap: 2px; padding-bottom: 18px; min-width: 0; }
.onglet__voix { font-family: var(--main); font-size: 22px; line-height: 1.1; }
.onglet__nom { font-family: var(--titre); font-weight: 800; font-size: 32px; line-height: 1; text-transform: uppercase; }
.onglet__role { font-size: 14px; line-height: 1.4; color: var(--gris); }
.onglet--science .onglet__voix { color: var(--bleu); }
.onglet[aria-selected="false"] img { opacity: .75; }
.onglet[aria-selected="false"]:hover img { opacity: 1; transform: translateY(-3px); }
.onglet--science[aria-selected="false"]:hover { border-color: var(--bleu); }
.onglet--vecu[aria-selected="false"]:hover { border-color: var(--orange); }
.onglet--science[aria-selected="true"] { background: var(--nuance-bleue); border-color: var(--nuance-bleue); }
.onglet--vecu[aria-selected="true"] { background: var(--nuance-orange); border-color: var(--nuance-orange); }
.onglet:focus-visible { outline-offset: -6px; }
.selecteur__panneau { padding: clamp(20px, 3vw, 32px); display: flex; flex-direction: column; gap: 18px; }
.selecteur__panneau[hidden] { display: none; }
/* les deux coins du haut sont droits : celui de l'onglet ouvert s'y fond, et le bord de l'onglet fermé tombe pile dans le coin
   (arrondi, le panneau s'écartait sous lui et son contour s'arrêtait dans le vide ; retour de Nicolas, 31/10/2026) */
.selecteur__panneau--science { background: var(--nuance-bleue); border-radius: 0 0 20px 20px; }   /* l'onglet de Thierry est à droite */
.selecteur__panneau--vecu { background: var(--nuance-orange); border-radius: 0 0 20px 20px; }      /* celui de Chimok à gauche */
.selecteur:not(.selecteur--actif) .selecteur__panneau { border-radius: 20px; }
.selecteur:not(.selecteur--actif) .selecteur__panneau + .selecteur__panneau { margin-top: 14px; }
.selecteur__intro { font-size: 18px; }
.selecteur__panneau--science .selecteur__intro strong { color: var(--bleu); }
.modules-voix { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.module-voix { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--surface); border-radius: 14px; min-width: 0; }
.module-voix__num { flex: none; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; font-family: var(--titre); font-weight: 800; font-size: 26px; line-height: 1; }
.selecteur__panneau--science .module-voix__num { background: var(--bleu); color: var(--fond); }   /* blanc cassé sur bleu */
.selecteur__panneau--vecu .module-voix__num { background: var(--orange); color: var(--encre); }   /* encre sur orange, jamais blanc */
.module-voix__texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.module-voix__label { font-family: var(--titre); font-weight: 700; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gris); }
.module-voix__titre { font-size: 17px; line-height: 1.35; font-weight: 600; }
@media (max-width: 640px) {
  .onglet { flex-direction: column-reverse; align-items: center; text-align: center; padding: 12px 10px 0; gap: 6px; }
  .onglet img { width: 92px; }
  .onglet__texte { padding-bottom: 0; }
  .onglet__nom { font-size: 26px; }
  .onglet__role { font-size: 12px; }
  .selecteur__consigne { margin-left: 4px; }
  /* la flèche passe devant la consigne : elle pointe vers l'onglet de Chimok (à gauche), pas vers celui de Thierry, déjà ouvert */
  .selecteur__consigne svg { order: -1; }
}
@media (prefers-reduced-motion: reduce) { .onglet, .onglet img { transition: none; } .onglet[aria-selected="false"]:hover img { transform: none; } }

/* ---------------------------------------------------------------- avis Trustpilot (voix orange : le vécu des membres) */
.note-trustpilot { justify-content: center; gap: 8px; text-decoration: none; color: var(--encre); border: 2px dashed var(--orange); }
/* la grille des avis allégée : Céline en grand, deux témoignages, deux avis Trustpilot vérifiés, et la note en bandeau dessous */
.temoignages .note-trustpilot { order: 9; grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 18px; }
.temoignages .note-trustpilot p { margin: 0; }
.avis--court blockquote { font-size: 16px; }
.note-trustpilot__chiffre { display: block; font-family: var(--titre); font-weight: 800; font-size: 60px; line-height: 1; }
.note-trustpilot__chiffre span { font-size: 26px; }
.note-trustpilot svg { width: 152px; height: auto; }
.note-trustpilot:hover .lien-fleche { text-decoration: underline; text-decoration-thickness: 2px; }
.avis-trustpilot { display: flex; flex-direction: column; gap: 18px; margin-top: 12px; }
.avis-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.avis { gap: 12px; }
.avis__etoiles { width: 95px; height: auto; }
.avis__titre { display: block; font-weight: 600; font-size: 16px; line-height: 1.35; }
.avis blockquote { font-size: 15px; line-height: 1.6; }
.avis__auteur { margin-top: auto; padding-top: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 14px; color: var(--gris); }
.avis__auteur strong { font-weight: 600; color: var(--encre); }
.avis__verifie { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-weight: 600; color: var(--encre); }
.avis-liste:focus-visible { outline: 3px solid var(--bleu); outline-offset: 4px; border-radius: var(--rayon); }
@media (max-width: 640px) {
  /* sur mobile : on fait défiler les avis du doigt, l'avis suivant dépasse pour le montrer */
  .avis-liste { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin: 0 -20px; padding: 4px 20px 10px; scroll-padding: 0 20px; scrollbar-width: thin; }
  .avis { scroll-snap-align: start; }
  .note-trustpilot__chiffre { font-size: 52px; }
}

/* ================================================================ téléphone : menu, récit au défilement, flèches
   html.nav-js est posée par le script en tête de page, avant le premier affichage (pas de saut) ; sans JavaScript, l'en-tête garde sa ligne de liens. */
.entete__burger { display: none; }
.nav .nav__mobile { display: none; }
@media (max-width: 1080px) {
  html { scroll-padding-top: 76px; }
  .nav-js .entete { position: sticky; top: 0; }
  .js.nav-js .entete { transition: transform .3s cubic-bezier(.2,.7,.3,1); }
  .nav-js .entete.entete--cache { transform: translateY(-101%); }
  .nav-js .entete .entete__ligne { flex-wrap: nowrap; min-height: 64px; padding-top: 6px; padding-bottom: 6px; gap: 12px; }
  .nav-js .entete .entete__logo { margin-right: auto; }
  .nav-js .entete .entete__logo img { width: 62px; }
  .nav-js .entete .entete__bouton { margin-left: 0; }
  .nav-js .entete .entete__burger { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 48px; height: 48px; margin-right: -10px; padding: 0; border: 0; border-radius: 14px; background: none; color: var(--encre); cursor: pointer; -webkit-tap-highlight-color: transparent; }
  /* trois traits de crayon, le deuxième plus court ; ils se croisent quand le menu est ouvert */
  .burger { position: relative; display: block; width: 26px; height: 19px; }
  .burger span { position: absolute; left: 0; width: 100%; height: 3px; border-radius: 3px; background: currentColor; }
  .burger span:nth-child(1) { top: 0; transform: rotate(-1.5deg); }
  .burger span:nth-child(2) { top: 8px; width: 78%; }
  .burger span:nth-child(3) { top: 16px; transform: rotate(1deg); }
  .js .burger span { transition: transform .25s ease, top .25s ease, opacity .2s ease, width .25s ease; }
  .entete--ouvert .burger span:nth-child(1) { top: 8px; transform: rotate(45deg); }
  .entete--ouvert .burger span:nth-child(2) { opacity: 0; width: 0; }
  .entete--ouvert .burger span:nth-child(3) { top: 8px; transform: rotate(-45deg); }
  /* le menu ouvert : plein écran sous l'en-tête, gros liens, le bouton Commencer en bas */
  .nav-js .entete .nav { position: fixed; top: 65px; left: 0; right: 0; bottom: 0; z-index: 29; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 0; padding: 8px 20px calc(28px + env(safe-area-inset-bottom)); background: var(--fond); overflow-y: auto; overscroll-behavior: contain; white-space: normal;
    visibility: hidden; opacity: 0; transform: translateY(-8px); }
  .nav-js .entete.entete--ouvert .nav { visibility: visible; opacity: 1; transform: none; }
  .js.nav-js .entete .nav { transition: opacity .2s ease, transform .3s cubic-bezier(.2,.7,.3,1), visibility 0s .3s; }
  .js.nav-js .entete.entete--ouvert .nav { transition: opacity .2s ease, transform .3s cubic-bezier(.2,.7,.3,1), visibility 0s; }
  .nav-js .entete .nav a { padding: 14px 2px; border-bottom: 1px solid var(--ligne); font-size: 30px; font-weight: 800; letter-spacing: .02em; line-height: 1.05; }
  .nav-js .entete .nav a.nav__mobile { display: block; font-family: var(--texte); font-size: 18px; font-weight: 600; letter-spacing: 0; text-transform: none; }
  .nav-js .entete .nav a.nav__bouton { display: inline-flex; align-self: flex-start; margin-top: 24px; padding: 6px 30px; border-bottom: 2.5px solid var(--orange); font-family: var(--main); font-size: 24px; font-weight: 400; text-transform: none; letter-spacing: 0; text-decoration: none; }
  .js .entete--ouvert .nav a { animation: capMenu .35s cubic-bezier(.2,.7,.3,1) both; }
  .js .entete--ouvert .nav a:nth-child(2) { animation-delay: .03s; } .js .entete--ouvert .nav a:nth-child(3) { animation-delay: .06s; }
  .js .entete--ouvert .nav a:nth-child(4) { animation-delay: .09s; } .js .entete--ouvert .nav a:nth-child(5) { animation-delay: .12s; }
  .js .entete--ouvert .nav a:nth-child(6) { animation-delay: .15s; } .js .entete--ouvert .nav a:nth-child(7) { animation-delay: .18s; }
  .js .entete--ouvert .nav a:nth-child(8) { animation-delay: .22s; }
  /* menu ouvert : la page derrière ne défile plus. Seulement sur html : bloquer aussi body en ferait une zone de défilement à part,
     et l'en-tête collant, rattaché à body, remonterait tout en haut de la page avec la croix (bug vu sur iPhone) */
  html.menu-ouvert { overflow: hidden; }
  /* page fleur : la bande de la fleur collée en haut se glisse sous l'en-tête quand il est là */
  .nav-js .outil-fleur__dessin { top: 65px; }
  .nav-js.entete-cachee .outil-fleur__dessin { top: 0; }
  .js.nav-js .outil-fleur__dessin { transition: top .3s cubic-bezier(.2,.7,.3,1); }
}
@keyframes capMenu { from { opacity: 0; transform: translateY(10px); } }

/* le toucher : pas d'effet de survol qui reste collé après un tap, un léger enfoncement à la place */
@media (hover: none) {
  .bouton:hover { transform: none; }
  .bouton:not(.bouton--action):not(.bouton--bleu):not(.bouton--encre):hover { background: transparent; }
  .bouton { -webkit-tap-highlight-color: transparent; }
  .js .bouton:active { transform: scale(.97); }
}

/* repère « glisse » sous les rangées qu'on fait défiler du doigt (écrans de l'app, avis) */
.glisse { display: none; align-items: center; gap: 8px; font-size: 20px; }
.glisse__fleche { width: 58px; height: auto; flex: none; }
@media (max-width: 560px) { .glisse--ecrans { display: flex; margin-top: -18px; justify-content: center; } }
@media (max-width: 640px) { .glisse--avis { display: flex; margin-top: -6px; } }

/* la fleur complète : une version recadrée en portrait pour le téléphone */
.fleur-illu--mobile { display: none; }
@media (max-width: 640px) {
  .fleur-illu--grand { display: none; }
  .fleur-illu--mobile { display: block; max-width: 400px; margin: 0 auto; }
}

@media (max-width: 760px) {
  /* le haut de l'accueil sur téléphone : la question, la promesse et le bouton tiennent dans le premier écran, le dessin du duo
     vient juste après (2 novembre 2026 : avant, la promesse et le bouton n'arrivaient qu'au deuxième écran) */
  .hero { padding: 22px 0 44px; }
  .hero .deux-colonnes { flex-direction: column; align-items: stretch; gap: 18px; }
  .hero .deux-colonnes > * { flex: none; }
  .hero__texte { display: contents; }
  .hero__texte > * { order: 7; }
  .hero .surtitre { order: 1; }
  .hero .titre-1 { order: 2; margin-bottom: 8px; }
  .hero .chapeau { order: 3; }
  .hero .hero__ce-soir { order: 5; }
  .hero .hero__visuel { order: 6; }
  .hero .hero__actions { order: 8; }
  .hero__visuel .calque { max-width: 280px; }
  /* « c'est gratuit » passe sous le bouton : la flèche pointe vers le haut, sur le bouton */
  .hero__gratuit { flex-direction: column; align-items: flex-start; gap: 0; }
  .hero__gratuit .annotation--fleche { flex-direction: row; align-items: flex-end; gap: 6px; margin: 2px 0 0 46px; }
  .hero__gratuit .annotation--fleche svg { width: 40px; margin: 0; transform: rotate(78deg) scaleY(-1); }
  /* chaque titre de section arrive comme un nouveau chapitre */
  .js [data-anim="titre"] { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.3,1); }
  .js [data-anim="titre"].vu { opacity: 1; transform: none; }
  /* questions de l'accueil : le petit Thierry se pose à côté du titre au lieu de prendre un écran */
  .faq-mise-en-page__cote:not(.faq-mise-en-page__cote--colle) { flex: 1 1 100%; flex-flow: row wrap; align-items: center; gap: 12px 16px; }
  .faq-mise-en-page__cote h2 { flex: 1 1 0; }
  .faq-mise-en-page__cote img { width: 92px; }
  .faq-mise-en-page__cote > p { flex: 1 1 100%; }
}

@media (max-width: 640px) {
  /* plus serré : moins d'écrans à faire défiler, le récit garde son rythme */
  .section { padding: 48px 0; }
  .pile { gap: 26px; }
  .douleur { flex-wrap: nowrap; gap: 12px; padding: 16px 16px 16px 12px; }
  .douleur img { width: 64px; height: 64px; margin: -4px -2px 0 -2px; }
  .douleur h3 { font-size: 17px; }
  #pour-qui .grille .carte { display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; row-gap: 4px; padding: 16px; }
  #pour-qui .grille .carte > svg { grid-row: span 2; width: 44px; height: 44px; }
  .outils .carte { padding: 18px; }
  .personne { padding: 22px; }
}

/* ================================================================ site vivant (vivant.js) et mode TDAH
   html.vivant : quelques visuels bougent doucement, en boucles lentes, jamais derrière un texte à lire ;
   les yeux de Chimok suivent la souris, deux papillons volent quand ils sont à l'écran.
   html.sans-tdah (interrupteur « Mode TDAH » désactivé) : site classique, plus rien ne bouge, les décorations
   (papillons, autocollants, petit mot de Chimok) disparaissent. */

/* ---------- l'interrupteur « Mode TDAH » ---------- */
.interrupteur { display: none; align-items: center; gap: 10px; padding: 6px 2px; border: 0; background: none; font: inherit; color: var(--encre); cursor: pointer; text-align: left; -webkit-tap-highlight-color: transparent; }
.nav-js .interrupteur { display: inline-flex; }
.interrupteur__texte { display: flex; flex-direction: column; font-family: var(--titre); font-weight: 700; font-size: 16px; letter-spacing: .06em; text-transform: uppercase; line-height: 1.1; white-space: nowrap; }
.interrupteur__aide { font-family: var(--texte); font-size: 14px; line-height: 1.3; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--gris); white-space: normal; }
.interrupteur--entete .interrupteur__aide { font-size: 12px; white-space: nowrap; }
/* le petit texte dit dans quel mode on est : avec TDAH ou sans TDAH */
.interrupteur__aide { display: grid; }
.si-avec, .si-sans { grid-area: 1 / 1; }
.interrupteur[aria-checked="true"] .si-sans, .interrupteur[aria-checked="false"] .si-avec { visibility: hidden; }
.interrupteur__piste { position: relative; flex: none; width: 44px; height: 26px; border: 2.5px solid var(--encre); border-radius: 999px; background: var(--surface); }
.interrupteur__bouton { position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; border-radius: 50%; background: var(--encre); }
.js .interrupteur__bouton { transition: transform .2s ease; }
/* avec TDAH : piste orange (la voix du vécu), rond encre ; jamais de blanc sur orange */
.interrupteur[aria-checked="true"] .interrupteur__piste { background: var(--orange); border-color: var(--orange); }
.interrupteur[aria-checked="true"] .interrupteur__bouton { transform: translateX(18px); }
/* au survol, seul « Mode TDAH » se souligne, juste sous le mot (avant, la ligne d'aide était soulignée aussi et le trait la touchait) */
@media (hover: hover) { .interrupteur--entete:hover .interrupteur__nom { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2.5px; text-underline-offset: 2px; } }
.interrupteur--entete { flex: none; }
@media (max-width: 1080px) { .nav-js .interrupteur--entete { display: none; } }
/* dans le menu burger : une ligne à part, sous le bouton Commencer */
.nav-js .entete .nav .interrupteur--menu { display: flex; justify-content: space-between; gap: 16px; width: 100%; margin-top: 22px; padding: 14px 0 0; border-top: 2px dotted var(--encre); }
.nav-js .entete .nav .interrupteur--menu .interrupteur__texte { font-size: 24px; font-weight: 800; letter-spacing: .02em; }
@media (min-width: 1081px) { .nav-js .entete .nav .interrupteur--menu { display: none; } }

/* ---------- sans TDAH : site classique, plus rien ne bouge, plus de décorations ---------- */
html.sans-tdah { scroll-behavior: auto; }
.sans-tdah *, .sans-tdah *::before, .sans-tdah *::after { animation: none !important; transition: none !important; }
.sans-tdah .deco { display: none !important; }
.sans-tdah .bouton:hover { transform: none; }

/* ---------- le petit mot de Chimok, une fois par visite, quand ta souris l'a distrait un moment */
.clin-doeil { position: absolute; top: 0; left: 0; z-index: 3; margin: 0; font-family: var(--main); font-size: clamp(15px, 1.6vw, 19px); line-height: 1.1; color: var(--orange-texte);
  opacity: 0; transform: translateY(6px) rotate(-3deg); pointer-events: none; }
.js .clin-doeil { transition: opacity .4s ease, transform .5s cubic-bezier(.34,1.56,.5,1); }
.clin-doeil span { display: none; }
.clin-doeil--souris .clin-doeil__souris, .clin-doeil--doigt .clin-doeil__doigt { display: inline; }
.clin-doeil--la { opacity: 1; transform: rotate(-3deg); }

/* ---------- les papillons : une couche transparente sur le dessin, le papillon y vole ---------- */
.papillon { position: absolute; inset: 0; z-index: 2; container-type: size; pointer-events: none; }
.papillon__vol { position: absolute; left: 0; top: 0; width: clamp(28px, 7cqw, 42px); translate: var(--ax, 6cqw) var(--ay, 30cqh); margin: -14px 0 0 -14px; pointer-events: auto; cursor: pointer; }
.papillon__vol svg { display: block; width: 100%; height: auto; transition: transform .9s cubic-bezier(.2,.7,.3,1); }
.papillon .aile { transform-box: view-box; transform-origin: 32px 26px; }
html:not(.vivant) .papillon { display: none; }
.papillon--vole .aile { animation: capAile .32s ease-in-out infinite alternate; }
@keyframes capAile { to { transform: scaleX(.28); } }
/* au survol ou au toucher, il s'écarte d'un coup d'ailes puis revient */
.papillon--fuit .papillon__vol svg { transform: translate(34px, -42px) scale(.75) rotate(30deg); transition-duration: .45s; }
.papillon--fuit .aile { animation-duration: .1s; }
/* haut de l'accueil : il fait le tour du duo par le haut, sans passer sur les visages ni sur les mots */
.papillon--vole.papillon--hero .papillon__vol { animation: capVolHero 28s ease-in-out infinite; }
@keyframes capVolHero {
  0%   { translate: 4cqw 30cqh; rotate: 10deg; }
  12%  { translate: 10cqw 5cqh; rotate: 70deg; }
  26%  { translate: 40cqw 3cqh; rotate: 140deg; }
  36%  { translate: 50cqw 24cqh; rotate: 40deg; }
  46%  { translate: 60cqw 4cqh; rotate: 80deg; }
  60%  { translate: 92cqw 6cqh; rotate: 160deg; }
  70%  { translate: 96cqw 30cqh; rotate: 200deg; }
  80%  { translate: 88cqw 3cqh; rotate: 290deg; }
  92%  { translate: 30cqw 2cqh; rotate: 260deg; }
  100% { translate: 4cqw 30cqh; rotate: 370deg; }
}
/* bas de l'accueil : posé près de la fleur, il fait de temps en temps un petit tour et revient */
.fleur-illu { position: relative; }
/* il se pose sur une des petites fleurs du sol (les deux dessins n'ont pas la même mise en page) */
.fleur-illu--grand .papillon__vol { --ax: 73cqw; --ay: 86cqh; }
.fleur-illu--mobile .papillon__vol { --ax: 19cqw; --ay: 63cqh; }
.papillon--vole.papillon--fleur .papillon__vol { animation: capVolFleur 16s ease-in-out 2s infinite; }
.papillon--vole.papillon--fleur .aile { animation-duration: .6s; }
@keyframes capVolFleur {
  0%, 62% { translate: var(--ax) var(--ay); rotate: -12deg; }
  70%  { translate: calc(var(--ax) + 12cqw) calc(var(--ay) - 9cqh); rotate: 40deg; }
  80%  { translate: calc(var(--ax) + 3cqw) calc(var(--ay) - 16cqh); rotate: -60deg; }
  90%  { translate: calc(var(--ax) - 9cqw) calc(var(--ay) - 5cqh); rotate: -150deg; }
  100% { translate: var(--ax) var(--ay); rotate: -372deg; }
}

/* ---------- les petits mouvements permanents : un visuel à la fois, des boucles lentes ---------- */
/* la boussole du haut de page cherche le cap de temps en temps */
.vivant.js [data-anim="boussole"].vu .cap-aiguille { animation: capCherche 2.2s cubic-bezier(.45,0,.55,1) .35s both, capOscille 9s ease-in-out 6s infinite; }
@keyframes capOscille { 0%, 72%, 100% { transform: rotate(0deg); } 78% { transform: rotate(-16deg); } 85% { transform: rotate(10deg); } 91% { transform: rotate(-4deg); } 96% { transform: rotate(1deg); } }
/* les flèches donnent un petit coup dans leur direction */
.vivant .annotation--fleche svg { --px: -5px; --py: 0px; animation: capPousse 5s ease-in-out 3s infinite; }
.vivant .selecteur__consigne svg { --px: 0px; --py: 5px; animation: capPousse 4.5s ease-in-out 2s infinite; }
.vivant .glisse__fleche { --px: 7px; --py: 0px; animation: capPousse 3.5s ease-in-out 1.5s infinite; }
@media (max-width: 760px) { .vivant .hero__gratuit .annotation--fleche svg { --px: 0px; --py: -5px; } }
@keyframes capPousse { 0%, 76%, 100% { translate: 0 0; } 84% { translate: var(--px) var(--py); } 90% { translate: 0 0; } 95% { translate: calc(var(--px) / 2) calc(var(--py) / 2); } }
/* le déclic de Lou se rallume */
.vivant .lou__declic svg { transform-origin: 50% 100%; animation: capDeclic 6s ease-in-out 4s infinite; }
@keyframes capDeclic { 0%, 82%, 100% { scale: 1; } 88% { scale: 1.22; } 94% { scale: .94; } }
/* l'autocollant de Chimok sur l'offre se trémousse */

/* ================================================================ accueil, mode « avec TDAH » : les distractions (distractions.js)
   Tout est en .deco : masqué en mode sans TDAH. Les scènes ne jouent qu'à l'écran (.en-scene) ; rien n'arrête un clic. */
main { overflow-x: clip; }   /* un animal qui sort par le côté ne fait jamais défiler la page en largeur */
.hero, .section, .attente { position: relative; isolation: isolate; }
/* une scène : couche transparente sur toute la section, derrière le contenu (les cartes passent devant les animaux) */
.scene { position: absolute; inset: 0; z-index: -1; container-type: size; pointer-events: none; overflow: clip; }
.scene--devant { z-index: 2; }
html:not(.vivant) .scene { display: none; }
.scene > * { position: absolute; left: 0; top: 0; }
.scene:not(.en-scene) *, .scene:not(.en-scene) *::before { animation-play-state: paused !important; }

/* ---------- les effets à la souris : étincelles et confettis ---------- */
.effets { position: fixed; inset: 0; z-index: 45; pointer-events: none; overflow: hidden; }
.etincelle { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; background: var(--orange);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: capEtincelle .7s ease-out forwards; }
.etincelle--bleue { background: var(--bleu); }
@keyframes capEtincelle { 0% { transform: scale(0) rotate(0deg); opacity: 1; } 35% { transform: scale(1.1) rotate(45deg); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(.2) rotate(120deg); opacity: 0; } }
.confetti { position: absolute; width: 9px; height: 5px; margin: -2px 0 0 -4px; border-radius: 1px; animation: capConfetti .9s cubic-bezier(.2,.7,.3,1) forwards; }
.confetti--rond { width: 7px; height: 7px; border-radius: 50%; }
@keyframes capConfetti { 0% { transform: translate(0, 0) rotate(0deg); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(var(--dx), calc(var(--dy) + 60px)) rotate(var(--r)); opacity: 0; } }
/* les pensées : une bulle manuscrite qui surgit, reste quelques secondes, puis s'en va */
.pensee { position: absolute; max-width: min(260px, 60vw); padding: 8px 14px 10px; background: var(--surface); border: 2px solid var(--encre); border-radius: 18px 18px 18px 4px;
  font-family: var(--main); font-size: 19px; line-height: 1.15; color: var(--encre); box-shadow: 0 6px 16px rgba(34, 35, 35, .12);
  animation: capPensee 4.6s cubic-bezier(.34,1.4,.5,1) forwards; transform-origin: 0 100%; }
.pensee--droite { border-radius: 18px 18px 4px 18px; transform-origin: 100% 100%; }
.pensee::after { content: ""; position: absolute; left: 6px; bottom: -14px; width: 9px; height: 9px; border: 2px solid var(--encre); border-radius: 50%; background: var(--surface); }
.pensee--droite::after { left: auto; right: 6px; }
@keyframes capPensee { 0% { opacity: 0; transform: scale(.4) rotate(-6deg); } 10% { opacity: 1; transform: scale(1) rotate(-2deg); } 86% { opacity: 1; transform: scale(1) rotate(-2deg); } 100% { opacity: 0; transform: translateY(-14px) scale(.9) rotate(-2deg); } }

/* ---------- l'escargot qui avance avec la page : il marche au plafond, sous le bord de l'en-tête ----------
   (posé dans l'en-tête, il passerait sur le logo et les boutons ; au plafond, il ne gêne rien et ça le fait rire) */
.escargot-progres { position: absolute; left: 0; right: 0; top: 100%; height: 3px; margin-top: -2px; pointer-events: none; container-type: inline-size; }
html:not(.vivant) .escargot-progres { display: none; }
.escargot-progres__trace { position: absolute; inset: 0; background: var(--orange); opacity: .45; transform: scaleX(var(--progres, 0)); transform-origin: 0 50%; border-radius: 0 3px 3px 0; }
/* il avance sur la largeur de l'en-tête (100cqw), pas de la fenêtre : avec 100vw, la barre de défilement le faisait dépasser d'un pixel en bas de page */
.escargot-progres__bete { position: absolute; left: 0; top: 1px; width: 38px; translate: calc(var(--progres, 0) * (100cqw - 44px)) 0; scale: 1 -1; }
.escargot-progres__bete svg { display: block; width: 100%; height: auto; }
.vivant .escargot-progres__bete .antennes { transform-box: view-box; transform-origin: 50px 24px; animation: capAntennes 2.4s ease-in-out infinite; }
@keyframes capAntennes { 0%, 100% { rotate: 0deg; } 50% { rotate: -8deg; } }

/* ---------- titres de section : un soulignement à la main se dessine dessous ---------- */
.entete-section > .titre-2 { position: relative; }
/* posé sous le titre sans prendre de place : basculer le mode ne décale rien. Le trait (milieu du dessin) tombe dans l'espace avant le texte */
.souligne-titre { position: absolute; left: 0; top: 100%; width: min(160px, 60%); margin-top: -6px; line-height: 0; pointer-events: none; }
.souligne-titre svg { width: 100%; height: auto; display: block; }
@media (hover: hover) { .vivant .titre-2:hover { animation: capWobble .5s ease-in-out; } }
@keyframes capWobble { 25% { rotate: -1.5deg; } 50% { rotate: 1.2deg; } 75% { rotate: -.6deg; } }

/* ---------- les boutons d'achat se trémoussent, les cartes font la gelée au survol ---------- */
.vivant .hero__actions .bouton--action, .vivant .offre .bouton--action { animation: capTremousse 7s ease-in-out 4s infinite; }
@keyframes capTremousse { 0%, 88%, 100% { rotate: 0deg; } 90% { rotate: -3deg; } 93% { rotate: 3deg; } 96% { rotate: -1.5deg; } }
@media (hover: hover) {
  .vivant .carte { transition: rotate .25s cubic-bezier(.34,1.56,.5,1), scale .25s cubic-bezier(.34,1.56,.5,1); }
  .vivant .carte:hover { rotate: -.7deg; scale: 1.015; }
  /* les cartes à visages (douleurs, avis) se soulèvent sans tourner ni grossir : penché ou agrandi, le calque était redessiné
     flou et le grain crayon des personnages avec (retour de Nicolas, 31/10/2026) */
  .vivant .carte:has(.visage-vivant) { transition: translate .25s cubic-bezier(.34,1.56,.5,1), box-shadow .25s ease; }
  .vivant .carte:has(.visage-vivant):hover { rotate: none; scale: none; translate: 0 -4px; box-shadow: 0 10px 24px rgba(34, 35, 35, .08); }
}
/* la note Trustpilot scintille */
.vivant .note-trustpilot svg { animation: capScintille 3.6s ease-in-out infinite; }
@keyframes capScintille { 0%, 70%, 100% { scale: 1; } 80% { scale: 1.08; } 90% { scale: .98; } }

/* ---------- section « C'est pour toi si » : des bulles montent derrière les cartes ---------- */
.bulle { width: var(--t, 22px); height: var(--t, 22px); left: var(--x) !important; top: 100% !important; border: 2.5px solid var(--bleu); border-radius: 50%; opacity: 0;
  background: radial-gradient(circle at 32% 30%, #FFFFFF 0 18%, rgba(255, 255, 255, .35) 19%);
  animation: capBulle var(--duree, 11s) ease-in var(--retard, 0s) infinite; }
@keyframes capBulle { 0% { translate: 0 0; opacity: 0; } 10% { opacity: .8; } 50% { translate: 18px -50cqh; } 90% { opacity: .7; } 100% { translate: -10px -105cqh; opacity: 0; } }

/* ---------- questions : des points d'interrogation flottent dans les marges ---------- */
.flotte { font-family: var(--main); font-size: var(--t, 40px); line-height: 1; color: var(--bleu); opacity: .35; left: var(--x) !important; top: var(--y) !important;
  animation: capFlotte var(--duree, 7s) ease-in-out var(--retard, 0s) infinite alternate; }
@keyframes capFlotte { from { translate: 0 0; rotate: -10deg; } to { translate: 10px -24px; rotate: 12deg; } }

/* ---------- les animaux de l'accueil (dessins de svg/, trait crayon léger commun) ---------- */
.scene svg { display: block; width: 100%; height: auto; overflow: visible; }
.scene--libre { overflow: visible; container-type: normal; }
.flotte { width: var(--t, 40px); font-size: 0; opacity: .5; }
/* gribouillis de marge : ils tanguent doucement */
.gribouillis { width: 30px; left: var(--x) !important; top: var(--y) !important; animation: capGribouille var(--duree, 6s) ease-in-out infinite alternate; }
.gribouillis--petit { width: 20px; }
@keyframes capGribouille { from { rotate: -14deg; scale: .9; } to { rotate: 16deg; scale: 1.1; } }

/* la coccinelle fait l'aller-retour au pied de la section, en frétillant des pattes */
.coccinelle { width: 26px; translate: 2cqw calc(100cqh - 34px); rotate: 90deg; animation: capCoccinelle 50s linear infinite; }
.coccinelle .pattes { transform-box: view-box; transform-origin: 16px 16px; animation: capPattes .25s steps(2) infinite; }
@keyframes capCoccinelle {
  0%   { translate: 2cqw calc(100cqh - 34px); rotate: 90deg; }
  44%  { translate: 94cqw calc(100cqh - 34px); rotate: 90deg; }
  50%  { translate: 94cqw calc(100cqh - 34px); rotate: 270deg; }
  94%  { translate: 2cqw calc(100cqh - 34px); rotate: 270deg; }
  100% { translate: 2cqw calc(100cqh - 34px); rotate: 450deg; }
}
@keyframes capPattes { to { rotate: 6deg; } }

/* l'écureuil passe la tête par-dessus la carte, regarde à droite, à gauche, et redescend */
.ecureuil { left: 74%; top: 0; width: 64px; }
@media (min-width: 760px) { .ecureuil { top: 92px; width: 78px; left: 80%; } }   /* le haut des cartes, sous le lien entre les deux */
.ecureuil__dessin { display: block; translate: 0 0; animation: capCoucou 13s ease-in-out 2s infinite; }
.ecureuil .queue { transform-box: view-box; transform-origin: 52px 68px; animation: capQueue 1.3s ease-in-out infinite alternate; }
.ecureuil__cri { position: absolute; left: 96%; top: -66px; font-family: var(--main); font-size: 20px; line-height: 1; color: var(--orange-texte); white-space: nowrap; opacity: 0; rotate: 8deg; animation: capCri 13s ease-in-out 2s infinite; }
@keyframes capCoucou {
  0%, 58%  { translate: 0 0; rotate: 0deg; }
  63%      { translate: 0 -100%; rotate: 0deg; }
  68%      { translate: 0 -100%; rotate: -8deg; }
  74%      { translate: 0 -100%; rotate: 8deg; }
  79%      { translate: 0 -100%; rotate: 0deg; }
  84%, 100% { translate: 0 0; rotate: 0deg; }
}
@keyframes capCri { 0%, 62% { opacity: 0; translate: 0 6px; } 65%, 78% { opacity: 1; translate: 0 0; } 82%, 100% { opacity: 0; translate: 0 0; } }
@keyframes capQueue { from { rotate: -6deg; } to { rotate: 8deg; } }

/* l'avion en papier traverse la section en plané */
.avion { width: 52px; translate: -14cqw 34cqh; animation: capAvion 17s ease-in-out 1s infinite; }
@keyframes capAvion {
  0%   { translate: -14cqw 34cqh; rotate: -8deg; }
  22%  { translate: 22cqw 27cqh; rotate: -12deg; }
  34%  { translate: 44cqw 26cqh; rotate: 4deg; }
  48%  { translate: 68cqw 20cqh; rotate: -14deg; }
  64%  { translate: 112cqw 14cqh; rotate: -10deg; }
  100% { translate: 112cqw 14cqh; rotate: -10deg; }
}
/* l'abeille butine en huit autour des écrans de l'app, en zigzaguant */
.abeille { width: 30px; translate: 62cqw 72cqh; animation: capAbeille 14s ease-in-out infinite; }
.abeille__bzz { display: block; animation: capBzz .22s ease-in-out infinite alternate; }
.abeille .aile--g { transform-box: view-box; transform-origin: 18px 15px; animation: capAileAbeille .07s linear infinite alternate; }
.abeille .aile--d { transform-box: view-box; transform-origin: 22px 15px; animation: capAileAbeille .07s linear infinite alternate-reverse; }
@keyframes capAbeille {
  0%   { translate: 62cqw 72cqh; rotate: 40deg; }
  20%  { translate: 84cqw 58cqh; rotate: 110deg; }
  40%  { translate: 93cqw 84cqh; rotate: 200deg; }
  55%  { translate: 78cqw 94cqh; rotate: 260deg; }
  75%  { translate: 56cqw 86cqh; rotate: 330deg; }
  100% { translate: 62cqw 72cqh; rotate: 400deg; }
}
@keyframes capBzz { from { translate: -2px 1px; } to { translate: 2px -1px; } }
@keyframes capAileAbeille { from { rotate: -18deg; } to { rotate: 18deg; } }

/* l'oiseau traverse le haut de la section, de temps en temps */
.oiseau { width: 50px; translate: -12cqw 12cqh; animation: capOiseau 19s linear 3s infinite; }
.oiseau--bleu { animation-duration: 23s; animation-delay: 8s; }
.oiseau .aile { transform-box: view-box; transform-origin: 28px 21px; animation: capAileOiseau .32s ease-in-out infinite alternate; }
@keyframes capOiseau {
  0%   { translate: -12cqw 14cqh; }
  10%  { translate: 18cqw 7cqh; }
  20%  { translate: 48cqw 13cqh; }
  30%  { translate: 78cqw 5cqh; }
  40%  { translate: 112cqw 10cqh; }
  100% { translate: 112cqw 10cqh; }
}
@keyframes capAileOiseau { from { rotate: -25deg; } to { rotate: 20deg; } }

/* le chat dort sur les garanties : il respire, sa queue bouge, les z montent */
.chat { left: auto !important; right: 14px; top: -42px !important; width: 74px; }
.chat .corps { transform-box: view-box; transform-origin: 40px 44px; animation: capRespire 3.6s ease-in-out infinite; }
.chat .queue { transform-box: view-box; transform-origin: 14px 33px; animation: capQueue 4s ease-in-out infinite alternate; }
.chat .zzz { animation: capZzz 3.2s ease-in-out infinite; }
@keyframes capRespire { 0%, 100% { scale: 1 1; } 50% { scale: 1.01 1.05; } }
@keyframes capZzz { 0% { opacity: 0; translate: -2px 6px; } 30%, 70% { opacity: 1; } 100% { opacity: 0; translate: 4px -8px; } }

/* l'escargot de l'en-tête : ses antennes oscillent pendant qu'il avance */
.vivant .escargot-progres__bete .antennes { transform-origin: 51px 22px; }

/* le chat dort sur la première garantie : la colonne des garanties sert de repère */
.garanties { position: relative; }

/* sur téléphone, l'écureuil crie à gauche : à droite, il sortirait de l'écran */
@media (max-width: 759px) { .ecureuil__cri { left: auto; right: 92%; rotate: -8deg; } }

/* ================================================================ stabilité : rien ne saute quand on clique
   (passe de tests du 30/10/2026 : mode TDAH, onglets, accordéons, survols) */
/* onglets Thierry / Chimok : les deux listes occupent la même case, la plus haute donne la hauteur ; on passe de l'une à l'autre en fondu */
.selecteur--actif { display: grid; grid-template-columns: minmax(0, 1fr); }
.selecteur--actif > .selecteur__panneau { grid-row: 3; grid-column: 1; }
.selecteur--actif > .selecteur__panneau[hidden] { display: flex; visibility: hidden; opacity: 0; }
.js .selecteur--actif > .selecteur__panneau { transition: opacity .25s ease, visibility 0s; }
.js .selecteur--actif > .selecteur__panneau[hidden] { transition: opacity .18s ease, visibility 0s .18s; }
/* survol : seules les cartes qu'on ne clique pas font la gelée ; un bouton qui se trémousse s'arrête sous la souris ou le doigt */
@media (hover: hover) {
  .vivant details.carte:hover, .vivant .carte:has(a):hover, .vivant .avis:hover { rotate: none; scale: none; }
}
.vivant .bouton:hover, .vivant .bouton:focus-visible, .vivant .bouton:active { animation-play-state: paused; }
/* accordéons : la réponse se déplie en douceur là où le navigateur sait le faire (sinon, elle s'ouvre d'un coup, comme avant) */
@supports selector(::details-content) {
  :root { interpolate-size: allow-keywords; }
  .js details.question::details-content { height: 0; overflow: clip; transition: height .3s cubic-bezier(.2,.7,.3,1), content-visibility .3s allow-discrete; }
  .js details.question[open]::details-content { height: auto; }
}
/* un décor ne sert jamais de repère au défilement : sinon, quand une réponse s'ouvre au-dessus d'un animal (la poule de la FAQ
   sur téléphone), le navigateur fait glisser toute la page pour garder l'animal à sa place, et la question saute */
.scene, .deco, .papillon, .effets, .escargot-progres { overflow-anchor: none; }
/* bascule du mode TDAH (vivant.js) : les décors s'effacent en fondu avant de partir, et reviennent en fondu */
.extinction .deco, .extinction .scene, .extinction .papillon, .extinction .escargot-progres, .extinction .effets { opacity: 0 !important; transition: opacity .3s ease !important; }
.allumage .deco, .allumage .papillon { animation: capAllume .5s ease both; }
@keyframes capAllume { from { opacity: 0; } }

/* ================================================================ mode avec TDAH : les personnages vivent, la ferme s'installe (30/10/2026) */
/* les autocollants dessinés : le trait tremble comme un dessin fait main (filtres de build.py), seulement à l'écran (.anime) */
.vivant .dessin-vivant.anime { animation: capTremble .375s steps(1) infinite; }
@keyframes capTremble { 0% { filter: url(#cap-tremble-1); } 33.33% { filter: url(#cap-tremble-2); } 66.66% { filter: url(#cap-tremble-3); } }

/* les animaux qui marchent (31/10/2026, retour de Nicolas : ils glissaient les pattes immobiles, et la vache reculait).
   distractions.js les promène : il pose leur position (translate), .gauche quand ils vont vers la gauche (ils se retournent),
   .marche quand ils avancent (leurs pattes ne bougent qu'à ce moment-là), .arret quand ils s'arrêtent (ils broutent, picorent,
   reniflent). Leur vitesse suit la longueur de leurs pas, ils ne patinent pas. Sans JavaScript, ils restent à leur place.
   Chaque patte tourne autour de sa hanche (--o, posé dans le dessin) ; les deux paires diagonales (.pa, .pb) alternent.
   --cadence : la durée d'une enjambée ; --amp : l'angle de la patte de part et d'autre de la verticale. */
.marcheur { top: auto; transition: scale .45s ease-in-out; }
.marcheur.gauche { scale: -1 1; }
/* en marche, les pattes partent de la verticale (retard négatif d'une demi-enjambée) et balancent à vitesse constante : le pied posé
   recule exactement aussi vite que le corps avance, il ne glisse pas. À l'arrêt, distractions.js les remet droites en douceur. */
.marcheur .patte { transform-box: view-box; transform-origin: var(--o); }
.marcheur.marche .patte { animation: capPas var(--cadence, .45s) linear calc(var(--cadence, .45s) * -.5) infinite alternate; }
.marcheur.marche .pb { animation-direction: alternate-reverse; }
@keyframes capPas { from { rotate: calc(var(--amp, 14deg) * -1); } to { rotate: var(--amp, 14deg); } }
@keyframes capHoche { to { translate: 0 -1px; } }
@keyframes capBob { from { translate: 0 0; } to { translate: 0 -2px; } }
@keyframes capBrouteArret { 0%, 100% { rotate: 0deg; } 16%, 82% { rotate: 26deg; } 40% { rotate: 22deg; } 62% { rotate: 27deg; } }
/* la poule fait quelques pas, s'arrête et picore (haut de page) ; une autre picore sur place (questions) */
.poule { width: 48px; }
.poule .corps { transform-box: view-box; transform-origin: 28px 42px; }
.poule.marcheur { bottom: 13px; translate: 4cqw 0; --cadence: .2s; --amp: 24deg; }
.poule.marche .corps { animation: capHoche .2s ease-in-out infinite alternate; }
.poule.arret .corps, .poule--picore .corps { animation: capPicore 1.8s ease-in-out infinite; }
.poule--picore { translate: calc(100cqw - 70px) calc(100cqh - 58px); scale: -1 1; }
@keyframes capPicore { 0%, 55%, 100% { rotate: 0deg; } 66% { rotate: 30deg; } 74% { rotate: 8deg; } 82% { rotate: 30deg; } 90% { rotate: 0deg; } }
/* le lapin se promène par bonds au bas du programme ; en l'air, sa grande patte arrière file en arrière et la patte avant se tend ;
   entre deux séries de bonds, il s'arrête, les oreilles aux aguets ; pour disparaître, il plonge dans un de ses deux terriers
   (.terre : tout ce qui passe sous le sol est coupé, et le rebord du terrier, posé devant lui, cache la coupure).
   Le sol passe au centre du trou : à 7/20 de la hauteur du terrier, depuis le bas. */
.terrier, .terrier-bord { top: auto; bottom: 11px; width: 64px; }
.terrier--1, .terrier-bord--1 { left: 14%; }
.terrier--2, .terrier-bord--2 { left: 68%; }
.lapin.terre { clip-path: inset(-200% -200% 0 -200%); }
.lapin { width: 46px; bottom: 17px; translate: 8cqw 0; }
.lapin__saut { display: block; transform-origin: 50% 92%; }
.lapin .oreilles { transform-box: view-box; transform-origin: 35px 17px; animation: capOreilles 2.4s ease-in-out infinite; }
.lapin .pied { transform-box: view-box; transform-origin: 22px 57px; transition: translate .1s ease-out, rotate .1s ease-out; }
.lapin .patte-avant { transform-box: view-box; transform-origin: 34px 56px; transition: translate .1s ease-out; }
.lapin.saut .pied { translate: -7px 3px; rotate: 16deg; }
.lapin.saut .patte-avant { translate: 3px -2px; }
@keyframes capOreilles { 0%, 70%, 100% { rotate: 0deg; } 78% { rotate: -12deg; } 86% { rotate: 6deg; } }
/* écrans moyens : la bande libre sous le dernier texte du programme tombe à 47 px ; le lapin rapetisse et bondit moins haut
   (--saut : la hauteur d'un bond, en unités du dessin, lue par distractions.js) */
@media (max-width: 1180px) { .lapin { width: 34px; bottom: 3px; --saut: 9; } .terrier, .terrier-bord { width: 48px; bottom: -2px; } }
/* le chien, au bas de « Tu te reconnais ? », à droite de la flèche : assis, il remue la queue et penche la tête. De temps en
   temps il se lève (.assis s'en va, la pose debout surgit et s'ébroue), va renifler un peu plus loin et se rassoit (distractions.js). */
.chien { width: 58px; bottom: 14px; translate: 72cqw 0; --cadence: .3s; --amp: 20deg; }
.chien.assis .chien__debout, .chien:not(.assis) .chien__assis { display: none; }
.chien__assis, .chien__debout { transform-box: view-box; transform-origin: 30px 64px; animation: capPose .42s ease-out; }
.chien__debout { animation: capPose .42s ease-out, capEbroue .5s ease-in-out .38s; }
.chien__assis .queue { transform-box: view-box; transform-origin: 18px 54px; animation: capRemue .24s ease-in-out infinite alternate; }
.chien__assis .tete { transform-box: view-box; transform-origin: 42px 30px; animation: capPenche 4.5s ease-in-out infinite; }
.chien__debout .queue { transform-box: view-box; transform-origin: 11px 38px; animation: capRemue .18s ease-in-out infinite alternate; }
.chien__debout .tete { transform-box: view-box; transform-origin: 40px 37px; }
.chien.marche .chien__debout .tete, .chien.marche .chien__debout .corps { animation: capBob .3s ease-in-out infinite alternate; }
.chien.arret:not(.leve) .chien__debout .tete { animation: capRenifleSol 1.8s ease-in-out infinite; }
@keyframes capRemue { from { rotate: -14deg; } to { rotate: 16deg; } }
@keyframes capPenche { 0%, 40%, 100% { rotate: 0deg; } 55%, 80% { rotate: -12deg; } }
@keyframes capPose { 0% { scale: 1.04 .8; } 50% { scale: .98 1.06; } 100% { scale: 1 1; } }
@keyframes capEbroue { 0%, 100% { rotate: 0deg; } 20% { rotate: -5deg; } 40% { rotate: 5deg; } 60% { rotate: -4deg; } 80% { rotate: 3deg; } }
@keyframes capRenifleSol { 0%, 100% { rotate: 0deg; } 25%, 70% { rotate: 16deg; } 45% { rotate: 12deg; } }
/* les fleurettes que la vache et le mouton viennent brouter (distractions.js) : elles se balancent ; mangées (.mangee), elles
   rentrent dans le sol, puis repoussent en ressort */
.fleurette { top: auto; left: var(--x); width: 15px; transform-origin: 50% 100%; transition: scale 1s cubic-bezier(.34,1.56,.5,1), opacity .3s ease; }
.fleurette svg { transform-origin: 50% 100%; animation: capBalance 2.8s ease-in-out var(--d, 0s) infinite alternate; }
.fleurette--vache { bottom: 13px; }
.fleurette--mouton { bottom: 11px; width: 13px; }
.fleurette.mangee { scale: 1 0; opacity: 0; transition: scale .8s ease-in, opacity .25s ease-in .6s; }
@keyframes capBalance { from { rotate: -5deg; } to { rotate: 5deg; } }
@media (max-width: 1180px) { .fleurette--vache { width: 13px; bottom: 6px; } }
/* la vache se promène tout doucement au bas des avis, s'arrête pour brouter, et repart dans l'autre sens */
.vache { width: 88px; bottom: 13px; translate: 3cqw 0; --cadence: .55s; --amp: 13deg; }
.vache .tete { transform-box: view-box; transform-origin: 79px 28px; }
.vache.marche .tete { animation: capHoche .55s ease-in-out infinite alternate; }
.vache.arret .tete { animation: capBrouteArret 4.2s ease-in-out infinite; }
.vache .queue { transform-box: view-box; transform-origin: 15px 24px; animation: capQueue 2.6s ease-in-out infinite alternate; }
/* écrans moyens : la note sous les avis descend, la vache (et la poule du haut de page) se font un peu plus petites et plus bas */
@media (max-width: 1180px) { .vache { width: 76px; bottom: 6px; } .poule.marcheur { bottom: 6px; } }
@keyframes capBroute { 0%, 38%, 100% { rotate: 0deg; } 48%, 82% { rotate: 26deg; } 60% { rotate: 22deg; } 70% { rotate: 27deg; } }
/* les moutons : l'un se promène au bas de « C'est pour toi si », broute, et va se cacher derrière sa botte de foin (posée devant
   lui dans la scène, plus large et plus haute que lui) ; l'autre broute près de la liste d'attente */
.foin { left: auto; right: 4%; top: auto; bottom: 11px; width: 96px; }
.mouton { width: 66px; }
.mouton .tete { transform-box: view-box; transform-origin: 60px 26px; }
.mouton--marche { bottom: 11px; translate: 80cqw 0; --cadence: .26s; --amp: 18deg; }
.mouton--marche.marche .corps, .mouton--marche.marche .tete { animation: capBob .26s ease-in-out infinite alternate; }
.mouton--marche.arret .tete { animation: capBrouteArret 3.6s ease-in-out infinite; }
.mouton--broute { translate: calc(100cqw - 96px) calc(100cqh - 58px); }
.mouton--broute .tete { animation: capBroute 7s ease-in-out infinite; }

/* ================================================================ retours du collègue (30/10/2026) */
/* haut de page : le nom et le rôle de chacun sous son personnage dessiné, pour savoir qui est qui (les photos sont dans
   les cartes du duo). Même largeur que le dessin ; l'écart de 7,1 % centre chaque nom sous son bonhomme (x 130 et 430 sur 560) */
.visages { list-style: none; max-width: 560px; margin: 10px auto 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 7.1%; }
.visage { display: flex; flex-direction: column; align-items: center; min-width: 0; text-align: center; font-size: 14px; line-height: 1.35; color: var(--gris); }
@media (max-width: 760px) { .visages { max-width: 320px; margin-top: 6px; } .visage { font-size: 13px; } }
.visage strong { font-size: 16px; color: var(--encre); }
.visage--science strong { color: var(--bleu); }
.visage--vecu strong { color: var(--orange-texte); }
/* les gribouillis (étoile, tourbillon) se plaçaient mal sur téléphone : ils restent sur grand écran seulement */
@media (max-width: 760px) { .gribouillis { display: none; } }
/* la fleur : couleurs et formes repliées, pour ne pas brouiller l'essentiel ; puis à quoi elle sert */
.personnaliser { border-top: 2px dotted var(--bleu); padding-top: 14px; }
.personnaliser summary { cursor: pointer; font-family: var(--titre); font-weight: 800; font-size: 22px; line-height: 1.1; text-transform: uppercase; color: var(--bleu); list-style: none; }
.personnaliser summary::-webkit-details-marker { display: none; }
.personnaliser summary::before { content: "+ "; }
.personnaliser[open] summary::before { content: "− "; }
.personnaliser summary span { font-family: var(--texte); font-weight: 500; font-size: 14px; text-transform: none; color: var(--gris); }
.personnaliser > .reglages { margin-top: 14px; }
/* page fleur : le mode d'emploi en trois étapes, repris dans la page (étape 1 les curseurs, 2 la lecture, 3 garder sa fleur) */
.etapes-fleur { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 28px; max-width: 980px; }
.etapes-fleur li { display: flex; align-items: center; gap: 12px; flex: 1 1 240px; }
.etapes-fleur__num { flex: none; width: 40px; height: 40px; border: 2.5px solid var(--bleu); border-radius: 50%; display: grid; place-items: center; background: var(--surface); font-family: var(--titre); font-weight: 800; font-size: 22px; color: var(--bleu); }
.etapes-fleur li > span:last-child { display: flex; flex-direction: column; font-size: 14px; line-height: 1.35; color: var(--gris); }
.etapes-fleur strong { font-size: 16px; color: var(--encre); }
.reglages__etape { margin-bottom: -24px; }
.curseur__aide { font-size: 14px; line-height: 1.4; color: var(--gris); margin-top: 2px; }
.outil-fleur__suite { margin-top: 6px; }
/* la lecture de ta fleur : le pétale le plus lourd, ce qu'en dit Thierry, ce que fait Chimok, où le programme en parle */
.lecture-fleur { max-width: 900px; padding: clamp(20px, 3vw, 32px); gap: 12px; scroll-margin-top: 90px; }
.lecture-fleur__verdict { font-size: 18px; font-weight: 600; }
.lecture-fleur__petales { display: flex; flex-direction: column; gap: 14px; }
.lecture { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; border-radius: 14px; background: var(--surface); }
.lecture[hidden] { display: none; }
.lecture .lecture__titre { font-family: var(--titre); font-weight: 800; font-size: 24px; line-height: 1; text-transform: uppercase; color: var(--bleu); }
.lecture__partie { display: grid; grid-template-columns: 6.4rem 1fr; align-items: baseline; font-size: 16px; line-height: 1.45; }
.lecture__partie strong { font-family: var(--titre); font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
@media (max-width: 520px) { .lecture__partie { grid-template-columns: 1fr; } }
.lecture-fleur__petite { font-size: 15px; line-height: 1.5; }
/* et maintenant ? garder sa fleur, comprendre chaque pétale, ou rester en contact */
.suite-fleur { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 24px; align-items: stretch; }
.suite-fleur__carte { padding: 26px; gap: 12px; }
.suite-fleur__carte--papier { border: 2px dashed var(--bleu); }
.suite-fleur__tete { display: flex; align-items: center; gap: 12px; }
.suite-fleur__bas { margin-top: auto; padding-top: 6px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.duo-mini li { max-width: none; }

/* ---------- Pour aller plus loin (/ressources/) : les références de chaque vidéo, liées depuis les fiches récap ---------- */
@media (min-width: 900px) { .ressources .faq-mise-en-page__cote--colle { max-height: calc(100vh - 110px); overflow-y: auto; padding-right: 6px; } }
.ressources__duo { display: flex; align-items: flex-end; }
.ressources__duo img { width: 96px !important; transform: rotate(-5deg) !important; }
.ressources__duo img + img { margin-left: -14px; transform: rotate(6deg) !important; }
.ressources__recherche { display: flex; flex-direction: column; gap: 6px; }
.ressources__recherche label { font-size: 14px; font-weight: 600; }
.ressources__recherche input { font: inherit; font-size: 16px; padding: 10px 14px; border: 2px solid var(--ligne); border-radius: 12px; background: var(--surface); color: var(--encre); }
.ressources__recherche input:focus { outline: none; border-color: var(--bleu); }
.ressources__resultat { font-size: 14px; min-height: 1.2em; }
.ressources__sommaire a { font-size: 15px; padding: 4px 10px 4px 4px; }
.ressources__partie { font-family: var(--titre); font-weight: 800; font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 8px; }
.ressources__partie--vecu { color: var(--orange-texte); }
.ressources__sommaire a[href^="#module"], .ressources__sommaire a[href^="#chimok"] { --survol: var(--nuance-orange); }
.ressources__sommaire a:hover { background: var(--survol, var(--nuance-bleue)); }
.ressources__intro p { font-size: 17px; }
.ressources__bases-bloc { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.ressources__bases { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.ressources__base { flex-direction: row; align-items: flex-start; gap: 12px; color: var(--encre); text-decoration: none; border: 2px solid var(--nuance-bleue); }
.ressources__base:hover { border-color: var(--bleu); }
.ressources__base svg { flex: none; }
.ressources__base > span { display: flex; flex-direction: column; gap: 4px; font-size: 15px; line-height: 1.45; }
.ressources__base strong { font-size: 17px; line-height: 1.3; }
.ressources__urgence { font-size: 16px; font-weight: 500; }
.ressources__partie-titre { font-family: var(--main); font-weight: 400; font-size: clamp(28px, 2.6vw, 34px); line-height: 1.1; margin-top: 28px; }
.ressources__partie-titre--vecu { color: var(--orange-texte); }
.ressources__groupe[hidden], .ressource[hidden], .ref[hidden] { display: none !important; }
.theme-questions__titre--vecu { color: var(--orange-texte); }
.ressource summary { display: flex; flex-direction: column; gap: 4px; }
.ressource__rang { font-size: 13px; font-weight: 500; color: var(--gris); }
.ressource__titre { font-size: 19px; font-weight: 600; line-height: 1.3; }
.ressource--vecu summary::after { color: var(--orange-texte); }
.ressource--vecu summary:hover { color: var(--orange-texte); }
details.ressource--vecu[open] { border-color: var(--orange); }
.ressource--arrivee { box-shadow: 0 0 0 4px var(--nuance-bleue); transition: box-shadow .6s ease; }
.ressource--vecu.ressource--arrivee { box-shadow: 0 0 0 4px var(--nuance-orange); }
.ressource__liste-titre { font-family: var(--titre); font-weight: 800; font-size: 17px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bleu); margin-top: 6px; }
.ressource--vecu .ressource__liste-titre { color: var(--orange-texte); }
.refs { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.ref { display: flex; gap: 12px; align-items: flex-start; }
.ref__type { flex: none; display: inline-block; min-width: 108px; padding: 3px 10px; border-radius: 999px; background: var(--nuance-bleue); color: var(--bleu); font-size: 12.5px; font-weight: 600; line-height: 1.4; text-align: center; }
.ressource--vecu .ref__type { background: var(--nuance-orange); color: var(--encre); }
.ressources__base .ref__type { align-self: flex-start; min-width: 0; }
.ref__corps { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ref__corps p { margin: 0; font-size: 15.5px; line-height: 1.5; }
.ref__nom { font-weight: 600; overflow-wrap: anywhere; }
.ref__nom a { color: var(--encre); text-decoration-color: var(--bleu); text-underline-offset: 3px; }
.ressource--vecu .ref__nom a { text-decoration-color: var(--orange); }
.ref__nom a:hover { color: var(--bleu); }
.ressource--vecu .ref__nom a:hover { color: var(--orange-texte); }
.ref__langue { font-size: 12px; font-weight: 500; color: var(--gris); border: 1px solid var(--ligne); border-radius: 999px; padding: 1px 7px; margin-left: 4px; white-space: nowrap; }
.ref__source { color: var(--gris); font-size: 14px !important; }
.ressources__note { margin-top: 18px; }
.ressources__note p { font-size: 15px; }
@media (max-width: 560px) { .ref { flex-direction: column; gap: 6px; } .ref__type { min-width: 0; } }
@media print { .ressources__recherche, .ressources__duo { display: none; } .ressource .reponse { display: flex !important; } }
.ressources .faq-mise-en-page__cote--colle { scrollbar-width: thin; scrollbar-color: var(--ligne) transparent; }
.ressources--recherche .ressources__intro, .ressources--recherche .ressources__bases-bloc { display: none; }
.ressources__part[hidden] { display: none !important; }
.ressources__part { display: flex; flex-direction: column; gap: 14px; }

/* ================================================================ personnages vivants (mode avec TDAH, 30/10/2026)
   SVG vif-… (site-assets.html) : une émotion de base (.emo--a), une qui alterne (.emo--b), une au survol ou quand
   l'onglet est choisi (.emo--c). Sans le mode TDAH : l'émotion de base, immobile, crayon normal.
   Avec : le trait tremble comme dans la charte (boil du kit, 8 images/s), les yeux clignent, les symboles d'état
   surgissent et l'émotion change ; seulement à l'écran (.anime, distractions.js). */
.hero__visuel .calque > svg.hero-personnes { position: static; display: block; width: 100%; height: auto; }
.douleur__visage { flex: none; display: block; width: 96px; height: 96px; margin: -10px -6px -6px -8px; }
.douleur__visage svg { display: block; width: 100%; height: 100%; }
/* le symbole d'état (« ? », gouttes…) touche le haut du cadrage et grossit en surgissant : il peut déborder vers le haut
   (retour de Nicolas : les « ? » étaient coupés) ; le bas reste coupé net, sous le cou */
.douleur__visage svg { overflow: visible; clip-path: inset(-40% -30% 0 -30%); }
@media (max-width: 640px) { .douleur__visage { width: 64px; height: 64px; margin: -4px -2px 0 -2px; } }
.onglet .onglet__dessin { flex: none; width: 116px; height: auto; transition: opacity .2s ease, transform .2s ease; }
.onglet[aria-selected="false"] .onglet__dessin { opacity: .75; }
.onglet[aria-selected="false"]:hover .onglet__dessin { opacity: 1; transform: translateY(-3px); }
@media (max-width: 640px) { .onglet .onglet__dessin { width: 92px; } }
.emo--b, .emo--c { opacity: 0; }
.vivant .visage-vivant.anime .trait-vivant { animation: capBoil .375s steps(1) infinite; }
@keyframes capBoil { 0% { filter: url(#cap-boil-1); } 33.33% { filter: url(#cap-boil-2); } 66.66% { filter: url(#cap-boil-3); } }
.vivant .visage-vivant.anime .cap-blink { transform-box: fill-box; transform-origin: center; animation: capBlinkKit 4.6s infinite; }
@keyframes capBlinkKit { 0%, 91%, 100% { transform: scaleY(1); } 93.5% { transform: scaleY(.1); } 96% { transform: scaleY(1); } }
.vivant .visage-vivant.anime .cap-extra { transform-box: fill-box; transform-origin: center; animation: capPopKit 3.6s cubic-bezier(.34,1.6,.5,1) infinite; }
.vivant .visage-vivant.anime .cap-extra-1 { animation-delay: .45s; }
@keyframes capPopKit { 0% { transform: scale(0); opacity: 0; } 14% { transform: scale(1.15); opacity: 1; } 24% { transform: scale(1); } 82% { transform: scale(1); opacity: 1; } 96%, 100% { transform: scale(.85); opacity: 0; } }
.vivant .visage-vivant.anime .emo--a { animation: capEmoA var(--cycle, 9s) steps(1) var(--decal, 0s) infinite; }
.vivant .visage-vivant.anime .emo--b { animation: capEmoB var(--cycle, 9s) steps(1) var(--decal, 0s) infinite; }
@keyframes capEmoA { 0%, 62% { opacity: 1; } 63%, 100% { opacity: 0; } }
@keyframes capEmoB { 0%, 62% { opacity: 0; } 63%, 100% { opacity: 1; } }
/* au survol d'une carte : le soulagement (douleurs) ; l'onglet choisi rit */
@media (hover: hover) {
  .vivant .douleur:hover .visage-vivant .emo--a, .vivant .douleur:hover .visage-vivant .emo--b { animation: none; opacity: 0; }
  .vivant .douleur:hover .visage-vivant .emo--c { opacity: 1; }
}
.vivant .onglet[aria-selected="true"] .visage-vivant .emo--a, .vivant .onglet[aria-selected="true"] .visage-vivant .emo--b { animation: none; opacity: 0; }
.vivant .onglet[aria-selected="true"] .visage-vivant .emo--c { opacity: 1; }

/* ================================================================ les auteurs des avis (30/10/2026)
   Portrait dessiné dans un rond, dans les deux modes (même place : rien ne bouge). Avec le mode TDAH, le trait tremble,
   l'émotion change de temps en temps et la personne rit quand on survole sa carte (voir « personnages vivants »). */
.avis-visage { flex: none; display: block; width: 52px; height: 52px; border-radius: 50%; overflow: hidden; border: 2px solid var(--ligne); background: var(--surface); }
.avis-visage svg { display: block; width: 100%; height: 100%; }
.temoignage__auteur { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.temoignage--vedette .temoignage__auteur { margin-top: 0; }
.temoignage--vedette .avis-visage { width: 64px; height: 64px; border-color: var(--encre); }
.avis__auteur .avis-visage { width: 44px; height: 44px; margin-right: 6px; }
/* portrait, prénom et pays (sur deux lignes s'il le faut), puis « Vérifié » : la même ligne dans toutes les cartes */
.avis__auteur:has(.avis-visage) { flex-wrap: nowrap; }
.avis__qui { flex: 1 1 auto; min-width: 0; line-height: 1.4; }
.avis__auteur:has(.avis-visage) .avis__verifie { flex: none; }
@media (hover: hover) {
  .vivant .temoignage:hover .visage-vivant .emo--a, .vivant .temoignage:hover .visage-vivant .emo--b,
  .vivant .avis:hover .visage-vivant .emo--a, .vivant .avis:hover .visage-vivant .emo--b { animation: none; opacity: 0; }
  .vivant .temoignage:hover .visage-vivant .emo--c, .vivant .avis:hover .visage-vivant .emo--c { opacity: 1; }
}

/* ================================================================ les animaux sur téléphone (30/10/2026)
   Retour de Nicolas : sur mobile, les animaux passaient sous le texte. Le texte y prend toute la largeur ; les seules
   places libres sont les marges du haut et du bas des sections (44 à 48 px). Les animaux qui marchent restent au sol,
   plus petits ; l'oiseau et l'avion volent dans la marge du haut ; l'abeille butine dans celle du bas ;
   les « ? » de la FAQ s'en vont. Rien ne change sur ordinateur. */
@media (max-width: 760px) {
  .poule { width: 40px; }
  .poule.marcheur { bottom: 5px; }
  .poule--picore { translate: calc(100cqw - 52px) calc(100cqh - 44px); }
  .chien { width: 44px; bottom: 6px; }
  .vache { width: 60px; bottom: 6px; }
  .lapin { width: 28px; bottom: 2px; }
  .terrier, .terrier-bord { width: 40px; bottom: -2px; }
  .terrier--1, .terrier-bord--1 { left: 8%; }
  .mouton { width: 52px; }
  .mouton--marche { bottom: 7px; }
  .fleurette--vache { width: 11px; bottom: 6px; }
  .fleurette--mouton { width: 10px; bottom: 7px; }
  .foin { bottom: 7px; width: 76px; }
  .mouton--broute { translate: calc(100cqw - 66px) calc(100cqh - 45px); }
  .oiseau { width: 34px; }
  .avion { width: 36px; }
  .abeille { width: 24px; }
  .flotte { display: none; }
  @keyframes capOiseau { 0% { translate: -12cqw 12px; } 10% { translate: 18cqw 5px; } 20% { translate: 48cqw 10px; } 30% { translate: 78cqw 3px; } 40%, 100% { translate: 112cqw 8px; } }
  @keyframes capAvion { 0% { translate: -14cqw 14px; rotate: -8deg; } 22% { translate: 22cqw 10px; rotate: -12deg; } 34% { translate: 44cqw 9px; rotate: 4deg; } 48% { translate: 68cqw 6px; rotate: -14deg; } 64%, 100% { translate: 112cqw 4px; rotate: -10deg; } }
  @keyframes capAbeille {
    0%   { translate: 62cqw calc(100cqh - 34px); rotate: 40deg; }
    20%  { translate: 84cqw calc(100cqh - 40px); rotate: 110deg; }
    40%  { translate: 93cqw calc(100cqh - 24px); rotate: 200deg; }
    55%  { translate: 78cqw calc(100cqh - 18px); rotate: 260deg; }
    75%  { translate: 56cqw calc(100cqh - 22px); rotate: 330deg; }
    100% { translate: 62cqw calc(100cqh - 34px); rotate: 400deg; }
  }
}

/* ================================================================ l'œuf de Pâques du pied de page : « Mode TDAH max » (turbo.js) */
/* l'interrupteur, sur le bleu du pied de page ; seulement avec le mode TDAH (.deco) */
.interrupteur--turbo { color: var(--fond); }
.interrupteur--turbo .interrupteur__aide { font-family: var(--main); font-size: 16px; color: rgba(248, 247, 247, .8); white-space: nowrap; }
.interrupteur--turbo .interrupteur__piste { border-color: var(--fond); background: transparent; }
.interrupteur--turbo .interrupteur__bouton { background: var(--fond); }
.interrupteur--turbo[aria-checked="true"] .interrupteur__piste { background: var(--orange); border-color: var(--orange); }
.interrupteur--turbo[aria-checked="true"] .interrupteur__bouton { background: var(--encre); }
@media (hover: hover) { .vivant .interrupteur--turbo:hover .interrupteur__piste { animation: capFrisson .4s ease-in-out; } }
@keyframes capFrisson { 25% { rotate: -6deg; } 50% { rotate: 5deg; } 75% { rotate: -3deg; } }
/* les deux fenêtres (la question, puis le burn-out) */
.turbo-fenetre { width: min(460px, calc(100% - 32px)); max-height: calc(100% - 32px); overflow: auto; padding: 26px 26px 24px;
  border: 3px solid var(--encre); border-radius: var(--rayon); background: var(--surface); color: var(--encre); box-shadow: 8px 8px 0 var(--encre); }
.turbo-fenetre::backdrop { background: rgba(34, 35, 35, .45); }
.turbo-fenetre--panne::backdrop { background: rgba(34, 35, 35, .3); -webkit-backdrop-filter: grayscale(1); backdrop-filter: grayscale(1); }
.turbo-fenetre__titre { font-family: var(--titre); font-weight: 800; font-size: 34px; line-height: 1; text-transform: uppercase; margin: 6px 0 14px; }
.turbo-fenetre p:not(.annotation) { font-size: 17px; line-height: 1.5; margin-bottom: 10px; }
.turbo-fenetre p.petit { font-size: 14px; color: var(--gris); }
.turbo-fenetre__batterie { display: flex; align-items: center; gap: 10px; }
.turbo-fenetre__batterie svg { width: 64px; height: 64px; flex: none; }
.turbo-fenetre__chuchote { font-family: var(--main); color: var(--orange-texte); }
.turbo-fenetre p.turbo-fenetre__chuchote { font-size: 22px; }
.turbo-fenetre__boutons { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-top: 18px; }
.vivant .turbo-fenetre[open] { animation: capFenetre .4s cubic-bezier(.34, 1.56, .64, 1); }
.vivant .turbo-fenetre--panne[open] { animation: capFenetrePanne .7s cubic-bezier(.5, 0, .3, 1); }
@keyframes capFenetre { from { opacity: 0; scale: .85; rotate: -3deg; } }
@keyframes capFenetrePanne { from { opacity: 0; translate: 0 -40px; rotate: 4deg; } 70% { rotate: -1.5deg; } }
/* la tempête : un calque fixe, qui ne prend aucune place et laisse passer les clics (l'interrupteur « Mode TDAH » reste utilisable) */
.turbo-scene { position: fixed; inset: 0; z-index: 70; overflow: hidden; pointer-events: none; }
.turbo-pensee, .turbo-dessin { position: absolute; left: 0; top: 0; will-change: transform, opacity; }
.turbo-pensee { font-family: var(--main); line-height: 1.1; white-space: nowrap; text-shadow: 0 0 3px var(--fond), 0 0 6px var(--fond); }
.turbo-pensee--orange { color: var(--orange-texte); }
.turbo-pensee--bleu { color: var(--bleu); }
.turbo-pensee--encre { font-family: var(--titre); font-weight: 800; text-transform: uppercase; color: var(--encre); }
.turbo-pensee--postit { padding: 6px 12px; background: var(--nuance-orange); color: var(--encre); text-shadow: none; box-shadow: 3px 4px 0 rgba(34, 35, 35, .18); }
.turbo-dessin svg, .turbo-dessin img { display: block; width: 100%; height: auto; }
.turbo-stop { position: fixed; z-index: 71; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); translate: -50% 0; box-shadow: 4px 4px 0 var(--orange); }
@media (prefers-reduced-motion: reduce) { .vivant .turbo-fenetre[open], .vivant .turbo-fenetre--panne[open] { animation: none; } }

/* ================================================================ retours du 30/10/2026 (soir) */
/* fin de « Tu te reconnais ? » : une phrase-titre qui annonce la suite, et une flèche vers le duo juste en dessous */
/* les 6 modules d'un coup d'œil (2 novembre 2026, à la place des onglets Chimok et Thierry) : chaque module avec sa partie
   de Thierry (la science) et sa partie de Chimok (le vécu), sur le fond bleu de la section programme */
.modules-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.module-ligne { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; background: var(--surface); border-radius: 14px; min-width: 0; }
.module-ligne__num { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--bleu); color: var(--fond); font-family: var(--titre); font-weight: 800; font-size: 22px; line-height: 1; }
.module-ligne__texte { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding-top: 1px; }
.module-ligne__partie { display: grid; grid-template-columns: 4.4rem 1fr; align-items: baseline; font-size: 16px; line-height: 1.35; }
.module-ligne__partie strong { font-family: var(--titre); font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }

/* relances entre deux sections (31/10/2026, reco marketing : 2 ou 3, comme repères) : une phrase manuscrite dans la couleur de la
   section suivante, une flèche fixe qui descend vers son titre, tracée une fois (immobile si l'on réduit les animations) */
.relance { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 6px 0 -10px; text-align: center; }
.relance__fleche svg { display: block; width: 26px; height: auto; }
#faq .relance { margin-top: 32px; }   /* sous le bouton « Voir toutes les questions » */
.transition .relance { margin: 14px 0 0; }
/* mots surlignés (5 novembre 2026) : lus en diagonale, ils racontent la page. Un trait de surligneur, orange ou bleu,
   qui se pose quand le mot arrive à l'écran avec la vision TDAH, déjà posé sinon. Rien ne bouge dans la mise en page. */
.surligne { color: inherit; padding: 0 .1em; margin: 0 -.1em; border-radius: .25em;
  background: linear-gradient(transparent 46%, var(--surligne, rgba(237, 111, 29, .38)) 46%, var(--surligne, rgba(237, 111, 29, .38)) 94%, transparent 94%) no-repeat 0 0 / 100% 100%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.surligne--bleu { --surligne: rgba(48, 86, 163, .26); }
.vivant .surligne[data-anim]:not(.vu) { background-size: 0 100%; }
.vivant .surligne[data-anim] { transition: background-size .8s cubic-bezier(.2, .7, .3, 1) .2s; }
@media (prefers-reduced-motion: reduce) { .vivant .surligne[data-anim] { background-size: 100% 100%; transition: none; } }
.prix__preuve { display: flex; align-items: flex-start; gap: 8px; font-size: 15px; line-height: 1.45; color: var(--gris); }
.prix__preuve svg { flex: none; margin-top: 1px; }
.transition { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; margin-top: 12px; }
.transition__titre { font-family: var(--titre); font-weight: 800; font-size: clamp(34px, 4.4vw, 52px); line-height: 1; text-transform: uppercase; }
.transition__suite { font-size: clamp(18px, 2vw, 21px); line-height: 1.45; font-weight: 600; max-width: 30em; }
.transition__fleche svg { display: block; width: 30px; height: auto; margin-top: 4px; }
.section--orange:has(.transition) { padding-bottom: clamp(28px, 4vw, 44px); }
/* la psychoéducation, c'est quoi : la définition, trois verbes, les sources (dans la transition après les douleurs) */
.transition { scroll-margin-top: 90px; }
.psycho { width: 100%; max-width: 820px; margin-top: 14px; padding: clamp(20px, 3vw, 30px); gap: 16px; text-align: left; }
.psycho__definition { font-size: clamp(18px, 2vw, 21px); line-height: 1.45; font-weight: 600; }
/* les trois cases du schéma (svg/psycho-*.svg) : en bande sur ordinateur, une ligne par case sur téléphone (dessin à gauche) */
.psycho__cases { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 22px; }
.psycho__cases li { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.psycho__dessin { display: block; width: 100%; height: auto; aspect-ratio: 300 / 250; border-radius: 12px; background: var(--fond); }
.psycho__cases p { display: flex; flex-direction: column; gap: 2px; font-size: 15px; line-height: 1.4; color: var(--gris); }
.psycho__cases strong { display: block; font-size: 18px; line-height: 1.2; color: var(--encre); }
.psycho__cases strong.science { color: var(--bleu); }
.psycho__cases strong.vecu { color: var(--orange-texte); }
/* C, A, P : l'initiale de chaque mot, en grand, donne le nom CAP TDAH */
.cap-lettre { font-family: var(--titre); font-weight: 800; font-size: 2.1em; line-height: .8; margin-right: 1px; }
.psycho__nom { font-size: 17px; font-weight: 600; }
@media (max-width: 640px) {
  .psycho__cases { grid-template-columns: 1fr; gap: 14px; }
  .psycho__cases li { display: grid; grid-template-columns: 44% 1fr; align-items: center; gap: 12px; }
}
.schema-module__note { max-width: 46em; margin: 4px auto 0; text-align: center; font-size: 15px; line-height: 1.5; color: var(--gris); }
.offre__sans { font-size: 14px; color: var(--gris); }
/* page Commencer : tout en un écran sur ordinateur (texte, visages et garanties à gauche, l'offre et son bouton à droite) ;
   sur téléphone : le titre, l'offre et son bouton d'abord, puis les garanties */
.commencer { padding: clamp(22px, 3vw, 36px) 0 clamp(32px, 4vw, 52px); }
.commencer__grille { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px 40px; }
.commencer__texte { flex: 1 1 400px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.commencer .offre { flex: 1 1 440px; }
.commencer__entete { display: flex; flex-direction: column; gap: 8px; }
.commencer__entete h1 { margin: 0; }
.commencer__entete > p:not(.annotation) { font-size: 16px; line-height: 1.5; }
.commencer__duo { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.commencer__duo li { display: flex; align-items: center; gap: 10px; flex: 1 1 200px; max-width: 260px; }
.commencer__duo img { flex: none; width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 3px solid var(--orange); }
.commencer__duo .visage--science img { border-color: var(--bleu); }
.commencer__duo span { display: flex; flex-direction: column; font-size: 13px; line-height: 1.35; color: var(--gris); }
.commencer__duo strong { font-size: 15px; color: var(--orange-texte); }
.commencer__duo .visage--science strong { color: var(--bleu); }
.commencer .garanties { flex: none; gap: 10px; }
.commencer .garanties > .scene { display: none; }   /* le chat des garanties se poserait sur les visages : page sobre, sans lui */
.commencer .garantie { padding: 12px 16px; background: var(--nuance-orange); }
.commencer .garantie h3 { font-size: 19px; }
.commencer .garantie p:not(.annotation) { font-size: 14px; line-height: 1.45; }
.commencer .garantie svg { width: 38px; height: 38px; }
.commencer .offre__sticker { top: -44px; width: 96px; }
.commencer__bas { display: flex; flex-direction: column; gap: 4px; }
.commencer__bas a { font-weight: 600; }
@media (max-width: 760px) {
  .commencer__grille { flex-direction: column; align-items: stretch; }
  .commencer__texte { display: contents; }
  .commencer__entete { order: 1; }
  .commencer .offre { order: 2; margin-top: 30px; }
  .commencer .garanties { order: 3; }
  .commencer__bas { order: 4; }
}
/* sur la page Commencer, le bouton « Commencer » de l'en-tête n'a plus lieu d'être (sa place est gardée : rien ne bouge) */
.entete__bouton[aria-current="page"] { visibility: hidden; }

/* ================================================================ deux nouveaux animaux (demande de Nicolas, 31/10/2026) */
/* la chatte écaille de tortue (d'après sa photo), redessinée le 31/10 : couchée de tout son long sur le haut de la carte de
   Lindsay, la tête vers nous, les pattes avant et la queue qui pendent par-dessus le bord (le bord est à 50/120 de sa largeur
   depuis le haut du dessin). Elle respire, cligne des yeux, remue le bout de la queue, bouge une oreille, parfois une patte. */
.temoignage--chat { position: relative; }
.temoignage .chat-ecaille { left: auto; right: 18px; top: calc(112px * -50 / 120); width: 112px; }
.chat-ecaille .corps { transform-box: view-box; transform-origin: 68px 50px; animation: capRespire 3.8s ease-in-out infinite; }
.chat-ecaille .queue { transform-box: view-box; transform-origin: 104px 47px; animation: capQueueChat 3.2s ease-in-out infinite alternate; }
.chat-ecaille .yeux { transform-box: view-box; transform-origin: 36.4px 31px; animation: capClignement 5.2s infinite; }
.chat-ecaille .oreille { transform-box: view-box; transform-origin: 44px 22px; animation: capOreilleChat 6.5s ease-in-out 1s infinite; }
.chat-ecaille .patte { transform-box: view-box; transform-origin: 41.6px 44px; animation: capPatteChat 8s ease-in-out 2.5s infinite; }
@keyframes capQueueChat { from { rotate: -6deg; } to { rotate: 10deg; } }
@keyframes capOreilleChat { 0%, 86%, 100% { rotate: 0deg; } 89% { rotate: 16deg; } 92% { rotate: -4deg; } 94% { rotate: 0deg; } }
@keyframes capPatteChat { 0%, 78%, 100% { rotate: 0deg; } 83% { rotate: 22deg; } 87% { rotate: 6deg; } 90% { rotate: 18deg; } 95% { rotate: 0deg; } }
@keyframes capClignement { 0%, 92%, 100% { scale: 1 1; } 95% { scale: 1 .12; } }
/* avis sur deux colonnes ou une (1000 px : marge pour la barre de défilement) : plus petite, elle se glisse dans l'écart de 18 px
   entre deux cartes ; ses oreilles débordent un peu sur le bas, vide, de la carte du dessus */
@media (max-width: 1000px) { .temoignage .chat-ecaille { right: 14px; top: calc(84px * -50 / 120); width: 84px; } }
/* l'akita, assis sur la colline de la fleur entre deux petites fleurs ; la queue en tire-bouchon remue, la tête se penche */
.fleur-illu .akita { top: auto; left: 75.1%; bottom: 14.6%; width: 9.4%; }
.fleur-illu--mobile .akita { left: 73.6%; bottom: 35.6%; width: 14%; }
.akita .queue { transform-box: view-box; transform-origin: 44px 33px; animation: capFretille .32s ease-in-out infinite alternate; }
.akita .tete { transform-box: view-box; transform-origin: 28px 30px; animation: capPenche 5.5s ease-in-out 1s infinite; }
@keyframes capFretille { from { rotate: -5deg; } to { rotate: 6deg; } }

/* ================================================================ les animaux cachés (demande de Nicolas, 31/10/2026 :
   « d'autres animaux, derrière des blocs, intégrés au site ») */
/* le hérisson se promène sur le haut des cartes de « Tu te reconnais ? » et saute d'une carte à l'autre par-dessus les écarts ;
   pour disparaître, il descend derrière une carte, et ressort plus tard de derrière une autre. Sa scène est une bande posée sur le
   haut de la grille (elle déborde : il reste visible en l'air), derrière les cartes. Il s'arrête parfois renifler. */
/* 10 px de plus au-dessus de la rangée (dans les deux modes : la bascule ne décale rien), pour que son dos ne touche jamais
   la dernière ligne de l'intro, même en plein saut ou sur téléphone */
.grille:has(> .scene) { position: relative; margin-top: 10px; }
.grille > .scene { inset: auto 0 100% 0; height: 40px; }
.herisson { width: 46px; bottom: -1px; translate: 2cqw 0; --cadence: .14s; --amp: 28deg; }
.herisson .museau { transform-box: view-box; transform-origin: 33px 22px; }
.herisson.marche .corps { animation: capHoche .14s ease-in-out infinite alternate; }
.herisson.arret .museau { animation: capRenifle .45s ease-in-out infinite alternate; }
@keyframes capRenifle { from { rotate: -3deg; } to { rotate: 5deg; } }
@media (max-width: 760px) { .herisson { width: 38px; } }
/* le renard passe la tête par-dessus le bloc « Dessine ta fleur TDAH » (il est derrière : on ne voit que ce qui dépasse du bord),
   pose ses pattes sur le bord, regarde à gauche, à droite, et redescend. Le bord est à 50/64 de la hauteur du dessin. */
.conteneur:has(> .scene) { position: relative; }
.renard { left: 9%; top: 0; width: 80px; }
.renard__dessin { display: block; transform-origin: 50% 78%; animation: capRenard 15s ease-in-out 3s infinite; }
.renard .oreille { transform-box: view-box; animation: capOreilleRenard 15s ease-in-out 3s infinite; }
.renard .oreille--g { transform-origin: 27px 14px; }
.renard .oreille--d { transform-origin: 53px 14px; animation-delay: 3.4s; }
@keyframes capRenard {
  0%, 52%   { translate: 0 0; rotate: 0deg; }
  57%       { translate: 0 -78%; rotate: 0deg; }
  63%       { translate: 0 -78%; rotate: -6deg; }
  70%       { translate: 0 -78%; rotate: 6deg; }
  76%       { translate: 0 -78%; rotate: 0deg; }
  80%       { translate: 0 -72%; }
  83%       { translate: 0 -78%; }
  88%, 100% { translate: 0 0; rotate: 0deg; }
}
@keyframes capOreilleRenard { 0%, 60%, 100% { rotate: 0deg; } 66% { rotate: -14deg; } 69% { rotate: 4deg; } 72% { rotate: 0deg; } }
@media (max-width: 760px) { .renard { width: 62px; } }
/* la chouette (voix bleue, la science) est perchée sur le bloc « Un module, pas à pas » : elle cligne des yeux et tourne la tête */
.schema-module { position: relative; }
.chouette { left: auto; right: 34px; top: calc(50px * -56 / 60); width: 50px; }
.chouette .tete { transform-box: view-box; transform-origin: 28px 30px; animation: capChouette 9s ease-in-out 2s infinite; }
.chouette .yeux { transform-box: view-box; transform-origin: 28px 24px; animation: capClignement 4.6s infinite; }
@keyframes capChouette { 0%, 30%, 100% { rotate: 0deg; translate: 0 0; } 36%, 52% { rotate: -18deg; translate: -1px 0; } 58%, 74% { rotate: 16deg; translate: 1px 0; } 80% { rotate: 0deg; translate: 0 0; } 85% { translate: 0 -2px; } 89% { translate: 0 0; } }
@media (max-width: 760px) { .chouette { right: 18px; width: 42px; top: calc(42px * -56 / 60); } }

/* ---------- merci : après le paiement (hors index) ---------- */
.merci__grille { display: flex; flex-wrap: wrap; align-items: center; gap: 28px 56px; }
.merci__texte { flex: 1 1 460px; min-width: 0; gap: 18px; }
.merci__dessin { flex: 0 1 300px; width: 300px; max-width: 70%; margin: 0 auto; position: relative; }
.merci__dessin img { display: block; width: 100%; height: auto; }
.merci__declic { position: absolute; left: 64%; top: 3%; width: 21%; }   /* l'ampoule du déclic, en haut à droite de la tête (repère du kit) */
.merci__declic svg { display: block; width: 100%; height: auto; }
.merci__etapes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.merci__etapes li { display: flex; align-items: flex-start; gap: 12px; }
.merci__etapes li > span:last-child { display: flex; flex-direction: column; gap: 2px; color: var(--gris); font-size: 15px; line-height: 1.45; }
.merci__etapes strong { color: var(--encre); font-size: 17px; }
.merci__num { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--orange); color: var(--encre); font-family: var(--titre); font-weight: 800; font-size: 19px; }
.merci__rappels { gap: 8px; background: var(--nuance-orange); border-color: transparent; font-size: 15px; }
@media (max-width: 760px) { .merci__dessin { order: -1; width: 200px; } }