/* Le bandeau de consentement cookies (cookie-consent.css) utilise un z-index
   volontairement très élevé (9999, voire 99999) pour ne jamais être masqué -
   sans ce correctif, une modale Bootstrap ouverte pendant que le bandeau est
   encore affiché (typiquement : premier clic d'un visiteur sur le calendrier
   public avant d'avoir géré les cookies) se retrouve invisible derrière lui. */
.modal-backdrop {
    z-index: 100000;
}

.modal {
    z-index: 100010;
}

/* Carte de formulaire admin (création/édition de créneau) - .table-container
   n'a par défaut aucun padding propre (pensé pour un tableau plein cadre), le
   contenu d'un formulaire placé tel quel s'y retrouve collé aux bords. */
.admin-form-card {
    padding: 30px;
}

.admin-form-card form {
    max-width: 720px;
}

.admin-form-card hr {
    margin: 25px 0;
    border-color: #eee;
}

.admin-form-card .required-asterisk {
    color: #dc3545;
    font-weight: 600;
}

/* Lien "retour" du header de page - un lien bleu souligné brut tranchait mal
   avec le reste du dashboard (icônes + libellés discrets). */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #667eea;
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
}

.back-link:hover {
    color: #4c5fd5;
    text-decoration: underline;
}

/* .table-container n'a pas de marge propre (une seule instance par page dans
   le reste du site) - sur la page créneau, le formulaire et la carte "Élèves
   inscrits" s'empilent et se touchent sans cet espacement. */
.table-container + .table-container {
    margin-top: 30px;
}

/* Bouton d'upload de fichier - remplace le input[type=file] natif (bouton gris
   du navigateur, non personnalisable) par une zone cliquable cohérente avec le
   reste du design. L'input réel reste dans le DOM (masqué) pour continuer à
   fonctionner normalement dans le formulaire. */
.academy-file-drop {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 2px dashed #c7d2fe;
    border-radius: 10px;
    padding: 14px 16px;
    cursor: pointer;
    color: #667eea;
    background: #f8f9ff;
    transition: border-color 0.2s ease, background 0.2s ease;
    margin: 0;
}

.academy-file-drop:hover {
    border-color: #667eea;
    background: #eef0ff;
}

.academy-file-drop i {
    font-size: 22px;
    flex-shrink: 0;
}

.academy-file-drop-text {
    font-size: 14px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.academy-file-drop.has-file {
    border-style: solid;
    border-color: #667eea;
    color: #4c5fd5;
    background: #eef0ff;
}

/* Champ lien externe, mis au même gabarit que .academy-file-drop juste à côté
   (même hauteur/rayon/padding) pour que les deux options "fichier ou lien"
   restent visuellement équilibrées l'une à côté de l'autre. */
.academy-link-input {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 2px solid #dee2e6;
    border-radius: 10px;
    padding: 14px 16px;
    background: #fff;
    transition: border-color 0.2s ease;
}

.academy-link-input:focus-within {
    border-color: #667eea;
}

.academy-link-input i {
    font-size: 22px;
    color: #667eea;
    flex-shrink: 0;
}

/* Variante compacte pour une simple barre de recherche - le gabarit "pleine
   hauteur" de .academy-link-input est pensé pour s'aligner avec le bouton de
   fichier à côté de lui dans le formulaire, pas pour un champ isolé. */
.academy-link-input.compact {
    height: 40px;
    padding: 0 14px;
}

.academy-link-input.compact i {
    font-size: 16px;
}

.academy-link-input input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
    padding: 0;
}

/* Sélecteur de filtre personnalisé (type de ressource, etc.) - un <select>
   natif ne permet ni de centrer parfaitement son texte, ni de recolorer sa
   flèche, ni de styliser sa liste déroulante une fois ouverte (limitation du
   rendu natif du navigateur, pas de la feuille de style). On reconstruit donc
   un menu déroulant complet en HTML/CSS/JS, au même gabarit que la barre de
   recherche compacte juste à côté. */
.academy-select {
    position: relative;
}

