/* ── Zmaths — Style principal ─────────────────────────────────────── */
/* Layout : splash + nav sticky qui se transforme en header compact    */

/* ── Variables ───────────────────────────────────────────────────── */
:root {
    --nav-height: 44px;
    --footer-height: 46px;
    --largeur-feuille: 1000px;

    --couleur-fond:           #120B08;
    --couleur-fond-clair:     #1e1510;
    --couleur-craie:          #e8e0d0;
    --couleur-craie-vive:     #f5f0e6;

    --couleur-carreaux-fond:  #f0f4f8;
    --couleur-carreaux-ligne: #b8cce0;

    --couleur-accent:         #2563eb;
    --couleur-accent-hover:   #1d4ed8;

    --couleur-texte:            #1e293b;
    --couleur-texte-secondaire: #64748b;
    --couleur-surface:          #ffffff;
    --couleur-bordure:          #e2e8f0;
    --couleur-bordure-legere:   #f1f5f9;
    --couleur-primaire:         #1a365d;
    --couleur-primaire-clair:   #2b4c7e;

    --rayon:            8px;
    --ombre:            0 1px 3px rgba(0, 0, 0, 0.08);
    --ombre-hover:      0 4px 12px rgba(0, 0, 0, 0.12);
    --espacement:       1.5rem;
}

/* ── Reset ───────────────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ── Base ────────────────────────────────────────────────────────── */
html { font-size: 16px; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--couleur-texte);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--couleur-fond) url("/static/zmaths/images/fond-perdu.png") no-repeat center center;
    background-size: cover;
    background-attachment: fixed;
    overflow: hidden;
}

a { color: var(--couleur-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }

/* ── SPLASH (page d'accueil, vue plein écran) ────────────────────── */
.splash {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    background: var(--couleur-fond) url("/static/zmaths/images/fond-perdu.png") no-repeat center center;
    background-size: cover;
    position: relative;
    z-index: 2;
}

.splash-header {
    width: 100%;
    display: block;
}

.splash-logo {
    width: 50px;
    height: 50px;
    object-fit: contain;
    margin: 1rem 0;
}

.splash-titre {
    font-family: "Segoe Print", "Comic Sans MS", "Bradley Hand", cursive;
    font-size: 3rem;
    font-weight: 700;
    color: var(--couleur-craie-vive);
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
    text-align: center;
    letter-spacing: 0.02em;
    margin-top: 1.5rem;
    margin-bottom: 0;
    line-height: 1.1;
}

.splash-sous-titre {
    font-family: "Segoe Print", "Comic Sans MS", "Bradley Hand", cursive;
    font-size: 2.2rem;
    color: var(--couleur-craie);
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.15);
    text-align: center;
    opacity: 0.8;
}

/* Masquer footer quand splash visible */
body.has-splash .site-footer {
    opacity: 0;
    pointer-events: none;
}

.splash .scroll-hint {
    margin-top: auto;
    margin-bottom: 2rem;
    border-color: var(--couleur-craie);
    color: var(--couleur-craie);
    opacity: 0.5;
}

/* ── BARRE DE NAVIGATION (sticky, se transforme en compact) ──────── */
.site-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--couleur-fond-clair);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: background 0.3s ease;
}

.nav-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--nav-height);
    padding: 0 1.25rem;
    gap: 1rem;
    transition: justify-content 0.3s ease;
}

/* Logo (masqué par défaut, visible en mode compact) */
.nav-brand {
    display: none;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}

.nav-brand:hover { text-decoration: none; opacity: 0.9; }

.nav-logo {
    height: 44px;
    width: auto;
}

/* Menu horizontal — aligné sur le bord gauche de la feuille */
.nav-links {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: var(--largeur-feuille);
    margin: 0 auto;
    gap: 1rem;
}

/* Liens à droite (Réserver / Youtube) */
.nav-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.nav-right a {
    color: var(--couleur-craie);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.15s;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.nav-right a:hover {
    color: var(--couleur-craie-vive);
    text-decoration: none;
}

/* Séparateur | */
.nav-sep {
    color: var(--couleur-craie);
    opacity: 0.3;
    font-size: 0.85rem;
    user-select: none;
}

.nav-links > a {
    color: var(--couleur-craie);
    text-decoration: none;
    font-size: 0.9rem;
    padding: 0.4rem 0;
    transition: color 0.15s;
}

.nav-links > a:hover {
    color: var(--couleur-craie-vive);
    text-decoration: none;
}

/* Dropdown */
.nav-dropdown { position: relative; }

.nav-dropdown-toggle {
    color: var(--couleur-craie);
    text-decoration: none;
    font-size: 0.9rem;
    cursor: pointer;
    padding: 0.4rem 0;
    display: inline-block;
    transition: color 0.15s;
}

.nav-dropdown-toggle:hover {
    color: var(--couleur-craie-vive);
    text-decoration: none;
}

.nav-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding-top: 0.4rem;
    z-index: 100;
}

.nav-dropdown-menu-inner {
    background: var(--couleur-surface);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
    box-shadow: var(--ombre-hover);
    min-width: 180px;
    padding: 0.4rem 0;
}

.nav-dropdown-menu-inner a {
    display: block;
    padding: 0.5rem 1rem;
    font-size: 0.86rem;
    color: var(--couleur-texte);
    text-decoration: none;
    white-space: nowrap;
}

