/* =============================================================================
 * assets/css/scaff360.css — thème commun Scaff.360
 * -----------------------------------------------------------------------------
 * Chargé dans le <head> de toutes les pages (après le titre). Il apporte :
 *   1. la police Inter (chiffres alignés, l / I / 1 distincts) et des tailles lisibles
 *      (plus aucun texte sous 12 px) ;
 *   2. les fenêtres pop-up (modales) des formulaires d'ajout / modification ;
 *   3. les effets : apparition en cascade, survols, boutons lumineux, fond vivant.
 * Les tailles sont forcées (!important) pour passer devant les classes Tailwind
 * existantes sans réécrire chaque page. Palette : indigo #180A56 / orange #F45A2A.
 * Les animations sont coupées si l'utilisateur a demandé « réduire les animations ».
 * ========================================================================== */
@import url('../vendor/fonts/inter.css');             /* police de l'ERP, locale (hors connexion) */

:root {
    --s360-navy: #180A56;
    --s360-indigo: #21147C;
    --s360-violet: #5240E0;
    --s360-orange: #F45A2A;
    --s360-orange-2: #FF8A3D;
    --s360-sky: #16A3DD;
    --s360-ink: #120842;
    --s360-muted: #5B5F7A;
    --s360-ombre: 0 1px 2px rgba(24, 10, 86, .05), 0 8px 24px -12px rgba(24, 10, 86, .18);
    --s360-ombre-haute: 0 2px 4px rgba(24, 10, 86, .06), 0 18px 40px -14px rgba(24, 10, 86, .32);
}

/* ---------- Police : réglée dans le bloc « STYLE CLAIR » en fin de fichier (Inter) ---------- */
body { font-size: 15px; color: var(--s360-ink); -webkit-font-smoothing: antialiased; }

/* ---------- Échelle de tailles (maquettes : 12–13 px mini, 15 px courant) ---------- */
.text-\[9px\], .text-\[9\.5px\], .text-\[10px\], .text-\[10\.5px\] { font-size: 12px !important; line-height: 1.4 !important; }
.text-\[11px\], .text-\[11\.5px\]                  { font-size: 12.5px !important; line-height: 1.45 !important; }
.text-xs                                           { font-size: 13px !important; line-height: 1.45 !important; }
.text-\[12px\], .text-\[12\.5px\]                  { font-size: 13.5px !important; line-height: 1.45 !important; }
.text-\[13px\], .text-\[13\.5px\]                  { font-size: 14.5px !important; line-height: 1.5 !important; }
.text-sm                                           { font-size: 15px !important; line-height: 1.5 !important; }
.text-base, .text-\[15px\]                         { font-size: 16px !important; line-height: 1.5 !important; }
.text-lg                                           { font-size: 19px !important; line-height: 1.4 !important; }
.text-xl                                           { font-size: 21px !important; line-height: 1.35 !important; }
.text-2xl                                          { font-size: 28px !important; line-height: 1.2 !important; letter-spacing: -.015em; }
.text-3xl                                          { font-size: 32px !important; line-height: 1.15 !important; letter-spacing: -.02em; }

