/* Personnalisation propre à ce client. Le moteur (core/) ne dépend
   jamais de ce fichier : chaque site peut avoir le sien. */

:root {
  --brand-primary: #1c5d8c;
  --brand-dark: #123b59;
  --brand-orange: #e79a5f;
  --brand-vivid-blue: #1a8fd1; /* bleu vif du logo Eclore */
  --text-body: #26272b;
  --text-heading: #123b59; /* même valeur que --brand-dark à l'origine, mais réglable séparément */
  --text-link: #0d6efd; /* bleu par défaut de Bootstrap, inchangé tant que non personnalisé */
  --link-hover: #e79a5f; /* même valeur que --brand-orange à l'origine, réglable séparément */
  --btn-hover: #123b59; /* même valeur que --brand-dark à l'origine, réglable séparément */
  --footer-text: #f1ede4;
}

/* Couleur des liens de contenu (texte tapé dans l'éditeur) et couleur de
   survol pour tous les liens "texte" du site (contenu, footer, bande de
   copyright) : cohérence visuelle d'un bout à l'autre. */
a {
  color: var(--text-link);
}

a:hover {
  color: var(--link-hover);
}

/* Titres de page. --font-heading-h1/-h2 ne sont définis (dans
   theme/header.php) que si une police autre que celle du système a été
   choisie dans Thème — réglables indépendamment l'un de l'autre. */
h1, h2 {
  color: var(--text-heading);
}

/* Blocs "Texte" d'une page (voir render_blocks() dans inc/helpers.php) :
   justifié par défaut, sauf paragraphe avec un alignement explicite posé
   depuis l'éditeur (style="text-align:...", toujours prioritaire sur
   cette classe). */
.rich-text {
  text-align: justify;
}

/* Boutons "Ouvrir dans Google Maps" / "Ouvrir Waze" sous un bloc "Plan
   d'accès" (voir render_blocks() dans inc/helpers.php) : couleurs de
   marque de chaque appli, pour rester reconnaissables. */
.map-action-buttons {
  display: flex;
  flex-wrap: wrap;
}

.map-action-btn {
  flex: 1 1 200px;
  padding: 0.9rem 1rem;
  text-align: center;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

.map-action-btn:hover {
  color: #fff;
}

.map-action-google {
  background-color: #1a73e8;
}

.map-action-google:hover {
  background-color: #1558b0;
}

.map-action-waze {
  background-color: #1e8449;
}

.map-action-waze:hover {
  background-color: #166339;
}

h1 {
  font-family: var(--font-heading-h1, inherit);
  font-weight: var(--fw-h1, bold);
  font-size: calc(2.5rem * var(--h1-scale, 1));
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--brand-orange);
}

h2 {
  font-family: var(--font-heading-h2, inherit);
  font-weight: var(--fw-h2, bold);
  font-size: calc(2rem * var(--h2-scale, 1));
}

/* Titre optionnel au-dessus d'un bloc (n'importe quel type : texte, image,
   galerie...) : un H2 comme les autres (même bleu, hérité de la règle
   h1, h2 ci-dessus — donc déjà un peu plus petit qu'un H1), avec le même
   filet orange que les H1, pour une cohérence visuelle sur toute la page. */
.block-heading {
  position: relative;
  padding-bottom: 0.6rem;
  margin-bottom: 0.9rem;
}
.block-heading::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 48px;
  height: 3px;
  background: var(--brand-orange);
}

/* Titre centré, avec son filet orange centré aussi (carte de service) */
.block-heading-center {
  text-align: center;
}
.block-heading-center::after {
  left: 50%;
  transform: translateX(-50%);
}

/* Titre "fantôme" (vide) : réserve juste la même hauteur qu'un vrai titre
   pour aligner les colonnes d'une même rangée entre elles, sans afficher
   le filet orange d'un titre qui n'existe pas réellement. */
.block-heading-spacer::after {
  display: none;
}

/* Fond repris tel quel du site précédent : dégradé radial blanc -> bleu
   clair, avec l'image de rayons en haut à gauche par-dessus. Les préfixes
   -moz-/-webkit- du radial-gradient ne sont plus nécessaires sur les
   navigateurs actuels (tous supportent la syntaxe standard depuis
   longtemps) : la version standard suffit, je la garde donc seule.
   --bg-image et les deux couleurs du dégradé sont personnalisables depuis
   Thème (wikiwi/theme.php) ; var(--bg-image, ...) retombe sur l'image
   d'origine tant que rien n'a été changé. */
:root {
  --bg-gradient-start: #ffffff;
  --bg-gradient-end: #c2ebff;
}

body {
  color: var(--text-body);
  font-family: var(--font-body, var(--bs-body-font-family));
  font-weight: var(--fw-body, normal);
  background-image: var(--bg-image, url("logo-bg.png")), radial-gradient(ellipse at center, var(--bg-gradient-start) 50%, var(--bg-gradient-end) 100%);
  background-repeat: no-repeat, no-repeat;
  background-position: left top, center center;
  background-size: auto, cover;
  background-attachment: scroll, fixed;
  min-height: 100vh;
}

/* Dégradé de fond linéaire (haut -> bas), alternative au dégradé radial
   par défaut ci-dessus — activée en ajoutant la classe .bg-gradient-linear
   au <body> (voir theme/header.php), réglable depuis Thème. */
body.bg-gradient-linear {
  background-image: var(--bg-image, url("logo-bg.png")), linear-gradient(180deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%);
}

.site-header {
  background: transparent;
}

.site-logo {
  height: 180px;
  max-width: 90vw;
  object-fit: contain;
}

@media (max-width: 575px) {
  .site-logo {
    height: 120px;
  }
}

/* Barre de menu centrée, large mais pas pleine largeur, en pilule bien
   arrondie, fond bleu vif (celui du logo) légèrement transparent. */
.site-nav {
  text-align: center;
}

.site-nav .nav {
  display: inline-flex;
  width: 83.3333%;
  background: color-mix(in srgb, var(--brand-vivid-blue) 82%, transparent);
  border: 1px solid var(--brand-primary);
  border-radius: 50px;
  padding: 0 1rem;
}

.site-nav .nav-link {
  color: #fff;
  font-weight: 500;
  border-radius: 30px;
  transition: background-color 0.15s;
}

/* Page active : blanc léger (transparence) sur le fond bleu. */
.site-nav .nav-link.active {
  background-color: rgba(255, 255, 255, 0.3);
}

/* Survol d'une rubrique : bleu plus foncé que le fond de la barre. */
.site-nav .nav-link:hover {
  background-color: var(--brand-dark);
}

/* Sous-menus ouverts au survol de la souris plutôt qu'au clic
   (header.php n'attache plus data-bs-toggle="dropdown" : c'est cette
   règle CSS, et non le JS de Bootstrap, qui pilote l'ouverture). */
@media (min-width: 992px) {
  .site-header .nav-item.dropdown {
    position: relative;
  }
  .site-header .nav-item.dropdown .dropdown-menu {
    display: block;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
    margin-top: 0;
  }
  .site-header .nav-item.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}
/* En dessous de 992px (mobile/tablette), pas de survol possible :
   on revient à un menu déroulant classique au clic. */
@media (max-width: 991.98px) {
  .site-header .nav-item.dropdown .dropdown-menu {
    position: static;
  }
}

/* Sous-rubriques du menu (le menu déroulant sous "A propos", "Les
   services"...) : orange léger au survol, comme partout ailleurs sur le
   site — pas le gris par défaut de Bootstrap. */
.site-header .dropdown-item:hover,
.site-header .dropdown-item:focus {
  background-color: color-mix(in srgb, var(--brand-orange) 35%, transparent);
  color: inherit;
}

/* Menu mobile (< 992px) : bouton "Menu" replié + liste verticale à
   déplier, plutôt que les pastilles du menu desktop empilées sur plusieurs
   lignes (illisible en dessous d'un certain nombre de rubriques). */
.mobile-nav-toggle,
.mobile-nav-link,
.mobile-nav-expand,
.mobile-nav-sublink {
  -webkit-tap-highlight-color: transparent;
}

.mobile-nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: color-mix(in srgb, var(--brand-vivid-blue) 14%, transparent);
  border: 1px solid var(--brand-primary);
  color: var(--brand-dark);
  border-radius: 8px;
  padding: 0.5rem 1rem;
  font-weight: 500;
}

