/* --- CSS / STYLES --- */
    :root
    {
        --primary:#3498db;
        --accent:#e74c3c;
        --success:#2ecc71;
        --warning:#f1c40f;
        --ignored:#e67e22;
    /* Orange pour HS non comptées */
        --bg:#121212;
        --card:#1e1e1e;
        --cardlate:#1e1e1e66;
        --bglate:#121212b3;
        --text:#e0e0e0;
        --text-muted:#a0a0a0;
        --border:#333;
        --danger:#e74c3c;
    /* Rouge pour HS désactivées */
        --safe-top:20px
    }

    header
    {
        background-color:#121212
    }

    #color-picker-container
    {
        display:flex;
        flex-wrap:wrap;
        gap:12px;
        justify-content:center;
    /* Centre les pastilles s'il y a du vide */
        padding:10px;
        max-height:400px;
        overflow-y:auto
    }

    .color-dot
    {
        flex:0 0 45px;
    /* Ne grandit pas, ne rétrécit pas, base de 45px */
        height:45px;
        border-radius:10px;
        border:2px solid #ffffff1a;
        cursor:pointer
    }

    .color-dot:active
    {
        transform:scale(0.9)
    /* Effet de pression au clic */
    }

    #no-schedule-warning disabled
    {
        display:none
    }

    .month-stats-row
    {
        display:flex;
        justify-content:space-between;
        gap:6px;
    /* Espace réduit entre les cartes */
        padding:10px 15px;
        width:100%;
        box-sizing:border-box
    }

    .stat-card
    {
        flex:1;
    /* Force les 4 cartes à avoir la même largeur */
        min-width:0;
    /* Empêche le contenu de casser la largeur sur mobile */
        background:#1e1e1e;
        border-radius:8px;
        text-align:center;
        display:flex;
        flex-direction:column;
        gap:3px;
        border:1px solid #333
    }

    .stat-val
    {
        font-size:.95rem;
    /* Taille de police légèrement réduite */
        font-weight:bold;
        color:#fff;
        white-space:nowrap
    /* Empêche l'heure de passer sur deux lignes */
    }

    .stat-label
    {
        font-size:.6rem;
    /* Label très compact */
        color:#888;
        text-transform:uppercase;
        font-weight:700;
        white-space:nowrap;
        display:flex;
        align-items:center;
        justify-content:center;
        gap:3px
    }

    #page-chrono
    {
        display:none;
    /* Reste géré par ton JS pour l'affichage */
        flex-direction:column;
        height:100%;
    /* Important pour le centrage */
        padding-bottom:20px
    /* Espace entre le bouton et la nav bar */
    }

    #page-chrono.active
    {
        display:flex
    /* Devient un flex container quand actif */
    }

    /* On crée un conteneur qui va pousser le bouton vers le bas */
    .timer-container
    {
        flex:1;
    /* Prend tout l'espace libre au milieu */
        display:flex;
        flex-direction:column;
        justify-content:center;
    /* Centre verticalement le cercle */
        align-items:center
    /* Centre horizontalement le cercle */
    }

    #page-chrono .chrono-footer
    {
        margin-bottom:20px
    }

    /* On s'assure que le bouton reste en bas de la section */
    .chrono-footer
    {
        width:100%;
        padding:0 20px;
        margin-top:auto
    /* Pousse vers le bas */
    }

    select
    {
        width:100%;
        min-width:100%;
        display:block;
        -webkit-appearance:none;
        -moz-appearance:none;
        appearance:none;
        background-color:#2c2c2c;
        color:#fff;
    /* On augmente le padding à droite (40px) pour que le texte ne chevauche pas la flèche */
        padding:12px 40px 12px 12px;
        border:1px solid var(--border);
        border-radius:8px;
        font-size:16px;
    /* 16px strict pour éviter le zoom iOS */
    /* SVG encodé proprement pour Safari */
        background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
        background-repeat:no-repeat;
        background-position:calc(100% - 12px) center;
    /* Positionnement précis à 12px du bord droit */
        background-size:16px;
        cursor:pointer
    }

    /* Optionnel : Enlever la flèche par défaut de l'IE/Edge */
    select::-ms-expand
    {
        display:none
    }

    /* Fix pour éviter le zoom automatique de Safari sur iPhone lors du clic */
    @media screen and (max-width: 768px) {
        select,input
        {
            font-size:16px!important
        }
    }

    /* Fixer les en-têtes pour Historique et Paramètres */
    #page-history header,#page-settings header,#page-stats header
    {
        padding:calc(env(safe-area-inset-top) + 10px) 15px 10px 15px;
    /* 1. Fixer en haut */
        position:sticky;
        top:0;
    /* On remonte pour annuler le padding par défaut de .page */
    /* Colle au plafond de .page */
        margin-bottom:15px;
    /* Espace avec le contenu qui suit */
    /* 3. Style et Flou */
        background:var(--cardlate);
    /* Utiliser du RGBA pour voir le flou à travers */
        backdrop-filter:blur(10px);
        z-index:100;
        padding:10px 10px 0;
    /* Réintroduit du confort visuel à l'intérieur du header */
        border-bottom:1px solid var(--border);
        box-sizing:border-box
    /* Garantit que le padding ne casse pas la largeur */
    }

    /* On s'assure que les statistiques de l'historique restent aussi en haut */
    .history-fixed-section
    {
        top:45px;
    /* Juste en dessous du titre Historique */
        background:var(--bg);
        z-index:9
    }

    /* Badge Nom du jour férié */
    .ferie-name
    {
        position:absolute;
        bottom:2px;
        left:2px;
        right:2px;
        font-size:.85rem;
    /* MODIFIÉ : Taille augmentée (était 0.6rem) */
        color:#f1c40f;
        text-align:center;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
        background:#0006;
        border-radius:4px;
        padding:1px 2px;
        z-index:4;
        line-height:1.2
    /* Ajouté pour le centrage vertical */
    }

    /* Formulaire horaires spécifiques */
    .custom-schedule-section
    {
        margin-top:15px;
        padding-top:10px;
        border-top:1px dashed #444
    }

    .custom-row-item
    {
        background:#252525;
        padding:8px;
        border-radius:6px;
        margin-bottom:8px;
        display:flex;
        flex-direction:column;
        gap:5px;
        border-left:3px solid var(--primary)
    }

    .custom-row-header
    {
        display:flex;
        justify-content:space-between;
        align-items:center;
        font-weight:bold;
        font-size:.85rem;
        color:var(--primary)
    }

    .custom-inputs
    {
        display:flex;
        gap:5px
    }

    .custom-inputs div
    {
        flex:1
    }

    .custom-inputs input
    {
        padding:8px;
        font-size:.8rem;
        margin:0
    }

    .btn-mini-remove
    {
        background:none;
        border:none;
        color:#e74c3c;
        cursor:pointer
    }

    *
    {
        box-sizing:border-box
    }

    .t-gray
    {
        background-color:#7f8c8d
    }

    /* Avance ignorée */
    .t-blue
    {
        background-color:#3498db
    }

    /* Jour Normal */
    .t-night
    {
        background-color:#1a5276
    }

    /* Nuit Normale */
    .t-green
    {
        background-color:#2ecc71
    }

    /* HS Validées Jour */
    .t-night-ot
    {
        background-color:#145a32
    }

    /* HS Validées Nuit */
    .t-orange
    {
        background-color:#e67e22
    }

    /* HS Ignorées (Palier) */
    .t-red
    {
        background-color:#c0392b
    }

    /* HS Désactivées */
    /* Style pour jour férié calendrier */
    .ferie-badge
    {
        position:absolute;
        bottom:2px;
        right:2px;
        font-size:.85rem;
    /* MODIFIÉ : Harmonisé avec ferie-name (était 0.6rem) */
        color:#f1c40f
    }

    .cal-day.ferie
    {
        border:2px solid #f1c40f4d
    }

    body
    {
        position:fixed;
        overscroll-behavior-y:contain;
        margin:0;
        font-family:'Roboto','Segoe UI',sans-serif;
        background-color:var(--bg);
        color:var(--text)!important;
        height:100%;
        width:100%;
        display:flex;
        flex-direction:column;
        overflow:hidden;
        -webkit-user-select:none;
        user-select:none
    }

    /* NAVIGATION BASSE */
    .bottom-nav
    {
        position:fixed;
        bottom:10px;
    /* Un peu plus haut pour l'esthétique */
        left:50%;
        transform:translateX(-50%);
        width:95%;
    /* Un peu plus de marge sur les côtés */
        max-width:750px;
    /* Sécurité pour ne pas être géant sur PC/Tablette */
        background:var(--cardlate);
    /* Assure-toi que cette variable existe, sinon met #222 */
        backdrop-filter:blur(10px);
        border-radius:20px;
    /* 40px est parfois trop rond pour 5 boutons, 20-25px est mieux */
        border:1px solid var(--border);
        box-shadow:0 8px 24px #00000080;
        display:flex;
        justify-content:space-between;
    /* Distribue l'espace */
        align-items:center;
        padding:3px;
    /* Un petit padding interne global */
        z-index:100
    }

    .nav-item
    {
        background:none;
        border:none;
        color:var(--text-muted);
    /* Ou #888 si la var n'existe pas */
    /* MAGIE ICI : flex: 1 permet à chaque bouton de prendre 20% exactement */
        flex:1;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        font-size:.65rem;
    /* Texte un peu plus petit pour tenir sur 1 ligne */
        padding:8px 0;
    /* Espace vertical pour le confort tactile */
        margin:0 2px;
    /* Marge latérale minime */
        cursor:pointer;
        border-radius:17px;
    /* Arrondi interne */
    /* Sécurité pour ne pas que le texte casse la mise en page */
        min-width:0;
        white-space:nowrap;
        overflow:hidden
    }

    .nav-item i
    {
        font-size:1.2rem;
    /* Icône légèrement réduite pour l'harmonie */
        margin-bottom:4px
    }

    /* État Actif */
    .nav-item.active
    {
        color:var(--primary);
    /* Ou #3498db */
        background:#ffffff14;
        font-weight:bold;
    /* On supprime la bordure ou on la met transparente pour éviter le décalage de pixel */
        box-shadow:inset 0 0 0 1px #ffffff1a
    }

    .page
    {
        display:none;
        height:100dvh;
        padding-bottom:70px;
        flex:1;
        overflow-y:auto;
        height:100%
    }

    #page-chrono,#page-planning
    {
        padding:10px;
        padding-bottom:60px
    }

    #history-list,#settings-profiles-list,#page-settings h3,.stat-card-grid,.chart-wrapper
    {
        padding:0 10px
    }

    #page-history .btn-secondary,.card
    {
        display:block;
    /* Nécessaire pour que les marges et la largeur s'appliquent correctement */
    /* 100% de la largeur moins (10px à gauche + 10px à droite) */
        width:calc(100% - 20px)!important;
        margin-left:auto;
        margin-right:auto
    }

    .page.active
    {
        display:block;
        animation:fadeIn .3s
    }

    @keyframes fadeIn {
        from
        {
            opacity:0;
            transform:translateY(10px)
        }

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

    header
    {
        margin-bottom:20px;
        text-align:center;
        position:relative
    }

    h1
    {
        font-size:1.5rem;
        margin:0;
        color:var(--primary)
    }

    h2
    {
        font-size:.9rem;
        color:var(--text-muted);
        font-weight:normal;
        margin-top:5px
    }

    /* Header controls (boutons supp) */
    .header-btn-right
    {
        position:absolute;
        top:0;
        right:0;
        background:none;
        border:none;
        color:var(--primary);
        font-size:.9rem;
        cursor:pointer;
        padding:5px
    }

    /* COMPOSANTS UI */
    .card
    {
        background:var(--card);
        border-radius:12px;
        margin-bottom:15px;
        box-shadow:0 4px 6px #0000004d
    }

    #page-settings .card
    {
        padding:15px
    }

    button.btn-primary
    {
        width:100%;
        padding:12px;
        background:var(--primary);
        color:#000;
        border:none;
        border-radius:8px;
        font-size:.9rem;
        font-weight:bold;
        cursor:pointer
    }

    #page-chrono #btn-main-action
    {
        height:125px;
        font-size:20px
    }

    button.btn-secondary,#modal-profiles-list
    {
        background:transparent;
        border:1px solid var(--primary);
        color:var(--primary);
        border-radius:8px;
        padding:8px;
        cursor:pointer
    }

    button.btn-danger
    {
        background:var(--accent)
    }

    button.btn-warning
    {
        background:var(--warning);
        color:#000
    }

    button.btn-neutral
    {
        background:#7f8c8d;
        color:#fff
    }

    /* On cible tous les types d'entrées pour une cohérence totale */
    input[type="text"],input[type="number"],input[type="email"],input[type="password"],input[type="date"],input[type="time"],textarea,select
    {
        width:100%;
        padding:12px 15px;
        margin-bottom:15px;
    /* 1. Désactiver le style natif iOS/Android */
        -webkit-appearance:none;
        -moz-appearance:none;
        appearance:none;
    /* 2. Couleurs et Bordures */
        background-color:#2c2c2c;
        border:2px solid transparent;
    /* Bordure invisible pour éviter le saut au focus */
        border-bottom:2px solid var(--border);
    /* Style moderne : ligne en bas */
        border-radius:8px;
    /* 3. Texte */
        color:#fff;
        font-family:inherit;
        font-size:16px;
    /* ⚠️ IMPORTANT : 16px minimum pour éviter le zoom auto sur iPhone */
    /* 4. Divers */
        box-sizing:border-box;
        outline:none;
        transition:all .2s ease-in-out;
        box-shadow:none
    /* Supprime l'ombre interne d'iOS */
    }

    /* 5. État au clic (Focus) */
    input:focus,textarea:focus
    {
        background-color:#363636;
        border-bottom-color:var(--accent,#007bff);
    /* Utilise ta couleur principale */
        box-shadow:0 4px 12px #0003
    }

    /* 6. Placeholder (Texte d'aide) */
    ::placeholder
    {
        color:#888;
        opacity:1
    }

    /* 7. Cas particulier Textarea */
    textarea
    {
        resize:vertical;
        min-height:100px
    }


    #page-chrono .chrono-date
    {
        font-size:1.2rem;
        font-weight:700;
        color:var(--text);
        margin:0 0 0.8rem;
        text-align:center;
        text-transform:none;
    }
    .timer-circle
    {
    /* 35% de la hauteur totale de l'écran */
        width:35dvh;
        height:35dvh;
    /* Pour garder un cercle parfait, width et height 
           doivent avoir la même valeur en dvh */
        border-radius:50%;
    /* Sécurités pour éviter les extrêmes */
        min-width:200px;
        min-height:200px;
        max-width:80vw;
    /* Sécurité : ne dépasse pas 80% de la largeur du téléphone */
        margin:2dvh auto;
    /* Marge verticale proportionnelle aussi */
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;
        background:var(--card);
        border:4px solid #333;
        box-shadow:0 0 30px #00000080
    }

    .timer-time
    {
    /* On remplace 2.6rem par une valeur proportionnelle à la hauteur */
        font-size:6dvh;
        font-weight:bold;
        font-family:monospace;
        line-height:1;
        margin:5px 0
    }

    .timer-status
    {
        color:var(--text-muted);
        text-transform:uppercase;
        letter-spacing:1px;
        margin-top:10px
    }

    .active-start-edit
    {
        margin-top:5px;
        font-size:.9rem;
        color:#888;
        background:#ffffff0d;
        padding:5px 10px;
        border-radius:15px;
        cursor:pointer
    }

    /* Styles Chrono Avancé */
    .timer-extras
    {
    }

    .estimated-end
    {
        color:var(--text-muted);
        font-size:.9rem;
        margin-bottom:5px
    }

    .overtime-live
    {
        color:var(--success);
        font-weight:bold;
        font-size:1.4rem;
        font-family:monospace;
        text-shadow:0 0 10px #2ecc714d;
        display:none
    }

    .today-info
    {
        text-align:center;
        background:#3498db1a;
        padding:10px;
        border-radius:8px;
        margin-bottom:20px;
        border:1px solid var(--primary)
    }

    /* Bloc "Déjà enregistré" */
    .already-logged-info
    {
        background:#2ecc7126;
        border:1px solid var(--success);
        color:var(--success);
        padding:10px;
        border-radius:8px;
        text-align:center;
        margin-bottom:15px;
        font-size:.9rem;
        display:none
    }

    /* PAGE HISTORIQUE */
    .history-controls
    {
        display:flex;
        justify-content:space-between;
        align-items:center;
        margin-bottom:7px
    }

    .history-nav-btn
    {
        background:none;
        border:none;
        color:var(--primary);
        font-size:1.5rem;
        cursor:pointer;
        padding:0 15px
    }

    .month-stats-row
    {
        display:flex;
        gap:10px
    }

    .stat-card
    {
        flex:1;
        background:var(--card);
        padding:10px 0;
        border-radius:8px;
        text-align:center;
        border:1px solid var(--border)
    }

    .stat-val
    {
        font-weight:bold;
        font-size:1.3rem;
        display:block
    }

    .stat-label
    {
        font-size:.9rem;
        color:var(--text-muted);
        text-transform:uppercase
    }

    .week-header
    {
        background:#2a2a2a;
        color:var(--text-muted);
        padding:5px 12px;
        font-size:.8rem;
        font-weight:bold;
        border-radius:4px;
        margin:15px 0 8px;
        text-transform:uppercase;
        letter-spacing:1px
    }

    .history-item
    {
        display:flex;
        flex-direction:column;
        border-left:4px solid transparent;
        padding-left:10px;
        gap:5px
    }

    .history-item-top
    {
        display:flex;
        justify-content:space-between;
        align-items:center;
        width:100%
    }

    .btn-icon-action i
    {
        padding:5px
    }

    .history-comment
    {
        font-size:.8rem;
        color:#aaa;
        font-style:italic;
        background:#ffffff0d;
    /* Fond un peu plus visible */
        padding:5px 8px;
        border-radius:4px;
        margin-top:5px;
        display:flex;
        align-items:center;
        gap:5px
    }

    /* Actions dans l'historique */
    .history-actions
    {
        display:flex;
        align-items:center
    }

    .btn-icon-action,.btn-icon-action
    {
        background:transparent;
        border:none;
        cursor:pointer;
        font-size:.9rem;
        border-radius:50%;
        transition:background .2s;
        display:flex;
        justify-content:center;
        align-items:center
    }

    .btn-icon-action:active
    {
        background:#ffffff1a
    }

    .btn-edit
    {
        color:var(--text-muted)
    }

    .btn-add-comment
    {
        color:var(--primary);
        animation:pulse 2s infinite
    }

    @keyframes pulse {
        0%
        {
            opacity:.7
        }

        50%
        {
            opacity:1
        }

        100%
        {
            opacity:.7
        }
    }

    /* TIMELINE VISUALIZATION */
    .timeline-bar
    {
        display:flex;
        height:6px;
        border-radius:3px;
        overflow:hidden;
        background:#0003;
        width:100%;
        margin-top:5px
    }

    .t-seg
    {
        height:100%
    }

    .t-gray
    {
        background-color:#7f8c8d
    }

    .t-blue
    {
        background-color:#3498db
    }

    .t-green
    {
        background-color:#2ecc71
    }

    .t-orange
    {
        background-color:var(--ignored)
    }

    .overtime-badge
    {
        padding:4px 8px;
        border-radius:4px;
        font-size:.8rem;
        font-weight:bold;
        background-color:#072c17;
        color:#fff;
        border:1px solid #145a32
    }

    .ot-pos
    {
        background:#145a32;
        color:#fff
    }

    .ot-neg
    {
        background:#e74c3c33;
        color:var(--accent)
    }

    .ot-ignored-text
    {
        color:var(--ignored);
        font-size:.9rem;
        margin-left:5px
    }

    /* PAGE PLANNING */
    #page-planning.active
    {
        display:flex;
        flex-direction:column;
        overflow:hidden
    }

    #page-planning header
    {
        flex:0 0 auto;
        margin-bottom:10px
    }

    .calendar-container-card
    {
        flex:1;
        display:flex;
        flex-direction:column;
        background:var(--card);
        border-radius:12px;
        padding:1px;
        overflow:hidden
    }

    .calendar-header
    {
        flex:0 0 auto;
        display:flex;
        justify-content:space-between;
        align-items:center;
        margin-bottom:10px
    }

    .calendar-nav-btn
    {
        background:none;
        border:none;
        color:var(--primary);
        font-size:1.5rem;
        cursor:pointer;
        padding:5px 15px
    }

    .calendar-week-header
    {
        flex:0 0 auto;
        display:grid;
        grid-template-columns:repeat(7,1fr);
        gap:2px;
        margin-bottom:5px
    }

    .cal-day-name
    {
        text-align:center;
        font-size:.8rem;
        color:var(--text-muted)
    }

    .calendar-grid-body
    {
        flex:1;
        display:grid;
        grid-template-columns:repeat(7,1fr);
        grid-auto-rows:minmax(min-content,1fr);
        gap:2px;
        overflow-y:auto
    }

    .cal-day
    {
        background:#2c2c2c;
        border-radius:4px;
        display:flex;
        flex-direction:column;
        align-items:center;
        position:relative;
        cursor:pointer;
        border:1px solid transparent;
        padding-top:15px;
    /* Place pour le badge semaine */
        min-height:50px;
        overflow:hidden
    }

    .cal-day.today
    {
        border-color:var(--primary);
        background:#3498db1a;
    /* Définit l'épaisseur à 2px */
        border-width:2px;
    /* Indispensable pour que la bordure soit visible */
        border-style:solid
    }

    .cal-day.empty
    {
        background:transparent;
        cursor:default
    }

    .cal-day.multi-selected
    {
        border:2px solid #fff;
        background-color:#fff3!important
    }

    .week-badge
    {
        position:absolute;
        bottom:1px;
        left:1px;
        font-size:.9rem;
        color:#fff;
        opacity:.7;
        font-weight:bold;
        background:#0009;
        padding:2px 4px;
        border-radius:4px;
        z-index:5
    }

    .cal-day-num
    {
        position:absolute;
        top:2px;
        right:2px;
        font-size:.8rem;
        font-weight:bold
    }

    .cal-profile-label
    {
        font-size:.9rem;
        font-weight:bold;
        text-align:center;
        width:95%;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
        line-height:1.2;
        padding:1px 0;
        border-radius:2px;
        margin-top:2px
    }

    .cal-time-label
    {
        font-size:.8rem;
        color:var(--text);
        opacity:.8;
        margin-top:1px;
        font-weight:500
    }

    .cal-note-preview
    {
        font-size:.75rem;
        color:var(--warning);
        width:95%;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
        margin-top:1px;
        opacity:1;
        font-weight:bold
    }

    /* BARRE D'ACTION FLOTTANTE POUR MULTI-SELECT */
    #multi-select-bar,#temp-update-popup
    {
        z-index:5;
        position:fixed;
        bottom:75px;
        left:50%;
        width:90%;
        background:var(--primary);
        color:#fff;
        border-radius:50px;
        padding:10px 20px;
        display:flex;
        justify-content:space-between;
        align-items:center;
        box-shadow:0 5px 15px #00000080;
        transition:transform .6s cubic-bezier(0.175,0.885,0.32,1.275);
        visibility:hidden;
        transform:translateX(-50%) translateY(125px);
        transition:transform .3s ease,visibility .3s
    }

    #multi-select-bar
    {
        background:var(--primary)
    }

    #temp-update-popup
    {
        background:#006400
    }

    #multi-select-bar.visible,#temp-update-popup.visible
    {
        transform:translateX(-50%) translateY(0);
        visibility:visible
    }

    .batch-btn
    {
        background:#fff3;
        border:none;
        color:#fff;
        padding:8px 15px;
        border-radius:20px;
        font-size:.9rem;
        cursor:pointer
    }

    /* MODALS */
    .modal-overlay
    {
        position:fixed;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background:#000c;
        z-index:200;
        display:none;
        justify-content:center;
        align-items:flex-end
    }

    .modal-content
    {
        background:var(--card);
        width:100%;
        padding:20px;
        border-radius:20px 20px 0 0;
        animation:slideUp .3s;
        max-height:90vh;
        overflow-y:auto
    }

    @keyframes slideUp {
        from
        {
            transform:translateY(100%)
        }

        to
        {
            transform:translateY(0)
        }
    }

    /* CSS PARAMETRES */
    .day-selector
    {
        display:flex;
        justify-content:space-between;
        margin-bottom:15px
    }

    .day-circle
    {
        width:35px;
        height:35px;
        border-radius:50%;
        background:#333;
        color:#aaa;
        display:flex;
        justify-content:center;
        align-items:center;
        font-size:.8rem;
        cursor:pointer;
        border:2px solid transparent
    }

    .day-circle.selected
    {
        background:var(--primary);
        color:#fff;
        border-color:#fff
    }

    .profile-list-item
    {
        display:flex;
        justify-content:space-between;
        align-items:center;
        background:#2c2c2c;
        padding:10px;
        border-radius:6px;
        margin-bottom:8px;
        border-left:5px solid transparent
    }

    .profile-actions
    {
        display:flex;
        gap:10px
    }

    .btn-icon
    {
        background:none;
        border:none;
        color:#fff;
        cursor:pointer;
        font-size:.9rem
    }

    .row-inputs
    {
        display:flex;
        gap:10px
    }

    .row-inputs > div
    {
        flex:1
    }

    label
    {
        font-size:.8rem;
        color:var(--text-muted);
        display:block;
        margin-bottom:4px
    }

    .editing-mode
    {
        border:2px solid var(--warning)
    }

    -
    /* TOGGLE SWITCH CSS */
    .toggle-row span
    {
        flex-grow:1;
    /* Force le texte à occuper tout l'espace à gauche */
        text-align:left
    }

    .toggle-row
    {
        display:flex;
        justify-content:space-between;
        align-items:center;
        margin-bottom:15px
    }

    .switch
    {
        position:relative;
        display:inline-block;
        width:50px;
        height:26px;
        flex-shrink:0
    }

    .switch input
    {
        opacity:0;
        width:0;
        height:0
    }

    .slider
    {
        position:absolute;
        cursor:pointer;
        top:0;
        left:0;
        right:0;
        bottom:0;
        background-color:#444;
        transition:.4s;
        border-radius:34px
    }

    .slider:before
    {
        position:absolute;
        content:"";
        height:20px;
        width:20px;
        left:3px;
        bottom:3px;
        background-color:#fff;
        transition:.4s;
        border-radius:50%
    }

    input:checked + .slider
    {
        background-color:var(--primary)
    }

    input:checked + .slider:before
    {
        transform:translateX(24px)
    }

    .chart-wrapper
    {
        margin-top:7px;
        padding:10px;
        background:#ffffff05;
        border-radius:8px;
        border:1px solid #333
    }

    .canvas-container
    {
        position:relative;
        height:200px;
    /* Un peu moins haut pour en mettre 2 */
        width:100%
    }

    canvas.stat-canvas
    {
        width:100%;
        height:100%
    }

    .stat-card-grid
    {
        display:grid;
    /* La ligne magique : Crée des colonnes auto. 
           minmax(140px, 1fr) signifie : "Minimum 140px de large, sinon prend tout l'espace disponible (1fr)" */
        grid-template-columns:repeat(auto-fit,minmax(100px,1fr));
        gap:12px;
        padding:10px
    /* max-height: 400px;  <-- Tu peux garder ou enlever selon ton besoin de scroll */
    /* overflow-y: auto; */
    }   
}

.stat-val
{
    font-size:1.4rem;
    font-weight:bold;
    color:#fff
}

.stat-label
{
    font-size:.8rem;
    color:#aaa
}

.chart-title
{
    font-size:.9rem;
    color:#aaa;
    margin-bottom:10px;
    font-weight:normal;
    text-transform:uppercase;
    letter-spacing:1px
}

/* Mode Sélection de Graphique */
body.graph-selecting .stat-card
{
    cursor:pointer;
    transform:scale(0.95);
    transition:all .3s ease
}

body.graph-selecting .stat-card:hover
{
    opacity:1;
    transform:scale(1.05);
    filter:grayscale(0%);
    box-shadow:0 0 15px #ffffff1a
/* Le background coloré sera géré par JS */
}

/* On cache les graphiques pendant la sélection pour focus sur les cartes */
body.graph-selecting #charts-container
{
    opacity:.5;
    pointer-events:none
}

/* Animation d'apparition d'un nouveau graphe */
@keyframes slideInGraph {
    from
    {
        opacity:0;
        transform:translateY(20px)
    }

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

.new-chart-anim
{
    animation:slideInGraph .5s ease forwards
}

#charts-container
{
    padding:0 10px
}
/* V2.29 - la palette doit passer au-dessus de la modale ponctuelle */
#color-modal { z-index: 400 !important; }

/* V2.37 - finitions interface */
#page-chrono .chrono-date{font-size:clamp(1.75rem,7vw,2.55rem)!important;font-weight:800!important;line-height:1.08;margin:0 0 .8rem!important;}
#pointeuse-dialog-overlay button{flex:1 1 140px;min-width:140px!important;min-height:46px;padding:11px 16px!important;font-size:1rem;}
.stats-mode-switch{display:flex;justify-content:center;gap:8px;margin:4px 0 12px}.stats-mode-btn{min-width:105px;padding:9px 14px;border-radius:9px;border:1px solid #59636f;background:#29333d;color:#fff}.stats-mode-btn.active{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary) inset}.stat-effective{border-color:#20c997!important}.pause-effective-option{display:flex;gap:8px;align-items:flex-start;margin-top:8px;font-size:.82rem;line-height:1.25}.pause-effective-option input{width:auto!important;margin-top:2px}
/* V2.37 correctif stats/historique */
#stats-period-display{display:inline-block;min-width:145px;text-align:center;color:#fff;text-transform:capitalize}
.v237-hs-detail{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:5px;font-size:.67rem;color:#aeb8c2}.v237-hs-detail span{white-space:nowrap}.v237-hs-detail .fa-moon{color:#85c1e9}
#all-ot-theoretical-start label{display:block;margin-bottom:5px}
.v237-hs-detail{display:flex!important;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:7px;font-size:.82rem!important;font-weight:700}.v237-hs-detail span{padding:4px 8px;border:1px solid #555;border-radius:8px;background:#2a2a2a}.graph-selecting #stats-grid .stat-card{cursor:pointer;outline:1px dashed #888}.custom-row-item .custom-inputs>div:last-child{min-width:210px}


/* V2.38 - calendrier ajout pointage Historique */
.v238-add-calendar{margin:0 0 16px;padding:12px;background:rgba(255,255,255,.04);border:1px solid #444;border-radius:10px}
.v238-cal-title{text-align:center;font-weight:700;margin-bottom:10px;text-transform:capitalize}
.v238-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;text-align:center}
.v238-cal-head{font-size:.75rem;color:#aaa;padding:4px 0}
.v238-cal-day{min-height:36px;border:1px solid #555;border-radius:7px;background:#292929;color:#fff;cursor:pointer}
.v238-cal-day.has-log{box-shadow:inset 0 -3px 0 var(--success)}
.v238-cal-day:active{transform:scale(.96)}

/* V2.42 */
.v242-add-actions{display:flex;gap:10px;margin-top:12px}.v242-add-actions .btn-primary{flex:1;margin:0}.v242-add-actions .btn-neutral{background:#3b4650;color:#fff}

/* V2.44 - infobulle graphique HS */
.v244-hs-tooltip{position:absolute;z-index:30;display:none;min-width:170px;padding:9px 11px;border:1px solid #65717d;border-radius:9px;background:rgba(25,29,33,.97);color:#f4f4f4;font-size:.82rem;line-height:1.35;box-shadow:0 6px 20px rgba(0,0,0,.4);pointer-events:none;white-space:nowrap}
.v244-hs-tooltip.visible{display:flex;flex-direction:column;gap:2px}
.v244-hs-tooltip strong{font-size:.86rem;margin-bottom:2px;color:#fff}
.v244-hs-tooltip .normal{color:#66e39b}.v244-hs-tooltip .night{color:#8fd1ff}

/* ===== V2.48 - 27/09/2026 : ajustements smartphone ciblés ===== */
/* HS VALIDÉES : sur écran tactile, l'infobulle reste dans une zone lisible du graphique. */
@media (hover: none), (pointer: coarse) {
    .chart-wrapper[data-type="hs"] .v244-hs-tooltip.v248-mobile-tip {
        position:absolute;
        left:50% !important;
        top:42px !important;
        transform:translateX(-50%);
        max-width:calc(100% - 24px);
        min-width:min(190px, calc(100% - 24px));
        box-sizing:border-box;
        white-space:normal;
        text-align:left;
        z-index:40;
    }
}

/* Modification d'un pointage : ne change pas la largeur de la modale.
   Sur petit écran uniquement, les deux champs horaires disposent de toute
   la largeur afin que le texte natif du champ time (ex. « Définir ») ne déborde pas. */
@media screen and (max-width: 390px) {
    #edit-log-modal .row-inputs {
        flex-direction:column;
        gap:0;
    }
    #edit-log-modal .row-inputs > div {
        width:100%;
        min-width:0;
    }
    #edit-log-modal input[type="time"] {
        min-width:0;
        max-width:100%;
        overflow:hidden;
    }
}
\n\n/* ===== V2.49 - 27/09/2026 : fenêtre Modifier le pointage sur smartphone ===== */\n/* Les deux champs Date & Profil partagent réellement la largeur disponible.\n   min-width:0 est essentiel : sans lui, le select conserve sa largeur intrinsèque\n   et peut pousser la modale hors de l'écran. */\n#edit-log-modal .v249-date-profile-row {\n    display:flex;\n    gap:10px;\n    margin-bottom:15px;\n    width:100%;\n    min-width:0;\n    box-sizing:border-box;\n}\n#edit-log-modal .v249-date-profile-row > input,\n#edit-log-modal .v249-date-profile-row > select {\n    flex:1 1 0;\n    width:0;\n    min-width:0;\n    max-width:100%;\n    margin-bottom:0;\n    box-sizing:border-box;\n}\n#edit-log-modal .modal-content {\n    max-width:100vw;\n    min-width:0;\n    box-sizing:border-box;\n    overflow-x:hidden;\n}\n#edit-log-modal .row-inputs,\n#edit-log-modal .row-inputs > div {\n    min-width:0;\n    max-width:100%;\n    box-sizing:border-box;\n}\n#edit-log-modal input,\n#edit-log-modal select,\n#edit-log-modal textarea {\n    min-width:0;\n    max-width:100%;\n}\n\n@media screen and (max-width: 600px) {\n    /* On garde Date et Profil côte à côte comme demandé, mais sans débordement. */\n    #edit-log-modal .v249-date-profile-row { gap:8px; }\n    #edit-log-modal .v249-date-profile-row > input,\n    #edit-log-modal .v249-date-profile-row > select {\n        padding-left:10px;\n        padding-right:10px;\n    }\n\n    /* Le champ heure reste strictement contenu dans la largeur de la modale.\n       Le sélecteur Android est ensuite ouvert par Chrome avec son interface native. */\n    #edit-log-modal input[type="time"] {\n        width:100%;\n        min-width:0;\n        max-width:100%;\n        box-sizing:border-box;\n    }\n}\n
/* ===== V2.53 - 27/09/2026 : restauration du contrôle horaire natif Android =====
   Les règles globales historiques imposaient appearance:none à tous les input time.
   On rend explicitement la main au navigateur pour les champs horaires, comme un
   <input type="time"> HTML natif, sans modifier les autres champs ni la mise en page. */
input[type="time"] {
    -webkit-appearance: auto;
    -moz-appearance: auto;
    appearance: auto;
}

/* ===== V2.55 : sélecteur d'heure mobile interne ===== */
.v254-time-overlay{position:fixed;inset:0;z-index:1000000;background:rgba(0,0,0,.72);display:none;align-items:center;justify-content:center;padding:16px;box-sizing:border-box}
.v254-time-overlay.open{display:flex}
.v254-time-dialog{width:min(94vw,430px);max-height:94vh;overflow:auto;background:#202124;border-radius:26px;color:#fff;box-shadow:0 18px 55px rgba(0,0,0,.55);font-family:system-ui,-apple-system,Arial,sans-serif}
.v254-time-head{background:#5f5f5f;padding:24px 18px;text-align:center;font-size:clamp(3.2rem,17vw,5.4rem);font-weight:300;line-height:1;letter-spacing:-2px;border-radius:26px 26px 0 0}
.v254-time-head span{cursor:pointer}.v254-time-head .inactive{opacity:.48}
.v254-clock-wrap{padding:18px 18px 6px;display:flex;justify-content:center}
.v254-clock{position:relative;width:min(72vw,290px);height:min(72vw,290px);max-width:290px;max-height:290px;border-radius:50%;background:#5a5a5a;touch-action:manipulation;user-select:none}
.v254-clock-btn{position:absolute;transform:translate(-50%,-50%);border:0;background:transparent;color:#fff;padding:0;width:42px;height:42px;border-radius:50%;font-size:1.15rem;display:flex;align-items:center;justify-content:center;cursor:pointer}
.v254-clock-btn.inner{font-size:.82rem;width:34px;height:34px;color:#f1f1f1}
.v254-clock-btn.selected{background:#1688f8;color:#fff}
.v254-clock-hand{position:absolute;left:50%;top:50%;height:2px;background:#1688f8;transform-origin:0 50%;pointer-events:none}
.v254-clock-dot{position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px;border-radius:50%;background:#1688f8;pointer-events:none}
.v254-time-actions{display:flex;align-items:center;gap:10px;padding:12px 14px 20px;flex-wrap:nowrap}.v254-time-actions>span{flex:1 1 auto;min-width:0}
.v254-time-actions button{border:0;background:transparent;color:#2196f3;font-weight:600;font-size:1rem;padding:10px 4px;white-space:nowrap;cursor:pointer}
.v254-time-actions .kbd{color:#fff;font-size:1.25rem;padding-right:8px}
@media(max-width:380px){.v254-time-actions{gap:5px;padding-left:9px;padding-right:9px}.v254-time-actions button{font-size:.88rem;padding-left:2px;padding-right:2px}.v254-time-dialog{width:96vw}}
\n\n/* ===== V2.56 : stabilisation du sélecteur horaire mobile dès la 1re ouverture ===== */
@media (max-width:768px) {
  .v254-time-overlay { padding:16px; }
  .v254-time-dialog {
    width:calc(100vw - 32px);
    max-width:430px;
    min-width:0;
    box-sizing:border-box;
    overflow:hidden;
  }
  .v254-time-actions {
    display:grid;
    grid-template-columns:44px minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
    align-items:center;
    column-gap:4px;
    width:100%;
    box-sizing:border-box;
    padding:12px 12px 20px;
  }
  .v254-time-actions > span { display:none; }
  .v254-time-actions button {
    min-width:0;
    width:100%;
    box-sizing:border-box;
    padding:10px 2px;
    text-align:center;
    white-space:nowrap;
  }
  .v254-time-actions .kbd { padding:10px 2px; }
}
@media (max-width:380px) {
  .v254-time-dialog { width:calc(100vw - 24px); }
  .v254-time-actions { padding-left:8px;padding-right:8px;column-gap:2px; }
  .v254-time-actions button { font-size:.86rem; }
}

/* ===== V2.58 - 27/09/2026 : clic propre sur l'icône horaire mobile =====
   L'icône native de Chrome reste visible, mais elle ne capte plus le toucher.
   Le geste traverse l'icône et arrive sur l'input type=time, dont le gestionnaire
   V2.56 ouvre directement le sélecteur interne. Aucun calque ni faux bouton. */
@media (max-width:768px) {
  /* V2.60 : l'icône de TOUS les champs horaires laisse le toucher arriver
     sur l'input, afin d'éviter l'ouverture du sélecteur natif Android. */
  input[type="time"]::-webkit-calendar-picker-indicator {
    pointer-events:none;
  }
}


/* ===== V2.61 - 27/09/2026 : barre de sélection Planning sur smartphone =====
   La barre reste entièrement dans l'écran. Le compteur occupe sa propre ligne
   et les quatre actions se répartissent sur deux colonnes. */
@media (max-width:768px) {
  #multi-select-bar {
    width:calc(100% - 20px);
    max-width:520px;
    padding:10px;
    border-radius:28px;
    box-sizing:border-box;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }
  #multi-select-bar #multi-count {
    display:block;
    width:100%;
    text-align:center;
    font-weight:600;
    line-height:1.2;
  }
  #multi-select-bar > div {
    width:100%;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:7px !important;
  }
  #multi-select-bar .batch-btn {
    width:100%;
    min-width:0;
    box-sizing:border-box;
    padding:9px 6px;
    line-height:1.15;
    white-space:normal;
    overflow-wrap:break-word;
  }
}


/* ===== V2.64 - 27/09/2026 : Stats compactes ===== */
/* Le détail des HS reste masqué tant que la carte n'est pas ouverte. */
#stats-grid .stat-card .v237-hs-detail { display:none !important; }
#stats-grid .stat-card.v264-hs-open .v237-hs-detail { display:flex !important; }
#stats-grid .stat-card:has(#stat-total-hs) { cursor:pointer; }

/* Bloc comparatif fermé par défaut. */
#stats-excluded-grid.v264-excluded-collapsible > .stat-card-grid { display:none; }
#stats-excluded-grid.v264-excluded-collapsible.v264-excluded-open > .stat-card-grid { display:grid; }
.v264-excluded-heading { margin:18px 10px 8px !important; }
.v264-excluded-toggle {
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 14px; box-sizing:border-box; border:1px solid #444; border-radius:10px;
  background:var(--card,#1e1e1e); color:#fff; font:inherit; font-weight:700; text-align:left;
}
.v264-excluded-toggle i { color:var(--primary); }

/* Sur smartphone : exactement quatre cartes par ligne. */
@media (max-width:768px) {
  #page-stats .stat-card-grid {
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:6px;
    padding:10px;
  }
  #page-stats .stat-card {
    min-width:0;
    padding:9px 2px;
    gap:3px;
  }
  #page-stats .stat-val { font-size:1.02rem; line-height:1.12; }
  #page-stats .stat-label { font-size:.58rem; line-height:1.1; overflow-wrap:anywhere; }
  #page-stats .v237-hs-detail { font-size:.56rem !important; gap:3px; margin-top:4px; }
  #page-stats .v237-hs-detail span { padding:3px 2px; border-radius:5px; }
  .v264-excluded-heading { margin-top:12px !important; }
  .v264-excluded-toggle { padding:11px 12px; font-size:.9rem; }
}


/* ===== V2.65 - 27/09/2026 : finitions mobile ===== */
/* Chevron discret sur les deux cartes HS VALIDÉES. */
#page-stats .v265-hs-chevron{font-size:.72em;color:var(--primary);margin-left:3px;vertical-align:middle}
#stats-excluded-grid .stat-card .v237-hs-detail{display:none!important}
#stats-excluded-grid .stat-card.v264-hs-open .v237-hs-detail{display:flex!important}
#stats-excluded-grid .stat-card:has(#x-hs){cursor:pointer}

/* Les horaires spécifiques restent entièrement dans leur carte sur smartphone. */
@media(max-width:768px){
  .custom-row-item .custom-inputs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(72px,.72fr);gap:6px;width:100%;min-width:0}
  .custom-row-item .custom-inputs>div{min-width:0!important;width:auto!important}
  .custom-row-item .custom-inputs input[type="time"],
  .custom-row-item .custom-inputs input[type="number"]{width:100%;min-width:0;max-width:100%;box-sizing:border-box;padding-left:6px;padding-right:6px}
  .custom-row-item .custom-inputs>div:last-child label:last-child{font-size:.60rem!important;gap:3px!important;overflow-wrap:anywhere}
}


/* ===== V2.66 - Profil horaire repliable + pied de page compact ===== */
#profile-form-card .v266-profile-toggle{
  display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;user-select:none;
}
#profile-form-card .v266-profile-chevron{color:var(--primary);font-size:.8em;flex:0 0 auto}
#profile-form-card.v266-collapsed > :not(#form-title){display:none!important}
#profile-form-card.v266-collapsed{padding-bottom:16px}
#page-settings footer p{white-space:nowrap;font-size:clamp(.60rem,2.45vw,.9rem)}

/* ===== V2.70 - champs horaires contrôlés uniquement par Pointeuse ===== */
input.v270-time-field{
  cursor:pointer;
  caret-color:transparent;
}
.v270-group-modal{box-sizing:border-box;overflow:auto;overscroll-behavior:contain}
.v270-group-modal .modal-content{margin:auto;max-height:calc(100% - 24px);overflow:auto}
.v270-danger{background:#a93232!important;color:#fff!important;border-color:#a93232!important}
input.v270-time-field{
  padding-right:44px!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v6l4 2'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;background-position:right 14px center!important;background-size:24px 24px!important;
}


/* ===== V2.71 - champs horaires recréés + actions numériques explicites ===== */
input.v271-time-field{
  cursor:pointer;
  caret-color:transparent;
  padding-right:48px!important;
  /* Icône volontairement claire pour rester lisible sur les champs sombres. */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24' fill='none' stroke='%23d9e2ea' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v6l4 2'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;
  background-position:right 14px center!important;
  background-size:26px 26px!important;
}
.v271-number-actions{
  position:fixed;left:50%;bottom:12px;transform:translateX(-50%) translateY(130%);
  z-index:1000002;display:flex;gap:10px;width:min(92vw,430px);padding:8px;
  background:#202124;border:1px solid #4a4a4a;border-radius:14px;box-shadow:0 8px 28px rgba(0,0,0,.5);
  opacity:0;pointer-events:none;transition:transform .16s ease,opacity .16s ease;box-sizing:border-box;
}
.v271-number-actions.open{transform:translateX(-50%) translateY(0);opacity:1;pointer-events:auto}
.v271-number-actions button{flex:1;margin:0;padding:12px 14px;border-radius:10px;font-size:1rem;font-weight:700}
.v271-num-cancel{background:#2b2b2b;color:#d9e2ea;border:1px solid var(--primary)}
.v271-num-ok{background:var(--primary);color:#fff;border:1px solid var(--primary)}


/* ===== V2.72 : sélecteur de durée en minutes ===== */
.v272-minute-field{
  cursor:pointer;caret-color:transparent;padding-right:48px!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24' fill='none' stroke='%23d9e2ea' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v6l4 2'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;background-position:right 14px center!important;background-size:26px 26px!important;
}
.v272-minute-overlay{position:fixed;inset:0;z-index:1000010;background:rgba(0,0,0,.72);display:none;align-items:center;justify-content:center;padding:18px;box-sizing:border-box}
.v272-minute-overlay.open{display:flex}
.v272-minute-dialog{width:min(92vw,420px);background:#202124;border:1px solid #414141;border-radius:24px;padding:22px;box-sizing:border-box;color:#fff;box-shadow:0 18px 55px rgba(0,0,0,.6)}
.v272-minute-title{font-size:1.18rem;font-weight:750;margin-bottom:18px;display:flex;gap:10px;align-items:center}.v272-minute-title i{color:#d9e2ea}
.v272-minute-value{display:grid;grid-template-columns:52px 1fr auto 52px;align-items:center;gap:10px;background:#303134;border-radius:16px;padding:12px;margin-bottom:16px}
.v272-minute-value strong{font-size:2.5rem;text-align:right}.v272-minute-value span{color:#b9b9b9;font-size:1rem}.v272-minute-value button{height:48px;border:1px solid #555;border-radius:12px;background:#26272a;color:#fff;font-size:1.8rem}
.v272-minute-presets{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:18px}.v272-minute-presets button{padding:12px 4px;border:1px solid #555;border-radius:10px;background:#303134;color:#fff;font-size:1rem}.v272-minute-presets button.selected{border-color:var(--primary);background:rgba(52,152,219,.22)}
.v272-minute-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.v272-minute-actions button{padding:13px;border-radius:11px;font-size:1rem;font-weight:750}.v272-minute-actions #v272-minute-cancel{background:#2b2b2b;color:#d9e2ea;border:1px solid var(--primary)}.v272-minute-actions #v272-minute-set{background:var(--primary);color:#fff;border:1px solid var(--primary)}

/* ===== V2.74 - contrôle horaire entièrement recréé ===== */
.v274-time-control{
  width:100%;min-width:0;box-sizing:border-box;display:block;
}
.v274-time-control > input[type="hidden"]{display:none!important}
.v274-time-open{
  width:100%;min-width:0;min-height:44px;box-sizing:border-box;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 14px;margin:0;border:1px solid #555;border-radius:8px;
  background:#262626;color:#f1f1f1;font:inherit;text-align:left;cursor:pointer;
}
.v274-time-open:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.v274-time-value{font-variant-numeric:tabular-nums;letter-spacing:.02em}
.v274-time-open i{color:#d9e2ea;font-size:1.35rem;flex:0 0 auto}
.row-inputs > div > .v274-time-control,
.custom-inputs > div > .v274-time-control{width:100%;min-width:0}

/* ===== V2.78 - Refonte visuelle globale Pointeuse =====
   Couche purement esthétique : aucune logique métier modifiée. */
:root{
  --primary:#38a2f6;
  --primary-soft:#60b5fa;
  --accent:#ef4444;
  --success:#22c55e;
  --warning:#f59e0b;
  --bg:#0b1220;
  --card:#111827;
  --cardlate:rgba(17,24,39,.90);
  --bglate:rgba(11,18,32,.82);
  --text:#f8fafc;
  --text-muted:#9ca3af;
  --border:#334155;
  --danger:#ef4444;
}
body{
  background:linear-gradient(180deg,#09111e 0%,#0b1220 48%,#0a101b 100%);
  color:var(--text)!important;
}
header{background:transparent}
h1{color:var(--primary);font-weight:750;letter-spacing:-.02em}
h2{color:#aeb8c6}
.card{
  background:linear-gradient(180deg,#151e2b 0%,#111827 100%);
  border:1px solid rgba(71,85,105,.72);
  border-radius:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.22);
}
#page-settings .card{padding:16px}
.bottom-nav{
  background:rgba(17,24,39,.92);
  border:1px solid rgba(71,85,105,.78);
  border-radius:24px;
  box-shadow:0 12px 34px rgba(0,0,0,.42);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  padding:4px;
}
.nav-item{border-radius:19px;color:#aeb8c6;transition:background .18s ease,color .18s ease,transform .18s ease}
.nav-item:active{transform:scale(.97)}
.nav-item.active{
  color:var(--primary);
  background:linear-gradient(180deg,rgba(56,162,246,.16),rgba(56,162,246,.08));
  box-shadow:inset 0 0 0 1px rgba(96,181,250,.28),0 3px 12px rgba(0,0,0,.16);
}
button.btn-primary{
  background:linear-gradient(180deg,#43aaf8 0%,#2495ec 100%);
  color:#06101a;border:1px solid rgba(96,181,250,.45);border-radius:11px;
  box-shadow:0 5px 14px rgba(20,110,190,.20);transition:transform .15s ease,filter .15s ease;
}
button.btn-primary:active{transform:scale(.985);filter:brightness(.95)}
button.btn-secondary,#modal-profiles-list{
  border:1px solid rgba(56,162,246,.9);color:var(--primary-soft);border-radius:11px;
  background:rgba(17,24,39,.48);
}
button.btn-danger{background:linear-gradient(180deg,#f05252,#dc3636);color:#fff;border-radius:11px}
button.btn-warning{background:linear-gradient(180deg,#f8b43a,#f59e0b);color:#17110a;border-radius:11px}
button.btn-neutral{background:#64748b;color:#fff;border-radius:11px}
input[type="text"],input[type="number"],input[type="email"],input[type="password"],input[type="date"],input[type="time"],textarea,select{
  background:#182231;border:1px solid #3a4a5f;border-bottom:1px solid #3a4a5f;border-radius:11px;color:#f8fafc;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);transition:border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
input:focus,textarea:focus,select:focus{
  background:#1b2737;border-color:var(--primary);box-shadow:0 0 0 3px rgba(56,162,246,.12);outline:none;
}
::placeholder{color:#7f8b9b}
.modal-overlay{background:rgba(0,0,0,.76);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.modal-content{
  background:linear-gradient(180deg,#182231 0%,#111827 100%);border:1px solid #334155;border-bottom:0;
  border-radius:24px 24px 0 0;box-shadow:0 -18px 50px rgba(0,0,0,.42);
}
.stat-card{
  background:linear-gradient(180deg,#172130,#111827);border:1px solid #334155;border-radius:12px;
  box-shadow:0 4px 14px rgba(0,0,0,.14);
}
.stat-label{color:#9ca3af}.stat-val{color:#f8fafc}
.v274-time-open{
  background:#182231;border:1px solid #3a4a5f;border-radius:11px;color:#f8fafc;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.v274-time-open:focus-visible{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(56,162,246,.12)}
.v271-number-actions,.v272-minute-dialog{
  background:linear-gradient(180deg,#182231,#111827);border-color:#3a4a5f;box-shadow:0 18px 55px rgba(0,0,0,.52);
}
.v272-minute-value,.v272-minute-presets button{background:#182231;border-color:#3a4a5f}
.v272-minute-presets button.selected{border-color:var(--primary);background:rgba(56,162,246,.16)}
/* Les panneaux/éléments historiques aux fonds gris héritent du nouveau langage visuel. */
#page-settings details,#page-settings .settings-section,#page-history .history-item{
  border-color:#334155;
}
@media (max-width:600px){
  .card{border-radius:15px}
  .modal-content{padding:18px}
  .bottom-nav{width:94%;bottom:8px}
}

/* ===== V2.79 - fond sombre strict conforme à la maquette ===== */
html, body, body.preload {
  background:#0b1220 !important;
  background-color:#0b1220 !important;
  color:#f8fafc !important;
}
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,#07101d 0%,#0b1220 48%,#080f1a 100%) !important;
}
.page, .page.active, main, #page-chrono, #page-history, #page-planning, #page-stats, #page-settings{
  background-color:transparent !important;
  color:#f8fafc !important;
}
/* Aucun contrôle système ne doit réintroduire un grand aplat blanc. */
input, textarea, select, button{color-scheme:dark}
/* Le bouton Planning qui était explicitement blanc dans le HTML rejoint le style secondaire. */
.batch-btn{
  background:#111827 !important;color:#60b5fa !important;
  border:1px solid #38a2f6 !important;border-radius:11px !important;
}

/* ===== V2.81 : Historique par semaine + détail ===== */
.week-header.v281-week-header{display:flex;align-items:center;gap:8px;background:var(--card-bg,#1f2937);padding:10px 12px;border-radius:9px;margin:18px 0 9px;border-left:4px solid var(--primary);}
.v281-week-main{display:flex;align-items:center;gap:8px;min-width:0;flex:1;background:none;border:0;color:inherit;padding:0;text-align:left;}
.v281-week-main .v281-chevron{transition:transform .18s ease;color:var(--primary);}
.v281-week-header.is-open .v281-chevron{transform:rotate(180deg)}
.v281-week-summary{display:flex;gap:9px;align-items:center;font-size:.72rem;white-space:nowrap;overflow:hidden;}
.v281-week-detail-btn{width:auto!important;padding:7px 9px!important;flex:0 0 auto;font-size:.72rem!important;}
.v281-week-days{display:none}.v281-week-days.is-open{display:block}
.v281-week-detail{max-width:520px}
.v281-week-detail-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.v281-week-detail-head h3{margin:0}
.v281-week-table{width:100%;border-collapse:collapse;margin-top:14px;font-size:.84rem}.v281-week-table th,.v281-week-table td{padding:9px 5px;border-bottom:1px solid rgba(255,255,255,.09);text-align:right}.v281-week-table th:first-child,.v281-week-table td:first-child{text-align:left}.v281-week-table tfoot{font-weight:700;color:#fff}
@media(max-width:480px){.v281-week-summary{gap:5px;font-size:.66rem}.v281-week-detail-btn span{display:none}.v281-week-detail-btn{padding:7px!important}.week-header.v281-week-header{gap:5px;padding:9px 8px}}


/* ===== V2.82 ===== */
/* Historique : conserver tous les totaux de la semaine et placer le bouton détail à droite. */
.week-header.v281-week-header{display:flex;align-items:center;gap:7px;}
.v282-week-toggle{flex:0 0 auto;width:24px;height:30px;padding:0;border:0;background:transparent;color:var(--primary);font-size:.9rem;}
.v282-week-number{flex:0 0 auto;color:var(--primary);white-space:nowrap;}
.v281-week-summary{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0;flex:1;overflow:visible;white-space:nowrap;font-size:.72rem;}
.v281-week-detail-btn{margin-left:auto;flex:0 0 auto;width:30px!important;height:30px;padding:0!important;display:flex;align-items:center;justify-content:center;}
.v281-week-header.is-open .v281-chevron{transform:rotate(180deg)}

/* Planning > Modifier le pointage : bouton exclusion/réintégration et commentaire harmonisé. */
#edit-log-modal .v282-excluded-btn{width:100%;margin:0 0 15px 0;}
/* La date reste modifiable, mais on masque l'icône calendrier qui prêtait à confusion. */
#edit-log-modal #edit-log-date::-webkit-calendar-picker-indicator{opacity:0;width:0;margin:0;padding:0;}

@media(max-width:480px){
  .week-header.v281-week-header{gap:4px;padding:9px 7px;}
  .v282-week-toggle{width:20px;}
  .v282-week-number{font-size:.76rem;}
  .v281-week-summary{gap:5px;font-size:.62rem!important;letter-spacing:-.01em;}
  .v281-week-detail-btn{width:27px!important;height:28px;}
}
\n\n/* ===== V2.83 ===== */\n/* Statistiques : libellés complets sur deux lignes sans agrandir les cartes. */\n#page-stats .stat-label{white-space:normal!important;min-height:2.2em;line-height:1.08!important;display:flex;align-items:center;justify-content:center;text-align:center;}\n/* Historique : intitulés complets des quatre compteurs, sur deux lignes. */\n#page-history .month-stats-row .stat-label{white-space:normal!important;line-height:1.05;min-height:2.15em;text-align:center;}\n#page-history .month-stats-row .stat-label>span{display:inline-block;}\n/* Semaine : les totaux gardent leur lisibilité et le bouton détail reste compact à droite. */\n.week-header.v281-week-header{overflow:hidden;}\n.v281-week-summary{overflow:hidden!important;gap:7px;font-size:.72rem!important;}\n.v281-week-summary span{flex:0 0 auto;}\n.v281-week-detail-btn{width:28px!important;height:28px!important;min-width:28px!important;padding:0!important;margin-left:2px!important;}\n@media(max-width:480px){\n  #page-history .month-stats-row .stat-label{font-size:.56rem!important;}\n  #page-history .month-stats-row .stat-label i{font-size:.9em;}\n  #page-stats .stat-label{font-size:.56rem!important;}\n  .v281-week-summary{font-size:.68rem!important;gap:4px!important;}\n  .v281-week-detail-btn{width:25px!important;height:26px!important;min-width:25px!important;}\n}\n

/* ===== V2.84 ===== */
/* Historique : libellés sans icônes, compacts comme dans Statistiques. */
#page-history .month-stats-row .stat-label{font-size:.56rem!important;line-height:1.08!important;min-height:2.2em!important;display:flex!important;align-items:center!important;justify-content:center!important;text-align:center!important;}
#page-history .month-stats-row .stat-label i{display:none!important;}
#page-history .month-stats-row .stat-label-long{font-size:.50rem!important;letter-spacing:-.015em;}
/* Statistiques : le libellé long reste contenu dans sa carte. */
#page-stats .stat-label{font-size:.56rem!important;}
#page-stats .stat-label:has(+ *){font-size:.56rem!important;}
#page-stats .stat-card:has(#stat-total-hs) .stat-label,
#page-stats .stat-card:has(#x-hs) .stat-label{font-size:.50rem!important;letter-spacing:-.015em;}
/* En-tête semaine : S.xx + totaux + petit bouton détail, tous contenus sur une ligne. */
.week-header.v281-week-header{display:grid!important;grid-template-columns:auto auto minmax(0,1fr) 26px!important;align-items:center!important;column-gap:5px!important;width:100%!important;box-sizing:border-box!important;overflow:hidden!important;}
.v282-week-toggle{grid-column:1!important;width:18px!important;min-width:18px!important;}
.v282-week-number{grid-column:2!important;font-size:.72rem!important;}
.v281-week-summary{grid-column:3!important;display:flex!important;justify-content:flex-end!important;align-items:center!important;gap:4px!important;min-width:0!important;overflow:hidden!important;white-space:nowrap!important;font-size:.60rem!important;}
.v281-week-summary span{min-width:0!important;flex:0 1 auto!important;}
.v281-week-detail-btn{grid-column:4!important;width:24px!important;min-width:24px!important;height:24px!important;padding:0!important;margin:0!important;border-radius:7px!important;font-size:.62rem!important;display:flex!important;align-items:center!important;justify-content:center!important;}
@media(max-width:380px){.v281-week-summary{font-size:.56rem!important;gap:3px!important}.v282-week-number{font-size:.68rem!important}.v281-week-detail-btn{width:22px!important;min-width:22px!important;height:22px!important}}


/* ===== V2.85 ===== */
/* Historique : libellés HS raccourcis afin de retrouver la taille des autres cartes. */
#page-history .month-stats-row .stat-label-long{font-size:.56rem!important;letter-spacing:0!important;}
/* Barre de semaine : agrandir tout le contenu sans changer la hauteur de la barre. */
.v282-week-toggle{font-size:1rem!important;}
.v282-week-number{font-size:.84rem!important;font-weight:800!important;}
.v281-week-summary{font-size:.70rem!important;gap:5px!important;font-weight:700!important;}
.v281-week-summary i{font-size:1em!important;}
.v281-week-detail-btn{font-size:.72rem!important;}
@media(max-width:380px){
  .v282-week-toggle{font-size:.94rem!important;}
  .v282-week-number{font-size:.79rem!important;}
  .v281-week-summary{font-size:.65rem!important;gap:3px!important;}
  .v281-week-detail-btn{font-size:.68rem!important;}
}


/* ===== V2.86 ===== */
/* Historique : rapprocher au maximum les 4 libellés tout en restant dans les cartes. */
#page-history .month-stats-row .stat-label{font-size:.62rem!important;line-height:1.06!important;}
#page-history .month-stats-row .stat-label-long{font-size:.62rem!important;letter-spacing:0!important;}
/* Statistiques : libellés sur deux lignes plus lisibles, cartes inchangées. */
#page-stats .stat-label{font-size:.62rem!important;line-height:1.06!important;}
#page-stats .stat-card:has(#stat-total-hs) .stat-label,
#page-stats .stat-card:has(#x-hs) .stat-label{font-size:.60rem!important;letter-spacing:0!important;}
@media(max-width:380px){
 #page-history .month-stats-row .stat-label,#page-history .month-stats-row .stat-label-long{font-size:.59rem!important;}
 #page-stats .stat-label{font-size:.59rem!important;}
 #page-stats .stat-card:has(#stat-total-hs) .stat-label,#page-stats .stat-card:has(#x-hs) .stat-label{font-size:.57rem!important;}
}

/* ===== V2.87 ===== */
/* Historique : les deux libellés HS se rapprochent visuellement des cartes Heures totales / Heures de nuit. */
#page-history .month-stats-row .stat-label,
#page-history .month-stats-row .stat-label-long{
  font-size:.70rem!important;
  line-height:1.04!important;
  letter-spacing:-.01em!important;
}
#page-history .month-stats-row .stat-card:nth-child(4) .stat-label{
  font-size:.66rem!important;
}
/* Barre de semaine S.xx : aucun pictogramme dans les totaux et texte nettement plus grand. */
.v281-week-summary i{display:none!important;}
.v281-week-summary{font-size:.82rem!important;gap:7px!important;font-weight:700!important;letter-spacing:-.01em!important;}
.v282-week-number{font-size:.96rem!important;font-weight:800!important;}
.v282-week-toggle{font-size:1.05rem!important;}
.v281-week-detail-btn{font-size:.78rem!important;}
/* Stats : texte agrandi sans modifier les dimensions des cartes. */
#page-stats .stat-label{font-size:.68rem!important;line-height:1.04!important;letter-spacing:-.005em!important;}
#page-stats .stat-card:has(#stat-total-hs) .stat-label,
#page-stats .stat-card:has(#x-hs) .stat-label{font-size:.68rem!important;letter-spacing:-.005em!important;}
@media(max-width:380px){
  #page-history .month-stats-row .stat-label,#page-history .month-stats-row .stat-label-long{font-size:.66rem!important;}
  #page-history .month-stats-row .stat-card:nth-child(4) .stat-label{font-size:.62rem!important;}
  .v281-week-summary{font-size:.76rem!important;gap:5px!important;}
  .v282-week-number{font-size:.90rem!important;}
  #page-stats .stat-label,#page-stats .stat-card:has(#stat-total-hs) .stat-label,#page-stats .stat-card:has(#x-hs) .stat-label{font-size:.64rem!important;}
}

/* V2.88 - le glissé sur le cadran reste capturé par l'horloge */
#v254-clock.v254-clock{touch-action:none;}


/* ===== V3.02 : palette unique ===== */

/* ===== V3.03 : la barre multi-sélection ne recouvre plus le calendrier =====
   V3.02 ciblait .calendar-container, classe inexistante dans cette page.
   En mobile, on réserve maintenant dans la page la hauteur réelle de la barre flottante. */
@media (max-width:768px) {
  #page-planning.v303-multi-select-active {
    padding-bottom: var(--v303-multi-reserve, 330px) !important;
    box-sizing: border-box;
  }
  #page-planning.v303-multi-select-active .calendar-container-card {
    min-height: 0;
  }
  #page-planning.v303-multi-select-active #calendar-body {
    min-height: 0;
    overflow-y: auto;
  }
}

/* ===== V3.04 : résumé congés dans les bandeaux Historique ===== */
.v304-leave-summary{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:.72rem;font-weight:700;color:#d9e8f5}
.v304-leave-item{white-space:nowrap;padding:2px 5px;border-radius:5px;background:rgba(52,152,219,.10)}
@media(max-width:700px){.v281-week-header{flex-wrap:wrap}.v304-leave-summary{order:4;width:100%;padding-left:34px;gap:10px}.v281-week-summary{flex:1;min-width:0}.v304-week-header .v281-week-detail-btn{margin-left:auto}}


/* ===== V3.05 : bandeau Historique conditionnel ===== */
.week-header.v281-week-header.v304-week-header{
  grid-template-columns:auto auto minmax(0,1fr) 26px!important;
  grid-template-rows:auto!important;
  row-gap:5px!important;
}
.v304-week-header .v281-week-summary{grid-column:3!important;grid-row:1!important;justify-content:flex-end!important;}
.v304-week-header .v304-leave-summary{grid-column:3!important;grid-row:1!important;justify-content:flex-end!important;width:auto!important;padding-left:0!important;gap:8px!important;}
.v304-week-header .v281-week-detail-btn{grid-column:4!important;grid-row:1!important;}
.v304-week-header.v305-both{grid-template-rows:auto auto!important;}
.v304-week-header.v305-both .v304-leave-summary{grid-column:2 / 4!important;grid-row:2!important;justify-content:flex-end!important;}
.v304-week-header.v305-empty .v281-week-summary,
.v304-week-header.v305-empty .v304-leave-summary{display:none!important;}
@media(max-width:700px){
  .v304-week-header .v304-leave-summary{width:auto!important;padding-left:0!important;}
  .v304-week-header.v305-both .v304-leave-summary{grid-column:2 / 4!important;width:auto!important;padding-left:0!important;}
}

.v307-week-total{padding:12px;border:1px solid var(--primary);border-radius:6px;margin:8px 0}.v307-totals{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px;font-size:.8rem}.v307-day-label{font-weight:bold;margin:12px 0 6px;text-transform:capitalize}.v307-leave-day{padding:10px;border-left:4px solid var(--primary);background:rgba(255,255,255,.05);border-radius:4px}

/* V3.09 Planning */
.v309-month-viewport{position:relative;flex:1;min-height:0;overflow:hidden;display:flex;touch-action:pan-y}.v309-month-pane{flex:0 0 100%;width:100%;min-width:0;min-height:0;display:flex;flex-direction:column;box-sizing:border-box;background:var(--card)}.v309-neighbor{position:absolute;inset:0;pointer-events:none}.v309-dragging .v309-month-pane{will-change:transform}.v309-month-pane .calendar-grid-body{min-height:0}

/* V3.10 Historique */
.v310-month-viewport{position:relative;width:100%;overflow:clip;touch-action:pan-y}.v310-month-pane{width:100%;min-width:0;box-sizing:border-box}.v310-neighbor{position:absolute;inset:0 auto auto 0;pointer-events:none;background:var(--bg)}.v310-dragging .v310-month-pane{will-change:transform}

/* V3.11 Paramètres : trois groupes repliables */
#page-settings .v311-settings-group>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;list-style:none;font-size:1.05rem;font-weight:700;color:var(--text);padding:4px 0}#page-settings .v311-settings-group>summary::-webkit-details-marker{display:none}#page-settings .v311-settings-group>summary::marker{content:""}#page-settings .v311-settings-chevron{color:var(--primary);flex-shrink:0;font-size:.8em;transition:transform .18s ease}#page-settings .v311-settings-group[open]>summary .v311-settings-chevron{transform:rotate(180deg)}#page-settings .v311-settings-content{padding-top:14px}#page-settings .v311-settings-group>summary:focus-visible{outline:2px solid var(--primary);outline-offset:5px;border-radius:4px}

.admin-trial-alert:not([hidden]){display:inline-block;margin-left:5px;padding:3px 7px;border-radius:10px;background:#164b6b;color:#b8e5ff;font-weight:700;white-space:nowrap}

/* V3.13 : numéro de semaine cliquable */
button.v282-week-number{appearance:none;background:transparent;border:0;padding:5px 2px;font-family:inherit;font-weight:700;cursor:pointer;text-align:left}button.v282-week-number:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:4px}

/* V3.20 : couleur sélectionnée, y compris les profils déjà créés */
#color-picker-container .color-dot.is-selected { border: 3px solid white !important; display:flex; align-items:center; justify-content:center; }
#current-color-preview, #oneoff-color-preview, [id^="v302-leave-preview-"] { position:relative; border:2px solid white !important; }
#current-color-preview::after, #oneoff-color-preview::after, [id^="v302-leave-preview-"]::after { content:'✓'; position:absolute; right:3px; bottom:1px; color:white; font-weight:bold; text-shadow:0 1px 3px black; }

/* V3.21 : les deux périodes restent côte à côte, en deux lignes rapprochées. */
.v321-split-option { justify-content:flex-start; gap:10px; margin:10px 0; }
#profile-form-card .v321-period-row { display:grid !important; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap:10px; margin-bottom:8px; }
#profile-form-card .v321-period-row > div { min-width:0; }
#profile-form-card .v321-period-row label { display:flex; align-items:flex-end; min-height:2.5em; line-height:1.2; margin-bottom:5px; }
#profile-form-card .v321-period-row input { box-sizing:border-box; width:100%; min-width:0; }
#profile-form-card #v320-profile-periods[hidden] { display:none !important; }

#profile-form-card #row-time-inputs[style*="display: none"] { display:none !important; }

/* V3.23 : accès aux alertes administrateur depuis chaque titre */
.v323-admin-alert { position:absolute; top:0; right:0; padding:5px 8px; border:1px solid var(--primary); border-radius:9px; background:var(--card-bg,#16202c); color:var(--primary); font-size:.8rem; cursor:pointer; z-index:2; }
.v323-admin-alert[hidden] { display:none; }

/* V3.25 : le champ de fin de première période reste accessible au formulaire. */
#v325-first-end-cell[hidden] { display:none !important; }

/* V3.26 : repère d’exclusion à côté du numéro du jour */
.v326-excluded-day-icon { margin-left:3px; color:#7ee787; font-size:.65rem; vertical-align:middle; }

/* V3.30 : compteurs de congés */
.v330-leave-table { width:100%; border-collapse:collapse; margin-top:12px; font-size:.85rem; }
.v330-leave-table th,.v330-leave-table td { padding:8px 5px; text-align:center; border-bottom:1px solid #ffffff20; }
.v330-leave-table th:first-child { text-align:left; white-space:nowrap; }
#v327-chart-help[hidden] { display:none !important; }

/* V3.32 : congés au-dessus du bouton Graphique, présentation des totaux repliables. */
:is(#v330-leave-counters,#v356-absence-counters){margin:18px 10px 14px}
:is(#v330-leave-counters,#v356-absence-counters)>summary{list-style:none;cursor:pointer}
:is(#v330-leave-counters,#v356-absence-counters)>summary::-webkit-details-marker{display:none}
:is(#v330-leave-counters,#v356-absence-counters)>summary::marker{content:""}
:is(#v330-leave-counters,#v356-absence-counters)[open]>summary i{transform:rotate(180deg)}
:is(#v330-leave-counters,#v356-absence-counters)>.v311-settings-content{padding:14px 4px}
@media(max-width:600px){:is(#v330-leave-counters,#v356-absence-counters)>summary{padding:11px 12px;font-size:.9rem}}

/* V3.33 */
.v333-current-month{font-size:.7rem;padding:3px 8px;margin:4px 6px;border:1px solid var(--primary);border-radius:12px;color:var(--primary);background:transparent;cursor:pointer;flex-shrink:0}
.v333-current-month[hidden]{display:none!important}
#v330-year{touch-action:pan-y}

/* V3.34 : formulaire à l’intérieur du groupe Profils. */
#v334-profiles-settings #profile-form-card{margin-top:0}

/* V3.35 : présentation des couleurs, crédits et jours terminés. */
#current-color-preview::after,#oneoff-color-preview::after,[id^="v302-leave-preview-"]::after{content:none!important}
.v335-credit{font-size:1rem;line-height:1.6}
.v335-credit a{font-size:1.15rem;text-decoration:none;color:orange}
.v335-day-done{font-size:.65rem;margin-right:5px;color:#70d497}

/* V3.36 */
.v254-clock{touch-action:none}
.v336-clock-end{position:absolute;width:42px;height:42px;transform:translate(-50%,-50%);border-radius:50%;background:#1688f8;pointer-events:none}
.v271-number-actions{transition:opacity .16s ease;max-width:calc(100vw - 16px)}

/* V3.39 : bandeau de semaine tactile et accessible au clavier. */
.v281-week-header{cursor:pointer}
.v281-week-header:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
.v281-week-header span.v282-week-toggle,.v281-week-header span.v282-week-number{display:inline-flex;align-items:center}

/* V3.43 : deux champs par ligne dans la modification du pointage. */
#edit-log-modal .row-inputs{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;gap:10px}
#edit-log-modal .row-inputs>div{flex:1 1 0!important;min-width:0!important;box-sizing:border-box}
#edit-log-modal .row-inputs input,#edit-log-modal .v274-time-control{max-width:100%;box-sizing:border-box}
#edit-log-modal .v274-time-open{min-width:0;width:100%}

/* V3.48 : même contour doré que dans le Planning. */
#page-history .history-item.v348-schedule-change{outline:none;border-top:3px solid #f5b942;border-right:3px solid #f5b942;border-bottom:3px solid #f5b942}
.history-item .v348-change-detail{color:#f5b942;font-size:1.25rem;font-weight:700}

#page-history .history-item.v349-delay:not(.v348-schedule-change){outline:none;border-top:3px solid #f08a55;border-right:3px solid #f08a55;border-bottom:3px solid #f08a55}
.history-item .v349-delay-detail{color:#f08a55;font-size:.72rem;white-space:normal;max-width:85px}

/* V3.57 : mêmes dimensions de champs pour les périodes déclarées. */
#v300-leave-options input[type="date"]{width:100%;box-sizing:border-box;margin:6px 0 12px;min-width:0}

/* V3.58 : deux dates indépendantes sur une même ligne, sans sélection automatique. */
.v358-absence-dates{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin:12px 0}
.v358-absence-dates>div{min-width:0}
.v358-absence-dates input[type="date"]{width:100%;min-width:0;box-sizing:border-box;padding:12px 8px;font:inherit;font-size:.9rem;margin:6px 0}
.v358-absence-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.v358-absence-row>.btn-icon-action{flex-shrink:0}
#v358-absence-editor .modal-content{max-height:90dvh;overflow-y:auto}
#v358-absence-editor .v358-editor-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
#v358-absence-editor .v358-editor-actions button{flex:1;min-width:90px}