/* ==========================================================================
   Univers Académie — habillage (header, footer, fond de page)
   --------------------------------------------------------------------------
   Chargé UNIQUEMENT sur les pages Académie (voir inc/academie/chrome.php).
   Écrit à la main, hors pipeline Sass : aucune compilation serveur requise.

   Tous les sélecteurs sont préfixés `.academie` ou `.ac-*`. Rien ne peut
   fuir sur le site public, qui ne charge même pas ce fichier.

   Tokens repris de l'artboard « TPSG Académie.dc.html », seul artboard du
   design à les déclarer en variables. Voir la spec, section « Écarts entre
   artboards ».
   ========================================================================== */

body.academie {
    /* Fonds et surfaces */
    --ac-bg: #1B1817;
    --ac-bg-deep: #0A0908;
    --ac-surface: #171412;
    --ac-surface-2: #191614;

    /* Traits */
    --ac-line: #2C2725;
    --ac-line-soft: #221E1C;
    --ac-line-2: #3A3330;      /* bordure claire des modales */

    /* Textes */
    --ac-text: #F5EBE4;
    --ac-text-2: #C9BEB7;
    --ac-text-muted: #9A8F88;
    --ac-text-dim: #8A807A;
    --ac-text-faint: #7C726C;
    --ac-text-soft: #BFB4AD;   /* paragraphe du héros */

    /* Accent */
    --ac-accent: #FF4F45;
    --ac-accent-hi: #FF6A4D;
    --ac-accent-soft: #FF8A70;
    --ac-accent-wash: rgba(255, 79, 69, .16);
    --ac-accent-edge: rgba(255, 79, 69, .34);
    --ac-on-accent: #F6E9E0;

    /* Typographie */
    --ac-font-display: 'Archivo', system-ui, sans-serif;
    --ac-font-body: 'Instrument Sans', system-ui, sans-serif;
    --ac-font-serif: 'Newsreader', Georgia, serif;

    /* Formes et mouvement */
    --ac-gutter: 40px;
    --ac-cat-gutter: 72px;   /* gouttière du catalogue, valeur du design */
    --ac-card-w: 288px;
    --ac-face: 168px;   /* côté du portrait de formateur */
    --ac-hero-h: 480px;
    --ac-radius: 4px;
    --ac-radius-lg: 6px;
    --ac-ease: .42s cubic-bezier(.16, .84, .3, 1);

    background: var(--ac-bg);
    color: var(--ac-text);

    /* La police par défaut du design est la SERIF Newsreader :
       `body { font-family: 'Newsreader', Georgia, serif }` dans l'artboard.
       Instrument Sans n'habille que les contrôles (champs, boutons, navigation)
       et Archivo les titres, compteurs et badges. */
    font-family: var(--ac-font-serif);
}

/* Contrôles : Instrument Sans, comme dans le design. */
.academie input,
.academie select,
.academie textarea,
.academie button,
.academie .btn,
.academie .form-control,
.academie .form-select,
.academie .ac-nav-link,
.academie .ac-link,
.academie .ac-mitem {
    font-family: var(--ac-font-body);
}

body.academie #theme-main {
    background: var(--ac-bg);
}

/* Pleine largeur : tous les gabarits de l'Académie sont fluides.
   Les conteneurs Bootstrap du thème (page.php, page-compte.php,
   page-formations.php, single-parcours.php) perdent leur largeur maximale et
   adoptent la gouttière commune au header et au footer.

   Sans effet sur /abonnement/ ni sur les autres pages en blocs : elles
   n'utilisent aucun conteneur Bootstrap, seulement la mise en page Gutenberg. */
.academie #theme-main .container,
.academie #theme-main .container-fluid,
.academie #theme-main .container-sm,
.academie #theme-main .container-md,
.academie #theme-main .container-lg,
.academie #theme-main .container-xl,
.academie #theme-main .container-xxl {
    max-width: none;
    width: 100%;
    padding-left: var(--ac-gutter);
    padding-right: var(--ac-gutter);
}

/* Le thème déclare `.row { --bs-gutter-x: 2.5rem }` APRÈS Bootstrap, à égalité
   de spécificité : la classe `g-0` est donc neutralisée sur tout le site. Les
   `.row` gardent des marges négatives de -20 px, ce qui débordait dès que le
   conteneur occupait toute la largeur (lecteur de cours, `container-fluid px-0`).
   On rétablit l'intention de `g-0`, dans le périmètre Académie uniquement. */
.academie #theme-main .row.g-0,
.academie #theme-main .row.gx-0 {
    --bs-gutter-x: 0;
}

/* Couleur de lien par défaut : limitée au CONTENU (#theme-main).
   La coque (header, footer) est hors de <main> et garde ses propres couleurs —
   sans cette restriction, `body.academie a` l'emporterait en spécificité sur
   les classes .ac-* et repeindrait toute la navigation en orange. */
body.academie #theme-main a {
    color: var(--ac-accent-hi);
    text-decoration: none;
}

body.academie #theme-main a:hover {
    color: var(--ac-accent-soft);
}

/* La coque ne souligne jamais ses liens (Bootstrap souligne par défaut). */
.ac-returnbar a,
.ac-header a,
.ac-mobile-panel a,
.ac-footer a,
.ac-skip {
    text-decoration: none;
}

/* --------------------------------------------------------------------------
   Utilitaires
   -------------------------------------------------------------------------- */

.ac-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.ac-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: 10px 16px;
    background: var(--ac-accent);
    color: var(--ac-on-accent);
    font-family: var(--ac-font-display);
    font-weight: 700;
}

.ac-skip:focus {
    left: 0;
    color: var(--ac-on-accent);
}

.ac-caret {
    font-size: .85em;
}

/* Transitions communes, comme dans le design */
.academie .ac-header a,
.academie .ac-header button,
.academie .ac-header input,
.academie .ac-header summary,
.academie .ac-footer a {
    transition:
        background-color var(--ac-ease),
        color var(--ac-ease),
        border-color var(--ac-ease),
        opacity var(--ac-ease);
}

/* --------------------------------------------------------------------------
   Bandeau de retour
   -------------------------------------------------------------------------- */

.ac-returnbar {
    display: flex;
    align-items: center;
    height: 40px;
    padding: 0 var(--ac-gutter);
    background: var(--ac-bg-deep);
    border-bottom: 1px solid var(--ac-line-soft);
}

.ac-returnbar a {
    color: var(--ac-text-muted);
    font-size: 12.5px;
}

.ac-returnbar a:hover {
    color: var(--ac-text);
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.ac-header {
    position: sticky;
    top: 0;
    z-index: 70;
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 14px var(--ac-gutter);
    background: rgba(16, 14, 13, .92);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--ac-line-soft);
}

.ac-logo {
    display: block;
    flex-shrink: 0;
}

.ac-logo img {
    display: block;
    height: 30px;
    width: auto;
}

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */

.ac-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.ac-nav-link {
    position: relative;
    display: block;
    padding: 8px 12px;
    color: var(--ac-text-2);
    font-family: var(--ac-font-body);
    font-size: 14.5px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
}

.ac-nav-link:hover,
.ac-nav-drop[open] > .ac-nav-link {
    color: var(--ac-text);
}

.ac-nav-link.is-current {
    color: var(--ac-text);
}

.ac-nav-link.is-current::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--ac-accent);
}

.ac-nav-drop {
    position: relative;
}

.ac-nav-drop > summary {
    list-style: none;
}

.ac-nav-drop > summary::-webkit-details-marker {
    display: none;
}

.ac-drop-panel {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    z-index: 90;
    display: grid;
    gap: 2px;
    min-width: 268px;
    padding: 8px;
    background: var(--ac-surface);
    border: 1px solid var(--ac-line);
    border-radius: var(--ac-radius-lg);
    box-shadow: 0 22px 48px rgba(0, 0, 0, .5);
}

.ac-drop-item {
    display: block;
    padding: 11px 12px;
    border-radius: var(--ac-radius);
    color: var(--ac-text);
    font-size: 14.5px;
    font-weight: 600;
}

.ac-drop-item:hover {
    background: var(--ac-line-soft);
    color: var(--ac-text);
}

.ac-drop-desc {
    display: block;
    margin-top: 3px;
    color: var(--ac-text-dim);
    font-size: 13px;
    font-weight: 400;
}

/* --------------------------------------------------------------------------
   Recherche
   -------------------------------------------------------------------------- */

.ac-search {
    position: relative;
    flex: 0 1 320px;
    min-width: 220px;
    margin-left: auto;
}

.ac-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ac-text-faint);
    font-size: 14px;
    pointer-events: none;
}

.ac-search input {
    box-sizing: border-box;
    width: 100%;
    padding: 10px 14px 10px 34px;
    background: var(--ac-surface-2);
    border: 1px solid var(--ac-line);
    border-radius: var(--ac-radius);
    color: var(--ac-text);
    font-family: var(--ac-font-body);
    font-size: 14px;
    outline: none;
}

.ac-search input::placeholder {
    color: var(--ac-text-faint);
}

.ac-search input:focus {
    border-color: var(--ac-accent);
    background: #1E1A18;
}

/* --------------------------------------------------------------------------
   Zone compte
   -------------------------------------------------------------------------- */

.ac-account {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
    flex-shrink: 0;
}

.ac-link {
    color: var(--ac-text-2);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

.ac-link:hover {
    color: var(--ac-text);
}

.ac-btn {
    padding: 9px 18px;
    background: var(--ac-accent);
    border-radius: var(--ac-radius);
    color: var(--ac-on-accent);
    font-family: var(--ac-font-display);
    font-size: 13.5px;
    font-weight: 700;
    white-space: nowrap;
}

.ac-btn:hover {
    background: var(--ac-accent-hi);
    color: var(--ac-on-accent);
}

.ac-user {
    position: relative;
    flex-shrink: 0;
}

.ac-user > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    cursor: pointer;
}

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

.ac-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: var(--ac-radius);
    object-fit: cover;
}

.ac-avatar-initials {
    background: var(--ac-accent);
    color: var(--ac-on-accent);
    font-family: var(--ac-font-display);
    font-size: 13px;
    font-weight: 800;
}

.ac-user-name {
    color: var(--ac-text-2);
    font-size: 13.5px;
    white-space: nowrap;
}

.ac-user-panel {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    z-index: 95;
    display: grid;
    gap: 2px;
    width: 320px;
    padding: 8px;
    background: var(--ac-surface);
    border: 1px solid var(--ac-line);
    border-radius: var(--ac-radius-lg);
    box-shadow: 0 22px 48px rgba(0, 0, 0, .5);
}

.ac-user-head {
    padding: 12px 12px 14px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--ac-line-soft);
}

.ac-user-full {
    color: var(--ac-text);
    font-family: var(--ac-font-display);
    font-size: 15.5px;
    font-weight: 700;
}

.ac-user-mail {
    margin-top: 3px;
    color: var(--ac-text-dim);
    font-size: 13px;
    overflow-wrap: anywhere;
}

.ac-plan {
    display: inline-flex;
    align-items: center;
    margin-top: 10px;
    padding: 4px 10px;
    background: var(--ac-accent-wash);
    border: 1px solid var(--ac-accent-edge);
    border-radius: 3px;
    color: var(--ac-accent-soft);
    font-family: var(--ac-font-display);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
}

.ac-user-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border-radius: var(--ac-radius);
    color: var(--ac-text);
    font-family: var(--ac-font-body);
    font-size: 14.5px;
}

.ac-user-item:hover {
    background: var(--ac-line-soft);
    color: var(--ac-text);
}

.ac-user-count {
    margin-left: auto;
    color: var(--ac-text-dim);
    font-family: var(--ac-font-display);
    font-size: 12.5px;
    font-weight: 800;
}

.ac-user-out {
    margin-top: 6px;
    padding: 12px;
    border-top: 1px solid var(--ac-line-soft);
    border-radius: var(--ac-radius);
    color: var(--ac-text-muted);
    font-family: var(--ac-font-body);
    font-size: 14px;
}

.ac-user-out:hover {
    color: var(--ac-text);
}

/* --------------------------------------------------------------------------
   Burger et panneau mobile
   -------------------------------------------------------------------------- */

/* Case à cocher masquée mais focusable : le panneau s'ouvre sans JavaScript. */
.ac-nav-toggle {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    margin: 0;
}

.ac-burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 34px;
    flex-shrink: 0;
    border-radius: var(--ac-radius);
    cursor: pointer;
}

.ac-burger-bars {
    display: grid;
    gap: 5px;
    width: 20px;
}

.ac-burger-bars i {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: var(--ac-text-2);
    transition: transform var(--ac-ease), opacity var(--ac-ease);
}

/* Panneau ouvert : les trois barres deviennent une croix de fermeture. */
.ac-nav-toggle:checked ~ .ac-header .ac-burger-bars i:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.ac-nav-toggle:checked ~ .ac-header .ac-burger-bars i:nth-child(2) {
    opacity: 0;
}

.ac-nav-toggle:checked ~ .ac-header .ac-burger-bars i:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.ac-nav-toggle:focus-visible ~ .ac-header .ac-burger {
    outline: 2px solid var(--ac-accent);
    outline-offset: 2px;
}

.ac-mobile-panel {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 60;
    /* Décalage haut = bandeau de retour (40px) + header mobile (54px) + marge.
       Le header reste au-dessus du panneau (z-index 70) pour que le burger
       serve de bouton de fermeture. */
    padding: 108px 24px 48px;
    overflow-y: auto;
    background: var(--ac-bg);
}

.ac-nav-toggle:checked ~ .ac-mobile-panel {
    display: block;
}

.ac-msearch input {
    box-sizing: border-box;
    width: 100%;
    padding: 12px 14px;
    background: var(--ac-surface-2);
    border: 1px solid var(--ac-line);
    border-radius: var(--ac-radius);
    color: var(--ac-text);
    font-family: var(--ac-font-body);
    font-size: 15px;
    outline: none;
}

.ac-msearch input::placeholder {
    color: var(--ac-text-faint);
}

.ac-mnav {
    display: grid;
    gap: 2px;
    margin: 24px 0;
}

.ac-mnav .ac-nav-link {
    padding: 12px 0;
    font-size: 17px;
}

.ac-mnav .ac-nav-link.is-current::after {
    left: 0;
    right: auto;
    width: 28px;
}

.ac-mnav .ac-nav-drop {
    position: static;
}

.ac-mnav .ac-drop-panel {
    position: static;
    min-width: 0;
    padding: 4px 0 8px 14px;
    background: none;
    border: 0;
    border-left: 1px solid var(--ac-line);
    border-radius: 0;
    box-shadow: none;
}

.ac-maccount {
    display: grid;
    gap: 4px;
    padding-top: 20px;
    border-top: 1px solid var(--ac-line-soft);
}

.ac-maccount .ac-btn,
.ac-maccount .ac-link {
    justify-self: start;
}

.ac-mitem {
    display: block;
    padding: 12px 0;
    color: var(--ac-text);
    font-size: 15px;
}

.ac-mitem:hover {
    color: var(--ac-accent-soft);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.ac-footer {
    margin-top: 70px;
    padding: 38px var(--ac-gutter) 34px;
    border-top: 1px solid var(--ac-line-soft);
    color: var(--ac-text-faint);
    font-family: var(--ac-font-body);
    font-size: 13px;
}

.ac-foot-grid {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 40px;
}

.ac-foot-col {
    min-width: 0;
}

.ac-foot-biblio {
    flex: 1 1 260px;
    max-width: 420px;
}

.ac-foot-partner {
    flex: 1 1 200px;
    text-align: center;
}

.ac-foot-contact {
    flex: 1 1 260px;
}

.ac-foot-title {
    color: var(--ac-text);
    font-family: var(--ac-font-display);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -.01em;
}

.ac-foot-biblio p {
    margin: 8px 0 12px;
    color: var(--ac-text-dim);
    font-size: 13.5px;
    line-height: 1.55;
    text-wrap: pretty;
}

.ac-foot-cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    background: var(--ac-surface-2);
    border: 1px solid var(--ac-line);
    border-radius: var(--ac-radius);
    color: var(--ac-text-2);
    font-size: 13px;
    font-weight: 600;
}

.ac-foot-cta:hover {
    background: var(--ac-accent-wash);
    border-color: var(--ac-accent-edge);
    color: var(--ac-text);
}

.ac-foot-copy {
    margin-top: 20px;
}

/* Le SVG est déjà en #F5EBE4 (la crème du design) : pas de filtre de
   décoloration, contrairement au PNG couleur qu'il remplace.
   Hauteur demandée : moitié de celle du design (38 px → 19 px). */
.ac-foot-partner img {
    display: block;
    height: 19px;
    width: auto;
    margin: 14px auto 0;
    opacity: .72;
}

.ac-foot-partner a:hover img {
    opacity: 1;
}

.ac-foot-mail {
    display: block;
    margin-top: 8px;
    color: var(--ac-accent-soft);
    font-size: 14px;
    overflow-wrap: anywhere;
}

.ac-foot-mail:hover {
    color: var(--ac-text);
}

.ac-foot-hours {
    margin-top: 6px;
    color: var(--ac-text-faint);
    font-size: 13px;
}

.ac-foot-links {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 20px;
}

.ac-foot-links a {
    color: var(--ac-text-muted);
}

.ac-foot-links a:hover {
    color: var(--ac-text);
}

/* ==========================================================================
   Contenu sombre
   --------------------------------------------------------------------------
   DEUX périmètres, et deux seulement :

   1. `.ac-dark-content` — les pages dont le THÈME rend le contenu : espace
      compte, lecteur de cours, archives de cours. Classe posée par
      tpsg_academie_theme_rendered_content() dans inc/academie/chrome.php.

   2. `.tpsg-cat` — le catalogue, où qu'il apparaisse. Vérifié sur /academie/
      et /abonnement/ : il est toujours posé sur le fond de page, jamais dans
      une section colorée.

   Le contenu d'une PAGE n'est jamais touché : il est composé en blocs
   Gutenberg qui portent leurs propres couleurs, et certaines sections sont
   crème à dessein (/abonnement/). Une règle large sur #theme-main y rendait
   les titres illisibles — crème sur crème.

   Méthode : on redéfinit les variables CSS de Bootstrap 5.3 sur le conteneur,
   au lieu de surcharger chaque règle. Bootstrap les lit partout (cartes,
   champs, listes, tableaux, alertes, progression), donc une seule déclaration
   couvre la majorité des composants sans !important.
   ========================================================================== */

