/* ═══════════════════════════════════════════════════════════════════════════
   Cabestian — nav + verre WebGL (module partagé loader.html ↔ champs.html)
   Source de vérité UNIQUE du style de la pill. Les tokens (--fm, --stalactite,
   --alu-ruby, --soft-titanium, --cashmere, --ruby, --alu-inset) proviennent du
   :root de chaque page (identiques des deux côtés).
   ═══════════════════════════════════════════════════════════════════════════ */

/* barre liquid-glass (canvas WebGL) : transparente hors de la pill, PAR-DESSUS le contenu qui défile dessous */
#gl{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:25;pointer-events:none}
/* NB : #glbg (canvas 2D, source de réfraction) est stylé PAR CHAQUE PAGE — son rôle diffère :
   loader = fond visible de la page (display:block; z-index:0) ; champs = offscreen (display:none). */

.nav{position:fixed;z-index:30;top:0;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;justify-content:space-between;padding:0 51px;
  width:min(681px,calc(100vw - 40px));height:55px;opacity:1;pointer-events:none;color:var(--stalactite)}
.nav .wm{position:relative;display:block;height:26px;pointer-events:auto}
/* Zone active du logo portée à 44 px de haut sans bouger le dessin (M17, audit du 23/09 :
   96 × 22 mesurés à 390 px). Même procédé que le bouton Contact et la langue. */
.nav .wm::after{content:'';position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:44px}
.nav .wm-logo{height:26px;width:auto;display:block;-webkit-user-select:none;user-select:none}
/* crossfade clair/sombre du logo lors du passage de la pill sur une section claire */
.nav .wm-light{position:absolute;top:0;left:0;opacity:0}
.nav .wm-dark,.nav .wm-light{transition:opacity .3s ease}
.nav.on-light .wm-dark{opacity:0}
.nav.on-light .wm-light{opacity:1}
.nav .links{display:flex;gap:30px;font-family:var(--fm);font-size:var(--t-petit);color:var(--soft-titanium)}
.nav .links i{font-style:normal;font-size:var(--t-micro);opacity:.7;display:inline-block;transition:transform .28s cubic-bezier(.16,1,.3,1)}
/* ===== menus déroulants ===== */
.nav .navitem{position:relative;pointer-events:auto;cursor:pointer;white-space:nowrap}
.nav .navitem:hover .lbl i{transform:rotate(180deg)}
/* pont invisible : couvre le gap entre le label et le menu (le hover ne se coupe pas) */
.nav .navitem::after{content:"";position:absolute;left:-12px;right:-12px;top:100%;height:22px}
.nav .dropdown{position:absolute;top:calc(100% + 16px);left:50%;transform:translate(-50%,-8px);
  min-width:236px;padding:8px;display:flex;flex-direction:column;gap:1px;
  background:rgba(9,18,27,.92);-webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%);
  border:1px solid rgba(165,184,208,.16);border-radius:14px;box-shadow:0 26px 70px rgba(0,0,0,.55);
  /* visibility (et pas seulement opacity) : opacity:0 laisse les liens du menu fermé DANS
     l'ordre de tabulation. Au clavier, le focus partait donc sur des liens invisibles.
     Le délai de .24s à la fermeture laisse le fondu se jouer avant le retrait. */
  opacity:0;pointer-events:none;visibility:hidden;
  transition:opacity .24s ease,transform .24s cubic-bezier(.16,1,.3,1),visibility 0s linear .24s}
/* Ouverture au focus clavier et à l'état déclaré (le déclencheur est un <button aria-expanded>) */
.nav .navitem:focus-within .dropdown,
.nav .lbl[aria-expanded="true"] + .dropdown{opacity:1;pointer-events:auto;transform:translate(-50%,0);
  visibility:visible;transition-delay:0s,0s,0s}
/* Ouverture au survol : réservée aux vrais pointeurs. Sur écran tactile, :hover reste collé
   après un appui et se battait avec l'état du bouton (menu ouvert puis refermé aussitôt). */
@media (hover:hover) and (pointer:fine){
  .nav .navitem:hover .dropdown{opacity:1;pointer-events:auto;transform:translate(-50%,0);
    visibility:visible;transition-delay:0s,0s,0s}
}
.nav .navitem:focus-within .lbl i{transform:rotate(180deg)}

