/* Style de Tutti — intégré, fonctionne 100% hors ligne.
   Reproduit les classes utilitaires utilisées dans les gabarits. */

/* --- Réinitialisation de base --- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.5;
}
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
img, svg { display: block; max-width: 100%; }

/* --- Affichage / disposition --- */
.min-h-screen { min-height: 100vh; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-1 { flex: 1 1 0%; }
.flex-wrap { flex-wrap: wrap; }
.grid { display: grid; }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }
.hidden { display: none; }
.w-full { width: 100%; }
.max-w-3xl { max-width: 48rem; }
.max-w-sm { max-width: 24rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.overflow-hidden { overflow: hidden; }
.text-center { text-align: center; }
.italic { font-style: italic; }
.list-disc { list-style-type: disc; }
.list-inside { list-style-position: inside; }
.whitespace-nowrap { white-space: nowrap; }
.whitespace-pre-line { white-space: pre-line; }

/* --- Espacements --- */
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.p-4 { padding: 1rem; }
.p-5 { padding: 1.25rem; }
.p-6 { padding: 1.5rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-10 { margin-top: 2.5rem; }
.space-y-1 > * + * { margin-top: 0.25rem; }
.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-4 > * + * { margin-top: 1rem; }

/* --- Typographie --- */
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

/* --- Couleurs de texte --- */
.text-white { color: #ffffff; }
.text-gray-400 { color: #9ca3af; }
.text-gray-500 { color: #6b7280; }
.text-gray-600 { color: #4b5563; }
.text-gray-700 { color: #374151; }
.text-gray-900 { color: #111827; }
.text-indigo-600 { color: #4f46e5; }
.text-green-600 { color: #16a34a; }
.text-green-700 { color: #15803d; }
.text-green-800 { color: #166534; }
.text-amber-700 { color: #b45309; }
.text-amber-800 { color: #92400e; }
.text-red-600 { color: #dc2626; }
.text-red-700 { color: #b91c1c; }
.text-red-800 { color: #991b1b; }

/* --- Couleurs de fond --- */
.bg-white { background-color: #ffffff; }
.bg-gray-50 { background-color: #f9fafb; }
.bg-gray-100 { background-color: #f3f4f6; }
.bg-indigo-600 { background-color: #4f46e5; }
.bg-green-100 { background-color: #dcfce7; }
.bg-green-600 { background-color: #16a34a; }
.bg-amber-100 { background-color: #fef3c7; }
.bg-amber-500 { background-color: #f59e0b; }
.bg-red-50 { background-color: #fef2f2; }
.bg-red-100 { background-color: #fee2e2; }
.bg-red-600 { background-color: #dc2626; }

/* --- Bordures et arrondis --- */
.rounded { border-radius: 0.25rem; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-full { border-radius: 9999px; }
.border { border-width: 1px; border-style: solid; border-color: #e5e7eb; }
.border-b { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #e5e7eb; }
.border-gray-300 { border-color: #d1d5db; }
.border-green-300 { border-color: #86efac; }
.border-green-600 { border-color: #16a34a; }
.border-amber-300 { border-color: #fcd34d; }
.border-amber-500 { border-color: #f59e0b; }
.border-red-300 { border-color: #fca5a5; }
.border-red-600 { border-color: #dc2626; }
.divide-y > * + * { border-top: 1px solid #e5e7eb; }

/* --- États (survol / focus) --- */
.hover\:underline:hover { text-decoration: underline; }
.hover\:bg-indigo-700:hover { background-color: #4338ca; }
.hover\:bg-indigo-50:hover { background-color: #eef2ff; }
.hover\:bg-green-50:hover { background-color: #f0fdf4; }
.hover\:bg-amber-50:hover { background-color: #fffbeb; }
.hover\:bg-red-50:hover { background-color: #fef2f2; }
.hover\:text-gray-900:hover { color: #111827; }
.hover\:border-indigo-400:hover { border-color: #818cf8; }
.hover\:border-indigo-500:hover { border-color: #6366f1; }
.focus\:outline-none:focus { outline: none; }
.focus\:ring-2:focus { box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.45); }
.focus\:ring-indigo-500:focus { box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.45); }

/* --- Adaptatif (écrans larges) --- */
@media (min-width: 640px) {
    .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .sm\:col-span-2 { grid-column: span 2 / span 2; }
    .sm\:col-span-4 { grid-column: span 4 / span 4; }
    .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- Compléments --- */
.justify-center { justify-content: center; }
.gap-1 { gap: 0.25rem; }
.gap-4 { gap: 1rem; }

/* --- Trombinoscope --- */
.trombi-photo {
    width: 84px;
    height: 84px;
    border-radius: 9999px;
    object-fit: cover;
}
.trombi-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef2ff;
    color: #4f46e5;
    font-weight: 600;
    font-size: 1.25rem;
}

/* --- Logo (bulle ronde) --- */
.orch-logo { width: 40px; height: 40px; border-radius: 9999px; object-fit: cover; flex: none; }
.orch-logo-lg { width: 72px; height: 72px; border-radius: 9999px; object-fit: cover; flex: none; }

/* --- Calendrier --- */
.grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-cell { min-height: 80px; border: 1px solid #e5e7eb; padding: 3px; font-size: 0.7rem; overflow: hidden; }
.cal-out { background: #f9fafb; }
.cal-out .cal-daynum { color: #c4c8d0; }
.cal-daynum { display: inline-block; font-weight: 600; padding: 0 5px; }
.cal-today .cal-daynum { background: #4f46e5; color: #ffffff; border-radius: 9999px; }
.cal-ev { display: block; border-radius: 4px; padding: 1px 4px; margin-top: 2px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* ===================== Refonte visuelle ===================== */
/* Palette modifiable d'un coup en changeant ces variables. */
:root {
    --brand: #4f46e5;
    --brand-strong: #4338ca;
    --brand-soft: #eef2ff;
    --brand-ring: rgba(79, 70, 229, 0.40);
    --grad-from: #4f46e5;
    --grad-to: #7c3aed;
    --bg: #f5f6fb;
    --ink: #1f2433;
}

body {
    background: var(--bg);
    color: var(--ink);
    font-family: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, "Inter", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Zone de contenu plus large */
.site-container { max-width: 64rem; margin-left: auto; margin-right: auto; }

/* Bandeau supérieur en dégradé */
.site-header {
    background: linear-gradient(120deg, var(--grad-from), var(--grad-to));
    box-shadow: 0 2px 12px rgba(31, 36, 51, 0.16);
}
.brand-wrap { display: flex; flex-direction: column; line-height: 1.1; text-decoration: none; }
.brand { font-size: 1.9rem; font-weight: 800; color: #ffffff; letter-spacing: 0.015em; }
.brand-sub { font-size: 0.85rem; color: rgba(255, 255, 255, 0.82); margin-top: 3px; }
.nav-link { color: rgba(255, 255, 255, 0.92); font-weight: 500; }
.nav-link:hover { color: #ffffff; text-decoration: underline; }

/* Les classes d'accent suivent la couleur de marque */
.bg-indigo-600 {
    background-color: var(--brand);
    box-shadow: 0 1px 2px rgba(31, 36, 51, 0.18);
    transition: background-color .15s ease, box-shadow .15s ease, transform .05s ease;
}
.bg-indigo-600:active { transform: translateY(1px); }
.hover\:bg-indigo-700:hover { background-color: var(--brand-strong); }
.text-indigo-600 { color: var(--brand); }
.hover\:bg-indigo-50:hover { background-color: var(--brand-soft); }
.hover\:border-indigo-400:hover { border-color: var(--brand); }
.hover\:border-indigo-500:hover { border-color: var(--brand); }
.focus\:ring-2:focus { box-shadow: 0 0 0 3px var(--brand-ring); }
.focus\:ring-indigo-500:focus { box-shadow: 0 0 0 3px var(--brand-ring); }
.trombi-placeholder { background: var(--brand-soft); color: var(--brand); }
.cal-today .cal-daynum { background: var(--brand); }
a { transition: color .15s ease; }

/* Tout le texte un cran plus grand */
html { font-size: 17px; }
.text-xs { font-size: 0.78rem; line-height: 1.05rem; }
.text-sm { font-size: 0.95rem; line-height: 1.4rem; }
.text-lg { font-size: 1.25rem; line-height: 1.8rem; }
.text-xl { font-size: 1.5rem; line-height: 2rem; }
.text-2xl { font-size: 2rem; line-height: 2.4rem; letter-spacing: -0.01em; }
.font-bold { font-weight: 800; }

/* Cartes : élévation douce et coins plus ronds */
.border { border-color: #e6e8f0; }
.rounded-lg { border-radius: 0.7rem; }
.bg-white.border { box-shadow: 0 1px 2px rgba(31, 36, 51, 0.04), 0 4px 14px rgba(31, 36, 51, 0.05); }

/* Menu d'onglets (Dates, Calendrier, …) surligné comme le bandeau */
.orchnav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1.5rem;
    padding: 0.4rem;
    background: #ffffff;
    border: 1px solid #e6e8f0;
    border-radius: 0.8rem;
    box-shadow: 0 1px 2px rgba(31, 36, 51, 0.04), 0 4px 14px rgba(31, 36, 51, 0.05);
}
.tab {
    padding: 0.5rem 0.95rem;
    border-radius: 0.6rem;
    font-size: 0.98rem;
    font-weight: 600;
    color: #5b6478;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}
.tab:hover { background: var(--brand-soft); color: var(--brand); }
.tab-active,
.tab-active:hover {
    background: linear-gradient(120deg, var(--grad-from), var(--grad-to));
    color: #ffffff;
    box-shadow: 0 1px 4px rgba(79, 70, 229, 0.35);
}

.break-all { word-break: break-all; }

/* Menu déroulant de statut (Proposée / Confirmée / Annulée) sur les dates.
   Le BOUTON prend la couleur du statut via ses classes de couleur, mais la
   LISTE déroulante reste blanche et neutre (voir .status-select option plus bas). */
.status-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid rgba(31, 36, 51, 0.22);
    border-radius: 0.75rem;
    background-clip: padding-box;
    padding: 7px 32px 7px 14px;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(31, 36, 51, 0.06);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='3' 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 11px center;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.status-select:hover { border-color: var(--brand); }
.status-select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }
/* La liste déroulante reste blanche/neutre même si le bouton est coloré. */
.status-select option { background-color: #ffffff; color: #1f2433; font-weight: 500; }

/* Barre d'outils des musiciens : 2 cm entre les éléments sur ordinateur. */
.members-toolbar { column-gap: 2cm; row-gap: 0.6rem; }

/* ===================== Affichage mobile (≤ 640 px) ===================== */
@media (max-width: 640px) {
    /* Bandeau supérieur : on autorise le passage à la ligne et on réduit le titre. */
    .site-header .site-container {
        flex-wrap: wrap;
        gap: 0.4rem 0.8rem;
        padding-top: 0.9rem;
        padding-bottom: 0.9rem;
    }
    .brand { font-size: 1.5rem; }
    .brand-sub { font-size: 0.78rem; }
    .site-header nav { gap: 0.9rem; }

    /* Titres plus compacts pour éviter les débordements. */
    .text-2xl { font-size: 1.55rem; line-height: 1.95rem; }
    .text-xl { font-size: 1.25rem; line-height: 1.7rem; }

    /* Zone de contenu : un peu moins d'air vertical. */
    main.site-container { padding-top: 1rem; padding-bottom: 1rem; }

    /* Onglets de l'orchestre. */
    .orchnav { gap: 0.3rem; padding: 0.3rem; }
    .tab { padding: 0.45rem 0.7rem; font-size: 0.9rem; }

    /* Compteurs de présence : 2 par ligne, chiffres légèrement réduits. */
    .kpi { flex: 1 1 40%; padding: 0.8rem 0.4rem; }
    .kpi-num { font-size: 1.95rem; }
    .kpi-mini { flex: 1 1 40%; }
    .kpi-mini .kpi-num { font-size: 1.4rem; }

    /* Calendrier : cases plus basses et texte plus petit pour tenir sur l'écran. */
    .cal-cell { min-height: 52px; font-size: 0.6rem; padding: 2px; }
    .cal-daynum { padding: 0 3px; }
    .cal-ev { padding: 1px 3px; }

    /* Barre d'outils des musiciens : espacement raisonnable sur petit écran. */
    .members-toolbar { column-gap: 1rem; }

    /* Infobulle d'aide : ne dépasse jamais de l'écran. */
    .info-bubble { width: min(17rem, 82vw); }
}

/* Badge de rôle (Président(e), etc.) */
.role-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 9999px;
    background: var(--brand-soft);
    color: var(--brand);
    margin-left: 3px;
}

/* Compteurs de présence (KPI) */
.kpi-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.kpi { flex: 1 1 130px; text-align: center; border-radius: 0.8rem; padding: 1rem 0.6rem; }
.kpi-num { display: block; font-size: 2.3rem; font-weight: 800; line-height: 1.05; }
.kpi-label { display: block; font-size: 0.95rem; font-weight: 600; margin-top: 0.15rem; }
.kpi-mini { flex: 1 1 92px; padding: 0.5rem 0.4rem; border-radius: 0.6rem; }
.kpi-mini .kpi-num { font-size: 1.55rem; }
.kpi-mini .kpi-label { font-size: 0.78rem; }
.kpi-yes { background: #dcfce7; color: #166534; }
.kpi-maybe { background: #fef3c7; color: #92400e; }
.kpi-no { background: #fee2e2; color: #991b1b; }
.kpi-none { background: #f3f4f6; color: #6b7280; }

/* Menu déroulant de filtre */
.filter-dd { position: relative; display: inline-block; }
.filter-btn {
    cursor: pointer;
    list-style: none;
    user-select: none;
    border: 1px solid #e6e8f0;
    background: #ffffff;
    border-radius: 0.55rem;
    padding: 0.5rem 0.9rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink);
}
.filter-btn:hover { border-color: var(--brand); color: var(--brand); }
.filter-btn::-webkit-details-marker { display: none; }
.filter-panel {
    position: absolute;
    right: 0;
    margin-top: 0.4rem;
    background: #ffffff;
    border: 1px solid #e6e8f0;
    border-radius: 0.6rem;
    box-shadow: 0 6px 22px rgba(31, 36, 51, 0.14);
    padding: 0.5rem 0.85rem;
    z-index: 20;
    min-width: 12rem;
}
.filter-panel label { display: flex; align-items: center; gap: 0.55rem; padding: 0.35rem 0; font-size: 0.92rem; white-space: nowrap; font-weight: 500; }

/* Menu « Pièces jointes » repliable */
.attach-summary { cursor: pointer; list-style: none; font-weight: 600; color: var(--brand); font-size: 0.9rem; }
.attach-summary::-webkit-details-marker { display: none; }
.attach-summary:hover { text-decoration: underline; }

/* Infobulle d'aide */
.info-tip { position: relative; display: inline-flex; cursor: help; color: var(--brand); font-weight: 700; }
.info-bubble {
    position: absolute;
    left: 0;
    top: 145%;
    z-index: 30;
    width: 17rem;
    background: #1f2433;
    color: #ffffff;
    font-weight: 400;
    font-size: 0.8rem;
    line-height: 1.45;
    padding: 0.6rem 0.75rem;
    border-radius: 0.5rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s ease;
}
.info-bubble strong { color: #ffffff; }
.info-tip:hover .info-bubble, .info-tip:focus .info-bubble { opacity: 1; visibility: visible; }