/* ==========================================================================
   PAPETERIE SÉNÉGAL — LAYOUT GLOBAL
   Bandeau utilitaire · en-tête (desktop 2 rangées / mobile dédié) ·
   recherche · mega-menu rayons · drawer mobile · pied de page · bouton flottant.
   ========================================================================== */

/* ══ BANDEAU UTILITAIRE ════════════════════════════════════════════════════ */

.topbar {
    background: var(--secondary);
    color: rgba(255, 255, 255, 0.75);
    font-size: var(--fs-label);
}
.topbar__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-6);
    min-height: 34px;
    padding-block: 0.375rem;
}
.topbar__item { display: flex; align-items: center; gap: 0.375rem; white-space: nowrap; }
.topbar__item i { color: var(--accent); }
.topbar a { color: #fff; font-weight: var(--fw-semi); }
.topbar a:hover { color: var(--accent); }
@media (max-width: 767.98px) {
    .topbar__inner { justify-content: center; gap: var(--sp-4); }
    .topbar__item--secondary { display: none; }
}

/* ══ EN-TÊTE ═══════════════════════════════════════════════════════════════ */

.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}
/* Ombre appliquée au défilement uniquement (posée par app.js) */
.site-header.is-stuck { box-shadow: var(--shadow-md); }

.header-main {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    min-height: 68px;
    padding-block: var(--sp-3);
}

/* ── Marque ── */
.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    flex-shrink: 0;
    color: var(--text);
}
.brand:hover { color: var(--text); }
.brand__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px; height: 42px;
    flex-shrink: 0;
    border-radius: var(--r-sm);
    background: var(--primary);
    color: #fff;
    font-size: 1.125rem;
    overflow: hidden;
}
.brand__logo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.brand__text {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: var(--fw-bold);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--text);
}
.brand__sub {
    display: block;
    font-size: 0.6875rem;
    font-weight: var(--fw-semi);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: 2px;
}
@media (max-width: 400px) {
    .brand__words { display: none; }
}

/* ── Recherche globale (présente sur TOUTES les pages) ── */
.header-search { flex: 1; min-width: 0; max-width: 620px; }
.search-form {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 0.25rem 0.25rem 0.25rem var(--sp-4);
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--r-full);
    transition: border-color var(--t-fast) var(--ease),
                box-shadow var(--t-fast) var(--ease),
                background var(--t-fast) var(--ease);
}
.search-form:focus-within {
    background: var(--surface);
    border-color: var(--primary);
    box-shadow: var(--ring);
}
.search-form__icon { color: var(--text-muted); font-size: var(--fs-sm); flex-shrink: 0; }
.search-form__input {
    flex: 1;
    min-width: 0;
    padding: 0.5rem 0;
    border: 0;
    background: transparent;
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
}
.search-form__input:focus { outline: none; }
.search-form__input::placeholder { color: var(--text-muted); }
.search-form__clear {
    display: none;
    border: 0;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: var(--sp-2);
    line-height: 1;
}
.search-form__clear:hover { color: var(--text); }
.search-form.has-value .search-form__clear { display: inline-flex; }
.search-form__submit {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    flex-shrink: 0;
    min-height: 38px;
    padding: 0 var(--sp-5);
    border: 0;
    border-radius: var(--r-full);
    background: var(--primary);
    color: #fff;
    font-family: var(--font-sans);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semi);
    cursor: pointer;
    transition: background var(--t-fast) var(--ease);
}
.search-form__submit:hover { background: var(--primary-dark); }

/* ── Actions d'en-tête ──
   margin-left: auto les colle à droite même quand .header-search est
   masquée (mobile/tablette < lg) : sans elle, plus aucun élément flex:1 ne
   reste dans .header-main pour repousser Panier/Menu loin de la marque. */
.header-actions { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; margin-left: auto; }

.header-link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-sm);
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semi);
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.header-link:hover { background: var(--surface-alt); color: var(--text); }
.header-link i { font-size: 1rem; }
.header-link--wa i { color: var(--whatsapp-dark); font-size: 1.125rem; }
.header-link__label { display: none; }
@media (min-width: 1100px) { .header-link__label { display: inline; } }

