/*
Theme Name: ExternFlow Mag
Theme URI: https://www.externflow.com
Author: ExternFlow
Description: Thème magazine sur mesure pour ExternFlow, inspiré des grands blogs d'actualité business : ticker de tendances, une en mosaïque, sections par rubrique, sidebar à onglets Récents/Populaires, footer sombre. Box auteur avec e-mail et LinkedIn, encadré En bref, dates en français, Schema BlogPosting.
Version: 2.7.3
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: externflow
*/

/* =========================================================
   1. Variables et base
========================================================= */
:root {
  /* Palette ExternFlow : bleu nuit + ambre */
  --nuit: #14213d;
  --nuit-2: #1e3055;
  --or: #fca311;
  --or-fonce: #e08e00;
  --or-texte: #a86400;
  /* Alias conservés pour tout le reste de la feuille */
  --bleu: var(--or);
  --bleu-fonce: var(--or-fonce);
  --sombre: var(--nuit);
  --sombre-2: var(--nuit-2);
  --texte: #23293a;
  --gris: #6f7684;
  --fond: #f4f4f4;
  --ligne: #e5e5e5;
  --blanc: #ffffff;
  --font-titre: "Poppins", -apple-system, sans-serif;
  --font-texte: "Roboto", Arial, sans-serif;
  --largeur: 1230px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--blanc);
  color: var(--texte);
  font-family: var(--font-texte);
  font-size: 16px;
  line-height: 1.65;
}

a { color: var(--or-texte); text-decoration: none; transition: color 0.2s ease; }
a:hover { color: var(--nuit); }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid var(--bleu);
  outline-offset: 2px;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4, h5 { font-family: var(--font-titre); color: var(--sombre); line-height: 1.3; }

.conteneur { max-width: var(--largeur); margin: 0 auto; padding: 0 20px; }

.lecteur-ecran {
  position: absolute; width: 1px; height: 1px;
  clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap;
}

/* Icônes SVG en ligne */
.icone { width: 15px; height: 15px; fill: currentColor; flex: none; vertical-align: -2px; }

/* Barre de progression de lecture (articles) */
.progression-lecture {
  position: fixed; top: 0; left: 0;
  height: 3px; width: 0;
  background: var(--bleu);
  z-index: 1000;
}

/* =========================================================
   2. En-tête d'accueil : H1 unique + baseline
========================================================= */
.entete-accueil {
  margin: 0 0 30px;
  padding: 2px 0 20px 18px;
  border-left: 4px solid var(--or);
  border-bottom: 1px solid var(--ligne);
}
.titre-accueil {
  margin: 0;
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: clamp(24px, 1.2rem + 1.6vw, 36px);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--sombre);
}
.baseline-accueil {
  margin: 9px 0 0;
  max-width: 66ch;
  color: var(--gris);
  font-size: 16px;
  line-height: 1.6;
}

/* =========================================================
   3. Zone logo + bannière
========================================================= */
.zone-marque { background: var(--blanc); }
.zone-marque .conteneur {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  gap: 16px; padding-top: 26px; padding-bottom: 26px;
}
.marque .custom-logo { max-height: 64px; width: auto; }
.titre-site {
  margin: 0;
  font-weight: 700;
  font-size: 36px;
  letter-spacing: -0.01em;
}
.titre-site a { color: var(--sombre); }
.titre-site .point { color: var(--bleu); }
.slogan-site { margin: 2px 0 0; color: var(--gris); font-size: 13px; }
.banniere-entete { max-width: 728px; }
.banniere-entete img { max-height: 100px; width: auto; }

