/* ==========================================================================
   Thème céleste d'Eléstya
   ==========================================================================

   LA PALETTE VIENT DE LA PAGE D'ACCUEIL DU SERVEUR, elle-même reprise des
   couleurs du chat en jeu. Le site, la page de vote et les menus du plugin
   doivent donner l'impression d'un seul endroit : du rose des cerisiers au
   bleu du ciel, avec l'or en accent de marque.

   ON REDÉFINIT LES VARIABLES DE BOOTSTRAP plutôt que de bagarrer avec ses
   sélecteurs. Azuriom et son module Boutique posent des centaines de classes
   Bootstrap ; les repeindre une à une aurait laissé des trous à chaque mise
   à jour, alors qu'une variable retouchée se propage partout d'un coup.
   ========================================================================== */

:root,
[data-bs-theme="dark"] {
  /* Les couleurs d'Eléstya */
  --el-sakura:  #f2a9c4;
  --el-lavande: #c3b4f2;
  --el-ciel:    #a6c8f0;
  --el-etoile:  #dce6fa;
  --el-brume:   #6e7ca6;
  --el-nuit:    #414b6b;
  --el-or:      #e8b923;
  --el-fond:    #0d1020;
  --el-fond2:   #121732;
  --el-carte:   #161c33;

  /* Bootstrap, repeint */
  --bs-body-bg:            var(--el-fond);
  --bs-body-color:         var(--el-etoile);
  --bs-secondary-bg:       var(--el-fond2);
  --bs-tertiary-bg:        var(--el-carte);
  --bs-secondary-color:    var(--el-brume);
  --bs-tertiary-color:     var(--el-brume);
  --bs-border-color:       var(--el-nuit);
  --bs-border-color-translucent: rgba(65, 75, 107, .6);
  --bs-emphasis-color:     #ffffff;
  --bs-heading-color:      var(--el-etoile);

  --bs-link-color:         var(--el-ciel);
  --bs-link-hover-color:   var(--el-sakura);
  --bs-link-color-rgb:     166, 200, 240;
  --bs-link-hover-color-rgb: 242, 169, 196;

  /* LE GRIS « dark » DE BOOTSTRAP, REPEINT EN BLEU NUIT. Le pied de page et
     la barre portent l'utilitaire .text-bg-dark, dont le !important gagne
     contre une règle d'élément : c'était un bandeau gris ardoise au bas d'un
     site bleu nuit. On retouche la variable, et les deux suivent. */
  --bs-dark:               #121732;
  --bs-dark-rgb:           18, 23, 50;
  --bs-dark-bg-subtle:     #0d1020;

  --bs-primary:            #7b6bd6;
  --bs-primary-rgb:        123, 107, 214;
  --bs-primary-bg-subtle:  #1b1f3d;
  --bs-primary-border-subtle: var(--el-nuit);

  --bs-body-font-family: Karla, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --el-titres: Marcellus, "Iowan Old Style", Georgia, serif;
  --bs-body-line-height: 1.6;
  --bs-border-radius:    13px;
  --bs-border-radius-sm: 9px;
  --bs-border-radius-lg: 16px;
}

/* Le ciel du serveur : deux halos, l'un rose, l'autre bleu.
   Fixe plutôt que défilant — un dégradé qui bouge avec le contenu se
   remarque, et ce fond doit se faire oublier. */
/* LA SECONDE CAPTURE EST LE FOND DE TOUT LE SITE, mais très en retrait :
   deux halos et un aplat quasi opaque passent devant. Elle ne se lit pas,
   elle se devine — on doit sentir qu'on est sur un serveur Minecraft sans
   jamais avoir de mal à lire une ligne de wiki par-dessus.

   FIXE PLUTOT QUE DEFILANTE : une photo qui glisse derrière un tableau de
   soixante-seize commandes se remarque, et ce fond doit se faire oublier. */
/* EN PROPRIETES SEPAREES, PAS EN RACCOURCI. Le raccourci « background »
   remet l'attachement a « scroll », et comme il portait un !important il
   gagnait contre le « fixed » ecrit en dessous. Resultat : l'image etait
   etiree sur les quatre metres de haut de la page, les halos s'eteignaient
   apres le premier ecran, et tout le bas virait au noir. */
