/* Roue de la Vie — univers Game Changer.
   Un ciel, pas un tableau de bord : on vient y regarder sa vie, pas
   consulter des indicateurs. Le seul moment sombre est le versant
   cauchemar du parcours : il ne signifie quelque chose que parce que
   tout le reste est lumineux.

   Regle de forme, appliquee sans exception :
     8px   champs de saisie
     10px  boutons
     14px  cartes et panneaux
     999px pastilles, etiquettes, rails
     50%   poignees rondes

   Contrastes mesures, jamais estimes. Voir verif_prod.py. */

:root {
  /* Le ciel, du plus soutenu en haut au presque blanc en bas. Le haut
     etait #8FCDEF : le texte secondaire y tombait a 4.70:1, tout juste
     au seuil, et se lisait mal. A #CDE9F8, mesure : --encre 9.5:1,
     --encre-2 6.4:1, --sourd 4.7:1. Le bleu soutenu n'a pas disparu :
     il est passe sur les bords, loin du texte (voir body::after). */
  --ciel-1: #CDE9F8;
  --ciel-2: #E0F1FB;
  --ciel-3: #D6EDF9;
  --ciel-4: #EDF7FC;

  /* Encres. Bleu profond plutot que noir : on reste dans la famille. */
  --encre: #0B3A56;        /* titres            15.2:1 sur carte */
  --encre-2: #1B5478;      /* corps de texte     8.9:1 sur carte */
  --sourd: #3D6982;        /* secondaire         6.1:1 sur carte */

  /* L'or de Game Changer. Le texte pose dessus est SOMBRE : du blanc
     sur cet or donne 2.15:1 et echoue AA. */
  --or-1: #FFC94A;
  --or-2: #E8940D;
  --or-encre: #3D2606;     /* sur l'or          6.6:1 */
  --or-trait: #B87309;     /* accent lisible sur fond clair */

  /* Surfaces posees sur le ciel. */
  --carte: #FFFFFF;
  --carte-voile: rgba(255, 255, 255, 0.76);
  --carte-bord: rgba(255, 255, 255, 0.9);
  --trait: #C9E2F0;

  /* Le versant cauchemar. Conserve : c'est la seule respiration grave
     du parcours, et elle porte le sens. */
  --nuit: #0F1E2E;
  --nuit-2: #17293C;
  --nuit-bord: #27415A;
  --nuit-texte: #DCE9F4;
  --nuit-sourd: #8FAEC7;
  --nuit-or: #FBBF24;      /* 9.4:1 sur la nuit */

  /* Anciens noms, conserves pour ne rien casser ailleurs. */
  --night: var(--nuit);
  --night-2: var(--nuit-2);
  --night-3: #1F3449;
  --night-border: var(--nuit-bord);
  --paper: var(--ciel-4);
  --white: var(--carte);
  --terre: var(--or-trait);
  --ambre: var(--nuit-or);
  --red: #F2637E;
  --ink: var(--encre);
  --ink-2: var(--encre-2);
  --muted: var(--nuit-sourd);
  --muted-dark: var(--sourd);
  --border: var(--trait);

  --body: 'Poppins', system-ui, -apple-system, sans-serif;
  --display: 'Poppins', system-ui, sans-serif;

  --ombre-carte: 0 1px 2px rgba(11, 58, 86, .04),
                 0 12px 32px rgba(11, 58, 86, .10);
  --ombre-or: 0 2px 8px rgba(184, 115, 9, .22),
              0 8px 24px rgba(184, 115, 9, .18);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { overflow-x: hidden; }

body {
  font-family: var(--body);
  color: var(--encre-2);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100svh;
  background: linear-gradient(180deg,
    var(--ciel-1) 0%, var(--ciel-2) 40%, var(--ciel-4) 100%);
  background-attachment: fixed;
}

/* Les nuages : poses une fois sur le fond, jamais sur un conteneur qui
   defile. Un filtre de flou sur du contenu mobile fait chuter le rendu
   sur telephone. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(52rem 17rem at 8% 6%,  rgba(255,255,255,.72), transparent 70%),
    radial-gradient(38rem 13rem at 78% 3%, rgba(255,255,255,.58), transparent 72%),
    radial-gradient(46rem 15rem at 96% 24%, rgba(255,255,255,.52), transparent 70%),
    radial-gradient(40rem 14rem at 4% 42%, rgba(255,255,255,.40), transparent 74%);
}

/* Le ciel soutenu (#8FCDEF, l'ancien haut du degrade), sur les bords. Sur grand ecran seulement : la colonne
   de texte est au centre, les bords restent libres. Sur telephone, le
   texte occupe toute la largeur, le fond reste clair. */
@media (min-width: 1000px) {
  body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
      radial-gradient(26rem 44rem at -2% 22%, rgb(143 205 239 / .65), transparent 70%),
      radial-gradient(30rem 40rem at 100% 8%, rgb(143 205 239 / .7), transparent 70%),
      radial-gradient(26rem 30rem at 100% 78%, rgb(143 205 239 / .45), transparent 70%);
  }
}
body.nightmare::after { display: none; }

main { padding: 0 24px; max-width: 100%; }

/* ---------- Navigation ---------- */

nav {
  display: flex;
  gap: 28px;
  align-items: center;
  max-width: 62rem;
  margin: 0 auto;
  padding: 24px;
  font-size: 14px;
}
nav a { color: var(--muted-dark); text-decoration: none; }
nav a:hover { color: var(--ink); }
nav a:last-child { margin-left: auto; }
/* Quatre liens tiennent sur une ligne d'iPhone : chaque libelle reste
   d'un seul tenant, l'espace se resserre. */
nav a { white-space: nowrap; }
@media (max-width: 480px) {
  nav { gap: 10px; padding: 16px 24px; font-size: 13.5px; justify-content: space-between; }
  nav .nav-sortie { display: none; }
}

/* ---------- Boutons ---------- */

button, .btn, .btn-google {
  font-family: var(--body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .005em;
  padding: 16px 32px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--or-1) 0%, var(--or-2) 100%);
  color: var(--or-encre);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  box-shadow: var(--ombre-or);
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}
button:hover, .btn:hover, .btn-google:hover {
  filter: brightness(1.04);
  box-shadow: 0 3px 10px rgba(184,115,9,.26), 0 12px 30px rgba(184,115,9,.22);
}
button:active, .btn:active, .btn-google:active { transform: translateY(1px); }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--encre);
  outline-offset: 3px;
}

/* ---------- Accueil ---------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: 64px;
  align-items: center;
  max-width: 64rem;
  margin: 0 auto;
  padding: 4svh 0 40px;
  min-height: 72svh;
}
.hero h1 {
  font-family: var(--display);
  font-size: clamp(34px, 4.6vw, 54px);
  font-weight: 700;
  line-height: 1.07;
  letter-spacing: -0.025em;
  color: var(--encre);
  margin-bottom: 20px;
  text-wrap: balance;
}
.hero p {
  font-size: 17px;
  line-height: 1.62;
  color: var(--encre-2);
  max-width: 29rem;
  margin-bottom: 30px;
  text-wrap: pretty;
}
.hero-duree {
  font-size: 13.5px;
  color: var(--sourd);
  margin: 16px 0 0;
}
.btn-google { align-self: flex-start; }

/* La roue est posee sur une carte : elle se detache du ciel et devient
   l'objet qu'on est venu chercher. */
.hero-roue {
  margin: 0;
  min-width: 0;
  background: var(--carte);
  border: 1px solid var(--carte-bord);
  border-radius: 14px;
  padding: 22px 18px 16px;
  box-shadow: var(--ombre-carte);
}
.hero-roue .wheel { max-width: 100%; margin: 0 auto; }
.hero-roue figcaption {
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--sourd);
  text-align: center;
}

/* Les neuf axes. Une pastille par axe : le ludique sans emoji. */
.axes {
  max-width: 64rem;
  margin: 0 auto;
  padding: 0 0 8svh;
}
.axes h2 {
  font-size: 13px;
  font-weight: 600;
  color: var(--sourd);
  margin-bottom: 16px;
}
.axes ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
.axes li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 17px 9px 13px;
  font-size: 14px;
  font-weight: 500;
  color: var(--encre);
  background: var(--carte-voile);
  border: 1px solid var(--carte-bord);
  border-radius: 999px;
  backdrop-filter: blur(6px);
}
.pastille {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .55);
}

/* ---------- Parcours ---------- */
/* Une seule famille, Poppins, pour tout le site (8 octobre). Tout ce qui
   suit ne concerne que les ecrans du parcours. */

/* Titres : Poppins partout, comme l'accueil (decision du 8 octobre). Les
   H1 en 700, les H2 en 600, les citations en italique 400. */
.intro h1, .wizard h1 { font-family: var(--display); font-weight: 700; }
.versant h2, .pilier h2 { font-family: var(--display); font-weight: 600; }
.citation blockquote, .axe-citation blockquote { font-family: var(--body); font-weight: 400; }

/* ---------- Intro du parcours ---------- */
/* Cet ecran demande dix minutes de travail intime. Il doit dire pourquoi
   avant de demander quoi que ce soit. */

.intro {
  max-width: 42rem;
  margin: 0 auto;
  padding: 6svh 0 96px;
}

/* Sous le formulaire : le titre ouvre l'ecran, la citation le referme. */
.citation {
  margin: 48px 0 0;
  padding-left: 20px;
  border-left: 3px solid var(--or-2);
}
.citation blockquote {
  font-size: clamp(22px, 2.8vw, 27px);
  line-height: 1.3;
  font-style: italic;
  color: var(--encre);
  text-wrap: balance;
}
.citation figcaption {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--encre-2);
}

.intro h1 {
  font-size: clamp(38px, 5.4vw, 52px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--encre);
  margin-bottom: 18px;
  text-wrap: balance;
}
.intro-chapeau {
  max-width: 36rem;
  font-size: 17px;
  line-height: 1.62;
  color: var(--encre-2);
  margin-bottom: 36px;
  text-wrap: pretty;
}

/* Les trois piliers : on voit d'un coup ce que le parcours couvre. Les
   axes en pastilles plutot qu'en liste : trois cartes courtes au lieu
   de trois colonnes a lire. */
.piliers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}
.pilier {
  background: var(--carte);
  border: 1px solid var(--carte-bord);
  border-radius: 14px;
  padding: 18px 18px 16px;
  box-shadow: var(--ombre-carte);
}
.pilier h2 {
  font-size: 24px;
  line-height: 1.1;
  color: var(--encre);
  margin-bottom: 4px;
}
.pilier > p {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--sourd);
  margin-bottom: 14px;
}
.pilier ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.pilier li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px 5px 9px;
  font-size: 13px;
  font-weight: 500;
  color: var(--encre);
  background: var(--ciel-4);
  border-radius: 999px;
}
.pilier .pastille { width: 8px; height: 8px; box-shadow: none; }

.intro-deroule {
  padding: 18px 20px;
  background: var(--carte-voile);
  border: 1px solid var(--carte-bord);
  border-radius: 14px;
  margin-bottom: 14px;
}
.intro-deroule p { font-size: 15px; line-height: 1.58; color: var(--encre-2); }
.intro-deroule strong { color: var(--encre); font-weight: 600; }
.intro-deroule p.intro-note {
  margin-top: 10px;
  font-size: 13.5px;
  color: var(--sourd);
}

/* Le portrait dans les images. Trois choix facultatifs, poses avant de
   commencer. On decrit une apparence dans une illustration, on ne fait
   pas declarer une identite : l'etiquette dit « dans tes images ». */
.portrait {
  border: 1px solid var(--carte-bord);
  border-radius: 14px;
  background: var(--carte-voile);
  padding: 18px 20px 20px;
}
/* Flottante, la legende se range dans le cadre au lieu de chevaucher
   sa bordure, comme le font les legendes de fieldset par defaut. */
.portrait legend {
  float: left;
  width: 100%;
  padding: 0;
  margin-bottom: 4px;
  font-size: 15px;
  font-weight: 600;
  color: var(--encre);
}
.portrait legend + * { clear: both; }
.portrait-note {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--encre-2);
  margin-bottom: 14px;
}
/* Trois menus : Age, Origine, Cheveux, sur une ligne. */
.portrait-choix {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.portrait-choix label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--encre-2);
}
.portrait-choix span { display: block; margin-bottom: 6px; }
/* 16px minimum : en dessous, Safari zoome sur le champ au toucher. */
.portrait-choix select {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  min-height: 46px;
  padding: 10px 36px 10px 12px;
  font-family: var(--body);
  font-size: 16px;
  font-weight: 400;
  color: var(--encre);
  background: var(--carte) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231B5478' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 13px center / 12px 8px;
  border: 1px solid rgba(11, 58, 86, .14);
  border-radius: 8px;
  cursor: pointer;
}
.portrait-choix select:focus {
  outline: none;
  border-color: rgba(11, 58, 86, .35);
  box-shadow: 0 0 0 3px rgba(143, 205, 239, .5);
}

/* Teinte de peau : un curseur sur l'echelle Monk plutot qu'un menu de
   mots. Les mots (« mate », « noire ») ont ete lus de travers par le
   modele et par les gens ; une couleur se reconnait. Le cran 0, a
   gauche, est hachure : c'est la meme hachure que la pastille vide,
   donc le meme sens, « sans preference ». */
/* Teinte de peau : dix pastilles a toucher. La pastille choisie se
   cerne d'un anneau --encre-2 (7,7:1 sur la carte), decolle par un
   lisere blanc, visible sur les tons clairs comme fonces. Chaque
   pastille depasse les 32 px de large sur un telephone de 390 px. */
.teinte { margin: 16px 0 0; padding: 0; border: none; }
.teinte legend {
  margin-bottom: 8px; padding: 0;
  font-size: 12.5px; font-weight: 600; color: var(--encre-2);
}
.teinte-choix { display: flex; gap: 6px; }
.teinte-pastille {
  position: relative; flex: 1 1 0; min-width: 0; height: 40px;
  border-radius: 10px; background: var(--couleur);
  box-shadow: inset 0 0 0 1px rgba(11, 58, 86, .35);
  cursor: pointer;
}
.teinte-pastille input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer;
}
.teinte-pastille:has(input:checked) {
  box-shadow: 0 0 0 2px var(--carte), 0 0 0 4px var(--encre-2);
}
.teinte-pastille:has(input:focus-visible) {
  outline: 2px solid var(--encre); outline-offset: 4px;
}
/* En contraste eleve, les ombres disparaissent : un contour systeme
   marque la pastille choisie et celle qui a le focus. */
@media (forced-colors: active) {
  .teinte-choix .teinte-pastille:has(input:checked),
  .teinte-choix .teinte-pastille:has(input:focus-visible) {
    outline: 3px solid CanvasText;
    outline-offset: 2px;
  }
}

.intro form > button[type="submit"] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  margin-top: 28px;
  font-size: 16px;
}

/* ---------- Wizard ---------- */

.wizard {
  max-width: 34rem;
  margin: 0 auto;
  padding: 5svh 0 72px;
}
.wizard > h1 {
  font-size: clamp(34px, 5vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--encre);
  margin-bottom: 28px;
  text-wrap: balance;
}

/* ---------- L'axe en cours ---------- */
/* On doit savoir a tout moment de quoi on parle, et pourquoi la question
   est posee. Sans cela, l'ecran ressemble a un formulaire administratif. */

/* La bande d'orientation : la roue qui se construit, l'axe, et la
   distance parcourue sur tout le parcours. */
.axe-barre {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
}

/* Fait : la teinte de l'axe. En cours : la teinte, en plus epais, qui
   deborde du cercle. A venir : une empreinte bleutee. Un blanc de nuage
   disparaissait sur le haut pale du ciel. */
.roue-progres { display: block; overflow: visible; }
.roue-seg {
  fill: none;
  stroke: rgba(11, 58, 86, .11);
  stroke-width: 5;
}
.roue-seg.fait { stroke: var(--teinte); }
.roue-seg.courant { stroke: var(--teinte); stroke-width: 8.5; }

.axe-ident { min-width: 0; }
.axe-ident-pilier {
  margin: 0 0 3px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  /* Pose a meme le ciel : --encre-2 y tient 6.4:1 sur le haut du
     degrade. Mesure, pas estime. */
  color: var(--encre-2);
}
.axe-ident h1 {
  margin: 0;
  font-size: 34px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--encre);
}

/* La progression dit ou l'on est dans le parcours entier. */
.progress { margin: 0; }
.progress-rank {
  display: inline-block;
  padding: 5px 11px;
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--encre-2);
  background: rgba(255, 255, 255, .72);
  border-radius: 999px;
}

/* La citation ouvre l'ecran, comme Seneque sur l'intro : meme
   traitement d'un ecran a l'autre. Elle garde le filet or, le seul
   accent chaud du contexte, qui marque une voix qui n'est pas celle du
   produit. */
.axe-citation {
  margin: 0 0 22px;
  padding-left: 16px;
  border-left: 2px solid var(--or-2);
}
.axe-citation blockquote {
  font-size: 20px;
  line-height: 1.32;
  font-style: italic;
  color: var(--encre);
  text-wrap: pretty;
}
.axe-citation figcaption {
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--encre-2);
}

/* Ce que l'axe recouvre, en une ligne. Il tranche la frontiere entre
   sante mentale et spirituelle, que les anciens noms brouillaient. */
.axe-soustitre {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--encre);
  text-wrap: pretty;
}
.axe-pourquoi {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--encre-2);
  text-wrap: pretty;
}

/* Le versant annonce de quel cote du parcours on est. Pas de filet :
   c'est l'espace et la taille qui marquent la bascule du contexte vers
   la tache. */
.versant { margin: 36px 0 16px; }
.versant h2 {
  font-size: 28px;
  line-height: 1.1;
  color: var(--encre);
  margin-bottom: 4px;
}
.versant p {
  margin: 0;
  max-width: 30rem;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--encre-2);
  text-wrap: pretty;
}

/* Le chapeau d'un ecran sans axe (resume) : de quoi on parle, pour qui
   reprend le parcours directement ici. */
.wizard-chapeau {
  margin: -16px 0 24px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--encre-2);
  text-wrap: pretty;
}
body.nightmare .wizard-chapeau { color: var(--nuit-sourd); }

/* Chaque question et son champ forment une carte : on ecrit dans la
   question, pas sous elle. Toute la carte s'allume quand on y ecrit. */
.champ {
  display: block;
  margin-bottom: 14px;
  padding: 18px 18px 16px;
  background: var(--carte);
  border: 1px solid var(--carte-bord);
  border-radius: 14px;
  box-shadow: var(--ombre-carte);
  cursor: text;
  transition: box-shadow .16s ease;
}
/* Quand on y ecrit, la carte se souleve a peine : pas d'anneau de
   couleur autour, il criait plus fort que la question. */
.champ:focus-within {
  box-shadow: 0 1px 2px rgba(11, 58, 86, .05), 0 16px 40px rgba(11, 58, 86, .13);
}
.champ-tete { display: flex; align-items: flex-start; gap: 12px; }
.champ-num {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--or-1) 0%, var(--or-2) 100%);
  color: var(--or-encre);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.champ-question {
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.42;
  letter-spacing: -0.005em;
  color: var(--encre);
  text-wrap: pretty;
}
/* Les pistes s'alignent sur le texte de la question, pas sur le numero. */
.champ-aide {
  display: block;
  margin: 6px 0 0 38px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--sourd);
  text-wrap: pretty;
}
.champ-tag {
  flex: none;
  margin-left: auto;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--sourd);
  background: var(--ciel-4);
  border-radius: 999px;
}
.wizard textarea {
  display: block;
  width: 100%;
  min-height: 7.5rem;
  margin-top: 14px;
  padding: 12px 14px;
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--encre);
  background: var(--ciel-4);
  border: 1px solid var(--trait);
  border-radius: 8px;
  resize: vertical;
  transition: border-color .15s ease, background-color .15s ease;
}
/* Le champ actif s'eclaircit et son bord fonce d'un cran : on voit ou
   l'on ecrit sans que ca tire l'oeil. */
.wizard textarea:focus {
  outline: none;
  background: var(--carte);
  border-color: rgba(11, 58, 86, .32);
  box-shadow: 0 0 0 3px rgba(11, 58, 86, .05);
}
/* Le champ grandit avec ce qu'on ecrit : plus de poignee a tirer. */
@supports (field-sizing: content) {
  .wizard textarea { field-sizing: content; resize: none; }
}

/* ---------- Avancer, revenir ---------- */
/* Avancer et revenir cohabitent : le retour est discret, l'avancee
   porte le poids. Sur vingt et une etapes, ne pas pouvoir corriger une
   reponse donnee plus tot ferait abandonner. */
.actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 26px;
}
/* :not(.lien-retour) : le retour est aussi un bouton d'envoi, il ne doit
   pas heriter de la taille du bouton qui avance. */