.mobile-nav-toggle:hover {
  background: color-mix(in srgb, var(--brand-vivid-blue) 24%, transparent);
}

.mobile-nav-toggle .bi-list {
  font-size: 1.2rem;
}

#mobileNavPanel {
  background: var(--brand-vivid-blue);
  margin-top: 0.75rem;
}

.mobile-nav-item {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

/* Survol/focus sur toute la ligne d'un coup (libellé ET bouton +/-
   ensemble) : un seul bleu, jamais deux teintes différentes cote à cote. */
.mobile-nav-item:hover,
.mobile-nav-item:focus-within {
  background: rgba(255, 255, 255, 0.1);
}

.mobile-nav-item:first-child {
  border-top: none;
}

.mobile-nav-row {
  display: flex;
  align-items: stretch;
}

.mobile-nav-link {
  flex: 1 1 auto;
  display: block;
  color: #fff;
  padding: 0.85rem 1rem;
  font-weight: 500;
  text-decoration: none;
}

button.mobile-nav-link {
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
}

.mobile-nav-expand:focus,
.mobile-nav-toggle:focus,
button.mobile-nav-link:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
}

.mobile-nav-expand {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  margin: 0.5rem 0.75rem 0.5rem 0;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: #fff;
}

.mobile-nav-expand .icon-minus {
  display: none;
}

.mobile-nav-expand[aria-expanded="true"] .icon-plus {
  display: none;
}

.mobile-nav-expand[aria-expanded="true"] .icon-minus {
  display: inline;
}

.mobile-nav-submenu {
  background: rgba(0, 0, 0, 0.15);
}

.mobile-nav-sublink {
  display: block;
  color: #fff;
  padding: 0.65rem 1rem 0.65rem 2rem;
  text-decoration: none;
}

.mobile-nav-sublink:hover,
.mobile-nav-sublink:focus {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

.mobile-nav-item.mobile-nav-item:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.btn-primary {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}

.btn-primary:hover {
  background-color: var(--btn-hover);
  border-color: var(--btn-hover);
}

/* Barre d'administration : même famille visuelle que le site, mais
   clairement distincte pour qu'un admin ne la confonde jamais avec
   le contenu public. */
.admin-bar {
  background: #2c2c2c;
}

.admin-bar .nav-link {
  color: #f1f1f1;
  font-size: 0.85rem;
}

.admin-bar .nav-link:hover,
.admin-bar .nav-link.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
}

/* Graphique en barres "maison" pour les statistiques de visite (pas de
   librairie JS de graphiques — juste des divs dont la hauteur reflète la
   valeur, cohérent avec le reste du projet : sans dépendance externe). */
.stats-chart {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 140px;
  margin-top: 1.25rem; /* place pour les chiffres au-dessus des barres les plus hautes */
}

.stats-bar-col {
  flex: 1 1 0;
  height: 100%;
  display: flex;
  align-items: flex-end;
}

.stats-bar {
  position: relative;
  width: 100%;
  min-height: 2px;
  background: var(--brand-primary);
  border-radius: 2px 2px 0 0;
  transition: background 0.15s;
}

.stats-bar-col:hover .stats-bar {
  background: var(--brand-orange);
}

/* Chiffre affiché en permanence au-dessus de chaque barre — plus besoin
   de survoler et d'attendre l'infobulle pour lire la valeur. */
.stats-bar-value {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 2px;
  font-size: 0.65rem;
  color: var(--brand-dark);
  white-space: nowrap;
}

/* Camembert "maison" (dégradé conique CSS, pas de librairie JS) pour la
   répartition des visiteurs par source. */
.stats-pie {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  flex-shrink: 0;
}

.stats-pie-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-right: 0.4rem;
}

.rubrique-row {
  cursor: grab;
}

.rubrique-row-child {
  background: #f5f4f1;
}

.rubrique-child-arrow {
  margin-right: 0.25rem;
}

.rubrique-row.sortable-ghost {
  opacity: 0.4;
}

/* Aperçu photo en direct dans les formulaires d'admin (galerie + blocs image) */
.photo-thumb {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border, #ddd);
  background: #f2f2f2;
  display: block;
}