body {
  background-color: var(--el-fond) !important;
  background-image:
    radial-gradient(1100px 520px at 50% -10%, rgba(242, 169, 196, .13), transparent 70%),
    radial-gradient(900px 480px at 85% 15%, rgba(166, 200, 240, .10), transparent 70%),
    linear-gradient(rgba(13, 16, 32, .972), rgba(13, 16, 32, .988)),
    url('/storage/img/fond-serveur.jpg');
  background-position: center top, center top, center top, center center;
  background-size: auto, auto, auto, cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--el-etoile);
}

/* ── Titres ──────────────────────────────────────────────────────────── */

/* LES TITRES EN MARCELLUS, ET SANS DÉGRADÉ. Le dégradé rose vers bleu sur le
   titre était le second réflexe de site généré, après la police système. Une
   couleur pleine et une belle lettre portent mieux le nom du serveur, et
   restent lisibles par-dessus une photo. */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5,
.navbar-brand, .card-title, .accueil-tuile h3, .jour__nom {
  font-family: var(--el-titres);
  font-weight: 400;
}

h1, .h1 {
  color: var(--el-etoile);
  letter-spacing: .01em;
  line-height: 1.12;
}

/* ON VISE DEPUIS LE CONTENEUR. Les titres du site portent souvent une classe
   de taille de Bootstrap (« h2 class="h4" »), et cette classe fixe aussi la
   couleur : un sélecteur d'élément seul se faisait battre par elle. */
h2, .h2,
.page-article h2, .accueil-section h2, .content h2 {
  color: var(--el-sakura);
  letter-spacing: .01em;
}

h3, .h3,
.page-article h3, .content h3 {
  color: var(--el-ciel);
}

/* LE PETIT FILET SOUS LES TITRES DE SECTION. Il donne un rythme éditorial là
   où toutes les sections se ressemblaient, et il coûte une seule règle. */
.content h2::after,
.accueil-section h2::after {
  content: "";
  display: block;
  width: 54px;
  height: 2px;
  margin-top: .55rem;
  background: linear-gradient(90deg, var(--el-sakura), transparent);
}

/* Le nom du serveur dans la barre, en capitales espacées. */
.navbar .navbar-brand {
  font-size: 1.22rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ── Les effets ──────────────────────────────────────────────────────── */

/* La toile des pétales couvre l'écran et ne capte jamais un clic : elle est
   décorative, et un lien qu'on ne peut plus cliquer parce qu'un pétale passe
   devant serait absurde. */
.petales {
  position: fixed;
  inset: 0;
  /* DERRIÈRE TOUT, ET PAS « AU NIVEAU 0 ». Un z-index négatif place la toile
     sous le contenu dans le flux normal, sans avoir à remonter quoi que ce
     soit au-dessus d'elle. Le fond du body reste peint en dessous : les
     pétales se voient toujours par-dessus la photo du serveur. */
  z-index: -1;
  pointer-events: none;
}

/* Le contenu passe devant la toile, et le pied de page aussi — mais SANS
   z-index, et c'est tout l'intérêt de la règle précédente.

   POURQUOI PAS « z-index: 1 » ICI. Un z-index sur un élément positionné crée
   un contexte d'empilement, et tout ce que #app contient s'y trouve enfermé.
   Or Bootstrap accroche le voile des fenêtres modales (.modal-backdrop,
   z-index 1050) directement au <body>, donc HORS de #app. La fenêtre avait
   beau demander 1055, elle restait plaquée au niveau 1 de son parent : le
   voile passait par-dessus elle.

   Ça ne se voyait qu'à moitié — la fenêtre paraissait simplement terne — mais
   un voile par-dessus intercepte aussi les clics. Le bouton « Soutenir » de la
   boutique n'était donc jamais atteint : on cliquait sur le voile, et rien ne
   se passait, sans message ni erreur nulle part. Le paiement était injoignable.

   Le même piège est déjà signalé plus bas à propos de « backdrop-filter »,
   qui crée lui aussi un contexte d'empilement. */
#app,
footer {
  position: relative;
}

/* L'apparition au défilement. L'état de départ n'est posé que par le script :
   si le JavaScript ne tourne pas, rien n'est jamais caché. */
.a-reveler {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.2, .7, .3, 1);
  transition-delay: var(--retard, 0ms);
}