.actions button[type="submit"]:not(.lien-retour) {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  min-width: 11.5rem;
  padding: 14px 28px;
  font-size: 15.5px;
  flex: 0 1 auto;
}
/* Sans retour, le bouton occupe toute la largeur. */
.actions > button[type="submit"]:only-child { flex: 1 1 100%; }
.actions .lien-retour {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  /* Marge negative a gauche : le lien s'aligne sur le bord du contenu,
     son padding de confort de clic ne doit pas le decaler. */
  padding: 12px 10px;
  margin-left: -10px;
  background: none;
  border: none;
  border-radius: 8px;
  box-shadow: none;
  font-family: var(--body);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--encre-2);
  cursor: pointer;
  text-decoration: none;
  transition: color .14s ease;
}
.actions .lien-retour:hover {
  background: none;
  color: var(--encre);
  filter: none;
  box-shadow: none;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Reecrire le resume : une action sur le champ, pas sur le parcours.
   Sous la carte, alignee a droite, sans fond ni ombre : elle ne doit
   jamais disputer le regard a Suivant. Mesure : --encre sur le ciel d ete
   8.6:1 au pire (#B5E1F8) ; --nuit-sourd sur --nuit 7.3:1. */
.resume-reecrire { display: flex; justify-content: flex-end; margin-top: -4px; }
.resume-reecrire button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px;
  margin-right: -10px;
  background: none;
  border-radius: 8px;
  box-shadow: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--encre);
}
.resume-reecrire button:hover {
  filter: none;
  box-shadow: none;
  text-decoration: underline;
  text-underline-offset: 4px;
}
/* Echec d'une reecriture : une ligne, a l'encre, sur un voile blanc
   comme sur l'ecran d'image. Mesure : --encre sur blanc a 75 % pose sur
   #B5E1F8, 11.1:1 ; --nuit-texte sur --nuit-2, 12.0:1. */
.resume-echec {
  margin: 4px 0 0;
  padding: 10px 14px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--encre);
  background: rgb(255 255 255 / .75);
  border-radius: 10px;
}
body.nightmare .resume-echec { color: var(--nuit-texte); background: var(--nuit-2); }
body.nightmare .resume-reecrire button { color: var(--nuit-sourd); }
body.nightmare .resume-reecrire button:hover { color: var(--nuit-texte); }

/* La fleche avance d'un cheveu au survol : elle dit la direction. */
.fleche {
  flex: none;
  transition: transform .16s ease;
}
button:hover .fleche { transform: translateX(3px); }
button:hover .fleche-g { transform: translateX(-3px); }
@media (prefers-reduced-motion: reduce) {
  .fleche { transition: none; }
  button:hover .fleche, button:hover .fleche-g { transform: none; }
}

/* L'axe en une ligne, sur l'ecran de reve. */
.axe-situe {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}
.axe-pilier { font-size: 17px; font-weight: 500; color: var(--encre-2); }
.axe-sep { font-size: 17px; color: var(--encre-2); opacity: .5; }
.axe-titre {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--encre);
}
.axe-situe .pastille {
  width: 9px;
  height: 9px;
  align-self: center;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .5);
}

/* ---------- Le versant cauchemar ---------- */
/* Tout bascule sur fond nuit : on sent le changement de nature. Les
   nuages appartiennent au ciel, ils n'ont rien a faire ici. */

body.nightmare {
  background: radial-gradient(120% 90% at 50% -10%,
    #1B3049 0%, var(--nuit-2) 42%, var(--nuit) 100%) fixed;
  color: var(--nuit-texte);
}
body.nightmare::before { display: none; }
body.nightmare :focus-visible { outline-color: var(--nuit-texte); }

body.nightmare .wizard > h1,
body.nightmare .axe-ident h1,
body.nightmare .axe-citation blockquote,
body.nightmare .axe-soustitre,
body.nightmare .versant h2,
body.nightmare .champ-question { color: var(--nuit-texte); }

body.nightmare .axe-ident-pilier,
body.nightmare .axe-citation figcaption,
body.nightmare .axe-pourquoi,
body.nightmare .versant p,
body.nightmare .champ-aide { color: var(--nuit-sourd); }

body.nightmare .axe-citation { border-left-color: var(--nuit-or); }
body.nightmare .progress-rank { color: var(--nuit-sourd); background: rgba(255, 255, 255, .07); }
body.nightmare .roue-seg { stroke: rgba(255, 255, 255, .13); }
body.nightmare .roue-seg.fait,
body.nightmare .roue-seg.courant { stroke: var(--teinte); }

body.nightmare .champ {
  background: var(--nuit-2);
  border-color: var(--nuit-bord);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .22);
}
body.nightmare .champ:focus-within {
  box-shadow: 0 16px 40px rgba(0, 0, 0, .32);
}
body.nightmare .champ-num { background: rgba(255, 255, 255, .1); color: var(--nuit-texte); }
body.nightmare .champ-tag { color: var(--nuit-sourd); background: rgba(255, 255, 255, .07); }
body.nightmare .wizard textarea {
  background: var(--nuit);
  border-color: var(--nuit-bord);
  color: var(--nuit-texte);
}
body.nightmare .wizard textarea:focus {
  background: #0B1824;
  border-color: rgba(143, 174, 199, .55);
  box-shadow: 0 0 0 3px rgba(143, 174, 199, .06);
}

/* Pas d'or sur la nuit pour avancer : l'or appartient au reve. */
body.nightmare .actions button[type="submit"]:not(.lien-retour) {
  background: var(--nuit-texte);
  color: var(--nuit);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .3), 0 10px 28px rgba(0, 0, 0, .3);
}
body.nightmare .actions button[type="submit"]:not(.lien-retour):hover { background: #FFFFFF; }
body.nightmare .actions .lien-retour { color: var(--nuit-sourd); }
body.nightmare .actions .lien-retour:hover { color: var(--nuit-texte); }

/* ---------- Deux colonnes sur grand ecran ---------- */
/* Sur une seule colonne, un ecran de 1280px laisse deux tiers de vide
   et fait tout lire en file indienne. Ici :
   - en haut, la bande de l'axe (la roue, l'axe, la progression en
     face) et, en face, le titre du versant ;
   - dessous, le contexte (la citation, ce que l'axe recouvre, pourquoi
     il compte) aligne sur la premiere question, et qui reste a l'ecran
     pendant que les questions defilent.
   On relit le pourquoi sans remonter, pendant qu'on ecrit. Valide sur
   l'axe mental, applique aux dix-huit ecrans d'axe. */
@media (min-width: 1000px) {
  .wizard.wizard-colonnes {
    display: grid;
    grid-template-columns: minmax(0, 25rem) minmax(0, 36rem);
    grid-template-areas:
      "barre    versant"
      "contexte questions";
    grid-template-rows: auto 1fr;
    justify-content: center;
    column-gap: clamp(48px, 6vw, 96px);
    align-items: start;
    max-width: 72rem;
    padding: 7svh 0 96px;
  }

  /* L'en-tete se defait : sa bande et son contexte deviennent des cases
     de la grille. */
  .wizard-colonnes .axe-entete { display: contents; }
  /* La progression en face de l'axe, dans le meme bloc. Taille pour
     tenir avec l'axe le plus long (« Spirituelle ») dans la colonne.
     Toute la colonne de gauche reste en place : la bande colle en haut,
     le contexte sous elle, seules les questions defilent. Une bande
     limitee a sa rangee ne pouvait pas coller plus loin que ses 130px :
     elle partait, et la citation semblait descendre seule. Elle occupe
     donc les deux rangees, posee en haut. */
  .wizard-colonnes .axe-barre {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: start;
    position: sticky;
    top: 7svh;
    column-gap: 16px;
    margin-bottom: 0;
  }
  /* La tache se defait aussi : son versant et ses questions prennent
     chacun leur rangee, pour que la citation parte a la hauteur de la
     premiere question. */
  .wizard-colonnes .axe-tache { display: contents; }
  .wizard-colonnes .versant { grid-area: versant; }
  .wizard-colonnes .axe-tache > form { grid-area: questions; }

  /* Aligne sur la premiere question, et il y reste avec la bande : le
     seuil collant vaut la hauteur de la rangee du versant (marge haute
     + titre + deux lignes), le bloc ne bouge donc pas au defilement. */
  .wizard-colonnes .axe-contexte {
    grid-area: contexte;
    position: sticky;
    top: calc(7svh + 130px);
  }

  .wizard-colonnes .roue-progres { width: 64px; height: 64px; }
  .wizard-colonnes .axe-ident h1 { font-size: 40px; }
  .wizard-colonnes .axe-ident-pilier { font-size: 14px; }

  .wizard-colonnes .axe-citation { margin-bottom: 26px; }
  .wizard-colonnes .axe-citation blockquote { font-size: 22px; line-height: 1.3; }
  .wizard-colonnes .axe-soustitre { font-size: 16.5px; }
  .wizard-colonnes .axe-pourquoi { font-size: 15.5px; }

  /* La tache s'ouvre en face de la bande, le titre du versant a la
     hauteur de celui de l'axe. */
  .wizard-colonnes .versant { margin: 26px 0 20px; }
  .wizard-colonnes .versant h2 { font-size: 32px; }
  .wizard-colonnes .champ { padding: 22px 24px 20px; margin-bottom: 16px; }
  .wizard-colonnes .champ-question { font-size: 17.5px; }
  .wizard-colonnes .champ-aide { font-size: 15px; }
  .wizard-colonnes textarea { min-height: 9rem; }

  /* Verre liquide. Sur grand ecran seulement : un flou sur du contenu
     qui defile fait ramer un telephone, les cartes y restent pleines.
     Ce que le verre floute, c'est le ciel lui-meme : bleu franc et
     nuages blancs (voir « Le ciel d'ete »). */

  .wizard-colonnes .champ {
    /* Un reflet qui glisse en diagonale, sur un verre plus clair en haut. */
    background:
      linear-gradient(160deg, rgb(255 255 255 / .55) 0%, rgb(255 255 255 / 0) 42%),
      /* Pas moins de 68 % de blanc : en dessous, les pistes (--sourd)
         passent sous 4.5:1 sur la lueur rose de l'amour. Mesure sur les
         neuf teintes. */
      linear-gradient(135deg, rgb(255 255 255 / .80), rgb(255 255 255 / .68));
    -webkit-backdrop-filter: blur(22px) saturate(170%);
    backdrop-filter: blur(22px) saturate(170%);
    /* La lumiere vient d'en haut a gauche : bords clairs de ce cote,
       plus discrets de l'autre. */
    border-color: rgb(255 255 255 / .9) rgb(255 255 255 / .5)
                  rgb(255 255 255 / .35) rgb(255 255 255 / .75);
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / .95),
      inset 0 -1px 0 rgb(255 255 255 / .3),
      0 1px 2px rgb(11 58 86 / .04),
      0 18px 44px rgb(11 58 86 / .10);
  }
  .wizard-colonnes .champ:focus-within {
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / .95),
      inset 0 -1px 0 rgb(255 255 255 / .3),
      0 1px 2px rgb(11 58 86 / .05),
      0 22px 52px rgb(11 58 86 / .14);
  }
  /* Le champ est un creux dans le verre. */
  .wizard-colonnes textarea {
    background: rgb(255 255 255 / .5);
    border-color: rgb(11 58 86 / .1);
    box-shadow: inset 0 1px 3px rgb(11 58 86 / .08);
  }
  .wizard-colonnes textarea:focus {
    background: rgb(255 255 255 / .92);
    border-color: rgba(11, 58, 86, .28);
    box-shadow: inset 0 1px 3px rgb(11 58 86 / .05), 0 0 0 3px rgb(11 58 86 / .04);
  }

  /* Sur la nuit : un verre fume, la lueur a mi-voix. */
  body.nightmare .wizard-colonnes .champ {
    background:
      linear-gradient(160deg, rgb(255 255 255 / .07) 0%, rgb(255 255 255 / 0) 42%),
      rgb(23 41 60 / .58);
    border-color: rgb(255 255 255 / .14) rgb(255 255 255 / .06)
                  rgb(255 255 255 / .04) rgb(255 255 255 / .1);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .09), 0 18px 44px rgb(0 0 0 / .3);
  }
  body.nightmare .wizard-colonnes .champ:focus-within {
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .09), 0 22px 52px rgb(0 0 0 / .38);
  }
  body.nightmare .wizard-colonnes textarea {
    background: rgb(11 24 36 / .6);
    border-color: rgb(255 255 255 / .07);
    box-shadow: inset 0 1px 3px rgb(0 0 0 / .25);
  }
  body.nightmare .wizard-colonnes textarea:focus {
    background: rgb(11 24 36 / .85);
    border-color: rgba(143, 174, 199, .5);
  }
}

/* ---------- Le ciel d'ete ---------- */
/* Un bleu franc, des nuages blancs. L'equilibre avec la lecture tient a
   trois regles :
   - les titres en grand restent a meme le ciel (le grand texte demande
     3:1, l'encre y tient 8.8:1 au plus fonce, #B2E4FF) ;
   - tout petit texte pose sur le bleu passe a l'encre la plus foncee ;
   - les paragraphes vont dans un cartouche de verre.
   Les nuages se placent la ou est le texte. Sur grand ecran, la colonne
   de gauche reste fixe : le nuage fixe derriere le titre ne le quitte
   jamais. Tout le versant reve du parcours, l'intro et les scores y
   sont ; le cauchemar garde sa nuit. */

body.ciel-ete {
  background: linear-gradient(180deg, #D2EEFF 0%, #B2E4FF 48%, #B5E1F8 100%) fixed;
}
/* Les bords bleus n'ont plus de sens : tout le ciel l'est. */
body.ciel-ete::after { display: none; }
body.ciel-ete::before {
  background:
    /* Derriere la bande de l'axe */
    radial-gradient(20rem 7rem at 22% 11%, rgb(255 255 255 / .9) 0%, rgb(255 255 255 / .7) 40%, transparent 72%),
    radial-gradient(12rem 6rem at 32% 7%, rgb(255 255 255 / .8) 0%, transparent 70%),
    radial-gradient(13rem 6rem at 12% 15%, rgb(255 255 255 / .75) 0%, transparent 70%),
    /* Derriere le contexte, a sa hauteur */
    radial-gradient(24rem 15rem at 24% 44%, rgb(255 255 255 / .8) 0%, rgb(255 255 255 / .55) 45%, transparent 72%),
    radial-gradient(14rem 9rem at 13% 36%, rgb(255 255 255 / .55) 0%, transparent 70%),
    radial-gradient(15rem 9rem at 35% 54%, rgb(255 255 255 / .5) 0%, transparent 70%),
    /* Derriere le versant */
    radial-gradient(22rem 7rem at 64% 13%, rgb(255 255 255 / .9) 0%, rgb(255 255 255 / .65) 40%, transparent 72%),
    radial-gradient(14rem 6rem at 75% 8%, rgb(255 255 255 / .8) 0%, transparent 70%),
    /* Plus bas : ce que le verre des cartes laisse voir */
    radial-gradient(26rem 9rem at 88% 88%, rgb(255 255 255 / .8) 0%, transparent 72%),
    radial-gradient(16rem 7rem at 78% 94%, rgb(255 255 255 / .7) 0%, transparent 70%),
    radial-gradient(18rem 7rem at 8% 92%, rgb(255 255 255 / .6) 0%, transparent 72%);
}

/* A meme le bleu : l'encre la plus foncee, jamais le bleu moyen. */
.ciel-ete .axe-ident-pilier,
.ciel-ete .versant p,
.ciel-ete .actions .lien-retour { color: var(--encre); }
/* « Passer » etait attenue a 75 % : 3.5:1 sur le ciel. Plein, a l'encre. */
.ciel-ete .reve-passer a { color: var(--encre); opacity: 1; }
.ciel-ete .versant p { font-weight: 500; }
.ciel-ete .progress-rank { background: rgb(255 255 255 / .82); }
.ciel-ete .roue-seg { stroke: rgb(11 58 86 / .16); }
.ciel-ete .roue-seg.fait,
.ciel-ete .roue-seg.courant { stroke: var(--teinte); }

/* Pas de cartouche autour du contexte : une boite blanche pesait plus
   lourd que la citation. Le ciel est assez clair pour le texte (le bleu
   moyen y tient 6:1 au plus fonce), et un nuage se pose derriere pour
   le confort de lecture. */
/* Dans le verre pose sur le bleu franc, les pistes passent au bleu
   moyen : le gris-bleu y descendait sous 4.5:1. */
.ciel-ete .champ-aide { color: var(--encre-2); }

@media (max-width: 860px) {
  /* Sur telephone, un nuage sous l'en-tete, d'autres plus bas. */
  body.ciel-ete::before {
    background:
      radial-gradient(18rem 7rem at 45% 7%, rgb(255 255 255 / .95) 0%, rgb(255 255 255 / .7) 45%, transparent 72%),
      radial-gradient(12rem 6rem at 80% 5%, rgb(255 255 255 / .85) 0%, transparent 70%),
      radial-gradient(12rem 5rem at 15% 11%, rgb(255 255 255 / .8) 0%, transparent 70%),
      radial-gradient(16rem 6rem at 92% 58%, rgb(255 255 255 / .6) 0%, transparent 72%),
      radial-gradient(18rem 7rem at 6% 86%, rgb(255 255 255 / .6) 0%, transparent 72%);
  }
}

/* ---------- La roue ---------- */
/* Elle doit rester un instrument de lecture : la grille se voit, les
   libelles sont nets, le polygone ne noie pas les reperes. */

.wheel { width: 100%; max-width: 400px; height: auto; display: block; }
.wheel-grid { fill: none; stroke: var(--trait); stroke-width: 1; }
.wheel-axis { stroke: var(--trait); stroke-width: 1; }
.wheel-shape {
  fill: rgba(240, 165, 43, .20);
  stroke: var(--or-2);
  stroke-width: 2.5;
  stroke-linejoin: round;
}

/* Le releve precedent, sous le polygone courant. */
.wheel-shape-avant {
  fill: none;
  stroke: var(--sourd);
  stroke-width: 1.5;
  stroke-dasharray: 3 4;
  stroke-linejoin: round;
  opacity: .5;
}

.wheel-label {
  font-family: var(--body);
  font-size: 10.5px;
  font-weight: 600;
  fill: var(--sourd);
  letter-spacing: .02em;
}

/* Sur la nuit, l'or clair prend le relais : 9.4:1. */
/* Liseré clair : la pastille se detache du rayon et du polygone. */
.wheel-pastille { stroke: var(--carte); stroke-width: 2; }
body.nightmare .wheel-pastille { stroke: var(--nuit); }
body.nightmare .wheel-shape { fill: rgba(251, 191, 36, .16); stroke: var(--nuit-or); }
body.nightmare .wheel-grid,
body.nightmare .wheel-axis { stroke: var(--nuit-bord); }
body.nightmare .wheel-label { fill: var(--nuit-sourd); }

/* ---------- Ecran des scores ---------- */
/* Chaque curseur porte la couleur de son axe, et sa piste se remplit
   jusqu'a la note : on lit ses neuf notes d'un coup d'oeil, comme sur
   la roue a cote. */

.scores { max-width: 58rem; }
.scores-chapeau {
  margin: -14px 0 28px;
  font-size: 16px;
  color: var(--encre-2);
}
.scores-layout {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}
.scores-roue {
  position: sticky;
  top: 24px;
  padding: 16px 12px 10px;
  background: var(--carte);
  border: 1px solid var(--carte-bord);
  border-radius: 14px;
  box-shadow: var(--ombre-carte);
}
.scores-roue .wheel { max-width: 100%; margin: 0 auto; }

.curseurs {
  padding: 4px 18px;
  background: var(--carte);
  border: 1px solid var(--carte-bord);
  border-radius: 14px;
  box-shadow: var(--ombre-carte);
}
.slider-row {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr) 2rem;
  gap: 14px;
  align-items: center;
  min-height: 54px;
  font-size: 14.5px;
}
.slider-row + .slider-row { border-top: 1px solid var(--ciel-3); }
.slider-nom {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  font-weight: 500;
  color: var(--encre);
}
.slider-nom .pastille { width: 9px; height: 9px; box-shadow: none; }
.slider-row output {
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--encre);
}

/* La piste est stylee explicitement par moteur : sans
   ::-webkit-slider-runnable-track le rail disparait et il ne reste que
   la pastille, sans reperes. --v est tenu a jour par scores.js. */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 32px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    var(--teinte, var(--encre-2)) var(--v, 50%), var(--ciel-3) var(--v, 50%));
}
input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: var(--ciel-3);
}
input[type="range"]::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--teinte, var(--encre-2));
}
/* Le lisere sombre garde la pastille visible sur les teintes claires
   (le jaune de l'argent ne tient pas seul sur le blanc). */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  margin-top: -9px;   /* recentre la pastille sur un rail de 6px */
  border-radius: 50%;
  background: var(--carte);
  border: 3px solid var(--teinte, var(--encre-2));
  box-shadow: 0 0 0 1px rgba(11, 58, 86, .22), 0 2px 6px rgba(11, 58, 86, .18);
}
input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--carte);
  border: 3px solid var(--teinte, var(--encre-2));
  box-shadow: 0 0 0 1px rgba(11, 58, 86, .22), 0 2px 6px rgba(11, 58, 86, .18);
}

/* ---------- Tableau de bord ---------- */

.dashboard {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
  max-width: 62rem;
  margin: 0 auto;
  padding: 32px 0 96px;
}
/* Des titres, pas des etiquettes en capitales : le contenu se nomme
   lui-meme, on n'a pas besoin de crier au-dessus. */
.dashboard h2 {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 16px;
}
.dashboard h2 + ul { margin-bottom: 40px; }
.col-wheel .btn { margin-top: 24px; width: 100%; text-align: center; }
.col-wheel form { margin-top: 12px; }
.col-wheel form button {
  width: 100%;
  background: transparent;
  color: var(--muted-dark);
  border: 1px solid var(--border);
}
.col-wheel form button:hover { background: var(--white); color: var(--ink); }

