/* --- Jetons de couleur ---------------------------------------------------
   Trois accents (violet, bleu, orange) x deux clartes (clair, sombre). Le
   choix se pose sur <html> : data-accent="purple|blue|orange" et
   data-theme="light|dark". Aucune autre regle de cette feuille n'ecrit une
   couleur en dur : tout passe par les variables ci-dessous, sinon la moitie
   de la page resterait blanche en sombre.

   Les valeurs sombres et les accents bleu/orange sont ceux de l'application
   Flutter (mobile/lib/app/theme.dart), ou chaque paire a ete verifiee au
   calcul WCAG : 4,5:1 au minimum pour le texte, dans les deux sens (encre
   sur l'accent, et accent sur le fond). */
:root{
  color-scheme:light;
  --navy:#061b3f;--navy2:#0a2a5d;
  --bg:#f7f9fc;--bg2:#fbfcff;--surface:#fff;--surface2:#fcfdff;--surface3:#f3f5f9;
  --text:#0f1f3a;--muted:#65728b;--line:#e4e8f0;--track:#eef1f5;

  /* Accent violet par defaut. --purple* restent les noms d'usage : les vues
     les citent en style en ligne, on ne les renomme pas. */
  --accent:#6648f5;--accent2:#8b66ff;--accentSoft:#f2eeff;--accentTint:#fbfaff;
  --accentHover:#cfc8ff;--accentLine:#ddd5ff;--accentLine2:#8f79ff;
  --accentRing:rgba(102,72,245,.16);--onAccent:#fff;
  --purple:var(--accent);--purple2:var(--accent2);--purpleSoft:var(--accentSoft);

  /* Aplats decoratifs : ils ne suivent pas l'accent choisi. --onVivid est
     l'encre posee dessus : blanche en clair, foncee en sombre ou les teintes
     s'eclaircissent et ne portent plus de blanc. */
  --green:#2fba68;--greenSoft:#ecf8f0;--blue:#2f7df6;--blueSoft:#eaf3ff;
  --orange:#ff8500;--orangeSoft:#fff2e3;--red:#ef4d4d;--redSoft:#ffedef;--pink:#f2306d;
  --onVivid:#fff;--warm1:#fff5e8;--warm2:#ffe0b3;--warm3:#ffead0;

  --okBg:#eaf8ef;--okText:#197744;--okLine:#ccefd9;
  --errBg:#fff0f1;--errText:#a82e39;--errLine:#ffd4d8;

  --shadow:0 10px 28px rgba(15,31,58,.07);--radius:16px;--sidebar:170px;--topbar:62px;
}

/* Les accents bleu et orange ne sont pas les --blue / --orange decoratifs :
   un accent sert a la fois de fond sous une encre blanche et de texte sur
   fond clair, ce qui impose de le foncer pour tenir dans les deux sens. */
[data-accent="blue"]{
  --accent:#1d63d2;--accent2:#2a72dc;--accentSoft:#eaf3ff;--accentTint:#f8fbff;
  --accentHover:#bcd8ff;--accentLine:#c5dcfb;--accentLine2:#5b9ae8;
  --accentRing:rgba(29,99,210,.18);
}
[data-accent="orange"]{
  --accent:#a84800;--accent2:#b85200;--accentSoft:#fff2e3;--accentTint:#fffaf4;
  --accentHover:#ffd7ab;--accentLine:#f6d8ba;--accentLine2:#d98b3f;
  --accentRing:rgba(168,72,0,.18);
}

[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0a1526;--bg2:#0c1930;--surface:#12203a;--surface2:#16253f;--surface3:#1a2941;
  --text:#e8edf6;--muted:#aab5c9;--line:#24334f;--track:#1d2c46;
  --accent:#a78bfa;--accent2:#c4b1ff;--accentSoft:#241d44;--accentTint:#191b33;
  --accentHover:#d6c8ff;--accentLine:#3a2f66;--accentLine2:#7c5cf0;
  --accentRing:rgba(167,139,250,.28);--onAccent:#0a1526;
  --green:#4ade80;--greenSoft:#12301f;--blue:#7fb2ff;--blueSoft:#152a47;
  --orange:#ffb259;--orangeSoft:#33230f;--red:#ff8b8b;--redSoft:#3a1d22;--pink:#ff6b9d;
  --onVivid:#0f1f3a;--warm1:#2b1e0e;--warm2:#463014;--warm3:#3a2712;
  --okBg:#12301f;--okText:#7ee2a8;--okLine:#1e4a32;
  --errBg:#3a1d22;--errText:#ffb3b3;--errLine:#5a2b33;
  --shadow:0 10px 28px rgba(0,0,0,.35);
}
[data-theme="dark"][data-accent="blue"]{
  --accent:#7fb2ff;--accent2:#a8caff;--accentSoft:#152a47;--accentTint:#101f36;
  --accentHover:#cfe2ff;--accentLine:#23395c;--accentLine2:#5b8fd6;
  --accentRing:rgba(127,178,255,.28);
}
[data-theme="dark"][data-accent="orange"]{
  --accent:#ffb259;--accent2:#ffcb8f;--accentSoft:#33230f;--accentTint:#211c14;
  --accentHover:#ffd9ac;--accentLine:#4a3418;--accentLine2:#c98a41;
  --accentRing:rgba(255,178,89,.28);
}
*{box-sizing:border-box}
html{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;background:var(--bg);color:var(--text);font-size:16px}
body{margin:0;background:linear-gradient(180deg,var(--bg2) 0,var(--bg) 100%);min-height:100vh}
button,input,select,textarea{font:inherit}button{cursor:pointer}a{text-decoration:none;color:inherit}img{max-width:100%;display:block}
/* La regle ci-dessus est une regle d'auteur : elle l'emporte sur le
   [hidden]{display:none} de la feuille du navigateur. Sans ce rappel,
   une image marquee hidden reste affichee, avec son icone de fichier
   manquant — visible sur la photo d'etape, l'apercu du composeur et la
   photo d'ensemble tant qu'aucun fichier n'est choisi. */