.a-reveler.est-visible {
  opacity: 1;
  transform: none;
}

/* Le titre respire, très lentement : douze secondes pour un aller-retour.
   Plus rapide, le dégradé clignote et attire l'œil en permanence. */
@keyframes elestya-ciel {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Le titre de la bannière garde le dégradé, lui seul : posé sur une photo, à
   très grande taille, il tient de l'enseigne et non du titre courant. */
.home-banniere h1 {
  background: linear-gradient(120deg, var(--el-sakura), var(--el-lavande) 55%, var(--el-ciel));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-size: 200% auto;
  animation: elestya-ciel 12s ease-in-out infinite;
}

/* Le logo de la bannière flotte, comme suspendu. */
@keyframes elestya-flotte {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}

.home-banniere .home-logo {
  animation: elestya-flotte 6s ease-in-out infinite;
}

/* Les boutons principaux s'éclairent au survol au lieu de seulement changer
   de teinte : sur un fond sombre, la lueur se voit mieux que la couleur. */
.btn-primary {
  transition: box-shadow .18s ease, transform .18s ease, background .18s ease;
}

.btn-primary:hover,
.btn-primary:focus-visible {
  box-shadow: 0 6px 22px rgba(195, 180, 242, .38);
  transform: translateY(-1px);
}

/* Un liseré qui court sur la tuile survolée, du sakura vers le ciel. */
.accueil-tuile,
.card {
  position: relative;
  overflow: hidden;
}

.accueil-tuile::after,
.card::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--el-sakura), var(--el-ciel), transparent);
  opacity: 0;
  transition: opacity .2s ease;
}

.accueil-tuile:hover::after,
.card:hover::after {
  opacity: .85;
}

@media (prefers-reduced-motion: reduce) {
  h1, .h1,
  .home-banniere .home-logo {
    animation: none;
  }

  .a-reveler {
    opacity: 1;
    transform: none;
  }
}

/* ── La bannière d'accueil ───────────────────────────────────────────── */

.home-banniere {
  /* Les mêmes halos que la page d'accueil du serveur, en plus dense : ici la
     bannière doit tenir toute seule, sans photo derrière. */
  background:
    radial-gradient(900px 420px at 50% 0%, rgba(242, 169, 196, .22), transparent 68%),
    radial-gradient(760px 400px at 82% 30%, rgba(166, 200, 240, .16), transparent 70%),
    linear-gradient(180deg, var(--el-fond2), var(--el-fond));
  border-bottom: 1px solid var(--el-nuit);
  padding: 68px 20px 60px;
  color: var(--el-etoile);
}

/* AVEC UNE PHOTO DU SERVEUR, UN VOILE PAR-DESSUS. Une capture Minecraft est
   claire et bariolée : le titre s'y perdrait, et l'image mangerait la palette
   du site. Le voile descend vers le bleu nuit du fond, si bien que la
   bannière se raccorde à la page au lieu de s'y coller. */
.home-banniere--photo {
  background:
    linear-gradient(180deg, rgba(13, 16, 32, .55) 0%, rgba(13, 16, 32, .72) 55%, var(--el-fond) 100%),
    var(--photo) center / cover no-repeat;
  padding: 96px 20px 88px;
}

.home-banniere .home-logo {
  width: 140px;
  height: 140px;
  margin-bottom: 16px;
  filter: drop-shadow(0 8px 26px rgba(242, 169, 196, .28));
}

.home-banniere h1 {
  font-size: clamp(2.2rem, 7vw, 3.4rem);
  margin-bottom: .35rem;
}

.home-banniere .home-accroche {
  color: var(--el-brume);
  max-width: 46rem;
  margin: 0 auto;
}

.home-discord {
  margin-top: 22px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  /* Une ombre portée, parce que le bouton se pose sur une photo : sans elle
     il flotte, et le contraste dépend de ce qu'il y a derrière. */
  box-shadow: 0 10px 28px rgba(13, 16, 32, .55);
}

/* ── Les joueurs en ligne ────────────────────────────────────────────── */

