/* ===========================================================
   ASA Escalade — Permanences
   Palette : chalk / stone background, ASA = terracotta (rouge du
   PDF d'origine), SCB = bleu encre (bleu du PDF d'origine).
   =========================================================== */

:root {
    --stone-50:  #F7F4EC;
    --stone-100: #EFEAE0;
    --stone-200: #DEDAD0;
    --ink-900:   #23262B;
    --ink-600:   #55585F;

    --white:     #FFFFFF;
    --navy:      var(--scb);
    --gray-mid:  var(--stone-200);
    --gray-light: var(--stone-100);
    --slate:     var(--ink-600);

    --asa:       #B8432E;   /* Avrillé — proche du rouge des PDF */
    --asa-tint:  #F4DED9;
    --scb:       #2C5282;   /* Beaucouzé — proche du bleu des PDF */
    --scb-tint:  #DCE6F2;

    --danger:    #B8432E;
    --radius:    10px;

    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    color-scheme: light;
}

* { box-sizing: border-box; }

html, body {
    height: 100%;
    margin: 0;
}

body {
    font-family: var(--font);
    background: var(--stone-50);
    color: var(--ink-900);
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ---------- Topbar ---------- */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    background: var(--ink-900);
    color: var(--stone-50);
    flex-wrap: wrap;
}

.topbar-title {
    font-weight: 600;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    gap: 8px;
}
.app-version { color: rgba(255, 255, 255, 0.62); font-size: 0.68rem; font-weight: 400; white-space: nowrap; }

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}
.dot-asa { background: var(--asa); }
.dot-scb { background: var(--scb); margin-right: 4px; }

.topbar-nav {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 0.9rem;
    flex-wrap: wrap;
}
.topbar-nav a {
    color: var(--stone-50);
    text-decoration: none;
    opacity: 0.85;
}
.topbar-nav .nav-link {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--stone-50);
    font: inherit;
    opacity: 0.85;
    cursor: pointer;
}
.topbar-nav .nav-link:hover { opacity: 1; text-decoration: underline; }
.topbar-nav a:hover { opacity: 1; text-decoration: underline; }
.topbar-nav a.active {
    color: #fff;
    opacity: 1;
    font-weight: 700;
    padding-bottom: 4px;
    border-bottom: 2px solid #fff;
}
.topbar-user { opacity: 0.6; }
.topbar-logout {
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 6px;
    padding: 4px 10px;
}
.admin-resignation-alert {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 14px;
    padding: 8px 14px;
    background: #F8DFDC;
    color: #84271F;
    font-size: 0.85rem;
}
.admin-resignation-alert a { color: inherit; font-weight: 700; }

/* ---------- Calendar layout (full page, responsive) ---------- */
.calendar-wrap {
    height: calc(100vh - 60px);
    height: calc(100dvh - 60px);
    padding: 10px;
}
.calendar-page {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}
.calendar-page .topbar { position: relative; z-index: 30; }
.calendar-page .calendar-wrap {
    display: grid;
    flex: 1 1 auto;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 8px;
    min-height: 0;
    height: auto;
}
.public-calendar-embed .calendar-wrap { padding: 8px; }
.public-calendar-embed .calendar-scroll {
    overflow-x: hidden;
    overflow-y: hidden;
    min-height: 0;
    height: auto;
}
.public-calendar-embed .public-calendar-scroll #calendar {
    min-width: 0;
    width: 100%;
    padding: 4px;
}
.calendar-scroll {
    min-width: 0;
    min-height: 0;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}
