/* =============================================================================
   assets/css/mathbzh-2027.css - turf.bzh
   -----------------------------------------------------------------------------
   Pages de suivi MathBZH au gabarit 2027 (11/10/2026) : Mes formules MathBZH
   (gestion-formules.php, ancien centre de controle) et l'Historique des tests
   du Laboratoire (mes-analyses.php).

   SOCLE. Ces deux pages chargent d'abord assets/css/labo-2027.css et vivent
   sous .lab-page : memes jetons (--lab-*), meme en-tete, memes blocs, boutons,
   pastilles et champs que le Laboratoire. Cette feuille n'ajoute que ce qui
   leur est propre (barre d'outils, cartes de formule et d'analyse, interrupteur,
   edition en place, message furtif), classes prefixees .mz-, toutes scopees
   sous .lab-page. Aucune regle globale.

   MOBILE D'ABORD. Une colonne ; les mesures d'une analyse passent en grille
   a partir de 40rem. Cibles tactiles de 44 px pour les boutons-icones.

   @author Claude (Cowork, 2026-10-11)
   @version 1.0.0
   ========================================================================== */

/* ------------------------------------------------------- en-tete : actions -- */
.lab-page .mz-hero-actions{ display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.lab-page .mz-btn-clair{
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 44px;
  font: inherit; font-weight: 800; font-size: .92rem; text-decoration: none; cursor: pointer;
  background: #fff; color: var(--lab-acc-d); border: 1px solid #fff; border-radius: var(--lab-r-sm);
  padding: .55rem .95rem;
}
.lab-page .mz-btn-clair:hover{ background: var(--lab-acc-l2); color: var(--lab-acc-d); }
.lab-page .mz-btn-voile{
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 44px;
  font: inherit; font-weight: 700; font-size: .92rem; text-decoration: none; cursor: pointer;
  background: rgba(3,38,48,.28); color: #fff; border: 1px solid rgba(255,255,255,.45); border-radius: var(--lab-r-sm);
  padding: .55rem .95rem;
}
.lab-page .mz-btn-voile:hover{ background: rgba(3,38,48,.45); color: #fff; }
.lab-page .mz-hero-actions :focus-visible{ outline: 2px solid #fff; outline-offset: 2px; }

/* ------------------------------------------------------------ barre d'outils -- */
.lab-page .mz-barre{ display: grid; grid-template-columns: minmax(0,1fr); gap: .7rem; align-items: end; }
@media (min-width: 48rem){ .lab-page .mz-barre{ grid-template-columns: minmax(14rem,1.4fr) auto auto; } }
.lab-page .mz-barre .lab-label{ margin-bottom: .25rem; }
.lab-page .mz-barre .lab-pastilles{ margin: 0; }
.lab-page .mz-barre select.lab-champ{ min-width: 11rem; }
.lab-page .mz-resume{ font-size: .88rem; color: var(--lab-mut); margin: .8rem 0 0; }

/* ----------------------------------------------------------------- listes -- */
.lab-page .mz-liste{ display: grid; gap: .8rem; margin: 0; padding: 0; list-style: none; }
.lab-page .mz-carte{
  background: var(--lab-card); border: 1px solid var(--lab-bd); border-radius: var(--lab-r-md);
  box-shadow: var(--lab-sh-sm); padding: .9rem 1rem;
}
.lab-page .mz-carte.est-active{ border-color: color-mix(in srgb, var(--lab-acc) 45%, var(--lab-bd)); }
.lab-page .mz-carte.est-deplacee{ box-shadow: var(--lab-glow), var(--lab-sh-sm); }
.lab-page .mz-carte-tete{ display: flex; align-items: flex-start; gap: .7rem; }
.lab-page .mz-rang{
  flex: none; min-width: 2rem; height: 2rem; border-radius: var(--lab-pill); padding: 0 .45rem;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .82rem; font-weight: 800; color: var(--lab-acc-d); background: var(--lab-acc-l);
}
.lab-page .mz-carte:not(.est-active) .mz-rang{ color: var(--lab-mut); background: var(--lab-soft); }
.lab-page .mz-titre{ flex: 1 1 auto; min-width: 0; }
.lab-page .mz-nom{ font-size: 1.05rem; font-weight: 800; color: var(--lab-ink); word-break: break-word; margin: .15rem 0 .3rem; }
.lab-page .mz-sous{ font-size: .84rem; color: var(--lab-mut); margin: 0 0 .35rem; }
.lab-page .mz-badges{ display: flex; flex-wrap: wrap; gap: .35rem; }
.lab-page .mz-badge-acc{ color: var(--lab-acc-d); background: var(--lab-acc-l2); border-color: var(--lab-acc-l); }
.lab-page .mz-badge-mot{ color: #6d28d9; background: #f5f3ff; border-color: #ddd6fe; }

/* Interrupteur active / inactive. */
.lab-page .mz-interrupteur{ flex: none; display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; margin: .15rem 0 0; font-size: .84rem; font-weight: 700; color: var(--lab-ink3); min-height: 44px; }
.lab-page .mz-interrupteur input{ position: absolute; opacity: 0; width: 1px; height: 1px; }
.lab-page .mz-interrupteur .mz-rail{
  position: relative; width: 2.75rem; height: 1.5rem; border-radius: var(--lab-pill); background: var(--lab-bd-fort);
  transition: background .2s var(--lab-ease); flex: none;
}
.lab-page .mz-interrupteur .mz-rail::after{
  content: ""; position: absolute; top: .1875rem; left: .1875rem; width: 1.125rem; height: 1.125rem; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.25); transition: transform .2s var(--lab-ease);
}
.lab-page .mz-interrupteur input:checked + .mz-rail{ background: var(--lab-acc); }
.lab-page .mz-interrupteur input:checked + .mz-rail::after{ transform: translateX(1.25rem); }
.lab-page .mz-interrupteur input:focus-visible + .mz-rail{ outline: 2px solid var(--lab-acc); outline-offset: 2px; }
.lab-page .mz-interrupteur input:disabled + .mz-rail{ opacity: .6; }
@media (prefers-reduced-motion: reduce){ .lab-page .mz-interrupteur .mz-rail, .lab-page .mz-interrupteur .mz-rail::after{ transition: none; } }

/* Formule affichee avec les libelles. */
.lab-page .mz-code{
  display: block; margin: .7rem 0 0; white-space: pre-wrap; word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .86rem; line-height: 1.5;
  color: var(--lab-ink2); background: var(--lab-soft); border: 1px solid var(--lab-bd-soft); border-radius: var(--lab-r-sm);
  padding: .6rem .75rem;
}
.lab-page .mz-notes{ margin: .6rem 0 0; font-size: .92rem; color: var(--lab-ink3); white-space: pre-wrap; word-break: break-word; }
.lab-page .mz-notes strong{ color: var(--lab-ink2); }

/* Actions d'une carte. */
.lab-page .mz-actions{ display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .75rem; }
.lab-page .mz-actions .lab-btn{ min-height: 44px; }
.lab-page .mz-icone{
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  font: inherit; color: var(--lab-acc-d); background: var(--lab-card); border: 1px solid var(--lab-bd-fort);
  border-radius: var(--lab-r-sm); cursor: pointer; padding: 0;
}
.lab-page .mz-icone:hover:not(:disabled){ border-color: var(--lab-acc); background: var(--lab-acc-l2); }
.lab-page .mz-icone:disabled{ color: var(--lab-bd-fort); cursor: default; }
.lab-page .mz-pousse{ margin-left: auto; }
.lab-page .mz-danger{ color: var(--lab-ko); border-color: var(--lab-ko-bd); }
.lab-page .mz-danger:hover{ background: var(--lab-ko-bg); border-color: var(--lab-ko); color: var(--lab-ko); }
.lab-page .mz-danger.est-armee{ background: var(--lab-ko); border-color: var(--lab-ko); color: #fff; }

/* Edition en place (conditions et notes, annotation). */
.lab-page .mz-edition{ margin-top: .75rem; padding: .8rem; border: 1px solid var(--lab-bd); border-radius: var(--lab-r-sm); background: var(--lab-card2); }
.lab-page .mz-edition-grille{ display: grid; grid-template-columns: minmax(0,1fr); gap: .6rem; }
@media (min-width: 40rem){ .lab-page .mz-edition-grille{ grid-template-columns: 1fr 1fr; } .lab-page .mz-edition-grille .mz-plein{ grid-column: 1 / -1; } }
.lab-page textarea.lab-champ{ min-height: 5.5rem; resize: vertical; line-height: 1.5; }
.lab-page .mz-edition-pied{ display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .7rem; }
.lab-page .mz-compte{ font-size: .78rem; color: var(--lab-mut); margin-left: auto; }
.lab-page .mz-edition-pied .lab-btn{ min-height: 44px; }

/* Etats vides et chargement. */
.lab-page .mz-vide{ text-align: left; }
.lab-page .mz-vide h2{ font-size: 1.05rem; font-weight: 800; color: var(--lab-acc-d); margin-bottom: .4rem; }

/* 2026-10-11 (lot 2) : parcours en 3 etapes de Mes formules MathBZH, une
   colonne sur telephone, 3 a partir de 48rem. */
.lab-page .mz-etapes > summary{ min-height: 44px; }
.lab-page .mz-etapes-liste{
  list-style: none; margin: .7rem 0 0; padding: 0;
  display: grid; grid-template-columns: minmax(0,1fr); gap: .9rem 1.2rem;
}
@media (min-width: 48rem){ .lab-page .mz-etapes-liste{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
.lab-page .mz-etapes-liste li{ display: flex; align-items: stretch; gap: .7rem; min-width: 0; }
.lab-page .mz-etapes-liste li > div{ display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.lab-page .mz-etapes-liste li > div > a{ margin-top: auto; }
.lab-page .mz-etape-n{
  flex: none; width: 2rem; height: 2rem; border-radius: var(--lab-pill);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .9rem; font-weight: 800; color: var(--lab-acc-d); background: var(--lab-acc-l);
}
.lab-page .mz-etapes-liste h3{ font-size: .98rem; font-weight: 800; color: var(--lab-ink2); margin-bottom: .25rem; }
.lab-page .mz-etapes-liste p{ font-size: .9rem; color: var(--lab-ink3); margin-bottom: .35rem; }
.lab-page .mz-etapes-liste a{ font-weight: 700; }

/* 2026-10-11 (lot 2) : dernier test d'une formule au Laboratoire. */
.lab-page .mz-test{ font-size: .88rem; color: var(--lab-ink3); margin: .5rem 0 0; line-height: 1.6; }
.lab-page .mz-test-l{ font-weight: 800; color: var(--lab-acc-d); }
.lab-page .mz-test-lien{ font-weight: 700; white-space: nowrap; }
.lab-page .mz-test-vide{ color: var(--lab-mut); }

/* ---------------------------------------------------------- analyses ------ */
.lab-page .mz-statut{
  display: inline-flex; align-items: center; gap: .35rem; font-size: .76rem; font-weight: 800;
  border-radius: var(--lab-pill); padding: .15rem .6rem; border: 1px solid; white-space: nowrap;
}
.lab-page .mz-statut.s-ok{ color: var(--lab-ok); background: var(--lab-ok-bg); border-color: var(--lab-ok-bd); }
.lab-page .mz-statut.s-cours{ color: var(--lab-acc-d); background: var(--lab-acc-l2); border-color: var(--lab-acc-l); }
.lab-page .mz-statut.s-ko{ color: var(--lab-ko); background: var(--lab-ko-bg); border-color: var(--lab-ko-bd); }
.lab-page .mz-statut.s-neutre{ color: var(--lab-ink3); background: var(--lab-soft); border-color: var(--lab-bd-fort); }
.lab-page .mz-date{ font-size: .82rem; color: var(--lab-mut); white-space: nowrap; }

/* Une ligne de mesures par formule, plus la reference marche. */
.lab-page .mz-mesures{ margin-top: .75rem; display: grid; gap: .45rem; }
.lab-page .mz-ligne{
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: .35rem .9rem;
  padding: .6rem .7rem; border: 1px solid var(--lab-bd-soft); border-radius: var(--lab-r-sm);
  background: var(--lab-card2);
}
.lab-page .mz-ligne.est-marche{ border-style: dashed; background: var(--lab-soft); }
/* La couleur de la série est portée par un point collé au nom (creux pour le
   marché) : le point suit le nom quand celui-ci passe à la ligne. */
.lab-page .mz-ligne-nom > span:first-child::before{ content: ""; display: inline-block; width: .7rem; height: .7rem; margin-right: .5rem; border-radius: 50%; vertical-align: .05em; background: var(--lab-serie, var(--lab-acc)); }
.lab-page .mz-ligne.est-marche .mz-ligne-nom > span:first-child::before{ background: transparent; box-shadow: inset 0 0 0 2px var(--lab-serie, var(--lab-bd-fort)); }
.lab-page .mz-ligne-nom{ grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; font-weight: 800; font-size: .95rem; word-break: break-word; }
.lab-page .mz-ligne .lab-verdict{ margin: 0; }
.lab-page .mz-m{ min-width: 0; }
.lab-page .mz-m-l{ display: block; font-size: .72rem; font-weight: 800; color: var(--lab-mut); text-transform: uppercase; letter-spacing: .05em; }
.lab-page .mz-m-v{ display: block; font-size: 1.05rem; font-weight: 800; color: var(--lab-ink); }
.lab-page .mz-m-ic{ display: block; font-size: .74rem; color: var(--lab-mut); }
.lab-page .mz-m-v.est-pos{ color: var(--lab-ok); }
.lab-page .mz-m-v.est-neg{ color: var(--lab-ko); }
/* Libelle complet sur grand ecran, abrege sur telephone. */
.lab-page .mz-court{ display: none; }
@media (max-width: 30rem){ .lab-page .mz-long{ display: none; } .lab-page .mz-court{ display: inline; } }
@media (min-width: 40rem){
  .lab-page .mz-ligne{ grid-template-columns: minmax(10rem,1.6fr) repeat(4, minmax(0,1fr)); align-items: center; }
  .lab-page .mz-ligne-nom{ grid-column: auto; }
}

/* Detail : les mesures completes, comme les cartes du Laboratoire. */
.lab-page .mz-detail{ margin-top: .75rem; }
.lab-page .mz-carte > .lab-note{ margin-top: .6rem; }
.lab-page .mz-detail .lab-cartes{ margin-top: .2rem; }
.lab-page .mz-annotation{
  margin: .7rem 0 0; padding: .55rem .7rem; border-radius: var(--lab-r-sm);
  background: var(--lab-warn-bg); border: 1px solid var(--lab-warn-bd); color: var(--lab-ink2);
  font-size: .92rem; white-space: pre-wrap; word-break: break-word;
}
.lab-page .mz-annotation strong{ color: #92400e; }

/* ------------------------------------------------------- message furtif -- */
.lab-page .mz-toast{
  position: fixed; left: 50%; bottom: 1.25rem; transform: translate(-50%, 1rem); z-index: 1080;
  max-width: min(92vw, 30rem); padding: .7rem 1rem; border-radius: var(--lab-r-sm);
  background: var(--lab-ink); color: #fff; font-weight: 700; font-size: .92rem; box-shadow: var(--lab-sh-lg);
  opacity: 0; pointer-events: none; transition: opacity .2s var(--lab-ease), transform .2s var(--lab-ease);
}
.lab-page .mz-toast.est-visible{ opacity: 1; transform: translate(-50%, 0); }
.lab-page .mz-toast.est-erreur{ background: var(--lab-ko); }
@media (prefers-reduced-motion: reduce){ .lab-page .mz-toast{ transition: none; } }

/* ------------------------------------------------------------- questions -- */
.lab-page .mz-faq h3{ font-size: .98rem; font-weight: 800; color: var(--lab-ink2); margin-bottom: .3rem; }
.lab-page .mz-faq p{ font-size: .92rem; color: var(--lab-ink3); }
/* 2026-10-12 : la derniere question remplit sa ligne, sans case vide a cote
   (grille de labo-2027.css : 2 colonnes des 48rem, 3 des 72rem). */
@media (min-width: 48rem) and (max-width: 71.99rem){
  .lab-page .mz-faq .lab-reperes-grille > :last-child:nth-child(odd){ grid-column: 1 / -1; }
}
@media (min-width: 72rem){
  .lab-page .mz-faq .lab-reperes-grille > :last-child:nth-child(3n+1){ grid-column: 1 / -1; }
  .lab-page .mz-faq .lab-reperes-grille > :last-child:nth-child(3n+2){ grid-column: span 2; }
}

/* Lecteurs d'ecran seulement. */
.lab-page .mz-lecteur{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Champs de la barre et de l'edition : cibles tactiles de 44 px. */
.lab-page .mz-barre .lab-champ, .lab-page .mz-barre .lab-btn, .lab-page .mz-edition input.lab-champ, .lab-page .mz-edition select.lab-champ{ min-height: 44px; }
.lab-page .mz-faq > summary{ min-height: 44px; }
.lab-page .mz-barre{ align-items: start; }
.lab-page .mz-barre .lab-pastilles label span{ min-height: 44px; padding-left: .95rem; padding-right: .95rem; }
.lab-page .mz-liste .mz-vide .lab-btn{ min-height: 44px; }
@media (max-width: 47.99rem){
  /* Barre sur une colonne : le bouton prend toute la largeur, comme les champs. */
  .lab-page .mz-barre > div > .lab-btn{ width: 100%; justify-content: center; }
}
@media (max-width: 40rem){
  .lab-page .mz-hero-actions > *{ flex: 1 1 100%; }
  /* Actions d'une analyse : chaque ligne remplie, libellés sur une seule ligne. */
  .lab-page .mz-actions-ana > .lab-btn{ flex: 1 1 auto; justify-content: center; white-space: nowrap; }
  .lab-page .mz-actions-ana > .mz-pousse{ margin-left: 0; }
  /* 2026-10-11 : actions d'une formule (Mes formules), chaque ligne remplie. */
  .lab-page #fx-liste .mz-actions > .lab-btn{ flex: 1 1 auto; justify-content: center; }
  .lab-page #fx-liste .mz-actions > .mz-pousse{ margin-left: 0; }
}