.home-enligne {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 18px 0 0;
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(13, 16, 32, .55);
  border: 1px solid var(--el-nuit);
  backdrop-filter: blur(6px);
  color: var(--el-etoile);
  font-size: .95rem;
}

.home-enligne strong {
  color: var(--el-or);
  font-variant-numeric: tabular-nums;
}

/* La pastille bat lentement, comme un signe de vie. Deux secondes par
   battement : plus vite, ça ressemble à une alerte. */
@keyframes elestya-battement {
  0%, 100% { box-shadow: 0 0 0 0 rgba(143, 224, 163, .55); }
  70% { box-shadow: 0 0 0 8px rgba(143, 224, 163, 0); }
}

.home-enligne__point {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #8fe0a3;
  animation: elestya-battement 2s ease-out infinite;
}

/* ── Le vote, pendant l'attente ──────────────────────────────────────── */

/* LA CARTE S'EFFACE SANS DISPARAITRE. Le joueur doit continuer à lire le nom
   du site et le temps qui reste ; la masquer complètement lui ferait croire
   que le site a été retiré. */
.vote-carte--attente {
  opacity: .52;
  border-style: dashed;
}

.vote-carte--attente .vote-lien {
  background: var(--el-fond2);
  color: var(--el-brume);
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}

/* Le temps restant reprend la couleur de marque : c'est l'information que le
   joueur revient chercher. */
.vote-carte--attente .vote-rythme {
  color: var(--el-or) !important;
  font-variant-numeric: tabular-nums;
}

/* ── Le prochain rendez-vous ─────────────────────────────────────────── */

.prochain {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 1.4rem;
  padding: 14px 18px;
  border-radius: 13px;
  border: 1px solid var(--el-nuit);
  background: linear-gradient(120deg, rgba(242, 169, 196, .10), var(--el-carte) 65%);
}

.prochain__etiquette {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--el-brume);
}

.prochain__nom {
  font-weight: 600;
  color: var(--el-ciel);
}

.prochain__temps {
  color: var(--el-or);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* La case du prochain rendez-vous, dans la semaine. */
.jour--prochain {
  border-color: var(--el-or);
  background: linear-gradient(180deg, rgba(232, 185, 35, .09), var(--el-carte) 60%);
}

.home-banniere h2,
.home-banniere h3 {
  color: var(--el-etoile);
  font-size: 1.1rem;
  font-weight: 500;
  margin-top: .8rem;
}

/* ── Les sections de l'accueil ───────────────────────────────────────── */

/* L'ADRESSE DU SERVEUR, EN PREMIER ET EN OR. C'est ce que le visiteur vient
   chercher ; tout le reste ne sert qu'à lui donner envie de la copier. */
.accueil-ip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 18px 22px;
  background: var(--el-carte);
  border: 1px solid var(--el-nuit);
  border-radius: 13px;
}

.accueil-ip__libelle {
  color: var(--el-brume);
  font-weight: 500;
}

.accueil-ip code {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--el-or);
  background: rgba(13, 16, 32, .75);
  padding: .3em .7em;
}

.accueil-section {
  margin-bottom: 4.5rem;
}

.accueil-section h2 {
  font-size: 1.9rem;
  margin-bottom: .6rem;
}

.accueil-etiquette {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--el-sakura);
  margin-bottom: .5rem;
}

.accueil-image {
  width: 100%;
  height: auto;
  border-radius: 13px;
  border: 1px solid var(--el-nuit);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .45);
}

/* Les tuiles sont des liens entiers : viser un petit « en savoir plus »
   au doigt sur téléphone rate une fois sur deux. */
.accueil-tuile {
  display: block;
  height: 100%;
  padding: 22px;
  background: var(--el-carte);
  border: 1px solid var(--el-nuit);
  border-radius: 13px;
  color: var(--el-etoile);
  transition: border-color .15s ease, transform .15s ease;
}

.accueil-tuile:hover,
.accueil-tuile:focus-visible {
  border-color: var(--el-lavande);
  color: var(--el-etoile);
  transform: translateY(-2px);
}

.accueil-tuile h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--el-ciel);
  margin-bottom: .45rem;
}

.accueil-tuile p {
  color: var(--el-brume);
  margin-bottom: 0;
  font-size: .95rem;
}