.ac-dark-content #theme-main,
.academie .tpsg-cat {
    color: var(--ac-text);

    /* Bases */
    --bs-body-color: var(--ac-text);
    --bs-body-bg: var(--ac-surface);
    --bs-emphasis-color: var(--ac-text);
    --bs-secondary-color: var(--ac-text-dim);
    --bs-secondary-bg: var(--ac-surface-2);
    --bs-tertiary-bg: var(--ac-surface-2);
    --bs-border-color: var(--ac-line);
    --bs-border-color-translucent: var(--ac-line);

    /* Utilitaires de couleur. `.text-dark` sert à l'onglet actif de la barre
       latérale du compte : le repasser en crème évite un !important. */
    --bs-dark-rgb: 245, 235, 228;
    --bs-light-rgb: 25, 22, 20;
    --bs-white-rgb: 23, 20, 18;
    --bs-secondary-rgb: 44, 39, 37;

    /* Alertes : les variantes « subtle » de Bootstrap repassées en sombre.
       Ces tokens-là sont bien déclarés à la racine, donc surchargeables ici. */
    --bs-info-bg-subtle: var(--ac-surface-2);
    --bs-info-border-subtle: var(--ac-line);
    --bs-info-text-emphasis: var(--ac-text-2);
    --bs-secondary-bg-subtle: var(--ac-surface-2);
    --bs-secondary-border-subtle: var(--ac-line);
    --bs-secondary-text-emphasis: var(--ac-text-2);
    --bs-warning-bg-subtle: rgba(255, 193, 7, .1);
    --bs-warning-border-subtle: rgba(255, 193, 7, .32);
    --bs-warning-text-emphasis: #FFD27A;
}

.ac-dark-content #theme-main h1,
.ac-dark-content #theme-main h2,
.ac-dark-content #theme-main h3,
.ac-dark-content #theme-main h4,
.ac-dark-content #theme-main h5,
.ac-dark-content #theme-main h6,
.academie .tpsg-cat h1,
.academie .tpsg-cat h2,
.academie .tpsg-cat h3,
.academie .tpsg-cat h4,
.academie .tpsg-cat h5,
.academie .tpsg-cat h6 {
    color: var(--ac-text);
}

/* --- Composants : viser le composant, pas l'ancêtre -----------------------
   Bootstrap 5.3 déclare les variables de chaque composant SUR le composant
   lui-même (`.card{--bs-card-bg:…}`, `.list-group{--bs-list-group-bg:…}`…).
   Une redéfinition sur un ancêtre est donc systématiquement écrasée par la
   déclaration du composant, plus proche. Il faut viser le composant.
   -------------------------------------------------------------------------- */

.ac-dark-content #theme-main .card,
.academie .tpsg-cat .card {
    --bs-card-bg: var(--ac-surface);
    --bs-card-cap-bg: var(--ac-surface-2);
    --bs-card-color: var(--ac-text);
    --bs-card-border-color: var(--ac-line);
}

.ac-dark-content #theme-main .list-group,
.academie .tpsg-cat .list-group {
    --bs-list-group-bg: var(--ac-surface);
    --bs-list-group-color: var(--ac-text-2);
    --bs-list-group-border-color: var(--ac-line);
    --bs-list-group-action-color: var(--ac-text-2);
    --bs-list-group-action-hover-bg: var(--ac-surface-2);
    --bs-list-group-action-hover-color: var(--ac-text);
    --bs-list-group-action-active-bg: var(--ac-surface-2);
    --bs-list-group-active-bg: var(--ac-accent);
    --bs-list-group-active-border-color: var(--ac-accent);
    --bs-list-group-active-color: var(--ac-on-accent);
}

.ac-dark-content #theme-main .table,
.academie .tpsg-cat .table {
    --bs-table-color: var(--ac-text);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--ac-line);
    --bs-table-striped-color: var(--ac-text);
    --bs-table-striped-bg: rgba(245, 235, 228, .04);
    --bs-table-hover-color: var(--ac-text);
    --bs-table-hover-bg: rgba(245, 235, 228, .06);
}

.ac-dark-content #theme-main .progress,
.academie .tpsg-cat .progress {
    --bs-progress-bg: var(--ac-line);
    --bs-progress-bar-bg: var(--ac-accent);
}

/* --- Titre de page ---------------------------------------------------------
   page.php sort le titre hors de tout conteneur que l'on puisse cibler : sur
   fond sombre il restait noir. Provisoire — /catalogue/ aura son gabarit.
   -------------------------------------------------------------------------- */

.academie #container-content-page > .row > div > h1 {
    color: var(--ac-text);
}

/* --- Formulaires : Bootstrap n'expose pas de variable pour les champs ----- */

.ac-dark-content #theme-main .form-control,
.ac-dark-content #theme-main .form-select,
.academie .tpsg-cat .form-control,
.academie .tpsg-cat .form-select {
    background-color: var(--ac-surface-2);
    border-color: var(--ac-line);
    color: var(--ac-text);
}

.ac-dark-content #theme-main .form-control::placeholder,
.academie .tpsg-cat .form-control::placeholder {
    color: var(--ac-text-faint);
}

.ac-dark-content #theme-main .form-control:focus,
.ac-dark-content #theme-main .form-select:focus,
.academie .tpsg-cat .form-control:focus,
.academie .tpsg-cat .form-select:focus {
    background-color: var(--ac-surface-2);
    border-color: var(--ac-accent);
    color: var(--ac-text);
    box-shadow: 0 0 0 .2rem var(--ac-accent-wash);
}

.ac-dark-content #theme-main .form-label,
.academie .tpsg-cat .form-label {
    color: var(--ac-text-2);
}

.ac-dark-content #theme-main .form-text,
.academie .tpsg-cat .form-text {
    color: var(--ac-text-dim);
}

.ac-dark-content #theme-main .form-check-input,
.academie .tpsg-cat .form-check-input {
    --bs-form-check-bg: var(--ac-surface-2);
    border-color: var(--ac-line);
}

.ac-dark-content #theme-main .form-check-input:checked,
.academie .tpsg-cat .form-check-input:checked {
    background-color: var(--ac-accent);
    border-color: var(--ac-accent);
}

/* --- Boutons -------------------------------------------------------------- */

.ac-dark-content #theme-main .btn-primary,
.academie .tpsg-cat .btn-primary {
    --bs-btn-bg: var(--ac-accent);
    --bs-btn-border-color: var(--ac-accent);
    --bs-btn-color: var(--ac-on-accent);
    --bs-btn-hover-bg: var(--ac-accent-hi);
    --bs-btn-hover-border-color: var(--ac-accent-hi);
    --bs-btn-hover-color: var(--ac-on-accent);
    --bs-btn-active-bg: var(--ac-accent-hi);
    --bs-btn-active-border-color: var(--ac-accent-hi);
}

.ac-dark-content #theme-main .btn-light,
.academie .tpsg-cat .btn-light {
    --bs-btn-bg: var(--ac-surface-2);
    --bs-btn-border-color: var(--ac-line);
    --bs-btn-color: var(--ac-text-2);
    --bs-btn-hover-bg: var(--ac-line);
    --bs-btn-hover-border-color: var(--ac-line);
    --bs-btn-hover-color: var(--ac-text);
}

/* Bouton du thème : ses couleurs viennent de variables maison. */
.ac-dark-content #theme-main .btn-custom-outline-dark,
.academie .tpsg-cat .btn-custom-outline-dark {
    --btn-text-color: var(--ac-accent-soft);
    --btn-border-color: var(--ac-accent-edge);
}

.ac-dark-content #theme-main .btn-custom-outline-dark:hover,
.academie .tpsg-cat .btn-custom-outline-dark:hover {
    --btn-bg-color: var(--ac-accent);
    --btn-border-color: var(--ac-accent);
    color: var(--ac-on-accent) !important;
}

/* La barre latérale du compte reste discrète : ce n'est pas une action. */
.ac-dark-content #theme-main aside .btn-custom-outline-dark {
    --btn-text-color: var(--ac-text-2);
    --btn-border-color: var(--ac-line);
    color: var(--ac-text-2);
}

.ac-dark-content #theme-main aside .nav-link:hover {
    color: var(--ac-text) !important;
}

/* --- Catalogue ------------------------------------------------------------ */

/* Titre de cours : `.text-body` suit --bs-body-color, déjà clair. On force la
   pleine luminosité, le titre étant l'élément principal de la carte. */
.academie .tpsg-cat .tpsg-cat__card .text-body {
    color: var(--ac-text) !important;
}

.academie .tpsg-cat .tpsg-cat__card a:hover,
.academie .tpsg-cat .tpsg-cat__card a:hover .text-body {
    color: var(--ac-accent-soft) !important;
}

.ac-dark-content #theme-main hr,
.academie .tpsg-cat hr {
    border-color: var(--ac-line);
}

/* ==========================================================================
   Catalogue (page-catalogue.php, single-collection.php)
   --------------------------------------------------------------------------
   Héros de cours mis en avant, puis rangées à défilement horizontal.
   Aucun JavaScript : le défilement repose sur scroll-snap, la navigation du
   héros sur des ancres.
   ========================================================================== */

.ac-cat {
    padding-bottom: 40px;
}

/* --- Héros ----------------------------------------------------------------
   Reproduit l'artboard : hauteur fixe, photo floutée, empilement de dégradés,
   carte en position absolue avec halo, flèches et pastilles.
   -------------------------------------------------------------------------- */

.ac-hero {
    position: relative;
    height: var(--ac-hero-h, 480px);
    overflow: hidden;
    background: var(--ac-bg-deep);
}

/* Couche 1 : la photo, floutée et éclaircie. `inset: -8%` évite que le flou
   laisse apparaître les bords. */
.ac-hero-photo {
    position: absolute;
    inset: -8%;
    background-image: url("../img/academie/bg_catalogue.jpg");
    background-size: cover;
    background-position: center;
    opacity: .6;
    filter: blur(3px) brightness(1.4) saturate(1.05);
}

/* Voiles de lisibilité. En CSS le premier fond listé est le plus haut :
   l'ordre est donc l'inverse de celui de l'artboard.

   Deux textures du design sont volontairement absentes : le halo rouge
   (`texGlow`) et le grillage de 30 px (`texGrid`) y sont des interrupteurs
   réglés sur `false` par défaut. Seul `texAmbient` — le halo chaud — est actif. */
.ac-hero-veil {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, var(--ac-bg) 8%, rgba(16, 14, 13, .66) 44%, rgba(16, 14, 13, .12) 78%, rgba(16, 14, 13, 0) 100%),
        linear-gradient(180deg, rgba(10, 9, 8, .35) 0%, rgba(10, 9, 8, .06) 50%, rgba(10, 9, 8, .22) 80%, rgba(16, 14, 13, .78) 95%, var(--ac-bg) 100%),
        radial-gradient(58% 62% at 50% 46%, rgba(255, 244, 228, .16) 0%, rgba(255, 244, 228, 0) 70%);
}

.ac-hero-track {
    position: relative;
    z-index: 1;
    display: flex;
    height: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.ac-hero-track::-webkit-scrollbar {
    display: none;
}

.ac-hero-slide {
    position: relative;
    flex: 0 0 100%;
    height: 100%;
    min-width: 0;
    scroll-snap-align: start;
}

/* Halo : une copie floutée de la vignette, posée derrière la carte. */
.ac-hero-glow {
    position: absolute;
    right: 7%;
    top: 50%;
    transform: translateY(-50%);
    width: 46%;
    max-width: 620px;
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    background-size: cover;
    background-position: center;
    opacity: .45;
    filter: blur(48px) saturate(1.8);
    pointer-events: none;
}

.ac-hero-card {
    position: absolute;
    right: 7%;
    top: 50%;
    transform: translateY(-50%);
    box-sizing: border-box;
    width: 46%;
    max-width: 620px;
    padding: 6px;
    border-radius: 16px;
    background: rgba(245, 235, 228, .08);
    border: 1px solid rgba(245, 235, 228, .16);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .3), 0 40px 90px rgba(0, 0, 0, .22);
}

.ac-hero-card-in {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 11px;
    overflow: hidden;
    background: #100E0C;
}

.ac-hero-card-in img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ac-hero-text {
    position: relative;
    z-index: 2;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 22px;
    height: 100%;
    width: 44%;
    min-width: 260px;
    padding: 40px var(--ac-cat-gutter) 44px;
}

.ac-hero-title {
    margin: 0;
    color: var(--ac-text);
    font-family: var(--ac-font-display);
    font-weight: 900;
    font-size: 68px;
    line-height: .95;
    letter-spacing: -.035em;
    text-wrap: balance;
}

.ac-hero-body {
    width: 100%;
    min-width: 0;
}

.ac-hero-flags {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 16px;
}

.ac-hero-new {
    padding: 5px 12px;
    border-radius: var(--ac-radius);
    background: var(--ac-accent);
    color: var(--ac-on-accent);
    font-family: var(--ac-font-display);
    font-weight: 800;
    font-size: 11px;
    letter-spacing: .09em;
    text-transform: uppercase;
    white-space: nowrap;
}

.ac-hero-date {
    color: var(--ac-text-dim);
    font-size: 12.5px;
    white-space: nowrap;
}

.ac-hero-desc {
    max-width: 560px;
    margin: 0 0 24px;
    color: var(--ac-text-soft);
    font-size: 17px;
    line-height: 1.55;
    text-wrap: pretty;
}

.ac-hero-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin: 0;
}

.ac-hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;
    font-family: var(--ac-font-display);
    font-weight: 800;
    font-size: 15px;
}

.ac-hero-play {
    font-size: .85em;
}

.ac-hero-meta {
    color: var(--ac-text-dim);
    font-size: 13.5px;
}

.ac-hero-arrows {
    position: absolute;
    right: 7%;
    bottom: 18px;
    z-index: 3;
    display: flex;
    gap: 8px;
}

.ac-hero-arrows a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--ac-radius);
    background: rgba(10, 9, 8, .6);
    border: 1px solid var(--ac-line);
    color: var(--ac-text);
    font-size: 15px;
}

.ac-hero-arrows a:hover {
    background: var(--ac-accent);
    border-color: var(--ac-accent);
    color: var(--ac-on-accent);
}

.ac-hero-dots {
    position: absolute;
    left: var(--ac-cat-gutter);
    bottom: 20px;
    z-index: 3;
    display: flex;
    gap: 7px;
}

.ac-hero-dots a {
    width: 26px;
    height: 4px;
    border-radius: 4px;
    background: var(--ac-line);
}

.ac-hero-dots a:hover,
.ac-hero-dots a:focus-visible {
    background: var(--ac-accent);
}

/* Pastille active. Sans JavaScript on s'appuie sur :target ; la première est
   active tant qu'aucune diapositive n'est ciblée. Si :has() n'est pas gérée,
   les pastilles restent simplement uniformes. */
