/* ==========================================================================
   Les pages de service : logistique, réservations, restauration, atelier,
   album, prépa, 404.

   POURQUOI CE FICHIER EXISTE. Les classes partagées de style.css couvrent tout
   ce que ces pages font, à une exception près : elles listent des tableaux
   LONGS (62 hébergements, 24 trajets, 387 adresses) dont les lignes se
   regroupent par ville. Un regroupement de lignes de tableau n'existe nulle
   part ailleurs sur le site — il n'avait donc pas sa place dans le contrat
   commun. Tout le reste de ces pages compose les classes de style.css.

   Chargé APRÈS style.css, depuis le `{% block head %}` des gabarits concernés.
   ========================================================================== */

/* --------------------------------------------------------------------------
   L'en-tête de groupe dans un tableau.

   Pas un `<th>` : `.data-table th` est `position: sticky; top: 0`, réglage
   juste pour la ligne d'en-têtes et faux pour dix-sept en-têtes de groupe, qui
   se colleraient tous les uns sur les autres en haut du cadre. C'est donc un
   `<td>` porté par un `<tbody>` distinct — le regroupement est déjà dit par la
   structure du tableau, le style ne fait que le rendre visible.
   -------------------------------------------------------------------------- */
.groupe-tete > td {
  background: var(--panel-raised);
  border-top: 1px solid var(--border);
  padding: var(--esp-2) var(--esp-3);
  font-family: "Shippori Mincho", Georgia, serif;
  font-weight: 700;
  font-size: var(--fs-300);
  color: var(--ink);
}
/* Le compte de la ville : c'est lui qui rend visible qu'on a plusieurs
   candidats pour la même étape, ce qui est tout l'intérêt du regroupement. */
.groupe-tete__compte {
  font-family: inherit;
  font-weight: 400;
  font-size: var(--fs-200);
  color: var(--usuzumi);
  margin-left: var(--esp-2);
}
/* Le survol de ligne de .data-table teinte tout ce qui est <td> : un en-tête de
   groupe qui s'allume au passage se lit comme une ligne cliquable. */
.data-table tr.groupe-tete:hover > td {
  background: var(--panel-raised);
}

/* --------------------------------------------------------------------------
   La liste de l'atelier.

   Une entrée d'atelier peut être un catalogue rempli, un catalogue vide ou un
   document daté. La différence doit se voir avant de cliquer : sans elle,
   l'atelier promet quatre catalogues et en tient deux.
   -------------------------------------------------------------------------- */
.atelier-liste .frise-detail { max-width: var(--mesure); }
/* « en attente », « historique » : l'état de l'entrée, à côté de son titre.
   Gris, jamais vermillon — ce n'est pas une alerte, c'est un rangement. */
.entree-etat {
  display: inline-block;
  margin-left: var(--esp-2);
  padding: 1px 8px;
  border: 1px dashed var(--border);
  border-radius: var(--rayon-pilule);
  font-size: var(--fs-100);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--usuzumi);
  vertical-align: middle;
}