.accueil-appel {
  padding: 26px;
  border-radius: 13px;
  border: 1px solid var(--el-nuit);
  background: linear-gradient(160deg, rgba(195, 180, 242, .10), var(--el-carte) 70%);
}

.accueil-appel h3 {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: .5rem;
}

.accueil-appel p {
  color: var(--el-brume);
}

/* ── Barre de navigation ─────────────────────────────────────────────── */

/* LA BARRE PASSE DEVANT TOUT LE RESTE, et il lui faut un z-index explicite.
   Le « backdrop-filter » crée un contexte d'empilement, aussi bien ici que
   sur les cartes du contenu ; sans rang déclaré, la carte, qui vient plus
   bas dans la page, se peignait par-dessus le menu déroulant et en avalait
   les dernières entrées. */
.navbar {
  position: relative;
  z-index: 30;
  background: rgba(13, 16, 32, .92) !important;
  border-bottom: 1px solid var(--el-nuit);
  backdrop-filter: blur(8px);
}

/* Le menu lui-même, au-dessus de sa propre barre. */
.navbar .dropdown-menu {
  z-index: 40;
  padding: 6px;
  border-radius: 11px;
}

.dropdown-item {
  border-radius: 8px;
  color: var(--el-body, var(--el-etoile));
  padding: 8px 12px;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: rgba(195, 180, 242, .14);
  color: var(--el-etoile);
}

/* LA PAGE COURANTE, EN LILAS PLUTOT QU'EN BLEU BOOTSTRAP. Le bleu vif par
   défaut était la seule tache de couleur étrangère à la palette, et elle
   tombait pile sur l'élément que l'œil cherche. */
.dropdown-item.active,
.dropdown-item:active {
  background: linear-gradient(135deg, rgba(242, 169, 196, .22), rgba(195, 180, 242, .22));
  color: var(--el-etoile);
  font-weight: 600;
}

