/* ═══════════════════════════════════════════
   Le Citoyen – Feuille de styles
   ═══════════════════════════════════════════ */

:root {
  --rouge:      #1f6fb2;
  --rouge-dark: #164e7e;
  --bleu:       #1a3a5c;
  --noir:       #1a1a1a;
  --gris-fonce: #333333;
  --gris-medio: #666666;
  --gris-clair: #f5f5f5;
  --border:     #e0e0e0;
  --blanc:      #ffffff;
  --font-titre: 'Libre Franklin', sans-serif;
  --font-corps: 'Libre Franklin', sans-serif;
}

* { box-sizing: border-box; }
body { font-family: var(--font-corps); color: var(--gris-fonce); background: #fff; font-size: 16px; line-height: 1.65; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--rouge); }

/* ── BREAKING BAR ── */
.breaking-bar { background: var(--rouge); color: #fff; padding: 6px 0; font-size: .85rem; text-align: center; }
.breaking-label { background: #000; color: #fff; font-weight: 700; padding: 2px 8px; border-radius: 2px; margin-right: 10px; letter-spacing: 1px; }
.breaking-bar a { color: #fff; font-weight: 600; }

/* ── PUB HEADER ZONE (bannière au-dessus du header) ── */
.pub-header-zone { background: #f8f9fa; padding: 10px 0; border-bottom: 1px solid var(--border); text-align: center; }
.pub-header-zone .pub-label { font-size: .7rem; color: #999; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 4px; }

/* ── EN-TÊTE ── */
.site-header { background: #fff; border-bottom: 3px solid var(--rouge); position: static; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.brand-link { display: inline-block; line-height: 1; }
.brand-le { font-family: var(--font-titre); font-size: 1.6rem; color: var(--gris-medio); margin-right: 4px; }
.brand-citoyen { font-family: var(--font-titre); font-size: 2rem; font-weight: 800; color: var(--rouge); }
.brand-tagline { font-size: .72rem; color: var(--gris-medio); letter-spacing: 1.5px; text-transform: uppercase; margin-top: 2px; }

/* ── RECHERCHE ── */
.search-form .form-control { border-color: var(--border); }
.btn-recherche { background: var(--rouge); color: #fff; border: none; padding: 0 16px; }
.btn-recherche:hover { background: var(--rouge-dark); color: #fff; }

/* ── NAVIGATION ── */
.nav-principale { background: #133169; }
.nav-principale .navbar-nav { align-items: center; flex-wrap: nowrap; }
.nav-principale .nav-item { display: flex; align-items: center; }
.nav-principale .nav-link {
  color: rgba(255,255,255,.88) !important;
  font-size: .82rem;
  font-weight: 600;
  padding: 12px 10px !important;
  text-transform: uppercase;
  letter-spacing: .3px;
  transition: color .2s;
  white-space: nowrap !important; /* tous les libelles sur 1 ligne */
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1;
}
.nav-principale .nav-link i { font-size: 1rem; }
.nav-principale .nav-link:hover, .nav-principale .nav-link.active { color: #fff !important; background: rgba(255,255,255,.1); }
.nav-principale .dropdown-menu { background: #133169; border: 1px solid rgba(255,255,255,.15); border-radius: 0 0 4px 4px; margin-top: 0; min-width: 200px; }
.nav-principale .dropdown-item { color: rgba(255,255,255,.8); font-size: .88rem; padding: 8px 20px; }
.nav-principale .dropdown-item:hover { background: rgba(255,255,255,.12); color: #fff; }
.nav-principale .dropdown-divider { border-color: rgba(255,255,255,.15); }

/* Sur petits ecrans, on autorise le retour a la ligne (menu burger Bootstrap) */
@media (max-width: 991.98px) {
  .nav-principale .navbar-nav { flex-wrap: wrap; align-items: stretch; }
  .nav-principale .nav-link { white-space: normal; }
}

/* ── PUB MOBILE ── */
.pub-mobile-zone { background: #f8f9fa; padding: 8px 0; text-align: center; border-bottom: 1px solid var(--border); }

/* ── CONTENU ── */
.main-content { min-height: 60vh; }

/* ── PUB BODY (bannière entre nav et contenu) ── */
.pub-body-zone { background: #f8f9fa; padding: 10px 0; margin-bottom: 1.5rem; text-align: center; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.pub-label { font-size: .68rem; color: #aaa; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 5px; }

/* ── PUB ASIDE ── */
/* Espacement dynamique : les espaceurs grandissent jusqu'à 15rem max,
   mais rétrécissent si la page est courte — la colonne de pubs
   n'allonge jamais la page. */
.pub-aside-zone {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.pub-aside-zone .pub-aside-item { margin-bottom: 0 !important; }
.pub-aside-zone .pub-spacer {
    flex: 1 1 auto;
    max-height: 15rem;
    min-height: 1rem;
}
.pub-aside-zone .pub-label { font-size: .68rem; color: #aaa; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 5px; text-align: center; }

/* ── PUB FOOTER ZONE ── */
.pub-footer-zone { background: #f8f9fa; padding: 12px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); text-align: center; margin-bottom: 0; }

/* ── BLOC PUB ── */
.pub-bloc { display: inline-block; margin: 4px; vertical-align: top; }
.encart-img  { max-width: 30%; height: 30%; border-radius: 3px; }
.pub-video{ max-width: 100%; height: auto; display: block; border-radius: 3px; }

/* ── BADGES ── */
.badge-section { background: var(--rouge); color: #fff; font-size: .72rem; font-weight: 700; padding: 3px 8px; border-radius: 2px; text-transform: uppercase; letter-spacing: .5px; }
.badge-sous-section { display: inline-block; background: var(--gris-fonce); color: #fff; font-size: .72rem; font-weight: 600; padding: 3px 8px; border-radius: 2px; text-decoration: none; transition: background .15s; }
.badge-sous-section:hover { background: var(--rouge); color: #fff; }
.badge-sous-section.active { background: var(--rouge); color: #fff; }

/* ── VEDETTE ── */
.vedette-card { border: 1px solid var(--border); border-radius: 6px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,.08); }
.vedette-img { width: 100%; height: 380px; object-fit: cover; display: block; }
.vedette-titre { font-family: var(--font-titre); font-size: 1.9rem; line-height: 1.25; margin-bottom: 1rem; }
.vedette-titre a:hover { color: var(--rouge); }
.vedette-accroche { font-size: 1.05rem; color: var(--gris-medio); line-height: 1.6; }
.btn-lire { background: var(--rouge); color: #fff; border: none; padding: 10px 24px; font-weight: 600; border-radius: 3px; }
.btn-lire:hover { background: var(--rouge-dark); color: #fff; }

/* ── TITRES SECTION ── */
.section-titre-home { font-family: var(--font-titre); font-size: 1.5rem; color: var(--bleu); border-left: 4px solid var(--rouge); padding-left: 12px; }
.section-titre-page { font-family: var(--font-titre); font-size: 2rem; color: var(--bleu); border-bottom: 3px solid var(--rouge); padding-bottom: 10px; }

/* ── CARTE ARTICLE ── */
.carte-article { border: 1px solid var(--border); border-radius: 5px; overflow: hidden; transition: box-shadow .2s, transform .2s; background: #fff; display: flex; flex-direction: column; height: 100%; }
.carte-article:hover { box-shadow: 0 6px 24px rgba(0,0,0,.10); transform: translateY(-2px); }
.carte-img { width: 100%; height: 180px; object-fit: cover; display: block; }
.carte-img-placeholder { width: 100%; height: 180px; background: var(--gris-clair); display: flex; align-items: center; justify-content: center; font-size: 2.5rem; color: var(--border); }
.carte-body { padding: 14px; flex: 1; display: flex; flex-direction: column; }
.carte-titre { font-family: var(--font-titre); font-size: 1.05rem; line-height: 1.3; margin: 6px 0 8px; flex: 1; }
.carte-titre a:hover { color: var(--rouge); }
.carte-accroche { font-size: .85rem; color: var(--gris-medio); line-height: 1.5; margin-bottom: 8px; }
.article-meta { color: var(--gris-medio); font-size: .85rem; }
.article-meta i { margin-right: 3px; }

/* ── DÉTAIL ARTICLE ── */
.article-titre { font-family: var(--font-titre); font-size: 2.2rem; line-height: 1.2; color: var(--bleu); }
.article-accroche { font-size: 1.15rem; color: var(--gris-medio); line-height: 1.65; border-left: 4px solid var(--rouge); padding-left: 16px; }
.article-img-principale { width: 100%; height: auto; display: block; border-radius: 4px; }
.article-contenu { font-size: 1.05rem; line-height: 1.8; }
.article-contenu p { margin-bottom: 1.4rem; }
.article-contenu h2, .article-contenu h3 { font-family: var(--font-titre); color: var(--bleu); margin-top: 2rem; }
.article-contenu blockquote { border-left: 4px solid var(--rouge); padding: 12px 20px; background: var(--gris-clair); font-style: italic; color: var(--gris-medio); border-radius: 0 4px 4px 0; }
.tag-pill { display: inline-block; background: var(--gris-clair); border: 1px solid var(--border); padding: 3px 10px; border-radius: 20px; font-size: .82rem; margin: 3px 2px; transition: background .2s; }
.tag-pill:hover { background: var(--rouge); color: #fff; border-color: var(--rouge); }
.galerie-thumb { width: 100%; height: 140px; object-fit: cover; border-radius: 3px; cursor: pointer; transition: opacity .2s; }
.galerie-thumb:hover { opacity: .85; }
.btn-facebook { background: #1877f2; color: #fff; }
.btn-facebook:hover { background: #1565c0; color: #fff; }
.btn-twitter { background: #000; color: #fff; }
.btn-twitter:hover { background: #333; color: #fff; }
.article-lien { font-family: var(--font-titre); font-size: 1.1rem; }
.article-lien:hover { color: var(--rouge); }
.resultat-thumb { width: 120px; height: 80px; object-fit: cover; border-radius: 3px; flex-shrink: 0; }

/* ── SIDEBAR ── */
.sidebar-bloc { background: var(--gris-clair); border-radius: 5px; padding: 16px; margin-bottom: 1.5rem; }
.sidebar-titre { font-family: var(--font-titre); font-size: 1rem; color: var(--bleu); border-bottom: 2px solid var(--rouge); padding-bottom: 8px; margin-bottom: 12px; }
.sidebar-section-link { display: block; font-weight: 600; padding: 5px 0; border-bottom: 1px solid var(--border); font-size: .9rem; }
.sidebar-section-link:hover { color: var(--rouge); }
.sidebar-sous-sections { margin-top: 4px; margin-bottom: 4px; }
.sidebar-sous-sections a { font-size: .83rem; color: var(--gris-medio); display: block; padding: 2px 0; }
.sidebar-sous-sections a:hover { color: var(--rouge); }

/* ── PAGINATION ── */
.pagination .page-link { color: var(--rouge); border-color: var(--border); }
.pagination .page-item.active .page-link { background: var(--rouge); border-color: var(--rouge); color: #fff; }

/* ── PIED DE PAGE ── */
.site-footer { background: #1a1a2e; color: rgba(255,255,255,.75); }
.footer-brand { font-family: var(--font-titre); font-size: 1.4rem; color: var(--rouge); }
.footer-link { color: #fff; display: block; padding: 3px 0; font-size: .88rem; transition: opacity .2s; }
.footer-link:hover { color: #fff; opacity: .8; text-decoration: underline; }
.site-footer h6 { color: rgba(255,255,255,.9); }
.site-footer .text-muted { color: rgba(255,255,255,.85) !important; }
.site-footer hr { border-color: rgba(255,255,255,.15); }

/* Logo Reflet dans le footer */
.footer-logo-placeholder { line-height: 1; margin-bottom: 8px; }
.footer-logo-img { max-width: 220px; width: 100%; height: auto; display: block;
  background: #fff; padding: 12px 16px; border-radius: 8px; box-sizing: content-box; }
.footer-logo-le { font-size: 1rem; font-weight: 900; color: #fff; margin-right: 2px; text-transform: uppercase; font-family: 'Libre Franklin', sans-serif; }
.footer-logo-reflet { font-size: 2rem; font-weight: 900; color: #4fa3d1; text-transform: uppercase; font-family: 'Libre Franklin', sans-serif; letter-spacing: -1px; }
.footer-logo-temis { font-size: .8rem; color: rgba(255,255,255,.6); display: block; text-transform: uppercase; letter-spacing: 4px; margin-top: -4px; }

/* Badge IJL */
.ijl-badge { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 4px; padding: 8px 12px; display: inline-flex; }
.ijl-text-fr { font-size: .8rem; font-weight: 600; color: rgba(255,255,255,.85); line-height: 1.3; }
.ijl-text-en { font-size: .75rem; color: rgba(255,255,255,.5); line-height: 1.3; }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .vedette-img { height: 220px; }
  .article-titre { font-size: 1.6rem; }
  .brand-citoyen { font-size: 1.6rem; }
}/* ── PUBLICITÉS — tailles contrôlées ── */

.pub-bloc img.encart-img {
    max-width: 200px;
    max-height: 150px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

/* Pub aside (colonne droite) */
.pub-aside-zone .pub-bloc img.encart-img {
    max-width: 160px;
    max-height: 130px;
}

/* Pub header (bannière en haut) */
.pub-header-zone .pub-bloc img.encart-img {
    max-width: 500px;
    max-height: 70px;
}

/* Pub body (avant l'article) */
.pub-body-zone .pub-bloc img.encart-img {
    max-width: 728px;
    max-height: 90px;
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

/* Pub entre les paragraphes */
.pub-cached .pub-bloc img.encart-img {
    max-width: 300px;
    max-height: 60px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

/* Pub footer */
.pub-footer-zone .pub-bloc img.encart-img {
    max-width: 400px;
    max-height: 60px;
}

/* Pub mobile */
.pub-mobile-zone .pub-bloc img.encart-img {
    max-width: 280px;
    max-height: 45px;
}

/* ── GABARITS DE PUB — une classe par format de canvas ──
   Classe posée sur .pub-bloc par Publicite.gabarit_css. Elle prime sur les
   limites par zone ci-dessus : l'image garde les proportions de son format
   et s'affiche jusqu'à sa taille nominale, en rétrécissant si la zone est
   plus étroite (colonne, mobile). Les pubs sans gabarit gardent les règles
   par zone. */
div.pub-bloc[class*="gabarit-"] {
    display: block;
    width: 100%;
    margin: 4px auto;
}
div.pub-bloc[class*="gabarit-"] img.encart-img,
div.pub-bloc[class*="gabarit-"] video.pub-video {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
    margin: 0 auto;
}
div.pub-bloc[class*="gabarit-"] iframe { max-width: 100%; }

/* 728 x 90 — Super bannière */
div.pub-bloc.gabarit-horizontal { max-width: 728px; }
div.pub-bloc.gabarit-horizontal img.encart-img { aspect-ratio: 728 / 90; }

/* 300 x 250 — Big box */
div.pub-bloc.gabarit-carre { max-width: 300px; }
div.pub-bloc.gabarit-carre img.encart-img { aspect-ratio: 300 / 250; }

/* 300 x 600 — Double big box */
div.pub-bloc.gabarit-vertical { max-width: 300px; }
div.pub-bloc.gabarit-vertical img.encart-img { aspect-ratio: 300 / 600; }

/* 320 x 50 — Mobile */
div.pub-bloc.gabarit-mobile { max-width: 320px; }
div.pub-bloc.gabarit-mobile img.encart-img { aspect-ratio: 320 / 50; }

/* 970 x 250 — Billboard */
div.pub-bloc.gabarit-large { max-width: 970px; }
div.pub-bloc.gabarit-large img.encart-img { aspect-ratio: 970 / 250; }

/* 970 x 90 — Bannière dynamique */
div.pub-bloc.gabarit-large-mince { max-width: 970px; }
div.pub-bloc.gabarit-large-mince img.encart-img { aspect-ratio: 970 / 90; }

/* Pubs HTML isolées dans un iframe (voir home/templatetags/pub_tags.py) */
.encart-cadre {
    position: relative;
    display: block;
    max-width: 100%;
    margin: 0 auto;
    overflow: hidden;
}
.encart-cadre iframe {
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
    transform-origin: 0 0;
}
.encart-cadre-clic { display: none; }
a .encart-cadre-clic {          /* seulement si la pub a un lien */
    display: block;
    position: absolute;
    inset: 0;
    z-index: 1;
    cursor: pointer;
}

/* ── ÉDITIONS ÉLECTRONIQUES ── */
.editions-region-titre {
    font-family: var(--font-titre);
    font-size: 1.8rem;
    color: var(--rouge);
    border-bottom: 2px solid var(--rouge);
    padding-bottom: 8px;
}

.editions-tabs .btn-primary {
    background: var(--rouge);
    border-color: var(--rouge);
}

/* Journal de la semaine */
.journal-semaine-lien { display: block; max-width: 520px; }
.journal-semaine-img-wrap {
    position: relative;
    display: inline-block;
    width: 100%;
}
.journal-semaine-img {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid var(--border);
}
.journal-semaine-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.65);
    color: white;
    padding: 10px 16px;
    font-size: 0.95rem;
    font-weight: 600;
}

/* Section header */
.editions-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--gris-fonce);
    color: white;
    font-weight: 700;
    font-size: 1rem;
    padding: 10px 16px;
    border-radius: 3px;
}
.editions-section-bar {
    display: inline-block;
    width: 5px;
    height: 20px;
    background: var(--rouge);
    border-radius: 2px;
}

/* Carte journal */
.journal-carte {
    display: block;
    text-align: center;
    color: var(--gris-fonce);
    transition: opacity 0.2s;
}
.journal-carte:hover { opacity: 0.8; }
.journal-carte-img {
    width: 100%;
    height: auto;
    border: 1px solid var(--border);
    display: block;
    margin-bottom: 6px;
}
.journal-carte-date {
    font-size: 0.85rem;
    color: var(--gris-medio);
}
.voken-overlay {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;

}

.voken-container {
    position: relative;
    background: white;
    border-top: 4px solid #1f6fb2;
    border-radius: 4px 4px 0 0;
    padding: 20px 40px 20px 20px;
    text-align: center;
    max-width: 400px;
    max-height: 250px;       /* ← limite la hauteur */
    width: 90%;
    box-shadow: 0 -3px 12px rgba(0,0,0,0.2);
}

#voken-anchor {
  background: #fff;
  border-top: 3px solid #1f6fb2;
  text-align: center;
}

#voken-anchor .voken-container {
  max-width: 100%;
  width: 100%;
  border-radius: 0;
  border-top: none;
  box-shadow: none;
  padding: 12px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.voken-close {
    position: absolute;
    top: 8px;
    right: 10px;
    background: #c0392b;
    color: white;
    border: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}
.voken-close:hover { background: #962d22; }

.voken-img {
    max-width: 100%;
    max-height: 250px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: inline-block;
}

/* ── OFFRES D'EMPLOI ── */
.offre-carte {
    background: #f8f9fa;
    border-radius: 6px;
    border: 1px solid var(--border);
    height: 100%;
}
.offre-logo-img {
    max-width: 180px;
    max-height: 80px;
    object-fit: contain;
    display: block;
}
.offre-entreprise {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--gris-fonce);
    margin-bottom: 4px;
}
.offre-poste {
    font-size: 0.9rem;
}
.offre-description {
    background: white;
    border: 1px solid var(--

/* ============================================================
   THEME BLEU - exceptions qui restent ROUGES
   (logo, bas de page, croix de fermeture, alertes d'erreur)
   ============================================================ */
.brand-citoyen { color: #c0392b; }   /* logo : inchange */
.footer-brand  { color: #c0392b; }   /* bas de page : inchange */

/* Boutons rouges Bootstrap -> bleu (coherence du theme) */
.btn-danger { background-color: var(--rouge) !important; border-color: var(--rouge) !important; }
.btn-danger:hover, .btn-danger:focus, .btn-danger:active { background-color: var(--rouge-dark) !important; border-color: var(--rouge-dark) !important; }
.btn-outline-danger { color: var(--rouge); border-color: var(--rouge); }
.btn-outline-danger:hover, .btn-outline-danger:focus, .btn-outline-danger:active { background-color: var(--rouge) !important; border-color: var(--rouge) !important; color:#fff !important; }
/* NB: .alert-danger (erreurs) et .voken-close (croix) restent volontairement rouges. */


/* === MOBILE === */
/* Eviter tout debordement horizontal et images qui depassent */
html, body { overflow-x: hidden; }
img { max-width: 100%; height: auto; }
.article-contenu img, .article-contenu table, .offre-detail-desc img { max-width: 100%; height: auto; }

@media (max-width: 991.98px) {
  /* Menu replie : items pleine largeur, bien tappables */
  .nav-principale .container { display: flex; flex-wrap: wrap; align-items: center; }
  .navbar-toggler { margin: 6px 0; }
  .nav-principale .navbar-collapse {
      background: #133169;
      width: 100%;
      margin-top: 6px;
      border-radius: 0 0 6px 6px;
      padding: 4px 0 8px;
  }
  .nav-principale .navbar-nav { width: 100%; }
  .nav-principale .nav-item { display: block; width: 100%; }
  .nav-principale .nav-link {
      width: 100%;
      padding: 12px 18px !important;
      border-bottom: 1px solid rgba(255,255,255,.08);
      white-space: normal !important;
  }
  /* Sous-menus (Sections, Chronique, Editions) integres au menu replie */
  .nav-principale .dropdown-menu {
      position: static !important;
      transform: none !important;
      inset: auto !important;
      float: none !important;
      width: 100%;
      border: none;
      border-radius: 0;
      background: rgba(255,255,255,.06);
      padding: 4px 0 4px 14px;
      margin: 0;
  }
  .nav-principale .dropdown-item { padding: 9px 18px; white-space: normal; }
}

@media (max-width: 768px) {
  /* En-tete : empilement centre et propre */
  .site-header .row { row-gap: 10px; }
  .site-header [class^="col-"] { text-align: center; }
  .site-header .search-form { margin: 6px auto; max-width: 100%; }
  .brand-logo { max-height: 54px !important; }
  .brand-citoyen { font-size: 1.5rem; }
  /* Boutons d'en-tete (journal, s'inscrire, connexion) sur une ligne souple */
  .site-header .dropdown.d-inline-block { margin: 3px 2px; }
  /* Titres un peu plus compacts */
  .section-titre-page { font-size: 1.5rem; }
  .vedette-titre { font-size: 1.4rem; }
}