/* Vigilae — tokens de design & filets responsive PARTAGES.
   Importe en PREMIER dans chaque page (avant les styles propres a la surface).
   Breakpoints canoniques (valeurs LITTERALES en @media, car les var() n'y sont pas autorisees) :
     600px  = telephone | 900px = bascule sidebar->drawer (couvre l'iPad portrait) | 1200px = confort large.
   Mobile-first : styles de base = mobile, on enrichit en @media (min-width:...). */
:root{
  --tap:44px;            /* cible tactile minimale */
  --tap-lg:48px;         /* action critique (Se connecter, Ajouter une piece) */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px;
  --sat:env(safe-area-inset-top,0px);    --sab:env(safe-area-inset-bottom,0px);
  --sal:env(safe-area-inset-left,0px);   --sar:env(safe-area-inset-right,0px);
}
/* Masquage visuel mais EXPOSÉ aux lecteurs d'écran (labels, libellés de région live, liens d'évitement). */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Lien d'évitement : hors écran, visible quand il reçoit le focus clavier (premier Tab de la page). */
.skip{position:absolute;left:8px;top:-48px;z-index:200;background:var(--card,#0e1a16);color:inherit;border:1px solid var(--line,#27433a);border-radius:8px;padding:8px 14px;text-decoration:none;transition:top .15s}
/* Sélecteur de langue FLOTTANT (login/cockpit/verif/collecte : host en position:fixed) : chip OPAQUE — sans fond,
   le <select> transparent laissait transparaître le contenu et se superposait aux éléments de la page. Et sur les
   pages à barre supérieure (cockpit), `:has()` réserve la place à droite pour ne pas recouvrir le lien de la topbar.
   L'app (host `vgLangSelect-host` intégré à la sidebar, jamais fixed) n'est PAS concernée. */
#vgLangSelectNav-host[style*="fixed"]{background:var(--card,#fff);border:1px solid var(--line,#e7ede9);border-radius:10px;box-shadow:0 6px 18px rgba(12,24,19,.14)}
@media(min-width:601px){ body:has(#vgLangSelectNav-host[style*="fixed"]) .topbar{padding-right:150px} }
.skip:focus{top:8px}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}            /* pas d'inflation auto du texte en paysage iOS */
html,body{overflow-x:hidden;overflow-x:clip}   /* anti scroll horizontal ; `clip` n'établit PAS de conteneur de défilement (sinon overflow-y devient auto et casse position:sticky de la sidebar). `hidden` = repli navigateurs anciens. */
img,video{max-width:100%;height:auto}          /* aucun media bitmap ne deborde sa colonne */
svg{max-width:100%}                             /* SVG : borne la largeur sans toucher la hauteur (icones a taille fixe) */
/* Barre de navigation responsive (CORRECTIF bug « le menu du haut disparaît sur tarifs / en dessous de 900px »).
   Les pages autonomes (tarifs, partenaires…) et marketing.css masquaient .nav-links en `display:none` sous 860/900px
   SANS repli — le menu devenait injoignable et le seul retour possible était le logo. Ici on NE masque plus : sous
   900px le menu passe en 2e ligne, pleine largeur, centré et compact, donc toujours navigable. Le sélecteur
   `header .nav-links` (spécificité 0,1,1) l'emporte sur les règles inline `.nav-links{display:none}` (0,1,0) quel que
   soit l'ordre de chargement — donc pas besoin de rééditer le CSS inline de chaque page ni de retraduire. */
@media(max-width:900px){
  header .nav{flex-wrap:wrap;row-gap:8px}
  header .nav-links{display:flex;order:3;flex-basis:100%;width:100%;justify-content:center;flex-wrap:wrap;gap:8px 18px;font-size:13.5px}
}
header a.logo{cursor:pointer}                    /* le logo d'en-tête est un lien vers l'accueil — curseur explicite */