/* === Base === */
* {
    box-sizing: border-box;
}

:root {
    --bg-page: #f7f7fb;
    --bg-card: #ffffff;
    --bg-soft: #f1f0fa;
    --bg-dark: #14132a;
    --primary: #6246ea;
    --primary-dark: #4b30d6;
    --accent: #e94f64;
    --accent-dark: #c63d50;
    --text: #1f1d2e;
    --text-soft: #6b6b7b;
    --border: #e6e6f0;
    --success: #10b981;
    --error: #ef4444;
    --warn: #f59e0b;
    --radius-sm: 8px;
    --radius: 14px;
    --radius-lg: 22px;
    --shadow-sm: 0 1px 3px rgba(20, 19, 42, 0.06);
    --shadow: 0 4px 24px rgba(20, 19, 42, 0.08);
    --shadow-lg: 0 12px 40px rgba(20, 19, 42, 0.12);
    --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --hero-gradient: linear-gradient(135deg, #6246ea 0%, #8a6dff 60%, #e94f64 100%);
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg-page);
    color: var(--text);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a {
    color: var(--primary);
    text-decoration: none;
    transition: opacity var(--transition);
}

a:hover {
    opacity: 0.8;
    text-decoration: none;
}

h1,
h2,
h3 {
    letter-spacing: -0.01em;
}

/* === Layout === */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 32px;
    background: var(--bg-dark);
    color: white;
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: 100;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: white;
    font-weight: 700;
    font-size: 18px;
}

.brand:hover {
    text-decoration: none;
    opacity: 1;
}

.brand-mark {
    color: var(--accent);
    font-size: 24px;
    line-height: 1;
}

.topnav {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.topnav a {
    color: rgba(255, 255, 255, 0.75);
    font-size: 14px;
    padding: 8px 14px;
    border-radius: 999px;
    transition: all var(--transition);
}

.topnav a:hover {
    color: white;
    background: rgba(255, 255, 255, 0.08);
    text-decoration: none;
    opacity: 1;
}

.userchip {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    transition: all var(--transition);
}

a.userchip:hover {
    background: rgba(255, 255, 255, 0.15);
    color: white;
    text-decoration: none;
    opacity: 1;
}

.userchip em {
    font-style: normal;
    opacity: 0.6;
}

.container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 32px 28px 80px;
}

.footer {
    text-align: center;
    padding: 32px;
    color: var(--text-soft);
    font-size: 13px;
}

/* === Print / Flyer toolbar (chrome UI au-dessus de l'aperçu imprimable) === */
.print-body { background: #f0f0f5; margin: 0; padding: 0; }

.print-toolbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    background: var(--bg-dark); color: white;
    padding: 12px 24px;
    position: sticky; top: 0; z-index: 100;
}
.print-toolbar > :nth-child(1) { justify-self: start; }
.print-toolbar > :nth-child(2) { justify-self: center; }
.print-toolbar > :nth-child(3) { justify-self: end; }
.print-toolbar .btn-ghost {
    color: white; border-color: rgba(255,255,255,0.2); background: transparent;
}
.print-toolbar .btn-ghost:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.3); }
.print-toolbar-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.print-toolbar-title { color: white; font-weight: 700; letter-spacing: 0.3px; }
.print-modes { display: flex; gap: 4px; background: rgba(255,255,255,0.08); border-radius: 999px; padding: 4px; flex-wrap: wrap; }
.print-modes a {
    padding: 6px 14px; border-radius: 999px; color: rgba(255,255,255,0.7);
    font-size: 13px; font-weight: 600; transition: all 0.2s;
}
.print-modes a:hover { color: white; text-decoration: none; opacity: 1; }
.print-modes a.active { background: white; color: var(--bg-dark); }
@media (max-width: 720px) {
    .print-toolbar {
        grid-template-columns: 1fr;
        justify-items: center;
    }
    .print-toolbar > :nth-child(1),
    .print-toolbar > :nth-child(2),
    .print-toolbar > :nth-child(3) { justify-self: center; }
    /* Sélecteur de style (flyer) : grille régulière plutôt qu'un retour à la
       ligne disgracieux quand les options ne tiennent pas sur une rangée. */
    .print-modes {
        width: 100%;
        max-width: 360px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        border-radius: var(--radius);
    }
    .print-modes a {
        text-align: center;
        padding: 10px 12px;
        border-radius: calc(var(--radius) - 4px);
    }
}

/* === Hero === */
.hero {
    background: var(--hero-gradient);
    border-radius: var(--radius-lg);
    padding: 56px 40px;
    color: white;
    margin-bottom: 36px;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.18), transparent 60%);
    pointer-events: none;
}

.hero-inner {
    position: relative;
    max-width: 720px;
}

.hero h1 {
    font-size: clamp(28px, 4vw, 42px);
    margin: 0 0 12px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: white;
}

.hero .lead {
    font-size: 17px;
    color: rgba(255, 255, 255, 0.92);
    margin: 0;
}

.page-head {
    margin-bottom: 28px;
}

.page-head h1 {
    font-size: 30px;
    margin: 0 0 6px;
    color: var(--text);
    font-weight: 800;
}

.lead {
    font-size: 16px;
    color: var(--text-soft);
    margin: 0;
}

/* === Cards === */
.card {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 28px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    margin-bottom: 22px;
    transition: box-shadow var(--transition);
}

.card:hover {
    box-shadow: var(--shadow);
}

.card h2 {
    margin: 0 0 18px;
    font-size: 20px;
    font-weight: 700;
}

/* === Form === */
fieldset {
    border: 0;
    padding: 0;
    margin: 0 0 24px;
}

legend {
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--primary);
    margin-bottom: 10px;
    display: block;
}

label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin: 8px 0 6px;
    color: var(--text);
}

/* Style générique appliqué à tous les inputs textuels — y compris ceux sans attribut type explicite */
input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range]):not([type=color]),
select,
textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 15px;
    font-family: inherit;
    background: white;
    color: var(--text);
    transition: border-color var(--transition), box-shadow var(--transition);
}

input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([type=hidden]):focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(98, 70, 234, 0.12);
}

select:disabled,
input:disabled {
    background: #f4f4f8;
    color: var(--text-soft);
    cursor: not-allowed;
}

/* Normalisation des <select> : apparence identique sur Chrome et Safari.
   Sans `appearance: none`, Safari affiche son menu natif (style différent) et
   peut déborder en largeur sur les options longues (ex. dates). On force donc
   un rendu maîtrisé avec chevron custom et troncature du texte affiché. */
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 40px;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b6b7b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
}

/* Champs date/heure : neutralise la largeur intrinsèque d'iOS qui les faisait
   déborder de leur conteneur (modale d'édition, formulaire de répétition).
   `-webkit-appearance: none` est indispensable : sans lui, iOS Safari impose
   une largeur fixe et ignore `width: 100%`. */
input[type=datetime-local],
input[type=date],
input[type=time] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}
/* Le contenu interne (valeur + champs éditables) ne doit pas imposer de
   largeur minimale ni rester centré. */
input[type=datetime-local]::-webkit-date-and-time-value,
input[type=date]::-webkit-date-and-time-value,
input[type=time]::-webkit-date-and-time-value {
    text-align: left;
    margin: 0;
    min-width: 0;
}
input[type=datetime-local]::-webkit-datetime-edit,
input[type=date]::-webkit-datetime-edit {
    padding: 0;
}

textarea {
    resize: vertical;
    min-height: 80px;
}

input[type=file] {
    padding: 8px;
    cursor: pointer;
}

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 600px) {
    .grid-2 {
        grid-template-columns: 1fr;
    }
}

.hint {
    font-size: 13px;
    color: var(--text-soft);
    margin: 6px 0 0;
}

.hint.small {
    font-size: 12px;
}

/* === Buttons === */
.btn,
.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-danger,
button[type=submit],
button[type=button] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
    padding: 11px 20px;
    border-radius: var(--radius-sm);
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    border: 1.5px solid transparent;
    font-family: inherit;
    transition: transform 0.06s, background var(--transition), box-shadow var(--transition);
    line-height: 1.2;
}

button:active {
    transform: translateY(1px);
}

.btn-primary {
    background: var(--primary);
    color: white;
    border-color: var(--primary-dark);
    box-shadow: 0 4px 12px rgba(98, 70, 234, 0.25);
}

.btn-primary:hover {
    background: var(--primary-dark);
    box-shadow: 0 6px 18px rgba(98, 70, 234, 0.35);
}

.btn-primary.big {
    padding: 14px 28px;
    font-size: 16px;
    width: 100%;
}

.btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    box-shadow: none;
}

.btn,
.btn-secondary {
    background: var(--bg-soft);
    color: var(--primary);
    border-color: var(--bg-soft);
}

.btn:hover,
.btn-secondary:hover {
    background: color-mix(in srgb, var(--primary) 18%, var(--bg-soft));
}

.btn-ghost {
    background: transparent;
    color: var(--text);
    border-color: var(--border);
}

.btn-ghost:hover {
    background: var(--bg-soft);
    border-color: var(--bg-soft);
}

.btn-danger {
    background: white;
    color: var(--error);
    border-color: #fdd5d8;
}

.btn-danger:hover {
    background: #fef2f2;
    border-color: #fda4af;
}

button.small,
.btn-ghost.small,
.btn-danger.small,
.btn-secondary.small {
    padding: 7px 12px;
    font-size: 13px;
    border-radius: 6px;
}

/* === Shows grid === */
.shows-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 22px;
    margin-bottom: 28px;
}

.show-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    transition: transform var(--transition), box-shadow var(--transition);
}

.show-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.show-card-img {
    width: 100%;
    aspect-ratio: 3 / 4;
    background: var(--hero-gradient);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.show-card-placeholder {
    color: rgba(255, 255, 255, 0.35);
    font-size: 80px;
}

.show-card-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.show-card-body h3 {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
}

.show-venue {
    color: var(--text-soft);
    font-size: 14px;
    margin: 0;
    font-weight: 500;
}

.show-desc {
    color: var(--text-soft);
    font-size: 14px;
    margin: 0;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.show-dates-count {
    font-size: 13px;
    color: var(--primary);
    font-weight: 600;
    margin: 0;
}

.show-card .btn-primary {
    margin-top: 8px;
}

/* === Spectacles passés (visuellement distincts) === */
.show-card-past {
    position: relative;
    opacity: 0.85;
    background: var(--bg-soft);
}
.show-card-past:hover {
    transform: none; /* on désactive le hover qui fait monter la carte */
    box-shadow: var(--shadow-sm);
    cursor: default;
}
.show-card-past .show-card-img img {
    filter: grayscale(0.85);
    transition: filter var(--transition);
}
.show-card-past:hover .show-card-img img {
    filter: grayscale(0.5);
}
.show-card-past h3,
.show-card-past .show-venue,
.show-card-past .show-desc {
    color: var(--text-soft);
}
.show-card-past .show-dates-count {
    color: var(--text-soft);
    font-weight: 500;
}
.show-past-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    padding: 4px 12px;
    background: rgba(20, 19, 42, 0.9);
    color: white;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    border-radius: 999px;
    backdrop-filter: blur(2px);
}

/* === Onglets À venir / Passés sur la home === */
.shows-tabs {
    margin-top: 0;
}
.shows-tabs .count-badge {
    margin-left: 4px;
    font-size: 11px;
    padding: 1px 8px;
}

/* === Profile / dashboard utilisateur === */
.profile-head h1 {
    font-size: 28px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.profile-head-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: white;
    font-size: 22px;
    box-shadow: 0 6px 18px rgba(98, 70, 234, 0.25);
    flex: 0 0 auto;
}
.profile-head .lead {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
/* Layout 2 colonnes pour les sections du tableau de bord */
.profile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    align-items: start;
    margin-bottom: 22px;
}
.profile-grid > .card,
.profile-grid-col > .card {
    margin: 0;          /* on neutralise les marges propres pour laisser la gap gérer */
    max-width: none;    /* annule les max-width "settings" pour remplir la colonne */
    width: 100%;
}
/* Sur la section "Mon activité", chaque colonne empile ses cartes verticalement
   pour garantir l'ordre visuel (ex. "Mes spectateurs" toujours sous "Mes
   prochaines représentations"), indépendamment de la hauteur de l'autre colonne. */
.profile-grid-col {
    display: flex;
    flex-direction: column;
    gap: 22px;
    min-width: 0;
}
@media (max-width: 760px) {
    .profile-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .profile-grid-col {
        gap: 14px;
    }
}

.profile-settings h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
}
.profile-settings h2 i {
    color: var(--primary);
    font-size: 16px;
}
.profile-settings .form-actions {
    margin-top: 18px;
}

