/* ═══════════════════════════════════════════════════════════
   Direction artistique Solway : « la course du soleil » (lot 4, wiki/app/direction-artistique.md).
   Le fond est un ciel qui avance avec le parcours (aube, jour, zénith, heure dorée, nuit) ;
   les scènes posent sur le ciel, seuls les objets qu'on manipule ont du relief.
   Fraunces (titres) et Figtree (texte) ; accent soleil, texte sombre sur les boutons soleil.
   ═══════════════════════════════════════════════════════════ */
@property --ciel-haut { syntax: "<color>"; inherits: true; initial-value: #FFF8F1; }
@property --ciel-bas { syntax: "<color>"; inherits: true; initial-value: #FFE8D6; }
@property --halo-chaud { syntax: "<color>"; inherits: true; initial-value: #FFD6C9; }
@property --halo-froid { syntax: "<color>"; inherits: true; initial-value: #EEE8F8; }

:root {
  /* Ciels */
  --ciel-aube: #FFF8F1; --ciel-peche: #FFE8D6; --ciel-lavande: #EEE8F8; --ciel-or: #FFE9A8; --ciel-rose: #FFD6C9;
  --ciel-haut: var(--ciel-aube); --ciel-bas: var(--ciel-peche); --halo-chaud: var(--ciel-rose); --halo-froid: var(--ciel-lavande);
  /* Surfaces : les objets (papier), les zones douces, les panneaux posés sur le ciel (verre) */
  --papier: #FFFFFF;
  --papier-2: #FFF8F1;
  --papier-verre: rgb(255 255 255 / .74);
  --trait: #EADFD3;
  /* Encres */
  --encre: #1F1915;
  --encre-2: #574D46;
  --encre-3: #6E645C;
  --sur-encre: #FFF8F1;   /* texte posé sur un fond --encre */
  --sur-soleil: #1F1915;  /* texte posé sur un fond soleil (contraste 6,7) */
  /* Soleil (accent) */
  --soleil: #FF7A1A; --soleil-clair: #FFA43A; --soleil-lumiere: #FFD45C; --soleil-profond: #E5530A; --soleil-texte: #C2410C;
  --accent: var(--soleil);
  --accent-fonce: var(--soleil-texte);
  --accent-clair: var(--soleil-clair);
  --accent-pale: var(--ciel-peche);
  --accent-bord: #FFCFA8;
  --ambre: var(--soleil-lumiere);
  --degrade: linear-gradient(135deg, var(--soleil) 0%, var(--soleil-clair) 100%);
  --degrade-texte: linear-gradient(120deg, var(--soleil-profond) 0%, var(--soleil-texte) 100%);
  --sphere: radial-gradient(circle at 38% 30%, #FFF3B0 0%, #FFD45C 28%, #FFA43A 58%, #FF7A1A 80%, #E5530A 100%);
  /* Teintes secondaires (surlignage, balcon et cave, minuteur) */
  --terre: #C8553D;
  --miel: #E3A008; --miel-pale: #FCEFD2;
  --brume: #8FA7C4; --brume-pale: #E4ECF5;
  --lavande: #A99BD6; --lavande-pale: #EEE8F8;
  /* Familles (vive, texte sur clair, pâle) */
  --exec: #C8553D; --exec-texte: #B4432E; --exec-pale: #FBE3DC;
  --infl: #E39200; --infl-texte: #9A5B00; --infl-pale: #FCEFD2;
  --rel: #14958E; --rel-texte: #0F7C76; --rel-pale: #D9F1EE;
  --strat: #5B57D1; --strat-texte: #4F4BC4; --strat-pale: #E6E5FA;
  /* États */
  --succes: #1F7A47; --attention: #B86E00; --erreur: #A93226; --erreur-pale: #FBE3DC;
  /* Typographie */
  --titre: "Fraunces", "Iowan Old Style", Georgia, serif;
  --texte: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-hero: clamp(2.6rem, 1.6rem + 4.2vw, 4.6rem);
  --t-1: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  --t-2: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --t-3: 1.3rem; --t-corps: 1.0625rem; --t-petit: .9375rem; --t-micro: .8125rem;
  /* Formes et relief (ombres teintées, jamais noires) */
  --r: 20px; --r-s: 14px; --r-panneau: 28px; --r-pilule: 999px;
  --ombre-1: 0 1px 2px rgb(120 60 10 / .06), 0 4px 12px -2px rgb(120 60 10 / .08);
  --ombre-2: 0 2px 4px rgb(120 60 10 / .06), 0 16px 36px -8px rgb(229 83 10 / .22);
  --ombre-sol: 0 18px 40px -10px rgb(229 83 10 / .45);
  --ombre: var(--ombre-1);
  --ombre-forte: 0 2px 6px rgb(120 60 10 / .08), 0 24px 48px -12px rgb(80 40 10 / .28);
  /* Mouvement */
  --d-micro: 120ms; --d-court: 220ms; --d-moyen: 420ms; --d-long: 700ms; --d-histoire: 1200ms;
  --sortie: cubic-bezier(.2, .8, .2, 1);
  --ressort: linear(0, .006, .025 2.8%, .101 6.1%, .539 18.9%, .721 25.3%, .849 31.5%, .937 38.1%, .968 41.8%, .991 45.7%, 1.006 50%, 1.015 55%, 1.017 63.9%, 1.001 85.9%, 1);
  --lent: var(--d-moyen) var(--sortie);
  --doux: var(--d-court) var(--sortie);
  color-scheme: light;
}

/* Moments du ciel : posés sur <body data-ciel="..."> par core.js selon l'étape (aube par défaut). */
body[data-ciel="jour"]   { --ciel-haut: #FFFDF8; --ciel-bas: #FFF3E2; --halo-chaud: #FFE9A8; --halo-froid: #EEE8F8; }
body[data-ciel="zenith"] { --ciel-haut: #FFF6D6; --ciel-bas: #FFE9A8; --halo-chaud: #FFD45C; --halo-froid: #FFE8D6; }
body[data-ciel="dore"]   { --ciel-haut: #FFF1E4; --ciel-bas: #FFD6C9; --halo-chaud: #FFB877; --halo-froid: #F6D9F0; }
body[data-ciel="nuit"]   { --ciel-haut: #1A1412; --ciel-bas: #2A211D; --halo-chaud: #5A2A0E; --halo-froid: #241F3D; }
/* Nuit chaude (partie 2) : mêmes jetons redéfinis pour la scène. Sol, sa bulle et son tiroir gardent
   leurs couleurs de jour (ils sont hors de ces zones). */
body[data-ciel="nuit"] :is(main, .barre, .modale, #toast) {
  --papier: #2A211D; --papier-2: #231B18; --papier-verre: rgb(42 33 29 / .8); --trait: #45372F;
  --encre: #F7EEE6; --encre-2: #DCCDBF; --encre-3: #BCAB9C; --sur-encre: #1F1915;
  --soleil-texte: #FF9A4D; --accent-fonce: #FF9A4D; --accent-pale: #3B2619; --ciel-peche: #3B2619; --accent-bord: #6B3A1C;
  --degrade-texte: linear-gradient(120deg, #FFC46B 0%, #FF8A3D 100%);
  --miel-pale: #3A2E14; --brume-pale: #1F2A33; --lavande-pale: #2A2540;
  --exec: #E0593F; --exec-texte: #F08A72; --exec-pale: #3D211A;
  --infl: #F0B429; --infl-texte: #F5C55A; --infl-pale: #3A2E14;
  --rel: #21A39B; --rel-texte: #4FC4BC; --rel-pale: #14302E;
  --strat: #7D79F0; --strat-texte: #A3A0F5; --strat-pale: #25234A;
  --erreur: #F08A72; --erreur-pale: #3D211A;
  --ombre-1: 0 1px 2px rgb(0 0 0 / .3), 0 6px 16px -4px rgb(0 0 0 / .4);
  --ombre-2: 0 2px 4px rgb(0 0 0 / .3), 0 16px 36px -8px rgb(255 122 26 / .25);
  color-scheme: dark;
  color: var(--encre);
}
body { transition: --ciel-haut var(--d-histoire), --ciel-bas var(--d-histoire), --halo-chaud var(--d-histoire), --halo-froid var(--d-histoire); }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  font-family: var(--texte);
  font-size: var(--t-corps);
  color: var(--encre);
  background: var(--ciel-haut);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  line-height: 1.6;
}
button { font: inherit; color: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--titre); font-weight: 600; font-variation-settings: "SOFT" 100; letter-spacing: -.01em; margin: 0 0 .35em; line-height: 1.12; text-wrap: balance; }
h1 { font-size: var(--t-1); letter-spacing: -.02em; }
h2 { font-size: var(--t-2); }
h3 { font-size: var(--t-3); }
h4 { font-size: 1.08rem; }
p { margin: .4em 0; text-wrap: pretty; }
em { font-style: italic; }
.muet { color: var(--encre-2); }
.petit { font-size: var(--t-petit); }
.centre { text-align: center; }
.accent { color: var(--soleil-texte); font-style: italic; font-family: var(--titre); font-weight: 500; }
a { color: var(--soleil-texte); text-underline-offset: 3px; }

/* Le ciel : dégradé vertical, deux halos qui dérivent lentement, grain de papier (étoiles la nuit). */
.jardin {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .26 0 0 0 0 .12 .11 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
    linear-gradient(180deg, var(--ciel-haut) 0%, var(--ciel-bas) 115%);
}
.jardin::before, .jardin::after { content: ""; position: absolute; border-radius: 50%; filter: blur(70px); opacity: .75; animation: derive 60s ease-in-out infinite alternate; }
.jardin::before { width: 62vmax; height: 62vmax; left: -22vmax; top: -30vmax; background: radial-gradient(circle, var(--halo-chaud), transparent 66%); }
.jardin::after { width: 56vmax; height: 56vmax; right: -22vmax; bottom: -26vmax; background: radial-gradient(circle, var(--halo-froid), transparent 66%); animation-delay: -30s; }
@keyframes derive { to { transform: translate(5vmax, 4vmax) scale(1.08); } }
body[data-ciel="nuit"] .jardin {
  background:
    radial-gradient(1.5px 1.5px at 12% 18%, rgb(255 236 214 / .5), transparent 70%),
    radial-gradient(1px 1px at 34% 8%, rgb(255 236 214 / .4), transparent 70%),
    radial-gradient(1.5px 1.5px at 58% 22%, rgb(255 236 214 / .35), transparent 70%),
    radial-gradient(1px 1px at 76% 12%, rgb(255 236 214 / .45), transparent 70%),
    radial-gradient(1.5px 1.5px at 90% 34%, rgb(255 236 214 / .3), transparent 70%),
    radial-gradient(1px 1px at 22% 46%, rgb(255 236 214 / .25), transparent 70%),
    linear-gradient(180deg, var(--ciel-haut) 0%, var(--ciel-bas) 115%);
}

/* ───────────── Barre ───────────── */
.barre {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px;
  top: env(safe-area-inset-top, 0px);
  padding: 10px max(16px, env(safe-area-inset-left)); backdrop-filter: blur(16px) saturate(1.2);
  background: color-mix(in srgb, var(--ciel-haut) 72%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--trait) 60%, transparent);
}
.marque { display: flex; align-items: center; gap: 10px; border: 0; background: none; text-decoration: none; font-family: var(--titre); font-variation-settings: "SOFT" 100; font-weight: 600; font-size: 1.2rem; padding: 0; letter-spacing: -.01em; color: var(--encre); }
.marque img, .marque svg { width: 30px; height: 30px; }
/* L'arc du jour, en ligne : un trait fin et un petit soleil qui avance au bout. */
/* L'arc du jour (arc.js) : piste, partie parcourue en dégradé soleil, jalons (moments clés), mini Sol. */
.arc-jour { display: block; width: 100%; height: 16px; overflow: visible; }
.arc-piste, .arc-rempli { fill: none; stroke-width: 2.5; stroke-linecap: round; }
.arc-piste { stroke: color-mix(in srgb, var(--trait) 85%, transparent); }
.arc-rempli { stroke: url(#arc-degrade); transition: stroke-dasharray var(--d-long) var(--sortie); }
.arc-stop-1 { stop-color: var(--soleil); } .arc-stop-2 { stop-color: var(--soleil-clair); }
.arc-jalon { fill: var(--papier); stroke: var(--trait); stroke-width: 1.5; pointer-events: all; cursor: help; }
.arc-jalon.fait { fill: var(--soleil-clair); stroke: var(--soleil); }
.arc-sol { filter: drop-shadow(0 1px 3px rgb(229 83 10 / .45)); transition: transform var(--d-long) var(--sortie); }
@media (prefers-reduced-motion: reduce) { .arc-rempli, .arc-sol { transition: none; } }
/* Téléphone : l'arc prend toute la largeur, sur sa propre ligne sous le logo et les boutons. */
@media (max-width: 640px) {
  .barre { flex-wrap: wrap; row-gap: 0; padding-bottom: 6px; }
  .barre .progression-zone { order: 3; flex: 1 0 100%; }
  .barre .barre-actions { margin-left: auto; }
}
.barre-actions { display: flex; gap: 4px; }
.icone { width: 42px; height: 42px; border-radius: 50%; border: 0; background: transparent; color: var(--encre-2); font-size: 17px; display: grid; place-items: center; transition: background var(--d-micro), color var(--d-micro); }
.icone:hover { background: color-mix(in srgb, var(--ciel-peche) 80%, transparent); color: var(--encre); }
.icone.actif { background: var(--ciel-peche); color: var(--soleil-texte); box-shadow: inset 0 0 0 1.5px var(--accent-bord); }

/* ───────────── Mise en page ───────────── */
/* Colonne de 880 px au plus : sur un écran de 1280 px, Sol et sa bulle tiennent dans la marge (196 px
   au moins, voir avatar.js) au lieu de couvrir la scène. */
main { max-width: 880px; margin: 0 auto; padding: 32px 16px 130px; outline: none; }
@media (min-width: 700px) { main { padding-inline: 24px; } }
/* Focus clavier visible partout : anneau sombre avec un écart clair. */
:focus-visible { outline: 3px solid var(--encre); outline-offset: 2px; border-radius: 6px; }
main:focus-visible { outline: none; } /* focus donné par le code à chaque écran (lecteurs d'écran), pas de cadre visible */
.btn:focus-visible, .choix-carte:focus-visible, .puce:focus-visible, .meteo:focus-visible { outline-offset: 3px; border-radius: var(--r-pilule); }
.choix-carte:focus-visible, .meteo:focus-visible { border-radius: var(--r-s); }
.ecran { animation: pousse var(--d-moyen) var(--sortie) both; }
@keyframes pousse { from { opacity: 0; transform: translateY(18px); } }
.pile > * + * { margin-top: 16px; }
.etiquette { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: var(--r-pilule); background: color-mix(in srgb, var(--ciel-peche) 85%, transparent); color: var(--soleil-texte); font-weight: 700; font-size: var(--t-micro); letter-spacing: .08em; text-transform: uppercase; }
.carte { background: var(--papier); border-radius: var(--r); box-shadow: var(--ombre-1); padding: 24px; border: 1px solid color-mix(in srgb, var(--trait) 55%, transparent); }
.carte.douce { background: var(--papier-verre); box-shadow: none; }
.carte.sombre { background: linear-gradient(135deg, #2B2420, #4A2A16); color: #FFF8F1; border: 0; }
.carte.sombre .muet { color: rgb(255 248 241 / .74); }
.grille-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 32px; }
.actions.gauche { justify-content: flex-start; }
.apparait > * { animation: pousse var(--d-moyen) var(--sortie) both; }
.apparait > *:nth-child(2) { animation-delay: 60ms; } .apparait > *:nth-child(3) { animation-delay: 120ms; }
.apparait > *:nth-child(4) { animation-delay: 180ms; } .apparait > *:nth-child(5) { animation-delay: 240ms; }
.apparait > *:nth-child(n+6) { animation-delay: 300ms; }

/* Boutons : pilules. Principal = soleil avec texte sombre ; secondaire = papier ; fantôme = lien. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: var(--r-pilule); padding: 14px 28px; font-weight: 700; font-size: 1rem; line-height: 1.25; background: var(--degrade); color: var(--sur-soleil); box-shadow: 0 10px 24px -10px rgb(229 83 10 / .6), inset 0 1px 0 rgb(255 255 255 / .35); transition: transform var(--d-micro) var(--sortie), box-shadow var(--d-court), filter var(--d-court), opacity var(--d-court); }
.btn:hover { transform: translateY(-2px); filter: saturate(1.15) brightness(1.03); box-shadow: 0 16px 30px -12px rgb(229 83 10 / .65), inset 0 1px 0 rgb(255 255 255 / .35); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .4; pointer-events: none; }
.btn.chaud, .btn.vert, .btn.accent { background: var(--soleil); }
.btn.clair { background: var(--papier); color: var(--encre); box-shadow: inset 0 0 0 1.5px var(--trait); }
.btn.clair:hover { box-shadow: inset 0 0 0 1.5px var(--soleil-clair), var(--ombre-1); filter: none; }
.btn.sombre { background: var(--encre); color: var(--sur-encre); box-shadow: none; }
.btn.lien { background: none; color: var(--soleil-texte); box-shadow: none; padding: 10px 14px; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; font-weight: 600; }
.btn.lien:hover { transform: none; filter: none; box-shadow: none; text-decoration-thickness: 2.5px; }
.btn.grand { padding: 17px 36px; font-size: 1.08rem; }

/* ───────────── Accueil ───────────── */
/* Le héros pose directement sur le ciel (plus de carte qui enveloppe la scène). */
.hero { padding: 36px 0 16px; text-align: center; }
.hero > div { position: relative; }
.hero h1 { font-size: var(--t-hero); max-width: 14ch; margin: 14px auto 18px; line-height: 1.04; }
.hero h1 .accent { display: block; font-weight: 500; background: var(--degrade-texte); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em; }
.hero p.lead { font-size: 1.15rem; max-width: 54ch; margin: 0 auto; color: var(--encre-2); }
/* À côté de Sol, le titre se tient sur deux lignes ; les étapes et les boutons prennent toute la largeur. */
.hero .avec-sol h1 { font-size: clamp(2.4rem, 1.5rem + 3vw, 3.6rem); }
.hero .avec-sol .hero-suite { grid-column: 1 / -1; margin-top: 28px; }
@media (max-width: 860px) { .hero .avec-sol .hero-suite { margin-top: 0; } }
.hero .surtitre { font-size: var(--t-micro); letter-spacing: .14em; text-transform: uppercase; color: var(--soleil-texte); font-weight: 700; }
/* Accueil : trois moments du parcours (direction artistique, section 9), puis la durée réelle. */
.moments { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 34px; text-align: left; }
.moment { padding: 16px; border-radius: var(--r); background: var(--papier-verre); backdrop-filter: blur(8px); border: 1px solid color-mix(in srgb, var(--papier) 70%, transparent); box-shadow: var(--ombre-1); }
.moment h3 { font-size: 1.05rem; margin: 12px 0 4px; }
.moment p { margin: 0; font-size: .92rem; color: var(--encre-2); line-height: 1.4; }
.moment-image { height: 92px; border-radius: var(--r-s); background: color-mix(in srgb, var(--ciel-peche) 70%, var(--papier)); display: grid; place-items: center; overflow: hidden; }
.mini-paire { grid-template-columns: 1fr auto 1fr; gap: 6px; padding: 0 10px; font-family: var(--titre); font-size: .72rem; line-height: 1.2; text-align: center; }
.mini-paire .court { display: none; }
.mini-paire i { position: relative; width: 26px; height: 3px; border-radius: 99px; background: linear-gradient(90deg, var(--strat), var(--trait), var(--soleil)); }
.mini-paire i b { position: absolute; right: 2px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--sphere); }
.mini-eventail { display: flex; justify-content: center; align-items: center; }
.mini-eventail span { margin: 0 -4px; transform: rotate(calc(var(--i) * 10deg)) translateY(calc(var(--d) * 4px)); transform-origin: 50% 100%; }
.mini-rapport { align-content: center; gap: 7px; justify-items: start; padding: 0 22%; }
.mini-rapport b { display: block; height: 8px; border-radius: 99px; background: var(--degrade); }
.mini-rapport b:nth-child(1) { width: 100%; } .mini-rapport b:nth-child(2) { width: 72%; opacity: .7; } .mini-rapport b:nth-child(3) { width: 48%; opacity: .45; }
.duree-accueil { margin: 18px 0 0; font-weight: 600; color: var(--encre-2); }
@media (max-width: 640px) {
  .moments { grid-template-columns: 1fr; gap: 10px; margin-top: 26px; }
  .moment { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 12px; }
  .moment-image { grid-row: span 2; height: 76px; }
  .moment h3 { margin: 0 0 2px; }
  .mini-paire { font-size: .72rem; padding: 0 4px; gap: 3px; }
  .mini-paire .long { display: none; }
  .mini-paire .court { display: inline; }
  .mini-paire i { width: 14px; }
  .mini-eventail .badge { transform: scale(.7); }
  .mini-rapport { padding: 0 14%; }
}

/* ───────────── Formulaires ───────────── */
.champ { display: block; }
.champ label, .pile .champ label { display: block; font-weight: 600; margin-bottom: 8px; }
.champ .aide { font-weight: 400; color: var(--encre-3); font-size: .9rem; }
.champ input, .champ select, .champ textarea { width: 100%; min-height: 52px; padding: 14px 16px; border-radius: var(--r-s); border: 1.5px solid var(--trait); background-color: var(--papier); font-size: 1rem; transition: border-color var(--d-micro), box-shadow var(--d-micro); }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-color: var(--encre); box-shadow: 0 0 0 4px var(--ciel-peche); }
::placeholder { color: var(--encre-3); opacity: .8; }
select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238A7B70' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px !important; cursor: pointer; }
/* Cases à cocher et boutons radio : jamais l'aspect natif ; coche sombre dans un petit soleil. */
input[type="checkbox"], input[type="radio"] { appearance: none; -webkit-appearance: none; flex: none; width: 22px; height: 22px; margin: 0; border: 1.5px solid var(--encre-3); border-radius: 7px; background: var(--papier); display: inline-grid; place-content: center; vertical-align: middle; cursor: pointer; transition: background var(--d-micro), border-color var(--d-micro); }
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]::after { content: ""; width: 12px; height: 12px; background: var(--sur-soleil); clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); transform: scale(0); transition: transform var(--d-court) var(--ressort); }
input[type="radio"]::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--sur-soleil); transform: scale(0); transition: transform var(--d-court) var(--ressort); }
input[type="checkbox"]:checked, input[type="radio"]:checked { background: var(--degrade); border-color: var(--soleil-profond); }
input[type="checkbox"]:checked::after, input[type="radio"]:checked::after { transform: scale(1); }
input[type="checkbox"]:hover, input[type="radio"]:hover { border-color: var(--soleil-profond); }
.puces { display: flex; flex-wrap: wrap; gap: 8px; }
.puce { min-height: 40px; padding: 8px 16px; border-radius: var(--r-pilule); border: 1.5px solid var(--trait); background: var(--papier); font-weight: 600; transition: background var(--d-micro), border-color var(--d-micro), transform var(--d-micro); }
.puce:hover { border-color: var(--soleil-clair); }
.puce:active { transform: scale(.97); }
.puce[aria-pressed="true"] { background: var(--ciel-peche); color: var(--encre); border-color: var(--soleil); font-weight: 700; }
.puce.fixe { display: inline-flex; align-items: center; background: var(--ciel-peche); border-color: var(--soleil); cursor: default; }
.vision-proposee { max-width: 640px; margin: 0 auto 18px; border-left: 4px solid var(--soleil); }
.vision-proposee h3 { margin: 0 0 6px; }
.vision-responsable p { margin: 0 0 12px; }
.vision-proposee .actions { margin-top: 10px; }
/* Message de partage, montré comme une bulle de messagerie (retours de Victor du 2026-10-12, nuit) */
.partage-message { margin-top: 12px; }
/* Mon espace, Mes résultats, Mon entreprise : passer de l'un à l'autre (retours de Victor du 2026-10-12, nuit) */
.tete-mon-espace .bouton-entreprise { align-self: flex-start; padding: 10px 18px; font-size: .95rem; }
.nav-espaces { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; padding: 4px; border-radius: var(--r-pilule); background: var(--papier); border: 1px solid var(--trait); width: fit-content; max-width: 100%; }
.nav-espaces a, .nav-espaces span { padding: 8px 16px; border-radius: var(--r-pilule); font-weight: 600; text-decoration: none; color: var(--encre-2); }
.nav-espaces [aria-current="page"] { background: var(--ciel-peche); color: var(--encre); }
.liste-entreprises { display: grid; gap: 8px; margin-bottom: 12px; }
.bandeau-admin { margin-bottom: 14px; padding: 10px 14px; border-radius: var(--r-s); background: var(--ciel-peche); border: 1px solid var(--soleil); }
.lecture-seule form, .lecture-seule [data-bascule], .lecture-seule #securiser, .lecture-seule [data-supprimer] { display: none !important; }
.admin-espace { display: flex; flex-wrap: wrap; gap: 8px; }
.liste-entreprises a { text-decoration: none; color: inherit; }
.bulle-whatsapp { max-width: 520px; padding: 12px 14px; border-radius: 4px var(--r-s) var(--r-s) var(--r-s); background: var(--papier-2); border: 1px solid var(--trait); font-size: .95rem; line-height: 1.45; overflow-wrap: anywhere; }
.boutons-partage { margin-top: 10px; }
a.btn:not(.lien) { text-decoration: none; }
.boutons-partage .btn { padding: 10px 18px; font-size: .95rem; }
.carte > .lien-qr { padding: 10px 14px; border: 1.5px solid var(--trait); border-radius: var(--r-s); background-color: var(--papier); }
@media (min-width: 900px) {
  .partage-message { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: start; }
  .partage-message .boutons-partage { margin-top: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-items: stretch; }
  .bulle-whatsapp { font-size: .92rem; line-height: 1.4; }
}
.pile.serree .puces { gap: 6px; }
.pile.serree .puce { min-height: 34px; padding: 5px 12px; font-size: .92rem; }

/* Questions ouvertes d'introspection */
.ouverte { position: relative; }
.ouverte textarea { min-height: 96px; resize: vertical; }
.ouverte .micro-mini { position: absolute; right: 10px; bottom: 10px; }
.micro-mini { width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--ciel-peche); color: var(--soleil-texte); font-size: 18px; display: grid; place-items: center; transition: background var(--d-court); }
.micro-mini.on { background: var(--degrade); color: var(--sur-soleil); animation: pulse 1.4s ease-in-out infinite; }

/* Météo */
.meteos { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-top: 10px; }
.meteo { border: 1.5px solid transparent; background: var(--papier-verre); border-radius: var(--r); padding: 18px 10px; box-shadow: var(--ombre-1); transition: transform var(--d-court) var(--sortie), border-color var(--d-court), box-shadow var(--d-court); text-align: center; }
.meteo strong { display: block; margin-top: 6px; }
.meteo small { color: var(--encre-3); }
.meteo:hover { transform: translateY(-4px); box-shadow: var(--ombre-2); }
.meteo[aria-pressed="true"] { border-color: var(--soleil); background: var(--ciel-peche); box-shadow: 0 0 0 4px color-mix(in srgb, var(--soleil) 18%, transparent), var(--ombre-2); }
/* Téléphone : cinq météos en liste (pas de tuile orpheline sur une dernière rangée). */
@media (max-width: 560px) {
  .meteos { grid-template-columns: 1fr; gap: 8px; }
  .meteo { display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center; text-align: left; padding: 10px 16px; }
  .meteo .ico-meteo { grid-row: 1 / span 2; width: 40px; height: 40px; margin: 0; }
  .meteo strong { margin-top: 0; }
  .meteo:hover { transform: none; }
}

/* ───────────── Questionnaire par paires ───────────── */
.test-tete { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.compteur { font-weight: 700; color: var(--encre-2); font-variant-numeric: tabular-nums; }
.barre-q { height: 4px; border-radius: 99px; background: color-mix(in srgb, var(--trait) 80%, transparent); overflow: hidden; }
.barre-q div { height: 100%; background: var(--degrade); transition: width .4s; }
.paire { display: grid; gap: 14px; margin-top: 28px; }
.paire .cotes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.paire .cote { background: var(--papier-verre); border-radius: var(--r); padding: 24px 22px; box-shadow: var(--ombre-1); font-family: var(--titre); font-variation-settings: "SOFT" 100; font-weight: 500; font-size: clamp(1.25rem, 1rem + 1.1vw, 1.7rem); line-height: 1.32; border: 0; transition: box-shadow var(--d-court), transform var(--d-court) var(--sortie), background var(--d-court); display: flex; align-items: center; min-height: 150px; }
.paire .cote.a { --c-cote: var(--strat); }
.paire .cote.b { --c-cote: var(--soleil); }
/* Le côté vers lequel penche le curseur s'éclaire. */
.paire .cote.fort { background: var(--papier); transform: scale(1.02); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-cote) 45%, transparent), var(--ombre-2); }
.curseur { position: relative; padding: 10px 6px; }
/* Curseur : une ligne d'horizon, un petit soleil comme poignée. */
.curseur input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 40px; background: transparent; cursor: pointer; }
.curseur input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 99px; background: linear-gradient(90deg, var(--strat) 0%, var(--trait) 50%, var(--soleil) 100%); }
.curseur input[type="range"]::-moz-range-track { height: 4px; border-radius: 99px; background: linear-gradient(90deg, var(--strat) 0%, var(--trait) 50%, var(--soleil) 100%); }
.curseur input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 36px; height: 36px; margin-top: -16px; border: 0; border-radius: 50%; background: var(--sphere); box-shadow: 0 0 0 7px rgb(255 164 58 / .2), 0 8px 18px -4px rgb(229 83 10 / .6); cursor: grab; transition: transform var(--d-micro), box-shadow var(--d-court); }
.curseur input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.12); cursor: grabbing; box-shadow: 0 0 0 11px rgb(255 164 58 / .22), 0 10px 22px -4px rgb(229 83 10 / .6); }
.curseur input[type="range"]::-moz-range-thumb { width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--sphere); box-shadow: 0 0 0 7px rgb(255 164 58 / .2), 0 8px 18px -4px rgb(229 83 10 / .6); }
.crans { display: flex; justify-content: space-between; padding: 0 12px; margin-top: 6px; }
.crans button { border: 0; background: none; width: 34px; height: 34px; border-radius: 50%; font-weight: 700; color: var(--encre-3); }
.crans button.on { background: var(--soleil); color: var(--sur-soleil); }
.curseur .legende { display: flex; justify-content: space-between; font-size: .85rem; color: var(--encre-3); margin-top: 4px; padding: 0 4px; }
.valider-q { display: flex; justify-content: center; margin-top: 16px; }
.touche { display: inline-block; padding: 2px 8px; border: 1px solid var(--trait); border-radius: 6px; background: var(--papier); font-size: .8rem; font-family: ui-monospace, monospace; }
@media (max-width: 640px) { .paire .cotes { grid-template-columns: 1fr; } .paire .cote { min-height: 0; padding: 18px; } }