.academy-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    height: 40px;
    border: 2px solid #dee2e6;
    border-radius: 10px;
    padding: 0 14px;
    font-size: 14px;
    font-family: inherit;
    background: #fff;
    color: #333;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.academy-select-trigger:hover,
.academy-select.open .academy-select-trigger {
    border-color: #667eea;
}

.academy-select-trigger i {
    color: #667eea;
    font-size: 16px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.academy-select.open .academy-select-trigger i {
    transform: rotate(180deg);
}

.academy-select-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    padding: 6px;
    z-index: 20;
    max-height: 260px;
    overflow-y: auto;
}

.academy-select.open .academy-select-menu {
    display: block;
}

.academy-select-option {
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    transition: background 0.15s ease;
}

.academy-select-option:hover {
    background: #f0f1ff;
}

.academy-select-option.selected {
    background: #667eea;
    color: #fff;
    font-weight: 500;
}

/* Coloration des créneaux du calendrier Academy selon leur disponibilité - deux
   traitements différents suivant la vue. En grille mensuelle, le créneau est
   une pastille pleine : texte blanc obligatoire pour rester lisible dessus.
   En vue liste, la ligne garde le fond blanc habituel (pas de pastille derrière
   le texte) - y forcer aussi du texte blanc le rendait invisible, y compris
   hors survol, et carrément fondu dans le décor au survol (le fond gris clair
   du survol venait recouvrir le fond coloré sans que le texte blanc ne change).
   Seul le point indicateur y reprend la couleur du statut. */
.fc-daygrid-event.academy-event-available,
.fc-daygrid-event.academy-event-full,
.fc-daygrid-event.academy-event-booked,
.fc-daygrid-event.academy-event-closed {
    color: #fff !important;
}

.fc-daygrid-event.academy-event-available .fc-event-title,
.fc-daygrid-event.academy-event-full .fc-event-title,
.fc-daygrid-event.academy-event-booked .fc-event-title,
.fc-daygrid-event.academy-event-closed .fc-event-title,
.fc-daygrid-event.academy-event-available .fc-event-time,
.fc-daygrid-event.academy-event-full .fc-event-time,
.fc-daygrid-event.academy-event-booked .fc-event-time,
.fc-daygrid-event.academy-event-closed .fc-event-time {
    color: #fff;
    font-weight: 600;
}

.fc-daygrid-event.academy-event-available {
    background-color: #667eea;
    border-color: #667eea;
}

.fc-daygrid-event.academy-event-full {
    background-color: #adb5bd;
    border-color: #adb5bd;
}

.fc-daygrid-event.academy-event-booked {
    background-color: #28a745;
    border-color: #28a745;
}

.fc-daygrid-event.academy-event-closed {
    background-color: #dc9c45;
    border-color: #dc9c45;
}

.fc-list-event.academy-event-available .fc-list-event-dot {
    border-color: #667eea;
}

.fc-list-event.academy-event-full .fc-list-event-dot {
    border-color: #adb5bd;
}

.fc-list-event.academy-event-booked .fc-list-event-dot {
    border-color: #28a745;
}

.fc-list-event.academy-event-closed .fc-list-event-dot {
    border-color: #dc9c45;
}

#academy-calendar {
    background: #fff;
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    /* Variables CSS exposées par FullCalendar - la façon prévue par la
       bibliothèque de la reskinner sans toucher à sa structure interne, donc
       sans risque de casser la mise en page ou le comportement des vues. */
    --fc-border-color: #eef0f5;
    --fc-neutral-bg-color: #f8f9fc;
    --fc-page-bg-color: #fff;
    --fc-today-bg-color: #f0f1ff;
    --fc-button-bg-color: #667eea;
    --fc-button-border-color: #667eea;
    --fc-button-hover-bg-color: #5a6fd8;
    --fc-button-hover-border-color: #5a6fd8;
    --fc-button-active-bg-color: #4c5fd5;
    --fc-button-active-border-color: #4c5fd5;
}

#academy-calendar .fc-toolbar-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #2c3e50;
}