/* === Récap sur profile.php (mes répétitions / mes spectateurs) === */
.recap-card {
    max-width: 720px;
}
.recap-card h2 {
    display: flex;
    align-items: center;
    gap: 8px;
}
.recap-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.recap-list > li {
    background: var(--bg-page);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    padding: 10px 14px;
}
.recap-item {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    align-items: center;
    color: var(--text);
    text-decoration: none;
}
.recap-item:hover {
    background: white;
    text-decoration: none;
}
.recap-item-date {
    font-variant-numeric: tabular-nums;
    color: var(--primary);
    font-weight: 600;
    font-size: 13.5px;
    flex: 0 0 auto;
}
.recap-item-main {
    flex: 1 1 auto;
    font-size: 14px;
}
/* Représentation avec bouton d'impression du flyer à droite. */
.recap-perf {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.recap-perf .recap-item { flex: 1 1 auto; min-width: 0; }
.recap-perf .recap-flyer-btn { flex: 0 0 auto; white-space: nowrap; }
.recap-rsv-group {
    background: var(--bg-page);
}
.recap-rsv-stats {
    margin-left: 8px;
    font-size: 13px;
    color: var(--text-soft);
}
.recap-rsv-list {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    font-size: 13.5px;
}
.recap-rsv-list li {
    padding: 2px 10px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 999px;
    white-space: nowrap;
}
/* Spectateur principal en mise en valeur */
.recap-rsv-list li.resv-main {
    font-weight: 600;
    background: #ede9fe;
    border-color: #d8d1f7;
    color: var(--primary-dark);
}
/* Accompagnants : plus discrets, légèrement décalés */
.recap-rsv-list li.resv-companion {
    font-size: 12.5px;
    color: var(--text-soft);
    background: var(--bg-soft);
    border-style: dashed;
}
.recap-rsv-list li.resv-companion::before {
    content: '↳ ';
    margin-right: 2px;
    opacity: 0.7;
}
.recap-more {
    margin: 12px 0 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* === Sous-onglets (À venir / Passées / Annulées) === */
.tabs.sub-tabs {
    margin-top: -8px;
    border-bottom: 1px solid var(--border);
}
.tabs.sub-tabs a {
    padding: 10px 16px;
    font-size: 13.5px;
}

/* === Panneau de détail d'une répétition (vue Calendrier) === */
.calendar-hint {
    text-align: center;
    margin: 16px 0 0;
}
.rep-detail-panel {
    margin-top: 22px;
    scroll-margin-top: 90px; /* offset pour le scroll vers l'ancre quand topbar sticky */
}
.rep-detail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}
.rep-detail-head h2 {
    margin: 0;
    font-size: 18px;
    color: var(--text);
}

/* Surligner l'évènement sélectionné dans la grille */
.cal-event.selected {
    box-shadow: 0 0 0 2px var(--primary);
    transform: translateY(-1px);
}

/* === Calendrier mensuel des répétitions === */
.calendar-card {
    padding: 20px 22px;
}
.calendar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}
.calendar-head h2 {
    margin: 0;
    font-size: 18px;
}
.calendar-nav {
    display: flex;
    gap: 6px;
}
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    background: var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--border);
}
.cal-dow {
    background: var(--bg-dark);
    color: white;
    text-align: center;
    padding: 8px 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.cal-cell {
    background: white;
    min-height: 92px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}
.cal-cell.other {
    background: var(--bg-soft);
}
.cal-cell.other .cal-day-num {
    color: #c8c8d4;
}
.cal-cell.today {
    background: color-mix(in srgb, var(--primary) 10%, var(--bg-card));
    box-shadow: inset 0 0 0 2px var(--primary);
}
.cal-day-num {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-soft);
    margin-bottom: 2px;
}
.cal-cell.today .cal-day-num {
    color: var(--primary);
}
.cal-event {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    overflow: hidden;
    border-left: 3px solid;
    transition: filter var(--transition);
}
.cal-event:hover {
    filter: brightness(0.95);
    text-decoration: none;
}
.cal-event-time {
    font-variant-numeric: tabular-nums;
    opacity: 0.8;
    flex: 0 0 auto;
}
.cal-event-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cal-event.upcoming {
    background: #ede9fe;
    color: var(--primary-dark);
    border-color: var(--primary);
}
.cal-event.past {
    background: var(--bg-soft);
    color: var(--text-soft);
    border-color: #b9b9c8;
}
.cal-event.happened {
    background: #ddebff;
    color: #1d4ed8;
    border-color: #3b82f6;
}
.cal-event.cancelled {
    background: #fef2f2;
    color: #991b1b;
    border-color: var(--error);
    text-decoration: line-through;
}
.cal-event.performance {
    background: color-mix(in srgb, var(--accent) 14%, white);
    color: var(--accent-dark);
    border-color: var(--accent);
    cursor: default;
}
.cal-event.performance:hover {
    filter: none;
}
.cal-event.performance.performance-past {
    background: var(--bg-soft);
    color: var(--text-soft);
    border-color: color-mix(in srgb, var(--accent) 35%, #b9b9c8);
    opacity: 0.85;
}
.cal-event-ico {
    flex: 0 0 auto;
    font-size: 10px;
    opacity: 0.85;
}

.calendar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    font-size: 11px;
}
.cal-event.sample {
    cursor: default;
}
.cal-event.sample:hover {
    filter: none;
}

/* Responsive : sur mobile la grille devient compacte avec scroll horizontal */
@media (max-width: 760px) {
    .calendar-grid {
        font-size: 12px;
    }
    .cal-cell {
        min-height: 70px;
        padding: 4px;
    }
    .cal-event-title {
        display: none; /* on garde uniquement l'heure pour gagner de la place */
    }
    .cal-event {
        justify-content: center;
    }
}

/* === Répétitions === */
.form-rep textarea {
    min-height: 70px;
}
.form-rep {
    max-width: 640px;
}
.form-rep label {
    font-size: 14px;
    margin-top: 14px;
}
.form-rep input[type=text],
.form-rep input[type=datetime-local],
.form-rep select {
    width: 100%;
    box-sizing: border-box;
}
.form-rep .form-actions {
    margin-top: 22px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.form-rep .form-actions .btn-primary,
.form-rep .form-actions .btn-ghost {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
}

@media (max-width: 600px) {
    .form-rep .form-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .form-rep .form-actions .btn-primary,
    .form-rep .form-actions .btn-ghost {
        width: 100%;
    }
    /* La grille date/lieu passe en colonne (déjà géré par .grid-2 au global) ;
       on s'assure simplement que les inputs ne dépassent pas. */
    .form-rep input,
    .form-rep select {
        font-size: 16px; /* évite le zoom auto iOS sur tap d'un input < 16px */
    }
}
.rep-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.rep-card {
    background: white;
    border: 1px solid #d8d1f7;
    border-left: 4px solid var(--primary);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition);
}
.rep-card:hover {
    box-shadow: var(--shadow);
}
.rep-card--cancelled {
    opacity: 0.75;
    background: var(--bg-soft);
    border-left-color: var(--error);
}
.rep-card--past {
    background: var(--bg-soft);
}
.rep-card-head {
    margin-bottom: 8px;
}
.rep-card-head h3 {
    margin: 0 0 2px;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.rep-title-text {
    font-weight: 700;
    margin-right: auto;     /* pousse les compteurs et le statut à droite */
    min-width: 0;           /* permet le shrink en cas de titre long */
}
.rep-counts-inline {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
}
.rep-counts-inline .resp-count {
    padding: 1px 8px;
    font-size: 11.5px;
    font-weight: 700;
}
/* Le badge de statut s'aligne sur la même ligne que le titre + compteurs */
.rep-card-head h3 .rep-status {
    display: inline-flex;
    align-items: center;
}
.rep-show-thumb {
    width: 36px;
    height: 50px;
    object-fit: cover;
    border-radius: 6px;
    box-shadow: var(--shadow-sm);
}
.rep-card-head p {
    margin: 0;
}
.rep-status .rep-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.rep-badge.upcoming {
    background: #ecfdf5;
    color: #065f46;
}
.rep-badge.past {
    background: var(--bg-soft);
    color: var(--text-soft);
}
.rep-badge.happened {
    background: #ddebff;
    color: #1d4ed8;
}
.rep-badge.cancelled {
    background: #fef2f2;
    color: #991b1b;
}

/* Boutons de réponse Je participe / Pas / Sais pas */
.rep-responses {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    padding: 6px 10px;
    background: var(--bg-page);
    border-radius: var(--radius-sm);
}
.rep-resp-label {
    font-size: 12.5px;
    color: var(--text-soft);
    flex: 0 0 auto;
}
.rep-resp-form {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    flex: 1 1 auto;
}
.btn-resp {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    background: white;
    color: var(--text-soft);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.btn-resp i {
    font-size: 11px;
}
.btn-resp:hover {
    border-color: var(--text-soft);
    color: var(--text);
}
.btn-resp.active.yes {
    background: #ecfdf5;
    border-color: var(--success);
    color: #065f46;
}
.btn-resp.active.maybe {
    background: #fffbeb;
    border-color: var(--warn);
    color: #92400e;
}
.btn-resp.active.no {
    background: #fef2f2;
    border-color: var(--error);
    color: #991b1b;
}
.btn-resp.clear {
    padding: 8px 10px;
    color: var(--text-soft);
}
.btn-resp:disabled {
    opacity: 0.6;
    cursor: wait;
}
.btn-resp-loading {
    position: relative;
    pointer-events: none;
}
.btn-resp-loading::after {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 4px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: btn-spin 0.6s linear infinite;
}
@keyframes btn-spin {
    to { transform: rotate(360deg); }
}

/* Récapitulatif des réponses — toujours visible */
.rep-resp-summary {
    margin-bottom: 6px;
    border-top: 1px dashed var(--border);
    padding-top: 8px;
}
.rep-resp-counts {
    margin: 0 0 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    font-size: 13px;
    color: var(--text-soft);
}
.resp-count {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 12.5px;
}
.resp-count.yes   { background: #ecfdf5; color: #065f46; }
.resp-count.maybe { background: #fffbeb; color: #92400e; }
.resp-count.no    { background: #fef2f2; color: #991b1b; }
.rep-resp-lists {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    font-size: 13.5px;
}
.rep-resp-lists strong {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 6px;
}
.rep-resp-lists strong.yes   { color: #065f46; }
.rep-resp-lists strong.maybe { color: #92400e; }
.rep-resp-lists strong.no    { color: #991b1b; }
.resp-name-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.resp-name-list li {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 3px 10px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 13px;
    color: var(--text);
    white-space: nowrap;
    line-height: 1.3;
}
.resp-name-list .resp-name {
    font-weight: 600;
}
.resp-name-list .resp-role {
    font-weight: 400;
    font-size: 12px;
    color: var(--text-soft);
    opacity: 0.95;
}
.resp-name-list .resp-role::before {
    content: '· ';
    margin-right: 1px;
    color: var(--text-soft);
    opacity: 0.6;
}
.resp-block-yes .resp-name-list li {
    background: #ecfdf5;
    border-color: #86efac;
    color: #065f46;
}
.resp-block-maybe .resp-name-list li {
    background: #fffbeb;
    border-color: #fde68a;
    color: #92400e;
}
.resp-block-no .resp-name-list li {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}

.rep-card-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    align-items: center;
}

/* (.resp-role est stylé dans .resp-name-list .resp-role plus bas pour les chips) */

/* Dropdown « Clôturer » (effectuée / annulée) */
.rep-close-menu {
    position: relative;
    display: inline-block;
}
.rep-close-menu > summary {
    list-style: none;
    cursor: pointer;
    /* mêmes styles que .btn-secondary.small via la classe */
}
.rep-close-menu > summary::-webkit-details-marker { display: none; }
.rep-close-menu > summary::after {
    content: '\f078'; /* chevron-down */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 9px;
    margin-left: 4px;
    opacity: 0.7;
}
.rep-close-menu-items {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 30;
    min-width: 180px;
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.rep-close-menu-items .inline-form { width: 100%; margin: 0; }
.rep-close-option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    background: transparent;
    border: 0;
    border-radius: 6px;
    font-size: 13.5px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    color: var(--text);
    transition: background var(--transition);
}
.rep-close-option:hover {
    background: var(--bg-soft);
}
.rep-close-option.ok {
    color: #065f46;
}
.rep-close-option.ok:hover {
    background: #ecfdf5;
}
.rep-close-option.ko {
    color: #991b1b;
}
.rep-close-option.ko:hover {
    background: #fef2f2;
}

@media (max-width: 760px) {
    .rep-card-head {
        flex-direction: column;
        align-items: stretch;
    }
    .rep-resp-form .btn-resp {
        flex: 1 1 calc(50% - 4px);
        justify-content: center;
        font-size: 13px;
    }
}

/* === Reservation form === */
.form-reservation {
    max-width: 720px;
    margin: 0 auto;
}

.form-head {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-bottom: 22px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--border);
}

.back-btn {
    align-self: flex-start;
}

.form-show-info {
    display: flex;
    align-items: center;
    gap: 16px;
}

.form-show-thumb {
    width: 60px;
    height: 80px;
    border-radius: 8px;
    object-fit: cover;
    box-shadow: var(--shadow-sm);
}

.form-show-info h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
}

.form-show-info .muted {
    margin: 2px 0 0;
    font-size: 14px;
}

/* === Companions === */
.companions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 12px 0;
}

.companion-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.companion-row input {
    flex: 1;
}

/* === Summary === */
.summary {
    margin: 22px 0;
    padding: 16px 20px;
    background: var(--bg-soft);
    border-radius: var(--radius-sm);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 14px;
    border: 1.5px solid var(--border);
}

.summary strong {
    font-size: 22px;
    color: var(--primary);
    font-weight: 800;
}

.show-desc,
.seats-info {
    font-size: 14px;
    color: var(--text-soft);
    margin: 6px 0 0;
}

.seats-info.warn {
    color: var(--warn);
    font-weight: 600;
}

.seats-info.error {
    color: var(--error);
    font-weight: 600;
}

/* === Flash === */
.flash {
    padding: 16px 20px;
    border-radius: var(--radius-sm);
    margin-bottom: 22px;
    font-size: 14.5px;
    border-left: 4px solid;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.flash strong {
    display: block;
    margin-top: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    opacity: 0.8;
}

.flash-success {
    background: #ecfdf5;
    color: #065f46;
    border-color: var(--success);
}

.flash-error {
    background: #fef2f2;
    color: #991b1b;
    border-color: var(--error);
}

/* === Login === */
.login-wrap {
    display: flex;
    justify-content: center;
    padding: 40px 0;
}

.login-card {
    width: 100%;
    max-width: 420px;
}

.login-card h1 {
    margin: 0 0 4px;
    font-size: 26px;
    font-weight: 800;
}

.login-card .hint {
    margin: 0 0 18px;
}

.login-card button {
    width: 100%;
    margin-top: 16px;
    padding: 13px;
    font-size: 15px;
}

/* === Tables === */
.table-wrap {
    overflow-x: auto;
    border-radius: var(--radius);
}

.table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
}

.table thead th {
    background: var(--bg-dark);
    color: white;
    padding: 14px 12px;
    text-align: left;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 600;
}

.table tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
    vertical-align: middle;
}

.table tbody tr:last-child td {
    border-bottom: 0;
}

.table tbody tr:hover {
    background: var(--bg-page);
}

.table.compact tbody td {
    padding: 10px 14px;
    font-size: 13px;
}

/* Largeurs de colonnes cohérentes sur les tableaux groupés (Vue par invitant). */
.group .table.compact {
    table-layout: fixed;
}

.group .table.compact td,
.group .table.compact th {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.muted {
    color: var(--text-soft);
}

.badge {
    display: inline-block;
    min-width: 30px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--primary);
    color: white;
    font-weight: 700;
    text-align: center;
    font-size: 13px;
}

/* Pastille « Invité » (place offerte) signalée par le comédien sur une résa. */
.resa-guest-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 8px;
    padding: 2px 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 14%, transparent);
    color: var(--primary);
    border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
    vertical-align: middle;
}
.resa-guest-badge i { font-size: 10px; }

/* Liste des réservations : une ligne par participant (principal + accompagnants).
   Les lignes accompagnant sont rattachées visuellement à leur réservation. */
.resa-participant { font-size: 14px; }
.resa-participant .js-main-name { font-weight: 700; }
.resa-prow-companion > td { border-top: 0; }
.resa-prow-companion .resa-participant { padding-left: 26px; position: relative; }
.resa-prow-companion .resa-participant::before {
    content: ""; position: absolute; left: 10px; top: 50%; width: 9px; height: 1px;
    background: var(--border);
}
.resa-companion-tag {
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--text-soft); background: var(--bg-soft);
    padding: 1px 6px; border-radius: 999px; margin-right: 4px;
}
/* Invité = bouton icône cadeau : grisé (non invité) / coloré (invité). */
.resa-guest-btn {
    border: 0; background: transparent; cursor: pointer; padding: 4px 6px;
    color: var(--text-soft); display: inline-flex; align-items: center; justify-content: center;
    font-size: 15px; line-height: 1; border-radius: 6px;
}
.resa-guest-btn:hover { background: var(--bg-soft); color: var(--text); }
.resa-guest-btn.on, .resa-guest-btn.on:hover { color: var(--primary); }
.resa-guest-btn.is-static { cursor: default; }
.resa-guest-btn.is-static:hover { background: transparent; }
.resa-guest-btn.is-static:not(.on) { opacity: 0.4; }
.resa-participants td.actions-cell .resa-guest-btn { vertical-align: middle; }
/* Date de représentation affichée sous le prénom/nom (tous les écrans). */
.resa-sub-date { display: block; font-size: 12px; font-weight: 400; color: var(--text-soft); margin-top: 2px; }
/* Le contenu des cellules reste centré verticalement malgré la 2e ligne (date). */
.resa-participants tbody td { vertical-align: middle; }
/* Bureau : groupe d'actions (ajouter, modifier, supprimer, invité) à droite,
   boutons alignés sur la même ligne horizontale. */
