/* MARQUEUR DE VERSION TEMPORAIRE version hamburger-align-flex-2026-08-19 —
   à retirer une fois le déploiement confirmé. */
/* ========================================
   BC ACADEMY - Styles globaux
   ----------------------------------------
   Les couleurs sont pilotées par le système
   d'univers : les valeurs littérales ne sont
   que des replis si la variable est absente.
   ======================================== */

/* ========================================
   VARIABLES CSS - BOUTONS
   Ces variables doivent être définies dans
   le fichier PHP qui inclut ce CSS
   ======================================== */
/*
:root {
    --btn-primary-radius: 8px;
    --btn-primary-border: none;
    --btn-secondary-radius: 8px;
    --btn-secondary-border: none;
    --btn-action-radius: 8px;
    --btn-action-border: none;
    --btn-danger-radius: 8px;
    --btn-danger-border: none;
    --btn-connexion-radius: 6px;
    --btn-connexion-border: none;
    --btn-inscription-radius: 6px;
    --btn-inscription-border: none;
}
*/

/* === RESET & BASE === */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--police-principale, "Abel", sans-serif);
    line-height: 1.6;
    color: var(--couleur-texte-corps, #1f2d3d);
    background-color: var(--couleur-fond-page, #f4f8fc);
}

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

/* === HEADERS === */
header {
    background: var(--mobile-header-fond, var(--couleur-fond-page, #f5f5f5));
    color: white;
    padding: 20px 0;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 260px;
    min-height: 260px;
}

.header-content {
    display: flex;
    justify-content: var(--mobile-logo-position, center);
    align-items: center;
    width: 100%;
}

/* Colonne logo de la barre à 2 colonnes : masquée par défaut (mobile), ne
   s'affiche qu'à partir de 901px (règle dans le bloc media dédié plus bas) —
   sous 901px le header garde son propre logo, pas de doublon. */
.bar-logo-col {
    display: none;
}

.logo {
    font-size: 28px;
    font-weight: bold;
    text-decoration: none;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
}

.logo-svg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
}

.logo-svg svg {
    height: var(--mobile-logo-taille, 60px);
    width: auto;
    max-height: none;
}

/* Afficher le logo couleur partout */
.logo-svg-blanc {
    display: none;
}

.logo-svg-couleur {
    display: flex !important;
}

/* === HAMBURGER MENU === */
.hamburger {
    display: none;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    background: var(--mobile-hamburger-fond, transparent);
    border: none;
    cursor: pointer;
    z-index: 1001;
    margin: var(--mobile-hamburger-marges, 0);
}

.hamburger:hover {
    background: var(--mobile-hamburger-fond-hover, transparent);
}

.hamburger:hover .hamburger-text {
    color: var(--mobile-hamburger-texte-hover, var(--mobile-hamburger-texte, white));
}

.hamburger:hover .hamburger-icon span {
    background-color: var(--mobile-hamburger-texte-hover, var(--mobile-hamburger-texte, white));
}

.hamburger-icon {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
}

.hamburger-icon span {
    display: block;
    width: 20px;
    height: 2px;
    background-color: var(--mobile-hamburger-texte, white);
    margin: 2px 0;
    border-radius: 1px;
    transition: all 0.3s;
}

.hamburger-text {
    color: var(--mobile-hamburger-texte, white);
    font-family: var(--mobile-hamburger-police, var(--police-principale));
    font-size: var(--mobile-hamburger-taille, 14px);
    font-weight: var(--mobile-hamburger-graisse, 500);
    line-height: var(--mobile-hamburger-line-height, 1.4);
    letter-spacing: 1px;
    transition: color 0.3s;
}

/* Animation hamburger -> X (seulement si data-anime="1") */
.hamburger[data-anime="1"].active .hamburger-icon span:nth-child(1) {
    transform: rotate(45deg) translate(4px, 4px);
}
.hamburger[data-anime="1"].active .hamburger-icon span:nth-child(2) {
    opacity: 0;
}
.hamburger[data-anime="1"].active .hamburger-icon span:nth-child(3) {
    transform: rotate(-45deg) translate(4px, -4px);
}

/* === NAVIGATION === */
nav {
    background-color: var(--couleur-nav-fond, #ffffff);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

nav ul li {
    margin: 0;
    position: relative;
}

nav ul li::before {
    content: "";
    display: var(--nav-separateur-affiche, block);
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: var(--nav-separateur-epaisseur, 1px);
    height: var(--nav-separateur-hauteur, 16px);
    background: var(--couleur-nav-separateur, #dce9f6);
}

nav ul li:first-child::before {
    display: none;
}

nav ul li a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: var(--nav-item-padding-v, 15px) var(--nav-item-padding-h, 22px);
    text-decoration: none;
    color: var(--couleur-nav-items, #0d5aa7);
    font-family: var(--nav-font-family, var(--police-titres, "Barlow Condensed", sans-serif));
    font-weight: var(--nav-font-weight, 500);
    font-size: var(--nav-taille, 14px);
    transition: all var(--nav-animation-duree, 0.2s) ease;
    border-bottom: var(--nav-border-width, 3px) solid transparent;
}

nav ul li a:hover,
nav ul li a.active {
    color: var(--couleur-nav-items-hover, #1179e0);
    border-bottom-color: var(--nav-border-color, var(--couleur-nav-items-hover, #1179e0));
    background-color: var(--nav-hover-bg, #f4f8fc);
}

/* L'item de la PAGE COURANTE ne change plus de couleur de texte : il porte un
   liseré court en dessous, comme les titres du site.

   `#navMenu > li > a` : la règle ne vise QUE les items de premier niveau. Un
   sous-menu est un `ul` dans un `li` du menu — écrite `nav ul li a.active`,
   elle aurait aussi repeint les liens des listes déroulantes, qui ont leurs
   propres réglages dans « Sous-menus du menu ».

   Le survol est repris juste après, à la même priorité mais plus bas : sans
   cela l'item courant serait devenu le seul du menu à ne rien faire sous le
   curseur, puisqu'un sélecteur d'identifiant l'emporte sur tout le reste. */
#navMenu > li > a.active {
    color: var(--couleur-nav-items, #0d5aa7);
    border-bottom-color: transparent;
    background-color: transparent;
}

#navMenu > li > a:hover {
    color: var(--couleur-nav-items-hover, #1179e0);
    border-bottom-color: var(--nav-border-color, var(--couleur-nav-items-hover, #1179e0));
    background-color: var(--nav-hover-bg, #f4f8fc);
}

/* Le liseré lui-même. Sur ordinateur seulement : sur mobile le menu est une
   liste verticale, un trait sous chaque intitulé n'y voudrait plus rien dire —
   l'item courant y garde donc sa mise en évidence habituelle.

   Couleur et épaisseur sont celles DÉJÀ réglables dans l'identité visuelle
   pour le liseré de navigation (`--nav-border-color`, `--nav-border-width`) :
   aucun réglage nouveau à saisir, et le trait suit la charte.

   Longueur exprimée en pourcentage de l'item, et non en pixels : « CONTACT »
   et « L'ORGANISME DE FORMATION » n'ont pas la même largeur, un trait fixe
   aurait débordé de l'un et flotté sous l'autre. */
@media (min-width: 901px) {
    /* `#navMenu > li > a` et non `nav ul li a` : le combinateur enfant limite
       la règle aux items de PREMIER NIVEAU. Écrite au sélecteur large, elle
       attrapait aussi les liens des sous-menus — un formateur ouvert voyait un
       liseré sous sa profession, dans la liste déroulante. */
    #navMenu > li > a.active {
        position: relative;
    }

    /* Le trait se cale sur l'INTITULÉ, pas sur le lien.

       Le lien contient aussi, selon les cas, un pictogramme à gauche et le
       chevron de dépliage à droite. Centré sur le lien, le trait se retrouvait
       donc décalé par rapport au mot. Il porte maintenant sur l'enveloppe de
       l'intitulé, posée par `entete.php`, et prend exactement sa largeur —
       `left: 0; right: 0` plutôt qu'une largeur en pourcentage.

       `::after` était indisponible : c'est lui qui dessine le chevron sur les
       items à sous-menu (`.user-menu > a::after`). D'où `::before`. */
    #navMenu > li > a.active .nav-item-texte {
        position: relative;
    }

    #navMenu > li > a.active .nav-item-texte::before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: -8px;
        /* Épaisseur : une variable à part, et c'est important. L'identité
           visuelle a un interrupteur « liseré de navigation » qui met
           `--nav-border-width` à zéro — il gouverne le trait pleine largeur du
           survol, que ce liseré-ci REMPLACE. S'y raccrocher aurait fait
           disparaître le trait chez tous ceux qui ont décoché l'interrupteur,
           c'est-à-dire précisément ceux à qui il manque. */
        border-top: var(--nav-lisere-actif-epaisseur, 3px)
                    solid var(--nav-border-color, var(--couleur-lisere, #efac44));
    }

    /* Même liseré sous l'entrée de sous-menu qui correspond à la page ouverte.

       Ici le trait est ferré à GAUCHE et de longueur fixe : les entrées d'une
       liste déroulante sont alignées à gauche, et certaines tiennent sur deux
       lignes (nom puis profession) de largeurs différentes — un trait calé sur
       « le texte » n'aurait pas su lequel suivre. Il se place sous l'entrée
       entière, dans son retrait bas. */
    .user-submenu a.active {
        position: relative;
    }

    .user-submenu a.active::before {
        content: '';
        position: absolute;
        left: var(--nav-submenu-padding-h, 20px);
        bottom: max(3px, calc(var(--nav-submenu-padding-v, 10px) / 3));
        width: 34px;
        border-top: var(--nav-lisere-actif-epaisseur, 3px)
                    solid var(--nav-border-color, var(--couleur-lisere, #efac44));
    }
}

/* Animations nav desktop via data attribute (exclure sous-menu) */
nav ul[data-nav-animation="fadeIn"] > li > a:hover {
    animation: navFadeIn var(--nav-animation-duree, 0.2s) ease;
}

nav ul[data-nav-animation="slideUp"] > li > a:hover {
    animation: navSlideUp var(--nav-animation-duree, 0.2s) ease;
}

nav ul[data-nav-animation="slideDown"] > li > a:hover {
    animation: navSlideDown var(--nav-animation-duree, 0.2s) ease;
}

nav ul[data-nav-animation="scale"] > li > a:hover {
    animation: navScale var(--nav-animation-duree, 0.2s) ease;
}

/* === BARRE À 2 COLONNES (LOGO | MENU), ORDINATEUR (≥901px) ===
   Remplace le bandeau (header) + barre de menu séparés : sur ordinateur,
   <nav> devient LA barre unique, avec 2 colonnes flex (logo, menu), et
   change de hauteur au défilement — plus de logo cloné qui apparaît/
   disparaît, c'est le MÊME élément logo, permanent, dont la taille
   transitionne en CSS pur en même temps que la hauteur de la barre.
   <header> reste utilisé tel quel sous 901px (menu mobile inchangé). */

@media (min-width: 901px) {
    header {
        display: none;
    }

    nav {
        display: flex;
        align-items: stretch;
        height: var(--header-hauteur, 260px);
        background: var(--header-fond, #ffffff);
    }

    nav > .container {
        display: flex;
        align-items: stretch;
        width: 100%;
    }

    /* Colonne 1 : logo. Largeur réglable, alignement vertical indépendant.
       Alignement horizontal forcé à centré en dur (demande explicite) : ne
       suit plus le réglage "Position" (Identité visuelle > En-tête >
       Dimensions), qui ne pilote donc plus que le logo du bandeau mobile. */
    .bar-logo-col {
        width: var(--bar-logo-largeur, 200px);
        flex-shrink: 0;
        display: flex;
        justify-content: center;
        align-items: var(--bar-logo-align-v, center);
        text-decoration: none;
    }

    .bar-logo-col .logo-svg,
    .bar-logo-col .header-visuel-superpose {
        display: flex;
        align-items: center;
    }

    .bar-logo-col svg,
    .bar-logo-col img {
        height: var(--header-logo-taille, 80px) !important;
        width: auto !important;
        max-height: none !important;
        transition: height var(--sticky-transition, 0.28s) ease;
    }

    /* Colonne 2 : menu. Prend le reste de la largeur, alignements H/V
       indépendants. */
    .bar-menu-col {
        flex: 1;
        display: flex;
        justify-content: var(--nav-items-align, var(--bar-menu-align-h, center));
        align-items: var(--bar-menu-align-v, center);
        min-width: 0;
    }

    .bar-menu-col ul {
        min-height: 0 !important;
    }
}

body.sticky-actif nav {
    position: sticky;
    top: 0;
    z-index: 900;
    transition: height           var(--sticky-transition, 0.28s) ease,
                background-color var(--sticky-transition, 0.28s) ease,
                box-shadow       var(--sticky-transition, 0.28s) ease;
}

/* --- État figé : la barre passe à sa hauteur réduite, le logo à sa taille
   compacte (même élément, juste une autre valeur de --header-logo-taille
   via la variable --sticky-logo-taille), le fond et l'ombre apparaissent. --- */
@media (min-width: 901px) {
    body.is-stuck nav {
        height: var(--sticky-hauteur, 64px);
        background-color: var(--sticky-fond, #ffffff);
        box-shadow: var(--sticky-ombre, 0 2px 14px rgba(0, 0, 0, 0.15));
        -webkit-backdrop-filter: blur(var(--sticky-flou, 0px));
        backdrop-filter: blur(var(--sticky-flou, 0px));
    }

    body.is-stuck .bar-logo-col svg,
    body.is-stuck .bar-logo-col img {
        height: var(--sticky-logo-taille, 44px) !important;
    }

    body.is-stuck nav ul li a {
        height: var(--sticky-hauteur, 64px);
        padding-top: 0;
        padding-bottom: 0;
    }

    body.is-stuck nav ul li::before {
        line-height: var(--sticky-hauteur, 64px);
    }
}

/* Respect de la préférence système « animations réduites ». */
@media (prefers-reduced-motion: reduce) {
    body.sticky-actif nav,
    .bar-logo-col svg,
    .bar-logo-col img {
        transition: none;
    }
}

/* Sous-menu : jamais d'animation hover */
.user-submenu a:hover {
    animation: none !important;
}

@keyframes navFadeIn {
    from { opacity: 0.5; }
    to { opacity: 1; }
}

@keyframes navSlideUp {
    from { transform: translateY(3px); opacity: 0.7; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes navSlideDown {
    from { transform: translateY(-3px); opacity: 0.7; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes navScale {
    from { transform: scale(0.95); opacity: 0.7; }
    to { transform: scale(1); opacity: 1; }
}

/* Menu utilisateur déroulant */
.user-menu {
    position: relative;
}

.user-menu > a {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Bouton de dépliage du sous-menu : réservé au mobile. Sur ordinateur le
   sous-menu s'ouvre au survol, il n'a aucune raison d'exister. */
.sous-menu-bascule {
    display: none;
}

.user-menu > a::after {
    content: var(--nav-triangle-affiche, "keyboard_arrow_down");
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 18px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    transition: none;
}

.user-submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    min-width: 280px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border-radius: 8px;
    padding: 8px 0;
    z-index: 1000;
}

/* Ouverture au survol du sous-menu — réservée à l'ordinateur : en mobile,
   l'ouverture passe uniquement par le clic (classe .active ajoutée en JS),
   voir plus bas dans le bloc @media (max-width: 900px). Sans cette limite,
   un survol (souris/trackpad, ou simulation tactile) pouvait ouvrir le
   sous-menu même en affichage mobile. */
@media (min-width: 901px) {
    .user-menu:hover > a::after {
        content: var(--nav-triangle-affiche-ouvert, "keyboard_arrow_up");
    }

    .user-menu:hover .user-submenu {
        display: block;
    }
}

.user-submenu li {
    margin: 0;
}

.user-submenu a {
    padding: var(--nav-submenu-padding-v, 12px) var(--nav-submenu-padding-h, 20px) !important;
    border-bottom: none !important;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background-color 0.15s, color 0.15s;
    white-space: nowrap;
    font-family: var(--nav-submenu-font-family) !important;
    font-size: var(--nav-submenu-taille) !important;
    font-weight: var(--nav-submenu-font-weight) !important;
    line-height: var(--nav-submenu-line-height) !important;
    color: var(--nav-submenu-couleur, #333) !important;
}

/* L'entrée qui correspond à la page ouverte reprend la couleur NORMALE du
   sous-menu : c'est son liseré orange qui la signale désormais, la teinte
   claire n'a plus lieu d'être et faisait double emploi.

   `:not(:hover)` plutôt qu'une question d'ordre entre les règles : la priorité
   devient franchement supérieure à celle du survol, qui reprend donc la main
   dès que le curseur arrive — quel que soit l'ordre d'écriture des deux
   blocs, ici et dans `entete.php`. */
.user-submenu a.active:not(:hover) {
    color: var(--nav-submenu-couleur, #333) !important;
}

.user-submenu a:hover {
    background-color: #f0f0ff !important;
    color: var(--nav-submenu-couleur-active, var(--couleur-principale, #0d5aa7)) !important;
    padding: var(--nav-submenu-padding-v, 12px) var(--nav-submenu-padding-h, 20px) !important; /* Empêcher tout déplacement */
    transform: none !important;
}

/* Lien de sous-menu sur 2 lignes (titre + sous-titre), utilisé pour la
   liste des formations. */
.user-submenu-link-2lignes {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
}

.user-submenu-titre {
    display: block;
}

.user-submenu-sous-titre {
    display: block;
    font-size: 0.85em;
    font-weight: 400;
    opacity: 0.7;
    white-space: normal;
}

/* Badges dans le menu utilisateur */
.menu-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    background: linear-gradient(135deg, var(--couleur-principale, #0d5aa7) 0%, #d94b8a 100%);
    color: white;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    margin-left: 8px;
    transition: none !important;
    transform: none !important;
}

.menu-badge:hover,
.user-submenu a:hover .menu-badge {
    transform: none !important;
    transition: none !important;
}

.menu-badge.badge-secondary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* === MAIN CONTENT === */
main {
    min-height: calc(100vh - 250px);
    padding: 30px 0;
}

/* === PAGE HEADERS (tous harmonisés) === */
.compte-header,
.contact-header,
.formations-header,
.formation-detail-header,
.session-header,
.reservation-header,
.login-header,
.register-header,
.password-header,
.profile-header,
.header-section,
.presentation-hero,
.hero {
    background: linear-gradient(90deg, rgba(255,242,75,1) 0%, rgba(217,47,137,1) 100%, rgba(196,162,180,1) 100%);;
    color: white;
    padding: 40px 30px;
    border-radius: 10px;
    margin-bottom: 30px;
    text-align: center;
}

.compte-header h1,
.contact-header h1,
.formations-header h1,
.formation-detail-header h1,
.session-header h1,
.reservation-header h1,
.login-header h1,
.register-header h1,
.password-header h1,
.profile-header h1,
.header-section h1,
.presentation-hero h1,
.hero h1 {
    font-size: 32px;
    margin-bottom: 10px;
}

/* L'en-tête de la page d'une FORMATION est aligné à gauche. Une classe à part,
   posée par formation_detail.php : `.session-header` seul aurait aussi
   déplacé l'en-tête des pages de session, qui gardent leur alignement
   centré. */
.session-header-formation {
    text-align: left;
}

/* L'intitulé s'affiche en capitales. `!important` : entete.php injecte, plus
   bas dans la page, un bloc `h1 { … }` pour la typographie de contenu — sans
   cela, une casse réglée là écraserait celle-ci. La règle ne vise QUE le h1
   portant réellement l'intitulé : le titre de repli garde sa casse. */
.session-header-formation h1.est-intitule {
    text-transform: uppercase !important;
}

.compte-header p,
.contact-header p,
.formations-header p,
.formation-detail-header p,
.session-header p,
.reservation-header p,
.login-header p,
.register-header p,
.password-header p,
.profile-header p,
.header-section p,
.presentation-hero p,
.hero p {
    font-size: 18px;
    margin-top: 10px;
    opacity: 0.95;
}

/* Welcome box dans password-header - surcharge du color: white */
.password-header .welcome-box {
    background: rgba(255, 255, 255, 0.95);
    padding: 20px;
    border-radius: 8px;
    margin-top: 20px;
    margin-bottom: 0;
    border-left: 4px solid #667eea;
    color: #333 !important;
    text-align: center;
}

.password-header .welcome-box strong {
    color: #333 !important;
    font-size: 1.1rem;
}

.password-header .welcome-box small,
.password-header .welcome-box .text-muted {
    color: #666 !important;
    opacity: 1 !important;
}

.password-header .welcome-box .material-symbols-outlined {
    color: #667eea !important;
    vertical-align: middle;
    margin-right: 5px;
}

.session-date-large {
    font-size: 18px;
    margin-top: 10px;
    margin-bottom: 15px;
    opacity: 0.95;
}

/* === FOOTER === */
/* ============================================================
   Bloc pied de page : "Nous contacter" + "Liens utiles"
   (au-dessus du footer minimal © année / mentions légales)
   ============================================================ */
.footer-contact-block {
    background: var(--couleur-footer-contact-bg, #dce9f6);
    padding: 50px 0;
    margin-top: 50px;
}

/* Pas de marge blanche entre le bloc « Nous contacter » (beige) et le footer
   (taupe) qui le suit directement : le margin-top du footer créait un espace. */
.footer-contact-block + footer {
    margin-top: 0;
}

.footer-contact-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 60px;
    align-items: start;
}

.footer-contact-form-col h4,
.footer-liens-utiles-col h4 {
    color: var(--couleur-h1, #0d5aa7);
    font-size: 32px;
    margin: 0 0 24px;
}

.footer-contact-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.footer-contact-form-row {
    display: flex;
    gap: 16px;
}

.footer-contact-form-row input {
    flex: 1;
}

.footer-contact-form input,
.footer-contact-form textarea {
    width: 100%;
    border: none;
    border-radius: 10px;
    padding: 16px 18px;
    font-size: 15px;
    font-family: inherit;
    color: #333;
    box-sizing: border-box;
}

.footer-contact-form textarea {
    resize: vertical;
    min-height: 120px;
}

.footer-contact-submit {
    align-self: flex-start;
    background: var(--couleur-footer-bg, #0a4681);
    color: #ffffff;
    border: none;
    border-radius: 10px;
    padding: 14px 32px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: opacity 0.2s;
}

.footer-contact-submit:hover {
    opacity: 0.9;
}

.footer-liens-utiles-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.footer-liens-utiles-list li {
    display: flex;
    align-items: center;
    gap: 12px;
}

.footer-liens-utiles-list .material-symbols-outlined {
    color: var(--couleur-h1, #0d5aa7);
    font-size: 22px;
}

.footer-liens-utiles-list a {
    color: var(--couleur-h1, #0d5aa7);
    text-decoration: none;
    font-size: 16px;
}

.footer-liens-utiles-list a:hover {
    text-decoration: underline;
}

@media (max-width: 700px) {
    .footer-contact-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .footer-contact-form-row {
        flex-direction: column;
        gap: 16px;
    }
}

footer {
    background: var(--couleur-footer-bg, #0a4681);
    color: var(--couleur-footer-texte, #ffffff);
    text-align: center;
    min-height: var(--footer-hauteur, 69px);
    padding: var(--footer-padding, 15px) 0;
    margin-top: 50px;
    font-size: var(--footer-taille-texte, 12px);
    font-weight: var(--footer-graisse, 400);
    line-height: var(--footer-line-height, 1.4);
}

footer .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

footer p {
    margin: 0;
}

footer a {
    color: var(--couleur-footer-liens, #ffffff) !important;
    text-decoration: none;
}

footer a:hover {
    color: var(--couleur-footer-liens-hover, #dce9f6) !important;
    text-decoration: underline;
}

/* === ALERTS === */
.alert {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 5px;
    font-weight: 500;
}

.alert-success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.alert-danger {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.alert-info {
    background-color: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

.alert-warning {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeaa7;
}

/* === CARDS === */
.card {
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    padding: 25px;
    margin-bottom: 20px;
}

/* Valeurs de REPLI. Tout ce bloc se règle dans Identité visuelle > Boîtes >
   Titre de carte : police, taille, graisse, interligne, couleur, liseré,
   espace et marge basse. Ce qui est écrit ici ne sert que tant que le
   réglage correspondant est vide.
   Décocher le liseré dans cette carte supprime le trait — c'est le bon geste
   quand on active par ailleurs le liseré des H2, sinon les deux traits se
   superposent. */
.card-title {
    font-size: 24px;
    margin-bottom: 15px;
    color: var(--couleur-principale, #0d5aa7);
    border-bottom: 2px solid var(--couleur-principale, #0d5aa7);
    padding-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.card-title .material-symbols-outlined {
    font-size: 28px;
}

/* === PROGRAMME PÉDAGOGIQUE === */
.hidden {
    display: none !important;
}

.programme-jours {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.btn-jour {
    padding: 10px 20px;
    background: var(--couleur-principale, #0d5aa7);
    color: white;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 10px 0px;
}

.btn-jour:hover {
    transform: scale(1.05);
}

.btn-jour.active {
    box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 12px 0px;
    transform: scale(1.05);
}

.programme-content {
    margin-top: 15px;
}

.programme-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    border: 2px solid var(--couleur-principale, #0d5aa7);
    border-radius: 8px;
    overflow: hidden;
}

.programme-table th,
.programme-table td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid #eee;
    vertical-align: top;
}

.programme-table th {
    background: var(--couleur-principale, #0d5aa7);
    font-weight: 600;
    color: white;
}

.programme-table .row-pause {
    background: rgba(255, 51, 102, 0.1);
    font-style: italic;
    color: #666;
}

.programme-table .col-heures {
    width: 80px;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .programme-table {
        font-size: 12px;
    }
    
    .programme-table th,
    .programme-table td {
        padding: 8px 5px;
    }
    
    .programme-table .col-heures {
        width: 60px;
    }
    
    .btn-jour {
        padding: 8px 15px;
        font-size: 13px;
    }
}

/* === FORMATEUR / INTERVENANT MINI === */
.formateur-mini {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.formateur-mini:last-child {
    margin-bottom: 0;
}

/* Le cadre rond. C'est LUI qui porte la taille, l'ombre et la bordure — que
   la photo portait avant — et surtout `overflow: hidden` : l'image peut ainsi
   grandir au survol pendant que le médaillon, lui, ne bouge pas d'un pixel.
   Même principe que les cartes carrées de la page Formateurs.

   `box-sizing: border-box` (la valeur du site) est ce qui rend le rendu
   IDENTIQUE à avant : la bordure était déjà comprise dans les 125 px quand
   elle était posée sur l'image. Le disque garde donc exactement son diamètre,
   avec ou sans bordure réglée dans l'identité visuelle. */
.formateur-photo-cadre {
    width: 125px;
    height: 125px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: var(--info-box-visuel-shadow, none);
    border: var(--info-box-visuel-border, none);
}

.formateur-photo-small {
    width: 125px;
    height: 125px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    /* Ni ombre ni bordure ici : elles sont passées au cadre. Laissées sur
       l'image, l'ombre aurait été rognée par le cadre — donc invisible — et
       la bordure se serait affichée deux fois. */
    transition: transform .3s;
}

/* Le zoom porte sur toute la LIGNE, pas seulement sur la photo : le nom et la
   profession sont à côté et désignent la même personne — viser un disque de
   125 px aurait été inutilement exigeant.

   L'image grandit DANS le cadre, qui la rogne : le médaillon garde sa taille,
   et rien ne se décale autour. */
.formateur-mini:hover .formateur-photo-small {
    transform: scale(1.08);
}

@media (prefers-reduced-motion: reduce) {
    .formateur-mini:hover .formateur-photo-small {
        transform: none;
    }
}

.formateur-photo-placeholder {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 16px;
}

.formateur-info-mini {
    flex: 1;
}

.formateur-name-mini {
    font-weight: 600;
    color: #2c3e50;
    font-size: 15px;
}

.formateur-profession-mini {
    color: #666;
    font-size: 13px;
    margin-top: 2px;
}

/* === BUTTONS === */
.btn {
    font-family: "Abel", sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 25px;
    /* background géré par entete.php via variables CSS */
    color: white;
    text-decoration: none;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    transition: all 0.3s;
}

.btn .material-symbols-outlined {
    font-size: 20px;
    color: inherit !important;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

.btn-secondary {
    background: linear-gradient(135deg, #95a5a6 0%, #7f8c8d 100%);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: var(--btn-secondary-radius, 8px);
    border: var(--btn-secondary-border, none);
}

.btn-secondary .material-symbols-outlined {
    color: inherit !important;
}

.btn-danger {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    border-radius: var(--btn-danger-radius, 8px);
    border: var(--btn-danger-border, none);
}

.btn-block {
    width: 100%;
    margin-top: 10px;
}

/* === FORMS === */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--couleur-principale, #0d5aa7);
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
    font-family: inherit;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--couleur-principale, #0d5aa7);
    box-shadow: 0 0 5px rgba(102, 126, 234, 0.3);
}

/* === PAGE RESERVATION DETAIL === */
.reservation-container {
    max-width: 1140px;
    margin: 0 auto;
}

.reservation-container .reservation-header {
    display: block !important;
}

.reservation-header h1 {
    margin-bottom: 20px;
    text-align: center !important;
}

.reservation-meta {
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 40px;
    text-align: left !important;
}

.reservation-number {
    font-size: 16px;
    font-weight: 600;
    color: rgba(255,255,255,0.95);
}

.status-badge {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
}

.status-en_attente {
    background: var(--badge-en-attente-bg, #fff3cd);
    color: var(--badge-en-attente-color, #856404);
}

.status-confirmee {
    background: var(--badge-confirmee-bg, #d4edda);
    color: var(--badge-confirmee-color, #155724);
}

.status-annulee {
    background: var(--badge-annulee-bg, #f8d7da);
    color: var(--badge-annulee-color, #721c24);
}

/* Statut « rejetée » (25/08/2026). Orange : ni le vert d'une confirmation,
   ni le rouge d'une annulation — un rejet est une décision, pas un
   incident. Réglable dans Identité visuelle → Badges → Rejeté. */
.status-rejetee {
    background: var(--badge-rejetee-bg, #fde5cf);
    color: var(--badge-rejetee-color, #8a4b08);
}

.info-card {
    background: white;
    border-radius: 10px;
    padding: 30px;
    margin-bottom: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.info-card h2 {
    font-size: 22px;
    color: var(--couleur-principale, #0d5aa7);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #eee;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.info-item {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.info-icon {
    font-size: 32px;
    flex-shrink: 0;
}

.info-content {
    flex: 1;
}

.info-label {
    font-size: 13px;
    color: #7f8c8d;
    margin-bottom: 5px;
}

.info-value {
    font-size: 16px;
    font-weight: 600;
    color: #2c3e50;
}

.payment-section {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
}

.payment-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
}

.payment-row:last-child {
    border-bottom: none;
    font-weight: bold;
    font-size: 18px;
    padding-top: 10px;
    margin-top: 10px;
    border-top: 2px solid var(--couleur-principale, #0d5aa7);
}

.payment-label {
    color: #495057;
}

.payment-value {
    color: #2c3e50;
    font-weight: 600;
}

.check-icon {
    color: #28a745;
    font-size: 14px;
    margin-left: 8px;
}

.cross-icon {
    color: #dc3545;
    font-size: 14px;
    margin-left: 8px;
}

.payment-warning {
    background: #fff3cd;
    border-left: 4px solid #ffc107;
    padding: 15px 20px;
    margin-top: 20px;
    border-radius: 5px;
}

.payment-warning h3 {
    color: #856404;
    font-size: 16px;
    margin: 0 0 10px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.payment-warning p {
    color: #856404;
    margin: 0;
}

.history-card {
    background: white;
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}

.history-card h2 {
    font-size: 22px;
    color: var(--couleur-principale, #0d5aa7);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #eee;
}

.history-item {
    padding: 12px 0;
    border-bottom: 1px solid #eee;
}

.history-item:last-child {
    border-bottom: none;
}

.history-date {
    font-size: 13px;
    color: #7f8c8d;
    margin-bottom: 5px;
}

.history-event {
    font-size: 15px;
    color: #2c3e50;
}

.actions {
    display: flex;
    gap: 15px;
    margin-top: 30px;
    flex-wrap: wrap;
}

/* === RESPONSIVE MENU MOBILE === */
@media (max-width: 900px) {
    /* Police 12px sur mobile */
    body {
        font-size: 12px;
    }
    
    /* Header avec logo : 260px, fond personnalisable */
    header {
        position: relative;
        height: 260px;
        z-index: 1002;
        background: var(--mobile-header-fond, var(--couleur-fond-page, #f5f5f5)) !important;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px 0;
        box-shadow: none;
    }
    
    header .container {
        display: flex;
        justify-content: var(--mobile-logo-position, center);
        align-items: center;
        width: 100%;
        padding: 0 20px;
    }
    
    header .header-content {
        justify-content: var(--mobile-logo-position, center);
        width: 100%;
    }
    
    /* Logo : cacher blanc, montrer couleur */
    .logo-svg-blanc {
        display: none !important;
    }
    
    .logo-svg-couleur {
        display: flex !important;
        height: auto;
        width: auto;
    }
    
    .logo-svg-couleur svg {
        height: var(--mobile-logo-taille, 60px) !important;
        width: auto !important;
        max-height: none !important;
    }
    
    /* Nav = bandeau menu : hauteur variable, sous le header */
    nav {
        position: relative;
        height: var(--mobile-hamburger-hauteur, 60px);
        z-index: 1001;
        background: rgba(0, 0, 0, 0.9) !important;
        display: flex;
        align-items: center;
        justify-content: var(--mobile-hamburger-position, center);
        padding: 0;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }

    /* Réglage « Position de la barre : Sur la même ligne que l'en-tête »
       (Navigation > Menu ordinateur), déjà appliqué sur ordinateur — même
       traitement ici : la barre hamburger sort du flux normal et occupe
       toute la hauteur du bandeau, en transparence par-dessus lui. Sa
       position verticale DANS cette hauteur (haut/centre/bas) est réglée
       par --mobile-hamburger-align-v (alignement flexbox natif, pas un
       calcul de pixels en dur — Navigation > Menu mobile/tablette >
       Alignement vertical). */
    body.nav-en-ligne nav {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: var(--header-hauteur, 260px);
        display: flex;
        align-items: var(--mobile-hamburger-align-v, flex-end);
        z-index: 1010;
        background: transparent !important;
        box-shadow: none;
    }

    /* .container a un height:100% par défaut (pour occuper toute la hauteur
       de la barre normale, 60px) : en mode « sur la même ligne », nav fait
       maintenant toute la hauteur de l'en-tête (260px) — sans cette
       correction, .container s'étirerait aussi sur les 260px et centrerait
       le hamburger via son propre align-items, rendant le réglage haut/bas
       sans effet. */
    body.nav-en-ligne nav .container {
        height: auto;
    }

    /* Fond transparent = l'icône (blanche par défaut, pensée pour contraster
       avec l'ancien fond sombre de la barre) devient invisible sur un
       en-tête clair. On reprend la couleur de texte de l'en-tête, censée
       déjà contraster avec son propre fond. */
    /* Les variables de couleur (--couleur-texte-header, --mobile-hamburger-
       texte-hover) sont blanches par défaut tant qu'elles n'ont pas été
       explicitement réglées dans l'admin — inutile de les chaîner, elles ne
       donneront jamais de contraste sur un en-tête clair. Couleur sombre
       fixe, garantie visible. */
    body.nav-en-ligne .hamburger-icon span {
        background-color: #0d5aa7;
    }

    body.nav-en-ligne .hamburger-text {
        color: #0d5aa7;
    }

    /* Même souci que pour l'icône hamburger : la couleur des items du menu
       déroulant dépend de réglages (Menu mobile/tablette > Items) qui
       peuvent donner un contraste trop faible pour être lisible. Couleur de
       texte et fond fiables, garantis lisibles, dans ce mode.

       `#navMenu > li > a` et non `nav ul li a` : le second attrapait aussi
       les liens de sous-menu (`.user-submenu` est un `ul` dans un `li` du
       menu), avec une priorité — 2 classes, 4 éléments — supérieure à celle
       de `.user-submenu a`. Les réglages du groupe « Sous-menus du menu »
       étaient donc écrasés par ce #0d5aa7 en dur, uniquement sur mobile et
       uniquement quand la barre est « sur la même ligne que l'en-tête ». Le
       combinateur enfant limite le garde-fou aux items de premier niveau,
       les seuls qu'il visait. */
    body.nav-en-ligne nav #navMenu > li > a,
    body.nav-en-ligne nav #navMenu > li > a:hover,
    body.nav-en-ligne nav #navMenu > li > a.active {
        color: #0d5aa7 !important;
        background: #ffffff !important;
    }

    body.nav-en-ligne nav #navMenu > li > a:hover,
    body.nav-en-ligne nav #navMenu > li > a.active {
        background: #f5f5f5 !important;
    }

    /* nav est sorti du flux normal ci-dessus : le contenu qui suivait
       (main...) ne doit plus perdre la hauteur qu'occupait la barre — sans
       cette compensation, tout remonterait de --mobile-hamburger-hauteur,
       glissant sous le chevauchement. */
    body.nav-en-ligne header {
        margin-bottom: var(--mobile-hamburger-hauteur, 60px);
    }
    
    nav .container {
        display: flex;
        align-items: center;
        justify-content: var(--mobile-hamburger-position, center);
        height: 100%;
        padding: 0 20px;
        width: 100%;
        max-width: 100%;
        margin: 0;
        position: static;
    }
    
    /* Hamburger dans le bandeau nav */
    .hamburger {
        display: flex;
        position: relative;
        z-index: 1003;
    }
    
    .hamburger-icon span {
        background-color: var(--mobile-hamburger-texte, white);
    }
    
    .hamburger-text {
        color: var(--mobile-hamburger-texte, white);
    }
    
    /* Menu déroulant (sous le bandeau nav) */
    nav ul {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--mobile-menu-fond, white) !important;
        flex-direction: column;
        align-items: flex-start;
        align-content: flex-start;
        justify-content: flex-start;
        gap: 0;
        padding: 0;
        margin: 0;
        display: none;
        overflow-y: auto;
        z-index: 1000;
        width: 100%;
    }

    /* Modes « Angle gauche »/« Angle droit » (Navigation > Menu mobile/
       tablette > Affichage) : un petit menu ancré dans un coin plutôt qu'une
       barre pleine largeur — largeur limitée, ancré à gauche ou à droite. */
    body.mobile-menu-angle_gauche nav ul,
    body.mobile-menu-angle_droit nav ul {
        width: auto;
        min-width: 220px;
        max-width: min(85vw, 320px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
    }

    body.mobile-menu-angle_gauche nav ul {
        left: 0;
        right: auto;
    }

    body.mobile-menu-angle_droit nav ul {
        left: auto;
        right: 0;
    }
    
    nav ul.active {
        display: flex !important;
    }
    
    /* Animations menu mobile */
    nav ul.active.anim-slideDown {
        animation: menuSlideDown var(--mobile-animation-duree, 0.3s) ease forwards;
    }
    
    nav ul.active.anim-slideUp {
        animation: menuSlideUp var(--mobile-animation-duree, 0.3s) ease forwards;
    }
    
    nav ul.active.anim-slideLeft {
        animation: menuSlideLeft var(--mobile-animation-duree, 0.3s) ease forwards;
    }
    
    nav ul.active.anim-slideRight {
        animation: menuSlideRight var(--mobile-animation-duree, 0.3s) ease forwards;
    }
    
    nav ul.active.anim-fadeIn {
        animation: menuFadeIn var(--mobile-animation-duree, 0.3s) ease forwards;
    }
    
    nav ul.active.anim-scale {
        animation: menuScale var(--mobile-animation-duree, 0.3s) ease forwards;
    }
    
    nav ul.active.no-animation {
        animation: none !important;
    }
    
    @keyframes menuSlideDown {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }
    
    @keyframes menuSlideUp {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }
    
    @keyframes menuSlideLeft {
        from { opacity: 0; transform: translateX(20px); }
        to { opacity: 1; transform: translateX(0); }
    }
    
    @keyframes menuSlideRight {
        from { opacity: 0; transform: translateX(-20px); }
        to { opacity: 1; transform: translateX(0); }
    }
    
    @keyframes menuFadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    
    @keyframes menuScale {
        from { opacity: 0; transform: scale(0.95); }
        to { opacity: 1; transform: scale(1); }
    }
    
    /* Animations des items du menu */
    /* Quand animation désactivée - items visibles immédiatement */
    nav ul.active[data-items-animation="none"] > li {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
    
    nav ul.active[data-items-animation="fadeIn"] > li:not(.user-menu) {
        opacity: 1 !important;
    }
    
    nav ul.active[data-items-animation="slideLeft"] > li:not(.user-menu) {
        opacity: 1 !important;
        animation: itemSlideLeftNoFade var(--mobile-animation-items-duree, 0.15s) ease forwards;
    }
    
    nav ul.active[data-items-animation="slideRight"] > li:not(.user-menu) {
        opacity: 1 !important;
        animation: itemSlideRightNoFade var(--mobile-animation-items-duree, 0.15s) ease forwards;
    }
    
    nav ul.active[data-items-animation="scale"] > li:not(.user-menu) {
        opacity: 1 !important;
        animation: itemScaleNoFade var(--mobile-animation-items-duree, 0.15s) ease forwards;
    }

    /* Variantes sans opacité animée — évite tout risque de rester bloqué en
       cours d'animation avec un texte à moitié transparent ("pâle"). Le
       mouvement (glissement/agrandissement) reste, l'opacité ne bouge plus. */
    @keyframes itemSlideLeftNoFade {
        from { transform: translateX(15px); }
        to { transform: translateX(0); }
    }
    @keyframes itemSlideRightNoFade {
        from { transform: translateX(-15px); }
        to { transform: translateX(0); }
    }
    @keyframes itemScaleNoFade {
        from { transform: scale(0.9); }
        to { transform: scale(1); }
    }
    
    /* Le user-menu (li parent) n'a jamais d'animation cascade */
    nav ul.active > li.user-menu {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
    
    /* Délai progressif pour chaque item (enfants directs uniquement, sauf user-menu) */
    nav ul.active[data-items-animation]:not([data-items-animation="none"]) > li:nth-child(1) { animation-delay: calc(var(--mobile-animation-items-delay, 0.05s) * 1); }
    nav ul.active[data-items-animation]:not([data-items-animation="none"]) > li:nth-child(2) { animation-delay: calc(var(--mobile-animation-items-delay, 0.05s) * 2); }
    nav ul.active[data-items-animation]:not([data-items-animation="none"]) > li:nth-child(3) { animation-delay: calc(var(--mobile-animation-items-delay, 0.05s) * 3); }
    nav ul.active[data-items-animation]:not([data-items-animation="none"]) > li:nth-child(4) { animation-delay: calc(var(--mobile-animation-items-delay, 0.05s) * 4); }
    nav ul.active[data-items-animation]:not([data-items-animation="none"]) > li:nth-child(5) { animation-delay: calc(var(--mobile-animation-items-delay, 0.05s) * 5); }
    nav ul.active[data-items-animation]:not([data-items-animation="none"]) > li:nth-child(6) { animation-delay: calc(var(--mobile-animation-items-delay, 0.05s) * 6); }
    nav ul.active[data-items-animation]:not([data-items-animation="none"]) > li:nth-child(7) { animation-delay: calc(var(--mobile-animation-items-delay, 0.05s) * 7); }
    nav ul.active[data-items-animation]:not([data-items-animation="none"]) > li:nth-child(8) { animation-delay: calc(var(--mobile-animation-items-delay, 0.05s) * 8); }
    
    /* Sous-menu utilisateur - jamais d'animation cascade */
    .user-submenu,
    .user-submenu li,
    .user-menu .user-submenu li,
    nav ul li.user-menu .user-submenu li,
    nav ul.active li.user-menu .user-submenu li {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        animation-delay: 0s !important;
    }
    
    @keyframes itemFadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    
    @keyframes itemSlideLeft {
        from { opacity: 0; transform: translateX(15px); }
        to { opacity: 1; transform: translateX(0); }
    }
    
    @keyframes itemSlideRight {
        from { opacity: 0; transform: translateX(-15px); }
        to { opacity: 1; transform: translateX(0); }
    }
    
    @keyframes itemScale {
        from { opacity: 0; transform: scale(0.9); }
        to { opacity: 1; transform: scale(1); }
    }
    
    nav ul li {
        width: 100%;
        min-height: var(--mobile-menu-item-hauteur, 40px);
        height: auto;
        border-bottom: 1px solid rgba(0,0,0,0.1);
        display: flex;
        align-items: center;
        flex-shrink: 0;
        background: var(--mobile-menu-fond, white);
    }
    
    nav ul li:not(.user-menu) {
        height: var(--mobile-menu-item-hauteur, 40px);
    }
    
    nav ul li:last-child {
        border-bottom: none;
    }
    
    /* Supprimer les séparateurs "|" sur mobile */
    nav ul li::before {
        display: none !important;
        content: none !important;
    }
    
    nav ul li a {
        color: var(--mobile-menu-texte, #333) !important;
        background: var(--mobile-menu-fond, white) !important;
        padding: var(--mobile-menu-item-padding, 12px 40px) !important;
        font-family: var(--mobile-menu-police, var(--police-principale)) !important;
        font-size: var(--mobile-menu-taille, 12px) !important;
        font-weight: var(--mobile-menu-graisse, 400) !important;
        line-height: var(--mobile-menu-line-height, 1.4) !important;
        justify-content: flex-start;
        border: none !important;
        border-bottom: none !important;
        text-align: left;
        width: 100%;
        height: var(--mobile-menu-item-hauteur, 40px);
        display: flex !important;
        align-items: center;
        text-transform: none !important;
    }
    
    nav ul li a:hover,
    nav ul li a.active {
        background: var(--mobile-menu-fond-hover, #f5f5f5) !important;
        color: var(--mobile-menu-texte-hover, var(--couleur-principale, #0d5aa7)) !important;
    }
    
    /* Sous-menu utilisateur mobile */
    .user-menu {
        position: relative;
        height: auto !important;
        min-height: var(--mobile-menu-item-hauteur, 40px);
        flex-direction: column !important;
        align-items: stretch !important;
    }
    
    .user-menu > a {
        width: 100%;
        height: var(--mobile-menu-item-hauteur, 40px);
        display: flex !important;
        align-items: center;
    }
    
    .user-menu .user-submenu {
        display: none;
        position: static;
        background: var(--mobile-submenu-fond, var(--mobile-menu-fond-hover, #f8f8f8)) !important;
        box-shadow: none;
        border-radius: 0;
        min-width: auto;
        width: 100%;
        padding: 0;
        margin: 0;
        flex-direction: column;
    }
    
    .user-menu.active .user-submenu {
        display: flex !important;
        flex-direction: column;
    }
    
    .user-submenu li {
        min-height: var(--mobile-menu-item-hauteur, 40px);
        height: var(--mobile-menu-item-hauteur, 40px);
        border-bottom: 1px solid rgba(0,0,0,0.05);
        width: 100%;
    }
    
    .user-submenu li:last-child {
        border-bottom: none;
    }
    
    /* Style des sous-menus — réglable indépendamment des items (Identité
       visuelle > Menu mobile/tablette > Sous-menus). Chaque variable retombe
       sur celle des items quand le réglage est laissé vide. */
    .user-submenu a {
        color: var(--mobile-submenu-texte, var(--mobile-menu-texte, #555)) !important;
        font-family: var(--mobile-submenu-police, var(--mobile-menu-police)) !important;
        font-size: var(--mobile-submenu-taille, var(--mobile-menu-taille, 12px)) !important;
        font-weight: var(--mobile-submenu-graisse, var(--mobile-menu-graisse, 400)) !important;
        line-height: var(--mobile-submenu-line-height, var(--mobile-menu-line-height, 1.4)) !important;
        padding: var(--mobile-submenu-padding-v, 8px) 20px var(--mobile-submenu-padding-v, 8px)
                 var(--mobile-submenu-padding-h, 60px) !important;
        height: var(--mobile-menu-item-hauteur, 40px);
        width: 100%;
        transition: background-color 0.15s, color 0.15s;
    }

    /* Sous-titre d'un lien à deux lignes : la profession d'un formateur, le
       sous-titre d'une formation. */
    .user-submenu .user-submenu-sous-titre {
        font-size: var(--mobile-submenu-sstitre-taille) !important;
        color: var(--mobile-submenu-sstitre-couleur) !important;
    }

    /* Lien de sous-menu sur 2 lignes (titre + sous-titre) : la hauteur fixe
       ci-dessus ne suffit pas pour 2 lignes, on repasse en hauteur libre
       pour ce lien précis (et son <li> parent).
       `!important` est indispensable : entete.php injecte, plus bas dans la
       page, `nav ul li { height: … !important }` et `nav ul li a { height: …
       !important }`, qui s'appliquent aussi aux lignes de sous-menu. Sans
       `!important` ici, ces deux règles gagnent et bloquent chaque ligne à la
       hauteur d'un item de menu : un sous-titre qui déborde sur 3 lignes est
       alors tronqué et recouvre l'item suivant. */
    .user-submenu li:has(.user-submenu-link-2lignes) {
        height: auto !important;
        min-height: var(--mobile-menu-item-hauteur, 40px) !important;
    }

    .user-submenu a.user-submenu-link-2lignes {
        height: auto !important;
        min-height: var(--mobile-menu-item-hauteur, 40px) !important;
        padding-top: var(--mobile-submenu-padding-v, 8px) !important;
        padding-bottom: var(--mobile-submenu-padding-v, 8px) !important;
    }
    
    .user-submenu a:hover {
        background: var(--mobile-menu-fond-hover, rgba(0,0,0,0.05)) !important;
        color: var(--mobile-submenu-texte-hover, var(--mobile-menu-texte-hover, var(--couleur-principale, #0d5aa7))) !important;
        padding-left: var(--mobile-submenu-padding-h, 60px) !important; /* Empêcher tout déplacement */
        transform: none !important;
    }
    
    /* Flèche du sous-menu — toujours visible et poussée seule à droite via
       margin-left:auto (pas de dépendance au survol : sur tactile, :hover
       se déclenche de façon peu fiable). Contenu piloté par sa propre
       variable, indépendante du réglage ordinateur. */
    /* La flèche n'est plus portée par le lien mais par un bouton distinct :
       le titre mène à la page, la flèche déplie le sous-menu. */
    .user-menu > a::after {
        content: none;
    }

    .sous-menu-bascule {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0;
        right: 0;
        width: 56px;
        height: var(--mobile-menu-item-hauteur, 40px);
        padding: 0;
        margin: 0;
        border: none;
        background: transparent;
        cursor: pointer;
        z-index: 2;
        /* Garde-fou : si la police d'icônes ne charge pas, le nom de la
           ligature s'afficherait en toutes lettres et déborderait la barre. */
        overflow: hidden;
    }

    .sous-menu-bascule::after {
        content: var(--nav-mobile-triangle-affiche, "keyboard_arrow_down");
        font-family: 'Material Symbols Outlined';
        font-weight: normal;
        font-style: normal;
        font-size: 20px;
        line-height: 1;
        letter-spacing: normal;
        text-transform: none;
        display: inline-block;
        white-space: nowrap;
        word-wrap: normal;
        direction: ltr;
        -webkit-font-feature-settings: 'liga';
        -webkit-font-smoothing: antialiased;
        flex-shrink: 0;
        color: var(--mobile-menu-texte, #333) !important;
    }

    .user-menu.active > .sous-menu-bascule::after {
        content: var(--nav-mobile-triangle-affiche-ouvert, "keyboard_arrow_up");
        color: var(--mobile-menu-texte-hover, var(--couleur-principale, #0d5aa7)) !important;
    }

    /* Le lien s'arrête avant le bouton, sinon on toucherait la flèche en
       visant la fin du titre. */
    .user-menu > a {
        padding-right: 60px !important;
    }
    
    /* Badges mobile */
    .menu-badge {
        margin-left: auto;
    }
    
    .login-container {
        padding: 20px;
    }
    
    .session-grid,
    .formation-grid,
    .reservation-grid,
    .session-grid-reversed {
        grid-template-columns: 1fr;
        gap: 0;
    }
    
    /* Retirer les orders sur mobile */
    .session-grid .session-sidebar,
    .session-grid .session-main,
    .session-grid-reversed .session-sidebar {
        order: 0;
    }
    
    /* Repasser les petits blocs en 1 colonne sur mobile */
    .session-sidebar,
    .formation-sidebar {
        display: block;
    }
    
    .session-sidebar,
    .formation-sidebar,
    .reservation-sidebar {
        position: static;
        z-index: auto;
    }
    
    .session-main,
    .formation-main,
    .reservation-main {
        position: static;
        z-index: auto;
    }
}

/* === LOGIN / REGISTER PAGES === */
.login-container {
    max-width: 600px;
    margin: 40px auto;
}

/* Page connexion.php fusionnée (connexion + mot de passe oublié) : plus large pour les 2 colonnes */
.login-container.login-container-split {
    max-width: 1140px;
}

.connexion-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}

.connexion-col-intro {
    font-size: 14px;
    color: #555;
    line-height: var(--line-height, 1.6);
    margin: 0 0 20px;
}

@media (max-width: 700px) {
    .connexion-split {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

.register-container {
    max-width: 1140px;
    margin: 0 auto;
}

.login-card,
.register-card {
    background: white;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    overflow: hidden;
	padding: 40px;
}

/* Bouton "Se connecter" centré */
.login-submit {
    text-align: center;
}

/* Liens page connexion */
.login-links {
    text-align: center;
    margin-top: 20px;
}

/* Liens "← Retour à la connexion" : pas de soulignement (sauf au survol) */
.login-links a {
    text-decoration: none;
}
.login-links a:hover {
    text-decoration: underline;
}

.forgot-password-link {
    color: #667EEA;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s ease;
}

.forgot-password-link:hover {
    color: #5a67d8;
    text-decoration: underline;
}

.login-footer {
    text-align: center;
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #eee;
    color: #666;
    font-size: 14px;
}

.login-footer a {
    color: #667EEA;
    font-weight: 600;
    text-decoration: none;
}

.login-footer a:hover {
    text-decoration: underline;
}

.register-card {
    max-width: 1140px;
}

.login-icon {
    font-size: 48px;
    margin-bottom: 10px;
}

/* Carte récap réservation sur la page inscription */
.inscription-summary {
    margin-bottom: 30px;
}

/* Liste d'erreurs formulaire */
.error-list {
    margin: 0;
    padding-left: 20px;
}

/* Note champs obligatoires */
.required-fields-note {
    color: #666;
    font-size: 14px;
    margin: 20px 0;
}

/* Bouton submit pleine largeur */
.btn-submit-full {
    width: 100%;
    margin-top: 10px;
}

.error-message,
.success-message {
    padding: 15px;
    margin: 20px;
    border-radius: 5px;
    text-align: center;
}

.error-message {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.success-message {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.login-form,
.register-form {
    padding: 30px;
}

.login-link,
.register-link {
    text-align: center;
    padding: 20px;
    background: #f8f9fa;
    border-top: 1px solid #ddd;
}

.login-link a,
.register-link a {
    color: var(--couleur-principale, #0d5aa7);
    text-decoration: none;
    font-weight: 500;
}

.login-link a:hover,
.register-link a:hover {
    text-decoration: underline;
}

/* === PAGE D'ACCUEIL (index.php) === */
.sessions-preview {
    margin-top: 40px;
}

.sessions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;
    margin-top: 20px;
}

.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin: 50px 0;
}

.feature {
    background: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    text-align: center;
    transition: all 0.3s;
}

.feature:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 20px rgba(102, 126, 234, 0.3);
}

.feature-icon {
    font-size: 48px;
    margin-bottom: 15px;
}

.feature h3 {
    color: var(--couleur-principale, #0d5aa7);
    margin-bottom: 15px;
    font-size: 20px;
}

.feature p {
    color: #666;
    line-height: var(--line-height, 1.6);
}

.sessions-section h2 {
    color: var(--couleur-principale, #0d5aa7);
    font-size: 28px;
    margin-bottom: 30px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.sessions-section h2.mois-titre {
    color: var(--couleur-doree);
    font-size: var(--taille-h2-dore);
    text-align: left;
    display: block;
}

.sessions-section h2 .material-symbols-outlined,
.sessions-section-title .material-symbols-outlined {
    font-size: 32px;
}

/* Un bloc, et non une boîte flex : le pictogramme qui justifiait le flex a
   été retiré, et surtout un `::after` — le liseré — deviendrait un élément
   flex de plus et se poserait À CÔTÉ du texte au lieu de passer dessous.

   Le sélecteur reprend le parent : `.sessions-section h2` plus haut est plus
   spécifique que la classe seule et l'emporterait. */
.sessions-section h2.sessions-section-title {
    display: block;
    text-align: center;
}

.sessions-section-subtitle {
    margin-bottom: 30px;
}

.session-card {
    background: white;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    margin-bottom: 20px;
    transition: all 0.3s;
}

.session-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.2);
}

.session-date {
    color: #333;
    font-weight: 600;
    margin-bottom: 10px;
}

.session-location-mini {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    color: #555;
    font-size: 0.9em;
    line-height: 1.4;
}

.session-location-mini .material-symbols-outlined {
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 1px;
}

.session-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--couleur-principale, #0d5aa7);
}

.session-places {
    color: #28a745;
    font-weight: 600;
    margin-bottom: 15px;
}

.session-places.low {
    color: #ff9800;
}

.session-places.full {
    color: #ef5350;
}

.session-status-badge {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 10px;
}

.badge-open {
    background: #d4edda;
    color: #155724;
}

.badge-low {
    background: #fff3cd;
    color: #856404;
}

.badge-full {
    background: #f8d7da;
    color: #721c24;
}

.session-status-badge .material-symbols-outlined {
    color: inherit;
    vertical-align: middle;
    font-size: 18px;
    margin-right: 4px;
}

.cal-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 10px;
    margin-top: 3px;
}

.cal-badge.badge-open {
    background: #d4edda;
    color: #155724;
}

.cal-badge.badge-low {
    background: #fff3cd;
    color: #856404;
}

.cal-badge.badge-full {
    background: #f8d7da;
    color: #721c24;
}

.session-link {
    display: inline-block;
    padding: 10px 20px;
    background: linear-gradient(90deg, rgba(255,242,75,1) 0%, rgba(217,47,137,1) 100%, rgba(196,162,180,1) 100%);;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    transition: all 0.3s;
}

.session-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #999;
}

.empty-state-icon {
    font-size: 64px;
    margin-bottom: 20px;
    opacity: 0.5;
}

/* === PAGE COMPTE (compte.php) === */
.compte-sidebar {
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    padding: 30px;
    height: fit-content;
	margin-bottom: 30px;
}

.user-avatar {
    width: 120px;
    height: 120px;
    background: linear-gradient(90deg, rgba(255,242,75,1) 0%, rgba(217,47,137,1) 100%, rgba(196,162,180,1) 100%);;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    color: white;
    font-weight: bold;
    margin: 0 auto 20px;
}

.user-name {
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    color: #333;
    margin-bottom: 30px;
}

.compte-content {
    max-width: 1140px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    padding: 30px;
}

.section-content {
    display: none;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 25px;
}

.info-item {
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
}

.info-label {
    font-size: 14px;
    color: #666;
    margin-bottom: 5px;
    font-weight: 500;
}

.info-value {
    font-size: 16px;
    color: #333;
    font-weight: 600;
}

.reservation-item {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 15px;
    border-left: 4px solid var(--couleur-principale, #0d5aa7);
}

/* Info item pleine largeur */
.info-item.full-width {
    grid-column: 1 / -1;
}

/* Actions du profil */
.profile-actions {
    margin-top: 25px;
    display: flex;
    gap: 10px;
}

/* Sections de statut (réservations) */
.statut-section {
    margin-bottom: 20px;
}

.statut-header {
    cursor: pointer;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.3s;
}

.statut-header:hover {
    background: #f0f0f0;
}

.statut-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.statut-icon {
    font-size: 1.2rem;
}

.statut-icon .material-symbols-outlined {
    color: inherit !important;
}

.statut-label {
    font-size: 1.2rem;
    font-weight: bold;
}

.statut-count {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: bold;
    color: white;
}

.statut-toggle {
    font-size: 1.5rem;
    transition: transform 0.3s;
}

.statut-toggle.collapsed {
    transform: rotate(-90deg);
}

.statut-content {
    margin-top: 15px;
    padding-left: 20px;
}

/* Cartes réservation dans la page compte */
.statut-content .reservation-card-new {
    max-width: 1140px;
    margin-left: auto;
    margin-right: 0;
}

/* Message vide */
.empty-message {
    text-align: center;
    padding: 30px;
    color: #777;
    font-style: italic;
}

/* Bouton découvrir formations */
.btn-discover {
    margin-top: 20px;
}

/* Section parrainage */
.parrainage-code-box {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 30px;
    border-radius: 10px;
    margin-bottom: 30px;
    text-align: center;
}

.parrainage-code-label {
    margin-bottom: 10px;
}

.parrainage-code-value {
    font-size: 32px;
    font-weight: bold;
    letter-spacing: 3px;
    margin: 10px 0;
}

.btn-copy-code {
    background: white;
    color: #667eea;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
    font-weight: 600;
    transition: transform 0.2s;
}

.btn-copy-code:hover {
    transform: translateY(-2px);
}

/* Stats parrainage */
.parrainage-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    margin-bottom: 30px;
}

.parrainage-stat-card {
    background: white;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

.parrainage-stat-number {
    font-size: 32px;
    font-weight: bold;
}

.parrainage-stat-number.filleuls {
    color: #667eea;
}

.parrainage-stat-number.actifs {
    color: #27ae60;
}

.parrainage-stat-number.reductions {
    color: #e67e22;
}

.parrainage-stat-label {
    color: #7f8c8d;
    font-size: 14px;
}


/* =====================================================
   CARTES DE RÉSERVATION - NOUVEAU DESIGN (compte.php)
   ===================================================== */

/* Carte principale */
.reservation-card-new {
    max-width: 1140px;
    background: white;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    margin-bottom: 25px;
    overflow: hidden;
}

/* En-tête avec gradient */
.reservation-header-new {
    background: linear-gradient(135deg, #f7e559 0%, #f5c150 25%, #e8794a 50%, #d94b8a 75%, #c94b9a 100%);
    padding: 25px 30px;
    border-radius: 15px 15px 0 0;
}

/* Le fond, le rayon ET la bordure de .reservation-header-new sont imposés par
   entete.php (univers) en !important, avec une spécificité (0,1,0). On les
   surcharge ici avec une spécificité supérieure (0,2,0) — donc prioritaire
   même face à leurs !important — pour un séparateur bas + coins bas carrés
   (même traitement que le bandeau .abo-entete). Le fond beige de l'univers est
   conservé. */
.reservation-card-new .reservation-header-new {
    border-bottom: 1px solid #ddd !important;
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
    box-shadow: none !important;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 22px;
}
/* Visuel de la formation/session à gauche du titre de la réservation (même
   principe que le logo de formule sur le bandeau d'abonnement). */
.reservation-card-new .reservation-header-new .reservation-header-logo {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
}
.reservation-card-new .reservation-header-new .reservation-header-logo img {
    height: 54px;
    width: 54px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}
.reservation-card-new .reservation-header-new .reservation-title-new {
    flex: 1;
    margin: 0;
}

.reservation-header-new h1 {
    color: white;
    font-size: 1.4em;
    margin: 0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    font-weight: 500;
}

.reservation-title-new {
    color: white;
    font-size: 1.4em;
    margin: 0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    font-weight: 500;
}
/* Sous-titre de formule d'abonnement sous le titre de l'entête (migration 46). */
.reservation-subtitle-new {
    color: white;
    opacity: .9;
    font-size: .95em;
    margin: 4px 0 0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    font-style: italic;
}

/* Ligne numéro + statut */
.reservation-numero-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 20px 30px;
    flex-wrap: wrap;
}

.reservation-numero-label {
    color: #dc3545;
    font-size: 16px;
    font-weight: 700;
}

.reservation-numero-value {
    font-weight: 700;
    font-size: 16px;
    color: #dc3545;
}

.status-badge-new {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 20px;
    border-radius: 25px;
    font-weight: 600;
    font-size: 14px;
}

.status-badge-new.status-en_attente {
    background: var(--badge-en-attente-bg, #fff3cd);
    color: var(--badge-en-attente-color, #856404);
}

.status-badge-new.status-confirmee {
    background: var(--badge-confirmee-bg, #28a745);
    color: var(--badge-confirmee-color, white);
}

.status-badge-new.status-annulee {
    background: var(--badge-annulee-bg, #dc3545);
    color: var(--badge-annulee-color, white);
}

.status-badge-new.status-rejetee {
    background: var(--badge-rejetee-bg, #e67e22);
    color: var(--badge-rejetee-color, white);
}

/* Bloc infos session (fond gris) */
.reservation-info-block {
    background: #f5f5f5;
    padding: 20px 30px 20px 30px;
    margin: 0 20px 20px 20px;
    border-radius: 10px;
}

.reservation-info-block .info-row {
    display: grid;
    grid-template-columns: 50% 20% 30%;
    gap: 20px;
}

.reservation-info-block .info-cell {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.reservation-info-block .info-label {
    color: #888;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 0;
}

.reservation-info-block .info-value {
    color: #2c3e50;
    font-weight: 600;
    font-size: 15px;
}

.reservation-info-block .info-value small {
    font-weight: 400;
    color: #666;
}

/* Ligne pleine largeur pour le lieu */
.reservation-info-block .info-row-full {
    display: block;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #ddd;
}

.reservation-info-block .info-cell-full {
    width: 100%;
}

/* Bloc tarifs */
.reservation-tarifs-block {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #ddd;
}

/* Grille commune pour les deux versions */
.tarifs-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}

.tarif-cell {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
}

.tarif-label {
    color: #888;
    font-size: 13px;
}

.tarif-value {
    color: #2c3e50;
    font-weight: 700;
    font-size: 18px;
    white-space: nowrap;
}

.tarif-value-danger {
    color: #e74c3c;
}

.code-badge-blue {
    background: #e3f2fd;
    color: #1976d2;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 13px;
}

.d-inline {
    display: inline;
}

/* Badge code promo (vert) */
.promo-badge {
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    background: #27ae60;
    color: white;
}

/* Badge parrainage (violet) */
.promo-badge.parrainage-badge {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Version AVEC réduction - 3ème colonne avec sous-lignes */
.tarif-cell-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Couleur réduction (vert) */
.reduction-cell .tarif-value,
.tarif-value.reduction-value {
    color: #27ae60;
}

.tarif-line {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tarif-line .tarif-label {
    min-width: 60px;
}

.tarif-line .tarif-value {
    font-size: 16px;
}

/* Badges de paiement */
.payment-badge {
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.payment-badge.paid {
    background: #28a745;
    color: white;
}

.payment-badge.unpaid {
    background: #ff5722;
    color: white;
}

/* Documents */
.reservation-card-new .reservation-documents {
    padding: 15px 30px;
    border-top: 1px solid #eee;
}

/* Boutons d'action */
.reservation-actions-new {
    display: flex;
    gap: 15px;
    padding: 20px 30px;
    border-top: 1px solid #eee;
    flex-wrap: wrap;
}

.btn-action {
    padding: 12px 25px;
    border-radius: var(--btn-primary-radius, 8px);
    border: var(--btn-primary-border, none);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    text-align: center;
    transition: all 0.2s;
    min-width: 140px;
}

.btn-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn-details {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: var(--btn-primary-radius, 8px);
    border: var(--btn-primary-border, none);
}

.btn-modifier {
    background: #9e9e9e;
    color: white;
    border-radius: var(--btn-secondary-radius, 8px);
    border: var(--btn-secondary-border, none);
}

.btn-payer {
    background: var(--bouton-action-bg, #28a745);
    color: var(--bouton-action-color, white);
    border-radius: var(--btn-action-radius, 8px);
    border: var(--btn-action-border, none);
}

.btn-annuler {
    background: #dc3545;
    color: white;
    border-radius: var(--btn-danger-radius, 8px);
    border: var(--btn-danger-border, none);
}

/* Responsive cartes réservation */
@media (max-width: 900px) {
    .reservation-header-new {
        padding: 20px;
    }
    
    .reservation-title-new {
        font-size: 1.2em;
        text-align: center;
    }
    
    /* Numéro + statut sur une ligne */
    .reservation-numero-row {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        padding: 15px 20px;
    }
    
    .reservation-numero-value {
        font-size: 15px;
    }
    
    .status-badge-new {
        padding: 6px 15px;
        font-size: 13px;
    }
    
    /* Bloc info - labels à gauche */
    .reservation-info-block {
        margin: 0 15px 20px 15px;
        padding: 15px;
    }
    
    .reservation-info-block .info-row {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .reservation-info-block .info-cell {
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 5px;
    }
    
    .reservation-info-block .info-label {
        width: 100%;
        text-align: left;
    }
    
    .reservation-info-block .info-value {
        width: 100%;
        text-align: left;
    }
    
    /* Tarifs responsive - empilés verticalement */
    .tarifs-row {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        padding: 0 10px !important;
    }
    
    .tarif-cell {
        display: grid !important;
        grid-template-columns: auto 1fr 75px !important;
        align-items: center !important;
        padding: 10px 0 !important;
        border-bottom: 1px solid #eee;
        gap: 8px !important;
    }
    
    .tarif-cell .tarif-label {
        text-align: left !important;
    }
    
    .tarif-cell .tarif-value {
        text-align: right !important;
        font-size: 1.1em;
        white-space: nowrap !important;
    }
    
    .tarif-cell .payment-badge,
    .tarif-cell .promo-badge {
        justify-self: start !important;
        margin: 0 !important;
    }
    
    .tarif-cell:last-child,
    .tarif-cell-group {
        border-bottom: none;
    }
    
    .tarif-cell-group {
        gap: 0;
        padding-top: 5px;
    }
    
    .tarif-line {
        display: grid !important;
        grid-template-columns: auto 1fr 75px !important;
        align-items: center !important;
        padding: 8px 0 !important;
        gap: 8px !important;
    }
    
    .tarif-line .tarif-label {
        text-align: left !important;
        min-width: unset !important;
    }
    
    .tarif-line .tarif-value {
        text-align: right !important;
        font-size: 1.1em;
    }
    
    .tarif-line .payment-badge {
        justify-self: start !important;
        margin: 0 !important;
    }
    
    .reservation-tarifs-block {
        padding: 20px;
        max-width: 400px;
        margin: 0 auto;
    }
    
    /* Boutons responsive */
    .reservation-actions-new {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        padding: 15px 20px;
    }
    
    .btn-action {
        width: auto;
        min-width: 140px;
    }
    
    /* Ordre des boutons en mobile */
    .btn-details { order: 1; }
    .btn-payer { order: 2; }
    .btn-modifier { order: 3; }
    .btn-annuler { order: 4; }
    
    /* Meta liste d'attente responsive */
    .la-meta-block {
        padding: 15px 20px;
    }
    
    .la-meta-row {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 10px;
    }
}

.parrainage-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 25px;
    border-bottom: 2px solid #eee;
}

.tab-btn {
    padding: 12px 25px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    color: #666;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
}

.tab-btn.active {
    /* color et border-bottom-color gérés par entete.php via variables CSS */
}

.parrainage-code-section {
    background: linear-gradient(90deg, rgba(255,242,75,1) 0%, rgba(217,47,137,1) 100%, rgba(196,162,180,1) 100%);;
    color: white;
    padding: 25px;
    border-radius: 10px;
    margin-bottom: 30px;
    text-align: center;
}

.code-display {
    background: rgba(255,255,255,0.2);
    padding: 15px 25px;
    border-radius: 8px;
    display: inline-block;
    margin: 15px 0;
}

.code-value {
    font-size: 28px;
    font-weight: bold;
    letter-spacing: 3px;
}

.btn-copy {
    background: white;
    color: var(--couleur-principale, #0d5aa7);
    padding: 10px 25px;
    border: none;
    border-radius: 5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-copy:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

.stat-card {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
}

.stat-number {
    font-size: 36px;
    font-weight: bold;
    color: var(--couleur-principale, #0d5aa7);
    margin-bottom: 5px;
}

.stat-label {
    color: #666;
    font-size: 14px;
}

.parrainage-item {
    background: white;
    border: 1px solid #eee;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 15px;
}

.parrainage-info {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 15px;
}

.filleul-name {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-bottom: 5px;
}

.parrainage-date {
    color: #999;
    font-size: 14px;
}

.badge {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
}

.badge-success {
    background: #d4edda;
    color: #155724;
}

.badge-warning {
    background: #fff3cd;
    color: #856404;
}

.badge-info {
    background: #d1ecf1;
    color: #0c5460;
}

.badge-historique {
    background: #999;
    color: #FFFFFF;
}

/* === PAGE FORMATIONS (formations.php) === */
.tabs {
    display: flex;
    gap: 15px;
    margin-bottom: 30px;
    justify-content: center;
}

.tab,
.tab-btn {
    padding: 12px 30px;
    background: white;
    /* border et color gérés par entete.php via variables CSS */
    text-decoration: none;
    border-radius: 25px;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.3s;
    cursor: pointer;
}

.tab:hover,
.tab-btn:hover,
.tab.active,
.tab-btn.active {
    /* background géré par entete.php via variables CSS */
    color: white;
}

/* Responsive tabs mobile */
@media (max-width: 900px) {
    .tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding: 0 15px;
        margin-left: -15px;
        margin-right: -15px;
        justify-content: center;
    }
    
    .tabs::-webkit-scrollbar {
        display: none;
    }
    
    .tab,
    .tab-btn {
        padding: 10px 20px;
        font-size: 14px;
        white-space: nowrap;
        flex-shrink: 0;
    }
}

.formations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
}

.formation-card {
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    overflow: hidden;
    transition: all 0.3s;
}

.formation-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 20px rgba(102, 126, 234, 0.3);
}

.formation-image {
    width: 100%;
    object-fit: cover;
    background: linear-gradient(90deg, rgba(255,242,75,1) 0%, rgba(217,47,137,1) 100%, rgba(196,162,180,1) 100%);;
}

/* Le corps d'une vignette de la grille de `formations.php` (onglet
   « liste »), a l'interieur de `.formation-card`.

 ⚠ LE FOND ET LE RAYON VIENNENT D'AILLEURS — 12/10/2026. Ils etaient
   ecrits plus bas, dans une regle `.formation-content` orpheline faite pour
   une fiche formation qui n'existe plus. Ils sont rapatries ici, sur la
   seule chose que cette classe habille encore dans cette feuille.
   Le banc a mesure l'ecart : sans eux, deux colonnes de pixels changeaient
   de 3/255 au bas de la vignette — invisible, mais ce n'est pas une raison
   pour laisser l'ecran bouger. */
.formation-content {
    padding: 20px;
    background: white;
    border-radius: 10px;
}

/* Le niveau, au-dessus du titre dans la liste des formations. Discret : c'est
   une étiquette, pas un titre — il annonce sans concurrencer le nom de la
   formation juste en dessous. */
.formation-niveau {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--couleur-secondaire, #6c8299);
}

.formation-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--couleur-principale, #0d5aa7);
    margin-bottom: 10px;
}

.formation-desc {
    color: #666;
    margin-bottom: 15px;
    line-height: var(--line-height, 1.6);
}

.formation-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 15px;
    border-top: 1px solid #eee;
}

.formation-duration,
.formation-price {
    color: var(--couleur-principale, #0d5aa7);
    font-weight: 600;
}

.formation-btn {
    /* background géré par entete.php via variables CSS */
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s;
}

.formation-btn .material-symbols-outlined {
    font-size: 20px;
    color: inherit !important;
}

.formation-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

.calendrier {
    background: white;
    border-radius: 10px;
    padding: 20px;
}

.calendrier-header {
    margin-bottom: 25px;
}

.calendrier-nav {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 20px;
}

.nav-mois {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.mois-titre-simple {
    font-size: var(--taille-h2-dore);
    color: var(--couleur-doree);
    font-weight: var(--graisse-h2-dore);
    line-height: var(--line-height-h2-dore);
    flex: 1;
    text-align: center;
}

.nav-btn {
    background: var(--couleur-boutons);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.nav-btn:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

.nav-btn:active {
    transform: translateY(0);
}

.filtre {
    margin-bottom: 20px;
}

.filtre label {
    display: block;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}

.filtre select {
    width: 100%;
    padding: 12px;
    border: 2px solid #ddd;
    border-radius: 8px;
    font-size: 16px;
    background: white;
    cursor: pointer;
    transition: all 0.3s;
	font-family: "Abel", sans-serif;
	line-height: 1.6;}

.filtre select:focus {
    outline: none;
    border-color: var(--couleur-principale, #0d5aa7);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.calendrier-days-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: 10px;
}

.day-header {
    text-align: center;
    font-weight: 600;
    color: var(--couleur-principale, #0d5aa7);
    padding: 12px;
    font-size: 14px;
    text-transform: uppercase;
}

.calendrier-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

/* Structure par semaine */
.calendrier-semaine {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    position: relative;
}

.day-cell {
    min-height: 80px;
    border: 1px solid #eee;
    padding: 8px;
    background: white;
    position: relative;
    transition: all 0.3s;
}

.day-cell:hover {
    background: #f8f9fa;
}

.day-cell.other-month {
    background: #f8f9fa;
    opacity: 0.5;
}

.day-cell.today {
    background: #fff8e1;
    border-color: #ff9800;
    border-width: 2px;
}

.day-num {
    font-weight: 600;
    color: #333;
    font-size: 14px;
}

/* Badges de session avec fusion - positionnement absolu */
.session-badge-fusion {
    position: absolute;
    top: 35px;
    height: auto;
    min-height: 45px;
    background: #d4edda;
    color: #155724;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    gap: 2px;
    justify-content: center;
    z-index: 10;
    box-sizing: border-box;
    margin: 0 4px;
}

.session-badge-fusion:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 20;
}

.session-badge-fusion.peu-places {
    background: #fff3cd;
    color: #856404;
}

.session-badge-fusion.complet {
    background: #f8d7da;
    color: #721c24;
}

/* Bords pour sessions continues */
.session-badge-fusion.continue-gauche {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: 0;
}

.session-badge-fusion.continue-droite {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    margin-right: 0;
}

.session-titre-fusion {
    font-weight: 600;
    font-size: 12px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Popup de session au clic dans le calendrier (formations.php) —
   anciennement des styles inline dans le JS. */
.session-popup-desc    { color: #666; margin: 15px 0; }
.session-popup-sep     { margin: 20px 0; }
.session-popup-complet { color: #ef5350; font-weight: bold; }
.session-popup-dispo   { color: #4caf50; font-weight: bold; margin-bottom: 10px; }

.session-places-fusion {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    opacity: 0.9;
}

.session-places-fusion .material-symbols-outlined {
    font-size: 14px;
    color: inherit;
}

/* Anciens styles session-badge conservés pour compatibilité */
.session-badge {
    background: #d4edda;
    color: #155724;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 12px;
    margin-bottom: 5px;
    cursor: pointer;
    transition: all 0.3s;
    display: block;
}

.session-badge:hover {
    transform: scale(1.02);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}

.session-badge.peu-places {
    background: #fff3cd;
    color: #856404;
}

.session-badge.complet {
    background: #f8d7da;
    color: #721c24;
}

.session-badge .material-symbols-outlined {
    color: inherit;
    font-size: 14px;
    vertical-align: middle;
}

.legende {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #eee;
    flex-wrap: wrap;
}

.legende-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.legende-color,
.legende-box {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 1px solid #ddd;
}

.legende-box.dispo {
    background: #d4edda;
}

.legende-box.peu {
    background: #fff3cd;
}

.legende-box.complet {
    background: #f8d7da;
}

/* === MODALE === */
.modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    animation: fadeIn 0.3s;
}

.modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background: white;
    border-radius: 10px;
    padding: 30px;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
    animation: slideIn 0.3s;
}

.modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 28px;
    font-weight: bold;
    color: #999;
    cursor: pointer;
    background: none;
    border: none;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s;
}

.modal-close:hover {
    background: #f0f0f0;
    color: #333;
    transform: rotate(90deg);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideIn {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.sessions-mois {
    background: white;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 2px 15px rgba(0,0,0,0.1);
}

.mois-groupe {
    margin-bottom: 40px;
}

.mois-groupe:last-child {
    margin-bottom: 0;
}

.mois-titre {
    font-size: var(--taille-h2-dore);
    color: var(--couleur-doree);
    font-weight: var(--graisse-h2-dore);
    line-height: var(--line-height-h2-dore);
    margin: 0 0 20px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--couleur-doree);
}

/* Classes réutilisables pour titres dorés */
.h2-dore {
    font-size: var(--taille-h2-dore);
    color: var(--couleur-doree);
    font-weight: var(--graisse-h2-dore);
    line-height: var(--line-height-h2-dore);
}

.h3-dore {
    font-size: var(--taille-h3-dore);
    color: var(--couleur-doree);
    font-weight: var(--graisse-h3-dore);
    line-height: var(--line-height-h3-dore);
}

.session-item {
    background: #f0f1f3;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s;
    border: 1px solid #e0e0e0;
}

.session-item:hover {
    transform: translateX(3px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    background: #e8eaed;
}

.session-info {
    flex: 1;
}

.session-info h4 {
    font-size: 18px;
    color: #2c3e50;
    font-weight: bold;
    margin-bottom: 8px;
}

.session-dates {
    color: var(--couleur-principale, #0d5aa7);
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
}

.places-dispo {
    color: #4caf50;
    font-weight: 600;
}

.places-complet {
    color: #ef5350;
    font-weight: 600;
}

.btn-small {
    padding: 8px 15px;
    font-size: 14px;
}

/* === PAGES DETAIL (session_detail.php, formation_detail.php, reservation_detail.php) === */
.session-grid {
    display: grid;
    /* Colonne de droite à 375 px : à 300 px, les informations pratiques
       (durée, horaires, lieu, tarif) se serraient face à une colonne de
       gauche deux fois et demie plus large. */
    grid-template-columns: 1fr 375px;
    gap: 30px;
    align-items: start;
    margin-bottom: 30px;
}

.session-grid-reversed,
.formation-grid,
.reservation-grid {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 30px;
    align-items: start;
}

/* Forcer l'ordre correct pour session-grid (sidebar à droite) */
.session-grid .session-sidebar {
    order: 1;
}

.session-grid .session-main {
    order: 0;
}

/* Grille inversée : sidebar à gauche, contenu à droite */
.session-grid-reversed {
    grid-template-columns: 300px 1fr;
}

.session-grid-reversed .session-sidebar {
    order: -1;
}

/* Visuel mobile/desktop : affichage conditionnel */
.visuel-mobile {
    display: none;
}

.visuel-desktop {
    display: block;
}

/* Responsive pour grille inversée */
@media (max-width: 900px) {
    .session-grid,
    .session-grid-reversed {
        grid-template-columns: 1fr;
        gap: 0;
    }
    
    /* Main en premier, sidebar en dessous (pour les deux layouts) */
    .session-grid .session-main,
    .session-grid-reversed .session-main {
        order: -1;
    }
    
    .session-grid .session-sidebar,
    .session-grid-reversed .session-sidebar {
        order: 0;
    }
    
    /* Visuel : afficher mobile, masquer desktop */
    .visuel-mobile {
        display: block;
        margin-bottom: 20px;
    }
    
    .visuel-mobile img {
        width: 100%;
        border-radius: 10px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    
    .visuel-desktop {
        display: none;
    }
}

/* Petits blocs en 2 colonnes sur tablette uniquement */
@media (min-width: 481px) and (max-width: 900px) {
    .session-sidebar,
    .formation-sidebar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }
    
    /* Visuel en pleine largeur */
    .session-sidebar .info-box-visuel,
    .formation-sidebar .info-box-visuel {
        grid-column: span 2;
    }
    
    /* Formateur et Intervenant côte à côte */
    .session-sidebar .info-box-formateur,
    .formation-sidebar .info-box-formateur,
    .session-sidebar .info-box-intervenant,
    .formation-sidebar .info-box-intervenant {
        grid-column: auto;
    }
    
    /* Tarif et Effectif côte à côte */
    .session-sidebar .price-box,
    .session-sidebar .info-box-effectif,
    .formation-sidebar .price-box,
    .formation-sidebar .info-box-effectif {
        grid-column: auto;
    }
    
    /* Bouton de réservation en pleine largeur (session uniquement) */
    .session-sidebar form,
    .session-sidebar > a.btn,
    .session-sidebar > button.btn,
    .session-sidebar .session-passed-box,
    .session-sidebar .already-reserved,
    .session-sidebar .la-session-status {
        grid-column: span 2;
    }
}

/* Mobile : retour en 1 colonne */
@media (max-width: 480px) {
    .session-sidebar,
    .formation-sidebar {
        display: block;
    }
}

.session-main,
.formation-main,
.reservation-main {
    min-width: 0;
}

.session-sidebar,
.formation-sidebar,
.reservation-sidebar {
    /* sticky retiré pour éviter le défilement derrière */
}

.session-main,
.formation-main,
.reservation-main {
    min-width: 0;
}

.price-box {
    background: linear-gradient(90deg, rgba(255,242,75,1) 0%, rgba(217,47,137,1) 100%, rgba(196,162,180,1) 100%);;
    color: white;
    padding: 25px;
    border-radius: 10px;
    margin-bottom: 20px;
    text-align: center;
}

.price-box-title {
    font-size: 16px;
    margin-bottom: 10px;
    opacity: 0.9;
}

.price-amount {
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 5px;
}

.price-detail {
    font-size: 14px;
    opacity: 0.8;
}

.info-box {
    background: white;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 15px;
}

.info-box-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--couleur-principale, #0d5aa7);
    margin-bottom: 10px;
}

.info-box-content {
    color: #333;
    line-height: var(--line-height, 1.6);
}

/* Visuel de formation dans sidebar */
.info-box-visuel {
    padding: 0;
    overflow: hidden;
}

.info-box-visuel .formation-visuel {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
}

.login-notice {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    color: #856404;
    padding: 15px;
    border-radius: 8px;
    margin-top: 15px;
    text-align: center;
    font-size: 14px;
}

.login-notice a {
    color: var(--couleur-principale, #0d5aa7);
    font-weight: 600;
    text-decoration: none;
}

.login-notice a:hover {
    text-decoration: underline;
}

.session-links {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.session-link {
    display: block;
    color: var(--couleur-principale, #0d5aa7);
    text-decoration: none;
    font-weight: 500;
    padding: 12px 15px;
    background: #f8f9fa;
    border-radius: 8px;
    text-align: center;
    transition: all 0.3s;
}

.session-link:hover {
    background: #e9ecef;
    transform: translateX(-3px);
}

.back-actions {
    margin-top: 30px;
    text-align: center;
}

.reservation-button {
    width: 100%;
    margin-bottom: 15px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.reservation-button .material-symbols-outlined {
    font-size: 20px;
    color: inherit !important;
}

/* === PAGE PRÉSENTATION (presentation.php) === */
.content-section {
    background: white;
    border-radius: 10px;
    padding: 40px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    margin-bottom: 30px;
}

.content-section h2 {
    color: var(--couleur-principale, #0d5aa7);
    font-size: 28px;
    margin-top: 40px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--couleur-principale, #0d5aa7);
}

.content-section h2:first-child {
    margin-top: 0;
}

.content-section h3 {
    color: #333;
    font-size: 22px;
    margin-top: 30px;
    margin-bottom: 15px;
}

.content-section p {
    line-height: var(--line-height, 1.8);
    color: #555;
    margin-bottom: 20px;
    text-align: justify;
}

.content-section ul {
    margin-bottom: 20px;
    padding-left: 25px;
}

.content-section ul li {
    line-height: var(--line-height, 1.8);
    color: #555;
    margin-bottom: 10px;
}

.content-section ul li strong {
    color: #333;
}

.formatrice-card {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 30px;
    border-radius: 10px;
    margin-top: 30px;
    border-left: 5px solid var(--couleur-principale, #0d5aa7);
}

.formatrice-card h3 {
    color: var(--couleur-principale, #0d5aa7);
    margin-top: 0;
}

.formatrice-card p {
    line-height: var(--line-height, 1.8);
    color: #555;
}

.formatrice-card ul {
    margin-top: 20px;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 30px;
}

.value-item {
    background: #f8f9fa;
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    transition: all 0.3s;
}

.value-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 20px rgba(102, 126, 234, 0.2);
}

.value-icon {
    font-size: 48px;
    margin-bottom: 15px;
}

.value-item h4 {
    color: #333;
    font-size: 20px;
    margin-bottom: 15px;
    margin-top: 0;
}

.value-item p {
    color: #666;
    line-height: var(--line-height, 1.6);
    margin: 0;
    text-align: center;
}

.cta-section {
    background: linear-gradient(90deg, rgba(255,242,75,1) 0%, rgba(217,47,137,1) 100%, rgba(196,162,180,1) 100%);;
    color: white;
    padding: 60px 40px;
    border-radius: 10px;
    text-align: center;
    margin-bottom: 30px;
}

.cta-section h2 {
    color: white;
    border-bottom: 2px solid white;
    display: inline-block;
    padding-bottom: 15px;
    margin-bottom: 20px;
}

.cta-section p {
    font-size: 18px;
    margin-bottom: 30px;
    color: white;
    opacity: 0.95;
}

.btn-light {
    background: white !important;
    color: var(--couleur-principale, #0d5aa7) !important;
}

.btn-light:hover {
    background: #f8f9fa !important;
}

.valeurs-section {
    margin-top: 40px;
}

.valeur-item {
    margin-bottom: 25px;
}

.valeur-item h4 {
    color: var(--couleur-principale, #0d5aa7);
    font-size: 20px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Ce bloc portait une dizaine de valeurs écrites en dur. Trois d'entre
   elles — fond, arrondi, ombre — étaient déjà sans effet : les règles
   « Cartes » de l'univers les surchargent en `!important`. Elles sont
   retirées plutôt que laissées à tromper la lecture.

   Ce qui reste ci-dessous n'est plus qu'un REPLI : chaque valeur est
   surchargeable depuis Identité visuelle, et sert seulement tant que le
   réglage correspondant est vide. */
.formation-description,
.session-description {
    padding: 30px;          /* Boîtes > Carte > Espacement */
    margin-bottom: 50px;    /* Boîtes > Bloc descriptif > Espacement */
}

/* Plus de `border-bottom` ici : c'était un second trait sous le titre, qui
   s'ajoutait au liseré des H2 dès qu'on activait celui-ci. Le trait se règle
   désormais au seul endroit prévu — Typographie > Titre H2 > Liseré — et le
   `padding-bottom` qui l'espaçait disparaît avec lui.
   La taille n'est pas reprise non plus : les règles `h2 { … !important }`
   l'imposaient déjà, celle d'ici n'a jamais servi. */
.formation-description h2,
.session-description h2 {
    color: var(--couleur-h2, var(--couleur-principale, #0d5aa7));
    margin-bottom: 20px;    /* Typographie > Titre H2 > Marges */
}

.formation-description p,
.session-description p {
    line-height: var(--line-height, 1.8);
    color: var(--couleur-texte-corps, #333);
    margin-bottom: 15px;
}

.formation-description .formatted-content,
.session-description .formatted-content {
    padding-left: 0;
}

.formation-description ul,
.formation-description ol,
.session-description ul,
.session-description ol {
    padding-left: 20px;
    margin-bottom: 15px;
}

.formation-description li,
.session-description li {
    line-height: var(--line-height, 1.8);
    color: var(--couleur-texte-corps, #333);
}

.formation-info,
.session-info {
    background: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    margin-bottom: 30px;
}

.info-section {
    margin-bottom: 30px;
}

.info-section:last-child {
    margin-bottom: 0;
}

.info-section h2 {
    color: var(--couleur-principale, #0d5aa7);
    font-size: 20px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--couleur-principale, #0d5aa7);
    display: flex;
    align-items: center;
    gap: 10px;
}

.info-section h3 {
    color: #333;
    font-size: 18px;
    margin-bottom: 10px;
    font-weight: 600;
}

.info-section p,
.info-section div {
    color: #555;
    line-height: var(--line-height, 1.6);
    margin-bottom: 8px;
}

.formateur-card,
.intervenant-card {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    border-left: 4px solid var(--couleur-principale, #0d5aa7);
    margin-bottom: 15px;
}

.formateurs-list,
.intervenants-list {
    display: grid;
    gap: 15px;
}

.formateur-name,
.intervenant-name {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.formateur-bio,
.intervenant-bio {
    color: #666;
    font-style: italic;
    line-height: var(--line-height, 1.6);
}

.tarif-info {
    background: linear-gradient(90deg, rgba(255,242,75,1) 0%, rgba(217,47,137,1) 100%, rgba(196,162,180,1) 100%);;
    color: white;
    padding: 25px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.tarif-montant {
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 10px;
}

.tarif-detail {
    font-size: 14px;
    opacity: 0.9;
}

.horaires {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    margin-top: 10px;
}

.horaires-label {
    font-weight: 600;
    color: var(--couleur-principale, #0d5aa7);
    margin-bottom: 5px;
}

.lieu-info {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    margin-top: 10px;
}

.lieu-icon {
    color: var(--couleur-principale, #0d5aa7);
    margin-right: 5px;
}

.places-info {
    background: #d4edda;
    color: #155724;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
}

.places-info.peu-places {
    background: #fff3cd;
    color: #856404;
}

.places-info.complet {
    background: #f8d7da;
    color: #721c24;
}

.session-actions {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    margin-top: 30px;
}

.session-actions .btn {
    flex: 1;
    min-width: 200px;
    text-align: center;
}

.back-link {
    display: inline-block;
    margin-top: 30px;
    color: var(--couleur-principale, #0d5aa7);
    text-decoration: none;
    font-weight: 500;
}

.back-link:hover {
    text-decoration: underline;
}

.retour-btn {
    background: #95a5a6;
    color: white;
    padding: 12px 25px;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s;
    font-weight: 500;
}

.retour-btn:hover {
    background: #7f8c8d;
    transform: translateY(-2px);
}

.sessions-disponibles {
    background: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    margin-top: 30px;
}

.sessions-disponibles h2 {
    color: var(--couleur-principale, #0d5aa7);
    font-size: 24px;
    margin-bottom: 20px;
}

.session-list-item {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s;
}

.session-list-item:hover {
    transform: translateX(5px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.session-list-info h3 {
    color: #333;
    font-size: 16px;
    margin-bottom: 5px;
}

.session-list-date {
    color: var(--couleur-principale, #0d5aa7);
    font-weight: 600;
    margin-bottom: 5px;
}

.session-list-places {
    color: #28a745;
    font-size: 14px;
}

.login-required {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    color: #856404;
    padding: 15px;
    border-radius: 8px;
    margin-top: 20px;
    text-align: center;
}

.login-required a {
    color: var(--couleur-principale, #0d5aa7);
    font-weight: 600;
    text-decoration: none;
}

.login-required a:hover {
    text-decoration: underline;
}

/* ========================================
   PAGE CONTACT - Styles spécifiques
   ======================================== */

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 40px;
}

.contact-info,
.contact-form {
    background: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

.contact-item {
    margin-bottom: 25px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    transition: transform 0.3s, box-shadow 0.3s;
}

.contact-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.contact-icon {
    font-size: 36px;
    margin-bottom: 10px;
}

.contact-title {
    font-size: 18px;
    font-weight: bold;
    color: #2c3e50;
    margin-bottom: 8px;
}

.contact-detail {
    color: #555;
    line-height: var(--line-height, 1.6);
}

.contact-detail a {
    color: var(--couleur-principale, #0d5aa7);
    text-decoration: none;
    font-weight: 500;
}

.contact-detail a:hover {
    text-decoration: underline;
}

.map-container {
    background: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    margin-bottom: 30px;
}

.map-container h2 {
    text-align: center;
    margin-bottom: 20px;
}

.map-placeholder {
    background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
    padding: 100px;
    text-align: center;
    border-radius: 8px;
    color: #6c757d;
    font-size: 18px;
}

/* Responsive pour la page contact */
@media (max-width: 900px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }
    
    .contact-info,
    .contact-form {
        padding: 20px;
    }
    
    .map-placeholder {
        padding: 60px 20px;
    }
}

/* ========================================
   PAGE MODIFIER PROFIL - Styles spécifiques
   ======================================== */

.profile-container {
    max-width: 1140px;
    margin: 0 auto;
}

.profile-card {
    max-width: 1140px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    overflow: hidden;
	padding: 30px;
}

.profile-header {
    background: linear-gradient(90deg, rgba(255,242,75,1) 0%, rgba(217,47,137,1) 100%, rgba(196,162,180,1) 100%);;
    color: white;
    padding: 40px 30px;
    text-align: center;
}

.profile-header h1 {
    margin: 0 0 10px 0;
    font-size: 32px;
}

.profile-header p {
    margin: 0;
    font-size: 16px;
    opacity: 0.9;
}

.profile-card .info-box {
    background: #e3f2fd;
    padding: 20px;
    border-radius: 8px;
    border-left: 4px solid #2196f3;
}

.profile-card .info-box ul {
    margin: 10px 0 0 0;
    padding-left: 20px;
}

.profile-card .info-box ul li {
    margin-bottom: 5px;
}

.form-section {
    padding: 0 20px;
    margin: 30px 0;
}

.section-title {
    font-size: 18px;
    font-weight: bold;
    color: #2c3e50;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #e9ecef;
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-title .material-symbols-outlined {
    font-size: 22px;
}

.section-title-large {
    font-size: 20px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-weight: 600;
    color: var(--couleur-principale, #0d5aa7);
    margin-bottom: 8px;
}

.form-control {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    font-size: 15px;
    transition: border-color 0.3s;
}

.form-control:focus {
    outline: none;
    border-color: var(--couleur-principale, #0d5aa7);
}

.form-control::placeholder {
    color: #bdc3c7;
}

textarea.form-control {
    resize: vertical;
    font-family: inherit;
}

select.form-control {
    padding: 12px 15px;
    font-size: 16px;
    cursor: pointer;
    appearance: none;
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"%3E%3Cpath fill="%23666" d="M6 8L1 3h10z"/%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 35px;
}

.actions {
    padding: 30px;
    background: #f8f9fa;
    display: flex;
    gap: 15px;
    justify-content: center;
}

/* Responsive pour modifier profil */
@media (max-width: 900px) {
    .profile-container {
        padding: 10px;
    }
    
    .profile-header {
        padding: 30px 20px;
    }
    
    .profile-header h1 {
        font-size: 24px;
    }
    
    .form-section {
        padding: 0 20px;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .actions {
        flex-direction: column;
        padding: 20px;
    }
    
    .actions .btn {
        width: 100%;
    }
}

/* ========================================
   PAGE FORMATION DETAIL - Styles spécifiques
   ======================================== */

.formation-main {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 30px;
    margin-bottom: 40px;
}

.formation-sidebar {
    background: white;
    padding: 0;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    position: sticky;
    top: 20px;
    height: fit-content;
}

.formation-image-large {
    width: 100%;
    height: 250px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 80px;
    border-radius: 10px 10px 0 0;
    overflow: hidden;
}

.formation-image-large img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.info-item {
    padding: 20px;
    border-bottom: 1px solid #e9ecef;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.info-item:last-of-type {
    border-bottom: none;
}

.info-label {
    font-size: 12px;
    color: #7f8c8d;
    text-transform: uppercase;
    font-weight: 600;
}

.info-value {
    font-size: 15px;
    color: #2c3e50;
    font-weight: 500;
}

.price-highlight {
    background: linear-gradient(90deg, rgba(255,242,75,1) 0%, rgba(217,47,137,1) 100%, rgba(196,162,180,1) 100%);;
    color: white;
    padding: 25px 20px;
    text-align: center;
    border-radius: 0 0 10px 10px;
}

.price-highlight .price {
    font-size: 32px;
    font-weight: bold;
    margin: 10px 0;
}

/* ⚠ REGLE RETIREE LE 12/10/2026 — elle habillait une mise en page disparue.

     Elle disait `.formation-content { background: white; border-radius: 10px; }`
     et avait ete ecrite pour l'ancienne fiche formation, a cote de
     `.content-section` juste en dessous. Or `formation_detail.php` n'emploie
     plus cette classe nulle part : de tout ce bloc, seul `presentation.php`
     utilise encore `.content-section`.

     Elle n'etait pourtant pas sans effet. Trois choses differentes portent le
     nom `.formation-content` dans cette feuille :
       - le corps d'une vignette de la grille (`formations.php`, plus haut) ;
       - cette regle-ci, orpheline ;
       - le panneau des pages de liste, repris d'`admin/sessions.php`.
     Le panneau ramassait donc un fond blanc et un rayon ecrits pour une
     quatrieme page — et c'est ce fond blanc qui dessinait la carte des pages
     `formations_presentiel.php` et `formations_masterclass_en_ligne.php`.

     Ce fond et ce rayon sont desormais ecrits EXPLICITEMENT sur
     `.formation-groupe-contenu` (plus bas), que ces deux pages portent
     maintenant. L'ecran ne bouge pas ; chaque regle habille ce qu'elle
     nomme. La vignette de `formations.php`, elle, garde son fond blanc par
     `.formation-card` qui l'entoure. */

.content-section {
    padding: 30px;
    border-bottom: 1px solid #e9ecef;
}

.content-section:last-child {
    border-bottom: none;
}

.content-section h2 {
    color: var(--couleur-principale, #0d5aa7);
    font-size: 24px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--couleur-principale, #0d5aa7);
}

.content-section p {
    line-height: var(--line-height, 1.8);
    color: #555;
}

.people-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.people-item {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    border-left: 4px solid #667eea;
}

.people-name {
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 5px;
}

.people-profession {
    color: #7f8c8d;
    font-size: 14px;
}

.sessions-section {
    background: white;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    margin-bottom: 30px;
}

.sessions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.session-card {
    background: white;
    border: 2px solid #e9ecef;
    border-radius: 10px;
    padding: 20px;
    transition: transform 0.3s, box-shadow 0.3s;
}

.session-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

/* =====================================================================
   LE VISUEL ROND D'UNE SESSION
   =====================================================================
   Le pictogramme de la formation dans un disque, barré d'un bandeau en
   diagonale portant la ville. Employé partout où une session est listée.

   Le bandeau est plus large que le disque (`left`/`right` négatifs) et
   c'est le disque qui le rogne — d'où `overflow: hidden` ici, sans quoi
   les deux extrémités dépasseraient au lieu d'être coupées net.
   ===================================================================== */
.session-visuel {
    position: relative;
    flex: 0 0 auto;
    /* Centré dans sa carte plutôt que calé à gauche : les cartes de session
       sont étroites et centrent déjà leur contenu. */
    margin: 0 auto 16px;
    width: var(--session-visuel-taille, 150px);
    height: var(--session-visuel-taille, 150px);
    border-radius: 50%;
    overflow: hidden;
    /* Visible seulement si le pictogramme a un fond transparent. */
    background: var(--formation-couleur, #3788d8);
    background: color-mix(in srgb, var(--formation-couleur, #3788d8) 22%, #ffffff);
}

.session-visuel img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Toutes les valeurs qui suivent viennent de MESURES faites sur le visuel
   fourni par le client (400 px de diamètre) : inclinaison -4,85°, bandeau
   occupant 13 % du diamètre, centré à 13,9 % du bas, capitales à 11 %.
   Elles sont donc exprimées en proportion du diamètre et non en pixels :
   le bandeau garde les mêmes proportions quelle que soit la taille du
   disque. */
.session-visuel-ville {
    position: absolute;
    /* Le bandeau part de la gauche en débordant du disque — qui le rogne —
       et s'arrête peu après le nom, sans atteindre le bord droit. D'où une
       largeur qui suit le contenu (`max-content`) plutôt que deux bords
       fixes : « Lyon » donne un bandeau court, « Montpellier » un bandeau
       long, comme sur le modèle. */
    left: -12.5%;
    right: auto;
    width: max-content;
    max-width: 150%;
    /* La position vient du serveur : un nom long est remonté là où le
       disque est plus large. Repli sur la valeur du modèle. */
    bottom: calc(var(--session-visuel-taille, 150px) * var(--session-visuel-bandeau-bas, .068));
    /* L'inclinaison passe par une variable — elle est reprise telle quelle
       par l'animation de survol plus bas. Écrite en dur aux deux endroits,
       la première retouche de l'angle redresserait le ruban pendant
       l'animation, sans qu'on comprenne pourquoi. */
    --session-visuel-ville-angle: -4.85deg;
    transform: rotate(var(--session-visuel-ville-angle));
    /* Haut, droite, bas, gauche. Le retrait gauche place le texte après le
       bord du disque ; celui de droite est la petite marge après le nom. */
    padding: calc(var(--session-visuel-taille, 150px) * .027)
             calc(var(--session-visuel-taille, 150px) * .035)
             calc(var(--session-visuel-taille, 150px) * .027)
             calc(var(--session-visuel-taille, 150px) * .380);
    background: var(--couleur-principale, #0d5aa7);
    /* Bords légèrement arrondis. Seul celui de DROITE se voit : à gauche le
       bandeau déborde et c'est le disque qui le coupe. */
    border-radius: calc(var(--session-visuel-taille, 150px) * .02);
    color: #ffffff;
    /* Barlow Condensed, demandée par le client et mesurée sur son modèle :
       une police normale rendrait le nom bien plus large que le bandeau. */
    font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    font-size: calc(var(--session-visuel-taille, 150px) * var(--session-visuel-ville-taille, .096));
    font-weight: 700;
    letter-spacing: .04em;
    /* Serré : le bandeau doit épouser la hauteur des capitales, pas celle
       d'une ligne de texte ordinaire. */
    line-height: .82;
    text-align: left;
    text-transform: uppercase;
    /* Un nom de ville ne se coupe pas en deux : s'il est trop long, il
       débordera sous le bandeau plutôt que de passer à la ligne. */
    white-space: nowrap;
    overflow: hidden;
}


/* Le ruban glisse légèrement au survol du disque : vers la gauche, puis vers
   la droite, puis retour. Un mouvement bref — il attire l'œil sur la ville,
   il ne doit pas se faire remarquer plus que ça.

   L'amplitude est une fraction du DIAMÈTRE, comme toutes les mesures de ce
   bandeau : le mouvement garde donc la même allure quelle que soit la taille
   du disque. En pixels fixes, il aurait été discret sur un grand visuel et
   brutal sur un petit.

   `rotate()` est répété à chaque étape : `transform` est une propriété
   unique, et une étape qui ne poserait que `translateX()` effacerait
   l'inclinaison — le ruban se redresserait d'un coup au survol. */
@keyframes ruban-ville-glisse {
    0% {
        transform: translateX(0)
                   rotate(var(--session-visuel-ville-angle, -4.85deg));
    }
    35% {
        transform: translateX(calc(var(--session-visuel-taille, 150px) * -.05))
                   rotate(var(--session-visuel-ville-angle, -4.85deg));
    }
    70% {
        transform: translateX(calc(var(--session-visuel-taille, 150px) * .028))
                   rotate(var(--session-visuel-ville-angle, -4.85deg));
    }
    100% {
        transform: translateX(0)
                   rotate(var(--session-visuel-ville-angle, -4.85deg));
    }
}

/* `focus-within` autant que `hover` : la carte de session est cliquable, et
   un visiteur qui navigue au clavier atteint le lien sans jamais survoler
   quoi que ce soit. */
.session-visuel:hover .session-visuel-ville,
.session-visuel:focus-within .session-visuel-ville,
.session-card:hover .session-visuel .session-visuel-ville {
    animation: ruban-ville-glisse .75s ease-in-out;
}

/* Réglage système « réduire les animations » : le ruban ne bouge pas. Il
   reste parfaitement lisible — l'animation n'apporte rien à l'information. */
@media (prefers-reduced-motion: reduce) {
    .session-visuel:hover .session-visuel-ville,
    .session-visuel:focus-within .session-visuel-ville,
    .session-card:hover .session-visuel .session-visuel-ville {
        animation: none;
    }
}

/* =====================================================================
   « PROCHAINES SESSIONS » — la liste d'une fiche de formation
   =====================================================================
   Deux colonnes, chaque session en deux parties : le visuel rond à
   gauche, le texte à droite. Les règles sont limitées à cette liste
   (`.sessions-grid-prochaines`) : les cartes de session des autres pages
   gardent leur mise en page.
   ===================================================================== */
.sessions-grid-prochaines {
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 28px 40px;
}

.sessions-grid-prochaines .session-card {
    display: flex;
    align-items: center;
    gap: 24px;
    background: none;
    padding: 0;
    box-shadow: none;
    border: 0;
}

/* Le visuel ne se centre plus : il tient sa colonne à gauche. */
.sessions-grid-prochaines .session-visuel {
    --session-visuel-taille: 130px;
    margin: 0;
}

.session-card-texte {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

.session-ville {
    font-weight: 700;
    font-size: 25px;
    color: var(--couleur-titres, #0d5aa7);
}

/* Pas de liseré sous ce titre : il en tracerait un sous chaque session. */
.session-ville::after {
    content: none;
}

.session-dates {
    font-weight: 700;
    font-size: 18px;
    color: var(--couleur-titres, #0d5aa7);
}

.sessions-grid-prochaines .session-status {
    margin: 0;
}

/* Même bouton que sur le schéma des formations : ses règles sont écrites
   une seule fois, plus haut dans cette feuille. */
/* Le sélecteur reprend la grille : la règle groupée des boutons, plus bas
   dans cette feuille, pose `align-self: center` et l'emporterait sur la
   classe seule. */
.sessions-grid-prochaines .session-bouton {
    align-self: flex-start;
    margin-top: 8px;
    text-transform: uppercase;
    cursor: pointer;
    background: none;
}

/* Session complète : le même bouton, mais éteint — gris plein, rien à
   cliquer. Il était bleu plein tant que le bouton d'inscription, lui, était
   détouré : les deux se distinguaient au premier coup d'œil. Depuis que
   « S'inscrire » est plein à son tour, le bleu ne distingue plus rien — d'où
   le gris, qui dit en plus la bonne chose : ce bouton est hors service. */
.session-bouton.est-inerte,
.session-bouton.est-inerte:hover,
.sessions-grid-prochaines .session-bouton.est-inerte,
.sessions-grid-prochaines .session-bouton.est-inerte:hover {
    background: #9aa7b4;
    border-color: #9aa7b4;
    color: #ffffff;
    cursor: default;
}

@media (max-width: 768px) {
    .sessions-grid-prochaines {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .sessions-grid-prochaines .session-visuel {
        --session-visuel-taille: 110px;
    }

    .sessions-grid-prochaines .session-card {
        gap: 16px;
    }
}

.session-date-display {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    color: var(--couleur-principale, #0d5aa7);
    margin-bottom: 15px;
}

.session-date-display .material-symbols-outlined {
    color: var(--couleur-principale, #0d5aa7);
}

.session-status {
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.status-open {
    background: #d4edda;
    color: #155724;
}

.status-low {
    background: #fff3cd;
    color: #856404;
}

.status-full {
    background: #f8d7da;
    color: #721c24;
}

/* Responsive pour formation detail */
@media (max-width: 968px) {
    .formation-main {
        grid-template-columns: 1fr;
    }
    
    .formation-sidebar {
        position: static;
    }
    
    .sessions-grid {
        grid-template-columns: 1fr;
    }
    
    .sessions-section {
        padding: 20px;
    }
}


.material-symbols-outlined {
	vertical-align: top;
}

.timeline-content{
	font-weight: bold;
	color: var(--couleur-principale, #0d5aa7);
}

/* ========================================
   PAGE CHANGER MOT DE PASSE - Styles spécifiques
   ======================================== */

.password-container {
    max-width: 600px;
    margin: 40px auto;
}

.password-card {
    background: white;
    border-radius: 15px;
    padding: 40px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.form-section {
    margin-bottom: 30px;
}

.form-group {
    margin-bottom: 25px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: #2c3e50;
    font-weight: 500;
}

.password-input-wrapper {
    position: relative;
}

.form-control {
    width: 100%;
    padding: 12px 45px 12px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 15px;
    transition: all 0.3s;
}

.form-control:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.toggle-password {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 20px;
    color: #7f8c8d;
    padding: 5px;
}

.toggle-password:hover {
    color: #3498db;
}

.btn {
    display: inline-block;
    padding: 12px 30px;
    /* background géré par entete.php via variables CSS */
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.3s;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.btn-secondary {
    background: #95a5a6;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: var(--btn-secondary-radius, 8px);
    border: var(--btn-secondary-border, none);
}

.btn-secondary .material-symbols-outlined {
    color: inherit !important;
}

.btn-secondary:hover {
    background: #7f8c8d;
}

.alert {
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.alert-danger {
    background: #fee;
    color: #c33;
    border-left: 4px solid #c33;
}

.alert-success {
    background: #e8f5e9;
    color: #2e7d32;
    border-left: 4px solid #2e7d32;
}

.actions {
    display: flex;
    gap: 15px;
    margin-top: 30px;
}

.security-tips {
    background: #fff3cd;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 30px;
    border-left: 4px solid #ffc107;
}

.security-tips h3 {
    color: #2c3e50;
    margin-bottom: 15px;
    font-size: 16px;
}

.security-tips ul {
    margin: 0;
    padding-left: 25px;
    color: #2c3e50;
}

.security-tips li {
    margin-bottom: 8px;
}

.password-strength {
    margin-top: 8px;
    height: 4px;
    background: #e0e0e0;
    border-radius: 2px;
    overflow: hidden;
}

.password-strength-bar {
    height: 100%;
    width: 0%;
    transition: all 0.3s;
    border-radius: 2px;
}

.password-strength-text {
    font-size: 12px;
    margin-top: 5px;
    color: #7f8c8d;
}

@media (max-width: 900px) {
    .actions {
        flex-direction: column;
    }
    
    .btn {
        width: 100%;
        text-align: center;
    }
}

/* =====================================================
   TÉLÉCHARGEMENT DOCUMENTS (compte.php)
   ===================================================== */

.reservation-documents {
    margin: 20px 30px;
    padding: 15px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 8px;
    border-left: 4px solid #667eea;
}

/* Variante orange - Documents à consulter (avant paiement) */
.reservation-documents.to-consult {
    background: #fff8e1;
    border-left: 3px solid #ff9800;
}

.reservation-documents.to-consult .documents-label {
    color: #e65100;
}

.reservation-documents.to-consult .documents-label .material-symbols-outlined {
    color: inherit;
}

.reservation-documents.to-consult .doc-link {
    border-color: #ff9800;
    color: #e65100;
}

.reservation-documents.to-consult .doc-link .material-symbols-outlined {
    color: inherit;
}

.reservation-documents.to-consult .doc-link:hover {
    background: #ff9800;
    color: white;
    border-color: #ff9800;
}

/* Variante rouge - Documents à signer (après paiement) */
.reservation-documents.to-sign {
    background: #fdf2f4;
    border-left: 3px solid #c9365c;
}

.reservation-documents.to-sign .documents-label {
    color: #c9365c;
}

.reservation-documents.to-sign .documents-label .material-symbols-outlined {
    color: inherit;
}

.reservation-documents.to-sign .doc-link {
    border-color: #c9365c;
    color: #c9365c;
}

.reservation-documents.to-sign .doc-link .material-symbols-outlined {
    color: inherit;
}

.reservation-documents.to-sign .doc-link:hover {
    background: #c9365c;
    color: white;
    border-color: #c9365c;
}

/* Variante vert - Documents à télécharger (après signature) */
.reservation-documents.to-download {
    background: #f0fdf4;
    border-left: 3px solid #27ae60;
}

.reservation-documents.to-download .documents-label {
    color: #27ae60;
}

.reservation-documents.to-download .documents-label .material-symbols-outlined {
    color: inherit;
}

.reservation-documents.to-download .doc-link {
    border-color: #27ae60;
    color: #27ae60;
}

.reservation-documents.to-download .doc-link .material-symbols-outlined {
    color: inherit;
}

.reservation-documents.to-download .doc-link:hover {
    background: #27ae60;
    color: white;
    border-color: #27ae60;
}

/* Variante rose - Documents non disponibles (timing, qualité, paiement) */
.reservation-documents.timing-pending {
    background: #fdf2f4;
    border-left: 3px solid #c9365c;
}

.reservation-documents.timing-pending .documents-label {
    color: #c9365c;
    font-weight: 600;
}

.reservation-documents.timing-pending .documents-label .material-symbols-outlined {
    color: inherit;
}

/* Document en attente (timing pas atteint) - non cliquable */
.doc-link.doc-waiting,
.doc-link-btn.doc-waiting {
    border-color: #c9365c;
    color: #c9365c;
    opacity: 0.8;
    cursor: default;
    pointer-events: none;
}

.doc-link.doc-waiting .material-symbols-outlined,
.doc-link-btn.doc-waiting .material-symbols-outlined {
    color: inherit;
}

/* Document avec précision (wrapper) */
.doc-with-precision {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.doc-precision-label {
    font-size: 12px;
    font-weight: 500;
    color: #c9365c;
    opacity: 0.8;
    padding-left: 2px;
}

/* Sous-bloc imbriqué (qualité dans timing) */
.documents-sub-block {
    margin: 10px 0 0 0;
    padding: 12px 15px;
    background: rgba(201, 54, 92, 0.06);
    border-left: 3px solid #c9365c;
    border-radius: 0 8px 8px 0;
}

.documents-sub-label {
    font-weight: 600;
    font-size: 13px;
    color: #c9365c;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.documents-sub-label .material-symbols-outlined {
    font-size: 18px;
    color: #c9365c !important;
}

.doc-box .documents-sub-label .material-symbols-outlined {
    color: #c9365c !important;
}

.documents-sub-block .documents-links,
.documents-sub-block .doc-box-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Document bloqué par qualité (questionnaire/évaluation requis) */
.doc-link.doc-blocked,
.doc-link-btn.doc-blocked {
    border-color: #dc3545;
    color: #dc3545;
    opacity: 0.75;
    cursor: not-allowed;
    pointer-events: none;
}

.doc-link.doc-blocked .material-symbols-outlined,
.doc-link-btn.doc-blocked .material-symbols-outlined {
    color: inherit;
}

.doc-link.doc-blocked small,
.doc-link-btn.doc-blocked small {
    font-size: 11px;
    opacity: 0.85;
}

/* Conteneur des documents */
.documents-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin: 20px 30px;
}

.documents-container .reservation-documents {
    margin: 0;
}

.documents-label {
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 10px;
    font-size: 14px;
}

.documents-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.doc-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 12px;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    color: #495057;
    text-decoration: none;
    font-size: 13px;
    transition: all 0.2s ease;
}

.doc-link:hover {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

@media (max-width: 900px) {
    .documents-links {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .doc-link {
        justify-content: center;
        width: auto;
    }
}

/* =====================================================
   PAIEMENT STRIPE (reservation_detail.php)
   ===================================================== */

/* Bouton payer */
.payment-action {
    margin-top: 25px;
    padding: 25px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 12px;
    text-align: center;
}

.payment-action p {
    margin: 0 0 15px 0;
    color: #2c3e50;
}

.payment-action .payment-info {
    margin: 15px 0 0 0;
    font-size: 12px;
    color: #7f8c8d;
}

/* `.btn-success` n'est PLUS peint ici (25/08/2026).

   Il l'était en dur — dégradé #27ae60 → #2ecc71, plus une élévation et une
   ombre verte au survol — alors qu'il n'appartenait à aucune famille de
   l'identité visuelle. La règle générale des boutons de `entete.php` lui
   posait donc, par-dessus, le fond et le liseré bleus des boutons
   principaux : le fond bleu passait sous le dégradé vert, le liseré bleu
   restait visible. D'où le bouton panaché.

   Il a maintenant sa propre famille, « Boutons succès », réglable dans
   Identité visuelle → Éléments interactifs. `entete.php` en est la seule
   source, comme pour `.btn-valider` et `.btn-danger`.

   Les replis de cette famille reprennent le vert historique (#27ae60) :
   tant que rien n'est réglé, l'aspect ne change pas. */

.btn-large {
    padding: 15px 30px;
    font-size: 16px;
}

/* Info box solde */
.payment-info-box {
    margin-top: 20px;
    padding: 20px;
    background: #fff3cd;
    border-left: 4px solid #f39c12;
    border-radius: 0 8px 8px 0;
}

.payment-info-box h3 {
    margin: 0 0 10px 0;
    color: #856404;
    display: flex;
    align-items: center;
    gap: 8px;
}

.payment-info-box p {
    margin: 0;
    color: #856404;
}

/* Formation réglée */
.payment-complete {
    margin-top: 20px;
    padding: 20px;
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    border-radius: 8px;
    text-align: center;
    color: #155724;
}

.payment-complete .material-symbols-outlined {
    font-size: 40px;
    color: #27ae60;
}

.payment-complete p {
    margin: 10px 0 0 0;
    font-weight: 600;
}

/* Ligne total */
.payment-row.total {
    border-top: 2px solid #dee2e6;
    margin-top: 10px;
    padding-top: 15px;
    font-weight: 600;
}

/* Bouton annulation */
.btn-danger {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    color: white;
    border-radius: var(--btn-danger-radius, 8px);
    border: var(--btn-danger-border, none);
}

.btn-danger:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3);
    color: white;
}

.btn-disabled {
    background: #bdc3c7;
    color: #7f8c8d;
    cursor: not-allowed;
    pointer-events: none;
}

/* Info annulation */
.annulation-info {
    margin-top: 20px;
    padding: 15px 20px;
    background: #f8f9fa;
    border-radius: 8px;
    color: #7f8c8d;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.annulation-info .material-symbols-outlined {
    color: #f39c12;
}

/* Déjà réservé (session_detail.php) */
.already-reserved {
    text-align: center;
    padding: 25px;
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    border-radius: 12px;
    margin-top: 15px;
}

/* L'icône « déjà réservé » prend la couleur de fond du bouton succès qui
   se trouve juste en dessous : les deux disent la même chose, ils doivent
   se répondre. Elle suit donc le réglage « Boutons succès » de l'identité
   visuelle, avec le vert historique en repli.

   Elle sortait BLEUE jusqu'au 25/08/2026 : la grande règle des icônes de
   `entete.php` — celle qui peint toutes les icônes Material à la couleur
   des titres — l'emportait, avec son `!important` et sa spécificité
   énorme (une quarantaine de `:not()`). Le `#27ae60` écrit ici n'avait
   aucune chance. La correction est dans `entete.php` : `.already-reserved
   .material-symbols-outlined` a rejoint la liste des exclusions. */
.already-reserved .material-symbols-outlined {
    font-size: 48px;
    color: var(--bouton-succes-bg, #27ae60);
}

.already-reserved p {
    margin: 15px 0;
    color: #155724;
}

.already-reserved .btn {
    margin-top: 10px;
}

/* ===== BLOCS DOCUMENTS (reservation_detail, compte, paiement_succes) ===== */
.documents-boxes {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.doc-box {
    padding: 15px;
    border-radius: 8px;
}

/* Bloc orange - Documents à consulter (avant paiement) */
.doc-box.to-consult {
    background: #fff8e1;
    border-left: 3px solid #ff9800;
}

.doc-box.to-consult .doc-box-title {
    color: #e65100;
}

.doc-box.to-consult .doc-box-title .material-symbols-outlined {
    color: inherit;
}

.doc-box.to-consult .doc-link-btn {
    border-color: #ff9800;
    color: #e65100;
}

.doc-box.to-consult .doc-link-btn .material-symbols-outlined {
    color: inherit;
}

.doc-box.to-consult .doc-link-btn:hover {
    background: #ff9800;
    color: white;
}

/* Bloc rouge - Documents à signer (après paiement, avant signature) */
.doc-box.to-sign {
    background: #fdf2f4;
    border-left: 3px solid #c9365c;
}

.doc-box.to-sign .doc-box-title {
    color: #c9365c;
}

.doc-box.to-sign .doc-box-title .material-symbols-outlined {
    color: inherit;
}

.doc-box.to-sign .doc-link-btn {
    border-color: #c9365c;
    color: #c9365c;
}

.doc-box.to-sign .doc-link-btn .material-symbols-outlined {
    color: inherit;
}

.doc-box.to-sign .doc-link-btn:hover {
    background: #c9365c;
    color: white;
}

/* Bloc vert - Documents à télécharger (après signature) */
.doc-box.to-download {
    background: #f0fdf4;
    border-left: 3px solid #27ae60;
}

.doc-box.to-download .doc-box-title {
    color: #27ae60;
}

.doc-box.to-download .doc-box-title .material-symbols-outlined {
    color: inherit;
}

.doc-box.to-download .doc-link-btn {
    border-color: #27ae60;
    color: #27ae60;
}

.doc-box.to-download .doc-link-btn .material-symbols-outlined {
    color: inherit;
}

.doc-box.to-download .doc-link-btn:hover {
    background: #27ae60;
    color: white;
}

/* Bloc rose - Documents non disponibles (timing, qualité, paiement) */
.doc-box.timing-pending {
    background: #fdf2f4;
    border-left: 3px solid #c9365c;
}

.doc-box.timing-pending .doc-box-title {
    color: #c9365c;
}

.doc-box.timing-pending .doc-box-title .material-symbols-outlined {
    color: inherit;
}

.doc-box.timing-pending .doc-link-btn {
    border-color: #c9365c;
    color: #c9365c;
    opacity: 0.8;
    cursor: default;
    pointer-events: none;
}

/* Titre et liens des blocs */
.doc-box-title {
    font-weight: 600;
    margin-bottom: 12px;
    font-size: 14px;
}

.doc-box-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.doc-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid;
    transition: all 0.2s;
}

.doc-link-btn:hover {
    transform: translateY(-1px);
}

.doc-link-btn .material-symbols-outlined {
    font-size: 18px;
    color: inherit;
}

/* Responsive blocs documents */
@media (max-width: 600px) {
    .doc-box {
        min-width: 100%;
    }
}

/* =====================================================
   PAGE ANNULATION RÉSERVATION (annuler_reservation.php)
   ===================================================== */

/* Section dates réservation/annulation */
.dates-annulation-section {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    padding: 0 0 20px 0;
}

.dates-annulation-section .date-block {
    flex: 1;
    min-width: 200px;
}

.dates-annulation-section .date-block-label {
    font-size: 12px;
    color: #999;
    margin-bottom: 5px;
}

.dates-annulation-section .date-block-value {
    font-size: 14px;
    font-weight: 600;
    color: #2c3e50;
}

/* Section info remboursement */
.refund-info-section {
    padding: 20px 0;
}

.refund-box {
    padding: 15px 20px;
    border-radius: 0 8px 8px 0;
}

.refund-box.success {
    background: #d4edda;
    border-left: 4px solid #27ae60;
}

.refund-box.warning {
    background: #fff3cd;
    border-left: 4px solid #f39c12;
}

.refund-box strong {
    margin-bottom: 8px;
    color: #2c3e50;
}

.refund-box strong .material-symbols-outlined {
    color: inherit;
}

.refund-box p {
    margin: 0;
    color: #2c3e50;
}

/* Section raison annulation */
.raison-annulation-section {
    padding: 20px 0 0 0;
}

.raison-annulation-section label {
    display: block;
    margin-bottom: 10px;
    font-weight: 600;
    color: #2c3e50;
}

.raison-annulation-section textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    resize: vertical;
    min-height: 80px;
    font-family: inherit;
    font-size: 14px;
    box-sizing: border-box;
}

.raison-annulation-section textarea:focus {
    outline: none;
    border-color: #3498db;
}

/* Responsive page annulation */
@media (max-width: 600px) {
    .dates-annulation-section {
        flex-direction: column;
        gap: 15px;
        padding: 0 0 15px 0;
    }
    
    .refund-info-section {
        padding: 15px 0;
    }
    
    .raison-annulation-section {
        padding: 15px 0 0 0;
    }
}

/* =====================================================
   PAGE DETAIL RESERVATION (reservation_detail.php)
   ===================================================== */

/* Container principal */
.detail-container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 20px;
}

/* Section documents */
.documents-section {
    max-width: 1140px;
    background: white;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    margin-bottom: 25px;
    padding: 25px 30px;
}

.documents-section-title {
    color: var(--couleur-principale, #0d5aa7);
    font-size: 1.3em;
    margin: 0 0 5px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.documents-section-title img {
    width: 24px;
    height: 24px;
}

.documents-section hr {
    border: none;
    border-top: 1px solid #eee;
    margin: 15px 0 20px 0;
}

.documents-intro {
    color: #666;
    margin-bottom: 20px;
    line-height: var(--line-height, 1.6);
}

/* Message signature confirmée */
.signature-confirmed {
    background: #d4edda;
    border: 1px solid #28a745;
    border-radius: 10px;
    padding: 15px 20px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.signature-confirmed-icon {
    width: 40px;
    height: 40px;
    background: #28a74520;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.signature-confirmed-icon .material-symbols-outlined {
    color: #28a745;
    font-size: 24px;
}

.signature-confirmed-text strong {
    color: #155724;
    display: block;
}

.signature-confirmed-text small {
    color: #155724;
    opacity: 0.8;
}

/* Section Détail des règlements */
.reglements-section {
    max-width: 1140px;
    background: white;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    margin-bottom: 25px;
    padding: 25px 30px;
}

.reglements-section-title {
    color: var(--couleur-principale, #0d5aa7);
    font-size: 1.3em;
    margin: 0 0 5px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.reglements-section hr {
    border: none;
    border-top: 1px solid #eee;
    margin: 15px 0 20px 0;
}

.reglements-empty {
    color: #999;
    font-style: italic;
    text-align: center;
    padding: 20px 0;
}

.reglements-table {
    width: 100%;
    border-collapse: collapse;
}

.reglements-table th,
.reglements-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #eee;
}

.reglements-table th {
    background: #f8f9fa;
    color: #666;
    font-weight: 600;
    font-size: 0.9em;
    text-transform: uppercase;
}

.reglements-table td {
    color: #333;
}

.reglements-table .text-right {
    text-align: right;
}

.reglements-table .paiement-notes {
    color: #888;
    font-style: italic;
    font-size: 0.85em;
}

.reglements-table tfoot .total-row {
    background: #f0f9f0;
}

.reglements-table tfoot .total-row td {
    border-bottom: none;
    color: #28a745;
}

.reglements-table tfoot .reste-row {
    background: #fff5f5;
}

.reglements-table tfoot .reste-row td {
    border-bottom: none;
    color: #dc3545;
}

/* Section Historique */
.historique-section {
    max-width: 1140px;
    background: white;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    margin-bottom: 25px;
    padding: 25px 30px;
}

.historique-section-title {
    color: var(--couleur-principale, #0d5aa7);
    font-size: 1.3em;
    margin: 0 0 5px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.historique-section hr {
    border: none;
    border-top: 1px solid #eee;
    margin: 15px 0 20px 0;
}

.historique-item {
    color: #666;
    line-height: var(--line-height, 1.8);
}

.historique-item strong {
    color: #c9365c;
}

/* Encart paiement */
.payment-cta-box {
    background: #f5f5f5;
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    margin: 0 0 20px 0;
}

.payment-cta-box h3 {
    color: #2c3e50;
    margin: 0 0 20px 0;
    font-size: 1.1em;
}

.payment-cta-box .btn-payer-large {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 30px;
    background: var(--couleur-inscription, #28a745);
    color: var(--couleur-inscription-texte, white);
    border: var(--btn-inscription-border, none);
    border-radius: var(--btn-inscription-radius, 8px);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s;
}

.payment-cta-box .btn-payer-large:hover {
    filter: brightness(0.9);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
}

.payment-cta-box .btn-payer-large .material-symbols-outlined {
    font-size: 20px;
    color: var(--couleur-inscription-texte, white);
}

.payment-cta-box .payment-secure {
    color: #888;
    font-size: 13px;
    margin-top: 15px;
}

/* Ligne meta liste d'attente (POSITION / INSCRIT LE / CANAL) */
.la-meta-block {
    padding: 20px 30px;
    border-top: 1px solid #e5e7eb;
}

.la-meta-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}

.la-meta-cell {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* Boutons d'action - detail et annulation */
.action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 30px;
}

.btn-action-detail {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 25px;
    border-radius: 8px;
    font-family: inherit;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.2s;
    border: none;
    cursor: pointer;
}

.btn-action-detail:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn-retour {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: var(--btn-primary-radius, 8px);
    border: var(--btn-primary-border, none);
}

.btn-annuler-resa {
    background: #dc3545;
    color: white;
    border-radius: var(--btn-danger-radius, 8px);
    border: var(--btn-danger-border, none);
}

/* Badges statut liste d'attente (réutilise .status-badge-new) */
.la-badge-row {
    justify-content: center;
}

/* Statut liste d'attente sur session_detail */
.la-session-status {
    display: flex;
    flex-direction: column;
}

/* Bouton inscription liste d'attente */
.btn.btn-liste-attente {
    background: #6366f1 !important;
    border-color: #6366f1 !important;
    color: white !important;
}

.btn.btn-liste-attente:hover {
    background: #4f46e5 !important;
}

/* Messages page liste_attente_action */
.la-action-message {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 20px 30px;
    border-top: 1px solid #e5e7eb;
}

.la-action-message .material-symbols-outlined {
    font-size: 28px;
    flex-shrink: 0;
}

.la-action-message p {
    margin: 0;
    padding-top: 3px;
}

.la-action-message-success .material-symbols-outlined {
    color: #28a745 !important;
}

.la-action-message-danger .material-symbols-outlined {
    color: #dc3545 !important;
}

.la-action-message-info .material-symbols-outlined {
    color: #6c757d !important;
}

.la-action-note {
    padding: 10px 30px 0;
    font-size: 14px;
    color: #6c757d;
    font-style: italic;
}

.la-inscrit-btn {
    color: var(--price-box-bg) !important;
    font-weight: 700;
}

.la-inscrit-btn .material-symbols-outlined {
    font-weight: var(--info-box-title-weight) !important;
}

.la-voir-btn {
    text-align: center;
    justify-content: center;
}

/* Modale inscription liste d'attente */
.la-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.la-modal-overlay.active {
    display: flex;
}
.la-modal {
    background: #fff;
    border-radius: 16px;
    width: 100%;
    max-width: 480px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    animation: laModalIn 0.25s ease-out;
    overflow: hidden;
}
@keyframes laModalIn {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
.la-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid #eee;
}
.la-modal-titre {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    color: #5b21b6;
    margin: 0;
}
.la-modal-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    color: #888;
    transition: all 0.15s;
}
.la-modal-close:hover {
    background: #f0f0f0;
    color: #333;
}
.la-modal-body {
    padding: 22px;
}
.la-modal-footer {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    align-items: center;
    padding: 16px 22px;
    border-top: 1px solid #eee;
    background: #fafafa;
}
.la-modal-footer .btn-liste-attente {
    margin-top: 0;
}
.la-option-group {
    margin-bottom: 20px;
}
.la-option-group:last-child {
    margin-bottom: 0;
}
.la-option-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 13px;
    color: #4a4a4a;
    margin-bottom: 10px;
}
.la-option-label .material-symbols-outlined {
    font-size: 18px;
    color: #7c3aed;
}
.la-radio-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.la-radio-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 2px solid #e0d5f5;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    color: #555;
    transition: all 0.15s;
    background: #fff;
}
.la-radio-item:hover {
    border-color: #a78bfa;
    background: #faf8ff;
}
.la-radio-item input[type="radio"] {
    display: none;
}
.la-radio-item:has(input:checked) {
    border-color: #7c3aed;
    background: #ede9fe;
    color: #5b21b6;
    font-weight: 600;
}
.la-radio-item:has(input:checked) .la-radio-icon {
    color: #7c3aed;
}
.la-radio-icon {
    font-size: 18px;
    color: #999;
    transition: color 0.15s;
}
.la-checkbox-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: 13px;
    color: #444;
    padding: 10px 12px;
    background: #fff;
    border: 2px solid #e0d5f5;
    border-radius: 8px;
    transition: all 0.15s;
}
.la-checkbox-item:hover {
    border-color: #a78bfa;
}
.la-checkbox-item:has(input:checked) {
    border-color: #7c3aed;
    background: #ede9fe;
}
.la-checkbox-item input[type="checkbox"] {
    margin-top: 2px;
    accent-color: #7c3aed;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.la-checkbox-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    line-height: 1.4;
}
.la-checkbox-help {
    font-size: 11px;
    color: #888;
    line-height: 1.4;
}
.la-info-message {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
    background: #fef3c7;
    border: 1px solid #fbbf24;
    border-radius: 8px;
    font-size: 12px;
    color: #92400e;
    line-height: 1.5;
}
.la-info-message .material-symbols-outlined {
    font-size: 18px;
    color: #d97706;
    flex-shrink: 0;
    margin-top: 1px;
}
.la-sessions-liste {
    margin-top: 12px;
    padding: 10px 14px;
    background: #f0edfa;
    border-radius: 8px;
}
.la-sessions-liste-titre {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.la-session-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #444;
    padding: 5px 0;
}
.la-session-item .material-symbols-outlined {
    font-size: 16px;
    color: #7c3aed;
}
.la-session-places {
    font-size: 11px;
    background: #d1fae5;
    color: #065f46;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: auto;
    font-weight: 600;
}
.la-session-complet {
    font-size: 11px;
    background: #fee2e2;
    color: #991b1b;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: auto;
    font-weight: 600;
}

@media (max-width: 480px) {
    .la-modal {
        max-width: 100%;
        border-radius: 12px;
    }
    .la-radio-group {
        flex-direction: column;
    }
}

.status-badge-new.status-la-en_attente {
    background: #e8f0fe;
    color: #1a73e8;
}

.status-badge-new.status-la-notifie {
    background: #fef3e0;
    color: #e67e22;
}

.status-badge-new.status-la-convertie {
    background: #28a745;
    color: white;
}

.status-badge-new.status-la-expiree,
.status-badge-new.status-la-annulee {
    background: #dc3545;
    color: white;
}

.btn-contact {
    background: #6c757d;
    color: white;
    border-radius: var(--btn-secondary-radius, 8px);
    border: var(--btn-secondary-border, none);
}

.btn-confirmer-annulation {
    background: #dc3545;
    color: white;
    border-radius: var(--btn-danger-radius, 8px);
    border: var(--btn-danger-border, none);
}

.btn-valider {
    background: var(--bouton-action-bg, #27ae60);
    color: var(--bouton-action-color, white);
    border-radius: var(--btn-action-radius, 8px);
    border: var(--btn-action-border, none);
}

.btn-valider:hover {
    background: var(--bouton-action-bg-hover, #219a52);
}

/* Bouton payer acompte (couleur connexion) */
/* Les trois boutons de paiement — `.btn-total`, `.btn-acompte`, `.btn-solde`
   — ne sont PLUS peints ici (25/08/2026).

   Ils formaient un petit désordre à eux seuls :
     - `.btn-total` portait un vert #27ae60 écrit en dur, en !important ;
     - `.btn-acompte` et `.btn-solde` empruntaient leurs couleurs à la
       famille CONNEXION (`--couleur-connexion`), si bien que changer la
       couleur du bouton « Se connecter » repeignait vos boutons de
       paiement, sans que rien ne l'annonce ;
     - les trois lisaient `--btn-connexion-radius` et `--btn-connexion-border`,
       deux variables que `entete.php` n'émet nulle part : c'était donc
       toujours le repli (6px / none) qui s'appliquait, et l'arrondi était
       en pratique impossible à régler.

   Ils ont maintenant leur famille, « Boutons de paiement », dans
   Identité visuelle → Éléments interactifs. `entete.php` en est la seule
   source, comme pour `.btn-valider`, `.btn-danger` et `.btn-success`.

   Le `filter: brightness(0.9)` du survol est parti lui aussi (25/08/2026).
   Il avait un sens quand le survol se contentait d'assombrir la couleur du
   repos. Maintenant que la famille porte une VRAIE couleur de survol, ce
   filtre l'assombrissait à son tour : un survol réglé en blanc sortait en
   gris (#ffffff × 0,9 = #e6e6e6). C'est ce fond grisâtre qu'on voyait sur
   le bouton « Payer ». La couleur de survol s'applique désormais telle
   qu'elle est réglée. */

@media (max-width: 600px) {
    .detail-container {
        padding: 10px;
    }
    
    .documents-section,
    .historique-section {
        padding: 20px 15px;
    }
    
    .action-buttons {
        flex-direction: column;
    }
    
    .btn-action-detail {
        justify-content: center;
    }
}

/* =========================================
   PAGE PAIEMENT SUCCES
   ========================================= */

.payment-success-box {
    background: #f5f5f5;
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    margin: 20px 20px;
}

.payment-success-icon {
    width: 60px;
    height: 60px;
    background: #28a745;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
}

.payment-success-icon .material-symbols-outlined {
    color: white;
    font-size: 32px;
}

.payment-success-box h3 {
    color: #28a745;
    margin: 0 0 10px 0;
    font-size: 1.4em;
}

.payment-success-box .email-info {
    color: #666;
    font-size: 14px;
}

.payment-success-box .email-info strong {
    color: #2c3e50;
}

/* Style pour le contenu paiement confirmé dans la nouvelle structure */
.payment-success-content {
    text-align: center;
    padding: 20px 0;
}

.payment-success-content p {
    margin: 0 0 15px 0;
    color: #2c3e50;
}

.payment-success-content p strong {
    color: #28a745;
    font-size: 1.2em;
}

.payment-success-content .email-info {
    color: #666;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.payment-success-content .email-info .material-symbols-outlined {
    color: #28a745;
    font-size: 20px;
}

.payment-success-content .email-info strong {
    color: #2c3e50;
}

.payment-success-content .refund-info-section {
    text-align: left;
}

/* =========================================
   PAGE SIGNATURE CONTRAT
   ========================================= */

.page-header-gradient {
    background: linear-gradient(135deg, var(--color-primary, #667eea) 0%, var(--color-secondary, #764ba2) 100%);
    padding: 40px 20px;
    text-align: center;
    color: white;
    margin-bottom: 30px;
    border-radius: 20px;
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 10px 40px rgba(102, 126, 234, 0.2);
}

.page-header-gradient h1 {
    font-size: 2em;
    margin-bottom: 10px;
    font-weight: 400;
}

.page-header-gradient p {
    font-size: 1em;
    opacity: 0.9;
}

.signature-instruction {
    padding: 0px 0 20px 0;
    margin: 0px 0px 20px;
    font-size: 1.1em;
    color: #2c3e50;
    border-bottom: 1px solid #eee;
}

.step-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: #DC3545 !important;
    color: white !important;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 700;
    margin: 0 5px;
    vertical-align: middle;
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
}

.signature-content-wrapper {
    max-width: 1140px;
    background: white;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    padding: 25px;
    margin-bottom: 25px;
}

/* Options de sélection de session */
.sessions-list {
    margin-bottom: 25px;
}

.session-option {
    display: block;
    padding: 15px 20px;
    background: #f8f9fa;
    border-radius: 10px;
    margin-bottom: 10px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.session-option:hover {
    border-color: var(--couleur-principale, #0d5aa7);
    background: #fff;
}

.session-option input[type="radio"] {
    margin-right: 12px;
    accent-color: var(--couleur-principale, #0d5aa7);
}

.session-option input[type="radio"]:checked + .session-option-content {
    color: var(--couleur-principale, #0d5aa7);
}

.session-option:has(input:checked) {
    border-color: var(--couleur-principale, #0d5aa7);
    background: #fff;
}

.session-option-content {
    display: inline-block;
}

.session-option-content strong {
    display: block;
    margin-bottom: 5px;
    color: #2c3e50;
}

.session-option-content .places-dispo {
    color: #666;
    font-size: 14px;
}

@media (max-width: 900px) {
    .page-header-gradient {
        padding: 30px 15px;
        margin: 0 10px 20px 10px;
        border-radius: 15px;
    }
    
    .page-header-gradient h1 {
        font-size: 1.5em;
    }
    
    .signature-instruction {
        padding: 10px 0 15px 0;
        font-size: 1em;
    }
    
    .signature-content-wrapper {
        padding: 15px;
    }
}

/* =========================================
   PAGE PAIEMENT ECHEC
   ========================================= */

.echec-message-section {
    background: #f5f5f5;
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    margin: 20px 20px;
}

.echec-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.echec-icon .material-symbols-outlined {
    font-size: 36px;
    color: white;
}

.echec-message-section h2 {
    color: #e74c3c;
    font-size: 1.5rem;
    margin-bottom: 8px;
    font-weight: 600;
}

.echec-message-section p {
    color: #7f8c8d;
    font-size: 0.95rem;
}

.causes-list {
    list-style: none;
    padding: 0;
    margin: 10px 0 0 0;
}

.causes-list li {
    padding-left: 20px;
    position: relative;
    color: #666;
}

.causes-list li::before {
    content: "•";
    position: absolute;
    left: 5px;
    color: #f39c12;
}

.btn-payer {
    background: var(--bouton-action-bg, #667eea);
    color: var(--bouton-action-color, white);
}

.btn-payer:hover {
    background: var(--bouton-action-bg-hover, #764ba2);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.echec-info-section {
    padding: 20px 0 0 0;
    text-align: left;
}

.echec-box.warning {
    background: #fff3cd;
    border-left: 4px solid #f39c12;
    padding: 15px 20px;
    border-radius: 0 8px 8px 0;
}

/* ===========================================
   QUESTIONNAIRE DE SATISFACTION
   À ajouter dans style.css
   =========================================== */

/* Questionnaire non complété - style rose comme to-sign */
.doc-link.questionnaire-pending,
.doc-link-btn.questionnaire-pending {
    border-color: #c9365c !important;
    color: #c9365c !important;
}

.doc-link.questionnaire-pending:hover,
.doc-link-btn.questionnaire-pending:hover {
    background: #c9365c !important;
    color: white !important;
    border-color: #c9365c !important;
}

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

/* Info block sans fond gris */
.reservation-info-block {
    padding: 20px 30px;
    background: transparent;
}

.info-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.info-cell {
    min-width: 150px;
}

.info-cell .info-label {
    font-size: 0.75rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
    display: block;
}

.info-cell .info-value {
    /* 0.95rem était une valeur en dur, sans rapport avec la taille de texte
       réglée dans l'identité visuelle : le résumé de réservation s'écrivait
       plus petit que le reste du site, quel que soit le réglage. */
    font-size: var(--taille-texte, 1rem);
    color: #333;
    font-weight: 500;
}

/* Sections du questionnaire */
.section-card {
    background: white;
    border-radius: 12px;
    margin-bottom: 25px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    overflow: hidden;
}

.section-card .section-title {
    background: #f8f9fa;
    padding: 15px 20px;
    font-weight: 600;
    color: var(--couleur-principale, #0d5aa7);
    font-size: 1.3em;
    border-bottom: 1px solid #eee;
}

.question-item {
    padding: 20px;
    border-bottom: 1px solid #f0f0f0;
}

.question-item:last-child {
    border-bottom: none;
}

.question-text {
    font-weight: 500;
    margin-bottom: 15px;
    color: #333;
}

.question-text .required {
    color: #c9365c;
    margin-left: 5px;
}

/* Grille satisfaction avec remarques */
.satisfaction-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.satisfaction-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.satisfaction-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    background: #f8f9fa;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    border: 2px solid transparent;
}

.satisfaction-option:hover {
    background: #fff5f7;
    border-color: #f0c0cc;
}

.satisfaction-option input {
    display: none;
}

.satisfaction-option input:checked + .option-content {
    color: #c9365c;
    font-weight: 600;
}

.satisfaction-option:has(input:checked) {
    background: #fff5f7;
    border-color: #c9365c;
}

.option-checkbox {
    width: 20px;
    height: 20px;
    border: 2px solid #ddd;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.satisfaction-option:has(input:checked) .option-checkbox {
    background: #c9365c;
    border-color: #c9365c;
}

.satisfaction-option:has(input:checked) .option-checkbox::after {
    content: '✓';
    color: white;
    font-size: 14px;
}

.remarque-field {
    display: flex;
    flex-direction: column;
}

.remarque-field label {
    font-size: 1rem;
    color: #333;
    font-weight: 500;
    margin-bottom: 8px;
}

.remarque-field textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    resize: vertical;
    min-height: 80px;
    font-family: inherit;
    font-size: 1rem;
}

.remarque-field textarea:focus {
    outline: none;
    border-color: #c9365c;
}

/* Note 1 à 10 */
.note-options {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.note-option {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    border: 2px solid #ddd;
    border-radius: 50%;
    cursor: pointer;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.2s;
}

.note-option:hover {
    border-color: #c9365c;
    background: #fff5f7;
}

.note-option input {
    display: none;
}

.note-option:has(input:checked) {
    background: #c9365c;
    border-color: #c9365c;
    color: white;
}

/* Texte libre */
.texte-libre textarea {
    width: 100%;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    resize: vertical;
    min-height: 100px;
    font-family: inherit;
    font-size: 1rem;
}

.texte-libre textarea:focus {
    outline: none;
    border-color: #c9365c;
}

/* Question conditionnelle */
.question-conditionnelle {
    display: none;
    background: #fff8e1;
    border-left: 4px solid #ffc107;
}

.question-conditionnelle.visible {
    display: block;
}

/* Boutons questionnaire */
.form-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 30px;
    padding: 20px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.btn-retour {
    padding: 12px 30px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-family: 'Abel', sans-serif;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.btn-retour:hover {
    opacity: 0.9;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.btn-submit {
    padding: 12px 30px;
    background: #28a745;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-family: 'Abel', sans-serif;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-submit:hover {
    background: #218838;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
}

.btn-save {
    padding: 12px 30px;
    background: #6c757d;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-family: 'Abel', sans-serif;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-save:hover {
    background: #5a6268;
}

/* Statut questionnaire */
.statut-banner {
    padding: 15px 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.statut-banner.complete {
    background: #d4edda;
    color: #155724;
}

.statut-banner.en_cours {
    background: #fff3cd;
    color: #856404;
}

/* Responsive questionnaire */
@media (max-width: 900px) {
    .satisfaction-grid {
        grid-template-columns: 1fr;
    }
    
    .info-row {
        grid-template-columns: 1fr;
    }
    
    .note-options {
        gap: 5px;
    }
    
    .note-option {
        width: 38px;
        height: 38px;
        font-size: 1rem;
    }
    
    .form-actions {
        flex-direction: column;
    }
}

/* ===== NOUVELLES OPTIONS DE PAIEMENT ===== */

/* Message d'avertissement 30 minutes */
.payment-warning {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
    border: 1px solid #f39c12;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 20px;
}

.payment-warning .material-symbols-outlined {
    color: #e67e22;
    font-size: 28px;
    flex-shrink: 0;
}

.payment-warning strong {
    color: #d35400;
}

/* Options de paiement (acompte / total) - EN LIGNE */
.payment-options {
    display: flex;
    flex-direction: row;
    gap: 15px;
    margin: 20px 0;
}

.btn-payer-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 15px 20px;
    border-radius: 10px;
    text-decoration: none;
    color: white;
    transition: all 0.3s ease;
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
    flex: 1;
    text-align: center;
}

.btn-payer-option:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.btn-payer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.btn-payer-title {
    font-size: 13px;
    font-weight: 600;
    opacity: 0.9;
}

.btn-payer-amount-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-payer-amount-row .material-symbols-outlined {
    font-size: 22px;
    opacity: 0.9;
}

.btn-payer-amount {
    font-size: 22px;
    font-weight: 700;
}

.btn-payer-note {
    font-size: 11px;
    opacity: 0.85;
    margin-top: 2px;
}

/* Bouton payer la totalité - vert */
.btn-payer-total {
    background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
}

.btn-payer-total:hover {
    background: linear-gradient(135deg, #219a52 0%, #27ae60 100%);
}

/* Bouton payer l'acompte - violet */
.btn-payer-acompte {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.btn-payer-acompte:hover {
    background: linear-gradient(135deg, #5a6fd6 0%, #6a4190 100%);
}

/* Section paiement du solde */
.payment-solde-box {
    border: 2px solid #27ae60;
}

.btn-payer-solde {
    background: var(--couleur-inscription, linear-gradient(135deg, #27ae60 0%, #2ecc71 100%));
    border-radius: var(--btn-inscription-radius, 8px);
    border: var(--btn-inscription-border, none);
}

.btn-payer-solde:hover {
    filter: brightness(0.9);
}

.payment-deadline {
    color: #e67e22;
    font-size: 13px;
    margin-top: 10px;
    font-weight: 500;
}

/* Responsive */
@media (max-width: 600px) {
    .payment-options {
        flex-direction: column;
        gap: 12px;
    }
    
    .btn-payer-option {
        padding: 15px;
    }
    
    .payment-warning {
        flex-direction: column;
        text-align: center;
    }
}

/* ===== PAGE RÉSERVATION (CHOIX CONNEXION/INSCRIPTION) ===== */
.reservation-choice-container {
    max-width: 1140px;
}

.reservation-choice-header {
    text-align: center;
    margin-bottom: 30px;
}

.reservation-choice-header h1 {
    color: #2c3e50;
    font-size: 28px;
    margin-bottom: 10px;
}

.reservation-choice-header p {
    color: #7f8c8d;
    font-size: 16px;
}

/* Carte résumé style reservation_detail */
.reservation-summary-card {
    max-width: 1140px;
    margin-bottom: 30px;
}

/* La marge intérieure du bandeau n'est PLUS redéfinie ici (25/08/2026).

   Elle valait 20px 25px, contre 12px 22px pour la carte de réservation de
   `compte.php` : les deux bandeaux portent le même visuel et le même titre,
   et se présentaient à deux hauteurs différentes.

   La règle vivait ici, plus bas dans la feuille et à spécificité égale
   (0,2,0), et l'emportait donc sur `.reservation-card-new
   .reservation-header-new`. En la retirant, cette dernière s'applique — et
   avec elle la marge, le `display:flex`, l'alignement et le `gap` du logo,
   d'un seul tenant.

   Rien à ajouter en échange : les deux seules cartes concernées,
   `reserver.php` et `inscription.php`, portent aussi `.reservation-card-new`.

   `font-size: 20px` sur le titre est parti pour la même raison : la
   surcharge d'univers de `entete.php` impose déjà cette taille en
   `!important`, cette ligne ne servait plus à rien. */



.reservation-summary-card .reservation-info-block {
    padding: 20px 25px;
}

.choice-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    margin-bottom: 30px;
}

/* ── Confirmation de réservation (apprenant déjà connecté) ─────────────
   Prend la place des cartes Connexion/Inscription sur reserver.php pour
   les types sans page de détail (masterclass), où cette page est le
   dernier écran avant Stripe. */
.reservation-confirm-actions {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
}

.btn-confirmer-reservation {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 260px;
    padding: 14px 32px;
    font-size: 1.05rem;
    font-weight: 600;
}

.btn-confirmer-reservation .material-symbols-outlined {
    font-size: 20px;
}

/* Code promo refusé : la ligne passe en rouge pâle plutôt qu'en vert. */
.code-promo-applied-row.code-promo-refuse {
    background: #fef2f2;
    border-color: #fecaca;
}

@media (max-width: 600px) {
    .btn-confirmer-reservation {
        width: 100%;
        min-width: 0;
    }
}

/* Classes utilitaires */
.text-center {
    text-align: center;
}

.mt-30 {
    margin-top: 30px;
}

.choice-card {
    background: white;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    text-align: center;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.choice-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}

.choice-card.login-card:hover {
    border-color: #667eea;
}

.choice-card.register-card:hover {
    border-color: #27ae60;
}

.choice-card-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.login-card .choice-card-icon {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.register-card .choice-card-icon {
    background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
}

.choice-card-icon .material-symbols-outlined {
    font-size: 32px;
    color: white;
}

.choice-card h4 {
    font-size: 20px;
    color: #2c3e50;
    margin-bottom: 10px;
    /* Police standard du texte (pas la police des titres imposée par la règle h4). */
    font-family: inherit !important;
}

.choice-card p {
    color: #7f8c8d;
    font-size: 14px;
    margin-bottom: 20px;
}

.choice-card .btn-choice {
    display: inline-block;
    padding: 12px 30px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    transition: all 0.3s ease;
}

.login-card .btn-choice {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.login-card .btn-choice:hover {
    background: linear-gradient(135deg, #5a6fd6 0%, #6a4190 100%);
}

.register-card .btn-choice {
    background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
    color: white;
}

.register-card .btn-choice:hover {
    background: linear-gradient(135deg, #219a52 0%, #27ae60 100%);
}

@media (max-width: 700px) {
    .choice-cards {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .choice-card {
        padding: 25px;
    }
}

/* ========================================
   PAGE SIGNATURE CONTRAT
   ======================================== */

/* Empêcher le débordement horizontal */
.signature-page html, 
.signature-page body {
    overflow-x: hidden;
}

.signature-layout {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 30px;
    align-items: start;
}

@media (max-width: 1200px) {
    .signature-layout {
        grid-template-columns: 1fr;
    }
}

/* Viewer PDF */
/* Le lecteur PDF — le cadre dans lequel s'affiche un contrat à signer.
   Réglable depuis Identité visuelle > Boîtes > Lecteur PDF.

   Chaque valeur est la VÔTRE en repli : tant qu'un réglage n'est pas posé,
   la variable n'est pas émise et c'est la valeur d'origine qui s'applique.
   L'apparence ne change donc pas tant que vous n'y touchez pas. */
.pdf-viewer-container {
    background: var(--pdf-viewer-bg, linear-gradient(135deg, var(--color-primary, #667eea) 0%, var(--color-secondary, #764ba2) 100%));
    border-radius: var(--pdf-viewer-radius, 12px);
    border: var(--pdf-viewer-border, none);
    padding: 20px;
    box-sizing: border-box;
    max-width: 100%;
    overflow: hidden;
    box-shadow: var(--pdf-viewer-shadow, 0 4px 20px rgba(0, 0, 0, 0.1));
    /* Respiration entre la visionneuse PDF et le panneau de signature qui suit
       (contrat apprenant + contrat d'abonnement, mêmes classes partagées). */
    margin-bottom: 25px;
}

@media (max-width: 600px) {
    .pdf-viewer-container {
        padding: 10px;
        border-radius: 8px;
    }
}

.pdf-viewer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    color: var(--pdf-viewer-color, white);
    font-family: var(--pdf-viewer-font-family, inherit);
    font-size: var(--pdf-viewer-font-size, inherit);
    font-weight: var(--pdf-viewer-font-weight, inherit);
    line-height: var(--pdf-viewer-line-height, inherit);
}

@media (max-width: 600px) {
    .pdf-viewer-header {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
    
    .pdf-viewer-header > span {
        font-size: 14px;
        font-weight: 600;
    }
}

.pdf-navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    width: 100%;
}

@media (max-width: 400px) {
    .pdf-navigation {
        gap: 5px;
    }
    
    .pdf-navigation button {
        padding: 6px 10px;
        font-size: 12px;
    }
    
    .pdf-navigation span {
        font-size: 12px;
    }
}

.pdf-navigation button {
    background: #3498db;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
}

.pdf-navigation button:disabled {
    background: #7f8c8d;
    cursor: not-allowed;
}

.pdf-navigation button:hover:not(:disabled) {
    background: #2980b9;
}

.pdf-canvas-container {
    position: relative;
    background: white;
    border-radius: 5px;
    overflow: hidden;
    max-width: 100%;
    box-sizing: border-box;
}

#pdfCanvas {
    width: 100%;
    height: auto;
    display: block;
}

/* Panneau signature */
.signature-panel {
    background: white;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    position: sticky;
    top: 100px;
}

@media (max-width: 600px) {
    .signature-panel {
        padding: 15px;
        position: static;
    }
}

.signature-panel h2 {
    margin-top: 0;
    color: #2c3e50;
    font-size: 20px;
    margin-bottom: 20px;
}

.signature-step {
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 1px solid #eee;
}

.signature-step:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
}

.step-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.step-number {
    width: 32px;
    height: 32px;
    min-width: 32px;
    background: var(--bouton-danger-bg);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 15px;
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
}

.step-number.active {
    background: var(--bouton-danger-bg);
    animation: pulse-step 1.5s ease-in-out infinite;
}

.step-number.completed {
    background: var(--couleur-inscription);
    box-shadow: 0 2px 8px rgba(39, 174, 96, 0.3);
}

@keyframes pulse-step {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.step-title {
    font-weight: 600;
    color: #2c3e50;
}

/* Canvas signature */
.signature-canvas-container {
    position: relative;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 10px;
    background: white;
    box-sizing: border-box;
    max-width: 100%;
}

.signature-canvas-container canvas {
    display: block;
    border-radius: 6px;
    touch-action: none;
    /* Ne pas mettre max-width: 100% et height: auto car ça casse le ratio du canvas */
}

.clear-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    background: #e74c3c;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}

.clear-btn:hover {
    background: #c0392b;
}

.signature-placeholder {
    text-align: center;
    color: #999;
    font-size: 14px;
    padding: 40px 0;
}

/* Checkbox CGV */
.cgv-section {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 15px;
}

.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.5;
}

.checkbox-label input {
    margin-top: 3px;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* Bouton validation */
.validate-btn {
    width: 100%;
    padding: 15px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.validate-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

.validate-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
}

.validate-btn .material-symbols-outlined {
    font-size: 20px;
}

/* Déjà signé */
.already-signed {
    background: #d4edda;
    color: #155724;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
}

.already-signed .material-symbols-outlined {
    font-size: 48px;
    margin-bottom: 10px;
    display: block;
}

/* ========================================
   MESSAGES BLOCAGE CONNEXION
   ======================================== */
.blocked-message {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a5a 100%);
    color: white;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    margin-bottom: 20px;
}

.blocked-message h3 {
    margin: 0 0 10px 0;
}

.blocked-message p {
    margin: 0;
    opacity: 0.9;
}

.countdown {
    font-size: 24px;
    font-weight: bold;
    margin-top: 10px;
}

.login-form[disabled] {
    opacity: 0.5;
    pointer-events: none;
}

/* ========================================
   PAGE CHANGER MOT DE PASSE (standalone)
   ======================================== */
body.password-change-page {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

body.password-change-page .password-container {
    background: white;
    border-radius: 16px;
    padding: 40px;
    max-width: 600px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

body.password-change-page .password-container .logo {
    text-align: center;
    margin-bottom: 30px;
}

body.password-change-page .password-container .logo h1 {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 32px;
    margin: 0;
}

/* ========================================
   STYLES SUPPLÉMENTAIRES PAGE SIGNATURE
   ======================================== */

/* ----------------------------------------
   OVERLAY SUGGESTION ROTATION MOBILE
   ---------------------------------------- */
.rotate-suggestion {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 10000;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 30px;
    color: white;
}

.rotate-suggestion.active {
    display: flex;
}

.rotate-suggestion .rotate-icon {
    font-size: 80px;
    margin-bottom: 20px;
    animation: rotate-phone 2s ease-in-out infinite;
}

@keyframes rotate-phone {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(90deg); }
}

.rotate-suggestion h3 {
    font-size: 24px;
    margin: 0 0 15px 0;
    color: white;
}

.rotate-suggestion p {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 30px 0;
    max-width: 300px;
}

.rotate-suggestion .btn-dismiss {
    background: transparent;
    border: 2px solid white;
    color: white;
    padding: 12px 30px;
    border-radius: 25px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s;
}

.rotate-suggestion .btn-dismiss:hover {
    background: white;
    color: #333;
}

/* ----------------------------------------
   PASTILLE STEP-PILL SECONDE COULEUR
   ---------------------------------------- */
/* ----------------------------------------
   CANVAS PARAPHE - CARRÉ FIXE
   ---------------------------------------- */
.paraphe-canvas {
    width: 150px !important;
    height: 150px !important;
    max-width: 150px !important;
}

.signature-step .signature-canvas-container {
    display: inline-block;
}

/* Container du paraphe */
.signature-step:not(.signature-step-large) .signature-canvas-container {
    width: 154px;
    max-width: 154px;
}

/* Container de la signature (plus large) */
.signature-step-large .signature-canvas-container {
    width: 100%;
    max-width: 354px;
}

.signature-step-large .signature-canvas {
    width: 350px !important;
    height: 150px !important;
    max-width: 100%;
}

/* ----------------------------------------
   LAYOUT PARAPHE + SIGNATURE CÔTE À CÔTE
   ---------------------------------------- */
.signature-steps-row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.signature-steps-row .signature-step {
    flex: 0 0 auto;
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.signature-steps-row .signature-step-large {
    flex: 1 1 300px;
}

@media (max-width: 600px) {
    .signature-steps-row {
        flex-direction: column;
    }
    
    .signature-steps-row .signature-step,
    .signature-steps-row .signature-step-large {
        flex: 1 1 100%;
    }
    
    .paraphe-canvas {
        width: 120px !important;
        height: 120px !important;
        max-width: 120px !important;
    }
    
    .signature-step:not(.signature-step-large) .signature-canvas-container {
        width: 124px;
        max-width: 124px;
    }
}

/* ----------------------------------------
   TITRE DE SECTION SIGNATURE
   ---------------------------------------- */
.signature-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    color: var(--color-primary, #667eea);
    margin: 0 0 20px 0;
    padding-bottom: 15px;
    border-bottom: 2px solid #f0f0f0;
}

.signature-section-title .material-symbols-outlined {
    font-size: 24px;
}

/* ----------------------------------------
   MESSAGE DE VERROUILLAGE
   ---------------------------------------- */
.lock-message {
    background: #fff3cd;
    color: #856404;
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    font-size: 14px;
    border: 1px solid #ffeeba;
}

/* ----------------------------------------
   BOUTONS CANVAS
   ---------------------------------------- */
.canvas-actions {
    margin-top: 8px;
}

.btn-clear {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    color: #6c757d;
    padding: 6px 15px;
    border-radius: 5px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-clear:hover {
    background: #e9ecef;
    color: #495057;
}

/* ----------------------------------------
   AUTORISATION DE DIFFUSION D'IMAGE
   ----------------------------------------
   Ces classes existaient dans la page depuis la création du document,
   mais PAS ici : le choix et le bouton de validation s'affichaient donc
   avec le style par défaut du navigateur. Un bouton nu au milieu d'une
   page soignée fait douter qu'il fonctionne.

   La couleur vient de --couleur-principale, posée par entete.php d'après
   l'univers : ces boutons suivront la charte sans être retouchés ici. */

.autorisation-image-choix {
    display: flex;
    /* L'un sous l'autre : deux réponses empilées se comparent mieux que
       deux réponses côte à côte, et la colonne de droite garde sa place
       pour la signature. align-items en flex-start pour que chaque bouton
       s'arrête à son texte plutôt que de s'étirer sur toute la largeur. */
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-top: 10px;
}

.btn-choix-image {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: 1.5px solid #dee2e6;
    border-radius: 8px;
    background: #fff;
    color: #495057;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-choix-image:hover {
    border-color: var(--couleur-principale, #2061b7);
    color: var(--couleur-principale, #2061b7);
}

/* L'état choisi doit se lire d'un coup d'œil : c'est une décision que
   l'apprenant doit pouvoir relire avant de signer. */
.btn-choix-image.choisi {
    border-color: var(--couleur-principale, #2061b7);
    background: var(--couleur-principale, #2061b7);
    color: #fff;
}

/* L'icône suit la couleur du texte de son bouton — au repos, au survol
   et une fois choisi. Sans cette règle elle gardait la couleur des
   titres, imposée à toutes les icônes de <main> par entete.php : on
   voyait une icône sombre sur un bouton plein. */
.btn-choix-image .material-symbols-outlined,
.btn-validate .material-symbols-outlined { color: inherit; }

.autorisation-image-libre {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 10px 0 18px;
    font-size: 14px;
    line-height: 1.5;
    color: #495057;
}

/* Le bouton de validation, pendant de .btn-clear : même gabarit, mais
   plein, parce qu'il porte l'action principale. */
.btn-validate {
    background: var(--couleur-principale, #2061b7);
    border: 1px solid var(--couleur-principale, #2061b7);
    color: #fff;
    padding: 6px 18px;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-validate:hover { filter: brightness(1.1); }

.btn-validate:disabled,
.btn-validate[disabled] {
    background: #ced4da;
    border-color: #ced4da;
    cursor: not-allowed;
}

/* ----------------------------------------
   BOUTON COPIER DEPUIS CONTRAT
   ---------------------------------------- */
.copy-from-contrat {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 15px 20px;
    background: var(--couleur-inscription);
    color: white;
    border: var(--btn-inscription-border, none);
    border-radius: var(--btn-inscription-radius, 10px);
    font-size: 15px;
    cursor: pointer;
    margin-bottom: 20px;
    transition: all 0.3s;
}

.copy-from-contrat .material-symbols-outlined {
    color: white !important;
}

.copy-from-contrat:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(39, 174, 96, 0.4);
    filter: brightness(1.1);
}

.copy-from-contrat:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
}

.copy-from-contrat.copy-success {
    background: #27ae60;
}

/* ----------------------------------------
   BOUTON PASSER AU RÈGLEMENT
   ---------------------------------------- */
.next-document-section {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 2px solid #f0f0f0;
}

.btn-next-document {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 15px 25px;
    background: var(--couleur-inscription);
    color: white;
    border: var(--btn-inscription-border, none);
    border-radius: var(--btn-inscription-radius, 10px);
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-next-document:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(39, 174, 96, 0.4);
    filter: brightness(1.1);
}

.btn-next-document .material-symbols-outlined {
    color: white !important;
}

button.btn-next-document .material-symbols-outlined,
.btn-next-document span.material-symbols-outlined {
    color: #FFFFFF !important;
}

/* ----------------------------------------
   BOUTON VALIDATION FINALE
   ---------------------------------------- */
.submit-section {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 2px solid #f0f0f0;
}

.btn-submit-signature {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 18px 25px;
    background: var(--couleur-inscription);
    color: white;
    border: var(--btn-inscription-border, none);
    border-radius: var(--btn-inscription-radius, 10px);
    font-size: 17px;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(39, 174, 96, 0.3);
}

.btn-submit-signature:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(39, 174, 96, 0.4);
    filter: brightness(1.1);
}

.btn-submit-signature .material-symbols-outlined {
    font-size: 22px;
    color: white !important;
}

button.btn-submit-signature .material-symbols-outlined,
.btn-submit-signature span.material-symbols-outlined {
    color: #FFFFFF !important;
}

/* ----------------------------------------
   MENTION LÉGALE
   ---------------------------------------- */
.legal-notice {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 10px;
    margin-top: 20px;
    font-size: 13px;
    line-height: var(--line-height, 1.6);
    color: #555;
    border-left: 4px solid var(--color-primary, #667eea);
}

.legal-notice strong {
    color: #333;
}

.legal-page {
    max-width: 1140px;
    margin: 0 auto;
    padding: 30px 20px;
}

.legal-page h1 {
    color: var(--color-primary, #667eea);
    margin-bottom: 5px;
}

.legal-page .last-update {
    color: #999;
    font-size: 13px;
    margin-bottom: 25px;
}

.legal-page h2 {
    color: var(--color-primary, #667eea);
    margin-top: 25px;
    margin-bottom: 10px;
}

.legal-content ul {
    padding-left: 20px;
    margin: 10px 0;
}

.legal-content ul li {
    margin-bottom: 4px;
}

/* ----------------------------------------
   BARRE DE PROGRESSION PDF
   ---------------------------------------- */
.scroll-progress {
    height: 6px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
    margin-top: 15px;
    overflow: hidden;
}

.scroll-progress-bar {
    height: 100%;
    background: white;
    border-radius: 3px;
    transition: width 0.3s ease;
    width: 0%;
}

.scroll-progress-text {
    text-align: center;
    font-size: 13px;
    color: white;
    margin-top: 10px;
    opacity: 0.9;
}

.scroll-progress-text.complete {
    color: #90EE90;
    font-weight: 600;
}

/* ----------------------------------------
   NAVIGATION PDF
   ---------------------------------------- */
.pdf-viewer-footer .nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 8px 15px;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s;
}

.pdf-viewer-footer .nav-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

.pdf-viewer-footer .nav-btn .material-symbols-outlined {
    font-size: 18px;
    line-height: 1;
    display: block;
}

/* L'autorisation d'image a son propre lecteur, donc son propre
   identifiant : sans lui, « Page 1 / 1 » restait gris sur le bandeau. */
#page-info-contrat,
#page-info-reglement,
#page-info-autorisation {
    display: inline-flex;
    align-items: center;
    color: white;
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    background: rgba(255, 255, 255, 0.2);
    padding: 8px 12px;
    border-radius: 5px;
}

/* ----------------------------------------
   STEP SUBTITLE
   ---------------------------------------- */
.step-subtitle {
    font-size: 12px;
    color: #888;
    margin-top: 2px;
}

/* ----------------------------------------
   TITRE INSTRUCTION SIGNATURE
   ---------------------------------------- */
.signature-content-wrapper .card-title {
    font-size: 1.4em;
    color: var(--color-primary, #667eea);
    margin: 0 0 25px 0;
    text-align: center;
    font-weight: 600;
}

@media (max-width: 600px) {
    .signature-content-wrapper .card-title {
        font-size: 1.1em;
        line-height: 1.5;
    }
}

/* ----------------------------------------
   CANVAS SIGNÉ (feedback visuel)
   ---------------------------------------- */
.signature-canvas.signed {
    border-color: #27ae60 !important;
    box-shadow: 0 0 0 3px rgba(39, 174, 96, 0.2);
}

/* ----------------------------------------
   DÉJÀ SIGNÉ
   ---------------------------------------- */
.already-signed {
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    color: #155724;
    padding: 40px;
    border-radius: 15px;
    text-align: center;
}

.already-signed h2 {
    margin: 0 0 15px 0;
    font-size: 24px;
}

.already-signed p {
    margin: 0 0 25px 0;
    font-size: 16px;
}

.already-signed .btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #155724;
    color: white;
    padding: 12px 25px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s;
}

.already-signed .btn:hover {
    background: #0d3c18;
    transform: translateY(-2px);
}


/* ----------------------------------------
   FORMULAIRE INVITATION PARRAINAGE
   ---------------------------------------- */
.invitation-box {
    background: linear-gradient(135deg, #f8f9ff 0%, #fff 100%);
    border: 1px solid #e0e5ff;
    border-radius: 12px;
    padding: 25px;
}

.invitation-box .section-title {
    margin-bottom: 20px;
    color: #5c6bc0;
}

.invitation-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    gap: 15px;
    align-items: end;
}

.invitation-form-grid .form-group {
    margin-bottom: 0;
}

.invitation-form-grid .form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    font-size: 13px;
    color: #555;
}

.invitation-form-grid .form-group input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.invitation-form-grid .form-group input:focus {
    outline: none;
    border-color: #5c6bc0;
    box-shadow: 0 0 0 3px rgba(92, 107, 192, 0.1);
}

.btn-invitation {
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #5c6bc0 0%, #7e57c2 100%);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.btn-invitation:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(92, 107, 192, 0.3);
}

.btn-invitation .material-symbols-outlined {
    font-size: 18px;
}

.invitation-info {
    margin-top: 15px;
    font-size: 13px;
    color: #666;
    display: flex;
    align-items: center;
    gap: 8px;
}

.invitation-info .material-symbols-outlined {
    font-size: 16px;
    color: #5c6bc0;
}

@media (max-width: 900px) {
    .invitation-form-grid {
        grid-template-columns: 1fr 1fr;
    }
    
    .invitation-form-grid .form-group-btn {
        grid-column: span 2;
    }
    
    .btn-invitation {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 500px) {
    .invitation-form-grid {
        grid-template-columns: 1fr;
    }
    
    .invitation-form-grid .form-group-btn {
        grid-column: span 1;
    }
}

/* Bannière parrainage sur inscription */
.parrainage-banner {
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
    border: 1px solid #a5d6a7;
    color: #2e7d32;
    padding: 15px 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 500;
}

.parrainage-banner .material-symbols-outlined {
    font-size: 24px;
}



/* ----------------------------------------
   ALERT BOX - BLOC INFO
   ---------------------------------------- */
.alert-box {
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.alert-box.info-blue {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border: 1px solid #90caf9;
    color: #1565c0;
}

.alert-box strong {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 16px;
}

.alert-box strong .material-symbols-outlined {
    font-size: 20px;
}

.alert-box .styled-list {
    margin: 0;
    padding-left: 20px;
}

.alert-box .styled-list li {
    margin-bottom: 8px;
    line-height: 1.5;
}

/* ----------------------------------------
   SECTION PARRAINAGE - ALIGNEMENT ICONES
   ---------------------------------------- */
#section-parrainage .section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

#section-parrainage .section-title .material-symbols-outlined {
    font-size: 24px;
    vertical-align: middle;
}

#section-parrainage h2.card-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

#section-parrainage h2.card-title .material-symbols-outlined {
    font-size: 28px;
}

/* Onglets parrainage */
.parrainage-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 25px;
}

.parrainage-tabs .tab-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    background: #f0f0f0;
    color: #666;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.parrainage-tabs .tab-btn .material-symbols-outlined {
    font-size: 18px;
}

.parrainage-tabs .tab-btn.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.parrainage-tabs .tab-btn:hover:not(.active) {
    background: #e0e0e0;
}

/* Bouton copier code - alignement icône */
.btn-copy-code {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-copy-code .material-symbols-outlined {
    font-size: 18px;
}



/* ----------------------------------------
   CLASSES UTILITAIRES MARGIN
   ---------------------------------------- */
.mb-15 { margin-bottom: 15px !important; }
.mb-20 { margin-bottom: 20px !important; }
.mb-25 { margin-bottom: 25px !important; }
.mb-30 { margin-bottom: 30px !important; }
.mt-15 { margin-top: 15px !important; }
.mt-20 { margin-top: 20px !important; }
.mt-30 { margin-top: 30px !important; }



/* ----------------------------------------
   HISTORIQUE PARRAINAGE
   ---------------------------------------- */
.parrainage-history-card {
    background: white;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 15px 20px;
    margin-bottom: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.parrainage-history-card .reduction-box-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.parrainage-history-date {
    font-size: 13px;
    color: #888;
    margin-top: 3px;
}

/* Statuts parrainage */
.parrainage-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
}

.parrainage-status .material-symbols-outlined {
    font-size: 16px;
}

.parrainage-status.en_attente {
    background: #fff3e0;
    color: #e65100;
}

.parrainage-status.active {
    background: #e8f5e9;
    color: #2e7d32;
}

.parrainage-status.utilisee {
    background: #f5f5f5;
    color: #757575;
}

/* Reduction box */
.reduction-box {
    background: white;
    border: 1px solid #e0e5ff;
    border-radius: 10px;
    padding: 15px 20px;
    margin-bottom: 10px;
}

.reduction-box-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.reduction-box-amount {
    font-size: 18px;
    font-weight: bold;
    color: #27ae60;
}

.reduction-box-footer {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #eee;
    font-size: 13px;
    color: #666;
    display: flex;
    align-items: center;
    gap: 8px;
}

.reduction-box-footer .material-symbols-outlined {
    font-size: 16px;
    color: #27ae60;
}


/* ============================================================
   OPTIONS TARIFAIRES - Section réservation
   ============================================================ */

.options-tarifaires-section {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
}

.options-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 15px;
    color: #2c3e50;
    font-size: 15px;
}

.options-header .material-symbols-outlined {
    color: #ff9800;
    font-size: 20px;
}

.options-group {
    margin-bottom: 15px;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 8px;
}

.options-group-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
    font-size: 13px;
}

.options-group-title .material-symbols-outlined {
    font-size: 18px;
    color: #666;
}

/* Formules */
.formules-choices {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.formule-choice {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: white;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.formule-choice:hover {
    border-color: #667eea;
}

.formule-choice:has(input:checked) {
    border-color: #667eea;
    background: #f0f4ff;
}

.formule-choice input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: #667eea;
}

.formule-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.formule-name {
    font-weight: 600;
    color: #2c3e50;
    font-size: 13px;
}

.formule-desc {
    font-size: 11px;
    color: #666;
}

.formule-prix {
    font-weight: 700;
    color: #667eea;
    font-size: 13px;
    white-space: nowrap;
}

/* Selects options */
.options-select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 13px;
    background: white;
    cursor: pointer;
}

.options-select:focus {
    outline: none;
    border-color: #667eea;
}

/* Nombre de nuits */
.options-nuits {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    font-size: 13px;
}

.options-input-small {
    width: 60px;
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-align: center;
}

.options-input-mini {
    width: 50px;
    padding: 4px 6px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-align: center;
    font-size: 12px;
}

/* Repas */
.repas-choices {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.repas-choice {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
}

.repas-choice:hover {
    background: #f5f5f5;
}

.repas-choice input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #667eea;
}

.repas-choice span:nth-child(2) {
    flex: 1;
}

.repas-prix {
    color: #667eea;
    font-weight: 600;
    font-size: 12px;
}

/* Transport */
.transport-section {
    margin-bottom: 10px;
}

.transport-section:last-child {
    margin-bottom: 0;
}

.transport-section label {
    display: block;
    font-size: 12px;
    color: #666;
    margin-bottom: 5px;
}

/* Total options */
.options-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 8px;
    color: white;
    margin-top: 15px;
}

.options-total span {
    font-size: 13px;
}

.options-total strong {
    font-size: 16px;
}

/* Responsive */
@media (max-width: 480px) {
    .formule-choice {
        flex-wrap: wrap;
    }
    
    .formule-prix {
        width: 100%;
        text-align: right;
        margin-top: 5px;
    }
    
    .repas-choice {
        flex-wrap: wrap;
    }
    
    .options-input-mini {
        margin-left: auto;
    }
}

/* Marge entre options-total et bouton réservation */
.options-tarifaires-section {
    margin-bottom: 20px;
}

/* Code promo - session_detail */
.code-promo-box {
    background: #f8f9fa;
    padding: 20px 0;
    border-radius: 8px;
    margin-bottom: 15px;
}
.code-promo-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.code-promo-header .material-symbols-outlined {
    color: #667eea;
}
.code-promo-header strong {
    color: #2c3e50;
}
.code-promo-input {
    width: 100%;
    padding: 10px;
    border: 2px solid #ddd;
    border-radius: 5px;
    font-size: 14px;
    text-transform: uppercase;
    transition: border-color 0.3s;
    box-sizing: border-box;
}
.code-promo-input:focus {
    outline: none;
    border-color: #667eea;
}
.code-promo-message {
    font-size: 13px;
    min-height: 20px;
}
.code-promo-available {
    margin-top: 10px;
}
.code-promo-available small {
    color: #666;
}
.code-promo-tags {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    margin-top: 5px;
}
.code-promo-tag {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 4px 10px;
    border-radius: 15px;
    font-size: 11px;
    border: none;
    cursor: pointer;
    transition: transform 0.2s;
}
.code-promo-tag:hover {
    transform: scale(1.05);
}
.code-promo-tag-remove {
    display: none;
    margin-left: 4px;
    color: rgba(255,255,255,0.7);
    font-weight: bold;
    cursor: pointer;
}
.code-promo-tag-remove:hover {
    color: #fff;
}
.code-promo-tag.applied .code-promo-tag-remove {
    display: inline;
}
.code-promo-tag.applied {
    background: #27ae60;
    cursor: default;
}
.code-promo-remove {
    background: none;
    border: none;
    color: #e74c3c;
    font-size: 16px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 50%;
    line-height: 1;
    transition: background 0.2s;
}
.code-promo-remove:hover {
    background: rgba(231, 76, 60, 0.1);
}
.reduction-preview {
    margin-top: 10px;
    background: #d4edda;
    border-left: 4px solid #28a745;
    padding: 10px;
    border-radius: 5px;
}
.reduction-preview-header {
    font-weight: bold;
    color: #155724;
    margin-bottom: 5px;
}
.reduction-preview-details {
    font-size: 13px;
    color: #155724;
}
.reduction-result .reduction-price-old {
    text-decoration: line-through;
    color: #999;
}
.text-checking {
    color: #999;
}
.text-error {
    color: #dc3545;
}

/* Inverser l'ordre : Effectif au-dessus de Tarif */
.session-sidebar {
    display: flex;
    flex-direction: column;
}

.session-sidebar .info-box-effectif {
    order: 1;
}

.session-sidebar .price-box {
    order: 2;
}

/* Colonne de gauche : les blocs de texte sortent de leur carte.
   Descriptif, objectif et déroulé ne sont plus encadrés — ni fond, ni
   bordure, ni ombre, ni rembourrage — et leur texte est simplement décalé de
   30 px du bord de la colonne.

   Le `!important` est indispensable : les règles « Cartes » de l'identité
   visuelle (entete.php) en portent un, et sans lui le fond blanc et la
   bordure resteraient.

   Le visuel qui ouvre la colonne n'est pas concerné : il garde toute la
   largeur, sans décalage. */
.session-main .card.session-description {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 0 0 30px !important;
}

/* Pictogrammes des titres de la colonne de droite.
   Servis en <img> et non inlinés dans la page : les cinq fichiers emploient
   les MÊMES noms de classes internes (.cls-1, .cls-2...) avec des couleurs
   différentes. Inlinés côte à côte, le dernier <style> repeindrait tous les
   autres. Chaque <img> a son propre document, donc aucune collision. */
.picto-bloc {
    height: 24px;
    width: auto;
    vertical-align: -4px;
    margin-right: 8px;
    flex: none;
}

/* Le titre du tarif est centré : le picto suit le texte au lieu d'être
   plaqué à gauche du bloc. */
.price-label .picto-bloc {
    vertical-align: -3px;
}

/* ---- Colonne de droite de formation_detail.php ----
   Cette colonne est un conteneur flex dont l'ordre d'affichage est imposé par
   des `order` : déplacer les blocs dans le HTML n'y change rien, il faut le
   dire ici. Public et Tarif ouvrent la colonne ; le reste suit dans l'ordre
   du document.
   Les règles portent la classe `sidebar-formation` — pas `.session-sidebar`,
   partagée avec session_detail.php et session_detail_presentiel.php, qui ne
   doivent pas bouger. */
.sidebar-formation .info-box-public {
    order: -4;
}

/* Les pré-requis suivent le public. */
.sidebar-formation .info-box-prerequis {
    order: -3;
}

.sidebar-formation .price-box,
.sidebar-formation .info-box-tarif {
    order: -2;
}

/* Le tarif n'est plus une pastille bleue mais un bloc comme les autres.
   Les classes `price-amount` / `price-detail` sont conservées — elles servent
   sur d'autres pages, où la pastille demeure — et neutralisées ici : sans
   cela le texte resterait blanc, donc invisible sur fond clair, et centré
   au milieu d'une colonne alignée à gauche. */
.sidebar-formation .info-box-tarif .price-amount {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 2px;
}

.sidebar-formation .info-box-tarif .price-detail {
    font-size: inherit;
    opacity: 1;
    color: inherit;
}

/* Valeur principale et son détail sur une ligne — le tarif et la durée
   partagent cette présentation, d'où des classes communes plutôt qu'une règle
   par bloc. */
.sidebar-formation .valeur-principale {
    font-size: 22px;
    font-weight: 700;
    display: inline-block;
    margin-right: 10px;
}

.sidebar-formation .valeur-detail {
    display: inline-block;
}

/* Le montant et son détail sur une seule ligne.
   Les deux sont des `div`, donc chacun sur sa ligne par défaut : on les passe
   en `inline-block`. L'espace vient d'une marge et non d'un blanc dans le
   HTML — entre deux `div` collés, il n'y en aurait aucun.
   L'acompte (`price-separator`) est exclu : il garde sa propre ligne. */
.sidebar-formation .info-box-tarif .price-amount,
.sidebar-formation .info-box-tarif .price-detail:not(.price-separator) {
    display: inline-block;
    vertical-align: baseline;
}

.sidebar-formation .info-box-tarif .price-amount {
    margin-right: 10px;
}

.sidebar-formation .info-box-tarif .price-separator {
    margin-top: 6px;
}

/* L'effectif suit le tarif. Il porte `order: 1` dans la règle générique
   `.session-sidebar` plus haut, qui le renvoyait en fin de colonne : on le
   redresse ici, sans toucher aux pages de session. */
.sidebar-formation .info-box-effectif {
    order: -1;
}

/* Le cadre reprend les réglages du bloc « Prochaines sessions »
   (Identité visuelle > Boîtes > Sessions dispo.), pour que les deux
   encadrements du bas de page restent identiques sans double réglage. */
.sidebar-formation {
    background: var(--sessions-section-bg, white);
    padding: 30px;
    border-radius: var(--sessions-section-radius, 10px);
    box-shadow: var(--sessions-section-shadow, 0 2px 10px rgba(0,0,0,0.08));
    border: var(--sessions-section-border, none);
}

/* Éléments après Tarif */
.session-sidebar .code-promo-box,
.session-sidebar .options-tarifaires-section,
.session-sidebar form,
.session-sidebar > a.btn,
.session-sidebar > button.btn,
.session-sidebar .session-passed-box,
.session-sidebar .already-reserved,
.session-sidebar .la-session-status {
    order: 3;
}


/* ============================================================
   OPTIONS RÉSERVÉES - reservation_detail.php
   ============================================================ */

.options-reservees-section {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 20px;
    margin-top: 20px;
    border: 1px solid #e9ecef;
}

/* Options dans la carte de réservation */
.reservation-card-new .options-reservees-section {
    margin: 0 20px 20px 20px;
    border-radius: 10px;
}

.options-total-row {
    display: flex;
    justify-content: flex-end;
    padding-top: 15px;
}

.options-reservees-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin: 0 0 15px 0;
}

.options-reservees-title .material-symbols-outlined {
    color: #667eea;
    font-size: 22px;
}

.options-total-badge {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    margin-left: auto;
    margin-right: 10px !important;
}

.options-reservees-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.option-reservee-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    background: white;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.option-reservee-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #667eea20 0%, #764ba220 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.option-reservee-icon .material-symbols-outlined {
    color: #667eea;
    font-size: 20px;
}

.option-reservee-info {
    flex: 1;
    min-width: 0;
}

.option-reservee-info strong {
    display: block;
    font-size: 14px;
    color: #333;
    margin-bottom: 2px;
}

.option-reservee-detail {
    font-size: 12px;
    color: #666;
}

.option-reservee-prix {
    font-weight: 600;
    color: #667eea;
    font-size: 14px;
    white-space: nowrap;
}

/* Responsive */
@media (max-width: 480px) {
    .option-reservee-item {
        flex-wrap: wrap;
    }
    
    .option-reservee-prix {
        width: 100%;
        text-align: right;
        margin-top: 5px;
        padding-top: 8px;
        border-top: 1px dashed #e9ecef;
    }
}

/* ============================================================
   BADGES STATUT - paiement_succes.php
   ============================================================ */

.reservation-status-block {
    padding: 15px 20px;
    border-top: 1px solid #e9ecef;
}

.status-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.status-badge.badge-success {
    background: #d4edda;
    color: #155724;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 14px;
}

.status-badge.badge-warning {
    background: #fff3cd;
    color: #856404;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 14px;
}

.status-badge .material-symbols-outlined {
    font-size: 18px;
}

/* Boutons d'action - paiement_succes.php */
.payment-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

.payment-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* ========================================
   BOUTONS CONNEXION & INSCRIPTION
   ======================================== */
.btn-connexion {
    background: var(--couleur-connexion, #667eea);
    color: var(--couleur-connexion-texte, white);
    border-radius: var(--btn-connexion-radius, 6px);
    border: var(--btn-connexion-border, none);
    padding: 10px 24px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-connexion:hover {
    filter: brightness(0.9);
}

.btn-inscription {
    background: var(--couleur-inscription, #27ae60);
    color: var(--couleur-inscription-texte, white);
    border-radius: var(--btn-inscription-radius, 6px);
    border: var(--btn-inscription-border, none);
    padding: 10px 24px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-inscription:hover {
    filter: brightness(0.9);
}

/* ============================================
   COUPONS PROMO - PAGE MON COMPTE
   ============================================ */

/* Conteneur d'un coupon avec date de validité */
.coupon-group {
    margin-bottom: 25px;
}

/* Indentation quand il y a un header de validité */
.coupon-indented {
    padding-left: 20px;
}

/* Carte coupon générique */
.coupon-card {
    display: flex;
    align-items: stretch;
    background: #fff;
    border-radius: 12px;
    margin-bottom: 15px;
    position: relative;
    transition: box-shadow 0.3s;
}

.coupon-card:hover {
}

.coupon-card.coupon-expire {
    opacity: 0.5;
    filter: grayscale(100%);
}

.coupon-card.coupon-expire:hover {
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

/* Badge utilisation (1/3, 2/5...) */
.coupon-badge-usage {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    z-index: 2;
}

/* Badge expiré / utilisé */
.coupon-badge-status {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0,0,0,0.5);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 4px;
}

.coupon-badge-status .material-symbols-outlined {
    font-size: 14px;
}

/* === SCOPE TOUS === */
.coupon-tous-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 300px;
}

.coupon-tous-wrapper .coupon-card {
    width: 100%;
}

.coupon-tous-wrapper .coupon-copy-btn {
    margin-top: 10px;
    align-self: center;
}

.coupon-card-tous .coupon-reduction-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--price-box-bg) !important;
    color: #fff;
    padding: 30px 20px;
    width: 300px;
    flex-shrink: 0;
    border-radius: 12px;
}

.coupon-reduction-block .coupon-montant {
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1.1;
}

.coupon-reduction-block .coupon-scope-label {
    font-size: 0.9rem;
    font-weight: 500;
    margin-top: 6px;
    opacity: 0.9;
}

.coupon-visual-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 300px;
    align-self: flex-start;
}

.coupon-visual-col .coupon-visual {
    width: 100%;
}

.coupon-visual-col .coupon-copy-btn {
    margin-top: 10px;
}

/* === SCOPE FORMATIONS / SESSIONS === */
.coupon-visual {
    position: relative;
    flex-shrink: 0;
}

.coupon-visual img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
}

.coupon-reduction-badge {
    position: absolute;
    bottom: -10px;
    right: 10px;
    background: var(--price-box-bg) !important;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 800;
    padding: 8px 16px;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    z-index: 2;
}

.coupon-info {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 0 25px 20px 25px;
    flex: 1;
}

.coupon-info .formation-btn,
.coupon-info .session-status {
    align-self: flex-start;
}

.coupon-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 1px dashed #aaa;
    color: #666;
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    margin-top: 6px;
    transition: all 0.3s;
}

.coupon-copy-btn .material-symbols-outlined {
    font-size: 16px;
}

.coupon-copy-btn:hover {
    border-color: #666;
    color: #333;
    background: #f5f5f5;
}

/* Responsive coupons */
@media (max-width: 600px) {
    .coupon-card {
        flex-direction: column;
    }
    .coupon-visual {
        width: 100%;
    }
    .coupon-card-tous .coupon-reduction-block {
        min-width: unset;
        padding: 25px 30px;
    }
    .coupon-indented {
        padding-left: 10px;
    }
}

/* =============================================
   CODE PROMO SUR RÉSERVATION EXISTANTE
   ============================================= */
.code-promo-block {
    padding: 10px 18px;
    border-top: 1px dashed #e5e7eb;
}
.code-promo-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.code-promo-block .code-promo-input {
    flex: 1;
    padding: 7px 12px;
    border: 1.5px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: border-color 0.2s;
    width: auto;
}
.code-promo-block .code-promo-input:focus {
    outline: none;
    border-color: #7c3aed;
    box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.1);
}
.code-promo-block .code-promo-input::placeholder {
    text-transform: none;
    letter-spacing: 0;
    color: #9ca3af;
}
.btn-code-promo-apply {
    padding: 7px 16px;
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.2s;
}
.btn-code-promo-apply:hover {
    opacity: 0.9;
}
.btn-code-promo-apply:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.code-promo-applied-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.code-promo-applied-label {
    flex: 1;
    font-size: 13px;
    color: #059669;
}

/* ⚠ DEUX CLASSES POUR DEUX STYLES INLINE RETIRÉS DE `inscription.php`
   — 20/09/2026. Mêmes valeurs exactement : on déplace l'écriture, on ne
   change pas l'apparence.

 ⚠ ET DES CLASSES NOMMÉES, PAS UN SÉLECTEUR
   `.code-promo-applied-row .material-symbols-outlined`. Ce bloc est
   PARTAGÉ avec `reserver.php`, où la même icône est ROUGE quand le code
   est refusé (`#b91c1c`, posé en PHP selon l'état). Un sélecteur commun
   y aurait planté un vert qui ne se serait vu que le jour où
   quelqu'un retirerait l'inline d'en face. */
.code-promo-applied-check {
    color: #059669;
    font-size: 20px;
}

.code-promo-applied-note {
    color: #6b7280;
}
.code-promo-applied-amount {
    font-weight: 600;
    color: #dc2626;
    margin-left: 4px;
}
.btn-code-promo-remove {
    background: none;
    border: 1px solid #e5e7eb;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    color: #9ca3af;
    transition: all 0.2s;
}
.btn-code-promo-remove:hover {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #dc2626;
}
.btn-code-promo-remove .material-symbols-outlined {
    font-size: 16px;
}
.code-promo-feedback {
    display: none;
    font-size: 12px;
    margin-top: 6px;
    padding: 4px 8px;
    border-radius: 4px;
}
.feedback-success {
    color: #059669;
    background: #ecfdf5;
}
.feedback-error {
    color: #dc2626;
    background: #fef2f2;
}

/* Responsive mobile */
@media (max-width: 600px) {
    .code-promo-input-row {
        flex-wrap: wrap;
    }
    .code-promo-block .code-promo-input {
        flex: 1;
        min-width: 120px;
    }
}

/* ==================== SIMULATION PANEL ==================== */
.sim-panel {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    color: #fff;
    padding: 15px 20px;
    border-radius: 12px;
    margin-bottom: 20px;
    font-size: 13px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.sim-panel-title {
    font-weight: 700;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: #ffd700;
}

.sim-panel-title .material-symbols-outlined {
    font-size: 20px;
    color: #ffd700 !important;
}

.sim-panel-badge {
    background: #e74c3c;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    letter-spacing: 1px;
}

.sim-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.15);
}

.sim-preset-btn {
    padding: 5px 12px;
    border-radius: 20px;
    background: rgba(255,255,255,0.1);
    color: #ccc;
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.2s;
    border: 1px solid rgba(255,255,255,0.15);
}

.sim-preset-btn:hover {
    background: rgba(255,255,255,0.2);
    color: #fff;
}

.sim-preset-btn.sim-active {
    background: #ffd700;
    color: #1a1a2e;
    border-color: #ffd700;
    font-weight: 700;
}

.sim-toggles {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}

.sim-toggle-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.sim-toggle-label {
    font-weight: 600;
    color: #aaa;
    font-size: 12px;
    min-width: 60px;
}

.sim-toggle {
    padding: 4px 10px;
    border-radius: 15px;
    background: rgba(255,255,255,0.08);
    color: #999;
    text-decoration: none;
    font-size: 12px;
    transition: all 0.2s;
    border: 1px solid rgba(255,255,255,0.1);
}

.sim-toggle:hover {
    background: rgba(255,255,255,0.15);
    color: #fff;
}

.sim-toggle.sim-active {
    background: #3498db;
    color: #fff;
    border-color: #3498db;
}

.sim-toggle.sim-on {
    background: #27ae60;
    color: #fff;
    border-color: #27ae60;
}

.sim-toggle.sim-off {
    background: rgba(231,76,60,0.3);
    color: #e74c3c;
    border-color: rgba(231,76,60,0.4);
}

.sim-info {
    font-size: 11px;
    color: #888;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.sim-exit {
    color: #e74c3c;
    text-decoration: none;
    font-weight: 600;
}

.sim-exit:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .sim-presets {
        gap: 4px;
    }
    .sim-preset-btn {
        font-size: 11px;
        padding: 4px 8px;
    }
}

/* ===== Carte "Confirmez votre paiement" (reservation_detail.php) ===== */
/* Même base visuelle que .reglements-section, titre en rose pour rester sur la charte */
.paiement-cta-section {
    max-width: 1140px;
    background: white;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    margin-bottom: 25px;
    padding: 25px 30px;
}

.paiement-cta-section-title {
    color: var(--couleur-principale, #0d5aa7);
    font-size: 1.3em;
    margin: 0 0 5px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.paiement-cta-section hr {
    border: none;
    border-top: 1px solid #eee;
    margin: 15px 0 20px 0;
}

/* Bouton "Voir la session" dans la section actions de la réservation */
/* Ce bouton portait le dégradé violet d'OCYTOMILK (#667eea → #764ba2),
   écrit en dur ici. Il appartient à la famille « Boutons de liste » de
   l'univers : il est donc ajouté aux deux règles d'entete.php, aux côtés
   de .session-bouton, .formation-carte-bouton, .formation-ligne-bouton et
   .equipe-bouton, et se règle depuis
       Univers → Éléments interactifs → Boutons de liste

   CE QUI SUIT N'EST QU'UN REPLI. entete.php n'écrit rien quand un champ
   de l'univers est vide — « la feuille d'origine garde la main », dit son
   commentaire. Ces valeurs reprennent donc celles de .session-bouton, le
   voisin le plus proche : plein au repos, détouré au survol, comme TOUS
   les boutons de liste du site. */
.btn-voir-session {
    background: var(--couleur-principale, #2061b7);
    border: 1px solid var(--couleur-principale, #2061b7);
    color: #ffffff;
}

.btn-voir-session:hover {
    background: transparent;
    color: var(--couleur-principale, #2061b7);
}

/* ===== Badges cliquables visio/replay (carte session de la réservation) ===== */
/* Nouveau design (site public uniquement — l'admin garde l'ancien style
   pilule compact) : grande icône carrée 100x100 sans fond, titre en
   dessous, tout centré, sans icône de lien. Couleur unique par état
   (currentColor propage au cadre + à l'icône + au libellé) : rouge si actif,
   gris si inactif/session passée. */
.badge-media {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
}
.badge-media-icon {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}
.badge-media-icon .material-symbols-outlined {
    font-size: 100px;
    color: inherit;
}
.badge-media-label {
    color: inherit;
}

/* L'ÉTAT, SOUS LE TITRE — ajouté le 10/09/2026.
   « Visio » reste à sa taille, et « disponible » / « indisponible » vient
   en dessous, plus discret. Deux lignes plutôt qu'une : le badge garde la
   largeur de son icône (100 px) et deux badges côte à côte tiennent
   encore sur un téléphone, ce que « Replay indisponible » d'un seul tenant
   ne permettait pas.

   `color: inherit` : le mot suit la couleur du badge — rouge quand c'est
   ouvrable, gris sinon. La couleur et le mot disent donc la même chose,
   ce qui laisse l'information lisible même pour qui distingue mal le
   rouge du gris. */
/* LA FENÊTRE DU REPLAY, QUI PORTE MAINTENANT LE LECTEUR — 10/09/2026.

   Plus large que les autres fenêtres du site : elles portent un message,
   celle-ci porte une vidéo. `min()` plutôt qu'une largeur fixe pour que
   la fenêtre reste dans l'écran sur un téléphone.

   ⚠ `max-height: 82vh` + `overflow-y: auto` : sans cela, sur un portable
     posé en paysage, le bouton « Fermer » passe sous le bord de l'écran
     et l'on ne peut plus refermer la fenêtre autrement qu'en rechargeant. */
/* ⚠ C'EST LA VIDÉO QUI CÈDE LA PLACE, JAMAIS LE TEXTE — 10/09/2026.

   Première version : la fenêtre débordait et devenait défilante. Elle
   défilait bien, mais RIEN NE LE LAISSAIT DEVINER — la mention légale
   était simplement coupée en bas, et on la croyait tronquée. Mesuré :
   118 px hors champ sur un écran 1440x900, 236 px sur un 1280x720.

   Une mention légale à moitié lisible ne vaut pas mieux qu'une mention
   absente : c'est elle qui doit rester entière, et la vidéo qui rétrécit.

   D'où la colonne flex : bandeau, mention et boutons gardent leur
   hauteur (`flex: 0 0 auto`), et le lecteur prend ce qui reste
   (`flex: 1 1 auto` + `min-height: 0`, sans quoi un élément flex refuse
   de descendre sous la taille de son contenu). */
.modal-replay-content {
    width: min(880px, 94vw);
    max-width: 94vw;
    /* Pleine hauteur, à une marge près : la fenêtre porte une vidéo, elle
       a tout intérêt à prendre la place disponible. Les 4 vh laissés
       montrent qu'on est bien dans une fenêtre posée sur la page, et non
       sur une nouvelle page. */
    height: 96vh;
    max-height: 96vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
/* ⚠ `min-height: 0` À CHAQUE ÉTAGE, ET C'EST INDISPENSABLE.
     Un élément flex refuse par défaut de descendre sous la taille de son
     contenu (`min-height: auto`). La chaîne fait ici trois étages —
     fenêtre › scène › zone vidéo — et il suffit qu'un seul l'oublie pour
     que la vidéo pousse la mention hors de l'écran.

   Mesuré au moment où la scène a été ajoutée : la mention est repartie
   165 px hors champ en 1280x720, alors qu'elle tenait juste avant. Une
   règle `flex: 0 0 auto` posée sur tous les enfants directs avait figé la
   scène au passage. */
.modal-replay-content > *:not(.modal-replay-scene) {
    flex: 0 0 auto;
}

/* LA FENÊTRE DE VISIOCONFÉRENCE — 10/09/2026.
   Elle reprend `.modal-replay-content` : même largeur, même hauteur, même
   colonne flex. Seule la zone centrale diffère, parce qu'elle accueille le
   SDK de Zoom au lieu d'une balise vidéo.

   ⚠ `min-height` en dur sur la zone : le SDK remplit un conteneur qui,
     au moment de l'initialisation, ne contient encore rien. Sans hauteur
     minimale il serait plat, et Zoom calculerait ses dimensions sur zéro —
     la réunion s'ouvrirait dans une bande d'un pixel. */
.modal-visio-zone {
    flex: 1 1 auto;
    min-height: 320px;
    display: flex;
    background: #0b0b0b;
    border-radius: 6px;
    overflow: hidden;
}

/* ⚠ LA FENÊTRE DE VISIO EST EXACTEMENT CELLE DU REPLAY.
   Elle ne surcharge RIEN : même largeur, même hauteur (96 vh), même
   colonne flex, même bandeau, même mention en bas. Deux fenêtres qui se
   ressemblent à peu près sont pires qu'une seule : on remarque l'écart
   sans comprendre pourquoi il existe.

   J'avais tenté de la laisser s'adapter à son contenu, pour éviter le
   vide blanc sous la réunion. Mauvaise réponse : le vide venait de ce que
   Zoom ignorait la place disponible, pas de la hauteur de la fenêtre.
   C'est donc au SDK qu'on donne les dimensions (voir `_modal_visio.php`),
   et la fenêtre reste identique à sa jumelle. */
.modal-visio-zone > div {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   LES FENÊTRES DE ZOOM PAR-DESSUS LA NÔTRE — corrigé le 10/09/2026
   ═══════════════════════════════════════════════════════════════════
   « Cette réunion est enregistrée… en restant, vous consentez à être
   enregistré(e) » : ce pavé, son texte et ses boutons viennent du SDK de
   Zoom. Ils ne sont pas désactivables depuis le site — c'est une
   obligation qui incombe à Zoom, pas un choix de mise en page.

   ⚠ MA PREMIÈRE RÈGLE VISAIT `.disclaimer_container`, QUI N'EXISTE PAS
     ICI. J'avais relevé ce nom dans la feuille de style du paquet npm
     sans vérifier qu'il était bien celui de la vue intégrée. Mesuré dans
     le navigateur de Samuel, la chaîne réelle est tout autre :

         zoom-MuiPopper-root   position: absolute   z-index: auto
                               x = -9   y = 0   480 × 508

     C'est un « Popper » de la bibliothèque MUI, posé à CÔTÉ de notre
     fenêtre dans la page (et non dedans), sans rang d'empilement : il est
     donc peint dans l'ordre du document, forcément derrière nos 2000.

   ⚠ ET IL N'EST PAS CENTRÉ PARCE QU'IL EST ANCRÉ. Un Popper se place par
     rapport à un élément de l'interface de Zoom ; cet ancrage tombe hors
     de la fenêtre, d'où le x = -9. Ce n'est pas un défaut de centrage
     qu'on corrige en déplaçant : il faut le sortir de son ancrage.
   ═══════════════════════════════════════════════════════════════════ */

/* 1. TOUTES les fenêtres flottantes de Zoom passent devant la nôtre.
      Menus, infobulles, panneaux : la réunion se tient DANS notre
      fenêtre, donc tout ce qu'elle ouvre doit pouvoir s'afficher
      par-dessus. Règle simple, sans `!important`, sans pari. */
.zoom-MuiPopper-root {
    z-index: 2100;
}

/* 2. LE PAVÉ DE CONSENTEMENT, LUI, EST RECENTRÉ.
      On le reconnaît au titre de niveau 1 qu'il contient : un menu ou une
      infobulle n'en a pas. On le détache de son ancrage et on le pose sur
      toute la page, comme la boîte de dialogue qu'il est.

   ⚠ CETTE RÈGLE EST ÉCRITE SÉPARÉMENT DE LA PREMIÈRE, ET C'EST VOULU.
     `:has()` n'est pas connu de tous les navigateurs, et celui qui
     l'ignore jette la règle ENTIÈRE — y compris la partie qu'il
     comprenait. Séparées, un vieux navigateur perd le centrage mais garde
     le premier plan : le pavé reste utilisable.

   ⚠ `!important` est ici indispensable et non pas confortable : MUI écrit
     `position`, `left`, `top` et `transform` en style DIRECT sur
     l'élément, et les recalcule à chaque mise à jour. Une règle ordinaire
     ne pèserait rien contre cela.

   ⚠ C'EST UN PARI SUR LA MISE EN PAGE DE ZOOM, contrairement à la règle
     précédente. Si une version future change cette structure, le pavé
     reviendra à son ancrage — mal placé, mais visible et cliquable grâce
     à la règle 1. Jamais invisible. */
.zoom-MuiPopper-root:has(.zoom-MuiTypography-h1) {
    position: fixed !important;
    inset: 0 !important;
    transform: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    overflow-y: auto !important;
}

/* Une fenêtre courte ne doit pas couper les boutons « J'ai compris » et
   « Quittez la réunion » : le pavé mesure 508 px de haut, et un écran
   d'ordinateur portable avec la console ouverte n'en fait pas toujours
   autant. */
.zoom-MuiPopper-root:has(.zoom-MuiTypography-h1) > * {
    max-width: 100%;
    min-width: 0;
}
.zoom-MuiPopper-root:has(.zoom-MuiTypography-h1) .zoom-MuiPaper-root {
    max-height: 92vh;
    max-width: 100%;
    overflow-y: auto;
}
.modal-visio-scene:fullscreen .modal-visio-zone,
.modal-replay-scene:fullscreen .modal-visio-zone {
    border-radius: 0;
}
.modal-replay-scene:-webkit-full-screen .modal-visio-zone {
    border-radius: 0;
}

/* Le motif technique d'un échec de visio : replié, discret, et lisible
   quand on l'ouvre. Il sert à celui qui dépanne, pas à l'apprenante. */
.modal-visio-detail {
    margin-top: 8px;
    font-size: 12px;
    color: #777;
}
.modal-visio-detail code {
    display: block;
    margin-top: 6px;
    padding: 8px 10px;
    background: rgba(0, 0, 0, .05);
    border-radius: 4px;
    word-break: break-word;
    white-space: pre-wrap;
    font-size: 11px;
}

/* LA SCÈNE : la vidéo et la mention, ensemble. Hors plein écran elle ne
   fait rien de visible — elle existe pour que le plein écran emporte les
   deux d'un bloc. */
.modal-replay-scene {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
}
/* ⚠ LA ZONE DE LA VISIO DOIT ÊTRE EXCLUE ELLE AUSSI.
   Sans son nom ici, elle recevait `flex: 0 0 auto` comme le bandeau et la
   mention : elle ne pouvait pas s'étirer, et la réunion restait à sa
   taille pendant que le bas de la fenêtre se vidait. C'est la vraie cause
   du blanc — pas la hauteur de la fenêtre. */
/* ⚠ LA MENTION EST EXCLUE ELLE AUSSI — 11/09/2026, et c'est le coeur du
     correctif du jour. Avec `flex: 0 0 auto` elle ne cédait RIEN : quand la
     fenêtre manquait de hauteur, elle sortait de la scène et retombait sur
     le bouton « Plein écran », qui n'attrapait plus le clic.

   ⚠ JE L'AVAIS D'ABORD LAISSÉE DANS CETTE LISTE en écrivant sa propre
     règle plus bas. Elle ne s'appliquait pas : `:not()` compte comme son
     argument, ce sélecteur pèse donc trois classes, et
     `.modal-replay-scene > .modal-replay-mention` n'en pèse que deux. La
     mention gardait `0 0 auto` et le défaut restait entier. L'exclure ici
     est la seule façon lisible de lui rendre la main. */
.modal-replay-scene > *:not(.modal-replay-zone-video):not(.modal-visio-zone):not(.modal-replay-mention) {
    flex: 0 0 auto;
}

/* ⚠⚠⚠ LA MENTION PASSAIT PAR-DESSUS LE BOUTON « PLEIN ÉCRAN ».
     Signalé par une inscrite : « impossible de mettre en plein écran ». Le
     bouton était là ; c'est le texte qui lui tombait DESSUS, et un texte
     posé sur un bouton intercepte le clic à sa place.

     Mesuré sur 819 x 480 (petit portable, ou zoom à 125 %) : la scène
     disposait de 334 px, son contenu en réclamait 421. La zone vidéo avait
     atteint son plancher de 160 px et ne pouvait plus se réduire ; la
     mention ne cédait rien non plus. Le surplus sortait de la scène et
     retombait sur la barre des boutons.

   ⚠ UNE PREMIÈRE CORRECTION A ÉTÉ ÉCARTÉE : `overflow: auto` sur la SCÈNE.
     Le bouton était bien dégagé — mais le bandeau du titre, qui déborde
     VOLONTAIREMENT par des marges négatives pour toucher les bords de la
     fenêtre, se faisait alors rogner. Un conteneur qui défile coupe aussi
     ce qui dépassait exprès. Le client l'a vu en une capture d'écran.

   ⚠ C'EST DONC LA MENTION QUI CÈDE, ET ELLE SEULE : elle se réduit quand
     la place manque, et son texte devient défilable DANS sa propre boîte.
     Le bandeau garde ses marges négatives, la vidéo garde son plancher, et
     plus rien ne sort de la scène.

   ⚠ `min-height` : sans lui elle pourrait être écrasée jusqu'à disparaître.
     Deux lignes restent toujours lisibles — assez pour qu'on sache qu'il y
     a un texte, et qu'on puisse le dérouler. */
.modal-replay-scene > .modal-replay-mention {
    flex: 0 1 auto;
    min-height: 62px;
    overflow: auto;
}
.modal-replay-zone-video {
    flex: 1 1 auto;
    min-height: 160px;
    display: flex;
}

/* Le bouton de sortie n'existe qu'en plein écran (voir plus bas). */
.modal-replay-sortie {
    display: none;
}

/* ─────────────────────────────────────────────────────────────────────
   LE PLEIN ÉCRAN
   ─────────────────────────────────────────────────────────────────────
   ⚠ LES DEUX SÉLECTEURS SONT ÉCRITS SÉPARÉMENT, ET C'EST OBLIGATOIRE.
     Un navigateur qui ne connaît pas `:-webkit-full-screen` jette la
     règle ENTIÈRE si les deux sont groupés par une virgule — y compris la
     partie qu'il comprenait. Grouper ici, c'est perdre le plein écran sur
     un navigateur ou sur l'autre, sans rien qui l'explique.

   La mention passe en bande basse sur toute la largeur : c'est le moment
   où la vidéo occupe tout l'écran, donc celui où elle doit rester lisible. */
.modal-replay-scene:fullscreen {
    background: #000;
    padding: 0;
}
.modal-replay-scene:-webkit-full-screen {
    background: #000;
    padding: 0;
}

/* ⚠ LE BANDEAU EN PLEIN ÉCRAN : les marges négatives sautent.
     Hors plein écran elles servent à lui faire toucher les bords de la
     fenêtre, en annulant les 30 px de `.modal-content`. En plein écran il
     n'y a plus de padding à annuler : les garder le ferait dépasser de
     l'écran par la gauche et par la droite. */
.modal-replay-scene:fullscreen .modal-replay-entete {
    margin: 0 0 0 0;
    border-bottom: 1px solid rgba(255, 255, 255, .18) !important;
    padding: 12px 28px;
}
.modal-replay-scene:-webkit-full-screen .modal-replay-entete {
    margin: 0 0 0 0;
    border-bottom: 1px solid rgba(255, 255, 255, .18) !important;
    padding: 12px 28px;
}

.modal-replay-scene:fullscreen .modal-replay-video {
    border-radius: 0;
}
.modal-replay-scene:-webkit-full-screen .modal-replay-video {
    border-radius: 0;
}

.modal-replay-scene:fullscreen .modal-replay-mention {
    margin: 0;
    padding: 14px 28px;
    max-width: none;
    border-left: none;
    border-radius: 0;
    border-top: 1px solid rgba(255, 255, 255, .18);
    background: rgba(0, 0, 0, .82);
    color: #e6e6e6;
    font-size: 13px;
}
.modal-replay-scene:-webkit-full-screen .modal-replay-mention {
    margin: 0;
    padding: 14px 28px;
    max-width: none;
    border-left: none;
    border-radius: 0;
    border-top: 1px solid rgba(255, 255, 255, .18);
    background: rgba(0, 0, 0, .82);
    color: #e6e6e6;
    font-size: 13px;
}

/* La sortie, en haut à droite de l'écran : en plein écran la croix de la
   fenêtre n'est plus visible, elle est restée hors de la scène. */
.modal-replay-scene:fullscreen .modal-replay-sortie {
    display: flex;
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 3;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    cursor: pointer;
}
.modal-replay-scene:-webkit-full-screen .modal-replay-sortie {
    display: flex;
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 3;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    cursor: pointer;
}

/* Le fond noir derrière la vidéo : une vidéo verticale ou carrée laisse
   des bandes sur les côtés, et un fond blanc les rend criardes.
   `object-fit: contain` : la vidéo se loge dans la place disponible sans
   jamais être déformée. */
.modal-replay-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
    border-radius: 6px;
}

/* LE BANDEAU DE LA FENÊTRE, IDENTIQUE À CELUI DE LA LISTE.
   Les règles de `.reservation-card-new .reservation-header-new` sont
   ancrées sur la carte : on refait ici le même ancrage pour la fenêtre.

   ⚠ Le fond, le rayon et la bordure sont imposés par `entete.php`
     (univers) en !important avec une spécificité (0,1,0). Nos deux
     classes pèsent (0,2,0) : elles passent devant, y compris face à leurs
     !important. C'est la même mécanique que pour la carte — et c'est
     pourquoi le bandeau prendra tout seul les couleurs de chaque site. */
.modal-replay-content .modal-replay-entete {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 22px;
    /* Le bandeau touche les bords hauts de la fenêtre : les marges de
       `.modal-content` (30 px) sont annulées sur ces trois côtés. */
    margin: -30px -30px 16px;
    border-bottom: 1px solid #ddd !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    box-shadow: none !important;
}
.modal-replay-content .modal-replay-entete .reservation-header-logo {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
}
.modal-replay-content .modal-replay-entete .reservation-header-logo img {
    height: 54px;
    width: 54px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}
.modal-replay-content .modal-replay-entete .reservation-title-new {
    flex: 1;
    margin: 0;
}
/* La date et l'heure, sous le titre et plus discrètes. `display: block`
   les met à la ligne : accolées au titre, elles se liraient comme une
   suite du nom de la formation. */
/* ⚠ LA CROIX DE FERMETURE PASSE EN BLANC — sans quoi elle disparaît.
   Elle est en gris #999 par défaut, ce qui va très bien sur le fond blanc
   des autres fenêtres. Ici elle se retrouve posée sur le bandeau coloré de
   l'univers, où elle devient presque invisible : mesuré à l'écran, on la
   cherche. Le liseré sombre la garde lisible même sur un bandeau clair. */
.modal-replay-content .modal-close {
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
    z-index: 2;
}
.modal-replay-content .modal-close:hover {
    color: #fff;
    opacity: .8;
}

.modal-replay-content .modal-replay-quand {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 400;
    opacity: .85;
}

/* LA MENTION SUR LA COPIE — pas un `text-muted` de bas de page.
   Elle doit se lire, sans crier : un fond très légèrement teinté et un
   filet à gauche suffisent à la détacher du reste sans la transformer en
   avertissement agressif. */
.modal-replay-mention {
    margin: 14px 0 0;
    padding: 10px 14px;
    font-size: 12px;
    line-height: 1.45;
    color: #555;
    background: rgba(0, 0, 0, .035);
    border-left: 3px solid rgba(0, 0, 0, .18);
    border-radius: 0 6px 6px 0;
}
.modal-replay-mention .material-symbols-outlined {
    font-size: 16px;
    margin-right: 4px;
}

.badge-media-etat {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    color: inherit;
}
/* Espace entre Visio et Replay quand les deux sont affichés côte à côte */
.badge-media + .badge-media {
    margin-left: 20px;
}
.badge-media.badge-link {
    color: var(--couleur-principale, #0d5aa7);
    cursor: pointer;
}
.badge-media.badge-link-off {
    color: #888888;
    cursor: default;
}

/* Variante secondaire du badge (replay), alignée sur le style admin */
.badge-secondary {
    background: #6c757d;
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
}

/* Badge avec lien actif : léger feedback au survol (le badge-media n'utilise
   plus l'icône de lien, mais garde cet effet de survol) */
.badge-link {
    transition: opacity 0.15s;
}
.badge-link:hover {
    opacity: 0.85;
}
/* Badge sans lien : non cliquable. Pas d'opacité réduite ici (contrairement
   à l'ancien style) car le gris de .badge-media.badge-link-off suffit déjà
   à signaler l'état inactif — cumuler les deux le rendrait trop pâle. */
.badge-link-off {
    cursor: default;
}

/* Utilitaires de typographie pour les icônes inline dans les badges */
.va-middle {
    vertical-align: middle;
}
/* Titre de la modale « Déjà un compte ? » : niveau h4, mais avec la police
   standard du texte (pas la police des titres), et l'icône material à la même
   taille que le texte du titre (1em). */
.modal-title {
    font-family: inherit !important;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 22px; /* plus d'espace entre le titre et le bloc de texte */
}
.modal-title .material-symbols-outlined {
    font-size: 1em !important;
    line-height: 1; /* centrage vertical propre de l'icône avec le titre */
}
.fs-16 {
    font-size: 16px;
}

/* Largeur de modale réutilisable */
.mw-500 {
    max-width: 500px;
}

/* Ligne d'actions en bas de modale (boutons côte à côte) */
.modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 20px;
    flex-wrap: wrap;
}

/* Modale info connexion (reserver.php) : marge entre les 2 paragraphes,
   icône du titre alignée sur la taille réelle du h2 (Google Material Symbols
   impose 24px par défaut via sa propre feuille de style, indépendamment du
   contexte — 1em force l'icône à suivre la taille du texte du h2). */
#modalInfoConnexion h2 {
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}
#modalInfoConnexion p {
    margin: 0 0 16px;
}
#modalInfoConnexion p:last-of-type {
    margin-bottom: 0;
}
#modalInfoConnexion h2 .material-symbols-outlined {
    font-size: 1em;
    font-weight: bold;
}

/* ============================================================================
   Layout fiche formation pleine largeur (formations.php — onglet Liste)
   ────────────────────────────────────────────────────────────────────────────
   Chaque formation est présentée en 3 colonnes (visuel | contenu | infos pratiques)
   façon "vitrine", au lieu de l'ancienne grille de cards. Le bloc droite varie
   selon le type :
     - Présentiel : modalité + prix + lieu + liste sessions
     - Masterclass : modalité Visio + prix + liste sessions avec date+heure
   ============================================================================ */
.formations-liste {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin: 30px 0;
}

.formation-fiche {
    display: grid;
    grid-template-columns: minmax(220px, 320px) 1fr minmax(220px, 280px);
    gap: 30px;
    padding: 30px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    align-items: start;
}

/* Colonne gauche : visuel */
.formation-fiche-visuel {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.formation-fiche-image {
    width: 100%;
    height: auto;
    border-radius: 12px;
    display: block;
}
/* Note : on a un display:flex avec gap, donc les images de galerie s'empilent
   automatiquement les unes sous les autres avec un espacement régulier. */

/* Colonne centre : titre + descriptif */
/* Le niveau, au-dessus du titre dans la liste des formations. Discret : c'est
   une étiquette, pas un titre — il annonce sans concurrencer le nom de la
   formation juste en dessous. */
.formation-fiche-niveau {
    margin: 0 0 6px;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--couleur-secondaire, #6c8299);
}

.formation-fiche-titre {
    color: var(--color-brand);
    font-size: 1.6rem;
    line-height: 1.25;
    margin: 0 0 20px;
}
.formation-fiche-desc {
    color: #333;
    line-height: var(--line-height, 1.55);
    font-size: 1rem;
}

/* Colonne droite : infos pratiques + sessions */
.formation-fiche-infos {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.ff-info-line {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--color-brand);
    font-weight: 500;
}
.ff-info-line .material-symbols-outlined { font-size: 22px; }
.ff-info-line-lieu { align-items: flex-start; }
.ff-info-line-lieu .material-symbols-outlined { margin-top: 2px; }

/* Bloc liste des sessions à venir */
.ff-sessions {
    margin-top: 6px;
    border: var(--ff-sessions-border, 1px solid #eee);
    border-top: var(--ff-sessions-border, 1px solid #eee);
    padding-top: 14px;
    background: var(--ff-sessions-bg, transparent);
    color: var(--ff-sessions-color, inherit);
    font-family: var(--ff-sessions-font-family, inherit);
    font-size: var(--ff-sessions-font-size, inherit);
    font-weight: var(--ff-sessions-font-weight, inherit);
    line-height: var(--ff-sessions-line-height, inherit);
    border-radius: var(--ff-sessions-radius, 0);
    box-shadow: var(--ff-sessions-shadow, none);
}
.ff-sessions-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    color: var(--color-brand);
    margin: 0 0 15px;
    font-weight: 600;
}
.ff-sessions-title .material-symbols-outlined { font-size: 20px; }
.ff-sessions-empty {
    color: #888;
    font-style: italic;
    margin: 0;
    padding: 8px 0;
}
.ff-sessions-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ff-session-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    background: #f8f9fa;
    border-radius: 8px;
}
.ff-session-date {
    font-size: 0.92rem;
    color: #333;
    flex: 1;
    min-width: 0;
}
.ff-session-heure {
    color: #666;
    margin-left: 4px;
}
.ff-session-btn {
    background: var(--color-cta, #c4a96a);
    color: #fff;
    padding: 6px 14px;
    border-radius: 20px;
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 500;
    white-space: nowrap;
    transition: opacity 0.15s;
}
.ff-session-btn:hover { opacity: 0.85; }

/* Responsive : sur tablette et mobile, on empile les 3 colonnes */
@media (max-width: 900px) {
    .formation-fiche {
        grid-template-columns: 1fr;
        padding: 20px;
    }
    /* Ordre voulu sur mobile : Titre → Visuel → Description → Intervenants →
       Infos pratiques/sessions. Le titre et la description vivent tous les
       deux dans .formation-fiche-contenu (un seul item de grille) : on ne
       peut pas insérer le visuel "entre les deux" avec un simple order sur
       ce conteneur. Astuce : display:contents "dissout" .formation-fiche-contenu
       (uniquement sur mobile) pour que ses enfants (titre, description,
       bloc intervenants) deviennent eux-mêmes des items de grille
       individuellement ordonnables, sans toucher au HTML/PHP (partagé par
       formations_masterclass_en_ligne.php, formations_presentiel.php et
       _liste_formations_default.php). */
    .formation-fiche-contenu { display: contents; }
    .formation-fiche-titre  { order: 1; }
    .formation-fiche-visuel { order: 2; max-width: 400px; margin: 0 auto; }
    .formation-fiche-desc   { order: 3; }
    .ff-personnes-block     { order: 4; }
    .formation-fiche-infos  { order: 5; }
    .formation-fiche-titre { font-size: 1.4rem; }
}

/* Sur petit mobile, le visuel (souvent un post Instagram carré/portrait très
   chargé visuellement) devient disproportionné par rapport à l'écran et
   relègue le titre/description/sessions loin en dessous du pli. On réduit
   sa taille max et on plafonne sa hauteur (object-fit: contain, jamais
   cover, pour ne jamais rogner le texte/logo du visuel). */
@media (max-width: 480px) {
    .formation-fiche-visuel { max-width: 260px; }
    .formation-fiche-image {
        max-height: 320px;
        width: auto;
        object-fit: contain;
        margin: 0 auto;
    }
}

/* Note historique : la classe body .page-formations-large servait à étendre
   le container à 1140px sur les seules pages formations.php / formations_*.php
   pendant que le reste du site était à 900px. Depuis le passage global du
   container à 1140px, cette surcharge n'a plus d'utilité et a été retirée.
   Les variables $_body_class = 'page-formations-large' dans les templates
   ont également été supprimées. */
.formations-liste {
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
}

/* Description du type de formation sous le h1 du header de formations.php.
   Remplace le h2 générique précédent. Le texte vient du champ
   types_formation.description (saisi en admin via CKEditor — HTML enrichi). */
.formations-header-description {
    color: #555;
    line-height: var(--line-height, 1.55);
    font-size: 1.05rem;
    max-width: 1140px;
    margin: 50px auto 0;
    text-align: left;
    padding: 0 20px;
}
/* Override des marges par défaut des éléments HTML générés par CKEditor :
   les <p>, <ul>, <ol> ne doivent pas casser le rythme vertical du header. */
.formations-header-description p:first-child { margin-top: 0; }
.formations-header-description p:last-child  { margin-bottom: 0; }
.formations-header-description ul,
.formations-header-description ol { padding-left: 24px; }

/* Note : le bouton "Calendrier" des templates formations_presentiel.php et
   formations_masterclass_en_ligne.php utilise directement le markup standard
   .tabs > .tab-btn (cf. plus haut dans ce fichier), pour conserver strictement
   le rendu visuel original des 3 onglets que Charlotte avait l'habitude de voir. */

/* Wrapper "info" (date + places restantes) à gauche du bouton sur les sessions
   listées des templates formations_presentiel.php / formations_masterclass_en_ligne.php.
   Permet d'empiler la date et la ligne "X places restantes sur Y" sans serrer
   le bouton "En savoir plus et s'inscrire" qui est plus long que l'ancien "S'inscrire". */
.ff-session-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ff-session-places {
    font-size: 0.82rem;
    color: #666;
}

/* Surcharge ciblée : dans le bloc "Sessions à venir" des templates
   formations_presentiel.php / formations_masterclass_en_ligne.php uniquement,
   on retire le padding et le margin-bottom des .session-card pour qu'elles
   s'intègrent plus discrètement dans la colonne droite étroite des fiches
   formation (cohérence visuelle avec les autres éléments du bloc ff-sessions).
   Le rendu sur formation_detail.php (où les session-card sont dans .sessions-grid)
   reste inchangé.
   Le `display: flex; flex-direction: column; gap: 15px` espace régulièrement
   tous les éléments verticaux internes (date, statut, prix, lieu, bouton) à
   la demande de Charlotte. */
.ff-sessions .session-card {
    padding: 10px 10px 10px 20px;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
}

/* La toute première carte juste après un titre (.ff-sessions-title) n'a pas
   besoin de son propre margin-top : le margin-bottom du titre (15px) suffit
   à créer l'espacement voulu. Sans cette règle, les deux marges s'additionnent
   (15 + 25 = 40px), ce qui donne un écart bien trop grand sous le titre. */
.ff-sessions-title + .session-card {
    margin-top: 0;
}

/* Décalage à gauche du statut et du bouton dans les cartes de session
   (formations.php). Scopé à .ff-sessions pour ne pas toucher le reste du site. */
.ff-sessions .session-card .session-status { margin-left: 32px; }
.ff-sessions .session-card .btn { margin-left: 32px; }

/* Désactivation des effets de hover qui font sauter le bloc dans ce contexte.
   Sur formation_detail.php le rollover translateY(-3px) reste actif et fait
   un joli effet lift, mais dans la colonne droite étroite des templates le
   décalage est gênant et entraîne tout le contenu autour. On supprime aussi
   le rollover du bouton qui amplifiait l'effet. */
.ff-sessions .session-card:hover,
.ff-sessions .session-card .btn:hover {
    transform: none;
}

/* Blocs Formateurs / Intervenants affichés sous les visuels dans la colonne
   gauche des fiches formation du template formations_presentiel.php.
   Chaque personne : photo ronde + nom + titre éventuel, dans une mini-carte
   discrète sur fond clair. Le tout reste contenu dans la colonne 320px. */
.ff-personnes-block {
    margin-top: 30px;
}
.ff-personnes-title {
    font-size: 1rem;
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-brand);
}
.ff-personne-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 10px 10px 20px;
    border-radius: 10px;
}
.ff-personne-card:last-child { margin-bottom: 0; }
.ff-personne-photo {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.ff-personne-info { min-width: 0; }
.ff-personne-nom { font-weight: 500; color: #222; }
.ff-personne-titre {
    font-size: 0.85rem;
    color: #666;
    margin-top: 2px;
}

/* Bloc "formateur/intervenant ponctuel" affiché dans une session-card,
   pour un ajout spécifique à une session précise (ex: remplaçant invité
   pour une seule date). Calqué sur .session-location-mini. */
.session-staff-mini {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    color: #555;
    font-size: 0.9em;
    line-height: 1.4;
}

.session-staff-mini .material-symbols-outlined {
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 1px;
}

/* Ajustement padding demandé par Samuel sur les blocs tarifs/code promo
   de la page de réservation, pour un espacement horizontal plus confortable. */
.reservation-tarifs-block {
    padding: 20px 30px;
}

.code-promo-box {
    padding: 20px 30px;
}

/* Bandeau repliable PAGE-LEVEL "Sessions à venir" / "Sessions passées",
   regroupant les fiches formations elles-mêmes (formations_presentiel.php
   et formations_masterclass_en_ligne.php). Même esprit que le pattern
   .formation-header de l'admin (admin/style_admin.css : bandeau coloré +
   chevron qui change de glyphe au clic + badge de comptage). */
.formations-groupe-header {
    color: #fff;
    padding: 15px 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 10px;
    margin-bottom: 6px;
}

.formations-groupe-header .toggle-icon {
    font-size: 22px;
}

.formations-groupe-header.bg-groupe-a-venir {
    background: #3498db;
}

.formations-groupe-header.bg-groupe-passees {
    background: #95a5a6;
}

.formations-groupe-titre {
    font-size: 1.1em;
    font-weight: bold;
}

.formations-groupe-badge {
    background: #6fcf97;
    color: #1d4d2b;
    border-radius: 12px;
    padding: 2px 12px;
    font-size: 0.85em;
    font-weight: 700;
}

.formations-groupe-header.bg-groupe-passees .formations-groupe-badge {
    background: rgba(255, 255, 255, 0.35);
    color: #fff;
}

.formations-groupe-contenu {
    margin-bottom: 20px;
}

/* En-tête repliable INTERNE à chaque fiche formation : "Sessions à venir"
   / "Sessions passées" dans le panneau latéral (sobre, sans bandeau
   coloré, cohérent avec le reste du panneau .ff-sessions). */
.ff-sessions-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    margin-bottom: 10px;
    color: var(--color-brand);
}

.ff-sessions-toggle .material-symbols-outlined { font-size: 20px; }

.ff-sessions-toggle-titre {
    font-size: 0.95rem;
    font-weight: 600;
}

.ff-sessions-toggle-passees {
    margin-top: 16px;
    color: #777;
}

.ff-sessions-badge {
    background: #eee;
    color: #555;
    border-radius: 12px;
    padding: 2px 10px;
    font-size: 0.85em;
    font-weight: 600;
}

.session-card-passee {
    opacity: 0.85;
}

/* Blocs repliables page-level "À venir" / "Passées" sur les pages publiques
   formations_presentiel.php / formations_masterclass_en_ligne.php.
   Markup et classes identiques à admin/sessions.php (formation-group /
   formation-header / bg-formation / session-header-left / header-stats /
   toggle-icon / formation-content / formation-header-count). */
.formation-group {
    margin-bottom: 20px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
}

.formation-header {
    color: #fff;
    padding: 15px 20px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.session-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.formation-header-title {
    font-size: 16px;
    font-weight: bold;
}

.toggle-icon {
    vertical-align: middle;
    font-size: 20px;
    transition: transform 0.2s;
}

.header-stats {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 13px;
}

.formation-header-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    padding: 0 8px;
    line-height: 1;
}

.bg-formation {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.bg-en-cours {
    background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
}

.bg-session-passed {
    background: #95a5a6;
}

.formation-content {
    display: block;
}

.formation-content.collapsed {
    display: none;
}

/* Le panneau qui entoure la liste des fiches sur `formations_presentiel.php`
   et `formations_masterclass_en_ligne.php`. Il s'appelait `.formation-content`
   lui aussi — nom repris d'`admin/sessions.php` avec le balisage des bandeaux
   repliables, retires depuis le 28/09.

 ⚠ CES QUATRE LIGNES NE SONT PAS UN CHOIX NEUF : ce sont exactement les
   proprietes que le panneau recevait par collision de noms, rassemblees ici
   sous son propre nom. Le fond et le rayon venaient de la regle orpheline
   retiree plus haut, le `padding` de la vignette de `formations.php`. Rendu
   identique au pixel pres, verifie au banc. */
/* ⚠ LE FOND BLANC EST RETIRE — 12/10/2026, demande de Samuel.

     Il venait de la regle orpheline d'une fiche formation disparue, et le
     paquet precedent n'avait fait que l'ecrire au bon endroit. Une fois
     identifie, il ne se justifiait plus : CHAQUE FICHE EST DEJA UNE CARTE
     BLANCHE a elle seule (`.formation-fiche` : fond blanc, rayon 16px,
     ombre portee). Le panneau posait donc une seconde surface blanche
     derriere les cartes, visible en debord de 20 px tout autour.

     Les fiches reposent maintenant sur le gris de la page avec leur propre
     ombre. Le `padding` et le `border-radius` restent : la largeur des
     fiches ne bouge pas. */
.formation-groupe-contenu {
    display: block;
    border-radius: 10px;
    padding: 20px;
}

/* Correctif couleur chevron dans les bandeaux repliables .formation-header :
   une règle globale force color: var(--couleur-titres) !important sur tous
   les .material-symbols-outlined — on la surcharge ici pour que les icônes
   dans le bandeau coloré restent blanches. */
.formation-header .material-symbols-outlined {
    color: #fff !important;
}

/* Sous-bloc "En cours" (replay disponible) à l'intérieur du panneau session
   d'une fiche formation masterclass — distingue visuellement des sessions
   réellement closes (titre orange + badge replay sur la carte). */
.ff-sessions-title-en-cours {
    color: #e67e22;
}
.ff-sessions-groupe-separateur {
    margin-top: 25px;
}
.session-card-en-cours {
    border-left: 3px solid #f39c12;
    opacity: 1;
}

/* Espacement entre les fiches formation consécutives uniquement (pas après
   la dernière, pour ne pas créer un grand vide en bas de chaque bandeau
   .formation-content). Nécessaire depuis l'introduction des bandeaux
   repliables "À venir/En cours/Passées" : les fiches sont maintenant
   nichées dans .formation-content (simple bloc, pas de gap flex), donc le
   gap de .formations-liste ne s'applique plus entre elles à l'intérieur
   d'un même groupe. */
.formation-fiche + .formation-fiche {
    margin-top: 30px;
}

/* Liseret discret autour des visuels de formation/session (poster +
   galerie), demandé pour mieux les détacher du fond blanc de la carte. */
.formation-fiche-image {
    border: 1px solid #e0e0e0;
}

/* Encart "Cette structure soutient [association]" affiché sous le visuel
   de la formation, dans la colonne gauche (et non dans les session-cards —
   une seule structure de don à la fois par formation, celle de sa session
   la plus pertinente). Calqué sur le rendu de référence charlottelorisformations.fr. */
.formation-don-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: 20px;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    background: #fff;
}

.formation-don-card img {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
}

.formation-don-card p {
    margin: 0;
    font-size: 0.95em;
    color: #444;
    line-height: 1.4;
}

.formation-don-card a {
    color: var(--color-brand);
}

.formation-don-card p.formation-don-collecte {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #e74c3c;
    font-weight: 600;
}

.formation-don-card p.formation-don-collecte .material-symbols-outlined {
    font-size: 20px;
    font-weight: bold;
    color: #e74c3c;
}

/* Largeur fixe des colonnes gauche/droite de .formation-fiche (au lieu de
   minmax élastique) : 280px pile, la colonne centrale prend tout le reste.
   S'applique aux 3 pages partageant ce markup (formations.php routeur,
   formations_masterclass_en_ligne.php, formations_presentiel.php). */
.formation-fiche {
    grid-template-columns: 280px 1fr 280px;
}

/* Carte structure bénéficiaire affichée à la place du couple Acompte/Solde
   sur reserver.php quand la session a une structure de don configurée
   (3e colonne de .tarifs-row, alignée avec Montant/Don). */
.tarifs-row {
    align-items: center;
}

.tarif-value-don {
    color: #e74c3c;
}

.tarif-don-structure-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    background: #fff;
}

.tarif-don-structure-card img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
}

.tarif-don-structure-card p {
    margin: 0;
    font-size: 0.85em;
    color: #444;
    line-height: 1.3;
}

.tarif-don-structure-card a {
    color: var(--color-brand);
}

/* Compteur "Déjà X € de collecté !" sur les cartes structure de don de
   reserver.php / compte.php / reservation_detail.php — même style que
   .formation-don-card sur formations_masterclass_en_ligne.php. Sélecteur
   renforcé (p.tarif-don-collecte) pour battre la spécificité de la règle
   générique .tarif-don-structure-card p (rouge sinon écrasé par le gris). */
.tarif-don-structure-card p.tarif-don-collecte {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #e74c3c;
    font-weight: 600;
}

.tarif-don-structure-card p.tarif-don-collecte .material-symbols-outlined {
    font-size: 18px;
    font-weight: bold;
    color: #e74c3c;
}

.formation-groupe-vide {
    padding: 20px;
    color: #888;
    font-size: 15px;
    text-align: center;
}

.formations-footer-text {
    width: 100%;
    max-width: 700px;
    margin: 50px auto 30px !important;
    text-align: center !important;
}

.formations-footer-text p {
    margin: 0 0 8px;
    color: #333;
    font-size: 16px;
    text-align: center !important;
}

.formations-footer-text-lien {
    margin-top: 25px !important;
}

.formations-footer-text-lien a {
    color: #b08d57;
    text-decoration: none;
}

.formations-footer-text-lien a:hover {
    text-decoration: underline;
}

/* ============================================================
   Page "Qui sommes-nous ?"
   ============================================================ */
.qsn-titre {
    text-align: center;
    margin: 20px 0 35px;
}

.qsn-titre h1 {
    font-size: 36px;
    color: var(--couleur-principale, #2c3e50);
    margin: 0;
}

.qsn-container {
    max-width: 1100px;
    margin: 0 auto;
}

.qsn-card {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    padding: 35px;
    margin-bottom: 35px;
}

.qsn-card-photo-gauche {
    flex-direction: row;
}

.qsn-card-photo-droite {
    flex-direction: row-reverse;
}

.qsn-card-photo {
    flex: 0 0 500px;
}

.qsn-card-photo img {
    width: 100%;
    border-radius: 10px;
    display: block;
}

.qsn-card-contenu {
    flex: 1;
    min-width: 0;
}

.qsn-card-contenu h2,
.qsn-card-contenu h3 {
    margin: 0 0 15px;
    color: var(--couleur-principale, #2c3e50);
}

.qsn-card-bio {
    line-height: var(--line-height, 1.7);
    color: #444;
    margin-bottom: 20px;
}

.qsn-card-liens {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
}

.qsn-card-liens li {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.qsn-card-liens .material-symbols-outlined {
    font-size: 20px;
    color: var(--couleur-principale, #667eea);
}

.qsn-card-liens a {
    color: inherit;
    text-decoration: none;
}

.qsn-card-liens a:hover {
    text-decoration: underline;
}

.qsn-podcast-card {
    display: flex;
    gap: 16px;
    align-items: center;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 14px;
    text-decoration: none;
    color: inherit;
    max-width: 480px;
    transition: box-shadow 0.15s;
}

.qsn-podcast-card:hover {
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.qsn-podcast-card img {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}

.qsn-podcast-texte strong {
    display: block;
    margin-bottom: 4px;
}

.qsn-podcast-texte p {
    margin: 0;
    font-size: 14px;
    color: #6c757d;
}

@media (max-width: 768px) {
    .qsn-card,
    .qsn-card-photo-droite {
        flex-direction: column;
    }
    .qsn-card-photo {
        flex: none;
        width: 100%;
    }
}

/* Encart informatif page de connexion */
.login-info-box {
    background: #f8f9fa;
    border-left: 4px solid var(--couleur-principale, #667eea);
    border-radius: 0 8px 8px 0;
    padding: 16px 20px;
    margin-bottom: 20px;
    font-size: 14px;
    color: #444;
    line-height: var(--line-height, 1.6);
}

.login-info-box p {
    margin: 0 0 16px;
}

.login-info-box p:last-child {
    margin-bottom: 0;
}

/* ============================================================
   Page d'accueil (index.php)
   ============================================================ */

.index-main {
    max-width: 1140px;
    margin: 0 auto;
    padding: 40px 20px;
}

/* --- Présentation Charlotte + Loris --- */
.index-presentation {
    margin-bottom: 60px;
}

.index-presentation-title {
    text-align: center;
    margin-bottom: 40px;
}

.index-presentation-title h1 {
    font-size: 32px;
    margin: 0 0 10px;
}

.index-formateurs-bloc {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: start;
    gap: 30px;
}

.index-formateur-photo img {
    width: 100%;
    border-radius: 8px;
    object-fit: cover;
    display: block;
}

.index-presentation-text {
    font-size: 16px;
    line-height: var(--line-height, 1.7);
    color: #444;
}

.index-presentation-text p {
    margin: 0 0 12px;
}

/* --- Cartes types de formation --- */
.index-types {
    margin-bottom: 60px;
}

.index-types-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.index-type-card {
    display: block;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    position: relative;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    transition: transform 0.2s, box-shadow 0.2s;
}

.index-type-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}

.index-type-card img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

.index-type-card-placeholder {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Couleur du type transmise via --tf-color (seule donnée dynamique). */
    background: color-mix(in srgb, var(--tf-color, #667eea) 12%, transparent);
}
.index-type-card-placeholder .material-symbols-outlined {
    font-size: 48px;
    color: var(--tf-color, #667eea);
}

.index-type-card-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255,255,255,0.88);
    padding: 12px 16px;
    font-size: 30px;
    font-weight: 700;
    text-align: center;
    color: var(--couleur-texte-corps, #333);
    backdrop-filter: blur(4px);
}

/* --- Témoignages --- */
.index-temoignages {
    margin-bottom: 60px;
}

.index-temoignages h2 {
    text-align: center;
    color: var(--couleur-principale, #667eea);
    margin-bottom: 24px;
}

.index-temoignages-slider {
    position: relative;
    overflow: hidden;
    border: 1px solid #e1e5ea;
    border-radius: 12px;
    padding: 20px 50px;
}

.index-temoignages-track {
    display: flex;
    transition: transform 0.35s ease;
}

.index-temoignages-slide {
    min-width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.index-temoignage-card {
    padding: 10px 0;
}

.index-temoignage-etoiles {
    color: #f5a623;
    font-size: 18px;
    margin-bottom: 8px;
}

.index-temoignage-texte {
    font-size: 13px;
    color: #555;
    line-height: var(--line-height, 1.6);
    margin: 0 0 10px;
}

.index-temoignage-auteur {
    font-size: 13px;
    color: #888;
    margin: 0;
}

.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 32px;
    color: #aaa;
    cursor: pointer;
    padding: 0 6px;
    z-index: 2;
    line-height: 1;
}

.slider-arrow:hover { color: var(--couleur-principale, #667eea); }
.slider-prev { left: 8px; }
.slider-next { right: 8px; }

/* --- Section dons --- */
.index-dons {
    text-align: center;
    margin-bottom: 40px;
}

.index-dons h2 {
    color: var(--couleur-principale, #667eea);
    margin-bottom: 12px;
}

.index-dons p {
    font-size: 16px;
    color: #555;
    max-width: 700px;
    margin: 0 auto 8px;
}

/* "Voici une liste des associations…" : exactement le même style que le
   sous-titre de présentation (.index-sous-titre). On reprend les mêmes valeurs
   et on annule les contraintes de .index-dons p (taille/couleur/largeur). */
.index-dons p.index-sous-titre {
    font-size: 30px;
    font-weight: 600;
    color: var(--couleur-h1) !important;
    line-height: 1.3;
    max-width: none;
    margin: 30px 0 20px;
}

.index-dons-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    margin-top: 24px;
}

.index-don-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.index-don-card {
    display: block;
    background: white;
    border: 1px solid #eee;
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s ease;
}

.index-don-card:hover {
    transform: translateY(-3px);
}

.index-don-card img {
    width: 100%;
    height: auto;
    display: block;
}

.index-don-card .index-don-nom {
    display: block;
    padding: 8px 10px 12px;
    font-size: 12px;
    color: #555;
    line-height: 1.3;
}

.index-don-item span:not(.material-symbols-outlined) {
    font-size: 12px;
    color: #555;
    line-height: 1.3;
}

/* Responsive */
@media (max-width: 700px) {
    .index-formateurs-bloc {
        grid-template-columns: 1fr;
    }
    .index-temoignages-slide {
        grid-template-columns: 1fr;
    }
}

.index-don-item .index-don-collecte {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #e74c3c !important;
    text-align: center;
}

.index-don-item .index-don-collecte .material-symbols-outlined {
    font-size: 16px;
    font-weight: bold;
    color: #e74c3c !important;
    vertical-align: middle;
    margin-right: 4px;
}

/* Sous-titre de la page d'accueil — même couleur que h1 (var(--couleur-h1), pas "inherit" car h1 et le sous-titre sont frères, pas parent/enfant), 30px */
.index-presentation-title p.index-sous-titre {
    font-size: 30px;
    font-weight: 600;
    color: var(--couleur-h1) !important;
    margin: 6px 0 0;
    line-height: 1.3;
}

/* L'icône heart_smile doit être de la même couleur que le texte du compteur de dons (#e74c3c).
   Une règle générique dans entete.php (main .material-symbols-outlined:not(...)... environ 37 :not()
   imbriqués) a une spécificité très élevée (~75 sélecteurs de classe) et gagne sur toute règle simple,
   même avec !important. Pour la surclasser SANS toucher au PHP (tout le CSS doit rester dans ce fichier),
   on répète la classe .index-don-collecte pour dépasser cette spécificité. */
.index-don-collecte.index-don-collecte.index-don-collecte.index-don-collecte.index-don-collecte.index-don-collecte.index-don-collecte.index-don-collecte.index-don-collecte.index-don-collecte.index-don-collecte.index-don-collecte.index-don-collecte.index-don-collecte.index-don-collecte.index-don-collecte.index-don-collecte.index-don-collecte.index-don-collecte.index-don-collecte.index-don-collecte.index-don-collecte.index-don-collecte.index-don-collecte.index-don-collecte.index-don-collecte.index-don-collecte.index-don-collecte.index-don-collecte.index-don-collecte.index-don-collecte.index-don-collecte.index-don-collecte.index-don-collecte.index-don-collecte.index-don-collecte.index-don-collecte.index-don-collecte.index-don-collecte.index-don-collecte.index-don-collecte.index-don-collecte.index-don-collecte.index-don-collecte.index-don-collecte.index-don-collecte.index-don-collecte.index-don-collecte.index-don-collecte.index-don-collecte.index-don-collecte.index-don-collecte.index-don-collecte.index-don-collecte.index-don-collecte.index-don-collecte.index-don-collecte.index-don-collecte.index-don-collecte.index-don-collecte.index-don-collecte.index-don-collecte.index-don-collecte.index-don-collecte.index-don-collecte.index-don-collecte.index-don-collecte.index-don-collecte.index-don-collecte.index-don-collecte.index-don-collecte.index-don-collecte.index-don-collecte.index-don-collecte.index-don-collecte.index-don-collecte.index-don-collecte.index-don-collecte.index-don-collecte.index-don-collecte .material-symbols-outlined {
    color: #e74c3c !important;
}

/* Correctif urgent : la règle "Largeur fixe des colonnes" (.formation-fiche
   { grid-template-columns: 280px 1fr 280px; }) a été ajoutée après la media
   query mobile de .formation-fiche, sans elle-même être scopée — elle
   s'appliquait donc aussi sur mobile et écrasait l'empilement en 1 colonne
   (280+1fr+280 = 560px+ compressés sur un écran de ~375px), cassant tout
   l'affichage sous le visuel (titre, description, sessions, bouton...).
   On réaffirme l'empilement mobile ici, en dernier dans le fichier pour
   être certain de gagner le conflit de spécificité égale. */
@media (max-width: 900px) {
    .formation-fiche {
        grid-template-columns: 1fr;
    }
}

/* Les icônes des badges visio/replay suivent la couleur du badge —
   ⚠ ET LA RUSTINE QUI LE FORÇAIT A ÉTÉ RETIRÉE LE 10/09/2026.

   Il y avait ici une règle qui répétait `.badge-media` SOIXANTE-DIX-HUIT
   fois pour peser plus lourd que le sélecteur générique d'`entete.php`.
   Elle ne pesait pas assez : ce sélecteur enchaîne 43 `:not()`, ce qui
   le porte à 87 classes contre 79. La rustine perdait, et les icônes
   restaient bleues — mesuré : rgb(122,147,185) pour l'icône alors que
   le titre était bien rouge.

   La règle d'`entete.php` porte désormais un
   `:not(.badge-media .material-symbols-outlined)` : elle s'écarte
   d'elle-même, et `.badge-media-icon .material-symbols-outlined`
   (color: inherit, plus haut dans ce fichier) suffit.

   ⚠ Empiler des classes pour gagner une bataille de spécificité, c'est
     déplacer le problème d'un cran : le sélecteur d'en face peut
     toujours grandir. Une exception nommée se lit et se corrige. */


/* ============================================================
   Système de vote sur les masterclass passées (refaire / replay)
   Décompte volontairement non affiché publiquement pour l'instant.
   ============================================================ */
.vote-masterclass {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
    max-width: 100%;
    align-self: stretch;
    box-sizing: border-box;
}

/* Dans une carte de session passée, le lien de vote se retrouve juste sous
   la date : on le décale de 32px (= 22px icône + 10px gap de .ff-info-line)
   pour qu'il s'aligne avec le texte de la date, pas avec son icône — pour
   bien montrer que le vote porte sur CETTE session précise. */
.session-card-passee .vote-masterclass {
    margin-left: 32px;
}

.vote-masterclass--formation {
    margin-top: 0;
    margin-bottom: 14px;
}

.vote-masterclass-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-primary, #667eea);
    font-size: 0.85rem;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s ease;
}

.vote-masterclass-btn .material-symbols-outlined {
    font-size: 18px;
    color: inherit !important;
}

.vote-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    padding: 1px 6px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.08);
    color: inherit;
    font-size: 0.78rem;
    font-weight: 700;
}

.vote-masterclass-btn.voted {
    cursor: default;
}

.vote-masterclass-btn.loading {
    opacity: 0.6;
    pointer-events: none;
    cursor: wait;
}

.vote-masterclass-email {
    display: flex;
    gap: 6px;
    align-items: center;
    width: 100%;
    flex-basis: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    margin-top: 4px;
}

.vote-masterclass-email-input {
    flex: 1;
    min-width: 0;
    padding: 6px 10px;
    border: 1.5px solid #d0d0d8;
    border-radius: 16px;
    font-size: 0.85rem;
}

.vote-masterclass-email-confirm {
    padding: 6px 14px;
    border: none;
    border-radius: 16px;
    background: var(--color-primary, #667eea);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

/* ============================================================
   Normalisation visuelle nom/prénom (22/07/2026) — cf. style_admin.css
   pour le détail, même principe côté public.
   ============================================================ */
input[name="nom"] {
    text-transform: uppercase;
}
input[name="prenom"] {
    text-transform: capitalize;
}

/* Slider structures de don (23/07/2026) — un seul rang d'items en
   nowrap, JS mesure la largeur réelle au runtime pour savoir combien
   tiennent par page et si un slider est nécessaire (pas de seuil fixe :
   le nombre par ligne dépend de la largeur d'écran, cf. index.php). */
.index-dons-slider {
    position: relative;
}
.index-dons-track {
    display: flex;
    flex-wrap: nowrap;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.index-dons-track::-webkit-scrollbar {
    display: none;
}
.index-don-item {
    scroll-snap-align: start;
    width: 150px;
    flex-shrink: 0;
}
@media (max-width: 900px) {
    .index-don-item {
        width: calc(33.333% - 11px);
    }
}
@media (max-width: 480px) {
    .index-don-item {
        width: calc(50% - 8px);
    }
}
.index-dons-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
}
.index-dons-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #d5d5e0;
    cursor: pointer;
    transition: background 0.2s ease;
}
.index-dons-dot.active,
.index-dons-dot:hover {
    background: var(--couleur-principale, #667eea);
}



/* =====================================================================
   Galerie photos d'une formation (formation_detail.php)
   ---------------------------------------------------------------------
   Reprend la mécanique du slider des structures de don ci-dessus : un seul
   rang en `nowrap`, défilement natif avec accroche (`scroll-snap`), et un
   JS qui se contente de faire défiler jusqu'à la bonne photo — aucun calcul
   de pixels à la main.
   Le nombre de photos par page suit ces points de rupture ; le script
   applique exactement les mêmes seuils.
   ===================================================================== */
.galerie-section {
    text-align: center;
    /* La galerie n'est pas une carte : ni fond, ni bordure, ni ombre. Restent
       ses marges, pour qu'elle respire entre le bloc « Prochaines sessions »
       au-dessus et le bouton « Retour aux formations » en dessous. */
    margin-top: 60px;
    margin-bottom: 60px;
}

/* Le titre tirait sa marge basse de la règle `.sessions-section h2`. En
   sortant la galerie de ce bloc, elle a disparu et le titre s'est retrouvé
   collé aux photos. On la rétablit ici, à la même valeur.
   `!important` parce que la règle des marges de typographie (entete.php) en
   porte un : sans lui, une marge réglée pour les H2 dans l'identité visuelle
   écraserait celle-ci. */
.galerie-section .sessions-section-title {
    margin-bottom: 30px !important;
}

.galerie-slider {
    position: relative;
    padding: 0 44px;   /* la place des deux flèches, de part et d'autre */
}

.galerie-track {
    display: flex;
    flex-wrap: nowrap;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.galerie-track::-webkit-scrollbar {
    display: none;
}


/* =====================================================================
   GALERIE — arrivée des photos en cascade, puis des contrôles
   =====================================================================
   Les vignettes apparaissent l'une après l'autre quand la galerie entre
   dans l'écran, façon tuiles qui se posent. Les flèches et les pastilles
   n'arrivent qu'ensuite : tant que les photos se placent, il n'y a rien à
   commander.

   Tout est conditionné à `.js-galerie-anime`, posée par le script
   d'entete.php. Sans JavaScript ou avec les animations réduites, aucune de
   ces règles ne s'applique : la galerie s'affiche entière et immédiatement.
   Une animation ne doit jamais pouvoir retenir un contenu.

   `opacity` et `transform` seulement — jamais `display` : le script du
   slider pose lui-même `display: none` sur les flèches quand tout tient sur
   une page. Les deux mécanismes se seraient contredits.
   ===================================================================== */
.js-galerie-anime .galerie-item {
    /* La vignette arrive d'un peu PLUS GRAND et d'un peu plus haut, puis se
       resserre à sa taille en descendant : le geste d'une photo qu'on pose.
       Partir de plus petit aurait donné l'inverse — une image qui pousse.

       La courbe finit très plat (`cubic-bezier` à .25, 1) : l'essentiel du
       mouvement se fait tôt, la fin s'amortit. C'est ce qui donne la
       sensation de se POSER plutôt que de s'arrêter net. */
    opacity: 0;
    transform: scale(1.09) translateY(-12px);
    transition: opacity .55s ease, transform .55s cubic-bezier(.2, .8, .25, 1);
}

.js-galerie-anime .galerie-section.est-affichee .galerie-item {
    opacity: 1;
    transform: none;
}

/* Le décalage d'une tuile à l'autre. Écrit au sélecteur plutôt que par une
   variable posée sur chaque vignette : cela évite de toucher au PHP, et
   quatre à cinq photos sont visibles à la fois — au-delà, elles sont hors
   du cadre, leur ordre d'arrivée ne se voit pas. */
.js-galerie-anime .galerie-section.est-affichee .galerie-item:nth-child(1)  { transition-delay: 0ms; }
.js-galerie-anime .galerie-section.est-affichee .galerie-item:nth-child(2)  { transition-delay: 100ms; }
.js-galerie-anime .galerie-section.est-affichee .galerie-item:nth-child(3)  { transition-delay: 200ms; }
.js-galerie-anime .galerie-section.est-affichee .galerie-item:nth-child(4)  { transition-delay: 300ms; }
.js-galerie-anime .galerie-section.est-affichee .galerie-item:nth-child(5)  { transition-delay: 400ms; }
.js-galerie-anime .galerie-section.est-affichee .galerie-item:nth-child(6)  { transition-delay: 500ms; }
.js-galerie-anime .galerie-section.est-affichee .galerie-item:nth-child(7)  { transition-delay: 600ms; }
.js-galerie-anime .galerie-section.est-affichee .galerie-item:nth-child(n+8) { transition-delay: 700ms; }

/* Les contrôles arrivent APRÈS la dernière tuile visible. 800 ms : la
   quatrième vignette part à 300 ms et met 500 ms à se poser. Ce délai ne
   dépend donc pas du nombre total de photos, mais du nombre visible — qui
   ne dépasse jamais quatre.

   `visibility` en plus d'`opacity`, et c'est nécessaire : un bouton à
   `opacity: 0` reste parfaitement cliquable. Une flèche qu'on ne voit pas
   encore ne doit pas répondre au clic.

   `visibility` ne se dégrade pas progressivement, elle bascule — mais elle
   RESPECTE le délai, ce qui est tout ce qu'on lui demande : elle passe à
   « visible » au moment précis où la fondue commence. `pointer-events`, lui,
   ne se transitionne pas du tout : il serait passé à « auto » dès la
   première milliseconde, et la flèche invisible aurait été cliquable pendant
   les 800 ms d'attente. Mesuré, et corrigé. */
.js-galerie-anime .galerie-slider .galerie-fleche,
.js-galerie-anime .galerie-dots {
    opacity: 0;
    visibility: hidden;
    transition: opacity .45s ease, visibility 0s linear .45s;
}

.js-galerie-anime .galerie-section.est-affichee .galerie-fleche,
.js-galerie-anime .galerie-section.est-affichee .galerie-dots {
    opacity: 1;
    visibility: visible;
    transition: opacity .45s ease .8s, visibility 0s linear .8s;
}

.galerie-item {
    scroll-snap-align: start;
    flex: 0 0 calc(25% - 15px);
    margin: 0;
}

.galerie-item img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 14px;
    display: block;
}

.galerie-item figcaption {
    margin-top: 8px;
    font-size: 14px;
    color: var(--couleur-texte-corps, #66635e);
    text-align: center;
}

@media (max-width: 1200px) {
    .galerie-item { flex: 0 0 calc(33.333% - 14px); }
}
@media (max-width: 900px) {
    .galerie-item { flex: 0 0 calc(50% - 10px); }
}
@media (max-width: 480px) {
    .galerie-item { flex: 0 0 100%; }
    .galerie-slider { padding: 0 30px; }
}

/* Les flèches sont posées SUR les bords du slider, verticalement centrées
   sur les images — pas sur le bloc entier, dont la hauteur varie avec les
   légendes. D'où le décalage de 20px vers le haut. */
.galerie-fleche {
    position: absolute;
    top: calc(50% - 20px);
    transform: translateY(-50%);
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--couleur-principale, #0d5aa7);
    padding: 0;
    line-height: 1;
    z-index: 2;
    /* Dimensions FIXES. Sans elles, le bouton prend la largeur de son
       contenu : tant que la police d'icônes n'est pas chargée, le navigateur
       affiche le mot « arrow_back » en clair — mesuré à 173 px de large, qui
       recouvraient la première photo et interceptaient le clic dessus. */
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.galerie-fleche:hover {
    opacity: 0.65;
}
.galerie-fleche .material-symbols-outlined {
    font-size: 32px;
}

/* ---------------------------------------------------------------------
   Le petit mouvement des flèches au survol
   ---------------------------------------------------------------------
   C'est l'ICÔNE qui bouge, pas le bouton. Le bouton porte déjà
   `transform: translateY(-50%)` pour son centrage vertical, et `transform`
   est une propriété unique : lui poser un déplacement horizontal effacerait
   ce centrage, et la flèche sauterait d'un coup vers le bas au survol.

   L'amplitude reste à 3 px : le bouton fait 40 px, l'icône 32, et il coupe
   ce qui dépasse (`overflow: hidden`). Au-delà, la pointe de la flèche
   serait rognée pendant le mouvement.

   Chaque flèche part vers SON côté — c'est ce qui rend le mouvement lisible
   plutôt que décoratif : il annonce la direction. */
@keyframes galerie-fleche-gauche {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(-3px); }
}

@keyframes galerie-fleche-droite {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(3px); }
}

.galerie-fleche .material-symbols-outlined,
.galerie-plein button .material-symbols-outlined {
    transition: transform .25s;
}

.galerie-prev:hover .material-symbols-outlined,
.galerie-prev:focus-visible .material-symbols-outlined,
.galerie-plein-prev:hover .material-symbols-outlined,
.galerie-plein-prev:focus-visible .material-symbols-outlined {
    animation: galerie-fleche-gauche 1.1s ease-in-out infinite;
}

.galerie-next:hover .material-symbols-outlined,
.galerie-next:focus-visible .material-symbols-outlined,
.galerie-plein-next:hover .material-symbols-outlined,
.galerie-plein-next:focus-visible .material-symbols-outlined {
    animation: galerie-fleche-droite 1.1s ease-in-out infinite;
}

/* Réglage système « réduire les animations » : les flèches ne bougent pas.
   Le changement d'opacité au survol, lui, reste : il suffit à signaler que
   le bouton est actif. */
@media (prefers-reduced-motion: reduce) {
    .galerie-prev:hover .material-symbols-outlined,
    .galerie-prev:focus-visible .material-symbols-outlined,
    .galerie-next:hover .material-symbols-outlined,
    .galerie-next:focus-visible .material-symbols-outlined,
    .galerie-plein-prev:hover .material-symbols-outlined,
    .galerie-plein-prev:focus-visible .material-symbols-outlined,
    .galerie-plein-next:hover .material-symbols-outlined,
    .galerie-plein-next:focus-visible .material-symbols-outlined {
        animation: none;
    }
}
.galerie-prev { left: 0; }
.galerie-next { right: 0; }

.galerie-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 22px;
}

/* La vignette est un bouton : on lui retire l'habillage de bouton pour
   qu'elle ressemble à une image, tout en restant actionnable au clavier. */
.galerie-vignette {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
}
.galerie-vignette img {
    transition: transform 0.2s ease;
}
.galerie-vignette:hover img {
    transform: scale(1.03);
}
.galerie-vignette:focus-visible {
    outline: 2px solid var(--couleur-principale, #0d5aa7);
    outline-offset: 3px;
    border-radius: 14px;
}

/* ---- Visionneuse plein écran ----
   `position: fixed` sur toute la fenêtre : la photo doit couvrir la page,
   pas seulement la section. */
.galerie-plein {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 70px;
}
.galerie-plein[hidden] {
    display: none;
}

.galerie-plein-contenu {
    margin: 0;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.galerie-plein-contenu img {
    max-width: 100%;
    /* La légende doit rester visible sous la photo : on réserve sa place. */
    max-height: calc(100vh - 150px);
    object-fit: contain;
    border-radius: 6px;
}
.galerie-plein-contenu figcaption {
    color: #fff;
    font-size: 15px;
    text-align: center;
}

.galerie-plein button {
    position: absolute;
    background: none;
    border: 0;
    color: #fff;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    opacity: 0.75;
    /* Même raison que les flèches du slider : une taille fixe, pour que le
       bouton ne s'étale pas quand la police d'icônes n'est pas encore là. */
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.galerie-plein button:hover {
    opacity: 1;
}
/* `entete.php` repeint TOUTES les icônes de `main` avec
   `color: var(--couleur-titres) !important`, et cette règle est plus
   spécifique que `.galerie-plein button .material-symbols-outlined` — d'où
   des flèches bleu foncé sur fond noir, illisibles. On passe par
   l'identifiant du conteneur : sa spécificité passe largement devant, sans
   toucher à la règle générale qui a sa raison d'être ailleurs. */
#galerie-plein button,
#galerie-plein button .material-symbols-outlined {
    color: #fff !important;
}

.galerie-plein button .material-symbols-outlined {
    font-size: 38px;
}
.galerie-plein-fermer { top: 14px; right: 18px; }
.galerie-plein-prev   { left: 14px;  top: 50%; transform: translateY(-50%); }
.galerie-plein-next   { right: 14px; top: 50%; transform: translateY(-50%); }

@media (max-width: 600px) {
    .galerie-plein { padding: 50px 12px; }
    .galerie-plein button .material-symbols-outlined { font-size: 28px; }
}
.galerie-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #d5d5e0;
    cursor: pointer;
    transition: background 0.2s ease;
}
.galerie-dot.active,
.galerie-dot:hover {
    background: var(--couleur-principale, #0d5aa7);
}

/* Bloc structure de don cliquable (formations_masterclass_en_ligne.php) */
a.formation-don-card {
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s ease;
}
a.formation-don-card:hover {
    transform: translateY(-3px);
}

/* Bloc tarif-don-structure-card cliquable (reserver, inscription, etc.) */
a.tarif-don-structure-card {
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s ease;
}
a.tarif-don-structure-card:hover {
    transform: translateY(-3px);
}

/* =====================================================================
   Masterclass — en-tête formations_masterclass_en_ligne.php
   (déplacé depuis le <style> inline de la page).
   ===================================================================== */
.mc-header-cols {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
    align-items: stretch; /* les 2 colonnes ont la même hauteur (celle du texte) */
    margin-top: 12px;
}
.mc-header-cols .formations-header-description { max-width: none; margin: 30px 0 0; }

/* Puces du texte de présentation en retrait. !important pour outrepasser un
   éventuel style inline injecté par CKEditor sur le <ul>/<ol>. */
.formations-header-description ul,
.formations-header-description ol {
    padding-left: 28px !important;
    margin-left: 0 !important;
    list-style-position: outside !important;
}
.formations-header-description li { margin-bottom: 4px; }

/* Colonne + encart « Abonnez-vous » : pleine hauteur de la colonne de texte. */
.mc-header-abo { margin: 30px 0 0; display: flex; }
.mc-abo-card {
    flex: 1;
    margin: 0;
    text-align: center;
    display: flex;
    flex-direction: column;
}
/* Bloc haut (icône + titre) : occupe toute la hauteur restante, centré. */
.mc-abo-top {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
/* Bloc bas (texte + prix + bouton) : collé en bas de la carte. */
.mc-abo-bottom { flex: 0 0 auto; }
.mc-abo-card .mc-abo-icon { font-size: 34px; }
.mc-abo-card h3 { margin: 8px 0 0; }
.mc-abo-card p { margin: 0 0 10px; }
.mc-abo-card .mc-abo-btn { width: 100%; justify-content: center; margin-top: 6px; }

/* Encart promo abonnement (branche non-abonné) — déplacé depuis un <style> inline. */
.mc-abo-title  { text-transform: uppercase; font-weight: 700; font-size: 18px !important; margin: 14px 0 0; line-height: 1.25; }
.mc-abo-durees { text-transform: uppercase; font-weight: 700; font-size: 18px !important; margin: 2px 0 0; }
.mc-abo-visuel { margin: 0 0 4px; }
.mc-abo-visuel svg, .mc-abo-visuel img { display: block; margin: 0 auto; width: 200px; max-width: 100%; height: auto; }
.mc-abo-card:not(.mc-abo-recap) .mc-abo-top { gap: 26px; }

/* Bouton « Inclus dans votre abonnement » — reprend le style .btn.btn-success
   mais sans effet cliquable. Layout flex pour que l'icône reste calée à gauche
   et que le libellé (souvent sur 2 lignes dans la colonne étroite) reste en
   colonne à droite au lieu de couler sous l'icône. */
.mc-inclus-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-align: left;
    cursor: default;
    user-select: none;
}
.mc-inclus-btn:hover {
    transform: none;
    box-shadow: none;
}
.mc-inclus-btn .material-symbols-outlined {
    flex: 0 0 auto;
    font-size: 20px;
}
.mc-inclus-btn .mc-inclus-txt {
    flex: 1 1 auto;
}

/* Récapitulatif de l'abonnement de l'apprenant (remplace l'encart promo quand il
   est déjà abonné). Réutilise l'en-tête de formule (.abo-visuel/.abo-titre/
   .abo-soustitre) de la page abonnements + les dates souscription/terme. */
.mc-abo-recap { text-align: center; }
/* Force la couleur du mot de périodicité (.abo-hl) à la couleur de la formule,
   au cas où une règle de cette page l'écraserait. */
.mc-abo-recap .abo-hl { color: var(--abo-accent, #4caf7d) !important; }
/* Bouton « Détail de mon abonnement » : fond à la couleur de la formule
   (comme le bouton « S'abonner » de la page abonnements). Sélecteur assez
   spécifique pour passer devant la règle boutons de l'univers
   (.btn:not(.btn-secondary):not(.btn-connexion):not(.btn-inscription) = 0,4,0). */
.mc-abo-recap a.btn.mc-abo-btn:not(.btn-secondary) {
    background-color: var(--abo-accent, #4caf7d) !important;
    border-color: var(--abo-accent, #4caf7d) !important;
    color: #fff !important;
}
.mc-abo-recap a.btn.mc-abo-btn:not(.btn-secondary):hover {
    background-color: var(--abo-accent, #4caf7d) !important;
    filter: brightness(0.92);
}
.mc-abo-recap-lignes {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    margin-top: 18px;
}
.mc-abo-recap-lignes p { margin: 0; display: flex; flex-direction: column; }
.mc-abo-recap-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .5px;
    opacity: .7;
}

@media (max-width: 780px) {
    .mc-header-cols { grid-template-columns: 1fr; }
}

/* =====================================================================
   Abonnements masterclass — page publique abonnements_masterclass.php
   (déplacé depuis le <style> inline de la page).
   ===================================================================== */
.abo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    max-width: 1000px;
    margin: 10px auto 20px;
}
.abo-card { position: relative; display: flex; flex-direction: column; text-align: center; }
/* Badge « Le plus avantageux » : couleurs pilotables depuis l'univers
   (Signalétique). Valeurs par défaut si l'univers ne les définit pas. */
.abo-badge {
    position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    background: var(--abo-badge-bg, #f0f0f0);
    color: var(--abo-badge-color, inherit);
    padding: 4px 14px; border-radius: 20px;
    font-size: 12px; font-weight: 700; white-space: nowrap;
}
.abo-titre { margin: 4px 0 6px; font-size: 19px; }
/* Sous-titre sous le nom de la formule (migration 46) : « Abonnement <périodicité> ». */
.abo-soustitre { margin: 0 0 16px; font-size: 15px; opacity: .85; }
/* Mise en couleur d'accent d'un mot/chiffre clé (périodicité, nb de masterclass,
   tarif par masterclass). Repli sur le vert si la formule n'a pas de couleur. */
.abo-hl { color: var(--abo-accent, #4caf7d); font-weight: 700; }
/* Périodicité du sous-titre en majuscules (uniquement là, pas dans la liste). */
.abo-soustitre .abo-hl { text-transform: uppercase; }
/* Bouton « S'abonner » au fond de la couleur de la formule (quand elle est
   définie). La règle univers `.btn:not(...):not(...):not(...)` a une
   spécificité (0,4,0) et vise `background-color` : on la dépasse avec
   (0,4,1) (élément `a` + 4 classes) et on cible le même longhand. */
.abo-card--accent a.abo-btn.btn.btn-valider,
.abo-card--accent a.abo-btn.btn.btn-valider:hover {
    background-color: var(--abo-accent) !important;
    border-color: var(--abo-accent) !important;
}
.abo-card--accent a.abo-btn.btn.btn-valider:hover { filter: brightness(0.92); }
/* Visuel de la formule, en haut de carte (migration 46). */
.abo-visuel-wrap { margin: 4px 0 14px; text-align: center; }
.abo-visuel { max-width: 100%; height: auto; max-height: 100px; border-radius: 10px; object-fit: cover; }

/* Bandeau d'en-tête de la carte d'abonnement (compte.php ?section=abonnements) :
   logo de la formule + nom (police des titres de l'univers, .abo-entete-titre est
   un <h2>) + « Abonnement <PÉRIODICITÉ> », sur le fond de la couleur de la formule
   (--abo-accent, « # » normalisé côté PHP). Repli doré si la formule n'a pas de couleur. */
.abo-entete {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
    border-bottom: 1px solid #ddd;
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
    padding: 12px 22px;
    margin-bottom: 18px;
}
.abo-entete-logo {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
}
.abo-entete-logo img {
    height: 46px;
    width: auto;
    display: block;
}
.abo-entete-titre {
    margin: 0;
    /* Le nom garde la police ET la couleur des titres de l'univers (règle `h2`). */
    line-height: 1.05 !important;
}
.abo-entete-periode {
    /* Même police ET même couleur que le nom de l'abonnement (titres H2 de
       l'univers) ; seule la périodicité (.abo-entete-hl) passe en couleur d'accent. */
    font-family: var(--police-h2), sans-serif;
    color: var(--couleur-h2);
    font-size: 18px;
    letter-spacing: .4px;
    align-self: flex-end;
    padding-bottom: 5px;
    opacity: .85;
}
/* Même jeu de couleur que .abo-soustitre/.abo-hl sur abonnements_masterclass.php :
   la périodicité prend la couleur d'accent de la formule (--abo-accent). */
.abo-entete-hl {
    text-transform: uppercase;
    font-weight: 700;
    color: var(--abo-accent, #4caf7d);
}
/* Couleur d'accent propre à la formule (variable --abo-accent, migration 46). */
.abo-card--accent { border-top: 4px solid var(--abo-accent); }
/* .abo-montant est un <h2> : il suit la typographie des titres H2 (taille,
   police, couleur) réglée dans l'admin. On ne garde que l'affichage en ligne
   (avec « /mois ») et l'absence de marge de bloc. */
.abo-montant { display: inline; margin: 0; }
.abo-unite { font-size: 16px; opacity: .7; }
.abo-sous { opacity: .7; font-size: 14px; margin: 4px 0 20px; }
.abo-list { list-style: none; padding: 0; margin: 0 0 24px; text-align: left; flex: 1; }
.abo-list li { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.abo-list .material-symbols-outlined { font-size: 20px; }
.abo-btn { width: 100%; justify-content: center; }
.abo-note { max-width: 760px; margin: 0 auto 40px; text-align: center; opacity: .7; font-size: 14px; }

/* ============================================================
   Cartes ABONNEMENT (souscrire_abonnement.php, souscription_succes.php,
   section « Mes abonnements » de compte.php).

   Principe : on réutilise TELLE QUELLE la carte de reservation_detail.php
   (.reservation-card-new > .reservation-info-block). Les infos, les
   conditions et les tarifs sont IMBRIQUÉS dans le même bloc gris, donc :
     - les liserés de séparation (border-top) couvrent la même largeur,
     - la ligne des montants se cale sur la même gouttière que les infos.
   Plus aucun hack !important, plus aucun <style> inline dans le PHP.
   Ces classes ne font qu'AJOUTER le nombre de colonnes et la mise en forme
   des notes ; tout le reste vient des règles .reservation-* existantes.
   ============================================================ */

/* Grilles d'infos à colonnes égales (3 ou 5 champs selon la page). */
.reservation-info-block .info-row.abo-cols-3 { grid-template-columns: repeat(3, 1fr); }
.reservation-info-block .info-row.abo-cols-5 { grid-template-columns: repeat(5, 1fr); }

/* Bloc « conditions » : une ligne pleine largeur (.info-row-full) dont la
   valeur contient des notes en gras. Imbriqué dans le bloc gris → aligné. */
.reservation-info-block .abo-conditions .info-value p { margin: 0 0 10px; font-weight: 600; color: #2c3e50; }
.reservation-info-block .abo-conditions .info-value p:last-child { margin-bottom: 0; }
.reservation-info-block .abo-conditions .info-value p strong { font-weight: 700; }

/* Boutons d'action : même gouttière (30px) et même liseré haut que la barre
   d'actions de reservation_detail.php (.reservation-actions-new). */
.souscrire-actions {
    display: flex;
    gap: 15px;
    padding: 20px 30px;
    border-top: 1px solid #eee;
    flex-wrap: wrap;
}

/* Mobile : les grilles d'infos abonnement repassent à 2 colonnes. */
@media (max-width: 768px) {
    .reservation-info-block .info-row.abo-cols-3,
    .reservation-info-block .info-row.abo-cols-5 { grid-template-columns: repeat(2, 1fr); }
}

/* Bouton « Télécharger mon contrat signé » sous une carte d'abonnement (compte.php) */
.abo-contrat-download {
    padding: 14px 30px;
    border-top: 1px solid #eee;
}

/* ====================================================================
   CONTRAT ABONNÉ — lecture + signature obligatoire à la souscription
   (souscrire_abonnement.php, Phase 2). Réutilise les classes de
   signature existantes (.signature-canvas / .paraphe-canvas /
   .signature-canvas-container / .canvas-actions / .btn-clear).
   ==================================================================== */
.abo-contrat-signature {
    padding: 20px 30px 5px;
    border-top: 1px solid #eee;
}
.abo-contrat-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    color: #2c3e50;
    margin: 0 0 6px;
}
.abo-contrat-intro { color: #555; margin: 0 0 14px; }

.abo-contrat-box {
    max-height: 340px;
    overflow-y: auto;
    border: 1px solid #e2e2e2;
    border-radius: 8px;
    background: #fcfcfc;
    padding: 18px 22px;
    margin-bottom: 20px;
    font-size: 14px;
    line-height: var(--line-height, 1.55);
    color: #333;
}
.abo-contrat-art-titre {
    font-size: 15px;
    font-weight: 700;
    color: #2c3e50;
    margin: 16px 0 6px;
}
.abo-contrat-sous-titre {
    font-size: 14px;
    font-weight: 700;
    color: #34495e;
    margin: 12px 0 5px 14px;
}
.abo-contrat-art-texte { margin: 0 0 8px; }
.abo-contrat-sous-texte { margin: 0 0 8px 14px; }
.abo-contrat-box > .abo-contrat-art-titre:first-child { margin-top: 0; }
.abo-contrat-vide { color: #a33; font-style: italic; margin: 0; }

/* Le formulaire de signature passe en colonne (le liseré + padding de
   .souscrire-actions sont conservés). */
.souscrire-actions.abo-sign-form {
    flex-direction: column;
    align-items: stretch;
    border-top: none;
    padding-top: 0;
}

/* Identité + adresse confirmées à la signature de l'abonnement */
.abo-sign-identite { margin-bottom: 18px; }
.abo-sign-identite-intro { color: #555; margin: 0 0 12px; }
.abo-sign-identite-row { display: flex; gap: 14px; flex-wrap: wrap; }
.abo-sign-field { flex: 1; min-width: 180px; margin-bottom: 12px; }
.abo-sign-field label { display: block; font-weight: 600; color: #2c3e50; margin-bottom: 5px; }
.abo-sign-field-cp { flex: 0 0 140px; min-width: 120px; }

.abo-sign-grid {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.abo-sign-grid .signature-step { margin: 0; }
.abo-sign-label {
    display: block;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 6px;
}
.abo-sign-approuve {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #2c3e50;
    font-weight: 600;
    margin: 4px 0 16px;
    cursor: pointer;
}
.abo-sign-approuve input { margin-top: 3px; }
.souscrire-actions-row {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    /* Respiration sous le panneau de signature avant « Retour aux offres ». */
    margin-top: 25px;
}

/* Bandeau d'information (repris de .alert-info-box de l'admin) — utilisé sur
   les pages publiques de signature (contrat de formation) et de souscription
   pour l'avertissement « coordonnées du compte OCYTOMILK ». */
.alert-info-box {
    background: #e3f2fd;
    border-left: 4px solid #2196f3;
    padding: 15px 20px;
    border-radius: 0 8px 8px 0;
    margin-bottom: 25px;
    font-size: 14px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.alert-info-box .material-symbols-outlined {
    flex-shrink: 0;
    font-size: 22px;
    line-height: 1.4;
}
.abo-sign-hint { color: #888; font-size: 13px; margin: 10px 0 0; }

@media (max-width: 768px) {
    .abo-sign-grid { gap: 18px; }
}

/* =====================================================================
   Récapitulatif masterclass (page session_detail_masterclass.php)
   Anciennement dans un bloc <style> de la page — centralisé ici.
   ===================================================================== */
/* Largeur harmonisée avec le reste du site (.container / carte récap de
   reserver.php = 1140px), pour un rendu cohérent d'une page à l'autre. */
.mc-recap-wrap { max-width: 1140px; margin: 24px auto; }
.mc-conditions-value { font-weight: 600; color: #1f2937; }
/* Liseré de séparation prix / code promo (même teinte que les autres
   séparateurs de la carte). */
.mc-sep { border: 0; border-top: 1px solid #e5e7eb; margin: 0 25px; }
/* Deuxième ligne dans le même style que la première (gras, foncé). */
.mc-conditions-sub { font-weight: 600; color: #1f2937; }
.mc-pay-zone { background: transparent; border-radius: 14px; padding: 22px; margin-top: 8px; }
.mc-pay-btn {
    width: 100%; border: none; cursor: pointer;
    background: #4caf7d; color: #fff; border-radius: 12px;
    padding: 18px 20px; display: flex; flex-direction: column; align-items: center; gap: 4px;
    font-family: inherit; transition: background .15s ease;
    text-decoration: none; /* variante lien (<a>) : pas de soulignement */
}
.mc-pay-btn:hover { background: #429a6d; }
.mc-pay-title { font-size: 15px; font-weight: 600; opacity: .95; }
.mc-pay-amt { font-size: 26px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
/* L'icône CB/abonnement doit être blanche comme le texte du bouton
   (une règle globale la colorait en gris) — on force donc la couleur. */
.mc-pay-btn .material-symbols-outlined { color: #fff !important; }
.mc-pay-amt .material-symbols-outlined { font-size: 24px; }
.mc-pay-note { text-align: center; color: #6b7280; font-size: 13px; margin: 12px 0 0; }
.mc-reserver-abo-btn { background: #6b5bd2; }
.mc-reserver-abo-btn:hover { background: #5a4cbf; }
/* Bloc code promo (ex-styles inline de la page) */
.mc-code-row { display: flex; gap: 8px; margin-top: 6px; }
.mc-code-input { flex: 1; text-transform: uppercase; }
.mc-code-msg { margin-top: 6px; font-size: 13px; }
.mc-code-preview { display: none; } /* affiché en JS après validation du code */

/* =====================================================================
   BANDEAU DE PAGE (parallax) — août 2026
   Réglé depuis Identité visuelle > Bandeau de page. Toutes les valeurs
   passent par des variables : rien de codé en dur ici.
   ===================================================================== */

/* L'en-tête porte une marge basse qui aère le contenu. Quand un bandeau est
   affiché, il doit venir se coller sous la barre de menu : on annule la marge,
   le bandeau assurant lui-même la séparation visuelle. */
body.bandeau-actif header {
    margin-bottom: 0 !important;
}

.page-bandeau {
    position: relative;
    /* Hauteur RÉGLÉE en plancher, pas en plafond. Avec une hauteur ferme, un
       contenu plus haut que le bandeau — un long titre, ou le logo qui vient
       s'ajouter au-dessus — débordait sur la page au lieu de faire grandir la
       bande. Tant que le contenu tient, l'aspect est identique. */
    min-height: var(--bandeau-hauteur, 320px);
    display: flex;
    align-items: var(--bandeau-align-v, center);
    justify-content: var(--bandeau-align-h, center);
    /* Pas d'`overflow: hidden` ici : la flèche de bas de bandeau doit pouvoir
       déborder. C'est `.page-bandeau-cadre` qui borne la couche translatée. */
    background-color: var(--bandeau-fond-couleur, #0d5aa7);
    isolation: isolate;
}

/* Cadre : borne la couche de fond du parallax, sans rien rogner d'autre. */
.page-bandeau-cadre {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}

/* Flèche de bas de bandeau — une DÉCOUPE, pas un triangle posé par-dessus.
   Le `clip-path` retaille le bandeau entier : l'image de fond, le voile et
   l'aplat de couleur suivent la forme, et le fond de page apparaît de part et
   d'autre de la pointe. C'est bien le visuel qui est découpé.

   Le bandeau est agrandi de la hauteur de la flèche, et cette hauteur est
   reprise en `padding-bottom` : le titre reste donc centré dans la partie
   rectangulaire, exactement comme sans flèche, et la hauteur réglée dans
   l'admin garde son sens. */
.page-bandeau.a-fleche {
    min-height: calc(var(--bandeau-hauteur, 320px) + var(--bandeau-fleche-hauteur, 26px));
    padding-bottom: var(--bandeau-fleche-hauteur, 26px);
    clip-path: polygon(
        0 0,
        100% 0,
        100% calc(100% - var(--bandeau-fleche-hauteur, 26px)),
        calc(50% + var(--bandeau-fleche-largeur, 64px) / 2) calc(100% - var(--bandeau-fleche-hauteur, 26px)),
        50% 100%,
        calc(50% - var(--bandeau-fleche-largeur, 64px) / 2) calc(100% - var(--bandeau-fleche-hauteur, 26px)),
        0 calc(100% - var(--bandeau-fleche-hauteur, 26px))
    );
}

/* Couche de fond.
   Sa hauteur et son décalage sont posés en JavaScript, calculés d'après
   l'intensité du parallax : c'est la seule façon d'avoir un effet franc sans
   jamais découvrir un bord. Les valeurs ci-dessous ne servent donc que tant
   que le script n'a pas mesuré — et quand il ne s'exécute pas du tout
   (intensité à 0, ou « réduire les animations » activé), auquel cas la couche
   couvre exactement la section, ce qui est le rendu voulu. */
.page-bandeau-fond {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: var(--bandeau-image-position, center center);
    background-size: cover;
    background-repeat: no-repeat;
    filter: blur(var(--bandeau-flou, 0px));
    will-change: transform;
    z-index: 0;
}

/* Voile de lisibilité, entre l'image et le texte. */
.page-bandeau-voile {
    position: absolute;
    inset: 0;
    background-color: var(--bandeau-voile-couleur, #0a2f52);
    opacity: var(--bandeau-voile-opacite, 0.45);
    z-index: 1;
    pointer-events: none;
}

/* Sans image de fond, le voile ferait double emploi avec l'aplat. */
.page-bandeau:not(.a-image) .page-bandeau-voile {
    display: none;
}

.page-bandeau-contenu {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 900px;
    padding: 20px 24px;
    text-align: var(--bandeau-texte-align, center);
}

/* `!important` obligatoire : entete.php injecte, plus bas dans la page,
   `h1 { font-family: … !important; color: … !important; font-size: … !important }`
   pour les titres de contenu. Sans `!important` ici, le titre du bandeau
   hériterait de la typographie des h1 de page — donc du bleu de la charte
   sur un fond bleu, illisible. */
.page-bandeau-titre {
    margin: 0 !important;
    font-family: var(--bandeau-titre-font, var(--police-titres)) !important;
    font-size: var(--bandeau-titre-taille, 44px) !important;
    font-weight: var(--bandeau-titre-graisse, 700) !important;
    color: var(--bandeau-titre-couleur, #ffffff) !important;
    text-transform: var(--bandeau-titre-casse, uppercase) !important;
    letter-spacing: var(--bandeau-titre-lettrage, 1px) !important;
    line-height: 1.15 !important;
    /* Un titre de formation long débordait de l'écran sur mobile : la coupe
       à l'intérieur d'un mot n'intervient qu'en dernier recours, quand aucune
       espace ne permet de passer à la ligne. */
    overflow-wrap: break-word;
    /* Le titre du bandeau ne porte jamais le liseré des h1 de contenu. */
    border: none !important;
    padding: 0 !important;
}

.page-bandeau-titre::after {
    content: none;
}

.page-bandeau-sous-titre {
    margin: var(--bandeau-sous-titre-marge, 10px) 0 0 !important;
    font-family: var(--bandeau-sous-titre-font, var(--police-principale)) !important;
    font-size: var(--bandeau-sous-titre-taille, 18px) !important;
    font-weight: var(--bandeau-sous-titre-graisse, 400) !important;
    color: var(--bandeau-sous-titre-couleur, #e8f1fa) !important;
    line-height: 1.45 !important;
}

/* Sur mobile, la hauteur réglée pour un écran large écrase tout le premier
   défilement. On la plafonne, sans jamais dépasser la valeur choisie. */
@media (max-width: 900px) {
    .page-bandeau {
        min-height: min(var(--bandeau-hauteur, 320px), 220px);
    }
    .page-bandeau.a-fleche {
        min-height: calc(min(var(--bandeau-hauteur, 320px), 220px) + var(--bandeau-fleche-hauteur, 26px));
    }
    .page-bandeau-titre {
        font-size: calc(var(--bandeau-titre-taille, 44px) * 0.7) !important;
    }
    .page-bandeau-sous-titre {
        font-size: calc(var(--bandeau-sous-titre-taille, 18px) * 0.9) !important;
    }
}

/* Réglage système « réduire les animations » : le script s'abstient déjà,
   on neutralise aussi toute transition résiduelle. */
@media (prefers-reduced-motion: reduce) {
    .page-bandeau-fond {
        transform: none !important;
        transition: none !important;
    }
}

/* =====================================================================
   PAGES ÉDITORIALES — sections deux colonnes
   =====================================================================
   Contenu saisi depuis Paramètres > Pages du site > Contenu. Une page est
   une suite de sections ; chaque section porte un titre facultatif et un
   modèle de colonnage.

   Aucune couleur en dur ici : les titres et le texte prennent celles de
   l'univers, comme partout ailleurs. */

.page-sections {
    padding: 40px 0 20px;
}

.page-section + .page-section {
    margin-top: 48px;
}

/* Titre d'une colonne de texte. Il vit DANS sa colonne : dans une section
   « 50/50 » chaque colonne peut avoir le sien, et dans une section
   texte + visuel il se cale sur le texte plutôt que de coiffer l'ensemble. */
.page-section-titre {
    margin: 0 0 16px;
}

/* Écart vertical puis horizontal. Les deux sont réglés séparément : sur
   mobile les colonnes s'empilent, et c'est alors l'écart VERTICAL qui les
   sépare — 50 px y creuseraient un trou entre un visuel et son texte. */
.page-section-grille {
    display: grid;
    gap: 32px 50px;
    align-items: start;
}

/* Un modèle = une classe. Les largeurs vivent donc dans la feuille de
   style et non dans le HTML généré. */
.page-section-100   .page-section-grille { grid-template-columns: 1fr; }
.page-section-50-50 .page-section-grille { grid-template-columns: 1fr 1fr; }
.page-section-33-66 .page-section-grille { grid-template-columns: 1fr 2fr; }
.page-section-66-33 .page-section-grille { grid-template-columns: 2fr 1fr; }

.page-section-col {
    min-width: 0;
}

.page-section-texte {
    line-height: var(--line-height, 1.7);
}

.page-section-texte > *:first-child { margin-top: 0; }
.page-section-texte > *:last-child  { margin-bottom: 0; }

.page-section-texte ul,
.page-section-texte ol {
    padding-left: 22px;
    margin: 12px 0;
}

.page-section-texte li {
    margin-bottom: 6px;
}

.page-section-texte a {
    color: var(--couleur-liens, var(--couleur-principale));
}

.page-section-texte table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
}

.page-section-texte th,
.page-section-texte td {
    border: 1px solid rgba(0, 0, 0, .1);
    padding: 8px 10px;
    text-align: left;
}

.page-section-visuel {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}

/* Page sans contenu : le bloc d'attente, tant que la page n'a pas encore
   été composée dans l'administration. */
.page-attente {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
    padding: 80px 20px;
}

.page-attente .material-symbols-outlined {
    font-size: 48px;
    opacity: .35;
}

.page-attente h2 {
    margin: 20px 0 10px;
}

.page-attente p {
    opacity: .7;
}

/* Sur mobile, les deux colonnes s'empilent dans l'ordre de saisie :
   colonne 1, puis colonne 2 — SAUF quand seule la seconde porte un titre. */
@media (max-width: 768px) {
    .page-sections {
        padding: 24px 0 10px;
    }

    /* L'ORDRE DES COLONNES, tel que l'éditeur l'a réglé.

       Chaque colonne porte son rang dans `--ordre-mobile`, écrit par le
       serveur. La règle ne connaît donc ni le nombre de colonnes ni
       laquelle passe devant : le jour où une section en portera trois,
       elle n'aura pas à changer.

       Le repli à 0 couvre les sections à une seule colonne, où le serveur
       n'émet rien : `order: 0` est la valeur par défaut, l'ordre du
       document est conservé.

       `order` ne déplace que l'AFFICHAGE : la tabulation au clavier et la
       lecture d'écran suivent toujours l'ordre du document, colonne 1 puis
       colonne 2. C'est le comportement voulu pour un choix de présentation. */
    .page-section-col { order: var(--ordre-mobile, 0); }

    .page-section + .page-section {
        margin-top: 32px;
    }

    .page-section-grille {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }
}

/* =====================================================================
   LISERÉ SOUS LES TITRES — exceptions
   =====================================================================
   Le liseré (Identité visuelle > Typographie > Titre HN) est dessiné par
   un `::after` sur h1…h6, injecté par entete.php. Deux familles de titres
   doivent y échapper.

   1. Les titres composés en flex (icône + libellé, ou titre + badge). Le
      trait y deviendrait un élément de la ligne et se poserait À CÔTÉ du
      texte au lieu de passer dessous. Plusieurs d'entre eux portent déjà
      leur propre soulignement pleine largeur, qui reste le bon rendu là
      où ils sont employés.

   2. Le titre du bandeau de page (traité plus haut, avec son bloc) : il
      est en H1 et hériterait donc du liseré, en travers d'une photo. */
.card-title::after,
.section-title::after,
.sessions-section-title::after,
.documents-section-title::after,
.historique-section-title::after,
.reglements-section-title::after,
.signature-section-title::after,
.paiement-cta-section-title::after,
.options-group-title::after,
.options-reservees-title::after,
.ff-personnes-title::after,
.ff-sessions-title::after,
.abo-entete-titre::after,
.modal-title::after,
.la-modal-titre::after,
.sim-panel-title::after,
.info-box-title::after {
    content: none;
}

/* =====================================================================
   FORMULAIRES DANS UNE PAGE
   =====================================================================
   Colonne de type « Formulaire » (Paramètres > Pages du site > Contenu).
   Les champs, leur ordre et leur largeur viennent de Réglages >
   Formulaires : rien n'est décidé ici, la feuille de style ne fait que
   dessiner ce que l'éditeur a composé.

   La grille compte 6 colonnes, ce qui permet d'exprimer exactement les
   quatre largeurs de l'éditeur : pleine (6), 2/3 (4), 1/2 (3), 1/3 (2).
   Aucune couleur en dur : tout vient de l'univers. */

.form-public-grille {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
}

.form-col-full { grid-column: span 6; }
.form-col-2-3  { grid-column: span 4; }
.form-col-1-2  { grid-column: span 3; }
.form-col-1-3  { grid-column: span 2; }

.form-public-champ {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.form-public-libelle {
    font-size: 14px;
    margin-bottom: 6px;
    opacity: .85;
}

.form-requis {
    color: var(--couleur-principale, #0d5aa7);
    font-style: normal;
}

.form-public input[type="text"],
.form-public input[type="email"],
.form-public input[type="tel"],
.form-public input[type="date"],
.form-public input[type="file"],
.form-public select,
.form-public textarea {
    width: 100%;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 10px;
    padding: 13px 16px;
    font-size: 15px;
    font-family: inherit;
    color: var(--couleur-texte-corps, #1f2d3d);
    background: #ffffff;
    box-sizing: border-box;
}

.form-public input:focus,
.form-public select:focus,
.form-public textarea:focus {
    outline: none;
    border-color: var(--couleur-principale, #0d5aa7);
}

.form-public textarea {
    resize: vertical;
    min-height: 140px;
}

/* Champ obligatoire laissé vide : signalé au retour du serveur. */
.form-champ-manquant input,
.form-champ-manquant select,
.form-champ-manquant textarea {
    border-color: #c0392b;
}

.form-public-erreur {
    color: #c0392b;
    font-size: 12px;
    margin-top: 4px;
}

.form-public-section {
    margin-top: 8px;
}

.form-public-section h3 {
    margin: 0;
}

.form-public-info {
    font-size: 14px;
    opacity: .8;
}

.form-public-case,
.form-public-radios label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: 15px;
}

.form-public-radios {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
}

.form-public-envoi {
    align-self: flex-start;
    margin-top: 20px;
    background: var(--couleur-boutons, var(--couleur-principale, #0d5aa7));
    color: #ffffff;
    border: none;
    border-radius: 10px;
    padding: 14px 32px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .5px;
    cursor: pointer;
    transition: opacity .2s;
}

.form-public-envoi:hover {
    opacity: .9;
}

/* Bandeau d'alerte daté du formulaire : il remplace le formulaire pendant
   sa période — « Inscriptions closes jusqu'au… ». */
.form-alerte {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 20px;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, .1);
    background: #ffffff;
}

.form-alerte p {
    margin: 0;
}

/* Piège à robots. `display: none` serait détecté par les envois
   automatiques les plus sommaires : on sort le champ de l'écran plutôt que
   de le masquer franchement. Il reste invisible et inatteignable au
   clavier (tabindex="-1" sur le champ lui-même). */
.champ-leurre {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Sur mobile, chaque champ prend toute la largeur : une colonne d'un tiers
   dans une colonne de page déjà étroite ne laisse plus rien à lire. */
@media (max-width: 768px) {
    .form-public-grille {
        grid-template-columns: 1fr;
    }
    .form-col-full,
    .form-col-2-3,
    .form-col-1-2,
    .form-col-1-3 {
        grid-column: span 1;
    }
}

/* Le formulaire « Nous contacter » a quitté le pied de page : les liens
   utiles y sont seuls et n'ont plus de raison d'occuper une demi-largeur.
   Les règles du formulaire restent en place plus haut, elles ne servent
   plus mais ne gênent rien — elles resserviront le jour où le pied de page
   accueillera un formulaire choisi dans l'éditeur. */
.footer-contact-grid.footer-liens-seuls {
    grid-template-columns: 1fr;
}

/* =====================================================================
   LISTES DÉROULANTES HABILLÉES
   =====================================================================
   Amélioration progressive : le `<select>` natif reste dans la page et
   reste le champ envoyé. Tant que `assets/js/select_custom.js` ne s'est
   pas exécuté, l'enveloppe n'a pas la classe `est-habille` et c'est la
   liste native qui s'affiche, telle quelle. Rien ne dépend de l'habillage. */

.select-perso {
    position: relative;
}

/* Une fois habillée, la liste native reste dans le document — elle porte le
   nom du champ — mais sort de l'écran. Pas de `display: none` : un champ
   ainsi masqué ne peut plus recevoir le focus ni les messages de validation
   du navigateur. */
.select-perso.est-habille select {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    border: 0;
}

.select-perso-bouton {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 10px;
    padding: 13px 14px 13px 16px;
    font-size: 15px;
    font-family: inherit;
    text-align: left;
    color: var(--couleur-texte-corps, #1f2d3d);
    background: #ffffff;
    cursor: pointer;
    box-sizing: border-box;
}

.select-perso-bouton:focus-visible {
    outline: none;
    border-color: var(--couleur-principale, #0d5aa7);
}

.select-perso.est-ouvert .select-perso-bouton {
    border-color: var(--couleur-principale, #0d5aa7);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* Tant qu'aucun choix n'est fait, le libellé est une invite : il se lit
   comme le texte d'attente des autres champs, pas comme une valeur. */
.select-perso.est-vide .select-perso-valeur {
    opacity: .55;
}

.select-perso-fleche {
    font-size: 20px;
    opacity: .55;
    transition: transform .15s;
    flex-shrink: 0;
}

.select-perso.est-ouvert .select-perso-fleche {
    transform: rotate(180deg);
}

.select-perso-liste {
    display: none;
    position: absolute;
    z-index: 20;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 260px;
    overflow-y: auto;
    margin: 0;
    padding: 4px 0;
    list-style: none;
    background: #ffffff;
    border: 1px solid var(--couleur-principale, #0d5aa7);
    border-top: none;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .1);
}

.select-perso.est-ouvert .select-perso-liste {
    display: block;
}

.select-perso-option {
    padding: 11px 16px;
    font-size: 15px;
    cursor: pointer;
    line-height: 1.3;
}

.select-perso-option.est-survole {
    background: rgba(0, 0, 0, .04);
}

.select-perso-option.est-choisi {
    background: var(--couleur-principale, #0d5aa7);
    color: #ffffff;
}

.select-perso-option.est-invite {
    opacity: .55;
}

/* L'invite n'est pas une valeur : tant que rien n'est choisi, elle ne doit
   pas se surligner comme un choix retenu — on lirait « Choisissez » comme
   une réponse. */
.select-perso-option.est-invite.est-choisi {
    background: transparent;
    color: inherit;
}

/* Champ obligatoire laissé vide : même signalement que les autres champs. */
.form-champ-manquant .select-perso-bouton {
    border-color: #c0392b;
}

/* =====================================================================
   ÉQUIPE PÉDAGOGIQUE — grille de cartes et fiche
   =====================================================================
   Colonne de type « Liste » (Pages du site > Contenu), et fiche
   individuelle atteinte par `formateurs.php?id=` / `intervenants.php?id=`.

   La grille est en `auto-fill` et non en nombre fixe de colonnes : le bloc
   s'adapte à la largeur qu'on lui donne. En pleine largeur il pose trois
   ou quatre cartes par rangée, dans une colonne d'un tiers il en pose une.
   C'est ce qui évite d'avoir à inventer un « type de section » à côté du
   colonnage existant.

   Aucune couleur en dur : tout vient de l'univers. */

.equipe-grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 36px 28px;
    align-items: stretch;
}

/* Carte en colonne, bouton poussé en bas : les boutons d'une même rangée
   s'alignent alors entre eux, quelle que soit la longueur des professions
   au-dessus. */
.equipe-carte {
    display: flex;
    flex-direction: column;
    text-align: center;
}

.equipe-carte .equipe-bouton {
    margin-top: auto;
}

.equipe-carte-lien {
    display: block;
    border-radius: 14px;
    overflow: hidden;
}

.equipe-photo {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: transform .3s;
}

.equipe-carte-lien:hover .equipe-photo {
    transform: scale(1.04);
}

.equipe-nom {
    margin: 16px 0 4px;
    font-size: 17px;
}

.equipe-nom a {
    color: inherit;
    text-decoration: none;
}

/* Le liseré des titres ne s'applique pas ici : sous chaque nom d'une
   grille, il ferait un trait toutes les trois cartes. */
.equipe-nom::after {
    content: none;
}

.equipe-profession {
    margin: 0 0 16px;
    font-size: 14px;
    line-height: var(--line-height, 1.4);
    opacity: .8;
}

.equipe-bouton,
.formation-ligne-bouton,
.formation-carte-bouton,
.session-bouton {
    align-self: center;
    display: inline-block;
    padding: 9px 20px;
    border: 1px solid var(--couleur-principale, #0d5aa7);
    border-radius: 20px;
    color: var(--couleur-principale, #0d5aa7);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .5px;
    text-decoration: none;
    transition: background-color .2s, color .2s;
}

/* TOUS les boutons de liste du site ont leurs deux états inversés : pleins au
   repos, détourés au survol. « Découvrir la formation », « S'inscrire », et
   celui des fiches de formateurs et d'intervenants.

   La déclaration au-dessus leur donne la forme, la taille et la typographie ;
   celle-ci ne fait que le remplissage, et elle ne s'écrit qu'une fois — un
   bouton oublié dans l'une des deux listes se verrait immédiatement, ce qui
   est exactement le but.

   `background` est bien répété dans la règle de survol : sans cela le fond
   plein posé au repos resterait, la couleur du texte passant seule au bleu —
   du bleu sur bleu, illisible. */
.equipe-bouton,
.formation-carte-bouton,
.formation-ligne-bouton,
.sessions-grid-prochaines .session-bouton:not(.est-inerte),
.sessions-liste .session-bouton:not(.est-inerte) {
    background: var(--couleur-principale, #0d5aa7);
    color: #ffffff;
}

.equipe-bouton:hover,
.formation-carte-bouton:hover,
.formation-ligne-bouton:hover,
.sessions-grid-prochaines .session-bouton:not(.est-inerte):hover,
.sessions-liste .session-bouton:not(.est-inerte):hover {
    background: transparent;
    color: var(--couleur-principale, #0d5aa7);
}

/* =====================================================================
   BOUTONS DE CONTENU
   Les boutons que l'on pose SOI-MÊME dans une page, depuis l'éditeur.

   Ils ne se confondent pas avec les boutons de fonction (`.btn`,
   `.btn-secondary`) : ceux-là sont posés par le code aux endroits où le
   visiteur agit — réserver, valider, revenir. Ceux-ci sont un choix de
   rédaction, dans un texte, et prennent la forme des boutons de liste du
   site — la pastille de « Découvrir la formation ».

   DEUX ÉTATS INVERSÉS, comme le reste du site :
     .bouton-page          plein au repos, détouré au survol
     .bouton-page-inverse   détouré au repos, plein au survol

   LA BORDURE EST TOUJOURS LÀ, dans les deux états et les deux styles,
   même quand elle est de la couleur du fond. Sans elle, le bouton
   grandirait de deux pixels au moment où le survol la fait apparaître,
   et la ligne de texte sauterait sous le curseur.

   Les valeurs ci-dessous sont celles d'origine. Dès qu'un champ est
   rempli dans Identité visuelle > Boutons > Boutons de contenu,
   `entete.php` émet sa propre règle et celle-ci s'efface.
   ===================================================================== */
.bouton-page,
.bouton-page-inverse {
    display: inline-block;
    padding: 9px 20px;
    border: 1px solid var(--couleur-principale, #0d5aa7);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .5px;
    text-decoration: none;
    transition: background-color .2s, color .2s, border-color .2s;
}

/* LES QUATRE RÈGLES DE COULEUR S'ÉCRIVENT `a.bouton-page`, ET NON
   `.bouton-page`.

   Un bouton posé dans une page est un lien, donc dans le champ de
   `.page-section-texte a`, qui colore les liens du texte. À `.bouton-page`
   seul — un seul sélecteur de classe — cette règle-là l'emporterait et
   peindrait le libellé en couleur de lien : du bleu sur du bleu.

   `a.bouton-page` remet les deux à égalité de spécificité, et ce bloc étant
   écrit plus bas dans le fichier, c'est lui qui gagne. */
a.bouton-page {
    background: var(--couleur-principale, #0d5aa7);
    color: #ffffff;
}

a.bouton-page:hover {
    background: #ffffff;
    color: var(--couleur-principale, #0d5aa7);
}

a.bouton-page-inverse {
    background: #ffffff;
    color: var(--couleur-principale, #0d5aa7);
}

a.bouton-page-inverse:hover {
    background: var(--couleur-principale, #0d5aa7);
    color: #ffffff;
}

/* --- Fiche individuelle ---------------------------------------------- */
.fiche-equipe {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 40px;
    align-items: start;
    padding: 40px 0 20px;
}

.fiche-equipe-photo img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
}

.fiche-equipe-texte {
    min-width: 0;
}

@media (max-width: 768px) {
    .equipe-grille {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 28px 18px;
    }

    .fiche-equipe {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 24px 0 10px;
    }
}

/* Sur-titre du bandeau : le libellé de la rubrique au-dessus du nom, sur
   une page de fiche. Il reprend la typographie du sous-titre, qu'il
   remplace dans ce cas précis. */
/* Le sur-titre a ses propres variables, dont le repli est celui du
   sous-titre : tant qu'on ne le règle pas dans l'identité visuelle, il suit
   le sous-titre exactement comme avant. */
.page-bandeau-sur-titre {
    margin: 0 0 var(--bandeau-sur-titre-marge, 10px);
    font-family: var(--bandeau-sur-titre-font);
    font-size: var(--bandeau-sur-titre-taille, 18px);
    font-weight: var(--bandeau-sur-titre-graisse, 400);
    color: var(--bandeau-sur-titre-couleur, #e8f1fa);
}

/* Complément : la quatrième ligne, sous le sous-titre — « approche
   pluridisciplinaire », « kiné / ostéo / chiro ». Comme le sur-titre, elle a
   ses propres variables, dont le repli est celui du sous-titre. */
.page-bandeau-complement {
    margin: var(--bandeau-complement-marge, 10px) 0 0;
    font-family: var(--bandeau-complement-font);
    font-size: var(--bandeau-complement-taille, 18px);
    font-weight: var(--bandeau-complement-graisse, 400);
    color: var(--bandeau-complement-couleur, #e8f1fa);
    text-transform: var(--bandeau-complement-casse, none);
    line-height: 1.45;
}

/* Logo au-dessus du titre du bandeau. Affiché page par page, dimensionné par
   l'univers. C'est le SVG de l'univers inséré tel quel : on lui impose une
   hauteur et on laisse la largeur suivre, pour ne pas le déformer quel que
   soit son rapport d'origine. */
.page-bandeau-logo {
    display: flex;
    justify-content: var(--bandeau-align-h, center);
    margin: 0 0 18px;
}

.page-bandeau-logo svg,
.page-bandeau-logo img {
    height: var(--bandeau-logo-hauteur, 110px);
    width: auto;
    max-width: 100%;
    display: block;
}

@media (max-width: 768px) {
    /* Sur un petit écran, la hauteur réglée pour l'ordinateur mangerait le
       bandeau : elle est plafonnée à un quart de la largeur de l'écran. */
    .page-bandeau-logo svg,
    .page-bandeau-logo img {
        height: min(var(--bandeau-logo-hauteur, 110px), 25vw);
    }

    /* Masqué par défaut : l'en-tête collant montre déjà le logo, et le
       répéter dans le bandeau juste dessous le fait paraître deux fois dans
       un seul écran. Le réglage « Masquer sur mobile » d'Identité visuelle >
       Bandeau > Logo pose la variable. */
    .page-bandeau-logo {
        display: var(--bandeau-logo-mobile, none);
        margin-bottom: 12px;
    }
}

/* =====================================================================
   FORMATIONS — la liste détaillée, une rangée par formation
   =====================================================================
   Seconde présentation des mêmes formations : pictogramme à gauche, texte
   et bouton à droite. À plat, dans l'ordre de l'administration — la
   hiérarchie est le sujet de l'autre présentation, le schéma.

   Le disque reprend la couleur de la fiche de formation, adoucie, comme
   dans le schéma : les deux listes se ressemblent quand elles cohabitent
   sur une même page.
   ===================================================================== */
.formations-lignes {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.formation-ligne {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0 48px;
    padding: 26px 32px;
    border-radius: 18px;
}

/* Une rangée sur deux se détache à peine du fond : assez pour séparer les
   formations, pas assez pour faire un tableau. */
.formation-ligne:nth-child(odd) {
    background: rgba(0, 0, 0, .02);
}

.formation-ligne-picto {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--formation-couleur, #3788d8);
    background: color-mix(in srgb, var(--formation-couleur, #3788d8) 22%, #ffffff);
    transition: transform .3s;
}

.formation-ligne-picto:hover {
    transform: scale(1.04);
}

.formation-ligne-picto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.formation-ligne-texte {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

/* Le niveau, au-dessus du titre — même rôle que sur les cartes du schéma. */
.formation-ligne-niveau {
    margin: 0 0 2px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--couleur-texte-secondaire, #6b7c8d);
}

.formation-ligne-titre {
    margin: 0;
    text-wrap: balance;
}

.formation-ligne-titre a {
    color: inherit;
    text-decoration: none;
}

/* Comme partout dans les listes : le liseré tracerait un trait sous chaque
   rangée. */
.formation-ligne-titre::after,
.formation-ligne-soustitre::after {
    content: none;
}

/* `!important` à contrecœur, et pour une raison précise : l'en-tête pose
   `h4 { color: … !important }` pour que les niveaux de titre suivent
   l'univers. Sans le même poids ici, le sous-titre reprendrait la couleur
   des h4 et non la couleur secondaire que demande cette présentation. */
.formation-ligne-soustitre {
    margin: 0;
    color: var(--couleur-secondaire, #3788d8) !important;
}

.formation-ligne-accroche {
    margin: 10px 0 6px;
    color: var(--couleur-texte-secondaire, #6b7c8d);
    line-height: var(--line-height, 1.5);
}

/* Le bouton reprend celui des fiches d'équipe — mêmes règles, plus haut
   dans cette feuille — mais aligné à gauche du texte. */
.formation-ligne-bouton {
    align-self: flex-start;
    margin-top: 6px;
    text-transform: uppercase;
}

@media (max-width: 768px) {
    /* Le pictogramme passe au-dessus et le texte se centre : à 390 px, une
       colonne d'image plus une colonne de texte ne laisse au titre qu'une
       largeur illisible. */
    .formation-ligne {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 18px;
        padding: 22px 16px;
    }

    .formation-ligne-picto {
        width: min(150px, 36vw);
        height: min(150px, 36vw);
    }

    .formation-ligne-texte {
        align-items: center;
        text-align: center;
    }

    .formation-ligne-bouton {
        align-self: center;
    }
}

/* =====================================================================
   FORMATIONS — l'arbre des formations
   =====================================================================
   Colonne de type « Liste », source « Formations ». Reprend l'ordre et la
   hiérarchie de l'administration : les formations de premier niveau sur
   une rangée, puis sous chacune qui en a, celles qui la prolongent —
   reliées par une flèche.

   Les cartes ont toutes la MÊME taille de pictogramme, quel que soit le
   niveau : c'est ce qui manquait au schéma du site vitrine, où le second
   « Module 2 » était deux fois plus petit que son voisin.

   Aucune couleur en dur : le disque prend celle réglée sur la fiche de la
   formation, le texte celles de l'univers. */

.formations-arbre {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.formations-niveau {
    display: grid;
    /* Vertical, puis horizontal — 50 px entre les cartes d'une rangée. */
    gap: 32px 50px;
    align-items: start;
    justify-items: center;
    /* Repli d'abord, puis le nombre exact de colonnes annoncé par le serveur.
       Un navigateur qui ne saurait pas lire une variable dans `repeat()`
       ignore la seconde déclaration et garde la première. */
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    grid-template-columns: repeat(var(--formations-colonnes, 3), minmax(0, 1fr));
}

/* Le groupe qui prolonge une formation se place DANS LA COLONNE de cette
   formation, pas au milieu de la page. C'est ce qui fait partir les flèches
   du bon endroit quand le parent n'est pas la carte centrale.
   Le contenu déborde symétriquement de sa colonne : deux cartes côte à côte
   sont plus larges qu'une seule. */
.formations-suite {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    grid-template-columns: repeat(var(--formations-colonnes, 3), minmax(0, 1fr));
}

.formations-suite-contenu {
    grid-column: var(--formation-colonne, 1);
    justify-self: center;
    width: max-content;
    max-width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Les flèches partent toutes du centre — sous le parent — et s'écartent
   vers les cartes du dessous. D'où ce `gap` négatif : les queues doivent se
   rejoindre, pas se juxtaposer. */
.formations-liaison {
    display: flex;
    justify-content: center;
    /* Les queues se rejoignent sous le parent, les pointes s'écartent : cet
       écart règle l'ouverture de l'angle. Trop serré, les deux flèches se
       lisent comme une seule. */
    gap: 44px;
    margin-bottom: 4px;
}

.formations-niveau.est-niveau-2 {
    display: flex;
    justify-content: center;
    gap: 24px;
}

.formations-niveau.est-niveau-2 > .formation-carte {
    flex: 0 1 250px;
}

/* Chaque formation dans son cadre : fond clair, coins arrondis et un liseré
   de la même couleur et de la même épaisseur que le bouton, sans ombre. */
.formation-carte {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    max-width: 300px;
    padding: 24px 20px 26px;
    border: 1px solid var(--couleur-principale, #0d5aa7);
    border-radius: 18px;
    background: #ffffff;
}

.formation-picto {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    overflow: hidden;
    /* Teinte douce de la couleur de la formation. Le repli couvre les
       navigateurs sans `color-mix`. */
    background: var(--formation-couleur, #3788d8);
    background: color-mix(in srgb, var(--formation-couleur, #3788d8) 22%, #ffffff);
    transition: transform .3s;
}

.formation-picto:hover {
    transform: scale(1.04);
}

.formation-picto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* `text-wrap: balance` demande au navigateur d'égaliser la longueur des
   lignes au lieu de remplir la première au maximum. Combiné au trait d'union
   insécable posé côté serveur, c'est ce qui donne des coupures aux bons
   endroits sans écrire un seul retour à la ligne dans les titres.
   Un navigateur qui ne connaît pas la propriété l'ignore : on retrouve le
   comportement d'avant, rien ne casse. */
/* Le niveau, au-dessus du titre de la carte. Il reprend l'écart que le titre
   avait avec le pictogramme, et le titre perd le sien quand il suit le
   niveau : sans cela les deux marges s'additionneraient et le bloc de texte
   descendrait de 18 px dans les seules cartes qui ont un niveau. */
.formation-carte-niveau {
    /* 30 px sous le pictogramme : le niveau ouvre le bloc de texte, il s'en
       détache donc franchement. Sa marge BASSE est nulle — c'est le titre qui
       porte l'écart de 10 px juste en dessous, et une seule des deux marges
       doit le décider (en flex elles ne fusionnent pas : deux valeurs
       s'additionneraient). */
    margin: 30px 0 0;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    /* Le bleu des titres de carte. La variable, et non la valeur : le jour où
       vous changez la couleur des h3 dans l'identité visuelle, le niveau
       suivra au lieu de rester en arrière. */
    color: var(--couleur-h3, var(--couleur-principale, #0d5aa7));
}

.formation-titre {
    /* 5 px, qu'il suive le niveau ou le pictogramme.

       `!important` à contrecœur, et pour une raison précise : Identité
       visuelle > Typographie > H3 permet de régler la marge de TOUS les h3 du
       site, et l'émet en `!important` (chez vous 20 px en haut, 10 px en bas).
       Sans le même poids ici, le titre d'une carte de schéma reprendrait cette
       marge générale au lieu de la sienne — et changer cette ligne n'aurait
       aucun effet visible, ce qui est le pire des deux cas.

       Contrepartie assumée : le titre de carte ne suit plus le réglage H3 de
       l'identité visuelle pour ses MARGES. Police, couleur, taille et graisse,
       eux, continuent d'en dépendre. Même arbitrage que `.page-bandeau-titre`,
       plus haut dans cette feuille. */
    margin: 5px 0 6px !important;
    font-size: 18px;
    line-height: 1.3;
    text-wrap: balance;
}

.formation-titre a {
    color: inherit;
    text-decoration: none;
}

/* Pas de liseré sous les titres d'une grille : il tracerait un trait sous
   chaque carte. */
.formation-titre::after {
    content: none;
}

/* Le sous-titre est un h4 : il prend donc l'apparence h4 de l'univers.
   Ne restent ici que la mise en page et le liseré à neutraliser. */
.formation-soustitre {
    margin: 0;
    font-size: 14px;
    line-height: var(--line-height, 1.45);
    opacity: .8;
}

.formation-soustitre::after {
    content: none;
}

/* Le début du descriptif, sous le sous-titre. Plus discret que lui : c'est
   une précision, pas un second sous-titre. */
/* Centré, comme le reste de la carte — choix du client.
   (Il avait été ferré à gauche un moment : un paragraphe de plusieurs
   lignes s'y lit plus facilement, chaque ligne repartant du même bord. Si
   la question revient, c'est `align-self: stretch` + `text-align: left`
   ici, et rien d'autre.) */
.formation-accroche {
    margin: 10px 0 0;
    font-size: 15px;
    line-height: var(--line-height, 1.55);
    color: var(--couleur-texte-secondaire, #6b7c8d);
}

/* Même bouton que dans la liste détaillée et sur les fiches d'équipe : ses
   règles sont écrites une fois, plus haut dans cette feuille.

   `margin-top: auto` le pousse au BAS de la carte : sur une rangée, les
   boutons s'alignent alors entre eux malgré des titres de longueurs
   différentes. Encore faut-il que les cartes aient la même hauteur, d'où le
   `height: 100%` ci-dessous — la carte occupe toute la rangée de la grille
   sans que celle-ci change d'alignement.

   Quand il n'y a pas d'espace libre, `auto` vaut 0 et le bouton toucherait
   le texte : la marge basse des deux éléments qui peuvent le précéder
   garantit l'écart. */
.formation-carte-bouton {
    margin-top: auto;
    text-transform: uppercase;
}

.formations-niveau > .formation-carte {
    height: 100%;
}

.formation-soustitre,
.formation-accroche {
    margin-bottom: 16px;
}

/* Flèche reliant une formation à celle qui la prolonge. L'image vit dans
   `assets/img/` : déposez la vôtre sous le même nom, rien à changer ici.
   `currentColor` dans le SVG lui donne la couleur de l'univers. */
.formation-fleche {
    display: block;
    width: 76px;
    height: 84px;
    color: var(--couleur-principale, #0d5aa7);
    background: currentColor;
    -webkit-mask: url('assets/img/fleche_formation.svg') no-repeat center / contain;
    mask: url('assets/img/fleche_formation.svg') no-repeat center / contain;
    /* Le retournement de la flèche gauche passe par une VARIABLE, et non par
       une déclaration `transform` à part. `transform` est une propriété
       unique : l'animation d'arrivée, plus bas, doit pouvoir reposer le
       miroir à chaque étape sans avoir à savoir de quel côté elle se trouve.
       Écrit autrement, la flèche gauche se retournerait pendant son
       apparition et pointerait au mauvais endroit. */
    --fleche-miroir: 1;
    transform: scaleX(var(--fleche-miroir));
}

/* Le fichier SVG dessine une flèche dont la QUEUE est en haut à gauche et
   la POINTE en bas à droite. Elle convient telle quelle à la moitié droite.
   Pour la moitié gauche, on la retourne : la queue revient vers le centre,
   la pointe s'en éloigne. */
.formation-fleche.est-a-gauche {
    --fleche-miroir: -1;
}

/* =====================================================================
   SCHÉMA — arrivée des flèches, puis des modules qu'elles annoncent
   =====================================================================
   Quand le groupe qui prolonge une formation entre dans l'écran, les deux
   flèches descendent d'abord, puis les deux cartes se posent dessous. Dans
   cet ordre : la flèche annonce, la carte répond.

   Les cartes du PREMIER niveau ne sont pas touchées — elles sont déjà là
   quand on arrive sur la page.

   Comme partout ailleurs : sans JavaScript ou avec les animations réduites,
   `js-anime` n'est pas posée, et tout s'affiche entier et immédiatement.
   ===================================================================== */
.js-anime .formations-suite .formation-fleche {
    opacity: 0;
    transform: scaleX(var(--fleche-miroir)) translateY(-14px);
    transition: opacity .5s ease, transform .5s cubic-bezier(.2, .8, .25, 1);
}

.js-anime .formations-suite.est-affichee .formation-fleche {
    opacity: 1;
    transform: scaleX(var(--fleche-miroir)) translateY(0);
}

.js-anime .formations-suite.est-affichee .formation-fleche:nth-child(2) {
    transition-delay: 90ms;
}

/* Les cartes arrivent après les flèches, et se posent comme les photos de la
   galerie : d'un peu plus grand vers leur taille. */
.js-anime .formations-suite .formation-carte {
    opacity: 0;
    transform: scale(1.06) translateY(-10px);
    transition: opacity .55s ease, transform .55s cubic-bezier(.2, .8, .25, 1);
}

.js-anime .formations-suite.est-affichee .formation-carte {
    opacity: 1;
    transform: none;
    transition-delay: 260ms;
}

.js-anime .formations-suite.est-affichee .formation-carte:nth-child(2) {
    transition-delay: 360ms;
}

@media (max-width: 768px) {
    /* ------------------------------------------------------------------
       La hiérarchie sur mobile
       ------------------------------------------------------------------
       Le HTML écrit d'abord TOUTES les formations du premier niveau, puis
       les groupes qui les prolongent. Sur ordinateur, chaque groupe est
       placé dans la colonne de son parent, ce qui le remet dessous. Sur
       mobile il n'y a plus qu'une colonne : sans rien de plus, les groupes
       s'accumuleraient tout en bas, détachés de leur formation.

       On efface donc la rangée du haut au profit de ses cartes
       (`display: contents`) : cartes et groupes deviennent voisins dans la
       même pile, et le rang posé par le serveur les intercale — carte,
       son groupe, carte suivante, etc. Aucun changement de HTML. */
    .formations-arbre {
        align-items: center;
        gap: 28px;
    }

    .formations-arbre > .formations-niveau {
        display: contents;
    }

    .formations-arbre > .formations-niveau > .formation-carte,
    .formations-arbre > .formations-suite {
        order: var(--formation-ordre, 0);
    }

    .formations-arbre > .formations-suite {
        display: block;
        width: 100%;
    }

    .formations-suite-contenu {
        width: 100%;
    }

    /* Le second niveau RESTE côte à côte, même sur un petit écran : c'est
       ce qui laisse les deux flèches partir du centre de la formation du
       dessus et donc ce qui montre le lien. Empilées, elles ne relieraient
       plus rien. Au-delà de deux, le passage à la ligne prend le relais. */
    .formations-niveau.est-niveau-2 {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 20px 12px;
    }

    .formations-niveau.est-niveau-2 > .formation-carte {
        flex: 1 1 0;
        min-width: 0;
    }

    /* Une seule taille de pictogramme, les deux niveaux confondus : c'est le
       défaut du site vitrine qu'on ne veut pas reproduire. Elle suit la
       largeur de l'écran pour que deux cartes tiennent sur une rangée. */
    .formation-picto {
        width: min(150px, 36vw);
        height: min(150px, 36vw);
    }

    .formation-titre {
        font-size: 16px;
        /* `!important` pour la même raison que la règle générale plus haut :
           sans lui, cette marge mobile perdait déjà contre le réglage H3 de
           l'identité visuelle, sans que rien ne le signale. */
        margin-top: 12px !important;
    }

    .formations-niveau.est-niveau-2 .formation-titre {
        font-size: 15px;
    }

    .formation-fleche {
        width: 46px;
        height: 52px;
    }

    .formations-liaison {
        gap: 24px;
    }
}

/* ============================================================
   LISERÉ ANIMÉ — le trait se dessine à l'entrée du titre
   ============================================================

   Le liseré est un `::after` distinct du titre : on l'anime donc sans
   toucher au texte, et sans risque de décaler la mise en page — `transform`
   ne participe pas au calcul des positions.

   `scaleX` plutôt qu'une animation de `width` : la longueur du trait est
   réglable par niveau dans l'identité visuelle, et une valeur de départ
   écrite ici l'aurait figée. L'échelle, elle, vaut quelle que soit la
   longueur choisie — et le navigateur l'anime sans recalculer la page.

   Tout est conditionné à `.js-lisere-anime`, posée par le script d'entete.php.
   Sans JavaScript ou avec les animations réduites, rien de ce qui suit ne
   s'applique et les liserés restent affichés, immobiles. */

.js-lisere-anime h1::after,
.js-lisere-anime h2::after,
.js-lisere-anime h3::after,
.js-lisere-anime h4::after,
.js-lisere-anime h5::after,
.js-lisere-anime h6::after,
.js-lisere-anime .card-title.card-title::after {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .7s cubic-bezier(.22, .61, .36, 1);
}

/* Le liseré d'un titre de section est centré (`margin: 8px auto 0`) : il doit
   s'ouvrir depuis son milieu. Avec l'origine à gauche, il donnerait
   l'impression de glisser vers la droite au lieu de s'écarter. */
.js-lisere-anime .sessions-section-title::after {
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .7s cubic-bezier(.22, .61, .36, 1);
}

.js-lisere-anime h1.lisere-vu::after,
.js-lisere-anime h2.lisere-vu::after,
.js-lisere-anime h3.lisere-vu::after,
.js-lisere-anime h4.lisere-vu::after,
.js-lisere-anime h5.lisere-vu::after,
.js-lisere-anime h6.lisere-vu::after,
.js-lisere-anime .card-title.card-title.lisere-vu::after,
.js-lisere-anime .sessions-section-title.lisere-vu::after {
    transform: scaleX(1);
}

/* À l'impression, aucun trait ne doit manquer : la page ne défile pas, donc
   rien ne déclencherait l'animation. */
@media print {
    .js-lisere-anime h1::after,
    .js-lisere-anime h2::after,
    .js-lisere-anime h3::after,
    .js-lisere-anime h4::after,
    .js-lisere-anime h5::after,
    .js-lisere-anime h6::after,
    .js-lisere-anime .card-title.card-title::after,
    .js-lisere-anime .sessions-section-title::after {
        transform: none;
    }
}

/* =====================================================================
   FORMATIONS EN DIAPORAMA
   Source « Formations (diaporama) » d'une colonne de type « Liste ».

   Les CARTES ne sont pas redéfinies ici : ce sont celles du schéma,
   `.formation-carte`, avec leur cadre, leur pastille de couleur et leur
   bouton. Ce bloc ne pose que la piste, les flèches et les points.

   La mécanique est celle de la galerie photos — défilement natif, accroche
   par `scroll-snap`, aucune position calculée en pixels.
   ===================================================================== */
.formations-diapo {
    position: relative;
    padding: 0 44px;   /* la place des deux flèches, de part et d'autre */
}

.formations-diapo-piste {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    /* La barre de défilement est masquée : le déplacement passe par les
       flèches, les points, le doigt ou le pavé tactile. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.formations-diapo-piste::-webkit-scrollbar { display: none; }

/* UNE VUE PAR FORMATION, sur toute la largeur de la piste.

   C'est ce qui garantit qu'on n'en voit qu'une : une largeur en pourcentage
   du contenu laissait dépasser le bord de la suivante, et cette carte à
   moitié visible se lisait comme un défaut d'affichage plutôt que comme une
   invitation à faire défiler.

   La CARTE, elle, garde la largeur du schéma — c'est la vue qui s'étire,
   pas elle. D'où l'absence de `max-width` ici : celui de `.formation-carte`
   doit continuer de s'appliquer. */
.formations-diapo-vue {
    flex: 0 0 100%;
    /* `min-width: 0` ANNULE LA TAILLE MINIMALE AUTOMATIQUE des éléments
       flexibles, et ce n'est pas une précaution de principe.

       Un titre comme « oro‑myo‑fonctionnels » est écrit avec des traits
       d'union INSÉCABLES : il ne se coupe jamais, et impose donc à sa carte
       une largeur minimale supérieure aux autres. Sans cette ligne, la vue
       qui le contient s'élargissait de neuf pixels — mesuré — et toutes les
       vues suivantes se décalaient d'autant. Les points de l'accroche ne
       tombaient plus au bon endroit, et une carte finissait légèrement de
       travers. */
    min-width: 0;
    scroll-snap-align: start;
    display: flex;
    justify-content: center;
}

/* LA CARTE OCCUPE LA COLONNE.

   Dans le schéma, une carte est plafonnée à 300 px : elles y sont plusieurs
   côte à côte, et il faut bien les répartir. Ici elle est seule dans sa vue,
   et ce plafond la laissait flotter au milieu d'une colonne deux fois plus
   large. Elle prend donc la place disponible.

   Le plafond de 700 px n'est pas un caprice : au-delà, le pictogramme rond
   — qui garde ses 190 px — devient un petit disque perdu en haut d'un grand
   cadre vide, et la carte cesse de ressembler à ce qu'elle est ailleurs sur
   le site. C'est la seule valeur à changer si vous la voulez plus large. */
.formations-diapo-vue > .formation-carte {
    max-width: 700px;
}

/* Les flèches, posées sur les bords. Centrées sur le pictogramme et non sur
   le bloc entier : la hauteur d'une carte varie avec la longueur du titre et
   du sous-titre, une flèche calée au milieu de l'ensemble tomberait trop bas
   sur les cartes hautes. */
.formations-diapo-fleche {
    position: absolute;
    top: 130px;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: var(--couleur-principale, #0d5aa7);
    line-height: 1;
    z-index: 2;
    /* Dimensions FIXES, comme pour la galerie : sans elles, le bouton prend
       la largeur de son contenu, et tant que la police d'icônes n'est pas
       chargée le navigateur affiche « arrow_back » en toutes lettres —
       assez large pour recouvrir la première carte et intercepter le clic
       destiné à son bouton. */
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.formations-diapo-fleche:hover { opacity: .65; }
.formations-diapo-fleche .material-symbols-outlined { font-size: 32px; }
.formations-diapo-prev { left: 0; }
.formations-diapo-next { right: 0; }

.formations-diapo-points {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 22px;
}

.formations-diapo-point {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 1px solid var(--couleur-principale, #0d5aa7);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: background-color .2s;
}
.formations-diapo-point.active {
    background: var(--couleur-principale, #0d5aa7);
}

/* Tout tient à l'écran : les commandes s'effacent au lieu de rester là sans
   rien commander. Le script pose la classe après avoir mesuré. */
.formations-diapo.est-fixe { padding: 0; }
.formations-diapo.est-fixe .formations-diapo-fleche,
.formations-diapo.est-fixe .formations-diapo-points { display: none; }
.formations-diapo.est-fixe .formations-diapo-piste { justify-content: center; }

@media (max-width: 480px) {
    .formations-diapo { padding: 0 30px; }
}

/* =====================================================================
   VISUEL DE SECTION ANIMÉ (SVG inséré dans la page)

   L'animation est ÉCRITE ICI et non dans le fichier SVG. Une seule
   raison, mais elle décide : les durées et les enchaînements se règlent
   alors sans rouvrir le dessin ni le redéposer. Le fichier ne porte que
   les formes et trois classes — `an-zoom`, `an-trace`, `an-photo` — qui
   disent à quel étage chaque élément appartient.

   TROIS TEMPS :
     1. la forme pleine apparaît en zoom          (0 → 450 ms)
     2. le trait se dessine                      (275 → 925 ms)
     3. la photo se pose par-dessus              (725 → 1125 ms)
   Les deux recouvrements sont voulus : un temps qui attend la fin du
   précédent donne une saynète, pas un mouvement.
   ===================================================================== */
.page-section-visuel-svg {
    display: block;
    width: 100%;
}

.page-section-visuel-svg svg {
    display: block;
    width: 100%;
    height: auto;
}

/* SANS JAVASCRIPT, OU AVEC « RÉDUIRE LES ANIMATIONS » : rien de ce qui
   suit ne s'applique — `js-anime` n'est pas posée — et le dessin
   s'affiche entier, immobile. L'animation est un supplément, jamais une
   condition d'affichage. C'est la même règle que pour les liserés et le
   schéma des formations. */
.js-anime .page-section-visuel-svg .an-zoom,
.js-anime .page-section-visuel-svg .an-photo {
    opacity: 0;
}

.js-anime .page-section-visuel-svg .an-trace {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}

/* `transform-box: fill-box` est INDISPENSABLE dans un SVG : sans lui,
   `transform-origin: center` désigne le centre du REPÈRE du dessin et non
   celui de la forme, et le zoom part de travers — la forme fuit vers un
   coin au lieu de grandir sur place. */
.js-anime .page-section-visuel-svg.est-affichee .an-zoom {
    transform-box: fill-box;
    transform-origin: center;
    animation: pcsvg-zoom 450ms cubic-bezier(.22, .9, .3, 1) both;
}

/* `pathLength="1"` est posé sur les tracés dans le fichier : leur longueur
   est ramenée à 1, quelle que soit leur forme. Aucune mesure à faire, et
   deux tracés de longueurs différentes — ici le trait du dessous et celui
   qui repasse par-dessus la forme pleine — se dessinent au même rythme. */
.js-anime .page-section-visuel-svg.est-affichee .an-trace {
    animation: pcsvg-trace 650ms ease-in-out 275ms both;
}

.js-anime .page-section-visuel-svg.est-affichee .an-photo {
    transform-box: fill-box;
    transform-origin: center;
    animation: pcsvg-photo 400ms cubic-bezier(.22, .9, .3, 1) 725ms both;
}

@keyframes pcsvg-zoom {
    from { opacity: 0; transform: scale(.55); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes pcsvg-trace {
    to { stroke-dashoffset: 0; }
}

@keyframes pcsvg-photo {
    from { opacity: 0; transform: scale(1.05); }
    to   { opacity: 1; transform: scale(1); }
}

/* =====================================================================
   L'INTRODUCTION D'UNE COLONNE
   Deux ou trois lignes entre le titre et ce qu'elles annoncent — un
   visuel, un formulaire, une liste.

   Elle reprend la typographie du texte courant : c'est du texte de page,
   pas une légende. Seul l'écart au-dessous la distingue, pour qu'elle se
   détache de ce qu'elle introduit sans s'en séparer.
   ===================================================================== */
.page-section-intro {
    line-height: var(--line-height, 1.7);
    margin-bottom: 22px;
}

.page-section-intro > *:first-child { margin-top: 0; }
.page-section-intro > *:last-child  { margin-bottom: 0; }

.page-section-intro ul,
.page-section-intro ol {
    padding-left: 22px;
    margin: 10px 0;
}

/* Un titre de colonne suivi d'une introduction ne garde pas tout son écart :
   les deux forment une seule entrée en matière. */
.page-section-titre + .page-section-intro {
    margin-top: -4px;
}

/* =====================================================================
   LES PROCHAINES SESSIONS EN LISTE
   Deux présentations, sources « Prochaines sessions (cartes) » et
   « (rangées) » d'une colonne de type Liste.

   CE BLOC NE POSE QUE DE LA MISE EN PAGE. Le disque, la ville, les dates,
   le niveau, le titre, le sous-titre et le bouton gardent les classes
   qu'ils portent ailleurs sur le site, donc leur typographie, leurs
   couleurs et leurs réglages d'univers. Rien n'est réécrit ici.
   ===================================================================== */

/* --- Cartes : une grille qui s'adapte à la largeur ------------------- */
.sessions-liste-cartes {
    display: grid;
    /* `auto-fit` + `minmax` plutôt qu'un nombre de colonnes : trois cartes
       en pleine largeur, une seule dans une demi-colonne de section, sans
       qu'aucun point de rupture ne soit à écrire.

       260 px et non 240 : « oro-myo-fonctionnels », écrit avec des traits
       d'union INSÉCABLES pour ne pas se couper, réclame 257 px à lui seul.
       À 240 il débordait de sa carte d'un pixel — assez pour que le titre
       morde sur sa voisine. La largeur minimale est donc dictée par le mot
       le plus long du site, pas par une valeur ronde. */
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 34px 26px;
}

.session-liste-carte {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    /* Toute la hauteur de sa case : combiné au `margin-top: auto` du bouton,
       c'est ce qui aligne les boutons d'une même rangée. Sans cela, chaque
       bouton se cale sous son propre texte et la rangée devient un escalier —
       les titres n'ayant pas tous le même nombre de lignes. */
    height: 100%;
}

/* La ville et les dates ouvrent la carte : c'est le disque qui vient
   ensuite, d'où cet écart sous le bloc de tête. */
.session-liste-carte .session-dates {
    margin-bottom: 18px;
}

/* --- Rangées : le disque à gauche, le texte à droite ----------------- */
.sessions-liste-rangees {
    display: flex;
    flex-direction: column;
    /* 64 px et non 40 : une rangée fait déjà 250 px de haut et centre son
       texte verticalement. À 40 px, le bouton d'une session et le titre de
       la suivante se retrouvaient à moins d'un tiers de la hauteur d'une
       rangée l'un de l'autre — deux sessions se lisaient comme une seule. */
    gap: 64px;
}

.session-liste-rangee {
    display: flex;
    align-items: center;
    /* Le couple disque + texte ne remplit plus la rangée. Calé à GAUCHE et
       non centré : centré, chaque rangée se déplaçait selon la longueur de
       son texte, et les disques zigzaguaient d'une session à l'autre. À
       gauche, ils s'alignent tous — et le texte reste à 10 px de chacun. */
    justify-content: flex-start;
    gap: 10px;
    /* Une rangée ne s'étire pas à toute la page. Au-delà, le disque et le
       texte s'éloignent l'un de l'autre au point qu'on ne les lit plus
       comme un même bloc — et une ligne de titre isolée au milieu d'un
       grand vide se lit mal. C'est la largeur du montage. */
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

/* LE DISQUE PERD SON CENTRAGE AUTOMATIQUE, et la règle vise LA RANGÉE
   elle-même — pas la liste qui la contient.

   Le disque porte `margin: 0 auto` pour se centrer dans une carte. Or une
   marge `auto` ABSORBE L'ESPACE LIBRE : dans une rangée dont le texte
   n'occupe pas toute la largeur, elle repoussait le disque vers la droite
   de la moitié du vide, et l'écart disque → texte passait de 10 à 36 px
   sur cette session-là seulement.

   Écrite `.sessions-liste-rangees .session-visuel`, la remise à zéro ne
   couvrait pas les rangées du DIAPORAMA, dont le conteneur porte un autre
   nom. C'est précisément là que le défaut se voyait. */
.session-liste-rangee .session-visuel {
    margin: 0;
}

.session-liste-rangee .session-liste-texte {
    /* `min-width: 0` : sans lui, un titre à traits d'union insécables
       impose sa largeur minimale et pousse le disque hors de la rangée. */
    min-width: 0;
    /* `0 1 auto` ET NON `1 1 auto`, et c'est tout le point.

       En s'étirant (`flex-grow: 1`), le bloc de texte occupait toute la
       place restante quel que soit son contenu : le texte y était centré,
       si bien que le disque se retrouvait à 10 px d'un bloc VIDE, et à
       cent et quelques pixels du premier mot. La distance affichée entre
       le disque et le texte changeait donc d'une session à l'autre, au
       gré de la longueur des titres.

       Sans étirement, le bloc prend la largeur de son texte : les 10 px
       sont alors une vraie distance, la même pour toutes les sessions.
       C'est la MARGE entre deux sessions qui les sépare, pas un bloc
       gonflé pour occuper le terrain. */
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Le niveau ouvre le texte d'une rangée : il n'a pas de disque au-dessus
   de lui, donc pas les 30 px prévus pour s'en détacher. */
.session-liste-rangee .formation-carte-niveau {
    margin-top: 0;
}

/* Le bloc du lieu suit celui de la formation : il a besoin de s'en détacher. */
.session-liste-rangee .session-liste-lieu {
    margin-top: 18px;
}

/* --- Le bouton, commun aux deux ------------------------------------- */
/* Mêmes retouches que dans la grille des prochaines sessions d'une
   formation : capitales et curseur. Centré ici, les deux présentations
   centrant leur contenu. */
/* L'ENVELOPPE DU BOUTON, et non le bouton lui-même.

   C'est elle qui porte `margin-top: auto` — ce qui pousse le bouton au bas
   de la carte et aligne ceux d'une même rangée. Posé sur le bouton, le même
   réglage aurait marché, mais l'écart minimum aurait dû passer par son
   `padding` : la pastille se serait déformée dès que le texte remplit la
   carte. */
.sessions-liste .session-liste-pied {
    margin-top: auto;
    padding-top: 18px;
}

.sessions-liste .session-bouton {
    text-transform: uppercase;
    cursor: pointer;
}

@media (max-width: 768px) {
    /* UNE RANGÉE REDEVIENT UNE CARTE, dans le même ordre qu'elle : la ville
       et la date d'abord, puis le disque, puis la formation, puis le bouton.
       Les deux présentations se complètent au lieu de se contredire.

       `display: contents` fait disparaître la colonne de texte de la mise en
       page — ses trois enveloppes deviennent alors frères du disque, et
       peuvent donc être réordonnées avec lui. Sans cela, `order` ne pourrait
       jamais faire passer la ville, enfermée dans la colonne, AU-DESSUS d'un
       disque qui lui est extérieur. */
    .session-liste-rangee {
        flex-direction: column;
        /* 18 px, la valeur que le bouton porte déjà sur ordinateur : tous
           les joints de la rangée empilée sont ainsi les mêmes, et l'écart
           texte → bouton y est celui du grand écran. */
        gap: 18px;
    }

    .session-liste-rangee .session-liste-texte {
        display: contents;
    }

    /* `max-width: 100%` sur chacun, et ce n'est pas une précaution vaine.

       La colonne de texte, effacée par `display: contents`, ne borne plus
       ses blocs : ils se retrouvent enfants directs de la rangée, sans
       personne pour limiter leur largeur. Un titre long prenait alors sa
       largeur naturelle — près du double de l'écran — et débordait des deux
       côtés, centré donc coupé à gauche comme à droite. */
    .session-liste-carte .session-liste-lieu,
    .session-liste-carte .session-liste-formation,
    .session-liste-carte .session-liste-pied,
    .session-liste-rangee .session-liste-lieu,
    .session-liste-rangee .session-liste-formation,
    .session-liste-rangee .session-liste-pied {
        max-width: 100%;
        min-width: 0;
    }

    /* L'ORDRE MOBILE, POUR LA CARTE COMME POUR LA RANGÉE.

       L'intitulé de la formation passe AU-DESSUS du disque, la date en
       dessous : on annonce ce qu'on montre avant de le montrer, et la date
       vient conclure, juste avant le bouton qui la réserve. */
    .session-liste-carte .session-liste-formation,
    .session-liste-rangee .session-liste-formation { order: 1; margin-top: 0; }

    .session-liste-carte .session-visuel,
    .session-liste-rangee .session-visuel          { order: 2; margin: 0 auto; }

    .session-liste-carte .session-liste-lieu,
    .session-liste-rangee .session-liste-lieu      { order: 3; margin-top: 0; }

    .session-liste-carte .session-liste-pied,
    .session-liste-rangee .session-liste-pied      { order: 4; }

    /* La date n'ouvre plus la carte : elle la ferme. L'écart qu'elle
       portait sous elle n'a plus lieu d'être. */
    .session-liste-carte .session-dates {
        margin-bottom: 0;
    }

    /* Le niveau ouvre le bloc de formation, qui suit désormais le disque :
       il retrouve l'écart que la carte lui donne. */
    .session-liste-rangee .formation-carte-niveau {
        margin-top: 0;
    }

    /* SUR MOBILE, ON N'ALIGNE PLUS LES BOUTONS.

       Sur grand écran, `margin-top: auto` pousse le bouton au bas de son
       bloc : les boutons d'une même rangée s'alignent alors, ce qui est
       exactement ce qu'on veut quand ils sont côte à côte.

       Empilés, ils ne sont plus côte à côte — il n'y a plus rien à aligner.
       Le réglage ne faisait donc que creuser un vide entre le texte et son
       bouton, d'autant plus grand que la session avait peu à dire. Le bouton
       reprend sa place naturelle, juste sous le texte.

       Et la carte cesse de s'étirer à la hauteur de sa vue : étirée, elle
       aurait déplacé le vide sous le bouton au lieu de le supprimer. */
    /* La GRILLE de cartes n'aligne plus ses boutons non plus : empilée sur
       une seule colonne, elle n'a plus de voisines avec quoi s'aligner. */
    .sessions-liste .session-liste-pied {
        margin-top: 0;
    }

    /* DANS LA RANGÉE, LE BOUTON NE PORTE PLUS SON PROPRE ÉCART.

       Empilée, la rangée sépare déjà ses blocs de 18 px. Le retrait que le
       bouton porte pour la carte — qui, elle, n'a pas d'écart entre ses
       blocs — venait s'y ajouter : 34 px au lieu de 18, soit le double de
       ce qu'on voit sur ordinateur. */
    .session-liste-rangee .session-liste-pied {
        padding-top: 0;
    }

    .sessions-diapo .session-liste-carte {
        height: auto;
    }

    /* LE BLOC ENTIER SE CENTRE DANS SA VUE.

       Les vues d'une piste ont toutes la hauteur de la plus haute. Une
       session qui a peu à dire laissait donc du vide — sous elle si le
       contenu se calait en haut, entre son texte et son bouton si on
       poussait celui-ci en bas. Centré, le vide se répartit au-dessus et
       en dessous du bloc, et le bloc lui-même reste compact. */
    .sessions-diapo .formations-diapo-vue {
        display: flex;
        align-items: center;
    }

    .sessions-diapo .session-liste-carte,
    .sessions-diapo .session-liste-rangee {
        width: 100%;
    }
}

/* --- Les sessions en diaporama -------------------------------------- */
/* La piste, les flèches, les points et le script sont ceux du diaporama
   des formations : ce bloc ne fait qu'élargir les vues.

   Une carte de session est plus compacte qu'une carte de formation : trois
   par écran s'y lisent bien là où une seule laisserait un grand vide. Le
   script ne décide de rien — il mesure ce que cette règle a produit et en
   déduit de combien avancer. Pour une carte par écran, il suffit donc de
   remplacer cette largeur par `100%`. */
/* COMBIEN PAR ÉCRAN, selon la présentation.

   Une carte est compacte : trois par écran s'y lisent bien. Une rangée est
   large : elle en prend un seul. Le script ne décide de rien — il MESURE ce
   que ces deux règles ont produit et en déduit de combien avancer. */
.sessions-diapo-cartes .formations-diapo-vue {
    flex: 0 0 max(260px, calc(33.333% - 18px));
}

/* DEUX RANGÉES PAR ÉCRAN. Les 10 px retranchés sont la moitié de l'écart de
   20 px que la piste met entre deux vues : sans eux, deux vues à 50 % plus
   leur écart dépassent la piste et la seconde est rognée.

   Le plancher de 420 px protège les colonnes étroites : en dessous, une
   rangée n'a plus la place de poser son disque à côté de son texte, et la
   vue reprend toute la largeur — une rangée par écran. */
/* L'écart entre deux rangées côte à côte : 40 px, et non les 20 px que la
   piste applique par défaut. Il est posé ICI et non sur `.formations-diapo-piste`
   nue : cette règle-là est partagée avec le diaporama des formations, qui
   n'a aucune raison de s'écarter davantage. */
.sessions-diapo-rangees .formations-diapo-piste {
    gap: 40px;
}

/* Les 20 px retranchés sont la moitié de cet écart : sans eux, deux vues à
   50 % plus leur écart dépassent la piste et la seconde est rognée. */
.sessions-diapo-rangees .formations-diapo-vue {
    flex: 0 0 max(420px, calc(50% - 20px));
}

/* DANS UN DIAPORAMA, LE BLOC NE S'ÉTIRE PAS : IL SE CENTRE.

   Les vues d'une piste ont toutes la hauteur de la plus haute. Étiré pour
   la remplir, le bloc voyait son bouton poussé tout en bas — et l'écart
   entre le texte et le bouton changeait d'une session à l'autre, d'autant
   plus grand qu'elle avait peu à dire.

   Le bloc garde donc sa hauteur naturelle, son bouton reste à 18 px de son
   texte comme partout ailleurs, et c'est le VIDE qui se répartit — moitié
   au-dessus, moitié en dessous.

   La GRILLE de cartes, elle, garde l'alignement des boutons : ses cartes
   sont côte à côte sur une même rangée, il y a donc quelque chose à
   aligner. Dans un diaporama qu'on traverse une page à la fois, non. */
.sessions-diapo .formations-diapo-vue {
    display: flex;
    align-items: center;
}

.sessions-diapo .session-liste-carte,
.sessions-diapo .session-liste-rangee {
    width: 100%;
    height: auto;
}

.sessions-diapo .session-liste-pied {
    margin-top: 0;
}

/* ---------------------------------------------------------------------
   CARTES EN DIAPORAMA — L'INTITULÉ AU-DESSUS, LA DATE EN DESSOUS

   Le même ordre que sur mobile : on annonce ce qu'on montre avant de le
   montrer, et la date vient conclure, juste avant le bouton qui la
   réserve.

   La GRILLE de cartes, elle, garde son ordre d'origine — la date d'abord.
   C'est volontairement différent : une grille se parcourt du regard pour
   trouver une date, un diaporama se traverse une carte à la fois.

   Écrit ici, après les règles de base des cartes : à priorité égale,
   c'est la règle la plus basse qui l'emporte.
   --------------------------------------------------------------------- */
.sessions-diapo-cartes .session-liste-formation { order: 1; }
.sessions-diapo-cartes .session-visuel          { order: 2; }
.sessions-diapo-cartes .session-liste-lieu      { order: 3; }
.sessions-diapo-cartes .session-liste-pied      { order: 4; }

/* Le niveau ouvre désormais la carte : il n'a plus de disque au-dessus de
   lui, donc plus les 30 px prévus pour s'en détacher. */
.sessions-diapo-cartes .formation-carte-niveau {
    margin-top: 0;
}

/* La date ne précède plus le disque mais le bouton : l'écart qu'elle
   portait sous elle ferait double emploi avec celui du bouton. */
.sessions-diapo-cartes .session-dates {
    margin-bottom: 0;
}

/* ---------------------------------------------------------------------
   MOBILE — LA VUE PREND TOUT L'ÉCRAN

   ÉCRIT ICI, TOUT À LA FIN, ET C'EST LA RAISON D'ÊTRE DE CE BLOC SÉPARÉ.

   Les planchers de 260 et 420 px protègent les colonnes étroites d'un
   écran large. Sur un téléphone ils faisaient l'inverse : `max(420px, …)`
   imposait 420 px à une piste qui n'en fait que 350, et la vue débordait
   de l'écran — le titre s'y retrouvait coupé à droite sans qu'aucun bloc
   ne soit lui-même trop large.

   La correction avait d'abord été écrite dans le bloc mobile plus haut.
   Elle n'a rien changé : à priorité égale, c'est la RÈGLE LA PLUS BASSE
   qui l'emporte, et les planchers sont écrits après. Un `@media` ne pèse
   rien dans ce calcul. D'où ce bloc, placé après eux.
   --------------------------------------------------------------------- */
@media (max-width: 768px) {
    .sessions-diapo-cartes .formations-diapo-vue,
    .sessions-diapo-rangees .formations-diapo-vue {
        flex: 0 0 100%;
    }
}

/* ============================================================
   MOBILE — la colonne ne pousse plus la page hors de l'écran
   ============================================================
   Sur un écran de 390 px, `formation_detail.php` comme
   `session_detail_presentiel.php` réclamaient une piste de 393 et
   430 px : la page débordait, et l'on pouvait la faire glisser
   latéralement.

   Une piste `1fr` ne descend pas en dessous de la largeur minimale
   de son contenu tant qu'on ne le lui dit pas. Deux blocs la
   tenaient écartée : la photo d'un formateur au nom long sur la
   fiche de formation, la ligne « code promo + Appliquer » sur la
   fiche de session — l'un et l'autre déjà là avant ce chantier.

   `min-width: 0` lève ce plancher ; le contenu se replie alors
   normalement. Et le cadre de la colonne passe de 30 à 20 px de
   marge intérieure : 60 px de moins à trouver, sur un écran qui
   n'en a que 350 d'utiles.

   Écrit en FIN de feuille, après les règles de base : une règle
   posée plus haut aurait été recouverte par elles. */
@media (max-width: 768px) {
    .session-grid > *,
    .session-grid-reversed > * {
        min-width: 0;
    }

    .sidebar-formation {
        padding: 20px;
    }
}

/* ============================================================
   LA COLONNE DE DROITE D'UNE FICHE DE SESSION : DEUX CARTES
   ============================================================
   `session-sidebar` est la colonne (l'élément de grille) ;
   `sidebar-formation` habille chaque carte. Sur une fiche de
   FORMATION les deux classes restent portées par le même
   élément — une seule carte — et rien ne change pour elle.

   La carte des informations reste en `flex` : c'est ce qui
   permet aux `order` de `.sidebar-formation` de ranger Public,
   Tarif, Effectif… dans l'ordre voulu, quel que soit l'ordre du
   HTML.

   La carte de réservation, elle, suit l'ordre du document —
   tarif, code promo, options, bouton — ce qui est déjà le bon.
   La laisser en `flex` ferait s'appliquer des `order` écrits
   pour l'ancienne carte unique, et le bouton remonterait
   au-dessus du code promo. */
.session-sidebar > .carte-infos {
    display: flex;
    flex-direction: column;
}

.session-sidebar > .carte-reservation {
    display: block;
    margin-top: 26px;
}

/* Le tarif rappelé ouvre la carte : pas de marge au-dessus. */
.carte-reservation > .price-box:first-child {
    margin-top: 0;
}

/* ============================================================
   LE GRAS DES DATES ET DES HORAIRES
   ============================================================
   Les <strong> posés autour des dates et des heures ne se
   voyaient pas. La faute au navigateur, pas au code : sa règle
   par défaut est `strong { font-weight: bolder }`, et `bolder`
   est une valeur RELATIVE au parent. Le texte des blocs étant
   en 300, « bolder » ne montait qu'à 400 — un écart
   indécelable à l'œil.

   Une valeur absolue règle la question. Elle vaut aussi pour le
   « Reste X places sur Y » du bloc Effectif, qui souffrait du
   même mal sans qu'on l'ait remarqué. */
.info-box-content strong {
    font-weight: 700;
}

/* ============================================================
   L'ICÔNE ET LE TEXTE D'UN BOUTON, SUR LA MÊME LIGNE
   ============================================================
   L'icône paraissait décalée verticalement par rapport au texte.
   Le bouton centre pourtant bien ses éléments
   (`display: inline-flex; align-items: center`) — mais il centre
   des BOÎTES, pas des dessins.

   Mesuré : l'icône fait 20 px de haut et sa boîte 28 px. Elle
   hérite de l'interligne du bouton (1,4), qui s'applique à SA
   taille de police : 1,4 × 20 = 28. Les 8 px de surplus se
   répartissent au-dessus et au-dessous, et le glyphe — dessiné
   par rapport à sa ligne de base, pas au centre de sa boîte — se
   retrouve poussé vers le bas.

   `line-height: 1` ramène la boîte à la taille du glyphe. Le
   centrage du bouton porte alors sur le dessin lui-même. C'est
   valable quelle que soit la police d'icônes, et sans toucher au
   texte.

   Écrit en FIN de feuille : posée plus haut, la règle aurait été
   recouverte par celles qui fixent la taille des icônes. */
.btn .material-symbols-outlined,
.formation-btn .material-symbols-outlined,
.reservation-button .material-symbols-outlined,
.session-bouton .material-symbols-outlined,
.bouton-page .material-symbols-outlined,
.bouton-page-inverse .material-symbols-outlined,
.btn-connexion .material-symbols-outlined,
.btn-inscription .material-symbols-outlined {
    /* L'ICÔNE PREND LA TAILLE DU TEXTE.
       Elle était figée à 20 px par plusieurs règles de cette feuille,
       quelle que soit la taille réglée pour le bouton — d'où une icône
       énorme à côté d'un texte de 12, et un alignement impossible à
       obtenir. Elle hérite maintenant de la taille ET de l'interligne
       du bouton : même corps que le texte, même ligne, à n'importe
       quel réglage.

       L'interligne se règle désormais dans Identité visuelle, pour
       chaque famille de boutons (« Style > Interligne »). */
    font-size: inherit;
    line-height: inherit;

    /* LE DÉCALAGE AU SURVOL. Vous vouliez retirer la transition « à
       partir du 2e élément » : elle n'y était déjà pas. C'est
       l'inverse — mesuré :

           bouton : all 0.3s     icône : all 0s

       Le texte fondait donc sur trois dixièmes de seconde pendant
       que l'icône basculait d'un coup. L'icône arrivait la
       première, le texte la rattrapait.

       `transition: inherit` lui donne exactement celle du bouton :
       les deux changent ensemble. Si vous préférez tout instantané,
       c'est `transition: none` ici ET sur `.btn` (style.css). */
    transition: inherit;
}


/* ============================================================
   LE LISERÉ D'UN TITRE CENTRÉ
   ============================================================
   Les bandeaux de page centrent leur titre, mais le liseré généré sous les
   `h1` porte `margin-top: 8px` — donc calé à gauche. Le trait partait du bord
   gauche du bloc pendant que le texte, lui, était au milieu.

   Les titres de SECTION avaient déjà leur version centrée (`margin: 8px auto
   0`) ; il manquait la même chose ici.

   `transform-origin: center` pour que l'animation s'ouvre depuis le milieu :
   avec l'origine à gauche, le trait donnerait l'impression de glisser vers la
   droite au lieu de s'écarter. */
.compte-header h1::after,
.contact-header h1::after,
.formations-header h1::after,
.formation-detail-header h1::after,
.reservation-header h1::after,
.login-header h1::after,
.register-header h1::after,
.password-header h1::after,
.profile-header h1::after,
.header-section h1::after {
    margin-left: auto;
    margin-right: auto;
}

.js-lisere-anime .compte-header h1::after,
.js-lisere-anime .contact-header h1::after,
.js-lisere-anime .formations-header h1::after,
.js-lisere-anime .formation-detail-header h1::after,
.js-lisere-anime .reservation-header h1::after,
.js-lisere-anime .login-header h1::after,
.js-lisere-anime .register-header h1::after,
.js-lisere-anime .password-header h1::after,
.js-lisere-anime .profile-header h1::after,
.js-lisere-anime .header-section h1::after {
    transform-origin: center;
}

/* ============================================================
   LE BLOC « LIEU D'EXERCICE PROFESSIONNEL » (inscription.php)
   ============================================================
   Un `fieldset` plutôt qu'un simple encadré : le titre y est un
   `legend`, que les lecteurs d'écran annoncent avant chaque champ
   du groupe. Un inscrit malvoyant entend donc « lieu d'exercice
   professionnel — Adresse » et non « Adresse » tout court, qui
   ne dit pas de quelle adresse il s'agit. */
.bloc-exercice {
    /* Quatre pixels, à la couleur du liseré de l'univers : le bloc doit se
       lire comme un ensemble — « voici l'adresse de votre cabinet » — et non
       comme trois champs posés les uns sous les autres. */
    border: 4px solid var(--couleur-lisere, #e0e0e0);
    border-radius: 10px;
    padding: 20px 22px 6px;
    margin: 0 0 20px;
}

.bloc-exercice legend {
    padding: 0 8px;
    font-weight: 700;
    color: var(--couleur-titres, inherit);
}

.bloc-exercice-aide {
    margin: 0 0 16px;
    font-size: 0.9em;
    line-height: 1.5;
    opacity: 0.85;
}

/* Le champ SIRET et son bouton de vérification, sur une ligne. */
.champ-avec-bouton {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.champ-avec-bouton input {
    /* `width: auto` explicite : le formulaire impose `width: 100%` à ses
       champs et à ses boutons. Dans une boîte flex, cette largeur devient la
       base de calcul — le bouton réclamait alors toute la ligne à lui seul et
       débordait, pendant que le champ était réduit à un trait. */
    flex: 1 1 0;
    width: auto;
    min-width: 0;   /* sans quoi le champ refuse de rétrécir sur mobile */
}

.champ-avec-bouton .btn {
    flex: 0 0 auto;
    width: auto;
    white-space: nowrap;
}

.siret-resultat {
    margin: 0 0 16px;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    background: #fafafa;
    font-size: 0.95em;
    line-height: 1.5;
}

.siret-resultat p { margin: 0 0 6px; }
.siret-resultat .btn { margin-top: 6px; }

.siret-resultat.est-trouve        { border-color: #b7e0c0; background: #f3fbf5; }
.siret-resultat.est-erreur        { border-color: #f0b8b8; background: #fdf4f4; }
.siret-resultat.est-avertissement { border-color: #f0dcae; background: #fdf9ef; }
.siret-resultat .siret-ferme      { color: #a05a00; font-weight: 600; }

/* ============================================================
   INSCRIPTION EN TROIS ÉTAPES
   ============================================================ */
.insc-etapes {
    display: flex;
    gap: 10px;
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    flex-wrap: wrap;
}

.insc-etapes li {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 8px;
    row-gap: 0;
    /* CINQ ÉTAPES, PAS TROIS (25/08/2026) : une base de 130 px plutôt que
       zéro. Les onglets se répartissent toujours la largeur disponible,
       mais quand elle manque ils se replient sur une seconde ligne au lieu
       de se comprimer jusqu'à couper les mots. */
    flex: 1 1 130px;
    min-width: 0;
    padding: 10px 4px 8px;
    background: transparent;

    /* La typographie des H3 de l'univers, reprise par ses variables plutôt
       que par une balise <h3> : un onglet n'est pas un titre de section, et
       le prendre pour tel donnerait un plan de page faux à qui navigue au
       clavier ou au lecteur d'écran. Les valeurs de repli valent ce que
       vaut le thème par défaut, si jamais une variable manquait. */
    font-family: var(--police-h3, inherit);
    font-size: var(--taille-h3, 1.25rem);
    font-weight: var(--weight-h3, 600);
    line-height: var(--line-height-h3, 1.15);
    color: var(--couleur-h3, #2061b7);
}

/* LES ONGLETS CONVERGENT VERS LE CENTRE : le premier calé à droite, le
   dernier à gauche, tous ceux du milieu centrés. Les intitulés se
   rapprochent ainsi de l'axe de la page au lieu de flotter chacun dans sa
   colonne.

   ÉCRIT AVEC `:first-child` ET `:last-child`, ET NON `:nth-child(1|2|3)`
   (25/08/2026). L'ancienne écriture nommait les trois onglets un par un :
   en passant à cinq, les onglets 4 et 5 ne recevaient plus aucune règle
   d'alignement — d'où le trou entre le 3 et le 4. La règle ne compte plus
   les onglets, elle décrit leurs places : ajouter ou retirer une étape ne
   demandera plus rien ici. */
/* L'ONGLET EST UNE COLONNE : le numéro se pose AU-DESSUS de l'intitulé.

   La règle est portée par l'onglet lui-même, et non par le seul bloc
   intérieur : si la page servie n'a pas ce bloc — un `inscription.php` plus
   ancien resté en ligne, par exemple — le numéro se remettrait à côté du
   titre. Ici, l'empilement tient dans les deux cas. */
.insc-etapes li { flex-direction: column; }

.insc-etapes li             { align-items: center;     text-align: center; }
.insc-etapes li:first-child { align-items: flex-end;   text-align: right; }
.insc-etapes li:last-child  { align-items: flex-start; text-align: left; }

.insc-etapes .insc-etape-num {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #b9bcc4;
    color: #fff;
    font-weight: 700;
    font-size: .85em;
}

/* LE LISERÉ DE L'ONGLET COURANT — un trait court de 100 px, calé au DÉBUT
   du titre comme celui des H1 et H2 ; centré seulement sous le titre
   centré, comme celui des titres de section.

   Il est porté par le bloc numéro + intitulé : sa largeur de référence est
   donc celle du titre, et non celle du tiers de page.

   C'est une VRAIE largeur de 100 px, pas un fond dimensionné : la largeur
   se comporte de la même façon partout, ce qui n'est pas garanti d'un
   navigateur à l'autre pour un `background-size` animé. */
.insc-etapes .insc-etape-corps::after {
    content: '';
    width: 100px;
    max-width: 100%;
    height: 6px;
    margin-top: 2px;
    background: var(--couleur-lisere, #2061b7);
    /* Réservé dès le départ, invisible : rien ne bouge d'un pixel quand on
       avance d'une étape. */
    opacity: 0;
}

.insc-etapes .insc-etape-corps::after             { align-self: center; }
.insc-etapes li:first-child .insc-etape-corps::after,
.insc-etapes li:last-child  .insc-etape-corps::after { align-self: flex-start; }

/* LE TRAIT SE DESSINE À L'ARRIVÉE SUR L'ÉTAPE.

   Une animation, et non une transition : chaque étape est une page neuve,
   l'élément n'a aucun état précédent d'où partir. */
.insc-etapes .est-courante .insc-etape-corps::after {
    opacity: 1;
    animation: insc-lisere-apparait .45s ease-out both;
}

@keyframes insc-lisere-apparait {
    from { width: 0; opacity: 0; }
    to   { width: 100px; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .insc-etapes .est-courante .insc-etape-corps::after { animation: none; }
}

/* La pastille de l'étape en cours prend la couleur du liseré — l'orange de
   l'identité visuelle. Le numéro et le trait disent la même chose, autant
   qu'ils le disent de la même couleur. */
.insc-etapes .est-courante .insc-etape-num {
    background: var(--couleur-lisere, #2061b7);
}

/* Les étapes déjà franchies restent lisibles mais s'effacent : ce qui est
   fait n'a plus besoin d'attirer l'œil. */
.insc-etapes .est-faite         { opacity: .55; }
.insc-etapes .est-faite .insc-etape-num { background: var(--couleur-boutons, #0d5aa7); }

/* Celles à venir, plus grises encore — elles ne sont pas cliquables. */
.insc-etapes li:not(.est-courante):not(.est-faite) { opacity: .4; }

.insc-boutons {
    /* Trois colonnes dont celle du milieu s'ajuste au bouton : « Continuer »
       tombe alors au centre exact du formulaire, quelle que soit la largeur
       de « Retour ». Centrer une rangée flex ne donne pas cela — les deux
       boutons se groupent au milieu et le principal se retrouve décalé. */
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
}

.insc-boutons .btn { width: auto; }
.insc-boutons .btn-secondary { grid-column: 1; justify-self: start; }
/* `.btn-valider` : la famille « Boutons d'actions » de l'identité
   visuelle. La classe est doublée dans la règle plus bas pour tenir tête
   aux règles du site qui la visent avec deux sélecteurs. */
.insc-boutons .btn-valider { grid-column: 2; }

/* Sans bouton Retour — la première étape — le bouton principal reste au
   centre : il occupe déjà la colonne du milieu. */

/* ═══════════════════════════════════════════════════════════════════════
   LE FIL D'ÉTAPES SUR MOBILE — 25/08/2026
   ═══════════════════════════════════════════════════════════════════════
   Cinq intitulés à la taille des H3, empilés faute de place, occupaient
   tout le premier écran d'un téléphone.

   Ce qu'il devient : les CINQ PASTILLES SUR UNE LIGNE, allumées jusqu'à
   l'étape en cours, et SEUL LE TITRE DE CETTE ÉTAPE dessous — il change au
   fur et à mesure de l'avancement.

   ON NE TOUCHE PAS AU STYLE DU TITRE. Ni sa taille, ni sa graisse, ni sa
   couleur, ni son interligne : il garde exactement l'aspect qu'il a sur
   grand écran. Seule sa POSITION change. Le liseré est réécrit à
   l'identique de celui du bureau — mêmes 100 px, même épaisseur, même
   variable de couleur — parce qu'il est porté par le bloc « numéro +
   intitulé », qui lui reste dans la rangée.

   COMMENT LE TITRE PASSE SOUS LA RANGÉE : il vit dans son onglet, on ne
   peut donc pas l'en sortir sans toucher au balisage. Il est posé en
   absolu par rapport à la liste, qui lui réserve sa place en bas. Rien ne
   saute d'une étape à l'autre : la hauteur est la même du premier au
   dernier écran, que l'intitulé tienne sur une ligne ou deux.
   ═══════════════════════════════════════════════════════════════════════ */

/* DEUX CONDITIONS, PAS UNE — ajouté le 26/08/2026.
   ═══════════════════════════════════════════════════════════════════════
   Un téléphone tourné en paysage fait dans les 800 px de large : la
   condition sur la largeur ne s'appliquait plus, et le fil d'étapes
   reprenait la mise en page du bureau. Les cinq intitulés passaient alors
   sur deux rangées, la cinquième pastille seule en dessous — et cette
   bousculade mangeait la moitié d'un écran qui n'a déjà presque pas de
   hauteur.

   C'est la HAUTEUR qui manque en paysage, pas la largeur. La seconde
   condition la vise directement : 520 px, c'est au-dessus de tous les
   téléphones couchés (390 à 440 px) et bien en dessous d'une tablette
   (768 px et plus), qui garde donc la mise en page du bureau.

   La virgule est un OU : la version compacte s'applique dès que l'une des
   deux est remplie. Elle sert aussi une fenêtre de bureau réduite en
   hauteur, où le besoin est le même. */
/* Le titre rendu en frère de la liste ne sert qu'à la version compacte.
   Sur grand écran, chaque onglet porte le sien. */
.insc-etape-titre-compact { display: none; }

@media (max-width: 700px), (max-height: 520px) {
    .insc-etapes {
        flex-wrap: nowrap;
        justify-content: center;
        gap: 14px;
        /* PLUS DE PLACE RÉSERVÉE D'AVANCE. Le titre n'est plus posé en
           absolu au-dessus du vide : il suit la liste dans le flux et
           pousse lui-même ce qui vient après. */
        margin-bottom: 0;
    }

    .insc-etapes li,
    .insc-etapes li:first-child,
    .insc-etapes li:last-child {
        flex: 0 0 auto;
        padding: 0;
        align-items: center;
        text-align: center;
    }

    /* L'effacement des étapes franchies ne vaut que pour le fil complet du
       bureau, où le titre reste lisible à côté. Ici il ne reste qu'un
       chiffre : à 0.55 d'opacité, les pastilles du milieu pâlissaient
       alors que la première et la dernière restaient franches. */
    .insc-etapes .est-faite,
    .insc-etapes .est-courante { opacity: 1; }

    /* SEULE L'ÉTAPE EN COURS S'ALLUME — corrigé le 26/08/2026.
       Les franchies prenaient l'orange elles aussi : la couleur disait
       « jusqu'ici » plutôt que « ici ». Sur cinq pastilles serrées en une
       ligne, on ne voyait plus où l'on était — trois pastilles orange, et
       aucune qui se détache.

       Rien n'est réécrit pour les franchies : la déclaration ci-dessous ne
       les mentionne plus, elles retrouvent donc le bleu du bureau
       (`.est-faite .insc-etape-num`, plus haut). Une seule couleur à
       tenir, pour les deux affichages. */
    .insc-etapes .est-courante .insc-etape-num {
        background: var(--couleur-lisere, #e8a33d);
    }

    /* Celles à venir restent grises, mais lisibles : à 0.4 d'opacité un
       chiffre gris sur blanc disparaît. */
    .insc-etapes li:not(.est-courante):not(.est-faite) { opacity: .75; }

    /* Le liseré du bureau est sous le bloc « numéro + intitulé », donc
       sous la pastille une fois l'intitulé descendu. Il est repris plus
       bas, sous le titre, à l'identique. */
    .insc-etapes .insc-etape-corps::after { display: none; }

    /* Un seul titre visible — celui de l'étape en cours, sous la rangée.
       AUCUNE propriété de style ici : seulement sa position. */
    .insc-etapes .insc-etape-titre { display: none; }

    /* LE TITRE DE L'ÉTAPE, DANS LE FLUX.
       Mêmes marges au-dessus et en dessous à chaque étape, que l'intitulé
       tienne sur une ligne ou sur deux — ce que la position absolue ne
       pouvait pas donner, puisqu'elle réservait une hauteur fixe. */
    .insc-etape-titre-compact {
        display: block;
        margin: 0.75rem 0 1.75rem;
        text-align: center;

        /* La typographie des onglets, reprise par les mêmes variables
           d'univers — une seule source pour les deux affichages. */
        font-family: var(--police-h3, inherit);
        /* DEUX DÉCLARATIONS, ET C'EST VOULU. `--taille-h3` vaut `inherit`
           sur un univers où la taille des H3 n'est pas réglée ; le `calc()`
           devient alors invalide et le navigateur écarte la ligne. La
           première reste, et le titre garde une taille correcte. */
        font-size: 1.5rem;
        font-size: calc(var(--taille-h3, 1.25rem) * 1.2);
        font-weight: var(--weight-h3, 600);
        line-height: var(--line-height-h3, 1.15);
        color: var(--couleur-h3, #2061b7);
    }

    /* Le liseré, repris tel quel : 100 px, 6 px d'épaisseur, la couleur de
       l'identité visuelle. Centré sous le titre, comme il l'est sous
       l'onglet du milieu sur grand écran. */
    .insc-etape-titre-compact::after {
        content: '';
        display: block;
        width: 100px;
        max-width: 60%;
        height: 6px;
        margin: 6px auto 0;
        background: var(--couleur-lisere, #2061b7);
    }
}

@media (max-width: 520px) {
    /* À l'étroit, on empile plutôt que d'écraser les deux boutons. */
    .insc-boutons {
        grid-template-columns: 1fr;
        justify-items: center;
    }
    .insc-boutons .btn-secondary,
    .insc-boutons .btn-valider { grid-column: 1; justify-self: center; }

    /* L'ACTION PRINCIPALE EN PREMIER (25/08/2026).
       Empilés, les deux boutons suivaient l'ordre du balisage : « Retour »
       arrivait au-dessus de « Continuer ». Sur un écran étroit, c'est le
       bouton qui fait AVANCER qu'il faut trouver d'abord — celui qui fait
       reculer se cherche, il ne se propose pas.

       `order` inverse l'affichage sans toucher au balisage : le bouton
       « Retour » reste le premier du formulaire, donc le premier atteint
       au clavier et par un lecteur d'écran, là où il a du sens. */
    .insc-boutons .btn-valider   { order: 1; }
    .insc-boutons .btn-secondary { order: 2; }

    /* LE FORMULAIRE PERD SES MARGES LATÉRALES.
       `.register-card` en pose déjà 40 de chaque côté ; les 30 du
       formulaire s'y ajoutaient, soit 140 px mangés sur un téléphone de
       390. Les marges hautes et basses restent : c'est l'espace entre les
       champs, il ne gêne personne. */
    .register-form {
        padding-left: 0;
        padding-right: 0;
    }
}

.insc-rappel-adresse {
    margin: 16px 0 0;
    padding: 12px 14px;
    border-left: 3px solid var(--couleur-lisere, #d8d8de);
    background: #fafafa;
    line-height: 1.5;
}
.insc-rappel-adresse .insc-rappel-titre {
    display: block;
    font-size: 0.75em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #888;
    margin-bottom: 4px;
}

.insc-divergence {
    margin: 16px 0 0;
    padding: 14px 16px;
    border: 1px solid #f0dcae;
    background: #fdf9ef;
    border-radius: 8px;
}
.insc-divergence-titre { margin: 0 0 12px; font-weight: 600; }
.insc-divergence-note  { margin: 10px 0 0; font-size: 0.9em; opacity: 0.85; }

.insc-choix {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px;
    border-radius: 6px;
    cursor: pointer;
    line-height: 1.45;
}
.insc-choix:hover { background: rgba(0, 0, 0, 0.03); }
.insc-choix input { margin-top: 4px; flex: 0 0 auto; }

.insc-attente-validation {
    margin: 0 0 16px;
    padding: 12px 14px;
    border-radius: 8px;
    background: #eef4fb;
    border: 1px solid #cfe0f2;
    line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════════════
   INSCRIPTION — le mot d'explication sous un champ
   ═══════════════════════════════════════════════════════════════════════
   Sert sous « Vos allergies et intolérances alimentaires », pour dire à
   quoi la réponse servira. Une donnée de santé se demande en disant
   pourquoi on la demande ; la phrase fait donc partie du champ, pas des
   petits caractères.
   ═══════════════════════════════════════════════════════════════════════ */

.insc-aide-champ {
    margin: 7px 0 0;
    color: #5b6b7c;
    font-size: 13px;
    line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════════════
   INSCRIPTION — la confirmation des numéros professionnels
   ═══════════════════════════════════════════════════════════════════════
   L'écran qui remontre le RPPS et le SIRET, verrouillés, une fois les
   registres interrogés — dernier arrêt avant l'étape 3. Trois états :

     vert    check_circle   trouvé, et le nom concorde
     orange  warning        trouvé avec une réserve, ou registre muet
     rouge   cancel         introuvable — « Continuer » n'est pas proposé

   LE VERT ET LE ROUGE VIENNENT DE L'UNIVERS (familles « Boutons succès »
   et « Boutons danger ») : changer la charte du site change aussi ces
   pastilles. L'orange n'a pas de famille dans l'univers, il est donc écrit
   ici — c'est le seul de la page.

   À SAVOIR : les deux icônes sont exclues nommément de la grande règle
   « couleur des icônes Material » d'`entete.php`. Sans cela, son
   `!important` les repeindrait toutes les trois en couleur de titre, et
   les trois états se ressembleraient.
   ═══════════════════════════════════════════════════════════════════════ */

.insc-verif-chapeau {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 22px;
    padding: 14px 16px;
    border: 1px solid;
    border-radius: 8px;
    font-size: 15px;
    line-height: 1.5;
}

.insc-verif-chapeau .material-symbols-outlined {
    flex-shrink: 0;
    font-size: 22px;
    line-height: 1.4;
}

.insc-verif-chapeau.etat-vert {
    color: #1b6b3f;
    background: #eaf7f0;
    border-color: #bfe3d0;
}

.insc-verif-chapeau.etat-vert .material-symbols-outlined {
    color: var(--bouton-succes-bg, #27ae60);
}

.insc-verif-chapeau.etat-orange {
    color: #8a5200;
    background: #fdf5e6;
    border-color: #f0dcb4;
}

.insc-verif-chapeau.etat-orange .material-symbols-outlined {
    color: #d97706;
}

.insc-verif-chapeau.etat-rouge {
    color: #97231a;
    background: #fdeeec;
    border-color: #f5c9c3;
}

.insc-verif-chapeau.etat-rouge .material-symbols-outlined {
    color: var(--bouton-danger-bg, #e74c3c);
}

/* ---- le champ verrouillé, la pastille à côté ---- */

.insc-verif-champ {
    display: flex;
    align-items: center;
    gap: 10px;
}

.insc-verif-champ input {
    flex: 1 1 auto;
    min-width: 0;
}

/* Un champ `disabled` est délavé d'office par le navigateur — sur iOS
   jusqu'à devenir gris pâle sur blanc. On reprend la main : le numéro doit
   se lire sans effort, c'est tout l'objet de l'écran. Il reste visiblement
   verrouillé par son fond et par le curseur. */
.insc-verif input:disabled {
    background: #f4f6f8;
    color: #2c3e50;
    -webkit-text-fill-color: #2c3e50;
    opacity: 1;
    cursor: default;
}

.insc-verif-champ .insc-verif-pastille {
    flex-shrink: 0;
    font-size: 26px;
    line-height: 1;
}

.insc-verif-champ .insc-verif-pastille.etat-vert {
    color: var(--bouton-succes-bg, #27ae60);
}

.insc-verif-champ .insc-verif-pastille.etat-orange {
    color: #d97706;
}

.insc-verif-champ .insc-verif-pastille.etat-rouge {
    color: var(--bouton-danger-bg, #e74c3c);
}

/* ---- ce qui a été trouvé, SOUS le champ ---- */

.insc-verif-nom {
    margin: 8px 0 0;
    color: #2c3e50;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
}

.insc-verif-mot {
    margin: 4px 0 0;
    font-size: 13.5px;
    line-height: 1.45;
}

.insc-verif-mot.etat-vert   { color: #5b6b7c; }
.insc-verif-mot.etat-orange { color: #8a5200; }
.insc-verif-mot.etat-rouge  { color: #97231a; }
/* ═══════════════════════════════════════════════════════════════════════
   INSCRIPTION — le mot d'explication, en l'absence de RPPS
   ═══════════════════════════════════════════════════════════════════════
   Encadré et détaché des deux champs de numéro : c'est une demande d'un
   autre ordre — on ne remplit pas une case, on écrit quelques lignes. Le
   liseré à gauche le signale sans en faire une alerte : la personne n'a
   rien fait de mal, il lui manque un numéro.
   ═══════════════════════════════════════════════════════════════════════ */
.insc-situation {
    margin-top: 1.25rem;
    padding: 1rem 1.1rem;
    border-left: 3px solid var(--couleur-primaire, #0a5c5c);
    background: rgba(0, 0, 0, .025);
    border-radius: 0 6px 6px 0;
}

.insc-situation > label {
    display: block;
    margin-bottom: .35rem;
    font-weight: 600;
}

.insc-situation-aide {
    margin: 0 0 .7rem;
    font-size: var(--taille-texte, 1rem);
    line-height: 1.5;
    opacity: .85;
}

.insc-situation textarea {
    width: 100%;
    min-height: 6.5rem;
    padding: .6rem .7rem;
    font: inherit;
    font-size: var(--taille-texte, 1rem);
    line-height: 1.5;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 4px;
    background: #fff;
    resize: vertical;
}

.insc-situation textarea:focus {
    outline: 2px solid var(--couleur-primaire, #0a5c5c);
    outline-offset: 1px;
}

/* ═══════════════════════════════════════════════════════════════════════
   PAGE PAS ENCORE OUVERTE
   ═══════════════════════════════════════════════════════════════════════
   Centrée et brève : il n'y a rien à lire ici, seulement à comprendre
   qu'on reviendra. Deux sorties — le compte (ou l'accueil) et le contact
   — parce qu'une impasse sans porte est ce qui fait quitter un site.
   ═══════════════════════════════════════════════════════════════════════ */
.page-indisponible {
    max-width: 40rem;
    margin: 3rem auto 4rem;
    padding: 0 1.25rem;
    text-align: center;
}

.page-indisponible-texte {
    margin: 0 0 .9rem;
    font-size: var(--taille-texte, 1rem);
    line-height: 1.6;
}

.page-indisponible-boutons {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: center;
    margin-top: 1.75rem;
}

.page-indisponible-boutons .btn {
    width: auto;
}

/* ═══════════════════════════════════════════════════════════════════════
   INSCRIPTION — les intitulés de champs
   ═══════════════════════════════════════════════════════════════════════
   Bleus et gras, à la manière du site. Volontairement limité au
   formulaire d'inscription : le reste du site a ses propres formulaires,
   et une règle générale sur `label` les repeindrait tous sans qu'on l'ait
   demandé.
   ═══════════════════════════════════════════════════════════════════════ */
.register-form label,
.profil-lecture label {
    color: var(--couleur-titres, #2061b7);
    font-weight: 700;
}

/* La légende du bloc garde sa couleur de liseré : c'est le titre du cadre,
   pas l'intitulé d'un champ. */
.register-form .bloc-exercice legend,
.profil-lecture .bloc-exercice legend {
    color: var(--couleur-lisere, #2061b7);
}

/* ═══════════════════════════════════════════════════════════════════════
   LES MENUS DÉROULANTS DU FORMULAIRE — 25/08/2026
   ═══════════════════════════════════════════════════════════════════════
   Pays, profession : deux menus au milieu de champs texte. Laissés au
   navigateur, ils ne leur ressemblaient pas — bord plus clair, coin moins
   arrondi, hauteur différente, et le chevron du système par-dessus. Au
   milieu d'une colonne de champs identiques, cette différence se voit.

   Ils reprennent donc EXACTEMENT le dessin des champs texte
   (`.form-group input`) : même bord, même arrondi, même taille de texte,
   même halo au focus.

   PORTÉE VOLONTAIREMENT ÉTROITE : `.register-form`, c'est-à-dire
   l'inscription et « Modifier mon profil », qui portent la même classe.
   Les autres menus du site public gardent leur dessin — repeindre d'un
   coup tous les `select` du site pour deux champs serait un pari, pas une
   correction.

   LE CHEVRON EST DESSINÉ ICI, en SVG encodé dans la feuille. Pas de
   fichier image à téléverser, donc pas de fichier image à oublier de
   téléverser — et il suit la couleur du texte plutôt que celle du
   système. `appearance: none` retire celui du navigateur ; sans lui, les
   deux se superposeraient.

   La marge à droite (`padding-right`) réserve la place du chevron : sans
   elle, un intitulé long passerait dessous.
   ═══════════════════════════════════════════════════════════════════════ */
.register-form select {
    width: 100%;
    padding: 10px 38px 10px 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
    font-family: inherit;
    line-height: 1.4;
    color: inherit;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%235b6b7c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
}

.register-form select:hover {
    border-color: #bcc6d1;
}

.register-form select:focus {
    outline: none;
    border-color: var(--couleur-principale, #0d5aa7);
    box-shadow: 0 0 5px rgba(102, 126, 234, 0.3);
}

/* Un menu verrouillé — le pays dans un encadré `disabled` — ne doit ni
   inviter au clic ni garder un chevron qui promet un choix. */
.register-form select:disabled {
    background-image: none;
    background-color: #f4f6f8;
    color: #2c3e50;
    -webkit-text-fill-color: #2c3e50;
    opacity: 1;
    cursor: default;
}

/* ═══════════════════════════════════════════════════════════════════════
   INSCRIPTION — la modale « votre situation »
   ═══════════════════════════════════════════════════════════════════════
   Elle s'ouvre d'office et n'a pas de croix : tant que la question n'a pas
   de réponse, l'inscription ne peut pas avancer. La sortie est le bouton
   « Revenir en arrière », qui ramène à l'écran précédent.
   ═══════════════════════════════════════════════════════════════════════ */
.insc-modale-situation .modal-content {
    text-align: left;
}

.insc-modale-aide {
    margin: 0 0 1rem;
    font-size: var(--taille-texte, 1rem);
    line-height: 1.55;
    opacity: .9;
}

.insc-modale-situation textarea {
    width: 100%;
    min-height: 7rem;
    padding: .6rem .7rem;
    font: inherit;
    font-size: var(--taille-texte, 1rem);
    line-height: 1.5;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 4px;
    resize: vertical;
}

.insc-modale-situation .modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: space-between;
    margin-top: 1.1rem;
}

.insc-modale-situation .modal-actions .btn { width: auto; }

/* Ce qui reste visible derrière la modale : présent pour situer, mais
   clairement au second plan. */
.bloc-exercice.est-en-retrait {
    opacity: .6;
}

/* Numéro AU-DESSUS de l'intitulé, et les deux solidaires : c'est ce bloc
   qui se cale à droite, au centre ou à gauche.

   Le numéro est centré SUR SON INTITULÉ, jamais calé sur le bord de
   l'onglet : c'est au titre qu'il se rapporte, pas à la colonne. Le bloc
   entier, lui, se cale à droite, au centre ou à gauche — ce que règle le
   `justify-content` de l'onglet, plus haut. */
.insc-etapes .insc-etape-corps {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 0 1 auto;
    min-width: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   FILET — tout bouton de validation de l'inscription suit la famille
   « Boutons d'actions »
   ═══════════════════════════════════════════════════════════════════════
   Les cinq boutons portent `.btn-valider`, que l'entête peint déjà. Cette
   règle vise en plus `.btn-inscription` À L'INTÉRIEUR DU FORMULAIRE : si
   une page servie porte encore l'ancienne classe — un `inscription.php`
   pas remplacé sur le serveur — le bouton garde malgré tout la bonne
   couleur, au lieu d'être bleu à l'étape 1 et vert aux suivantes.

   Limité à `.register-form` : le bouton « Inscription » du menu, lui, n'est
   pas concerné et garde son propre habillage.
   ═══════════════════════════════════════════════════════════════════════ */
.register-form .btn-inscription {
    background: var(--bouton-action-bg, #27ae60) !important;
    color: var(--bouton-action-color, #fff) !important;
}

.register-form .btn-inscription:hover {
    background: var(--bouton-action-bg-hover, #219a52) !important;
}

/* Le titre des modales de l'inscription, et son icône, à la couleur du
   liseré — l'orange de l'identité visuelle. L'icône est visée
   explicitement : la police Material Symbols hérite de la couleur, mais
   les règles de l'entête peignent les icônes de boutons et de titres, et
   sans cette ligne l'une d'elles peut l'emporter. */
.insc-modale-situation .modal-title,
.insc-modale-situation .modal-title .material-symbols-outlined {
    /* `!important` à contrecœur, mais obligé : le titre est un `h4`, et
       l'entête peint tous les `h4` avec `color: var(--couleur-h4)
       !important`. Sans cela, cette règle-ci est ignorée quelle que soit sa
       spécificité — une déclaration importante l'emporte toujours sur une
       déclaration ordinaire.

       Côté icône, la règle de l'entête qui peint les Material Symbols pèse
       une quarantaine de négations : impossible de la battre à la
       spécificité. Les titres de modale y ont donc été ajoutés comme
       exception, à côté des quarante autres. */
    color: var(--couleur-lisere, #2061b7) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   MES INFORMATIONS EN LECTURE SEULE
   ═══════════════════════════════════════════════════════════════════════
   Les champs sont désactivés ; les navigateurs les grisent alors très
   fortement, au point de rendre le texte pénible à lire. On rend leur
   lisibilité aux valeurs — c'est tout ce que cette page a à offrir — tout
   en gardant un fond neutre qui dit qu'on ne peut rien y taper.
   ═══════════════════════════════════════════════════════════════════════ */
.profil-lecture {
    max-width: 52rem;
    margin: 2rem auto 3rem;
    padding: 0 1.25rem;
}

.profil-lecture fieldset[disabled] input,
.profil-lecture fieldset[disabled] textarea {
    background: #f7f7f9;
    color: var(--couleur-texte-corps, #333);
    -webkit-text-fill-color: var(--couleur-texte-corps, #333);   /* Safari grise le texte autrement */
    opacity: 1;
    cursor: default;
}

.profil-lecture fieldset[disabled] label {
    opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════════════
   MON PROFIL — les blocs prennent l'encadré de l'inscription
   ═══════════════════════════════════════════════════════════════════════
   Même dessin que `.bloc-exercice` : quatre pixels à la couleur du liseré
   de l'univers, coins arrondis. Les deux pages demandent les mêmes
   informations à la même personne, elles doivent se ressembler.

   Limité à `.profile-card` : `.form-section` sert ailleurs sur le site, et
   une règle générale repeindrait des blocs qu'on n'a pas regardés.
   ═══════════════════════════════════════════════════════════════════════ */
.profile-card .form-section {
    border: 4px solid var(--couleur-lisere, #e0e0e0);
    border-radius: 10px;
    padding: 18px 20px 6px;
    margin: 0 0 20px;
}

/* Le titre de section devient le cartouche du bloc, à la manière d'une
   légende de fieldset : même couleur que le cadre, pas de trait sous le
   texte — le cadre s'en charge déjà. */
.profile-card .form-section > .section-title {
    color: var(--couleur-lisere, #2061b7);
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 16px;
}

/* Le fieldset intérieur ne porte, lui, aucune décoration : c'est un
   contenant technique — il rend les champs inertes — et non un cadre de
   plus à dessiner. */
.profile-card .profil-champs {
    border: 0;
    margin: 0;
    padding: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   MON PROFIL — le formulaire emprunte l'habillage de l'inscription
   ═══════════════════════════════════════════════════════════════════════
   Refonte du 25/08/2026 : `modifier_profil.php` porte désormais la classe
   `.register-form`, comme `inscription.php`. Intitulés, menus déroulants
   et légendes des encadrés viennent donc de la même source — deux règles
   qui divergent finiraient par donner deux pages qui ne se ressemblent
   plus, alors qu'elles demandent les mêmes informations à la même
   personne.

   Trois retouches suffisent, et elles sont ici plutôt que dans un
   `<style>` de la page : la feuille est le seul endroit où on cherche du
   CSS quand on veut le changer.
   ═══════════════════════════════════════════════════════════════════════ */

/* `.register-form` pose 30px de marge intérieure pour la page
   d'inscription, qui n'a pas de carte autour. Sur le profil,
   `.profile-card` les pose déjà : sans cette ligne, elles se cumulent. */
.profile-card .register-form {
    padding: 0;
}

/* Les champs désactivés — l'encadré des identifiants professionnels, et
   toute la page pour un compte encore à vérifier. Les navigateurs les
   grisent au point de rendre le texte pénible à lire, alors que c'est
   tout ce que ces champs ont à offrir. Même règle que `.profil-lecture`
   plus haut, appliquée au profil. */
.profile-card fieldset[disabled] input,
.profile-card fieldset[disabled] textarea,
.profile-card fieldset[disabled] select {
    background: #f7f7f9;
    color: var(--couleur-texte-corps, #333);
    -webkit-text-fill-color: var(--couleur-texte-corps, #333);   /* Safari grise le texte autrement */
    opacity: 1;
    cursor: default;
}

.profile-card fieldset[disabled] label {
    opacity: 1;
}

/* La note « ces numéros ont servi à valider votre compte » : rattachée
   visuellement à l'encadré qu'elle explique, et non flottante entre deux
   sections. */
.profil-note-identifiants {
    display: block;
    margin: -12px 0 22px;
}

/* =====================================================================
   « PAS ENCORE DE COMPTE ? » — bas de la page de connexion
   =====================================================================
   Ajouté le 06/09/2026. La page de connexion n'offrait aucune porte vers
   la création de compte : un visiteur venu de la page des abonnements
   masterclass, qui y mène directement, s'y retrouvait sans issue.

   Séparé du bloc `.login-links` par un filet : ce n'est pas un lien de
   dépannage de plus, c'est l'autre chemin possible.
   ===================================================================== */

.login-creer-compte {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    text-align: center;
}

.login-creer-compte > span {
    font-size: 0.95em;
    opacity: 0.75;
}

/* Le bouton reprend .btn .btn-secondary de l'univers : aucune couleur
   n'est écrite ici, seule la mise en place l'est. */
.login-creer-compte .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}


/* =====================================================================
   PLACE INCLUSE DANS UN ABONNEMENT
   =====================================================================
   `.tarif-value` est taillée pour un montant : 18 px, gras, et surtout
   `white-space: nowrap`. « Inclus dans votre abonnement » y déborderait
   de la cellule. On ne change donc pas la règle d'origine, on ajoute
   une variante pour cette phrase. */
.tarif-value-abonnement {
    font-size: 14px;
    font-weight: 600;
    white-space: normal;
    line-height: 1.3;
}


/* =====================================================================
   LA PAGE DE LECTURE D'UN REPLAY
   =====================================================================
   Le cadre garde le rapport 16/9 quelle que soit la largeur : sans lui,
   la page saute au moment où les métadonnées de la vidéo arrivent et où
   le navigateur découvre enfin ses dimensions. */
.replay-page {
    max-width: 1000px;
    margin: 0 auto;
    padding: 30px 0 50px;
}

.replay-titre {
    margin: 0 0 4px;
    font-size: 26px;
    line-height: 1.25;
}

.replay-sous-titre {
    margin: 0 0 22px;
    color: #7f8c8d;
    font-size: 14px;
}

.replay-cadre {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
}

/* Repli pour les navigateurs sans `aspect-ratio` : la vieille technique
   du padding proportionnel. Elle ne gêne pas les autres. */
@supports not (aspect-ratio: 16 / 9) {
    .replay-cadre {
        height: 0;
        padding-bottom: 56.25%;
    }
}

.replay-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    background: #000;
}

.replay-mention {
    margin: 14px 0 0;
    color: #7f8c8d;
    font-size: 13px;
}

.replay-retour {
    margin-top: 26px;
}

@media (max-width: 600px) {
    .replay-page { padding: 16px 0 30px; }
    .replay-titre { font-size: 20px; }
    .replay-cadre { border-radius: 0; }
}


/* ═══════════════════════════════════════════════════════════════════
   LES ÉTAPES DES PAGES DE SIGNATURE, EN ONGLETS — 09/09/2026
   ═══════════════════════════════════════════════════════════════════
   « 1 Consultez · 2 Paraphez · 3 Signez », sur souscrire_abonnement.php
   et signer_contrat.php.

   ELLE N'A PAS BESOIN D'UNE TAILLE DE TEXTE ICI. La règle qui gouverne
   la ligne existe déjà plus haut — `.signature-content-wrapper
   .card-title`. Elle n'avait simplement jamais eu d'effet, parce que la
   ligne était portée par un <h3> et que la typographie de l'univers
   impose `h3 { font-size: var(--taille-h3) !important }`, soit 40 px :
   la phrase tenait sur deux lignes, 92 px de haut pour une consigne.
   Elle est désormais portée par un <p>. On ne contredit pas le réglage
   de l'univers, on cesse de le solliciter pour un élément qui n'est pas
   un titre de section. */

/* ─── EN ONGLETS : LE CHIFFRE AU-DESSUS, LE MOT EN DESSOUS ───────────
   Chaque étape est une colonne, et les colonnes se partagent la largeur
   en parts égales (`flex: 1 1 0`). La ligne tient donc sur un ordinateur,
   une tablette ET un téléphone.

   TOUT EST À TAILLE VARIABLE, avec `clamp(plancher, part de l'écran,
   plafond)` : la pastille va de 30 px sur un téléphone à 46 px sur un
   grand écran, le mot de 14 px à 21 px, et les écarts suivent. Pas de
   palier, pas de saut : la taille glisse avec la largeur, et les deux
   bornes garantissent que rien ne devient minuscule ni démesuré.

   Les libellés sont des verbes seuls — c'est la condition pour que trois
   colonnes tiennent sur un téléphone. L'objet (« votre contrat
   d'abonnement ») est déjà dit par la phrase juste en dessous.

   `max-width` empêche les onglets de s'étaler sur toute la largeur d'un
   grand écran, où trois colonnes de 340 px n'auraient plus rien d'un
   groupe. */
#signature-instruction-text {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: clamp(8px, 1.4vw, 22px);
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    /* Le trait n'appartient plus à la ligne entière : il souligne le seul
       onglet en cours, plus bas. */
    border-bottom: none;
    padding-bottom: 0;
}

#signature-instruction-text .step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(4px, 0.7vw, 10px);
    flex: 1 1 0;
    min-width: 0;
    /* Le liseré est TOUJOURS là, transparent : sans cela, l'onglet
       courant serait plus haut que les autres et la ligne sauterait à
       chaque étape. */
    padding-bottom: 8px;
    border-bottom: 3px solid transparent;
    transition: border-color .2s;
}

/* `currentColor` : le liseré prend la couleur du texte, donc celle que
   l'univers donne au titre. Une couleur écrite en dur ici se
   désaccorderait au premier changement de charte. */
#signature-instruction-text .step-item.is-current {
    border-bottom-color: currentColor;
}

#signature-instruction-text .step-label {
    font-size: clamp(14px, 1.9vw, 21px);
    line-height: 1.2;
}

/* `flex: 0 0 auto` : sans lui la pastille se laisse comprimer et devient
   un ovale sur les écrans étroits. */
#signature-instruction-text .step-pill {
    flex: 0 0 auto;
    width:  clamp(30px, 4.4vw, 46px);
    height: clamp(30px, 4.4vw, 46px);
    font-size: clamp(15px, 2.2vw, 23px);
}


/* ═══════════════════════════════════════════════════════════════════
   MON COMPTE > MES ABONNEMENTS > EN ATTENTE DE PAIEMENT — 09/09/2026
   ═══════════════════════════════════════════════════════════════════
   La carte d'une demande est celle d'un abonnement réel — mêmes classes,
   même bandeau, même logo de formule. Rien à styler pour la carte
   elle-même : c'est voulu, une souscription en attente doit se
   reconnaître comme la même chose, à un paiement près.

   Ne reste ici que la barre d'action posée sous la carte. */
.abo-attente-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin: -6px 0 26px;
    padding: 0 30px;
}

.abo-attente-note {
    font-size: 13px;
    color: #6b7280;
    flex: 1 1 200px;
    min-width: 0;
}

/* Le formulaire d'annulation ne doit pas casser l'alignement de la
   barre : il n'existe que pour porter le jeton CSRF. */
.abo-attente-annuler {
    margin: 0;
    display: inline-flex;
}

@media (max-width: 600px) {
    .abo-attente-actions {
        padding: 0 16px;
    }
    /* Le bouton prend toute la largeur plutôt que de se disputer la ligne
       avec la phrase d'explication. */
    .abo-attente-actions .btn {
        width: 100%;
        text-align: center;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   IDENTITÉ EMPRUNTÉE — LE BANDEAU ET L'ÉCRAN DE REFUS
   ═══════════════════════════════════════════════════════════════════════
   Posé le 11/09/2026. Ces règles ne servent QUE lorsqu'un administrateur
   regarde le site depuis le compte d'un inscrit. En usage normal, aucun
   élément de la page ne porte ces classes.

 ⚠ LE BANDEAU EST EN BAS, ET C'EST UN CHOIX, PAS UN OUBLI. En haut, il
   serait entré en conflit avec l'en-tête du site, qui se fixe au défilement
   sur plusieurs pages : il aurait fallu le recouvrir ou le décaler, donc
   toucher à la mise en page de tout le site pour une situation qui ne
   concerne que l'administrateur. En bas, il ne décale rien et rien ne peut
   passer devant lui.

 ⚠ LE `padding-bottom` SUR LE CORPS EST INDISPENSABLE : sans lui, le bandeau
   recouvrirait la dernière ligne du pied de page. Il n'est appliqué que
   lorsque le bandeau existe, grâce au sélecteur de voisinage.

 ⚠ LA COULEUR NE VIENT PAS DE L'UNIVERS, VOLONTAIREMENT. Tout le reste du
   site s'habille aux couleurs du client ; ce bandeau doit précisément NE
   PAS s'y fondre. C'est un avertissement, pas un élément de charte.
   ═══════════════════════════════════════════════════════════════════════ */

.emprunt-bandeau {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2147483000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
    padding: 12px 18px;
    background: #b71c1c;
    color: #fff;
    font-size: 15px;
    line-height: 1.4;
    text-align: center;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, .35);
}

.emprunt-bandeau strong {
    color: #fff;
    text-decoration: underline;
}

.emprunt-bandeau-depuis {
    opacity: .8;
    font-size: 13px;
}

.emprunt-bandeau-sortie,
.emprunt-bandeau-sortie:link,
.emprunt-bandeau-sortie:visited {
    flex: 0 0 auto;
    padding: 7px 16px;
    border: 2px solid #fff;
    border-radius: 4px;
    background: transparent;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.emprunt-bandeau-sortie:hover,
.emprunt-bandeau-sortie:focus {
    background: #fff;
    color: #b71c1c;
}

body:has(.emprunt-bandeau) {
    padding-bottom: 80px;
}

/* ⚠ LE BANDEAU CHANGE DE TON QUAND UN ESSAI RESTE À ANNULER — 11/09/2026.
     Le rouge sombre est l'état ordinaire de l'emprunt ; celui-ci, plus vif
     et clignotant une fois, dit qu'il reste un geste à faire. Sans ce
     changement, le bouton « Annuler » s'ajouterait dans un bandeau
     identique et passerait inaperçu — c'est-à-dire qu'on sortirait en
     laissant une signature d'essai au nom d'un inscrit. */
.emprunt-bandeau-alerte {
    background: #d32f2f;
    animation: emprunt-attire 1.2s ease-in-out 2;
}

@keyframes emprunt-attire {
    0%, 100% { background: #d32f2f; }
    50%      { background: #ff6f00; }
}

/* ⚠ RESPECTE LE RÉGLAGE « RÉDUIRE LES ANIMATIONS » du système. Une
     animation qui clignote peut gêner, voire déclencher un malaise chez
     certaines personnes ; la couleur suffit à distinguer les deux états. */
@media (prefers-reduced-motion: reduce) {
    .emprunt-bandeau-alerte { animation: none; }
}

.emprunt-bandeau-annuler,
.emprunt-bandeau-annuler:link,
.emprunt-bandeau-annuler:visited {
    flex: 0 0 auto;
    padding: 7px 16px;
    border: 2px solid #fff;
    border-radius: 4px;
    background: #fff;
    color: #b71c1c;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.emprunt-bandeau-annuler:hover,
.emprunt-bandeau-annuler:focus {
    background: #ffe0b2;
    color: #7f0000;
}

/* ⚠ `:has()` N'EST PAS COMPRIS PAR LES NAVIGATEURS D'AVANT 2023. Sur ceux-là,
     l'espace n'est pas réservé et le bandeau recouvre la dernière ligne du
     pied de page. C'est la seule conséquence, elle ne concerne que
     l'administrateur, et elle ne vaut pas d'ajouter une classe sur le corps
     de chaque page. */

@media (max-width: 600px) {
    .emprunt-bandeau {
        gap: 10px;
        padding: 10px 12px;
        font-size: 14px;
    }
    body:has(.emprunt-bandeau) {
        padding-bottom: 110px;
    }
}

/* L'écran affiché quand une action est refusée. */
.emprunt-refus {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 30px 18px 120px;
    background: #f5f5f5;
}

.emprunt-refus-carte {
    max-width: 620px;
    padding: 30px 32px;
    border-top: 6px solid #b71c1c;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 2px 16px rgba(0, 0, 0, .12);
    font-size: 15px;
    line-height: 1.6;
}

.emprunt-refus-titre {
    margin: 0 0 18px;
    color: #b71c1c;
    font-size: 24px;
}

.emprunt-refus-quoi {
    padding: 10px 14px;
    border-left: 4px solid #b71c1c;
    background: #fafafa;
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 13px;
    word-break: break-all;
}

.emprunt-refus-liens {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 24px;
}

/* ═══════════════════════════════════════════════════════════════════════
   MA FICHE DANS L'ANNUAIRE — 14/09/2026
   ═══════════════════════════════════════════════════════════════════════
   Une seule règle, et de mise en page uniquement.

   ⚠ LE `fieldset` QUI ENTOURE LE FORMULAIRE NE SERT QU'À PORTER `disabled`
     quand le compte est en cours de vérification. Le navigateur lui pose
     d'office une bordure : elle dessinait un cadre autour du formulaire,
     sans rien vouloir dire.

   ⚠ POURQUOI PAS `.profil-champs`, qui fait déjà exactement ça : sa règle
     s'écrit `.profile-card .profil-champs`, donc elle n'agit qu'à
     l'intérieur d'une `.profile-card`. La fiche annuaire vit dans
     `.compte-content`. Recopier la classe sans son parent n'aurait rien
     donné, et élargir le sélecteur existant aurait touché « Modifier mon
     profil » pour rien.
   ═══════════════════════════════════════════════════════════════════════ */

.annuaire-champs {
    border: 0;
    margin: 0;
    padding: 0;
}

/* =====================================================================
   ANNUAIRE DES PROFESSIONNELS — 14/09/2026
   =====================================================================
   Trois blocs empilés dans l'ordre demandé : la barre de recherche, la
   carte, la liste.

   ⚠ TOUT EST PRÉFIXÉ `annuaire-`. Rien ici ne doit pouvoir atteindre une
     autre page : la leçon du sélecteur vertical, où une retouche de style
     s'était propagée à tout le site.
   ===================================================================== */

/* ─── La barre de recherche ──────────────────────────────────────────── */
.annuaire-recherche {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 18px 18px 4px;
    margin-bottom: 20px;
}

/* ⚠ `flex-wrap` PLUTÔT QU'UNE GRILLE À COLONNES FIXES : les cinq champs
     se rangent d'eux-mêmes sur deux lignes puis sur cinq selon la place,
     sans qu'aucune largeur d'écran ne soit écrite nulle part. */
.annuaire-recherche-ligne {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: flex-end;
}

.annuaire-recherche-ligne .form-group {
    margin-bottom: 14px;
    flex: 1 1 180px;
    min-width: 150px;
}

.annuaire-champ-rayon  { flex: 0 1 140px; min-width: 120px; }
.annuaire-champ-bouton { flex: 0 0 auto; min-width: 0; }

.annuaire-recherche-ligne label {
    display: block;
    font-size: 14px;
    color: #666;
    margin-bottom: 5px;
    font-weight: 500;
}

/* ⚠ CES VALEURS SONT CELLES DE `.select-perso-bouton`, RECOPIÉES EXPRÈS.
     Les deux menus de la barre sont habillés par `select_custom.js`, qui
     remplace la liste du système par un bouton à lui : hauteur, arrondi,
     bordure et corps de texte viennent de LUI. Si les champs texte
     gardaient leur propre dessin, la rangée alignerait deux champs à
     bords carrés contre deux menus à bords arrondis, de deux hauteurs
     différentes. C'est donc le champ texte qui s'aligne sur le menu, et
     pas l'inverse — le menu, lui, est partagé avec l'inscription et le
     profil. */
/* ⚠ DEUX CLASSES, PAS UNE, ET CE N'EST PAS DE LA COQUETTERIE. `style.css`
     porte déjà `.form-group input, .form-group textarea, .form-group select`
     — une classe ET un élément, donc plus fort que `.annuaire-input` seule,
     qui perdait en silence : mes champs gardaient l'arrondi et la hauteur
     d'origine pendant que les menus prenaient les leurs. Mesuré au banc, pas
     deviné. C'est la même collision que celle des noms d'absents il y a
     quelques jours. */
.annuaire-recherche-ligne .annuaire-input {
    width: 100%;
    padding: 13px 14px 13px 16px;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 10px;
    font-size: 15px;
    font-family: inherit;
    color: var(--couleur-texte-corps, #1f2d3d);
    background: #ffffff;
    box-sizing: border-box;
}

.annuaire-recherche-ligne .annuaire-input:focus,
.annuaire-recherche-ligne .annuaire-input:focus-visible {
    outline: none;
    border-color: var(--couleur-principale, #0d5aa7);
}

/* Le conteneur du menu habillé occupe toute la largeur de son champ, comme
   les champs texte à côté de lui. */
.annuaire-recherche-ligne .select-perso { width: 100%; }

.annuaire-position {
    margin: 0 0 14px;
    font-size: 14px;
    color: #666;
}

/* ⚠ UN VRAI `<button>`, HABILLÉ EN LIEN. Une balise `<a>` sans adresse
     n'est pas atteignable au clavier, et l'action est bien une action :
     elle ne mène nulle part. */
.annuaire-lien-position {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--couleur-principale, #0d5aa7);
    text-decoration: underline;
    cursor: pointer;
}

.annuaire-position-etat { margin-left: 10px; }

/* ─── La carte ───────────────────────────────────────────────────────── */
.annuaire-carte {
    height: 420px;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
    background: #eceff1;
}

/* ⚠ UNE HAUTEUR PLUS COURTE SUR UN TÉLÉPHONE : à 420 px, la carte occupe
     tout l'écran et la liste passe sous la ligne de flottaison — on croit
     qu'il n'y a pas de résultats. */
@media (max-width: 768px) {
    .annuaire-carte { height: 260px; }
}

.annuaire-carte-echec,
.annuaire-carte-absente {
    background: #f8f9fa;
    border: 1px dashed #ccc;
    border-radius: 10px;
    padding: 18px;
    margin-bottom: 20px;
    color: #666;
    font-size: 14px;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* ─── La liste ───────────────────────────────────────────────────────── */
.annuaire-entete-resultats { margin-bottom: 12px; }

/* ⚠ CES DEUX-LÀ SONT DES `<p>`, PAS DES TITRES — voir le commentaire de
     `annuaire.php` : `entete.php` impose à tous les `h2` et `h3` la
     typographie de l'univers en `!important`, et une carte de liste n'y
     survit pas. */
.annuaire-titre-resultats {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin: 0;
}

/* ⚠ 380 px, ET PAS 280 : C'EST CE QUI DÉCIDE DU NOMBRE DE COLONNES.
     `.compte-content` est plafonné à 1140 px, soit 1080 px de contenu. À
     280 px de minimum, la grille y logeait TROIS colonnes de ~350 px — des
     cartes trop étroites pour que « Itinéraire » et « Carte de visite »
     tiennent côte à côte, et les boutons s'empilaient sur les écrans
     intermédiaires. À 380, il en tient deux, larges d'environ 530 px : les
     boutons passent, et l'adresse aussi.

   ⚠ `min(380px, 100%)` ET NON `380px` SEC. Avec la valeur fixe, une carte
     refuse de descendre sous 380 px : sur un téléphone, la grille
     déborderait de la page au lieu de se resserrer. Le `min()` laisse la
     colonne prendre toute la largeur disponible quand elle est plus étroite
     que 380 px. */
.annuaire-resultats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr));
    gap: 15px;
}

/* Pendant qu'une recherche revient : la liste précédente reste lisible,
   simplement estompée. La vider ferait clignoter la page à chaque
   frappe. */
.annuaire-resultats-attente { opacity: 0.55; }

/* ⚠ LE MÊME LISERÉ QUE LES BLOCS DE FORMULAIRE : quatre pixels, à la
     couleur de l'univers, arrondi de 10 px. Les valeurs sont celles de
     `.bloc-exercice`, pas des valeurs voisines choisies à l'œil — les deux
     dessins doivent être LE MÊME, pas se ressembler. Le jour où le liseré
     de l'univers change, les deux suivent ensemble.

   ⚠ FOND TRANSPARENT, ET PLUS LE GRIS D'AVANT. Un liseré de quatre pixels
     posé sur une pastille grise fait deux cadres concentriques ; le bloc
     de formulaire, lui, n'a pas de fond, et c'est ce qui le rend net.

   ⚠ EN COLONNE FLEX, pour que la barre de boutons tombe en bas de chaque
     carte (`margin-top: auto` plus bas). Sans ça, les boutons se placent
     sous le dernier paragraphe et se retrouvent à trois hauteurs
     différentes sur une même ligne de trois cartes. */
.annuaire-item {
    display: flex;
    flex-direction: column;
    /* La couleur du survol, définie UNE fois : c'est le seul endroit à
       changer si vous la voulez ailleurs sur la palette. Pour qu'elle suive
       l'univers, remplacez la valeur par `var(--couleur-doree)`. */
    --annuaire-survol: #e8871e;
    background: transparent;
    border: 4px solid var(--couleur-lisere, #e0e0e0);
    border-radius: 10px;
    padding: 18px 20px;
    /* ⚠ `min-width: 0` SUR UN ÉLÉMENT DE GRILLE, et ce n'est pas décoratif.
         Par défaut un élément de grille refuse de descendre sous la largeur
         intrinsèque de son contenu : une adresse longue ou la rangée de
         boutons élargissait la colonne, et à 320 px la liste débordait de
         la page — on faisait défiler l'annuaire latéralement. Avec zéro, la
         carte se resserre et c'est le contenu qui passe à la ligne, ce qu'il
         sait faire. */
    min-width: 0;
}

/* La fiche dont on vient de cliquer l'épingle sur la carte. */
.annuaire-item-actif {
    border-color: var(--couleur-principale, #0d5aa7);
}

/* ⚠ `flex-wrap` POUR LA DISTANCE, QUI NE SE COUPE PAS. « 1,2 km » porte un
     `white-space: nowrap` — on ne coupe pas un nombre de son unité. Sur un
     écran de 320 px, le nom et elle ne tenaient plus sur la ligne et elle
     dépassait de quatre pixels : toute la liste se mettait alors à défiler
     latéralement. Avec le repli, elle passe sous le nom et plus rien ne
     déborde. Quatre pixels, et c'est tout l'annuaire qui glisse. */
.annuaire-item-tete {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
}

.annuaire-item-nom {
    font-size: 21px;
    font-weight: 700;
    line-height: 1.25;
    color: #333;
    margin: 0;
}

/* ⚠ LE MÊME MÉCANISME QUE LES LISERÉS DE TITRES, repris trait pour trait :
     un `::after` en `display: block`, une LONGUEUR FIXE, et une animation
     de `transform: scaleX()` — pas de `width`.

   ⚠ POURQUOI `scaleX` ET NON `width` : `transform` ne participe pas au
     calcul des positions. Animer la largeur ferait recalculer la mise en
     page de la carte à chaque image, sous la souris, sur autant de cartes
     que la liste en contient. L'échelle est calculée par le compositeur et
     ne touche à rien.

   ⚠ ET LA LONGUEUR EST FIXE (100 px), pas la largeur du nom. C'est ce qui
     distingue un liseré d'un soulignement : le trait dit « c'est ici »,
     il ne souligne pas un mot. Même valeur que le repli des liserés de
     titres, et même courbe d'accélération, pour que les deux animations
     se ressemblent quand elles se croisent sur la page.

   ⚠ LE TRAIT OCCUPE SA PLACE DÈS LE DÉPART, à l'échelle zéro : la carte ne
     change pas de hauteur au survol, rien ne bouge sous la souris. */
.annuaire-item-nom::after {
    content: "";
    display: block;
    width: 100px;
    border-top: 3px solid var(--annuaire-survol);
    margin-top: 8px;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .7s cubic-bezier(.22, .61, .36, 1);
}

.annuaire-item:hover .annuaire-item-nom::after,
.annuaire-item:focus-within .annuaire-item-nom::after {
    transform: scaleX(1);
}

/* ⚠ RESPECTE « RÉDUIRE LES ANIMATIONS » du système — et le trait continue
     d'apparaître, simplement d'un coup. Une préférence d'accessibilité
     retire le mouvement, pas l'information. */
@media (prefers-reduced-motion: reduce) {
    .annuaire-item-nom::after { transition: none; }
}

/* À l'impression, un trait à l'échelle zéro serait invisible : on les
   montre tous, comme le fait déjà la feuille pour les liserés de titres. */
@media print {
    .annuaire-item-nom::after { transform: none; }
}

/* 18 px, comme la profession et les coordonnées : c'est la donnée qu'on
   lit en premier après le nom quand on cherche « le plus proche ». */
.annuaire-distance {
    font-size: 18px;
    color: #666;
    white-space: nowrap;
}

.annuaire-item-profession {
    margin: 4px 0 0;
    font-size: 18px;
    color: var(--couleur-principale, #0d5aa7);
    font-weight: 500;
}

.annuaire-item-structure {
    margin: 2px 0 0;
    font-size: 14px;
    color: #666;
}

/* ─── Les coordonnées, une icône par ligne ────────────────────────────
   ⚠ LES LIENS N'ONT PLUS L'AIR DE LIENS : ni couleur d'accent, ni
     soulignement. Trois lignes de contact habillées en liens se lisaient
     comme un bloc de bruit bleu. Ils RESTENT des liens — clic, clic du
     milieu, clavier, menu contextuel — ils ne le crient plus.
   ⚠ LE SOULIGNEMENT REVIENT AU SURVOL ET AU FOCUS, sinon plus rien ne dit
     qu'on peut cliquer, et le clavier n'a plus de repère du tout. */
.annuaire-item-adresse,
.annuaire-item-contacts {
    margin: 10px 0 0;
    font-size: 18px;
    color: #555;
    line-height: 1.45;
}

.annuaire-item-adresse {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.annuaire-item-contacts {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.annuaire-contact {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* L'icône ne rétrécit pas et ne s'étire pas : la colonne de texte démarre
   au même endroit sur toutes les lignes, adresse comprise. */
/* ⚠ L'ICÔNE SUIT LE TEXTE. À 19 px devant des lignes de 18, elle passait
     pour une puce ; à 22 elle garde le rapport qu'elle avait à 14/19 et
     reste un repère, pas une décoration. */
.annuaire-item-adresse > .material-symbols-outlined,
.annuaire-contact > .material-symbols-outlined {
    flex: 0 0 auto;
    font-size: 22px;
    line-height: 1.45;
    color: var(--couleur-principale, #0d5aa7);
}

/* ⚠ LA COULEUR EST POSÉE SUR LE `<span>` INTÉRIEUR, PAS SUR LE `<a>`.
     `entete.php` colore tous les liens du site en `!important`, avec une
     spécificité (dix-neuf `:not()`) qu'aucune classe ne rattrape — même un
     `!important` de mon côté perdait, je l'ai mesuré. La règle vise le
     `<a>` ; elle ne dit rien de ce qu'il contient. Aucune surenchère, et
     aucun autre lien du site n'est touché.

   ⚠ SI VOUS PRÉFÉREZ que ces coordonnées reprennent la couleur de liens de
     l'univers, supprimez la règle `color` ci-dessous : le lien est déjà
     coloré par le site, c'est ce `<span>` qui l'en empêche. */
.annuaire-item-contacts a,
.annuaire-item-contacts a:link,
.annuaire-item-contacts a:visited {
    text-decoration: none;
    overflow-wrap: anywhere;
}

.annuaire-item-contacts a > span {
    color: #555;
}

/* ⚠ AUCUN SOULIGNEMENT AU SURVOL. Ce qui change, c'est la couleur — du
     gris du texte à celle du site, icône comprise : on voit que la ligne
     répond, sans qu'un trait apparaisse et fasse sauter la ligne.

   ⚠ LE FOCUS CLAVIER, LUI, GARDE UN VRAI CONTOUR. Ce n'est pas un effet
     de survol : c'est le seul repère de quelqu'un qui navigue à la
     tabulation, et le retirer rendrait la carte impraticable au clavier.
     `:focus-visible` ne se déclenche pas à la souris — le contour ne
     s'affichera donc jamais sur un clic. */
.annuaire-contact:hover > .material-symbols-outlined,
.annuaire-contact:hover a > span {
    color: var(--couleur-principale, #0d5aa7);
}

.annuaire-item-contacts a:focus-visible {
    outline: 2px solid var(--couleur-principale, #0d5aa7);
    outline-offset: 3px;
    border-radius: 3px;
}

.annuaire-item-presentation {
    margin: 10px 0 0;
    font-size: 14px;
    color: #555;
    line-height: 1.5;
}

.annuaire-item-actions {
    margin: 14px 0 0;
    margin-top: auto;
    padding-top: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ⚠ DEUX CLASSES, PARCE QUE `.btn` ET `.btn-small` EN ONT UNE CHACUNE.
     `.annuaire-item-actions .btn` passe devant les deux sans `!important`,
     et rien en dehors de ces cartes n'est touché — les boutons du reste du
     site gardent leur taille.

   ⚠ CE QUI RÉTRÉCIT ICI, C'EST L'ENVELOPPE, PAS LE TEXTE. `entete.php`
     écrit dans chaque page `.btn-secondary { font-size:
     var(--bouton-secondaire-size) !important }` : la taille de texte des
     boutons appartient à l'identité visuelle, et je ne vais pas la lui
     reprendre à coups de `!important` — c'est le même choix que pour les
     titres et les liens. Le `font-size` ci-dessous s'appliquerait si cette
     règle disparaissait ; en attendant, ce sont les marges intérieures qui
     font passer le bouton de 47 à 33 px de haut. Pour un texte plus petit :
     Identité visuelle → Boutons → bouton secondaire, et tous les boutons du
     site suivront ensemble.

   ⚠ ILS RESTENT ASSEZ GRANDS POUR UN POUCE : 33 px de haut. En dessous, on
     vise à côté sur un téléphone, et ces deux boutons-là sont précisément
     ceux qu'on presse dans la rue. */
.annuaire-item-actions .btn {
    padding: 6px 12px;
    font-size: 13px;
    gap: 5px;
    border-radius: 6px;
    /* ⚠ `width: auto` ANNULE UNE RÈGLE MOBILE DU SITE. `style.css` porte
         `@media (max-width: 900px) { .btn { width: 100% } }` : sur
         téléphone, tous les boutons du site prennent la ligne entière, ce
         qui est juste pour un « Enregistrer » au bas d'un formulaire et
         faux pour deux actions posées côte à côte dans une carte — elles
         s'empilaient en deux gros pavés bleus qui écrasaient la fiche.
         Deux classes contre une : la règle passe devant sans `!important`,
         et sans media query de mon côté, donc rien à maintenir en double.
         Les boutons du reste du site gardent leur pleine largeur mobile. */
    width: auto;
}

.annuaire-item-actions .btn .material-symbols-outlined {
    font-size: 17px;
}

.annuaire-vide {
    grid-column: 1 / -1;
    color: #666;
    font-size: 15px;
    margin: 0;
    padding: 20px 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   LE CHOIX DU PROFIL À L'INSCRIPTION — 20/09/2026
   ═══════════════════════════════════════════════════════════════════════
   Deux positions, professionnel ou étudiant, sur le premier écran de
   `inscription.php`.

 ⚠ NI VERT NI GRIS. Un interrupteur vert/gris dit « activé / désactivé » :
   il conviendrait si l'une des deux positions était un réglage à allumer.
   Ici les deux se valent, et c'est un choix entre deux routes. La
   position retenue prend donc la couleur de liseré de l'univers — la
   même que la pastille de l'étape courante, trois centimètres plus bas.

 ⚠ CE SONT DEUX BOUTONS RADIO, et ils restent des boutons radio. Le
   `<input>` n'est pas masqué par `display:none`, qui le retirerait de
   l'ordre de tabulation : il est rendu transparent et posé sous son
   étiquette. Le clavier, le lecteur d'écran et le groupe `radiogroup`
   continuent de fonctionner ; seule l'apparence change.

 ⚠ `:has()` POUR L'INSTANT, `.est-choisie` POUR LE RESTE. Le clic envoie
   le formulaire, donc la page revient avec la classe posée par PHP :
   l'apparence est juste même sans `:has()`. La règle `:has()` ne sert
   qu'à colorer la position avant que la page ne reparte, sur les
   navigateurs qui la connaissent.
   ═══════════════════════════════════════════════════════════════════════ */

/* Le bloc entier est centré depuis SON conteneur, et non élément par
   élément : trois centrages indépendants se décalent dès que l'un des
   trois change de largeur. */
.insc-choix-ecran {
    text-align: center;
}

/* ⚠ PAS DE `justify-content` ICI — j'en avais mis un, il ne servait à
   rien. `.insc-boutons` est une GRILLE de trois colonnes `1fr auto 1fr`,
   pas une rangée flex : le bouton est déjà au centre exact, et la
   grille occupe toute la largeur, si bien que `justify-content` n'avait
   rien à distribuer. Une règle sans effet est pire qu'absente — on la
   recopie ailleurs en croyant qu'elle fait quelque chose.

   Ce qui reste, c'est l'écart demandé au-dessus du bouton : la règle
   générale pose 4 px, qui conviennent quand un fil d'Ariane et un
   formulaire précèdent. Ici il n'y a qu'un contrôle à deux positions,
   et le bouton lui colle. */
.insc-choix-ecran .insc-boutons {
    margin-top: 20px;
}

.insc-choix-question {
    font-size: 17px;
    font-weight: 600;
    color: var(--couleur-titres, #333);
    margin: 0 0 14px;
}

.insc-choix-profil {
    display: inline-flex;
    padding: 4px;
    gap: 4px;
    border: 1px solid var(--couleur-lisere, #2061b7);
    border-radius: 999px;
    background: #fff;
    max-width: 100%;
}

.insc-choix-option {
    position: relative;
    flex: 1 1 auto;
    min-width: 150px;
    margin: 0;
    padding: 11px 26px;
    border-radius: 999px;
    text-align: center;
    cursor: pointer;
    font-weight: 600;
    font-size: 15px;
    color: var(--couleur-lisere, #2061b7);
    background: transparent;
    transition: background-color .18s ease, color .18s ease;
}

/* Le bouton radio reste là, invisible mais atteignable au clavier. */
.insc-choix-option input[type="radio"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.insc-choix-option:hover {
    background: rgba(32, 97, 183, .08);
}

.insc-choix-option.est-choisie,
.insc-choix-option:has(input[type="radio"]:checked) {
    background: var(--couleur-lisere, #2061b7);
    color: #fff;
}

/* Le focus doit se voir : c'est le seul repère de qui navigue au clavier. */
.insc-choix-option:focus-within {
    outline: 2px solid var(--couleur-lisere, #2061b7);
    outline-offset: 2px;
}

.insc-choix-libelle {
    position: relative;
    pointer-events: none;
}

/* Au téléphone, les deux positions s'empilent plutôt que de déborder. */
@media (max-width: 480px) {
    .insc-choix-profil {
        display: flex;
        flex-direction: column;
        width: 100%;
        border-radius: 14px;
    }
    .insc-choix-option {
        min-width: 0;
        border-radius: 10px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   reservation_detail.php — LES STYLES INLINE DÉPLACÉS ICI
   20/09/2026
   ═══════════════════════════════════════════════════════════════════════
   Vingt-quatre attributs `style="…"` retirés de la page, aux mêmes
   valeurs exactement : on déplace l'écriture, on ne change pas
   l'apparence.

 ⚠ VINGT AUTRES RESTENT DANS CE FICHIER, ET C'EST VOULU. Ils vivent
   dans le JavaScript qui construit le tableau d'émargement
   (`html += '<td style="…">'`). Les déplacer est possible, mais c'est
   un autre travail : il faut voir ce tableau fonctionner pour vérifier
   qu'on n'a rien cassé, et certains sont calculés à l'exécution
   (`infoStatut.style`) — ceux-là ne peuvent pas devenir des classes.
   ═══════════════════════════════════════════════════════════════════════ */

/* ⚠ CLASSE DOUBLÉE, ET C'EST LA SEULE DU LOT. `.info-cell .info-value`
   existe déjà et vaut (0,2,0) — deux classes ; elle impose
   `color: #2c3e50`. Une classe simple (0,1,0) perdrait, et la valeur
   passerait de #1f2937 à #2c3e50 : un changement de couleur visible,
   que rien n'aurait signalé. Doubler le nom porte la règle à (0,2,0),
   et sa position en fin de fichier tranche l'égalité.
   C'est le motif déjà employé plus haut pour `.btn-valider`. */
.rd-valeur-forte.rd-valeur-forte {
    font-weight: 600;
    color: #1f2937;
}

.rd-marge-basse    { margin-bottom: 5px; }
.rd-sans-marge     { margin: 0; }
.rd-marge-haute-6  { margin-top: 6px; }
.rd-form-en-ligne  { display: inline; margin: 0; }
.rd-cliquable      { cursor: pointer; }

.rd-form-rangee {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}

.rd-note-grise {
    color: #999;
    font-size: 13px;
    margin: 0 0 10px;
}

/* Le trait de séparation et son mot posé dessus. */
.rd-separateur {
    border-top: 1px dashed #ddd;
    margin: 12px 0;
    position: relative;
}

.rd-separateur-libelle {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: #f8f9fa;
    padding: 0 10px;
    font-size: 12px;
    color: #999;
}

/* Les trois titres de section à icône, et la pastille qui la cale. */
.rd-titre-icone {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rd-titre-pastille {
    width: 28px;
    text-align: center;
}

/* L'intro alignée sous le titre, pas sous son icône. */
.rd-intro-decalee {
    margin-top: 10px;
    margin-left: 36px;
}

.rd-chargement {
    text-align: center;
    padding: 20px;
}

.rd-cadre-signature {
    text-align: center;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 15px;
    background: #fafafa;
}

.rd-image-signature {
    max-width: 100%;
    max-height: 200px;
}

/* === ABONNEMENT : METTRE À JOUR SA CARTE — 25/09/2026 ===================
   Deux présentations pour un même geste : discret quand l'abonnement va
   bien, mis en avant dans le bandeau d'alerte quand un prélèvement a
   échoué. Rien de plus que la mise en page — les couleurs viennent de
   `.alert-warning` et des boutons de l'univers. */
.abo-carte-alerte {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin: 0 0 16px;
}

.abo-carte-alerte .btn {
    flex-shrink: 0;
}

.abo-carte-action {
    margin: 0 0 16px;
}

/* ═══════════════════════════════════════════════════════════════════════
   ONGLETS DES ETATS — MASTERCLASS EN LIGNE        28/09/2026
   ═══════════════════════════════════════════════════════════════════════
   La disposition est celle demandee : une capsule qui reunit « Formations »
   et les etats, et « Calendrier » detache a sa droite.

 ⚠ LES COULEURS NE SONT PAS ECRITES ICI. Elles viennent de
   `--couleur-boutons`, la meme variable que `.tabs .tab-btn` : changer la
   couleur des boutons dans l'administration change aussi cette barre,
   sans toucher a ce fichier.

   Le rayon (25px), la graisse (600) et la taille (16px) sont ceux de
   `.tab-btn`, repris a l'identique pour que les deux barres ne jurent pas.
   ═══════════════════════════════════════════════════════════════════════ */

.mc-onglets {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-bottom: 30px;
}

/* La capsule : « Formations » + les etats, d'un seul tenant.

 ⚠ `overflow: hidden` N'EST PAS DE LA DÉCORATION. Sans lui, la pastille
   pleine du premier onglet gardait son propre arrondi à l'intérieur de
   l'arrondi de la capsule : deux courbes l'une dans l'autre, avec un
   croissant blanc entre les deux. C'est la capsule qui découpe maintenant,
   et le remplissage vient au ras du contour. */
.mc-onglets-groupe {
    display: flex;
    align-items: stretch;
    overflow: hidden;
    border: 2px solid var(--couleur-boutons);
    border-radius: 25px;
    background: white;
}

/* ⚠ POURQUOI LES LIENS PORTENT AUSSI LA CLASSE `tab-btn` — 28/09/2026.
     `entete.php` force la couleur de TOUS les liens de `main` en
     `!important`, avec une longue liste d'exceptions où figure `.tab-btn`.
     Sans elle, le texte des onglets ressortait doré (la couleur des liens)
     au lieu de bleu et blanc.

     On ne peut pas gagner par la specificite : cette regle en compte dix-
     sept a elle seule. On ne touche pas non plus a `entete.php` pour y
     ajouter une exception de plus : la classe existe deja pour ca, et
     c'est le motif que la page d'a cote emploie.

   ⚠ EFFET DE BORD A NEUTRALISER : `.tab-btn` porte un liseré bas de 3px
     transparent, qui decalerait les pastilles. D'ou le `border: none`
     ci-dessous — `.mc-onglet-seul` le remet apres, pour « Calendrier ». */
.mc-onglet,
.mc-onglet:link,
.mc-onglet:visited {
    padding: 12px 30px;
    border: none;
    border-radius: 25px;
    background: transparent;
    color: var(--couleur-boutons);
    font-weight: 600;
    font-size: 16px;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.3s;
}

.mc-onglet:hover,
.mc-onglet.active {
    background: var(--couleur-boutons);
    color: #fff;
}

/* ⚠ DEUX ONGLETS ACTIFS CONTIGUS SE SOUDENT — c'est le cas de
     « Formations » + « En cours », voisins dans la barre. Sans cela, les
     deux pastilles arrondies se chevauchent et laissent une encoche en
     haut et en bas : on voit la couture. On supprime donc les deux
     rayons qui se font face.

     `:has()` est deja employe ailleurs dans cette feuille (le bandeau
     d'identite empruntee s'en sert pour decaler le pied de page). */
.mc-onglet.active + .mc-onglet.active {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.mc-onglet.active:has(+ .mc-onglet.active) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* « Calendrier », seul dans sa capsule.

 ⚠ LE SÉLECTEUR EST VOLONTAIREMENT PLUS LOURD (`.mc-onglets .mc-onglet-seul`).
   La règle du dessus vise aussi `.mc-onglet:link`, qui pèse deux classes :
   un simple `.mc-onglet-seul` perdait contre elle et « Calendrier »
   s'affichait sans contour. Le défaut ne se voit qu'à l'œil — aucune
   erreur nulle part. */
.mc-onglets .mc-onglet-seul {
    border: 2px solid var(--couleur-boutons);
}

/* Un etat vide reste visible mais eteint : on voit qu'il n'y a rien,
   plutot que de chercher un onglet disparu. */
.mc-onglet.mc-onglet-vide,
.mc-onglet.mc-onglet-vide:hover {
    background: transparent;
    color: #bbb;
    cursor: default;
}

/* ⚠ PLUS DE DÉFILEMENT LATÉRAL SUR TÉLÉPHONE — 28/09/2026. Il n'a plus lieu
   d'être : la barre ne porte alors que trois éléments (Formations, la liste
   déroulante, Calendrier) et tient dans la largeur. Les règles du téléphone
   sont regroupées plus bas, avec la liste déroulante. */

/* ═══ LE BADGE DU NOMBRE DE SESSIONS — 28/09/2026 ═══
   La forme est celle de `.formation-header-count`, le compteur qui figurait
   dans les anciens bandeaux repliables : pastille ronde, 26px, 700.

 ⚠ IL S'INVERSE AVEC L'ONGLET. Sur un onglet éteint c'est la couleur des
   boutons sur fond pâle ; sur l'onglet actif, dont le fond est déjà cette
   couleur, c'est l'inverse — sinon le chiffre disparaîtrait dans le fond. */
.mc-onglet-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    margin-left: 9px;
    padding: 0 7px;
    border-radius: 50%;
    background: var(--couleur-boutons);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
    opacity: .85;
}

.mc-onglet.active .mc-onglet-badge,
.mc-onglet:hover .mc-onglet-badge {
    background: #fff;
    color: var(--couleur-boutons);
    opacity: 1;
}

/* Sur un onglet éteint, le badge s'éteint aussi : un zéro en couleur vive
   attirerait l'œil sur le seul onglet où il n'y a rien à voir. */
.mc-onglet.mc-onglet-vide .mc-onglet-badge,
.mc-onglet.mc-onglet-vide:hover .mc-onglet-badge {
    background: #e2e2e2;
    color: #999;
    opacity: 1;
}

/* Le badge remplace la place que prenait le texte : sur téléphone, la barre
   défile déjà latéralement, on resserre seulement un peu. */

/* ⚠⚠ CE BLOC DOIT RESTER APRÈS `.mc-onglet, .mc-onglet:link, .mc-onglet:visited`,
     QUI POSE `border-radius: 25px`. À spécificité égale — deux classes de
     chaque côté, `:link` en compte une — c'est la dernière écrite qui
     l'emporte. Placé au-dessus, il perdait, et le bord droit de
     « Formations » redevenait arrondi dès que son voisin n'était pas
     allumé. Le défaut ne se voit qu'à l'œil, sur un onglet actif éloigné.

     Même règle pour le bloc du téléphone, plus bas. */

/* ⚠ LES COINS SONT DÉSIGNÉS PAR DES CLASSES, PAS PAR LA POSITION. La capsule
   contient aussi la liste déroulante du téléphone, cachée sur ordinateur :
   `:first-child` / `:last-child` auraient désigné le mauvais élément dès
   qu'on ajoute quoi que ce soit dans la capsule.

 ⚠ L'arrondi des deux extrémités appartient à la capsule, pas à l'onglet :
   c'est elle qui le donne, en découpant (`overflow: hidden`). */
.mc-onglets-groupe .mc-onglet-debut {
    border-radius: 0;
}

.mc-onglets-groupe .mc-onglet-fin {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* ⚠⚠ « FORMATIONS » ET LE PREMIER ÉTAT SE FONT FACE À ANGLE DROIT, TOUJOURS
     — et pas seulement quand les deux sont allumés. C'est un bord vertical
     franc, visible sur la maquette du client : « Formations » n'est pas une
     pastille posée dans la capsule, c'en est le premier pan.

   ⚠ NE PAS « CORRIGER » EN REMETTANT L'ARRONDI. Je l'ai lu deux fois à
     l'envers avant de recadrer la maquette : le doute se tranche en
     agrandissant l'image, pas en raisonnant. */
.mc-onglets-groupe .mc-onglet-debut + .mc-onglet {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   LA VERSION TÉLÉPHONE — 28/09/2026
   ══════════════════════════════════════════════════════════════════════
   « Formations » et « Calendrier » restent des onglets ; les états, eux,
   deviennent une liste déroulante dans la capsule.

 ⚠ LE HTML NE CHANGE PAS SELON L'APPAREIL : les deux formes sont toujours
   écrites, et c'est cette média-requête qui choisit. Rien ne saute pendant
   le chargement, et une impression garde les onglets.

 ⚠ LA POLICE, LA TAILLE ET LA COULEUR SONT CELLES DES ONGLETS, comme
   demandé : `inherit` pour la police, 16px, `var(--couleur-boutons)`.
   ══════════════════════════════════════════════════════════════════════ */

.mc-onglet-choix {
    display: none;        /* ordinateur : ce sont les onglets qui parlent */
    position: relative;
    align-items: stretch;
}

/* Le bouton reprend exactement la police, la taille et la couleur des
   onglets : c'est ce qui est demandé. */
.mc-onglet-choix-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 12px 14px;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--couleur-boutons);
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
}

.mc-onglet-choix-libelle {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mc-onglet-choix-fleche {
    flex: 0 0 auto;
    color: var(--couleur-boutons) !important;
    font-size: 20px;
    transition: transform .2s;
}

.mc-onglet-choix.ouvert .mc-onglet-choix-fleche { transform: rotate(180deg); }

/* ⚠ LA LISTE DESCEND SOUS LA CAPSULE, qui est en `overflow: hidden` : elle
   s'y ferait rogner. Sur téléphone, la capsule cesse donc de découper (voir
   la média-requête plus bas) et rend son arrondi au premier onglet. Je l'ai
   vu au rendu : la liste s'ouvrait, invisible, derrière le bord. */
.mc-onglet-choix-liste {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 30;
    margin: 0;
    padding: 6px;
    list-style: none;
    border: 2px solid var(--couleur-boutons);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}

.mc-onglet-choix.ouvert .mc-onglet-choix-liste { display: block; }

.mc-onglet-choix-liste li { margin: 0; padding: 0; }

.mc-onglet-item,
.mc-onglet-item:link,
.mc-onglet-item:visited {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 14px;
    border-radius: 14px;
    color: var(--couleur-boutons);
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
}

/* ⚠ SÉLECTEUR ALOURDI, ET CE N'EST PAS DU CONFORT. La règle du dessus vise
   aussi `.mc-onglet-item:link`, qui pèse deux classes : un simple
   `.mc-onglet-item-actif` perdait, et le libellé de la ligne active
   s'affichait bleu sur bleu — invisible. Même piège que pour le bord de
   « Calendrier ». Aucune erreur nulle part : ça ne se voit qu'au rendu. */
.mc-onglet-choix-liste .mc-onglet-item-actif,
.mc-onglet-choix-liste .mc-onglet-item:hover,
.mc-onglet-choix-liste .mc-onglet-item:focus {
    background: var(--couleur-boutons);
    color: #fff;
}

.mc-onglet-choix-liste .mc-onglet-item-actif .mc-onglet-badge,
.mc-onglet-choix-liste .mc-onglet-item:hover .mc-onglet-badge,
.mc-onglet-choix-liste .mc-onglet-item:focus .mc-onglet-badge {
    background: #fff;
    color: var(--couleur-boutons);
    opacity: 1;
}

/* Un état vide : présent, éteint, non cliquable — comme son onglet. */
.mc-onglet-item-vide {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 14px;
    color: #bbb;
    font-size: 16px;
    font-weight: 600;
}

.mc-onglet-item-vide .mc-onglet-badge {
    background: #e2e2e2;
    color: #999;
    opacity: 1;
}

@media (max-width: 900px) {
    .mc-onglet-etat { display: none; }

    .mc-onglet-choix { display: flex; }

    /* ⚠ LA CAPSULE PREND LA PLACE QUI RESTE, ET LA LISTE AVEC. Sans
         `min-width: 0`, un élément de flex refuse de descendre sous la largeur
         de son contenu : le libellé le plus long imposait sa taille, la liste
         débordait et le chevron venait se poser par-dessus le texte. */
    /* ⚠ TOUT SUR UNE SEULE LIGNE : « Formations », la liste déroulante, puis
         « Calendrier ». C'est la demande du client, et ça tient à condition
         que la liste accepte de rétrécir.

       ⚠ `min-width: 0` EST LA CLÉ. Sans lui, un élément de flex refuse de
         descendre sous la largeur de son contenu : le libellé le plus long
         imposait sa taille, la barre débordait et le chevron venait se poser
         sur le texte. Avec lui, le libellé se coupe proprement (…) et tout
         reste aligné. */
    .mc-onglets {
        flex-wrap: nowrap;
        justify-content: center;
        gap: 8px;
        overflow: visible;
        padding: 0;
        margin-left: 0;
        margin-right: 0;
    }

    /* ⚠ LA CAPSULE CESSE DE DÉCOUPER, sinon elle rogne la liste déroulante qui
         descend sous elle : elle s'ouvrait, invisible, derrière le bord. Elle
         n'a plus que deux pans ici, on lui rend son arrondi à la main sur le
         premier onglet. 23px = les 25px de la capsule moins ses 2px de bord. */
    /* ⚠ LA CAPSULE NE S'ÉTIRE PAS : elle fait la largeur de son contenu, pas
         celle qui reste. `flex: 0 1 auto` — elle peut rétrécir si l'écran est
         vraiment étroit, jamais grandir. */
    .mc-onglets-groupe { flex: 0 1 auto; min-width: 0; overflow: visible; }

    /* ⚠ SEUL LE BORD GAUCHE EST ARRONDI. Le bord droit de « Formations »
         reste droit : c'est lui qui fait face à la liste, exactement comme il
         fait face au premier état sur grand écran. */
    .mc-onglets-groupe .mc-onglet-debut {
        flex: 0 0 auto;
        border-top-left-radius: 23px;
        border-bottom-left-radius: 23px;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    .mc-onglets .mc-onglet-seul { flex: 0 0 auto; }

    /* ⚠ UNE LARGEUR PLANCHER POUR LA LISTE. Sans elle, c'est elle qui absorbe
         tout le rétrécissement — les deux onglets, eux, gardent leur taille —
         et le libellé se réduit à quelques pixels. */
    /* La liste non plus ne s'étire pas : elle prend la largeur de son libellé,
       avec un plancher pour rester lisible quand l'écran est très étroit. */
    .mc-onglet-choix { flex: 0 1 auto; min-width: 96px; }

    /* ⚠ LE PANNEAU EST PLUS LARGE QUE LE BOUTON, ET CALÉ SUR SON BORD DROIT.
         Sur un écran de 375px le bouton ne fait que 130px : un panneau de la
         même largeur laissait « Permanentes 6 » déborder. On l'élargit, et on
         le fait grandir vers la GAUCHE — vers la droite il sortirait de
         l'écran, puisque le bouton touche presque le bord. */
    .mc-onglet-choix-liste {
        left: auto;
        right: 0;
        min-width: 240px;
    }

    /* ⚠ SÉLECTEURS ALOURDIS — ET C'EST LA TROISIÈME FOIS QUE CE PIÈGE SE
         REFERME. Un simple `.mc-onglet` perd contre `.mc-onglet:link`, qui
         pèse deux classes : les marges d'ordinateur (30px de chaque côté)
         restaient, « Formations » occupait 147px des 343 disponibles et il ne
         restait que 41px à la liste. Aucune erreur, juste un écrasement.

       Trois éléments sur un écran de 375px : chaque pixel compte. */
    .mc-onglets .mc-onglet { padding: 12px 13px; font-size: 14px; }
    .mc-onglets .mc-onglet-choix-btn { padding: 12px 10px; font-size: 14px; gap: 4px; }
    .mc-onglet-item, .mc-onglet-item-vide { font-size: 15px; }
    .mc-onglet-choix-fleche { font-size: 18px; }
    .mc-onglet-badge { min-width: 20px; height: 20px; margin-left: 6px; font-size: 11px; padding: 0 5px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   LA MODALE DU CALENDRIER QUAND ELLE PORTE UNE CARTE DE SESSION
   ═══════════════════════════════════════════════════════════════════════
   08/10/2026. La modale de formations.php faisait 600 px : assez pour les
   cinq lignes qu'elle affichait, pas pour la carte de presentation, dont la
   grille vaut 280 px + centre + 280 px, plus les gouttieres et le padding —
   680 px AVANT la colonne du milieu. A 600 px, la colonne centrale etait
   ecrasee.

 ⚠ ON NE TOUCHE PAS A .modal-content : d'autres modales du site s'en
   servent et 600 px leur convient. La classe n'est posee que sur la modale
   qui porte une carte, et seulement par afficherSession().

 ⚠ EN DESSOUS DE 1200 px DE FENETRE, LA CARTE S'EMPILE. La media query
   d'origine ne bascule qu'a 900 px, parce qu'elle a ete ecrite pour une
   carte en pleine page ; dans une modale il reste moins de place, et entre
   900 et 1200 px les deux colonnes laterales etouffaient le centre. On
   reaffirme donc l'empilement ici, en fin de fichier, pour gagner le
   conflit de specificite egale comme le fait deja le correctif ci-dessus. */
.modal-content.modal-content-carte {
    max-width: 1100px;
    /* ⚠ 48 px EN HAUT : la croix de fermeture est en position absolue dans le
         coin, et la colonne de droite de la carte commence exactement la.
         Sans ce bandeau, la croix se posait sur le badge « Visio - Zoom ». */
    padding: 48px 24px 24px;
}

.modal-content-carte .formation-fiche {
    box-shadow: none;
    padding: 0;
}

@media (max-width: 1200px) {
    .modal-content-carte .formation-fiche {
        grid-template-columns: 1fr;
    }
}