ul.scores, ul.history, ul.legend { list-style: none; }
ul.legend { display: none; }

/* Les 9 axes en grille : on lit sa vie d'un coup d'oeil, au lieu de
   parcourir neuf lignes separees par des filets. */
.grille-axes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 44px;
}
.grille-axes li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 14px;
  background: var(--paper);
}
.axe-nom { font-size: 12px; color: var(--muted-dark); }
.axe-note {
  font-family: var(--display);
  font-size: 30px;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* Les releves : la date, la moyenne, et surtout l'ecart. */
ul.history li.checkin-row {
  display: grid;
  grid-template-columns: 1fr auto 3.5rem;
  align-items: baseline;
  gap: 12px;
  padding: 10px 0;
  font-size: 14px;
  color: var(--muted-dark);
  font-variant-numeric: tabular-nums;
}
ul.history li + li { border-top: 1px solid var(--border); }
.releve-moy { color: var(--ink); font-weight: 600; }
.releve-ecart { text-align: right; font-weight: 600; }
.releve-ecart.monte { color: var(--terre); }
.releve-ecart.descend { color: var(--muted-dark); }
.releve-ecart.stable { color: var(--muted-dark); opacity: 0.6; }

.vide {
  font-size: 14px;
  color: var(--muted-dark);
  padding: 16px 0 4px;
}
.rappel-vision { margin-top: 36px; font-size: 14px; }
.rappel-vision a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--terre);
  padding-bottom: 2px;
}
.rappel-vision a:hover { color: var(--terre); }

/* ---------- Partage ---------- */

.partage { margin-top: 28px; }
.partage-titre {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted-dark);
  margin-bottom: 8px;
}
.partage-lien { display: flex; gap: 8px; }
.partage-lien input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  font-family: var(--body);
  font-size: 12px;
  color: var(--muted-dark);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.btn-copier {
  flex: none;
  padding: 10px 16px;
  font-size: 13px;
  background: var(--night);
  color: var(--paper);
}
.btn-copier.copie { background: var(--terre); }
.partage-note {
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted-dark);
  line-height: 1.5;
}
.btn-discret {
  width: 100%;
  margin-top: 12px;
  background: transparent;
  color: var(--muted-dark);
  border: 1px solid var(--border);
  font-size: 14px;
}
.btn-discret:hover { background: var(--white); color: var(--ink); }

/* ---------- Page vision ---------- */

.vision {
  max-width: 40rem;
  margin: 0 auto;
  padding: 32px 0 96px;
}
.vision h1 {
  font-family: var(--display);
  font-size: clamp(32px, 5vw, 46px);
  font-weight: 700;
  margin-bottom: 48px;
}
.vision h2 {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  margin: 56px 0 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.vision h2 + article { margin-top: 0; }
.vision article { margin-bottom: 28px; }
.vision h3 {
  font-family: var(--body);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted-dark);
  margin-bottom: 8px;
}
.vision article p {
  font-family: var(--display);
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: 6px;
}
.vision article p:empty { display: none; }
.vision .global {
  padding: 20px 24px;
  background: var(--white);
  border-left: 3px solid var(--terre);
  border-radius: 0 10px 10px 0;
  font-style: italic;
  color: var(--ink-2);
}
.vision .global:empty { display: none; }

/* ---------- Mobile ---------- */

@media (max-width: 860px) {
  .scores-layout, .dashboard {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .hero {
    grid-template-columns: 1fr;
    gap: 40px;
    min-height: auto;
    padding: 32px 0 56px;
  }
  /* 9 axes se divisent exactement en 3 colonnes : passer a 2 laisserait
     une cellule vide en fin de grille. */
  .grille-axes li { padding: 12px 10px; }
  .axe-nom { font-size: 11px; }
  .axe-note { font-size: 24px; }
  .col-wheel .wheel { margin: 0 auto; }

  /* Parcours : intro */
  .intro { padding: 28px 0 48px; }
  .intro h1 { font-size: 38px; }
  .intro-chapeau { font-size: 16px; margin-bottom: 28px; }
  .citation { margin-top: 32px; padding-left: 16px; }
  .citation blockquote { font-size: 22px; }
  .piliers { grid-template-columns: 1fr; gap: 10px; }
  .pilier { padding: 16px 16px 14px; }
  .pilier h2 { font-size: 22px; }
  .pilier > p { margin-bottom: 12px; }
  .portrait { padding: 16px 16px 18px; }
  /* Libelle et liste sur la meme ligne : trois lignes courtes au lieu de
     trois blocs empiles. */
  .portrait-choix { grid-template-columns: 1fr; gap: 10px; }
  .portrait-choix label {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    align-items: center;
    gap: 10px;
  }
  .portrait-choix span { margin: 0; }
  /* Le curseur garde sa ligne entiere : dans la colonne de 5.5rem des
     menus, onze crans tiendraient en 150px, 14px par cran. */
  .teinte { margin-top: 10px; }

  /* Parcours : ecrans d'axe. On resserre pour que le bouton reste
     atteignable sans un long defilement, sans compresser ce qu'on doit
     lire. */
  /* L'ecran occupe toute la hauteur : sur un ecran court (le resume),
     la barre se pose en bas au lieu de flotter au milieu du ciel. */
  .wizard {
    display: flex;
    flex-direction: column;
    min-height: 100svh;
    padding: 20px 0 0;
  }
  .axe-tache { flex: 1; display: flex; flex-direction: column; }
  .wizard > form,
  .axe-tache > form { flex: 1; display: flex; flex-direction: column; }
  .wizard > form > .actions,
  .axe-tache > form > .actions { margin-top: auto; }
  .wizard > form > .champ:last-of-type,
  .axe-tache > form > .champ:last-of-type { margin-bottom: 24px; }
  .wizard > h1 { font-size: 34px; margin-bottom: 22px; }
  .axe-barre { gap: 12px; margin-bottom: 22px; }
  .axe-ident h1 { font-size: 30px; }
  .axe-citation { margin-bottom: 18px; padding-left: 14px; }
  .axe-citation blockquote { font-size: 18.5px; }
  .axe-soustitre { font-size: 15.5px; }
  .axe-pourquoi { font-size: 14.5px; }
  .versant { margin: 30px 0 14px; }
  .versant h2 { font-size: 25px; }
  .champ { padding: 16px 14px 14px; margin-bottom: 12px; }
  .champ-question { font-size: 16px; }
  .champ-aide { font-size: 14px; }
  .wizard textarea { min-height: 6.5rem; }

  /* Le bouton qui avance reste sous le pouce pendant qu'on ecrit : la
     barre colle au bas de l'ecran, et se pose a sa place en fin de page.
     Une surface pleine plutot qu'un flou : un filtre sur du contenu qui
     defile fait chuter le rendu sur telephone. */
  /* Rien de colle sur telephone : le bouton qui avance attend en fin de
     page, apres ce qu'on vient d'ecrire. 56 px : dans la fourchette
     52-64 des notes de la landing. */
  .wizard .actions { gap: 10px; margin-top: 20px; padding-bottom: max(14px, env(safe-area-inset-bottom)); }
  .actions button[type="submit"]:not(.lien-retour) {
    min-width: 0;
    min-height: 56px;
    flex: 1 1 auto;
    padding: 14px 22px;
  }

  /* Parcours : scores */
  .scores-layout { gap: 14px; }
  .scores-chapeau { margin: -8px 0 20px; font-size: 15px; }
  .scores-roue { position: static; padding: 10px 8px 4px; }
  .scores-roue .wheel { max-width: 320px; }
  .curseurs { padding: 2px 14px; }
  .slider-row {
    grid-template-columns: 9rem minmax(0, 1fr) 1.5rem;
    gap: 10px;
    font-size: 14px;
  }
}

/* Sur un telephone assez haut, la roue reste en vue pendant qu'on
   bouge les curseurs. Sur un petit ecran, elle mangerait la place des
   curseurs : elle defile avec le reste. */
@media (max-width: 860px) and (min-height: 740px) {
  .scores-roue .wheel { max-width: 290px; }
}

/* ---------- Supprimer son compte ---------- */
/* Une page sobre : ce qui va disparaitre, en toutes lettres, puis le
   geste. Le bouton est rouge et pas or : ce n'est pas une recompense. */

.compte {
  max-width: 34rem;
  margin: 0 auto;
  padding: 6svh 0 80px;
}
.compte h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(32px, 5vw, 42px);
  line-height: 1.05;
  color: var(--encre);
  margin-bottom: 16px;
}
.compte p, .compte li { font-size: 16px; line-height: 1.6; color: var(--encre-2); }
.compte ul { margin: 6px 0 16px 22px; }
.compte-actions { display: flex; align-items: center; gap: 22px; margin-top: 28px; }
.compte-actions a { color: var(--encre); font-size: 15px; }
/* Blanc sur #B4232C : 6.5:1. */
.btn-danger {
  background: #B4232C;
  color: #FFFFFF;
  box-shadow: none;
}
.btn-danger:hover { background: #9A1D25; filter: none; box-shadow: none; }

.lien-compte { margin-top: 28px; font-size: 13px; }
.lien-compte a { color: var(--sourd); }

.annonce {
  margin: 0 0 22px;
  padding: 12px 16px;
  font-size: 15px;
  color: var(--encre);
  background: rgb(255 255 255 / .8);
  border-radius: 10px;
}

/* ---------- Mouvement reduit ---------- */
/* Le projet n'anime qu'un fond de bouton. On le neutralise quand la
   personne a demande moins de mouvement. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Lu par les lecteurs d'ecran, invisible a l'ecran. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- L'ecran de reve ---------- */
/* Une pause entre deux axes : l'image occupe l'ecran, tout le reste
   s'efface. C'est une recompense, pas une etape de plus. */

.reve {
  max-width: 33rem;
  margin: 0 auto;
  padding: 5svh 0 64px;
  text-align: center;
}
.reve .axe-situe { justify-content: center; margin-bottom: 26px; }

.reve h1 {
  font-size: clamp(24px, 3.4vw, 31px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--encre);
  margin-bottom: 10px;
  text-wrap: balance;
}

/* Le cadre a le format de l'image, 9:16 : ce qu'on voit ici est ce qui
   sera sur l'ecran du telephone. */
.reve-cadre {
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 9 / 16;
  margin: 0 auto 18px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--carte);
  box-shadow: 0 2px 6px rgba(11, 58, 86, .07),
              0 18px 44px rgba(11, 58, 86, .13);
}
.reve-cadre img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: apparaitre .4s ease-out;
}
@keyframes apparaitre { from { opacity: 0; } to { opacity: 1; } }

/* Sur grand ecran, la hauteur est bornee a l'ecran, la largeur suit. */
/* 62svh : a 1280x800 comme a 1440x900, le bouton pour avancer reste
   visible sans defiler sous le cadre. */
@media (min-width: 861px) {
  .reve-cadre { width: auto; height: min(62svh, 40rem); }
}

/* L'attente : un lavis de la couleur de l'axe se repand, comme un
   pigment sur du papier mouille. */
.peinture {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--teinte-axe, var(--or-2)) 12%, var(--carte));
}
.lavis {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(38% 30% at 30% 35%, color-mix(in srgb, var(--teinte-axe, var(--or-2)) 75%, transparent), transparent 70%),
    radial-gradient(42% 34% at 70% 60%, color-mix(in srgb, var(--teinte-axe, var(--or-2)) 60%, transparent), transparent 72%),
    radial-gradient(30% 26% at 45% 80%, color-mix(in srgb, var(--teinte-axe, var(--or-2)) 45%, transparent), transparent 70%);
  filter: blur(12px);
  animation: lavis 7s ease-in-out infinite alternate;
}
@keyframes lavis {
  0%   { transform: scale(.82) translate(-3%, 2%); opacity: .7; }
  50%  { transform: scale(1.02) translate(2%, -2%); opacity: 1; }
  100% { transform: scale(1.12) translate(-1%, 3%); opacity: .85; }
}
/* Sur une pastille blanche a .85 : meme sur la teinte pure de l'axe,
   --encre tient au moins 9.98:1 (teinte love, calcule). Sans pastille,
   le lavis dense le faisait passer sous 4.5:1. */
.peinture-texte {
  position: absolute;
  left: 50%;
  bottom: 8%;
  transform: translateX(-50%);
  padding: 4px 12px;
  border-radius: 999px;
  background: rgb(255 255 255 / .85);
  font-size: 14px;
  color: var(--encre);
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .lavis, .reve-cadre img { animation: none; }
  .lavis { transform: scale(1); opacity: .9; }
}

.reve-note {
  font-size: 14px;
  color: var(--encre-2);
  margin-bottom: 26px;
}
.reve .actions { justify-content: center; gap: 20px; }
.reve .actions form { margin: 0; }

/* L'echec se dit simplement, sans alarme : ca arrive, on peut reessayer. */
.reve-echec {
  max-width: 26rem;
  margin: 0 auto 24px;
  padding: 12px 16px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--encre);
  background: rgb(255 255 255 / .75);
  border-radius: 10px;
}

.reve-passer { margin-top: 20px; }
.reve-passer a {
  font-size: 14px;
  color: var(--encre-2);
  opacity: .75;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.reve-passer a:hover { opacity: 1; }

@media (max-width: 860px) {
  .reve { padding: 24px 0 40px; }
  .reve .actions { flex-direction: column-reverse; gap: 12px; }
  .reve .actions .btn { width: 100%; text-align: center; }
}

/* ---------- Le fond d'ecran ---------- */
/* La mosaique est presentee comme l'ecran du telephone qui la portera :
   9:16, bord a bord, coins arrondis. Une rangee par pilier, nommee en
   face. */

/* Les boutons et les blocs de la page passent par l'attribut hidden :
   .btn et .case-echec ont leur propre display, qui l'emporterait. */
.fond [hidden] { display: none !important; }

.fond {
  display: grid;
  gap: 32px;
  max-width: 62rem;
  margin: 0 auto;
  padding: 3svh 0 64px;
}
@media (min-width: 861px) {
  /* Une colonne figee, pas « auto » : la mosaique est un item flex a
     aspect-ratio, sa largeur intrinseque est nulle tant qu'elle n'a
     rien a quoi se raccrocher. « auto » la reduisait alors a la largeur
     des piliers seuls (0 a 30px selon l'etat des cases), ecrasant toute
     la mosaique. 24rem (sa largeur a cette taille d'ecran) + les
     piliers + le gap de .fond-apercu. */
  .fond { grid-template-columns: calc(24rem + 10px + 22px) 1fr; gap: 56px; align-items: start; }
}

.fond-apercu { display: flex; gap: 10px; justify-content: center; }

/* Mesure : --sourd sur le ciel le plus fonce de ce fond (#B2E4FF)
   4.6:1, --encre-2 6.3:1. Les noms de pilier sont courts et en 13 px :
   --encre-2. */
.fond-piliers {
  list-style: none;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  margin: 0;
  padding: 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--encre-2);
}
.fond-piliers li {
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.mosaique {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  flex: 0 1 22rem;
  min-width: 0;
  aspect-ratio: 9 / 16;
  align-self: start;
  border-radius: 28px;
  overflow: hidden;
  background: var(--carte);
  box-shadow: 0 2px 6px rgba(11, 58, 86, .07),
              0 18px 44px rgba(11, 58, 86, .13);
}
@media (min-width: 861px) { .mosaique { flex-basis: 24rem; } }

.case {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--carte);
}
.case-cadre { position: absolute; inset: 0; }
.case-cadre img { display: block; width: 100%; height: 100%; object-fit: cover; animation: apparaitre .4s ease-out; }
/* Le lavis de l'ecran d'image, a l'echelle d'une case : flou plus court. */
.case[data-etat="en_cours"] { background: color-mix(in srgb, var(--teinte-axe) 12%, var(--carte)); }
.case .lavis { inset: -30%; filter: blur(6px); }

.case[data-etat="vide"] { background: var(--teinte-axe); }
/* Le nom sur une pastille blanche : mesure, ni le blanc ni l'encre ne
   passent AA directement sur les neuf teintes (blanc 1.7 a 3.5:1,
   encre 3.4:1 sur #EC4899). Encre sur la pastille a .9, posee sur la
   teinte la plus sombre (#EC4899) : 11.4:1. */
.case-nom {
  position: relative;
  max-width: 88%;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--encre);
  background: rgb(255 255 255 / .9);
  border-radius: 999px;
  padding: 3px 9px;
  text-align: center;
}

.case-echec {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 12px;
  color: var(--sourd);
  text-align: center;
}
.case-echec form { margin: 0; }
.case-reessayer,
.case-reessayer:hover {
  padding: 6px 8px;
  font-size: 13px;
  font-weight: 600;
  background: none;
  box-shadow: none;
  filter: none;
  color: var(--encre);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.fond-texte { min-width: 0; }
.fond-texte h1 {
  font-size: clamp(26px, 3.6vw, 34px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--encre);
  margin-bottom: 12px;
}
.fond-chapeau { font-size: 16px; color: var(--encre-2); margin-bottom: 24px; max-width: 30rem; }
.fond-texte .reve-echec { margin: 0 0 20px; }
.fond-attente { font-size: 14px; color: var(--encre-2); margin-bottom: 16px; }

.fond-actions { display: flex; flex-direction: column; gap: 12px; max-width: 24rem; }
.fond-actions .btn, .fond-actions button { text-align: center; width: 100%; }
/* Le bouton discret, pose sur le ciel : un voile blanc pour qu'il se
   lise comme un bouton, --encre dessus. */
.fond-actions .btn-discret {
  margin-top: 0;
  padding: 14px 24px;
  border-radius: 10px;
  border: 1px solid rgb(255 255 255 / .9);
  background: rgb(255 255 255 / .55);
  color: var(--encre);
  box-shadow: none;
  text-decoration: none;
}
.fond-actions .btn-discret:hover { background: var(--carte); color: var(--encre); }
.fond-actions button[disabled] { opacity: .55; cursor: not-allowed; filter: grayscale(.4); box-shadow: none; transform: none; }

.mode-emploi { margin-top: 28px; max-width: 30rem; font-size: 14.5px; color: var(--encre-2); }
.mode-emploi summary { cursor: pointer; font-weight: 600; color: var(--encre); }
.mode-emploi ol { margin: 12px 0 10px 1.2em; display: grid; gap: 6px; }

.cafe { margin-top: 40px; font-size: 14px; color: var(--encre-2); max-width: 30rem; }
.cafe a { color: var(--encre); font-weight: 600; margin-left: 4px; }
.fond-retour { margin-top: 16px; font-size: 14px; }
.fond-retour a { color: var(--encre); }

@media (max-width: 860px) {
  .fond { padding: 16px 0 40px; }
}

/* ---------- Carrefour : se noter, ou definir son zero ----------
   Deux chemins de meme poids, cote a cote. Le chemin du zero porte deja
   la nuit du versant cauchemar. Mesures : --encre sur --carte 15.2:1,
   --encre-2 sur --carte 8.1:1 ; --nuit-texte sur --nuit-2 12.0:1,
   --nuit-sourd sur --nuit-2 6.4:1. */
.carrefour-choix {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 28px;
}
.carrefour-choix .actions { grid-column: 1 / -1; margin-top: 8px; }
.chemin {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-height: 11rem;
  padding: 24px 24px 26px;
  text-align: left;
  background: var(--carte);
  color: var(--encre);
  border: 1px solid rgba(11, 58, 86, .14);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(11, 58, 86, .06), 0 10px 28px rgba(11, 58, 86, .08);
}
.chemin:hover {
  filter: none;
  border-color: rgba(11, 58, 86, .35);
  box-shadow: 0 2px 4px rgba(11, 58, 86, .08), 0 14px 34px rgba(11, 58, 86, .12);
}
.chemin-titre { font-size: 18px; font-weight: 600; }
.chemin-texte { font-size: 14.5px; font-weight: 400; line-height: 1.55; color: var(--encre-2); }
.chemin-nuit { background: var(--nuit-2); border-color: var(--nuit-bord); color: var(--nuit-texte); }
.chemin-nuit:hover { border-color: var(--nuit-sourd); }
.chemin-nuit .chemin-texte { color: var(--nuit-sourd); }
.chemin-nuit:focus-visible { outline-color: var(--nuit-or); }
@media (max-width: 640px) {
  .carrefour-choix { grid-template-columns: 1fr; }
  .chemin { min-height: 0; }
}

/* ---------- Page des axes : la navigation du parcours libre ----------
   Les tuiles menent chacune a leur axe. Le chemin (.chemin) est partage
   avec le carrefour : un lien y prend la meme forme qu'un bouton. */
/* .mes-axes et pas .axes : .axes est la section des pastilles de
   l'accueil, ses styles de liste deformaient les tuiles. */
.mes-axes { max-width: 56rem; margin: 0 auto; padding: 32px 0 96px; }
.mes-axes h1 {
  font-family: var(--display);
  font-size: clamp(32px, 5vw, 46px);
  font-weight: 700;
  color: var(--encre);
}
.axes-chapeau { margin-top: 16px; max-width: 36rem; color: var(--encre-2); line-height: 1.55; }
.axes-suite { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 24px; }
.axes-lien { color: var(--encre-2); font-weight: 600; text-underline-offset: 3px; }
.axes-grille {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 32px 0 0;
  padding: 0;
}
.axe-tuile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  min-height: 7.5rem;
  padding: 16px;
  border-radius: 14px;
  background: var(--carte);
  border: 1px solid rgba(11, 58, 86, .12);
  border-left: 4px solid var(--teinte);
  color: var(--encre);
  text-decoration: none;
  overflow: hidden;
  transition: border-color .14s ease, box-shadow .14s ease;
}
.axe-tuile:hover { box-shadow: 0 10px 28px rgba(11, 58, 86, .12); }
/* Une image prete remplit la tuile ; un voile garde le texte lisible
   (encre sur voile blanc a 88 % : au moins 12:1). */