.resa-participants td.actions-cell { white-space: nowrap; text-align: right; }
.resa-participants td.actions-cell .btn-ghost,
.resa-participants td.actions-cell .btn-danger { vertical-align: middle; }

@media (max-width: 760px) {
    /* Carte compacte : nom à gauche, Invité au centre, actions à droite.
       (flex sur <tr> fonctionne ici car on ne reconstruit pas un display:table ;
       on neutralise le width:100% générique des cellules.) */
    .table-wrap .table.resa-participants tr { display: flex !important; align-items: center; gap: 8px; }
    .table-wrap .table.resa-participants td { width: auto !important; padding: 0 !important; border: 0 !important; }
    .table-wrap .table.resa-participants td[data-label]::before { content: none !important; }
    .table-wrap .table.resa-participants td.resa-blank,
    .table-wrap .table.resa-participants td[data-label="Spectacle"],
    .table-wrap .table.resa-participants td[data-label="Spectacle du"] { display: none !important; }
    .table-wrap .table.resa-participants td.resa-participant {
        display: block !important; flex: 1 1 auto; min-width: 0;
        white-space: normal; font-weight: 600;
    }
    /* Groupe d'actions (modifier/supprimer/invité…) aligné à droite. */
    .table-wrap .table.resa-participants td.actions-cell {
        display: inline-flex !important; flex: 0 0 auto; align-items: center; gap: 6px;
    }
    .resa-prow-companion .resa-participant { padding-left: 14px; }
    .resa-prow-companion .resa-participant::before { display: none; }
}

/* Toast léger (erreurs AJAX de la liste des réservations). */
.resa-toast {
    position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
    background: var(--text); color: #fff; padding: 12px 20px; border-radius: 999px;
    font-size: 15px; box-shadow: var(--shadow-lg); z-index: 200; max-width: 90vw;
}
.resa-toast.error { background: var(--error); }

.reservation-past td {
    color: var(--text-soft);
}

.reservation-past .badge {
    background: var(--text-soft);
}

.companions-list {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    color: var(--text-soft);
}

/* Affiche thumbnails */
.affiche-thumb {
    width: 44px;
    height: 60px;
    border-radius: 6px;
    object-fit: cover;
    display: block;
    box-shadow: var(--shadow-sm);
}

.affiche-thumb.placeholder {
    background: var(--hero-gradient);
    color: rgba(255, 255, 255, 0.35);
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.affiche-block {
    margin: 18px 0;
    padding: 18px;
    background: var(--bg-soft);
    border-radius: var(--radius-sm);
}

.affiche-block > label,
.affiche-block > .block-label {
    display: block;
    font-weight: 600;
    margin-bottom: 10px;
}

.affiche-current {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
    padding: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.affiche-current img {
    width: 80px;
    height: 110px;
    object-fit: cover;
    border-radius: 6px;
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
}

.affiche-current .current-meta,
.hero-image-preview .current-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.affiche-current .current-label,
.hero-image-preview .current-label {
    font-size: 13px;
    color: var(--text-soft);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}

/* === File dropzone === */
.file-dropzone {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 140px;
    padding: 22px 18px;
    background: var(--bg-card);
    border: 2px dashed var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition), transform var(--transition);
    text-align: center;
}

.file-dropzone:hover,
.file-dropzone:focus-within {
    border-color: var(--primary);
    background: var(--bg-soft);
}

.file-dropzone.is-dragover {
    border-color: var(--primary);
    background: #efeaff;
    transform: scale(1.01);
}

.file-dropzone.has-file {
    border-style: solid;
    border-color: var(--primary);
    background: var(--bg-card);
    text-align: left;
}

.file-dropzone input[type=file] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    padding: 0;
}

.file-dropzone .dropzone-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    pointer-events: none;
}

.file-dropzone.has-file .dropzone-content {
    display: none;
}

.file-dropzone .dropzone-icon {
    font-size: 28px;
    color: var(--primary);
    margin-bottom: 4px;
}

.file-dropzone .dropzone-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: var(--text);
}

.file-dropzone .dropzone-text strong {
    font-weight: 600;
}

.file-dropzone .dropzone-text span {
    color: var(--text-soft);
    font-size: 14px;
}

.file-dropzone .dropzone-formats {
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-soft);
    letter-spacing: 0.02em;
}

.file-dropzone .dropzone-selected {
    display: none;
    align-items: center;
    gap: 14px;
    width: 100%;
}

.file-dropzone.has-file .dropzone-selected {
    display: flex;
}

.file-dropzone .dropzone-preview {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 6px;
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
    background: var(--bg-soft);
}

.file-dropzone .dropzone-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.file-dropzone .dropzone-filename {
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-dropzone .dropzone-filesize {
    font-size: 12px;
    color: var(--text-soft);
}

.file-dropzone .dropzone-clear {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: var(--bg-soft);
    color: var(--text-soft);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition), color var(--transition);
    position: relative;
    z-index: 2;
}

.file-dropzone .dropzone-clear:hover {
    background: var(--error);
    color: white;
}

.file-dropzone + .hint {
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-soft);
}

/* "Supprimer" toggle on existing image preview */
.affiche-current .checkbox.danger,
.hero-image-preview .checkbox.danger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--bg-soft);
    color: var(--text-soft);
    font-size: 13px;
    cursor: pointer;
    width: max-content;
    transition: background var(--transition), color var(--transition);
}

.affiche-current .checkbox.danger:hover,
.hero-image-preview .checkbox.danger:hover {
    background: #fde4e7;
    color: var(--accent-dark);
}

.affiche-current .checkbox.danger input,
.hero-image-preview .checkbox.danger input {
    accent-color: var(--accent);
}

.affiche-current.is-marked-for-removal,
.hero-image-preview.is-marked-for-removal {
    opacity: 0.55;
}

.affiche-current.is-marked-for-removal img,
.hero-image-preview.is-marked-for-removal img {
    filter: grayscale(0.6);
}

.affiche-current.is-marked-for-removal .checkbox.danger,
.hero-image-preview.is-marked-for-removal .checkbox.danger {
    background: var(--accent);
    color: white;
}

/* === Filters === */
.filters {
    display: grid;
    grid-template-columns: 2fr 2fr 2fr 2fr;
    gap: 14px;
    align-items: end;
}

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

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

.filter-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    cursor: pointer;
    font-size: 14px;
}

.checkbox input {
    width: auto;
    margin: 0;
}

/* === Tabs === */
.tabs {
    display: flex;
    gap: 2px;
    margin-bottom: 22px;
    border-bottom: 2px solid var(--border);
    overflow-x: auto;
    overflow-y: hidden;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
}

.tabs a {
    padding: 12px 20px;
    color: var(--text-soft);
    font-weight: 600;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    white-space: nowrap;
    font-size: 14.5px;
    transition: color var(--transition);
}

.tabs a:hover {
    text-decoration: none;
    color: var(--text);
    opacity: 1;
}

.tabs a.active {
    color: var(--primary);
    border-color: var(--primary);
}

.tabs .tab-sep {
    flex: 0 0 1px;
    align-self: stretch;
    background: var(--border);
    margin: 6px 10px;
}

/* === Icônes dans les menus (topnav + tabs) === */
.nav-ico,
.tab-ico {
    display: inline-block;
    margin-right: 4px;
    font-size: 14px;
    line-height: 1;
    vertical-align: -1px;
}
.tab-ico {
    font-size: 15px;
}

/* === KPIs === */
.kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}

.kpi {
    background: white;
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    transition: transform var(--transition), box-shadow var(--transition);
}

.kpi:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.kpi .num {
    font-size: 32px;
    font-weight: 800;
    color: var(--primary);
    line-height: 1;
}

.kpi .lab {
    font-size: 11px;
    text-transform: uppercase;
    color: var(--text-soft);
    letter-spacing: 0.8px;
    font-weight: 600;
}

/* === Bascule de vue (segmented control) === */
.view-switch {
    display: inline-flex;
    gap: 4px;
    background: var(--bg-soft);
    padding: 4px;
    border-radius: 999px;
    margin-bottom: 18px;
}

.view-switch a {
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-soft);
    border-radius: 999px;
    transition: all var(--transition);
}

.view-switch a:hover {
    color: var(--text);
    text-decoration: none;
    opacity: 1;
}

.view-switch a.active {
    background: white;
    color: var(--primary);
    box-shadow: var(--shadow-sm);
}

/* === Modal === */
.modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: modal-fade 0.15s ease-out;
}

.modal[hidden] {
    display: none;
}

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 19, 42, 0.55);
    backdrop-filter: blur(2px);
}

.modal-content {
    position: relative;
    background: white;
    padding: 28px 32px;
    border-radius: var(--radius);
    max-width: 460px;
    width: 100%;
    box-shadow: var(--shadow-lg);
    animation: modal-pop 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Variante "large" pour le formulaire de réservation */
.modal.modal-large {
    align-items: flex-start;
    padding-top: 32px;
    padding-bottom: 32px;
    overflow-y: auto;
}
.modal.modal-large .modal-content {
    max-width: 720px;
    padding: 32px;
    max-height: none;
}

/* Bouton de fermeture en croix dans le coin */
.modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    background: var(--bg-soft);
    color: var(--text);
    border: 0;
    font-size: 16px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition);
    z-index: 2;
}
.modal-close:hover {
    background: color-mix(in srgb, var(--primary) 18%, var(--bg-soft));
}

@media (max-width: 640px) {
    .modal.modal-large {
        padding: 0;
    }
    .modal.modal-large .modal-content {
        max-width: 100%;
        min-height: 100vh;
        border-radius: 0;
        padding: 24px 18px 32px;
    }
}

.modal-content h3 {
    margin: 0 0 10px;
    font-size: 19px;
    font-weight: 700;
    color: var(--text);
}

.modal-content p {
    margin: 0 0 20px;
    font-size: 14px;
}

.modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

@keyframes modal-fade {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes modal-pop {
    from {
        opacity: 0;
        transform: translateY(-12px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* === Print actions === */
.print-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    padding: 16px 20px;
    margin-bottom: 20px;
    background: var(--bg-soft);
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border);
    align-items: center;
}

/* === Group === */
.group {
    background: white;
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 18px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
}

.group-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 14px;
    flex-wrap: wrap;
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.group-head h2 {
    margin: 0;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.role-tag {
    display: inline-block;
    font-size: 10px;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--primary);
    color: white;
    letter-spacing: 0.5px;
    font-weight: 700;
}

.role-tag.organisateur {
    background: var(--accent);
}

.role-tag.comedien {
    background: var(--primary);
}

.role-tag.administrateur {
    background: var(--bg-dark);
}

/* === Empty === */
.empty {
    text-align: center;
    padding: 56px 20px;
    color: var(--text-soft);
    background: white;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    border: 1px dashed var(--border);
}

.empty .btn {
    margin-top: 14px;
}

/* === Inline forms === */
.inline-form {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    margin: 0;
}

.inline-form input {
    display: inline-block;
    padding: 7px 10px;
    font-size: 13px;
}

.actions {
    white-space: nowrap;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

/* === Sections accordéon (Rôles / Représentations) === */
.accordion-section {
    background: #ede9fe; /* violet pâle pour bien distinguer la section */
    border: 1px solid #d8d1f7;
    border-left: 4px solid var(--primary);
    border-radius: var(--radius-sm);
    margin-top: 18px;
    overflow: hidden;
    transition: box-shadow var(--transition);
}
.accordion-section[open] {
    box-shadow: var(--shadow-sm);
}
.accordion-section > summary {
    list-style: none;
    cursor: pointer;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    user-select: none;
    transition: background var(--transition);
}
.accordion-section > summary::-webkit-details-marker { display: none; }
.accordion-section > summary::before {
    content: '\f078'; /* chevron-down */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 11px;
    color: var(--text-soft);
    width: 14px;
    flex: 0 0 14px;
    transition: transform 0.18s;
    transform: rotate(-90deg);
}
.accordion-section[open] > summary::before {
    transform: rotate(0);
}
.accordion-section > summary:hover {
    background: rgba(255,255,255,0.5);
}
/* Boutons « Ajouter… » dans les sections accordéon : le panneau partage la
   teinte de .btn-secondary — on garde l'aspect d'un bouton secondaire plein
   (sans bordure) mais un cran plus clair que le panneau pour rester visible. */
.accordion-section .btn-secondary {
    background: var(--bg-card);
    border-color: transparent;
}
.accordion-section .btn-secondary:hover {
    background: color-mix(in srgb, var(--primary) 16%, var(--bg-card));
    border-color: transparent;
}

.accordion-title {
    flex: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--primary);
}
.accordion-title i {
    font-size: 13px;
}
.accordion-meta {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-soft);
    background: white;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
}
/* Contenu de l'accordéon : padding latéral, retrait du gros padding du fieldset original */
.accordion-section > *:not(summary) {
    padding-left: 18px;
    padding-right: 18px;
}
.accordion-section > *:last-child {
    padding-bottom: 18px;
}
/* Les boutons « Ajouter… » sont des enfants directs de la section : ils
   héritaient sinon du padding de bloc (latéral + bas) destiné aux contenus,
   ce qui déformait leur hauteur. On rétablit le padding standard d'un bouton
   et on gère l'alignement/marges à la place. */
.accordion-section > .btn-secondary {
    padding: 11px 20px;
    margin: 6px 18px 18px;
}
.accordion-section > .hint:first-of-type {
    margin-top: 0;
    padding-top: 4px;
}

/* === Liste des rôles (création de spectacle) === */
.roles-fieldset {
    /* le fond/padding sont gérés par .accordion-section ; on retire l'ancien styling fieldset */
}
#roles-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}
.role-row {
    display: flex;
    gap: 8px;
    align-items: center;
    background: white;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}
.role-row input[type=text] {
    flex: 1 1 auto;
    width: auto;          /* override le width: 100% global */
    min-width: 0;         /* permet le shrink dans le flex */
    margin: 0;
}
.role-row .remove-role {
    flex: 0 0 auto;
    align-self: center;
}

/* === Casting par représentation === */
.cast-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px;
    margin-top: 6px;
}
.cast-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--bg-page);
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}
.cast-role-name {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-soft);
}
.cast-row select {
    margin: 0;
    font-size: 13.5px;
    padding: 6px 10px;
}
.role-empty-hint {
    margin: 4px 0 0;
}

