/* Gestion atelier – charte Van Kustom : noir et or, sur fond clair pour la lisibilité.
   Contrastes vérifiés (WCAG/RGAA) : l'or #c8a44a n'est utilisé pour du texte que sur fond noir (7,9:1) ;
   sur fond clair, texte et liens passent en or foncé #7a5d1c (6,2:1). */

@font-face { font-family: "Oswald"; src: url("fonts/oswald.woff2") format("woff2"); font-weight: 500 700; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/barlow-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/barlow-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/barlow-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --noir: #131311;
  --noir-2: #252522;        /* survol dans l'en-tête */
  --or: #c8a44a;            /* texte sur noir, filets décoratifs */
  --or-clair: #e2c278;
  --or-fonce: #7a5d1c;      /* texte et liens sur fond clair */
  --or-pale: #fbf6e8;       /* fonds légers */
  --creme: #f0ede4;
  --fond: #f7f5ef;
  --blanc: #fff;
  --texte: #1c1c1a;
  --texte-2: #57554e;       /* texte secondaire */
  --bordure: #8a877d;       /* bordure des champs (3:1 minimum) */
  --bordure-douce: #e4e0d4; /* séparateurs, cadres */
  --rouge: #b91c1c;
  --vert: #166534;
  --titres: "Oswald", "Arial Narrow", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; } /* l'attribut hidden l'emporte toujours sur les display des composants */

body {
  margin: 0;
  font: 16px/1.5 "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--texte);
  background: var(--fond);
}
/* Atelier (dossier preprod-…) : fond jaune pâle et bandeau, pour ne jamais le confondre avec la production */
body.atelier { background: #fff6c2; }
.bandeau-atelier { margin: 0; padding: .45rem 1rem; background: #f5d547; color: var(--noir); text-align: center;
  font: 600 .95rem/1.3 "Barlow", sans-serif; border-bottom: 2px solid var(--noir); }
.pied-site { max-width: 1200px; margin: 0 auto; padding: 1rem 1.5rem 2rem; color: var(--texte-2); font-size: .85rem; }
main { max-width: 1200px; margin: 0 auto; padding: 1.25rem 1.5rem 3rem; }
h1, h2, h3 { font-family: var(--titres); font-weight: 600; line-height: 1.2; letter-spacing: .01em; }
h1 { font-size: 1.75rem; margin: .5rem 0 1rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.1rem; }
a { color: var(--or-fonce); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--noir); }
code { background: var(--creme); padding: 0 .25em; border-radius: 3px; }
strong { font-weight: 600; }

/* Focus clavier : anneau or séparé de l'élément par un liseré noir, visible sur fond clair comme foncé */
:focus-visible { outline: 3px solid var(--or); outline-offset: 2px; box-shadow: 0 0 0 2px var(--noir); }

