/* ═══════════════════════════════════════════════════════════════════════════
   second brain — feuille du site vitrine. DA de Lucas, novembre 2026.
   Voir DESIGN.md : mascotte cerveau noir et blanc avec yeux, interface façon
   Apple HIG (fond groupé, sections blanches arrondies, police système, accent
   bleu système). La mascotte reste neutre ; seuls les domaines portent une
   couleur. Aucun effet de verre, aucun flou, aucune police embarquée.
   CSP : `style-src 'self'` — aucun style en ligne dans les pages.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ════════ JETONS (tokens.json, interface HIG) ════════ */
:root {
  /* Déclarer les deux schémas empêche Chrome de réécrire nos couleurs avec
     son « auto dark mode ». */
  color-scheme: light dark;

  --fond: #F2F2F7;                       /* background */
  --surface: #FFFFFF;                    /* surface */
  --surface-haute: #FFFFFF;              /* surface-raised */
  --texte: #000000;                      /* label */
  --texte-2: #5C5C60;                    /* secondary-label */
  --filet: rgba(60, 60, 67, 0.29);       /* separator */
  --remplissage: rgba(118, 118, 128, 0.12); /* fill */
  --accent-texte: #0062C4;               /* accent-text */
  --accent: #0062C4;                     /* accent (aplat) */
  --sur-accent: #FFFFFF;                 /* on-accent */
  --accent-lavis: rgba(0, 98, 196, 0.1); /* accent-wash */
  --alerte: #A84700;                     /* warning */
  --alerte-lavis: rgba(255, 141, 40, 0.16);

  /* Domaines : glyphe (texte/trait) et aplat (sous encre blanche). */
  --corps: #E9152D;     --aplat-corps: #E9152D;
  --etude: #007EAE;     --aplat-etude: #007EAE;
  --travail: #008932;   --aplat-travail: #008932;
  --esprit: #564ADE;    --aplat-esprit: #564ADE;
  --relations: #B02FC2; --aplat-relations: #B02FC2;

  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Helvetica Neue", sans-serif;
  --arrondi-chiffres: ui-rounded, "SF Pro Rounded", -apple-system, system-ui, sans-serif;

  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 20px;
  --e6: 24px; --e8: 32px; --e10: 48px; --e12: 64px; --e16: 96px;

  --r-controle: 12px; --r-carte: 26px; --r-capsule: 999px;
  --cible: 44px;

  --vite: 150ms;
  --courbe: cubic-bezier(.2, 0, 0, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #000000;
    --surface: #1C1C1E;
    --surface-haute: #2C2C2E;
    --texte: #FFFFFF;
    --texte-2: #AEAEB2;
    --filet: rgba(84, 84, 88, 0.6);
    --remplissage: rgba(118, 118, 128, 0.24);
    --accent-texte: #5CB8FF;
    --accent-lavis: rgba(0, 145, 255, 0.16);
    --alerte: #FF9230;
    --alerte-lavis: rgba(255, 146, 48, 0.16);
    --corps: #FF4245;
    --etude: #3CD3FE;
    --travail: #30D158;
    --esprit: #6D7CFF;
    --relations: #DB34F2;
  }
}

/* ════════ BASE ════════ */
* { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--fond);
  color: var(--texte);
  font: 400 1.0625rem/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
picture { display: block; }

::selection { background: var(--accent-lavis); }
:focus-visible { outline: 3px solid var(--accent-texte); outline-offset: 2px; border-radius: 6px; }
/* <main tabindex="-1"> reçoit le focus du lien « Aller au contenu » (sans
   script) ; inutile d'encadrer toute la page d'un anneau. */
main:focus { outline: none; }