/* === Sélecteur de membres (formulaire troupe) === */
.member-picker {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}

.member-picker-search {
    position: relative;
}

.member-picker-input {
    width: 100%;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    padding: 8px 12px;
    background: white;
    font-size: 14px;
    color: var(--text);
    outline: none;
    box-sizing: border-box;
}

.member-picker-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft, #ede9fe);
}

.member-picker-input::placeholder {
    color: var(--text-soft);
}

.member-chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 0;
}

.member-chips:empty::before {
    content: 'Aucun membre pour l\27 instant.';
    color: var(--text-soft);
    font-style: italic;
    font-size: 13px;
}

.member-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-soft, #f4f5f7);
    border: 1px solid var(--border);
    color: var(--text-strong);
    padding: 4px 6px 4px 10px;
    border-radius: 999px;
    font-size: 12.5px;
    white-space: nowrap;
}

.member-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--text-soft);
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    padding: 0;
    flex-shrink: 0;
}

.member-chip-remove:hover {
    background: var(--danger, #dc2626);
    color: white;
}

.member-picker-hint {
    margin-top: 0;
    margin-bottom: 0;
}

/* === Autocomplete pour la distribution par rôle === */
.cast-autocomplete {
    position: relative;
    display: block;
}

.cast-autocomplete-input {
    width: 100%;
    padding-right: 36px;
    /* on enlève la flèche native du datalist (au cas où) */
    background-image: none;
}

.cast-autocomplete-input.cast-input-invalid {
    border-color: var(--danger, #c0392b);
    background-color: #fff5f4;
}

.cast-autocomplete-clear {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--text-soft);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    padding: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s, background 0.15s;
}

.cast-autocomplete:hover .cast-autocomplete-clear,
.cast-autocomplete:focus-within .cast-autocomplete-clear {
    opacity: 1;
    pointer-events: auto;
}

.cast-autocomplete-input:placeholder-shown ~ .cast-autocomplete-clear {
    /* champ vide → on cache le bouton effacer */
    opacity: 0 !important;
    pointer-events: none !important;
}

.cast-autocomplete-clear:hover {
    background: rgba(0,0,0,0.06);
    color: var(--text);
}

/* Popup d'autocomplete (élément singleton attaché à <body>) */
.cast-popup {
    list-style: none;
    margin: 0;
    padding: 4px;
    background: white;
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(20, 12, 60, 0.18), 0 4px 10px rgba(20, 12, 60, 0.08);
    z-index: 9999;
    max-height: 280px;
    overflow-y: auto;
    min-width: 220px;
    font-size: 14px;
}

.cast-popup[hidden] {
    display: none;
}

.cast-popup li {
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-strong);
    user-select: none;
}

.cast-popup li:hover,
.cast-popup li.active {
    background: var(--primary-soft, #ede9fe);
    color: var(--text-strong);
}

.cast-popup li.cast-popup-empty {
    color: var(--text-soft);
    font-style: italic;
    cursor: default;
    background: transparent;
}

.cast-popup li.cast-popup-empty:hover {
    background: transparent;
}

.cast-popup-name {
    flex: 1;
}

/* === Sélecteur de troupes (formulaire spectacle) === */
.troupe-picker {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}

.troupe-pick {
    margin: 0;
    padding: 0;
}

.troupe-pick-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: white;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px 12px 16px;
    cursor: pointer;
    transition: border-color var(--transition), box-shadow var(--transition), transform 120ms;
    user-select: none;
}

.troupe-pick-card:hover {
    border-color: var(--primary-soft, #c4b8f5);
    box-shadow: var(--shadow-sm);
}

.troupe-pick-card input[type=checkbox] {
    /* Cachée visuellement mais accessible aux lecteurs d'écran et au focus */
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.troupe-pick-card:focus-within {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.troupe-pick-check {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 1.5px solid var(--border);
    background: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 11px;
    transition: background var(--transition), border-color var(--transition);
}

.troupe-pick-check i {
    opacity: 0;
    transition: opacity var(--transition);
}

.troupe-pick.is-selected .troupe-pick-card {
    border-color: var(--primary);
    background: linear-gradient(180deg, var(--bg-soft) 0%, var(--bg-card) 100%);
    box-shadow: 0 0 0 1px var(--primary), var(--shadow-sm);
}

.troupe-pick.is-selected .troupe-pick-check {
    background: var(--primary);
    border-color: var(--primary);
}

.troupe-pick.is-selected .troupe-pick-check i {
    opacity: 1;
}

.troupe-pick-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-right: 30px; /* laisse la place au check */
}

.troupe-pick-title {
    flex: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: var(--text-strong);
    font-size: 14.5px;
}

.troupe-pick-title i {
    color: var(--primary);
}

.troupe-pick-empty {
    margin: 0;
    font-style: italic;
}

.troupe-pick .troupe-member-chips {
    margin: 0;
}

@media (max-width: 600px) {
    .troupe-picker {
        grid-template-columns: 1fr;
    }
}

/* Bloc rempli en direct sous le sélecteur : un panneau par troupe cochée
   listant ses membres en chips. */
.troupe-picker-members {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 14px;
}

.troupe-picker-empty {
    margin: 0;
    background: white;
    border: 1px dashed var(--border);
    padding: 10px 14px;
    border-radius: 10px;
    font-style: italic;
}

.troupe-picker-group {
    background: white;
    border: 1px solid var(--border);
    border-left: 3px solid var(--primary);
    border-radius: 10px;
    padding: 10px 14px;
}

.troupe-picker-group-title {
    margin: 0 0 8px;
    font-size: 14px;
    color: var(--text-strong);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.troupe-picker-group-title i {
    color: var(--primary);
    font-size: 12px;
}

.troupe-picker-group .troupe-member-chips {
    margin: 0;
}

.troupe-picker-group .troupe-member-chip-empty {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Carte « troupe désactivée » dans la liste admin Troupes */
.troupe-card.troupe-card-inactive {
    opacity: 0.65;
    background: #fafafa;
    border-style: dashed;
}

.troupe-card.troupe-card-inactive .troupe-card-title i {
    color: var(--text-soft);
}

/* Petit flash visuel quand la distribution est rafraîchie après un changement de troupes */
@keyframes cast-flash {
    0%   { background-color: rgba(98, 70, 234, 0.12); }
    100% { background-color: transparent; }
}
.cast-block.cast-flash {
    animation: cast-flash 0.6s ease-out;
}

/* === Date rows for show edition === */
.dates-fieldset {
    /* Styling unifié via .accordion-section ; on garde la classe pour le ciblage interne */
}

.dates-fieldset legend {
    padding: 0 6px;
}

.date-row {
    display: grid;
    grid-template-columns: 2fr 1fr auto;
    grid-template-areas:
        "date capacity remove"
        "comediens comediens comediens";
    gap: 14px;
    align-items: end;
    padding: 16px;
    background: white;
    border-radius: var(--radius-sm);
    margin-bottom: 10px;
    border: 1px solid var(--border);
}

.date-row>div:nth-of-type(1) {
    grid-area: date;
}

.date-row>div:nth-of-type(2) {
    grid-area: capacity;
}

.date-row>div.overrides {
    grid-area: comediens;
    padding-top: 6px;
    border-top: 1px dashed var(--border);
}

.date-row>button.remove-date {
    grid-area: remove;
    align-self: end;
}

@media (max-width: 600px) {
    .date-row {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "date remove"
            "capacity capacity"
            "comediens comediens";
    }
}

.form-actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
    align-items: center;
}

.form-show .form-actions .btn-primary {
    padding: 12px 24px;
}

.grid-2>.form-actions {
    grid-column: 1 / -1;
}

/* Colonne « Places » des spectacles : compacte (un seul nombre) */
.cell-places-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    white-space: nowrap;
    width: 64px;
}

/* Ligne d'un spectacle masqué (inactif) — visuellement plus discrète */
.show-row-inactive td {
    opacity: 0.7;
}
.show-row-inactive .affiche-thumb {
    filter: grayscale(0.6);
}

/* Tableau des spectacles — alignement des en-têtes sur les cellules :
   colonne « Places » alignée à droite, actions collées au bord droit.
   On revient à un display table-cell (vertical-align: middle) au lieu du
   flex hérité de .actions, qui casse le centrage vertical des boutons
   par rapport aux autres cellules (notamment la vignette). */
.js-shows-table thead th:nth-child(5) {
    text-align: right;
}
.js-shows-table tbody td.actions {
    display: table-cell;
    vertical-align: middle;
    text-align: right;
    white-space: nowrap;
}
.js-shows-table tbody td.actions > * {
    vertical-align: middle;
    margin-left: 6px;
}
.js-shows-table tbody td.actions > *:first-child {
    margin-left: 0;
}
.show-active-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    vertical-align: middle;
}
.show-active-badge.inactive {
    background: var(--bg-soft);
    color: var(--text-soft);
    border: 1px solid var(--border);
}

/* === Cellule d'actions de la liste des réservations === */
/* On NE met PAS display:flex ici : ça ferait perdre au <td> son
   display:table-cell et ses boutons sortiraient du flux des colonnes.
   Le mode flex est appliqué uniquement en vue mobile (table en grid). */
.actions-cell {
    /* Icônes compactes : on garde les boutons sur une seule ligne, côte à côte. */
    white-space: nowrap;
    text-align: right;
    vertical-align: middle;
}
.actions-cell > * {
    display: inline-flex;
    vertical-align: middle;
    margin: 2px 0 2px 6px;
}
.actions-cell > *:first-child {
    margin-left: 0;
}
/* Boutons d'action en icône seule : carré, l'intitulé reste dans le title/aria. */
.actions-cell .icon-only {
    padding: 7px;
    width: 32px;
    height: 32px;
}
.actions-cell .icon-only i {
    margin: 0;
}

/* === Formulaire d'édition de réservation (modal) === */
.form-edit label {
    display: block;
    margin-top: 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

.form-edit input,
.form-edit select {
    width: 100%;
    margin-top: 4px;
}

.form-edit .grid-2 {
    margin-top: 4px;
}

.form-edit .grid-2 label {
    margin-top: 0;
}

.form-edit .modal-actions {
    margin-top: 22px;
}

.form-edit .flash {
    margin: 14px 0 0;
    padding: 10px 14px;
    font-size: 13px;
}

/* L'attribut [hidden] doit l'emporter sur le display:flex de .flash */
.flash[hidden] {
    display: none;
}

/* Petit affichage d'erreur inline dans une modale (au-dessus des boutons) */
.modal-content .flash {
    margin: 14px 0 0;
    padding: 10px 14px;
    font-size: 13.5px;
}

/* === Champ de reset MDP dans la liste des utilisateurs === */
.reset-password-input {
    max-width: 180px;
}

/* === Badge de comptage à côté des titres de section === */
.count-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-soft);
    background: var(--bg-soft);
    border-radius: 999px;
    vertical-align: middle;
}

/* Carte des utilisateurs désactivés : visuellement plus discrète */
.card-inactive {
    background: var(--bg-soft);
}
.card-inactive h2 {
    color: var(--text-soft);
}
.card-inactive .table tbody tr {
    opacity: 0.85;
}

/* Cellule d'actions des utilisateurs : boutons alignés à droite, hauteur uniforme */
.user-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    align-items: center;
}
.user-actions .inline-form {
    margin: 0;
}
.user-actions > button,
.user-actions .inline-form > button {
    height: 32px;
    padding: 0 12px;
    line-height: 1;
}

/* === Formulaire Apparence (Hero) === */
.form-appearance label {
    display: block;
    margin-top: 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}
