
.tete,.l-tiroir{
  --surface:#121110; --raised:#1a1917; --subtle:#222120; --strong:#2c2a28;
  --ink:#f3f1ed; --ink-2:#a8a29a; --ink-3:#8a857c;
  --line:rgba(245,240,230,.10); --line-2:rgba(245,240,230,.17);
  --heat:#ffc145;
  --tete-fond:rgba(18,17,16,.78); --nav-fond:rgba(34,33,32,.5);
  
  --hairline:var(--line); --hairline-strong:var(--line-2);
  --ink-soft:var(--ink-2); --ink-faint:var(--ink-3);
  --prim:#f3f1ed; --on-prim:#0a0a09; --prim-hover:#dcd8d1; --focus:#ffc145;
  --r-sm:6px; --r-md:9px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --gout:clamp(16px,4vw,40px);
  --tete:60px;
  --contenu:1160px;
  font-family:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif;
  line-height:1.6;
  color:var(--ink);
}
.tete *,.tete *::before,.tete *::after,
.l-tiroir *,.l-tiroir *::before,.l-tiroir *::after{box-sizing:border-box}
.tete [hidden],.l-tiroir [hidden]{display:none!important}
.tete a,.l-tiroir a{color:inherit}
.tete button,.l-tiroir button{font:inherit;color:inherit}
.tete :focus-visible,.l-tiroir :focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--r-sm)}
.tete .wrap{max-width:calc(var(--contenu) + 2 * var(--gout));margin-inline:auto;padding-inline:var(--gout)}

.tete .btn,.l-tiroir .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;padding:0 15px;border-radius:var(--r-sm);border:0;font-size:14px;font-weight:600;line-height:1;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .15s,color .15s}

