/* ===================================================================
   B-locK • newdesign.css
   Surcouche design « pub » — version chirurgicale.

   Stratégie : on respecte STRICTEMENT la structure HTML et les positions
   du style.css originel. On ne change que la peau visuelle (couleurs,
   ombres, rayons, contrastes, fontes accessoires) pour basculer du
   navy/bleu dur vers l'esthétique claire et aérée de pub.php.

   Aucune surcharge globale de body, html, h1-h6, button ou input sans
   sélecteur précis : tout est scopé par #page_… ou par classe.
   =================================================================== */

/* ---------- TOKENS ---------- */
:root {
    --nd-bg:        #f5f9fc;
    --nd-bg-card:   #ffffff;
    --nd-bg-soft:   #fbfdff;
    --nd-bg-dark:   #0f2233;
    --nd-blue:      #00769e;
    --nd-blue-l:    #3b9fc4;
    --nd-blue-d:    #005c7d;
    --nd-blue-xl:   #d3deea;
    --nd-navy:      #45576b;
    --nd-navy-d:    #2a3a4e;
    --nd-gold:      #dbaa06;
    --nd-grey:      #2d2d2d;
    --nd-grey-l:    #6c7a89;
    --nd-grey-xl:   #aab3bf;
    --nd-line:      #e6edf3;
    --nd-line-d:    #d5dde6;
    --nd-red:       #c8324b;
    --nd-green:     #2e9e6e;

    --nd-shadow-xs: 0 2px 6px rgba(15,34,51,0.04);
    --nd-shadow-s:  0 4px 14px rgba(15,34,51,0.06);
    --nd-shadow-m:  0 12px 30px rgba(15,34,51,0.10);
    --nd-shadow-l:  0 24px 60px rgba(15,34,51,0.16);
}

/* ---------- FONTS (sans toucher au reset global) ---------- */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&family=Cormorant+Upright:wght@400;500;600;700&display=swap');

body {
    font-family: 'Lato', system-ui, -apple-system, sans-serif;
    font-weight: 400;
    color: var(--nd-grey);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Sélection */
::selection { background: var(--nd-blue); color: #fff; }
::-moz-selection { background: var(--nd-blue); color: #fff; }

/* Scrollbar discrète */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: rgba(15,34,51,0.18);
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(15,34,51,0.32); background-clip: padding-box; border: 2px solid transparent; }

/* ─────────────────────────────────────────────────────────────────
   #page_compte — back-office (calendrier, patients, configs…)
   Page bg pale blue → fond clair lumineux
   .div_cadre cadre blanc → conservé blanc, ombre douce
   .box_compte fond navy → bascule en BLANC, padding aéré
   Forms fond navy → transparent, labels en navy lisible
   ───────────────────────────────────────────────────────────────── */

#page_compte section {
    background-color: #dedede !important;
    padding: 10px !important;
}

#calendar,
#info_calendar {
    padding: 20px !important;
}

#page_compte .container {
    width: 100% !important;
    max-width: 1320px !important;
    margin: 0 auto !important;
}

#page_compte .div_cadre {
    background: var(--nd-bg-card) !important;
    box-shadow: var(--nd-shadow-s) !important;
    border-radius: 18px !important;
    overflow: hidden;
    border: 1px solid var(--nd-line);
}

#page_compte .div_cadre .box_compte {
    background: var(--nd-bg-card) !important;
    padding: 26px 20px 36px !important;
    color: var(--nd-grey);
}

/* Forms inside box_compte : on retire le navy étouffant */
#page_compte .div_cadre .box_compte form,
#page_compte .div_cadre .box_compte form.mini_form,
#page_compte form#form_recherche {
    background: transparent !important;
    padding: 0 !important;
    color: var(--nd-grey);
}

/* Labels lisibles sur fond clair */
#page_compte form label {
    color: var(--nd-navy) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    margin-bottom: 6px;
    letter-spacing: 0.2px;
}
#page_compte form label sup { color: var(--nd-gold) !important; font-weight: 700; }

/* Inputs : bordure subtile, focus ring bleu */
#page_compte form input:not([type="radio"]):not([type="checkbox"]),
#page_compte form textarea,
#page_compte form select {
    background: #fff !important;
    border: 1.5px solid var(--nd-line-d) !important;
    border-radius: 10px !important;
    opacity: 1 !important;
    color: var(--nd-grey) !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    box-shadow: var(--nd-shadow-xs);
    transition: border-color .2s ease, box-shadow .2s ease;
}
#page_compte form input:not([type="radio"]):not([type="checkbox"]):focus,
#page_compte form textarea:focus,
#page_compte form select:focus {
    border-color: var(--nd-blue) !important;
    box-shadow: 0 0 0 4px rgba(0,118,158,0.12);
}
#page_compte form input:read-only,
#page_compte form textarea:read-only {
    background: var(--nd-bg) !important;
    color: var(--nd-grey-l) !important;
}

/* Checkboxes / radios : couleur d'accent */
#page_compte form input[type="checkbox"],
#page_compte form input[type="radio"],
#page_compte input[type="checkbox"],
#page_compte input[type="radio"] {
    accent-color: var(--nd-blue);
}
#page_compte .historique-checkbox { cursor: pointer; }

/* Fieldsets radio : carte légère plutôt que rgba(255,255,255,0.1) sur navy */
#page_compte form fieldset.fieldset_radio > div,
#page_compte form fieldset.fieldset_radio_small > div,
#page_compte form fieldset.fieldset_radio_flex > div {
    background: var(--nd-bg-soft) !important;
    border: 1px solid var(--nd-line) !important;
    border-radius: 10px !important;
    transition: all .2s ease;
}
#page_compte form fieldset.fieldset_radio > div:hover {
    border-color: var(--nd-blue);
    box-shadow: var(--nd-shadow-xs);
}
#page_compte form fieldset.fieldset_radio .span_titre {
    color: var(--nd-navy) !important;
    font-weight: 600 !important;
}
#page_compte form fieldset.fieldset_radio .span_description {
    color: var(--nd-grey-l) !important;
}

/* Texte feedback dans les fieldsets */
#page_compte form fieldset .p_feedback {
    border-radius: 0 0 10px 10px;
    font-weight: 600;
}

/* ─────────────────────────────────────────────────────────────────
   SOUS-NAV (tabs) — on respecte les widths nth-child existants,
   on réskine juste les anchors.
   ───────────────────────────────────────────────────────────────── */

#page_compte .sous_nav,
#page_compte .sous_nav_bis {
    background: linear-gradient(180deg, #f9fbfd 0%, #fff 100%);
    border-bottom: 1px solid var(--nd-line);
    padding: 0;
}

#page_compte .sous_nav > li > a,
#page_compte .sous_nav_bis > li > a {
    background: transparent !important;
    color: var(--nd-grey-l) !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    padding: 16px 12px !important;
    border-left: 1px solid var(--nd-line) !important;
    border-bottom: 3px solid transparent !important;
    border-top: none !important;
    transition: all .2s ease;
    position: relative;
    letter-spacing: 0.2px;
}
#page_compte .sous_nav > li:first-child > a,
#page_compte .sous_nav_bis > li:first-child > a {
    border-left: none !important;
}

#page_compte .sous_nav > li > a i,
#page_compte .sous_nav_bis > li > a i {
    margin-right: 6px;
    color: var(--nd-grey-xl);
    transition: color .2s ease;
}

#page_compte .sous_nav > li > a:hover,
#page_compte .sous_nav_bis > li > a:hover {
    background: rgba(0,118,158,0.04) !important;
    color: var(--nd-blue) !important;
}
#page_compte .sous_nav > li > a:hover i,
#page_compte .sous_nav_bis > li > a:hover i {
    color: var(--nd-blue);
}

#page_compte .sous_nav > li > a.actif,
#page_compte .sous_nav_bis > li > a.actif {
    background: #fff !important;
    color: var(--nd-blue) !important;
    border-bottom: 3px solid var(--nd-blue) !important;
}
#page_compte .sous_nav > li > a.actif i,
#page_compte .sous_nav_bis > li > a.actif i {
    color: var(--nd-blue);
}