.ac-hero:not(:has(.ac-hero-slide:target)) .ac-hero-dots a:first-child,
.ac-hero:has(#ac-hero-0:target) .ac-hero-dots a:nth-child(1),
.ac-hero:has(#ac-hero-1:target) .ac-hero-dots a:nth-child(2),
.ac-hero:has(#ac-hero-2:target) .ac-hero-dots a:nth-child(3),
.ac-hero:has(#ac-hero-3:target) .ac-hero-dots a:nth-child(4) {
    width: 34px;
    background: var(--ac-accent);
}

/* --- Rangées -------------------------------------------------------------- */

.ac-row {
    position: relative;
    padding: 30px 0 6px;
}

.ac-row-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 0 var(--ac-cat-gutter) 14px;
}

.ac-row-title {
    margin: 0;
    color: var(--ac-text);
    font-family: var(--ac-font-display);
    font-weight: 700;
    font-size: 21px;
}

.ac-row-count {
    color: var(--ac-text-faint);
    font-size: 13px;
    white-space: nowrap;
}

.ac-row-all {
    margin-left: auto;
    color: var(--ac-text-muted);
    font-family: var(--ac-font-body);
    font-size: 13.5px;
    font-weight: 500;
    white-space: nowrap;
}

.ac-row-all:hover {
    color: var(--ac-accent-soft);
}

/* Les marges négatives compensent le rembourrage : la carte agrandie au survol
   n'est pas rognée par le conteneur de défilement. */
.ac-row-track {
    display: flex;
    gap: 16px;
    margin: -10px 0;
    padding: 14px var(--ac-cat-gutter) 22px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-left: var(--ac-cat-gutter);
    scroll-padding-right: var(--ac-cat-gutter);
    scrollbar-width: none;
}

.ac-row-track::-webkit-scrollbar {
    display: none;
}

/* Fondu de fin de liste : indique qu'il reste des cartes à droite. */
.ac-row-fade {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 2;
    width: var(--ac-cat-gutter);
    pointer-events: none;
    background: linear-gradient(270deg, var(--ac-bg) 34%, rgba(16, 14, 13, 0) 100%);
}



/* --- Flèches de défilement des rangées -------------------------------------
   Absentes du design, qui compte sur le défilement natif. À la souris, la
   plupart des cours devenaient inatteignables : on ajoute des flèches, visibles
   au survol ou au focus seulement, pour ne pas alourdir le rendu.
   -------------------------------------------------------------------------- */

/* Le conteneur n'enveloppe QUE la piste : les flèches se centrent ainsi sur les
   cartes, sans remonter sur l'en-tête ni recouvrir le lien « Tout voir ». */
.ac-row-scroller {
    position: relative;
}

/* `opacity: 0` crée un contexte d'empilement : le z-index des boutons y est
   résolu en interne et ne pèse plus face aux cartes (z-index 1, et 20 au
   survol). C'est donc au CONTENEUR de porter le z-index. */
.ac-row-nav {
    position: absolute;
    inset: 0;
    z-index: 30;
    pointer-events: none;
    display: none;
    opacity: 0;
    transition: opacity var(--ac-ease);
}

.ac-row.is-scrollable .ac-row-nav {
    display: block;
}

.ac-row:hover .ac-row-nav,
.ac-row:focus-within .ac-row-nav {
    opacity: 1;
}

.ac-row-nav button {
    position: absolute;
    top: var(--ac-arrow-top, 50%);
    transform: translateY(-50%);
    pointer-events: auto;
    width: 34px;
    height: 34px;
    border-radius: var(--ac-radius);
    background: rgba(10, 9, 8, .72);
    border: 1px solid var(--ac-line);
    color: var(--ac-text);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.ac-row-nav button:hover:not(:disabled) {
    background: var(--ac-accent);
    border-color: var(--ac-accent);
    color: var(--ac-on-accent);
}

.ac-row-nav button:disabled {
    opacity: .3;
    cursor: default;
}

/* Dans la gouttière, de part et d'autre des cartes. */
.ac-row-prev {
    left: 16px;
}

.ac-row-next {
    right: 16px;
}

/* Le fondu n'a plus de raison d'être une fois la rangée au bout. */
.ac-row.is-end .ac-row-fade {
    opacity: 0;
    transition: opacity var(--ac-ease);
}

/* --- Rangée des formateurs -------------------------------------------------- */

.ac-teacher {
    flex: 0 0 var(--ac-face, 168px);
    scroll-snap-align: start;
    display: block;
    color: var(--ac-text);
    transition:
        transform .55s cubic-bezier(.16, .84, .3, 1),
        filter .55s cubic-bezier(.16, .84, .3, 1);
}

.ac-teacher:hover,
.ac-teacher:focus-visible {
    transform: translateY(-6px);
    filter: brightness(1.1);
}

/* Carré à coins arrondis de 4 px — valeur du design, pas un cercle. */
.ac-teacher-photo {
    display: block;
    aspect-ratio: 1 / 1;
    border-radius: var(--ac-radius);
    overflow: hidden;
    background: var(--ac-surface-2);
    border: 1px solid var(--ac-line);
}

.ac-teacher:hover .ac-teacher-photo {
    border-color: var(--ac-accent-edge);
}

.ac-teacher-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ac-teacher-name {
    display: block;
    margin-top: 12px;
    font-family: var(--ac-font-display);
    font-weight: 700;
    font-size: 15px;
    line-height: 1.25;
    text-wrap: balance;
}

.ac-teacher-count {
    display: block;
    margin-top: 3px;
    color: var(--ac-text-dim);
    font-size: 12.5px;
}

/* La rangée des formateurs respire davantage que celle des cours. */
.ac-row-teachers .ac-row-track {
    gap: 26px;
}

.ac-row-teachers {
    padding-top: 38px;
}

/* --- CTA de bas de catalogue ----------------------------------------------- */

.ac-cta {
    margin: 56px var(--ac-cat-gutter) 0;
    padding: 44px 40px 40px;
    border: 1px solid var(--ac-line);
    border-radius: var(--ac-radius-lg);
    background:
        radial-gradient(90% 140% at 50% 0%, var(--ac-accent-wash) 0%, rgba(23, 20, 18, 0) 62%),
        var(--ac-surface);
    text-align: center;
}

.ac-cta-title {
    margin: 0;
    color: var(--ac-text);
    font-family: var(--ac-font-display);
    font-weight: 800;
    font-size: 28px;
    letter-spacing: -.02em;
}

.ac-cta-desc {
    max-width: 60ch;
    margin: 12px auto 0;
    color: var(--ac-text-soft);
    font-size: 16px;
    line-height: 1.55;
    text-wrap: pretty;
}

.ac-cta-actions {
    margin: 24px 0 0;
}

.ac-cta-note {
    margin: 14px 0 0;
    color: var(--ac-text-dim);
    font-size: 13px;
}

/* --- Modale d'aperçu -------------------------------------------------------- */

.ac-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background: rgba(8, 7, 6, .78);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.ac-modal[hidden] {
    display: none;
}

body.ac-modal-on {
    overflow: hidden;
}

.ac-modal-box {
    position: relative;
    width: 100%;
    max-width: 880px;
    max-height: 88vh;
    overflow-y: auto;
    border-radius: 8px;
    background: #16130F;
    border: 1px solid var(--ac-line);
    box-shadow: 0 40px 100px rgba(0, 0, 0, .6);
}

.ac-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    width: 34px;
    height: 34px;
    border-radius: var(--ac-radius);
    background: rgba(10, 9, 8, .72);
    border: 1px solid var(--ac-line-2);
    color: var(--ac-text);
    font-size: 15px;
    cursor: pointer;
}

.ac-modal-close:hover {
    background: var(--ac-accent);
    border-color: var(--ac-accent);
    color: var(--ac-on-accent);
}

/* Bandeau à deux colonnes : visuel à gauche, titre à droite. Elles se
   replient l'une sous l'autre en dessous de ~600 px grâce au flex-wrap. */
.ac-modal-head {
    position: relative;
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--ac-line-soft);
}

.ac-modal-image {
    display: block;
    flex: 1 1 340px;
    min-width: 260px;
    aspect-ratio: 16 / 9;
    background: #100E0C center / cover no-repeat;
}

.ac-modal-intro {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    flex: 1 1 300px;
    min-width: 260px;
    padding: 26px 64px 26px 32px;
}

.ac-modal-body {
    padding: 26px 38px 34px;
}

.ac-modal-tags {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0;
}

.ac-modal-cat,
.ac-modal-incl {
    padding: 4px 10px;
    border-radius: var(--ac-radius);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .05em;
    white-space: nowrap;
}

/* C'est la CATÉGORIE qui porte l'accent, pas la mention du Pass. */
.ac-modal-cat {
    background: var(--ac-accent-wash);
    border: 1px solid var(--ac-accent-edge);
    color: var(--ac-accent-soft);
    text-transform: uppercase;
}

.ac-modal-incl {
    background: rgba(245, 235, 228, .08);
    border: 1px solid var(--ac-line-2);
    color: var(--ac-text-2);
}

.ac-modal-title {
    margin: 0;
    color: var(--ac-text);
    font-family: var(--ac-font-display);
    font-weight: 900;
    font-size: 30px;
    line-height: 1.06;
    letter-spacing: -.025em;
    text-wrap: balance;
}

.ac-modal-meta {
    margin: 0;
    color: var(--ac-text-dim);
    font-size: 14px;
}

.ac-modal-desc {
    margin: 0 0 26px;
    color: var(--ac-text-2);
    font-size: 16.5px;
    line-height: 1.65;
    text-wrap: pretty;
}

.ac-modal-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 0 26px;
}

/* Bouton secondaire : contour seul, à côté du bouton rouge. */
.ac-btn-ghost {
    padding: 14px 24px;
    background: transparent;
    border: 1px solid var(--ac-line-2);
    border-radius: var(--ac-radius);
    color: var(--ac-text);
    font-family: var(--ac-font-body);
    font-weight: 600;
    font-size: 15px;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--ac-ease), border-color var(--ac-ease), color var(--ac-ease);
}

.ac-btn-ghost:hover {
    border-color: var(--ac-accent-edge);
    background: var(--ac-accent-wash);
    color: var(--ac-text);
}

/* --- « Chapitres du cours » dans la modale --------------------------------
   Valeurs relevées telles quelles dans l'artboard, sans ajout :
     ligne     fond rgba(245,235,228,.02), rayon 5px, padding 10px 12px, gap 14px
     pastille  24x24, rayon 12px, Archivo 700 11.5px, color #6F6660,
               SANS fond ni bordure
     titre     flex 1, 14.5px, color #C9BEB7
     3e col    {{ ch.time }} — monospace 11.5px, color #7C726C

   Le design ne prévoit AUCUN état de progression sur les chapitres.
   -------------------------------------------------------------------------- */

.ac-modal-toc {
    margin-top: 28px;
}

.ac-modal-toc[hidden] {
    display: none;
}

.ac-modal-toc-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

.ac-modal-toc-title {
    color: var(--ac-text-faint);
    font-size: 11.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.ac-modal-toc-count {
    color: var(--ac-text-faint);
    font-size: 13px;
    white-space: nowrap;
}

.ac-modal-chap {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 2px;
    padding: 10px 12px;
    border-radius: 5px;
    border: 1px solid transparent;
    background: rgba(245, 235, 228, .02);
}

.ac-modal-chap-num {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 12px;
    color: #6F6660;
    font-family: var(--ac-font-display);
    font-weight: 700;
    font-size: 11.5px;
}

.ac-modal-chap-title {
    flex: 1;
    min-width: 0;
    color: var(--ac-text-2);
    font-size: 14.5px;
    text-wrap: pretty;
}

.ac-modal-chap-time {
    flex-shrink: 0;
    color: var(--ac-text-faint);
    font-family: ui-monospace, monospace;
    font-size: 11.5px;
    white-space: nowrap;
}

.ac-modal-lock {
    padding: 26px;
    border: 1px solid #3A2A26;
    border-radius: var(--ac-radius-lg);
    background: linear-gradient(120deg, #1D1512, #191512);
}

.ac-modal-lock[hidden] {
    display: none;
}

.ac-modal-lock-badge {
    display: inline-block;
    margin: 0;
    padding: 4px 9px;
    border-radius: 3px;
    background: rgba(10, 9, 8, .5);
    border: 1px solid var(--ac-accent-edge);
    color: var(--ac-accent-soft);
    font-family: var(--ac-font-display);
    font-weight: 800;
    font-size: 10.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.ac-modal-lock-title {
    margin: 10px 0 0;
    color: var(--ac-text);
    font-family: var(--ac-font-display);
    font-weight: 800;
    font-size: 18px;
}

.ac-modal-lock-pitch {
    max-width: 620px;
    margin: 8px 0 20px;
    color: var(--ac-text-soft);
    font-size: 15px;
    line-height: 1.6;
}

.ac-modal-lock-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin: 0;
}

.ac-modal-lock-link {
    color: var(--ac-text-2);
    font-size: 14px;
}

.ac-modal-lock-link:hover {
    color: var(--ac-accent-soft);
}

/* --- Grille (page d'une collection) --------------------------------------- */

.ac-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 26px 18px;
    padding: 0 var(--ac-gutter);
}

/* --- Carte de cours ------------------------------------------------------- */

.ac-card {
    position: relative;
    z-index: 1;
    display: block;
    min-width: 0;
    color: var(--ac-text);
    transition:
        transform .55s cubic-bezier(.16, .84, .3, 1),
        filter .55s cubic-bezier(.16, .84, .3, 1);
}

/* Survol : la carte se soulève et s'agrandit, comme dans le design. */
.ac-card:hover,
.ac-card:focus-visible {
    z-index: 20;
    transform: translateY(-8px) scale(1.03);
    filter: brightness(1.12);
}

.ac-row-track > .ac-card {
    flex: 0 0 var(--ac-card-w);
    scroll-snap-align: start;
}

.ac-card-thumb {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    border-radius: 6px;
    overflow: hidden;
    background: var(--ac-surface-2);
    border: 1px solid var(--ac-line);
}

.ac-card-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ac-card:hover .ac-card-thumb {
    border-color: var(--ac-accent-edge);
}

.ac-card-flag {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 4px 9px;
    border-radius: 3px;
    background: var(--ac-accent);
    color: var(--ac-on-accent);
    font-family: var(--ac-font-display);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.ac-hero-flags .ac-card-flag {
    position: static;
}

.ac-card-free {
    position: absolute;
    bottom: 8px;
    right: 8px;
    padding: 4px 9px;
    border-radius: 3px;
    background: #1E7A4B;
    color: #EAF7F0;
    font-family: var(--ac-font-display);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .04em;
}

.ac-card-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: rgba(10, 9, 8, .65);
}

.ac-card-progress > span {
    display: block;
    height: 100%;
    background: var(--ac-accent);
}

.ac-card-title {
    display: block;
    margin-top: 10px;
    font-family: var(--ac-font-display);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    text-wrap: pretty;
}

.ac-card-meta {
    display: block;
    margin-top: 5px;
    color: var(--ac-text-dim);
    font-size: 12.5px;
}

.ac-card:hover .ac-card-meta {
    color: var(--ac-text-dim);
}

/* --- En-tête d'une collection --------------------------------------------- */

.ac-coll-head {
    padding: 46px var(--ac-gutter) 26px;
}

.ac-coll-back a {
    color: var(--ac-text-dim);
    font-size: 13.5px;
}

.ac-coll-back a:hover {
    color: var(--ac-text);
}

.ac-coll-title {
    margin: 10px 0 0;
    color: var(--ac-text);
    font-family: var(--ac-font-display);
    font-size: clamp(1.8rem, 3.4vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -.02em;
}

.ac-coll-desc {
    max-width: 62ch;
    margin: 12px 0 0;
    color: var(--ac-text-2);
    font-family: var(--ac-font-serif);
    font-size: 1.02rem;
    line-height: 1.5;
}

.ac-coll-count {
    margin: 12px 0 0;
    color: var(--ac-text-dim);
    font-size: 13.5px;
}

.ac-cat-empty {
    padding: 60px var(--ac-gutter);
    color: var(--ac-text-dim);
}

/* --- Priorité sur la couleur de lien du contenu ----------------------------
   `body.academie #theme-main a` porte un ID : sans ce rappel, elle l'emporte
   sur les classes .ac-* et repeint en orange les titres de cartes comme le
   texte du bouton du héros — orange sur orange.
   -------------------------------------------------------------------------- */

.academie #theme-main .ac-card {
    color: var(--ac-text);
}

.academie #theme-main .ac-card:hover {
    color: var(--ac-accent-soft);
}

.academie #theme-main .ac-btn,
.academie #theme-main .ac-btn:hover {
    color: var(--ac-on-accent);
}

.academie #theme-main .ac-row-all {
    color: var(--ac-text-2);
}

.academie #theme-main .ac-row-all:hover {
    color: var(--ac-accent-soft);
}

.academie #theme-main .ac-coll-back a {
    color: var(--ac-text-dim);
}

.academie #theme-main .ac-coll-back a:hover {
    color: var(--ac-text);
}

/* --------------------------------------------------------------------------
   Points de rupture
   -------------------------------------------------------------------------- */

/* La recherche du header disparaît la première : seuil du design. */
@media (max-width: 1180px) {
    .ac-search {
        display: none;
    }

    .ac-user-name {
        display: none;
    }
}

/* Bascule mobile : nav et zone compte remplacées par le panneau plein écran. */
@media (max-width: 991.98px) {
    /* Une seule gouttière pour toute l'Académie : coque, conteneurs Bootstrap
       et gabarits du catalogue la lisent tous. */
    body.academie {
        --ac-gutter: 20px;
    }

    .ac-returnbar {
        padding: 0 var(--ac-gutter);
    }

    .ac-header {
        gap: 16px;
        padding: 12px var(--ac-gutter);
    }

    .ac-nav {
        display: none;
    }

    .ac-account {
        gap: 10px;
    }

    /* Seul l'avatar reste ; les boutons passent dans le panneau. */
    .ac-account .ac-btn,
    .ac-account .ac-link {
        display: none;
    }

    .ac-burger {
        display: flex;
        order: 3;
    }

    .ac-footer {
        padding: 32px var(--ac-gutter) 28px;
    }

    /* Catalogue : gouttière resserrée, héros plus court, carte masquée —
       elle occuperait la moitié de l'écran et écraserait le texte. */
    body.academie {
        --ac-cat-gutter: 20px;
        --ac-hero-h: 420px;
        --ac-card-w: 250px;
    }

    .ac-hero-text {
        width: 100%;
        padding-top: 28px;
        padding-bottom: 56px;
    }

    .ac-hero-title {
        font-size: clamp(2rem, 9vw, 3rem);
    }

    .ac-hero-card,
    .ac-hero-glow {
        display: none;
    }

    .ac-hero-arrows {
        right: var(--ac-cat-gutter);
    }

    .ac-row-fade {
        width: 28px;
    }
}

@media (max-width: 575.98px) {
    .ac-foot-partner {
        text-align: left;
    }

    .ac-foot-partner img {
        margin-left: 0;
    }
}

/* Respect des préférences système. */
@media (prefers-reduced-motion: reduce) {
    .academie .ac-header a,
    .academie .ac-header button,
    .academie .ac-header input,
    .academie .ac-header summary,
    .academie .ac-footer a,
    .ac-burger-bars i {
        transition: none;
    }
}

/* Bouton « Ma liste » une fois le cours ajouté. */
.ac-btn-ghost.is-listed {
    border-color: var(--ac-accent-edge);
    background: var(--ac-accent-wash);
    color: var(--ac-accent-soft);
}

.ac-btn-ghost:disabled {
    opacity: .55;
    cursor: default;
}
/* --- États de progression des chapitres -----------------------------------
   Le design ne définit d'états que dans le bloc « Série » (seriesCourses de
   l'artboard), sur les cours. Les valeurs ci-dessous en sont reprises telles
   quelles — seul le support change, du cours vers le chapitre :
     terminé  pastille ✓ #7C726C, titre #8A807A
     en cours pastille ▶ sur fond accent, titre #F5EBE4 700,
              ligne rgba(255,79,69,.08) + bordure accent-edge
     libellé  12px, couleur accent-soft
   -------------------------------------------------------------------------- */

.ac-modal-chap.is-done .ac-modal-chap-num {
    color: #7C726C;
}

.ac-modal-chap.is-done .ac-modal-chap-title {
    color: #8A807A;
}

.ac-modal-chap.is-current {
    background: rgba(255, 79, 69, .08);
    border-color: var(--ac-accent-edge);
}

.ac-modal-chap.is-current .ac-modal-chap-num {
    background: var(--ac-accent);
    color: #F6E9E0;
}

.ac-modal-chap.is-current .ac-modal-chap-title {
    color: #F5EBE4;
    font-weight: 700;
}

.ac-modal-chap-state {
    flex-shrink: 0;
    color: var(--ac-accent-soft);
    font-size: 12px;
    white-space: nowrap;
}