.tete .btn--prim,.l-tiroir .btn--prim{position:relative;isolation:isolate;overflow:hidden;color:var(--on-prim);background:linear-gradient(180deg,#fff 0%,#f3efe8 55%,#e2dcd2 100%);box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(10,10,9,.16),0 0 0 1px rgba(255,255,255,.12),0 2px 5px -1px rgba(0,0,0,.6),0 8px 22px -12px rgba(255,193,69,.4);transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s,background-color .2s,color .2s}
.tete .btn--prim::before,.l-tiroir .btn--prim::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(105deg,transparent 30%,rgba(255,206,120,.55) 50%,transparent 70%);transform:translateX(-110%);transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.tete .btn--prim:hover,.l-tiroir .btn--prim:hover{color:var(--on-prim);transform:translateY(-1px);box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(10,10,9,.16),0 0 0 1px rgba(255,193,69,.45),0 4px 10px -2px rgba(0,0,0,.6),0 14px 30px -10px rgba(255,193,69,.6)}
.tete .btn--prim:hover::before,.l-tiroir .btn--prim:hover::before{transform:translateX(110%)}
.tete .btn--prim:active,.l-tiroir .btn--prim:active{transform:translateY(0);box-shadow:inset 0 1px 2px rgba(10,10,9,.25),0 0 0 1px rgba(255,193,69,.35),0 1px 3px rgba(0,0,0,.5)}
.tete .btn--prim .ic,.l-tiroir .btn--prim .ic{transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.tete .btn--prim:hover .btn__suite,.l-tiroir .btn--prim:hover .btn__suite{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){.tete .btn--prim,.l-tiroir .btn--prim,.tete .btn--prim::before,.l-tiroir .btn--prim::before,.tete .btn--prim .ic,.l-tiroir .btn--prim .ic{transition:none}.tete .btn--prim:hover,.l-tiroir .btn--prim:hover,.tete .btn--prim:hover .btn__suite,.l-tiroir .btn--prim:hover .btn__suite{transform:none}.tete .btn--prim::before,.l-tiroir .btn--prim::before{display:none}}
.tete .btn--sec,.l-tiroir .btn--sec{background:var(--subtle);color:var(--ink)}
.tete .btn--sec:hover,.l-tiroir .btn--sec:hover{background:var(--strong)}
.tete .btn--fant,.l-tiroir .btn--fant{background:transparent;color:var(--ink-2)}
.tete .btn--fant:hover,.l-tiroir .btn--fant:hover{background:var(--raised);color:var(--ink)}
.tete .btn:active,.l-tiroir .btn:active{transform:translateY(1px)}

.tete{position:sticky;top:0;z-index:40;background:var(--tete-fond);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line)}

.tete__in{height:var(--tete);display:grid;grid-template-columns:minmax(max-content,1fr) auto minmax(max-content,1fr);align-items:center;gap:28px}
.tete__gauche{display:flex;align-items:center;gap:6px;min-width:0}
.tete .marque{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-weight:700;font-size:18px;letter-spacing:-.02em;border-radius:var(--r-sm)}
.tete .marque svg{display:block;width:22px;height:22px}
.tete__nav{display:flex;align-items:center;gap:2px;padding:4px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--nav-fond)}
.tete__nav a{display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:var(--r-sm);color:var(--ink-2);text-decoration:none;font-size:14px;font-weight:500;white-space:nowrap;transition:color .15s,background-color .15s}
.tete__nav a:hover{color:var(--ink);background:var(--subtle)}
.tete__nav a[aria-current="true"],.tete__nav a[aria-current="page"]{color:var(--ink);background:var(--strong)}
.tete__actions{justify-self:end;display:flex;align-items:center;gap:12px}
.l-burger{display:none;flex-direction:column;align-items:center;justify-content:center;width:44px;height:44px;margin-left:-10px;flex:none;border:0;border-radius:var(--r-sm);background:none;color:var(--ink);cursor:pointer}
.l-burger:hover{background:var(--raised)}
.l-burger span{display:block;width:19px;height:1.5px;border-radius:2px;background:currentColor;transition:transform .2s ease}
.l-burger span + span{margin-top:5px}
.l-burger[aria-expanded="true"] span:first-child{transform:translateY(3.25px) rotate(45deg)}
.l-burger[aria-expanded="true"] span:last-child{transform:translateY(-3.25px) rotate(-45deg)}
.tete__portes{display:flex;align-items:center;gap:10px}
.tete .langue__d > summary{min-height:36px;padding:0 8px;border-color:transparent;border-radius:999px}
.tete .langue__d > summary:hover{border-color:transparent;background:rgba(245,240,230,.06)}
.tete .langue__d[open] > summary{background:rgba(245,240,230,.06);color:var(--ink)}
@media (max-width:1219px){
  .tete__in{grid-template-columns:minmax(0,1fr) auto}
  .tete__nav{display:none}
  .l-burger{display:inline-flex}
}
@media (min-width:1220px) and (max-width:1279px){.tete__nav a{padding:0 10px}}
@media (max-width:559px){.tete .langue{display:none}}
@media (max-width:599px){
  .tete .btn,.l-tiroir .btn{height:40px}
  .tete .marque{min-height:40px}
}
@media (max-width:400px){
  .tete__actions .btn{padding:0 12px;font-size:13px}
  .tete .marque{font-size:17px}
}

.l-tiroir{position:fixed;inset:var(--tete) 0 0 0;z-index:60;display:flex}
.l-tiroir[hidden]{display:none}
.l-tiroir__voile{position:absolute;inset:0;width:100%;padding:0;border:0;background:rgba(4,4,3,.66);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);cursor:pointer;animation:tete-voile-entre .18s ease both}
.l-tiroir__panneau{position:relative;display:flex;flex-direction:column;gap:2px;width:min(310px,84vw);height:100%;padding:12px 12px 20px;background:var(--surface);border-right:1px solid var(--line-2);box-shadow:24px 0 60px rgba(0,0,0,.55);overflow-y:auto;overscroll-behavior:contain;animation:tete-tiroir-entre .22s var(--ease) both}
@keyframes tete-voile-entre{from{opacity:0}to{opacity:1}}
@keyframes tete-tiroir-entre{from{transform:translateX(-24px);opacity:0}to{transform:none;opacity:1}}
.l-tiroir__lien{display:flex;align-items:center;min-height:46px;padding-inline:14px;border-radius:var(--r-md);color:var(--ink);text-decoration:none;font-size:15.5px}
.l-tiroir__lien:hover{background:var(--raised)}
.l-tiroir__langue{display:flex;gap:6px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.l-tiroir__langue a{flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;min-height:40px;border:1px solid var(--line-2);border-radius:var(--r-sm);color:var(--ink-2);text-decoration:none;font-size:13.5px}
.l-tiroir__langue a[aria-current]{color:var(--ink);background:var(--raised);border-color:var(--strong)}
@media (min-width:560px){.l-tiroir__langue{display:none}}
.l-tiroir__portes{display:flex;flex-direction:column;gap:8px;margin-top:auto;padding-top:16px;border-top:1px solid var(--line)}
.l-tiroir__portes .btn{height:auto;min-height:46px}

.tete .marque:hover{color:var(--ink)}
.tete .tete__nav a:hover{color:var(--ink)}
.l-tiroir .l-tiroir__lien:hover{color:var(--ink)}
.l-tiroir .l-tiroir__langue a:hover{color:var(--ink)}
.tete .langue__liste a:hover{color:var(--ink)}
.tete .btn--prim:hover,.l-tiroir .btn--prim:hover{color:var(--on-prim)}
.tete .btn--sec:hover,.l-tiroir .btn--sec:hover,.tete .btn--fant:hover{color:var(--ink)}

@media (prefers-reduced-motion:reduce){
  .l-tiroir__voile,.l-tiroir__panneau{animation:none}
  .l-burger span{transition:none}
}