/* =========================================================
   4. Navigation principale sombre
========================================================= */
.sentinelle-nav { height: 1px; margin-top: -1px; }
.barre-nav { background: var(--sombre); position: sticky; top: 0; z-index: 900; }
.barre-nav .conteneur { display: flex; align-items: stretch; gap: 16px; }
.logo-nav {
  display: flex;
  align-items: center;
  flex: none;
  overflow: hidden;
  max-width: 0;
  padding: 6px 0;
  opacity: 0;
  transition: max-width 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
}
.barre-nav.est-fixe .logo-nav {
  max-width: 320px;
  padding: 6px 10px 6px 0;
  opacity: 1;
}
.logo-nav img { max-height: 46px; width: auto; display: block; }
.logo-nav-texte {
  color: #fff;
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: -0.01em;
}
.logo-nav-texte span { color: var(--bleu); }
.nav-principale { flex: 1; }
.nav-principale { display: flex; align-items: stretch; }
.nav-principale > ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: stretch; }
.nav-principale > ul > li { display: flex; }
.nav-principale > ul > li > a { display: flex; align-items: center; }
.nav-principale > ul > li { position: relative; }
.nav-principale > ul > li > a {
  display: block;
  padding: 15px 18px 12px;
  color: #fff;
  font-family: var(--font-titre);
  font-weight: 600;
  font-size: 14px;
  border-bottom: 3px solid transparent;
}
/* Soulignement ambre uniforme, conforme à la palette */
.nav-principale > ul > li > a { border-bottom-color: var(--or); }
.nav-principale > ul > li > a:hover,
.nav-principale > ul > li.current-menu-item > a { background: var(--sombre-2); }
.nav-principale .sub-menu {
  display: none;
  position: absolute; left: 0; top: 100%;
  background: var(--sombre-2);
  min-width: 230px;
  list-style: none; margin: 0; padding: 6px 0;
  z-index: 60;
}
.nav-principale li:hover > .sub-menu,
.nav-principale li:focus-within > .sub-menu { display: block; }
.nav-principale .sub-menu a {
  display: block; padding: 10px 18px;
  color: #d8dbe2; font-size: 14px;
}
.nav-principale .sub-menu a:hover { color: #fff; background: var(--sombre); }

.recherche-nav { display: flex; align-items: center; }
.recherche-nav input[type="search"] {
  border: 0; background: var(--sombre-2); color: #fff;
  padding: 10px 14px; width: 190px; font: inherit; font-size: 14px;
}
.recherche-nav input::placeholder { color: #9aa1ad; }
.recherche-nav button {
  border: 0; background: var(--or); color: var(--nuit);
  padding: 10px 16px; cursor: pointer;
}
.recherche-nav button:hover { background: var(--bleu-fonce); }

.bouton-menu {
  display: none;
  background: none;
  border: 0;
  padding: 10px;
  margin: 4px 0;
  cursor: pointer;
  align-self: center;
}
.burger { display: block; width: 24px; }
.burger span {
  display: block;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.burger span + span { margin-top: 6px; }
.bouton-menu[aria-expanded="true"] .burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.bouton-menu[aria-expanded="true"] .burger span:nth-child(2) { opacity: 0; }
.bouton-menu[aria-expanded="true"] .burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* =========================================================
   5. Mosaïque « À la une »
========================================================= */
.zone-principale { padding: 34px 0 60px; }

.mosaique {
  display: grid;
  min-width: 0;
  grid-template-columns: 3fr 2fr;
  grid-template-rows: repeat(2, 250px);
  gap: 14px;
  margin-bottom: 44px;
}
.mosaique .carte-overlay:first-child { grid-row: span 2; }

.carte-overlay {
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--sombre-2);
}
.carte-overlay img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.5s ease;
}
.carte-overlay:hover img { transform: scale(1.04); }
.carte-overlay::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(
    180deg,
    rgba(20, 33, 61, 0.05) 0%,
    rgba(20, 33, 61, 0.12) 32%,
    rgba(20, 33, 61, 0.66) 60%,
    rgba(20, 33, 61, 0.96) 100%
  );
}
.carte-overlay .surimpression {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 20px 22px 18px;
}
.carte-overlay .badge-categorie {
  border: none;
  background: rgba(20, 33, 61, 0.82);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 11px;
  padding: 5px 11px;
  margin-bottom: 12px;
}
.carte-overlay .badge-actualite { background: var(--or); color: var(--nuit); }
.badge-categorie {
  display: inline-block;
  width: auto;
  height: auto;
  background: var(--nuit);
  color: #fff;
  font-family: var(--font-titre);
  font-weight: 600;
  font-size: 12px;
  padding: 4px 10px;
  margin-bottom: 10px;
}
a.badge-categorie:hover { background: var(--nuit-2); color: #fff; }
.badge-actualite { background: var(--or); color: var(--nuit); }
a.badge-actualite:hover { background: var(--or-fonce); color: var(--nuit); }
.carte-overlay .titre-overlay {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 0 0 10px;
  color: #fff;
  font-family: var(--font-titre);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.4;
  text-wrap: balance;
  text-shadow: 0 1px 8px rgba(20, 33, 61, 0.45);
  transition: color 0.25s ease;
}
.mosaique .carte-overlay:first-child .titre-overlay {
  -webkit-line-clamp: 3;
  font-size: clamp(21px, 2.1vw, 28px);
  line-height: 1.28;
}
.carte-overlay:hover .titre-overlay { color: var(--or); }
.meta-overlay { color: rgba(255, 255, 255, 0.72); font-size: 12.5px; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.meta-overlay .icone { fill: var(--or); }

/* =========================================================
   5b. Rubrique Actualités : deux grandes cartes + flux compact
========================================================= */
.actus-duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.actus-duo .carte-overlay {
  min-height: 0;
  aspect-ratio: 16 / 9;
}
.liste-actus {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 34px;
}
.carte-actu {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--ligne);
}
.liste-actus .carte-actu:nth-last-child(-n+2) { border-bottom: none; }
.carte-actu-image {
  flex: 0 0 104px;
  overflow: hidden;
}
.carte-actu-image img {
  display: block;
  width: 104px;
  height: 74px;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.carte-actu:hover .carte-actu-image img { transform: scale(1.05); }
.carte-actu-corps { min-width: 0; }
.carte-actu .titre-carte {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 0 0 7px;
  font-size: 15.5px;
  line-height: 1.4;
}
.carte-actu .titre-carte a { color: inherit; }
.carte-actu .titre-carte a:hover { color: var(--or-fonce); }

/* =========================================================
   5c. Cartes similaires : image + titre seulement
========================================================= */
.liste-similaires {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}
.carte-sim { min-width: 0; }
.carte-sim-image {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--sombre-2);
}
.carte-sim-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s ease;
}
.carte-sim:hover .carte-sim-image img { transform: scale(1.05); }
.carte-sim-image::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 3px;
  background: var(--or);
  transition: width 0.3s ease;
}
.carte-sim:hover .carte-sim-image::after { width: 100%; }
.carte-sim-titre {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  margin: 13px 0 0;
  font-family: var(--font-titre);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.45;
}
.carte-sim-titre a { color: inherit; transition: color 0.2s ease; }
.carte-sim-titre a:hover { color: var(--or-fonce); }

