/* ═══════════════════════════════════════════════════════════
   FRENCHWAVE — Feuille de style globale
   Thème sombre par défaut, thème clair via [data-theme="light"]
   ═══════════════════════════════════════════════════════════ */

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

/* ══════════════════════════════════════════
   Variables — Thème sombre (défaut)
   ══════════════════════════════════════════ */
:root {
    color-scheme: dark;

    /* Palettes inversées : --white = texte clair / CTA bg, --black = fond sombre / CTA texte */
    --black:  #0a0a0a;
    --white:  #f0f0f0;

    /* Surfaces */
    --surface:          #111111;
    --surface-2:        #181818;
    --surface-elevated: #1a1a1a;
    --topnav-bg:        #0d0d0d;
    --dropdown-bg:      #1a1a1a;
    --suggestions-bg:   #1e1e1e;

    /* Texte */
    --grey:       #666666;
    --grey-light: #999999;

    /* Bordures */
    --border:       rgba(255,255,255,0.07);
    --border-mid:   rgba(255,255,255,0.12);
    --border-focus: rgba(255,255,255,0.30);
    --border-strong:rgba(255,255,255,0.50);

    /* Accent — actif (vert) */
    --active:        #4ade80;
    --active-bg:     rgba(74,222,128,0.08);
    --active-border: rgba(74,222,128,0.20);
    --active-border-strong: rgba(74,222,128,0.35);
    --active-glow:   0 0 6px #4ade80;

    /* Accent — brouillon (ambre) */
    --draft:        #fbbf24;
    --draft-bg:     rgba(251,191,36,0.08);
    --draft-border: rgba(251,191,36,0.30);

    /* Médailles du podium — le seul endroit où une couleur porte un rang plutôt qu'un état.
       Elles vivent en variables comme le reste : le doré du thème sombre, posé tel quel sur un
       fond clair, se lit à peine. */
    --medal-1:    #facc15;
    --medal-1-bg: rgba(250,204,21,0.16);
    --medal-2:    #cbd5e1;
    --medal-2-bg: rgba(203,213,225,0.16);
    --medal-3:    #d97706;
    --medal-3-bg: rgba(217,119,6,0.16);

    /* Autres statuts */
    --archived: #444444;
    --error:    #e05a5a;
    --danger:   #f87171;
    --danger-bg:     rgba(248,113,113,0.06);
    --danger-border: rgba(248,113,113,0.30);

    /* Ombres & overlays */
    --modal-backdrop: rgba(0,0,0,0.60);
    --modal-shadow:   0 24px 60px rgba(0,0,0,0.70);
    --dropdown-shadow:0 12px 40px rgba(0,0,0,0.55);

    /* Fonds flottants */
    --hover-bg:        rgba(255,255,255,0.03);
    --hover-bg-strong: rgba(255,255,255,0.04);
    --weekend-bg:      rgba(255,255,255,0.015);
    --cycle-active-bg: rgba(74,222,128,0.04);
    --sortable-over-bg:rgba(255,255,255,0.03);
    --occupied-bg:     rgba(255,255,255,0.03);
}

/* ══════════════════════════════════════════
   Variables — Thème clair
   ══════════════════════════════════════════ */
[data-theme="light"] {
    color-scheme: light;

    /* Inversion : --white = texte sombre / CTA bg sombre, --black = fond clair / CTA texte clair */
    --black:  #f0f0f0;
    --white:  #111111;

    --surface:          #ffffff;
    --surface-2:        #f2f2f2;
    --surface-elevated: #ffffff;
    --topnav-bg:        #fafafa;
    --dropdown-bg:      #ffffff;
    --suggestions-bg:   #ffffff;

    --grey:       #888888;
    --grey-light: #555555;

    --border:        rgba(0,0,0,0.09);
    --border-mid:    rgba(0,0,0,0.15);
    --border-focus:  rgba(0,0,0,0.25);
    --border-strong: rgba(0,0,0,0.40);

    --active:        #15803d;
    --active-bg:     rgba(21,128,61,0.08);
    --active-border: rgba(21,128,61,0.22);
    --active-border-strong: rgba(21,128,61,0.38);
    --active-glow:   0 0 6px rgba(21,128,61,0.4);

    --draft:        #b45309;
    --draft-bg:     rgba(180,83,9,0.07);
    --draft-border: rgba(180,83,9,0.28);

    --medal-1:    #a16207;
    --medal-1-bg: rgba(202,138,4,0.16);
    --medal-2:    #475569;
    --medal-2-bg: rgba(100,116,139,0.16);
    --medal-3:    #9a3412;
    --medal-3-bg: rgba(180,83,9,0.14);

    --archived: #aaaaaa;
    --error:    #dc2626;
    --danger:   #dc2626;
    --danger-bg:     rgba(220,38,38,0.05);
    --danger-border: rgba(220,38,38,0.25);

    --modal-backdrop:  rgba(0,0,0,0.35);
    --modal-shadow:    0 24px 60px rgba(0,0,0,0.15);
    --dropdown-shadow: 0 12px 40px rgba(0,0,0,0.12);

    --hover-bg:        rgba(0,0,0,0.03);
    --hover-bg-strong: rgba(0,0,0,0.05);
    --weekend-bg:      rgba(0,0,0,0.018);
    --cycle-active-bg: rgba(21,128,61,0.04);
    --sortable-over-bg:rgba(0,0,0,0.03);
    --occupied-bg:     rgba(0,0,0,0.03);
}

/* ══════════════════════════════════════════
   Base
   ══════════════════════════════════════════ */
html, body {
    height: 100%;
    background: var(--black);
    color: var(--white);
    font-family: 'Helvetica Neue', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* ══════════════════════════════════════════
   Bouton de changement de thème
   ══════════════════════════════════════════ */
.btn-theme {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: none;
    border: 1px solid var(--border-mid);
    border-radius: 2px;
    color: var(--grey);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    flex-shrink: 0;
}

.btn-theme:hover { color: var(--white); border-color: var(--border-focus); }
.btn-theme svg   { width: 14px; height: 14px; }

/* Sombre → icône soleil visible (pour passer au clair) */
.btn-theme .icon-moon { display: none; }
.btn-theme .icon-sun  { display: block; }

/* Clair → icône lune visible (pour passer au sombre) */
[data-theme="light"] .btn-theme .icon-sun  { display: none; }
[data-theme="light"] .btn-theme .icon-moon { display: block; }

/* ══════════════════════════════════════════
   Layout global
   ══════════════════════════════════════════ */
.page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Variante page d'accueil : conteneur pour le fond décoratif */
.page--home {
    position: relative;
    overflow: hidden;
}

.page--home > header,
.page--home > main,
.page--home > footer {
    position: relative;
    z-index: 1;
}

/* ── Fond décoratif — "La Grande Vague de Kanagawa" (Hokusai, 1831, domaine public) ──
   Silhouette extraite de l'estampe originale, appliquée en masque CSS : la couleur
   suit donc automatiquement --white (inversée entre thème sombre et thème clair). */
.page-wave {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.page-wave::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--white);
    opacity: 0.05;
    mask-image: url("../images/wave-hokusai-sOfxvxj.png");
    mask-repeat: no-repeat;
    mask-position: bottom center;
    mask-size: 100% auto;
    -webkit-mask-image: url("../images/wave-hokusai-sOfxvxj.png");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: bottom center;
    -webkit-mask-size: 100% auto;
}

/* ══════════════════════════════════════════
   Header public (home + login)
   ══════════════════════════════════════════ */
.page > header {
    display: flex;
    align-items: center;
    padding: 1.5rem 2.5rem;
    border-bottom: 1px solid var(--border);
    gap: 1rem;
}

.page > header .header-end {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.logo {
    font-size: 0.8rem;
    font-weight: 900;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--white);
}

.header-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--grey);
    margin-left: auto;
}

/* ── Bouton connexion (home) ── */
.btn-login {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--white);
    border: 1px solid var(--border);
    padding: 0.55rem 1.2rem;
    border-radius: 2px;
    text-decoration: none;
    transition: border-color 0.2s, opacity 0.2s;
    opacity: 0.6;
}

.btn-login:hover { border-color: var(--border-focus); opacity: 0.85; }

/* ── Hero ── */
.hero {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 4rem 2rem;
    gap: 2rem;
}

.hero-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--grey);
}

.hero-title {
    font-size: clamp(3.5rem, 12vw, 9rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1;
    text-transform: uppercase;
}

.hero-tagline {
    font-size: clamp(0.9rem, 2vw, 1.05rem);
    color: var(--grey);
    max-width: 36ch;
    line-height: 1.7;
}

.divider {
    width: 1px;
    height: 60px;
    background: var(--border);
    margin: 0 auto;
}

/* ── Bouton Instagram ── */
.btn-instagram {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.5rem;
    padding: 0.85rem 1.8rem;
    background: var(--white);
    color: var(--black);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 2px;
    transition: opacity 0.2s;
}

.btn-instagram:hover { opacity: 0.85; }
.btn-instagram svg   { width: 16px; height: 16px; flex-shrink: 0; }

/* ── Footer public ── */
.page > footer {
    text-align: center;
    padding: 1.5rem;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    color: var(--grey);
    border-top: 1px solid var(--border);
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.4rem 1.25rem;
    margin-bottom: 0.9rem;
}

.footer-links a {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--grey-light);
    text-decoration: none;
    transition: color 0.2s;
}

.footer-links a:hover { color: var(--white); }

.footer-copy {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    color: var(--grey);
}

/* ══════════════════════════════════════════
   Pages légales
   Mentions légales, CGU/CGV, confidentialité, contact — templates/legal/.
   Colonne de lecture étroite : ce sont des textes longs, lus en continu et
   rarement en diagonale, la largeur pleine page les rendrait illisibles.
   ══════════════════════════════════════════ */
.legal {
    flex: 1;
    width: 100%;
    max-width: 780px;
    margin: 0 auto;
    padding: 3rem 1.5rem 4rem;
}

.legal-head { margin-bottom: 2.5rem; }

.legal-eyebrow {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--active);
    margin-bottom: 0.75rem;
}

.legal-title {
    font-size: clamp(1.6rem, 3.5vw, 2.4rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 0.6rem;
}

.legal-updated {
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: var(--grey);
}

.legal-lead {
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--grey-light);
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border);
}

.legal-section {
    padding-top: 2.25rem;
    margin-bottom: 0.5rem;
}

.legal-section + .legal-section { border-top: 1px solid var(--border); }

.legal-section h2 {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--white);
    margin-bottom: 1rem;
}

.legal-section h3 {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--grey-light);
    margin: 1.6rem 0 0.6rem;
}

.legal-section p {
    font-size: 0.88rem;
    line-height: 1.75;
    color: var(--grey-light);
    margin-bottom: 0.9rem;
}

.legal-section ul {
    list-style: none;
    margin-bottom: 1rem;
}

.legal-section ul li {
    position: relative;
    font-size: 0.88rem;
    line-height: 1.7;
    color: var(--grey-light);
    padding: 0.28rem 0 0.28rem 1.1rem;
}

.legal-section ul li::before {
    content: '—';
    position: absolute;
    left: 0;
    color: var(--grey);
}

.legal-section strong { color: var(--white); font-weight: 600; }

.legal-section a,
.legal-lead a {
    color: var(--active);
    text-decoration: none;
    border-bottom: 1px solid var(--active-border-strong);
}

.legal-section a:hover,
.legal-lead a:hover { border-bottom-color: var(--active); }

.legal-muted { color: var(--grey); font-size: 0.78rem; }

.legal-section code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.8em;
    color: var(--white);
    background: var(--hover-bg-strong);
    padding: 0.1rem 0.35rem;
    border-radius: 2px;
}

/* Valeur d'identité juridique non renseignée — voir legal/_macros.html.twig.
   Volontairement criard : tant que la mention n'est pas comblée, elle doit gêner. */
.legal-todo {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--draft);
    background: var(--draft-bg);
    border: 1px dashed var(--draft-border);
    padding: 0.1rem 0.45rem;
    border-radius: 2px;
}

/* ── Listes de définitions (identité de l'éditeur, hébergeur) ── */
.legal-dl {
    display: grid;
    grid-template-columns: minmax(9rem, 14rem) 1fr;
    gap: 0.55rem 1.25rem;
    margin-bottom: 1rem;
}

.legal-dl dt {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--grey);
    padding-top: 0.1rem;
}

.legal-dl dd {
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--grey-light);
}

/* ── Encadrés ── */
.legal-callout {
    border-left: 2px solid var(--active-border-strong);
    background: var(--active-bg);
    padding: 1rem 1.15rem 0.25rem;
    border-radius: 2px;
    margin: 1.25rem 0;
}

.legal-callout--warn {
    border-left-color: var(--draft-border);
    background: var(--draft-bg);
}

.legal-callout p { margin-bottom: 0.75rem; }

/* ── Tableaux (finalités, sous-traitants, durées, cookies) ──
   Enveloppés dans .legal-table-wrap : sous 480 px un tableau de trois colonnes
   déborde, et c'est le tableau qui doit défiler, jamais la page entière. */
.legal-table-wrap {
    overflow-x: auto;
    margin: 1rem 0 1.25rem;
    border: 1px solid var(--border);
    border-radius: 2px;
}

.legal-table {
    width: 100%;
    border-collapse: collapse;
}

/* Seuls les tableaux d'au moins trois colonnes imposent une largeur minimale et
   défilent donc sur mobile. Ceux à deux colonnes (durées de conservation) tiennent
   dans 390 px : leur infliger un défilement horizontal serait gratuit. */
.legal-table:has(thead th:nth-child(3)) { min-width: 33rem; }

.legal-table th {
    text-align: left;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--grey);
    background: var(--surface);
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid var(--border-mid);
    white-space: nowrap;
}

.legal-table td {
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--grey-light);
    padding: 0.7rem 0.9rem;
    vertical-align: top;
    border-bottom: 1px solid var(--border);
}

.legal-table tbody tr:last-child td { border-bottom: none; }
.legal-table tbody tr:hover { background: var(--hover-bg); }

/* ── Formulaire type de rétractation (CGV) ── */
.legal-form-model {
    border: 1px dashed var(--border-mid);
    border-radius: 2px;
    padding: 1.15rem;
    margin: 1.25rem 0;
}

.legal-form-model-title {
    font-size: 0.68rem !important;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--grey);
    margin-bottom: 0.85rem !important;
}

.legal-form-model p { font-size: 0.82rem; }

/* ── Navigation entre pages légales, en pied d'article ── */
.legal-crosslinks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}

.legal-crosslinks a {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--grey);
    text-decoration: none;
    transition: color 0.2s;
}

.legal-crosslinks a:hover { color: var(--white); }

@media (max-width: 560px) {
    .legal { padding: 2rem 1.15rem 3rem; }
    .legal-dl { grid-template-columns: 1fr; gap: 0.15rem; }
    .legal-dl dd { margin-bottom: 0.75rem; }
}

/* ── Consentement précontractuel au paiement (espace athlète) ──
   Cases d'acceptation des CGV et de renonciation au droit de rétractation :
   elles vivent dans le formulaire de checkout, au-dessus du bouton, donc lues
   avant la commande et non après. */
.prog-checkout-form {
    flex-direction: column;
    align-items: stretch;
    gap: 0.7rem;
}

/* Neutralise la règle globale `label` (majuscules, interlettrage large, gras) :
   elle convient à des étiquettes de champ d'une ou deux mots, pas à deux phrases
   contractuelles que l'abonné doit pouvoir lire avant de payer. */
.consent-line {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    font-size: 0.74rem;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    line-height: 1.55;
    color: var(--grey-light);
    cursor: pointer;
}

.consent-line input[type="checkbox"] {
    flex-shrink: 0;
    margin-top: 0.15rem;
    width: 0.95rem;
    height: 0.95rem;
    accent-color: var(--active);
    cursor: pointer;
}

.consent-line a {
    color: var(--active);
    text-decoration: none;
    border-bottom: 1px solid var(--active-border-strong);
}

.consent-line a:hover { border-bottom-color: var(--active); }

/* Même case, sur le formulaire d'inscription : elle a besoin d'un peu d'air avant
   le bouton de soumission, que la carte de checkout gérait déjà via son `gap`. */
.field-consent { margin: 0.25rem 0 1.25rem; }

/* ══════════════════════════════════════════
   Formulaire de connexion
   ══════════════════════════════════════════ */
.login-card {
    width: 100%;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.login-header               { display: flex; flex-direction: column; gap: 0.4rem; }
.login-header h1            { font-size: 1.6rem; font-weight: 900; letter-spacing: -0.02em; text-transform: uppercase; }
.login-header p             { font-size: 0.8rem; color: var(--grey); letter-spacing: 0.04em; }

.alert-error {
    font-size: 0.78rem;
    color: var(--error);
    border: 1px solid rgba(224,90,90,0.3);
    padding: 0.75rem 1rem;
    border-radius: 2px;
    letter-spacing: 0.02em;
}

.alert-success {
    font-size: 0.78rem;
    color: #4ade80;
    border: 1px solid rgba(74,222,128,0.3);
    padding: 0.75rem 1rem;
    border-radius: 2px;
    letter-spacing: 0.02em;
}

.back-link           { text-align: center; font-size: 0.72rem; color: var(--grey); letter-spacing: 0.06em; }
.back-link a         { color: var(--white); text-decoration: none; border-bottom: 1px solid var(--border); padding-bottom: 1px; transition: border-color 0.2s; }
.back-link a:hover   { border-color: var(--white); }

/* ══════════════════════════════════════════
   Formulaires (champs)
   ══════════════════════════════════════════ */
.form-fields { display: flex; flex-direction: column; gap: 1rem; }

.field                { display: flex; flex-direction: column; gap: 0.4rem; }
.field label,
label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--grey);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
textarea,
select {
    background: var(--surface);
    border: 1px solid var(--border-mid);
    color: var(--white);
    padding: 0.75rem 0.9rem;
    font-size: 0.9rem;
    font-family: inherit;
    border-radius: 8px;
    outline: none;
    transition: border-color 0.2s;
    width: 100%;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
    border-color: var(--border-focus);
}

input[type="email"]::placeholder,
input[type="password"]::placeholder,
input[type="text"]::placeholder,
input[type="url"]::placeholder,
textarea::placeholder {
    color: var(--grey);
}

textarea { resize: vertical; }
select   { appearance: none; cursor: pointer; }
select option { background: var(--surface-elevated); }

.field-hint   { font-size: 0.68rem; color: var(--grey); letter-spacing: 0.03em; }
.field-errors { display: flex; flex-direction: column; gap: 0.25rem; }
.field-error  { font-size: 0.7rem; color: var(--error); letter-spacing: 0.03em; }