/* ==========================================================================
   Vue lecteur (single-cours.php) — bloc « isPlayer » de l'artboard
   --------------------------------------------------------------------------
   Valeurs relevées telles quelles dans « TPSG Académie.dc.html », lignes
   473-570 pour la structure, 1821-1843 pour les états des lignes de série.
   Aucune valeur n'est inventée ; ce qui manque en données est omis, pas comblé.
   ========================================================================== */

.ac-player {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 34px;
    align-items: start;
    padding: 28px 72px 0;
}

.ac-player-main {
    min-width: 0;
}

/* --- Barre du haut -------------------------------------------------------- */

.ac-player-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 0 0 16px;
}

.ac-player-back {
    color: var(--ac-text-soft, #9A8F88);
    font-size: 13.5px;
    text-decoration: none;
}

.ac-player-back:hover {
    color: var(--ac-text);
}

.ac-player-mark {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: var(--ac-radius);
    background: var(--ac-accent-wash);
    border: 1px solid var(--ac-accent-edge);
    color: var(--ac-accent-soft);
    font-family: var(--ac-font-display);
    font-weight: 700;
    font-size: 12.5px;
    white-space: nowrap;
    cursor: pointer;
}

.ac-player-mark:hover {
    color: var(--ac-text);
}

/* Leçon déjà validée : le bouton devient un état, plus un appel à l'action. */
.ac-player-mark.is-done {
    background: rgba(245, 235, 228, .08);
    border-color: var(--ac-line-2);
    color: var(--ac-text-2);
}

/* --- Lecteur -------------------------------------------------------------- */

.ac-player-stage {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--ac-radius-lg);
    overflow: hidden;
    background: var(--ac-bg-deep);
    border: 1px solid var(--ac-line);
}

.ac-player-panel {
    display: none;
    width: 100%;
    height: 100%;
}

.ac-player-panel.is-active {
    display: block;
}

/* Le média est rendu par tpsg_render_lesson_media() : iframe Vimeo dans un
   .ratio Bootstrap, ou encart verrouillé. On le fait remplir la scène. */
.ac-player-panel > .ratio,
.ac-player-panel iframe,
.ac-player-panel video {
    width: 100%;
    height: 100%;
}

.ac-player-panel > .ratio::before {
    display: none;
}

.ac-player-empty {
    margin: 0;
    padding: 40px 20px;
    color: var(--ac-text-dim);
    text-align: center;
}

.ac-player-title {
    margin: 22px 0 10px;
    color: var(--ac-text);
    font-family: var(--ac-font-display);
    font-weight: 800;
    font-size: 32px;
    line-height: 1.08;
    letter-spacing: -.02em;
}

.ac-player-meta {
    margin: 0;
    color: var(--ac-text-dim);
    font-size: 13.5px;
}

.ac-player-now {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin: 14px 0 0;
}

.ac-player-now-label {
    color: var(--ac-text-faint);
    font-size: 11.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.ac-player-now-title {
    color: var(--ac-text-2);
    font-size: 15px;
}

.ac-player-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 26px 0 0;
}

.ac-player-actions .ac-btn-ghost {
    padding: 12px 22px;
    font-size: 14px;
    text-decoration: none;
}

/* --- Carte « Cours suivant » ---------------------------------------------- */

.ac-player-next {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin: 30px 0 0;
    padding: 16px;
    border-radius: var(--ac-radius-lg);
    background: #232020;
    border: 1px solid #3C3836;
}

.ac-player-next-thumb {
    flex-shrink: 0;
    width: 176px;
    aspect-ratio: 16 / 9;
    border-radius: var(--ac-radius);
    background: #1E1B16 center / cover no-repeat;
}

.ac-player-next-body {
    flex: 1 1 220px;
    min-width: 0;
}

.ac-player-next-kicker {
    margin: 0;
    color: var(--ac-text-faint);
    font-size: 11.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.ac-player-next-title {
    margin: 6px 0 0;
    color: var(--ac-text);
    font-family: var(--ac-font-display);
    font-weight: 800;
    font-size: 20px;
    line-height: 1.15;
    letter-spacing: -.02em;
    text-wrap: pretty;
}

.ac-player-next-meta {
    margin: 5px 0 0;
    color: var(--ac-text-dim);
    font-size: 13px;
}

.ac-player-next-cta {
    flex-shrink: 0;
    white-space: nowrap;
}

/* --- Colonne de droite ---------------------------------------------------- */

.ac-player-side {
    position: sticky;
    top: 92px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.ac-player-card {
    padding: 20px;
    border-radius: var(--ac-radius-lg);
    background: var(--ac-surface);
    border: 1px solid var(--ac-line);
}

.ac-player-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.ac-player-card-title {
    min-width: 0;
    color: var(--ac-text);
    font-family: var(--ac-font-display);
    font-weight: 700;
    font-size: 14px;
}

.ac-player-pct {
    flex-shrink: 0;
    color: var(--ac-accent-hi);
    font-family: var(--ac-font-display);
    font-weight: 800;
    font-size: 14px;
}

.ac-player-bar {
    height: 6px;
    border-radius: 4px;
    background: var(--ac-line);
    overflow: hidden;
}

.ac-player-bar > span {
    display: block;
    height: 100%;
    border-radius: 4px;
    background: var(--ac-accent);
}

.ac-player-card-foot {
    margin: 14px 0 0;
    color: var(--ac-text-dim);
    font-size: 12.5px;
}

.ac-player-card-sep {
    padding: 0 6px;
}

/* --- Carte de la série ---------------------------------------------------- */

.ac-player-serie {
    padding: 8px;
}

.ac-player-serie-head {
    padding: 12px 12px 8px;
    margin-bottom: 0;
}

.ac-player-serie-pos {
    flex-shrink: 0;
    color: var(--ac-accent-soft);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.ac-serie-row {
    border-radius: var(--ac-radius);
}

.ac-serie-row.is-current {
    background: rgba(255, 79, 69, .08);
}

.ac-serie-line {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--ac-radius);
    text-decoration: none;
    transition: background-color .4s cubic-bezier(.16, .84, .3, 1);
}

.ac-serie-line:hover {
    background: #1E1A18;
}

.ac-serie-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 12px;
    border: 1px solid var(--ac-line-2);
    color: #554C47;
    font-size: 11px;
}

.ac-serie-title {
    flex: 1;
    min-width: 0;
    color: var(--ac-text-2);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ac-serie-duration {
    flex-shrink: 0;
    color: var(--ac-text-faint);
    font-size: 12px;
    white-space: nowrap;
}

.ac-serie-row.is-done .ac-serie-mark {
    color: #7C726C;
}

.ac-serie-row.is-done .ac-serie-title {
    color: #8A807A;
}

.ac-serie-row.is-current .ac-serie-mark {
    background: var(--ac-accent);
    color: #F6E9E0;
}

.ac-serie-row.is-current .ac-serie-title {
    color: var(--ac-text);
}

/* --- Leçons du cours courant ---------------------------------------------- */

.ac-serie-chapters {
    display: grid;
    gap: 2px;
    padding: 0 10px 10px 38px;
}

/* Cours hors série : pas de ligne parente au-dessus, donc pas de retrait. */
.ac-serie-chapters-solo {
    padding: 0 4px 4px;
}

.ac-serie-chap-label {
    margin: 10px 0 2px;
    color: var(--ac-text-faint);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ac-serie-lesson {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 8px;
    border: 0;
    border-radius: var(--ac-radius);
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.ac-serie-lesson:hover {
    background: #1E1A18;
}

.ac-serie-lesson-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 9px;
    color: #6F6660;
    font-family: var(--ac-font-display);
    font-weight: 700;
    font-size: 9.5px;
}

.ac-serie-lesson-title {
    flex: 1;
    min-width: 0;
    color: var(--ac-text-2);
    font-size: 13px;
    font-weight: 400;
    text-wrap: pretty;
}

.ac-serie-lesson-time,
.ac-serie-lock {
    flex-shrink: 0;
    color: #6F6660;
    font-family: ui-monospace, monospace;
    font-size: 11px;
    white-space: nowrap;
}

.ac-serie-lesson.is-done .ac-serie-lesson-mark {
    color: var(--ac-accent-hi);
}

.ac-serie-lesson.is-done .ac-serie-lesson-title {
    color: #8A807A;
}

.ac-serie-lesson.is-current .ac-serie-lesson-mark {
    background: var(--ac-accent);
    color: #F6E9E0;
}

.ac-serie-lesson.is-current .ac-serie-lesson-title {
    color: var(--ac-text);
    font-weight: 600;
}

/* --- Repli ---------------------------------------------------------------- */

@media (max-width: 1100px) {
    .ac-player {
        grid-template-columns: minmax(0, 1fr);
        padding: 24px 20px 0;
    }

    .ac-player-side {
        position: static;
    }

    .ac-player-title {
        font-size: 26px;
    }
}

/* --- Accordéon des leçons dans la colonne « série » -----------------------
   Bouton de repli relevé dans l'artboard (l.toggleChap) : 24x24, bordure
   #3A3330, rayon 4px, glyphe ▴ ouvert / ▾ fermé. Un seul cours ouvert à la
   fois, comme openChap côté design.
   -------------------------------------------------------------------------- */

.ac-serie-link {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
    text-decoration: none;
}

.ac-serie-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border: 1px solid var(--ac-line-2);
    border-radius: var(--ac-radius);
    background: transparent;
    color: var(--ac-text-2);
    font-size: 10px;
    line-height: 1;
    cursor: pointer;
}

.ac-serie-toggle:hover {
    background: rgba(245, 235, 228, .08);
    color: var(--ac-text);
}

/* Avancement dans le cours ouvert : barre fine au-dessus de ses leçons. */
.ac-serie-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 2px 2px 8px;
}

.ac-serie-progress-bar {
    flex: 1;
    height: 3px;
    border-radius: 2px;
    background: #2A2523;
    overflow: hidden;
}

.ac-serie-progress-bar > span {
    display: block;
    height: 100%;
    border-radius: 2px;
    background: var(--ac-accent);
}

.ac-serie-progress-label {
    flex-shrink: 0;
    color: var(--ac-text-faint);
    font-size: 11px;
    white-space: nowrap;
}

/* Les leçons d'un autre cours sont des liens, pas des boutons de lecture. */
a.ac-serie-lesson {
    text-decoration: none;
}

.ac-serie-chapters[hidden] {
    display: none;
}

/* --- Liens de la vue lecteur ---------------------------------------------
   `body.academie #theme-main a` (ligne 120) repeint tous les liens en
   --ac-accent-hi et l'emporte sur les classes .ac-*. Il faut donc réaffirmer
   les couleurs de l'artboard à spécificité égale, comme le fait déjà
   .ac-coll-back plus haut. Valeurs relevées dans le bloc isPlayer :
     retour au catalogue  #9A8F88
     bouton fantôme       #F5EBE4
   -------------------------------------------------------------------------- */

body.academie #theme-main .ac-player-back {
    color: #9A8F88;
}

body.academie #theme-main .ac-player-back:hover {
    color: var(--ac-text);
}

body.academie #theme-main .ac-player-actions .ac-btn-ghost {
    color: var(--ac-text);
}

/* Les lignes de la colonne « série » colorent leurs propres éléments : le lien
   ne doit rien imposer, sinon il repeint les pastilles et les titres. */
body.academie #theme-main .ac-serie-link,
body.academie #theme-main a.ac-serie-lesson {
    color: inherit;
}

/* --- Leçon verrouillée dans la scène vidéo --------------------------------
   Remplace l'encart Bootstrap `bg-light`, qui posait un rectangle blanc au
   milieu du lecteur. Repris du bloc verrouillé de la modale, seul état
   « réservé aux membres » que l'artboard définisse.
   -------------------------------------------------------------------------- */

.ac-lesson-locked {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 100%;
    height: 100%;
    padding: 26px;
    text-align: center;
    background: linear-gradient(120deg, #1D1512, #191512);
}

.ac-lesson-locked-icon {
    font-size: 30px;
    line-height: 1;
}

.ac-lesson-locked-text {
    margin: 0;
    max-width: 420px;
    color: var(--ac-text-2);
    font-size: 15px;
    line-height: 1.6;
    text-wrap: pretty;
}

body.academie #theme-main .ac-lesson-locked .ac-btn-ghost {
    color: var(--ac-text);
    text-decoration: none;
}

/* ==========================================================================
   Page « Pass » — tunnel de souscription (artboard « Plans.dc.html »)
   --------------------------------------------------------------------------
   Valeurs relevées telles quelles, lignes 58-118 pour l'étape 1, 260-300 pour
   le récapitulatif et la barre de confiance.

   Le vert « Mission Afrique » n'existe nulle part ailleurs dans l'Académie :
   ses tokens sont déclarés ici, à côté du seul bloc qui les utilise, plutôt
   que dans la palette générale qu'ils pollueraient.
   ========================================================================== */

body.academie {
    --ac-mission: #41B96C;
    --ac-mission-soft: #93DFAC;
    --ac-mission-bullet: #5CCE87;
    --ac-mission-edge: rgba(65, 185, 108, .34);
    --ac-mission-wash: rgba(65, 185, 108, .16);
    --ac-mission-track: #23302A;
    --ac-mission-hover: #2F6B45;
}

/* --- Fil des étapes ------------------------------------------------------- */

.ac-pass-steps {
    display: flex;
    align-items: stretch;
    gap: 10px;
    flex-wrap: wrap;
    padding: 20px 40px 0;
    border-bottom: 1px solid #302C2A;
    font-family: var(--ac-font-display);
}

.ac-pass-step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 0 30px 18px 0;
    background: none;
    border: 0;
    text-align: left;
    cursor: default;
}

.ac-pass-step.is-done {
    cursor: pointer;
}

.ac-pass-step-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 3px;
    border: 1px solid #3C3836;
    color: var(--ac-text-faint);
    font-weight: 800;
    font-size: 13px;
}

.ac-pass-step.is-active .ac-pass-step-mark {
    background: var(--ac-accent-wash);
    border-color: var(--ac-accent-edge);
    color: var(--ac-accent-soft);
}

.ac-pass-step.is-done .ac-pass-step-mark {
    background: var(--ac-accent);
    border-color: var(--ac-accent);
    color: var(--ac-on-accent);
}

.ac-pass-step-body {
    display: block;
}

.ac-pass-step-label {
    display: block;
    color: var(--ac-text-faint);
    font-size: 14.5px;
    font-weight: 700;
    white-space: nowrap;
}

.ac-pass-step.is-active .ac-pass-step-label {
    color: var(--ac-text);
}

.ac-pass-step.is-done .ac-pass-step-label {
    color: var(--ac-text-2);
}

.ac-pass-step-hint {
    display: block;
    margin-top: 3px;
    color: var(--ac-text-faint);
    font-size: 12.5px;
    white-space: nowrap;
}

/* --- Colonnes ------------------------------------------------------------- */

.ac-pass {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 44px;
    max-width: 1360px;
    padding: 44px 40px 90px;
}

.ac-pass-main {
    flex: 1 1 520px;
    min-width: 0;
}

.ac-pass-panel[hidden] {
    display: none;
}

.ac-pass-title {
    margin: 0 0 10px;
    color: var(--ac-text);
    font-family: var(--ac-font-display);
    font-weight: 900;
    font-size: 38px;
    line-height: 1.05;
    letter-spacing: -.03em;
    text-wrap: balance;
}

.ac-pass-lede {
    margin: 0 0 28px;
    max-width: 620px;
    color: var(--ac-text-2);
    font-size: 18px;
    line-height: 1.6;
    text-wrap: pretty;
}

/* --- Cartes de choix ------------------------------------------------------ */

.ac-pass-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px;
    align-items: stretch;
}

.ac-pass-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 26px;
    border-radius: 8px;
    background: #232020;
    border: 1px solid #3C3836;
    text-align: left;
    cursor: pointer;
}

.ac-pass-card:hover {
    border-color: #4A3E39;
}

/* Le liseré interne du design (inset box-shadow) épaissit la bordure sans
   décaler la carte d'un pixel — d'où box-shadow plutôt qu'une bordure 2px. */
.ac-pass-card.is-picked {
    border-color: var(--ac-accent);
    box-shadow: inset 0 0 0 1px var(--ac-accent);
}

.ac-pass-card-sponsor {
    background: linear-gradient(120deg, #121A14 0%, #141814 70%);
}

.ac-pass-card-sponsor:hover {
    border-color: var(--ac-mission-hover);
}

.ac-pass-card-sponsor.is-picked {
    border-color: var(--ac-mission);
    box-shadow: inset 0 0 0 1px var(--ac-mission);
}

.ac-pass-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ac-pass-dot {
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 3px;
    border: 1px solid #4A423E;
    background: transparent;
}

.ac-pass-card.is-picked .ac-pass-dot {
    border-color: var(--ac-accent);
    background: var(--ac-accent);
}

.ac-pass-card-sponsor.is-picked .ac-pass-dot {
    border-color: var(--ac-mission);
    background: var(--ac-mission);
}

.ac-pass-badge {
    padding: 4px 10px;
    border-radius: 3px;
    background: var(--ac-mission-wash);
    border: 1px solid var(--ac-mission-edge);
    color: var(--ac-mission-soft);
    font-family: var(--ac-font-display);
    font-weight: 800;
    font-size: 10.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.ac-pass-card-title {
    display: block;
    margin-top: 16px;
    color: var(--ac-text);
    font-family: var(--ac-font-display);
    font-weight: 800;
    font-size: 20px;
    line-height: 1.2;
}

.ac-pass-list {
    display: grid;
    gap: 10px;
    margin-top: 14px;
    color: var(--ac-text-2);
    font-size: 15.5px;
    line-height: 1.5;
}

.ac-pass-item {
    display: flex;
    gap: 10px;
    text-wrap: pretty;
}

.ac-pass-bullet {
    color: var(--ac-accent-soft);
}

.ac-pass-card-sponsor .ac-pass-bullet {
    color: var(--ac-mission-bullet);
}

.ac-pass-card-note {
    display: block;
    margin-top: 6px;
    color: var(--ac-text-dim);
    font-size: 14px;
}

.ac-pass-price {
    display: block;
    margin-top: 14px;
    color: var(--ac-text);
    font-family: var(--ac-font-display);
    font-weight: 800;
    font-size: 28px;
    letter-spacing: -.02em;
}

.ac-pass-price-unit {
    color: var(--ac-text-dim);
    font-size: 15px;
    font-weight: 600;
}

/* --- Compteur Mission Afrique --------------------------------------------- */

.ac-pass-goal {
    display: block;
    margin-top: auto;
    padding-top: 20px;
}

.ac-pass-goal-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
    font-family: var(--ac-font-display);
}

.ac-pass-goal-count {
    color: var(--ac-mission-soft);
    font-weight: 800;
    font-size: 13.5px;
}

.ac-pass-goal-target {
    color: #7F8F84;
    font-size: 12.5px;
}

.ac-pass-goal-bar {
    display: block;
    height: 7px;
    border-radius: 3px;
    background: var(--ac-mission-track);
    overflow: hidden;
}

.ac-pass-goal-bar > span {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: var(--ac-mission);
}

/* --- Pied de l'étape ------------------------------------------------------ */

.ac-pass-foot {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin: 22px 0 0;
    color: var(--ac-text-faint);
    font-size: 15px;
}

.ac-pass-foot-warn {
    color: var(--ac-accent-soft);
}

.ac-pass-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 26px 0 0;
}

