/* Micatan — système de design commun.
   Direction : lanceur de jeux cinématographique, nuit profonde éclairée d'une lumière d'or (vitrail, lampe, aube).
   Un seul univers sombre assumé pour la plateforme ; les Bibles des petits ont leurs propres palettes claires. */
@font-face{font-family:'Cinzel';font-weight:500;font-display:swap;src:url(/commun/fonts/cinzel-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Cinzel';font-weight:600;font-display:swap;src:url(/commun/fonts/cinzel-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Cinzel';font-weight:700;font-display:swap;src:url(/commun/fonts/cinzel-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Figtree';font-weight:400;font-display:swap;src:url(/commun/fonts/figtree-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Figtree';font-weight:600;font-display:swap;src:url(/commun/fonts/figtree-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Figtree';font-weight:700;font-display:swap;src:url(/commun/fonts/figtree-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Figtree';font-weight:800;font-display:swap;src:url(/commun/fonts/figtree-latin-800-normal.woff2) format('woff2')}
@font-face{font-family:'Fredoka';font-weight:400;font-display:swap;src:url(/commun/fonts/fredoka-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Fredoka';font-weight:500;font-display:swap;src:url(/commun/fonts/fredoka-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Fredoka';font-weight:600;font-display:swap;src:url(/commun/fonts/fredoka-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Fredoka';font-weight:700;font-display:swap;src:url(/commun/fonts/fredoka-latin-700-normal.woff2) format('woff2')}

:root{
  color-scheme:dark;
  /* fonds */
  --nuit:#0a0e1c; --nuit-2:#10162d; --nuit-3:#18203f; --ligne:#283363; --ligne-douce:#1e2850;
  /* texte */
  --texte:#eef1fb; --doux:#a3aed3; --pale:#6f7aa3;
  /* lumière */
  --or:#f2b84b; --or-clair:#ffd98a; --or-sombre:#a8741c; --encre-or:#2a1a00;
  /* univers (vitrail) */
  --saphir:#5b8cff; --amethyste:#a77bff; --braise:#ff9a4d; --rubis:#ef6b86; --emeraude:#36c99c; --azur:#4cc6e8;
  /* états */
  --ok:#47d18c; --alerte:#ffb547; --erreur:#ff6b6b;
  /* typo */
  --f-titre:'Cinzel', 'Trajan Pro', Georgia, serif;
  --f-texte:'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-enfant:'Fredoka', 'Figtree', system-ui, sans-serif;
  /* formes */
  --r-s:10px; --r-m:16px; --r-l:24px; --r-xl:32px;
  --ombre:0 18px 50px -18px rgba(0,0,0,.65);
  --lueur:0 0 0 1px rgba(242,184,75,.35), 0 10px 40px -10px rgba(242,184,75,.45);
  --largeur:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--nuit);color:var(--texte);font-family:var(--f-texte);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;min-height:100%}
body.mc-ciel{background:
  radial-gradient(1200px 600px at 70% -10%, rgba(242,184,75,.13), transparent 60%),
  radial-gradient(900px 500px at 0% 10%, rgba(91,140,255,.12), transparent 60%),
  var(--nuit)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--nuit)}
img,svg,canvas{max-width:100%}
a{color:var(--or-clair)}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--or);outline-offset:3px;border-radius:6px}
[hidden]{display:none!important}
h1,h2,h3,h4{margin:0;text-wrap:balance;line-height:1.1}
p{margin:0}
.mc-wrap{max-width:var(--largeur);margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.mc-skip{position:absolute;left:-999px;top:0;z-index:99;background:var(--or);color:var(--encre-or);padding:10px 14px;border-radius:10px;font-weight:700}
.mc-skip:focus{left:16px;top:calc(env(safe-area-inset-top,0px) + 10px)}

/* ---------- barre du lanceur ---------- */
.mc-barre{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(10,14,28,.82);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid var(--ligne-douce)}
.mc-barre-in{display:flex;align-items:center;gap:18px;min-height:64px}
.mc-logo{display:flex;align-items:center;gap:10px;color:var(--texte);text-decoration:none;flex-shrink:0}
.mc-logo svg{width:34px;height:34px}
.mc-logo b{font-family:var(--f-titre);font-weight:700;font-size:1.25rem;letter-spacing:.14em}
.mc-nav{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0;mask-image:linear-gradient(90deg,#000 92%,transparent)}
.mc-nav::-webkit-scrollbar{display:none}
.mc-nav a{white-space:nowrap;color:var(--doux);text-decoration:none;font-weight:600;font-size:.86rem;padding:9px 11px;border-radius:999px;transition:color .2s,background .2s}
.mc-nav a:hover{color:var(--texte);background:var(--nuit-3)}
.mc-nav a[aria-current="page"]{color:var(--texte);background:var(--nuit-3);box-shadow:inset 0 -2px 0 var(--or)}
.mc-outils{display:flex;gap:8px;align-items:center;flex-shrink:0}
.mc-profil{display:flex;align-items:center;gap:8px;border:1px solid var(--ligne);background:var(--nuit-2);border-radius:999px;padding:4px 12px 4px 4px;font-weight:600;font-size:.88rem}
.mc-profil:hover{border-color:var(--or)}
.mc-avatar{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.85rem;color:#0a0e1c;flex-shrink:0}
.mc-langue{border:1px solid var(--ligne);background:transparent;border-radius:999px;padding:7px 11px;font-weight:700;font-size:.8rem;letter-spacing:.06em}
.mc-langue:hover{border-color:var(--or)}
.mc-don{background:linear-gradient(180deg,var(--or-clair),var(--or));color:var(--encre-or);text-decoration:none;font-weight:800;font-size:.85rem;border-radius:999px;padding:9px 14px;white-space:nowrap}
@media (max-width:860px){
  .mc-barre-in{flex-wrap:wrap;gap:8px;padding-block:8px}
  .mc-nav{order:3;flex-basis:100%}
  .mc-outils{margin-left:auto}
  .mc-don{display:none}
}

/* ---------- typographie ---------- */
.mc-eyebrow{font-size:.72rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--or)}
.mc-titre{font-family:var(--f-titre);font-weight:700;letter-spacing:.02em}
.mc-h1{font-family:var(--f-titre);font-weight:700;font-size:clamp(2.2rem,5.6vw,4.4rem);letter-spacing:.01em;line-height:1.02}
.mc-h2{font-family:var(--f-titre);font-weight:700;font-size:clamp(1.6rem,3.4vw,2.5rem)}
.mc-h3{font-family:var(--f-titre);font-weight:600;font-size:1.25rem}
.mc-lead{font-size:1.12rem;color:var(--doux);max-width:60ch}
.mc-ref{font-family:var(--f-titre);font-size:.78rem;letter-spacing:.12em;color:var(--or-clair)}
.mc-or{background:linear-gradient(180deg,var(--or-clair),var(--or) 60%,var(--or-sombre));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- boutons ---------- */
.mc-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:14px;padding:14px 22px;font-weight:800;font-size:1rem;text-decoration:none;cursor:pointer;transition:transform .15s,box-shadow .2s,filter .2s;min-height:48px}
.mc-btn:active{transform:translateY(1px)}
.mc-btn-or{background:linear-gradient(180deg,var(--or-clair),var(--or));color:var(--encre-or);box-shadow:var(--lueur)}
.mc-btn-or:hover{filter:brightness(1.06)}
.mc-btn-verre{background:rgba(255,255,255,.06);color:var(--texte);border:1px solid var(--ligne)}
.mc-btn-verre:hover{border-color:var(--or);background:rgba(255,255,255,.09)}
.mc-btn:disabled{opacity:.5;cursor:not-allowed}

/* ---------- surfaces ---------- */
.mc-panneau{background:linear-gradient(180deg,var(--nuit-2),rgba(16,22,45,.7));border:1px solid var(--ligne-douce);border-radius:var(--r-l);padding:24px}
.mc-carte{position:relative;background:var(--nuit-2);border:1px solid var(--ligne-douce);border-radius:var(--r-l);overflow:hidden;transition:transform .25s,border-color .25s,box-shadow .25s}
.mc-carte:hover{transform:translateY(-4px);border-color:var(--ligne);box-shadow:var(--ombre)}
.mc-puce{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;border-radius:999px;background:var(--nuit-3);color:var(--doux)}
.mc-section{padding-block:64px}
.mc-tete{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:28px}
.mc-tete .mc-lead{margin-top:10px}
.mc-barre-progres{height:8px;border-radius:999px;background:var(--nuit-3);overflow:hidden}
.mc-barre-progres>i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--or-sombre),var(--or),var(--or-clair))}
.mc-etoiles{color:var(--or);letter-spacing:.1em}
.mc-chiffres{font-variant-numeric:tabular-nums}

/* ---------- dialogue profils ---------- */
.mc-dialogue{border:1px solid var(--ligne);background:var(--nuit-2);color:var(--texte);border-radius:var(--r-l);padding:0;width:min(560px,calc(100vw - 32px));box-shadow:0 40px 120px -20px #000}
.mc-dialogue::backdrop{background:rgba(5,8,18,.72);backdrop-filter:blur(4px)}
.mc-dialogue-in{padding:26px;display:grid;gap:18px}
.mc-dialogue h2{font-family:var(--f-titre);font-size:1.4rem}
.mc-liste-profils{display:grid;gap:8px}
.mc-ligne-profil{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--ligne-douce);border-radius:14px;background:var(--nuit);text-align:left;width:100%}
.mc-ligne-profil[aria-pressed="true"]{border-color:var(--or);box-shadow:inset 0 0 0 1px var(--or)}
.mc-ligne-profil small{display:block;color:var(--doux);font-size:.8rem}
.mc-champ{display:grid;gap:6px;font-weight:600;font-size:.9rem}
.mc-champ input,.mc-champ select,.mc-champ textarea{width:100%;background:var(--nuit);border:1px solid var(--ligne);color:var(--texte);border-radius:12px;padding:12px;font:inherit}
.mc-couleurs{display:flex;gap:8px;flex-wrap:wrap}
.mc-couleurs button{width:34px;height:34px;border-radius:50%;border:2px solid transparent}
.mc-couleurs button[aria-pressed="true"]{border-color:#fff;box-shadow:0 0 0 2px var(--nuit-2),0 0 0 4px var(--or)}
.mc-note{font-size:.82rem;color:var(--pale)}

/* ---------- pied ---------- */
.mc-pied{border-top:1px solid var(--ligne-douce);padding-block:36px;color:var(--pale);font-size:.86rem}
.mc-pied-in{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.mc-sans-marge{padding:0}.mc-rangee{display:flex;gap:10px;flex-wrap:wrap;align-items:center}