a { color: var(--accent-texte); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

.cadre { max-width: 1100px; margin: 0 auto; padding: 0 var(--e5); }
p { max-width: 68ch; }
p + p { margin-top: var(--e3); }

/* ════════ TYPOGRAPHIE (échelle Dynamic Type, aucune approche ajoutée) ════ */
.affiche { font-size: clamp(2.25rem, 1rem + 4.5vw, 3.5rem); line-height: 1.07; font-weight: 700; text-wrap: balance; }
h2.titre { font-size: clamp(1.625rem, 1rem + 2.5vw, 2.125rem); line-height: 1.2; font-weight: 700; text-wrap: balance; margin-bottom: var(--e3); }
h3 { font-size: 1.0625rem; line-height: 1.3; font-weight: 600; }
.accroche { font-size: 1.375rem; line-height: 1.27; font-weight: 600; color: var(--texte-2); }
.chapo { font-size: 1.0625rem; color: var(--texte-2); max-width: 60ch; margin-bottom: var(--e6); }
.petit { font-size: .8125rem; line-height: 1.4; color: var(--texte-2); }
.etiquette { font-size: .8125rem; line-height: 1.4; font-weight: 400; color: var(--texte-2); text-transform: uppercase; }
.legende { margin: var(--e2) var(--e4) 0; }

/* ════════ EN-TÊTE ════════ */
header.haut { background: var(--fond); border-bottom: 0.5px solid var(--filet); }
.barre { display: flex; align-items: center; gap: var(--e3); padding: var(--e2) 0; flex-wrap: wrap; }
.barre .fin { margin-left: auto; display: flex; gap: var(--e4); align-items: center; flex-wrap: wrap; }
.marque { display: inline-flex; align-items: center; gap: var(--e2); min-height: var(--cible); text-decoration: none; color: var(--texte); }
.marque img { width: 44px; height: 33px; }
.marque b { font-size: 1.25rem; font-weight: 600; }
.barre nav { display: flex; gap: var(--e1); align-items: center; flex-wrap: wrap; font-size: .9375rem; }
.barre nav a {
  color: var(--texte); text-decoration: none;
  display: inline-flex; align-items: center; min-height: var(--cible);
  padding: 0 var(--e3); border-radius: var(--r-capsule);
}
.barre nav a:hover { background: var(--remplissage); }
.barre nav a.lien-actif { font-weight: 600; color: var(--accent-texte); background: var(--accent-lavis); }

/* ════════ SECTIONS ════════ */
main > section, .parcours-contenu > section { padding: var(--e10) 0; }
section.hero { padding: var(--e12) 0 var(--e10); }

/* Deux rails réservés. Chaque section relaie le cerveau du côté opposé,
   sans translation à travers le texte. Sticky natif, aucun script.
   Le rail grandit avec l'écran pour que le visage reste lisible. */
.parcours { max-width: 1280px; margin: 0 auto; --rail: clamp(80px, 8.5vw, 112px); }
.parcours-contenu { min-width: 0; overflow-wrap: anywhere; }
.parcours-contenu > section { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr) var(--rail); align-items: stretch; }
.parcours-contenu > section > .cadre { grid-column: 2; grid-row: 1; width: 100%; min-width: 0; }
.accompagnement { grid-column: 1; grid-row: 1; padding: var(--e2); pointer-events: none; }
.parcours-contenu > section:nth-child(even) > .accompagnement { grid-column: 3; }
.compagnon { position: sticky; top: var(--e8); width: 100%; }
/* Tous les cerveaux font face au centre de la page (Lucas, 5 nov. 2026).
   Le PNG regarde à droite : celui du rail droit est retourné. Miroir
   horizontal seul, sur le PNG statique comme sur le SVG vivant : même
   cerveau noir, aucune inversion de couleur. */
.parcours-contenu > section:nth-child(even) .compagnon-statique,
.parcours-contenu > section:nth-child(even) .compagnon-vivant { transform: scaleX(-1); }

/* ════════ MASCOTTE VIVANTE ════════
   Le même cerveau : corps et plis = le PNG d'origine, intact. Seuls les yeux
   sont redessinés en vectoriel, calés au pixel sur les blancs du PNG ; la
   pupille est une encoche qui touche le bord, comme sur l'original. Au repos
   (0 s et mouvement réduit) elle regarde vers le centre de la page : à
   droite dans le rail gauche (le PNG exact), à gauche dans le rail droit
   (le même PNG, en miroir). Le regard ne va jamais au-delà de « de face ».
   Mode sombre : même cerveau noir, contour blanc du PNG sombre. Aucune
   inversion de couleur.

   Un seul cycle de 24 s, partagé par cinq couches (corps, yeux, pupilles,
   paupières hautes, paupières basses) pour qu'elles restent synchrones :
     0 %  calme, tourné vers le centre →  8 %  coup d'œil de face
    11 %  curiosité, tête penchée     → 20 %  lecture vers le centre, saccades
    37 %  eurêka : yeux grands, saut  → 42 %  joie : yeux plissés, rebonds
    54 %  rêverie : dérive vers la face, vers le haut, paupières lourdes
    69 %  scepticisme : regard de face, une paupière plus basse
    81 %  somnolence : tout s'affaisse → 91 % réveil, double clignement
   Les saccades sont rapides (≈ 200 ms, freinage fort), les dérives lentes.
   Chaque section décale sa phase : deux cerveaux visibles ne sont jamais
   synchrones. */
