/* ==========================================================
   DESIGN SYSTEM — PLANNING HEBDOMADAIRE
   ==========================================================
   Fichier unique de style pour toute l'application (avant,
   app.css et style.css se marchaient dessus avec deux
   langages graphiques différents : ici, tout le monde utilise
   les mêmes couleurs, la même police et les mêmes composants
   (boutons, cartes, en-têtes...).

   style.css est conservé vide (pour ne rien casser si une
   page y fait encore référence) mais n'est plus utilisé.

   ----------------------------------------------------------
   DIRECTION "VERRE DÉPOLI" (façon macOS)
   ----------------------------------------------------------
   Étape 1 d'une refonte visuelle plus poussée : palette
   adoucie (même logique de couleurs par poste/état, mais
   moins saturée), typographie système (la vraie police
   Apple sur Mac/iPhone, Inter en repli ailleurs), et
   panneaux translucides avec flou d'arrière-plan (topbar,
   sidebar, cartes) plutôt que des aplats de couleur vive.
   Un fond "aurora" doux (voir body::before) donne de la
   matière à flouter derrière ces panneaux.

   Pour l'instant appliqué à l'ossature commune (topbar,
   sidebar, cartes, boutons, en-tête de page) + la page
   d'accueil : les autres pages en héritent partiellement
   via ces mêmes classes, mais n'ont pas encore été
   retravaillées en détail une par une.
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {

    /* Accent principal (bleu Apple) */
    --bleu: #0071e3;
    --bleu-fonce: #0058b0;
    --bleu-clair: #e8f3fd;

    /* Couleurs fonctionnelles adoucies (postes / états) */
    --violet: #8a7ec8;
    --violet-clair: #f1eefb;
    --vert: #4f9d76;
    --vert-clair: #eaf5ef;
    --ambre: #c98a4b;
    --ambre-clair: #faf1e6;
    --rouge: #d9776f;
    --rouge-clair: #fbeeed;
    --cyan: #4f9db3;
    --cyan-clair: #e9f5f7;

    /* Neutres, façon apple.com / macOS */
    --gris-fond: #f5f5f7;
    --gris-texte: #6e6e73;
    --gris-fonce: #1d1d1f;
    --bordure: rgba(0, 0, 0, .08);

    /* Verre dépoli */
    --verre-bg: rgba(255, 255, 255, .62);
    --verre-bg-fort: rgba(255, 255, 255, .78);
    --verre-bordure: rgba(255, 255, 255, .55);
    --verre-ombre: 0 12px 40px rgba(31, 38, 68, .10), 0 2px 8px rgba(31, 38, 68, .05);
    --flou: blur(24px) saturate(180%);

    --sidebar-bg: rgba(24, 24, 27, .72);
    --sidebar-bordure: rgba(255, 255, 255, .09);

    --degrade-marque: linear-gradient(135deg, var(--bleu), #4da3f0);

}

/* ==========================================================
   BASE
   ========================================================== */

html, body {
    margin: 0;
}

body {
    background: var(--gris-fond);
    color: var(--gris-fonce);
    font-family:
        -apple-system, BlinkMacSystemFont,
        'SF Pro Text', 'SF Pro Display',
        'Inter', Arial, Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
    position: relative;
}

/*
Fond "aurora" : quelques taches de couleur très douces,
fixes, floutées, derrière tout le contenu. Sert de matière
pour que le flou des panneaux translucides (topbar, sidebar,
cartes) ait vraiment quelque chose à flouter.
*/

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(38rem 26rem at 8% -6%, rgba(0, 113, 227, .16), transparent 60%),
        radial-gradient(34rem 24rem at 96% 8%, rgba(138, 126, 200, .14), transparent 60%),
        radial-gradient(30rem 26rem at 20% 96%, rgba(79, 157, 118, .10), transparent 60%),
        radial-gradient(28rem 22rem at 90% 92%, rgba(217, 119, 111, .08), transparent 60%),
        var(--gris-fond);
    filter: blur(6px);
}

a {
    color: var(--bleu);
}