.form-appearance input[type=text],
.form-appearance textarea {
    width: 100%;
    margin-top: 4px;
}
.appearance-fieldset {
    background: var(--bg-soft);
    padding: 18px;
    border-radius: var(--radius-sm);
    margin-top: 18px;
}
.appearance-fieldset legend {
    padding: 0 6px;
}
.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin: 8px 0 14px;
}
.grid-3 input[type=color] {
    width: 100%;
    height: 44px;
    padding: 4px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border);
    background: white;
    cursor: pointer;
}
.hero-image-preview {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
    padding: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.hero-image-preview img {
    width: 160px;
    height: 90px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
}
/* === Sélecteur de style (interface + flyer) === */
.style-picker {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 10px;
}
.style-option {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    cursor: pointer;
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.style-option:hover {
    border-color: var(--primary);
    transform: translateY(-1px);
}
.style-option.is-selected {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(98, 70, 234, 0.15);
}
.style-option input[type=radio] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.style-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 96px;
    border-radius: 6px;
    overflow: hidden;
    text-align: center;
    padding: 8px;
}
.style-preview-bar {
    display: block;
    width: 60%;
    height: 4px;
    border-radius: 2px;
    background: currentColor;
    opacity: 0.3;
}
.style-preview-ornament {
    font-size: 14px;
    letter-spacing: 0.4em;
    line-height: 1;
}
.style-preview-rule {
    display: block;
    width: 50%;
    height: 1px;
    background: currentColor;
    opacity: 0.4;
}
.style-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13px;
}
.style-meta strong { color: var(--text); font-weight: 700; }
.style-meta em     { color: var(--text-soft); font-style: normal; font-size: 12px; line-height: 1.4; }

