/* Styles partages de l'espace enseignants : enseignants.html, programme.html,
   en-classe.html. Extraits du bloc <style> inline de enseignants.html le 31/07/2026
   pour eviter de les tripler a l'ouverture de la section. */
        .teachers-hero {
            padding: calc(var(--nav-height) + 4rem) 2rem 3.5rem;
            text-align: center;
            background:
                radial-gradient(ellipse at 65% 50%, rgba(139, 21, 56, 0.07) 0%, transparent 55%),
                radial-gradient(ellipse at 20% 60%, rgba(26, 58, 92, 0.08) 0%, transparent 50%),
                linear-gradient(160deg, #f0ddb8 0%, #e8d4a8 40%, #dcc89a 100%);
            border-bottom: 2px solid var(--parchment-burnt);
        }

        .teachers-hero-eyebrow {
            display: inline-block;
            padding: 0.35rem 1rem;
            background: rgba(26, 58, 92, 0.1);
            border: 1px solid rgba(26, 58, 92, 0.35);
            border-radius: 100px;
            font-family: 'Cinzel', serif;
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            color: var(--royal-blue);
            margin-bottom: 1rem;
        }

        .teachers-hero h1 {
            font-family: 'Cinzel Decorative', serif;
            font-size: clamp(1.8rem, 4vw, 3rem);
            color: var(--royal-blue);
            margin-bottom: 1rem;
            line-height: 1.2;
        }

        .teachers-hero h1 span {
            color: var(--crimson);
        }

        .teachers-hero p {
            font-size: 1.15rem;
            color: var(--ink-sepia);
            max-width: 680px;
            margin: 0 auto 2rem;
            line-height: 1.7;
        }

        .teachers-hero-ctas {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .teachers-main {
            max-width: 900px;
            margin: 0 auto;
            padding: 0 1.5rem;
        }

        .teachers-section {
            padding: 4rem 0;
        }

        .teachers-section-alt {
            background: linear-gradient(180deg, rgba(212, 188, 130, 0.3) 0%, rgba(232, 212, 168, 0.2) 100%);
        }

        .teachers-breadcrumb {
            font-family: 'Cinzel', serif;
            font-size: 0.8rem;
            color: var(--ink-light);
            margin-bottom: 2rem;
            letter-spacing: 0.04em;
        }

        .teachers-breadcrumb a {
            color: var(--ink-light);
            text-decoration: none;
        }

        .teachers-breadcrumb a:hover {
            color: var(--crimson);
        }

        .teachers-section h2 {
            font-family: 'Cinzel Decorative', serif;
            font-size: clamp(1.4rem, 3vw, 1.9rem);
            color: var(--royal-blue);
            margin-bottom: 1rem;
            line-height: 1.25;
        }

        .teachers-section h3 {
            font-family: 'Cinzel', serif;
            font-size: 1.15rem;
            color: var(--ink-brown);
            margin: 2rem 0 0.75rem;
        }

        .teachers-section p {
            color: var(--ink-sepia);
            line-height: 1.75;
            margin-bottom: 1rem;
        }

        .teachers-section a {
            color: var(--crimson);
            text-decoration: none;
        }

        .teachers-section a:hover {
            border-bottom: 1px solid var(--crimson);
        }

        .teachers-stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
            gap: 1rem;
            margin: 2rem 0;
        }

        .teachers-stat {
            background: rgba(255, 255, 255, 0.55);
            border: 1px solid var(--parchment-dark);
            border-radius: 12px;
            padding: 1.25rem;
            text-align: center;
            box-shadow: 0 4px 16px var(--shadow-soft);
        }

        .teachers-stat b {
            display: block;
            font-family: 'Cinzel Decorative', serif;
            font-size: 1.5rem;
            color: var(--crimson);
            margin-bottom: 0.25rem;
        }

        .teachers-stat span {
            font-size: 0.85rem;
            color: var(--ink-sepia);
        }

        .teachers-steps {
            counter-reset: step;
            list-style: none;
            padding: 0;
            margin: 1.5rem 0;
            display: grid;
            gap: 1rem;
        }

        .teachers-steps li {
            counter-increment: step;
            position: relative;
            padding: 1.25rem 1.25rem 1.25rem 4rem;
            background: rgba(255, 255, 255, 0.5);
            border: 1px solid var(--parchment-dark);
            border-radius: 12px;
        }

        .teachers-steps li::before {
            content: counter(step);
            position: absolute;
            left: 1.25rem;
            top: 1.25rem;
            width: 2rem;
            height: 2rem;
            border-radius: 50%;
            background: var(--gold-base);
            color: var(--ink-black);
            font-family: 'Cinzel', serif;
            font-weight: 700;
            display: grid;
            place-items: center;
            font-size: 0.9rem;
        }

        .teachers-steps li strong {
            display: block;
            font-family: 'Cinzel', serif;
            color: var(--ink-brown);
            margin-bottom: 0.25rem;
        }

        .teachers-steps li span {
            color: var(--ink-sepia);
            font-size: 0.97rem;
        }

        .teachers-feature-list {
            list-style: none;
            padding: 0;
            margin: 1rem 0;
        }

        .teachers-feature-list li {
            padding: 0.55rem 0 0.55rem 1.75rem;
            position: relative;
            color: var(--ink-sepia);
            line-height: 1.65;
            border-bottom: 1px solid rgba(212, 188, 130, 0.5);
        }

        .teachers-feature-list li:last-child {
            border-bottom: none;
        }

        .teachers-feature-list li::before {
            content: "✓";
            position: absolute;
            left: 0;
            color: var(--gold-dark);
            font-weight: 700;
        }

        .teachers-cta {
            background: linear-gradient(160deg, var(--royal-blue) 0%, #243f68 100%);
            border: 2px solid var(--gold-base);
            border-radius: 12px;
            padding: 2.5rem 2rem;
            text-align: center;
            margin: 2.5rem 0 0;
            box-shadow: 0 8px 32px rgba(26, 58, 92, 0.35);
        }

        .teachers-cta h2 {
            font-family: 'Cinzel Decorative', serif;
            font-size: 1.5rem;
            color: var(--gold-light);
            margin-bottom: 0.75rem;
        }

        .teachers-cta p {
            color: rgba(245, 230, 200, 0.9);
            margin-bottom: 1.5rem;
        }

        .teachers-link-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
            gap: 1rem;
            margin-top: 1.5rem;
        }

        .teachers-link-grid a {
            display: block;
            background: rgba(255, 255, 255, 0.55);
            border: 1px solid var(--parchment-dark);
            border-radius: 12px;
            padding: 1.25rem;
            text-align: center;
            text-decoration: none;
            color: var(--ink-brown);
            font-family: 'Cinzel', serif;
            font-weight: 600;
            font-size: 0.9rem;
            transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
        }

        .teachers-link-grid a:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 28px var(--shadow-soft);
            border-color: var(--gold-base);
            border-bottom: 1px solid var(--gold-base);
        }

        .teachers-faq .faq-category-title {
            font-size: clamp(1.4rem, 3vw, 1.9rem);
            margin-bottom: 2rem;
        }

        .teachers-features {
            margin-top: 2rem;
        }

        /* ── Couverture du programme ─────────────────────────────────── */
        .prog-section {
            scroll-margin-top: calc(var(--nav-height) + 1rem);
            border-top: 2px solid var(--parchment-burnt);
            border-bottom: 2px solid var(--parchment-burnt);
            background:
                radial-gradient(ellipse at 20% 0%, rgba(26, 58, 92, 0.05) 0%, transparent 55%),
                linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.05) 100%);
        }

        .prog-lede {
            font-size: 1.05rem;
        }

        .prog-tablewrap {
            overflow-x: auto;
            margin: 1.5rem 0 0.75rem;
            border: 1px solid var(--parchment-dark);
            border-radius: 12px;
            background: rgba(255, 255, 255, 0.5);
            box-shadow: 0 4px 16px var(--shadow-soft);
            -webkit-overflow-scrolling: touch;
        }

        table.prog-table {
            border-collapse: collapse;
            width: 100%;
            min-width: 720px;
            font-size: 0.95rem;
        }

        /* Les tableaux débordent de la colonne de texte (900px) sur grand écran :
           la prose reste lisible, le tableau respire. */
        @media (min-width: 1080px) {
            .prog-section .prog-tablewrap,
            .prog-section .prog-details {
                width: min(1180px, calc(100vw - 4rem));
                margin-left: 50%;
                transform: translateX(-50%);
            }

            .prog-section .prog-details .prog-tablewrap {
                width: auto;
                margin-left: 0;
                transform: none;
            }
        }

        .prog-table th,
        .prog-table td {
            padding: 0.85rem 1.1rem;
            text-align: left;
            vertical-align: top;
            border-bottom: 1px solid rgba(212, 188, 130, 0.6);
        }

        .prog-table thead th {
            font-family: 'Cinzel', serif;
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--ink-light);
            background: rgba(212, 188, 130, 0.3);
            border-bottom: 2px solid var(--parchment-burnt);
            white-space: nowrap;
        }

        .prog-table tbody tr:last-child td {
            border-bottom: none;
        }

        .prog-table tbody tr:hover td {
            background: rgba(255, 255, 255, 0.45);
        }

        .prog-table td:first-child {
            color: var(--ink-brown);
            font-weight: 600;
            min-width: 15rem;
        }

        .prog-table td.prog-ours {
            color: var(--ink-sepia);
            min-width: 17rem;
        }

        .prog-table td.prog-note {
            color: var(--ink-light);
            font-size: 0.88rem;
            min-width: 14rem;
        }

        .prog-state {
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
            white-space: nowrap;
            font-family: 'Cinzel', serif;
            font-size: 0.82rem;
            font-weight: 600;
        }

        .prog-state::before {
            content: "";
            width: 0.62rem;
            height: 0.62rem;
            border-radius: 50%;
            flex: none;
        }

        .prog-ok { color: var(--emerald); }
        .prog-ok::before { background: var(--emerald); }
        .prog-part { color: var(--gold-dark); }
        .prog-part::before { background: var(--gold-dark); }
        .prog-wip { color: var(--royal-blue); }
        .prog-wip::before { background: var(--royal-blue); box-shadow: 0 0 0 3px rgba(26, 58, 92, 0.18); }
        .prog-none { color: var(--crimson); }
        .prog-none::before { background: transparent; border: 1.5px solid var(--crimson); }
        .prog-out { color: var(--ink-light); }
        .prog-out::before { background: var(--parchment-burnt); }

        .prog-legend {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem 1.5rem;
            list-style: none;
            padding: 0;
            margin: 0 0 0.5rem;
            font-size: 0.85rem;
            color: var(--ink-sepia);
        }

        .prog-legend li {
            display: flex;
            align-items: baseline;
            gap: 0.4rem;
        }

        .prog-scroll-hint {
            font-size: 0.82rem;
            color: var(--ink-light);
            font-style: italic;
            margin-bottom: 2rem;
        }

        .prog-details {
            border: 1px solid var(--parchment-dark);
            border-radius: 12px;
            background: rgba(255, 255, 255, 0.45);
            margin: 2rem 0 0;
            overflow: hidden;
        }

        .prog-details > summary {
            cursor: pointer;
            padding: 1.1rem 1.25rem;
            font-family: 'Cinzel', serif;
            font-weight: 600;
            color: var(--royal-blue);
            list-style: none;
        }

        .prog-details > summary::-webkit-details-marker {
            display: none;
        }

        .prog-details > summary::before {
            content: "▸ ";
            color: var(--gold-dark);
        }

        .prog-details[open] > summary::before {
            content: "▾ ";
        }

        .prog-details > summary:hover {
            color: var(--crimson);
        }

        .prog-cycle {
            background: rgba(255, 255, 255, 0.6);
            border-color: var(--parchment-burnt);
            box-shadow: 0 4px 16px var(--shadow-soft);
            margin: 1rem 0 0;
        }

        .prog-cycle > summary {
            display: block;
            padding: 1.15rem 1.35rem;
        }

        .prog-cycle > summary::before,
        .prog-cycle[open] > summary::before {
            content: none;
        }

        .prog-cycle-name {
            display: block;
            font-family: 'Cinzel Decorative', serif;
            font-size: 1.1rem;
            color: var(--royal-blue);
        }

        .prog-cycle-name::before {
            content: "▸ ";
            color: var(--gold-dark);
        }

        .prog-cycle[open] .prog-cycle-name::before {
            content: "▾ ";
        }

        .prog-cycle-meta {
            display: block;
            margin-top: 0.3rem;
            font-family: 'Crimson Text', serif;
            font-weight: 400;
            font-size: 0.88rem;
            color: var(--ink-sepia);
        }

        .prog-footnote {
            font-size: 0.85rem;
            color: var(--ink-light);
            font-style: italic;
            padding: 0.9rem 1.35rem 1.1rem;
            margin: 0;
        }

        .prog-cycle .prog-footnote {
            border-top: 1px solid var(--parchment-dark);
        }

        .prog-details .prog-tablewrap {
            margin: 0;
            border: none;
            border-top: 1px solid var(--parchment-dark);
            border-radius: 0;
            background: transparent;
            box-shadow: none;
        }

        .prog-details .prog-table {
            min-width: 700px;
        }

        .prog-sources {
            font-size: 0.85rem;
            color: var(--ink-light);
            line-height: 1.7;
            margin-top: 2rem;
            padding-top: 1.25rem;
            border-top: 1px solid var(--parchment-dark);
        }

        .prog-sources a {
            color: var(--ink-sepia);
        }

        /* Sur petit écran, les tableaux deviennent des blocs empilés :
           chaque cellule porte son intitulé de colonne (data-label). */
        @media (max-width: 767px) {
            .prog-tablewrap {
                overflow-x: visible;
            }

            table.prog-table,
            .prog-details table.prog-table {
                min-width: 0;
            }

            .prog-table thead {
                position: absolute;
                width: 1px;
                height: 1px;
                overflow: hidden;
                clip: rect(0 0 0 0);
                white-space: nowrap;
            }

            .prog-table tr {
                display: block;
                padding: 0.9rem 0 1.1rem;
                border-bottom: 1px solid var(--parchment-burnt);
            }

            .prog-table tbody tr:last-child {
                border-bottom: none;
            }

            .prog-table td,
            .prog-table td:first-child,
            .prog-table td.prog-ours,
            .prog-table td.prog-note {
                display: block;
                border: none;
                min-width: 0;
                padding: 0.25rem 1.1rem;
            }

            .prog-table td::before {
                content: attr(data-label);
                display: block;
                font-family: 'Cinzel', serif;
                font-size: 0.65rem;
                text-transform: uppercase;
                letter-spacing: 0.1em;
                color: var(--ink-light);
                margin-bottom: 0.15rem;
            }

            .prog-table td:first-child {
                font-size: 1.02rem;
                line-height: 1.4;
                padding-bottom: 0.5rem;
            }

            .prog-table td:first-child::before {
                display: none;
            }

            .prog-table tbody tr:hover td {
                background: none;
            }

            .prog-scroll-only {
                display: none;
            }
        }

