/* bandeau, navigation, menu mobile */

/* ---------- en-tête : bandeau blanc ---------- */
.site-head{position:fixed;top:0;left:0;right:0;z-index:50;background:#fff;border-top:3px solid var(--crimson);
  box-shadow:0 1px 0 var(--line);transition:box-shadow .3s ease,transform .58s cubic-bezier(.32,.72,.28,1)}
.site-head.cache{transform:translateY(-102%)}
.site-head.solid{box-shadow:0 6px 22px rgba(28,28,28,.09)}
.head-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:78px}
.brand{grid-column:2;grid-row:1;justify-self:center;display:block}
.brand img{height:66px;width:auto;display:block;transform-origin:center;
  transition:transform .5s cubic-bezier(.2,.7,.3,1),filter .5s ease}
.brand:hover img,.brand:focus-visible img{transform:translateY(-2px) scale(1.035);
  filter:drop-shadow(0 4px 10px rgba(158,6,22,.22))}

nav.main{display:contents}
nav.main>ul{display:flex;list-style:none;margin:0;padding:0;align-items:center}
.nav-left{grid-column:1;grid-row:1;justify-content:flex-end;padding-right:26px}
.nav-right{grid-column:3;grid-row:1;justify-content:flex-start;padding-left:26px}
nav.main li{position:relative}
nav.main>ul>li>a{
  position:relative;display:flex;align-items:center;height:78px;padding:0 14px;color:#6A6A6A;
  font-family:Montserrat,'Helvetica Neue',sans-serif;font-size:13px;font-weight:300;letter-spacing:.13em;
  text-transform:uppercase;white-space:nowrap;transition:color .25s ease;
}
nav.main>ul>li>a::after{content:"";position:absolute;left:14px;right:14px;bottom:22px;height:2px;
  background:var(--crimson);transform:scaleX(0);transform-origin:left center;
  transition:transform .32s cubic-bezier(.3,.7,.3,1)}
nav.main>ul>li>a:hover{color:var(--crimson)}
nav.main>ul>li>a:hover::after,nav.main>ul>li>a:focus-visible::after{transform:scaleX(1)}
nav.main>ul>li.apply>a{color:var(--crimson)}
nav.main>ul>li.apply>a:hover{color:var(--crimson-dark)}
.drop{
  display:block;position:absolute;top:100%;left:0;min-width:274px;background:#fff;
  border-top:2px solid var(--crimson);box-shadow:0 18px 40px rgba(28,28,28,.14);
  list-style:none;margin:0;padding:8px 0;opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
}
nav.main li:hover>.drop,nav.main li:has(:focus-visible)>.drop{opacity:1;visibility:visible;transform:none}
.nav-right .drop{left:auto;right:0}
.drop a{display:block;padding:10px 22px;font-family:Montserrat,'Helvetica Neue',sans-serif;font-size:14px;
  font-weight:400;letter-spacing:.02em;color:#4A4A4A}
.drop a:hover{background:var(--stone-soft);color:var(--crimson)}
.burger{display:none;grid-column:3;grid-row:1;justify-self:end;background:none;border:0;padding:10px;cursor:pointer}
.burger span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0}

/* ---------- bandeau : paliers intermédiaires ---------- */
@media (max-width:1180px){
  nav.main>ul>li>a{font-size:11.5px;letter-spacing:.10em;padding:0 10px}
  nav.main>ul>li>a::after{left:10px;right:10px}
  .nav-left{padding-right:16px}
  .nav-right{padding-left:16px}
}
@media (max-width:900px){
  .burger{display:block;grid-column:2;grid-row:1}
  .head-inner{grid-template-columns:1fr auto;height:78px}
  .brand{grid-column:1;grid-row:1;justify-self:start}
  nav.main{display:block;position:fixed;inset:0 0 0 26%;background:#fff;
    padding:98px 26px 40px;overflow-y:auto;transform:translateX(100%);transition:transform .3s ease;
    box-shadow:-14px 0 40px rgba(10,22,38,.14);z-index:5}
  nav.main.open{transform:none}
  nav.main>ul{flex-direction:column;align-items:stretch;width:100%;margin:0}
  nav.main>ul>li>a{height:auto;padding:14px 0;font-size:13px;letter-spacing:.13em;border-bottom:1px solid var(--line)}
  nav.main>ul>li>a::after{display:none}
  .nav-right .drop{right:auto}
  .drop{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;background:transparent;
    border-top:0;padding:4px 0 14px 14px;min-width:0}
  .drop a{color:var(--muted);padding:7px 0;font-size:14px;text-transform:none;letter-spacing:0}
  .drop a:hover{background:none;color:var(--crimson)}
}

nav.main>ul>li.current>a{color:var(--crimson)}
nav.main>ul>li.current>a::after{transform:scaleX(1)}