/* ==========================================================================
   Hôtel du Parc — système de design
   --------------------------------------------------------------------------
   Jetons et composants communs au site public et au back-office.
   Bootstrap 5 fournit la grille et les utilitaires ; tout l'habillage vient
   d'ici, les maquettes ne ressemblant pas à du Bootstrap par défaut.
   ========================================================================== */

:root {
  /* --- Couleurs de marque ---------------------------------------------
     Deux sources, et deux seulement. Le vert profond vient du site actuel
     de l'établissement, que le client tenait à conserver. Les oranges, l'or
     et le crème sont relevés au compte-gouttes dans son logo : les deux
     tons du soleil, le cœur jaune, le crème du disque. Aucune n'est
     inventée. */
  --vert-profond: #0F3D2E;  /* en-tête, pied de page, barre latérale, boutons */
  --vert-nuit: #0B2E23;     /* fin de dégradé, survols */
  --vert-moyen: #1B5E43;    /* liens et icônes sur fond clair */
  --vert-clair: #2E7D5B;

  --soleil: #C9551C;        /* bouton d'appel — le blanc reste lisible dessus */
  --soleil-fonce: #A8430F;  /* survol du bouton d'appel */
  --soleil-vif: #E8702F;    /* filets, soulignés, décor */
  --or: #F8B420;            /* cœur du soleil : accents sur fond sombre */

  /* Le bleu de l'action de réservation. Hors palette de marque, et c'est
     voulu : le bouton qui déclenche la vente doit se distinguer de tout le
     reste, y compris de l'orange qui porte déjà les autres actions. */
  --bleu: #1668C4;
  --bleu-fonce: #11529B;

  --sable: #F3EADA;         /* pastilles d'icônes, lignes de tableau */
  --sable-2: #E7DAC4;

  --creme: #FDF8EE;
  --creme-fonce: #F7F0E2;
  --blanc: #FFFFFF;

  /* --- Texte ---------------------------------------------------------- */
  --texte: #14251D;
  --texte-doux: #55645C;
  --texte-faible: #8A968F;
  --texte-inverse: #F4F7F5;

  /* --- États -----------------------------------------------------------
     Les teintes d'état restent conventionnelles : vert, ambre, rouge, bleu.
     Seuls leurs fonds sont légèrement saturés, sans quoi ils se
     confondraient avec le crème de la page. L'ambre de « en attente » est
     tiré vers le jaune pour ne pas se confondre avec l'orange de marque. */
  --succes: #16A34A;
  --succes-fond: #DFF3E6;
  --attente: #A16207;
  --attente-fond: #FAEFD0;
  --erreur: #DC2626;
  --erreur-fond: #FBE4E2;
  --neutre: #6B7280;
  --neutre-fond: #EFEDE8;
  --info: #2563EB;
  --info-fond: #E4EDFC;

  /* --- Bordures et surfaces ------------------------------------------- */
  --bordure: #E5E3D8;
  --bordure-douce: #F0EEE5;
  --surface: #FFFFFF;
  --fond: #FBF7EE;

  /* --- Rayons ---------------------------------------------------------- */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pilule: 999px;

  /* --- Ombres ---------------------------------------------------------- */
  --ombre-xs: 0 1px 2px rgba(15, 61, 46, .05);
  --ombre-sm: 0 1px 3px rgba(15, 61, 46, .07), 0 1px 2px rgba(15, 61, 46, .04);
  --ombre-md: 0 4px 16px rgba(15, 61, 46, .08);
  --ombre-lg: 0 12px 32px rgba(15, 61, 46, .11);

  /* --- Typographie ------------------------------------------------------ */
  --police-titre: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --police-texte: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* --- Rythme ----------------------------------------------------------- */
  --gouttiere: 24px;
  --transition: 160ms cubic-bezier(.4, 0, .2, 1);

  /* --- Hauteur des blocs de données --------------------------------------
     Exprimée en hauteur d'écran : un grand moniteur montre davantage de
     lignes, un portable en montre moins, et dans les deux cas la page garde
     la même longueur. */
  --hauteur-bloc: 62vh;
  --hauteur-bloc-court: 42vh;
}

