/* 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 8px;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.nm{height:14px;width:auto;display:block;flex:none;filter:saturate(.75);transition:filter .2s} /* 14 px au minimum (lisibilité mesurée le 08/10) */
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}
html body nav.mx a[aria-current]::after{content:"";position:absolute;left:4px;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{padding:3px 6px}html body nav.mx ul{gap:0 8px}}
/* 09/10 : sous 480 px, les quatre noms ne tiennent pas sur une ligne (373 px de noms, plus les marges) : deux lignes
   centrées, pour que chaque maison reste visible et touchable (WCAG 1.4.10, relevé par IA Rampe). */
@media(max-width:480px){html body nav.mx{max-height:84px}html body nav.mx ul{flex-wrap:wrap;justify-content:center;overflow-x:visible;row-gap:8px}html body nav.mx .mx-in{padding-block:2px}}

/* 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}}
/* Noms en lettres-images (noms/noms.mjs) : l'image porte le nom, le texte .nm-lu le dit aux lecteurs d'écran ;
   en contraste élevé, l'image disparaît et le texte s'affiche. */
.nm-lu{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.nv.nv-img{aspect-ratio:auto;height:auto}
.nv-img img.nm{display:block;height:var(--nv-h,34px);width:auto}
.fam-txt b img.nm{display:block;height:auto;width:auto;max-height:24px;max-width:calc(100% - 18px)}
.fam-mot img.nm{display:block;height:28px;width:auto}
@media(forced-colors:active){img.nm{display:none!important}.nm-lu{position:static;width:auto;height:auto;overflow:visible;clip-path: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 */
/* Bloc famille (maison.mjs) : chaque site garde sa copie des règles du bloc depuis que brancher-famille.mjs est
   neutralisé (08/10). Les réglages communs passent donc ici, recopiés à chaque construction, avec un sélecteur plus
   précis que la copie du site. Noms alignés d'une carte à l'autre (signalé par IA Palier, 08/10) : cartes calées en
   haut, ligne du nom de 24 px, nom en bas de cette ligne. */
.famille .fam-carte a,.famille .fam-carte.fam-ici{align-items:flex-start}
.famille .fam-txt b{display:flex;align-items:flex-end;min-height:24px}
@media(forced-colors:active){.famille .fam-txt b{min-height:0}}
/* 18/10 (décision de Flavien) : au téléphone, la barre des maisons se replie derrière un bouton. Les quatre noms sur
   deux rangées prenaient 84 px en tête de chaque page ; repliée, la barre tient sur une ligne de 40 px. Le bouton est
   ajouté par entete.js ; sans script, rien n'est replié et les deux rangées restent (scripting:enabled). */
html body nav.mx .mx-pli{display:none}
@media(max-width:480px) and (scripting:enabled){
  html body nav.mx{max-height:41px}
  html body nav.mx.mx-ouvert{max-height:none}
  html body nav.mx .mx-in{flex-direction:column;padding-block:2px}
  html body nav.mx.mx-pliable:not(.mx-ouvert) ul{display:none}
  /* Secours : si entete.js ne s'est pas exécuté au bout de 4 s (aucun bouton), les deux rangées réapparaissent. */
  html body nav.mx:not(.mx-pliable){animation:mx-secours 0s linear 4s forwards}
  html body nav.mx:not(.mx-pliable) ul{visibility:hidden;height:0;animation:mx-secours-ul 0s linear 4s forwards}
  html body nav.mx .mx-pli{display:inline-flex;align-items:center;gap:9px;min-height:36px;padding:0 14px;margin:0;border:0;border-radius:999px;background:none;color:inherit;
    font:inherit;font-size:13px;font-weight:600;letter-spacing:.01em;line-height:1;cursor:pointer;opacity:.86}
  html body nav.mx .mx-pli::after{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
  html body nav.mx.mx-ouvert .mx-pli::after{transform:translateY(2px) rotate(-135deg)}
  html body nav.mx .mx-pli:hover{opacity:1;background:color-mix(in srgb,currentColor 7%,transparent)}
  html body nav.mx .mx-pli:focus-visible{outline:2px solid currentColor;outline-offset:-2px}
  html body nav.mx.mx-ouvert ul{padding-bottom:6px}
}
@keyframes mx-secours{to{max-height:84px}}
@keyframes mx-secours-ul{to{visibility:visible;height:auto}}