.nav-dropdown-menu-inner a:hover {
    background: var(--couleur-bordure-legere);
    color: var(--couleur-accent);
    text-decoration: none;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
    display: block;
}

/* Liens externes (masqués par défaut, visibles en compact) */
.nav-sites {
    display: none;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.nav-site-link {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--couleur-craie);
    text-decoration: none;
    font-size: 0.72rem;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.nav-site-link:hover {
    opacity: 1;
    text-decoration: none;
    color: var(--couleur-craie-vive);
}

.nav-site-link img {
    width: 18px;
    height: 18px;
    border-radius: 3px;
    object-fit: contain;
}

/* ── MODE COMPACT (quand on scrolle ou pages intérieures) ────────── */
.site-nav.compact {
    background: var(--couleur-fond);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

/* En compact : 3 colonnes — gauche (120px min) | menu (flexible) | droite (120px min) */
.site-nav.compact .nav-inner {
    justify-content: space-between;
    height: auto;
    min-height: 60px;
    padding: 0.5rem 0;
}

.site-nav.compact .nav-brand {
    display: flex;
    min-width: 120px;
    flex-shrink: 0;
    justify-content: center;
}

.site-nav.compact .nav-links {
    flex: 1;
    width: auto;
    min-width: 0;
    justify-content: center;
    gap: 1rem;
}

.site-nav.compact .nav-sites {
    display: flex;
    flex-direction: column;
    min-width: 120px;
    flex-shrink: 0;
    align-items: center;
    gap: 0.1rem;
}

.site-nav.compact .nav-links > a,
.site-nav.compact .nav-dropdown-toggle,
.site-nav.compact .nav-sep,
.site-nav.compact .nav-right a {
    font-size: 0.78rem;
    line-height: 1.15;
    text-align: center;
}

.site-nav.compact .nav-dropdown,
.site-nav.compact .nav-right {
    text-align: center;
}



/* Hamburger (mobile) */
.hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    color: var(--couleur-craie-vive);
}

.hamburger svg {
    width: 24px;
    height: 24px;
}

/* Menu mobile masqué sur desktop */
.mobile-nav {
    display: none;
}

/* ── ZONE DE CONTENU ────────────────────────────────────────────── */
.site-body {
    position: fixed;
    top: 0;
    bottom: var(--footer-height);
    left: 0;
    right: 0;
    z-index: 1;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #666 #1a1a1a;
}

.site-body::-webkit-scrollbar { width: 10px; }
.site-body::-webkit-scrollbar-track { background: #1a1a1a; }
.site-body::-webkit-scrollbar-thumb { background: #555; border-radius: 5px; }
.site-body::-webkit-scrollbar-thumb:hover { background: #777; }

/* Fond feuille quadrillée (fixe, centré) */
.site-body::before {
    content: "";
    position: fixed;
    top: 0;
    bottom: var(--footer-height);
    left: 50%;
    transform: translateX(-50%);
    width: min(var(--largeur-feuille), calc(100vw - 240px));
    background-color: var(--couleur-carreaux-fond);
    background-image:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 19px,
            var(--couleur-carreaux-ligne) 19px,
            var(--couleur-carreaux-ligne) 20px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 19px,
            var(--couleur-carreaux-ligne) 19px,
            var(--couleur-carreaux-ligne) 20px
        );
    background-size: 20px 20px;
    z-index: 0;
    pointer-events: none;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
}

/* Contenu — reste dans la feuille */
.parchment {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    width: 100%;
    max-width: min(var(--largeur-feuille), calc(100vw - 240px));
    margin: 0 auto;
    padding: 0.5rem clamp(1.5rem, 4vw, 3rem) 4rem;
}

/* ── FOOTER (fixe en bas) ───────────────────────────────────────── */
.site-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    height: var(--footer-height);
    background: var(--couleur-fond);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0 1rem;
    display: flex;
    align-items: center;
    transition: opacity 0.3s ease;
}

.footer-inner {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-left {
    font-size: 0.78rem;
    color: var(--couleur-craie);
    opacity: 0.6;
}

.footer-right {
    display: flex;
    gap: 1.25rem;
}

.footer-right a {
    color: var(--couleur-craie);
    text-decoration: none;
    font-size: 0.78rem;
    opacity: 0.5;
}

.footer-right a:hover {
    opacity: 1;
    color: var(--couleur-craie-vive);
}

/* ── CONTENU — styles réutilisés ────────────────────────────────── */

/* Flèche scroll dans un cercle */
.scroll-hint {
    margin-top: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 2px solid var(--couleur-texte-secondaire);
    border-radius: 50%;
    color: var(--couleur-texte-secondaire);
    opacity: 0.4;
    animation: rebond 2s ease-in-out infinite;
    cursor: pointer;
}

@keyframes rebond {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(8px); }
}

/* Page header */
.page-header { padding: 1.5rem 0; }
.page-header h1 { font-size: 2rem; font-weight: 700; color: var(--couleur-primaire); margin-bottom: 0.5rem; }
.page-header p { color: var(--couleur-texte-secondaire); }

/* Breadcrumb */
.breadcrumb { font-size: 0.85rem; color: var(--couleur-texte-secondaire); margin-bottom: 1rem; }
.breadcrumb a { color: var(--couleur-texte-secondaire); }
.breadcrumb a:hover { color: var(--couleur-accent); }

/* Cards */
.niveaux-grid { padding: 2rem 0; }
.niveaux-grid > p { margin-bottom: 1rem; }

.niveaux-grid h2,
.chapitres-section h2,
.pdfs-section h2,
.catalogue-section h2 {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--couleur-primaire);
    margin-top: 2rem;
    margin-bottom: 1rem;
}
.chapitres-section h2:first-child { margin-top: 0; }

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
}

