/*
 * Styles personnalisés pour Appsy
 *
 * PALETTE DE COULEURS APPSY - Design élégant et naturel :
 * - Texte (#2D2A26) : Couleur de texte principale - sophistication
 * - Primaire (#3d5a49) : Boutons et CTAs - action
 * - Primaire-contraste (#0A1D17) : Bordures subtiles - profondeur
 * - Secondaire (#809D95) : Icônes et secondaire - douceur
 * - Secondaire-contraste (#BBD1CB) : Variante secondaire claire
 * - Menu (#E8DCC3) : Accents chaleureux - nature (fond du menu)
 * - Menu-contraste (#B5A688) : Variante menu plus foncée
 * - Fond (#F5F4ED) : Cartes et encarts - pureté
 * - Fond-contraste (#E8E6DF) : Variante plus foncée pour contraste
 * - Fond-bis (#F7F3E8) : Fond principal - sérénité
 * - Case (#FFFFFF) : Encadrés blancs
 * - Case-contraste (#f6f7f8) : Variante case plus foncée
 * - Case-bis (#fbfaf8) : Variante case chaude
 */

/* Empêcher le flash des modales Alpine.js */
[x-cloak] { display: none !important; }

/* Animation shimmer pour les skeleton screens */
@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Skeleton loading - animation dégradé */
.skeleton {
    background: linear-gradient(
        90deg,
        var(--menu) 0%,
        var(--fond) 50%,
        var(--menu) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: 0.5rem; /* 8px - arrondi uniforme pour tous les skeletons */
}

.skeleton-text {
    height: 1rem;
    margin-bottom: 0.5rem;
}

.skeleton-text-sm {
    height: 0.75rem;
    margin-bottom: 0.375rem;
}

.skeleton-text-lg {
    height: 1.25rem;
    margin-bottom: 0.5rem;
}

.skeleton-badge {
    height: 1.5rem;
    width: 6rem;
    border-radius: 0.5rem; /* Même arrondi que les autres skeletons */
}

.skeleton-button {
    height: 2rem;
    width: 2rem;
}

.skeleton-icon {
    height: 1.25rem;
    width: 1.25rem;
}

/* ===== BOUTON EN ÉTAT DE CHARGEMENT ===== */
.btn-loading {
    position: relative;
    pointer-events: none;
    overflow: hidden;
}

.btn-loading::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.15);
    z-index: 1;
}

.btn-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.6) 50%,
        transparent 100%
    );
    transform: translateY(-50%);
    animation: btn-loading-sweep 1.2s ease-in-out infinite;
    z-index: 2;
}

@keyframes btn-loading-sweep {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* Spinner rotatif pour le bouton loading */
.btn-spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: btn-spin 0.75s linear infinite;
    margin-right: 0.5rem;
}

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

/* ===== BOUTONS PRINCIPAUX RÉUTILISABLES ===== */
/* Bouton principal - Style vert avec effet hover */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0.625rem 1.25rem;
    border: 1px solid var(--btn-primary-border);
    font-size: 13.5px;
    font-weight: 600;
    border-radius: var(--radius);
    box-shadow: var(--shadow-control);
    color: var(--btn-primary-fg);
    background-color: var(--btn-primary-bg);
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.08s ease, box-shadow 0.15s ease;
    cursor: pointer;
}

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

.btn-primary:active:not(:disabled) {
    transform: scale(0.96);
    box-shadow: var(--shadow-sm);
}

.btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Bouton secondaire - Style clair avec effet hover */
.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0.625rem 1.25rem;
    border: 1px solid var(--border);
    font-size: 13.5px;
    font-weight: 600;
    border-radius: var(--radius);
    box-shadow: var(--shadow-control);
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.08s ease, box-shadow 0.15s ease;
    cursor: pointer;
    background-color: var(--bg-card);
    color: var(--fg);
}

/* Icônes (mask) : suivent la couleur du texte (--fg), sans inversion au survol
   (le secondaire Design ne bascule plus en vert foncé). */
.btn-secondary > div[style*="mask"] {
    background-color: var(--fg) !important;
    transition: background-color 0.15s ease;
}

.btn-secondary:hover {
    background-color: color-mix(in srgb, var(--bg-card) 94%, var(--fg));
    border-color: var(--border-strong);
}

.btn-secondary:active {
    transform: scale(0.96);
    box-shadow: var(--shadow-sm);
}

/* Bouton de validation - action positive (ex: marquer Réalisé) */
.btn-success {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border: 1px solid transparent;
    font-size: 13.5px;
    font-weight: 600;
    border-radius: var(--radius);
    color: #fff;
    background-color: var(--green);
    box-shadow: var(--shadow-control);
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.08s ease, box-shadow 0.15s ease;
    cursor: pointer;
}

.btn-success:hover {
    background-color: color-mix(in srgb, var(--green) 88%, #000);
}

.btn-success:active {
    transform: scale(0.96);
    box-shadow: var(--shadow-sm);
}

/* Bouton d'action destructive fantôme (ex: Absent, Excusé, Déprogrammé).
   Style « danger doux » du Design : clair au repos, halo rouge au survol
   (plus d'inversion en aplat rouge). */
.btn-ghost-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.625rem 1.25rem;
    border: 1px solid var(--border);
    font-size: 13.5px;
    font-weight: 600;
    border-radius: var(--radius);
    color: var(--red);
    background-color: var(--bg-card);
    box-shadow: var(--shadow-control);
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.08s ease, box-shadow 0.15s ease;
    cursor: pointer;
}

.btn-ghost-danger:hover {
    background-color: var(--red-soft);
    border-color: color-mix(in srgb, var(--red) 30%, transparent);
    color: var(--red);
}

.btn-ghost-danger:active {
    transform: scale(0.96);
    box-shadow: var(--shadow-sm);
}

/* ===== BOUTON D'ENREGISTREMENT ===== */
/*
 * Bouton d'enregistrement avec 3 états : défaut, chargement, succès
 * Basé sur btn-primary avec gestion des icônes et du texte
 *
 * Usage HTML :
 * <button type="submit" class="btn-save">
 *     <span class="btn-save-icon-default"><!-- icône disquette --></span>
 *     <span class="btn-save-icon-loading"><!-- spinner --></span>
 *     <span class="btn-save-icon-saved"><!-- icône check --></span>
 *     <span class="btn-save-text">Enregistrer</span>
 * </button>
 *
 * États gérés via JavaScript :
 * - Défaut : btn-save
 * - Chargement : btn-save is-loading
 * - Succès : btn-save is-saved
 */
.btn-save {
    display: inline-flex;
    align-items: center;
    padding: 0.625rem 1.25rem;
    border: 1px solid;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    color: white;
    background-color: var(--primaire);
    border-color: var(--secondaire);
    transition: all 0.2s ease;
    cursor: pointer;
}

.btn-save:hover:not(:disabled) {
    background-color: var(--primaire-contraste);
    border-color: var(--primaire);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.btn-save:active:not(:disabled) {
    transform: scale(0.98);
}

.btn-save:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Icônes du bouton */
.btn-save-icon-default,
.btn-save-icon-loading,
.btn-save-icon-saved {
    height: 1.25rem;
    width: 1.25rem;
    margin-right: 0.5rem;
    flex-shrink: 0;
}

.btn-save-icon-default {
    display: block;
    background-color: currentColor;
    mask: url('assets/icones/save.svg') no-repeat center;
    mask-size: contain;
    -webkit-mask: url('assets/icones/save.svg') no-repeat center;
    -webkit-mask-size: contain;
}

.btn-save-icon-loading {
    display: none;
}

.btn-save-icon-saved {
    display: none;
    background-color: currentColor;
    mask: url('assets/icones/check.svg') no-repeat center;
    mask-size: contain;
    -webkit-mask: url('assets/icones/check.svg') no-repeat center;
    -webkit-mask-size: contain;
}

/* État chargement : la disquette pulse en fondu et le bouton s'assombrit */
.btn-save.is-loading {
    background-color: var(--primaire-contraste);
    border-color: var(--primaire-contraste);
    cursor: wait;
}

.btn-save.is-loading .btn-save-icon-default {
    display: block;
    animation: btn-save-pulse 1.2s ease-in-out infinite;
}

.btn-save.is-loading .btn-save-icon-loading,
.btn-save.is-loading .btn-save-icon-saved {
    display: none;
}

@keyframes btn-save-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.25; }
}

/* État succès (optionnel, surcharge avec icône check si .is-saved est positionné) */
.btn-save.is-saved {
    background-color: var(--validation);
    border-color: var(--validation-variante);
}

.btn-save.is-saved .btn-save-icon-default,
.btn-save.is-saved .btn-save-icon-loading {
    display: none;
}

.btn-save.is-saved .btn-save-icon-saved {
    display: block;
}

/* ===== BOUTON D'ANNULATION RÉUTILISABLE ===== */
/*
 * Pendant de .btn-save : couleur neutre, icône croix.
 *
 * Usage HTML :
 * <button type="button" class="btn-cancel">
 *     <span class="btn-cancel-icon"></span>
 *     <span class="btn-cancel-text">Annuler</span>
 * </button>
 */