/* ==========================================================================
   Base
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

/* ==========================================================================
   Débordement horizontal
   --------------------------------------------------------------------------
   Le piège le plus courant de la mise en page en grille, et le plus difficile
   à relier à sa cause.

   Un enfant de grille — ou de flex — refuse par défaut de descendre sous la
   largeur minimale de son contenu. Un tableau de huit colonnes, un mot long,
   un graphique : la piste ne rétrécit pas, la grille dépasse son conteneur,
   et c'est la page entière qui se met à défiler latéralement. Les cartes de
   gauche sortent de l'écran, et rien dans la règle fautive ne le laissait
   prévoir.

   `min-width: 0` lève ce plancher. Le contenu réellement trop large est alors
   traité là où il doit l'être : dans le conteneur défilant qui l'entoure,
   `.tableau-cadre` pour un tableau. La page, elle, ne bouge plus.
   ========================================================================== */

[class*="grille-"] > *,
.galerie > *,
.resultat-categorie > *,
.pied-grille > * { min-width: 0; }

body {
  margin: 0;
  font-family: var(--police-texte);
  font-size: 14px;
  line-height: 1.6;
  color: var(--texte);
  background: var(--fond);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--police-titre);
  font-weight: 600;
  line-height: 1.2;
  color: var(--texte);
  margin: 0 0 .5em;
}

h1 { font-size: 2.4rem; }
h2 { font-size: 1.9rem; }
h3 { font-size: 1.4rem; }
h4 { font-size: 1.15rem; }

a { color: var(--soleil); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--vert-profond); }

/* Libellé de section en capitales, récurrent dans les maquettes. */
.sur-titre {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  /* L'orange vif du logo ne tient pas le contraste en petites capitales sur
     fond crème : on prend le soutenu. Sur fond sombre, la règle du
     back-office le remplace par l'or. */
  color: var(--soleil);
  margin-bottom: .5rem;
}

.texte-doux { color: var(--texte-doux); }
.texte-faible { color: var(--texte-faible); font-size: .85rem; }

/* ==========================================================================
   Cartes
   ========================================================================== */

.carte {
  background: var(--surface);
  border: 1px solid var(--bordure-douce);
  border-radius: var(--r-md);
  box-shadow: var(--ombre-sm);
  /* Une carte est presque toujours l'enfant d'une grille ou d'un flex. Sans
     cette ligne, elle refuse de descendre sous la largeur minimale de son
     contenu : un tableau un peu large, et c'est la page entière qui déborde
     vers la droite. Voir la section « Débordement horizontal » plus bas. */
  min-width: 0;
}

.carte-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.4rem;
  border-bottom: 1px solid var(--bordure-douce);
}

.carte-titre {
  display: flex;
  align-items: center;
  gap: .65rem;
  font-family: var(--police-titre);
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0;
}

.carte-titre .bi {
  color: var(--soleil);
  font-size: 1.05rem;
}

.carte-corps { padding: 1.4rem; }
.carte-pied {
  padding: .9rem 1.4rem;
  border-top: 1px solid var(--bordure-douce);
  background: var(--creme);
  border-radius: 0 0 var(--r-md) var(--r-md);
}

/* ==========================================================================
   Boutons
   ========================================================================== */

.btn {
  --bs-btn-border-radius: var(--r-sm);
  font-weight: 500;
  font-size: .875rem;
  padding: .55rem 1.1rem;
  border-radius: var(--r-sm);
  transition: all var(--transition);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border: 1px solid transparent;
  cursor: pointer;
  line-height: 1.4;
}

/* L'action principale, partout : orange. C'est la couleur qui doit porter
   le regard, sur le site comme dans l'espace de gestion. */
.btn-primaire {
  background: var(--soleil);
  color: #fff;
}
.btn-primaire:hover {
  background: var(--soleil-fonce);
  color: #fff;
  box-shadow: var(--ombre-md);
}