/* ==========================================================
   COULEURS BOOTSTRAP RÉALIGNÉES SUR LA CHARTE
   ==========================================================
   Bootstrap est utilisé partout (boutons, badges, alertes...)
   mais avec ses couleurs par défaut. On les recolore ici pour
   que toute page utilisant .btn-primary, .text-success, etc.
   suive automatiquement la charte de l'appli.
   ========================================================== */

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

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--bleu-fonce) !important;
    border-color: var(--bleu-fonce) !important;
}

.btn-outline-primary {
    color: var(--bleu);
    border-color: var(--bleu);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary.active {
    background-color: var(--bleu);
    border-color: var(--bleu);
}

.btn-success {
    background-color: var(--vert);
    border-color: var(--vert);
}

.btn-success:hover,
.btn-success:focus {
    filter: brightness(.94);
}

.btn-outline-success {
    color: var(--vert);
    border-color: var(--vert);
}

.btn-outline-success:hover,
.btn-outline-success.active {
    background-color: var(--vert);
    border-color: var(--vert);
}

.btn-danger {
    background-color: var(--rouge);
    border-color: var(--rouge);
}

.btn-outline-danger {
    color: var(--rouge);
    border-color: var(--rouge);
}

.btn-outline-danger:hover,
.btn-outline-danger.active {
    background-color: var(--rouge);
    border-color: var(--rouge);
}

.btn-warning {
    background-color: var(--ambre);
    border-color: var(--ambre);
    color: #fff;
}

.btn-warning:hover,
.btn-warning:focus {
    color: #fff;
    filter: brightness(.94);
}

.btn-outline-warning {
    color: var(--ambre);
    border-color: var(--ambre);
}

.btn-outline-warning:hover,
.btn-outline-warning.active,
.btn-check:checked + .btn-outline-warning {
    background-color: var(--ambre) !important;
    border-color: var(--ambre) !important;
    color: #fff !important;
}

.btn-check:checked + .btn-outline-primary {
    background-color: var(--bleu) !important;
    border-color: var(--bleu) !important;
}

.text-primary { color: var(--bleu) !important; }
.text-success { color: var(--vert) !important; }
.text-danger  { color: var(--rouge) !important; }
.text-warning { color: var(--ambre) !important; }

.bg-primary { background-color: var(--bleu) !important; }
.bg-success { background-color: var(--vert) !important; }
.bg-danger  { background-color: var(--rouge) !important; }
.bg-warning { background-color: var(--ambre) !important; }

.badge.bg-primary { background-color: var(--bleu) !important; }
.badge.bg-success { background-color: var(--vert) !important; }
.badge.bg-danger  { background-color: var(--rouge) !important; }
.badge.bg-warning { background-color: var(--ambre) !important; color: #fff !important; }

.nav-pills .nav-link {
    color: var(--gris-texte);
    font-weight: 600;
    border-radius: 20px;
}

.nav-pills .nav-link.active {
    background-color: var(--bleu);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--bleu);
    box-shadow: 0 0 0 .2rem rgba(0, 113, 227, .15);
}

.form-control,
.form-select {
    border-radius: 10px;
    border-color: var(--bordure);
    background-color: rgba(255, 255, 255, .7);
}

.btn {
    border-radius: 980px;
    font-weight: 600;
    letter-spacing: -.01em;
}

.card {
    border: 1px solid var(--verre-bordure);
    border-radius: 18px;
    background: var(--verre-bg-fort);
    -webkit-backdrop-filter: var(--flou);
    backdrop-filter: var(--flou);
    box-shadow: var(--verre-ombre);
}

/* ==========================================================
   EN-TÊTE DE PAGE (bandeau verre dépoli)
   ==========================================================
   Utilisé sur les pages "classiques" (accueil, personnel,
   export...) pour reprendre le même en-tête que les pages
   plein écran (semaine / semaines / planning type).

   Avant : bandeau plein, dégradé bleu/violet vif, texte
   blanc. Maintenant : panneau de verre clair, texte sombre,
   accent de couleur réservé à l'icône et aux boutons pleins
   — plus proche des en-têtes de Réglages/Fichiers sur macOS.
   ========================================================== */

.entete-page {
    background: var(--verre-bg-fort);
    border: 1px solid var(--verre-bordure);
    -webkit-backdrop-filter: var(--flou);
    backdrop-filter: var(--flou);
    border-radius: 20px;
    padding: 22px 26px;
    color: var(--gris-fonce);
    margin-bottom: 26px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    box-shadow: var(--verre-ombre);
}

.entete-page h1,
.entete-page h2 {
    margin: 0;
    font-weight: 700;
    font-size: 21px;
    letter-spacing: -.015em;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--gris-fonce);
}