.btn-cancel {
    display: inline-flex;
    align-items: center;
    padding: 0.625rem 1.25rem;
    border: 1px solid var(--menu);
    background-color: white;
    color: var(--texte, #374151);
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
    cursor: pointer;
}

.btn-cancel:hover:not(:disabled) {
    background-color: var(--fond);
    border-color: var(--menu-contraste);
}

.btn-cancel:active:not(:disabled) {
    transform: scale(0.98);
}

.btn-cancel:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-cancel-icon {
    height: 1.25rem;
    width: 1.25rem;
    margin-right: 0.5rem;
    flex-shrink: 0;
    background-color: currentColor;
    mask: url('assets/icones/undo.svg') no-repeat center;
    mask-size: contain;
    -webkit-mask: url('assets/icones/undo.svg') no-repeat center;
    -webkit-mask-size: contain;
}

/* ===== BADGES UNIFIÉS APPSY ===== */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 9999px;
    white-space: nowrap;
}

/* Badges de statut RDV */
.badge-programme {
    background-color: #F3F4F6;
    color: var(--primaire-contraste);
}

.badge-termine {
    background-color: var(--rdv-termine);
    color: var(--primaire-contraste);
}

.badge-absent {
    background-color: var(--rdv-echec);
    color: var(--primaire-contraste);
}

.badge-annule {
    background-color: var(--rdv-annule);
    color: white;
}

.badge-excuse {
    background-color: var(--rdv-excuse);
    color: var(--primaire-contraste);
}

.badge-en-cours {
    background-color: var(--primaire-contraste);
    color: white;
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.badge-prochain {
    background-color: var(--primaire-contraste);
    color: white;
}

/* Badges d'information */
.badge-type {
    background-color: var(--menu);
    color: var(--primaire-contraste);
}

.badge-info {
    background-color: var(--bleu);
    color: white;
}

.badge-warning {
    background-color: #F59E0B;
    color: white;
}

.badge-success {
    background-color: var(--validation);
    color: var(--primaire-contraste);
}

.badge-error {
    background-color: var(--refus);
    color: white;
}

/* Badge avec icône */
.badge-with-icon {
    padding-left: 0.5rem;
}

.badge-icon {
    width: 1rem;
    height: 1rem;
    margin-right: 0.375rem;
}

/* Animation pulse pour badge en cours */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/* Anneaux (ring) pour les cartes */
.ring-2 {
    box-shadow: 0 0 0 2px var(--primaire-contraste);
}

.ring-vert-fonce {
    --tw-ring-color: var(--primaire-contraste);
}

/* Opacité */
.opacity-60 {
    opacity: 0.6;
}

/* ===== POINT LIVE POUR RDV EN COURS ===== */
.live-indicator {
    position: relative;
    width: 12px;
    height: 12px;
    background-color: var(--menu);
    border-radius: 50%;
    animation: pulse-dot 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.live-indicator::before,
.live-indicator::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: var(--menu);
    opacity: 0.75;
    animation: ripple 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.live-indicator::after {
    animation-delay: 1s;
}

@keyframes pulse-dot {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.1);
    }
}

@keyframes ripple {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.75;
    }
    100% {
        transform: translate(-50%, -50%) scale(3);
        opacity: 0;
    }
}

/* ===== CARTES RDV DÉPLIANTES ===== */
.rdv-card {
    background-color: var(--fond-bis);
    border: 1px solid var(--fond);
    border-radius: 12px;
    transition: all 0.3s ease;
    overflow: hidden;
}

.rdv-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.rdv-card-header {
    padding: 1rem 1.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: background-color 0.2s ease;
    background-color: var(--fond);
    border-bottom: 1px solid var(--fond);
}

.rdv-card-header:hover {
    background-color: var(--fond-bis);
}

.rdv-card-body {
    padding: 0 1.25rem 1rem 1.25rem;
    background-color: var(--fond-bis);
}

.rdv-card-expanded .rdv-card-header {
    background-color: var(--fond);
}

/* Chevron de dépliant */
.chevron-icon {
    transition: transform 0.3s ease;
}

.rdv-card-expanded .chevron-icon {
    transform: rotate(180deg);
}

/* ===== CARTES TERMINÉES (RDV, ÉVÉNEMENTS, ABSENCES) ===== */
/* Restaurer les couleurs normales au hover pour RDV terminés */
.rdv-card[data-completed="true"]:hover {
    opacity: 1 !important;
}

.rdv-card[data-completed="true"]:hover .rdv-card-header {
    background-color: var(--fond) !important;
}

.rdv-card[data-completed="true"]:hover .rdv-location-icon,
.rdv-card[data-completed="true"]:hover .rdv-status-icon {
    background-color: var(--primaire-contraste) !important;
}

.rdv-card[data-completed="true"]:hover .rdv-time,
.rdv-card[data-completed="true"]:hover .rdv-patient {
    color: var(--primaire-contraste) !important;
}

/* Restaurer les couleurs normales quand RDV déplié */
.rdv-card-expanded[data-completed="true"] {
    opacity: 1 !important;
}

.rdv-card-expanded[data-completed="true"] .rdv-card-header {
    background-color: var(--fond) !important;
}

.rdv-card-expanded[data-completed="true"] .rdv-location-icon,
.rdv-card-expanded[data-completed="true"] .rdv-status-icon {
    background-color: var(--primaire-contraste) !important;
}

.rdv-card-expanded[data-completed="true"] .rdv-time,
.rdv-card-expanded[data-completed="true"] .rdv-patient {
    color: var(--primaire-contraste) !important;
}

/* Restaurer les couleurs pour événements passés au hover */
.rdv-card[data-item-type="evenement"][data-past="true"]:hover {
    opacity: 1 !important;
}

.rdv-card[data-item-type="evenement"][data-past="true"]:hover .rdv-card-header {
    background-color: var(--fond) !important;
}

.rdv-card[data-item-type="evenement"][data-past="true"]:hover .h-5.w-5 {
    background-color: var(--menu-contraste) !important;
}

.rdv-card[data-item-type="evenement"][data-past="true"]:hover .font-semibold {
    color: var(--menu-contraste) !important;
}

.rdv-card[data-item-type="evenement"][data-past="true"]:hover .flex-1 {
    color: var(--primaire-contraste) !important;
}

/* Restaurer les couleurs pour événements passés quand déplié */
.rdv-card-expanded[data-item-type="evenement"][data-past="true"] {
    opacity: 1 !important;
}

.rdv-card-expanded[data-item-type="evenement"][data-past="true"] .rdv-card-header {
    background-color: var(--fond) !important;
}

.rdv-card-expanded[data-item-type="evenement"][data-past="true"] .h-5.w-5 {
    background-color: var(--menu-contraste) !important;
}

.rdv-card-expanded[data-item-type="evenement"][data-past="true"] .font-semibold {
    color: var(--menu-contraste) !important;
}

.rdv-card-expanded[data-item-type="evenement"][data-past="true"] .flex-1 {
    color: var(--primaire-contraste) !important;
}

/* Restaurer les couleurs pour absences passées au hover */
.rdv-card[data-item-type="absence"][data-past="true"]:hover {
    opacity: 1 !important;
}

.rdv-card[data-item-type="absence"][data-past="true"]:hover .rdv-card-header {
    background-color: var(--fond) !important;
}

.rdv-card[data-item-type="absence"][data-past="true"]:hover .h-5.w-5 {
    background-color: #6B7280 !important;
}

.rdv-card[data-item-type="absence"][data-past="true"]:hover .font-semibold {
    color: #6B7280 !important;
}

.rdv-card[data-item-type="absence"][data-past="true"]:hover .flex-1 {
    color: var(--primaire-contraste) !important;
}

/* Restaurer les couleurs pour absences passées quand déplié */
.rdv-card-expanded[data-item-type="absence"][data-past="true"] {
    opacity: 1 !important;
}

.rdv-card-expanded[data-item-type="absence"][data-past="true"] .rdv-card-header {
    background-color: var(--fond) !important;
}

.rdv-card-expanded[data-item-type="absence"][data-past="true"] .h-5.w-5 {
    background-color: #6B7280 !important;
}

.rdv-card-expanded[data-item-type="absence"][data-past="true"] .font-semibold {
    color: #6B7280 !important;
}

.rdv-card-expanded[data-item-type="absence"][data-past="true"] .flex-1 {
    color: var(--primaire-contraste) !important;
}

/* ===== DESCRIPTION LISTS ÉLÉGANTES ===== */
.divide-y > * + * {
    border-top: 1px solid var(--menu);
}

/* Grid responsive pour description lists */
.sm\:grid-cols-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 640px) {
    .sm\:grid-cols-3 {
        display: block;
    }
}

/* =============================================================================
 * PALETTE HISTORIQUE (dépréciée — conservée comme fallback)
 *
 * ⚠️ Ces valeurs codées en dur sont SURCHARGÉES par `compat.css` (chargé après
 * ce fichier), qui re-mappe chacune de ces variables sur les tokens du nouveau
 * design system (--fond → --bg, --texte → --fg, etc.), assurant les 3 thèmes.
 * Elles ne servent plus que de filet si compat.css n'était pas chargé.
 * =============================================================================
 */
