/* ===========================================================================
   Shared site header.

   The storefront and the PHP customer pages used to ship two different headers
   with two different language controls, two logo treatments and two contact
   affordances. Restyling the second one to look like the first only hid the
   problem until the next change. These rules are the storefront's own header
   rules, lifted out of styles.css so index.html and every PHP page load the
   same definition and render the same markup.
   =========================================================================== */
/* The header must not inherit each page's palette: styles.css and customer.css disagree on a
   couple of values, which is exactly how the two headers drifted. Pin them on the header roots
   so the same sheet resolves to the same pixels wherever it is loaded. */
.site-notice,.site-header{
  /* Header-local aliases only. Everything else inherits from tokens.css. */
  --accent:var(--brass);--accent-deep:#5f251b;
}
/* Links reused as controls need the storefront's own reset, which lives in styles.css. */
.site-header a,.site-notice a{text-decoration:none}
/* Resolve the header's own font stack instead of inheriting each page's body font. */
.site-notice,.site-header{font-family:var(--sans)}
/* .darija lives in styles.css, which the PHP pages do not load; the strip needs it either way. */
.site-notice /* This span holds the city name, which is Arabic on the Darija page and the Latin word
   "Oujda" on the French one. Applying the Arabic webfont unconditionally made a French page
   download 55 KB of Noto to render five Latin letters. */
.darija{font-weight:760;line-height:1.65}
html[data-lang="ary"] .darija,html[lang="ary"] .darija{font-family:var(--arabic)}
/* The contact link's sizing came from an attribute selector that my class-based extraction left
   behind in styles.css, so the strip was 7px shorter here than on the storefront. */