/* Panier */
.cart-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: 42px;
    padding: 0 var(--sp-4);
    border-radius: var(--r-sm);
    background: var(--primary);
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semi);
    transition: background var(--t-fast) var(--ease), box-shadow var(--t-base) var(--ease);
}
.cart-btn:hover { background: var(--primary-dark); color: #fff; box-shadow: var(--shadow-sm); }
.cart-btn__label { display: none; }
@media (min-width: 992px) { .cart-btn__label { display: inline; } }
.cart-btn__count {
    position: absolute;
    top: -5px; right: -5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px; height: 20px;
    padding: 0 5px;
    border-radius: var(--r-full);
    background: var(--accent);
    color: #3B2100;
    font-size: 0.6875rem;
    font-weight: var(--fw-bold);
    box-shadow: 0 0 0 2px var(--surface);
}
.cart-btn__count.is-bumping { animation: ue-bump 400ms var(--ease); }
@keyframes ue-bump {
    0%, 100% { transform: scale(1); }
    35%      { transform: scale(1.35); }
}

/* Bascule mode clair / sombre : piste + curseur qui glisse, avec les deux
   icônes toujours visibles (métaphore jour/nuit immédiatement lisible,
   contrairement à une seule icône qui peut passer pour un bouton réglages). */
.theme-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 56px; height: 32px;
    padding: 0 7px;
    border: 1px solid var(--border);
    border-radius: var(--r-full);
    background: var(--surface-alt);
    cursor: pointer;
    flex-shrink: 0;
}
.theme-switch:hover { border-color: var(--border-strong); }
.theme-switch:focus-visible { outline: none; box-shadow: var(--ring); }

.theme-switch__icon {
    position: relative;
    z-index: 1;
    font-size: 0.75rem;
    color: var(--text-muted);
    pointer-events: none;
    transition: color var(--t-fast) var(--ease);
}
.theme-switch__icon--sun { color: var(--accent); }

.theme-switch__thumb {
    position: absolute;
    top: 3px; left: 3px;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    transition: transform var(--t-base) var(--ease);
}
/* Sombre : le curseur glisse sur la lune, qui devient la couleur active. */
.theme-switch[aria-checked="true"] .theme-switch__thumb { transform: translateX(24px); }
.theme-switch[aria-checked="true"] .theme-switch__icon--sun { color: var(--text-muted); }
.theme-switch[aria-checked="true"] .theme-switch__icon--moon { color: var(--primary-400); }

/* Déclencheur du menu mobile */
.burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px; height: 42px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--text);
    font-size: 1.0625rem;
    cursor: pointer;
}
.burger:hover { background: var(--surface-alt); }
@media (min-width: 992px) { .burger { display: none; } }

/* ══ RANGÉE DE NAVIGATION (desktop) ════════════════════════════════════════ */

.header-nav {
    display: none;
    border-top: 1px solid var(--border);
    background: var(--surface);
}
@media (min-width: 992px) { .header-nav { display: block; } }

.header-nav__inner {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    position: relative;
}
.nav-link-ue {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-3);
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.nav-link-ue:hover { color: var(--primary); border-bottom-color: var(--primary-200); }
.nav-link-ue.is-active { color: var(--primary); border-bottom-color: var(--primary); font-weight: var(--fw-semi); }
.nav-link-ue--strong {
    background: var(--primary-50);
    color: var(--primary-dark);
    border-radius: var(--r-sm);
    margin-right: var(--sp-3);
    font-weight: var(--fw-semi);
    border-bottom: 0;
    padding-inline: var(--sp-4);
}
.nav-link-ue--strong:hover { background: var(--primary-100); border-bottom-color: transparent; }
/* Mise en avant d'une entrée de navigation (offre phare : packs scolaires) */
.nav-link-ue--accent {
    color: var(--accent-dark);
    font-weight: var(--fw-semi);
}
.nav-link-ue--accent i { color: var(--accent); }
.nav-link-ue--accent:hover { color: var(--accent-dark); border-bottom-color: var(--accent); }
.nav-link-ue__caret { font-size: 0.625rem; transition: transform var(--t-base) var(--ease); }
[aria-expanded="true"] > .nav-link-ue__caret,
.nav-link-ue[aria-expanded="true"] .nav-link-ue__caret { transform: rotate(180deg); }
.nav-spacer { margin-left: auto; }

/* ══ MEGA-MENU RAYONS ══════════════════════════════════════════════════════ */