[hidden]{display:none!important}.hidden{display:none!important}
.topbar{height:var(--topbar);position:sticky;top:0;z-index:50;background:linear-gradient(90deg,var(--navy),#071f47);color:#fff;display:flex;align-items:center;padding:0 28px;gap:32px;box-shadow:0 1px 0 rgba(255,255,255,.06)}
.brand{display:flex;align-items:center;gap:10px;min-width:max-content}.logo{width:34px;height:34px;border-radius:50%;background:#fff;position:relative;box-shadow:inset 0 0 0 2px rgba(255,255,255,.65)}
.logo:before{content:"";position:absolute;left:15px;top:2px;width:4px;height:30px;background:linear-gradient(#4f8fff,#5c43f5);border-radius:4px}.logo:after{content:"";position:absolute;left:11px;top:-5px;width:12px;height:5px;border-radius:3px;background:#fff}
.brand strong{font-size:20px;letter-spacing:-.02em}.topnav{display:flex;align-items:center;gap:28px;font-size:14px;font-weight:650;flex:1}.topnav a{opacity:.96}.topnav a:hover{opacity:1;color:#cfc8ff}
.top-actions{display:flex;align-items:center;gap:14px}.lang{font-size:13px;opacity:.95}
.btn-login{background:linear-gradient(135deg,var(--purple),var(--purple2));border:none;color:var(--onAccent);padding:10px 15px;border-radius:9px;font-weight:700;font-size:12px}.mobile-menu-btn{display:none;background:transparent;border:0;color:white;font-size:24px;padding:4px}
.app-shell{display:grid;grid-template-columns:var(--sidebar) 1fr;min-height:calc(100vh - var(--topbar))}/* Le menu a une hauteur fixe : il doit donc defiler tout seul, sinon les
   derniers outils deviennent inatteignables des que la fenetre est basse —
   un telephone en paysage, ou un portable a petit ecran.
   Deux hauteurs de suite : dvh suit les barres du navigateur mobile qui
   apparaissent et disparaissent, vh sert de repli la ou dvh est inconnu. */
.sidebar{background:var(--surface);border-right:1px solid var(--line);padding:20px 12px;position:sticky;top:var(--topbar);height:calc(100vh - var(--topbar));height:calc(100dvh - var(--topbar));display:flex;flex-direction:column;z-index:40;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
/* Sans cela le conteneur flex ecraserait les liens au lieu de les faire
   defiler, et les cibles tactiles passeraient sous les 44 px. */
.side-nav{display:grid;gap:8px;flex:0 0 auto}.side-link{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:10px;color:var(--text);font-size:12px;font-weight:650}.side-link .ico{font-size:20px;width:24px;text-align:center}.side-link:hover,.side-link.active{background:var(--purpleSoft);color:var(--purple);outline:1px solid var(--accentLine)}
.side-cta{margin-top:auto;flex:0 0 auto;padding:18px 12px;border-radius:14px;background:linear-gradient(180deg,var(--accentSoft),var(--accentTint));border:1px solid var(--accentLine);text-align:center}.side-cta strong{display:block;color:var(--purple);font-size:12px;margin:0 0 7px}.side-cta p{font-size:10px;line-height:1.45;color:var(--muted);margin:0 0 12px}.side-cta .btn{width:100%;min-height:38px;padding:9px;font-size:11px}
.content{padding:24px;min-width:0}.page-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:18px}.title-wrap{display:flex;align-items:center;gap:14px}.title-icon{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:var(--purpleSoft);color:var(--purple);font-size:28px}
h1{font-size:28px;line-height:1.15;margin:0 0 5px;font-weight:800;letter-spacing:-.03em}h2,h3,p{margin-top:0}.subtitle{margin:0;color:var(--muted);font-size:13px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.card.pad{padding:18px}.section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.section-title h2{font-size:15px;margin:0;font-weight:800}.section-title a{font-size:11px;color:var(--purple);font-weight:650}
.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.metric{padding:18px;display:flex;gap:14px;align-items:center}.metric-icon{width:52px;height:52px;border-radius:13px;display:grid;place-items:center;font-size:24px}.metric h3{font-size:11px;color:var(--text);margin:0 0 6px}.metric strong{font-size:24px;display:block;line-height:1.05}.metric small{color:var(--green);font-weight:650;font-size:9px}
.soft-purple{background:var(--purpleSoft);color:var(--purple)}.soft-blue{background:var(--blueSoft);color:var(--blue)}.soft-orange{background:var(--orangeSoft);color:var(--orange)}.soft-green{background:var(--greenSoft);color:var(--green)}
.grid-3{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:16px}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}.grid-main-side{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:16px}
.muted{color:var(--muted)}.progress{height:7px;border-radius:99px;background:var(--track);overflow:hidden}.progress>span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--purple),var(--purple2))}.progress.orange>span{background:var(--orange)}.progress.green>span{background:var(--green)}.progress.blue>span{background:var(--blue)}
.btn{border:1px solid var(--line);background:var(--surface);color:var(--text);padding:11px 16px;border-radius:9px;font-weight:750;font-size:13px;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px}.btn.primary{background:linear-gradient(135deg,var(--purple),var(--purple2));border-color:transparent;color:var(--onAccent)}.btn.green{background:var(--green);border-color:transparent;color:var(--onVivid)}.btn.orange{background:var(--orange);border-color:transparent;color:var(--onVivid)}.btn.red{background:var(--red);border-color:transparent;color:var(--onVivid)}.btn.soft{background:var(--purpleSoft);color:var(--purple);border-color:var(--accentLine)}.btn-row{display:flex;gap:12px;flex-wrap:wrap}
.timer{font-variant-numeric:tabular-nums;font-size:clamp(42px,5vw,70px);font-weight:800;letter-spacing:.04em;line-height:1}.timer-labels{display:flex;justify-content:center;gap:62px;color:var(--muted);font-size:9px;margin-top:10px}.list{display:grid;gap:0}.list-row{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}.list-row:last-child{border-bottom:0}.list-row .li-ico{font-size:18px}.list-row strong{font-size:11px}.list-row small{display:block;font-size:9px;color:var(--muted);margin-top:3px}.list-row .right{font-size:11px;font-weight:700}
.donut{width:150px;aspect-ratio:1;border-radius:50%;background:conic-gradient(var(--purple) 0 44%,#58b879 44% 66%,#4b92ef 66% 81%,#f0b65d 81% 92%,#b692f3 92%);position:relative}.donut:after{content:"";position:absolute;inset:28px;border-radius:50%;background:var(--surface)}.donut-center{position:absolute;z-index:2;inset:0;display:grid;place-items:center;text-align:center;font-weight:800}.donut-center span{font-size:19px}.donut-center small{display:block;color:var(--muted);font-size:10px;font-weight:500}
.quick-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.quick{border-radius:12px;padding:13px;text-align:center;background:var(--surface2);border:1px solid var(--line)}.quick .qico{font-size:28px}.quick strong{font-size:11px;display:block;margin-top:6px}.quick small{display:block;font-size:9px;color:var(--muted);margin-top:4px}
.timer-card{padding:20px;text-align:center}.timer-card h2{font-size:16px;margin-bottom:16px}.timer-card .state{font-size:12px;font-weight:800;margin:14px 0}.timer-card .turn-button{width:100%;margin-top:14px}.duel-grid{display:grid;grid-template-columns:1fr 52px 1fr;align-items:center;gap:12px}.vs{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;font-weight:800;justify-self:center}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.form-field{display:grid;gap:7px}.form-field.full{grid-column:1/-1}.form-field label{font-size:11px;font-weight:700}.input{height:46px;border:1px solid var(--line);border-radius:9px;padding:0 14px;background:var(--surface2);color:var(--text);outline:none}.input:focus{border-color:var(--accentLine2);box-shadow:0 0 0 3px var(--accentRing)}
.auth-shell{padding:28px;min-height:calc(100vh - var(--topbar));display:grid;place-items:center}.auth-layout{width:min(1360px,100%);display:grid;grid-template-columns:1.15fr .85fr;gap:18px}.auth-hero,.auth-form{padding:34px;min-height:700px}.hero-stopwatch{font-size:150px;display:grid;place-items:center;height:250px;background:radial-gradient(circle,var(--accentSoft) 0 55%,transparent 56%);filter:drop-shadow(0 12px 18px var(--accentRing))}.hero-points{display:grid;gap:18px}.hero-point{display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:center}.hero-point .bubble{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--purpleSoft);color:var(--purple);font-size:20px}.hero-point strong{display:block;font-size:14px}.hero-point small{font-size:11px;color:var(--muted);line-height:1.4}.auth-form h1{font-size:27px}.auth-form .title-icon{width:50px;height:50px}.auth-title{display:flex;gap:14px;align-items:center;margin-bottom:30px}.check-row{display:flex;justify-content:space-between;gap:16px;align-items:center;font-size:11px;color:var(--muted);margin:16px 0}.social{display:grid;gap:10px;margin-top:16px}
.recipe-grid{display:grid;grid-template-columns:repeat(4,1fr) 120px;gap:12px}.recipe{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface)}.recipe.active{border-color:var(--orange)}.recipe-photo{height:90px;display:grid;place-items:center;font-size:50px;background:linear-gradient(135deg,var(--warm1),var(--warm2))}.recipe .body{padding:9px}.recipe strong{font-size:10px}.recipe small{font-size:9px;color:var(--muted)}
.round{width:110px;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--orange) 0 68%,var(--warm3) 68%);position:relative}.round:after{content:"";position:absolute;inset:11px;background:var(--surface);border-radius:50%}.round span{position:relative;z-index:2;font-size:18px;font-weight:800}.breath-orb{width:230px;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 40% 35%,#f8fbff 0 18%,#cad8ff 48%,#9aaeff 68%,#eaefff 69% 74%,#f7f9ff 75%);box-shadow:0 0 50px rgba(91,108,255,.22)}.breath-orb span{font-size:74px;filter:grayscale(1) brightness(10)}
.tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.tab{padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}.tab.active{border-color:var(--accentLine2)}.tab strong{font-size:11px}.tab small{font-size:10px;color:var(--muted);display:block;margin-top:7px}.exercise-list{display:grid;gap:6px}.exercise{display:grid;grid-template-columns:30px 1fr auto;gap:10px;align-items:center;border:1px solid var(--line);border-radius:10px;padding:9px 10px}.exercise .num{width:26px;height:26px;border-radius:7px;background:var(--orangeSoft);color:var(--orange);display:grid;place-items:center;font-size:11px;font-weight:800}.exercise strong{font-size:10px}.exercise span:last-child{font-size:10px;font-weight:700}
.library{display:grid;gap:9px}.book{display:grid;grid-template-columns:52px 1fr;gap:11px;border:1px solid var(--line);border-radius:11px;padding:10px}.book.active{border-color:var(--accentLine2);background:var(--accentTint)}.cover{height:64px;border-radius:5px;background:linear-gradient(160deg,#6e6a7b,#aba9b3);display:grid;place-items:center;color:#fff;font-size:9px;text-align:center}.book strong{font-size:11px}.book small{font-size:9px;color:var(--muted);display:block;margin-top:5px}
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.plan{padding:22px;min-height:210px}.plan.reco{border-color:var(--accentLine2);box-shadow:0 0 0 1px var(--accentLine2)}.plan h3{font-size:14px;margin:0 0 6px}.plan .price{font-size:18px;font-weight:800}.plan ul{padding-left:18px;margin:16px 0 0;color:var(--muted);font-size:10px;line-height:1.8}.checkout{display:grid;grid-template-columns:1fr 390px;gap:18px}.summary-total{display:flex;justify-content:space-between;font-weight:800;font-size:16px;padding-top:15px;border-top:1px solid var(--line);margin-top:14px}.mobile-bottom{display:none}
@media (max-width:1200px){:root{--sidebar:76px}.side-link{justify-content:center;padding:12px}.side-link span:not(.ico),.side-cta{display:none}.topnav{gap:18px}.metric-grid{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:1fr 1fr}.grid-3>.card:last-child{grid-column:1/-1}.grid-main-side{grid-template-columns:1fr 320px}.recipe-grid{grid-template-columns:repeat(4,1fr)}.recipe-grid>.recipe:last-child{display:none}}
@media (max-width:900px){.topnav{display:none}.mobile-menu-btn{display:block}.topbar{padding:0 16px;gap:14px}.brand strong{font-size:17px}.top-actions{margin-left:auto}.app-shell{grid-template-columns:1fr}.sidebar{position:fixed;left:0;top:var(--topbar);width:260px;height:calc(100vh - var(--topbar));height:calc(100dvh - var(--topbar));transform:translateX(-105%);transition:.25s ease;box-shadow:12px 0 30px rgba(15,31,58,.15)}.sidebar.open{transform:none}.side-link{justify-content:flex-start}.side-link span:not(.ico){display:inline}.side-cta{display:block}.content{padding:18px}.grid-main-side,.checkout{grid-template-columns:1fr}.grid-3{grid-template-columns:1fr}.grid-2{grid-template-columns:1fr!important}.auth-layout{grid-template-columns:1fr}.auth-hero{min-height:auto}.auth-form{min-height:auto}.recipe-grid{grid-template-columns:repeat(2,1fr)}.price-grid{grid-template-columns:1fr}.duel-grid{grid-template-columns:1fr}.vs{margin:-4px auto}.tabs{grid-template-columns:repeat(2,1fr)}.tabs .tab:last-child{grid-column:1/-1}.form-grid{grid-template-columns:1fr}.form-field.full{grid-column:auto}}
@media(max-width:700px){.breath-layout{grid-template-columns:1fr!important;text-align:center}.breath-layout>div:first-child{display:none}.breath-orb{width:190px}.grid-main-side aside{margin-top:14px}}
@media (max-width:600px){body{padding-bottom:66px}.topbar{height:58px}.top-actions .lang,.btn-login{display:none}.brand{margin-inline:auto}.content{padding:14px}.page-head{align-items:flex-start}.title-icon{width:46px;height:46px;font-size:24px}h1{font-size:23px}.subtitle{font-size:12px}.metric-grid{grid-template-columns:1fr 1fr;gap:10px}.metric{padding:13px;gap:9px}.metric-icon{width:40px;height:40px;font-size:19px}.metric strong{font-size:19px}.metric h3{font-size:9px}.grid-main-side{display:block}.grid-main-side>.card{margin-bottom:12px}.quick-grid{grid-template-columns:repeat(4,1fr)}.quick-grid>.quick:last-child{grid-column:1/-1}.timer{font-size:44px}.timer-labels{gap:34px}.btn-row>.btn{flex:1 1 40%}.card.pad{padding:14px}.donut{width:130px}.auth-shell{padding:12px}.auth-hero{display:none}.auth-form{padding:20px;min-height:auto}.auth-form h1{font-size:24px}.recipe-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory}.recipe{min-width:150px;scroll-snap-align:start}.recipe-grid>.recipe:last-child{display:block}.checkout{display:block}.checkout>*{margin-bottom:12px}.tabs{display:flex;overflow-x:auto}.tab{min-width:140px}.tab:last-child{min-width:140px}.duel-grid .timer{font-size:40px}.mobile-bottom{position:fixed;bottom:0;left:0;right:0;height:62px;background:var(--surface);border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(5,1fr);z-index:60}.mobile-bottom a{display:grid;place-items:center;font-size:10px;color:var(--muted)}.mobile-bottom a span{display:block;font-size:19px;color:var(--purple)}.mobile-bottom .plus{width:46px;height:46px;border-radius:50%;align-self:center;justify-self:center;background:linear-gradient(135deg,var(--purple),var(--purple2));color:var(--onAccent);font-size:26px}.hide-mobile{display:none!important}}
.inline-form{display:inline;margin:0}.alert{padding:12px 14px;border-radius:10px;margin-bottom:16px;font-size:13px;font-weight:650}.alert.success{background:var(--okBg);color:var(--okText);border:1px solid var(--okLine)}.alert.error{background:var(--errBg);color:var(--errText);border:1px solid var(--errLine)}.empty-state{padding:24px;text-align:center;color:var(--muted);font-size:12px;border:1px dashed var(--line);border-radius:12px}.data-table{width:100%;border-collapse:collapse;font-size:12px}.data-table th,.data-table td{padding:11px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}.data-table th{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}.badge{display:inline-flex;padding:4px 8px;border-radius:999px;background:var(--purpleSoft);color:var(--purple);font-size:10px;font-weight:750}.badge.green{background:var(--greenSoft);color:var(--okText)}.badge.red{background:var(--redSoft);color:var(--red)}.modal-box{margin-top:16px;padding:16px;border:1px dashed var(--accentLine);border-radius:12px;background:var(--accentTint)}.admin-shell{display:grid;grid-template-columns:220px 1fr;min-height:calc(100vh - var(--topbar))}.admin-nav{background:var(--surface);border-right:1px solid var(--line);padding:22px 14px;display:grid;align-content:start;gap:7px}.admin-nav a{padding:12px 14px;border-radius:9px;font-size:13px;font-weight:700}.admin-nav a:hover{background:var(--purpleSoft);color:var(--purple)}.admin-content{padding:24px;min-width:0}.admin-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.admin-kpi{padding:20px}.admin-kpi small{color:var(--muted);font-size:10px}.admin-kpi strong{display:block;font-size:28px;margin-top:7px}.stack{display:grid;gap:14px}.code-note{padding:12px;border-radius:9px;background:var(--surface3);color:var(--muted);font-family:ui-monospace,monospace;font-size:11px;line-height:1.6}.price-choice{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.price-choice label{display:block;cursor:pointer}.price-choice input{position:absolute;opacity:0}.price-choice .plan{height:100%}.price-choice input:checked + .plan{border-color:var(--purple);box-shadow:0 0 0 2px var(--accentRing)}
@media(max-width:900px){.admin-shell{grid-template-columns:1fr}.admin-nav{display:flex;overflow:auto;border-right:0;border-bottom:1px solid var(--line)}.admin-nav a{white-space:nowrap}.admin-kpis{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.admin-content{padding:14px}.admin-kpis{grid-template-columns:1fr 1fr}.data-table-wrap{overflow:auto}.price-choice{grid-template-columns:1fr}}

/* --- Mode invite, tours de chrono et sequences guidees --- */
.guest-banner{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:16px;align-items:center;padding:16px 18px;margin-bottom:16px;border:1px solid var(--accentLine);border-radius:var(--radius);background:linear-gradient(120deg,var(--accentSoft),var(--accentTint));box-shadow:var(--shadow)}
.guest-banner .guest-ico{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-size:24px;background:var(--purpleSoft);color:var(--purple)}
.guest-banner strong{display:block;font-size:14px}
.guest-banner p{margin:4px 0 0;font-size:12px;color:var(--muted);line-height:1.5}
.guest-actions{display:flex;gap:10px;flex-wrap:wrap}
.guest-actions .btn{min-height:38px;padding:9px 14px;font-size:12px}
.side-link.locked{opacity:.6}
.side-link .lock{margin-left:auto;font-size:11px}
.icon-btn{border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:8px;width:28px;height:28px;line-height:1;font-size:12px;display:grid;place-items:center;padding:0}
.icon-btn:hover{border-color:var(--red);color:var(--red)}
.timer-card .state{letter-spacing:.06em}
.duel-side{transition:box-shadow .2s ease,border-color .2s ease}
/* Le bouton du joueur qui n'a pas la main ne repond pas : il doit le dire. */
.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.duel-side.is-active{border-color:var(--purple);box-shadow:0 0 0 2px var(--accentRing)}
.breath-orb{transition:transform .35s ease-out}
.seq-list{display:grid;gap:8px;text-align:left}
.seq-item{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:10px;align-items:center;border:1px solid var(--line);border-radius:10px;padding:9px 10px;background:var(--surface)}
.seq-item .num{width:26px;height:26px;border-radius:7px;background:var(--surface3);color:var(--muted);display:grid;place-items:center;font-size:11px;font-weight:800}
.seq-item strong{font-size:11px;display:block}
.seq-item small{font-size:9px;display:block;margin-top:2px}
.seq-item span:last-child{font-size:10px;font-weight:700}
.seq-item.current{border-color:var(--orange);background:var(--orangeSoft)}
.seq-item.current .num{background:var(--orange);color:var(--onVivid)}
.seq-item.done{opacity:.65}
.seq-item.done .num{background:var(--greenSoft);color:var(--green)}
.exercise.is-selected{border-color:var(--purple);background:var(--purpleSoft)}
.module-card{display:grid;grid-template-columns:40px minmax(0,1fr) 16px;gap:12px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--surface2)}
.module-card:hover{border-color:var(--accentLine);background:var(--accentTint)}
.module-card .qico{font-size:24px;text-align:center}
.module-card strong{font-size:12px;display:block}
.module-card small{font-size:10px;display:block;margin-top:3px;line-height:1.45}
.module-card.is-locked{opacity:.65;background:var(--surface3)}
@media (max-width:900px){.guest-banner{grid-template-columns:1fr;text-align:left}.guest-banner .guest-ico{display:none}}

/* --- Plein ecran d'un outil ---------------------------------------------
   Un seul bouton, en haut a droite du titre, agrandit l'outil *entier* : le
   ou les chronos, le formulaire d'enregistrement, les tours, les seances et
   l'historique. Le plein ecran n'est donc plus un mode « affichage » qui
   masque la moitie de la page, mais la meme page debarrassee du reste du
   site — on peut y enregistrer une seance sans en sortir.

   Deux consequences sur la mise en page. Le contenu defile : un outil complet
   ne tient pas dans la hauteur d'un ecran court, et l'ancien centrage en flex
   rendait le bas inatteignable. Et plus rien n'est masque : les regles
   display:none sur les formulaires, les libelles et les reglages ont disparu,
   c'etait exactement ce que le plein ecran devait montrer. */
.fs-page.is-fullscreen{
  display:block;overflow-y:auto;overflow-x:hidden;
  width:100vw;height:100vh;margin:0;
  padding:24px clamp(16px,4vw,56px);
  background:var(--bg);color:var(--text);border:0;border-radius:0;box-shadow:none;
}
/* Sur un ecran large, l'outil reste une colonne lisible plutot que de s'etaler
   sur toute la largeur. */
.fs-page.is-fullscreen > *{max-width:1400px;margin-inline:auto}

/* Le chrono garde la vedette, sans ecraser ce qui l'entoure : l'ancienne
   valeur (jusqu'a 230px) ne laissait de place a rien d'autre. */
.is-fullscreen .timer{font-size:clamp(52px,8vw,132px);letter-spacing:.02em}
.is-fullscreen .timer-md{font-size:clamp(42px,6vw,104px)}
.is-fullscreen .state{font-size:clamp(13px,1.6vw,19px)}
.is-fullscreen .btn{min-height:46px;font-size:14px;padding:11px 18px}
.is-fullscreen .btn-row{justify-content:center}
.is-fullscreen .section-title h2{font-size:clamp(15px,1.8vw,21px)}
/* Pomodoro, sequences et respiration : anneau et libelle de phase agrandis */
.is-fullscreen .round{width:min(32vh,270px)}
.is-fullscreen .round span{font-size:clamp(30px,5vw,68px)}
.is-fullscreen .donut{width:min(20vh,170px)}
.is-fullscreen [data-seq-time]{font-size:clamp(44px,7vw,120px)}
.is-fullscreen [data-seq-name],
.is-fullscreen [data-breath-phase]{font-size:clamp(24px,4vw,52px)}
.is-fullscreen .breath-orb{width:min(38vh,340px)}
.is-fullscreen .breath-layout{grid-template-columns:1fr min(42vh,380px) 1fr!important;gap:3vw}
.is-fullscreen .seq-list{max-height:30vh;overflow:auto}
/* Duel : les deux joueurs occupent toute la largeur */
.is-fullscreen .duel-grid{gap:2vw}
.is-fullscreen .duel-grid .timer{font-size:clamp(44px,7vw,130px)}
.is-fullscreen .duel-side{padding:2.5vh 2vw}
.is-fullscreen .duel-side .title-icon{width:clamp(50px,6vw,80px);height:clamp(50px,6vw,80px);font-size:clamp(24px,3vw,40px)}
@media (max-width:900px){
  .fs-page.is-fullscreen{padding:16px 14px}
  .is-fullscreen .btn{min-height:42px;font-size:13px;padding:10px 14px}
  .is-fullscreen .breath-layout{grid-template-columns:1fr!important}
}

/* Le bouton du plein ecran, cale a droite du titre par le space-between de
   .page-head. flex-shrink:0 l'empeche d'etre comprime par un titre long. */
.fs-btn{flex:0 0 auto;white-space:nowrap}
@media (max-width:600px){.fs-btn [data-fullscreen-label]{display:none}}

.fs-zone{display:grid;gap:14px}
.duel-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow)}
.is-fullscreen .duel-bar{border:0;box-shadow:none;background:transparent;justify-content:center}
.timer-md{font-size:clamp(38px,4vw,56px)}
.ring-time{font-size:clamp(26px,3.2vw,38px);font-weight:800}
.is-fullscreen .timer-md{font-size:clamp(56px,11vw,170px)}

/* --- Minuteur (compte a rebours) --- */
.cd-display{transition:color .2s ease}
.cd-display.is-warning{color:var(--orange)}
.cd-display.is-final{color:var(--red);animation:cd-pulse 1s ease-in-out infinite}
.cd-display.is-overtime{color:var(--red)}
.progress.is-overtime>span{background:var(--red)}
@keyframes cd-pulse{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.cd-display.is-final{animation:none}}
.is-fullscreen [data-cd-progress]{height:14px;max-width:900px;margin-inline:auto}

/* --- Choix du theme ------------------------------------------------------
   Le bouton vit dans la barre du haut, qui reste bleu nuit dans les deux
   clartes : ses couleurs sont donc fixes, celles du panneau suivent le
   theme choisi. */
.theme-switch{position:relative}
.theme-btn{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px;border-radius:99px;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08);color:#fff;font-size:12px;font-weight:700}
.theme-btn:hover{background:rgba(255,255,255,.16)}
.theme-btn .theme-btn-ico{font-size:14px;line-height:1}
.theme-panel{position:absolute;inset-inline-end:0;top:calc(100% + 10px);z-index:70;width:232px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--text);box-shadow:0 16px 40px rgba(6,27,63,.22)}
.theme-panel-label{margin:0 0 8px;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.theme-panel-label+.theme-options{margin-bottom:14px}
.theme-panel-label+.theme-options:last-child{margin-bottom:0}
.theme-options{display:grid;gap:6px}
.theme-option{display:flex;align-items:center;gap:10px;width:100%;min-height:38px;padding:0 11px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--text);font-size:12px;font-weight:700;text-align:left}
.theme-option:hover{background:var(--accentTint);border-color:var(--accentLine)}
/* Le choix retenu se reconnait au cadre et a la coche, pas seulement au fond
   teinte : la nuance seule echappe a bien des yeux. */
.theme-option[aria-pressed="true"]{background:var(--accentSoft);border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.theme-option[aria-pressed="true"] .theme-check{opacity:1}
.theme-check{margin-left:auto;font-size:12px;color:var(--accent);opacity:0}
.theme-swatch{width:16px;height:16px;border-radius:50%;border:1px solid rgba(15,31,58,.18);flex:0 0 auto}
[data-theme="dark"] .theme-swatch{border-color:rgba(255,255,255,.25)}
.theme-swatch.is-purple{background:#6648f5}.theme-swatch.is-blue{background:#1d63d2}.theme-swatch.is-orange{background:#a84800}
[data-theme="dark"] .theme-swatch.is-purple{background:#a78bfa}
[data-theme="dark"] .theme-swatch.is-blue{background:#7fb2ff}
[data-theme="dark"] .theme-swatch.is-orange{background:#ffb259}
.theme-mode-ico{width:16px;text-align:center;flex:0 0 auto}
@media (max-width:600px){.theme-btn .theme-btn-label{display:none}.theme-btn{padding:0 9px}}

/* La bulle de respiration est un degrade decoratif clair : en sombre elle
   eblouirait, on la rejoue dans les tons de la nuit. */
[data-theme="dark"] .breath-orb{background:radial-gradient(circle at 40% 35%,#2b3d63 0 18%,#22335a 48%,#1a2a4c 68%,#243b66 69% 74%,#16253f 75%);box-shadow:0 0 50px rgba(91,108,255,.14)}
[data-theme="dark"] .breath-orb span{filter:none}

/* --- Cadran commun et composeur d'etapes --------------------------------
   Le chronometre, la cuisine et l'interval affichent le meme cadran : c'est
   .timer-face qui le porte, et .timer / .timer-labels / .state gardent leurs
   regles d'origine, y compris en plein ecran. */
.timer-face{margin:6px 0 10px}
.timer-card .timer-face .state{margin:12px 0 6px}

/* L'etape en cours, avec sa photo quand elle en a une. */
.seq-current{display:flex;align-items:center;justify-content:center;gap:14px;text-align:left;margin-bottom:6px}
.seq-current h2{margin:0}
.seq-photo{width:74px;height:74px;flex:0 0 auto;border-radius:14px;overflow:hidden;background:var(--surface3);display:grid;place-items:center;font-size:32px}
.seq-photo img{width:100%;height:100%;object-fit:cover}
.seq-thumb{width:26px;height:26px;border-radius:7px;overflow:hidden;background:var(--surface3)}
.seq-thumb img{width:100%;height:100%;object-fit:cover;display:block}

/* Les vignettes de repas et de programmes : une tuile par element, avec sa
   photo, son total et ses deux actions. */
.recipe-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.recipe-grid>.recipe:last-child{display:block}
.recipe-photo{display:grid;place-items:center;height:96px;overflow:hidden}
.recipe-photo img{width:100%;height:100%;object-fit:cover;display:block}
.recipe .body strong{display:block;margin-bottom:3px}
.recipe-actions{display:flex;align-items:center;gap:10px;margin-top:8px}
.recipe-actions a,.recipe-actions button{font-size:9px;font-weight:750;color:var(--muted);background:none;border:0;padding:0;cursor:pointer}
.recipe-actions a:hover{color:var(--accent)}
.recipe-actions button:hover{color:var(--red)}
.recipe-actions form{display:inline;margin:0}

.badge-warn{background:var(--orangeSoft);color:var(--orange)}

/* Quota du compte gratuit : le formulaire cede la place a l'explication. */
.quota-lock{display:flex;align-items:center;gap:16px;padding:18px;border:1px dashed var(--accentLine);border-radius:12px;background:var(--accentTint)}
.quota-lock-icon{font-size:26px}
.quota-lock strong{display:block;font-size:13px}
.quota-lock p{margin:5px 0 0;font-size:11px;color:var(--muted);line-height:1.6}
.quota-lock .btn{margin-left:auto;flex:0 0 auto}

/* Le composeur : photo d'ensemble a gauche, identite a droite, puis une
   ligne par etape. */
.builder-head{display:grid;grid-template-columns:172px minmax(0,1fr);gap:16px;align-items:start}
.builder-head-fields{display:grid;gap:12px}

.cover-drop,.step-thumb{position:relative;display:grid;place-items:center;overflow:hidden;cursor:pointer;background:var(--surface2);border:1px dashed var(--line);border-radius:12px}
.cover-drop:hover,.step-thumb:hover{border-color:var(--accentLine2)}
.cover-drop.has-image,.step-thumb.has-image{border-style:solid}
.cover-drop{height:172px}
.cover-drop img,.step-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.cover-drop input[type=file],.step-thumb input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.cover-hint{display:grid;justify-items:center;gap:6px;color:var(--muted);font-size:11px;font-weight:700;text-align:center;padding:0 10px}
.cover-plus{font-size:26px;line-height:1}

/* La croix se pose au-dessus du champ fichier, qui couvre toute la vignette. */
.thumb-clear{position:absolute;top:5px;right:5px;z-index:2;width:22px;height:22px;border-radius:50%;border:0;background:rgba(6,27,63,.66);color:#fff;font-size:11px;line-height:1;cursor:pointer}
.thumb-clear:hover{background:var(--red)}

.step-rows{display:grid;gap:10px}
.step-row{display:grid;grid-template-columns:22px 58px minmax(0,1fr) 30px;gap:11px;align-items:center;padding:11px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.step-rank{display:grid;place-items:center;width:22px;height:22px;border-radius:7px;background:var(--surface3);color:var(--muted);font-size:11px;font-weight:800}
.step-thumb{width:58px;height:58px}
.step-thumb-hint{display:grid;justify-items:center;color:var(--muted);font-size:15px;line-height:1.1}
.step-thumb-hint small{font-size:8px;font-weight:700}
.step-fields{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;gap:9px;align-items:center}
.step-fields .input{height:42px}
.step-time{display:grid;grid-template-columns:repeat(3,58px);gap:6px}
.step-time label{display:grid;gap:3px;justify-items:center}
.step-time span{font-size:9px;font-weight:800;letter-spacing:.06em;color:var(--muted)}
.step-time .input{height:42px;padding:0 4px;text-align:center;font-variant-numeric:tabular-nums}
.step-remove{width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--muted);font-size:12px;cursor:pointer}
.step-remove:hover:not(:disabled){border-color:var(--red);color:var(--red)}
.step-remove:disabled{opacity:.35;cursor:not-allowed}

@media (max-width:1100px){
  .step-fields{grid-template-columns:minmax(0,1fr)}
  .step-time{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:700px){
  .builder-head{grid-template-columns:1fr}
  .cover-drop{height:132px}
  .step-row{grid-template-columns:22px 58px minmax(0,1fr);row-gap:9px}
  .step-remove{grid-column:1/-1;width:100%}
  .quota-lock{flex-wrap:wrap}
  .quota-lock .btn{margin-left:0;width:100%}
  .seq-current{flex-direction:column;text-align:center}
}

/* ==========================================================================
   LE CADRAN — commun aux huit outils
   ==========================================================================
   Chronometre, minuteur, pomodoro, duel, lecture, respiration, interval et
   cuisine partageaient huit presentations differentes de la meme chose. Ils
   partagent desormais .stage : une bande pleine largeur, d'une seule couleur,
   sans bordure, ou les chiffres sont le seul objet important de l'ecran.

   La couleur ne change ni d'un outil a l'autre ni d'un theme a l'autre : elle
   est deja sombre, donc lisible sur fond clair comme sur fond sombre. Blanc
   sur #0b1f45 mesure environ 15,5:1, bien au-dela du 4,5:1 exige. */
:root{
  --contentPad:24px;
  --stage:#0b1f45;
  --stageInk:#fff;
  --stageMuted:#a9bbd8;
  --stageLine:rgba(255,255,255,.22);
  --stageFill:rgba(255,255,255,.10);
  --stageFillHover:rgba(255,255,255,.19);
  --stageTrack:rgba(255,255,255,.16);
}
@media (max-width:900px){:root{--contentPad:18px}}
@media (max-width:600px){:root{--contentPad:14px}}

/* Cette regle vient apres celles des media queries d'origine : c'est elle qui
   fixe desormais la marge du contenu, et .stage l'annule pour aller d'un bord
   a l'autre. */
.content{padding:var(--contentPad)}

.stage{
  margin:0 calc(var(--contentPad) * -1) 18px;
  padding:clamp(20px,3.2vw,40px) clamp(14px,3vw,44px) clamp(22px,3.4vw,38px);
  background:var(--stage);
  color:var(--stageInk);
  border:0;
  border-radius:0;
  box-shadow:none;
  text-align:center;
  /* Safari iOS gonfle le texte des blocs larges en paysage : la taille des
     chiffres est calculee, elle ne doit pas etre reajustee par le navigateur. */
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
.stage h2,.stage h3{color:var(--stageInk)}
.stage .subtitle,.stage .muted,.stage small{color:var(--stageMuted)}

/* Bandeau : etat a gauche, heure qu'il est a droite. */
.stage-top{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  max-width:1180px;margin:0 auto 6px;
}
.stage-state{
  font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--stageInk);padding:6px 12px;border-radius:8px;background:var(--stageFill);
}
.stage-clock{
  font-variant-numeric:tabular-nums;font-size:15px;font-weight:750;
  color:var(--stageMuted);letter-spacing:.04em;
}
.stage-clock:before{content:"🕒 ";font-size:13px}

/* Titre de ce qui tourne : nom de l'etape, du livre, de la phase. */
.stage-head{max-width:1180px;margin:10px auto 0}
.stage-head>strong{display:block;font-size:clamp(17px,2vw,24px);font-weight:800;line-height:1.25}
/* Enfants directs seulement : les <span> imbriques portent une valeur au fil
   de la phrase (« cycle 2 / 4 »), ils doivent rester dans la ligne. */
.stage-head>span{display:block;margin-top:5px;font-size:13px;color:var(--stageMuted)}
.stage-head>span span{display:inline;margin:0;font-size:inherit;color:var(--stageInk);font-weight:750}

/* Les chiffres. La borne haute du clamp est volontairement large : le cadran
   occupe toute la largeur, et c'est la borne du milieu, en vw, qui decide. */
.stage .timer{
  display:block;
  margin:clamp(8px,1.6vw,18px) auto 0;
  font-weight:800;
  font-size:clamp(46px,11.5vw,150px);
  letter-spacing:.01em;
  line-height:1.02;
  white-space:nowrap;
  color:var(--stageInk);
}
.stage .timer-labels{
  display:flex;justify-content:center;gap:clamp(30px,9vw,120px);
  margin-top:10px;font-size:10px;font-weight:750;letter-spacing:.1em;
  color:var(--stageMuted);
}
.stage .progress{max-width:1180px;margin:18px auto 0;height:9px;background:var(--stageTrack)}
.stage .progress>span{background:var(--stageInk)}

/* --- Les commandes ------------------------------------------------------
   Toutes les touches ont la meme forme, la meme taille et le meme rayon ;
   seule l'action principale porte la couleur d'accent, pour rester trouvable
   sans avoir a lire. La disposition suit le nombre de touches, via data-count
   ecrit dans la vue :
     2 ou 3  une seule rangee
     4       la principale en pleine largeur au-dessus, les trois autres dessous
     5       trois au-dessus (la principale au milieu), deux dessous */
.controls{
  display:grid;gap:10px;max-width:820px;margin:clamp(18px,2.4vw,28px) auto 0;
}
.controls .btn{
  width:100%;margin:0;min-height:52px;padding:12px 14px;border-radius:12px;
  font-size:14px;font-weight:750;
  background:var(--stageFill);border:1px solid var(--stageLine);color:var(--stageInk);
}
.controls .btn:hover:not(:disabled){background:var(--stageFillHover)}
.controls .btn:disabled{opacity:.45}
.controls .btn.is-primary{background:var(--accent);border-color:transparent;color:var(--onAccent)}
.controls .btn.is-primary:hover:not(:disabled){background:var(--accent2)}

.controls[data-count="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.controls[data-count="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}

.controls[data-count="4"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.controls[data-count="4"]>:first-child{grid-column:1/-1}

/* Six colonnes : 2+2+2 en haut, 3+3 en bas. */
.controls[data-count="5"]{grid-template-columns:repeat(6,minmax(0,1fr))}
.controls[data-count="5"]>:nth-child(-n+3){grid-column:span 2}
.controls[data-count="5"]>:nth-child(n+4){grid-column:span 3}

/* Sous 560 px, trois touches cote a cote deviennent illisibles : on repasse a
   deux colonnes, la principale gardant la pleine largeur. */
@media (max-width:560px){
  .controls[data-count="3"],
  .controls[data-count="4"],
  .controls[data-count="5"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  .controls[data-count="5"]>:nth-child(-n+3),
  .controls[data-count="5"]>:nth-child(n+4){grid-column:auto}
  .controls[data-count="4"]>:first-child,
  .controls[data-count="5"]>.is-primary{grid-column:1/-1}
  .controls .btn{min-height:50px;font-size:13px}
  .stage .timer{letter-spacing:0}
}

/* Le duel montre deux compteurs dans un seul cadran. */
.stage-duo{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(10px,2vw,26px);max-width:1180px;margin:0 auto}
.stage-duo .duel-side{background:transparent;border:0;box-shadow:none;padding:6px 0;color:var(--stageInk)}
.stage-duo .timer{font-size:clamp(34px,7vw,104px)}
.stage-duo .vs{background:var(--stageFill);border:0;color:var(--stageInk);width:42px;height:42px}
.stage-duo .state{color:var(--stageMuted);font-size:11px;font-weight:800;margin:8px 0 0}
.stage-duo .duel-side.is-active{background:var(--stageFill);border-radius:14px;padding:10px 8px}
@media (max-width:700px){
  .stage-duo{grid-template-columns:1fr}
  .stage-duo .vs{justify-self:center}
}

/* Plein ecran : le cadran prend la place laissee par le reste. */
/* En plein ecran, la marge du bloc n'est plus --contentPad mais le padding
   de .fs-page.is-fullscreen : c'est lui que le cadran doit annuler pour aller
   d'un bord a l'autre. */
.is-fullscreen .stage{margin-inline:calc(clamp(16px,4vw,56px) * -1);padding-block:clamp(16px,3vh,40px)}
@media (max-width:900px){.is-fullscreen .stage{margin-inline:-14px}}
.is-fullscreen .stage .timer{font-size:clamp(58px,15vw,260px)}
.is-fullscreen .stage-duo .timer{font-size:clamp(40px,9vw,170px)}

/* Le sujet en cours, dans le cadran : sa photo, son nom, sa phase. */
.stage-figure{display:flex;align-items:center;justify-content:center;gap:16px;max-width:1180px;margin:14px auto 0;text-align:left}
.stage-figure .stage-head{margin:0}
.stage-figure .seq-photo{width:clamp(56px,7vw,84px);height:clamp(56px,7vw,84px);flex:0 0 auto;border-radius:16px;overflow:hidden;background:var(--stageFill);display:grid;place-items:center;font-size:clamp(24px,3vw,34px)}
.stage-figure .seq-photo img{width:100%;height:100%;object-fit:cover}
@media (max-width:560px){.stage-figure{flex-direction:column;text-align:center;gap:10px}}

/* La bulle de respiration vit maintenant sur fond sombre : le degrade clair
   d'origine y ferait une tache. */
.breath-stage{display:grid;place-items:center;margin-top:14px}
.stage .breath-orb{width:clamp(120px,17vw,190px);background:radial-gradient(circle at 40% 35%,#dfe8ff 0 18%,#93a9e8 48%,#5f79c8 68%,#8fa4d8 69% 74%,#233457 75%);box-shadow:0 0 46px rgba(120,150,255,.25)}
.stage .breath-orb span{font-size:clamp(38px,5vw,62px);filter:none}

/* Sur le cadran sombre, le compte a rebours garde ses alertes lisibles :
   l'orange et le rouge des jetons sont trop sombres sur ce fond. */
.stage .cd-display.is-warning{color:#ffbe63}
.stage .cd-display.is-final,.stage .cd-display.is-overtime{color:#ff8f8f}
.stage .progress.is-overtime>span{background:#ff8f8f}

/* Le duel : le joueur dont c'est le tour se detache du reste du cadran. */
.stage-duo .duel-side strong{display:block;font-size:14px;font-weight:800;margin-bottom:6px}

/* --- Corrections de portee -----------------------------------------------
   Les regles de plein ecran ecrites pour l'ancienne presentation visent des
   attributs ([data-seq-time], [data-breath-phase]) que le cadran commun
   emploie autrement. On les neutralise a l'interieur de .stage, ou c'est le
   cadran qui decide. */
.is-fullscreen .stage{max-width:none}
.is-fullscreen .stage .stage-state{font-size:13px}
.is-fullscreen .stage .stage-clock{font-size:17px}
.is-fullscreen .stage .state{font-size:12px}

/* Onze caracteres au lieu de huit : le chronometre et la lecture affichent
   les centiemes. A largeur egale, leurs chiffres doivent etre plus petits,
   sinon la ligne deborde entre 1200 et 1300 px, la ou la barre laterale est
   large et l'ecran encore etroit. */
.stage .timer.is-long{font-size:clamp(40px,8.5vw,140px)}
.is-fullscreen .stage .timer.is-long{font-size:clamp(46px,11vw,200px)}

/* Sur telephone, trois touches cote a cote ne tiennent pas : deux colonnes,
   et l'action principale passe en tete sur toute la largeur. */
@media (max-width:560px){
  .controls[data-count="3"]>.is-primary,
  .controls[data-count="5"]>.is-primary{order:-1;grid-column:1/-1}
  .controls[data-count="4"]>:last-child{grid-column:1/-1}
}