/**
 * CHARTE GRAPHIQUE OFFICIELLE - MAIRIE DE N'ZÉRÉKORÉ
 * Version 1.0 - Septembre 2026
 * Application au site web institutionnel
 */

/* ═══════════════════════════════════════════════════════════════════
   VARIABLES DE COULEURS - IDENTITÉ OFFICIELLE
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* Couleurs d'identité */
  --nzk-vert-foret: #2e3d37;      /* Principal : en-têtes, boutons, liens, titres */
  --nzk-bleu-nimba: #2C4A6B;      /* Secondaire : rubriques, services */
  --nzk-laterite: #B9542B;        /* Accent : frise, filets, patrimoine */
  --nzk-laterite-fonce: #9A3F1C;  /* Variante foncée pour petits textes */

  /* Textes */
  --nzk-encre: #111111;           /* Corps de texte */
  --nzk-ardoise: #3a3a3a;         /* Dates, légendes, métadonnées */

  /* Fonds */
  --nzk-blanc: #FFFFFF;
  --nzk-brume: #F2F4F6;           /* Sections alternées, encadrés */

  /* Alerte */
  --nzk-rouge-alerte: #A3261D;    /* Messages urgents uniquement */
}

/* ═══════════════════════════════════════════════════════════════════
   TYPOGRAPHIE OFFICIELLE
   ═══════════════════════════════════════════════════════════════════ */

/* Les polices sont chargées par <link> dans base.html.twig : un @import
   placé après une règle CSS est ignoré, et bloque le rendu. */

body {
  font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 17px !important;
  line-height: 1.6 !important;
  color: var(--nzk-encre) !important;
}

/* La couleur n'est plus imposée ici : elle rendait illisible tout titre
   posé sur un fond sombre (hero des pages intérieures). Les titres
   héritent de la couleur de leur contexte, sombre par défaut via body. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: 'Source Serif 4', Georgia, serif !important;
  font-weight: 600 !important;
  overflow-wrap: break-word;
  hyphens: auto;
}

h1, .h1 {
  font-size: clamp(32px, 5vw, 56px) !important;
}

h2, .h2 {
  font-size: 30px !important;
}

h3, .h3 {
  font-size: 22px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   EN-TÊTE DU SITE — FOND BLANC
   La charte fixe une dominante blanche (60 %) et réserve le vert forêt
   aux titres, boutons et liens. Un bandeau plein pleine largeur pèserait
   bien au-delà des 20 % alloués à la couleur.
   ═══════════════════════════════════════════════════════════════════ */

.site-header {
  background: var(--nzk-blanc) !important;
  box-shadow: 0 1px 3px rgba(22, 32, 43, 0.06) !important;
  position: relative !important;
}

/* Filet de signature latérite. Ni border-bottom ni ombre interne ne se
   rendaient : un enfant au fond opaque les recouvrait. Un pseudo-élément
   positionné passe au-dessus. */
.site-header::after {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 3px !important;
  background: var(--nzk-laterite) !important;
  z-index: 5 !important;
  pointer-events: none !important;
}

/* Logo et texte header : encre sur blanc (contraste 15,9:1).
   Exclut les dropdowns, stylés par dropdowns-charte-officielle.css. */
.site-header,
.site-header *:not(.navlink):not(.navlink-dropdown):not(.navbar__link):not(button):not(.nav-dropdown-menu):not(.nav-dropdown-menu *):not(.brand-badge):not(.brand-badge *) {
  color: var(--nzk-encre) !important;
}