.char-counter           { font-size: 0.65rem; color: var(--grey); text-align: right; letter-spacing: 0.04em; transition: color 0.15s; }
.char-counter.near-limit{ color: var(--draft); }
.char-counter.at-limit  { color: var(--error); }

.select-wrapper          { position: relative; }
.select-wrapper::after   {
    content: '';
    position: absolute;
    right: 1rem; top: 50%; transform: translateY(-50%);
    width: 0; height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--grey);
    pointer-events: none;
}

/* ── Form group (modaux) ── */
.form-group              { display: flex; flex-direction: column; gap: 0.35rem; }
.form-group label        { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey); }

.form-group input[type="text"],
.form-group input[type="date"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="number"],
.form-group textarea,
.form-group select {
    background: var(--surface);
    border: 1px solid var(--border-mid);
    border-radius: 8px;
    color: var(--white);
    font-size: 0.8rem;
    padding: 0.55rem 0.75rem;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.15s;
    font-family: inherit;
}

.form-group input[type="text"]:focus,
.form-group input[type="date"]:focus,
.form-group input[type="email"]:focus,
.form-group input[type="password"]:focus,
.form-group input[type="number"]:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--border-focus);
}

.form-group textarea { resize: none; overflow-y: hidden; }
.form-group select   { appearance: none; cursor: pointer; }
.form-group .form-error { font-size: 0.7rem; color: var(--danger); margin-top: 0.2rem; }

/* Page de création de programmation */
.form-page                { max-width: 600px; }
.form-header              { margin-bottom: 2.5rem; }
.form-title               { font-size: 1.4rem; font-weight: 900; letter-spacing: -0.02em; text-transform: uppercase; }

.form-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--grey);
    margin-bottom: 1rem;
    text-decoration: none;
    transition: color 0.15s;
}
.form-breadcrumb:hover { color: var(--grey-light); }
.form-breadcrumb svg   { width: 12px; height: 12px; }

.form-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

/* Champs du formulaire étendu (nouvelle programmation) */
.field.is-wide input[type="text"],
.field.is-wide textarea,
.field.is-wide select {
    padding: 0.8rem 1rem;
}

.field > input[type="text"],
.field > input[type="url"],
.field > textarea,
.field > select {
    background: var(--surface);
    border: 1px solid var(--border-mid);
    color: var(--white);
    padding: 0.8rem 1rem;
    font-size: 0.9rem;
    border-radius: 2px;
}

.field > input[type="text"]:focus,
.field > input[type="url"]:focus,
.field > textarea:focus,
.field > select:focus {
    border-color: var(--border-focus);
}

.field > textarea { min-height: 100px; }
.field label .required { color: var(--draft); margin-left: 0.2rem; }

/* ══════════════════════════════════════════
   Boutons
   ══════════════════════════════════════════ */
.btn-submit {
    padding: 0.85rem;
    background: var(--white);
    color: var(--black);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    transition: opacity 0.2s;
    font-family: inherit;
    width: 100%;
}

.btn-submit:hover { opacity: 0.85; }

/* Variante form-page (plus de padding) */
.form-actions .btn-submit {
    width: auto;
    padding: 0.8rem 1.8rem;
}

.btn-cancel {
    appearance: none;
    -webkit-appearance: none;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-family: inherit;
    color: var(--grey);
    text-decoration: none;
    background: none;
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-mid);
    border-radius: 6px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

.btn-cancel:hover { color: var(--white); border-color: var(--border-focus); }

/* Variante texte (pas de bordure) */
.btn-cancel--text {
    border-color: transparent;
    padding-left: 0; padding-right: 0;
}

.btn-cancel--text:hover { border-color: transparent; }

.btn-primary {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--black);
    background: var(--white);
    padding: 0.5rem 1.2rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: opacity 0.15s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.btn-primary:hover { opacity: 0.85; }

.btn-primary--danger { background: var(--danger); color: var(--white); }
.btn-primary--danger:hover { opacity: 0.85; }

.btn-new {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1.2rem;
    background: var(--white);
    color: var(--black);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 6px;
    transition: opacity 0.15s;
    flex-shrink: 0;
}

.btn-new:hover   { opacity: 0.82; }
.btn-new svg     { width: 13px; height: 13px; }

/* Bouton icône générique */
.btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: none;
    border: 1px solid var(--border-mid);
    border-radius: 6px;
    color: var(--grey);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    flex-shrink: 0;
}

.btn-icon:hover { color: var(--white); border-color: var(--border-focus); }
.btn-icon svg   { width: 14px; height: 14px; }

.btn-danger {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    background: #dc2626;
    padding: 0.5rem 1.2rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: opacity 0.15s;
}

.btn-danger:hover { opacity: 0.85; }

/* ══════════════════════════════════════════
   Messages flash
   ══════════════════════════════════════════ */
.flash-success {
    font-size: 0.78rem;
    color: var(--active);
    border: 1px solid var(--active-border);
    padding: 0.75rem 1rem;
    border-radius: 2px;
    margin-bottom: 1.5rem;
    letter-spacing: 0.02em;
}

.flash-error {
    font-size: 0.78rem;
    color: var(--danger);
    border: 1px solid var(--danger-border);
    padding: 0.75rem 1rem;
    border-radius: 2px;
    margin-bottom: 1.5rem;
    letter-spacing: 0.02em;
}

.flash-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.65rem 1.25rem;
    border-bottom: 1px solid var(--active-border);
    background: var(--active-bg);
    color: var(--active);
}

.flash-bar svg { width: 13px; height: 13px; flex-shrink: 0; }

/* ══════════════════════════════════════════
   App shell (dashboard coach)
   ══════════════════════════════════════════ */
.app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ── Top nav ── */
.topnav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--topnav-bg);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: stretch;
    height: 56px;
    padding: 0 2rem;
}

.topnav-brand {
    display: flex;
    align-items: center;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--white);
    text-decoration: none;
    padding-right: 2.5rem;
    border-right: 1px solid var(--border);
    flex-shrink: 0;
}

.topnav-tabs {
    display: flex;
    align-items: stretch;
    padding: 0 1.5rem;
    flex: 1;
}

.tab-link {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0 1rem;
    font-size: 0.73rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--grey);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.tab-link:hover        { color: var(--grey-light); }
.tab-link.active       { color: var(--white); border-bottom-color: var(--white); }
.tab-link svg          { width: 14px; height: 14px; opacity: 0.7; }
.tab-link.active svg   { opacity: 1; }

.topnav-user {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-left: 1.5rem;
    border-left: 1px solid var(--border);
    flex-shrink: 0;
}

.user-name {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--grey-light);
    letter-spacing: 0.05em;
}

.user-role {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--grey);
    background: var(--surface-2);
    border: 1px solid var(--border-mid);
    padding: 0.2rem 0.5rem;
    border-radius: 2px;
}

.btn-logout {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--grey);
    text-decoration: none;
    transition: color 0.15s;
}

.btn-logout:hover { color: var(--white); }

.btn-space-switch {
    margin-left: auto;
    display: flex;
    align-items: center;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--grey);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s;
}

.btn-space-switch:hover { color: var(--white); }

button.btn-space-switch {
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    cursor: pointer;
}

.header-end-separator {
    width: 1px;
    height: 16px;
    background: var(--border-mid);
    flex-shrink: 0;
}

.btn-ticket {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: none;
    border: 1px solid var(--border-mid);
    border-radius: 50%;
    color: var(--grey);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    flex-shrink: 0;
}
.btn-ticket svg { width: 14px; height: 14px; }
.btn-ticket:hover { color: var(--white); border-color: var(--border-focus); }

/* ── Page content ── */
.page-content {
    flex: 1;
    padding: 2.5rem 2rem;
    max-width: 80%;
    width: 100%;
    margin: 0 auto;
}

.page-content--full { max-width: 100%; padding: 0; }

@media (max-width: 900px) {
    .page-content { max-width: 100%; padding: 1.75rem 1.25rem; }
}

/* ══════════════════════════════════════════
   Section header
   ══════════════════════════════════════════ */
.section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 2.5rem;
    gap: 1rem;
}

.section-title { font-size: 1.4rem; font-weight: 900; letter-spacing: -0.02em; text-transform: uppercase; }
.section-count { font-size: 0.72rem; font-weight: 600; color: var(--grey); letter-spacing: 0.1em; margin-left: 0.75rem; }

/* ── Filtre statut programmations ── */
/* ── Barre de filtres / recherche ── */
.list-filters {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 180px;
    max-width: 320px;
}

.search-icon {
    position: absolute;
    left: 0.65rem;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    color: var(--grey);
    pointer-events: none;
    flex-shrink: 0;
}

.search-wrap .search-input {
    width: 100%;
    padding: 0.45rem 2rem 0.45rem 2.2rem;
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.4;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--white);
    transition: border-color 0.15s;
}
.search-wrap .search-input::placeholder { color: var(--grey); }
.search-wrap .search-input:focus { outline: none; border-color: var(--accent); }

.search-clear {
    position: absolute;
    right: 0.5rem;
    background: none;
    border: none;
    color: var(--grey);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.2rem;
    transition: color 0.15s;
}
.search-clear:hover { color: var(--white); }

/* ── Pagination ── */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    margin-top: 2rem;
    padding-bottom: 1rem;
}

.pagination-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.5rem;
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: 4px;
    text-decoration: none;
    color: var(--grey);
    border: 1px solid transparent;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
a.pagination-btn:hover {
    background: var(--surface-2);
    color: var(--white);
    border-color: var(--border);
}
.pagination-btn--active {
    background: var(--accent);
    color: var(--white);
    border-color: var(--accent);
}
.pagination-btn--disabled { opacity: 0.3; cursor: default; }
.pagination-ellipsis { color: var(--grey); padding: 0 0.25rem; font-size: 0.8rem; }

.status-filter {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.status-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0.35rem 0.75rem;
    border-radius: 2px;
    border: 1px solid var(--border);
    color: var(--grey);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    user-select: none;
}

.status-chip input[type="checkbox"] { display: none; }

.status-chip--active.is-active   { color: var(--active); border-color: var(--active); background: color-mix(in srgb, var(--active) 10%, transparent); }
.status-chip--draft.is-active    { color: var(--draft);  border-color: var(--draft);  background: color-mix(in srgb, var(--draft)  10%, transparent); }
.status-chip--archived.is-active { color: var(--grey);   border-color: var(--grey);   background: color-mix(in srgb, var(--grey)   10%, transparent); }

.status-chip--active.is-active   .status-dot { background: var(--active); box-shadow: var(--active-glow); }
.status-chip--draft.is-active    .status-dot { background: var(--draft); }
.status-chip--archived.is-active .status-dot { background: var(--grey); }

/* ══════════════════════════════════════════
   Grille de programmations
   ══════════════════════════════════════════ */
.prog-grid {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.prog-card {
    background: var(--surface);
    display: flex;
    flex-direction: row;
    padding: 0;
    gap: 0;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
}

.prog-card:hover                    { background: var(--surface-2); border-color: var(--border-mid); }
.prog-card:hover .card-arrow        { opacity: 1; transform: translateX(0); }

.card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-badges {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.type-badge {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.2rem 0.55rem;
    border-radius: 20px;
    border: 1px solid var(--border-mid);
    color: var(--grey-light);
    flex-shrink: 0;
}
.type-badge--group    { color: var(--active); background: var(--active-bg); border-color: var(--active-border); }
.type-badge--personal { color: var(--grey-light); background: none; }

/* ── Badges de statut ── */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.status-dot          { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.status-active       { color: var(--active); }
.status-draft        { color: var(--draft); }
.status-archived     { color: var(--grey); }
.status-active   .status-dot { background: var(--active); box-shadow: var(--active-glow); }
.status-draft    .status-dot { background: var(--draft); }
.status-archived .status-dot { background: var(--archived); }

/* ── Contenu de la carte ── */
.card-name {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.25;
}

.card-description {
    font-size: 0.78rem;
    color: var(--grey);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

/* ── Espace athlète — intro ── */
.athlete-space-intro {
    max-width: 640px;
    margin-bottom: 2.5rem;
}

.athlete-space-eyebrow {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--active);
    margin-bottom: 0.75rem;
}

.athlete-space-headline {
    font-size: clamp(1.6rem, 3.5vw, 2.4rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 0.75rem;
}

.athlete-space-sub {
    font-size: 0.9rem;
    color: var(--grey);
    line-height: 1.6;
}

/* ── Espace athlète — cartes vitrine des programmations ── */
.prog-showcase-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
}

@media (max-width: 900px) {
    .prog-showcase-grid { grid-template-columns: repeat(2, 1fr); gap: 1.75rem; }
}

@media (max-width: 600px) {
    .prog-showcase-grid { grid-template-columns: 1fr; gap: 1.5rem; }
}

.prog-showcase-card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.prog-showcase-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0,0,0,0.25);
    border-color: var(--border-mid);
}

.prog-showcase-card.is-subscribed { border-color: var(--active-border); }

.prog-showcase-media {
    position: relative;
    aspect-ratio: 21 / 9;
    background: linear-gradient(135deg, var(--surface-2), var(--surface-elevated));
}

.prog-showcase-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.prog-showcase-media-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    filter: grayscale(0.2) opacity(0.7);
}

.prog-showcase-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.25) 55%, transparent 100%);
}

.prog-showcase-title {
    position: absolute;
    left: 1.25rem;
    right: 1.25rem;
    bottom: 0.9rem;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.25;
    text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

.prog-showcase-badge {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--active);
    background: rgba(10,10,10,0.72);
    border: 1px solid var(--active-border);
    border-radius: 20px;
    padding: 0.3rem 0.65rem;
}

.prog-showcase-badge svg { width: 11px; height: 11px; }

.prog-showcase-body {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    padding: 1.25rem 1.5rem 1.5rem;
}

.prog-showcase-desc {
    font-size: 0.82rem;
    color: var(--grey-light);
    line-height: 1.7;
}

.prog-showcase-footer { display: flex; }
.prog-showcase-footer form { display: flex; flex: 1; }

.btn-prog-subscribe {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem;
    background: var(--white);
    color: var(--black);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.15s;
    font-family: inherit;
}
.btn-prog-subscribe svg { width: 15px; height: 15px; transition: transform 0.15s; }
.btn-prog-subscribe:hover { opacity: 0.85; }
.btn-prog-subscribe:hover svg { transform: translateX(3px); }

.btn-prog-subscribe:disabled {
    background: var(--surface-2);
    color: var(--grey);
    cursor: not-allowed;
    opacity: 1;
}
.btn-prog-subscribe:disabled:hover svg { transform: none; }

.btn-prog-unsubscribe {
    flex: 1;
    padding: 0.85rem;
    background: none;
    color: var(--grey-light);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: 1px solid var(--border-mid);
    border-radius: 8px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    font-family: inherit;
}
.btn-prog-unsubscribe:hover {
    color: var(--danger);
    border-color: var(--danger-border);
    background: var(--danger-bg);
}

.card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
}

.card-meta   { display: flex; align-items: center; gap: 0.75rem; }
.meta-item   { display: flex; align-items: center; gap: 0.3rem; font-size: 0.68rem; color: var(--grey); }
.meta-item svg { width: 11px; height: 11px; opacity: 0.7; }
.meta-item--cycle { color: var(--active); font-weight: 600; }

.card-cycle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--active);
    background: var(--active-bg);
    border: 1px solid var(--active-border);
    border-radius: 2px;
    padding: 0.25rem 0.55rem;
    align-self: flex-start;
}

.card-cycle svg  { width: 9px; height: 9px; flex-shrink: 0; }

.card-arrow {
    font-size: 0.75rem;
    color: var(--grey-light);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.15s, transform 0.15s;
}

/* ── État vide ── */
.empty-state {
    grid-column: 1 / -1;
    background: var(--surface);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 5rem 2rem;
    text-align: center;
}

.empty-icon  { width: 40px; height: 40px; color: var(--grey); opacity: 0.4; }
.empty-title { font-size: 0.9rem; font-weight: 700; color: var(--grey-light); }
.empty-sub   { font-size: 0.75rem; color: var(--grey); }

/* ══════════════════════════════════════════
   En-tête de programmation (show)
   ══════════════════════════════════════════ */
.prog-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.2rem 2rem;
    border-bottom: 1px solid var(--border);
}

.prog-header-spacer  { flex: 1; }
.prog-header-title   { font-size: 1rem; font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.prog-status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    flex-shrink: 0;
}

.prog-status-dot                  { width: 5px; height: 5px; border-radius: 50%; }
.status-active   .prog-status-dot { background: var(--active); box-shadow: var(--active-glow); }
.status-draft    .prog-status-dot { background: var(--draft); }
.status-archived .prog-status-dot { background: var(--archived); }

/* ── Miniature image dans le header de prog ── */
.prog-header-thumb {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--surface-2);
    border: 1px solid var(--border-mid);
}

.prog-header-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* ── Miniature dans le switcher ── */
.prog-switcher-thumb-wrap {
    width: 26px;
    height: 26px;
    border-radius: 3px;
    overflow: hidden;
    flex-shrink: 0;
}

.prog-switcher-item-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.prog-switcher-thumb-empty {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--surface);
    border: 1px solid var(--border-mid);
    border-radius: 3px;
}

/* ── Image dans la carte de prog ── */
.prog-card-img {
    width: 100px;
    flex-shrink: 0;
    overflow: hidden;
}

.prog-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.prog-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.9rem 1.2rem;
    min-width: 0;
}

/* ── Prévisualisation image dans la modal ── */
.prog-image-upload-label {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--grey);
    display: block;
    margin-bottom: 0.5rem;
}

.prog-image-preview {
    width: 100%;
    height: 120px;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 0.75rem;
    border: 1px solid var(--border-mid);
}

.prog-image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* ── Bouton retour ── */
.btn-back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--border-mid);
    border-radius: 2px;
    color: var(--grey);
    text-decoration: none;
    flex-shrink: 0;
    transition: color 0.15s, border-color 0.15s;
}

.btn-back:hover { color: var(--white); border-color: var(--border-focus); }
.btn-back svg   { width: 14px; height: 14px; }

/* ── Bouton cycle ── */
.prog-cycle-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--grey);
    text-decoration: none;
    border: 1px solid var(--border-mid);
    padding: 0.4rem 0.85rem;
    border-radius: 2px;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
}

.prog-cycle-btn svg             { width: 13px; height: 13px; }
.prog-cycle-btn:hover           { color: var(--white); border-color: var(--border-focus); }
.prog-cycle-btn--active         { color: var(--active); border-color: var(--active-border); }
.prog-cycle-btn--active:hover   { border-color: var(--active-border-strong); }
.prog-cycle-name--empty         { opacity: 0.6; }