/* =========================================================
   5d. En-tête d'article premium : chapô, signature, partage
========================================================= */
.chapo {
  margin: 16px 0 0;
  font-size: 19px;
  line-height: 1.65;
  font-weight: 500;
  color: var(--nuit);
}
.signature {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px 20px;
  flex-wrap: wrap;
  margin: 20px 0 12px;
}
.signature-auteur {
  display: flex;
  align-items: center;
  gap: 12px;
}
.signature-auteur img { border-radius: 50%; }
.signature-infos { min-width: 0; }
.signature-nom {
  display: block;
  font-family: var(--font-titre);
  font-weight: 600;
  font-size: 14.5px;
}
.signature-nom a { color: inherit; }
.signature-nom a:hover { color: var(--or-fonce); }
.signature-dates {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  color: var(--gris);
}
.signature-maj { white-space: nowrap; }
.signature-lecture {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  color: var(--gris);
}
.signature-lecture .icone { fill: var(--or); }
.partage {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 14px 0;
  margin-bottom: 28px;
  border-top: 1px solid var(--ligne);
  border-bottom: 1px solid var(--ligne);
}
.partage-libelle {
  margin-right: 4px;
  font-family: var(--font-titre);
  font-weight: 600;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.partage a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--ligne);
  border-radius: 50%;
  color: var(--nuit);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.partage a svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}
.partage a:hover {
  background: var(--nuit);
  border-color: var(--nuit);
  color: #fff;
}

/* =========================================================
   6. Titres de section
========================================================= */
.titre-section {
  position: relative;
  margin: 0 0 26px;
  padding-bottom: 12px;
  font-size: 26px;
  font-weight: 700;
  border-bottom: 2px solid var(--ligne);
}
.titre-section::after {
  content: "";
  position: absolute; left: 0; bottom: -2px;
  width: 52px; height: 4px;
  background: var(--bleu);
}
.titre-section a { color: var(--sombre); }
.titre-section a:hover { color: var(--bleu); }

/* =========================================================
   7. Section « Top stories » : grande carte + liste
========================================================= */
.grille { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 40px; }
.grille > * { min-width: 0; }
.colonne-contenu, .colonne-laterale { min-width: 0; max-width: 100%; }
.pleine-largeur .grille { grid-template-columns: minmax(0, 1fr); }

.duo { display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px; margin-bottom: 44px; }
.duo > * { min-width: 0; }

.carte-vedette { position: relative; text-align: center; }
.carte-vedette .carte-image {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--fond);
}
.carte-vedette .carte-image img { width: 100%; height: 100%; object-fit: cover; }
.carte-vedette .badge-categorie { position: absolute; top: 14px; left: 14px; margin: 0; }
.carte-vedette .meta-carte {
  display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px;
  background: var(--blanc);
  padding: 12px 22px;
  margin-top: -22px;
  position: relative;
  box-shadow: 0 4px 14px rgba(20, 33, 61, 0.10);
  font-size: 13px; color: var(--gris);
}
.carte-vedette .titre-carte { font-size: 22px; margin: 16px 0 10px; }
.carte-vedette .extrait { color: var(--gris); margin: 0; }

.liste-minis { display: flex; flex-direction: column; }
.mini { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--ligne); }
.mini:first-child { padding-top: 0; }
.mini-image { flex: none; display: block; width: 90px; height: 68px; overflow: hidden; background: var(--fond); }
.mini-image img { width: 100%; height: 100%; object-fit: cover; }
.mini-titre {
  margin: 0 0 6px;
  font-family: var(--font-titre);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.4;
}
.mini-titre a { color: var(--sombre); }
.mini-titre a:hover { color: var(--bleu); }
.mini .meta-carte { font-size: 12.5px; color: var(--gris); display: flex; flex-wrap: wrap; gap: 4px 14px; }
.mini .meta-carte a { color: var(--gris); }
.meta-carte .icone { fill: var(--bleu); width: 13px; height: 13px; }