.ac-pass-actions .ac-pass-go[hidden] {
    display: none;
}

/* --- Récapitulatif -------------------------------------------------------- */

.ac-pass-recap {
    flex: 1 1 300px;
    min-width: 0;
    max-width: 376px;
    position: sticky;
    top: 24px;
    padding: 26px;
    border-radius: 8px;
    background: #232020;
    border: 1px solid #3C3836;
}

.ac-pass-recap-title {
    margin: 0 0 18px;
    color: var(--ac-text);
    font-family: var(--ac-font-display);
    font-weight: 800;
    font-size: 16px;
}

.ac-pass-recap-line {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid #302C2A;
}

.ac-pass-recap-line[hidden] {
    display: none;
}

.ac-pass-recap-sponsor {
    padding: 14px 0;
}

.ac-pass-recap-name {
    display: block;
    color: var(--ac-text);
    font-family: var(--ac-font-display);
    font-weight: 700;
    font-size: 15px;
}

.ac-pass-recap-sponsor .ac-pass-recap-name,
.ac-pass-recap-sponsor .ac-pass-recap-price {
    color: var(--ac-mission-soft);
}

.ac-pass-recap-note {
    display: block;
    margin-top: 4px;
    color: var(--ac-text-dim);
    font-size: 14px;
}

.ac-pass-recap-price {
    color: var(--ac-text);
    font-family: var(--ac-font-display);
    font-weight: 700;
    font-size: 15px;
    white-space: nowrap;
}

.ac-pass-recap-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    padding: 18px 0 6px;
    font-family: var(--ac-font-display);
}

.ac-pass-recap-total-label {
    color: var(--ac-text);
    font-weight: 800;
    font-size: 15px;
}

.ac-pass-recap-total-value {
    color: var(--ac-text);
    font-weight: 800;
    font-size: 20px;
    white-space: nowrap;
}

.ac-pass-recap-renew {
    margin: 0;
    color: var(--ac-text-faint);
    font-size: 13.5px;
    text-wrap: pretty;
}

/* --- Barre de confiance --------------------------------------------------- */

.ac-pass-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    flex-wrap: wrap;
    padding: 22px 40px;
    border-top: 1px solid #302C2A;
    color: var(--ac-text-soft);
    font-size: 16px;
}

.ac-pass-trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ac-pass-trust-item svg {
    flex-shrink: 0;
    color: var(--ac-accent-soft);
}

/* --- Repli ---------------------------------------------------------------- */

@media (max-width: 900px) {
    .ac-pass-steps {
        padding: 20px 20px 0;
    }

    .ac-pass {
        padding: 28px 20px 60px;
        gap: 28px;
    }

    .ac-pass-recap {
        position: static;
        max-width: none;
    }

    .ac-pass-title {
        font-size: 28px;
    }
}

/* ==========================================================================
   Communauté — chat à salons
   --------------------------------------------------------------------------
   Valeurs de l'artboard « Communaute.dc.html », relu en entier. Cet artboard
   a ses propres teintes de trait (#302C2A, #3C3836) et de fond (#141110,
   #17130F, #232020), distinctes de celles du catalogue : elles sont posées en
   variables locales sur .ac-com-page plutôt que d'être écrasées globalement.

   Deux blocs de l'artboard ne sont pas construits — le « Défi en cours » et
   le « Classement du mois » — par décision explicite, pas par oubli.
   ========================================================================== */

.ac-com-page {
    --com-line: #302C2A;
    --com-line-2: #3C3836;
    --com-panel: #141110;
    --com-panel-head: #17130F;
    --com-card: #232020;
    --com-field: #2E2A28;
    --com-strip: #262120;
    --com-hover: #191513;
    --com-quote: #A79A93;
    --com-online: #74B93C;
}

/* Héros -------------------------------------------------------------------- */

.ac-com-hero {
    border-bottom: 1px solid var(--com-line);
}

.ac-com-hero h1 {
    max-width: 1180px;
    margin: 0 auto;
    padding: 54px 40px 40px;
    font-family: var(--ac-font-display);
    font-weight: 900;
    font-size: 46px;
    line-height: 1.04;
    letter-spacing: -.035em;
    color: var(--ac-text);
    text-align: center;
    white-space: nowrap;
}

/* Bandeau des non-membres -------------------------------------------------- */

.ac-com-strip {
    background: var(--com-strip);
    border-bottom: 1px solid var(--com-line);
}

.ac-com-strip {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    padding: 20px 40px;
    font-size: 16px;
    color: #E6D9D1;
}

.ac-com-strip .ac-btn {
    margin-left: auto;
    padding: 11px 20px;
    font-size: 14px;
}

/* Grille ------------------------------------------------------------------- */

.ac-com {
    display: grid;
    grid-template-columns: 244px minmax(0, 1fr) 300px;
    align-items: start;
    gap: 18px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 34px 32px 20px;
}

/* Rail des salons ---------------------------------------------------------- */

.ac-com-rail {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 14px 12px;
    background: var(--com-panel);
    border: 1px solid var(--com-line);
    border-radius: 8px;
}

.ac-com-rail-title {
    padding: 4px 8px 10px;
    font-family: var(--ac-font-display);
    font-weight: 800;
    font-size: 10.5px;
    letter-spacing: .14em;
    color: var(--ac-text-faint);
}

.ac-com-chan {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border-radius: 5px;
    font-family: var(--ac-font-body);
    color: var(--ac-text-muted);
    text-decoration: none;
}

.ac-com-chan:hover {
    background: var(--com-hover);
    color: var(--ac-text);
}

.ac-com-chan.is-active {
    background: #2A2320;
    color: var(--ac-text);
}

.ac-com-chan-tag {
    flex-shrink: 0;
    width: 20px;
    font-family: var(--ac-font-display);
    font-weight: 800;
    font-size: 15px;
    color: #5F5652;
}

.ac-com-chan.is-active .ac-com-chan-tag {
    color: var(--ac-accent-soft);
}

.ac-com-chan-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 15px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ac-com-chan-unread {
    flex-shrink: 0;
    min-width: 20px;
    padding: 2px 6px;
    border-radius: 10px;
    background: var(--ac-accent);
    color: var(--ac-on-accent);
    text-align: center;
    font-family: var(--ac-font-display);
    font-weight: 800;
    font-size: 11px;
}

/* Le fil ------------------------------------------------------------------- */

.ac-com-fil {
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 700px;
    background: var(--com-panel);
    border: 1px solid var(--com-line);
    border-radius: 8px;
    overflow: hidden;
    font-family: var(--ac-font-body);
}

.ac-com-fil-head {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 20px;
    border-bottom: 1px solid var(--com-line);
    background: var(--com-panel-head);
}

.ac-com-fil-name {
    font-family: var(--ac-font-display);
    font-weight: 800;
    font-size: 17px;
    color: var(--ac-text);
    white-space: nowrap;
}

.ac-com-fil-desc {
    min-width: 0;
    font-size: 14px;
    color: var(--ac-text-dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ac-com-fil-people {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    margin-left: auto;
    font-size: 13.5px;
    color: var(--ac-text-dim);
    white-space: nowrap;
}

.ac-com-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--com-online);
}

.ac-com-list {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 16px 12px 20px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.ac-com-empty {
    padding: 24px 10px;
    font-size: 15px;
    color: var(--ac-text-dim);
}

.ac-com-older {
    display: flex;
    justify-content: center;
    padding-bottom: 8px;
}

.ac-com-older-btn {
    padding: 6px 14px;
    background: transparent;
    border: 1px solid var(--com-line-2);
    border-radius: 12px;
    color: var(--ac-text-dim);
    font-family: var(--ac-font-body);
    font-size: 13px;
    cursor: pointer;
}

.ac-com-older-btn:hover {
    border-color: var(--ac-line-2);
    color: var(--ac-text);
}

/* Un message --------------------------------------------------------------- */

.ac-com-msg {
    display: flex;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 6px;
}

.ac-com-msg:hover {
    background: var(--com-hover);
}

.ac-com-msg.is-anchored {
    background: var(--com-hover);
    box-shadow: inset 2px 0 0 var(--ac-accent);
}

.ac-com-av {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
}

.ac-com-av-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #180C0A;
    font-family: var(--ac-font-display);
    font-weight: 800;
    font-size: 13.5px;
    text-transform: uppercase;
}

.ac-com-msg-body {
    flex: 1 1 auto;
    min-width: 0;
}

.ac-com-quote {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 4px;
    padding-left: 2px;
    font-size: 13px;
    color: var(--ac-text-faint);
    overflow: hidden;
}

.ac-com-quote-mark {
    flex-shrink: 0;
    color: #5F5652;
}

.ac-com-quote-author {
    flex-shrink: 0;
    font-family: var(--ac-font-display);
    font-weight: 700;
    color: var(--com-quote);
}

.ac-com-quote-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ac-com-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ac-com-author {
    font-family: var(--ac-font-display);
    font-weight: 700;
    font-size: 15px;
    color: var(--ac-text);
}

.ac-com-msg.is-teacher .ac-com-author {
    color: var(--ac-accent-soft);
}

.ac-com-badge {
    padding: 2px 7px;
    border: 1px solid rgba(255, 79, 69, .32);
    border-radius: 3px;
    background: var(--ac-accent-wash);
    font-family: var(--ac-font-display);
    font-weight: 800;
    font-size: 10px;
    letter-spacing: .08em;
    color: var(--ac-accent-soft);
}

.ac-com-when {
    font-size: 12.5px;
    color: var(--ac-text-faint);
}

.ac-com-tools {
    display: flex;
    gap: 4px;
    margin-left: auto;
    opacity: 0;
}

.ac-com-msg:hover .ac-com-tools,
.ac-com-tools:focus-within {
    opacity: 1;
}

.ac-com-tool {
    padding: 3px 8px;
    background: transparent;
    border: 1px solid var(--com-line-2);
    border-radius: 4px;
    color: var(--ac-text-dim);
    font-family: var(--ac-font-body);
    font-size: 12.5px;
    cursor: pointer;
}

.ac-com-tool:hover {
    border-color: var(--ac-line-2);
    color: var(--ac-text);
}

.ac-com-text {
    margin: 4px 0 0;
    font-size: 15.5px;
    line-height: 1.55;
    color: #DCD1CA;
    white-space: pre-line;
    overflow-wrap: anywhere;
    text-wrap: pretty;
}

.ac-com-attachment:not(:empty) {
    margin-top: 10px;
    max-width: 420px;
}

.ac-com-attachment img {
    max-width: 100%;
    height: auto;
    border: 1px solid var(--com-line);
    border-radius: 6px;
}

.ac-com-reactions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.ac-com-reactions[hidden] {
    display: none;
}

.ac-com-reaction {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border: 1px solid var(--com-line-2);
    border-radius: 12px;
    background: #211C1A;
    color: var(--ac-text-soft);
    font-family: var(--ac-font-body);
    font-size: 13px;
    cursor: pointer;
}

.ac-com-reaction.is-mine {
    background: var(--ac-accent-wash);
    border-color: rgba(255, 79, 69, .42);
    color: var(--ac-accent-soft);
}

.ac-com-reaction[disabled] {
    cursor: default;
}

.ac-com-picker {
    display: flex;
    gap: 4px;
    width: fit-content;
    margin-top: 8px;
    padding: 6px;
    background: var(--com-field);
    border: 1px solid var(--com-line-2);
    border-radius: 8px;
}

.ac-com-picker[hidden] {
    display: none;
}

.ac-com-picker-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: transparent;
    border: 0;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
}

.ac-com-picker-btn:hover {
    background: #2A2422;
}

/* Composeur ---------------------------------------------------------------- */

.ac-com-compose {
    flex-shrink: 0;
    padding: 12px 16px 16px;
    border-top: 1px solid var(--com-line);
    background: var(--com-panel-head);
}

.ac-com-replying {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    padding: 7px 10px;
    background: var(--com-field);
    border: 1px solid var(--com-line-2);
    border-radius: 6px;
    font-size: 13.5px;
    color: var(--ac-text-muted);
}

.ac-com-replying[hidden] {
    display: none;
}

.ac-com-replying > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ac-com-replying strong {
    color: #E6D9D1;
}

.ac-com-replying-x {
    flex-shrink: 0;
    margin-left: auto;
    background: transparent;
    border: 0;
    color: var(--ac-text-dim);
    font-size: 14px;
    cursor: pointer;
}

.ac-com-replying-x:hover {
    color: var(--ac-text);
}

.ac-com-form {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 8px 8px 14px;
    background: var(--com-field);
    border: 1px solid var(--com-line-2);
    border-radius: 8px;
}

.ac-com-form input {
    flex: 1 1 auto;
    min-width: 0;
    background: transparent;
    border: 0;
    outline: none;
    color: var(--ac-text);
    font-family: var(--ac-font-body);
    font-size: 15px;
}

.ac-com-form .ac-btn {
    padding: 9px 18px;
    border: 0;
    border-radius: 5px;
    cursor: pointer;
}

.ac-com-form-error {
    margin: 8px 0 0;
    font-size: 13.5px;
    color: var(--ac-accent-soft);
}

.ac-com-locked {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 12px 14px;
    background: var(--com-field);
    border: 1px solid var(--com-line-2);
    border-radius: 8px;
    font-size: 14.5px;
    color: var(--ac-text-muted);
}

.ac-com-locked .ac-btn {
    margin-left: auto;
    border-radius: 5px;
}

/* Colonne de droite -------------------------------------------------------- */

.ac-com-side {
    display: grid;
    gap: 26px;
    min-width: 0;
    position: sticky;
    top: 82px;
}

.ac-com-card {
    padding: 22px;
    background: var(--com-card);
    border: 1px solid var(--com-line);
    border-radius: 5px;
    font-family: var(--ac-font-body);
}

.ac-com-card-title {
    margin: 0 0 16px;
    font-family: var(--ac-font-display);
    font-weight: 800;
    font-size: 16px;
    letter-spacing: -.01em;
    color: var(--ac-text);
}

.ac-com-rdv {
    display: grid;
    gap: 16px;
}

.ac-com-rdv-item {
    display: grid;
    gap: 7px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--com-line);
}

.ac-com-rdv-item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.ac-com-rdv-date {
    font-family: var(--ac-font-display);
    font-weight: 800;
    font-size: 12.5px;
    letter-spacing: .04em;
    color: var(--ac-accent-soft);
}

.ac-com-rdv-title {
    font-family: var(--ac-font-display);
    font-weight: 700;
    font-size: 15.5px;
    line-height: 1.3;
    color: var(--ac-text);
    text-wrap: pretty;
}

.ac-com-rdv-who {
    font-size: 14px;
    color: var(--ac-text-dim);
}

.ac-com-rdv-foot {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 3px;
    flex-wrap: wrap;
}

.ac-com-rdv-foot a,
.ac-com-rdv-cta {
    font-family: var(--ac-font-display);
    font-weight: 700;
    font-size: 13.5px;
    color: var(--ac-accent-soft);
}

.ac-com-rdv-note {
    font-size: 13px;
    color: var(--ac-text-dim);
}

.ac-com-rules {
    background: #16110F;
    border-color: #3A2420;
}

.ac-com-rules .ac-com-card-title {
    margin-bottom: 10px;
}

.ac-com-rules ol {
    display: grid;
    gap: 8px;
    margin: 0;
    padding-left: 20px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--ac-text-soft);
}

/* Bloc de conversion des non-membres --------------------------------------- */

.ac-com-join {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    flex-wrap: wrap;
    max-width: 1180px;
    margin: 20px auto 0;
    padding: 34px;
    background: var(--com-card);
    border: 1px solid var(--com-line);
    border-radius: 6px;
}

.ac-com-join > div {
    min-width: 0;
    max-width: 620px;
}

.ac-com-join h2 {
    margin: 0 0 10px;
    font-family: var(--ac-font-display);
    font-weight: 900;
    font-size: 28px;
    letter-spacing: -.03em;
    color: var(--ac-text);
    text-wrap: balance;
}

.ac-com-join p {
    margin: 0;
    font-size: 17px;
    line-height: 1.55;
    color: var(--ac-text-soft);
}

.ac-btn-lg {
    padding: 15px 26px;
    font-size: 15px;
    font-weight: 800;
}

/* Modale d'accès ----------------------------------------------------------- */

.ac-com-gate {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(8, 7, 6, .82);
    backdrop-filter: blur(8px);
}

.ac-com-gate[hidden] {
    display: none;
}

.ac-com-gate-box {
    position: relative;
    width: 100%;
    max-width: 520px;
    max-height: 100%;
    overflow-y: auto;
    padding: 34px 34px 28px;
    background: var(--com-strip);
    border: 1px solid #3A2420;
    border-radius: 8px;
    box-shadow: 0 40px 90px rgba(0, 0, 0, .6);
    font-family: var(--ac-font-body);
}