.cards.cards-4 {
    grid-template-columns: repeat(4, 1fr);
}

.card {
    display: block;
    background: var(--couleur-surface);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
    padding: 1.5rem;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s, border-color 0.2s;
}

.card:hover {
    text-decoration: none;
    box-shadow: var(--ombre-hover);
    border-color: var(--couleur-accent);
}

.card h3 { font-size: 1.1rem; font-weight: 600; color: var(--couleur-primaire); margin-bottom: 0.5rem; }
.card p { font-size: 0.9rem; color: var(--couleur-texte-secondaire); margin-bottom: 0.75rem; }

.badge {
    display: inline-block;
    font-size: 0.8rem;
    background: var(--couleur-bordure-legere);
    color: var(--couleur-texte-secondaire);
    padding: 0.2rem 0.6rem;
    border-radius: 100px;
}

/* Stats */
.stats-section { padding: 2rem 0; }

.stats-bar {
    display: flex;
    justify-content: center;
    gap: 3rem;
    padding: 2rem;
    background: var(--couleur-surface);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
}

.stat { text-align: center; }
.stat-number { display: block; font-size: 2rem; font-weight: 800; color: var(--couleur-primaire); }
.stat-label { font-size: 0.85rem; color: var(--couleur-texte-secondaire); }

/* Catalogue / PDF */
.catalogue-section { padding: 2rem 0; }

.filter-bar { display: flex; gap: 0.75rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.filter-bar select { padding: 0.5rem 0.75rem; border: 1px solid var(--couleur-bordure); border-radius: var(--rayon); background: var(--couleur-surface); font-size: 0.9rem; color: var(--couleur-texte); cursor: pointer; }

.catalogue-list { display: flex; flex-direction: column; gap: 0.5rem; }

.pdf-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: var(--couleur-surface);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
}