.axe-tuile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.axe-tuile img ~ span { position: relative; }
.axe-tuile img ~ .axe-tuile-nom,
.axe-tuile img ~ .axe-tuile-etat {
  align-self: flex-start;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .88);
}
.axe-tuile-nom { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.axe-tuile-etat { font-size: 13.5px; color: var(--sourd); }
.axe-tuile[data-etat="vide"] { background: var(--carte-voile); }
a.chemin { text-decoration: none; }
.axes-chemins { margin-top: 40px; }
@media (max-width: 640px) {
  .mes-axes { padding: 8px 0 56px; }
  .mes-axes h1 { font-size: clamp(32px, 9vw, 40px); }
  .axes-suite .btn { flex: 1 1 100%; min-height: 56px; text-align: center; }
  /* Deux colonnes d'images au format de l'ecran : on voit ses reves,
     pas une liste. */
  .axes-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 28px; }
  .axe-tuile { aspect-ratio: 3 / 4; min-height: 0; padding: 10px; border-left-width: 3px; }
  .axes-chemins { margin-top: 32px; }
}

/* Garder son image : la telecharger tout de suite, ou revenir a ses axes. */
.reve-garder { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 12px; }
.reve-garder a { color: var(--encre-2); font-weight: 600; text-underline-offset: 3px; }

/* ---------- Priorite : un axe, une action ----------
   Carte blanche liseree de la couleur de l'axe. Mesures sur --carte :
   --encre 15.2:1, --encre-2 8.1:1, --sourd 6.1:1. */
.priorite {
  margin-bottom: 40px;
  padding: 22px 24px 24px;
  background: var(--carte);
  border: 1px solid rgba(11, 58, 86, .12);
  border-left: 5px solid var(--teinte);
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(11, 58, 86, .08);
}
.priorite-sur { font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--sourd); }
.priorite h2 { display: flex; align-items: flex-start; gap: 10px; margin: 6px 0 10px; }
.priorite h2 .pastille { flex: none; margin-top: .45em; }
.priorite-pourquoi { color: var(--encre-2); line-height: 1.55; }
.priorite-action { margin-top: 12px; color: var(--encre); line-height: 1.55; }
.priorite-note { margin-top: 12px; font-size: 14px; color: var(--sourd); line-height: 1.55; }
.priorite-joe { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 18px; }
.priorite-joe span { font-size: 13.5px; color: var(--sourd); }

/* ---------- Passe telephone (consignes de la landing de Joe) ----------
   Pas la meme page en une colonne : on reecrit pour le petit ecran.
   On retire ce qui double une information deja visible, on replie ce
   qui aide sans etre indispensable, et le texte grossit plutot qu'il ne
   rapetisse. */
.intro-court, .champ-aide-repli { display: none; }
@media (max-width: 640px) {
  /* Accueil : les pastilles des axes doublent la roue d'exemple. */
  body.accueil .axes { display: none; }
  .hero h1 { font-size: clamp(36px, 10vw, 44px); }
  .btn-google { display: block; min-height: 56px; text-align: center; }

  /* Intro : les axes sont presentes sur la page suivante ; le deroule
     tient en une phrase. */
  .piliers { display: none; }
  .intro-deroule p:not(.intro-court) { display: none; }
  .intro-court { display: block; }

  /* Ecran d'axe : la citation s'efface, l'aide se replie. */
  .axe-citation { display: none; }
  .champ > .champ-aide { display: none; }
  .champ-aide-repli { display: block; margin: 4px 0 10px; }
  .champ-aide-repli summary {
    min-height: 44px; display: flex; align-items: center;
    font-size: 14.5px; font-weight: 600; color: var(--encre-2); cursor: pointer;
  }
  .champ-aide-repli span { display: block; font-size: 15px; line-height: 1.55; color: var(--encre-2); }
  body.nightmare .champ-aide-repli summary,
  body.nightmare .champ-aide-repli span { color: var(--nuit-sourd); }
  .champ-question { font-size: 17px; }

  /* Ma roue : la priorite d'abord (c'est l'action), puis la roue. La
     grille des notes repete les chiffres de la roue : masquee. */
  .dashboard { display: flex; flex-direction: column; gap: 0; padding-top: 8px; }
  .col-details { display: contents; }
  .priorite { order: -1; margin-bottom: 32px; }
  .col-wheel { margin-bottom: 40px; }
  .titre-notes, .grille-axes { display: none; }
  .lien-compte a { display: inline-block; padding: 10px 0; }
}

/* Ma vision : un volet par axe, la pastille de sa couleur. */
.vision-axe { border-bottom: 1px solid rgba(11, 58, 86, .1); }
.vision-axe summary {
  display: flex; align-items: center; gap: 10px;
  min-height: 52px; font-size: 16px; font-weight: 600; color: var(--encre);
  cursor: pointer; list-style: none;
}
.vision-axe summary::-webkit-details-marker { display: none; }
.vision-axe summary::after { content: "+"; margin-left: auto; font-weight: 400; color: var(--sourd); }
.vision-axe[open] summary::after { content: "\2212"; }
.vision-axe p { margin: 0 0 12px; line-height: 1.6; color: var(--encre-2); }
.vision-axe p:empty { display: none; }

/* Le titre du tableau de bord : il nomme la personne. */
.titre-roue {
  max-width: 62rem;
  margin: 24px auto 0;
  font-family: var(--display);
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  color: var(--encre);
}
@media (max-width: 640px) { .titre-roue { margin-top: 8px; margin-bottom: 24px; font-size: clamp(30px, 8.5vw, 36px); } }

/* Les titres qui nomment la personne sont longs : interligne serre et
   lignes equilibrees, sans mot orphelin. */
.mes-axes h1, .titre-roue, .intro h1, .carrefour h1 { line-height: 1.12; text-wrap: balance; }

/* Pied de page : la deconnexion, seulement sur telephone. */
.pied { display: none; }
@media (max-width: 480px) {
  .pied { display: block; padding: 8px 24px 32px; text-align: center; }
  .pied a { display: inline-block; padding: 12px; font-size: 14px; color: var(--sourd); }
}
/* Un lien habille en bouton prend la largeur et centre son texte, comme
   les boutons voisins. */
.fond-actions a.btn-discret { display: block; text-align: center; }

/* Lien de connexion de developpement : jamais en production. */
.hero-dev { margin-top: 14px; font-size: 14px; }
.hero-dev a { color: var(--encre-2); font-weight: 600; text-underline-offset: 3px; }

/* ---------- Accueil, revue du 7 octobre ----------
   Les benefices en liste, a pastilles or. La duree passe au second plan :
   elle ne pese pas autant que ce qu'on gagne. */
.hero-atouts { list-style: none; padding: 0; margin: 0 0 28px; max-width: 30rem; }
.hero-atouts li {
  position: relative; padding-left: 26px; margin-bottom: 10px;
  font-size: 17px; line-height: 1.5; color: var(--encre-2);
}
.hero-atouts li::before {
  content: ""; position: absolute; left: 4px; top: .55em;
  width: 9px; height: 9px; border-radius: 50%; background: var(--or-2);
}
.hero .hero-duree { font-size: 13px; line-height: 1.5; color: var(--sourd); margin-bottom: 0; }
.wheel-serree { display: none; }
@media (max-width: 640px) {
  /* La roue est l'objet qu'on vient chercher : elle et ses noms prennent
     toute la largeur, dans un cadre ajuste. Le haut de la page blanchit
     pour que les noms ressortent (--encre-2 sur blanc : 8,1:1).
     Echelle d'espacement fixe : 8 / 16 / 24 / 32. */
  body.accueil { background: linear-gradient(180deg, #FFFFFF 0, #FFFFFF 320px, var(--ciel-4) 620px); }
  body.accueil::before, body.accueil::after { display: none; }
  .hero { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 16px 0 40px; }
  .hero-texte { display: contents; }
  .hero-texte > * { order: 3; }
  /* La roue ouvre la page, puis le titre (revue du 7 octobre). */
  .hero h1 { order: 1; margin: 0 0 16px; font-size: clamp(34px, 9.6vw, 40px); line-height: 1.08; }
  .hero-roue { order: 0; margin: 32px -16px 32px; padding: 0; background: none; border: none; box-shadow: none; }
  .hero-roue > .wheel:not(.wheel-serree) { display: none; }
  .hero-roue .wheel-serree { display: block; width: 100%; max-width: none; }
  .wheel-serree .wheel-label { font-size: 11px; fill: var(--encre-2); }
  .wheel-serree .wheel-grid, .wheel-serree .wheel-axis { stroke: #A9CCE0; }
  .hero-atouts { margin: 0 0 32px; }
  .hero-atouts li { font-size: 17px; margin-bottom: 12px; color: var(--encre); }
  .btn-google { width: 100%; }
  .hero .hero-dev { margin-top: 16px; text-align: center; font-size: 14px; }
  .hero .hero-duree { margin-top: 24px; text-align: center; color: var(--encre-2); }
}



@media (max-width: 640px) {
  /* Intro : le deroule tient en une ligne de texte, pas une carte de
     plus au-dessus de celle du portrait (« moins de boites »). */
  .intro-deroule { padding: 0; background: none; border: none; margin: 0 0 24px; }
  .intro-court { font-size: 15px; line-height: 1.55; color: var(--encre-2); }
}



@media (max-width: 480px) {
  /* Dix pastilles sur une ligne tombaient a ~27 px : deux rangees de
     cinq, ~56 x 40 px, au-dessus des 32 px des notes de la landing. */
  .teinte-choix { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
}

/* ---------- Intro, revue du 7 octobre : de l'air ----------
   Echelle fixe 8 / 16 / 24 / 32. Les petits textes du portrait passent
   a 14-15 px (« texte plus gros, pas plus petit »). */
@media (max-width: 640px) {
  /* Revue du 7 octobre, « espace plus la page » : chaque ecart monte
     d'un cran sur l'echelle (16 > 24, 24 > 32, 32 > 48). */
  .intro { padding: 48px 0 64px; }
  .citation { margin-top: 48px; }
  .citation figcaption { margin-top: 8px; }
  .intro h1 { line-height: 1.1; margin-bottom: 24px; }
  .intro-chapeau { margin-bottom: 32px; line-height: 1.6; }
  .intro-deroule { margin-bottom: 48px; }

  .portrait { padding: 32px 20px; }
  .portrait legend { margin-bottom: 16px; font-size: 17px; }
  .portrait-note { font-size: 15px; line-height: 1.6; margin-bottom: 32px; }
  .portrait-choix { gap: 24px; }
  .portrait-choix label { font-size: 14px; }
  .teinte { margin-top: 32px; }
  .teinte legend { margin-bottom: 16px; font-size: 14px; }
  .intro form > button[type="submit"] { margin-top: 48px; }
}

/* Sexe : deux boutons a toucher, 52 px de haut. Le choix se marque par
   un bord --encre-2 de 2 px (7,7:1 sur la carte) et un fond teinte. */
.sexe { margin: 0 0 16px; padding: 0; border: none; }
.sexe legend {
  float: none;
  margin-bottom: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--encre-2);
}
.sexe-choix { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sexe-option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  font-size: 16px;
  color: var(--encre);
  background: var(--carte);
  border: 1px solid rgba(11, 58, 86, .14);
  border-radius: 8px;
  cursor: pointer;
}
.sexe-option input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}
.sexe-option:has(input:checked) {
  border: 2px solid var(--encre-2);
  background: rgba(143, 205, 239, .35);
  font-weight: 600;
}
.sexe-option:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(143, 205, 239, .7); }
@media (forced-colors: active) {
  .sexe-option:has(input:checked) { outline: 3px solid Highlight; }
}
@media (max-width: 640px) {
  .sexe { margin-bottom: 24px; }
  .sexe legend { font-size: 14px; margin-bottom: 16px; }
}

/* Mes axes, mobile (revue du 7 octobre) : ecarts ramenes sur l'echelle
   8 / 16 / 24 / 32. Le titre collait a la navigation (8 px). */
@media (max-width: 640px) {
  .mes-axes { padding: 32px 0 64px; }
  .axes-chapeau { margin-top: 16px; font-size: 16px; line-height: 1.6; }
  .axes-suite { margin-top: 32px; gap: 16px; }
  .axes-grille { gap: 16px; margin-top: 32px; }
  .axe-tuile { padding: 16px 12px; gap: 8px; }
  .axe-tuile-etat { font-size: 14px; }
  .axes-chemins { margin-top: 48px; gap: 16px; }
  .chemin { padding: 24px; gap: 8px; }
  .chemin-texte { font-size: 15px; }
}

/* ---------- Passe mobile sur tous les ecrans (revue du 8 octobre) ----------
   Mesuree a 390 px : chaque ecart releve hors de l'echelle 8 / 16 / 24 / 32
   y revient, chaque texte de lecture passe a 14 px au moins, chaque cible
   tactile a 44 px de haut au moins. L'accueil, deja valide, n'est pas
   touche. */
@media (max-width: 640px) {
  /* Titres du parcours : 16 px jusqu'au chapeau, 24 px sans chapeau. */
  .wizard > h1 { margin-bottom: 24px; }
  .wizard > h1:has(+ .wizard-chapeau) { margin-bottom: 16px; }
  .wizard-chapeau { margin-top: 0; }
  .citation figcaption { font-size: 14px; }

  /* Ecran d'axe (reve et cauchemar). */
  .axe-barre { margin-bottom: 24px; }
  .axe-ident-pilier { margin-bottom: 8px; font-size: 14px; }
  .progress-rank { font-size: 14px; padding: 4px 12px; }
  .axe-soustitre { margin-bottom: 8px; }
  .versant { margin: 32px 0 16px; }
  .versant h2 { margin-bottom: 8px; }
  .champ { margin-bottom: 16px; }
  .champ-num { font-size: 14px; }
  .champ-tag { font-size: 14px; }
  .champ-aide-repli { margin: 8px 0 0; }
  .wizard textarea { margin-top: 16px; }
  .wizard .actions { margin-top: 24px; }

  /* Ecran d'image. */
  .reve .axe-situe { margin-bottom: 24px; }
  .reve-cadre { margin-bottom: 16px; }
  .reve-note { margin-bottom: 16px; }
  .reve-garder { margin-top: 0; gap: 0 24px; }
  .reve .actions { margin-top: 24px; }
  .reve-garder a, .axes-lien { display: inline-flex; align-items: center; min-height: 44px; }

  /* Resume. */
  .resume-reecrire { margin-top: 0; }
  .resume-reecrire button { min-height: 44px; }

  /* Carrefour : 32 px du chapeau aux deux chemins. */
  .carrefour-choix { margin-top: 8px; }

  /* Notes. */
  .scores-chapeau { margin: 0 0 24px; }
  .scores-layout { gap: 16px; }

  /* Fond d'ecran. */
  .fond-texte h1 { margin-bottom: 16px; }
  .fond-actions { gap: 16px; }
  .mode-emploi { margin-top: 32px; font-size: 15px; }
  .mode-emploi ol { margin: 16px 0 16px 1.2em; gap: 8px; }
  .fond-piliers li, .fond-cadre li { font-size: 14px; }

  /* Ma roue : priorite et partage. */
  .priorite-sur { font-size: 14px; }
  .priorite h2 { margin: 8px 0 8px; }
  .priorite-action, .priorite-note { margin-top: 16px; }
  .priorite-note { font-size: 15px; }
  .priorite-joe { margin-top: 24px; gap: 8px 16px; }
  .priorite-joe span { font-size: 14px; }
  .partage { margin-top: 32px; }
  .partage-titre { font-size: 14px; }
  .partage-lien input { font-size: 16px; min-height: 44px; }
  .btn-copier { font-size: 15px; min-height: 44px; }
  .partage-note { font-size: 14px; }
  /* En bloc : en ligne, le bouton prenait 12 px de plus sous la note. */
  .partage .btn-discret { display: block; margin-top: 16px; }
  .lien-compte { font-size: 14px; }
  .lien-compte a { display: inline-flex; align-items: center; min-height: 44px; }

  /* Ma vision. */
  .vision-axe p { margin-bottom: 16px; }

  /* Suppression du compte. */
  .compte ul { margin: 8px 0 16px 22px; }
  .compte-actions { margin-top: 32px; gap: 24px; }
  .compte-actions a { display: inline-flex; align-items: center; min-height: 44px; }

  .teinte-pastille { height: 44px; }

  /* Noms autour de la roue : 10,5 unites dans un cadre de 380, rendues
     a 340 px, ca faisait 9 px (8 px sur les notes, roue a 290 px).
     13,5 unites sur toute la largeur : 12 px reels. */
  .wheel:not(.wheel-serree) .wheel-label { font-size: 13.5px; }
  .wheel:not(.wheel-serree) { overflow: visible; }
  /* 94 % : a pleine largeur, « Spirituelle » debordait de la carte. */
  .scores-roue .wheel { width: 94%; max-width: none; }
  .scores-roue .wheel:not(.wheel-serree) .wheel-label { font-size: 15px; }
}

/* Titres en Poppins gras : interligne serre partout, et l'intro ramenee a
   la taille des autres titres du parcours (44 px faisaient trois lignes). */
.vision h1, .compte h1 { line-height: 1.12; }
@media (max-width: 640px) {
  .intro h1 { font-size: 34px; }
  /* « Besoin d'aide » se lisait comme un libelle : le « + » de Ma vision
     dit qu'on peut l'ouvrir. */
  .champ-aide-repli summary { list-style: none; gap: 8px; }
  .champ-aide-repli summary::-webkit-details-marker { display: none; }
  .champ-aide-repli summary::after { content: "+"; margin-left: auto; font-size: 18px; font-weight: 400; color: var(--sourd); }
  .champ-aide-repli[open] summary::after { content: "\2212"; }
  .champ-aide-repli[open] span { margin-bottom: 8px; }
}

/* ---------- Ecran d'axe, nouvelle version (essai sur « Ton corps ») ----------
   Un chapeau sous le titre au lieu de quatre blocs, la question alignee
   sur son champ, les pistes derriere un vrai bouton, un « Suivant » a sa
   taille. Tout est limite a .axe-nouveau : les autres axes ne bougent pas.
   Retour arriere : tag git avant-ton-corps. */
.axe-nouveau .axe-chapeau {
  margin: 16px 0 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--encre-2);
  text-wrap: pretty;
}
.axe-nouveau form { margin-top: 32px; }
.axe-nouveau .champ { padding: 24px 20px; margin-bottom: 24px; cursor: default; }
.axe-nouveau .champ-question { display: block; font-size: 17px; line-height: 1.45; }
/* Les pistes : un bouton secondaire borde, sa forme dit qu'on peut le
   toucher. --encre-2 sur --carte : 8.1:1. */
.axe-nouveau .pistes { margin: 16px 0 0; }
.axe-nouveau .pistes summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  font-size: 15px;
  font-weight: 600;
  color: var(--encre-2);
  background: var(--carte);
  border: 1px solid rgba(11, 58, 86, .25);
  border-radius: 999px;
  cursor: pointer;
  list-style: none;
}
.axe-nouveau .pistes summary::-webkit-details-marker { display: none; }
.axe-nouveau .pistes summary::before { content: "+"; font-size: 18px; font-weight: 400; line-height: 1; }
.axe-nouveau .pistes[open] summary::before { content: "\2212"; }
.axe-nouveau .pistes summary:hover { border-color: rgba(11, 58, 86, .45); }
.axe-nouveau .pistes summary:focus-visible { outline: 3px solid rgba(143, 205, 239, .9); outline-offset: 2px; }
.axe-nouveau .pistes p { margin: 16px 0 0; font-size: 15px; line-height: 1.6; color: var(--encre-2); }
.axe-nouveau textarea { margin-top: 16px; }
/* « Suivant » a sa largeur naturelle, a droite ; « Retour » a gauche. */
.axe-nouveau .actions,
.axe-nouveau .axe-tache > form > .actions { margin-top: 32px; }
.axe-nouveau .actions button[type="submit"]:not(.lien-retour) {
  flex: 0 0 auto;
  min-width: 0;
  min-height: 52px;
  margin-left: auto;
  padding: 0 32px;
}
/* Sur ordinateur, la citation reste au-dessus du chapeau : 24 px entre eux. */
.axe-nouveau .axe-citation { margin-bottom: 24px; }
.axe-nouveau .axe-citation + .axe-chapeau { margin-top: 0; }
/* Les mots en gras passent a l'encre pleine : ils ressortent sans crier. */
.axe-chapeau strong { font-weight: 600; color: var(--encre); }

/* En-tete de l'axe (essai « Ton corps ») : la roue fait la hauteur du bloc
   « pilier + titre », alignee en haut et en bas ; 4 px entre les deux. */
