/* ==========================================================================
   DA 2026 · COUCHE DE FORME
   --------------------------------------------------------------------------
   Chargée APRÈS vogaria.css et les feuilles de page. La V1 (dans vogaria.css)
   avait changé les couleurs ; celle-ci change la FORME :
   - navbar : île flottante détachée du bord, liens en contrôle segmenté ;
   - boutons : carrés arrondis « tactiles » (bord inférieur, ils s'enfoncent) ;
   - cartes : grands rayons, sans cadre, surface plus claire (bento) ;
   - pages : titres alignés à gauche, plus grands ;
   - menu latéral : îlot flottant ;
   - pied de page : bloc dans le flux, pas une barre fixe, mot-marque géant.
   On ne touche que les composants partagés, jamais le contenu des pages.
   ========================================================================== */

:root {
    --nav-height: 56px;
    --footer-height: 0px;    /* le pied de page n'est plus fixe */
    --gradient-primary: linear-gradient(180deg, #6aa5ff 0%, #3f7ff0 100%);
    --r-lg: 24px;
    --r-xl: 32px;
}
[data-theme="light"] {
    --gradient-primary: linear-gradient(180deg, #2f8cf0 0%, #0071e3 100%);
}

/* ── Navbar : pleine largeur, fine, façon vitrine Apple ──
   Le détail des liens apparaît au survol (megamenu.js). */
body .navbar,
body .navbar.scrolled {
    top: 0;
    left: 0;
    right: 0;
    transform: none;
    width: auto;
    border: 0;
    border-bottom: 1px solid var(--border-color);
    border-radius: 0;
    box-shadow: none;
    background: var(--glass-bg);
}
body .nav-container { height: 56px; padding: 0 clamp(1rem, 3vw, 2.5rem); gap: 1rem; max-width: 1400px; }
body .logo-image { width: 30px; height: 30px; border-radius: 9px; }
body .logo-text { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; }

body .nav-center { background: none; border: 0; padding: 0; gap: clamp(0.5rem, 2.4vw, 2.2rem); box-shadow: none; }
body .nav-link {
    border-radius: 0;
    padding: 0.5rem 0.2rem;
    font-weight: 400;
    font-size: 0.82rem;
    letter-spacing: 0;
    color: var(--text-secondary);
    background: none;
    box-shadow: none;
}
body .nav-link:hover,
body .nav-link.active,
body .nav-link.nav-open { color: var(--text-primary); background: none; box-shadow: none; }
body .nav-link.active { font-weight: 600; }
[data-theme="light"] .nav-link.active { background: none; box-shadow: none; }
body .nav-link::after { display: none; }

body .mobile-menu { top: 100%; border-radius: 0 0 20px 20px; border: 0; border-top: 1px solid var(--border-color); box-shadow: var(--shadow-lg); }

/* ── Méga-menu (megamenu.js) : panneau pleine largeur sous la barre ── */
.vg-mega-voile {
    position: fixed; inset: 0; z-index: 990;
    background: rgba(0, 0, 0, 0.45);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease;
}
.vg-mega {
    position: fixed; left: 0; right: 0; top: 56px; z-index: 995;
    background: var(--background-primary);
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow-xl);
    padding: 2.2rem clamp(1rem, 3vw, 2.5rem) 2.8rem;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity 0.22s ease, transform 0.28s var(--ease-out), visibility 0.22s;
}
.vg-mega.ouvert, .vg-mega-voile.ouvert { opacity: 1; visibility: visible; transform: none; }
.vg-mega-grille { max-width: 1400px; margin: 0 auto; display: flex; gap: clamp(2rem, 8vw, 7rem); }
.vg-mega-col h4 { font-size: 0.75rem; font-weight: 500; color: var(--text-tertiary); margin-bottom: 0.9rem; letter-spacing: 0; }
.vg-mega-col a {
    display: block; text-decoration: none; color: var(--text-primary);
    transition: color 0.15s ease, transform 0.25s var(--ease-out);
}
.vg-mega-col a:hover { color: var(--primary-color); transform: translateX(3px); }
.vg-mega-col.grand a { font-size: clamp(1.4rem, 2.2vw, 1.9rem); font-weight: 600; letter-spacing: -0.02em; padding: 0.22rem 0; }
.vg-mega-col.petit a { font-size: 0.88rem; font-weight: 600; padding: 0.3rem 0; }
@media (max-width: 860px) { .vg-mega, .vg-mega-voile { display: none; } }

/* ── Boutons : carrés arrondis tactiles ── */
body .nav-login-btn,
body .login-btn-cta,
body .mobile-login-btn,
a[class*="btn"]:not([class*="close"]):not([class*="icon"]):not([class*="toggle"]):not([class*="avatar"]):not([class*="round"]),
button[class*="btn"]:not([class*="close"]):not([class*="icon"]):not([class*="toggle"]):not([class*="avatar"]):not([class*="round"]) {
    border-radius: 14px;
}
body .nav-login-btn,
body .login-btn-cta,
body .mobile-login-btn {
    background: var(--gradient-primary);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 3px 0 #2557b8, 0 8px 16px rgba(30, 90, 220, 0.25);
    padding: 0.6rem 1.15rem;
}
body .nav-login-btn:hover,
body .login-btn-cta:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
    box-shadow: 0 4px 0 #2557b8, 0 12px 22px rgba(30, 90, 220, 0.32);
}
body .nav-login-btn:active,
body .login-btn-cta:active {
    transform: translateY(3px);
    box-shadow: 0 0 0 #2557b8, 0 2px 6px rgba(30, 90, 220, 0.3);
    transition-duration: 0.06s;
}
body .user-dropdown { border-radius: 22px; top: calc(100% + 12px); }

