/* ============================================================
   Design tokens C2RT
   Source unique de verite des couleurs et du bouton primaire.
   Charge globalement par base.html.twig avant les autres CSS.
   Utilise par auth.css. Les feuilles admin-dashboard.css et
   apprenant.css ne sont volontairement pas migrees ici.
   ============================================================ */

:root {
    /* Famille bleue (issue du logo officiel C2RT) */
    --c2rt-blue-900: #1e3a8a;
    --c2rt-blue-700: #1d4ed8;
    --c2rt-blue-600: #2563eb;
    --c2rt-blue-500: #3b82f6;
    --c2rt-blue-400: #60a5fa;
    --c2rt-blue-bg-light: #1e40af;
    --c2rt-blue-bg-dark: #1e3a8a;

    /* Famille cyan (accent gradient brand) */
    --c2rt-cyan-700: #0e7490;
    --c2rt-cyan-600: #0891b2;
    --c2rt-cyan-500: #06b6d4;

    /* Neutres mode clair */
    --surface-0: #ffffff;
    --surface-1: #f8fafc;
    --surface-2: #f1f5f9;
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #64748b;
    --border: #e2e8f0;

    /* Etats */
    --state-danger: #b91c1c;
    --state-danger-bg: #fef2f2;
    --state-danger-border: #fecaca;
    --state-success: #047857;
    --state-success-bg: #ecfdf5;
    --state-success-border: #a7f3d0;
    --state-info: #1e3a8a;
    --state-info-bg: #eff6ff;
    --state-info-border: #dbeafe;

    /* Gradient brand */
    --gradient-brand-light: linear-gradient(135deg, var(--c2rt-blue-bg-light) 0%, var(--c2rt-blue-600) 50%, var(--c2rt-cyan-500) 100%);
    --gradient-brand-dark: linear-gradient(135deg, var(--c2rt-blue-bg-dark) 0%, var(--c2rt-blue-700) 50%, var(--c2rt-cyan-700) 100%);

    /* Typo + timings */
    --c2rt-font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --c2rt-transition: 200ms cubic-bezier(0.32, 0.72, 0, 1);
    --c2rt-transition-theme: 320ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Typographie globale : alternates + numeraux tabulaires + smoothing. */
html {
    font-feature-settings: 'cv11', 'ss01', 'ss03';
    text-rendering: optimizeLegibility;
}

/* Transition douce entre clair / sombre. */
body,
.auth-card,
.auth-form-side,
.auth-input {
    transition:
        background-color var(--c2rt-transition-theme),
        color var(--c2rt-transition-theme),
        border-color var(--c2rt-transition-theme);
}

/* ============================================================
   Selection de texte : pose une couleur brand legere pour eviter
   le bleu systeme criard dans les longs paragraphes (rapports,
   bilans, descriptions). Reaffirmee en sombre pour rester lisible.
   ============================================================ */
::selection {
    background: rgba(37, 99, 235, 0.22);
    color: inherit;
}

@media (prefers-color-scheme: dark) {
    ::selection {
        background: rgba(96, 165, 250, 0.32);
        color: inherit;
    }
}

/* ============================================================
   Reduced motion : neutralise toutes les animations longues pour
   les utilisateurs qui en demandent moins (vestibulaire, photo-
   sensibilite). On laisse une transition tres breve pour ne pas
   casser les retours d'etat (hover, focus).
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --surface-0: #0f172a;
        --surface-1: #1e293b;
        --surface-2: #334155;
        --text-primary: #f8fafc;
        --text-secondary: #cbd5e1;
        --text-muted: #94a3b8;
        --border: #334155;

        --state-danger: #fca5a5;
        --state-danger-bg: rgba(220, 38, 38, 0.12);
        --state-danger-border: rgba(248, 113, 113, 0.32);
        --state-success: #6ee7b7;
        --state-success-bg: rgba(5, 150, 105, 0.16);
        --state-success-border: rgba(110, 231, 183, 0.32);
        --state-info: #bfdbfe;
        --state-info-bg: rgba(30, 58, 138, 0.20);
        --state-info-border: rgba(96, 165, 250, 0.32);
    }
}

/* ============================================================
   Bouton primaire commun
   Couleur identique en clair et en sombre, lisibilite garantie.
   Aucun degrade.
   ============================================================ */

/* Bouton primaire : densite alignee sur .btn-secondary / .btn-danger
   (padding 9×16, font 14, weight 600, radius 8) — assez present pour
   etre l'action principale mais plus le bloc dolgun de l'iteration
   precedente (13×18, 14.5, 700) qui occupait trop d'espace dans les
   cartes et formulaires denses. Pour un CTA hero plein largeur,
   utiliser `.btn-primary-block` qui force `width: 100%`. */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    background: var(--c2rt-blue-500);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 9px 16px;
    font-family: var(--c2rt-font);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.005em;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    transition:
        background var(--c2rt-transition),
        transform var(--c2rt-transition),
        box-shadow var(--c2rt-transition);
}

.btn-primary:hover {
    background: var(--c2rt-blue-600);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.20);
}

.btn-primary:active { transform: translateY(0); }

.btn-primary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.20);
}

.btn-primary:disabled,
.btn-primary[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-primary-block { width: 100%; }

/* ============================================================
   Toast global (window.c2rtToast)
   Servi par public/js/c2rt-ui.js. Variantes success / danger / info.
   ============================================================ */

/* Empilage des toasts en bas-centre : chaque toast s'ajoute en pile
   du plus ancien (haut) au plus recent (bas). Un toast peut etre
   ferme manuellement via la croix, ou expire automatiquement au bout
   de la duree definie dans c2rt-ui.js (6 secondes par defaut). */
.c2rt-toast-stack {
    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    pointer-events: none;
    width: min(560px, calc(100vw - 32px));
}

.c2rt-toast {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px 16px;
    min-height: 48px;
    width: 100%;
    border-radius: 12px;
    background: var(--surface-0);
    color: var(--text-primary);
    border: 1px solid var(--border);
    box-shadow:
        0 22px 46px -20px rgba(15, 23, 42, 0.36),
        0 8px 18px -10px rgba(15, 23, 42, 0.22);
    font-family: var(--c2rt-font);
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: 0.005em;
    line-height: 1.35;
    opacity: 0;
    transform: translateY(16px);
    pointer-events: none;
    overflow: hidden;
    transition:
        opacity 280ms cubic-bezier(0.32, 0.72, 0, 1),
        transform 320ms cubic-bezier(0.32, 0.72, 0, 1);
}

.c2rt-toast.is-shown {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.c2rt-toast > svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.c2rt-toast-message {
    flex: 1 1 auto;
    color: var(--text-primary);
}

/* Bouton de fermeture explicite : carre tactile pour ne pas etre rate
   sur ecran tactile. Hover legerement marque pour signaler l'action. */
.c2rt-toast-close {
    appearance: none;
    background: transparent;
    border: none;
    padding: 4px 8px;
    margin-left: 4px;
    border-radius: 6px;
    color: var(--text-muted);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background-color 160ms ease, color 160ms ease;
}

.c2rt-toast-close:hover,
.c2rt-toast-close:focus-visible {
    background: rgba(15, 23, 42, 0.08);
    color: var(--text-primary);
}

[data-bs-theme="dark"] .c2rt-toast-close:hover,
[data-bs-theme="dark"] .c2rt-toast-close:focus-visible {
    background: rgba(255, 255, 255, 0.10);
}

/* Barre de progression du temps restant : revele visuellement combien
   de temps il reste avant fermeture automatique. */
.c2rt-toast-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    background: rgba(15, 23, 42, 0.06);
}

.c2rt-toast-progress-bar {
    height: 100%;
    width: 100%;
    background: currentColor;
    transform-origin: left center;
    animation-name: c2rt-toast-shrink;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

@keyframes c2rt-toast-shrink {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

.c2rt-toast-success { border-color: var(--state-success-border); background: var(--state-success-bg); }
.c2rt-toast-danger  { border-color: var(--state-danger-border);  background: var(--state-danger-bg); }
.c2rt-toast-info    { border-color: var(--state-info-border);    background: var(--state-info-bg); }

.c2rt-toast-success > svg { color: var(--state-success); }
.c2rt-toast-danger  > svg { color: var(--state-danger); }
.c2rt-toast-info    > svg { color: var(--state-info); }

.c2rt-toast-success .c2rt-toast-progress-bar { background: var(--state-success); }
.c2rt-toast-danger  .c2rt-toast-progress-bar { background: var(--state-danger); }
.c2rt-toast-info    .c2rt-toast-progress-bar { background: var(--state-info); }

@media (prefers-reduced-motion: reduce) {
    .c2rt-toast { transition: opacity 0.001ms linear, transform 0.001ms linear; }
    .c2rt-toast-progress-bar { animation-duration: 0.001ms !important; }
}

/* ============================================================
   Tooltip global (data-c2rt-tooltip)
   Place au-dessus par defaut, bascule en bas si pas de place.
   ============================================================ */

.c2rt-tooltip {
    position: absolute;
    z-index: 9999;
    max-width: 240px;
    padding: 7px 11px;
    border-radius: 8px;
    background: #0f172a;
    color: #f8fafc;
    font-family: var(--c2rt-font);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: 0.01em;
    pointer-events: none;
    opacity: 0;
    transform: translateY(2px);
    transition: opacity 160ms ease-out, transform 160ms ease-out;
    box-shadow: 0 8px 22px -10px rgba(15, 23, 42, 0.55);
}

.c2rt-tooltip.is-shown { opacity: 1; transform: translateY(0); }

.c2rt-tooltip::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
}

.c2rt-tooltip[data-placement='top']::after {
    bottom: -10px;
    border-top-color: #0f172a;
}

.c2rt-tooltip[data-placement='bottom']::after {
    top: -10px;
    border-bottom-color: #0f172a;
}

/* ============================================================
   Empty state (macro c2rt_empty dans templates/_partials/empty.html.twig)
   Illustration SVG inline en currentColor, halo gradient en
   pseudo-element, anneau pointille en rotation 24s, traits
   internes anime au montage (draw-in).
   ============================================================ */

.c2rt-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--text-secondary);
    font-family: var(--c2rt-font);
}

.c2rt-empty-inline {
    padding: 28px 18px 22px;
    gap: 14px;
}

.c2rt-empty-card {
    padding: 48px 24px 40px;
    gap: 18px;
    background: var(--surface-0);
    border: 1px solid var(--border);
    border-radius: 16px;
}

.c2rt-empty-illu {
    position: relative;
    width: 112px;
    height: 112px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--c2rt-blue-500);
}

.c2rt-empty-illu::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(59, 130, 246, 0.18), rgba(59, 130, 246, 0) 72%);
    filter: blur(1px);
    animation: c2rt-empty-float 6.5s ease-in-out infinite;
}

.c2rt-empty-illu::after {
    content: '';
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    border: 1.4px dashed rgba(59, 130, 246, 0.28);
    animation: c2rt-empty-spin 24s linear infinite;
}

.c2rt-empty-illu-art {
    position: relative;
    width: 60px;
    height: 60px;
    animation: c2rt-empty-float 6.5s ease-in-out infinite;
}

.c2rt-empty-line {
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
    animation: c2rt-empty-draw 1.4s cubic-bezier(0.32, 0.72, 0, 1) forwards;
}

.c2rt-empty-illu-art .c2rt-empty-line:nth-child(2) { animation-delay: 0.10s; }
.c2rt-empty-illu-art .c2rt-empty-line:nth-child(3) { animation-delay: 0.20s; }
.c2rt-empty-illu-art .c2rt-empty-line:nth-child(4) { animation-delay: 0.30s; }
.c2rt-empty-illu-art .c2rt-empty-line:nth-child(5) { animation-delay: 0.40s; }
.c2rt-empty-illu-art .c2rt-empty-line:nth-child(6) { animation-delay: 0.50s; }

.c2rt-empty-title {
    margin: 0;
    color: var(--text-primary);
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: 0.005em;
}

.c2rt-empty-text {
    margin: 0;
    max-width: 38ch;
    color: var(--text-muted);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.5;
}

.c2rt-empty-action { margin-top: 6px; }

@keyframes c2rt-empty-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
}

@keyframes c2rt-empty-spin {
    to { transform: rotate(360deg); }
}

@keyframes c2rt-empty-draw {
    to { stroke-dashoffset: 0; }
}

/* ============================================================
   Skeleton loader (c2rt-skel)
   Bloc gris uni avec shimmer pour le chargement progressif.
   ============================================================ */

.c2rt-skel {
    position: relative;
    overflow: hidden;
    background: var(--surface-2);
    border-radius: 8px;
}

.c2rt-skel::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.42) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    animation: c2rt-skel-shimmer 1.4s linear infinite;
}

.c2rt-skel-line {
    height: 12px;
    border-radius: 6px;
}

.c2rt-skel-line + .c2rt-skel-line { margin-top: 9px; }
.c2rt-skel-line.is-short { width: 60%; }
.c2rt-skel-line.is-mid   { width: 80%; }

@keyframes c2rt-skel-shimmer {
    from { transform: translateX(-100%); }
    to   { transform: translateX(100%); }
}

@media (prefers-color-scheme: dark) {
    .c2rt-empty-illu { color: var(--c2rt-blue-400); }
    .c2rt-empty-illu::before { background: radial-gradient(closest-side, rgba(96, 165, 250, 0.22), rgba(96, 165, 250, 0) 72%); }
    .c2rt-empty-illu::after  { border-color: rgba(96, 165, 250, 0.30); }

    .c2rt-tooltip {
        background: #f8fafc;
        color: #0f172a;
        box-shadow: 0 8px 22px -10px rgba(0, 0, 0, 0.6);
    }
    .c2rt-tooltip[data-placement='top']::after    { border-top-color: #f8fafc; }
    .c2rt-tooltip[data-placement='bottom']::after { border-bottom-color: #f8fafc; }

    .c2rt-skel::after {
        background: linear-gradient(
            90deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.08) 50%,
            rgba(255, 255, 255, 0) 100%
        );
    }
}

/* ============================================================
   Modal d'evenement du calendrier
   Remplace window.alert() par une carte centree, animee et
   colore en fonction du type d'evenement.
   ============================================================ */

.c2rt-event-modal {
    position: fixed;
    inset: 0;
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 200ms ease-out;
}

.c2rt-event-modal.is-open {
    opacity: 1;
    pointer-events: auto;
}

.c2rt-event-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

[data-bs-theme="dark"] .c2rt-event-modal-backdrop {
    background: rgba(0, 0, 0, 0.65);
}

/* Verrouille le scroll du body quand le modal est ouvert. */
body.c2rt-modal-open { overflow: hidden; }

.c2rt-event-modal-dialog {
    position: relative;
    width: min(560px, calc(100vw - 32px));
    max-height: calc(100vh - 64px);
    background: var(--surface-0);
    border-radius: 18px;
    border: 1px solid var(--border);
    box-shadow:
        0 30px 60px -24px rgba(15, 23, 42, 0.45),
        0 12px 28px -14px rgba(15, 23, 42, 0.30);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(24px) scale(0.96);
    transition:
        transform 280ms cubic-bezier(0.32, 0.72, 0, 1),
        opacity 200ms ease-out;
    opacity: 0;
}

.c2rt-event-modal.is-open .c2rt-event-modal-dialog {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* En-tete avec degrade dynamique (defini par JS via style inline) */
.c2rt-event-modal-header {
    position: relative;
    display: grid;
    grid-template-columns: 72px 1fr auto;
    align-items: center;
    gap: 18px;
    padding: 22px 22px 24px;
    color: #ffffff;
    /* Le degrade est applique par le JS. Fallback bleu marque par defaut. */
    background: linear-gradient(135deg, #2563eb 0%, #1e3a8a 100%);
}

/* Halo decoratif derriere l'icone, donne du relief au degrade. */
.c2rt-event-modal-header::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
}

/* Voile sombre legerement applique en dark mode pour reduire l'eclat des
   degrades injectes par JS et garder un contraste confortable avec le
   reste du dialogue (qui passe sur surface-0 sombre). Voile applique
   au-dessus du degrade mais sous le contenu (icone, titres, bouton). */
.c2rt-event-modal-header::after {
    content: '';
    position: absolute;
    inset: 0;
    background: transparent;
    pointer-events: none;
    transition: background 200ms ease;
}

[data-bs-theme="dark"] .c2rt-event-modal-header::after {
    background: rgba(0, 0, 0, 0.22);
}

/* Le contenu doit passer au-dessus du voile : on l'eleve d'un cran. */
.c2rt-event-modal-header > * {
    position: relative;
    z-index: 1;
}

/* Icone SVG circulaire avec anneau pulsant. */
.c2rt-event-modal-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.30);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.c2rt-event-modal-icon svg {
    width: 100%;
    height: 100%;
}

/* Animations limitees a l'ouverture du modal : un tour d'anneau exterieur,
   une pulsation unique de l'anneau interieur, puis tout reste fixe. Cela
   evite une icone constamment animee qui distrait de la lecture. */
.c2rt-event-modal-icon-ring-outer {
    transform-origin: 24px 24px;
    transform: rotate(0deg);
}

.c2rt-event-modal-icon-ring {
    transform-origin: 24px 24px;
    transform: scale(1);
}

.c2rt-event-modal-icon-glyph {
    opacity: 1;
    transform-origin: 24px 24px;
}

.c2rt-event-modal.is-open .c2rt-event-modal-icon-ring-outer {
    animation: c2rt-event-modal-spin 1100ms cubic-bezier(0.22, 0.61, 0.36, 1) 1;
}

.c2rt-event-modal.is-open .c2rt-event-modal-icon-ring {
    animation: c2rt-event-modal-pulse 820ms cubic-bezier(0.32, 0.72, 0, 1) 1;
}

.c2rt-event-modal.is-open .c2rt-event-modal-icon-glyph {
    animation: c2rt-event-modal-glyph-in 460ms cubic-bezier(0.32, 0.72, 0, 1) 80ms 1;
    animation-fill-mode: backwards;
}

@keyframes c2rt-event-modal-spin {
    from { transform: rotate(-90deg); }
    to   { transform: rotate(0deg); }
}

@keyframes c2rt-event-modal-pulse {
    0%   { transform: scale(0.84); opacity: 0.4; }
    60%  { transform: scale(1.06); opacity: 0.95; }
    100% { transform: scale(1);    opacity: 1; }
}

@keyframes c2rt-event-modal-glyph-in {
    from { opacity: 0; transform: scale(0.6); }
    to   { opacity: 1; transform: scale(1); }
}

/* Headings (eyebrow + titre principal) */
.c2rt-event-modal-headings {
    min-width: 0;
}

.c2rt-event-modal-eyebrow {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.86);
    margin-bottom: 6px;
}

.c2rt-event-modal-headings h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.25;
    color: #ffffff;
    word-wrap: break-word;
}

/* Bouton de fermeture en haut a droite */
.c2rt-event-modal-close {
    appearance: none;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #ffffff;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 160ms ease, transform 160ms ease;
}

.c2rt-event-modal-close:hover,
.c2rt-event-modal-close:focus-visible {
    background: rgba(255, 255, 255, 0.28);
    transform: scale(1.05);
}

.c2rt-event-modal-close svg {
    width: 18px;
    height: 18px;
}

/* Corps : liste structuree des metadonnees */
.c2rt-event-modal-body {
    padding: 22px 24px;
    overflow-y: auto;
    color: var(--text-primary);
}

.c2rt-event-modal-grid {
    margin: 0;
    display: grid;
    gap: 14px;
}

.c2rt-event-modal-row {
    display: grid;
    grid-template-columns: 132px 1fr;
    gap: 16px;
    align-items: start;
}

.c2rt-event-modal-row[hidden] { display: none; }

.c2rt-event-modal-row dt {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0;
}

.c2rt-event-modal-row dt svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--text-secondary);
}

.c2rt-event-modal-row dd {
    margin: 0;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
}

/* Pastille modalite presentiel / distantiel */
[data-c2rt-event-modality][data-tone="presentiel"] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.10);
    color: var(--c2rt-blue-700);
    border: 1px solid rgba(37, 99, 235, 0.25);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

[data-c2rt-event-modality][data-tone="distantiel"] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(6, 182, 212, 0.12);
    color: var(--c2rt-cyan-700);
    border: 1px solid rgba(6, 182, 212, 0.28);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

[data-bs-theme="dark"] [data-c2rt-event-modality][data-tone="presentiel"] {
    background: rgba(96, 165, 250, 0.18);
    color: #93c5fd;
    border-color: rgba(96, 165, 250, 0.36);
}

[data-bs-theme="dark"] [data-c2rt-event-modality][data-tone="distantiel"] {
    background: rgba(34, 211, 238, 0.18);
    color: #67e8f9;
    border-color: rgba(34, 211, 238, 0.36);
}

/* Bloc description (texte long) */
.c2rt-event-modal-description {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.c2rt-event-modal-description[hidden] { display: none; }

.c2rt-event-modal-description h3 {
    margin: 0 0 8px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.c2rt-event-modal-description p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--text-primary);
    white-space: pre-wrap;
}

/* Pied de page : actions */
.c2rt-event-modal-footer {
    padding: 16px 24px 20px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    background: var(--surface-1);
}

/* Bouton secondaire du modal : meme grammaire que les pages CRUD,
   bordure claire, fond surface, contraste accru au survol. */
.c2rt-event-modal-secondary {
    appearance: none;
    border: 1px solid var(--border);
    background: var(--surface-0);
    color: var(--text-primary);
    padding: 11px 18px;
    border-radius: 10px;
    font-family: var(--c2rt-font);
    font-weight: 700;
    font-size: 14px;
    line-height: 1.2;
    cursor: pointer;
    transition:
        background-color var(--c2rt-transition),
        border-color var(--c2rt-transition),
        transform var(--c2rt-transition);
}

.c2rt-event-modal-secondary:hover,
.c2rt-event-modal-secondary:focus-visible {
    background: var(--surface-1);
    border-color: var(--text-secondary);
    transform: translateY(-1px);
}

.c2rt-event-modal-secondary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.20);
}

/* Bouton principal du modal : aligne sur la grammaire .btn-primary
   utilisee partout dans l'application. Couleur solide, hover plus
   profond + leger soulevement + halo. Pas de degrade pour rester
   coherent avec les autres CTA primaires de l'admin. */
.c2rt-event-modal-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    border-radius: 10px;
    background: var(--c2rt-blue-500);
    color: #ffffff;
    font-family: var(--c2rt-font);
    font-weight: 700;
    font-size: 14px;
    line-height: 1.2;
    text-decoration: none;
    transition:
        background var(--c2rt-transition),
        transform var(--c2rt-transition),
        box-shadow var(--c2rt-transition);
}

.c2rt-event-modal-primary:hover,
.c2rt-event-modal-primary:focus-visible {
    background: var(--c2rt-blue-600);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.22);
    color: #ffffff;
    text-decoration: none;
}

.c2rt-event-modal-primary:focus-visible {
    outline: none;
    box-shadow:
        0 6px 16px rgba(37, 99, 235, 0.22),
        0 0 0 4px rgba(37, 99, 235, 0.20);
}

.c2rt-event-modal-primary:active { transform: translateY(0); }

.c2rt-event-modal-primary svg {
    width: 16px;
    height: 16px;
}

/* Respect des preferences de mouvement reduit */
@media (prefers-reduced-motion: reduce) {
    .c2rt-event-modal,
    .c2rt-event-modal-dialog { transition: opacity 0.001ms linear; }
    .c2rt-event-modal-icon-ring-outer,
    .c2rt-event-modal-icon-ring,
    .c2rt-event-modal-icon-glyph { animation: none !important; }
}

/* Adaptation mobile : reduit le padding et l'icone */
@media (max-width: 520px) {
    .c2rt-event-modal-header {
        grid-template-columns: 56px 1fr auto;
        padding: 18px;
        gap: 14px;
    }
    .c2rt-event-modal-icon { width: 56px; height: 56px; }
    .c2rt-event-modal-headings h2 { font-size: 18px; }
    .c2rt-event-modal-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }
    .c2rt-event-modal-body { padding: 18px; }
    .c2rt-event-modal-footer { padding: 14px 18px 18px; }
}

/* ============================================================
   Schedule-X (calendrier moderne) - theming via CSS variables.
   On reprend les variables --sx-* publiques de @schedule-x/theme-default
   et on les redirige vers nos tokens C2RT pour que le calendrier
   herite automatiquement de la palette signature.
   Source variables : https://schedule-x.dev/docs/calendar/styling
   ============================================================ */