.calendar-scroll #calendar { min-width: 680px; }
.calendar-scroll.is-list-view { overflow-x: hidden; }
.calendar-scroll.is-list-view #calendar { width: 100%; min-width: 0; }
.calendar-scroll.is-list-view .fc-scroller { overflow-x: hidden !important; }
.fc .fc-list-table { width: 100%; table-layout: fixed; border-collapse: collapse; border-spacing: 0; }
.fc .fc-list-event > td { padding: 0 !important; }
.fc .fc-list-event {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    width: 100%;
}
.fc .fc-list-event-day { grid-column: 1; }
.fc .fc-list-event-title { grid-column: 2; width: 100%; }
.fc .fc-list-day { display: none; }
.fc .fc-list-event-day {
    position: relative;
    z-index: 1;
    width: 54px;
    max-width: 54px;
    padding: 4px 0 4px 3px !important;
    vertical-align: top;
    font-weight: 700;
    background: #fff;
    overflow-wrap: anywhere;
    overflow: hidden;
}
.fc .fc-list-event.fc-list-event-zebra > td { background-color: #F7F8FA; }
.fc .fc-list-event.fc-list-event-weekend > td { background-color: #EEF0F2; }
.fc .fc-list-event.fc-list-event-zebra .creneau-card,
.fc .fc-list-event.fc-list-event-zebra .agenda-event-label,
.fc .fc-list-event.fc-list-event-zebra .neutral-event-label,
.fc .fc-list-event.fc-list-event-zebra .jour-special-label {
    background-image: linear-gradient(rgba(35, 45, 55, 0.035), rgba(35, 45, 55, 0.035)) !important;
}
.fc .fc-list-event.fc-list-event-weekend .creneau-card,
.fc .fc-list-event.fc-list-event-weekend .agenda-event-label,
.fc .fc-list-event.fc-list-event-weekend .neutral-event-label,
.fc .fc-list-event.fc-list-event-weekend .jour-special-label {
    background: #EEF0F2 !important;
    color: var(--ink-900) !important;
}
.fc .fc-list-event-day-content { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; }
.fc .fc-list-event-day-label { display: grid; align-self: stretch; min-width: 0; line-height: 1.15; text-align: left; overflow-wrap: anywhere; }
.fc .fc-list-event-day .personal-permanence-icon {
    position: static;
    align-self: flex-start;
    flex: 0 0 17px;
    margin: 1px 0 0 2px;
    transform: none;
}
.fc .fc-list-event-day.personal-day-asa { background: var(--asa-tint); }
.fc .fc-list-event-day.personal-day-scb { background: var(--scb-tint); }
.index-calendar-scroll.is-compact {
    height: auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: hidden;
}
.index-calendar-scroll.is-compact #calendar { min-width: 0; width: 100%; padding: 4px; }
.index-calendar-scroll.is-compact .agenda-event-label {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.index-calendar-scroll.is-compact .agenda-event-description { overflow-wrap: anywhere; word-break: break-word; }
.index-calendar-scroll.is-compact .agenda-event-description { display: none !important; }
.calendar-toolbar {
    display: grid;
    flex: 0 0 auto;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 42px;
}
.index-calendar-toolbar { display: flex; flex-direction: column; gap: 6px; }
.index-calendar-toolbar-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 42px;
}
.index-calendar-toolbar-top .calendar-toolbar-left { grid-column: 1; grid-row: 1; justify-self: start; }
.index-calendar-toolbar-top #calendarCurrentTitle { grid-column: 2; grid-row: 1; }
.index-calendar-toolbar-top #openMyDuties { grid-column: 3; grid-row: 1; justify-self: end; }
.index-calendar-toolbar-views { display: flex; justify-content: center; }
.index-calendar-toolbar-views .calendar-view-toggle { display: inline-flex; }
@media (min-width: 769px) {
    .index-calendar-toolbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        align-items: center;
        column-gap: 16px;
        row-gap: 6px;
    }
    .index-calendar-toolbar-top { display: contents; }
    .index-calendar-toolbar-views { grid-column: 1 / -1; grid-row: 2; }
}
.calendar-toolbar-left, .calendar-toolbar-right { display: flex; align-items: center; gap: 7px; }
.calendar-toolbar-right { justify-content: flex-end; }
.calendar-toolbar h1 { margin: 0; text-align: center; font-size: 1.15rem; font-weight: 700; text-transform: capitalize; }
.calendar-view-toggle { display: inline-flex; overflow: hidden; border: 1px solid var(--stone-200); border-radius: 6px; }
.calendar-view-toggle button { min-height: 34px; padding: 6px 9px; border: 0; background: #fff; color: var(--ink-900); font: inherit; font-size: 0.82rem; white-space: nowrap; cursor: pointer; }
.calendar-view-toggle button + button { border-left: 1px solid var(--stone-200); }
.calendar-view-toggle button[aria-pressed="true"] { background: var(--ink-900); color: #fff; }
@media (min-width: 769px) {
    .calendar-toolbar:not(.has-alternate-view) .calendar-view-toggle { display: none; }
    .index-calendar-toolbar:not(.has-alternate-view) .index-calendar-toolbar-views { display: none; }
}
.fc .fc-list-event-graphic,
.fc .fc-list-event-time { display: none; }
.fc .fc-list-event-title { min-width: 0; padding: 0 !important; overflow: hidden; }
.fc .fc-list-event-title > a { display: block; width: 100%; max-width: 100%; min-width: 0; margin: 6px 0; box-sizing: border-box; overflow: hidden; color: inherit; white-space: normal; overflow-wrap: anywhere; }
.fc .fc-list-event-title > a > .creneau-card,
.fc .fc-list-event-title > a > .agenda-event-label,
.fc .fc-list-event-title > a > .neutral-event-label,
.fc .fc-list-event-title > a > .jour-special-label {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}
.calendar-toolbar-left button, .calendar-toolbar-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 6px 10px;
    border: 1px solid var(--stone-200);
    border-radius: 6px;
    background: #fff;
    color: var(--ink-900);
    font: inherit;
    font-size: 0.82rem;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
.calendar-toolbar-left button:hover, .calendar-toolbar-action:hover { background: var(--stone-100); }
.calendar-toolbar-left button[aria-label="Mois précédent"],
.calendar-toolbar-left button[aria-label="Mois suivant"] { min-width: 34px; font-size: 1.1rem; }
.calendar-toolbar-action.open-club-webcal { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }
.calendar-toolbar-action.open-club-webcal:hover { background: var(--scb); border-color: var(--scb); }
.webcal-mobile-icon { display: none; }
.calendar-export-menu button { padding: 9px 10px; border: 0; border-radius: 5px; background: #fff; color: var(--ink-900); font: inherit; font-size: 0.82rem; text-align: left; cursor: pointer; }
.calendar-export-menu button:hover { background: var(--stone-100); }
.calendar-export-menu p { margin: 3px 8px; color: var(--ink-600); font-size: 0.75rem; line-height: 1.4; }
@media (max-width: 768px) {
    .webcal-desktop-label { display: none; }
    .webcal-mobile-icon { display: block; flex: 0 0 20px; width: 20px; height: 20px; }
    .calendar-toolbar-action.open-club-webcal { width: 40px; min-width: 40px; max-width: 40px; flex: 0 0 40px; padding: 0; }
    .calendar-export .calendar-toolbar-action span { display: none; }
}
.calendar-agenda-filter { position: relative; z-index: 20; }
.calendar-agenda-filter-button { gap: 6px; border-radius: 8px; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
.calendar-agenda-filter-button[aria-expanded="true"] { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }
.agenda-filter-eye { display: block; flex: 0 0 20px; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.calendar-agenda-filter-menu {
    position: absolute;
    z-index: 200;
    top: calc(100% + 6px);
    right: 0;
    display: none;
    gap: 2px;
    min-width: 220px;
    padding: 7px;
    border: 1px solid var(--stone-200);
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(20, 28, 38, 0.18);
}
.calendar-agenda-filter-menu.is-open { display: grid; }
.calendar-agenda-filter-menu label { display: flex; align-items: center; gap: 9px; padding: 8px; border-radius: 6px; color: var(--ink-900); font-size: 0.8rem; white-space: nowrap; cursor: pointer; }
.calendar-agenda-filter-menu label:hover { background: var(--stone-100); }
.calendar-agenda-filter-menu input { flex: 0 0 16px; width: 16px; height: 16px; margin: 0; accent-color: var(--scb); }
.calendar-agenda-filter-actions { display: flex; gap: 6px; margin-top: 4px; padding: 8px 2px 2px; border-top: 1px solid var(--stone-200); }
.calendar-agenda-filter-actions .btn { flex: 1 1 100%; min-width: 0; padding: 7px 10px; font-size: 0.78rem; white-space: nowrap; }
.calendar-agenda-filter-button:focus-visible { outline: 2px solid var(--scb); outline-offset: 2px; }
@media (max-width: 768px) {
    .calendar-agenda-filter-button .agenda-filter-text { display: none !important; }
    .calendar-toolbar-action.calendar-agenda-filter-button { width: 40px !important; min-width: 40px !important; max-width: 40px; flex: 0 0 40px; padding: 0 !important; }
    .calendar-agenda-filter-button .agenda-filter-eye { flex: 0 0 20px; width: 20px; height: 20px; }
    .calendar-agenda-filter-menu { min-width: 205px; }
}

#calendar {
    min-height: 0;
    height: 100%;
    background: #fff;
    border-radius: var(--radius);
    border: 1px solid var(--stone-200);
    padding: 10px;
}

.fc {
    font-family: var(--font);
}

.fc .fc-toolbar-title {
    font-size: 1.15rem;
    font-weight: 700;
    text-transform: capitalize;
}

.fc .fc-button {
    background: var(--stone-100);
    border: 1px solid var(--stone-200);
    color: var(--ink-900);
    box-shadow: none;
    text-transform: capitalize;
}
.fc .fc-button:hover { background: var(--stone-200); }
.fc .fc-button-primary:not(:disabled).fc-button-active {
    background: var(--ink-900);
    border-color: var(--ink-900);
    color: #fff;
}

.fc .fc-col-header-cell-cushion {
    font-weight: 600;
    color: var(--ink-600);
    text-transform: capitalize;
    padding: 8px 0;
}

.fc .fc-daygrid-day-number {
    font-weight: 600;
    color: var(--ink-900);
    padding: 6px 8px;
}

.fc .fc-day-today {
    background: var(--stone-100) !important;
}
.fc .fc-daygrid-day-frame { position: relative; }
.fc .iso-week-number {
    position: absolute;
    top: 5px;
    left: 6px;
    color: var(--ink-600);
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1.2;
    pointer-events: none;
}

.fc-daygrid-day-frame { cursor: pointer; }

/* Strip FullCalendar's default event chrome — we render our own card */
.fc-daygrid-event {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    background: transparent;
    border: none;
    margin: 2px 0 !important;
    padding: 0 4px;
    white-space: normal;
}
.fc .fc-daygrid-dot-event {
    display: block;
    align-items: stretch;
}
.fc .fc-daygrid-event .fc-event-main,
.fc .fc-daygrid-event .fc-event-main-frame {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.fc-daygrid-event:hover { background: transparent; }
.fc-event { box-shadow: none; }

/* ---------- Custom "creneau" card (mimics the original PDF look) ---------- */
.creneau-card {
    position: relative;
    border-radius: 8px;
    margin: 3px 0;
    padding: 6px 8px;
    font-size: 0.8rem;
    line-height: 1.25;
    color: var(--ink-900);
    border-left: 4px solid transparent;
    cursor: pointer;
}
.creneau-card.is-personal-permanence {
    background: #EAF5FF !important;
    outline: 2px solid #2C5282;
    outline-offset: -2px;
    box-shadow: 0 1px 5px rgba(44, 82, 130, 0.2);
}
.fc .fc-daygrid-day-top { position: relative; }
.fc .personal-permanence-icon {
    position: absolute;
    top: 50%;
    left: 6px;
    width: 17px;
    height: 17px;
    transform: translateY(-50%);
    fill: none;
    stroke: #2C5282;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.fc .personal-day-has-permanence .iso-week-number { left: 27px; }
.fc .personal-day-asa .fc-daygrid-day-frame { background: var(--asa-tint) !important; }
.fc .personal-day-scb .fc-daygrid-day-frame { background: var(--scb-tint) !important; }
.creneau-ASA { background: var(--asa-tint); border-left-color: var(--asa); }
.creneau-SCB { background: var(--scb-tint); border-left-color: var(--scb); }
.creneau-annule { opacity: 0.45; text-decoration: line-through; }
.creneau-sans-benevole {
    background: #F1F2F3;
    color: #666B72;
}
.jour-special-label,
.agenda-event-label {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border-radius: 3px;
    padding: 2px 4px;
    font-size: 0.68rem;
    line-height: 1.2;
    white-space: normal;
}
.agenda-event-label { background: #E6ECF2; color: #303841; }
.agenda-event-time { font-size: 0.8rem; margin-bottom: 2px; }
.agenda-event-title { display: block; font-weight: 500; }
.agenda-event-private { padding: 1px 3px; line-height: 1.1; }
.agenda-event-private .agenda-event-time,
.agenda-event-private .agenda-event-title { display: inline; font-size: 0.62rem; font-weight: 400; }
.agenda-event-private .agenda-event-time { margin: 0; }
.agenda-event-private .agenda-event-description { font-size: 0.55rem; }
.agenda-event-label.event-overlap,
.neutral-event-label.event-overlap,
.creneau-card.event-overlap { border-right: 3px solid #E58A28; }
.agenda-event-description {
    display: block;
    margin-top: 2px;
    font-size: 0.62rem;
    font-weight: 400;
    font-style: italic;
    line-height: 1.25;
    white-space: normal;
}
.fc-list-view .fc-list-event-title > a { overflow: visible; }
.fc-list-view .agenda-event-description { white-space: pre-wrap; overflow-wrap: anywhere; }
.ics-event-note { border-top: 1px solid rgba(255, 255, 255, 0.35); padding-top: 2px; }
.neutral-event-label {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border-left: 3px solid #737A80;
    border-radius: 3px;
    padding: 3px 5px;
    background: #E5E7E8;
    color: #303841;
    font-size: 0.8rem;
    line-height: 1.2;
    white-space: normal;
}
.neutral-event-label strong { display: block; font-weight: 700; }
.neutral-event-time { margin-bottom: 2px; }

/* Visual easter eggs for event titles and shift cards. */
[data-theme="octobre-rose"] { background-color: #FCE4EC !important; border-color: #D98AA5 !important; color: #7A3D55 !important; }
[data-theme="halloween"] { background-color: #FFF0E1 !important; border-color: #E39A52 !important; color: #70431D !important; }
[data-theme="pizza"] { background-color: #FFF1D6 !important; border-color: #D8A14A !important; color: #68451C !important; }
[data-theme="noel"] { background-color: #E4F3E8 !important; border-color: #73A982 !important; color: #285437 !important; }
[data-theme="canicule"] { background-color: #FFF4CC !important; border-color: #E1B84C !important; color: #6B5311 !important; }
[data-theme="or"] { background-color: #FFF6D6 !important; border-color: #D4AA3A !important; color: #6A5110 !important; }
[data-theme="chantier"] { background-color: #E8EEF2 !important; border-color: #7F9AAA !important; color: #304A56 !important; }

.agenda-event-label[data-theme],
.neutral-event-label[data-theme] { border-left: 3px solid; }
.creneau-card[data-theme] { padding-right: 30px; }
.agenda-event-title::after,
.neutral-event-label > strong::after,
.creneau-card[data-theme]::after,
.jour-special-label[data-theme]::after {
    display: inline-block;
    margin-left: 5px;
    font-size: 1em;
    font-style: normal;
    line-height: 1;
}
.creneau-card[data-theme]::after {
    position: absolute;
    top: 6px;
    right: 7px;
    margin-left: 0;
}
[data-theme="octobre-rose"] .agenda-event-title::after,
[data-theme="octobre-rose"] > strong::after,
.creneau-card[data-theme="octobre-rose"]::after,
.jour-special-label[data-theme="octobre-rose"]::after { content: "🎀"; }
[data-theme="halloween"] .agenda-event-title::after,
[data-theme="halloween"] > strong::after,
.creneau-card[data-theme="halloween"]::after,
.jour-special-label[data-theme="halloween"]::after { content: "🎃"; }
[data-theme="pizza"] .agenda-event-title::after,
[data-theme="pizza"] > strong::after,
.creneau-card[data-theme="pizza"]::after,
.jour-special-label[data-theme="pizza"]::after { content: "🍕"; }
[data-theme="noel"] .agenda-event-title::after,
[data-theme="noel"] > strong::after,
.creneau-card[data-theme="noel"]::after,
.jour-special-label[data-theme="noel"]::after { content: "🎄"; }
[data-theme="canicule"] .agenda-event-title::after,
[data-theme="canicule"] > strong::after,
.creneau-card[data-theme="canicule"]::after,
.jour-special-label[data-theme="canicule"]::after { content: "🌡️"; }
[data-theme="or"] .agenda-event-title::after,
[data-theme="or"] > strong::after,
.creneau-card[data-theme="or"]::after,
.jour-special-label[data-theme="or"]::after { content: "🎗️"; }
[data-theme="chantier"] .agenda-event-title::after,
[data-theme="chantier"] > strong::after,
.creneau-card[data-theme="chantier"]::after,
.jour-special-label[data-theme="chantier"]::after { content: "🛠️"; }

.creneau-time {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.agenda-event-time { font-weight: 600; }
.creneau-salle {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--ink-600);
    margin: 1px 0 3px;
}
.creneau-benevoles {
    font-weight: 600;
}
.creneau-note {
    margin-top: 3px;
    font-size: 0.72rem;
    font-style: italic;
    color: var(--ink-600);
}
.desistement-event-badge,
.incomplete-event-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    max-width: 100%;
    box-sizing: border-box;
    margin-top: 4px;
    padding: 2px 5px;
    border-radius: 4px;
    background: #F8DFDC;
    color: #84271F;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
}
.incomplete-event-badge {
    background: #FDE8C8;
    color: #8A4B12;
}
.desistement-event-icon {
    flex: 0 0 12px;
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---------- Modal (pop-up créneau) ---------- */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(35, 38, 43, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 1000;
}
.modal-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}

.emoji-rain {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 900;
}
.emoji-rain-item {
    position: absolute;
    top: -2rem;
    display: block;
    animation: emoji-rain-fall 2.4s ease-in forwards;
    filter: drop-shadow(0 2px 2px rgba(35, 38, 43, 0.2));
}
@keyframes emoji-rain-fall {
    0% { transform: translate3d(0, -2rem, 0) rotate(0deg); opacity: 0; }
    12% { opacity: 1; }
    100% { transform: translate3d(0, 108vh, 0) rotate(260deg); opacity: 0; }
}

.modal-card {
    background: #fff;
    border-radius: 14px;
    width: 100%;
    max-width: 720px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 20px 20px 24px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}

.modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}
.modal-head h2 { font-size: 1.1rem; margin: 0; }
.modal-close {
    background: none;
    border: none;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    color: var(--ink-600);
}

.modal-date {
    text-transform: capitalize;
    color: var(--ink-600);
    font-size: 0.85rem;
    margin-bottom: 14px;
}

.form-row {
    display: flex;
    gap: 12px;
}
.form-row label { flex: 1; }

#creneauForm label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ink-600);
    margin-bottom: 12px;
}

#creneauForm input,
#creneauForm select,
#creneauForm textarea {
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 9px 10px;
    border: 1px solid var(--stone-200);
    border-radius: 8px;
    font-size: 0.95rem;
    font-family: var(--font);
    color: var(--ink-900);
    background: #fff;
}
#creneauForm input[type="hidden"] { display: none; }
#creneauForm input:focus,
#creneauForm select:focus {
    outline: 2px solid var(--ink-900);
    outline-offset: 1px;
}
#creneauForm textarea { resize: vertical; }
.event-type-select { margin-bottom: 14px; }
#creneauFields[hidden], #neutralFields[hidden] { display: none; }
.neutral-all-day {
    display: flex !important;
    align-items: center;
    gap: 8px;
}
#creneauForm .neutral-all-day input {
    display: inline-block;
    width: auto;
    margin: 0;
}
.neutral-time-fields[hidden] { display: none; }
.external-note-field {
    display: block;
    margin: 12px 0 6px;
    color: var(--ink-600);
    font-size: 0.8rem;
    font-weight: 700;
}
.external-note-field textarea {
    display: block;
    width: 100%;
    min-width: 0;
    margin-top: 4px;
    padding: 8px 10px;
    border: 1px solid var(--stone-200);
    border-radius: 6px;
    font: inherit;
    color: var(--ink-900);
    resize: vertical;
}

.assignment-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 12px;
}
.assignment-field { position: relative; min-width: 0; }
.assignment-field label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ink-600);
    margin-bottom: 4px;
}
.assignment-field select,
.assignment-field input {
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0 0 12px;
    padding: 9px 10px;
    border: 1px solid var(--stone-200);
    border-radius: 8px;
    font-size: 0.9rem;
    font-family: var(--font);
    color: var(--ink-900);
    background: #fff;
}
#creneauForm .assignment-field input[hidden] { display: none; }
.volunteer-picker .volunteer-selected {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    height: 40px;
    min-height: 40px;
    margin: 0 0 6px;
    padding: 6px 8px;
    border: 1px solid var(--stone-200);
    border-radius: 6px;
    background: var(--stone-50);
    font-size: 0.85rem;
}
.volunteer-picker.has-selection .volunteer-selected {
    border-color: #A5D6A7;
    background: #E8F5E9;
    color: #1B5E20;
}
.volunteer-picker.has-resignation .volunteer-selected { border-color: #E7A29B; background: #F8DFDC; color: #84271F; }
#creneauForm .volunteer-picker.has-incomplete .volunteer-search,
#creneauForm .volunteer-picker.has-incomplete .volunteer-custom {
    border-color: #F0D5A8;
    background: #FFF8EC;
    color: #8A4B12;
}
#creneauForm .volunteer-picker.has-incomplete .volunteer-search::placeholder,
#creneauForm .volunteer-picker.has-incomplete .volunteer-custom::placeholder {
    color: #C4853A;
}
.volunteer-picker .volunteer-selected[hidden] { display: none; }
.volunteer-picker .volunteer-search,
.volunteer-picker .volunteer-custom { height: 40px; }
.volunteer-clear {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: var(--ink-600);
    font-size: 1.1rem;
    cursor: pointer;
}
/* 1. Autoriser le débordement hors du corps de la modale */
.modal-content, 
.modal-body {
    overflow: visible !important;
}
/* 2. Positionner la liste en superposition (z-index élevé + scroll interne) */
.volunteer-picker {
    position: relative; /* Repère pour le positionnement absolu */
    width: 100%;
    
}
/* Champ de recherche */
.volunteer-search {
    width: 100%;
    box-sizing: border-box;
}
.volunteer-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1070; /* Passe au-dessus du pied de la modale et des boutons */
    width: 100%;            /* S'aligne parfaitement sur la largeur de l'input */
    overflow-y: auto;  /* Active le scroll interne si la liste est longue */
    box-sizing: border-box; /* Évite les dépassements dus aux bordures/paddings */
    z-index: 1000;
    /*max-height: 20px; /* Évite que le menu ne sorte complètement de l'écran */
    background-color: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.volunteer-results[hidden] { display: none; }
.volunteer-result-group-title {
    padding: 7px 9px 4px;
    color: var(--ink-600);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
}
.volunteer-result {
    display: block;
    width: 100%;
    padding: 8px 9px;
    border: 0;
    border-top: 1px solid var(--stone-100);
    background: #fff;
    color: var(--ink-900);
    text-align: left;
    cursor: pointer;
}
.volunteer-result:hover:not(:disabled), .volunteer-result:focus-visible { background: var(--stone-50); }
.volunteer-result:disabled { color: #858990; cursor: not-allowed; opacity: 0.7; }
.volunteer-result-heading, .volunteer-profile-badges, .volunteer-status-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.volunteer-result-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; }
.volunteer-result-person { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.volunteer-result-person > strong { min-width: 0; overflow-wrap: anywhere; }
.volunteer-club-badges { display: inline-flex; align-items: center; gap: 4px; }
.volunteer-club-badge {
    display: inline-block;
    flex: 0 0 12px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}
.volunteer-club-badge.is-asa { background: var(--asa); }
.volunteer-club-badge.is-scb { background: var(--scb); }

/* Intégration badge indicateurs de score bénévoles */
.recommendation-score {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    box-sizing: border-box;
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;
    margin-left: 0;
    text-align: center;
    vertical-align: middle;

    /* Calcul HSL : Rouge (0°) -> Orange (60°) -> Vert (120°) */
    --hue: calc(clamp(0, var(--score), 100) * 1.2);
    background-color: hsl(var(--hue), 85%, 92%);
    color: hsl(var(--hue), 70%, 25%);
}
/* Fin intégration badge indicateurs de score bénévoles */

.volunteer-status-badge.is-warning { background: #F8DFDC; color: #9F2F24; }
.volunteer-result > .volunteer-profile-badges { margin-top: 3px; }
.volunteer-result-comment { display: block; margin-top: 3px; color: var(--ink-600); font-size: 0.76rem; }
.volunteer-results-empty { padding: 8px 9px; color: var(--ink-600); font-size: 0.82rem; }
.volunteer-custom-choice, .volunteer-directory {
    display: block;
    width: 100%;
    padding: 8px 9px;
    border: 0;
    border-top: 1px solid var(--stone-200);
    background: var(--stone-50);
    color: var(--ink-900);
    text-align: left;
    cursor: pointer;
}
.volunteer-directory { margin: -6px 0 12px; border: 1px solid var(--stone-200); border-radius: 6px; font-size: 0.8rem; }
.volunteer-directory[hidden] { display: none; }
.duplicate-assignments { margin: 2px 0 12px; }
.duplicate-assignments summary {
    width: fit-content;
    padding: 6px 9px;
    border-radius: 6px;
    background: var(--stone-100);
    color: var(--ink-900);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
}
.duplicate-assignments[open] summary { margin-bottom: 10px; }
.duplicate-assignments .assignment-grid { padding: 0 4px; }
.duplicate-assignments .volunteer-results { z-index: 90; }
.volunteer-checks { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.volunteer-form-grid .volunteer-checks label { display: inline-flex; flex: 0 0 auto; flex-direction: row; align-items: center; gap: 5px; margin: 0; white-space: nowrap; font-weight: 400; }
.volunteer-form-grid .volunteer-checks input { width: auto; }
.club-toggles { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.club-toggles legend { margin-bottom: 7px; color: var(--ink-600); font-size: 0.82rem; font-weight: 600; }
.volunteer-form-grid .club-toggle { display: inline-flex; align-items: center; justify-content: center; min-width: 64px; margin: 0; padding: 8px 12px; border: 1px solid var(--stone-200); border-radius: 6px; cursor: pointer; }
.club-toggle { background: var(--stone-100); color: var(--ink-900); }
.club-toggle input { position: absolute; width: 1px !important; height: 1px; opacity: 0; }
.club-toggle.is-selected { border-color: var(--primary-color, #0056b3); background: var(--primary-color, #0056b3); color: #fff; }
.club-toggle[data-club="asa"].is-selected { border-color: var(--asa); background: var(--asa); }
.club-toggle[data-club="scb"].is-selected { border-color: var(--scb); background: var(--scb); }
.club-toggle:focus-within { outline: 2px solid var(--primary-color, #0056b3); outline-offset: 2px; }
.availability-dropdown { position: relative; margin-top: 8px; }
.availability-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 42px; padding: 7px 10px; border: 1px solid var(--stone-200); border-radius: 6px; background: #fff; color: var(--ink-900); text-align: left; cursor: pointer; }
.availability-summary-content { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.availability-summary-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.availability-summary-day { font-weight: 700; }
.availability-summary-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px; border-radius: 99px; font-size: 0.8rem; font-weight: 600; white-space: nowrap; }
.availability-summary-badge .priority-number { color: inherit; font-size: inherit; font-weight: 700; }
.availability-summary-badge.priority-1 { --priority-strong: #16a34a; background: #dcfce7; color: #16a34a; }
.availability-summary-badge.priority-2 { --priority-strong: #2563eb; background: #dbeafe; color: #2563eb; }
.availability-summary-badge.priority-3 { --priority-strong: #d97706; background: #fef3c7; color: #d97706; }
.availability-chevron { flex: 0 0 auto; font-size: 1.1rem; }
.availability-menu { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; width: min(820px, 100%); max-height: min(82vh, 620px); overflow-y: auto; padding: 4px 8px; border: 1px solid var(--stone-200); border-radius: 6px; background: #fff; box-shadow: 0 8px 24px rgba(35, 38, 43, 0.16); }
.availability-menu[hidden] { display: none; }
.availability-day-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 34px; padding: 3px 0; border-bottom: 1px solid var(--stone-100); }
.availability-day-row:last-child { border-bottom: 0; }
.volunteer-form-grid .availability-day-label { display: flex !important; flex: 0 0 130px; flex-direction: row !important; align-items: center !important; gap: 8px; margin: 0; overflow-wrap: normal; white-space: nowrap; font-weight: 600; }
.availability-day-checkbox { width: 14px !important; height: 14px; flex: 0 0 14px; margin: 0; }
.availability-priority-buttons { display: flex; flex: 1 1 auto; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.availability-priority-button { min-height: 24px; padding: 2px 6px; border: 1px solid transparent; border-radius: 99px; background: var(--stone-100); color: var(--ink-600); font: inherit; font-size: 0.74rem; line-height: 1.15; cursor: pointer; }
.availability-priority-button.priority-1 { background: #dcfce7; color: #16a34a; }
.availability-priority-button.priority-2 { background: #dbeafe; color: #2563eb; }
.availability-priority-button.priority-3 { background: #fef3c7; color: #d97706; }
.availability-priority-button[aria-pressed="true"] { border-color: currentColor; box-shadow: inset 0 0 0 1px currentColor; font-weight: 700; }
.availability-priority-button:disabled { background: var(--stone-100); color: #96999e; cursor: not-allowed; box-shadow: none; }
.volunteer-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.grid-form.volunteer-form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; }
.volunteer-form-grid > label { flex: none; }
.volunteer-form-grid label { min-width: 0; }
.volunteer-form-grid .full-width { grid-column: 1 / -1; }
.volunteer-form-grid textarea {
    width: 100%;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid var(--stone-200);
    border-radius: 8px;
    font: inherit;
    resize: vertical;
}
.profile-options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    min-width: 0;
    margin: 0;
    padding: 12px;
    border: 1px solid var(--stone-200);
    border-radius: 6px;
}
.profile-options legend { display: flex; align-items: center; gap: 7px; padding: 0 5px; color: var(--ink-600); font-size: 0.82rem; font-weight: 700; }
.field-info { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: var(--ink-600); color: #fff; font-size: 0.68rem; font-weight: 700; cursor: help; }
.field-info::after { position: absolute; z-index: 100; top: calc(100% + 8px); left: 0; display: none; width: min(320px, calc(100vw - 48px)); padding: 10px 12px; border-radius: 6px; background: var(--ink-900); box-shadow: 0 4px 14px rgba(35, 38, 43, 0.2); color: #fff; content: attr(data-tooltip); font-size: 0.8rem; font-weight: 400; line-height: 1.45; white-space: pre-line; }
.field-info:hover::after, .field-info:focus::after { display: block; }
.volunteer-form-grid .profile-options label { display: inline-flex; flex: 0 0 auto; flex-direction: row; align-items: center; gap: 6px; margin: 0; white-space: nowrap; font-weight: 400; }
.profile-options input { width: auto !important; }
.volunteer-active-row { display: flex; justify-content: flex-end; }
.volunteer-modal-footer { margin-top: 0; padding-top: 12px; border-top: 1px solid var(--stone-200); }
.volunteer-modal-footer-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.volunteer-modal-footer-right { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.volunteer-status-label { color: var(--ink-600); font-size: 0.8rem; white-space: nowrap; }
.volunteer-status-label strong { color: var(--ink-900); font-weight: 600; }
.volunteer-form-grid .volunteer-active {
    display: inline-flex;
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin: 0;
    white-space: nowrap;
}
.volunteer-form-grid .volunteer-active input { width: auto; margin: 0; }
.table-scroll { overflow-x: auto; }
.table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.table-responsive .data-table {
    min-width: 900px;
    table-layout: fixed;
}
.data-table th, .data-table td { padding: 8px 8px; }
.data-table th:first-child, .data-table td:first-child { padding-left: 10px; }
.data-table th:last-child, .data-table td:last-child { padding-right: 10px; }
.data-table th:nth-child(1), .data-table td:nth-child(1) { width: 110px; min-width: 110px; }
.data-table th:nth-child(2), .data-table td:nth-child(2) { width: 200px; min-width: 200px; max-width: 200px; }
.data-table th:nth-child(3), .data-table td:nth-child(3) { width: 90px; min-width: 90px; max-width: 90px; }
.data-table th:nth-child(4), .data-table td:nth-child(4) { width: 180px; min-width: 180px; }
.data-table th:nth-child(5), .data-table td:nth-child(5) { width: 70px; min-width: 70px; max-width: 70px; }
.data-table th:nth-child(6), .data-table td:nth-child(6) { width: auto; min-width: 300px; }
.data-table th:nth-child(7), .data-table td:nth-child(7) { width: 120px; min-width: 120px; }
.data-table th:nth-child(8), .data-table td:nth-child(8) { width: 72px; min-width: 72px; }
.data-table th:nth-child(9), .data-table td:nth-child(9) { width: 110px; min-width: 110px; }
.availability-header-wrap { display: flex; flex-direction: column; align-items: stretch; gap: 3px; }
.availability-day-sort { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; }
.availability-day-sort-button {
    padding: 2px 0;
    border: 1px solid var(--stone-200);
    border-radius: 4px;
    background: var(--stone-50);
    color: var(--ink-600);
    font: inherit;
    font-size: 0.7rem;
    font-weight: 700;
    cursor: pointer;
}
.availability-day-sort-button.is-active {
    border-color: var(--scb);
    background: #dbeafe;
    color: var(--scb);
}
.volunteer-contact-header { width: 90px; }
.volunteer-contact { width: 90px; min-width: 90px; max-width: 90px; padding-inline: 6px; overflow-wrap: anywhere; word-break: break-word; }
.volunteer-contact span { display: block; word-break: break-word; }
.volunteer-contact .volunteer-contact-actions {
    display: grid;
    grid-template-columns: repeat(2, 30px);
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0;
    width: 100%;
}
.volunteer-contact-slot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
}
.volunteer-contact-slot-empty {
    display: block;
    width: 100%;
    height: 100%;
}
.volunteer-contact-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--stone-200);
    border-radius: 6px;
    background: var(--stone-50);
    color: var(--ink-600);
}
.volunteer-contact-actions a:hover { border-color: var(--scb); color: var(--scb); }
.volunteer-contact-actions svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.volunteer-name-cell { width: 200px; min-width: 0; max-width: 200px; }
.volunteer-name-cell strong {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.volunteer-name-line { display: grid; grid-template-columns: minmax(0, 1fr) max-content; align-items: baseline; gap: 0 7px; min-width: 0; white-space: nowrap; }
.volunteer-frequency { display: block; max-width: max-content; color: var(--ink-600); font-size: 0.78rem; line-height: 1.2; white-space: nowrap; }
.volunteer-name-header { white-space: nowrap; }
.volunteer-frequency-sort { float: right; }
.volunteer-availability-cell { min-width: 0; }
.volunteer-availability-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1px;
    width: 100%;
    min-width: 0;
}
.volunteer-availability-day {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    height: 24px;
    padding: 0;
    border-radius: 4px;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.volunteer-availability-day.is-available {
    background: #dbeafe;
    color: #2563eb;
}
.volunteer-availability-day.is-priority-1 {
    background: #dcfce7;
    color: #16a34a;
}
.volunteer-availability-day.is-priority-2 {
    background: #dbeafe;
    color: #2563eb;
}
.volunteer-availability-day.is-priority-3 {
    background: #fef3c7;
    color: #d97706;
}
.volunteer-availability-day.is-muted {
    opacity: 0.35;
}
.volunteer-comment-block {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.volunteer-comment-main {
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    line-height: 1.35;
}
.volunteer-comment-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    line-height: 1.3;
}
.volunteer-comment-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    border: 1px solid var(--stone-200);
    border-radius: 999px;
    background: var(--stone-50);
    color: var(--ink-600);
    font-size: 0.68rem;
    font-weight: 600;
}
.volunteer-club-cell { min-width: 62px; }
.activity-meter { display: block; width: 100%; height: 5px; margin-top: 5px; overflow: hidden; border-radius: 99px; background: var(--stone-100); }
.activity-meter span { display: block; width: var(--activity-width); height: 100%; border-radius: inherit; }
.activity-meter.is-under span { background: #C43D3D; }
.activity-meter.is-below span { background: #D88720; }
.activity-meter.is-on-target span { background: #348653; }
.activity-meter.is-over span { background: #8051A5; }
.activity-cell { white-space: nowrap; }
.inactive-volunteers > summary { cursor: pointer; color: var(--ink-900); font-weight: 700; }
.inactive-volunteers[open] > summary { margin-bottom: 14px; }

.form-error {
    color: var(--danger);
    font-size: 0.85rem;
    min-height: 1.2em;
    margin: 4px 0 0;
}

.modal-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
}
.modal-actions-right { display: flex; flex-wrap: wrap; gap: 8px; }
.external-title-editor {
    display: grid;
    gap: 6px;
    margin: 12px 0;
    padding: 12px;
    border-left: 3px solid var(--asa);
    background: var(--stone-50);
}
.external-title-editor label { color: var(--ink-600); font-size: 0.8rem; font-weight: 700; }
.external-title-editor input {
    width: 100%;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid var(--stone-200);
    border-radius: 6px;
    font: inherit;
}
.external-title-editor input[readonly] { background: var(--stone-100); color: var(--ink-600); }
.external-title-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.btn {
    border-radius: 8px;
    padding: 9px 16px;
    font-size: 0.9rem;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
}
.btn-primary { background: var(--ink-900); color: #fff; }
.btn-ghost { background: var(--stone-100); color: var(--ink-900); }
.btn-danger { background: #fff; color: var(--danger); border-color: var(--danger); }
.license-refresh-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 11px;
    border-radius: 6px;
}
.license-refresh-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.volunteer-license-field { position: relative; }
.volunteer-license-lookup {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 2;
    display: block;
    min-height: 0;
    padding: 4px 7px;
    border: 1px solid var(--stone-200);
    border-radius: 5px;
    background: #fff;
    color: var(--ink-600);
    font-size: 0.72rem;
    line-height: 1.2;
    pointer-events: none;
    box-shadow: 0 3px 10px rgba(35, 38, 43, 0.12);
}
.volunteer-license-lookup:empty { display: none; }
.btn.btn-restore { border-color: #16a34a; background: #dcfce7; color: #166534; }
.btn.btn-restore:hover { border-color: #15803d; background: #bbf7d0; }
.btn.btn-archive { border-color: #d97706; background: #fef3c7; color: #92400e; }
.btn.btn-archive:hover { border-color: #b45309; background: #fde68a; }

/* ---------- Login page ---------- */
.login-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--ink-900);
    padding: 16px;
}
.login-card {
    background: #fff;
    border-radius: 14px;
    padding: 28px 24px;
    width: 100%;
    max-width: 360px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}
.login-card h1 { font-size: 1.25rem; margin: 0 0 2px; }
.login-sub { color: var(--ink-600); font-size: 0.85rem; margin: 0 0 18px; }
.login-card label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ink-600);
    margin-bottom: 14px;
}
.login-card input {
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 10px;
    border: 1px solid var(--stone-200);
    border-radius: 8px;
    font-size: 0.95rem;
}
.login-card button {
    width: 100%;
    padding: 11px;
    background: var(--ink-900);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 6px;
}
.login-error {
    background: var(--asa-tint);
    color: var(--asa);
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 0.85rem;
    margin: 0 0 14px;
}
.login-hint {
    font-size: 0.75rem;
    color: var(--ink-600);
    margin: 14px 0 0;
    text-align: center;
}

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
    .calendar-wrap { padding: 4px; }
    #calendar { padding: 4px; border-radius: 6px; }
    .calendar-toolbar { grid-template-columns: minmax(0, 1fr); gap: 6px; }
    .calendar-toolbar h1 { grid-column: 1; grid-row: 1; font-size: 1rem; }
    .calendar-toolbar-left { grid-column: 1; grid-row: 2; justify-content: center; gap: 4px; }
    .calendar-toolbar-right { grid-column: 1; grid-row: 3; justify-content: center; gap: 4px; }
    .calendar-toolbar-left button, .calendar-toolbar-action, .calendar-view-toggle button { min-height: 32px; padding: 5px 7px; font-size: 0.72rem; }
    .calendar-toolbar-left button[aria-label="Mois précédent"],
    .calendar-toolbar-left button[aria-label="Mois suivant"] { min-width: 30px; }
    .fc .fc-toolbar { flex-direction: row; gap: 6px; }
    .fc .fc-toolbar-title { font-size: 0.95rem; }
    .fc .fc-button { padding: 5px 8px; font-size: 0.8rem; }
    .creneau-card { font-size: 0.68rem; padding: 4px 5px; }
    .desistement-event-badge,
    .incomplete-event-badge { gap: 2px; padding: 1px 3px; font-size: 0.56rem; }
    .desistement-event-icon { flex-basis: 10px; width: 10px; height: 10px; }
    .agenda-event-time { font-size: 0.68rem; }
    .neutral-event-label { font-size: 0.68rem; }
    .index-calendar-scroll.is-compact .creneau-card {
        font-size: 0.62rem;
        line-height: 1.15;
        padding: 4px 5px;
        overflow: hidden;
    }
    .index-calendar-scroll.is-compact .creneau-benevoles {
        display: block;
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .index-calendar-scroll.is-compact .creneau-note,
    .index-calendar-scroll.is-compact .agenda-event-description.ics-event-note {
        display: none !important;
    }
    .public-calendar-embed .calendar-toolbar {
        gap: 6px;
        min-height: 36px;
    }
    .public-calendar-embed .calendar-toolbar h1 {
        font-size: 0.9rem;
    }
    .public-calendar-embed .calendar-toolbar-left button,
    .public-calendar-embed .calendar-toolbar-action,
    .public-calendar-embed .calendar-view-toggle button {
        min-height: 30px;
        padding: 4px 8px;
        font-size: 0.7rem;
    }
    .public-calendar-embed .fc .fc-toolbar-title {
        font-size: 0.9rem;
    }
    .public-calendar-embed .fc .fc-col-header-cell-cushion {
        font-size: 0.7rem;
        padding: 4px 0;
    }
    .public-calendar-embed .fc .fc-daygrid-day-number {
        font-size: 0.72rem;
        padding: 4px 6px;
    }
    .public-calendar-embed .creneau-card {
        font-size: 0.62rem;
        line-height: 1.15;
        padding: 4px 5px;
        overflow: hidden;
    }
    .public-calendar-embed .creneau-benevoles {
        display: block;
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .public-calendar-embed .creneau-note,
    .public-calendar-embed .agenda-event-description.ics-event-note {
        display: none !important;
    }
    .form-row { flex-direction: column; gap: 0; }
    .assignment-grid, .volunteer-form-grid { grid-template-columns: minmax(0, 1fr); }
    .volunteer-form-grid .full-width { grid-column: auto; }
    .table-scroll { overflow-x: auto; }
    .grid-form label,
    .grid-form input,
    .grid-form select,
    .grid-form textarea,
    .grid-form button,
    .btn,
    .btn-sm,
    .inline-form input,
    .inline-form select,
    .inline-form button,
    .ics-source-row input,
    .ics-source-row button,
    .calendar-source-row input,
    .calendar-source-row button {
        min-height: 44px;
    }
    .topbar { padding: 10px 14px; }
    .topbar-nav {
        width: 100%;
        gap: 8px 12px;
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .topbar-nav a {
        white-space: nowrap;
        flex-shrink: 0;
    }
    .ics-source-row { grid-template-columns: minmax(0, 1fr) 76px 76px; }
    .ics-source-row .ics-source-remove { grid-column: 1 / -1; }
    .ics-source-row > .remove-ics-source { grid-column: 1 / -1; justify-self: start; }
    .calendar-source-row { grid-template-columns: minmax(0, 1fr) 72px; }

    /* Admin config page optimizations */
    .config-section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .ics-source-row input[type="url"],
    .grid-form input:not([type="color"]),
    .grid-form select,
    .grid-form input[type="color"] {
        width: 100%;
    }
    

    /* Fix visibilité Burger */
    .topbar {
        position: relative !important;
    }

    .topbar-burger {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        border: none !important;
        padding: 8px !important;
        cursor: pointer !important;
        z-index: 20 !important;
    }

    .topbar-burger svg {
        width: 28px !important;
        height: 28px !important;
        stroke: #ffffff !important;
        display: block !important;
    }
}
/* Sur ordinateur : masque l'icône cadenas */
.admin-icon {
    display: none;
}

/* Sur mobile uniquement */
@media (max-width: 640px) {
    /* La nav reste toujours visible sur l'index public */
    header.topbar .topbar-nav {
        display: flex !important;
        position: static !important;
        background: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
        width: auto !important;
    }

    /* Masque le texte et affiche uniquement l'icône */
    .admin-text {
        display: none !important;
    }

    .admin-icon {
        display: block !important;
    }

    /* Bouton icône discret */
    .topbar-admin-link {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 8px !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border-radius: 6px !important;
        color: inherit !important;
    }
}

/* ---------- Pages de configuration (saison, calendrier) ---------- */
.page-wrap {
    max-width: 760px;
    margin: 0 auto;
    padding: 20px 16px 60px;
}
.config-page {
    width: min(100%, 1120px);
    max-width: none;
}
.volunteers-page {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 20px 16px 60px;
}
.volunteer-page-actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.volunteer-email-all { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.volunteer-email-all svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.volunteer-list-search { display: flex; flex: 1 1 260px; align-items: center; gap: 8px; min-width: 220px; max-width: 460px; min-height: 40px; padding: 0 10px; border: 1px solid var(--stone-200); border-radius: 6px; background: #fff; }
.volunteer-list-search svg { flex: 0 0 17px; width: 17px; height: 17px; fill: none; stroke: var(--ink-600); stroke-width: 1.8; stroke-linecap: round; }
.volunteer-list-search input { flex: 1 1 auto; width: 100%; min-width: 0; padding: 6px 0; border: 0; outline: 0; background: transparent; color: var(--ink-900); font: inherit; }
.volunteer-list-search input:focus-visible { outline: 2px solid var(--scb); outline-offset: 2px; }
.volunteer-list-search > span { flex: 0 0 auto; color: var(--ink-600); font-size: 0.76rem; white-space: nowrap; }
.volunteer-dialog {
    width: min(960px, calc(100% - 24px));
    max-width: none;
    max-height: 90vh;
    margin: auto;
    padding: 20px;
    overflow-y: auto;
    color: var(--ink-900);
}
.volunteer-dialog::backdrop { background: rgba(35, 38, 43, 0.58); }
.volunteer-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.volunteer-dialog-header h2 { margin: 0; }
.volunteer-dialog.priority-help-dialog { width: min(640px, calc(100% - 24px)); }
.priority-help-dialog > p { margin: 12px 0; color: var(--ink-600); line-height: 1.45; }
.priority-help-heading { margin: 18px 0 6px; font-size: 0.98rem; }
.priority-help-details { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--stone-200); }
.priority-help-details > summary { cursor: pointer; color: var(--ink-900); font-weight: 700; }
.priority-help-details[open] > summary { margin-bottom: 8px; }
.priority-help-details > p { margin: 8px 0; color: var(--ink-600); line-height: 1.45; }
.priority-help-list { display: grid; gap: 8px; margin: 12px 0; padding: 0; list-style: none; }
.priority-help-list li { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 10px; }
.priority-help-badge { display: inline-flex; justify-content: center; padding: 5px 8px; border-radius: 99px; font-size: 0.82rem; font-weight: 700; white-space: nowrap; }
.priority-help-badge.priority-1 { background: #dcfce7; color: #16a34a; }
.priority-help-badge.priority-2 { background: #dbeafe; color: #2563eb; }
.priority-help-badge.priority-3 { background: #fef3c7; color: #d97706; }

.card {
    background: #fff;
    border: 1px solid var(--stone-200);
    border-radius: var(--radius);
    padding: 18px 20px;
    margin-bottom: 18px;
}
.card h2 { margin: 0 0 6px; font-size: 1.05rem; }
.card-hint { color: var(--ink-600); font-size: 0.85rem; margin: 0 0 14px; }
.calendar-sync-action { margin: 0 0 18px; }
.config-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.config-section-header h1,
.config-section-header h2 { margin: 0; }
.config-section-header .calendar-sync-action { flex: 0 0 auto; margin-left: auto !important; }
.grid-form.neutral-color-form > label { flex: 0 0 100px; }

.banner {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.9rem;
    margin-bottom: 16px;
}
.banner-ok { background: #E4EFE3; color: #2E6B3E; }
.banner-error { background: var(--asa-tint); color: var(--asa); }

.inline-form { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.inline-form label {
    font-size: 0.8rem; font-weight: 600; color: var(--ink-600);
    display: flex; flex-direction: column; gap: 4px;
}
.inline-form input, .inline-form select {
    padding: 8px 10px; border: 1px solid var(--stone-200); border-radius: 8px; font-size: 0.9rem;
}

.grid-form {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
    margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--stone-100);
}
.room-addresses-form { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; }
.config-collapsible > summary {
    color: var(--ink-900);
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
}
.config-collapsible[open] > summary {
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--stone-100);
}
.grid-form label {
    font-size: 0.8rem; font-weight: 600; color: var(--ink-600);
    display: flex; flex-direction: column; gap: 4px;
    flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere;
}
.grid-form input:not([type="color"]), .grid-form select {
    padding: 8px 10px; border: 1px solid var(--stone-200); border-radius: 8px; font-size: 0.9rem;
    width: 100%; min-width: 0;
}
.grid-form input[type="color"] {
    padding: 2px; border: 1px solid var(--stone-200); border-radius: 8px;
    width: 100%; height: 38px; box-sizing: border-box;
}

/* Homogénéiser la taille et le rendu visuel de tous les sélecteurs de couleur */
input[type="color"] {
    width: 100%;
    height: 38px;
    padding: 2px;
    border: 1px solid var(--stone-200);
    border-radius: 8px;
    box-sizing: border-box;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 6px;
}

input[type="color"]::-moz-color-swatch {
    border: none;
    border-radius: 6px;
}
.calendar-source-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 100px;
    align-items: end;
    gap: 10px;
    width: 100%;
}

.ics-sources-form { display: grid; gap: 12px; margin-bottom: 14px; }
.ics-source-list { display: grid; gap: 10px; }
.ics-source-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 110px 110px auto;
    align-items: end;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--stone-200);
    border-left: 3px solid var(--scb);
    border-radius: 6px;
    background: var(--white);
}
.ics-source-row label {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--ink-600);
    font-size: 0.8rem;
    font-weight: 600;
}
.ics-source-row input[type="url"] {
    width: 100%;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid var(--stone-200);
    border-radius: 6px;
    font-size: 0.9rem;
}
.ics-source-row input[type="color"] {
    width: 100%;
    height: 38px;
    padding: 4px;
    border: 1px solid var(--stone-200);
    border-radius: 8px;
}
.ics-source-row .ics-source-remove {
    flex-direction: row;
    align-items: center;
    min-height: 38px;
    white-space: nowrap;
}
.ics-source-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.plain-list { list-style: none; padding: 0; margin: 0; font-size: 0.88rem; }
.plain-list li { padding: 5px 0; border-bottom: 1px solid var(--stone-100); }
.plain-list li:last-child { border-bottom: none; }

.data-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; margin-bottom: 4px; }
.data-table th, .data-table td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--stone-100); }
.data-table th { color: var(--ink-600); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; }
.recurrent-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.recurrent-actions form { margin: 0; }
.season-weekday-dropdown { position: relative; flex: 1 1 220px; min-width: 0; }
.season-weekday-dropdown > summary {
    list-style: none; cursor: pointer; padding: 8px 10px;
    border: 1px solid var(--stone-200); border-radius: 8px; background: #fff;
    color: var(--ink-600); font-size: 0.9rem;
}
.season-weekday-dropdown > summary::-webkit-details-marker { display: none; }
.season-weekday-options {
    position: absolute; z-index: 20; top: calc(100% + 4px); left: 0;
    display: grid; gap: 4px; width: max-content; min-width: 100%;
    max-width: calc(100vw - 48px); max-height: 260px; overflow: auto;
    padding: 8px; border: 1px solid var(--stone-200); border-radius: 4px;
    background: #fff; box-shadow: 0 4px 12px rgb(35 38 43 / 14%);
}
.season-weekday-options label { display: flex; flex-direction: row; align-items: center; gap: 8px; white-space: nowrap; }
.season-weekday-options input { width: auto !important; margin: 0; flex: 0 0 auto; }
.inline-form label.season-inline-checkbox { flex-direction: row; align-items: center; gap: 8px; flex: 0 1 auto; }
.inline-form .season-inline-checkbox input { width: auto; min-width: 0; margin: 0; flex: 0 0 auto; }
.data-table th .table-sort-button { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; text-transform: inherit; cursor: pointer; }
.table-sort-button span { color: var(--ink-600); font-size: 0.82rem; }
.table-sort-button:focus-visible { outline: 2px solid var(--scb); outline-offset: 2px; }
.data-table th .table-sort-button-icon { width: 18px; justify-content: center; }
.license-document-warning {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    background: #F8DFDC;
    color: #9F2F24;
    font-weight: 700;
    white-space: nowrap;
}
.license-passport-dot {
    display: inline-block;
    position: relative;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    vertical-align: middle;
}
.passport-shape { border-radius: 50%; }
.security-shape { border-radius: 3px; }
.license-security-center {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 4px;
    margin: -2px 0 0 -2px;
    /* border: 0.5px solid rgba(255, 255, 255, 0.7); */ 
}
.mobile-icon-action svg { display: none; }
.mobile-icon-action svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.license-cell, .frequency-cell { white-space: nowrap; }
.license-value {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: 108px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.license-value .license-passport-dot { margin: 0; }
.passport-dot-blanc { background: #FFFFFF; border: 1px solid #8B9096; }
.passport-dot-jaune { background: #F4D84A; }
.passport-dot-orange { background: #E78A35; }
.passport-dot-vert { background: #4A9B62; }
.passport-dot-bleu { background: #3476B8; }
.passport-dot-violet { background: #7852A3; }
.passport-dot-rouge { background: #B8432E; }
.license-neutral { color: #96999E; }
.passport-level {
    display: inline-block;
    min-width: 62px;
    padding: 4px 8px;
    border: 1px solid transparent;
    border-radius: 14px;
    font-size: 0.78rem;
    font-weight: 700;
    text-align: center;
    text-transform: capitalize;
}
.passport-blanc { background: #FFFFFF; border-color: #B9BDC2; color: #34383D; }
.passport-jaune { background: #F4D84A; color: #3F3510; }
.passport-orange { background: #E78A35; color: #2B1A0A; }
.passport-vert { background: #4A9B62; color: #FFFFFF; }
.passport-bleu { background: #3476B8; color: #FFFFFF; }
.passport-violet { background: #7852A3; color: #FFFFFF; }
.passport-rouge { background: #B8432E; color: #FFFFFF; }

.btn-sm { padding: 5px 10px; font-size: 0.78rem; }

.public-event-backdrop { z-index: 1100; }
.public-event-modal { position: relative; z-index: 1102; max-width: 640px; }
.embed-agenda-modal { max-width: 480px; }
.personal-duties-backdrop, .club-webcal-backdrop { z-index: 1200; }
.personal-duties-modal { max-width: 680px; }
.personal-license-control { margin: 12px 0; }
.personal-license-field, .club-webcal-field { display: block; margin: 12px 0; color: var(--ink-600); font-size: 0.82rem; font-weight: 600; }
.personal-license-control .personal-license-field { margin: 0 0 5px; }
.personal-license-input-wrap { position: relative; }
.personal-license-input-wrap input, .personal-license-field input, .club-webcal-field input {
    display: block;
    width: 100%;
    margin-top: 5px;
    padding: 9px 10px;
    border: 1px solid var(--stone-200);
    border-radius: 6px;
    color: var(--ink-900);
    font: inherit;
    background: #fff;
}
.personal-license-input-wrap input {
    margin-top: 0;
    padding-right: 42px;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.2;
}
.personal-license-input-wrap .volunteer-clear {
    position: absolute;
    top: 50%;
    right: 5px;
    width: 30px;
    height: 30px;
    padding: 0;
    line-height: 1;
    transform: translateY(-50%);
}
.personal-lookup-results {
    margin-top: 8px;
}
.personal-lookup-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.personal-lookup-item {
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    border: 1px solid var(--stone-200, #d6d6d6);
    border-radius: 8px;
    background: #fff;
    color: #1f2937;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.personal-lookup-item:hover {
    background: #f5f5f5;
    border-color: #b9b9b9;
}
.personal-lookup-item:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}
.personal-duties-results { display: grid; gap: 7px; max-height: 260px; overflow-y: auto; }
.personal-duty-card {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px 12px;
    padding: 10px;
    border: 1px solid var(--stone-200);
    border-radius: 6px;
    background: #fff;
    font-size: 0.82rem;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.personal-duty-card:hover, .personal-duty-card:focus-visible { border-color: var(--scb); background: #F6FAFE; box-shadow: 0 2px 8px rgba(44, 82, 130, 0.15); }
.personal-duty-card:focus-visible { outline: 2px solid var(--scb); outline-offset: 2px; }
.personal-duty-card strong { text-transform: capitalize; }
.personal-duty-role { padding: 3px 7px; border-radius: 12px; background: var(--scb-tint); color: var(--scb); font-size: 0.72rem; font-weight: 700; white-space: nowrap; }
.fc .personal-day-highlight .fc-daygrid-day-frame { background: #FFF1A8 !important; outline: 3px solid #E0B400; outline-offset: -3px; animation: personal-day-pulse 0.7s ease-in-out 3; }
.fc .personal-event-highlight { position: relative; z-index: 2; outline: 3px solid #E0B400 !important; box-shadow: 0 0 0 3px rgba(255, 241, 168, 0.9); animation: personal-day-pulse 0.7s ease-in-out 3; }
@keyframes personal-day-pulse { 50% { filter: brightness(1.08); } }
.personal-webcal-section { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--stone-100); }
.personal-webcal-section h3 { margin: 0; font-size: 0.95rem; }
.personal-webcal-section.is-disabled { opacity: 0.5; }
.personal-webcal-section.is-disabled a { pointer-events: none; cursor: not-allowed; }
.personal-webcal-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.personal-webcal-actions .btn { flex: 1 1 220px; text-align: center; text-decoration: none; }
.personal-webcal-actions .is-disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.webcal-sync-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.webcal-sync-actions .btn { flex: 1 1 180px; text-align: center; text-decoration: none; }
.club-webcal-modal { max-width: 520px; }
.public-event-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 14px 0;
}
.public-event-details div { padding-bottom: 8px; border-bottom: 1px solid var(--stone-100); }
.public-event-details .event-description-row { grid-column: 1 / -1; width: 100%; }
.public-event-details dt { color: var(--ink-600); font-size: 0.75rem; font-weight: 700; }
.public-event-details dd { margin: 3px 0 0; font-weight: 600; }
.public-event-details .event-description { white-space: pre-wrap; }
#externalEventDescription { white-space: pre-wrap; }
.public-attendees-section h3 { margin: 8px 0; font-size: 0.95rem; }
.public-attendee-list { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.public-attendee-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--stone-100); }
.public-report-button { padding: 5px 8px; border: 1px solid #D79A92; border-radius: 6px; background: #fff; color: #84271F; font-size: 0.75rem; cursor: pointer; }
.public-report-pending { color: #84271F; font-size: 0.75rem; font-weight: 700; }
.public-report-form { margin-top: 12px; padding: 12px; border: 1px solid var(--stone-200); border-radius: 6px; background: var(--stone-50); }
.public-report-form[hidden] { display: none; }
.public-report-form label { display: block; margin-bottom: 10px; font-size: 0.82rem; font-weight: 600; }
.public-report-form input[type="text"] { display: block; width: 100%; box-sizing: border-box; margin-top: 5px; padding: 9px; border: 1px solid var(--stone-200); border-radius: 6px; background: #fff; font: inherit; }
.public-report-form input[type="text"]:focus { outline: 2px solid var(--scb); outline-offset: 1px; }
.public-report-form label[for="publicReportLicense"] { padding: 10px; border: 1px solid var(--scb); border-radius: 6px; background: #fff; }
.public-report-form label[for="publicReportLicense"] small { display: block; margin-top: 5px; color: var(--ink-600); font-size: 0.75rem; font-weight: 400; }
.public-report-form textarea { display: block; width: 100%; margin-top: 5px; padding: 8px; border: 1px solid var(--stone-200); border-radius: 6px; font: inherit; }
.public-report-form .public-report-confirm { display: flex; align-items: center; gap: 7px; font-weight: 400; }
.public-report-note { margin: -4px 0 12px; color: var(--ink-600); font-size: 0.8rem; line-height: 1.4; }
.public-report-form input[type="checkbox"] { width: auto; }
.public-agenda-section { margin-top: 8px; padding-top: 0; }
.public-agenda-section h3 { margin: 0 0 9px; font-size: 0.95rem; }
.public-calendar-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.btn-agenda-permanence {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid var(--gray-mid);
    border-radius: 6px;
    background: var(--white);
    color: var(--navy);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.btn-agenda-permanence:hover {
    background: var(--gray-light);
    border-color: var(--slate);
}
.desistements-page { width: 100%; max-width: none; margin: 0; }
.resignation-table { min-width: 900px; }
.resignation-table tbody tr:focus-within { position: relative; z-index: 1200; }
.resignation-table tbody td:focus-within { position: relative; z-index: 1201; }
.resignation-action-form { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px; min-width: 270px; }
.resignation-action-form:focus-within { z-index: 1202; }
.resignation-secondary-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; }
.resignation-table th:nth-child(5), .resignation-table td:nth-child(5) { min-width: 290px; }
.resignation-picker { min-width: 0; }
.resignation-picker .volunteer-search[hidden] { display: none; }
.resignation-picker .volunteer-results { position: fixed; right: auto; left: 0; z-index: 1203; width: auto; max-height: min(320px, 45vh); margin: 0; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.18), 0 4px 6px -2px rgba(0, 0, 0, 0.08); }
.resignation-action-form .volunteer-search,
.resignation-action-form > button,
.resignation-secondary-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    min-height: 40px;
    box-sizing: border-box;
}
.resignation-action-form .volunteer-search {
    display: block;
    margin: 0;
    padding: 0 10px;
    line-height: normal;
}
.resignation-action-form > button { white-space: nowrap; }
.resignation-secondary-actions form { margin: 0; }
@media (max-width: 768px) {
    .desistements-page .table-scroll { max-width: 100%; overflow-x: hidden; }
    .incomplete-event-badge { gap: 2px; padding: 1px 3px; font-size: 0.56rem; }
    .resignation-table { display: block; width: 100%; min-width: 0; table-layout: fixed; }
    .resignation-table thead { display: none; }
    .resignation-table tbody { display: grid; gap: 12px; }
    .resignation-table tbody tr {
        display: block;
        width: 100%;
        padding: 8px 12px;
        border: 1px solid var(--stone-200);
        border-radius: 6px;
        background: #fff;
    }
    .resignation-table tbody td {
        display: grid;
        grid-template-columns: minmax(78px, 0.32fr) minmax(0, 1fr);
        gap: 8px;
        width: 100%;
        min-width: 0;
        padding: 8px 0;
        overflow-wrap: anywhere;
    }
    .resignation-table tbody td::before {
        content: attr(data-label);
        color: var(--ink-600);
        font-size: 0.75rem;
        font-weight: 700;
    }
    .resignation-table th:nth-child(5),
    .resignation-table td:nth-child(5) { min-width: 0; }
    .resignation-action-form { grid-template-columns: minmax(0, 1fr); align-items: center; min-width: 0; }
    .resignation-action-form .volunteer-search { width: 100%; min-width: 0; height: 44px; min-height: 44px; }
    .resignation-action-form > button { width: 100%; height: 44px; min-height: 44px; }
    .resignation-secondary-actions { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; justify-items: center; }
    .resignation-secondary-actions form { width: 100%; }
    .resignation-secondary-actions button { width: 100%; height: 44px; min-height: 44px; }
}
.webcal-sync-actions .btn, .personal-webcal-actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.webcal-action-icon { flex: 0 0 16px; width: 16px; height: 16px; }

/* Style du lien de licence dans la table des permanenciers */
.license-cell .license-link {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: 80px;
    min-width: 80px;
    padding: 0.15rem 0.5rem;
    background-color: rgba(0, 0, 0, 0.04);
    color: inherit;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    text-align: left;
    text-decoration: none;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.license-cell .license-link:hover {
    background-color: var(--primary-color, #0056b3);
    color: #fff;
    border-color: var(--primary-color, #0056b3);
    text-decoration: none;
}

@media (max-width: 768px) {
    .volunteers-page .table-responsive {
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
    }
    .volunteers-page .table-responsive .data-table {
        min-width: 900px;
        table-layout: auto;
    }
    .volunteers-page .table-responsive .data-table th {
        white-space: nowrap;
    }
    .volunteers-page .table-responsive .data-table th,
    .volunteers-page .table-responsive .data-table td {
        padding: 9px 10px;
    }
    .volunteers-page .activity-cell { display: none; }
}

@media (max-width: 640px) {
    .volunteer-page-actions .mobile-icon-action {
        width: 40px;
        height: 40px;
        padding: 9px;
    }
    .volunteer-page-actions .mobile-icon-action svg { display: block; }
    .volunteer-page-actions .mobile-icon-action span,
    .volunteer-page-actions .volunteer-email-all span { display: none; }
    .volunteer-page-actions .license-refresh-button {
        width: 40px;
        height: 40px;
        padding: 11px;
    }
    .volunteer-row-edit { display: none !important; }
    .volunteer-modal-footer { align-items: center; flex-wrap: wrap; gap: 8px; }
    .volunteer-modal-footer-right { margin-left: auto; }
    .volunteer-modal-footer-right .btn { padding: 8px 12px; }
    .config-section-header { align-items: flex-start; }
    .config-section-header .calendar-sync-action { align-self: flex-start; }
    .volunteer-dialog { width: calc(100% - 16px); max-height: 94vh; padding: 16px; }
    .volunteer-dialog.priority-help-dialog { width: calc(100% - 24px); }
    .volunteer-dialog-header { align-items: flex-start; }
    .volunteer-list-search { order: 5; flex-basis: 100%; max-width: none; }
    .neutral-color-form > label { flex-basis: 72px; }
    .grid-form.volunteer-form-grid { grid-template-columns: minmax(0, 1fr); }
    .public-event-details { grid-template-columns: minmax(0, 1fr); gap: 7px; }
    .public-attendee-list li { align-items: flex-start; flex-direction: column; }
    .public-calendar-actions { grid-template-columns: minmax(0, 1fr); }
    .public-calendar-actions .btn-agenda-permanence { width: 100%; padding: 8px; text-align: center; white-space: nowrap; }
    .personal-duty-card { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 500px) {
    .availability-summary-badge { gap: 0; padding: 3px; }
    .availability-summary-badge .priority-label { display: none; }
    .availability-summary-badge .priority-number { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; min-width: 22px; border-radius: 50%; background: var(--priority-strong); color: #fff; font-size: 0.72rem; }
    .availability-menu { width: calc(100vw - 48px); max-width: calc(100vw - 48px); }
    .availability-day-row { flex-wrap: wrap; gap: 3px 8px; padding: 2px 0; }
    .volunteer-form-grid .availability-day-label { flex-basis: 100%; }
    .availability-priority-buttons { display: grid; flex-basis: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
    .availability-priority-button { min-height: 22px; padding: 2px 4px; font-size: 0.68rem; }
}

/* Boutons de visibilité de l'agenda */
.btn-visibility {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.15s ease;
}

/* Action : Rendre public (Constructif -> Foncé) */
.btn-visibility-public {
    background: var(--ink-900);
    color: #fff;
    border-color: var(--ink-900);
}
.btn-visibility-public:hover {
    background: var(--scb);
    border-color: var(--scb);
}

/* Action : Rendre privée (Destructif/Cacher -> Rouge) */
.btn-visibility-private {
    background: #fff;
    color: var(--danger);
    border-color: var(--danger);
}
.btn-visibility-private:hover {
    background: var(--asa-tint);
}

/* Harmonisation Modales & Responsive Mobile */
.btn.btn-primary {
    background: var(--ink-900);
    border-color: var(--ink-900);
    color: #fff;
}
.btn.btn-primary:hover {
    background: var(--scb);
    border-color: var(--scb);
    color: #fff;
}

@media (max-width: 768px) {
    .modal-card {
        width: 92vw;
        max-width: 500px;
        max-height: 90vh;
        overflow-y: auto;
    }
}

/* ==========================================
   2. Alignement Toolbar Calendrier (index.php)
   ========================================== */
@media (max-width: 768px) {
    .calendar-toolbar {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 6px !important;
        padding: 8px 6px !important;
    }

    .calendar-toolbar-left {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 4px !important;
        margin: 0 !important;
    }

    /* Boutons < > et Aujourd'hui compacts */
    .calendar-toolbar-left button,
    .calendar-toolbar-right button {
        padding: 5px 8px !important;
        font-size: 0.78rem !important;
        white-space: nowrap !important;
        height: 34px !important;
    }

    /* Flèches de navigation */
    #calendarPrevious,
    #calendarNext {
        padding: 5px 10px !important;
        font-size: 0.9rem !important;
    }

    /* Keep the month title below the navigation controls. */
    #calendarCurrentTitle {
        order: 3 !important;
        font-size: 0.9rem !important;
        margin: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        text-align: center !important;
        flex: 1 0 100% !important;
        width: 100% !important;
    }

    .calendar-toolbar-left { order: 1; }
    .calendar-toolbar-right {
        order: 2;
        margin: 0 !important;
        margin-left: auto !important;
    }

    .index-calendar-toolbar { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 8px !important; }
    .index-calendar-toolbar-top {
        display: grid;
        grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
        gap: 4px;
        min-height: 34px;
    }
    .index-calendar-toolbar-top .calendar-toolbar-left { grid-column: 1; grid-row: 1; gap: 3px; }
    .index-calendar-toolbar-top #calendarCurrentTitle {
        grid-column: 2;
        grid-row: 1;
        width: 100% !important;
        flex: none !important;
        font-size: 0.78rem !important;
        text-align: center !important;
    }
    .index-calendar-toolbar-top #openMyDuties {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
        height: 32px !important;
        padding: 4px 5px !important;
        font-size: 0.68rem !important;
    }
    .index-calendar-toolbar-top .calendar-toolbar-left button {
        height: 32px !important;
        padding: 4px 5px !important;
        font-size: 0.68rem !important;
    }
    .index-calendar-toolbar-top #calendarPrevious,
    .index-calendar-toolbar-top #calendarNext { min-width: 25px; padding: 4px !important; }
    .index-calendar-toolbar-views { justify-content: center; }
    .index-calendar-toolbar-views .calendar-view-toggle { max-width: 100%; }
    .index-calendar-toolbar-views .calendar-view-toggle button { padding: 4px 8px; font-size: 0.72rem; }
}

/* ==========================================
   Correction Bouton Synchronisation Mobile
   ========================================== */

/* Sur écran d'ordinateur (par défaut) */
.btn-sync-icon {
    display: none !important;
}
.btn-sync-text {
    display: inline !important;
}

/* Sur mobile uniquement */
@media (max-width: 768px) {
    .btn-sync-text {
        display: none !important;
    }
    .btn-sync-icon {
        display: inline-block !important;
        vertical-align: middle;
    }
    .btn-sync {
        padding: 8px 12px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

@media (max-width: 768px) {
    /* Alignement sur une seule ligne du titre et du bouton */
    .config-header, 
    .page-header {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        gap: 10px !important;
    }

    /* Rognage du titre avec points de suspension (...) */
    .config-header h1, 
    .page-header h1 {
        font-size: 1.2rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        margin: 0 !important;
        flex: 1 !important; /* Maintient le titre dans l'espace disponible */
        min-width: 0 !important; /* Indispensable pour que le rognage fonctionne en flexbox */
    }

    /* Le bouton reste fixe sur la droite */
    .btn-sync {
        flex-shrink: 0 !important;
    }
}

.admin-config-header {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    margin-bottom: 1.5rem;
}

.admin-config-header h1 {
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.accounts-page-header { gap: 12px; }
.admin-header-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; margin-left: auto; }
.admin-header-actions .btn { flex: 0 0 auto; }
.admin-password-header-button { padding: 8px 14px; border: 1px solid var(--stone-200); border-radius: 8px; background: #F5F3EF; color: var(--ink-900); font: inherit; font-size: 0.88rem; cursor: pointer; }
.admin-password-header-button:hover { background: var(--stone-100); }
.admin-table-wrap { margin-top: 12px; }
.admin-table-wrap .admin-accounts-table { width: 100%; min-width: 820px; margin-bottom: 0; table-layout: fixed; }
.admin-accounts-table th:nth-child(1), .admin-accounts-table td:nth-child(1) { width: 23%; }
.admin-accounts-table th:nth-child(2), .admin-accounts-table td:nth-child(2) { width: 20%; }
.admin-accounts-table th:nth-child(3), .admin-accounts-table td:nth-child(3) { width: 24%; }
.admin-accounts-table th:nth-child(4), .admin-accounts-table td:nth-child(4) { width: 13%; }
.admin-accounts-table th:nth-child(5), .admin-accounts-table td:nth-child(5) { width: 20%; }
.admin-empty-row { padding: 18px 8px !important; color: var(--ink-600); text-align: center !important; }
.admin-accounts-table th { white-space: nowrap; }
.admin-accounts-table td { vertical-align: middle; }
.admin-table-subtext { display: block; margin-top: 3px; color: var(--ink-600); font-size: 0.78rem; }
.admin-role-badges { min-width: 0; overflow: hidden; }
.admin-role-badge-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 24px; gap: 3px 4px; max-height: 51px; overflow: hidden; }
.admin-role-badge { display: flex; align-items: center; gap: 4px; min-width: 0; margin: 0; padding: 4px 6px; overflow: hidden; border-radius: 4px; background: var(--scb-tint); color: var(--scb); font-size: 0.7rem; font-weight: 700; line-height: 16px; }
.admin-role-badge-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-role-badge-star { flex: 0 0 12px; width: 12px; height: 12px; fill: currentColor; }
.admin-role-badge-super { background: #EEE8F5; color: #604080; }
.admin-role-badge-empty { background: var(--stone-100); color: var(--ink-600); }
.admin-status-form { margin: 0; }
.admin-status-toggle { display: inline-flex; align-items: center; gap: 7px; padding: 4px 0; border: 0; background: transparent; color: var(--ink-600); font: inherit; font-size: 0.8rem; cursor: pointer; }
.admin-status-toggle:disabled { cursor: not-allowed; opacity: 0.7; }
.admin-status-toggle.is-active { color: #2E6B3E; }
.admin-status-track { display: inline-flex; align-items: center; width: 34px; height: 20px; padding: 2px; border-radius: 12px; background: #B8BBC0; transition: background-color 140ms ease; }
.admin-status-track > span { width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform 140ms ease; }
.admin-status-toggle.is-active .admin-status-track { background: #4A9B62; }
.admin-status-toggle.is-active .admin-status-track > span { transform: translateX(14px); }
.admin-row-actions { white-space: nowrap; text-align: right !important; }
.volunteer-row-actions { min-width: 0; white-space: nowrap; text-align: right !important; }
.volunteer-row-edit { text-decoration: none; }
.admin-row-actions > .open-edit-dialog,
.volunteer-row-actions > .volunteer-row-edit { display: inline-flex; align-items: center; justify-content: center; width: fit-content; min-width: 0; height: 28px; box-sizing: border-box; padding: 3px 6px; font-size: 0.78rem; font-weight: 500; line-height: 1; vertical-align: middle; }
.volunteer-row-actions > .volunteer-row-edit,
.volunteer-row-actions > .volunteer-actions-menu { display: inline-flex; align-items: center; vertical-align: middle; }
.admin-row-actions > .btn { display: inline-block; vertical-align: middle; }
.admin-actions-menu { display: inline-flex; align-items: center; vertical-align: middle; }
.admin-actions-menu { position: relative; margin-left: 4px; }
.volunteer-dialog-actions-menu { margin-left: 0; }
.admin-actions-menu > summary { display: grid; place-items: center; width: max-content; min-width: 0; height: 28px; box-sizing: border-box; padding: 2px 4px; border: 1px solid var(--stone-200); border-radius: 6px; color: var(--ink-900); font-size: 1.1rem; line-height: 1; cursor: pointer; list-style: none; }
.admin-actions-menu > summary > span { transform: translateY(-1px); }
.admin-actions-menu > summary::-webkit-details-marker { display: none; }
.admin-actions-menu > summary:hover { background: var(--stone-100); }
.admin-actions-popover { position: fixed; z-index: 1300; top: 8px; left: 8px; width: 220px; max-height: calc(100vh - 16px); overflow-y: auto; padding: 5px; border: 1px solid var(--stone-200); border-radius: 6px; background: #fff; box-shadow: 0 8px 22px rgba(35, 38, 43, 0.16); }
.admin-actions-popover button { display: block; width: 100%; box-sizing: border-box; padding: 9px 10px; border: 0; border-radius: 4px; background: transparent; color: var(--ink-900); font: inherit; font-size: 0.82rem; text-align: left; cursor: pointer; }
.admin-actions-popover button:hover { background: var(--stone-100); }
.admin-actions-popover form { margin: 0; }
.admin-actions-popover .volunteer-action-link { display: block; width: 100%; box-sizing: border-box; padding: 9px 10px; border-radius: 4px; color: var(--ink-900); font-size: 0.82rem; text-align: left; text-decoration: none; }
.admin-actions-popover .volunteer-action-link:hover { background: var(--stone-100); }
.admin-actions-separator { height: 1px; margin: 4px 5px; background: var(--stone-200); }
.admin-actions-popover button.is-restore { color: #16a34a; }
.admin-actions-popover button.is-archive { color: #d97706; }
.admin-actions-popover button.is-schedule { color: var(--scb); font-weight: 700; }
.admin-actions-popover button.volunteer-schedule-toggle { margin: 0; }
.admin-actions-popover button.is-danger { color: #dc2626; }
.admin-actions-popover button.is-danger:hover { background: var(--asa-tint); }
.volunteer-schedule-fields { display: grid; gap: 6px; padding: 7px 5px; color: var(--ink-600); font-size: 0.78rem; }
.volunteer-schedule-fields strong, .volunteer-schedule-list strong { color: var(--ink-900); font-size: 0.8rem; }
.volunteer-schedule-fields label { display: grid; gap: 3px; }
.volunteer-schedule-fields input, .volunteer-schedule-fields select { width: 100%; min-height: 30px; box-sizing: border-box; padding: 4px 6px; border: 1px solid var(--stone-200); border-radius: 4px; background: #fff; color: var(--ink-900); font: inherit; }
.volunteer-schedule-panel { display: grid; gap: 4px; }
.volunteer-schedule-panel[hidden] { display: none !important; }
.volunteer-schedule-list { display: grid; gap: 4px; padding: 5px; color: var(--ink-600); font-size: 0.74rem; }
.volunteer-schedule-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 4px; }
.volunteer-schedule-item button { padding: 4px 6px; font-size: 0.72rem; }
.volunteer-schedule-item-menu { margin-left: 0; }
.admin-modal-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.admin-modal-form { display: grid; gap: 12px; }
.admin-modal-form label { display: flex; flex-direction: column; gap: 5px; color: var(--ink-600); font-size: 0.82rem; font-weight: 600; }
.admin-modal-form input[type="text"],
.admin-modal-form input[type="password"] {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid var(--stone-200);
    border-radius: 8px;
    background: #fff;
    color: var(--ink-900);
    font: inherit;
}
.admin-modal-form input[type="text"]:focus-visible,
.admin-modal-form input[type="password"]:focus-visible { outline: 2px solid var(--scb); outline-offset: 1px; }
#usernameDialog,
#passwordDialog { width: min(480px, calc(100% - 24px)); max-width: 480px; }
.admin-create-form { display: grid; gap: 12px; }
.admin-create-form > label,
.admin-account-row > label:not(.admin-active-toggle) {
    display: flex;
    flex-direction: column;
    gap: 5px;
    color: var(--ink-600);
    font-size: 0.82rem;
    font-weight: 600;
}
.admin-create-form input[type="text"],
.admin-create-form select,
.admin-account-row select {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid var(--stone-200);
    border-radius: 8px;
    background: #fff;
    color: var(--ink-900);
    font: inherit;
}
.admin-create-form input[type="text"]:focus-visible,
.admin-create-form select:focus-visible,
.admin-account-row select:focus-visible {
    outline: 2px solid var(--scb);
    outline-offset: 1px;
}
.admin-permissions { margin: 10px 0; border-top: 1px solid var(--stone-200); }
.admin-permissions > summary { padding: 10px 2px; color: var(--ink-900); font-weight: 700; cursor: pointer; }
.admin-permissions fieldset,
.admin-role-fieldset { display: grid; gap: 10px; margin: 0 0 12px; padding: 12px; border: 1px solid var(--stone-200); border-radius: 6px; }
.admin-role-fieldset legend { padding: 0 4px; color: var(--ink-600); font-size: 0.82rem; font-weight: 700; }
.admin-role-option { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: start; gap: 0 8px; }
.admin-role-option > input { grid-row: 1 / span 2; margin-top: 3px; }
.admin-role-option > span { display: grid; gap: 2px; }
.admin-role-option small { color: var(--ink-600); font-size: 0.8rem; line-height: 1.4; }
.admin-role-restriction { margin: 0; color: var(--ink-600); font-size: 0.82rem; }

@media (max-width: 640px) {
    .accounts-page-header { align-items: flex-start; flex-wrap: wrap; }
    .accounts-page-header h1 { white-space: normal !important; }
    .admin-header-actions { width: 100%; flex-wrap: wrap; justify-content: flex-end; }
}

/* ==========================================
   Gestion du Menu Burger (navbar.php)
   ========================================== */

/* Sur écran ordinateur (par défaut) */
.topbar-burger {
    display: none !important; /* Cache le bouton burger sur PC */
}

/* Sur mobile uniquement */
@media (max-width: 768px) {
    .topbar-burger {
        display: flex !important;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: none;
        color: #ffffff; /* Assure la visibilité des barres SVG */
        padding: 6px;
        cursor: pointer;
    }

    /* Affiche le bouton burger */
    .topbar-burger {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        border: none !important;
        color: inherit !important;
        cursor: pointer !important;
        padding: 5px !important;
    }

    /* Le menu déroulant qui s'ouvre avec la classe .is-open */
    .topbar-nav {
        display: none !important;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        background-color: #1e293b;
        z-index: 100;
    }

    .topbar-nav.is-open {
        display: flex !important;
    }

    .topbar-nav a {
        display: block !important;
        padding: 12px 20px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    }

    .topbar-nav a:last-child {
        border-bottom: none !important;
    }
}


/* ==========================================
   Fix Affichage Nav & Admin (Index + Admin)
   ========================================== */

.topbar-admin-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Écran PC / Tablette large */
@media (min-width: 769px) {
    .admin-text {
        display: inline !important;
    }
    .admin-icon {
        display: none !important;
    }
}

/* Écran Mobile / Fenêtre réduite */
@media (max-width: 768px) {
    /* 1. Header principal : hauteur fixe pour éviter tout bougé */
    header.topbar {
        position: relative !important;
        height: 56px !important;
        padding: 0 16px !important;
        box-sizing: border-box !important;
    }

    /* 2. Index public : cadenas reste en place */
    header.topbar .topbar-nav:not(.admin-nav) {
        display: flex !important;
        position: static !important;
        background: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
        width: auto !important;
    }

    /* 3. Menu Admin mobile : positionné exactement sous les 56px */
    header.topbar .admin-nav {
        display: none !important;
        position: absolute !important;
        top: 56px !important;
        inset-inline: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        background-color: #1e293b !important;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4) !important;
        z-index: 20 !important;
        padding: 0 !important;
        margin: 0 !important;
        max-height: calc(100vh - 56px) !important;
        max-height: calc(100dvh - 56px) !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
    }

    /* Ouverture en grille de 44px par ligne */
    header.topbar .admin-nav.is-open {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-auto-rows: 48px !important;
    }

    /* Liens unifiés */
    header.topbar .admin-nav a {
        display: flex !important;
        align-items: center !important;
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
        padding: 0 18px !important;
        margin: 0 !important;
        border-top: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        width: 100% !important;
        box-sizing: border-box !important;
        background: transparent !important;
        border-radius: 0 !important;
        font-size: 0.95rem !important;
        line-height: 1 !important;
        box-sizing: border-box !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    header.topbar .admin-nav a:last-child {
        border-bottom-color: transparent !important;
    }

    /* Bouton Déconnexion */
    header.topbar .admin-nav a.topbar-logout {
        border-bottom: none !important;
        color: #f87171 !important;
        background: rgba(239, 68, 68, 0.08) !important;
    }

    /* Icône cadenas sur l'index */
    .admin-text {
        display: none !important;
    }
    .admin-icon {
        display: block !important;
    }
    .topbar-admin-link {
        padding: 8px !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border-radius: 6px !important;
        color: inherit !important;
    }

    .topbar, 
    header {
    display: flex !important;
    flex-wrap: nowrap !important; /* Empêche le burger de passer dessous */
    justify-content: space-between !important;
    align-items: center !important;
    height: 56px !important;
    padding: 0 16px !important;
}
    header.topbar .topbar-burger {
        width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        flex: 0 0 44px !important;
        padding: 0 !important;
    }
    header.topbar .topbar-burger svg {
        width: 22px !important;
        height: 22px !important;
    }

}


@media (max-width: 768px) {
    /* Passage en grille sur 2 lignes pour chaque source ICS */
    .ics-source-row {
        display: grid !important;
        grid-template-columns: 1fr 1fr auto !important; /* Ligne 2 : Couleur pub, Couleur priv, Bouton Supprimer/Retirer */
        gap: 10px !important;
        align-items: end !important;
    }

    /* 1ère ligne : L'URL prend toute la largeur */
    .ics-source-row label:first-child {
        grid-column: 1 / -1 !important;
    }

    .ics-source-row input[type="url"] {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Ajustement de la case à cocher "Supprimer" et du bouton "Retirer" sur la 2e ligne */
    .ics-source-row .ics-source-remove,
    .ics-source-row .remove-ics-source {
        grid-column: auto !important;
        justify-self: end !important;
        margin-bottom: 4px !important;
    }

    /* Jours fériés & Vacances scolaires (2 lignes également) */
    .calendar-source-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .calendar-source-row label:first-child {
        grid-column: 1 / -1 !important;
    }
}

.burger-btn, 
.navbar-toggler {
    flex-shrink: 0 !important; /* Empêche le bouton de s'écraser */
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
}

/* Garde la couleur de fond des créneaux passés dans l'agenda, mais avec une opacité réduite */
.fc-event-past .creneau-card,
.fc-event-past {
    opacity: 0.6; /* Rendu plus clair / adouci pour marquer le passé */
    filter: saturate(0.8); /* Atténue légèrement la couleur sans la supprimer */
}

/* Si un jour passé contient une permanence personnelle */
.fc-day-past.personal-day-has-permanence {
    opacity: 0.7;
}



/* --- Animation pour MA permanence AUJOURD'HUI (s'arrête au bout de 6s) --- */

.fc-day-today .personal-permanence-event .creneau-card,
.fc-day-today .creneau-card.is-personal-permanence {
    border-color: #22c55e !important;
    box-shadow: 0 0 8px 3px rgba(34, 197, 94, 0.5);
    /* 2s par impulsion x 3 répétitions = 6 secondes d'animation puis arrêt */
    animation: pulseTodayPerm 2s 3 ease-in-out;
}

@keyframes pulseTodayPerm {
    0%, 100% {
        box-shadow: 0 0 8px 1px rgba(34, 197, 94, 0.7);
        transform: scale(1); /* 👈 Taille normale (100%) */
    }
    50% {
        box-shadow: 0 0 12px 3px rgba(34, 197, 94, 0.4);
        transform: scale(1.05); /* 👈 C'EST ICI : zoom de exmple si 0.2 = +2% */
    }
}

/* Le badge "C'EST AUJOURD'HUI !" reste fixe après la fin de l'animation */
.fc-day-today .personal-permanence-event .creneau-card::before,
.fc-day-today .creneau-card.is-personal-permanence::before {
    content: "🚀 C'EST AUJOURD'HUI !";
    display: block;
    font-size: 0.62rem;
    font-weight: 800;
    /*color: #15803d;*/
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 3px;
}


/* --- Toggles de synchronisation agenda --- */
.sync-options-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start; /* Aligne les deux options à gauche (ne les écarte plus aux deux extrémités) */
    gap: 24px; /* Espace propre de 24px entre les deux interrupteurs */
    margin: 10px 0 14px 0;
    padding: 8px 12px;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

.sync-toggle-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 500;
    color: #475569;
    cursor: pointer;
    user-select: none;
}

.sync-toggle-item input {
    display: none;
}

.toggle-slider {
    position: relative;
    width: 32px;
    height: 18px;
    background-color: #cbd5e1;
    border-radius: 20px;
    transition: background-color 0.2s ease;
    flex-shrink: 0;
}

.toggle-slider::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    background-color: #ffffff;
    border-radius: 50%;
    transition: transform 0.2s ease;
}

/* Vert foncé quand activé */
.sync-toggle-item input:checked + .toggle-slider {
    background-color: #116e33;
}

.sync-toggle-item input:checked + .toggle-slider::before {
    transform: translateX(14px);
}

/* Réduction du texte de la section d'export */
#personalWebcalSection,
.sync-options-container label {
    font-size: 0.75rem; /* Texte très discret */
    line-height: 1.2;
}

/* Réduction de la taille des interrupteurs (toggles) */
.sync-options-container input[type="checkbox"] {
    transform: scale(0.95); /* 0.75 éduit le switch à 75 % de sa taille */
    transform-origin: left center;
    cursor: pointer;
}