.mega {
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    display: none;
    padding: var(--sp-6);
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 0;
    border-radius: 0 0 var(--r-md) var(--r-md);
    box-shadow: var(--shadow-xl);
    max-height: min(72vh, 620px);
    overflow-y: auto;
    z-index: 5;
}
.mega.is-open { display: block; animation: ue-mega-in var(--t-base) var(--ease); }
@keyframes ue-mega-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}
.mega__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-6) var(--sp-8);
}
.mega__col { min-width: 0; }
.mega__head {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding-bottom: var(--sp-2);
    margin-bottom: var(--sp-2);
    border-bottom: 1px solid var(--border);
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
    color: var(--text);
}
.mega__head:hover { color: var(--primary); }
.mega__head i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px; height: 26px;
    flex-shrink: 0;
    border-radius: var(--r-xs);
    background: var(--primary-50);
    color: var(--primary);
    font-size: var(--fs-label);
}
.mega__sub {
    display: block;
    padding: 0.25rem 0;
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    line-height: var(--lh-snug);
    transition: color var(--t-fast) var(--ease), padding-left var(--t-fast) var(--ease);
}
.mega__sub:hover { color: var(--primary); padding-left: 4px; }
.mega__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    flex-wrap: wrap;
    margin-top: var(--sp-6);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--border);
}

/* ══ DRAWER MOBILE ═════════════════════════════════════════════════════════
   En-tête mobile pensé pour le pouce : recherche pleine largeur sous la barre,
   navigation dans un panneau latéral (offcanvas Bootstrap). */

.mobile-search {
    display: block;
    padding: 0 0 var(--sp-3);
}
@media (min-width: 992px) { .mobile-search { display: none; } }

.drawer { width: min(340px, 88vw) !important; }
.drawer .offcanvas-header {
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--border);
}
.drawer .offcanvas-body { padding: 0; }
.drawer__section { padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border); }
.drawer__label {
    font-size: var(--fs-label);
    font-weight: var(--fw-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: var(--sp-3);
}
.drawer__link {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) 0;
    color: var(--text);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    min-height: 44px;
}
.drawer__link i:first-child {
    width: 22px;
    text-align: center;
    color: var(--text-muted);
}
.drawer__link:hover { color: var(--primary); }
.drawer__link:hover i:first-child { color: var(--primary); }
.drawer__link .drawer__chev { margin-left: auto; color: var(--border-strong); font-size: 0.75rem; }

/* Bascule thème dans le tiroir : même rangée que les liens, avec libellé
   explicite (contrairement à l'icône seule de l'en-tête desktop, une cible
   tactile pleine largeur est plus sûre et plus claire sur mobile/tablette). */
.drawer-theme {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    min-height: 44px;
}
.drawer-theme__label {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    color: var(--text);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
}
.drawer-theme__label i { width: 22px; text-align: center; color: var(--text-muted); }

/* Accordéon des rayons — <details> natif : zéro JS, accessible clavier. */
.drawer-acc { border-bottom: 1px solid var(--border); }
.drawer-acc__summary {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-5);
    min-height: 48px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--text);
    cursor: pointer;
    list-style: none;
}
.drawer-acc__summary::-webkit-details-marker { display: none; }
.drawer-acc__summary i:first-child { width: 22px; text-align: center; color: var(--primary); }
.drawer-acc__summary::after {
    content: '\f078';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    margin-left: auto;
    font-size: 0.6875rem;
    color: var(--text-muted);
    transition: transform var(--t-base) var(--ease);
}
.drawer-acc[open] > .drawer-acc__summary::after { transform: rotate(180deg); }
/* Rayon sans sous-catégorie : le même gabarit visuel, mais en lien direct —
   chevron de droite au lieu du chevron d'accordéon. */
.drawer-acc__summary--link {
    border-bottom: 1px solid var(--border);
    text-decoration: none;
}
.drawer-acc__summary--link::after {
    content: '\f105';
    transform: none;
    color: var(--border-strong);
}
.drawer-acc__summary--link:hover { color: var(--primary); background: var(--primary-50); }
.drawer-acc[open] > .drawer-acc__summary { color: var(--primary); background: var(--primary-50); }
.drawer-acc__body { padding: var(--sp-2) var(--sp-5) var(--sp-3) 3.25rem; background: var(--surface-alt); }
.drawer-acc__item {
    display: block;
    padding: 0.5rem 0;
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    min-height: 36px;
}
.drawer-acc__item:hover { color: var(--primary); }
.drawer-acc__all { font-weight: var(--fw-semi); color: var(--primary); }

