/* Vue du gérant (démonstration). Téléphone d'abord : demandes, planning, messages, réglage, l'un sous l'autre.
   Dès 1 024 px : demandes à gauche (7 colonnes), planning, messages et réglage à droite (5 colonnes).
   Valeurs : tokens.css (= DESIGN.md). */

.demo { margin: 0; max-width: none; background: var(--chenal); color: var(--blanc); font: 500 var(--t-petit)/1.4 var(--sans); }
.demo__in { display: block; padding-block: 10px; }

.bureau { padding-bottom: var(--s8); }
.bureau__tete { display: grid; gap: var(--s4); padding-block: var(--s6) var(--s7); }
.bureau h1 { font-size: var(--t-h2); line-height: 1.1; font-variation-settings: "opsz" 60; }
.bureau h2 { font-size: var(--t-h3); line-height: 1.2; font-weight: 500; font-variation-settings: normal; }
.bureau__grille { display: grid; gap: var(--s8); }
.bureau__col { display: grid; gap: var(--s8); align-content: start; min-width: 0; }
.bureau__bloc { display: grid; gap: var(--s4); align-content: start; min-width: 0; }
.compte { color: var(--ardoise); }
.aide { font-size: var(--t-petit); line-height: 1.45; color: var(--ardoise); }

@media (min-width: 1024px) {
  .bureau { padding-bottom: var(--s9); }
  .bureau__grille { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--s8); align-items: start; }
}

/* Demandes */
.demandes { display: grid; gap: var(--s4); }
.demande { display: grid; gap: var(--s2); padding: var(--s5) var(--s4); border: 1px solid var(--filet); background: var(--blanc); }
@media (min-width: 560px) { .demande { padding: var(--s5); } }
.demande__tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s2) var(--s4); }
.demande__date { font: 500 22px/1.2 var(--serif); }
.origine { display: inline-block; padding: 2px 8px; border: 1px solid var(--filet); border-radius: var(--r-bouton); background: var(--voile); font: 500 var(--t-mention)/1.4 var(--sans); color: var(--chenal); }
.origine--whatsapp { border-color: var(--succes); color: var(--succes); background: var(--blanc); }
.origine--intermediaire { border-color: var(--chenal); background: var(--blanc); }
.demande__quoi strong { font-weight: 600; }
.demande__prix { font-weight: 500; }
.demande__qui, .demande__inter { font-size: var(--t-petit); line-height: 1.45; overflow-wrap: anywhere; }
.demande__message { padding-left: var(--s3); border-left: 2px solid var(--filet); font-size: var(--t-petit); color: var(--ardoise); }
.demande__places { font-size: var(--t-petit); color: var(--ardoise); }
.demande__places--alerte { color: var(--erreur); font-weight: 500; }
.demande__recue { font-size: var(--t-mention); color: var(--ardoise); }
.demande__recue .badge { margin-left: 4px; }
.demande__actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); }
.demande__actions .bouton { min-height: 48px; padding: 12px 18px; }
.demande--traitee { border-color: var(--succes); }
.demande__suite { display: grid; gap: var(--s2); margin-top: var(--s2); }
.demande__suite:focus { outline: none; }
.statut { display: flex; gap: var(--s2); align-items: flex-start; font-weight: 600; color: var(--succes); }
.statut svg { flex: none; width: 20px; height: 20px; margin-top: 3px; }
.autre { display: grid; gap: var(--s2); padding: var(--s4); background: var(--voile); }
.autre__jours { display: flex; flex-wrap: wrap; gap: var(--s2); }
.autre__jour { min-height: 44px; padding: 8px 14px; background: var(--blanc); }
.champ-devis { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin-top: var(--s2); font-weight: 500; }
.champ-devis__in { display: inline-flex; align-items: center; gap: 6px; }
.champ-devis input { width: 120px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--ardoise); border-radius: var(--r-bouton); font: 400 var(--t-ui)/1.3 var(--sans); color: var(--chenal); font-variant-numeric: tabular-nums; }

/* Bulles : le message tel que le client le reçoit */
.bulle { margin: 0; display: grid; gap: 4px; max-width: 34em; }
.bulle__texte { margin: 0; padding: var(--s3) 14px; background: var(--voile); border-radius: var(--r-bouton); border-left: 2px solid var(--magenta); font-size: var(--t-ui); line-height: 1.5; overflow-wrap: anywhere; }
.bulle__meta { font-size: var(--t-mention); color: var(--ardoise); }

