/* ============================================================
   BATSIGN, en-tête public commun (topbar + menu + footer).
   Volontairement SANS reset global : peut être chargé par-dessus
   un autre CSS (ex: configurateur) sans en casser la mise en page.
   ============================================================ */

:root {
    --orange: #f47216; /* orange du logo */
    --gris: #4f4c4d;   /* gris du logo */
    --bg: #ffffff;
    --bg-doux: #f6f7f9;
    --surface: #ffffff;
    --bordure: #e7e9ee;
    --bordure-forte: #d4d8e0;
    --texte: #15181f;
    --texte-doux: #5b6472;
    --texte-faible: #8a92a0;
    --accent: #2563eb;
    --accent-fonce: #1d4ed8;
    --accent-doux: #eff4ff;
    --sombre: #11141b;
    --sombre-2: #1b2029;
    --rayon: 14px;
    --rayon-sm: 10px;
    --ombre: 0 1px 2px rgba(17, 20, 27, .04), 0 8px 24px rgba(17, 20, 27, .06);
    --ombre-forte: 0 12px 40px rgba(17, 20, 27, .16);
    --transition: .22s cubic-bezier(.4, 0, .2, 1);
    --largeur: 1200px;
}

/* box-sizing limité à l'en-tête pour ne pas perturber l'hôte */
.site-topbar, .site-topbar *, .site-entete, .site-entete * { box-sizing: border-box; }
.site-topbar a, .site-entete a { text-decoration: none; }

.lien-evitement {
    position: absolute; left: -9999px; top: 0; z-index: 200;
    background: var(--accent); color: #fff; padding: 12px 18px; border-radius: 0 0 var(--rayon-sm) 0;
}
.lien-evitement:focus { left: 0; }

