/* 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 */
/* Anti scroll horizontal : sur BODY SEUL. L'overflow de body se propage au viewport tant que html reste
   `visible` (CSS Overflow 3 §3.3) : le viewport clippe en x, body lui-même reste `visible` (aucun conteneur
   de défilement, sticky de la sidebar préservé), et body.vg-noscroll{overflow:hidden} (plus bas) se propage
   de même — c'est CE qui verrouille le défilement de fond. ⚠️ responsive-12 (13/09) : posé aussi sur html
   (`html,body{…clip}`), il coupait cette propagation : le verrou du menu ☰ ne verrouillait plus rien et
   l'en-tête sticky se collait au bord de body, hors écran. NE JAMAIS poser d'overflow non visible sur html
   (test/vitrine-menu-verrou-defilement.test.mjs). `hidden` = repli navigateurs anciens. */
body{overflow-x:hidden;overflow-x:clip}
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 de la VITRINE — E6/E7 (audit 19/08). Remplace le repli « menu en 2e
   ligne » : sous 900px la topbar montre un hamburger (#vgNavBurger, >=44px, aria-expanded/controls) qui
   ouvre .nav-links en tiroir off-canvas — colonne, scrim, verrou de scroll, motif du drawer de l'app.
   Le comportement (ouverture, Échap, scrim, lien cliqué) vit dans i18n.js (vgNavMenu, include universel).
   Ces règles vivent ICI et non dans marketing.css : les pages tarifs ne chargent PAS marketing.css —
   tokens.css est la seule feuille commune à toutes les topbars. `header .nav-links` (0,1,1) l'emporte sur
   les règles inline `.nav-links{display:none}` (0,1,0) des pages autonomes, quel que soit l'ordre.
   Le tiroir glisse depuis la GAUCHE (translaté hors écran à droite, il créerait un débord horizontal) ;
   scrim et tiroir restent DANS le header : son backdrop-filter (vitrine) en fait le bloc conteneur des
   descendants fixed — un scrim frère du header passerait DEVANT le tiroir (contextes d'empilement). */
header .nav-burger{display:none}
header .nav-scrim{display:none}
header .nav-links .nav-lang{display:none}
header .nav-links .nav-aux{display:none}
body.vg-noscroll{overflow:hidden}         /* verrou du fond (menu ☰, tiroir app, modales, palette) : agit par PROPAGATION au viewport — cf. body{overflow-x} plus haut */
@media(max-width:900.98px){
  /* Repli hérité (« menu en 2e ligne ») : UNIQUEMENT pour une topbar sans hamburger — filet de sécurité
     si une page vitrine future arrivait sans le bouton ; aucune des pages actuelles n'en relève. */
  header .nav:not(:has(.nav-burger)){flex-wrap:wrap;row-gap:8px}
  header .nav:not(:has(.nav-burger)) .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 .nav-burger{width:var(--tap);height:var(--tap);display:inline-flex;align-items:center;justify-content:center;flex:none;
    border:1px solid var(--line2,#dde6e1);background:var(--card,#fff);border-radius:11px;font-size:19px;color:var(--ink2,#16231e);cursor:pointer;padding:0}
  header .nav-links{display:flex;position:fixed;left:0;top:0;height:100dvh;width:min(86vw,320px);margin:0;z-index:1000;
    flex-direction:column;align-items:stretch;justify-content:flex-start;flex-wrap:nowrap;gap:4px;padding:76px 20px 24px;overflow-y:auto;overscroll-behavior:contain;
    background:var(--card,#fff);border-right:1px solid var(--line,#e7ede9);box-shadow:0 18px 50px rgba(8,16,13,.4);
    transform:translateX(-100%);visibility:hidden;transition:transform .28s ease,visibility 0s linear .28s}
  header .nav-links.open{transform:translateX(0);visibility:visible;transition:transform .28s ease}
  header .nav-links a{display:block;padding:11px 12px;min-height:var(--tap);font-size:16px;border-radius:10px;color:var(--ink2,#16231e)}
  header .nav-links a:hover{background:var(--teal-bg,#E2F4ED);color:var(--teal,#0F6E56)}
  header .nav-links .nav-aux{display:block}
  /* E7 : le sélecteur de langue vit AUSSI dans le tiroir (hôte #vgLangSelectMenu-host, rendu par i18n.js). */
  header .nav-links .nav-lang{display:block;margin-top:14px;padding-top:16px;border-top:1px solid var(--line,#e7ede9)}
  header .nav-links .nav-lang select{width:100%}
  header .nav-scrim{display:block;position:fixed;left:0;right:0;top:0;height:100dvh;z-index:999;
    background:rgba(8,16,13,.46);opacity:0;visibility:hidden;transition:opacity .28s}
  header .nav-scrim.show{opacity:1;visibility:visible}
}
/* responsive-02 (audit 13/09/2026) — SANS JAVASCRIPT, LE ☰ N'EST PLUS UN LEURRE.
   Le bouton s'affichait, ne faisait rien, et les 8 liens restaient visibility:hidden à −320 px : à 375px,
   la navigation principale ET le sélecteur de langue devenaient inatteignables (seul le pied de page
   restait). Le repli « menu en 2e ligne » existait pourtant deux blocs plus haut — mais gaté sur
   `:not(:has(.nav-burger))`, c'est-à-dire sur l'ABSENCE du bouton dans le DOM, jamais sur l'absence du
   script qui le fait vivre. `scripting: none` (Media Queries 5) pose la question au navigateur lui-même :
   aucune classe à attendre d'un script, donc aucun état transitoire à l'écran — contrairement au motif
   `html.js`, qui aurait fait clignoter la topbar entre le repli et le tiroir à chaque chargement lent.
   Le tiroir redevient une rangée de liens DANS le flux ; le double de « Se connecter » qui vit dans la
   topbar s'efface au profit de sa copie .nav-aux, et l'hôte du sélecteur de langue — rendu par JS, donc
   vide ici — ne laisse pas un cadre vide derrière lui. Spécificité : `header .nav .nav-links` (0,3,1)
   passe devant la règle du tiroir (0,1,1) comme devant les `.nav-links{display:none}` inline des pages
   tarifs (0,1,0). */
@media (max-width:900.98px) and (scripting: none){
  header .nav{flex-wrap:wrap;row-gap:8px}
  header .nav .nav-burger{display:none}
  header .nav .linklike{display:none}
  header .nav .nav-links{display:flex;position:static;order:3;flex-basis:100%;width:100%;height:auto;z-index:auto;
    flex-direction:row;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 18px;font-size:13.5px;
    margin:0;padding:0;overflow:visible;transform:none;visibility:visible;transition:none;
    background:transparent;border-right:0;box-shadow:none}
  header .nav .nav-links a{display:inline-block;padding:6px 8px;min-height:0;font-size:13.5px}
  header .nav .nav-links .nav-lang{display:none}
  header .nav-scrim{display:none}
}
/* E7 (audit 19/08) : le sélecteur de langue n'est plus masqué sous 600px — badge compact 44px affichant
   le code à 2 lettres (attr data-code, posé par renderLangSelectorNav) ; le <select> réel — options en
   toutes lettres — reste par-dessus en opacité 0, donc opérable au doigt comme au lecteur d'écran.
   opacity:0!important : le rendu du sélecteur porte opacity:.85 EN INLINE (sans !important, le select
   natif transparaît sous le badge) ; font-size 16px!important : pas de zoom iOS au focus.
   Les liens secondaires (Se connecter / Application) quittent la topbar — leurs copies .nav-aux vivent
   dans le tiroir : à 375px, tout n'entre pas à côté du CTA, du badge et du hamburger. Tout ce bloc est
   gaté par :has(.nav-burger) : une topbar SANS tiroir (pages légales) garde son comportement d'avant. */
@media(max-width:600.98px){
  header .nav:has(.nav-burger) .linklike,header .nav:has(.nav-burger) .btn.ghost{display:none}
  /* Hôtes TOPBAR uniquement (#vgLangSelect-host / #vgLangSelectNav-host) : l'hôte du tiroir
     (#vgLangSelectMenu-host) garde son select pleine largeur, jamais compacté. */
  header .nav:has(.nav-burger) #vgLangSelect-host .vg-lang-nav,header .nav:has(.nav-burger) #vgLangSelectNav-host .vg-lang-nav{
    position:relative;display:inline-flex;align-items:center;justify-content:center;
    width:var(--tap);height:var(--tap);border:1px solid var(--line2,#dde6e1);border-radius:11px;background:var(--card,#fff)}
  header .nav:has(.nav-burger) #vgLangSelect-host .vg-lang-nav::after,header .nav:has(.nav-burger) #vgLangSelectNav-host .vg-lang-nav::after{
    content:attr(data-code);font-size:13px;font-weight:600;color:var(--muted,#54625b)}
  header .nav:has(.nav-burger) #vgLangSelect-host .vg-lang-nav select,header .nav:has(.nav-burger) #vgLangSelectNav-host .vg-lang-nav select{
    position:absolute;inset:0;width:100%;height:100%;opacity:0!important;font-size:16px!important;margin:0;cursor:pointer}
  header .nav:has(.nav-burger) #vgLangSelect-host .vg-lang-nav:focus-within,header .nav:has(.nav-burger) #vgLangSelectNav-host .vg-lang-nav:focus-within{
    outline:2px solid var(--teal2,#16A37B);outline-offset:2px}
}
header a.logo{cursor:pointer}                    /* le logo d'en-tête est un lien vers l'accueil — curseur explicite */

/* Retour accueil des pages applicatives (cockpit, reglementaire).
   La barre latérale porte déjà la marque, cliquable — mais sous 901px elle devient un tiroir masqué et le
   retour coûterait deux gestes. Cette marque compacte vit dans la topbar, qui reste visible ; elle ne
   s'affiche QUE en petit écran, sinon elle ferait doublon avec la latérale à trois centimètres de là. */
.topbrand{display:none}
@media(max-width:900.98px){
  .topbrand{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
    border-radius:10px;background:linear-gradient(135deg,#1FB888,#0F6E56);color:#fff;text-decoration:none;
    font-size:15px;flex:0 0 auto;margin-right:2px}
}
/* Sous 601px la réservation de place ci-dessus ne s'appliquait pas et le sélecteur flottant tranchait le
   titre en deux — défaut préexistant, que la marque compacte décalait de 34px de plus. On réserve la
   largeur du sélecteur et on laisse le titre s'abréger proprement plutôt que de passer dessous. */
@media(max-width:600.98px){
  body:has(#vgLangSelectNav-host[style*="fixed"]) .topbar{padding-right:130px}
  .topbar .toptitle{min-width:0;overflow:hidden}
  .topbar .toptitle .eyebrow,.topbar .toptitle .topttl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* Pied de page : la page dans ses autres langues (lot A6). De vrais liens, rendus au build, que le robot suit et
   que le lecteur voit sans JavaScript. Ils vivent ici, dans la seule feuille que chargent toutes les pages à pied
   de page (vitrine sombre, pages légales claires, tarifs à styles en ligne) : la couleur est donc celle du pied,
   héritée, jamais imposée, et sans transparence qui ferait tomber le contraste sous le seuil. */
.vg-langues{margin-top:16px;font-size:12.5px;line-height:1.7}
.vg-langues ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 14px}
/* Neutralise les puces des pages qui stylent tout <li> (tarifs : coche et filet sous chaque ligne). */
.vg-langues li{margin:0;padding:0;border:0;position:static}
.vg-langues li::before{content:none}
.vg-langues a{color:inherit;text-decoration:none;display:inline-block;padding:2px 0}
.vg-langues a:hover{text-decoration:underline}
.vg-langues a[aria-current="page"]{font-weight:650;text-decoration:underline;text-underline-offset:3px}