/* ==========================================================================
   TSUKI DEC — THEME
   Minimaliste, plat (aucun degrade), fond clair, bleu electrique en accent.
   Calque sur le vrai code source du template de reference fourni par la
   cliente (Purdue — ThemeOcean/ThemeWagon) : typo Lexend, encre #1a2d62,
   bleu #2c7aff, boutons pilule plats, cartes a bordure OU a ombre douce
   diffuse (jamais les deux), zero degrade nulle part.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@400;500;600;700;800&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Couleurs — noms conserves pour compatibilite avec les styles inline
       existants (ex. dashboard.html) qui referencent deja ces variables */
    --primary: #1a2d62;      /* encre bleu nuit — texte principal (identique au template de reference) */
    --secondary: #2c7aff;    /* bleu electrique (identique au template de reference) */
    --accent: #2c7aff;
    --light: #555555;        /* gris neutre — texte secondaire (identique au template de reference) */
    --white: #ffffff;
    --dark: #1a2d62;
    --red: #ef4444;
    --green: #22c55e;

    /* Fond, bordures, ombres — plates, aucun degrade */
    --bg: #ffffff;
    --bg-alt: #f7f9fc;
    --border: #dddddd;
    --border-hover: #2c7aff;
    --accent-light: rgba(44, 122, 255, 0.1);
    --shadow: rgba(23, 23, 36, 0.08);
    --shadow-md: rgba(23, 23, 36, 0.14);

    /* Badges d'icones — teintes pastel plates, sans degrade, pour varier
       les cartes de fonctionnalites/quiz sans jamais utiliser de gradient */
    --tint-1: rgba(44, 122, 255, 0.1);
    --tint-2: #e3f9f6;
    --tint-3: #eee8ff;
    --tint-4: #fff6eb;

    --font: 'Lexend', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --transition: all 0.2s ease;
    --navbar-height: 80px;
    --hero-bg: #ffffff;
    --radius-sm: 10px;
    --radius: 14px;
    --radius-lg: 20px;
    --radius-pill: 100px;
}

html {
    scroll-behavior: smooth;
}

body, .body {
    font-family: var(--font);
    line-height: 1.6;
    color: var(--primary);
    background: var(--bg);
    min-height: 100vh;
    overflow-x: hidden;
}
/* Filet de sécurité mobile : médias fluides, pas de débordement horizontal */
img, video, iframe, pre { max-width: 100%; }
img, video { height: auto; }

.body-quiz {
    font-family: var(--font);
    line-height: 1.6;
    color: var(--primary);
    background: var(--bg-alt);
    min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font);
    color: var(--primary);
    font-weight: 700;
    line-height: 1.25;
}

p {
    color: var(--light);
}

a {
    color: var(--accent);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

section {
    padding: 80px 20px;
}

/* ==========================================================================
   NAVBAR — plate, sans flou ni ombre, juste une ligne de separation
   ========================================================================== */

.navbar {
    font-family: var(--font);
    background: var(--white);
    color: var(--primary);
    border-bottom: 1px solid var(--border);
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    transition: var(--transition);
    overflow: visible;
}

.nav-container {
    font-family: var(--font);
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--navbar-height);
    position: relative;
}

.nav-brand {
    font-family: var(--font);
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--primary);
    position: relative;
    z-index: 10;
}

.brand-logo {
    width: 44px;
    height: 44px;
    object-fit: contain;
    transition: var(--transition);
    border-radius: var(--radius-sm);
    z-index: 10;
    position: relative;
}
.brand-logo:hover {
    transform: scale(1.05);
}

.brand-text {
    font-family: var(--font);
    font-size: 1.4em;
    font-weight: 700;
    color: var(--primary);
    background: none;
    -webkit-text-fill-color: unset;
}

.nav-item-dropdown { position: relative; }
.nav-item-dropdown.active .user-dropdown { display: block; opacity: 1; visibility: visible; }

/* Menu compte utilisateur (avatar + dropdown), injecte par navbar.js */
.user-indicator {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 10;
}
.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
}
.user-avatar:hover { background: #2c7aff; }
.user-initials { font-weight: 700; font-size: 0.9em; }
.user-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--white);
    min-width: 220px;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    border-top: 2px solid var(--accent);
    box-shadow: 0 10px 30px var(--shadow);
    z-index: 1000;
    overflow: hidden;
}
.user-dropdown.show,
.nav-item-dropdown.active .user-dropdown { display: block; }
.user-info {
    padding: 16px;
    border-bottom: 1px solid var(--bg-alt);
}
.user-name { display: block; font-weight: 600; color: var(--primary); }
.user-email { display: block; font-size: 0.85em; color: var(--light); }
.dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    color: var(--primary);
    text-decoration: none;
    transition: background 0.2s;
    border-bottom: 1px solid var(--bg-alt);
}
.dropdown-item:last-child { border-bottom: none; }
.dropdown-item:hover { background: var(--bg-alt); color: var(--accent); }

