/* Console des réservations d'Aux Heures Heureuses.
   Une demande se lit comme un bon de réservation : son talon détachable porte la date du service.
   Les teintes viennent de la marque du restaurant ; la brique ne sert qu'à l'urgence et aux erreurs. */
@font-face { font-family: "Young Serif"; src: url(fonts/young-serif-latin-400-normal.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; font-weight: 400; src: url(fonts/hanken-grotesk-latin-400-normal.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; font-weight: 500; src: url(fonts/hanken-grotesk-latin-500-normal.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; font-weight: 700; src: url(fonts/hanken-grotesk-latin-700-normal.woff2) format("woff2"); font-display: swap; }

:root {
  --salle: #e3eae6;
  --papier: #ffffff;
  --papier-2: #f3f6f4;
  --encre: #15302a;
  --encre-douce: #4b625c;
  --filet: #cbd7d2;
  --sauge: #3d6b68;
  --sauge-pale: #dbe8e4;
  --brique: #a3321a;
  --brique-pale: #f8e6e0;
  --serif: "Young Serif", Georgia, serif;
  --sans: "Hanken Grotesk", system-ui, sans-serif;
  --barre: 3.5rem;
}

* { box-sizing: border-box; }
[x-cloak] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--salle); color: var(--encre); font: 400 16px/1.5 var(--sans); }
h1, h2, h3, p, ul, dl, dd, figure { margin: 0; padding: 0; }
ul { list-style: none; }
strong { font-weight: 700; }
a { color: inherit; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--encre); outline-offset: 2px; }
.lecteur { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Boutons et champs */
button, input, textarea, select { font: inherit; color: inherit; }
button { background: var(--papier); border: 1px solid var(--encre); border-radius: 4px; padding: .4rem .85rem; cursor: pointer; line-height: 1.35; }
button:hover { background: var(--sauge-pale); }
button[aria-pressed="true"] { background: var(--encre); color: var(--papier); }
button.plein { background: var(--encre); color: var(--papier); font-weight: 500; }
button.plein:hover { background: #24493f; }
button.plein.grand { padding: .7rem 1.4rem; font-size: 1.05rem; }
button.fort { font-weight: 700; padding: .55rem 1.3rem; }
button.discret { background: none; border-color: transparent; color: var(--encre-douce); text-decoration: underline; text-underline-offset: 3px; padding-inline: .2rem; }
button.discret:hover { color: var(--encre); background: none; }
button:disabled { opacity: .45; cursor: not-allowed; }
button:disabled:hover { background: var(--papier); }
button.plein:disabled:hover { background: var(--encre); }
input, textarea, select { background: var(--papier); border: 1px solid var(--encre-douce); border-radius: 4px; padding: .5rem .65rem; }
input, textarea { width: 100%; }
textarea { line-height: 1.55; resize: vertical; }
.boutons { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }

.erreur { color: var(--brique); font-weight: 500; }
.ko { color: var(--brique); font-weight: 500; }
.discret-texte { color: var(--encre-douce); font-size: .92rem; }
.vide { color: var(--encre-douce); padding-block: .75rem; }

/* Connexion */
.connexion { max-width: 25rem; margin: 16vh auto 0; padding-inline: 1.25rem; }
.connexion-lieu { color: var(--encre-douce); font-weight: 500; }
.connexion h1 { font: 400 2.6rem/1.1 var(--serif); margin-top: .2rem; }
.connexion .sous { color: var(--encre-douce); margin: .5rem 0 2rem; }
.connexion label { display: block; font-weight: 500; margin: 1rem 0 .3rem; }
.connexion button { margin-top: 1.5rem; width: 100%; padding-block: .65rem; }
.connexion .erreur { margin-top: 1rem; }

/* Barre du haut */
.barre { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: .5rem 2rem; min-height: var(--barre); padding: .4rem clamp(1rem, 2.5vw, 2rem); background: var(--encre); color: #e6eeea; }
.barre :focus-visible { outline-color: #e6eeea; }
.maison { display: flex; flex-direction: column; text-decoration: none; line-height: 1.15; }
.maison-nom { font: 400 1.1rem/1.1 var(--serif); color: #fff; }
.maison-sous { font-size: .8rem; color: #a9bfb8; }
.barre nav { display: flex; flex-wrap: wrap; gap: .25rem; flex: 1; }
.barre nav a { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .75rem; border-radius: 4px; text-decoration: none; color: #c9d8d3; }
.barre nav a:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.barre nav a[aria-current] { color: var(--encre); background: var(--salle); font-weight: 700; }
.pastille { min-width: 1.4rem; padding: 0 .35rem; border-radius: 1rem; background: var(--brique); color: #fff; font-size: .8rem; font-weight: 700; text-align: center; line-height: 1.4rem; }
.moi { display: flex; align-items: center; gap: .9rem; font-size: .9rem; }
.etat-outil { color: #a9bfb8; }
.etat-outil::before { content: ""; display: inline-block; width: .55rem; height: .55rem; margin-right: .4rem; border-radius: 50%; background: #7fbfa8; vertical-align: .05rem; }
.etat-outil.alerte { color: #ffd2c6; font-weight: 500; }
.etat-outil.alerte::before { background: #ff8f73; }
.qui-suis-je { color: #fff; font-weight: 500; }
.barre button.discret { color: #a9bfb8; }
.barre button.discret:hover { color: #fff; }
.bandeau-erreur { padding: .6rem clamp(1rem, 2.5vw, 2rem); background: var(--brique-pale); }

/* Espace de travail */
.espace { padding: clamp(1.25rem, 3vw, 2.25rem) clamp(1rem, 2.5vw, 2rem) 4rem; }
.titre-vue { font: 400 clamp(1.7rem, 3vw, 2.3rem)/1.15 var(--serif); }
.sous-titre-vue { font-size: 1.15rem; font-weight: 700; margin: 2.25rem 0 .4rem; }
.chapeau { color: var(--encre-douce); max-width: 62ch; margin-top: .5rem; }

@media (min-width: 1100px) {
  .espace.vue-traiter { display: grid; grid-template-columns: minmax(21rem, 25rem) minmax(0, 1fr); gap: 0; padding: 0; height: calc(100vh - var(--barre)); }
  .vue-traiter .file { overflow-y: auto; padding: 1.5rem 1.25rem 3rem clamp(1rem, 2.5vw, 2rem); border-right: 1px solid var(--filet); }
  .vue-traiter .demande-ouverte, .vue-traiter .rien-ouvert { overflow-y: auto; background: var(--papier); }
  .vue-traiter .demande { padding: 2rem clamp(1.5rem, 3vw, 3rem) 4rem; }
}
.rien-ouvert { display: grid; place-items: center; color: var(--encre-douce); }

/* La liste à traiter */
.groupe + .groupe { margin-top: 1.75rem; }
.groupe-titre { font-size: 1.05rem; font-weight: 700; display: flex; align-items: baseline; gap: .5rem; }
.groupe-nombre { font-weight: 500; color: var(--encre-douce); }
.groupe-aide { color: var(--encre-douce); font-size: .88rem; margin-bottom: .6rem; }
.bons { display: grid; gap: .5rem; }

/* Le bon : un talon daté, détaché du corps par une perforation */
.bon { position: relative; display: grid; grid-template-columns: 3.6rem minmax(0, 1fr); background: var(--papier); border: 1px solid var(--filet); border-radius: 5px; text-decoration: none; }
.bon:hover { border-color: var(--encre-douce); }
.bon[aria-current="true"] { border-color: var(--encre); box-shadow: 0 0 0 1px var(--encre); }
.talon { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: .55rem 0; border-right: 2px dashed var(--filet); line-height: 1.05; text-align: center; }
.talon::before, .talon::after { content: ""; position: absolute; right: -.45rem; width: .8rem; height: .8rem; border-radius: 50%; background: var(--salle); border: 1px solid var(--filet); }
.talon::before { top: -.45rem; clip-path: inset(50% 0 0 0); }
.talon::after { bottom: -.45rem; clip-path: inset(0 0 50% 0); }
.talon-jour, .talon-mois { font-size: .78rem; color: var(--encre-douce); }
.talon-num { font: 400 1.6rem/1.1 var(--serif); }
.bon.urgent .talon { background: var(--brique-pale); color: var(--brique); border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
.bon.urgent .talon-jour, .bon.urgent .talon-mois { color: var(--brique); }
.bon-corps { display: grid; gap: .1rem; padding: .6rem .8rem .65rem .9rem; min-width: 0; }
.bon-haut { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; }
.bon-client { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bon-couverts { flex: none; font: 400 1.2rem/1 var(--serif); }
.bon-couverts-unite { font: 400 .75rem var(--sans); color: var(--encre-douce); margin-left: .2rem; }
.bon-quoi { font-size: .92rem; }
.bon-quand { font-size: .85rem; color: var(--encre-douce); }
.bon.urgent .bon-quand { color: var(--brique); font-weight: 500; }

.vide-file { background: var(--papier); border: 1px solid var(--filet); border-radius: 5px; padding: 1.4rem 1.3rem; display: grid; gap: .7rem; justify-items: start; }
.vide-file h2 { font: 400 1.5rem/1.2 var(--serif); }
.vide-file p { color: var(--encre-douce); max-width: 46ch; }
.note-blanc { margin-top: 1.25rem; font-size: .9rem; color: var(--encre-douce); }

/* Une demande ouverte */
.demande-ouverte { background: var(--papier); }
@media (max-width: 1099px) {
  .demande-ouverte { margin: calc(-1 * clamp(1.25rem, 3vw, 2.25rem)) calc(-1 * clamp(1rem, 2.5vw, 2rem)) -4rem; min-height: calc(100vh - var(--barre)); }
  .demande { padding: 1.25rem clamp(1rem, 4vw, 2.5rem) 4rem; }
}
.demande { max-width: 52rem; }
.retour { margin: 0 0 1rem -.2rem; }

.entete { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.25rem; align-items: center; }
.talon-grand { width: 5.2rem; padding: .8rem 0; border: 1px solid var(--filet); border-radius: 5px; }
.talon-grand::before, .talon-grand::after { display: none; }
.talon-grand .talon-num { font-size: 2.4rem; }
.talon-grand .talon-jour, .talon-grand .talon-mois { font-size: .9rem; }
.talon-grand.urgent { background: var(--brique-pale); border-color: #e7b8aa; }
.talon-grand.urgent span { color: var(--brique); }
.entete h1 { font: 400 clamp(1.6rem, 3vw, 2.1rem)/1.15 var(--serif); outline: none; }
.entete-sous { color: var(--encre-douce); margin-top: .15rem; }
.entete-etat { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; margin-top: .55rem; font-size: .9rem; color: var(--encre-douce); }
.marque-blanc { border: 1px dashed var(--encre-douce); border-radius: 4px; padding: 0 .45rem; }

.faits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 1.5rem; border-top: 1px solid var(--encre); border-bottom: 1px solid var(--filet); }
.faits > div { padding: .65rem .9rem .7rem 0; border-bottom: 1px solid var(--filet); }
.faits > div:nth-last-child(-n+3) { border-bottom: 0; }
.faits > div:not(:nth-child(3n+1)) { padding-left: .9rem; border-left: 1px solid var(--filet); }
.faits dt { font-size: .82rem; color: var(--encre-douce); }
.faits dd { font-weight: 700; }
.fait-sous { display: block; font-weight: 400; font-size: .88rem; color: var(--encre-douce); }
.regimes { margin-top: 1rem; padding: .7rem .9rem; background: var(--brique-pale); border-left: 3px solid var(--brique); border-radius: 0 4px 4px 0; }
.regimes-titre { font-weight: 700; color: var(--brique); font-size: .92rem; }
.contact { display: flex; flex-wrap: wrap; gap: .3rem 1.6rem; margin-top: .9rem; font-size: .92rem; overflow-wrap: anywhere; }
.contact-libelle { color: var(--encre-douce); margin-right: .25rem; }

.info { margin-top: 1.25rem; padding: .65rem .85rem; background: var(--sauge-pale); border-left: 3px solid var(--sauge); border-radius: 0 4px 4px 0; font-weight: 500; }
.en-cours { margin-top: .75rem; font-size: .95rem; }
.en-cours li { padding: .45rem .85rem; border-left: 3px solid var(--sauge); background: var(--papier-2); }

.bloc { margin-top: 2.25rem; }
.bloc h2 { font-size: 1.2rem; font-weight: 700; margin-bottom: .7rem; }
.bloc-tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .25rem 1rem; }
.bloc-tete h2 { margin-bottom: .7rem; }

.courrier { padding: .85rem 1rem .95rem; background: var(--papier-2); border-left: 3px solid var(--encre); border-radius: 0 4px 4px 0; }
.courrier + .courrier { margin-top: .6rem; }
.courrier.equipe { border-left-color: var(--sauge); background: #f7faf9; }
.courrier-tete { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .2rem 1rem; font-size: .92rem; }
.courrier-tete span { color: var(--encre-douce); }
.courrier-objet { font-size: .88rem; color: var(--encre-douce); margin-top: .1rem; }
.courrier-corps { white-space: pre-wrap; overflow-wrap: anywhere; margin-top: .6rem; max-width: 70ch; }
.pj { margin-top: .5rem; font-size: .9rem; color: var(--encre-douce); }

.decision { padding: 1.1rem 1.25rem 1.25rem; border: 2px solid var(--encre); border-radius: 6px; }
.raisons li { padding-left: 1.1rem; position: relative; font-weight: 500; }
.raisons li::before { content: ""; position: absolute; left: 0; top: .6em; width: .45rem; height: .45rem; background: var(--encre); border-radius: 50%; }
.seuils { margin-top: .6rem; font-size: .95rem; }
.decision > .boutons { margin-top: 1rem; }

.a-verifier li { position: relative; padding: .3rem 0 .3rem 1.75rem; }
.a-verifier li::before { content: ""; position: absolute; left: 0; top: .55rem; width: 1rem; height: 1rem; border: 2px solid var(--encre-douce); border-radius: 3px; }
.verifier p { margin-top: .5rem; }

.consigne { margin-top: 1rem; padding: .9rem 1rem; background: var(--papier-2); border: 1px solid var(--filet); border-radius: 5px; display: grid; gap: .5rem; }
.consigne label { font-weight: 500; }
.consigne-champ { display: grid; gap: .35rem; }

.editeur { display: grid; gap: .5rem; margin-top: .6rem; }
.champ-ligne { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); align-items: center; gap: .6rem; }
.champ-ligne label { color: var(--encre-douce); font-size: .92rem; }
.editeur #r-texte { margin-top: .3rem; font-size: 1rem; min-height: 18rem; max-height: 75vh; field-sizing: content; }
.editeur fieldset { border: 0; padding: 0; margin: .4rem 0 0; display: grid; gap: .3rem; }
.editeur legend { font-weight: 500; font-size: .92rem; margin-bottom: .2rem; }
.case { display: flex; gap: .55rem; align-items: baseline; }
.case input { width: auto; }
.envoi { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: .6rem; }
.confirmation { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: .5rem .75rem; border: 2px solid var(--encre); border-radius: 5px; }
.alerte { color: var(--brique); font-weight: 500; margin-top: .4rem; }
.sans-reponse { display: grid; gap: .6rem; justify-items: start; padding: 1rem; background: var(--papier-2); border-radius: 5px; }
.autres { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--filet); }
.autres-titre { font-weight: 700; margin-bottom: .5rem; }

.plus { margin-top: 2.25rem; border-top: 1px solid var(--filet); padding-top: .8rem; }
.plus summary { cursor: pointer; font-weight: 500; color: var(--encre-douce); }
.plus summary:hover { color: var(--encre); }
.plus-corps { display: grid; gap: .9rem; margin-top: .9rem; font-size: .95rem; }
.plus-corps ul li { padding-block: .12rem; }
.lien-gmail { margin-left: 1rem; }
.preuves li { padding-block: .3rem !important; }
q { quotes: '"' '"'; }
.suivante { display: inline-block; margin-top: 2rem; padding: .55rem 1rem; border: 1px solid var(--encre); border-radius: 4px; text-decoration: none; font-weight: 500; }
.suivante:hover { background: var(--sauge-pale); }

/* Statuts : la forme d'abord, la couleur ensuite */
.statut { display: inline-block; white-space: nowrap; font-size: .82rem; font-weight: 500; padding: .05rem .5rem; border: 1px solid var(--encre-douce); border-radius: 4px; color: var(--encre); background: var(--papier); }
.statut.a_valider { background: var(--encre); border-color: var(--encre); color: var(--papier); }
.statut.brouillon_pret { background: var(--sauge-pale); border-color: var(--sauge); }
.statut.a_traiter_main { border-style: dashed; border-color: var(--encre); }
.statut.en_attente_client { border-style: dotted; color: var(--encre-douce); }
.statut.confirme { background: var(--sauge); border-color: var(--sauge); color: var(--papier); }
.statut.hors_sujet, .statut.annule, .statut.classe, .statut.realise { color: var(--encre-douce); border-color: var(--filet); }
.statut.erreur { background: var(--brique); border-color: var(--brique); color: var(--papier); }

/* Agenda */
.agenda, .registre, .suivi, .acces, .compte { max-width: 70rem; }
.jour-agenda { margin-top: 2rem; }
.jour-agenda h2 { font: 400 1.4rem/1.2 var(--serif); padding-bottom: .4rem; border-bottom: 1px solid var(--encre); }
.service-agenda { margin-top: .8rem; }
.service-agenda h3 { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: 1rem; font-weight: 700; }
.service-agenda .total { font-weight: 400; color: var(--encre-douce); font-size: .92rem; }
.service-agenda ul { margin-top: .35rem; background: var(--papier); border: 1px solid var(--filet); border-radius: 5px; }
.service-agenda li + li { border-top: 1px solid var(--filet); }
.ligne-agenda { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) auto auto; align-items: center; gap: 1rem; padding: .55rem .9rem; text-decoration: none; }
.ligne-agenda:hover { background: var(--sauge-pale); }
.ligne-couverts { font: 400 1.25rem/1 var(--serif); text-align: right; }
.ligne-client { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ligne-format { color: var(--encre-douce); font-size: .9rem; }

/* Tableaux */
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; background: var(--papier); }
th { text-align: left; font-weight: 500; color: var(--encre-douce); padding: .6rem .9rem .45rem; border-bottom: 1px solid var(--encre); vertical-align: bottom; font-size: .9rem; background: var(--papier-2); }
td { padding: .6rem .9rem; border-bottom: 1px solid var(--filet); vertical-align: top; }
.n { text-align: right; }
.defile { overflow-x: auto; margin-top: 1rem; border: 1px solid var(--filet); border-radius: 5px; }
.tableau-dossiers { min-width: 48rem; }
.tableau-dossiers tbody tr { cursor: pointer; }
.tableau-dossiers tbody tr:hover td { background: var(--sauge-pale); }
.tableau-dossiers td a { font-weight: 500; text-decoration: none; }
.tableau-dossiers td a:hover { text-decoration: underline; }
.tableau-journal { min-width: 42rem; }
.tableau-essais { min-width: 56rem; }
.tableau-comptes { min-width: 40rem; }
.tableau-comptes .actions span { display: inline-flex; flex-wrap: wrap; gap: .4rem; }

/* Tous les dossiers */
.filtres { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; justify-content: space-between; align-items: center; margin-top: 1.25rem; }
.filtres [role="group"] { display: flex; flex-wrap: wrap; gap: .4rem; }
.filtre { border-color: var(--filet); }
.compte { font-variant-numeric: tabular-nums; opacity: .75; margin-left: .15rem; }
.recherche { width: min(100%, 18rem); }

/* Suivi */
.cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.25rem; }
.case-suivi { background: var(--papier); border: 1px solid var(--filet); border-radius: 5px; padding: 1rem 1.1rem; display: grid; gap: .4rem; align-content: start; }
.case-suivi h2 { font-size: .92rem; font-weight: 500; color: var(--encre-douce); }
.valeur { font: 400 1.6rem/1.2 var(--serif); }

/* Accès et compte */
.formulaire { display: grid; grid-template-columns: minmax(0, 1fr); gap: .3rem; max-width: 26rem; margin-top: .9rem; }
.formulaire label { margin-top: .4rem; font-weight: 500; }
.formulaire button { margin-top: .9rem; justify-self: start; }
.provisoire { margin-top: 1.2rem; padding: 1rem 1.1rem; border: 2px solid var(--encre); border-radius: 5px; background: var(--papier); max-width: 40rem; display: grid; gap: .5rem; justify-items: start; }
.provisoire code { font-size: 1.15rem; letter-spacing: .04em; user-select: all; }
.compte > p { margin-top: .5rem; }

@media (max-width: 900px) {
  .barre { flex-wrap: wrap; }
  .barre nav { order: 3; flex-basis: 100%; }
  .moi { margin-left: auto; }
  .cases { grid-template-columns: minmax(0, 1fr); }
  .faits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faits > div { padding-left: 0 !important; border-left: 0 !important; border-bottom: 1px solid var(--filet) !important; }
  .faits > div:nth-child(even) { padding-left: .9rem !important; border-left: 1px solid var(--filet) !important; }
  .faits > div:nth-last-child(-n+2) { border-bottom: 0 !important; }
}
@media (max-width: 560px) {
  .etat-outil { display: none; }
  .barre nav a { padding: .4rem .55rem; }
  .entete { gap: .9rem; }
  .talon-grand { width: 4.2rem; }
  .talon-grand .talon-num { font-size: 1.9rem; }
  .ligne-agenda { grid-template-columns: 2.6rem minmax(0, 1fr) auto; }
  .ligne-format { display: none; }
  .champ-ligne { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }