/* Les Buissonnets — codes des boîtes à clefs.
   Conçu pour le téléphone d'abord : c'est là qu'on le consulte, souvent debout,
   parfois d'une main. L'écran d'ordinateur élargit simplement la même mise en page. */

:root {
  --fond:        #f2f5f7;
  --carte:       #ffffff;
  --carte-creux: #e8eef1;
  --encre:       #12212b;
  --encre-douce: #4a5c68;
  --encre-pale:  #7c8c97;
  --filet:       #d2dce2;
  --accent:      #0e6b7a;
  --vert:        #1e7a4c;
  --vert-fond:   #e4f3ea;
  --orange:      #b36414;
  --orange-fond: #faeddd;
  --rouge:       #b3261e;
  --rouge-fond:  #fbe6e4;
  --rayon: 4px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond: #0d181e; --carte: #14242d; --carte-creux: #1b303a;
    --encre: #e7eff3; --encre-douce: #a9bcc6; --encre-pale: #7a8f9b;
    --filet: #26404c; --accent: #5fc5d3;
    --vert: #5fcb92; --vert-fond: #123326;
    --orange: #e8a55c; --orange-fond: #33240f;
    --rouge: #f08c84; --rouge-fond: #3a1b19;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font: 16px/1.5 -apple-system, "Segoe UI", Roboto, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  padding-bottom: env(safe-area-inset-bottom);
}

main { max-width: 46rem; margin: 0 auto; padding: 16px 14px 60px; }

/* ------------------------------------------------------------- bandeau */
.bandeau {
  background: var(--encre);
  color: #fff;
  padding: calc(12px + env(safe-area-inset-top)) 14px 0;
  position: sticky; top: 0; z-index: 10;
}
.bandeau-titre { max-width: 46rem; margin: 0 auto; }
.marque {
  display: block; font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; opacity: .6;
}
.bandeau h1 { margin: 2px 0 10px; font-size: 21px; font-weight: 600; }

.onglets {
  max-width: 46rem; margin: 0 auto; display: flex; gap: 4px;
}
.onglets a {
  color: rgba(255,255,255,.72); text-decoration: none;
  padding: 9px 14px; font-size: 14.5px; font-weight: 500;
  border-bottom: 2px solid transparent;
}
.onglets a.actif { color: #fff; border-bottom-color: var(--accent); }
.onglets a.discret { margin-left: auto; opacity: .55; font-weight: 400; }
.onglets a:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }

/* --------------------------------------------------------- messages */
.alerte {
  padding: 11px 14px; border-radius: var(--rayon); margin: 0 0 14px;
  font-size: 15px; border-left: 3px solid;
}
.alerte-vert   { background: var(--vert-fond);   border-color: var(--vert);   color: var(--encre); }
.alerte-orange { background: var(--orange-fond); border-color: var(--orange); color: var(--encre); }
.alerte-rouge  { background: var(--rouge-fond);  border-color: var(--rouge);  color: var(--encre); }

.vide { color: var(--encre-pale); font-style: italic; padding: 18px 0; }
.note { color: var(--encre-pale); font-size: 13.5px; }

/* --------------------------------------------------------- outils */
.barre-outils {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 20px; flex-wrap: wrap;
}
.en-ligne { display: inline; margin: 0; }
.espace-haut { margin-top: 14px; display: block; }

.bouton {
  font: inherit; font-size: 14.5px; font-weight: 500;
  padding: 9px 16px; border-radius: var(--rayon);
  border: 1px solid var(--filet); background: var(--carte); color: var(--encre);
  cursor: pointer; min-height: 40px;
}
.bouton:hover { background: var(--carte-creux); }
.bouton:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bouton[disabled] { opacity: .55; cursor: progress; }
.bouton-principal { background: var(--accent); border-color: var(--accent); color: #fff; }
.bouton-principal:hover { filter: brightness(1.08); background: var(--accent); }
.bouton-discret { padding: 6px 12px; min-height: 34px; font-size: 13.5px; color: var(--encre-douce); }

/* Un lien qui se comporte comme un bouton : la feuille de style du navigateur
   (a:-webkit-any-link) bat une simple classe, il faut donc réaffirmer la couleur
   et retirer le soulignement explicitement. */
a.bouton { display: inline-flex; align-items: center; text-decoration: none; color: var(--encre-douce); }
a.bouton-principal { color: #fff; }
.bouton-appel { color: var(--accent); border-color: var(--accent); font-weight: 600; }
.bouton-appel:hover { background: var(--carte-creux); }

/* Les gestes de la fiche : appeler, rafraîchir. */
.gestes { display: flex; gap: 6px; flex: none; }

/* ---------------------------------------------------------- journée */
.jour { margin-bottom: 24px; }
.jour h2 {
  font-size: 14px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--encre-douce);
  margin: 0 0 8px; display: flex; justify-content: space-between; align-items: baseline;
}
.echeance { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--encre-pale); }

/* ------------------------------------------------------ réservation */
.resa {
  background: var(--carte); border: 1px solid var(--filet);
  border-left: 3px solid var(--filet);
  border-radius: var(--rayon); padding: 12px 14px; margin-bottom: 8px;
}
.resa.ton-vert   { border-left-color: var(--vert); }
.resa.ton-orange { border-left-color: var(--orange); }
.resa.ton-rouge  { border-left-color: var(--rouge); }
.resa.ton-neutre { border-left-color: var(--filet); }