/* ══ PIED DE PAGE ══════════════════════════════════════════════════════════ */

.site-footer {
    margin-top: var(--section-y);
    background: var(--secondary);
    color: rgba(255, 255, 255, 0.66);
    font-size: var(--fs-xs);
}
.site-footer__top { padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.site-footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-8);
}
@media (min-width: 640px) {
    .site-footer__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
    .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.1fr 1fr; gap: var(--sp-6); }
}
.site-footer h2, .site-footer h3 {
    color: #fff;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
    letter-spacing: 0.02em;
    margin-bottom: var(--sp-4);
}
.site-footer p { color: rgba(255, 255, 255, 0.6); line-height: var(--lh-body); }
.site-footer a { color: rgba(255, 255, 255, 0.66); }
.site-footer a:hover { color: #fff; }
.footer-brand { display: inline-flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.footer-brand__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 1rem;
    overflow: hidden;
}
.footer-brand__logo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.footer-brand__text {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: var(--fw-bold);
    color: #fff;
}
.footer-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.footer-list a {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 0.3125rem 0;
    min-height: 32px;
}
.footer-list a::before {
    content: '\f105';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.625rem;
    color: rgba(255, 255, 255, 0.3);
    transition: transform var(--t-fast) var(--ease);
}
.footer-list a:hover::before { transform: translateX(2px); color: var(--accent); }
.footer-contact { list-style: none; padding: 0; margin: 0 0 var(--sp-4); }
.footer-contact li { display: flex; align-items: flex-start; gap: var(--sp-3); padding: 0.3125rem 0; }
.footer-contact i { width: 18px; text-align: center; color: #fff; margin-top: 3px; }

/* Réseaux sociaux : rangée à part dans la liste de contact — libellé puis
   icônes rondes (pas la puce + texte des autres lignes). */
.footer-social { flex-direction: column; align-items: flex-start; gap: var(--sp-3); padding-top: var(--sp-3); }
.footer-social__label {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semi);
    color: rgba(255, 255, 255, 0.75);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.footer-social__links { display: flex; gap: var(--sp-2); }
.footer-social__links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.85);
    font-size: 1rem;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.footer-social__links a:hover { background: var(--accent); color: var(--secondary); transform: translateY(-2px); }
.footer-social__links i { width: auto; margin-top: 0; color: inherit; }
.site-footer__bottom {
    padding-block: var(--sp-5);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    flex-wrap: wrap;
    color: rgba(255, 255, 255, 0.45);
    font-size: var(--fs-label);
}
.footer-legal { display: flex; gap: var(--sp-4); flex-wrap: wrap; }

/* ══ BOUTON WHATSAPP FLOTTANT ══════════════════════════════════════════════
   Plus d'animation en boucle : un simple libellé qui se déploie au survol. */

.wa-float {
    position: fixed;
    right: var(--sp-4);
    bottom: var(--sp-4);
    z-index: var(--z-float);
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    height: 54px;
    padding: 0 1.0625rem;
    border-radius: var(--r-full);
    background: var(--whatsapp);
    color: #06371C;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
    box-shadow: var(--shadow-lg);
    transition: background var(--t-base) var(--ease),
                box-shadow var(--t-base) var(--ease),
                transform var(--t-base) var(--ease);
}
.wa-float i { font-size: 1.5rem; }
.wa-float__label {
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    opacity: 0;
    transition: max-width var(--t-slow) var(--ease), opacity var(--t-base) var(--ease);
}
.wa-float:hover, .wa-float:focus-visible {
    background: var(--whatsapp-dark);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: var(--shadow-xl);
}
.wa-float:hover .wa-float__label,
.wa-float:focus-visible .wa-float__label { max-width: 190px; opacity: 1; }
/* Sur mobile, le bouton flottant se retire pendant que l'utilisateur défile
   vers le bas (il masquerait sinon les boutons « Ajouter au panier » situés
   dans le coin bas-droit) et revient dès l'arrêt ou la remontée. */
.wa-float.is-hidden {
    transform: translateY(120%);
    opacity: 0;
    pointer-events: none;
}
@media (max-width: 575.98px) {
    .wa-float { height: 50px; padding: 0 0.875rem; right: var(--sp-3); bottom: var(--sp-3); }
    .wa-float__label { display: none; }
}