:root {
    /* ---- Texte ---- */
    --texte: #101010;

    /* ---- Couleurs primaires (boutons, focus, accents principaux) ---- */
    --primaire: #0A1D17;
    --primaire-contraste: #2C463C;

    /* ---- Couleurs secondaires (textes atténués, états neutres) ---- */
    --secondaire: #809D95;
    --secondaire-contraste: #BBD1CB;

    /* ---- Menu principal (sidebar gauche) ---- */
    /* Distinct du primaire pour permettre une personnalisation indépendante */
    --menu-principal: #0A1D17;
    /* Bordure entre la sidebar et le contenu (séparateur, distinct de texte) */
    --bordure-menu-principal: #2C463C;

    /* ---- Accent décoratif "menu" (beige chaud) ---- */
    --menu: #E8DCC3;
    --menu-contraste: #B5A688;

    /* ---- Fonds (pages, cartes, encadrés) ---- */
    --fond: #F5F4ED;
    --fond-contraste: #E8E6DF;
    --fond-bis: #F7F3E8;
    --case: #FFFFFF;
    --case-contraste: #f6f7f8;
    --case-bis: #fbfaf8;

    /* ---- Couleurs d'état ---- */
    --validation: #84C995;
    --refus: #D86060;
    --bleu: #7BA5DC;
    --bleu-variation: #7090BA;

    /* ---- Alias de compatibilité (anciens noms → nouveaux noms) ---- */
}

/* ---- Variantes "soft" (15% de la couleur mélangée à --case) ----
 * À utiliser pour les badges, surlignages doux, etc.
 * color-mix() fait l'opacité proprement en fonction du thème actif,
 * contrairement à `bg-bleu/15` (Tailwind opacity modifier) qui ne
 * fonctionne pas avec des couleurs définies comme var(--xxx). */
.bg-bleu-soft        { background-color: color-mix(in oklab, var(--bleu) 15%, var(--case)); }
.bg-validation-soft  { background-color: color-mix(in oklab, var(--validation) 15%, var(--case)); }
.bg-refus-soft       { background-color: color-mix(in oklab, var(--refus) 15%, var(--case)); }
.bg-menu-soft        { background-color: color-mix(in oklab, var(--menu-contraste) 25%, var(--case)); }
.bg-primaire-soft    { background-color: color-mix(in oklab, var(--primaire) 15%, var(--case)); }

:root {
    /* placeholder pour fermer la déclaration précédente avant les nouveaux alias */
    --nuit: var(--texte);
    --feuille: var(--primaire);
    --vert-fonce: var(--primaire-contraste);
    --vert-clair: var(--secondaire);
    --vert-variante: var(--primaire);
    --beige: var(--menu);
    --beige-variante: var(--menu-contraste);
    --faux-blanc: var(--fond);
    --faux-blanc-variante: var(--fond-contraste);
    --poudre: var(--fond-bis);

    /* Couleurs de texte pour description lists */
    --texte-label: #374151;
    --texte-contenu: #111827;

    /* Couleurs d'action */
    --validation: #84C995;
    --validation-variante: #6FB57D;
    --refus: #D86060;
    --bleu: #7BA5DC;
    --bleu-variation: #7090BA;
    --rdv-programme: #F3F4F6;
    --rdv-termine: #D2EBB0;
    --rdv-echec: #EDBCB4;
    --rdv-excuse: #AFCBD2;
    --rdv-annule: #83A4AA;
}

/* Solution pour les SVG : utiliser fill, stroke ET background-color pour les masques */
.menu-icon {
    fill: var(--secondaire) !important;
    stroke: var(--secondaire) !important;
    color: var(--secondaire) !important;
    background-color: var(--secondaire) !important;
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.menu-icon-active {
    fill: var(--menu) !important;
    stroke: var(--menu) !important;
    color: var(--menu) !important;
    background-color: var(--menu) !important;
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

/* Au survol du menu entier */
nav:hover .menu-icon {
    fill: var(--fond) !important;
    stroke: var(--fond) !important;
    color: var(--fond) !important;
    background-color: var(--fond) !important;
    transform: scale(1.15);
}

nav:hover .menu-icon-active {
    transform: scale(1.15);
}

/* Au survol individuel */
.group:hover .menu-icon {
    fill: var(--fond) !important;
    stroke: var(--fond) !important;
    color: var(--fond) !important;
    background-color: var(--fond) !important;
    transform: scale(1.15);
}

/* Style pour les SVG à l'intérieur */
.menu-icon svg,
.menu-icon-active svg {
    fill: currentColor !important;
    stroke: currentColor !important;
}

.menu-icon svg *,
.menu-icon-active svg * {
    fill: currentColor !important;
    stroke: currentColor !important;
}

/* Configuration Tailwind - Encadrés en Case */
.bg-menu { background-color: var(--menu); }
.bg-beige { background-color: var(--menu); } /* alias de compatibilité */
.bg-gold { background-color: var(--gold); }
.bg-gold-secondary { background-color: var(--gold-secondary); }
.bg-dark { background-color: var(--dark); }
.bg-straw { background-color: var(--straw); }
.bg-white { background-color: var(--fond); } /* Encadrés en case */
.bg-fond { background-color: var(--fond); } /* Encadrés en case */
.bg-fond-contraste { background-color: var(--fond-contraste); }
.hover\:bg-fond-contraste:hover { background-color: var(--fond-contraste); }
.bg-case { background-color: var(--case); }
.bg-case-contraste { background-color: var(--case-contraste); }
.hover\:bg-case-contraste:hover { background-color: var(--case-contraste); }
.bg-case-bis { background-color: var(--case-bis); }
.border-case { border-color: var(--case); }
.border-case-contraste { border-color: var(--case-contraste); }
.bg-faux-blanc { background-color: var(--fond); } /* alias de compatibilité */
.bg-rdv-programme { background-color: var(--rdv-programme); }
.bg-rdv-termine { background-color: var(--rdv-termine); }
.bg-rdv-echec { background-color: var(--rdv-echec); }
.bg-rdv-excuse { background-color: var(--rdv-excuse); }
.bg-rdv-annule { background-color: var(--rdv-annule); }

.text-menu { color: var(--menu); }
.text-beige { color: var(--menu); } /* alias de compatibilité */
.text-gold { color: var(--gold); }
.text-gold-secondary { color: var(--gold-secondary); }
.text-dark { color: var(--dark); }
.text-straw { color: var(--straw); }
.text-white { color: var(--white); }

.border-menu { border-color: var(--menu); }
.border-menu-contraste { border-color: var(--menu-contraste); }
.border-fond-contraste { border-color: var(--fond-contraste); }
.border-beige { border-color: var(--menu); } /* alias de compatibilité */
.border-gold { border-color: var(--gold); }
.border-gold-secondary { border-color: var(--gold-secondary); }
.border-dark { border-color: var(--dark); }
.border-straw { border-color: var(--straw); }
.border-white { border-color: var(--white); }

/* Icônes d'action standardisées */
.action-icon {
    width: 20px;
    height: 20px;
    padding: 0.25rem; /* p-1 de Tailwind */
    background-color: var(--primaire-contraste);
    transition: background-color 0.2s ease;
    cursor: pointer;
    display: inline-block;
}

.action-icon:hover {
    background-color: var(--secondaire);
}

.action-icon.icon-warning {
    background-color: var(--primaire-contraste);
}

.action-icon.icon-warning:hover {
    background-color: var(--refus);
}

.action-icon.icon-mail {
    background-color: var(--secondaire);
}

.action-icon.icon-mail:hover {
    background-color: var(--primaire-contraste); /* vert-fonce */
}

.action-icon.icon-edit {
    background-color: var(--primaire-contraste); /* vert-fonce */
}

.action-icon.icon-edit:hover {
    background-color: var(--secondaire);
}

.action-icon.icon-favorite {
    background-color: var(--primaire-contraste); /* vert-fonce */
}

.action-icon.icon-favorite.is-favorite {
    background-color: var(--menu);
}

.action-icon.icon-favorite:hover {
    background-color: var(--secondaire);
}

/* Tableaux standardisés */
.appsy-table {
    background: var(--fond-bis);
    overflow: hidden;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    border-radius: 0.5rem;
    margin-top: 1rem;
}

.appsy-table thead {
    background-color: var(--primaire);
    color: var(--menu);
}

.appsy-table thead th {
    padding: 0.75rem 1.5rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--primaire-contraste);
    text-transform: none;
    letter-spacing: 0.025em;
}

.appsy-table thead th:first-child {
    border-top-left-radius: 0.5rem;
}

.appsy-table thead th:last-child {
    border-top-right-radius: 0.5rem;
}

.appsy-table tbody {
    background-color: var(--fond-bis);
}

.appsy-table tbody tr {
    background-color: var(--fond-bis);
}

.appsy-table tbody tr:hover {
    background-color: var(--menu);
}

.appsy-table tbody td {
    padding: 1rem 1.5rem;
    white-space: nowrap;
}

.appsy-table-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
}

/* Badges standardisés — repli de dimensionnement uniquement.
   Le fond/couleur viennent de la spec Design (.badge dans styles.css) et des
   badges de statut ci-dessus ; plus de bordure ni de fond --menu parasites
   (le Design n'a pas de bordure sur les badges). */
