/* ============================================================
   Couleurs du GAS — dérivées du logo de l'église.

   Ce fichier se charge EN DERNIER, après toutes les feuilles du
   thème. Il ne remplace rien : il redéfinit les variables que
   Bootstrap et le thème consomment déjà, de sorte qu'une mise à
   jour du thème n'écrase jamais l'identité de l'église.

   Ne pas modifier les fichiers de theme/sass/ ni de theme/assets/css/
   pour changer une couleur — tout se passe ici.

   Palette relevée sur le logo :
     bleu   #263787   les deux anneaux, la carte, la colombe
     rouge  #E6393D   la couronne rayonnante
   ============================================================ */

:root,
[data-bs-theme],
[data-bs-theme="blue-theme"] {
  /* — Identité ------------------------------------------------ */
  --gas-bleu:            #263787;
  --gas-bleu-fonce:      #1b2861;
  --gas-bleu-clair:      #3b50b5;
  --gas-bleu-tres-clair: #e8ebf7;
  --gas-rouge:           #e6393d;
  --gas-rouge-fonce:     #c22a2e;
  --gas-rouge-clair:     #fdecec;

  /* — Ce que Bootstrap consomme ------------------------------- */
  --bs-primary:          #263787;
  --bs-primary-rgb:      38, 55, 135;
  --bs-primary-text-emphasis: #1b2861;
  --bs-primary-bg-subtle:     #e8ebf7;
  --bs-primary-border-subtle: #c3caea;

  /* Le rouge du logo est très proche du rouge d'alerte de
     Bootstrap. Les aligner évite deux rouges qui se ressemblent
     sans se confondre — l'effet le plus salissant qui soit. */
  --bs-danger:           #e6393d;
  --bs-danger-rgb:       230, 57, 61;
  --bs-danger-text-emphasis: #a82327;
  --bs-danger-bg-subtle:     #fdecec;
  --bs-danger-border-subtle: #f6bcbd;

  --bs-link-color:        #263787;
  --bs-link-color-rgb:    38, 55, 135;
  --bs-link-hover-color:  #1b2861;

  --bs-focus-ring-color:  rgba(38, 55, 135, .28);
}

/* — Boutons du thème ------------------------------------------
   Le gabarit utilise « btn-grd-primary », un bouton en dégradé.
   On garde le dégradé, on change ses deux extrémités.            */
.btn-grd-primary,
.btn-primary {
  background: linear-gradient(135deg, #3b50b5 0%, #263787 100%) !important;
  border-color: #263787 !important;
  color: #fff !important;
}

.btn-grd-primary:hover,
.btn-primary:hover,
.btn-grd-primary:focus,
.btn-primary:focus {
  background: linear-gradient(135deg, #263787 0%, #1b2861 100%) !important;
  border-color: #1b2861 !important;
  color: #fff !important;
}

.btn-outline-primary {
  --bs-btn-color: #263787;
  --bs-btn-border-color: #263787;
  --bs-btn-hover-bg: #263787;
  --bs-btn-hover-border-color: #263787;
  --bs-btn-active-bg: #1b2861;
  --bs-btn-active-border-color: #1b2861;
}

/* Le bouton plein des actions destructives — la fenêtre de confirmation
   s'en sert. Redéfinir --bs-danger plus haut ne suffit PAS : Bootstrap
   compile la couleur des boutons pleins en dur et ne lit, à l'exécution,
   que ses variables --bs-btn-*. Sans ces lignes, le bouton sortait dans
   le rose du gabarit à côté du rouge du logo. */
.btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--gas-rouge);
  --bs-btn-border-color: var(--gas-rouge);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--gas-rouge-fonce);
  --bs-btn-hover-border-color: var(--gas-rouge-fonce);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--gas-rouge-fonce);
  --bs-btn-active-border-color: var(--gas-rouge-fonce);
}

/* Les boutons de la feuille de pointage et de l'émargement. */
.btn-outline-danger {
  --bs-btn-color: #c22a2e;
  --bs-btn-border-color: #e6393d;
  --bs-btn-hover-bg: #e6393d;
  --bs-btn-hover-border-color: #e6393d;
}