#page_compte .sous_nav > li > a sup {
    background: var(--nd-gold) !important;
    color: #2a2102 !important;
    opacity: 1 !important;
    font-weight: 800 !important;
    border-radius: 0 0 0 8px !important;
    padding: 2px 6px !important;
    font-size: 10px !important;
    box-shadow: 0 2px 6px rgba(219,170,6,0.4);
}

/* Sur mobile, l'original cache le texte et n'affiche que les icônes :
   on remet les icônes en plus grandes et garde la barre de soulignement */
@media (max-width: 1050px) {
    #page_compte .sous_nav > li > a,
    #page_compte .sous_nav_bis > li > a {
        font-size: 0 !important;
        padding: 14px 5px !important;
    }
    #page_compte .sous_nav > li > a i,
    #page_compte .sous_nav_bis > li > a i {
        font-size: 18px !important;
        margin: 0;
    }
}

/* ─────────────────────────────────────────────────────────────────
   BOUTONS — pill, dégradés bleus / dorés
   On respecte les classes .btn / .btn_small / .btn_verysmall etc.
   ───────────────────────────────────────────────────────────────── */

.btn {
    border-radius: 999px !important;
    font-family: 'Lato', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px;
    padding: 11px 22px !important;
    font-size: 14px !important;
    background-color: var(--nd-blue) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 8px 20px rgba(0,118,158,0.25) !important;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease !important;
    text-align: center;
    line-height: 1.2;
}
.btn:hover, .btn:focus {
    background-color: var(--nd-blue-d) !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(0,118,158,0.35) !important;
}

.btn.btn_small { padding: 8px 14px !important; font-size: 13px !important; min-width: 0; }
.btn.btn_verysmall {
    padding: 6px 10px !important;
    font-size: 11px !important;
    min-height: 30px;
    width: auto !important;          /* override form button {width:100%} */
    min-width: 0 !important;
    max-width: none !important;
    line-height: 1;
    flex: 0 0 auto !important;       /* dans un flex parent, taille naturelle */
}
.btn.btn_veryverysmall {
    padding: 4px 8px !important;
    font-size: 10px !important;
    min-height: 26px;
    width: auto !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
}
/* Idem pour les boutons icônes des listes (tâches, config) */
#page_compte .btn.btn_verysmall,
#page_compte .btn.btn_veryverysmall,
.lightbox .btn.btn_verysmall,
.lightbox .btn.btn_veryverysmall {
    width: auto !important;
    flex: 0 0 auto !important;
}
.btn.btn_big {
    padding: 14px 32px !important;
    font-size: 16px !important;
    text-transform: none !important;
}

.btn.blue {
    background-color: var(--nd-blue) !important;
    color: #fff !important;
}
.btn.blue:hover, .btn.blue:focus {
    background-color: var(--nd-blue-d) !important;
    color: #fff !important;
}

.btn.orange {
    background-color: #ca006a !important;
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(202,0,106,0.25) !important;
}
.btn.orange:hover, .btn.orange:focus {
    background-color: #a3034f !important;
    color: #fff !important;
}

.btn.red {
    background-color: var(--nd-red) !important;
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(200,50,75,0.25) !important;
}
.btn.red:hover, .btn.red:focus {
    background-color: #a32238 !important;
    color: #fff !important;
}

.btn.grey {
    background-color: var(--nd-grey-l) !important;
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(108,122,137,0.22) !important;
}
.btn.grey:hover, .btn.grey:focus {
    background-color: var(--nd-navy) !important;
    color: #fff !important;
}

.btn.white {
    background-color: #fff !important;
    color: var(--nd-navy) !important;
    border: 1.5px solid var(--nd-line-d) !important;
    box-shadow: var(--nd-shadow-xs) !important;
}
.btn.white:hover, .btn.white:focus {
    background-color: var(--nd-bg-soft) !important;
    color: var(--nd-blue) !important;
    border-color: var(--nd-blue) !important;
}

.btn.gold {
    background-color: var(--nd-gold) !important;
    color: #2a2102 !important;
    box-shadow: 0 8px 20px rgba(219,170,6,0.30) !important;
}
.btn.gold:hover, .btn.gold:focus {
    background-color: #c69906 !important;
    color: #2a2102 !important;
}

.btn.btn_disabled {
    filter: grayscale(50%) opacity(0.6);
    cursor: not-allowed;
    pointer-events: none;
}

/* Bouton dans un fieldset (formulaires) : conserve sa largeur native.
   Min-width seulement sur les "vrais" boutons texte, PAS sur les
   boutons-icônes (btn_verysmall / btn_veryverysmall) qui doivent rester
   compacts dans les listes (tâches, actions inline, etc.) */
#page_compte form button.btn:not(.btn_verysmall):not(.btn_veryverysmall),
#page_compte form .btn:not(.btn_verysmall):not(.btn_veryverysmall) {
    width: auto;
    min-width: 0;
}
#page_compte form button.btn.btn_verysmall,
#page_compte form .btn.btn_verysmall,
#page_compte form button.btn.btn_veryverysmall,
#page_compte form .btn.btn_veryverysmall,
.lightbox button.btn.btn_verysmall,
.lightbox .btn.btn_verysmall,
.lightbox button.btn.btn_veryverysmall,
.lightbox .btn.btn_veryverysmall {
    width: auto !important;
    min-width: 0 !important;
}

/* Bouton « +mini_form » qui doit rester carré (38px) — on garde sa largeur */
#page_compte form.mini_form button {
    border-radius: 12px !important;
    min-width: 0;
}

.parent_btn {
    text-align: center;
    margin: 20px 0;
}

/* ─────────────────────────────────────────────────────────────────
   FOOTER — sombre, bordé en haut
   ───────────────────────────────────────────────────────────────── */

footer {
    background: var(--nd-bg-dark) !important;
    padding: 22px 16px !important;
    border-top: 1px solid rgba(255,255,255,0.06);
}
footer p {
    color: rgba(255,255,255,0.75) !important;
    font-size: 13px !important;
    margin: 0;
}
footer p strong { color: #fff !important; }
footer p i {
    color: rgba(219,170,6,0.6) !important;
    opacity: 1 !important;
    font-style: normal !important;
    padding: 0 6px !important;
}
footer p a:hover { color: var(--nd-gold) !important; filter: brightness(1.2); }

/* ─────────────────────────────────────────────────────────────────
   HEADER global (visible sur connexion, accueil, logout — pas compte)
   On garde le positionnement absolu interne mais on relooke le wrapper.
   ───────────────────────────────────────────────────────────────── */

body:not(#page_compte) header {
    background: rgba(255,255,255,0.92);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--nd-line);
    min-height: 68px;
    position: relative;
    padding: 14px 24px;
}

/* h1.mobile : affichée par défaut sur le header pour brand */
body:not(#page_compte) header h1.mobile {
    display: inline-flex !important;
    align-items: center;
    gap: 12px;
    position: static !important;
    left: auto !important;
    top: auto !important;
    margin: 0 !important;
    width: auto !important;
    font-family: 'Cormorant Upright', serif !important;
    font-size: 26px !important;
    color: var(--nd-navy) !important;
    line-height: 1;
}
body:not(#page_compte) header h1.mobile a {
    position: static !important;
    width: auto !important;
    padding: 0 !important;
    color: var(--nd-navy) !important;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: 'Cormorant Upright', serif !important;
    font-weight: 700;
}
body:not(#page_compte) header h1.mobile a::before {
    content: 'BK';
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--nd-blue) 0%, var(--nd-blue-l) 100%);
    color: #fff;
    border-radius: 10px;
    font-family: 'Lato', sans-serif;
    font-weight: 900;
    font-size: 14px;
    letter-spacing: -0.5px;
    box-shadow: 0 8px 20px rgba(0,118,158,0.25);
}
body:not(#page_compte) header h1.mobile small {
    font-family: 'Lato', sans-serif !important;
    font-size: 10px !important;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--nd-grey-l) !important;
    font-weight: 500;
    line-height: 1;
    display: block;
    margin-top: 4px;
}