.navbar .navbar-brand {
  font-weight: 700;
  color: var(--el-etoile) !important;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.navbar .navbar-brand img {
  width: 34px;
  height: 34px;
  filter: drop-shadow(0 3px 10px rgba(242, 169, 196, .35));
}

.navbar .nav-link {
  color: var(--el-brume) !important;
  font-weight: 500;
  transition: color .15s ease;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus-visible,
.navbar .nav-link.active {
  color: var(--el-etoile) !important;
}

/* ── Cartes et panneaux ──────────────────────────────────────────────── */

.card,
.list-group-item,
.dropdown-menu,
.modal-content,
.accordion-item {
  background-color: var(--el-carte);
  border: 1px solid var(--el-nuit);
  color: var(--el-etoile);
}

/* DU VERRE DÉPOLI PLUTÔT QU'UN APLAT. La photo du serveur est derrière : la
   laisser deviner à travers les cartes donne de la profondeur, alors qu'un
   fond opaque la masque complètement et rend le décor inutile.

   LE FOND RESTE PRESQUE OPAQUE quand même (.86), parce qu'une carte trop
   transparente rend son texte pénible à lire dès que la photo est claire. */
.card {
  border-radius: 13px;
  background-color: rgba(22, 28, 51, .86);
  backdrop-filter: blur(9px) saturate(115%);
  transition: border-color .15s ease, transform .15s ease;
}

.jour,
.accueil-tuile,
.accueil-appel,
.accueil-ip,
.prochain {
  backdrop-filter: blur(9px) saturate(115%);
}

.jour,
.accueil-tuile,
.accueil-ip {
  background-color: rgba(22, 28, 51, .86);
}

.card-header,
.card-footer {
  background-color: rgba(18, 23, 50, .7);
  border-color: var(--el-nuit);
}

/* LA COLONNE DE GAUCHE, DÉSOSSÉE. Le « list-group » de Bootstrap, avec ses
   grosses bordures et ses coins, criait le gabarit par défaut. On garde des
   entrées de menu simples, séparées par un filet, avec un repère en couleur
   sur la page courante. */
.list-group {
  border: 0;
  gap: 0;
}

.list-group-item {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--el-nuit);
  border-radius: 0 !important;
  padding: .7rem .2rem .7rem .9rem;
  border-left: 2px solid transparent;
}

.list-group-item:last-child {
  border-bottom: 0;
}

.list-group-item.active {
  background: linear-gradient(90deg, rgba(242, 169, 196, .10), transparent);
  border-left-color: var(--el-sakura);
  color: var(--el-etoile);
  font-weight: 700;
}

.text-muted,
.text-body-secondary {
  color: var(--el-brume) !important;
}

/* ── Boutons ─────────────────────────────────────────────────────────── */

.btn-primary {
  background: linear-gradient(135deg, var(--el-sakura), var(--el-lavande));
  border: 0;
  color: #1a1430;
  font-weight: 600;
}

.btn-primary:hover,
.btn-primary:focus-visible,
.btn-primary:active {
  background: linear-gradient(135deg, var(--el-lavande), var(--el-ciel));
  color: #1a1430;
}

.btn-outline-primary {
  border-color: var(--el-lavande);
  color: var(--el-lavande);
}

.btn-outline-primary:hover {
  background: var(--el-lavande);
  color: #1a1430;
}

.btn-secondary {
  background-color: var(--el-fond2);
  border-color: var(--el-nuit);
  color: var(--el-etoile);
}

/* La couleur de marque sert au bouton qui compte, pas à la décoration. */
.btn-warning {
  background: var(--el-or);
  border-color: var(--el-or);
  color: #241c00;
  font-weight: 600;
}

/* ── Champs de saisie ────────────────────────────────────────────────── */

.form-control,
.form-select {
  background-color: var(--el-fond2);
  border-color: var(--el-nuit);
  color: var(--el-etoile);
}

.form-control:focus,
.form-select:focus {
  background-color: var(--el-fond2);
  border-color: var(--el-lavande);
  color: var(--el-etoile);
  box-shadow: 0 0 0 .2rem rgba(195, 180, 242, .22);
}

.form-control::placeholder { color: var(--el-brume); }

/* ── La boutique ─────────────────────────────────────────────────────── */

/* LES PAQUETS SE COMPARENT DU REGARD, donc ils s'alignent : même hauteur,
   prix toujours à la même place, bouton en bas. Sans ça, un paquet à la
   description plus longue décale son bouton et casse la lecture en colonne. */
.shop-package-card,
.card.h-100 {
  display: flex;
  flex-direction: column;
}

.card:hover {
  border-color: var(--el-lavande);
}

/* Le prix, en or : c'est l'information qu'on cherche sur la tuile, et l'or
   est la couleur de marque — on ne la dépense que là. */
.card-subtitle {
  color: var(--el-or) !important;
  font-size: 1.35rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.card-title {
  color: var(--el-etoile);
  font-size: 1.15rem;
  font-weight: 600;
}

/* LE BOUTON TOMBE EN BAS, quelle que soit la longueur de la description :
   sans ça, un paquet plus bavard décale son bouton et la rangée perd son
   alignement, ce qui suffit à rendre la comparaison pénible. */
.card.h-100 .card-body {
  display: flex;
  flex-direction: column;
}

.card.h-100 .card-body .btn {
  margin-top: auto;
  align-self: flex-start;
}

/* ── Le texte des pages ──────────────────────────────────────────────── */

/* LES COMMANDES SONT PARTOUT dans le wiki : soixante-seize lignes. Le rose
   par défaut de Bootstrap tirait l'œil sur chacune d'elles ; le bleu ciel
   les signale sans crier. */
code {
  color: var(--el-ciel);
  background: rgba(18, 23, 50, .8);
  border: 1px solid var(--el-nuit);
  border-radius: 5px;
  padding: .1em .4em;
  font-size: .88em;
}

.lead {
  color: var(--el-etoile);
  font-size: 1.12rem;
}

/* ── Une page de contenu ─────────────────────────────────────────────── */

/* LA LARGEUR DE LECTURE PORTE SUR LE TEXTE, PAS SUR LA PAGE. Au-delà d'une
   soixantaine de signes par ligne, l'œil perd le début de la suivante, donc
   les paragraphes et les titres sont bornés.

   MAIS BORNER LE CONTENEUR ÉTRANGLAIT TOUT LE RESTE : le calendrier de la
   semaine se retrouvait avec sept colonnes de cent pixels sur un écran de
   1440. Tableaux, grilles et rangées reprennent donc toute la largeur. */
.page-article > p,
.page-article > ul,
.page-article > ol,
.page-article > h1,
.page-article > h2,
.page-article > h3,
.page-article > .lead,
.page-article > .alert,
.page-chapeau {
  max-width: 46rem;
}

.page-article h1 {
  margin-bottom: .4rem;
}

/* Le chapeau, sous le titre : il redit en une phrase de quoi parle la page. */
.page-chapeau {
  color: var(--el-brume);
  font-size: 1.05rem;
  font-style: italic;
  margin-bottom: 2.2rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--el-nuit);
}

.page-article > p,
.page-article > ul,
.page-article > ol {
  margin-bottom: 1.15rem;
}

.content h2,
.content h3 {
  margin-top: 2rem;
}

/* Le lien de sommaire d'une liste, plus discret que le bleu par défaut. */
.list-group-item a {
  color: var(--el-ciel);
  font-weight: 500;
}

/* ── Alertes ─────────────────────────────────────────────────────────── */

.alert {
  border-radius: 11px;
  border: 1px solid var(--el-nuit);
  background-color: var(--el-carte);
  color: var(--el-etoile);
}

.alert-success { border-left: 3px solid #8fe0a3; }
.alert-danger  { border-left: 3px solid #e87c7c; }
.alert-warning { border-left: 3px solid var(--el-or); }
.alert-info    { border-left: 3px solid var(--el-ciel); }

/* ── Tableaux ────────────────────────────────────────────────────────── */

.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--el-etoile);
  --bs-table-border-color: var(--el-nuit);
  --bs-table-striped-bg: rgba(18, 23, 50, .55);
  --bs-table-striped-color: var(--el-etoile);
  --bs-table-hover-bg: rgba(195, 180, 242, .08);
  --bs-table-hover-color: var(--el-etoile);
}

/* ── La semaine, une colonne par jour ────────────────────────────────── */

/* UNE SEMAINE SE LIT SUR UNE SEULE RANGEE. En laissant la grille se
   débrouiller, elle tombait en cinq colonnes plus deux : le lecteur ne voit
   plus une semaine mais deux paquets. Dès qu'il y a la place, on impose donc
   les sept jours côte à côte, et on ne laisse la grille respirer qu'en
   dessous, où sept colonnes seraient illisibles de toute façon. */
.semaine {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 1.6rem 0 2rem;
}

/* SEPT COLONNES SEULEMENT QUAND ELLES RESTENT LISIBLES. Le seuil est monté
   de 1120 à 1200 px après mesure : en dessous, chaque jour tombait sous les
   cent cinquante pixels et le nom de l'évènement se cassait en trois. */
@media (min-width: 1200px) {
  .semaine {
    grid-template-columns: repeat(7, 1fr);
  }
}

.jour {
  display: flex;
  flex-direction: column;
  padding: 16px 14px;
  background: var(--el-carte);
  border: 1px solid var(--el-nuit);
  border-radius: 13px;
}

.jour p {
  margin: 0;
}

.jour__nom {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--el-brume);
}