/* ── Switcher de programmation ── */
.prog-switcher-wrap     { position: relative; flex-shrink: 0; }

.prog-switcher-btn {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    height: 30px;
    padding: 0 0.6rem;
    background: none;
    border: 1px solid var(--border-mid);
    border-radius: 2px;
    color: var(--grey);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    font-family: inherit;
}

.prog-switcher-btn:hover    { color: var(--white); border-color: var(--border-focus); }
.prog-switcher-btn svg      { width: 13px; height: 13px; flex-shrink: 0; }
.prog-switcher-chevron      { width: 11px !important; height: 11px !important; }

.prog-switcher-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 220px;
    max-height: 320px;
    overflow-y: auto;
    background: var(--surface-2);
    border: 1px solid var(--border-mid);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
    z-index: 100;
    padding: 0.3rem;
}

.prog-switcher-dropdown.is-open { display: block; }

.prog-switcher-header {
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--grey);
    padding: 0.4rem 0.6rem 0.5rem;
}

.prog-switcher-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.6rem;
    border-radius: 4px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--grey-light);
    text-decoration: none;
    transition: background 0.1s, color 0.1s;
}

.prog-switcher-item:hover      { background: var(--hover-bg-strong); color: var(--white); }
.prog-switcher-item.is-current { color: var(--white); font-weight: 700; pointer-events: none; }
.prog-switcher-item svg        { width: 12px; height: 12px; flex-shrink: 0; margin-left: auto; color: var(--active); }

.prog-switcher-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.prog-switcher-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--grey);
}

.prog-switcher-dot.status-active   { background: var(--active); box-shadow: var(--active-glow); }
.prog-switcher-dot.status-draft    { background: var(--draft); }
.prog-switcher-dot.status-archived { background: var(--archived); }

/* ── Menu de gestion de programme ── */
.prog-menu-wrap      { position: relative; flex-shrink: 0; }

.prog-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: none;
    border: 1px solid var(--border-mid);
    border-radius: 2px;
    color: var(--grey);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

.prog-menu-btn:hover { color: var(--white); border-color: var(--border-focus); }
.prog-menu-btn svg   { width: 14px; height: 14px; }

.prog-menu-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: var(--dropdown-bg);
    border: 1px solid var(--border-mid);
    border-radius: 4px;
    min-width: 210px;
    box-shadow: var(--dropdown-shadow);
    z-index: 300;
    padding: 0.3rem 0;
}

.prog-menu-dropdown.is-open { display: block; }

.prog-menu-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.6rem 1rem;
    font-size: 0.78rem;
    font-weight: 600;
    font-family: inherit;
    color: var(--grey-light);
    text-decoration: none;
    text-align: left;
    background: none;
    border: none;
    appearance: none;
    transition: background 0.1s, color 0.1s;
    cursor: pointer;
}

.prog-menu-item:hover             { background: var(--hover-bg-strong); color: var(--white); }
.prog-menu-item svg               { width: 13px; height: 13px; flex-shrink: 0; color: var(--grey); }
.prog-menu-item--danger           { color: var(--grey); }
.prog-menu-item--danger:hover     { color: var(--danger); background: var(--danger-bg); }
.prog-menu-item--danger svg       { color: inherit; }
.prog-menu-sep                    { height: 1px; background: var(--border); margin: 0.3rem 0; }

/* ══════════════════════════════════════════
   Navigateur de semaine
   ══════════════════════════════════════════ */
.week-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.9rem 2rem;
    border-bottom: 1px solid var(--border);
    position: relative;
}

.week-nav-left  { position: absolute; left: 2rem; }
.week-nav-right { position: absolute; right: 2rem; display: flex; align-items: center; gap: 0.5rem; }
.week-nav-center{ display: flex; align-items: center; }

.week-nav-label {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--grey);
}

.btn-week {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: var(--grey);
    text-decoration: none;
    border: 1px solid var(--border-mid);
    border-radius: 2px;
    transition: color 0.15s, border-color 0.15s;
    flex-shrink: 0;
}

.btn-week:hover { color: var(--white); border-color: var(--border-focus); }
.btn-week svg   { width: 14px; height: 14px; }

.btn-today {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--grey);
    text-decoration: none;
    border: 1px solid var(--border-mid);
    padding: 0.4rem 0.8rem;
    border-radius: 2px;
    transition: color 0.15s, border-color 0.15s;
}

.btn-today:hover          { color: var(--white); border-color: var(--border-focus); }
.btn-today.is-current     { color: var(--white); border-color: var(--border-mid); pointer-events: none; }

.btn-duplicate {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--grey);
    cursor: pointer;
    border: 1px solid var(--border-mid);
    background: none;
    padding: 0.4rem 0.8rem;
    border-radius: 2px;
    transition: color 0.15s, border-color 0.15s;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}

.btn-duplicate:hover { color: var(--white); border-color: var(--border-focus); }
.btn-duplicate svg   { width: 12px; height: 12px; }

/* ── Label de semaine & sélecteur de mois ── */
.week-label-wrapper { position: relative; }

.week-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 1.2rem;
    height: 32px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    border-top: 1px solid var(--border-mid);
    border-bottom: 1px solid var(--border-mid);
    transition: background 0.15s;
}

.week-label:hover   { background: var(--surface-2); }
.week-label svg     { width: 13px; height: 13px; color: var(--grey); flex-shrink: 0; }

.month-picker {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--dropdown-bg);
    border: 1px solid var(--border-mid);
    border-radius: 4px;
    padding: 1.2rem;
    z-index: 200;
    width: 280px;
    box-shadow: var(--dropdown-shadow);
}

.month-picker.open { display: block; }

.picker-year {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.picker-year-label { font-size: 0.82rem; font-weight: 800; letter-spacing: 0.05em; }

.btn-picker-year {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: transparent;
    border: 1px solid var(--border-mid);
    border-radius: 2px;
    color: var(--grey);
    cursor: pointer;
    transition: color 0.15s;
}

.btn-picker-year:hover { color: var(--white); }
.btn-picker-year svg   { width: 12px; height: 12px; }

.picker-months { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }

.picker-month {
    padding: 0.5rem 0.25rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-align: center;
    color: var(--grey-light);
    border-radius: 2px;
    cursor: pointer;
    border: 1px solid transparent;
    background: transparent;
    transition: background 0.12s, color 0.12s;
    text-decoration: none;
    display: block;
}

.picker-month:hover         { background: var(--surface-2); color: var(--white); }
.picker-month.current-month { border-color: var(--border-mid); color: var(--white); }

/* ══════════════════════════════════════════
   Calendrier (grille 7 jours)
   ══════════════════════════════════════════ */
.calendar {
    display: grid;
    /* minmax(0, 1fr) et pas 1fr : le minimum implicite d'une piste `1fr` est sa
       largeur min-content, donc un mot insécable dans un bloc élargissait la
       colonne du jour et déformait toute la grille. */
    grid-template-columns: repeat(7, minmax(0, 1fr));
    min-height: calc(100vh - 170px);

    /* Les 7 colonnes se partagent la largeur de la fenêtre : plus l'écran est
       étroit (tablette), plus la colonne l'est, et une taille de police fixe y
       paraît trop grosse. Un seul facteur pilote toutes les tailles des blocs. */
    --block-font-scale: 1;
}

/* Valeurs volontairement douces : elles se multiplient avec l'échelle
   typographique globale de la section « Responsive — tablette » en bas de
   fichier. Ce facteur-ci ne compense plus que l'étroitesse d'une colonne sur
   sept ; le rétrécissement dû à la taille de l'écran est déjà pris en charge
   là-bas. Réduction cumulée visée : ≈0,78 vers 900 px. */
@media (max-width: 1400px) { .calendar { --block-font-scale: 0.96; } }
@media (max-width: 1100px) { .calendar { --block-font-scale: 0.92; } }
@media (max-width: 900px)  { .calendar { --block-font-scale: 0.89; } }

.cal-day {
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
}

.cal-day:last-child { border-right: none; }

.cal-day-header {
    padding: 0.9rem 1rem 0.7rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    flex-shrink: 0;
}

.cal-day.in-cycle      .cal-day-header { border-top: 2px solid var(--active-border-strong); }
.cal-day.in-cycle.is-today .cal-day-header { border-top-color: var(--active); }

.cal-cycle-tag {
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--active);
    opacity: 0.75;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.cal-day-name   { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--grey); }
.cal-day-number { font-size: 1.4rem; font-weight: 900; letter-spacing: -0.03em; line-height: 1; color: var(--white); }

.cal-day.is-today   .cal-day-name   { color: var(--active); }
.cal-day.is-today   .cal-day-number { color: var(--active); }
.cal-day.is-weekend .cal-day-header { background: var(--weekend-bg); }
.cal-day.is-weekend .cal-day-number { color: var(--grey-light); }

.cal-day-body {
    flex: 1;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-height: 120px;
}

.cal-day-body.sortable-over { background: var(--sortable-over-bg); }

/* ── Indicateur de chargement Turbo ── */
turbo-frame[busy] .week-nav { opacity: 0.5; pointer-events: none; transition: opacity 0.15s; }

/* ══════════════════════════════════════════
   Cartes de blocs
   ══════════════════════════════════════════ */
.block-card-wrap { position: relative; }

.block-card {
    display: block;
    position: relative;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 0.6rem 0.7rem;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s;
}

.block-card:hover           { border-color: var(--border-mid); }
.block-drag-ghost           { opacity: 0.35; }

.block-drag-handle {
    cursor: grab;
    user-select: none;
}
.block-drag-handle:active { cursor: grabbing; }

.block-card-label {
    font-size: calc(0.7rem * var(--block-font-scale, 1));
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--white);
    margin-bottom: 0.3rem;
    /* Coupe les mots trop longs pour la colonne, avec un vrai trait d'union
       (dictionnaire français via le `lang="fr"` du document). */
    -webkit-hyphens: auto;
    hyphens: auto;
    /* Filet de sécurité pour ce qu'aucun dictionnaire ne sait couper : URLs,
       longues suites de chiffres. Coupe sans trait d'union, mais ne déborde pas. */
    overflow-wrap: break-word;
}

.block-card-content {
    font-size: calc(0.85rem * var(--block-font-scale, 1));
    line-height: 1.2;
    color: var(--grey-light);
    white-space: pre-wrap;
    -webkit-hyphens: auto;
    hyphens: auto;
    overflow-wrap: break-word;
}

/* Référence de métrique résolue dans le texte du bloc : « 17% Back Squat ».
   Accent seul, sans pastille de fond — les cartes portent déjà une teinte de
   couleur de bloc, et un fond de plus rendrait le texte illisible. */
.block-card-metric {
    color: var(--active);
    font-weight: 700;
}

.block-card-garmin { display: flex; flex-direction: column; gap: 2px; white-space: normal; }
.gcr {
    display: inline-flex;
    align-items: center;
    font-size: calc(0.78rem * var(--block-font-scale, 1));
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 2px;
    width: fit-content;
}
.gcr--nested        { margin-left: 10px; font-weight: 500; opacity: 0.9; }
.gcr--repeat        { color: #fbbf24; background: rgba(251,191,36,0.1); }
.gcr--warmup,
.gcr--cooldown      { color: #4ade80; background: rgba(74,222,128,0.08); }
.gcr--active        { color: #f87171; background: rgba(248,113,113,0.08); }
.gcr--recovery      { color: #60a5fa; background: rgba(96,165,250,0.08); }

.block-card-score {
    margin-top: 0.4rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--active);
}

/* ── Badges sur les blocs ── */
.block-card-badges { display: flex; align-items: center; gap: 0.3rem; margin-top: 0.35rem; }

.block-card-badge       { display: inline-flex; align-items: center; gap: 0.2rem; font-size: 0.7rem; font-weight: 700; }
.block-card-badge svg   { width: 11px; height: 11px; }
.block-card-badge--tips { color: var(--draft); opacity: 0.8; }
.block-card-badge--media{ color: var(--active); }

/* ── Thumbnail ── */
.block-card-thumb-wrap  { position: relative; margin-top: 0.45rem; border-radius: 2px; overflow: hidden; line-height: 0; }
.block-card-thumb       { width: 100%; height: 72px; object-fit: cover; display: block; }
.block-card-thumb-more  { position: absolute; bottom: 0.3rem; right: 0.3rem; background: rgba(0,0,0,0.7); color: #fff; font-size: 0.6rem; font-weight: 800; padding: 0.1rem 0.35rem; border-radius: 2px; }

/* ── Boutons d'action sur bloc (supprimés du rendu planning, gardés pour référence) ── */
.block-delete-form { display: none; }
.btn-block-delete  { display: none; }

/* ── Badge scores sur la carte bloc ── */
.btn-block-scores {
    position: absolute;
    bottom: 0.45rem;
    right: 0.45rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.62rem;
    font-weight: 700;
    padding: 0.2rem 0.45rem;
    background: rgba(99,179,237,0.12);
    border: 1px solid rgba(99,179,237,0.25);
    border-radius: 3px;
    color: #63b3ed;
    text-decoration: none;
    z-index: 3;
    transition: background 0.15s, border-color 0.15s;
}
.btn-block-scores:hover { background: rgba(99,179,237,0.22); border-color: rgba(99,179,237,0.45); }
.btn-block-scores svg   { width: 10px; height: 10px; flex-shrink: 0; }

/* ── Boutons d'action sur bloc ── */
.block-delete-form {
    position: absolute;
    top: 0.45rem;
    left: 0.45rem;
    margin: 0;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 2;
}

.block-card-wrap:hover .block-delete-form { opacity: 1; }

.btn-block-delete {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--grey);
    padding: 0;
    border-radius: 2px;
    transition: color 0.15s;
}

.btn-block-delete:hover { color: var(--danger); }
.btn-block-delete svg   { width: 11px; height: 11px; }

.btn-block-delete-modal {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--grey);
    background: none;
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-mid);
    border-radius: 2px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

.btn-block-delete-modal:hover { color: var(--danger); border-color: var(--danger-border); }

/* ── Bouton ajouter un bloc ── */
.btn-add-block {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 30px;
    margin-top: 0.2rem;
    border: 1px dashed var(--border-mid);
    border-radius: 3px;
    color: var(--grey);
    text-decoration: none;
    font-size: 1rem;
    line-height: 1;
    transition: color 0.15s, border-color 0.15s;
    flex-shrink: 0;
}

.btn-add-block:hover { color: var(--white); border-color: var(--border-focus); }

/* ══════════════════════════════════════════
   Swatches de couleur (formulaire bloc)
   ══════════════════════════════════════════ */
.color-swatches             { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.color-swatch-label         { cursor: pointer; position: relative; }
.color-swatch-label input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.color-swatch               { display: block; width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; transition: transform 0.1s, border-color 0.1s; }
.color-swatch-label:hover .color-swatch { transform: scale(1.15); }
.color-swatch-label input[type="radio"]:checked + .color-swatch { border-color: var(--white); transform: scale(1.15); }
.color-swatch-none          { background: transparent; border-color: var(--border-mid) !important; position: relative; }
.color-swatch-none::after   { content: '×'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; color: var(--grey); }

/* ══════════════════════════════════════════
   Section tips (formulaire bloc)
   ══════════════════════════════════════════ */
.tips-chevron { width: 13px; height: 13px; margin-left: auto; transition: transform 0.2s; }

/* ══════════════════════════════════════════
   Modaux
   ══════════════════════════════════════════ */
html:has(.modal-backdrop),
body:has(.modal-backdrop) { overflow: hidden; }

/* Inline confirmation modal (money-moving subscription actions): always present in the
   DOM behind [hidden], toggled by confirm_action_controller.js — deliberately its own
   class rather than .modal-backdrop, so the :has() scroll-lock above doesn't fire while
   it's sitting hidden on the page. */
.confirm-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 500;
    background: var(--modal-backdrop);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}
.confirm-modal-backdrop[hidden] { display: none; }

.confirm-modal {
    background: var(--surface-elevated);
    border: 1px solid var(--border-mid);
    border-radius: 10px;
    width: 100%;
    max-width: 440px;
    padding: 1.5rem;
}

.confirm-modal-title { font-size: 0.95rem; font-weight: 700; color: var(--white); margin: 0 0 0.6rem; }
.confirm-modal-body  { font-size: 0.8rem; color: var(--grey-light); line-height: 1.55; margin: 0 0 1.25rem; }
.confirm-modal-body strong { color: var(--white); }

.confirm-modal-amount-choices { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.25rem; }

.confirm-modal-amount-choice {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.78rem;
    color: var(--grey-light);
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--border-mid);
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.confirm-modal-amount-choice:hover { border-color: var(--border-focus); }
.confirm-modal-amount-choice:has(input[type="radio"]:checked) {
    border-color: var(--active);
    background: var(--active-bg);
    color: var(--white);
}

.confirm-modal-amount-choice input[type="radio"] {
    accent-color: var(--active);
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.confirm-modal-amount-choice-label { flex: 1 1 auto; min-width: 0; }

.confirm-modal-amount-choice-input-group {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

.confirm-modal-amount-choice input[type="number"] {
    width: 90px;
    background: var(--surface-2);
    border: 1px solid var(--border-mid);
    border-radius: 4px;
    color: var(--white);
    padding: 0.35rem 0.55rem;
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
}
.confirm-modal-amount-choice input[type="number"]::-webkit-outer-spin-button,
.confirm-modal-amount-choice input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.confirm-modal-amount-choice input[type="number"]:focus {
    outline: none;
    border-color: var(--border-focus);
}

.confirm-modal-footer { display: flex; justify-content: flex-end; gap: 0.6rem; }

.subscription-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 500;
    background: var(--modal-backdrop);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 2rem 1.5rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.modal {
    position: relative;
    background: var(--surface-elevated);
    border: 1px solid var(--border-mid);
    border-radius: 12px;
    width: clamp(480px, 55vw, 860px);
    max-width: 100%;
    box-shadow: var(--modal-shadow);
    display: flex;
    flex-direction: column;
    margin: 0 auto;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
}

.modal-title { font-size: 0.82rem; font-weight: 800; letter-spacing: 0.02em; }

.modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: var(--grey);
    text-decoration: none;
    flex-shrink: 0;
    border: 1px solid transparent;
    border-radius: 2px;
    transition: color 0.15s;
    background: none;
    cursor: pointer;
}

.modal-close:hover { color: var(--white); }
.modal-close svg   { width: 14px; height: 14px; }

.modal-body   { padding: 1.25rem; display: flex; flex-direction: column; gap: 1rem; }

.modal .form-group label { font-size: 0.75rem; }
.modal .form-group input[type="text"],
.modal .form-group input[type="date"],
.modal .form-group input[type="email"],
.modal .form-group input[type="password"],
.modal .form-group input[type="number"],
.modal .form-group textarea,
.modal .form-group select { font-size: 0.9rem; }

.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border);
}

/* ── Modal guard — confirmation dialog ── */
.mgc-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    background: rgba(0,0,0,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
}
.mgc-dialog {
    background: var(--surface-elevated);
    border: 1px solid var(--border-mid);
    border-radius: 6px;
    padding: 1.5rem;
    width: min(360px, 90%);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    box-shadow: var(--modal-shadow);
}
.mgc-title {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--white);
    letter-spacing: 0.01em;
}
.mgc-text {
    margin: 0;
    font-size: 0.75rem;
    color: var(--grey);
    line-height: 1.5;
}
.mgc-actions {
    display: flex;
    gap: 0.6rem;
    justify-content: flex-end;
    flex-wrap: wrap;
    margin-top: 0.4rem;
}