#academy-calendar .fc-button {
    border-radius: 8px !important;
    font-weight: 500;
    text-transform: none;
    box-shadow: none !important;
}

/* FullCalendar colle par défaut les boutons d'un même groupe (prev/next,
   Mois/Liste) bord à bord avec des coins carrés au contact, façon barre
   segmentée - en arrondissant chaque bouton individuellement juste au-dessus,
   ce contact sans espace donnait un effet "écrasé" au niveau de la jointure. */
#academy-calendar .fc-button-group {
    gap: 6px;
}

#academy-calendar .fc-button-group .fc-button {
    margin: 0 !important;
}

#academy-calendar .fc-button-primary:not(:disabled).fc-button-active,
#academy-calendar .fc-button-primary:not(:disabled):active {
    box-shadow: none !important;
}

#academy-calendar .fc-col-header-cell {
    background: #f8f9fc;
    padding: 8px 0;
}

#academy-calendar .fc-col-header-cell-cushion {
    color: #7f8c8d;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-decoration: none;
}

#academy-calendar .fc-daygrid-day-number {
    color: #495057;
    font-size: 13px;
    padding: 6px 8px;
    text-decoration: none;
}

#academy-calendar .fc-day-today .fc-daygrid-day-number {
    color: #4c5fd5;
    font-weight: 700;
}

#academy-calendar .fc-daygrid-day-frame {
    transition: background 0.15s ease;
}

#academy-calendar .fc-daygrid-day:hover .fc-daygrid-day-frame {
    background: #fafbff;
}

#academy-calendar .fc-event {
    border-radius: 6px;
    border-width: 0;
    padding: 2px 4px;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

/* FullCalendar tronque par défaut le titre trop long avec text-overflow:clip,
   qui coupe le texte pile au bord de la boîte - visuellement, le dernier
   caractère (souvent une parenthèse ici, vu le "(x/y places)" en fin de
   titre) se retrouve à moitié mordu plutôt que proprement coupé. */
#academy-calendar .fc-event-title {
    text-overflow: ellipsis;
}

/* Dans une colonne de tableau de bord plus étroite qu'une page pleine
   largeur (~600-750px avec la barre latérale), l'horaire et le titre
   finissent écrasés à quelques pixels ("1. Cou..."), illisibles quoi qu'on
   fasse - même en priorisant l'horaire, un fragment tronqué ("18:0…") reste
   moche et peu utile. Comme pour le calendrier public, la case ne fait alors
   qu'un point coloré en dessous d'une certaine largeur de calendrier : le
   détail complet reste à un clic (modale), et la vue Liste (le nécessaire au
   quotidien) n'est de toute façon jamais concernée par ce souci. On se base
   sur la largeur du calendrier lui-même (container query), pas sur celle de
   la fenêtre, car c'est la barre latérale - pas la taille de l'écran - qui
   provoque l'étroitesse ici. */
#academy-calendar {
    container-type: inline-size;
    container-name: academy-calendar;
}

@container academy-calendar (max-width: 820px) {
    #academy-calendar .fc-daygrid-dot-event .fc-event-title,
    #academy-calendar .fc-daygrid-dot-event .fc-event-time {
        display: none;
    }
}

#academy-calendar .fc-daygrid-event:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18);
}

#academy-calendar .fc-list-event:hover td {
    background: #f8f9fc;
    cursor: pointer;
}

#academy-calendar .fc-list-day-cushion {
    background: #f8f9fc;
    padding: 10px 16px;
}

#academy-calendar .fc-list-day-cushion a {
    text-decoration: none;
}

#academy-calendar .fc-list-day-text {
    color: #2c3e50;
    font-weight: 700;
    font-size: 14px;
    text-transform: capitalize;
}

#academy-calendar .fc-list-day-side-text {
    color: #667eea;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    background: #eef0ff;
    padding: 3px 10px;
    border-radius: 20px;
}

#academy-calendar .fc-list-event-dot {
    border-width: 5px;
}