/* Champs de formulaire communs (.lib / .champ / .msg-err / .puce définis dans les pages) */
.lib     { font-size: 13.5px !important; color: #2E2A55 !important; margin-bottom: .35rem !important; }
.champ   { font-size: 15px !important; transition: border-color .15s, box-shadow .15s, background .15s; }
.champ:hover:not(:focus):not(:disabled) { border-color: #C9C3EE; }
.msg-err { font-size: 13px !important; }
.puce    { font-size: 12.5px !important; }
table { font-size: 15px; }
h1.text-2xl { color: var(--s360-ink) !important; font-weight: 800 !important; }

/* =============================================================================
 * EFFETS
 * ========================================================================== */

/* Fond de page vivant : léger halo indigo / orange derrière le contenu */
body.bg-slate-100, body.bg-slate-50, body.bg-gray-100, body.bg-gray-50 {
    background-color: #F1F2FA !important;
    background-image:
        radial-gradient(900px 500px at 100% -10%, rgba(244, 90, 42, .10), transparent 60%),
        radial-gradient(800px 600px at 20% 110%, rgba(82, 64, 224, .10), transparent 60%);
    background-attachment: fixed;
}

/* Apparition en cascade des blocs de la page (le contenu reste en place après l'animation) */
@keyframes s360-monte { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
main > *:not(.fixed):not(script):not(template) { animation: s360-monte .5s cubic-bezier(.2, .7, .2, 1) backwards; }
main > *:nth-child(2) { animation-delay: .05s; }
main > *:nth-child(3) { animation-delay: .10s; }
main > *:nth-child(4) { animation-delay: .15s; }
main > *:nth-child(5) { animation-delay: .20s; }
main > *:nth-child(n+6) { animation-delay: .25s; }
.s360-cascade > * { animation: s360-monte .55s cubic-bezier(.2, .7, .2, 1) backwards; }
.s360-cascade > *:nth-child(2) { animation-delay: .06s; }
.s360-cascade > *:nth-child(3) { animation-delay: .12s; }
.s360-cascade > *:nth-child(4) { animation-delay: .18s; }
.s360-cascade > *:nth-child(5) { animation-delay: .24s; }
.s360-cascade > *:nth-child(6) { animation-delay: .30s; }
.s360-cascade > *:nth-child(7) { animation-delay: .36s; }
.s360-cascade > *:nth-child(n+8) { animation-delay: .42s; }

/* Cartes blanches : ombre douce, et soulèvement au survol pour les cartes cliquables */
main .bg-white.rounded-2xl { box-shadow: var(--s360-ombre); border-color: #E6E4F3 !important; }
main a.bg-white.rounded-2xl, .s360-carte-lien {
    transition: transform .2s cubic-bezier(.2, .7, .2, 1), box-shadow .2s, border-color .2s;
}
main a.bg-white.rounded-2xl:hover, .s360-carte-lien:hover {
    transform: translateY(-3px); box-shadow: var(--s360-ombre-haute); border-color: #CFC8F5 !important;
}

/* Boutons orange : dégradé, halo et reflet qui passe au survol */
button[style*="background:var(--orange)"], a[style*="background:var(--orange)"],
button[style*="background:#FF7A29"], button[style*="background:#F45A2A"], a[style*="background:#F45A2A"],
.btn-pri, .s360-btn {
    background-image: linear-gradient(135deg, var(--s360-orange-2) 0%, var(--s360-orange) 55%, #E0431A 100%) !important;
    box-shadow: 0 6px 16px -6px rgba(244, 90, 42, .65), inset 0 1px 0 rgba(255, 255, 255, .25);
    position: relative; overflow: hidden; isolation: isolate;
    transition: transform .15s, box-shadow .2s, filter .2s;
}
button[style*="background:var(--orange)"]::after, a[style*="background:var(--orange)"]::after,
button[style*="background:#FF7A29"]::after, button[style*="background:#F45A2A"]::after, a[style*="background:#F45A2A"]::after,
.btn-pri::after, .s360-btn::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%);
    transform: translateX(-120%); transition: transform .6s ease;
}
button[style*="background:var(--orange)"]:hover:not(:disabled), a[style*="background:var(--orange)"]:hover,
button[style*="background:#FF7A29"]:hover:not(:disabled), button[style*="background:#F45A2A"]:hover:not(:disabled), a[style*="background:#F45A2A"]:hover,
.btn-pri:hover:not(:disabled), .s360-btn:hover:not(:disabled) {
    transform: translateY(-1px); box-shadow: 0 10px 22px -8px rgba(244, 90, 42, .75), inset 0 1px 0 rgba(255, 255, 255, .25); opacity: 1 !important;
}
button[style*="background:var(--orange)"]:hover::after, a[style*="background:var(--orange)"]:hover::after,
button[style*="background:#FF7A29"]:hover::after, button[style*="background:#F45A2A"]:hover::after, a[style*="background:#F45A2A"]:hover::after,
.btn-pri:hover::after, .s360-btn:hover::after { transform: translateX(120%); }
button:active:not(:disabled):not(.absolute):not([class*="translate"]) { transform: translateY(0) scale(.98); }

/* Boutons secondaires blancs : survol coloré */
main button.bg-white.border, main a.bg-white.border:not(.rounded-2xl) { transition: border-color .15s, color .15s, background .15s, box-shadow .15s; }
main button.bg-white.border:hover:not(:disabled), main a.bg-white.border:not(.rounded-2xl):hover {
    border-color: #C9C3EE !important; color: var(--s360-indigo); box-shadow: 0 4px 12px -6px rgba(33, 20, 124, .3);
}

/* Lignes de tableau et éléments de liste : survol plus marqué */
main tbody tr { transition: background-color .15s; }
main tbody tr:hover { background-color: #F6F4FF !important; }

/* Champs : halo orange au focus */
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }

/* Pastilles de statut un peu plus présentes */
.rounded-full.px-2, .rounded-full.px-2\.5 { font-weight: 600; }

/* Barres de défilement fines aux couleurs de l'appli */
* { scrollbar-width: thin; scrollbar-color: #C9C3EE transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: #C9C3EE; border-radius: 9px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: #A79DE6; background-clip: padding-box; }

/* Barre latérale : élément actif lumineux, survols glissants */
aside.navbg { box-shadow: 4px 0 30px -10px rgba(18, 8, 66, .5); }
aside.navbg nav a, aside.navbg nav button { transition: background-color .15s, color .15s, transform .15s; }
aside.navbg nav a:hover, aside.navbg nav button:hover { transform: translateX(2px); }
aside.navbg nav a[style*="border-left:3px solid"] {
    background: linear-gradient(90deg, rgba(244, 90, 42, .28), rgba(244, 90, 42, .06)) !important;
    box-shadow: inset 0 0 0 1px rgba(244, 90, 42, .25), 0 8px 20px -10px rgba(244, 90, 42, .6);
}

aside.navbg nav > .flex.p-1.rounded-lg { font-size: 12.5px !important; }
aside.navbg nav > .flex.p-1.rounded-lg button { white-space: nowrap; }

/* ---------- Fenêtres pop-up (modales) ---------- */
.s360-modale-fond {
    position: fixed; inset: 0; z-index: 60;
    display: flex; align-items: flex-start; justify-content: center;
    padding: 6vh 1rem 2rem; overflow-y: auto;
    background: rgba(18, 8, 66, .45); backdrop-filter: blur(4px);
    animation: s360-fondu .15s ease-out;
}
.s360-modale {
    position: relative; width: 100%; max-width: 640px;
    background: #fff; border-radius: 20px;
    box-shadow: 0 30px 70px -15px rgba(18, 8, 66, .5), 0 0 0 1px rgba(24, 10, 86, .06);
    display: flex; flex-direction: column; max-height: 88vh;
    animation: s360-pop .22s cubic-bezier(.2, .9, .3, 1.2);
}
.s360-modale::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; border-radius: 20px 20px 0 0;
    background: linear-gradient(90deg, var(--s360-violet), var(--s360-orange));
}
.s360-modale-entete {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1.2rem 1.5rem 1.05rem; border-bottom: 1px solid #EEECF7;
}
.s360-modale-entete h2, .s360-modale-entete h3 { font-size: 19px; font-weight: 800; color: var(--s360-ink); margin: 0; }
.s360-modale-corps { padding: 1.4rem 1.5rem; overflow-y: auto; flex: 1 1 auto; }
.s360-modale-pied {
    display: flex; justify-content: flex-end; gap: .6rem;
    padding: .95rem 1.5rem; border-top: 1px solid #EEECF7; background: #FAFAFE;
    border-radius: 0 0 20px 20px;
}
.s360-fermer {
    width: 36px; height: 36px; border-radius: 10px; color: #64748B;
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    transition: background .15s, color .15s, transform .2s;
}
.s360-fermer:hover { background: #F1EFFC; color: var(--s360-ink); transform: rotate(90deg); }
/* Panneaux transformés en pop-up (création client, article, projet, mouvement…) */
.s360-popup { animation: s360-pop .22s cubic-bezier(.2, .9, .3, 1.2); }
.s360-popup::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; border-radius: 16px 16px 0 0; z-index: 2;
    background: linear-gradient(90deg, var(--s360-violet), var(--s360-orange));
}
@keyframes s360-pop { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes s360-fondu { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Logo ---------- */
.s360-logo-tuile {
    width: 44px; height: 44px; border-radius: 12px; background: #fff; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .3), 0 0 0 3px rgba(244, 90, 42, .18);
    transition: transform .3s cubic-bezier(.2, .9, .3, 1.3);
}
a:hover > .s360-logo-tuile { transform: rotate(-6deg) scale(1.06); }
.s360-logo-tuile img { width: 36px; height: 36px; object-fit: contain; }
@keyframes s360-flotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.s360-flotte { animation: s360-flotte 5s ease-in-out infinite; }

/* ---------- Accessibilité : moins d'animations si demandé ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* =============================================================================
 * PAGES DE CONNEXION (connexion, code OTP, mot de passe oublié, réinitialisation)
 * ========================================================================== */
body .form-panel {
    background:
        radial-gradient(520px 380px at 90% 8%, rgba(244, 90, 42, .16), transparent 65%),
        radial-gradient(520px 420px at 8% 95%, rgba(82, 64, 224, .16), transparent 65%),
        linear-gradient(180deg, #F4F3FF 0%, #EBF4FC 100%);
    overflow: hidden;
}
body .form-panel::before, body .form-panel::after {
    content: ""; position: absolute; border-radius: 50%; filter: blur(60px); opacity: .35; pointer-events: none;
    animation: s360-derive 16s ease-in-out infinite;
}
body .form-panel::before { width: 260px; height: 260px; background: #39BDF7; top: 12%; left: -80px; }
body .form-panel::after  { width: 220px; height: 220px; background: #F45A2A; bottom: 6%; right: -60px; animation-delay: -7s; }
@keyframes s360-derive { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(40px, -30px) scale(1.12); } }
body .form-panel > * { position: relative; z-index: 1; }
body .card { position: relative; overflow: hidden; backdrop-filter: blur(8px);
    box-shadow: 0 1px 2px rgba(24, 10, 86, .05), 0 30px 60px -28px rgba(24, 10, 86, .45), 0 0 0 1px rgba(255, 255, 255, .7) inset !important; }
body .card::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
    background: linear-gradient(90deg, #39BDF7, #5240E0 45%, #F45A2A);
    background-size: 200% 100%; animation: s360-ruban 6s linear infinite;
}
@keyframes s360-ruban { from { background-position: 0 0; } to { background-position: 200% 0; } }
body .btn-primary::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .4) 50%, transparent 70%);
    transform: translateX(-120%); transition: transform .7s ease;
}
body .btn-primary:hover::after { transform: translateX(120%); }

/* Vitrine du logo sur le panneau de gauche */
.auth-vitrine { position: absolute; right: 9%; top: 15%; width: 170px; height: 170px; z-index: 5; }
.auth-vitrine .auth-logo {
    position: absolute; inset: 18px; border-radius: 34px; background: #fff;
    display: grid; place-items: center;
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .55), 0 0 0 8px rgba(255, 255, 255, .08), 0 0 60px rgba(244, 90, 42, .35);
}
.auth-vitrine .auth-logo img { width: 104px; height: 104px; object-fit: contain; }
.auth-vitrine .auth-orbite {
    position: absolute; inset: 0; border-radius: 50%;
    border: 1.5px dashed rgba(255, 255, 255, .28); animation: s360-tourne 26s linear infinite;
}
.auth-vitrine .auth-orbite::before, .auth-vitrine .auth-orbite::after {
    content: ""; position: absolute; width: 12px; height: 12px; border-radius: 50%;
}
.auth-vitrine .auth-orbite::before { top: -6px; left: 50%; margin-left: -6px; background: #F45A2A; box-shadow: 0 0 14px #F45A2A; }
.auth-vitrine .auth-orbite::after  { bottom: 14%; right: -2px; background: #39BDF7; box-shadow: 0 0 14px #39BDF7; }
@keyframes s360-tourne { to { transform: rotate(360deg); } }
@media (max-width: 1279px) { .auth-vitrine { display: none; } }

/* =============================================================================
 * BARRE DU HAUT : cloche de notifications + utilisateur (components/sidebar.php)
 * ========================================================================== */
.s360-topbar {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .55rem .75rem .55rem 1.1rem; margin: 0 0 1.25rem;
    background: rgba(255, 255, 255, .78); backdrop-filter: blur(10px);
    border: 1px solid #E6E4F3; border-radius: 16px; box-shadow: 0 6px 20px -14px rgba(24, 10, 86, .35);
    position: relative; z-index: 45; flex-shrink: 0;
}
.s360-topbar.s360-topbar-marge { margin: 1rem 1.5rem .25rem; }
@media (min-width: 1024px) { .s360-topbar.s360-topbar-marge { margin: 1rem 2rem .25rem; } }
.s360-topbar-gauche { display: flex; align-items: center; gap: .55rem; font-size: 14px; font-weight: 600; color: #5B5F7A; min-width: 0; }
.s360-topbar-gauche i { color: var(--s360-orange); }
.s360-topbar-gauche span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s360-topbar-droite { display: flex; align-items: center; gap: .7rem; }
.s360-cloche-zone { position: relative; }
.s360-cloche {
    width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; position: relative;
    background: #fff; border: 1px solid #E6E4F3; color: #21147C; font-size: 17px; transition: background .15s, transform .15s, box-shadow .15s;
}
.s360-cloche:hover { background: #F6F4FF; box-shadow: 0 6px 16px -8px rgba(33, 20, 124, .45); }
.s360-cloche.s360-sonne i { animation: s360-sonne 2.8s ease-in-out infinite; transform-origin: 50% 0; }
@keyframes s360-sonne { 0%, 70%, 100% { transform: rotate(0); } 74% { transform: rotate(14deg); } 78% { transform: rotate(-12deg); } 82% { transform: rotate(9deg); } 86% { transform: rotate(-6deg); } 90% { transform: rotate(3deg); } }
.s360-pastille {
    position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
    background: linear-gradient(135deg, #FF8A3D, #F45A2A); color: #fff; font-size: 11px; font-weight: 800;
    display: grid; place-items: center; border: 2px solid #fff; box-shadow: 0 4px 10px -2px rgba(244, 90, 42, .7);
}
.s360-pastille[hidden] { display: none; }
.s360-notif-panneau {
    position: absolute; right: 0; top: calc(100% + 10px); width: min(400px, 90vw); background: #fff; border-radius: 18px; overflow: hidden;
    box-shadow: 0 28px 60px -18px rgba(18, 8, 66, .5), 0 0 0 1px rgba(24, 10, 86, .07); animation: s360-pop .18s cubic-bezier(.2, .9, .3, 1.2);
}
.s360-notif-panneau[hidden] { display: none; }
.s360-notif-tete { display: flex; justify-content: space-between; align-items: center; padding: .9rem 1rem; border-bottom: 1px solid #EEECF7; font-size: 15px; color: #120842; }
.s360-notif-compte { font-weight: 500; color: #6B6890; font-size: 13px; }
.s360-tout-lire { font-size: 12.5px; font-weight: 700; color: var(--s360-orange); }
.s360-tout-lire:hover { text-decoration: underline; }
.s360-notif-liste { max-height: 420px; overflow-y: auto; }
.s360-notif { display: flex; gap: .75rem; padding: .8rem 1rem; border-bottom: 1px solid #F4F3FA; position: relative; transition: background .15s; }
.s360-notif:hover { background: #F7F5FF; }
.s360-notif.lue { opacity: .62; }
.s360-notif-ico { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; flex-shrink: 0; font-size: 14px; }
.n-danger .s360-notif-ico { background: #FFE5DE; color: #C2340C; }
.n-attention .s360-notif-ico { background: #FDF0D2; color: #9A5B00; }
.n-info .s360-notif-ico { background: #E5E2FC; color: #4330C9; }
.s360-notif-txt { display: flex; flex-direction: column; min-width: 0; font-size: 13.5px; color: #3A3760; }
.s360-notif-txt strong { color: #120842; font-size: 14px; }
.s360-notif-txt small { color: #9A97B8; font-size: 12px; margin-top: 2px; }
.s360-point { width: 9px; height: 9px; border-radius: 50%; background: var(--s360-orange); position: absolute; right: 1rem; top: 1.1rem; box-shadow: 0 0 0 3px rgba(244, 90, 42, .2); }
.s360-notif-vide { padding: 2rem 1rem; text-align: center; color: #8C89AB; font-size: 14px; display: grid; gap: .5rem; justify-items: center; }
.s360-notif-vide i.fa-circle-check { font-size: 28px; color: #22A06B; }
.s360-notif-pied { display: block; text-align: center; padding: .75rem; font-size: 13.5px; font-weight: 700; color: #21147C; background: #FAFAFE; }
.s360-notif-pied:hover { background: #F1EFFC; }
.s360-moi { display: flex; align-items: center; gap: .6rem; padding: .3rem .7rem .3rem .3rem; border-radius: 14px; transition: background .15s; }
.s360-moi:hover { background: #F6F4FF; }
.s360-avatar { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; font-size: 13px; color: #fff;
    background: linear-gradient(135deg, #5240E0, #21147C); box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(244, 90, 42, .5); }
.s360-moi-texte { display: flex; flex-direction: column; line-height: 1.2; }
.s360-moi-texte strong { font-size: 14px; color: #120842; }
.s360-moi-texte small { font-size: 12px; color: #6B6890; }
@media (max-width: 760px) { .s360-moi-texte, .s360-topbar-gauche span { display: none; } }

/* =============================================================================
 * MODE ÉPURÉ (oct. 2026) — moins d'effets, plus d'air, couleurs plus calmes.
 * Ce bloc, placé en dernier, l'emporte sur les « effets » ci-dessus.
 * ========================================================================== */
body { line-height: 1.6; }
body.bg-slate-100, body.bg-slate-50, body.bg-gray-100, body.bg-gray-50 { background: #F4F5F9 !important; background-image: none !important; }

/* Plus d'apparition en cascade ni d'éléments qui flottent ou tournent */
main > *:not(.fixed):not(script):not(template), .s360-cascade > * { animation: none !important; }
.s360-flotte, .bandeau-bulle { animation: none !important; }

/* Cartes : ombre légère, pas de soulèvement au survol */
main .bg-white.rounded-2xl { box-shadow: 0 1px 2px rgba(24, 10, 86, .05) !important; }
main a.bg-white.rounded-2xl:hover, .s360-carte-lien:hover, .tuile:hover, .pil-tuile:hover, .fc-tuile:hover, .org-carte:hover, .pil-case:hover { transform: none !important; }
.tuile:hover, .pil-tuile:hover, .fc-tuile:hover, .org-carte:hover { box-shadow: 0 6px 18px -12px rgba(24, 10, 86, .35) !important; }

/* Boutons orange : couleur unie, sans reflet ni halo */
button[style*="background:var(--orange)"], a[style*="background:var(--orange)"],
button[style*="background:#FF7A29"], button[style*="background:#F45A2A"], a[style*="background:#F45A2A"],
.btn-pri, .s360-btn { background-image: none !important; box-shadow: none !important; }
button[style*="background:var(--orange)"]::after, a[style*="background:var(--orange)"]::after,
button[style*="background:#FF7A29"]::after, button[style*="background:#F45A2A"]::after, a[style*="background:#F45A2A"]::after,
.btn-pri::after, .s360-btn::after { display: none !important; }
button[style*="background:var(--orange)"]:hover:not(:disabled), a[style*="background:var(--orange)"]:hover,
.btn-pri:hover:not(:disabled), .s360-btn:hover:not(:disabled) { transform: none !important; filter: brightness(.95); box-shadow: none !important; }

/* Menu latéral : élément actif simple, pas de glissement */
aside.navbg { box-shadow: none; }
aside.navbg nav a:hover, aside.navbg nav button:hover { transform: none; }
aside.navbg nav a[style*="border-left:3px solid"] { background: rgba(255, 255, 255, .08) !important; box-shadow: none !important; }
aside.navbg nav a, aside.navbg nav button { padding-top: .6rem; padding-bottom: .6rem; }


/* Pastilles et badges : moins appuyés */
.rounded-full.px-2, .rounded-full.px-2\.5 { font-weight: 600; }

/* Tableaux qui occupent toute la hauteur disponible : l'en-tête reste visible pendant le défilement */
.tableau-fige thead th { position: sticky; top: 0; z-index: 2; background: #F6F7FB; box-shadow: inset 0 -1px 0 #E6E4F3; }

/* Barre du haut plus fine : plus de place pour le contenu */
.s360-topbar { padding: .3rem .6rem .3rem 1rem; margin-bottom: .75rem; border-radius: 14px; box-shadow: none; background: #fff; }
.s360-topbar.s360-topbar-marge { margin: .6rem 1.5rem .1rem; }
@media (min-width: 1024px) { .s360-topbar.s360-topbar-marge { margin: .6rem 2rem .1rem; } }
.s360-cloche { width: 36px; height: 36px; font-size: 15px; }
.s360-cloche.s360-sonne i { animation: none; }

/* =============================================================================
 * AÉRATION (demande Scaffomed, oct. 2026) — même menu, mêmes couleurs ;
 * fond clair et plus d'espace autour des blocs, des lignes et des champs.
 * Placé en dernier : l'emporte sur les blocs précédents.
 * ========================================================================== */
:root { --s360-fond: #F7F8FB; --s360-bord: #E9EBF2; }
body.bg-slate-100, body.bg-slate-50, body.bg-gray-100, body.bg-gray-50 { background: var(--s360-fond) !important; }

/* Marges de page : en-tête et contenu respirent */
main > header { padding-top: 1.75rem !important; padding-bottom: 1.25rem !important; }
@media (min-width: 1024px) {
    main > header, main > div[class*="lg:px-8"], main > div[class*="lg:px-10"] { padding-left: 2.5rem !important; padding-right: 2.5rem !important; }
    main[class*="lg:p-8"] { padding: 2rem 2.5rem !important; }
    main[class*="lg:px-8"] { padding-left: 2.5rem !important; padding-right: 2.5rem !important; }
}
main > div[class*="pb-6"] { padding-bottom: 2rem !important; }
main[class*="space-y-5"] > * + *, main[class*="space-y-6"] > * + * { margin-top: 1.75rem !important; }
.s360-topbar.s360-topbar-marge { margin: .9rem 1.5rem .35rem; }
@media (min-width: 1024px) { .s360-topbar.s360-topbar-marge { margin: .9rem 2.5rem .35rem; } }

/* Blocs blancs : bord plus discret, coins un peu plus ronds, intérieur plus large */
main .bg-white.rounded-2xl, main .bg-white.rounded-xl { border-color: var(--s360-bord) !important; }
main .bg-white.rounded-2xl { border-radius: 18px; }
main section .p-5 { padding: 1.5rem !important; }
main section .p-4 { padding: 1.25rem !important; }
main section .p-3 { padding: 1rem !important; }
main .gap-3 { gap: .9rem; }
main .gap-4 { gap: 1.25rem; }
main .space-y-3 > * + * { margin-top: .9rem; }
main .space-y-4 > * + * { margin-top: 1.15rem; }

/* Listes (colonne de gauche) : lignes plus hautes */
main section button.w-full.text-left.border-b { padding: 1rem 1.25rem !important; }
main .border-b.border-slate-100, main .border-t.border-slate-100 { border-color: #F0F1F6 !important; }

/* Tableaux : lignes et en-têtes plus aérés */
main thead th { padding-top: .85rem !important; padding-bottom: .85rem !important; letter-spacing: .02em; }
main tbody td.py-2, main tbody td.py-2\.5, main tbody td.py-3 { padding-top: .8rem !important; padding-bottom: .8rem !important; }
main tbody td:not([class*="py-"]):not([colspan]) { padding-top: .7rem; padding-bottom: .7rem; }
main tbody tr:hover { background-color: #F8F7FE !important; }

/* Champs de saisie : plus confortables */
.champ { min-height: 42px; padding-top: .6rem !important; padding-bottom: .6rem !important; border-color: #E2E5EE !important; border-radius: .8rem !important; }
.champ.\!py-1\.5 { min-height: 38px; padding-top: .45rem !important; padding-bottom: .45rem !important; }
textarea.champ { min-height: 0; }
.lib { margin-bottom: .4rem !important; }

/* Fenêtres : un peu plus d'espace intérieur */
.s360-modale-corps { padding: 1.6rem 1.75rem; }
.s360-modale-entete, .s360-modale-pied { padding-left: 1.75rem; padding-right: 1.75rem; }

/* Menu latéral : mêmes couleurs, éléments un peu plus espacés */
aside.navbg nav a, aside.navbg nav button { padding-top: .65rem; padding-bottom: .65rem; }

/* =============================================================================
 * STYLE CLAIR (oct. 2026, inspiré de l'écran « Parc matériel » choisi par le client)
 * Police Inter, fond gris très clair, cartes blanches bien détachées (coins arrondis,
 * ombre douce), grands titres, en-têtes de tableaux sombres, champs larges avec
 * halo au focus, pastilles de statut arrondies. Menu : mêmes couleurs (indigo / orange).
 * Placé en dernier : l'emporte sur les blocs précédents.
 * ========================================================================== */
:root {
    --clair-fond: #F9FAFB;
    --clair-bord: #F0F1F5;
    --clair-texte: #111827;
    --clair-gris: #6B7280;
    --clair-ombre: 0 10px 15px -3px rgba(17, 24, 39, .06), 0 4px 6px -4px rgba(17, 24, 39, .05);
    --clair-ombre-haute: 0 20px 25px -5px rgba(17, 24, 39, .10), 0 8px 10px -6px rgba(17, 24, 39, .08);
    --clair-entete: #1E1757;          /* en-têtes de tableaux : indigo très sombre (couleur du menu) */
    --clair-focus: #5240E0;
}

/* Police unique de l'ERP : Inter (seul endroit où elle est réglée ; les icônes gardent leur police).
 * cv05 = « l » minuscule à queue, cv08 = « I » majuscule à empattements : plus de confusion l / I / 1. */
body, body * { font-family: 'Inter', system-ui, sans-serif; font-feature-settings: 'cv05', 'cv08'; }
.font-mono, code, kbd { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; font-feature-settings: normal; }
/* Chiffres alignés (même largeur) : colonnes de montants, quantités et indicateurs bien droites */
body table, body input, body select, body textarea, .tabular-nums, .tuile .val, .pil-val, .pil-case b, .mini-kpi b,
main .grid > div .text-2xl, main .grid > div .text-3xl { font-feature-settings: 'cv05', 'cv08', 'tnum'; }
body table *, .tuile .val *, .pil-val * { font-feature-settings: inherit; }
table .font-mono, table code { font-feature-settings: normal; }
body, body.bg-slate-100, body.bg-slate-50, body.bg-gray-100, body.bg-gray-50 { background: var(--clair-fond) !important; color: #1F2937; }

/* Titres de page : grands, foncés */
main h1 { color: var(--clair-texte) !important; font-weight: 700 !important; letter-spacing: -.02em; }
main h1.text-2xl, main > header h1, main h1.text-xl { font-size: 30px !important; line-height: 1.2 !important; }
main h2.font-bold, main h2.font-semibold { color: var(--clair-texte); }

/* Barre du haut : verre dépoli, discrète */
.s360-topbar { background: rgba(255, 255, 255, .75) !important; backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .6) !important;
               box-shadow: 0 1px 3px rgba(17, 24, 39, .05) !important; }

/* Cartes et panneaux blancs : coins 16 px, bord très clair, ombre douce */
main div.bg-white.rounded-2xl, main section.bg-white, main aside.bg-white, main article.bg-white,
main div.bg-white.rounded-xl.border, main form.bg-white, main .fc-carte, main .tuile, main .pil-tuile, main .fc-tuile {
    border-radius: 16px !important;
    border-color: var(--clair-bord) !important;
    box-shadow: var(--clair-ombre) !important;
}
/* Tuiles d'indicateurs (grilles de cartes) : soulèvement au survol */
main .grid > div.bg-white.rounded-2xl, main .grid > a.bg-white, main .grid > div.bg-white.rounded-xl.border,
main .tuile, main .pil-tuile, main .fc-tuile {
    transition: transform .25s cubic-bezier(.4, 0, .2, 1), box-shadow .25s !important;
}
main .grid > div.bg-white.rounded-2xl:hover, main .grid > a.bg-white:hover, main .grid > div.bg-white.rounded-xl.border:hover,
main .tuile:hover, main .pil-tuile:hover, main .fc-tuile:hover {
    transform: translateY(-4px) !important; box-shadow: var(--clair-ombre-haute) !important;
}
/* Gros chiffres des indicateurs */
main .grid > div .text-2xl.font-bold, main .grid > div .text-2xl.font-extrabold, main .grid > div .text-3xl { color: var(--clair-texte); }

/* Tableaux : en-tête sombre, texte blanc ; lignes aérées avec survol en dégradé */
main table thead tr { background: linear-gradient(90deg, var(--clair-entete) 0%, #2C2478 100%) !important; }
main table thead th {
    background-color: transparent !important; color: #fff !important; font-weight: 600 !important;
    text-transform: none !important; letter-spacing: 0 !important; font-size: 13.5px !important;
    padding: 1rem 1rem !important; border: 0 !important; box-shadow: none !important;
}
main table thead th * { color: inherit !important; }
main table thead th i { opacity: .85; }
.tableau-fige thead th, main table thead th.sticky, main table thead.sticky th { background-color: var(--clair-entete) !important; }
main table thead.sticky, main table thead tr.sticky { background: var(--clair-entete) !important; }
main table thead th:first-child { padding-left: 1.25rem !important; }
main tbody tr { border-color: #F3F4F6 !important; transition: background .2s ease; }
main tbody td { padding-top: .9rem !important; padding-bottom: .9rem !important; }
main tbody td:first-child { padding-left: 1.25rem !important; }
main tbody tr:hover { background: linear-gradient(90deg, rgba(244, 90, 42, .05) 0%, rgba(82, 64, 224, .05) 100%) !important; }
main table { border-collapse: separate; border-spacing: 0; }
main table tbody tr td { border-bottom: 1px solid #F3F4F6; }

/* Champs : bord 2 px, coins 12 px, halo violet au focus (la marge gauche des champs avec icône est conservée) */
main input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
main select, main textarea, .champ, .s360-modale input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.s360-modale select, .s360-modale textarea {
    border: 2px solid #E5E7EB !important; border-radius: 12px !important; background-color: #fff;
    transition: border-color .2s, box-shadow .2s !important;
}
main input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):focus,
main select:focus, main textarea:focus, .champ:focus,
.s360-modale input:focus, .s360-modale select:focus, .s360-modale textarea:focus {
    border-color: var(--clair-focus) !important; box-shadow: 0 0 0 3px rgba(82, 64, 224, .15) !important; outline: none !important;
}
.champ { min-height: 46px; padding-top: .7rem !important; padding-bottom: .7rem !important; }
.champ.\!py-1\.5, td .champ, td input, td select { min-height: 0; }
textarea.champ { min-height: 0; }

/* Barres de recherche et de filtres (bloc blanc en haut des listes) : plus d'espace */
main .bg-white.rounded-2xl > .p-3, main .bg-white.rounded-2xl.p-3 { padding: 1.1rem 1.25rem !important; }

/* Boutons principaux orange : dégradé, ombre, léger soulèvement au survol */
button[style*="background:var(--orange)"], a[style*="background:var(--orange)"],
button[style*="background:#F45A2A"], a[style*="background:#F45A2A"], .btn-pri, .s360-btn {
    background-image: linear-gradient(90deg, #F45A2A 0%, #E2461C 100%) !important;
    border-radius: 12px !important; box-shadow: 0 10px 15px -3px rgba(244, 90, 42, .30), 0 4px 6px -4px rgba(244, 90, 42, .25) !important;
    transition: transform .2s, box-shadow .2s, filter .2s !important;
}
button[style*="background:var(--orange)"]:hover:not(:disabled), a[style*="background:var(--orange)"]:hover,
button[style*="background:#F45A2A"]:hover:not(:disabled), a[style*="background:#F45A2A"]:hover,
.btn-pri:hover:not(:disabled), .s360-btn:hover:not(:disabled) {
    transform: translateY(-1px) !important; filter: brightness(1.04);
    box-shadow: 0 14px 20px -6px rgba(244, 90, 42, .40), 0 6px 8px -6px rgba(244, 90, 42, .3) !important;
}
/* Boutons indigo (style="background:var(--s360-indigo)" ou classes indigo) : même traitement */
a[style*="background:var(--s360-indigo)"], button[style*="background:var(--s360-indigo)"], button[style*="background:var(--indigo)"] {
    background-image: linear-gradient(90deg, #21147C 0%, #180A56 100%) !important; border-radius: 12px !important;
    box-shadow: 0 10px 15px -3px rgba(33, 20, 124, .25) !important;
}
/* Boutons secondaires blancs : coins 12 px */
main button.bg-white.border, main a.bg-white.border:not(.rounded-2xl) { border-radius: 12px !important; border-color: #E5E7EB !important; }
main button.bg-white.border:hover:not(:disabled), main a.bg-white.border:not(.rounded-2xl):hover { background: #F9FAFB !important; }

/* Pastilles de statut : arrondies, aérées, texte en gras */
main span.rounded-full.px-2, main span.rounded-full.px-2\.5, main span.rounded-full.px-3 {
    padding: .25rem .75rem !important; font-weight: 600 !important; font-size: 12.5px !important;
    display: inline-flex; align-items: center; gap: .375rem;
}

/* Liste de gauche (listes clients, projets, articles…) : ligne sélectionnée bien visible */
main section button.w-full.text-left.border-b { transition: background .2s; }

/* Fenêtres pop-up : coins plus ronds, ombre marquée */
.s360-modale { border-radius: 20px !important; box-shadow: 0 25px 50px -12px rgba(17, 24, 39, .3) !important; }

/* Barres de défilement fines et neutres */
* { scrollbar-color: #CBD5E1 transparent; }
*::-webkit-scrollbar-thumb { background: #CBD5E1; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: #94A3B8; background-clip: padding-box; }

/* Apparition douce des blocs à l'ouverture de la page */
@keyframes clair-glisse { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
main > *:not(.fixed):not(script):not(template):not(.s360-topbar) { animation: clair-glisse .35s ease-out backwards !important; }
@media (prefers-reduced-motion: reduce) { main > * { animation: none !important; } }

/* =============================================================================
 * PAGE BLANCHE (oct. 2026) — fond blanc, en-têtes de tableaux clairs mais marqués,
 * bandeaux et tuiles indigo « inversés » (fond blanc, texte indigo, accent orange).
 * Le menu de gauche garde son indigo. Placé en dernier : l'emporte sur tout le reste.
 * ========================================================================== */
:root { --blanc-bord: #E9E7F5; --blanc-texte: #180A56; --blanc-gris: #6B6890; }
body, body.bg-slate-100, body.bg-slate-50, body.bg-gray-100, body.bg-gray-50 { background: #fff !important; }
.s360-topbar { background: #fff !important; border: 1px solid var(--blanc-bord) !important; backdrop-filter: none; }

/* Cartes : sur fond blanc, c'est le bord qui les détache (ombre plus légère) */
main div.bg-white.rounded-2xl, main section.bg-white, main aside.bg-white, main article.bg-white,
main div.bg-white.rounded-xl.border, main form.bg-white, main .fc-carte, main .tuile, main .pil-tuile, main .fc-tuile, main .carte {
    border: 1px solid var(--blanc-bord) !important;
    box-shadow: 0 1px 2px rgba(24, 10, 86, .04), 0 6px 16px -10px rgba(24, 10, 86, .12) !important;
}

/* En-têtes de tableaux : bande lavande claire, texte indigo en gras, trait orange discret en bas */
main table thead tr, main table thead.sticky, main table thead tr.sticky { background: #F3F1FC !important; }
main table thead th, .tableau-fige thead th, main table thead th.sticky, main table thead.sticky th {
    background-color: #F3F1FC !important; color: var(--blanc-texte) !important; font-weight: 700 !important;
    box-shadow: inset 0 -2px 0 #E2DEF7 !important;
}
main table thead th * { color: inherit !important; }
main table thead th i { color: #F45A2A !important; opacity: 1; }
main tbody tr:hover { background: #FAF9FE !important; }

/* ---- Bandeaux et tuiles indigo : couleurs inversées ---- */
.bandeau, .pil-tuile.hero, .t-hero, .org-carte.mere, .fc-tuile.nuit, .endo-entete, .s360-inverse {
    background: radial-gradient(420px 180px at 100% 0%, rgba(244, 90, 42, .07), transparent 70%), #fff !important;
    color: var(--blanc-texte) !important;
    border: 1px solid var(--blanc-bord) !important;
    box-shadow: inset 4px 0 0 #F45A2A, 0 1px 2px rgba(24, 10, 86, .04), 0 6px 16px -10px rgba(24, 10, 86, .12) !important;
}
:is(.bandeau, .pil-tuile.hero, .t-hero, .org-carte.mere, .fc-tuile.nuit, .endo-entete, .s360-inverse)
    :is(h1, h2, h3, b, strong, .text-white, .pil-val, .val, .fc-val, .text-lg, .text-xl, .text-2xl) { color: var(--blanc-texte) !important; }
:is(.bandeau, .pil-tuile.hero, .t-hero, .org-carte.mere, .fc-tuile.nuit, .endo-entete, .s360-inverse)
    :is(p, small, .pil-lib, .pil-sous, .t-lib, .sous, .fc-lib, .fc-sous, .opacity-75, [style*="#C9C4EA"], [style*="#D6D1F7"], [style*="#C9C3F2"], [style*="#C9C4EA"]) { color: var(--blanc-gris) !important; opacity: 1 !important; }
:is(.bandeau, .pil-tuile.hero, .t-hero, .org-carte.mere, .fc-tuile.nuit, .endo-entete, .s360-inverse)
    :is([style*="#FFB48A"], [style*="#FF8A3D"], .text-orange-200) { color: #E2461C !important; }
.endo-entete .text-emerald-200 { color: #047857 !important; } .endo-entete .text-amber-200 { color: #B45309 !important; } .endo-entete .text-red-200 { color: #B91C1C !important; }
.endo-entete .bg-emerald-400\/20 { background: #ECFDF5 !important; } .endo-entete .bg-amber-400\/20 { background: #FFFBEB !important; } .endo-entete .bg-red-400\/25 { background: #FEF2F2 !important; }

/* Bandeau d'accueil : boutons d'accès rapide et badge de profil sur fond blanc */
.bandeau .action-rapide { color: var(--blanc-texte) !important; background: #F5F4FC !important; border: 1px solid var(--blanc-bord) !important; backdrop-filter: none; }
.bandeau .action-rapide:hover { background: #FFF1EC !important; border-color: #FBD5C6 !important; }
.bandeau .action-rapide i { color: #F45A2A !important; }
.bandeau .badge-profil { color: #C2410C !important; background: #FFF1EC !important; border-color: #FBD5C6 !important; }
.bandeau-logo-fond { box-shadow: 0 10px 24px -12px rgba(24, 10, 86, .25), 0 0 0 6px #F5F4FC !important; }

/* Tuiles « héros » : pastille d'icône claire */
.t-hero .ico, .pil-tuile.hero .pil-ico { background: #FFF1EC !important; color: #F45A2A !important; }
.org-carte.mere .mini-kpi, .org-carte.mere .fil-ligne.sombre { background: #F7F6FD !important; color: var(--blanc-texte) !important; }
.org-carte.mere .mini-kpi span { color: var(--blanc-gris) !important; }
.org-carte.mere [class*="bg-white/15"] { background: #F3F1FC !important; color: var(--blanc-texte) !important; }
.org-carte.mere [class*="bg-white/15"]:hover { background: #FFF1EC !important; }

/* Indicateurs du parc (stock) : la puce « Stock physique » inversée */
.s360-inverse.rounded-xl { box-shadow: inset 3px 0 0 #F45A2A !important; border-radius: 12px !important; }

/* ---- Sélecteur entreprise / filiale dans la barre du haut ---- */
.s360-ctx { position: relative; min-width: 0; }
.s360-ctx-btn { display: flex; align-items: center; gap: .7rem; padding: .35rem .8rem .35rem .4rem; border-radius: 14px; border: 1px solid transparent;
                background: transparent; text-align: left; min-width: 0; max-width: 520px; transition: background .15s, border-color .15s; }
button.s360-ctx-btn { cursor: pointer; }
button.s360-ctx-btn:hover, button.s360-ctx-btn[aria-expanded="true"] { background: #F7F6FD; border-color: var(--blanc-bord, #E9E7F5); }
.s360-ctx-ico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0;
                background: #FFF1EC; color: #F45A2A; font-size: 15px; }
.s360-ctx-txt { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.s360-ctx-txt strong { font-size: 15px; font-weight: 700; color: #180A56; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s360-ctx-txt small { font-size: 12.5px; color: #6B6890; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s360-ctx-fleche { font-size: 11px; color: #8B87AE; margin-left: .2rem; transition: transform .2s; }
button.s360-ctx-btn[aria-expanded="true"] .s360-ctx-fleche { transform: rotate(180deg); }
.s360-ctx-menu { position: absolute; left: 0; top: calc(100% + 8px); z-index: 60; width: 340px; max-width: 90vw; background: #fff;
                 border: 1px solid var(--blanc-bord, #E9E7F5); border-radius: 16px; box-shadow: 0 20px 40px -12px rgba(24, 10, 86, .25); padding: .5rem; }
.s360-ctx-menu[hidden] { display: none; }
.s360-ctx-filtre { width: 100%; margin-bottom: .4rem; padding: .55rem .8rem !important; border: 2px solid #E5E7EB !important; border-radius: 10px !important; font-size: 14px; }
.s360-ctx-liste { max-height: 380px; overflow-y: auto; }
.s360-ctx-groupe + .s360-ctx-groupe { border-top: 1px solid #F1F0F8; margin-top: .3rem; padding-top: .3rem; }
.s360-ctx-groupe[hidden] { display: none; }
.s360-ctx-ent { display: flex; align-items: center; gap: .5rem; padding: .5rem .7rem .3rem; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #8B87AE; }
.s360-ctx-opt { width: 100%; display: flex; align-items: center; gap: .6rem; padding: .55rem .75rem; border-radius: 10px; font-size: 14px; color: #2E2A55; text-align: left; transition: background .12s; }
.s360-ctx-opt i:first-child { width: 16px; text-align: center; color: #A19DC4; font-size: 12px; }
.s360-ctx-opt:hover { background: #FFF5F1; }
.s360-ctx-opt.actif { background: #FFF1EC; color: #C2410C; font-weight: 600; }
.s360-ctx-opt.actif i:first-child { color: #F45A2A; }
.s360-ctx-opt.envoi { opacity: .5; pointer-events: none; }
.s360-ctx-coche { margin-left: auto; color: #F45A2A; }
.s360-ctx-erreur { margin: .4rem .5rem .2rem; font-size: 13px; color: #DC2626; }
.s360-ctx-erreur[hidden] { display: none; }

/* ---- Sélecteur entreprise / filiale dans le menu (fond indigo) ---- */
.sb-ctx { margin-top: .9rem; }
.sb-ctx .s360-ctx-btn { width: 100%; max-width: none; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); padding: .45rem .7rem .45rem .45rem; }
.sb-ctx button.s360-ctx-btn:hover, .sb-ctx button.s360-ctx-btn[aria-expanded="true"] { background: rgba(255, 255, 255, .11); border-color: rgba(244, 90, 42, .6); }
.sb-ctx .s360-ctx-ico { width: 34px; height: 34px; border-radius: 10px; background: rgba(244, 90, 42, .18); color: #FF8A3D; font-size: 14px; }
.sb-ctx .s360-ctx-txt strong { color: #fff; font-size: 14px; }
.sb-ctx .s360-ctx-txt small { color: #B3ADDB; font-size: 12px; }
.sb-ctx .s360-ctx-fleche { margin-left: auto; color: #B3ADDB; }
.sb-ctx .s360-ctx-menu { left: 0; right: 0; width: auto; max-width: none; }

/* ---- Barre du haut : fil d'Ariane ---- */
.s360-fil { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; min-width: 0; font-size: 14px; color: #6B6890; padding-left: .25rem; }
.s360-fil-lien, .s360-fil-txt { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .6rem; border-radius: 10px; white-space: nowrap; max-width: 260px; }
.s360-fil-lien span, .s360-fil-txt { overflow: hidden; text-overflow: ellipsis; }
.s360-fil-lien { color: #4B4870; transition: background .15s, color .15s; }
.s360-fil-lien:hover { background: #F5F4FC; color: #180A56; }
.s360-fil-lien i, .s360-fil-txt i { color: #F45A2A; font-size: 13px; }
.s360-fil .fort { color: #180A56; font-weight: 700; }
.s360-fil .courant { color: #180A56; font-weight: 600; background: #F5F4FC; }
.s360-fil-sep { font-size: 10px; color: #C4C0DD; }

/* ---- Barre du haut : icônes d'accès rapide (création) ---- */
.s360-rapide { display: flex; align-items: center; gap: .4rem; padding-right: .6rem; margin-right: .2rem; border-right: 1px solid #EEECF7; }
.s360-rapide-btn { position: relative; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: #21147C; background: #F5F4FC;
                   border: 1px solid #E9E7F5; font-size: 15px; transition: background .15s, color .15s, transform .15s, box-shadow .15s; }
.s360-rapide-btn:hover { background: #F45A2A; border-color: #F45A2A; color: #fff; transform: translateY(-1px); box-shadow: 0 8px 16px -8px rgba(244, 90, 42, .7); }
.s360-rapide-plus { position: absolute; right: -5px; bottom: -5px; width: 17px; height: 17px; border-radius: 999px; display: grid; place-items: center;
                    background: #F45A2A; color: #fff; font-size: 8.5px; border: 2px solid #fff; }
.s360-rapide-btn:hover .s360-rapide-plus { background: #21147C; }
.s360-rapide-bulle { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(-4px); white-space: nowrap; pointer-events: none;
                     background: #180A56; color: #fff; font-size: 12.5px; font-weight: 600; padding: .35rem .6rem; border-radius: 8px; opacity: 0; transition: opacity .15s, transform .15s; z-index: 70; }
.s360-rapide-btn:hover .s360-rapide-bulle, .s360-rapide-btn:focus-visible .s360-rapide-bulle { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (max-width: 900px) { .s360-rapide { display: none; } }

/* Barre du haut : sous les fenêtres pop-up (z-index 40/50) ; fil d'Ariane sur une seule ligne */
.s360-topbar { z-index: 35 !important; }
.s360-topbar-gauche, .s360-fil { flex: 1 1 auto; min-width: 0; }
.s360-fil { flex-wrap: nowrap; overflow: hidden; }
.s360-fil-lien, .s360-fil-txt { min-width: 0; flex-shrink: 1; max-width: 220px; }
.s360-fil > a:first-child { flex-shrink: 0; }
.s360-fil .courant { flex-shrink: 0; }
.s360-fil-txt { overflow: hidden; text-overflow: ellipsis; }
.s360-fil-sep { flex-shrink: 0; }
.s360-topbar-droite { flex-shrink: 0; }
.s360-moi-texte strong { white-space: nowrap; }
@media (max-width: 1280px) { .s360-fil-lien span { display: none; } .s360-fil > a:first-child span { display: inline; } }

/* Fil d'Ariane : entreprise / périmètre affichés après le chemin */
.s360-fil-ent { display: inline-flex; align-items: center; gap: .45rem; margin-left: .6rem; padding: .3rem .7rem; border-radius: 999px;
                background: #FFF5F1; border: 1px solid #FBDCCF; color: #180A56; font-size: 13px; white-space: nowrap; flex-shrink: 1; min-width: 0; overflow: hidden; }
.s360-fil-ent > i { color: #F45A2A; font-size: 12px; }
.s360-fil-ent strong { font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.s360-fil-ent-sous { display: inline-flex; align-items: center; gap: .35rem; color: #6B6890; padding-left: .45rem; border-left: 1px solid #FBDCCF; }
.s360-fil-ent-sous i { color: #A19DC4; font-size: 11px; }

/* =============================================================================
 * CARTES D'INDICATEURS COMPACTES (oct. 2026) — icône à gauche, chiffre à côté,
 * libellé et détail plus petits : moins de hauteur, police plus mesurée.
 * ========================================================================== */
main .tuile {
    display: grid !important; grid-template-columns: 46px minmax(0, 1fr); grid-template-areas: "ico lib" "ico val" "ico sous";
    column-gap: .95rem; row-gap: .1rem; align-items: center; padding: 1rem 1.1rem !important; border-radius: 16px !important;
}
main .tuile > .flex:first-child { display: contents; }
main .tuile .ico { grid-area: ico; width: 46px !important; height: 46px !important; border-radius: 13px !important; font-size: 17px !important; align-self: center; }
main .tuile .t-lib { grid-area: lib; font-size: 11.5px !important; letter-spacing: .05em; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
main .tuile .val { grid-area: val; font-size: 24px !important; margin-top: 0 !important; line-height: 1.2 !important; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
main .tuile .sous { grid-area: sous; font-size: 12.5px !important; margin-top: 0 !important; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Tuiles du Pilotage et de la fiche projet : même mesure */
main .pil-tuile { padding: 1rem 1.1rem !important; border-radius: 16px !important; }
main .pil-val { font-size: 24px !important; margin-top: .3rem !important; }
main .pil-tuile.hero .pil-val { font-size: 24px !important; }
main .pil-lib { font-size: 11.5px !important; }
main .pil-sous { font-size: 12.5px !important; }
main .fc-tuile { padding: 1rem 1.1rem .9rem !important; border-radius: 16px !important; }
main .fc-val { font-size: 24px !important; margin-top: .35rem !important; }
main .fc-lib { font-size: 11.5px !important; }
main .mini-kpi b { font-size: 16px !important; }

/* Fil d'Ariane : les libellés restent visibles ; c'est la pastille entreprise qui se raccourcit */
@media (max-width: 1280px) { .s360-fil-lien span { display: inline !important; } }
@media (max-width: 1100px) { .s360-rapide { display: none; } .s360-fil-ent-sous { display: none; } }
main .tuile .t-lib, main .tuile .sous { white-space: normal !important; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

/* =============================================================================
 * BARRE DU HAUT : BLANC + DÉGRADÉ ORANGE (comme la 1re carte) — trait orange à gauche, texte indigo
 * ========================================================================== */
.s360-topbar { background: linear-gradient(100deg, rgba(244, 90, 42, .13) 0%, rgba(255, 138, 61, .06) 38%, #fff 75%), #fff !important;
               border: 1px solid #ECE9F5 !important;
               box-shadow: inset 4px 0 0 #F45A2A, 0 1px 2px rgba(24, 10, 86, .04), 0 6px 16px -10px rgba(24, 10, 86, .12) !important; }
.s360-fil { color: #180A56; }
.s360-fil-lien, .s360-fil-txt { color: #3B3270 !important; }
.s360-fil-lien:hover { background: rgba(244, 90, 42, .1) !important; color: #E2461C !important; }
.s360-fil-lien i, .s360-fil-txt i { color: #F45A2A !important; }
.s360-fil .fort { color: #180A56 !important; font-weight: 700; }
.s360-fil .courant { color: #180A56 !important; background: rgba(244, 90, 42, .1) !important; font-weight: 700; }
.s360-fil-sep { color: #F45A2A !important; font-size: 11px !important; margin: 0 .1rem; }
.s360-fil-ent { margin-left: 0 !important; background: #fff !important; border: 1px solid rgba(244, 90, 42, .35) !important; color: #180A56 !important; }
.s360-fil-ent > i { color: #F45A2A !important; }
.s360-fil-ent strong { color: #180A56 !important; }
.s360-fil-ent-sous { color: #5B5384 !important; border-left-color: rgba(244, 90, 42, .3) !important; }
.s360-fil-ent-sous i { color: #F45A2A !important; }
.s360-rapide { border-right-color: #ECE9F5 !important; }
.s360-rapide-btn { background: #fff !important; border-color: #E6E2F3 !important; color: #180A56 !important; }
.s360-rapide-btn:hover { background: #F45A2A !important; border-color: #F45A2A !important; color: #fff !important; box-shadow: 0 8px 16px -8px rgba(244, 90, 42, .5) !important; }
.s360-rapide-plus { background: #F45A2A !important; border-color: #fff !important; }
.s360-cloche { background: #fff !important; border-color: #E6E2F3 !important; color: #180A56 !important; }
.s360-cloche:hover { background: #FFF1EC !important; color: #E2461C !important; }
.s360-pastille { background: #F45A2A !important; border-color: #fff !important; }
.s360-moi:hover { background: rgba(244, 90, 42, .08) !important; }
.s360-moi-texte strong { color: #180A56 !important; }
.s360-moi-texte small { color: #6B6490 !important; }
.s360-avatar { box-shadow: 0 0 0 2px rgba(244, 90, 42, .35) !important; }
.s360-notif-panneau { color: #120842; }

/* Sélecteur de vue (tableau de bord) dans la barre du haut */
.s360-vue { position: relative; display: inline-flex; align-items: center; margin-right: .6rem; }
.s360-vue > i:first-child { position: absolute; left: .75rem; color: #F45A2A; font-size: 13px; pointer-events: none; }
.s360-vue select { appearance: none; -webkit-appearance: none; height: 38px; padding: 0 2.1rem 0 2.1rem; border-radius: 11px;
    background: #fff; border: 1px solid rgba(244, 90, 42, .35); color: #180A56; font-size: 13.5px; font-weight: 700; cursor: pointer;
    box-shadow: 0 1px 2px rgba(24, 10, 86, .05); max-width: 230px; }
.s360-vue select:hover { border-color: #F45A2A; }
.s360-vue select:focus { outline: none; border-color: #F45A2A; box-shadow: 0 0 0 3px rgba(244, 90, 42, .18); }
.s360-vue-fleche { position: absolute; right: .8rem; color: #F45A2A; font-size: 10px; pointer-events: none; }
@media (max-width: 760px) { .s360-vue > i:first-child { display: none; } .s360-vue select { padding-left: .8rem; max-width: 150px; } }

/* Fond de page gris clair (les cartes et tableaux restent blancs) */
body, body.bg-slate-100, body.bg-slate-50, body.bg-gray-100, body.bg-gray-50 { background: #F3F4F8 !important; }

/* Barre du haut : compteur à côté du titre, boutons de la page */
.s360-compteur { flex-shrink: 0; display: inline-flex; align-items: center; gap: .45rem; margin-left: .25rem; padding: .3rem .8rem; border-radius: 999px;
                 background: #ECFDF5; border: 1px solid #A7F3D0; color: #047857; font-size: 13.5px; font-weight: 700; white-space: nowrap; font-feature-settings: 'tnum'; }
.s360-compteur::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #10B981; box-shadow: 0 0 0 3px rgba(16, 185, 129, .2); }
.s360-boutons-page { display: flex; align-items: center; gap: .5rem; padding-right: .7rem; margin-right: .1rem; border-right: 1px solid #ECE9F5; }
/* Icônes Excel du bandeau (Exporter / Importer) : vert Excel, flèche sortante ou entrante en pastille */
.s360-rapide-btn.s360-excel { color: #107C41 !important; font-size: 17px; }
.s360-rapide-btn.s360-excel .s360-rapide-plus { background: #107C41 !important; }
.s360-rapide-btn.s360-excel:hover { background: #107C41 !important; border-color: #107C41 !important; color: #fff !important; box-shadow: 0 8px 16px -8px rgba(16, 124, 65, .7) !important; }
.s360-rapide-btn.s360-excel:hover .s360-rapide-plus { background: #F45A2A !important; }
/* Indicateurs cliquables à côté du titre (page Projets : actifs, en retard, fin sous 30 jours) */
.s360-indics { display: inline-flex; align-items: center; gap: .4rem; flex-shrink: 0; }
.s360-indics .s360-compteur { cursor: pointer; transition: box-shadow .15s; }
.s360-indic { flex-shrink: 0; display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .75rem; border-radius: 999px; white-space: nowrap; cursor: pointer;
              background: #fff; border: 1px solid #E6E2F3; color: #4B4870; font-size: 13px; font-weight: 600; font-feature-settings: 'tnum'; transition: background .15s, border-color .15s; }
.s360-indic i { color: #8C89AB !important; font-size: 11px; }
.s360-indic:hover { background: #F5F4FC; }
.s360-indic-retard.alerte { background: #FEF2F2; border-color: #FECACA; color: #B91C1C; }
.s360-indic-retard.alerte i { color: #DC2626 !important; }
/* Filtre sélectionné : pastille pleine dans sa couleur (pas de contour) */
.s360-indics .s360-compteur.actif { background: #059669; border-color: #059669; color: #fff; }
.s360-indics .s360-compteur.actif::before { background: #fff; box-shadow: none; }
.s360-indic.actif { background: #21147C; border-color: #21147C; color: #fff; }
.s360-indic.actif i { color: #fff !important; }
.s360-indic-retard.alerte.actif { background: #DC2626; border-color: #DC2626; color: #fff; }
.s360-indic-retard.alerte.actif i { color: #fff !important; }
@media (max-width: 1100px) { .s360-indic { display: none; } }

/* ---- Formulaires par étapes (création client / projet), pleine largeur ---- */
.s360-etapes { display: flex; align-items: center; gap: .5rem; margin: 0; padding: 0; list-style: none; flex-wrap: wrap; }
.s360-etapes li { display: flex; align-items: center; gap: .5rem; }
.s360-etapes li + li::before { content: ''; width: 2.5rem; height: 2px; border-radius: 2px; background: #E6E4F3; }
.s360-etapes li.fait + li::before, .s360-etapes li.actif::before { background: #F45A2A; }
.s360-etape { display: inline-flex; align-items: center; gap: .55rem; padding: .35rem .8rem .35rem .4rem; border-radius: 999px; font-size: 14px; font-weight: 600; color: #6B6890; background: transparent; transition: background .15s, color .15s; }
.s360-etape:not(:disabled):hover { background: #F5F4FC; color: #180A56; }
.s360-etape:disabled { cursor: default; }
.s360-etape-num { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; background: #F1F0F8; color: #6B6890; border: 1px solid #E6E4F3; font-feature-settings: 'tnum'; }
.s360-etapes li.actif .s360-etape { color: #180A56; background: #FFF1EC; }
.s360-etapes li.actif .s360-etape-num { background: #F45A2A; border-color: #F45A2A; color: #fff; box-shadow: 0 4px 10px -4px rgba(244, 90, 42, .7); }
.s360-etapes li.fait .s360-etape { color: #180A56; }
.s360-etapes li.fait .s360-etape-num { background: #21147C; border-color: #21147C; color: #fff; font-size: 11px; }
@media (max-width: 760px) { .s360-etape-lib { display: none; } .s360-etapes li.actif .s360-etape-lib { display: inline; } .s360-etapes li + li::before { width: 1rem; } }
.s360-etape-titre { font-size: 17px; font-weight: 700; color: #180A56; margin: 0 0 .2rem; }
.s360-etape-aide { font-size: 13.5px; color: #6B6890; margin: 0 0 1.1rem; }
/* Champs en grille qui s'étale sur toute la largeur disponible */
.s360-champs { display: grid; gap: 1rem 1.25rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); align-items: start; }
.s360-champs .s360-large { grid-column: 1 / -1; }
.s360-champs .s360-double { grid-column: span 2; }
@media (max-width: 640px) { .s360-champs .s360-double { grid-column: 1 / -1; } }
/* Deux zones côte à côte (ex. saisie + remplissage depuis un document) */
.s360-deux-zones { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
.s360-deux-zones.seule { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1100px) { .s360-deux-zones { grid-template-columns: minmax(0, 1fr); } }

/* =============================================================================
 * EFFET VERRE (oct. 2026) — fond en dégradé doux (indigo / orange / bleu ciel) et
 * panneaux translucides à reflet blanc. Pas de flou sur les cartes : derrière elles il n'y a
 * que le fond (le flou n'apporterait rien) et backdrop-filter casserait les éléments
 * « position: fixed » placés dedans. Le flou reste sur la barre du haut et les fenêtres.
 * Placé en dernier : l'emporte sur « PAGE BLANCHE ».
 * ========================================================================== */
:root { --verre-fond: rgba(255, 255, 255, .64); --verre-bord: rgba(255, 255, 255, .75); --verre-trait: rgba(24, 10, 86, .07); }
body, body.bg-slate-100, body.bg-slate-50, body.bg-gray-100, body.bg-gray-50 {
    background:
        radial-gradient(1000px 640px at 6% -8%, rgba(82, 64, 224, .20), transparent 62%),
        radial-gradient(860px 600px at 102% 6%, rgba(244, 90, 42, .16), transparent 60%),
        radial-gradient(1000px 720px at 58% 112%, rgba(22, 163, 221, .15), transparent 62%),
        #EEF0F8 !important;
    background-attachment: fixed !important;
}

/* Cartes, panneaux, tuiles : verre translucide, reflet blanc en haut, ombre douce */
main div.bg-white.rounded-2xl, main section.bg-white, main aside.bg-white, main article.bg-white,
main div.bg-white.rounded-xl.border, main form.bg-white, main .fc-carte, main .tuile, main .pil-tuile, main .fc-tuile, main .carte {
    background-color: var(--verre-fond) !important;
    border: 1px solid var(--verre-bord) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 0 0 1px var(--verre-trait), 0 12px 32px -16px rgba(24, 10, 86, .28) !important;
}
/* Bandeaux « inversés » : même verre, l'accent orange à gauche est conservé */
.bandeau, .pil-tuile.hero, .t-hero, .org-carte.mere, .fc-tuile.nuit, .endo-entete, .s360-inverse {
    background: radial-gradient(420px 180px at 100% 0%, rgba(244, 90, 42, .08), transparent 70%), var(--verre-fond) !important;
    border: 1px solid var(--verre-bord) !important;
    box-shadow: inset 4px 0 0 #F45A2A, inset 0 1px 0 rgba(255, 255, 255, .9), 0 0 0 1px var(--verre-trait), 0 12px 32px -16px rgba(24, 10, 86, .28) !important;
}

/* Barre du haut : verre dépoli (elle passe au-dessus du contenu) */
.s360-topbar {
    background: rgba(255, 255, 255, .58) !important; border: 1px solid var(--verre-bord) !important;
    -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 0 0 1px var(--verre-trait), 0 10px 28px -18px rgba(24, 10, 86, .35) !important;
}
.s360-rapide-btn, .s360-indic { background: rgba(255, 255, 255, .7) !important; }

/* Tableaux : en-tête lavande presque opaque (les lignes défilent dessous), survol léger */
main table thead tr, main table thead.sticky, main table thead tr.sticky,
main table thead th, .tableau-fige thead th, main table thead th.sticky, main table thead.sticky th { background-color: rgba(243, 241, 252, .96) !important; }
main tbody tr:hover { background: rgba(255, 255, 255, .55) !important; }

/* Champs de saisie : blanc légèrement translucide */
main .champ, main input.champ, main select.champ, main textarea.champ { background-color: rgba(255, 255, 255, .82); }
main .champ:focus { background-color: #fff; }

/* Fenêtres pop-up : verre dépoli */
.s360-modale { background: rgba(255, 255, 255, .86) !important; -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%); }

/* Si l'utilisateur a demandé moins de transparence : panneaux opaques */
@media (prefers-reduced-transparency: reduce) {
    main div.bg-white.rounded-2xl, main section.bg-white, main aside.bg-white, main article.bg-white, main div.bg-white.rounded-xl.border,
    main form.bg-white, main .fc-carte, main .tuile, main .pil-tuile, main .fc-tuile, main .carte, .s360-topbar, .s360-modale { background-color: #fff !important; backdrop-filter: none; }
}

/* Utilitaires Tailwind absents de la version allégée (assets/vendor/tailwind) mais utilisés par les pages */
.mr-auto { margin-right: auto; }
.border-sky-200 { border-color: #BAE6FD; }
@media (min-width: 1024px) { table.lg\:table, .hidden.lg\:table { display: table; } }   /* sélecteur renforcé : tailwind.min.css (.hidden) est chargé après */

/* Fiche projet (page Projets) : trois colonnes sur toute la largeur, tout visible sans défiler */
.fiche-grille { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 1280px) { .fiche-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .fiche-grille > :last-child { grid-column: 1 / -1; } }
@media (max-width: 800px) { .fiche-grille { grid-template-columns: minmax(0, 1fr); } }
.ligne-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.space-y-3 > * + * { margin-top: .75rem; }
.gap-y-2\.5 { row-gap: .625rem; }
/* Fiches client / projet : encadrés bordés d'orange (couleur de la marque) */
.fiche-grille .border-slate-200 { border-color: rgba(244, 90, 42, .55) !important; }   /* l'encadré d'écart de budget garde sa couleur (rouge / ambre / vert) */
.fiche-grille .rounded-xl.bg-slate-50, .fiche-grille .rounded-xl.bg-sky-50, .fiche-grille .rounded-xl.bg-red-50 { border: 1px solid rgba(244, 90, 42, .55); }

/* Page Demandes : indicateurs par étape en tuiles cliquables au-dessus du tableau */
.kpi-demandes { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.kpi-demande { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; padding: .55rem .8rem; border-radius: 12px; text-align: left;
               background: rgba(248, 250, 252, .85); border: 1px solid rgba(244, 90, 42, .35); transition: background .15s, border-color .15s, transform .15s; }
.kpi-demande:hover { background: #FFF7F3; transform: translateY(-1px); }
.kpi-demande-lib { font-size: 12px; font-weight: 600; color: #6B6890; }
.kpi-demande-val { font-size: 20px; font-weight: 800; color: #180A56; line-height: 1.15; font-feature-settings: 'tnum'; }
.kpi-demande.actif { background: #F45A2A; border-color: #F45A2A; }
.kpi-demande.actif .kpi-demande-lib { color: rgba(255, 255, 255, .85); }
.kpi-demande.actif .kpi-demande-val { color: #fff; }

/* Listes déroulantes (résultats de recherche, menus) : toujours opaques, même avec l'effet verre sur les cartes —
 * sinon le contenu situé dessous transparaît (sélecteurs plus précis que ceux de l'effet verre) */
main div.absolute.bg-white.rounded-xl.border, main div.absolute.bg-white.rounded-xl, main div.absolute.bg-white.rounded-2xl, main div.absolute.bg-white {
    background-color: #fff !important; box-shadow: 0 18px 40px -16px rgba(24, 10, 86, .35), 0 0 0 1px rgba(24, 10, 86, .06) !important;
}

/* Assistant de demande, étape « Besoin » : deux colonnes (besoin | matériel et plans) pour tout voir sur une page */
.besoin-grille { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 1100px) { .besoin-grille { grid-template-columns: minmax(0, 1fr); } }
.besoin-grille .choix.prestation { padding: .75rem .9rem; }
.besoin-grille .presta-ico { width: 34px; height: 34px; font-size: 15px; }
.space-y-4 > * + * { margin-top: 1rem; }
.besoin-grille .besoin-prestation { grid-column: 1 / -1; }   /* type de prestation : en haut, sur toute la largeur */

/* Pastilles du bandeau sélectionnées : fond plein forcé (l'effet verre impose un fond blanc translucide en !important
 * à .s360-indic ; sans ce correctif le texte blanc de la pastille active devenait invisible) */
.s360-indics .s360-indic.actif { background: #21147C !important; border-color: #21147C !important; color: #fff !important; }
.s360-indics .s360-indic-retard.alerte.actif { background: #DC2626 !important; border-color: #DC2626 !important; }
.s360-indics .s360-compteur.actif { background: #059669 !important; border-color: #059669 !important; color: #fff !important; }
.s360-indics .actif i, .s360-indics .actif span { color: #fff !important; }
/* Icône du bandeau dont le panneau est ouvert (ex. Documents : Générer un PV, Déposer) */
.s360-rapide-btn.s360-rapide-actif { background: #F45A2A !important; border-color: #F45A2A !important; color: #fff !important; }
.s360-rapide-btn.s360-rapide-actif .s360-rapide-plus { background: #21147C !important; }

/* Tableaux : jamais de défilement horizontal. On retire les largeurs minimales forcées (ex. min-w-[1100px])
 * et le texte des cellules peut passer à la ligne au lieu d'élargir le tableau (les pastilles et badges restent sur une ligne). */
main table { width: 100%; min-width: 0 !important; }
main table td, main table th, main table td.whitespace-nowrap, main table th.whitespace-nowrap { white-space: normal; overflow-wrap: break-word; }
/* Texte « tronqué » (truncate) : dans un tableau, max-width ne limite pas la colonne et la ligne unique élargissait
 * tout le tableau au-delà de sa carte. On le laisse passer à la ligne. */
main table td.truncate { white-space: normal; text-overflow: clip; }

/* Tableaux plus compacts : 15 lignes tiennent dans la hauteur de l'écran, sans défilement
 * (remplace les espacements de 0,9 rem / 1 rem imposés plus haut ; sélecteurs plus précis, donc prioritaires) */
main table tbody tr td, main table tbody tr td[class] { padding-top: .5rem !important; padding-bottom: .5rem !important; }   /* [class] : passe devant « td.py-2.5 » */
main table thead tr th, main table thead tr th[class] { padding-top: .65rem !important; padding-bottom: .65rem !important; }

/* Défilement : c'est la PAGE qui défile, jamais le tableau. Les pages qui bloquaient leur hauteur à l'écran (h-screen)
 * reprennent leur hauteur naturelle et les zones de liste / fiche / formulaire ne défilent plus en interne.
 * (Les listes déroulantes — résultats de recherche, menus — gardent leur défilement : elles n'ont pas « flex-1 ».) */
main.h-screen { height: auto !important; min-height: 100vh; }
main div.flex-1.overflow-auto, main div.flex-1.overflow-y-auto, main .tableau-fige { overflow: visible !important; }
main .flex-1.min-h-0 { min-height: auto; }
/* Icône du bandeau dont l'écran n'existe pas encore (« à venir ») : grisée, sans effet au survol hormis la bulle */
.s360-rapide-btn.s360-rapide-avenir { opacity: .45; cursor: default; }
.s360-rapide-btn.s360-rapide-avenir:hover { background: rgba(255, 255, 255, .7) !important; border-color: #E6E2F3 !important; color: #180A56 !important; transform: none; box-shadow: none !important; }
.s360-rapide-btn.s360-rapide-avenir:hover .s360-rapide-bulle, .s360-rapide-btn.s360-rapide-avenir:focus .s360-rapide-bulle { opacity: 1; transform: translateX(-50%) translateY(0); }