/* ── Section médias dans le modal d'édition ── */
.modal-section {
    border-top: 1px solid var(--border);
    padding: 0.9rem 1.25rem 1.1rem;
}

/* ══════════════════════════════════════════
   Sélecteur de médias
   ══════════════════════════════════════════ */
.media-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--grey);
    padding: 0;
    width: 100%;
    transition: color 0.15s;
}

.media-toggle:hover              { color: var(--white); }
.media-toggle svg:first-child    { width: 14px; height: 14px; }
.media-toggle .tips-chevron      { margin-left: auto; }

.media-badge {
    background: var(--active);
    color: var(--black);
    border-radius: 10px;
    padding: 0 0.45rem;
    font-size: 0.58rem;
    font-weight: 900;
    line-height: 1.6;
}

.media-panel               { display: none; flex-direction: column; gap: 0.65rem; margin-top: 0.75rem; }
.media-panel.open          { display: flex; }
.media-list                { display: flex; flex-direction: column; gap: 0.4rem; }

.media-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 0.35rem 0.5rem;
}

.media-thumb             { width: 56px; height: 42px; object-fit: cover; border-radius: 2px; flex-shrink: 0; }
.media-thumb-placeholder { width: 56px; height: 42px; background: var(--surface-2); border-radius: 2px; flex-shrink: 0; }

.media-info  { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.media-name  { font-size: 0.75rem; font-weight: 600; color: var(--white); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-url   { font-size: 0.62rem; color: var(--grey); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.media-remove {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--grey);
    padding: 0.3rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    transition: color 0.15s;
}

.media-remove:hover { color: var(--danger); }
.media-remove svg   { width: 13px; height: 13px; }

.media-search-wrap  { position: relative; }

.media-search-input {
    width: 100%;
    box-sizing: border-box;
    background: var(--surface);
    border: 1px solid var(--border-mid);
    border-radius: 8px;
    color: var(--white);
    font-size: 0.78rem;
    padding: 0.5rem 0.7rem;
    font-family: inherit;
    transition: border-color 0.15s;
}

.media-search-input:focus { outline: none; border-color: var(--border-focus); }

.media-suggestions {
    margin-top: 0.3rem;
    background: var(--suggestions-bg);
    border: 1px solid var(--border-mid);
    border-radius: 8px;
    max-height: 180px;
    overflow-y: auto;
}

.media-suggestions:empty { display: none; }

.media-suggestion {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.6rem;
    cursor: pointer;
    font-size: 0.75rem;
    transition: background 0.1s;
}

.media-suggestion:hover { background: var(--surface); }
.media-thumb-sm         { width: 36px; height: 27px; object-fit: cover; border-radius: 2px; flex-shrink: 0; }
.media-empty            { font-size: 0.72rem; color: var(--grey); padding: 0.6rem; text-align: center; }

.media-add {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    padding-top: 0.25rem;
    border-top: 1px dashed var(--border);
}

.media-add-input {
    background: var(--surface);
    border: 1px solid var(--border-mid);
    border-radius: 8px;
    color: var(--white);
    font-size: 0.75rem;
    padding: 0.45rem 0.65rem;
    font-family: inherit;
    transition: border-color 0.15s;
}

.media-add-input:focus  { outline: none; border-color: var(--border-focus); }
.media-add-input:first-child { width: 30%; flex-shrink: 0; }
.media-add-url          { flex: 1; min-width: 0; }

.btn-media-add {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--black);
    background: var(--white);
    padding: 0.45rem 0.85rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: opacity 0.15s;
}

.btn-media-add:hover { opacity: 0.85; }

/* ══════════════════════════════════════════
   Cycles — modal
   ══════════════════════════════════════════ */
.modal--cycles { width: 520px; }

.cycle-modal-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
}

.cycle-modal-title {
    flex: 1;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cycle-modal-title svg { width: 14px; height: 14px; color: var(--grey); }

.btn-cycle-back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    color: var(--grey);
    text-decoration: none;
    border: 1px solid var(--border-mid);
    border-radius: 2px;
    transition: color 0.15s;
    background: none;
    cursor: pointer;
}

.btn-cycle-back:hover { color: var(--white); }
.btn-cycle-back svg   { width: 13px; height: 13px; }

.cycle-list     { padding: 0.5rem 0; max-height: 55vh; overflow-y: auto; }
.cycle-empty    { font-size: 0.78rem; color: var(--grey); line-height: 1.5; padding: 1.25rem; text-align: center; }

.cycle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.25rem;
    gap: 0.75rem;
    border-bottom: 1px solid var(--border);
    transition: background 0.1s;
}

.cycle-row:hover        { background: var(--hover-bg); }
.cycle-row--active      { background: var(--cycle-active-bg); }
.cycle-row-left         { display: flex; align-items: flex-start; gap: 0.6rem; flex: 1; min-width: 0; }

.cycle-active-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--active);
    box-shadow: var(--active-glow);
    flex-shrink: 0;
    margin-top: 0.35rem;
}

.cycle-row-info   { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.cycle-row-name   { font-size: 0.82rem; font-weight: 700; color: var(--white); }
.cycle-row-dates  { font-size: 0.65rem; color: var(--grey); letter-spacing: 0.03em; }
.cycle-row-desc   { font-size: 0.7rem; color: var(--grey-light); margin-top: 0.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cycle-row-actions { display: flex; align-items: center; gap: 0.3rem; flex-shrink: 0; }

.btn-cycle-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: none;
    border: 1px solid transparent;
    border-radius: 2px;
    cursor: pointer;
    color: var(--grey);
    text-decoration: none;
    transition: color 0.15s, border-color 0.15s;
}

.btn-cycle-action svg       { width: 13px; height: 13px; }
.btn-cycle-action:hover     { color: var(--white); border-color: var(--border-mid); }
.btn-cycle-delete:hover     { color: var(--danger); border-color: var(--danger-border); }

.cycle-modal-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
}

.btn-cycle-new { font-size: 0.72rem; text-decoration: none; }

/* ── Formulaire de cycle ── */
.cycle-form-error {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    background: var(--danger-bg);
    border: 1px solid var(--danger-border);
    border-radius: 3px;
    padding: 0.7rem 0.85rem;
    font-size: 0.78rem;
    color: var(--danger);
    line-height: 1.4;
    margin-bottom: 0.25rem;
}

.cycle-form-error svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 0.1rem; }

.cycle-occupied {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.6rem 0.75rem;
    background: var(--occupied-bg);
    border: 1px solid var(--border);
    border-radius: 3px;
}

.cycle-occupied-label { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey); }
.cycle-occupied-list  { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.cycle-occupied-pill  { font-size: 0.65rem; font-weight: 600; color: var(--grey-light); background: var(--surface); border: 1px solid var(--border-mid); border-radius: 2px; padding: 0.2rem 0.5rem; white-space: nowrap; }

.cycle-dates-row      { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }

.cycle-overlap-warning {
    grid-column: 1 / -1;
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    background: var(--draft-bg);
    border: 1px solid var(--draft-border);
    border-radius: 3px;
    padding: 0.55rem 0.75rem;
    font-size: 0.73rem;
    color: var(--draft);
    line-height: 1.4;
}

.cycle-overlap-warning[hidden] { display: none; }
.cycle-overlap-warning svg     { width: 13px; height: 13px; flex-shrink: 0; margin-top: 0.1rem; }

/* ══════════════════════════════════════════
   Modal de duplication de semaine
   ══════════════════════════════════════════ */
.dup-backdrop {
    position: fixed;
    inset: 0;
    z-index: 500;
    background: var(--modal-backdrop);
    display: none;
    align-items: center;
    justify-content: center;
}

.dup-backdrop.is-open { display: flex; }

.dup-modal {
    background: var(--surface-elevated);
    border: 1px solid var(--border-mid);
    border-radius: 6px;
    width: 420px;
    max-width: 95vw;
    box-shadow: var(--modal-shadow);
}

.dup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
}

.dup-title { font-size: 0.82rem; font-weight: 800; letter-spacing: 0.02em; }

.dup-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: var(--grey);
    background: none;
    border: 1px solid transparent;
    border-radius: 2px;
    cursor: pointer;
    transition: color 0.15s;
}

.dup-close:hover { color: var(--white); }
.dup-close svg   { width: 14px; height: 14px; }

.dup-body     { padding: 1.4rem 1.25rem; display: flex; flex-direction: column; gap: 1rem; }
.dup-info     { font-size: 0.8rem; color: var(--grey-light); line-height: 1.6; }
.dup-weeks    { display: flex; flex-direction: column; gap: 0.5rem; }

.dup-week-row { display: flex; align-items: center; gap: 0.6rem; font-size: 0.78rem; }

.dup-week-label {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--grey);
    width: 60px;
    flex-shrink: 0;
}

.dup-week-dates { color: var(--white); font-weight: 600; }
.dup-arrow      { color: var(--active); font-size: 1rem; padding-left: 66px; }

.dup-count {
    font-size: 0.72rem;
    color: var(--grey);
    padding: 0.6rem 0.8rem;
    background: var(--surface-2);
    border-radius: 3px;
    border-left: 2px solid var(--active);
}

.dup-count strong { color: var(--white); }

.dup-warning {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--draft);
    background: var(--draft-bg);
    border: 1px solid var(--draft-border);
    border-radius: 3px;
    padding: 0.65rem 0.8rem;
    line-height: 1.5;
}

.dup-warning svg    { width: 13px; height: 13px; flex-shrink: 0; margin-top: 0.1rem; }
.dup-warning strong { color: var(--white); }

.dup-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border);
}

/* ══════════════════════════════════════════
   Modal coachs
   ══════════════════════════════════════════ */
.coaches-section-label {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--grey);
    margin-bottom: 0.5rem;
}

.coach-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--border);
}

.coach-row:last-child { border-bottom: none; }

.coach-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--surface-2);
    border: 1px solid var(--border-mid);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--white);
    flex-shrink: 0;
}

.coach-info  { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.05rem; }
.coach-name  { font-size: 0.8rem; font-weight: 700; color: var(--white); }
.coach-email { font-size: 0.65rem; color: var(--grey); }
.coach-empty { font-size: 0.78rem; color: var(--grey); margin: 0; }

.coach-badge {
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--active);
    background: var(--active-bg);
    border: 1px solid var(--active-border);
    border-radius: 2px;
    padding: 0.15rem 0.5rem;
    flex-shrink: 0;
}

.btn-coach-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    background: none;
    border: 1px solid transparent;
    border-radius: 2px;
    cursor: pointer;
    color: var(--grey);
    transition: color 0.15s, border-color 0.15s;
}

.btn-coach-remove:hover { color: var(--danger); border-color: var(--danger-border); }
.btn-coach-remove svg   { width: 12px; height: 12px; }

.btn-coach-add {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--active);
    background: var(--active-bg);
    border: 1px solid var(--active-border);
    border-radius: 2px;
    padding: 0.3rem 0.75rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s;
}

.btn-coach-add:hover { background: var(--active-bg); border-color: var(--active-border-strong); }
.btn-coach-add svg   { width: 11px; height: 11px; }


/* ══════════════════════════════════════════
   Athlètes — Liste
   ══════════════════════════════════════════ */
.athletes-filter-form {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.athletes-filter-select {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 0.45rem 0.85rem;
    line-height: 1.4;
    border-radius: 4px;
    width: auto;
    min-width: 200px;
}

.athletes-filter-clear {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--grey);
    text-decoration: none;
    transition: color 0.15s;
    white-space: nowrap;
}

.athletes-filter-clear:hover { color: var(--white); }

.athletes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
}

.athlete-card {
    background: var(--surface);
    padding: 1.4rem 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
}

.athlete-card:hover                 { background: var(--surface-2); }
.athlete-card:hover .card-arrow     { opacity: 1; transform: translateX(0); }

.athlete-card-top {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.athlete-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--surface-2);
    border: 1px solid var(--border-mid);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--grey-light);
    flex-shrink: 0;
}

.athlete-avatar--photo {
    object-fit: cover;
}

.athlete-card-info  { flex: 1; min-width: 0; }

.athlete-card-name {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.athlete-card-name-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.admin-badge {
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--danger);
    background: var(--danger-bg);
    border: 1px solid var(--danger-border);
    border-radius: 2px;
    padding: 0.15rem 0.5rem;
    flex-shrink: 0;
}

.athlete-card-name .coach-badge { flex-shrink: 0; }


.athlete-card-email {
    font-size: 0.7rem;
    color: var(--grey);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 0.15rem;
}

.athlete-card-programs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    min-height: 22px;
}

.athlete-no-program {
    font-size: 0.68rem;
    color: var(--grey);
    font-style: italic;
}

.athlete-card-footer {
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}

/* ══════════════════════════════════════════
   Athlètes — Profil (show)
   ══════════════════════════════════════════ */
.athlete-page {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.athlete-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.athlete-header-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--surface-2);
    border: 1px solid var(--border-mid);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--grey-light);
    flex-shrink: 0;
    align-self: center;
}

.athlete-header-avatar--photo {
    object-fit: cover;
}

.athlete-header-info { flex: 1; min-width: 0; }

.athlete-header-name {
    font-size: 1.4rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    line-height: 1.1;
    margin-bottom: 0.5rem;
}

.athlete-header-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.athlete-stats {
    display: flex;
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
}

/* ── Fiche athlète : résumé et onglets ── */

/* Le niveau et les compteurs, seuls éléments toujours visibles sous l'identité. La barre d'XP a
   besoin de largeur pour se lire, les compteurs se contentent d'une rangée de tuiles : d'où une
   colonne pour l'une et une pour l'autre, qui s'empilent dès que la place manque. */
.athlete-summary {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: stretch;
}

/* Annule le max-width de .xp-card, calibré pour la grille à trois cartes qu'elle occupait avant. */
.athlete-summary-xp {
    max-width: none;
    flex: 0 1 260px;
}

.athlete-summary .athlete-stats {
    flex: 1 1 320px;
}

/* Le dénominateur d'un ratio (9/10) : présent parce qu'il donne l'échelle, effacé parce que c'est
   le numérateur qu'on lit. */
.athlete-stat-total {
    font-size: 0.75em;
    font-weight: 600;
    color: var(--grey);
}

/* Même traitement que .admin-subnav, à dessein : les deux sont des sous-navigations, et rien ne
   justifierait qu'un onglet de page se lise autrement qu'un onglet d'espace admin. Le défilement
   latéral prend le relais du retour à la ligne sous le breakpoint tablette, comme là-bas. */
.athlete-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 1.75rem;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    scrollbar-width: none;
}

.athlete-tabs::-webkit-scrollbar { display: none; }

.athlete-tab {
    flex: none;
    font-family: inherit;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--grey);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    padding: 0.5rem 0.9rem;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

.athlete-tab:hover { color: var(--grey-light); }
.athlete-tab.active { color: var(--draft); border-bottom-color: var(--draft); }

/* Reprend l'écart que .athlete-page donnait aux sections quand elles étaient ses enfants directes
   — elles sont maintenant regroupées dans un panneau, qui doit donc l'espacer lui-même. */
.athlete-tab-panel {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.athlete-stat {
    flex: 1;
    background: var(--surface);
    padding: 1.2rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.athlete-stat-value {
    font-size: 1.6rem;
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1;
}

.athlete-stat-label {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--grey);
}

.progression-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.progression-grid {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.xp-card,
.radar-card {
    background: var(--surface-elevated);
    border: 1px solid var(--border-mid);
    border-radius: 8px;
    padding: 0.9rem 1.1rem;
    flex: 1;
    min-width: 160px;
    max-width: 200px;
}

.xp-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    justify-content: center;
}

.xp-level-badge {
    align-self: flex-start;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--white);
    background: rgba(56, 189, 248, 0.14);
    border: 1px solid rgba(56, 189, 248, 0.3);
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
}

.xp-bar-track {
    height: 9px;
    border-radius: 5px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    overflow: hidden;
}

.xp-bar-fill {
    height: 100%;
    border-radius: 5px;
    background: linear-gradient(90deg, #0284c7, #22d3ee);
}

.xp-bar-text {
    font-size: 0.68rem;
    color: var(--grey);
    font-weight: 700;
}

.radar-card {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Le radar seul sur sa rangée (onglet Performances de la fiche athlète), là où .radar-card est
   calibrée pour une grille à trois cartes. Une cible de 10 niveaux sur quatre axes dans 170 px de
   large donnait des sommets impossibles à départager. */
.progression-grid--single .radar-card {
    max-width: 360px;
}

.progression-grid--single .radar-svg {
    max-width: 320px;
}

.radar-svg {
    width: 100%;
    max-width: 170px;
    height: auto;
    overflow: visible;
}

.radar-ring {
    fill: none;
    stroke: var(--border);
    stroke-width: 1;
}

.radar-axis {
    stroke: var(--border);
    stroke-width: 1;
}

.radar-fill {
    opacity: 0.32;
}

.radar-edge {
    stroke-width: 2;
    fill: none;
}

.radar-dot {
    stroke: var(--surface-elevated);
    stroke-width: 2;
}

.radar-label {
    fill: var(--white);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.radar-empty {
    color: var(--grey);
    font-size: 0.85rem;
}

/* Défis du moment (onglet Progression de la fiche athlète). Jauge propre plutôt que la réutilisation
   de .xp-bar-* : celle-là porte le dégradé de l'XP, et une barre d'avancement de défi qui en reprend
   la couleur se lirait comme de l'XP gagné. */
.challenge-desc {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.75rem;
    color: var(--grey);
}

.challenge-period {
    white-space: nowrap;
}

.challenge-deadline {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.72rem;
    color: var(--grey);
}

.challenge-progress {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 120px;
}

.challenge-progress-track {
    height: 4px;
    border-radius: 2px;
    background: var(--surface-2);
    overflow: hidden;
}

.challenge-progress-fill {
    height: 100%;
    border-radius: 2px;
    background: var(--grey-light);
}

.challenge-progress-text {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--grey);
    white-space: nowrap;
}

.assign-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.assign-section-title {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--grey);
}

.assign-btn {
    flex-shrink: 0;
    padding: 0.45rem 1rem;
    font-size: 0.72rem;
}

.athlete-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 5rem 2rem;
    text-align: center;
    color: var(--grey);
    border: 1px solid var(--border);
    border-radius: 4px;
}