.pdf-info { flex: 1; min-width: 0; }
.pdf-titre { display: block; font-size: 0.95rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdf-meta { display: flex; gap: 0.4rem; margin-top: 0.25rem; }

.tag { display: inline-block; font-size: 0.7rem; padding: 0.1rem 0.5rem; border-radius: 100px; text-transform: uppercase; letter-spacing: 0.03em; font-weight: 600; }
.tag-niveau { background: #dbeafe; color: #1e40af; }
.tag-type   { background: #f0fdf4; color: #166534; }
.tag-version { background: #fef3c7; color: #92400e; }

.btn-download {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.9rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--couleur-accent);
    border: 1px solid var(--couleur-accent);
    border-radius: var(--rayon);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.btn-download:hover { background: var(--couleur-accent); color: white; text-decoration: none; }
.no-results { text-align: center; padding: 2rem; color: var(--couleur-texte-secondaire); }

/* Article content */
.article-content { padding: 0 0 3rem; line-height: 1.75; }
.article-content h2 { font-size: 1.4rem; font-weight: 700; color: var(--couleur-primaire); margin: 2rem 0 0.75rem; }
.article-content h3 { font-size: 1.15rem; font-weight: 600; margin: 1.5rem 0 0.5rem; }
.article-content h3 a { color: inherit; }
.article-content h3:has(a[href*="cours-"]) {
    border-left: 4px solid #dc2626;
    padding-left: 0.75rem;
}
.article-content h3:has(a[href*="exercices-"]),
.article-content h3:has(a[href*="questions-flash"]) {
    border-left: 4px solid #2563eb;
    padding-left: 0.75rem;
}
.article-content h3:has(a[href*="activite-"]),
.article-content h3:has(a[href*="correction-"]) {
    border-left: 4px solid #16a34a;
    padding-left: 0.75rem;
}
.article-content p { margin-bottom: 1rem; }
.article-content ul, .article-content ol { margin: 0.5rem 0 1rem 1.5rem; }
.article-content li { margin-bottom: 0.25rem; }
.article-content blockquote { border-left: 3px solid var(--couleur-accent); padding: 0.75rem 1rem; margin: 1rem 0; color: var(--couleur-texte-secondaire); background: var(--couleur-bordure-legere); border-radius: 0 var(--rayon) var(--rayon) 0; }
.article-content .fiche {
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    background: var(--couleur-surface);
}
.article-content .fiche h3 { margin-top: 0; margin-bottom: 0.5rem; }
.article-content .fiche p:last-child { margin-bottom: 0; }
.article-content a[href$=".pdf"] {
    display: inline-block;
    padding: 0.35rem 0.85rem;
    margin: 0.15rem 0.25rem 0.15rem 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--couleur-accent);
    border: 1px solid var(--couleur-accent);
    border-radius: var(--rayon);
    transition: background 0.15s, color 0.15s;
}
.article-content a[href$=".pdf"]:hover { background: var(--couleur-accent); color: white; text-decoration: none; }
.article-content a[href$=".pdf"]::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 4px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V5l-4-5H4zm5 0v4h4L9 0zM5 9h6v1H5V9zm0 2h6v1H5v-1zm0 2h4v1H5v-1z'/%3E%3C/svg%3E") no-repeat center;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V5l-4-5H4zm5 0v4h4L9 0zM5 9h6v1H5V9zm0 2h6v1H5v-1zm0 2h4v1H5v-1z'/%3E%3C/svg%3E") no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
    vertical-align: -2px;
}
.article-content > p:last-child:has(a[href^="/ressources/"]) { text-align: center; margin-top: 2rem; }
.article-date { font-size: 0.85rem; color: var(--couleur-texte-secondaire); }

/* Buttons */
.btn { display: inline-block; padding: 0.6rem 1.2rem; font-size: 0.95rem; font-weight: 600; border-radius: var(--rayon); text-decoration: none; transition: background 0.15s; background: var(--couleur-accent); color: white; }
.btn:hover { background: var(--couleur-accent-hover); text-decoration: none; }
.btn-secondary { background: transparent; color: var(--couleur-accent); border: 1px solid var(--couleur-accent); }
.btn-secondary:hover { background: var(--couleur-accent); color: white; }

.error-page { text-align: center; padding: 4rem 0; }
.error-links { display: flex; gap: 1rem; justify-content: center; margin-top: 2rem; }

/* Bienvenue */
.section-bienvenue { padding: 2rem 0; }
.section-bienvenue h2 { font-size: 1.35rem; font-weight: 700; color: var(--couleur-primaire); margin-bottom: 0.5rem; }
.bienvenue-grid { display: flex; align-items: flex-start; gap: 1.5rem; }
.bienvenue-logo { width: 90px; height: auto; flex-shrink: 0; }
.bienvenue-texte { flex: 1; }

/* Services */
.section-services { padding: 2rem 0; }
.section-services h2 { font-size: 1.35rem; font-weight: 700; color: var(--couleur-primaire); margin-bottom: 1rem; }
.services-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
a.service-card, a.service-card:hover { display: block; text-decoration: none; color: inherit; }
.service-card { background: var(--couleur-surface); border: 1px solid var(--couleur-bordure); border-radius: var(--rayon); padding: 1.5rem; transition: box-shadow 0.2s, border-color 0.2s; }
.service-card:hover { box-shadow: var(--ombre-hover); border-color: #666; }
.service-icon { font-size: 1.2rem; }
.service-card h3 { font-size: 1.05rem; font-weight: 600; color: var(--couleur-primaire); margin-bottom: 0.4rem; }
.service-card p { font-size: 0.9rem; color: var(--couleur-texte-secondaire); line-height: 1.5; }

/* Carte professeur */
.prof-card { display: flex; align-items: flex-start; gap: 1.5rem; }
.prof-photo { width: 120px; height: auto; border-radius: var(--rayon); flex-shrink: 0; }

/* Equipe */
.section-equipe { padding: 2.5rem 2rem; margin: 2rem 0; background: var(--couleur-bordure-legere); border-radius: var(--rayon); text-align: center; }
.section-equipe h2 { font-size: 1.35rem; font-weight: 700; color: var(--couleur-primaire); margin-bottom: 0.75rem; }
.section-equipe p { font-size: 1rem; color: var(--couleur-texte-secondaire); max-width: 600px; margin: 0 auto 1.5rem; }

/* CTA */
.cta-link { text-align: center; margin-top: 1.5rem; }
.cta-arrow { color: var(--couleur-primaire); font-weight: 500; text-decoration: none; font-size: 0.95rem; }
.cta-arrow:hover { text-decoration: underline; }
.cta-arrow-center { text-align: center; margin: 1rem 0; }
.tarif-center { text-align: center; }
.carte-zone { margin: 1rem 0; }
.article-content > .service-card { margin-bottom: 1rem; }
.article-content > .services-grid { margin-bottom: 1rem; }

/* News */
.section-news { padding: 2rem 0; }
.section-news h2 { font-size: 1.35rem; font-weight: 700; color: var(--couleur-primaire); margin-bottom: 1rem; }
.news-list { list-style: none; padding: 0; margin: 0; }
.news-list li { padding: 0.5rem 0; border-bottom: 1px solid var(--couleur-bordure-legere); font-size: 0.95rem; }
.news-list li:last-child { border-bottom: none; }
.news-date { display: inline-block; font-weight: 600; color: var(--couleur-primaire); min-width: 90px; margin-right: 0.5rem; }

/* Livre d'or */
.section-livre-dor { padding: 2rem 0; }
.section-livre-dor h2 { font-size: 1.35rem; font-weight: 700; color: var(--couleur-primaire); margin-bottom: 1rem; }
.temoignages { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem; }
.temoignage { background: var(--couleur-surface); border: 1px solid var(--couleur-bordure); border-radius: var(--rayon); padding: 1.25rem; }
.temoignage-message { font-size: 0.95rem; font-style: italic; line-height: 1.6; margin-bottom: 0.5rem; }
.temoignage-auteur { font-size: 0.85rem; color: var(--couleur-texte-secondaire); text-align: right; }
.livre-dor-form h3 { font-size: 1.1rem; font-weight: 600; color: var(--couleur-primaire); margin-bottom: 0.75rem; }

/* ── Pages de service — Tarifs & Formulaire ────────────────────── */
.tarif-cards {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 1rem 0 1.5rem;
}

.tarif-card {
    flex: 1;
    min-width: 160px;
    background: var(--couleur-surface);
    border: 2px solid var(--couleur-accent);
    border-radius: var(--rayon);
    padding: 1.25rem 1rem;
    text-align: center;
    font-size: 0.95rem;
    line-height: 1.5;
}

.tarif-card strong {
    font-size: 1.25rem;
    color: var(--couleur-primaire);
}

.service-features {
    margin: 1rem 0;
}

.service-features ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.service-features li {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--couleur-bordure-legere);
}

.service-features li:last-child {
    border-bottom: none;
}

.service-form {
    max-width: 520px;
    margin: 1.5rem auto 2rem;
}

.service-form .form-group {
    margin-bottom: 1rem;
}

.service-form label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--couleur-texte);
    margin-bottom: 0.3rem;
}