/* Le bouton d'appel du site : l'orange du soleil, avec du blanc dessus.
   C'est pour lui que `--soleil` est plus soutenu que l'orange du logo —
   à #E8702F, le blanc tombait sous le seuil de lisibilité. */
.btn-soleil {
  background: var(--soleil);
  color: #fff;
}
.btn-soleil:hover { background: var(--soleil-fonce); color: #fff; }

/* Réserver : l'action qui conclut. */
.btn-reserver {
  background: var(--bleu);
  color: #fff;
}
.btn-reserver:hover { background: var(--bleu-fonce); color: #fff; }

.btn-contour {
  background: transparent;
  border-color: var(--bordure);
  color: var(--texte);
}
.btn-contour:hover {
  border-color: var(--soleil);
  color: var(--vert-profond);
  background: var(--sable);
}

.btn-danger-doux {
  background: var(--erreur-fond);
  color: var(--erreur);
}
.btn-danger-doux:hover { background: var(--erreur); color: #fff; }

/* Une action destructrice qui n'est pas le geste courant. « Annuler »
   une réservation en garde toute la trace ; la supprimer n'en laisse
   rien. Les deux ne doivent donc pas se ressembler : celle-ci reste un
   bouton de contour, et ne rougit qu'au survol. */
.btn-contour.danger { color: var(--erreur); }
.btn-contour.danger:hover {
  border-color: var(--erreur);
  background: var(--erreur-fond);
  color: var(--erreur);
}

.btn-succes-doux {
  background: var(--succes-fond);
  color: var(--succes);
}
.btn-succes-doux:hover { background: var(--succes); color: #fff; }

.btn-petit { padding: .35rem .7rem; font-size: .8rem; }

/* Bouton d'action en icône, utilisé dans les tableaux. */
.btn-icone {
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-xs);
  background: var(--neutre-fond);
  color: var(--texte-doux);
  border: none;
  transition: all var(--transition);
}
.btn-icone:hover { background: var(--sable); color: var(--vert-profond); }
.btn-icone.danger:hover { background: var(--erreur-fond); color: var(--erreur); }

/* ==========================================================================
   Pastilles de statut
   ========================================================================== */

.pastille {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .7rem;
  border-radius: var(--r-pilule);
  font-size: .78rem;
  font-weight: 500;
  white-space: nowrap;
  line-height: 1.5;
}

.pastille-succes  { background: var(--succes-fond);  color: var(--succes); }
.pastille-attente { background: var(--attente-fond); color: #B45309; }
.pastille-erreur  { background: var(--erreur-fond);  color: var(--erreur); }
.pastille-neutre  { background: var(--neutre-fond);  color: var(--neutre); }
.pastille-info    { background: var(--info-fond);    color: var(--info); }
.pastille-marque  { background: var(--sable);  color: var(--vert-profond); }

/* ==========================================================================
   Pages d'erreur — 403, 404

   Partagées par le site public et l'espace de gestion : l'habillage
   diffère par le gabarit de base, la mise en page est la même.
   ========================================================================== */

.page-erreur {
  max-width: 34rem;
  margin: 0 auto;
  padding: 2rem 0;
  text-align: center;
}

.erreur-code {
  font-family: var(--police-titre);
  font-size: clamp(3.5rem, 12vw, 5.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--bordure);
}

.erreur-illustration {
  margin: -1.25rem 0 .75rem;
  font-size: 2.4rem;
  color: var(--soleil);
}

.page-erreur h1 {
  font-size: clamp(1.35rem, 4vw, 1.75rem);
  margin-bottom: .6rem;
  text-wrap: balance;
}

.erreur-explication {
  color: var(--texte-doux);
  margin-bottom: 1.75rem;
}

/* Des destinations, pas un bouton « retour » : qui arrive ici cherchait
   quelque chose, et le renvoyer à l'accueil lui fait tout recommencer. */
.erreur-pistes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: .75rem;
  text-align: left;
}
.erreur-pistes > * { min-width: 0; }

.erreur-piste {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .9rem 1rem;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--r-sm);
  text-decoration: none;
  color: var(--texte);
  transition: border-color var(--transition), transform var(--transition);
}
.erreur-piste:hover {
  border-color: var(--soleil);
  transform: translateY(-1px);
  color: var(--texte);
}
.erreur-piste .bi {
  font-size: 1.15rem;
  color: var(--soleil);
  flex-shrink: 0;
  margin-top: .1rem;
}
.erreur-piste span {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  min-width: 0;
  font-size: .82rem;
  color: var(--texte-doux);
}
.erreur-piste strong { font-size: .95rem; color: var(--texte); }

/* ==========================================================================
   Tableaux
   ========================================================================== */

.tableau { width: 100%; border-collapse: collapse; }

.tableau thead th {
  padding: .8rem 1rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--texte-faible);
  text-align: left;
  /* L'en-tête reste visible pendant le défilement du bloc : sans lui, passé
     la dixième ligne, on ne sait plus quelle colonne on lit.
     Le filet est dessiné en ombre intérieure et non en bordure — une bordure
     de cellule disparaît sous `position: sticky` quand le tableau est en
     `border-collapse: collapse`. */
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface);
  box-shadow: inset 0 -1px 0 var(--bordure);
  white-space: nowrap;
}

