/* ---------------------------------------------------------------
   Barre de navigation unique, partagee par les six pages.
   Un seul fichier, un seul balisage : aucune page ne peut deriver.
   Rien ne defile et rien ne bouge d'une page a l'autre.
   --------------------------------------------------------------- */
.sgnav{background:#27332e;height:64px;flex:none;position:sticky;top:0;z-index:40;
  border:0;padding:0;display:block}
.sgnav .in{max-width:1440px;margin:0 auto;height:64px;padding:0 24px;
  display:flex;align-items:center;gap:32px}
.sgnav .logo{background:#fff;border-radius:4px;padding:4px 8px;flex:none;line-height:0;display:block}
.sgnav .logo img{height:24px;display:block;background:none;padding:0}
.sgnav .tabs{display:flex;align-items:center;gap:16px;height:64px;flex:1;min-width:0}
.sgnav .tabs a{display:flex;align-items:center;height:64px;box-sizing:border-box;
  color:#d8e6df;text-decoration:none;background:none;border:0;border-radius:0;
  font:400 14px/20px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,sans-serif;
  letter-spacing:0;text-transform:none;padding:0;white-space:nowrap}
.sgnav .tabs a:hover{color:#75dc8a}
.sgnav .tabs a.on{color:#75dc8a;border-bottom:2px solid #75dc8a}
.sgnav .right{margin-left:auto;flex:none;display:flex;align-items:center;gap:14px;color:#75dc8a}
.sgnav .live{display:flex;align-items:center;gap:7px;color:#75dc8a;
  font:700 11px/14px "JetBrains Mono",ui-monospace,monospace;letter-spacing:.08em}
.sgnav .live:before{content:"";width:8px;height:8px;border-radius:50%;background:#75dc8a;
  animation:sgpulse 1.8s infinite}
@keyframes sgpulse{0%,100%{opacity:1}50%{opacity:.25}}
.sgnav .icobtn{background:none;border:0;color:#75dc8a;cursor:pointer;padding:6px;
  border-radius:9999px;line-height:0}
.sgnav .icobtn:hover{background:rgba(255,255,255,.1)}

/* Telephone : les onglets glissent, mais le logo et le reste ne bougent jamais.
   La barre garde la meme hauteur partout, donc aucun saut d'une page a l'autre. */
@media(max-width:760px){
  .sgnav,.sgnav .in{height:56px}
  .sgnav .in{padding:0 12px;gap:12px}
  .sgnav .logo img{height:20px}
  .sgnav .tabs{height:56px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .sgnav .tabs::-webkit-scrollbar{display:none}
  .sgnav .tabs a{height:56px;font-size:13px}
  .sgnav .live{display:none}
}
@media print{ .sgnav{display:none} }


/* ---------------------------------------------------------------
   Regles d'usage communes aux six pages.
   --------------------------------------------------------------- */

/* 1. On voit toujours ou on est au clavier. Aucun element interactif
      n'avait de marqueur de focus : impossible de naviguer sans souris. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible,tr.c:focus-visible{
  outline:3px solid #006b2f;outline-offset:2px;border-radius:6px}
.sgnav a:focus-visible{outline-color:#75dc8a;outline-offset:-3px}
/* certains champs posent outline:none pour leur propre anneau : on le remet au clavier */
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #006b2f!important;outline-offset:2px}

/* 2. Les lignes et cartes cliquables se comportent comme des boutons :
      le curseur le dit, et la pression se voit.
      `touch-action:manipulation` est indispensable au doigt : sans lui le
      navigateur attend un double-tap possible et annule le clic si le doigt
      glisse d'un millimetre. C'est la cause la plus frequente des « j'appuie
      et rien ne se passe » sur telephone. */
[onclick]{cursor:pointer}
/* La maquette WhatsApp est exclue, comme pour la hauteur minimale plus bas.
   `.sheet` porte un onclick pour se fermer quand on tape a cote : la regle
   passait donc TOUT le panier a 85 % d'opacite des qu'on appuyait sur un
   bouton a l'interieur, `:active` remontant aux parents. On voyait la
   conversation au travers du panier. La maquette a son propre retour a
   l'appui (`filter:brightness`), defini dans index.html. */
[onclick]:not(.screen):not(.screen *):active{opacity:.85}
button,summary,[onclick],a,select,input[type=button],input[type=submit]{
  touch-action:manipulation}

/* 3. Rien d'interactif ne descend sous 32 px de haut, meme au doigt.
      La maquette WhatsApp (.screen) est exclue : elle doit reproduire les
      dimensions exactes de l'application, et cette regle y gonflait la barre
      du panier a 32 px meme repliee, laissant un bandeau vert permanent. */
button:not(.screen *),summary:not(.screen *),[onclick]:not(.screen *){min-height:32px}
td button,td a,.tabs a,.q,.cnt{min-height:0}

/* 4. Le texte selectionne garde les couleurs de la maison. */
::selection{background:#c8f2d8;color:#121e1a}

/* 5. Respect du reglage systeme : pas d'animation pour qui n'en veut pas. */
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}