/* En-tête commun des maisons (04/10) : le bandeau des quatre maisons et le nom en lettres vidéo. */

/* Bandeau des maisons (04/10, refait) : il prend la couleur et la police du site ; une lettre-monument par maison ;
   la maison où l'on est se signale par sa couleur et un trait. Préfixe « html body nav.mx » : il ne doit hériter d'aucun
   style du menu du site. Replié au défilement seulement dans un en-tête fixe (Everywhere, Digital). */
html body nav.mx{display:block;color:var(--mx-encre,inherit);font-family:inherit;font-size:13px;font-weight:400;letter-spacing:0;text-transform:none;line-height:1;
  border-bottom:1px solid color-mix(in srgb,currentColor 12%,transparent);max-height:44px;overflow:hidden;transition:max-height .35s ease,opacity .3s}
html.mx-replie body header nav.mx:not(:focus-within){max-height:0;opacity:0;border-bottom-color:transparent}
html body nav.mx .mx-in{display:flex;align-items:center;justify-content:flex-end;width:var(--mx-larg,min(1240px,100% - 2*var(--gut,20px)));margin-inline:auto;min-height:36px}
html body nav.mx ul{display:flex;flex-wrap:nowrap;align-items:center;gap:0 4px;list-style:none;margin:0;padding:0;overflow-x:auto;scrollbar-width:none}
html body nav.mx li{display:block!important;flex:none!important;width:auto!important;margin:0;padding:0}
html body nav.mx a{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:30px;padding:3px 10px 3px 4px;border-radius:999px;color:inherit;font:inherit;letter-spacing:inherit;
  text-transform:none;text-decoration:none;white-space:nowrap;background:none;border:0;box-shadow:none;opacity:.72;transition:opacity .2s,background-color .2s}
html body nav.mx a img{width:20px;height:20px;border-radius:6px;display:block;flex:none;filter:saturate(.6);transition:filter .2s}
html body nav.mx a b{font-weight:700}
html body nav.mx a span{opacity:.9} /* .72 × .9 : au moins 4,5:1 sur les quatre fonds (mesuré 05/10) */
html body nav.mx a:hover{opacity:1;background:color-mix(in srgb,currentColor 7%,transparent)}html body nav.mx a:hover img{filter:none}
html body nav.mx a[aria-current]{opacity:1}
html body nav.mx a[aria-current] img{filter:none;box-shadow:0 0 0 1.5px var(--c)}
html body nav.mx a[aria-current]::after{content:"";position:absolute;left:32px;right:10px;bottom:1px;height:2px;border-radius:2px;background:var(--c)}
html body nav.mx a:focus-visible{outline:2px solid currentColor;outline-offset:1px;border-radius:999px}
@media(max-width:1100px){html body nav.mx a span{display:none}}
@media(max-width:640px){html body nav.mx .mx-in{justify-content:center}html body nav.mx a b{font-weight:600}html body nav.mx a{padding-right:8px;gap:6px}}
@media(max-width:460px){html body nav.mx a:not([aria-current]) b{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}html body nav.mx a:not([aria-current]){padding:3px}html body nav.mx a[aria-current]::after{left:30px}}

/* Le nom en lettres vidéo : la vidéo n'apparaît qu'à travers les lettres ; un fin liseré les détache du fond.
   « by everywhere » passe sous le nom. */
.marque:has(.nv),.brand:has(.nv){display:inline-grid!important;justify-items:start;align-items:start;gap:0!important;line-height:1}
.nv{display:inline-block;flex:none;height:var(--nv-h,34px);aspect-ratio:var(--r);vertical-align:middle;filter:drop-shadow(0 0 .7px rgba(0,0,0,.6)) drop-shadow(0 0 .7px rgba(255,255,255,.5))}
.nv-v{display:block;width:100%;height:100%;object-fit:fill;-webkit-mask:var(--m) center/100% 100% no-repeat;mask:var(--m) center/100% 100% no-repeat}
.nv-sous{display:block;margin-top:4px;font-family:'Space Mono',ui-monospace,Consolas,monospace;font-size:10px;font-weight:400;letter-spacing:.22em;text-transform:uppercase;opacity:.8;line-height:1}
@media(max-width:600px){.nv{height:auto;width:min(44vw,calc(26px * var(--r)))}.nv-sous{font-size:9px;letter-spacing:.18em}} /* un nom long (EVERYWHERE) ne pousse jamais le bouton hors de l'écran */
@media(prefers-reduced-motion:reduce){body nav.mx{transition:none}}
/* Everywhere : le point orange de la marque suit le nom. */
.marque:has(.nv-point){display:inline-flex!important;align-items:flex-end!important;gap:0!important}
.nv-point{flex:none;width:8px;height:8px;margin:0 0 3px 5px;border-radius:50%;background:#f0532a}
.marque:has(.nv-point) .nv-v{filter:brightness(1.45) saturate(1.15)} /* vidéo sombre sur fond charbon : on l'éclaire */