/* Minuteur circulaire */
.minuteur { position: relative; width: 66px; height: 66px; flex: none; }
.minuteur svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.minuteur circle { fill: none; stroke-width: 6; }
.minuteur .fond-c { stroke: var(--trait); }
.minuteur .arc { stroke: var(--accent); stroke-linecap: round; transition: stroke-dashoffset .25s linear, stroke .3s; }
.minuteur span { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 800; font-variant-numeric: tabular-nums; }
.minuteur.moyen .arc { stroke: var(--miel); }
.minuteur.urgent .arc { stroke: var(--terre); }
.minuteur.urgent { animation: tremble .5s ease-in-out infinite; }
.minuteur.urgent span { color: var(--terre); animation: clignote .5s steps(2) infinite; }
.minuteur.grace .arc { stroke: var(--terre); stroke-dasharray: 6 6 !important; }
.minuteur.grace span { color: var(--terre); animation: clignote .25s steps(2) infinite; }
@keyframes tremble { 25% { transform: rotate(-4deg) scale(1.05); } 75% { transform: rotate(4deg) scale(1.05); } }
@keyframes clignote { 50% { opacity: .3; } }

/* Compte à rebours avant le questionnaire */
.compte-rebours { font-family: var(--titre); font-size: 9rem; text-align: center; animation: zoom 1s ease-out both; }
@keyframes zoom { from { opacity: 0; transform: scale(2.4); } 40% { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(.7); } }

/* Validation à 3 réponses */
.trio { display: grid; gap: 12px; margin-top: 24px; }
.trio button { text-align: left; border: 2px solid var(--trait); background: var(--papier); border-radius: var(--r-s); padding: 18px 20px; font-size: 1.05rem; display: flex; gap: 14px; align-items: center; transition: all .2s; }
.trio button:hover { border-color: var(--accent-clair); transform: translateX(4px); }
.trio button.choisie { background: var(--encre); color: var(--sur-encre); border-color: var(--encre); }