/* — Bandeau et menu --------------------------------------------
   Bleu dans les DEUX thèmes. C'est le point fixe de l'identité :
   le fond de page change, le bandeau non — comme sur le logo, où
   le bleu se pose sur du blanc.

   Conséquence à ne pas perdre de vue : sur ce bleu, tout ce qui
   s'écrit doit être clair, y compris en thème « light » où le
   gabarit prévoit du texte sombre sur fond blanc. D'où les règles
   de couleur ci-dessous, qui n'ont l'air redondantes qu'en thème
   sombre.                                                        */
.top-header,
.primary-menu,
.top-header .navbar,
.primary-menu .navbar {
  background-color: var(--gas-bleu) !important;
}

.top-header {
  border-bottom-color: var(--gas-bleu-fonce) !important;
}

.top-header .logo-header {
  border-right-color: rgba(255, 255, 255, .18) !important;
  border-left-color: rgba(255, 255, 255, .18) !important;
}

/* Le bouton hamburger, visible en dessous de 1200 px. */
.top-header .btn-toggle a,
.top-header .btn-toggle i {
  color: #fff !important;
}

/* La barre horizontale n'existe qu'à partir de 1366 px — c'est le
   seuil du gabarit. En dessous, le menu est un panneau coulissant
   qui RECOUVRE la barre : y forcer du texte blanc le rendrait
   invisible sur son propre fond clair. */
@media screen and (min-width: 1366px) {
  .primary-menu {
    border-bottom-color: var(--gas-bleu-fonce) !important;
  }

  .primary-menu .navbar .navbar-nav a.nav-link {
    color: rgba(255, 255, 255, .92) !important;
    border-color: rgba(255, 255, 255, .18) !important;
    background-color: transparent;
  }

  .primary-menu .navbar .navbar-nav a.nav-link:hover,
  .primary-menu .navbar .navbar-nav a.nav-link:focus,
  .primary-menu .navbar .navbar-nav a.nav-link:active,
  .primary-menu .navbar .navbar-nav a.nav-link.active,
  .primary-menu .navbar .navbar-nav a.nav-link.active:hover {
    background-color: rgba(255, 255, 255, .14) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, .3) !important;
  }

  /* La barre d'accent sous l'entrée courante, dans le rouge du logo. */
  .primary-menu .navbar .navbar-nav a.nav-link.active {
    box-shadow: inset 0 -3px 0 0 var(--gas-rouge);
  }
}

/* Le panneau coulissant garde le fond du thème : il se superpose au
   bandeau bleu, et ses entrées doivent rester lisibles.

   BORNÉ à moins de 1200 px, et c'est indispensable. Au-dessus,
   Bootstrap neutralise le panneau — « .navbar-expand-xl .offcanvas »
   lui remet un fond transparent pour qu'il redevienne le contenu de
   la barre. Ce sélecteur a exactement la même spécificité que
   « .primary-menu .offcanvas » : une règle non bornée passerait donc
   devant, par simple ordre de cascade, et repeindrait en blanc la
   barre de menu du bureau. */
@media screen and (max-width: 1199.98px) {
  .primary-menu .offcanvas {
    background-color: var(--bs-body-bg) !important;
    color: var(--bs-body-color);
  }
}

/* Le menu déroulant « Administration » est un panneau clair posé sur
   le bandeau : ses entrées suivent le thème, jamais le bandeau. */
.primary-menu .navbar .navbar-nav .dropdown-menu .dropdown-item {
  color: var(--bs-body-color) !important;
}

.primary-menu .navbar .navbar-nav .dropdown-menu .dropdown-item:hover,
.primary-menu .navbar .navbar-nav .dropdown-menu .dropdown-item:focus {
  background-color: var(--gas-bleu-tres-clair) !important;
  color: var(--gas-bleu-fonce) !important;
}

/* — Badges et pastilles ---------------------------------------- */
.badge.bg-primary-subtle {
  background-color: var(--gas-bleu-tres-clair) !important;
  color: var(--gas-bleu) !important;
}

.badge.bg-danger-subtle {
  background-color: var(--gas-rouge-clair) !important;
  color: var(--gas-rouge-fonce) !important;
}