.athlete-empty svg { width: 36px; height: 36px; opacity: 0.3; }
.athlete-empty p   { font-size: 0.82rem; }

/* ── Sections de performance ── */
.perf-section { display: flex; flex-direction: column; gap: 1rem; }

.perf-section-summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    padding: 0.6rem 0;
    user-select: none;
}

.perf-section-summary::-webkit-details-marker { display: none; }

.perf-section-title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--grey);
}

.perf-section-chevron {
    margin-left: auto;
    color: var(--grey);
    transition: transform 0.2s;
}

.perf-section-chevron svg { width: 14px; height: 14px; display: block; }
.perf-section[open] .perf-section-chevron { transform: rotate(180deg); }
.perf-section:not([open]) .perf-metrics-grid { display: none; }

.perf-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
}

/* ── Carte métrique (details/summary) ── */
.perf-card {
    background: var(--surface);
}

.perf-card[open] { background: var(--surface-2); }

.perf-card-summary {
    list-style: none;
    padding: 1.3rem 1.5rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    position: relative;
    transition: background 0.15s;
}

.perf-card-summary::-webkit-details-marker { display: none; }
.perf-card-summary:hover { background: var(--hover-bg-strong); }

.perf-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding-right: 1.5rem;
}

.perf-card-name {
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.perf-card-type {
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--grey);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 2px;
    padding: 0.15rem 0.45rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.perf-card[open] .perf-card-type { background: var(--surface); }

.perf-card-body { display: flex; flex-direction: column; gap: 0.6rem; }

.perf-pr { display: flex; flex-direction: column; gap: 0.2rem; }

.perf-pr-label {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--grey);
}

.perf-pr-value {
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1;
}

.perf-pr-value small {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--grey-light);
}

.perf-pr-date {
    font-size: 0.65rem;
    color: var(--grey);
    letter-spacing: 0.04em;
}

.perf-card-meta {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.perf-count {
    font-size: 0.64rem;
    color: var(--grey);
}

.perf-card-chevron {
    position: absolute;
    top: 1.3rem;
    right: 1.2rem;
    color: var(--grey);
    transition: transform 0.2s;
}

.perf-card-chevron svg { width: 14px; height: 14px; }
.perf-card[open] .perf-card-chevron { transform: rotate(180deg); }

/* ── Historique ── */
.perf-history {
    border-top: 1px solid var(--border);
    overflow-x: auto;
}

.perf-history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
}

.perf-history-table th {
    padding: 0.6rem 1.5rem;
    text-align: left;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--grey);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.perf-history-table td {
    padding: 0.65rem 1.5rem;
    border-bottom: 1px solid var(--border);
    color: var(--grey-light);
    vertical-align: top;
}

.perf-history-table tr:last-child td { border-bottom: none; }
.perf-history-table tr:hover td { background: var(--hover-bg); }

.perf-row--pr td { color: var(--white); }

.perf-row-date  { white-space: nowrap; color: var(--grey); font-size: 0.7rem; }
.perf-row-value { font-weight: 700; color: var(--white); }
.perf-row-rm    { white-space: nowrap; color: var(--grey); }
.perf-row-notes { color: var(--grey); max-width: 200px; }

.pr-badge {
    display: inline-block;
    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--active);
    background: var(--active-bg);
    border: 1px solid var(--active-border);
    border-radius: 2px;
    padding: 0.1rem 0.4rem;
    margin-left: 0.4rem;
    vertical-align: middle;
}

/* ══════════════════════════════════════════
   Taux de complétion — widget semaine
   ══════════════════════════════════════════ */
.completion-chip {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--grey-light);
    background: var(--surface-2);
    border: 1px solid var(--border-mid);
    border-radius: 2px;
    padding: 0.5rem 0.75rem;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.completion-chip:hover { border-color: var(--border-focus); }

.completion-chip svg         { width: 11px; height: 11px; flex-shrink: 0; }
.completion-chip--full       { color: var(--active); border-color: var(--active-border); background: var(--active-bg); }
.completion-chip-value       { font-weight: 800; }

/* ══════════════════════════════════════════
   Sélecteur de template (formulaire bloc)
   ══════════════════════════════════════════ */
.tpl-select-group select {
    border-style: dashed;
    color: var(--grey);
}

/* La form dans le footer ne doit pas ajouter de hauteur */
.modal-footer-form { margin: 0; display: flex; align-items: center; }

#template-save-msg:empty { display: none; }

/* ── Modal header avec sous-titre ── */
.modal-header-info { display: flex; flex-direction: column; gap: 0.15rem; }
.modal-subtitle { font-size: 0.7rem; color: var(--grey); font-weight: 500; }

/* ── Liste des scores ──
   Une ligne porte quatre informations d'importance décroissante : qui, combien, dans quelles
   conditions, puis ce que le groupe en a dit. Le nom et la valeur partagent la première ligne —
   c'est la comparaison que le coach vient faire, et elle ne se lisait pas quand la valeur était
   reléguée sous le nom. */
.scores-empty {
    font-size: 0.82rem;
    color: var(--grey);
    text-align: center;
    padding: 1.5rem 0;
    margin: 0;
}

/* Règle de classement, mode d'emploi des points : ce que la liste seule ne dit pas. */
.scores-legend {
    font-size: 0.72rem;
    line-height: 1.5;
    color: var(--grey);
    background: var(--surface-2);
    border-radius: 6px;
    padding: 0.5rem 0.7rem;
    margin: 0 0 0.85rem;
}
.scores-legend strong { color: var(--grey-light); font-weight: 700; }

.scores-list { display: flex; flex-direction: column; gap: 0; }

/* Dans la modale de la semaine, la liste vit à l'intérieur d'une carte bordée : elle reprend son
   retrait horizontal pour que les lignes ne collent pas au trait. */
.scores-list--boxed .score-row { padding-left: 1rem; padding-right: 1rem; }

.score-row {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--border);
}
.score-row:last-child { border-bottom: none; }

.score-row-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.score-rank {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin-top: 0.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: 800;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--grey-light);
}
.score-rank--1 { background: var(--medal-1-bg); color: var(--medal-1); }
.score-rank--2 { background: var(--medal-2-bg); color: var(--medal-2); }
.score-rank--3 { background: var(--medal-3-bg); color: var(--medal-3); }

/* Bloc non classable (Réalisé / Non) : la pastille garde la place pour que les lignes restent
   alignées, mais n'annonce pas un rang qui n'existe pas. */
.score-rank--flat { background: none; color: var(--grey); }

.score-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--surface-2);
    border: 1px solid var(--border-mid);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--grey-light);
    flex-shrink: 0;
}
.score-avatar--photo { object-fit: cover; }

.score-headline {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
}
.score-athlete-name {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--white);
    min-width: 0;
    overflow-wrap: anywhere;
}
.score-value {
    font-size: 1.02rem;
    font-weight: 800;
    color: var(--white);
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.score-meta {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}
.score-recorded-at {
    font-size: 0.68rem;
    color: var(--grey);
}

.score-rxd {
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    color: var(--active);
    background: var(--active-bg);
    border: 1px solid var(--active-border);
    border-radius: 3px;
    padding: 0.1rem 0.35rem;
}
.score-scaled {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--draft);
    background: var(--draft-bg);
    border: 1px solid var(--draft-border);
    border-radius: 3px;
    padding: 0.1rem 0.35rem;
}
.score-notes {
    font-size: 0.75rem;
    color: var(--grey-light);
    line-height: 1.4;
    white-space: pre-wrap;
    border-left: 2px solid var(--border-mid);
    padding-left: 0.5rem;
}

/* ── Félicitations et commentaires ──
   Ce que les athlètes se sont dit dans l'app, en lecture seule : le back-office n'a pas de bouton
   Féliciter, un coach ne poste pas depuis une vue d'administration. */
.score-feedback {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.1rem;
}

.score-feedback-icon {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

.score-cheers {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--active);
}
.score-cheers-text {
    font-size: 0.72rem;
    color: var(--grey-light);
    line-height: 1.35;
}
.score-cheers-text strong { color: var(--white); font-weight: 700; }

.score-comments {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.score-comment {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
}

.score-comment-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--surface-2);
    border: 1px solid var(--border-mid);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.55rem;
    font-weight: 800;
    color: var(--grey-light);
    flex-shrink: 0;
}
.score-comment-avatar--photo { object-fit: cover; }

.score-comment-body { flex: 1; min-width: 0; }

.score-comment-head {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.score-comment-author {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--white);
}
.score-comment-date {
    font-size: 0.65rem;
    color: var(--grey);
}
.score-comment-text {
    font-size: 0.74rem;
    color: var(--grey-light);
    line-height: 1.4;
    overflow-wrap: anywhere;
}

/* Vue d'ensemble : les compteurs disent qu'il y a eu des réactions, le détail se lit bloc par bloc. */
.score-feedback-counts {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.score-feedback-count {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--grey);
}
.score-feedback-count:first-child { color: var(--active); }

/* ── Modale scores de la semaine ── */
.week-scores-body {
    max-height: 75vh;
    overflow-y: auto;
}

.week-scores-block {
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    /* .modal-body est une colonne flex : sans ça, une semaine chargée écrase ses cartes pour
       tenir dans la hauteur disponible, et `overflow: hidden` rogne ce qui dépasse — le
       classement perdait sa liste, les blocs la moitié de leur en-tête. C'est la carte qui garde
       sa taille, c'est le corps de la modale qui défile. */
    flex-shrink: 0;
}

.week-scores-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem 1rem;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
}

.week-scores-block-head-info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.week-scores-block-title {
    font-size: 0.82rem;
    font-weight: 800;
    margin: 0;
}

.week-scores-block-meta {
    font-size: 0.66rem;
    color: var(--grey);
}

.week-scores-block-link {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    flex-shrink: 0;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--grey-light);
    text-decoration: none;
    padding: 0.25rem 0.4rem;
    border-radius: 5px;
}
.week-scores-block-link svg { width: 12px; height: 12px; }
.week-scores-block-link:hover { color: var(--white); background: var(--hover-bg-strong); }

.week-scores-block .scores-empty { padding: 1rem; }

/* Les blocs restés vides : présents parce que « personne n'a rempli » est une information,
   repliés sur une ligne parce que ce n'en est qu'une. */
.week-scores-unscored {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex-shrink: 0;
    padding: 0.6rem 0.75rem;
    border: 1px dashed var(--border-mid);
    border-radius: 8px;
}
.week-scores-unscored-count {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--grey-light);
}
.week-scores-unscored-list {
    font-size: 0.68rem;
    color: var(--grey);
    line-height: 1.4;
}

/* ── Classement de la semaine ──
   Le meilleur athlète est nommé en haut, en toutes lettres, avant la liste : « 1 » dans une
   pastille et un total de points ne disent pas d'eux-mêmes qui a gagné la semaine ni pourquoi. */
.week-leaderboard {
    border-color: var(--active-border);
    background: var(--active-bg);
}
.week-leaderboard .week-scores-block-header {
    background: none;
    border-bottom-color: var(--active-border);
}

.week-leaderboard-lead {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--active-border);
}
.week-leaderboard-crown { font-size: 1.1rem; line-height: 1; }
.week-leaderboard-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--surface-2);
    border: 1px solid var(--active-border-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--active);
    flex-shrink: 0;
}
.week-leaderboard-avatar--photo { object-fit: cover; }

.week-leaderboard-lead-info { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.week-leaderboard-lead-name {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--white);
    overflow-wrap: anywhere;
}
.week-leaderboard-lead-detail {
    font-size: 0.72rem;
    color: var(--active);
    font-weight: 600;
}
.week-leaderboard-lead-detail sup { font-size: 0.6em; }

.week-leaderboard-list { display: flex; flex-direction: column; }

.week-leaderboard-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--border);
}
.week-leaderboard-row:last-child { border-bottom: none; }
.week-leaderboard-row.is-winner { background: var(--active-bg); }

.week-leaderboard-row .score-rank { margin-top: 0; }

.week-leaderboard-athlete { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.05rem; }
.week-leaderboard-name {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--white);
    overflow-wrap: anywhere;
}
.week-leaderboard-detail { font-size: 0.66rem; color: var(--grey); }

.week-leaderboard-points {
    font-size: 1rem;
    font-weight: 800;
    color: var(--white);
    white-space: nowrap;
    flex-shrink: 0;
}
.week-leaderboard-points-unit {
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--grey);
    margin-left: 0.15rem;
}
.week-leaderboard-row.is-winner .week-leaderboard-points { color: var(--active); }

.week-leaderboard-legend {
    font-size: 0.68rem;
    line-height: 1.5;
    color: var(--grey);
    padding: 0.6rem 1rem 0.7rem;
    margin: 0;
    border-top: 1px solid var(--border);
}

.template-saved-notice {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.72rem;
    color: var(--active);
    padding: 0.65rem 1.25rem;
    border-top: 1px solid var(--active-border);
    background: var(--active-bg);
    border-radius: 0 0 6px 6px;
}

.template-saved-notice svg { width: 13px; height: 13px; flex-shrink: 0; }
.template-saved-notice a   { color: var(--active); text-decoration: underline; }

/* ══════════════════════════════════════════
   Bibliothèque de blocs
   ══════════════════════════════════════════ */
.library-card-score {
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--grey);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 2px;
    padding: 0.15rem 0.45rem;
    white-space: nowrap;
}

.btn-library-delete {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--grey);
    padding: 0.2rem;
    display: flex;
    align-items: center;
    transition: color 0.15s;
    border-radius: 2px;
}

.btn-library-delete:hover { color: var(--danger); }
.btn-library-delete svg   { width: 13px; height: 13px; }

/* ══════════════════════════════════════════
   Garmin — Block type badge + export button
   ══════════════════════════════════════════ */
.block-card-meta {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    margin-bottom: 0.3rem;
}

.block-type-badge {
    display: inline-flex;
    align-items: center;
    font-size: calc(0.6rem * var(--block-font-scale, 1));
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.15rem 0.45rem;
    border-radius: 3px;
    flex-shrink: 0;
}