/* ── Onglets de cycle (programme.html) ───────────────────────────────────────
   Greffes sur les <details> existants : sans JS, la page reste un accordeon.
   La barre est masquee quand le JS n'a pas pu s'executer serait trompeur, on la
   laisse donc visible et inerte plutot que d'ouvrir un etat incoherent. */
.prog-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 18px; }
.prog-tab {
  flex: 1 1 160px; display: flex; flex-direction: column; gap: 2px;
  padding: 12px 16px; border: 1px solid var(--parchment-dark, #d9d8d1);
  background: transparent; border-radius: 8px; cursor: pointer;
  font-family: inherit; font-size: 1rem; font-weight: 600; color: inherit;
  text-align: left; transition: background .15s, border-color .15s;
}
.prog-tab span { font-weight: 400; font-size: .82em; opacity: .7; }
.prog-tab:hover { background: rgba(51, 71, 91, .06); }
.prog-tab.is-on {
  background: var(--royal, #33475B); border-color: var(--royal, #33475B); color: #fff;
}
.prog-tab.is-on span { opacity: .85; }
/* L'entete de volet fait doublon avec les onglets — mais UNIQUEMENT si le script
   a pu s'executer : sans lui, le summary est le seul moyen d'ouvrir un cycle. */
.prog-tabs-actifs .prog-details.prog-cycle > summary { display: none; }
@media (max-width: 560px) { .prog-tab { flex: 1 1 100%; } }

/* ── Blocs d'appel a l'action et liens de pied de section ────────────────── */
.teachers-cta-block { text-align: center; }
.teachers-cta-block .btn { margin-top: 6px; }
.teachers-links-inline { margin-top: 22px; font-size: .92rem; opacity: .8; }
.teachers-links-inline a { white-space: nowrap; }
.teachers-note { margin-top: 22px; padding: 14px 18px; border-left: 3px solid var(--gold, #c8a45c);
  background: rgba(200, 164, 92, .08); font-size: .95rem; }


/* ── Hub de l'espace enseignants ─────────────────────────────────────────────
   Les destinations de la section, a egalite. La carte « bientot » n'est pas un
   lien : elle annonce sans simuler une page qui n'existe pas encore. */
/* Quatre portes : une grille 2x2 les tient a egalite. En auto-fit on obtenait
   3 + 1, qui hierarchise sans le vouloir la carte releguee seule en bas. */
.hub-grid { display: grid; gap: 18px; grid-template-columns: repeat(2, 1fr); margin-top: 8px; }
@media (max-width: 780px) { .hub-grid { grid-template-columns: 1fr; } }
.hub-card {
  display: flex; flex-direction: column; gap: 8px; padding: 26px 26px 22px;
  border: 1px solid var(--parchment-dark, #e3e2db); border-radius: 12px;
  background: rgba(255, 255, 255, .55); color: inherit; text-decoration: none;
  transition: transform .14s, box-shadow .14s, border-color .14s;
}
a.hub-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(20, 22, 28, .10);
  border-color: var(--gold, #c8a45c); }
.hub-card h2 { margin: 0; font-size: 1.25rem; }
.hub-card p { margin: 0; flex: 1; font-size: .95rem; line-height: 1.6; opacity: .85; }
.hub-icon { font-size: 1.9rem; line-height: 1; }
.hub-go { margin-top: 6px; font-weight: 600; color: var(--crimson, #8B1538); }
.hub-card-bientot { opacity: .72; }
.hub-card-bientot .hub-go { color: inherit; opacity: .6; font-weight: 500; }
.hub-tag { display: inline-block; margin-left: 6px; padding: 2px 9px; border-radius: 999px;
  font-size: .62em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  vertical-align: middle; background: var(--gold, #c8a45c); color: #fff; }