/* NAVIGATION UNIQUE · refonte du 2026-11-11 (partials/nav.php)
   Logo au centre, Anton blanc sur rouge, lettres serrées jusqu'a se toucher ;
   entrées de part et d'autre ; un bouton menu qui ouvre tout le site en plein
   écran, le même sur ordinateur et sur téléphone.
   Cette feuille passe APRÈS css/styles.bundle.css (le partiel est dans le
   corps de page) et ne vise que .nav--centre et .mobile-menu--groupes : les
   pages qui ont encore leur propre menu ne sont pas touchées. */

@font-face{font-family:'Anton';src:url('/assets/fonts/Anton-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
/* FAMILLE DÉDIÉE AU MENU. Plusieurs pages chargent aussi Montserrat chez
   Google en display=optional : Chrome renonce alors à la police pour tout
   texte affiché après les premières millisecondes, donc le menu plein écran
   et les sous-menus tombaient dans une condensee système (constaté le
   2026-11-11, police rendue Helvetica Compressed). Un nom à part, servi par
   le site, en swap : le menu à toujours sa police. */
@font-face{font-family:'AS Nav';src:url('/assets/fonts/local/montserrat-500-latin.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'AS Nav';src:url('/assets/fonts/local/montserrat-600-latin.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

.nav.nav--centre{
  --nv-encre:#e9e3d8;
  --nv-sourd:rgba(233,227,216,.62);
  --nv-filet:rgba(233,227,216,.10);
  --nv-rouge:#ae0000;
  --nv-or:#cda85c;
  --nv-lien:600 11.5px/1 'AS Nav','Montserrat',sans-serif;
  padding:16px 0;
  /* Fond plein, partout. Le dégradé transparent d'origine rendait les liens
     illisibles sur les pages claires (Shadow Picks) : un seul menu veut dire
     une seule lecture, quel que soit le fond. */
  background:#0a0a0a;border-bottom:1px solid rgba(233,227,216,.08);
}
.nav.nav--centre.nav--scrolled{padding:10px 0;background:#0a0a0a;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;border-bottom-color:rgba(233,227,216,.08)}
.nav.nav--centre.nav--scrolled::after{display:none}

.nav--centre .nav__inner{
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;column-gap:32px;
  max-width:1440px;padding:0 clamp(16px,3.4vw,40px);
}
.nav--centre .nav__cote{display:flex;align-items:center;gap:28px;min-width:0}
.nav--centre .nav__cote--d{justify-content:flex-end}
.nav--centre .nav__links{gap:28px}

/* Les entrées : capitales espacees, une seule graisse, aucune lueur. */
.nav--centre .nav__link{
  font:var(--nv-lien);letter-spacing:.22em;color:var(--nv-encre);
  padding:8px 0;text-shadow:none!important;transform:none!important;
}
.nav--centre .nav__link::after{bottom:0;left:0;width:100%;height:1px;background:var(--nv-rouge);box-shadow:none!important;transform:scaleX(0);transform-origin:left center;transition:transform .25s cubic-bezier(.16,1,.3,1)}
.nav--centre .nav__link:hover::after,
.nav--centre .nav__link:focus-visible::after,
.nav--centre .nav__link.is-current::after{width:100%;transform:scaleX(1)}
.nav--centre .nav__link.is-current{color:#fff}
.nav--centre .nav__chevron{width:8px;height:5px;margin-left:2px;opacity:.55}

/* Les sous-menus : même vocabulaire, une ligne par entrée, jamais coupee. */
.nav--centre .nav__dropdown{
  min-width:0;width:max-content;padding:10px 0;border-radius:0;
  background:#0b0b0b;border:1px solid var(--nv-filet);border-top:1px solid var(--nv-rouge);
  box-shadow:0 18px 40px rgba(0,0,0,.6);backdrop-filter:none;-webkit-backdrop-filter:none;
  top:calc(100% + 8px);
}
.nav--centre .nav__dropdown::before{top:-16px;height:16px}
.nav--centre .nav__dropdown-item{padding:10px 20px;gap:0}
.nav--centre .nav__dropdown-item:hover{background:rgba(174,0,0,.10)}
.nav--centre .nav__dropdown-title{
  font:500 12px/1.2 'AS Nav','Montserrat',sans-serif;letter-spacing:.06em;text-transform:none;
  color:var(--nv-sourd);white-space:nowrap;
}
.nav--centre .nav__dropdown-item:hover .nav__dropdown-title{color:#fff}

/* L'action : un cadre rouge, pas un aplat. Le rouge plein reste au logo. */
.nav--centre .nav__cta.btn--red{
  margin:0;padding:12px 16px;border:1px solid var(--nv-rouge);border-left:1px solid var(--nv-rouge);
  border-radius:0;background:transparent;
  font:600 11px/1 'AS Nav','Montserrat',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#fff;
  box-shadow:none;white-space:nowrap;display:inline-block;
}
.nav--centre .nav__cta.btn--red:hover{background:var(--nv-rouge);transform:none;box-shadow:none}

/* LE MOT-SYMBOLE. Anton, blanc sur rouge, chaque lettre ramenée sur la
   précédente ; le L garde un quart du serrage de chaque côté. */
.nav--centre .nav__marque{display:block;line-height:0;text-decoration:none;outline-offset:6px}
.nav--centre .nav__logo.as-marque{
  display:inline-flex;align-items:center;height:auto;
  background:var(--nv-rouge);color:#fff;
  padding:5px 11px 3px;
  font-family:'Anton',Impact,'Oswald',sans-serif!important;font-weight:400!important;
  font-size:34px;line-height:1;letter-spacing:0;white-space:nowrap;
  transition:font-size .3s cubic-bezier(.16,1,.3,1);
}
.nav--centre .as-marque>span{display:inline-block;font-family:inherit!important;margin-left:-.035em}
.nav--centre .as-marque>.m-tete{margin-left:0}
.nav--centre .as-marque>.m-air{margin-left:-.009em}
.nav--centre .as-marque>.m-esp{width:.16em;margin-left:0}
.nav--centre.nav--scrolled .nav__logo.as-marque{font-size:28px}

/* LE BOUTON MENU : visible à toutes les largeurs, il porte "tout le site". */
.nav--centre .nav__hamburger{
  display:flex;flex-direction:column;justify-content:center;gap:6px;
  width:24px;height:24px;padding:0;margin:0;border:0;background:none;flex:0 0 auto;
}
.nav--centre .nav__hamburger span{height:1.5px;background:var(--nv-encre);border-radius:0}
.nav--centre .nav__hamburger--open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav--centre .nav__hamburger--open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.nav--centre .nav__hamburger:focus:not(:focus-visible){outline:none;box-shadow:none;background:none}
.nav--centre .nav__hamburger:focus-visible,
.nav--centre .nav__link:focus-visible,
.nav--centre .nav__cta:focus-visible{outline:2px solid var(--nv-or);outline-offset:4px}

/* RANGEE DU DESSOUS : les sections de la page, puis "Tout le site". */
.nav--centre .nav__second-bar{border-top:1px solid var(--nv-filet);background:rgba(8,8,8,.94);margin-top:14px}
.nav--centre.nav--scrolled .nav__second-bar{margin-top:10px}
.nav--centre .nav__second{padding-top:2px;padding-bottom:2px}
.nav--centre .nav__second-link{font:500 10.5px/1 'AS Nav','Montserrat',sans-serif;letter-spacing:.16em;color:rgba(205,168,92,.86)}
.nav--centre .nav__second-tout{
  display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;min-height:30px;
  padding:4px 10px;border:0;background:none;cursor:pointer;
  font:600 10.5px/1 'AS Nav','Montserrat',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--nv-encre);
}
.nav--centre .nav__second-tout svg{width:12px;height:8px;transition:transform .2s ease}
.nav--centre .nav__second-tout:hover svg{transform:translateX(3px)}
.nav--centre .nav__second-tout:focus-visible{outline:2px solid var(--nv-or);outline-offset:2px}

/* Tablette et téléphone : bouton menu, logo, et rien d'autre dans la barre. */
@media (max-width:1024px){
  .nav.nav--centre{padding:12px 0}
  .nav--centre .nav__inner{column-gap:12px}
  .nav--centre .nav__logo.as-marque{font-size:26px;padding:4px 9px 2px}
  .nav--centre.nav--scrolled .nav__logo.as-marque{font-size:24px}
  .nav--centre .nav__second-bar{margin-top:10px}
  .nav--centre .nav__cta.btn--red{display:inline-block;padding:10px 12px;font-size:10.5px;letter-spacing:.16em}
  .nav--centre .nav__cta-long{display:none}
  .nav--centre .nav__cta-court{display:inline}
  /* Sur petit écran, le bouton menu porte déjà "tout le site" : la rangée
     garde la place pour les sections de la page, qui sinon debordaient. */
  .nav--centre .nav__second-tout,
  .nav--centre .nav__second-sep{display:none}
  .nav--centre .nav__second-link{font-size:10px;letter-spacing:.1em;padding:.3rem .5rem}
}
@media (max-width:420px){
  .nav--centre .nav__logo.as-marque{font-size:22px}
  .nav--centre.nav--scrolled .nav__logo.as-marque{font-size:21px}
}

/* La nav passe devant le menu ouvert, à toutes les largeurs : son bouton sert
   à le refermer. Les pages qui ont leur propre bouton de fermeture gardent le
   leur. */
body:not(:has(#shadowMenuClose)):not(:has(#mobile-menu-close)) .nav--centre:has(.nav__hamburger--open){
  z-index:calc(var(--z-mobile-menu,300) + 1);transform:none;background:#070707;
}
.nav--centre:has(.nav__hamburger--open) .nav__second-bar{display:none}

/* LE MENU PLEIN ECRAN · tout le site, range par groupes numérotés. */
.mobile-menu.mobile-menu--groupes{
  display:block;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  background:#070707;
  padding:112px clamp(16px,3.4vw,40px) calc(40px + env(safe-area-inset-bottom,0px));
  transition:opacity .35s cubic-bezier(.16,1,.3,1),visibility 0s linear .35s;
}
.mobile-menu.mobile-menu--groupes.mobile-menu--open{transition:opacity .35s cubic-bezier(.16,1,.3,1),visibility 0s}
.mobile-menu--groupes .mm{max-width:1360px;margin:0 auto;position:relative}
.mobile-menu--groupes .mm__fermer{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;background:none}
.mobile-menu--groupes .mm__fermer:focus-visible{position:static;width:auto;height:auto;clip:auto;margin:0 0 16px;padding:10px 14px;border:1px solid #cda85c;color:#e9e3d8;font:600 11px/1 'AS Nav','Montserrat',sans-serif;letter-spacing:.2em;text-transform:uppercase}
.mobile-menu--groupes .mm__grille{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:48px 40px;
  border-top:1px solid rgba(233,227,216,.10);padding-top:32px;
}
.mobile-menu--groupes .mm__groupe{
  opacity:0;transform:translateY(12px);
  transition:opacity .45s cubic-bezier(.16,1,.3,1),transform .45s cubic-bezier(.16,1,.3,1);
}
.mobile-menu--groupes.mobile-menu--open .mm__groupe{opacity:1;transform:none;transition-delay:calc(var(--i,1) * 50ms)}
.mobile-menu--groupes .mm__num{margin:0 0 12px;font:600 11px/1 'AS Nav','Montserrat',sans-serif;letter-spacing:.22em;color:#cda85c}

/* Les titres de groupe portent la typo du logo, sans le bloc rouge. */
.mobile-menu--groupes .mobile-menu__link,
.mobile-menu--groupes .mm__tete{opacity:1;transform:none;transition:color .18s ease;position:relative}
.mobile-menu--groupes .mm__tete{
  display:block;width:fit-content;margin:0 0 18px;
  font:400 32px/1 'Anton',Impact,'Oswald',sans-serif;letter-spacing:.01em;text-transform:uppercase;color:#f5f1e9;
}
.mobile-menu--groupes a.mm__tete:hover{color:#fff}
.mobile-menu--groupes .mm__liste{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.mobile-menu--groupes .mm__liste--deux{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}
.mobile-menu--groupes .mm__lien{
  display:block;padding:8px 0 8px 14px;
  font:500 15px/1.3 'AS Nav','Montserrat',sans-serif;letter-spacing:.01em;text-transform:none;
  color:rgba(233,227,216,.70);
}
.mobile-menu--groupes .mm__lien::before{
  content:'';position:absolute;left:0;top:50%;width:9px;height:1px;background:rgba(233,227,216,.25);
  transform:scaleX(.667);transform-origin:left center;transition:transform .2s ease,background-color .2s ease;
}
.mobile-menu--groupes .mm__lien:hover{color:#fff}
.mobile-menu--groupes .mm__lien:hover::before,
.mobile-menu--groupes .mm__lien[aria-current]::before{transform:scaleX(1);background:#ae0000}
.mobile-menu--groupes .mobile-menu__link[aria-current]{color:#fff}
.mobile-menu--groupes .mobile-menu__link:focus-visible{outline:2px solid #cda85c;outline-offset:3px;text-shadow:none}
.mobile-menu--groupes .mobile-menu__link:focus-visible::before{left:0;top:50%}
.mobile-menu--groupes .mobile-menu__link:active{transform:none}
.mobile-menu--groupes .mobile-menu__link--active::after{display:none}

.mobile-menu--groupes .mm__pied{
  display:flex;flex-wrap:wrap;align-items:center;gap:20px 32px;
  margin-top:48px;padding-top:24px;border-top:1px solid rgba(233,227,216,.10);
}
.mobile-menu--groupes .mm__accueil{font:600 11.5px/1 'AS Nav','Montserrat',sans-serif;letter-spacing:.22em;text-transform:uppercase;color:#e9e3d8;padding:12px 0}
.mobile-menu--groupes .mobile-menu__cta-wrap{margin:0;padding:0;border:0;opacity:1;transform:none}
.mobile-menu--groupes .mm__devise{
  margin:0 0 0 auto;opacity:1;
  font:500 10.5px/1.4 'AS Nav','Montserrat',sans-serif;letter-spacing:.3em;text-transform:uppercase;color:rgba(233,227,216,.34);
}

/* Sous-groupes de "L'univers" : un intitulé discret, pas un second titre. */
.mobile-menu--groupes .mm__sous{
  margin:18px 0 4px;font:600 10.5px/1 'AS Nav','Montserrat',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:rgba(205,168,92,.78);
}
.mobile-menu--groupes .mm__tete--libre + .mm__sous{margin-top:0}

/* L'OFFRE MISE EN AVANT : la seule surface riche du menu. Filet rouge,
   promesse en Anton, prix et duree lus dans le catalogue, une action pleine. */
.mobile-menu--groupes .mm__offre{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:24px 48px;
  padding:28px 32px;background:#0f0e0d;
  border:1px solid rgba(233,227,216,.08);border-left:2px solid #ae0000;
}
.mobile-menu--groupes .mm__offre:has(.mm__offre-photo){grid-template-columns:132px minmax(0,1fr) auto}
.mobile-menu--groupes .mm__offre-photo{display:block;width:132px;height:132px;object-fit:cover;object-position:50% 30%;background:#151311}
.mobile-menu--groupes .mm__offre-kicker{margin:0 0 10px;font:600 10.5px/1 'AS Nav','Montserrat',sans-serif;letter-spacing:.22em;text-transform:uppercase;color:#cda85c}
.mobile-menu--groupes .mm__offre-titre{margin:0;font:400 clamp(24px,2.6vw,36px)/1.04 'Anton',Impact,'Oswald',sans-serif;letter-spacing:.005em;text-transform:uppercase;color:#f5f1e9}
.mobile-menu--groupes .mm__offre-meta{display:flex;flex-wrap:wrap;gap:6px 20px;margin:12px 0 0;font:500 13px/1.3 'AS Nav','Montserrat',sans-serif;color:rgba(233,227,216,.66);font-variant-numeric:tabular-nums}
.mobile-menu--groupes .mm__offre-meta span:first-child{color:#f5f1e9}
.mobile-menu--groupes .mm__offre-actions{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.mobile-menu--groupes .mm__cta{
  display:inline-flex;align-items:center;gap:10px;padding:16px 20px;
  background:#ae0000;border:1px solid #ae0000;color:#fff;
  font:600 11px/1 'AS Nav','Montserrat',sans-serif;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;
}
.mobile-menu--groupes .mm__cta:hover{background:#c40000;border-color:#c40000;color:#fff}
.mobile-menu--groupes .mm__cta svg{width:12px;height:8px;transition:transform .2s ease}
.mobile-menu--groupes .mm__cta:hover svg{transform:translateX(3px)}
.mobile-menu--groupes .mm__offre-lire{
  font:500 12px/1 'AS Nav','Montserrat',sans-serif;letter-spacing:.04em;text-transform:none;color:rgba(233,227,216,.72);
  text-decoration:underline;text-decoration-color:rgba(233,227,216,.3);text-underline-offset:4px;padding:4px 0;
}
.mobile-menu--groupes .mm__offre-lire:hover{color:#fff;text-decoration-color:#ae0000}

/* Ordinateur large : l'offre se loge sous "Marques & projets", la colonne la
   plus courte, pour être visible sans défiler sur un écran de 900 px. */
@media (min-width:1181px){
  .mobile-menu--groupes .mm__grille{grid-template-rows:auto 1fr}
  .mobile-menu--groupes .mm__groupe:nth-child(1){grid-column:1;grid-row:1 / span 2}
  .mobile-menu--groupes .mm__groupe:nth-child(2){grid-column:2;grid-row:1 / span 2}
  .mobile-menu--groupes .mm__groupe:nth-child(3){grid-column:3;grid-row:1}
  .mobile-menu--groupes .mm__groupe--univers{grid-column:4;grid-row:1 / span 2}
  .mobile-menu--groupes .mm__offre{grid-column:3;grid-row:2;align-self:start;grid-template-columns:1fr;gap:20px;padding:24px 24px 26px}
  .mobile-menu--groupes .mm__offre:has(.mm__offre-photo){grid-template-columns:1fr}
  .mobile-menu--groupes .mm__offre-photo{width:100%;height:auto;aspect-ratio:2/1;object-position:50% 26%}
  .mobile-menu--groupes .mm__offre-titre{font-size:28px}
}
@media (max-width:1180px){
  .mobile-menu--groupes .mm__offre{grid-column:1 / -1;order:-1}
}
@media (max-width:1180px){
  .mobile-menu--groupes .mm__grille{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .mobile-menu.mobile-menu--groupes{padding-top:84px}
  .mobile-menu--groupes .mm__grille{grid-template-columns:1fr;gap:36px;padding-top:24px}
  .mobile-menu--groupes .mm__tete{font-size:28px;margin-bottom:12px}
  .mobile-menu--groupes .mm__lien{font-size:15px;padding:8px 0 8px 14px}
  .mobile-menu--groupes .mm__pied{flex-direction:column;align-items:flex-start;gap:16px}
  .mobile-menu--groupes .mm__devise{margin:8px 0 0}
  /* Sur téléphone, l'offre passe en tete : après 33 liens, personne ne la verrait. */
  .mobile-menu--groupes .mm__offre{grid-template-columns:1fr;padding:22px 20px;gap:18px}
  .mobile-menu--groupes .mm__offre:has(.mm__offre-photo){grid-template-columns:88px minmax(0,1fr)}
  .mobile-menu--groupes .mm__offre-photo{width:88px;height:88px}
  .mobile-menu--groupes .mm__offre-actions{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px 20px}
}

@media (prefers-reduced-motion:reduce){
  .nav--centre .nav__logo.as-marque,
  .mobile-menu--groupes .mm__groupe,
  .mobile-menu.mobile-menu--groupes{transition:none}
  .mobile-menu--groupes .mm__groupe{opacity:1;transform:none}
}

/* Un contrôle dans la rangée du dessous (bouton d'ambiance d'AFRIKAN GODS)
   prend l'allure d'une entrée, pas d'un bouton système. */
.nav--centre button.nav__second-link{border:0;background:none;cursor:pointer;gap:6px;color:rgba(233,227,216,.7)}
.nav--centre button.nav__second-link[aria-pressed="true"]{color:#cda85c}
.nav--centre .nav__second-link[aria-current]{color:#f5f1e9}
/* AFRIKAN GODS masquait cette rangée quand la série avait sa propre barre
   (afrikan-gods/ag.css). Elle porte désormais les sections de la série. */
.ag .nav--centre .nav__second-bar{display:block}
.nav--centre .nav__second-link[hidden]{display:none}

/* Menu de contexte (data/nav-contextes.json) : autant de colonnes que de
   groupes, sans carte d'offre. */
@media (min-width:1181px){
  .mobile-menu--groupes .mm__grille--n3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mobile-menu--groupes .mm__grille--n3 .mm__groupe:nth-child(n){grid-column:auto;grid-row:auto}
}

/* L'action a deux libellés : complet sur ordinateur, court sur téléphone
   (« Réserver », « Collaborer »). */
@media (min-width:1025px){.nav--centre .nav__cta-court{display:none}}

/* Les pages marques stylent toutes les sections (.b2b section : marge et
   filet). Le menu plein écran en contient : on les neutralise. */
.mobile-menu--groupes section.mm__groupe{padding:0;border:0;margin:0;background:none}
/* Libellé court plus long que « Réserver » (« Collaborer ») : il doit tenir
   dans la colonne de droite à 375 px. */
@media (max-width:420px){
  .nav--centre .nav__cta.btn--red{padding:9px 8px;font-size:10px;letter-spacing:.05em}
  .nav--centre .nav__inner{column-gap:10px}
}
@media (max-width:380px){
  .nav--centre .nav__logo.as-marque,.nav--centre.nav--scrolled .nav__logo.as-marque{font-size:19px;padding:4px 7px 2px}
}