.badge, [class*="badge-"] {
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

/* Styles pour les champs de formulaire */
.border-straw {
    border-color: var(--secondaire);
}

.focus\:ring-gold:focus,
.focus\:ring-taupe:focus {
    box-shadow: 0 0 0 3px rgba(44, 70, 60, 0.2);
}

.focus\:border-gold:focus,
.focus\:border-taupe:focus {
    border-color: var(--primaire-contraste);
}

/* Système de tooltips pour les boutons d'action */
.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: max-content;
    max-width: 200px;
    background-color: #000;
    color: white;
    text-align: center;
    border-radius: 6px;
    padding: 6px 10px;
    position: absolute;
    z-index: 2147483000; /* au-dessus de tout (modaux, menus…) */
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s ease 0.5s;
    font-size: 12px;
    white-space: nowrap;
    pointer-events: none;
}

.tooltip .tooltiptext::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #000 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

/* Échapper à TOUT cadre (overflow:hidden/auto, transform…) : positionnement
   d'ancrage CSS + position:fixed. Chrome/Edge modernes ; ailleurs → absolu (repli). */
@supports (anchor-scope: --a) {
    .tooltip { anchor-name: --snt-tip; anchor-scope: --snt-tip; }
    .tooltip .tooltiptext {
        position: fixed;
        position-anchor: --snt-tip;
        left: anchor(center);
        bottom: calc(anchor(top) + 8px);
        top: auto;
        right: auto;
        transform: translateX(-50%);
    }
    /* la flèche reste sous l'infobulle, pointée vers le déclencheur */
    .tooltip .tooltiptext::after { top: 100%; }
}

/* Pour éviter le clipping des tooltips */
.appsy-table-actions,
.tooltip,
li:has(.tooltip),
div:has(.tooltip) {
    overflow: visible !important;
}

/* Conteneurs parents qui doivent permettre l'overflow des tooltips */
.bg-white.shadow.overflow-visible,
.space-y-3,
.flex.items-center.space-x-2:has(.tooltip),
.flex.items-center.space-x-1:has(.tooltip) {
    overflow: visible !important;
}

.appsy-table {
    position: relative;
}

.appsy-table .overflow-x-auto {
    overflow: visible !important;
}

.appsy-table table {
    position: relative;
}

/* ===== SELECT MENU MULTI-SÉLECTION (inspiré de patient-profil.php) ===== */
.appsy-multiselect-trigger {
    position: relative;
    width: 100%;
    background-color: var(--fond);
    border: 1px solid var(--secondaire);
    border-radius: 0.375rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    padding: 0.5rem 2.5rem 0.5rem 0.75rem;
    text-align: left;
    cursor: pointer;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.appsy-multiselect-trigger:focus {
    outline: none;
    ring: 1px;
    ring-color: var(--primaire-contraste);
    border-color: var(--primaire-contraste);
}

.appsy-multiselect-arrow {
    position: absolute;
    inset-y: 0;
    right: 0;
    display: flex;
    align-items: center;
    padding-right: 0.5rem;
    pointer-events: none;
}

.appsy-multiselect-arrow-icon {
    height: 1.25rem;
    width: 1.25rem;
    color: #9CA3AF;
    transition: transform 0.2s ease;
}

.appsy-multiselect-arrow-icon.rotate {
    transform: rotate(180deg);
}

.appsy-multiselect-dropdown {
    position: absolute;
    z-index: 60;
    margin-top: 0.25rem;
    width: 100%;
    background-color: var(--fond);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    max-height: 15rem;
    border-radius: 0.375rem;
    padding: 0.25rem 0;
    overflow: auto;
    ring: 1px;
    ring-color: rgba(0, 0, 0, 0.05);
}

.appsy-multiselect-option {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding: 0.5rem 1rem 0.5rem 2.5rem;
    color: #111827;
}

.appsy-multiselect-option:hover {
    background-color: var(--menu);
}

.appsy-multiselect-option.selected {
    background-color: var(--fond-bis);
}

.appsy-multiselect-check {
    position: absolute;
    inset-y: 0;
    left: 0;
    display: flex;
    align-items: center;
    padding-left: 0.75rem;
}

.appsy-multiselect-check-icon {
    height: 1.25rem;
    width: 1.25rem;
    color: var(--primaire-contraste);
}

.appsy-multiselect-empty {
    padding: 0.5rem 0.75rem;
    color: #6B7280;
    font-size: 0.875rem;
}

/* Style pour les badges de sélection */
.appsy-selection-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    background-color: var(--menu);
    border: 1px solid #C4B89D; /* Beige plus foncé */
    font-size: 0.875rem;
    color: var(--texte);
}

.appsy-selection-badge-remove {
    margin-left: 0.5rem;
    padding: 0;
    border: none;
    background: none;
    color: var(--primaire-contraste);
    transition: color 0.2s ease;
    cursor: pointer;
}

.appsy-selection-badge-remove:hover {
    color: var(--primaire);
}

/* ===== CHECKBOXES APPSY ===== */
/*
 * Checkboxes personnalisées avec palette Appsy
 * Non coché : bordure beige, fond poudre
 * Hover : bordure vert-clair
 * Coché : bordure et fond vert-foncé, coche poudre
 *
 * Usage : <input type="checkbox" class="appsy-checkbox" />
 */
.appsy-checkbox {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 1rem;
    height: 1rem;
    border-width: 1px;
    border-style: solid;
    border-color: var(--menu);
    border-radius: 0.25rem;
    background-color: var(--fond-bis);
    cursor: pointer;
    position: relative;
    transition: all 0.15s ease-in-out;
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
}

.appsy-checkbox:hover:not(:disabled) {
    border-color: var(--secondaire);
}

.appsy-checkbox:checked {
    background-color: var(--primaire-contraste);
    border-color: var(--primaire-contraste);
}

.appsy-checkbox:checked::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0.35rem;
    height: 0.6rem;
    border: solid var(--fond-bis);
    border-width: 0 2.5px 2.5px 0;
    transform: translate(-50%, -60%) rotate(45deg);
}

.appsy-checkbox:focus-visible {
    outline: 2px solid var(--secondaire);
    outline-offset: 2px;
}

.appsy-checkbox:disabled {
    background-color: #F3F4F6;
    border-color: #E5E7EB;
    cursor: not-allowed;
    opacity: 0.5;
}

/* Coche personnalisée pour les listes de sélection (patients, praticiens) */
.appsy-check-mark {
    position: relative;
    display: inline-block;
}

.appsy-check-mark::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0.35rem;
    height: 0.6rem;
    border: solid currentColor;
    border-width: 0 2.5px 2.5px 0;
    transform: translate(-50%, -60%) rotate(45deg);
}

/* ===== BOUTONS RADIO APPSY ===== */
/*
 * Boutons radio personnalisés avec palette Appsy
 * Désactivé : bordure beige, fond poudre
 * Hover : bordure vert-clair
 * Coché : bordure et point vert-fonce
 *
 * Usage : <input type="radio" class="appsy-radio" />
 */
.appsy-radio {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 1rem;
    height: 1rem;
    border-width: 1px;
    border-style: solid;
    border-color: var(--menu);
    border-radius: 9999px;
    background-color: var(--fond-bis);
    cursor: pointer;
    position: relative;
    transition: all 0.15s ease-in-out;
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
}

.appsy-radio:hover:not(:disabled) {
    border-color: var(--secondaire);
}

.appsy-radio:checked {
    background-color: var(--fond-bis);
    border-color: var(--primaire-contraste);
}

.appsy-radio:checked::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background-color: var(--primaire-contraste);
    transform: translate(-50%, -50%);
}

.appsy-radio:focus-visible {
    outline: 2px solid var(--secondaire);
    outline-offset: 2px;
}

.appsy-radio:disabled {
    background-color: #F3F4F6;
    border-color: #E5E7EB;
    cursor: not-allowed;
    opacity: 0.5;
}

/* ===== TOGGLES APPSY ===== */
/*
 * Toggle switches personnalisés avec palette Appsy
 * Style basé sur TailwindCSS avec couleurs personnalisées
 * Désactivé : fond beige, bouton blanc
 * Activé : fond vert-clair, bouton blanc
 *
 * Usage : <button type="button" role="switch" class="appsy-toggle" x-data="{ enabled: false }" @click="enabled = !enabled" :aria-checked="enabled.toString()">
 *           <span class="appsy-toggle-button" :class="enabled ? 'translate-x-5' : 'translate-x-0'"></span>
 *         </button>
 */
.appsy-toggle {
    position: relative;
    display: inline-flex;
    height: 1.5rem; /* h-6 = 24px */
    width: 2.75rem; /* w-11 = 44px */
    flex-shrink: 0;
    cursor: pointer;
    border-radius: 9999px;
    border: none;
    background-color: var(--menu); /* Couleur désactivé */
    transition: background-color 200ms ease-in-out;
    padding: 0;
}

.appsy-toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--secondaire);
}

.appsy-toggle[aria-checked="true"] {
    background-color: var(--secondaire); /* Couleur activé */
}

.appsy-toggle:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.appsy-toggle-button {
    pointer-events: none;
    display: inline-block;
    height: 20px; /* h-5 = 20px */
    width: 20px; /* w-5 = 20px */
    margin: 2px;
    border-radius: 9999px;
    background-color: white;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    transition: transform 200ms ease-in-out;
}

