/* =========================================================
   COURSES PLUGIN — Global Styles
   ========================================================= */

/* ----- CARDS ----- */
.ui.card.courses-card:not(.disabled):not(.courses-no-instructor) { background-color: #dbeafe; }
.courses-card { transition: box-shadow .2s, transform .2s; cursor: default; }
.courses-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.18); transform: translateY(-2px); }
.courses-card.disabled,
.courses-card.courses-no-instructor { opacity: .6; background-color: transparent; }
.courses-card.disabled:hover { box-shadow: none; transform: none; }
.courses-card.courses-past { opacity: .65; }
.courses-card.courses-past .extra.content a { pointer-events: auto !important; }
.courses-card-cancelled { background-color: #fde8e8 !important; }
.courses-card-out-of-group { background-color: #fff8e1 !important; border-left: 4px solid #f2711c !important; }

/* ----- STICKY + EMPHASIS TABS "Mes inscriptions" / "Mes seances moniteur" (Phase 71/71.1/71.2) ----- */
/* Phase 71.1 : sticky sur le wrapper qui englobe bannieres + onglets.
   Phase 71.2 : refonte visuelle -> gros onglets contrastes en boutons pleins. */
.courses-sticky-top {
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;
    background: #fff !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .08) !important;
    padding-top: .5em !important;
}
.courses-sticky-top .courses-sticky-message {
    margin-bottom: .35em !important;
    margin-top: 0 !important;
}
/* Conteneur onglets : flex 50/50, separateur bleu sous-jacent */
#my-sessions-tabs,
#my-instructor-tabs {
    display: flex !important;
    gap: .4em !important;
    border: 0 !important;
    border-bottom: 3px solid #2185d0 !important;
    background: #fff !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}
/* Chaque onglet : pleine moitie, bouton plein, libelle gros et clair */
/* Phase 72.1 : inactif assombri (#d4d9e0) + bordure subtile pour ressembler
   plus a un bouton cliquable (l'utilisateur doit comprendre que c'est cliquable). */
#my-sessions-tabs .item,
#my-instructor-tabs .item {
    flex: 1 1 50% !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 1.15rem !important;
    font-weight: 600 !important;
    padding: 1em 1.2em !important;
    color: rgba(0, 0, 0, .75) !important;
    background: #d4d9e0 !important;
    border: 1px solid rgba(0, 0, 0, .15) !important;
    border-bottom: none !important;
    border-radius: 8px 8px 0 0 !important;
    transition: all .15s ease !important;
    margin-bottom: 0 !important;
    box-shadow: inset 0 -2px 4px rgba(0, 0, 0, .04) !important;
}
#my-sessions-tabs .item .icon,
#my-instructor-tabs .item .icon {
    font-size: 1.2em !important;
    margin-right: .5em !important;
    opacity: .9 !important;
}
#my-sessions-tabs .item:hover,
#my-instructor-tabs .item:hover {
    color: #1678c2 !important;
    background: #dbeafe !important;
}
/* Onglet actif : bleu plein, texte blanc, leger soulevement */
#my-sessions-tabs .item.active,
#my-instructor-tabs .item.active {
    color: #fff !important;
    background: #2185d0 !important;
    box-shadow: 0 -2px 10px rgba(33, 133, 208, .30) !important;
    transform: translateY(-1px) !important;
    font-weight: 700 !important;
}
#my-sessions-tabs .item.active .icon,
#my-instructor-tabs .item.active .icon {
    opacity: 1 !important;
}
/* Badge : sur fond bleu plein, inverser les couleurs pour rester lisible */
#my-sessions-tabs .item.active .circular.label,
#my-instructor-tabs .item.active .circular.label {
    background: #fff !important;
    color: #2185d0 !important;
    box-shadow: 0 0 0 2px #2185d0 inset !important;
}
/* Mobile : reduire taille texte mais garder le contraste */
@media (max-width: 600px) {
    #my-sessions-tabs .item,
    #my-instructor-tabs .item {
        font-size: 1rem !important;
        padding: .85em .8em !important;
    }
    #my-sessions-tabs .item .courses-tab-text,
    #my-instructor-tabs .item .courses-tab-text {
        display: inline !important;
    }
}
/* Pulse animation when the user just registered and lands back on this page */
@keyframes courses-tab-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(33, 133, 208, .55); transform: scale(1); }
    35%      { box-shadow: 0 0 0 8px rgba(33, 133, 208, .18); transform: scale(1.04); }
    70%      { box-shadow: 0 0 0 14px rgba(33, 133, 208, 0); transform: scale(1.02); }
}
.courses-tab-pulse {
    animation: courses-tab-pulse 1.1s ease-in-out 3;
    border-radius: 4px;
}