/* La barre d'outils par défaut de FullCalendar (prev/next/today - titre -
   sélecteur de vue) tient sur une seule ligne mais déborde sur mobile,
   coupant le dernier bouton hors de l'écran. On empile les 3 blocs
   verticalement et on les centre en dessous de cette largeur. */
@media (max-width: 576px) {
    #academy-calendar {
        padding: 0.5rem;
    }

    #academy-calendar .fc-header-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    #academy-calendar .fc-toolbar-chunk {
        display: flex;
        justify-content: center;
    }

    #academy-calendar .fc-toolbar-title {
        font-size: 1.1rem;
        text-align: center;
    }

    #academy-calendar .fc-button {
        padding: 0.3rem 0.5rem;
        font-size: 0.85rem;
    }
}

/* ============================================
   Page publique /academy (thème sombre du site,
   distinct du dashboard connecté ci-dessus)
   ============================================ */

/* Boutons d'accroche "Se connecter" / "Créer un compte" - au lieu des boutons
   Bootstrap génériques (btn-primary / btn-outline-light), un traitement un peu
   plus travaillé mais dans les mêmes teintes cyan/bleu déjà utilisées sur les
   formulaires du site (.btn-submit-contact). */
/* website_design.css donne à .col-lg-8 un padding-top (80px, 100px sur
   mobile) pensé pour les pages où cette classe est le tout premier wrapper
   sous la navbar fixe. Ici .col-lg-8 est réutilisée plus bas dans le hero,
   qui gère déjà lui-même sa propre marge de dégagement (padding-top: 6rem
   inline) - sans cette annulation, les deux s'additionnent et créent le gros
   vide entre le titre et le paragraphe/les boutons. */
.academy-hero .col-lg-8 {
    padding-top: 1.5rem;
}

.academy-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.9rem 2rem;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.35s ease;
}

.academy-cta-btn-primary {
    background: linear-gradient(135deg, #0066ff 0%, #00ccff 100%);
    color: #fff;
    box-shadow: 0 0 25px rgba(0, 153, 255, 0.4);
    border: 2px solid transparent;
}

.academy-cta-btn-primary:hover {
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 0 35px rgba(0, 204, 255, 0.6), 0 0 60px rgba(0, 102, 255, 0.3);
}

.academy-cta-btn-ghost {
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
    border: 2px solid rgba(0, 204, 255, 0.5);
    backdrop-filter: blur(6px);
}

.academy-cta-btn-ghost:hover {
    color: #fff;
    background: rgba(0, 204, 255, 0.12);
    border-color: #00ccff;
    transform: translateY(-3px);
    box-shadow: 0 0 25px rgba(0, 204, 255, 0.3);
}

/* Les 3 arguments clés ("Calendrier en direct", etc.) flottaient auparavant
   comme du texte nu directement sur le fond dégradé, sans aucun regroupement
   visuel - on les habille en petites cartes verre dépoli, dans le même
   langage graphique que .contact-form-section, pour que la page ait une
   vraie cohérence entre le hero et le reste. */
.academy-feature-card {
    height: 100%;
    padding: 2rem 1.5rem;
    text-align: center;
    background: rgba(15, 25, 50, 0.55);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 204, 255, 0.2);
    border-radius: 16px;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.academy-feature-card:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 204, 255, 0.45);
    box-shadow: 0 8px 24px rgba(0, 102, 255, 0.18);
}

.academy-feature-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(0, 204, 255, 0.25), rgba(0, 102, 255, 0.15));
    border: 1px solid rgba(0, 204, 255, 0.35);
}

.academy-feature-card h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.6rem;
}

.academy-feature-card p {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.95rem;
    margin-bottom: 0;
}

/* Section tarifs/spécifications - volontairement pas des cards (réservées à
   /nos-produits) : un seul panneau (.contact-form-section, déjà utilisé pour
   les formulaires) avec les deux formules posées côte à côte à l'intérieur,
   séparées par une ligne verticale plutôt que d'être deux boîtes distinctes. */
.academy-pricing-panel .subjects-intro {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.05rem;
    line-height: 1.7;
}

.academy-subjects-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 1.25rem 0 2rem;
}