/* ===== MENUS SECONDAIRES APPSY ===== */
/*
 * Classe pour les onglets de menu secondaire (navigation latérale)
 * Apparence cohérente avec la palette Appsy
 * Actif : bg-beige, texte foncé, font-semibold
 * Inactif : texte gris, hover bg-gray-50
 * Icônes : toujours text-gray-500
 *
 * Usage :
 * <button :class="activeTab === 'tab-name' ? 'bg-beige text-gray-900 font-semibold' : 'text-gray-600 hover:text-gray-900 hover:bg-gray-50'"
 *         class="menu-item group w-full flex items-center px-2 py-2 text-xs font-medium rounded-md transition-all">
 *   <div class="mr-3 flex-shrink-0 h-5 w-5 text-gray-500" style="mask: url('icon.svg') ..."></div>
 *   Label
 * </button>
 *
 * Le style actif/inactif est géré dynamiquement par Alpine.js avec les classes Tailwind.
 */

/* Support pour l'ancien système avec classe toggle sur input checkbox */
/* Style basé sur TailwindCSS - Toggle Switch avec couleurs personnalisées */
input[type="checkbox"].toggle {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
    display: inline-flex;
    height: 1.5rem; /* h-6 = 24px */
    width: 2.75rem; /* w-11 = 44px */
    flex-shrink: 0;
    cursor: pointer;
    border-radius: 9999px;
    border: none;
    background-color: var(--border-strong); /* Piste éteinte : neutre (spec Design) */
    transition: background-color 200ms ease-in-out;
}

input[type="checkbox"].toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 4px var(--accent-soft);
}

input[type="checkbox"].toggle::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    height: 20px; /* h-5 = 20px */
    width: 20px; /* w-5 = 20px */
    border-radius: 9999px;
    background-color: white;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    pointer-events: none;
    transform: translateX(0);
    transition: transform 200ms ease-in-out;
}

input[type="checkbox"].toggle:checked {
    background-color: var(--green); /* Piste activée : vert (spec Design .snt-switch--on) */
}

input[type="checkbox"].toggle:checked::after {
    transform: translateX(20px); /* translate-x-5 = 20px */
    background-color: white;
}

input[type="checkbox"].toggle:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

/* ===== VALIDATION DES CHAMPS ===== */
/*
 * Styles pour les messages d'erreur de validation
 * Utilise la couleur "refus" pour signaler les erreurs
 * Animation élégante d'apparition
 */

/* Champ en erreur */
.appsy-input-error {
    border-color: var(--refus) !important;
}

/* Message d'erreur */
.appsy-error-message {
    margin-top: 0.375rem;
    font-size: 0.75rem;
    line-height: 1rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--refus);
}

/* Icône du message d'erreur */
.appsy-error-icon {
    display: inline-block;
    height: 0.875rem;
    width: 0.875rem;
    flex-shrink: 0;
    background-color: currentColor;
    mask: url('assets/icones/circle-alert.svg') no-repeat center;
    mask-size: contain;
    -webkit-mask: url('assets/icones/circle-alert.svg') no-repeat center;
    -webkit-mask-size: contain;
}

/* Animation d'apparition du message d'erreur */
.appsy-error-enter {
    animation: appsy-error-slide-in 0.2s ease-out forwards;
}