/* On désactive le menu hamburger sur ces pages (pas de nav latérale) */
body:not(#page_compte) header #menu {
    display: none !important;
}

/* ─────────────────────────────────────────────────────────────────
   PAGE CONNEXION & LOGOUT — fond doux, carte centrée
   ───────────────────────────────────────────────────────────────── */

#page_connexion section,
#page_logout section,
#page_accueil section {
    background:
        radial-gradient(900px 500px at 90% -5%, rgba(0,118,158,0.07), transparent 60%),
        radial-gradient(700px 400px at -5% 80%, rgba(219,170,6,0.06), transparent 60%),
        var(--nd-bg) !important;
    min-height: calc(100vh - 130px) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 20px !important;
}

#page_connexion .container,
#page_logout .container,
#page_accueil .container {
    width: 100% !important;
    max-width: 460px !important;
}

#page_connexion .div_cadre,
#page_logout .div_cadre,
#page_accueil .div_cadre {
    background: var(--nd-bg-card) !important;
    box-shadow: var(--nd-shadow-l) !important;
    border-radius: 20px !important;
    border: 1px solid var(--nd-line);
    padding: 0 !important;
    overflow: hidden;
}

#page_connexion form,
#page_logout form,
#page_accueil form {
    background: transparent !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

#page_connexion form label,
#page_logout form label,
#page_accueil form label {
    color: var(--nd-navy) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    text-align: left !important;
}
#page_connexion form label sup { color: var(--nd-gold) !important; }

#page_connexion form input,
#page_logout form input,
#page_accueil form input {
    background: #fff !important;
    border: 1.5px solid var(--nd-line-d) !important;
    border-radius: 10px !important;
    opacity: 1 !important;
    padding: 11px 14px !important;
    height: auto !important;
    color: var(--nd-grey) !important;
    box-shadow: var(--nd-shadow-xs);
    transition: border-color .2s ease, box-shadow .2s ease;
}
#page_connexion form input:focus,
#page_logout form input:focus,
#page_accueil form input:focus {
    border-color: var(--nd-blue) !important;
    box-shadow: 0 0 0 4px rgba(0,118,158,0.12) !important;
}

#page_connexion form button,
#page_connexion form .btn {
    background-color: var(--nd-blue) !important;
    color: #fff !important;
    width: auto !important;
    padding: 12px 28px !important;
}

/* Titres h2/h3 sur ces pages : style serif élégant */
#page_connexion h2,
#page_logout h2,
#page_accueil h2 {
    font-family: 'Cormorant Upright', serif !important;
    font-size: 30px !important;
    color: var(--nd-navy) !important;
    font-weight: 700;
    margin-bottom: 6px;
}
#page_logout h3,
#page_accueil h3 {
    font-family: 'Cormorant Upright', serif !important;
    font-size: 30px !important;
    color: var(--nd-navy) !important;
    font-weight: 700;
    text-align: center;
    margin-bottom: 6px;
}

/* ─────────────────────────────────────────────────────────────────
   LIGHTBOXES — fond modal sombre flouté + carte blanche
   ───────────────────────────────────────────────────────────────── */

/* L'original déclare ".lightbox { display: flex; … ; display: none; }"
   où le 2e display gagne. Quand jQuery .fadeIn/.show() révèle l'élément,
   il pose un inline display:block, ce qui casse le centrage flex de
   l'origine. On rétablit display:flex pour toute lightbox affichée. */
.lightbox[style*="display: block"],
.lightbox[style*="display:block"] {
    display: flex !important;
}

.lightbox .background_lightbox {
    background-color: rgba(15,34,51,0.55) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.lightbox .sous_lightbox {
    background: var(--nd-bg-card) !important;
    border-radius: 18px !important;
    box-shadow: var(--nd-shadow-l) !important;
    border: 1px solid var(--nd-line);
    padding: 24px !important;
    color: var(--nd-grey);
}

.lightbox .sous_lightbox h2,
.lightbox .sous_lightbox h3,
.lightbox .sous_lightbox h4 {
    color: var(--nd-navy) !important;
    font-family: 'Cormorant Upright', serif !important;
}

.lightbox .sous_lightbox form {
    background: transparent !important;
    padding: 8px 0 !important;
    width: 100% !important;
    color: var(--nd-grey);
}
.lightbox .sous_lightbox form label {
    color: var(--nd-navy) !important;
}
.lightbox .sous_lightbox form input:not([type="radio"]):not([type="checkbox"]),
.lightbox .sous_lightbox form textarea,
.lightbox .sous_lightbox form select {
    background: #fff !important;
    border: 1.5px solid var(--nd-line-d) !important;
    border-radius: 10px !important;
    opacity: 1 !important;
    color: var(--nd-grey) !important;
    font-weight: 400 !important;
    font-size: 14px !important;
}
.lightbox .sous_lightbox form input:focus,
.lightbox .sous_lightbox form textarea:focus,
.lightbox .sous_lightbox form select:focus {
    border-color: var(--nd-blue) !important;
    box-shadow: 0 0 0 4px rgba(0,118,158,0.12) !important;
}

.lightbox .sous_lightbox .close_lightbox {
    background-color: var(--nd-bg) !important;
    color: var(--nd-navy) !important;
    border-radius: 50% !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: 14px !important;
    border: 1px solid var(--nd-line);
    transition: all .2s ease;
}
.lightbox .sous_lightbox .close_lightbox:hover {
    background-color: var(--nd-red) !important;
    color: #fff !important;
    border-color: var(--nd-red);
    transform: rotate(90deg);
}

/* Bandeau "ID" dans les lightboxes */
#reservation_id, #compte_id {
    background-color: var(--nd-gold) !important;
    color: #2a2102 !important;
    font-weight: 800 !important;
    border-radius: 10px !important;
    padding: 4px 12px !important;
    box-shadow: 0 4px 12px rgba(219,170,6,0.25);
    font-size: 13px !important;
}

#lightbox_op_taches .form_lightbox,
#section_reservation_taches .form_lightbox {
    background-color: var(--nd-bg-soft) !important;
    border: 1px solid var(--nd-line) !important;
    border-radius: 12px !important;
}

/* ─────────────────────────────────────────────────────────────────
   BLOCKQUOTE — cartes claires (config, historique, lescomptes)
   Original : navy foncé / blanc invisible → on bascule en carte
   blanche avec accent gauche bleu.

   Cas particuliers :
   - Les blockquotes avec style="background:#3b9fc4" (ajout d'un
     élément) deviennent une bannière dégradée bleue
   - Les blockquotes désactivées restent grisées
   ───────────────────────────────────────────────────────────────── */

#page_compte blockquote {
    background-color: #fff !important;
    border: 1px solid var(--nd-line) !important;
    border-left: 4px solid var(--nd-blue-l) !important;
    border-radius: 10px !important;
    overflow: visible !important;
    margin-bottom: 8px !important;
    box-shadow: var(--nd-shadow-xs);
    transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
#page_compte blockquote:hover {
    box-shadow: var(--nd-shadow-s);
    border-left-color: var(--nd-blue);
}

/* Tous les h6 dans un blockquote : texte navy, fond transparent */
#page_compte blockquote h6 {
    background: transparent !important;
    color: var(--nd-navy) !important;
    font-family: 'Lato', sans-serif !important;
    font-weight: 600 !important;
    font-size: 14.5px !important;
    line-height: 1.4;
    margin: 0;
}
/* Padding seulement quand h6 est enfant DIRECT du blockquote
   (cas config/lescomptes). Pour historique le padding vient du div. */
#page_compte blockquote > h6 {
    padding: 12px 18px !important;
}

