/* ==============================================================
   FSF Actualités — frontend.css v5.0.0
   ============================================================== */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;600;700&family=Lato:wght@300;400;700&display=swap');

:root {
  --fn-vert:  #00843D;
  --fn-gd:    #005a2b;
  --fn-jaune: #FDEF00;
  --fn-rouge: #E2001A;
  --fn-bleu:  #1a56db;   /* couleur titre sidebar (comme image d'exemple) */
  --fn-t:     .22s ease;
}

/* ── Base ──────────────────────────────────────────────────── */
.fsfn-wrap  { font-family: 'Lato', sans-serif; }
.fsfn-empty { color: #888; font-style: italic; padding: 20px; text-align: center; }

/* ── Ticker Breaking ───────────────────────────────────────── */
.fsfn-ticker-wrap  { display: flex; align-items: center; background: #0d0d0d; overflow: hidden; height: 38px; }
.fsfn-ticker-label { background: var(--fn-rouge); color: #fff; font-family: 'Oswald', sans-serif;
                     font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
                     padding: 0 14px; height: 100%; display: flex; align-items: center;
                     white-space: nowrap; flex-shrink: 0; }
.fsfn-ticker-track { flex: 1; overflow: hidden; }
.fsfn-ticker-inner { display: flex; align-items: center; animation: fsfn-ticker 28s linear infinite; white-space: nowrap; }
.fsfn-ticker-inner:hover { animation-play-state: paused; }
.fsfn-ticker-item  { color: rgba(255,255,255,.85); font-size: 13px; text-decoration: none; padding: 0 18px; transition: color var(--fn-t); }
.fsfn-ticker-item:hover { color: var(--fn-jaune); }
.fsfn-ticker-sep   { color: rgba(255,255,255,.3); font-size: 18px; }
@keyframes fsfn-ticker { from { transform: translateX(0) } to { transform: translateX(-50%) } }

/* ── Filtres ───────────────────────────────────────────────── */
.fsfn-filter-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 22px;
                    padding-bottom: 16px; border-bottom: 2px solid #f0f0f0; }
.fsfn-ftab        { background: none; border: 2px solid #e0e0e0; padding: 7px 16px;
                    font-family: 'Oswald', sans-serif; font-size: 12px; letter-spacing: 1px;
                    text-transform: uppercase; cursor: pointer; color: #666; transition: all var(--fn-t); }
.fsfn-ftab:hover  { border-color: var(--fn-vert); color: var(--fn-vert); }
.fsfn-ftab.active { background: var(--fn-vert); border-color: var(--fn-vert); color: #fff; }

/* ── Grille d'articles ─────────────────────────────────────── */
.fsfn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; }

/* ── Carte article (grille) ────────────────────────────────── */
.fsfn-card-article { background: #fff; border: 1px solid #e5e5e5; overflow: hidden;
                     display: flex; flex-direction: column;
                     transition: box-shadow .25s, transform .25s; }
.fsfn-card-article:hover { box-shadow: 0 12px 32px rgba(0,0,0,.12); transform: translateY(-3px); }

.fsfn-card-photo-link { display: block; text-decoration: none; }

/* Photo — hauteur fixe, relative pour les overlays */
.fsfn-card-photo      { position: relative; padding-top: 62%; overflow: hidden; background: #1a1a1a; }
.fsfn-card-photo img  { position: absolute; inset: 0; width: 100%; height: 100%;
                         object-fit: cover; transition: transform .45s ease; }
.fsfn-card-article:hover .fsfn-card-photo img { transform: scale(1.05); }
.fsfn-photo-fallback  { position: absolute; inset: 0; display: flex; align-items: center;
                         justify-content: center; font-size: 40px; background: #f5f5f5; }

/* ══════════════════════════════════════════════════════════════
   CARTES — SYSTÈME MULTI-POSITION DU TITRE
   Classes pilotées par l'option fsfn_card_title_position :
     .fsfn-title-below-image   → titre dans .fsfn-card-body
     .fsfn-title-overlay-top   → overlay HAUT
     .fsfn-title-overlay-bottom → overlay BAS
══════════════════════════════════════════════════════════════ */

/* ─── Overlay générique (partagé top & bottom) ─── */
.fsfn-card-overlay {
  position:       absolute;
  left:  0; right: 0;
  z-index:        2;
  display:        flex;
  flex-direction: column;
  gap:            5px;
  padding:        14px 14px;
  transition:     opacity .3s;
}

/* Badges inside overlay */
.fsfn-overlay-badges {
  display:   flex;
  gap:       6px;
  flex-wrap: wrap;
}

/* ─── Overlay HAUT ─── */
.fsfn-overlay-top {
  top: 0;
  padding-bottom: 36px;   /* fondu vers le bas */
  background: linear-gradient(
    to bottom,
    var(--fn-overlay-color, rgba(0,0,0,.80)) 0%,
    rgba(0,0,0,.40) 60%,
    transparent 100%
  );
}

/* ─── Overlay BAS ─── */
.fsfn-overlay-bottom {
  bottom: 0;
  padding-top: 36px;      /* fondu vers le haut */
  justify-content: flex-end;
  background: linear-gradient(
    to top,
    var(--fn-overlay-color, rgba(0,0,0,.80)) 0%,
    rgba(0,0,0,.40) 60%,
    transparent 100%
  );
}

/* ─── Titre dans overlay ─── */
.fsfn-card-overlay .fsfn-card-title-text {
  font-family: 'Oswald', sans-serif;
  font-size:   16px;
  font-weight: 700;
  line-height: 1.35;
  margin:      0;
  color:       var(--fn-overlay-title-color, #fff);
  text-shadow: 0 1px 5px rgba(0,0,0,.6);
  display:            -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow:    hidden;
}

/* ─── Titre classique SOUS l'image ─── */
.fsfn-card-title-below {
  font-family: 'Oswald', sans-serif;
  font-size:   16px;
  font-weight: 700;
  line-height: 1.3;
  margin:      0;
}
.fsfn-card-title-below a {
  color:           #111;
  text-decoration: none;
  transition:      color var(--fn-t);
}
.fsfn-card-title-below a:hover { color: var(--fn-vert); }

/* ─── Badges breaking / une (absolu sur photo pour below) ─── */
.fsfn-title-below .fsfn-badge-breaking,
.fsfn-title-below .fsfn-badge-une {
  position:       absolute;
  top:            10px;
  left:           0;
  z-index:        3;
}
.fsfn-badge-breaking,
.fsfn-badge-une {
  font-family:    'Oswald', sans-serif;
  font-size:      10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding:        3px 9px;
  display:        inline-block;
}
.fsfn-badge-breaking { background: var(--fn-rouge); color: #fff; }
.fsfn-badge-une      { background: #d97706;          color: #fff; }

/* Badge catégorie — toujours bas-droite de la photo */
.fsfn-badge-cat {
  position:       absolute;
  bottom:         10px; right: 10px;
  z-index:        3;
  font-family:    'Oswald', sans-serif;
  font-size:      10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding:        4px 9px;
  background:     rgba(0,0,0,.6);
  color:          #fff;
}

/* Corps sous la photo */
.fsfn-card-body    { padding: 14px 16px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.fsfn-card-excerpt { font-size: 13px; color: #555; line-height: 1.6; margin: 0; flex: 1; }
.fsfn-card-meta    { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11px; color: #aaa;
                      padding-top: 8px; border-top: 1px solid #f0f0f0; margin-top: auto; }

/* Cartes overlay : pas de padding en haut du body si titre déjà sur l'image */
.fsfn-title-overlay-top .fsfn-card-body,
.fsfn-title-overlay-bottom .fsfn-card-body {
  padding-top: 10px;
}


/* ── Article À LA UNE ──────────────────────────────────────── */
.fsfn-une         { display: block; position: relative; text-decoration: none; overflow: hidden; min-height: 480px; }
.fsfn-une-photo   { position: absolute; inset: 0; }
.fsfn-une-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.fsfn-une:hover .fsfn-une-photo img { transform: scale(1.03); }
.fsfn-une-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.3) 50%, transparent 100%); }
.fsfn-une-content { position: relative; display: flex; flex-direction: column; justify-content: flex-end;
                    height: 100%; min-height: 480px; padding: 32px 36px; color: #fff; }
.fsfn-une-cat     { font-family: 'Oswald', sans-serif; font-size: 11px; letter-spacing: 2px;
                    text-transform: uppercase; background: var(--fn-vert); padding: 4px 12px;
                    display: inline-block; align-self: flex-start; margin-bottom: 12px; }
.fsfn-une-title   { font-family: 'Oswald', sans-serif; font-size: 36px; font-weight: 700;
                    line-height: 1.2; margin: 0 0 12px; color: #fff; max-width: 700px; }
.fsfn-une-excerpt { font-size: 16px; opacity: .85; line-height: 1.6; margin: 0 0 14px; max-width: 600px; }
.fsfn-une-meta    { display: flex; gap: 16px; font-size: 12px; opacity: .7; margin-bottom: 16px; flex-wrap: wrap; }
.fsfn-une-btn     { display: inline-block; font-family: 'Oswald', sans-serif; font-size: 12px;
                    letter-spacing: 2px; text-transform: uppercase; border: 2px solid rgba(255,255,255,.6);
                    padding: 8px 20px; transition: all var(--fn-t); align-self: flex-start; }
.fsfn-une:hover .fsfn-une-btn { background: #fff; color: #111; border-color: #fff; }

/* ── Highlight ─────────────────────────────────────────────── */
.fsfn-highlight-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.fsfn-hl-card     { position: relative; min-height: 220px; background-size: cover; background-position: center; overflow: hidden; }
.fsfn-hl-overlay  { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.75) 0%, transparent 60%); }
.fsfn-hl-content  { position: absolute; bottom: 0; left: 0; right: 0; padding: 16px 18px; z-index: 1; }
.fsfn-hl-content h3 { margin: 6px 0 4px; font-family: 'Oswald', sans-serif; font-size: 16px; font-weight: 700; line-height: 1.3; }
.fsfn-hl-content h3 a { color: #fff; text-decoration: none; }
.fsfn-hl-content h3 a:hover { color: var(--fn-jaune); }
.fsfn-hl-date     { font-size: 11px; color: rgba(255,255,255,.6); }

/* ══════════════════════════════════════════════════════════════
   SIDEBAR ACTUALITÉS — v5.0
   Layout : image GAUCHE (130×90) | titre BLEU gras \n date GRISE
   Séparateur discret entre chaque item
══════════════════════════════════════════════════════════════ */
.fsfn-sidebar-actus {
  font-family: 'Lato', sans-serif;
  width: 100%;
}

/* Titre de section */
.fsfn-sidebar-title {
  font-family:    'Oswald', sans-serif;
  font-size:      13px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color:          var(--fn-gd);
  padding-bottom: 8px;
  border-bottom:  3px solid var(--fn-vert);
  margin:         0 0 4px;
}

/* ─── Conteneur d'un item sidebar ─── */
/* ══════════════════════════════════════════════════════
   SIDEBAR ITEM — Image gauche / Titre + méta droite
══════════════════════════════════════════════════════ */
.fsfn-sidebar-list { display: flex; flex-direction: column; }

.fsfn-si {
  display:        flex;
  flex-direction: row;   /* ← IMAGE GAUCHE, TEXTE DROITE — toujours */
  align-items:    flex-start;
  gap:            14px;
  padding:        14px 0;
  border-bottom:  1px solid #ebebeb;
  text-decoration: none;
}
.fsfn-si:last-child { border-bottom: none; }

/* ─── Image à gauche — 110×80 fixe ─── */
.fsfn-si-img-link {
  display:         block;
  flex:            0 0 110px;
  width:           110px;
  height:          80px;
  overflow:        hidden;
  border-radius:   4px;
  text-decoration: none;
  background:      #e8e8e8;
}
.fsfn-si-img-link img {
  display:    block;
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.fsfn-si:hover .fsfn-si-img-link img { transform: scale(1.07); }

/* Placeholder si pas d'image */
.fsfn-si-no-img {
  flex:            0 0 110px;
  width:           110px;
  height:          80px;
  background:      #f0f0f0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       26px;
  border-radius:   4px;
  flex-shrink:     0;
}

/* ─── Colonne texte à droite ─── */
.fsfn-si-body {
  flex:            1;
  min-width:       0;
  display:         flex;
  flex-direction:  column;
  justify-content: flex-start;
  gap:             5px;
  padding-top:     2px;
}

/* Badge catégorie */
.fsfn-si-cat {
  display:         inline-block;
  background:      var(--fn-vert, #00843D);
  color:           #fff;
  font-size:       10px;
  font-weight:     700;
  letter-spacing:  .8px;
  padding:         2px 8px;
  border-radius:   2px;
  text-decoration: none;
  text-transform:  uppercase;
  align-self:      flex-start;
  transition:      opacity .2s;
}
.fsfn-si-cat:hover { opacity: .85; }

/* Titre — gras, 3 lignes max */
.fsfn-si-title {
  font-family:        'Lato', sans-serif;
  font-size:          14px;
  font-weight:        700;
  line-height:        1.45;
  color:              #1a2e5a;
  text-decoration:    none;
  display:            -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow:           hidden;
  transition:         color var(--fn-t, .2s);
}
.fsfn-si-title:hover { color: var(--fn-vert, #00843D); }

/* Date — grise, fine */
.fsfn-si-date {
  font-size:   12px;
  color:       #999;
  white-space: nowrap;
}

/* ── Responsive ─────────────────────────────────────────────── */

/* Tablette 769–900px : 2 colonnes max (fallback si CSS dynamique absent) */
@media (max-width: 900px) and (min-width: 769px) {
  .fsfn-une-title       { font-size: 26px; }
  .fsfn-une-content     { padding: 20px; }
  .fsfn-grid            { grid-template-columns: 1fr 1fr; }
  .fsfn-highlight-grid  { grid-template-columns: 1fr 1fr; }
  .fsfn-card-title-text { font-size: 14px; }
  .fsfn-si-img-link     { flex: 0 0 100px; width: 100px; height: 72px; }
  .fsfn-si-img-link img { width: 100%; height: 100%; }
  .fsfn-si-no-img       { flex: 0 0 100px; width: 100px; height: 72px; }
}

/* ══════════════════════════════════════════════════════
   MOBILE ≤ 768px — 1 COLONNE STRICTE
   NOTE : ces règles doivent rester plus spécifiques que
   n'importe quelle règle générée par admin.php.
   Le correctif dans admin.php encapsule désormais les
   colonnes dans @media(min-width:901px), ce qui évite
   tout conflit. Les !important ici restent en filet de
   sécurité pour les thèmes tiers.
══════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ─── Grilles : 1 colonne absolue ─── */
  .fsfn-grid,
  .fsfn-grid[data-pos]          { grid-template-columns: 1fr !important; }
  .fsfn-highlight-grid          { grid-template-columns: 1fr !important; }

  /* ─── Article à la Une ─── */
  .fsfn-une                     { min-height: 280px; }
  .fsfn-une-content             { min-height: 280px; padding: 20px 16px; }
  .fsfn-une-title               { font-size: 20px; }
  .fsfn-une-excerpt             { font-size: 14px; margin-bottom: 10px; }

  /* ─── Filtres ─── */
  .fsfn-filter-tabs             { gap: 5px; margin-bottom: 16px; }
  .fsfn-ftab                    { padding: 6px 12px; font-size: 11px; }

  /* ─── Carte article ─── */
  .fsfn-card-photo              { padding-top: 56%; }
  .fsfn-card-title-text         { font-size: 14px !important; }
  .fsfn-card-body               { padding: 12px 14px; }
  .fsfn-card-excerpt            { font-size: 13px; }

  /* ─── Highlight ─── */
  .fsfn-hl-card                 { min-height: 180px; }

  /* ─── Sidebar items ─── */
  .fsfn-si-img-link             { flex: 0 0 88px; width: 88px; height: 64px; }
  .fsfn-si-img-link img         { width: 100%; height: 100%; }
  .fsfn-si-no-img               { flex: 0 0 88px; width: 88px; height: 64px; }
  .fsfn-si-title                { font-size: 13px; }
  .fsfn-si-date                 { font-size: 11px; }
}

/* ── Admin styles ───────────────────────────────────────────── */
.fsfn-admin h1         { margin-bottom: 16px; }
.fsfn-stat-row         { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.fsfn-stat             { flex: 1; min-width: 120px; background: #fff; border: 1px solid #ddd;
                          padding: 14px 16px; border-top: 4px solid var(--fn-vert);
                          display: flex; flex-direction: column; align-items: center; gap: 3px; }
.fsfn-stat-draft       { border-top-color: #888; }
.fsfn-stat-featured    { border-top-color: #d97706; }
.fsfn-stat-breaking    { border-top-color: var(--fn-rouge); }
.fsfn-sn               { font-family: 'Georgia', serif; font-size: 36px; font-weight: 700;
                          color: var(--fn-gd); line-height: 1; }
.fsfn-dash-grid        { display: grid; grid-template-columns: 1fr 340px; gap: 18px; align-items: start; }
.fsfn-card             { background: #fff; border: 1px solid #ddd; padding: 16px 18px; border-top: 3px solid var(--fn-vert); }
.fsfn-card-title       { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px;
                          color: var(--fn-gd); padding-bottom: 8px; border-bottom: 1px solid #eee; margin: 0 0 12px; }
.fsfn-field            { margin-bottom: 12px; }
.fsfn-field label      { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase;
                          letter-spacing: .4px; color: #444; margin-bottom: 4px; }

/* ══════════════════════════════════════════════════════════════
   POSITION DU TITRE — v5.0.0
   Contrôlé via classes .fsfn-tp-overlay_top | .fsfn-tp-overlay_bottom | .fsfn-tp-below
   et par CSS dynamique généré dans admin.php (wp_head)
══════════════════════════════════════════════════════════════ */

/* ── Overlay titre (dans la photo) ──────────────────────────── */
.fsfn-card-top-overlay {
  position: absolute;
  left:  0; right:  0;
  padding: 14px 14px 40px;
  z-index: 3;
  pointer-events: none;
}
/* Titre overlay : blanc + textshadow */
.fsfn-card-top-overlay .fsfn-card-title-text {
  margin:      0;
  color:       #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,.55);
}

/* Titre "below" dans le corps — par défaut caché quand overlay actif */
.fsfn-card-title-below { display: none; }

/* ── overlay_top : overlay en HAUT, titre caché dans body ── */
.fsfn-tp-overlay_top  .fsfn-card-top-overlay { top: 0; bottom: auto; }
.fsfn-tp-overlay_top  .fsfn-card-title-below { display: none; }

/* ── overlay_bottom : overlay en BAS, titre caché dans body ── */
.fsfn-tp-overlay_bottom .fsfn-card-top-overlay { top: auto; bottom: 0; padding: 40px 14px 14px; }
.fsfn-tp-overlay_bottom .fsfn-card-title-below { display: none; }

/* ── below : pas d'overlay, titre dans le corps ── */
.fsfn-tp-below .fsfn-card-top-overlay           { display: none; }
.fsfn-tp-below .fsfn-card-title-below           { display: block; }
.fsfn-tp-below .fsfn-card-title-below a         { color: #111; text-decoration: none; }
.fsfn-tp-below .fsfn-card-title-below a:hover   { color: var(--fn-vert); }

/* ── Sidebar (inchangée) ─────────────────────────────────────── */
/* Classes .fsfn-si déjà définies plus haut */