/* Les déclencheurs et la bascule de langue sont passés de <span> à <button> (focusables) :
   on neutralise le style natif du bouton, comme le fait déjà .theme plus bas. */
.nav .lbl,.nav .lang{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;
  cursor:pointer;pointer-events:auto;display:inline-flex;align-items:center;gap:4px}
.nav .cta{border:none}

/* Indicateur de focus : la page ne définissait aucun :focus-visible, et remplaçait même
   l'outline des champs par une bordure à 1,85:1 (invisible). #C0455E = 3,84:1 sur le navy. */
:focus-visible{outline:2px solid #C0455E;outline-offset:3px;border-radius:3px}
.nav .dropdown a{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:9px;text-decoration:none;
  font-family:var(--fm);font-size:var(--t-petit);letter-spacing:.01em;color:var(--soft-titanium);transition:background .2s,color .2s}
.nav .dropdown a:hover{background:rgba(165,184,208,.09);color:var(--stalactite)}
.nav .dropdown .dd-num{color:#D17789;font-size:var(--t-micro);min-width:1.4em}
.nav .dropdown .dd-all{color:#D17789;border-top:1px solid rgba(165,184,208,.12);margin-top:5px;padding-top:13px}
.nav .navright{display:flex;align-items:center;gap:16px}
.nav .sep{width:1px;height:16px;background:rgba(207,208,212,.30)}
/* Cible tactile : le libellé fait 15x15 px, sous le minimum WCAG 2.2 (24x24). La zone
   cliquable est agrandie sans bouger le rendu, par une pseudo-zone centrée (audit 23/07). */
.nav .lang{position:relative;font-family:var(--fm);font-size:var(--t-micro);color:var(--soft-titanium);cursor:pointer;pointer-events:auto;letter-spacing:.06em}
/* Cible tactile du sélecteur de langue. Le libellé mesure 15x15 : sans cette zone, l'appui
   au doigt rate une fois sur deux. Portée de 32x32 à 40x44 (audit 03/08) : 44 en hauteur,
   la recommandation tactile, tenue dans une barre de 55 ; 40 en largeur et pas davantage,
   parce qu'il ne reste que 16 px de chaque côté avant le séparateur et le bouton Contact,
   dont les zones se recouvriraient alors. Le visuel ne bouge pas. */
.nav .lang::after{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:44px;height:44px}
.nav .theme{position:relative}
.nav .theme::after{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:40px;height:44px}
.nav .lang:hover{color:var(--stalactite)}
.nav.on-light .lang:hover{color:#06121A}
.nav .theme{width:16px;height:16px;color:var(--soft-titanium);background:none;border:none;padding:0;cursor:pointer;pointer-events:auto;display:inline-flex;align-items:center}
.nav .theme:hover{color:var(--stalactite)}
.nav.on-light .theme:hover{color:#06121A}
.nav .theme-ic{position:relative;width:16px;height:16px;display:inline-block}
.nav .theme-ic svg{position:absolute;inset:0;width:100%;height:100%;transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .35s ease}
.nav .ic-sun{opacity:1;transform:rotate(0) scale(1)}
.nav .ic-moon{opacity:0;transform:rotate(-90deg) scale(.4)}
html[data-theme="light"] .nav .ic-sun{opacity:0;transform:rotate(90deg) scale(.4)}
html[data-theme="light"] .nav .ic-moon{opacity:1;transform:rotate(0) scale(1)}
.nav .cta{font-family:var(--fm);font-size:var(--t-petit);color:var(--stalactite);background:var(--alu-ruby);box-shadow:var(--alu-inset);padding:7px 17px;border-radius:999px;pointer-events:auto;cursor:pointer;text-decoration:none}
/* auto-contraste : nav lisible sur fond clair */
.nav,.nav .wm,.nav .links,.nav .lang,.nav .theme{transition:color .3s ease}
.nav.on-light{color:#06121A}
.nav.on-light .links,.nav.on-light .lang,.nav.on-light .theme{color:#1B2B41}
.nav.on-light .sep{background:rgba(6,18,26,.22)}
/* press-feedback (le bouton Contact répond à l'appui) */
.nav .cta{transition:transform .16s cubic-bezier(.16,1,.3,1),color .2s,background .2s}
.nav .cta:active{transform:scale(.97)}
/* Cible tactile du bouton Contact : la pastille visible fait 27 px de haut sur téléphone,
   30 en grand écran. La zone d'appui est portée à 44 sans grossir la pastille, qui doit
   rester à l'échelle de la barre (audit 03/08). */
.nav .cta{position:relative}
.nav .cta::after{content:'';position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:44px}
/* Lien d'évitement : hors de l'écran tant qu'il n'a pas le focus, puis posé au-dessus de
   tout. Il permet d'atteindre le contenu au clavier sans traverser la barre. */
.cab-skip{position:fixed;top:0;left:50%;transform:translate(-50%,-140%);z-index:100;
  font-family:var(--fm,ui-monospace,monospace);font-size:var(--t-petit);letter-spacing:.08em;
  padding:12px 20px;border-radius:0 0 10px 10px;background:#63001F;color:#fff;
  text-decoration:none;transition:transform .18s cubic-bezier(.16,1,.3,1)}
.cab-skip:focus{transform:translate(-50%,0);outline:2px solid #fff;outline-offset:-4px}
/* La cible reçoit le focus par programme : pas de halo disgracieux au clic. */
main:focus,.hero:focus,section:focus{outline:none}

/* Le déclencheur du menu du téléphone n'existe qu'en dessous de 600px : au-dessus, les deux
   menus « Prestations » et « Communauté » sont affichés en clair et il ferait doublon. */
.nav .navitem-m{display:none}
.nav .navitem-m .lbl{position:relative;background:none;border:0;padding:0;color:inherit;
  cursor:pointer;display:inline-flex;align-items:center;pointer-events:auto}
.nav .navitem-m .menu-ic{width:20px;height:20px;display:block}
/* Cible tactile portée à 40px sans déplacer l'icône, comme pour la langue et le thème. */
.nav .navitem-m .lbl::after{content:'';position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);width:44px;height:44px}

/* mobile : nav épurée (logo + menu + langue + Contact), menus en clair et thème repliés */
@media (max-width:600px){
  .nav{padding:0 20px;width:calc(100vw - 24px)}
  .nav .links{display:none}
  .nav .theme{display:none}
  .nav .wm,.nav .wm-logo{height:22px}
  .nav .navright{gap:13px}
  .nav .cta{padding:6px 13px;font-size:11px}
  /* position:static (et non relative comme les autres .navitem) : le panneau en
     position:absolute prend alors la BARRE pour référence, et non le bouton de 20px,
     ce qui lui permet de s'étendre sur toute sa largeur. */
  .nav .navitem-m{display:inline-flex;align-items:center;margin-left:auto;margin-right:14px;
    position:static}
  /* Panneau ancré sous la barre, sur toute sa largeur : un menu centré de 220px, comme en
     desktop, serait à l'étroit et déborderait sur un écran de 390px. */
  .nav .navitem-m .dropdown{left:0;right:0;transform:translate(0,-8px);width:auto;min-width:0;
    max-height:calc(100vh - 120px);overflow-y:auto;-webkit-overflow-scrolling:touch}
  .nav .navitem-m .lbl[aria-expanded="true"] + .dropdown{transform:translate(0,0)}
  /* Au doigt, il n'y a pas de survol : seul l'état ouvert doit afficher le panneau. */
  .nav .navitem-m:hover .dropdown{opacity:0;pointer-events:none}
  .nav .navitem-m .lbl[aria-expanded="true"] + .dropdown{opacity:1;pointer-events:auto}
  .nav .dd-mobile .dd-group{display:block}
  .nav .dd-mobile .dd-group + .dd-group{margin-top:6px;padding-top:10px;
    border-top:1px solid rgba(165,184,208,.12)}
  /* 43 px mesurés à 390 : min-height porte chaque entrée à 44 (M17, audit du 23/09), le
     texte reste centré par le flex de .dropdown a. */
  .nav .dd-mobile a{padding:13px 14px;min-height:44px}
  /* Menu ouvert : la page ne défile plus derrière le panneau (classe posée par nav.js,
     audit du 23/09, m10). Le panneau garde son propre défilement, sans le transmettre. */
  html.cab-menu-ouvert,html.cab-menu-ouvert body{overflow:hidden}
  .nav .navitem-m .dropdown{overscroll-behavior:contain}
}