.academy-subject-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    background: rgba(0, 204, 255, 0.1);
    border: 1px solid rgba(0, 204, 255, 0.35);
    color: #00ccff;
    font-weight: 600;
    font-size: 0.9rem;
}

.academy-eligibility {
    color: #00ccff;
    font-weight: 600;
    font-size: 0.95rem;
    margin-top: 0.75rem;
}

.academy-payment-facility {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    text-align: center;
    margin-top: 1.5rem;
}

/* Grille CSS avec subgrid : chaque ligne (badge, titre, fréquence, période,
   prix, mensualité, pitch) garde la même hauteur entre les deux colonnes
   quel que soit l'écart de longueur du texte - un simple flex/flottant ne
   garantit pas cet alignement si une formule a un texte plus long que l'autre. */
.academy-formulas-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(7, auto);
    border-top: 1px solid rgba(0, 204, 255, 0.25);
    margin-top: 1.5rem;
}

.academy-formula {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 7;
    padding: 2rem 1.75rem;
    position: relative;
}

.academy-formula:nth-child(2) {
    border-left: 1px solid rgba(0, 204, 255, 0.25);
}

@media (max-width: 767.98px) {
    .academy-formulas-row {
        grid-template-columns: 1fr;
    }

    .academy-formula {
        display: block;
        grid-row: auto;
    }

    .academy-formula:nth-child(2) {
        border-left: none;
        border-top: 1px solid rgba(0, 204, 255, 0.25);
    }
}

@media (max-width: 576px) {
    /* Même logique que pour le calendrier : .academy-pricing-section
       (px-4 Bootstrap) + le padding du panneau + celui de chaque formule
       s'additionnent et ne laissent presque plus de place utile au texte
       sur un téléphone étroit. */
    .academy-pricing-section {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .contact-form-section.academy-pricing-panel {
        padding: 1.5rem 1rem;
    }

    .academy-formula {
        padding: 1.5rem 0.5rem;
    }

    .academy-formula-price .ttc {
        font-size: 1.65rem;
    }
}

/* .academy-calendar-section et .academy-pricing-section remplacent px-4 (qui
   passe par !important côté Bootstrap et ne peut donc pas être resserré par
   la media query mobile ci-dessus/ci-dessous sans !important en retour) -
   même valeur par défaut (1.5rem) que px-4 pour ne rien changer sur desktop. */
.academy-calendar-section,
.academy-pricing-section {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.formula-badge-slot {
    min-height: 1.75rem;
    position: relative;
}

.academy-formula-badge {
    position: absolute;
    top: -0.97rem;
    left: 0;
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #0a0e27;
    background: #00ccff;
    padding: 0.25rem 0.75rem;
    border-radius: 50px;
    box-shadow: 0 2px 8px rgba(0, 204, 255, 0.35);
}

@media (max-width: 576px) {
    /* Le décalage du badge (top: -0.97rem ci-dessus) était calé sur le
       padding-top desktop de .academy-formula (2rem) - réduit à 1.5rem sur
       téléphone, l'écart entre le trait et le titre change aussi, donc le
       badge n'est plus centré dessus sans son propre réglage à cette
       largeur. */
    .academy-formula-badge {
        top: -0.72rem;
    }
}

.academy-formula h4 {
    color: #fff;
    font-weight: 700;
    margin-bottom: 0.5rem;
    align-self: start;
}

.academy-formula .formula-frequency {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
    align-self: start;
}

.academy-formula .formula-period {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
    margin-bottom: 1.25rem;
    align-self: start;
}

.academy-formula-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2rem 0.4rem;
    margin-bottom: 1rem;
    align-self: start;
}

.academy-formula-price .ttc {
    font-size: 2rem;
    font-weight: 800;
    color: #00ccff;
    white-space: nowrap;
}

.academy-formula-price .period {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.95rem;
}

.academy-formula .formula-installment {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.85rem;
    margin-bottom: 1rem;
    align-self: start;
}

.academy-formula .formula-pitch {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.9rem;
    line-height: 1.5;
    align-self: start;
}

/* Calendrier public (thème sombre) - variables FullCalendar redéfinies pour
   s'intégrer au panneau translucide plutôt que de rester une boîte blanche. */
#academy-calendar-public {
    background: rgba(15, 25, 50, 0.6);
    border: 1px solid rgba(0, 204, 255, 0.25);
    border-radius: 16px;
    padding: 1.25rem;
    --fc-border-color: rgba(255, 255, 255, 0.1);
    --fc-neutral-bg-color: rgba(255, 255, 255, 0.03);
    --fc-page-bg-color: transparent;
    --fc-today-bg-color: rgba(0, 204, 255, 0.08);
    --fc-button-bg-color: #0066ff;
    --fc-button-border-color: #0066ff;
    --fc-button-hover-bg-color: #00ccff;
    --fc-button-hover-border-color: #00ccff;
    --fc-button-active-bg-color: #00ccff;
    --fc-button-active-border-color: #00ccff;
    color: #fff;
}