.photo-thumb-empty {
  background: repeating-linear-gradient(45deg, #f2f2f2, #f2f2f2 6px, #e8e8e8 6px, #e8e8e8 12px);
}

/* Bibliothèque de photos (réutiliser, pivoter, renommer ou supprimer une
   photo déjà envoyée) */
.media-library-item {
  width: 110px;
  text-align: center;
}

.media-library-thumb-wrap {
  position: relative;
  cursor: pointer;
}

.media-library-thumb {
  width: 100%;
  height: 90px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border, #ddd);
  display: block;
}

/* Survol : superpose nom + actions sur la photo (plutôt qu'une simple
   infobulle native, lente à apparaître et peu visible) */
.media-library-overlay {
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.25rem;
  opacity: 0;
  transition: opacity 0.15s;
}

.media-library-thumb-wrap:hover .media-library-overlay {
  opacity: 1;
}

.media-library-overlay-name {
  font-size: 0.7rem;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.media-library-badge {
  display: block;
  font-size: 0.7rem;
  margin-top: 0.25rem;
}

.media-library-badge-used {
  color: #6c757d;
}

.media-library-badge-unused {
  color: var(--brand-primary);
  font-weight: 600;
}

.media-library-actions {
  display: flex;
  justify-content: center;
  gap: 0.25rem;
  margin-top: 0.25rem;
}

.media-library-actions .btn {
  padding: 0.1rem 0.35rem;
}

/* Dossiers dans la bibliothèque */
.media-library-folder-icon {
  width: 100%;
  height: 90px;
  border-radius: 6px;
  border: 1px solid var(--border, #ddd);
  background: #f8f6f1;
  color: var(--brand-primary);
  font-size: 2.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Photo déjà utilisée à cet emplacement précis (avant même de choisir) */
.media-library-item-current .media-library-thumb {
  border: 2px solid var(--brand-primary);
}

.media-library-current-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  color: var(--brand-primary);
  background: #fff;
  border-radius: 50%;
  font-size: 1rem;
  line-height: 1;
}

#mediaLibraryBreadcrumb .media-library-crumb {
  text-decoration: none;
}

#mediaLibraryBreadcrumb .media-library-crumb:last-child {
  font-weight: 600;
  pointer-events: none;
  color: inherit;
}

/* Le bouton "Télécharger" + les boutons bibliothèque/pivoter à côté
   peuvent déborder d'une colonne étroite : autorise le retour à la
   ligne pour ce groupe précis plutôt que d'agrandir tous les d-flex. */
div.d-flex.gap-2:has(.library-btn) {
  flex-wrap: wrap;
}

/* Poignée de redimensionnement des colonnes (glisser pour agrandir/réduire).
   Visible en permanence (badge rond avec icône), pas seulement au survol,
   pour que la fonction se voie sans qu'il faille la découvrir par hasard. */
.col-block-inner {
  position: relative;
}

.col-resize-handle {
  position: absolute;
  top: 50%;
  right: -12px;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: col-resize;
  z-index: 5;
  touch-action: none;
  background: var(--brand-primary);
  color: #fff;
  font-size: 12px;
  opacity: 0.85;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  transition: opacity 0.15s, transform 0.15s;
}

.col-resize-handle:hover,
.col-resize-handle:active {
  opacity: 1;
  transform: translateY(-50%) scale(1.15);
}

/* Poignée de déplacement des colonnes (glisser pour réordonner/inverser) */
.col-drag-handle {
  cursor: grab;
  color: #9a938a;
  padding: 0 2px;
}

.col-drag-handle:hover {
  color: var(--brand-primary);
}

.col-block-ghost {
  opacity: 0.35;
}

/* Poignée de déplacement des rangées (glisser pour réordonner la page) */
.row-drag-handle {
  cursor: grab;
  color: #9a938a;
  padding: 0 2px;
}

.row-drag-handle:hover {
  color: var(--brand-primary);
}

/* Poignée de déplacement des photos (galerie de page + galeries de bloc) */
.photo-drag-handle {
  cursor: grab;
  color: #9a938a;
  padding: 0 2px;
}

.photo-drag-handle:hover {
  color: var(--brand-primary);
}

.photo-row.sortable-ghost,
.gallery-editor-row.sortable-ghost {
  opacity: 0.35;
}

.url-toggle-group .btn-link {
  text-decoration: none;
  font-size: 0.8rem;
}

/* Popup de cadrage : on clique sur la photo pour placer le point à
   toujours garder visible. */
.cadrage-stage {
  position: relative;
  width: 100%;
  cursor: crosshair;
  border-radius: 6px;
  overflow: hidden;
  line-height: 0;
}

#cadrageModal .modal-body {
  max-height: 75vh;
  overflow-y: auto;
}