/* =========================================================
   8. Grilles de cartes par rubrique
========================================================= */
.section-rubrique { margin-bottom: 48px; }
.liste-cartes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.carte {
  background: var(--blanc);
  border: 1px solid var(--ligne);
  text-align: center;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.carte:hover { box-shadow: 0 10px 26px rgba(20, 33, 61, 0.12); transform: translateY(-2px); }
.carte .carte-image {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 11;
  background: var(--fond);
}
.carte .carte-image .lien-image { display: block; width: 100%; height: 100%; }
.carte .carte-image img { width: 100%; height: 100%; object-fit: cover; }
.carte .badge-categorie { position: absolute; top: 12px; left: 12px; margin: 0; }
.carte-corps { padding: 18px 18px 20px; }
.titre-carte { margin: 0 0 8px; font-size: 17px; font-weight: 600; }
.titre-carte a { color: var(--sombre); }
.titre-carte a:hover { color: var(--bleu); }
.carte .extrait { color: var(--gris); font-size: 14.5px; margin: 0 0 12px; }
.carte .meta-carte {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px;
  color: var(--gris); font-size: 13px;
}
.carte .meta-carte a { color: var(--gris); }
.carte .meta-carte a:hover { color: var(--bleu); }

/* Liste horizontale : image à gauche, texte à droite */
.liste-horizontale { display: flex; flex-direction: column; }
.carte-h {
  display: flex;
  gap: 22px;
  padding: 20px 0;
  border-bottom: 1px solid var(--ligne);
}
.liste-horizontale .carte-h:first-child { padding-top: 4px; }
.carte-h-image {
  position: relative;
  flex: none;
  width: 260px;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: var(--fond);
}
.carte-h-image .lien-image { display: block; width: 100%; height: 100%; }
.carte-h-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
.carte-h:hover .carte-h-image img { transform: scale(1.05); }
.carte-h-image .badge-categorie { position: absolute; top: 10px; left: 10px; margin: 0; }
.carte-h-corps { min-width: 0; }
.carte-h .titre-carte { font-size: 19px; margin: 2px 0 8px; }
.carte-h .extrait { color: var(--gris); font-size: 14.5px; margin: 0 0 10px; }
.carte-h .meta-carte { display: flex; gap: 4px 16px; color: var(--gris); font-size: 13px; }

/* Grille deux colonnes sans style inline (recherche, pagination) */
.liste-deux { grid-template-columns: repeat(2, 1fr); }

/* Pages catégories : style épuré façon Abondance */
.liste-archives { grid-template-columns: repeat(2, 1fr); gap: 40px 32px; }
.liste-archives .carte {
  border: 0;
  text-align: left;
  background: none;
}
.liste-archives .carte:hover { box-shadow: none; transform: none; }
.liste-archives .carte .carte-image {
  aspect-ratio: 16 / 9;
  border-radius: 6px;
}
.liste-archives .carte .carte-image img { border-radius: 6px; }
.liste-archives .badge-categorie { display: none; }
.liste-archives .carte-corps { padding: 16px 0 0; }
.liste-archives .titre-carte {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 12px;
}
.liste-archives .carte .extrait { display: none; }
.liste-archives .carte .meta-carte { justify-content: flex-start; }

/* Pagination */
.pagination { margin-top: 40px; display: flex; justify-content: center; }
.pagination .nav-links { display: flex; gap: 8px; flex-wrap: wrap; }
.pagination .page-numbers {
  display: inline-block; min-width: 42px;
  padding: 9px 14px; text-align: center;
  border: 1px solid var(--ligne);
  color: var(--sombre);
  font-family: var(--font-titre); font-weight: 600;
}
.pagination .page-numbers.current,
.pagination .page-numbers:hover { background: var(--or); border-color: var(--or); color: var(--nuit); }

/* =========================================================
   9. Barre latérale
========================================================= */
.widget { margin-bottom: 38px; }
.widget-title, .widget .wp-block-heading {
  position: relative;
  margin: 0 0 22px;
  padding-bottom: 10px;
  font-size: 19px;
  font-weight: 700;
  border-bottom: 2px solid var(--ligne);
}
.widget-title::after {
  content: "";
  position: absolute; left: 0; bottom: -2px;
  width: 42px; height: 4px;
  background: var(--bleu);
}
.widget ul { list-style: none; margin: 0; padding: 0; }
.widget li { padding: 9px 0; border-bottom: 1px solid var(--ligne); font-size: 15px; }
.widget a { color: var(--texte); }
.widget a:hover { color: var(--bleu); }

/* Onglets Récents / Populaires */
.onglets { display: flex; }
.onglets button {
  flex: 1;
  border: 0;
  background: var(--sombre);
  color: #fff;
  font-family: var(--font-titre);
  font-weight: 600;
  font-size: 14px;
  padding: 12px;
  cursor: pointer;
}
.onglets button[aria-selected="true"] { background: var(--or); color: var(--nuit); }
.panneau-onglet { padding-top: 14px; }
.panneau-onglet[hidden] { display: none; }

/* Liste numérotée « Populaires » */
.mini-numero { position: relative; }
.mini-numero .numero {
  position: absolute;
  left: 66px; top: 44px;
  width: 26px; height: 26px;
  background: var(--or);
  color: var(--nuit);
  border-radius: 50%;
  font-family: var(--font-titre);
  font-weight: 600;
  font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff;
}

/* =========================================================
   10. Article seul
========================================================= */
.fil-ariane { font-size: 13px; color: var(--gris); margin: 0 0 20px; }
.fil-ariane a { color: var(--gris); }
.fil-ariane a:hover { color: var(--bleu); }
.fil-ariane .separateur { margin: 0 8px; color: var(--ligne); }

.entete-article { margin-bottom: 22px; }
.titre-article { margin: 10px 0 16px; font-size: 34px; font-weight: 700; line-height: 1.2; }
.meta-article {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 20px;
  padding: 12px 0;
  border-top: 1px solid var(--ligne);
  border-bottom: 1px solid var(--ligne);
  color: var(--gris); font-size: 14px;
}
.meta-article .avatar { border-radius: 50%; }
.meta-auteur { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.meta-auteur a { color: var(--sombre); }
.meta-auteur a:hover { color: var(--bleu); }
.meta-item { display: inline-flex; align-items: center; gap: 7px; }
.meta-item.meta-maj { color: var(--nuit); font-weight: 600; }

.image-vedette { margin: 22px 0; }
.image-vedette figcaption { font-size: 13px; color: var(--gris); padding-top: 8px; }

.contenu-article { font-size: 17px; line-height: 1.75; overflow-wrap: break-word; }
.contenu-article > p:first-of-type { font-size: 18.5px; }
.contenu-article h2 {
  position: relative;
  font-size: 25px; font-weight: 700;
  margin: 40px 0 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--ligne);
}
.contenu-article h2::after {
  content: "";
  position: absolute; left: 0; bottom: -2px;
  width: 42px; height: 4px;
  background: var(--bleu);
}
.contenu-article h3 { font-size: 20px; font-weight: 600; margin: 30px 0 10px; }
.contenu-article a { text-decoration: underline; text-underline-offset: 3px; }
.contenu-article ul, .contenu-article ol { padding-left: 24px; }
.contenu-article li { margin-bottom: 7px; }
.contenu-article li::marker { color: var(--bleu); }
.contenu-article blockquote {
  margin: 26px 0; padding: 18px 24px;
  background: var(--fond);
  border-left: 4px solid var(--bleu);
  font-style: italic;
}
.contenu-article blockquote p { margin: 0; }
.contenu-article table {
  width: 100%;
  border-collapse: collapse;
  margin: 26px 0;
  font-size: 15px;
}
/* Conteneur de tableau Gutenberg : défilement au lieu de déborder */
.contenu-article .wp-block-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 26px 0;
}
.contenu-article .wp-block-table table { margin: 0; min-width: 480px; }
/* Tableaux insérés sans conteneur (HTML brut, éditeur classique) */
@media (max-width: 700px) {
  .contenu-article > table,
  .contenu-article figure > table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: normal;
  }
  .contenu-article table td,
  .contenu-article table th { min-width: 130px; }
}
.contenu-article th { background: var(--sombre); color: #fff; text-align: left; padding: 10px 14px; }
.contenu-article td { padding: 10px 14px; border: 1px solid var(--ligne); }
.contenu-article tr:nth-child(even) td { background: var(--fond); }
.contenu-article figure { margin: 26px 0; }
.wp-caption-text { font-size: 13px; color: var(--gris); }

/* Encadré « En bref » (charte : paragraphe de 1 à 3 phrases) */
.contenu-article .en-bref {
  margin: 0 0 28px;
  background: var(--fond);
  border: 1px solid var(--ligne);
  overflow: hidden;
}
.en-bref-etiquette {
  display: block;
  background: var(--nuit);
  color: #fff;
  font-family: var(--font-titre);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 8px 18px;
}
.contenu-article .en-bref p {
  margin: 0;
  padding: 16px 22px 18px;
  line-height: 1.6;
}
.contenu-article .en-bref p + p { padding-top: 0; }
.contenu-article .en-bref ul { margin: 0; padding: 16px 22px 18px 40px; }
.contenu-article .en-bref li { margin-bottom: 7px; line-height: 1.55; }
.contenu-article .en-bref li::marker { color: var(--bleu); }

/* Étiquettes */
.etiquettes-article { display: flex; flex-wrap: wrap; gap: 8px; margin: 30px 0 0; }
.etiquettes-article a {
  border: 1px solid var(--ligne);
  color: var(--gris);
  font-size: 13px;
  padding: 5px 12px;
}
.etiquettes-article a:hover { border-color: var(--bleu); color: var(--bleu); }

/* Box auteur */
.box-auteur {
  display: flex; gap: 20px; align-items: flex-start;
  margin: 36px 0 0;
  padding: 24px;
  background: var(--fond);
  border: 1px solid var(--ligne);
  border-top: 3px solid var(--bleu);
}
.box-auteur .avatar { border-radius: 50%; flex: none; }
.box-auteur-nom { margin: 0 0 6px; font-size: 18px; font-weight: 600; }
.box-auteur-nom a { color: var(--sombre); }
.box-auteur-nom a:hover { color: var(--bleu); }
.box-auteur-bio { margin: 0 0 12px; color: var(--gris); font-size: 15px; }
.box-auteur-liens { display: flex; gap: 10px; }
.box-auteur-liens a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--blanc);
  border: 1px solid var(--ligne);
  color: var(--bleu);
  transition: all 0.2s ease;
}
.box-auteur-liens a:hover { background: var(--or); border-color: var(--or); color: var(--nuit); }
.box-auteur-liens svg { width: 17px; height: 17px; fill: currentColor; }