.block-type-badge--run      { background: rgba(74,222,128,0.10); color: #4ade80; border: 1px solid rgba(74,222,128,0.22); }
.block-type-badge--strength { background: rgba(96,165,250,0.10); color: #60a5fa; border: 1px solid rgba(96,165,250,0.22); }
.block-type-badge--cardio   { background: rgba(248,113,113,0.10); color: #f87171; border: 1px solid rgba(248,113,113,0.22); }
.block-type-badge--wod      { background: rgba(251,191,36,0.10);  color: #fbbf24; border: 1px solid rgba(251,191,36,0.22); }
.block-type-badge--skill    { background: rgba(192,132,252,0.10); color: #c084fc; border: 1px solid rgba(192,132,252,0.22); }
.block-type-badge--rest     { background: rgba(45,212,191,0.10);  color: #2dd4bf; border: 1px solid rgba(45,212,191,0.22); }

.btn-garmin-export {
    position: absolute;
    top: 0.45rem;
    right: 0.45rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.62rem;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    background: rgba(74,222,128,0.10);
    border: 1px solid rgba(74,222,128,0.25);
    border-radius: 3px;
    color: #4ade80;
    text-decoration: none;
    cursor: pointer;
    z-index: 3;
    opacity: 0;
    transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}

.block-card-wrap:hover .btn-garmin-export { opacity: 1; }

.btn-garmin-export:hover {
    background: rgba(74,222,128,0.20);
    border-color: rgba(74,222,128,0.45);
}

.btn-garmin-export svg { flex-shrink: 0; }

/* ── Metric autocomplete ───────────────────────────────────── */

.autocomplete-wrap { position: relative; }

.metric-suggestions {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    z-index: 200;
    background: #1a2035;
    border: 1px solid #2e3a5a;
    border-radius: 8px;
    max-height: 220px;
    overflow-y: auto;
    box-shadow: 0 6px 20px rgba(0,0,0,.45);
}

.metric-suggestion {
    display: flex;
    align-items: baseline;
    gap: 10px;
    width: 100%;
    padding: 7px 12px;
    background: none;
    border: none;
    border-bottom: 1px solid #22304a;
    cursor: pointer;
    text-align: left;
    color: #e2e8f0;
    font-size: .875rem;
    transition: background .1s;
}
.metric-suggestion:last-child { border-bottom: none; }
.metric-suggestion:hover,
.metric-suggestion.is-active  { background: #243058; outline: none; }

.metric-suggestion-slug {
    font-family: ui-monospace, monospace;
    font-size: .82rem;
    font-weight: 600;
    color: #60a5fa;
    flex-shrink: 0;
}
.metric-suggestion-slug mark {
    background: none;
    color: #fbbf24;
}
.metric-suggestion-name {
    color: #94a3b8;
    font-size: .8rem;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.metric-suggestion-unit {
    color: #64748b;
    font-size: .75rem;
    font-style: italic;
    flex-shrink: 0;
}

/* ══════════════════════════════════════════
   Product config — Admin-only payment mode
   ══════════════════════════════════════════ */
.product-config-section {
    margin-top: 0.75rem;
    padding: 0.9rem;
    border: 1px solid var(--border-mid);
    border-radius: 6px;
    background: var(--surface-2);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.product-config-section-title {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #fbbf24;
    margin: 0;
}

.product-config-section-title svg { flex-shrink: 0; stroke: #fbbf24; width: 14px; height: 14px; }

/* ══════════════════════════════════════════
   Garmin — Workout step builder
   ══════════════════════════════════════════ */
.garmin-section {
    margin-top: 0.75rem;
    padding: 0.9rem;
    border: 1px solid var(--border-mid);
    border-radius: 6px;
    background: var(--surface-2);
}

.garmin-section-title {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #4ade80;
    margin-bottom: 0.75rem;
}

.garmin-section-title svg { flex-shrink: 0; stroke: #4ade80; }

.garmin-name-label { font-size: 0.75rem; color: var(--grey-light); }

.garmin-name-input {
    display: block;
    width: 100%;
    margin-top: 0.3rem;
    padding: 0.4rem 0.6rem;
    background: var(--surface);
    border: 1px solid var(--border-mid);
    border-radius: 4px;
    color: var(--white);
    font-size: 0.8rem;
    margin-bottom: 0.6rem;
}

.garmin-name-input:focus {
    outline: none;
    border-color: rgba(74,222,128,0.35);
}

/* Step list */
.garmin-steps {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 0.6rem;
}

/* Base step */
.garmin-step {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--surface-elevated);
    flex-wrap: wrap;
    border-left-width: 3px;
}

.garmin-step--warmup   { border-left-color: #4ade80; }
.garmin-step--active   { border-left-color: #f87171; }
.garmin-step--recovery { border-left-color: #60a5fa; }
.garmin-step--cooldown { border-left-color: #2dd4bf; }

/* Repeat group overrides */
.garmin-step--repeat {
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    border-left-color: #fbbf24;
}

.garmin-step-type {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--white);
    min-width: 90px;
}

.garmin-field {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    color: var(--grey-light);
}

.garmin-field input[type="number"] {
    width: 56px;
    padding: 0.2rem 0.35rem;
    background: var(--surface);
    border: 1px solid var(--border-mid);
    border-radius: 3px;
    color: var(--white);
    font-size: 0.7rem;
    text-align: center;
}

.garmin-field--count input[type="number"] { width: 44px; }

.garmin-step-del {
    margin-left: auto;
    background: transparent;
    border: none;
    color: var(--grey);
    cursor: pointer;
    font-size: 0.7rem;
    padding: 0.15rem 0.3rem;
    border-radius: 3px;
    line-height: 1;
    flex-shrink: 0;
    transition: color 0.15s, background 0.15s;
}

.garmin-step-del:hover { color: var(--danger); background: var(--danger-bg); }
.garmin-step-del--right { margin-left: auto; }

/* Repeat group internals */
.garmin-repeat-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.6rem;
    flex-wrap: wrap;
}

.garmin-repeat-body {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0 0.6rem 0.4rem;
}

.garmin-repeat-body .garmin-step {
    border-radius: 3px;
}

.garmin-repeat-footer {
    display: flex;
    gap: 0.35rem;
    padding: 0.4rem 0.6rem;
    border-top: 1px solid var(--border);
}

/* Add-step buttons */
.garmin-add-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.btn-garmin-add {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 0.28rem 0.6rem;
    background: var(--surface);
    border: 1px solid var(--border-mid);
    border-radius: 6px;
    color: var(--grey-light);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.btn-garmin-add:hover {
    color: var(--white);
    border-color: var(--border-focus);
    background: var(--hover-bg-strong);
}

/* ══════════════════════════════════════════
   Page Profil
   ══════════════════════════════════════════ */
.profile-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
}

@media (max-width: 800px) {
    .profile-layout { grid-template-columns: 1fr; }
}

.profile-card {
    background: var(--surface);
    display: flex;
    flex-direction: column;
}

.profile-card-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--grey);
    padding: 1.4rem 1.8rem 0;
}

.profile-card-header svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.profile-form {
    display: contents;
}

.profile-fields {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.2rem 1.8rem;
    flex: 1;
}

.profile-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.profile-footer {
    padding: 1rem 1.8rem 1.6rem;
    display: flex;
    justify-content: flex-end;
}

.profile-hint {
    font-size: 0.68rem;
    color: var(--grey);
    line-height: 1.6;
    margin: 0;
}

/* Password inputs don't need auto-resize */
.profile-form input[type="password"] {
    -webkit-text-security: disc;
}

/* ══════════════════════════════════════════
   Page Administration
   ══════════════════════════════════════════ */

/* ── Onglet Admin ── */
.tab-link--admin { color: var(--draft); }
.tab-link--admin.active { color: var(--draft); border-bottom-color: var(--draft); }

/* ── Panel invitation ── */
.invite-panel {
    display: none;
    margin-bottom: 2rem;
}
.invite-panel.is-open { display: block; }

.invite-panel-inner {
    background: var(--surface);
    border: 1px solid var(--border-mid);
    border-radius: 4px;
    padding: 1.4rem 1.8rem;
}

.invite-panel-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--grey);
    margin-bottom: 1.2rem;
}

.invite-form { display: flex; flex-direction: column; gap: 1rem; }

.invite-roles {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.invite-role-option {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    background: var(--surface-2);
    border: 1px solid var(--border-mid);
    border-radius: 4px;
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: border-color 0.15s;
    flex: 1;
    min-width: 180px;
}

.invite-role-option:has(input:checked) {
    border-color: var(--border-focus);
}

.invite-role-option input[type="radio"] { margin-top: 0.15rem; flex-shrink: 0; }

.invite-role-label {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.invite-role-label strong { font-size: 0.8rem; font-weight: 700; color: var(--white); }
.invite-role-label span   { font-size: 0.7rem; color: var(--grey); }

/* ── Lien généré ── */
.invite-success { display: flex; flex-direction: column; gap: 0.75rem; }

.invite-success-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--active);
}

.invite-link-row { display: flex; gap: 0.5rem; align-items: center; }

.invite-link-input {
    flex: 1;
    background: var(--surface-2);
    border: 1px solid var(--border-mid);
    border-radius: 3px;
    color: var(--grey-light);
    font-size: 0.75rem;
    padding: 0.5rem 0.75rem;
    font-family: monospace;
    min-width: 0;
}

.btn-copy, .btn-copy-small {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: var(--surface-2);
    border: 1px solid var(--border-mid);
    border-radius: 3px;
    color: var(--grey-light);
    padding: 0.5rem 0.9rem;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s;
}

.btn-copy:hover, .btn-copy-small:hover {
    color: var(--white);
    border-color: var(--border-focus);
}

.btn-copy-small { padding: 0.3rem 0.65rem; font-size: 0.62rem; }

/* ── Table invitations ── */
.invitations-table-wrap { overflow-x: auto; }

.invitations-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}

.invitations-table th {
    text-align: left;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--grey);
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border);
}

.invitations-table td {
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid var(--border);
    color: var(--grey-light);
    vertical-align: middle;
}

.invitations-table tr.inv-used td,
.invitations-table tr.inv-expired td { opacity: 0.45; }

.inv-role {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.2rem 0.5rem;
    border-radius: 2px;
}

.inv-role--creator { color: var(--draft); background: color-mix(in srgb, var(--draft) 12%, transparent); }
.inv-role--coach   { color: var(--grey-light); background: var(--surface-2); }

.inv-status {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.inv-status--valid   { color: var(--active); }
.inv-status--used    { color: var(--grey); }
.inv-status--expired { color: var(--danger); }

/* ── Admin sub-nav ── */
.admin-subnav {
    display: flex;
    gap: 0;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--border);
}

.admin-subnav-link {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--grey);
    text-decoration: none;
    padding: 0.5rem 0.9rem;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s, border-color 0.15s;
}

.admin-subnav-link:hover { color: var(--grey-light); }
.admin-subnav-link.active { color: var(--draft); border-bottom-color: var(--draft); }

/* ── Metric filter bar ── */
.metric-filter-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.metric-filter-search {
    position: relative;
    flex: 1;
    min-width: 0;
}

.metric-filter-search svg {
    position: absolute;
    left: 0.65rem;
    top: 50%;
    transform: translateY(-50%);
    width: 13px;
    height: 13px;
    color: var(--grey);
    pointer-events: none;
}

.metric-filter-input {
    width: 100%;
    box-sizing: border-box;
    background: var(--surface);
    border: 1px solid var(--border-mid);
    border-radius: 6px;
    color: var(--white);
    font-size: 0.78rem;
    padding: 0.45rem 0.75rem 0.45rem 2rem;
    font-family: inherit;
    transition: border-color 0.15s;
}

.metric-filter-input::placeholder { color: var(--grey); }
.metric-filter-input:focus { outline: none; border-color: var(--border-focus); }

.metric-filter-select {
    background: var(--surface);
    border: 1px solid var(--border-mid);
    border-radius: 6px;
    color: var(--grey-light);
    font-size: 0.75rem;
    padding: 0.45rem 0.75rem;
    font-family: inherit;
    cursor: pointer;
    appearance: none;
    transition: border-color 0.15s;
    flex-shrink: 0;
    width: 160px;
}

.metric-filter-select:focus { outline: none; border-color: var(--border-focus); }

.metric-filter-reset {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    background: none;
    border: 1px solid var(--border-mid);
    border-radius: 6px;
    color: var(--grey);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    padding: 0;
}

.metric-filter-reset svg { width: 12px; height: 12px; }
.metric-filter-reset:hover { color: var(--grey-light); border-color: var(--border-focus); }

.metric-filter-empty {
    font-size: 0.78rem;
    color: var(--grey);
    padding: 1.5rem 0;
    text-align: center;
}

/* ── Metric types table ── */
.metric-types-table .metric-name-cell { font-weight: 600; color: var(--white); }

.metric-slug {
    font-size: 0.7rem;
    font-family: monospace;
    color: var(--grey-light);
    background: var(--surface-2);
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
}

.metric-recording { font-size: 0.75rem; color: var(--grey-light); }
.metric-unit      { font-size: 0.75rem; color: var(--grey); }

.metric-category {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.2rem 0.5rem;
    border-radius: 2px;
    background: var(--surface-2);
    color: var(--grey-light);
}

.metric-status {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.metric-status--active   { color: var(--active); }
.metric-status--archived { color: var(--grey); }

.metric-archived-row td { opacity: 0.45; }

/* ── Défis, sur /admin/quests ── */
.challenge-period { margin-bottom: 2rem; }

.challenge-period-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.6rem;
}

.challenge-period-title {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--grey-light);
}

.challenge-period-range {
    font-size: 0.7rem;
    color: var(--grey);
}

/* Le tirage en cours : fond teinté sur toute la ligne plus un filet à gauche, plutôt qu'une
   couleur de texte — dans un tableau d'une vingtaine de lignes, c'est la ligne entière qu'on doit
   repérer d'un coup d'œil, pas un mot dedans. */
.invitations-table tr.challenge-drawn td { background: var(--active-bg); }
.invitations-table tr.challenge-drawn td:first-child { box-shadow: inset 2px 0 0 var(--active); }

/* ── Athletes table ── */
.athletes-table td.athlete-name--coach { color: var(--active); font-weight: 600; }
.athletes-table td.athlete-name--admin { color: var(--danger); font-weight: 600; }

.sortable-th {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.sortable-th:hover { color: var(--grey-light); }
.sortable-th.is-active { color: var(--white); }

.sort-arrow { font-size: 0.55rem; opacity: 0.45; }
.sortable-th.is-active .sort-arrow { opacity: 1; }

.section-title-row { display: flex; align-items: center; gap: 0.75rem; }

.price-discount-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--draft);
    background: rgba(251, 191, 36, 0.1);
    border-radius: 20px;
    padding: 0.1rem 0.5rem;
    margin-left: 0.4rem;
    vertical-align: middle;
    cursor: default;
}
.price-discount-badge svg { width: 10px; height: 10px; }

/* Free (100% off) reads as neutral info, not a "special offer" — amber would overstate it. */
.price-discount-badge--free {
    color: var(--grey);
    background: var(--surface-2);
}

/* Custom tooltip: near-instant on hover, unlike the browser's native title delay. */
.price-discount-badge::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 7px);
    left: 50%;
    transform: translateX(-50%) translateY(3px);
    background: var(--surface-elevated);
    color: var(--white);
    border: 1px solid var(--border-mid);
    border-radius: 6px;
    padding: 0.35rem 0.6rem;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    box-shadow: var(--dropdown-shadow);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.08s ease-out, transform 0.08s ease-out;
    z-index: 50;
}
.price-discount-badge:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.price-sticker { color: var(--grey); font-size: 0.78em; margin-right: 0.35rem; }

/* Per-row "..." dropdown (athletes-table Action column) reuses .prog-menu-* — the
   wrap must anchor within the table cell rather than the page-level header. */
.athletes-actions .prog-menu-wrap  { display: inline-block; }
.athletes-actions .prog-menu-dropdown { text-align: left; }

.athletes-actions { white-space: nowrap; }

.metric-actions { display: flex; gap: 0.4rem; align-items: center; white-space: nowrap; }

.btn-action {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-decoration: none;
    background: none;
    border: 1px solid var(--border-mid);
    border-radius: 4px;
    color: var(--grey-light);
    padding: 0.3rem 0.6rem;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    font-family: inherit;
}

.btn-action svg { width: 11px; height: 11px; flex-shrink: 0; }
.btn-action:hover { color: var(--white); border-color: var(--border-focus); }

.btn-action--archive:hover { color: var(--danger); border-color: var(--danger-border, #f0606080); }
.btn-action--restore       { color: var(--active); border-color: color-mix(in srgb, var(--active) 35%, transparent); }
.btn-action--restore:hover { color: var(--active); border-color: var(--active); }

/* ── Détail d'un coupon (modal) ── */
.modal--coupon { width: clamp(480px, 62vw, 760px); }

/* ── Grille label/valeur générique (détail coupon, détail paiement, ...) ── */
.detail-heading {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--grey);
    margin: 0 0 0.75rem;
}

.detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem 1.2rem;
}

.detail-item     { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.detail-item--full { grid-column: 1 / -1; }
.detail-label    { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--grey); }
.detail-value    { font-size: 0.8rem; color: var(--white); word-break: break-word; }
.detail-value code { font-size: 0.75rem; }

/* ── Finance : master-detail ── */
.finance-tabs {
    display: flex;
    gap: 0.4rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1.25rem;
}

.finance-tab {
    padding: 0.6rem 0.9rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--grey);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s, border-color 0.15s;
}

.finance-tab:hover  { color: var(--white); }
.finance-tab.active { color: var(--active); border-bottom-color: var(--active); }

.finance-layout {
    display: grid;
    grid-template-columns: minmax(300px, 400px) 1fr;
    gap: 1.25rem;
    align-items: start;
}

.finance-master {
    border: 1px solid var(--border-mid);
    border-radius: 8px;
    overflow-y: auto;
    max-height: calc(100vh - 280px);
}

.finance-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid var(--border);
    transition: background 0.12s;
}

.finance-row:last-child  { border-bottom: none; }
.finance-row:hover       { background: var(--surface-2); }
.finance-row.is-selected { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--active); }

.finance-row-main     { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.finance-row-amount   { font-size: 0.85rem; font-weight: 700; color: var(--white); }
.finance-row-customer { font-size: 0.7rem; color: var(--grey); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.finance-row-customer--wide { max-width: 480px; white-space: normal; }
.finance-row-meta     { display: flex; flex-direction: column; align-items: flex-end; gap: 0.3rem; flex-shrink: 0; }
.finance-row-date     { font-size: 0.65rem; color: var(--grey); }

.finance-detail {
    border: 1px solid var(--border-mid);
    border-radius: 8px;
    min-height: 240px;
}

.finance-detail-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 240px;
    color: var(--grey);
    font-size: 0.8rem;
    text-align: center;
    padding: 0 2rem;
}

/* ── Finance : impayés (dunning) — liste plate, pas de master-detail ── */
.dunning-list {
    border: 1px solid var(--border-mid);
    border-radius: 8px;
    overflow: hidden;
}

.dunning-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
}

.dunning-row:last-child { border-bottom: none; }

.dunning-row-main {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 220px;
    flex: 1 1 260px;
}

.dunning-row-top { display: flex; align-items: center; gap: 0.75rem; }

.dunning-row-link {
    font-size: 0.68rem;
    color: var(--grey);
    text-decoration: none;
    border-bottom: 1px solid var(--border);
    width: fit-content;
    transition: color 0.15s, border-color 0.15s;
}
.dunning-row-link:hover { color: var(--white); border-color: var(--border-focus); }

.dunning-row-meta {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1 1 220px;
}

.dunning-row-action { flex-shrink: 0; }

.metric-status--danger  { color: var(--danger); }
.metric-status--pending { color: var(--draft); }

/* ── Form 2-col grid ── */
.form-two-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 500px) {
    .form-two-cols { grid-template-columns: 1fr; }
}

/* ── btn-cancel ── */
.btn-cancel {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--grey);
    text-decoration: none;
    transition: color 0.15s;
}

.btn-cancel:hover { color: var(--grey-light); }

/* ── Toggle mot de passe ── */
.pw-wrap {
    position: relative;
}

.pw-wrap input {
    padding-right: 2.75rem !important;
}

.pw-toggle {
    position: absolute;
    right: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0.2rem;
    cursor: pointer;
    color: var(--grey);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s;
}

.pw-toggle:hover { color: var(--white); }
.pw-toggle svg   { width: 16px; height: 16px; display: block; }

.pw-rules {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.pw-rules li {
    font-size: 0.7rem;
    color: var(--grey);
    padding-left: 1.25rem;
    position: relative;
    transition: color 0.2s;
}

.pw-rules li::before {
    content: '✗';
    position: absolute;
    left: 0;
    transition: color 0.2s;
}

.pw-rules li[data-valid="true"] {
    color: #4ade80;
}

.pw-rules li[data-valid="true"]::before {
    content: '✓';
}

/* ── Block preview — modal élargie avec aperçu téléphone ── */

.modal--with-preview {
    width: clamp(680px, 80vw, 1160px);
}

.block-form-split {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
}

.block-form-split-left {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.block-form-split-right {
    flex: 0 0 240px;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.preview-panel-title {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--grey);
    margin: 0;
}

/* Maquette téléphone */
.phone-mockup {
    background: var(--surface);
    border: 1.5px solid var(--border-mid);
    border-radius: 18px;
    padding: 0.75rem 0.875rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-height: 180px;
}

.phone-notch {
    width: 36px;
    height: 4px;
    background: var(--border-strong);
    border-radius: 2px;
    margin: 0 auto;
    flex-shrink: 0;
}

.phone-screen {
    font-size: 0.78rem;
    line-height: 1.65;
    color: var(--white);
    word-break: break-word;
    flex: 1;
}

.preview-empty {
    color: var(--grey);
    font-style: italic;
}

.preview-slug {
    background: color-mix(in srgb, var(--draft) 14%, transparent);
    color: var(--draft);
    border-radius: 3px;
    padding: 0 3px;
    font-size: 0.85em;
    font-family: monospace;
}

.preview-resolved {
    font-weight: 700;
    color: var(--active);
    background: var(--active-bg);
    border-radius: 3px;
    padding: 0 3px;
}

/* Inputs RM */
.rm-inputs-section {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    border-top: 1px solid var(--border);
    padding-top: 0.65rem;
}

.rm-inputs-title {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--grey);
    margin: 0;
}

.rm-inputs-hint {
    font-size: 0.62rem;
    line-height: 1.35;
    color: var(--grey);
    margin: 0 0 0.15rem;
}

.rm-input-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.rm-input-label {
    flex: 1;
    font-size: 0.7rem;
    color: var(--grey-light);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rm-input-field {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
}

.rm-input {
    width: 62px;
    padding: 0.3rem 0.45rem;
    background: var(--surface);
    border: 1px solid var(--border-mid);
    border-radius: 8px;
    color: var(--white);
    font-size: 0.78rem;
    font-family: inherit;
    text-align: right;
    -moz-appearance: textfield;
}

.rm-input::-webkit-outer-spin-button,
.rm-input::-webkit-inner-spin-button { -webkit-appearance: none; }

.rm-input:focus {
    outline: none;
    border-color: var(--border-focus);
}

/* Témoin d'enregistrement : la valeur simulée est persistée sur la métrique. */
.rm-input-row.is-saved .rm-input       { border-color: var(--active-border-strong); }
.rm-input-row.is-save-failed .rm-input { border-color: var(--danger-border); }

.rm-input-unit {
    font-size: 0.65rem;
    color: var(--grey);
    min-width: 16px;
}

/* ══════════════════════════════════════════
   Clipboard — copier / couper / coller
   ══════════════════════════════════════════ */

/* Checkbox de bloc (haut-droite, visible au survol) */
.block-checkbox-wrap {
    position: absolute;
    top: 0.45rem;
    right: 0.45rem;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    opacity: 0;
    transition: opacity 0.15s;
    cursor: pointer;
}

.block-card-wrap:hover .block-checkbox-wrap { opacity: 1; }

.block-checkbox-wrap input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: var(--active);
    cursor: pointer;
}

/* Quand la case est cochée, toujours visible */
.block-checkbox-wrap:has(input:checked) { opacity: 1; }

/* Bloc sélectionné — léger contour coloré */
.block-card-wrap:has(.block-checkbox:checked) .block-card {
    outline: 2px solid var(--active);
    outline-offset: -2px;
}

/* Checkbox de jour (haut-droite du header, visible au survol) */
.day-checkbox-wrap {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    opacity: 0;
    transition: opacity 0.15s;
    cursor: pointer;
}

.cal-day-header { position: relative; }
.cal-day:hover .day-checkbox-wrap  { opacity: 1; }
.day-checkbox-wrap:has(input:checked)      { opacity: 1; }
.day-checkbox-wrap:has(input:indeterminate){ opacity: 1; }

.day-checkbox-wrap input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: var(--active);
    cursor: pointer;
}