.cadrage-stage img {
  width: 100%;
  height: auto;
  display: block;
}

.cadrage-marker {
  position: absolute;
  width: 24px;
  height: 24px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--brand-primary), 0 1px 5px rgba(0, 0, 0, 0.5);
  transform: translate(-50%, -50%);
  pointer-events: none;
  left: 50%;
  top: 50%;
}

.gallery-carousel .gallery-img {
  width: 100%;
  height: var(--gallery-height, 500px);
  object-fit: cover;
}

/* Photo marquée "panoramique" : hauteur réduite pour ne pas la recadrer
   trop serré verticalement — proportionnelle à la hauteur choisie dans
   l'admin (jamais une valeur fixe : sinon changer la hauteur du bandeau
   n'a aucun effet visible tant que les photos sont marquées
   panoramiques, ce qui a été un vrai bug). Règle dédiée pour le bandeau
   d'accueil (.home-slide) car elle a besoin d'une spécificité CSS plus
   forte pour l'emporter sur la règle de hauteur normale de ce contexte. */
.gallery-carousel .gallery-img.is-panoramic {
  height: calc(var(--gallery-height, 500px) * 0.55);
}
.home-slide .gallery-carousel .gallery-img.is-panoramic {
  height: calc(var(--gallery-height, 460px) * 0.55);
}

.fb-embed-wrap {
  max-width: 500px;
}

.consent-embed {
  background: #f4f2ec;
  border: 1px dashed #cfc9ba;
}

.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2000;
  background: var(--brand-dark);
  color: #fff;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.25);
}

.cookie-banner a {
  color: #fff;
  text-decoration: underline;
}

.cookie-banner a:hover {
  color: var(--link-hover);
}

.person-card .person-photo {
  width: 160px;
  height: 160px;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* 2 fiches Personne par ligne sur téléphone (col-6, voir render_blocks()) :
   la photo de 160px est réduite pour ne pas déborder d'une demi-largeur
   d'écran. */
@media (max-width: 767.98px) {
  .person-card .person-photo {
    width: 110px;
    height: 110px;
  }
}

/* Carte de service (icône + résumé + bouton "En savoir plus") */
.service-card {
  padding: 0.5rem 1rem 1rem;
}

.service-card-icon {
  font-size: 3.5rem;
  line-height: 1;
  color: var(--brand-primary);
  margin-bottom: 0.75rem;
  text-align: center;
}

/* Icône personnalisée (image envoyée par l'admin) plutôt qu'une icône de
   police : même empreinte visuelle (hauteur proche de la taille de police
   ci-dessus) pour que les deux styles s'alignent si on les mélange entre
   cartes. */
.service-card-icon-image img {
  height: 64px;
  width: auto;
  max-width: 100%;
}

.service-card-summary {
  color: #6c757d;
  margin-bottom: 1rem;
}

.contact-info-block {
  background: #f8f6f1;
  border-radius: 8px;
  padding: 1.5rem;
}

.contact-info-block a {
  color: inherit;
}

#mapPickerMap {
  height: 420px;
  border-radius: 6px;
}

.gallery-carousel .carousel-item {
  position: relative;
}