/* Lien "Se connecter" mis en avant dans la navbar, en pilule pleine */
.cta-nav {
    background: var(--accent);
    color: var(--white) !important;
    padding: 10px 22px;
    border-radius: var(--radius-pill);
    display: inline-block;
    white-space: nowrap;
    line-height: 1.2;
    text-align: center;
}
.cta-nav:hover { background: #2c7aff; }
.cta-nav::after { display: none !important; }

.dropdown-menu { position: relative; display: inline-block; }
.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--white);
    min-width: 200px;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    border-top: 2px solid var(--accent);
    box-shadow: 0 10px 30px var(--shadow);
    z-index: 1000;
    overflow: hidden;
    margin-top: 8px;
}
.dropdown-content a {
    color: var(--primary);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    transition: background 0.2s;
    border-bottom: 1px solid var(--bg-alt);
}
.dropdown-content a:last-child { border-bottom: none; }
.dropdown-content a:hover { background: var(--bg-alt); color: var(--accent); }
.dropdown-menu:hover .dropdown-content { display: block; }

.nav-dropdown { position: relative !important; }
.nav-submenu {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    background: var(--white) !important;
    min-width: 260px !important;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm) !important;
    border-top: 2px solid var(--accent) !important;
    box-shadow: 0 10px 30px var(--shadow) !important;
    z-index: 1001 !important;
    overflow: hidden !important;
    margin-top: 8px !important;
}
.nav-submenu a {
    color: var(--primary) !important;
    padding: 12px 16px !important;
    text-decoration: none !important;
    display: block !important;
    transition: background 0.2s !important;
    border-bottom: 1px solid var(--bg-alt) !important;
}
.nav-submenu a:last-child { border-bottom: none !important; }
.nav-submenu a:hover { background: var(--bg-alt) !important; color: var(--accent) !important; }
.nav-submenu-header {
    display: block !important;
    padding: 10px 16px 5px !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: var(--accent) !important;
    background: var(--bg-alt) !important;
    border-top: 1px solid var(--border) !important;
}
.nav-dropdown:hover .nav-submenu { display: block !important; }

/* ===== Navbar — alignement sur la maquette (Claude Design handoff) ===== */
.nav-submenu { border-radius: 0 0 10px 10px !important; }
.nav-submenu a {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 18px !important;
    font-size: 0.92em !important;
    font-weight: 500 !important;
    border-bottom: 1px solid var(--bg-alt) !important;
}
.nav-ico { flex: 0 0 auto; }
.nav-menu .dropdown-toggle {
    display: flex !important;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 0.95em;
}
.nav-chevron { flex: 0 0 auto; }
.nav-menu > li > .nav-link {
    border-bottom: 2px solid transparent;
    transition: color .2s ease, border-color .2s ease;
}
.nav-menu > li > .nav-link.active {
    color: var(--accent) !important;
    border-bottom-color: var(--accent);
}
.nav-home { display: flex; align-items: center; }
.nav-home .nav-ico { stroke: currentColor; }

.nav-menu {
    display: flex;
    list-style: none;
    align-items: center;
    gap: 36px;
}
.nav-link {
    text-decoration: none;
    color: var(--primary);
    font-weight: 600;
    font-size: 0.95em;
    transition: var(--transition);
    position: relative;
    padding: 10px 0;
}
.nav-link:hover, .nav-link.active { color: var(--accent); }

.nav-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
    padding: 5px;
}
.nav-toggle span {
    width: 24px;
    height: 2px;
    background: var(--primary);
    transition: var(--transition);
    border-radius: 2px;
    margin-bottom: 5px;
}
.nav-toggle span:last-child { margin-bottom: 0; }

/* ==========================================================================
   HERO — fond plat, sans degrade ni superposition coloree
   ========================================================================== */

.hero, .hero-section {
    font-family: var(--font);
    margin-top: var(--navbar-height);
    padding: 110px 20px 90px;
    position: relative;
    overflow: hidden;
    min-height: 40vh;
    display: flex;
    align-items: center;
    background: var(--hero-bg);
}

.hero-background {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: var(--hero-bg);
}

.hero-content {
    font-family: var(--font);
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 2;
}