.entete-page h1 i,
.entete-page h2 i {
    color: var(--bleu);
    font-size: 19px;
}

.entete-page p {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--gris-texte);
}

.entete-page .actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.entete-page .actions .btn {
    border: 1px solid var(--bordure);
    background: rgba(255, 255, 255, .6);
    color: var(--gris-fonce);
    font-weight: 600;
}

.entete-page .actions .btn:hover {
    background: rgba(255, 255, 255, .95);
    color: var(--gris-fonce);
}

.entete-page .actions .btn.btn-clair {
    background: var(--bleu);
    border-color: var(--bleu);
    color: #fff;
}

.entete-page .actions .btn.btn-clair:hover {
    background: var(--bleu-fonce);
    border-color: var(--bleu-fonce);
}

/* ==========================================================
   BOUTON MENU sur les en-têtes (entete-page / header plein
   écran) : permet d'ouvrir la sidebar depuis les pages qui
   n'utilisent pas le layout principal (semaine, semaines,
   planning type).
   ========================================================== */

.entete-gauche {
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-menu-immersif {
    background: rgba(255, 255, 255, .5);
    border: 1px solid var(--bordure);
    color: var(--gris-fonce);
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.btn-menu-immersif:hover {
    background: rgba(255, 255, 255, .85);
}

/* Petites cartes de statistiques (ex : page Personnel) */

.carte-stat {
    border: 1px solid var(--verre-bordure);
    border-radius: 18px;
    background: var(--verre-bg-fort);
    -webkit-backdrop-filter: var(--flou);
    backdrop-filter: var(--flou);
    box-shadow: var(--verre-ombre);
    text-align: center;
    padding: 20px;
}

.carte-stat .icone {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
    font-size: 20px;
    background: var(--bleu-clair);
    color: var(--bleu);
}

.carte-stat.vert .icone { background: var(--vert-clair); color: var(--vert); }
.carte-stat.ambre .icone { background: var(--ambre-clair); color: var(--ambre); }
.carte-stat.rouge .icone { background: var(--rouge-clair); color: var(--rouge); }

.carte-stat .valeur {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -.02em;
    margin: 0;
    color: var(--gris-fonce);
}

.carte-stat .libelle {
    color: var(--gris-texte);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* Cartes-liens (ex : page d'accueil) */

.carte-lien {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--verre-bg-fort);
    border: 1px solid var(--verre-bordure);
    -webkit-backdrop-filter: var(--flou);
    backdrop-filter: var(--flou);
    border-radius: 18px;
    padding: 20px 22px;
    text-decoration: none;
    color: var(--gris-fonce);
    box-shadow: var(--verre-ombre);
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
    height: 100%;
}

.carte-lien:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 16px 40px rgba(31, 38, 68, .14), 0 2px 8px rgba(31, 38, 68, .06);
    color: var(--gris-fonce);
}

.carte-lien .icone {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    color: #fff;
    background: var(--degrade-marque);
}

.carte-lien .icone.vert    { background: linear-gradient(135deg, #67b28e, var(--vert)); }
.carte-lien .icone.ambre   { background: linear-gradient(135deg, #dba263, var(--ambre)); }
.carte-lien .icone.rouge   { background: linear-gradient(135deg, #e2938c, var(--rouge)); }
.carte-lien .icone.violet  { background: linear-gradient(135deg, #a99cd9, var(--violet)); }
.carte-lien .icone.cyan    { background: linear-gradient(135deg, #6cb7c9, var(--cyan)); }

.carte-lien .texte strong {
    display: block;
    font-size: 15.5px;
    font-weight: 600;
    letter-spacing: -.01em;
    margin-bottom: 2px;
}

.carte-lien .texte span {
    font-size: 12.5px;
    color: var(--gris-texte);
}

/* ==========================================================
   TITRES DE CATÉGORIE -- séparent les cartes de la page
   d'accueil en groupes (Planning / Personnel & congés), en
   écho aux mêmes catégories dans la sidebar.
   ========================================================== */

.titre-categorie-accueil {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--gris-texte);
    margin: 28px 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--bordure);
}

.titre-categorie-accueil:first-of-type {
    margin-top: 0;
}

.titre-categorie-accueil i {
    color: var(--bleu);
    font-size: 15px;
}

/* ==========================================================
   STRUCTURE : SIDEBAR / TOPBAR / CONTENU
   ==========================================================
   La sidebar est masquée par défaut et s'ouvre avec le bouton
   de la barre du haut (voir le script dans layouts/main.ejs).
   Panneaux en verre dépoli sombre/clair (façon barre latérale
   Finder ou Réglages sur macOS) plutôt qu'aplats opaques.
   ========================================================== */

.sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: 250px;
    height: 100vh;
    background: var(--sidebar-bg);
    -webkit-backdrop-filter: var(--flou);
    backdrop-filter: var(--flou);
    border-right: 1px solid var(--sidebar-bordure);
    color: #fff;
    padding: 22px 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform .3s cubic-bezier(.25, .8, .25, 1);
    z-index: 1030;
}

.sidebar .logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.01em;
    padding: 0 22px 20px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.sidebar .logo i {
    font-size: 20px;
    color: #4da3f0;
}

.sidebar a {
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255, 255, 255, .68);
    text-decoration: none;
    padding: 11px 20px;
    margin: 2px 12px;
    border-radius: 10px;
    font-size: 14.5px;
    font-weight: 500;
    transition: .15s;
}

.sidebar a i {
    font-size: 16px;
    width: 18px;
    text-align: center;
}

.sidebar a:hover {
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

.sidebar a.active {
    background: var(--bleu);
    color: #fff;
    box-shadow: 0 4px 14px rgba(0, 113, 227, .4);
}

/* ==========================================================
   CATÉGORIES DE LA SIDEBAR -- petits titres qui séparent les
   liens en groupes logiques (Planning / Personnel & congés),
   plutôt qu'une longue liste plate. Purement visuel, aucun
   impact sur la détection du lien actif (voir layouts/main.ejs)
   qui ne cible que les <a>.
   ========================================================== */

.sidebar-categorie {
    margin: 14px 22px 6px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: rgba(255, 255, 255, .38);
}

.sidebar-categorie:first-of-type {
    margin-top: 4px;
}

.sidebar-pied {
    margin-top: auto;
    padding-top: 14px;
}

.sidebar-pied a {
    color: rgba(255, 255, 255, .55);
}

body.sidebar-ouverte .sidebar {
    transform: translateX(0);
}

.main {
    margin-left: 0;
    transition: margin-left .25s ease;
}

body.sidebar-ouverte .main {
    margin-left: 250px;
}

.overlay-sidebar {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 17, 26, .3);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    z-index: 1020;
}

body.sidebar-ouverte .overlay-sidebar {
    display: block;
}

/* ==========================================================
   SIDEBAR PERSISTANTE SUR ORDINATEUR (façon dashboard SaaS)
   ==========================================================
   À partir de la largeur "desktop", la sidebar reste en
   permanence affichée et pousse le contenu (comme
   Notion/Linear) au lieu d'être un panneau qu'on ouvre/ferme :
   le bouton et le fond sombre de la version mobile n'ont plus
   lieu d'être. En dessous de cette largeur (tablette/téléphone),
   le comportement précédent (panneau caché, ouvert via le
   bouton de la topbar) reste inchangé.
   ========================================================== */

@media (min-width: 992px) {

    .sidebar {
        transform: translateX(0);
        box-shadow: 6px 0 28px rgba(15, 17, 26, .08);
    }

    .main {
        margin-left: 250px;
    }

    .overlay-sidebar {
        display: none !important;
    }

    .btn-toggle-sidebar {
        display: none;
    }

}

.topbar {
    background: var(--verre-bg-fort);
    -webkit-backdrop-filter: var(--flou);
    backdrop-filter: var(--flou);
    height: 64px;
    border-bottom: 1px solid var(--bordure);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 26px;
    position: sticky;
    top: 0;
    z-index: 1010;
}

.topbar h4 {
    font-weight: 700;
    letter-spacing: -.01em;
    font-size: 16px;
    color: var(--gris-fonce);
}

/* ==========================================================
   TOPBAR SUR PETIT ÉCRAN -- moins de marge, titre raccourci
   pour laisser la place aux boutons (accueil, notifications,
   compte) sans les pousser hors de l'écran.
   ========================================================== */

@media (max-width: 480px) {

    .topbar {
        padding: 0 14px;
        gap: 8px;
    }

    .topbar h4 {
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

}


.btn-toggle-sidebar {
    background: transparent;
    border: none;
    font-size: 20px;
    line-height: 1;
    color: var(--gris-fonce);
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
}

.btn-toggle-sidebar:hover {
    background: var(--bleu-clair);
    color: var(--bleu);
}

/* ==========================================================
   BOUTONS DE LA BARRE DU HAUT -- retour à l'accueil et
   notifications (demandes en attente), en écho au bouton
   "afficher/masquer le menu" déjà présent.
   ========================================================== */

.btn-icone-topbar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: transparent;
    border: none;
    font-size: 18px;
    line-height: 1;
    color: var(--gris-fonce);
    width: 38px;
    height: 38px;
    border-radius: 10px;
    cursor: pointer;
    text-decoration: none;
}

.btn-icone-topbar:hover {
    background: var(--bleu-clair);
    color: var(--bleu);
}

.badge-notif-topbar {
    position: absolute;
    top: 3px;
    right: 3px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 20px;
    background: var(--rouge);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 0 0 2px #fff;
}

.menu-notifs-topbar {
    width: 320px;
    max-height: 420px;
    overflow-y: auto;
    padding: 8px;
    border: none;
    border-radius: 16px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, .16);
}

.entete-menu-notifs-topbar {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--gris-texte);
    padding: 6px 10px 10px;
}

.aucune-notif-topbar {
    padding: 18px 10px;
    font-size: 13px;
    color: var(--gris-texte);
    text-align: center;
}

.ligne-notif-topbar {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
}

.ligne-notif-topbar:hover {
    background: var(--gris-fond);
}

.ligne-notif-topbar i {
    flex-shrink: 0;
    margin-top: 2px;
    font-size: 15px;
    color: var(--bleu);
}

.texte-notif-topbar {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.texte-notif-topbar strong {
    font-size: 13.5px;
    color: var(--gris-fonce);
}

.texte-notif-topbar span {
    font-size: 12px;
    color: var(--gris-texte);
}

.content {
    padding: 28px;
}

@media print {

    .no-print {
        display: none !important;
    }

    .sidebar,
    .overlay-sidebar,
    .topbar {
        display: none !important;
    }

    .main {
        margin-left: 0 !important;
    }

    .content {
        padding: 0 !important;
    }

    body {
        background: #fff !important;
    }

    body::before {
        display: none !important;
    }

    .card {
        box-shadow: none !important;
        border: 1px solid var(--bordure) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        background: #fff !important;
    }

    .champ-droit {
        border: none !important;
        background: transparent !important;
        appearance: none;
        -webkit-appearance: none;
        padding: 0 !important;
        text-align: center;
        color: #000 !important;
    }

}

/******************************************
CALENDRIER DE NAVIGATION (partagé)
==========================================
Composant réutilisé sur la page "Semaine"
(mini-calendrier ouvert depuis un bouton) et
sur la page "Semaines" (calendrier principal,
toujours affiché, en haut de page). La logique
JS commune est dans /js/calendrier-nav.js.
******************************************/

.btn-calendrier {

    border-radius: 980px;

    font-weight: 600;

    font-size: 12.5px;

    background: var(--bleu-clair);

    color: var(--bleu-fonce);

    border: 1px solid transparent;

}

.btn-calendrier:hover { filter: brightness(.97); }

/* Présentation "menu" (page Semaine : ouvert depuis un bouton) */
.calendrier-nav-dropdown {

    width: 300px;

    padding: 14px;

    border-radius: 16px;

    border: 1px solid var(--bordure);

    box-shadow: var(--verre-ombre);

}

/* Le clic navigue -> retire l'aspect "menu" par défaut de Bootstrap */
.calendrier-nav-dropdown.dropdown-menu { margin-top: 8px; }

/* Présentation "panneau" (page Semaines : toujours visible, en haut) */
.calendrier-panel {

    width: 100%;

    max-width: 460px;

    padding: 20px;

    border-radius: 16px;

    border: 1px solid var(--bordure);

    box-shadow: var(--verre-ombre);

    background: #fff;

}

.calendrier-panel .calendrier-entete {
    font-size: 16px;
}

.calendrier-panel .calendrier-case {
    font-size: 14px;
}

.calendrier-panel .calendrier-jour-nom {
    font-size: 11px;
}

.calendrier-entete {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 10px;

    font-weight: 700;

    font-size: 13.5px;

    text-transform: capitalize;

    color: var(--gris-fonce);

}

.calendrier-entete button {

    width: 26px;

    height: 26px;

    border: none;

    background: var(--gris-fond);

    border-radius: 50%;

    font-size: 12px;

    color: var(--gris-fonce);

}

.calendrier-entete button:hover { background: #e4e4e8; }

.calendrier-entete select.calendrier-select-annee {

    border: none;

    background: var(--gris-fond);

    border-radius: 980px;

    font-size: 11.5px;

    font-weight: 700;

    color: var(--gris-fonce);

    padding: 3px 8px;

}

.grille-calendrier {

    display: grid;

    grid-template-columns: repeat(7, 1fr);

    gap: 2px;

}

.calendrier-jour-nom {

    text-align: center;

    font-size: 10px;

    font-weight: 700;

    color: var(--gris-texte);

    padding-bottom: 4px;

}

.calendrier-case {

    aspect-ratio: 1;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 12px;

    border-radius: 8px;

    border: none;

    background: transparent;

    color: var(--gris-fonce);

    position: relative;

}

.calendrier-case.hors-mois { color: #c7c7cc; }

.calendrier-case.semaine-existe {

    background: var(--bleu-clair);

    cursor: pointer;

    font-weight: 600;

}

.calendrier-case.semaine-existe:hover { background: #d3e9fc; }

.calendrier-case.semaine-actuelle {

    background: var(--bleu);

    color: white;

}

.calendrier-case.semaine-actuelle:hover { background: var(--bleu); }

.calendrier-case.sans-semaine {

    color: #c7c7cc;

    cursor: default;

}

.calendrier-case.aujourdhui::after {

    content: "";

    position: absolute;

    bottom: 3px;

    left: 50%;

    transform: translateX(-50%);

    width: 4px;

    height: 4px;

    border-radius: 50%;

    background: var(--rouge);

}

.calendrier-case.semaine-actuelle.aujourdhui::after { background: white; }

.calendrier-legende {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 10px;

    padding-top: 10px;

    border-top: 1px solid var(--bordure);

    font-size: 10.5px;

    color: var(--gris-texte);

}

.calendrier-legende span {

    display: inline-flex;

    align-items: center;

    gap: 4px;

}

.calendrier-legende i {

    width: 8px;

    height: 8px;

    border-radius: 50%;

    display: inline-block;

}

.calendrier-lien-creation {

    display: block;

    text-align: center;

    margin-top: 10px;

    font-size: 11.5px;

    color: var(--bleu);

    text-decoration: none;

    font-weight: 600;

}

.calendrier-lien-creation:hover { text-decoration: underline; }

/*
Mise en surbrillance temporaire d'une colonne
de jour (page Semaine) ou d'une carte de
semaine (page Semaines) après un clic dans le
calendrier, pour que l'œil retrouve facilement
la cible sans avoir à la chercher.
*/
.colonne-jour-visee {

    animation: pulseJourVise 2.4s ease;

}

.carte-semaine-visee {

    animation: pulseCarteVisee 2.4s ease;

}

@keyframes pulseJourVise {

    0%   { background-color: var(--bleu-clair); }
    70%  { background-color: var(--bleu-clair); }
    100% { background-color: transparent; }

}

@keyframes pulseCarteVisee {

    0%   { box-shadow: 0 0 0 3px var(--bleu); }
    70%  { box-shadow: 0 0 0 3px var(--bleu); }
    100% { box-shadow: none; }

}