.gallery-carousel .gallery-credit {
  position: absolute;
  left: 12px;
  bottom: 8px;
  color: #fff;
  font-size: 0.75rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.gallery-carousel .carousel-indicators [data-bs-target] {
  background-color: var(--brand-primary);
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

/* Bandeau photo plein largeur (position choisie dans l'admin), toujours
   sur toute la largeur de la page. Hauteur personnalisable par page ;
   460px par défaut si rien n'est précisé. */
.home-slide .gallery-carousel .gallery-img {
  height: var(--gallery-height, 460px);
}
@media (max-width: 767px) {
  .home-slide .gallery-carousel .gallery-img {
    height: min(var(--gallery-height, 460px), 260px);
  }
}

/* Footer 3 colonnes : accroche accueil / rappel des rubriques / contact */
.site-footer {
  background: var(--brand-dark);
  color: var(--footer-text);
}

.footer-heading {
  color: var(--brand-orange);
  font-size: 1.2rem;
  font-weight: 500;
  padding-bottom: 0.6rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.site-footer p {
  color: var(--footer-text);
}

/* Tous les liens de la colonne "rubriques" du footer (rubriques
   principales et sous-catégories dans le sous-menu) : au survol, c'est le
   fond qui devient orange comme un vrai bouton de menu, pas juste la
   couleur du texte. */
.footer-link {
  display: inline-block;
  color: var(--footer-text);
  text-decoration: none;
  padding: 0.15rem 0.5rem;
  margin: 0 -0.5rem;
  border-radius: 4px;
}

.footer-link:hover {
  background: var(--brand-orange);
  color: var(--brand-dark);
  text-decoration: none;
}

/* Sous-catégories d'un parent (A propos, Les services...) dans la colonne
   "rubriques" du footer : au survol sur ordinateur, la petite liste
   apparaît à côté ; sur mobile/tablette (pas de survol), un clic
   l'ouvre/la ferme à la place (voir le script dans footer.php). */
.footer-link-parent {
  position: relative;
  display: inline-block;
  cursor: pointer;
  padding: 0.15rem 0.5rem;
  margin: 0 -0.5rem;
  border-radius: 4px;
}

.footer-link-parent:hover {
  background: var(--brand-orange);
  color: var(--brand-dark);
}

.footer-submenu {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
  min-width: 200px;
  margin-left: 0.5rem;
  padding: 0.75rem 1rem;
  background: var(--brand-primary);
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  z-index: 20;
}

.footer-submenu li + li {
  margin-top: 0.15rem;
}

.footer-submenu .footer-link {
  display: block;
}

@media (min-width: 992px) {
  .footer-nav-item:hover .footer-submenu {
    display: block;
  }
}

@media (max-width: 991.98px) {
  .footer-submenu {
    position: static;
    margin-left: 0;
    padding: 0.25rem 0 0 1rem;
    background: transparent;
    box-shadow: none;
  }
  .footer-nav-item.open .footer-submenu {
    display: block;
  }
}

.site-footer .btn-light {
  color: var(--brand-dark);
  font-weight: 500;
}

.site-footer-bottom {
  background: transparent;
  color: #7a766c;
}

.site-footer-bottom a,
.site-footer-bottom .btn-link {
  color: #7a766c;
  text-decoration: underline;
}

.site-footer-bottom a:hover,
.site-footer-bottom .btn-link:hover {
  color: var(--link-hover);
}

/* Galerie d'articles (bloc "Galerie d'articles") : grille de photos
   carrées, 4/3/2 par rangée selon la taille d'écran (voir row-cols-* sur
   le conteneur, côté PHP). */
.article-card {
  height: 100%;
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  padding: 0.75rem;
  text-align: center;
}

.article-card-trigger {
  cursor: pointer;
}

.article-photo-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 6px;
  background: #eee;
}

.article-photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.2s ease;
}

.article-card-trigger:hover .article-photo-wrap img,
.article-card-trigger:focus-visible .article-photo-wrap img {
  transform: scale(1.05);
}

.article-card-trigger:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

/* Copyright automatique (nom du site, jamais saisi par l'admin) en
   surimpression sur chaque photo. */
.article-copyright {
  position: absolute;
  bottom: 6px;
  right: 8px;
  color: #fff;
  font-size: 0.7rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  pointer-events: none;
}

.article-titre {
  font-size: 1rem;
  font-weight: 600;
  margin-top: 0.6rem;
  margin-bottom: 0.2rem;
  color: var(--text-heading);
}

/* Tronqué à 3 lignes quelle que soit la longueur du texte : une rangée
   de la grille ne peut jamais être déformée par une description trop
   longue (les cartes gardent toutes la même hauteur). */
.article-texte {
  font-size: 0.875rem;
  color: var(--text-body);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 0;
}

#articleModal .modal-content {
  overflow: hidden;
  border-bottom: 10px solid var(--brand-dark);
}

.article-modal-photo {
  display: block;
  max-width: 100%;
  max-height: 70vh;
  margin: 0 auto;
}

.article-modal-close {
  background-color: rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  z-index: 2;
}