.hero-badge {
    background: var(--accent-light);
    border-radius: var(--radius-pill);
    padding: 8px 20px;
    display: inline-block;
    color: var(--accent);
    font-weight: 600;
    font-size: 0.9em;
    margin-bottom: 30px;
}

.hero-title {
    font-family: var(--font);
    font-size: 3.2em;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 22px;
    line-height: 1.15;
    letter-spacing: 0;
}
.hero-title em, .hero-title span.accent { color: var(--accent); font-style: normal; }

.hero-subtitle {
    font-family: var(--font);
    font-size: 1.15em;
    color: var(--light);
    margin-bottom: 40px;
    line-height: 1.6;
    font-weight: 400;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.hero-cta {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
}

/* ==========================================================================
   BOUTONS — plats, forme pilule, aucun degrade ni ombre au repos
   ========================================================================== */

.btn {
    background: var(--accent);
    color: var(--white);
    padding: 15px 36px;
    border: 2px solid var(--accent);
    border-radius: var(--radius-pill);
    font-size: 1em;
    font-weight: 700;
    font-family: var(--font);
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
}
.btn:hover { background: #2c7aff; border-color: #2c7aff; }
.btn:active { opacity: 0.9; }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }

.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--white); }
.btn-primary:hover { background: #2c7aff; border-color: #2c7aff; }

.btn-secondary { background: var(--white); color: var(--primary); border: 2px solid var(--accent); }
.btn-secondary:hover { color: var(--white); background: var(--accent); }

.btn-outline { background: transparent; color: var(--accent); border: 2px solid var(--accent); }
.btn-outline:hover { background: var(--accent); color: var(--white); }

.btn-danger { background: var(--red); border-color: var(--red); color: var(--white); }
.btn-danger:hover { background: #dc2626; border-color: #dc2626; }

.btn-success { background: var(--green); border-color: var(--green); color: var(--white); }
.btn-success:hover { background: #16a34a; border-color: #16a34a; }

.btn-sm { font-size: 0.85em; padding: 10px 22px; }
.btn-block { width: 100%; display: flex; }

/* ==========================================================================
   CARTES — deux traitements distincts du template de reference, jamais
   de degrade ni les deux effets (bordure + ombre) en meme temps
   ========================================================================== */

/* Cartes "feature" : bordure fine, surligne au survol (comme single_feature_one) */
.card, .feature-card {
    font-family: var(--font);
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 36px;
    box-shadow: none;
    transition: var(--transition);
}
.card:hover, .feature-card:hover {
    border-color: var(--accent);
}

/* Cartes "quiz" : sans bordure, ombre douce et diffuse (comme course-item) */
.quiz-card {
    font-family: var(--font);
    background: var(--white);
    border: none;
    border-radius: var(--radius);
    padding: 32px;
    box-shadow: 0 0 60px var(--shadow);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.quiz-card:hover {
    box-shadow: 0 0 60px var(--shadow-md);
}

.card-header {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--bg-alt);
}
.card-title { color: var(--primary); font-size: 1.4em; font-weight: 700; margin-bottom: 6px; }
.card-subtitle { color: var(--light); font-size: 0.95em; }

/* Icones en badge circulaire plat (jamais de degrade), teintes pastel qui
   tournent d'une carte a l'autre pour varier sans jamais sortir du flat */
.feature-icon, .quiz-emoji {
    width: 68px;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 1.8em;
    border-radius: 50%;
    background: var(--tint-1);
}
.feature-card:nth-of-type(4n+2) .feature-icon,
.quiz-card:nth-of-type(4n+2) .quiz-emoji { background: var(--tint-2); }
.feature-card:nth-of-type(4n+3) .feature-icon,
.quiz-card:nth-of-type(4n+3) .quiz-emoji { background: var(--tint-3); }
.feature-card:nth-of-type(4n+4) .feature-icon,
.quiz-card:nth-of-type(4n+4) .quiz-emoji { background: var(--tint-4); }

.feature-card h3, .quiz-card h3 { color: var(--primary); font-size: 1.3em; font-weight: 700; margin-bottom: 14px; text-align: center; }
.feature-card p, .quiz-card p { color: var(--light); line-height: 1.6; font-size: 1em; margin-bottom: 20px; text-align: center; }

/* ==========================================================================
   FORMULAIRES
   ========================================================================== */

input, textarea, select {
    font-family: var(--font);
    font-size: 1em;
    color: var(--primary);
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    transition: var(--transition);
    width: 100%;
}
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-light);
}
label {
    display: block;
    color: var(--primary);
    font-weight: 600;
    font-size: 0.9em;
    margin-bottom: 6px;
}

/* Badges / alertes — plates */
.badge {
    display: inline-block;
    padding: 4px 14px;
    border-radius: var(--radius-pill);
    font-size: 0.8em;
    font-weight: 600;
}
.badge-success, .alert-success { background: #ecfdf3; color: #15803d; }
.badge-error, .alert-error { background: #fef2f2; color: #b91c1c; }
.badge-info, .alert-info { background: var(--accent-light); color: var(--accent); }

.alert-success, .alert-error, .alert-info {
    padding: 14px 18px;
    border-radius: var(--radius-sm);
    font-weight: 500;
}

/* ==========================================================================
   FOOTER — plat, blanc, separe uniquement par l'espacement
   ========================================================================== */

.footer {
    background: var(--white);
    margin-top: auto;
    border-top: 1px solid var(--border);
    padding: 64px 24px 32px;
    box-sizing: border-box;
    text-align: center;
}
.footer p { color: var(--light); font-size: 0.9em; }
.footer a { color: var(--light); text-decoration: none; transition: var(--transition); }
.footer a:hover { color: var(--accent); }

.footer-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    text-align: left;
}
.footer-brand { flex: 1 1 200px; display: flex; flex-direction: column; align-items: flex-start; }
.footer-links { display: flex; flex: 3 1 600px; flex-wrap: wrap; gap: 30px; justify-content: flex-end; }
.footer-column { min-width: 140px; }
.footer-column h4 { color: var(--primary); font-size: 0.95em; margin-bottom: 14px; }
.footer-column a { display: block; padding: 4px 0; }

/* ==========================================================================
   UTILITAIRES GENERIQUES — reutilises par plusieurs pages de contenu
   (politique, mentions-legales, quiz.html, calendrier.html, coming_soon...)
   ========================================================================== */

.main-content { margin-top: var(--navbar-height); min-height: 60vh; }
.section-title { color: var(--primary); font-size: 2.2em; font-weight: 700; text-align: center; margin-bottom: 12px; }
.section-subtitle { color: var(--light); font-size: 1.1em; text-align: center; max-width: 640px; margin: 0 auto 40px; }
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; margin: 40px 0; }
.info-box { background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 24px; color: var(--light); }
.gradient-text { color: var(--accent); } /* ancien texte en degrade -> couleur pleine */
.btn-large { padding: 18px 44px; font-size: 1.1em; }
.btn-icon { margin-right: 6px; }
.btn-pause { background: var(--bg-alt); border-color: var(--border); color: var(--primary); }
.btn-pause:hover { border-color: var(--accent); color: var(--accent); }
.quiz-nav-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }

.notification {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: var(--primary);
    color: var(--white);
    padding: 14px 22px;
    border-radius: var(--radius-sm);
    box-shadow: 0 10px 30px var(--shadow-md);
    font-weight: 500;
    z-index: 2000;
    max-width: 320px;
}
.notification:empty { display: none !important; }

/* ==========================================================================
   ECRAN DE CHARGEMENT SITEWIDE (spinner.js / loading.js / navbar.js)
   ========================================================================== */

.auth-loading-overlay {
    position: fixed;
    inset: 0;
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
}
.auth-loading-container { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.tsuki-spinner { position: relative; width: 64px; height: 64px; }
.spinner-ring {
    position: absolute;
    inset: 0;
    border: 3px solid var(--bg-alt);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: tsuki-spin 1s linear infinite;
}
.spinner-ring:nth-child(2) { inset: 8px; animation-duration: 1.4s; opacity: 0.7; }
.spinner-ring:nth-child(3) { inset: 16px; animation-duration: 1.8s; opacity: 0.5; }
@keyframes tsuki-spin { to { transform: rotate(360deg); } }
.loading-title { color: var(--primary); font-weight: 700; font-size: 1.2em; }
.loading-text { color: var(--light); font-size: 0.95em; }
.loading-progress { width: 200px; height: 4px; background: var(--bg-alt); border-radius: var(--radius-pill); overflow: hidden; }
.progress-bar { height: 100%; width: 40%; background: var(--accent); border-radius: var(--radius-pill); animation: tsuki-progress 1.2s ease-in-out infinite; }
@keyframes tsuki-progress { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }

/* ==========================================================================
   FOOTER — elements ajoutes par footer.js
   ========================================================================== */

.footer-logo { display: flex; align-items: center; }
.footer-logo .brand-logo { width: 40px; height: 40px; }
.footer-bottom {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--bg-alt);
    text-align: center;
    color: var(--light);
    font-size: 0.85em;
}