.axe-nouveau .axe-barre { align-items: center; }
.axe-nouveau .axe-ident-pilier { margin-bottom: 4px; line-height: 1.2; }
.axe-nouveau .axe-ident h1 { line-height: 1.05; }
.axe-nouveau .roue-progres { width: 48px; height: 48px; }

/* Cote zero, la nuit. Mesures sur --nuit-2 : libelle --nuit-texte 12:1,
   bord et pistes --nuit-sourd 6.4:1 (--nuit-bord, a 1.4:1, ne se voyait
   pas comme un bouton). */
body.nightmare .axe-nouveau .pistes summary {
  color: var(--nuit-texte);
  background: transparent;
  border-color: var(--nuit-sourd);
}
body.nightmare .axe-nouveau .pistes summary:hover { border-color: var(--nuit-texte); }
body.nightmare .axe-nouveau .pistes p { color: var(--nuit-sourd); }
body.nightmare .axe-chapeau { color: var(--nuit-sourd); }
body.nightmare .axe-chapeau strong { color: var(--nuit-texte); }

/* ---------- Ecran d'image, aligne sur l'ecran d'axe (8 octobre) ----------
   Meme en-tete, meme alignement a gauche, gestes secondaires en boutons
   bordes, meme barre du bas : « ← Mes axes » a gauche, « Continuer » a sa
   taille a droite. */
.reve-nouveau { text-align: left; }
.reve-nouveau .axe-barre { align-items: center; margin-bottom: 24px; }
.reve-nouveau .axe-ident-pilier { margin-bottom: 4px; line-height: 1.2; }
.reve-nouveau .axe-ident h1 { margin: 0; font-size: 34px; line-height: 1.05; letter-spacing: -0.01em; }
.reve-nouveau .roue-progres { width: 48px; height: 48px; }
.reve-nouveau .reve-cadre { margin: 0; }
.reve-nouveau .reve-note { margin: 16px 0 0; font-size: 15px; line-height: 1.6; color: var(--encre-2); text-align: left; }
.reve-gestes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.reve-gestes form { margin: 0; }
/* Bouton secondaire borde, le meme que « Voir des pistes ».
   --encre-2 sur la carte : 8.1:1 ; bord a .25 sur le ciel. */
.pilule,
.pilule:hover {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  font-family: var(--body);
  font-size: 15px;
  font-weight: 600;
  color: var(--encre-2);
  background: var(--carte);
  border: 1px solid rgba(11, 58, 86, .25);
  border-radius: 999px;
  box-shadow: none;
  filter: none;
  text-decoration: none;
  cursor: pointer;
}
.pilule:hover { border-color: rgba(11, 58, 86, .45); color: var(--encre); }
.pilule:focus-visible { outline: 3px solid rgba(143, 205, 239, .9); outline-offset: 2px; }
.reve-nouveau .actions {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
}
.reve-nouveau .actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  min-height: 52px;
  margin-left: auto;
  padding: 0 32px;
}
.reve-echec-titre { font-size: 22px; font-weight: 700; color: var(--encre); margin: 0 0 8px; }
@media (max-width: 640px) {
  .reve-nouveau { padding: 24px 0 48px; }
  .reve-nouveau .axe-ident h1 { font-size: 30px; }
}
/* Sur ordinateur, la colonne prend la largeur de l'image (bornee a la
   hauteur de l'ecran) : l'en-tete et les boutons s'alignent sur elle. */
@media (min-width: 861px) {
  .reve-nouveau { max-width: max(22rem, calc(min(62svh, 40rem) * 9 / 16)); }
  .reve-nouveau .reve-cadre { width: 100%; height: auto; }
}

/* Pendant le parcours, le seul lien « Mes axes », a gauche (la regle
   generale pousse le dernier lien a droite). */
.nav-parcours a { margin-left: 0; }
.nav-parcours a:last-child { margin-left: 0; }
/* Les deux gestes en deux colonnes egales, sur toute la largeur : deux
   boutons calés a gauche laissaient un vide a droite. */
.reve-gestes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.reve-gestes .pilule { width: 100%; justify-content: center; }
.reve-gestes form .pilule { width: 100%; }
.nav-parcours a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 500; color: var(--encre-2); }
@media (max-width: 480px) { .nav-parcours { padding-top: 8px; padding-bottom: 8px; } }
/* Menu du haut sur telephone : 14 px et 44 px de zone tactile (mesure du
   8 octobre, il faisait 13,5 px sur 22 px). Les quatre liens tiennent. */
@media (max-width: 480px) {
  nav { font-size: 14px; padding-top: 8px; padding-bottom: 8px; }
  nav a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Le lien « Mes axes » du parcours vit dans la colonne de contenu : il
   s'aligne sur son bord gauche, quelle que soit la largeur de l'ecran
   (dans une barre centree de 62rem, il ne s'alignait sur rien). */
nav.nav-parcours { display: block; max-width: none; margin: 0 0 16px; padding: 0; }

/* Ecran d'axe sur ordinateur : la colonne de gauche (bande + chapeau ou
   contexte) est un seul bloc qui colle en haut. L'ancien calage sur la
   hauteur du bloc du versant (130 px) faisait passer la citation sous le
   titre depuis que le chapeau a remplace ce bloc. */
@media (min-width: 1000px) {
  .wizard.wizard-colonnes.axe-nouveau {
    grid-template-areas:
      "nav     nav"
      "entete  versant"
      "entete  questions";
    grid-template-rows: auto auto 1fr;
  }
  .wizard-colonnes.axe-nouveau .nav-parcours { grid-area: nav; margin-bottom: 24px; }
  .wizard-colonnes.axe-nouveau .axe-entete {
    display: block;
    grid-area: entete;
    align-self: start;
    position: sticky;
    top: 7svh;
  }
  .wizard-colonnes.axe-nouveau .axe-barre,
  .wizard-colonnes.axe-nouveau .axe-contexte { position: static; grid-area: auto; }
  .wizard-colonnes.axe-nouveau .axe-barre { margin-bottom: 32px; }
  .wizard-colonnes.axe-nouveau .versant { margin-top: 0; }
}
/* Le retour du parcours : la meme pilule bordee que les autres gestes
   secondaires, avec un chevron. 24 px avant l'en-tete de l'axe. */
nav.nav-parcours { margin-bottom: 24px; }
nav.nav-parcours a.nav-retour { min-height: 44px; padding: 0 16px 0 12px; font-size: 15px; font-weight: 600; color: var(--encre-2); }
body.nightmare nav.nav-parcours a.nav-retour { color: var(--nuit-texte); background: transparent; border-color: var(--nuit-sourd); }

/* ---------- Menu principal en onglets (decision du 8 octobre) ----------
   Ordinateur : des pilules en haut, la page active remplie.
   Telephone : une barre d'onglets fixe en bas, dans la zone du pouce,
   comme une app (skill imagegen-frontend-mobile, regle de navigation).
   Exception assumee a « rien de collant », qui venait de la landing :
   ici on navigue entre quatre pages, et la barre n'existe que sur ces
   pages, ou l'on n'ecrit pas (pas de clavier qui la fasse sauter). */
nav.onglets { display: flex; align-items: center; gap: 8px; max-width: 62rem; margin: 0 auto; padding: 24px; }
nav.onglets .onglet {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--encre-2);
  border: 1px solid transparent;
  border-radius: 999px;
  text-decoration: none;
}
nav.onglets .onglet:hover { background: rgb(255 255 255 / .6); color: var(--encre); }
nav.onglets .onglet[aria-current="page"] {
  color: var(--encre);
  background: var(--carte);
  border-color: rgba(11, 58, 86, .18);
  box-shadow: 0 1px 2px rgba(11, 58, 86, .06);
}
nav.onglets .onglet:focus-visible { outline: 3px solid rgba(143, 205, 239, .9); outline-offset: 2px; }
nav.onglets .nav-sortie { margin-left: auto; color: var(--encre-2); font-size: 15px; }
@media (max-width: 640px) {
  nav.onglets {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    max-width: none;
    margin: 0;
    padding: 4px 4px max(4px, env(safe-area-inset-bottom));
    background: rgb(255 255 255 / .97);
    border-top: 1px solid rgba(11, 58, 86, .12);
    box-shadow: 0 -4px 16px rgba(11, 58, 86, .06);
  }
  nav.onglets .onglet {
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-height: 60px;
    padding: 4px 0;
    font-size: 14px;
    letter-spacing: -0.01em;
    white-space: nowrap;
    border: none;
    border-radius: 12px;
  }
  nav.onglets .onglet[aria-current="page"] { background: none; border: none; box-shadow: none; }
  /* La page active : une pastille derriere l'icone, comme sur les apps. */
  nav.onglets .onglet[aria-current="page"] svg {
    box-sizing: content-box;
    padding: 2px 16px;
    border-radius: 999px;
    background: rgba(143, 205, 239, .55);
  }
  nav.onglets .nav-sortie { display: none; }
  body:has(nav.onglets) { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
}
@media (max-width: 640px) {
  /* Meme reserve autour de chaque icone : la pastille de l'onglet actif ne
     decale plus son libelle. */
  nav.onglets .onglet svg { box-sizing: content-box; padding: 2px 16px; border-radius: 999px; }
  /* Le menu est en bas : le titre ne colle plus au haut de l'ecran. */
  body:has(nav.onglets) main { padding-top: 24px; }
}
@media (max-width: 640px) { nav.onglets { background: var(--carte); } }

/* ---------- Passe ui-ux-pro-max (8 octobre) ---------- */
/* Barre d'app du parcours : retour facon iOS a gauche (chevron et libelle,
   sans bordure, system-controls), rang de l'axe a droite. */
nav.nav-parcours {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  margin: 0 0 24px;
}
nav.nav-parcours a.nav-retour {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  /* Le chevron demarre a 6 px dans son icone : on le cale sur le bord
     du contenu, la zone tactile deborde a gauche. */
  margin-left: -6px;
  padding: 0 12px 0 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--encre);
  background: none;
  border: none;
  box-shadow: none;
  text-decoration: none;
}
nav.nav-parcours a.nav-retour:hover { text-decoration: underline; text-underline-offset: 4px; }
body.nightmare nav.nav-parcours a.nav-retour { color: var(--nuit-texte); background: none; border: none; }
nav.nav-parcours .progress-rank { font-size: 14px; }

/* press-feedback : une reponse visible au toucher, en 100 ms, sans
   deplacer la mise en page. */
:is(.btn, button, .pilule, .onglet, .nav-retour, .lien-retour, .axe-tuile, .chemin, .pistes summary):active {
  opacity: .72;
  transition: opacity .1s ease;
}
/* tap-delay : supprime le delai de 300 ms au toucher, le zoom reste permis. */
html { touch-action: manipulation; }
/* safe-area : viewport-fit=cover expose l'encoche en paysage. */
main {
  padding-left: max(24px, env(safe-area-inset-left));
  padding-right: max(24px, env(safe-area-inset-right));
}

/* Fleches Phosphor (bold), 18 px, centrees sur le texte du bouton. */
.fleche { flex: none; width: 18px; height: 18px; }

/* En-tete de l'axe sur telephone : centre, plus grand, plus d'air au-dessus
   (retour du 8 octobre). Roue de 52 px : les lettres du pilier (15 px) et
   du titre (36 px) occupent 50 px, de la capitale a la ligne de base. */
@media (max-width: 640px) {
  .axe-nouveau .axe-barre,
  .reve-nouveau .axe-barre {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin: 16px 0 32px;
  }
  .axe-nouveau .axe-ident-pilier,
  .reve-nouveau .axe-ident-pilier { font-size: 15px; }
  .axe-nouveau .axe-ident h1,
  .reve-nouveau .axe-ident h1 { font-size: 36px; }
  .axe-nouveau .roue-progres,
  .reve-nouveau .roue-progres { width: 52px; height: 52px; }
  .axe-nouveau .axe-chapeau { margin-top: 0; }
}

/* ---------- Fond d'ecran, refait le 8 octobre ----------
   Le titre ouvre la page ; un geste principal (or), un geste secondaire
   (bouton borde, comme « Telecharger ») ; le mode d'emploi en accordeon
   comme Ma vision ; le cafe en bas, discret mais touchable. */
.fond-tete h1 {
  margin: 0 0 16px;
  font-size: clamp(30px, 3.6vw, 36px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--encre);
  text-wrap: balance;
}
.fond-tete .fond-chapeau { margin: 0; max-width: 30rem; font-size: 17px; line-height: 1.6; color: var(--encre-2); }
.fond-actions { gap: 16px; max-width: 24rem; }
.fond-actions .btn { display: flex; align-items: center; justify-content: center; min-height: 56px; }
.fond-actions .pilule.fond-images { width: 100%; min-height: 52px; justify-content: center; }
.fond-actions .pilule[disabled] { opacity: .55; cursor: not-allowed; }

.mode-emploi {
  margin-top: 32px;
  max-width: 30rem;
  border-top: 1px solid rgba(11, 58, 86, .15);
  border-bottom: 1px solid rgba(11, 58, 86, .15);
  font-size: 15px;
}
.mode-emploi summary {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 56px;
  font-size: 16px;
  font-weight: 600;
  color: var(--encre);
  cursor: pointer;
  list-style: none;
}
.mode-emploi summary::-webkit-details-marker { display: none; }
.mode-emploi summary::after { content: "+"; margin-left: auto; font-size: 22px; font-weight: 400; color: var(--encre-2); }
.mode-emploi[open] summary::after { content: "\2212"; }
.mode-emploi ol.etapes { list-style: none; counter-reset: etape; display: grid; gap: 16px; margin: 0 0 16px; padding: 0; }
.mode-emploi ol.etapes li {
  counter-increment: etape;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  line-height: 1.55;
  color: var(--encre-2);
}
/* Le numero : l'ordre des etapes compte, il se lit d'abord. */
.mode-emploi ol.etapes li::before {
  content: counter(etape);
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--carte);
  border: 1px solid rgba(11, 58, 86, .2);
  font-size: 14px;
  font-weight: 700;
  color: var(--encre);
}
.mode-emploi > p { margin: 0 0 16px; line-height: 1.55; color: var(--encre-2); }

.cafe { margin-top: 48px; max-width: 30rem; font-size: 15px; color: var(--encre-2); }
.cafe p { margin: 0 0 16px; }

@media (max-width: 640px) {
  .fond { gap: 24px; padding-top: 8px; }
}
/* Ordinateur : la mosaique a gauche, le titre puis les gestes a droite. */
@media (min-width: 861px) {
  .fond {
    grid-template-areas: "apercu tete" "apercu texte";
    grid-template-rows: auto 1fr;
    row-gap: 32px;
  }
  .fond-tete { grid-area: tete; }
  .fond-apercu { grid-area: apercu; }
  .fond-texte { grid-area: texte; }
}
.mode-emploi[open] summary { margin-bottom: 8px; }
/* Le numero centre sur la premiere ligne (15 px x 1,55 = 23 px de haut). */
.mode-emploi ol.etapes li::before { margin-top: -2px; }
.fond-piliers li { font-size: 14px; }
/* Ordinateur seulement : sur telephone, la deconnexion est en pied de page. */
@media (min-width: 641px) { nav.onglets .nav-sortie { display: inline-flex; align-items: center; min-height: 44px; } }

/* Fond d'ecran sur telephone : un seul axe central, une seule largeur.
   Les plafonds (24rem pour les boutons, 30rem pour l'accordeon) ne se
   voyaient pas a 390 px et decalaient tous les bords a 430 px. */
@media (max-width: 640px) {
  .fond-tete { text-align: center; }
  .fond-tete .fond-chapeau { max-width: none; }
  /* La colonne des piliers (22 px + 10 px) a gauche : la meme reserve a
     droite centre la mosaique sur l'ecran. */
  .fond-apercu { padding-right: 32px; }
  .fond-attente, .fond-texte .reve-echec { text-align: center; }
  .fond-actions, .mode-emploi, .cafe { max-width: none; }
  .cafe { text-align: center; }
  .cafe .pilule { margin: 0; }
}
.cafe a.pilule { margin-left: 0; }

/* ---------- Exemple des skills design (9 octobre), ecran d'axe seulement ----------
   mobile-native, emil-design-eng et break-ui, appliques a .axe-nouveau
   pour validation avant de les etendre au reste du site. */
:root { --ease-out: cubic-bezier(0.23, 1, 0.32, 1); }

/* mobile-native 2 : pas de flash gris au toucher, le retour visuel est le
   notre (ci-dessous). */
.axe-nouveau { -webkit-tap-highlight-color: transparent; }

/* break-ui : un prenom ou un mot sans espace (adresse web) faisait deborder
   la page (723 px de contenu pour 390). On coupe seulement s'il le faut. */
.axe-nouveau :is(h1, .axe-chapeau, .champ-question, .pistes p) { overflow-wrap: anywhere; }

/* mobile-native 5 et 8 : reaction immediate, et un appui long ne
   selectionne pas le libelle d'un bouton (le texte reste copiable). */
.axe-nouveau :is(button, .btn, .pilule, .nav-retour, .lien-retour, .pistes summary) {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* mobile-native 1 : sur tactile, le survol restait colle apres le toucher
   (bouton eclairci, fleche decalee de 3 px). */
@media (hover: none) {
  .axe-nouveau button:hover,
  .axe-nouveau .btn:hover { filter: none; box-shadow: var(--ombre-or); }
  .axe-nouveau .lien-retour:hover,
  .axe-nouveau .pilule:hover,
  .axe-nouveau .pistes summary:hover { box-shadow: none; text-decoration: none; }
  .axe-nouveau .pilule:hover,
  .axe-nouveau .pistes summary:hover { border-color: rgba(11, 58, 86, .25); color: var(--encre-2); }
  .axe-nouveau button:hover .fleche,
  .axe-nouveau button:hover .fleche-g { transform: none; }
}

/* emil-design-eng : un bouton s'enfonce (scale .97) au moment ou le doigt
   se pose, en 120 ms et courbe ease-out franche ; l'opacite reste pour les
   liens texte. */
.axe-nouveau :is(button, .btn, .pilule, .pistes summary) {
  transition: transform 120ms var(--ease-out), filter 120ms var(--ease-out), box-shadow 120ms var(--ease-out);
}
.axe-nouveau :is(button, .btn, .pilule, .pistes summary):active { transform: scale(0.97); opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .axe-nouveau :is(button, .btn, .pilule, .pistes summary):active { transform: none; opacity: .72; }
}

/* ---------- Ma roue : choisir sa priorite (9 octobre) ----------
   Une liste a separateurs plutot que neuf cartes. La ligne choisie se
   marque d'un fond teinte et d'un bord --encre-2 (7,7:1 sur la carte). */
.priorite-choix fieldset { margin: 0; padding: 0; border: none; min-width: 0; }
.priorite-choix legend { padding: 0; margin-bottom: 8px; }
.priorite-choix legend h2 { margin: 0; font-size: 22px; font-weight: 600; line-height: 1.25; color: var(--encre); }
.priorite-consigne { margin: 0 0 16px; font-size: 15px; line-height: 1.55; color: var(--encre-2); }
.choix-axes { display: grid; border-top: 1px solid rgba(11, 58, 86, .12); }
.choix-axe {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 12px;
  border-bottom: 1px solid rgba(11, 58, 86, .12);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.choix-axe input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choix-axe::before {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--teinte);
}
.choix-axe-nom { font-size: 16px; font-weight: 500; color: var(--encre); }
.choix-axe-piste {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--encre-2);
  background: var(--ciel-4);
}
.choix-axe-note { margin-left: auto; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--encre); }
.choix-axe:has(input:checked) {
  background: color-mix(in srgb, var(--teinte) 14%, var(--carte));
  box-shadow: inset 3px 0 0 var(--teinte);
}
.choix-axe:has(input:checked) .choix-axe-nom { font-weight: 700; }
.choix-axe:has(input:focus-visible) { outline: 3px solid rgba(143, 205, 239, .9); outline-offset: -3px; }
.priorite-choix > button[type="submit"] { width: 100%; margin-top: 24px; min-height: 52px; }
.priorite-garder,
.priorite-changer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 15px;
  font-weight: 600;
  color: var(--encre-2);
}
.priorite-garder { margin-top: 8px; }
.priorite-changer { margin: 8px 0 0; }
.dashboard + .lien-compte { text-align: center; margin: 32px 0 0; }
.dashboard + .lien-compte a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; color: var(--encre-2); }
.priorite.priorite-choix { border-left: 1px solid rgba(11, 58, 86, .12); padding: 24px 20px; }
.choix-axe-piste { font-size: 14px; }
@media (max-width: 640px) { .col-wheel .btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; } }
@media (max-width: 640px) { .dashboard .col-wheel { width: 100%; max-width: none; justify-self: stretch; } }

/* Ecran d'image : « Enregistrer » et « Partager » cote a cote ; sans
   partage de fichiers, « Partager » est masque et « Enregistrer » prend
   toute la largeur. « Refaire l'image », geste rare, passe en lien. */
.pilule[hidden] { display: none; }
.reve-gestes { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
.reve-refaire { margin: 8px 0 0; }
.lien-refaire,
.lien-refaire:hover {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--encre-2);
  background: none;
  border: none;
  box-shadow: none;
  filter: none;
}
.lien-refaire:hover { color: var(--encre); text-decoration: underline; text-underline-offset: 4px; }