@keyframes appsy-error-slide-in {
    from {
        opacity: 0;
        transform: translateY(-0.25rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== SELECT MENU CUSTOM SIMPLE (liste déroulante) ===== */
/*
 * Select menu custom simple avec palette Appsy (inspiré de calendrier.php)
 * Utilisé dans les modales et formulaires pour les listes déroulantes
 *
 * Structure HTML:
 * <div x-data="{ open: false }">
 *   <button @click="open = !open" class="appsy-select-button">
 *     <span class="appsy-select-label">Texte sélectionné</span>
 *     <span class="appsy-select-icon-container">
 *       <svg class="appsy-select-icon">...</svg>
 *     </span>
 *   </button>
 *   <ul x-show="open" class="appsy-select-dropdown">
 *     <li class="appsy-select-option">
 *       <span class="appsy-select-option-label">Option 1</span>
 *       <span class="appsy-select-check">
 *         <svg>...</svg>
 *       </span>
 *     </li>
 *   </ul>
 * </div>
 */

/* Bouton du select menu */
.appsy-select-button {
    position: relative;
    width: 100%;
    cursor: pointer;
    border-radius: 0.5rem; /* rounded-lg */
    background-color: var(--fond);
    padding: 0.5rem 2.5rem 0.5rem 0.75rem; /* py-2 pl-3 pr-10 */
    text-align: left;
    color: var(--texte);
    border: 1px solid var(--menu);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    font-size: 0.875rem; /* text-sm */
    transition: all 0.2s ease;
}

.appsy-select-button:focus {
    outline: none;
    border-color: var(--primaire-contraste);
    box-shadow: 0 0 0 1px var(--primaire-contraste);
}

/* Label du select */
.appsy-select-label {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Conteneur de l'icône chevron */
.appsy-select-icon-container {
    pointer-events: none;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    display: flex;
    align-items: center;
    padding-right: 0.5rem;
}

/* Icône chevron */
.appsy-select-icon {
    height: 1.25rem;
    width: 1.25rem;
    color: var(--secondaire);
}

/* Dropdown du select menu */
.appsy-select-dropdown {
    position: absolute;
    z-index: 10;
    margin-top: 0.25rem;
    max-height: 15rem;
    width: 100%;
    overflow: auto;
    border-radius: 0.5rem; /* rounded-lg */
    background-color: var(--fond);
    padding: 0.25rem 0;
    font-size: 0.875rem; /* text-sm */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.05);
}

/* Option du select menu */
.appsy-select-option {
    position: relative;
    cursor: pointer;
    user-select: none;
    padding: 0.5rem 2.25rem 0.5rem 0.75rem; /* py-2 pl-3 pr-9 */
    color: var(--texte);
    transition: background-color 0.2s ease;
}

.appsy-select-option:hover {
    background-color: var(--menu);
}

/* Option sélectionnée */
.appsy-select-option.selected {
    background-color: var(--primaire-contraste);
    color: var(--fond-bis);
}

/* Label de l'option */
.appsy-select-option-label {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.appsy-select-option.selected .appsy-select-option-label {
    font-weight: 600; /* font-semibold */
}

/* Coche de sélection */
.appsy-select-check {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    display: flex;
    align-items: center;
    padding-right: 1rem;
    color: var(--fond-bis);
}

.appsy-select-check svg {
    height: 1.25rem;
    width: 1.25rem;
}

/* ===== MODALES APPSY ===== */
/*
 * RÈGLE IMPÉRATIVE — Pas de sursaut à l'ouverture ni à la fermeture
 * ─────────────────────────────────────────────────────────────────
 * Les données doivent être CHARGÉES AVANT l'affichage et EFFACÉES APRÈS
 * la fermeture (une fois l'animation terminée).
 *
 * Patron Alpine.js obligatoire :
 *
 *   async openModal(item) {
 *       await this.loadModalData(item);   // fetch d'abord
 *       this.showModal = true;            // afficher ensuite, déjà rempli
 *   }
 *
 *   closeModal() {
 *       this.showModal = false;
 *       setTimeout(() => {
 *           this.modalData = null;        // nettoyer après la transition (≈ 300ms)
 *       }, 300);
 *   }
 *
 * Le setTimeout doit correspondre à la durée de x-transition:leave dans le HTML.
 *
 * ─────────────────────────────────────────────────────────────────
 * Structure HTML type avec classes appsy-modal-* :
 *
 *   <div x-show="showModal" x-cloak class="fixed inset-0 z-50">
 *     <div class="appsy-modal-overlay" @click="closeModal()"></div>
 *     <div class="appsy-modal-container">
 *       <div class="appsy-modal-panel sm:max-w-lg">
 *         <div class="appsy-modal-header flex items-center justify-between">
 *           <h3 class="appsy-modal-title">Titre</h3>
 *           <button class="appsy-modal-close" @click="closeModal()">…</button>
 *         </div>
 *         <div class="appsy-modal-content">   ← scrollable, flex-1
 *           …contenu…
 *         </div>
 *         <div class="appsy-modal-footer flex justify-end gap-3">
 *           <button class="btn-secondary" @click="closeModal()">Annuler</button>
 *           <button class="btn-primary">Confirmer</button>
 *         </div>
 *       </div>
 *     </div>
 *   </div>
 */

/* Overlay de la modale */
.appsy-modal-overlay {
    position: fixed;
    inset: 0;
    /* Couche « modaux applicatifs » : au-dessus de la barre supérieure (z-index 10/100)
       et de son centre de notifications, mais sous l'aperçu PDF (10000) et les toasts. */
    z-index: 1000;
    background-color: rgb(107, 114, 128); /* gray-500 */
    opacity: 0.75; /* bg-opacity-75 */
    transition-property: opacity;
}

/* Container de la modale (wrapper flexbox pour centrage) */
.appsy-modal-container {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: 100vh;
    padding: 1rem 0;
}

@media (min-width: 640px) {
    .appsy-modal-container {
        align-items: center;
        padding: 1rem;
    }
}

/* Panel de la modale */
.appsy-modal-panel {
    width: 100%;
    max-height: 90vh;
    background-color: var(--case);
    color: var(--texte);
    border-radius: 1rem 1rem 0 0; /* rounded-t-2xl */
    text-align: left;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    transform: translateZ(0);
    transition-property: all;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

@media (min-width: 640px) {
    .appsy-modal-panel {
        max-height: 85vh;
        border-radius: 1rem; /* rounded-2xl */
        max-width: 48rem; /* max-w-3xl */
    }
}

/* Header de la modale (fixe) */
.appsy-modal-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--secondaire);
    background-color: var(--primaire-contraste);
    flex-shrink: 0;
}

/* Titre de la modale */
.appsy-modal-title {
    font-size: 1.125rem; /* text-lg */
    font-weight: 600; /* font-semibold */
    color: var(--fond-bis);
}

/* Sous-titre de la modale */
.appsy-modal-subtitle {
    font-size: 0.875rem; /* text-sm */
    color: var(--secondaire);
}

/* Bouton de fermeture de la modale */
.appsy-modal-close {
    color: var(--fond-bis);
    transition: color 0.2s ease;
}

.appsy-modal-close:hover {
    color: var(--secondaire);
}

/* Contenu scrollable de la modale */
.appsy-modal-content {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

@media (min-width: 640px) {
    .appsy-modal-content {
        padding: 1.5rem;
    }
}

/* Footer de la modale (fixe) */
.appsy-modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--secondaire);
    background-color: var(--fond);
    flex-shrink: 0;
}

/* Progress bar pour étapes de création (calendar modal) */
.appsy-progress-bar-container {
    display: flex;
    gap: 0.5rem;
}

.appsy-progress-bar-step {
    flex: 1;
    background-color: var(--menu);
    border-radius: 9999px; /* rounded-full */
    height: 0.5rem;
    overflow: hidden;
}

.appsy-progress-bar-fill {
    height: 100%;
    background-color: var(--primaire-contraste);
    border-radius: 9999px; /* rounded-full */
    transition: width 0.3s ease;
}

/* ===== MENU CONTEXTUEL (Dropdown action menu) ===== */
/*
 * Menu contextuel pour actions sur les rendez-vous
 * Fond poudre avec hover beige, transitions fluides
 */

.appsy-context-menu {
    position: fixed;
    z-index: 50;
    width: 12rem; /* w-48 */
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    background-color: var(--fond-bis);
}

.appsy-context-menu-item {
    width: 100%;
    text-align: left;
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem; /* text-xs */
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: background-color 0.2s ease;
}

.appsy-context-menu-item:hover {
    background-color: var(--fond);
}

.appsy-context-menu-item-icon {
    height: 1.75rem;
    width: 1.75rem;
    border-radius: 0.375rem; /* rounded-md */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}

.appsy-context-menu-item-label {
    font-weight: 500; /* font-medium */
    color: var(--texte);
}

/* ===== MODAL DE SUPPRESSION / CONFIRMATION ===== */
/*
 * Modal de confirmation pour les actions destructives
 * Header avec icône rouge, message d'avertissement
 */

.appsy-delete-modal-icon-container {
    flex-shrink: 0;
    height: 2.5rem;
    width: 2.5rem;
    background-color: #FEE2E2; /* red-100 */
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.appsy-delete-modal-warning-box {
    padding: 1rem;
    background-color: #FEE2E2; /* red-50 */
    border: 1px solid #FECACA; /* red-200 */
    border-radius: 0.5rem;
}

.appsy-delete-modal-warning-title {
    font-size: 0.875rem;
    font-weight: 500;
    color: #991B1B; /* red-800 */
}

.appsy-delete-modal-warning-text {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: #B91C1C; /* red-700 */
}

/* Bouton de suppression définitive */
.appsy-delete-button {
    width: 100%;
    display: inline-flex;
    justify-content: center;
    border-radius: 0.375rem;
    border: 1px solid transparent;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    padding: 0.5rem 1rem;
    background-color: var(--refus);
    font-size: 0.875rem;
    font-weight: 500;
    color: white;
    transition: background-color 0.2s ease;
}

.appsy-delete-button:hover {
    background-color: #B91C1C; /* red-700 */
}

@media (min-width: 640px) {
    .appsy-delete-button {
        margin-left: 0.75rem;
        width: auto;
        font-size: 0.875rem;
    }
}

/* ===== MODALES D'AVERTISSEMENT RÉUTILISABLES ===== */
/*
 * Classes pour créer des modales d'avertissement cohérentes
 * Variantes : danger (rouge), warning (orange/ambre), info (bleu)
 *
 * Structure HTML :
 * <div class="modal-warning">
 *     <div class="modal-warning-header">
 *         <div class="modal-warning-icon modal-warning-icon--danger">...</div>
 *         <div class="modal-warning-title">...</div>
 *     </div>
 *     <div class="modal-warning-alert modal-warning-alert--danger">...</div>
 *     <div class="modal-warning-footer">...</div>
 * </div>
 */

/* Conteneur principal */
.modal-warning {
    background-color: white;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* En-tête avec icône */
.modal-warning-header {
    display: flex;
    align-items: flex-start;
    padding: 1.5rem;
    padding-bottom: 1rem;
}

/* Icône de l'en-tête - Base */
.modal-warning-icon {
    flex-shrink: 0;
    height: 2.5rem;
    width: 2.5rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-warning-icon > div {
    height: 1.5rem;
    width: 1.5rem;
}

/* Variante Danger (rouge) */
.modal-warning-icon--danger {
    background-color: #FEE2E2; /* red-100 */
}

.modal-warning-icon--danger > div {
    background-color: var(--refus);
}

/* Variante Warning (orange/ambre) */
.modal-warning-icon--warning {
    background-color: #FEF3C7; /* amber-100 */
}

.modal-warning-icon--warning > div {
    background-color: #F59E0B; /* amber-500 */
}

/* Variante Info (primaire) */
.modal-warning-icon--info {
    background-color: color-mix(in srgb, var(--primaire) 15%, white);
}

.modal-warning-icon--info > div {
    background-color: var(--primaire);
}

/* Titre et description */
.modal-warning-title {
    margin-left: 1rem;
}

.modal-warning-title h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: #111827; /* gray-900 */
    line-height: 1.5rem;
}

.modal-warning-title p {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: #6B7280; /* gray-500 */
}

/* Bloc d'alerte */
.modal-warning-alert {
    margin: 0 1.5rem 1.5rem;
    padding: 1rem;
    border-radius: 0.5rem;
    border-left-width: 4px;
    border-left-style: solid;
}

.modal-warning-alert-content {
    display: flex;
}

.modal-warning-alert-icon {
    flex-shrink: 0;
    height: 1.25rem;
    width: 1.25rem;
}

.modal-warning-alert-text {
    margin-left: 0.75rem;
    font-size: 0.875rem;
}

.modal-warning-alert-text strong {
    font-weight: 500;
}

/* Alerte Danger */
.modal-warning-alert--danger {
    background-color: #FEF2F2; /* red-50 */
    border-left-color: #F87171; /* red-400 */
}

.modal-warning-alert--danger .modal-warning-alert-icon {
    background-color: var(--refus);
}

.modal-warning-alert--danger .modal-warning-alert-text {
    color: #B91C1C; /* red-700 */
}

.modal-warning-alert--danger .modal-warning-alert-text strong {
    color: #991B1B; /* red-800 */
}

/* Alerte Warning (ambre) */
.modal-warning-alert--warning {
    background-color: #FFFBEB; /* amber-50 */
    border-left-color: #FBBF24; /* amber-400 */
}

.modal-warning-alert--warning .modal-warning-alert-icon {
    background-color: #F59E0B; /* amber-500 */
}

.modal-warning-alert--warning .modal-warning-alert-text {
    color: #B45309; /* amber-700 */
}

.modal-warning-alert--warning .modal-warning-alert-text strong {
    color: #92400E; /* amber-800 */
}

/* Alerte Info (primaire) */
.modal-warning-alert--info {
    background-color: color-mix(in srgb, var(--primaire) 8%, white);
    border-left-color: color-mix(in srgb, var(--primaire) 50%, white);
}

.modal-warning-alert--info .modal-warning-alert-icon {
    background-color: var(--primaire);
}

.modal-warning-alert--info .modal-warning-alert-text {
    color: color-mix(in srgb, var(--primaire) 85%, black);
}

.modal-warning-alert--info .modal-warning-alert-text strong {
    color: color-mix(in srgb, var(--primaire) 100%, black);
}

/* Liste dans l'alerte */
.modal-warning-alert-list {
    margin-top: 0.5rem;
    padding-left: 1.25rem;
    list-style-type: disc;
}

.modal-warning-alert-list li {
    margin-top: 0.25rem;
}

/* Footer avec boutons */
.modal-warning-footer {
    padding: 1rem 1.5rem;
    background-color: var(--fond);
    border-radius: 0 0 0.5rem 0.5rem;
    display: flex;
    flex-direction: column-reverse;
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .modal-warning-footer {
        flex-direction: row;
        justify-content: flex-end;
    }
}

/* Boutons d'action — même base que btn-primary / btn-secondary */
.modal-warning-btn {
    width: 100%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0.625rem 1.25rem;
    border-radius: 0.5rem;
    border: 1px solid;
    font-size: 0.875rem;
    font-weight: 500;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
    cursor: pointer;
}

@media (min-width: 640px) {
    .modal-warning-btn {
        width: auto;
    }
}

/* Boutons de validation (danger, warning, info) — style btn-primary */
.modal-warning-btn--danger,
.modal-warning-btn--warning,
.modal-warning-btn--info {
    background-color: var(--primaire);
    color: white;
    border: 1px solid var(--secondaire);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.modal-warning-btn--danger:hover,
.modal-warning-btn--warning:hover,
.modal-warning-btn--info:hover {
    background-color: var(--primaire-contraste);
    border-color: var(--primaire);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.modal-warning-btn--danger:focus,
.modal-warning-btn--warning:focus,
.modal-warning-btn--info:focus {
    outline: none;
    box-shadow: 0 0 0 2px white, 0 0 0 4px var(--primaire);
}

/* Bouton de validation succès (vert) */
.modal-warning-btn--success {
    background-color: #059669; /* emerald-600 */
    color: white;
    border: 1px solid #047857; /* emerald-700 */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.modal-warning-btn--success:hover {
    background-color: #047857; /* emerald-700 */
    border-color: #065f46; /* emerald-800 */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.modal-warning-btn--success:focus {
    outline: none;
    box-shadow: 0 0 0 2px white, 0 0 0 4px #059669;
}

/* Bouton d'annulation — style btn-secondary */
.modal-warning-btn--secondary {
    background-color: var(--fond-bis);
    color: var(--primaire-contraste);
    border: 1px solid var(--menu);
}

.modal-warning-btn--secondary:hover {
    background-color: var(--secondaire);
    border-color: var(--primaire);
    color: white;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.modal-warning-btn--secondary:focus {
    outline: none;
    box-shadow: 0 0 0 2px white, 0 0 0 4px var(--primaire);
}

/* ===== MODALES D'AVERTISSEMENT ET CONFIRMATION - VARIANTES COMPLÈTES ===== */
/*
 * Classes réutilisables pour les modales d'avertissement et de confirmation
 *
 * 3 variantes disponibles :
 * - DANGER (rouge) : actions destructives, suppression, annulation critique
 * - WARNING (orange/ambre) : avertissements, actions à considérer
 * - CONFIRM (bleu/vert) : confirmations positives, validations
 *
 * Structure HTML recommandée :
 * <div class="appsy-modal-alert appsy-modal-alert--danger">
 *     <div class="appsy-modal-alert-header">
 *         <div class="appsy-modal-alert-icon">
 *             <div style="mask: url(...)"></div>
 *         </div>
 *         <div class="appsy-modal-alert-titles">
 *             <h3>Titre du modal</h3>
 *             <p>Sous-titre facultatif</p>
 *         </div>
 *     </div>
 *     <div class="appsy-modal-alert-body">
 *         <!-- Contenu -->
 *     </div>
 *     <div class="appsy-modal-alert-footer">
 *         <button class="appsy-modal-alert-btn appsy-modal-alert-btn--cancel">Annuler</button>
 *         <button class="appsy-modal-alert-btn appsy-modal-alert-btn--danger">Confirmer</button>
 *     </div>
 * </div>
 */

/* Conteneur principal du modal */
.appsy-modal-alert {
    background-color: white;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    width: 100%;
    max-width: 28rem; /* max-w-md */
}

/* En-tête avec icône et titres */
.appsy-modal-alert-header {
    display: flex;
    align-items: flex-start;
    padding: 1.5rem;
    padding-bottom: 1rem;
}

/* Icône carrée aux bords arrondis */
.appsy-modal-alert-icon {
    flex-shrink: 0;
    height: 2.5rem;
    width: 2.5rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.appsy-modal-alert-icon > div {
    height: 1.5rem;
    width: 1.5rem;
}

/* Titres */
.appsy-modal-alert-titles {
    margin-left: 1rem;
    flex: 1;
}

.appsy-modal-alert-titles h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: #111827;
    line-height: 1.5rem;
    margin: 0;
}

.appsy-modal-alert-titles p {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: #6B7280;
    margin-bottom: 0;
}

/* Corps du modal */
.appsy-modal-alert-body {
    padding: 0 1.5rem 1.5rem;
}

/* Footer avec boutons */
.appsy-modal-alert-footer {
    padding: 1rem 1.5rem;
    background-color: var(--fond);
    display: flex;
    flex-direction: column-reverse;
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .appsy-modal-alert-footer {
        flex-direction: row;
        justify-content: flex-end;
    }
}

/* Boutons de base */
.appsy-modal-alert-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0.625rem 1.25rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
    cursor: pointer;
    border: 1px solid transparent;
    min-width: 6rem;
    width: 100%;
}

@media (min-width: 640px) {
    .appsy-modal-alert-btn {
        width: auto;
    }
}

/* Bouton Annuler (secondaire) */
.appsy-modal-alert-btn--cancel {
    background-color: white;
    color: #374151;
    border-color: var(--menu);
}

.appsy-modal-alert-btn--cancel:hover {
    background-color: var(--fond-bis);
    border-color: var(--menu-contraste);
}

.appsy-modal-alert-btn--cancel:focus {
    outline: none;
    box-shadow: 0 0 0 2px white, 0 0 0 4px var(--secondaire);
}

/* ========== VARIANTE DANGER (Rouge) ========== */
.appsy-modal-alert--danger .appsy-modal-alert-icon {
    background-color: #FEE2E2; /* red-100 */
}

.appsy-modal-alert--danger .appsy-modal-alert-icon > div {
    background-color: var(--refus);
}

/* Bouton principal danger */
.appsy-modal-alert-btn--danger {
    background-color: var(--refus);
    color: var(--faux-blanc);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.appsy-modal-alert-btn--danger:hover {
    background-color: #991B1B; /* red-800 - plus foncé */
    color: var(--faux-blanc);
}

.appsy-modal-alert-btn--danger:focus {
    outline: none;
    box-shadow: 0 0 0 2px white, 0 0 0 4px #DC2626;
}

.appsy-modal-alert-btn--danger:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ========== VARIANTE WARNING (Orange/Ambre) ========== */
.appsy-modal-alert--warning .appsy-modal-alert-icon {
    background-color: #FEF3C7; /* amber-100 */
}

.appsy-modal-alert--warning .appsy-modal-alert-icon > div {
    background-color: #F59E0B; /* amber-500 */
}

/* Bouton principal warning */
.appsy-modal-alert-btn--warning {
    background-color: #F59E0B;
    color: var(--faux-blanc);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.appsy-modal-alert-btn--warning:hover {
    background-color: #B45309; /* amber-700 - plus foncé */
    color: var(--faux-blanc);
}

.appsy-modal-alert-btn--warning:focus {
    outline: none;
    box-shadow: 0 0 0 2px white, 0 0 0 4px #F59E0B;
}

.appsy-modal-alert-btn--warning:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ========== VARIANTE CONFIRM (Bleu) ========== */
.appsy-modal-alert--confirm .appsy-modal-alert-icon {
    background-color: #DBEAFE; /* blue-100 */
}

.appsy-modal-alert--confirm .appsy-modal-alert-icon > div {
    background-color: #3B82F6; /* blue-500 */
}

/* Bouton principal confirm */
.appsy-modal-alert-btn--confirm {
    background-color: #3B82F6;
    color: var(--faux-blanc);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.appsy-modal-alert-btn--confirm:hover {
    background-color: #1D4ED8; /* blue-700 - plus foncé */
    color: var(--faux-blanc);
}

.appsy-modal-alert-btn--confirm:focus {
    outline: none;
    box-shadow: 0 0 0 2px white, 0 0 0 4px #3B82F6;
}

.appsy-modal-alert-btn--confirm:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ========== VARIANTE SUCCESS (Vert) ========== */
.appsy-modal-alert--success .appsy-modal-alert-icon {
    background-color: #D1FAE5; /* green-100 */
}

.appsy-modal-alert--success .appsy-modal-alert-icon > div {
    background-color: #10B981; /* green-500 */
}

/* Bouton principal success */
.appsy-modal-alert-btn--success {
    background-color: #10B981;
    color: var(--faux-blanc);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.appsy-modal-alert-btn--success:hover {
    background-color: #047857; /* green-700 - plus foncé */
    color: var(--faux-blanc);
}

.appsy-modal-alert-btn--success:focus {
    outline: none;
    box-shadow: 0 0 0 2px white, 0 0 0 4px #10B981;
}

.appsy-modal-alert-btn--success:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ========== BLOCS D'ALERTE DANS LE CORPS ========== */
.appsy-modal-alert-box {
    padding: 1rem;
    border-radius: 0.5rem;
    border-left-width: 4px;
    border-left-style: solid;
}

.appsy-modal-alert-box-content {
    display: flex;
}

.appsy-modal-alert-box-icon {
    flex-shrink: 0;
    height: 1.25rem;
    width: 1.25rem;
}

.appsy-modal-alert-box-text {
    margin-left: 0.75rem;
    font-size: 0.875rem;
}

.appsy-modal-alert-box-text strong {
    font-weight: 600;
}

/* Bloc d'alerte danger */
.appsy-modal-alert-box--danger {
    background-color: #FEF2F2;
    border-left-color: #F87171;
}

.appsy-modal-alert-box--danger .appsy-modal-alert-box-icon {
    background-color: var(--refus);
}

.appsy-modal-alert-box--danger .appsy-modal-alert-box-text {
    color: #B91C1C;
}

.appsy-modal-alert-box--danger .appsy-modal-alert-box-text strong {
    color: #991B1B;
}

/* Bloc d'alerte warning */
.appsy-modal-alert-box--warning {
    background-color: #FFFBEB;
    border-left-color: #FBBF24;
}

.appsy-modal-alert-box--warning .appsy-modal-alert-box-icon {
    background-color: #F59E0B;
}

.appsy-modal-alert-box--warning .appsy-modal-alert-box-text {
    color: #B45309;
}

.appsy-modal-alert-box--warning .appsy-modal-alert-box-text strong {
    color: #92400E;
}

/* Bloc d'alerte info */
.appsy-modal-alert-box--info {
    background-color: #EFF6FF;
    border-left-color: #60A5FA;
}

.appsy-modal-alert-box--info .appsy-modal-alert-box-icon {
    background-color: #3B82F6;
}

.appsy-modal-alert-box--info .appsy-modal-alert-box-text {
    color: #1D4ED8;
}

.appsy-modal-alert-box--info .appsy-modal-alert-box-text strong {
    color: #1E40AF;
}

/* Liste dans les blocs d'alerte */
.appsy-modal-alert-box-list {
    margin-top: 0.5rem;
    padding-left: 1.25rem;
    list-style-type: disc;
}

.appsy-modal-alert-box-list li {
    margin-top: 0.25rem;
}

/* ========== OPTIONS RADIO/CHECKBOX DANS LE MODAL ========== */
.appsy-modal-alert-options {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.appsy-modal-alert-option {
    display: flex;
    align-items: flex-start;
    padding: 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background-color: rgba(0, 0, 0, 0.02);
    cursor: pointer;
    transition: all 0.2s ease;
}

.appsy-modal-alert-option:hover {
    border-color: rgba(0, 0, 0, 0.15);
    background-color: rgba(255, 255, 255, 0.6);
}

.appsy-modal-alert-option.selected {
    border-color: rgba(0, 0, 0, 0.2);
    background-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
}

.appsy-modal-alert-option-label {
    margin-left: 0.75rem;
}

.appsy-modal-alert-option-label span {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #111827;
}

.appsy-modal-alert-option-label p {
    margin-top: 0.125rem;
    font-size: 0.75rem;
    color: #6B7280;
}

/* Message d'erreur dans le modal */
.appsy-modal-alert-error {
    margin-top: 1rem;
    padding: 0.75rem;
    background-color: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.appsy-modal-alert-error-icon {
    flex-shrink: 0;
    height: 1rem;
    width: 1rem;
    background-color: var(--refus);
}

.appsy-modal-alert-error-text {
    font-size: 0.875rem;
    color: #B91C1C;
}

/* ========== CARTES D'OPTION (sélecteur de type : calcul, condition, créditeur…) ========== */
/*
 * Utilisation (Alpine.js) :
 *   <label class="option-card" :class="active ? 'option-card--active' : 'option-card--inactive'">
 *
 * Variante inline (compatible Tailwind CDN) :
 *   :class="active ? 'border-taupe bg-fond bg-opacity-30' : 'border-gray-200 hover:border-gray-300'"
 */
.option-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.75rem;
    border: 1px solid;
    border-radius: 0.5rem;
    cursor: pointer;
    text-align: center;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.option-card--active {
    border-color: var(--primaire-contraste); /* taupe */
    background-color: color-mix(in srgb, var(--menu) 30%, transparent);
}

.option-card--inactive {
    border-color: #E5E7EB; /* gray-200 */
}

.option-card--inactive:hover {
    border-color: #D1D5DB; /* gray-300 */
}

/* ========== LIGNES RADIO (sélecteur de condition d'application, etc.) ========== */
/*
 * Utilisation (Alpine.js) :
 *   <label class="radio-row" :class="active ? 'radio-row--active' : 'radio-row--inactive'">
 *     <div class="radio-indicator" :class="active ? 'radio-indicator--active' : ''">
 *       <div x-show="active" class="radio-dot"></div>
 *     </div>
 *   </label>
 */
.radio-row {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    border: 1px solid;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.radio-row--active {
    border-color: var(--primaire-contraste); /* taupe */
    background-color: color-mix(in srgb, var(--menu) 30%, transparent);
}

.radio-row--inactive {
    border-color: #E5E7EB; /* gray-200 */
}

.radio-row--inactive:hover {
    border-color: #D1D5DB; /* gray-300 */
}

/* Indicateur radio (cercle + point) */
.radio-indicator {
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    border-radius: 9999px;
    border: 2px solid #D1D5DB; /* gray-300 par défaut */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: border-color 0.15s ease;
}

.radio-indicator--active {
    border-color: var(--menu-contraste);
}

.radio-dot {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 9999px;
    background-color: var(--primaire-contraste);
}

/* ========== BOUTONS DE PÉRIODE (Jour / Semaine / Mois / Année) ========== */
/*
 * Utilisation (Alpine.js) :
 *   <button class="period-btn" :class="active ? 'period-btn--active' : 'period-btn--inactive'">
 */
.period-btn {
    padding: 0.5rem 0.75rem;
    border: 1px solid;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.period-btn--active {
    border-color: var(--primaire-contraste); /* taupe */
    background-color: color-mix(in srgb, var(--menu) 30%, transparent);
    color: #111827; /* gray-900 */
}

.period-btn--inactive {
    border-color: #E5E7EB; /* gray-200 */
    color: #4B5563; /* gray-600 */
}

.period-btn--inactive:hover {
    border-color: #D1D5DB; /* gray-300 */
}

/* ========== POPOVER BULLE REUTILISABLE (santei-popover) ========== */
/*
 * Bulle contextuelle avec fleche, utilisee pour :
 *   - Scan d'approbation devis
 *   - Selecteur de format de date/nombre
 *   - Options de variable accord
 *
 * Usage :
 *   <div class="santei-popover santei-popover--top">
 *       ...contenu...
 *       <div class="santei-popover-arrow"></div>
 *   </div>
 *
 * Modificateurs de position :
 *   --top     : bulle au-dessus, fleche en bas (defaut)
 *   --bottom  : bulle en dessous, fleche en haut
 */
.santei-popover {
    position: absolute;
    z-index: 60;
    background: white;
    border-radius: 0.75rem;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 4px 10px -5px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.08);
    padding: 0.75rem;
}

.santei-popover--top {
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 0.75rem;
}

.santei-popover--bottom {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 0.75rem;
}

.santei-popover-arrow {
    position: absolute;
    width: 0.75rem;
    height: 0.75rem;
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.08);
    transform: rotate(45deg);
    left: 50%;
    margin-left: -0.375rem;
}

.santei-popover--top .santei-popover-arrow {
    top: 100%;
    margin-top: -0.4375rem;
    border-top: none;
    border-left: none;
}

.santei-popover--bottom .santei-popover-arrow {
    bottom: 100%;
    margin-bottom: -0.4375rem;
    border-bottom: none;
    border-right: none;
}

/* ===== TITRES & CADRES DE CONTENU APPSY =====
 *
 * Composants partagés entre facturation.php et patient-profil.php (onglet
 * Facturation). L'objectif : un look homogène, les mêmes coins arrondis
 * partout (rounded-lg / 0.5rem), une ombre douce et des couleurs cohérentes.
 *
 * Utilisation :
 *   <div class="appsy-content-card">
 *     <h2 class="appsy-page-title">Apparence des factures</h2>
 *     <p class="appsy-page-subtitle">Personnalisez l'apparence…</p>
 *
 *     <h3 class="appsy-section-title">Logo</h3>
 *     <p class="appsy-section-subtitle">Format accepté : PNG, JPG, SVG.</p>
 *     …
 *   </div>
 *
 * Modificateurs : .appsy-content-card--compact (padding réduit)
 */

/* Titre de page (h2) */
.appsy-page-title {
    font-size: 1.5rem;     /* text-2xl */
    line-height: 2rem;
    font-weight: 700;       /* font-bold */
    color: #111827;         /* text-gray-900 */
}

.appsy-page-subtitle {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: #4B5563;         /* text-gray-600 */
}

/* Titre de section (h3) dans une carte */
.appsy-section-title {
    font-size: 1.125rem;    /* text-lg */
    line-height: 1.75rem;
    font-weight: 600;       /* font-semibold */
    color: var(--texte);
}

.appsy-section-subtitle {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: #6B7280;         /* text-gray-500 */
}

/* Cadre de contenu : la "carte" qui contient une section */
.appsy-content-card {
    background-color: var(--case);
    border: 1px solid #F3F4F6;         /* border-gray-100 */
    border-radius: 0.5rem;             /* rounded-lg — uniforme */
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
    padding: 1.5rem;                    /* p-6 */
    margin-bottom: 1.5rem;              /* mb-6 */
}

.appsy-content-card--compact {
    padding: 1rem;                      /* p-4 */
}

/* En-tête au sein d'une carte (titre + actions à droite) */
.appsy-content-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

/* Variantes colorées des cartes (pour soldes, alertes) — coins arrondis identiques */
.appsy-content-card--danger {
    border-color: #FECACA;              /* border-red-200 */
}

.appsy-content-card--success {
    border-color: #A7F3D0;              /* border-emerald-200 */
}

.appsy-content-card--warning {
    border-color: #FDE68A;              /* border-amber-200 */
}

.appsy-content-card--info {
    border-color: #BFDBFE;              /* border-blue-200 */
}