/* ═══════════════════════════════════════════════════════════════════
   nav.css — Nav globale + méga-menu + overlay mobile (partial build:nav)
   Chargée en <head> sur TOUTE page (render-blocking, comme style.css) :
   déplacé hors de assets/js/nav.js le 2026-08-07 (fix flash logo/vignettes
   non stylées). nav.js reste responsable du comportement (méga-menu,
   overlay, dropdown territoire, bascule de langue) ; ce fichier ne porte
   QUE le CSS, verbatim, jamais réécrit — toute règle ici a une contrepartie
   historique dans le HTML généré par scripts/build-nav-footer.mjs.
   ═══════════════════════════════════════════════════════════════════ */

:root{--nav-h:72px;--content-max:1240px;--content-pad:2.5rem}
.nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  height:var(--nav-h);
  display:flex;align-items:center;
  background:transparent;
  backdrop-filter:blur(0px);
  font-family:'Jost',system-ui,sans-serif;
}
/* Contenu nav pleine largeur avec le retrait standard — logo au même bord gauche que les mastheads/sections (grille gauche) */
.nav__shell{
  width:100%;
  padding:0 .75rem 0 var(--content-pad);
  display:flex;align-items:center;justify-content:space-between;
  /* gap MINIMUM garanti entre logo/nav__center et nav__center/nav__right (2026-07-27) :
     nav__center porte flex:1 (flex-basis:0) → son scaled shrink factor est nul, donc en cas
     de manque de place c'est LUI qui absorbe tout le déficit en restant collé à ses voisins
     (0px), pendant que logo et nav__right, bloqués à leur min-content (white-space:nowrap),
     ne peuvent pas se comprimer. justify-content:space-between seul ne garantit RIEN ici :
     il n'a d'effet que s'il reste de l'espace libre après le sizing flex, ce qui n'est pas le
     cas à 1280px. Valeur alignée sur le gap inter-liens de nav__center (1.1rem) pour rester
     cohérent avec les écarts 17-18px du reste de la nav. */
  gap:1.1rem;
}
.nav.nav--anim{transition:background .4s,backdrop-filter .4s}
.nav.nav--solid{
  background:rgba(249,247,242,.97);
  backdrop-filter:blur(20px);
}
/* Logo */
.nav__logo{display:flex;flex-direction:row;align-items:center;gap:.5rem;line-height:1;text-decoration:none}
.nav__logo-mark{height:30px;width:auto;flex-shrink:0;display:block;transform:translateY(-1px)}
.nav__logo .hkh{font-family:'Old Standard TT',serif;font-size:1.25rem;color:#fff;letter-spacing:.02em;white-space:nowrap;transition:color .4s}
.nav__logo .sub{font-size:.75rem;letter-spacing:.24em;text-transform:uppercase;color:#B87333}
.nav.nav--solid .nav__logo .hkh{color:#1A1A18}
.nav.nav--solid .nav__logo .sub{color:#9A5A1E}
/* Interior pages: dark text when transparent (light background) */
.nav.nav--interior .nav__logo .hkh{color:#1A1A18}
.nav.nav--interior .nav__logo .sub{color:#9A5A1E}
/* Center links */
.nav__center{display:flex;align-items:center;justify-content:center;gap:1.1rem;flex:1;white-space:nowrap}
.nav__center > a,
.nav__has-drop > a{
  font-size:1rem;letter-spacing:.04em;color:rgba(255,255,255,.88);
  transition:color .2s;text-shadow:0 1px 4px rgba(0,0,0,.6);
  position:relative;text-decoration:none;
}
.nav__center > a::after,
.nav__has-drop > a::after{
  content:'';position:absolute;bottom:-3px;left:0;height:1.5px;width:0;
  background:currentColor;transition:width .3s ease;
}
.nav__center > a:hover::after,
.nav__has-drop > a:hover::after,
.nav__center > a.active::after,
.nav__has-drop > a.active::after{width:100%}
.nav__center > a:hover,
.nav__has-drop > a:hover,
.nav__center > a.active,
.nav__has-drop > a.active{color:#fff}
.nav.nav--solid .nav__center > a,
.nav.nav--solid .nav__has-drop > a{color:#6B6660;text-shadow:none}
.nav.nav--solid .nav__has-drop:first-child > a,
.nav.nav--solid .nav__center > a[href="/investir.html"],
.nav.nav--interior .nav__has-drop:first-child > a,
.nav.nav--interior .nav__center > a[href="/investir.html"]{color:#1F1F1B}
.nav.nav--solid .nav__center > a:hover,
.nav.nav--solid .nav__has-drop > a:hover,
.nav.nav--solid .nav__center > a.active,
.nav.nav--solid .nav__has-drop > a.active{color:#1A1A18}
.nav.nav--interior .nav__center > a,
.nav.nav--interior .nav__has-drop > a{color:#6B6660;text-shadow:none}
.nav.nav--interior .nav__center > a:hover,
.nav.nav--interior .nav__has-drop > a:hover,
.nav.nav--interior .nav__center > a.active,
.nav.nav--interior .nav__has-drop > a.active{color:#1A1A18}
/* Dropdown */
.nav__has-drop{position:relative;display:flex;align-items:center}
.nav__drop{
  position:absolute;top:calc(100% + .5rem);left:50%;
  transform:translateX(-50%) translateY(-6px);
  background:rgba(249,247,242,.98);backdrop-filter:blur(20px);
  border:1px solid #EBE4D5;
  padding:1.2rem 1.4rem;
  display:grid;grid-template-columns:repeat(3,1fr);column-gap:1.6rem;
  min-width:380px;
  opacity:0;pointer-events:none;
  transition:opacity .2s,transform .2s;z-index:201;
}
.nav__drop::before{content:'';position:absolute;top:-.5rem;left:0;right:0;height:.5rem}
.nav__has-drop:hover .nav__drop{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.nav__drop-col{display:flex;flex-direction:column}
.nav__drop-family{
  font-size:.78rem;letter-spacing:.24em;text-transform:uppercase;color:#B87333;
  display:block;margin-bottom:.5rem;padding-bottom:.4rem;border-bottom:1px solid #EBE4D5;
}
.nav__drop a:hover{color:#B87333}
.nav__drop a::after{display:none!important}
/* Variant: Journal — single column, narrower */
.nav__drop--journal{
  grid-template-columns:1fr;column-gap:0;
  min-width:240px;padding:1.2rem 1.4rem;
}
.nav__drop--journal .nav__drop-family{
  margin-bottom:.8rem;padding-bottom:.5rem;
}
/* Right — gap 1.2rem par défaut (état d'avant régression, écarts 19.2px à 1440/1920px).
   Le resserrement à .4rem (2026-07-27, confiné 2026-07-27) ne s'applique QUE dans la bande
   ≤1329px via le media query en bas de fichier — voir ce media query pour la justification
   mesurée. Au-dessus de 1329px, cette règle s'applique seule et rend au pixel près l'état
   pré-régression : le gap logo/nav/territoire (voir .nav__shell) est déjà garanti par le
   gap:1.1rem du shell, indépendamment de la valeur ici — resserrer .nav__right partout
   comprimait sans raison les écarts internes vus par la majorité des visiteurs. */
.nav__right{display:flex;align-items:center;gap:1.2rem}
.nav__lang{display:flex;align-items:center;gap:.35rem;font-size:.7rem;color:rgba(255,255,255,.3);transition:color .4s}
.nav.nav--solid .nav__lang{color:#6B6660}
.nav.nav--interior .nav__lang{color:#6B6660}
.nav__lang .lang-btn,.nav .lang-btn{background:none;border:none;cursor:pointer;font-size:.7rem;color:rgba(255,255,255,.72);padding:0;font-family:'Jost',system-ui,sans-serif;transition:color .2s;position:relative;text-decoration:none;display:inline-block}
/* Zone de clic (2026-07-18) : le glyphe FR ne fait que 12×16px — sous le
   minimum de 24px, on rate la cible. Le pseudo-élément élargit la surface
   cliquable sans toucher au layout (le filet | ne bouge pas).
   ATTENTION : position:relative sur le bouton est OBLIGATOIRE, ici comme
   dans .mob-lang. Sans lui le ::after se cale sur le premier ancêtre
   positionné (.mob-ov, en position:fixed) et recouvre TOUT l'overlay du
   menu — chaque tap changeait la langue et le menu ne scrollait plus. */
.nav__lang .lang-btn::after,.mob-lang .lang-btn::after{content:'';position:absolute;inset:-10px -6px}
/* Focus clavier (2026-07-18) : le ring générique de style.css (outline 2px
   + outline-offset 4px) dessine autour d'un glyphe de 12×16 un cadre deux
   fois plus grand — un badge parasite dans une nav épurée. On garde
   l'affordance clavier avec la grammaire maison : filet sous le glyphe,
   comme l'item de nav actif. Jamais outline:none tout court. */
.nav .lang-btn:focus-visible,.mob-lang .lang-btn:focus-visible{
  outline:none;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;
}
.nav.nav--solid .lang-btn{color:#6B6660}
.nav.nav--interior .lang-btn{color:#6B6660}
.lang-btn.active,.lang-btn:hover,.lang-btn:focus-visible{color:#B87333}
/* A11y (2026-07-18) : sur fond CLAIR, le cuivre brut #B87333 tombe à 3.30:1.
   On passe au token accessible --copper-text-light (#9A5A1E) → 4.74:1. */
.nav.nav--solid .lang-btn.active,.nav.nav--interior .lang-btn.active,
.nav.nav--solid .lang-btn:hover,.nav.nav--interior .lang-btn:hover,
.nav.nav--solid .lang-btn:focus-visible,.nav.nav--interior .lang-btn:focus-visible{color:var(--copper-text-light)}
/* A11y : blanc sur cuivre brut = 3.79:1 (texte .68rem, poids 300 → pas du
   "large text"). Fond passé au cuivre accessible → blanc à 5.45:1. */
.nav__cta{
  font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;
  background:var(--copper-text-light);color:#fff;padding:.55rem 1.2rem;
  border:1px solid var(--copper-text-light);transition:background .3s,color .3s;white-space:nowrap;
  text-decoration:none;font-family:'Jost',system-ui,sans-serif;
}
.nav__cta:hover{background:transparent;color:var(--copper-text-light)}
/* WhatsApp — icône nav (variante C, choix Founder 2026-07-26) */
.nav__wa{
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  width:32px;height:32px;border-radius:50%;
  border:1.3px solid rgba(255,255,255,.55);color:rgba(255,255,255,.85);
  text-decoration:none;transition:border-color .2s,color .2s,transform .2s;
}
.nav__wa svg{width:16px;height:16px;display:block}
.nav.nav--solid .nav__wa,.nav.nav--interior .nav__wa{border-color:rgba(58,58,52,.32);color:#6B6660}
.nav__wa:hover,.nav__wa:focus-visible{border-color:var(--copper-text-light);color:var(--copper-text-light)}
.nav__wa:focus-visible{outline:none}
@media(hover:hover) and (pointer:fine){.nav__wa:hover{transform:scale(1.03)}}
@media(prefers-reduced-motion:reduce){.nav__wa{transition:none}}
/* Burger */
.nav__burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px}
.nav__burger span{display:block;width:22px;height:1.5px;background:#fff;transition:all .3s}
.nav.nav--solid .nav__burger span{background:#1A1A18}
.nav.nav--interior .nav__burger span{background:#1A1A18}
.nav__burger.open span:nth-child(1){transform:rotate(45deg) translate(4.5px,4.5px)}
.nav__burger.open span:nth-child(2){opacity:0}
.nav__burger.open span:nth-child(3){transform:rotate(-45deg) translate(4.5px,-4.5px)}
/* Mobile overlay */
.mob-ov{
  position:fixed;inset:0;background:#F9F7F2;z-index:999;
  display:flex;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .3s,visibility 0s linear .3s;
}
.mob-ov.open{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .3s,visibility 0s}
.mob-hdr{
  display:flex;align-items:center;justify-content:space-between;
  padding:1.2rem 1.5rem;border-bottom:1px solid #EBE4D5;flex-shrink:0;
  position:sticky;top:0;background:#F9F7F2;z-index:2;
}
.mob-logo{display:flex;align-items:center;gap:.5rem;text-decoration:none}
.mob-logo__mark{height:28px;width:auto;flex-shrink:0;display:block;transform:translateY(-1px)}
.mob-hdr .hkh{font-family:'Old Standard TT',serif;font-size:1.3rem;color:#1A1A18;letter-spacing:.06em}
.mob-hdr .sub{font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:#B87333;display:block}
.mob-x{background:none;border:none;font-size:1.8rem;cursor:pointer;color:#1A1A18;line-height:1;padding:.2rem .4rem}
.mob-prod{padding:1.5rem 1.8rem;flex-shrink:0;border-bottom:1px solid #EBE4D5}
.mob-prod h3{font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:#6B6660;margin-bottom:1rem}
/* Scopé sous #mobOv (2026-07-22) : la page habitats.html réutilise les
   mêmes noms .res-sc/.rt/.rt__img pour ses cartes → sans ce scope, son
   <style> écrasait les vignettes du drawer (62px au lieu de 111px). */
#mobOv .res-sc{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem 1.4rem;padding-bottom:.25rem}
#mobOv .rt{display:flex;flex-direction:column;align-items:center;gap:.5rem;text-decoration:none;width:100%}
#mobOv .rt__img{width:100%;aspect-ratio:7/5;position:relative;overflow:hidden;background:none;border:none}
#mobOv .rt__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
#mobOv .rt__n{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:#6B6660;white-space:nowrap}
#mobOv .rt__m{text-transform:none;letter-spacing:.02em;color:#B87333}
#mobOv .rt__m::before{content:'·';margin:0 .45em;color:#6B6660}
.mob-nav{display:flex;flex-direction:column;padding:0 1.8rem;flex-shrink:0}
.mob-nav a{font-size:1.1rem;color:#1A1A18;text-decoration:none;padding:.8rem 0;border-bottom:1px solid #EBE4D5;letter-spacing:.02em}
.mob-nav a.active{color:#B87333}
/* WhatsApp — entrée tiroir (variante C, choix Founder 2026-07-26 — maquette _bench/whatsapp-contact.preview.html) */
.mob-nav a.mob-nav__wa{display:flex;align-items:center;gap:.6rem}
.mob-nav a.mob-nav__wa svg{width:17px;height:17px;color:var(--copper-text-light);flex-shrink:0}
.mob-bot{display:flex;align-items:center;justify-content:space-between;padding:1.2rem 1.8rem;border-top:1px solid #EBE4D5;flex-shrink:0}
.mob-lang{display:flex;align-items:center;gap:.4rem;font-size:.7rem;color:#6B6660}
/* Reset natif (2026-07-19) : #mobOv n'est PAS dans .nav, donc le reset
   border:none/background:none de .nav .lang-btn ne l'atteignait pas — les
   boutons FR/EN gardaient le cadre 2px outset + le fond gris natifs du
   navigateur. On les remet plats, comme la nav desktop. */
.mob-lang .lang-btn{color:#6B6660;position:relative;background:none;border:none;padding:0;cursor:pointer;font-family:'Jost',system-ui,sans-serif;font-size:.7rem;letter-spacing:.08em;text-decoration:none;display:inline-block}
.mob-lang .lang-btn.active{color:#B87333}
.mob-cta{font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;background:#B87333;color:#fff;padding:.55rem 1.2rem;border:1px solid #B87333;text-decoration:none}
/* Territory dropdown — desktop */
.nav__terr{position:relative;display:flex;align-items:center}
.nav__terr-trigger{background:none;border:none;cursor:pointer;display:flex;align-items:center;gap:.35rem;font-size:.7rem;color:rgba(255,255,255,.72);font-family:'Jost',system-ui,sans-serif;padding:0;transition:color .2s}
.nav.nav--solid .nav__terr-trigger,.nav.nav--interior .nav__terr-trigger{color:#6B6660}
.nav__terr-trigger:hover,.nav__terr-trigger[aria-expanded="true"]{color:#B87333}
.nav.nav--solid .nav__terr-trigger:hover,.nav.nav--solid .nav__terr-trigger[aria-expanded="true"],.nav.nav--interior .nav__terr-trigger:hover,.nav.nav--interior .nav__terr-trigger[aria-expanded="true"]{color:#B87333}
.nav__terr-caret{font-size:.6rem;transform:translateY(1px);transition:transform .2s;display:inline-block}
.nav__terr-trigger[aria-expanded="true"] .nav__terr-caret{transform:translateY(1px) rotate(180deg)}
.nav__terr-menu{position:absolute;top:calc(100% + .6rem);right:0;background:#F9F7F2;border:1px solid #EBE4D5;list-style:none;margin:0;padding:.4rem 0;min-width:160px;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .22s,transform .22s,visibility 0s linear .22s;z-index:1000;box-shadow:0 8px 24px rgba(0,0,0,.06)}
.nav__terr-menu.is-open{opacity:1;visibility:visible;transform:translateY(0);transition:opacity .22s,transform .22s,visibility 0s}
.nav__terr-opt{background:none;border:none;width:100%;text-align:left;padding:.5rem 1rem;font-size:.7rem;letter-spacing:.04em;color:#3A3A34;font-family:'Jost',system-ui,sans-serif;cursor:pointer;transition:background .15s,color .15s;display:flex;align-items:center}
.nav__terr-opt:hover,.nav__terr-opt.is-active{color:#B87333;background:rgba(184,115,51,.06)}
.nav__terr-opt.is-active::before{content:'';display:inline-block;width:.7rem;height:1px;background:#B87333;margin-right:.5rem;flex-shrink:0;position:relative;top:-.05em}
/* Territory dropdown — mobile */
.mob-terr{position:relative}
.mob-terr-trigger{background:none;border:none;cursor:pointer;display:flex;align-items:center;gap:.35rem;font-size:.72rem;color:#6B6660;font-family:'Jost',system-ui,sans-serif;padding:0;transition:color .2s}
.mob-terr-trigger:hover,.mob-terr-trigger[aria-expanded="true"]{color:#B87333}
.mob-terr-menu{position:absolute;bottom:calc(100% + .5rem);left:0;background:#F9F7F2;border:1px solid #EBE4D5;list-style:none;margin:0;padding:.4rem 0;min-width:160px;opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .22s,transform .22s,visibility 0s linear .22s;z-index:1000;box-shadow:0 -8px 24px rgba(0,0,0,.06)}
.mob-terr-menu.is-open{opacity:1;visibility:visible;transform:translateY(0);transition:opacity .22s,transform .22s,visibility 0s}
.mob-terr-opt{background:none;border:none;width:100%;text-align:left;padding:.5rem 1rem;font-size:.7rem;letter-spacing:.04em;color:#3A3A34;font-family:'Jost',system-ui,sans-serif;cursor:pointer;transition:background .15s,color .15s;display:flex;align-items:center}
.mob-terr-opt:hover,.mob-terr-opt.is-active{color:#B87333;background:rgba(184,115,51,.06)}
.mob-terr-opt.is-active::before{content:'';display:inline-block;width:.7rem;height:1px;background:#B87333;margin-right:.5rem;flex-shrink:0;position:relative;top:-.05em}
.mob-bot{flex-wrap:wrap;gap:.6rem}
/* ── Territoire nommé DANS la page — bouton + sélecteur ancré (2026-09-16) ──
   Un client de Guadeloupe a lu les prix France le 2026-09-10 : la grille est
   nommée à côté du montant, et ce nom s'ouvre. Le sélecteur de la barre de nav
   est masqué sous 1240 px (règle plus bas) et son duplicata mobile est enfoui
   dans le burger — d'où un menu autonome, qui ne porte aucune classe .nav__.
   Il vit dans nav.css et non dans une feuille de page : nav.js le construit, et
   nav.css est la seule feuille bloquante que TOUTES les pages chargent. */
.tbtn{font:inherit;letter-spacing:inherit;text-transform:inherit;background:none;border:0;padding:0;cursor:pointer;position:relative;color:inherit}
/* Cible tactile 44 px portée par un pseudo hors-flux : du padding décalerait
   la ligne de texte de l'étiquette, qui doit rester une seule ligne. */
.tbtn::before{content:'';position:absolute;left:-.45rem;right:-.45rem;top:50%;height:44px;transform:translateY(-50%)}
.tbtn::after{content:'';position:absolute;left:0;right:0;bottom:-3px;height:1px;background:var(--copper-lt);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.16,1,.3,1)}
@media(hover:hover) and (pointer:fine){.tbtn:hover::after{transform:scaleX(1)}}
.tbtn[aria-expanded="true"]::after{transform:scaleX(1)}
.tbtn:focus-visible{outline:2px solid var(--copper);outline-offset:4px}
.tbtn__caret{font-size:.6rem;margin-left:.32em;display:inline-block;transition:transform .22s cubic-bezier(.16,1,.3,1)}
.tbtn[aria-expanded="true"] .tbtn__caret{transform:rotate(180deg)}
@media(prefers-reduced-motion:reduce){.tbtn::after,.tbtn__caret{transition:none}}
/* Menu — même grammaire que .nav__terr-menu, classes propres. position:fixed
   et non absolute : l'étiquette de prix d'habitats.html vit dans
   .hab-panel__body{overflow-y:auto}, qui clipperait un dropdown ancré au flux.
   JS pose left/top et borne le menu à 12 px des bords (375 px compris). */
.terr-pick{position:fixed;top:0;left:0;background:#F9F7F2;border:1px solid #EBE4D5;list-style:none;margin:0;padding:.3rem 0;min-width:170px;max-width:calc(100vw - 24px);opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .22s,transform .22s,visibility 0s linear .22s;z-index:1200;box-shadow:0 8px 24px rgba(0,0,0,.08)}
.terr-pick.is-open{opacity:1;visibility:visible;transform:translateY(0);transition:opacity .22s,transform .22s,visibility 0s}
.terr-pick__opt{background:none;border:none;width:100%;text-align:left;padding:.7rem 1rem;min-height:44px;font-size:.72rem;letter-spacing:.04em;color:#3A3A34;font-family:'Jost',system-ui,sans-serif;cursor:pointer;transition:background .15s,color .15s;display:flex;align-items:center}
/* --copper-text-light (5,2:1 sur #F9F7F2) plutôt que le --copper de la nav,
   qui n'y tient que 3,54:1 pour du 0,72 rem. */
.terr-pick__opt:hover,.terr-pick__opt.is-active{color:var(--copper-text-light);background:rgba(184,115,51,.06)}
.terr-pick__opt.is-active::before{content:'';display:inline-block;width:.7rem;height:1px;background:var(--copper);margin-right:.5rem;flex-shrink:0;position:relative;top:-.05em}
@media(prefers-reduced-motion:reduce){.terr-pick{transition:opacity .01s,visibility 0s}}
@media(max-width:1240px){
  .nav__center,.nav__right .nav__lang,.nav__cta,.nav__right .nav__terr,.nav__right .nav__wa{display:none}
  .nav__burger{display:flex}
}
/* Resserrement .nav__right confiné (2026-07-27) : mesuré au DOM (getBoundingClientRect),
   pas estimé. .nav__center est flex:1 flex-basis:0 avec des liens white-space:nowrap →
   il ne peut pas rétrécir sous son min-content (~691px) ; au-delà, tout excédent est
   absorbé par .nav__right qui déborde du viewport (clip invisible, body overflow-x:clip).
   Seuil réel mesuré : à gap:1.2rem sur .nav__right, le bord droit du bloc reste à une
   position FIXE (~1317px depuis le bord gauche, indépendante de la largeur tant qu'il y a
   débordement) — donc le viewport doit faire ≥1330px pour que ce bord retombe dans le
   viewport ET garde le padding droit (.75rem) intact. (Estimation précédente ~1400px
   invalidée par la mesure — le vrai seuil est ~130px plus bas.)
   Valeur de resserrement .4rem (pas .3rem) : à 1280px (largeur la plus étroite testée),
   .4rem est la valeur la MOINS agressive qui évite encore que .nav__right déborde du
   viewport (.5rem déborde de ~3px, .4rem tient avec ~1,4px de marge). */
@media(max-width:1329px){.nav__right{gap:.4rem}}
@media(max-width:640px){.nav__shell{padding:0 1.2rem}}