/* Navigation précédent / suivant */
.post-navigation { margin: 36px 0 0; }
.post-navigation .nav-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.post-navigation a {
  display: block;
  padding: 16px 18px;
  border: 1px solid var(--ligne);
  background: var(--fond);
  transition: border-color 0.2s ease;
}
.post-navigation a:hover { border-color: var(--bleu); }
.post-navigation .nav-next { text-align: right; }
.nav-libelle {
  display: block;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gris);
  margin-bottom: 5px;
}
.nav-titre {
  font-family: var(--font-titre);
  font-weight: 600;
  font-size: 15px;
  color: var(--sombre);
  line-height: 1.4;
}
.post-navigation a:hover .nav-titre { color: var(--bleu); }

/* Articles similaires */
.articles-similaires { margin-top: 46px; }

/* =========================================================
   11. Formulaires
========================================================= */
.formulaire-recherche { display: flex; }
.formulaire-recherche input[type="search"] {
  flex: 1; border: 1px solid var(--ligne);
  padding: 11px 14px; font: inherit; min-width: 0;
}
.formulaire-recherche button {
  border: 0; background: var(--or); color: var(--nuit);
  font-family: var(--font-titre); font-weight: 600;
  padding: 0 18px; cursor: pointer;
}
.formulaire-recherche button:hover { background: var(--bleu-fonce); }