/* ── Surfaces bento : grands rayons, plus de cadre ── */
body .panel-card, body .stat-tile, body .notif-card, body .ent-card, body .st-carte,
body .ac-chiffre, body .ac-carte {
    border-radius: var(--r-lg);
    border: 0;
    background: var(--background-secondary);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), var(--shadow-sm);
}
[data-theme="light"] .panel-card, [data-theme="light"] .stat-tile,
[data-theme="light"] .ac-chiffre, [data-theme="light"] .ac-carte {
    box-shadow: var(--shadow-sm);
}
body .ac-chiffre::before { display: none; }
body .ac-carte:hover, body a.st-carte:hover {
    transform: translateY(-4px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), var(--shadow-lg);
}
body .ac-chiffre-ic, body .st-icone { border-radius: 14px; }

/* ── En-têtes de page : à gauche, grands ── */
body .page-header { text-align: left; margin-bottom: 2.5rem; }
body .page-header .page-title { justify-content: flex-start; }
body .page-subtitle { margin-left: 0; }
body .page-title {
    font-size: clamp(2.4rem, 4.6vw, 3.9rem);
    font-weight: 700;
    letter-spacing: -0.035em;
}
body .page-title .material-symbols-outlined {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--primary-color);
}
body .logo-rp,
body .nav-link-rp, body .nav-link-rp:hover, body .nav-link-rp.active {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--primary-color);
}
body .ac-tete { text-align: left; }
body .ac-tete p { margin-inline: 0; }

/* ── Accueil : le hero devient un panneau arrondi ── */
body .hero-section {
    min-height: calc(100vh - var(--nav-height) - 40px);
    margin: calc(var(--nav-height) + 14px) 14px 14px;
    border-radius: 40px;
    align-items: flex-start;
    text-align: left;
    padding: clamp(2.5rem, 7vw, 6rem);
    background:
        radial-gradient(900px 500px at 85% 0%, rgba(76, 141, 255, 0.22), transparent 65%),
        radial-gradient(700px 400px at 0% 100%, rgba(90, 200, 250, 0.10), transparent 60%),
        var(--background-secondary);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), var(--shadow-lg);
    overflow: hidden;
}
body .hero-section::before { display: none; }
/* Image d'accueil : déposer le fichier dans assets/accueil-hero.png. */
body .hero-section::after {
    content: '';
    display: block;
    position: absolute;
    inset: 6% clamp(1.5rem, 5vw, 5rem) 6% auto;
    width: min(42vw, 620px);
    background: url('../accueil-hero.png') center / contain no-repeat;
    pointer-events: none;
}
body .hero-subtitle { margin-left: 0; margin-right: 0; text-align: left; }
body .hero-content { text-align: left; max-width: 760px; margin: 0; }
body .hero-title {
    font-size: clamp(2.8rem, 7vw, 5.6rem);
    font-weight: 700;
    letter-spacing: -0.045em;
    line-height: 1.02;
}
body .hero-buttons { justify-content: flex-start; }

/* ── Menu latéral : îlot flottant ── */
body .commu-side {
    top: calc(var(--nav-height) + 0.5rem);
    max-height: calc(100vh - var(--nav-height) - 1.5rem);
    border: 1px solid var(--border-strong);
    border-radius: 26px;
    padding: 0.7rem;
    box-shadow: var(--shadow-md);
}
body .cs-link { border-radius: 14px; padding: 0.6rem 0.75rem; }
body .cs-link.active {
    background: var(--primary-color);
    color: #fff;
    box-shadow: 0 2px 10px rgba(76, 141, 255, 0.35);
}
body .cs-link.active .material-symbols-outlined { color: #fff; }

/* ── Pied de page : bloc dans le flux, mot-marque en filigrane ── */
body .site-footer,
body .pf2 {
    position: relative;
    bottom: auto; left: auto; right: auto;
    margin: 3rem 14px 14px;
    border: 0;
    border-radius: 36px;
    background: var(--background-secondary);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), var(--shadow-md);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    overflow: hidden;
    z-index: 1;
}
body .site-footer { padding: 2.2rem clamp(1.5rem, 4vw, 3.5rem) clamp(4rem, 9vw, 8rem); margin-top: auto; }
body .pf2 { padding: 3.5rem clamp(1.5rem, 4vw, 3.5rem) clamp(4rem, 10vw, 9rem); }
body .site-footer::after,
body .pf2::after {
    content: 'VOGARIA';
    display: block;
    position: absolute;
    left: 50%;
    bottom: -0.2em;
    transform: translateX(-50%);
    font-size: clamp(4rem, 17vw, 15rem);
    font-weight: 800;
    letter-spacing: -0.06em;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px var(--border-strong);
    pointer-events: none;
    user-select: none;
}
body .footer-inner,
body .pf2-haut,
body .pf2-bas { position: relative; z-index: 1; }