/* Bouton "Coller" dans chaque jour */
.btn-paste-day {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    width: 100%;
    padding: 0.3rem 0.6rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #4ade80;
    background: rgba(74, 222, 128, 0.08);
    border: 1px dashed rgba(74, 222, 128, 0.35);
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    margin-bottom: 0.3rem;
}

.btn-paste-day:hover {
    background: rgba(74, 222, 128, 0.16);
    border-color: rgba(74, 222, 128, 0.6);
}

.btn-paste-day svg { width: 11px; height: 11px; flex-shrink: 0; }

/* Barres fixes en bas d'écran */
.clipboard-bar {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 800;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.9rem;
    background: var(--surface-elevated);
    border: 1px solid var(--border-mid);
    border-radius: 6px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.45);
    white-space: nowrap;
    font-size: 0.78rem;
}

.clipboard-bar[hidden] { display: none; }

.clipboard-bar-cancel {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--grey);
    background: none;
    border: 1px solid var(--border-mid);
    border-radius: 3px;
    padding: 0.35rem 0.7rem;
    cursor: pointer;
    text-align: center;
    transition: color 0.15s, border-color 0.15s;
}

.clipboard-bar-cancel:hover { color: var(--white); border-color: var(--border-focus); }

.clipboard-bar-count {
    color: var(--grey-light);
    font-size: 0.75rem;
    text-align: center;
    padding: 0.1rem 0;
}

.clipboard-bar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.35rem 0.85rem;
    border-radius: 3px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.15s, border-color 0.15s;
}

.clipboard-bar-btn svg { width: 11px; height: 11px; }

.clipboard-bar-btn--copy {
    color: var(--active);
    background: var(--active-bg);
    border-color: var(--active-border);
}

.clipboard-bar-btn--copy:hover { border-color: var(--active-border-strong); }

.clipboard-bar-btn--cut {
    color: #60a5fa;
    background: rgba(96,165,250,0.08);
    border-color: rgba(96,165,250,0.25);
}

.clipboard-bar-btn--cut:hover { border-color: rgba(96,165,250,0.45); }

.clipboard-bar-btn--delete {
    color: #ef4444;
    background: rgba(239,68,68,0.08);
    border-color: rgba(239,68,68,0.3);
}

.clipboard-bar-btn--delete:hover { background: rgba(239,68,68,0.18); }

/* Barre presse-papier actif */
.clipboard-bar--paste .clipboard-bar-info {
    font-weight: 700;
    color: #4ade80;
    text-align: center;
}

.clipboard-bar--paste .clipboard-bar-hint {
    color: var(--grey);
    font-size: 0.72rem;
    text-align: center;
    line-height: 1.4;
    white-space: normal;
}

/* ══ Ticket modal (accessible depuis toutes les pages) ══ */
.ticket-modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 900;
    background: var(--modal-backdrop);
    align-items: center;
    justify-content: center;
}
.ticket-modal-backdrop.is-open { display: flex; }

.ticket-modal {
    background: var(--surface-elevated);
    border: 1px solid var(--border-mid);
    border-radius: 8px;
    box-shadow: var(--modal-shadow);
    width: 100%;
    max-width: 480px;
    margin: 1rem;
}

.ticket-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem 0.75rem;
    border-bottom: 1px solid var(--border);
}

.ticket-modal-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--white);
}

.ticket-modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    color: var(--grey);
    cursor: pointer;
    transition: color 0.15s;
}
.ticket-modal-close svg { width: 14px; height: 14px; }
.ticket-modal-close:hover { color: var(--white); }

.ticket-modal-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 1.25rem 1.25rem;
}

.ticket-modal-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--grey-light);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.ticket-modal-input,
.ticket-modal-textarea {
    width: 100%;
    background: var(--surface-2);
    border: 1px solid var(--border-mid);
    border-radius: 4px;
    color: var(--white);
    font-size: 0.82rem;
    padding: 0.5rem 0.75rem;
    font-family: inherit;
    transition: border-color 0.15s;
    box-sizing: border-box;
}
.ticket-modal-input:focus,
.ticket-modal-textarea:focus { outline: none; border-color: var(--border-focus); }
.ticket-modal-textarea { resize: vertical; min-height: 100px; }

.ticket-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

/* ══ Admin — liste des tickets ══ */
.ticket-filters {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}

.ticket-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.3rem 0.75rem;
    border-radius: 20px;
    border: 1px solid var(--border-mid);
    color: var(--grey);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    user-select: none;
}
.ticket-filter-chip input { display: none; }

.ticket-filter-chip--open.is-active       { color: #4ade80; border-color: rgba(74,222,128,0.35); background: rgba(74,222,128,0.08); }
.ticket-filter-chip--in_progress.is-active { color: #60a5fa; border-color: rgba(96,165,250,0.35); background: rgba(96,165,250,0.08); }
.ticket-filter-chip--closed.is-active     { color: var(--grey-light); border-color: var(--border-mid); background: var(--hover-bg-strong); }

.ticket-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.5rem 2rem;
}

.ticket-card {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ticket-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.ticket-card-title {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--white);
}

.ticket-badge {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    flex-shrink: 0;
}
.ticket-badge--open        { color: #4ade80; background: rgba(74,222,128,0.1); }
.ticket-badge--in_progress { color: #60a5fa; background: rgba(96,165,250,0.1); }
.ticket-badge--closed      { color: var(--grey); background: var(--hover-bg-strong); }

.ticket-card-desc {
    font-size: 0.8rem;
    color: var(--grey-light);
    line-height: 1.5;
    margin: 0;
}

.ticket-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.25rem;
}

.ticket-card-meta {
    font-size: 0.72rem;
    color: var(--grey);
}

.ticket-status-form { margin: 0; }

.ticket-status-select {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    background: var(--surface-elevated);
    border: 1px solid var(--border-mid);
    border-radius: 4px;
    color: var(--white);
    cursor: pointer;
    font-family: inherit;
}
.ticket-status-select:focus { outline: none; border-color: var(--border-focus); }

.ticket-empty {
    color: var(--grey);
    font-size: 0.82rem;
    text-align: center;
    padding: 3rem 0;
}

/* ══ Bibliothèque de médias ══ */
.section-header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.search-form { display: flex; gap: 0.5rem; }
.sort-select {
    font-size: 0.78rem;
    padding: 0.4rem 0.75rem;
    background: var(--surface-2);
    border: 1px solid var(--border-mid);
    border-radius: 4px;
    color: var(--white);
    font-family: inherit;
    cursor: pointer;
}
.sort-select:focus { outline: none; border-color: var(--border-focus); }
.search-input {
    font-size: 0.78rem;
    padding: 0.4rem 0.75rem;
    background: var(--surface-2);
    border: 1px solid var(--border-mid);
    border-radius: 4px;
    color: var(--white);
    font-family: inherit;
    width: 200px;
    transition: border-color 0.15s;
}
.search-input:focus { outline: none; border-color: var(--border-focus); }

.media-table-wrap {
    padding: 0 2rem 2rem;
    overflow-x: auto;
}

.media-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.media-table th {
    text-align: left;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--grey);
    padding: 0 0.75rem 0.75rem;
    border-bottom: 1px solid var(--border);
}

.media-row td {
    padding: 0.75rem;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.media-row:last-child td { border-bottom: none; }
.media-row:hover td { background: var(--hover-bg); }

.media-name { font-weight: 600; color: var(--white); max-width: 200px; }
.media-desc { color: var(--grey-light); max-width: 200px; font-size: 0.78rem; }

.media-url-link {
    color: var(--grey-light);
    text-decoration: none;
    font-size: 0.78rem;
    max-width: 280px;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}
.media-url-link:hover { color: var(--white); text-decoration: underline; }

.media-type-badge {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.2rem 0.55rem;
    border-radius: 20px;
}
.media-type-badge--youtube { color: #f87171; background: rgba(248,113,113,0.1); }
.media-type-badge--shorts  { color: #c084fc; background: rgba(192,132,252,0.1); }
.media-type-badge--none    { color: var(--grey); }

.media-owner { color: var(--grey-light); font-size: 0.78rem; }

.media-thumb-cell { width: 56px; }

.media-thumb-btn {
    position: relative;
    display: inline-flex;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 2px;
}
.media-thumb-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(0,0,0,0.3);
    opacity: 0;
    transition: opacity 0.15s;
    border-radius: 2px;
}
.media-thumb-play svg { width: 16px; height: 16px; }
.media-thumb-btn:hover .media-thumb-play,
.media-thumb-btn:focus-visible .media-thumb-play { opacity: 1; }

/* ── Modale lecteur vidéo ── */
html:has(.video-modal-backdrop),
body:has(.video-modal-backdrop) { overflow: hidden; }

.video-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 500;
    background: var(--modal-backdrop);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;
}
.video-modal { width: clamp(480px, 70vw, 960px); overflow: hidden; }
.video-modal-body { padding: 0; }
.video-modal-body iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: none;
    display: block;
}

/* ── Modale d'alerte doublon média ──
   Doit rester au-dessus du picker de médias plein écran (z-index 1100) : sinon, quand le
   doublon est détecté pendant que le picker est ouvert, l'alerte s'affiche bien dans le DOM
   mais reste cachée derrière le picker jusqu'à ce qu'on le ferme. */
.media-duplicate-backdrop { z-index: 1200; }
.media-duplicate-modal { width: clamp(320px, 90vw, 440px); }
.media-duplicate-message { font-size: 0.85rem; color: var(--grey-light); line-height: 1.5; }

/* ── Modale code d'abonnement athlète ── */
.subscribe-code-backdrop { z-index: 600; }
.subscribe-code-modal { width: clamp(300px, 90vw, 400px); }

/* ── Modale d'acceptation des CGU avant abonnement (terms_gate_controller.js) ──
   Réutilise .modal / .modal-header / .modal-body / .modal-footer ; ne redéfinit
   que la largeur et la typographie de son contenu. */
.terms-gate-modal { width: clamp(300px, 90vw, 460px); }

.terms-gate-text {
    font-size: 0.82rem;
    line-height: 1.65;
    color: var(--grey-light);
    margin-bottom: 1rem;
}

.terms-gate-link {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--active);
    text-decoration: none;
    border-bottom: 1px solid var(--active-border-strong);
    margin-bottom: 1rem;
}

.terms-gate-link:hover { border-bottom-color: var(--active); }

.terms-gate-meta {
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    color: var(--grey);
}

/* Mention affichée à la place de la case CGU quand l'athlète a déjà accepté la
   version en vigueur : l'information reste visible, sans redemander un clic. */
.consent-note {
    font-size: 0.7rem;
    line-height: 1.55;
    color: var(--grey);
}

.consent-note a {
    color: var(--active);
    text-decoration: none;
    border-bottom: 1px solid var(--active-border-strong);
}

.consent-note a:hover { border-bottom-color: var(--active); }

.subscribe-code-hint {
    font-size: 0.82rem;
    color: var(--grey-light);
    line-height: 1.5;
    margin-bottom: 1rem;
}

.subscribe-code-input {
    width: 100%;
    padding: 0.75rem;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.5em;
    text-align: center;
    background: var(--surface-2);
    border: 1px solid var(--border-mid);
    border-radius: 8px;
    color: var(--white);
    font-family: inherit;
}
.subscribe-code-input:focus { outline: none; border-color: var(--border-focus); }
.subscribe-code-input.has-error { border-color: var(--danger-border); }

.subscribe-code-error {
    font-size: 0.75rem;
    color: var(--danger);
    margin-top: 0.5rem;
}

.media-actions { white-space: nowrap; }

.media-actions-inner {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.media-btn-edit,
.media-btn-delete {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--grey);
    transition: color 0.15s, background 0.15s;
    text-decoration: none;
}
.media-btn-edit svg, .media-btn-delete svg { width: 13px; height: 13px; }
.media-btn-edit:hover  { color: var(--white); background: var(--hover-bg-strong); }
.media-btn-delete:hover { color: var(--danger); background: rgba(248,113,113,0.08); }

.media-delete-form { display: flex; }

/* ── Block media list (inside block form) ──────────────────────────────── */
.block-media-section label { display: block; margin-bottom: 0.5rem; }

.block-media-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
}

.block-media-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 6px;
}

.block-media-thumb {
    width: 56px;
    height: 42px;
    object-fit: cover;
    border-radius: 3px;
    flex-shrink: 0;
}

.block-media-thumb--empty {
    width: 56px;
    height: 42px;
    background: var(--surface-elevated);
    border-radius: 3px;
    flex-shrink: 0;
}

.block-media-name {
    flex: 1;
    min-width: 0;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--white);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.block-media-remove {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border: none;
    background: none;
    color: var(--grey);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s;
}
.block-media-remove:hover { color: var(--danger); background: rgba(248,113,113,0.1); }

.btn-media-open {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--grey);
    background: none;
    border: 1px dashed var(--border-mid);
    border-radius: 6px;
    padding: 0.4rem 0.75rem;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.btn-media-open:hover { color: var(--white); border-color: var(--border-focus); }

/* ── Full-screen media picker overlay ──────────────────────────────────── */
.media-picker-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: var(--surface);
    flex-direction: column;
    overflow: hidden;
}
.media-picker-overlay.is-open {
    display: flex;
}

.media-picker-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.media-picker-search {
    flex: 1;
    min-width: 0;
    background: var(--surface-2);
    border: 1px solid var(--border-mid);
    border-radius: 6px;
    color: var(--white);
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
}
.media-picker-search:focus { outline: none; border-color: var(--border-focus); }

.media-picker-sort {
    display: flex;
    flex-shrink: 0;
    gap: 0.25rem;
    background: var(--surface-2);
    border: 1px solid var(--border-mid);
    border-radius: 6px;
    padding: 0.2rem;
}

.media-picker-sort-btn {
    background: none;
    border: none;
    border-radius: 4px;
    color: var(--grey);
    font-size: 0.78rem;
    font-weight: 500;
    padding: 0.35rem 0.6rem;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s, background 0.15s;
}
.media-picker-sort-btn:hover { color: var(--white); }
.media-picker-sort-btn.is-active {
    background: var(--active-bg);
    color: var(--white);
}

.media-picker-body {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.media-picker-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.12s, border-color 0.12s;
}
.media-picker-row:hover { background: var(--surface-2); }
.media-picker-row.is-selected {
    background: var(--active-bg);
    border-color: var(--active-border);
}

.picker-cb {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    accent-color: var(--active);
    cursor: pointer;
}

.picker-thumb {
    width: 64px;
    height: 48px;
    object-fit: cover;
    border-radius: 3px;
    flex-shrink: 0;
}

.picker-thumb--empty {
    width: 64px;
    height: 48px;
    background: var(--surface-2);
    border-radius: 3px;
    flex-shrink: 0;
}

.picker-name {
    flex: 1;
    min-width: 0;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--white);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.picker-url {
    font-size: 0.72rem;
    color: var(--grey);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 280px;
}

.picker-empty {
    font-size: 0.82rem;
    color: var(--grey);
    text-align: center;
    padding: 2rem 0;
}

/* ── Picker create-new-media footer ────────────────────────────────────── */
.media-picker-create {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
    background: var(--surface-2);
}

.media-picker-create-input {
    background: var(--surface);
    border: 1px solid var(--border-mid);
    border-radius: 6px;
    color: var(--white);
    font-size: 0.82rem;
    padding: 0.45rem 0.65rem;
    flex: 0 0 150px;
    min-width: 0;
}
.media-picker-create-url { flex: 1 1 auto; }
.media-picker-create-input:focus { outline: none; border-color: var(--border-focus); }

.btn-media-create {
    flex-shrink: 0;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--active);
    background: var(--active-bg);
    border: 1px solid var(--active-border);
    border-radius: 6px;
    padding: 0.45rem 0.85rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.btn-media-create:hover   { background: var(--active-border); border-color: var(--active-border-strong); }
.btn-media-create:disabled { opacity: 0.5; cursor: default; }

/* ══════════════════════════════════════════
   Finance : vue d'ensemble du CA
   ══════════════════════════════════════════ */

.granularity-toggle {
    display: inline-flex;
    border: 1px solid var(--border-mid);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.granularity-toggle-item {
    padding: 0.45rem 1rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--grey);
    text-decoration: none;
    border-right: 1px solid var(--border-mid);
    transition: color 0.15s, background 0.15s;
}

.granularity-toggle-item:last-child { border-right: none; }
.granularity-toggle-item:hover      { color: var(--white); }
.granularity-toggle-item.active     { color: var(--active); background: var(--active-bg); }

/* ── Stat tile (hero figure) ── */
.stat-tile {
    background: var(--surface-elevated);
    border: 1px solid var(--border-mid);
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: baseline;
    gap: 1rem;
    flex-wrap: wrap;
}