.service-form input,
.service-form select,
.service-form textarea {
    width: 100%;
    padding: 0.6rem 0.75rem;
    font-size: 0.9rem;
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
    background: var(--couleur-surface);
    color: var(--couleur-texte);
    font-family: inherit;
}

.service-form input:focus,
.service-form select:focus,
.service-form textarea:focus {
    outline: none;
    border-color: var(--couleur-accent);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.service-form textarea {
    resize: vertical;
}

.service-form .btn {
    margin-top: 0.5rem;
    display: block;
    width: 100%;
    text-align: center;
}

/* Grille tarifaire 2 colonnes */
.tarifs-grid table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0 1.5rem;
    background: var(--couleur-surface);
    border-radius: var(--rayon);
    overflow: hidden;
    border: 1px solid var(--couleur-bordure);
}

.tarifs-grid th,
.tarifs-grid td {
    padding: 0.6rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--couleur-bordure);
    font-size: 0.9rem;
}

.tarifs-grid th {
    background: var(--couleur-primaire);
    color: white;
    font-weight: 600;
    font-size: 0.85rem;
}

.tarifs-grid th:not(:first-child) {
    text-align: center;
}

.tarifs-grid td:first-child {
    font-weight: 500;
}

.tarifs-grid td:not(:first-child) {
    text-align: center;
    white-space: nowrap;
}

.tarifs-grid tr.tarifs-section td {
    background: var(--couleur-bordure-legere);
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--couleur-primaire);
    padding: 0.4rem 1rem;
    border-bottom: 1px solid var(--couleur-bordure);
}

.tarifs-grid tr:not(.tarifs-section) td:first-child {
    padding-left: 2rem;
}

.tarifs-grid tr:last-child td {
    border-bottom: none;
}

.tarifs-grid tr:hover:not(.tarifs-section) td {
    background: var(--couleur-bordure-legere);
}