/* Aperçus thèmes interface */
.style-preview-theme-default {
    background: linear-gradient(135deg, #6246ea 0%, #8a6dff 60%, #e94f64 100%);
    color: white;
    font-family: 'Inter', sans-serif;
}
.style-preview-theme-default .style-preview-title { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.style-preview-theme-default .style-preview-text  { font-size: 11px; opacity: 0.9; }

.style-preview-theme-follow {
    background:
        repeating-linear-gradient(135deg, var(--bg-soft) 0 12px, var(--bg-card) 12px 24px);
    color: var(--text-soft);
    border: 1px dashed var(--border);
}
.style-preview-theme-follow .style-preview-bar    { background: var(--text-soft); opacity: 0.4; }
.style-preview-theme-follow .style-preview-title  { font-size: 22px; font-weight: 700; color: var(--primary); }
.style-preview-theme-follow .style-preview-text   { font-size: 11px; }

.style-preview-theme-vintage {
    background: linear-gradient(135deg, #561129 0%, #7a1f3d 50%, #b8893d 100%);
    color: #fbf6e9;
    font-family: Georgia, 'Times New Roman', serif;
}
.style-preview-theme-vintage .style-preview-title { font-size: 22px; font-weight: 700; font-style: italic; }
.style-preview-theme-vintage .style-preview-text  { font-size: 11px; opacity: 0.95; letter-spacing: 0.05em; }

.style-preview-theme-dark {
    background: linear-gradient(135deg, #0e0e1a 0%, #2d1b6e 60%, #8b6cff 100%);
    color: #e8e8f0;
    font-family: 'Rajdhani', sans-serif;
}
.style-preview-theme-dark .style-preview-bar    { background: #8b6cff; opacity: 0.8; }
.style-preview-theme-dark .style-preview-title  { font-family: 'Orbitron', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.style-preview-theme-dark .style-preview-text   { font-size: 11px; color: #ff6b8a; letter-spacing: 0.06em; text-transform: uppercase; }

.style-preview-theme-botanical {
    background: linear-gradient(135deg, #1f4d3a 0%, #3a7a4f 50%, #d97757 100%);
    color: #fffefb;
    font-family: 'Quicksand', 'Nunito', sans-serif;
}
.style-preview-theme-botanical .style-preview-title { font-size: 22px; font-weight: 700; }
.style-preview-theme-botanical .style-preview-text  { font-size: 11px; opacity: 0.9; }

.style-preview-theme-ocean {
    background: linear-gradient(135deg, #0f3a78 0%, #1668c4 50%, #4aa8f0 100%);
    color: #f0f9ff;
    font-family: 'Lexend', sans-serif;
}
.style-preview-theme-ocean .style-preview-title { font-family: 'Fraunces', Georgia, serif; font-size: 22px; font-weight: 700; }

.style-preview-theme-cinema {
    background: linear-gradient(135deg, #0a0908 0%, #2a2113 55%, #d4af37 100%);
    color: #f3e9c8;
    font-family: 'Jost', sans-serif;
}
.style-preview-theme-cinema .style-preview-bar    { background: #d4af37; opacity: 0.85; }
.style-preview-theme-cinema .style-preview-title  { font-family: 'Cinzel', serif; font-size: 19px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.style-preview-theme-cinema .style-preview-text   { font-size: 11px; color: #d4af37; letter-spacing: 0.18em; text-transform: uppercase; }
.style-preview-theme-ocean .style-preview-text  { font-size: 11px; opacity: 0.92; }

/* Aperçus styles flyer */
.style-preview-flyer-classic {
    background: white;
    color: #14132a;
    border: 1px solid #14132a;
    box-shadow: inset 0 0 0 3px white, inset 0 0 0 4px #14132a;
    font-family: 'Times New Roman', serif;
}
.style-preview-flyer-classic .style-preview-ornament { color: #14132a; }
.style-preview-flyer-classic .style-preview-title { font-variant: small-caps; font-weight: 700; font-size: 16px; }
.style-preview-flyer-classic .style-preview-text  { font-size: 10px; font-style: italic; }

.style-preview-flyer-art-deco {
    background: #fbf6e9;
    color: #2b1f0e;
    box-shadow: inset 0 0 0 2px #c8a560, inset 0 0 0 4px #fbf6e9, inset 0 0 0 5px #8a6427;
    font-family: Georgia, serif;
}
.style-preview-flyer-art-deco .style-preview-ornament { color: #8a6427; letter-spacing: 0.6em; }
.style-preview-flyer-art-deco .style-preview-title { text-transform: uppercase; letter-spacing: 0.15em; font-weight: 800; font-size: 14px; }
.style-preview-flyer-art-deco .style-preview-rule  { background: #8a6427; opacity: 1; }

.style-preview-flyer-modern {
    background: #fafafa;
    color: #111;
    align-items: flex-start;
    padding-left: 14px;
    font-family: 'Inter', sans-serif;
}
.style-preview-flyer-modern .style-preview-ornament { display: none; }
.style-preview-flyer-modern .style-preview-title { font-weight: 900; font-size: 22px; letter-spacing: -0.02em; }
.style-preview-flyer-modern .style-preview-rule  { width: 28px; height: 3px; background: var(--primary); opacity: 1; }
.style-preview-flyer-modern .style-preview-text  { font-size: 9px; text-transform: uppercase; letter-spacing: 1px; color: #555; }

.style-preview-flyer-romantic {
    background: #fdf6f1;
    color: #7a1f3d;
    box-shadow: inset 0 0 0 2px #fdf6f1, inset 0 0 0 3px #d49c9c;
    font-family: Georgia, serif;
}
.style-preview-flyer-romantic .style-preview-ornament { color: #b86a73; }
.style-preview-flyer-romantic .style-preview-title { font-style: italic; font-weight: 600; font-size: 18px; }
.style-preview-flyer-romantic .style-preview-rule  { background: #d49c9c; opacity: 1; }
.style-preview-flyer-romantic .style-preview-text  { font-size: 10px; font-style: italic; }

/* Bordure de sélection en thème vintage */
body.theme-vintage .style-option.is-selected {
    box-shadow: 0 0 0 4px rgba(122, 31, 61, 0.18);
}

/* === Page Données (import / export) === */
.data-export-all {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    margin: 0 0 8px;
    background: var(--primary);
    color: #fff;
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-weight: 600;
    transition: background 120ms ease;
}
.data-export-all:hover,
.data-export-all:focus {
    background: var(--primary-dark);
    color: #fff;
}
.data-export-all .data-label {
    color: inherit;
}
.data-export-all-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-sm);
}
.data-export-all:hover .data-export-all-cta,
.data-export-all:focus .data-export-all-cta {
    background: rgba(255, 255, 255, 0.28);
}
.data-actions {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.data-actions li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    background: var(--bg-soft);
    border-radius: var(--radius-sm);
}
.data-label {
    font-weight: 600;
}
.data-import-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    background: var(--bg-soft);
    border-radius: var(--radius-sm);
    margin-bottom: 10px;
}
.data-import-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.data-import-card .data-label {
    font-size: 15px;
}
.data-import-modes {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}
.data-import-modes .checkbox {
    font-size: 13px;
    margin: 0;
}
.data-import-card .file-dropzone {
    min-height: 110px;
    padding: 14px 16px;
}
.data-import-card .file-dropzone .dropzone-icon {
    font-size: 24px;
    margin-bottom: 2px;
}
.data-import-card-actions {
    display: flex;
    justify-content: flex-end;
}
.data-import-card-all {
    background: linear-gradient(135deg, rgba(98, 70, 234, 0.10), rgba(98, 70, 234, 0.04));
    border: 1px solid rgba(98, 70, 234, 0.25);
}
.data-import-card-all .data-label {
    color: var(--primary);
}

/* === Import « intelligent » (zone unique + modale d'aperçu) === */
.data-import-smart .file-dropzone {
    min-height: 130px;
}
#data-import-status {
    margin: 0;
}
#data-import-status.hint-error {
    color: var(--error);
}

.modal-content-wide {
    max-width: 640px;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
}
.import-preview-body {
    margin: 4px 0 14px;
}
.import-preview-meta {
    margin: 0 0 12px;
    display: grid;
    gap: 6px;
}
.import-preview-meta div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: baseline;
}
.import-preview-meta dt {
    margin: 0;
    color: var(--text-soft);
    font-size: 13px;
    min-width: 110px;
}
.import-preview-meta dd {
    margin: 0;
    font-weight: 500;
    color: var(--text);
}
.import-preview-type-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--bg-soft);
    color: var(--primary);
    font-size: 12px;
    font-weight: 600;
}
.import-preview-type-zip {
    background: rgba(98, 70, 234, 0.12);
}
.import-preview-list {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.import-preview-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: center;
    padding: 8px 12px;
    background: var(--bg-soft);
    border-radius: var(--radius-sm);
}
.import-preview-resource {
    font-weight: 600;
    color: var(--text);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.import-preview-resource i {
    color: var(--primary);
}
.import-preview-count {
    font-size: 13px;
    color: var(--text-soft);
}
.import-preview-samples {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-left: auto;
    max-width: 100%;
}
.import-preview-samples .chip {
    padding: 2px 8px;
    border-radius: 999px;
    background: white;
    border: 1px solid var(--border);
    font-size: 12px;
    color: var(--text);
}
.import-preview-samples .chip-muted {
    color: var(--text-soft);
    font-style: italic;
}
.import-preview-skipped {
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--text-soft);
}
.import-preview-skipped code {
    font-size: 12px;
    background: var(--bg-soft);
    padding: 1px 6px;
    border-radius: 4px;
}
.import-preview-warning {
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--warn);
    background: rgba(245, 158, 11, 0.08);
    padding: 8px 12px;
    border-radius: var(--radius-sm);
}
.import-preview-mode {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    padding: 10px 12px;
    background: var(--bg-soft);
    border-radius: var(--radius-sm);
    margin-bottom: 12px;
}
.import-preview-mode-label {
    font-weight: 600;
}
.import-preview-mode .checkbox {
    margin: 0;
    font-size: 13px;
}

@media (max-width: 760px) {
    .grid-3 {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 8px;
    }
    .data-import-card-head {
        flex-direction: column;
        align-items: flex-start;
    }
    .data-import-card-actions {
        justify-content: stretch;
    }
    .data-import-card-actions .btn-primary {
        width: 100%;
    }
}

/* =====================================================================
   RESPONSIVE MOBILE
   ===================================================================== */
@media (max-width: 760px) {
    .container {
        padding: 18px 14px 60px;
    }

    /* Topbar : marque sur sa propre ligne, navigation dessous */
    .topbar {
        padding: 10px 14px;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        position: relative;
    }
    .brand {
        font-size: 16px;
        align-self: flex-start;
    }
    .brand-name {
        white-space: nowrap;
    }
    .brand-mark {
        font-size: 20px;
    }
    .topnav {
        width: 100%;
        gap: 4px;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
    }
    .topnav a {
        padding: 6px 10px;
        font-size: 13px;
    }
    /* On masque la mention du rôle dans le chip pour gagner de la place */
    .topnav .userchip em {
        display: none;
    }
    .userchip {
        font-size: 12.5px;
        padding: 5px 10px;
    }

    /* Hero plus compact */
    .hero {
        padding: 30px 22px;
        border-radius: var(--radius);
        margin-bottom: 22px;
    }
    .hero .lead {
        font-size: 14.5px;
    }

    /* Titres */
    .page-head {
        margin-bottom: 18px;
    }
    .page-head h1 {
        font-size: 22px;
    }

    /* Cards / sections */
    .card {
        padding: 18px 16px;
    }
    .group {
        padding: 14px 12px;
    }
    .group-head {
        gap: 6px;
    }
    .group-head h2 {
        font-size: 16px;
    }

    /* Modales */
    .modal {
        padding: 12px;
        align-items: flex-start;
        padding-top: 28px;
    }
    .modal-content {
        padding: 22px 20px;
    }
    .modal-actions {
        flex-wrap: wrap;
    }
    .modal-actions button {
        flex: 1 1 auto;
    }

    /* Tabs */
    .tabs a {
        padding: 10px 14px;
        font-size: 13.5px;
    }

    /* Tableaux : transformation en cartes verticales sur mobile.
       Plutôt que de scroller horizontalement (illisible), chaque ligne devient
       une carte avec un libellé devant chaque valeur (issu de data-label). */
    .table-wrap {
        overflow: visible;
    }
    .table-wrap .table,
    .table-wrap .table thead,
    .table-wrap .table tbody,
    .table-wrap .table tr,
    .table-wrap .table td {
        display: block;
        width: 100%;
    }
    .table-wrap .table {
        background: transparent;
        box-shadow: none;
        border: 0;
        border-radius: 0;
    }
    .table-wrap .table thead {
        display: none; /* on cache les en-têtes — chaque cellule porte son libellé */
    }
    .table-wrap .table tr {
        background: white;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        margin-bottom: 8px;
        padding: 10px 12px;
        box-shadow: var(--shadow-sm);
    }
    .table-wrap .table tr:hover {
        background: white;
    }
    .table-wrap .table td {
        padding: 3px 0;
        border: 0;
        font-size: 13.5px;
        vertical-align: middle;
    }
    /* Libellé inline à gauche + valeur à droite : carte 2× plus compacte
       qu'un layout vertical "label au-dessus / valeur en-dessous". */
    .table-wrap .table td[data-label] {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .table-wrap .table td[data-label]:before {
        content: attr(data-label);
        flex: 0 0 96px;
        font-size: 10.5px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--text-soft);
        line-height: 1.3;
    }
    /* "Accompagnants" : on remplace le mot par une icône Font Awesome
       (fa-user-group). Plus rapide à lire et plus compact que le mot. */
    .table-wrap .table td[data-label="Accompagnants"]:before {
        content: "\f500";
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        font-size: 14px;
        text-transform: none;
        letter-spacing: 0;
    }
    /* La colonne d'actions devient une rangée de boutons en bas de la carte */
    .table-wrap .table td.actions,
    .table-wrap .table td.actions-cell {
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid var(--border);
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        justify-content: flex-start;
    }
    /* La cellule vignette (affiche) : retirer la zone "image seule" qui prendrait
       trop de place ; on garde la miniature alignée à gauche */
    .table-wrap .table td.cell-thumb {
        padding: 0 0 8px;
    }
    .table-wrap .table td.cell-thumb .affiche-thumb {
        width: 60px;
        height: 84px;
    }
    /* Annule le table-layout: fixed du bloc .group sur mobile */
    .group .table.compact {
        table-layout: auto;
    }
    /* Le compact qui réduit la taille du texte n'est plus utile en cartes */
    .table-wrap .table.compact td {
        font-size: 13.5px;
        padding: 3px 0;
    }
    /* Inputs internes (reset MDP) prennent toute la largeur dispo dans la carte */
    .table-wrap .table .reset-password-input {
        flex: 1 1 100%;
    }

    /* Inline forms (toggle / reset MDP / delete) : passage à la ligne autorisé */
    .inline-form {
        flex-wrap: wrap;
    }
    .reset-password-input {
        flex: 1 1 130px;
        min-width: 0;
        max-width: none;
    }
    .actions {
        flex-wrap: wrap;
        gap: 6px;
    }
    .actions-cell {
        display: flex;
        gap: 6px;
        align-items: center;
        justify-content: flex-start;
    }
    .actions-cell > * + * {
        margin-left: 0;
    }

    /* KPIs plus serrés */
    .kpis {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 10px;
        margin-bottom: 18px;
    }
    .kpi {
        padding: 14px 10px;
    }
    .kpi .num {
        font-size: 26px;
    }

    /* Affiche thumbnails plus petites */
    .affiche-thumb {
        width: 36px;
        height: 50px;
    }

    /* Form de réservation */
    .form-show-info {
        gap: 12px;
    }
    .form-show-info h2 {
        font-size: 18px;
    }
    .form-show-thumb {
        width: 50px;
        height: 68px;
    }
    .form-reservation {
        padding: 18px 14px;
    }

    /* Print actions */
    .print-actions {
        padding: 12px 14px;
        gap: 8px;
    }
    .print-actions a {
        font-size: 13px;
        padding: 8px 12px;
    }

    /* Cards de spectacles : grille à une seule colonne sur mobile */
    .shows-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .show-card-img {
        aspect-ratio: 16 / 10;
    }

    /* View switch (vue groupée / tableau) : pleine largeur, lisible */
    .view-switch {
        display: flex;
        width: 100%;
    }
    .view-switch a {
        flex: 1 1 auto;
        text-align: center;
        font-size: 12.5px;
        padding: 7px 10px;
    }

    /* === Maquette compacte mobile : cartes spectacles & réservations ===
       On remplace le format "libellé en colonne fixe + valeur" par une carte
       plus dense :
       - titre / nom du spectateur en gros (rôle de header)
       - badge "places" dans le coin haut-droit
       - méta-infos sans libellé en dessous (la position et la typo suffisent
         à identifier chaque info)
       - actions en pied, séparées par un filet */

    /* --- Spectacles (admin) --- */
    .table-wrap .js-shows-table tbody tr {
        display: grid;
        grid-template-columns: 60px 1fr auto;
        grid-template-areas:
            "thumb title  places"
            "thumb venue  venue"
            "thumb repr   repr"
            "actions actions actions";
        column-gap: 12px;
        row-gap: 4px;
        align-items: center;
    }
    .table-wrap .js-shows-table td.cell-thumb {
        grid-area: thumb;
        align-self: start;
        padding: 0;
    }
    .table-wrap .js-shows-table td.cell-thumb .affiche-thumb {
        width: 60px;
        height: 84px;
    }
    .table-wrap .js-shows-table td[data-label="Titre"] {
        grid-area: title;
        font-size: 16px;
        line-height: 1.25;
        align-self: end;
        padding: 0;
        display: block;
    }
    .table-wrap .js-shows-table td[data-label="Lieu"] {
        grid-area: venue;
        font-size: 13.5px;
        color: var(--text-soft);
        padding: 0;
        display: block;
    }
    .table-wrap .js-shows-table td[data-label="Représentations"] {
        grid-area: repr;
        font-size: 13px;
        color: var(--text-soft);
        align-self: start;
        padding: 0;
        display: block;
    }
    .table-wrap .js-shows-table td[data-label="Places"].cell-places-num {
        grid-area: places;
        align-self: start;
        justify-self: end;
        width: auto;
        min-width: 36px;
        height: 28px;
        padding: 0 10px;
        background: var(--primary);
        color: white;
        border-radius: 999px;
        font-size: 13px;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .table-wrap .js-shows-table tbody td.actions {
        grid-area: actions;
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 6px;
        padding-top: 8px;
        border-top: 1px solid var(--border);
    }
    .table-wrap .js-shows-table td[data-label]:before {
        content: none;
        display: none;
    }

    /* --- Réservations --- */
    .table-wrap .table:has(td[data-label="Spectateur"]) tbody tr {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "name        places"
            "companions  companions"
            "show        show"
            "date        date"
            "reserved    reserved"
            "associated  associated"
            "actions     actions";
        column-gap: 12px;
        row-gap: 4px;
    }
    .table-wrap .table:has(td[data-label="Spectateur"]) td[data-label="Spectateur"] {
        grid-area: name;
        font-size: 16px;
        line-height: 1.3;
        padding: 0;
        display: block;
    }
    .table-wrap .table:has(td[data-label="Spectateur"]) td[data-label="Accompagnants"] {
        grid-area: companions;
        font-size: 13.5px;
        color: var(--text-soft);
        padding: 0;
        display: flex;
        align-items: flex-start;
        gap: 8px;
    }
    .table-wrap .table:has(td[data-label="Spectateur"]) td[data-label="Accompagnants"]:before {
        content: "\f500";
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        font-size: 13px;
        color: var(--text-soft);
        flex: 0 0 auto;
        line-height: 1.4;
    }
    .table-wrap .table:has(td[data-label="Spectateur"]) td[data-label="Places"] {
        grid-area: places;
        justify-self: end;
        padding: 0;
        display: block;
    }
    .table-wrap .table:has(td[data-label="Spectateur"]) td[data-label="Spectacle"] {
        grid-area: show;
        font-size: 13.5px;
        padding: 0;
        display: block;
    }
    .table-wrap .table:has(td[data-label="Spectateur"]) td[data-label="Date"] {
        grid-area: date;
        font-size: 14px;
        font-weight: 500;
        padding: 0;
        display: block;
    }
    .table-wrap .table:has(td[data-label="Spectateur"]) td[data-label="Réservé le"] {
        grid-area: reserved;
        font-size: 12px;
        color: var(--text-soft);
        padding: 0;
        display: flex;
        align-items: baseline;
        gap: 4px;
    }
    .table-wrap .table:has(td[data-label="Spectateur"]) td[data-label="Réservé le"]:before {
        content: "réservé le";
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        color: var(--text-soft);
        flex: 0 0 auto;
    }
    .table-wrap .table:has(td[data-label="Spectateur"]) td[data-label="Spectateurs de"] {
        grid-area: associated;
        font-size: 12.5px;
        color: var(--text-soft);
        padding: 0;
        display: block;
    }
    .table-wrap .table:has(td[data-label="Spectateur"]) td[data-label="Spectateur"]:before,
    .table-wrap .table:has(td[data-label="Spectateur"]) td[data-label="Places"]:before,
    .table-wrap .table:has(td[data-label="Spectateur"]) td[data-label="Spectacle"]:before,
    .table-wrap .table:has(td[data-label="Spectateur"]) td[data-label="Date"]:before,
    .table-wrap .table:has(td[data-label="Spectateur"]) td[data-label="Spectateurs de"]:before {
        content: none;
        display: none;
    }
    .table-wrap .table:has(td[data-label="Spectateur"]) td.actions-cell {
        grid-area: actions;
        margin-top: 6px;
        padding-top: 8px;
        border-top: 1px solid var(--border);
    }
}

/* === Très petits écrans === */
@media (max-width: 420px) {
    .container {
        padding: 14px 10px 50px;
    }
    .hero {
        padding: 24px 18px;
    }
    .userchip {
        font-size: 11.5px;
        padding: 4px 9px;
    }
    .topnav a {
        padding: 5px 9px;
        font-size: 12.5px;
    }
    .modal-content {
        padding: 20px 16px;
    }
    .form-edit .grid-2 {
        gap: 10px;
    }
}
/* === Troupes (admin) === */
.troupe-members {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px 18px;
    margin: 14px 0 6px;
    background: #fafbfc;
}

.troupe-members > legend {
    font-weight: 700;
    color: var(--text-strong);
    padding: 0 8px;
    font-size: 14px;
}

.troupe-members-group-title {
    margin: 14px 0 8px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-soft);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}

.troupe-members-group-title:first-of-type {
    margin-top: 4px;
}

.troupe-members-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px 14px;
}

.check-line {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 120ms ease;
    background: white;
    border: 1px solid var(--border);
    font-size: 14px;
}

.check-line:hover {
    background: var(--bg-soft, #f4f5f7);
}

.check-line input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--primary);
    flex-shrink: 0;
}

.check-line span {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.role-tag-mini {
    font-size: 9px !important;
    padding: 2px 7px !important;
}

/* Cartes de troupe (liste) */
.troupe-list {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}

.troupe-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.troupe-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.troupe-card-title {
    margin: 0;
    font-size: 16px;
    color: var(--text-strong);
    display: flex;
    align-items: center;
    gap: 8px;
}

.troupe-card-title i {
    color: var(--primary);
}

.troupe-member-chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.troupe-member-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-soft, #f4f5f7);
    border: 1px solid var(--border);
    color: var(--text-strong);
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12.5px;
}

.role-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-soft);
    display: inline-block;
    flex-shrink: 0;
}

.role-dot.role-organisateur {
    background: var(--accent);
}

.role-dot.role-comedien {
    background: var(--primary);
}

.troupe-card-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px dashed var(--border);
}

/* Les 3 boutons (Modifier / Toggle / Supprimer) doivent rester dans la
   carte, même quand celle-ci est étroite (grille auto-fill). */
.troupe-card-actions .btn-ghost,
.troupe-card-actions .btn-danger,
.troupe-card-actions .inline-form {
    min-width: 0;
}

.troupe-card-actions .btn-ghost,
.troupe-card-actions .btn-danger {
    padding: 4px 10px;
    font-size: 12.5px;
    white-space: nowrap;
}

/* Bouton Supprimer poussé à droite quand il y a la place. */
.troupe-card-actions > .inline-form:last-child {
    margin-left: auto;
}

@media (max-width: 600px) {
    .troupe-members-grid {
        grid-template-columns: 1fr;
    }
    .troupe-list {
        grid-template-columns: 1fr;
    }
}

/* Recap troupes (profile.php) */
.recap-troupe-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.recap-troupe-item {
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: white;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.recap-troupe-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.recap-troupe-head strong {
    color: var(--text-strong);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.recap-troupe-head strong i {
    color: var(--primary);
}

.recap-troupes .troupe-member-chips {
    margin: 0;
}

/* === Partages (messages + liens) === */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.shares-legend {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.share-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 999px;
    background: white;
    border: 1px solid var(--border);
    color: var(--text-soft);
}

.share-chip.is-orga i {
    color: var(--accent);
}

.share-chip.is-comedien i {
    color: var(--primary);
}

.shares-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    align-items: start;
}

@media (max-width: 900px) {
    .shares-grid {
        grid-template-columns: 1fr;
    }
}

.shares-col {
    background: var(--bg-card);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    padding: 22px;
}

.shares-col-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.shares-col-head h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
}

.shares-col-head h2 i {
    color: var(--primary);
    margin-right: 6px;
}

.shares-col-head .btn-primary.small {
    padding: 6px 12px;
    font-size: 13px;
}

.shares-col-meta {
    margin: 0 0 14px;
}

.share-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.share-item {
    position: relative;
    background: var(--bg-soft);
    border-radius: var(--radius-sm);
    border-left: 4px solid var(--border);
    padding: 14px 16px;
}

.share-item.is-orga {
    border-left-color: var(--accent);
    background: #fef4f5;
}

.share-item.is-comedien {
    border-left-color: var(--primary);
    background: #f3f0ff;
}

.share-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.share-author {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 14px;
}

.share-author i {
    color: var(--text-soft);
    font-size: 16px;
}

.share-time {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--text-soft);
    background: rgba(0, 0, 0, 0.04);
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
}

.share-item.is-orga .share-time {
    background: rgba(233, 79, 100, 0.10);
    color: #b3344a;
}

.share-item.is-comedien .share-time {
    background: rgba(98, 70, 234, 0.10);
    color: #4a36b1;
}

.share-troupes {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    align-self: flex-start;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--text-soft);
    background: rgba(0, 0, 0, 0.05);
    padding: 2px 9px;
    border-radius: 999px;
}

.share-troupes i {
    font-size: 10px;
    opacity: 0.8;
}

.share-troupes--all {
    color: var(--text-soft);
    background: rgba(0, 0, 0, 0.035);
}

.share-troupe-picker {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    margin: 4px 0 2px;
}

.share-troupe-picker legend {
    font-size: 13px;
    font-weight: 600;
    padding: 0 6px;
}

.share-troupe-picker p {
    margin: 0 0 8px;
}

.share-troupe-options {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
}

.share-troupe-options .checkbox {
    font-size: 14px;
}

.share-text {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.share-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-weight: 600;
    color: var(--primary);
    word-break: break-word;
    overflow-wrap: anywhere;
}

.share-link i {
    flex-shrink: 0;
}

.share-link-host {
    font-weight: 500;
}

.share-delete {
    display: flex;
    justify-content: flex-end;
    margin: 10px 0 0;
}

.share-delete .btn-danger.small {
    padding: 6px 10px;
    font-size: 12px;
}

.share-item--flash {
    animation: share-flash 1.2s ease-out;
}

@keyframes share-flash {
    0%   { background-color: rgba(255, 220, 130, 0.55); }
    100% { background-color: var(--bg-soft); }
}

.share-item--flash.is-orga {
    animation-name: share-flash-orga;
}
.share-item--flash.is-comedien {
    animation-name: share-flash-comedien;
}

@keyframes share-flash-orga {
    0%   { background-color: rgba(255, 220, 130, 0.6); }
    100% { background-color: #fef4f5; }
}
@keyframes share-flash-comedien {
    0%   { background-color: rgba(255, 220, 130, 0.6); }
    100% { background-color: #f3f0ff; }
}

/* Modale d'ajout d'un partage : champs sur deux lignes */
#js-share-message-modal .modal-content textarea,
#js-share-link-modal .modal-content input[type=url],
#js-share-link-modal .modal-content input[type=text] {
    margin-bottom: 4px;
}

#js-share-message-modal .js-share-error,
#js-share-link-modal .js-share-error {
    margin: 12px 0 0;
}

/* =====================================================================
   MOBILE TWEAKS — appliqués à toutes les pages + modales
   - Empêche le zoom auto iOS sur tap d'un input (font-size < 16px).
   - Permet le scroll vertical des modales standard quand le contenu
     dépasse la hauteur du viewport (l'absence de overflow:auto coupait
     le bas du formulaire sur mobile).
   - Agrandit les zones tactiles (modal-close, suppression d'un partage).
   - Resserre les paddings de la page Partages sur petit écran et
     protège des longs liens / longs noms.
   ===================================================================== */
@media (max-width: 760px) {
    /* iOS Safari zoome automatiquement sur un champ < 16px : on neutralise.
       On cible aussi les sélecteurs spécifiques (.inline-form input) qui
       avaient une font-size plus petite et l'emportaient en spécificité. */
    input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range]):not([type=color]):not([type=file]),
    select,
    textarea,
    .inline-form input {
        font-size: 16px;
    }

    /* Les modales standard doivent pouvoir défiler quand le contenu
       dépasse la hauteur de l'écran (resetpwd, édition réservation, etc.). */
    .modal {
        overflow-y: auto;
    }

    /* Cible tactile plus confortable pour la croix de fermeture. */
    .modal-close {
        width: 40px;
        height: 40px;
        top: 10px;
        right: 10px;
    }

    /* Bouton de suppression d'un partage : agrandi pour le doigt. */
    .share-delete .btn-danger.small {
        padding: 8px 12px;
        font-size: 13px;
    }

    /* Page Partages : on récupère un peu d'espace horizontal. */
    .shares-col {
        padding: 16px 14px;
    }

    /* L'auteur, le rôle et l'horodatage doivent pouvoir s'enchaîner
       sans déborder quand le pseudonyme est long. */
    .share-item-head {
        gap: 6px 10px;
    }
    .share-author {
        flex-wrap: wrap;
    }

    /* Long lien sans espace : on autorise la coupure n'importe où. */
    .share-link-label,
    .share-link-host {
        word-break: break-all;
    }
}

/* Sur très petits écrans, on resserre encore un peu les modales standard
   pour profiter de la pleine largeur sans déborder. */
@media (max-width: 420px) {
    .modal {
        padding: 10px;
        padding-top: 20px;
    }
    .modal-content {
        padding: 18px 14px;
    }
    .shares-legend {
        gap: 6px;
    }
}

/* === Thème alternatif : Vintage / Théâtral === */
/* Palette bordeaux + ivoire avec polices serif (Playfair Display + Lora). */
body.theme-vintage {
    --bg-page: #f6efe2;
    --bg-card: #fffaf0;
    --bg-soft: #efe3cf;
    --bg-dark: #2a1a1d;
    --primary: #7a1f3d;
    --primary-dark: #561129;
    --accent: #b8893d;
    --accent-dark: #8a6427;
    --text: #2a1a1d;
    --text-soft: #6e5a4f;
    --border: #d9c8ad;
    --shadow-sm: 0 1px 3px rgba(54, 25, 32, 0.08);
    --shadow: 0 4px 24px rgba(54, 25, 32, 0.12);
    --shadow-lg: 0 12px 40px rgba(54, 25, 32, 0.16);
    --hero-gradient: linear-gradient(135deg, #561129 0%, #7a1f3d 50%, #b8893d 100%);
    font-family: 'Lora', Georgia, 'Times New Roman', serif;
}

body.theme-vintage h1,
body.theme-vintage h2,
body.theme-vintage h3,
body.theme-vintage .brand-name,
body.theme-vintage .hero h1,
body.theme-vintage .page-head h1,
body.theme-vintage .card h2 {
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    letter-spacing: 0.005em;
}

body.theme-vintage .topbar {
    background: linear-gradient(180deg, #2a1a1d 0%, #3d2429 100%);
    border-bottom: 2px solid var(--accent);
}

body.theme-vintage .brand-mark {
    color: var(--accent);
}

body.theme-vintage .hero {
    border: 1px solid rgba(184, 137, 61, 0.4);
}

body.theme-vintage .btn-primary {
    background: var(--primary);
    border-color: var(--primary-dark);
    box-shadow: 0 4px 12px rgba(122, 31, 61, 0.28);
}

body.theme-vintage .btn-primary:hover {
    background: var(--primary-dark);
    box-shadow: 0 6px 18px rgba(122, 31, 61, 0.36);
}

body.theme-vintage .card {
    border: 1px solid var(--border);
    background: var(--bg-card);
}

body.theme-vintage .tabs a.active,
body.theme-vintage .tabs a:hover {
    color: var(--primary);
}

/* Playfair Display paraît assez grand : on réduit légèrement les titres. */
body.theme-vintage .page-head h1,
body.theme-vintage .profile-head h1 {
    font-size: 25px;
}
body.theme-vintage .hero h1 {
    font-size: clamp(26px, 3.6vw, 36px);
}
body.theme-vintage .card h2 {
    font-size: 18px;
}
body.theme-vintage .rep-detail-head h2 {
    font-size: 16px;
}

/* === Thème alternatif : Botanique === */
/* Vert sauge + terracotta + cream, polices arrondies (Quicksand + Nunito). */
body.theme-botanical {
    --bg-page: #f5f1e8;
    --bg-card: #fffefb;
    --bg-soft: #e8e4d4;
    --bg-dark: #1f2e25;
    --primary: #3a7a4f;
    --primary-dark: #2a5a3a;
    --accent: #d97757;
    --accent-dark: #b85a3d;
    --text: #1f2e25;
    --text-soft: #5a6e5f;
    --border: #d4cfb8;
    --shadow-sm: 0 1px 3px rgba(31, 46, 37, 0.06);
    --shadow: 0 4px 24px rgba(31, 46, 37, 0.10);
    --shadow-lg: 0 12px 40px rgba(31, 46, 37, 0.14);
    --hero-gradient: linear-gradient(135deg, #1f4d3a 0%, #3a7a4f 50%, #d97757 100%);
    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

body.theme-botanical h1,
body.theme-botanical h2,
body.theme-botanical h3,
body.theme-botanical .brand-name,
body.theme-botanical .hero h1,
body.theme-botanical .page-head h1,
body.theme-botanical .card h2 {
    font-family: 'Quicksand', 'Nunito', sans-serif;
    letter-spacing: -0.005em;
    font-weight: 700;
}

body.theme-botanical .topbar {
    background: linear-gradient(180deg, #1f2e25 0%, #2a4035 100%);
    border-bottom: 2px solid var(--accent);
}

body.theme-botanical .brand-mark {
    color: var(--accent);
}

body.theme-botanical .hero {
    border: 1px solid rgba(217, 119, 87, 0.35);
}

body.theme-botanical .btn-primary {
    background: var(--primary);
    border-color: var(--primary-dark);
    box-shadow: 0 4px 12px rgba(58, 122, 79, 0.28);
}

body.theme-botanical .btn-primary:hover {
    background: var(--primary-dark);
    box-shadow: 0 6px 18px rgba(58, 122, 79, 0.36);
}

body.theme-botanical .card {
    border: 1px solid var(--border);
}

body.theme-botanical .tabs a.active,
body.theme-botanical .tabs a:hover {
    color: var(--primary);
}

/* === Thème alternatif : Sombre / Nuit === */
/* Fond indigo sombre, accents violet + rose néon, polices Space Grotesk + Inter. */
body.theme-dark {
    --bg-page: #0e0e1a;
    --bg-card: #1a1a2e;
    --bg-soft: #252540;
    --bg-dark: #050511;
    --primary: #8b6cff;
    --primary-dark: #6246ea;
    --accent: #ff6b8a;
    --accent-dark: #e94f64;
    --text: #e8e8f0;
    --text-soft: #9a9ab0;
    --border: #2a2a44;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.65);
    --hero-gradient: linear-gradient(135deg, #1a1a2e 0%, #2d1b6e 50%, #8b6cff 100%);
    font-family: 'Rajdhani', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 16px;
}

body.theme-dark h1,
body.theme-dark h2,
body.theme-dark h3,
body.theme-dark .brand-name,
body.theme-dark .hero h1,
body.theme-dark .page-head h1,
body.theme-dark .card h2 {
    font-family: 'Orbitron', 'Rajdhani', sans-serif;
    letter-spacing: 0.02em;
}

body.theme-dark .brand-name,
body.theme-dark .hero h1,
body.theme-dark .page-head h1 {
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

body.theme-dark .topbar {
    background: linear-gradient(180deg, #050511 0%, #14132a 100%);
    border-bottom: 1px solid var(--border);
}

body.theme-dark .brand-mark {
    color: var(--primary);
}

body.theme-dark .hero {
    border: 1px solid var(--border);
}

body.theme-dark .card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text);
}

body.theme-dark input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range]):not([type=color]),
body.theme-dark select,
body.theme-dark textarea {
    background-color: var(--bg-soft);
    color: var(--text);
    border-color: var(--border);
}

body.theme-dark select:disabled,
body.theme-dark input:disabled {
    background: #1f1f33;
    color: var(--text-soft);
}

body.theme-dark .btn,
body.theme-dark .btn-secondary {
    background: var(--bg-soft);
    color: var(--primary);
    border-color: var(--bg-soft);
}

body.theme-dark .btn:hover,
body.theme-dark .btn-secondary:hover {
    background: #303055;
}

body.theme-dark .btn-ghost {
    color: var(--text);
    border-color: var(--border);
}

body.theme-dark .btn-ghost:hover {
    background: var(--bg-soft);
    border-color: var(--bg-soft);
}

body.theme-dark .btn-danger {
    background: var(--bg-card);
    color: var(--accent);
    border-color: rgba(255, 107, 138, 0.4);
}

body.theme-dark .btn-primary {
    background: var(--primary);
    border-color: var(--primary-dark);
    color: white;
    box-shadow: 0 4px 14px rgba(139, 108, 255, 0.4);
}

body.theme-dark .btn-primary:hover {
    background: var(--primary-dark);
    box-shadow: 0 6px 20px rgba(139, 108, 255, 0.55);
}

body.theme-dark .tabs a.active,
body.theme-dark .tabs a:hover {
    color: var(--primary);
}

body.theme-dark .style-option {
    background: var(--bg-card);
}

body.theme-dark .style-option.is-selected {
    box-shadow: 0 0 0 4px rgba(139, 108, 255, 0.25);
}

/* Overrides des surfaces blanches hardcodées : on les ramène sur var(--bg-card)
   ou var(--bg-soft) pour qu'elles restent lisibles sur fond sombre. */
body.theme-dark .table,
body.theme-dark .table-wrap .table tr,
body.theme-dark .modal-content,
body.theme-dark .kpi,
body.theme-dark .group,
body.theme-dark .empty,
body.theme-dark .recap-rsv-list li,
body.theme-dark .recap-troupe-item,
body.theme-dark .rep-card,
body.theme-dark .rep-close-menu-items,
body.theme-dark .resp-name-list li,
body.theme-dark .cal-cell,
body.theme-dark .accordion-meta,
body.theme-dark .role-row,
body.theme-dark .member-picker-input,
body.theme-dark .cast-popup,
body.theme-dark .troupe-pick-card,
body.theme-dark .troupe-pick-check,
body.theme-dark .troupe-picker-empty,
body.theme-dark .troupe-picker-group,
body.theme-dark .troupe-card,
body.theme-dark .date-row,
body.theme-dark .check-line,
body.theme-dark .share-chip,
body.theme-dark .btn-resp,
body.theme-dark .view-switch a.active,
body.theme-dark .import-preview-samples .chip {
    background: var(--bg-card);
    color: var(--text);
    border-color: var(--border);
}

body.theme-dark .recap-item:hover,
body.theme-dark .table-wrap .table tr:hover {
    background: var(--bg-soft);
}

/* Section accordéon (Rôles / Représentations) : la surface claire #ede9fe et
   sa bordure n'avaient pas d'équivalent sombre → fond élevé, bordure thème.
   On conserve la barre d'accent à gauche. */
body.theme-dark .accordion-section {
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary);
}
body.theme-dark .accordion-section > summary:hover {
    background: rgba(255, 255, 255, 0.05);
}
body.theme-dark .accordion-section .btn-secondary {
    background: #303055; /* un cran plus clair que le panneau (--bg-soft) */
    border-color: transparent;
}
body.theme-dark .accordion-section .btn-secondary:hover {
    background: #3a3a63;
}

/* En-tête de tableau : var(--bg-dark) vire au noir quasi pur en thème sombre,
   on l'adoucit sur une surface élevée plus lisible. */
body.theme-dark .table thead th {
    background: var(--bg-soft);
    color: var(--text);
}

body.theme-dark .share-troupes,
body.theme-dark .share-troupes--all {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-soft);
}

body.theme-dark .share-troupe-picker {
    background: var(--bg-card);
    border-color: var(--border);
}

body.theme-dark .grid-3 input[type=color] {
    background: var(--bg-soft);
}

body.theme-dark .troupe-members,
body.theme-dark .troupe-card.troupe-card-inactive {
    background: var(--bg-soft);
}

body.theme-dark .cal-cell.other {
    background: #14142a;
    color: var(--text-soft);
}

body.theme-dark .cal-cell.today {
    background: #2d2552;
}

body.theme-dark .cal-event.performance {
    background: rgba(233, 79, 100, 0.18);
    color: #fda4af;
    border-color: rgba(233, 79, 100, 0.55);
}
body.theme-dark .cal-event.performance.performance-past {
    background: #14142a;
    color: var(--text-soft);
    border-color: rgba(233, 79, 100, 0.35);
}

body.theme-dark .rep-card--cancelled,
body.theme-dark .rep-card--past {
    background: #14142a;
    color: var(--text-soft);
}

/* Surfaces sémantiques (warning / error) : on garde la teinte mais en sombre. */
body.theme-dark .flash-success {
    background: rgba(16, 185, 129, 0.15);
    color: #6ee7b7;
    border-color: var(--success);
}

body.theme-dark .flash-error,
body.theme-dark .rep-badge.cancelled,
body.theme-dark .cal-event.cancelled,
body.theme-dark .rep-close-option.ko:hover,
body.theme-dark .resp-count.no,
body.theme-dark .resp-block-no .resp-name-list li,
body.theme-dark .btn-resp.active.no {
    background: rgba(239, 68, 68, 0.18);
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.4);
}

body.theme-dark .resp-count.maybe,
body.theme-dark .resp-block-maybe .resp-name-list li,
body.theme-dark .btn-resp.active.maybe {
    background: rgba(245, 158, 11, 0.18);
    color: #fcd34d;
    border-color: rgba(245, 158, 11, 0.4);
}

body.theme-dark .share-item.is-orga {
    background: rgba(255, 107, 138, 0.12);
}

body.theme-dark .share-item.is-comedien {
    background: rgba(139, 108, 255, 0.12);
}

body.theme-dark .affiche-current .checkbox.danger:hover,
body.theme-dark .hero-image-preview .checkbox.danger:hover {
    background: rgba(239, 68, 68, 0.18);
}

/* Aperçus de flyer : on garde les couleurs claires d'origine — c'est l'aperçu
   du rendu réel imprimé, qui reste sur papier blanc. */

/* === Thème alternatif : Océan / Bord de mer === */
/* Bleu profond (teal) + sable doré sur fond clair, polices arrondies
   (Poppins pour les titres, Mulish pour le texte). */
body.theme-ocean {
    --bg-page: #eef3fb;
    --bg-card: #ffffff;
    --bg-soft: #dbe7f7;
    --bg-dark: #07203f;
    --primary: #1668c4;
    --primary-dark: #0f4d96;
    --accent: #f2a23a;
    --accent-dark: #d4811f;
    --text: #0d2440;
    --text-soft: #4a607d;
    --border: #c2d6ec;
    --shadow-sm: 0 1px 3px rgba(13, 36, 64, 0.07);
    --shadow: 0 4px 24px rgba(13, 36, 64, 0.12);
    --shadow-lg: 0 12px 40px rgba(13, 36, 64, 0.16);
    --hero-gradient: linear-gradient(135deg, #0f3a78 0%, #1668c4 50%, #4aa8f0 100%);
    font-family: 'Lexend', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

body.theme-ocean h1,
body.theme-ocean h2,
body.theme-ocean h3,
body.theme-ocean .brand-name,
body.theme-ocean .hero h1,
body.theme-ocean .page-head h1,
body.theme-ocean .card h2 {
    font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
    letter-spacing: 0;
    font-weight: 700;
}

body.theme-ocean .topbar {
    background: linear-gradient(180deg, #07203f 0%, #0e3a6e 100%);
    border-bottom: 2px solid var(--accent);
}

body.theme-ocean .brand-mark {
    color: var(--accent);
}

body.theme-ocean .hero {
    border: 1px solid rgba(56, 189, 248, 0.35);
}

body.theme-ocean .btn-primary {
    background: var(--primary);
    border-color: var(--primary-dark);
    box-shadow: 0 4px 12px rgba(22, 104, 196, 0.28);
}

body.theme-ocean .btn-primary:hover {
    background: var(--primary-dark);
    box-shadow: 0 6px 18px rgba(22, 104, 196, 0.36);
}

body.theme-ocean .card {
    border: 1px solid var(--border);
    background: var(--bg-card);
}

body.theme-ocean .tabs a.active,
body.theme-ocean .tabs a:hover {
    color: var(--primary);
}

body.theme-ocean .style-option.is-selected {
    box-shadow: 0 0 0 4px rgba(22, 104, 196, 0.18);
}

/* === Thème alternatif : Art Déco / Cinéma === */
/* Salle obscure : charbon neutre + or champagne, esprit Art déco.
   Titres gravés (Cinzel), texte géométrique (Jost). */
body.theme-cinema {
    --bg-page: #131210;
    --bg-card: #1c1a17;
    --bg-soft: #29251f;
    --bg-dark: #0a0908;
    --primary: #d4af37;
    --primary-dark: #b8932e;
    --accent: #e6cd8a;
    --accent-dark: #c0a44f;
    --text: #ece7da;
    --text-soft: #a99f8a;
    --border: #3a342a;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
    --shadow: 0 4px 24px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.7);
    --hero-gradient: linear-gradient(135deg, #0a0908 0%, #2a2113 55%, #d4af37 100%);
    font-family: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

body.theme-cinema h1,
body.theme-cinema h2,
body.theme-cinema h3,
body.theme-cinema .brand-name,
body.theme-cinema .hero h1,
body.theme-cinema .page-head h1,
body.theme-cinema .card h2 {
    font-family: 'Cinzel', Georgia, 'Times New Roman', serif;
    letter-spacing: 0.04em;
    font-weight: 700;
}

body.theme-cinema .brand-name,
body.theme-cinema .hero h1,
body.theme-cinema .page-head h1 {
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

body.theme-cinema .topbar {
    background: linear-gradient(180deg, #0a0908 0%, #1c1813 100%);
    border-bottom: 2px solid var(--accent);
}

body.theme-cinema .brand-mark {
    color: var(--primary);
}

body.theme-cinema .hero {
    border: 1px solid rgba(212, 175, 55, 0.4);
}

body.theme-cinema .card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text);
}

body.theme-cinema input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range]):not([type=color]),
body.theme-cinema select,
body.theme-cinema textarea {
    background-color: var(--bg-soft);
    color: var(--text);
    border-color: var(--border);
}

body.theme-cinema select:disabled,
body.theme-cinema input:disabled {
    background: #232019;
    color: var(--text-soft);
}

body.theme-cinema .btn,
body.theme-cinema .btn-secondary {
    background: var(--bg-soft);
    color: var(--primary);
    border-color: var(--bg-soft);
}

body.theme-cinema .btn:hover,
body.theme-cinema .btn-secondary:hover {
    background: #34302a;
}

body.theme-cinema .btn-ghost {
    color: var(--text);
    border-color: var(--border);
}

body.theme-cinema .btn-ghost:hover {
    background: var(--bg-soft);
    border-color: var(--bg-soft);
}

body.theme-cinema .btn-danger {
    background: var(--bg-card);
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.4);
}

body.theme-cinema .btn-primary {
    background: var(--primary);
    border-color: var(--primary-dark);
    color: #1a1812;
    box-shadow: 0 4px 14px rgba(212, 175, 55, 0.35);
}

body.theme-cinema .btn-primary:hover {
    background: var(--primary-dark);
    color: #1a1812;
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.5);
}

body.theme-cinema .tabs a.active,
body.theme-cinema .tabs a:hover {
    color: var(--primary);
}

body.theme-cinema .style-option {
    background: var(--bg-card);
}

body.theme-cinema .style-option.is-selected {
    box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.28);
}

/* Surfaces claires hardcodées ramenées sur les surfaces sombres du thème. */
body.theme-cinema .table,
body.theme-cinema .table-wrap .table tr,
body.theme-cinema .modal-content,
body.theme-cinema .kpi,
body.theme-cinema .group,
body.theme-cinema .empty,
body.theme-cinema .recap-rsv-list li,
body.theme-cinema .recap-troupe-item,
body.theme-cinema .rep-card,
body.theme-cinema .rep-close-menu-items,
body.theme-cinema .resp-name-list li,
body.theme-cinema .cal-cell,
body.theme-cinema .accordion-meta,
body.theme-cinema .role-row,
body.theme-cinema .member-picker-input,
body.theme-cinema .cast-popup,
body.theme-cinema .troupe-pick-card,
body.theme-cinema .troupe-pick-check,
body.theme-cinema .troupe-picker-empty,
body.theme-cinema .troupe-picker-group,
body.theme-cinema .troupe-card,
body.theme-cinema .date-row,
body.theme-cinema .check-line,
body.theme-cinema .share-chip,
body.theme-cinema .btn-resp,
body.theme-cinema .view-switch a.active,
body.theme-cinema .import-preview-samples .chip {
    background: var(--bg-card);
    color: var(--text);
    border-color: var(--border);
}

body.theme-cinema .recap-item:hover,
body.theme-cinema .table-wrap .table tr:hover {
    background: var(--bg-soft);
}

body.theme-cinema .accordion-section {
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary);
}
body.theme-cinema .accordion-section > summary:hover {
    background: rgba(255, 255, 255, 0.04);
}
body.theme-cinema .accordion-section .btn-secondary {
    background: #34302a;
    border-color: transparent;
}
body.theme-cinema .accordion-section .btn-secondary:hover {
    background: #423c33;
}