/* ── Modales et feuilles : très arrondies ── */
body .login-modal, body .st-modal, body .ac-avis-modal { border-radius: 30px; }
body .toast-notif { border-radius: 18px; }

@media (max-width: 860px) {
    body .hero-section { border-radius: 28px; margin-inline: 10px; }
    body .hero-section::after { opacity: 0.18; width: 80vw; }
}

/* ── Bouton « Se connecter » : pilule claire inversée, sans icône ──
   Distinct des boutons d'action bleus : c'est une entrée, pas une action. */
body .nav-login-btn,
body .mobile-login-btn {
    background: var(--text-primary);
    color: var(--background-primary) !important;
    border: 0;
    border-radius: 999px;
    padding: 0.5rem 1.15rem;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
body .nav-login-btn .material-symbols-outlined { display: none; }
body .nav-login-btn:hover { filter: none; background: var(--primary-color); color: #fff !important; box-shadow: 0 6px 18px rgba(76, 141, 255, 0.35); transform: none; }
body .nav-login-btn:active { transform: scale(0.96); box-shadow: none; }
/* Filet : même sans le script, pas d'engrenage pour un visiteur. */
.nav-right:has(.nav-login-btn:not([style*="none"])) .vogaria-settings-nav-btn { display: none; }

/* ── Ouvertures et fermetures un peu plus lentes ── */
body .login-overlay { transition-duration: 0.42s; }
body .login-modal { transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease; }
body .user-dropdown { transition-duration: 0.34s; }
body .mobile-menu { transition-duration: 0.45s; }
body .vg-mega { transition-duration: 0.34s, 0.45s, 0.34s; }
body .vg-mega-voile { transition-duration: 0.38s; }
body .st-modal-fond { animation-duration: 0.34s; }
body .st-modal { animation-duration: 0.48s; }
body .st-modal-fond.st-fermeture,
body .st-modal-fond.st-fermeture .st-modal { animation-duration: 0.26s; }

/* Logo Discord : masque SVG, prend la couleur du texte et la taille de la police. */
.ico-discord {
    display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -0.2em; flex: none;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419-.0189 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419-.0189 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pp-icone .ico-discord { width: 1.7rem; height: 1.7rem; vertical-align: 0; }



/* Pied de page des autres pages : sans le mot-marque de fond. */
body .site-footer { min-height: 0; display: block; padding: 2rem clamp(1.5rem, 4vw, 3.5rem); }
body .site-footer::after { display: none; }

/* ==========================================================================
   Retouches : écran de connexion requis, menu mobile, pied de page
   ========================================================================== */

/* ── Écran « connecte-toi » : plus de carte, une mise en page éditoriale ──
   Texte et bouton à gauche, avantages en liste à droite. */
body .auth-gate {
    max-width: 1100px; margin: clamp(2rem, 7vw, 6rem) auto;
    padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible;
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    column-gap: clamp(2rem, 7vw, 7rem); align-items: start; text-align: left;
    animation: none;
}
body .auth-gate::before { display: none; }
body .auth-gate > * { grid-column: 1; }
body .auth-gate-badge {
    width: 68px; height: 68px; border-radius: 22px; margin: 0 0 1.6rem; box-shadow: none;
    background: var(--primary-color);
}
body .auth-gate-badge::after { display: none; }
body .auth-gate-title {
    font-size: clamp(2.2rem, 4.6vw, 4rem); font-weight: 700; letter-spacing: -0.045em;
    line-height: 1.02; margin: 0 0 1rem; text-align: left;
}
body .auth-gate-text { font-size: clamp(1rem, 1.4vw, 1.2rem); color: var(--text-secondary); text-align: left; margin: 0 0 2rem; max-width: 40ch; }

body .auth-gate-perks {
    grid-column: 2; grid-row: 1 / span 6; align-self: center;
    margin: 0; padding: 0; background: none; border: 0; border-radius: 0; list-style: none;
}
body .auth-gate-perks li {
    display: flex; align-items: center; gap: 1rem;
    padding: 1.15rem 0; border-top: 1px solid var(--border-color);
    font-size: clamp(1.05rem, 1.6vw, 1.4rem); font-weight: 600; letter-spacing: -0.02em; color: var(--text-primary);
}
body .auth-gate-perks li:last-child { border-bottom: 1px solid var(--border-color); }
body .auth-gate-perks .material-symbols-outlined {
    width: 40px; height: 40px; display: grid; place-items: center; flex: none;
    border-radius: 50%; background: rgba(48, 209, 88, 0.14); color: var(--success); font-size: 1.3rem;
}

body .auth-gate-cta {
    justify-self: start; width: auto; margin: 0 0 1rem;
    padding: 0.95rem 1.5rem; border-radius: 999px; border: 0;
    background: var(--text-primary); color: var(--background-primary);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    transition: background-color 0.4s ease, color 0.4s ease, transform 0.25s var(--ease-out), box-shadow 0.4s ease;
}
body .auth-gate-cta::after { display: none; }
body .auth-gate-cta:hover { background: #5865f2; color: #fff; transform: none; box-shadow: 0 10px 28px rgba(88, 101, 242, 0.4); }
body .auth-gate-cta:active { transform: scale(0.97); }
body .auth-gate-note { justify-content: flex-start; text-align: left; color: var(--text-tertiary); }

@media (max-width: 820px) {
    body .auth-gate { grid-template-columns: 1fr; }
    body .auth-gate-perks { grid-column: 1; grid-row: auto; margin: 0 0 2rem; }
}

/* ── Menu hamburger : fond plein, jamais transparent ── */
body .mobile-menu {
    background: var(--background-secondary);
    -webkit-backdrop-filter: none; backdrop-filter: none;
}

/* ── Pied de page : haut arrondi, bas collé au bas de la page ── */
body .site-footer,
body .pf2 {
    margin: 3rem 0 0;
    border-radius: clamp(26px, 3vw, 40px) clamp(26px, 3vw, 40px) 0 0;
}

/* Le pied de page se colle au bas de la fenêtre quand la page est courte. */
body .site-footer, body .pf2 { margin-top: auto; }
body > main, body > .page-content { margin-bottom: 2.5rem; }

/* Pied de page : bas et côtés vraiment collés à la fenêtre, sans exception. */
body > .site-footer, body > .pf2 {
    margin-left: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important;
    width: 100%; border-radius: clamp(26px, 3vw, 40px) clamp(26px, 3vw, 40px) 0 0 !important;
}

/* ==========================================================================
   Retouches V5 : navbar pleine largeur, survol, menu profil, toasts
   ========================================================================== */

/* ── Navbar : vraiment toute la largeur ── */
body .nav-container { max-width: none; width: 100%; }

/* ── Survol d'un lien : une pastille qui grandit sous le texte ── */
body .nav-link { position: relative; z-index: 0; padding: 0.5rem 0.8rem; border-radius: 999px; transition: color 0.3s ease; }
body .nav-link::before {
    content: ''; position: absolute; inset: 2px 0; z-index: -1; border-radius: 999px;
    background: var(--background-card-hover);
    opacity: 0; transform: scale(0.7);
    transition: opacity 0.3s ease, transform 0.45s var(--ease-out);
}
body .nav-link:hover::before, body .nav-link.nav-open::before { opacity: 1; transform: scale(1); }
body .nav-link.active::before { opacity: 1; transform: scale(1); background: var(--background-card); }
body .nav-link:hover { color: var(--text-primary); }
body .nav-link::after {
    display: block; content: ''; position: absolute; left: 50%; bottom: 3px; width: 0; height: 2px;
    border-radius: 2px; background: var(--primary-color); transform: translateX(-50%);
    transition: width 0.4s var(--ease-out); opacity: 1;
}
body .nav-link:hover::after, body .nav-link.nav-open::after { width: 28%; }

/* ── Menu du compte : un panneau en tuiles ── */
body .user-dropdown {
    width: 330px; min-width: 0; padding: 0; overflow: hidden;
    display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem;
    border-radius: 30px;
}
body .user-dropdown .dropdown-header {
    grid-column: 1 / -1; margin: 0; padding: 1.2rem 1.2rem 1rem; border: 0;
    background: radial-gradient(260px 120px at 0% 0%, rgba(76, 141, 255, 0.28), transparent 70%);
    flex-direction: column; align-items: flex-start; gap: 0.7rem;
}
body .user-dropdown .dropdown-header .user-avatar { width: 60px; height: 60px; border-radius: 20px; border: 0; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35); }
body .user-dropdown .dropdown-header-name { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.025em; }
body .user-dropdown .dropdown-header-role { font-size: 0.78rem; font-weight: 600; padding: 0.15rem 0.6rem; border-radius: 999px; background: var(--background-card); width: max-content; }
body .user-dropdown .dropdown-divider, body .user-dropdown .dropdown-section-label { display: none; }
body .user-dropdown .dropdown-item {
    flex-direction: column; align-items: flex-start; gap: 0.7rem; position: relative;
    margin: 0 0 0 0.5rem; padding: 1rem; min-height: 96px; border-radius: 22px;
    background: var(--background-card); font-weight: 600; font-size: 0.9rem;
    transition: background-color 0.3s ease, transform 0.4s var(--ease-out);
}
body .user-dropdown .dropdown-item:hover { background: var(--background-card-hover); transform: translateY(-3px); }
body .user-dropdown .dropdown-item .material-symbols-outlined {
    width: 40px; height: 40px; display: grid; place-items: center; border-radius: 14px;
    background: rgba(76, 141, 255, 0.16); color: var(--primary-color); font-size: 1.3rem;
}
body .user-dropdown .dropdown-item .notif-badge { position: absolute; top: 0.8rem; right: 0.8rem; margin: 0; }
body .user-dropdown .logout-item {
    grid-column: 1 / -1; flex-direction: row; align-items: center; min-height: 0;
    margin: 0 0.5rem 0.5rem; padding: 0.8rem 1rem; background: rgba(255, 69, 58, 0.1); color: var(--danger);
}
body .user-dropdown .logout-item .material-symbols-outlined { width: 32px; height: 32px; background: rgba(255, 69, 58, 0.16); color: var(--danger); }
body .user-dropdown .logout-item:hover { background: rgba(255, 69, 58, 0.18); }

/* ==========================================================================
   TOASTS : un design neuf, centré en haut, qui tombe et se replie
   (les noms toastIn / toastOut / toastProgress sont attendus par auth.js)
   ========================================================================== */
body .toast-stack {
    top: auto; bottom: calc(var(--footer-height, 60px) + 16px);
    left: 50%; right: auto; transform: translateX(-50%);
    width: min(460px, calc(100vw - 1.5rem));
    align-items: stretch; gap: 0.6rem;
}
body .toast-notif {
    --toast-accent: var(--primary-color);
    padding: 0.8rem 0.9rem 0.8rem 0.8rem; gap: 0.85rem; align-items: center;
    border: 1px solid var(--border-strong); border-radius: 26px;
    background:
        radial-gradient(240px 90px at 0% 50%, color-mix(in srgb, var(--toast-accent) 22%, transparent), transparent 75%),
        var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    box-shadow: 0 18px 50px -12px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transform-origin: bottom center;
    animation: toastIn 0.6s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}
body .toast-notif-icon {
    width: 42px; height: 42px; border-radius: 50%;
    background: var(--toast-accent); color: #fff;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--toast-accent) 55%, transparent);
    animation: toastIcone 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.12s both;
}
body .toast-notif.is-warning .toast-notif-icon { color: #1b1200; }
body .toast-notif-icon .material-symbols-outlined { font-size: 1.35rem; }
body .toast-notif-title { font-size: 0.95rem; font-weight: 600; letter-spacing: -0.01em; }
body .toast-notif-text { font-size: 0.86rem; color: var(--text-secondary); }
body .toast-notif.is-plain .toast-notif-text { font-size: 0.95rem; font-weight: 600; color: var(--text-primary); }
body .toast-notif-close { border-radius: 50%; width: 30px; height: 30px; background: var(--background-card); font-size: 1.1rem; }
body .toast-notif-progress {
    left: 1.2rem; right: 1.2rem; bottom: 6px; height: 3px; border-radius: 3px;
    background: var(--toast-accent); opacity: 0.8;
}

@keyframes toastIn {
    from { opacity: 0; transform: translateY(40px) scale(0.9); filter: blur(6px); }
    to   { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes toastIcone {
    from { transform: scale(0) rotate(-90deg); }
    to   { transform: scale(1) rotate(0); }
}
@keyframes toastOut {
    30%  { opacity: 1; transform: translateY(4px) scale(1.02); }
    100% { opacity: 0; transform: translateY(-22px) scale(0.88); filter: blur(6px); }
}
@keyframes toastProgress { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) {
    body .toast-notif, body .toast-notif-icon { animation-duration: 0.01ms; }
}

/* ==========================================================================
   Libellés flottants et zones de dépôt (ui-v2.js)
   ========================================================================== */
.fl-wrap { position: relative; display: block; width: 100%; }
.fl-wrap > input,
.fl-wrap > textarea {
    padding-top: 1.45rem !important; padding-bottom: 0.5rem !important;
    width: 100%; box-sizing: border-box;
}
.fl-wrap > .fl-label {
    position: absolute; left: var(--fl-x, 1rem); top: 1rem; right: 1rem; margin: 0;
    font-size: 0.95rem; font-weight: 500; line-height: 1.2; letter-spacing: 0; text-transform: none;
    color: var(--text-tertiary); pointer-events: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transform-origin: left top;
    transition: top 0.28s var(--ease-out), font-size 0.28s var(--ease-out), color 0.25s ease;
}
.fl-wrap > input:focus ~ .fl-label,
.fl-wrap > textarea:focus ~ .fl-label,
.fl-wrap > input:not(:placeholder-shown) ~ .fl-label,
.fl-wrap > textarea:not(:placeholder-shown) ~ .fl-label {
    top: 0.42rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em;
}
.fl-wrap > input:focus ~ .fl-label,
.fl-wrap > textarea:focus ~ .fl-label { color: var(--primary-color); }
.fl-wrap > input::placeholder, .fl-wrap > textarea::placeholder { color: var(--text-tertiary); opacity: 1; transition: opacity 0.2s ease; }
.fl-wrap > input[placeholder=" "]::placeholder, .fl-wrap > textarea[placeholder=" "]::placeholder { color: transparent; }

/* Zone de dépôt : remplace le bouton natif « Parcourir ». */
.dz {
    position: relative; display: block; width: 100%;
    border: 2px dashed var(--border-strong); border-radius: 24px;
    background: var(--background-card);
    transition: border-color 0.3s ease, background-color 0.3s ease, transform 0.4s var(--ease-out);
}
.dz > input[type="file"] {
    position: absolute !important; inset: 0; width: 100% !important; height: 100% !important;
    opacity: 0; cursor: pointer; margin: 0; padding: 0; z-index: 2;
    font-size: 0;
}
.dz-vue {
    display: flex; flex-direction: column; align-items: center; gap: 0.25rem;
    padding: 1.4rem 1rem; text-align: center; pointer-events: none;
}
.dz-icone {
    width: 52px; height: 52px; display: grid; place-items: center; border-radius: 18px; margin-bottom: 0.4rem;
    background: rgba(76, 141, 255, 0.16); color: var(--primary-color); font-size: 1.7rem;
    transition: transform 0.45s var(--ease-out);
}
.dz-titre { font-weight: 600; font-size: 0.98rem; letter-spacing: -0.01em; color: var(--text-primary); word-break: break-word; }
.dz-sous { font-size: 0.82rem; color: var(--text-tertiary); }
.dz-liste { display: flex; gap: 0.4rem; flex-wrap: wrap; justify-content: center; margin-top: 0.5rem; }
.dz-liste:empty { display: none; }
.dz-liste img { width: 54px; height: 54px; object-fit: cover; border-radius: 14px; box-shadow: var(--shadow-sm); }
.dz:hover { border-color: var(--primary-color); background: var(--background-card-hover); }
.dz.dz-survol {
    border-color: var(--primary-color); border-style: solid;
    background: rgba(76, 141, 255, 0.14); transform: scale(1.015);
}
.dz.dz-survol .dz-icone, .dz:hover .dz-icone { transform: translateY(-4px) scale(1.08); }
.dz.dz-plein { border-style: solid; border-color: rgba(48, 209, 88, 0.55); }
.dz.dz-plein .dz-icone { background: rgba(48, 209, 88, 0.16); color: var(--success); }

/* ==========================================================================
   V6 : retours du 15 octobre
   ========================================================================== */

/* ── Accueil : l'image du hero ne passe plus jamais sous le texte ── */
body .hero-section::after { z-index: 0; }
body .hero-content { position: relative; z-index: 2; max-width: min(760px, 54%); }
@media (max-width: 1180px) {
    body .hero-content { max-width: 100%; }
    body .hero-section::after { opacity: 0.2; width: min(60vw, 460px); }
}

/* ── Barre de navigation : plus d'effets de pastille, juste la couleur ── */
body .nav-link::before, body .nav-link::after,
body .nav-link:hover::before, body .nav-link:hover::after,
body .nav-link.active::before, body .nav-link.active::after,
body .nav-link.nav-open::before, body .nav-link.nav-open::after { content: none; display: none; }
body .nav-link, body .nav-link:hover, body .nav-link.nav-open, body .nav-link.active {
    background: none; box-shadow: none; border-radius: 0; padding: 0.5rem 0.2rem;
}
body .nav-link { color: var(--text-secondary); transition: color 0.25s ease; }
body .nav-link:hover, body .nav-link.nav-open { color: var(--text-primary); }
body .nav-link.active { color: var(--text-primary); font-weight: 600; }

/* ── Menu du compte : les tuiles ne dépassent plus ── */
body .user-dropdown {
    width: 330px; max-width: calc(100vw - 1.5rem);
    padding: 0 0.5rem 0.5rem; gap: 0.5rem; box-sizing: border-box;
}
body .user-dropdown .dropdown-header { margin: 0 -0.5rem; }
body .user-dropdown .dropdown-item,
body .user-dropdown .logout-item { margin: 0; min-width: 0; }
body .user-dropdown .dropdown-item > span:not(.material-symbols-outlined) { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
body .user-dropdown .logout-item { grid-column: 1 / -1; }

/* ── « Bientôt » : une indisponibilité qui se voit ── */
.cm-card.soon, .sp-voie.bientot, .doc-carte.vide, .cs-link.disabled, .st-carte.disabled, .sb-carte.soon {
    position: relative;
    background-image: repeating-linear-gradient(135deg, transparent 0 11px, rgba(255, 255, 255, 0.045) 11px 22px) !important;
    filter: grayscale(0.85); opacity: 0.72 !important;
    cursor: not-allowed !important;
}
.cm-card.soon *, .sp-voie.bientot *, .doc-carte.vide *, .cs-link.disabled * { cursor: not-allowed; }
.cs-link.disabled { border: 1px dashed var(--border-strong); background-color: transparent; }
.cm-badge.bientot, .cs-soon, .doc-soon, .sp-soon, .doc-attente {
    display: inline-flex !important; align-items: center; gap: 0.3rem;
    padding: 0.25rem 0.65rem !important; border-radius: 999px !important;
    background: rgba(255, 179, 64, 0.12) !important; color: #ffb340 !important;
    border: 1px dashed rgba(255, 179, 64, 0.6); font-size: 0.7rem !important; font-weight: 700 !important;
    letter-spacing: 0.08em; text-transform: uppercase;
}
.cm-badge.bientot::before, .cs-soon::before, .doc-soon::before, .sp-soon::before, .doc-attente::before {
    content: 'lock'; font-family: 'Material Symbols Outlined'; font-size: 0.95rem; letter-spacing: 0; text-transform: none; font-weight: 400;
}

/* ==========================================================================
   Menus de sélection sur mesure (ui-v2.js)
   ========================================================================== */
.cs-sel { position: relative; display: inline-block; vertical-align: middle; min-width: 0; max-width: 100%; }
.cs-sel.cs-bloc { display: block; width: 100%; }
.cs-natif { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; opacity: 0; pointer-events: none; }
.cs-bouton {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0.7rem;
    padding: 0.85rem 1rem; border: 0; border-radius: 18px; cursor: pointer;
    background: var(--background-card); color: var(--text-primary);
    font: inherit; font-size: 0.95rem; text-align: left;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: background-color 0.25s ease, box-shadow 0.25s ease;
}
.cs-bouton:hover { background: var(--background-card-hover); }
.cs-sel.cs-ouvert .cs-bouton, .cs-bouton:focus-visible { box-shadow: 0 0 0 2px var(--primary-color); outline: 0; }
.cs-valeur { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-chevron { font-size: 1.3rem; color: var(--text-tertiary); transition: transform 0.4s var(--ease-out); }
.cs-sel.cs-ouvert .cs-chevron { transform: rotate(180deg); color: var(--text-primary); }
.cs-desactive .cs-bouton { opacity: 0.5; cursor: not-allowed; }

.cs-liste {
    position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 4000;
    min-width: max-content; max-height: 288px; overflow-y: auto; padding: 0.4rem;
    border-radius: 22px; border: 1px solid var(--border-strong);
    background: var(--background-elevated); box-shadow: var(--shadow-xl);
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(-8px) scale(0.97); transform-origin: top center;
    transition: opacity 0.22s ease, transform 0.4s var(--ease-out), visibility 0.22s;
    scrollbar-width: thin;
}
.cs-sel.cs-haut .cs-liste { top: auto; bottom: calc(100% + 8px); transform-origin: bottom center; transform: translateY(8px) scale(0.97); }
.cs-sel.cs-ouvert .cs-liste { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.cs-option {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
    padding: 0.7rem 0.85rem; border: 0; border-radius: 14px; background: none; cursor: pointer;
    color: var(--text-secondary); font: inherit; font-size: 0.93rem; text-align: left;
    opacity: 0; transform: translateY(-4px);
    transition: background-color 0.2s ease, color 0.2s ease;
}
.cs-sel.cs-ouvert .cs-option { opacity: 1; transform: none; transition: background-color 0.2s ease, color 0.2s ease, opacity 0.3s ease var(--d, 0ms), transform 0.4s var(--ease-out) var(--d, 0ms); }
.cs-option:hover, .cs-option.survol { background: var(--background-card-hover); color: var(--text-primary); }
.cs-option.actif { color: var(--text-primary); font-weight: 600; background: rgba(76, 141, 255, 0.14); }
.cs-coche { font-size: 1.15rem; color: var(--primary-color); opacity: 0; transform: scale(0.5); transition: opacity 0.25s ease, transform 0.35s var(--ease-out); }
.cs-option.actif .cs-coche { opacity: 1; transform: none; }
.cs-option.cs-off { opacity: 0.4; cursor: not-allowed; }

/* ==========================================================================
   Barre latérale refaite + transitions de navigation entre pages
   ========================================================================== */

/* Navigation inter-pages : les éléments nommés (view-transition-name) voyagent
   d'une page à l'autre. Sans support du navigateur, rien ne change. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.3s; }
::view-transition-group(*) {
    animation-duration: 0.7s;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
::view-transition-old(*), ::view-transition-new(*) { mix-blend-mode: normal; }
@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation-duration: 0.01ms; }
}

/* ── Barre latérale ── */
body .commu-side {
    border: 0; border-radius: 32px; padding: 0.8rem;
    background:
        radial-gradient(240px 160px at 0% 0%, rgba(76, 141, 255, 0.12), transparent 70%),
        var(--background-secondary);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), var(--shadow-md);
    -webkit-backdrop-filter: none; backdrop-filter: none;
    gap: 0.2rem;
}
body .cs-title {
    padding: 0.7rem 0.8rem 0.5rem; font-size: 0.68rem; font-weight: 600;
    letter-spacing: 0.2em; color: var(--text-tertiary);
}
body .cs-link {
    position: relative; gap: 0.75rem; padding: 0.45rem 0.6rem 0.45rem 0.45rem;
    border-radius: 18px; font-size: 0.92rem; font-weight: 500; color: var(--text-secondary);
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.45s var(--ease-out);
}
body .cs-link .material-symbols-outlined {
    width: 38px; height: 38px; display: grid; place-items: center; flex: none;
    border-radius: 13px; font-size: 1.25rem; background: var(--background-card);
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.45s var(--ease-out);
}
body .cs-link:not(.disabled):hover { background: var(--background-card); color: var(--text-primary); transform: translateX(3px); }
body .cs-link:not(.disabled):hover .material-symbols-outlined { background: rgba(76, 141, 255, 0.18); color: var(--primary-color); transform: scale(1.06); }
body .cs-link.active {
    background: var(--primary-color); color: #fff; font-weight: 600;
    box-shadow: 0 8px 22px -8px rgba(76, 141, 255, 0.7);
}
body .cs-link.active .material-symbols-outlined { background: rgba(255, 255, 255, 0.2); color: #fff; }
body .cs-link.disabled { padding: 0.45rem 0.6rem 0.45rem 0.45rem; }
body .cs-link.disabled .material-symbols-outlined { background: transparent; }
body .cs-sep { margin: 0.5rem 0.4rem; background: var(--border-color); }

/* ==========================================================================
   V7 : libellés qui sortent du champ, scroll verrouillé, toasts, « bientôt »
   ========================================================================== */

/* Le déplacement entre pages est géré en JS (data-vt) : plus de transition native. */
@view-transition { navigation: none; }

/* Libellé flottant : il QUITTE le champ et se pose au-dessus. */
.fl-wrap { margin-top: 1.5rem; }
.fl-wrap > input, .fl-wrap > textarea { padding-top: 0.9rem !important; padding-bottom: 0.9rem !important; }
.fl-wrap > .fl-label {
    left: var(--fl-x, 1rem); top: 0.95rem; right: auto; max-width: calc(100% - 2rem);
    transition: top 0.4s cubic-bezier(0.22, 1, 0.36, 1), left 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                font-size 0.35s ease, color 0.25s ease;
}
.fl-wrap.fl-area > .fl-label { top: 1rem; }
.fl-wrap > input:focus ~ .fl-label,
.fl-wrap > textarea:focus ~ .fl-label,
.fl-wrap > input:not(:placeholder-shown) ~ .fl-label,
.fl-wrap > textarea:not(:placeholder-shown) ~ .fl-label {
    top: -1.45rem; left: 0.35rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em;
}

/* Un panneau ouvert fige la page derrière lui. */
body:has(.pf-overlay.show), body:has(.login-overlay.active), body:has(.sg-modal-fond),
body:has(.gw-panneau-fond), body:has(.st-modal-fond), body:has(.ac-avis-modal-fond),
body:has(.jx-modal-fond), body:has(.bt-panier-overlay.ouvert) { overflow: hidden; }
.pf-modal, .sg-modal, .gw-panneau, .st-modal, .login-modal, .bt-panier-drawer { overscroll-behavior: contain; }

/* Toasts : en bas de l'écran, ils arrivent et repartent par le bas. */
body .toast-notif.is-leaving {
    max-height: none !important; margin-bottom: 0 !important;
    padding-top: 0.8rem !important; padding-bottom: 0.8rem !important;
    transition: none !important;
    animation: toastOut 0.5s cubic-bezier(0.55, 0, 0.8, 0.4) forwards !important;
}
@keyframes toastOut {
    0%   { opacity: 1; transform: translateY(0); filter: blur(0); }
    100% { opacity: 0; transform: translateY(140%); filter: blur(2px); }
}

/* « Bientôt » dans les menus étroits : juste un cadenas, le nom reste lisible. */
.cs-link .cs-soon { font-size: 0 !important; gap: 0 !important; padding: 0.25rem !important; margin-left: auto; flex: none; }
.cs-link .cs-soon::before { font-size: 1rem !important; }
.cs-link > span:not(.material-symbols-outlined):not(.cs-soon) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Menu latéral : le fond bleu est un élément qui glisse. */
body .commu-side { position: sticky; }
body .cs-ind {
    position: absolute; left: 0.8rem; right: 0.8rem; top: 0; height: 0; z-index: 0; border-radius: 18px;
    background: var(--primary-color); box-shadow: 0 8px 22px -8px rgba(76, 141, 255, 0.7);
    pointer-events: none;
}
body .cs-link { position: relative; z-index: 1; }
body .cs-link.active, body .cs-link.active:hover { background: transparent !important; box-shadow: none !important; color: #fff; }

/* Menu du compte : opaque, pas de verre, rien ne doit transparaître derrière. */
body .user-dropdown {
    background: var(--background-secondary) !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    opacity: 1;
}

/* Menu mobile : il s'ouvre sous la barre de navigation, jamais par-dessus. */
body .navbar { z-index: 1100; }
body .mobile-menu { z-index: 1050; top: 100%; transform: none; clip-path: inset(0 0 100% 0); transition: clip-path 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s, visibility 0.5s; }
body .mobile-menu.show { transform: none; clip-path: inset(0 0 -60px 0); }