.ac-com-gate-x {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 30px;
    height: 30px;
    background: transparent;
    border: 0;
    border-radius: 4px;
    color: var(--ac-text-dim);
    font-size: 17px;
    cursor: pointer;
}

.ac-com-gate-x:hover {
    background: var(--ac-line-2);
    color: var(--ac-text);
}

.ac-com-gate-badge {
    display: inline-block;
    padding: 5px 12px;
    border: 1px solid var(--ac-accent-edge);
    border-radius: 3px;
    background: var(--ac-accent-wash);
    color: var(--ac-accent-soft);
    font-family: var(--ac-font-display);
    font-weight: 800;
    font-size: 10.5px;
    letter-spacing: .12em;
}

.ac-com-gate-box h2 {
    margin: 18px 0 10px;
    font-family: var(--ac-font-display);
    font-weight: 900;
    font-size: 28px;
    line-height: 1.08;
    letter-spacing: -.03em;
    color: var(--ac-text);
    text-wrap: balance;
}

.ac-com-gate-box > p {
    margin: 0 0 20px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--ac-text-soft);
}

.ac-com-gate-items {
    display: grid;
    gap: 11px;
    margin: 0 0 24px;
}

.ac-com-gate-items > div {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 15px;
    line-height: 1.45;
    color: #E6D9D1;
}

.ac-com-gate-items > div > span:first-child {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--ac-accent-soft);
    font-family: var(--ac-font-display);
    font-weight: 800;
    font-size: 13px;
}

.ac-com-gate-cta {
    display: block;
    padding: 15px 0;
    text-align: center;
}

.ac-com-gate-skip {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 12px 0;
    background: transparent;
    border: 0;
    color: var(--ac-text-dim);
    font-family: var(--ac-font-body);
    font-size: 14px;
    cursor: pointer;
}

.ac-com-gate-skip:hover {
    color: var(--ac-text);
}

.ac-com-gate-foot {
    margin: 6px 0 0;
    text-align: center;
    font-size: 12.5px;
    color: var(--ac-text-faint);
}

/* Écrans étroits ----------------------------------------------------------- */

@media (max-width: 1080px) {
    .ac-com {
        grid-template-columns: minmax(0, 1fr);
    }

    .ac-com-rail {
        flex-direction: row;
        overflow-x: auto;
    }

    .ac-com-rail-title {
        display: none;
    }

    .ac-com-chan {
        width: auto;
        white-space: nowrap;
    }

    .ac-com-side {
        position: static;
    }
}

@media (max-width: 700px) {
    .ac-com-hero h1 {
        padding: 34px 16px 24px;
        font-size: 30px;
        white-space: normal;
    }

    .ac-com-strip,
    .ac-com-join {
        padding-left: 16px;
        padding-right: 16px;
    }

    .ac-com {
        padding: 20px 16px 16px;
    }

    .ac-com-fil {
        height: 76vh;
    }

    .ac-com-fil-desc {
        display: none;
    }

    .ac-com-tools {
        opacity: 1;
    }

    .ac-com-join h2 {
        font-size: 24px;
    }
}

/* --- Liens de la Communauté ----------------------------------------------
   `body.academie #theme-main a` (ligne 120) repeint tous les liens du contenu
   en --ac-accent-hi et l'emporte sur les classes .ac-* — même sur
   `.ac-com-chan.is-active`, à spécificité égale mais déclaré avant. Mesuré :
   le salon actif ressortait en #FF6A4D au lieu du #F5EBE4 de l'artboard.
   On réaffirme donc les couleurs du design à la même spécificité, comme le
   fait déjà le lecteur de cours plus haut.
   -------------------------------------------------------------------------- */

body.academie #theme-main .ac-com-chan {
    color: var(--ac-text-muted);
}

body.academie #theme-main .ac-com-chan:hover,
body.academie #theme-main .ac-com-chan.is-active {
    color: var(--ac-text);
}

body.academie #theme-main .ac-com-rdv-foot a {
    color: var(--ac-accent-soft);
}

/* ==========================================================================
   Page « Mission Afrique » (artboard « Parrainage Afrique.dc.html »)
   --------------------------------------------------------------------------
   Toute la page bascule sur un vert propre, posé en variables --acm-* sur
   .ac-mission par le gabarit. Rien ne fuit sur le reste de l'Académie, qui
   garde son rouge.

   Ce vert (#02843F) n'est pas celui de la carte Mission Afrique de la page
   Pass (#41B96C) : les deux artboards divergent, chacun conserve le sien.
   ========================================================================== */

.ac-mission {
    background: #1A1E1B;
}

.ac-mission-section {
    padding: 70px 48px;
    border-bottom: 1px solid #2C332E;
}

.ac-mission-h2 {
    margin: 0 0 12px;
    color: var(--ac-text);
    font-family: var(--ac-font-display);
    font-weight: 800;
    font-size: 34px;
    line-height: 1.08;
    letter-spacing: -.025em;
    text-wrap: balance;
}

.ac-mission-h2-small {
    margin-bottom: 26px;
    font-size: 30px;
    letter-spacing: -.02em;
}

.ac-mission-sub {
    margin: 0;
    max-width: 640px;
    color: var(--ac-text-soft);
    font-size: 18px;
    line-height: 1.55;
    text-wrap: pretty;
}

.ac-mission-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

/* --- Boutons -------------------------------------------------------------- */

.ac-mission-btn {
    display: inline-block;
    padding: 15px 28px;
    border-radius: var(--ac-radius);
    background: var(--acm);
    color: #F6E9E0;
    font-family: var(--ac-font-display);
    font-weight: 800;
    font-size: 15px;
    white-space: nowrap;
    text-decoration: none;
    transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.ac-mission-btn:hover {
    background: var(--acm-hi);
    transform: translateY(-2px);
    box-shadow: 0 14px 34px var(--acm-glow);
}

.ac-mission-btn-block {
    display: block;
    margin-top: 22px;
    padding: 15px 0;
    text-align: center;
}

.ac-mission-btn-ghost {
    display: inline-block;
    padding: 15px 26px;
    border-radius: var(--ac-radius);
    background: rgba(245, 235, 228, .08);
    border: 1px solid var(--ac-line-2);
    color: var(--ac-text);
    font-family: var(--ac-font-display);
    font-weight: 700;
    font-size: 15px;
    white-space: nowrap;
    text-decoration: none;
}

.ac-mission-btn-ghost:hover {
    background: rgba(245, 235, 228, .14);
}

/* --- Héros ---------------------------------------------------------------- */

.ac-mission-hero {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid #2C332E;
}

/* Les deux halos et la carte de fond du design. Purement décoratifs : ils
   restent sous le contenu et n'interceptent aucun clic. */
.ac-mission-hero-glow,
.ac-mission-hero-glow-2 {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(30px);
}

.ac-mission-hero-glow {
    top: -30%;
    right: -8%;
    width: 70%;
    aspect-ratio: 1;
    background: radial-gradient(circle, var(--acm-wash) 0%, rgba(2, 132, 63, .1) 38%, rgba(2, 132, 63, 0) 68%);
}

.ac-mission-hero-glow-2 {
    bottom: -42%;
    left: 6%;
    width: 52%;
    aspect-ratio: 1;
    filter: blur(38px);
    background: radial-gradient(circle, rgba(2, 132, 63, .16) 0%, rgba(2, 132, 63, 0) 62%);
}

.ac-mission-hero-map {
    position: absolute;
    top: -26%;
    left: 50%;
    width: 82%;
    height: 156%;
    transform: translateX(-50%);
    opacity: .68;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(58% 62% at 50% 50%, #000 40%, transparent 78%);
    mask-image: radial-gradient(58% 62% at 50% 50%, #000 40%, transparent 78%);
}

.ac-mission-hero-map iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: transparent;
    pointer-events: none;
}

.ac-mission-hero-inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: 48px;
    align-items: center;
    max-width: 1440px;
    padding: 76px 48px 72px;
}

.ac-mission-count {
    display: flex;
    align-items: flex-end;
    gap: 18px;
    flex-wrap: wrap;
    margin: 0 0 6px;
}

.ac-mission-count-value {
    color: var(--acm);
    font-family: var(--ac-font-display);
    font-weight: 900;
    font-size: 104px;
    line-height: .82;
    letter-spacing: -.04em;
}

.ac-mission-count-label {
    max-width: 300px;
    padding-bottom: 4px;
    color: var(--ac-text-2);
    font-family: var(--ac-font-display);
    font-weight: 700;
    font-size: 21px;
    line-height: 1.25;
}

.ac-mission-title {
    margin: 26px 0 18px;
    max-width: 720px;
    color: var(--ac-text);
    font-family: var(--ac-font-display);
    font-weight: 800;
    font-size: 42px;
    line-height: 1.06;
    letter-spacing: -.025em;
    text-wrap: balance;
}

.ac-mission-lede {
    margin: 0 0 30px;
    max-width: 640px;
    color: var(--ac-text-2);
    font-size: 19px;
    line-height: 1.6;
    text-wrap: pretty;
}

.ac-mission-hero-cta {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin: 0;
}

/* --- Encart objectif ------------------------------------------------------ */

.ac-mission-goal {
    padding: 30px;
    border-radius: 8px;
    background: rgba(12, 16, 13, .72);
    border: 1px solid #343D37;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.ac-mission-goal-title {
    margin: 0;
    color: var(--ac-text);
    font-family: var(--ac-font-display);
    font-weight: 700;
    font-size: 15px;
}

.ac-mission-goal-text {
    margin: 10px 0 22px;
    color: var(--ac-text-2);
    font-size: 17px;
    line-height: 1.55;
    text-wrap: pretty;
}

.ac-mission-goal-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 8px;
    font-family: var(--ac-font-display);
}

.ac-mission-goal-count {
    color: var(--ac-text);
    font-weight: 800;
    font-size: 15px;
}

.ac-mission-goal-target {
    color: var(--ac-text-dim);
    font-size: 13px;
    white-space: nowrap;
}

.ac-mission-goal-bar {
    height: 8px;
    border-radius: 3px;
    background: #343D37;
    overflow: hidden;
}

.ac-mission-goal-bar > span {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: var(--acm);
}

.ac-mission-goal-rest {
    margin: 10px 0 0;
    color: var(--ac-text-dim);
    font-size: 13.5px;
}

/* --- Bandeau de chiffres -------------------------------------------------- */

.ac-mission-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    border-bottom: 1px solid #2C332E;
}

.ac-mission-stat {
    padding: 30px 34px;
    border-right: 1px solid #2C332E;
}

.ac-mission-stat-value {
    display: block;
    color: var(--ac-text);
    font-family: var(--ac-font-display);
    font-weight: 900;
    font-size: 34px;
    letter-spacing: -.02em;
}

.ac-mission-stat-label {
    display: block;
    margin-top: 6px;
    color: var(--ac-text-dim);
    font-size: 15px;
    text-wrap: pretty;
}

/* --- Carte ---------------------------------------------------------------- */

.ac-mission-legend {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: #8A9A90;
    font-family: var(--ac-font-display);
    font-size: 14px;
}

.ac-mission-legend-dot {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 2px;
    background: var(--acm);
}

.ac-mission-map {
    border-radius: 8px;
    border: 1px solid #343D37;
    background: #1F2420;
    overflow: hidden;
}

.ac-mission-map iframe {
    display: block;
    width: 100%;
    height: 520px;
    border: 0;
    background: #1F2420;
}

/* --- Étapes et sélecteur -------------------------------------------------- */

.ac-mission-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
    gap: 56px;
    align-items: start;
    max-width: 1180px;
}

.ac-mission-steps {
    display: grid;
    gap: 14px;
    margin-top: 26px;
}

.ac-mission-step {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 22px 24px;
    background: #222623;
    border: 1px solid #343D37;
    border-left: 3px solid var(--acm);
    border-radius: 6px;
}

.ac-mission-step-num {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--acm-wash);
    border: 1px solid var(--acm-edge);
    color: var(--acm-soft);
    font-family: var(--ac-font-display);
    font-weight: 900;
    font-size: 17px;
}

.ac-mission-step-title {
    margin: 0;
    color: var(--ac-text);
    font-family: var(--ac-font-display);
    font-weight: 800;
    font-size: 18px;
    line-height: 1.2;
}

.ac-mission-step-text {
    margin: 7px 0 0;
    color: var(--ac-text-soft);
    font-size: 16px;
    line-height: 1.55;
    text-wrap: pretty;
}

.ac-mission-picker {
    position: sticky;
    top: 96px;
    padding: 30px;
    background: #222623;
    border: 1px solid #343D37;
    border-radius: 8px;
}

.ac-mission-picker-title {
    margin: 0;
    color: var(--ac-text);
    font-family: var(--ac-font-display);
    font-weight: 800;
    font-size: 17px;
}

.ac-mission-counter {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 24px 0 18px;
}

.ac-mission-step-btn {
    width: 44px;
    height: 44px;
    border-radius: var(--ac-radius);
    background: #2C332E;
    border: 1px solid var(--ac-line-2);
    color: var(--ac-text);
    font-family: var(--ac-font-display);
    font-size: 20px;
    cursor: pointer;
}

.ac-mission-step-btn:hover {
    background: #343D37;
}

.ac-mission-counter-body {
    flex: 1;
    text-align: center;
}

.ac-mission-counter-value {
    display: block;
    color: var(--ac-text);
    font-family: var(--ac-font-display);
    font-weight: 900;
    font-size: 46px;
    line-height: 1;
}

.ac-mission-counter-label {
    display: block;
    margin-top: 4px;
    color: var(--ac-text-dim);
    font-size: 13.5px;
}

.ac-mission-quick {
    display: flex;
    gap: 8px;
    margin-bottom: 22px;
}

.ac-mission-quick-btn {
    flex: 1;
    padding: 9px 0;
    border-radius: 3px;
    border: 1px solid var(--ac-line-2);
    background: transparent;
    color: var(--ac-text-2);
    font-family: var(--ac-font-display);
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
}

.ac-mission-quick-btn.is-picked {
    background: var(--acm);
    color: #180C0A;
}

.ac-mission-total {
    padding: 20px;
    background: #1A1E1B;
    border: 1px solid #343D37;
    border-radius: 6px;
}

.ac-mission-total-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

.ac-mission-total-label {
    color: var(--ac-text-soft);
    font-size: 15.5px;
}

.ac-mission-total-value {
    color: var(--acm-hi);
    font-family: var(--ac-font-display);
    font-weight: 900;
    font-size: 26px;
    white-space: nowrap;
}

.ac-mission-total-year {
    margin: 8px 0 0;
    color: var(--ac-text-faint);
    font-size: 14px;
}

.ac-mission-impact {
    margin: 18px 0 0;
    color: var(--ac-text-2);
    font-size: 16px;
    line-height: 1.55;
    text-wrap: pretty;
}

.ac-mission-picker-foot {
    margin: 12px 0 0;
    color: var(--ac-text-faint);
    font-size: 13px;
    text-align: center;
}

/* --- Témoignages ---------------------------------------------------------- */

.ac-mission-slot {
    margin: 0;
    padding: 10px 14px;
    border: 1px dashed var(--ac-line-2);
    border-radius: var(--ac-radius);
    color: #6B615C;
    font-family: ui-monospace, monospace;
    font-size: 11.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.ac-mission-testis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: 20px;
}

.ac-mission-testi {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 28px;
    background: #222623;
    border: 1px solid #343D37;
    border-radius: 6px;
}

.ac-mission-testi-quote {
    color: var(--acm);
    font-family: var(--ac-font-display);
    font-weight: 900;
    font-size: 32px;
    line-height: 1;
}

.ac-mission-testi-text {
    margin: 12px 0 24px;
    color: var(--ac-text-2);
    font-size: 18px;
    line-height: 1.62;
    font-style: italic;
    text-wrap: pretty;
}

.ac-mission-testi-foot {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid #2C332E;
}

.ac-mission-testi-photo {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: var(--ac-radius);
    border: 1px solid #343D37;
    background: #19211C center / cover no-repeat;
}

.ac-mission-testi-name {
    display: block;
    color: var(--ac-text);
    font-family: var(--ac-font-display);
    font-weight: 700;
    font-size: 15px;
}

.ac-mission-testi-role {
    display: block;
    margin-top: 3px;
    color: var(--ac-text-dim);
    font-size: 14px;
}

.ac-mission-callout {
    margin: 22px 0 0;
    padding: 20px 24px;
    background: #141110;
    border: 1px dashed var(--ac-line-2);
    border-radius: 6px;
    color: var(--ac-text-soft);
    font-size: 15.5px;
    text-wrap: pretty;
}

/* --- FAQ ------------------------------------------------------------------ */

.ac-mission-faq {
    max-width: 900px;
}

.ac-mission-faq-item {
    border-top: 1px solid #2C332E;
}

.ac-mission-faq-q {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    padding: 19px 0;
    background: none;
    border: 0;
    color: var(--ac-text);
    font-family: var(--ac-font-display);
    font-weight: 700;
    font-size: 17.5px;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
}

.ac-mission-faq-q:hover {
    opacity: .82;
}

.ac-mission-faq-sign {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: var(--ac-radius);
    border: 1px solid #2C3A34;
    color: #9FBFAE;
    font-size: 15px;
    line-height: 1;
}

.ac-mission-faq-a {
    margin: 0 0 20px;
    max-width: 760px;
    color: var(--ac-text-soft);
    font-size: 17px;
    line-height: 1.6;
    text-wrap: pretty;
}

.ac-mission-faq-a[hidden] {
    display: none;
}

/* --- Appel final ---------------------------------------------------------- */

.ac-mission .ac-mission-section:last-child {
    border-bottom: 0;
}

.ac-mission-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
    padding: 52px;
    background: linear-gradient(120deg, #16211A 0%, #222623 62%);
    border: 1px solid #343D37;
    border-radius: 8px;
}

/* --- Liens ---------------------------------------------------------------- */

/* `body.academie #theme-main a` repeint tous les liens en accent rouge et
   l'emporte sur les classes. Il faut le neutraliser à spécificité égale,
   comme pour la vue lecteur. */