#page_compte blockquote h6 sup {
    color: var(--nd-grey-l) !important;
    font-size: 11px !important;
    font-style: normal !important;
    opacity: 0.95;
    font-weight: 500;
    display: inline-block;
    margin-left: 8px;
    vertical-align: baseline !important;
    top: auto !important;
    position: static !important;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
}
#page_compte blockquote h6 .fa-sort-down,
#page_compte blockquote h6 .fa-w-10 {
    color: var(--nd-grey-xl) !important;
    opacity: 1 !important;
}
#page_compte blockquote h6 span.right { color: var(--nd-grey-l); opacity: 1; }

#page_compte blockquote.disabled {
    opacity: 0.55;
    border-left-color: var(--nd-line-d) !important;
    background: var(--nd-bg-soft) !important;
}
#page_compte blockquote.disabled h6 { color: var(--nd-grey-l) !important; }

/* Wrapper interne (cas historique avec checkbox + contenu + actions) */
#page_compte blockquote > div {
    padding: 12px 18px !important;
    color: var(--nd-grey);
    display: block;
}
/* Si le div est explicitement passé en flex, on conserve son comportement */
#page_compte blockquote > div[style*="flex"] {
    display: flex !important;
}
#page_compte blockquote > div p {
    color: var(--nd-grey-l) !important;
    margin: 0;
    font-size: 13px;
}

/* Bandeau d'ajout : blockquote avec inline-style background:#3b9fc4 */
#page_compte blockquote[style*="#3b9fc4"] {
    background: linear-gradient(135deg, var(--nd-blue) 0%, var(--nd-blue-l) 100%) !important;
    border: none !important;
    border-left: none !important;
    box-shadow: 0 10px 24px rgba(0,118,158,0.22);
    color: #fff;
}
#page_compte blockquote[style*="#3b9fc4"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(0,118,158,0.30);
}
#page_compte blockquote[style*="#3b9fc4"] h6 {
    color: #fff !important;
    cursor: pointer;
}
#page_compte blockquote[style*="#3b9fc4"] h6 .fa-sort-down,
#page_compte blockquote[style*="#3b9fc4"] h6 .fa-w-10 {
    color: rgba(255,255,255,0.85) !important;
}

/* Boutons d'action à l'intérieur des blockquotes (edit / delete) */
#page_compte blockquote h6 .btn {
    flex-shrink: 0;
}

/* Spécifique historique : la "p" interne avec date/tél/email
   doit être lisible sur fond blanc (l'inline color:#666 est OK) */
#page_compte blockquote p[style*="#666"] { color: var(--nd-grey-l) !important; }

/* ─────────────────────────────────────────────────────────────────
   « TABLEAUX » de configuration (Règles / Jours fériés / Opérations
   / Utilisateurs / Tâches d'une réservation)
   - Chaque ligne est un <blockquote data-id="…"> contenant un
     <div class="div_flex"> avec des inputs alignés et des boutons.
   - On supprime border-radius/border-left/padding pour aligner
     parfaitement avec le header de colonnes (qui a juste padding).
   - Le header de colonne (div avec style inline background:#555)
     est rebaillé en bandeau navy clair.
   ───────────────────────────────────────────────────────────────── */

/* Lignes de tableau : blockquote avec data-id */
#page_compte blockquote[data-id] {
    border-left: 1px solid var(--nd-line) !important;
    border-radius: 8px !important;
    padding: 0 !important;
    box-shadow: none !important;
    margin-bottom: 4px !important;
    background: #fff !important;
    overflow: visible !important;
}
#page_compte blockquote[data-id]:hover {
    border-color: var(--nd-blue-l) !important;
    box-shadow: var(--nd-shadow-xs) !important;
}
/* ─────────────────────────────────────────────────────────────────
   TABLEAUX (Règles / Jours fériés / Opérations / Utilisateurs /
              Tâches d'une réservation / Tâches d'une opération)

   Stratégie : forcer une seule ligne pour la rangée TOUT EN gardant
   les boutons d'action visibles. Pour ça :
   - .div_flex passe en flex display:flex !important nowrap
   - les inputs avec flex:1 peuvent shrink à 60px (lisible)
   - les inputs à largeur explicite (style="width:180px") peuvent
     shrink jusqu'à 50% de leur largeur
   - les spans, labels et conteneurs de boutons gardent leur taille
   - en dernier recours (viewport très étroit) : scroll horizontal
   ───────────────────────────────────────────────────────────────── */

/* La div_flex en mode tableau : flex strict, nowrap, aligné centré */
#page_compte blockquote[data-id] > .div_flex,
#page_compte blockquote[style*="#3b9fc4"] > .div_flex,
.lightbox blockquote[data-id] > .div_flex,
.lightbox blockquote[style*="#3b9fc4"] > .div_flex {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    margin: 0 !important;
    width: 100% !important;
    min-width: 0;
}

/* Les inputs avec flex:1 (champ principal "Nom" / "Email" / ...) :
   shrink jusqu'à 60px si nécessaire */
#page_compte blockquote .div_flex > input[style*="flex:1"],
#page_compte blockquote .div_flex > input[style*="flex: 1"],
.lightbox blockquote .div_flex > input[style*="flex:1"],
.lightbox blockquote .div_flex > input[style*="flex: 1"] {
    flex: 1 1 60px !important;
    min-width: 60px !important;
}

/* Les inputs/selects à largeur explicite peuvent shrinker à 50% */
#page_compte blockquote[data-id] > .div_flex > input:not([style*="flex"]),
#page_compte blockquote[data-id] > .div_flex > select:not([style*="flex"]),
#page_compte blockquote[style*="#3b9fc4"] > .div_flex > input:not([style*="flex"]),
#page_compte blockquote[style*="#3b9fc4"] > .div_flex > select:not([style*="flex"]),
.lightbox blockquote[data-id] > .div_flex > input:not([style*="flex"]),
.lightbox blockquote[data-id] > .div_flex > select:not([style*="flex"]),
.lightbox blockquote[style*="#3b9fc4"] > .div_flex > input:not([style*="flex"]),
.lightbox blockquote[style*="#3b9fc4"] > .div_flex > select:not([style*="flex"]) {
    flex-shrink: 1 !important;
    min-width: 50px !important;
}

/* Conteneurs de boutons d'action : NEVER shrink, NEVER grow */
#page_compte blockquote[data-id] > .div_flex > div[style*="width:"],
#page_compte blockquote[style*="#3b9fc4"] > .div_flex > div[style*="width:"],
.lightbox blockquote[data-id] > .div_flex > div[style*="width:"],
.lightbox blockquote[style*="#3b9fc4"] > .div_flex > div[style*="width:"] {
    flex: 0 0 auto !important;
}

/* Spans, labels avec largeur définie : pas de shrink */
#page_compte blockquote[data-id] > .div_flex > span[style*="width"],
#page_compte blockquote[data-id] > .div_flex > span[style*="min-width"],
#page_compte blockquote[data-id] > .div_flex > label[style*="width"],
.lightbox blockquote[data-id] > .div_flex > span[style*="width"],
.lightbox blockquote[data-id] > .div_flex > span[style*="min-width"],
.lightbox blockquote[data-id] > .div_flex > label[style*="width"] {
    flex: 0 0 auto !important;
}

/* Cellule couleur du chirurgien (utilisateurs config) */
#page_compte blockquote[data-id] > .div_flex > .u_couleur_cell,
.lightbox blockquote[data-id] > .div_flex > .u_couleur_cell {
    flex: 0 0 50px !important;
}

/* Pill de rôle dans la gestion des utilisateurs : chaque rôle a sa
   propre couleur lisible (avant : color:#fff inline sur fond blanc
   = invisible). Le span garde sa largeur 120px depuis l'inline. */
