/**
 * Composants partages — Gouvernorat de Kinshasa
 *
 * Briques reutilisees par les pages entierement decrites dans le theme
 * (accueil, a-propos, …) : surtitres, boutons, liens « suite », entetes de
 * section et blocs. Elles etaient nees avec la page d'accueil ; les avoir
 * isolees ici evite de les recopier a chaque nouvelle page.
 *
 * Toutes les couleurs et les polices viennent des variables de la charte
 * definies dans style.css.
 */

/* ==========================================================================
   Éléments communs
   ========================================================================== */

.surtitre {
  font-family: var(--fontFamily-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* Variante assombrie : le surtitre est du petit texte en capitales, il lui
     faut 4,5:1 sur le blanc des sections claires. */
  color: var(--secondaryColorDark, #00719A);
  margin: 0 0 0.4rem;
}

.surtitre--clair {
  color: rgba(255, 255, 255, 0.75);
}

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--fontFamily-body);
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 0.95rem 1.7rem;
  border-radius: 6px;
  border: 2px solid transparent;
  text-decoration: none;
  transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

.bouton--principal {
  background-color: var(--accentColor);
  color: var(--whiteColor);
}

.bouton--principal:hover,
.bouton--principal:focus {
  background-color: var(--darkRed);
  color: var(--whiteColor);
}

/* Bouton secondaire sur fond sombre : le contour blanc garantit le contraste,
   là où le cyan de la charte ne tient que 3,4:1. */
.bouton--fantome {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.7);
  color: var(--whiteColor);
}

.bouton--fantome:hover,
.bouton--fantome:focus {
  background-color: var(--whiteColor);
  border-color: var(--whiteColor);
  color: var(--mainColor);
}

.bouton--clair {
  background-color: var(--whiteColor);
  color: var(--mainColor);
}

.bouton--clair:hover,
.bouton--clair:focus {
  background-color: var(--highlightColor);
  color: var(--mainColor);
}

.lien-suite {
  font-family: var(--fontFamily-body);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--mainColor);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
}

.lien-suite:hover,
.lien-suite:focus {
  color: var(--mainColorDark);
  border-bottom-color: var(--highlightColor);
}

.lien-suite i {
  font-size: 0.8em;
  margin-left: 0.35rem;
}

/* Les messages n'occupent de la place que lorsqu'il y en a. */
.page-messages:not(:has(.messages)) {
  display: none;
}

.page-messages {
  padding-top: 1.5rem;
}

/* ==========================================================================
   Entête de page
   ========================================================================== */

/* Entête sobre, sans photo : sur une page institutionnelle, le titre et le
   chapô doivent être lus d'emblée, sans avoir à lutter contre une image.
   L'identité vient du filet aux couleurs nationales et de la typographie. */
.page-entete {
  background-color: var(--whiteColor);
  border-top: 4px solid var(--mainColor);
  padding: 2.25rem 0 2.5rem;
}

/* Filet tricolore : le même repère visuel que le blason de la ville. */
.page-entete__filet {
  display: flex;
  width: 84px;
  height: 4px;
  border-radius: 2px;
  overflow: hidden;
  margin: 0 0 1.5rem;
}

.page-entete__filet span {
  flex: 1;
}

.page-entete__filet span:nth-child(1) { background-color: var(--secondaryColor); }
.page-entete__filet span:nth-child(2) { background-color: var(--highlightColor); }
.page-entete__filet span:nth-child(3) { background-color: var(--accentColor); }

.page-entete__contenu {
  max-width: 66ch;
}

.page-entete__titre {
  font-family: var(--fontFamily-heading);
  font-size: clamp(1.85rem, 4.4vw, 2.9rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--mainColor);
  margin: 0 0 1rem;
  text-wrap: balance;
}

.page-entete__accroche {
  font-size: clamp(1rem, 1.5vw, 1.1rem);
  line-height: 1.75;
  color: var(--paragraphColor);
  margin: 0;
}

/* Fil d'Ariane de l'entête : même balisage que celui de Drupal, discret. */
.page-entete .breadcrumb {
  background: none;
  padding: 0;
  margin: 0 0 1.1rem;
  font-size: 0.88rem;
}

.page-entete .breadcrumb a {
  color: var(--paragraphColor);
  text-decoration: none;
}

.page-entete .breadcrumb a:hover,
.page-entete .breadcrumb a:focus-visible {
  color: var(--mainColor);
  text-decoration: underline;
}

.page-entete .breadcrumb-item.active {
  color: var(--blackColor);
}

@media (max-width: 991.98px) {
  .page-entete {
    padding: 1.75rem 0 2rem;
  }
}

/* ==========================================================================
   Blocs de contenu (actualités, galerie)
   ========================================================================== */

.bloc {
  padding: 4.5rem 0;
}

.bloc--clair {
  background-color: #f6f8fc;
}

.bloc__entete {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 2.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #dde3ec;
}

.bloc__titre {
  font-family: var(--fontFamily-heading);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  color: var(--mainColor);
  margin: 0;
  text-wrap: balance;
}

/* ==========================================================================
   Appel final
   ========================================================================== */

.page-appel {
  background-color: var(--mainColor);
  color: var(--whiteColor);
  padding: 4rem 0;
  text-align: center;
}

.page-appel__titre {
  font-family: var(--fontFamily-heading);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  color: var(--whiteColor);
  margin: 0 0 1rem;
  text-wrap: balance;
}

.page-appel__texte {
  max-width: 68ch;
  margin: 0 auto 2rem;
  font-size: 1.05rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.9);
}

.page-appel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

@media (max-width: 575.98px) {
  .page-appel__actions .bouton {
    width: 100%;
  }
}

/* ==========================================================================
   Pagination
   ==========================================================================
   Le gabarit navigation/pager.html.twig produit les classes de Bootstrap
   (.pagination, .page-item, .page-link), affichées jusqu'ici avec le bleu
   par défaut de Bootstrap. Les règles .pager__item d'actualites.css ne
   visaient que la mini-pagination. Ces règles alignent la pagination
   complète sur les commandes du site : Actualités, Vidéos, Services. */

.pager .pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 2.5rem 0 0;
  padding: 0;
}

.pager .page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 0.9rem;
  border-radius: 8px !important;
  border: 1px solid #d7dfeb;
  background-color: var(--whiteColor);
  color: var(--mainColor);
  font-family: var(--fontFamily-body);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}

.pager .page-link:hover,
.pager .page-link:focus-visible {
  background-color: var(--mainColor);
  border-color: var(--mainColor);
  color: var(--whiteColor);
}

.pager .page-item.active .page-link {
  background-color: var(--mainColor);
  border-color: var(--mainColor);
  color: var(--whiteColor);
}

.pager .page-item.disabled .page-link {
  background-color: transparent;
  border-color: transparent;
  color: var(--paragraphColor);
}

/* Drupal annonce la page courante par un texte masqué visuellement ; il ne
   doit pas élargir le bouton. */
.pager .page-link .visually-hidden {
  position: absolute;
}