#academy-calendar-public .fc-toolbar-title {
    color: #fff;
    font-weight: 700;
}

#academy-calendar-public .fc-button {
    border-radius: 8px !important;
    font-weight: 500;
    text-transform: none;
    box-shadow: none !important;
}

#academy-calendar-public .fc-button-group {
    gap: 6px;
}

#academy-calendar-public .fc-button-group .fc-button {
    margin: 0 !important;
}

#academy-calendar-public .fc-col-header-cell-cushion,
#academy-calendar-public .fc-daygrid-day-number {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

#academy-calendar-public .fc-daygrid-day-number {
    text-transform: none;
    font-size: 13px;
}

#academy-calendar-public .fc-day-today .fc-daygrid-day-number {
    color: #00ccff;
    font-weight: 700;
}

#academy-calendar-public .fc-event {
    border-radius: 6px;
    border-width: 0;
    padding: 2px 4px;
    cursor: pointer;
    color: #fff !important;
    font-weight: 600;
}

#academy-calendar-public .fc-event-title {
    text-overflow: ellipsis;
    color: #fff;
}

.academy-public-event-available {
    background-color: #0066ff;
}

.academy-public-event-full {
    background-color: rgba(255, 255, 255, 0.25);
}

@media (max-width: 576px) {
    #academy-calendar-public .fc-header-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    #academy-calendar-public .fc-toolbar-chunk {
        display: flex;
        justify-content: center;
    }

    /* Sur téléphone, .academy-calendar-section (padding Bootstrap px-4) et le
       padding propre du panneau du calendrier s'accumulent et ne laissent
       presque plus de largeur utile à la grille - on resserre les deux pour
       que les cellules jour restent lisibles plutôt que écrasées à ~40px. */
    .academy-calendar-section {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    #academy-calendar-public {
        padding: 0.75rem 0.4rem;
        border-radius: 12px;
    }

    #academy-calendar-public .fc-daygrid-day-number {
        font-size: 12px;
        padding: 2px;
    }

    #academy-calendar-public .fc-col-header-cell-cushion {
        font-size: 10px;
    }

    #academy-calendar-public .fc-event {
        font-size: 11px;
    }

    /* En vue Mois, chaque case ne fait plus qu'environ 40px de large sur
       téléphone - même rogné, "18:00 - 19:30" n'y laisse qu'un fragment
       illisible ("1…"), et FullCalendar ne tronque rien tout seul (le petit
       "point" event est en flex, sans overflow:hidden par défaut) : le texte
       débordait visuellement par-dessus les jours suivants. Sur cette
       largeur, mieux vaut garder uniquement le point coloré - la vue Liste
       (par défaut sur mobile) affiche déjà l'horaire complet, et le clic sur
       un jour ouvre la modale avec tous les détails. */
    #academy-calendar-public .fc-daygrid-event-harness {
        overflow: hidden;
        max-width: 100%;
    }

    #academy-calendar-public .fc-daygrid-dot-event .fc-event-title,
    #academy-calendar-public .fc-daygrid-dot-event .fc-event-time {
        display: none;
    }
}