/* Tarif avant réduction (prix barré) */
.tarif-avant,
.tarifs-grid s,
.tarif-center s {
    color: var(--couleur-texte-secondaire, #888);
    font-size: 0.85em;
    margin-right: 0.3em;
}

/* Message de confirmation après soumission */
.form-confirmation {
    background: #f0fdf4;
    border: 1px solid #86efac;
    border-radius: var(--rayon);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    color: #166534;
    font-weight: 500;
}

/* ── Contenu mathématique (cours en HTML/MathJax) ──────────────── */

.math-cours { margin: 1.5rem 0; counter-reset: figure; }
.math-cours h4 { font-size: 1.15rem; font-weight: 700; color: var(--couleur-primaire); margin: 1.5rem 0 0.75rem; padding-bottom: 0.25rem; border-bottom: 2px solid var(--couleur-accent); }

.math-definition {
    background: var(--couleur-surface);
    border: 1px solid var(--couleur-bordure);
    border-left: 4px solid #2563eb;
    border-radius: var(--rayon);
    padding: 0.75rem 1rem;
    margin: 0.75rem 0;
    line-height: 1.7;
}

.math-propriete {
    background: var(--couleur-surface);
    border: 1px solid var(--couleur-bordure);
    border-left: 4px solid #dc2626;
    border-radius: var(--rayon);
    padding: 0.75rem 1rem;
    margin: 0.75rem 0;
    line-height: 1.7;
}

.math-definition strong,
.math-propriete strong { color: var(--couleur-primaire); }

.math-exemple {
    background: var(--couleur-bordure-legere);
    border-radius: var(--rayon);
    margin: 0.75rem 0;
    padding: 0.75rem 1rem;
    border-left: 4px solid #16a34a;
    line-height: 1.8;
}

.math-exemple-titre { font-weight: 600; color: var(--couleur-texte); margin-bottom: 0.25rem; }
.math-exemple ol > li::marker { font-weight: bold; }

/* Énoncés : bordure bleue au lieu de verte */
.type-enonce .math-exemple { border-left-color: #2563eb; }
/* Corrections : bordure verte */
.type-correction .math-exemple { border-left-color: #16a34a; }

/* Blocs pliables : démonstrations et corrections */
details.math-demonstration,
details.math-correction {
    border-radius: var(--rayon);
    padding: 0.75rem 1rem;
    margin: 0.75rem 0;
    font-size: 0.92rem;
    line-height: 1.8;
}

details.math-demonstration {
    background: var(--couleur-bordure-legere);
    border-left: 4px solid #9ca3af;
}

details.math-correction {
    background: #f0fdf4;
    border-left: 4px solid #16a34a;
}

details.math-demonstration > summary,
details.math-correction > summary {
    cursor: pointer;
    font-weight: 600;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

details.math-demonstration > summary::-webkit-details-marker,
details.math-correction > summary::-webkit-details-marker { display: none; }
details.math-demonstration > summary::marker,
details.math-correction > summary::marker { content: ""; }

details.math-demonstration > summary::before,
details.math-correction > summary::before {
    content: "▶";
    font-size: 0.7em;
    transition: transform 0.2s ease;
    display: inline-block;
    flex-shrink: 0;
}

details[open].math-demonstration > summary::before,
details[open].math-correction > summary::before {
    transform: rotate(90deg);
}

.math-demonstration-titre { font-style: italic; }

.math-correction-titre { color: #166534; }

.math-remarque {
    background: var(--couleur-bordure-legere);
    border-radius: var(--rayon);
    font-size: 0.9rem;
    color: var(--couleur-texte-secondaire);
    margin: 0.75rem 0;
    padding: 0.75rem 1rem;
    border-left: 4px solid #374151;
    line-height: 1.6;
}

.math-pdf-lien {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--couleur-accent);
    text-decoration: none;
}

.math-pdf-lien:hover { text-decoration: underline; }

/* Texte de transition dans les cours */
.math-texte {
    background: var(--couleur-bordure-legere);
    border-radius: var(--rayon);
    margin: 0.75rem 0;
    padding: 0.75rem 1rem;
    line-height: 1.7;
}

/* Figure/image dans les cours */
.math-figure {
    text-align: center;
    margin: 1rem 0;
}
.math-figure img {
    max-width: 100%;
    height: auto;
    mix-blend-mode: multiply;
}
.math-figure img[alt^="Tableau de variation"],
.math-figure img[alt^="Tableau de signe"] {
    max-width: min(100%, 500px);
}
.math-figure em {
    counter-increment: figure;
}
.math-figure em::before {
    content: "Figure " counter(figure) " — ";
}

/* Figures consécutives côte à côte par défaut */
.math-figure:has(+ .math-figure),
.math-figure + .math-figure {
    display: inline-block;
    vertical-align: middle;
    width: 48%;
    margin: 0.5rem 0;
}

/* Wrapper explicite (fallback) */
.math-figure-row {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin: 1rem 0;
    flex-wrap: wrap;
}
.math-figure-row .math-figure {
    display: block;
    margin: 0;
    flex: 1 1 150px;
    width: auto;
}
/* Figures dans une grille : annuler le side-by-side auto */
.math-grid .math-figure:has(+ .math-figure),
.math-grid .math-figure + .math-figure,
.math-figure-row .math-figure:has(+ .math-figure),
.math-figure-row .math-figure + .math-figure {
    display: block;
    width: 100%;
    margin: 0;
}

/* Mise en page 2 colonnes (texte + figure) */
.math-row {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin: 0.5rem 0;
}
.math-row > div {
    flex: 1 1 0;
    min-width: 0;
}
.math-row .math-figure {
    margin: 0.5rem 0;
}
.math-row .math-figure img {
    max-width: 100%;
    height: auto;
}
/* Empêcher les figures consécutives de se mettre côte à côte dans un row */
.math-row .math-figure:has(+ .math-figure),
.math-row .math-figure + .math-figure {
    display: block;
    width: 100%;
}
/* Grille 2x2 d'activités/exemples */
.math-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 0.5rem 0;
}
/* Variante centrée (titres, contenus côte à côte symétriques) */
.math-row-center {
    display: flex;
    gap: 1rem;
    margin: 0.5rem 0;
}
.math-row-center > div {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
}
/* Ancien math-table (rétrocompatibilité) */
.math-table {
    width: 100%;
    border-collapse: collapse;
}
.math-table > tbody > tr > td,
.math-table > tr > td {
    vertical-align: top;
    padding: 0.5rem;
    width: 50%;
}
.math-table .math-figure {
    margin: 0.5rem 0;
}
.math-table .math-figure img {
    max-width: 100%;
    height: auto;
}
.math-table .math-figure:has(+ .math-figure),
.math-table .math-figure + .math-figure {
    display: block;
    width: 100%;
}
.math-table-center > tbody > tr > td,
.math-table-center > tr > td {
    text-align: center;
}
/* Grille de figures (ex: diagrammes de Venn, types de graphiques) */
.math-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin: 1rem 0;
    text-align: center;
}
.math-grid .math-figure {
    margin: 0;
}
.math-grid img {
    max-width: 100%;
    height: auto;
}
/* Retour à la ligne visible uniquement en mobile */
br.mobile-br { display: none; }

/* Petits tableaux de données dans les cours (valeurs) */
.math-cours table:not(.math-table):not(.math-table-center):not(.math-grid):not(.math-variation):not(.math-signe) {
    border-collapse: collapse;
    margin: 0.75rem auto;
    border: 1px solid #94a3b8;
}
.math-cours table:not(.math-table):not(.math-table-center):not(.math-grid):not(.math-variation):not(.math-signe) td,
.math-cours table:not(.math-table):not(.math-table-center):not(.math-grid):not(.math-variation):not(.math-signe) th {
    border: 1px solid #94a3b8;
    padding: 0.35rem 0.75rem;
    text-align: center;
}
/* Tableau de variation */
.math-variation {
    border-collapse: collapse;
    margin: 0.75rem auto;
    border: 2px solid #334155;
}
.math-variation td {
    padding: 0.3rem 0.6rem;
    text-align: center;
    border: none;
}
/* Première rangée (x) : bordures verticales entre valeurs */
.math-variation tr:first-child td {
    border-bottom: 2px solid #334155;
    border-right: 1px solid #94a3b8;
}
.math-variation tr:first-child td:last-child {
    border-right: none;
}
.math-variation .math-var-label {
    font-weight: 600;
    background: #f1f5f9;
    white-space: nowrap;
    border-right: 2px solid #334155 !important;
}
/* Rangée des valeurs f(x) : haute, pas de bordures internes */
.math-variation .math-var-row {
    height: 4rem;
}
.math-variation .math-var-row td:not(.math-var-label) {
    border: none;
}
.math-variation .math-var-haut {
    vertical-align: top;
    padding-top: 0.3rem;
}
.math-variation .math-var-bas {
    vertical-align: bottom;
    padding-bottom: 0.3rem;
}
/* Flèches diagonales (gradient CSS) */
.math-variation .math-var-arrow-up {
    padding: 0;
    min-width: 2.5rem;
    background: linear-gradient(to top right,
        transparent calc(50% - 1px),
        #334155 calc(50% - 1px),
        #334155 calc(50% + 1px),
        transparent calc(50% + 1px));
}
.math-variation .math-var-arrow-down {
    padding: 0;
    min-width: 2.5rem;
    background: linear-gradient(to bottom right,
        transparent calc(50% - 1px),
        #334155 calc(50% - 1px),
        #334155 calc(50% + 1px),
        transparent calc(50% + 1px));
}
/* Tableau de signe */
.math-signe {
    border-collapse: collapse;
    margin: 0.75rem auto;
    border: 2px solid #64748b;
}
.math-signe td {
    border: 1px solid #94a3b8;
    padding: 0.3rem 0.6rem;
    text-align: center;
    min-width: 1.5rem;
}
.math-signe .math-var-label {
    font-weight: 600;
    background: #f1f5f9;
    white-space: nowrap;
    border: 2px solid #64748b;
}
.math-signe .math-signe-zero,
.math-variation .math-signe-zero {
    font-weight: 700;
    color: #1e293b;
}
.math-signe .math-signe-plus,
.math-variation .math-signe-plus {
    color: #dc2626;
    font-weight: 600;
}
.math-signe .math-signe-moins,
.math-variation .math-signe-moins {
    color: #2563eb;
    font-weight: 600;
}
/* Ligne de signe dans un tableau de variation (bordure séparatrice) */
.math-variation .math-var-signe td {
    border-bottom: 1px solid #94a3b8;
}

/* Encadré téléchargement PDF (même layout que .cta-cours) */
.fiche-pdf-box {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin: 1rem 0;
    padding: 1.25rem 1.5rem;
    background: var(--couleur-bordure-legere);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
}

/* Retour chapitre centré */
.retour-chapitre {
    text-align: center;
    margin: 2rem 0;
}
.retour-chapitre a {
    color: var(--couleur-accent);
    text-decoration: none;
    font-weight: 600;
}
.retour-chapitre a:hover {
    text-decoration: underline;
}

/* Navigation intra-chapitre */
.fiche-navigation {
    margin: 2rem 0;
    font-size: 0.9rem;
}

.fiche-nav-retour {
    text-align: center;
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--couleur-bordure-legere);
}

.fiche-nav-retour a {
    color: var(--couleur-accent);
    font-weight: 600;
    text-decoration: none;
}

.fiche-nav-retour a:hover {
    text-decoration: underline;
}

.fiche-nav-prevnext {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0;
}

.fiche-nav-prev,
.fiche-nav-next {
    color: var(--couleur-accent);
    text-decoration: none;
    max-width: 48%;
}

.fiche-nav-prev:hover,
.fiche-nav-next:hover {
    text-decoration: underline;
}

.fiche-nav-next {
    text-align: right;
    margin-left: auto;
}

.fiche-nav-voiraussi {
    padding-top: 0.75rem;
    margin-top: 0.75rem;
    border-top: 1px solid var(--couleur-bordure-legere);
    color: var(--couleur-texte-secondaire);
}

.fiche-nav-voiraussi-label {
    font-weight: 600;
    margin-right: 0.35rem;
}

.fiche-nav-voiraussi a {
    display: block;
    color: var(--couleur-accent);
    text-decoration: none;
    margin-top: 0.25rem;
}

.fiche-nav-voiraussi a:hover {
    text-decoration: underline;
}

/* ── CTA Cours particuliers (encadré bas de page) ──────────────── */
.cta-cours {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin: 1rem 0;
    padding: 1.25rem 1.5rem;
    background: var(--couleur-bordure-legere);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
}

.cta-cours-logo {
    width: 52px;
    height: auto;
    flex-shrink: 0;
}

.cta-cours-contenu { flex: 1; }

.cta-cours-titre {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--couleur-primaire);
    margin-bottom: 0.15rem;
}