.comment-list { list-style: none; padding: 0; }
.comment-body { border: 1px solid var(--ligne); padding: 18px; margin-bottom: 16px; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%; border: 1px solid var(--ligne);
  padding: 11px 14px; font: inherit;
}
.comment-form .submit {
  border: 0; background: var(--bleu); color: #fff;
  font-family: var(--font-titre); font-weight: 600;
  padding: 12px 26px; cursor: pointer;
}
.comment-form .submit:hover { background: var(--bleu-fonce); }

/* =========================================================
   12. Pied de page sombre
========================================================= */
.bande-connexion {
  background: var(--sombre-2);
  color: #fff;
  text-align: center;
  margin-top: 70px;
  padding: 44px 20px 40px;
}
.bande-connexion h2 { color: #fff; margin: 0 0 18px; font-size: 26px; }
.reseaux-pied { display: flex; justify-content: center; gap: 10px; }
.reseaux-pied a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border: 1px solid #3a3c45;
  border-radius: 50%;
  color: #9aa1ad;
  transition: all 0.2s ease;
}
.reseaux-pied a:hover { background: var(--or); border-color: var(--or); color: var(--nuit); }
.reseaux-pied svg { width: 17px; height: 17px; fill: currentColor; }

.pied-site { background: var(--sombre); color: #b9bec8; }
.pied-site .conteneur { padding-top: 50px; padding-bottom: 30px; }
.pied-colonnes { display: grid; grid-template-columns: 1.1fr 1.2fr 1.2fr 0.9fr; gap: 36px; }
.pied-site .widget-title { color: #fff; border-bottom-color: #33353d; }
.pied-site .widget li { border-color: #2b2d34; }
.pied-site a { color: #b9bec8; }
.pied-site a:hover { color: #fff; }
.pied-site .mini-titre a { color: #e6e8ee; }
.pied-site .mini-titre a:hover { color: #fff; }
.pied-site .mini { border-color: #2b2d34; }

.barre-copyright {
  background: #0c1428;
  color: #9aa1ad;
  font-size: 13.5px;
}
.barre-copyright .conteneur {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  padding-top: 16px; padding-bottom: 16px;
}
.barre-copyright a { color: var(--or); }
.barre-copyright ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
}
.barre-copyright li { white-space: nowrap; }

/* =========================================================
   13. Divers
========================================================= */
.page-erreur { text-align: center; padding: 80px 0; }
.page-erreur .code { font-size: 110px; font-weight: 700; color: var(--bleu); line-height: 1; margin: 0 0 10px; font-family: var(--font-titre); }

/* =========================================================
   14. Responsive
========================================================= */
@media (max-width: 1024px) {
  .pied-colonnes { grid-template-columns: repeat(2, 1fr); }
  .grille { grid-template-columns: minmax(0, 1fr); }
  .banniere-entete { display: none; }
}
@media (max-width: 860px) {
  .entete-accueil { margin-bottom: 24px; padding-bottom: 16px; }
  .mosaique { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 12px; }
  .mosaique .carte-overlay { min-height: 200px; }
  .mosaique .carte-overlay:first-child { grid-column: span 2; grid-row: span 1; min-height: 0; aspect-ratio: 16 / 8; }
  .duo { grid-template-columns: minmax(0, 1fr); }
  .liste-cartes { grid-template-columns: repeat(2, 1fr); }
  .liste-cartes.liste-archives { grid-template-columns: 1fr; gap: 36px; }
  .liste-archives .titre-carte { font-size: 22px; }
  .titre-article { font-size: 28px; }
}
@media (max-width: 620px) {
  /* Barre compacte : burger à gauche, logo juste après, le tout sticky */
  .barre-nav .conteneur {
    flex-wrap: wrap;
    align-items: center;
    min-height: 54px;
  }
  .bouton-menu { display: inline-block; order: 1; }
  .logo-nav {
    order: 2; flex: 1;
    max-width: none; opacity: 1; padding: 6px 0;
  }
  .nav-principale { order: 3; display: none; width: 100%; }
  .nav-principale.ouverte { display: block; }
  .nav-principale > ul { flex-direction: column; }
  .nav-principale > ul > li > a { border-left: 3px solid var(--or); border-bottom: 1px solid var(--nuit-2); }
  /* La recherche n'apparaît que menu ouvert, sous les entrées */
  .recherche-nav { order: 4; display: none; width: 100%; padding: 4px 0 12px; }
  .nav-principale.ouverte ~ .recherche-nav { display: flex; }
  .recherche-nav input { flex: 1; width: auto; }
  /* La zone logo + slogan du haut devient inutile sur mobile : la barre sticky porte le logo */
  .zone-marque { display: none; }
  .entete-accueil { margin-bottom: 20px; padding-left: 13px; padding-bottom: 14px; }
  .baseline-accueil { font-size: 15px; }
  .mosaique { grid-template-columns: 1fr; grid-template-rows: none; gap: 12px; }
  .mosaique .carte-overlay { min-height: 0; aspect-ratio: 16 / 10; }
  .mosaique .carte-overlay:first-child { grid-column: auto; aspect-ratio: 4 / 3; }
  .mosaique .carte-overlay:first-child .titre-overlay { font-size: 21px; }
  .carte-overlay .titre-overlay { font-size: 16px; }
  .carte-overlay .surimpression { padding: 14px 16px 13px; }
  .liste-cartes, .liste-deux, .liste-archives { grid-template-columns: 1fr; }
  .liste-archives { gap: 36px; }
  .liste-archives .titre-carte { font-size: 22px; }
  .chapo { font-size: 17px; line-height: 1.6; }
  .signature { flex-direction: column; align-items: flex-start; gap: 10px; }
  .actus-duo { grid-template-columns: 1fr; gap: 12px; }
  .actus-duo .carte-overlay { aspect-ratio: 16 / 10; }
  .liste-similaires { grid-template-columns: 1fr; gap: 22px; }
  .liste-actus { grid-template-columns: 1fr; gap: 2px; }
  .liste-actus .carte-actu:nth-last-child(2) { border-bottom: 1px solid var(--ligne); }
  .carte-h { flex-direction: column; gap: 12px; }
  .carte-h-image { width: 100%; }
  .titre-article { font-size: 24px; }
  .box-auteur { flex-direction: column; }
  .post-navigation .nav-links { grid-template-columns: 1fr; }
  .post-navigation .nav-next { text-align: left; }
  .pied-colonnes { grid-template-columns: 1fr; }
  .barre-copyright .conteneur {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 12px;
    padding-top: 18px;
    padding-bottom: 22px;
  }
  .barre-copyright nav { width: 100%; }
}

/* =========================================================
   15. Visionneuse d'images (articles)
========================================================= */
.contenu-article img { cursor: zoom-in; }
.visionneuse {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(20, 33, 61, 0.96);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.visionneuse-image {
  max-width: 95vw;
  max-height: 88vh;
  width: auto;
  height: auto;
  cursor: zoom-in;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}
.visionneuse.est-zoomee { justify-content: flex-start; }
.visionneuse.est-zoomee .visionneuse-image {
  max-width: none;
  max-height: none;
  cursor: zoom-out;
}
.visionneuse-fermer {
  position: fixed;
  top: 14px;
  right: 18px;
  z-index: 2001;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: #fca311;
  color: #14213d;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}
.visionneuse-fermer:hover { background: #e08e00; }
.visionneuse-legende {
  margin: 14px 0 0;
  color: #d8dee9;
  font-size: 14px;
  text-align: center;
  max-width: 800px;
}
@media (max-width: 620px) {
  .visionneuse { padding: 12px; }
  .visionneuse-image { max-width: 96vw; max-height: 84vh; }
}

/* =========================================================
   16. Correctif : medias plus larges que l'ecran (mobile)
   L'editeur WordPress pose parfois une largeur fixe en
   style inline sur la figure ou le conteneur wp-caption
   (image redimensionnee, infographie inseree en taille
   reelle). L'image fait alors 100 % de ce conteneur trop
   large et deborde. On contraint donc les conteneurs
   eux-memes, puis les autres types de medias.
========================================================= */
.contenu-article figure,
.contenu-article .wp-block-image,
.contenu-article .wp-caption {
  max-width: 100% !important;
}
.contenu-article figure img,
.contenu-article .wp-caption img,
.contenu-article p img {
  max-width: 100% !important;
  height: auto !important;
}
/* Infographies exportees en SVG et inserees en HTML brut */
.contenu-article svg {
  max-width: 100%;
  height: auto;
}
/* Contenus embarques (videos, infographies interactives) */
.contenu-article iframe,
.contenu-article embed,
.contenu-article object,
.contenu-article video {
  max-width: 100%;
}

/* =========================================================
   17. Bouton « Sources preferees » Google
   Lien direct, sans script Google. Style sobre inspire de
   BDM : texte bleu nuit sur fond blanc, bordure bleu nuit,
   ombre decalee ambre. Affiche sous la barre de partage
   (entete) et rappele en fin d'article (fin), sur les
   articles et les actualites.
========================================================= */
.source-preferee-entete { margin: -12px 0 28px; }
.bouton-source-preferee {
  display: inline-block;
  padding: 10px 18px;
  border: 2px solid var(--nuit);
  border-radius: 2px;
  background: var(--blanc);
  box-shadow: 3px 3px 0 var(--or);
  color: var(--nuit);
  font-family: var(--font-titre);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
  transition: background .15s ease, color .15s ease,
    box-shadow .15s ease, transform .15s ease;
}
.bouton-source-preferee:hover,
.bouton-source-preferee:focus-visible {
  background: var(--nuit);
  color: var(--blanc);
}
.bouton-source-preferee:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--or);
}
/* Rappel en fin d'article */
.source-preferee-fin {
  margin: 30px 0 0;
  padding: 18px 20px;
  border: 1px solid var(--ligne);
  border-left: 4px solid var(--or);
  background: var(--fond);
}
.source-preferee-fin .source-preferee-texte {
  margin: 0 0 12px;
  font-weight: 600;
  color: var(--texte);
}
/* Mobile : bouton pleine largeur, centre */
@media (max-width: 600px) {
  .bouton-source-preferee {
    display: block;
    text-align: center;
  }
}
/* =========================================================
   18. Sommaire natif (template-parts/sommaire.php)
   Liste des H2/H3 generee en PHP, sans plugin ni script :
   repli/depli via l'element HTML <details>. Fond gris clair,
   liseret ambre, liens bleu nuit. Affiche en tete du contenu
   des actualites (single-actualite.php).
========================================================= */
.contenu-article .sommaire {
  margin: 0 0 28px;
  padding: 16px 20px;
  border: 1px solid var(--ligne);
  border-top: 3px solid var(--or);
  background: var(--fond);
}
.contenu-article .sommaire-titre {
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  cursor: pointer;
  font-family: var(--font-titre);
  font-weight: 600;
  font-size: 17px;
  color: var(--nuit);
}
.contenu-article .sommaire-titre::-webkit-details-marker { display: none; }
.contenu-article .sommaire-titre::after {
  content: "Masquer";
  font-family: var(--font-texte);
  font-weight: 400;
  font-size: 13px;
  color: var(--gris);
}
.contenu-article .sommaire:not([open]) .sommaire-titre::after { content: "Afficher"; }
.contenu-article .sommaire-liste {
  margin: 12px 0 0;
  padding-left: 22px;
}
.contenu-article .sommaire-liste li {
  margin: 6px 0;
  padding: 0;
}
.contenu-article .sommaire-liste li::marker {
  color: var(--or-texte);
  font-weight: 600;
}
.contenu-article .sommaire-liste a {
  color: var(--nuit);
  text-decoration: none;
  line-height: 1.45;
}
.contenu-article .sommaire-liste a:hover,
.contenu-article .sommaire-liste a:focus-visible {
  color: var(--or-fonce);
  text-decoration: underline;
}
.contenu-article .sommaire-sous-liste {
  margin: 6px 0 0;
  padding-left: 20px;
  font-size: 0.94em;
}
/* Decalage pour que la barre sticky ne recouvre pas le titre cible */
.contenu-article h2,
.contenu-article h3 { scroll-margin-top: 90px; }

/* =========================================================
   19. Sommaire en colonne fixe (articles et actualites)
   Sur ecran large, la grille des pages article passe a
   trois colonnes : sommaire a gauche (sticky), contenu,
   barre laterale. En dessous de 1180px, la colonne
   disparait et l'encart repliable (section 18) prend le
   relais en tete du contenu. Style calque sur la charte :
   titre en petites capitales, filet fin, liste a trait
   vertical gris, liens gris puis bleu nuit au survol.
========================================================= */
.colonne-sommaire { display: none; }
.contenu-article .sommaire { display: block; }

@media (min-width: 1180px) {
  .grille-article.avec-sommaire {
    grid-template-columns: 190px minmax(0, 1fr) 300px;
    gap: 36px;
  }
  .colonne-sommaire {
    display: block;
    align-self: start;
    position: sticky;
    top: 76px;
    max-height: calc(100vh - 96px);
    overflow-y: auto;
  }
  /* L'encart cede la place a la colonne */
  .grille-article.avec-sommaire .contenu-article .sommaire { display: none; }
}

.sommaire-colonne { padding-top: 6px; }
.sommaire-colonne-titre {
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ligne);
  font-family: var(--font-titre);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nuit);
}
.sommaire-colonne-liste,
.sommaire-colonne-sous-liste {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sommaire-colonne-liste { border-left: 2px solid var(--ligne); }
.sommaire-colonne-liste li { margin: 0; }
.sommaire-colonne-liste a {
  display: block;
  padding: 7px 0 7px 14px;
  margin-left: -2px;
  border-left: 2px solid transparent;
  font-family: var(--font-texte);
  font-size: 14px;
  line-height: 1.4;
  color: var(--gris);
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.sommaire-colonne-liste a:hover,
.sommaire-colonne-liste a:focus-visible {
  color: var(--nuit);
  border-left-color: var(--or);
}
.sommaire-colonne-sous-liste a {
  padding-left: 26px;
  font-size: 13px;
}
/* Fine barre de defilement si le sommaire depasse l'ecran */
.colonne-sommaire::-webkit-scrollbar { width: 4px; }
.colonne-sommaire::-webkit-scrollbar-thumb { background: var(--ligne); border-radius: 2px; }