body.academie #theme-main .ac-mission-btn,
body.academie #theme-main .ac-mission-btn-ghost {
    color: #F6E9E0;
}

body.academie #theme-main .ac-mission-btn-ghost {
    color: var(--ac-text);
}

body.academie #theme-main .ac-mission-callout a {
    color: var(--acm-soft);
    font-weight: 600;
}

body.academie #theme-main .ac-mission-callout a:hover {
    color: var(--ac-text);
}

/* --- Repli ---------------------------------------------------------------- */

@media (max-width: 1000px) {
    .ac-mission-hero-inner,
    .ac-mission-split {
        grid-template-columns: minmax(0, 1fr);
        gap: 34px;
    }

    .ac-mission-picker {
        position: static;
    }

    .ac-mission-count-value {
        font-size: 64px;
    }

    .ac-mission-title {
        font-size: 30px;
    }
}

@media (max-width: 700px) {
    .ac-mission-section,
    .ac-mission-hero-inner {
        padding-left: 20px;
        padding-right: 20px;
    }

    .ac-mission-cta {
        padding: 28px;
    }

    .ac-mission-map iframe {
        height: 360px;
    }
}

/* ==========================================================================
   Page « Églises » (artboard « Eglises.dc.html »)
   --------------------------------------------------------------------------
   Troisième palette de l'Académie : bleu, posé en --ace-* sur .ac-eg par le
   gabarit. Les gris de cette page sont froids (#22262C, #343A43…) et n'ont pas
   d'équivalent dans les tokens chauds de l'Académie : ils sont donc écrits en
   dur, comme dans la source.
   ========================================================================== */

.ac-eg {
    background: #0E1013;
}

.ac-eg-section {
    max-width: 1180px;
    margin: 0 auto;
    padding: 66px 40px 0;
}

.ac-eg-section-narrow {
    max-width: 900px;
}

.ac-eg-section:last-child {
    padding-bottom: 66px;
}

.ac-eg-h2 {
    margin: 0 0 10px;
    color: var(--ac-text);
    font-family: var(--ac-font-display);
    font-weight: 900;
    font-size: 34px;
    letter-spacing: -.03em;
    text-wrap: balance;
}

.ac-eg-h2-gap {
    margin-bottom: 28px;
}

.ac-eg-h2-flush {
    margin-bottom: 0;
}

.ac-eg-sub {
    margin: 0 0 28px;
    max-width: 640px;
    color: #B9BFC8;
    font-size: 18px;
    line-height: 1.6;
    text-wrap: pretty;
}

.ac-eg-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.ac-eg-label {
    display: block;
    color: #8B93A0;
    font-family: var(--ac-font-display);
    font-size: 13px;
    font-weight: 600;
}

.ac-eg-fine {
    margin: 12px 0 0;
    color: #7C8492;
    font-size: 13px;
    text-align: center;
    text-wrap: pretty;
}

.ac-eg-fine-left {
    text-align: left;
    font-size: 13.5px;
}

/* --- Boutons -------------------------------------------------------------- */

.ac-eg-btn {
    display: inline-block;
    padding: 15px 30px;
    border-radius: var(--ac-radius);
    background: var(--ace);
    color: var(--ace-on);
    font-family: var(--ac-font-display);
    font-weight: 800;
    font-size: 15px;
    text-decoration: none;
    transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.ac-eg-btn:hover {
    background: var(--ace-hi);
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(61, 127, 224, .32);
}

.ac-eg-btn-block {
    display: block;
    margin-top: 24px;
    padding: 16px 0;
    font-size: 15.5px;
    text-align: center;
}

.ac-eg-btn-ghost {
    display: inline-block;
    padding: 15px 26px;
    border: 1px solid #414954;
    border-radius: var(--ac-radius);
    color: var(--ac-text);
    font-family: var(--ac-font-display);
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
}

.ac-eg-btn-ghost:hover {
    background: rgba(245, 235, 228, .06);
}

/* --- Héros ---------------------------------------------------------------- */

.ac-eg-hero {
    position: relative;
    overflow: hidden;
    background: #1A1D23;
    border-bottom: 1px solid #2C3138;
}

.ac-eg-hero-glow {
    position: absolute;
    top: -34%;
    left: 50%;
    width: 62%;
    aspect-ratio: 1;
    transform: translateX(-50%);
    border-radius: 50%;
    filter: blur(34px);
    pointer-events: none;
    background: radial-gradient(circle, rgba(61, 127, 224, .32) 0%, rgba(61, 127, 224, .12) 40%, rgba(61, 127, 224, 0) 70%);
}

.ac-eg-hero-mark {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 420px;
    max-width: 60%;
    transform: translate(-50%, -50%);
    opacity: .16;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(60% 60% at 50% 50%, #000 40%, transparent 82%);
    mask-image: radial-gradient(60% 60% at 50% 50%, #000 40%, transparent 82%);
}

.ac-eg-hero-mark svg {
    display: block;
    width: 100%;
    height: auto;
}

.ac-eg-hero-inner {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 44px;
    align-items: center;
    max-width: 1180px;
    margin: 0 auto;
    padding: 78px 40px 68px;
}

.ac-eg-title {
    margin: 0 0 16px;
    color: var(--ac-text);
    font-family: var(--ac-font-display);
    font-weight: 900;
    font-size: 50px;
    line-height: 1.02;
    letter-spacing: -.035em;
    text-wrap: balance;
}

.ac-eg-lede {
    margin: 0 0 26px;
    max-width: 560px;
    color: #B9BFC8;
    font-size: 19px;
    line-height: 1.6;
    text-wrap: pretty;
}

.ac-eg-hero-cta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin: 0;
}

/* --- Cartes --------------------------------------------------------------- */

.ac-eg-card {
    padding: 30px;
    border-radius: 8px;
    background: #22262C;
    border: 1px solid #343A43;
}

.ac-eg-card-blue {
    background: linear-gradient(140deg, #16202E 0%, #22262C 70%);
    border-color: #2F4260;
}

.ac-eg-card-title {
    margin: 0;
    color: var(--ac-text);
    font-family: var(--ac-font-display);
    font-weight: 700;
    font-size: 15px;
}

.ac-eg-exchange {
    background: rgba(11, 14, 18, .72);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.ac-eg-exchange-list {
    display: grid;
    gap: 16px;
    margin-top: 18px;
}

.ac-eg-exchange-row {
    display: flex;
    align-items: baseline;
    gap: 14px;
    color: #B9BFC8;
    font-size: 16.5px;
    line-height: 1.5;
    text-wrap: pretty;
}

.ac-eg-figure {
    min-width: 104px;
    color: var(--ace-soft);
    font-family: var(--ac-font-display);
    font-weight: 900;
    font-size: 26px;
    white-space: nowrap;
}

.ac-eg-rule {
    display: block;
    height: 1px;
    background: #343A43;
}

/* --- Calculateur ---------------------------------------------------------- */

.ac-eg-calc {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    align-items: start;
}

.ac-eg-counter {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
}

.ac-eg-step-btn {
    width: 46px;
    height: 46px;
    border-radius: var(--ac-radius);
    background: #1A2028;
    border: 1px solid #2F3742;
    color: var(--ac-text);
    font-family: var(--ac-font-display);
    font-size: 20px;
    cursor: pointer;
}

.ac-eg-step-btn:hover {
    background: #222A34;
}

.ac-eg-counter-body {
    min-width: 96px;
    text-align: center;
}

.ac-eg-counter-value {
    display: block;
    color: var(--ac-text);
    font-family: var(--ac-font-display);
    font-weight: 900;
    font-size: 40px;
    line-height: 1;
}

.ac-eg-counter-label {
    display: block;
    margin-top: 4px;
    color: #7C8492;
    font-size: 13px;
}

.ac-eg-quick {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.ac-eg-quick-btn {
    padding: 10px 16px;
    border-radius: 3px;
    border: 1px solid #2F3742;
    background: transparent;
    color: #99A1AD;
    font-family: var(--ac-font-display);
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
}

.ac-eg-quick-btn.is-picked {
    background: var(--ace);
    color: var(--ace-on);
}

.ac-eg-free {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid #343A43;
}

.ac-eg-free-row {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.ac-eg-free-row input {
    flex: 1;
    min-width: 0;
}

.ac-eg-unit {
    display: flex;
    align-items: center;
    padding: 0 14px;
    border-radius: var(--ac-radius);
    background: #0F1319;
    border: 1px solid #2F3742;
    color: #8B93A0;
    font-family: var(--ac-font-display);
    font-size: 14px;
    white-space: nowrap;
}

.ac-eg-hint {
    display: block;
    margin-top: 8px;
    color: #7C8492;
    font-size: 13.5px;
    line-height: 1.5;
    text-wrap: pretty;
}

.ac-eg-total {
    margin: 10px 0 0;
    color: var(--ac-text);
    font-family: var(--ac-font-display);
    font-weight: 900;
    font-size: 40px;
    letter-spacing: -.03em;
}

.ac-eg-total-note {
    margin: 6px 0 0;
    color: #8B93A0;
    font-size: 15px;
}

.ac-eg-lines {
    display: grid;
    gap: 14px;
    margin-top: 24px;
}

.ac-eg-line {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid #343A43;
    color: #B9BFC8;
    font-size: 16px;
}

.ac-eg-line-last {
    padding-bottom: 0;
    border-bottom: 0;
}

.ac-eg-line-value {
    color: var(--ac-text);
    font-family: var(--ac-font-display);
    font-weight: 800;
    font-size: 16px;
    white-space: nowrap;
}

.ac-eg-line-blue {
    color: var(--ace-soft);
}

.ac-eg-goal {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #343A43;
}

.ac-eg-goal-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 8px;
    font-family: var(--ac-font-display);
    font-size: 12.5px;
}

.ac-eg-goal-count {
    color: var(--ace-soft);
    font-weight: 700;
}

.ac-eg-goal-target {
    color: #7C8492;
    white-space: nowrap;
}

.ac-eg-goal-bar {
    height: 7px;
    border-radius: 3px;
    background: #232C38;
    overflow: hidden;
}

.ac-eg-goal-bar > span {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: var(--ace);
}

/* --- Étapes --------------------------------------------------------------- */

.ac-eg-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}

.ac-eg-step-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 3px;
    background: rgba(61, 127, 224, .18);
    border: 1px solid rgba(61, 127, 224, .38);
    color: var(--ace-soft);
    font-family: var(--ac-font-display);
    font-weight: 800;
    font-size: 14px;
}

.ac-eg-step-title {
    margin: 16px 0 0;
    color: var(--ac-text);
    font-family: var(--ac-font-display);
    font-weight: 800;
    font-size: 19px;
}

.ac-eg-step-body {
    margin: 10px 0 0;
    color: #99A1AD;
    font-size: 16.5px;
    line-height: 1.55;
    text-wrap: pretty;
}

/* --- Ce que reçoivent les membres ----------------------------------------- */

.ac-eg-perk {
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: 28px;
    align-items: baseline;
    padding: 20px 0;
    border-top: 1px solid #343A43;
}

.ac-eg-perk-title {
    color: var(--ac-text);
    font-family: var(--ac-font-display);
    font-weight: 800;
    font-size: 18px;
    line-height: 1.25;
    text-wrap: balance;
}

.ac-eg-perk-body {
    color: #99A1AD;
    font-size: 16px;
    line-height: 1.55;
    text-wrap: pretty;
}

/* --- Carte ---------------------------------------------------------------- */

.ac-eg-map {
    border-radius: 8px;
    border: 1px solid #343A43;
    background: #0F1319;
    overflow: hidden;
}

.ac-eg-map iframe {
    display: block;
    width: 100%;
    height: 520px;
    border: 0;
    background: #0F1319;
}

/* --- Témoignage ----------------------------------------------------------- */

.ac-eg-testi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    align-items: center;
    padding: 44px;
    border-radius: 8px;
    background: linear-gradient(140deg, #16202E 0%, #22262C 70%);
    border: 1px solid #2F4260;
}

.ac-eg-kicker {
    margin: 0;
    color: #8B93A0;
    font-family: var(--ac-font-display);
    font-weight: 800;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.ac-eg-quote {
    margin: 18px 0 0;
    color: var(--ac-text);
    font-size: 24px;
    line-height: 1.45;
    text-wrap: pretty;
}

.ac-eg-quote-name {
    margin: 20px 0 0;
    color: var(--ac-text);
    font-family: var(--ac-font-display);
    font-weight: 700;
    font-size: 15px;
}

.ac-eg-quote-role {
    margin: 4px 0 0;
    color: #8B93A0;
    font-size: 14.5px;
}

.ac-eg-testi-photo {
    display: block;
    min-height: 240px;
    border-radius: 6px;
    border: 1px solid #414954;
    background: #171C23 center / cover no-repeat;
}

/* --- Kit ------------------------------------------------------------------ */

.ac-eg-kit {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.ac-eg-kit-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 24px;
}

.ac-eg-kit-title {
    margin: 0;
    color: var(--ac-text);
    font-family: var(--ac-font-display);
    font-weight: 800;
    font-size: 17px;
}

.ac-eg-kit-body {
    margin: 0;
    color: #99A1AD;
    font-size: 15.5px;
    line-height: 1.55;
    text-wrap: pretty;
}

.ac-eg-kit-format {
    margin-top: auto;
    color: #7C8492;
    font-family: var(--ac-font-display);
    font-size: 12.5px;
}

/* --- FAQ ------------------------------------------------------------------ */

.ac-eg-faq {
    display: grid;
    gap: 10px;
}

.ac-eg-faq-item {
    padding: 20px 24px;
    border-radius: 8px;
    background: #22262C;
    border: 1px solid #343A43;
}

.ac-eg-faq-item summary {
    list-style: none;
    cursor: pointer;
    color: var(--ac-text);
    font-family: var(--ac-font-display);
    font-weight: 700;
    font-size: 17px;
}

.ac-eg-faq-item summary::-webkit-details-marker {
    display: none;
}

.ac-eg-faq-item p {
    margin: 12px 0 0;
    color: #99A1AD;
    font-size: 16.5px;
    line-height: 1.6;
    text-wrap: pretty;
}

/* --- Formulaire ----------------------------------------------------------- */

.ac-eg-form {
    display: grid;
    gap: 16px;
}

.ac-eg-field-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
}

.ac-eg-field {
    display: block;
}

.ac-eg .ac-eg-field input,
.ac-eg .ac-eg-free-row input {
    width: 100%;
    box-sizing: border-box;
    margin-top: 7px;
    padding: 13px 15px;
    background: #0F1319;
    border: 1px solid #2F3742;
    border-radius: var(--ac-radius);
    color: var(--ac-text);
    font-size: 15px;
    outline: none;
}

.ac-eg .ac-eg-free-row input {
    margin-top: 0;
}

.ac-eg .ac-eg-field input:focus,
.ac-eg .ac-eg-free-row input:focus {
    border-color: var(--ace);
}

/* Remplace les champs de carte du design, non reproduits : voir le gabarit. */
.ac-eg-notice {
    margin: 0;
    padding: 16px 18px;
    border-radius: 6px;
    background: rgba(61, 127, 224, .1);
    border: 1px solid rgba(61, 127, 224, .38);
    color: #B9BFC8;
    font-size: 15px;
    line-height: 1.55;
    text-wrap: pretty;
}

.ac-eg-recap-title {
    margin: 0 0 18px;
    color: var(--ac-text);
    font-family: var(--ac-font-display);
    font-weight: 800;
    font-size: 16px;
}

.ac-eg-line-total {
    align-items: baseline;
    padding: 18px 0 6px;
    border-bottom: 0;
}

.ac-eg-line-total-label {
    color: var(--ac-text);
    font-family: var(--ac-font-display);
    font-weight: 800;
    font-size: 15px;
}

.ac-eg-line-total-value {
    color: var(--ac-text);
    font-family: var(--ac-font-display);
    font-weight: 800;
    font-size: 20px;
    white-space: nowrap;
}

.ac-eg-back {
    margin: 14px 0 0;
    text-align: center;
    font-size: 14px;
}

/* --- Liens ---------------------------------------------------------------- */

/* `body.academie #theme-main a` repeint tout en accent rouge et l'emporte sur
   les classes : il faut réaffirmer à spécificité égale, comme ailleurs. */
body.academie #theme-main .ac-eg-btn {
    color: var(--ace-on);
}

body.academie #theme-main .ac-eg-btn-ghost {
    color: var(--ac-text);
}

body.academie #theme-main .ac-eg-link,
body.academie #theme-main .ac-eg-back a,
body.academie #theme-main .ac-eg-notice a,
body.academie #theme-main .ac-eg-fine a {
    color: var(--ace-hi);
}

body.academie #theme-main .ac-eg-link:hover,
body.academie #theme-main .ac-eg-back a:hover,
body.academie #theme-main .ac-eg-notice a:hover,
body.academie #theme-main .ac-eg-fine a:hover {
    color: var(--ace-soft);
}

.ac-eg-link {
    font-size: 15px;
    text-decoration: none;
}

/* --- Repli ---------------------------------------------------------------- */

