/*
 * Menu burger de l'en-tête (tablette et mobile, 1210 px et moins).
 * L'état ouvert est porté par <html data-menu="open"> (voir assets/js/header-scroll.js),
 * hors de #dc-root, pour que le ré-affichage de la page ne le réinitialise pas.
 */
.burger,.nav-cta{display:none}
/* bureau : l'en-tête reste sur une seule ligne ; entre 1211 et 1310 px, espacements resserrés pour y loger le lien « Vos économies » */
@media (min-width:1211px){.hdr,.hdr-l,.nav,.hdr-r{flex-wrap:nowrap}.nav a{white-space:nowrap}}
@media (min-width:1211px) and (max-width:1310px){.hdr-l{gap:24px}.nav{gap:2px}.nav a{padding:12px 8px}}
@media (max-width:1210px){
.hdr{flex-wrap:nowrap;gap:12px}
.hdr-l{margin-right:auto;gap:0;flex-wrap:nowrap}
.hdr-r{flex-wrap:nowrap}
.hdr-l > a,.hdr-r,.burger{position:relative;z-index:2}

/* bouton : trois traits qui se croisent en croix */
.burger{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:48px;height:48px;padding:0;border:0;border-radius:50%;background:#F5F5F4;cursor:pointer;flex:none;transition:background-color .25s}
.burger:hover{background:#EDEDEB}
.burger:focus-visible{outline:2px solid #0B0B0B;outline-offset:2px}
.burger span{display:block;width:20px;height:2px;border-radius:2px;background:#0B0B0B;transition:transform .35s cubic-bezier(.22,1,.36,1),opacity .2s}
html[data-menu="open"] .burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
html[data-menu="open"] .burger span:nth-child(2){opacity:0}
html[data-menu="open"] .burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* panneau : le menu se déroule du haut, sous le logo et le bouton */
.hdr .nav{position:absolute;top:0;left:50%;width:100vw;height:100vh;height:100dvh;margin-left:-50vw;box-sizing:border-box;padding:96px max(24px,calc((100vw - 1264px) / 2)) 24px;background:#ffffff;z-index:1;flex-direction:column;flex-wrap:nowrap;gap:0;overflow-y:auto;visibility:hidden;opacity:0;clip-path:inset(0 0 100% 0);transition:clip-path .45s cubic-bezier(.22,1,.36,1),opacity .3s,visibility 0s .45s}
html[data-menu="open"] .hdr .nav{visibility:visible;opacity:1;clip-path:inset(0);transition:clip-path .45s cubic-bezier(.22,1,.36,1),opacity .3s,visibility 0s}
html[data-menu="open"]{overflow:hidden}
html[data-menu="open"][data-hdr="hidden"] .hdr{transform:none}
/* menu ouvert : en défilant, le logo et les boutons du haut montent avec la liste ; seul le bouton de fermeture reste en place */
html[data-menu="open"] .hdr-l > a,html[data-menu="open"] .hdr-r{transform:translateY(calc(var(--menu-scroll,0px) * -1))}

/* liens : grands, séparés par un filet, qui apparaissent l'un après l'autre */
.hdr .nav > a,.hdr .nav .dd-t{display:flex;align-items:center;justify-content:space-between;padding:16px 0;font-size:var(--fs-h5);font-weight:600;border-bottom:1.5px solid #E3E3E0}
.hdr .nav > a.on,.hdr .nav .dd-t.on{color:#E3000F}
.hdr .nav .dd{border-bottom:1.5px solid #E3E3E0}
.hdr .nav .dd-t{border-bottom:0}
.hdr .nav .dd-t svg{display:block;flex:none;width:40px;height:40px;padding:12px;box-sizing:border-box;border-radius:50%;transition:transform .35s cubic-bezier(.22,1,.36,1),background-color .25s}
.hdr .nav .dd-t svg:hover{background:#F5F5F4}
html[data-dd="open"] .hdr .nav .dd-t svg{transform:rotate(180deg)}
.hdr .nav > *{opacity:0;transform:translateY(12px);transition:opacity .35s,transform .45s cubic-bezier(.22,1,.36,1)}
html[data-menu="open"] .hdr .nav > *{opacity:1;transform:none}
html[data-menu="open"] .hdr .nav > *:nth-child(1){transition-delay:.08s}
html[data-menu="open"] .hdr .nav > *:nth-child(2){transition-delay:.12s}
html[data-menu="open"] .hdr .nav > *:nth-child(3){transition-delay:.16s}
html[data-menu="open"] .hdr .nav > *:nth-child(4){transition-delay:.20s}
html[data-menu="open"] .hdr .nav > *:nth-child(5){transition-delay:.24s}
html[data-menu="open"] .hdr .nav > *:nth-child(6){transition-delay:.28s}
html[data-menu="open"] .hdr .nav > *:nth-child(7){transition-delay:.32s}

/* sous-menu Solutions : replié, il se déplie avec le chevron */
html .hdr .dd .dd-menu{position:static;display:block;visibility:visible;opacity:0;clip-path:none;width:auto;max-height:0;overflow:hidden;padding:0;border:0;border-radius:0;box-shadow:none;background:transparent;transition:max-height .4s cubic-bezier(.22,1,.36,1),opacity .3s}
html[data-dd="open"] .hdr .dd .dd-menu{max-height:480px;opacity:1}
.hdr .dd-menu a{flex-direction:row;padding:8px 0 8px 16px;border-radius:0}
.hdr .dd-menu a:hover{background:transparent;color:#E3000F}
.hdr .dd-menu b{font-weight:500}
.hdr .dd-menu span{display:none}
.hdr .dd-menu .dd-all{display:none}
}
@media (max-width:720px){
.hdr-r{display:none}
/* les deux boutons principaux, en bas du menu ouvert */
.hdr .nav .nav-cta{display:flex;flex-direction:column;gap:12px;margin-top:auto;padding-top:24px}
.hdr .nav .nav-cta a.btn{justify-content:center;width:100%;min-height:48px;padding:0 24px;font-size:var(--fs-p);border-bottom:0}
.hdr .nav .nav-cta a.btn-red{color:#ffffff}
.hdr .nav .nav-cta a.btn-out{color:var(--accent)}
}
@media (prefers-reduced-motion:reduce){
.burger,.burger span,.hdr .nav,.hdr .dd .dd-menu,.hdr .nav .dd-t svg,html[data-menu="open"] .hdr .nav,.hdr .nav > *{transition:none!important}
}