/* Feuille de style unique, pensée d'abord pour le téléphone. Aucune ressource externe. */
/* Thème : violet et ruban aux couleurs des six enfants du logo du Sou des écoles. */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../polices/plus-jakarta-sans.woff2") format("woff2"); /* licence : polices/OFL.txt */
}
:root {
  --fond: #f5f4fa;
  --surface: #ffffff;
  --texte: #1f1d29;
  --texte-doux: #5f5b6e;
  --bordure: #e3e0ec;
  --bordure-champ: #d6d2e2;
  --principal: #5b3fd6;
  --principal-fonce: #4529b8;
  --principal-pale: #efebff;
  --focus: #c4b6ff;
  --ligne-alternee: #f3f1fa; /* une ligne sur deux des tableaux */
  --ligne-survolee: #ebe6ff;
  --succes: #136c3a;
  --succes-fond: #dcf5e6;
  --alerte: #8f4a00;
  --alerte-fond: #fff0d9;
  --erreur: #b3261e;
  --erreur-fond: #fde4e2;
  /* Couleurs des enfants du logo, pour les repères seulement (ruban, tuiles, indicateurs). */
  --rose: #ec8fa0; --magenta: #d0135f; --vert: #7dbb2a; --jaune: #f5c200; --ciel: #93d0de; --orange: #e8821e;
  --ruban: linear-gradient(90deg, var(--rose) 0 16.66%, var(--magenta) 16.66% 33.33%, var(--vert) 33.33% 50%, var(--jaune) 50% 66.66%, var(--ciel) 66.66% 83.33%, var(--orange) 83.33%);
  --ombre: 0 1px 2px rgba(31, 29, 41, .05), 0 6px 16px rgba(31, 29, 41, .06);
  --rayon: 14px;
  --rayon-champ: 10px;
  --cible: 48px; /* hauteur minimale des éléments touchés au doigt */
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  color: var(--texte);
  background: var(--fond);
}

* { box-sizing: border-box; }
body { margin: 0; }
h1 { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; margin: 0 0 1rem; text-wrap: balance; }
h2 { font-size: 1.2rem; font-weight: 800; letter-spacing: -.01em; margin: 1.5rem 0 .75rem; }
a { color: var(--principal); }