.tableau tbody td {
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--bordure-douce);
  vertical-align: middle;
}

.tableau tbody tr { transition: background var(--transition); }
.tableau tbody tr:hover { background: var(--creme); }
.tableau tbody tr:last-child td { border-bottom: none; }

/* Un tableau ne doit jamais élargir la page : il défile dans son cadre. */
/* ==========================================================================
   Blocs de données défilants
   --------------------------------------------------------------------------
   Une liste qui s'allonge ne doit pas allonger la page.

   Avec mille clients, une page qui grandit sans fin devient impraticable :
   le titre du tableau part hors écran, la pagination devient inatteignable
   sans dérouler tout le contenu, et passer d'une ligne à l'autre demande un
   aller-retour vertical à chaque fois.

   Chaque bloc garde donc une hauteur bornée et défile chez lui. La page,
   elle, conserve une longueur prévisible quel que soit le volume de données.
   ========================================================================== */

.tableau-cadre {
  overflow: auto;
  max-height: var(--hauteur-bloc);
}

/* Bloc de données qui n'est pas un tableau — un fil d'activité, une liste de
   fiches. Même principe, même bornage. */
.liste-defilante {
  overflow-y: auto;
  max-height: var(--hauteur-bloc-court);
}

/* Le défilement interne n'a d'intérêt que s'il se voit. */
.tableau-cadre::-webkit-scrollbar,
.liste-defilante::-webkit-scrollbar { width: 10px; height: 10px; }
.tableau-cadre::-webkit-scrollbar-thumb,
.liste-defilante::-webkit-scrollbar-thumb {
  background: var(--bordure);
  border-radius: var(--r-pilule);
  border: 3px solid var(--surface);
}
.tableau-cadre::-webkit-scrollbar-thumb:hover,
.liste-defilante::-webkit-scrollbar-thumb:hover { background: var(--texte-faible); }

.cellule-principale { font-weight: 500; color: var(--texte); }

/* ==========================================================================
   Formulaires
   ========================================================================== */

.champ { margin-bottom: 1.1rem; }

.champ label,
.etiquette {
  display: block;
  font-size: .82rem;
  font-weight: 500;
  color: var(--texte-doux);
  margin-bottom: .4rem;
}

.champ input[type="text"],
.champ input[type="email"],
.champ input[type="password"],
.champ input[type="number"],
.champ input[type="date"],
.champ input[type="time"],
.champ input[type="tel"],
.champ select,
.champ textarea,
.saisie {
  width: 100%;
  padding: .6rem .85rem;
  font-family: inherit;
  font-size: .875rem;
  color: var(--texte);
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--r-sm);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.champ input:focus,
.champ select:focus,
.champ textarea:focus,
.saisie:focus {
  outline: none;
  border-color: var(--soleil-vif);
  box-shadow: 0 0 0 3px rgba(74, 152, 115, .15);
}