.text-primary { color: var(--gas-bleu) !important; }
.text-danger  { color: var(--gas-rouge-fonce) !important; }
.bg-primary   { background-color: var(--gas-bleu) !important; }

/* — Formulaires ------------------------------------------------ */
.form-control:focus,
.form-select:focus {
  border-color: var(--gas-bleu-clair);
  box-shadow: 0 0 0 .2rem rgba(38, 55, 135, .18);
}

/* Étoile rouge devant tout champ obligatoire.
   form_row() (bootstrap_5_layout.html.twig) pose déjà class="required"
   sur le <label> — et sur la <legend> d'un groupe de cases à cocher —
   dès que le champ Symfony l'est. Une seule règle CSS suffit donc à
   couvrir tous les formulaires de l'application, présents et à venir,
   sans toucher un seul gabarit de formulaire. */
label.required::after,
legend.required::after {
  content: " *";
  color: var(--gas-rouge-fonce);
  font-weight: 700;
}

.form-check-input:checked {
  background-color: var(--gas-bleu);
  border-color: var(--gas-bleu);
}

.btn-check:checked + .btn-outline-secondary {
  background-color: var(--gas-bleu);
  border-color: var(--gas-bleu);
  color: #fff;
}

/* — Tableaux --------------------------------------------------- */
.table > thead.table-light th {
  background-color: var(--gas-bleu-tres-clair);
  color: var(--gas-bleu-fonce);
  border-bottom-color: var(--gas-bleu-clair);
}

/* — Fil d'Ariane ----------------------------------------------- */
.page-breadcrumb .breadcrumb-title {
  color: var(--gas-bleu);
  border-right-color: var(--gas-bleu-tres-clair);
}

/* — Le logo et le sigle -----------------------------------------
   Deux emplacements, deux fonds, donc deux traitements.

   Le bandeau est bleu dans les deux thèmes : le logo y est blanc et
   le sigle aussi, toujours.

   L'en-tête du panneau coulissant, lui, n'existe qu'en dessous de
   1200 px et prend le fond du THÈME. Un logo blanc y disparaîtrait
   sur fond clair — et un logo bleu marine sur fond nuit. Les deux
   versions sont donc dans le gabarit, et le thème décide laquelle
   se voit. Une image cachée ne coûte qu'un téléchargement de 20 Ko,
   contre une ligne de JavaScript qui devrait tourner à chaque
   bascule.                                                        */
.logo-header .logo-img {
  filter: none;
}

.top-header .logo-name h5 {
  color: #fff !important;
  letter-spacing: .04em;
}

.offcanvas-header .logo-text {
  color: var(--bs-heading-color) !important;
  letter-spacing: .04em;
}

.offcanvas-header .logo-sombre { display: none; }

[data-bs-theme="blue-theme"] .offcanvas-header .logo-clair { display: none; }
[data-bs-theme="blue-theme"] .offcanvas-header .logo-sombre { display: inline-block; }

/* — La pastille d'initiales ------------------------------------
   À la place de la photo du gabarit. Disque blanc sur bandeau
   bleu : le même contraste que le logo juste à côté.
   La taille reprend celle de l'image remplacée — 45 px — pour ne
   pas décaler la hauteur de la barre.                            */
.pastille-initiales {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background-color: #fff;
  color: var(--gas-bleu);
  border: 2px solid rgba(255, 255, 255, .55);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .03em;
  text-transform: uppercase;
  user-select: none;
  transition: box-shadow .15s ease;
}

.pastille-initiales:hover {
  box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .22);
}

/* — Pied de page toujours au bas de l'écran ---------------------
   Le gabarit d'origine positionne .page-footer en « absolute »,
   collé au bas du CONTENU (body), pas de l'écran. Sur une page
   courte (ex. Statistiques sans membre actif), le bandeau
   "Tous droits réservés" se retrouve au milieu de l'écran, avec
   du vide en dessous. En le passant en « fixed », il reste
   toujours plaqué en bas de la fenêtre, quelle que soit la
   hauteur du contenu — et une marge basse sur .main-wrapper
   évite qu'il ne recouvre le bas d'une page longue.              */
.page-footer {
  position: fixed;
}

.main-wrapper {
  padding-bottom: 60px;
}