#page_compte .u_role_label,
.lightbox .u_role_label {
    background: var(--nd-grey-l);
    color: #fff !important;
    box-shadow: 0 2px 6px rgba(15,34,51,0.10);
    line-height: 1.2;
}
#page_compte .u_role_label.u_role_superadmin {
    background: linear-gradient(135deg, var(--nd-gold), #f4c75a);
    color: #3a2c00 !important;
}
#page_compte .u_role_label.u_role_admin {
    background: linear-gradient(135deg, var(--nd-blue), var(--nd-blue-l));
}
#page_compte .u_role_label.u_role_secretaire {
    background: linear-gradient(135deg, var(--nd-navy), #5d7290);
}
#page_compte .u_role_label.u_role_chirurgien {
    background: linear-gradient(135deg, #2e9e6e, #4cb98a);
}
#page_compte .u_role_label.u_role_anesthesiste {
    background: linear-gradient(135deg, #8e44ad, #a569bd);
}
#page_compte .u_role_label.u_role_consultant {
    background: linear-gradient(135deg, #16a085, #48c9b0);
}
#page_compte .u_role_label.u_role_limite {
    background: var(--nd-grey-l);
}

/* Si le contenu de la rangée dépasse vraiment le container parent,
   on autorise un scroll horizontal compact sur la blockquote */
#page_compte blockquote[data-id],
.lightbox blockquote[data-id] {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
}
/* Les wrappers de tableau laissent passer le scroll */
#page_compte #liste_utilisateurs,
#page_compte #liste_jours_feries,
#page_compte #liste_op_taches,
#page_compte #liste_reservation_taches {
    overflow-x: visible;
}

/* Le data-id est posé aussi sur le banner "Nouvelle …" #3b9fc4 :
   on garde malgré tout le bandeau bleu plein */
#page_compte blockquote[data-id][style*="#3b9fc4"] {
    border: none !important;
    background: linear-gradient(135deg, var(--nd-blue) 0%, var(--nd-blue-l) 100%) !important;
}

/* Header de colonnes (div inline avec background:#555)
   Padding horizontal 5px pour s'aligner avec les blockquotes lignes
   (qui ont border-left:1px + div_flex padding:5px = ~6px) */
#page_compte div[style*="background: #555"],
#page_compte div[style*="background:#555"] {
    background: linear-gradient(180deg, var(--nd-navy) 0%, var(--nd-navy-d) 100%) !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border-radius: 8px 8px 0 0 !important;
    margin-bottom: 6px !important;
    padding: 11px 6px !important;
    border: 1px solid var(--nd-navy-d) !important;
    border-bottom: none !important;
}
/* Cas du header dans lightbox_op_taches (padding inline 8px 12px) :
   on harmonise aussi */
#page_compte #lightbox_op_taches div[style*="background: #555"],
#lightbox_op_taches div[style*="background: #555"] {
    padding: 10px 6px !important;
}

/* Inputs et selects standalone (hors form) dans les tableaux config */
#page_compte blockquote .div_flex > input[type="text"],
#page_compte blockquote .div_flex > input[type="date"],
#page_compte blockquote .div_flex > input[type="number"],
#page_compte blockquote .div_flex > input[type="email"],
#page_compte blockquote .div_flex > input[type="password"],
#page_compte blockquote .div_flex > select {
    background: #fff !important;
    border: 1.5px solid var(--nd-line-d) !important;
    border-radius: 7px !important;
    color: var(--nd-grey) !important;
    padding: 6px 9px !important;
    height: 34px !important;
    font-weight: 400 !important;
    font-size: 13px !important;
    box-shadow: none !important;
    opacity: 1 !important;
}
#page_compte blockquote .div_flex > input:focus,
#page_compte blockquote .div_flex > select:focus {
    border-color: var(--nd-blue) !important;
    box-shadow: 0 0 0 3px rgba(0,118,158,0.10) !important;
    outline: none;
}
/* Sur le banner #3b9fc4 (ligne "Nouvelle …"), les inputs doivent
   rester visibles malgré le fond bleu — on garde fond blanc */
#page_compte blockquote[style*="#3b9fc4"] .div_flex > input,
#page_compte blockquote[style*="#3b9fc4"] .div_flex > select {
    border-color: rgba(255,255,255,0.4) !important;
}
#page_compte blockquote[style*="#3b9fc4"] .div_flex > input::placeholder {
    color: var(--nd-grey-l);
    opacity: 0.7;
}

/* Span "#42" dans les tableaux config */
#page_compte blockquote .div_flex > span[style*="#888"] {
    color: var(--nd-grey-l) !important;
    font-weight: 600;
    font-size: 12px;
}

/* Wrapper "tableau récapitulatif" des permissions */
#page_compte div[style*="background: #fff"][style*="color: #333"] {
    background: var(--nd-bg-card) !important;
    border: 1px solid var(--nd-line) !important;
    border-radius: 12px !important;
    box-shadow: var(--nd-shadow-xs);
    overflow: hidden;
}
#page_compte div[style*="background: #fff"][style*="color: #333"] table {
    border: none !important;
    box-shadow: none !important;
}
#page_compte div[style*="background: #fff"][style*="color: #333"] table thead tr[style*="#024a63"],
#page_compte div[style*="background: #fff"][style*="color: #333"] table thead tr[style*="background: #024a63"] {
    background: linear-gradient(180deg, var(--nd-navy) 0%, var(--nd-navy-d) 100%) !important;
}
#page_compte div[style*="background: #fff"][style*="color: #333"] table thead th {
    background: transparent !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 10.5px !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 10px 8px !important;
}
#page_compte div[style*="background: #fff"][style*="color: #333"] table tbody td {
    padding: 8px 10px !important;
    border-bottom: 1px solid var(--nd-line) !important;
    font-size: 12px;
}
/* Les inline bg #e8f4ff alternent les lignes : on assouplit la couleur */
#page_compte div[style*="background: #fff"][style*="color: #333"] table tbody tr[style*="#e8f4ff"] {
    background: var(--nd-bg-soft) !important;
}
#page_compte div[style*="background: #fff"][style*="color: #333"] table tbody tr[style*="background: #fff"] {
    background: #fff !important;
}

/* ─────────────────────────────────────────────────────────────────
   CHATBOT IA — au-dessus de tout (au-dessus même des lightboxes)
   Les surcharges sont scopées pour battre les inline styles du
   footer.php tout en gardant le comportement de toggle JS.
   ───────────────────────────────────────────────────────────────── */

#chatbot_btn {
    z-index: 9999999 !important;
    width: 40px !important;
    height: 40px !important;
    opacity: 0.7 !important;
    background: linear-gradient(135deg, var(--nd-blue) 0%, var(--nd-blue-l) 100%) !important;
    box-shadow: 0 12px 28px rgba(0,118,158,0.40) !important;
    transition: transform .2s ease, box-shadow .2s ease !important;
}
#chatbot_btn:hover {
    background: linear-gradient(135deg, var(--nd-blue-d) 0%, var(--nd-blue) 100%) !important;
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 18px 38px rgba(0,118,158,0.50) !important;
}
#chatbot_window {
    z-index: 9999999 !important;
    border-radius: 16px !important;
    box-shadow: 0 24px 60px rgba(0,0,0,0.55) !important;
}
#chatbot_header {
    background: linear-gradient(180deg, var(--nd-navy-d) 0%, #024a63 100%) !important;
    border-radius: 16px 16px 0 0 !important;
}

/* ─────────────────────────────────────────────────────────────────
   .white — classe historique qui forçait la couleur blanche pour
   du texte sur formulaires navy. Désormais, dans le back-office et
   les lightboxes, on inverse en navy lisible. La classe reste
   blanche dans le footer ou sur des fonds gardés sombres.
   ───────────────────────────────────────────────────────────────── */

#page_compte h4.white,
#page_compte h5.white,
#page_compte h6.white,
#page_compte p.white,
.lightbox .sous_lightbox h4.white,
.lightbox .sous_lightbox h5.white,
.lightbox .sous_lightbox h6.white,
.lightbox .sous_lightbox p.white,
.lightbox .sous_lightbox span.white {
    color: var(--nd-navy) !important;
}

/* Sur les bandeaux dégradés bleus (blockquotes "Nouvelle règle"),
   le .white doit RESTER blanc */