.cta-cours-sous-titre {
    font-size: 0.88rem;
    color: var(--couleur-texte-secondaire);
    margin-bottom: 0.75rem;
}

.cta-cours-boutons {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.cta-cours-boutons .btn {
    font-size: 0.82rem;
    padding: 0.45rem 0.9rem;
}

/* ── RESPONSIVE ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Pas de splash en mobile */
    .splash { display: none; }

    /* Nav : toujours compact en mobile */
    .site-nav .nav-links { display: none; }
    .site-nav .nav-sites { display: none !important; }
    .site-nav .nav-brand { display: flex !important; }
    .site-nav .nav-inner { justify-content: space-between; }
    .hamburger { display: block; margin-left: auto; }

    /* Menu mobile */
    .mobile-nav {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--couleur-fond);
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
        padding: 0.5rem 0;
        z-index: 200;
        max-height: 70vh;
        overflow-y: auto;
    }

    .mobile-nav.actif { display: flex; }

    .mobile-nav > a {
        display: block;
        padding: 0.6rem 1.25rem;
        color: var(--couleur-craie);
        text-decoration: none;
        font-size: 0.9rem;
    }

    .mobile-nav > a:hover { color: var(--couleur-craie-vive); }

    .mobile-group-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .mobile-group-title a {
        display: block;
        flex: 1;
        padding: 0.6rem 1.25rem;
        color: var(--couleur-craie);
        text-decoration: none;
        font-size: 0.9rem;
    }

    .mobile-group-title a:hover { color: var(--couleur-craie-vive); }

    .mobile-toggle {
        background: none;
        border: none;
        color: var(--couleur-craie);
        cursor: pointer;
        padding: 0.6rem 1rem;
        font-size: 0.7rem;
    }

    .mobile-sub { display: none; }
    .mobile-sub.ouvert { display: block; }

    .mobile-sub a {
        display: block;
        padding: 0.4rem 1.25rem 0.4rem 2.25rem;
        color: var(--couleur-craie);
        text-decoration: none;
        font-size: 0.84rem;
    }

    .mobile-sub a:hover { color: var(--couleur-craie-vive); }

    /* Feuille : garder des marges même sur petit écran */
    .site-body::before {
        width: calc(100vw - 2rem);
        left: 50%;
        transform: translateX(-50%);
    }

    .parchment { padding: 1.5rem 1rem 3rem; max-width: calc(100vw - 2rem); }
    .cards { grid-template-columns: 1fr; }
    .cards.cards-4 { grid-template-columns: repeat(2, 1fr); }
    .services-grid { grid-template-columns: 1fr; }
    .stats-bar { gap: 1.5rem; padding: 1.5rem; }
    .stat-number { font-size: 1.5rem; }
    .filter-bar { flex-direction: column; }
    .filter-bar select { width: 100%; }
    .pdf-item { flex-direction: column; align-items: flex-start; }
    .btn-download { align-self: flex-end; }
    .footer-inner { flex-direction: column; text-align: center; gap: 0.25rem; }
    .footer-right { flex-wrap: wrap; justify-content: center; }
    .error-links { flex-direction: column; align-items: center; }
    .tarif-cards { flex-direction: column; }
    .tarif-card { min-width: 0; }
    .service-form { max-width: 100%; }
    .tarifs-grid { overflow-x: auto; }
    .tarifs-grid table { min-width: 480px; }

    /* Layouts 2 colonnes : passage en mode empilé sur mobile */
    .math-row, .math-row-center { flex-direction: column; }
    .math-row > div, .math-row-center > div { width: 100%; text-align: center; }
    .math-row > div ol, .math-row > div ul, .math-row-center > div ol, .math-row-center > div ul { text-align: left; }
    .math-grid { grid-template-columns: 1fr; justify-items: center; text-align: center; }
    .math-table,
    .math-table > tbody,
    .math-table > tbody > tr,
    .math-table > tbody > tr > td,
    .math-table > tr,
    .math-table > tr > td {
        display: block;
        width: 100% !important;
    }
    .math-table > tbody > tr > td,
    .math-table > tr > td {
        padding: 0.25rem 0;
    }

    /* Contenu math : réduire la taille pour tenir sur mobile */
    .math-cours { font-size: 0.85rem; word-break: break-word; overflow-wrap: break-word; }
    /* Conteneurs math : couper le débordement (formules) */
    .math-exemple, .math-definition, .math-texte, .math-demonstration, .math-correction, .math-remarque, .math-propriete, details.math-correction {
        overflow-x: hidden;
        max-width: 100%;
        padding: 0.5rem 0.6rem;
    }
    /* Formules MathJax longues : coupées, pas de scrollbar */
    mjx-container {
        max-width: 100%;
        overflow-x: hidden;
    }
    .parchment img, .math-cours img {
        max-width: 100% !important;
        height: auto !important;
    }
    /* Grille de figures : 2 colonnes sur mobile */
    .math-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
    /* Retour à la ligne mobile pour formules longues */
    br.mobile-br { display: inline; }
    /* Figures consécutives : empiler sur mobile au lieu de côte à côte */
    .math-figure:has(+ .math-figure),
    .math-figure + .math-figure {
        display: block;
        width: 100%;
    }
    /* Tableaux HTML dans les cours : scrollables via conteneur */
    .table-scroll {
        overflow-x: auto;
        max-width: 100%;
        -webkit-overflow-scrolling: touch;
    }
    .math-cours table:not(.math-table):not(.math-table-center):not(.math-variation):not(.math-signe) {
        font-size: 0.82rem;
        table-layout: auto;
    }
    .math-cours table td,
    .math-cours table th {
        white-space: nowrap;
    }
    .math-cours table img {
        max-width: 100% !important;
    }

    /* Navigation intra-chapitre : empiler prev/next */
    .fiche-nav-prevnext {
        flex-direction: column;
        gap: 0.5rem;
    }
    .fiche-nav-prev,
    .fiche-nav-next {
        max-width: 100%;
        text-align: left;
    }
}