.resa-tete { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.chambre {
  font-weight: 600; font-size: 14px; background: var(--carte-creux);
  padding: 2px 8px; border-radius: 3px; white-space: nowrap;
}
.client { font-weight: 600; font-size: 16.5px; flex: 1; min-width: 0; }
.nuits { color: var(--encre-pale); font-size: 13.5px; white-space: nowrap; }

.resa-etat { margin-top: 7px; font-size: 14.5px; color: var(--encre-douce); }
.pastille {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 7px; vertical-align: 1px;
}
.pastille-vert { background: var(--vert); }
.pastille-orange { background: var(--orange); }
.pastille-rouge { background: var(--rouge); }
.pastille-neutre { background: var(--encre-pale); opacity: .5; }

.avertissement {
  margin: 8px 0 0; padding: 8px 11px; font-size: 13.5px;
  background: var(--orange-fond); border-left: 2px solid var(--orange);
  border-radius: 0 3px 3px 0; color: var(--encre);
}

.resa-pied {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--filet);
}
.adresse {
  font-size: 13px; color: var(--encre-pale);
  display: flex; align-items: center; gap: 5px; min-width: 0; flex: 1;
}
/* L'adresse se raccourcit ; l'étiquette, jamais — c'est elle qui porte l'information. */
.courriel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.etiquette { flex: none; }
.etiquette {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
  background: var(--carte-creux); color: var(--encre-douce);
  padding: 1px 6px; border-radius: 3px; margin-left: 5px; white-space: nowrap;
}
.etiquette-alerte { background: var(--orange-fond); color: var(--orange); }

/* ------------------------------------------------------------ cartes */
.carte {
  background: var(--carte); border: 1px solid var(--filet);
  border-radius: var(--rayon); padding: 16px; margin-bottom: 16px;
}
.carte h2 { margin: 0 0 10px; font-size: 17px; font-weight: 600; }

.grille { width: 100%; border-collapse: collapse; font-size: 14px; table-layout: auto; }
/* Un tableau plus large que l'écran défile dans son propre cadre :
   le corps de la page, lui, ne part jamais de travers. */
.defilable { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.grille thead th {
  text-align: left; font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--encre-pale); font-weight: 600; padding: 0 10px 6px 0;
  border-bottom: 1px solid var(--filet); white-space: nowrap;
}
.grille td { padding: 7px 10px 7px 0; border-bottom: 1px solid var(--filet); vertical-align: top; }
.grille tr:last-child td { border-bottom: none; }
.grille .nombre { font-variant-numeric: tabular-nums; }
.grille .tronque { max-width: 15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grille .resultat { min-width: 11rem; }
.ligne-rouge td { background: var(--rouge-fond); }
.ligne-orange td { background: var(--orange-fond); }

/* ------------------------------------------------------- connexion */
.carte-connexion { max-width: 22rem; margin: 40px auto; }
.formulaire { display: flex; flex-direction: column; gap: 14px; }
.formulaire label { display: flex; flex-direction: column; gap: 5px; font-size: 14px; font-weight: 500; }
.formulaire input {
  font: inherit; padding: 10px 12px; min-height: 42px;
  border: 1px solid var(--filet); border-radius: var(--rayon);
  background: var(--fond); color: var(--encre);
}
.formulaire input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.carte-connexion .note { margin-top: 16px; display: block; }

/* ------------------------------------------------- écrans étroits */
@media (max-width: 640px) {
  /* La durée d'une tâche n'intéresse personne sur un téléphone :
     on garde ce qu'elle a fait, et quand. */
  .grille .secondaire { display: none; }
  .grille { font-size: 13.5px; }
  .grille .tronque { max-width: 9rem; }
}

/* ------------------------------------------------- feuille de contact
   Elle monte du bas, comme les feuilles d'iOS : le pouce y arrive sans
   que la main ne change de prise. */
.feuille {
  border: none; padding: 0; margin: 0 auto auto;
  position: fixed; inset: auto 0 0 0;
  width: 100%; max-width: 26rem;
  background: var(--carte); color: var(--encre);
  border-radius: 14px 14px 0 0;
  box-shadow: 0 -6px 32px rgba(0,0,0,.28);
  padding-bottom: env(safe-area-inset-bottom);
}
.feuille::backdrop { background: rgba(0,0,0,.45); }

.feuille-tete {
  padding: 18px 20px 12px; text-align: center;
  border-bottom: 1px solid var(--filet);
}
.feuille-tete strong { display: block; font-size: 16.5px; }
.feuille-tete .note { font-variant-numeric: tabular-nums; }

.feuille-choix {
  display: block; width: 100%;
  padding: 16px 20px; min-height: 56px;
  font: inherit; font-size: 16.5px; text-align: center;
  color: var(--accent); background: none; border: none;
  border-bottom: 1px solid var(--filet);
  text-decoration: none; cursor: pointer;
}
.feuille-choix:hover { background: var(--carte-creux); }
.feuille-choix:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.feuille-choix[hidden] { display: none; }
.feuille-annuler {
  color: var(--encre-douce); font-weight: 600; border-bottom: none;
}

@media (min-width: 480px) {
  /* Sur grand écran, une feuille collée en bas n'a pas de sens : on centre. */
  .feuille { inset: 0; margin: auto; border-radius: 10px; height: max-content; }
}