.entete {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
  padding: .6rem 1rem calc(.6rem + 5px); background: var(--surface);
  position: sticky; top: 0; z-index: 10;
}
/* Ruban aux six couleurs du logo sous l'en-tête. */
.entete::after { content: ""; position: absolute; inset: auto 0 0 0; height: 5px; background: var(--ruban); }
.entete-titre { font-weight: 800; text-decoration: none; color: var(--texte); display: inline-flex; align-items: center; gap: .5rem; }
.entete-logo { height: 2rem; width: auto; max-width: 6rem; object-fit: contain; }
.entete-gauche { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; min-width: 0; }
.entete-compte { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.pastille {
  font-size: .85rem; padding: .15rem .6rem; border-radius: 999px;
  background: var(--principal); color: #fff; font-weight: 700;
}

.contenu { padding: 1rem; max-width: 1100px; margin: 0 auto; }
/* PC de la salle (stations, organisateur) : toute la largeur de l'écran, quel que soit le portable. */
.avec-menu .contenu { max-width: none; }
.carte { background: var(--surface); border: 1.5px solid var(--bordure); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 1.25rem; }
.carte-etroite { max-width: 28rem; margin: 1.5rem auto; }

.formulaire { display: grid; gap: 1rem; }
.formulaire label { display: grid; gap: .3rem; font-weight: 600; }
.formulaire .case { display: flex; align-items: center; gap: .6rem; font-weight: 400; min-height: var(--cible); }
.aide { font-weight: 400; font-size: .9rem; color: var(--texte-doux); }
input, select, textarea {
  font: inherit; min-height: var(--cible); padding: .5rem .75rem;
  border: 1.5px solid var(--bordure-champ); border-radius: var(--rayon-champ); background: var(--surface); color: var(--texte); width: 100%;
}
input[type="checkbox"], input[type="radio"] { width: 1.5rem; min-height: 1.5rem; height: 1.5rem; }
input:focus, select:focus, textarea:focus, .bouton:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: var(--cible); padding: .5rem 1.1rem; border-radius: 999px;
  border: 1.5px solid var(--bordure-champ); background: var(--surface); color: var(--texte);
  font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
}
.bouton:hover { border-color: var(--principal); color: var(--principal); }
.bouton-principal { background: var(--principal); border-color: var(--principal); color: #fff; }
.bouton-principal:hover { background: var(--principal-fonce); border-color: var(--principal-fonce); color: #fff; }
.bouton-danger { color: var(--erreur); border-color: var(--erreur); }
.bouton-danger:hover { color: var(--erreur); border-color: var(--erreur); background: var(--erreur-fond); }
.bouton:disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
.phases .bouton:disabled { opacity: 1; }
.bouton-discret { min-height: 36px; padding: .25rem .8rem; font-weight: 600; }
.boutons { display: flex; flex-wrap: wrap; gap: .5rem; }

.alerte { padding: .75rem 1rem; border-radius: var(--rayon-champ); font-weight: 600; background: var(--alerte-fond); color: var(--alerte); }
.alerte-erreur { background: var(--erreur-fond); color: var(--erreur); }
.alerte-succes { background: var(--succes-fond); color: var(--succes); }
/* US-1.10 : bandeau « confirmez votre adresse » de la page vendeur. */
.alerte[data-confirmer-email] { margin-bottom: 1rem; }
.alerte[data-confirmer-email] p { margin-top: 0; }

.tuiles { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.tuile {
  display: grid; gap: .25rem; padding: 1rem; min-height: 5rem; text-decoration: none; color: var(--texte);
  background: var(--surface); border: 1.5px solid var(--bordure); border-top: 6px solid var(--couleur-repere, var(--principal));
  border-radius: var(--rayon); box-shadow: var(--ombre); font-weight: 800;
}
.tuile span { color: var(--texte-doux); font-size: .9rem; font-weight: 400; }
.tuile:hover { border-color: var(--couleur-repere, var(--principal)); }
/* Tuiles et indicateurs : une couleur d'enfant du logo chacun, à tour de rôle. */
:is(.tuile, .indicateur, .moment):nth-child(6n+1) { --couleur-repere: var(--magenta); }
:is(.tuile, .indicateur, .moment):nth-child(6n+2) { --couleur-repere: var(--vert); }
:is(.tuile, .indicateur, .moment):nth-child(6n+3) { --couleur-repere: var(--principal); }
:is(.tuile, .indicateur, .moment):nth-child(6n+4) { --couleur-repere: var(--orange); }
:is(.tuile, .indicateur, .moment):nth-child(6n+5) { --couleur-repere: var(--ciel); }
:is(.tuile, .indicateur, .moment):nth-child(6n+6) { --couleur-repere: var(--jaune); }

/* Tableaux : restent des tableaux sur téléphone, avec défilement horizontal et en-tête fixe. */
.tableau-conteneur { overflow: auto; max-height: 75vh; border: 1.5px solid var(--bordure); border-radius: var(--rayon); background: var(--surface); }
table { border-collapse: collapse; width: 100%; font-size: .95rem; }
th, td { padding: .55rem .7rem; border-bottom: 1px solid var(--bordure); text-align: left; white-space: nowrap; }
th {
  position: sticky; top: 0; background: var(--fond); z-index: 1;
  font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--texte-doux);
  box-shadow: inset 0 -2px 0 var(--principal-pale);
}
/* Une ligne sur deux légèrement teintée ; :where garde une priorité nulle pour que les lignes signalées (attention, cible) l'emportent. */
:where(tbody tr:nth-child(even)) { background: var(--ligne-alternee); }
:where(tbody tr:hover) { background: var(--ligne-survolee); }
:where(tbody th) { position: static; text-transform: none; letter-spacing: 0; font-size: inherit; color: var(--texte); box-shadow: none; background: transparent; }
td.nombre, th.nombre { text-align: right; font-variant-numeric: tabular-nums; }
/* PC de la salle : plutôt que défiler de côté sur un petit portable, le texte passe à la ligne ;
   codes, montants, statuts et boutons restent d'un bloc. Rien ne change quand la place suffit. */
.avec-menu td { white-space: normal; }
.avec-menu :is(td.code, td.nombre, .etat, .actions) { white-space: nowrap; }
.avec-menu td.description { min-width: 10rem; }

@media (min-width: 700px) {
  .contenu { padding: 1.5rem; }
}

/* Petit formulaire sur une ligne (dans un tableau). */
.ligne-formulaire { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.ligne-formulaire input:not([type="checkbox"]) { width: auto; min-width: 10rem; flex: 1; }
.ligne-formulaire .case { min-height: auto; }

.barre-outils { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.barre-outils > form { flex: 1; min-width: 16rem; }
details.carte > summary { cursor: pointer; min-height: var(--cible); display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
details.carte[open] > summary { margin-bottom: 1rem; }
/* Zones repliables de toutes les pages : encadrées, le titre (h2) dans le résumé, précédé d'un chevron. */
details.zone {
  margin-bottom: 1.25rem; padding: .5rem 1.25rem 1.25rem; min-width: 0;
  background: var(--surface); border: 1.5px solid var(--bordure); border-radius: var(--rayon); box-shadow: var(--ombre);
}
details.zone:not([open]) { padding-block: .5rem; }
/* Zone dans une zone ou dans un encadré (tableau de bord, caisse) : fond teinté, sans ombre. */
:is(details.zone, .carte) details.zone { background: var(--fond); box-shadow: none; padding-inline: 1rem; }
:is(details.zone, .carte) details.zone:last-child { margin-bottom: 0; }
@media (max-width: 699px) {
  details.zone { padding-inline: .9rem; }
  :is(details.zone, .carte) details.zone { padding-inline: .6rem; }
}
details.zone > summary { cursor: pointer; list-style: none; min-height: var(--cible); display: flex; align-items: center; gap: .6rem; }
details.zone > summary::-webkit-details-marker { display: none; }
details.zone > summary::before {
  content: ""; flex: none; width: .55rem; height: .55rem; margin: 0 .2rem;
  border-right: 2.5px solid var(--texte-doux); border-bottom: 2.5px solid var(--texte-doux);
  transform: rotate(-45deg); transition: transform .15s;
}
details.zone[open] > summary::before { transform: rotate(45deg); }
details.zone > summary:hover::before { border-color: var(--principal); }
details.zone > summary > :is(h2, h3) { margin: 0; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
details.zone[open] > summary { margin-bottom: .75rem; }
.zone-contenu { display: grid; gap: 1rem; }
.carte-alerte { border-color: var(--alerte); background: var(--alerte-fond); margin-bottom: 1rem; }
.carte-alerte h2 { margin-top: 0; color: var(--alerte); }
.liste-doublons { list-style: none; padding: 0; display: grid; gap: .5rem; }
.liste-doublons .bouton { width: 100%; justify-content: flex-start; white-space: normal; text-align: left; }

/* Jouets */
.bouton-large { width: 100%; }
.boutons-pleins .bouton { flex: 1 1 14rem; }
.actions { display: flex; gap: .35rem; flex-wrap: nowrap; }
.actions form { margin: 0; }
th a { color: inherit; text-decoration: none; display: block; }
tr.ligne-lien { cursor: pointer; }
td.description { max-width: 10.5rem; overflow: hidden; text-overflow: ellipsis; }
.tableau-jouets th, .tableau-jouets td { padding: .5rem .4rem; }
.etat { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .85rem; background: var(--fond); border: 1px solid var(--bordure); }
.etat-a_deposer { background: var(--fond); border-style: dashed; }
.etat-a_verifier { background: #f3ecff; border-color: #d3c2f0; color: #5b3a96; }
.etat-refuse { background: #eeeeee; border-color: #c9c9c9; color: #555555; }
.etat-a_vendre { background: #e7efff; border-color: #b8cdf3; color: #174a96; }
.etat-vendu { background: var(--succes-fond); border-color: #a9d8b6; color: var(--succes); }
.etat-a_rendre { background: var(--alerte-fond); border-color: #f0cf8f; color: var(--alerte); }
.etat-perdu { background: var(--erreur-fond); border-color: #f2b8b3; color: var(--erreur); }
/* Recherche de jouets (US-5.9) : les jouets à vendre ressortent, les autres sont estompés */
.recherche-a-vendre td.code { font-weight: 700; }
.recherche-hors-vente td { color: var(--texte-doux); }
.recherche-hors-vente td:not(:nth-child(2)) { opacity: .7; }
/* Page vendeur (US-9.6) : informations, tableau de bord, jouets */
.zone-vendeur { margin-bottom: 1.25rem; }
.zone-vendeur h2 { margin-top: 0; }
/* US-1.12 : zone Informations repliable, titre dans le résumé ; barre d'impression des jouets. */
.barre-jouets { margin-bottom: .25rem; }
.barre-jouets form { margin: 0; }
/* US-1.9 : coordonnées du vendeur en station, sur deux ou trois colonnes sur un PC. */
.formulaire-colonnes { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); align-items: end; }
.formulaire-colonnes > .aide, .formulaire-colonnes > .boutons { grid-column: 1 / -1; }
.formulaire input[readonly] { background: var(--fond); color: var(--texte-doux); }
#nouveau { margin-bottom: .75rem; }
#nouveau h3 { margin-top: 0; }
.infos-vendeur { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; margin: 0; }
.infos-vendeur dt { color: var(--texte-doux); }
.infos-vendeur dd { margin: 0; overflow-wrap: anywhere; }
.indicateur-principal { border-color: var(--principal); }
td.code { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ristourne-rapide { display: flex; align-items: center; gap: .3rem; margin: 0; }
.ristourne-rapide .case { min-height: var(--cible); display: flex; align-items: center; }
.ristourne-rapide input[type="checkbox"] { width: 1.4rem; height: 1.4rem; }
.bouton-icone { padding-inline: .55rem; }
.bouton-icone svg { width: 1.25rem; height: 1.25rem; display: block; }
.bouton-poubelle { color: var(--erreur); border-color: var(--erreur); }
/* US-2.9 : recherche des jouets sur une ligne (empilée sur téléphone). */
.recherche-jouets { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .75rem; padding: .75rem; }
.recherche-jouets input[type="search"] { flex: 2 1 14rem; width: auto; }
.recherche-jouets select { flex: 1 1 9rem; width: auto; }
.mention { font-size: .8rem; color: var(--alerte); font-weight: 600; }
@media (min-width: 700px) {
  .bouton-large { width: auto; }
  td.description { max-width: 28rem; }
  .tableau-jouets th, .tableau-jouets td { padding: .5rem .6rem; }
}
@media (min-width: 701px) and (max-width: 1199px) {
  .avec-menu .tableau-jouets th, .avec-menu .tableau-jouets td { padding-inline: .4rem; }
}

/* Saisie rapide en station : tout sur une ligne sur un écran de PC. */
.saisie-rapide { display: grid; gap: .75rem; margin-bottom: .75rem; }
.saisie-rapide label { display: grid; gap: .25rem; font-weight: 600; }
.saisie-rapide .case { display: flex; align-items: center; gap: .5rem; }
@media (min-width: 900px) {
  .saisie-rapide { grid-template-columns: 13rem 10rem 1fr 7rem auto auto; align-items: end; }
}

tr:target { background: #fff8d6; }
.tableau-grand table { font-size: 1.05rem; }
.tableau-grand td.description { max-width: 24rem; }

/* Écrans de scan (avant installation, caisse, inventaire) : lisibles de loin, gros retours visuels. */
.scan { display: flex; gap: .75rem; margin: 1rem 0; }
.champ-scan { font-size: 2rem; min-height: 4rem; letter-spacing: .08em; flex: 1; }
.resultat { padding: 1.25rem 1rem; border-radius: var(--rayon); font-size: 1.4rem; font-weight: 700; background: var(--surface); border: 2px solid var(--bordure); min-height: 5rem; }
.resultat-succes { background: var(--succes-fond); border-color: var(--succes); color: var(--succes); }
.resultat-discret { background: #eef2f7; border-color: #9aa8bd; color: #3d4b61; font-weight: 600; }
.resultat-alerte { background: var(--erreur-fond); border-color: var(--erreur); color: var(--erreur); }
.compteur { font-size: 1.6rem; }
.journal { padding-left: 1.5rem; display: grid; gap: .25rem; }
.journal li.resultat-succes, .journal li.resultat-discret, .journal li.resultat-alerte { background: none; border: 0; font-size: 1rem; }
.groupe-vendeur { margin-bottom: .5rem; }

/* Caisse */
.alerte-attention { background: #ffe9c7; color: #8a4b00; border: 2px solid #e09a2b; font-weight: 700; font-size: 1.1rem; }
.caisse { display: grid; gap: 1rem; }
.caisse .scan { margin-top: 0; }
.caisse-total { background: var(--surface); border: 1.5px solid var(--bordure); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 1rem; display: grid; gap: .75rem; align-content: start; }
.total-libelle { margin: 0; color: var(--texte-doux); }
.total-montant { margin: 0; font-size: 2.6rem; font-weight: 800; color: var(--principal); font-variant-numeric: tabular-nums; }
.tableau-panier td { white-space: normal; }
.ligne-attention { background: #fff3dc; }
@media (min-width: 1000px) {
  .caisse { grid-template-columns: 1fr 24rem; align-items: start; }
}
.reglement { gap: .45rem; }
.reglement input { min-height: 42px; }
.reglement label { grid-template-columns: 1fr 9rem; align-items: center; display: grid; }
.reglement input { text-align: right; }
.modes-paiement { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.modes-paiement legend { padding: 0; margin-bottom: .4rem; font-weight: 700; }
.reglement .mode-paiement {
  display: flex; justify-content: center; align-items: center; min-height: 3.5rem; cursor: pointer;
  border: 2px solid var(--bordure-champ); border-radius: var(--rayon-champ); background: var(--surface); font-size: 1.15rem; font-weight: 700;
}
.mode-paiement input { position: absolute; opacity: 0; width: 1px; min-height: 0; }
.mode-paiement:hover { border-color: var(--principal); color: var(--principal); }
.mode-paiement:has(input:checked) { background: var(--principal); border-color: var(--principal); color: #fff; }
.mode-paiement:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 1px; }
.zone-especes { display: grid; gap: .45rem; }
/* La somme donnée ne sert qu'en espèces. */
.reglement:not(:has(input[name="mode"][value="especes"]:checked)) .zone-especes { display: none; }
.rendu { margin: 0; font-size: 1.3rem; font-weight: 800; color: var(--succes); }
.bouton-payer { min-height: 3.5rem; font-size: 1.2rem; }
.derniere-vente { border-top: 1px solid var(--bordure); padding-top: .5rem; }
.prix-barre { color: var(--texte-doux); font-size: .9rem; }
.badge-ristourne { display: inline-block; background: var(--principal); color: #fff; border-radius: 999px; padding: 0 .45rem; font-size: .8rem; font-weight: 700; }
.bandeau-ristourne { grid-column: 1 / -1; margin: 0; padding: .5rem 1rem; border-radius: 8px; background: var(--fond); border: 1px dashed var(--bordure); color: var(--texte-doux); }
.bandeau-ristourne.en-cours { background: var(--principal); color: #fff; border: 0; font-weight: 700; }
.paniers-attente { border-top: 1px solid var(--bordure); padding-top: .5rem; }
.paniers-attente h2 { margin: .25rem 0 .5rem; font-size: 1rem; }
.paniers-attente ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.paniers-attente li { display: grid; gap: .3rem; }
.ligne-retiree td { color: var(--texte-doux); text-decoration: line-through; }
.ligne-retiree td:last-child, .ligne-retiree .aide { text-decoration: none; }
.sous-menu { margin-bottom: .75rem; }
.facture summary { cursor: pointer; font-weight: 700; min-height: 2.5rem; display: flex; align-items: center; }
.champs-acheteur { display: grid; gap: .4rem; }
.reglement .champs-acheteur label { grid-template-columns: 1fr; }
.reglement .champs-acheteur input, .reglement .champs-acheteur textarea { text-align: left; }

/* Inventaire */
.alerte-discret { background: #eef2f7; color: #3d4b61; border: 1px solid #9aa8bd; }
.alerte-bloquant { background: var(--erreur); color: #fff; font-weight: 800; font-size: 1.3rem; }
.alerte-plein-ecran { position: fixed; inset: 0; z-index: 100; background: #c62828; color: #fff; display: grid; place-content: center; gap: 2rem; padding: 2rem; text-align: center; }
.alerte-plein-ecran p { font-size: clamp(1.5rem, 4vw, 2.6rem); font-weight: 800; max-width: 50rem; margin: 0; }
.alerte-plein-ecran .bouton { font-size: 1.3rem; min-height: 4rem; justify-self: center; }
.compteur-restant { font-size: 1.3rem; }
.inventaire-termine { background: var(--succes-fond); color: var(--succes); }
.inventaire-en_cours { background: var(--alerte-fond); color: var(--alerte); }

/* Chèques */
.bandeau-restants { background: var(--erreur); color: #fff; border-radius: var(--rayon); padding: 1rem 1.25rem; margin-bottom: 1rem; }
.bandeau-restants h2 { margin-top: 0; }
.bandeau-restants a { color: #fff; }
.liste-perdus { list-style: none; padding: 0; }
.liste-perdus .case { margin: .25rem 0; }
.bandeau-restants .aide { color: #fff; display: block; margin-top: .35rem; }
.lien-retour { font-weight: 600; }

/* Fenêtre d'avertissement (dialog natif) */
.dialogue { max-width: min(32rem, calc(100vw - 2rem)); border: 1.5px solid var(--bordure); border-radius: var(--rayon); box-shadow: var(--ombre); background: var(--surface); color: inherit; padding: 1.25rem; }
.dialogue::backdrop { background: rgba(0, 0, 0, .45); }
.dialogue-titre { font-size: 1.2rem; font-weight: 800; color: var(--erreur); margin-top: 0; }
.montants-cheque dl { display: grid; grid-template-columns: 1fr auto; gap: .35rem 1.5rem; margin: 0 0 1rem; max-width: 32rem; }
.montants-cheque dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.montants-cheque .principal { font-size: 1.4rem; font-weight: 800; }
.cheque-emis { background: var(--alerte-fond); color: var(--alerte); }
.cheque-remis { background: var(--succes-fond); color: var(--succes); }
/* US-1.8 : statut du vendeur */
.statut-inscrit { border-style: dashed; }
.statut-depose { background: #e7efff; border-color: #b8cdf3; color: #174a96; }
.statut-paye { background: var(--alerte-fond); border-color: #f0cf8f; color: var(--alerte); }
.statut-restitue { background: var(--succes-fond); border-color: #a9d8b6; color: var(--succes); }
a.indicateur { color: inherit; text-decoration: none; }
a.indicateur:hover { border-color: var(--principal); }
.apercu-email { white-space: pre-wrap; font-family: inherit; background: var(--fond); padding: 1rem; border-radius: 8px; }
/* Page de connexion : édition, lieu, et horaires de part et d'autre de l'encadré (téléphone : en rangée au-dessus) */
.page-connexion {
  display: grid; gap: 1rem; margin-top: 1rem;
  grid-template-areas: "titre" "carte" "depot" "vente" "restitution";
}
.page-connexion .connexion-carte { grid-area: carte; margin: 0 auto; width: 100%; }
.connexion-titre { grid-area: titre; display: flex; align-items: center; justify-content: center; gap: 1rem; text-align: center; flex-wrap: wrap; }
.connexion-titre h1 { margin: 0; font-size: clamp(1.6rem, 5vw, 2.4rem); }
.connexion-lieu { margin: .25rem 0 0; font-size: 1.15rem; color: var(--texte-doux); }
.connexion-logo { max-height: 5rem; max-width: 10rem; width: auto; object-fit: contain; }
.moment { background: var(--surface); border: 1.5px solid var(--bordure); border-left: 6px solid var(--couleur-repere, var(--principal)); border-radius: var(--rayon); padding: .75rem 1rem; }
.moment h2 { margin: 0 0 .25rem; font-size: 1.1rem; }
.moment p { margin: 0; }
.moment-jour::first-letter { text-transform: uppercase; }
.moment-heures { font-weight: 700; font-size: 1.15rem; }
.moment-depot { grid-area: depot; }
.moment-vente { grid-area: vente; }
.moment-restitution { grid-area: restitution; }
/* Téléphone et tablette : les trois moments en une rangée compacte, juste au-dessus de l'encadré de connexion */
@media (max-width: 899px) {
  .page-connexion {
    grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: .5rem;
    grid-template-areas: "titre titre titre" "depot vente restitution" "carte carte carte";
  }
  .page-connexion .connexion-carte { margin-top: 0; }
  .page-connexion .moment { padding: .5rem .6rem; border-left-width: 1.5px; border-top: 5px solid var(--couleur-repere, var(--principal)); text-align: center; }
  .page-connexion .moment h2 { font-size: 1rem; }
  .page-connexion .moment p { font-size: .85rem; line-height: 1.3; }
  .page-connexion .moment-heures { font-size: .95rem; }
}
@media (min-width: 900px) {
  .page-connexion {
    grid-template-columns: 1fr minmax(0, 28rem) 1fr; grid-template-rows: auto auto 1fr; align-items: start; column-gap: 1.5rem;
    grid-template-areas: "titre titre titre" "depot carte vente" "restitution carte .";
  }
  .page-connexion .moment-depot, .page-connexion .moment-restitution { text-align: right; border-left-width: 1.5px; border-right: 6px solid var(--couleur-repere, var(--principal)); }
  .page-connexion .connexion-carte { grid-row: 2 / span 2; }
}

/* Configuration de l'édition : encadrés */
.configuration { display: grid; gap: 1rem; }
fieldset.encadre { margin: 0; display: grid; gap: 1rem; min-width: 0; }
fieldset.zone-contenu { margin: 0; padding: 0; border: 0; min-width: 0; }
fieldset.encadre legend { font-size: 1.2rem; font-weight: 700; padding: 0 .4rem; }
.encadre h3 { margin: .5rem 0 0; }
.modele-email { display: grid; gap: .75rem; border-top: 1px solid var(--bordure); padding-top: 1rem; }
.modele-email p { margin: 0; }
.apercu summary { cursor: pointer; font-weight: 600; }
.rabais { border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 1rem; }
.rabais .si-actif { display: grid; gap: 1rem; }
/* Pourcentage et heure montrés seulement si le rabais est actif. */
.rabais:not(:has(input[name="ristourne_active"]:checked)) .si-actif { display: none; }
.fichier { display: grid; gap: .5rem; }
.etiquette-champ { font-weight: 600; }
.fichier-apercu { max-height: 8rem; max-width: 100%; width: auto; justify-self: start; border: 1px solid var(--bordure); border-radius: 8px; background: #fff; }
.periode { display: grid; gap: .5rem; grid-template-columns: 1fr 1fr; }
.periode-titre { grid-column: 1 / -1; font-weight: 700; }
.periode label:first-of-type { grid-column: 1 / -1; }
@media (min-width: 700px) {
  .periode { grid-template-columns: 8rem 2fr 1fr 1fr; align-items: end; }
  .periode-titre { grid-column: auto; padding-bottom: .7rem; }
  .periode label:first-of-type { grid-column: auto; }
}
code { background: var(--fond); padding: 0 .3rem; border-radius: 4px; }

/* Tableau de bord */
.recherche-globale { margin-bottom: 1rem; }
.tableau-de-bord { margin-top: 1.5rem; }
.indicateurs { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); margin-bottom: .75rem; }
.indicateur { background: var(--surface); border: 1.5px solid var(--bordure); border-left: 6px solid var(--couleur-repere, var(--principal)); border-radius: var(--rayon); padding: .75rem 1rem; display: grid; gap: .2rem; }
.indicateur span { color: var(--texte-doux); font-size: .9rem; }
.indicateur strong { font-size: 1.7rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.indicateurs-petits { grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); }
.indicateurs-petits strong { font-size: 1.25rem; }
@keyframes surligne { from { background: #fff1a8; } to { background: transparent; } }
.change { animation: surligne 1.5s ease-out; border-radius: 4px; }
/* Sous-zones par état : le total et les vendus d'abord, puis les autres états. */
.sous-zones { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); align-items: start; }
.sous-zone { background: var(--surface); border: 1.5px solid var(--bordure); border-radius: var(--rayon); padding: .75rem 1rem; }
.sous-zone :is(h3, h4) { margin: 0 0 .25rem; font-size: 1rem; }
.sous-zone-total, .sous-zone-vendu { border-color: var(--principal); }
.sous-zone-nombre { margin: 0 0 .5rem; color: var(--texte-doux); }
.sous-zone-nombre strong { font-size: 1.7rem; font-weight: 800; color: var(--texte); font-variant-numeric: tabular-nums; }
.sous-zone-montants { display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem; margin: .5rem 0 0; }
.sous-zone-montants dt { color: var(--texte-doux); }
.sous-zone-montants dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.camembert { display: flex; gap: .75rem; align-items: center; }
.camembert svg { width: 6.5rem; height: 6.5rem; flex: none; }
.secteur { fill: none; stroke-width: 8; }
.legende { list-style: none; margin: 0; padding: 0; font-size: .85rem; display: grid; gap: .1rem; }
.puce-type { display: inline-block; width: .7rem; height: .7rem; border-radius: 3px; margin-right: .35rem; vertical-align: baseline; }
.tableau-types { font-size: .9rem; }
.tableau-types th, .tableau-types td { padding: .35rem .4rem; white-space: normal; }
.tableau-types th { position: static; }
/* Couleurs des types de jouets (identifiant du type modulo 14), les mêmes dans tous les camemberts. */
.couleur-0 { --couleur: var(--magenta); } .couleur-1 { --couleur: var(--vert); } .couleur-2 { --couleur: var(--principal); }
.couleur-3 { --couleur: var(--orange); } .couleur-4 { --couleur: var(--ciel); } .couleur-5 { --couleur: var(--jaune); }
.couleur-6 { --couleur: #2a9d8f; } .couleur-7 { --couleur: #8d6e63; } .couleur-8 { --couleur: #e76f51; }
.couleur-9 { --couleur: #3a6ea5; } .couleur-10 { --couleur: #ec8fa0; } .couleur-11 { --couleur: #6b7280; }
.couleur-12 { --couleur: #9c6ade; } .couleur-13 { --couleur: #1b5e20; }
.secteur[class*="couleur-"] { stroke: var(--couleur); }
.puce-type[class*="couleur-"] { background: var(--couleur); }
.jeton { font-size: 1.1rem; word-break: break-all; display: inline-block; padding: .5rem; }
.liste-imprimantes { list-style: none; padding: 0; display: grid; gap: .5rem; }
.liste-imprimantes li { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.voyant { width: .8rem; height: .8rem; border-radius: 50%; display: inline-block; }
.voyant-vert { background: var(--succes); }
.voyant-rouge { background: var(--erreur); }
form.en-ligne { display: inline; }
.choix-lot { border: 1px solid var(--bordure); border-radius: 8px; display: grid; gap: .5rem; }
.choix-lot .case { flex-wrap: wrap; }
.champ-court { width: 8rem !important; }

/* Menu latéral des PC de la salle : plein, icônes seules ou masqué (bouton ☰). */
.avec-menu {
  --hauteur-entete: 56px; --largeur-menu: 240px; --largeur-icones: 64px; --principal-doux: var(--principal-pale);
  padding-top: var(--hauteur-entete); transition: padding-left .2s ease;
}
/* Barre du haut en trois colonnes : le nom de la page reste centré tant que la place le permet. */
.avec-menu .entete {
  position: fixed; inset: 0 0 auto 0; height: var(--hauteur-entete); padding: 0 .75rem;
  display: grid; grid-template-columns: minmax(max-content, 1fr) minmax(0, auto) minmax(max-content, 1fr); gap: .75rem;
}
.avec-menu .entete-gauche { flex-wrap: nowrap; gap: .75rem; }
.avec-menu .entete-titre { white-space: nowrap; }
.avec-menu .pastille { white-space: nowrap; }
.avec-menu .entete-compte { justify-self: end; margin-left: 0; }
.entete-page { margin: 0; font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bouton-menu {
  flex: none; width: 40px; height: 40px; border: 0; border-radius: 8px;
  background: transparent; color: var(--texte); display: grid; place-items: center; cursor: pointer;
}
.bouton-menu svg { width: 22px; height: 22px; }
.bouton-menu:hover { background: var(--principal-doux); }
.bouton-menu:focus-visible, .menu-lateral a:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.menu-lateral {
  position: fixed; top: var(--hauteur-entete); bottom: 0; left: 0; z-index: 9; width: var(--largeur-menu);
  background: var(--surface); border-right: 1px solid var(--bordure); overflow-x: hidden; overflow-y: auto;
  transition: width .2s ease, transform .2s ease;
}
.menu-lateral ul { list-style: none; margin: 0; padding: .5rem; display: grid; gap: .25rem; }
.menu-lateral a {
  display: flex; align-items: center; gap: 14px; height: 44px; padding: 0 12px;
  border-radius: var(--rayon); color: var(--texte); text-decoration: none; white-space: nowrap;
}
.menu-lateral a:hover { background: var(--principal-doux); }
.menu-lateral a[aria-current="page"] { background: var(--principal-doux); color: var(--principal); font-weight: 600; }
.menu-lateral svg { flex: none; width: 22px; height: 22px; }
.menu-separateur { height: 1px; background: var(--bordure); margin: .4rem .25rem; }
.menu-voile { display: none; }
/* Ordinateur : le contenu se décale ; le choix est retenu (cookie « menu »). */
@media (min-width: 701px) {
  .avec-menu[data-menu="plein"] { padding-left: var(--largeur-menu); }
  .avec-menu[data-menu="icones"] { padding-left: var(--largeur-icones); }
  [data-menu="icones"] .menu-lateral { width: var(--largeur-icones); }
  [data-menu="icones"] .menu-libelle { display: none; }
  [data-menu="masque"] .menu-lateral { transform: translateX(-100%); }
}
/* Téléphone : menu fermé à chaque page ; ouvert en plein, il passe par-dessus le contenu. */
@media (max-width: 700px) {
  .avec-menu .entete-nom, .avec-menu .entete-titre, .avec-menu .pastille { display: none; }
  .entete-page { font-size: 1.2rem; }
  .menu-lateral { transform: translateX(-100%); }
  [data-menu-mobile="plein"] .menu-lateral, [data-menu-mobile="icones"] .menu-lateral { transform: none; }
  [data-menu-mobile="plein"] .menu-lateral { box-shadow: 4px 0 20px rgba(0, 0, 0, .15); }
  [data-menu-mobile="plein"] .menu-voile { display: block; position: fixed; inset: var(--hauteur-entete) 0 0 0; z-index: 8; background: rgba(0, 0, 0, .35); }
  .avec-menu[data-menu-mobile="icones"] { padding-left: var(--largeur-icones); }
  [data-menu-mobile="icones"] .menu-lateral { width: var(--largeur-icones); }
  [data-menu-mobile="icones"] .menu-libelle { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .avec-menu, .menu-lateral { transition: none; }
}