/* Style clair de l'espace formation — 15/10/2026 (demande de Rudy : « trop sombre », plus moderne et intuitif).
   Feuille séparée, chargée APRÈS le <style> d'index.php : elle ne fait que surcharger.
   Ne touche pas au filigrane, à la protection (body.prot) ni à l'impression. */

/* 1. Thème clair partout, même si l'iPhone est en mode sombre */
:root,:root:not(#x){--navy:#14243f;--deep:#14243f;--brass:#c9a55c;--brass-d:#7a5c26;--bg:#f7f8fa;--surface:#fff;--ink:#1a2233;--muted:#667085;--line:#e6e9ef;--side:#fff;--side-on:#f7f0e1;--tint:#f7f0e1;--soft:#eef2f8;--ok:#2f8a55;--ok-bg:#e6f4ec;--ko:#b03a2e;--ko-bg:#fde8e6;--hero:linear-gradient(135deg,#ffffff 0%,#f7f0e1 55%,#eef2f8 100%);color-scheme:light}
@media (prefers-color-scheme:dark){:root{--bg:#f7f8fa;--surface:#fff;--ink:#1a2233;--muted:#667085;--line:#e6e9ef;--side:#fff;--side-on:#f7f0e1;--tint:#f7f0e1;--soft:#eef2f8;--ok:#2f8a55;--ok-bg:#e6f4ec;--ko:#b03a2e;--ko-bg:#fde8e6;--brass-d:#7a5c26;--hero:linear-gradient(135deg,#ffffff 0%,#f7f0e1 55%,#eef2f8 100%);color-scheme:light}}

/* 2. Barre du haut blanche */
.top{background:rgba(255,255,255,.92);color:var(--ink);border-bottom:1px solid var(--line);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px)}
.brand{color:var(--navy)}
.tabs a{color:var(--muted)}
.tabs a:hover{color:var(--ink);background:var(--soft)}
.tabs a.on{background:var(--navy);color:#fff}
.lg{border-color:var(--line)}.lg a,.out{color:var(--muted)}.lg b{color:#fff;background:var(--navy)}

/* 3. Bandeaux clairs (hero, chiffres clés, citation, visio) */
.hero,.key,.ret{background:var(--hero);color:var(--ink);border:1px solid var(--line);box-shadow:0 1px 2px rgba(20,36,63,.04),0 8px 24px rgba(20,36,63,.06)}
.hero h1{color:var(--navy)}.hero p,.hero.vz p{color:var(--muted)}.hero .eb,.ret .eb{color:var(--brass-d)}
.key b{color:var(--brass-d)}
.chip{background:var(--surface);color:var(--ink);border:1px solid var(--line)}
.chip.go{background:var(--brass);color:#fff;border-color:var(--brass)}.chip.ok{background:var(--ok-bg);color:var(--ok);border-color:transparent}
.art{background:radial-gradient(circle at 30% 30%,#fff,#f7f0e1);border:1px solid var(--line);color:var(--brass-d)}
.live{background:var(--surface);border-color:var(--brass)}.live .count{color:var(--muted)}.live small{color:var(--brass-d)}
.btn.ghost-l{color:var(--ink);border-color:var(--line)}
.visual{background:radial-gradient(circle at 30% 20%,#fff,#f7f0e1 75%);color:var(--navy)}.visual .w{color:var(--brass-d)}.visual .rl{color:var(--muted)}.visual .ft{color:var(--muted)}

/* 4. Cartes arrondies et aérées */
.card,.doc,.step,.news,.q,.cmp>div,.feat{border-radius:18px;box-shadow:0 1px 2px rgba(20,36,63,.04),0 6px 18px rgba(20,36,63,.05)}
.card{padding:22px}
a.news:hover,a.step:hover,.doc:hover{border-color:var(--brass)}
.doc .num,.sug .num{background:var(--tint);color:var(--brass-d)}
ol.pts li:before{background:var(--tint);color:var(--brass-d)}
th{background:var(--soft);color:var(--navy)}
.mod[aria-current="page"] .ico,.vcard.main .vico{background:var(--brass);color:#fff}

/* 5. Boutons : principal doré, secondaire clair */
.btn{transition:transform .12s,box-shadow .12s}.btn:active{transform:scale(.98)}
.btn.gold{background:var(--brass);color:#fff}
.btn.dark{background:var(--navy);color:#fff}
.btn.gold:hover,.btn.dark:hover{box-shadow:0 6px 16px rgba(20,36,63,.15)}
@media (prefers-reduced-motion:reduce){.btn{transition:none}.btn:active{transform:none}}

/* 6. Mes 13 semaines : semaine en cours bien visible, cases vertes */
.wk.wk-now{border-color:var(--brass);box-shadow:0 0 0 3px var(--tint)}
.wk-a input{accent-color:var(--ok)}
.wk-st.ok{background:var(--ok-bg);border-radius:999px;padding:3px 10px}

/* 7. iPhone : onglets en bas de l'écran, comme une appli */
@media (max-width:820px){
 /* pas de backdrop-filter ici : il ferait de .top le repère du position:fixed de .tabs (barre du bas restée en haut) */
 .top{position:sticky;top:0;padding-top:max(10px,env(safe-area-inset-top,0px));-webkit-backdrop-filter:none;backdrop-filter:none;background:#fff}
 .tabs{position:fixed;left:0;right:0;bottom:0;z-index:40;margin:0;order:0;width:auto;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:0;background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:6px max(6px,env(safe-area-inset-right,0px)) max(8px,env(safe-area-inset-bottom,0px)) max(6px,env(safe-area-inset-left,0px))}
 .tabs a{border-radius:12px;padding:9px 4px;font-size:12px;font-weight:800;color:var(--muted);min-height:44px;display:flex;align-items:center;justify-content:center}
 .tabs a.on{background:var(--tint);color:var(--brass-d)}
 main{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
 aside{top:calc(58px + env(safe-area-inset-top,0px));background:rgba(255,255,255,.96)}
 .lg{margin-left:auto}
}

/* 8. Version équilibrée (Rudy 15/10 19:49 : « trop clair… ça manque un peu de bleu et de dégradé »)
   Bandeaux en dégradé bleu nuit → bleu vif, touches laiton, cartes blanches sur fond légèrement bleuté. */
:root,:root:not(#x){--bg:#eaf0f8;--soft:#e3eaf5;--line:#dbe3ef;--grad:linear-gradient(120deg,#14243f 0%,#1d3a68 55%,#2a5aa0 100%)}
@media (prefers-color-scheme:dark){:root{--bg:#eaf0f8;--soft:#e3eaf5;--line:#dbe3ef}}
.top{background:var(--grad);color:#fff;border-bottom:2px solid var(--brass);-webkit-backdrop-filter:none;backdrop-filter:none}
.brand{color:#fff}
.tabs a{color:#d6e0f0}.tabs a:hover{color:#fff;background:rgba(255,255,255,.1)}
.tabs a.on{background:var(--brass);color:#14243f}
.lg{border-color:rgba(255,255,255,.3)}.lg a,.out{color:#d6e0f0}.lg b{background:var(--brass);color:#14243f}
.hero,.key,.ret{background:var(--grad);color:#fff;border:0;box-shadow:0 10px 28px rgba(20,36,63,.22)}
.hero h1{color:#fff}.hero p,.hero.vz p{color:#d6e0f0}.hero .eb,.ret .eb{color:var(--brass)}
.key b{color:var(--brass)}
.hero .chip{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.25)}
.hero .chip.go{background:var(--brass);color:#14243f;border-color:var(--brass)}
.art{background:radial-gradient(circle at 30% 30%,#2a5aa0,#14243f);border:0;color:var(--brass)}
.live{background:rgba(255,255,255,.1);border-color:rgba(201,165,92,.6)}.live .count{color:#d6e0f0}.live small{color:var(--brass)}
.hero .btn.ghost-l{color:#fff;border-color:rgba(255,255,255,.35)}
.visual{background:var(--grad);color:#fff}.visual .rl,.visual .ft{color:#d6e0f0}.visual .w{color:var(--brass)}
th{background:#14243f;color:var(--brass)}
aside{background:linear-gradient(180deg,#fff 0%,#f3f6fb 100%)}
.mod[aria-current="page"]{background:#e3eaf5;box-shadow:inset 3px 0 0 var(--brass)}
.mod[aria-current="page"] .ico{background:#14243f;color:var(--brass)}
.btn.dark{background:var(--grad)}
.wk.wk-now{box-shadow:0 0 0 3px #f2e6c8}
@media (max-width:820px){
 .top{background:var(--grad)}
 aside{background:#fff}
 .tabs{background:linear-gradient(120deg,#14243f,#1d3a68);border-top:2px solid var(--brass)}
 .tabs a{color:#d6e0f0}
 .tabs a.on{background:var(--brass);color:#14243f}
}