#page_compte blockquote[style*="#3b9fc4"] .white,
#page_compte blockquote[style*="#3b9fc4"] h6.white {
    color: #fff !important;
}

/* Boutons .btn.white : conservés (variant "outline") */
.btn.white { color: var(--nd-navy) !important; }

/* H5 de section "Gestion des règles d'encodage" : centré, élégant */
#page_compte h5.white {
    font-family: 'Cormorant Upright', serif !important;
    font-size: 22px !important;
    text-align: center;
    font-style: normal !important;
    font-weight: 600 !important;
    margin: 4px 0 18px !important;
    color: var(--nd-navy) !important;
}

/* H4 dans une lightbox : titre serif élégant */
.lightbox .sous_lightbox h4 {
    font-size: 20px !important;
    font-weight: 600 !important;
    margin: 0 0 18px !important;
}

/* ─────────────────────────────────────────────────────────────────
   FULLCALENDAR EVENTS — alignement avec .hero-mock de pub.php
   - radius 6px, shadow subtile, gras blanc, sous-titre opacity 0.85
   - on NE TOUCHE PAS les couleurs (générées dynamiquement par
     chirurgien) — juste la forme et la lisibilité
   ───────────────────────────────────────────────────────────────── */

#calendar .fc-v-event,
#info_calendar .fc-v-event,
#calendar .fc-h-event,
#info_calendar .fc-h-event {
    border-radius: 6px !important;
    /* Bordure blanche 1px tout autour pour bien détacher les events
       les uns des autres et du fond, façon hero-mock pub.php */
    border: 1px solid #ffffff !important;
    box-shadow: 0 4px 10px rgba(15,34,51,0.10) !important;
    overflow: hidden;
    padding: 2px 0;
}
/* Vue mensuelle : bordure blanche sur les daygrid events aussi */
.fc-dayGridMonth-view .fc-daygrid-event .fc-event-title {
    border: 1px solid #ffffff !important;
}

#calendar .fc-event-title,
#info_calendar .fc-event-title {
    font-weight: 700 !important;
    text-align: left !important;
    padding: 2px 6px !important;
    line-height: 1.25;
    /* color non forcé ici : la règle par chirurgien (générée dynamiquement
       dans compte_lesreservations.php) doit pouvoir poser du #3a2c00 pour
       le gold ou du #fff pour le reste */
}
#calendar .fc-event-title i,
#info_calendar .fc-event-title i {
    display: block;
    font-weight: 400;
    font-size: 11px;
    font-style: normal;
    opacity: 0.85;
    margin-top: 2px;
    /* color hérite du parent (.fc-event-title) qui prend la couleur chir */
}

#calendar .fc-timegrid-event .fc-event-time,
#info_calendar .fc-timegrid-event .fc-event-time {
    font-size: 11px !important;
    font-weight: 600 !important;
    opacity: 0.9;
    padding: 2px 6px !important;
}

/* Colonne des heures à gauche : style serif sobre */
#calendar .fc .fc-timegrid-axis-cushion,
#info_calendar .fc .fc-timegrid-axis-cushion,
#calendar .fc .fc-timegrid-slot-label-cushion,
#info_calendar .fc .fc-timegrid-slot-label-cushion {
    font-family: 'Lato', sans-serif !important;
    color: var(--nd-grey-l) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 1px;
}

/* En-têtes colonnes (jours de la semaine) — comme .hero-mock .h */
#calendar .fc .fc-col-header-cell-cushion,
#info_calendar .fc .fc-col-header-cell-cushion {
    color: var(--nd-navy) !important;
    font-family: 'Lato', sans-serif !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 10px 6px !important;
}
#calendar .fc-col-header-cell,
#info_calendar .fc-col-header-cell {
    background: var(--nd-bg-soft) !important;
    border-bottom: 1px solid var(--nd-line) !important;
}

/* Cellules vides du calendrier : pale comme .hero-mock .c */
#calendar .fc-timegrid-slot,
#info_calendar .fc-timegrid-slot {
    border-color: var(--nd-line) !important;
}
#calendar .fc-timegrid-slot-lane:hover,
#info_calendar .fc-timegrid-slot-lane:hover {
    background: rgba(0,118,158,0.03);
}

/* Jour actuel : léger highlight gold */
#calendar .fc .fc-timegrid-col.fc-day-today,
#info_calendar .fc .fc-timegrid-col.fc-day-today,
#calendar .fc-daygrid-day.fc-day-today,
#info_calendar .fc-daygrid-day.fc-day-today {
    background: rgba(219,170,6,0.06) !important;
}

/* Évènement "fermé" / "plein" : opacity douce */
#calendar .event_full, #calendar .event_close,
#info_calendar .event_full, #info_calendar .event_close {
    opacity: 0.85;
}
#calendar .event_full .fc-event-title,
#info_calendar .event_full .fc-event-title {
    font-size: 14px !important;
    text-align: center !important;
}

/* ─────────────────────────────────────────────────────────────────
   VUE MENSUELLE — alignement avec .hero-mock + lisibilité accrue
   ───────────────────────────────────────────────────────────────── */

/* Numéro du jour : style sobre, navy */
.fc-dayGridMonth-view .fc-daygrid-day-number {
    color: var(--nd-navy) !important;
    font-family: 'Lato', sans-serif !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    padding: 6px 8px !important;
    opacity: 1;
}
/* Jours d'un autre mois : grisés */
.fc-dayGridMonth-view .fc-day-other .fc-daygrid-day-number {
    color: var(--nd-grey-xl) !important;
    opacity: 0.6;
}
/* Aujourd'hui : surlignage doré */
.fc-dayGridMonth-view .fc-day-today {
    background: rgba(219,170,6,0.08) !important;
}
.fc-dayGridMonth-view .fc-day-today .fc-daygrid-day-number {
    background: var(--nd-gold);
    color: #2a2102 !important;
    border-radius: 999px;
    padding: 4px 10px !important;
    margin: 4px 4px 0 auto;
    display: inline-block;
    font-weight: 800;
    box-shadow: 0 4px 10px rgba(219,170,6,0.30);
}

/* Cellule de jour : bordure subtile */
.fc-dayGridMonth-view .fc-daygrid-day {
    border-color: var(--nd-line) !important;
    transition: background-color .15s ease;
}
.fc-dayGridMonth-view .fc-daygrid-day:hover {
    background: rgba(0,118,158,0.03);
}

/* Événements : pills colorés façon hero-mock */
.fc-dayGridMonth-view .fc-daygrid-event,
.fc-dayGridMonth-view .fc-daygrid-event-harness {
    border-radius: 5px !important;
    overflow: hidden;
}
.fc-dayGridMonth-view .fc-daygrid-event {
    border: none !important;
    background: transparent !important;
    padding: 1px 2px !important;
    margin: 1px 4px !important;
    box-shadow: none !important;
}
/* Titre = la vraie pastille colorée (rules per chir injectées) */
.fc-dayGridMonth-view .fc-event-title {
    padding: 3px 8px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: 0.1px;
    border-radius: 5px;
}
.fc-dayGridMonth-view .fc-daygrid-event-dot {
    display: none !important;
}
/* Notes en mois : pastille dorée (déjà géré par .event_notes_debutjournee) */
.fc-dayGridMonth-view .event_notes_debutjournee .fc-event-title {
    background: linear-gradient(135deg, var(--nd-gold), #f4c75a) !important;
    color: #3a2c00 !important;
}
/* Day cell content alignment */
.fc-dayGridMonth-view .fc-daygrid-day-frame {
    padding: 2px;
}
.fc-dayGridMonth-view .fc-daygrid-day-events {
    margin-top: 2px;
}

/* Notes en haut d'une journée : badge gold */
.event_notes_debutjournee {
    background: linear-gradient(135deg, var(--nd-gold), #f4c75a) !important;
    color: #3a2c00 !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 10px rgba(219,170,6,0.20) !important;
}
.event_notes_debutjournee .fc-event-title {
    color: #3a2c00 !important;
}

/* ─────────────────────────────────────────────────────────────────
   #page_lescomptes — DIV_NEWCOMPTE corrigé
   Original : bg blanc 80% opacité + color #758482 (gris pâle)
   ───────────────────────────────────────────────────────────────── */

#page_compte .div_newcompte {
    background: linear-gradient(180deg, #fff 0%, var(--nd-bg-soft) 100%) !important;
    border: 1px solid var(--nd-line) !important;
    border-radius: 12px !important;
    padding: 18px 22px !important;
    margin: 12px 0 18px !important;
    width: 100% !important;
    box-shadow: var(--nd-shadow-xs);
}
#page_compte .div_newcompte p {
    color: var(--nd-navy) !important;
    font-size: 15px !important;
    font-weight: 600;
    width: 100% !important;
    margin-bottom: 10px;
}
#page_compte .div_newcompte .btn_floatright {
    position: static !important;
    margin-top: 8px !important;
    max-width: 100%;
}