body.theme-cinema .table thead th {
    background: var(--bg-soft);
    color: var(--text);
}

body.theme-cinema .share-troupes,
body.theme-cinema .share-troupes--all {
    background: rgba(255, 255, 255, 0.07);
    color: var(--text-soft);
}

body.theme-cinema .share-troupe-picker {
    background: var(--bg-card);
    border-color: var(--border);
}

body.theme-cinema .grid-3 input[type=color] {
    background: var(--bg-soft);
}

body.theme-cinema .troupe-members,
body.theme-cinema .troupe-card.troupe-card-inactive {
    background: var(--bg-soft);
}

body.theme-cinema .cal-cell.other {
    background: #14120e;
    color: var(--text-soft);
}

body.theme-cinema .cal-cell.today {
    background: #2e2718;
}

body.theme-cinema .cal-event.performance {
    background: rgba(212, 175, 55, 0.16);
    color: #e6cd8a;
    border-color: rgba(212, 175, 55, 0.5);
}
body.theme-cinema .cal-event.performance.performance-past {
    background: #14120e;
    color: var(--text-soft);
    border-color: rgba(212, 175, 55, 0.3);
}

body.theme-cinema .rep-card--cancelled,
body.theme-cinema .rep-card--past {
    background: #14120e;
    color: var(--text-soft);
}

