/*
 * Composants de l'identité « Côte d'Opale » (task-013) : chaque composant n'est dessiné qu'ici et
 * n'est écrit que par son fragment (templates/fragments/composants.html). app.css garde la mise en
 * page et les placements propres à une page.
 */

.bouton {
  display: inline-flex;
  align-items: center;
  min-height: var(--cible);
  padding: var(--espace-2) var(--espace-3);
  border-radius: var(--rayon-m);
  background: var(--marine);
  color: var(--sur-marine);
  text-decoration: none;
  font-weight: 600;
  border: 0;
  font-size: var(--taille-texte);
  cursor: pointer;
}
.bouton.secondaire { background: var(--carte); color: var(--marine); border: var(--trait) solid var(--marine); }
.bouton.danger { background: var(--alerte); }
/* Pendant l'envoi : couleurs dédiées plutôt qu'une opacité, le libellé reste lisible (6:1). */
.bouton:disabled { background: var(--galet); color: var(--carte); cursor: progress; }
.bouton.secondaire:disabled { background: var(--carte); color: var(--galet); border-color: var(--galet); }
.jour {
  min-height: calc(var(--cible) + var(--espace-2));
  border-radius: var(--rayon-s);
  padding: 0;
  font-size: var(--taille-petit);
  overflow: hidden;
}
.jour.libre { background: var(--carte); border: var(--trait) solid var(--filet); }
.jour.occupe { background: var(--occupe-fond); color: var(--occupe-encre); }
/* Jour courant : bordure épaisse et numéro souligné, repérables sans la couleur. */
.jour.aujourdhui { box-shadow: inset 0 0 0 var(--trait-fort) var(--balise); }
.jour.aujourdhui .numero { text-decoration: underline; text-underline-offset: 2px; }
/* Le lien couvre toute la case (cible tactile d'au moins 44 px, même sur 390 px de large). */
.jour a, .jour > .numero { padding: var(--espace-1); }
/* La case coupe ce qui dépasse : le contour de focus du lien est tracé à l'intérieur. */
.jour a:focus-visible { outline-offset: calc(-1 * var(--trait-fort)); }
.jour a {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
.jour .numero { display: block; font-weight: 600; }
.jour .client {
  display: block;
  font-size: var(--taille-etiquette);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.badge {
  font-size: var(--taille-etiquette);
  padding: var(--espace-1) var(--espace-2);
  border-radius: var(--rayon-s);
  background: var(--carte);
  border: var(--trait) solid var(--bordure);
}
.badge.alerte, .badge.reste-du { border-color: transparent; }
.badge.alerte { background: var(--alerte-fond); color: var(--alerte-encre); }
.badge.reste-du { background: var(--reste-du-fond); color: var(--reste-du-encre); }
.message { padding: var(--espace-3) var(--espace-4); border-radius: var(--rayon-m); margin: 0 0 var(--espace-4); }
.message.erreur { background: var(--alerte-fond); color: var(--alerte-encre); }
.message.avertissement { background: var(--reste-du-fond); color: var(--reste-du-encre); }
.message.succes { background: var(--solde-fond); color: var(--solde-encre); }
/* Un lien dans un message prend la couleur du message (au moins 5,7:1 sur son fond). */
.message a { color: inherit; }
.message ul, ul.message { list-style: none; padding-left: var(--espace-4); }
.carte { padding: var(--espace-2) var(--espace-3); background: var(--carte); border: var(--trait) solid var(--filet); border-radius: var(--rayon-m); }
.carte p { margin: 0; }
.carte-titre { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-2); font-weight: 600; }
.carte-detail { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-1) var(--espace-3); color: var(--galet); padding-bottom: var(--espace-1); }
.carte-detail strong { color: var(--encre); }
.tableau { border-collapse: collapse; width: 100%; background: var(--carte); }
.tableau caption { text-align: left; color: var(--galet); padding-bottom: var(--espace-2); }
.tableau th, .tableau td { padding: var(--espace-2); border-bottom: var(--trait) solid var(--filet); text-align: left; white-space: nowrap; }
.tableau .actions { display: flex; flex-wrap: wrap; gap: var(--espace-2); align-items: center; }
.tableau .actions form { margin: 0; }
/* Tableau de bord : chiffres alignés à droite, mois en cours et projetés signalés. */
.tableau.chiffres td { text-align: right; font-variant-numeric: tabular-nums; }
.tableau.chiffres tfoot th, .tableau.chiffres tfoot td { font-weight: 700; border-top: var(--trait-fort) solid var(--bordure); }
.tableau .badge { margin-left: var(--espace-2); }
.carte-synthese { background: var(--carte); border: var(--trait) solid var(--filet); border-radius: var(--rayon-m); padding: var(--espace-3); border-top: var(--trait-fort) solid var(--sable); }
.carte-synthese dt { color: var(--galet); font-size: var(--taille-petit); }
.carte-synthese dd { margin: var(--espace-1) 0 0; font-family: var(--font-titre); font-size: var(--taille-chiffre); font-weight: 700; }
.carte-synthese dd.cible { font-size: var(--taille-petit); font-weight: 400; color: var(--galet); }

/* Statuts du séjour : chacun son fond et son mot, le texte reste en encre ; « annulée » est barrée. */
.badge.statut { color: var(--encre); }
.badge.confirmee { background: var(--confirme-fond); border-color: transparent; }
.badge.soldee { background: var(--solde-fond); border-color: transparent; }
.badge.annulee { background: var(--annule-fond); border-color: transparent; text-decoration: line-through; }

/* Champ : libellé au-dessus, message d'erreur sous le champ et relié à lui. */
.champ { display: flex; flex-direction: column; gap: var(--espace-1); margin-bottom: var(--espace-3); }
.champ label { font-weight: 600; }
.champ input { min-height: var(--cible); font-size: var(--taille-texte); padding: var(--espace-2); border: var(--trait) solid var(--bordure); border-radius: var(--rayon-m); width: 100%; max-width: 24rem; }
.champ input[aria-invalid="true"] { border: var(--trait-fort) solid var(--alerte); }
.champ .message { margin: 0; }