/* ─────────────────────────────────────────────────────────────────
   Patient profil dans la lightbox (admin_compte_load) :
   les <p class="white"> listent les rendez-vous et étaient
   surchargés par des styles inline (background-color sombre).
   On les fait apparaître comme cartes claires.
   ───────────────────────────────────────────────────────────────── */

.lightbox .sous_lightbox .box_historique p[style*="background"] {
    background: var(--nd-bg-soft) !important;
    color: var(--nd-grey) !important;
    border: 1px solid var(--nd-line);
    border-radius: 8px;
    padding: 8px 12px !important;
    margin: 4px 0 !important;
    font-weight: 500;
}

/* H6 "Rendez-vous du patient" */
.lightbox .sous_lightbox h6.white {
    color: var(--nd-navy) !important;
    font-family: 'Lato', sans-serif !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 16px !important;
}

/* Wrapper div avec inline background sombre (rdv patient panel) */
.lightbox div[style*="background:rgba(0,0,0"],
.lightbox div[style*="background: rgba(0,0,0"],
.lightbox div[style*="background: rgba(0, 0, 0"] {
    background: var(--nd-bg-soft) !important;
    border: 1px solid var(--nd-line);
    border-radius: 12px;
    color: var(--nd-grey);
    padding: 14px 16px !important;
}

/* Liens avec inline color:white dans les lightboxes */
.lightbox a[style*="color:white"],
.lightbox a[style*="color: white"],
.lightbox a[style*="color:#fff"],
.lightbox a[style*="color: #fff"] {
    color: var(--nd-blue) !important;
    font-weight: 600;
}
.lightbox a[style*="color:white"]:hover,
.lightbox a[style*="color: white"]:hover {
    color: var(--nd-blue-d) !important;
    text-decoration: underline;
}

/* ─────────────────────────────────────────────────────────────────
   LOADER — barre fine en haut au lieu du bloc blanc plein écran
   ───────────────────────────────────────────────────────────────── */

.loader {
    background: transparent !important;
    height: 3px !important;
    width: 100% !important;
    top: 0 !important;
    left: 0 !important;
    position: fixed !important;
    z-index: 99999 !important;
    background-image: linear-gradient(90deg, transparent, var(--nd-blue), var(--nd-gold), var(--nd-blue), transparent) !important;
    background-size: 200% 100% !important;
    animation: nd-loader 1.4s linear infinite;
    box-shadow: 0 1px 8px rgba(0,118,158,0.4);
}
.loader::after { display: none !important; }
@keyframes nd-loader {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.reload {
    /* Cette classe est utilisée par main.js sur les <form> pour
       déclencher location.reload() au succès — surtout pas de
       styling visuel ici, sinon les <form class="reload"> dans
       les lightboxes sont réduits à un cercle de 14px qui tourne. */
}
.nd-reload {
    display: inline-block;
    width: 14px; height: 14px;
    border: 2px solid var(--nd-line);
    border-top-color: var(--nd-blue);
    border-radius: 50%;
    animation: nd-spin 0.8s linear infinite;
    vertical-align: middle;
}
@keyframes nd-spin { to { transform: rotate(360deg); } }

/* ─────────────────────────────────────────────────────────────────
   FULLCALENDAR — réskin léger, conserve la mécanique
   ───────────────────────────────────────────────────────────────── */

#calendar, #info_calendar {
    background: #fff !important;
    border-radius: 14px !important;
    border: 1px solid var(--nd-line);
    box-shadow: var(--nd-shadow-xs);
}

.fc-toolbar-title {
    font-family: 'Cormorant Upright', serif !important;
    color: var(--nd-navy) !important;
    font-weight: 600 !important;
    font-size: 24px !important;
}

.fc .fc-button-primary {
    background-color: #fff !important;
    border-color: var(--nd-line-d) !important;
    color: var(--nd-navy) !important;
    border-radius: 999px !important;
    padding: 6px 14px !important;
    font-family: 'Lato', sans-serif !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    text-transform: none !important;
    box-shadow: var(--nd-shadow-xs) !important;
}
.fc .fc-button-primary:hover {
    background-color: var(--nd-bg) !important;
    border-color: var(--nd-blue) !important;
    color: var(--nd-blue) !important;
}
.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
    background-color: var(--nd-navy) !important;
    border-color: var(--nd-navy) !important;
    color: #fff !important;
}

.fc-day-today { background: rgba(219,170,6,0.05) !important; }
.fc-col-header-cell { background: var(--nd-bg-soft); }

/* Mini-nav 1J / 5J / Mois (à droite du calendrier) */
#menu_nbr_view {
    background-color: transparent !important;
    border: 1px solid var(--nd-line) !important;
    border-radius: 999px !important;
    overflow: hidden;
    padding: 3px !important;
    display: inline-flex;
    gap: 2px;
}
#menu_nbr_view li { display: inline-block; margin: 0 !important; }
#menu_nbr_view li a {
    background: transparent !important;
    color: var(--nd-grey-l) !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 4px 14px !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    width: auto !important;
    min-width: 42px;
}
#menu_nbr_view li a:hover {
    background: var(--nd-bg) !important;
    color: var(--nd-blue) !important;
}
#menu_nbr_view li a.actif {
    background: var(--nd-blue) !important;
    color: #fff !important;
}

/* Bouton "+ Réservation" en haut du calendrier */
#reservation_ajouter {
    background-color: var(--nd-blue) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 999px !important;
    padding: 7px 16px !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    opacity: 1 !important;
    box-shadow: 0 6px 16px rgba(0,118,158,0.30);
    height: auto !important;
}
#reservation_ajouter:hover {
    background-color: var(--nd-blue-d) !important;
    color: #fff !important;
}

/* ─────────────────────────────────────────────────────────────────
   SELECT2
   ───────────────────────────────────────────────────────────────── */

.select2-container--default .select2-selection--single {
    border: 1.5px solid var(--nd-line-d) !important;
    border-radius: 10px !important;
    height: 40px !important;
    padding: 4px 10px !important;
    background: #fff !important;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.select2-container--default .select2-selection--single:hover,
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--nd-blue) !important;
    box-shadow: 0 0 0 4px rgba(0,118,158,0.10) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--nd-grey) !important;
    font-size: 14px !important;
    line-height: 30px !important;
    padding-left: 4px !important;
    font-weight: 400;
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 38px !important; }
.select2-dropdown {
    border: 1px solid var(--nd-line) !important;
    border-radius: 10px !important;
    box-shadow: var(--nd-shadow-m) !important;
    overflow: hidden;
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background: var(--nd-blue) !important;
    color: #fff !important;
}

/* ─────────────────────────────────────────────────────────────────
   DATEPICKER (Air Datepicker)
   ───────────────────────────────────────────────────────────────── */

