/* ============================================================
 * ui.css — surcouche : navbar, notifications popup, toasts,
 * iconographie Lineicons. Aligné sur les variables d'app.css.
 * ============================================================ */

/* ---- Focus states cohérents ---- */
.btn:focus-visible,
button:focus-visible,
a.btn:focus-visible,
.icon-link:focus-visible,
.user-menu-toggle:focus-visible {
    outline: 2px solid var(--primary-light);
    outline-offset: 2px;
}

/* ---- Lineicons : alignement cohérent ---- */
.lni { vertical-align: -0.12em; line-height: 1; }
.site-header .lni,
.sidebar .lni,
.user-menu-dropdown .lni,
.btn .lni { font-size: 1.05em; }
.sidebar a .lni {
    width: 1.3em; text-align: center; margin-right: 4px; color: var(--text-muted);
}
.sidebar a.active .lni { color: #fff; }

/* ---- Header affiné ---- */
.site-header { box-shadow: 0 1px 2px rgba(0,0,0,0.03); }
.brand-mark {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
}

/* Dropdown catégorie dans la barre de recherche.
   On désactive le rendu natif du chevron (qui était coupé par le padding)
   et on dessine le nôtre via background SVG — cohérent sur tous navigateurs. */
.header-search-cat {
    border: 1px solid var(--border-strong);
    border-right: none;
    border-radius: var(--radius) 0 0 var(--radius);
    background-color: var(--bg);
    /* Chevron SVG inline (couleur: var(--text-muted) = #6b7280) */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%236b7280' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.65rem center;
    background-size: 12px 8px;
    /* Padding-right plus large pour laisser la place au chevron custom */
    padding: 0.55rem 1.9rem 0.55rem 0.75rem;
    font-size: 0.88rem;
    color: var(--text);
    /* Dimensionnement flex + clamp pour s'adapter à la largeur dispo tout en
       gardant une limite max, et ellipsis si un libellé long déborde. */
    flex: 0 0 clamp(150px, 32%, 220px);
    min-width: 150px;
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    /* Masque le chevron natif de l'OS/navigateur */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}
.header-search-cat:focus {
    outline: 2px solid var(--primary-light);
    outline-offset: -1px;
}
.header-search input[type="search"] {
    min-width: 0;
    border-radius: 0;
}
@media (max-width: 1060px) { .header-search-cat { display: none; } }

.avatar-circle-img { padding: 0 !important; overflow: hidden; }
.avatar-circle-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* ---- Recherche header : input + icône + raccourci clavier + autocomplete ---- */
.header-search { position: relative; }
.header-search-input {
    position: relative; flex: 1; min-width: 0;
    display: flex; align-items: center;
    background: var(--bg, #f8fafc);
    border: 1px solid var(--border-strong, #e5e7eb);
    border-left: none;
    transition: background .15s, border-color .15s, box-shadow .15s;
}
.header-search-input:focus-within {
    background: #fff;
    border-color: var(--primary, #0f766e);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #0f766e) 18%, transparent);
}
.header-search-icon {
    position: absolute; left: .7rem; color: var(--text-muted, #64748b);
    pointer-events: none; font-size: .95rem;
}
.header-search-input input[type="search"] {
    flex: 1; min-width: 0;
    background: transparent; border: none; outline: none;
    padding: .55rem .55rem .55rem 2.1rem;
    font-size: .92rem; color: var(--text, #111);
}
.header-search-input input[type="search"]::placeholder { color: var(--text-muted, #64748b); }
.header-search-kbd {
    margin-right: .55rem;
    padding: .15rem .4rem;
    border: 1px solid var(--border-strong, #e5e7eb);
    border-radius: 5px;
    background: #fff;
    color: var(--text-muted, #64748b);
    font-family: ui-monospace, monospace; font-size: .72rem;
    pointer-events: none;
}
@media (max-width: 720px) { .header-search-kbd { display: none; } }

.header-search button[type="submit"] {
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: 0 .9rem;
    background: var(--primary, #0f766e); color: #fff;
    border: 1px solid var(--primary, #0f766e); border-left: none;
    cursor: pointer; transition: background .15s;
}
.header-search button[type="submit"]:hover { background: var(--primary-dark, #115e59); }

/* Dropdown des suggestions */
.header-suggest {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0;
    background: #fff;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 12px;
    box-shadow: 0 16px 38px rgba(0,0,0,.14);
    z-index: 130;
    max-height: 70vh; overflow-y: auto;
    overflow-x: hidden;
}
.header-suggest[hidden] { display: none; }
.header-suggest-loading,
.header-suggest-empty {
    padding: 1rem 1.2rem; color: var(--text-muted, #64748b);
    font-size: .9rem; display: flex; align-items: center; gap: .5rem;
}
.header-suggest-loading[hidden],
.header-suggest-empty[hidden] { display: none; }

.hs-section { padding: .25rem .35rem .5rem; }
.hs-section + .hs-section { border-top: 1px solid var(--border, #e5e7eb); padding-top: .5rem; }
.hs-section-title {
    font-size: .68rem; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--text-muted, #64748b);
    padding: .35rem .65rem .25rem;
}
.hs-item {
    display: flex; align-items: center; gap: .65rem;
    padding: .55rem .65rem;
    border-radius: 8px;
    text-decoration: none; color: inherit;
    transition: background .12s;
}
.hs-item:hover, .hs-item.is-active { background: var(--bg, #f1f5f9); }
.hs-item img, .hs-icon {
    width: 36px; height: 36px; border-radius: 8px;
    object-fit: cover;
    background: var(--bg, #f1f5f9);
    display: flex; align-items: center; justify-content: center;
    color: var(--primary, #0f766e); font-size: 1.1rem;
    flex-shrink: 0;
}
.hs-item-body { flex: 1; min-width: 0; }
.hs-item-title { font-weight: 600; font-size: .92rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-item-meta { font-size: .78rem; color: var(--text-muted, #64748b);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-item-price { font-weight: 700; color: var(--primary, #0f766e); font-size: .9rem; flex-shrink: 0; }

/* Mode « suggestions par défaut » : grille de catégories + chips */
.hs-section-cats { padding-bottom: .65rem; }
.hs-section-cats .hs-item.hs-cat {
    display: inline-flex; width: auto;
    padding: .35rem .7rem;
    margin: .15rem .25rem 0 .15rem;
    background: var(--bg, #f1f5f9);
    border-radius: 999px;
    font-size: .85rem;
}
.hs-section-cats .hs-item.hs-cat:hover { background: var(--primary, #0f766e); color: #fff; }
.hs-section-cats .hs-item.hs-cat:hover .lni { color: #fff; }
.hs-section-cats .hs-item.hs-cat .hs-icon {
    width: 22px; height: 22px; background: transparent; font-size: .9rem;
}
.hs-section-cats .hs-item.hs-cat .hs-item-title { font-weight: 500; font-size: .82rem; }

.header-suggest-footer {
    padding: .55rem .8rem;
    background: #fafafa;
    border-top: 1px solid var(--border, #e5e7eb);
    font-size: .72rem; color: var(--text-muted, #64748b);
}
.header-suggest-footer kbd {
    background: #fff; border: 1px solid var(--border, #e5e7eb);
    border-radius: 4px; padding: .05rem .3rem;
    font-family: ui-monospace, monospace; font-size: .72rem;
    margin: 0 .15rem;
}

/* ---- Cookie consent ---- */
.cookie-banner {
    position: fixed; left: 20px; right: 20px; bottom: 20px;
    z-index: 9998;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 32px rgba(0,0,0,0.15);
    padding: 1rem 1.25rem;
    max-width: 580px; margin: 0 auto;
    display: none;
    animation: cookieRise 0.4s ease-out;
}
.cookie-banner.show { display: block; }
@keyframes cookieRise {
    from { transform: translateY(30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.cookie-banner-inner {
    display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
}
.cookie-banner .icon { font-size: 1.9rem; color: var(--accent); }
.cookie-banner .text {
    flex: 1; min-width: 220px; font-size: 0.88rem;
    color: var(--text); line-height: 1.4;
}
.cookie-banner .text strong { display: block; margin-bottom: 2px; }
.cookie-banner .actions { display: flex; gap: 0.5rem; flex-shrink: 0; }
.cookie-banner .btn { padding: 0.45rem 0.85rem; font-size: 0.85rem; }
@media (max-width: 520px) {
    .cookie-banner { left: 10px; right: 10px; bottom: 10px; }
    .cookie-banner .actions { width: 100%; }
    .cookie-banner .actions .btn { flex: 1; }
}

.header-nav { gap: 0.4rem; flex-wrap: nowrap; }
.header-nav > a:not(.btn) {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.5rem 0.75rem; border-radius: var(--radius);
    color: var(--text); font-size: 0.92rem;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}
.header-nav > a:not(.btn), .header-nav .icon-link, .header-nav .user-menu { flex-shrink: 0; }
.header-nav > a:not(.btn):hover {
    background: var(--bg); color: var(--primary); text-decoration: none;
}

/* Icon-link : cloche + panier */
.header-nav .icon-link {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; padding: 0;
    border-radius: var(--radius);
    color: var(--text); font-size: 1.1rem;
    background: transparent; border: none; cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.header-nav .icon-link:hover {
    background: var(--bg); color: var(--primary); text-decoration: none;
}

.icon-badge {
    position: absolute; top: 3px; right: 3px;
    background: var(--danger); color: #fff;
    font-size: 0.65rem; font-weight: 700;
    min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 2px var(--surface);
}

/* ---- Menu utilisateur ---- */
.user-menu-toggle {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.4rem 0.75rem; border-radius: 999px;
    background: var(--bg); color: var(--text);
    border: none; cursor: pointer;
    font-size: 0.9rem; font-weight: 500;
    transition: background 0.15s;
    /* Tronque proprement les noms/emails longs au lieu de pousser le bouton
       hors de l'écran (cas "jean-philippe@long-exemple.com"). */
    max-width: 220px;
    white-space: nowrap;
}
.user-menu-toggle > span:not(.avatar-circle) {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.user-menu-toggle:hover { background: var(--border); }
.user-menu-toggle .avatar-circle {
    width: 26px; height: 26px; border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff; display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.75rem; font-weight: 700;
    flex-shrink: 0;
}
.user-menu-dropdown {
    position: absolute; top: calc(100% + 6px); right: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    min-width: 280px; padding: 0.35rem;
    box-shadow: var(--shadow-lg);
    display: none; z-index: 200;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}
.user-menu.open .user-menu-dropdown { display: block; }
.user-menu-dropdown a,
.user-menu-dropdown button {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.5rem 0.75rem; border-radius: var(--radius);
    color: var(--text); font-size: 0.9rem;
    width: 100%; text-align: left;
    background: none; border: none; cursor: pointer;
    font: inherit;
    transition: background 0.12s, color 0.12s;
}
.user-menu-dropdown a:hover,
.user-menu-dropdown button:hover {
    background: var(--bg); color: var(--primary); text-decoration: none;
}
.user-menu-dropdown .lni {
    color: var(--text-muted); width: 1.1em; text-align: center;
}
.user-menu-dropdown a:hover .lni,
.user-menu-dropdown button:hover .lni { color: var(--primary); }
.user-menu-dropdown hr {
    border: 0; border-top: 1px solid var(--border); margin: 0.35rem 0;
}
.user-menu-dropdown .wallet-item {
    background: #ecfdf5;
}
.user-menu-dropdown .wallet-item:hover {
    background: #d1fae5; color: var(--primary-dark);
}
.user-menu-dropdown .wallet-item .lni { color: var(--primary); }

.company-menu-section {
    padding: 0.2rem 0.2rem 0.3rem;
}
.company-menu-title {
    display: flex; align-items: center; gap: 0.55rem;
    padding: 0.35rem 0.55rem 0.45rem;
    color: var(--text-muted); font-size: 0.78rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.company-menu-title .lni { color: var(--primary); }
.company-switch-form { margin: 0; }
.user-menu-dropdown .company-switch-card,
.user-menu-dropdown .company-add-card {
    display: flex; align-items: center; gap: 0.7rem;
    padding: 0.65rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    margin-bottom: 0.35rem;
    min-height: 58px;
}
.user-menu-dropdown .company-switch-card:hover,
.user-menu-dropdown .company-add-card:hover {
    background: var(--bg);
    border-color: var(--primary-light);
}
.user-menu-dropdown .company-switch-card.is-active {
    background: #ecfdf5;
    border-color: var(--primary-light);
}
.company-switch-icon {
    width: 32px; height: 32px; border-radius: var(--radius);
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--bg); color: var(--primary);
    flex: 0 0 auto;
}
.company-switch-icon .lni {
    color: inherit;
    width: auto;
}
.company-switch-body {
    min-width: 0;
    display: flex; flex-direction: column; gap: 0.12rem;
    flex: 1 1 auto;
}
.company-switch-body strong,
.company-switch-body small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.company-switch-body strong {
    font-size: 0.9rem; color: var(--text);
}
.company-switch-body small {
    font-size: 0.76rem; color: var(--text-muted);
}
.company-switch-badge {
    flex: 0 0 auto;
    padding: 0.18rem 0.42rem;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
}
.user-menu-dropdown .company-add-card {
    border-style: dashed;
    color: var(--text);
    text-decoration: none;
}

/* ---- Notifications popup ---- */
.notif-wrap { position: relative; }
.notif-popup {
    position: absolute; top: calc(100% + 6px); right: 0;
    width: 360px; max-width: calc(100vw - 2rem);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    display: none; z-index: 200; overflow: hidden;
}
.notif-wrap.open .notif-popup { display: block; }
.notif-popup-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
}
.notif-popup-header h4 {
    margin: 0; font-size: 0.95rem; color: var(--primary-dark);
    display: inline-flex; align-items: center; gap: 0.35rem;
}
.notif-popup-header button {
    background: none; border: none;
    color: var(--text-muted); font-size: 0.8rem; cursor: pointer;
    padding: 0.25rem 0.5rem; border-radius: var(--radius);
    display: inline-flex; align-items: center; gap: 0.25rem;
}
.notif-popup-header button:hover {
    background: var(--border); color: var(--primary);
}
.notif-popup-list { max-height: 420px; overflow-y: auto; }
.notif-popup-list::-webkit-scrollbar { width: 6px; }
.notif-popup-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

.notif-item-pop {
    display: block; padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
    color: var(--text); text-decoration: none;
    transition: background 0.12s;
    position: relative;
}
.notif-item-pop:last-child { border-bottom: none; }
.notif-item-pop:hover { background: var(--bg); text-decoration: none; }
.notif-item-pop.unread { background: #f0fdfa; }
.notif-item-pop.unread::before {
    content: ''; position: absolute; left: 4px; top: 50%;
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--primary); transform: translateY(-50%);
}
.notif-item-pop .title {
    font-weight: 600; color: var(--text); font-size: 0.88rem; display: block;
}
.notif-item-pop .msg {
    color: var(--text-muted); font-size: 0.82rem;
    margin-top: 2px; line-height: 1.35;
}
.notif-item-pop .time {
    color: var(--text-muted); opacity: 0.75;
    font-size: 0.72rem; margin-top: 3px; display: block;
}
.notif-popup-footer {
    padding: 0.65rem 1rem;
    border-top: 1px solid var(--border);
    background: var(--bg); text-align: center;
}
.notif-popup-footer a {
    color: var(--primary); font-size: 0.85rem;
    text-decoration: none; font-weight: 500;
}
.notif-popup-footer a:hover { text-decoration: underline; }
.notif-empty {
    padding: 2rem 1.25rem; text-align: center;
    color: var(--text-muted); font-size: 0.9rem;
}
.notif-empty .lni {
    font-size: 2rem; display: block; margin-bottom: 0.5rem;
    color: var(--border-strong);
}

/* ---- Toasts ---- */
.toast-stack {
    position: fixed; bottom: 20px; right: 20px; z-index: 9999;
    display: flex; flex-direction: column; gap: 10px; pointer-events: none;
}
.toast {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 0.75rem 1rem;
    min-width: 260px; max-width: 360px;
    box-shadow: var(--shadow-lg);
    display: flex; gap: 0.75rem; align-items: flex-start;
    pointer-events: auto;
    animation: toastIn 0.3s ease-out;
}
@keyframes toastIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
.toast.toast-out { animation: toastOut 0.3s ease-in forwards; }
@keyframes toastOut { to { transform: translateX(120%); opacity: 0; } }
.toast-icon {
    flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1rem;
}
.toast-success .toast-icon { background: var(--success); }
.toast-error   .toast-icon { background: var(--danger); }
.toast-info    .toast-icon { background: var(--info); }
.toast-warning .toast-icon { background: var(--warning); }
.toast-content { flex: 1; min-width: 0; }
.toast-msg {
    color: var(--text); font-size: 0.9rem;
    line-height: 1.4; word-wrap: break-word;
}
.toast-close {
    background: none; border: none;
    color: var(--text-muted); cursor: pointer;
    font-size: 1.2rem; padding: 0; line-height: 1;
    flex-shrink: 0;
}
.toast-close:hover { color: var(--text); }

@media (max-width: 520px) {
    .toast-stack { left: 10px; right: 10px; bottom: 10px; }
    .toast { min-width: 0; max-width: 100%; }
}

/* Label dans icon-link, visible uniquement dans le drawer mobile */
.icon-link-label { display: none; }

/* ---- Mobile/tablette : adjust drawer-mode popup positions (aligné au drawer 1060px) ---- */
@media (max-width: 1060px) {
    .notif-popup { right: -10px; width: calc(100vw - 2rem); }
    .user-menu-dropdown { right: -10px; min-width: 220px; }
}

/* ==========================================================
 * Fixes responsive globaux — combles les manques d'app.css
 * ========================================================== */

/* 1. Cart / Checkout grid : layout 2 colonnes en desktop.
 *    (app.css n'avait que la règle mobile → avant, les sections
 *    étaient stackées même en grand écran.) */
.cart-grid, .checkout-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 1.5rem;
    align-items: start;
}
@media (max-width: 900px) {
    .cart-grid, .checkout-grid { grid-template-columns: 1fr; gap: 1rem; }
}

/* 2. Tables : wrapper scrollable automatique dans les cards.
 *    Ajoute aussi overflow horizontal sur les tables qui sortent
 *    du container, évite les débordements de page. */
.card > table,
.card > .table,
.order-items table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}
@media (max-width: 640px) {
    table.table { font-size: 0.88rem; }
    table.table th, table.table td { padding: 0.45rem 0.5rem; }
}

/* 3. Images et médias : max-width sécuritaire partout */
img, video, svg, iframe { max-width: 100%; height: auto; }

/* 4. Longs textes / emails / URLs : break-word de sécurité */
.text-wrap, .break-word { word-break: break-word; }
.card, .alert { word-wrap: break-word; }

/* 5. Zone sensible tablette 900-1024px :
 *    - Le drawer déclenche à 900px mais la sidebar layout
 *      bascule à 960px. On resserre le container pour éviter
 *      les débordements dans cette zone. */
@media (min-width: 901px) and (max-width: 1060px) {
    .container { padding: 0 1rem; }
}

/* 6. Footer : ajoute un breakpoint intermédiaire 640-768px
 *    (le footer.grid-4 passait directement de 4 colonnes à 2 à 768px) */
@media (max-width: 900px) and (min-width: 641px) {
    .footer-inner { grid-template-columns: 1fr 1fr !important; }
}

/* 7. Mobile très étroit (320-374px) */
@media (max-width: 374px) {
    .container { padding: 0 0.75rem; }
    main { padding: 1rem 0; }
    .btn { font-size: 0.88rem; padding: 0.45rem 0.85rem; }
    .btn-lg { font-size: 0.95rem; padding: 0.55rem 1rem; }
    .card { padding: 0.9rem; }
    h1 { font-size: 1.5rem !important; }
    h2 { font-size: 1.2rem !important; }
}

/* 8. Folder flipbook : aspect-ratio adapté mobile (évite un livre
 *    de 530px de haut sur un iPhone) */
@media (max-width: 600px) {
    .folder-stage {
        aspect-ratio: 3 / 4 !important;
        max-width: 100% !important;
        margin: 1.5rem auto !important;
    }
    .folder-cover { padding: 1.5rem 1.25rem !important; }
    .folder-cover-title { font-size: 1.5rem !important; }
    .folder-content { padding: 1rem !important; }
}

/* 9. Home floating cards : au-dessus de 600px on les cache plus tôt
 *    si le viewport est en dessous de 520px (évite overflow horizontal). */
@media (max-width: 520px) {
    .home-hero-art { display: none !important; }
}

/* 10. Sidebar sticky désactivée ≤ 900px (évite un sidebar qui
 *     reste collé en haut alors qu'on passe en colonne unique) */
@media (max-width: 900px) {
    aside[style*="sticky"],
    .cart-grid aside > .card,
    .checkout-grid aside > .card {
        position: static !important;
        top: auto !important;
    }
}

/* 11. Formulaires : form-row à 1 colonne en dessous de 520px
 *     (le breakpoint existant à 640px est parfois trop large) */
@media (max-width: 520px) {
    .grid-2.form-row,
    .form-row { grid-template-columns: 1fr !important; }
}

/* ==========================================================
 * Effets texte animés (GSAP + CSS)
 * ========================================================== */

/* Highlights & underlines — texte VERT teal plein, gras.
   Pas de background-clip:text (bug Chromium). Pas de filter. Juste du texte
   teal qui s'affiche correctement sur tous les navigateurs. */
.fx-highlight,
.fx-highlight-primary,
.fx-underline {
    display: inline;
    color: var(--primary) !important;
    -webkit-text-fill-color: var(--primary) !important;
    background: none !important;
    background-image: none !important;
    font-weight: 800;
}

/* Reset compat ancien .drawn (plus utilisé) */
.fx-highlight.drawn { background-position: initial; }

/* ==========================================================
 * WALNUT — assistant IA public
 * ========================================================== */

/* Bouton trois étoiles animées dans la navbar */
.walnut-btn {
    position: relative;
    background: transparent; border: none;
    cursor: pointer;
    overflow: visible !important;
}
.walnut-stars {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
}
.walnut-star {
    position: absolute;
    font-size: 0.85em;
    color: var(--accent);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                color 0.3s, filter 0.3s;
}
.walnut-star-1 { transform: translate(-7px, -3px) scale(0.7); opacity: 0.75; }
.walnut-star-2 { transform: translate(0px, 0px) scale(1);     color: #f59e0b; }
.walnut-star-3 { transform: translate(7px, 4px) scale(0.65);  opacity: 0.7; }
.walnut-btn:hover .walnut-star {
    filter: drop-shadow(0 0 4px rgba(245, 158, 11, 0.6));
}
.walnut-btn:hover .walnut-star-1 { transform: translate(-10px, -6px) scale(0.9) rotate(-15deg); opacity: 1; }
.walnut-btn:hover .walnut-star-2 { transform: translate(0, -2px) scale(1.2) rotate(20deg); }
.walnut-btn:hover .walnut-star-3 { transform: translate(10px, 7px) scale(0.85) rotate(25deg); opacity: 1; }
@keyframes walnut-twinkle {
    0%, 100% { opacity: var(--tw, 1); }
    50%      { opacity: calc(var(--tw, 1) * 0.55); }
}
.walnut-star-1 { --tw: 0.75; animation: walnut-twinkle 2.4s infinite ease-in-out; }
.walnut-star-2 { --tw: 1;    animation: walnut-twinkle 3.1s infinite ease-in-out 0.4s; }
.walnut-star-3 { --tw: 0.7;  animation: walnut-twinkle 2.7s infinite ease-in-out 0.8s; }

/* Popup chat */
.walnut-popup {
    position: fixed; bottom: 22px; right: 22px;
    width: 420px; max-width: calc(100vw - 32px);
    max-height: 640px; height: min(72vh, 640px);
    background: var(--surface);
    border: 1px solid rgba(15, 118, 110, 0.18);
    border-radius: 14px;
    box-shadow: 0 26px 70px rgba(15, 23, 42, 0.22), 0 8px 22px rgba(15, 23, 42, 0.10);
    display: flex; flex-direction: column;
    z-index: 9997;
    transform: translateY(20px) scale(0.95);
    opacity: 0; pointer-events: none;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s;
    overflow: hidden;
}

.message-thread-list {
    display: grid;
    gap: 0.7rem;
}

.message-thread {
    display: grid;
    gap: 0.2rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    color: inherit;
    text-decoration: none;
}

.message-thread:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-sm);
}

.message-thread.unread {
    border-left: 4px solid var(--primary);
    background: #f0fdfa;
}

.message-thread span,
.message-thread small,
.message-meta {
    color: var(--muted);
}

.message-box {
    display: grid;
    gap: 1rem;
}

.message-bubble {
    max-width: 78%;
    padding: 0.9rem 1rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #f8fafc;
}

.message-bubble.mine {
    justify-self: end;
    background: #ecfdf5;
    border-color: #bbf7d0;
}

.message-bubble p {
    margin: 0.45rem 0 0;
    line-height: 1.55;
}

.message-meta {
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    font-size: 0.82rem;
}

.menu-badge {
    margin-left: auto;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 800;
}

.maintenance-banner {
    background: #fff7ed;
    border-bottom: 1px solid #fed7aa;
    color: #7c2d12;
    font-weight: 700;
}

.maintenance-banner.active {
    background: #fef2f2;
    border-bottom-color: #fecaca;
    color: #7f1d1d;
}

.maintenance-banner .container {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
}

.maintenance-banner span {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.9rem;
}

.maintenance-page {
    min-height: 58vh;
    display: grid;
    place-items: center;
}

.maintenance-panel {
    max-width: 680px;
    padding: 2rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.maintenance-panel h1 {
    margin-top: 0.25rem;
}

.maintenance-panel .actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.4rem;
}

.check-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-weight: 700;
}

.check-row input {
    width: auto;
}

.clean-list {
    margin: 0.5rem 0 0;
    padding-left: 1.1rem;
}
.walnut-popup.open {
    transform: translateY(0) scale(1);
    opacity: 1; pointer-events: auto;
}
.walnut-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.9rem 1rem;
    background: linear-gradient(135deg, #0f766e, #115e59);
    color: #fff;
    border-radius: 14px 14px 0 0;
}
.walnut-header-info { display: flex; align-items: center; gap: 0.7rem; min-width: 0; }
.walnut-avatar {
    width: 40px; height: 40px; border-radius: 10px;
    background: #f59e0b;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22), 0 8px 18px rgba(15, 23, 42, 0.18);
}
.walnut-name { font-weight: 800; font-size: 1rem; line-height: 1.1; }
.walnut-status {
    font-size: 0.76rem; opacity: 0.92;
    display: flex; align-items: center; gap: 0.3rem; margin-top: 2px;
}
.walnut-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #4ade80; box-shadow: 0 0 6px #4ade80;
    animation: walnut-pulse 1.8s infinite ease-in-out;
}
@keyframes walnut-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.5; }
}
.walnut-close {
    background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.16); color: #fff;
    width: 34px; height: 34px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background 0.15s, transform 0.15s;
}
.walnut-close:hover { background: rgba(255,255,255,0.24); transform: translateY(-1px); }

.walnut-body {
    flex: 1; overflow-y: auto;
    padding: 1rem; display: flex; flex-direction: column; gap: 0.75rem;
    background: #f7faf9;
}
.walnut-body::-webkit-scrollbar { width: 6px; }
.walnut-body::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }

.walnut-empty {
    margin: auto 0;
    display: flex; flex-direction: column; align-items: center; gap: 0.85rem;
    text-align: center; color: var(--text);
    padding: 1rem 0.5rem;
}
.walnut-empty-icon {
    width: 52px; height: 52px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    background: #ecfdf5; color: var(--primary);
    border: 1px solid rgba(15, 118, 110, 0.16);
    box-shadow: 0 8px 18px rgba(15, 118, 110, 0.10);
}
.walnut-empty strong { font-size: 1rem; }
.walnut-suggestions {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 0.45rem;
}
.walnut-suggestions button {
    border: 1px solid var(--border);
    background: #fff;
    color: var(--text);
    border-radius: 999px;
    padding: 0.42rem 0.72rem;
    font-size: 0.82rem;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.walnut-suggestions button:hover {
    border-color: var(--primary);
    color: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(15, 23, 42, 0.08);
}

.walnut-msg {
    display: flex; align-items: flex-end; gap: 0.5rem;
    animation: walnut-msg-in 0.25s ease-out;
    max-width: 92%;
}
@keyframes walnut-msg-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
.walnut-msg-user { align-self: flex-end; flex-direction: row-reverse; }
.walnut-msg-walnut { align-self: flex-start; }
.walnut-msg-avatar {
    flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px;
    background: #f59e0b;
    color: #fff; font-size: 0.7rem;
    display: flex; align-items: center; justify-content: center;
}
.walnut-msg-bubble {
    padding: 0.65rem 0.85rem; border-radius: 12px;
    font-size: 0.9rem; line-height: 1.5;
    word-wrap: break-word;
}
.walnut-msg-user .walnut-msg-bubble {
    background: var(--primary); color: #fff;
    border-bottom-right-radius: 4px;
    box-shadow: 0 6px 14px rgba(15, 118, 110, 0.16);
}
.walnut-msg-walnut .walnut-msg-bubble {
    background: #fff; color: var(--text);
    border: 1px solid var(--border);
    border-bottom-left-radius: 4px;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
}
.walnut-msg-walnut .walnut-msg-bubble a { color: var(--primary); font-weight: 600; }
.walnut-msg-walnut .walnut-msg-bubble p { margin: 0 0 0.6em 0; }
.walnut-msg-walnut .walnut-msg-bubble p:last-child { margin-bottom: 0; }
.walnut-msg-walnut .walnut-msg-bubble h1,
.walnut-msg-walnut .walnut-msg-bubble h2,
.walnut-msg-walnut .walnut-msg-bubble h3,
.walnut-msg-walnut .walnut-msg-bubble h4 {
    margin: 0.65em 0 0.35em 0;
    line-height: 1.25;
    font-weight: 700;
}
.walnut-msg-walnut .walnut-msg-bubble h1 { font-size: 1.05rem; }
.walnut-msg-walnut .walnut-msg-bubble h2 { font-size: 0.98rem; }
.walnut-msg-walnut .walnut-msg-bubble h3 { font-size: 0.93rem; }
.walnut-msg-walnut .walnut-msg-bubble h4 { font-size: 0.89rem; color: #374151; }
.walnut-msg-walnut .walnut-msg-bubble ul,
.walnut-msg-walnut .walnut-msg-bubble ol {
    margin: 0.3em 0 0.6em 0;
    padding-left: 1.25em;
}
.walnut-msg-walnut .walnut-msg-bubble li { margin: 0.18em 0; }
.walnut-msg-walnut .walnut-msg-bubble strong { font-weight: 700; color: #111827; }
.walnut-msg-walnut .walnut-msg-bubble em { font-style: italic; }
.walnut-msg-walnut .walnut-msg-bubble code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    background: #f1f5f9;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.84em;
    color: #be185d;
}
.walnut-msg-walnut .walnut-msg-bubble pre {
    background: #0f172a;
    color: #e2e8f0;
    padding: 10px 12px;
    border-radius: 8px;
    overflow-x: auto;
    margin: 0.5em 0;
    font-size: 0.8rem;
    line-height: 1.45;
}
.walnut-msg-walnut .walnut-msg-bubble pre code {
    background: transparent;
    color: inherit;
    padding: 0;
    font-size: inherit;
}
.walnut-msg-walnut .walnut-msg-bubble blockquote {
    margin: 0.5em 0;
    padding: 4px 10px;
    border-left: 3px solid var(--primary);
    background: #f8fafc;
    color: #475569;
}
.walnut-msg-walnut .walnut-msg-bubble hr {
    border: none;
    border-top: 1px solid #e5e7eb;
    margin: 0.8em 0;
}
.walnut-msg-walnut .walnut-msg-bubble table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.5em 0;
    font-size: 0.82rem;
    display: block;
    overflow-x: auto;
}
.walnut-msg-walnut .walnut-msg-bubble th,
.walnut-msg-walnut .walnut-msg-bubble td {
    border: 1px solid #e5e7eb;
    padding: 5px 8px;
    text-align: left;
    white-space: nowrap;
}
.walnut-msg-walnut .walnut-msg-bubble th {
    background: #f9fafb;
    font-weight: 700;
}

.walnut-status-msg {
    align-self: center; font-size: 0.75rem; color: var(--text-muted);
    padding: 0.35rem 0.75rem;
    background: #ecfdf5; border: 1px solid rgba(15, 118, 110, 0.12); border-radius: 999px;
}
.walnut-status-msg .lni { animation: walnut-spin 1s linear infinite; display: inline-block; }
@keyframes walnut-spin { to { transform: rotate(360deg); } }

.walnut-dots { display: inline-flex; gap: 3px; }
.walnut-dots span {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--text-muted);
    animation: walnut-bounce 1.2s infinite ease-in-out;
}
.walnut-dots span:nth-child(2) { animation-delay: 0.15s; }
.walnut-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes walnut-bounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
    40% { transform: scale(1); opacity: 1; }
}

.walnut-footer {
    display: flex; gap: 0.55rem; padding: 0.75rem;
    border-top: 1px solid var(--border);
    background: var(--surface);
    border-radius: 0 0 14px 14px;
}
.walnut-footer input {
    flex: 1; border: 1px solid var(--border); border-radius: 10px;
    padding: 0.62rem 0.8rem; font-size: 0.9rem; outline: none;
    min-width: 0;
}
.walnut-footer input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
}
.walnut-footer button {
    flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px;
    background: var(--primary); color: #fff; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s, transform 0.1s;
}
.walnut-footer button:hover:not(:disabled) { background: var(--primary-dark); }
.walnut-footer button:active:not(:disabled) { transform: scale(0.9); }
.walnut-footer button:disabled { background: var(--border-strong); cursor: not-allowed; }

@media (max-width: 520px) {
    .walnut-popup {
        right: 10px; left: 10px; bottom: 10px;
        width: auto; max-width: none; height: min(78vh, 640px);
    }
}
/* Walnut reste accessible en drawer mode : dans le drawer le bouton prend la
   forme d'un item texte (le CSS .header-nav .icon-link à ≤ 1060px transforme
   déjà les icon-links en lignes pleine largeur). */

/* Badge produit sponsorisé (recherche) */
.product-card-sponsored {
    position: relative;
    border: 2px solid var(--accent) !important;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.15);
}
.product-card-sponsor-badge {
    position: absolute; top: 8px; left: 8px; z-index: 2;
    background: linear-gradient(135deg, var(--accent), #d97706);
    color: #fff;
    padding: 3px 9px; border-radius: 999px;
    font-size: 0.68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.3px;
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.3);
    display: inline-flex; align-items: center; gap: 0.25rem;
}
.product-card-sponsor-badge .lni { font-size: 0.8em; }

/* Scroll progress bar en haut de page */
.scroll-progress {
    position: fixed; top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    transform: scaleX(0); transform-origin: left center;
    z-index: 9999; pointer-events: none;
}

/* 3. TEXT GRADIENT */
.fx-gradient {
    background: linear-gradient(120deg, var(--primary) 0%, var(--accent) 100%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

/* ---- Bouton de fermeture du drawer mobile ---- */
.nav-close {
    display: none; /* caché par défaut (desktop) */
    position: absolute;
    top: 0.75rem; right: 0.75rem;
    width: 40px; height: 40px;
    background: var(--bg); border: 1px solid var(--border);
    border-radius: 50%;
    align-items: center; justify-content: center;
    color: var(--text); font-size: 1.1rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, transform 0.15s;
    z-index: 1;
}
.nav-close:hover { background: var(--danger); color: #fff; border-color: var(--danger); transform: rotate(90deg); }

/* Backdrop transparent — aucun effet visuel, juste zone cliquable pour fermer */
.nav-backdrop {
    background: transparent !important;
}

/* ---- Mobile/tablette drawer (≤ 1060px) : transformer icon-link en ligne texte ---- */
@media (max-width: 1060px) {
    /* Scroll interne robuste :
       - overflow-y: auto force le scroll vertical si le contenu dépasse
       - flex-shrink: 0 sur les enfants empêche le flex de les compresser pour rentrer
         dans la hauteur du drawer (sinon pas de débordement = pas de scroll)
       - touch-action: pan-y autorise explicitement le scroll vertical par swipe sur mobile
       - -webkit-overflow-scrolling: touch active le momentum iOS */
    .header-nav {
        overflow-y: auto !important;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
    }
    .header-nav > *,
    .header-nav .user-menu-dropdown,
    .header-nav .user-menu-dropdown > * {
        flex-shrink: 0;
    }
    /* Dropdown user en flow normal mobile, permettre hauteur naturelle pour déborder */
    .header-nav .user-menu-dropdown {
        max-height: none !important;
        overflow: visible !important;
    }

    /* Barre supérieure fixe du drawer : bandeau identité à gauche + bouton close
       à droite. Tous les deux en position: absolute → ne prennent pas de place
       dans le flux flex, pour laisser les liens commencer juste en-dessous. */
    .header-nav {
        padding-top: 4rem;  /* réserve l'espace pour la barre supérieure */
    }
    .header-nav .nav-close {
        display: inline-flex;
        position: absolute;
        top: 0.75rem;
        right: 0.75rem;
        width: 40px;
        margin: 0;
        /* z-index plus élevé que le bandeau identité (qui est absolute aussi)
           pour garantir le clic/tap sur le bouton de fermeture. */
        z-index: 3;
    }

    .header-nav .icon-link {
        width: 100%; height: auto;
        padding: 0.55rem 0.75rem; font-size: 0.95rem;
        justify-content: flex-start; gap: 0.55rem;
        border-radius: var(--radius);
    }
    .header-nav .icon-link-label { display: inline; }
    .header-nav .icon-link .icon-badge {
        position: static; margin-left: auto; top: auto; right: auto;
    }
    /* Cloche : popup désactivé en drawer */
    .notif-wrap .notif-popup { display: none !important; }
    .notif-wrap { width: 100%; }

    /* Bandeau identité : absolute en haut à gauche du drawer, à côté du X
       de fermeture. Le toggle sort ainsi du flux et apparaît fixe en haut —
       le dropdown (liste des liens) reste lui dans le flux, plus bas. */
    .user-menu-toggle {
        display: flex !important;
        align-items: center; gap: 0.5rem;
        position: absolute;
        top: 0.75rem;
        left: 0.75rem;
        /* 40px (bouton close) + 0.75rem (right du close) + 0.5rem (gap entre les deux)
           = 40 + 12 + 8 = 60px d'espace réservé à droite. */
        right: calc(40px + 1.25rem);
        padding: 0.35rem 0.5rem;
        background: linear-gradient(135deg, #ecfdf5, #f0fdfa);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        font-size: 0.95rem; font-weight: 600;
        color: var(--primary-dark);
        cursor: default;
        pointer-events: none;
        z-index: 2;
        overflow: hidden;
    }
    .user-menu-toggle > span:nth-child(2) {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .user-menu-toggle .avatar-circle {
        width: 32px; height: 32px; font-size: 0.8rem;
        flex-shrink: 0;
    }
    /* Cache le chevron (plus de toggle — dropdown toujours déplié en drawer) */
    .user-menu-toggle .lni-chevron-down {
        display: none;
    }

    .user-menu-dropdown a,
    .user-menu-dropdown button {
        padding: 0.55rem 0.75rem; font-size: 0.9rem;
    }
    .user-menu-dropdown .lni { font-size: 0.95em; }

    /* Dans le drawer : touch targets plus denses (globalement 44px en mobile,
       mais dans le drawer on prioritise le scroll-free → 38px) */
    .header-nav a,
    .header-nav button,
    .header-nav .icon-link,
    .user-menu-dropdown a,
    .user-menu-dropdown button { min-height: 38px; line-height: 1.25; }
}

/* ========================================================================
   Actualités — dropdown navbar + page dédiée
   ======================================================================== */

/* Dropdown navbar */
.news-menu { position: relative; display: inline-flex; align-items: center; }
.news-menu-toggle {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .45rem .8rem; background: transparent; color: inherit;
    border: none; border-radius: var(--radius); cursor: pointer;
    font: inherit; position: relative;
}
.news-menu-toggle:hover { background: var(--border); }
.news-menu-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.news-menu-dot {
    position: absolute; top: 6px; right: 22px;
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--danger, #ef4444);
    box-shadow: 0 0 0 2px var(--bg, #fff);
    animation: news-pulse 1.8s ease-out infinite;
}
@keyframes news-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(239,68,68,.55), 0 0 0 2px var(--bg, #fff); }
    70%  { box-shadow: 0 0 0 8px rgba(239,68,68,0),  0 0 0 2px var(--bg, #fff); }
    100% { box-shadow: 0 0 0 0 rgba(239,68,68,0),    0 0 0 2px var(--bg, #fff); }
}
.news-menu-dropdown {
    display: none; position: absolute; top: calc(100% + 6px); left: 0;
    min-width: 280px; background: var(--surface, #fff);
    border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: 0 10px 28px rgba(0,0,0,.12);
    padding: .35rem; z-index: 120;
}
.news-menu.open .news-menu-dropdown { display: block; }
.news-menu-dropdown hr { border: none; border-top: 1px solid var(--border); margin: .3rem 0; }
.news-menu-primary {
    display: flex; align-items: center; gap: .75rem;
    padding: .65rem .75rem; border-radius: calc(var(--radius) - 2px);
    text-decoration: none; color: inherit;
}
.news-menu-primary:hover { background: var(--border); }
.news-menu-primary .lni { font-size: 1.3rem; color: var(--primary); }
.news-menu-primary strong { display: block; }
.news-menu-primary small { color: var(--muted); font-size: .8rem; }
.news-menu-badge {
    margin-left: auto; background: var(--danger, #ef4444); color: #fff;
    font-size: .7rem; font-weight: 700; padding: .15rem .5rem;
    border-radius: 999px; letter-spacing: .03em;
}
.news-menu-sub {
    display: flex; align-items: center; gap: .5rem;
    padding: .55rem .75rem; border-radius: calc(var(--radius) - 2px);
    text-decoration: none; color: var(--muted); font-size: .9rem;
}
.news-menu-sub:hover { background: var(--border); color: inherit; }

/* Page Actualités — hero */
.news-hero {
    position: relative; overflow: hidden;
    margin: -1rem -1rem 2rem; padding: 3rem 1.25rem 3.25rem;
    background-color: #0f766e;
    background-image: linear-gradient(135deg, #0f766e 0%, #115e59 100%);
    color: #fff; border-radius: 0;
}
.news-hero[style*="--news-hero-bg"] {
    background-image: var(--news-hero-bg);
    background-size: cover; background-position: center;
}
.news-hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(15,118,110,.88) 0%, rgba(17,94,89,.9) 60%, rgba(0,0,0,.55) 100%);
}
.news-hero-inner {
    position: relative; max-width: 920px; margin: 0 auto;
}
.news-hero-kicker {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .35rem .7rem;
    background: rgba(255,255,255,.18); backdrop-filter: blur(4px);
    border-radius: 999px; font-size: .78rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
}
.news-hero-title {
    margin: .9rem 0 .6rem; font-size: clamp(1.8rem, 4vw, 2.6rem);
    line-height: 1.2; color: #fff;
}
.news-hero-sub {
    margin: 0 0 1.75rem; max-width: 620px;
    font-size: 1rem; line-height: 1.6; color: rgba(255,255,255,.9);
}
.news-hero-cta { display: flex; gap: .75rem; flex-wrap: wrap; }

.news-hero-profile {
    display: inline-flex; align-items: center; gap: 1rem;
    padding: .9rem 1.2rem;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.22);
    backdrop-filter: blur(8px);
    border-radius: 14px;
    max-width: 100%;
}
.news-avatar {
    width: 58px; height: 58px; border-radius: 50%;
    background: linear-gradient(135deg, #fff 0%, #e0f2f1 100%);
    color: var(--primary, #0f766e);
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 1.25rem; letter-spacing: .03em;
    flex-shrink: 0;
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
.news-profile-info { min-width: 0; }
.news-profile-name { font-size: 1.05rem; font-weight: 700; }
.news-profile-email {
    font-size: .88rem; color: rgba(255,255,255,.85);
    display: inline-flex; align-items: center; gap: .35rem;
    margin-top: .1rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 100%;
}
.news-profile-badge {
    display: inline-flex; align-items: center; gap: .35rem;
    margin-top: .45rem; padding: .2rem .6rem;
    background: rgba(16,185,129,.25);
    border: 1px solid rgba(16,185,129,.5);
    border-radius: 999px;
    font-size: .78rem; font-weight: 600;
}
.news-profile-badge-muted {
    background: rgba(255,255,255,.1);
    border-color: rgba(255,255,255,.3);
}
.news-profile-badge a { color: #fff; text-decoration: underline; }

/* Page Actualités — liste des publications */
.news-list { max-width: 920px; margin: 0 auto; }
.news-list-title {
    display: inline-flex; align-items: center; gap: .55rem;
    font-size: 1.25rem; margin: 0 0 1.25rem;
}
.news-list-title .lni { color: var(--primary, #0f766e); }

.news-card {
    background: var(--surface, #fff);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 1.5rem;
    transition: transform .25s ease, box-shadow .25s ease;
}
.news-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0,0,0,.08);
}
.news-card-media {
    position: relative;
    height: 180px;
    background-color: #0f766e;
    background-image: linear-gradient(135deg, #0f766e 0%, #134e4a 100%);
    background-size: cover; background-position: center;
}
.news-card-media[style*="--news-card-bg"] {
    background-image:
        linear-gradient(180deg, rgba(15,118,110,.35) 0%, rgba(15,23,42,.55) 100%),
        var(--news-card-bg);
}
.news-card-first .news-card-media { height: 240px; }
.news-card-tag {
    position: absolute; top: 14px; left: 14px;
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .3rem .7rem;
    background: #fff; color: var(--primary, #0f766e);
    font-size: .75rem; font-weight: 700;
    border-radius: 999px; letter-spacing: .04em;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
.news-card-body { padding: 1.4rem 1.5rem 1.6rem; }
.news-card-meta {
    font-size: .82rem; color: var(--muted);
    display: inline-flex; align-items: center; gap: .35rem;
    margin-bottom: .4rem;
}
.news-card-title {
    margin: 0 0 .8rem; font-size: 1.35rem; line-height: 1.3;
    color: var(--text, #111);
}
.news-card-content {
    font-size: .96rem; line-height: 1.65; color: var(--text, #111);
}
.news-card-content img { max-width: 100%; height: auto; border-radius: 8px; }
.news-card-content a { color: var(--primary, #0f766e); font-weight: 600; }
.news-card-content h2,
.news-card-content h3 { margin-top: 1.3rem; }

@media (max-width: 640px) {
    .news-hero { padding: 2.25rem 1rem 2.5rem; }
    .news-hero-profile { width: 100%; }
    .news-card-first .news-card-media { height: 180px; }
    .news-card-body { padding: 1.15rem 1.15rem 1.35rem; }

    /* Dropdown actualités mobile : occupe la largeur du drawer */
    .news-menu { width: 100%; }
    .news-menu-dropdown { position: static; box-shadow: none; min-width: 0; }
    .news-menu-dot { top: 10px; right: auto; left: 28px; }
}