/* Écusson du logo : vert forêt, monogramme blanc */
.site-header .brand-badge {
  background: var(--nzk-vert-foret) !important;
  border-color: var(--nzk-vert-foret) !important;
  color: var(--nzk-blanc) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   NAVIGATION - LIENS BLANCS SUR VERT FORÊT
   ═══════════════════════════════════════════════════════════════════ */

/* Désactiver les chevrons dropdown */
.nav-caret,
.fa-chevron-down,
.fa-solid.fa-chevron-down {
  display: none !important;
  visibility: hidden !important;
}

/* Navigation sur UNE SEULE ligne.
   Pas d'overflow ici : il clipperait verticalement les dropdowns. */
.nav--lehavre,
.site-header .nav--lehavre {
  flex-wrap: nowrap !important;
  overflow: visible !important;
}

/* Liens de la barre de navigation : encre sur fond blanc.
   Les liens à l'intérieur des dropdowns sont exclus (stylés par
   dropdowns-charte-officielle.css). */
.site-header a:not(.navlink--invest):not(.nav-dropdown-menu *),
.site-header .navlink:not(.navlink--invest),
.site-header .navlink-dropdown:not(.navlink--invest),
.site-header .navbar__link:not(.navlink--invest),
.nav--lehavre a:not(.navlink--invest):not(.nav-dropdown-menu *),
.nav--lehavre button:not(.navlink--invest) {
  color: var(--nzk-encre) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  padding: 12px 14px !important;
  white-space: nowrap !important;
  border-radius: 4px !important;
}

/* Survol : fond brume, texte vert forêt */
.site-header a:not(.navlink--invest):not(.nav-dropdown-menu *):hover,
.site-header .navlink:not(.navlink--invest):hover,
.site-header .navlink-dropdown:not(.navlink--invest):hover,
.site-header button:not(.navlink--invest):hover {
  background: var(--nzk-brume) !important;
  color: var(--nzk-vert-foret) !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Champ de recherche : visible sur fond blanc */
.site-header .search-input,
.site-header input[type="search"],
.site-header input[type="text"] {
  background: var(--nzk-brume) !important;
  border: 1px solid #d5dbdf !important;
  color: var(--nzk-encre) !important;
  border-radius: 4px !important;
}

.site-header .search-input:focus,
.site-header input[type="search"]:focus {
  border-color: var(--nzk-vert-foret) !important;
  box-shadow: 0 0 0 3px rgba(46,61,55, 0.12) !important;
  outline: none !important;
}

/* Rubrique courante : vert forêt souligné */
.site-header .navlink.active:not(.navlink--invest),
.site-header .navlink-dropdown.active:not(.navlink--invest) {
  color: var(--nzk-vert-foret) !important;
  background: transparent !important;
  box-shadow: inset 0 -3px 0 var(--nzk-vert-foret) !important;
  border-radius: 0 !important;
}

/* Désactiver focus visible sur navigation */
.site-header a:focus,
.site-header button:focus,
.site-header .navlink:focus,
.site-header .navlink-dropdown:focus {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   BOUTON "INVESTIR" - LATÉRITE (ACCENT)
   ═══════════════════════════════════════════════════════════════════ */

.navlink--invest,
a[href*="investir"].navlink {
  background: var(--nzk-laterite) !important;
  color: var(--nzk-blanc) !important;
  padding: 12px 24px !important;
  border-radius: 4px !important;
  font-weight: 700 !important;
}

.navlink--invest:hover,
a[href*="investir"].navlink:hover {
  background: var(--nzk-laterite-fonce) !important;
  color: var(--nzk-blanc) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   BOUTONS PRINCIPAUX - VERT FORÊT
   ═══════════════════════════════════════════════════════════════════ */

.btn-primary,
.button-primary,
button.primary,
.btn--primary {
  background: var(--nzk-vert-foret) !important;
  color: var(--nzk-blanc) !important;
  border: none !important;
  padding: 14px 28px !important;
  border-radius: 4px !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  transition: all 0.2s ease !important;
}

.btn-primary:hover,
.button-primary:hover {
  background: #252827 !important; /* Vert forêt plus foncé */
  color: var(--nzk-blanc) !important;
}

/* Boutons secondaires - Bleu Nimba */
.btn-secondary,
.button-secondary,
.btn--secondary {
  background: var(--nzk-bleu-nimba) !important;
  color: var(--nzk-blanc) !important;
  border: none !important;
  padding: 14px 28px !important;
  border-radius: 4px !important;
}

.btn-secondary:hover,
.button-secondary:hover {
  background: #1f3450 !important; /* Bleu plus foncé */
}

/* ═══════════════════════════════════════════════════════════════════
   LIENS DANS LE CONTENU
   ═══════════════════════════════════════════════════════════════════ */

/* Liens du corps rédactionnel : vert forêt et soulignés.

   Cette règle portait sur « main a », c'est-à-dire sur tout lien sans classe
   de toute page. Elle a provoqué cinq anomalies distinctes — liens de service
   de l'accueil, bloc « Trouver rapidement », bouton « Accéder au site
   officiel » rendu en rectangle vert vide, index des communes — chacune
   corrigée en ajoutant une classe au lien visé, puis une exclusion ici. Le
   piège restait armé sur les 35 pages contrôlées.

   La portée est donc ramenée à ce que la règle visait : les liens dans du
   texte courant — paragraphes, listes, tableaux, citations, légendes. Un lien
   de navigation posé dans un conteneur neutre n'est plus repeint, et les
   exclusions accumulées pour les blocs sombres deviennent inutiles : le socle
   donne désormais à « a » une couleur par défaut, adaptée au fond. */
main :is(p, li, dd, td, th, blockquote, figcaption) a:not([class]),
.content :is(p, li, dd, td, th, blockquote, figcaption) a:not([class]),
article :is(p, li, dd, td, th, blockquote, figcaption) a:not([class]) {
  color: var(--nzk-vert-foret) !important;
  text-decoration: underline !important;
}

main :is(p, li, dd, td, th, blockquote, figcaption) a:not([class]):hover,
.content :is(p, li, dd, td, th, blockquote, figcaption) a:not([class]):hover,
article :is(p, li, dd, td, th, blockquote, figcaption) a:not([class]):hover {
  color: var(--nzk-bleu-nimba) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   SECTIONS ET FONDS
   ═══════════════════════════════════════════════════════════════════ */

/* Sections alternées */
.section--alt,
.bg-alt {
  background: var(--nzk-brume) !important;
}

/* Encadrés */
.card,
.box,
.panel {
  background: var(--nzk-blanc) !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 6px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   FILETS ET SÉPARATEURS - LATÉRITE
   ═══════════════════════════════════════════════════════════════════ */

.divider,
hr {
  border-color: var(--nzk-laterite) !important;
  border-width: 1px !important;
}

/* Filet décoratif en pied d'image actualités */
.news-card img,
.article-thumbnail {
  border-bottom: 8px solid var(--nzk-laterite) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   CATÉGORIES ET BADGES
   ═══════════════════════════════════════════════════════════════════ */

.badge,
.tag,
.category {
  background: var(--nzk-vert-foret) !important;
  color: var(--nzk-blanc) !important;
  padding: 4px 12px !important;
  border-radius: 4px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* Badge services - Bleu Nimba */
.badge--service,
.category--service {
  background: var(--nzk-bleu-nimba) !important;
}

/* Badge événement - Latérite */
.badge--event,
.category--event {
  background: var(--nzk-laterite) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   BANDEAUX D'INFORMATION
   ═══════════════════════════════════════════════════════════════════ */

.alert,
.notice,
.banner {
  padding: 16px 24px !important;
  border-radius: 4px !important;
  border-left: 4px solid !important;
}

/* Information standard */
.alert--info,
.notice--info {
  background: #ffffff !important;
  border-left-color: var(--nzk-bleu-nimba) !important;
  color: var(--nzk-encre) !important;
}

/* Urgent - Rouge alerte */
.alert--urgent,
.notice--urgent {
  background: #ffffff !important;
  border-left-color: var(--nzk-rouge-alerte) !important;
  color: var(--nzk-rouge-alerte) !important;
  font-weight: 600 !important;
}

/* Événement - Latérite */
.alert--event,
.notice--event {
  background: #ffffff !important;
  border-left-color: var(--nzk-laterite) !important;
  color: var(--nzk-encre) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   TEXTES SECONDAIRES
   ═══════════════════════════════════════════════════════════════════ */

.text-secondary,
.meta,
.caption,
.legend,
small {
  color: var(--nzk-ardoise) !important;
  font-size: 14px !important;
}

/* Dates */
/* Sans !important : la règle s'appliquait aussi aux dates posées sur un
   aplat sombre — celle du carrousel des actualités — en écrasant la couleur
   claire prévue pour elles, qui devenaient illisibles. Aucune spécificité ne
   bat !important : seule sa levée rend la main aux règles de contexte. */
.date,
time {
  color: var(--nzk-ardoise);
  font-weight: 400;
}

/* ═══════════════════════════════════════════════════════════════════
   CONTRASTE ET ACCESSIBILITÉ
   ═══════════════════════════════════════════════════════════════════ */

/* Tous les contrastes sont vérifiés WCAG AA :
   - Encre sur blanc : 15,9:1 ✓
   - Blanc sur vert forêt : 9,6:1 ✓
   - Bleu Nimba sur blanc : 9,1:1 ✓
   - Latérite foncée sur blanc : 6,7:1 ✓
   - Blanc sur latérite : 4,8:1 ✓
*/

/* Sur fond latérite, TOUJOURS blanc */
.bg-laterite,
[style*="background: #B9542B"],
[style*="background-color: #B9542B"] {
  color: var(--nzk-blanc) !important;
}

/* Focus visible pour accessibilité */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--nzk-laterite) !important;
  outline-offset: 2px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   ARRONDIS OFFICIELS
   ═══════════════════════════════════════════════════════════════════ */

/* Boutons et champs : 4px */
button,
input,
select,
textarea,
.btn {
  border-radius: 4px !important;
}

/* Blocs : 6px */
.card,
.box,
.panel,
.article {
  border-radius: 6px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   OMBRES : AUCUNE (séparation par filets ou fonds)
   ═══════════════════════════════════════════════════════════════════ */

.card,
.box,
.panel {
}

/* ═══════════════════════════════════════════════════════════════════
   FIN DE LA CHARTE OFFICIELLE
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   RÉPARTITION DE LA COULEUR SELON LA CHARTE
   L'harmonisation avait ramené les éléments structurants au gris.
   La charte alloue 20 % au vert forêt, 6 % au bleu Nimba, 4 % à la
   latérite : ces accents reprennent ici leur place.
   ═══════════════════════════════════════════════════════════════════ */

/* Sur-titres de section : latérite (accent d'ouverture) */
.h-kicker,
.hf-cta-kicker {
  color: var(--nzk-laterite-fonce) !important;
}

/* Titres de section : vert forêt */
.h-h2,
.hf-cta-title {
  color: var(--nzk-vert-foret) !important;
}

/* Bouton principal : vert forêt plein */
.hf-gov-btn-g,
.site-footer__btn--primary {
  background: var(--nzk-vert-foret) !important;
  color: var(--nzk-blanc) !important;
  border-color: var(--nzk-vert-foret) !important;
}

.hf-gov-btn-g:hover,
.site-footer__btn--primary:hover {
  background: #232d29 !important;
  color: var(--nzk-blanc) !important;
}

/* Bouton secondaire : contour vert forêt */
.hf-gov-btn-s,
.site-footer__btn--secondary {
  background: transparent !important;
  color: var(--nzk-vert-foret) !important;
  border: 2px solid var(--nzk-vert-foret) !important;
}

.hf-gov-btn-s:hover,
.site-footer__btn--secondary:hover {
  background: var(--nzk-vert-foret) !important;
  color: var(--nzk-blanc) !important;
}

/* Étiquettes de rubrique : vert forêt sur fond très clair */
.hf-inv-badge,
.hf-tour-badge,
.hero__badge {
  background: var(--nzk-brume) !important;
  color: var(--nzk-vert-foret) !important;
  border-left: 3px solid var(--nzk-laterite) !important;
}

/* Services : bleu Nimba, conformément à la charte */
.hf-srv-kicker {
  color: var(--nzk-bleu-nimba) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   HERO SUR PHOTOGRAPHIE
   La charte proscrit de poser du texte sur une photo sans voile sombre.
   La règle générale des titres (encre) ne doit pas s'y appliquer.
   ═══════════════════════════════════════════════════════════════════ */

/* Hauteur contenue : le hero ne doit pas occuper tout l'écran */
.hero-swiper,
.hero {
  height: min(62vh, 520px) !important;
  max-height: 520px !important;
}

/* Voile sombre dégradé : lisibilité du texte, photo encore visible */
.hero__overlay {
  background: linear-gradient(
    90deg,
    rgba(22, 32, 43, 0.86) 0%,
    rgba(22, 32, 43, 0.70) 45%,
    rgba(22, 32, 43, 0.30) 100%
  ) !important;
}

/* Tout le texte du hero en blanc, par-dessus la règle générale */
.hero__content,
.hero__content *,
.hero__content h1,
.hero__content h2,
.hero__content p {
  color: #ffffff !important;
}

/* Étiquette du hero : lisible sur le voile */
.hero__badge {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
  border-left: 3px solid var(--nzk-laterite) !important;
}

/* Titre du hero : taille maîtrisée */
.hero__content h1 {
  font-size: clamp(28px, 3.4vw, 44px) !important;
  line-height: 1.15 !important;
  text-wrap: balance !important;
}

/* ═══════════════════════════════════════════════════════════════════
   EN-TÊTE COMPACT, BARRE DE NAVIGATION COLORÉE
   La couleur identitaire se concentre sur la barre de navigation
   plutôt que sur tout l'en-tête : la part allouée au vert par la
   charte est respectée, l'identité reste lisible.
   ═══════════════════════════════════════════════════════════════════ */

/* Zone logo + recherche : resserrée */
.header-main {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
  min-height: 0 !important;
}

.site-header {
  min-height: 0 !important;
}

.brand-badge {
  width: 36px !important;
  height: 36px !important;
  border-radius: 6px !important;
}

/* Barre de navigation : bande vert forêt */
.nav--lehavre {
  background: var(--nzk-vert-foret) !important;
  padding: 0 16px !important;
  border-radius: 6px 6px 0 0 !important;
  min-height: 48px !important;
  align-items: center !important;
}

/* Liens de la barre : blancs sur le vert */
.nav--lehavre a:not(.navlink--invest):not(.nav-dropdown-menu *),
.nav--lehavre button:not(.navlink--invest),
.nav--lehavre .navlink:not(.navlink--invest),
.nav--lehavre .navlink-dropdown:not(.navlink--invest) {
  color: #ffffff !important;
  font-size: 11.5px !important;
  letter-spacing: 0.4px !important;
  padding: 9px 11px !important;
}

.nav--lehavre a:not(.navlink--invest):not(.nav-dropdown-menu *):hover,
.nav--lehavre button:not(.navlink--invest):hover,
.nav--lehavre .navlink-dropdown:not(.navlink--invest):hover {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
}

/* Rubrique courante : soulignée en latérite */
.nav--lehavre .navlink.active:not(.navlink--invest),
.nav--lehavre .navlink-dropdown.active:not(.navlink--invest) {
  color: #ffffff !important;
  box-shadow: inset 0 -3px 0 var(--nzk-laterite) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

/* Chevrons visibles sur le vert */
.nav--lehavre .nav-caret {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* Bande de navigation sur toute la largeur de la fenêtre, contenu
   toujours aligné sur la grille : on déborde du conteneur par des
   marges négatives, compensées par un retrait symétrique. */
.nav--lehavre {
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: calc(50vw - 50% + 16px) !important;
  padding-right: calc(50vw - 50% + 16px) !important;
  border-radius: 0 !important;
  width: auto !important;
  max-width: none !important;
}

/* Le débordement en 50vw ne doit pas créer de défilement horizontal */
html,
body {
  overflow-x: hidden !important;
}

/* ═══════════════════════════════════════════════════════════════════
   LIENS UTILITAIRES DE LA BARRE DE NAVIGATION
   Contact, Rechercher et Espace citoyen ne sont pas des rubriques :
   ils sont regroupés à droite, en retrait typographique, et ne
   débordent plus sur une seconde ligne.
   ═══════════════════════════════════════════════════════════════════ */

/* Rubriques principales : un cran plus compactes */
.nav--lehavre a:not(.navlink--invest):not(.nav-dropdown-menu *),
.nav--lehavre button:not(.navlink--invest),
.nav--lehavre .navlink-dropdown:not(.navlink--invest) {
  font-size: 11px !important;
  padding: 8px 9px !important;
  letter-spacing: 0.3px !important;
}

/* Bouton Investir : compact, poussé à la suite des rubriques */
.nav--lehavre .navlink--invest {
  font-size: 11.5px !important;
  padding: 8px 16px !important;
  margin: 0 4px !important;
  border-radius: 4px !important;
}

/* Le groupe utilitaire commence après Investir et file à droite */
.nav--lehavre .navlink--invest ~ a,
.nav--lehavre .navlink--invest ~ .navlink,
.nav--lehavre .navlink--invest ~ .navbar__link {
  font-size: 10.5px !important;
  padding: 8px 7px !important;
  opacity: 0.88 !important;
  letter-spacing: 0.2px !important;
}

.nav--lehavre .navlink--invest + a,
.nav--lehavre .navlink--invest + .navlink,
.nav--lehavre .navlink--invest + .navbar__link {
  margin-left: auto !important;
  border-left: 1px solid rgba(255, 255, 255, 0.22) !important;
  padding-left: 14px !important;
}

.nav--lehavre .navlink--invest ~ a:hover,
.nav--lehavre .navlink--invest ~ .navlink:hover {
  opacity: 1 !important;
}