/* ===== En-tête v2 : barre « verre », logo animé, menu avec pastille qui glisse ===== */
header.hd{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:color-mix(in srgb,var(--bg) 82%,transparent);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent);transition:box-shadow .3s,background .3s}
header.hd.hd-s{box-shadow:0 10px 30px -22px rgba(0,0,0,.55);background:color-mix(in srgb,var(--bg) 92%,transparent)}
.hd-ink{height:3px;background:linear-gradient(90deg,var(--c),var(--m),var(--y),#14151a,var(--c),var(--m));background-size:300% 100%;animation:hdInk 9s linear infinite}
[data-mode="dark"] .hd-ink,:root[data-theme="dark"] .hd-ink{background-image:linear-gradient(90deg,var(--c),var(--m),var(--y),#fff,var(--c),var(--m))}
@keyframes hdInk{to{background-position:300% 0}}
.wrap.hd-bar{max-width:1500px}
.hd-bar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"brand nav tools";align-items:center;gap:10px 18px;padding-block:10px;transition:padding .3s}
header.hd.hd-s .hd-bar{padding-block:6px}
/* logo */
.hd-id{grid-area:brand;justify-self:start;display:grid;gap:2px;min-width:0}
.hd .brand{justify-self:start;display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);min-width:0}
.br-logo{position:relative;flex:none;width:46px;height:46px;display:grid;place-items:center}
.br-logo img{width:42px;height:42px;border-radius:12px;position:relative;z-index:1;box-shadow:0 6px 16px -8px rgba(0,0,0,.6);transition:transform .45s cubic-bezier(.2,.8,.3,1.4)}
.hd .brand:hover .br-logo img{transform:rotate(-10deg) scale(1.08)}
.br-orb{position:absolute;inset:-5px;border-radius:50%;animation:brOrb 7s linear infinite}
.br-orb i{position:absolute;width:8px;height:8px;border-radius:50%;box-shadow:0 0 10px currentColor}
.br-orb i:nth-child(1){top:0;left:50%;margin-left:-4px;background:var(--c);color:var(--c)}
.br-orb i:nth-child(2){right:0;top:50%;margin-top:-4px;background:var(--m);color:var(--m)}
.br-orb i:nth-child(3){bottom:0;left:50%;margin-left:-4px;background:var(--y);color:var(--y)}
.br-orb i:nth-child(4){left:0;top:50%;margin-top:-4px;background:var(--ink);color:var(--ink)}
@keyframes brOrb{to{transform:rotate(360deg)}}
.hd .brand:hover .br-orb{animation-duration:1.6s}
.br-t{display:grid;line-height:1.05;min-width:0}
.br-t b{font-family:var(--f-display);font-weight:900;font-stretch:112%;font-size:1.22rem;letter-spacing:-.01em;white-space:nowrap;background:linear-gradient(90deg,var(--ink) 0 40%,var(--m) 50%,var(--ink) 60% 100%);background-size:250% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent;transition:background-position .9s ease}
.hd .brand:hover .br-t b{background-position:0 0}
.hd-id:has(.livebar:not([hidden])) .br-tag{display:none}
.br-t small{display:flex;align-items:center;gap:6px;margin-top:3px;font-size:.72rem;font-weight:700;color:var(--muted);white-space:nowrap}
.br-city{font-weight:900;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:linear-gradient(135deg,var(--m),#7a4bc4);padding:2px 7px;border-radius:99px}
/* menu : pastille qui glisse sous le lien actif / survolé */
.hd nav.tabs{grid-area:nav;justify-self:center;min-width:0;max-width:100%}
.tabs-in{position:relative;display:flex;align-items:center;gap:2px;padding:4px;border-radius:99px;background:var(--surface);border:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabs-in::-webkit-scrollbar{display:none}
.hd nav.tabs a{position:relative;z-index:1;display:inline-flex;align-items:center;gap:6px;text-decoration:none;font-weight:700;font-size:.93rem;color:var(--muted);padding:8px 13px!important;border:0!important;border-radius:99px;white-space:nowrap;transition:color .25s}
.hd nav.tabs a::after{display:none!important}
.hd nav.tabs a:hover{color:var(--ink)}
.hd nav.tabs a[aria-current="page"]{color:var(--bg)}
.tab-blob{position:absolute;z-index:0;top:0;left:0;width:0;height:0;border-radius:99px;background:var(--ink);box-shadow:0 6px 16px -8px rgba(0,0,0,.7);transition:transform .45s cubic-bezier(.3,1.3,.4,1),width .45s cubic-bezier(.3,1.3,.4,1),opacity .2s;opacity:0}
.tab-blob.on{opacity:1}
/* « Nos offres » : la pastille glisse aussi jusqu'à lui et l'entoure d'un anneau aux couleurs CMJN qui tourne */
.tab-blob.vip{background:conic-gradient(from var(--ba,0deg),#1fa6dc,#e0137a,#ffd400,#1fa6dc);box-shadow:0 8px 22px -8px rgba(224,19,122,.6);animation:blobSpin 2.4s linear infinite}
@property --ba{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes blobSpin{to{--ba:360deg}}
.hd nav.tabs a.tab-vip{transition:transform .35s cubic-bezier(.3,1.4,.4,1),box-shadow .3s}
.hd nav.tabs a.tab-vip:hover{transform:scale(1.04);box-shadow:0 4px 16px rgba(245,179,1,.55)}
.hd nav.tabs a.tab-vip:hover .vip-star{animation-duration:1.2s}
@media (prefers-reduced-motion:reduce) and (max-width:0px){.tab-blob.vip{animation:none}.hd nav.tabs a.tab-vip:hover{transform:none}}
.hd nav.tabs a.tab-vip{margin:0 2px!important;padding:7px 13px!important;color:#14151a!important}
.hd nav.tabs a.tab-shop .ts-ic{display:inline-block;transition:transform .35s cubic-bezier(.2,.8,.3,1.5)}
.hd nav.tabs a.tab-shop:hover .ts-ic{transform:rotate(-12deg) scale(1.2)}
/* outils : état de la boutique, thème, taille du texte, langue */
.hd-tools{grid-area:tools;justify-self:end;display:flex;align-items:center;gap:8px}
.hd .livebar{justify-content:flex-start;border:0;background:transparent;padding:0 0 0 58px;min-height:0;font-size:.74rem;gap:6px 10px;flex-wrap:nowrap;color:var(--muted);margin-top:-2px}
.hd .livebar:hover{background:transparent;color:var(--ink)}
.hd .livebar #lbSt{font-weight:700}
.hd .livebar .lb-cr,.hd .livebar .lb-sep{display:none}
@media (min-width:1560px){.hd .livebar .lb-cr,.hd .livebar .lb-sep{display:inline-flex}}
.hd .lefttools{display:flex;gap:6px}
.hd .mode{border-radius:99px;padding:3px}
.hd .mode button{width:32px;height:30px}
.hd .fsbtn{height:38px}
.hd .langs{display:flex;gap:2px;padding:3px;border-radius:99px;border:1px solid var(--line);background:var(--surface)}
.hd .langs button{border:0!important;padding:5px!important;border-radius:99px;opacity:1;display:none}
.hd .langs button[aria-pressed="true"]{display:block}
.hd .langs:hover button,.hd .langs:focus-within button{display:block;animation:hdLang .25s ease both}
.hd .langs button img{width:24px;height:17px;border-radius:3px}
.hd .langs:hover button:not([aria-pressed="true"]){opacity:.7}.hd .langs button:hover{opacity:1!important}
@keyframes hdLang{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
/* apparition */
.hd .brand,.hd nav.tabs,.hd-tools{animation:hdIn .7s cubic-bezier(.2,.8,.3,1) both}
.hd nav.tabs{animation-delay:.08s}.hd-tools{animation-delay:.16s}
@keyframes hdIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
/* écrans moyens : le menu passe sous le logo */
@media (max-width:1460px){
  .hd-bar{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"brand tools" "nav nav"}
  .hd nav.tabs{justify-self:center;width:auto}
}
@media (max-width:760px){
  .hd-bar{gap:8px 10px;padding-block:8px}
  .br-t b{font-size:1.02rem}.br-tag{display:none}.br-logo{width:40px;height:40px}.br-logo img{width:36px;height:36px}
  .hd .livebar{padding-left:52px}
  .hd nav.tabs{justify-self:stretch}.tabs-in{border-radius:16px}
  .hd nav.tabs a{font-size:.88rem;padding:7px 11px!important}
  .hd .fsbtn{display:none}
}
.hd .br-t b{display:block}
/* « METZ » à côté du nom (gagne une ligne dans l'en-tête) */
.hd .br-t{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}
.hd .br-t small{margin-top:0;align-self:center}
.hd .br-t .br-city{position:relative;top:1px}
@media (max-width:420px){.br-t b{font-size:.94rem}.br-city{display:none}.hd .mode button{width:28px}}
@media (prefers-reduced-motion:reduce) and (max-width:0px){.hd-ink,.br-orb{animation-duration:30s}}
/* petits écrans : tous les onglets visibles (sur plusieurs lignes), le menu se replie quand on descend et revient quand on remonte */
@media (max-width:960px){
  .hd nav.tabs{justify-self:stretch;width:100%}
  .tabs-in{flex-wrap:wrap;justify-content:center;overflow:visible;border-radius:18px;gap:3px;max-height:220px;transition:max-height .35s ease,opacity .25s,padding .3s,margin .3s}
  .hd nav.tabs a{font-size:.86rem;padding:7px 11px!important}
}
/* mobile / application : l'en-tête garde toujours la même hauteur (aucun saut de la page) et glisse hors de l'écran quand on descend */
header.hd{top:0;padding-top:env(safe-area-inset-top,0px)}
@media (max-width:960px){
  header.hd,header.hd.hd-s{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--bg);transition:transform .34s cubic-bezier(.22,.8,.3,1),box-shadow .3s;will-change:transform}
  header.hd .hd-bar,header.hd.hd-s .hd-bar{padding-block:8px;transition:none}
  .tabs-in{transition:none}
  header.hd.hd-up{transform:translate3d(0,calc(-100% - 16px),0);box-shadow:none}
  html::before{content:"";position:fixed;left:0;right:0;top:0;height:env(safe-area-inset-top,0px);background:var(--bg);z-index:45;pointer-events:none}
}
@media (max-width:760px){
  header.hd .hd-bar,header.hd.hd-s .hd-bar{padding-block:6px;row-gap:6px}
  .hd nav.tabs .tabs-in{padding:3px;gap:1px 2px;border-radius:14px}
  .hd nav.tabs a{font-size:.8rem;padding:5px 9px!important}
  .hd nav.tabs a.tab-vip{padding:5px 10px!important}
  .br-logo{width:36px;height:36px}.br-logo img{width:32px;height:32px}.hd .livebar{padding-left:48px}
  .hd .mode button{height:28px}.hd .langs button{padding:3px!important}
}
/* téléphone et tablette : les onglets sur une seule ligne qui défile au doigt (plus de menu sur deux lignes),
   bords en fondu pour montrer qu'il y en a d'autres, l'onglet actif est ramené au centre */
@media (max-width:960px){
  .hd nav.tabs{margin-inline:-16px;width:calc(100% + 32px);max-width:none}
  .hd nav.tabs .tabs-in{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:24px;
    background:transparent;border:0;border-radius:0;padding:3px 16px 5px;gap:6px;max-height:none;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 30px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 30px),transparent 100%)}
  .hd nav.tabs a{flex:0 0 auto;scroll-snap-align:center;font-size:.9rem;padding:9px 15px!important;background:var(--surface);border:1px solid var(--line)!important;color:var(--ink)}
  .hd nav.tabs a[aria-current="page"]{background:transparent;border-color:transparent!important;color:var(--bg)}
  .hd nav.tabs a.tab-vip{padding:9px 15px!important;margin:0;border:0!important;background:linear-gradient(135deg,#ffe45c,#ffd400 55%,#f5b301);color:#14151a}
  .hd nav.tabs a.tab-shop .ts-ic{font-size:1rem}
}
@media (max-width:420px){.hd nav.tabs a{font-size:.86rem;padding:8px 13px!important}.hd nav.tabs a.tab-vip{padding:8px 13px!important}}
@media (max-width:380px){.hd nav.tabs a{font-size:.76rem;padding:5px 7px!important}}
@media (max-width:960px) and (prefers-reduced-motion:reduce) and (max-width:0px){header.hd,header.hd.hd-s{transition:none}}
@media (max-width:760px){.hd nav.tabs a{line-height:1.25}}
@media (max-width:420px){.hd nav.tabs a{font-size:.78rem;padding:5px 8px!important}.hd nav.tabs a.tab-vip{padding:5px 9px!important}.hd nav.tabs a .ts-ic{display:none}}
/* ===== Logo et nom centrés : thème à gauche, panier + langue à droite, menu dessous ===== */
header.hd .hd-bar{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-areas:"left brand right" "nav nav nav";row-gap:8px}
.hd-tools{display:contents}
.hd .lefttools{grid-area:left;justify-self:start;align-self:center}
.hd-right{grid-area:right;justify-self:end;align-self:center;display:flex;align-items:center;gap:8px}
.hd .lefttools,.hd-right{animation:hdIn .7s .16s cubic-bezier(.2,.8,.3,1) both}
.hd-id{grid-area:brand;justify-self:center;justify-items:center;position:relative;isolation:isolate}
.hd .brand{justify-self:center}
.hd .livebar{padding-left:0!important;justify-content:center;justify-self:center}
.hd nav.tabs{justify-self:center}
/* halo doux derrière le logo + filets CMJN de chaque côté */
.hd-id::before{content:"";position:absolute;inset:-14px -40px;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--m) 14%,transparent),transparent);opacity:.9;pointer-events:none;animation:hdHalo 6s ease-in-out infinite}
@keyframes hdHalo{50%{opacity:.45;transform:scale(1.08)}}
.hd-id::after{content:"";position:absolute;top:25px;left:-150px;right:-150px;height:2px;z-index:-2;pointer-events:none;opacity:.7;
  background:linear-gradient(90deg,transparent,var(--c) 60%,var(--m)) left/120px 2px no-repeat,linear-gradient(90deg,var(--m),var(--y) 40%,transparent) right/120px 2px no-repeat}
header.hd.hd-s .hd-id::after{top:21px}
.hd .brand{position:relative}
.br-t{justify-items:start}
@media (min-width:961px){
  .br-logo{width:52px;height:52px}.br-logo img{width:48px;height:48px}
  .br-t b{font-size:1.42rem}
  header.hd.hd-s .br-logo{width:44px;height:44px}header.hd.hd-s .br-logo img{width:40px;height:40px}
  .br-logo,.br-logo img,.br-t b{transition:width .3s,height .3s,font-size .3s,transform .45s cubic-bezier(.2,.8,.3,1.4),background-position .8s}
}
.br-t b{animation:brShine 9s ease-in-out 1.2s infinite}
@keyframes brShine{0%,78%{background-position:100% 0}92%,100%{background-position:0 0}}
.hd .brand:hover .br-t b{animation-play-state:paused}
@media (max-width:960px){.hd-id::after{display:none}}
@media (max-width:600px){header.hd .hd-bar{grid-template-columns:auto minmax(0,1fr) auto;column-gap:8px}.hd-id::before{inset:-8px -10px}}
@media (prefers-reduced-motion:reduce) and (max-width:0px){.hd-id::before,.br-t b{animation:none}}
/* ===== Ordinateur : la marge gauche/droite (couleur du site) suit la taille de l'écran : ~8,5 % de chaque côté, petit portable comme grand écran ===== */
.wrap{max-width:1240px}
@media (min-width:1024px){.wrap,.wrap.hd-bar{max-width:2800px;padding-left:max(28px,8.5vw);padding-right:max(28px,8.5vw)}}