.site-notice [data-store-call]{display:inline-flex;align-items:center;min-height:var(--tap)}
.lang-choice{text-decoration:none}
.site-notice{min-height:34px;background:var(--brass);color:#181600;display:flex;align-items:center;gap:18px;padding:6px var(--pad);font-size:var(--fs-xs);letter-spacing:.05em;border-bottom:1px solid #5e5408}
.site-notice span{font-weight:950}
.site-notice strong{font-weight:700}
.site-notice a{margin-inline-start:auto;font-weight:900;text-decoration:underline;text-underline-offset:3px}
.site-header{height:74px;display:flex;align-items:center;gap:30px;padding:0 var(--pad);position:sticky;top:0;z-index:80;background:rgba(241,238,229,.96);border-bottom:1px solid var(--ink);backdrop-filter:blur(12px)}
.brand{display:flex;align-items:center;gap:11px;min-width:max-content}
.brand-frame{display:grid;place-items:center;width:52px;height:50px;background:#fff;border:1px solid var(--ink);box-shadow:4px 4px 0 var(--teal)}
.brand img{object-fit:contain}
.brand span:not(.brand-frame){display:grid;line-height:1.05}
.brand b{font-size:14px;letter-spacing:.07em}
.brand small{font-size:var(--fs-xs);letter-spacing:.13em;color:var(--muted);margin-top:5px;font-weight:800}
.plain-action{display:inline-flex;align-items:center;min-height:var(--tap)}
.desktop-nav{display:flex;gap:22px;margin-inline-start:auto;align-items:center}
.desktop-nav a{display:inline-flex;align-items:center;min-height:42px;font-size:12px;font-weight:850;padding:8px 2px;border-bottom:3px solid transparent}
.desktop-nav a:hover,.desktop-nav a:focus-visible{border-color:var(--teal)}
.header-actions{display:flex;align-items:center;gap:8px}
.plain-action{font-size:var(--fs-xs);font-weight:800;text-decoration:underline;text-underline-offset:3px}
.cart-button{min-height:44px;border:1px solid var(--ink);background:var(--ink);color:#fff;padding:8px 13px;font-size:var(--fs-xs);font-weight:900;letter-spacing:.03em;cursor:pointer;text-transform:uppercase}
.cart-button:hover{background:var(--teal)}
.cart-button span{display:inline-grid;place-items:center;min-width:22px;height:22px;margin-inline-start:6px;background:var(--brass);color:#161500;border:1px solid #5c3213;font-size:var(--fs-xs)}
.cart-button:disabled{opacity:.5;cursor:not-allowed}
.site-header{box-shadow:0 10px 32px rgba(7,20,23,.06)}
.brand-frame{position:relative;overflow:visible}
.brand-frame:after{content:"";position:absolute;inset:-5px 5px 5px -5px;border-left:1px solid var(--brass);border-top:1px solid var(--brass);pointer-events:none}
.desktop-nav a{position:relative}
.desktop-nav a:before{content:"";position:absolute;left:50%;bottom:4px;width:4px;height:4px;background:var(--brass);opacity:0;transform:translateX(-50%) rotate(45deg);transition:opacity .15s ease}
.desktop-nav a:hover:before,.desktop-nav a:focus-visible:before{opacity:1}
.cart-button{transition:background .14s ease,color .14s ease,border-color .14s ease,box-shadow .14s ease,transform .14s ease}
.cart-button:hover{transform:translateY(-1px)}
.cart-button:active{transform:translateY(1px);box-shadow:none}
.cart-button{box-shadow:3px 3px 0 var(--brass)}
@media (max-width:980px){.desktop-nav{display:none}}
@media (max-width:700px){.site-notice strong{display:none}.site-header{height:66px;gap:10px}.brand-frame{width:44px;height:42px;box-shadow:3px 3px 0 var(--teal)}.brand img{width:40px;height:35px}.brand small{display:none}.plain-action{display:none}}
@media (max-width:440px){.header-actions{margin-inline-start:auto}.cart-button{padding-inline:9px}.brand b{font-size:12px}}
.site-notice{background:var(--accent);color:#fff;border-bottom-color:#713024;min-height:38px}
.site-notice>span{font-size:12px}
.site-notice strong{display:flex;align-items:baseline;gap:10px;min-width:0}
.site-notice strong>span{font-size:var(--fs-xs)}
.site-notice strong small{font-size:var(--fs-xs);color:#ffe4de}
.site-notice a{display:grid;line-height:1.05}
.site-notice a small{font-size:var(--fs-xs);color:#ffe4de}
.site-header{height:78px;background:rgba(246,243,235,.97)}
.brand small{font-size:var(--fs-xs);line-height:1.15}
.brand small [lang="ary"]{font-size:var(--fs-xs);color:var(--ink)}
.desktop-nav{gap:18px}
.desktop-nav a{display:grid;align-content:center;gap:2px;text-align:center;padding-inline:6px;min-width:66px}
.desktop-nav a>span{font-size:13px;line-height:1.1}
.desktop-nav a small{font-size:var(--fs-xs);color:var(--muted)}
.plain-action{display:grid;line-height:1.05}
.plain-action small{font-size:var(--fs-xs);color:var(--muted)}
.cart-button{display:flex;align-items:center;justify-content:center;gap:7px;text-transform:none}
.cart-button .button-label{display:grid;text-align:right;line-height:1}
.cart-button .button-label b{font-size:12px}
.cart-button .button-label small{font-size:var(--fs-xs);color:#c9d8d9}
.cart-button>span[data-cart-count]{background:var(--accent);color:#fff;border-color:#713024}
@media (max-width:1100px){.site-header{padding-inline:24px;gap:18px}.desktop-nav{gap:7px}.desktop-nav a{min-width:52px;padding-inline:3px}.desktop-nav a>span{font-size:var(--fs-xs)}}
@media (max-width:700px){/* The contact link is revealed once the shop settings arrive. It is a 44px tap target, so the
   strip is 57px tall in its filled state at every width. Reserving that from the first paint is
   what stops <main> dropping 19px and taking most of the page's layout shift with it. */
.site-notice{min-height:57px}.site-notice strong small{display:none}.site-header{height:68px}.brand small{display:none}.cart-button .button-label small{display:none}.cart-button .button-label b{font-size:var(--fs-xs)}}
@media (max-width:440px){.site-notice>span{font-size:var(--fs-xs)}.brand b{font-size:var(--fs-xs)}.cart-button{padding-inline:8px}}
@media (max-width:700px){.site-notice{overflow:hidden}.site-notice>span{min-width:0;flex:0 1 auto}.site-notice a{min-width:0;max-width:118px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.site-header{min-width:0}.brand{min-width:0;flex:1 1 auto;overflow:hidden}.brand-frame{flex:0 0 auto}.brand>span:last-child{min-width:0;overflow:hidden}.brand b{white-space:nowrap}.plain-action{display:none}.header-actions{min-width:0;flex:0 0 auto}}
@media (max-width:440px){.brand{gap:7px}.brand-frame{width:40px;height:40px}.brand img{width:36px;height:32px}.site-header{padding-inline:12px}.header-actions{gap:5px}.cart-button{min-width:44px}}
.site-notice{color:#fff}
.site-notice strong small,.site-notice a small{color:#fff}
.cart-button .button-label small{color:#fff}
.cart-button .button-label{background:transparent;border:0;color:#fff;min-width:0;height:auto;margin:0;display:grid;place-items:initial}
.route-state{position:absolute;z-index:3;top:7px;right:7px;display:grid;gap:1px;max-width:min(210px,70%);padding:5px 7px;background:#07191d;color:#fff;border:1px solid rgba(255,255,255,.42);box-shadow:2px 2px 0 rgba(0,0,0,.2);text-align:right;pointer-events:none}
.route-state .darija{font-size:var(--fs-xs);line-height:1.35}
.route-state small{font-size:var(--fs-xs);color:#d8e5e5;line-height:1.2}
.service-item .route-state,.request-list>a .route-state{top:6px;right:34px}
.text-action .route-state{right:0;top:-30px}
.button .route-state{right:5px;top:5px}
@media (max-width:440px){.route-state{max-width:66%;font-size:var(--fs-xs)}}
html[data-lang="ary"] .desktop-nav,html[data-lang="ary"] .header-actions,html[data-lang="ary"] .brand{direction:rtl}
html[data-lang="fr"] .desktop-nav,html[data-lang="fr"] .header-actions,html[data-lang="fr"] .brand{direction:ltr}
html[data-lang="ary"] .site-header{direction:rtl}
html[data-lang="fr"] .site-header{direction:ltr}
.language-switch{display:flex;align-items:center;gap:3px;padding:3px;border:1px solid var(--line-dark);background:var(--white)}
.lang-choice{min-width:44px;min-height:44px;border:0;background:transparent;color:var(--ink);display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:6px 9px;cursor:pointer;font-size:var(--fs-xs);font-weight:850;line-height:1}
.lang-choice>b{font-size:12px;font-weight:900}
.lang-choice:hover,.lang-choice:focus-visible{background:var(--teal-pale)}
.lang-choice.is-active{background:var(--ink);color:#fff}
html[data-lang="ary"] .language-switch{direction:rtl}
html[data-lang="fr"] .language-switch{direction:ltr}
@media (max-width:700px){.language-switch{padding:2px;gap:2px}.lang-choice{min-width:44px;width:44px;min-height:40px;height:40px;padding:0 3px;gap:2px}.lang-choice>b{font-size:var(--fs-xs);line-height:1;white-space:nowrap}.site-header{padding-inline:12px;gap:8px}.brand{min-width:74px;flex:1 1 110px}.header-actions{gap:4px;flex:0 0 auto}}
@media (max-width:440px){.cart-button{width:44px;min-width:44px;height:44px;padding:0;gap:0}.cart-button .button-label{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.cart-button:before{content:"🛒";font-size:16px;line-height:1}.cart-button>span[data-cart-count]{min-width:18px;width:18px;height:18px;margin-inline-start:0;position:absolute;transform:translate(11px,-11px);font-size:var(--fs-xs)}.brand{min-width:78px;flex:1 1 96px;gap:6px}.brand-frame{width:40px;height:40px;flex:0 0 40px}.brand b{font-size:var(--fs-xs);letter-spacing:.04em}}
html[data-lang="ary"] .route-state{right:7px;left:auto;text-align:start}
html[data-lang="fr"] .route-state{left:7px;right:auto;text-align:start}
html[data-lang="ary"] .service-item .route-state,html[data-lang="ary"] .request-list>a .route-state{right:34px;left:auto}
html[data-lang="fr"] .service-item .route-state,html[data-lang="fr"] .request-list>a .route-state{left:34px;right:auto}
@media (max-width:700px){.site-notice strong{display:none}.site-notice{gap:10px}.site-notice a{flex:0 0 auto;max-width:none;overflow:visible;text-overflow:clip;white-space:nowrap}}
@media (max-width:520px){.brand{min-width:40px;flex:0 0 40px}.brand>span:last-child{display:none}}
.site-notice a[data-store-call]{font-size:13px;letter-spacing:.025em;text-decoration-thickness:1.5px}
.whatsapp-action{display:grid;place-items:center;width:44px;height:44px;flex:0 0 44px;border:1px solid #128c7e;border-radius:50%;background:#25d366;color:#fff;text-decoration:none;transition:background .16s ease,color .16s ease,transform .16s ease}
.whatsapp-action svg{width:22px;height:22px;display:block}
.whatsapp-action:hover{background:#128c7e;color:#fff;transform:translateY(-1px)}
.whatsapp-action:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
@media (max-width:360px){.whatsapp-action{width:44px;height:44px;flex-basis:44px}.whatsapp-action svg{width:22px;height:22px}}
/* A header without the storefront's hamburger keeps its nav on screen below 980px and lets it
   scroll, rather than hiding it with a menu button that is not there. */
@media(max-width:980px){
  .site-header.no-menu .desktop-nav{display:flex;overflow-x:auto;gap:16px;margin-inline-start:auto;
    scrollbar-width:thin;-webkit-overflow-scrolling:touch}
  /* Short Arabic labels (الطبع, تواصل) are only ~30px wide; pad them into a square target. */
  .site-header.no-menu .desktop-nav a{flex:0 0 auto;min-width:var(--tap);min-height:var(--tap);
    justify-content:center;padding-inline:6px}
}
@media(max-width:640px){
  .site-header.no-menu{flex-wrap:wrap;height:auto;padding-block:8px;gap:10px}
  .site-header.no-menu .desktop-nav{order:3;width:100%;margin-inline-start:0;padding-bottom:2px}
  .site-header.no-menu .header-actions{margin-inline-start:auto}
}

/* Real flags instead of emoji: Windows ships no flag glyphs, so the emoji fell
   back to the letters MA / FR and the French pill read "FR FR". */
.lang-choice .flag{width:18px;height:12px;display:block;flex:0 0 auto;border:1px solid rgba(0,0,0,.28)}
.lang-choice{flex-direction:column;gap:3px;padding:5px 7px;min-width:46px}
.lang-choice>b{font-size:var(--fs-xs);font-weight:900;line-height:1}
@media (max-width:700px){
  .lang-choice{width:auto;min-width:46px;padding:3px 5px;gap:2px}
  .lang-choice .flag{width:16px;height:11px}
  .lang-choice>b{font-size:var(--fs-xs)}
}

/* Cart is the same icon at every size, not a word on desktop and an icon on phones. */
.cart-button{width:44px;min-width:44px;height:44px;padding:0;gap:0;position:relative}
.cart-button:before{content:"\1F6D2";font-size:17px;line-height:1}
.cart-button .button-label{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.cart-button>span[data-cart-count]{min-width:18px;width:18px;height:18px;margin-inline-start:0;position:absolute;transform:translate(11px,-11px);font-size:var(--fs-xs)}

/* Quiet, consistent header controls shared with every customer route. */
.site-header{border-bottom-color:#d4ddd4;box-shadow:0 4px 18px #102b250a}
.brand-frame{border-color:#c7d4cb;border-radius:8px;box-shadow:none}
.brand-frame:after{content:none}
.language-switch{border-color:#cbd6cd;border-radius:10px}
.lang-choice{border-radius:7px}
.cart-button{border-radius:10px;box-shadow:none}
.cart-button:before{content:"";width:22px;height:22px;background:currentColor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3h2l2.4 12h10.9l2-8H6M8 18h10'/%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='17' cy='21' r='1'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}
.cart-button>span[data-cart-count]{border:2px solid #f6f3eb;border-radius:50%;min-width:20px;width:20px;height:20px;transform:none;top:-6px;inset-inline-end:-6px;font-size:var(--fs-xs)}
@media(max-width:980px){.header-actions{margin-inline-start:auto}}
@media(max-width:700px){.site-header{gap:8px}.site-notice{padding-inline:16px}.site-notice strong{display:none}.header-actions{gap:7px}.brand{min-width:40px}.brand-frame{width:40px;height:40px}}
@media(max-width:360px){.site-header{padding-inline:8px}.header-actions{gap:5px}.language-switch{gap:0}.lang-choice{min-width:40px;width:40px;padding-inline:2px}.brand{flex:0 0 40px}.brand>span:not(.brand-frame){display:none}}
@media(prefers-reduced-motion:reduce){.site-header *{transition:none!important}}

/* BrandKit lockups keep their outlined lettering intact in both languages. */
.site-header .brand{flex:0 0 auto;min-width:0;gap:0}
.brand-lockup{display:block;line-height:0;width:210px}
.brand-lockup img{display:block;width:100%;height:auto;object-fit:contain}

.whatsapp-action{background:#167b52;border:1px solid #126f49;box-shadow:none;color:#fff;border-radius:12px;width:44px;height:44px}
.whatsapp-action:hover{background:#10683f;transform:translateY(-1px)}
.whatsapp-action .whatsapp-icon{width:23px;height:23px;stroke:none;fill:currentColor}
.site-header .brand>.brand-lockup{display:block}
@media(max-width:1100px){.site-header .brand-lockup{width:174px}}
@media(max-width:700px){.site-header .brand-lockup{width:132px}.site-header .brand{flex:0 0 auto}.site-header{padding-inline:14px}.header-actions{gap:8px}}
@media(max-width:380px){.site-header .brand-lockup{width:112px}.header-actions{gap:5px}.site-header{padding-inline:10px}.lang-choice{min-width:40px;width:40px}.cart-button,.whatsapp-action{min-width:40px;width:40px;height:40px}}
@media(max-width:700px){.site-header{flex-wrap:wrap}.site-header .desktop-nav{display:flex;order:3;flex:1 1 100%;width:100%;justify-content:space-between;gap:2px;margin:2px 0 0;overflow-x:auto;scrollbar-width:none;}.site-header .desktop-nav a{font-size:var(--fs-nav);min-height:var(--tap);white-space:nowrap;display:flex;align-items:center}.site-header .header-actions{margin-inline-start:auto}.site-header .desktop-nav::-webkit-scrollbar{display:none}}
@media(max-width:700px){.site-header{height:auto;min-height:auto;padding-block:6px 0;row-gap:2px}/* Short Arabic labels such as الطبع are only ~30px wide; pad them out so the target is square. */.site-header .desktop-nav a{min-width:var(--tap);justify-content:center;padding-inline:4px}.site-header .desktop-nav a>span{font-size:var(--fs-nav)}}

/* Every link in the shared chrome is a real touch target: the notice-bar phone number and the
   brand lockup were 32px and 36px tall. */
.site-notice a,.site-header .brand{display:inline-flex;align-items:center;min-height:var(--tap)}

/* The PHP pages carry one more nav item than the storefront (Accueil), which pushed the row into a
   horizontal scroll on a phone with the last items sitting off the edge. Same treatment as the
   storefront header: the nav takes its own full-width row and wraps instead of scrolling. */
@media (max-width:700px){
  .site-header.no-menu{flex-wrap:wrap;row-gap:2px}
  /* Same treatment as the storefront header: the nav takes its own full-width row and spreads
     across it, rather than sitting beside the brand and scrolling its last items off the edge. */
  .site-header.no-menu .desktop-nav{order:3;flex:1 1 100%;width:100%;margin-inline:0;
    display:flex;flex-wrap:nowrap;justify-content:space-between;gap:2px;overflow-x:auto;
    scrollbar-width:none}
  .site-header.no-menu .desktop-nav::-webkit-scrollbar{display:none}
  .site-header.no-menu .desktop-nav a{flex:0 0 auto;min-width:var(--tap);min-height:var(--tap);
    justify-content:center;padding-inline:4px;font-size:var(--fs-nav);white-space:nowrap}
  .site-header.no-menu .header-actions{margin-inline-start:auto}
}

/* Below 440px the five French nav words need every pixel of the row. Trim the padding rather than
   the type, and keep the 44px target from the min-width. */
@media (max-width:440px){
  .site-header .desktop-nav,.site-header.no-menu .desktop-nav{gap:2px}
  .site-header .desktop-nav a,.site-header.no-menu .desktop-nav a{padding-inline:3px}
}
/* At 320-360 the five labels no longer fit at 14px: they ran together with no gap and the last one
   was cut. One step down in size keeps them separated, whole, and above the 12px floor. */
@media (max-width:380px){
  .site-header .desktop-nav a,.site-header.no-menu .desktop-nav a{font-size:13px;padding-inline:2px}
  .site-header .desktop-nav a>span,.site-header.no-menu .desktop-nav a>span{font-size:13px}
}

/* At 340px and below the five French labels cannot share one row without touching each other,
   which reads as broken rather than as tight. Two rows of three, evenly divided, reads as a
   deliberate grid and keeps every label whole. */
@media (max-width:340px){
  .site-header .desktop-nav,.site-header.no-menu .desktop-nav{
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 4px;overflow:visible}
  .site-header .desktop-nav a,.site-header.no-menu .desktop-nav a{
    min-width:0;justify-content:center;text-align:center;padding-inline:2px}
}

/* The language toggle carries the word "الدارجة" on every page, including the French one. Left to
   use the shipped Arabic webfont it pulled 50 KB of Noto for two words of chrome, so on a French
   page the toggle falls back to whatever Arabic face the device has. The Arabic page itself is
   unaffected: there the webfont is already being downloaded for the content. */
/* The storefront stamps data-lang; the PHP pages only set lang. Match both. */
html[data-lang="fr"] .lang-choice,html[data-lang="fr"] .lang-choice *,
html[lang="fr"] .lang-choice,html[lang="fr"] .lang-choice *{font-family:"Segoe UI",Tahoma,Arial,sans-serif}

/* Contact buttons are revealed from the shop settings after the catalogue responds. Keeping the
   slot occupied while hidden costs 44px of empty header on a shop with no WhatsApp, and saves
   every visitor a header that widens under their thumb. */
.header-actions [data-store-whatsapp][hidden]{display:flex!important;visibility:hidden}