/* ============================================================
   Labo · Wheel of Life (mercimeuf.fr/labo/wheel-of-life/)
   Design system v5.2 : fond crème, phrases en liste séparée par
   des filets (comme la liste des notes vocales), étiquettes mono,
   titres Playfair, titres de section Inter semi-gras, boutons pleins.
   La roue reste visible pendant tout le parcours : colonne fixe sur
   ordinateur, bandeau fixe en haut sur téléphone.
   Roue neutre comme celle du carnet : disque blanc cassé, cercles
   fins de 1 à 10, un seul ton de remplissage.
   ============================================================ */
:root{
  --rv-disque:var(--offwhite);
  --rv-trait:rgba(43,43,43,.3);
  --rv-trait-fort:#2b2b2b;
  --rv-plein:rgba(43,43,43,.14);
  --rv-plein-actif:rgba(43,43,43,.28);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --rv-disque:#363533; --rv-trait:rgba(240,237,231,.28); --rv-trait-fort:#f0ede7; --rv-plein:rgba(240,237,231,.16); --rv-plein-actif:rgba(240,237,231,.32)}}
:root[data-theme="dark"]{
  --rv-disque:#363533; --rv-trait:rgba(240,237,231,.28); --rv-trait-fort:#f0ede7; --rv-plein:rgba(240,237,231,.16); --rv-plein-actif:rgba(240,237,231,.32)}

.rv{padding-block:8px calc(64px + env(safe-area-inset-bottom,0px))}
.rv-grille{display:grid;grid-template-columns:1fr;gap:0}
.rv-ecran{display:flex;flex-direction:column;gap:24px;animation:rv-fondu .45s ease-in-out}
@keyframes rv-fondu{from{opacity:0;filter:blur(6px)}to{opacity:1;filter:none}}
.rv-note{font-size:15px;line-height:1.5;color:var(--muted)}

/* ---------- La roue ---------- */
.rv-svg{display:block;width:100%;height:auto;color:var(--fg);overflow:visible}
.rv-svg .disque{fill:var(--rv-disque)}
.rv-svg .anneau{fill:none;stroke:var(--rv-trait);stroke-width:1}
.rv-svg .rayon{stroke:var(--rv-trait);stroke-width:1}
.rv-svg .plein{fill:var(--rv-plein);stroke:var(--rv-trait-fort);stroke-width:1.6;stroke-linejoin:round}
.rv-svg .plein.actif{fill:var(--rv-plein-actif)}
.rv-svg .zone{fill:none;stroke:var(--rv-trait-fort);stroke-width:2.4}
.rv-svg .cible{fill:none;stroke:var(--rv-trait-fort);stroke-width:1.6;stroke-dasharray:7 5}
.rv-svg .avant{fill:none;stroke:var(--muted);stroke-width:1.8;stroke-dasharray:1.5 5;stroke-linecap:round}
.rv-svg .chiffre{font:500 13px var(--mono);fill:var(--muted)}
.rv-svg .nom{font-family:var(--mono);font-weight:500;letter-spacing:.06em;text-transform:uppercase;fill:var(--muted)}
.rv-svg .nom.ici{fill:var(--fg);font-weight:600}

.rv-scene{display:flex;flex-direction:column;gap:16px}
.rv-scene-in{display:flex;flex-direction:column;align-items:center;gap:18px}
.rv-scene-txt{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;max-width:420px;text-align:center}
.rv-scene-nom{font:400 24px/1.1 var(--serif);letter-spacing:-.015em}
.rv-scene-nom:empty,.rv-scene-txt .mo:empty{display:none}
.rv-barre{display:block;width:100%;height:3px;border-radius:3px;background:var(--surface);overflow:hidden}
.rv-barre span{display:block;height:100%;width:0;background:var(--fg);transition:width .4s ease-in-out}
[data-etape="intro"] .rv-barre,[data-etape="resultat"] .rv-barre{display:none}
.rv-legende{display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:center;margin:0;font-size:12px;color:var(--muted)}
.rv-legende>span{display:inline-flex;align-items:center;gap:8px}
.lg{display:inline-block;width:26px}
.lg-plein{height:12px;border-radius:3px;background:var(--rv-plein);border:1.5px solid var(--rv-trait-fort)}
.lg-cible{border-top:1.6px dashed var(--rv-trait-fort)}
.lg-avant{border-top:2px dotted var(--muted)}

/* Ordinateur : deux colonnes, la roue reste fixe à gauche */
@media (min-width:960px){
  .rv-grille{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:start}
  .rv-scene{position:sticky;top:24px;padding-top:16px}
  .rv-scene .rv-svg{max-width:520px}
  .rv-flux{padding-top:24px}
  .rv-intro{min-height:60vh;justify-content:center}
}

/* Téléphone et tablette : bandeau fixe en haut avec une petite roue */
@media (max-width:959px){
  .rv-scene{position:sticky;top:0;z-index:5;margin-inline:calc(-1 * max(16px,env(safe-area-inset-left,0px)));padding:10px max(16px,env(safe-area-inset-left,0px));background:var(--bg);border-bottom:1px solid var(--line)}
  .rv-scene-in{flex-direction:row;gap:16px}
  .rv-scene .rv-svg{width:112px;flex:none}
  .rv-scene-txt{align-items:flex-start;text-align:left;max-width:none}
  .rv-scene-nom{font-size:22px}
  .rv-scene .rv-svg .nom,.rv-scene .rv-svg .chiffre{display:none}
  .rv-flux{padding-top:28px}
  /* Accueil et résultat : la roue en grand, dans le fil de la page */
  [data-etape="intro"] .rv-scene,[data-etape="resultat"] .rv-scene{position:static;border:0;padding-block:8px 0;background:none}
  [data-etape="intro"] .rv-scene-in,[data-etape="resultat"] .rv-scene-in{flex-direction:column}
  [data-etape="intro"] .rv-scene .rv-svg,[data-etape="resultat"] .rv-scene .rv-svg{width:100%;max-width:420px}
  [data-etape="intro"] .rv-scene .rv-svg .nom,[data-etape="resultat"] .rv-scene .rv-svg .nom,[data-etape="resultat"] .rv-scene .rv-svg .chiffre,[data-etape="intro"] .rv-scene .rv-svg .chiffre{display:inline}
  [data-etape="intro"] .rv-scene{order:2;padding-top:40px}
  [data-etape="intro"] .rv-scene-txt{display:none}
}
@media (min-width:600px) and (max-width:959px){.rv-scene .rv-svg{width:140px}}

/* ---------- Accueil ---------- */
.rv-intro h1{font-size:clamp(54px,7vw,92px)}
.rv-chapo{font:italic 400 clamp(21px,2.2vw,26px)/1.3 var(--serif);max-width:30ch}
.rv-intro .rv-note{max-width:52ch}

/* ---------- Un domaine ---------- */
.rv-titre{font-size:clamp(44px,5.6vw,72px)}
.rv-pc{align-self:flex-start}
.rv-phrases{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.rv-phrases.off{opacity:.35;pointer-events:none}
.rv-phrase{border-bottom:1px solid var(--line);padding-block:22px 20px}
.rv-phrase fieldset{margin:0;border:0;padding:0;min-width:0}
.rv-phrase legend{display:flex;gap:14px;align-items:baseline;padding:0;margin-bottom:18px;font-size:18px;line-height:1.4;font-weight:500}
.rv-phrase legend .mo{flex:none;color:var(--muted);font-size:12px}
.rv-cible legend{font-weight:400}

/* Échelle à points numérotés (E1) */
.rv-crans{display:flex;justify-content:space-between;position:relative;max-width:440px}
.rv-crans::before{content:"";position:absolute;left:20px;right:20px;top:50%;height:1.5px;background:var(--fg);transform:translateY(-50%)}
.rv-cran{position:relative;cursor:pointer}
.rv-cran input{position:absolute;opacity:0;width:1px;height:1px}
.rv-cran span{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:1.5px solid var(--fg);background:var(--bg);font:500 14px/1 var(--mono);transition:background .2s ease-in-out,color .2s ease-in-out}
.rv-cran:hover span{background:var(--surface)}
.rv-cran input:checked+span{background:var(--fg);color:var(--bg)}
.rv-cran input:focus-visible+span{outline:2px solid var(--fg);outline-offset:3px}
.rv-bouts{display:flex;justify-content:space-between;max-width:440px;margin-top:10px;font-size:14px;color:var(--muted)}
.rv-crans-10{max-width:none}
.rv-crans-10 .rv-cran span{width:34px;height:34px;font-size:12px}
.rv-crans-10::before{left:16px;right:16px}
@media (max-width:420px){.rv-cran span{width:38px;height:38px}.rv-crans-10 .rv-cran span{width:27px;height:27px;font-size:11px;border-width:1.2px}}

.rv-nav{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn:disabled::before{display:none}
.btn.rv-prec::after{content:none}
.btn.rv-prec::before{content:"<"}
.rv-aide{min-height:1.3em}

/* ---------- Résultat ---------- */
.rv-resultat{gap:20px}
.rv-bloc{display:flex;flex-direction:column;gap:16px;padding-top:28px;margin-top:12px;border-top:1px solid var(--line)}
.rv-bloc .sec{font-size:22px}
.rv-notes{list-style:none;margin:0;padding:0}
.rv-notes li{display:grid;grid-template-columns:1fr auto;gap:2px 16px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--line)}
.rv-notes li:first-child{padding-top:0}
.rv-notes .n{font:400 24px/1 var(--serif)}
.rv-notes .n small{font:400 12px var(--mono);color:var(--muted);margin-left:3px}
.rv-notes .ecart{grid-column:1/-1;font-size:14px;color:var(--muted)}
.rv-notes li.off{color:var(--muted)}
.rv-champ{display:flex;flex-direction:column;gap:8px;font-size:16px;font-weight:500}
.rv-champ textarea,.rv-champ input{font:400 17px/1.5 var(--sans);color:var(--fg);background:transparent;border:1px solid var(--line-strong);border-radius:var(--radius-btn);padding:12px 14px;resize:vertical;width:100%}
.rv-champ textarea:focus,.rv-champ input:focus{outline:none;border-color:var(--fg)}
.rv-champ input{min-height:48px;max-width:260px}
.rv-boutons{display:flex;flex-wrap:wrap;gap:8px}
.rv-case{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.45;cursor:pointer}
.rv-case input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--charcoal);flex:none}
.is-dark .rv-case input{accent-color:var(--cream)}
.rv-lien{border:0;background:none;padding:0;font:inherit;color:var(--fg);text-decoration:underline;cursor:pointer}

@media (prefers-reduced-motion:reduce){.rv-ecran{animation:none}}

/* Thème sombre : le bouton principal passe en crème (token action), citron au survol */
.is-dark .rv .btn.k{background:var(--cream);color:var(--charcoal)}
.is-dark .rv .btn.k::before{display:none}
.is-dark .rv .btn.k:not(:disabled):hover{background:var(--lime)}