.visage-definitions { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.compagnon-vivant { display: none; width: 100%; height: auto; overflow: visible; }
.compagnon-statique { display: block; }
.base-sombre { display: none; }
@media (prefers-color-scheme: dark) {
  .base-claire { display: none; }
  .base-sombre { display: inline; }
}
.yeux-effacement, .pupille, .paupiere { fill: #000; }
.blanc-oeil { fill: #fff; }
.compagnon-vivant g, .compagnon-vivant rect, .compagnon-vivant path { transform-box: view-box; }
.pose-cerveau { transform-origin: 326px 478px; }
.oeil-g, .oeil-g .paupiere { transform-origin: 430px 303px; }
.oeil-d, .oeil-d .paupiere { transform-origin: 550px 270px; }

@media (prefers-reduced-motion: no-preference) {
  .compagnon-statique { display: none; }
  .compagnon-vivant { display: block; --phase: 0s; --vie: cubic-bezier(.45, 0, .2, 1); }
  .parcours-contenu > section:nth-child(2) .compagnon-vivant { --phase: -9s; }
  .parcours-contenu > section:nth-child(3) .compagnon-vivant { --phase: -17s; }
  .parcours-contenu > section:nth-child(4) .compagnon-vivant { --phase: -4.5s; }
  .parcours-contenu > section:nth-child(5) .compagnon-vivant { --phase: -13s; }
  .parcours-contenu > section:nth-child(6) .compagnon-vivant { --phase: -20.5s; }
  .parcours-contenu > section:nth-child(7) .compagnon-vivant { --phase: -2s; }
  .parcours-contenu > section:nth-child(8) .compagnon-vivant { --phase: -11s; }
  .pose-cerveau, .oeil, .pupille, .paupiere {
    animation-duration: 24s;
    animation-iteration-count: infinite;
    animation-timing-function: var(--vie);
    animation-delay: var(--phase);
  }
  .pose-cerveau { animation-name: humeur-corps; }
  .oeil { animation-name: humeur-yeux; }
  .pupille { animation-name: humeur-regard; }
  .oeil-g .paupiere-haute { animation-name: humeur-paupiere-g; }
  .oeil-d .paupiere-haute { animation-name: humeur-paupiere-d; }
  .paupiere-basse { animation-name: humeur-sourire; }
}

/* Saccade : départ sec, freinage fort. Clignement : fermeture rapide.
   Plafond à −40 px : la pupille au milieu de l’œil, de face. Le regard va
   de face vers le centre de la page, jamais vers le bord extérieur. */
@keyframes humeur-regard {
  0% { transform: translate(0px, 0px); }
  8% { transform: translate(0px, 0px); animation-timing-function: cubic-bezier(.2, .9, .1, 1); }
  9.2% { transform: translate(-40px, -4px); }
  19% { transform: translate(-40px, -4px); animation-timing-function: cubic-bezier(.2, .9, .1, 1); }
  20% { transform: translate(-40px, 3px); }
  23.5% { transform: translate(-40px, 3px); animation-timing-function: cubic-bezier(.2, .9, .1, 1); }
  24.4% { transform: translate(-27px, 3px); }
  27.5% { transform: translate(-27px, 3px); animation-timing-function: cubic-bezier(.2, .9, .1, 1); }
  28.4% { transform: translate(-13px, 3px); }
  31.5% { transform: translate(-13px, 3px); animation-timing-function: cubic-bezier(.2, .9, .1, 1); }
  32.4% { transform: translate(0px, 3px); }
  36% { transform: translate(0px, 3px); animation-timing-function: cubic-bezier(.2, .9, .1, 1); }
  37% { transform: translate(0px, -4px); }
  42% { transform: translate(0px, -2px); }
  52% { transform: translate(0px, -2px); }
  55% { transform: translate(0px, 0px); }
  66% { transform: translate(-36px, -14px); }
  68% { transform: translate(-36px, -14px); animation-timing-function: cubic-bezier(.2, .9, .1, 1); }
  69.2% { transform: translate(-40px, 0px); }
  80% { transform: translate(-40px, 0px); }
  87% { transform: translate(-32px, 10px); }
  92% { transform: translate(-32px, 10px); animation-timing-function: cubic-bezier(.2, .9, .1, 1); }
  93.4% { transform: translate(0px, 0px); }
  100% { transform: translate(0px, 0px); }
}
@keyframes humeur-yeux {
  0% { transform: scale(1, 1); }
  4.6% { transform: scale(1, 1); animation-timing-function: cubic-bezier(.5, 0, 1, .6); }
  5.1% { transform: scale(1, .04); animation-timing-function: cubic-bezier(0, .4, .4, 1); }
  5.8% { transform: scale(1, 1); }
  36% { transform: scale(1, 1); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  37.2% { transform: scale(1.1, 1.1); }
  39.5% { transform: scale(1.1, 1.1); }
  42% { transform: scale(1, 1); }
  52.6% { transform: scale(1, 1); animation-timing-function: cubic-bezier(.5, 0, 1, .6); }
  53.1% { transform: scale(1, .04); animation-timing-function: cubic-bezier(0, .4, .4, 1); }
  53.8% { transform: scale(1, 1); }
  90.2% { transform: scale(1, 1); animation-timing-function: cubic-bezier(.5, 0, 1, .6); }
  90.7% { transform: scale(1, .04); animation-timing-function: cubic-bezier(0, .4, .4, 1); }
  91.3% { transform: scale(1, 1); animation-timing-function: cubic-bezier(.5, 0, 1, .6); }
  91.8% { transform: scale(1, .04); animation-timing-function: cubic-bezier(0, .4, .4, 1); }
  92.5% { transform: scale(1, 1); }
  100% { transform: scale(1, 1); }
}
/* Paupières hautes : la gauche et la droite divergent pour la concentration
   (coins intérieurs plus bas), la rêverie (coins extérieurs) et le
   scepticisme (la droite plisse bien plus que la gauche). */
@keyframes humeur-paupiere-g {
  0%, 19% { transform: translateY(0px) rotate(0deg); }
  21.5% { transform: translateY(26px) rotate(6deg); }
  35.8% { transform: translateY(26px) rotate(6deg); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  37% { transform: translateY(-6px) rotate(0deg); }
  40% { transform: translateY(0px) rotate(0deg); }
  43% { transform: translateY(10px) rotate(0deg); }
  52% { transform: translateY(10px) rotate(0deg); }
  54% { transform: translateY(0px) rotate(0deg); }
  59% { transform: translateY(46px) rotate(-5deg); }
  68% { transform: translateY(46px) rotate(-5deg); }
  70% { transform: translateY(16px) rotate(7deg); }
  80% { transform: translateY(16px) rotate(7deg); }
  86% { transform: translateY(66px) rotate(0deg); }
  90.6% { transform: translateY(66px) rotate(0deg); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  91.4%, 100% { transform: translateY(0px) rotate(0deg); }
}
@keyframes humeur-paupiere-d {
  0%, 19% { transform: translateY(0px) rotate(0deg); }
  21.5% { transform: translateY(26px) rotate(-6deg); }
  35.8% { transform: translateY(26px) rotate(-6deg); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  37% { transform: translateY(-6px) rotate(0deg); }
  40% { transform: translateY(0px) rotate(0deg); }
  43% { transform: translateY(10px) rotate(0deg); }
  52% { transform: translateY(10px) rotate(0deg); }
  54% { transform: translateY(0px) rotate(0deg); }
  59% { transform: translateY(44px) rotate(5deg); }
  68% { transform: translateY(44px) rotate(5deg); }
  70% { transform: translateY(54px) rotate(-10deg); }
  80% { transform: translateY(54px) rotate(-10deg); }
  86% { transform: translateY(60px) rotate(0deg); }
  90.6% { transform: translateY(60px) rotate(0deg); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  91.4%, 100% { transform: translateY(0px) rotate(0deg); }
}
/* Paupières basses : le sourire des yeux (joie), un léger plissement
   (scepticisme, somnolence). */
@keyframes humeur-sourire {
  0%, 40% { transform: translateY(0px); }
  42.5% { transform: translateY(-44px); }
  51% { transform: translateY(-44px); }
  54% { transform: translateY(0px); }
  68% { transform: translateY(0px); }
  70% { transform: translateY(-12px); }
  80% { transform: translateY(-12px); }
  86% { transform: translateY(-6px); }
  90.6% { transform: translateY(-6px); }
  91.4%, 100% { transform: translateY(0px); }
}
/* Corps : penché vers ce qu'il regarde, saut de l'eurêka (étirement puis
   tassement à l'atterrissage), rebonds de joie, affaissement du sommeil. */
@keyframes humeur-corps {
  0%, 8% { transform: translate(0px, 0px) rotate(0deg) scale(1, 1); }
  11% { transform: translate(0px, -2px) rotate(-3deg) scale(1, 1); }
  19% { transform: translate(0px, -2px) rotate(-3.5deg) scale(1, 1); }
  23% { transform: translate(0px, 1px) rotate(1.5deg) scale(1, 1); }
  35.6% { transform: translate(0px, 1px) rotate(2.5deg) scale(1, 1); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  37.4% { transform: translate(0px, -16px) rotate(1deg) scale(.96, 1.05); animation-timing-function: cubic-bezier(.5, 0, .9, .5); }
  39.2% { transform: translate(0px, 0px) rotate(0deg) scale(1.04, .95); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  41.5% { transform: translate(0px, 0px) rotate(1deg) scale(1, 1); }
  44% { transform: translate(0px, -6px) rotate(2.5deg) scale(1, 1); }
  46% { transform: translate(0px, 0px) rotate(1.5deg) scale(1.02, .98); }
  48% { transform: translate(0px, -4px) rotate(2.5deg) scale(1, 1); }
  50.5% { transform: translate(0px, 0px) rotate(1.5deg) scale(1, 1); }
  54% { transform: translate(0px, 0px) rotate(0deg) scale(1, 1); }
  64% { transform: translate(0px, -4px) rotate(-2.5deg) scale(1, 1); }
  68% { transform: translate(0px, -3px) rotate(-2deg) scale(1, 1); }
  71% { transform: translate(0px, 0px) rotate(-4.5deg) scale(1, 1); }
  79% { transform: translate(0px, 0px) rotate(-4deg) scale(1, 1); }
  86% { transform: translate(0px, 5px) rotate(-1deg) scale(1.015, .975); }
  90.4% { transform: translate(0px, 5px) rotate(-1deg) scale(1.015, .975); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  91.8% { transform: translate(0px, -8px) rotate(0deg) scale(.985, 1.025); }
  93.8%, 100% { transform: translate(0px, 0px) rotate(0deg) scale(1, 1); }
}

/* Les cartes se posent de 6 px pendant leur entrée, sans jamais se cacher.
   Sans support des timelines ou en mouvement réduit, tout reste statique. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .vue:not(:focus-within), .domaine {
      animation: poser linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 100%;
    }
    @keyframes poser {
      from { transform: translateY(6px); }
      to { transform: translateY(0); }
    }
  }
}

@media (max-width: 56.25em) {
  .parcours { --rail: 36px; }
  .accompagnement { padding: var(--e1); }
}
@media (prefers-reduced-motion: reduce) {
  .compagnon { position: static; }
}

/* Une section groupée : surface blanche, rayon carte, pas de bordure. */
.groupe { background: var(--surface); border-radius: var(--r-carte); overflow: hidden; }
/* Filet ENTRE deux lignes, jamais autour de la section ni après la dernière. */
.groupe > li + li, .groupe > .ligne + .ligne, .ecran > * + * { border-top: 0.5px solid var(--filet); }
.ligne { padding: var(--e4) var(--e5); }
.ligne h3 { margin-bottom: var(--e1); }
.ligne p { color: var(--texte-2); font-size: .9375rem; line-height: 1.45; }
/* Une explication se pose SOUS le bloc, en footnote. */
.pied-groupe { margin: var(--e2) var(--e5) 0; }

/* ════════ ACCUEIL ════════ */
/* Le produit d'abord : texte et aperçu côte à côte. */
.hero-grille { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--e10); align-items: center; }
.hero-texte { min-width: 0; }
.surtitre { display: inline-block; margin-bottom: var(--e4); }
.affiche { overflow-wrap: break-word; hyphens: manual; }
.benefice { margin-top: var(--e5); font-size: 1.375rem; line-height: 1.3; font-weight: 600; max-width: 32ch; text-wrap: pretty; }
.hero-grille .contexte { margin-top: var(--e3); color: var(--texte-2); max-width: 48ch; }
.actions { margin-top: var(--e8); display: flex; gap: var(--e3); align-items: center; flex-wrap: wrap; }
.hero-apercu { width: 100%; max-width: 30rem; justify-self: end; }

/* La chaîne tâche → projet → objectif → domaine : une section, quatre lignes. */
.chaine { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.chaine > li { padding: var(--e5); counter-increment: maillon; }
.groupe.chaine > li + li { border-top: 0; border-left: 0.5px solid var(--filet); }
.chaine .etiquette { display: block; margin-bottom: var(--e1); }
.chaine .etiquette::before { content: counter(maillon) " · "; }
.chaine b { display: block; font-weight: 600; line-height: 1.3; }
.chaine .quoi { display: block; margin-top: var(--e1); font-size: .9375rem; line-height: 1.4; color: var(--texte-2); }
.suite { margin-top: var(--e6); max-width: 60ch; }
.mesure { margin-top: var(--e3); max-width: 60ch; color: var(--texte-2); }

.ecrans { list-style: none; padding: 0; }

/* ════════ DÉMONSTRATION ILLUSTRATIVE (HTML/CSS, aucun script) ════════
   Vues recomposées, données fictives : jamais des captures de l'app. */
.note-demo { max-width: 60ch; margin-bottom: var(--e6); padding: var(--e3) var(--e4); border-radius: var(--r-controle); background: var(--surface); border: 1px solid var(--filet); font-size: .9375rem; line-height: 1.45; color: var(--texte-2); }
.note-demo strong { color: var(--texte); font-weight: 600; }
.badge-demo { display: inline-block; max-width: none; margin-bottom: var(--e2); padding: 2px 10px; border-radius: var(--r-capsule); background: var(--remplissage); font-size: .8125rem; line-height: 1.4; font-weight: 600; color: var(--texte); }
.vues { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e5); align-items: start; }
.vue { margin: 0; min-width: 0; }
.vue-tete { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--e2) var(--e3); flex-wrap: wrap; padding: var(--e4) var(--e5); }
.vue-titre { font-size: 1.25rem; line-height: 1.25; font-weight: 700; }
.compteur-bloc { display: flex; align-items: baseline; gap: var(--e1); flex-wrap: wrap; }
.compteur { font: 700 1.75rem/1.1 var(--arrondi-chiffres); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Le compteur de l'aperçu reprend celui de la vue « Aujourd'hui » (contrôlé
   par outils/verifier-site.mjs) : un peu plus discret, l'aperçu est un extrait. */
.compteur-rappel { font-size: 1.5rem; }
.groupe-titre { padding: var(--e3) var(--e5) 0; }
.ligne-etat { display: flex; justify-content: space-between; align-items: center; gap: var(--e3); flex-wrap: wrap; min-height: var(--cible); padding: var(--e2) var(--e5); max-width: none; }
.tache-texte { flex: 1; min-width: 0; overflow-wrap: break-word; }
.sous { display: block; font-size: .8125rem; line-height: 1.35; color: var(--texte-2); }
.sous.sans-projet { color: var(--alerte); font-weight: 600; }

/* Le fil d'une tâche : projet → objectif → domaine. */
.fil { list-style: none; padding: var(--e4) var(--e5); display: grid; gap: var(--e3); }
.fil li { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 2px var(--e3); align-items: baseline; }
.fil .etiquette::before { content: "↳ " / ""; }
.fil b { font-weight: 600; line-height: 1.3; overflow-wrap: break-word; }
.fil .progression, .fil .petit { grid-column: 2; }
.avec-pastille { display: flex; align-items: center; gap: var(--e2); }

/* Avancement d'un objectif : la valeur est TOUJOURS écrite à côté en texte. */
.progression { display: block; height: 6px; margin-top: var(--e2); border-radius: var(--r-capsule); background: var(--remplissage); overflow: hidden; }
.jauge { display: block; height: 100%; border-radius: var(--r-capsule); background: var(--accent); }
.d-travail .jauge { background: var(--travail); }
.p50 { width: 50%; }
.objectif { padding: var(--e4) var(--e5); }
.objectif-nom { margin-top: var(--e1); font-weight: 600; line-height: 1.3; }
.objectif .petit { margin-top: var(--e2); }

.releves { margin: 0; padding: var(--e1) 0 0; }
.releves div { display: flex; justify-content: space-between; align-items: center; gap: var(--e3); min-height: var(--cible); padding: var(--e2) var(--e5); }
.releves div + div { border-top: 0.5px solid var(--filet); }
.releves dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Visuellement masqué, lu par les lecteurs d'écran (état d'une coche). */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Liste façon Rappels, coche dans la couleur du domaine. */
.taches { list-style: none; padding: 0; }
.taches li { position: relative; display: flex; align-items: center; gap: var(--e3); min-height: var(--cible); padding: var(--e2) var(--e5); font-size: 1.0625rem; line-height: 1.35; }
.taches li + li { border-top: 0.5px solid var(--filet); }
.taches li.faite { color: var(--texte-2); }
.taches .heure { margin-left: auto; flex: none; white-space: nowrap; font-size: .9375rem; color: var(--texte-2); font-variant-numeric: tabular-nums; }
/* Coche façon Rappels : cercle au trait du domaine, puis disque plein (aplat
   du domaine) marqué d'une coche blanche. L'état se lit à la FORME. */
.taches li { --glyphe: var(--accent-texte); --aplat: var(--accent); }
.taches .d-corps { --glyphe: var(--corps); --aplat: var(--aplat-corps); }
.taches .d-etude { --glyphe: var(--etude); --aplat: var(--aplat-etude); }
.taches .d-travail { --glyphe: var(--travail); --aplat: var(--aplat-travail); }
.taches .d-esprit { --glyphe: var(--esprit); --aplat: var(--aplat-esprit); }
.taches .d-relations { --glyphe: var(--relations); --aplat: var(--aplat-relations); }
.coche { width: 22px; height: 22px; border-radius: 50%; flex: none; border: 2px solid var(--glyphe); display: grid; place-items: center; }
.faite .coche { border-color: var(--aplat); background: var(--aplat); }
.faite .coche::after { content: ""; width: 5px; height: 10px; border: solid var(--sur-accent); border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
.capsule { font-size: .8125rem; line-height: 1.4; font-weight: 600; border-radius: var(--r-capsule); padding: 6px 12px; background: var(--remplissage); color: var(--texte); }

.auto { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e5); }

/* Domaines : le glyphe porte la couleur, jamais le fond de la section. */
.domaines { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--e3); }
.domaine { background: var(--surface); border-radius: var(--r-carte); padding: var(--e5); }
.domaine h3 { display: flex; align-items: center; gap: var(--e2); margin-bottom: var(--e1); }
.domaine p { font-size: .9375rem; line-height: 1.4; color: var(--texte-2); }
.pastille { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.d-corps .pastille { background: var(--corps); }
.d-etude .pastille { background: var(--etude); }
.d-travail .pastille { background: var(--travail); }
.d-esprit .pastille { background: var(--esprit); }
.d-relations .pastille { background: var(--relations); }

.regles .ligne h3 { font-size: 1.0625rem; }
.envoi { margin-top: var(--e8); font-size: 1.375rem; line-height: 1.27; font-weight: 700; }

/* ════════ BOUTONS — capsules, cible 44 px minimum ════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  min-height: var(--cible); padding: 12px 22px; border: 0;
  border-radius: var(--r-capsule);
  font: 600 1.0625rem/1.2 var(--sans); text-decoration: none; cursor: pointer;
  transition: background-color var(--vite) var(--courbe), opacity var(--vite) var(--courbe);
}
.btn-principal { background: var(--accent); color: var(--sur-accent); }
.btn-principal:hover { opacity: .88; }
.btn-secondaire { background: var(--remplissage); color: var(--accent-texte); }
.btn-secondaire:hover { background: var(--accent-lavis); }
.btn-indisponible { background: var(--remplissage); color: var(--texte-2); cursor: not-allowed; }

/* Demande d'accès FERMÉE (aperçu de relecture) : aucun formulaire. */
.ferme { max-width: none; padding: var(--e6); }
.ferme p + p { margin-top: var(--e3); }
.ferme .petit { margin-top: var(--e4); }
.ferme .btn-indisponible { margin-top: var(--e5); }
.ferme .ferme-action { margin-top: var(--e5); }

/* Destinations en attente : aucun contrôle inactif, aucun faux code. */
.telechargements { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e5); margin-bottom: var(--e6); }
.destination { padding: var(--e6); display: flex; flex-direction: column; align-items: start; gap: var(--e3); min-width: 0; }
.destination h3 { font-size: 1.375rem; }
.destination p { font-size: .9375rem; color: var(--texte-2); }
.destination p + p { margin-top: 0; }
.destination .capsule { margin-top: auto; }
.acces-attente { padding-top: var(--e4); border-top: 1px solid var(--filet); width: 100%; }
.barre nav a { transition: background-color var(--vite) var(--courbe); }
.btn { transition: transform var(--vite) var(--courbe), background-color var(--vite) var(--courbe), opacity var(--vite) var(--courbe); }
@media (prefers-reduced-motion: no-preference) {
  .btn:active:not(:focus-visible) { transform: scale(.98); }
}
:focus-visible { scroll-margin-block: var(--e6); transition: none; }
.parcours-contenu > section { scroll-margin-top: var(--e5); }
@media (max-width: 56.25em) {
  .telechargements { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 37.5em) {
  .destination { padding: var(--e5); }
}

/* ════════ PAGES LÉGALES (lecture dans une section) ════════ */
.section-legale { padding: var(--e10) 0; }
.legal { width: calc(100% - 2 * var(--e5)); max-width: calc(68ch + 2 * var(--e8)); background: var(--surface); border-radius: var(--r-carte); padding: var(--e8); }
.legal h1 { font-size: clamp(1.625rem, 1rem + 2.5vw, 2.125rem); line-height: 1.2; font-weight: 700; }
.legal h2 { font-size: 1.375rem; line-height: 1.27; font-weight: 700; margin: var(--e10) 0 var(--e3); }
.legal h2:first-of-type { margin-top: var(--e8); }
.legal h3 { font-size: 1.0625rem; font-weight: 600; margin: var(--e6) 0 var(--e2); }
.legal h3.rubrique { margin-top: var(--e5); }
.legal p { margin-bottom: var(--e3); }
.legal p, .legal li, .legal td { color: var(--texte-2); }
.legal strong { color: var(--texte); font-weight: 600; }
.legal ul { padding-left: var(--e5); }
.legal ul li { margin-bottom: var(--e2); }
.legal table { width: 100%; border-collapse: collapse; margin: var(--e3) 0 var(--e5); font-size: .9375rem; }
.legal th, .legal td { text-align: left; padding: 11px var(--e4) 11px 0; border-top: 0.5px solid var(--filet); vertical-align: top; }
.legal tr:first-child th, .legal tr:first-child td { border-top: 0; }
.legal th { color: var(--texte); font-weight: 600; width: 11rem; }
.legal .maj { font-size: .8125rem; color: var(--texte-2); margin-top: var(--e2); }
.legal .maj.maj-bas { margin-top: var(--e8); }
.legal .merci-accroche { margin-bottom: var(--e5); }
.legal .retour { margin-top: var(--e6); }
/* Information que l'éditeur doit encore confirmer : dite en texte, encadrée
   d'un filet complet (pas seulement d'une couleur). */
.a-valider { border: 1px solid var(--alerte); background: var(--alerte-lavis); border-radius: var(--r-controle); padding: var(--e3) var(--e4); color: var(--texte); }
/* Un tableau large défile DANS son cadre, jamais la page. */
.scroller { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ════════ PIED ════════ */
footer.pied { margin-top: var(--e10); border-top: 0.5px solid var(--filet); }
footer.pied .cadre { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--e10); padding-top: var(--e10); padding-bottom: var(--e10); align-items: start; overflow-wrap: anywhere; }
.pied-marque { display: flex; align-items: center; gap: var(--e2); margin-bottom: var(--e2); }
.pied-marque img { width: 44px; height: 33px; }
.pied-marque b { font-size: 1.25rem; font-weight: 600; }
.pied-accroche { font-size: .9375rem; color: var(--texte-2); }
.pied-editeur { margin-top: var(--e5); }
footer.pied nav { display: flex; gap: var(--e10); }
.pied-titre { font-size: .8125rem; line-height: 1.4; font-weight: 400; text-transform: uppercase; color: var(--texte-2); margin: 0 0 var(--e2); }
footer.pied nav a { color: var(--texte); text-decoration: none; display: flex; align-items: center; min-height: 32px; font-size: .9375rem; }
footer.pied nav a:hover { color: var(--accent-texte); text-decoration: underline; }

/* Au doigt, chaque lien du pied atteint 44 px. */
@media (pointer: coarse) {
  footer.pied nav a { min-height: var(--cible); }
}

/* ════════ LIEN D'ÉVITEMENT ════════ */
.saut { position: absolute; left: -9999px; top: var(--e2); z-index: 100; display: inline-flex; align-items: center; min-height: var(--cible); padding: 0 var(--e4); border-radius: var(--r-capsule); background: var(--accent); color: var(--sur-accent); font-weight: 600; text-decoration: none; }
.saut:focus { left: var(--e4); }

/* ════════ ADAPTATION ════════ */
/* Points de rupture en em : avec une grande police choisie par l'utilisateur,
   la mise en page étroite arrive plus tôt au lieu de déborder. */
@media (max-width: 56.25em) { /* 900 px à 16 px */
  .hero-grille { grid-template-columns: 1fr; gap: var(--e8); }
  .hero-apercu { justify-self: start; max-width: 34rem; }
  .vues { grid-template-columns: minmax(0, 34rem); }
  .chaine { grid-template-columns: 1fr; }
  .groupe.chaine > li + li { border-left: 0; border-top: 0.5px solid var(--filet); }
  .domaines { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  footer.pied .cadre { grid-template-columns: 1fr; gap: var(--e8); }
  footer.pied nav { flex-wrap: wrap; gap: var(--e8); }
  .legal th { width: auto; display: block; padding-bottom: 2px; }
  .legal td { display: block; padding-top: 0; border-top: 0; padding-bottom: var(--e4); }
  .legal tr { display: block; border-top: 0.5px solid var(--filet); padding-top: var(--e3); }
  .legal tr:first-child { border-top: 0; }
}
@media (max-width: 37.5em) { /* 600 px */
  .cadre { padding: 0 var(--e4); }
  main > section, .parcours-contenu > section { padding: var(--e8) 0; }
  section.hero { padding: var(--e8) 0; }
  .auto, .domaines { grid-template-columns: 1fr; }
  .barre .fin { margin-left: 0; width: 100%; }
  .barre nav { margin-left: calc(-1 * var(--e3)); }
  .legal { width: calc(100% - 2 * var(--e4)); padding: var(--e5); }
  .ferme { padding: var(--e5); }
  .benefice { font-size: 1.25rem; }
  .vue-tete, .groupe-titre, .ligne-etat, .objectif, .fil, .releves div, .taches li { padding-left: var(--e4); padding-right: var(--e4); }
  .actions .btn { flex: 1 1 auto; }
}
/* Très petit écran ou très grande police : le fil passe sur une colonne. */
@media (max-width: 25em) { /* 400 px */
  .fil li { grid-template-columns: minmax(0, 1fr); }
  .fil .progression, .fil .petit { grid-column: 1; }
  /* La colonne de la mascotte et le texte agrandi laissent la priorité au
     libellé : l'heure passe sous la tâche plutôt que de la comprimer. */
  .parcours .taches li { display: grid; grid-template-columns: 22px minmax(0, 1fr); }
  .parcours .taches .heure { grid-column: 2; margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0ms !important; animation: none !important; }
}
@media (prefers-contrast: more) {
  :root { --filet: var(--texte-2); --texte-2: var(--texte); }
}