.datepicker {
    border: 1px solid var(--nd-line) !important;
    border-radius: 12px !important;
    box-shadow: var(--nd-shadow-m) !important;
    font-family: 'Lato', sans-serif !important;
    overflow: hidden;
}
.datepicker--cell { border-radius: 6px !important; }
.datepicker--day-name { color: var(--nd-blue) !important; font-weight: 700 !important; }
.datepicker--cell.-current- {
    color: var(--nd-gold) !important;
    font-weight: 700;
}
.datepicker--cell.-selected-,
.datepicker--cell.-selected-.-current- {
    background: var(--nd-blue) !important;
    color: #fff !important;
}

/* ─────────────────────────────────────────────────────────────────
   DIV_NEWCOMPTE — bandeau d'ajout de patient en haut de liste
   ───────────────────────────────────────────────────────────────── */

.div_newcompte {
    background: var(--nd-bg-soft) !important;
    border: 1px solid var(--nd-line) !important;
    border-radius: 12px !important;
    padding: 14px 20px !important;
    margin: 8px 0 18px !important;
    width: 100% !important;
    box-shadow: var(--nd-shadow-xs);
}
.div_newcompte p {
    color: var(--nd-grey-l) !important;
    font-size: 14px !important;
    width: 100% !important;
    margin-bottom: 8px;
}
.div_newcompte input {
    background: #fff !important;
    border: 1.5px solid var(--nd-line-d) !important;
    border-radius: 10px !important;
    padding: 9px 12px !important;
    color: var(--nd-grey) !important;
    width: auto !important;
    min-width: 200px;
}
.div_newcompte input:focus {
    border-color: var(--nd-blue) !important;
    box-shadow: 0 0 0 4px rgba(0,118,158,0.10) !important;
}

/* ─────────────────────────────────────────────────────────────────
   TYPOGRAPHIE — réductions ciblées seulement
   On garde h3 grand (titres marketing) mais on réduit pour back-office
   ───────────────────────────────────────────────────────────────── */

/* Sur le back-office, h3 hérités du marketing à 72px sont disproportionnés */
#page_compte h3 {
    font-size: 24px !important;
    font-family: 'Cormorant Upright', serif !important;
    color: var(--nd-navy) !important;
    margin-bottom: 14px !important;
    font-weight: 600;
    text-align: left;
}
#page_compte h4 {
    font-size: 18px !important;
    font-family: 'Cormorant Upright', serif !important;
    color: var(--nd-navy) !important;
    margin-bottom: 12px !important;
    font-weight: 600;
}
#page_compte h5 {
    font-size: 15px !important;
    color: var(--nd-grey-l) !important;
    font-style: normal !important;
}
#page_compte h6 {
    font-size: 16px !important;
    color: var(--nd-navy) !important;
    font-family: 'Lato', sans-serif !important;
    font-weight: 600 !important;
}

/* ─────────────────────────────────────────────────────────────────
   CHIPS / BADGES utilitaires (utilisable dans le back-office)
   ───────────────────────────────────────────────────────────────── */

.chip {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(0,118,158,0.10);
    color: var(--nd-blue) !important;
    font-size: 11px !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

/* ─────────────────────────────────────────────────────────────────
   CONFIGURATIONS — sous_nav_bis (Règles / Jours fériés / Opérations)
   Original : noir avec opacity 0.3, actif bleu clair
   ───────────────────────────────────────────────────────────────── */

#page_compte .sous_nav_bis {
    background: transparent !important;
    border-bottom: none !important;
    margin-top: 14px;
    padding: 0 0 14px;
    gap: 6px;
    display: flex;
    flex-wrap: wrap;
}
#page_compte .sous_nav_bis > li {
    flex: 1 1 auto;
    min-width: 160px;
}
#page_compte .sous_nav_bis > li > a {
    background: var(--nd-bg) !important;
    color: var(--nd-grey-l) !important;
    border: 1px solid var(--nd-line) !important;
    border-radius: 999px !important;
    padding: 9px 18px !important;
    opacity: 1 !important;
    font-size: 13px !important;
    text-align: center;
    width: 100% !important;
}
#page_compte .sous_nav_bis > li > a:hover {
    background: #fff !important;
    border-color: var(--nd-blue) !important;
    color: var(--nd-blue) !important;
}
#page_compte .sous_nav_bis > li > a.actif {
    background: var(--nd-blue) !important;
    border-color: var(--nd-blue) !important;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(0,118,158,0.25);
}

/* ─────────────────────────────────────────────────────────────────
   FORM RECHERCHE (en haut du calendrier)
   Original : background-color: darken($color-5, 5%) — donc navy très foncé
   On rebadge en zone d'outils claire
   ───────────────────────────────────────────────────────────────── */

#form_recherche {
    background: var(--nd-bg-soft) !important;
    border: 1px solid var(--nd-line) !important;
    border-radius: 14px !important;
    padding: 14px 18px !important;
    margin-bottom: 16px;
    box-shadow: var(--nd-shadow-xs);
}
#form_recherche label { color: var(--nd-navy) !important; }

/* ─────────────────────────────────────────────────────────────────
   STATISTIQUES (#page_statistiques)
   Original : déjà partiellement clair — on accentue
   ───────────────────────────────────────────────────────────────── */

#page_statistiques .card {
    background: #fff !important;
    border: 1px solid var(--nd-line) !important;
    border-radius: 12px !important;
    box-shadow: var(--nd-shadow-xs) !important;
    padding: 16px 18px !important;
    transition: box-shadow .2s ease;
}
#page_statistiques .card:hover { box-shadow: var(--nd-shadow-s) !important; }
#page_statistiques .card h3 {
    color: var(--nd-grey-l) !important;
    font-family: 'Lato', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 8px;
}
#page_statistiques .kpi {
    background: #fff !important;
    border: 1px solid var(--nd-line) !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
    box-shadow: var(--nd-shadow-xs);
}
#page_statistiques .kpi .label {
    color: var(--nd-grey-l) !important;
    font-size: 11px !important;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 700;
}
#page_statistiques .kpi .value {
    font-family: 'Cormorant Upright', serif !important;
    font-size: 28px !important;
    color: var(--nd-navy) !important;
    margin-top: 2px;
    font-weight: 700;
    line-height: 1.1;
}
#page_statistiques .datatable th {
    background: var(--nd-bg-soft) !important;
    color: var(--nd-grey-l) !important;
    border-bottom: 1px solid var(--nd-line) !important;
}
#page_statistiques .datatable td {
    border-bottom: 1px solid var(--nd-line) !important;
}

/* ─────────────────────────────────────────────────────────────────
   HISTORIQUES — table des actions
   ───────────────────────────────────────────────────────────────── */

#page_compte table.datatable {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    border: 1px solid var(--nd-line);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--nd-shadow-xs);
}
#page_compte table.datatable thead th {
    background: var(--nd-bg-soft);
    color: var(--nd-grey-l);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid var(--nd-line);
}
#page_compte table.datatable tbody td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--nd-line);
    font-size: 13px;
    color: var(--nd-grey);
}
#page_compte table.datatable tbody tr:last-child td { border-bottom: none; }
#page_compte table.datatable tbody tr:hover { background: var(--nd-bg-soft); }

/* ─────────────────────────────────────────────────────────────────
   MOBILE — quelques ajustements
   ───────────────────────────────────────────────────────────────── */

@media (max-width: 850px) {
    #page_compte section { padding: 14px 8px !important; }
    #page_compte .div_cadre .box_compte { padding: 16px 14px 24px !important; }
    #page_compte h3 { font-size: 20px !important; }
    body:not(#page_compte) header { padding: 10px 16px; }
    body:not(#page_compte) header h1.mobile { font-size: 22px !important; }
}
@media (max-width: 600px) {
    #page_connexion .container,
    #page_logout .container,
    #page_accueil .container { max-width: 92% !important; }
    .lightbox .sous_lightbox { padding: 18px !important; }
}

/* ─────────────────────────────────────────────────────────────────
   ANIMATIONS subtiles (hover lift sur cartes)
   ───────────────────────────────────────────────────────────────── */

#page_compte .div_cadre,
#page_compte .card,
#page_statistiques .card { transition: box-shadow .25s ease, transform .25s ease; }