.stat-tile-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--grey);
    flex-basis: 100%;
}

.stat-tile-value {
    font-size: 3rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--white);
    font-variant-numeric: proportional-nums;
}

.stat-tile-delta { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.8rem; font-weight: 700; }
.stat-tile-delta svg { width: 12px; height: 12px; }
.stat-tile-delta--up   { color: var(--active); }
.stat-tile-delta--down { color: var(--danger); }
.stat-tile-delta--flat { color: var(--grey); }

/* Sentiment-based variants (for metrics where "increase" is bad, e.g. refund rate) */
.stat-tile-delta--good { color: var(--active); }
.stat-tile-delta--bad  { color: var(--danger); }

.stat-tile-compare { font-size: 0.7rem; color: var(--grey); flex-basis: 100%; }
.stat-tile-value--danger  { color: var(--danger); }
.stat-tile-value--success { color: var(--active); }

.stat-tile-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.stat-tile-row .stat-tile { margin-bottom: 0; }

/* ── Dispute response deadline ── */
.dispute-deadline {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--grey);
}
.dispute-deadline--warning { color: var(--draft); }
.dispute-deadline--urgent  { color: var(--danger); }

/* ── Carte graphique ── */
.revenue-chart-card {
    background: var(--surface-elevated);
    border: 1px solid var(--border-mid);
    border-radius: 8px;
    padding: 1.25rem 1.5rem 1rem;
    margin-bottom: 1.5rem;
}

.revenue-chart-wrap { position: relative; }

.revenue-chart-svg { width: 100%; height: auto; display: block; overflow: visible; }

.revenue-grid-line  { stroke: var(--border); stroke-width: 1; }
.revenue-grid-label { fill: var(--grey); font-size: 9px; }
.revenue-axis-label { fill: var(--grey); font-size: 9px; }

.revenue-area-fill { fill: var(--active); opacity: 0.10; }

.revenue-line--current {
    fill: none;
    stroke: var(--active);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.revenue-line--previous {
    fill: none;
    stroke: var(--grey-light);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 4 3;
}

.revenue-dot { stroke: var(--surface-elevated); stroke-width: 2; }
.revenue-dot--current  { fill: var(--active); }
.revenue-dot--previous { fill: var(--grey-light); }

.revenue-hit-area { fill: transparent; cursor: crosshair; }

.revenue-crosshair { stroke: var(--border-focus); stroke-width: 1; opacity: 0; pointer-events: none; }

/* ── Tooltip ── */
.revenue-tooltip {
    position: absolute;
    transform: translate(-50%, -100%) translateY(-10px);
    background: var(--dropdown-bg);
    border: 1px solid var(--border-mid);
    border-radius: 6px;
    padding: 0.55rem 0.7rem;
    font-size: 0.72rem;
    box-shadow: var(--dropdown-shadow);
    pointer-events: none;
    opacity: 0;
    white-space: nowrap;
    z-index: 5;
}

.revenue-tooltip.is-visible { opacity: 1; }

.revenue-tooltip-date { font-weight: 700; color: var(--white); margin-bottom: 0.3rem; }

.revenue-tooltip-row { display: flex; align-items: center; gap: 0.4rem; color: var(--grey-light); }
.revenue-tooltip-row strong { color: var(--white); margin-left: auto; padding-left: 0.75rem; }

.revenue-tooltip-key { width: 12px; height: 2px; border-radius: 1px; flex-shrink: 0; }
.revenue-tooltip-key--current  { background: var(--active); }
.revenue-tooltip-key--previous { background-image: repeating-linear-gradient(90deg, var(--grey-light) 0 3px, transparent 3px 5px); }

/* ── Légende ── */
.revenue-legend { display: flex; gap: 1.25rem; margin-top: 0.85rem; font-size: 0.72rem; color: var(--grey-light); }
.revenue-legend-item { display: flex; align-items: center; gap: 0.4rem; }
.revenue-legend-key { width: 16px; height: 2px; border-radius: 1px; flex-shrink: 0; }
.revenue-legend-key--current  { background: var(--active); }
.revenue-legend-key--previous { background-image: repeating-linear-gradient(90deg, var(--grey-light) 0 4px, transparent 4px 7px); }

/* ── Vue tableau (accessibilité) ── */
.revenue-table-details { margin-top: 0.85rem; }
.revenue-table-details summary { cursor: pointer; font-size: 0.7rem; color: var(--grey); list-style: none; }
.revenue-table-details summary::-webkit-details-marker { display: none; }
.revenue-table-details summary:hover { color: var(--white); }
.revenue-table-details table { margin-top: 0.75rem; }

/* ── Classement par programme ── */
.program-rank-list { display: flex; flex-direction: column; gap: 0.85rem; }
.program-rank-row   { display: flex; flex-direction: column; gap: 0.3rem; }

.program-rank-head  { display: flex; justify-content: space-between; gap: 0.75rem; font-size: 0.75rem; }
.program-rank-name  { color: var(--white); font-weight: 600; }
.program-rank-value { color: var(--grey-light); font-variant-numeric: tabular-nums; white-space: nowrap; }

.program-rank-track { height: 10px; background: var(--surface-2); border-radius: 5px; overflow: hidden; }
.program-rank-bar   { height: 100%; background: var(--active); border-radius: 0 5px 5px 0; }

/* ══════════════════════════════════════════
   Modale de bloc — densité
   Le formulaire de création/édition d'un bloc est celui qu'on ouvre le plus
   souvent, plusieurs fois par séance : il doit tenir sous les yeux d'un seul
   coup, sans défilement. Deux leviers, dans cet ordre — occuper la colonne de
   droite, qui était vide sous l'aperçu, puis resserrer la typographie et les
   espacements. Ciblé par :has() sur le split, pour ne pas toucher aux autres
   modales du site.
   ══════════════════════════════════════════ */

.modal-body:has(.block-form-split) { padding: 1rem; gap: 0.75rem; }

.block-form-split       { gap: 1rem; }
.block-form-split-left  { gap: 0.7rem; }

/* Élargie : elle n'accueille plus seulement l'aperçu, mais aussi les conseils
   du coach et les médias, remontés de la pleine largeur du bas. */
.block-form-split-right { flex: 0 0 300px; gap: 0.7rem; }

.block-form-split .form-group { gap: 0.25rem; }

.modal .block-form-split .form-group label,
.block-form-split label { font-size: 0.62rem; letter-spacing: 0.09em; }

.modal .block-form-split .form-group input[type="text"],
.modal .block-form-split .form-group input[type="number"],
.modal .block-form-split .form-group textarea,
.modal .block-form-split .form-group select {
    font-size: 0.8rem;
    padding: 0.45rem 0.6rem;
    border-radius: 6px;
}

/* Les pastilles de couleur n'ont pas besoin d'être aussi grandes que des
   champs de saisie pour rester faciles à viser. */
.modal-body:has(.block-form-split) .color-swatch { width: 18px; height: 18px; }
.modal-body:has(.block-form-split) .color-swatches { gap: 0.4rem; }

.modal:has(.block-form-split) .modal-header { padding: 0.8rem 1rem; }
.modal:has(.block-form-split) .modal-footer { padding: 0.7rem 1rem; }

/* ══════════════════════════════════════════
   Responsive — tablette
   Objectif de cette passe : rendre le site utilisable sur tablette sans
   redessiner quoi que ce soit. Le design desktop est conservé tel quel, il est
   seulement mis à l'échelle. Le passage au téléphone (réorganisation des
   colonnes, nav repliée) viendra dans une seconde passe.
   ══════════════════════════════════════════ */

/* ── Échelle typographique globale ──
   Presque toute la feuille est exprimée en rem (≈970 valeurs, contre 3 tailles
   en px) : régler la base du document rétrécit d'un seul coup les textes, les
   marges et les paddings en gardant exactement les proportions du desktop.
   En pourcentage et non en px, pour ne pas écraser la taille de police que
   l'utilisateur a choisie dans son navigateur. */
@media (max-width: 1280px) { html { font-size: 93.75%; } }  /* ≈15px */
@media (max-width: 1024px) { html { font-size: 87.5%;  } }  /* ≈14px */
@media (max-width: 840px)  { html { font-size: 81.25%; } }  /* ≈13px */

@media (max-width: 1100px) {

    /* ── Barre de navigation ──
       Brand + 5 onglets + bascule espace athlète + nom + thème + déconnexion +
       ticket dépassaient la largeur dès 1024px, ce qui mettait toute la page en
       scroll horizontal. Les paddings se resserrent, et ce sont les onglets —
       et eux seuls — qui absorbent le reste en défilant : les actions de droite
       restent toujours atteignables. */
    .topnav        { padding: 0 1rem; }
    .topnav-brand  { padding-right: 1.25rem; }
    .topnav-tabs   { padding: 0 0.75rem; min-width: 0; overflow-x: auto; scrollbar-width: none; }
    .topnav-tabs::-webkit-scrollbar { display: none; }
    .tab-link      { padding: 0 0.7rem; }
    .topnav-user   { padding-left: 0.75rem; gap: 0.6rem; }

    /* Même traitement pour les deux niveaux imbriqués sous la barre principale :
       la sous-navigation d'administration, et les onglets de la section Finance
       qu'elle ouvre. Ils défilent au lieu de déborder. overflow-y explicitement
       masqué, sinon le `margin-bottom: -1px` des liens — qui fait chevaucher
       leur soulignement actif avec la bordure du conteneur — ferait apparaître
       une barre de défilement verticale d'un pixel. */
    .admin-subnav,
    .finance-tabs {
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        padding-bottom: 1px;
    }
    .admin-subnav::-webkit-scrollbar,
    .finance-tabs::-webkit-scrollbar { display: none; }

    /* Sans cela les liens se compriment pour tenir au lieu de déclencher le
       défilement, et les libellés passent à la ligne. */
    .admin-subnav-link,
    .finance-tab { flex-shrink: 0; white-space: nowrap; }

    /* Le cadre à 80 % gaspillait un cinquième de la largeur, précisément là où
       elle manque. */
    .page-content { max-width: 100%; padding: 1.75rem 1.25rem; }

    /* Paires de colonnes qui n'ont plus la place de tenir côte à côte. */
    .profile-row,
    .detail-grid,
    .finance-layout { grid-template-columns: 1fr; }

    /* Navigateur de semaine : le bloc central est centré sur la barre entière
       pendant que les côtés sont en position absolue — ils ne se « voient »
       donc pas, et la flèche « semaine suivante » finissait sous le badge de
       complétion. En flux normal, chacun garde sa place. */
    .week-nav        { flex-wrap: wrap; justify-content: space-between; gap: 0.6rem; padding: 0.9rem 1.25rem; }
    .week-nav-left,
    .week-nav-right  { position: static; }
    .week-nav-center { flex: 1; justify-content: center; }
}

/* Le nom du coach est déjà visible sur sa page Profil : c'est la première chose
   à sacrifier quand la barre déborde encore. */
@media (max-width: 860px) {
    .user-name { display: none; }
}

/* Les tableaux tiennent d'eux-mêmes une fois la typographie réduite (vérifié
   jusqu'à 9 colonnes à 810 px). Ce qui les fait encore déborder, c'est une seule
   cellule contenant un mot insécable — une URL de média, une adresse e-mail
   longue — qui impose sa largeur à toute la colonne. Autoriser la coupure ne
   change rien tant que la place suffit. */
@media (max-width: 1100px) {
    .invitations-table td,
    .media-table td,
    .perf-history-table td { overflow-wrap: break-word; }
}

/* ══════════════════════════════════════════
   Responsive — téléphone
   Seconde passe : sous 700 px, la mise à l'échelle ne suffit plus, il faut
   réorganiser. Trois partis pris, tous sans JavaScript supplémentaire — la
   barre passe sur deux lignes, la semaine s'empile en liste de jours, les
   tableaux défilent latéralement.
   ══════════════════════════════════════════ */

@media (max-width: 700px) {

    /* On remonte la base typographique : le rétrécissement des paliers tablette
       servait à faire tenir des colonnes côte à côte, or ici tout passe en une
       seule colonne pleine largeur. Le texte a de nouveau la place d'être lu. */
    html { font-size: 87.5%; }

    /* ── Barre de navigation, sur deux lignes ──
       Marque et actions sur la première, onglets défilants sur la seconde :
       rien n'est masqué et tout reste atteignable au pouce. */
    .topnav {
        height: auto;
        flex-wrap: wrap;
        align-items: center;
        padding: 0;
    }
    .topnav-brand {
        order: 1;
        flex: 1;
        padding: 0.85rem 0 0.85rem 1rem;
        border-right: none;
    }
    .topnav-user {
        order: 2;
        padding: 0.85rem 1rem 0.85rem 0;
        border-left: none;
    }
    .topnav-tabs {
        order: 3;
        /* flex:1 hérité du desktop met flex-basis à 0 et l'emporte sur width,
           ce qui gardait les onglets sur la première ligne. */
        flex: 0 0 100%;
        padding: 0;
        border-top: 1px solid var(--border);
    }
    .tab-link { padding: 0.8rem 0.9rem; }

    .page-content { padding: 1.25rem 0.9rem; }

    /* ── En-tête public / espace athlète ──
       Même principe que la barre coach, sur un autre gabarit : marque au-dessus,
       liens en dessous. Ils s'échappaient à droite de l'écran, séparateurs
       compris. */
    .page > header {
        flex-wrap: wrap;
        gap: 0.6rem;
        padding: 1rem 0.9rem;
    }
    .page > header .header-end {
        margin-left: 0;
        flex: 0 0 100%;
        flex-wrap: wrap;
        gap: 0.5rem 0.75rem;
    }

    /* ── En-tête de programmation ──
       Retour, vignette, titre, statut puis quatre commandes sur une seule
       ligne : l'ensemble débordait, et le titre — seul élément compressible —
       se retrouvait réduit à rien. Le spacer, qui écartait les commandes du
       titre, sert maintenant de saut de ligne : titre au-dessus, commandes
       en dessous. */
    .prog-header         { flex-wrap: wrap; gap: 0.6rem; padding: 0.9rem; }
    .prog-header-title   { flex: 1 1 auto; min-width: 0; }
    .prog-header-spacer  { flex: 0 0 100%; }

    /* ── La semaine devient une liste de jours ──
       Sept colonnes sur 390 px donnaient 45 px chacune, soit un caractère par
       ligne. Empilés, les jours retrouvent la pleine largeur — et les blocs
       leur taille de police normale, la variable n'ayant plus d'étroitesse de
       colonne à compenser. */
    .calendar {
        /* minmax(0, …) pour la même raison qu'en desktop : une piste `1fr` ne
           descend pas sous la largeur min-content de son contenu, et le jour
           le plus chargé élargissait alors toute la page. */
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
        --block-font-scale: 1;
    }
    .cal-day {
        border-right: none;
        border-bottom: 1px solid var(--border);
    }
    .cal-day:last-child { border-bottom: none; }
    .cal-day-header {
        flex-direction: row;
        align-items: baseline;
        gap: 0.5rem;
        padding: 0.7rem 0.9rem;
    }
    .cal-day-number { font-size: 1.1rem; }
    .cal-cycle-tag  { margin-left: auto; }
    .cal-day-body   { min-height: 0; padding: 0.75rem 0.9rem; }

    /* ── Modales en pleine largeur ──
       .modal et .modal--with-preview ont des largeurs planchers (480 px et
       680 px) supérieures à l'écran ; sans cela elles débordent. */
    .modal-backdrop { padding: 0.6rem; }
    .modal,
    .modal--with-preview,
    .dup-modal { width: 100%; }

    /* L'aperçu téléphone passe sous le formulaire au lieu de lui disputer
       la largeur — il l'écrasait à une soixantaine de pixels. */
    /* align-items:flex-start alignait horizontalement une fois l'axe retourné :
       les champs se dimensionnaient à leur contenu au lieu de la largeur. */
    .block-form-split       { flex-direction: column; align-items: stretch; }
    .block-form-split-right { flex: 1 1 auto; width: 100%; }

    /* ── Champs de saisie à 16 px ──
       En dessous de 16 px, Safari iOS zoome sur le champ dès qu'il reçoit le
       focus et laisse la page décadrée derrière lui. C'est la seule taille
       imposée en px de cette passe : elle vaut pour le comportement du
       navigateur, pas pour le design. */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="url"],
    input[type="number"],
    input[type="search"],
    input[type="date"],
    input[type="tel"],
    textarea,
    select { font-size: 16px; }

    /* ── Cibles tactiles ──
       Dessinées pour un pointeur de souris, ces commandes tournaient autour de
       28-32 px de côté ; on les remonte vers les ~44 px recommandés au doigt. */
    .btn-week,
    .btn-ticket,
    .btn-theme     { min-width: 40px; min-height: 40px; }
    .btn-today,
    .btn-duplicate { min-height: 40px; }
    .block-checkbox-wrap,
    .day-checkbox-wrap { width: 32px; height: 32px; }

    /* ── Tableaux défilants ──
       display:block fait du tableau son propre conteneur de défilement, et
       nowrap l'empêche de se comprimer en colonnes d'un caractère : il garde
       sa largeur lisible et c'est le doigt qui parcourt les colonnes. */
    .invitations-table,
    .media-table,
    .perf-history-table {
        display: block;
        width: 100%;
        overflow-x: auto;
    }
    .invitations-table td,  .invitations-table th,
    .media-table td,        .media-table th,
    .perf-history-table td, .perf-history-table th {
        white-space: nowrap;
        overflow-wrap: normal;
    }
}

/* ── Commandes révélées au survol ──
   Sélection des blocs, sélection d'un jour entier, export Garmin : autant
   d'actions qui n'apparaissaient qu'au :hover, donc introuvables sur un écran
   tactile, tablette comprise. Le critère est bien l'absence de survol, pas la
   largeur de l'écran. */
@media (hover: none) {
    .block-checkbox-wrap,
    .day-checkbox-wrap { opacity: 1; }

    /* Ces cases sont en position absolue dans le coin haut-droit : permanentes,
       elles recouvraient le badge de type sur une colonne de tablette. On leur
       réserve donc la place dans le flux plutôt que de les superposer. */
    .block-card      { padding-right: 1.9rem; }
    .cal-day-header  { padding-right: 1.9rem; }
}

/* L'export Garmin, lui, n'occupe le coin en permanence qu'une fois les cartes
   en pleine largeur : sur une colonne de tablette, son libellé masquerait le
   titre du bloc. Il reste au survol au-dessus de ce seuil. */
@media (hover: none) and (max-width: 700px) {
    .btn-garmin-export { opacity: 1; right: 2.8rem; }
}