/* Cinq onglets (9 octobre) : libelles complets sur ordinateur, courts sur
   telephone pour tenir sur une ligne a 14 px. Icones Phosphor 22 px. */
nav.onglets .onglet-court { display: none; }
nav.onglets .onglet svg { flex: none; }
@media (max-width: 640px) {
  nav.onglets { grid-template-columns: repeat(4, 1fr); }
  nav.onglets .onglet-long { display: none; }
  nav.onglets .onglet-court { display: inline; }
}

/* Mon compte : qui est connecte, la deconnexion, puis la suppression,
   isolee sous un trait (destructive-nav-separation). */
.compte-infos { margin: 0 0 32px; display: grid; gap: 4px 0; }
.compte-infos dt { font-size: 14px; font-weight: 600; color: var(--encre-2); }
.compte-infos dd { margin: 0 0 16px; font-size: 17px; color: var(--encre); overflow-wrap: anywhere; }
.compte .compte-sortie { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 24rem; min-height: 52px; }
.compte-danger { margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(11, 58, 86, .15); }
.compte-danger h2 { margin: 0 0 8px; font-size: 18px; font-weight: 600; color: var(--encre); }
.compte-danger p { margin: 0 0 8px; font-size: 15px; line-height: 1.55; color: var(--encre-2); }
.lien-danger { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 600; color: #B4232C; }
.compte-infos { gap: 0; }
.compte-infos dt { margin-bottom: 4px; }
.compte-infos dd { margin-bottom: 24px; }

/* Fond d'ecran : le cafe en carte cliquable, et une seule largeur pour les
   blocs de la colonne (boutons, mode d'emploi, cafe) : 24rem. */
a.cafe {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 24rem;
  margin-top: 32px;
  padding: 16px 16px 16px 20px;
  min-height: 72px;
  text-align: left;
  text-decoration: none;
  color: var(--encre);
  background: rgb(255 255 255 / .7);
  border: 1px solid rgba(11, 58, 86, .14);
  border-radius: 14px;
}
a.cafe:hover { background: var(--carte); border-color: rgba(11, 58, 86, .3); }
a.cafe svg { flex: none; color: var(--encre-2); }
.cafe-texte { display: grid; gap: 2px; flex: 1; }
.cafe-texte strong { font-size: 16px; font-weight: 600; }
.cafe-texte span { font-size: 14px; color: var(--encre-2); }
a.cafe .cafe-chevron { color: var(--encre-2); }
.fond-texte .mode-emploi { max-width: 24rem; }
@media (max-width: 640px) {
  a.cafe { max-width: none; }
  .fond-texte .mode-emploi { max-width: none; }
}
.cafe-texte { gap: 4px; }

/* Ma roue (9 octobre) : le bilan, puis les notes, visibles aussi sur
   telephone (la roue montre une forme, pas des nombres). */
.bilan { margin: 0 0 32px; padding: 24px 20px; background: var(--carte); border: 1px solid rgba(11, 58, 86, .12); border-radius: 14px; }
.bilan h2 { margin: 0 0 8px; font-size: 20px; font-weight: 600; color: var(--encre); }
.bilan p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--encre-2); overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .dashboard .titre-notes { display: block; margin: 0 0 8px; font-size: 20px; }
  .dashboard .grille-axes { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0 0 32px; }
}
/* Tes notes : une ligne par axe, le nom a gauche, la note a droite. */
.dashboard .grille-axes { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid rgba(11, 58, 86, .12); }
.dashboard .grille-axes li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 0 4px;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(11, 58, 86, .12);
  border-radius: 0;
  box-shadow: none;
}
.dashboard .grille-axes .axe-nom { font-size: 16px; font-weight: 500; color: var(--encre); }
.dashboard .grille-axes .axe-note { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--encre); }
.dashboard .grille-axes { width: 100%; background: none; border: none; border-top: 1px solid rgba(11, 58, 86, .12); border-radius: 0; overflow: visible; }
.dashboard .grille-axes li { flex-direction: row; gap: 16px; padding: 0 4px; }
.bilan .bilan-rappel { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(11, 58, 86, .1); font-size: 15px; color: var(--encre-2); }


/* Ma roue (9 octobre, demande de l'utilisateur) : une seule colonne
   centree, partout. Le titre et la roue en grand au centre, le bouton,
   puis le bilan et les notes en dessous. */
.titre-roue { max-width: 40rem; text-align: center; }
.dashboard {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 40rem;
  padding-top: 24px;
}
.dashboard .col-wheel {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: none;
}
.dashboard .col-wheel .wheel { width: 100%; max-width: 560px; margin: 0 auto; }
.dashboard .col-wheel .btn { width: 100%; max-width: 24rem; margin-top: 32px; }
.dashboard .col-details { display: block; width: 100%; margin-top: 48px; }
@media (max-width: 640px) {
  .dashboard { padding-top: 0; }
  .dashboard .col-wheel { margin-bottom: 0; }
  .dashboard .col-wheel .btn { max-width: none; }
  .dashboard .col-details { margin-top: 40px; }
}
/* La roue serree (cadre ajuste a ses noms) remplit la colonne. */
.dashboard .wheel-serree { display: block; }
.dashboard .wheel-serree .wheel-label { font-size: 14px; font-weight: 600; fill: var(--encre-2); }
.dashboard .wheel-serree .wheel-grid, .dashboard .wheel-serree .wheel-axis { stroke: #A9CCE0; }
/* Retour au toucher (emil-design-eng, mobile-native) : le bouton repond
   des que le doigt se pose. */
.dashboard .col-wheel .btn { transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out); }
.dashboard .col-wheel .btn:active { transform: scale(0.97); }
/* Un seul arrondi pour les blocs : 16 px, comme les cartes de Ma vision. */
.dashboard .bilan { border-radius: 16px; padding: 24px; }
@media (prefers-reduced-motion: reduce) {
  .dashboard .col-wheel .btn { transition: none; }
  .dashboard .col-wheel .btn:active { transform: none; }
}
/* Sur ordinateur, la roue plafonne a 480 px : noms autour de 17 px. */
@media (min-width: 641px) { .dashboard .col-wheel .wheel { max-width: 480px; } }
/* Sur ordinateur, Mon compte se cale a droite : les trois pages d'un cote,
   le compte de l'autre (9 octobre). Sur telephone, quatre colonnes egales. */
@media (min-width: 641px) { nav.onglets .onglet:last-child { margin-left: auto; } }

/* Ma vision (9 octobre, refaite avec ui-ux-pro-max, frontend-design,
   design-taste-frontend, mobile-native, emil-design-eng) : le vision board
   ouvre la page, puis les actions. Arrondis : 12 px pour les tuiles et le
   bouton d'icone, 16 px pour les blocs. Echelle 8 / 16 / 24 / 32. */
.ma-vision { max-width: 40rem; margin: 0 auto; padding: 32px 0 64px; }
.ma-vision h1 {
  font-family: var(--display);
  font-size: clamp(32px, 9vw, 40px);
  font-weight: 700;
  line-height: 1.12;
  color: var(--encre);
}
.vision-chapeau { margin: 16px 0 0; font-size: 16px; line-height: 1.6; color: var(--encre-2); }
.vision-resume { margin-top: 16px; }
.vision-resume summary { display: block; list-style: none; cursor: pointer; }
.vision-resume summary::-webkit-details-marker { display: none; }
.vision-resume[open] .lire-tout { display: none; }
.lire-tout {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 14px;
  font-weight: 600;
  color: var(--encre-2);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.vision-resume .vision-chapeau { margin: 0; }
.vision-resume:not([open]) .vision-chapeau {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bascule {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-top: 24px;
  padding: 4px;
  background: var(--carte-voile);
  border: 1px solid var(--trait);
  border-radius: 999px;
}
.bascule a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  color: var(--encre-2);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.bascule a[aria-current="true"] { background: var(--encre); color: var(--carte); }
.bascule a:focus-visible { outline: 2px solid var(--or-trait); outline-offset: 2px; }
.vision-echec { margin: 16px 0 0; font-size: 15px; color: var(--encre-2); }
.ma-vision .vision-suite {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  margin-top: 24px;
}

/* Le board : trois images verticales par pilier. */
.board { margin-top: 32px; }
.board-pilier { margin: 24px 0 8px; font-size: 16px; font-weight: 600; color: var(--encre-2); }
.board-pilier:first-child { margin-top: 0; }
.board-ligne { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tuile a { display: block; color: var(--encre); text-decoration: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.tuile img, .tuile-vide {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: 12px;
  background: color-mix(in srgb, var(--teinte) 18%, var(--carte));
  transition: transform 160ms var(--ease-out);
}
.tuile-vide {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--encre-2);
  text-align: center;
}
.tuile a:active img, .tuile a:active .tuile-vide { transform: scale(0.97); }
.tuile a:focus-visible { outline: 2px solid var(--or-trait); outline-offset: 4px; border-radius: 12px; }
.tuile-nom { display: block; margin-top: 8px; font-size: 14px; font-weight: 500; line-height: 1.3; }

/* Les actions : l'espace separe les lignes, pas des traits. */
.actions-titre { margin: 48px 0 0; font-size: 20px; font-weight: 600; color: var(--encre); }
.actions-liste { list-style: none; margin: 8px 0 0; padding: 0; }
.action-axe {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  gap: 16px;
  align-items: start;
  padding: 16px 0;
  scroll-margin-top: 16px;
}
.action-titre { display: block; font-size: 14px; font-weight: 600; color: var(--sourd); }
.action-fuis { margin: 8px 0 0; font-size: 15px; line-height: 1.5; color: var(--encre-2); }
.ma-vision .carte-action { margin: 8px 0 0; font-size: 17px; line-height: 1.5; color: var(--encre); overflow-wrap: anywhere; }
.ma-vision .carte-action-vide { color: var(--sourd); }
.carte-action-libelle { display: block; margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--sourd); }
.action-autre { margin: 0; }
.bouton-icone,
.bouton-icone:hover {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: var(--carte-voile);
  border: 1px solid var(--trait);
  border-radius: 12px;
  box-shadow: none;
  filter: none;
  color: var(--encre-2);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform 160ms var(--ease-out);
}
.bouton-icone:active { transform: scale(0.97); }
.bouton-icone[aria-busy="true"] { cursor: progress; }
.bouton-icone[aria-busy="true"] svg { animation: tourne 800ms linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }
.action-ecrit summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  list-style: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--sourd);
}
.action-ecrit summary::-webkit-details-marker { display: none; }
.action-ecrit p { margin: 0 0 8px; font-size: 15px; line-height: 1.6; color: var(--encre-2); }
.lien-modifier {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 14px;
  font-weight: 600;
  color: var(--encre-2);
  text-underline-offset: 4px;
}
.lien-action, .lien-action:hover, .lien-action:active {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  filter: none;
  transform: none;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--encre-2);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.action-joe { padding: 8px 0 16px; }
.btn.btn-second,
.btn.btn-second:hover {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  background: var(--carte);
  border: 1.5px solid var(--or-trait);
  box-shadow: none;
  filter: none;
  color: var(--encre);
}
.zero-vide { margin-top: 32px; padding: 24px; background: var(--carte); border-radius: 16px; box-shadow: var(--ombre-carte); }
.zero-vide p { margin: 0 0 16px; line-height: 1.6; color: var(--encre-2); }
.zero-vide .btn { display: flex; align-items: center; justify-content: center; min-height: 52px; }
.ma-vision .vision-noter { display: flex; margin-top: 48px; }
@media (hover: hover) and (pointer: fine) {
  .bouton-icone:hover { background: var(--carte); color: var(--encre); }
  .btn.btn-second:hover { background: color-mix(in srgb, var(--or-1) 18%, var(--carte)); }
}
@media (min-width: 641px) {
  .ma-vision { padding-top: 48px; }
  .bascule { max-width: 24rem; }
  .ma-vision .vision-suite, .btn.btn-second { display: inline-flex; padding: 0 32px; }
  .board-ligne { gap: 16px; max-width: 28rem; }
}
@media (prefers-reduced-motion: reduce) {
  .tuile img, .tuile-vide, .bouton-icone { transition: none; }
  .tuile a:active img, .tuile a:active .tuile-vide, .bouton-icone:active { transform: none; }
  .bouton-icone[aria-busy="true"] svg { animation: none; }
}

/* Ma vision (10 octobre) : une carte par axe, l'image a cote de ce qui
   est ecrit et de l'action. Image 9:16 (le format du fond d'ecran),
   arrondis 12 (image, encart, bouton) et 16 (carte). */
.vision-pilier { margin: 32px 0 16px; font-size: 16px; font-weight: 600; color: var(--encre-2); }
.cartes { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.carte-axe {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 16px;
  background: var(--carte);
  border-radius: 16px;
  box-shadow: var(--ombre-carte);
  scroll-margin-top: 16px;
}
.carte-axe.carte-fuis { grid-template-columns: minmax(0, 1fr); }
.carte-image-lien { display: block; text-decoration: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.carte-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: 12px;
  background: color-mix(in srgb, var(--teinte) 18%, var(--carte));
  transition: transform 160ms var(--ease-out);
}
.carte-image-vide {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px;
  color: var(--encre-2);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
}
.carte-image-lien:active .carte-image { transform: scale(0.97); }
.carte-image-lien:focus-visible { outline: 2px solid var(--or-trait); outline-offset: 4px; border-radius: 12px; }
.carte-corps { min-width: 0; }
.carte-titre { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--encre); }
.carte-ecrit {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--encre-2);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: break-word;
}
.carte-corps .lien-modifier { min-height: 44px; }
/* L'action se distingue : un encart teinte de la couleur de l'axe. */
.carte-action-bloc {
  margin-top: 8px;
  padding: 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--teinte) 14%, var(--carte));
  border-left: 4px solid var(--teinte);
}
.carte-action-bloc .carte-action-libelle { display: block; margin: 0; font-size: 14px; font-weight: 600; color: var(--sourd); }
.ma-vision .carte-action-bloc .carte-action { margin: 8px 0 0; font-size: 16px; font-weight: 600; line-height: 1.45; color: var(--encre); overflow-wrap: break-word; }
.ma-vision .carte-action-bloc .carte-action-vide { font-weight: 500; color: var(--sourd); }
/* Le shuffle : bien visible, libelle et icone, repetable. */
.shuffle,
.shuffle:hover {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  margin-top: 8px;
  padding: 0 16px;
  background: var(--carte);
  border: 1.5px solid var(--encre-2);
  border-radius: 12px;
  box-shadow: none;
  filter: none;
  font-size: 15px;
  font-weight: 600;
  color: var(--encre);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform 160ms var(--ease-out);
}
.shuffle:active { transform: scale(0.97); }
.shuffle svg { flex: none; }
.shuffle[aria-busy="true"] { cursor: progress; color: var(--sourd); border-color: var(--trait); }
.shuffle[aria-busy="true"] svg { animation: tourne 800ms linear infinite; }
.carte-joe {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 8px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--or-1) 30%, var(--carte));
  font-size: 15px;
  font-weight: 600;
  color: var(--encre);
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .shuffle:hover { background: color-mix(in srgb, var(--teinte) 10%, var(--carte)); }
  .carte-joe:hover { background: color-mix(in srgb, var(--or-1) 45%, var(--carte)); }
}
/* Ordinateur : une carte par ligne, plus large, l'image plus grande.
   Trois par ligne ecrasaient la colonne de texte. */