/* L'heure est ce qu'on vient chercher : elle prend la taille et l'or. */
.jour__heure {
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--el-or);
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
  margin-bottom: .35rem !important;
}

.jour__event {
  font-weight: 600;
  color: var(--el-ciel);
  line-height: 1.3;
  margin-bottom: .4rem !important;
}

.jour__quoi {
  font-size: .88rem;
  color: var(--el-brume);
  line-height: 1.45;
}

/* La commande se colle en bas, pour que les cases restent alignées entre
   elles quelle que soit la longueur de la description. */
.jour__cmd {
  margin-top: auto !important;
  padding-top: .7rem;
}

.jour__cmd code {
  font-size: .8rem;
}

/* La journée sans rendez-vous s'efface au lieu de crier comme les autres. */
.jour--repos {
  border-style: dashed;
}

.jour--repos .jour__heure {
  color: var(--el-brume);
  font-size: 1.1rem;
}

.jour--repos .jour__event {
  color: var(--el-brume);
}

/* Les colonnes de chiffres s'alignent sur la virgule. */
.table td.text-end,
.table th.text-end { font-variant-numeric: tabular-nums; }

/* ── Pied de page ────────────────────────────────────────────────────── */

footer {
  background: var(--el-fond2) !important;
  border-top: 1px solid var(--el-nuit);
  color: var(--el-brume);
}