/* ==========================================================================
   SYSTEME DE FORMULAIRE PARTAGE — contact.html, ideas.html, memoire.html
   ========================================================================== */

.form-group { margin-bottom: 20px; }
.form-label { display: block; font-weight: 600; color: var(--primary); margin-bottom: 6px; font-size: 0.9em; }
.form-input, .form-select, .form-textarea {
    width: 100%;
    font-family: var(--font);
    font-size: 1em;
    color: var(--primary);
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    transition: var(--transition);
}
.form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light); }
.form-textarea { resize: vertical; min-height: 120px; }
.form-help { color: var(--light); font-size: 0.82em; margin-top: 4px; display: block; }
.char-counter { color: var(--light); font-size: 0.8em; text-align: right; display: block; margin-top: 4px; }
.form-disclaimer { color: var(--light); font-size: 0.82em; margin-top: 12px; }
.submit-btn {
    background: var(--accent);
    color: var(--white);
    border: 2px solid var(--accent);
    padding: 14px 32px;
    border-radius: var(--radius-pill);
    font-weight: 700;
    font-family: var(--font);
    cursor: pointer;
    transition: var(--transition);
    font-size: 1em;
}
.submit-btn:hover { background: #2c7aff; border-color: #2c7aff; }

.success-message, .error-message-popup {
    display: none;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-radius: var(--radius-sm);
    margin: 16px 0;
}
.success-message.show, .error-message-popup.show { display: flex; }
.success-message { background: #ecfdf3; color: #15803d; }
.error-message-popup { background: #fef2f2; color: #b91c1c; }
.success-icon, .error-icon { font-size: 1.4em; }
.success-title, .error-title { font-weight: 700; }

.captcha-container { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.captcha-question { color: var(--primary); font-weight: 600; }
.captcha-input { max-width: 100px; }

.form-input.error, .form-textarea.error, .form-select.error { border-color: #ef4444 !important; }
.error-message { color: #b91c1c; font-size: 0.82em; margin-top: 4px; display: block; }

/* ==========================================================================
   PAGE CONTACT
   ========================================================================== */

.contact-header { text-align: center; margin-bottom: 50px; }
.contact-title { font-size: 2.6em; font-weight: 700; color: var(--primary); margin-bottom: 12px; }
.contact-subtitle { color: var(--light); font-size: 1.1em; max-width: 600px; margin: 0 auto; }
.contact-content { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: start; }
.contact-form-section { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 36px; }
.form-title { font-size: 1.3em; font-weight: 700; color: var(--primary); margin-bottom: 24px; }
.contact-form { display: flex; flex-direction: column; }

.contact-info-section { display: flex; flex-direction: column; gap: 20px; }
.info-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; text-align: center; }
.info-icon { font-size: 2.2em; margin-bottom: 12px; display: block; }
.info-title { font-size: 1.1em; font-weight: 700; color: var(--primary); margin-bottom: 8px; }
.info-text { color: var(--light); font-size: 0.95em; }
.info-link { color: var(--accent); font-weight: 600; }

.faq-section { margin-top: 60px; }
.faq-title { text-align: center; font-size: 1.6em; font-weight: 700; color: var(--primary); margin-bottom: 30px; }
.faq-grid { display: flex; flex-direction: column; gap: 12px; max-width: 800px; margin: 0 auto; }
.faq-item { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.faq-question { padding: 18px 22px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; font-weight: 600; color: var(--primary); }
.faq-toggle { transition: transform 0.2s; color: var(--accent); }
.faq-item.active .faq-toggle { transform: rotate(180deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; padding: 0 22px; color: var(--light); }
.faq-item.active .faq-answer { max-height: 300px; padding: 0 22px 18px; }

.social-section { text-align: center; margin-top: 60px; }
.social-title { font-size: 1.3em; font-weight: 700; color: var(--primary); margin-bottom: 20px; }
.social-links { display: flex; justify-content: center; gap: 16px; }
.social-link {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--accent-light);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}
.social-link:hover { background: var(--accent); color: var(--white); }

/* ==========================================================================
   QUIZ.HTML — grille de filtres + cartes generees par quiz-loader.js
   ========================================================================== */

.dates-counter { display: inline-block; background: var(--accent-light); color: var(--accent); padding: 6px 16px; border-radius: var(--radius-pill); font-weight: 600; font-size: 0.9em; margin-bottom: 20px; }
.calendar-section { max-width: 1200px; margin: 0 auto; padding: 0 20px 60px; }
.calendar-nav { display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: 30px; }
.nav-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); background: var(--white); color: var(--primary); cursor: pointer; font-size: 1.1em; transition: var(--transition); }
.nav-btn:hover { border-color: var(--accent); color: var(--accent); }
.current-month { font-weight: 700; color: var(--primary); font-size: 1.1em; min-width: 200px; text-align: center; }

.filter-buttons { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 30px; }
.filter-btn { background: var(--white); border: 2px solid var(--border); color: var(--primary); padding: 10px 22px; border-radius: var(--radius-pill); font-weight: 600; cursor: pointer; transition: var(--transition); font-family: var(--font); }
.filter-btn:hover { border-color: var(--accent); color: var(--accent); }
.filter-btn.active { background: var(--accent); border-color: var(--accent); color: var(--white); }

.loading { text-align: center; padding: 60px 20px; }
.loading-spinner { width: 48px; height: 48px; border: 3px solid var(--bg-alt); border-top-color: var(--accent); border-radius: 50%; animation: tsuki-spin 1s linear infinite; margin: 0 auto 16px; }
.empty-dates { text-align: center; padding: 60px 20px; color: var(--light); }
.empty-dates .emoji { font-size: 3em; display: block; margin-bottom: 16px; }

.calendar-day.calendar-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.calendar-day.calendar-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.quiz-title { font-weight: 700; color: var(--primary); font-size: 1.05em; }
.quiz-difficulte { display: inline-block; padding: 4px 12px; border-radius: var(--radius-pill); font-size: 0.8em; font-weight: 600; align-self: flex-start; }
.difficulte-easy { background: #ecfdf3; color: #15803d; }
.difficulte-medium { background: var(--tint-4); color: #b45309; }
.difficulte-hard { background: #fef2f2; color: #b91c1c; }
.difficulte-none { background: var(--bg-alt); color: var(--light); }

.selected-date-item { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 10px; }
.date-info { display: flex; flex-direction: column; }
.date-number { font-weight: 600; color: var(--primary); }
.date-label { color: var(--light); font-size: 0.9em; }
.date-small { color: var(--light); font-size: 0.8em; }

/* ==========================================================================
   QUIZ-QCM.HTML — moteur de quiz (progression, question, options, resultats,
   revision), genere en grande partie par quiz-qcm.js
   ========================================================================== */

.back-button { display: inline-flex; align-items: center; gap: 6px; color: var(--light); font-weight: 600; margin-bottom: 20px; }
.back-button:hover { color: var(--accent); }
.quiz-header-section { margin-bottom: 30px; }
.quiz-meta { display: flex; gap: 10px; margin: 10px 0; }
.difficulty-badge, .category-badge { display: inline-block; padding: 5px 14px; border-radius: var(--radius-pill); font-size: 0.82em; font-weight: 600; }
.category-badge { background: var(--accent-light); color: var(--accent); }
.difficulty-badge.easy { background: #ecfdf3; color: #15803d; }
.difficulty-badge.medium { background: var(--tint-4); color: #b45309; }
.difficulty-badge.hard { background: #fef2f2; color: #b91c1c; }

.quiz-progress-section { margin-bottom: 30px; }
.progress-info { display: flex; align-items: center; gap: 16px; }
.progress-bar-container { flex: 1; }
.progress-bar { height: 8px; background: var(--bg-alt); border-radius: var(--radius-pill); overflow: hidden; }
.progress-fill { height: 100%; background: var(--accent); border-radius: var(--radius-pill); transition: width 0.3s ease; }
.progress-text { color: var(--light); font-size: 0.9em; white-space: nowrap; }
.timer-score { display: flex; gap: 20px; margin-top: 10px; }
.timer, .score { color: var(--primary); font-weight: 600; }

.question-container { min-height: 200px; }
.question-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 36px; }
.question-number { color: var(--accent); font-weight: 700; font-size: 0.9em; text-transform: uppercase; letter-spacing: 0.03em; }
.question-text { font-size: 1.3em; font-weight: 600; color: var(--primary); margin: 12px 0 24px; line-height: 1.4; }

.options-container { display: flex; flex-direction: column; gap: 12px; }
.option-item { border: 2px solid var(--border); border-radius: var(--radius-sm); transition: var(--transition); }
.option-item:hover { border-color: var(--accent); }
.option-item:has(input:checked) { border-color: var(--accent); background: var(--accent-light); }
.option-item input[type="radio"] { display: none; }
.option-label { display: flex; align-items: center; gap: 14px; padding: 14px 18px; cursor: pointer; }
.option-letter { width: 32px; height: 32px; border-radius: 50%; background: var(--bg-alt); color: var(--primary); display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; transition: var(--transition); }
.option-item input:checked ~ .option-label .option-letter { background: var(--accent); color: var(--white); }
.option-text { color: var(--primary); }

.question-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 30px; }

.results-container { text-align: center; }
.results-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 48px 32px; max-width: 520px; margin: 0 auto; }
.results-title { font-size: 1.6em; font-weight: 700; color: var(--primary); margin-bottom: 24px; }
.final-score { margin-bottom: 24px; }
.score-circle {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 6px solid var(--bg-alt);
}
.score-circle.excellent { border-color: #22c55e; }
.score-circle.good { border-color: var(--accent); }
.score-circle.average { border-color: #f59e0b; }
.score-circle.poor { border-color: #ef4444; }
.score-percentage { font-size: 1.8em; font-weight: 800; color: var(--primary); }
.score-details { color: var(--light); font-size: 0.9em; }
.results-details { display: flex; justify-content: center; gap: 30px; margin-bottom: 30px; flex-wrap: wrap; }
.result-item { text-align: center; }
.result-label { display: block; color: var(--light); font-size: 0.85em; }
.result-value { display: block; color: var(--primary); font-weight: 700; font-size: 1.1em; }
.results-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

.review-container { max-width: 700px; margin: 0 auto; }
.review-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.review-questions { display: flex; flex-direction: column; gap: 16px; }
.review-question-card { background: var(--white); border: 1px solid var(--border); border-left: 4px solid var(--border); border-radius: var(--radius); padding: 20px; }
.review-question-card.correct { border-left-color: #22c55e; }
.review-question-card.incorrect { border-left-color: #ef4444; }
.review-question-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.result-badge { padding: 4px 12px; border-radius: var(--radius-pill); font-size: 0.78em; font-weight: 600; }
.result-badge.correct { background: #ecfdf3; color: #15803d; }
.result-badge.incorrect { background: #fef2f2; color: #b91c1c; }
.review-question-text { color: var(--primary); font-weight: 600; margin-bottom: 14px; }
.review-options { display: flex; flex-direction: column; gap: 8px; }
.review-option { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border); }
.review-option.correct-answer { background: #ecfdf3; border-color: #22c55e; }
.review-option.user-wrong-answer { background: #fef2f2; border-color: #ef4444; }
.option-icon { font-size: 1.1em; }
.explanation, .source { margin-top: 12px; padding: 12px 16px; background: var(--bg-alt); border-radius: var(--radius-sm); color: var(--light); font-size: 0.9em; }

/* ==========================================================================
   BOITE A IDEES — ideas.html / memoire.html
   ========================================================================== */

.ideas-hero { text-align: center; padding: 20px 0 40px; }
.ideas-title { font-size: 2.4em; font-weight: 700; color: var(--primary); margin-bottom: 12px; }
.ideas-subtitle { color: var(--light); font-size: 1.1em; max-width: 600px; margin: 0 auto; }

.ideas-stats { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin: 30px 0; }
.stat-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px 32px; text-align: center; min-width: 140px; }
.stat-number { font-size: 2em; font-weight: 800; color: var(--accent); display: block; }
.stat-label { color: var(--light); font-size: 0.9em; }

.ideas-tabs { display: flex; justify-content: center; gap: 8px; margin-bottom: 30px; flex-wrap: wrap; }
.tab-btn { background: var(--white); border: 2px solid var(--border); color: var(--primary); padding: 10px 22px; border-radius: var(--radius-pill); font-weight: 600; cursor: pointer; font-family: var(--font); transition: var(--transition); }
.tab-btn:hover { border-color: var(--accent); }
.tab-btn.active { background: var(--accent); border-color: var(--accent); color: var(--white); }
.tab-content { display: none; }
.tab-content.active { display: block; }

.ideas-filters { display: flex; justify-content: center; gap: 16px; margin-bottom: 30px; flex-wrap: wrap; }
.filter-group { display: flex; flex-direction: column; gap: 6px; }

.idea-form-section { max-width: 700px; margin: 0 auto; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 36px; }
.idea-form { display: flex; flex-direction: column; }

.ideas-list { display: flex; flex-direction: column; gap: 16px; max-width: 800px; margin: 0 auto; }
.idea-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; transition: var(--transition); }
.idea-card:hover { border-color: var(--accent); }
.idea-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.idea-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.idea-category { background: var(--accent-light); color: var(--accent); padding: 4px 12px; border-radius: var(--radius-pill); font-size: 0.78em; font-weight: 600; }
.idea-status { padding: 4px 12px; border-radius: var(--radius-pill); font-size: 0.78em; font-weight: 600; }
.status-new { background: var(--accent-light); color: var(--accent); }
.status-progress { background: var(--tint-4); color: #b45309; }
.status-planned { background: var(--tint-3); color: #6d28d9; }
.status-done { background: #ecfdf3; color: #15803d; }
.status-rejected { background: #fef2f2; color: #b91c1c; }
.idea-score { font-weight: 700; font-size: 0.95em; }
.idea-score.positive { color: #15803d; }
.idea-score.negative { color: #b91c1c; }
.idea-score.neutral { color: var(--light); }
.idea-content { margin-bottom: 14px; }
.idea-title { font-size: 1.15em; font-weight: 700; color: var(--primary); margin-bottom: 6px; }
.idea-description { color: var(--light); line-height: 1.5; }
.idea-footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.idea-author { color: var(--light); font-size: 0.85em; }
.idea-actions { display: flex; gap: 8px; align-items: center; }
.vote-btn { background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 14px; cursor: pointer; font-weight: 600; color: var(--primary); transition: var(--transition); font-family: var(--font); }
.vote-btn:hover { border-color: var(--accent); }
.vote-btn.vote-up:hover { color: #15803d; border-color: #15803d; }
.vote-btn.vote-down:hover { color: #b91c1c; border-color: #b91c1c; }
.idea-views { color: var(--light); font-size: 0.82em; }

.empty-state { text-align: center; padding: 60px 20px; color: var(--light); }
.empty-state .emoji { font-size: 3em; display: block; margin-bottom: 16px; }

/* ==========================================================================
   RESPONSIVE — composants additionnels ci-dessus
   ========================================================================== */

@media (max-width: 860px) {
    .contact-content { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .question-card, .results-card { padding: 24px; }
    .score-circle { width: 110px; height: 110px; }
    .score-percentage { font-size: 1.4em; }
    .results-details { gap: 18px; }
    .contact-form-section, .idea-form-section { padding: 24px; }
    .ideas-stats { gap: 12px; }
    .stat-card { padding: 18px 22px; min-width: 110px; }

    /* Quiz mobile : cases compactes + bouton suivant sticky */
    .question-card { padding: 16px 12px; }
    .question-text { font-size: 1.05em; margin: 8px 0 16px; }
    .question-number { font-size: 0.78em; }
    .options-container { gap: 8px; }
    .option-label { padding: 10px 12px; gap: 10px; }
    .option-letter { width: 26px; height: 26px; font-size: 0.85em; }
    .question-actions {
        position: sticky; bottom: 0; z-index: 50;
        background: var(--white); padding: 12px 0 8px;
        margin-top: 16px; border-top: 1px solid var(--border);
    }
    .question-actions .btn-primary,
    .question-actions .btn-secondary { padding: 10px 20px; font-size: 0.9em; min-width: 100px; }

    /* Résultats mobile */
    .results-card { padding: 28px 16px; }
    .results-title { font-size: 1.3em; }
    .results-actions { gap: 8px; }
    .results-actions .btn { padding: 10px 16px; font-size: 0.85em; min-width: auto; }
}

/* ==========================================================================
   RESPONSIVE (bloc unique consolide)
   ========================================================================== */

@media (max-width: 768px) {
    .nav-menu {
        position: fixed;
        left: -100%;
        top: var(--navbar-height);
        flex-direction: column;
        background: var(--white);
        width: 100%;
        text-align: center;
        transition: var(--transition);
        padding: 30px 0;
        gap: 4px;
        box-shadow: 0 10px 30px var(--shadow);
    }
    .nav-menu li { margin: 6px 0; }
    .nav-menu.active { left: 0; }
    .nav-toggle { display: flex; }
    .brand-logo { width: 36px; height: 36px; }
    .brand-text { font-size: 1.2em; }

    section { padding: 50px 20px; }
    .hero-title { font-size: 2.3em; }
    .hero-subtitle { font-size: 1.05em; }
    .hero-cta { flex-direction: column; align-items: center; }
    .hero-cta .btn { width: 100%; max-width: 320px; }

    .card, .feature-card, .quiz-card { padding: 24px; }

    .footer-content { flex-direction: column; align-items: center; text-align: center; gap: 25px; }
    .footer-brand { align-items: center; width: 100%; }
    .footer-links { flex-direction: column; justify-content: center; align-items: center; gap: 25px; width: 100%; }
    .footer-column { width: 100%; text-align: center; }
}

@media (max-width: 480px) {
    .hero-title { font-size: 1.9em; }
    .btn { padding: 13px 26px; font-size: 0.95em; }
}