@media (min-width: 641px) {
  .ma-vision { max-width: 48rem; }
  .carte-axe { grid-template-columns: 160px minmax(0, 1fr); gap: 24px; padding: 24px; }
  .carte-axe.carte-fuis { grid-template-columns: minmax(0, 1fr); }
  .shuffle, .carte-joe { width: auto; display: inline-flex; padding: 0 24px; }
  .carte-joe { margin-left: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .carte-image, .shuffle { transition: none; }
  .carte-image-lien:active .carte-image, .shuffle:active { transform: none; }
  .shuffle[aria-busy="true"] svg { animation: none; }
}

/* Ma vision, passe de finition (10 octobre) : moins de lignes autour de
   l'image, l'action et son shuffle dans un seul encart, les piliers
   annonces par leur phrase. */
.vision-pilier { margin: 40px 0 16px; }
.vision-pilier h2 { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.25; color: var(--encre); }
.vision-pilier p { margin: 8px 0 0; font-size: 14px; line-height: 1.45; color: var(--sourd); }
.carte-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.carte-titre { padding-top: 2px; }
.carte-modifier {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: -12px -12px -8px 0;
  border-radius: 12px;
  color: var(--sourd);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.carte-modifier:focus-visible { outline: 2px solid var(--or-trait); outline-offset: -4px; }
.carte-ecrit { -webkit-line-clamp: 3; }
.carte-image { box-shadow: 0 1px 2px rgba(11, 58, 86, .08), 0 12px 24px -16px rgba(11, 58, 86, .45); }
.carte-image-vide { box-shadow: none; }
.carte-action-bloc { margin-top: 16px; padding: 16px; border-left: 0; }
.carte-action-bloc form { margin: 0; }
.carte-action-bloc .shuffle,
.carte-action-bloc .shuffle:hover {
  display: inline-flex;
  width: auto;
  margin-top: 16px;
  padding: 0 16px;
  background: var(--carte);
  border: 1px solid color-mix(in srgb, var(--teinte) 55%, var(--carte));
  color: var(--encre);
}
.carte-joe { margin-top: 16px; }
@media (hover: hover) and (pointer: fine) {
  .carte-modifier:hover { background: var(--ciel-4); color: var(--encre); }
  .carte-action-bloc .shuffle:hover { border-color: var(--teinte); }
}
@media (max-width: 640px) {
  .carte-action-bloc { padding: 12px; }
  .carte-action-bloc .shuffle { margin-top: 8px; }
}
@media (min-width: 641px) {
  .carte-joe { margin-left: 0; }
}
.vision-pilier p { font-weight: 400; }
.ma-vision .carte-action-bloc .carte-action { font-weight: 500; }

/* Ma vision sur telephone (10 octobre) : la colonne a cote de l'image ne
   faisait que 190 px, une action longue y prenait huit lignes. L'image
   reste a cote du titre et du reve ; l'action et Joe prennent toute la
   largeur de la carte, dessous. */
@media (max-width: 640px) {
  .carte-axe:not(.carte-fuis) { column-gap: 16px; row-gap: 8px; grid-template-rows: auto 1fr; }
  .carte-axe:not(.carte-fuis) .carte-corps { display: contents; }
  .carte-axe:not(.carte-fuis) .carte-image-lien { grid-column: 1; grid-row: 1 / span 2; }
  .carte-axe:not(.carte-fuis) .carte-tete,
  .carte-axe:not(.carte-fuis) .carte-corps > .lien-modifier { grid-column: 2; grid-row: 1; }
  .carte-axe:not(.carte-fuis) .carte-ecrit { grid-column: 2; grid-row: 2; align-self: start; margin-top: 0; -webkit-line-clamp: 6; }
  .carte-axe:not(.carte-fuis) .carte-corps > .lien-modifier { align-self: start; }
  .carte-axe:not(.carte-fuis) .carte-tete:has(+ .lien-modifier) { grid-row: 1; }
  .carte-axe:not(.carte-fuis) .carte-action-bloc,
  .carte-axe:not(.carte-fuis) .carte-corps > form,
  .carte-axe:not(.carte-fuis) .btn-joe { grid-column: 1 / -1; }
  .carte-axe:not(.carte-fuis) .carte-action-bloc { margin-top: 8px; }
  .carte-axe:not(.carte-fuis) .carte-joe { margin-top: 0; min-height: 48px; }
  .carte-action-bloc { padding: 16px; }
  .carte-action-bloc .shuffle { margin-top: 16px; }
}

/* Bouton café, identique sur tous les sites (10 octobre) : copie du
   .bmc-btn de la landing de Joe. Voir .claude/rules/front-end.md. */
.cafe-bloc { margin-top: 48px; }
.cafe-bloc p { margin: 0 0 16px; font-size: 15px; color: var(--encre-2); }
.bmc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 50px;
  background: #FF813F;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: var(--body);
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.bmc-btn img { width: 26px; height: 26px; object-fit: contain; filter: brightness(0) invert(1); }
.bmc-btn:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .bmc-btn:hover { background: #E06D30; } }
@media (max-width: 640px) { .bmc-btn { display: flex; width: 100%; padding: 16px; border-radius: 12px; } }

/* Joe : le seul bouton qui fait sortir du site, donc le plus marque de
   la carte. Plein, encre (12:1 avec le blanc), fleche de sortie. */
.carte-joe,
.carte-joe:hover {
  gap: 8px;
  min-height: 52px;
  background: var(--encre);
  color: var(--carte);
  box-shadow: 0 1px 2px rgba(11, 58, 86, .2), 0 8px 20px -10px rgba(11, 58, 86, .6);
  transition: transform 160ms var(--ease-out);
}
.carte-joe svg { flex: none; }
.carte-joe:active { transform: scale(0.97); }
.carte-joe:focus-visible { outline: 2px solid var(--or-trait); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .carte-joe:hover { background: var(--encre-2); } }
@media (prefers-reduced-motion: reduce) { .carte-joe, .bmc-btn { transition: none; } .carte-joe:active, .bmc-btn:active { transform: none; } }

/* Le bouton Joe (10 octobre) : le seul appel a l'action qui fait sortir du
   site. Identite propre, reprise de la landing de Joe : sa nuit (#0F1923),
   son logo detoure, une fleche dans son rouge. Une ligne dit ce qu'est
   Joe. Regle : .claude/rules/front-end.md. */
.btn-joe,
.btn-joe:hover {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  margin-top: 16px;
  padding: 8px 12px 8px 16px;
  background: #0F1923;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 25, 35, .25), 0 12px 24px -14px rgba(15, 25, 35, .8);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
  text-decoration: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform 160ms var(--ease-out);
}
.btn-joe img { flex: none; width: 28px; height: 28px; }
.btn-joe-texte { flex: 1; min-width: 0; }
.btn-joe-texte small { display: block; font-size: 14px; font-weight: 400; color: #B8C4D0; }
.btn-joe-fleche {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #E94560;
  color: #fff;
  transition: transform 160ms var(--ease-out);
}
.btn-joe:active { transform: scale(0.97); }
.btn-joe:focus-visible { outline: 2px solid var(--or-trait); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .btn-joe:hover .btn-joe-fleche { transform: translate(2px, -2px); } }
@media (max-width: 640px) { .carte-axe:not(.carte-fuis) .btn-joe { margin-top: 0; } }
@media (min-width: 641px) { .btn-joe, .btn-joe:hover { display: inline-flex; min-width: 20rem; } }
@media (prefers-reduced-motion: reduce) {
  .btn-joe, .btn-joe-fleche { transition: none; }
  .btn-joe:active, .btn-joe:hover .btn-joe-fleche { transform: none; }
}
/* A 390 px, « Tenir le rythme avec Joe » doit tenir sur une ligne. */
@media (max-width: 640px) {
  .btn-joe, .btn-joe:hover { gap: 8px; padding: 8px 12px; font-size: 15px; }
  .btn-joe-texte { text-wrap: balance; }
}
/* La fleche de sortie sans pastille (10 octobre) : blanche, a nu. */
.btn-joe-fleche { width: 24px; height: 24px; margin-right: 4px; border-radius: 0; background: none; color: #fff; }
/* « Autre idée » et « Annuler » cote a cote dans l'encart (10 octobre). */
.carte-gestes { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; margin-top: 16px; }
.carte-action-bloc .carte-gestes .shuffle { margin-top: 0; }
.carte-gestes .lien-action { font-size: 15px; }

/* Essai du 10 octobre : l'image a fond perdu dans la carte, sans marge
   blanche autour. La carte coupe ses coins ; le texte garde ses marges. */
.carte-axe:not(.carte-fuis) { padding: 0; overflow: hidden; }
.carte-axe:not(.carte-fuis) .carte-image { border-radius: 0 0 12px 0; box-shadow: none; }
.carte-axe:not(.carte-fuis) .carte-image-lien:focus-visible { outline-offset: -4px; }
@media (max-width: 640px) {
  .carte-axe:not(.carte-fuis) { grid-template-columns: 120px minmax(0, 1fr); padding-bottom: 16px; }
  .carte-axe:not(.carte-fuis) .carte-tete { padding: 16px 16px 0 0; }
  .carte-axe:not(.carte-fuis) .carte-corps > .lien-modifier { padding-right: 16px; }
  .carte-axe:not(.carte-fuis) .carte-ecrit { padding-right: 16px; }
  .carte-axe:not(.carte-fuis) .carte-action-bloc { margin: 8px 16px 0; }
  .carte-axe:not(.carte-fuis) .btn-joe { margin: 0 16px; }
}
@media (min-width: 641px) {
  .carte-axe:not(.carte-fuis) { grid-template-columns: 184px minmax(0, 1fr); gap: 0; align-items: stretch; }
  .carte-axe:not(.carte-fuis) .carte-image-lien { height: 100%; }
  .carte-axe:not(.carte-fuis) .carte-image { height: 100%; min-height: 327px; aspect-ratio: auto; border-radius: 0; }
  .carte-axe:not(.carte-fuis) .carte-corps { padding: 24px; }
}

/* La couleur de l'axe partout ou son nom s'affiche (10 octobre). */
.carte-titre { display: flex; align-items: baseline; gap: 8px; }
.carte-titre .pastille { align-self: center; width: 10px; height: 10px; box-shadow: none; }
.scores li .pastille { display: inline-block; margin-right: 8px; box-shadow: none; }

/* Ma roue : les notes, par pilier, dans une carte comme le bilan. */
.notes { margin-top: 32px; padding: 24px; background: var(--carte); border: 1px solid rgba(11, 58, 86, .12); border-radius: 16px; }
.dashboard .notes h2 { margin: 0; font-size: 20px; font-weight: 600; color: var(--encre); }
.notes-pilier { margin: 24px 0 8px; font-size: 14px; font-weight: 600; color: var(--sourd); }
.notes-liste { list-style: none; margin: 0; padding: 0; }
.note-ligne {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px 24px;
  align-items: center;
  gap: 16px;
  min-height: 44px;
}
.note-nom { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 16px; font-weight: 500; color: var(--encre); }
.note-nom .pastille { width: 10px; height: 10px; box-shadow: none; }
.note-barre { display: block; height: 8px; }
.note-barre span { display: block; height: 100%; min-width: 8px; border-radius: 999px; background: var(--teinte); }
.note-valeur { text-align: right; font-size: 16px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--encre-2); }
.note-forte .note-nom { font-weight: 600; }
.note-forte .note-valeur { font-size: 18px; font-weight: 700; color: var(--encre); }
@media (min-width: 641px) { .note-ligne { grid-template-columns: minmax(0, 1fr) 200px 24px; } }
/* Le rappel du bilan : deux idees en gras, le reste en retrait. */
.bilan .bilan-rappel strong { font-weight: 600; color: var(--encre); }

/* Fond d'ecran sur tablette (641 a 860 px, 10 octobre) : meme principe
   que sur telephone, un seul axe central et une seule largeur. Le titre
   et les boutons restaient colles a gauche, la mosaique centree. */
@media (min-width: 641px) and (max-width: 860px) {
  .fond { max-width: 28rem; gap: 32px; padding-top: 24px; }
  .fond-tete { text-align: center; }
  .fond-tete .fond-chapeau { max-width: none; }
  .fond-apercu { padding-right: 32px; }
  .fond-attente, .fond-texte .reve-echec { text-align: center; }
  .fond-actions, .fond-texte .mode-emploi { max-width: none; }
  .bmc-btn { display: flex; width: 100%; }
  .cafe-bloc p { text-align: center; }
}
@media (max-width: 640px) { .cafe-bloc p { text-align: center; } }

/* L'accueil en landing page (10 octobre) : des sections courtes, une
   colonne de lecture de 40rem, l'espace comme separateur. */
.accueil-bloc { max-width: 40rem; margin: 0 auto; padding-top: 64px; }
.accueil-bloc h2, .accueil-fin h2 { margin: 0 0 16px; font-size: clamp(24px, 6vw, 30px); font-weight: 700; line-height: 1.15; color: var(--encre); text-wrap: balance; }
.accueil-bloc p { margin: 0 0 16px; font-size: 16px; line-height: 1.6; color: var(--encre-2); }
.accueil-bloc p:last-child { margin-bottom: 0; }
.accueil-bloc .accueil-definition { font-size: 18px; line-height: 1.55; color: var(--encre); }
.accueil-raisons, .etapes-accueil { list-style: none; margin: 0; padding: 0; }
.accueil-raisons li { padding: 16px 0; border-top: 1px solid var(--trait); font-size: 16px; line-height: 1.6; color: var(--encre-2); }
.accueil-raisons li:first-child { border-top: 0; padding-top: 0; }
.accueil-raisons strong, .etapes-accueil strong { display: block; font-size: 17px; font-weight: 600; color: var(--encre); }
.etapes-accueil { counter-reset: etape; display: grid; gap: 24px; }
.etapes-accueil li {
  counter-increment: etape;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: 16px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--encre-2);
}
.etapes-accueil li::before {
  content: counter(etape);
  grid-row: 1 / span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--carte);
  box-shadow: var(--ombre-carte);
  font-size: 17px;
  font-weight: 700;
  color: var(--encre);
}
.etapes-accueil strong { grid-column: 2; }
.accueil-piliers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.accueil-piliers h3 { margin: 0 0 8px; font-size: 16px; font-weight: 600; color: var(--encre); }
.accueil-piliers ul { list-style: none; margin: 0; padding: 0; }
.accueil-piliers li { display: flex; align-items: center; gap: 8px; min-height: 32px; font-size: 15px; color: var(--encre-2); }
.accueil-piliers .pastille { width: 10px; height: 10px; box-shadow: none; }
.accueil-faq details { border-bottom: 1px solid var(--trait); }
.accueil-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  list-style: none;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  color: var(--encre);
}
.accueil-faq summary::-webkit-details-marker { display: none; }
.accueil-faq summary::after { content: "+"; flex: none; font-size: 22px; font-weight: 400; color: var(--sourd); }
.accueil-faq details[open] summary::after { content: "\2212"; }
.accueil-faq summary:focus-visible { outline: 2px solid var(--or-trait); outline-offset: 2px; border-radius: 8px; }
.accueil-faq details p { margin: 0 0 16px; }
.accueil-fin { max-width: 40rem; margin: 0 auto; padding: 64px 0 32px; text-align: center; }
.accueil-fin .btn-google { align-self: center; }
.accueil-fin p { margin: 16px 0 0; font-size: 14px; color: var(--sourd); }
@media (max-width: 640px) {
  .accueil-bloc { padding-top: 48px; }
  .accueil-piliers { grid-template-columns: 1fr; gap: 16px; }
  .accueil-fin { padding: 48px 0 24px; }
  .accueil-fin .btn-google { display: flex; justify-content: center; width: 100%; }
}

/* Pages legales (10 octobre) : une colonne de lecture, rien d'autre. */
.page-legale { max-width: 40rem; margin: 0 auto; padding: 32px 0 64px; }
.page-legale h1 { margin: 16px 0 8px; font-size: clamp(30px, 8vw, 38px); font-weight: 700; line-height: 1.15; color: var(--encre); }
.page-legale h2 { margin: 40px 0 8px; font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--encre); }
.page-legale p, .page-legale li { font-size: 16px; line-height: 1.65; color: var(--encre-2); }
.page-legale p { margin: 0 0 16px; }
.page-legale ul { margin: 0 0 16px; padding-left: 24px; }
.page-legale li { margin-bottom: 8px; }
.page-legale strong { font-weight: 600; color: var(--encre); }
.page-legale a { color: var(--encre); font-weight: 500; text-underline-offset: 4px; overflow-wrap: anywhere; }
.page-legale .legal-date { font-size: 14px; color: var(--sourd); margin-bottom: 24px; }
.page-legale .legal-retour, .page-legale .legal-fin { margin: 0; }
.page-legale .legal-retour a, .page-legale .legal-fin a { display: inline-flex; align-items: center; min-height: 44px; }
.page-legale .legal-fin { margin-top: 32px; }
.pied-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 24px; max-width: 40rem; margin: 0 auto; padding: 16px 0 32px; }
.pied-legal a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; color: var(--encre-2); text-underline-offset: 4px; }
.compte .pied-legal { padding-bottom: 0; margin-top: 32px; }

/* L'accueil, nouvel ordre et finition (10 octobre) : le haut de page ne
   porte plus que le titre, la definition et le bouton, centres. La roue
   illustre « C'est quoi ». Des cartes blanches alternent avec le ciel. */
.hero { display: block; min-height: 0; max-width: 44rem; margin: 0 auto; padding: 72px 0 24px; }
.hero .hero-texte { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero h1 { margin: 0; font-size: clamp(40px, 6.4vw, 60px); line-height: 1.05; text-wrap: balance; }
.hero-definition { max-width: 34rem; margin: 24px 0 32px; font-size: 19px; line-height: 1.55; color: var(--encre-2); text-wrap: pretty; }
.hero .btn-google { align-self: center; }
.hero .hero-duree { margin-top: 16px; }

.accueil-quoi { display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: 48px; align-items: center; max-width: 56rem; }
.accueil-roue { margin: 0; }
.accueil-roue figcaption { margin-top: 16px; font-size: 14px; line-height: 1.5; color: var(--sourd); text-align: center; text-wrap: balance; }

.accueil-carte { max-width: 56rem; margin-top: 64px; padding: 40px; background: var(--carte); border-radius: 16px; box-shadow: var(--ombre-carte); }
.accueil-bloc.accueil-carte { padding-top: 40px; }
.etapes-accueil { counter-reset: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.etapes-accueil li { display: block; counter-increment: none; }
.etapes-accueil li::before { content: none; }
.etape-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
  border-radius: 12px;
  color: var(--encre);
  background: color-mix(in srgb, var(--teinte-etape) 22%, var(--carte));
}
.etapes-accueil li:nth-child(1) { --teinte-etape: #34D399; }
.etapes-accueil li:nth-child(2) { --teinte-etape: #A78BFA; }
.etapes-accueil li:nth-child(3) { --teinte-etape: #FB923C; }
.etape-texte { display: block; font-size: 16px; line-height: 1.6; color: var(--encre-2); }
.etape-texte strong { margin-bottom: 4px; }
.accueil-raisons strong { margin-bottom: 4px; }
.pilier-phrase { margin: 0 0 8px; font-size: 14px; line-height: 1.45; color: var(--sourd); }
.accueil-bloc .accueil-piliers p.pilier-phrase { margin: 0 0 8px; font-size: 14px; color: var(--sourd); }
.accueil-piliers h3 { margin-bottom: 4px; }
.accueil-fin { max-width: 40rem; margin: 64px auto 0; padding: 48px 32px; background: var(--carte); border-radius: 16px; box-shadow: var(--ombre-carte); }
.accueil-fin h2 { margin-bottom: 24px; }

@media (max-width: 860px) {
  .accueil-quoi { grid-template-columns: 1fr; gap: 24px; }
  .accueil-roue { max-width: 26rem; margin: 0 auto; width: 100%; }
  .etapes-accueil { grid-template-columns: 1fr; gap: 24px; }
  .etapes-accueil li { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; align-items: start; }
  .etape-icone { margin-bottom: 0; }
}
@media (max-width: 640px) {
  .hero { padding: 32px 0 8px; }
  .hero .hero-texte { display: flex; align-items: stretch; }
  .hero .hero-texte > * { order: 0; }
  .hero h1 { order: 0; font-size: clamp(36px, 10.4vw, 44px); }
  .hero-definition { margin: 16px 0 24px; font-size: 17px; }
  .accueil-quoi .hero-roue { order: 0; margin: 0 -8px; }
  .accueil-carte { margin-top: 48px; padding: 24px 16px; }
  .accueil-bloc.accueil-carte { padding-top: 24px; }
  .accueil-fin { margin-top: 48px; padding: 32px 16px; }
}
.accueil-carte h2 { margin-bottom: 24px; }

/* Le haut de page montre le resultat (10 octobre) : le texte a gauche, un
   vision board d'exemple a droite ; sur telephone, le texte puis le board. */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); gap: 64px; align-items: center; max-width: 64rem; padding: 48px 0 24px; }
.hero .hero-texte { align-items: flex-start; text-align: left; }
.hero h1 { font-size: clamp(38px, 5vw, 56px); }
.hero-definition { margin: 24px 0 32px; }
.hero .btn-google { align-self: flex-start; }
.hero-retour { margin: 16px 0 0; font-size: 15px; color: var(--encre-2); }
.hero .hero-retour { margin: 16px 0 0; font-size: 15px; max-width: none; }
.hero-retour a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--encre); text-underline-offset: 4px; }
.hero .hero-duree { margin-top: 0; }
.hero-board { margin: 0; min-width: 0; }
.hero-board ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 8px; }
.hero-board img { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 12px; background: var(--ciel-3); box-shadow: 0 1px 2px rgba(11, 58, 86, .08), 0 12px 24px -16px rgba(11, 58, 86, .45); }
.hero-board li > span { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 14px; font-weight: 500; color: var(--encre); }
.hero-board .pastille { width: 10px; height: 10px; box-shadow: none; }
.hero-board figcaption { margin-top: 16px; font-size: 14px; line-height: 1.5; color: var(--sourd); text-align: center; text-wrap: balance; }
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; gap: 40px; max-width: 34rem; }
  .hero .hero-texte { align-items: center; text-align: center; }
  .hero .btn-google { align-self: center; }
}
@media (max-width: 640px) {
  .hero { display: grid; gap: 32px; padding: 32px 0 8px; }
  .hero .hero-texte { align-items: stretch; }
  .hero .btn-google { display: flex; justify-content: center; align-self: stretch; }
  .hero-retour { text-align: center; }
}

/* Mosaique d'exemple de l'accueil (10 octobre) : neuf images carrees
   collees sans bord, une seule image d'ensemble dans un cadre arrondi.
   Deux images par case quand il y a deux personnages : mosaique.js fait
   passer l'une sur l'autre en fondu (opacite seule, 800 ms). */
.hero-board .mosaique-exemple {
  gap: 0;
  border-radius: 16px;
  overflow: hidden;
  background: var(--ciel-3);
  box-shadow: 0 1px 2px rgba(11, 58, 86, .08), 0 24px 48px -24px rgba(11, 58, 86, .5);
}
.mosaique-exemple li { position: relative; aspect-ratio: 1; }
.hero-board .mosaique-exemple img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  border-radius: 0;
  box-shadow: none;
  background: none;
  opacity: 0;
  transition: opacity 800ms ease;
}
.hero-board .mosaique-exemple img.visible { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero-board .mosaique-exemple img { transition: none; } }

/* La mosaique prend toute la place (10 octobre) : sur telephone, bord a
   bord de l'ecran, sans marge ni coins arrondis, comme une seule image ;
   sur ordinateur, la moitie du haut de page. */
@media (min-width: 861px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; max-width: 72rem; }
}
@media (max-width: 860px) {
  .hero { max-width: none; }
  .hero .hero-texte { max-width: 34rem; margin: 0 auto; width: 100%; }
  .hero-board { margin-left: calc(-1 * max(24px, env(safe-area-inset-left))); margin-right: calc(-1 * max(24px, env(safe-area-inset-right))); }
  .hero-board .mosaique-exemple { border-radius: 0; box-shadow: none; }
  .hero-board figcaption { padding: 0 24px; }
}

/* Le titre en trois temps (10 octobre) : une phrase par ligne, jamais
   coupee au milieu. La taille suit la largeur pour que la plus longue
   tienne sur une ligne. */
.titre-trois-temps span { display: block; white-space: nowrap; }
.hero h1.titre-trois-temps { font-size: clamp(24px, 3.5vw, 44px); line-height: 1.15; }
@media (max-width: 860px) { .hero h1.titre-trois-temps { font-size: clamp(22px, 6.5vw, 40px); } }

/* Telephone et tablette (10 octobre) : les deux colonnes du haut de page
   fusionnent. La mosaique passe en fond, bord a bord, et le texte se pose
   dessus en blanc. Un voile sombre garde le texte lisible meme sur une
   case presque blanche : 60 % en haut (titre, grand : 4,5:1), 72 % en bas
   (petits textes : plus de 5:1). */
@media (max-width: 860px) {
  body.accueil { background: var(--ciel-4); }
  .hero {
    position: relative;
    display: block;
    max-width: none;
    margin-left: calc(-1 * max(24px, env(safe-area-inset-left)));
    margin-right: calc(-1 * max(24px, env(safe-area-inset-right)));
    padding: 0;
    overflow: hidden;
  }
  .hero .hero-board { position: absolute; inset: 0; margin: 0; }
  .hero .hero-board .mosaique-exemple { height: 100%; grid-template-rows: repeat(3, minmax(0, 1fr)); border-radius: 0; box-shadow: none; }
  .hero .mosaique-exemple li { aspect-ratio: auto; }
  .hero .hero-board::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8, 32, 50, .6) 0%, rgba(8, 32, 50, .72) 100%);
    pointer-events: none;
  }
  .hero .hero-texte {
    position: relative;
    z-index: 1;
    max-width: 34rem;
    margin: 0 auto;
    padding: calc(56px + env(safe-area-inset-top)) 24px 48px;
    align-items: stretch;
    text-align: center;
  }
  .hero h1, .hero .hero-definition, .hero .hero-duree, .hero .hero-dev a { color: #fff; }
  .hero h1, .hero .hero-definition { text-shadow: 0 1px 2px rgba(8, 32, 50, .45); }
  .hero .btn-google { display: flex; justify-content: center; align-self: stretch; }
  .hero .hero-dev a:focus-visible, .hero .btn-google:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
  .accueil-quoi { padding-top: 48px; }
}