.carte {
  background: var(--blanc);
  border: 1px solid var(--bordure-douce);
  border-top: 3px solid var(--or);
  border-radius: 6px;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
}
.ligne { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.ligne input { flex: 1; }
.ligne label { margin: 0; }
label { display: block; font-weight: 600; margin-bottom: .4rem; }

/* Boutons : noir et or (principal), blanc bordé de noir (secondaire) */
button, .bouton {
  display: inline-block;
  font: 600 1rem/1.2 var(--titres);
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .6rem 1.1rem;
  border: 2px solid var(--noir);
  border-radius: 4px;
  background: var(--noir);
  color: var(--or);
  cursor: pointer;
  text-align: center;
}
button:hover, .bouton:hover { background: var(--or); color: var(--noir); }
button.secondaire, .bouton.secondaire { background: var(--blanc); color: var(--noir); }
button.secondaire:hover, .bouton.secondaire:hover { background: var(--or-pale); color: var(--noir); }
button.danger { color: var(--rouge); border-color: var(--rouge); }
button.danger:hover { background: #fef2f2; color: var(--rouge); }
button.lien { background: none; border: none; padding: .25rem; color: var(--rouge); font: inherit; text-transform: none; letter-spacing: 0; text-decoration: underline; }

/* Tableaux */
table { width: 100%; border-collapse: collapse; background: var(--blanc); }
th, td { text-align: left; padding: .55rem .75rem; border-bottom: 1px solid var(--bordure-douce); }
thead th { font-family: var(--titres); font-weight: 500; text-transform: uppercase; letter-spacing: .04em;
  font-size: .9rem; background: var(--noir); color: var(--creme); border-bottom: 2px solid var(--or); }
tbody tr:hover { background: #fcfaf4; }
tfoot th, tfoot td { font-weight: 600; }
.n { text-align: right; }
th.n, td.n { white-space: nowrap; }
tr.inactif td { color: var(--texte-2); }
.defilement { overflow-x: auto; }

/* Messages */
.petit { font-size: .875rem; color: var(--texte-2); }
.alerte { background: #fef2f2; border-left: 4px solid var(--rouge); padding: .6rem .85rem; color: #7f1d1d; }
.alerte p, .alerte ul { margin: .25rem 0; }
.message { background: #f0f7f2; border-left: 4px solid var(--vert); padding: .6rem .85rem; color: #14532d; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* En-tête : comme le site, fond noir et or */
.entete-site { display: flex; flex-wrap: wrap; align-items: center; gap: 0 2rem; padding: 0 1.5rem;
  background: var(--noir); color: var(--creme); border-bottom: 3px solid var(--or); }
.entete-site .marque { display: flex; align-items: center; gap: .6rem; padding: .35rem 0; text-decoration: none; color: var(--or); }
.marque img { height: 40px; width: auto; display: block; }
.marque span { font: 600 1.05rem/1.1 var(--titres); text-transform: uppercase; letter-spacing: .06em; }
.entete-site ul { display: flex; flex-wrap: wrap; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.entete-site a { display: block; padding: .95rem .85rem; color: var(--creme); text-decoration: none;
  font: 500 1rem/1.2 var(--titres); text-transform: uppercase; letter-spacing: .05em; }
.entete-site a:hover { background: var(--noir-2); color: var(--or-clair); }
.entete-site a[aria-current="page"] { color: var(--or); box-shadow: inset 0 -4px 0 var(--or); }
.entete-site .marque:hover { background: none; }
.compte { margin-left: auto; display: flex; align-items: center; gap: .25rem; }
.compte form { margin: 0; }
.compte a { text-transform: none; letter-spacing: 0; font-family: "Barlow", sans-serif; }
button.lien-clair { background: none; border: none; color: var(--creme); font: 400 1rem/1.2 "Barlow", sans-serif;
  text-transform: none; letter-spacing: 0; text-decoration: underline; padding: .95rem .5rem; }
button.lien-clair:hover { color: var(--or-clair); }
.evitement { position: absolute; left: -9999px; }
.evitement:focus { left: 1rem; top: .5rem; background: var(--blanc); color: var(--noir) !important; padding: .5rem 1rem; z-index: 10; }

/* Mise en page commune */
.titre-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 1rem 0; }
.actions form { margin: 0; }
.filtres { margin: 1rem 0; gap: .5rem 1rem; }
/* Chaque intitulé reste avec son champ quand la ligne déborde ; les listes ne s'élargissent pas au nom de
   fournisseur le plus long (un nom trop long est simplement coupé dans la liste fermée). */
.filtre { display: flex; align-items: center; gap: .5rem; }
.filtre input[type=search] { flex: none; width: 13rem; max-width: 100%; }
.filtre select { max-width: 15rem; }
.nouvelle-commande .formulaire select { max-width: 20rem; } /* plus précis que la règle générale des formulaires */

/* Formulaires */
input, select, textarea { font: inherit; padding: .5rem .65rem; border: 1px solid var(--bordure); border-radius: 4px; background: var(--blanc); color: var(--texte); }
input[disabled], select[disabled], textarea[disabled] { background: #f4f2ec; color: var(--texte-2); }
input[readonly], textarea[readonly] { background: #f4f2ec; color: var(--texte); border-style: dashed; }
.lecture-seule { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: 0 0 1rem;
  padding: .75rem 1rem; background: #f4f2ec; border-left: 4px solid var(--texte-2); }
.lecture-seule p { margin: 0; flex: 1; min-width: 16rem; }
.lecture-seule form { margin: 0; }
.formulaire .champ { margin-bottom: .9rem; }
.formulaire input[type=text], .formulaire input[type=email], .formulaire input[type=tel], .formulaire input[type=password],
.formulaire input[type=date], .formulaire textarea, .formulaire select { width: 100%; max-width: 32rem; }
.formulaire.en-ligne { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; }
.formulaire.en-ligne .champ { margin: 0; }
.formulaire.en-ligne .champ.large { flex: 1; min-width: 18rem; }
.formulaire.colonnes { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0 1rem; margin-top: 1rem; }
.formulaire.colonnes .actions { grid-column: 1 / -1; }
.champ.case { display: flex; gap: .5rem; align-items: center; }
.champ.case label { margin: 0; font-weight: normal; }
input[type=checkbox], input[type=radio] { accent-color: var(--noir); }
fieldset { border: 1px solid var(--bordure-douce); border-radius: 6px; margin: 0 0 1rem; padding: .75rem 1rem; }
legend { font-weight: 600; padding: 0 .25rem; }
fieldset.sans-cadre { border: none; margin: 0; padding: 0; min-width: 0; }

/* Statuts de commande */
.statut { display: inline-block; white-space: nowrap; padding: .1rem .6rem; border-radius: 999px; font: 600 .85rem/1.5 "Barlow", sans-serif;
  vertical-align: middle; border: 1px solid; letter-spacing: 0; text-transform: none; }
.statut-brouillon { background: #f4f2ec; color: var(--texte-2); border-style: dashed; }
.statut-envoyee { background: var(--or-pale); color: #6b5118; }
.statut-partielle { background: #fff4ea; color: #9a3412; }
.statut-livree { background: #f0f7f2; color: var(--vert); }
.statut-annulee { background: #fef2f2; color: #991b1b; }

/* Connexion */
.connexion main { max-width: 26rem; padding-top: 3rem; }
.boite-connexion { text-align: left; }
.logo-connexion { display: block; height: 90px; width: auto; margin: .5rem auto 1rem; }
.connexion .boite-connexion { background: var(--noir); color: var(--creme); border: none; border-top: 3px solid var(--or); padding: 1.5rem; }
.connexion .boite-connexion h1 { margin-top: 0; text-align: center; color: var(--or); text-transform: uppercase; letter-spacing: .06em; }
.connexion .boite-connexion input { width: 100%; border-color: var(--bordure); }
.connexion .boite-connexion button { width: 100%; background: var(--or); color: var(--noir); border-color: var(--or); margin-top: .5rem; }
.connexion .boite-connexion button:hover { background: var(--or-clair); }
.connexion .boite-connexion .petit { color: #c9c6bc; }
.connexion .boite-connexion .alerte { margin-bottom: 1rem; }

/* Utilisateurs et droits */
table.droits td { text-align: center; }
table.droits input[type=radio] { width: 1.25rem; height: 1.25rem; }
table.droits caption { text-align: left; font-weight: 600; padding: .5rem 0; }

/* Commandes */
.nouvelle-commande h2 { margin: 0 0 .25rem; }
.fournisseurs-frequents { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0 1.25rem; }
.etiquette-groupe { flex-basis: 100%; margin: 0 0 .1rem; font-weight: 600; }
.fournisseurs-frequents button { min-width: 10rem; padding: .8rem 1rem; }
.numero-commande { text-align: center; background: var(--noir); color: var(--creme); border-top-color: var(--or); }
.numero-commande p { margin: .35rem 0; }
.numero-commande .petit { color: #c9c6bc; }
.numero-commande a { color: var(--or-clair); }
.numero-commande a:hover { color: var(--blanc); }
.numero-commande strong { color: var(--blanc); }
.grand-numero { font: 700 3rem/1.1 var(--titres); letter-spacing: .08em; color: var(--or); }
.numero-commande button.secondaire { background: transparent; color: var(--or); border-color: var(--or); }
.numero-commande button.secondaire:hover { background: var(--or); color: var(--noir); }
.numero a { font-weight: 600; white-space: nowrap; }
td.immat { white-space: nowrap; font-family: var(--titres); letter-spacing: .05em; }
td.resume { color: var(--texte-2); }
.formulaire textarea#demandes { max-width: 40rem; font-size: 1.05rem; }
.pas-transmise { color: var(--or-clair); }
.transmission { max-width: 40rem; margin-top: 1.25rem; border-color: var(--or); background: var(--or-pale); }
.transmission .ligne { gap: .5rem .75rem; }
.transmission .petit { margin: .5rem 0 0; }
.confirmation-mail { border-top-color: var(--vert); }
.confirmation-mail p { margin: 0 0 .5rem; }
.sans-marge { margin: 0 !important; }
.restauration { background: #fff8e6; border-left: 4px solid var(--or-fonce); padding: .6rem .85rem; margin: 0 0 1rem; max-width: 40rem; }
.restauration button.lien { color: var(--or-fonce); font-weight: 600; }

/* Dictée */
.libelle-dictee { display: flex; align-items: center; gap: .75rem; margin-bottom: .4rem; max-width: 40rem; }
.libelle-dictee label { margin: 0; }
.bouton-dictee { padding: .3rem .8rem; font-size: .9rem; white-space: nowrap; flex-shrink: 0; }
.bouton-dictee::before { content: "🎤 "; content: "🎤 " / ""; } /* icône décorative, non lue */
.bouton-dictee.actif { background: var(--rouge); border-color: var(--rouge); color: var(--blanc); }
.etat-dictee { min-height: 1.5em; color: var(--texte-2); font-style: italic; margin: 0 0 .5rem; }
.dictee-complete { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-bottom: 1rem;
  padding: .75rem; background: var(--or-pale); border: 1px dashed var(--or-fonce); border-radius: 6px; max-width: 40rem; }
.dictee-complete p { margin: 0; flex: 1; min-width: 14rem; }
.dictee-complete .etat-dictee { flex-basis: 100%; }
.dictee-complete .bouton-dictee { padding: .55rem 1rem; font-size: 1rem; }
.dictee-cible { outline: 3px solid var(--rouge); outline-offset: 2px; background: #fffbeb; }
/* Pendant une dictée seulement, l'encadré reste en haut de l'écran (bouton Arrêter et texte reconnu visibles).
   Hors dictée, il défile normalement pour ne masquer aucun champ ; la marge de défilement garde le champ
   actif visible sous l'encadré (RGAA : focus non masqué). */
.dictee-active .dictee-complete { position: sticky; top: 0; z-index: 5; box-shadow: 0 4px 12px rgba(19, 19, 17, .15); }
html:has(.dictee-active) { scroll-padding-top: 11rem; }

/* Catalogue */
.catalogue { font-size: .92rem; }
.catalogue .ref { white-space: nowrap; font-weight: 600; }
.pagination { display: flex; gap: 1.5rem; align-items: center; justify-content: center; margin: 1rem 0; }
details.carte summary { cursor: pointer; font-weight: 600; }
details.carte[open] summary { margin-bottom: .75rem; }
.apercu { font-size: .85rem; }
.apercu-import { font-size: .92rem; }
.apercu-import tr.import-creer td:nth-child(2) { color: var(--vert); font-weight: 600; }
.apercu-import tr.import-maj td:nth-child(2) { color: #6b5118; font-weight: 600; }
.apercu-import tr.import-identique td { color: var(--texte-2); }
.apercu-import tr.import-ignore td:nth-child(2) { color: var(--rouge); font-weight: 600; }
td.telephone { white-space: nowrap; }
.avertissement { display: block; color: #9a3412; }
.apercu caption { text-align: left; font-weight: 600; padding: .25rem 0; }

/* Écran PC d'une capture */
.capture-pc { display: grid; grid-template-columns: 300px 1fr; gap: 1.5rem; align-items: start; }
.qr { text-align: center; position: sticky; top: 1rem; }
.qr img { display: block; margin: 0 auto; background: var(--blanc); }
.qr .petit { word-break: break-all; }
.attente { color: var(--texte-2); font-style: italic; }
.photo h3 { margin: 0 0 .75rem; }
.photo.statut-ok h3 { color: var(--vert); }
.photo.statut-erreur h3 { color: var(--rouge); }
.images { display: flex; gap: .75rem; margin-bottom: .75rem; }
.images img { height: 160px; border: 1px solid var(--bordure-douce); border-radius: 4px; }
.texte-ocr {
  margin: 0; padding: .75rem; max-height: 480px; overflow: auto;
  background: #fbfaf6; border: 1px solid var(--bordure-douce);
  font: 13px/1.4 ui-monospace, Menlo, Consolas, monospace; white-space: pre;
}

/* Page mobile (photo du BL) */
.mobile main { padding: 1rem; }
.logo-mobile { display: block; height: 48px; width: auto; margin: 0 auto .5rem; }
.mobile .bouton { display: block; width: 100%; padding: 1.1rem; margin-bottom: .75rem; font-size: 1.15rem; }
#envois { padding-left: 1.25rem; }
#envois li { margin-bottom: .5rem; }
#envois li.ok { color: var(--vert); }
#envois li.erreur { color: var(--rouge); }

@media (max-width: 800px) {
  .capture-pc { grid-template-columns: 1fr; }
  .qr { position: static; }
}

@media (max-width: 640px) {
  main { padding: .75rem .9rem 2rem; }
  .entete-site { padding: 0 .75rem; gap: 0 1rem; }
  .entete-site a { padding: .7rem .5rem; }
  .marque img { height: 34px; }
  .compte { margin-left: 0; }
  .formulaire.en-ligne .champ, .formulaire.en-ligne select, .formulaire.en-ligne input { width: 100%; }
  .nouvelle-commande button, .formulaire button[type=submit] { width: 100%; padding: .85rem; }
  .fournisseurs-frequents button { width: auto; min-width: 0; flex: 1 1 40%; } /* deux par ligne sur téléphone */
  .filtre { flex: 1 1 100%; min-width: 0; } /* sinon la liste garde la largeur du nom de fournisseur le plus long */
  .filtre label { flex: 0 0 auto; }
  .filtre input[type=search], .filtre select { flex: 1; width: auto; max-width: none; min-width: 0; }
  .filtres button { width: 100%; }
  .grand-numero { font-size: 2.6rem; }
}