/* Planning */
.planning { list-style: none; margin: 0; padding: 0; display: grid; }
.jour-plan { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: var(--s3); row-gap: 2px; padding-block: var(--s3) var(--s2); border-bottom: 1px solid var(--filet); }
.jour-plan__ligne, .meteo { grid-column: 1 / -1; }
.jour-plan:first-child { border-top: 1px solid var(--filet); }
.jour-plan__ligne { display: grid; grid-template-columns: minmax(104px, auto) 64px 1fr; align-items: center; gap: var(--s3); }
.jour-plan__date { font-weight: 500; }
.jour-plan__nb { font-weight: 500; text-align: right; white-space: nowrap; }
.jauge { display: block; height: 8px; background: var(--voile); box-shadow: inset 0 0 0 1px var(--filet); }
.jauge span { display: block; height: 100%; background: var(--magenta); }
.jour-plan__etat { font-size: var(--t-petit); color: var(--ardoise); }
.jour-plan__etat:focus { outline: none; }
.jour-plan__meteo { justify-self: end; }
.jour-plan--annule .jour-plan__etat { grid-column: 1 / -1;  color: var(--erreur); font-weight: 500; }
.jour-plan--annule .jauge span { background: var(--filet); }
.meteo { display: grid; gap: var(--s3); padding: var(--s4); margin-top: var(--s2); background: var(--blanc); border: 1px solid var(--filet); }
.meteo__actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.lien { min-height: 44px; padding: 0 2px; background: none; border: 0; color: var(--magenta-fonce); font: 500 var(--t-petit)/1.3 var(--sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.lien:hover { text-decoration-thickness: 2px; }

/* Messages */
.messages { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s5); }
.message { display: grid; gap: var(--s2); }
.message__titre { font: 600 var(--t-ui)/1.3 var(--sans); }
.message__quand { font-size: var(--t-petit); color: var(--ardoise); }

.reglage__etat { font-size: var(--t-petit); font-weight: 600; }

/* En-tête de l'outil (pas le menu public) et pied minimal */
.entete--gerant .entete__in { gap: var(--s3); }
.entete__espace { margin: 0; font: 500 var(--t-petit)/1.2 var(--sans); color: var(--ardoise); padding-left: var(--s3); border-left: 1px solid var(--filet); }
.entete--gerant .langue { margin-left: auto; }
.entete__site { min-height: 44px; padding: 8px 14px; font-size: var(--t-petit); }
@media (max-width: 479px) { .entete--gerant .logo img { width: 104px; } .entete__espace { display: none; } }
.pied--gerant { padding-block: var(--s6); }
.pied--gerant .pied__note { margin-top: 0; padding-top: 0; border-top: 0; }
@media (max-height: 500px) { .entete { position: static; } }

/* Résumé en tête */
.bureau__resume { font-weight: 500; padding: var(--s3) var(--s4); background: var(--voile); border-left: 2px solid var(--magenta); max-width: none; }

/* Les listes sont remplies par le script : la place est réservée pour que la page ne saute pas à l'ouverture */
[data-a-traiter] { min-height: 600px; }
[data-recues] { min-height: 760px; }
[data-planning] { min-height: 620px; }
[data-messages] { min-height: 560px; }
@media (min-width: 1024px) { [data-a-traiter] { min-height: 560px; } [data-recues] { min-height: 640px; } [data-messages] { min-height: 480px; } }

.origine--devis { border-color: var(--magenta-fonce); color: var(--magenta-fonce); background: var(--blanc); }
.statut--attente { color: var(--chenal); }
.demande__liens { display: flex; flex-wrap: wrap; gap: var(--s4); }
.lien-contact { display: inline-flex; align-items: center; min-height: 44px; font: 500 var(--t-petit)/1.3 var(--sans); }
.demande__actions .bouton { flex: 1 1 auto; }

/* Alerte de jauge : la surréservation demande un second geste, en bouton secondaire */
.alerte { display: grid; gap: var(--s3); padding: var(--s4); background: var(--voile); border-left: 2px solid var(--erreur); }
.alerte__texte { font-weight: 600; color: var(--erreur); }
.alerte__boutons { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* Ajouter une réservation */
.ajout__form { display: grid; gap: var(--s4); padding: var(--s5) var(--s4); border: 1px solid var(--filet); }
.ajout__ligne { display: grid; grid-template-columns: minmax(0, 1fr) 112px; gap: var(--s3); }
.ajout__ligne:last-of-type { grid-template-columns: 1fr 1fr; }
.ajout__form > .bouton { justify-self: start; }
.champ { display: grid; gap: 6px; min-width: 0; }
.champ > label { font: 500 var(--t-ui)/1.3 var(--sans); }
.champ input, .champ select, .reglage__ligne select {
  width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid var(--ardoise); border-radius: var(--r-bouton);
  background: var(--blanc); color: var(--chenal); font: 400 var(--t-ui)/1.3 var(--sans);
}
[aria-invalid="true"] { border-color: var(--erreur) !important; box-shadow: inset 0 0 0 1px var(--erreur); }
.champ__erreur { font: 500 var(--t-petit)/1.45 var(--sans); color: var(--erreur); }

/* Réglages */
.reglage__ligne { display: flex; gap: var(--s2); }
.reglage__ligne select { flex: 1; min-width: 0; }
.reglage__ligne .bouton { min-height: 48px; padding: 10px 16px; }
.reglage__infos { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s3); font-size: var(--t-petit); line-height: 1.45; }
.reglage__infos li { padding-left: var(--s4); position: relative; }
.reglage__infos li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: var(--r-rond); background: var(--magenta); }

/* Planning : jauge dépassée */
.jour-plan--depasse .jour-plan__etat, .jour-plan--depasse .jour-plan__nb { color: var(--erreur); font-weight: 600; }
.jour-plan--depasse .jauge span { background: var(--erreur); }