/* « C'est quoi » : la roue en grand, sans legende (10 octobre). */
.accueil-quoi { grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); }
.accueil-roue { padding: 16px; border-radius: 16px; }
.accueil-roue .wheel-serree { display: block; width: 100%; max-width: none; }
.accueil-roue .wheel-serree .wheel-label { font-size: 11px; font-weight: 600; fill: var(--encre-2); }
.accueil-roue .wheel-serree .wheel-grid, .accueil-roue .wheel-serree .wheel-axis { stroke: #A9CCE0; }
@media (max-width: 860px) {
  .accueil-quoi { grid-template-columns: 1fr; }
  .accueil-quoi .hero-roue { margin: 0 auto; padding: 8px; background: var(--carte); border-radius: 16px; box-shadow: var(--ombre-carte); }
}

/* « Comment ça marche » (10 octobre) : chaque etape montre le produit. Un
   reve ecrit, l'image qu'il devient, les notes en barres. Les visuels ont
   la meme hauteur ; le rang est un petit chiffre a cote du titre. */
.etapes-accueil { gap: 24px; }
.etapes-accueil li { display: flex; flex-direction: column; gap: 16px; }
.etape-visuel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 208px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--ciel-4);
}
.etape-reve { padding: 24px; gap: 8px; background: color-mix(in srgb, #34D399 12%, var(--carte)); }
.etape-axe { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--sourd); }
.etape-axe .pastille { width: 10px; height: 10px; box-shadow: none; }
.accueil-bloc .etape-reve p { margin: 0; font-size: 17px; font-weight: 500; line-height: 1.5; color: var(--encre); }
.etape-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.etape-notes { padding: 16px 24px; gap: 0; background: var(--ciel-4); }
.etape-notes .note-ligne { grid-template-columns: minmax(0, 1fr) 72px 24px; gap: 12px; min-height: 40px; }
.etape-notes .note-nom { font-size: 15px; }
.etape-texte { display: block; font-size: 16px; line-height: 1.6; color: var(--encre-2); }
.etape-texte strong { display: inline; margin: 0 4px 0 0; font-size: 17px; font-weight: 600; color: var(--encre); }
.etape-rang {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--encre);
  font-size: 14px;
  font-weight: 700;
  color: var(--carte);
  vertical-align: 2px;
}
@media (max-width: 860px) {
  .etapes-accueil { gap: 32px; }
  .etapes-accueil li { display: flex; grid-template-columns: none; }
  .etape-visuel { height: 176px; }
}
@media (max-width: 860px) {
  .etapes-accueil li { align-items: stretch; }
  .etape-visuel { width: 100%; }
}
/* Le recadrage large garde la tete du personnage. */
.etape-image img { object-position: 50% 22%; }

/* « Pourquoi la remplir » (10 octobre) : trois blocs de tailles
   differentes. A droite, le fond d'ecran dans un telephone prend deux
   rangees ; a gauche, la vision (trois images) puis le premier pas (une
   roue). Sur telephone, les trois s'empilent. */
.accueil-bloc:has(> .accueil-raisons) { max-width: 56rem; }
.accueil-raisons { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: 16px; }
.accueil-raisons li.raison {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
  border-top: 0;
  border-radius: 16px;
  background: var(--carte);
  box-shadow: var(--ombre-carte);
}
.accueil-raisons li.raison:first-child { padding-top: 24px; }
.raison-vision { grid-column: 1; grid-row: 1; }
.raison-fond { grid-column: 2; grid-row: 1 / span 2; background: color-mix(in srgb, var(--or-1) 16%, var(--carte)) !important; }
.raison-pas { grid-column: 1; grid-row: 2; }
.accueil-bloc .raison p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--encre-2); }
.raison p strong { display: block; margin-bottom: 8px; font-size: 18px; font-weight: 600; line-height: 1.35; color: var(--encre); }
.raison-visuel { display: flex; align-items: center; justify-content: center; }
.raison-trio { gap: 8px; }
.raison-trio img { display: block; flex: 1 1 0; min-width: 0; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 12px; }
.raison-fond .raison-visuel { flex: 1; min-height: 0; }
/* Le telephone : un simple cadre arrondi autour du vrai fond d'ecran. */
.telephone {
  display: block;
  width: min(100%, 13rem);
  padding: 8px;
  border-radius: 32px;
  background: var(--encre);
  box-shadow: 0 24px 40px -24px rgba(11, 58, 86, .6);
}
.telephone img { display: block; width: 100%; height: auto; border-radius: 24px; }
.raison-roue .wheel-serree { display: block; width: 100%; max-width: 15rem; }
.raison-roue .wheel-serree .wheel-label { font-size: 11px; font-weight: 600; fill: var(--encre-2); }
.raison-roue .wheel-serree .wheel-grid, .raison-roue .wheel-serree .wheel-axis { stroke: #A9CCE0; }

/* « Neuf axes, trois piliers » : chaque axe avec son image d'exemple. */
.accueil-piliers { gap: 32px; }
.accueil-piliers ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.accueil-piliers li { display: block; min-height: 0; }
.accueil-piliers li img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 12px; }
.accueil-piliers li > span { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--encre); }
.accueil-piliers li .pastille { margin-top: 4px; }

@media (max-width: 860px) {
  .accueil-raisons { grid-template-columns: 1fr; grid-template-rows: none; }
  .raison-vision, .raison-fond, .raison-pas { grid-column: 1; grid-row: auto; }
  .accueil-raisons li.raison { padding: 24px 16px; }
  .accueil-piliers { grid-template-columns: 1fr; gap: 32px; }
}

/* Piliers en lignes (10 octobre) : le nom et la phrase a gauche, les trois
   images a droite, assez larges pour leur libelle. En colonnes, les
   vignettes de 62 px ne portaient pas « Croissance ». */
.accueil-piliers { grid-template-columns: 1fr; gap: 0; }
.accueil-piliers > div { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 32px; align-items: center; padding: 24px 0; border-top: 1px solid var(--trait); }
.accueil-piliers > div:first-child { border-top: 0; padding-top: 0; }
.accueil-piliers > div:last-child { padding-bottom: 0; }
.accueil-piliers h3 { font-size: 20px; }
.accueil-piliers ul { gap: 16px; margin-top: 0; grid-column: 2; grid-row: 1 / span 2; }
.accueil-piliers h3 { grid-column: 1; align-self: end; margin-bottom: 0; }
.accueil-piliers .pilier-phrase { grid-column: 1; align-self: start; }
.accueil-bloc .accueil-piliers p.pilier-phrase { margin: 0; font-size: 15px; line-height: 1.5; }
.accueil-piliers > div { row-gap: 8px; }
@media (max-width: 860px) {
  .accueil-piliers > div { grid-template-columns: 1fr; gap: 8px; padding: 24px 0; }
  .accueil-piliers ul, .accueil-piliers h3, .accueil-piliers .pilier-phrase { grid-column: 1; grid-row: auto; }
  .accueil-piliers ul { gap: 8px; margin-top: 8px; }
}

/* Ordinateur (11 octobre) : meme modele que telephone et tablette. La
   mosaique couvre tout le haut de page, en six colonnes sur trois rangees
   (deux jeux des neuf cases cote a cote), le texte pose dessus en blanc
   sous le meme voile. */
.mosaique-exemple .mosaique-bis { display: none; }
@media (min-width: 861px) {
  body.accueil { background: var(--ciel-4); }
  .hero {
    position: relative;
    display: flex;
    align-items: center;
    max-width: none;
    min-height: min(78svh, 680px);
    margin-left: calc(-1 * max(24px, env(safe-area-inset-left)));
    margin-right: calc(-1 * max(24px, env(safe-area-inset-right)));
    padding: 0;
    overflow: hidden;
  }
  .hero .hero-board { position: absolute; inset: 0; margin: 0; }
  .hero .hero-board .mosaique-exemple {
    height: 100%;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
    grid-auto-flow: row dense;
    gap: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .hero .mosaique-exemple li { aspect-ratio: auto; }
  .mosaique-exemple .mosaique-bis { display: block; }
  /* Le premier jeu a gauche (colonnes 1 a 3), le second a droite. */
  .mosaique-exemple li:not(.mosaique-bis):nth-child(3n+1) { grid-column: 1; }
  .mosaique-exemple li:not(.mosaique-bis):nth-child(3n+2) { grid-column: 2; }
  .mosaique-exemple li:not(.mosaique-bis):nth-child(3n) { grid-column: 3; }
  .mosaique-exemple li.mosaique-bis:nth-child(3n+1) { grid-column: 4; }
  .mosaique-exemple li.mosaique-bis:nth-child(3n+2) { grid-column: 5; }
  .mosaique-exemple li.mosaique-bis:nth-child(3n) { grid-column: 6; }
  .hero .hero-board::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8, 32, 50, .6) 0%, rgba(8, 32, 50, .72) 100%);
    pointer-events: none;
  }
  .hero .hero-texte {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 46rem;
    margin: 0 auto;
    padding: 72px 24px;
    align-items: center;
    text-align: center;
  }
  .hero h1.titre-trois-temps { font-size: clamp(36px, 4.4vw, 60px); }
  .hero h1, .hero .hero-definition, .hero .hero-duree, .hero .hero-dev a { color: #fff; }
  .hero h1, .hero .hero-definition { text-shadow: 0 1px 2px rgba(8, 32, 50, .45); }
  .hero .hero-definition { max-width: 36rem; font-size: 20px; }
  .hero .btn-google { align-self: center; }
  .hero .hero-dev a:focus-visible, .hero .btn-google:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
  .accueil-quoi { padding-top: 64px; }
}
/* Le second jeu est decale d'une rangee : les deux cases d'un meme axe ne
   sont jamais sur la meme ligne. */
@media (min-width: 861px) {
  .mosaique-exemple li.mosaique-bis:nth-child(n+10):nth-child(-n+12) { grid-row: 2; }
  .mosaique-exemple li.mosaique-bis:nth-child(n+13):nth-child(-n+15) { grid-row: 3; }
  .mosaique-exemple li.mosaique-bis:nth-child(n+16) { grid-row: 1; }
  .mosaique-exemple li:not(.mosaique-bis):nth-child(-n+3) { grid-row: 1; }
  .mosaique-exemple li:not(.mosaique-bis):nth-child(n+4):nth-child(-n+6) { grid-row: 2; }
  .mosaique-exemple li:not(.mosaique-bis):nth-child(n+7) { grid-row: 3; }
}

/* Tablette (641 a 860 px, 11 octobre) : les sections de l'accueil gardent
   leurs colonnes au lieu de s'empiler comme sur telephone, ou les visuels
   s'etiraient en bandeaux. */
@media (min-width: 641px) and (max-width: 860px) {
  .accueil-quoi { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; }
  .accueil-quoi .hero-roue { margin: 0; max-width: none; }
  .etapes-accueil { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .etapes-accueil li { display: flex; flex-direction: column; }
  .etape-visuel { height: 192px; }
  .etape-reve { padding: 16px; }
  .accueil-bloc .etape-reve p { font-size: 15px; }
  .etape-notes { padding: 8px 16px; }
  .etape-notes .note-ligne { grid-template-columns: minmax(0, 1fr) 40px 16px; gap: 8px; }
  .etape-image img { object-position: 50% 50%; }
  .etape-texte strong { display: block; margin: 8px 0 4px; }
  .etape-rang { margin-right: 0; }
  .accueil-raisons { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-rows: auto auto; }
  .raison-vision { grid-column: 1; grid-row: 1; }
  .raison-fond { grid-column: 2; grid-row: 1 / span 2; }
  .raison-pas { grid-column: 1; grid-row: 2; }
  .accueil-carte { padding: 32px 24px; }
  .accueil-bloc.accueil-carte { padding-top: 32px; }
  .accueil-piliers > div { grid-template-columns: 10rem minmax(0, 1fr); gap: 8px 24px; }
  .accueil-piliers h3 { grid-column: 1; grid-row: 1; align-self: end; }
  .accueil-piliers .pilier-phrase { grid-column: 1; grid-row: 2; align-self: start; }
  .accueil-piliers ul { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; gap: 12px; }
}

/* Quatre etapes (11 octobre) : quatre colonnes sur grand ecran, deux par
   deux sur tablette, empilees sur telephone. */
.accueil-carte:has(.etapes-accueil) { max-width: 68rem; }
.etapes-accueil { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.etape-texte strong { display: block; margin: 8px 0 4px; }
.etape-rang { margin-right: 0; }
.etape-actions { padding: 16px; gap: 8px; background: var(--ciel-4); }
.etape-action { display: block; padding: 12px; border-radius: 12px; background: color-mix(in srgb, var(--teinte) 16%, var(--carte)); font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--encre); }
.etape-action .carte-action-libelle { margin: 0 0 4px; font-size: 14px; }
.etape-arret { background: var(--carte); border: 1px solid var(--trait); }
.etape-notes .note-ligne { grid-template-columns: minmax(0, 1fr) 48px 16px; gap: 8px; }
.etape-notes { padding: 8px 16px; }
.etape-reve { padding: 16px; }
.accueil-bloc .etape-reve p { font-size: 16px; }
@media (min-width: 641px) and (max-width: 1099px) {
  .etapes-accueil { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
  .etape-visuel { height: 200px; }
  .etape-image img { object-position: 50% 30%; }
}
@media (max-width: 640px) {
  .etapes-accueil { grid-template-columns: 1fr; }
  .etape-actions { height: auto; }
}

/* Echelle de texte de l'accueil sur telephone (11 octobre) : le titre
   principal (25 px) et les titres de section (24 px) avaient presque la
   meme taille. 28 / 22 / 18 / 17 / 16 / 14. Le titre gagne de la place
   grace a une marge laterale de 16 px. */
@media (max-width: 640px) {
  .hero .hero-texte { padding-left: 16px; padding-right: 16px; }
  .hero h1.titre-trois-temps { font-size: clamp(22px, 7.2vw, 30px); line-height: 1.18; }
  .hero-definition { font-size: 16px; }
  .hero .hero-duree { font-size: 14px; }
  .accueil-bloc h2, .accueil-fin h2 { font-size: 22px; line-height: 1.2; }
  .accueil-bloc .accueil-definition { font-size: 17px; }
  .accueil-piliers h3 { font-size: 18px; }
  .raison p strong { font-size: 17px; }
}
@media (min-width: 641px) { .hero .hero-duree { font-size: 14px; } }

/* Etapes (11 octobre) : la puce et le titre sur une meme ligne, centres
   l'un sur l'autre ; l'explication dessous, alignee sur le bord gauche. */
.etape-titre { display: flex; align-items: center; gap: 12px; }
.accueil-bloc .etape-titre { margin: 0 0 8px; }
.etape-titre strong, .etape-texte .etape-titre strong { display: block; margin: 0; font-size: 17px; line-height: 1.3; }
.etape-rang { flex: none; margin: 0; vertical-align: baseline; }
.accueil-bloc .etape-texte p:last-child { margin: 0; font-size: 16px; line-height: 1.6; color: var(--encre-2); }
/* « Comment ça marche » ouvre la page sous le haut de page. */
.hero + .accueil-carte { margin-top: 48px; }
/* La roue d'exemple respire en haut et en bas. */
.accueil-roue { padding: 32px 16px; }
@media (max-width: 860px) { .accueil-quoi .hero-roue { padding: 32px 8px; } }
@media (max-width: 640px) { .hero + .accueil-carte { margin-top: 32px; } }

/* Comment ça marche en blocs (11 octobre) : quatre cartes de tailles
   differentes. Rangee 1 : le reve, et le telephone (sur deux rangees).
   Rangee 2 : la roue. Rangee 3 : les actions, sur toute la largeur. */
.accueil-etapes { max-width: 56rem; }
.hero + .accueil-etapes { padding-top: 56px; }
.etapes-blocs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; }
.bloc { display: flex; flex-direction: column; gap: 24px; padding: 24px; border-radius: 16px; background: var(--carte); box-shadow: var(--ombre-carte); }
.bloc-reve { grid-column: 1; grid-row: 1; }
.bloc-fond { grid-column: 2; grid-row: 1 / span 2; background: color-mix(in srgb, var(--or-1) 16%, var(--carte)); }
.bloc-roue { grid-column: 1; grid-row: 2; }
.bloc-actions { grid-column: 1 / -1; grid-row: 3; flex-direction: row; align-items: center; }
.bloc-visuel { display: flex; align-items: center; justify-content: center; }
.bloc-fond .bloc-visuel { flex: 1; }
.bloc-reve .etape-reve { display: flex; flex-direction: column; gap: 8px; width: 100%; padding: 24px; border-radius: 12px; }
.accueil-bloc .bloc-reve .etape-reve p { font-size: 18px; line-height: 1.5; }
.bloc-roue .wheel-serree { display: block; width: 100%; max-width: 16rem; }
.bloc-roue .wheel-serree .wheel-label { font-size: 11px; font-weight: 600; fill: var(--encre-2); }
.bloc-roue .wheel-serree .wheel-grid, .bloc-roue .wheel-serree .wheel-axis { stroke: #A9CCE0; }
.bloc-actions .bloc-visuel { flex: 1 1 0; flex-direction: column; align-items: stretch; gap: 8px; }
.bloc-actions .bloc-texte { flex: 1 1 0; }
.bloc-actions .etape-action { font-size: 16px; }
.accueil-bloc .bloc-texte p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--encre-2); }
.accueil-bloc .bloc-texte .etape-titre { align-items: flex-start; margin: 0 0 8px; }
.bloc-texte .etape-titre strong { display: block; padding-top: 2px; font-size: 18px; font-weight: 600; line-height: 1.35; color: var(--encre); }
@media (max-width: 640px) {
  .hero + .accueil-etapes { padding-top: 40px; }
  .etapes-blocs { grid-template-columns: 1fr; }
  .bloc-reve, .bloc-fond, .bloc-roue, .bloc-actions { grid-column: 1; grid-row: auto; }
  .bloc { padding: 24px 16px; }
  .bloc-actions { flex-direction: column; align-items: stretch; }
  .bloc-reve .etape-reve { padding: 16px; }
  .accueil-bloc .bloc-reve .etape-reve p { font-size: 17px; }
  .bloc-texte .etape-titre strong { font-size: 17px; }
}
/* La roue de l'etape 3 remplit son bloc (11 octobre). */
.bloc-roue .bloc-visuel { padding: 8px 0; }
.bloc-roue .wheel-serree { max-width: 26rem; }
/* Le telephone occupe la hauteur de son bloc, agrandie par la roue. */
@media (min-width: 641px) { .bloc-fond .telephone { width: min(100%, 17rem); } }

/* Bloc 4 (11 octobre) : une case devant chaque action, et sur grand ecran
   le texte de l'etape avant son visuel. */
.etape-action { display: flex; align-items: center; gap: 12px; padding: 16px; }
.etape-action svg { flex: none; color: #0F8A5F; }
.etape-arret svg { color: var(--sourd); }
.bloc-actions .etape-action { font-size: 17px; }
@media (min-width: 641px) {
  .bloc-actions { gap: 40px; }
  .bloc-actions .bloc-texte { order: -1; }
}

/* Le telephone fait defiler ses ecrans : images superposees, fondu. */
.telephone[data-defile] { position: relative; }
.telephone[data-defile] img { transition: opacity 700ms ease; }
.telephone[data-defile] img:not(.visible) { opacity: 0; }
.telephone[data-defile] img + img { position: absolute; top: 8px; left: 8px; width: calc(100% - 16px); height: calc(100% - 16px); object-fit: cover; }
@media (prefers-reduced-motion: reduce) { .telephone[data-defile] img { transition: none; } }
/* En production, rien ne separe le bouton de la ligne « Gratuit » (le lien
   de developpement n'existe pas) : on lui rend sa marge. */
.hero .btn-google + .hero-duree { margin-top: 16px; }

/* Reprises d'image (11 octobre) : le compteur et l'avertissement. */
.reve-reprises { margin: 0 0 16px; font-size: 14px; line-height: 1.5; color: var(--sourd); text-align: center; }
.reve-refaire .reve-reprises { margin: 0; }
.axe-reprises { margin: 0 0 16px; padding: 12px 16px; border-radius: 12px; background: color-mix(in srgb, var(--or-1) 18%, var(--carte)); font-size: 14px; line-height: 1.5; color: var(--encre); }
.reve-reprises { margin-top: 16px; text-align: left; }
.reve-refaire .reve-reprises { margin: 0 0 16px; }
.axe-reprises { margin-top: 16px; }

/* Carte d'un axe vide sur telephone (11 octobre) : « Écrire ce rêve »
   tombait sur le titre, les deux etant ranges dans la meme case de la
   grille. Il passe sous le titre. */
@media (max-width: 640px) {
  .carte-axe:not(.carte-fuis) .carte-corps > .lien-modifier { grid-column: 2; grid-row: 2; align-self: start; padding-right: 16px; }
}

/* Carte d'un axe vide, compacte (11 octobre) : une ligne, la couleur de
   l'axe dans un petit carre, le titre, et « Écrire ce rêve » a droite. */
.cartes .carte-axe.carte-vide { display: flex; align-items: center; gap: 16px; padding: 12px 16px; overflow: visible; }
.cartes .carte-axe.carte-vide .carte-image-lien { flex: none; width: 44px; height: 44px; grid-column: auto; grid-row: auto; }
.cartes .carte-axe.carte-vide .carte-image { width: 44px; height: 44px; min-height: 0; aspect-ratio: 1; padding: 0; border-radius: 12px; }
.cartes .carte-axe.carte-vide .carte-image svg { width: 20px; height: 20px; }
.cartes .carte-axe.carte-vide .carte-corps { display: flex; flex: 1; min-width: 0; align-items: center; justify-content: space-between; gap: 16px; padding: 0; }
.cartes .carte-axe.carte-vide .carte-tete { padding: 0; }
.cartes .carte-axe.carte-vide .carte-titre { padding-top: 0; }
.cartes .carte-axe.carte-vide .carte-corps > .lien-modifier { flex: none; padding: 0; white-space: nowrap; }