/* ════════════════════════════════════════════════════════════
   base.css — Fondation partagée par toutes les pages
   (tokens de couleur, thème clair/sombre, reset, composants communs)
   EduManager for Élite
   ════════════════════════════════════════════════════════════ */

/* ─── TOKENS ─── */
:root {
    --gold:        #c9a227;
    --gold-light:  #e4bc45;
    --gold-wash:   rgba(201, 162, 39, 0.10);
    --gold-ring:   rgba(201, 162, 39, 0.22);

    --bg:          #ffffff;
    --surface:     #f7f7f7;
    --border:      #e4e4e4;
    --text:        #0f0f0f;
    --text-muted:  #7a7a7a;
    --card-bg:     #ffffff;
    --card-hover:  #fafaf8;
}

[data-theme="sombre"] {
    --bg:         #0c0c0c;
    --surface:    #161616;
    --border:     #282828;
    --text:       #f0f0f0;
    --text-muted: #868686;
    --card-bg:    #181818;
    --card-hover: #1e1e1e;
}

/* ─── RESET & BASE ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Garde-fou MOBILE : jamais de défilement horizontal de la page entière — un élément trop large
   (titre, tableau…) scrolle DANS son conteneur, pas en poussant tout l'écran de côté. */
html, body { height: 100%; max-width: 100%; overflow-x: hidden; }
img, svg, video { max-width: 100%; height: auto; }
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg);
    color: var(--text);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    transition: background 0.28s ease, color 0.28s ease;
    -webkit-font-smoothing: antialiased;
}

/* ─── TOPBAR (accueil, connexion, espaces simples) ─── */
.topbar { position:fixed; top:0; left:0; right:0; height:54px; display:flex; align-items:center; justify-content:space-between; padding:0 18px; gap:8px; background:var(--bg); border-bottom:1px solid var(--border); z-index:10001; pointer-events:auto !important; transition: background 0.28s, border-color 0.28s; }
.topbar-left, .topbar-right { display:flex; align-items:center; gap:10px; }
.topbar-left { justify-content:flex-start; }
.topbar-right { justify-content:flex-end; }

.btn-icone { width:36px; height:36px; border-radius:50%; border:1px solid var(--border); background:var(--surface); color:var(--text); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:0.95rem; text-decoration:none; position:relative; z-index:10002; pointer-events:auto !important; transition: border-color .2s, background .2s, transform .18s; flex-shrink:0; }
.btn-icone:hover { border-color:var(--gold); background:var(--gold-wash); transform:scale(1.08); }

/* Vignette du logo d'une école (partout où son nom apparaît) */
.ecole-logo { width:28px; height:28px; border-radius:7px; flex-shrink:0; object-fit:contain; background:#fff; border:1px solid var(--border); display:inline-flex; align-items:center; justify-content:center; vertical-align:middle; }
.ecole-logo-init { background:var(--gold-wash); color:var(--gold); font-weight:800; font-size:0.85rem; border-color:var(--gold-ring); }
.ecole-badge { display:inline-flex; align-items:center; gap:8px; min-width:0; }
.ecole-badge-nom { font-size:0.85rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:160px; }
@media (max-width:640px){ .ecole-badge-nom { display:none; } }

/* ─── CONTENU CENTRÉ (accueil, connexion, espaces simples) ─── */
.main { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:80px 24px 40px; }

/* ─── ANIMATION ─── */
@keyframes fadeUp { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }

/* ─── ZONE LOGO (accueil + espaces) ─── */
.logo-zone { display:flex; flex-direction:column; align-items:center; text-align:center; margin-bottom:52px; animation:fadeUp .55s ease both; animation-delay:.05s; }
.logo-img { width:140px; height:140px; border-radius:26px; object-fit:cover; border:2px solid var(--gold-ring); box-shadow: 0 0 0 6px var(--gold-wash), 0 14px 44px rgba(0,0,0,0.12); margin-bottom:20px; transition: box-shadow .3s, transform .3s; }
.logo-img:hover { box-shadow: 0 0 0 8px var(--gold-ring), 0 18px 50px rgba(0,0,0,0.14); transform:scale(1.04); }
/* Titre FLUIDE (clamp) : s'adapte à toute largeur d'écran — de 1,5rem sur petit téléphone à 3,2rem
   sur grand écran — sans jamais déborder. overflow-wrap : coupe si vraiment nécessaire. */
.logo-titre { font-family:'Cormorant Garamond', Georgia, serif; font-size:clamp(1.5rem, 7vw, 3.2rem); font-weight:700; letter-spacing:.06em; line-height:1.08; color:var(--text); max-width:100%; overflow-wrap:break-word; }
.logo-titre .sep { font-family:'Inter',sans-serif; font-weight:300; font-size:clamp(1rem, 3.5vw, 1.8rem); letter-spacing:.04em; color:var(--text-muted); margin:0 6px; }
.logo-titre .elite { font-style:italic; color:var(--gold); }
.gold-rule { width:56px; height:3px; background:var(--gold); border-radius:3px; margin:18px auto 16px; opacity:0; animation:fadeUp .4s ease .35s forwards; }
.logo-slogan { font-size:1.12rem; font-weight:600; color:var(--gold); letter-spacing:0.02em; }

/* ─── BOUTONS COMMUNS ─── */
.btn-primary { width:100%; padding:12px; margin-top:4px; border:none; border-radius:11px; background:var(--gold); color:#fff; font-family:inherit; font-weight:700; font-size:0.95rem; cursor:pointer; box-shadow:0 8px 20px rgba(201,162,39,0.18); transition:transform .12s, box-shadow .12s; }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 12px 28px rgba(201,162,39,0.26); }
.btn-retour { display:inline-block; padding:11px 22px; border-radius:24px; background:var(--gold); color:#fff; text-decoration:none; font-weight:600; box-shadow:0 6px 18px var(--gold-wash); transition: transform .14s, box-shadow .14s; }
.btn-retour:hover { transform:translateY(-2px); box-shadow:0 10px 26px rgba(201,162,39,0.18); }

/* ─── PAGES « EN CONSTRUCTION » (espaces parent / école) ─── */
.construction { text-align:center; margin-top:8px; animation:fadeUp .55s ease .25s both; }
.construction p { color:var(--text-muted); font-size:1.05rem; margin-bottom:20px; }

/* ─── Accessibilité ─── */
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation:none !important; transition:none !important; } }