@charset "UTF-8"; /* ========================================================================= Cave Coste — Refonte HEADER MOBILE (mockup-mobile-header.html) Présentation uniquement. Barre visible en dessous de 980px (cf. menus.css). Lots : 1 (bandeau promo + barre) · 2 (tiroir burger) · 3 (recherche) ARCHITECTURE OVERLAYS : le tiroir (.drawer + .drawer-scrim) et la recherche (.search-scrim) sont DÉPLACÉS en enfants directs de par le JS (cf. inc/templates/v4/header.inc.php). Raison : à l'intérieur de #header_mobile (lui-même position:fixed et porteur d'un transform de hide-on-scroll), tout position:fixed descendant se réfère à la boîte du header au lieu du viewport → overlays écrasés en haut, sans voile plein écran. En enfants de (transform:none, overflow:visible), le position:fixed reprend le viewport entier. Leurs sélecteurs ci-dessous ne sont donc PAS préfixés par #header_mobile. Les éléments de la BARRE (.m-promo, .m-top, .m-ico…) restent, eux, dans #header_mobile. ========================================================================= */ :root{ --hm-text:var(--c-text); --hm-text-dark:var(--c-text-strong); --hm-primary:var(--c-ink); --hm-primary-dark:var(--c-ink-hover); --hm-primary-svg:var(--c-accent); --hm-border:var(--c-border-input); --hm-bg-light:var(--c-bg-soft); --hm-bg-grey:var(--c-bg-grey); --hm-success:var(--c-success); } /* Le wrapper mobile : on annule le padding-top hérité et on cale la pile. Bug régression 20260618 (D1-7) : le bas du header (rangée recherche) butait sur le contenu sans aucune séparation → une « bande blanche » disgracieuse lisible comme un trou. On donne au header une arête basse NETTE (1px) + une ombre douce d'élévation : le header se détache proprement du contenu comme un bloc unique. Le trait interne sous la rangée d'icônes (.m-top) est retiré plus bas pour ne garder QU'UNE seule ligne, au bas du header. */ #header_mobile{ padding-top:0 !important; background:#fff; border-bottom:1px solid var(--hm-border); box-shadow:0 3px 8px rgba(0,0,0,.05); } /* #2 (round 2) — Pages catalogue + résultats de recherche. CHANGEMENT DE SPEC : le header n'est PLUS masqué entièrement. Il s'affiche au chargement (comme partout), mais sur ces pages il ne RÉAPPARAÎT PAS au scroll vers le haut — il ne se ré-affiche qu'au retour tout en haut de la page. Le comportement est piloté en JS dans index.php (auto-hide #header_mobile) : l'attribut data-hide-catalogue="true" sert de drapeau « pas de réapparition au scroll-up ». La translation hors écran utilise la classe .header--hidden (transform: translateY(-100%)) déjà définie dans site.css. Aucune règle CSS de masquage dédiée ici : on laisse le header dans le flux fixe normal. */ /* ---- Bandeau promo : SUPPRIMÉ (pt2, retours Thomas 28/07) ---- Le .m-promo (« Sélection & conseil — vallée du Rhône ») est retiré du markup (header.inc.php) en même temps que le .header-top desktop : même fond encre, même registre de message. Règle retirée avec lui pour ne pas laisser de CSS mort ; le markup est récupérable dans l'historique git si besoin. */ /* ---- Barre principale : burger / logo / icônes ---- */ /* Plus de border-bottom ici (régression 20260618 D1-7) : la seule séparation est désormais au BAS du header (#header_mobile border-bottom + ombre), pour que logo + icônes + recherche forment un bloc blanc cohérent. */ #header_mobile .m-top{ background:#fff; display:flex; align-items:center; gap:10px; padding:11px 14px; position:relative; z-index:5; } #header_mobile .m-burger{ background:none; border:none; cursor:pointer; line-height:0; padding:4px; flex-shrink:0; } #header_mobile .m-burger img{ width:26px; height:26px; display:block; } #header_mobile .m-logo{ flex:1; text-align:center; line-height:0; } #header_mobile .m-logo img{ height:38px; width:auto; display:inline-block; } #header_mobile .m-icons{ display:flex; align-items:center; gap:14px; flex-shrink:0; } #header_mobile .m-ico{ background:none; border:none; cursor:pointer; position:relative; line-height:0; padding:2px; display:inline-flex; align-items:center; } #header_mobile .m-ico img{ display:block; } #header_mobile .m-ico.account img{ width:33px; height:33px; } #header_mobile .m-ico.cart img{ width:36px; height:36px; } #header_mobile .m-ico .cart-badge{ position:absolute; top:-5px; right:-7px; background:var(--hm-primary); color:#fff; font-size:9.5px; font-weight:700; min-width:17px; height:17px; padding:0 3px; border-radius:9px; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 2px #fff; } /* ---- Barre de recherche mobile (retour 12/06 #12) ---- Déclencheur en forme de champ posé sur sa propre ligne sous la barre principale ; au tap il ouvre l'overlay de recherche plein écran (autocomplétion + historique). Forme « S3 » (validée 14/06) : vrai champ blanc, coins nets (radius site 8px), bord discret — plus de pastille « stade ». La ligne hôte .m-searchrow gère l'inset latéral (indépendant du box-sizing). */ /* Rangée slim (retour 14/06 #4) : la rangée recherche mangeait ~63px en haut de page mobile. On resserre padding/hauteur/police (~38px) ; le mode « loupe » (pas de rangée) reste inchangé. L'offset header suit via --header-mobile-h. */ #header_mobile .m-searchrow{ padding:5px 14px 7px; background:#fff; box-sizing:border-box; } #header_mobile .m-searchbar{ display:flex; align-items:center; gap:9px; width:100%; box-sizing:border-box; background:#fff; border:1px solid #e6ddcb; border-bottom:2px solid var(--clr-or); border-radius:var(--radius-s) var(--radius-s) 0 0; padding:9px 13px; margin:0; cursor:text; font-family:inherit; text-align:left; color:#8a8278; -webkit-tap-highlight-color:transparent; } #header_mobile .m-searchbar svg{ width:18px; height:18px; flex-shrink:0; color:var(--c-ink); } #header_mobile .m-searchbar svg path{ stroke: var(--c-ink); } #header_mobile .m-searchbar-ph{ font-size:13px; line-height:1; color:#8a8278; } /* ---- Tiroir burger (Lot 2) — enfant direct de ---- */ .drawer-scrim{ position:fixed; inset:0; background:rgba(0,0,0,.45); opacity:0; visibility:hidden; transition:opacity .25s; z-index:9998; } .drawer{ position:fixed; top:0; left:0; bottom:0; width:84%; max-width:330px; height:100vh; height:100dvh; /* Firefox/Chrome Android : suit la zone visible (barre d'adresse) — sinon les derniers liens (FAQ, livraisons, Cave Coste) tombent sous l'ecran */ background:#fff; transform:translateX(-100%); transition:transform .28s ease; z-index:9999; display:flex; flex-direction:column; box-shadow:6px 0 26px rgba(0,0,0,.2); overflow:hidden; } body.hm-drawer-open .drawer-scrim{ opacity:1; visibility:visible; } body.hm-drawer-open .drawer{ transform:translateX(0); } body.hm-drawer-open{ overflow:hidden; } .dr-account{ background:linear-gradient(135deg,#1a0a0f 0%,var(--clr-ink) 55%,var(--clr-ink-dark) 140%); color:#fff; padding:18px 16px 16px; position:relative; } .dr-close{ position:absolute; top:12px; right:12px; background:rgba(255,255,255,.14); border:none; color:#fff; width:28px; height:28px; border-radius:50%; font-size:16px; cursor:pointer; line-height:1; } .dr-acc-row{ display:flex; align-items:center; gap:12px; } .dr-avatar{ width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.16); border:2px solid rgba(255,255,255,.3); display:flex; align-items:center; justify-content:center; flex-shrink:0; line-height:0; } .dr-avatar img{ width:30px; height:30px; } .dr-greet{ font-size:17px; font-weight:700; color:#fff; line-height:1.2; } .dr-sub{ font-size:11.5px; color:rgba(255,255,255,.7); } .dr-acc-links{ display:flex; gap:7px; margin-top:13px; } .dr-acc-links a{ flex:1; text-align:center; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15); border-radius:var(--radius-s); padding:8px 4px; font-size:11px; font-weight:700; color:#fff; text-decoration:none; } .dr-login-btn{ display:block; margin-top:13px; background:#fff; color:var(--clr-or-text); text-align:center; border-radius:var(--radius-s); padding:10px; font-weight:700; font-size:13.5px; text-decoration:none; } .dr-nav{ flex:1; min-height:0; overflow-y:auto; padding:8px 0; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; touch-action:pan-y; } .dr-sec-lbl{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:#aaa; padding:14px 18px 6px; } .dr-link{ display:flex; align-items:center; gap:12px; padding:13px 18px; font-size:15px; font-weight:600; color:var(--hm-text-dark); border-bottom:1px solid #f4f4f4; text-decoration:none; } .dr-link:active{ background:var(--hm-bg-light); } .dr-link .ic{ width:20px; text-align:center; flex-shrink:0; line-height:0; } .dr-link .ic svg{ width:20px; height:20px; display:block; margin:0 auto; stroke:var(--clr-or); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } .dr-link.feature{ color:var(--clr-or-text); } .dr-link .tag{ margin-left:auto; background:var(--clr-ink); color:#fff; font-size:9px; font-weight:700; padding:2px 7px; border-radius:9px; text-transform:uppercase; } .dr-foot{ background:var(--hm-bg-light); border-top:1px solid var(--c-line); padding:14px 18px; } .dr-tel{ display:flex; align-items:center; gap:9px; font-weight:700; color:var(--clr-or-text); font-size:15px; text-decoration:none; } .dr-tel svg{ width:18px; height:18px; display:block; stroke:var(--clr-or); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; } .dr-soc{ display:flex; align-items:center; gap:8px; margin-top:6px; } .dr-soc a{ line-height:0; color:#8a8a8a; display:flex; align-items:center; justify-content:center; width:40px; height:40px; } .dr-soc svg{ width:21px; height:21px; display:block; } /* ---- Recherche plein écran (Lot 3) — enfant direct de ---- */ .search-scrim{ position:fixed; inset:0; height:100vh; height:100dvh; /* Android : zone visible (cf .drawer) */ background:#fff; opacity:0; visibility:hidden; transition:opacity .2s; z-index:9999; display:flex; flex-direction:column; } body.hm-search-open .search-scrim{ opacity:1; visibility:visible; } body.hm-search-open{ overflow:hidden; } .se-top{ display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--hm-border); } .se-box{ flex:1; display:flex; align-items:center; gap:9px; background:transparent; border:0; border-bottom:1.5px solid var(--c-ink); border-radius:0; padding:0 2px 8px; } .se-box svg{ width:18px; height:18px; flex-shrink:0; color:var(--c-ink); } .se-box svg path{ stroke: var(--c-ink); } .se-box input{ border:none; background:none; outline:none; font:inherit; font-size:14px; width:100%; color:var(--hm-text-dark); } .se-cancel{ background:none; border:none; color:var(--clr-or-text); font-weight:700; font-size:13.5px; cursor:pointer; flex-shrink:0; } .se-body{ padding:16px; overflow-y:auto; box-sizing:border-box; overflow-x:hidden; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; touch-action:pan-y; } .se-lbl{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:#aaa; margin:4px 0 10px; } .se-tags{ display:flex; flex-wrap:wrap; gap:8px; } .se-tags a{ background:var(--hm-bg-light); border:1px solid var(--c-line); color:var(--clr-or-text); font-size:12.5px; font-weight:600; padding:7px 13px; border-radius:var(--radius-s); text-decoration:none; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* #6 — Bloc « Recherches récentes » : réutilise .se-lbl + .se-tags. En-tête avec le libellé à gauche et le lien « Effacer » à droite. */ .se-history{ margin-bottom:18px; } .se-history-head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; } .se-history-head .se-lbl{ margin:4px 0 10px; } .se-history-clear{ background:none; border:none; cursor:pointer; flex-shrink:0; color:var(--clr-or-text); font-weight:700; font-size:11.5px; text-transform:uppercase; letter-spacing:.5px; padding:0; } /* #11 — Pastille d'historique = lien + croix de suppression unitaire. Reprend le look de .se-tags a mais en conteneur flex (le lien à gauche, la croix à droite), pour pouvoir supprimer une entrée sans tout effacer. */ #hm-search-history-tags .se-hist-chip{ display:inline-flex; align-items:center; max-width:100%; background:var(--hm-bg-light); border:1px solid var(--c-line); border-radius:var(--radius-s); overflow:hidden; } #hm-search-history-tags .se-hist-chip a{ background:none; border:none; border-radius:0; color:var(--clr-or-text); font-size:12.5px; font-weight:600; padding:7px 6px 7px 13px; text-decoration:none; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #hm-search-history-tags .se-hist-del{ display:inline-flex; align-items:center; justify-content:center; background:none; border:none; cursor:pointer; flex-shrink:0; color:#a98e6b; font-size:17px; line-height:1; font-weight:400; padding:4px 11px 5px 6px; align-self:stretch; } /* pt13d (29/07) — SCINDÉ : :focus-visible reste hors media. Ce tiroir est le contexte 100 % tactile du site : une croix restait dorée après le moindre effleurement. cf. pt11-survol-tactile (site.css). */ #hm-search-history-tags .se-hist-del:focus-visible{ color:var(--clr-or); } @media (hover: hover){ #hm-search-history-tags .se-hist-del:hover{ color:var(--clr-or); } } /* Les overlays sont déplacés sous ; on s'assure qu'ils ne s'affichent QUE en contexte mobile (la barre #header_mobile n'existe qu'en <980px, mais les overlays vivant désormais sous body, on les masque explicitement au-delà pour ne jamais polluer le desktop). */ @media (min-width:981px){ .drawer, .drawer-scrim, .search-scrim{ display:none !important; } } /* Sécurité : si JS désactivé, le tiroir/overlay ne piègent pas la page */ .drawer, .drawer-scrim, .search-scrim{ pointer-events:auto; } /* =================================================================== MENU « La cave » — accordéons régions dans le tiroir mobile. NB : le tiroir est déplacé hors de #header_mobile (cf. en-tête de ce fichier), donc ces sélecteurs ne sont PAS préfixés. Les sous-liens d'appellation sont scopés sous .dr-acc-body pour ne pas heurter le .dr-sub du sous-titre d'accueil (ligne ~97). =================================================================== */ /* le bouton accordéon réutilise .dr-link ; on neutralise l'aspect bouton */ /* pt9 (Thomas 24/07) — « Rhône Nord / Rhône Sud font perdus dans leur style ». Cause : `font: inherit` était posé ici pour effacer la police UA du