body.theme-cinema .flash-success {
    background: rgba(16, 185, 129, 0.15);
    color: #6ee7b7;
    border-color: var(--success);
}

body.theme-cinema .flash-error,
body.theme-cinema .rep-badge.cancelled,
body.theme-cinema .cal-event.cancelled,
body.theme-cinema .rep-close-option.ko:hover,
body.theme-cinema .resp-count.no,
body.theme-cinema .resp-block-no .resp-name-list li,
body.theme-cinema .btn-resp.active.no {
    background: rgba(239, 68, 68, 0.18);
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.4);
}

body.theme-cinema .resp-count.maybe,
body.theme-cinema .resp-block-maybe .resp-name-list li,
body.theme-cinema .btn-resp.active.maybe {
    background: rgba(245, 158, 11, 0.18);
    color: #fcd34d;
    border-color: rgba(245, 158, 11, 0.4);
}

body.theme-cinema .share-item.is-orga {
    background: rgba(230, 205, 138, 0.12);
}

body.theme-cinema .share-item.is-comedien {
    background: rgba(212, 175, 55, 0.12);
}

body.theme-cinema .affiche-current .checkbox.danger:hover,
body.theme-cinema .hero-image-preview .checkbox.danger:hover {
    background: rgba(239, 68, 68, 0.18);
}

/* Touches de rouge velours (rideau / tapis rouge) sur les pastilles
   décoratives — l'or reste la couleur dominante. Les badges sémantiques
   (statuts « annulé », erreurs…) gardent leurs couleurs propres. */
body.theme-cinema .badge {
    background: #a31f34;
    color: #f7e9e6;
}
body.theme-cinema .reservation-past .badge {
    background: var(--bg-soft);
    color: var(--text-soft);
}

body.theme-cinema .userchip {
    background: rgba(163, 31, 52, 0.85);
    color: #f7e9e6;
}
body.theme-cinema a.userchip:hover {
    background: #a31f34;
    color: #ffffff;
}
body.theme-cinema .userchip em {
    opacity: 0.75;
}

body.theme-cinema .share-chip {
    background: rgba(163, 31, 52, 0.16);
    border-color: rgba(163, 31, 52, 0.45);
    color: #e8b9bd;
}

/* Pastilles de rôle : sur l'or/champagne clairs, on passe le texte en sombre
   pour la lisibilité, et l'organisateur en rouge velours (texte clair). */
body.theme-cinema .role-tag {
    color: #1a1812;
}
body.theme-cinema .role-tag.organisateur {
    background: #a31f34;
    color: #f7e9e6;
}
body.theme-cinema .role-tag.comedien {
    background: var(--primary);
    color: #1a1812;
}
body.theme-cinema .role-tag.administrateur {
    background: var(--accent);
    color: #1a1812;
}

/* Cinzel rend les titres visuellement plus imposants : on réduit un peu les
   tailles dans ce thème pour un rendu plus équilibré. */
body.theme-cinema .page-head h1,
body.theme-cinema .profile-head h1 {
    font-size: 23px;
}
body.theme-cinema .hero h1 {
    font-size: clamp(24px, 3.4vw, 34px);
}
body.theme-cinema .card h2 {
    font-size: 17px;
}
body.theme-cinema .rep-detail-head h2 {
    font-size: 16px;
}