/* Ticket Péi — espace web. Sans framework ni étape de build (hébergement mutualisé). */
:root {
  /* Couleurs du logo */
  --nuit: #0b1426; --nuit-2: #132235;                         /* fond de l'icône */
  --primaire: #0068d6; --primaire-fonce: #0052a8;             /* bleu du ticket (assombri : contraste AA avec le blanc) */
  --primaire-clair: #e7f2ff; --ciel: #00a7fd;                 /* bleu « PEI » */
  --soleil: #febb2f; --soleil-clair: #fff6df;                 /* soleil */
  /* États (restent distincts du logo) */
  --succes: #12784a; --succes-clair: #e4f5ec;
  --orange: #b45c00; --orange-clair: #fff3df; --rouge: #b42318; --rouge-clair: #fdecea;
  --texte: #14202f; --gris: #566476; --bord: #dde3ec; --fond: #f3f6fa; --carte: #fff;
  --rayon: 10px; --ombre: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
}
* { box-sizing: border-box; }
html { font-size: 100%; } /* textes agrandissables : tout en rem */
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--texte); background: var(--fond); line-height: 1.5; }
a { color: var(--primaire); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--soleil); outline-offset: 2px; }
.lien-evitement { position: absolute; left: -999px; }
.lien-evitement:focus { left: 1rem; top: 1rem; background: #fff; padding: .5rem; z-index: 10; }

header.barre { background: linear-gradient(180deg, var(--nuit-2), var(--nuit)); color: #fff; }
header.barre .int { max-width: 1180px; margin: 0 auto; padding: .7rem 1rem; display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
header.barre .logo { font-weight: 800; font-size: 1.2rem; color: #fff; text-decoration: none; letter-spacing: -.01em; order: 1; }
header.barre .logo span { color: var(--ciel); }
header.barre .logo { display: inline-flex; align-items: center; gap: .5rem; }
header.barre .logo img { width: 30px; height: 30px; border-radius: 7px; }
header.barre .offre { font-size: .75rem; font-weight: 700; padding: .15rem .5rem; border-radius: 99px; background: var(--soleil); color: var(--nuit); order: 3; }
header.barre nav { display: flex; gap: .2rem; flex-wrap: wrap; align-items: center; flex: 1; order: 2; }
header.barre nav a { color: #dbe7f5; text-decoration: none; padding: .35rem .7rem; border-radius: 6px; font-size: .95rem; white-space: nowrap; }
header.barre nav a.actif, header.barre nav a:hover { background: rgba(0,167,253,.18); color: #fff; }
header.barre nav a.actif { box-shadow: inset 0 -2px 0 var(--ciel); }
header.barre nav form { margin-left: auto; }
header.barre nav form button, .bouton-menu { background: none; border: 1px solid rgba(255,255,255,.4); color: #fff; padding: .35rem .75rem; border-radius: 6px; cursor: pointer; font: inherit; font-size: .9rem; }
.bouton-menu { display: none; order: 4; }

/* Téléphone : barre compacte + menu déroulant */
@media (max-width: 820px) {
  header.barre .int { gap: .6rem; }
  header.barre .offre { margin-left: auto; }
  .bouton-menu { display: inline-flex; gap: .35rem; align-items: center; }
  header.barre nav { order: 5; flex: 1 1 100%; display: none; flex-direction: column; align-items: stretch; gap: 0;
                     border-top: 1px solid rgba(255,255,255,.18); padding-top: .4rem; }
  header.barre nav.ouvert { display: flex; }
  header.barre nav a { padding: .7rem .6rem; font-size: 1.05rem; border-radius: 8px; }
  header.barre nav form { margin: .4rem 0 .2rem; }
  header.barre nav form button { width: 100%; padding: .6rem; }
}
@media (max-width: 820px) and (scripting: none) { header.barre nav { display: flex; } .bouton-menu { display: none; } }

main { max-width: 1180px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
h1 { font-size: 1.6rem; margin: 0 0 1rem; letter-spacing: -.01em; }
h2 { font-size: 1.15rem; margin: 0 0 .8rem; }
.sous-titre { color: var(--gris); margin: -.6rem 0 1.2rem; }

.grille { display: grid; gap: 1rem; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.carte { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 1.1rem 1.2rem; box-shadow: var(--ombre); }
.carte + .carte { margin-top: 1rem; }
.grille > .carte + .carte { margin-top: 0; }
.chiffre { font-size: 1.7rem; font-weight: 750; letter-spacing: -.02em; }
.etiquette { color: var(--gris); font-size: .85rem; }

table { width: 100%; border-collapse: collapse; font-size: .95rem; }
th { text-align: left; color: var(--gris); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; padding: .5rem; border-bottom: 2px solid var(--bord); }
td { padding: .55rem .5rem; border-bottom: 1px solid var(--bord); vertical-align: middle; }
tr.a-verifier td { background: var(--orange-clair); }
.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.table-defile { overflow-x: auto; }

.badge { display: inline-block; padding: .1rem .55rem; border-radius: 99px; font-size: .78rem; font-weight: 650; }
.b-en_attente { background: #eef2f6; color: #3d4b5c; }
.b-a_valider { background: var(--orange-clair); color: var(--orange); }
.b-valide { background: var(--succes-clair); color: var(--succes); }
.b-erreur { background: var(--rouge-clair); color: var(--rouge); }
.b-estime { background: #eef2f6; color: #3d4b5c; }
.b-ancien { background: var(--orange-clair); color: var(--orange); }
.b-local { background: var(--soleil-clair); color: #7a5300; }

.alerte { padding: .8rem 1rem; border-radius: 8px; margin-bottom: 1rem; border-left: 4px solid; }
.alerte-ok { background: var(--succes-clair); border-color: var(--succes); }
.alerte-attention { background: var(--orange-clair); border-color: var(--orange); }
.alerte-erreur { background: var(--rouge-clair); border-color: var(--rouge); }
.alerte ul { margin: .3rem 0 0; padding-left: 1.2rem; }

label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .25rem; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=datetime-local], input[type=search], select, textarea {
  width: 100%; padding: .55rem .7rem; border: 1px solid #c5ccd3; border-radius: 7px; font: inherit; background: #fff; color: inherit;
}
textarea { min-height: 9rem; font-family: ui-monospace, Menlo, monospace; font-size: .85rem; }
.champ { margin-bottom: .9rem; }
.aide { color: var(--gris); font-size: .82rem; margin-top: .2rem; }
.erreur-champ { color: var(--rouge); font-size: .85rem; margin-top: .2rem; }
.ligne-form { display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-end; }
.ligne-form > * { flex: 1 1 140px; }
.ligne-form > .serre { flex: 0 0 auto; }
.case { display: flex; gap: .5rem; align-items: center; font-weight: 500; }
.case input { width: 1.1rem; height: 1.1rem; }

.btn { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid transparent; background: var(--primaire); color: #fff; padding: .55rem 1rem; border-radius: 7px; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; }
.btn:hover { background: var(--primaire-fonce); }
.btn-second { background: #fff; color: var(--primaire); border-color: var(--primaire); }
.btn-second:hover { background: var(--primaire-clair); }
.btn-danger { background: #fff; color: var(--rouge); border-color: var(--rouge); }
.btn-petit { padding: .3rem .6rem; font-size: .85rem; }
.actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

.vis-a-vis { display: grid; grid-template-columns: minmax(260px, 380px) minmax(0, 1fr); gap: 1rem; align-items: start; }
.vis-a-vis > * { min-width: 0; } /* le tableau des lignes défile au lieu d'élargir la page */
.vis-a-vis .image { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; }
.vis-a-vis .image img { display: block; max-width: 100%; height: auto; margin: 0 auto .5rem; border-radius: 8px; border: 1px solid var(--bord); background: #fff; }
.vis-a-vis .image .aide { text-align: center; }
@media (max-width: 860px) {
  .vis-a-vis { grid-template-columns: minmax(0, 1fr); }
  .vis-a-vis .image { position: static; max-height: none; overflow: visible; }
  /* Téléphone : la photo tient dans l'écran (un appui l'ouvre en grand) */
  .vis-a-vis .image img { max-height: 60vh; width: auto; object-fit: contain; }
}
/* Safari iOS zoome sur les champs dont le texte fait moins de 16 px */
@media (max-width: 860px) {
  input, select, textarea, .ligne-edit input { font-size: 16px; }
}
html, body { max-width: 100%; overflow-x: hidden; }

.ligne-edit input { padding: .3rem .45rem; font-size: .9rem; }
.ligne-edit .lib { min-width: 16rem; }
.ligne-edit .mt { width: 6.5rem; text-align: right; }
.ligne-edit .qt { width: 5rem; text-align: right; }
.ligne-edit .tv { width: 4.5rem; text-align: right; }

.barre-prog { height: 8px; background: var(--bord); border-radius: 99px; overflow: hidden; }
.barre-prog > div { height: 100%; background: var(--primaire); }
.liste-barres .rang { display: grid; grid-template-columns: 9rem 1fr 6rem; gap: .6rem; align-items: center; margin-bottom: .4rem; font-size: .9rem; }

.vide { text-align: center; padding: 2rem 1rem; color: var(--gris); }
.pagination { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: 1rem; }
.pagination a, .pagination span { padding: .3rem .65rem; border: 1px solid var(--bord); border-radius: 6px; text-decoration: none; background: #fff; }
.pagination .actif { background: var(--primaire); color: #fff; border-color: var(--primaire); }

.auth { max-width: 420px; margin: 3rem auto; }
.auth .logo-grand { text-align: center; font-size: 2rem; font-weight: 800; color: var(--nuit); margin-bottom: .2rem; }
.auth .logo-grand img { display: block; width: 96px; height: 96px; margin: 0 auto .6rem; border-radius: 22px; box-shadow: 0 8px 24px rgba(11,20,38,.25); }
.auth .logo-grand span { color: var(--primaire); }
.auth p.intro { text-align: center; color: var(--gris); margin-top: 0; }
.zone-depot { border: 2px dashed #b9c4cc; border-radius: var(--rayon); padding: 1.2rem; text-align: center; background: #fbfcfb; }
.mention { font-size: .85rem; color: var(--gris); }
footer.pied { text-align: center; color: var(--gris); font-size: .8rem; padding: 2rem 1rem; }

/* Photos d'un ticket long */
.photos-actions { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; margin: .3rem 0 .6rem; }
.photos-liste { list-style: none; padding: 0; margin: 0 0 .5rem; display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; }
.photos-liste li { position: relative; width: 84px; height: 112px; border: 1px solid var(--bord); border-radius: 8px; overflow: hidden; background: #fff;
                   display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--gris); }
.photos-liste img { width: 100%; height: 100%; object-fit: cover; }
.photos-liste span { position: absolute; left: 4px; top: 4px; background: var(--primaire); color: #fff; border-radius: 99px; font-size: .75rem; padding: 0 .4rem; }
.photos-liste button { position: absolute; right: 2px; top: 2px; padding: .05rem .4rem; }

/* Champs : jamais plus larges que leur carte (dates iOS comprises) */
.ligne-form > * { min-width: 0; }
input, select, textarea { max-width: 100%; min-width: 0; }
input[type=date], input[type=datetime-local] { display: block; -webkit-appearance: none; appearance: none; min-height: 2.6rem; text-align: left; }

/* Téléphone : chaque ligne du ticket devient une carte lisible */
@media (max-width: 860px) {
  .table-defile:has(.tableau-lignes) { overflow: visible; }
  .tableau-lignes, .tableau-lignes tbody, .tableau-lignes tfoot { display: block; width: 100%; }
  .tableau-lignes thead { display: none; }
  .tableau-lignes tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem .6rem;
                             border: 1px solid var(--bord); border-radius: 10px; padding: .75rem; margin-bottom: .75rem; background: #fff; }
  .tableau-lignes tbody tr.a-verifier { background: var(--orange-clair); border-color: #f0c27a; }
  .tableau-lignes tbody td { display: block; border: none; padding: 0; text-align: left; background: none !important; }
  .tableau-lignes td.cellule-libelle { grid-column: 1 / -1; }
  .tableau-lignes td.cellule-libelle input { width: 100%; font-weight: 600; }
  .tableau-lignes td.cellule-libelle select { width: 100%; margin-top: .3rem; }
  .tableau-lignes td[data-label]::before { content: attr(data-label); display: block; font-size: .72rem; font-weight: 700;
                                           color: var(--gris); text-transform: uppercase; letter-spacing: .03em; margin-bottom: .15rem; }
  .tableau-lignes td input.qt, .tableau-lignes td input.mt, .tableau-lignes td input.tv { width: 100%; text-align: right; }
  .tableau-lignes td.cellule-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: .5rem; }
  .tableau-lignes td.cellule-actions .btn { padding: .5rem 1rem; }
  .tableau-lignes tfoot tr.ligne-total { display: flex; justify-content: space-between; padding: .5rem .25rem; border-top: 1px solid var(--bord); }
  .tableau-lignes tfoot td { border: none; padding: 0; }
  .tableau-lignes tfoot td:empty { display: none; }
}
.texte-mobile { display: none; }
@media (max-width: 860px) { .texte-mobile { display: inline; } }
/* Petits téléphones : un champ par ligne, plus lisible */
@media (max-width: 520px) { .ligne-form > *:not(.serre) { flex-basis: 100%; } }