/* =====================================================================
   components.css — éléments réutilisables
   ===================================================================== */

/* ---------------------------------------------------------------------
   Boutons — 48px minimum, pleine largeur sur mobile
   --------------------------------------------------------------------- */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: var(--hauteur-bouton);
  padding: 0 var(--e-5);
  border-radius: var(--rayon-m);
  font-family: var(--police-texte);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  text-align: center;
  border: 1px solid transparent;
  transition:
    background-color var(--duree-courte) var(--courbe),
    border-color var(--duree-courte) var(--courbe),
    color var(--duree-courte) var(--courbe);
}

.bouton:disabled,
.bouton[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Sur fond clair */
.bouton--principal {
  background: var(--bleu);
  color: var(--blanc);
}
.bouton--principal:hover { background: var(--bleu-2); }

.bouton--contour {
  background: transparent;
  color: var(--bleu);
  border-color: var(--filet-fort);
}
.bouton--contour:hover { border-color: var(--bleu); }

/* Sur fond bleu */
.bouton--clair {
  background: var(--blanc);
  color: var(--bleu);
}
.bouton--clair:hover { background: var(--surface-douce); }

.bouton--or {
  background: transparent;
  color: var(--or-clair);
  border-color: var(--filet-or);
}
.bouton--or:hover {
  border-color: var(--or);
  color: var(--blanc);
}

.bouton--compact {
  min-height: 40px;
  padding: 0 var(--e-4);
  font-size: var(--t-petit);
}

@media (max-width: 559px) {
  .bouton--large { width: 100%; }
}

/* ---------------------------------------------------------------------
   Titres de section
   --------------------------------------------------------------------- */
.titre-section {
  font-size: var(--t-xl);
  margin-bottom: var(--e-2);
}

.intro-section {
  color: var(--texte-doux);
  max-width: var(--largeur-texte);
  margin-bottom: var(--e-6);
}

.section--sombre .intro-section { color: var(--texte-invers-doux); }

/* ---------------------------------------------------------------------
   Communiqué officiel
   --------------------------------------------------------------------- */
.communique {
  background: var(--surface);
  border: 1px solid var(--filet);
  border-top: 3px solid var(--or);
  border-radius: var(--rayon-l);
  padding: var(--e-5);
}

@media (min-width: 768px) {
  .communique { padding: var(--e-6) var(--e-7); }
}

.communique__entete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e-2) var(--e-4);
  margin-bottom: var(--e-4);
  padding-bottom: var(--e-4);
  border-bottom: 1px solid var(--filet);
}

.communique__origine {
  font-family: var(--police-titre);
  font-size: var(--t-md);
  font-weight: 600;
}

.communique__date {
  font-size: var(--t-petit);
  color: var(--texte-faible);
}

.communique__corps {
  font-family: var(--police-titre);
  font-size: 1.0625rem;
  line-height: var(--interligne-large);
  color: var(--texte-doux);
  max-width: var(--largeur-texte);
}

.communique__corps p + p { margin-top: var(--e-4); }

/* Repli du texte long : la hauteur s'anime à l'ouverture. */
.communique__suite {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--duree) var(--courbe);
}
.communique__suite > div { overflow: hidden; }
.communique[data-deplie="true"] .communique__suite { grid-template-rows: 1fr; }

.communique__bascule { margin-top: var(--e-4); }

.communique__signature {
  margin-top: var(--e-5);
  padding-top: var(--e-4);
  border-top: 1px solid var(--filet);
  font-family: var(--police-titre);
  font-style: italic;
  color: var(--texte-doux);
}

/* ---------------------------------------------------------------------
   Consignes
   --------------------------------------------------------------------- */
.consignes {
  display: grid;
  gap: var(--e-4);
}

@media (min-width: 768px) {
  .consignes { grid-template-columns: repeat(2, 1fr); gap: var(--e-5); }
}

.consigne {
  display: grid;
  gap: var(--e-2);
  padding-left: var(--e-5);
  border-left: 2px solid var(--or);
}

.consigne__titre {
  font-size: var(--t-md);
  font-weight: 600;
}

.consigne__texte {
  color: var(--texte-invers-doux);
  font-size: var(--t-petit);
  line-height: var(--interligne-large);
}

/* ---------------------------------------------------------------------
   Bloc contribution
   --------------------------------------------------------------------- */
.calcul {
  display: grid;
  gap: var(--e-2);
  margin-top: var(--e-4);
  padding: var(--e-4);
  background: var(--surface-douce);
  border-radius: var(--rayon-m);
  font-size: var(--t-petit);
}

.calcul__ligne {
  display: flex;
  justify-content: space-between;
  gap: var(--e-4);
  color: var(--texte-doux);
}

.calcul__total {
  display: flex;
  justify-content: space-between;
  gap: var(--e-4);
  padding-top: var(--e-2);
  border-top: 1px solid var(--filet-fort);
  font-weight: 700;
  color: var(--texte);
}

/* ---------------------------------------------------------------------
   Badge
   --------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  padding: 4px var(--e-3);
  border-radius: var(--rayon-rond);
  border: 1px solid var(--filet-or);
  color: var(--or);
  font-size: var(--t-micro);
  font-weight: 600;
}

.badge--ferme {
  border-color: rgba(180, 35, 24, 0.4);
  color: var(--erreur);
}

/* ---------------------------------------------------------------------
   Bandeau d'alerte (inscriptions closes, panne, etc.)
   --------------------------------------------------------------------- */
.alerte {
  display: grid;
  gap: var(--e-1);
  padding: var(--e-4);
  border-radius: var(--rayon-m);
  border: 1px solid;
  font-size: var(--t-petit);
}

.alerte--info {
  background: #EFF4FB;
  border-color: #C9D8EE;
  color: var(--bleu-2);
}

.alerte--erreur {
  background: #FDF2F1;
  border-color: #F1C7C3;
  color: var(--erreur);
}

.alerte__titre { font-weight: 700; }