footer a { color: var(--el-ciel); }

/* ── Accessibilité ───────────────────────────────────────────────────── */

a:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible,
.form-control:focus-visible {
  outline: 2px solid var(--el-lavande);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   L'ADAPTATION AUX ÉCRANS
   ══════════════════════════════════════════════════════════════════════

   LES TAILLES SUIVENT LA FENÊTRE PLUTÔT QUE DE SAUTER À UN SEUIL. « clamp »
   donne un minimum, une valeur qui glisse, et un maximum : le texte grandit
   continûment quand on étire la fenêtre, au lieu de changer d'un coup à une
   largeur précise. Les paliers ci-dessous ne servent qu'à ce que « clamp »
   ne sait pas faire, comme replier une rangée ou réduire une marge. */

h1, .h1 {
  font-size: clamp(1.9rem, 1.35rem + 2.2vw, 2.8rem);
}

h2, .h2 {
  font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.85rem);
}

.page-article h2,
.content h2 {
  margin-top: 2.6rem;
}

.lead {
  font-size: clamp(1rem, .96rem + .3vw, 1.14rem);
}

/* ── Jusqu'à la tablette ─────────────────────────────────────────────── */

@media (max-width: 767.98px) {
  /* LA BANNIÈRE MANGEAIT L'ÉCRAN. Avec ses marges de bureau, elle faisait
     628 px de haut sur un téléphone de 780 : le visiteur arrivait sur une
     image et devait faire défiler pour découvrir qu'il y a un site. */
  .home-banniere,
  .home-banniere--photo {
    padding: 48px 18px 44px;
  }

  .home-banniere .home-logo {
    width: 92px;
    height: 92px;
    margin-bottom: 10px;
  }

  .home-accroche {
    font-size: .96rem;
  }

  /* L'adresse et son bouton prennent toute la largeur : on vise avec un
     pouce, pas avec une souris. */
  .accueil-ip {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    gap: 10px;
    padding: 16px;
  }

  .accueil-ip code {
    display: block;
    font-size: 1.05rem;
    word-break: break-all;
  }

  .accueil-ip .btn {
    width: 100%;
  }

  .accueil-section {
    margin-bottom: 3rem;
  }

  .accueil-tuile,
  .accueil-appel,
  .card-body,
  .jour {
    padding: 16px;
  }

  /* Une carte de la boutique n'a pas besoin d'une image aussi haute que sur
     un écran large : elle mangeait toute la hauteur du téléphone. */
  .card-img-top {
    max-height: 46vw;
    object-fit: cover;
  }

  /* LE TABLEAU QUI DÉFILE DOIT SE VOIR. Sans repère, on croit que la
     colonne de droite a disparu ; ce dégradé sur le bord annonce qu'il y a
     quelque chose au-delà. */
  .table-responsive {
    position: relative;
    -webkit-overflow-scrolling: touch;
  }

  .table-responsive::after {
    content: "";
    position: sticky;
    right: 0;
    top: 0;
    float: right;
    width: 26px;
    height: 100%;
    margin-left: -26px;
    background: linear-gradient(90deg, transparent, var(--el-fond));
    pointer-events: none;
  }

  .table th,
  .table td {
    padding: .55rem .6rem;
    font-size: .92rem;
  }
}

/* ── Les très petits téléphones ──────────────────────────────────────── */

@media (max-width: 400px) {
  .navbar .navbar-brand {
    font-size: 1rem;
    letter-spacing: .05em;
  }

  .navbar .navbar-brand img {
    width: 28px;
    height: 28px;
  }

  .prochain {
    flex-direction: column;
    gap: 4px;
  }
}

/* ── Les très grands écrans ──────────────────────────────────────────── */

@media (min-width: 1600px) {
  /* SANS PLAFOND, LA BANNIÈRE DEVENAIT UN BANDEAU VIDE. Sur un écran très
     large, ses marges proportionnelles l'étiraient bien au-delà de ce que
     l'image a à montrer. */
  .home-banniere {
    padding: 118px 20px 104px;
  }

  .home-banniere .home-logo {
    width: 168px;
    height: 168px;
  }
}