.champ .aide { font-size: .78rem; color: var(--texte-faible); margin-top: .3rem; }
.champ .erreur { font-size: .8rem; color: var(--erreur); margin-top: .3rem; }
.champ.en-erreur input,
.champ.en-erreur select { border-color: var(--erreur); }

/* Une case à cocher refusée : la bordure rouge d'un champ de saisie n'y
   suffit pas, une case fait 1 rem de côté et personne ne la remarque. On
   marque toute la ligne, et le message se lit sous elle. */
.form-check.en-erreur {
  border-left: 3px solid var(--erreur);
  padding-left: .7rem;
}
.form-check.en-erreur .erreur {
  font-size: .8rem;
  color: var(--erreur);
  margin-top: .3rem;
}

/* ==========================================================================
   Messages
   ========================================================================== */

.message {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .85rem 1.1rem;
  border-radius: var(--r-sm);
  margin-bottom: 1rem;
  font-size: .875rem;
  border-left: 3px solid;
}

.message-succes { background: var(--succes-fond); color: #14532D; border-color: var(--succes); }
.message-erreur { background: var(--erreur-fond); color: #7F1D1D; border-color: var(--erreur); }
.message-attention { background: var(--attente-fond); color: #78350F; border-color: var(--attente); }
.message-info { background: var(--info-fond); color: #1E3A8A; border-color: var(--info); }

/* ==========================================================================
   État vide
   ========================================================================== */

.etat-vide {
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--texte-faible);
}
.etat-vide .bi { font-size: 2.5rem; color: var(--bordure); display: block; margin-bottom: .75rem; }
.etat-vide p { margin: 0 0 1rem; }

/* ==========================================================================
   Divers
   ========================================================================== */

.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--sable);
  color: var(--vert-profond);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: .8rem;
  flex-shrink: 0;
}

.separateur { height: 1px; background: var(--bordure-douce); margin: 1.25rem 0; }

/* Accessibilité : visible uniquement pour les lecteurs d'écran. */
.lecteur-ecran-seul {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Indicateur de chargement HTMX. */
.htmx-indicator { opacity: 0; transition: opacity var(--transition); }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { opacity: 1; }

@media (max-width: 768px) {
  h1 { font-size: 1.9rem; }
  h2 { font-size: 1.5rem; }
  .carte-corps { padding: 1.1rem; }
}

/* Le texte d'un bouton ne se laisse pas repeindre par le contexte : une
   barre de navigation ou un pied de page qui colore ses liens l'emporterait
   autrement sur la couleur du bouton, et le texte disparaitrait sur son
   fond. Voir le bouton de reservation, gris sur bleu avant cette regle. */
a.btn-primaire, a.btn-primaire:hover,
a.btn-soleil, a.btn-soleil:hover,
a.btn-reserver, a.btn-reserver:hover { color: #fff; }

/* Le rang d'un client au classement de fidélité ; or, argent, bronze pour le podium. */
.rang-fidelite {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--sable);
  color: var(--texte-doux);
  font-weight: 700;
  font-size: .82rem;
}
.rang-fidelite.rang-1 { background: #E9C46A; color: #4A3700; }
.rang-fidelite.rang-2 { background: #D5D9DC; color: #333A3F; }
.rang-fidelite.rang-3 { background: #D9A273; color: #452507; }

/* La progression vers le niveau suivant, sur la fiche client. */
.progression-fidelite {
  height: 6px;
  border-radius: 999px;
  background: var(--sable);
  overflow: hidden;
}
.progression-fidelite > span {
  display: block;
  height: 100%;
  background: var(--soleil);
}

/* Le menu du jour dans l'espace de gestion : entrées, plats, desserts côte à côte. */
.grille-menu-jour {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
}
.liste-menu-jour { list-style: none; margin: 0; padding: 0; }
.liste-menu-jour li {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  padding: .45rem 0;
  border-bottom: 1px solid var(--bordure-douce);
  font-size: .9rem;
}
.liste-menu-jour li:last-child { border-bottom: 0; }
.liste-menu-jour a { color: inherit; text-decoration: none; min-width: 0; }
.liste-menu-jour a:hover .cellule-principale { text-decoration: underline; }