/* ---------- Barre d'information supérieure ---------- */
.site-topbar { background: var(--sombre); color: rgba(255, 255, 255, .82); font-size: 13px; padding-top: env(safe-area-inset-top); }
.site-topbar-inner {
    max-width: var(--largeur); margin: 0 auto; padding: 8px clamp(16px, 4vw, 32px);
    display: flex; align-items: center; gap: 16px;
}
.topbar-tel { color: #fff; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.topbar-tel:hover { color: #8ab0ff; }
.topbar-mif { display: inline-flex; align-items: center; gap: 7px; color: rgba(255, 255, 255, .7); }
.topbar-mif::before { content: ""; width: 18px; height: 12px; border-radius: 2px; background: linear-gradient(to right, #0055a4 0 33%, #fff 33% 66%, #ef4135 66% 100%); display: inline-block; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.topbar-lien { color: rgba(255, 255, 255, .82); padding: 4px 10px; border-radius: 20px; transition: background var(--transition), color var(--transition); }
.topbar-lien:hover { color: #fff; background: rgba(255, 255, 255, .12); }

/* Icônes (compte + panier) : remplacent les mots, texte conservé pour les lecteurs d'écran */
.topbar-icone { display: inline-flex; align-items: center; justify-content: center; position: relative; padding: 5px 9px; }
.topbar-icone svg { display: block; }
.topbar-icone-img { display: block; width: 22px; height: 22px; object-fit: contain; filter: brightness(0) invert(1); }
.topbar-icone-texte { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.topbar-panier .badge-panier {
    position: absolute; top: -1px; right: -1px;
    background: var(--accent); color: #fff; font-weight: 700; font-size: 10px;
    min-width: 16px; height: 16px; border-radius: 20px; padding: 0 4px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 2px solid var(--sombre);
}
.topbar-panier .badge-panier[hidden] { display: none; }

/* ---------- En-tête principal ---------- */
.site-entete {
    position: sticky; top: 0; z-index: 100;
    background: rgba(255, 255, 255, .88);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--bordure);
}
.site-entete-inner {
    max-width: var(--largeur); margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px; padding: 14px clamp(16px, 4vw, 32px);
}
.site-logo { display: flex; align-items: center; line-height: 1; }
.site-logo-img { height: 40px; width: auto; display: block; }

.site-nav { display: flex; align-items: center; gap: 8px; }
.site-nav-liste { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.site-nav-item { position: relative; }
.site-nav-lien {
    display: flex; align-items: center; gap: 5px;
    padding: 9px 14px; border-radius: var(--rayon-sm);
    font-size: 15px; font-weight: 500; color: var(--texte-doux);
    transition: color var(--transition), background var(--transition);
    white-space: nowrap;
}
.site-nav-lien:hover, .site-nav-item.actif > .site-nav-lien { color: var(--texte); background: var(--bg-doux); }
.site-nav-fleche {
    width: 7px; height: 7px; border-right: 2px solid var(--orange); border-bottom: 2px solid var(--orange);
    transform: rotate(45deg) translateY(-2px); transition: transform var(--transition);
}
.site-nav-item.a-sous-menu:hover .site-nav-fleche { transform: rotate(-135deg) translateY(-2px); }

.site-sous-menu {
    position: absolute; top: calc(100% + 8px); left: 0; min-width: 250px;
    background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon);
    box-shadow: var(--ombre-forte); padding: 8px; list-style: none; margin: 0;
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.site-nav-item.a-sous-menu:hover .site-sous-menu,
.site-nav-item.a-sous-menu:focus-within .site-sous-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.site-sous-menu::before { content: ""; position: absolute; top: -8px; left: 0; right: 0; height: 8px; }
.site-sous-menu a {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 9px 12px; border-radius: var(--rayon-sm); font-size: 14px; color: var(--texte-doux);
    transition: background var(--transition), color var(--transition);
}
.site-sous-menu a:hover { background: var(--accent-doux); color: var(--accent-fonce); }

.site-burger {
    display: none; flex-direction: column; gap: 5px; width: 44px; height: 44px;
    background: none; border: none; cursor: pointer; padding: 10px; border-radius: var(--rayon-sm);
}
.site-burger span { display: block; height: 2px; width: 100%; background: var(--texte); border-radius: 2px; transition: transform var(--transition), opacity var(--transition); }
.site-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.site-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Pied de page ---------- */
.site-pied { background: var(--sombre); color: rgba(255, 255, 255, .7); margin-top: 40px; }
.site-pied a { text-decoration: none; }
.site-pied-inner {
    max-width: var(--largeur); margin: 0 auto; padding: clamp(40px, 6vw, 64px) clamp(16px, 4vw, 32px);
    display: grid; grid-template-columns: 1.6fr 1.2fr 1fr 1fr; gap: clamp(24px, 4vw, 44px); box-sizing: border-box;
}
.site-pied-inner * { box-sizing: border-box; }
.site-pied-bloc h3 { color: #fff; font-size: 14px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 14px; }
.site-pied-logo { font-weight: 800; font-size: 22px; color: #fff; letter-spacing: -.03em; display: block; margin-bottom: 12px; }
.site-pied-bloc p { font-size: 14px; margin: 0; max-width: 38ch; }
.site-pied-bloc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.site-pied-bloc li { font-size: 14px; }
.site-pied-bloc a { font-size: 14px; color: rgba(255, 255, 255, .7); transition: color var(--transition); }
.site-pied-bloc a:hover { color: #fff; }
.site-pied-bas { border-top: 1px solid rgba(255, 255, 255, .1); }
.site-pied-bas span { display: block; max-width: var(--largeur); margin: 0 auto; padding: 20px clamp(16px, 4vw, 32px); font-size: 13px; color: rgba(255, 255, 255, .5); text-align: center; }

@media (max-width: 980px) {
    .site-pied-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    .site-pied-inner { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
    .site-burger { display: flex; }
    /* Le menu mobile (.site-nav) est en position:fixed. Un ancêtre avec
       backdrop-filter crée un bloc conteneur qui "piège" le fixed : il se
       limiterait alors à la boîte de l'en-tête au lieu de couvrir l'écran.
       On retire donc le flou ici (fond opaque) ; ça corrige aussi Safari/iOS. */
    .site-entete {
        -webkit-backdrop-filter: none; backdrop-filter: none;
        background: var(--surface);
    }
    /* Le burger (croix de fermeture) doit rester au-dessus de l'overlay du menu. */
    .site-burger { position: relative; z-index: 95; }
    .site-nav {
        position: fixed; inset: 0; top: 0; flex-direction: column; align-items: stretch; justify-content: flex-start;
        gap: 0; background: var(--surface); padding: calc(80px + env(safe-area-inset-top)) 20px 40px;
        overflow-y: auto; overflow-x: hidden;
        transform: translateX(100%); transition: transform var(--transition); z-index: 90;
    }
    .site-nav.ouvert { transform: translateX(0); }
    .site-nav-liste { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
    .site-nav-item { border-bottom: 1px solid var(--bordure); }
    .site-nav-lien { justify-content: space-between; padding: 15px 8px; font-size: 16px; white-space: normal; }
    .site-nav-item.a-sous-menu .site-nav-fleche { transform: rotate(45deg); }
    .site-nav-item.a-sous-menu.deplie .site-nav-fleche { transform: rotate(-135deg); }
    .site-sous-menu {
        position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none;
        background: var(--bg-doux); border-radius: var(--rayon-sm); padding: 4px; margin: 0 0 10px;
        max-height: 0; overflow: hidden; transition: max-height var(--transition), margin var(--transition); }
    .site-nav-item.a-sous-menu.deplie .site-sous-menu { max-height: 600px; }
    .site-sous-menu::before { display: none; }
    .topbar-mif { display: none; }
}