/* =====================================================================
   Feuille de style dédiée à la page d'accueil publique (index.php).
   Sous-ensemble de styles.css : ne contient que les variables et
   règles réellement utilisées par cette page, pour éviter de charger
   le CSS complet de l'application (barre latérale, listes, admin...)
   sur une page où il ne sert à rien (conformité RGESN / GR491).
   ===================================================================== */

:root {
    --accent: #8b2238;
    --accent-dark: #6f1a2c;
    --accent-solid: #8b2238;

    --bg: #f4f4f7;
    --surface: #ffffff;
    --surface-2: #fafafb;
    --border: #e8e8ee;

    --text: #23232a;
    --muted: #74747f;

    --shadow-h: 0 12px 30px rgba(30, 25, 60, 0.10);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; padding: 0; }

body {
    font-family: "Inter", "Trebuchet MS", sans-serif;
    color: var(--text);
    line-height: 1.55;
    background: var(--bg);
}

h1, h2, h3 { font-family: "Poppins", "Trebuchet MS", sans-serif; line-height: 1.2; margin-top: 0; color: var(--text); letter-spacing: -0.01em; }
h1 { text-align: left; font-weight: 700; font-size: clamp(1.5rem, 2.6vw, 1.9rem); margin-bottom: 1rem; }

a { color: var(--accent); text-decoration: none; font-weight: 600; transition: color 0.16s ease; }
a:hover { color: var(--accent-dark); }

a:focus-visible {
    outline: 3px solid rgba(139, 34, 56, 0.35); outline-offset: 2px;
}

#theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; font-size: 1.7rem; line-height: 1; cursor: pointer; color: var(--accent); border: 0; border-radius: 50%; background: transparent; transition: transform 0.16s ease, color 0.16s ease; }
#theme-toggle:hover { transform: rotate(-12deg) scale(1.08); background: var(--surface-2); color: var(--accent); }

/* ============================= Landing =========================== */
.landing-page { margin: 0; min-height: 100vh; background: var(--bg); }
.landing-stage { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.2rem; }
.landing-frame { width: min(1240px, 100%); min-height: min(720px, 88vh); background: var(--surface); border: 1px solid var(--border); border-radius: 24px; box-shadow: var(--shadow-h); display: grid; grid-template-columns: 260px minmax(320px, 1fr) minmax(320px, 0.9fr); gap: 2rem; padding: 1.8rem; }
.landing-sidebar { background: var(--accent-solid); border-radius: 20px; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 2.2rem 1.2rem 1.6rem; }
.landing-sidebar-logo { margin: 0; min-height: 1.2rem; font-weight: 800; }
.landing-sidebar-nav { display: flex; flex-direction: column; gap: 1.1rem; width: 100%; }
.landing-sidebar-nav a { display: block; width: 100%; text-align: center; padding: 0.82rem 0.9rem; border-radius: 999px; color: #fff; border: 1px solid rgba(255, 255, 255, 0.45); font-weight: 600; background: rgba(255, 255, 255, 0.12); }
.landing-sidebar-nav a:hover { text-decoration: none; background: rgba(255, 255, 255, 0.24); color: #fff; }
.landing-sidebar-footer { font-size: 0.92rem; opacity: 0.95; }
.landing-sidebar-bottom { display: flex; flex-direction: column; align-items: center; gap: 0.85rem; }
.landing-sidebar-bottom #theme-toggle { background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.4); color: #fff; }
.landing-sidebar-bottom #theme-toggle:hover { background: rgba(255, 255, 255, 0.28); color: #fff; }
.landing-content { align-self: center; color: var(--text); max-width: 520px; }
.landing-content h1 { margin: 0; font-size: clamp(2.6rem, 5vw, 4.4rem); line-height: 1; text-align: left; color: var(--accent); }
.landing-subtitle { margin: 0.95rem 0 0; font-size: clamp(1.1rem, 2vw, 1.6rem); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 700; }
.landing-text { margin: 1rem 0 1.5rem; color: var(--muted); max-width: 42ch; }
.landing-visual { align-self: center; min-height: 520px; border-radius: 20px; position: relative; overflow: hidden; background: var(--surface-2); border: 1px solid var(--border); }
.landing-visual::after { content: ""; position: absolute; inset: auto 7% 3% auto; width: min(90%, 460px); height: 92%; background: url("images/snowman_mobile.webp") right bottom / contain no-repeat; }

/* ============================= Dark mode ========================= */
body.dark-mode {
    --accent: #d98a98; --accent-dark: #e9aab5;
    --accent-solid: #8b2238;
    --bg: #14141a; --surface: #1d1d25; --surface-2: #23232c; --border: #30303b;
    --text: #ece9f1; --muted: #a8a4b4;
    --shadow-h: 0 12px 30px rgba(0, 0, 0, 0.5);
    color: var(--text); background: var(--bg);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ============================ Responsive ========================= */
@media (max-width: 1180px) {
    .landing-frame { grid-template-columns: 220px minmax(300px, 1fr) minmax(280px, 0.9fr); gap: 1.3rem; padding: 1.3rem; }
    .landing-visual { min-height: 440px; }
}

@media (max-width: 920px) {
    .landing-frame { grid-template-columns: 1fr; min-height: 0; padding: 1rem; gap: 1rem; }
    .landing-sidebar { border-radius: 16px; flex-direction: column; gap: 1rem; padding: 1rem; order: 3; }
    .landing-sidebar-nav { flex-direction: row; justify-content: center; gap: 0.7rem; }
    .landing-content { max-width: none; order: 1; text-align: center; }
    .landing-content h1 { text-align: center; font-size: clamp(2.6rem, 11vw, 4rem); }
    .landing-subtitle, .landing-text { text-align: center; margin-left: auto; margin-right: auto; }
    .landing-visual { order: 2; min-height: 320px; }
    .landing-visual::after { inset: auto 0 2% 0; transform: none; width: auto; height: 88%; background-position: center bottom; }
}

@media (max-width: 560px) {
    .landing-stage { padding: 0.6rem; }
    .landing-sidebar { align-items: stretch; gap: 0.75rem; }
    .landing-sidebar-logo, .landing-sidebar-footer { text-align: center; }
    .landing-sidebar-nav { flex-direction: column; gap: 0.55rem; }
    .landing-content h1 { font-size: clamp(2.2rem, 13vw, 3rem); }
    .landing-visual { min-height: 240px; }
}