/* ----- MULTI-SLOT CARD (Phase 70) ----- */
.courses-multislot-list { padding-top: .5em !important; padding-bottom: .5em !important; }
.courses-multislot-row { display: flex; align-items: center; flex-wrap: wrap; gap: .45em; padding: .25em 0; border-bottom: 1px dashed rgba(0,0,0,.06); }
.courses-multislot-row:last-child { border-bottom: 0; }
.courses-multislot-cap { color: rgba(0,0,0,.55); margin-left: auto; }
.courses-multislot-menu-header { padding: .5em .75em !important; background: #f7f8f9 !important; font-weight: 600 !important; color: rgba(0,0,0,.75) !important; border-top: 1px solid rgba(0,0,0,.08) !important; }
.courses-multislot-menu-header:first-child { border-top: 0 !important; }

/* ----- WAITLIST list ----- */
.courses-waitlist-item { display: flex; align-items: center; flex-wrap: wrap; gap: .4em; }
.courses-waitlist-pos { flex: 0 0 auto; min-width: 2.2em; text-align: center; }
.courses-next-session { border-left: 4px solid #21ba45 !important; }
.courses-registered   { border-left: 4px solid #21ba45 !important; opacity: .85; }

/* ----- LAYOUT HELPERS ----- */
.courses-cards-grid { margin-top: 1em !important; }
.courses-cards-grid .column { padding-bottom: 1em !important; display: flex !important; flex-direction: column !important; }
.courses-cards-grid .courses-card { flex: 1 !important; }
.courses-results-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .4em; margin-bottom: .6em; }
.courses-section-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5em; }
.courses-section-actions { display: flex; gap: .4em; flex-wrap: wrap; align-items: center; }
.courses-segment-tight { padding: .5em 0 !important; }
.courses-divider-top0 { margin-top: 0 !important; }
.courses-input-narrow { width: 6em; }
.courses-input-medium { width: 12em; }

/* Inline nickname inside the registered-members table — mobile only */
.courses-attlist-nick-inline { display: none; }

/* ----- INFO LIST (label/value on same line) ----- */
.courses-info-list .item {
    display: flex !important;
    align-items: center;
    gap: .6em;
    padding: .5em 0 !important;
}
.courses-info-list .item > i.icon {
    display: inline-flex !important;
    flex-shrink: 0;
    margin: 0 !important;
    width: 1.4em;
    color: #888;
}
.courses-info-list .item > .content {
    display: flex !important;
    flex: 1;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: .4em .8em;
    min-width: 0;
}
.courses-info-list .item > .content > .header {
    display: inline !important;
    margin: 0 !important;
    font-weight: 600;
    color: #555;
    font-size: .95em;
}
.courses-member-inline { display: flex; align-items: center; gap: .5em; flex-wrap: wrap; }
.courses-unregister-row { display: flex; align-items: center; gap: .8em; flex-wrap: wrap; justify-content: center; }
.courses-table-scroll { overflow-x: auto; }
.courses-save-right { text-align: right; }
.courses-inline-form { display: inline; }
.courses-remove-form { margin-left: auto; }
.courses-hidden-form { display: none; }
.courses-attlist-actions { text-align: right; white-space: nowrap; }

/* ----- SPACING ----- */
.courses-section-mt    { margin-top: 1.5em !important; }
.courses-section-mt-sm { margin-top: .6em !important; }
.courses-segment-gap   { margin-top: .5em; }
.courses-group-mt      { margin-top: .8em; }
.courses-segment-hdr   { margin-bottom: .8em !important; }
.courses-member-meta   { margin-top: .4em; }
.courses-cancel-detail,
.courses-child-unregister-form { margin-top: .5em; }
.courses-label-offset  { margin-left: .3em; }

/* ----- TEXT -----
   Shared muted/secondary text base (font-size: .9em + dim grey).
   Per-class lines below only carry the extras unique to each. */
.courses-legend-text,
.courses-events-cell,
.courses-stat-sub,
.courses-fill-pct,
.courses-activity-date,
.courses-filter-label  { font-size: .9em; color: #555; }
.courses-stat-sub      { margin-top: .2em; }
.courses-fill-pct      { white-space: nowrap; min-width: 3em; text-align: right; }
.courses-activity-date { color: #666; }
.courses-filter-label  { margin: 0 !important; white-space: nowrap; }
.courses-empty-state   { color: #aaa; }

/* ----- DATE DISPLAY ----- */
.courses-date-day,
.courses-date-month { font-size: 1.8em; font-weight: bold; line-height: 1; }
.courses-date-month { text-transform: uppercase; }
/* Plage horaire atomique : "19:00 - 20:00" ne se coupe jamais ;
   si la place manque, toute la plage bascule a la ligne suivante. */
.courses-time-range { white-space: nowrap; }


/* ----- TABLES ----- */
tr.courses-pending { background-color: #fffde7 !important; }
.courses-icon-btn  { padding: 0 !important; background: none !important; border: none !important; box-shadow: none !important; cursor: pointer; }

/* Action labels (events list) hidden on desktop, surfaced on mobile so each
   action line shows "[icon] View / Edit / Validate / ..." instead of a bare
   icon. The icons keep their tooltip popup on desktop. */
.courses-action-text { display: none; }

/* ----- ACTION BUTTONS ----- */
/* Flexbox row keeps action buttons aligned horizontally on desktop and lets
   them wrap cleanly when the segment narrows. The mobile media query below
   switches to flex-direction: column for the stacked vertical layout.
   `!important` + the .ui.segment-prefixed selector are needed because
   Fomantic's .ui.basic.segment outweighs a single .courses-actions class
   on specificity. */
.ui.segment.courses-actions,
.courses-actions {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .4em;
}
.courses-actions .ui.small.button,
.courses-actions .ui.small.labeled.icon.button { font-size: .875rem !important; }
.courses-cards-grid .extra.content .ui.button { font-size: .8125rem; }

/* ----- REGISTER DROPDOWN (Phase 42) -----
   The Fomantic UI .ui.card has overflow:hidden by default, which clips the
   dropdown menu and hides it behind the next session card. Allow escape and
   raise stacking context when the dropdown is hovered or active. */
.courses-cards-grid .column,
.courses-card,
.courses-card > .content,
.courses-card > .extra.content { overflow: visible !important; }
.courses-card .ui.dropdown .menu,
.courses-actions .ui.dropdown .menu { z-index: 100; }
.courses-card .ui.simple.dropdown:hover,
.courses-card .ui.dropdown.active,
.courses-actions .ui.simple.dropdown:hover,
.courses-actions .ui.dropdown.active { position: relative; z-index: 50; }
/* Phase 65: cards now share one grid (open + cancelled interleaved), so an open
   register dropdown could be painted UNDER the next card. Raise the whole grid
   column above the following siblings while its dropdown is open. */
.courses-cards-grid .column:has(.ui.dropdown.active),
.courses-cards-grid .column:has(.ui.simple.dropdown:hover) { position: relative; z-index: 200; }

/* ----- DASHBOARD BUTTON ----- */
.ui.card > .content > .ui.labeled.icon.button,
.ui.card > .content > a.ui.labeled.icon.button {
    text-align: center !important;
    padding-left: 4.0714em !important;
    padding-right: 4.0714em !important;
}

/* ----- COLOR LEGEND ----- */
.courses-legend { margin: .8em 0; display: flex; flex-wrap: wrap; align-items: center; gap: .3em 1em; }
.courses-legend-item { display: inline-flex; align-items: center; gap: .35em; }
.courses-legend-clickable { cursor: pointer; padding: .15em .4em; border-radius: 3px; transition: background-color .15s ease; }
.courses-legend-clickable:hover,
.courses-legend-clickable:focus { background-color: #f0f0f0; outline: none; }

/* ----- GROUP / ACCORDION HEADERS ----- */
.courses-group-header { margin-top: 1.5em !important; padding-bottom: .4em !important; }
.courses-group-header:first-child { margin-top: .5em !important; }
.courses-group-header .circular.label { margin-right: .4em; vertical-align: middle; }
.courses-past-accordion .title { color: #888 !important; }
/* Generic collapsible section header (history "past sessions" and any
   foldable section like "Upcoming" / "On the waitlist"). The chevron's
   `.rotated` class is the source of truth for expanded state. */
.courses-fold-toggle { cursor: pointer; user-select: none; display: flex; align-items: center; }
.courses-fold-toggle > .content { flex: 1 1 auto; }
.courses-fold-toggle .courses-fold-chevron { margin-left: auto; transition: transform .2s ease; font-size: .85em; }
.courses-fold-toggle .courses-fold-chevron.rotated { transform: rotate(180deg); }

/* ----- STATISTICS ----- */
.courses-stats .statistic .value { font-size: 3rem !important; }
.courses-stats .statistic .label { font-size: 1em !important; }
.courses-stat-content { text-align: center; padding: 1.2em .5em; }
.courses-stat-num { font-size: 2.4rem; font-weight: 700; line-height: 1.1; }
.courses-stat-num.green  { color: #21ba45; }
.courses-stat-num.teal   { color: #00b5ad; }
.courses-stat-num.orange { color: #f2711c; }
.courses-stat-num.blue   { color: #2185d0; }
.courses-period-active   { border-top: 3px solid #2185d0 !important; }
.courses-period-inactive { border-top: 3px solid #db2828 !important; }
.courses-period-instructors { border-top: 3px solid #00b5ad !important; }

/* ----- PARTICIPATION SUMMARY (Phase 62) ----- */
.courses-participation-summary {
    display: flex; align-items: center; gap: 1.25em;
    margin: .8em 0 1em; padding: .9em 1.1em;
    background: #f0f6fb; border-left: 4px solid #2185d0; border-radius: .35em;
    flex-wrap: wrap;
}
.courses-participation-rate {
    font-size: 2.4rem; font-weight: 700; color: #2185d0; line-height: 1;
    min-width: 5em; text-align: center;
}
.courses-participation-detail { flex: 1 1 200px; min-width: 200px; }
.courses-participation-label {
    font-weight: 600; color: #444; font-size: .95rem; margin-bottom: .4em;
}
.courses-participation-detail .ui.progress { margin: .25em 0 .35em !important; }
.courses-participation-sub { color: #666; font-size: .85rem; }
@media (max-width: 480px) {
    .courses-participation-summary { gap: .6em; padding: .7em .85em; }
    .courses-participation-rate { font-size: 1.9rem; min-width: 0; flex: 0 0 auto; }
    .courses-participation-detail { flex: 1 1 100%; }
}
.courses-filter-row { align-items: center !important; flex-wrap: wrap !important; gap: .75em !important; justify-content: center !important; }
/* Inline label + input on one line (Du [date] Au [date] [Filter]), vertically centered. */
.courses-filter-row .field { display: flex !important; align-items: center !important; gap: .4em !important; margin: 0 !important; }
/* Quick-select shortcuts: centered, wrapping row (desktop). Mobile overrides below. */
.courses-filter-shortcuts { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .4em; margin-top: .5em; }
.courses-chart-container { position: relative; width: 100%; min-height: 250px; }

/* ----- FILL RATE PROGRESS BAR ----- */
.courses-fill-row { display: flex; align-items: center; gap: .5em; }
.courses-fill-row .ui.progress {
    height: 1.2em; margin: 0; border-radius: .3em;
    flex: 1; min-width: 60px; background: rgba(0,0,0,.1);
}
.courses-fill-row .ui.progress > .bar {
    height: 100%; border-radius: .3em; min-width: 0; transition: width .3s ease;
}

/* ----- CLOSURE / PREFERENCES ----- */
.courses-closure-past { opacity: .5; }
.courses-closure-past .closure-from-input,
.courses-closure-past .closure-to-input,
.courses-closure-past .closure-label-input { color: #999; }

/* Closure table: inputs fill their cell uniformly with a visible Fomantic-like
   border. The reason column gets a comfortable preferred width so labels like
   "Fermeture annuelle de Noel" do not look cramped next to the date pickers. */
#closure-table th,
#closure-table td { vertical-align: middle; }
#closure-table th:nth-child(3) { width: 28%; }
#closure-table input.closure-from-input,
#closure-table input.closure-to-input,
#closure-table input.closure-label-input {
    width: 100%;
    min-height: 36px;
    padding: .5em .75em;
    border: 1px solid rgba(34, 36, 38, .2);
    border-radius: .28571429rem;
    background: #fff;
    color: rgba(0, 0, 0, .87);
    transition: box-shadow .1s ease, border-color .1s ease;
    box-sizing: border-box;
}
#closure-table input.closure-from-input:focus,
#closure-table input.closure-to-input:focus,
#closure-table input.closure-label-input:focus {
    border-color: #85b7d9;
    box-shadow: 0 0 0 0 rgba(34, 36, 38, .35) inset;
    outline: none;
}
#closure-table input.closure-label-input { font-size: .95em; }
#closure-table tbody tr.warning input { border-color: #e0b4b4; background: #fff6f6; }

/* ----- CRON ----- */
.courses-cron-input      { font-family: monospace; font-size: .9em; }
.courses-cron-note       { margin-top: .5em; color: #888; }
.courses-cron-regenerate { margin-top: .8em; }

/* ----- MAIL TEMPLATES ----- */
.mailtpl-select-row     { margin-bottom: 1.5em; }
.mailtpl-desc           { margin-bottom: 1.2em !important; }
.mailtpl-vars-block     { background: #f8f8f8; border: 1px solid #e8e8e8; border-radius: 4px; padding: .8em 1em; margin-bottom: 1.2em; }
.mailtpl-vars-label     { font-size: .9em; color: #555; font-weight: 600; display: block; margin-bottom: .5em; }
.mailtpl-vars-pills     { display: flex; flex-wrap: wrap; gap: .35em; margin-bottom: .5em; }
.mailtpl-var-pill       { font-family: monospace; font-size: .9em; background: #fff; border: 1px solid #2185d0; color: #2185d0; border-radius: 3px; padding: .15em .55em; cursor: pointer; transition: background .15s, color .15s; line-height: 1.7; }
.mailtpl-var-pill:hover { background: #2185d0; color: #fff; }
.mailtpl-vars-hint      { font-size: .9em; color: #aaa; }
.courses-help-text      { font-size: .9em; color: #888; margin-top: .25em; }
/* Phase 78 : toggle "Actif" sur les plages horaires d'un evenement */
.courses-slot-active-field { display: flex; flex-direction: column; }
.courses-slot-active-field .ui.toggle.checkbox { margin-top: .35em; align-self: flex-start; }
.slot-row .courses-slot-active-field { max-width: 6em; }
@media only screen and (max-width: 767px) {
    .slot-row.three.fields { flex-wrap: wrap; }
    .slot-row .courses-slot-active-field { max-width: 100%; flex: 1 0 100%; margin-bottom: .35em; }
}
.mailtpl-textarea       { font-family: monospace !important; font-size: .9em !important; line-height: 1.6 !important; }
.mailtpl-actions        { display: flex; align-items: center; gap: .8em; margin-top: 1em; flex-wrap: wrap; }
.mailtpl-default-section { margin-top: 1.5em; border-top: 1px solid #e8e8e8; padding-top: 1em; }
.mailtpl-default-toggle { cursor: pointer; color: #aaa; font-size: .9em; display: inline-flex; align-items: center; gap: .3em; user-select: none; }
.mailtpl-default-toggle:hover { color: #555; }
.mailtpl-default-content { margin-top: .8em; display: none; }
.mailtpl-default-body   { font-size: .9em !important; }
.mailtpl-default-body strong { display: block; margin-bottom: .2em; color: #555; font-size: .9em; }
.mailtpl-default-body pre { white-space: pre-wrap; margin: 0 0 .8em; font-size: .9em; background: none; border: none; padding: 0; color: #333; }

/* =========================================================
   SESSION HEADER
   ========================================================= */
.courses-mobile-br { display: none; }
.courses-session-header-segment { margin-bottom: 0 !important; }

/* Title left, action buttons right inside the colored header banner */
.courses-session-header-flex {
    display: flex;
    align-items: flex-start;
    gap: .6em;
    flex-wrap: nowrap;
}
.courses-session-header-flex .courses-session-header-title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 !important;
}
.courses-session-header-flex .courses-session-header-actions {
    flex: 0 0 auto;
    display: flex;
    gap: .35em;
    align-items: center;
}
.courses-session-header-flex .courses-session-header-actions .ui.button {
    margin: 0 !important;
}
.courses-session-header-flex .courses-session-header-actions .courses-header-action-btn > i.icon {
    margin: 0 .4em 0 0 !important;
}
.courses-header-action-label { vertical-align: middle; }

/* =========================================================
   FILTER PANEL — collapsible on mobile
   ========================================================= */
.courses-filter-toggle-btn {
    display: none; width: 100%; margin-bottom: .6em !important; text-align: left;
}
.courses-filter-panel.courses-collapsed { display: none; }

/* =========================================================
   RESPONSIVE ≤ 1024px — tablette
   ========================================================= */
@media only screen and (max-width: 1024px) {
    .courses-stats-cards.four.cards { flex-wrap: wrap !important; }
    .courses-stats-cards.four.cards .card { min-width: calc(50% - 1.5em) !important; flex: 1 1 calc(50% - 1.5em) !important; margin-bottom: .8em !important; }
    .courses-chart-container { min-height: 200px; }
    /* On tablet, hide the Duration column (4th) to keep the Reason column
       (3rd, added in Phase 44) visible. Duration is reconstructible from
       From/Until and is far less informative than the closure label. */
    #closure-table th:nth-child(4),
    #closure-table td:nth-child(4) { display: none; }
}

/* =========================================================
   RESPONSIVE ≤ 767px — téléphone + petite tablette
   ========================================================= */
@media only screen and (max-width: 767px) {

    /* --- Responsive table: card layout --- */
    .courses-responsive-table { display: block !important; border: none !important; }
    /* Selecteurs cumulatifs pour battre n'importe quelle regle Fomantic
       qui rendrait le thead via .ui.table thead. */
    table.courses-responsive-table thead,
    table.courses-responsive-table > thead,
    .courses-responsive-table thead,
    .courses-responsive-table > thead,
    .courses-responsive-table thead tr,
    .courses-responsive-table thead th { display: none !important; }
    .courses-responsive-table tbody { display: block !important; }
    .courses-responsive-table tbody tr {
        display: block !important; margin-bottom: 1em !important;
        border: 1px solid rgba(34,36,38,.15) !important; border-radius: 6px !important;
        background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.07) !important; overflow: hidden;
    }
    .courses-responsive-table tbody tr.courses-pending { background-color: #fffde7 !important; }
    .courses-responsive-table tbody td {
        display: flex !important; align-items: center !important; justify-content: space-between !important;
        padding: .65em 1em !important; border-top: none !important;
        border-bottom: 1px solid rgba(34,36,38,.06) !important;
        min-height: 44px; overflow-wrap: break-word; gap: .5em;
    }
    .courses-responsive-table tbody td:last-child { border-bottom: none !important; }
    .courses-responsive-table tbody td[data-label]::before {
        content: attr(data-label); font-weight: 700; font-size: .78em; color: #999;
        text-transform: uppercase; letter-spacing: .04em; flex-shrink: 0; min-width: 7em;
    }
    .courses-responsive-table tbody td.actions_row,
    .courses-responsive-table tbody td.courses-mobile-actions {
        justify-content: flex-end !important; gap: .5em !important; flex-wrap: wrap;
    }
    .courses-responsive-table tbody td.actions_row::before,
    .courses-responsive-table tbody td.courses-mobile-actions::before { content: none !important; }
    .courses-responsive-table tbody td.courses-mobile-hide { display: none !important; }

    /* --- Filter toggle --- */
    .courses-filter-toggle-btn { display: flex !important; align-items: center; justify-content: space-between; }

    /* --- Typographie --- */
    .courses-date-day,
    .courses-date-month { font-size: 1.4em; }
    .courses-legend { flex-direction: column; align-items: flex-start; gap: .35em; }
    .courses-results-header { flex-direction: column; align-items: flex-start; gap: .5em; }

    /* --- View toggle (sessions) --- */
    #sessions-view-toggle { width: 100% !important; }
    #sessions-view-toggle .ui.buttons { width: 100% !important; display: flex !important; }
    #sessions-view-toggle .ui.button { flex: 1 !important; text-align: center !important; justify-content: center !important; }

    /* --- Tabs (event_show: Information / Sessions / Description) ---
       Fomantic tabular menu items overflow horizontally on smartphones (3rd
       tab clipped). Force a 3-column flex layout, stack icon + label
       vertically, shrink padding so the labels stay readable. */
    .courses-tabs { flex-wrap: nowrap !important; overflow-x: visible !important; }
    .courses-tabs .item {
        flex: 1 1 0 !important; min-width: 0 !important;
        padding: .55em .25em !important; font-size: .82em !important;
        text-align: center !important; justify-content: center !important;
        flex-direction: column !important; gap: .15em !important;
        white-space: normal !important; line-height: 1.15 !important;
    }
    .courses-tabs .item > i.icon { margin: 0 !important; font-size: 1.05em !important; }
    .courses-tabs .item > .ui.label { margin-left: .25em !important; padding: .25em .45em !important; }

    /* --- Event detail readability (event_show) ---
       Aligne tous les blocs sur la meme largeur (= largeur des boutons
       d'action en bas) en uniformisant le padding horizontal des segments
       imbriques. La liste d'infos passe en grille 2 colonnes pour mieux
       remplir la largeur disponible et reduire le scroll vertical. */
    .ui.segment .ui.bottom.attached.tab.segment {
        padding: .85em .75em !important;
    }
    .ui.segment .ui.bottom.attached.tab.segment > .ui.relaxed.list {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: .55em .8em !important;
        margin: 0 !important; padding: 0 !important;
    }
    .ui.segment .ui.bottom.attached.tab.segment > .ui.relaxed.list > .item {
        display: flex !important; align-items: flex-start !important;
        padding: .55em .6em !important;
        font-size: .95rem;
        line-height: 1.35;
        background: #fafafa;
        border: 1px solid rgba(34,36,38,.08) !important;
        border-radius: 6px;
        margin: 0 !important;
    }
    /* Item qui s'etend sur les 2 colonnes (adresse longue p.ex.) */
    .ui.segment .ui.bottom.attached.tab.segment > .ui.relaxed.list > .item.courses-info-full {
        grid-column: 1 / -1 !important;
    }
    .ui.segment .ui.bottom.attached.tab.segment > .ui.relaxed.list > .item > i.icon {
        font-size: 1em !important;
        margin: .15em .5em 0 0 !important;
        flex-shrink: 0;
    }
    .ui.segment .ui.bottom.attached.tab.segment > .ui.relaxed.list > .item > .content {
        flex: 1 1 auto; min-width: 0;
    }
    .ui.segment .ui.bottom.attached.tab.segment > .ui.relaxed.list > .item > .content > .header {
        font-size: .72em !important;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: #888 !important;
        margin-bottom: .2em !important;
        font-weight: 700 !important;
    }
    /* Reduit le padding horizontal du segment racine pour gagner ~12px
       de chaque cote — les blocs internes (tabs + tab content + actions)
       arrivent ainsi a la meme largeur que les boutons d'action. */
    .ui.segment {
        padding-left: .85em !important;
        padding-right: .85em !important;
    }
    /* H2 trop volumineux dans le segment : reduit a une taille lisible */
    .ui.segment > h2.ui.header { font-size: 1.25em !important; line-height: 1.3 !important; }
    .ui.segment > h2.ui.header > i.icon { font-size: 1em !important; }

    /* --- Cards --- */
    .courses-card .extra.content {
        display: flex !important; flex-direction: column !important;
        gap: .4em !important; padding: .75em !important;
    }
    .courses-card .extra.content .button,
    .courses-card .extra.content form .button { width: 100% !important; display: block !important; margin: 0 !important; text-align: center !important; }
    .courses-card .extra.content form,
    .courses-card .extra.content .courses-inline-form { width: 100% !important; display: block !important; }
    /* Phase 42 register dropdown : button + menu prennent toute la largeur */
    .courses-card .extra.content .ui.dropdown.button,
    .courses-actions .ui.dropdown.button { width: 100% !important; box-sizing: border-box !important; min-height: 42px !important; line-height: 1.4 !important; }
    .courses-card .extra.content .ui.dropdown.button .menu,
    .courses-actions .ui.dropdown.button .menu { left: 0 !important; right: 0 !important; min-width: 100% !important; }
    .courses-card .extra.content .ui.dropdown.button .menu .item,
    .courses-actions .ui.dropdown.button .menu .item { padding: .85em 1em !important; }
    .courses-card .meta { white-space: normal !important; overflow-wrap: break-word; font-size: .9em; }

    /* --- Action segments --- */
    /* On mobile the same flexbox container switches to a vertical stack,
       with each child taking the full width of the row. */
    .ui.segment.courses-actions,
    .courses-actions {
        flex-direction: column !important;
        align-items: stretch;
        text-align: center;
    }
    .courses-actions .ui.divider { margin: .5em 0 !important; }
    .courses-actions .button,
    .courses-actions a.ui.button,
    .courses-actions .courses-inline-form .button,
    .courses-actions .courses-inline-form a.ui.button {
        width: 100% !important;
        margin: 0 !important; text-align: center !important; box-sizing: border-box !important;
    }
    .courses-actions .courses-inline-form { width: 100% !important; margin: 0 !important; padding: 0 !important; }

    /* --- Unregister row --- */
    .courses-unregister-row { flex-direction: column !important; align-items: stretch !important; gap: .4em !important; }
    .courses-unregister-row .button { width: 100% !important; display: block !important; margin: 0 !important; }

    /* --- Touch targets --- */
    .ui.big.button,
    .ui.big.labeled.icon.button { min-height: 48px !important; }
    .ui.button,
    .ui.labeled.icon.button     { min-height: 42px !important; }
    .ui.tiny.button,
    .ui.mini.button             { min-height: 36px !important; }

    /* --- Formulaires --- */
    .ui.form .two.fields,
    .ui.form .three.fields { flex-direction: column !important; }
    .ui.form .two.fields > .field,
    .ui.form .three.fields > .field { width: 100% !important; margin-bottom: .6em !important; }
    .ui.form .field input[type="date"],
    .ui.form .field input[type="time"],
    .ui.form .field input[type="email"],
    .ui.form .field input[type="text"],
    .ui.form .field input[type="number"],
    .ui.form .field select,
    .ui.form .field .ui.dropdown { min-height: 44px !important; width: 100% !important; box-sizing: border-box !important; }
    .ui.form .field .ui.dropdown .text { line-height: 2.6 !important; }

    /* --- Inline fields : empilement vertical --- */
    .ui.form .inline.fields { flex-direction: column !important; align-items: stretch !important; gap: .5em !important; }
    .ui.form .inline.fields .field { width: 100% !important; margin-bottom: 0 !important; }
    .ui.form .inline.fields button,
    .ui.form .inline.fields .ui.button,
    .ui.form .inline.fields .ui.dropdown { width: 100% !important; }
    .ui.form .inline.fields button,
    .ui.form .inline.fields .ui.button { min-height: 44px !important; }
    .ui.form .inline.fields label { display: block; margin-bottom: .3em; }

    /* --- Fluid action input (cron URL) --- */
    .ui.fluid.action.input { flex-wrap: wrap; }
    .ui.fluid.action.input input { width: 100% !important; border-radius: .28rem !important; margin-bottom: .4em; }
    .ui.fluid.action.input .ui.button { width: 100% !important; border-radius: .28rem !important; min-height: 44px !important; }

    /* --- Tab menus (Mes inscriptions / Mes seances comme moniteur) :
       pleine largeur, onglets 50/50, libelles qui passent a la ligne
       si trop longs pour tenir sur un seul ecran (ex: "Mes seances
       comme moniteur"). --- */
    #my-sessions-tabs,
    #my-instructor-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
    }
    #my-sessions-tabs .item,
    #my-instructor-tabs .item {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        justify-content: center !important;
        text-align: center !important;
        flex-direction: column !important;
        align-items: center !important;
        padding: .7em .5em !important;
        font-size: .88em;
        white-space: normal !important;
        gap: .25em !important;
        overflow-wrap: anywhere;
    }
    #my-sessions-tabs .item i.icon,
    #my-instructor-tabs .item i.icon {
        margin: 0 !important;
        font-size: 1.1em;
    }
    .courses-tab-text {
        font-size: .82em;
        display: block;
        line-height: 1.2;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    /* --- Infoline --- */
    .infoline .ui.basic.horizontal.segments { flex-direction: column !important; }
    .infoline .ui.basic.fitted.segment { text-align: center !important; margin-bottom: .4em; }

    /* --- Stats cards: 2 par ligne, alignees avec les segments ---
       Fomantic donne par defaut a .ui.cards un margin horizontal negatif
       (-.875em) et a chaque .card un margin .5em — les cartes debordent
       legerement du parent et n'ont pas la meme largeur visible que les
       segments (.ui.segment) en dessous. On force margin: 0 partout et on
       utilise `gap` pour l'espacement inter-cartes. */
    .courses-stats-cards.cards {
        margin: 0 !important;
        gap: .6em !important;
    }
    .courses-stats-cards.four.cards .card {
        min-width: calc(50% - .3em) !important;
        flex: 1 1 calc(50% - .3em) !important;
        margin: 0 !important;
    }
    .courses-stat-num { font-size: 1.8rem; }

    /* --- Fill rate --- */
    .courses-fill-row .ui.progress { min-width: 40px; }
    .courses-fill-pct { min-width: 2.8em; }

    /* --- Stats: filter row (From / Until / Filter button) ---
       Empile verticalement, chaque champ pleine largeur. Inputs date
       avec hauteur tactile 44px. */
    .courses-filter-row { flex-direction: column !important; align-items: stretch !important; }
    /* Mobile: re-stack label above input (the desktop inline rule is overridden here). */
    .courses-filter-row .field { width: 100% !important; margin: 0 0 .5em 0 !important; flex-direction: column !important; align-items: stretch !important; gap: .25em !important; }
    .courses-filter-row .field input,
    .courses-filter-row .field .button { width: 100% !important; min-height: 44px !important; box-sizing: border-box !important; }

    /* --- Filter shortcuts --- */
    .courses-filter-shortcuts { display: flex !important; flex-wrap: wrap !important; gap: .3em !important; margin-top: .4em !important; }
    .courses-filter-shortcuts .ui.mini.button { flex: 1 1 calc(50% - .3em) !important; min-height: 38px !important; }

    /* --- Stats: progress bar dans card layout des fill rates ---
       En card layout, la cellule devient flex avec le label a gauche.
       Le contenu .courses-fill-row doit prendre la place restante. */
    .courses-responsive-table tbody td .courses-fill-row { flex: 1 1 auto; min-width: 0; }
    .courses-responsive-table tbody td .courses-fill-row .ui.progress { flex: 1 1 auto; min-width: 80px !important; }

    /* --- Stats: cellule "Events" peut etre longue (liste de cours) ---
       Autorise le wrap pour que le label reste a gauche. */
    .courses-responsive-table tbody td.courses-events-cell { flex-wrap: wrap; }
    .ui.form .courses-filter-btns { display: flex !important; gap: .5em !important; margin-top: .5em !important; }
    .ui.form .courses-filter-btns .button { flex: 1 !important; min-height: 44px !important; }

    /* --- Cron --- */
    .courses-cron-input { font-size: .72em !important; }
    .courses-cron-note code { overflow-wrap: anywhere; font-size: .82em; }

    /* --- Closure dates table : passage en card layout sur mobile ---
       Chaque ligne devient une carte ou les 5 champs (From / Until / Reason /
       Duration / Status) s'empilent verticalement avec leur libelle a gauche.
       Override la regle tablet qui cachait Duration (≤1024px) car ici chaque
       "colonne" devient une ligne de la carte, on a la place de tout afficher. */
    #closure-table { display: block !important; border: none !important; box-shadow: none !important; }
    #closure-table thead { display: none !important; }
    #closure-table tbody { display: block !important; }
    #closure-table tbody tr.closure-row {
        display: block !important; margin-bottom: 1em !important; padding: 0 !important;
        border: 1px solid rgba(34,36,38,.15) !important; border-radius: 6px !important;
        background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.07) !important; overflow: hidden;
    }
    #closure-table tbody tr.closure-row.warning {
        border-color: #e0b4b4 !important; background: #fff6f6 !important;
    }
    #closure-table tbody tr.closure-row td {
        display: flex !important; align-items: center !important; justify-content: space-between !important;
        padding: .55em .85em !important; border-top: none !important;
        border-bottom: 1px solid rgba(34,36,38,.06) !important;
        min-height: 44px; gap: .6em; width: auto !important; text-align: left !important;
    }
    #closure-table tbody tr.closure-row td:last-child { border-bottom: none !important; }
    /* Re-affiche la cellule Duration (cachee par la regle ≤1024px) */
    #closure-table tbody tr.closure-row td:nth-child(4) { display: flex !important; }
    #closure-table tbody tr.closure-row td[data-label]::before {
        content: attr(data-label); font-weight: 700; font-size: .78em; color: #999;
        text-transform: uppercase; letter-spacing: .04em; flex-shrink: 0; min-width: 6em;
    }
    /* Les inputs prennent la place restante a droite du libelle */
    #closure-table tbody tr.closure-row td input.closure-from-input,
    #closure-table tbody tr.closure-row td input.closure-to-input,
    #closure-table tbody tr.closure-row td input.closure-label-input {
        flex: 1 1 auto !important; width: auto !important; min-width: 0 !important;
        min-height: 44px !important;
    }
    /* Cellule actions : pas de libelle, bouton aligne a droite, fond grise */
    #closure-table tbody tr.closure-row td.closure-actions {
        justify-content: flex-end !important; background: #fafafa;
    }
    #closure-table tbody tr.closure-row td.closure-actions::before { content: none !important; }
    /* Ligne "vide" (No closure period configured) : reste un bloc lisible
       quand aucune fermeture n'est configuree. */
    #closure-table tbody tr#closure-empty-row { display: block; }
    #closure-table tbody tr#closure-empty-row td {
        display: block !important; padding: 1em !important; text-align: center !important;
        border: none !important;
    }
    /* Masquage independant du style inline : des qu'au moins une .closure-row
       existe dans le tbody, la ligne vide est cachee. Evite le piege du
       display:block !important qui ecrasait le style="display:none" pose par
       Twig + jQuery .toggle(). :has() est supporte dans tous les navigateurs
       majeurs depuis fin 2023. */
    #closure-table tbody:has(tr.closure-row) tr#closure-empty-row { display: none !important; }

    /* --- Segments --- */
    .ui.segment { padding: .9em !important; }
    .ui.basic.right.aligned.segment { text-align: center !important; }

    /* --- Session header compact --- */
    .ui.inverted.segment h2.ui.inverted.header { font-size: 1.25em !important; }
    .ui.inverted.segment h2.ui.inverted.header .sub.header { font-size: .88em !important; line-height: 1.7 !important; }
    .courses-mobile-br { display: inline !important; }
    /* Header action buttons revert to icon-only on mobile */
    .courses-session-header-flex .courses-session-header-actions .courses-header-action-btn > i.icon { margin: 0 !important; }
    .courses-header-action-label { display: none !important; }

    /* --- Member-inline: keep remove (X) button inline with the name on mobile --- */
    .courses-member-inline { flex-wrap: wrap; }
    .courses-remove-form { margin-left: auto !important; width: auto !important; flex-shrink: 0; }

    /* --- Accordion titles --- */
    .ui.accordion .title { padding: .85em 1em !important; min-height: 44px; display: flex !important; align-items: center !important; }

    /* --- Mail template actions --- */
    .mailtpl-actions { flex-direction: column; align-items: stretch; }
    .mailtpl-actions .button,
    .courses-save-right .button { width: 100% !important; }
    .courses-save-right { text-align: center !important; }

    /* --- Section header: stack title above action buttons --- */
    .courses-section-header { flex-direction: column; align-items: stretch !important; }
    .courses-section-header .ui.header { margin-bottom: 0; }
    .courses-section-actions { width: 100%; }
    .courses-section-actions .ui.button { flex: 1; min-width: 0; }

    /* --- Fixed-width inputs become fluid --- */
    .courses-input-narrow,
    .courses-input-medium { width: 100% !important; }

    /* --- Registered-members table: one member per line on mobile --- */
    table.ui.table.courses-attendance-list { display: block !important; border: none !important; }
    table.ui.table.courses-attendance-list thead { display: none !important; }
    table.ui.table.courses-attendance-list tbody { display: block !important; }
    table.ui.table.courses-attendance-list tbody tr {
        display: flex !important; flex-wrap: nowrap !important; align-items: center !important;
        gap: .5em; padding: .5em .75em !important; margin-bottom: .4em !important;
        border: 1px solid rgba(34,36,38,.15) !important; border-radius: 6px; background: #fff;
        box-shadow: 0 1px 3px rgba(0,0,0,.06);
    }
    table.ui.table.courses-attendance-list tbody td {
        display: inline-block !important; padding: 0 !important; border: none !important;
        min-height: auto !important; width: auto !important;
    }
    table.ui.table.courses-attendance-list tbody td::before { display: none !important; content: none !important; }
    /* Member cell takes available space; truncate if too long */
    table.ui.table.courses-attendance-list .courses-attlist-member {
        flex: 1 1 auto !important; min-width: 0 !important;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    /* Nickname column and date column hidden on mobile (nickname surfaced inline) */
    table.ui.table.courses-attendance-list .courses-attlist-nick,
    table.ui.table.courses-attendance-list .courses-attlist-date { display: none !important; }
    /* Inline nickname (small grey text next to the name) */
    .courses-attlist-nick-inline {
        display: inline !important; margin-left: .35em;
        font-size: .82em; color: #888;
    }
    .courses-attlist-nick-inline i.icon { margin-right: .15em !important; opacity: .7; }
    /* Attendance dropdown anchored to the right, compact width */
    table.ui.table.courses-attendance-list .courses-attendance-cell { flex: 0 0 auto !important; }
    table.ui.table.courses-attendance-list .courses-attendance-cell .ui.dropdown {
        min-width: 110px !important; min-height: 36px; font-size: .85em;
    }

    /* --- Modal action buttons stack full-width --- */
    .ui.modal > .actions { display: flex !important; flex-direction: column; gap: .4em; }
    .ui.modal > .actions .button,
    .ui.modal > .actions form,
    .ui.modal > .actions .courses-inline-form { width: 100% !important; margin: 0 !important; }
    .ui.modal > .actions form .button { width: 100% !important; }

    /* --- Events list: each row becomes a true card on mobile ---
       Layout per card:
         [Name H4 with link]
         [Status badge]
         Location: ...
         Capacity: ...
         ─────────
         [Full-width button: View]
         [Full-width button: Edit]
         [Full-width button: Validate / Reject / Delete] */
    .courses-events-card-table { display: block !important; border: none !important; box-shadow: none !important; }
    .courses-events-card-table thead { display: none !important; }
    .courses-events-card-table tbody { display: block !important; }
    .courses-events-card-table tbody tr {
        display: block !important;
        margin-bottom: 1em !important;
        padding: 1em !important;
        border: 1px solid rgba(34,36,38,.15) !important;
        border-radius: 6px !important;
        background: #fff;
        box-shadow: 0 1px 4px rgba(0,0,0,.07) !important;
    }
    .courses-events-card-table tbody tr.courses-pending { background-color: #fffde7 !important; }
    .courses-events-card-table tbody td {
        display: block !important;
        padding: .2em 0 !important;
        border: none !important;
        min-height: 0 !important;
    }
    .courses-events-card-table tbody td::before { content: none !important; display: none !important; }
    .courses-events-card-table tbody td.courses-mobile-hide { display: none !important; }
    /* Title (event name) */
    .courses-events-card-table tbody td.courses-event-name {
        font-size: 1.15em;
        font-weight: 600;
        margin-bottom: .4em;
        padding-bottom: .4em !important;
        border-bottom: 1px solid rgba(34,36,38,.08) !important;
    }
    /* Status badge breathing room */
    .courses-events-card-table tbody td.courses-event-status { margin: .4em 0 !important; }
    /* Meta lines: small grey, with inline label */
    .courses-events-card-table tbody td.courses-event-meta {
        font-size: .9em;
        color: #666;
        padding: .15em 0 !important;
    }
    .courses-events-card-table tbody td.courses-event-meta::before {
        display: inline !important;
        content: attr(data-label) " : ";
        font-weight: 600;
        color: #888;
        margin-right: .25em;
    }
    /* Actions row: full-width labeled buttons stacked vertically */
    .courses-events-card-table tbody td.actions_row {
        display: flex !important;
        flex-direction: column !important;
        gap: .4em !important;
        margin-top: .8em !important;
        padding-top: .8em !important;
        border-top: 1px solid rgba(34,36,38,.08) !important;
        align-items: stretch !important;
        text-align: left !important;
    }
    .courses-events-card-table tbody td.actions_row .courses-inline-form {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
    }
    .courses-events-card-table .courses-event-action {
        display: flex !important;
        align-items: center !important;
        gap: .6em !important;
        padding: .75em 1em !important;
        background: #f8f8f9 !important;
        border: 1px solid rgba(34,36,38,.15) !important;
        border-radius: .28em !important;
        color: rgba(0,0,0,.87) !important;
        text-decoration: none !important;
        min-height: 44px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        text-align: left !important;
        font-weight: 400 !important;
        font-size: 1em !important;
        line-height: 1.4 !important;
        cursor: pointer;
    }
    .courses-events-card-table .courses-event-action > i.icon {
        margin: 0 !important;
        font-size: 1.15em !important;
        flex-shrink: 0;
        width: 1.4em;
        text-align: center;
    }
    /* Tooltip popup is replaced by the inline label on mobile */
    .courses-events-card-table .courses-event-action .ui.special.popup { display: none !important; }

    /* --- Filter form action buttons (browse tabs) --- */
    .courses-filter-actions .button { flex: 1 1 auto; }

    /* --- Stats page polish ---
       Bigger charts (axis labels legible), tighter summary cards,
       first cell of each stats table becomes a header strip, "Events"
       cell wraps as a block under its label, "Quick select:" label on
       its own line. */
    .courses-chart-container { min-height: 240px; }

    .courses-stats-cards.cards .courses-stat-content {
        padding: .85em .4em !important;
    }
    .courses-stats-cards.cards .courses-stat-content > i.icon {
        font-size: 1.6em !important;
        margin: 0 0 .15em !important;
    }
    .courses-stats-cards.cards .courses-stat-num {
        font-size: 1.7rem !important;
        margin: 0 0 .1em !important;
        line-height: 1.1 !important;
    }
    .courses-stats-cards.cards .courses-stat-sub {
        font-size: .78em !important;
        line-height: 1.15 !important;
        color: #555;
    }

    #fill-rate-table tbody td:first-child,
    #recent-activity-table tbody td:first-child,
    #active-members-table tbody td:first-child,
    #inactive-members-table tbody td:first-child {
        font-weight: 600;
        font-size: 1em;
        background: #f7f8f9 !important;
        justify-content: flex-start !important;
        padding: .65em .9em !important;
        color: #2d2d2d;
    }
    #fill-rate-table tbody td:first-child::before,
    #recent-activity-table tbody td:first-child::before,
    #active-members-table tbody td:first-child::before,
    #inactive-members-table tbody td:first-child::before {
        display: none !important;
        content: none !important;
    }

    #fill-rate-table tbody td,
    #recent-activity-table tbody td,
    #active-members-table tbody td,
    #inactive-members-table tbody td {
        padding: .5em .9em !important;
        min-height: 38px !important;
    }

    #active-members-table tbody td.courses-events-cell {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: .25em !important;
        font-size: .88em;
        color: #555;
    }

    .courses-filter-shortcuts > .ui.small.grey.text {
        flex: 1 0 100% !important;
        margin: 0 0 .15em !important;
        font-size: .85em;
        color: #888;
    }
}

/* =========================================================
   RESPONSIVE ≤ 480px — téléphone portrait
   ========================================================= */
@media only screen and (max-width: 480px) {
    .courses-date-day,
    .courses-date-month { font-size: 1.2em; }
    .courses-stat-num { font-size: 1.6rem; }

    /* Stats: 1 par ligne */
    .courses-stats .statistic,
    .courses-stats-cards.four.cards .card { min-width: 100% !important; flex: 1 1 100% !important; margin-left: 0 !important; margin-right: 0 !important; }

    /* Cards: padding réduit */
    .ui.card .content { padding: .75em !important; }
    .ui.card .extra.content { padding: .6em .75em !important; }

    /* Session header */
    .ui.inverted.segment h2.ui.inverted.header { font-size: 1.1em !important; }
    .ui.inverted.segment h2.ui.inverted.header .sub.header { font-size: .82em !important; }

    /* Grid + Segment: padding minimal */
    .ui.stackable.grid > .column:not(.row) { padding: .5em 0 !important; }
    .ui.segment { padding: .7em .75em !important; }

    .courses-chart-container { min-height: 180px; }
}

/* =========================================================
   TOUCH DEVICES — disable hover animations
   ========================================================= */
@media (hover: none) {
    .courses-card { transition: none !important; }
    .courses-card:hover { box-shadow: none !important; transform: none !important; }
    .mailtpl-var-pill { transition: none !important; }
    .courses-fill-row .ui.progress > .bar { transition: none !important; }
}

/* =========================================================
   FILTER FORM — plain native <select>s + action buttons
   Used on my_registrations and my_instructor_sessions browse tabs.
   Plain selects (not Fomantic UI) ensure reliable change events
   across all browsers and devices.
   ========================================================= */
.courses-native-select {
    width: 100%;
    padding: .67em 1em;
    border: 1px solid rgba(34, 36, 38, .15);
    border-radius: .28em;
    background: #fff;
    font-size: 1em;
    line-height: 1.21;
    color: rgba(0, 0, 0, .87);
}
.courses-native-select:focus {
    border-color: #85b7d9;
    outline: none;
}
.courses-filter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5em;
    align-items: center;
}
/* Accessibility: content available to screen readers but visually hidden. */
.courses-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}