.c2rt-schedule-x {
    width: 100%;
    background: transparent;

    /* Couleur primaire = brand C2RT */
    --sx-color-primary: var(--c2rt-blue-500, #2563eb);
    --sx-color-on-primary: #ffffff;
    --sx-color-primary-container: rgba(37, 99, 235, 0.16);
    --sx-color-on-primary-container: var(--c2rt-blue-700, #1d4ed8);

    /* Tertiary = couleur "aujourd'hui" dans le date picker.
       Schedule-X utilise une rose par defaut ; on force le brand
       pour rester sur l'identite C2RT. */
    --sx-color-tertiary-container: rgba(37, 99, 235, 0.16);
    --sx-color-on-tertiary-container: var(--c2rt-blue-700, #1d4ed8);

    /* NOTE : on ne touche PAS --sx-color-secondary-container ici :
       ce token pilote aussi le hover natif des cellules de jour
       dans Schedule-X. L'utilisateur veut explicitement preserver
       le comportement natif sur la grille de dates. Les boutons du
       toolbar sont brand-styles via des regles explicites plus
       bas, c'est suffisant. */

    /* Surfaces : on s'aligne integralement sur les tokens projet
       (admin-dashboard.css definit --c2rt-surface-page / -soft /
       --c2rt-surface qui basculent automatiquement en sombre).
       Le calendrier prend ainsi le meme fond que la section qui
       le contient (--c2rt-surface), pas de "carte dans une carte".
       Schedule-X reutilise surface-container-* pour ses popups
       (date picker, dropdowns) : on les pose sur la palette projet. */
    --sx-color-background: var(--c2rt-surface, #ffffff);
    --sx-color-on-background: var(--text-primary, #0f172a);
    --sx-color-surface: var(--c2rt-surface, #ffffff);
    --sx-color-surface-bright: var(--c2rt-surface-soft, #f8fafc);
    --sx-color-surface-container-low: var(--c2rt-surface, #ffffff);
    --sx-color-surface-container: var(--c2rt-surface-soft, #f8fafc);
    --sx-color-surface-container-high: var(--c2rt-surface, #ffffff);
    --sx-color-on-surface: var(--text-primary, #0f172a);
    --sx-color-on-surface-variant: var(--text-muted, #64748b);

    /* Bordures */
    --sx-color-outline: var(--c2rt-border, var(--border, #e2e8f0));
    --sx-color-outline-variant: var(--c2rt-border, var(--border, #e2e8f0));

    /* Typographie */
    --sx-font-family: var(--c2rt-font, 'Plus Jakarta Sans', system-ui, sans-serif);

    /* Espacements / radius pour aligner sur le projet */
    --sx-spacing: 4px;
    --sx-border-radius: 10px;

    /* La hauteur naturelle est laissee a Schedule-X : la vue Mois
       calibre ses rangees seule, la vue Semaine / Jour pose une grille
       de 700 px via `weekOptions.gridHeight` (cote JS). On force un
       min-height *uniquement* en vue Semaine / Jour (cf. regle plus
       bas) pour eviter un blanc en bas de la vue Mois. */
}

/* Min-height conditionnel : seulement quand Schedule-X rend une vue
   time-grid (Semaine ou Jour). En Mois il n'y a pas `.sx__week-grid`,
   donc cette regle ne s'applique pas et le conteneur prend la hauteur
   naturelle du month-grid sans bande blanche en bas. */
.c2rt-schedule-x:has(.sx__week-grid) {
    min-height: 820px;
}

/* Dark mode : seuls les tokens primary / tertiary changent
   (versions plus claires du brand). Les surfaces et bordures
   sont deja gerees par les variables --c2rt-* qui basculent
   automatiquement en sombre via [data-bs-theme="dark"]. */
[data-bs-theme="dark"] .c2rt-schedule-x {
    --sx-color-primary: var(--c2rt-blue-400, #60a5fa);
    --sx-color-on-primary: #0b1220;
    --sx-color-primary-container: rgba(59, 130, 246, 0.28);
    --sx-color-on-primary-container: #dbeafe;

    /* Pastille "aujourd'hui" sur le brand au lieu de la rose
       par defaut de Schedule-X. */
    --sx-color-tertiary-container: rgba(96, 165, 250, 0.22);
    --sx-color-on-tertiary-container: var(--c2rt-blue-300, #93c5fd);

    /* NOTE : pas d'override de --sx-color-secondary-container en
       sombre non plus, pour les memes raisons que le mode clair :
       on preserve le hover natif des cellules de date. */

    /* Bordures : un poil plus visibles que --c2rt-border seul. */
    --sx-color-outline: rgba(96, 165, 250, 0.18);
    --sx-color-outline-variant: rgba(148, 163, 184, 0.18);
}

.c2rt-calendar-section {
    padding: 0;
}

/* ============================================================
   Cacher les week-ends sur Schedule-X (vues mois + semaine).
   La librairie ne propose pas d'option native, on contraint la
   grille CSS a 5 colonnes (lundi -> vendredi). Necessite
   firstDayOfWeek = 1 cote JS pour que les 2 dernieres colonnes
   correspondent bien a samedi/dimanche.
   ============================================================ */

/* Vue mois : on cache samedi + dimanche.
   Schedule-X v2 utilise FLEXBOX (.sx__month-grid-week { display: flex }
   avec .sx__month-grid-day { flex: 1 }), donc display: none retire
   simplement la cellule du flow flex et les 5 jours visibles se
   repartissent automatiquement l'espace. C'est la methode la plus
   simple et la plus fiable. */
.c2rt-schedule-x .sx__month-grid-day:nth-child(7n+6),
.c2rt-schedule-x .sx__month-grid-day:nth-child(7n) {
    display: none !important;
}

/* Hide samedi + dimanche dans la vue semaine UNIQUEMENT.
   Probleme historique : `:nth-last-child(-n+2)` masquait aussi
   l'unique jour de la vue Jour qui ne contient qu'un seul cellule
   et un axe (2 enfants au total).
   Strategie :
    1. Position-based hiding ne s'applique que quand la grille a
       VRAIMENT 7 colonnes de jours, detecte via `:has()`.
    2. La vue Jour (1 colonne) ne declenche jamais ces regles.
    3. La classe officielle Schedule-X v2 est `.sx__time-grid-day`
       avec un seul tiret, pas un double underscore. */

/* Body (time-grid) : 8 enfants en semaine [axe + 7 jours].
   nth-child(7) = samedi, nth-child(8) = dimanche.
   En vue Jour : 2 enfants [axe + 1 jour], les positions 7/8
   n'existent pas, donc rien n'est masque. */
.c2rt-schedule-x .sx__time-grid:has(.sx__time-grid-day:nth-child(8)) .sx__time-grid-day:nth-child(7),
.c2rt-schedule-x .sx__time-grid:has(.sx__time-grid-day:nth-child(8)) .sx__time-grid-day:nth-child(8) {
    display: none !important;
}

/* Body : grid-template-columns force 5 colonnes (au lieu de 7),
   mais UNIQUEMENT quand la vue contient une 8e cellule (semaine). */
.c2rt-schedule-x .sx__time-grid:has(.sx__time-grid-day:nth-child(8)) {
    grid-template-columns: var(--sx-internal-time-axis-width, 60px) repeat(5, minmax(0, 1fr)) !important;
}

/* Header (week-grid day-names) : 7 enfants en semaine [pas d'axe].
   nth-child(6) = samedi, nth-child(7) = dimanche.
   En vue Jour : 1 enfant, les positions 6/7 n'existent pas. */
.c2rt-schedule-x .sx__week-grid__day-names:has(> :nth-child(7)) > :nth-child(6),
.c2rt-schedule-x .sx__week-grid__day-names:has(> :nth-child(7)) > :nth-child(7) {
    display: none !important;
}

.c2rt-schedule-x .sx__week-grid__day-names:has(> :nth-child(7)) {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

/* ============================================================
   Boutons Schedule-X : alignes sur la grammaire .btn-primary
   du projet (brand bleu, hover lift, focus halo).
   ============================================================ */

.c2rt-schedule-x .sx__today-button,
.c2rt-schedule-x .sx__forward-backward-navigation button,
.c2rt-schedule-x .sx__view-selection-item {
    font-family: var(--c2rt-font, system-ui) !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    transition: background var(--c2rt-transition, 160ms ease),
                color var(--c2rt-transition, 160ms ease),
                transform var(--c2rt-transition, 160ms ease) !important;
}

.c2rt-schedule-x .sx__today-button {
    background: var(--c2rt-blue-500, #2563eb) !important;
    color: #ffffff !important;
    border: none !important;
}

.c2rt-schedule-x .sx__today-button:hover,
.c2rt-schedule-x .sx__today-button:focus-visible {
    background: var(--c2rt-blue-600, #1d4ed8) !important;
    transform: translateY(-1px) !important;
}

.c2rt-schedule-x .sx__view-selection-item--active,
.c2rt-schedule-x .sx__view-selection-selected-item {
    background: var(--c2rt-blue-500, #2563eb) !important;
    color: #ffffff !important;
}

/* ============================================================
   Boutons du calendrier — brand C2RT (uniquement les boutons,
   PAS les cellules de date). On cible explicitement les classes
   des controles du toolbar et du dropdown ; les hovers naturels
   sur les jours du grid / date picker ne sont pas touches.
   ============================================================ */

/* Chevrons toolbar (prev/suivant mois) + chevrons date picker */
.c2rt-schedule-x .sx__forward-backward-navigation button:hover,
.c2rt-schedule-x .sx__forward-backward-navigation button:focus,
.c2rt-schedule-x .sx__forward-backward-navigation button:focus-visible,
.c2rt-schedule-x .sx__forward-backward-navigation button:active,
.c2rt-schedule-x .sx__chevron-wrapper:hover,
.c2rt-schedule-x .sx__chevron-wrapper:focus,
.c2rt-schedule-x .sx__chevron-wrapper:focus-visible,
.c2rt-schedule-x .sx__chevron-wrapper:active,
/* Bouton ouvrant le dropdown des vues (Mois/Semaine/Jour) */
.c2rt-schedule-x .sx__view-selection-dropdown-button:hover,
.c2rt-schedule-x .sx__view-selection-dropdown-button:focus,
.c2rt-schedule-x .sx__view-selection-dropdown-button:focus-visible,
.c2rt-schedule-x .sx__view-selection-dropdown-button:active,
/* Items du dropdown des vues, sauf l'actif (qui a son fond brand plein) */
.c2rt-schedule-x .sx__view-selection-items .sx__view-selection-item:not(.sx__view-selection-item--active):not(.sx__view-selection-selected-item):hover,
.c2rt-schedule-x .sx__view-selection-items .sx__view-selection-item:not(.sx__view-selection-item--active):not(.sx__view-selection-selected-item):focus,
.c2rt-schedule-x .sx__view-selection-items .sx__view-selection-item:not(.sx__view-selection-item--active):not(.sx__view-selection-selected-item):focus-visible {
    background-color: rgba(37, 99, 235, 0.10) !important;
    color: var(--c2rt-blue-700, #1d4ed8) !important;
    outline: none !important;
}

[data-bs-theme="dark"] .c2rt-schedule-x .sx__forward-backward-navigation button:hover,
[data-bs-theme="dark"] .c2rt-schedule-x .sx__forward-backward-navigation button:focus,
[data-bs-theme="dark"] .c2rt-schedule-x .sx__forward-backward-navigation button:focus-visible,
[data-bs-theme="dark"] .c2rt-schedule-x .sx__forward-backward-navigation button:active,
[data-bs-theme="dark"] .c2rt-schedule-x .sx__chevron-wrapper:hover,
[data-bs-theme="dark"] .c2rt-schedule-x .sx__chevron-wrapper:focus,
[data-bs-theme="dark"] .c2rt-schedule-x .sx__chevron-wrapper:focus-visible,
[data-bs-theme="dark"] .c2rt-schedule-x .sx__chevron-wrapper:active,
[data-bs-theme="dark"] .c2rt-schedule-x .sx__view-selection-dropdown-button:hover,
[data-bs-theme="dark"] .c2rt-schedule-x .sx__view-selection-dropdown-button:focus,
[data-bs-theme="dark"] .c2rt-schedule-x .sx__view-selection-dropdown-button:focus-visible,
[data-bs-theme="dark"] .c2rt-schedule-x .sx__view-selection-dropdown-button:active,
[data-bs-theme="dark"] .c2rt-schedule-x .sx__view-selection-items .sx__view-selection-item:not(.sx__view-selection-item--active):not(.sx__view-selection-selected-item):hover,
[data-bs-theme="dark"] .c2rt-schedule-x .sx__view-selection-items .sx__view-selection-item:not(.sx__view-selection-item--active):not(.sx__view-selection-selected-item):focus,
[data-bs-theme="dark"] .c2rt-schedule-x .sx__view-selection-items .sx__view-selection-item:not(.sx__view-selection-item--active):not(.sx__view-selection-selected-item):focus-visible {
    background-color: rgba(96, 165, 250, 0.18) !important;
    color: var(--c2rt-blue-200, #bfdbfe) !important;
    outline: none !important;
}

/* Item actif dans le dropdown (Mois si la vue courante est Mois).
   Schedule-X peut utiliser plusieurs conventions selon la build :
   --active, --selected, aria-selected, aria-current... on couvre
   toutes les variantes pour ne pas rater le fond pembe restant. */
.c2rt-schedule-x .sx__view-selection-item--active,
.c2rt-schedule-x .sx__view-selection-selected-item,
.c2rt-schedule-x .sx__view-selection-item--selected,
.c2rt-schedule-x .sx__view-selection-item.is-active,
.c2rt-schedule-x .sx__view-selection-item.is-selected,
.c2rt-schedule-x .sx__view-selection-item[aria-selected="true"],
.c2rt-schedule-x .sx__view-selection-item[aria-current="true"],
.c2rt-schedule-x .sx__view-selection-items > [class*="--active"],
.c2rt-schedule-x .sx__view-selection-items > [class*="--selected"] {
    background: var(--c2rt-blue-500, #2563eb) !important;
    color: #ffffff !important;
}

.c2rt-schedule-x .sx__view-selection-item--active:hover,
.c2rt-schedule-x .sx__view-selection-selected-item:hover,
.c2rt-schedule-x .sx__view-selection-item--selected:hover,
.c2rt-schedule-x .sx__view-selection-item[aria-selected="true"]:hover,
.c2rt-schedule-x .sx__view-selection-items > [class*="--active"]:hover,
.c2rt-schedule-x .sx__view-selection-items > [class*="--selected"]:hover {
    background: var(--c2rt-blue-600, #1d4ed8) !important;
    color: #ffffff !important;
}

[data-bs-theme="dark"] .c2rt-schedule-x .sx__view-selection-item--active,
[data-bs-theme="dark"] .c2rt-schedule-x .sx__view-selection-selected-item,
[data-bs-theme="dark"] .c2rt-schedule-x .sx__view-selection-item--selected,
[data-bs-theme="dark"] .c2rt-schedule-x .sx__view-selection-item.is-active,
[data-bs-theme="dark"] .c2rt-schedule-x .sx__view-selection-item.is-selected,
[data-bs-theme="dark"] .c2rt-schedule-x .sx__view-selection-item[aria-selected="true"],
[data-bs-theme="dark"] .c2rt-schedule-x .sx__view-selection-item[aria-current="true"],
[data-bs-theme="dark"] .c2rt-schedule-x .sx__view-selection-items > [class*="--active"],
[data-bs-theme="dark"] .c2rt-schedule-x .sx__view-selection-items > [class*="--selected"] {
    background: var(--c2rt-blue-400, #60a5fa) !important;
    color: #0b1220 !important;
}

[data-bs-theme="dark"] .c2rt-schedule-x .sx__view-selection-item--active:hover,
[data-bs-theme="dark"] .c2rt-schedule-x .sx__view-selection-selected-item:hover,
[data-bs-theme="dark"] .c2rt-schedule-x .sx__view-selection-item--selected:hover,
[data-bs-theme="dark"] .c2rt-schedule-x .sx__view-selection-item[aria-selected="true"]:hover,
[data-bs-theme="dark"] .c2rt-schedule-x .sx__view-selection-items > [class*="--active"]:hover,
[data-bs-theme="dark"] .c2rt-schedule-x .sx__view-selection-items > [class*="--selected"]:hover {
    background: var(--c2rt-blue-300, #93c5fd) !important;
    color: #0b1220 !important;
}

/* Today button : conserve son fond brand plein en hover/focus. */
.c2rt-schedule-x .sx__today-button:hover,
.c2rt-schedule-x .sx__today-button:focus-visible,
.c2rt-schedule-x .sx__today-button:active {
    background: var(--c2rt-blue-600, #1d4ed8) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px -4px rgba(37, 99, 235, 0.45) !important;
    outline: none !important;
}

[data-bs-theme="dark"] .c2rt-schedule-x .sx__today-button:hover,
[data-bs-theme="dark"] .c2rt-schedule-x .sx__today-button:focus-visible,
[data-bs-theme="dark"] .c2rt-schedule-x .sx__today-button:active {
    background: var(--c2rt-blue-400, #60a5fa) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px -4px rgba(96, 165, 250, 0.45) !important;
}

/* View selection dropdown (Mois / Semaine / Jour) : conteneur du
   menu deroulant. On lui donne la meme finition que les autres
   popovers du projet (ombre, bord, radius). Sinon Schedule-X
   livre un menu "plat" qui parait inacheve a cote du reste. */
.c2rt-schedule-x .sx__view-selection-items {
    background: var(--c2rt-surface, #ffffff) !important;
    border: 1px solid var(--c2rt-border, #dee5ef) !important;
    border-radius: 10px !important;
    box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.18) !important;
    padding: 6px !important;
    margin-top: 4px !important;
    min-width: 140px !important;
}

.c2rt-schedule-x .sx__view-selection-items .sx__view-selection-item {
    border-radius: 6px !important;
    padding: 8px 12px !important;
}

.c2rt-schedule-x .sx__view-selection-items .sx__view-selection-item:hover {
    background: var(--c2rt-surface-soft, #e3eaf4) !important;
}

/* Date input wrapper (input + chevron du mini date picker) :
   alignement avec la grammaire .c2rt-form-input. */
.c2rt-schedule-x .sx__date-input-wrapper,
.c2rt-schedule-x .sx__date-input {
    background: var(--c2rt-surface, #ffffff) !important;
    border: 1px solid var(--c2rt-border, #dee5ef) !important;
    border-radius: 8px !important;
    font-family: var(--c2rt-font, system-ui) !important;
    font-weight: 500 !important;
    color: var(--text-primary, #0f172a) !important;
    transition: border-color 160ms ease, box-shadow 160ms ease !important;
}

.c2rt-schedule-x .sx__date-input:hover,
.c2rt-schedule-x .sx__date-input:focus,
.c2rt-schedule-x .sx__date-input-wrapper:focus-within {
    border-color: var(--c2rt-blue-500, #2563eb) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14) !important;
    outline: none !important;
}

/* ============================================================
   Event pills : ton sobre, hauteur compacte, indicateur modalite
   en pastille sur la droite. Le rendu repose sur les container /
   onContainer colors generes cote JS (paletteFor), pas sur un
   overlay agressif : on conserve la teinte brand sans claquer.
   ============================================================ */

.c2rt-schedule-x .sx__event {
    border-radius: 6px !important;
    font-family: var(--c2rt-font, system-ui) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    letter-spacing: 0.005em !important;
    /* +3 px de hauteur effective : padding interne plus genereux. La
       min-height est appliquee SEULEMENT en vue mois (regle plus bas) :
       en vue Semaine/Jour, la hauteur est calculee par Schedule-X depuis
       la duree du creneau et un min-height global tronque visuellement
       les longues pillules. */
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    border-left-width: 2px !important;
    border-left-style: solid !important;
    box-shadow: 0 1px 1px rgba(15, 23, 42, 0.06) !important;
    transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease !important;
    /* Gradient horizontal subtil : la couleur container de Schedule-X
       reste sur la gauche (cote accent), un voile blanc translucide
       eclaircit progressivement vers la droite. Effet "fade out"
       moderne sans avoir besoin de connaitre la couleur exacte. */
    background-image: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.22) 100%
    ) !important;
}

[data-bs-theme="dark"] .c2rt-schedule-x .sx__event {
    /* En sombre on attenue le voile pour ne pas effacer la teinte. */
    background-image: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.10) 100%
    ) !important;
}

/* Padding/min-height SEULEMENT en vue mois ou les events sont des
   pills horizontales statiques. En vue Jour/Semaine ils sont
   absolument positionnes et leur hauteur est calculee par la duree. */
.c2rt-schedule-x .sx__month-grid-day .sx__event,
.c2rt-schedule-x .sx__month-agenda-event {
    padding: 3px 9px !important;
    min-height: 22px !important;
}

/* Jours feries : pillule plus belirgin que les creneaux normaux mais
   sans deborder (hauteur ~= 2 creneaux empiles : 22 + gap + 22). */
.c2rt-schedule-x .sx__month-grid-day .sx__event[data-holiday="1"],
.c2rt-schedule-x .sx__month-agenda-event[data-holiday="1"],
.c2rt-schedule-x .sx__date-grid-event[data-holiday="1"] {
    min-height: 46px !important;
    padding: 10px 12px !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    font-style: italic !important;
    letter-spacing: 0.01em !important;
    border-left-width: 4px !important;
    background: rgba(225, 29, 72, 0.16) !important;
    color: #9f1239 !important;
    border-left-color: #e11d48 !important;
    box-shadow: inset 0 0 0 1px rgba(225, 29, 72, 0.30),
                0 1px 3px rgba(225, 29, 72, 0.12) !important;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

[data-bs-theme="dark"] .c2rt-schedule-x .sx__month-grid-day .sx__event[data-holiday="1"],
[data-bs-theme="dark"] .c2rt-schedule-x .sx__month-agenda-event[data-holiday="1"],
[data-bs-theme="dark"] .c2rt-schedule-x .sx__date-grid-event[data-holiday="1"] {
    background: rgba(225, 29, 72, 0.22) !important;
    color: #fda4af !important;
    border-left-color: #f43f5e !important;
    box-shadow: inset 0 0 0 1px rgba(244, 63, 94, 0.34),
                0 1px 3px rgba(0, 0, 0, 0.30) !important;
}

/* Modality dot indesirable sur un jour ferie : on le masque. */
.c2rt-schedule-x .sx__event[data-holiday="1"]::after {
    display: none !important;
}

/* Affordance de drag : les events qui ne sont pas explicitement
   marques non-draggables (periodes, jours feries) montrent un
   curseur "grab" pour signaler qu'ils sont deplacables. Les events
   periode/holiday gardent le cursor par defaut. */
.c2rt-schedule-x .sx__event {
    cursor: grab !important;
}

.c2rt-schedule-x .sx__event:active {
    cursor: grabbing !important;
}

/* Event en cours de drag : leger lift + ombre marquee */
.c2rt-schedule-x .sx__event.sx__is-dragging,
.c2rt-schedule-x .sx__event[draggable="true"]:active {
    box-shadow: 0 12px 24px -8px rgba(15, 23, 42, 0.35) !important;
    transform: scale(1.03);
    opacity: 0.9;
    z-index: 10;
}

.c2rt-schedule-x .sx__event:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px -4px rgba(15, 23, 42, 0.18) !important;
}

[data-bs-theme="dark"] .c2rt-schedule-x .sx__event {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) !important;
}

[data-bs-theme="dark"] .c2rt-schedule-x .sx__event:hover {
    box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.55) !important;
    filter: brightness(1.06);
}

/* Indicateur de modalite : pastille a la fin du chip (bord droit),
   pas a la fin du texte. En vue mois on positionne en absolu, en
   activant position: relative SEULEMENT sur les events de la vue
   mois (sinon ca casse la position absolute des events de la vue
   semaine/jour). En time-grid la modalite est lisible en toutes
   lettres dans le contenu, le dot n'est pas necessaire. */
.c2rt-schedule-x .sx__month-grid-day .sx__event,
.c2rt-schedule-x .sx__month-agenda-event {
    position: relative !important;
}

.c2rt-schedule-x .sx__month-grid-day .sx__event[data-modality]::after,
.c2rt-schedule-x .sx__month-agenda-event[data-modality]::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    opacity: 0.6;
    pointer-events: none;
}

.c2rt-schedule-x .sx__month-grid-day .sx__event[data-modality="presentiel"]::after,
.c2rt-schedule-x .sx__month-agenda-event[data-modality="presentiel"]::after {
    background: currentColor;
}

.c2rt-schedule-x .sx__month-grid-day .sx__event[data-modality="distantiel"]::after,
.c2rt-schedule-x .sx__month-agenda-event[data-modality="distantiel"]::after {
    background: transparent;
    box-shadow: inset 0 0 0 1.5px currentColor;
}

/* En vue Jour/Semaine on ne montre pas le dot (la modalite est
   affichee en texte plein dans le contenu de l'event). */
.c2rt-schedule-x .sx__time-grid-day .sx__event[data-modality]::after {
    display: none !important;
}

/* Description longue d'un event : injectee par le JS UNIQUEMENT en
   vue Jour (1 colonne large). En vue Mois / Semaine elle resterait
   invisible meme si ajoutee, on prefere ne pas la generer du tout
   pour ne pas alourdir le DOM. */
.c2rt-schedule-x .c2rt-event-description {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid currentColor;
    border-top-color: rgba(15, 23, 42, 0.12);
    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.5;
    opacity: 0.82;
    white-space: normal;
    word-wrap: break-word;
    /* Limite a 4 lignes max pour ne pas deborder de l'event chip si
       la description est tres longue. Schedule-X clip naturellement
       en time grid, mais ce safe-guard evite les debordements. */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

[data-bs-theme="dark"] .c2rt-schedule-x .c2rt-event-description {
    border-top-color: rgba(255, 255, 255, 0.14);
    opacity: 0.78;
}

/* ============================================================
   Light mode — finitions communes : today badge brand,
   header de jour majuscule + couleur secondaire, hover doux.
   Schedule-X par defaut affiche le jour en cours un peu trop
   discret pour notre signature.
   ============================================================ */

.c2rt-schedule-x .sx__month-grid-day-name,
.c2rt-schedule-x .sx__month-grid__weekday,
.c2rt-schedule-x .sx__week-grid__day-name {
    color: var(--text-muted, #64748b);
    font-weight: 600;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    background: transparent !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    padding: 10px 8px !important;
}

.c2rt-schedule-x .sx__month-grid-day,
.c2rt-schedule-x .sx__week-grid__day,
.c2rt-schedule-x .sx__time-grid__day {
    border-color: rgba(15, 23, 42, 0.05) !important;
    border-width: 1px !important;
    background: transparent !important;
}

/* Hover des cellules de jour : on laisse le comportement natif
   de Schedule-X (pas d'override brand sur les jours, c'est demande). */

.c2rt-schedule-x .sx__month-grid-day__header-day-number {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary, #475569);
}

.c2rt-schedule-x .sx__month-grid-day--today .sx__month-grid-day__header-day-number {
    color: #ffffff;
    background: var(--c2rt-blue-600, #2563eb);
    border-radius: 999px;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.c2rt-schedule-x .sx__week-grid__day--today {
    background: rgba(37, 99, 235, 0.05);
}

.c2rt-schedule-x .sx__time-grid__current-time-line {
    background: var(--c2rt-blue-600, #2563eb);
    height: 1.5px;
    box-shadow: 0 0 6px rgba(37, 99, 235, 0.32);
}

.c2rt-schedule-x .sx__week-grid__hour,
.c2rt-schedule-x .sx__time-grid-hour,
.c2rt-schedule-x .sx__time-grid__hour {
    color: var(--text-secondary, #475569);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    border-color: rgba(37, 99, 235, 0.05);
    padding-right: 8px;
    text-align: right;
}

/* Date picker today : meme grammaire que la pastille de la vue mois,
   force le brand au lieu de la rose Schedule-X par defaut. */
.c2rt-schedule-x .sx__date-picker__day--today,
.c2rt-schedule-x .sx__date-picker__day-today {
    color: var(--c2rt-blue-700, #1d4ed8) !important;
    background: rgba(37, 99, 235, 0.14) !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.30) !important;
}

/* ============================================================
   Schedule-X — passe complete dark mode.
   Schedule-X expose ses variables CSS mais quelques zones (header
   nav, date picker popup, time axis, today highlight) demandent
   un override explicite pour atteindre la qualite visuelle du
   reste du projet en sombre.
   ============================================================ */

/* En-tete : conteneur transparent qui herite du fond. */
[data-bs-theme="dark"] .c2rt-schedule-x .sx__calendar-header,
[data-bs-theme="dark"] .c2rt-schedule-x .sx__calendar-wrapper,
[data-bs-theme="dark"] .c2rt-schedule-x .sx__view-container {
    background: transparent !important;
    color: var(--text-primary, #f1f5f9) !important;
}

[data-bs-theme="dark"] .c2rt-schedule-x {
    color: var(--text-primary, #f1f5f9);
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Titre du mois / annee dans le header. */
[data-bs-theme="dark"] .c2rt-schedule-x .sx__range-heading,
[data-bs-theme="dark"] .c2rt-schedule-x .sx__date-picker__day-name,
[data-bs-theme="dark"] .c2rt-schedule-x .sx__date-input-label {
    color: var(--text-primary, #f1f5f9) !important;
}

/* Chevrons (precedent / suivant). En clair ils sont noirs, en
   sombre il faut les remonter en blanc casse + halo. */
[data-bs-theme="dark"] .c2rt-schedule-x .sx__chevron,
[data-bs-theme="dark"] .c2rt-schedule-x .sx__chevron-wrapper svg,
[data-bs-theme="dark"] .c2rt-schedule-x .sx__forward-backward-navigation button svg {
    color: #e2e8f0 !important;
    fill: currentColor !important;
    stroke: currentColor !important;
}

[data-bs-theme="dark"] .c2rt-schedule-x .sx__forward-backward-navigation button,
[data-bs-theme="dark"] .c2rt-schedule-x .sx__chevron-wrapper {
    background: rgba(96, 165, 250, 0.10) !important;
    color: #e2e8f0 !important;
    border: 1px solid rgba(96, 165, 250, 0.20) !important;
    border-radius: 8px !important;
}

/* Hover des chevrons en sombre : pris en charge par le bloc global
   "tous les elements interactifs neutres" plus haut dans le fichier. */

/* Bouton "Aujourd'hui" en mode sombre : conserve l'accent brand. */
[data-bs-theme="dark"] .c2rt-schedule-x .sx__today-button {
    background: var(--c2rt-blue-500, #3b82f6) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px -6px rgba(59, 130, 246, 0.55) !important;
}

[data-bs-theme="dark"] .c2rt-schedule-x .sx__today-button:hover,
[data-bs-theme="dark"] .c2rt-schedule-x .sx__today-button:focus-visible {
    background: var(--c2rt-blue-400, #60a5fa) !important;
    transform: translateY(-1px) !important;
}

/* Selecteur de vue (mois / semaine / jour / agenda). */
[data-bs-theme="dark"] .c2rt-schedule-x .sx__view-selection-item,
[data-bs-theme="dark"] .c2rt-schedule-x .sx__view-selection-dropdown-button {
    color: #cbd5e1 !important;
    background: rgba(96, 165, 250, 0.08) !important;
    border: 1px solid rgba(96, 165, 250, 0.18) !important;
}

[data-bs-theme="dark"] .c2rt-schedule-x .sx__view-selection-item:hover,
[data-bs-theme="dark"] .c2rt-schedule-x .sx__view-selection-dropdown-button:hover {
    background: rgba(96, 165, 250, 0.18) !important;
    color: #ffffff !important;
}

[data-bs-theme="dark"] .c2rt-schedule-x .sx__view-selection-item--active,
[data-bs-theme="dark"] .c2rt-schedule-x .sx__view-selection-selected-item {
    background: var(--c2rt-blue-500, #3b82f6) !important;
    color: #ffffff !important;
    border-color: var(--c2rt-blue-400, #60a5fa) !important;
}

[data-bs-theme="dark"] .c2rt-schedule-x .sx__view-selection-items {
    background: var(--surface-1, #18294a) !important;
    border: 1px solid rgba(96, 165, 250, 0.20) !important;
    box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.55) !important;
}

/* Date input + popup (mini date picker du header). */
[data-bs-theme="dark"] .c2rt-schedule-x .sx__date-input,
[data-bs-theme="dark"] .c2rt-schedule-x .sx__date-input-wrapper {
    background: rgba(96, 165, 250, 0.08) !important;
    color: #f1f5f9 !important;
    border: 1px solid rgba(96, 165, 250, 0.18) !important;
    border-radius: 8px !important;
}

[data-bs-theme="dark"] .c2rt-schedule-x .sx__date-input:hover,
[data-bs-theme="dark"] .c2rt-schedule-x .sx__date-input:focus,
[data-bs-theme="dark"] .c2rt-schedule-x .sx__date-input-wrapper:hover {
    background: rgba(96, 165, 250, 0.16) !important;
    border-color: rgba(96, 165, 250, 0.40) !important;
}

[data-bs-theme="dark"] .c2rt-schedule-x .sx__date-picker-popup,
[data-bs-theme="dark"] .c2rt-schedule-x .sx__date-picker {
    background: #122140 !important;
    color: #f1f5f9 !important;
    border: 1px solid rgba(96, 165, 250, 0.20) !important;
    box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.55) !important;
}

[data-bs-theme="dark"] .c2rt-schedule-x .sx__date-picker__day {
    color: #cbd5e1 !important;
}

/* Hover natif des jours du date picker en sombre : pas d'override,
   on laisse Schedule-X. */

[data-bs-theme="dark"] .c2rt-schedule-x .sx__date-picker__day--today,
[data-bs-theme="dark"] .c2rt-schedule-x .sx__date-picker__day-today {
    color: var(--c2rt-blue-300, #93c5fd) !important;
    background: rgba(96, 165, 250, 0.20) !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
    box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.35) !important;
}

[data-bs-theme="dark"] .c2rt-schedule-x .sx__date-picker__day--selected {
    background: var(--c2rt-blue-500, #3b82f6) !important;
    color: #ffffff !important;
}

[data-bs-theme="dark"] .c2rt-schedule-x .sx__date-picker__day--out-of-range,
[data-bs-theme="dark"] .c2rt-schedule-x .sx__date-picker__day-out-of-range {
    color: rgba(148, 163, 184, 0.40) !important;
}

/* Vue mois : header des jours de la semaine + numero du jour.
   Pas de bandeau colore : seulement une fine separation et un
   texte muted bleute pour rester sobre. */
[data-bs-theme="dark"] .c2rt-schedule-x .sx__month-grid-day-name,
[data-bs-theme="dark"] .c2rt-schedule-x .sx__month-grid__weekday {
    color: rgba(148, 163, 184, 0.85) !important;
    font-weight: 600 !important;
    font-size: 10.5px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    background: transparent !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.10) !important;
    padding: 10px 8px !important;
}

[data-bs-theme="dark"] .c2rt-schedule-x .sx__month-grid-day,
[data-bs-theme="dark"] .c2rt-schedule-x .sx__week-grid__day,
[data-bs-theme="dark"] .c2rt-schedule-x .sx__time-grid__day {
    background: transparent !important;
    border-color: rgba(148, 163, 184, 0.08) !important;
    border-width: 1px !important;
    color: #e2e8f0 !important;
}

[data-bs-theme="dark"] .c2rt-schedule-x .sx__month-grid-day__header-day-number {
    color: #cbd5e1 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

/* Jour en cours : pastille brand circulaire. */
[data-bs-theme="dark"] .c2rt-schedule-x .sx__month-grid-day--today .sx__month-grid-day__header-day-number {
    color: #ffffff !important;
    background: var(--c2rt-blue-500, #3b82f6) !important;
    border-radius: 999px !important;
    width: 22px !important;
    height: 22px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18) !important;
}

/* Jours du mois precedent / suivant : tres discrets. */
[data-bs-theme="dark"] .c2rt-schedule-x .sx__month-grid-day--out-of-month .sx__month-grid-day__header-day-number,
[data-bs-theme="dark"] .c2rt-schedule-x .sx__month-grid-day--out-of-month {
    color: rgba(148, 163, 184, 0.35) !important;
}

/* Hover natif des jours du grid mois en sombre : pas d'override. */

/* Vue semaine / jour : header + grille horaire.
   Meme grammaire que la vue mois : pas de fond colore. */
[data-bs-theme="dark"] .c2rt-schedule-x .sx__week-grid__day-name,
[data-bs-theme="dark"] .c2rt-schedule-x .sx__week-grid__day-name-text {
    color: rgba(148, 163, 184, 0.85) !important;
    font-weight: 600 !important;
    font-size: 10.5px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    background: transparent !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.10) !important;
}

[data-bs-theme="dark"] .c2rt-schedule-x .sx__time-grid {
    border-color: rgba(96, 165, 250, 0.06) !important;
    background: transparent !important;
}

[data-bs-theme="dark"] .c2rt-schedule-x .sx__week-grid__hour,
[data-bs-theme="dark"] .c2rt-schedule-x .sx__time-grid-hour,
[data-bs-theme="dark"] .c2rt-schedule-x .sx__time-grid__hour {
    color: rgba(203, 213, 225, 0.75) !important;
    border-color: rgba(96, 165, 250, 0.05) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
}

[data-bs-theme="dark"] .c2rt-schedule-x .sx__week-grid__day--today {
    background: rgba(59, 130, 246, 0.07) !important;
}

[data-bs-theme="dark"] .c2rt-schedule-x .sx__week-grid__day-name--today {
    color: #ffffff !important;
    background: rgba(59, 130, 246, 0.18) !important;
}

[data-bs-theme="dark"] .c2rt-schedule-x .sx__time-grid__current-time-line {
    background: var(--c2rt-blue-400, #60a5fa) !important;
    height: 1.5px !important;
    box-shadow: 0 0 6px rgba(96, 165, 250, 0.45) !important;
}

[data-bs-theme="dark"] .c2rt-schedule-x .sx__time-grid__current-time-indicator {
    background: var(--c2rt-blue-400, #60a5fa) !important;
    border: 2px solid #0b1729 !important;
}

/* Vue agenda du mois : items. */
[data-bs-theme="dark"] .c2rt-schedule-x .sx__month-agenda-event,
[data-bs-theme="dark"] .c2rt-schedule-x .sx__month-agenda-day {
    background: transparent !important;
    border-color: rgba(96, 165, 250, 0.10) !important;
    color: #e2e8f0 !important;
}

[data-bs-theme="dark"] .c2rt-schedule-x .sx__month-agenda-day--today .sx__month-agenda-day__name {
    color: var(--c2rt-blue-300, #93c5fd) !important;
    font-weight: 700 !important;
}

/* Time picker / event modal popups (fallback si jamais utilises). */
[data-bs-theme="dark"] .c2rt-schedule-x .sx__time-picker-popup,
[data-bs-theme="dark"] .c2rt-schedule-x .sx__time-picker {
    background: #122140 !important;
    color: #f1f5f9 !important;
    border: 1px solid rgba(96, 165, 250, 0.20) !important;
}

[data-bs-theme="dark"] .c2rt-schedule-x .sx__time-picker__time--selected {
    background: var(--c2rt-blue-500, #3b82f6) !important;
    color: #ffffff !important;
}

/* Scrollbar interne plus discrete sur sombre. */
[data-bs-theme="dark"] .c2rt-schedule-x ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

[data-bs-theme="dark"] .c2rt-schedule-x ::-webkit-scrollbar-thumb {
    background: rgba(96, 165, 250, 0.20);
    border-radius: 6px;
}

[data-bs-theme="dark"] .c2rt-schedule-x ::-webkit-scrollbar-thumb:hover {
    background: rgba(96, 165, 250, 0.35);
}

[data-bs-theme="dark"] .c2rt-schedule-x ::-webkit-scrollbar-track {
    background: transparent;
}

/* ============================================================
   DRAWER lateral droit pour les details d'evenement.
   Remplace l'ancien modal. Pattern : Linear, Notion Calendar.

   Structure :
    .c2rt-event-drawer (overlay fixed)
     .c2rt-event-drawer-backdrop (semi-transparent, blur)
     .c2rt-event-drawer-panel (panneau slide-in droite)
       .c2rt-event-drawer-header (gradient brand + glyph + titre + close)
       .c2rt-event-drawer-body (grille d'infos + description)
       .c2rt-event-drawer-footer (boutons d'action)
   ============================================================ */

.c2rt-event-drawer {
    position: fixed;
    inset: 0;
    z-index: 9998;
    pointer-events: none;
    visibility: hidden;
}

.c2rt-event-drawer.is-open {
    pointer-events: auto;
    visibility: visible;
}

.c2rt-event-drawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 220ms ease-out;
}

[data-bs-theme="dark"] .c2rt-event-drawer-backdrop {
    background: rgba(0, 0, 0, 0.6);
}

.c2rt-event-drawer.is-open .c2rt-event-drawer-backdrop {
    opacity: 1;
}

.c2rt-event-drawer-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(560px, 100vw);
    background: var(--c2rt-surface, var(--surface-0, #ffffff));
    border-left: 1px solid var(--c2rt-border, var(--border, #e2e8f0));
    box-shadow: -20px 0 40px -16px rgba(15, 23, 42, 0.18);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1);
    overflow: hidden;
}

[data-bs-theme="dark"] .c2rt-event-drawer-panel {
    box-shadow: -24px 0 60px -16px rgba(0, 0, 0, 0.55);
}

.c2rt-event-drawer.is-open .c2rt-event-drawer-panel {
    transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
    .c2rt-event-drawer-panel,
    .c2rt-event-drawer-backdrop {
        transition: none;
    }
}

/* En-tete avec gradient brand de l'evenement, padding sere. */
.c2rt-event-drawer-header {
    position: relative;
    padding: 18px 22px 16px;
    color: #ffffff;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "icon headings";
    gap: 14px;
    align-items: center;
}

.c2rt-event-drawer-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 8px;
    color: #ffffff;
    cursor: pointer;
    transition: background 160ms ease, transform 160ms ease;
}

.c2rt-event-drawer-close:hover {
    background: rgba(255, 255, 255, 0.26);
    transform: scale(1.05);
}

.c2rt-event-drawer-close:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.6);
    outline-offset: 2px;
}

.c2rt-event-drawer-close svg {
    width: 16px;
    height: 16px;
}

.c2rt-event-drawer-icon {
    grid-area: icon;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    color: #ffffff;
}

.c2rt-event-drawer-icon svg {
    width: 100%;
    height: 100%;
}

/* Animation one-shot : ne se joue qu'a l'ouverture du drawer (quand
   la classe .is-open est ajoutee), puis se fige a la fin grace a
   animation-fill-mode: forwards. Lorsque le drawer se ferme et se
   reouvre, l'animation rejoue depuis le debut car la regle est
   reactivee via le selecteur .is-open. */
.c2rt-event-drawer.is-open .c2rt-event-drawer-icon svg {
    animation: c2rt-drawer-icon-spin 1.4s cubic-bezier(0.32, 0.72, 0, 1) 1 forwards;
}

.c2rt-event-drawer-icon-ring-outer {
    transform-origin: center;
}

.c2rt-event-drawer.is-open .c2rt-event-drawer-icon-ring-outer {
    animation: c2rt-drawer-icon-counter 1.4s cubic-bezier(0.32, 0.72, 0, 1) 1 forwards;
}

/* Spin rapide a l'ouverture : un seul tour complet. */
@keyframes c2rt-drawer-icon-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes c2rt-drawer-icon-counter {
    from { transform: rotate(0deg); }
    to   { transform: rotate(-360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .c2rt-event-drawer-icon svg,
    .c2rt-event-drawer-icon-ring-outer {
        animation: none;
    }
}

.c2rt-event-drawer-headings {
    grid-area: headings;
    min-width: 0;
}

.c2rt-event-drawer-eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 6px;
}

/* IMPORTANT : on monte la specificity (.c2rt-event-drawer .c2rt-event-drawer-headings h2)
   pour passer devant la regle EasyAdmin `body.ea h2 { color: var(--c2rt-ink-900) }`
   qui sinon ecrase notre blanc et rend le titre invisible sur l'entete colore. */
.c2rt-event-drawer .c2rt-event-drawer-headings h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
    color: #ffffff !important;
    word-wrap: break-word;
}

/* Titre de la section description : etiquette muted, on force la
   couleur pour passer devant body.ea h3 d'EasyAdmin. */
.c2rt-event-drawer .c2rt-event-drawer-description h3 {
    color: var(--text-muted, #64748b) !important;
}

[data-bs-theme="dark"] .c2rt-event-drawer .c2rt-event-drawer-description h3 {
    color: rgba(203, 213, 225, 0.78) !important;
}

/* Nom du module : prend la couleur primaire du texte. */
.c2rt-event-drawer .c2rt-event-drawer-module-name-wrap h3 {
    color: var(--text-primary, #0f172a) !important;
}

[data-bs-theme="dark"] .c2rt-event-drawer .c2rt-event-drawer-module-name-wrap h3 {
    color: var(--text-primary, #f1f5f9) !important;
}

/* Eyebrow row : "Categorie  ·  status chip" sur la meme ligne. */
.c2rt-event-drawer-eyebrow-row {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.c2rt-event-drawer-status-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.35);
}

.c2rt-event-drawer-status-chip[data-tone="live"] {
    background: rgba(34, 197, 94, 0.95);
    color: #ffffff;
    border-color: rgba(34, 197, 94, 1);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25), 0 0 8px rgba(34, 197, 94, 0.55);
}

.c2rt-event-drawer-status-chip[data-tone="past"] {
    background: rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.78);
    border-color: rgba(255, 255, 255, 0.22);
}

.c2rt-event-drawer-status-chip[data-tone="upcoming"] {
    background: rgba(255, 255, 255, 0.28);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.42);
}

/* Corps : padding plus sere, gap reduit pour que tout tienne sans
   scroll sur viewport standard. */
.c2rt-event-drawer-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Bande info compacte : date, heure, modalite inline. Pas de cartes
   distinctes - juste des items separes par des dots. */
.c2rt-event-drawer-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    padding: 12px 14px;
    background: var(--c2rt-surface-soft, var(--surface-1, #f8fafc));
    border: 1px solid var(--c2rt-border, var(--border, #e2e8f0));
    border-radius: 10px;
}

[data-bs-theme="dark"] .c2rt-event-drawer-info {
    background: var(--c2rt-surface-soft, #19253f);
    border-color: rgba(96, 165, 250, 0.16);
}

.c2rt-event-drawer-info-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-primary, #0f172a);
    line-height: 1.3;
}

[data-bs-theme="dark"] .c2rt-event-drawer-info-item {
    color: var(--text-primary, #f1f5f9);
}

.c2rt-event-drawer-info-item svg {
    width: 14px;
    height: 14px;
    color: var(--c2rt-blue-600, #2563eb);
    flex-shrink: 0;
}

[data-bs-theme="dark"] .c2rt-event-drawer-info-item svg {
    color: var(--c2rt-blue-300, #93c5fd);
}

/* Par defaut tous les `strong` de la bande info restent en
   graisse normale : date, heure, modalite ne doivent pas crier.
   Seul le lieu est mis en avant (bold) car c'est l'info la plus
   utile a reperer rapidement. */
.c2rt-event-drawer-info-item strong {
    font-weight: 500;
}

/* Lieu : SEUL element bold de la bande info. */
.c2rt-event-drawer-info-item strong[data-c2rt-event-lieu] {
    font-weight: 700;
    letter-spacing: -0.005em;
}

.c2rt-event-drawer-info-item em {
    font-style: normal;
    color: var(--text-muted, #64748b);
    font-size: 12px;
    font-weight: 400;
}

[data-bs-theme="dark"] .c2rt-event-drawer-info-item em {
    color: rgba(203, 213, 225, 0.78);
}

/* Modalite : on garde la teinte couleur (vert / cyan) pour la
   distinction visuelle, mais en graisse normale. */
.c2rt-event-drawer-info-item strong[data-tone="presentiel"] {
    color: #047857;
    font-weight: 500;
}
.c2rt-event-drawer-info-item strong[data-tone="distantiel"] {
    color: #0e7490;
    font-weight: 500;
}
[data-bs-theme="dark"] .c2rt-event-drawer-info-item strong[data-tone="presentiel"] {
    color: #6ee7b7;
}
[data-bs-theme="dark"] .c2rt-event-drawer-info-item strong[data-tone="distantiel"] {
    color: #67e8f9;
}

/* Section Module : carte compacte. Entete + barre + ligne d'heures
   inline. Pas de cartes individuelles pour chaque mesure. */
.c2rt-event-drawer-module {
    background: var(--c2rt-surface-soft, var(--surface-1, #f8fafc));
    border: 1px solid var(--c2rt-border, var(--border, #e2e8f0));
    border-radius: 10px;
    padding: 14px 16px 12px;
}

[data-bs-theme="dark"] .c2rt-event-drawer-module {
    background: var(--c2rt-surface-soft, #19253f);
    border-color: rgba(96, 165, 250, 0.16);
}

.c2rt-event-drawer-module-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.c2rt-event-drawer-module-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: var(--c2rt-blue-600, #2563eb);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55);
    flex-shrink: 0;
}

[data-bs-theme="dark"] .c2rt-event-drawer-module-dot {
    box-shadow: 0 0 0 3px rgba(15, 26, 46, 0.65);
}

.c2rt-event-drawer-module-name-wrap {
    flex: 1;
    min-width: 0;
}

.c2rt-event-drawer-module-name-wrap h3 {
    margin: 0;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--text-primary, #0f172a);
    letter-spacing: -0.005em;
}

[data-bs-theme="dark"] .c2rt-event-drawer-module-name-wrap h3 {
    color: var(--text-primary, #f1f5f9);
}

.c2rt-event-drawer-module-meta {
    display: block;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-muted, #64748b);
    margin-top: 1px;
}

[data-bs-theme="dark"] .c2rt-event-drawer-module-meta {
    color: rgba(203, 213, 225, 0.80);
}

/* Barre de progression : 14px haute, fine. Le label % est centre
   ABSOLU sur la barre, en graisse legere. On utilise mix-blend-mode:
   difference pour que le texte s'inverse automatiquement selon la
   couleur sous-jacente (blanc sur fond fonce / fonce sur fond clair) :
   plus de probleme de contraste quel que soit le % de remplissage. */
.c2rt-event-drawer-module-progress {
    position: relative;
    height: 14px;
    background: var(--c2rt-border, #dee5ef);
    border-radius: 999px;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.08);
}

[data-bs-theme="dark"] .c2rt-event-drawer-module-progress {
    background: rgba(148, 163, 184, 0.16);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.30);
}

.c2rt-event-drawer-module-progress-fill {
    position: relative;
    height: 100%;
    border-radius: 999px;
    background: var(--c2rt-blue-600, #2563eb);
    transition: width 700ms cubic-bezier(0.32, 0.72, 0, 1);
    overflow: hidden;
}

/* Label % centre sur la barre. Couleur en fonction du theme :
   clair = texte fonce + halo blanc, sombre = texte blanc + halo noir. */
.c2rt-event-drawer-module-progress-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.02em;
    pointer-events: none;
    z-index: 2;
    line-height: 1;
    white-space: nowrap;
    color: rgba(15, 23, 42, 0.92);
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.55);
}

[data-bs-theme="dark"] .c2rt-event-drawer-module-progress-label {
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

/* Shine : bande lumineuse qui traverse la barre une fois. */
.c2rt-event-drawer-module-progress-shine {
    position: absolute;
    top: 0;
    left: -40%;
    width: 40%;
    height: 100%;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.55) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    border-radius: 999px;
}

.c2rt-event-drawer.is-open .c2rt-event-drawer-module-progress-shine {
    animation: c2rt-drawer-progress-shine 1.8s ease-in-out 0.6s 1 forwards;
}

@keyframes c2rt-drawer-progress-shine {
    0%   { left: -40%; opacity: 0; }
    20%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { left: 100%; opacity: 0; }
}

/* Ligne d'heures inline (Ecoulees · Total · Restantes), sans cartes. */
.c2rt-event-drawer-module-hours {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin-top: 10px;
    font-size: 12.5px;
    color: var(--text-primary, #0f172a);
}

[data-bs-theme="dark"] .c2rt-event-drawer-module-hours {
    color: var(--text-primary, #f1f5f9);
}

.c2rt-event-drawer-module-hours em {
    font-style: normal;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted, #64748b);
    font-weight: 600;
}

[data-bs-theme="dark"] .c2rt-event-drawer-module-hours em {
    color: rgba(203, 213, 225, 0.78);
}

.c2rt-event-drawer-module-hours strong {
    font-weight: 700;
}

.c2rt-event-drawer-module-hours-sep {
    color: var(--text-muted, #64748b);
    opacity: 0.5;
    margin: 0 2px;
}

.c2rt-event-drawer-module-formation {
    margin-top: 12px;
    font-size: 12px;
    color: var(--text-secondary, #475569);
    font-weight: 500;
}

[data-bs-theme="dark"] .c2rt-event-drawer-module-formation {
    color: var(--text-secondary, #cbd5e1);
}

/* Quick links : compacts, 1 par ligne, icone gauche + chevron */
.c2rt-event-drawer-quicklinks {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.c2rt-event-drawer-quicklink {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--c2rt-surface, #ffffff);
    border: 1px solid var(--c2rt-border, #dee5ef);
    border-radius: 8px;
    color: var(--text-primary, #0f172a);
    font-size: 12.5px;
    font-weight: 500;
    text-decoration: none;
    text-align: left;
    cursor: pointer;
    transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
    width: 100%;
}

.c2rt-event-drawer-quicklink:hover {
    border-color: var(--c2rt-blue-400, #60a5fa);
    background: rgba(37, 99, 235, 0.04);
    transform: translateY(-1px);
}

.c2rt-event-drawer-quicklink svg {
    width: 16px;
    height: 16px;
    color: var(--c2rt-blue-600, #2563eb);
    flex-shrink: 0;
}

.c2rt-event-drawer-quicklink span {
    flex: 1;
}

.c2rt-event-drawer-quicklink-chevron {
    color: var(--text-muted, #64748b) !important;
    transition: transform 160ms ease;
}

.c2rt-event-drawer-quicklink:hover .c2rt-event-drawer-quicklink-chevron {
    transform: translateX(2px);
    color: var(--c2rt-blue-600, #2563eb) !important;
}

[data-bs-theme="dark"] .c2rt-event-drawer-quicklink {
    background: var(--c2rt-surface, #233358);
    border-color: rgba(96, 165, 250, 0.16);
    color: var(--text-primary, #f1f5f9);
}

[data-bs-theme="dark"] .c2rt-event-drawer-quicklink:hover {
    border-color: var(--c2rt-blue-400, #60a5fa);
    background: rgba(96, 165, 250, 0.10);
}

[data-bs-theme="dark"] .c2rt-event-drawer-quicklink svg {
    color: var(--c2rt-blue-300, #93c5fd);
}

/* Raccourcis clavier en bas du footer */
.c2rt-event-drawer-shortcuts {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 8px;
    font-size: 11px;
    color: var(--text-muted, #64748b);
}

.c2rt-event-drawer-shortcuts kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    padding: 1px 5px;
    background: var(--c2rt-surface, #ffffff);
    border: 1px solid var(--c2rt-border, #dee5ef);
    border-bottom-width: 2px;
    border-radius: 4px;
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-secondary, #475569);
    margin: 0 2px;
}

[data-bs-theme="dark"] .c2rt-event-drawer-shortcuts kbd {
    background: var(--c2rt-surface-soft, #19253f);
    border-color: rgba(96, 165, 250, 0.20);
    color: var(--text-secondary, #cbd5e1);
}

.c2rt-event-drawer-shortcuts-sep {
    opacity: 0.5;
}

/* Modality chip dans le drawer (quickstat) : pastille couleur selon
   le mode (vert presentiel / cyan distantiel). */
[data-c2rt-event-modality][data-tone="presentiel"] {
    display: inline-block;
    padding: 2px 9px;
    background: rgba(16, 185, 129, 0.14);
    color: #047857;
    border-radius: 999px;
    font-weight: 600;
    font-size: 12.5px;
}

[data-c2rt-event-modality][data-tone="distantiel"] {
    display: inline-block;
    padding: 2px 9px;
    background: rgba(8, 145, 178, 0.14);
    color: #0e7490;
    border-radius: 999px;
    font-weight: 600;
    font-size: 12.5px;
}

[data-bs-theme="dark"] [data-c2rt-event-modality][data-tone="presentiel"] {
    background: rgba(16, 185, 129, 0.20);
    color: #6ee7b7;
}

[data-bs-theme="dark"] [data-c2rt-event-modality][data-tone="distantiel"] {
    background: rgba(8, 145, 178, 0.22);
    color: #67e8f9;
}

.c2rt-event-drawer-description {
    /* Pas de marge interne supplementaire : le parent gap: 16px
       gere l'espace entre sections. */
}

.c2rt-event-drawer-description h3 {
    margin: 0 0 6px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted, #64748b);
}

[data-bs-theme="dark"] .c2rt-event-drawer-description h3 {
    color: rgba(203, 213, 225, 0.78);
}

.c2rt-event-drawer-description p {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-primary, #0f172a);
}

.c2rt-event-drawer-description p + p {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--c2rt-border, #e2e8f0);
}

[data-bs-theme="dark"] .c2rt-event-drawer-description p + p {
    border-top-color: rgba(148, 163, 184, 0.22);
}

/* Le premier paragraphe (lead) merite un visuel un peu plus
   marquant : leger poids semibold et couleur primaire pleine,
   pour servir d'accroche au texte. */
.c2rt-event-drawer-description p.c2rt-event-drawer-desc-lead {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-primary, #0f172a);
}

[data-bs-theme="dark"] .c2rt-event-drawer-description p {
    color: rgba(241, 245, 249, 0.92);
}

[data-bs-theme="dark"] .c2rt-event-drawer-description p.c2rt-event-drawer-desc-lead {
    color: var(--text-primary, #f1f5f9);
}

/* Pied : actions, padding sere */
.c2rt-event-drawer-footer {
    flex-shrink: 0;
    padding: 14px 22px 16px;
    border-top: 1px solid var(--c2rt-border, var(--border, #e2e8f0));
    background: var(--c2rt-surface-soft, var(--surface-1, #f8fafc));
    display: flex;
    flex-direction: column;
    gap: 8px;
}

[data-bs-theme="dark"] .c2rt-event-drawer-footer {
    background: var(--c2rt-surface-soft, #19253f);
}

.c2rt-event-drawer-actions-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.c2rt-event-drawer-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 8px;
    font-family: var(--c2rt-font, system-ui);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.c2rt-event-drawer-btn svg {
    width: 16px;
    height: 16px;
}

.c2rt-event-drawer-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.20);
}

/* PRIMARY : fond brand plein, hover plus fonce + lift + glow. */
.c2rt-event-drawer-btn--primary {
    background: var(--c2rt-blue-600, #2563eb);
    color: #ffffff;
    width: 100%;
    box-shadow: 0 2px 6px -2px rgba(37, 99, 235, 0.32);
}

.c2rt-event-drawer-btn--primary:hover {
    background: var(--c2rt-blue-700, #1d4ed8);
    transform: translateY(-1px);
    box-shadow: 0 10px 24px -8px rgba(37, 99, 235, 0.55);
}

.c2rt-event-drawer-btn--primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px -2px rgba(37, 99, 235, 0.32);
}

[data-bs-theme="dark"] .c2rt-event-drawer-btn--primary {
    background: var(--c2rt-blue-500, #3b82f6);
    box-shadow: 0 2px 8px -2px rgba(59, 130, 246, 0.42);
}

[data-bs-theme="dark"] .c2rt-event-drawer-btn--primary:hover {
    background: var(--c2rt-blue-400, #60a5fa);
    box-shadow: 0 10px 24px -8px rgba(96, 165, 250, 0.55);
}

/* SECONDARY (Modifier) : surface, hover = teinte brand 12%. */
.c2rt-event-drawer-btn--secondary {
    background: var(--c2rt-surface, #ffffff);
    color: var(--c2rt-blue-700, #1d4ed8);
    border-color: var(--c2rt-border, #dee5ef);
}

.c2rt-event-drawer-btn--secondary:hover {
    background: rgba(37, 99, 235, 0.12);
    border-color: var(--c2rt-blue-500, #2563eb);
    color: var(--c2rt-blue-800, #1e40af);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px -8px rgba(37, 99, 235, 0.35);
}

.c2rt-event-drawer-btn--secondary:active {
    transform: translateY(0);
    background: rgba(37, 99, 235, 0.18);
}

[data-bs-theme="dark"] .c2rt-event-drawer-btn--secondary {
    background: var(--c2rt-surface, #233358);
    color: var(--c2rt-blue-300, #93c5fd);
    border-color: rgba(96, 165, 250, 0.30);
}

[data-bs-theme="dark"] .c2rt-event-drawer-btn--secondary:hover {
    background: rgba(96, 165, 250, 0.20);
    border-color: var(--c2rt-blue-400, #60a5fa);
    color: var(--c2rt-blue-200, #bfdbfe);
    box-shadow: 0 6px 16px -8px rgba(96, 165, 250, 0.40);
}

[data-bs-theme="dark"] .c2rt-event-drawer-btn--secondary:active {
    background: rgba(96, 165, 250, 0.28);
}

/* DANGER (Supprimer) : surface, hover = teinte rouge 14%. */
.c2rt-event-drawer-btn--danger {
    background: var(--c2rt-surface, #ffffff);
    color: #b91c1c;
    border-color: rgba(220, 38, 38, 0.30);
}

.c2rt-event-drawer-btn--danger:hover {
    background: rgba(220, 38, 38, 0.14);
    border-color: rgba(220, 38, 38, 0.65);
    color: #991b1b;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px -8px rgba(220, 38, 38, 0.40);
}

.c2rt-event-drawer-btn--danger:active {
    transform: translateY(0);
    background: rgba(220, 38, 38, 0.22);
}

[data-bs-theme="dark"] .c2rt-event-drawer-btn--danger {
    background: var(--c2rt-surface, #233358);
    color: #fca5a5;
    border-color: rgba(248, 113, 113, 0.34);
}

[data-bs-theme="dark"] .c2rt-event-drawer-btn--danger:hover {
    background: rgba(248, 113, 113, 0.22);
    border-color: rgba(248, 113, 113, 0.65);
    color: #fecaca;
    box-shadow: 0 6px 16px -8px rgba(248, 113, 113, 0.45);
}

[data-bs-theme="dark"] .c2rt-event-drawer-btn--danger:active {
    background: rgba(248, 113, 113, 0.30);
}

/* Etat "arme" du bouton supprimer : 3 secondes ou le label affiche
   "Confirmer la suppression" et le bouton est plein danger. */
.c2rt-event-drawer-btn--danger.is-armed {
    background: #b91c1c;
    color: #ffffff;
    border-color: #991b1b;
    animation: c2rt-drawer-armed-pulse 0.6s ease-out;
}

[data-bs-theme="dark"] .c2rt-event-drawer-btn--danger.is-armed {
    background: #dc2626;
    color: #ffffff;
    border-color: #ef4444;
}

@keyframes c2rt-drawer-armed-pulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.04); }
    100% { transform: scale(1); }
}

/* ============================================================
   Boutons icon-only : variante compacte des actions du drawer.
   Modifier / Verrouiller / Dupliquer / Supprimer s'affichent
   comme des icones carrees avec tooltip natif au survol. Plus
   pro qu'une rangee de boutons larges et libere de la place
   verticale dans le drawer. Pattern Linear / Notion / Things.
   ============================================================ */

.c2rt-event-drawer-actions-row--icons {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px;
    background: var(--c2rt-surface-soft, #f1f5f9);
    border: 1px solid var(--c2rt-border, #dee5ef);
    border-radius: 10px;
    width: max-content;
    align-self: flex-start;
}

[data-bs-theme="dark"] .c2rt-event-drawer-actions-row--icons {
    background: rgba(15, 26, 46, 0.55);
    border-color: rgba(148, 163, 184, 0.22);
}

/* Variante "header" (depreciee : icones desormais dans la section
   module) : gardee comme fallback si du markup historique l'utilise.
   Fond translucide blanc qui passe au-dessus du gradient. */
.c2rt-event-drawer-actions-row--header {
    margin-top: 12px;
    padding: 4px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 12px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Variante "inline" : icones compactes ancrees a droite de la barre
   de progression dans la section module. Pas de fond visible, juste
   des boutons d'action discrets qui suivent la ligne du progress bar. */
.c2rt-event-drawer-actions-row--inline {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.c2rt-event-drawer-icon-btn--compact {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    color: var(--text-muted, #64748b);
    background: var(--c2rt-surface-soft, #f1f5f9);
    border: 1px solid var(--c2rt-border, #dee5ef);
}

.c2rt-event-drawer-icon-btn--compact svg {
    width: 14px;
    height: 14px;
}

.c2rt-event-drawer-icon-btn--compact:hover {
    background: var(--c2rt-surface, #ffffff);
    color: var(--c2rt-blue-700, #1d4ed8);
    border-color: rgba(37, 99, 235, 0.35);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px -2px rgba(15, 23, 42, 0.18);
}

[data-bs-theme="dark"] .c2rt-event-drawer-icon-btn--compact {
    background: rgba(15, 26, 46, 0.55);
    border-color: rgba(148, 163, 184, 0.22);
    color: rgba(226, 232, 240, 0.78);
}

[data-bs-theme="dark"] .c2rt-event-drawer-icon-btn--compact:hover {
    background: rgba(96, 165, 250, 0.18);
    color: #dbeafe;
    border-color: rgba(96, 165, 250, 0.55);
}

.c2rt-event-drawer-icon-btn--compact.c2rt-event-drawer-icon-btn--danger:hover {
    background: rgba(220, 38, 38, 0.10);
    color: #b91c1c;
    border-color: rgba(220, 38, 38, 0.45);
}

[data-bs-theme="dark"] .c2rt-event-drawer-icon-btn--compact.c2rt-event-drawer-icon-btn--danger:hover {
    background: rgba(248, 113, 113, 0.20);
    color: #fca5a5;
    border-color: rgba(248, 113, 113, 0.55);
}

.c2rt-event-drawer-icon-btn--compact.c2rt-event-drawer-icon-btn--toggle[data-locked="1"] {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.20) 0%, rgba(37, 99, 235, 0.18) 100%);
    color: var(--c2rt-cyan-700, #0e7490);
    border-color: rgba(6, 182, 212, 0.55);
}

[data-bs-theme="dark"] .c2rt-event-drawer-icon-btn--compact.c2rt-event-drawer-icon-btn--toggle[data-locked="1"] {
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.30) 0%, rgba(96, 165, 250, 0.28) 100%);
    color: #a5f3fc;
    border-color: rgba(34, 211, 238, 0.65);
}

/* Le module-header passe en flex pour pouvoir caler la barre d'actions
   tout a droite (apres le name-wrap qui prend flex:1). */
.c2rt-event-drawer-module-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.c2rt-event-drawer-module-header .c2rt-event-drawer-module-name-wrap {
    flex: 1;
    min-width: 0;
}

/* La barre d'actions inline ne pousse plus la barre de progression :
   elle prend juste ce qu'il faut a droite du nom de module. */
.c2rt-event-drawer-actions-row--inline {
    margin-left: auto;
}

/* Slide-in cascade des icones quand le drawer s'ouvre. Adapte a la
   nouvelle position (inline a droite de la progress bar). */
.c2rt-event-drawer.is-just-opened .c2rt-event-drawer-actions-row--inline .c2rt-event-drawer-icon-btn {
    opacity: 0;
    animation: c2rt-drawer-action-slide-in 340ms cubic-bezier(0.32, 0.72, 0.34, 1.16) forwards;
}

.c2rt-event-drawer.is-just-opened .c2rt-event-drawer-actions-row--inline .c2rt-event-drawer-icon-btn:nth-child(1) { animation-delay: 80ms; }
.c2rt-event-drawer.is-just-opened .c2rt-event-drawer-actions-row--inline .c2rt-event-drawer-icon-btn:nth-child(2) { animation-delay: 150ms; }
.c2rt-event-drawer.is-just-opened .c2rt-event-drawer-actions-row--inline .c2rt-event-drawer-icon-btn:nth-child(3) { animation-delay: 220ms; }
.c2rt-event-drawer.is-just-opened .c2rt-event-drawer-actions-row--inline .c2rt-event-drawer-icon-btn:nth-child(4) { animation-delay: 290ms; }

[data-bs-theme="dark"] .c2rt-event-drawer-actions-row--header {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.22);
}

.c2rt-event-drawer-icon-btn--glass {
    color: rgba(255, 255, 255, 0.92);
}

.c2rt-event-drawer-icon-btn--glass:hover {
    background: rgba(255, 255, 255, 0.26);
    color: #ffffff;
    box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.25);
    transform: translateY(-1px);
}

.c2rt-event-drawer-icon-btn--glass:active {
    transform: translateY(0);
    background: rgba(255, 255, 255, 0.32);
}

.c2rt-event-drawer-icon-btn--glass:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.65);
}

/* Variante toggle dans l'entete (verrouillage actif) : sur le fond
   colore on bascule en blanc plein et on assombrit l'icone pour
   rester lisible. */
.c2rt-event-drawer-icon-btn--glass.c2rt-event-drawer-icon-btn--toggle[data-locked="1"] {
    background: rgba(255, 255, 255, 0.92);
    color: var(--c2rt-cyan-700, #0e7490);
    box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.30);
}

.c2rt-event-drawer-icon-btn--glass.c2rt-event-drawer-icon-btn--toggle[data-locked="1"]:hover {
    background: #ffffff;
    color: #0c5e76;
}

/* Variante danger dans l'entete : reste blanche en defaut, devient
   rouge plein au hover pour signaler la destruction. */
.c2rt-event-drawer-icon-btn--glass.c2rt-event-drawer-icon-btn--danger:hover {
    background: rgba(220, 38, 38, 0.85);
    color: #ffffff;
}

.c2rt-event-drawer-icon-btn--glass.c2rt-event-drawer-icon-btn--danger.is-armed {
    background: #dc2626;
    color: #ffffff;
    animation: c2rt-drawer-armed-pulse 0.6s ease-out;
}

/* Animation d'entree des icones : slide depuis la gauche avec
   stagger pour donner du rythme a l'ouverture du drawer.
   Activee une fois (is-just-opened applique en JS puis retire
   apres 700 ms). */
@keyframes c2rt-drawer-action-slide-in {
    from {
        opacity: 0;
        transform: translateX(-14px) scale(0.92);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

.c2rt-event-drawer.is-just-opened .c2rt-event-drawer-actions-row--header .c2rt-event-drawer-icon-btn {
    opacity: 0;
    animation: c2rt-drawer-action-slide-in 340ms cubic-bezier(0.32, 0.72, 0.34, 1.16) forwards;
}

.c2rt-event-drawer.is-just-opened .c2rt-event-drawer-actions-row--header .c2rt-event-drawer-icon-btn:nth-child(1) { animation-delay: 80ms; }
.c2rt-event-drawer.is-just-opened .c2rt-event-drawer-actions-row--header .c2rt-event-drawer-icon-btn:nth-child(2) { animation-delay: 150ms; }
.c2rt-event-drawer.is-just-opened .c2rt-event-drawer-actions-row--header .c2rt-event-drawer-icon-btn:nth-child(3) { animation-delay: 220ms; }
.c2rt-event-drawer.is-just-opened .c2rt-event-drawer-actions-row--header .c2rt-event-drawer-icon-btn:nth-child(4) { animation-delay: 290ms; }

/* Le container lui-meme s'estompe doucement aussi, pour eviter que
   le rectangle vide apparaisse avant les icones. */
.c2rt-event-drawer.is-just-opened .c2rt-event-drawer-actions-row--header {
    opacity: 0;
    animation: c2rt-drawer-action-slide-in 320ms ease-out 40ms forwards;
}

.c2rt-event-drawer-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 7px;
    color: var(--text-muted, #64748b);
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease, transform 140ms ease;
    text-decoration: none;
}

.c2rt-event-drawer-icon-btn:hover {
    background: var(--c2rt-surface, #ffffff);
    color: var(--c2rt-blue-700, #1d4ed8);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.08);
}

.c2rt-event-drawer-icon-btn:active {
    transform: translateY(0);
}

.c2rt-event-drawer-icon-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--c2rt-blue-500, #3b82f6);
}

[data-bs-theme="dark"] .c2rt-event-drawer-icon-btn {
    color: rgba(226, 232, 240, 0.78);
}

[data-bs-theme="dark"] .c2rt-event-drawer-icon-btn:hover {
    background: rgba(96, 165, 250, 0.18);
    color: #dbeafe;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
}

.c2rt-event-drawer-icon-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Variante danger : icone rouge au hover. */
.c2rt-event-drawer-icon-btn--danger:hover {
    background: rgba(220, 38, 38, 0.12);
    color: #b91c1c;
    box-shadow: 0 2px 6px -2px rgba(220, 38, 38, 0.30);
}

[data-bs-theme="dark"] .c2rt-event-drawer-icon-btn--danger:hover {
    background: rgba(248, 113, 113, 0.20);
    color: #fca5a5;
}

/* Etat "arme" du bouton supprimer : 3 secondes ou il devient
   solide rouge + leger pulse pour signaler le 2e clic destructif. */
.c2rt-event-drawer-icon-btn--danger.is-armed {
    background: #b91c1c;
    color: #ffffff;
    animation: c2rt-drawer-armed-pulse 0.6s ease-out;
}

[data-bs-theme="dark"] .c2rt-event-drawer-icon-btn--danger.is-armed {
    background: #dc2626;
    color: #ffffff;
}

/* Variante toggle : etat actif quand verrouille (cyan brand). */
.c2rt-event-drawer-icon-btn--toggle .c2rt-event-drawer-lock-icon-closed {
    display: none;
}

.c2rt-event-drawer-icon-btn--toggle[data-locked="1"] .c2rt-event-drawer-lock-icon-open {
    display: none;
}

.c2rt-event-drawer-icon-btn--toggle[data-locked="1"] .c2rt-event-drawer-lock-icon-closed {
    display: inline-block;
}

.c2rt-event-drawer-icon-btn--toggle[data-locked="1"] {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.18) 0%, rgba(37, 99, 235, 0.14) 100%);
    color: var(--c2rt-cyan-700, #0e7490);
}

.c2rt-event-drawer-icon-btn--toggle[data-locked="1"]:hover {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.28) 0%, rgba(37, 99, 235, 0.22) 100%);
    color: #0c5e76;
}

[data-bs-theme="dark"] .c2rt-event-drawer-icon-btn--toggle[data-locked="1"] {
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.24) 0%, rgba(96, 165, 250, 0.22) 100%);
    color: #a5f3fc;
}

[data-bs-theme="dark"] .c2rt-event-drawer-icon-btn--toggle[data-locked="1"]:hover {
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.34) 0%, rgba(96, 165, 250, 0.30) 100%);
    color: #cffafe;
}

/* Helper visually-hidden pour les labels readers-only */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Bouton "Supprimer toute la sequence" : tertiaire, danger discret */
.c2rt-event-drawer-module-delete {
    background: transparent;
    border: none;
    color: var(--text-muted, #64748b);
    font-size: 12px;
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: rgba(220, 38, 38, 0.30);
    text-underline-offset: 3px;
    cursor: pointer;
    padding: 4px 8px;
    align-self: center;
    margin-top: 4px;
    border-radius: 6px;
    transition: color 160ms ease;
}

.c2rt-event-drawer-module-delete:hover {
    color: #b91c1c;
    text-decoration-color: #b91c1c;
}

.c2rt-event-drawer-module-delete:focus-visible {
    outline: 2px solid rgba(220, 38, 38, 0.40);
    outline-offset: 2px;
}

/* Verrouille le scroll du body quand le drawer est ouvert */
body.c2rt-drawer-open {
    overflow: hidden;
}

/* Responsive : full-width sur mobile + quickstats en pile */
@media (max-width: 640px) {
    .c2rt-event-drawer-panel {
        width: 100vw;
        border-left: none;
    }
    .c2rt-event-drawer-actions-row {
        grid-template-columns: 1fr;
    }
    .c2rt-event-drawer-quickstats {
        grid-template-columns: 1fr;
    }
}

/* Sur ecran intermediaire on garde 2 colonnes pour quickstats */
@media (max-width: 880px) and (min-width: 641px) {
    .c2rt-event-drawer-quickstats {
        grid-template-columns: 1fr 1fr;
    }
}

/* ============================================================
   Toast Undo (bas-droite) : pour annuler une suppression
   pendant 8 secondes. Differencie du c2rt-toast classique
   par sa structure (texte + bouton Annuler).
   ============================================================ */

.c2rt-undo-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px 12px 20px;
    background: var(--c2rt-surface, #ffffff);
    border: 1px solid var(--c2rt-border, #dee5ef);
    border-radius: 12px;
    box-shadow: 0 16px 40px -12px rgba(15, 23, 42, 0.22);
    font-family: var(--c2rt-font, system-ui);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 220ms ease, transform 220ms ease;
    max-width: min(420px, calc(100vw - 48px));
}

.c2rt-undo-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

[data-bs-theme="dark"] .c2rt-undo-toast {
    background: var(--c2rt-surface, #233358);
    border-color: rgba(96, 165, 250, 0.18);
    box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.55);
}

.c2rt-undo-toast-text {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary, #0f172a);
}

.c2rt-undo-toast-btn {
    background: var(--c2rt-blue-600, #2563eb);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 6px 14px;
    font-family: var(--c2rt-font, system-ui);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 160ms ease, transform 160ms ease;
}

.c2rt-undo-toast-btn:hover {
    background: var(--c2rt-blue-700, #1d4ed8);
    transform: translateY(-1px);
}

.c2rt-undo-toast-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.30);
}

[data-bs-theme="dark"] .c2rt-undo-toast-btn {
    background: var(--c2rt-blue-500, #3b82f6);
}

[data-bs-theme="dark"] .c2rt-undo-toast-btn:hover {
    background: var(--c2rt-blue-400, #60a5fa);
}

/* ============================================================
   Bouton fantome (toggle verrouillage) dans la barre d'actions
   du drawer. Plus discret que primary / secondary / danger : on
   ne veut pas qu'il "crie" a cote de Modifier / Supprimer, mais
   on veut un etat actif tres clair quand le creneau est verrouille.
   ============================================================ */

.c2rt-event-drawer-btn--ghost {
    background: transparent;
    color: var(--text-muted, #64748b);
    border-color: var(--c2rt-border, #dee5ef);
}

.c2rt-event-drawer-btn--ghost:hover {
    background: rgba(37, 99, 235, 0.08);
    border-color: rgba(37, 99, 235, 0.35);
    color: var(--c2rt-blue-700, #1d4ed8);
    transform: translateY(-1px);
}

.c2rt-event-drawer-btn--ghost:active {
    transform: translateY(0);
    background: rgba(37, 99, 235, 0.14);
}

[data-bs-theme="dark"] .c2rt-event-drawer-btn--ghost {
    color: rgba(226, 232, 240, 0.78);
    border-color: rgba(148, 163, 184, 0.30);
}

[data-bs-theme="dark"] .c2rt-event-drawer-btn--ghost:hover {
    background: rgba(96, 165, 250, 0.16);
    border-color: rgba(96, 165, 250, 0.50);
    color: #dbeafe;
}

[data-bs-theme="dark"] .c2rt-event-drawer-btn--ghost:active {
    background: rgba(96, 165, 250, 0.24);
}

/* Variante "toggle" : par defaut on n'affiche que l'icone cadenas
   ouvert ; quand data-locked=1, on inverse pour montrer le cadenas
   ferme et on passe en etat actif (fond cyan tres doux, texte
   brand). Permet une reconnaissance immediate de l'etat sans avoir
   a lire le label. */
.c2rt-event-drawer-btn--toggle .c2rt-event-drawer-lock-icon-closed {
    display: none;
}

.c2rt-event-drawer-btn--toggle[data-locked="1"] .c2rt-event-drawer-lock-icon-open {
    display: none;
}

.c2rt-event-drawer-btn--toggle[data-locked="1"] .c2rt-event-drawer-lock-icon-closed {
    display: inline-block;
}

.c2rt-event-drawer-btn--toggle[data-locked="1"] {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.12) 0%, rgba(37, 99, 235, 0.10) 100%);
    border-color: rgba(6, 182, 212, 0.45);
    color: var(--c2rt-cyan-700, #0e7490);
}

.c2rt-event-drawer-btn--toggle[data-locked="1"]:hover {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.20) 0%, rgba(37, 99, 235, 0.16) 100%);
    border-color: rgba(6, 182, 212, 0.70);
    color: #0c5e76;
}

[data-bs-theme="dark"] .c2rt-event-drawer-btn--toggle[data-locked="1"] {
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.18) 0%, rgba(96, 165, 250, 0.16) 100%);
    border-color: rgba(34, 211, 238, 0.55);
    color: #a5f3fc;
}

[data-bs-theme="dark"] .c2rt-event-drawer-btn--toggle[data-locked="1"]:hover {
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.28) 0%, rgba(96, 165, 250, 0.24) 100%);
    border-color: rgba(34, 211, 238, 0.75);
    color: #cffafe;
}

/* ============================================================
   Bandeau d'aide pour le drag-drop : apparait pendant un drag
   sur une pillule de creneau pour rappeler le modificateur Shift
   (deplacement individuel vs deplacement du module entier).
   Reste invisible le reste du temps. Pattern proche de Linear
   ou Notion qui affichent une barre d'aide contextuelle.
   ============================================================ */

.c2rt-drag-hint {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translate(-50%, 16px);
    z-index: 9998;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px;
    background: rgba(15, 23, 42, 0.92);
    color: #f1f5f9;
    border-radius: 999px;
    font-family: var(--c2rt-font, system-ui);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.01em;
    box-shadow: 0 18px 36px -16px rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease, transform 180ms ease;
}

body[data-c2rt-dragging-creneau] .c2rt-drag-hint {
    opacity: 1;
    transform: translate(-50%, 0);
}

.c2rt-drag-hint kbd {
    display: inline-block;
    padding: 2px 8px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 6px;
    font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    font-weight: 600;
    color: #ffffff;
}

.c2rt-drag-hint-arrow {
    color: rgba(255, 255, 255, 0.60);
    margin: 0 2px;
}

.c2rt-drag-hint-kbd-group {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.c2rt-drag-hint-text-strong {
    color: #ffffff;
    font-weight: 600;
}

.c2rt-drag-hint-text {
    color: rgba(241, 245, 249, 0.74);
    font-weight: 400;
}

.c2rt-drag-hint-sep {
    color: rgba(255, 255, 255, 0.30);
}

/* Effet visuel pendant le drag : le calendrier se "calme" pour que
   les pillules se detachent. La carte derriere s'attenue legerement
   et le curseur passe en grabbing. */
body[data-c2rt-dragging-creneau] {
    cursor: grabbing;
}

body[data-c2rt-dragging-creneau] .c2rt-schedule-x {
    /* Subtle attenuation : pas trop sinon on perd les reperes
       pendant qu'on positionne. */
    --c2rt-drag-overlay: rgba(15, 23, 42, 0.02);
}

/* ============================================================
   Cocarde cadenas sur les pillules de creneau verrouillees.
   Petit indicateur dans le coin haut-gauche, suffisamment
   discret pour ne pas surcharger les pillules mais visible
   d'un coup d'oeil quand l'utilisateur scrute le calendrier
   pour reperer ce qui est epingle.
   ============================================================ */

.sx__event[data-locked="1"]::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 4px;
    width: 11px;
    height: 11px;
    background-color: currentColor;
    /* Cadenas ferme en mask SVG inline. currentColor herite de
       la couleur du chip ce qui garantit un contraste correct
       quel que soit le module. */
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='5' y='11' width='14' height='10' rx='2' fill='black'/><path d='M8 11V7a4 4 0 0 1 8 0v4' fill='none' stroke='black' stroke-width='2'/></svg>") center / contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='5' y='11' width='14' height='10' rx='2' fill='black'/><path d='M8 11V7a4 4 0 0 1 8 0v4' fill='none' stroke='black' stroke-width='2'/></svg>") center / contain no-repeat;
    opacity: 0.85;
    pointer-events: none;
    z-index: 2;
}

/* Garantit que le ::before (cadenas) s'ancre bien : on a besoin d'un
   contexte de positionnement sur la pilule.
   CRITIQUE : on limite cette regle aux vues mois et month-agenda. En
   vues Semaine / Jour, Schedule-X positionne les pilules en
   `position: absolute` avec top/height en pourcentage de la colonne
   du jour ; appliquer `position: relative` casse cette logique et
   les creneaux apparaissent decales (un 13:00-17:00 finit a 16h30+). */
.c2rt-schedule-x .sx__month-grid-day .sx__event,
.c2rt-schedule-x .sx__month-agenda-event,
.c2rt-schedule-x .sx__date-grid-event { position: relative; }

/* ============================================================
   Animations des pillules d'evenements.

   On lisse les transitions provoquees par les refresh apres un
   drag-drop (Schedule-X demonte et remonte les pillules a chaque
   update du dataset). Sans cette anim, les events "clignotent" :
   ils disparaissent puis reapparaissent abruptement.

   c2rt-event-enter joue a chaque montage (initial + post-drop).
   La courbe cubic-bezier choisie est volontairement courte pour
   ne pas plomber le rendu d'un mois plein (12 modules * N events).
   ============================================================ */

@keyframes c2rt-event-enter {
    from {
        opacity: 0;
        transform: translateY(2px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.sx__event {
    animation: c2rt-event-enter 220ms cubic-bezier(0.32, 0.72, 0.34, 1.16) both;
}

/* Pulse "vient d'etre deplace" : applique 800 ms a la pillule qui
   a ete deplacee par drag-drop, pour confirmer visuellement l'action.
   Ring brand cyan qui s'estompe vers transparent. */
@keyframes c2rt-event-just-moved {
    0%   { box-shadow: 0 0 0 0 rgba(6, 182, 212, 0.85); transform: scale(1); }
    35%  { box-shadow: 0 0 0 6px rgba(6, 182, 212, 0.55); transform: scale(1.04); }
    100% { box-shadow: 0 0 0 14px rgba(6, 182, 212, 0); transform: scale(1); }
}

.sx__event.is-just-moved {
    animation:
        c2rt-event-enter 220ms cubic-bezier(0.32, 0.72, 0.34, 1.16) both,
        c2rt-event-just-moved 800ms ease-out 220ms both;
    z-index: 5;
}

/* Curseur : on signale au survol qu'on peut "saisir" un creneau
   (non applicable aux feries / periodes qui ne sont pas draggables). */
.sx__event[data-modality] {
    cursor: grab;
}

.sx__event[data-modality]:active {
    cursor: grabbing;
}

/* Pendant qu'on drag, on attenue legerement les pillules non-droppees
   pour mettre en evidence celle qu'on manipule. Pillules-feries restent
   a pleine opacite pour rappeler leur statut intouchable. */
body[data-c2rt-dragging-creneau] .sx__event[data-modality]:not(:active) {
    opacity: 0.72;
    transition: opacity 160ms ease;
}

body[data-c2rt-dragging-creneau] .sx__event[data-holiday] {
    opacity: 1;
    box-shadow: inset 0 0 0 1.5px rgba(225, 29, 72, 0.55);
}

/* Pillule en cours de drag : Schedule-X ajoute la pillule original
   ainsi qu'une copie "drag image" qui suit le curseur. On styles les
   deux pour donner du relief : ombre forte, leger scale + tilt. */
.sx__event.sx__event-modifying,
.sx__event[aria-grabbed="true"],
.sx__time-grid-event-dragging,
.sx__month-grid-event-dragging,
.sx__drag-image .sx__event {
    transform: scale(1.06) rotate(0.4deg) !important;
    box-shadow:
        0 14px 28px -8px rgba(15, 23, 42, 0.40),
        0 6px 12px -4px rgba(15, 23, 42, 0.25),
        inset 0 0 0 1.5px rgba(255, 255, 255, 0.55) !important;
    opacity: 0.96 !important;
    z-index: 200 !important;
    cursor: grabbing !important;
}

[data-bs-theme="dark"] .sx__event.sx__event-modifying,
[data-bs-theme="dark"] .sx__event[aria-grabbed="true"],
[data-bs-theme="dark"] .sx__time-grid-event-dragging,
[data-bs-theme="dark"] .sx__month-grid-event-dragging,
[data-bs-theme="dark"] .sx__drag-image .sx__event {
    box-shadow:
        0 14px 28px -8px rgba(0, 0, 0, 0.70),
        0 6px 12px -4px rgba(0, 0, 0, 0.50),
        inset 0 0 0 1.5px rgba(255, 255, 255, 0.25) !important;
}

/* Cellule cible : Schedule-X expose souvent une classe
   "drop target" ou utilise :hover. On ajoute un halo cyan
   subtil sur la cellule qui recevra le drop. */
body[data-c2rt-dragging-creneau] .sx__month-grid-day:hover,
body[data-c2rt-dragging-creneau] .sx__time-grid-day:hover {
    background: rgba(6, 182, 212, 0.05);
    box-shadow: inset 0 0 0 2px rgba(6, 182, 212, 0.45);
    border-radius: 4px;
    transition: background 100ms ease, box-shadow 100ms ease;
}

[data-bs-theme="dark"] body[data-c2rt-dragging-creneau] .sx__month-grid-day:hover,
[data-bs-theme="dark"] body[data-c2rt-dragging-creneau] .sx__time-grid-day:hover {
    background: rgba(34, 211, 238, 0.08);
    box-shadow: inset 0 0 0 2px rgba(34, 211, 238, 0.55);
}

/* Pillule verrouillee : leger anneau interne pour appuyer l'etat. */
.sx__event[data-locked="1"] {
    box-shadow: inset 0 0 0 1.5px rgba(6, 182, 212, 0.45);
}

[data-bs-theme="dark"] .sx__event[data-locked="1"] {
    box-shadow: inset 0 0 0 1.5px rgba(34, 211, 238, 0.55);
}

/* L'avancement Xh/Yh est expose en tooltip natif sur la pillule
   (attribut title rempli par applyAugmentations). Pas de pseudo-
   element ici : on laisse le rendu original de Schedule-X (petit
   indicateur de presentiel / distantiel) inchange a droite. */

/* ============================================================
   Module color picker pro : trigger + popover ancres dans
   l'en-tete de la section Module du drawer.

   Le trigger est un bouton compact (swatch + chevron) qui
   donne immediatement la couleur courante du module et ouvre
   au clic une popover de selection riche :
     - 12 teintes curatees en grille 4x3,
     - champ hex avec prefixe #,
     - bouton vers la roue chromatique systeme (eyedropper
       inclus dans les navigateurs recents).
   ============================================================ */

.c2rt-event-drawer-color-picker {
    position: relative;
    flex-shrink: 0;
}

.c2rt-event-drawer-color-picker-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px 4px 5px;
    background: var(--c2rt-surface-soft, #f1f5f9);
    border: 1px solid var(--c2rt-border, #dee5ef);
    border-radius: 999px;
    cursor: pointer;
    color: var(--text-muted, #64748b);
    transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.c2rt-event-drawer-color-picker-trigger:hover {
    background: rgba(37, 99, 235, 0.06);
    border-color: rgba(37, 99, 235, 0.35);
    color: var(--c2rt-blue-700, #1d4ed8);
    transform: translateY(-1px);
}

.c2rt-event-drawer-color-picker-trigger:active {
    transform: translateY(0);
}

.c2rt-event-drawer-color-picker-trigger:focus-visible {
    outline: none;
    border-color: var(--c2rt-blue-500, #3b82f6);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.20);
}

[data-bs-theme="dark"] .c2rt-event-drawer-color-picker-trigger {
    background: rgba(148, 163, 184, 0.08);
    border-color: rgba(148, 163, 184, 0.25);
    color: rgba(226, 232, 240, 0.78);
}

[data-bs-theme="dark"] .c2rt-event-drawer-color-picker-trigger:hover {
    background: rgba(96, 165, 250, 0.14);
    border-color: rgba(96, 165, 250, 0.45);
    color: #dbeafe;
}

.c2rt-event-drawer-color-picker-swatch {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: var(--c2rt-blue-600, #2563eb);
    box-shadow:
        inset 0 0 0 1.5px rgba(255, 255, 255, 0.70),
        0 0 0 1px rgba(15, 23, 42, 0.18);
    flex-shrink: 0;
    transition: background 160ms ease;
}

[data-bs-theme="dark"] .c2rt-event-drawer-color-picker-swatch {
    box-shadow:
        inset 0 0 0 1.5px rgba(15, 26, 46, 0.65),
        0 0 0 1px rgba(0, 0, 0, 0.35);
}

.c2rt-event-drawer-color-picker-chevron {
    width: 11px;
    height: 11px;
    opacity: 0.75;
}

/* ---------- Popover ----------
   Le popover de selection de couleur est desormais body-level
   (gere par c2rt-color-picker.js). Sa position est calculee en
   coordonnees viewport (getBoundingClientRect), donc
   `position: fixed` evite la prise en compte du scroll de la page.
   On force aussi un z-index tres haut pour passer au-dessus du
   drawer (~9000), du context menu (10000) et de la legende. */

.c2rt-event-drawer-color-popover {
    position: fixed;
    z-index: 10001;
    width: 268px;
    padding: 14px 14px 12px;
    background: var(--c2rt-surface, #ffffff);
    border: 1px solid var(--c2rt-border, #dee5ef);
    border-radius: 14px;
    box-shadow:
        0 24px 56px -16px rgba(15, 23, 42, 0.22),
        0 8px 18px -8px rgba(15, 23, 42, 0.10);
    opacity: 0;
    transform: translateY(-6px) scale(0.97);
    transform-origin: top right;
    transition: opacity 180ms ease, transform 180ms cubic-bezier(0.32, 0.72, 0.34, 1.16);
}

.c2rt-event-drawer-color-popover.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
}

[data-bs-theme="dark"] .c2rt-event-drawer-color-popover {
    background: var(--c2rt-surface, #1a274a);
    border-color: rgba(96, 165, 250, 0.20);
    box-shadow:
        0 24px 56px -16px rgba(0, 0, 0, 0.65),
        0 8px 18px -8px rgba(0, 0, 0, 0.40);
}

.c2rt-event-drawer-color-section + .c2rt-event-drawer-color-section {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--c2rt-border, #dee5ef);
}

[data-bs-theme="dark"] .c2rt-event-drawer-color-section + .c2rt-event-drawer-color-section {
    border-top-color: rgba(96, 165, 250, 0.18);
}

.c2rt-event-drawer-color-section-title {
    margin: 0 0 10px 0;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted, #64748b);
}

[data-bs-theme="dark"] .c2rt-event-drawer-color-section-title {
    color: rgba(226, 232, 240, 0.62);
}

.c2rt-event-drawer-color-swatches {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
}

.c2rt-event-drawer-color-swatch {
    aspect-ratio: 1;
    width: 100%;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    position: relative;
    box-shadow:
        inset 0 0 0 1.5px rgba(255, 255, 255, 0.30),
        0 1px 2px rgba(15, 23, 42, 0.18);
    transition: transform 140ms cubic-bezier(0.32, 0.72, 0.34, 1.16), box-shadow 140ms ease;
}

.c2rt-event-drawer-color-swatch:hover {
    transform: scale(1.08);
    box-shadow:
        inset 0 0 0 1.5px rgba(255, 255, 255, 0.50),
        0 4px 10px -2px rgba(15, 23, 42, 0.30);
}

.c2rt-event-drawer-color-swatch:focus-visible {
    outline: none;
    transform: scale(1.06);
    box-shadow:
        inset 0 0 0 1.5px rgba(255, 255, 255, 0.50),
        0 0 0 3px rgba(255, 255, 255, 0.30),
        0 0 0 5px currentColor;
}

.c2rt-event-drawer-color-swatch.is-active {
    transform: scale(1.04);
    box-shadow:
        inset 0 0 0 2px rgba(255, 255, 255, 0.95),
        inset 0 0 0 4px currentColor,
        0 2px 6px -1px rgba(15, 23, 42, 0.30);
}

.c2rt-event-drawer-color-swatch.is-active::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 10px;
    height: 7px;
    border-left: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    transform: rotate(-45deg) translate(1px, -1px);
    filter: drop-shadow(0 1px 1px rgba(15, 23, 42, 0.45));
}

[data-bs-theme="dark"] .c2rt-event-drawer-color-swatch {
    box-shadow:
        inset 0 0 0 1.5px rgba(15, 26, 46, 0.40),
        0 1px 2px rgba(0, 0, 0, 0.45);
}

[data-bs-theme="dark"] .c2rt-event-drawer-color-swatch:hover {
    box-shadow:
        inset 0 0 0 1.5px rgba(15, 26, 46, 0.55),
        0 4px 10px -2px rgba(0, 0, 0, 0.55);
}

/* ---------- Custom row : hex + native ---------- */

.c2rt-event-drawer-color-custom {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.c2rt-event-drawer-color-hex {
    flex: 1;
    display: inline-flex;
    align-items: stretch;
    background: var(--c2rt-surface-soft, #f1f5f9);
    border: 1px solid var(--c2rt-border, #dee5ef);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.c2rt-event-drawer-color-hex:focus-within {
    border-color: var(--c2rt-blue-500, #3b82f6);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.20);
    background: var(--c2rt-surface, #ffffff);
}

[data-bs-theme="dark"] .c2rt-event-drawer-color-hex {
    background: rgba(15, 26, 46, 0.55);
    border-color: rgba(148, 163, 184, 0.25);
}

[data-bs-theme="dark"] .c2rt-event-drawer-color-hex:focus-within {
    background: rgba(15, 26, 46, 0.85);
    border-color: rgba(96, 165, 250, 0.65);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.22);
}

.c2rt-event-drawer-color-hex-prefix {
    display: inline-flex;
    align-items: center;
    padding: 0 8px 0 10px;
    font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted, #94a3b8);
    border-right: 1px solid var(--c2rt-border, #dee5ef);
    pointer-events: none;
}

[data-bs-theme="dark"] .c2rt-event-drawer-color-hex-prefix {
    color: rgba(226, 232, 240, 0.48);
    border-right-color: rgba(148, 163, 184, 0.20);
}

.c2rt-event-drawer-color-hex-input {
    flex: 1;
    min-width: 0;
    padding: 7px 10px;
    border: 0;
    background: transparent;
    font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: lowercase;
    color: var(--text-primary, #0f172a);
    outline: none;
}

[data-bs-theme="dark"] .c2rt-event-drawer-color-hex-input {
    color: var(--text-primary, #f1f5f9);
}

.c2rt-event-drawer-color-native-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    flex-shrink: 0;
    background: var(--c2rt-surface-soft, #f1f5f9);
    border: 1px solid var(--c2rt-border, #dee5ef);
    border-radius: 8px;
    color: var(--text-muted, #64748b);
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.c2rt-event-drawer-color-native-btn:hover {
    background: rgba(37, 99, 235, 0.08);
    border-color: rgba(37, 99, 235, 0.35);
    color: var(--c2rt-blue-700, #1d4ed8);
    transform: translateY(-1px);
}

.c2rt-event-drawer-color-native-btn:active {
    transform: translateY(0);
}

[data-bs-theme="dark"] .c2rt-event-drawer-color-native-btn {
    background: rgba(148, 163, 184, 0.08);
    border-color: rgba(148, 163, 184, 0.25);
    color: rgba(226, 232, 240, 0.78);
}

[data-bs-theme="dark"] .c2rt-event-drawer-color-native-btn:hover {
    background: rgba(96, 165, 250, 0.14);
    border-color: rgba(96, 165, 250, 0.50);
    color: #dbeafe;
}

.c2rt-event-drawer-color-native-btn svg {
    width: 16px;
    height: 16px;
}

.c2rt-event-drawer-color-native-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    border: 0;
    background: transparent;
    padding: 0;
}

.c2rt-event-drawer-color-hint {
    margin: 10px 0 0;
    font-size: 11px;
    color: var(--text-muted, #94a3b8);
    text-align: center;
    line-height: 1.4;
}

.c2rt-event-drawer-color-hint kbd {
    display: inline-block;
    padding: 1px 5px;
    margin: 0 1px;
    background: var(--c2rt-surface-soft, #f1f5f9);
    border: 1px solid var(--c2rt-border, #dee5ef);
    border-radius: 4px;
    font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted, #64748b);
}

[data-bs-theme="dark"] .c2rt-event-drawer-color-hint kbd {
    background: rgba(15, 26, 46, 0.55);
    border-color: rgba(148, 163, 184, 0.25);
    color: rgba(226, 232, 240, 0.78);
}

/* ============================================================
   Menu contextuel (clic droit sur une pillule de creneau).
   Pattern Fantastical / Outlook / Notion Calendar : header
   discret avec pastille colore + titre, puis liste d'actions
   avec icones a gauche et raccourcis clavier a droite.
   Animation d'entree subtile (fade + scale).
   ============================================================ */

.c2rt-context-menu {
    position: fixed;
    z-index: 10000;
    min-width: 248px;
    max-width: 300px;
    padding: 6px;
    background: var(--c2rt-surface, #ffffff);
    border: 1px solid var(--c2rt-border, #dee5ef);
    border-radius: 12px;
    box-shadow:
        0 24px 56px -16px rgba(15, 23, 42, 0.28),
        0 8px 18px -8px rgba(15, 23, 42, 0.14);
    font-family: var(--c2rt-font, system-ui);
    opacity: 0;
    transform: scale(0.96);
    transform-origin: top left;
    transition: opacity 140ms ease, transform 140ms cubic-bezier(0.32, 0.72, 0.34, 1.16);
}

.c2rt-context-menu.is-open {
    opacity: 1;
    transform: scale(1);
}

[data-bs-theme="dark"] .c2rt-context-menu {
    background: var(--c2rt-surface, #1a274a);
    border-color: rgba(96, 165, 250, 0.22);
    box-shadow:
        0 24px 56px -16px rgba(0, 0, 0, 0.70),
        0 8px 18px -8px rgba(0, 0, 0, 0.45);
}

.c2rt-context-menu-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px 8px 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--c2rt-border, #dee5ef);
}

[data-bs-theme="dark"] .c2rt-context-menu-header {
    border-bottom-color: rgba(96, 165, 250, 0.18);
}

.c2rt-context-menu-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--c2rt-blue-600, #2563eb);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55);
    flex-shrink: 0;
}

[data-bs-theme="dark"] .c2rt-context-menu-dot {
    box-shadow: 0 0 0 2px rgba(15, 26, 46, 0.65);
}

.c2rt-context-menu-title {
    flex: 1;
    min-width: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-primary, #0f172a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.005em;
}

[data-bs-theme="dark"] .c2rt-context-menu-title {
    color: var(--text-primary, #f1f5f9);
}

.c2rt-context-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.c2rt-context-menu-sep {
    height: 1px;
    margin: 4px 4px;
    background: var(--c2rt-border, #dee5ef);
}

[data-bs-theme="dark"] .c2rt-context-menu-sep {
    background: rgba(96, 165, 250, 0.18);
}

.c2rt-context-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 10px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--text-primary, #0f172a);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}

.c2rt-context-menu-item:hover,
.c2rt-context-menu-item:focus-visible {
    background: rgba(37, 99, 235, 0.08);
    color: var(--c2rt-blue-700, #1d4ed8);
    outline: none;
}

.c2rt-context-menu-item:active {
    background: rgba(37, 99, 235, 0.14);
}

[data-bs-theme="dark"] .c2rt-context-menu-item {
    color: var(--text-primary, #f1f5f9);
}

[data-bs-theme="dark"] .c2rt-context-menu-item:hover,
[data-bs-theme="dark"] .c2rt-context-menu-item:focus-visible {
    background: rgba(96, 165, 250, 0.16);
    color: #dbeafe;
}

[data-bs-theme="dark"] .c2rt-context-menu-item:active {
    background: rgba(96, 165, 250, 0.24);
}

.c2rt-context-menu-item svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    opacity: 0.78;
}

.c2rt-context-menu-item span {
    flex: 1;
    min-width: 0;
}

.c2rt-context-menu-item kbd {
    display: inline-block;
    padding: 1px 6px;
    background: var(--c2rt-surface-soft, #f1f5f9);
    border: 1px solid var(--c2rt-border, #dee5ef);
    border-radius: 4px;
    font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted, #64748b);
}

[data-bs-theme="dark"] .c2rt-context-menu-item kbd {
    background: rgba(15, 26, 46, 0.65);
    border-color: rgba(148, 163, 184, 0.22);
    color: rgba(226, 232, 240, 0.72);
}

/* Variante danger pour Supprimer : rouge discret en defaut, rouge
   sature au hover pour signifier la destruction. */
.c2rt-context-menu-item--danger {
    color: #b91c1c;
}

.c2rt-context-menu-item--danger:hover,
.c2rt-context-menu-item--danger:focus-visible {
    background: rgba(220, 38, 38, 0.10);
    color: #991b1b;
}

[data-bs-theme="dark"] .c2rt-context-menu-item--danger {
    color: #fca5a5;
}

[data-bs-theme="dark"] .c2rt-context-menu-item--danger:hover,
[data-bs-theme="dark"] .c2rt-context-menu-item--danger:focus-visible {
    background: rgba(248, 113, 113, 0.18);
    color: #fecaca;
}

/* Element disable quand l'URL n'a pas pu etre construite (ex : lien
   detail manquant). On le grise et on intercepte le clic via JS. */
.c2rt-context-menu-item.is-disabled {
    opacity: 0.45;
    pointer-events: none;
    cursor: not-allowed;
}

/* ============================================================
   Legende laterale des modules.

   FAB (bouton flottant) ancre au bord droit du viewport : il
   ouvre / ferme le panneau lateral. Le panneau coulisse depuis
   la droite en ne couvrant qu'une bande de 320 px et laisse
   le calendrier visible derriere.

   Tout est aligne sur les tokens c2rt-* du theme.
   ============================================================ */

/* FAB : pillule verticale "Modules" */
.c2rt-legend-fab {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 90;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 8px;
    background: var(--c2rt-surface, #ffffff);
    border: 1px solid var(--c2rt-border, #dee5ef);
    border-right: 0;
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
    color: var(--c2rt-blue-700, #1d4ed8);
    cursor: pointer;
    box-shadow: -10px 0 24px -12px rgba(15, 23, 42, 0.18);
    transition: transform 200ms cubic-bezier(0.32, 0.72, 0.34, 1.16), box-shadow 200ms ease, color 160ms ease;
}

.c2rt-legend-fab:hover {
    transform: translateY(-50%) translateX(-2px);
    box-shadow: -14px 0 28px -10px rgba(15, 23, 42, 0.28);
    color: var(--c2rt-blue-800, #1e40af);
}

.c2rt-legend-fab:focus-visible {
    outline: none;
    box-shadow:
        -14px 0 28px -10px rgba(15, 23, 42, 0.28),
        0 0 0 3px rgba(37, 99, 235, 0.30);
}

.c2rt-legend-fab.is-hidden {
    transform: translateY(-50%) translateX(110%);
    opacity: 0;
    pointer-events: none;
}

[data-bs-theme="dark"] .c2rt-legend-fab {
    background: var(--c2rt-surface, #1a274a);
    border-color: rgba(96, 165, 250, 0.22);
    color: #93c5fd;
    box-shadow: -10px 0 24px -12px rgba(0, 0, 0, 0.55);
}

[data-bs-theme="dark"] .c2rt-legend-fab:hover {
    color: #dbeafe;
    box-shadow: -14px 0 28px -10px rgba(0, 0, 0, 0.75);
}

.c2rt-legend-fab svg {
    width: 18px;
    height: 18px;
}

.c2rt-legend-fab-label {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    color: inherit;
}

/* ---------- Panneau ---------- */

.c2rt-legend-panel {
    position: fixed;
    top: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 95;
    width: 320px;
    max-width: calc(100vw - 32px);
    display: flex;
    flex-direction: column;
    background: var(--c2rt-surface, #ffffff);
    border: 1px solid var(--c2rt-border, #dee5ef);
    border-radius: 16px;
    box-shadow:
        -20px 0 48px -16px rgba(15, 23, 42, 0.25),
        -8px 0 16px -8px rgba(15, 23, 42, 0.12);
    transform: translateX(calc(100% + 32px));
    opacity: 0;
    pointer-events: none;
    transition: transform 280ms cubic-bezier(0.32, 0.72, 0.34, 1.16), opacity 200ms ease;
}

.c2rt-legend-panel.is-open {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}

[data-bs-theme="dark"] .c2rt-legend-panel {
    background: var(--c2rt-surface, #1a274a);
    border-color: rgba(96, 165, 250, 0.22);
    box-shadow:
        -20px 0 48px -16px rgba(0, 0, 0, 0.65),
        -8px 0 16px -8px rgba(0, 0, 0, 0.45);
}

/* ---------- Header ---------- */

.c2rt-legend-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 14px 12px;
    border-bottom: 1px solid var(--c2rt-border, #dee5ef);
}

[data-bs-theme="dark"] .c2rt-legend-panel-header {
    border-bottom-color: rgba(96, 165, 250, 0.18);
}

.c2rt-legend-panel-title-wrap {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
}

.c2rt-legend-panel-title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary, #0f172a);
    letter-spacing: -0.005em;
}

[data-bs-theme="dark"] .c2rt-legend-panel-title {
    color: var(--text-primary, #f1f5f9);
}

.c2rt-legend-panel-count {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-muted, #64748b);
    font-variant-numeric: tabular-nums;
}

[data-bs-theme="dark"] .c2rt-legend-panel-count {
    color: rgba(226, 232, 240, 0.62);
}

.c2rt-legend-panel-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 7px;
    color: var(--text-muted, #64748b);
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease;
}

.c2rt-legend-panel-close:hover {
    background: rgba(37, 99, 235, 0.08);
    color: var(--c2rt-blue-700, #1d4ed8);
}

[data-bs-theme="dark"] .c2rt-legend-panel-close {
    color: rgba(226, 232, 240, 0.72);
}

[data-bs-theme="dark"] .c2rt-legend-panel-close:hover {
    background: rgba(96, 165, 250, 0.18);
    color: #dbeafe;
}

.c2rt-legend-panel-close svg {
    width: 16px;
    height: 16px;
}

/* ---------- Toolbar : recherche + tri ---------- */

.c2rt-legend-toolbar {
    display: flex;
    gap: 8px;
    padding: 10px 14px 8px;
    border-bottom: 1px solid var(--c2rt-border, #dee5ef);
}

[data-bs-theme="dark"] .c2rt-legend-toolbar {
    border-bottom-color: rgba(96, 165, 250, 0.14);
}

.c2rt-legend-search {
    flex: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    background: var(--c2rt-surface-soft, #f1f5f9);
    border: 1px solid var(--c2rt-border, #dee5ef);
    border-radius: 8px;
    color: var(--text-muted, #94a3b8);
    transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.c2rt-legend-search:focus-within {
    border-color: var(--c2rt-blue-500, #3b82f6);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
    background: var(--c2rt-surface, #ffffff);
}

[data-bs-theme="dark"] .c2rt-legend-search {
    background: rgba(15, 26, 46, 0.55);
    border-color: rgba(148, 163, 184, 0.22);
}

[data-bs-theme="dark"] .c2rt-legend-search:focus-within {
    border-color: rgba(96, 165, 250, 0.65);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.22);
    background: rgba(15, 26, 46, 0.85);
}

.c2rt-legend-search svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.c2rt-legend-search-input {
    flex: 1;
    min-width: 0;
    padding: 8px 0;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: 12.5px;
    color: var(--text-primary, #0f172a);
    outline: none;
}

[data-bs-theme="dark"] .c2rt-legend-search-input {
    color: var(--text-primary, #f1f5f9);
}

.c2rt-legend-sort {
    padding: 7px 26px 7px 10px;
    background: var(--c2rt-surface-soft, #f1f5f9);
    border: 1px solid var(--c2rt-border, #dee5ef);
    border-radius: 8px;
    color: var(--text-primary, #0f172a);
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%2364748b' stroke-width='2'><polyline points='3 5 6 8 9 5'/></svg>");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px 12px;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}

.c2rt-legend-sort:focus-visible {
    outline: none;
    border-color: var(--c2rt-blue-500, #3b82f6);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}

[data-bs-theme="dark"] .c2rt-legend-sort {
    background-color: rgba(15, 26, 46, 0.55);
    border-color: rgba(148, 163, 184, 0.22);
    color: var(--text-primary, #f1f5f9);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%2394a3b8' stroke-width='2'><polyline points='3 5 6 8 9 5'/></svg>");
}

/* ---------- Liste des modules ---------- */

.c2rt-legend-list {
    flex: 1;
    overflow-y: auto;
    padding: 6px 8px 10px;
    /* Scrollbar discrete */
    scrollbar-width: thin;
    scrollbar-color: rgba(100, 116, 139, 0.40) transparent;
}

.c2rt-legend-list::-webkit-scrollbar {
    width: 6px;
}

.c2rt-legend-list::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.30);
    border-radius: 3px;
}

.c2rt-legend-list::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 116, 139, 0.55);
}

.c2rt-legend-empty {
    padding: 24px 12px;
    text-align: center;
    font-size: 12.5px;
    color: var(--text-muted, #64748b);
}

[data-bs-theme="dark"] .c2rt-legend-empty {
    color: rgba(226, 232, 240, 0.55);
}

.c2rt-legend-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 8px;
    border-radius: 9px;
    transition: background 140ms ease;
}

.c2rt-legend-row:hover {
    background: rgba(37, 99, 235, 0.05);
}

[data-bs-theme="dark"] .c2rt-legend-row:hover {
    background: rgba(96, 165, 250, 0.10);
}

.c2rt-legend-row.is-hidden .c2rt-legend-row-name,
.c2rt-legend-row.is-hidden .c2rt-legend-row-meta {
    opacity: 0.45;
    text-decoration: line-through;
    text-decoration-color: rgba(100, 116, 139, 0.45);
}

.c2rt-legend-row.is-hidden .c2rt-legend-row-swatch {
    opacity: 0.50;
}

/* Swatch : pastille compacte cliquable pour ouvrir le picker.
   Reduit a 14px pour ne pas dominer visuellement la ligne
   (avant 22px = trop massif a cote du texte 12.5px). */
.c2rt-legend-row-swatch {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--c2rt-blue-600, #2563eb);
    cursor: pointer;
    box-shadow:
        inset 0 0 0 1.5px rgba(255, 255, 255, 0.55),
        0 1px 2px rgba(15, 23, 42, 0.18);
    transition: transform 140ms cubic-bezier(0.32, 0.72, 0.34, 1.16), box-shadow 140ms ease;
}

.c2rt-legend-row-swatch:hover {
    transform: scale(1.25);
    box-shadow:
        inset 0 0 0 1.5px rgba(255, 255, 255, 0.70),
        0 4px 10px -2px rgba(15, 23, 42, 0.30);
}

.c2rt-legend-row-swatch:focus-visible {
    outline: none;
    transform: scale(1.06);
    box-shadow:
        inset 0 0 0 1.5px rgba(255, 255, 255, 0.50),
        0 0 0 3px rgba(255, 255, 255, 0.30),
        0 0 0 5px currentColor;
}

[data-bs-theme="dark"] .c2rt-legend-row-swatch {
    box-shadow:
        inset 0 0 0 1.5px rgba(15, 26, 46, 0.45),
        0 1px 2px rgba(0, 0, 0, 0.45);
}

/* Contenu central : nom + meta */
.c2rt-legend-row-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    cursor: pointer;
}

.c2rt-legend-row-name {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-primary, #0f172a);
    letter-spacing: -0.005em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[data-bs-theme="dark"] .c2rt-legend-row-name {
    color: var(--text-primary, #f1f5f9);
}

.c2rt-legend-row-meta {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted, #64748b);
    font-variant-numeric: tabular-nums;
}

[data-bs-theme="dark"] .c2rt-legend-row-meta {
    color: rgba(226, 232, 240, 0.55);
}

/* Heures mises en avant : la donnee la plus utile pour la planification
   merite une presence forte (semibold + couleur primaire). */
.c2rt-legend-row-hours {
    font-weight: 700;
    color: var(--text-primary, #0f172a);
    font-variant-numeric: tabular-nums;
}

[data-bs-theme="dark"] .c2rt-legend-row-hours {
    color: #e2e8f0;
}

.c2rt-legend-row-meta-sep {
    color: var(--text-muted, #cbd5e1);
    margin: 0 1px;
}

[data-bs-theme="dark"] .c2rt-legend-row-meta-sep {
    color: rgba(148, 163, 184, 0.45);
}

.c2rt-legend-row-count {
    /* Heritage du parent .c2rt-legend-row-meta */
}

/* Indicateur de statut a droite du swatch : petit cercle vide pour
   les modules en cours / a venir, check plein pour les modules
   termines. Une seule colonne fine (10px) pour ne pas alourdir. */
.c2rt-legend-row-status {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.c2rt-legend-row-status--completed {
    color: #16a34a; /* emerald-600 */
}

.c2rt-legend-row-status--completed svg {
    width: 12px;
    height: 12px;
}

[data-bs-theme="dark"] .c2rt-legend-row-status--completed {
    color: #4ade80;
}

.c2rt-legend-row-status--current::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--c2rt-blue-600, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.20);
    animation: c2rt-legend-pulse 2.4s ease-in-out infinite;
}

[data-bs-theme="dark"] .c2rt-legend-row-status--current::before {
    background: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.30);
}

@keyframes c2rt-legend-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.15); opacity: 0.75; }
}

.c2rt-legend-row-status--upcoming::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 999px;
    border: 1.5px solid var(--text-muted, #cbd5e1);
    background: transparent;
}

[data-bs-theme="dark"] .c2rt-legend-row-status--upcoming::before {
    border-color: rgba(148, 163, 184, 0.55);
}

.c2rt-legend-row-status--pending::before {
    content: '—';
    color: var(--text-muted, #cbd5e1);
    font-size: 12px;
    line-height: 1;
}

[data-bs-theme="dark"] .c2rt-legend-row-status--pending::before {
    color: rgba(148, 163, 184, 0.45);
}

/* Variations selon le statut : modules termines = legerement attenues
   pour pousser le regard vers les modules en cours / a venir. */
.c2rt-legend-row--completed .c2rt-legend-row-name {
    color: var(--text-muted, #64748b);
}

[data-bs-theme="dark"] .c2rt-legend-row--completed .c2rt-legend-row-name {
    color: rgba(226, 232, 240, 0.55);
}

.c2rt-legend-row--completed .c2rt-legend-row-hours {
    color: var(--text-muted, #64748b);
}

[data-bs-theme="dark"] .c2rt-legend-row--completed .c2rt-legend-row-hours {
    color: rgba(226, 232, 240, 0.55);
}

/* Module en cours : leger fond brand pour le mettre en avant. */
.c2rt-legend-row--current {
    background: linear-gradient(135deg,
        rgba(37, 99, 235, 0.04) 0%,
        rgba(6, 182, 212, 0.04) 100%);
}

[data-bs-theme="dark"] .c2rt-legend-row--current {
    background: linear-gradient(135deg,
        rgba(96, 165, 250, 0.10) 0%,
        rgba(34, 211, 238, 0.10) 100%);
}

/* Toggle oeil : visible / masque */
.c2rt-legend-row-eye {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 7px;
    color: var(--text-muted, #94a3b8);
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease;
}

.c2rt-legend-row-eye:hover {
    background: rgba(37, 99, 235, 0.10);
    color: var(--c2rt-blue-700, #1d4ed8);
}

[data-bs-theme="dark"] .c2rt-legend-row-eye {
    color: rgba(226, 232, 240, 0.55);
}

[data-bs-theme="dark"] .c2rt-legend-row-eye:hover {
    background: rgba(96, 165, 250, 0.18);
    color: #dbeafe;
}

/* Le bouton oeil contient les deux SVG (open / closed) superposes.
   On affiche celui qui correspond a l'etat actif. */
.c2rt-legend-row-eye svg {
    width: 16px;
    height: 16px;
}

.c2rt-legend-row-eye svg:nth-child(2) {
    display: none;
}

.c2rt-legend-row.is-hidden .c2rt-legend-row-eye svg:nth-child(1) {
    display: none;
}

.c2rt-legend-row.is-hidden .c2rt-legend-row-eye svg:nth-child(2) {
    display: inline-block;
}

.c2rt-legend-row.is-hidden .c2rt-legend-row-eye {
    color: rgba(220, 38, 38, 0.55);
}

[data-bs-theme="dark"] .c2rt-legend-row.is-hidden .c2rt-legend-row-eye {
    color: rgba(248, 113, 113, 0.65);
}

/* ---------- Footer ---------- */

.c2rt-legend-panel-footer {
    padding: 10px 14px;
    border-top: 1px solid var(--c2rt-border, #dee5ef);
}

[data-bs-theme="dark"] .c2rt-legend-panel-footer {
    border-top-color: rgba(96, 165, 250, 0.18);
}

.c2rt-legend-show-all {
    width: 100%;
    padding: 8px 10px;
    background: transparent;
    border: 1px solid var(--c2rt-border, #dee5ef);
    border-radius: 8px;
    color: var(--text-muted, #64748b);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}

.c2rt-legend-show-all:hover {
    background: rgba(37, 99, 235, 0.08);
    color: var(--c2rt-blue-700, #1d4ed8);
    border-color: rgba(37, 99, 235, 0.35);
}

[data-bs-theme="dark"] .c2rt-legend-show-all {
    color: rgba(226, 232, 240, 0.72);
    border-color: rgba(148, 163, 184, 0.25);
}

[data-bs-theme="dark"] .c2rt-legend-show-all:hover {
    background: rgba(96, 165, 250, 0.18);
    color: #dbeafe;
    border-color: rgba(96, 165, 250, 0.50);
}

/* Sur mobile : le panneau prend toute la largeur */
@media (max-width: 640px) {
    .c2rt-legend-panel {
        top: 8px;
        right: 8px;
        bottom: 8px;
        width: calc(100vw - 16px);
    }
}

/* ============================================================
   Header actions : bouton aide + bouton fermer cote a cote
   ============================================================ */

.c2rt-legend-panel-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.c2rt-legend-panel-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 7px;
    color: var(--text-muted, #64748b);
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease;
}

.c2rt-legend-panel-help:hover {
    background: rgba(37, 99, 235, 0.08);
    color: var(--c2rt-blue-700, #1d4ed8);
}

[data-bs-theme="dark"] .c2rt-legend-panel-help {
    color: rgba(226, 232, 240, 0.72);
}

[data-bs-theme="dark"] .c2rt-legend-panel-help:hover {
    background: rgba(96, 165, 250, 0.18);
    color: #dbeafe;
}

.c2rt-legend-panel-help svg {
    width: 16px;
    height: 16px;
}

/* ============================================================
   Barre de navigation : bouton Aujourd'hui + commutateur de vue
   ============================================================ */

.c2rt-legend-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px 6px;
}

.c2rt-legend-today-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px 6px 8px;
    background: var(--c2rt-surface-soft, #f1f5f9);
    border: 1px solid var(--c2rt-border, #dee5ef);
    border-radius: 8px;
    color: var(--c2rt-blue-700, #1d4ed8);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease;
}

.c2rt-legend-today-btn:hover {
    background: rgba(37, 99, 235, 0.10);
    border-color: rgba(37, 99, 235, 0.40);
    color: var(--c2rt-blue-800, #1e40af);
    transform: translateY(-1px);
}

.c2rt-legend-today-btn:active {
    transform: translateY(0);
}

.c2rt-legend-today-btn:focus-visible {
    outline: none;
    border-color: var(--c2rt-blue-500, #3b82f6);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.20);
}

[data-bs-theme="dark"] .c2rt-legend-today-btn {
    background: rgba(96, 165, 250, 0.08);
    border-color: rgba(96, 165, 250, 0.30);
    color: #93c5fd;
}

[data-bs-theme="dark"] .c2rt-legend-today-btn:hover {
    background: rgba(96, 165, 250, 0.18);
    border-color: rgba(96, 165, 250, 0.55);
    color: #dbeafe;
}

.c2rt-legend-today-btn svg {
    width: 14px;
    height: 14px;
}

/* Switcher de vue : segmented control 4 boutons */
.c2rt-legend-view-switcher {
    flex: 1;
    display: inline-flex;
    align-items: stretch;
    padding: 2px;
    background: var(--c2rt-surface-soft, #f1f5f9);
    border: 1px solid var(--c2rt-border, #dee5ef);
    border-radius: 8px;
}

[data-bs-theme="dark"] .c2rt-legend-view-switcher {
    background: rgba(15, 26, 46, 0.55);
    border-color: rgba(148, 163, 184, 0.22);
}

.c2rt-legend-view-btn {
    flex: 1;
    padding: 5px 6px;
    background: transparent;
    border: 0;
    border-radius: 6px;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-muted, #64748b);
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

.c2rt-legend-view-btn:hover:not(.is-active) {
    color: var(--c2rt-blue-700, #1d4ed8);
    background: rgba(37, 99, 235, 0.06);
}

.c2rt-legend-view-btn.is-active {
    background: var(--c2rt-surface, #ffffff);
    color: var(--c2rt-blue-700, #1d4ed8);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.10);
}

[data-bs-theme="dark"] .c2rt-legend-view-btn {
    color: rgba(226, 232, 240, 0.60);
}

[data-bs-theme="dark"] .c2rt-legend-view-btn:hover:not(.is-active) {
    color: #dbeafe;
    background: rgba(96, 165, 250, 0.12);
}

[data-bs-theme="dark"] .c2rt-legend-view-btn.is-active {
    background: rgba(96, 165, 250, 0.22);
    color: #dbeafe;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.c2rt-legend-view-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--c2rt-blue-500, #3b82f6);
}

/* ============================================================
   Modale d'aide des raccourcis clavier
   ============================================================ */

.c2rt-help-modal {
    position: fixed;
    inset: 0;
    z-index: 9990;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

/* CRITIQUE : sans cette regle, [hidden] est surchargé par display:flex
   ci-dessus, l'overlay reste DANS le DOM en pointer-events: auto, et
   tout le viewport devient ininteractable apres fermeture. */
.c2rt-help-modal[hidden] {
    display: none !important;
}

.c2rt-help-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 200ms ease;
}

.c2rt-help-modal.is-open .c2rt-help-modal-backdrop {
    opacity: 1;
}

.c2rt-help-modal-card {
    position: relative;
    width: min(480px, 100%);
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--c2rt-surface, #ffffff);
    border: 1px solid var(--c2rt-border, #dee5ef);
    border-radius: 16px;
    box-shadow: 0 32px 64px -16px rgba(15, 23, 42, 0.35);
    transform: translateY(12px) scale(0.96);
    opacity: 0;
    transition: opacity 200ms ease, transform 200ms cubic-bezier(0.32, 0.72, 0.34, 1.16);
}

.c2rt-help-modal.is-open .c2rt-help-modal-card {
    transform: translateY(0) scale(1);
    opacity: 1;
}

[data-bs-theme="dark"] .c2rt-help-modal-card {
    background: var(--c2rt-surface, #1a274a);
    border-color: rgba(96, 165, 250, 0.22);
    box-shadow: 0 32px 64px -16px rgba(0, 0, 0, 0.65);
}

.c2rt-help-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--c2rt-border, #dee5ef);
}

[data-bs-theme="dark"] .c2rt-help-modal-header {
    border-bottom-color: rgba(96, 165, 250, 0.18);
}

.c2rt-help-modal-title {
    margin: 0;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--text-primary, #0f172a);
    letter-spacing: -0.005em;
}

[data-bs-theme="dark"] .c2rt-help-modal-title {
    color: var(--text-primary, #f1f5f9);
}

.c2rt-help-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 7px;
    color: var(--text-muted, #64748b);
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease;
}

.c2rt-help-modal-close:hover {
    background: rgba(37, 99, 235, 0.08);
    color: var(--c2rt-blue-700, #1d4ed8);
}

[data-bs-theme="dark"] .c2rt-help-modal-close {
    color: rgba(226, 232, 240, 0.72);
}

[data-bs-theme="dark"] .c2rt-help-modal-close:hover {
    background: rgba(96, 165, 250, 0.18);
    color: #dbeafe;
}

.c2rt-help-modal-close svg {
    width: 16px;
    height: 16px;
}

.c2rt-help-modal-body {
    padding: 12px 16px 18px;
    overflow-y: auto;
}

.c2rt-help-modal-section {
    margin: 14px 0 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted, #64748b);
}

.c2rt-help-modal-section:first-child {
    margin-top: 0;
}

[data-bs-theme="dark"] .c2rt-help-modal-section {
    color: rgba(226, 232, 240, 0.55);
}

.c2rt-help-modal-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
}

.c2rt-help-modal-kbd-wrap {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.c2rt-help-modal-kbd-wrap kbd {
    display: inline-block;
    min-width: 22px;
    padding: 2px 7px;
    background: var(--c2rt-surface-soft, #f1f5f9);
    border: 1px solid var(--c2rt-border, #dee5ef);
    border-bottom-width: 2px;
    border-radius: 5px;
    font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-primary, #0f172a);
    text-align: center;
    line-height: 1.3;
}

[data-bs-theme="dark"] .c2rt-help-modal-kbd-wrap kbd {
    background: rgba(15, 26, 46, 0.55);
    border-color: rgba(148, 163, 184, 0.22);
    color: var(--text-primary, #f1f5f9);
}

.c2rt-help-modal-kbd-sep {
    font-size: 11px;
    color: var(--text-muted, #94a3b8);
}

.c2rt-help-modal-label {
    flex: 1;
    text-align: right;
    font-size: 12.5px;
    color: var(--text-primary, #0f172a);
    line-height: 1.4;
}

[data-bs-theme="dark"] .c2rt-help-modal-label {
    color: rgba(241, 245, 249, 0.85);
}

/* ============================================================
   Modale de confirmation reutilisable.
   Lightweight : backdrop avec blur, carte centree, icone alerte
   animee, deux boutons (Annuler / action confirmee). Sert pour
   les suppressions et autres actions destructrices.
   ============================================================ */

.c2rt-confirm-modal {
    position: fixed;
    inset: 0;
    z-index: 10100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

/* CRITIQUE : meme correctif que pour .c2rt-help-modal. Sans cette
   regle, fermer la modale via hidden=true ne la retire pas du DOM
   en interaction → toute la page reste bloquee. */
.c2rt-confirm-modal[hidden] {
    display: none !important;
}

.c2rt-confirm-modal-backdrop {
    position: absolute;
    inset: 0;
    /* Aucun voile sombre : on garde la page parfaitement visible
       derriere la modale. Juste un leger flou pour signifier que
       le focus est sur la confirmation. */
    background: transparent;
    backdrop-filter: blur(4px) saturate(0.95);
    -webkit-backdrop-filter: blur(4px) saturate(0.95);
    opacity: 0;
    transition: opacity 200ms ease;
}

/* Quand la modale de confirmation est ouverte au-dessus du drawer,
   on attenue le voile sombre du drawer pour que la page reste
   pleinement visible. Sans cette regle, le rgba(15,23,42,0.45) du
   backdrop drawer rend l'arriere-plan gris fonce malgre la modale
   transparente. */
body.c2rt-confirm-modal-open .c2rt-event-drawer-backdrop {
    background: transparent !important;
}

body.c2rt-confirm-modal-open .c2rt-event-drawer-panel {
    /* On attenue legerement le panel pour qu'il ne tire pas l'oeil
       pendant que l'utilisateur lit la confirmation. */
    opacity: 0.55;
    transition: opacity 180ms ease;
}

.c2rt-confirm-modal.is-open .c2rt-confirm-modal-backdrop {
    opacity: 1;
}

.c2rt-confirm-modal-card {
    position: relative;
    width: min(360px, 100%);
    padding: 18px 20px 16px;
    background: var(--c2rt-surface, #ffffff);
    border: 1px solid var(--c2rt-border, #dee5ef);
    border-radius: 14px;
    /* Ombre marquee pour que la carte ressorte sur le fond bluere
       (sans voile sombre). Triple stack pour la douceur. */
    box-shadow:
        0 30px 50px -16px rgba(15, 23, 42, 0.35),
        0 12px 24px -8px rgba(15, 23, 42, 0.20),
        0 0 0 1px rgba(15, 23, 42, 0.06);
    text-align: center;
    transform: translateY(12px) scale(0.96);
    opacity: 0;
    transition: opacity 200ms ease, transform 200ms cubic-bezier(0.32, 0.72, 0.34, 1.16);
}

[data-bs-theme="dark"] .c2rt-confirm-modal-card {
    box-shadow:
        0 30px 50px -16px rgba(0, 0, 0, 0.80),
        0 12px 24px -8px rgba(0, 0, 0, 0.50),
        0 0 0 1px rgba(96, 165, 250, 0.18);
}

.c2rt-confirm-modal.is-open .c2rt-confirm-modal-card {
    transform: translateY(0) scale(1);
    opacity: 1;
}

[data-bs-theme="dark"] .c2rt-confirm-modal-card {
    background: var(--c2rt-surface, #1a274a);
    border-color: rgba(96, 165, 250, 0.22);
    /* L'ombre marquee est definie dans le bloc plus haut, plus
       complet (triple stack). On ne la redefinit pas ici pour
       eviter qu'elle ecrase la version riche. */
}

/* Icone alerte : cercle anime + pulse, plus discret. */
.c2rt-confirm-modal-icon {
    width: 38px;
    height: 38px;
    margin: 0 auto 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #dc2626;
}

.c2rt-confirm-modal-icon svg {
    width: 100%;
    height: 100%;
}

.c2rt-confirm-modal-icon-ring {
    transform-origin: center;
    animation: c2rt-confirm-modal-ring 1400ms ease-in-out infinite;
}

@keyframes c2rt-confirm-modal-ring {
    0%, 100% { stroke-opacity: 0.6; transform: scale(1); }
    50%      { stroke-opacity: 1;   transform: scale(1.04); }
}

[data-bs-theme="dark"] .c2rt-confirm-modal-icon {
    color: #f87171;
}

.c2rt-confirm-modal-title {
    margin: 0 0 6px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--text-primary, #0f172a);
    letter-spacing: -0.01em;
}

[data-bs-theme="dark"] .c2rt-confirm-modal-title {
    color: var(--text-primary, #f1f5f9);
}

.c2rt-confirm-modal-message {
    margin: 0 0 14px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-muted, #64748b);
    white-space: pre-line;
}

[data-bs-theme="dark"] .c2rt-confirm-modal-message {
    color: rgba(226, 232, 240, 0.72);
}

.c2rt-confirm-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.c2rt-confirm-modal-btn {
    flex: 1;
    max-width: 150px;
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.c2rt-confirm-modal-btn--secondary {
    background: var(--c2rt-surface-soft, #f1f5f9);
    border-color: var(--c2rt-border, #dee5ef);
    color: var(--text-primary, #0f172a);
}

.c2rt-confirm-modal-btn--secondary:hover {
    background: var(--c2rt-border, #e2e8f0);
    transform: translateY(-1px);
}

[data-bs-theme="dark"] .c2rt-confirm-modal-btn--secondary {
    background: rgba(15, 26, 46, 0.55);
    border-color: rgba(148, 163, 184, 0.30);
    color: var(--text-primary, #f1f5f9);
}

[data-bs-theme="dark"] .c2rt-confirm-modal-btn--secondary:hover {
    background: rgba(15, 26, 46, 0.85);
}

.c2rt-confirm-modal-btn--primary {
    background: var(--c2rt-blue-600, #2563eb);
    color: #ffffff;
}

.c2rt-confirm-modal-btn--primary:hover {
    background: var(--c2rt-blue-700, #1d4ed8);
    transform: translateY(-1px);
}

.c2rt-confirm-modal-btn--danger {
    background: #dc2626;
    color: #ffffff;
}

.c2rt-confirm-modal-btn--danger:hover {
    background: #b91c1c;
    box-shadow: 0 6px 16px -6px rgba(220, 38, 38, 0.45);
    transform: translateY(-1px);
}

.c2rt-confirm-modal-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.30);
}

.c2rt-confirm-modal-btn--danger:focus-visible {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.30);
}

/* ============================================================
   Banniere de consentement RGPD (LDSCS-83, refonte LDSCS-85 polish)
   ------------------------------------------------------------
   Toast professionnel ancre en bas a droite, inspire des produits
   modernes (Stripe, Linear, Vercel) :
     - position : fixed garantie par !important pour resister a un
       eventuel ancetre transforme (containing block) qui ferait
       basculer le banner en absolute ;
     - structure : header (icone + titre + croix) puis texte court
       puis actions ;
     - identite visuelle : ligne brand 3 px en haut, fond verre
       depoli (backdrop-filter), ombre douce ;
     - animation one-shot : slide-up + fade a l'apparition, slide-down
       a la fermeture.
   ============================================================ */

.c2rt-cookies-banner {
    position: fixed !important;
    right: 28px !important;
    bottom: 28px !important;
    left: auto !important;
    top: auto !important;
    width: min(460px, calc(100vw - 32px));
    z-index: 9998;
    margin: 0;
    padding: 26px 28px 22px;
    opacity: 0;
    transform: translateY(24px) scale(0.96);
    pointer-events: none;
    background: rgba(255, 255, 255, 0.94);
    border-radius: 18px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 20px 44px rgba(15, 23, 42, 0.16),
        0 36px 80px rgba(15, 23, 42, 0.08);
    -webkit-backdrop-filter: saturate(160%) blur(18px);
    backdrop-filter: saturate(160%) blur(18px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition:
        opacity 360ms cubic-bezier(0.32, 0.72, 0.34, 1.16),
        transform 360ms cubic-bezier(0.32, 0.72, 0.34, 1.16);
}
.c2rt-cookies-banner.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.c2rt-cookies-banner.is-leaving {
    opacity: 0;
    transform: translateY(20px) scale(0.96);
    pointer-events: none;
}
.c2rt-cookies-banner[hidden] { display: none !important; }

/* Bordure haute brand : meme accent gradient que les hero des
   pages institutionnelles. A l'apparition de la banniere, le trait
   se deploie de gauche a droite (scaleX 0 -> 1) pour un effet « reveal »
   pro qui ne dure qu'une seule fois (one-shot). */
.c2rt-cookies-banner::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 5px;
    background: linear-gradient(90deg, #1e40af 0%, #2563eb 55%, #06b6d4 100%);
    transform: scaleX(0);
    transform-origin: left center;
}
.c2rt-cookies-banner.is-visible::before {
    animation: c2rt-cookies-bar-expand 720ms cubic-bezier(0.32, 0.72, 0.34, 1.16) 120ms forwards;
}
@keyframes c2rt-cookies-bar-expand {
    to { transform: scaleX(1); }
}

/* Halo decoratif diffus dans le coin haut droit, signe les cartes
   premium des produits modernes (Stripe, Linear). Ne distrait pas
   du contenu, ajoute juste une touche de profondeur. */
.c2rt-cookies-banner::after {
    content: "";
    position: absolute;
    top: -60px;
    right: -60px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.16) 0%, rgba(37, 99, 235, 0) 70%);
    pointer-events: none;
}

@media (prefers-color-scheme: dark) {
    .c2rt-cookies-banner {
        background: rgba(30, 41, 59, 0.88);
        border-color: rgba(148, 163, 184, 0.18);
        box-shadow:
            0 1px 2px rgba(0, 0, 0, 0.40),
            0 18px 38px rgba(0, 0, 0, 0.48),
            0 28px 60px rgba(0, 0, 0, 0.22);
    }
}

/* En-tete : icone brand + titre + sous-titre + croix de fermeture */
.c2rt-cookies-banner-header {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
}

.c2rt-cookies-banner-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 13px;
    background: linear-gradient(135deg, #1e40af 0%, #2563eb 50%, #06b6d4 100%);
    color: #ffffff;
    flex-shrink: 0;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 8px 18px rgba(37, 99, 235, 0.32);
    transform-origin: center;
}

/* SVG interne legerement plus grand pour rester proportionne. */
.c2rt-cookies-banner-icon svg {
    width: 28px;
    height: 28px;
}

/* Pop animation a l'apparition : scale 0.4 -> 1.06 (overshoot)
   -> 1, avec une legere rotation pour le mouvement. One-shot. */
.c2rt-cookies-banner.is-visible .c2rt-cookies-banner-icon {
    animation: c2rt-cookies-icon-pop 620ms cubic-bezier(0.34, 1.45, 0.64, 1) 200ms backwards;
}
@keyframes c2rt-cookies-icon-pop {
    0%   { opacity: 0; transform: scale(0.4) rotate(-12deg); }
    60%  { opacity: 1; transform: scale(1.08) rotate(3deg); }
    100% { opacity: 1; transform: scale(1) rotate(0); }
}

/* Pepites du biscuit : tombent une par une apres l'icone, comme
   si elles atterrissaient sur la surface. Staggered 70 ms entre
   chaque chip pour un effet « cascade » naturel. */
.c2rt-cookies-icon-chip {
    transform-origin: center;
    transform-box: fill-box;
    opacity: 0;
}
.c2rt-cookies-banner.is-visible .c2rt-cookies-icon-chip {
    animation: c2rt-cookies-chip-drop 360ms cubic-bezier(0.34, 1.55, 0.64, 1) backwards forwards;
}
.c2rt-cookies-banner.is-visible .c2rt-cookies-icon-chip-1 { animation-delay: 520ms; }
.c2rt-cookies-banner.is-visible .c2rt-cookies-icon-chip-2 { animation-delay: 590ms; }
.c2rt-cookies-banner.is-visible .c2rt-cookies-icon-chip-3 { animation-delay: 660ms; }
.c2rt-cookies-banner.is-visible .c2rt-cookies-icon-chip-4 { animation-delay: 730ms; }
.c2rt-cookies-banner.is-visible .c2rt-cookies-icon-chip-5 { animation-delay: 800ms; }
@keyframes c2rt-cookies-chip-drop {
    0%   { opacity: 0; transform: scale(0) translateY(-3px); }
    70%  { opacity: 1; transform: scale(1.4) translateY(0); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

.c2rt-cookies-banner-headings {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    gap: 4px;
}

/* Sequence d'apparition fluide pour les blocs textuels et les
   actions : chacun glisse de la gauche en fondu, avec un decalage
   de 80 ms pour donner l'impression d'un contenu qui se met en
   place naturellement (pattern Stripe / Linear). */
.c2rt-cookies-banner.is-visible .c2rt-cookies-banner-headings,
.c2rt-cookies-banner.is-visible .c2rt-cookies-banner-text,
.c2rt-cookies-banner.is-visible .c2rt-cookies-banner-note,
.c2rt-cookies-banner.is-visible .c2rt-cookies-banner-actions > * {
    animation: c2rt-cookies-line-in 460ms cubic-bezier(0.32, 0.72, 0.34, 1.16) backwards;
}
.c2rt-cookies-banner.is-visible .c2rt-cookies-banner-headings { animation-delay: 280ms; }
.c2rt-cookies-banner.is-visible .c2rt-cookies-banner-text     { animation-delay: 360ms; }
.c2rt-cookies-banner.is-visible .c2rt-cookies-banner-note     { animation-delay: 440ms; }
.c2rt-cookies-banner.is-visible .c2rt-cookies-banner-actions > *:first-child { animation-delay: 540ms; }
.c2rt-cookies-banner.is-visible .c2rt-cookies-banner-actions > *:last-child  { animation-delay: 620ms; }
@keyframes c2rt-cookies-line-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.c2rt-cookies-banner-title {
    margin: 0;
    font-family: var(--c2rt-font, system-ui);
    font-size: 17px;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.005em;
    line-height: 1.2;
}

.c2rt-cookies-banner-subtitle {
    margin: 0;
    font-family: var(--c2rt-font, system-ui);
    font-size: 12.5px;
    font-weight: 500;
    color: #64748b;
    letter-spacing: 0.005em;
    line-height: 1.35;
}

@media (prefers-color-scheme: dark) {
    .c2rt-cookies-banner-icon {
        background: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 50%, #0e7490 100%);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.18),
            0 6px 14px rgba(8, 145, 178, 0.36);
    }
    .c2rt-cookies-banner-title { color: #f1f5f9; }
    .c2rt-cookies-banner-subtitle { color: #94a3b8; }
}

/* Croix de fermeture : valide « Refuser » conformement aux lignes
   directrices CNIL (pas de dark pattern : fermer = refuser). */
.c2rt-cookies-banner-close {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: transparent;
    color: #94a3b8;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 180ms ease, color 180ms ease;
}
.c2rt-cookies-banner-close:hover {
    background: rgba(15, 23, 42, 0.06);
    color: #0f172a;
}
.c2rt-cookies-banner-close:focus-visible {
    outline: 2px solid rgba(37, 99, 235, 0.45);
    outline-offset: 2px;
}

@media (prefers-color-scheme: dark) {
    .c2rt-cookies-banner-close { color: #64748b; }
    .c2rt-cookies-banner-close:hover {
        background: rgba(148, 163, 184, 0.10);
        color: #e2e8f0;
    }
}

/* Texte explicatif + lien dedie sur sa propre ligne */
.c2rt-cookies-banner-text {
    margin: 6px 0 0;
    font-family: var(--c2rt-font, system-ui);
    font-size: 14px;
    line-height: 1.65;
    color: #475569;
}

/* Bloc de note legale en remplacement du lien : encadre subtil
   avec icone bouclier a gauche, texte conformite a droite. Pas
   interactif, c'est une assurance pas une action. */
.c2rt-cookies-banner-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    margin: 4px 0 4px;
    border-radius: 10px;
    background: rgba(37, 99, 235, 0.06);
    border: 1px solid rgba(37, 99, 235, 0.16);
}

.c2rt-cookies-banner-note-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: rgba(37, 99, 235, 0.14);
    color: #1d4ed8;
    flex-shrink: 0;
    margin-top: 1px;
}

.c2rt-cookies-banner-note-text {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: #475569;
}

.c2rt-cookies-banner-note-text strong {
    color: #0f172a;
    font-weight: 600;
}

@media (prefers-color-scheme: dark) {
    .c2rt-cookies-banner-text { color: #cbd5e1; }
    .c2rt-cookies-banner-note {
        background: rgba(96, 165, 250, 0.10);
        border-color: rgba(96, 165, 250, 0.22);
    }
    .c2rt-cookies-banner-note-icon {
        background: rgba(96, 165, 250, 0.20);
        color: #93c5fd;
    }
    .c2rt-cookies-banner-note-text {
        color: #cbd5e1;
    }
    .c2rt-cookies-banner-note-text strong { color: #f1f5f9; }
}

/* Actions : Refuser fantome a gauche, J'ai compris brand a droite.
   Profil « slim » volontaire — boutons elances (padding vertical
   modeste, font-weight 500 plutot que 600) pour rester elegants
   sans dominer la carte. */
.c2rt-cookies-banner-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 8px;
}

.c2rt-cookies-banner-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 20px;
    border-radius: 8px;
    font-family: var(--c2rt-font, system-ui);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid;
    line-height: 1.2;
    letter-spacing: 0.01em;
    transition:
        background 180ms ease,
        border-color 180ms ease,
        color 180ms ease,
        transform 180ms ease,
        box-shadow 180ms ease,
        filter 180ms ease;
}

.c2rt-cookies-banner-btn-ghost {
    background: rgba(15, 23, 42, 0.03);
    color: #475569;
    border-color: rgba(15, 23, 42, 0.14);
    flex: 0 0 auto;
}
.c2rt-cookies-banner-btn-ghost:hover {
    background: rgba(15, 23, 42, 0.08);
    color: #0f172a;
    border-color: rgba(15, 23, 42, 0.28);
    transform: translateY(-1px);
}
.c2rt-cookies-banner-btn-ghost:active {
    transform: translateY(0);
}
.c2rt-cookies-banner-btn-ghost:focus-visible {
    outline: 2px solid rgba(37, 99, 235, 0.45);
    outline-offset: 2px;
}

.c2rt-cookies-banner-btn-primary {
    background: linear-gradient(135deg, #1e40af 0%, #2563eb 50%, #06b6d4 100%);
    color: #ffffff;
    border-color: transparent;
    flex: 1 1 auto;
    position: relative;
    overflow: hidden;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 6px 14px rgba(37, 99, 235, 0.28);
}
/* Reflet diagonal pre-positionne hors du bouton, glisse a travers
   au survol et au focus pour un effet « shimmer » premium. */
.c2rt-cookies-banner-btn-primary::after {
    content: "";
    position: absolute;
    top: 0;
    left: -130%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        110deg,
        transparent 0%,
        rgba(255, 255, 255, 0.32) 50%,
        transparent 100%
    );
    transform: skewX(-18deg);
    pointer-events: none;
    transition: left 640ms cubic-bezier(0.4, 0, 0.2, 1);
}
.c2rt-cookies-banner-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.26),
        0 10px 22px rgba(37, 99, 235, 0.40);
}
.c2rt-cookies-banner-btn-primary:hover::after,
.c2rt-cookies-banner-btn-primary:focus-visible::after {
    left: 140%;
}
.c2rt-cookies-banner-btn-primary:active {
    transform: translateY(0);
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.12),
        0 4px 8px rgba(37, 99, 235, 0.24);
}
.c2rt-cookies-banner-btn-primary:focus-visible {
    outline: 3px solid rgba(96, 165, 250, 0.55);
    outline-offset: 2px;
}
.c2rt-cookies-banner-btn-primary > * {
    position: relative;
    z-index: 1;
}

@media (prefers-color-scheme: dark) {
    .c2rt-cookies-banner-btn-ghost {
        color: #94a3b8;
        border-color: rgba(148, 163, 184, 0.22);
    }
    .c2rt-cookies-banner-btn-ghost:hover {
        background: rgba(148, 163, 184, 0.10);
        color: #e2e8f0;
        border-color: rgba(148, 163, 184, 0.40);
    }
}

/* Mobile : marges reduites et largeur pleine (moins l'air) pour
   eviter de couper le texte sur les petits ecrans. */
@media (max-width: 520px) {
    .c2rt-cookies-banner {
        right: 12px !important;
        left: 12px !important;
        bottom: 12px !important;
        width: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .c2rt-cookies-banner,
    .c2rt-cookies-banner-btn,
    .c2rt-cookies-banner-btn-primary::after {
        transition: none !important;
    }
    .c2rt-cookies-banner.is-visible::before,
    .c2rt-cookies-banner.is-visible .c2rt-cookies-banner-icon,
    .c2rt-cookies-banner.is-visible .c2rt-cookies-icon-chip,
    .c2rt-cookies-banner.is-visible .c2rt-cookies-banner-headings,
    .c2rt-cookies-banner.is-visible .c2rt-cookies-banner-text,
    .c2rt-cookies-banner.is-visible .c2rt-cookies-banner-note,
    .c2rt-cookies-banner.is-visible .c2rt-cookies-banner-actions > * {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ============================================================
   Calendrier — palette drag-drop + drop target + cursor states
   ============================================================ */

.c2rt-legend-row--draggable {
    cursor: grab;
}

.c2rt-legend-row--draggable:active {
    cursor: grabbing;
}

.c2rt-legend-row.is-dragging {
    opacity: 0.55;
    transform: scale(0.98);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

body.c2rt-dragging-module {
    cursor: grabbing !important;
}

/* Pendant un drag depuis le panneau modules : on neutralise les
   pillules d'evenements existantes pour eviter que le drag and
   drop natif de Schedule-X intercepte l'event et declenche une
   creation parasite (sinon le creneau drop est compte deux fois). */
body.c2rt-dragging-module .sx__event {
    pointer-events: none !important;
}

body.c2rt-dragging-module .sx__time-grid-day,
body.c2rt-dragging-module .sx__month-grid-day,
body.c2rt-dragging-module .sx__date-grid-day {
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

/* Pendant un drag depuis le panneau modules, Schedule-X (theme par
   defaut, CDN) ajoute la classe `--dragover` sur la cellule jour
   survolee, qui colore le fond avec `var(--sx-color-surface-container)`.
   On la neutralise pour ne laisser visible QUE le ghost transparent
   + border du slot cible. Aucun voile, aucun halo, aucune teinte. */
body.c2rt-dragging-module .sx__month-grid-day,
body.c2rt-dragging-module .sx__month-grid-day:hover,
body.c2rt-dragging-module .sx__month-grid-day--dragover,
body.c2rt-dragging-module .sx__month-grid-day.sx__month-grid-day--dragover,
body.c2rt-dragging-module .sx__time-grid-day,
body.c2rt-dragging-module .sx__time-grid-day:hover,
body.c2rt-dragging-module .sx__date-grid-day,
body.c2rt-dragging-module .sx__date-grid-day:hover {
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* Filet de securite hors palette drag : la classe --dragover peut
   aussi etre posee par Schedule-X lorsqu'on deplace un creneau
   existant a l'interieur du calendrier. Meme regle visuelle. */
.sx__month-grid-day--dragover,
.sx__month-grid-day.sx__month-grid-day--dragover {
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* Pendant un drag palette, on neutralise AUSSI l'effet hover cyan
   ajoute plus haut sous data-c2rt-dragging-creneau, au cas ou les
   deux drapeaux body se croiseraient (sinon halo cyan visible
   en plus du border bleu). */
body.c2rt-dragging-module .sx__month-grid-day:hover,
body.c2rt-dragging-module .sx__time-grid-day:hover {
    box-shadow: none !important;
}

/* Le ghost lui-meme : on verrouille absolument son fond a vide.
   Reaffirme ici avec !important au cas ou un selecteur tiers
   (utility, override navigateur) viendrait poser un fond par
   defaut sur les divs flottantes. SEUL le border doit etre visible. */
.c2rt-palette-drop-ghost,
.c2rt-palette-drop-ghost.is-visible {
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* Etiquette interne du ghost : pastille couleur + nom du module
   en cours de drag, centree dans le rectangle borde. Pas de fond,
   juste du texte (pour respecter la consigne « sadece border, hicbir
   bg yok »). Lisibilite assuree par un text-shadow blanc subtil
   au cas ou le ghost passerait au-dessus d'un evenement colore. */
.c2rt-palette-drop-ghost-inner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 8px;
    pointer-events: none;
    font-family: var(--c2rt-font-sans, system-ui, sans-serif);
    font-size: 12px;
    font-weight: 600;
    color: #1e293b;
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.95), 0 0 2px rgba(255, 255, 255, 0.85);
    white-space: nowrap;
    overflow: hidden;
}

.c2rt-palette-drop-ghost-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.18);
}

.c2rt-palette-drop-ghost-label {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

[data-bs-theme="dark"] .c2rt-palette-drop-ghost-inner {
    color: #f1f5f9;
    text-shadow: 0 0 4px rgba(15, 23, 42, 0.95), 0 0 2px rgba(15, 23, 42, 0.85);
}

/* Ghost de drop : overlay flottant qui materialise la zone precise
   (matin OU apres-midi seulement) sur laquelle le module va se
   poser. Glisse en douceur d'un slot a l'autre lorsque la souris
   bouge, prend la couleur du module en cours de drag. */
.c2rt-palette-drop-ghost {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    background: transparent;
    border: 2px solid #2563eb;
    border-radius: 6px;
    pointer-events: none;
    z-index: 100;
    opacity: 0;
    transition: top 0.12s cubic-bezier(0.32, 0.72, 0.34, 1.16),
                left 0.12s ease,
                width 0.12s ease,
                height 0.12s cubic-bezier(0.32, 0.72, 0.34, 1.16),
                opacity 0.14s ease;
}

.c2rt-palette-drop-ghost.is-visible {
    opacity: 1;
}

[data-bs-theme="dark"] .c2rt-palette-drop-ghost {
    border-color: #60a5fa;
}

/* ============================================================
   Apprenant strict read-only — masque les boutons d'action
   ============================================================ */

.c2rt-schedule-x[data-readonly="true"] .c2rt-legend-row-swatch,
.c2rt-schedule-x[data-readonly="true"] .c2rt-legend-row-eye {
    pointer-events: none;
    opacity: 0.45;
}

/* ============================================================
   Calendrier — tooltip riche au survol creneau (Notion-style)
   ============================================================ */

.c2rt-event-tooltip {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 320px;
    min-width: 220px;
    padding: 12px 14px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.05);
    font-family: var(--c2rt-font-sans, system-ui, sans-serif);
    color: var(--c2rt-text, #0f172a);
    pointer-events: none;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.16s ease, transform 0.16s ease;
    z-index: 9999;
}

.c2rt-event-tooltip.is-open {
    opacity: 1;
    transform: translateY(0);
}

.c2rt-event-tooltip-header {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 8px;
}

.c2rt-event-tooltip-swatch {
    flex: 0 0 12px;
    width: 12px;
    height: 12px;
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
}

.c2rt-event-tooltip-title {
    flex: 1;
    font-size: 14px;
    font-weight: 700;
    color: var(--c2rt-text, #0f172a);
    letter-spacing: -0.005em;
    line-height: 1.3;
}

.c2rt-event-tooltip-meta {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 14px;
    row-gap: 5px;
    margin: 0 0 8px;
    padding: 0;
    font-size: 12px;
}

.c2rt-event-tooltip-meta dt {
    color: var(--c2rt-text-muted, #64748b);
    font-weight: 500;
    margin: 0;
}

.c2rt-event-tooltip-meta dd {
    margin: 0;
    color: var(--c2rt-text, #0f172a);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.c2rt-event-tooltip-desc {
    margin: 0 0 8px;
    padding: 7px 9px;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--c2rt-text-muted, #475569);
    background: rgba(15, 23, 42, 0.04);
    border-radius: 6px;
}

.c2rt-event-tooltip-footer {
    margin: 0;
    padding-top: 7px;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    font-size: 11.5px;
    color: var(--c2rt-text-muted, #64748b);
    font-variant-numeric: tabular-nums;
}

[data-bs-theme="dark"] .c2rt-event-tooltip {
    background: #1e293b;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.25);
    color: #e2e8f0;
}

[data-bs-theme="dark"] .c2rt-event-tooltip-title {
    color: #f1f5f9;
}

[data-bs-theme="dark"] .c2rt-event-tooltip-meta dt {
    color: #94a3b8;
}

[data-bs-theme="dark"] .c2rt-event-tooltip-meta dd {
    color: #e2e8f0;
}

[data-bs-theme="dark"] .c2rt-event-tooltip-desc {
    color: #cbd5e1;
    background: rgba(255, 255, 255, 0.06);
}

[data-bs-theme="dark"] .c2rt-event-tooltip-footer {
    border-top-color: rgba(255, 255, 255, 0.08);
    color: #94a3b8;
}

/* ============================================================
   Calendrier — apprenant strict read-only (LDSCS-93)
   Le calendrier expose data-readonly="true" pour les apprenants.
   On masque ici toutes les surfaces d'action qui n'apportent
   rien en lecture seule : actions du drawer, picker de couleur,
   bouton verrou, bouton dupliquer, bouton supprimer.
   ============================================================ */

body:has(.c2rt-schedule-x[data-readonly="true"]) [data-c2rt-event-actions],
body:has(.c2rt-schedule-x[data-readonly="true"]) [data-c2rt-event-delete],
body:has(.c2rt-schedule-x[data-readonly="true"]) [data-c2rt-event-lock],
body:has(.c2rt-schedule-x[data-readonly="true"]) [data-c2rt-event-duplicate],
body:has(.c2rt-schedule-x[data-readonly="true"]) [data-c2rt-event-module-delete],
body:has(.c2rt-schedule-x[data-readonly="true"]) [data-c2rt-event-module-color-picker],
body:has(.c2rt-schedule-x[data-readonly="true"]) [data-c2rt-event-shortcut-edit],
body:has(.c2rt-schedule-x[data-readonly="true"]) [data-c2rt-event-shortcut-edit-sep],
body:has(.c2rt-schedule-x[data-readonly="true"]) [data-c2rt-event-shortcut-del],
body:has(.c2rt-schedule-x[data-readonly="true"]) [data-c2rt-event-shortcut-del-sep],
body:has(.c2rt-schedule-x[data-readonly="true"]) [data-c2rt-event-shortcut-lock],
body:has(.c2rt-schedule-x[data-readonly="true"]) [data-c2rt-event-shortcut-lock-sep] {
    display: none !important;
}

/* ============================================================
   Calendrier — affinement densite des boutons et controles
   Conserve strictement les couleurs et les hovers existants.
   Ne reduit que les paddings et l'epaisseur des elements
   secondaires (sous-titres, meta, separateurs) ; les boutons
   primaires (Save, Confirm) gardent leur encombrement.
   ============================================================ */

.c2rt-legend-row-name {
    font-weight: 600;
}

.c2rt-legend-row-meta {
    font-weight: 400;
    color: var(--c2rt-text-muted, #64748b);
    font-size: 11.5px;
}

.c2rt-legend-row-hours {
    font-weight: 700;
    color: var(--c2rt-text, #0f172a);
    font-variant-numeric: tabular-nums;
}

.c2rt-legend-row-count {
    font-weight: 400;
}

.c2rt-legend-row-meta-sep {
    opacity: 0.55;
}

.c2rt-legend-row-eye {
    padding: 4px;
}

.c2rt-legend-row-swatch {
    flex-shrink: 0;
}

/* ============================================================
   Calendrier — pulse halo sur la cellule du jour courant
   ============================================================ */

.sx__time-grid-day--today::before,
.sx__date-grid-day--today::before,
.sx__month-grid-day--today::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 6px;
    box-shadow: inset 0 0 0 1px rgba(252, 211, 77, 0.55);
    pointer-events: none;
    animation: c2rt-today-pulse 2.4s cubic-bezier(0.32, 0.72, 0.34, 1.16) 1;
}

@keyframes c2rt-today-pulse {
    0%   { box-shadow: inset 0 0 0 1px rgba(252, 211, 77, 0.05); }
    35%  { box-shadow: inset 0 0 0 2px rgba(252, 211, 77, 0.7); }
    100% { box-shadow: inset 0 0 0 1px rgba(252, 211, 77, 0.55); }
}

/* ============================================================
   Calendrier — filtres par type, chips compactes dans la legende
   ============================================================ */

.c2rt-legend-type-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 8px 12px 0;
    margin-bottom: 6px;
}

.c2rt-legend-type-chip {
    appearance: none;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: transparent;
    color: var(--c2rt-text-muted, #64748b);
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    user-select: none;
}

.c2rt-legend-type-chip:hover {
    background: rgba(37, 99, 235, 0.06);
    color: var(--c2rt-text, #0f172a);
    border-color: rgba(37, 99, 235, 0.25);
}

.c2rt-legend-type-chip[aria-pressed="true"] {
    background: rgba(37, 99, 235, 0.10);
    color: #1e40af;
    border-color: rgba(37, 99, 235, 0.40);
    font-weight: 600;
}

[data-bs-theme="dark"] .c2rt-legend-type-chip {
    border-color: rgba(255, 255, 255, 0.10);
    color: #94a3b8;
}

[data-bs-theme="dark"] .c2rt-legend-type-chip:hover {
    background: rgba(96, 165, 250, 0.10);
    color: #e2e8f0;
    border-color: rgba(96, 165, 250, 0.35);
}

[data-bs-theme="dark"] .c2rt-legend-type-chip[aria-pressed="true"] {
    background: rgba(96, 165, 250, 0.15);
    color: #93c5fd;
    border-color: rgba(96, 165, 250, 0.45);
}

/* ============================================================
   Calendrier — color picker FLIP smooth (LDSCS-93)
   Adoucit la transition lors d'un changement de couleur d'un
   module : la pillule du creneau et le swatch de la legende
   se reteintent en 350ms au lieu d'un flash.
   ============================================================ */

.sx__event {
    transition: background-color 0.32s ease, border-color 0.32s ease, opacity 0.18s ease, transform 0.18s ease;
}

.c2rt-legend-row-swatch {
    transition: background-color 0.32s ease, box-shadow 0.18s ease, transform 0.15s ease;
}

/* ============================================================
   Calendrier — drawer staggered slide-in des sections internes
   ============================================================ */

.c2rt-event-drawer.is-open .c2rt-event-drawer-info,
.c2rt-event-drawer.is-open .c2rt-event-drawer-module,
.c2rt-event-drawer.is-open .c2rt-event-drawer-description,
.c2rt-event-drawer.is-open .c2rt-event-drawer-actions-row {
    animation: c2rt-drawer-section-in 0.42s cubic-bezier(0.32, 0.72, 0.34, 1.16) both;
}

.c2rt-event-drawer.is-open .c2rt-event-drawer-info { animation-delay: 80ms; }
.c2rt-event-drawer.is-open .c2rt-event-drawer-module { animation-delay: 150ms; }
.c2rt-event-drawer.is-open .c2rt-event-drawer-description { animation-delay: 220ms; }
.c2rt-event-drawer.is-open .c2rt-event-drawer-actions-row { animation-delay: 290ms; }

@keyframes c2rt-drawer-section-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   Calendrier — filtre actif par type, dim les pillules non
   correspondantes. Mode jamais hide pour preserver la silhouette
   globale du planning.
   ============================================================ */

body[data-c2rt-type-filter] .sx__event:not([data-c2rt-type-filter-match]) {
    opacity: 0.18;
    filter: saturate(0.5);
    pointer-events: none;
    transition: opacity 0.25s ease, filter 0.25s ease;
}

/* Generation des selecteurs de match par type. Une regle par type
   plutot qu'un selecteur attribut dynamique pour avoir l'evaluation
   la plus rapide possible cote moteur CSS. */
body[data-c2rt-type-filter="cours"]      .sx__event[data-c2rt-type="cours"],
body[data-c2rt-type-filter="tp"]         .sx__event[data-c2rt-type="tp"],
body[data-c2rt-type-filter="projet"]     .sx__event[data-c2rt-type="projet"],
body[data-c2rt-type-filter="evaluation"] .sx__event[data-c2rt-type="evaluation"],
body[data-c2rt-type-filter="ecf"]        .sx__event[data-c2rt-type="ecf"],
body[data-c2rt-type-filter="soutenance"] .sx__event[data-c2rt-type="soutenance"] {
    opacity: 1;
    filter: none;
    pointer-events: auto;
}

/* Astuce : on marque chaque event "match" via un selecteur que
   l'on cible negativement plus haut. Le selecteur natif CSS ne
   permet pas un OR direct sur deux attributs, on remplace donc
   par une regle par type qui pose la marque visuelle. */
body[data-c2rt-type-filter="cours"]      .sx__event[data-c2rt-type="cours"]:not([data-c2rt-type-filter-match]),
body[data-c2rt-type-filter="tp"]         .sx__event[data-c2rt-type="tp"]:not([data-c2rt-type-filter-match]),
body[data-c2rt-type-filter="projet"]     .sx__event[data-c2rt-type="projet"]:not([data-c2rt-type-filter-match]),
body[data-c2rt-type-filter="evaluation"] .sx__event[data-c2rt-type="evaluation"]:not([data-c2rt-type-filter-match]),
body[data-c2rt-type-filter="ecf"]        .sx__event[data-c2rt-type="ecf"]:not([data-c2rt-type-filter-match]),
body[data-c2rt-type-filter="soutenance"] .sx__event[data-c2rt-type="soutenance"]:not([data-c2rt-type-filter-match]) {
    /* Aucune action ; la regle precedente a deja remis l'opacite. */
}

/* ============================================================
   Calendrier — mini-timeline cascade post drag-drop (LDSCS-93)
   Overlay flottant en bas a droite qui detaille les modules
   decales apres un Shift+drag. Auto-hide 6s, fermable via la
   croix. Disparition smooth en fade-out.
   ============================================================ */

.c2rt-cascade-overlay {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9998;
    width: 280px;
    max-width: calc(100vw - 48px);
    padding: 12px 14px 10px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 12px;
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.16), 0 4px 10px rgba(15, 23, 42, 0.06);
    font-family: var(--c2rt-font-sans, system-ui, sans-serif);
    color: var(--c2rt-text, #0f172a);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.32, 0.72, 0.34, 1.16);
    pointer-events: none;
}

.c2rt-cascade-overlay.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.c2rt-cascade-overlay-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 7px;
    margin-bottom: 7px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.c2rt-cascade-overlay-title {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: -0.005em;
}

.c2rt-cascade-overlay-close {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--c2rt-text-muted, #64748b);
    font-size: 18px;
    line-height: 1;
    padding: 2px 6px;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.15s ease, color 0.15s ease;
}

.c2rt-cascade-overlay-close:hover {
    background: rgba(15, 23, 42, 0.06);
    color: var(--c2rt-text, #0f172a);
}

.c2rt-cascade-overlay-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.c2rt-cascade-overlay-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 4px 6px;
    border-radius: 6px;
    background: rgba(15, 23, 42, 0.03);
    font-size: 12px;
}

.c2rt-cascade-overlay-name {
    flex: 1;
    color: var(--c2rt-text, #0f172a);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.c2rt-cascade-overlay-delta {
    flex-shrink: 0;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-size: 11.5px;
    padding: 2px 7px;
    border-radius: 999px;
}

.c2rt-cascade-overlay-delta[data-direction="right"] {
    background: rgba(245, 158, 11, 0.14);
    color: #92400e;
}

.c2rt-cascade-overlay-delta[data-direction="left"] {
    background: rgba(16, 185, 129, 0.14);
    color: #047857;
}

.c2rt-cascade-overlay-more {
    list-style: none;
    padding: 4px 6px;
    font-size: 11.5px;
    color: var(--c2rt-text-muted, #64748b);
    font-style: italic;
    text-align: center;
}

[data-bs-theme="dark"] .c2rt-cascade-overlay {
    background: #1e293b;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.5), 0 4px 10px rgba(0, 0, 0, 0.25);
    color: #e2e8f0;
}

[data-bs-theme="dark"] .c2rt-cascade-overlay-header {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

[data-bs-theme="dark"] .c2rt-cascade-overlay-close {
    color: #94a3b8;
}

[data-bs-theme="dark"] .c2rt-cascade-overlay-close:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #e2e8f0;
}

[data-bs-theme="dark"] .c2rt-cascade-overlay-item {
    background: rgba(255, 255, 255, 0.04);
}

[data-bs-theme="dark"] .c2rt-cascade-overlay-name {
    color: #e2e8f0;
}

[data-bs-theme="dark"] .c2rt-cascade-overlay-delta[data-direction="right"] {
    background: rgba(245, 158, 11, 0.20);
    color: #fbbf24;
}

[data-bs-theme="dark"] .c2rt-cascade-overlay-delta[data-direction="left"] {
    background: rgba(16, 185, 129, 0.20);
    color: #6ee7b7;
}

/* ============================================================
   Calendrier — mode impression (LDSCS-93)
   Vue propre quand l'utilisateur fait Cmd+P : on cache la
   sidebar / la tooltip / le hero / les boutons d'action et
   on imprime uniquement la grille du planning en pleine page.
   ============================================================ */

@media print {
    /* Cacher tout ce qui n'a pas de valeur sur papier */
    .c2rt-hero,
    .c2rt-calendar-tools,
    .c2rt-legend-fab,
    .c2rt-legend-panel,
    .c2rt-event-drawer,
    .c2rt-event-tooltip,
    .c2rt-cascade-overlay,
    .c2rt-context-menu,
    .c2rt-drag-hint,
    .c2rt-help-modal-backdrop,
    .c2rt-help-modal,
    .c2rt-calendar-print-wrap,
    .c2rt-calendar-print-menu,
    .c2rt-calendar-print-action,
    nav,
    aside,
    .c2rt-toast-container,
    .ea-sidebar,
    #header,
    .easyadmin-context-menu,
    .ea-flash-messages {
        display: none !important;
    }

    /* Plein papier sur la grille */
    body {
        background: #ffffff !important;
        color: #0f172a !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .c2rt-calendar-section,
    #c2rt-calendar {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Pillules : couleurs forcees pour ne pas etre delavees par
       l'imprimante, bordure noire fine pour la visibilite. */
    .sx__event {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        color-adjust: exact;
        box-shadow: none !important;
        border: 1px solid rgba(15, 23, 42, 0.45) !important;
    }

    /* Pas d'animation a l'impression */
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }

    /* Mode « Vue actuelle » : un seul A4 paysage avec la grille
       Schedule-X telle qu'affichee. Le rendu natif de Schedule-X
       depasse souvent la hauteur d'une page : on contraint la
       grille a la pleine page via une transformation d'echelle
       sur le conteneur parent. transform-origin top left garantit
       que la grille reste alignee au coin haut-gauche de la page.
       Le facteur 0.62 a ete choisi pour qu'une vue Mois 6 lignes
       x 7 colonnes (cas le plus dense) tienne sur un A4 paysage
       avec marges 6mm ; les vues Semaine / Jour, plus courtes,
       y tiennent largement aussi. */
    body.c2rt-printing-current #c2rt-calendar {
        transform: scale(0.62);
        transform-origin: top left;
        width: 161.3% !important;     /* 100 / 0.62 pour rester pleine largeur apres scale */
        height: auto !important;
        max-height: none !important;
    }
    /* On masque tout ce qui suit la grille (footer EasyAdmin,
       drawers, etc.) pour eviter qu'une bande residuelle pousse
       le contenu sur une seconde page apres le scale. */
    body.c2rt-printing-current .c2rt-calendar-section {
        overflow: hidden !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }
    body.c2rt-printing-current main > *:not(.c2rt-calendar-section),
    body.c2rt-printing-current body > *:not(main) {
        display: none !important;
    }
    @page :first {
        size: landscape;
        margin: 6mm;
    }

    /* Mode « Toute la session » : on masque la grille Schedule-X et
       on n'affiche que l'overlay multi-mois. Chaque .c2rt-print-month
       occupe une page A4 paysage entiere. */
    body.c2rt-printing-session #c2rt-calendar,
    body.c2rt-printing-session .c2rt-calendar-print-action,
    body.c2rt-printing-session .c2rt-calendar-print-wrap {
        display: none !important;
    }
    body.c2rt-printing-session #c2rt-calendar-print-overlay {
        display: block !important;
    }

    /* Defaut : si aucune classe c2rt-printing-* posee (cas Ctrl+P
       direct sans passer par notre bouton), on garde l'ancien
       comportement « Vue actuelle ». */
    @page {
        size: landscape;
        margin: 8mm;
    }
}

/* Hors impression : overlay multi-mois invisible et hors flux. */
#c2rt-calendar-print-overlay {
    display: none;
}

/* ============================================================
   Calendrier — menu d'impression flottant (deux options)
   ============================================================ */

/* Wrapper relative qui contient la grille du calendrier ET les
   boutons d'impression. Les boutons s'absolute-positionnent
   en haut-droite de CE wrapper, donc visiblement sur la grille,
   et non plus sur toute la section (qui inclut KPI + coherence). */
.c2rt-calendar-grid-wrap {
    position: relative;
}

.c2rt-calendar-print-wrap {
    position: absolute;
    top: -14px;
    right: -6px;
    z-index: 20;
}

/* Groupe d'icones (Imprimer + Telecharger PDF) cote a cote.
   Les deux boutons partagent .c2rt-calendar-print-action pour le
   styling de base ; ce wrapper assure l'alignement et NEUTRALISE
   le position absolute / top / right que la regle de base pose sur
   chaque bouton individuel (sinon les deux se superposent au meme
   coin). C'est le wrapper parent .c2rt-calendar-print-wrap qui
   porte alors le positionnement absolute. */
.c2rt-calendar-print-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.c2rt-calendar-print-group .c2rt-calendar-print-action {
    position: static;
    top: auto;
    right: auto;
}

.c2rt-calendar-print-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 240px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 10px;
    box-shadow: 0 12px 28px -10px rgba(15, 23, 42, 0.22), 0 4px 10px -4px rgba(15, 23, 42, 0.10);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 30;
}

.c2rt-calendar-print-menu[hidden] {
    display: none;
}

.c2rt-calendar-print-menu-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 8px 12px;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s ease;
}

.c2rt-calendar-print-menu-item:hover,
.c2rt-calendar-print-menu-item:focus-visible {
    background: rgba(37, 99, 235, 0.07);
    outline: none;
}

.c2rt-calendar-print-menu-title {
    font-size: 13.5px;
    font-weight: 600;
    color: #0f172a;
}

.c2rt-calendar-print-menu-desc {
    font-size: 11.5px;
    color: #64748b;
}

[data-bs-theme="dark"] .c2rt-calendar-print-menu {
    background: #1e293b;
    border-color: rgba(255, 255, 255, 0.10);
    box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.55), 0 4px 10px -4px rgba(0, 0, 0, 0.35);
}

[data-bs-theme="dark"] .c2rt-calendar-print-menu-item:hover,
[data-bs-theme="dark"] .c2rt-calendar-print-menu-item:focus-visible {
    background: rgba(96, 165, 250, 0.18);
}

[data-bs-theme="dark"] .c2rt-calendar-print-menu-title { color: #f1f5f9; }
[data-bs-theme="dark"] .c2rt-calendar-print-menu-desc { color: #94a3b8; }

/* ============================================================
   Calendrier — rendu papier multi-mois (mode « Toute la session »)
   ============================================================ */

#c2rt-calendar-print-overlay .c2rt-print-month {
    width: 100%;
    padding: 4mm 4mm 6mm;
    box-sizing: border-box;
    background: #ffffff;
    color: #0f172a;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}

#c2rt-calendar-print-overlay .c2rt-print-month-break {
    page-break-after: always;
    break-after: page;
}

#c2rt-calendar-print-overlay .c2rt-print-month-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 0 0 6mm;
    border-bottom: 1.5pt solid rgba(15, 23, 42, 0.55);
    margin-bottom: 4mm;
}

#c2rt-calendar-print-overlay .c2rt-print-month-title {
    margin: 0;
    font-size: 22pt;
    font-weight: 700;
    letter-spacing: -0.3pt;
}

#c2rt-calendar-print-overlay .c2rt-print-month-grid {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

#c2rt-calendar-print-overlay .c2rt-print-month-grid thead th {
    font-size: 9pt;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5pt;
    color: #475569;
    padding: 6pt 4pt;
    border-bottom: 0.8pt solid rgba(15, 23, 42, 0.35);
    text-align: left;
}

#c2rt-calendar-print-overlay .c2rt-print-cell {
    vertical-align: top;
    padding: 4pt;
    border: 0.5pt solid rgba(15, 23, 42, 0.18);
    height: 26mm;
    width: 14.28%;
    overflow: hidden;
}

#c2rt-calendar-print-overlay .c2rt-print-cell-outside {
    background: #f8fafc;
    color: #94a3b8;
}

#c2rt-calendar-print-overlay .c2rt-print-cell-day {
    font-size: 11pt;
    font-weight: 700;
    margin-bottom: 3pt;
    color: inherit;
}

#c2rt-calendar-print-overlay .c2rt-print-cell-evt {
    display: block;
    font-size: 8pt;
    line-height: 1.25;
    padding: 1.5pt 4pt;
    margin-bottom: 1.5pt;
    border-left: 2pt solid #94a3b8;
    background: #f1f5f9;
    color: #0f172a;
    border-radius: 1.5pt;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

#c2rt-calendar-print-overlay .c2rt-print-cell-more {
    font-size: 7.5pt;
    color: #64748b;
    margin-top: 2pt;
    font-style: italic;
}

/* Rendu papier specifique : occupe la pleine page paysage. */
@media print {
    body.c2rt-printing-session #c2rt-calendar-print-overlay .c2rt-print-month {
        padding: 6mm 6mm 8mm;
    }
    body.c2rt-printing-session #c2rt-calendar-print-overlay .c2rt-print-cell {
        height: 32mm;
    }
}

/* ============================================================
   Calendrier — bouton imprimer flottant en haut de la grille
   (LDSCS-93 polish). Discret, SVG anime au hover, declenche
   window.print() qui s'appuie sur le mode @media print pour
   sortir un rendu propre paysage A4 (utilisable aussi pour
   sauvegarder en PDF via le dialogue d'impression).
   ============================================================ */

.c2rt-calendar-section {
    position: relative;
}

.c2rt-calendar-print-action {
    position: static;
    appearance: none;
    border: 1px solid rgba(37, 99, 235, 0.18);
    background: #eff6ff;
    color: #1d4ed8;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
    box-shadow: 0 1px 2px rgba(37, 99, 235, 0.08);
}

.c2rt-calendar-print-action:hover {
    background: #dbeafe;
    color: #1e3a8a;
    border-color: rgba(37, 99, 235, 0.45);
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(37, 99, 235, 0.18);
}

.c2rt-calendar-print-action:hover svg {
    animation: c2rt-print-icon-pulse 0.55s cubic-bezier(0.32, 0.72, 0.34, 1.16) 1;
}

.c2rt-calendar-print-action:active {
    transform: translateY(0);
}

@keyframes c2rt-print-icon-pulse {
    0%   { transform: translateY(0) scale(1); }
    35%  { transform: translateY(-1px) scale(1.08); }
    100% { transform: translateY(0) scale(1); }
}

[data-bs-theme="dark"] .c2rt-calendar-print-action {
    background: rgba(96, 165, 250, 0.14);
    border-color: rgba(96, 165, 250, 0.30);
    color: #93c5fd;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

[data-bs-theme="dark"] .c2rt-calendar-print-action:hover {
    background: rgba(96, 165, 250, 0.14);
    color: #93c5fd;
    border-color: rgba(96, 165, 250, 0.45);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
}

/* ============================================================
   Calendrier — boutons d'export plus fins (LDSCS-93 polish)
   ============================================================ */

/* Bouton Exporter en iCal : aligne sur la hauteur du dropdown
   « Formation a exporter » a sa gauche pour donner une rangee
   uniforme. Padding genereux + icone legerement plus large. */
.c2rt-export-btn {
    padding: 11px 18px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border-radius: 10px !important;
}

.c2rt-export-btn-icon {
    width: 16px !important;
    height: 16px !important;
}

.c2rt-calendar-tools-select-input,
.c2rt-calendar-tools-select {
    font-size: 14px !important;
}

.c2rt-calendar-tools-select-input {
    padding: 10px 14px !important;
    border-radius: 10px !important;
}

/* ============================================================
   Print mode : on cache aussi le nouveau bouton d'impression
   pour qu'il ne soit pas inclus dans le rendu papier.
   ============================================================ */

@media print {
    .c2rt-calendar-print-action {
        display: none !important;
    }
}

/* ============================================================
   Image de drag personnalisee pour les modules de la palette
   Affichee uniquement pendant le drag (positionnee hors ecran
   avant attachement par setDragImage, le navigateur la
   detache automatiquement a la fin). Pilule compacte avec
   swatch + nom du module pour signaler discretement la
   nature de l'action en cours.
   ============================================================ */

/* Anciennement .c2rt-module-drag-image (pilule visible qui suivait
   le curseur). Supprime : le drag d'un module depuis la palette ne
   doit produire AUCUN visuel sur le curseur. Seul le ghost border
   sur la grille materialise la cible. */

/* ============================================================
   LDSCS-93 — KPI bar + verification de coherence
   ============================================================
   Bandeau compact pose au-dessus du calendrier qui combine :
   - une ligne de KPI (semaine / mois / modules / progression)
   - une bande de coherence (vert OK, ambre warnings, rouge erreurs)
   Le tout en harmonie avec la palette signature C2RT (navy / cyan)
   et le tokens.css existant (radius 10, shadow legere). */

/* Conteneur transparent : ne dessine aucun fond, c'est chaque
   .c2rt-stat-card qui porte sa propre surface (cf. tokens dashboard).
   On ne fait QUE poser la marge sous le bloc et regrouper la
   coherence + les 4 cartes. */
.c2rt-calendar-insight {
    margin: 0 0 14px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.c2rt-calendar-coherence {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    font-size: 12.5px;
    color: var(--c2rt-text-muted, #475569);
    background: var(--c2rt-surface, #ffffff);
    border: 1px solid var(--c2rt-border, rgba(15, 23, 42, 0.08));
    border-radius: var(--c2rt-radius, 12px);
}

[data-bs-theme="dark"] .c2rt-calendar-coherence {
    background: #1e293b;
    border-color: rgba(255, 255, 255, 0.10);
    color: #cbd5e1;
}
[data-bs-theme="dark"] .c2rt-calendar-coherence-text {
    color: #e2e8f0;
}
[data-bs-theme="dark"] .c2rt-calendar-insight[data-state="warn"] .c2rt-calendar-coherence-text {
    color: #fbbf24;
}
[data-bs-theme="dark"] .c2rt-calendar-insight[data-state="error"] .c2rt-calendar-coherence-text {
    color: #fca5a5;
}
[data-bs-theme="dark"] .c2rt-calendar-period-badge {
    color: #cbd5e1;
}
[data-bs-theme="dark"] .c2rt-calendar-insight[data-period="past"] .c2rt-calendar-period-badge {
    color: #6ee7b7;
}
[data-bs-theme="dark"] .c2rt-calendar-insight[data-period="current"] .c2rt-calendar-period-badge {
    color: #93c5fd;
}
[data-bs-theme="dark"] .c2rt-calendar-insight[data-period="future"] .c2rt-calendar-period-badge {
    color: #94a3b8;
}

/* Badge "Mai 2026 — En cours / Termine / A venir" a droite de la
   bande coherence. Couleur teintee selon data-period sur le parent
   .c2rt-calendar-insight, jamais de fond plein, juste un border et
   un texte typesetting. */
.c2rt-calendar-period-badge {
    margin-left: auto;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    border-radius: 999px;
    border: 1px solid currentColor;
    color: #475569;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(4px);
    transition: opacity 0.3s ease, transform 0.3s ease, color 0.25s ease;
}
.c2rt-calendar-period-badge:not(:empty) {
    opacity: 1;
    transform: translateX(0);
}

.c2rt-calendar-insight[data-period="past"] .c2rt-calendar-period-badge {
    color: #059669;
}
.c2rt-calendar-insight[data-period="current"] .c2rt-calendar-period-badge {
    color: #1e40af;
}
.c2rt-calendar-insight[data-period="future"] .c2rt-calendar-period-badge {
    color: #64748b;
}

/* Cartes KPI teintees selon le periode du mois affiche : on n'altere
   PAS le fond (jamais de fond plein, regle projet), uniquement
   l'accent gradient vertical de gauche et la couleur du chiffre
   principal pour donner un signal subtil mais immediat. */
.c2rt-calendar-insight[data-period="past"] .c2rt-calendar-kpi.c2rt-stat-card::after {
    background: linear-gradient(180deg, #d1fae5 0%, #34d399 50%, #059669 100%);
    opacity: 0.6;
}
.c2rt-calendar-insight[data-period="future"] .c2rt-calendar-kpi.c2rt-stat-card::after {
    background: linear-gradient(180deg, #e2e8f0 0%, #94a3b8 50%, #475569 100%);
    opacity: 0.5;
}
.c2rt-calendar-insight[data-period="current"] .c2rt-calendar-kpi.c2rt-stat-card::after {
    opacity: 0;
}

/* Anime la valeur quand elle change : flash subtil pour signaler
   que le contenu vient d'etre mis a jour suite a une navigation. */
.c2rt-calendar-kpi .c2rt-stat-value {
    transition: color 0.3s ease;
}
.c2rt-calendar-insight[data-period="past"] .c2rt-calendar-kpi .c2rt-stat-value {
    color: #047857;
}
.c2rt-calendar-insight[data-period="future"] .c2rt-calendar-kpi .c2rt-stat-value {
    color: #475569;
}

/* Icone state-aware (check / triangle / croix). Statique, sans
   aucune animation. Conformement a la regle projet : aucun point
   pulse nulle part, SVG haut contraste a la place. */
.c2rt-calendar-coherence-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: #94a3b8;
}

.c2rt-calendar-insight[data-state="ok"] .c2rt-calendar-coherence-icon {
    color: #10b981;
}
.c2rt-calendar-insight[data-state="warn"] .c2rt-calendar-coherence-icon {
    color: #d97706;
}
.c2rt-calendar-insight[data-state="error"] .c2rt-calendar-coherence-icon {
    color: #dc2626;
}

.c2rt-calendar-coherence-text {
    color: inherit;
}

.c2rt-calendar-insight[data-state="error"] .c2rt-calendar-coherence-text {
    color: #be123c;
    font-weight: 600;
}
.c2rt-calendar-insight[data-state="warn"] .c2rt-calendar-coherence-text {
    color: #b45309;
    font-weight: 500;
}

/* Grille 4-up (2-up sur mobile). Le wrapper porte .c2rt-dashboard
   pour que les regles admin-dashboard.css s'appliquent en plus de
   celles definies ici. Les regles ci-dessous reaffirment chaque
   valeur pour ne JAMAIS dependre uniquement du chargement de
   admin-dashboard.css : la page calendrier doit etre identique au
   tableau de bord meme si le CSS dashboard est cache differemment. */
.c2rt-calendar-kpis {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 16px;
}

@media (max-width: 880px) {
    .c2rt-calendar-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Carte : EXACTEMENT le style dashboard. Padding 24, surface, border,
   radius. Hover : translateY -3 + border + shadow + bg gradient. */
.c2rt-calendar-kpi.c2rt-stat-card {
    position: relative;
    padding: 24px;
    background: var(--c2rt-surface, #ffffff);
    border: 1px solid var(--c2rt-border, rgba(15, 23, 42, 0.08));
    border-radius: var(--c2rt-radius, 12px);
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    overflow: hidden;
}

.c2rt-calendar-kpi.c2rt-stat-card:hover {
    border-color: rgba(37, 99, 235, 0.25);
    transform: translateY(-3px);
    box-shadow: 0 6px 16px -8px rgba(15, 23, 42, 0.16);
    background: rgba(37, 99, 235, 0.04);
}

[data-bs-theme="dark"] .c2rt-calendar-kpi.c2rt-stat-card {
    background: #1e293b;
    border-color: rgba(255, 255, 255, 0.10);
}
[data-bs-theme="dark"] .c2rt-calendar-kpi.c2rt-stat-card:hover {
    background: rgba(96, 165, 250, 0.08);
    border-color: rgba(96, 165, 250, 0.30);
}

/* Accent gradient signature 4px a gauche : invisible au repos,
   visible au hover. Couleur selon la variante. */
.c2rt-calendar-kpi.c2rt-stat-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 4px; height: 100%;
    opacity: 0;
    transition: opacity 0.2s ease;
    border-radius: 4px 0 0 4px;
}
.c2rt-calendar-kpi.c2rt-stat-card:hover::after {
    opacity: 1;
}
.c2rt-calendar-kpi.c2rt-stat-card-blue::after {
    background: linear-gradient(180deg, #bfdbfe 0%, #60a5fa 50%, #2563eb 100%);
    box-shadow: 0 0 16px rgba(37, 99, 235, 0.45);
}
.c2rt-calendar-kpi.c2rt-stat-card-violet::after {
    background: linear-gradient(180deg, #a5f3fc 0%, #22d3ee 50%, #0891b2 100%);
    box-shadow: 0 0 16px rgba(6, 182, 212, 0.45);
}
.c2rt-calendar-kpi.c2rt-stat-card-orange::after {
    background: linear-gradient(180deg, #fed7aa 0%, #fb923c 50%, #ea580c 100%);
    box-shadow: 0 0 16px rgba(234, 88, 12, 0.45);
}
.c2rt-calendar-kpi.c2rt-stat-card-green::after {
    background: linear-gradient(180deg, #a7f3d0 0%, #34d399 50%, #059669 100%);
    box-shadow: 0 0 16px rgba(5, 150, 105, 0.45);
}

/* Head : conteneur de l'icone. */
.c2rt-calendar-kpi .c2rt-stat-card-head {
    margin-bottom: 16px;
}

/* Icone : couleur bleu clair (sky), fond transparent au repos.
   Au hover, fond pastel bleu clair + transformation echelle. */
.c2rt-calendar-kpi .c2rt-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0;
    border-radius: 10px;
    font-size: 17px;
    background: transparent;
    color: #3b82f6;
    transition: background 0.22s ease, color 0.22s ease, transform 0.22s ease;
}

.c2rt-calendar-kpi.c2rt-stat-card:hover .c2rt-stat-icon {
    background: #eff6ff;
    color: #2563eb;
    transform: scale(1.08);
}

[data-bs-theme="dark"] .c2rt-calendar-kpi .c2rt-stat-icon {
    color: #60a5fa;
}
[data-bs-theme="dark"] .c2rt-calendar-kpi.c2rt-stat-card:hover .c2rt-stat-icon {
    background: rgba(96, 165, 250, 0.20);
    color: #93c5fd;
}

/* Value 38px / 800. Label 14px / 600. Sub 12px muted. Identique
   au dashboard. */
.c2rt-calendar-kpi .c2rt-stat-value {
    margin: 0;
    font-size: 38px;
    font-weight: 800;
    color: #2563eb;
    line-height: 1;
    letter-spacing: -0.035em;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1, 'ss01' 1;
}

[data-bs-theme="dark"] .c2rt-calendar-kpi .c2rt-stat-value {
    color: #93c5fd;
}

.c2rt-calendar-kpi .c2rt-stat-label {
    margin: 8px 0 0 0;
    font-size: 14px;
    font-weight: 600;
    color: #3b82f6;
    letter-spacing: -0.005em;
}

[data-bs-theme="dark"] .c2rt-calendar-kpi .c2rt-stat-label {
    color: #93c5fd;
}

.c2rt-calendar-kpi .c2rt-stat-sub {
    margin: 4px 0 0 0;
    font-size: 12px;
    color: var(--c2rt-text-muted, #64748b);
    line-height: 1.3;
}

/* ============================================================
   LDSCS-93 — Recherche rapide (Cmd+K)
   ============================================================
   Overlay centre, backdrop tres leger, carte avec input + liste
   de resultats. Inspire de la palette Cmd+K Linear / Raycast.
*/

.c2rt-calendar-quicksearch {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.35);
    backdrop-filter: blur(2px);
    z-index: 9999;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 14vh;
    animation: c2rtQuickFade 0.18s ease both;
}
.c2rt-calendar-quicksearch[hidden] {
    display: none;
}

@keyframes c2rtQuickFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.c2rt-calendar-quicksearch-card {
    width: min(540px, 92vw);
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 14px;
    box-shadow: 0 24px 48px -16px rgba(15, 23, 42, 0.40),
                0 8px 16px -8px rgba(15, 23, 42, 0.18);
    overflow: hidden;
    animation: c2rtQuickRise 0.22s cubic-bezier(0.32, 0.72, 0.34, 1.16) both;
}

[data-bs-theme="dark"] .c2rt-calendar-quicksearch-card {
    background: #1e293b;
    border-color: rgba(255, 255, 255, 0.10);
}

@keyframes c2rtQuickRise {
    from { transform: translateY(-8px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.c2rt-calendar-quicksearch-input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

[data-bs-theme="dark"] .c2rt-calendar-quicksearch-input-wrap {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

.c2rt-calendar-quicksearch-icon {
    color: var(--c2rt-text-muted, #64748b);
    flex-shrink: 0;
}

.c2rt-calendar-quicksearch-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 14.5px;
    color: var(--c2rt-text, #0f172a);
    outline: none;
    padding: 2px 0;
}

.c2rt-calendar-quicksearch-input::placeholder {
    color: var(--c2rt-text-muted, #94a3b8);
}

[data-bs-theme="dark"] .c2rt-calendar-quicksearch-input {
    color: #f1f5f9;
}

.c2rt-calendar-quicksearch-kbd {
    flex-shrink: 0;
    padding: 2px 6px;
    background: rgba(15, 23, 42, 0.05);
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 4px;
    font-size: 10.5px;
    font-family: inherit;
    color: var(--c2rt-text-muted, #64748b);
}

[data-bs-theme="dark"] .c2rt-calendar-quicksearch-kbd {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
    color: #cbd5e1;
}

.c2rt-calendar-quicksearch-results {
    list-style: none;
    margin: 0;
    padding: 6px;
    max-height: 320px;
    overflow-y: auto;
}

.c2rt-calendar-quicksearch-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.12s ease;
}

.c2rt-calendar-quicksearch-item.is-active,
.c2rt-calendar-quicksearch-item:hover {
    background: rgba(37, 99, 235, 0.08);
}

[data-bs-theme="dark"] .c2rt-calendar-quicksearch-item.is-active,
[data-bs-theme="dark"] .c2rt-calendar-quicksearch-item:hover {
    background: rgba(96, 165, 250, 0.14);
}

.c2rt-calendar-quicksearch-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.10);
}

.c2rt-calendar-quicksearch-name {
    flex: 1;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--c2rt-text, #0f172a);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[data-bs-theme="dark"] .c2rt-calendar-quicksearch-name { color: #f1f5f9; }

.c2rt-calendar-quicksearch-meta {
    font-size: 11.5px;
    color: var(--c2rt-text-muted, #64748b);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.c2rt-calendar-quicksearch-empty {
    padding: 24px 16px;
    text-align: center;
    color: var(--c2rt-text-muted, #94a3b8);
    font-size: 13px;
    font-style: italic;
}

.c2rt-calendar-quicksearch-hint {
    display: flex;
    gap: 16px;
    padding: 9px 16px;
    background: rgba(248, 250, 252, 0.6);
    border-top: 1px solid rgba(15, 23, 42, 0.06);
    font-size: 11.5px;
    color: var(--c2rt-text-muted, #64748b);
}

[data-bs-theme="dark"] .c2rt-calendar-quicksearch-hint {
    background: rgba(15, 23, 42, 0.4);
    border-top-color: rgba(255, 255, 255, 0.06);
}

.c2rt-calendar-quicksearch-hint kbd {
    display: inline-block;
    padding: 1px 5px;
    background: rgba(15, 23, 42, 0.05);
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 3px;
    font-size: 10px;
    color: inherit;
    font-family: inherit;
    margin-right: 2px;
}

/* Flash quand on saute sur un creneau via la recherche : la pillule
   pulse une fois avec un halo cyan, attire l'oeil sans agresser. */
.sx__event.c2rt-event-flash {
    animation: c2rtEventFlash 1.2s ease-out 1;
}

@keyframes c2rtEventFlash {
    0%   { box-shadow: 0 0 0 0 rgba(6, 182, 212, 0.55); }
    50%  { box-shadow: 0 0 0 10px rgba(6, 182, 212, 0); }
    100% { box-shadow: 0 0 0 0 rgba(6, 182, 212, 0); }
}

/* ============================================================
   LDSCS-93 — Minimap session dans le panneau Modules
   ============================================================
   Bande verticale de mois (debut session → fin), chaque mois rendu
   comme une cellule barre avec intensite proportionnelle au nombre
   de creneaux. Clic = navigue le calendrier sur ce mois. */

.c2rt-calendar-minimap {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    background: rgba(248, 250, 252, 0.5);
}

[data-bs-theme="dark"] .c2rt-calendar-minimap {
    background: rgba(15, 23, 42, 0.3);
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

.c2rt-calendar-minimap-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--c2rt-text-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.c2rt-calendar-minimap-strip {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
    gap: 4px;
}

.c2rt-calendar-minimap-cell {
    position: relative;
    appearance: none;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: #ffffff;
    border-radius: 6px;
    padding: 4px 4px 16px 4px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-height: 38px;
    transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

[data-bs-theme="dark"] .c2rt-calendar-minimap-cell {
    background: #1e293b;
    border-color: rgba(255, 255, 255, 0.10);
}

.c2rt-calendar-minimap-cell:hover {
    transform: translateY(-1px);
    border-color: rgba(37, 99, 235, 0.4);
    box-shadow: 0 4px 10px -4px rgba(37, 99, 235, 0.20);
}

.c2rt-calendar-minimap-cell-label {
    font-size: 9.5px;
    font-weight: 700;
    color: var(--c2rt-text-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.c2rt-calendar-minimap-cell-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 12px;
    background: linear-gradient(90deg, #1e40af, #2563eb, #06b6d4);
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.c2rt-calendar-minimap-cell-count {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 12px;
    line-height: 12px;
    text-align: center;
    font-size: 9px;
    font-weight: 700;
    color: #ffffff;
    z-index: 1;
}

/* =========================================================================
   Responsive — panneau Modules du calendrier (LDSCS-70, c2rt-legend.js).
   Sur desktop le panneau est un drawer lateral droit (320 px de large).
   Sur mobile il devient une bottom sheet : ancre en bas du viewport,
   72 vh de hauteur, glissement vers le haut, poignee visuelle en tete,
   bords radius en haut uniquement. Cette presentation laisse le
   calendrier toujours visible derriere et evite l'effet « tout l'ecran
   est masque ».
   ========================================================================= */
@media (max-width: 880px) {
    .c2rt-legend-fab {
        right: 14px;
        bottom: 14px;
        padding: 8px 10px;
        font-size: 12.5px;
    }
    .c2rt-legend-fab-label {
        display: none;
    }

    .c2rt-legend-panel {
        top: auto;
        right: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        max-width: 100%;
        height: 72vh;
        max-height: 72vh;
        border-radius: 18px 18px 0 0;
        border-right: 0;
        border-bottom: 0;
        box-shadow: 0 -16px 36px -8px rgba(15, 23, 42, 0.18);
        transform: translateY(calc(100% + 24px));
        transition: transform 280ms cubic-bezier(0.32, 0.72, 0.34, 1.16), opacity 200ms ease;
    }
    .c2rt-legend-panel.is-open {
        transform: translateY(0);
    }

    /* Poignee tactile decorative en haut du panneau, signal visuel
       qu'on peut faire glisser pour fermer (l'interaction reelle est
       portee par le bouton close du header). */
    .c2rt-legend-panel::before {
        content: '';
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 44px;
        height: 4px;
        border-radius: 999px;
        background: rgba(15, 23, 42, 0.18);
        pointer-events: none;
    }
    [data-bs-theme="dark"] .c2rt-legend-panel::before {
        background: rgba(148, 163, 184, 0.30);
    }
    .c2rt-legend-panel-header {
        padding-top: 22px;
    }

    /* Backdrop visible derriere la bottom sheet pour signaler qu'on est
       en modal. Tap-pour-fermer porte par le JS de legende. */
    .c2rt-legend-backdrop {
        background: rgba(15, 23, 42, 0.32);
        backdrop-filter: blur(1px);
        -webkit-backdrop-filter: blur(1px);
    }
}

@media (max-width: 520px) {
    .c2rt-legend-fab {
        right: 12px;
        bottom: 12px;
        padding: 7px 9px;
    }
    .c2rt-legend-panel {
        height: 80vh;
        max-height: 80vh;
        border-radius: 16px 16px 0 0;
    }
    .c2rt-legend-panel-header {
        padding: 22px 12px 10px;
    }
    .c2rt-legend-panel-title {
        font-size: 14px;
    }
}