/* ============================================================
   SOCLE COMMUN DES APPLICATIONS My* (MyB, MyProd, MyWMS, MyShop)
   ------------------------------------------------------------
   Decision de Damien, 29/10/2026 : alignement PAR COPIE. Ce fichier est
   IDENTIQUE A L'OCTET dans les quatre applications (wwwroot/css/socle.css) ;
   scripts/verifier-socle.ps1 compare son empreinte. On le corrige dans une
   application, puis on le recopie tel quel dans les trois autres.

   Il ne s'appuie QUE sur les jetons de tokens-sibreeze.css (identique lui
   aussi) : aucune couleur en dur, aucune classe propre a une application.
   Charge par _Layout juste apres tokens-<theme>.css.

   Ce qu'il porte :
     1. les tailles d'affichage choisies par la personne (data-taille) ;
     2. la notice "A propos de cet ecran" (.sib-notice) ;
     3. les infobulles de bulles.js (.sib-bulle) ;
     4. la page "Mes preferences" (.sib-preferences, .sib-choix).
   Le detail : docs/socle-commun.md.
   Fichier en ASCII : les fleches sont des echappements CSS.
   ============================================================ */

/* ---------------------------------------------------------------------------
   1. Tailles d'affichage. Le serveur pose data-taille sur <html> d'apres la
   preference du compte ; "normale" = aucun attribut, la taille de
   l'application. On redefinit les jetons de taille, rien d'autre : pas de
   "zoom" CSS, qui fausse les coordonnees du glisser-deposer (planning).
   "html[...]" l'emporte sur un ":root" d'une feuille d'application, quel
   que soit l'ordre de chargement. Valeurs reprises de MyWMS (12/10/2026).
   --------------------------------------------------------------------------- */
html[data-taille="compacte"] {
  --sib-fs-display: 1.25rem;   /* 20px */
  --sib-fs-h2:      1rem;      /* 16px */
  --sib-fs-h3:      .875rem;   /* 14px */
  --sib-fs-body:    .8125rem;  /* 13px */
  --sib-fs-sm:      .75rem;    /* 12px */
  --sib-fs-xs:      .6875rem;  /* 11px */
  --sib-fs-kpi:     1.5rem;    /* 24px */
}
html[data-taille="grande"] {
  --sib-fs-display: 1.5rem;    /* 24px */
  --sib-fs-h2:      1.1875rem; /* 19px */
  --sib-fs-h3:      1.0625rem; /* 17px */
  --sib-fs-body:    1rem;      /* 16px */
  --sib-fs-sm:      .9375rem;  /* 15px */
  --sib-fs-xs:      .8125rem;  /* 13px */
  --sib-fs-kpi:     1.875rem;  /* 30px */
}

/* ---------------------------------------------------------------------------
   2. La notice, en pied de chaque ecran (MyWMS, 12/10/2026, comme Gestion
   SI Breeze) : une note de bas de page, pas un bandeau. Discrete par
   construction : elle est la pour qui se demande ce que fait l'ecran, d'ou
   viennent ses donnees, et pourquoi il ne fait pas autre chose. Depliee ou
   repliee selon la preference de la personne (attribut open pose par _Layout).
   --------------------------------------------------------------------------- */
.sib-notice { margin: var(--sib-6) 0 var(--sib-2); padding-top: var(--sib-3);
              border-top: 1px solid var(--sib-border); }
.sib-notice > summary { cursor: pointer; list-style: none; width: fit-content; margin: 0 0 var(--sib-2);
                        font-size: var(--sib-fs-xs); font-weight: 600; text-transform: uppercase;
                        letter-spacing: .05em; color: var(--sib-ink-3); }
.sib-notice > summary::-webkit-details-marker { display: none; }
.sib-notice > summary::after { content: " \25BE"; }
.sib-notice:not([open]) > summary::after { content: " \25B8"; }
.sib-notice:not([open]) > summary { margin-bottom: 0; }
.sib-notice > summary:hover { color: var(--sib-ink-2); }
.sib-notice p, .sib-notice li { margin: 0 0 7px; font-size: var(--sib-fs-sm); line-height: 1.55;
                                color: var(--sib-ink-3); max-width: 90ch; }
.sib-notice ul { margin: 0 0 7px; padding-left: 18px; }
.sib-notice strong { color: var(--sib-ink); }
.sib-notice a { color: var(--sib-ink-2); }
.sib-notice code { font-size: .95em; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------------------
   3. Infobulle (bulles.js) - remplace celle du navigateur sur tout attribut
   title. Repris de MyProd (poste.css, 22/10/2026) : carte claire, texte a la
   taille du corps et en encre pleine ; la premiere version (bleu nuit, 13 px,
   lignes secondaires grisees) avait ete jugee illisible. Un filet fort la
   detache du contenu. Au-dessus de tout, voile compris (z-index 50).
   --------------------------------------------------------------------------- */
.sib-bulle {
  position: fixed; z-index: 60; max-width: min(440px, calc(100vw - 16px));
  padding: 10px 14px; border-radius: var(--sib-r-sm);
  background: var(--sib-surface); color: var(--sib-ink);
  border: 1px solid var(--sib-border-fort);
  box-shadow: var(--sib-shadow-pop);
  font: 500 var(--sib-fs-body)/1.5 var(--sib-font);
  pointer-events: none; overflow-wrap: anywhere;
}
.sib-bulle[hidden] { display: none; }
.sib-bulle__titre {
  font-weight: 700; padding-bottom: 6px; margin-bottom: 6px;
  border-bottom: 1px solid var(--sib-border-2);
}

/* ---------------------------------------------------------------------------
   4. La page "Mes preferences" (/Preferences) : des choix en pilules, une
   case pour la notice. Classes du socle seulement, pour que la page se
   recopie d'une application a l'autre sans toucher a sa feuille.
   --------------------------------------------------------------------------- */
.sib-preferences { max-width: 760px; }
.sib-preferences form { margin: 0; }
.sib-choix { border: 0; margin: var(--sib-4) 0 0; padding: 0; min-width: 0; }
.sib-choix > legend { padding: 0; margin: 0 0 var(--sib-2); font-size: var(--sib-fs-sm); font-weight: 600;
                      color: var(--sib-ink); }
.sib-choix__options { display: flex; flex-wrap: wrap; gap: var(--sib-2); }
.sib-choix__option { display: inline-flex; align-items: center; gap: var(--sib-2); min-height: 32px;
                     padding: 4px var(--sib-4); border: 1px solid var(--sib-border-fort);
                     border-radius: var(--sib-r-pill); background: var(--sib-surface); color: var(--sib-ink);
                     font-size: var(--sib-fs-sm); cursor: pointer; }
.sib-choix__option:hover { background: var(--sib-survol); }
.sib-choix__option:has(input:checked) { border-color: var(--sib-ink); background: var(--sib-survol);
                                        font-weight: 600; }
.sib-choix__option:has(input:focus-visible) { box-shadow: var(--sib-focus); }
.sib-choix__option input { margin: 0; accent-color: var(--sib-orange); }
.sib-choix__aide { margin: var(--sib-2) 0 0; font-size: var(--sib-fs-xs); line-height: var(--sib-lh-body);
                   color: var(--sib-ink-3); }
.sib-case { display: flex; align-items: flex-start; gap: var(--sib-2); margin: var(--sib-4) 0 0;
            font-size: var(--sib-fs-sm); color: var(--sib-ink); cursor: pointer; }
.sib-case input { margin: 3px 0 0; accent-color: var(--sib-orange); }
.sib-preferences__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sib-3);
                            margin-top: var(--sib-5); }