/* ───────────── Révélation et familles ───────────── */
.revele { text-align: center; }
.cinq { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 22px 0; }
.petale { width: 150px; padding: 18px 14px; border-radius: var(--r); background: var(--papier); border: 1px solid color-mix(in srgb, var(--trait) 55%, transparent); border-top: 5px solid var(--c); box-shadow: var(--ombre); animation: pousse var(--lent) both; cursor: pointer; text-align: left; }
.petale .rang { font-family: var(--titre); color: var(--encre-3); font-size: .95rem; }
.petale strong { display: block; font-family: var(--titre); font-size: 1.25rem; margin-top: 4px; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
@media (max-width: 560px) { .petale { width: calc(50% - 7px); } .petale strong { font-size: 1.08rem; } }
.petale small { color: var(--encre-3); }
.familles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.nuances-top { max-width: 640px; margin: 0 auto 18px; padding: 12px 16px; border-radius: var(--r-s); background: var(--papier-verre); border: 1px solid color-mix(in srgb, var(--trait) 60%, transparent); text-align: left; font-size: var(--t-petit); }
.nuances-top p { margin: 4px 0; }
.famille { border-radius: var(--r); overflow: hidden; background: var(--papier); border: 1px solid var(--trait); }
.famille header { padding: 16px; color: var(--encre); background: color-mix(in srgb, var(--c-fam) 16%, var(--papier)); border-top: 5px solid var(--c-fam); }
.famille header strong { display: block; font-family: var(--titre); font-size: 1.25rem; }
.famille header small { color: var(--encre-2); line-height: 1.35; display: block; }
.famille ul { list-style: none; margin: 0; padding: 8px; }
.famille li button { width: 100%; text-align: left; border: 0; background: none; padding: 9px 10px; border-radius: 10px; display: flex; gap: 10px; align-items: center; font-weight: 600; }
.famille li button:hover { background: var(--papier-2); }
.famille li.top button { font-weight: 800; background: var(--accent-pale); box-shadow: inset 0 0 0 1.5px var(--accent-bord); }
.famille li.top button::after { content: attr(data-rang); margin-left: auto; font-size: .78rem; color: var(--sur-soleil); background: var(--soleil); border-radius: 99px; padding: 2px 9px; }
.famille footer { padding: 10px 16px; border-top: 1px solid var(--trait); display: flex; justify-content: space-between; font-weight: 700; }
.f-execution { --c-fam: var(--exec); } .f-influence { --c-fam: var(--infl); }
.f-relations { --c-fam: var(--rel); } .f-strategie { --c-fam: var(--strat); }
.famille-explication { display: grid; gap: 10px; margin-top: 18px; }
.famille-explication .ligne { display: grid; grid-template-columns: 40px 1fr auto; gap: 14px; align-items: center; padding: 14px 18px; border-left: 5px solid var(--c); }
.famille-explication .ligne .n { font-family: var(--titre); font-size: 1.8rem; font-weight: 700; color: var(--c); }
.ou-suis-je { margin-top: 18px; }

/* ───────────── Définitions et surlignage ───────────── */
.definition { font-family: var(--titre); font-size: clamp(1.15rem, 2.3vw, 1.35rem); line-height: 1.65; }
/* Surlignage libre (2026-10-12) : texte nu, rien de présélectionné ; on sélectionne n'importe quels mots, puis on
   choisit. Les passages marqués sont des <mark> exacts (surlignage.js) ; les toucher les reprend. */
.definition { cursor: text; }
.definition mark.sl { color: inherit; border-radius: 4px; padding: 1px 0; outline-offset: 2px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background var(--d-court), color var(--d-court); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.definition mark.sl:focus-visible { outline: 2px solid var(--soleil); }
.definition mark.sl.oui { background: var(--miel-pale); box-shadow: inset 0 -2px 0 var(--miel); }
.definition mark.sl.non { background: var(--brume-pale); color: var(--encre-2); text-decoration: line-through; text-decoration-color: var(--brume); text-decoration-thickness: 1.5px; }
.selection-libre { user-select: text; -webkit-user-select: text; }
.selection-libre ::selection { background: color-mix(in srgb, var(--soleil-clair) 45%, transparent); }
.legende-surlignage { display: flex; flex-wrap: wrap; gap: 14px; font-size: .9rem; color: var(--encre-2); margin: 10px 0 0; }
.legende-surlignage i { display: inline-block; width: 26px; height: 14px; border-radius: 4px; vertical-align: middle; margin-right: 6px; }
.legende-surlignage .lo { background: var(--miel-pale); border-bottom: 2px solid var(--miel); }
.legende-surlignage .ln { background: var(--brume-pale); }
.jauge-reco { display: flex; align-items: center; gap: 12px; margin-top: 12px; font-weight: 700; }
.jauge-reco div { flex: 1; height: 8px; border-radius: 99px; background: var(--trait); overflow: hidden; }
.jauge-reco div i { display: block; height: 100%; background: var(--miel); transition: width var(--doux); }
.talent-onglets { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
.talent-onglets::-webkit-scrollbar { display: none; }
.talent-onglets button { flex: none; border: 1.5px solid var(--trait); background: var(--papier); border-radius: 99px; padding: 9px 14px; font-weight: 700; display: flex; gap: 8px; align-items: center; }
.talent-onglets button[aria-selected="true"] { background: var(--ciel-peche); color: var(--encre); border-color: var(--soleil); }
.talent-onglets button .ok { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

/* ───────────── Coach vocal ───────────── */
.coach { display: grid; gap: 12px; }
.fil { display: grid; gap: 12px; max-height: 56vh; overflow-y: auto; padding: 6px 2px; scroll-behavior: smooth; }
.bulle { max-width: 86%; padding: 12px 16px; border-radius: 14px; line-height: 1.5; animation: pousse var(--doux) both; white-space: pre-wrap; }
.bulle.coach { background: var(--papier-2); border: 1px solid var(--trait); border-bottom-left-radius: 6px; justify-self: start; }
.bulle.moi { background: var(--accent-pale); border-bottom-right-radius: 6px; justify-self: end; }
.bulle.pense { color: var(--encre-3); font-style: italic; }
.bulle .qui { display: block; font-size: .78rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; opacity: .6; margin-bottom: 4px; }
.saisie { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: end; }
.saisie.sans-micro { grid-template-columns: 1fr auto; }
.saisie textarea { min-height: 54px; max-height: 160px; resize: none; }
.micro { position: relative; width: 56px; height: 56px; border-radius: 50%; border: 0; background: var(--degrade); color: var(--sur-soleil); font-size: 24px; box-shadow: var(--ombre-sol); display: grid; place-items: center; flex: none; }
.micro.enregistre { animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgb(255 122 26 / .45), 0 12px 30px rgb(229 83 10 / .35); } 50% { box-shadow: 0 0 0 20px rgb(255 122 26 / 0), 0 12px 30px rgb(229 83 10 / .35); } }
.ondes { display: flex; gap: 4px; height: 24px; align-items: center; }
.ondes i { width: 4px; border-radius: 3px; background: var(--soleil); animation: onde 1s ease-in-out infinite; }
.ondes i:nth-child(2) { animation-delay: .1s; } .ondes i:nth-child(3) { animation-delay: .2s; } .ondes i:nth-child(4) { animation-delay: .3s; } .ondes i:nth-child(5) { animation-delay: .4s; }
@keyframes onde { 0%, 100% { height: 5px; } 50% { height: 22px; } }
.coach-etat { display: flex; align-items: center; gap: 10px; font-size: .9rem; color: var(--encre-2); min-height: 24px; }
.points-charge { display: inline-flex; gap: 4px; }
.points-charge i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-clair); animation: saute 1.2s ease-in-out infinite; }
.points-charge i:nth-child(2) { animation-delay: .15s; } .points-charge i:nth-child(3) { animation-delay: .3s; }
@keyframes saute { 50% { transform: translateY(-6px); opacity: .5; } }
.suggestions { display: flex; flex-wrap: wrap; gap: 8px; }
.suggestions button { border: 1px dashed var(--accent-clair); background: none; border-radius: 99px; padding: 7px 12px; font-size: .88rem; color: var(--soleil-texte); }

/* Balcon / cave */
.bc { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0; }
.bc > div { border-radius: var(--r-s); padding: 16px 18px; }
.bc .b { background: var(--miel-pale); } .bc .c { background: var(--brume-pale); }
.bc h4 { margin: 0 0 6px; font-size: 1rem; }
.bc ul { margin: 0; padding-left: 18px; } .bc li { margin: 3px 0; }
@media (max-width: 600px) { .bc { grid-template-columns: 1fr; } }
.maison { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.maison .etage { border-radius: var(--r); padding: 20px; }
.maison .balcon { background: linear-gradient(180deg, color-mix(in srgb, var(--miel-pale) 40%, var(--papier)), var(--miel-pale)); }
.maison .cave { background: linear-gradient(180deg, var(--brume-pale), color-mix(in srgb, var(--brume) 30%, var(--papier))); }
.maison h4 { font-size: 1.3rem; }
@media (max-width: 640px) { .maison { grid-template-columns: 1fr; } }
.etats { display: flex; gap: 8px; flex-wrap: wrap; }
.etats button { border: 1.5px solid var(--trait); background: var(--papier); border-radius: 99px; padding: 9px 14px; font-weight: 600; }
.etats button[aria-pressed="true"] { background: var(--degrade); color: var(--sur-soleil); border-color: transparent; }

/* ───────────── Pitch ───────────── */
.pitch-etapes { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.pitch-etape { padding: 16px; border-radius: var(--r-s); background: var(--papier); border: 1.5px solid var(--trait); transition: all .3s; }
.pitch-etape strong { display: block; margin: 6px 0 2px; }
.pitch-etape p { margin: 0; font-size: .92rem; color: var(--encre-2); }
.pitch-etape.active { border-color: var(--soleil); background: var(--ciel-peche); transform: translateY(-3px) scale(1.02); box-shadow: var(--ombre-2); }
.pitch-etape.faite { opacity: .55; }
.studio { display: grid; place-items: center; gap: 16px; margin: 28px 0 10px; }
.micro.gros { width: 150px; height: 150px; font-size: 54px; }
.micro svg.anneau-svg { position: absolute; inset: -12px; width: calc(100% + 24px); height: calc(100% + 24px); transform: rotate(-90deg); }
.anneau-fond { stroke: color-mix(in srgb, var(--encre) 12%, transparent); }
.anneau { stroke: var(--accent); transition: stroke-dashoffset 1s linear; }
.chrono-texte { font-family: var(--titre); font-size: 2.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.chrono-texte.urgent { color: var(--terre); animation: clignote .6s steps(2) infinite; }
.transcription { min-height: 130px; }
.provisoire { color: var(--encre-3); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tags span { padding: 6px 12px; border-radius: 99px; background: var(--accent-pale); border: 1px solid var(--accent-bord); font-size: .9rem; }

/* ───────────── Slides ───────────── */
.diapo { min-height: calc(100dvh - 270px); display: flex; flex-direction: column; justify-content: center; }
.diapo-nav { position: sticky; bottom: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 26px; padding: 10px; border-radius: var(--r-pilule); background: var(--papier-verre); backdrop-filter: blur(14px); box-shadow: var(--ombre-1); }
.points { display: flex; gap: 6px; }
.points i { width: 8px; height: 8px; border-radius: 99px; background: var(--trait); transition: all .3s; }
.points i.on { width: 26px; background: var(--accent); }
.citation { text-align: center; max-width: 32ch; margin: 0 auto; }
.citation blockquote { font-family: var(--titre); font-style: italic; font-weight: 500; font-size: clamp(1.7rem, 4.6vw, 2.8rem); line-height: 1.25; margin: 0; }
.citation blockquote::before { content: "“"; display: block; font-size: 4rem; line-height: .6; color: var(--soleil); }
.citation cite { display: block; margin-top: 24px; font-style: normal; color: var(--encre-2); }
.mot { display: inline-block; opacity: 0; transform: translateY(8px); animation: mot .5s forwards; }
@keyframes mot { to { opacity: 1; transform: none; } }
.flips { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; perspective: 1200px; }
.flip { height: 250px; cursor: pointer; outline: none; }
.flip:focus-visible .flip-in { box-shadow: 0 0 0 3px var(--encre); border-radius: var(--r); }
.flip-in { position: relative; height: 100%; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.flip.tourne .flip-in { transform: rotateY(180deg); }
.flip-in > div { position: absolute; inset: 0; border-radius: var(--r); backface-visibility: hidden; -webkit-backface-visibility: hidden; display: grid; place-items: center; align-content: center; gap: 10px; padding: 24px; border: 1px solid var(--trait); text-align: center; }
.flip .recto { background: var(--papier); border: 1px solid var(--trait); }
.flip .recto strong { font-family: var(--titre); font-size: 1.7rem; }
.flip .recto small { color: var(--encre-3); }
.flip .verso { background: linear-gradient(135deg, #2B2420, #5A2F12); color: #FFF8F1; transform: rotateY(180deg); font-size: 1.08rem; line-height: 1.5; }
.flip:nth-child(3) .recto { background: var(--accent-pale); }
.vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: stretch; }
.vs .ou { align-self: center; font-family: var(--titre); font-size: 1.6rem; color: var(--encre-3); }
.liste-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.liste-cartes .carte strong { display: block; font-size: 1.1rem; margin: 6px 0; }
.liste-cartes .carte p { margin: 0; color: var(--encre-2); }
.equation { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: 12px; }
.equation .terme { flex: 1 1 200px; text-align: center; }
.equation .op { align-self: center; font-family: var(--titre); font-size: 2.2rem; color: var(--soleil-texte); }
@media (max-width: 640px) { .vs { grid-template-columns: 1fr; } .vs .ou { justify-self: center; } .diapo-nav { gap: 6px; padding: 8px; } .diapo-nav .btn { padding: 12px 14px; border-radius: 14px; } .points i { width: 6px; height: 6px; } .points i.on { width: 16px; } }

/* ───────────── Rapport et résultats ───────────── */
.onglets { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; margin: 0 -16px 18px; padding-left: 16px; scrollbar-width: none; position: sticky; top: calc(var(--haut-barre, 63px) + env(safe-area-inset-top, 0px)); z-index: 10; background: linear-gradient(var(--ciel-haut) 78%, transparent); }
.onglets::-webkit-scrollbar { display: none; }
.onglets button { position: relative; z-index: 1; flex: none; border: 1.5px solid var(--trait); background: var(--papier); border-radius: 99px; padding: 10px 16px; font-weight: 700; font-size: .95rem; color: var(--encre); transition: color var(--d-court), border-color var(--d-court), background var(--d-court); }
.onglets button[aria-selected="true"] { background: transparent; color: var(--sur-soleil); border-color: transparent; }
/* La pilule soleil qui glisse sous l'onglet actif (placée par rapport.js). */
.onglets-curseur { position: absolute; left: 0; top: 4px; height: calc(100% - 14px); width: 0; border-radius: 99px; background: var(--degrade); box-shadow: 0 8px 18px -8px rgb(229 83 10 / .55); pointer-events: none; }
.onglets-curseur.pret { transition: transform var(--d-moyen) var(--sortie), width var(--d-moyen) var(--sortie); }
/* Le top 5 en éventail, en tête du rapport. */
.eventail { display: flex; justify-content: center; margin: 22px auto 34px; padding-top: 18px; min-height: 150px; }
.carte-eventail { --angle: calc(var(--i) * 7deg); position: relative; display: grid; justify-items: center; align-content: start; gap: 6px; width: 132px; padding: 14px 8px 12px; margin: 0 -7px; border-radius: var(--r); border: 0; border-top: 4px solid var(--c); background: var(--papier); box-shadow: var(--ombre-2); color: var(--encre); transform: rotate(var(--angle)) translateY(calc(var(--d) * 8px)); transform-origin: 50% 120%; transition: transform var(--d-court) var(--sortie), box-shadow var(--d-court); animation: eventail var(--d-long) var(--sortie) both; animation-delay: calc((var(--i) + 2) * 70ms); }
.carte-eventail:hover, .carte-eventail:focus-visible { z-index: 2; transform: rotate(0deg) translateY(-8px) scale(1.04); box-shadow: var(--ombre-forte); }
.carte-eventail strong { font-family: var(--titre); font-size: .86rem; line-height: 1.15; max-width: 100%; hyphens: manual; }
.num-eventail { position: absolute; top: 6px; left: 10px; font-size: .72rem; font-weight: 800; color: var(--encre-3); }
@keyframes eventail { from { transform: rotate(0deg) translateY(16px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .carte-eventail { animation: none; } .onglets-curseur.pret { transition: none; } }
@media (max-width: 560px) {
  .eventail { min-height: 118px; padding-top: 10px; margin-bottom: 30px; }
  .carte-eventail { width: 78px; padding: 10px 4px 8px; margin: 0 -6px; --angle: calc(var(--i) * 6deg); }
  .carte-eventail strong { font-size: .68rem; }
  .carte-eventail .badge { transform: scale(.8); }
}
.talent-carte { position: relative; overflow: hidden; padding: 0; }
.talent-carte > button { width: 100%; text-align: left; border: 0; background: none; padding: 20px 22px; display: grid; grid-template-columns: auto auto 1fr auto; gap: 16px; align-items: center; }
.talent-carte .fleche { display: grid; place-items: center; }
.talent-carte .rang { font-family: var(--titre); font-size: 2rem; font-weight: 700; color: var(--encre-3); width: 34px; }
.talent-carte h3 { margin: 0; }
.talent-carte .fam { font-size: .85rem; font-weight: 700; }
.talent-carte .fleche { transition: transform .3s; font-size: 20px; color: var(--encre-3); }
.talent-carte.ouvert .fleche { transform: rotate(180deg); }
.talent-detail { display: none; padding: 0 22px 22px; }
.talent-carte.ouvert .talent-detail { display: block; animation: pousse var(--doux) both; }
.talent-carte::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--c); }
@media (max-width: 600px) { .talent-carte > button { grid-template-columns: auto 1fr auto; } .talent-carte .rang { display: none; } }
.barres { display: grid; gap: 6px; }
.barres .l { display: grid; grid-template-columns: 150px 1fr 40px; gap: 10px; align-items: center; font-size: .92rem; }
.barres .l > div { height: 10px; border-radius: 99px; background: var(--trait); overflow: hidden; }
.barres .l > div i { display: block; height: 100%; border-radius: inherit; animation: remplit 1s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes remplit { from { width: 0 !important; } }
.matrice { position: relative; aspect-ratio: 1; max-width: 420px; margin: 0 auto; border-radius: var(--r); overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; }
.matrice .q { display: grid; place-items: center; text-align: center; padding: 10px; font-weight: 700; color: var(--encre); font-size: .95rem; background: color-mix(in srgb, var(--c) 24%, var(--papier)); }
.matrice .q small { display: block; font-weight: 400; color: var(--encre-2); }
.matrice .moi { position: absolute; width: 26px; height: 26px; margin: -13px; border-radius: 50%; background: var(--sphere); border: 3px solid var(--papier); box-shadow: 0 0 0 6px rgb(255 164 58 / .3), var(--ombre-2); animation: pousse .8s .5s both; }
.axes { display: flex; justify-content: space-between; color: var(--encre-3); font-size: .82rem; max-width: 420px; margin: 6px auto 0; }
.rapport h3 { margin-top: 1.2em; }
.rapport h3:first-child { margin-top: 0; }
.rapport li { margin: 6px 0; }
p.note { color: var(--encre-3); font-size: .9rem; }
.chargement { display: flex; gap: 12px; align-items: center; color: var(--encre-2); }
.rond-charge { width: 22px; height: 22px; border: 3px solid var(--trait); border-top-color: var(--accent); border-radius: 50%; animation: tourne .8s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }
.code { font-family: ui-monospace, Menlo, monospace; font-size: .85rem; word-break: break-all; background: var(--papier-2); border-radius: 12px; padding: 12px 14px; }
.jauge { font-family: var(--titre); font-size: 3.4rem; font-weight: 700; color: var(--accent); }
.calcul { min-height: 60vh; display: grid; place-items: center; text-align: center; }
.calcul .attente { width: 56px; height: 56px; border: 3px solid var(--trait); border-top-color: var(--accent); border-radius: 50%; margin: 0 auto 22px; animation: tourne 1s linear infinite; }

/* Modale, toast */
.modale { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgb(31 25 21 / .4); backdrop-filter: blur(8px); animation: fondu .25s both; }
.modale[hidden] { display: none; }
@keyframes fondu { from { opacity: 0; } }
.modale .carte { max-width: 580px; width: 100%; max-height: 86vh; overflow: auto; border-radius: var(--r-panneau); padding: 28px; box-shadow: var(--ombre-forte); animation: pousse .35s both; }
.modale .fermer { float: right; }
#toast { visibility: hidden; position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 140%); background: var(--encre); color: var(--sur-encre); padding: 12px 22px; border-radius: var(--r); font-weight: 600; box-shadow: var(--ombre-forte); transition: transform .4s cubic-bezier(.2, .8, .2, 1); z-index: 60; width: max-content; max-width: min(560px, calc(100vw - 32px)); text-align: center; line-height: 1.4; } /* width: max-content : sinon, posé à left: 50 %, il se rétrécissait à la moitié de l'écran (un rond sur téléphone) */
#toast.on { visibility: visible; transform: translate(-50%, 0); }
.compteur-flottant { position: sticky; bottom: 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 12px 12px 20px; border-radius: var(--r-pilule); background: var(--encre); color: var(--sur-encre); box-shadow: var(--ombre-forte); margin-top: 20px; }
.compteur-flottant .btn { background: var(--degrade); color: var(--sur-soleil); }

/* ───────────── Composants v0.4 ───────────── */
.progression-zone { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.etape-nom { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--encre-3); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icone svg { display: block; }
.badge { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: color-mix(in srgb, var(--c) 14%, var(--papier)); border: 1.5px solid color-mix(in srgb, var(--c) 45%, var(--papier)); font-size: 1.05rem; line-height: 1; flex: none; }
.badge.g { width: 52px; height: 52px; border-radius: 50%; font-size: 1.7rem; }
.fe { margin-right: 8px; }
.fam-e { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: color-mix(in srgb, var(--c) 14%, var(--papier)); font-size: 1.3rem; flex: none; }
.bloc-e { display: block; font-size: 2rem; line-height: 1; margin-bottom: 8px; }
.choix-carte .bloc-e { font-size: 1.6rem; margin-bottom: 2px; }
.flip .recto .bloc-e { font-size: 3rem; }
.liste-cartes .carte .bloc-e, .pitch-etape .bloc-e { font-size: 1.8rem; }
.avec-badge { display: flex; align-items: center; gap: 12px; }
.puce .badge { width: 24px; height: 24px; border-radius: 50%; font-size: .85rem; margin-right: 8px; vertical-align: middle; }
.puce.deja { border-style: dashed; color: var(--encre-2); }
.puce .badge + * { vertical-align: middle; }
.famille li button .badge { width: 28px; height: 28px; border-radius: 50%; font-size: .95rem; }
.famille li button .pts { margin-left: auto; width: 30px; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--accent) 0 var(--p, 0%), var(--trait) var(--p, 0%)); }
.famille li button .pts.p1 { --p: 33%; } .famille li button .pts.p2 { --p: 66%; } .famille li button .pts.p3 { --p: 100%; }
.famille li.top button::after { order: 3; }
.pastille-f { display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: -2px; margin-right: 8px; flex: none; }
.num { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--degrade); color: var(--sur-soleil); font-family: var(--titre); font-weight: 700; font-size: .9rem; flex: none; }
.liste-cartes .carte .num, .pitch-etape .num { margin-bottom: 6px; }
.lettre { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--encre); color: var(--sur-encre); font-family: var(--texte); font-weight: 700; font-size: .85rem; margin-right: 14px; flex: none; }
.paire .cote .lettre { background: var(--c-cote); } .paire .cote.a .lettre { color: #FFFFFF; } .paire .cote.b .lettre { color: var(--sur-soleil); }
.ico-meteo { width: 48px; height: 48px; display: block; margin: 0 auto; }
.meteo .ico-meteo { margin-bottom: 4px; }
.legende-champ { display: block; font-weight: 700; margin-bottom: 10px; }
.choix-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.choix-carte { text-align: left; border: 1.5px solid var(--trait); background: var(--papier); border-radius: var(--r-s); padding: 14px 16px; display: grid; gap: 4px; transition: all .15s; }
.choix-carte span { font-size: .88rem; color: var(--encre-2); }
.choix-carte:hover { border-color: var(--accent-clair); }
.choix-carte[aria-pressed="true"] { border-color: var(--soleil); background: var(--ciel-peche); box-shadow: inset 0 0 0 1px var(--soleil), var(--ombre-2); }
.liste-coequipiers { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.liste-coequipiers .puce b { cursor: pointer; margin-left: 4px; color: var(--encre-3); font-weight: 400; }
.ajout-ligne { display: flex; gap: 8px; }
.ajout-ligne input { flex: 1; padding: 12px 14px; border-radius: var(--r-s); border: 1.5px solid var(--trait); background: var(--papier); min-width: 0; }
.court { font-size: 1.02rem; }
.consigne { font-size: .88rem; color: var(--encre-3); margin: 8px 0 14px; }
.definition p { margin: 0 0 1em; }
.definition p:last-child { margin-bottom: 0; }
.outil-sel { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); display: flex; gap: 8px; justify-content: center; padding: 8px; border-radius: var(--r-pilule); background: color-mix(in srgb, var(--papier) 92%, transparent); backdrop-filter: blur(10px); box-shadow: var(--ombre-forte); z-index: 45; animation: fondu var(--d-court) var(--sortie) both; }
.outil-sel[hidden] { display: none; }
.outil-sel button { border: 0; border-radius: 99px; padding: 10px 16px; font-weight: 700; background: var(--encre); color: var(--sur-encre); box-shadow: var(--ombre-forte); }
.outil-sel button[data-type="effacer"], .outil-sel button[data-type="annuler"] { background: var(--papier); color: var(--encre); border: 1.5px solid var(--trait); box-shadow: none; }
.coach-repli summary { cursor: pointer; font-weight: 700; }
.ligne-etat { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 14px; font-weight: 600; color: var(--encre-2); }
.ligne-etat .etats { margin: 0; }
.aides-balcon { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 0; }
.aides-balcon .btn { padding: 0; }
.suite-rapport { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; margin: 0 auto 10px; }
.ligne-profil { margin-top: 28px; text-align: center; }
.ligne-profil .lien { background: none; border: 0; padding: 0; color: var(--soleil-texte); text-decoration: underline; cursor: pointer; font: inherit; }
.coach-repli[open] summary { margin-bottom: 8px; }
.outil-sel button[data-type="oui"] { background: var(--miel); color: var(--encre); }
.outil-sel button[data-type="non"] { background: var(--brume); color: var(--encre); }
.libres { margin-top: 12px; font-size: .92rem; line-height: 2; }
.libre { display: inline-block; padding: 2px 8px; border-radius: 6px; margin: 0 4px 4px 0; }
.libre.oui { background: var(--miel-pale); box-shadow: inset 0 -2px 0 var(--miel); }
.libre.non { background: var(--brume-pale); text-decoration: line-through; }
.libre b { cursor: pointer; font-weight: 400; color: var(--encre-3); margin-left: 4px; }
.synthese { margin-top: 10px; padding: 14px 18px; border-radius: var(--r-s); background: linear-gradient(135deg, var(--ciel-peche), var(--papier-2)); border-left: 4px solid var(--accent); }
.synthese strong { display: block; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-fonce); margin-bottom: 4px; }
.synthese p { margin: 0 0 8px; }
.synthese p:last-child { margin-bottom: 0; }
.pourquoi { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 10px; }
.pourquoi li { padding: 12px 14px; border-radius: var(--r-s); background: var(--papier-2); display: grid; gap: 4px; }
.affirmations { display: grid; gap: 12px; }
.affirmation { display: grid; grid-template-columns: auto auto 1fr; gap: 14px; align-items: center; padding: 18px 20px; border-radius: var(--r-s); border: 2px solid var(--trait); background: var(--papier); cursor: pointer; font-size: 1.05rem; line-height: 1.45; transition: all .15s; }
.affirmation input { width: 22px; height: 22px; accent-color: var(--accent); margin: 0; }
.affirmation:hover { border-color: var(--accent-clair); }
.affirmation.on { border-color: var(--soleil); background: var(--ciel-peche); box-shadow: 0 0 0 3px color-mix(in srgb, var(--soleil) 15%, transparent); }
.carte.forte { border-color: var(--accent); border-width: 2px; }
.liste-choix { display: grid; gap: 8px; }
.ligne-choix { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 8px 8px 8px 12px; border-radius: var(--r-s); border: 1.5px solid var(--trait); background: var(--papier); }
.ligne-choix.c3 { border-color: var(--accent-clair); }
.ligne-choix.on { border-color: var(--accent); background: var(--accent-pale); }
.ligne-choix .nom { border: 0; background: none; display: flex; gap: 10px; align-items: center; font-weight: 600; padding: 6px 0; text-align: left; }
.ligne-choix .pts-txt { font-variant-numeric: tabular-nums; color: var(--encre-3); font-size: .9rem; }
.ligne-choix .case { border: 1.5px solid var(--trait); background: var(--papier); border-radius: 99px; padding: 8px 14px; font-weight: 700; font-size: .9rem; }
.ligne-choix .case[aria-pressed="true"] { background: var(--degrade); color: var(--sur-soleil); border-color: transparent; }
.tags .ok { background: var(--accent-pale); color: var(--accent-fonce); }
.tags .manque { background: var(--papier-2); color: var(--encre-3); border: 1px dashed var(--trait); }
.tags .avec-badge { display: inline-flex; gap: 8px; }
.carte.accentuee { border-color: var(--accent); background: var(--accent-pale); }
.global-parler { border-left: 5px solid var(--accent); }
.lecture { padding-left: 20px; display: grid; gap: 8px; }
.faq summary { display: flex; gap: 12px; align-items: center; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq[open] summary { margin-bottom: 8px; }
.faq p { margin: 0 0 0 40px; color: var(--encre-2); }
.cit { display: grid; gap: 14px; margin-top: 20px; }
.cit blockquote { margin: 0; padding: 20px 24px; border-left: 4px solid var(--ambre); background: var(--papier); border-radius: 0 var(--r) var(--r) 0; font-family: var(--titre); font-style: italic; font-size: 1.15rem; line-height: 1.45; }
.cit cite { display: block; margin-top: 8px; font-style: normal; font-size: .9rem; color: var(--encre-3); font-family: var(--texte); }
.modale .fermer { font-size: 16px; }
@media (max-width: 600px) { .affirmation { grid-template-columns: auto 1fr; } .affirmation .num { display: none; } .ligne-choix .pts-txt { display: none; } .etape-nom { display: none; } }

/* ───────────── Partie 2 : Deep Inside ───────────── */
.jauge-arch { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; margin-top: 14px; font-weight: 700; font-size: .9rem; }
.jauge-arch > div { position: relative; height: 14px; border-radius: 99px; background: linear-gradient(90deg, var(--strat-pale), var(--trait) 50%, var(--ciel-peche)); }
.jauge-arch > div i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 99px; background: linear-gradient(90deg, color-mix(in srgb, var(--strat) 40%, transparent), color-mix(in srgb, var(--soleil) 60%, transparent)); }
.jauge-arch > div b { position: absolute; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: var(--sphere); border: 3px solid var(--papier); box-shadow: 0 0 0 5px rgb(255 164 58 / .22), 0 4px 12px rgb(229 83 10 / .35); }
.carte.sombre .jauge-arch > div b { border-color: #FFF8F1; }
.lignes-arch { display: grid; gap: 8px; margin-top: 12px; }
.lignes-arch .la { display: grid; grid-template-columns: 150px 1fr 90px; gap: 10px; align-items: center; font-size: .9rem; }
.lignes-arch .la > div { position: relative; height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--strat-pale), var(--ciel-peche)); }
.lignes-arch .la > div i { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--encre-3); border: 2px solid var(--papier); box-shadow: 0 1px 4px rgb(80 40 10 / .25); }
.lignes-arch .la.net > div i { background: var(--accent); width: 18px; height: 18px; margin: -9px 0 0 -9px; }
.lignes-arch .la small { color: var(--encre-3); text-align: right; }
@media (max-width: 600px) { .lignes-arch .la { grid-template-columns: 110px 1fr 70px; font-size: .82rem; } }
.carte-flow { display: grid; grid-template-columns: 78px 1fr; grid-template-rows: 1fr auto; gap: 8px; }
.carte-flow .axe-y { grid-row: 1; display: grid; grid-template-rows: repeat(3, 1fr); gap: 8px; }
.carte-flow .axe-y span { display: grid; place-items: center; text-align: center; font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; color: var(--encre-3); font-weight: 600; line-height: 1.25; border-right: 2px solid var(--trait); padding-right: 6px; }
@media (max-width: 640px) { .carte-flow { grid-template-columns: 54px 1fr; } .carte-flow .axe-y span { font-size: .58rem; } }
.carte-flow .axe-x { grid-column: 2; display: flex; justify-content: space-around; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--encre-3); font-weight: 600; }
.carte-flow .zones { grid-column: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.zone { border-radius: var(--r-s); padding: 12px; background: color-mix(in srgb, var(--c) 12%, var(--papier)); border: 1.5px solid color-mix(in srgb, var(--c) 40%, var(--papier)); min-height: 96px; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.zone:hover { transform: translateY(-2px); box-shadow: var(--ombre); }
.zone strong { display: block; font-family: var(--titre); font-size: 1.02rem; color: color-mix(in srgb, var(--c) 62%, var(--encre)); }
.zone small { display: block; color: var(--encre-2); font-size: .78rem; line-height: 1.35; margin-top: 4px; }
.zone.z-flow { background: linear-gradient(135deg, var(--ciel-peche), color-mix(in srgb, var(--soleil-clair) 30%, var(--papier))); border-color: var(--soleil); box-shadow: 0 0 0 3px color-mix(in srgb, var(--soleil) 18%, transparent); }
.zone .comps { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.comp { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 99px; background: var(--papier); border: 1px solid var(--trait); font-size: .8rem; font-weight: 600; cursor: pointer; }
.carte-flow.compacte .zone { min-height: 70px; padding: 10px; }
@media (max-width: 640px) { .carte-flow .zones { gap: 5px; } .zone { padding: 8px; min-height: 80px; } .zone strong { font-size: .88rem; } .zone small { display: none; } .comp { font-size: .72rem; padding: 2px 7px; } }
.choix-cartes.trois { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px) { .choix-cartes.trois { grid-template-columns: 1fr; } }
.ligne-bilan { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; padding: 10px 12px; border-radius: var(--r-s); background: var(--papier-2); border-left: 4px solid var(--c); }
.ligne-bilan .comp { background: var(--papier); }

/* ───── Partie 2 en jeu de tri (lot 6) : carte des étapes, top 5, tri à l'aveugle, fréquences, révélation ───── */
.etapes-deep { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 10px; text-align: left; }
.etape-deep { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 16px; border-radius: var(--r); background: var(--papier-verre); border: 1px solid color-mix(in srgb, var(--trait) 60%, transparent); box-shadow: var(--ombre-1); }
.etape-deep.suivante { border-color: var(--soleil); box-shadow: 0 0 0 3px color-mix(in srgb, var(--soleil) 18%, transparent), var(--ombre-2); }
.num-etape { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-family: var(--titre); font-weight: 600; font-size: 1.1rem; background: color-mix(in srgb, var(--ciel-peche) 90%, var(--papier)); }
.etape-deep.faite .num-etape { background: var(--degrade); color: var(--sur-soleil); }
.texte-etape { min-width: 0; display: grid; gap: 2px; }
.texte-etape strong { font-family: var(--titre); font-size: 1.08rem; }
.texte-etape p { margin: 4px 0 0; }
@media (max-width: 560px) { .etape-deep { grid-template-columns: 36px minmax(0, 1fr); } .num-etape { width: 34px; height: 34px; font-size: .95rem; } .action-etape { grid-column: 2; } }

.tri-tete { display: grid; gap: 6px; margin-bottom: 14px; }
.tri-tete .etiquette { justify-self: start; }
.tri-tete h2 { margin: 6px 0 0; }
.question-tri { font-size: var(--t-2); max-width: 30ch; }
.compteur-tri { font-weight: 700; color: var(--encre-2); margin: 4px 0 12px; font-variant-numeric: tabular-nums; }
.compteur-tri strong { font-family: var(--titre); font-size: 1.5rem; color: var(--soleil-texte); }
.grille-comp, .pioche { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.carte-comp-zone { position: relative; min-width: 0; }
.carte-comp { position: relative; width: 100%; height: 100%; display: grid; align-content: start; gap: 3px; text-align: left; padding: 12px 34px 12px 12px; border-radius: 16px; background: var(--papier); border: 1.5px solid var(--trait); box-shadow: var(--ombre-1); transition: transform var(--d-court) var(--sortie), border-color var(--d-micro), background var(--d-micro), box-shadow var(--d-court), opacity var(--d-court); }
.carte-comp:hover { border-color: var(--soleil-clair); }
.carte-comp[aria-pressed="true"] { border-color: var(--soleil); background: var(--ciel-peche); transform: translateY(-4px); box-shadow: 0 0 0 3px color-mix(in srgb, var(--soleil) 22%, transparent), var(--ombre-2); }
.carte-comp strong { font-family: var(--titre); font-size: 1rem; line-height: 1.2; }
.carte-comp small { color: var(--encre-2); font-size: .8rem; line-height: 1.3; }
.grille-comp.complete .carte-comp[aria-pressed="false"] { opacity: .45; }
.pastille-comp { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 1.2rem; background: color-mix(in srgb, var(--soleil) 14%, var(--papier)); margin-bottom: 4px; }
.pastille-comp.grande { width: 76px; height: 76px; font-size: 2.3rem; }
.info-comp { position: absolute; z-index: 1; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--trait); background: var(--papier); color: var(--encre-2); font-family: var(--titre); font-style: italic; font-weight: 600; font-size: .85rem; display: grid; place-items: center; padding: 0; }
.info-comp:hover { border-color: var(--soleil); color: var(--soleil-texte); }
.etoile-comp { position: absolute; right: 10px; bottom: 8px; color: var(--soleil); font-style: normal; font-size: .95rem; }
.lumiere-comp { position: absolute; top: 18px; right: 42px; width: 8px; height: 8px; border-radius: 50%; background: var(--soleil-lumiere); box-shadow: 0 0 0 3px rgb(255 212 92 / .3), 0 0 10px rgb(255 164 58 / .8); }
.legende-lumiere { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.legende-lumiere .lumiere-comp { position: static; flex: none; }
.tremble { animation: tremble-carte .4s; }
@keyframes tremble-carte { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

.tri-zone { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px; align-items: start; }
.tri-zone.fini { grid-template-columns: minmax(0, 360px); justify-content: center; }
.mini-grille-zone { position: sticky; top: calc(84px + env(safe-area-inset-top, 0px)); display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 6px; }
.axe-mini-y { grid-row: 1; display: grid; grid-template-rows: repeat(3, 1fr); gap: 6px; }
.axe-mini-y span, .axe-mini-x span { display: grid; place-items: center; font-size: .66rem; letter-spacing: .04em; text-transform: uppercase; color: var(--encre-3); font-weight: 600; line-height: 1.2; text-align: center; }
.axe-mini-x { grid-column: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.legende-axes { grid-column: 1 / -1; margin: 2px 0 0; text-align: center; font-size: .75rem; color: var(--encre-3); }
.mini-grille { grid-column: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; aspect-ratio: 1; }
.case-mini { min-width: 0; border-radius: 16px; border: 1.5px dashed var(--trait); background: color-mix(in srgb, var(--papier) 50%, transparent); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px; padding: 4px; font-size: 1.35rem; line-height: 1; }
.case-mini.remplie { border-style: solid; background: var(--papier); }
button.case-mini { cursor: pointer; font: inherit; font-size: 1.35rem; color: inherit; }
button.case-mini:hover { border-color: var(--soleil-clair); }
.case-mini.en-cours { border: 2px solid var(--soleil); background: var(--ciel-peche); box-shadow: 0 0 0 4px color-mix(in srgb, var(--soleil) 20%, transparent); animation: appel-case 1.8s ease-in-out infinite; }
@keyframes appel-case { 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--soleil) 8%, transparent); } }
.case-mini.eclat { animation: eclat-case .9s var(--sortie); }
@keyframes eclat-case { 0% { box-shadow: 0 0 0 0 rgb(255 164 58 / .8); transform: scale(1.08); } 100% { box-shadow: 0 0 0 16px rgb(255 164 58 / 0); transform: none; } }
.tri-actions { position: sticky; bottom: 12px; z-index: 6; width: fit-content; max-width: 100%; margin-inline: auto; padding: 8px; border-radius: var(--r-pilule); background: var(--papier-verre); backdrop-filter: blur(12px); box-shadow: var(--ombre-1); }
.tri-actions.libre { position: static; background: none; backdrop-filter: none; box-shadow: none; }
@media (max-width: 760px) {
  .tri-zone { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .mini-grille-zone { position: static; max-width: 300px; margin: 0 auto; width: 100%; }
  .tri-actions { border-radius: var(--r); }
}

.carte-freq { position: relative; display: grid; justify-items: center; gap: 6px; text-align: center; padding: 28px 20px; border-radius: var(--r-panneau); background: var(--papier); box-shadow: var(--ombre-2); max-width: 420px; margin: 22px auto; }
.carte-freq strong { font-family: var(--titre); font-size: 1.6rem; }
.carte-freq > span:not(.pastille-comp) { color: var(--encre-2); }
.choix-freq { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 660px; margin: 0 auto; }
.freq { display: grid; justify-items: center; gap: 4px; padding: 16px 12px; border-radius: var(--r); border: 1.5px solid var(--trait); background: var(--papier); text-align: center; transition: border-color var(--d-micro), background var(--d-micro), transform var(--d-micro); }
.freq:hover { border-color: var(--soleil-clair); transform: translateY(-2px); }
.freq[aria-pressed="true"] { border-color: var(--soleil); background: var(--ciel-peche); }
.freq strong { font-size: 1.05rem; }
.freq small { color: var(--encre-2); font-size: .8rem; line-height: 1.3; }
.freq kbd { font-family: var(--texte); font-size: .7rem; color: var(--encre-3); border: 1px solid var(--trait); border-radius: 6px; padding: 1px 6px; }
@media (max-width: 560px) { .choix-freq { grid-template-columns: 1fr; } .freq { grid-template-columns: auto 1fr; justify-items: start; text-align: left; column-gap: 12px; } .freq kbd { grid-row: span 2; align-self: center; } }

.grille-rev-zone { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 6px 8px; max-width: 780px; margin: 18px auto 0; }
.grille-rev { grid-column: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.case-rev { min-width: 0; min-height: 120px; border-radius: 18px; border: 1.5px solid var(--trait); background: var(--papier); padding: 8px; display: flex; flex-direction: column; gap: 6px; transition: background .6s, border-color .6s; }
.case-rev.revelee { background: color-mix(in srgb, var(--c) 16%, var(--papier)); border-color: color-mix(in srgb, var(--c) 55%, var(--papier)); animation: retourne-case .6s var(--sortie); }
@keyframes retourne-case { from { transform: perspective(800px) rotateY(90deg); } }
.nom-zone { border: 0; background: none; padding: 0; text-align: left; font-family: var(--titre); font-weight: 600; font-size: .95rem; color: color-mix(in srgb, var(--c) 62%, var(--encre)); }
.cartes-case { display: flex; flex-wrap: wrap; gap: 4px; }
.carte-rev { border: 1px solid var(--trait); background: var(--papier); border-radius: var(--r-pilule); padding: 3px 9px; font-size: .8rem; font-weight: 600; line-height: 1.3; max-width: 100%; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; text-align: left; }
.carte-rev.f0 { font-size: .72rem; opacity: .85; }
.carte-rev.f2 { font-size: .9rem; font-weight: 700; }
.carte-rev[aria-pressed="true"] { border-color: var(--soleil); background: var(--ciel-peche); box-shadow: 0 0 0 2px var(--soleil); }
.grille-rev.en-deplacement .case-rev { outline: 2px dashed color-mix(in srgb, var(--soleil) 60%, transparent); outline-offset: -4px; cursor: pointer; }
.coherence { border-left: 4px solid var(--soleil); margin: 4px 0 14px; }
@media (max-width: 640px) { .grille-rev-zone { grid-template-columns: 40px minmax(0, 1fr); } .case-rev { min-height: 96px; padding: 6px; } .carte-rev { font-size: .68rem; padding: 2px 5px; } .carte-rev.f2 { font-size: .74rem; } .nom-zone { font-size: .8rem; } .axe-mini-y span, .axe-mini-x span { font-size: .56rem; } }
@media (prefers-reduced-motion: reduce) { .case-mini.en-cours, .case-mini.eclat, .case-rev.revelee { animation: none; } }

/* ───── Module Énergie (lot 8) ───── */
.question-energie { max-width: 720px; margin: 0 auto; }
.choix-energie, .choix-usage { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.choix-energie .puce, .choix-usage .puce { padding: 8px 10px; line-height: 1.25; text-align: center; border-radius: var(--r-s); }
@media (max-width: 640px) {
  .choix-energie { grid-template-columns: 1fr; gap: 6px; }  /* une échelle de haut en bas, du vide à la recharge */
  .choix-energie .puce { text-align: left; padding: 8px 16px; }
  .choix-usage { display: flex; flex-wrap: wrap; }
}
.groupe-energie > div { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.groupe-energie h3 { margin: 0 0 4px; }

/* ───── Module Valeurs (lot 8) ───── */
.carte-valeur { max-width: 520px; }
.carte-valeur strong { font-size: 1.35rem; line-height: 1.3; text-wrap: balance; }
.liste-classement { list-style: none; padding: 0; margin: 0 auto 16px; max-width: 720px; display: grid; gap: 8px; }
.ligne-classement { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px 10px 14px; border-radius: var(--r-s); background: var(--papier); border: 1.5px solid var(--trait); }
.ligne-classement.podium { border-color: var(--accent-bord); box-shadow: var(--ombre-1); }
.rang { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ciel-peche); color: var(--soleil-texte); font-weight: 800; font-size: .85rem; flex: none; }
.boutons-rang { display: flex; align-items: center; gap: 2px; }
.boutons-rang .icone { width: 38px; height: 38px; border: 1.5px solid var(--trait); }
.boutons-rang .icone:disabled { opacity: .35; }
.ajout-valeurs { max-width: 720px; margin: 0 auto; }
.ajout-valeurs summary { cursor: pointer; font-weight: 700; }
.ajout-valeurs .pile { margin-top: 10px; gap: 6px; }
.puce.ajout { display: flex; justify-content: space-between; gap: 10px; text-align: left; border-radius: var(--r-s); }
.puce.ajout small { color: var(--encre-3); font-weight: 600; flex: none; }
.ligne-alignement p { display: flex; gap: 10px; align-items: baseline; margin: 0 0 10px; }
.grille-valeurs { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; align-items: start; margin-bottom: 14px; }
.cercle-valeurs svg { width: 100%; max-width: 420px; display: block; margin: 0 auto; }
.cercle-valeurs text { font-size: 11px; font-weight: 700; fill: var(--encre-2); font-family: var(--texte); }
.cercle-valeurs .fond-petale { fill: color-mix(in srgb, var(--trait) 45%, transparent); }
.badge-al { display: inline-block; padding: 1px 8px; border-radius: 99px; font-size: .75rem; font-weight: 700; background: var(--ciel-peche); color: var(--soleil-texte); }
.badge-al.al-0 { background: var(--lavande-pale); color: var(--encre); }
.badge-al.al-2 { background: color-mix(in srgb, var(--succes) 18%, var(--papier)); color: var(--encre); }
.poles-valeurs { display: grid; gap: 10px; margin-top: 8px; }
.barre-pole { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 12px; align-items: center; font-size: .9rem; font-weight: 600; }
.barre-pole > div { height: 10px; border-radius: 99px; background: var(--trait); overflow: hidden; }
.barre-pole i { display: block; height: 100%; border-radius: 99px; }
@media (max-width: 640px) {
  .grille-valeurs { grid-template-columns: 1fr; }
  .ligne-classement { grid-template-columns: auto minmax(0, 1fr); }
  .boutons-rang { grid-column: 1 / -1; justify-content: flex-end; }
  .barre-pole { grid-template-columns: 1fr; gap: 4px; }
  .cercle-valeurs text { font-size: 13px; }
}

/* ───── Module Conditions de flow (lot 8) ───── */
.paire-conditions .cote { text-align: left; cursor: pointer; gap: 12px; color: var(--encre); }
.paire-conditions .cote .lettre { flex: none; }
.crans-module { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); justify-items: center; max-width: 560px; width: 100%; margin: 6px auto 0; }
.crans-module::before { content: ""; position: absolute; left: 8%; right: 8%; top: 50%; height: 4px; margin-top: -2px; border-radius: 99px; background: linear-gradient(90deg, var(--strat) 0%, var(--trait) 50%, var(--soleil) 100%); }
.crans-module button { position: relative; width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--trait); background: var(--papier); font-weight: 800; color: var(--encre-2); transition: transform var(--d-micro), background var(--d-micro), border-color var(--d-micro); }
.crans-module button:hover { border-color: var(--soleil-clair); transform: scale(1.06); }
.crans-module button[aria-pressed="true"] { background: var(--sphere); border-color: transparent; color: var(--sur-soleil); box-shadow: 0 0 0 6px rgb(255 164 58 / .2); }
.legende-crans { display: flex; justify-content: space-between; max-width: 560px; width: 100%; margin: 4px auto 0; font-size: .85rem; color: var(--encre-3); }
.heures { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.heures input { width: 100%; accent-color: var(--soleil); height: 32px; }
.heures output { font-weight: 800; min-width: 8ch; text-align: right; font-variant-numeric: tabular-nums; }
.recette .lecture strong { color: var(--soleil-texte); }
.actions-faconnage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 10px; }
.action-faconnage { padding: 14px; border-radius: var(--r-s); background: var(--ciel-peche); }
.action-faconnage p { margin: 8px 0 0; font-size: .95rem; line-height: 1.45; }
@media (max-width: 640px) {
  .crans-module button { width: 40px; height: 40px; }
  .actions-faconnage { grid-template-columns: 1fr; }
}

/* ───── Module Moteurs (lot 8) ───── */
.grille-moteurs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.grille-moteurs.petite { display: flex; flex-wrap: wrap; justify-content: center; }
.grille-moteurs.petite .carte-moteur { flex: 1 1 130px; max-width: 180px; }
.grille-moteurs.petite small { display: none; }
.grille-moteurs.trois { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.carte-moteur { display: grid; justify-items: center; align-content: start; gap: 4px; padding: 14px 10px; border-radius: var(--r-s); border: 1.5px solid var(--trait); background: var(--papier); text-align: center; color: var(--encre); transition: border-color var(--d-micro), background var(--d-micro), transform var(--d-micro); }
button.carte-moteur:hover:not(:disabled) { border-color: var(--soleil-clair); transform: translateY(-2px); }
.carte-moteur[aria-pressed="true"] { border-color: var(--soleil); background: var(--ciel-peche); box-shadow: 0 0 0 2px var(--soleil); }
.carte-moteur:disabled { opacity: .45; }
.carte-moteur small { color: var(--encre-2); font-size: .78rem; line-height: 1.3; }
.carte-moteur.gardee { box-shadow: var(--ombre-1); padding: 18px 14px; }
.carte-moteur.gardee strong { font-family: var(--titre); font-size: 1.25rem; }
.emoji-moteur { font-size: 1.6rem; line-height: 1; }
.jauge-moteur { display: block; width: 100%; height: 8px; border-radius: 99px; background: var(--trait); overflow: hidden; }
.jauge-moteur i { display: block; height: 100%; border-radius: 99px; background: var(--degrade); }
.classement-moteurs { padding-left: 22px; display: grid; gap: 8px; margin: 8px 0; }
.classement-moteurs li { display: grid; grid-template-columns: minmax(0, 1fr) 90px 2.5ch; align-items: center; gap: 10px; font-size: .92rem; }
.classement-moteurs b { text-align: right; font-variant-numeric: tabular-nums; }
.classement-moteurs em { font-style: normal; }
.questions-moteurs { margin: 0 0 14px; }
.questions-moteurs ul { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 8px; }
@media (max-width: 640px) {
  .grille-moteurs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grille-moteurs.petite .carte-moteur { flex-basis: 40%; }
  .grille-moteurs.trois { gap: 8px; }
  .grille-moteurs.trois small { display: none; }
  .carte-moteur.gardee { padding: 12px 8px; }
  .carte-moteur.gardee strong { font-size: 1rem; }
  .classement-moteurs li { grid-template-columns: minmax(0, 1fr) 60px 2.5ch; }
}

/* ───── Module Regard des autres (lot 8) et page /proche ───── */
.liste-proches { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 10px; }
.ligne-proche { display: grid; gap: 8px; padding: 12px; border-radius: var(--r-s); border: 1.5px solid var(--trait); background: var(--papier); }
.ligne-proche .badge-al { margin-left: 6px; }
.lien-proche { width: 100%; font-size: .8rem; color: var(--encre-2); background: var(--papier); border: 1px dashed var(--trait); border-radius: 8px; padding: 6px 8px; }
.boutons-proche { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.boutons-proche .btn { min-height: 38px; padding: 6px 14px; }
.histoire-proche p { margin: 10px 0 0; line-height: 1.5; }
.proche-tete { text-align: center; justify-items: center; }
.proche-tete img { display: block; margin: 0 auto 6px; }
.formulaire-proche { max-width: 760px; margin: 0 auto; }
.formulaire-proche fieldset { border: 0; margin: 0; }
.formulaire-proche legend { font-weight: 700; padding: 0; margin-bottom: 8px; float: left; width: 100%; }
.formulaire-proche legend + * { clear: both; }
.proche-tete .etiquette { margin-inline: auto; }
.compte-cartes { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 68px); z-index: 2; margin: 0 0 8px; padding: 6px 10px; width: fit-content; border-radius: 99px; background: var(--papier); box-shadow: var(--ombre-1); }
.cartes-proche { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.carte-proche { text-align: left; padding: 10px 12px; border-radius: var(--r-s); border: 1.5px solid var(--trait); background: var(--papier); color: var(--encre); font-size: .92rem; line-height: 1.4; transition: border-color var(--d-micro), background var(--d-micro); }
.carte-proche:hover { border-color: var(--soleil-clair); }
.carte-proche[aria-pressed="true"] { border-color: var(--soleil); background: var(--ciel-peche); box-shadow: 0 0 0 2px var(--soleil); }
.proche-fin { text-align: center; max-width: 560px; margin: 40px auto; display: grid; justify-items: center; gap: 10px; }
.page-proche .erreur { color: var(--erreur); font-weight: 600; }
@media (max-width: 640px) { .cartes-proche { grid-template-columns: 1fr; } }
.duree-proche { margin: 4px 0 0; font-size: 1.05rem; }
.plus-loin > summary { cursor: pointer; font-weight: 700; }
.plus-loin[open] > summary { margin-bottom: 10px; }

/* Regard des autres : toi / eux (lot 3 du 2026-10-12) */
.toi-eux { margin-top: 14px; border: 1.5px solid var(--soleil-clair); }
.toi-eux h3 { margin-top: 0; }
.toi-eux h4 { margin: 0; }
.toi-eux-phrase { font-size: 1.05rem; margin: 0 0 12px; }
.toi-eux-colonnes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.toi-eux ol { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 6px; }
.toi-eux li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; padding: 4px 8px 4px 2px; border-radius: var(--r-s); }
.toi-eux li .pastille-talent { margin: 0; }
.toi-eux li.lien-commun { background: var(--ciel-peche); box-shadow: 0 0 0 2px var(--soleil); }
.toi-eux li.lien-angleMort { background: var(--lavande-pale); box-shadow: 0 0 0 2px var(--lavande); }
.toi-eux li.lien-aucun { opacity: .8; }
.toi-eux-attente { margin: 6px 0 0; padding: 10px 12px; border-radius: var(--r-s); background: var(--papier-2); color: var(--encre-2); }
@media (max-width: 640px) { .toi-eux-colonnes { grid-template-columns: 1fr; } }

/* Impression */
.impression { display: none; }
@media print {
  body > *:not(.impression) { display: none !important; }
  .impression { display: block !important; color: #000; font-size: 11pt; }
  .impression h1 { font-size: 22pt; } .impression h2 { font-size: 15pt; margin-top: 18pt; }
  .impression .bloc { break-inside: avoid; margin-bottom: 10pt; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ───────────── Sol, le compagnon : soleil libre, bulle de BD, tiroir ───────────── */
/* Sol est posé sur la page (pas de cadre). Sa position est calculée en JS (avatar.js) et appliquée
   par transform ; --duree règle la transition (vol d'écran à écran, ou suivi pendant le défilement). */
main { padding-bottom: 170px; }
.avatar { --duree: 0ms; --vol: cubic-bezier(.34, 1.25, .5, 1); }
.sol-scene { position: fixed; left: 0; top: 0; z-index: 45; width: 260px; height: 260px; transform-origin: 50% 50%; transition: transform var(--duree) var(--vol); pointer-events: none; will-change: transform; }
.sol-rig { position: absolute; inset: 0; pointer-events: none; transition: filter .5s; }
.sol-rig svg { width: 100%; height: 100%; overflow: visible; display: block; filter: drop-shadow(0 10px 18px rgba(214, 96, 18, .22)); }
.sol-perso { position: absolute; left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px; border: 0; border-radius: 50%; background: transparent; padding: 0; cursor: pointer; pointer-events: auto; -webkit-tap-highlight-color: transparent; }
.sol-perso:focus-visible { outline: 4px solid rgba(184, 74, 8, .5); outline-offset: 4px; }

/* Sol se touche pour le mode interactif (à la voix) ; pendant la conversation, un anneau qui pulse autour de lui. */
.avatar.conversation .sol-perso { animation: appel 1.5s ease-out infinite; }
.sol-perso[aria-busy] { cursor: progress; }
/* Le chat écrit : une bulle fixe en bas à droite de l'écran, toujours au même endroit. */
.sol-chat { position: fixed; right: 18px; bottom: 18px; z-index: 47; display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px 12px 13px; border: 0; border-radius: 22px 22px 6px 22px; background: #fff; color: var(--accent-fonce); font: inherit; font-weight: 600; font-size: .9rem; box-shadow: 0 8px 22px rgba(180, 80, 10, .22), inset 0 0 0 1.5px #ffd2ad; cursor: pointer; }
.sol-chat:hover { background: #fff6ee; }
.sol-chat:focus-visible { outline: 4px solid rgba(184, 74, 8, .5); outline-offset: 3px; }
.avatar.tiroir-ouvert .sol-chat { opacity: 0; pointer-events: none; }
@media (max-width: 760px) { .sol-chat { right: 12px; bottom: 12px; padding: 12px; border-radius: 50% 50% 8px 50%; } .sol-chat span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
@keyframes appel { 0% { box-shadow: 0 0 0 0 rgba(239, 108, 26, .45); } 100% { box-shadow: 0 0 0 16px rgba(239, 108, 26, 0); } }

/* Bulle de BD : contour encré, queue qui pointe vers Sol, entrée en rebond. */
.sol-bulle { position: fixed; left: 0; top: 0; z-index: 46; box-sizing: border-box; padding: 13px 16px 14px; background: #fff; color: var(--encre); border: 2.5px solid #2b1a0e; border-radius: 22px; box-shadow: 4px 5px 0 rgba(43, 26, 14, .9); font-size: .95rem; line-height: 1.42; cursor: pointer; transition: transform var(--duree) var(--vol); }
.sol-bulle p { margin: 0; min-height: 1.4em; }
.sol-bulle:not([hidden]) { animation: bulle-entre .32s cubic-bezier(.3, 1.6, .5, 1) both; }
.sol-bulle.sort { animation: bulle-sort .22s ease-in both; }
@keyframes bulle-entre { from { opacity: 0; scale: .7; } }
@keyframes bulle-sort { to { opacity: 0; scale: .85; } }
.sol-bulle::before, .sol-bulle::after { content: ""; position: absolute; width: 0; height: 0; border: solid transparent; }
.sol-bulle[data-cote="haut"] { transform-origin: var(--qx) 100%; }
.sol-bulle[data-cote="haut"]::before { left: var(--qx); bottom: -19px; margin-left: -12px; border-width: 19px 12px 0 2px; border-top-color: #2b1a0e; }
.sol-bulle[data-cote="haut"]::after { left: var(--qx); bottom: -13px; margin-left: -8.5px; border-width: 14px 8px 0 1px; border-top-color: #fff; }
.sol-bulle[data-cote="bas"] { transform-origin: var(--qx) 0; }
.sol-bulle[data-cote="bas"]::before { left: var(--qx); top: -19px; margin-left: -12px; border-width: 0 12px 19px 2px; border-bottom-color: #2b1a0e; }
.sol-bulle[data-cote="bas"]::after { left: var(--qx); top: -13px; margin-left: -8.5px; border-width: 0 8px 14px 1px; border-bottom-color: #fff; }
.sol-bulle[data-cote="gauche"] { transform-origin: 100% var(--qy); }
.sol-bulle[data-cote="gauche"]::before { right: -19px; top: var(--qy); margin-top: -10px; border-width: 10px 0 2px 19px; border-left-color: #2b1a0e; }
.sol-bulle[data-cote="gauche"]::after { right: -13px; top: var(--qy); margin-top: -6.5px; border-width: 7px 0 1px 14px; border-left-color: #fff; }
.sol-bulle[data-cote="droite"] { transform-origin: 0 var(--qy); }
.sol-bulle[data-cote="droite"]::before { left: -19px; top: var(--qy); margin-top: -10px; border-width: 10px 19px 2px 0; border-right-color: #2b1a0e; }
.sol-bulle[data-cote="droite"]::after { left: -13px; top: var(--qy); margin-top: -6.5px; border-width: 7px 14px 1px 0; border-right-color: #fff; }
/* En conversation, tout le texte de Sol (début compris) : la bulle défile au-delà de six lignes (lot C, 2026-10-16). */
.sol-bulle.direct p { max-height: 8.6em; overflow-y: auto; overscroll-behavior: contain; }
.sol-suite { display: inline-block; margin-top: 6px; padding: 0; border: 0; background: none; color: var(--accent-fonce); font-weight: 700; font-size: .85rem; text-decoration: underline; text-underline-offset: 3px; }
.sol-moi { position: fixed; left: 0; top: 0; z-index: 46; padding: 8px 12px; border-radius: 16px 16px 4px 16px; background: #2b1a0e; color: #fff; font-size: .85rem; line-height: 1.35; box-shadow: var(--ombre); transition: transform var(--duree) var(--vol); }

/* Tiroir : fil complet. Droite sur grand écran, feuille du bas sur téléphone. */
.sol-voile { position: fixed; inset: 0; z-index: 47; background: rgba(60, 35, 15, .18); opacity: 0; transition: opacity .3s; }
.avatar.tiroir-ouvert .sol-voile { opacity: 1; }
.sol-tiroir { position: fixed; z-index: 48; top: 0; right: 0; bottom: 0; width: min(410px, 100vw); display: flex; flex-direction: column; background: #fffaf5; box-shadow: -18px 0 50px rgba(120, 70, 20, .18); transform: translateX(104%); transition: transform .34s cubic-bezier(.22, .8, .24, 1); }
.avatar.tiroir-ouvert .sol-tiroir { transform: none; }
.avatar.tiroir-ouvert .sol-scene { z-index: 49; }
.avatar[data-mode="cache"] .sol-scene, .avatar[data-mode="cache"] .sol-bulle { opacity: 0; visibility: hidden; pointer-events: none; }
.tiroir-tete { display: grid; grid-template-columns: 76px 1fr auto; gap: 10px; align-items: center; padding: 14px 14px 10px; background: linear-gradient(135deg, #fff3e4, #ffe6cc); border-bottom: 1px solid #ffdcbd; }
.tiroir-place { width: 76px; height: 76px; }
.tiroir-id { display: flex; flex-direction: column; min-width: 0; }
.tiroir-id strong { font-family: var(--titre); font-size: 1.25rem; line-height: 1.1; }
.tiroir-id small { color: var(--encre-2); font-size: .8rem; }
.tiroir-humeur { font-size: .78rem; color: var(--accent); min-height: 1.1em; font-style: italic; }
.tiroir-actions { align-self: start; display: flex; gap: 6px; }
.tiroir-actions .icone { width: 34px; height: 34px; border-radius: 10px; }
.tiroir-actions .icone[aria-pressed="true"] { background: var(--accent); color: #fff; border-color: var(--accent); }
.tiroir-conv { padding: 10px 14px; border-bottom: 1px solid #ffe3cc; }
.tiroir-parler { width: 100%; justify-content: center; gap: 8px; padding: 10px 14px; border-radius: 99px; font-size: .88rem; }
.tiroir-parler[aria-pressed="true"] { background: var(--terre); animation: pulse 1.6s ease-in-out infinite; }
.tiroir-note { display: block; font-size: .8rem; color: var(--encre-2); line-height: 1.35; }
.tiroir-fil { flex: 1; overflow-y: auto; padding: 14px; display: grid; gap: 8px; align-content: start; scroll-behavior: smooth; }
.tiroir-nouveau { align-self: center; margin: -46px auto 10px; position: relative; z-index: 1; padding: 6px 14px; border: 0; border-radius: 999px; background: #2b1a0e; color: #fff; font: inherit; font-size: .85rem; font-weight: 700; box-shadow: 0 4px 14px rgba(43, 26, 14, .25); cursor: pointer; }
.tiroir-nouveau[hidden] { display: none; }
.av-msg.en-cours { opacity: .85; }
.av-msg { max-width: 90%; padding: 9px 13px; border-radius: 16px; line-height: 1.45; white-space: pre-wrap; animation: pousse .3s both; font-size: .92rem; }
.av-msg.sol { background: #fff; border: 1.5px solid #ffd9ba; border-bottom-left-radius: 5px; justify-self: start; }
.av-msg.moi { background: #2b1a0e; color: #fff; border-bottom-right-radius: 5px; justify-self: end; }
.tiroir-etat { padding: 0 14px; min-height: 18px; font-size: .82rem; color: var(--encre-2); display: flex; align-items: center; gap: 8px; }
.tiroir-etat:empty { min-height: 0; }
.tiroir-suggestions { display: flex; gap: 6px; overflow-x: auto; padding: 6px 14px 8px; scrollbar-width: none; }
.tiroir-suggestions::-webkit-scrollbar { display: none; }
.tiroir-suggestions button { flex: none; border: 1.5px dashed var(--accent-clair); background: #fff; border-radius: 99px; padding: 6px 11px; font-size: .8rem; color: var(--accent-fonce); white-space: nowrap; }
.tiroir-donnees { margin: 0; padding: 0 14px 6px; font-size: .74rem; color: var(--encre-3); }
.tiroir-donnees a, .tiroir-donnees .lien { color: inherit; font-size: inherit; text-decoration: underline; }
.confidentialite .carte { margin-top: 16px; }
.confidentialite h2 { margin-top: 0; font-size: 1.15rem; }
.tableau-conservation { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tableau-conservation th, .tableau-conservation td { text-align: left; vertical-align: top; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--trait); }
.tiroir-journal { display: flex; gap: 8px; align-items: flex-start; padding: 2px 14px 4px; font-size: .74rem; color: var(--encre-3); line-height: 1.3; }
.tiroir-journal input { margin-top: 2px; accent-color: var(--accent); }
/* Une case que Sol vient de remplir ou de choisir s'illumine un instant. */
.sol-touche { animation: sol-touche 1.4s ease-out; }
@keyframes sol-touche { 0% { box-shadow: 0 0 0 0 rgba(255, 164, 58, .75); } 35% { box-shadow: 0 0 0 7px rgba(255, 164, 58, .35); } 100% { box-shadow: 0 0 0 0 rgba(255, 164, 58, 0); } }
.tiroir-saisie { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; padding: 8px 14px calc(14px + env(safe-area-inset-bottom, 0px)); align-items: center; }
.tiroir-saisie:not(:has(.tiroir-micro)) { grid-template-columns: 1fr auto; }
.tiroir-saisie input { width: 100%; min-width: 0; padding: 11px 13px; border-radius: 12px; border: 1.5px solid var(--trait); font-size: .95rem; background: #fff; }
.tiroir-saisie input:focus { outline: none; border-color: var(--accent-fonce); box-shadow: 0 0 0 3px rgba(184, 74, 8, .3); }
.tiroir-saisie .btn { padding: 10px 14px; border-radius: 12px; font-size: 1.1rem; }
.tiroir-micro { width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--accent-pale); color: var(--accent-fonce); display: grid; place-items: center; }
.tiroir-micro.on { background: var(--terre); color: #fff; animation: pulse 1.4s ease-in-out infinite; }

/* Accueil : une place pour Sol dans le héros (il s'y pose en grand). */
.hero .avec-sol { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 8px 20px; text-align: left; }
.hero .avec-sol h1, .hero .avec-sol p.lead { margin-left: 0; }
.hero .avec-sol .actions { justify-content: flex-start; margin-top: 26px; }
/* Grand écran : Sol dans la colonne de droite, la bulle au dessus de lui. Téléphone : Sol en haut à
   gauche du héros, son bouton dessous, la bulle à sa droite (la colonne réserve la place). */
.hero-sol { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; padding-top: 160px; }
.sol-place { width: 200px; height: 200px; flex: none; }
@media (max-width: 860px) {
  .hero .avec-sol { grid-template-columns: 1fr; }
  .hero-sol { order: -1; align-items: flex-start; padding-top: 0; min-height: 196px; margin: -18px 0 4px -8px; }
  .sol-place { width: 112px; height: 112px; }
}
@media (max-width: 760px) {
  main { padding-bottom: 150px; }
  .sol-tiroir { top: auto; left: 0; width: 100vw; height: min(80vh, 640px); border-radius: 24px 24px 0 0; transform: translateY(104%); box-shadow: 0 -18px 50px rgba(120, 70, 20, .2); }
  .tiroir-tete { border-radius: 24px 24px 0 0; grid-template-columns: 64px 1fr auto; }
  .tiroir-place { width: 64px; height: 64px; }
  .sol-bulle { font-size: .9rem; padding: 11px 14px 12px; }
}
@media (prefers-reduced-motion: reduce) { .sol-scene, .sol-bulle, .sol-moi { transition: none; } }
@media print { .avatar { display: none !important; } }

/* ───── Comptes : invitation, avis ───── */
/* QR code de partage (lot 2) : toujours noir sur blanc, même en mode nuit (lisible par tous les téléphones) */
.qr-code { width: min(260px, 70vw); margin: 8px auto 12px; padding: 10px; background: #fff; border-radius: 14px; }
.qr-code svg { display: block; width: 100%; height: auto; }
.lien-qr { width: 100%; font-size: .85rem; }
/* Page /partage (lot 2) */
.liste-partage { list-style: none; padding: 0; margin: 18px 0; display: grid; gap: 10px; }
.liste-partage li { display: flex; gap: 14px; align-items: flex-start; }
.liste-partage p { margin: 4px 0 0; }
/* Notifications de Mon espace (lot 2) */
.point-nouveau { display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 50%; background: var(--accent); vertical-align: 1px; }
.notifications .ligne-espace p { margin: 0; }
[data-action="espace"] { position: relative; }
[data-action="espace"].a-du-nouveau::after { content: ""; position: absolute; top: 4px; right: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--papier); }
/* Mon espace (lot 2) */
.ligne-espace { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--trait); }
.ligne-espace:last-child { border-bottom: 0; }
.ligne-espace p { margin: 2px 0 0; }
.ligne-espace .btn { flex: none; }
.pastille-etat { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 99px; font-size: .72rem; background: color-mix(in srgb, var(--trait) 60%, transparent); color: var(--encre-3); vertical-align: 1px; }
.pastille-etat.fait { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--encre); }
.pastille-etat.en-cours { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--encre); }
.boutons-ligne { display: flex; gap: 10px; align-items: center; flex: none; }
.pile-form { display: grid; gap: 10px; margin-top: 10px; }
.pile-form .champ { display: grid; gap: 4px; }
.pile-form input { width: 100%; }
@media (max-width: 520px) { .ligne-espace { flex-direction: column; align-items: stretch; } .ligne-espace .btn { align-self: flex-start; } }
/* Mon espace en tableau de bord (refonte du 2026-10-12, wiki/specs/mon-espace.md) : styles propres à cet écran */
.tete-mon-espace { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: flex-end; justify-content: space-between; margin-bottom: 14px; }
.tete-mon-espace h2 { margin: 8px 0 0; }
.top-espace-grand { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.top-espace-grand li { display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px 5px 6px; border-radius: var(--r-pilule); background: var(--papier); border: 1px solid var(--trait); font-weight: 600; font-size: .92rem; }
.rang-top { font-family: var(--titre); color: var(--soleil-texte); font-weight: 700; min-width: 1ch; text-align: center; }
.espace-onglets { display: flex; gap: 4px; margin: 0 0 18px; padding: 4px; border-radius: var(--r-pilule); background: color-mix(in srgb, var(--papier) 70%, transparent); border: 1px solid color-mix(in srgb, var(--trait) 55%, transparent); overflow-x: auto; scrollbar-width: none; }
.espace-onglets::-webkit-scrollbar { display: none; }
.onglet-espace { flex: 1 0 auto; padding: 9px 14px; border: 0; border-radius: var(--r-pilule); background: none; font: inherit; font-size: .9rem; font-weight: 600; color: var(--encre-2); cursor: pointer; white-space: nowrap; }
.onglet-espace[aria-selected="true"] { background: var(--papier); color: var(--encre); box-shadow: var(--ombre-1); }
.onglet-espace:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.compte-onglet { font-size: .74rem; color: var(--encre-3); font-weight: 500; }
.page-mon-espace > .carte + .carte, .colonne-principale > * + *, .colonne-cote > * + * { margin-top: 16px; }
.tableau-espace { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.prochaine-etape { background: linear-gradient(135deg, color-mix(in srgb, var(--ciel-peche) 70%, var(--papier)), var(--papier)); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.prochaine-etape h3 { font-size: var(--t-2); margin: 12px 0 6px; text-wrap: balance; }
.prochaine-etape p { margin: 0 0 18px; max-width: 52ch; }
.mini-etiquette { padding: 4px 11px; }
.chemin-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.chemin-tete h3 { margin: 0; }
.barre-chemin { height: 8px; margin: 12px 0 14px; border-radius: 99px; background: color-mix(in srgb, var(--trait) 60%, transparent); overflow: hidden; }
.barre-chemin span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.etapes-chemin { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 7px; font-size: .9rem; color: var(--encre-2); }
.etapes-chemin li { display: flex; align-items: center; gap: 10px; }
.etapes-chemin li.fait { color: var(--encre); }
.point-chemin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--trait); flex: none; }
.etapes-chemin .fait .point-chemin { background: var(--accent); border-color: var(--accent); }
.etapes-chemin .en-cours .point-chemin { border-color: var(--accent); background: linear-gradient(90deg, var(--accent) 50%, transparent 50%); }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.idees-espace h3 { margin: 4px 0 10px; font-size: 1rem; color: var(--encre-2); }
.idees-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.idee-espace { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: var(--r-s); border: 1px solid var(--trait); background: var(--papier); font: inherit; text-align: left; cursor: pointer; color: var(--encre); }
.idee-espace:hover { border-color: var(--accent); }
.idee-espace > span:last-child { display: grid; gap: 1px; }
.emoji-idee { font-size: 1.4rem; line-height: 1; }
.rappel-compte { margin: 0; padding: 12px 14px; border-radius: var(--r-s); border: 1px dashed var(--trait); }
.intro-onglet { margin: 0 0 14px; }
.grille-modules-espace { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.tuile-module { display: flex; flex-direction: column; gap: 8px; padding: 18px; }
.tuile-module p { margin: 0; flex: 1; }
.tuile-module .btn { align-self: flex-start; }
@media (max-width: 760px) { .tableau-espace { grid-template-columns: minmax(0, 1fr); } .colonne-cote { order: 2; } }
.nom-court { display: none; }
@media (max-width: 520px) { .top-espace-grand li { font-size: .82rem; padding: 3px 10px 3px 4px; } .onglet-espace { flex: 1 1 auto; padding: 8px 6px; font-size: .8rem; } .nom-long, .compte-onglet { display: none; } .nom-court { display: inline; } .prochaine-etape .btn.grand { width: 100%; } }
.partage-module { margin: 18px 0 0; }
.case-partage { display: flex; gap: 10px; align-items: center; cursor: pointer; font-weight: 600; }
.case-partage input { width: 20px; height: 20px; flex: none; accent-color: var(--accent, #e8833a); }
.partage-module p { margin: 6px 0 0 30px; }
.bandeau-invit { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin: 0 0 18px; padding: 12px 16px; border-radius: 14px; background: var(--ciel-peche); border: 1px solid var(--accent-bord); font-size: .9rem; }
.bandeau-invit strong { font-family: var(--titre); font-size: 1rem; }
.bandeau-invit span { flex: 1 1 280px; color: var(--encre-2); }
.lien { background: none; border: 0; padding: 0; color: var(--soleil-texte); text-decoration: underline; cursor: pointer; font: inherit; font-size: .88rem; }
.petit { font-size: .82rem; }

/* ───── Espace organisation et vue globale ───── */
.page-espace main { max-width: 1100px; }
.tete-espace { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: flex-end; justify-content: space-between; }
.deux-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px 28px; }
.deux-col label, .pile label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: .9rem; }
.pile input:not([type="range"], [type="checkbox"], [type="radio"]), .pile select, .ligne-saisie input { padding: 11px 14px; border: 1.5px solid var(--trait); border-radius: var(--r-s); font: inherit; background-color: var(--papier); }
.erreur { color: var(--erreur); background: var(--erreur-pale); border-radius: 10px; padding: 10px 14px; }
.cle code, .ligne-lien code, .muet code { font-size: .85rem; background: var(--ciel-peche); padding: 3px 8px; border-radius: 8px; word-break: break-all; }
.ligne-saisie { display: flex; gap: 8px; flex-wrap: wrap; } .ligne-saisie input { flex: 1 1 240px; }
.liste-liens { display: grid; gap: 10px; }
.ligne-lien { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 12px 14px; border: 1px solid var(--trait); border-radius: 14px; background: var(--papier); }
.ligne-lien small { display: block; color: var(--encre-2); }
.ligne-lien.inactif { opacity: .55; }
.petit-btn { padding: 7px 12px; font-size: .82rem; }
.tableau-defil { overflow-x: auto; }
.tableau-profils { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tableau-profils th { text-align: left; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--encre-3); padding: 8px 10px; border-bottom: 1px solid var(--trait); }
.tableau-profils td { padding: 10px; border-bottom: 1px solid color-mix(in srgb, var(--trait) 70%, transparent); vertical-align: middle; }
.tableau-profils td small { display: block; color: var(--encre-2); font-weight: 400; }
.tableau-profils tr.moi td { background: var(--ciel-peche); }
.cell-top { white-space: nowrap; } .cell-top .badge { width: 28px; height: 28px; font-size: .95rem; margin-right: 2px; }
.mini-barre { width: 90px; height: 6px; border-radius: 99px; background: var(--trait); overflow: hidden; } .mini-barre i { display: block; height: 100%; background: var(--degrade, var(--accent)); }
.etiquette.mini { font-size: .62rem; padding: 2px 7px; margin-left: 6px; }
.pastille-talent { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 4px; border-radius: 99px; background: var(--papier); border: 1px solid var(--trait); font-size: .85rem; margin: 2px; }
.pastille-talent .badge { width: 24px; height: 24px; font-size: .85rem; border-radius: 50%; }
.barres-fam { display: grid; gap: 8px; }
.barre-fam { display: grid; grid-template-columns: 120px 1fr 44px; align-items: center; gap: 8px; font-size: .88rem; }
.barre-fam i { display: block; height: 10px; border-radius: 99px; min-width: 4px; } .barre-fam b { text-align: right; font-variant-numeric: tabular-nums; }
.liste-top10 { padding-left: 0; list-style: none; display: grid; gap: 6px; } .liste-top10 li { display: grid; grid-template-columns: 32px auto 1fr; gap: 8px; align-items: center; } .liste-top10 small { display: block; grid-column: 2 / -1; }
.liste-parler { padding-left: 0; list-style: none; display: grid; gap: 10px; } .liste-parler li { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; }
.zones-mini { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
.zone-mini { padding: 8px 10px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--c) 40%, var(--papier)); background: color-mix(in srgb, var(--c) 8%, var(--papier)); font-size: .85rem; } .zone-mini strong { display: block; }
/* Module Énergie, paliers (journée d'hier, le plus et le moins de la semaine ; 2026-10-12) */
.frise-journee { display: flex; gap: 2px; height: 26px; margin: 10px 0 4px; border-radius: 8px; overflow: hidden; }
.frise-journee span { min-width: 4px; }
.frise-legende { display: flex; justify-content: space-between; margin-bottom: 10px; }
.liste-episodes { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 6px; }
.liste-episodes li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 12px; background: var(--papier); border: 1px solid var(--trait); }
.liste-episodes small { display: block; }
.pastille-energie { width: 12px; height: 12px; border-radius: 50%; }
.ligne-episode { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 12px; }
#f-episode .legende-champ { margin: 12px 0 6px; } #f-episode select, #moments select { width: 100%; margin-top: 8px; padding: 10px 12px; border-radius: var(--r-s); border: 1.5px solid var(--trait); background: var(--papier); }
#moments textarea { min-height: 84px; resize: vertical; }
.moment-energie { padding: 10px 14px; border-radius: 12px; background: var(--papier); border-left: 4px solid #3f9e63; } .moment-energie.moins { border-left-color: #b8574a; } .moment-energie p { margin: 6px 0; font-style: italic; }
.palier-suivant { margin-top: 16px; border-color: color-mix(in srgb, var(--accent) 35%, transparent); } .palier-suivant h3 { margin: 10px 0 4px; }
#moments, #journee { margin-top: 16px; }
@media (max-width: 520px) { .ligne-episode { grid-template-columns: minmax(0, 1fr); } }
/* Regard des autres en 5 minutes (devine, parfois trop, histoire en trois champs ; 2026-10-12) */
.devine { margin-top: 14px; } .devine-puces .puce { display: inline-flex; align-items: center; min-height: 36px; padding: 5px 12px 5px 6px; font-size: .88rem; }
.devine-puces .badge { width: 24px; height: 24px; font-size: .8rem; margin-right: 6px; }
.parfois-trop { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--trait); } .puce-trop { text-align: left; height: auto; line-height: 1.35; font-weight: 500; font-size: .9rem; }
.toi-eux-colonnes.trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) { .toi-eux-colonnes.trois { grid-template-columns: minmax(0, 1fr); } }
/* Moteurs en paliers (choix du palier, tri à nombre fixe, nourri ou affamé ; 2026-10-12) */
.palier-choix { display: grid; gap: 10px; text-align: left; font: inherit; color: var(--encre); cursor: pointer; } .palier-choix:hover { border-color: var(--accent); }
.compteurs-piles { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; } .compteurs-piles span { padding: 4px 12px; border-radius: 99px; border: 1px solid var(--trait); font-size: .85rem; background: var(--papier); } .compteurs-piles .complet { border-color: var(--accent); background: var(--ciel-peche); }
.ligne-tri-moteur { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--trait); }
.ligne-tri-moteur .puce { min-height: 34px; padding: 5px 12px; font-size: .85rem; } .ligne-tri-moteur .puce:disabled { opacity: .4; }
.nourri-moteurs { margin-top: 14px; } .nourri-0 { color: #a8321e; } .nourri-2 { color: #1e6b3a; }
@media (max-width: 760px) { .ligne-tri-moteur { grid-template-columns: minmax(0, 1fr); } }
/* Valeurs, palier standard (19 valeurs, colonnes fixes, dilemmes ; 2026-10-12) */
.choix-freq.colonnes-choix { grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: none; }
.colonnes-valeurs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.colonne-valeur { padding: 12px; display: grid; gap: 6px; align-content: start; } .colonne-valeur h4 { margin: 0 0 4px; font-size: .9rem; }
.carte-mini { text-align: left; font: inherit; font-size: .78rem; line-height: 1.3; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--trait); background: var(--papier); color: var(--encre); cursor: pointer; } .carte-mini:hover { border-color: var(--accent); }
.dilemme p { margin: 0 0 8px; } .dilemme .puce { min-height: 34px; padding: 5px 12px; font-size: .85rem; }
#valeurs-19 { margin-top: 16px; } .cercle-valeurs text.petit-texte { font-size: 9px; font-weight: 600; }
@media (max-width: 760px) { .colonnes-valeurs { grid-template-columns: minmax(0, 1fr); } .choix-freq.colonnes-choix { grid-template-columns: minmax(0, 1fr); } }
/* Conditions de flow, palier standard (meilleurs moments, contre-moment ; 2026-10-12) */
.moment-flow h3 { margin: 0 0 8px; } .moment-flow .legende-champ { margin: 12px 0 6px; } .moment-flow .puce { min-height: 34px; padding: 5px 12px; font-size: .86rem; }
.moment-flow textarea { min-height: 64px; resize: vertical; } .moment-flow.contre { border-left: 4px solid #6F7FC4; }
#moments-flow { margin-top: 16px; } .recette-vecue { border-collapse: collapse; font-size: .88rem; width: 100%; } .recette-vecue th, .recette-vecue td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--trait); } .recette-vecue tr.ecart td { background: var(--ciel-peche); font-weight: 600; }
/* Le soir à l'écrit, « Mes 3 rayons » (2026-10-15, app/js/screens/soir.js) et son entrée dans Mon espace */
.ecran-soir { max-width: 680px; margin-inline: auto; } .ecran-soir .tri-tete h2 { text-wrap: balance; }
.ecran-soir .pile { gap: 12px; } .ecran-soir .champ input { min-height: 46px; padding: 10px 14px; }
.intention-matin, .talent-propose, .rayon-rappel { margin: 0 0 12px; padding: 14px 16px; } .intention-matin p, .talent-propose p { margin: 0 0 8px; }
.rayon-rappel { background: color-mix(in srgb, var(--ciel-peche) 55%, var(--papier)); }
.choix-autre-talent { display: inline-flex; align-items: center; gap: 6px; } .choix-autre-talent select { border: 0; background: transparent; font: inherit; max-width: 150px; min-height: 0; height: auto; padding: 0 4px; width: auto; }
.carte-soir ol { margin: 0; padding-left: 20px; display: grid; gap: 10px; } .carte-soir li > span { display: block; margin-top: 2px; } .carte-soir .pastille-talent { display: inline-flex; margin-top: 4px; }
.compteurs-soir { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; margin: 14px 0 6px; font-size: .92rem; color: var(--encre-2); } .compteurs-soir b { color: var(--encre); font-family: var(--titre); font-size: 1.15rem; }
.ligne-aide { text-align: center; max-width: 60ch; margin: 8px auto; }
.numeros-aide { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 8px; } .numeros-aide li { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .numeros-aide .btn { min-width: 120px; justify-content: center; }
.semaine-soir .carte h3 { margin-top: 0; font-size: 1.02rem; }
.carte-rayons { background: linear-gradient(135deg, color-mix(in srgb, #ffd7a3 45%, var(--papier)), var(--papier)); } .carte-rayons h3 { margin: 10px 0 4px; } .carte-rayons p { margin: 0 0 12px; }
.ligne-rayons { margin: 0; padding: 10px 14px; border-radius: var(--r-s); border: 1px solid var(--trait); background: var(--papier); }
.champ-ligne { display: flex; align-items: center; gap: 10px; margin: 10px 0; font-size: .92rem; } .champ-ligne input { padding: 8px 10px; border-radius: 10px; border: 1.5px solid var(--trait); background: var(--papier); font: inherit; }
#reglages-rituels .legende-champ { margin: 12px 0 6px; }
/* Lecture d'équipe de l'espace organisation (retours de Victor du 2026-10-12 la nuit, app/js/lecture-equipe.js) */
.lecture-tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 6px 0 18px; }
.lecture-tuile { display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--r-s); background: var(--papier); border: 1px solid var(--trait); }
.lecture-tuile b { font-family: var(--titre); font-size: 1.35rem; line-height: 1.2; } .lecture-tuile b small { font-size: .8rem; color: var(--encre-3); }
.lecture-tuile span { font-size: .8rem; color: var(--encre-2); }
.lecture-bloc { margin-top: 22px; } .lecture-bloc h4 { margin: 0 0 4px; } .lecture-bloc h5 { margin: 14px 0 6px; font-size: .95rem; }
.piste-fam { position: relative; display: block; height: 10px; border-radius: 99px; background: color-mix(in srgb, var(--trait) 50%, transparent); }
.piste-fam i { display: block; height: 100%; border-radius: inherit; min-width: 4px; }
.repere-equilibre { position: absolute; left: 25%; top: -4px; bottom: -4px; width: 2px; background: var(--encre-2); opacity: .55; }
.carte-talents { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.colonne-talents { display: grid; gap: 4px; align-content: start; } .colonne-talents h5 { margin: 0 0 4px; font-size: .82rem; }
.case-talent { display: flex; justify-content: space-between; gap: 6px; align-items: center; padding: 5px 8px; border-radius: 8px; font-size: .78rem; background: color-mix(in srgb, var(--c) calc(var(--a) * 100%), var(--papier)); color: var(--encre); border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); cursor: default; }
.case-talent span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .case-talent b { flex: none; }
.case-talent.absent { background: transparent; border-style: dashed; color: var(--encre-3); }
.case-talent:focus-visible { outline: 2px solid var(--accent); }
.manque-famille { padding: 8px 12px; margin-top: 10px; border-radius: 8px; background: var(--papier); } .manque-famille p { margin: 4px 0 0; font-size: .88rem; }
.apports { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin: 10px 0; }
.apport { padding: 10px 12px; border-radius: var(--r-s); background: var(--papier); border: 1px solid var(--trait); } .apport p { margin: 4px 0 0; }
.apport-tete { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; } .apport .badge { width: 22px; height: 22px; font-size: .75rem; }
.matrice-duos { border-collapse: collapse; font-size: .82rem; margin: 8px 0; } .matrice-duos th, .matrice-duos td { padding: 6px 8px; text-align: center; border: 1px solid var(--trait); } .matrice-duos th { font-weight: 600; white-space: nowrap; }
.matrice-duos .score-fort { background: color-mix(in srgb, var(--succes, #2f8f5b) 30%, var(--papier)); font-weight: 700; } .matrice-duos .score-moyen { background: color-mix(in srgb, var(--accent) 16%, var(--papier)); } .matrice-duos .diag { background: color-mix(in srgb, var(--trait) 50%, transparent); }
.lecture-science { padding: 12px 16px; border-radius: var(--r-s); border: 1px solid var(--trait); background: var(--papier); } .lecture-science summary { cursor: pointer; } .lecture-science li { font-size: .88rem; margin: 4px 0; }
@media (max-width: 760px) { .carte-talents { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.liste-duos { display: grid; gap: 8px; } .duo { display: grid; grid-template-columns: 54px 1fr; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: var(--papier); border: 1px solid var(--trait); }
.duo > strong { font-family: var(--titre); font-size: 1.5rem; color: var(--soleil-texte); text-align: center; } .duo small { display: block; }
.qui-quoi { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 6px 16px; font-size: .88rem; } .qui-quoi div { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px dashed var(--trait); padding: 4px 0; }
.retour-ligne .note { color: var(--soleil-texte); letter-spacing: 1px; }
.grille-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.stat { padding: 12px 14px; border-radius: 14px; background: var(--papier); border: 1px solid var(--trait); } .stat b { display: block; font-family: var(--titre); font-size: 1.7rem; color: var(--soleil-texte); } .stat span { font-size: .82rem; color: var(--encre-2); }
.entonnoir { display: grid; gap: 4px; } .entonnoir div { display: grid; grid-template-columns: 150px 1fr 40px; gap: 8px; align-items: center; font-size: .84rem; } .entonnoir i { display: block; height: 10px; border-radius: 99px; background: var(--accent); min-width: 2px; }
.liste-questions { padding-left: 18px; font-size: .9rem; } .liste-questions li { margin-bottom: 4px; }
pre.digest { white-space: pre-wrap; font-size: .8rem; background: var(--papier); border: 1px solid var(--trait); border-radius: 12px; padding: 12px; max-height: 320px; overflow: auto; }

.case-ligne { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; color: var(--encre-2); margin-top: 6px; }
.case-ligne input { margin-top: 3px; width: 18px; height: 18px; flex: none; }

/* ───── Vue globale : liste filtrable et fiche complète d'un parcours ───── */
.ecran-large { max-width: 1180px; margin-inline: auto; }
.filtres-admin { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.filtres-admin input[type="search"] { flex: 1 1 260px; min-width: 0; padding: 11px 14px; border-radius: 12px; border: 1.5px solid var(--trait); font: inherit; background: var(--papier); }
.filtres-admin select { padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--trait); font: inherit; background-color: var(--papier); }
.lignes-cliquables tbody tr, tr.cliquable { cursor: pointer; }
.lignes-cliquables tbody tr:hover, tr.cliquable:hover { background: var(--accent-pale); }
.lignes-cliquables tbody tr:focus-visible { outline: 3px solid var(--encre); outline-offset: -3px; }
.section-fiche { margin-top: 14px; padding: 0; overflow: hidden; }
.section-fiche > summary { cursor: pointer; list-style: none; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; }
.section-fiche > summary::-webkit-details-marker { display: none; }
.section-fiche > summary::after { content: "▾"; color: var(--encre-3); transition: transform .2s; }
.section-fiche[open] > summary::after { transform: rotate(180deg); }
.section-fiche > summary h3 { margin: 0; font-size: 1.1rem; }
.contenu-fiche { padding: 0 20px 18px; min-width: 0; }
.dl-fiche { display: grid; grid-template-columns: minmax(120px, 220px) 1fr; gap: 8px 16px; margin: 0; }
.dl-fiche dt { font-weight: 600; color: var(--encre-2); }
.dl-fiche dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 640px) { .dl-fiche { grid-template-columns: 1fr; } .dl-fiche dd { margin-bottom: 8px; } }
.bloc-fiche { border-top: 1px solid var(--trait); padding-top: 12px; margin-top: 12px; }
.bloc-fiche:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.bloc-fiche h4 { margin: 0 0 8px; display: flex; align-items: center; gap: 8px; }
.fil-admin { display: grid; gap: 8px; }
.fil-admin p { margin: 0; padding: 10px 14px; border-radius: 14px; max-width: 80ch; overflow-wrap: anywhere; }
.fil-admin small { display: block; color: var(--encre-3); font-size: .78rem; margin-bottom: 2px; }
.fil-admin .msg-ia { background: var(--accent-pale); }
.fil-admin .msg-personne { background: var(--papier); border: 1px solid var(--trait); justify-self: end; }
.fil-admin .msg-systeme { background: transparent; border: 1px dashed var(--trait); font-size: .88rem; }
.echelle-rep { letter-spacing: 1px; color: var(--encre-3); white-space: nowrap; font-size: .7rem; }
.echelle-rep b { color: var(--accent-fonce); font-size: .95rem; }
.pastille-alerte { display: inline-block; padding: 2px 8px; border-radius: 99px; background: var(--erreur-pale); color: var(--erreur); font-size: .78rem; font-weight: 600; margin: 1px 2px; }

/* ───── Espace organisation (lot 5) : accueil, création en trois étapes, tableau de bord ───── */
.espace-accueil, .espace-creation, .espace-pret { max-width: 760px; margin-inline: auto; padding-block: 32px; }
.espace-accueil h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); margin: 14px 0 10px; text-wrap: balance; }
.espace-accueil .lead, .espace-pret .lead { font-size: 1.12rem; color: var(--encre-2); max-width: 58ch; }
.trois-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 26px 0; }
.trois-points div { display: grid; gap: 4px; padding: 16px; border-radius: 18px; background: var(--papier); box-shadow: var(--ombre); }
.trois-points b { font-size: 1.5rem; } .trois-points span { color: var(--encre-2); font-size: .92rem; }
@media (max-width: 640px) { .trois-points { grid-template-columns: 1fr; } }
.espace-creation h2 { margin: 18px 0 8px; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem); }
.etapes-creation { display: flex; gap: 8px; list-style: none; padding: 0; margin: 0 0 8px; flex-wrap: wrap; }
.etapes-creation li { display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 99px; background: var(--papier); color: var(--encre-3); font-weight: 600; font-size: .9rem; border: 1px solid var(--trait); }
.etapes-creation li span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--papier-2); }
.etapes-creation li.en-cours { color: var(--encre); border-color: var(--accent); background: var(--accent-pale); }
.etapes-creation li.en-cours span, .etapes-creation li.fait span { background: var(--soleil); color: var(--sur-soleil); }
.tuiles-type { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
@media (max-width: 560px) { .tuiles-type { grid-template-columns: 1fr; } }
.tuile-type { display: grid; gap: 4px; text-align: left; padding: 18px; border-radius: 20px; border: 1.5px solid var(--trait); background: var(--papier); cursor: pointer; font: inherit; color: var(--encre); transition: transform .15s, box-shadow .2s, border-color .2s; }
.tuile-type:hover { transform: translateY(-2px); box-shadow: var(--ombre); border-color: var(--accent-clair); }
.tuile-type[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-pale); }
.tuile-type b { font-size: 1.6rem; } .tuile-type strong { font-size: 1.08rem; } .tuile-type span { color: var(--encre-2); font-size: .92rem; }
.mdp { display: flex; gap: 8px; align-items: center; } .mdp input { flex: 1; min-width: 0; }
.liens-bas { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 16px; }
.lien-geant { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 14px; border-radius: 18px; background: var(--papier); border: 1.5px dashed var(--accent-clair); margin: 18px 0; }
.lien-geant code { flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; font-size: 1rem; }
.lien-geant.petit { margin: 10px 0 0; padding: 10px; } .lien-geant.petit code { font-size: .82rem; flex-basis: 160px; }
.trois-actions { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 14px; margin-top: 18px; }
@media (max-width: 820px) { .trois-actions { grid-template-columns: 1fr; } }
.action-carte { display: block; padding: 18px; border-radius: 20px; background: var(--papier); box-shadow: var(--ombre); color: var(--encre); text-decoration: none; min-width: 0; }
.action-carte h3 { margin: 0 0 6px; } .action-carte p { margin: 4px 0; }
a.action-carte:hover { box-shadow: var(--ombre-forte); } .action-carte.inactive { opacity: .6; cursor: default; }
.grand-chiffre { font-family: var(--titre); font-size: 2.6rem; font-weight: 600; line-height: 1; }
.etat-vide { display: flex; gap: 16px; align-items: flex-start; padding: 8px 0; } .etat-vide > b { font-size: 2.4rem; line-height: 1; }
.bandeau-securite { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 12px 16px; border-radius: 16px; background: var(--accent-pale); border: 1px solid var(--accent-clair); margin-bottom: 14px; }
/* Nouvelle version disponible (boucle de test en direct) : bandeau discret en haut, un toucher pour continuer. */
.maj-dispo { position: fixed; z-index: 44; left: 16px; right: 16px; margin-inline: auto; top: calc(var(--haut-barre, 63px) + 1px + env(safe-area-inset-top, 0px)); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; width: fit-content; max-width: calc(100vw - 32px); padding: 8px 8px 8px 18px; text-align: center; border-radius: var(--r-pilule); background: var(--encre); color: var(--sur-encre); box-shadow: var(--ombre-forte); font-weight: 600; font-size: .92rem; animation: fondu var(--d-moyen) var(--sortie) both; }
@media (max-width: 560px) { .maj-dispo { border-radius: var(--r); padding: 12px; } }
.maj-dispo .btn { padding: 9px 16px; font-size: .88rem; }
.copie-manuelle { width: 100%; padding: 12px; border-radius: 12px; border: 1.5px solid var(--trait); font: inherit; }
@media (max-width: 420px) { .etapes-creation { gap: 6px; } .etapes-creation li { font-size: .8rem; padding: 4px 10px 4px 4px; gap: 6px; } .etapes-creation li span { width: 22px; height: 22px; } }

/* ───── Vue globale : conversations avec Sol ───── */
.filtres-sol { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.ligne-conv { cursor: pointer; } .ligne-conv:hover td { background: #fff7ee; }
.badge-sol { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: .72rem; font-weight: 600; background: #fdecea; color: #a8321e; margin: 1px; }
.badge-sol.latence, .badge-sol.lecture { background: #fff3d6; color: #8a5a00; }
.relecture { display: grid; gap: 6px; max-height: 60vh; overflow: auto; padding: 4px; }
.rel { font-size: .86rem; } .rel p { margin: 2px 0 0; } .rel small { color: var(--encre-3); }
.rel.sol { justify-self: start; max-width: 85%; background: #fff; border: 1.5px solid #ffd9ba; border-radius: 14px 14px 14px 4px; padding: 7px 11px; }
.rel.moi { justify-self: end; max-width: 85%; background: #2b1a0e; color: #fff; border-radius: 14px 14px 4px 14px; padding: 7px 11px; } .rel.moi small { color: #e8d8c8; }
.rel.outil { font-family: ui-monospace, monospace; font-size: .76rem; color: #6b4b1f; background: #fff8ec; border-radius: 8px; padding: 3px 8px; }
.rel.ok { font-size: .76rem; color: #1e6b3a; } .rel.ko { font-size: .78rem; color: #a8321e; } .rel.ecran { font-size: .76rem; color: var(--encre-3); text-align: center; border-top: 1px dashed #eadfd2; padding-top: 4px; }
/* ───── Vue globale : suivi en direct (qui fait quoi, où ça coince) ───── */
.point-direct { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #2fa35b; margin-right: 8px; vertical-align: middle; box-shadow: 0 0 0 0 rgb(47 163 91 / .5); animation: point-direct 1.8s ease-out infinite; }
@keyframes point-direct { 70% { box-shadow: 0 0 0 9px rgb(47 163 91 / 0); } 100% { box-shadow: 0 0 0 0 rgb(47 163 91 / 0); } }
@media (prefers-reduced-motion: reduce) { .point-direct { animation: none; } }
.badge-sol.direct { background: #e3f5ea; color: #1e6b3a; }
.fil-activite { list-style: none; margin: 0; padding: 0; max-height: 340px; overflow: auto; display: grid; gap: 2px; }
.fil-activite li { font-size: .86rem; padding: 5px 6px; border-radius: 8px; overflow-wrap: anywhere; }
.fil-activite li[data-pid], .fil-activite li[data-session] { cursor: pointer; } .fil-activite li[data-pid]:hover, .fil-activite li[data-session]:hover { background: #fff7ee; }
.fil-activite small { display: inline-block; min-width: 82px; }
.tableau-ecrans tr.alerte td { background: #fff1e3; } .tableau-ecrans .mini-barre { width: 120px; }
.rel.remarque { background: #fff6d6; border: 1.5px solid #f1c75b; border-radius: 10px; padding: 6px 10px; } .rel.remarque small { color: #7a5600; }
.remarque-fil { font-weight: 600; color: #7a5600; } .carte-remarques { border-left: 5px solid #f1c75b; }
.direct-fiche { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-bottom: 14px; }
.ecran-large code, .liste-liens code { overflow-wrap: anywhere; word-break: break-word; }

/* Parcours par profil (2026-10-12) : accueil avec aiguillage, invitation dans son cadre, garder ses résultats, suites */
.aiguillage { flex-wrap: wrap; }
.liens-accueil { margin-top: 10px; color: var(--encre-2); }
.titre-moments { font-size: var(--t-2); margin: 0 0 12px; }
.ce-qui-part { margin-top: 14px; text-align: left; }
.cadre-invite { margin: 0; }
.garder-resultats { margin-top: 16px; border: 1.5px solid var(--soleil-clair); }
.garder-resultats h3 { margin-top: 0; }
.suites { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-top: 10px; }
.suite { display: grid; gap: 4px; text-align: left; padding: 14px; border-radius: var(--r-s); border: 1.5px solid var(--trait); background: var(--papier); color: var(--encre); text-decoration: none; font: inherit; cursor: pointer; transition: border-color var(--d-micro); }
.suite:hover, .suite:focus-visible { border-color: var(--soleil); }
.suite .bloc-e { font-size: 1.4rem; }
/* Bulles de présentation de Sol : Suivant, Passer, Parler ou Lire (parcours par profil, section 3) */
.sol-bulle-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.sol-bulle-actions[hidden] { display: none; }
.sol-bulle-actions .btn { padding: 8px 14px; font-size: .9rem; }

/* Choix de l'invité : aperçu exact, deux boutons de même poids (parcours par profil v3, règle 2) */
.apercu-partage { border: 1.5px solid var(--soleil-clair); }
.apercu-partage h3 { margin-top: 0; }
.cinq-apercu { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.choix-partage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.choix-partage .btn { width: 100%; }
@media (max-width: 640px) { .choix-partage { grid-template-columns: 1fr; } }
/* « Qu'est-ce qui t'amène ? » : dix intentions en deux groupes (parcours par intention, livraison a) */
.aiguillage-intentions { display: grid; gap: 18px; margin: 34px 0 10px; }
.aiguillage-intentions .titre-moments { margin-bottom: 0; }
.groupe-intentions h3 { font-size: var(--t-3); margin: 0 0 10px; }
.cartes-intention { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.carte-intention { position: relative; display: grid; gap: 4px; align-content: start; text-align: left; padding: 14px; border-radius: var(--r-s); border: 1.5px solid var(--trait); background: var(--papier); color: var(--encre); font: inherit; cursor: pointer; transition: border-color var(--d-micro), transform var(--d-micro); }
.carte-intention:hover:not(:disabled), .carte-intention:focus-visible { border-color: var(--soleil); transform: translateY(-1px); }
.carte-intention .bloc-e { font-size: 1.5rem; margin: 0; }
.carte-intention:disabled { cursor: default; opacity: .6; }
.carte-intention .bientot { position: absolute; top: 10px; right: 10px; font-style: normal; font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: var(--papier-2); color: var(--encre-2); }
@media (max-width: 640px) { .cartes-intention { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mot-invitant { margin: 12px 0 0; padding: 12px 16px; border-left: 4px solid var(--soleil); background: var(--papier); border-radius: 0 var(--r-s) var(--r-s) 0; }
.mot-invitant p { margin: 0; font-style: italic; }
.mot-invitant cite { display: block; margin-top: 4px; font-style: normal; font-size: .85rem; color: var(--encre-2); }
/* Lancer « Mon équipe » (parcours par intention, livraison b) */
.charte ul, .charte-invite ul { margin: 8px 0; padding-left: 20px; }
.charte li, .charte-invite li { margin: 4px 0; }
.charte-invite { margin-top: 10px; text-align: left; }
.message-pret { margin: 10px 0 0; padding: 10px 12px; border-radius: var(--r-s); background: var(--papier-2); }
.bulle-apercu { margin: 6px 0; padding: 10px 14px; border: 2px solid #2b1a0e; border-radius: 18px; background: #fff; color: var(--encre); font-size: .92rem; }
.ligne-espace-org { display: grid; gap: 2px; text-align: left; width: 100%; font: inherit; cursor: pointer; }
.mot-libre { margin-top: 8px; }
fieldset.champ { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.champ legend { padding: 0; margin-bottom: 8px; font-weight: 600; font-size: .92rem; }

/* ───────────── Ordinateur : un écran tient dans la fenêtre ─────────────
   Demande de Victor du 12/10 : sur ordinateur, on ne doit pas monter et descendre. Les tailles suivent la
   hauteur de la fenêtre (clamp avec vh), les marges se resserrent, les diapositives remplissent l'espace
   entre la barre du haut et leur barre Précédent / Suivant, qui reste dans le flux (elle ne recouvre rien).
   Un écran long par nature (rapport, listes) garde son action principale visible, collée en bas.
   Le téléphone (moins de 761 px de large) garde son comportement : il défile. Test : npm run e2e:ecrans. */
@media (min-width: 761px) {
  :root {
    --t-hero: clamp(2.2rem, min(1.6rem + 4.2vw, .8rem + 5vh), 4.4rem);
    --t-1: clamp(1.7rem, min(1.4rem + 2.4vw, .7rem + 3.2vh), 3rem);
    --t-2: clamp(1.35rem, min(1.2rem + 1.2vw, .7rem + 2vh), 2rem);
    --vide: clamp(8px, 1.8vh, 18px); /* espacement vertical courant */
  }
  main { padding-top: clamp(12px, 3vh, 32px); }
  .pile > * + * { margin-top: var(--vide); }
  .carte { padding: clamp(14px, 2.4vh, 24px) clamp(16px, 2vw, 24px); }
  .actions { margin-top: clamp(14px, 3vh, 32px); }
  .liste-cartes .carte, .vs .carte, .equation .carte { padding: clamp(12px, 2vh, 22px); }
  .bloc-e { font-size: clamp(1.4rem, 3.4vh, 2rem); }

  /* Diapositives : l'écran prend la hauteur visible ; la diapo se centre, la barre suit dans le flux. */
  .ecran:has(> .diapo) { display: flex; flex-direction: column; min-height: calc(100dvh - var(--haut-barre, 63px) - clamp(12px, 3vh, 32px) - clamp(12px, 2.4vh, 32px) - 2px); }
  .ecran:has(> .diapo) > .diapo { flex: 1 0 auto; min-height: 0; }
  .diapo-nav { position: static; margin-top: clamp(12px, 2.4vh, 26px); }
  .ecran:has(> .diapo) > p:last-child { margin: 6px 0 0 !important; }
  .ecran:has(> .diapo) > p:last-child .btn.lien { padding-block: 6px; }
  /* Citation : une colonne large (la largeur se comptait en ch du parent, d'où trois mots par ligne). */
  .citation { max-width: min(100%, 46rem); }
  .citation blockquote { font-size: clamp(1.45rem, .5rem + 3.4vh, 2.5rem); line-height: 1.22; }
  .citation blockquote::before { font-size: clamp(2.6rem, 6vh, 4rem); }
  .citation cite { margin-top: clamp(10px, 2.4vh, 24px); }
  .flip { height: clamp(160px, 30vh, 250px); }
  .equation .op { font-size: clamp(1.6rem, 4vh, 2.2rem); }

  /* Partie 2 et accueil : Sol plus petit quand la fenêtre est basse. */
  .hero { padding: clamp(8px, 2.4vh, 36px) 0 clamp(8px, 1.6vh, 16px); }
  .hero-sol { padding-top: clamp(60px, 11vh, 160px); }
  .sol-place { width: clamp(120px, 20vh, 200px); height: clamp(120px, 20vh, 200px); }
  .moments { margin-top: clamp(14px, 3vh, 34px); }
  .moment-image { height: clamp(64px, 10vh, 92px); }
  .moment { padding: clamp(10px, 1.8vh, 16px); }
  .moment h3 { margin-top: clamp(6px, 1.2vh, 12px); }
  .etape-deep { padding-block: clamp(10px, 1.6vh, 18px); }

  /* Cartes de compétences : plus de colonnes, cartes plus basses. */
  .grille-comp, .pioche { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 8px; }
  .carte-comp { padding: 8px 10px 10px; }
  .carte-comp small { padding-right: 12px; }
  .pastille-comp:not(.grande) { width: 30px; height: 30px; font-size: 1rem; margin-bottom: 2px; }
  .carte-comp strong { font-size: .86rem; letter-spacing: -.01em; hyphens: auto; }
  .carte-comp small { font-size: .76rem; line-height: 1.25; }
  .tri-tete { margin-bottom: 8px; gap: 2px; }
  .tri-tete p { margin: 0; }
  /* Tri : la grille et ses boutons à gauche, les cartes à droite ; les boutons ne recouvrent plus les cartes. */
  .ecran:has(> .tri-zone:not(.fini)) { display: grid; grid-template-columns: 250px minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 20px; align-items: start; }
  .ecran:has(> .tri-zone:not(.fini)) > .tri-tete { grid-column: 1 / -1; }
  .tri-zone:not(.fini) { display: contents; }
  .tri-zone:not(.fini) > .mini-grille-zone { grid-column: 1; grid-row: 2; position: static; }
  .tri-zone:not(.fini) > .pioche { grid-column: 2; grid-row: 2 / span 2; }
  .tri-zone:not(.fini) ~ .tri-actions { grid-column: 1; grid-row: 3; position: sticky; top: calc(var(--haut-barre, 63px) + 12px); bottom: auto; display: grid; width: 100%; margin: 14px 0 0; padding: 0; background: none; backdrop-filter: none; box-shadow: none; }
  .tri-zone:not(.fini) ~ .tri-actions .btn { width: 100%; padding-inline: 14px; }
  .tri-zone:not(.fini) ~ .tri-actions .btn.grand { order: -1; }
  /* Paires : les deux phrases suivent aussi la hauteur. */
  .paire { margin-top: clamp(10px, 2.2vh, 28px); gap: clamp(8px, 1.6vh, 14px); }
  .paire .cote { font-size: clamp(1.15rem, min(1rem + 1.1vw, .5rem + 2.6vh), 1.7rem); padding: clamp(14px, 2.4vh, 24px) 22px; min-height: clamp(110px, 18vh, 150px); }
  /* Échelles à cinq crans (énergie, flow actuel, moteurs) et petites cartes : plus basses quand la fenêtre l'est. */
  .choix-energie .puce, .choix-usage .puce { min-height: clamp(34px, 5.4vh, 44px); padding: clamp(4px, .8vh, 8px) 8px; font-size: clamp(.84rem, .6rem + .6vh, 1rem); }
  .choix-energie, .choix-usage { gap: clamp(6px, 1vh, 8px); }
  .carte-freq { margin-block: clamp(8px, 2.2vh, 22px); padding: clamp(12px, 2.6vh, 28px) 20px; }
  .carte-freq strong { font-size: clamp(1.25rem, .8rem + 1.4vh, 1.6rem); }
  .legende-champ { margin-bottom: clamp(4px, 1vh, 10px); }
  .question-energie .puces .puce { min-height: clamp(32px, 4.8vh, 40px); padding-block: 4px; }
  .question-energie.pile > * + * { margin-top: clamp(6px, 1.4vh, 16px); }
  .carte-moteur { padding: clamp(8px, 1.4vh, 14px) 8px; }
  .grille-moteurs.petite { flex-wrap: nowrap; }
  .grille-moteurs.petite .carte-moteur { flex: 1 1 0; min-width: 0; padding-block: clamp(6px, 1vh, 12px); }
  /* Moteurs, pourquoi : chaque raison sur une ligne, l'échelle à droite. */
  .question-energie:has([data-pq]) > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); align-items: center; gap: 14px; }
  .question-energie:has([data-pq]) .legende-champ { margin: 0; }
  .question-energie:has([data-pq]) .puce { min-height: 36px; padding: 6px 8px; font-size: .88rem; }
  /* Deep Inside : les quatre étapes sur deux colonnes. */
  .etapes-deep { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: clamp(10px, 2vh, 28px); }
  .etape-deep { grid-template-columns: 40px minmax(0, 1fr); align-items: start; }
  .etape-deep .action-etape { grid-column: 2; }
  .hero .avec-sol .hero-suite { margin-top: clamp(8px, 2vh, 28px); }
  .hero p.lead { font-size: clamp(1rem, .72rem + 1.1vh, 1.15rem); }
  .hero .avec-sol h1 { font-size: clamp(2rem, min(1.5rem + 3vw, .5rem + 4.4vh), 3.6rem); margin-block: clamp(6px, 1.4vh, 14px); }
  .action-etape .btn { padding: 9px 20px; }
  .texte-etape p { margin-top: 2px; }

  /* Écran long : l'action principale reste visible, collée en bas sur un fond de verre. */
  .ecran > .actions:last-child, .ecran > .actions:has(+ .note:last-child), .ecran > form > .actions:last-child, .hero-suite > .actions { position: sticky; bottom: 12px; z-index: 6; width: fit-content; max-width: 100%; margin-inline: auto; padding: 8px; border-radius: var(--r-pilule); background: var(--papier-verre); backdrop-filter: blur(12px); }
  .ecran > .actions.gauche:last-child { margin-inline: 0; }
}
/* Fenêtre très basse (720 px et moins) : encore un cran plus serré. */
@media (min-width: 761px) and (max-height: 740px) {
  main { padding-top: 6px; }
  .etiquette { padding: 3px 12px; }
  .tri-tete { gap: 0; margin-bottom: 6px; }
  .hero .avec-sol h1 { margin-block: 4px; }
  .moments { margin-top: 10px; }
  .grille-comp, .pioche { gap: 6px; }
  .carte-comp { padding-block: 6px 8px; }
}
/* Sol est dans la marge dès 1140 px : plus besoin de lui réserver le bas de la page. */
@media (min-width: 1140px) { main { padding-bottom: clamp(8px, 2.4vh, 32px); } }
/* Grand écran : une colonne plus large (la marge de Sol reste au-dessus de 280 px). */
@media (min-width: 1600px) { main { max-width: 1040px; } }
/* ───── Questionnaire v3 : ligne de situation au-dessus des deux réactions (wiki/specs/paires-situees.md) ───── */
.paire .situation { margin: 0; text-align: center; font-size: .92rem; color: var(--encre-2); letter-spacing: .01em; border-radius: 999px; padding: 4px 12px; justify-self: center; }
.paire .situation.nouvelle { animation: situation-eclat 1.1s var(--sortie, ease-out) 1; }
@keyframes situation-eclat { 0% { background: color-mix(in srgb, var(--soleil) 45%, transparent); color: var(--encre); } 100% { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .paire .situation.nouvelle { animation: none; font-weight: 600; } }

/* ───── Votre duo d'associés (app/js/screens/associes.js) : quatre onglets courts, chacun tient dans la fenêtre ───── */
.duo-propose { max-width: 640px; margin: 0 auto 18px; border-left: 4px solid var(--soleil); }
.duo-propose h3 { margin: 0 0 6px; }
.duo-propose .actions { margin-top: 10px; }
.onglets-duo, .choix-autre { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.onglets-duo { align-items: center; justify-content: space-between; }
.onglets-duo [role="tablist"] { display: flex; flex-wrap: wrap; gap: 8px; }
.onglets-duo [role="tab"] { border: 1.5px solid var(--trait); background: var(--papier); border-radius: 99px; padding: 8px 14px; font-weight: 700; font-size: .92rem; color: var(--encre); }
.onglets-duo [role="tab"][aria-selected="true"] { background: var(--degrade); color: var(--sur-soleil); border-color: transparent; }
.duo-grille { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.duo-grille.deux { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.duo-grille .carte { margin: 0; }
.duo-grille h3 { margin: 0 0 6px; font-size: 1.05rem; }
.duo-grille p { margin: 4px 0; }
.question-duo { margin: 10px 0 0; padding: 6px 12px; border-left: 3px solid var(--soleil); font-style: italic; font-size: .95rem; }
.vision-texte { white-space: pre-line; }
.sujets-duo { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
.sujet-duo { border: 1px solid var(--trait); border-radius: var(--r); background: var(--papier); padding: 8px 14px; }
.sujet-duo li { font-size: .93rem; }
.sujet-duo summary { cursor: pointer; }
.sujet-duo ul { margin: 6px 0 0; padding-left: 20px; }
.sujet-duo.autres { margin-top: 8px; }
.sujet-duo.autres .sujet-duo { margin-top: 8px; }
#duo-vision { width: 100%; }
.talents-duo { display: inline; font-weight: 600; }
.talents-duo .badge { width: 22px; height: 22px; font-size: .8rem; vertical-align: -5px; }
/* Bulle de Sol repliée en une ligne (place manquante : elle ne couvre jamais un élément cliquable) ; la toucher ouvre le tiroir. */
.sol-bulle.une-ligne { padding: 8px 14px; border-radius: 18px; }
.sol-bulle.une-ligne p { min-height: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sol-bulle.une-ligne .sol-suite, .sol-bulle.une-ligne .sol-bulle-actions { display: none; }
/* Pastille de Sol : sa bulle s'est fermée faute de place ; la toucher ouvre le tiroir. Zone de 28 px, point de 14 px. */
.sol-pastille { position: fixed; left: 0; top: 0; z-index: 46; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; transition: transform var(--duree) var(--vol); }
.sol-pastille::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--soleil-texte); box-shadow: 0 0 0 2.5px #fff, 0 2px 6px rgb(120 60 10 / .35); }
.avatar[data-mode="cache"] .sol-pastille, .avatar.tiroir-ouvert .sol-pastille { display: none; }
/* ───── Champs dans la direction artistique (retours de Victor du 2026-10-12, nuit) ─────
   Seulement la forme : même arrondi, même épaisseur de bord et même anneau de focus pour tous les champs de
   l'app (ceux hors de .champ aussi : garder ses résultats, coach, codes...), sans couleur ni dessin en plus.
   :where() : aucune priorité, les règles déjà écrites pour un champ précis gardent la main. */
:where(#app, .modale) :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="hidden"], [type="file"], [type="color"]), select, textarea) {
  min-height: 48px; padding: 12px 16px; border-radius: var(--r-s); border: 1.5px solid var(--trait); background-color: var(--papier); color: var(--encre);
  transition: border-color var(--d-micro), box-shadow var(--d-micro);
}
:where(#app, .modale) :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="hidden"]), select, textarea):hover { border-color: color-mix(in srgb, var(--encre-3) 55%, var(--trait)); }
:where(#app, .modale) :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="hidden"]), select, textarea):focus-visible,
:where(#app, .modale) :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="hidden"]), select, textarea):focus { outline: none; border-color: var(--encre); box-shadow: 0 0 0 4px var(--ciel-peche); }
:where(#app, .modale) :where(input, textarea)::placeholder { color: var(--encre-3); opacity: 1; }
/* Nombre : plus de petites flèches du navigateur ; « moins » et « plus » en boutons ronds de la même forme (champs.js). */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.pas-a-pas { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; }
.pas-a-pas input[type="number"] { width: 6.5em; min-width: 0; text-align: center; font-variant-numeric: tabular-nums; }
.champ .pas-a-pas input[type="number"] { width: 6.5em; }
.pas { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--trait); background: var(--papier); color: var(--encre); font-size: 1.25rem; font-weight: 600; line-height: 1; display: grid; place-items: center; padding: 0; cursor: pointer; transition: border-color var(--d-micro), transform var(--d-micro); }
.pas:hover { border-color: var(--encre-3); }
.pas:active { transform: scale(.94); }
.pas:focus-visible { outline: none; border-color: var(--encre); box-shadow: 0 0 0 4px var(--ciel-peche); }
/* Curseurs hors questionnaire (heures du module Conditions...) : piste fine et arrondie, poignée ronde, comme la ligne d'horizon des paires, sans le dégradé. */
:where(#app) input[type="range"]:not(.curseur input) { -webkit-appearance: none; appearance: none; height: 32px; padding: 0; border: 0; border-radius: 0; background: transparent; cursor: pointer; }
:where(#app) input[type="range"]:not(.curseur input)::-webkit-slider-runnable-track { height: 4px; border-radius: 99px; background: var(--trait); }
:where(#app) input[type="range"]:not(.curseur input)::-moz-range-track { height: 4px; border-radius: 99px; background: var(--trait); }
:where(#app) input[type="range"]:not(.curseur input)::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -10px; border: 3px solid var(--papier); border-radius: 50%; background: var(--soleil); box-shadow: var(--ombre-1); }
:where(#app) input[type="range"]:not(.curseur input)::-moz-range-thumb { width: 24px; height: 24px; border: 3px solid var(--papier); border-radius: 50%; background: var(--soleil); box-shadow: var(--ombre-1); }
:where(#app) input[type="range"]:not(.curseur input):focus-visible { outline: none; }
:where(#app) input[type="range"]:not(.curseur input):focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--ciel-peche); }
/* Archétype : « Entre les deux ? Dis pourquoi » (nuance que Sol et le coach prennent en compte). */
.nuance-arch { max-width: 560px; margin: 10px auto 0; font-size: .9rem; }
.nuance-arch summary { cursor: pointer; text-align: center; color: var(--accent-fonce); font-weight: 600; }
.nuance-arch textarea { width: 100%; margin-top: 8px; }
/* Archétype : « ton tableau » (14 lignes, 0 à 5), lignes hésitantes marquées ; « Ce résultat te ressemble ? ». */
.tableau-arch { display: grid; gap: 10px; }
.ligne-tab { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px 12px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--papier-verre, #fff); box-shadow: var(--ombre-1); }
.ligne-tab .lt-theme { grid-column: 1 / -1; font-weight: 700; }
.ligne-tab .lt-a, .ligne-tab .lt-b { font-size: .88rem; line-height: 1.35; }
.ligne-tab .lt-b { text-align: right; }
.ligne-tab .nuance-arch { grid-column: 1 / -1; margin: 4px 0 0; max-width: none; }
.ligne-tab.hesite { box-shadow: var(--ombre-1), inset 0 0 0 2px #ffd2ad; }
.pastille-hesite { font-size: .74rem; font-weight: 600; color: var(--accent-fonce); background: #fff1e4; border-radius: 99px; padding: 1px 8px; margin-left: 6px; }
.lt-crans { display: flex; gap: 4px; }
.lt-crans button, .crans-ressemble button { min-width: 34px; padding: 6px 8px; border: 0; border-radius: 10px; background: #fff; color: #2b1a0e; box-shadow: inset 0 0 0 1.5px #e6dccf; font: inherit; font-weight: 600; cursor: pointer; }
.lt-crans button[aria-pressed="true"], .crans-ressemble button[aria-pressed="true"] { background: var(--accent); color: #fff; box-shadow: none; }
.crans-ressemble { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
@media (max-width: 640px) { .ligne-tab { grid-template-columns: 1fr; } .ligne-tab .lt-b { text-align: left; } .lt-crans { justify-content: space-between; } }
/* Accueil, parcours en cours : « Et avec d'autres ? » en une ligne sous « Reprendre ». */
.avec-autres-compact { margin: 6px 0 0; line-height: 1.5; }
.avec-autres-compact .lien { padding: 0; }
/* Ordinateur : le tableau de l'archétype sur une ligne par phrase (thème, A, crans, B), pour voir le plus de lignes d'un coup. */
@media (min-width: 1100px) {
  .tableau-arch { gap: 6px; }
  .ligne-tab { grid-template-columns: minmax(110px, .7fr) minmax(0, 1.2fr) auto minmax(0, 1.2fr); gap: 4px 12px; padding: 6px 12px; }
  .ligne-tab .lt-theme { grid-column: auto; font-size: .84rem; line-height: 1.25; }
  .ligne-tab .lt-a, .ligne-tab .lt-b { font-size: .82rem; line-height: 1.3; }
  .ligne-tab .lt-crans button { min-width: 30px; padding: 5px 6px; }
}

/* ───── Le matin (wiki/specs/point-du-jour.md, section 0 ; recherche, section 5.2) ─────
   Plein écran jaune orangé (de --ciel-or vers --soleil-clair, avec un or intermédiaire), grain de papier, un quart de
   Sol qui se lève en bas à droite (immobile si l'appareil demande moins d'animation). Texte toujours sombre, même en
   mode nuit : contrastes 14,5 sur l'or clair, 11,4 sur l'or moyen, 8,8 sur l'orange (calculés). La barre et Sol
   flottant sont cachés : Sol se tait le matin. */
body.en-matin .barre, body.en-matin .avatar, body.en-matin .maj-dispo { display: none !important; }
.ecran:has(> .matin) { animation: none; transform: none; } /* une transformation piégerait le plein écran fixe */
.matin {
  --or-matin: #FFC94D;
  --encre: #1F1915; --encre-2: #574D46; --encre-3: #6E645C; --papier: #FFFFFF; --trait: #EADFD3; --sur-encre: #FFF8F1; --ciel-peche: #FFE8D6;
  position: fixed; inset: 0; z-index: 40; overflow: hidden; color: var(--encre);
  display: grid; align-items: center; justify-items: start;
  padding: clamp(20px, 6vh, 72px) clamp(20px, 8vw, 120px);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .26 0 0 0 0 .12 .11 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"), linear-gradient(135deg, var(--ciel-or) 0%, var(--or-matin) 55%, var(--soleil-clair) 100%);
}
.matin-contenu { position: relative; z-index: 1; width: min(100%, 44rem); display: grid; gap: clamp(12px, 2.4vh, 22px); }
.matin-bonjour { margin: 0; font-family: var(--titre); font-weight: 600; font-variation-settings: "SOFT" 100; font-size: clamp(1.25rem, .8rem + 1.6vh, 1.8rem); }
.matin-phrase { margin: 0; font-family: var(--titre); font-weight: 500; font-variation-settings: "SOFT" 100; font-size: clamp(1.45rem, .6rem + 2.4vh + 1vw, 2.6rem); line-height: 1.25; text-wrap: pretty; max-width: 26ch; }
.matin-intention { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.matin-intention .btn.lien, .matin-meteos .btn.lien { color: var(--encre); }
.matin-mienne { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; max-width: 34rem; }
.matin-mienne[hidden] { display: none; }
.matin-mienne textarea { min-height: 52px; resize: vertical; }
.matin-garde, .matin-reaction { margin: 0; font-weight: 600; color: var(--encre-2); }
.matin-meteo p { margin: 0 0 8px; font-weight: 600; }
.matin-meteos { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.meteo-mini { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 12px; border-radius: var(--r-pilule); border: 1.5px solid color-mix(in srgb, var(--encre) 18%, transparent); background: color-mix(in srgb, var(--papier) 70%, transparent); color: var(--encre); font: inherit; font-weight: 600; font-size: .92rem; cursor: pointer; }
.meteo-mini:hover { background: var(--papier); }
.meteo-mini span { font-size: 1.1rem; }
.matin-actions { margin-top: clamp(4px, 1vh, 10px); }
.matin .btn.grand { background: var(--encre); color: var(--sur-encre); box-shadow: 0 12px 26px -12px rgb(31 25 21 / .55); }
.matin-securite { max-width: 36rem; background: color-mix(in srgb, var(--papier) 82%, transparent); border-radius: var(--r); padding: 18px 20px; }
.matin-securite h2 { margin-top: 0; font-size: 1.3rem; }
.matin-securite ul { margin: 8px 0; padding-left: 20px; }
.matin-securite a { color: var(--encre); font-weight: 700; }
/* Un quart de Sol, centré sur le coin bas droit : il monte de quelques pixels en 2 secondes, son halo s'élargit. */
.matin-sol { position: absolute; right: 0; bottom: 0; width: clamp(360px, 84vmin, 900px); aspect-ratio: 1; transform: translate(42%, 42%); pointer-events: none; animation: matin-lever 2s cubic-bezier(.2, .7, .2, 1) both; }
.matin-sol svg { width: 100%; height: 100%; display: block; overflow: visible; }
.matin-sol .sol-halo { transform-origin: 0 0; animation: matin-halo 2.4s ease-out both; }
@keyframes matin-lever { from { transform: translate(42%, 52%); } }
@keyframes matin-halo { from { transform: scale(.82); opacity: .4; } }
@media (prefers-reduced-motion: reduce) { .matin-sol, .matin-sol .sol-halo { animation: none; } }
/* Téléphone : le texte en haut, le soleil en bas à droite sans le couvrir. */
@media (max-width: 760px) {
  .matin { align-items: start; padding: max(28px, env(safe-area-inset-top)) 20px 0; overflow-y: auto; } /* filet : une phrase plus longue fait défiler au lieu de couper */
  .matin-contenu { padding-bottom: 96px; }
  .matin-sol { width: 340px; transform: translate(45%, 45%); }
  @keyframes matin-lever { from { transform: translate(45%, 55%); } }
}

/* Vue globale : une carte par vraie personne, en 3 lignes (lot A du 2026-10-16) */
.cartes-personnes { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; }
.carte-personne { background: var(--papier); border: 1px solid var(--trait); border-radius: 14px; padding: 10px 14px; cursor: pointer; min-width: 0; }
.carte-personne:hover, .carte-personne:focus-visible { background: var(--papier-2); }
.carte-personne p { margin: 0; line-height: 1.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .9rem; }
.carte-personne .pastille-talent { margin-right: 4px; }
.plus-personnes { margin-top: 8px; } .plus-personnes > summary { list-style: none; cursor: pointer; } .plus-personnes > summary::-webkit-details-marker { display: none; }
.plus-personnes .cartes-personnes { margin-top: 10px; }
.outils-admin { position: relative; } .outils-admin > summary { list-style: none; } .outils-admin > summary::-webkit-details-marker { display: none; }
.menu-outils { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: min(420px, calc(100vw - 32px)); display: grid; gap: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.12); }
.liste-essais { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; } .liste-essais li { cursor: pointer; padding: 4px 6px; border-radius: 8px; } .liste-essais li:hover { background: #fff7ee; }
@media (max-width: 600px) { .cartes-personnes { grid-template-columns: 1fr; } .menu-outils { position: fixed; left: 16px; right: 16px; top: auto; width: auto; } }

/* Sol à une coupure (sol-moments.js, lot D3) : la paire attend pendant sa question, le minuteur aussi. */
#app.sol-coupure .paire { display: none; }
.recits blockquote { margin: 0; padding: 8px 12px; border-left: 3px solid #ffd9ba; background: #fffaf5; border-radius: 0 10px 10px 0; white-space: pre-wrap; }
.sol-bulle-actions .lien.petit { font-size: .8rem; flex-basis: 100%; }
/* Jamais un nom de talent seul (lot D4 du 2026-10-16) : sa ligne de définition dessous */
.liste-talents { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 8px; }
.liste-talents li { display: flex; gap: 10px; align-items: flex-start; }
.liste-talents li > span { display: grid; gap: 1px; min-width: 0; }
.liste-talents small { color: var(--encre-2); font-size: .86rem; line-height: 1.35; }
.legende-top5 { max-width: 640px; margin: 14px auto 0; text-align: left; }
.petale .ligne-talent { display: block; margin: 6px 0 4px; font-size: .8rem; line-height: 1.3; color: var(--encre-2); }
.puces-def { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.puces-def .puce { display: flex; gap: 8px; align-items: flex-start; text-align: left; border-radius: var(--r-s); padding: 8px 12px; font-weight: 400; }
.puces-def .puce > span { display: grid; gap: 1px; }
.puces-def .puce strong { font-weight: 700; } .puces-def .puce small { font-size: .8rem; line-height: 1.3; color: var(--encre-2); }
.puces-def .puce .badge { margin-top: 2px; flex: none; }
.avec-quelquun-carte { margin-top: 16px; }
.cartes-avec-quelquun { margin: 12px 0; }
/* ───── Le curseur des paires (lot D1 du 2026-10-16) ─────
   Aucune position de départ : la poignée n'apparaît qu'à la première touche. Sur ordinateur, un curseur de 420 px
   au plus et les six libellés sous les crans (« Tout à fait A » ... « Tout à fait B »). */
.crans button b { font-weight: 700; }
.crans button small { display: none; }
.curseur.vide input[type="range"]::-webkit-slider-thumb { opacity: 0; box-shadow: none; }
.curseur.vide input[type="range"]::-moz-range-thumb { opacity: 0; box-shadow: none; }
.engagement { margin: 10px auto 0; max-width: 46ch; text-align: center; font-family: var(--titre); font-style: italic; font-size: clamp(1rem, .8rem + .8vh, 1.2rem); color: var(--encre-2); }
.compteur.reflexe { color: var(--soleil-texte); font-weight: 700; }
.consigne-curseur { margin: 8px auto 0; max-width: 56ch; }
.cote[role="button"] { cursor: pointer; }
.cote[role="button"]:focus-visible { outline: 3px solid var(--encre); outline-offset: 3px; }
@media (min-width: 761px) {
  .paire .curseur { width: min(100%, 420px); margin-inline: auto; }
  .paire .crans { padding: 0; gap: 4px; }
  .paire .crans button { width: auto; flex: 1 1 0; height: auto; min-height: 44px; border-radius: 12px; padding: 4px 2px; display: grid; justify-items: center; align-content: center; gap: 1px; line-height: 1.15; }
  .paire .crans button small { display: block; font-size: .7rem; font-weight: 600; }
  .paire .curseur .legende { display: none; }
  .paire .valider-q { margin-top: clamp(6px, 1.4vh, 16px); }
  .paire .consigne-curseur { margin-top: 4px; }
}

/* Test de personnalité (essai, wiki/specs/test-personnalite.md) : sept ronds, plus grands aux extrémités. */
.echelle-perso { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 18px auto 4px; max-width: 560px; }
.rond-perso { flex: none; border-radius: 50%; border: 2px solid var(--trait); background: var(--papier); cursor: pointer; transition: background var(--d-micro), transform var(--d-micro); }
.rond-perso.r3 { width: 46px; height: 46px; } .rond-perso.r2 { width: 38px; height: 38px; } .rond-perso.r1 { width: 31px; height: 31px; } .rond-perso.r0 { width: 25px; height: 25px; }
.rond-perso.oui { border-color: var(--soleil, #e8a33d); } .rond-perso.non { border-color: var(--encre-2, #667); }
.rond-perso[aria-pressed="true"].oui { background: var(--soleil, #e8a33d); } .rond-perso[aria-pressed="true"].non { background: var(--encre-2, #667); } .rond-perso[aria-pressed="true"].r0 { background: var(--trait); }
.rond-perso:hover { transform: scale(1.08); }
.bout-echelle { flex: 0 1 70px; text-align: center; }
.centre { text-align: center; }
.axe-perso + .axe-perso { margin-top: 14px; }
.axe-tete { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.axe-barre { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-weight: 700; }
.axe-piste { position: relative; flex: 1; height: 8px; border-radius: 99px; background: var(--trait); }
.axe-piste::after { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 2px; background: var(--encre-2, #667); opacity: .4; }
.axe-marque { position: absolute; top: 50%; width: 16px; height: 16px; border-radius: 50%; background: var(--soleil, #e8a33d); transform: translate(-50%, -50%); box-shadow: var(--ombre-2); }
@media (max-width: 480px) { .echelle-perso { gap: 6px; } .rond-perso.r3 { width: 38px; height: 38px; } .rond-perso.r2 { width: 32px; height: 32px; } .rond-perso.r1 { width: 27px; height: 27px; } .rond-perso.r0 { width: 22px; height: 22px; } .bout-echelle { display: none; } }

/* Mini test des couleurs (en essai, wiki/specs/mini-test-couleurs.md) */
.cercle-disc { display: block; width: 100%; max-width: 320px; margin: 0 auto 12px; color: var(--encre-2); }
.barres-disc { display: grid; gap: 8px; }
.ligne-disc { display: grid; grid-template-columns: minmax(130px, auto) 1fr 2.2em; align-items: center; gap: 10px; }
.ligne-disc b { text-align: right; }
.resultat-disc h3 { margin: 14px 0 4px; font-size: 1rem; }
/* État des lieux (app/js/screens/bilan-complet.js) */
.bilan-sources { margin: 0 0 12px; }
.bilan-pastille { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.bilan-lentille { padding-block: 14px; }
.bilan-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.bilan-tete h3 { margin: 0; font-size: 1.05rem; }
.bilan-etat { font-size: .85rem; padding: 2px 10px; border-radius: 999px; background: var(--papier-2); color: var(--encre-2); }
.bilan-etat.bilan-ok { background: #E3F4EC; color: #1E6B4A; }
.bilan-etat.bilan-contre { background: var(--accent-pale); color: var(--accent-fonce); }
.bilan-etat.bilan-vide { color: var(--encre-3); }
.bilan-piste-axe { position: relative; height: 22px; margin: 12px 6px 4px; }
.bilan-piste-axe::before { content: ""; position: absolute; inset: 10px 0 auto; height: 2px; background: var(--trait); }
.bilan-piste-axe::after { content: ""; position: absolute; left: 50%; top: 4px; width: 1px; height: 14px; background: var(--trait); }
.bilan-point { position: absolute; top: 4px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; border: 2px solid var(--papier); box-shadow: 0 0 0 1px var(--trait); }
.bilan-estimation { position: absolute; top: 0; width: 3px; height: 22px; margin-left: -1.5px; border-radius: 2px; background: var(--encre); }
.bilan-poles { display: flex; justify-content: space-between; gap: 12px; }
.bilan-poles span:last-child { text-align: right; }
.bilan-methode { margin-top: 12px; }
.preuves-perso { margin-top: 4px; color: var(--encre-2); font-style: italic; }