@media (max-width: 760px) {
    .ac-eg-section,
    .ac-eg-hero-inner {
        padding-left: 20px;
        padding-right: 20px;
    }

    .ac-eg-title {
        font-size: 32px;
    }

    .ac-eg-h2 {
        font-size: 26px;
    }

    .ac-eg-perk {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    .ac-eg-testi {
        padding: 26px;
    }

    .ac-eg-map iframe {
        height: 360px;
    }
}

/* ==========================================================================
   Étape 2 du tunnel Pass — formule et parrainage Mission Afrique
   --------------------------------------------------------------------------
   Valeurs relevées dans « Plans.dc.html », lignes 119-197 pour le balisage et
   398-448 pour les états. Le vert est celui de cet artboard-là (#41B96C), pas
   celui de la page Mission Afrique (#02843F) : les deux divergent.
   ========================================================================== */

/* Cartes de formule : le prix y est plus petit qu'à l'étape 1. */
.ac-pass-card-plan {
    padding: 28px;
}

.ac-pass-card-plan .ac-pass-price {
    margin-top: 14px;
    font-size: 24px;
    letter-spacing: -.02em;
}

.ac-pass-card-plan .ac-pass-card-note {
    margin-top: 6px;
    color: #9A8F88;
    font-size: 15.5px;
}

.ac-pass-card-features {
    display: block;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #302C2A;
    color: var(--ac-text-2);
    font-size: 15.5px;
    line-height: 1.6;
}

/* --- Bloc parrainage ------------------------------------------------------ */

.ac-pass-gift {
    margin-top: 26px;
    padding: 30px;
    border-radius: 8px;
    background: linear-gradient(120deg, #121A14 0%, #141814 70%);
    border: 1px solid #26332B;
}

.ac-pass-gift[hidden] {
    display: none;
}

.ac-pass-gift-head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.ac-pass-gift-title {
    color: var(--ac-text);
    font-family: var(--ac-font-display);
    font-weight: 800;
    font-size: 19px;
}

.ac-pass-gift-remove {
    margin-left: auto;
    background: none;
    border: 0;
    padding: 0;
    color: #7F8F84;
    font-family: var(--ac-font-display);
    font-size: 13.5px;
    text-decoration: underline;
    cursor: pointer;
}

.ac-pass-gift-remove:hover {
    color: var(--ac-text);
}

.ac-pass-gift-text {
    margin: 0 0 22px;
    max-width: 620px;
    color: #9AA79F;
    font-size: 16.5px;
    line-height: 1.55;
    text-wrap: pretty;
}

.ac-pass-gift-row {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}

.ac-pass-gift-counter {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ac-pass-gift-btn {
    width: 42px;
    height: 42px;
    border-radius: var(--ac-radius);
    background: #18211B;
    border: 1px solid #2F3A33;
    color: var(--ac-text);
    font-family: var(--ac-font-display);
    font-size: 19px;
    cursor: pointer;
}

.ac-pass-gift-btn:hover {
    background: #1F2A22;
}

.ac-pass-gift-body {
    min-width: 74px;
    text-align: center;
}

.ac-pass-gift-value {
    display: block;
    color: var(--ac-text);
    font-family: var(--ac-font-display);
    font-weight: 900;
    font-size: 34px;
    line-height: 1;
}

.ac-pass-gift-label {
    display: block;
    margin-top: 3px;
    color: #7F8F84;
    font-size: 12.5px;
}

.ac-pass-gift-quick {
    display: flex;
    gap: 8px;
}

.ac-pass-gift-quick-btn {
    padding: 10px 16px;
    border-radius: 3px;
    border: 1px solid #2F3A33;
    background: transparent;
    color: #9AA79F;
    font-family: var(--ac-font-display);
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
}

.ac-pass-gift-quick-btn.is-picked {
    background: var(--ac-mission-alt, #41B96C);
    color: #0C140F;
}

.ac-pass-gift-total {
    margin-left: auto;
    text-align: right;
}

.ac-pass-gift-price {
    display: block;
    color: #5CCE87;
    font-family: var(--ac-font-display);
    font-weight: 900;
    font-size: 24px;
}

.ac-pass-gift-period {
    display: block;
    margin-top: 3px;
    color: #7F8F84;
    font-size: 13px;
}

/* --- Proposition d'ajout (parrainage écarté à l'étape 1) ------------------- */

.ac-pass-gift-offer {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    padding: 22px 26px;
}

.ac-pass-gift-offer-body {
    flex: 1 1 320px;
    min-width: 0;
}

.ac-pass-gift-offer-title {
    margin: 0;
    color: var(--ac-text);
    font-family: var(--ac-font-display);
    font-weight: 800;
    font-size: 17px;
}

.ac-pass-gift-offer-text {
    margin: 6px 0 0;
    color: #9AA79F;
    font-size: 15.5px;
    line-height: 1.5;
    text-wrap: pretty;
}

.ac-pass-gift-add {
    padding: 13px 22px;
    border: 0;
    border-radius: var(--ac-radius);
    background: #41B96C;
    color: #0C140F;
    font-family: var(--ac-font-display);
    font-weight: 800;
    font-size: 14.5px;
    cursor: pointer;
    transition: transform .18s ease, background-color .18s ease;
}

.ac-pass-gift-add:hover {
    background: #5CCE87;
    transform: translateY(-2px);
}

/* --- Bouton de passage au paiement ---------------------------------------- */

.ac-pass-blocked {
    color: var(--ac-text-dim);
    font-family: var(--ac-font-display);
    font-size: 14px;
}

.ac-pass-blocked[hidden] {
    display: none;
}

/* Bloqué tant que le nombre d'accès n'est pas choisi, comme nextBg/nextFg. */
body.academie #theme-main .ac-pass-go.is-blocked {
    background: #3A2523;
    color: #8A6B66;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* --- Jauge du récapitulatif ------------------------------------------------ */

.ac-pass-recap-goal {
    padding: 14px 0;
    border-bottom: 1px solid #302C2A;
}

.ac-pass-recap-goal[hidden] {
    display: none;
}

.ac-pass-recap-goal-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 7px;
    font-family: var(--ac-font-display);
    font-size: 12.5px;
}

.ac-pass-recap-goal-count {
    color: var(--ac-mission-soft, #93DFAC);
    font-weight: 700;
}

.ac-pass-recap-goal-target {
    color: var(--ac-text-faint);
    white-space: nowrap;
}

.ac-pass-recap-goal-bar {
    height: 6px;
    border-radius: 3px;
    background: #23302A;
    overflow: hidden;
}

.ac-pass-recap-goal-bar > span {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: #41B96C;
}

@media (max-width: 720px) {
    .ac-pass-gift-total {
        margin-left: 0;
        text-align: left;
    }
}


/* =========================================================================
   Modale « Mon compte »  (.ac-acc)

   Valeurs relevées dans l'artboard TPSG Académie.dc.html (lignes 881-1000).
   Les couleurs passent par les variables déjà déclarées sur body.academie :
   le design utilise exactement les mêmes.
   ====================================================================== */

@keyframes tpsgFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes tpsgIn   { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }

body.ac-acc-ouverte { overflow: hidden }

.ac-acc {
    position: fixed;
    inset: 0;
    z-index: 95;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.ac-acc[hidden] { display: none }

.ac-acc-fond {
    position: absolute;
    inset: 0;
    background: rgba(8, 7, 6, .78);
    backdrop-filter: blur(6px);
    animation: tpsgFade .18s ease;
}

.ac-acc-boite {
    position: relative;
    width: 100%;
    max-width: 880px;
    max-height: 88vh;
    overflow-y: auto;
    border-radius: 8px;
    background: #16130F;
    border: 1px solid var(--ac-line);
    box-shadow: 0 40px 100px rgba(0, 0, 0, .6);
    animation: tpsgIn .22s cubic-bezier(.2, .8, .2, 1);
}

/* En-tête ---------------------------------------------------------------- */

.ac-acc-tete {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px 28px;
    border-bottom: 1px solid var(--ac-line-soft);
}

.ac-acc-tete .ac-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--ac-radius);
    object-fit: cover;
    flex-shrink: 0;
}

.ac-acc-tete .ac-avatar-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ac-accent);
    color: var(--ac-on-accent);
    font-family: var(--ac-font-display);
    font-weight: 800;
    font-size: 14px;
}

.ac-acc-qui { min-width: 0 }

.ac-acc-titre {
    font-family: var(--ac-font-display);
    font-weight: 800;
    font-size: 19px;
    color: var(--ac-text);
}

.ac-acc-sous {
    margin-top: 2px;
    font-size: 13.5px;
    color: var(--ac-text-dim);
}

.ac-acc-fermer {
    margin-left: auto;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: var(--ac-radius);
    background: rgba(10, 9, 8, .8);
    border: 1px solid var(--ac-line-2);
    color: var(--ac-text);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--ac-ease);
}

.ac-acc-fermer:hover { background: var(--ac-line-soft) }

/* Onglets ---------------------------------------------------------------- */

.ac-acc-onglets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 16px 28px 0;
}

.ac-acc-onglet {
    padding: 9px 15px;
    border-radius: var(--ac-radius);
    background: transparent;
    border: 1px solid var(--ac-line);
    color: var(--ac-text-2);
    font-family: var(--ac-font-body);
    font-weight: 600;
    font-size: 13.5px;
    cursor: pointer;
    transition: background-color var(--ac-ease), color var(--ac-ease), border-color var(--ac-ease);
}

.ac-acc-onglet:hover { color: var(--ac-text) }

.ac-acc-onglet.est-actif {
    background: var(--ac-accent);
    border-color: var(--ac-accent);
    color: #180C0A;
}

/* Corps ------------------------------------------------------------------ */

.ac-acc-corps { padding: 24px 28px 30px }

.ac-acc-attente {
    padding: 30px 0;
    color: var(--ac-text-dim);
    font-size: 14.5px;
}

/* Bandeau de message. Absent de l'artboard : construit avec ses jetons. */
.ac-acc-avis {
    margin-bottom: 18px;
    padding: 12px 16px;
    border-radius: var(--ac-radius);
    font-size: 14.5px;
    border: 1px solid var(--ac-line);
    background: var(--ac-surface-2);
    color: var(--ac-text-soft);
}

.ac-acc-avis-erreur {
    background: var(--ac-accent-wash);
    border-color: var(--ac-accent-edge);
    color: var(--ac-accent-soft);
}

/* Formulaires ------------------------------------------------------------ */

.ac-acc-grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.ac-acc-colonne {
    display: grid;
    gap: 16px;
    max-width: 420px;
}

.ac-acc-pleine { grid-column: 1 / -1 }

.ac-acc-champ {
    display: grid;
    gap: 7px;
    font-size: 13.5px;
    color: var(--ac-text-dim);
}

.ac-acc-champ input,
.ac-acc-champ select {
    padding: 12px 14px;
    background: var(--ac-surface-2);
    border: 1px solid var(--ac-line);
    border-radius: var(--ac-radius);
    color: var(--ac-text);
    font-family: var(--ac-font-body);
    font-size: 15px;
    outline: none;
    transition: border-color var(--ac-ease);
}

.ac-acc-champ input:focus,
.ac-acc-champ select:focus { border-color: var(--ac-accent) }

.ac-acc-tel {
    display: flex;
    gap: 8px;
}

.ac-acc-tel select {
    flex-shrink: 0;
    width: 42%;
    max-width: 190px;
}

.ac-acc-tel input {
    flex: 1 1 auto;
    min-width: 0;
}

.ac-acc-form > .ac-acc-btn { margin-top: 22px }
.ac-acc-colonne > .ac-acc-btn { margin-top: 0; justify-self: start }

/* Boutons ---------------------------------------------------------------- */

.ac-acc-btn {
    display: inline-block;
    border-radius: var(--ac-radius);
    font-family: var(--ac-font-body);
    font-size: 13.5px;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color var(--ac-ease), color var(--ac-ease), border-color var(--ac-ease);
}

.ac-acc-btn.est-occupe { opacity: .55; cursor: progress }

.ac-acc-btn-accent {
    padding: 13px 24px;
    background: var(--ac-accent);
    border: 0;
    color: var(--ac-on-accent);
    font-family: var(--ac-font-display);
    font-weight: 800;
    font-size: 14.5px;
}

.ac-acc-btn-accent:hover { background: var(--ac-accent-hi); color: var(--ac-on-accent) }

.ac-acc-btn-creux {
    padding: 9px 15px;
    background: transparent;
    border: 1px solid var(--ac-line-2);
    color: var(--ac-text);
}

.ac-acc-btn-creux:hover { background: rgba(245, 235, 228, .08); color: var(--ac-text) }

.ac-acc-btn-sourd {
    padding: 9px 13px;
    background: transparent;
    border: 1px solid var(--ac-line);
    color: var(--ac-text-muted);
}

.ac-acc-btn-sourd:hover { color: var(--ac-text); border-color: var(--ac-line-2) }

.ac-acc-lien {
    background: none;
    border: 0;
    padding: 0;
    color: var(--ac-accent-soft);
    font: inherit;
    cursor: pointer;
}

.ac-acc-lien:hover { color: var(--ac-text) }

/* Sessions --------------------------------------------------------------- */

.ac-acc-sessions {
    margin-top: 8px;
    padding-top: 18px;
    border-top: 1px solid var(--ac-line-soft);
    font-size: 14px;
    color: var(--ac-text-dim);
}

/* Liste de souhaits ------------------------------------------------------ */

.ac-acc-vide {
    padding: 30px 22px;
    border: 1px dashed var(--ac-line);
    border-radius: var(--ac-radius-lg);
    text-align: center;
}

.ac-acc-vide-titre {
    font-family: var(--ac-font-display);
    font-weight: 700;
    font-size: 16px;
    color: var(--ac-text);
}

.ac-acc-vide-texte {
    margin-top: 8px;
    font-size: 14.5px;
    color: var(--ac-text-dim);
}

.ac-acc-ligne {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    padding: 12px 2px;
    border-top: 1px solid var(--ac-line-soft);
}

.ac-acc-vignette {
    position: relative;
    flex-shrink: 0;
    width: 92px;
    height: 52px;
    border-radius: 3px;
    overflow: hidden;
    background: #1E1B16;
    border: 1px solid var(--ac-line);
}

.ac-acc-vignette img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ac-acc-ligne-texte {
    min-width: 0;
    flex: 1 1 160px;
}

.ac-acc-ligne-titre {
    display: block;
    font-family: var(--ac-font-display);
    font-weight: 700;
    font-size: 15px;
    color: var(--ac-text);
}

.ac-acc-ligne-meta {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    color: var(--ac-text-dim);
}

/* Téléphones ------------------------------------------------------------- */

@media (max-width: 720px) {
    .ac-acc { padding: 16px }
    .ac-acc-tete { padding: 18px }
    .ac-acc-onglets { padding: 14px 18px 0 }
    .ac-acc-corps { padding: 18px 18px 24px }
    .ac-acc-tel { flex-wrap: wrap }
    .ac-acc-tel select { width: 100%; max-width: none }
}

/* Onglet « Mon Pass et facturation » ------------------------------------- */

.ac-acc-blocs {
    display: grid;
    gap: 18px;
}

.ac-acc-carte {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
    padding: 22px;
    border-radius: var(--ac-radius-lg);
    background: #1B1714;
    border: 1px solid var(--ac-line);
}

.ac-acc-carte-texte { min-width: 0 }

.ac-acc-carte-titre {
    font-family: var(--ac-font-display);
    font-weight: 800;
    font-size: 18px;
    color: var(--ac-text);
}

.ac-acc-carte-ligne {
    margin-top: 6px;
    font-size: 14.5px;
    color: var(--ac-text-soft);
}

.ac-acc-actions {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ac-acc-btn-compact {
    padding: 11px 18px;
    font-size: 13.5px;
}

/* Moyen de paiement */

.ac-acc-moyen {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
    padding: 20px 22px;
    border-radius: var(--ac-radius-lg);
    border: 1px solid var(--ac-line-soft);
}

.ac-acc-marque {
    flex-shrink: 0;
    width: 46px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    background: var(--ac-line-soft);
    border: 1px solid var(--ac-line);
    font-family: var(--ac-font-display);
    font-weight: 800;
    font-size: 10px;
    color: var(--ac-text-2);
}

.ac-acc-moyen-titre {
    font-size: 14.5px;
    color: var(--ac-text);
}

.ac-acc-moyen-sous {
    margin-top: 3px;
    font-size: 13px;
    color: var(--ac-text-dim);
}

.ac-acc-moyen > .ac-acc-btn { margin-left: auto }

.ac-acc-carte-form {
    display: grid;
    gap: 16px;
    padding: 20px 22px;
    border-radius: var(--ac-radius-lg);
    border: 1px solid var(--ac-line-soft);
}

.ac-acc-carte-form[hidden] { display: none }

.ac-acc-carte-form .ac-acc-actions { margin-left: 0 }

[data-ac-stripe-elements] {
    padding: 12px 14px;
    background: var(--ac-surface-2);
    border: 1px solid var(--ac-line);
    border-radius: var(--ac-radius);
    color: var(--ac-text-dim);
    font-size: 14.5px;
}

/* Factures */

.ac-acc-sous-titre {
    margin-bottom: 8px;
    font-family: var(--ac-font-display);
    font-weight: 700;
    font-size: 15px;
    color: var(--ac-text);
}

.ac-acc-facture {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    padding: 12px 2px;
    border-top: 1px solid var(--ac-line-soft);
}

.ac-acc-facture-date {
    min-width: 130px;
    font-size: 14.5px;
    color: var(--ac-text-2);
}

.ac-acc-facture-libelle {
    flex: 1 1 120px;
    font-size: 14.5px;
    color: var(--ac-text-dim);
}

.ac-acc-facture-montant {
    font-family: var(--ac-font-display);
    font-weight: 700;
    font-size: 14px;
    color: var(--ac-text);
}

.ac-acc-facture-pdf {
    font-size: 13.5px;
    color: var(--ac-accent-soft);
    white-space: nowrap;
}

.ac-acc-facture-pdf:hover { color: var(--ac-text) }

/* Confirmation de résiliation. Écran absent de l'artboard : bâti avec ses
   jetons d'accent, parce qu'une résiliation ne doit pas partir sur un clic. */

.ac-acc-confirme {
    margin-top: 18px;
    padding: 20px 22px;
    border-radius: var(--ac-radius-lg);
    background: var(--ac-accent-wash);
    border: 1px solid var(--ac-accent-edge);
}

.ac-acc-confirme[hidden] { display: none }

.ac-acc-confirme-titre {
    font-family: var(--ac-font-display);
    font-weight: 800;
    font-size: 16px;
    color: var(--ac-text);
}

.ac-acc-confirme-texte {
    margin-top: 8px;
    font-size: 14.5px;
    color: var(--ac-text-soft);
}

.ac-acc-confirme .ac-acc-actions {
    margin-left: 0;
    margin-top: 16px;
}

@media (max-width: 720px) {
    .ac-acc-actions { margin-left: 0 }
    .ac-acc-moyen > .ac-acc-btn { margin-left: 0 }
    .ac-acc-facture-date { min-width: 0 }
}