/*
Theme Name: Que Faire - Thème Enfant
Template: twentytwentyfive
Version: 4.6.1
Description: Thème enfant Que Faire — homepage v3 + archives grille 3 colonnes, sans sidebar
*/


/* ══════════════════════════════════════════════════════════════
   0. POLICES
   ══════════════════════════════════════════════════════════════ */
@font-face {
  font-family: 'Poppins';
  font-weight: 300; font-style: normal; font-display: swap;
  src: url('./assets/fonts/poppins-v24-latin-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-weight: 400; font-style: normal; font-display: swap;
  src: url('./assets/fonts/poppins-v24-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-weight: 400; font-style: italic; font-display: swap;
  src: url('./assets/fonts/poppins-v24-latin-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-weight: 700; font-style: normal; font-display: swap;
  src: url('./assets/fonts/poppins-v24-latin-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-weight: 900; font-style: normal; font-display: swap;
  src: url('./assets/fonts/poppins-v24-latin-900.woff2') format('woff2');
}


/* ── Reset padding <main> ───────────────────────────────────── */
main {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* ══════════════════════════════════════════════════════════════
   1. VARIABLES
   ══════════════════════════════════════════════════════════════ */
:root {
  --qf-orange:      #e45404;
  --qf-orange-dark: #c04303;
  --qf-noir:        #111111;
  --qf-texte:       #2d2d2d;
  --qf-gris:        #888888;
  --qf-fond:        #ffffff;
  --qf-neu-bg:      #e8eaee;
  --qf-border:      #ededea;

  /* Neumorphisme — réservé boutons + CTA */
  --neu-btn:
    0 0 12px 3px rgba(228,84,4,.32),
    0 0  4px 1px rgba(255,200,150,.25);
  --neu-btn-hover:
    0 0 20px 5px rgba(228,84,4,.45),
    0 0  6px 2px rgba(255,200,150,.30);
  --neu-cta:
    0 0 28px 8px rgba(228,84,4,.35),
    0 0  8px 2px rgba(255,200,150,.20);

  --r-sm: 8px;
  --r:    12px;
  --r-lg: 16px;
  --t:    .2s ease;
}


/* ══════════════════════════════════════════════════════════════
   2. BASE
   ══════════════════════════════════════════════════════════════ */
body {
  font-family: 'Poppins', sans-serif;
  background: var(--qf-fond);
  color: var(--qf-texte);
  -webkit-font-smoothing: antialiased;
}

/* Titre de la page d'accueil masqué */
.home h1.wp-block-post-title {
  display: none !important;
}

/* Suppression de l'espace en haut de la page d'accueil */
.home main {
  padding-top: 0 !important;
}
.mon-media-grid {
  padding-top: 0 !important;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--qf-orange); }
img { display: block; max-width: 100%; height: auto; }

/* Alignement gauche global pour les méta Query Loop */
.wp-block-post-terms,
.wp-block-post-date,
.wp-block-post-date time {
  text-align: left !important;
  display: block !important;
}


/* ══════════════════════════════════════════════════════════════
   3. UTILITAIRES
   ══════════════════════════════════════════════════════════════ */

/* ─── Badge catégorie par défaut ─────────────────────────────── */
.wp-block-post-terms a {
  display: inline-block;
  background: var(--qf-orange);
  color: #fff !important;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  text-decoration: none;
  line-height: 1.6;
}
.qf-badge-outline .wp-block-post-terms a {
  background: transparent !important;
  color: var(--qf-orange) !important;
  border: 1.5px solid var(--qf-orange);
  padding: 2px 7px;
}

/* ─── Titre de section (barre orange + "Voir tout") ─────────── */
.qf-titre-section-wrap {
  display: flex; align-items: center; justify-content: space-between;
  max-width: var(--wp--style--global--content-size);
  margin: 28px auto 14px;
  padding: 0 1.5rem;
}
h2.qf-titre-section {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: .75rem !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: var(--qf-noir) !important;
  margin: 0 !important;
  padding: 0 !important;
}
h2.qf-titre-section::before {
  content: '' !important;
  display: block !important;
  width: 3px !important;
  height: 16px !important;
  background: var(--qf-orange) !important;
  border-radius: 2px !important;
  flex-shrink: 0 !important;
}
.qf-voir-plus {
  font-size: .72rem;
  font-weight: 700;
  color: var(--qf-orange) !important;
  text-transform: lowercase;
  letter-spacing: .02em;
  flex-shrink: 0;
}
.qf-voir-plus:hover { color: var(--qf-orange-dark) !important; }


/* ══════════════════════════════════════════════════════════════
   3.B. NEUTRALISATION DU CORE WORDPRESS (homepage)
        WP 6 colle automatiquement has-global-padding /
        is-layout-constrained / is-layout-flow / wp-container-*
        sur chaque wp-block-group et wp-block-post-template.
        Ces classes cassent le flex/grid et ajoutent des paddings
        parasites. On les neutralise spécifiquement sur nos blocs.
   ══════════════════════════════════════════════════════════════ */

/* ─── Cartes : plus de padding horizontal / max-width hérités ── */
.qf-event-card,
.qf-spot-card,
.qf-guide-card,
.qf-actus-card {
  padding: 0 !important;
  max-width: none !important;
}

/* Date de publication sur les cartes événement (complément du badge event) */
.qf-actus-card .qf-pub-date {
  font-size: .68rem;
  color: var(--qf-gris);
  margin-top: 4px;
}
.qf-actus-card .qf-pub-date time {
  color: inherit;
}

/* Meta carte : "2 min de lecture | Publié le 25/07/26" — compact, 1 ligne */
.qf-actus-card .wp-block-post-date,
.qf-actus-card .qf-pub-date {
  font-size: .68rem;
  line-height: 1.3;
  color: var(--qf-gris);
  white-space: nowrap;   /* jamais de retour à la ligne */
  overflow: hidden;      /* sécurité si carte très étroite */
  text-overflow: ellipsis;
}
.qf-meta-sep {
  opacity: .45;
  margin: 0 1px;
}

/* ── Date/méta carte : 2 rendus harmonisés (homepage + archives) ──
   Desktop / carte large  : "3 min de lecture | Publié le 19/06/25"
   Carte étroite (mobile) : "3 min | 19/06/25" — on retire le texte
   superflu (« de lecture », « Publié le ») au lieu de tronquer (…),
   pour garder la date visible sur UNE seule ligne.
   S'appuie sur container-type:inline-size déjà posé sur .qf-actus-card. */
@container (max-width: 240px) {
  .qf-actus-card .qf-read-suffix,
  .qf-actus-card .qf-pub-prefix {
    display: none !important;
  }
}
/* Repli sans support des container queries : on bascule en compact sous 600px */
@supports not (container-type: inline-size) {
  @media (max-width: 600px) {
    .qf-actus-card .qf-read-suffix,
    .qf-actus-card .qf-pub-prefix {
      display: none !important;
    }
  }
}

/* Pastille date événement — positionnée en haut à droite de la card */
.qf-actus-card {
  container-type: inline-size;
  position: relative; /* nécessaire pour position:absolute du badge event-date */
}
.qf-actus-card .qf-event-date {
  position: absolute !important;
  right: 8px;
  top: 8px;
  margin: 0 !important;
  z-index: 2;
}
.qf-actus-card .qf-event-date time {
  display: inline-block;
  background: var(--qf-orange);
  color: #fff !important;
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 2px 8px;
  border-radius: 4px;
  line-height: 1.6;
}
.qf-event-card.has-global-padding,
.qf-spot-card.has-global-padding,
.qf-guide-card.has-global-padding,
.qf-actus-card.has-global-padding {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.qf-event-card > *,
.qf-spot-card > *,
.qf-guide-card > *,
.qf-actus-card > * {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ─── Query Loops : on force flex/grid malgré is-layout-flow ──── */
.qf-events-scroll > ul.wp-block-post-template,
.qf-events-scroll ul.wp-block-post-template.is-layout-flow {
  display: flex !important;
  flex-wrap: nowrap !important;
  flex-direction: row !important;
}
.qf-guides-grid > ul.wp-block-post-template,
.qf-guides-grid ul.wp-block-post-template.is-layout-flow,
.qf-actus-grid  > ul.wp-block-post-template,
.qf-actus-grid  ul.wp-block-post-template.is-layout-flow,
.qf-spots-grid  > ul.wp-block-post-template,
.qf-spots-grid  ul.wp-block-post-template.is-layout-flow,
.qf-derniers    > ul.wp-block-post-template,
.qf-derniers    ul.wp-block-post-template.is-layout-flow {
  display: grid !important;
}

/* ─── Annule le margin-block-start injecté par is-layout-flow ─── */
.qf-events-scroll ul.wp-block-post-template > *,
.qf-guides-grid  ul.wp-block-post-template > *,
.qf-actus-grid   ul.wp-block-post-template > *,
.qf-spots-grid   ul.wp-block-post-template > *,
.qf-une-main     ul.wp-block-post-template > *,
.qf-liste        ul.wp-block-post-template > *,
.qf-derniers     ul.wp-block-post-template > * {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

/* ─── Bloc "Newsletter" : on bride aussi ──────── */
.qf-newsletter > * {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ─── Hero : on neutralise le padding global hérité ───────────── */
.qf-hero-home.has-global-padding {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.qf-hero-home > * {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* Exception : la barre de recherche reste limitée à 600px et centrée
   (sélecteur plus spécifique + !important pour battre .qf-hero-home > *) */
.qf-hero-home > .qf-home-search {
  max-width: 600px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ─── "À la Une" : neutralise le wrapper constrained de la carte ─ */
.qf-une-main .qf-une-card {
  max-width: none !important;
}
.qf-une-main .qf-une-card > * {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ─── Grille articles : neutralise les wrappers WP ────────────── */
.qf-liste li.wp-block-post > .wp-block-group:not(.qf-actus-card) {
  padding: 12px 14px 14px !important;
  max-width: none !important;
}
.qf-liste li.wp-block-post > .wp-block-group > * {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ─── Titres et "Voir tout" : forcer la largeur pleine ────────── */
.qf-titre-section-wrap,
.qf-themes-grid {
  max-width: var(--wp--style--global--content-size, 1080px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}


/* ══════════════════════════════════════════════════════════════
   4. HOMEPAGE — HERO
   ══════════════════════════════════════════════════════════════ */
.qf-hero-home {
  max-width: var(--wp--style--global--content-size);
  margin-inline: auto;
}

.qf-hero-title {
  font-size: clamp(1.8rem, 6vw, 2.4rem) !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 10px !important;
  color: var(--qf-noir) !important;
}
.qf-hero-title .qf-accent { color: var(--qf-orange); }

/* Titre du hero sur UNE seule ligne à partir du desktop (≥768px) :
   on masque le retour à la ligne, l'espace avant <br> assure la séparation.
   En mobile, le <br> reste actif → titre sur deux lignes. */
@media (min-width: 768px) {
  .qf-hero-title .qf-hero-br { display: none; }
}

.qf-hero-subtitle {
  color: var(--qf-gris) !important;
  font-size: .9rem !important;
  line-height: 1.5 !important;
  margin: 0 0 20px !important;
}

/* ── Centrage des éléments du hero (homepage uniquement) ──────────
   Scopé à body.home pour ne pas affecter les pages archives qui
   partagent .qf-info-pills / .qf-hero-* */
body.home .qf-info-pills {
  justify-content: center;
}
body.home .qf-hero-title,
body.home .qf-hero-subtitle {
  text-align: center;
}

.qf-home-search {
  display: flex; align-items: center; gap: 10px;
  background: #fff;
  border: 1px solid var(--qf-neu-bg);
  border-radius: 100px;
  padding: 10px 18px;
  max-width: 600px; margin: 0 auto 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
  transition: box-shadow var(--t), border-color var(--t);
}
.qf-home-search:focus-within {
  border-color: var(--qf-orange);
  box-shadow: 0 4px 14px rgba(228,84,4,.12);
}
.qf-home-search svg { color: var(--qf-gris); flex-shrink: 0; }
.qf-home-search input {
  flex: 1; border: 0; outline: 0; background: transparent;
  font: 400 .88rem 'Poppins', sans-serif;
  color: var(--qf-texte);
}
.qf-home-search input::placeholder { color: #aaa; }

.qf-chips {
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center; margin-top: 12px;
}
.qf-chip {
  display: inline-flex; align-items: center;
  padding: 7px 14px;
  background: #fff;
  border: 1px solid var(--qf-neu-bg);
  border-radius: 100px;
  font: 700 .72rem 'Poppins', sans-serif;
  color: var(--qf-texte) !important;
  transition: all var(--t);
}
.qf-chip:hover {
  border-color: var(--qf-orange);
  color: var(--qf-orange) !important;
}
.qf-chip-active {
  background: var(--qf-orange);
  border-color: var(--qf-orange);
  color: #fff !important;
}
.qf-chip-active:hover {
  color: #fff !important;
  background: var(--qf-orange-dark);
  border-color: var(--qf-orange-dark);
}

/* ══════════════════════════════════════════════════════════════
   PASTILLES DE FILTRE PAR THÈME (.qf-filter-chip)
   ──────────────────────────────────────────────────────────────
   Générées dans le hero d'archive par qf_inject_archive_hero(),
   pilotées par qf-tag-filter.js (état actif = classe .is-active).
   Style calqué sur .qf-chip. (Ces règles manquaient au stylesheet :
   le HTML utilise .qf-filter-chip alors que le CSS ne couvrait que
   .qf-chip — d'où la perte de mise en forme.)
   ══════════════════════════════════════════════════════════════ */
.qf-explore-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* chips centrées comme l'entête de la home */
  gap: 8px;
  margin: 0 0 1.5rem;
}
.qf-filter-chip {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  background: #fff;
  border: 1px solid var(--qf-neu-bg);
  border-radius: 100px;
  font: 700 .72rem 'Poppins', sans-serif;
  color: var(--qf-texte);
  line-height: 1;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: all var(--t);
}
.qf-filter-chip:hover {
  border-color: var(--qf-orange);
  color: var(--qf-orange);
}
.qf-filter-chip.is-active {
  background: var(--qf-orange);
  border-color: var(--qf-orange);
  color: #fff;
}
.qf-filter-chip.is-active:hover {
  background: var(--qf-orange-dark);
  border-color: var(--qf-orange-dark);
  color: #fff;
}
/* Bouton « Plus » éventuel (qf-filter-more-btn) : variante discrète */
.qf-filter-more-btn {
  background: transparent;
  border-style: dashed;
  color: var(--qf-gris);
}

/* ── LEGACY — NAVIGATION CATÉGORIES (3 gros boutons hero) ──────────────
   Remplacée par le menu bas glassmorphisme .qf-bottom-nav (fin de fichier).
   Conservée au cas où d'anciens templates l'utiliseraient. Ne pas supprimer.
   ──────────────────────────────────────────────────────────────────────── */
.qf-nav-cats {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  width: 100%;
}
.qf-nav-cat {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px 12px;
  border-radius: 14px;
  border: 2px solid #e0e0e0;
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none !important;
  color: #d0d0d0;
  background: transparent;
  transition: background var(--t), color var(--t), border-color var(--t);
}
.qf-nav-cat:hover,
.qf-nav-cat--active {
  background: var(--qf-orange) !important;
  border-color: var(--qf-orange) !important;
  color: #fff !important;
}


/* ── LEGACY v3 — .qf-event-card (remplacé par .qf-actus-card) ─────────────
   Ces règles sont conservées au cas où d'anciens templates les utilisent.
   Ne pas supprimer sans vérifier l'absence de références dans les templates.
   ──────────────────────────────────────────────────────────────────────── */
/* ══════════════════════════════════════════════════════════════
   5. HOMEPAGE — ÉVÉNEMENTS DU MOMENT (scroll horizontal)
   ══════════════════════════════════════════════════════════════ */
.qf-events-scroll ul.wp-block-post-template {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 12px !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  padding: 0 0 8px !important;
  margin: 0 !important;
  list-style: none !important;
}
.qf-events-scroll ul.wp-block-post-template::-webkit-scrollbar { height: 0; }
.qf-events-scroll li.wp-block-post {
  flex: 0 0 140px !important;
  scroll-snap-align: start;
  margin: 0 !important;
}

.qf-event-card {
  position: relative;
  padding: 0 !important;
}
.qf-event-card .wp-block-post-featured-image {
  margin: 0 !important;
  border-radius: var(--r) !important;
  overflow: hidden;
}
.qf-event-card .wp-block-post-featured-image img {
  width: 100% !important;
  border-radius: var(--r) !important;
  object-fit: cover;
}
.qf-event-card .qf-event-badge {
  position: absolute !important;
  top: 10px; left: 10px;
  background: var(--qf-orange);
  color: #fff !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  font-size: .68rem !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  line-height: 1.15 !important;
  margin: 0 !important;
  letter-spacing: .02em;
  box-shadow: 0 2px 8px rgba(228,84,4,.3);
}
.qf-event-card .qf-event-badge time { color: #fff !important; }
.qf-event-card .wp-block-post-title {
  font-size: .85rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  margin-top: 10px !important;
  margin-block-start: 10px !important;
}
.qf-event-card .wp-block-post-title a { color: var(--qf-noir) !important; }
.qf-event-card .wp-block-post-title a:hover { color: var(--qf-orange) !important; }
.qf-event-card .wp-block-post-terms,
.qf-event-card .wp-block-post-terms a {
  background: transparent !important;
  color: var(--qf-gris) !important;
  padding: 0 !important;
  font-size: .68rem !important;
  text-transform: none;
  font-weight: 400;
  letter-spacing: 0;
}


/* ── /LEGACY qf-event-card ──────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════
   6. HOMEPAGE — ACTUS (grille 2x2 → 4 desktop)
      Partagé avec qf-guides-grid (legacy) pour la rétro-compat.
   ══════════════════════════════════════════════════════════════ */
.qf-guides-grid ul.wp-block-post-template,
.qf-actus-grid  ul.wp-block-post-template {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.qf-guides-grid li.wp-block-post,
.qf-actus-grid  li.wp-block-post { margin: 0 !important; }

.qf-guide-card,
.qf-actus-card { padding: 0 !important; }
.qf-guide-card .wp-block-post-featured-image,
.qf-actus-card .wp-block-post-featured-image {
  aspect-ratio: 4 / 5 !important;
  margin: 0 !important;
  border-radius: var(--r) !important;
  overflow: hidden !important;
}
.qf-guide-card .wp-block-post-featured-image img,
.qf-actus-card .wp-block-post-featured-image img {
  width: 100% !important;
  height: 100% !important;
  border-radius: var(--r) !important;
  object-fit: cover !important;
  display: block !important;
}
.qf-actus-card .wp-block-post-title {
  font-size: .85rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  margin-top: 10px !important;
  margin-block-start: 10px !important;
}
.qf-guide-card .wp-block-post-title a,
.qf-actus-card .wp-block-post-title a { color: var(--qf-noir) !important; }
.qf-guide-card .wp-block-post-title a:hover,
.qf-actus-card .wp-block-post-title a:hover { color: var(--qf-orange) !important; }

/* Actus : excerpt court + meta date en petit */
.qf-actus-card .wp-block-post-excerpt {
  font-size: .78rem !important;
  color: #2c2c2c !important;
  line-height: 1.45 !important;
  margin: 4px 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.qf-actus-card .wp-block-post-date {
  font-size: .68rem !important;
  color: var(--qf-gris) !important;
  margin: 0 !important;
}
/* La règle globale passe <time> en display:block → ici on le garde EN LIGNE
   pour que "Publié le 19/06/26" ne casse jamais sur deux lignes. */
.qf-actus-card .wp-block-post-date time,
.qf-actus-card .wp-block-post-date .qf-read-time,
.qf-actus-card .wp-block-post-date .qf-pub-prefix {
  display: inline !important;
}


/* ══════════════════════════════════════════════════════════════
   COMPOSANT RÉUTILISABLE — SLIDER DE CARDS (.qf-cards-slider)
   ──────────────────────────────────────────────────────────────
   Transforme n'importe quel core/query contenant des .qf-actus-card
   en rangée défilable horizontalement (scroll-snap natif, zéro JS).
   Largeur des cards : 2 visibles sur mobile, 3 sur desktop — comme
   les grilles .qf-actus-grid. Réutilisable ailleurs : il suffit
   d'ajouter la classe qf-cards-slider sur le bloc core/query.
   NE PAS combiner avec .qf-actus-grid (sa règle nth-child masque
   les cards 3+ sur mobile et casserait le défilement).
   ══════════════════════════════════════════════════════════════ */
.qf-cards-slider ul.wp-block-post-template {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 12px !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  /* Aimantation (scroll-snap) activée UNIQUEMENT en tactile (voir media
     query mobile plus bas). Sur desktop elle annulerait le défilement à
     la molette piloté par qf-cards-slider.js (re-snap à chaque petit pas). */
  margin: 0 !important;
  padding: 0 0 10px !important;
  list-style: none !important;
  /* Barre de défilement fine et discrète — affordance "ça glisse"
     sur desktop (sans tactile). Firefox + Chrome/Safari. */
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,.28) transparent;
}
.qf-cards-slider ul.wp-block-post-template::-webkit-scrollbar { height: 6px; }
.qf-cards-slider ul.wp-block-post-template::-webkit-scrollbar-track { background: transparent; }
.qf-cards-slider ul.wp-block-post-template::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.28);
  border-radius: 3px;
}
.qf-cards-slider ul.wp-block-post-template::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,.45);
}
.qf-cards-slider li.wp-block-post {
  flex: 0 0 calc(50% - 6px) !important;   /* 2 cards visibles (mobile) */
  scroll-snap-align: start;
  margin: 0 !important;
}
@media (min-width: 768px) {
  .qf-cards-slider li.wp-block-post {
    flex: 0 0 calc(33.333% - 8px) !important;   /* 3 cards visibles (desktop) */
  }
}
/* Tactile (mobile) : on réactive l'aimantation pour un swipe net card par
   card. La molette desktop n'est pas concernée par ce breakpoint. */
@media (max-width: 767px) {
  .qf-cards-slider ul.wp-block-post-template {
    scroll-snap-type: x mandatory;
  }
}


/* ── LEGACY v3 — .qf-spot-card (remplacé par .qf-actus-card) ──────────────
   Ces règles sont conservées au cas où d'anciens templates les utilisent.
   Ne pas supprimer sans vérifier l'absence de références dans les templates.
   ──────────────────────────────────────────────────────────────────────── */
/* ══════════════════════════════════════════════════════════════
   7. HOMEPAGE — SPOTS À DÉCOUVRIR (grille + badge coup de ♥)
   ══════════════════════════════════════════════════════════════ */
.qf-spots-grid ul.wp-block-post-template {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.qf-spots-grid li.wp-block-post {
  margin: 0 !important;
  position: relative;
}
/* Badge "Coup de ♥" — injecté automatiquement sur les posts
   qui portent le tag 'coup-de-coeur' (classe WP native). */
.qf-spots-grid li.tag-coup-de-coeur::before {
  content: "Coup de ♥";
  position: absolute;
  top: 8px; left: 8px;
  background: rgba(255,255,255,.92);
  color: var(--qf-orange);
  padding: 3px 8px;
  border-radius: 100px;
  font-size: .62rem;
  font-weight: 800;
  z-index: 2;
  letter-spacing: .02em;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

.qf-spot-card { padding: 0 !important; }
.qf-spot-card .wp-block-post-featured-image {
  aspect-ratio: 4 / 5 !important;
  margin: 0 !important;
  border-radius: var(--r) !important;
  overflow: hidden !important;
}
.qf-spot-card .wp-block-post-featured-image img {
  width: 100% !important;
  height: 100% !important;
  border-radius: var(--r) !important;
  object-fit: cover !important;
  display: block !important;
}
.qf-spot-card .wp-block-post-title {
  font-size: .85rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  margin-top: 10px !important;
  margin-block-start: 10px !important;
}
.qf-spot-card .wp-block-post-title a { color: var(--qf-noir) !important; }
.qf-spot-card .wp-block-post-title a:hover { color: var(--qf-orange) !important; }
.qf-spot-card .wp-block-post-terms a {
  background: var(--qf-orange) !important;
  color: #fff !important;
  font-size: .6rem !important;
  font-weight: 700 !important;
  padding: 2px 7px !important;
  border-radius: 4px !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  text-decoration: none !important;
}


/* ── /LEGACY qf-spot-card ───────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════
   8. SHORTCODE [qf_themes] — grille de sous-catégories
   ══════════════════════════════════════════════════════════════ */
.qf-bp-item {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: 10px 6px;
  gap: 6px;
  color: #fff !important;
  transition: transform var(--t);
}
.qf-bp-item:hover { transform: translateY(-2px); color: #fff !important; }
.qf-bp-icon {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 1.5px solid var(--qf-orange);
  border-radius: 50%;
  color: var(--qf-orange);
}
.qf-bp-label {
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1.2;
}
.qf-bp-sub {
  font-size: .62rem;
  color: rgba(255,255,255,.55);
  line-height: 1.25;
}


/* ══════════════════════════════════════════════════════════════
   9. HOMEPAGE — À LA UNE (article sticky)
      Image portrait 4:5 + carte blanche chevauchante
   ══════════════════════════════════════════════════════════════ */
.qf-une-wrap { padding: 0 !important; }

.qf-une-main { margin-bottom: 24px !important; }
.qf-une-main ul.wp-block-post-template {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.qf-une-main li.wp-block-post {
  position: relative !important;
  /* pas de overflow:hidden ici — la carte doit déborder */
}

/* Image portrait 4:5 (ratio Instagram 1080×1350) */
.qf-une-main .wp-block-post-featured-image {
  aspect-ratio: 4 / 5 !important;
  overflow: hidden !important;
  border-radius: var(--r) !important;
  margin: 0 !important;
}
.qf-une-main .wp-block-post-featured-image a {
  display: block !important;
  height: 100% !important;
}
.qf-une-main .wp-block-post-featured-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Carte blanche qui dépasse légèrement au-dessus du bas de l'image */
.qf-une-main .qf-une-card {
  background: #fff !important;
  border-radius: var(--r) !important;
  box-shadow: 0 -2px 16px rgba(0,0,0,.08), 0 6px 24px rgba(0,0,0,.10) !important;
  padding: 20px 20px 24px !important;
  margin: -44px 14px 0 !important;  /* remonte de 44px dans l'image */
  position: relative !important;
  z-index: 2 !important;
}

/* Catégorie */
.qf-une-main .wp-block-post-terms {
  margin-bottom: 8px !important;
}
.qf-une-main .wp-block-post-terms a {
  background: var(--qf-orange) !important;
  color: #fff !important;
  font-size: .6rem !important;
  font-weight: 700 !important;
  padding: 3px 9px !important;
  border-radius: 20px !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  text-decoration: none !important;
}

/* Titre */
.qf-une-main .wp-block-post-title {
  font-size: clamp(1.1rem, 4vw, 1.5rem) !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  margin: 8px 0 10px !important;
  color: var(--qf-noir) !important;
  padding-left: 0 !important;
}
.qf-une-main .wp-block-post-title a { color: var(--qf-noir) !important; }
.qf-une-main .wp-block-post-title a:hover { color: var(--qf-orange) !important; }

/* Extrait */
.qf-une-main .wp-block-post-excerpt {
  font-size: .82rem !important;
  color: #2c2c2c !important;
  line-height: 1.55 !important;
  margin-bottom: 16px !important;
}
.qf-une-main .wp-block-post-excerpt p { margin: 0 !important; }
.qf-une-main .wp-block-post-excerpt__more-link { display: none !important; }

/* CTA "Lire l'article →" */
.qf-une-main .wp-block-read-more {
  display: inline-block !important;
  background: var(--qf-orange) !important;
  color: #fff !important;
  font-size: .8rem !important;
  font-weight: 700 !important;
  padding: 9px 22px !important;
  border-radius: 100px !important;
  text-decoration: none !important;
  transition: opacity var(--t) !important;
}
.qf-une-main .wp-block-read-more:hover { opacity: .88 !important; }


/* ══════════════════════════════════════════════════════════════
   10. HOMEPAGE — GRILLE ARTICLES (qf-liste — LEGACY / qf-derniers autonome)
       qf-liste     : LEGACY — plus utilisé sur homepage-v2 (conservé pour archives éventuelles)
       qf-derniers  : grille autonome 2 col mobile / 3 col desktop (640px+)
   ══════════════════════════════════════════════════════════════ */

/* Grille de base : 2 colonnes (mobile + qf-liste seul) */
.qf-liste ul.wp-block-post-template {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
}

/* Carte article */
.qf-liste li.wp-block-post {
  display: flex !important;
  flex-direction: column !important;
  background: #fff !important;
  border-radius: var(--r) !important;
  overflow: hidden !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.07) !important;
  border: none !important;
  margin: 0 !important;
}

/* Image portrait 4:5 */
.qf-liste .wp-block-post-featured-image {
  aspect-ratio: 4 / 5 !important;
  overflow: hidden !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}
.qf-liste .wp-block-post-featured-image a {
  display: block !important;
  height: 100% !important;
}
.qf-liste .wp-block-post-featured-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  display: block !important;
}

/* Bloc texte (uniquement pour l'ancienne structure sans qf-actus-card) */
.qf-liste .wp-block-group:not(.qf-actus-card) {
  flex: 1 !important;
  padding: 12px 14px 14px !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Catégorie */
.qf-liste .wp-block-post-terms {
  margin-bottom: 5px !important;
}
.qf-liste .wp-block-post-terms a {
  background: var(--qf-orange) !important;
  color: #fff !important;
  font-size: .58rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  text-decoration: none !important;
  padding: 2px 7px !important;
  border-radius: 4px !important;
}

/* Titre */
.qf-liste .wp-block-post-title {
  font-size: .88rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  color: var(--qf-noir) !important;
  margin: 4px 0 8px !important;
}
.qf-liste .wp-block-post-title a { color: var(--qf-noir) !important; }
.qf-liste .wp-block-post-title a:hover { color: var(--qf-orange) !important; }

/* Extrait */
.qf-liste .wp-block-post-excerpt {
  font-size: .76rem !important;
  color: #2c2c2c !important;
  line-height: 1.5 !important;
  margin-bottom: 8px !important;
  flex: 1 !important;
}
.qf-liste .wp-block-post-excerpt p { margin: 0 !important; }
.qf-liste .wp-block-post-excerpt__more-link { display: none !important; }

/* Date */
.qf-liste .wp-block-post-date {
  margin: 0 !important;
  text-align: left !important;
  color: var(--qf-gris) !important;
  font-size: .65rem !important;
}

/* Grille "Derniers articles" : autonome (indépendante de qf-liste) */
.qf-derniers ul.wp-block-post-template {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
}
@media (min-width: 768px) {
  .qf-derniers ul.wp-block-post-template {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* "Derniers articles" en version SLIDER : si la classe qf-cards-slider est
   ajoutée au bloc query (à côté de qf-derniers), on neutralise la grille
   au profit du défilement horizontal. Spécificité (0,4,1) > grille (0,3,1).
   La grille reste le comportement par défaut si qf-cards-slider est absent. */
.qf-derniers.qf-cards-slider > ul.wp-block-post-template,
.qf-derniers.qf-cards-slider ul.wp-block-post-template,
.qf-derniers.qf-cards-slider ul.wp-block-post-template.is-layout-flow {
  display: flex !important;
}


/* ══════════════════════════════════════════════════════════════
   11. HOMEPAGE — EXPLORER PAR THÈME (grille icônes)
   ══════════════════════════════════════════════════════════════ */
.qf-themes-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 0 0 28px;
}
.qf-theme {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 6px;
  padding: 16px 8px;
  background: #f7f7f5;
  border-radius: var(--r);
  color: var(--qf-noir) !important;
  font-size: .74rem;
  font-weight: 700;
  text-align: center;
  transition: all var(--t);
}
.qf-theme:hover {
  background: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
  color: var(--qf-orange) !important;
  transform: translateY(-2px);
}
.qf-theme-ico {
  font-size: 1.4rem;
  line-height: 1;
}
.qf-theme-ico svg {
  width: 1.4rem;
  height: 1.4rem;
  display: block;
}


/* ══════════════════════════════════════════════════════════════
   12. HOMEPAGE — CTA NEWSLETTER
   ══════════════════════════════════════════════════════════════ */
.qf-newsletter {
  background: var(--qf-orange) !important;
  color: #fff !important;
  border-radius: 20px !important;
  padding: 28px 24px !important;
  box-shadow: var(--neu-cta) !important;
  border: none !important;
  position: relative;
  overflow: hidden;
}
.qf-newsletter::after {
  content: "";
  position: absolute;
  top: 50%; right: -20px;
  transform: translateY(-50%) rotate(-20deg);
  width: 120px; height: 120px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' opacity='0.18'><path d='M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z'/></svg>") no-repeat center / contain;
  pointer-events: none;
}
.qf-newsletter .wp-block-heading,
.qf-newsletter h2,
.qf-newsletter h3 {
  color: #fff !important;
}
.qf-newsletter p {
  color: rgba(255,255,255,.88) !important;
}
.qf-newsletter-form {
  display: flex; gap: 8px;
  background: #fff;
  border-radius: 100px;
  padding: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,.1);
  position: relative; z-index: 1;
}
.qf-newsletter-form input {
  flex: 1;
  border: 0; outline: 0; background: transparent;
  padding: 0 14px;
  font: 400 .85rem 'Poppins', sans-serif;
  color: var(--qf-texte);
}
.qf-newsletter-form input::placeholder { color: #aaa; }
.qf-newsletter-form button {
  border: 0;
  background: var(--qf-noir);
  color: #fff;
  padding: 10px 22px;
  border-radius: 100px;
  font: 700 .78rem 'Poppins', sans-serif;
  cursor: pointer;
  transition: background var(--t);
}
.qf-newsletter-form button:hover { background: #000; }

/* ── Override styles injectés par Infomaniak (statslive) ─────
   Le script crée une classe unique [class^="inf-main_"].
   On écrase tout pour coller au design orange du footer.
   ─────────────────────────────────────────────────────────── */
.qf-newsletter [class^="inf-main_"] {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  color: #fff !important;
  box-shadow: none !important;
}
.qf-newsletter [class^="inf-main_"] h4 {
  color: #fff !important;
  font-size: 1.3rem !important;
  font-weight: 800 !important;
  font-family: 'Poppins', sans-serif !important;
  margin: 0 0 8px !important;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.qf-newsletter [class^="inf-main_"] span,
.qf-newsletter [class^="inf-main_"] label,
.qf-newsletter [class^="inf-main_"] p {
  color: rgba(255,255,255,0.88) !important;
  font-size: 0.88rem !important;
}
/* Zone contenu : empilement vertical */
.qf-newsletter .inf-content {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin-top: 16px !important;
  background: transparent !important;
}
/* Input email : pill blanc */
.qf-newsletter .inf-input {
  margin: 0 !important;
}
.qf-newsletter .inf-input input {
  width: 100% !important;
  border: none !important;
  outline: none !important;
  background: #fff !important;
  border-radius: 100px !important;
  padding: 12px 20px !important;
  font: 400 0.85rem 'Poppins', sans-serif !important;
  color: #333 !important;
  box-sizing: border-box !important;
  height: auto !important;
}
/* RGPD + Altcha : petite typo blanche */
.qf-newsletter .inf-rgpd,
.qf-newsletter .inf-rgpd label,
.qf-newsletter altcha-widget {
  font-size: 0.72rem !important;
  color: rgba(255,255,255,0.7) !important;
}
/* Bulle altcha (popup au clic) : fond blanc → texte noir lisible */
.qf-newsletter altcha-widget * {
  color: #111 !important;
}
altcha-widget [part="dialog"],
altcha-widget [part="popup"],
altcha-widget .altcha-popup,
altcha-widget .altcha-dialog {
  color: #111 !important;
  background: #fff !important;
}
/* Bouton submit */
.qf-newsletter .inf-submit {
  margin: 0 !important;
}
.qf-newsletter .inf-submit input {
  width: 100% !important;
  border: none !important;
  background: var(--qf-noir) !important;
  color: #fff !important;
  padding: 12px 24px !important;
  border-radius: 100px !important;
  font: 700 0.85rem 'Poppins', sans-serif !important;
  cursor: pointer !important;
  height: auto !important;
  transition: background var(--t) !important;
}
.qf-newsletter .inf-submit input:hover {
  background: #000 !important;
}
/* Message de confirmation — bulle fond noir
   Attention : pas de display !important ici → le display:none inline d'Infomaniak doit être respecté */
.qf-newsletter .inf-success:not([style*="display:none"]) {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
}
.qf-newsletter .inf-success {
  background: var(--qf-noir) !important;
  border-radius: var(--r-lg, 16px) !important;
  padding: 20px 24px !important;
  margin-top: 12px !important;
}
.qf-newsletter .inf-success::before {
  content: '';
  display: block !important;
  flex-shrink: 0 !important;
  width: 32px !important;
  height: 32px !important;
  margin-top: 2px !important;
  background-color: transparent !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z' fill='%23e45404'/%3E%3Cline x1='12' y1='9' x2='12' y2='13' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='17' r='1' fill='%23fff'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}
.qf-newsletter .inf-success > *:not(::before) {
  flex: 1 !important;
}
.qf-newsletter .inf-success h4 {
  color: #fff !important;
  font-weight: 800 !important;
  font-size: 1rem !important;
  margin-bottom: 6px !important;
}
.qf-newsletter .inf-success p {
  color: rgba(255,255,255,0.9) !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  line-height: 1.5 !important;
}
.qf-newsletter .inf-success .qf-orange {
  color: var(--qf-orange) !important;
  font-weight: 700 !important;
}
.qf-newsletter .inf-success a.inf-btn {
  display: none !important;
}


/* ══════════════════════════════════════════════════════════════
   13. HOMEPAGE — RESPONSIVE
   ══════════════════════════════════════════════════════════════ */

/* ── Mobile : 2 colonnes, 2 articles max par section ────────── */
@media (max-width: 767px) {

  /* Événements : désactive le scroll horizontal, passe en grille 2 colonnes */
  .qf-events-scroll ul.wp-block-post-template {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    scroll-snap-type: none !important;
  }
  .qf-events-scroll li.wp-block-post {
    flex: 0 0 calc(50% - 6px) !important;
    scroll-snap-align: none !important;
  }

  /* Masque les articles au-delà du 2ème sur mobile */
  .qf-events-scroll li.wp-block-post:nth-child(n+3),
  .qf-actus-grid   li.wp-block-post:nth-child(n+3),
  .qf-spots-grid   li.wp-block-post:nth-child(n+3) {
    display: none !important;
  }
}

/* ── Desktop : 3 colonnes ────────────────────────────────────── */
@media (min-width: 768px) {
  .qf-events-scroll li.wp-block-post { flex: 0 0 calc(33.333% - 8px) !important; }
  .qf-guides-grid ul.wp-block-post-template,
  .qf-actus-grid  ul.wp-block-post-template,
  .qf-spots-grid  ul.wp-block-post-template {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .qf-themes-grid { grid-template-columns: repeat(8, 1fr); }
}


/* ══════════════════════════════════════════════════════════════
   ══════════════════════════════════════════════════════════════

          L E G A C Y  —  CLASSES v3.0.0 PRÉSERVÉES

   Ces classes viennent du style.css original. Elles ne sont plus
   utilisées sur la homepage v2, mais restent disponibles pour
   d'autres templates (single post, archives catégorie, pages).

   Si tu veux les supprimer définitivement plus tard, il suffit
   d'effacer le bloc entre "BEGIN LEGACY" et "END LEGACY".
   ══════════════════════════════════════════════════════════════
   ══════════════════════════════════════════════════════════════ */

/* ─── BEGIN LEGACY ──────────────────────────────────────────── */

/* ══════════════════════════════════════════════
   LEGACY · HERO — FORMAT 4:5 PORTRAIT
   ══════════════════════════════════════════════ */
.qf-hero ul.wp-block-post-template {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.qf-hero .wp-block-cover {
  aspect-ratio: 4 / 5 !important;
  min-height: unset !important;
  width: 100% !important;
  border-radius: 0 !important;
  overflow: hidden !important;
}
.qf-hero .wp-block-cover__inner-container {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  height: 100% !important;
  padding: 24px 16px !important;
}
.qf-hero .wp-block-post-title {
  font-size: clamp(1.3rem, 5vw, 2rem) !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  color: #fff !important;
  margin: 8px 0 6px !important;
}
.qf-hero .wp-block-post-title a { color: #fff !important; }
.qf-hero .wp-block-post-date  { color: rgba(255,255,255,.6) !important; font-size: .72rem !important; }
.qf-hero .wp-block-cover .wp-block-cover__image-background {
  transition: transform .5s cubic-bezier(.4,0,.2,1) !important;
}
.qf-hero li.wp-block-post:hover .wp-block-cover .wp-block-cover__image-background {
  transform: scale(1.03) !important;
}
@media (min-width: 768px) {
  .qf-hero .wp-block-cover {
    aspect-ratio: 16 / 7 !important;
    border-radius: var(--r-lg) !important;
  }
  .qf-hero .wp-block-post-title {
    font-size: clamp(1.6rem, 4vw, 2.2rem) !important;
    max-width: 22ch !important;
  }
  .qf-hero .wp-block-cover__inner-container {
    padding: 32px 36px !important;
  }
}


/* ══════════════════════════════════════════════
   LEGACY · STORIES — format carré 1:1
   ══════════════════════════════════════════════ */
.qf-stories ul.wp-block-post-template {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}
.qf-stories ul.wp-block-post-template > li,
.qf-stories ul.wp-block-post-template > * {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}
.qf-stories li.wp-block-post {
  width: 100% !important;
  border-radius: var(--r) !important;
  overflow: hidden !important;
  background: #fff !important;
  border: .5px solid rgba(0,0,0,.06) !important;
  display: flex !important;
  flex-direction: column !important;
}
.qf-stories .wp-block-post-featured-image img {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  display: block !important;
}
.qf-stories .wp-block-post-title {
  font-size: .82rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  color: var(--qf-noir) !important;
  margin: 6px 0 4px !important;
  padding: 0 10px !important;
}
.qf-stories .wp-block-post-title a { color: var(--qf-noir) !important; }
.qf-stories .wp-block-post-title a:hover { color: var(--qf-orange) !important; }
.qf-stories .wp-block-post-terms { padding: 8px 10px 0 !important; }
.qf-stories .wp-block-post-date {
  font-size: .68rem !important;
  color: var(--qf-gris) !important;
  padding: 0 10px 10px !important;
  display: block !important;
}
@media (min-width: 600px) {
  .qf-stories ul.wp-block-post-template {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-rows: auto !important;
    align-items: stretch !important;
  }
  .qf-stories li.wp-block-post { width: 100% !important; }
}


/* ══════════════════════════════════════════════
   LEGACY · GRID — 2 / 3 colonnes format carré
   ══════════════════════════════════════════════ */
.qf-grid ul.wp-block-post-template {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}
.qf-grid ul.wp-block-post-template > li,
.qf-grid ul.wp-block-post-template > * {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}
.qf-grid li.wp-block-post {
  width: 100% !important;
  border-radius: var(--r) !important;
  overflow: hidden !important;
  background: #fff !important;
  border: .5px solid rgba(0,0,0,.06) !important;
  display: flex !important;
  flex-direction: column !important;
}
.qf-grid .wp-block-post-featured-image img {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  display: block !important;
}
.qf-grid .wp-block-post-title {
  font-size: .82rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  color: var(--qf-noir) !important;
  margin: 6px 0 4px !important;
  padding: 0 10px !important;
}
.qf-grid .wp-block-post-title a { color: var(--qf-noir) !important; }
.qf-grid .wp-block-post-title a:hover { color: var(--qf-orange) !important; }
.qf-grid .wp-block-post-terms { padding: 8px 10px 0 !important; }
.qf-grid .wp-block-post-date {
  font-size: .68rem !important;
  color: var(--qf-gris) !important;
  padding: 0 10px 10px !important;
  display: block !important;
}
@media (min-width: 600px) {
  .qf-grid ul.wp-block-post-template {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-rows: auto !important;
    align-items: stretch !important;
  }
}


/* ══════════════════════════════════════════════
   LEGACY · VIDEO — format vertical 9:16
   ══════════════════════════════════════════════ */
.qf-video ul.wp-block-post-template {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.qf-video .wp-block-cover {
  aspect-ratio: 9 / 16 !important;
  min-height: unset !important;
  max-height: 520px !important;
  width: 100% !important;
  border-radius: var(--r-lg) !important;
  overflow: hidden !important;
}
.qf-video .wp-block-cover__inner-container {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  height: 100% !important;
  padding: 20px 16px !important;
}
.qf-video .wp-block-post-title {
  font-size: 1.05rem !important;
  font-weight: 900 !important;
  color: #fff !important;
  line-height: 1.25 !important;
  margin: 8px 0 5px !important;
}
.qf-video .wp-block-post-title a { color: #fff !important; }
.qf-video .wp-block-post-date { color: rgba(255,255,255,.6) !important; font-size: .72rem !important; }
@media (min-width: 768px) {
  .qf-video .wp-block-cover {
    aspect-ratio: 16 / 9 !important;
    max-height: none !important;
    border-radius: var(--r-lg) !important;
  }
}


/* ══════════════════════════════════════════════
   LEGACY · POPULAIRES — sidebar numérotée
   ══════════════════════════════════════════════ */
.qf-populaires ul.wp-block-post-template {
  list-style: none !important;
  counter-reset: qf-top !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}
.qf-populaires li.wp-block-post {
  counter-increment: qf-top !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  padding: 10px 0 !important;
  border-bottom: .5px solid rgba(0,0,0,.07) !important;
}
.qf-populaires li.wp-block-post:last-child { border-bottom: none !important; }
.qf-populaires li.wp-block-post::before {
  content: counter(qf-top) !important;
  font-size: 1.1rem !important;
  font-weight: 900 !important;
  color: var(--qf-orange) !important;
  min-width: 20px !important;
  line-height: 1.2 !important;
  flex-shrink: 0 !important;
}
.qf-populaires .wp-block-post-title {
  font-size: .82rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  color: var(--qf-noir) !important;
}
.qf-populaires .wp-block-post-title a { color: var(--qf-noir) !important; }
.qf-populaires .wp-block-post-title a:hover { color: var(--qf-orange) !important; }


/* ══════════════════════════════════════════════
   LEGACY · CARTES CATÉGORIES
   ══════════════════════════════════════════════ */
.qf-cat {
  background: #fff !important;
  border-radius: var(--r) !important;
  border: .5px solid rgba(0,0,0,.07) !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: border-color var(--t), transform var(--t) !important;
}
.qf-cat:hover {
  border-color: var(--qf-orange) !important;
  transform: translateY(-2px) !important;
}
.qf-cat .wp-block-image img {
  width: 44px !important;
  height: 44px !important;
  margin: 0 auto !important;
}
.qf-cat .wp-block-heading {
  font-size: .85rem !important;
  font-weight: 700 !important;
  color: var(--qf-noir) !important;
  text-align: center !important;
  margin: 0 0 3px !important;
}
.qf-cat p {
  font-size: .68rem !important;
  color: var(--qf-gris) !important;
  text-align: center !important;
  margin: 0 !important;
}


/* ══════════════════════════════════════════════
   LEGACY · AGENDA — 4 cartes avec date orange
   ══════════════════════════════════════════════ */
.qf-agenda ul.wp-block-post-template {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.qf-agenda ul.wp-block-post-template > li,
.qf-agenda ul.wp-block-post-template > * {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}
.qf-agenda li.wp-block-post {
  border-radius: var(--r) !important;
  overflow: hidden !important;
  background: #fff !important;
  border: .5px solid rgba(0,0,0,.06) !important;
  display: flex !important;
  flex-direction: column !important;
}
.qf-agenda .wp-block-post-featured-image img {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  display: block !important;
}
.qf-agenda .wp-block-post-date {
  background: var(--qf-orange) !important;
  color: #fff !important;
  font-size: .82rem !important;
  font-weight: 700 !important;
  padding: 7px 12px !important;
  margin: 0 !important;
  text-align: left !important;
}
.qf-agenda .wp-block-post-date time { color: #fff !important; }
.qf-agenda .taxonomy-category {
  margin: 0 !important;
  padding: 8px 10px 0 !important;
  text-align: left !important;
}
.qf-agenda .wp-block-post-title {
  font-size: .82rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  color: var(--qf-noir) !important;
  padding: 4px 10px 12px !important;
  margin: 0 !important;
}
.qf-agenda .wp-block-post-title a { color: var(--qf-noir) !important; }
.qf-agenda .wp-block-post-title a:hover { color: var(--qf-orange) !important; }
@media (min-width: 600px) {
  .qf-agenda ul.wp-block-post-template {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}


/* ══════════════════════════════════════════════
   LEGACY · QF-UNE — cover cinéma 21:9 + gradient
   (Ancien "À la Une" — remplacé sur la home par qf-une-main,
    mais utile pour single posts ou featured blocks ailleurs)
   ══════════════════════════════════════════════ */
.qf-une ul.wp-block-post-template {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.qf-une .wp-block-cover {
  aspect-ratio: 4 / 3 !important;
  min-height: unset !important;
  width: 100% !important;
  border-radius: var(--r-lg) !important;
  overflow: hidden !important;
  position: relative !important;
}
.qf-une .wp-block-cover .wp-block-cover__image-background,
.qf-une .wp-block-cover video {
  transition: transform .55s cubic-bezier(.4,0,.2,1) !important;
}
.qf-une li.wp-block-post:hover .wp-block-cover .wp-block-cover__image-background {
  transform: scale(1.045) !important;
}
.qf-une .wp-block-cover::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(to top,  rgba(0,0,0,.88) 0%,  rgba(0,0,0,.30) 45%, transparent 100%),
    linear-gradient(to right, rgba(0,0,0,.18) 0%, transparent 60%) !important;
  pointer-events: none !important;
  z-index: 1 !important;
  border-radius: inherit !important;
}
.qf-une .wp-block-cover__inner-container {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  height: 100% !important;
  padding: 24px 20px !important;
}
.qf-une .wp-block-post-terms { margin-bottom: 8px !important; }
.qf-une .wp-block-post-terms a {
  font-size: .6rem !important;
  letter-spacing: .14em !important;
  padding: 4px 10px !important;
  box-shadow: 0 0 10px 2px rgba(228,84,4,.4) !important;
}
.qf-une .wp-block-post-title {
  font-size: clamp(1.5rem, 5vw, 2.6rem) !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  letter-spacing: -.025em !important;
  color: #fff !important;
  margin: 6px 0 10px !important;
  text-shadow: 0 2px 16px rgba(0,0,0,.45) !important;
  max-width: 26ch !important;
}
.qf-une .wp-block-post-title a { color: #fff !important; }
.qf-une .wp-block-post-title a:hover { color: rgba(255,255,255,.85) !important; }
.qf-une .wp-block-post-date {
  color: rgba(255,255,255,.52) !important;
  font-size: .7rem !important;
  font-weight: 400 !important;
  margin: 0 !important;
  letter-spacing: .02em !important;
}
.qf-une .wp-block-post-excerpt {
  color: rgba(255,255,255,.75) !important;
  font-size: .88rem !important;
  line-height: 1.5 !important;
  margin: 6px 0 0 !important;
  max-width: 52ch !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.qf-une .wp-block-post-excerpt p { margin: 0 !important; }
.qf-une .wp-block-post-excerpt .wp-block-post-excerpt__more-link { display: none !important; }
@media (min-width: 768px) {
  .qf-une .wp-block-cover {
    aspect-ratio: 21 / 9 !important;
    border-radius: var(--r-lg) !important;
  }
  .qf-une .wp-block-cover__inner-container {
    padding: 40px 44px !important;
  }
}


/* ══════════════════════════════════════════════
   LEGACY · SECTION FOND ÉDITORIAL
   ══════════════════════════════════════════════ */
.qf-section-bg {
  background: var(--qf-neu-bg) !important;
  border-radius: var(--r-lg) !important;
  padding: 20px 16px !important;
  margin: 0 !important;
}
@media (min-width: 600px) {
  .qf-section-bg { padding: 24px 24px !important; }
}


/* ══════════════════════════════════════════════
   LEGACY · BREAKING NEWS
   ══════════════════════════════════════════════ */
.qf-breaking {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  background: var(--qf-noir) !important;
  border-radius: var(--r-sm) !important;
  padding: 9px 16px !important;
  overflow: hidden !important;
  margin-bottom: 16px !important;
}
.qf-breaking-label {
  display: inline-flex !important;
  align-items: center !important;
  background: var(--qf-orange) !important;
  color: #fff !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: .58rem !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  padding: 3px 9px !important;
  border-radius: 3px !important;
  flex-shrink: 0 !important;
  box-shadow: 0 0 8px 2px rgba(228,84,4,.35) !important;
}
.qf-breaking-text {
  font-family: 'Poppins', sans-serif !important;
  font-size: .78rem !important;
  font-weight: 600 !important;
  color: #fff !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.qf-breaking-text a { color: #fff !important; text-decoration: none !important; }
.qf-breaking-text a:hover { color: var(--qf-orange) !important; }


/* ══════════════════════════════════════════════
   LEGACY · ZOOM HOVER — classes historiques
   ══════════════════════════════════════════════ */
.qf-grid .wp-block-post-featured-image,
.qf-stories .wp-block-post-featured-image,
.qf-agenda .wp-block-post-featured-image {
  overflow: hidden !important;
}
.qf-grid .wp-block-post-featured-image img,
.qf-stories .wp-block-post-featured-image img,
.qf-agenda .wp-block-post-featured-image img {
  transition: transform .42s cubic-bezier(.4,0,.2,1) !important;
}
.qf-grid li.wp-block-post:hover    .wp-block-post-featured-image img,
.qf-stories li.wp-block-post:hover .wp-block-post-featured-image img,
.qf-agenda li.wp-block-post:hover  .wp-block-post-featured-image img {
  transform: scale(1.07) !important;
}
.qf-grid li.wp-block-post,
.qf-stories li.wp-block-post,
.qf-agenda li.wp-block-post {
  transition:
    box-shadow var(--t),
    transform   var(--t),
    border-color var(--t) !important;
  will-change: transform !important;
}
.qf-grid li.wp-block-post:hover,
.qf-stories li.wp-block-post:hover,
.qf-agenda li.wp-block-post:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,.10), 0 1px 4px rgba(0,0,0,.06) !important;
  transform: translateY(-3px) !important;
  border-color: rgba(228,84,4,.18) !important;
}

/* ─── END LEGACY ────────────────────────────────────────────── */


/* ══════════════════════════════════════════════════════════════
   ══════════════════════════════════════════════════════════════

          H E A D E R   F I X E   +   M É G A   M E N U

             ↓↓  INTACT — NE PAS TOUCHER  ↓↓

   ══════════════════════════════════════════════════════════════
   ══════════════════════════════════════════════════════════════ */

:root {
  --qf-menu-h:      4rem;
  --qf-menu-ease:   .38s cubic-bezier(.4,0,.2,1);
  --qf-menu-border: rgba(0,0,0,.07);
}


/* ── Header fixe ─────────────────────────────── */

header.wp-block-template-part {
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  background: var(--qf-fond) !important;
  height: var(--qf-menu-h);
  border-bottom: .5px solid var(--qf-menu-border);
  box-shadow: none !important;
}

.wp-site-blocks > main {
  margin-top: var(--qf-menu-h) !important;
}

/* ── Supprime le blockGap WP au-dessus du 1er bloc de la page ── */
.wp-site-blocks > main > *:first-child {
  margin-block-start: 0 !important;
}

/* ── Hero home : réduit le padding-top (inline style = 32px) ── */
.qf-hero-home {
  padding-top: 12px !important;
}

/* ── Wrapper externe — neutralise has-global-padding ── */

header.wp-block-template-part > .wp-block-group {
  height: var(--qf-menu-h) !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

/* ── Conteneur flex interne — centré, contraint, 3 colonnes ──
   max-width = largeur du contenu WP (780px par défaut ici)
   padding latéral pour respiration
   ─────────────────────────────────────────────────────────── */

header.wp-block-template-part > .wp-block-group > .wp-block-group {
  width: 100% !important;
  max-width: calc(var(--wp--style--global--content-size) + 3rem) !important;
  margin: 0 auto !important;
  padding: 0 1.5rem !important;
  height: var(--qf-menu-h) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  box-sizing: border-box !important;
}

/* ── Colonne gauche : hamburger + recherche ──────
   flex: 1 pour occuper l'espace disponible à gauche
   et pousser le logo au centre
   ─────────────────────────────────────────────── */

header.wp-block-template-part > .wp-block-group > .wp-block-group > .wp-block-group {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: .5rem !important;
  padding: 0 !important;
  margin: 0 !important;
  height: auto !important;
}

/* ── Colonne centre : logo + ville ───────────────
   flex: 0 0 auto → prend juste sa largeur naturelle
   Le logo est donc centré entre les deux flex: 1
   ─────────────────────────────────────────────── */

.qf-logo-stack {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  line-height: 1;
  /* Pas de position absolute */
}

.qf-logo-lien {
  font-family: 'Poppins', sans-serif;
  font-weight: 900;
  font-size: 1.2rem;
  color: var(--qf-noir) !important;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none !important;
  line-height: 1;
  display: block;
  white-space: nowrap;
}


.qf-city-trigger {
  display: flex;
  align-items: center;
  gap: .25rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-top: .1rem;
  font-family: 'Poppins', sans-serif;
  font-size: .6rem;
  font-weight: 700;
  color: var(--qf-orange);
  text-transform: uppercase;
  letter-spacing: .12em;
  line-height: 1;
  transition: color var(--t);
  user-select: none;
  white-space: nowrap;
}

.qf-city-trigger svg {
  flex-shrink: 0;
  transition: transform var(--qf-menu-ease), color var(--t);
}

.qf-city-trigger:hover,
.qf-city-trigger.qf-open {
  color: var(--qf-orange);
}

.qf-city-trigger.qf-open svg {
  transform: rotate(180deg);
}

/* ── Colonne droite : réseaux sociaux ────────────
   flex: 1 + justify-content: flex-end pour coller à droite
   ─────────────────────────────────────────────── */

header.wp-block-template-part .wp-block-social-links {
  flex: 1 !important;
  justify-content: flex-end !important;
  gap: .56rem !important;
  flex-shrink: 0;
  flex-wrap: nowrap !important;
}

header.wp-block-template-part .wp-block-social-links .wp-social-link {
  background: transparent !important;
  color: var(--qf-texte) !important;
  transition: color var(--t) !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
}

header.wp-block-template-part .wp-block-social-links .wp-social-link:hover {
  color: var(--qf-orange) !important;
  background: transparent !important;
}

header.wp-block-template-part .wp-block-social-links .wp-social-link svg {
  width: 1.0625rem !important;
  height: 1.0625rem !important;
  fill: currentColor !important;
}


/* ── Hamburger ───────────────────────────────── */

.wp-block-navigation__responsive-container-open {
  display: flex !important;
  flex-direction: column;
  gap: .32rem;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer;
  padding: .375rem;
  width: auto !important;
  height: auto !important;
  flex-shrink: 0;
}

.wp-block-navigation__responsive-container-open svg {
  display: none !important;
}

.wp-block-navigation__responsive-container-open::before,
.wp-block-navigation__responsive-container-open .qf-line,
.wp-block-navigation__responsive-container-open::after {
  content: '';
  display: block;
  width: 1.375rem;
  height: .125rem;
  background: var(--qf-noir);
  border-radius: .0625rem;
  transition: transform var(--qf-menu-ease), opacity var(--qf-menu-ease);
}

body.qf-menu-open .wp-block-navigation__responsive-container-open::before {
  transform: translateY(calc(.32rem + .125rem)) rotate(45deg);
}

body.qf-menu-open .wp-block-navigation__responsive-container-open .qf-line {
  opacity: 0;
}

body.qf-menu-open .wp-block-navigation__responsive-container-open::after {
  transform: translateY(calc(-1 * (.32rem + .125rem))) rotate(-45deg);
}

.wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation__responsive-container-close {
  display: none !important;
}


/* ── Bouton recherche ────────────────────────── */

#qf-search-toggle,
button#qf-search-toggle,
header #qf-search-toggle,
.wp-site-blocks header #qf-search-toggle {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer;
  display: flex !important;
  align-items: center;
  padding: .25rem;
  color: var(--qf-noir) !important;
  transition: color var(--t);
  flex-shrink: 0;
}

#qf-search-toggle:hover {
  color: var(--qf-orange) !important;
}

#qf-search-toggle svg,
header #qf-search-toggle svg,
.wp-site-blocks header #qf-search-toggle svg {
  display: block !important;
  width: 1.125rem !important;
  height: 1.125rem !important;
  stroke: var(--qf-noir) !important;
  fill: none !important;
  transition: stroke var(--t);
}

#qf-search-toggle:hover svg {
  stroke: var(--qf-orange) !important;
}


/* ── Panel villes — pleine largeur ───────────── */

#qf-city-panel {
  position: fixed;
  top: var(--qf-menu-h);
  left: 0; right: 0;
  background: var(--qf-fond);
  border-bottom: .5px solid var(--qf-menu-border);
  z-index: 9998;
  max-height: 0;
  visibility: hidden;
  overflow: hidden;
  transition: max-height var(--qf-menu-ease), visibility var(--qf-menu-ease);
}

#qf-city-panel.qf-open {
  max-height: calc(var(--qf-menu-h) + .5px);
  visibility: visible;
}

.qf-city-panel-inner {
  display: flex;
  align-items: center;
  max-width: calc(var(--wp--style--global--content-size) + 3rem);
  margin: 0 auto;
  padding: 0 1.5rem;
  height: var(--qf-menu-h);
  box-sizing: border-box;
}

.qf-city-list {
  display: flex;
  align-items: center;
  gap: .125rem;
  flex-wrap: wrap;
}

.qf-city-list a {
  font-family: 'Poppins', sans-serif;
  font-size: .75rem;
  font-weight: 600;
  color: var(--qf-gris);
  text-decoration: none !important;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: .375rem 1rem;
  border-bottom: 2px solid transparent;
  transition: color var(--t), border-color var(--t);
  white-space: nowrap;
}

.qf-city-list a:hover {
  color: var(--qf-noir);
  border-bottom-color: var(--qf-orange);
}

.qf-city-list a.qf-current {
  color: var(--qf-orange);
  border-bottom-color: var(--qf-orange);
}


/* ── Overlay recherche ───────────────────────── */

#qf-search-overlay {
  position: fixed;
  top: var(--qf-menu-h);
  left: 0; right: 0;
  background: var(--qf-fond);
  border-bottom: .5px solid var(--qf-menu-border);
  z-index: 9997;
  max-height: 0;
  visibility: hidden;
  overflow: hidden;
  transition: max-height var(--qf-menu-ease), visibility var(--qf-menu-ease);
}

#qf-search-overlay.qf-open {
  max-height: calc(var(--qf-menu-h) * 2 + 2rem);
  visibility: visible;
}

/* ── Raccourcis catégories dans la search overlay ── */
.qf-search-cats {
  display: flex;
  align-items: center;
  gap: .5rem;
  max-width: calc(var(--wp--style--global--content-size) + 3rem);
  margin: 0 auto;
  padding: 0 1.5rem .75rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.qf-search-cats::-webkit-scrollbar { display: none; }

.qf-search-cat {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .75rem;
  border: 1.5px solid var(--qf-border);
  border-radius: 100px;
  text-decoration: none;
  color: var(--qf-texte);
  font-size: .7rem;
  font-weight: 600;
  white-space: nowrap;
  transition: border-color var(--t), color var(--t), background var(--t);
}
.qf-search-cat:hover {
  border-color: var(--qf-orange);
  color: var(--qf-orange);
  background: #fff5f0;
}
.qf-search-cat-label { line-height: 1; }

.qf-search-inner {
  display: flex;
  align-items: center;
  gap: .875rem;
  max-width: calc(var(--wp--style--global--content-size) + 3rem);
  margin: 0 auto;
  padding: 0 1.5rem;
  height: var(--qf-menu-h);
  box-sizing: border-box;
}

.qf-search-inner > svg {
  flex-shrink: 0;
  stroke: #ccc;
}

.qf-search-inner input {
  flex: 1;
  border: none !important;
  outline: none !important;
  background: none !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--qf-noir) !important;
}

.qf-search-inner input::placeholder {
  color: #ddd;
}

.qf-search-close {
  background: none;
  border: none;
  font-size: 1.125rem;
  color: #bbb;
  cursor: pointer;
  padding: .25rem .5rem;
  line-height: 1;
  transition: color var(--t);
}

.qf-search-close:hover {
  color: var(--qf-noir);
}


/* ── Méga menu ───────────────────────────────── */

#qf-mega {
  position: fixed;
  top: var(--qf-menu-h);
  left: 0; right: 0;
  background: var(--qf-fond);
  border-bottom: .5px solid var(--qf-menu-border);
  z-index: 9996;
  max-height: 0;
  visibility: hidden;
  overflow: hidden;
  transition: max-height var(--qf-menu-ease), visibility var(--qf-menu-ease);
}

#qf-mega.qf-open {
  max-height: 31rem;
  visibility: visible;
  padding-bottom: 1.25rem;
}

/* ── Barre de recherche en haut du méga menu ─── */
.qf-mega-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: .875rem;
  max-width: calc(var(--wp--style--global--content-size) + 3rem);
  margin: 0 auto;
  padding: 0 1.5rem;
  height: var(--qf-menu-h);
  border-bottom: .5px solid var(--qf-menu-border);
  box-sizing: border-box;
}
.qf-mega-search > svg {
  flex-shrink: 0;
  stroke: #ccc;
}
.qf-mega-search input {
  flex: 1;
  border: none !important;
  outline: none !important;
  background: none !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--qf-noir) !important;
}
.qf-mega-search input::placeholder { color: #ccc; }

.qf-mega-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  height: calc(26rem - 1px);
  max-width: calc(var(--wp--style--global--content-size) + 3rem);
  margin: 0 auto;
  padding: 0 1.5rem;
  box-sizing: border-box;
}

.qf-mega-cats {
  padding: 1.75rem 2rem 1.75rem 0;
  border-right: .5px solid var(--qf-menu-border);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.qf-mega-cats a {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-family: 'Poppins', sans-serif !important;
  font-size: clamp(2.25rem, 5.2vw, 3.25rem);
  font-weight: 900;
  color: rgba(0,0,0,.07);
  text-decoration: none !important;
  text-transform: uppercase;
  letter-spacing: -.02em;
  line-height: 1.12;
  transition: color var(--t);
}

.qf-mega-cats a:hover,
.qf-mega-cats a.qf-cat-active {
  color: var(--qf-orange);
}


.qf-preview-pane {
  position: relative;
  overflow: hidden;
  display: block;
  text-decoration: none !important;
  aspect-ratio: 4 / 5;
  height: 100%;
  width: auto;
  border-radius: var(--r-lg, 16px);
  margin-top: .75rem;
}

.qf-preview-pane img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity .2s ease, transform .35s ease;
}

.qf-preview-pane.qf-fading img {
  opacity: 0;
  transform: scale(1.03);
}

.qf-preview-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,.08) 55%, transparent 100%);
  transition: opacity .2s ease;
}

.qf-preview-text {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 1.375rem 1.625rem;
  transition: opacity .2s ease;
}

.qf-preview-pane.qf-fading .qf-preview-gradient,
.qf-preview-pane.qf-fading .qf-preview-text {
  opacity: 0;
}

.qf-preview-label {
  font-size: .5625rem;
  font-weight: 700;
  color: var(--qf-orange);
  text-transform: uppercase;
  letter-spacing: .16em;
  margin-bottom: .4375rem;
}

.qf-preview-title {
  font-size: 1.125rem;
  font-weight: 900;
  color: #fff;
  line-height: 1.3;
}

.qf-preview-date {
  font-size: .6875rem;
  color: rgba(255,255,255,.5);
  margin-top: .3125rem;
}


/* ── Overlay sombre ──────────────────────────── */

#qf-overlay {
  position: fixed;
  top: var(--qf-menu-h);
  left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.25);
  z-index: 9995;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--qf-menu-ease);
}

#qf-overlay.qf-open {
  opacity: 1;
  pointer-events: all;
}

body.qf-menu-open {
  overflow: hidden;
}


/* ── Mobile ──────────────────────────────────── */

@media (max-width: 768px) {

  .qf-mega-inner {
    grid-template-columns: 1fr;
    height: auto;
    max-width: 100%;
    padding: 0;
  }

  .qf-preview-pane {
    display: none;
  }

  .qf-mega-cats {
    padding: 1.25rem 1.5rem;
  }

  .qf-mega-cats a {
    font-size: 2.25rem;
  }

  #qf-mega.qf-open {
    max-height: 80vh;
    overflow-y: auto;
  }

  #qf-city-panel.qf-open {
    max-height: 8rem;
  }

  .qf-city-panel-inner {
    flex-direction: column;
    align-items: flex-start;
    height: auto;
    padding: .875rem 1.5rem;
    gap: .5rem;
    max-width: 100%;
  }

}

/* ══════════════════════════════════════════════════════════════
   14. FOOTER (Webdesign Custom)
   ══════════════════════════════════════════════════════════════ */
.qf-footer-container {
  background: var(--qf-noir);
  color: var(--qf-fond);
  padding: 60px 20px 20px;
  font-family: 'Poppins', sans-serif;
  margin-top: 40px;
}
/* Newsletter dans le footer, sur fond noir */
.qf-footer-newsletter-wrap {
  max-width: calc(var(--wp--style--global--content-size) + 3rem);
  margin: 50px auto 40px auto;
  position: relative;
  z-index: 10;
  padding: 0 20px;
}
.qf-footer-inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 40px;
  max-width: calc(var(--wp--style--global--content-size) + 3rem);
  margin: 0 auto;
}
/* Logo sur fond noir */
.qf-footer-container .qf-logo-stack {
  align-items: flex-start;
  margin-bottom: 15px;
}
.qf-footer-container .qf-logo-lien {
  color: #ffffff !important;
  font-size: 1.6rem;
}
.qf-footer-container .qf-city-trigger {
  color: var(--qf-orange);
}
.qf-footer-city-selector {
  position: relative;
  display: inline-block;
  margin-top: 6px;
}
/* Dropdown */
.qf-footer-city-dropdown {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  background: #1c1c1c;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 6px;
  min-width: 170px;
  z-index: 200;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.qf-footer-city-dropdown.qf-open {
  display: block;
}
.qf-footer-city-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.qf-footer-city-list a {
  display: block;
  padding: 9px 14px;
  color: rgba(255,255,255,0.72);
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: 8px;
  transition: background var(--t), color var(--t);
}
.qf-footer-city-list a:hover {
  background: rgba(255,255,255,0.07);
  color: #fff;
}
.qf-footer-city-list a.qf-current {
  color: var(--qf-orange);
  font-weight: 600;
}
/* ── Sélecteur de villes — colonne « Villes » (v4.6.0) ─────────
   Dropdown compact <details>/<summary>, liste scrollable
   (prévu pour un grand nombre de villes). */
/* Bloc Ville dans la colonne 1, sous les réseaux sociaux */
.qf-footer-ville {
  margin-top: 28px;
}
.qf-villes-hint {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.7);
  margin: 0 0 10px;
}
.qf-villes-select {
  position: relative;
  display: inline-block;
}
.qf-villes-trigger {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  background: #ffffff;
  border-radius: 999px;
  color: var(--qf-noir);
  font-size: 0.85rem;
  font-weight: 600;
  user-select: none;
  transition: box-shadow var(--t), transform var(--t);
}
.qf-villes-trigger::-webkit-details-marker { display: none; }
.qf-villes-trigger:hover {
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}
.qf-villes-pin { flex-shrink: 0; }
.qf-villes-chevron { opacity: 0.55; }
.qf-villes-chevron { transition: transform var(--t); }
.qf-villes-select[open] .qf-villes-chevron { transform: rotate(180deg); }
.qf-villes-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: #1c1c1c;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 6px;
  min-width: 180px;
  max-height: 260px;
  overflow-y: auto;
  z-index: 200;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.qf-villes-menu a {
  display: block;
  padding: 9px 14px;
  color: rgba(255,255,255,0.72);
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: 8px;
  transition: background var(--t), color var(--t);
}
.qf-villes-menu a:hover {
  background: rgba(255,255,255,0.07);
  color: #fff;
}
.qf-villes-menu a.qf-current {
  color: var(--qf-orange);
  font-weight: 600;
}
/* Colonne 1 : Description & Réseaux */
.qf-footer-desc {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.6;
  margin-bottom: 20px;
  max-width: 250px;
}
.qf-footer-social {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}
.qf-footer-social-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
  transition: color var(--t);
}
.qf-footer-social-btn:hover { color: var(--qf-orange); }
.qf-footer-social-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
/* Colonnes 2, 3, 4 : Titres et liens */
.qf-footer-title {
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 20px;
  color: #ffffff;
}
.qf-footer-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.qf-footer-menu a {
  color: rgba(255,255,255,0.7);
  font-size: 0.85rem;
  text-decoration: none;
  transition: color var(--t);
}
.qf-footer-menu a:hover { color: var(--qf-orange); }
.qf-footer-text {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.7);
  margin-bottom: 12px;
}
/* Copyright */
.qf-footer-bottom {
  text-align: center;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.4);
  margin: 60px auto 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.1);
  max-width: var(--wp--style--global--content-size, 1080px);
}

/* ══════════════════════════════════════════════════════════════
   PROMO BLOCK — Template part : parts/promo-block.html
   Injecté via PHP après la 2e rangée de toutes les archives.
   Éditable via Site Editor → Parties de template → Promo Block
   ══════════════════════════════════════════════════════════════ */

/* Le <li> injecté par PHP traverse toute la grille, sans padding */
.qf-archive-loop li.qf-promo-inject {
  grid-column: 1 / -1;
  margin-block: 8px 0 !important;
  padding: 0 !important;
}

/* ── Sélecteur renforcé pour écraser toute règle WP/DB sur .qf-promo-block ── */
li.qf-promo-inject .qf-promo-block {
  position: relative !important;
  width: 100% !important;
  padding: 0 0 22px !important;
  overflow: visible !important;   /* NE PAS laisser hidden : le bouton déborde */
  box-sizing: border-box !important;
  border-radius: 0 !important;    /* radius géré par la figure, pas le container */
}
li.qf-promo-inject .qf-promo-block > * {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Image — coins arrondis portés par la figure */
li.qf-promo-inject .qf-promo-block .wp-block-image {
  display: block !important;
  margin: 0 !important;
  line-height: 0;
  border-radius: var(--r-lg) !important;
  overflow: hidden !important;
}
li.qf-promo-inject .qf-promo-block .wp-block-image img {
  width: 100% !important;
  height: auto;
  display: block !important;
  object-fit: cover;
  border-radius: 0 !important;
}

/* Bouton — centré, chevauche le bas de l'image */
li.qf-promo-inject .qf-promo-block .wp-block-buttons {
  position: absolute !important;
  bottom: 6px !important;
  left: 0 !important;
  right: 0 !important;
  display: flex !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 2;
}

/* Reset complet du wrapper .wp-block-button — évite le doublon visuel
   (une règle externe lui applique background/padding/borderRadius) */
li.qf-promo-inject .wp-block-button {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  /* Écrase le CSS DB qui positionnait le bouton en bottom/right */
  position: relative !important;
  bottom: 0 !important;
  right: 0 !important;
  top: auto !important;
  left: auto !important;
}

/* Seul le <a> est stylé comme bouton */
li.qf-promo-inject .wp-block-button__link {
  display: inline-block !important;
  background: var(--qf-orange) !important;
  color: #fff !important;
  font-size: .82rem !important;
  font-weight: 700 !important;
  letter-spacing: .02em;
  padding: 10px 24px !important;
  border-radius: 100px !important;
  text-decoration: none !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
  transition: background var(--t), box-shadow var(--t);
  white-space: nowrap;
}
li.qf-promo-inject .wp-block-button__link:hover {
  background: var(--qf-orange-dark, #c44800) !important;
  opacity: 1 !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.45) !important;
  transform: none !important;
}

/* ══════════════════════════════════════════════════════════════
   SECTION 10 — BANDEAU ARTICLE ÉPINGLÉ (homepage, tête de section)
   Image pleine largeur cliquable — la featured image est designée
   pour ce format (large bande panoramique avec texte intégré).
   ══════════════════════════════════════════════════════════════ */
.qf-section-featured-wrap {
  width: 100%;
  margin-bottom: 20px;
}

.qf-section-featured {
  border-radius: var(--r-lg, 16px);
  overflow: hidden;
  width: 100%;
}

.qf-section-featured__link {
  display: block;
  width: 100%;
  text-decoration: none !important;
  line-height: 0; /* supprime l'espace sous l'image inline */
}

.qf-section-featured__link img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--r-lg, 16px);
  transition: transform .4s ease;
  transform-origin: center;
}

.qf-section-featured__link:hover img {
  transform: scale(1.02);
}

/* ══════════════════════════════════════════════════════════════
   10.b — PROMO BLOCK sur la homepage (section À la une)
   Remplace le Query Loop qf-une-main.
   Même structure que le promo en archive, sélecteurs différents.
   ══════════════════════════════════════════════════════════════ */
.qf-homepage-promo {
  width: 100%;
  margin-bottom: 8px;
}

.qf-homepage-promo .qf-promo-block {
  position: relative !important;
  width: 100% !important;
  padding: 0 0 22px !important;
  overflow: visible !important;
  box-sizing: border-box !important;
  border-radius: 0 !important;
}

.qf-homepage-promo .wp-block-image {
  border-radius: var(--r-lg) !important;
  overflow: hidden !important;
  margin: 0 !important;
  display: block !important;
  line-height: 0;
}

.qf-homepage-promo .wp-block-buttons {
  position: absolute !important;
  bottom: 6px !important;
  left: 0 !important;
  right: 0 !important;
  display: flex !important;
  justify-content: center !important;
  z-index: 2;
}

.qf-homepage-promo .wp-block-button {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  position: relative !important;
  bottom: 0 !important;
  right: 0 !important;
  top: auto !important;
  left: auto !important;
}

.qf-homepage-promo .wp-block-button__link {
  display: inline-block !important;
  background: var(--qf-orange) !important;
  color: #fff !important;
  padding: 10px 24px !important;
  border-radius: 100px !important;
  font-size: .82rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
  transition: background var(--t), box-shadow var(--t);
  white-space: nowrap;
}

.qf-homepage-promo .wp-block-button__link:hover {
  background: var(--qf-orange-dark, #c44800) !important;
  opacity: 1 !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.45) !important;
  transform: none !important;
}

/* ══════════════════════════════════════════════════════════════
   BADGES QUARTIER
   ══════════════════════════════════════════════════════════════ */
.qf-quartier-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 10px !important;
  margin-block-start: 12px !important;
  margin-bottom: 6px !important;
}
.qf-quartier-badge {
  display: inline-block;
  font-family: 'Poppins', sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--qf-orange);
  background: transparent;
  border: 1px solid var(--qf-orange);
  border-radius: 3px;
  padding: 1px 6px;
  text-decoration: none;
  line-height: 1.6;
  transition: background var(--t), color var(--t);
}
.qf-quartier-badge:hover {
  background: var(--qf-orange);
  color: #fff;
}

/* ══════════════════════════════════════════════════════════════
   AUTOCOMPLÉTION RECHERCHE — SUGGESTIONS QUARTIER
   ══════════════════════════════════════════════════════════════ */
.qf-search-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #1a1a1a;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-radius: 0 0 6px 6px;
  overflow: hidden;
  z-index: 10000;
  max-height: 260px;
  overflow-y: auto;
}
.qf-search-suggestions a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  color: #e0e0e0;
  text-decoration: none;
  font-family: 'Poppins', sans-serif;
  font-size: 0.85rem;
  transition: background var(--t);
}
.qf-search-suggestions a:hover,
.qf-search-suggestions a.qf-sug-active {
  background: rgba(228,84,4,0.15);
  color: #fff;
}
.qf-search-suggestions .qf-sug-icon {
  font-size: 0.75rem;
  opacity: 0.5;
}
.qf-search-suggestions .qf-sug-label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--qf-orange);
  padding: 8px 18px 4px;
}
#qf-search-overlay .qf-search-inner {
  position: relative;
}

/* Responsive tablette large */
@media (max-width: 1100px) {
  .qf-footer-inner {
    grid-template-columns: 1.1fr 1fr 1fr;
    gap: 30px;
  }
}
/* Responsive tablette */
@media (max-width: 768px) {
  .qf-footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 36px 30px;
  }
  .qf-footer-col:first-child {
    grid-column: 1 / -1;
  }
  .qf-footer-container .qf-logo-stack { align-items: center; }
  .qf-footer-desc,
  .qf-footer-social { text-align: center; margin-inline: auto; }
  .qf-footer-social { justify-content: center; }
  .qf-footer-ville { text-align: center; }
  .qf-footer-ville .qf-villes-select { text-align: left; }
}
/* Responsive mobile */
@media (max-width: 480px) {
  .qf-footer-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* ══════════════════════════════════════════════════════════════
   v5.2.0 — ARCHIVES (catégories, tags, quartiers)
   Aligné sur les tokens de la homepage (--qf-noir, --r, --t…)
   Container : calc(contentSize + 3rem) + padding 1.5rem
   ══════════════════════════════════════════════════════════════ */

/* ── Variables (tokens homepage) ─────────────────────────────── */
.qf-archive-wrap {
  --qf-arc-accent:  var(--qf-orange);       /* #e45404 */
  --qf-arc-hero-bg: var(--qf-neu-bg);       /* #e8eaee — même gris neutre */
  --qf-arc-hero-fg: var(--qf-noir);         /* #111111 */
}
.qf-archive-wrap--tag      { --qf-arc-hero-bg: var(--qf-noir); --qf-arc-hero-fg: #fff; }
.qf-archive-wrap--quartier { --qf-arc-hero-bg: #edf6f0; --qf-arc-accent: #2a9d6a; }

/* ────────────────────────────────────────────────────────────────
   CONTENEURS ARCHIVES — même pattern que .qf-hero-home
──────────────────────────────────────────────────────────────── */

.qf-archive-wrap,
/* Hero : pleine largeur (comme qf-hero-home sur la homepage) */
.qf-archive-hero {
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

/* Contenu intérieur + corps : centrés à la largeur large (= homepage) */
.qf-archive-hero-inner,
.qf-archive-body {
  max-width: calc(var(--wp--style--global--content-size) + 3rem) !important;
  margin-inline: auto !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
  box-sizing: border-box !important;
}

.qf-archive-wrap.has-global-padding,
.qf-archive-hero.has-global-padding {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.qf-archive-hero-inner {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.qf-archive-body {
  padding-top: 32px !important;
  padding-bottom: 64px !important;
}

/* Enfants directs : pas de max-width parasite WP
   (qf-archive-body et qf-archive-hero-inner exclus : ils conservent leur max-width centré) */
.qf-archive-wrap > *:not(.qf-archive-body),
.qf-archive-hero > *:not(.qf-archive-hero-inner),
.qf-archive-hero-inner > *,
.qf-archive-body > * {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Cartes : annule max-width de is-layout-constrained */
.qf-archive-loop li.wp-block-post > .wp-block-group {
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.qf-card--list,
.qf-card--list.has-global-padding {
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.qf-card-body,
.qf-card-body > * {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.qf-card-meta > * {
  max-width: none !important;
  margin: 0 !important;
}

/* Post-template → grille 2 colonnes mobile, 3 colonnes desktop */
.qf-archive-loop > ul.wp-block-post-template,
.qf-archive-loop ul.wp-block-post-template.is-layout-flow {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 16px !important;
  list-style: none;
  padding: 0;
  margin: 0;
}
.qf-archive-loop ul.wp-block-post-template > li {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
  padding: 0;
}
@media (min-width: 768px) {
  .qf-archive-loop > ul.wp-block-post-template,
  .qf-archive-loop ul.wp-block-post-template.is-layout-flow {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
  }
}

/* ── Badges sur les cartes archives (.qf-actus-card) ────────────
   .qf-card-badges : rangée flex category + quartier sous l'image
   .qf-badge--quartier : variante sombre pour le quartier
──────────────────────────────────────────────────────────────── */
.qf-card-badges,
.qf-card-badges.has-global-padding,
.qf-card-badges.wp-block-group {
  display: flex !important;
  flex-wrap: wrap;
  gap: 4px;
  margin: 8px 0 2px !important;
  padding: 0 !important;
}
.qf-card-badges > * {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* Badge catégorie (orange) — conteneur flex pour espacer les termes multiples */
.qf-card-badges .qf-badge {
  display: inline-flex !important;
  flex-wrap: wrap;
  gap: 4px;
}
/* Séparateur natif WP (espace entre termes) — remplacé par le gap flex */
.qf-card-badges .wp-block-post-terms__separator {
  display: none !important;
}
.qf-card-badges .qf-badge a {
  display: inline-block !important;
  background: var(--qf-orange) !important;
  color: #fff !important;
  font-size: .6rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  padding: 2px 7px !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  line-height: 1.6 !important;
}
/* Badge quartier (noir) */
.qf-card-badges .qf-badge--quartier a {
  background: var(--qf-noir) !important;
  color: #fff !important;
  font-size: .6rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  padding: 2px 7px !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  line-height: 1.6 !important;
}

/* Sidebar loop */
.qf-sidebar-loop > ul.wp-block-post-template,
.qf-sidebar-loop ul.wp-block-post-template.is-layout-flow {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  list-style: none;
  padding: 0;
  margin: 0;
}
.qf-sidebar-loop ul.wp-block-post-template > li {
  margin-block: 0 !important;
  padding: 0;
}
.qf-sidebar-loop li.wp-block-post > .wp-block-group {
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.qf-sidebar-item > *,
.qf-sidebar-text,
.qf-sidebar-text > * {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Sidebar widget */
.qf-sidebar-widget,
.qf-sidebar-widget.has-global-padding {
  padding: 20px !important;
  max-width: none !important;
}
.qf-sidebar-widget > * {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ── HERO ─────────────────────────────────────────────────────── */
.qf-archive-hero {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}
.qf-archive-hero-inner {
  background: transparent !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  /* padding-inline : 1.5rem conservé par la règle de centrage ci-dessus */
}

/* Sur la homepage le même bloc (pilule météo) est dans wp-block-post-content :
   il faut rétablir le centrage et le padding latéral universel. */
.wp-block-post-content .qf-archive-hero-inner {
  max-width: var(--wp--style--global--content-size) !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
  width: 100%;
}

/* Fil d'Ariane — même style que les labels du site */
/* --- Fil d'ariane (shortcode [qf_breadcrumb]) --- */
nav.qf-breadcrumb,
.qf-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  /* Reset éventuel du <nav> */
  list-style: none;
  padding: 0;
}
nav.qf-breadcrumb > *,
.qf-breadcrumb > * { margin: 0 !important; padding: 0 !important; max-width: none !important; }

/* Lien Accueil */
.qf-breadcrumb-home a,
.qf-bc-home a,
.qf-breadcrumb a {
  font-size: .65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--qf-gris);
  text-decoration: none;
  transition: color var(--t);
}
.qf-breadcrumb-home a:hover,
.qf-bc-home a:hover { color: var(--qf-arc-accent); }

/* Séparateur › */
.qf-breadcrumb-sep p,
.qf-breadcrumb-sep,
.qf-bc-sep { font-size: .65rem; color: var(--qf-texte); margin: 0 !important; }

/* Terme courant */
.qf-breadcrumb-current,
.qf-breadcrumb-current.wp-block-archive-title,
.qf-bc-current {
  font-size: .65rem !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--qf-gris);
  margin: 0 !important;
  display: inline !important;
}

/* Sur fond sombre (hero tag) */
.qf-archive-hero--tag .qf-breadcrumb-home a,
.qf-archive-hero--tag .qf-bc-home a,
.qf-archive-hero--tag .qf-breadcrumb-sep,
.qf-archive-hero--tag .qf-bc-sep,
.qf-archive-hero--tag .qf-breadcrumb-current,
.qf-archive-hero--tag .qf-bc-current { color: rgba(255,255,255,.35); }
.qf-archive-hero--tag .qf-breadcrumb-home a:hover,
.qf-archive-hero--tag .qf-bc-home a:hover { color: #fff; }

/* Ligne icône + h1 */
.qf-archive-hero-title-row > * { max-width: none !important; margin: 0 !important; }
.qf-archive-tag-icon,
.qf-archive-quartier-icon { font-size: 2rem; line-height: 1; margin: 0 !important; flex-shrink: 0; }

/* Titre h1 — même amplitude que .qf-hero-title de la home, centré + majuscule */
.qf-archive-title {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.8rem, 6vw, 2.4rem) !important;
  font-weight: 800;
  color: var(--qf-arc-hero-fg);
  line-height: 1.1;
  margin: 0 !important;
  letter-spacing: -.02em;
  text-align: center;
  text-transform: uppercase;
}

/* Description du terme */
.qf-archive-desc { margin-top: 8px; }
.qf-archive-desc p {
  font-size: .9rem !important;
  color: var(--qf-gris);
  line-height: 1.6;
  margin: 0;
}
.qf-archive-hero--tag .qf-archive-desc p { color: rgba(255,255,255,.55); }
.qf-archive-desc:empty { display: none !important; }

/* ── CORPS — .has-global-padding gère le padding latéral */
/* Colonnes WP : on ajoute gap + alignement, WP gère le flex-basis */
.qf-archive-cols.wp-block-columns {
  gap: 1.5rem !important;
  align-items: flex-start !important;
  flex-wrap: nowrap !important;
}

/* ── CARTES LISTE ─────────────────────────────────────────────
   Image portrait 4:5 à gauche · texte à droite
   Tokens : --r (12px) · --t (.2s ease) · --qf-noir · --qf-gris
──────────────────────────────────────────────────────────────── */
.qf-card--list {
  display: flex !important;
  flex-direction: row;
  align-items: stretch;
  background: var(--qf-fond);
  border-radius: var(--r) !important;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  transition: box-shadow var(--t), transform var(--t);
}
.qf-card--list:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.10);
  transform: translateY(-2px);
}

/* Image portrait 4:5 */
.qf-card--list .qf-card-img {
  flex: 0 0 120px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.qf-card--list .qf-card-img a { display: block; width: 100%; height: 100%; }
.qf-card--list .qf-card-img img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
  transition: transform var(--t);
}
.qf-card--list:hover .qf-card-img img { transform: scale(1.05); }

/* Corps texte */
.qf-card--list .qf-card-body {
  flex: 1;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 12px 14px !important;
}

/* Badge — identique au badge homepage */
.qf-card--list .wp-block-post-terms.qf-badge a,
.qf-card--list .qf-badge a {
  font-size: .68rem !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--qf-orange) !important;
  text-decoration: none;
  background: transparent !important;
  padding: 0 !important;
}

/* Titre H2 — même que .qf-event-card / .qf-actus-card */
.qf-card--list .qf-card-title {
  font-size: .85rem !important;
  font-weight: 700 !important;
  color: var(--qf-noir) !important;
  line-height: 1.35 !important;
  margin: 0 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.qf-card--list .qf-card-title a { color: inherit !important; text-decoration: none; }
.qf-card--list .qf-card-title a:hover { color: var(--qf-orange) !important; }

/* Extrait — même que .qf-actus-card */
.qf-card--list .qf-card-excerpt {
  font-size: .78rem !important;
  color: var(--qf-texte) !important;
  line-height: 1.45 !important;
  margin: 0 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.qf-card--list .qf-card-excerpt p { margin: 0; }

/* Meta date + quartier */
.qf-card--list .qf-card-meta {
  display: flex !important;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}
.qf-card--list .qf-card-date,
.qf-card--list .qf-card-date time {
  font-size: .68rem !important;
  color: var(--qf-gris) !important;
}
.qf-card--list .qf-quartier-badge a {
  font-size: .68rem !important;
  color: var(--qf-gris);
  text-decoration: none;
}
.qf-card--list .qf-quartier-badge a:hover { color: var(--qf-orange); }

/* ── Message vide ────────────────────────────────────────────── */
.qf-archive-empty {
  font-size: .9rem;
  color: var(--qf-gris);
  text-align: center;
  padding: 48px 0;
  margin: 0;
}

/* ── Articles épinglés — bannière au-dessus de la loop ────────── */
.qf-sticky-banner {
  margin-bottom: 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--qf-border);
}

.qf-sticky-label {
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--qf-orange);
  margin-bottom: 1.25rem;
}

.qf-sticky-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.qf-sticky-card {
  display: flex;
  flex-direction: column;
  text-decoration: none !important;
  color: inherit;
  border-radius: var(--r);
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  transition: transform var(--t), box-shadow var(--t);
}

.qf-sticky-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(0,0,0,.10);
}

.qf-sticky-img {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  flex-shrink: 0;
}

.qf-sticky-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}

.qf-sticky-card:hover .qf-sticky-img img {
  transform: scale(1.04);
}

.qf-sticky-content {
  padding: 1rem 1.125rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  flex: 1;
}

.qf-sticky-cat {
  font-size: 0.58rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--qf-orange);
}

.qf-sticky-title {
  font-size: 0.9rem !important;
  font-weight: 900 !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  color: var(--qf-noir);
}

.qf-sticky-excerpt {
  font-size: 0.78rem;
  color: var(--qf-gris);
  line-height: 1.5;
  margin: 0;
}

.qf-sticky-date {
  font-size: 0.62rem;
  color: var(--qf-gris);
  margin-top: auto;
  padding-top: 0.5rem;
}

@media (max-width: 768px) {
  .qf-sticky-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .qf-sticky-img {
    aspect-ratio: 16 / 9;
  }
}

@media (min-width: 769px) and (max-width: 960px) {
  .qf-sticky-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Pagination — reprend le style des boutons du site ─────────  */
.qf-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin-top: 32px;
  flex-wrap: wrap;
}
.qf-pagination .wp-block-query-pagination-previous,
.qf-pagination .wp-block-query-pagination-next {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--qf-orange);
  text-decoration: none;
  padding: 6px 14px;
  border: 1.5px solid var(--qf-orange);
  border-radius: var(--r-sm);
  transition: background var(--t), color var(--t);
}
.qf-pagination .wp-block-query-pagination-previous:hover,
.qf-pagination .wp-block-query-pagination-next:hover { background: var(--qf-orange); color: #fff; }
.qf-pagination .wp-block-query-pagination-numbers a,
.qf-pagination .wp-block-query-pagination-numbers span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 32px;
  font-size: .78rem;
  border-radius: var(--r-sm);
  text-decoration: none;
  color: var(--qf-noir);
  transition: background var(--t);
}
.qf-pagination .wp-block-query-pagination-numbers a:hover { background: var(--qf-neu-bg); }
.qf-pagination .wp-block-query-pagination-numbers .current {
  background: var(--qf-orange); color: #fff; font-weight: 700;
}

/* ── Variante "Plus d'articles" : bouton unique sous le slider archive ──
   Pagination sans numéros (cf. templates archive). Le "next" devient un
   bouton plein, plus visible qu'une simple pagination. */
.qf-pagination--more { margin-top: 24px; gap: 12px; }
.qf-pagination--more .wp-block-query-pagination-next {
  background: var(--qf-orange);
  color: #fff;
}
.qf-pagination--more .wp-block-query-pagination-next:hover {
  background: var(--qf-noir);
  border-color: var(--qf-noir);
  color: #fff;
}

/* Espace entre le bloc promo et le slider d'articles sur les archives */
.qf-archive-slider { margin-top: 20px; }

/* ── SIDEBAR ─────────────────────────────────────────────────── */
.qf-archive-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 88px;
  align-self: flex-start;
}

/* Widget — même card style que les cards homepage */
.qf-sidebar-widget {
  background: var(--qf-fond);
  border-radius: var(--r) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  padding: 16px !important;
  max-width: none !important;
}
.qf-sidebar-widget > * { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }

/* Titre widget — même que h2.qf-titre-section */
.qf-widget-title {
  font-size: .72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  color: var(--qf-noir) !important;
  margin: 0 0 12px !important;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--qf-orange);
}
.qf-sidebar-nl .qf-widget-title { color: #fff !important; }

/* Newsletter */
.qf-sidebar-nl {
  background: var(--qf-noir) !important;
}
.qf-nl-desc {
  font-size: .78rem !important;
  color: rgba(255,255,255,.55);
  line-height: 1.5;
  margin: 0 0 12px !important;
}

/* "Les plus vus" — compact : images 40px carrées */
.qf-sidebar-loop > ul.wp-block-post-template,
.qf-sidebar-loop ul.wp-block-post-template.is-layout-flow {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  list-style: none; padding: 0; margin: 0;
}
.qf-sidebar-loop ul.wp-block-post-template > li { margin-block: 0 !important; padding: 0; }
.qf-sidebar-loop li.wp-block-post > .wp-block-group { max-width: none !important; padding: 0 !important; margin: 0 !important; }
.qf-sidebar-item > *,
.qf-sidebar-text,
.qf-sidebar-text > * { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }

.qf-sidebar-list { display: flex; flex-direction: column; gap: 10px; list-style: none; padding: 0; margin: 0; }
.qf-sidebar-item { display: flex !important; align-items: flex-start; gap: 10px; }
.qf-sidebar-thumb {
  flex: 0 0 40px !important;
  width: 40px !important; height: 40px !important;
  aspect-ratio: 1 !important;
  border-radius: var(--r-sm);
  overflow: hidden;
}
.qf-sidebar-thumb a { display: block; width: 100%; height: 100%; }
.qf-sidebar-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qf-sidebar-text { flex: 1; min-width: 0; }
.qf-sidebar-title {
  font-size: .75rem !important;
  font-weight: 600;
  color: var(--qf-noir);
  line-height: 1.3;
  margin: 0 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.qf-sidebar-title a { color: inherit; text-decoration: none; }
.qf-sidebar-title a:hover { color: var(--qf-orange); }
.qf-sidebar-date,
.qf-sidebar-date time {
  font-size: .65rem !important;
  color: var(--qf-gris);
  display: block;
  margin-top: 2px;
}

/* "À la une" sidebar */
.qf-sidebar-une-widget { padding: 0 !important; overflow: hidden; }
.qf-sidebar-une-widget .qf-widget-title { margin: 0 !important; padding: 12px 14px 10px; border-radius: 0; }

.qf-sidebar-une-loop > ul.wp-block-post-template,
.qf-sidebar-une-loop ul.wp-block-post-template.is-layout-flow {
  display: flex !important; flex-direction: column !important; gap: 0 !important;
  list-style: none; padding: 0; margin: 0;
}
.qf-sidebar-une-loop ul.wp-block-post-template > li { margin-block: 0 !important; padding: 0; }
.qf-sidebar-une-loop li > .wp-block-group { max-width: none !important; padding: 0 !important; margin: 0 !important; }
.qf-sidebar-une-card { display: flex; flex-direction: column; }
.qf-sidebar-une-card > *,
.qf-sidebar-une-body > * { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }

.qf-sidebar-une-img {
  display: block; width: 100%; aspect-ratio: 3/2; overflow: hidden; margin: 0 !important;
}
.qf-sidebar-une-img a { display: block; width: 100%; height: 100%; }
.qf-sidebar-une-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--t); }
.qf-sidebar-une-card:hover .qf-sidebar-une-img img { transform: scale(1.04); }

.qf-sidebar-une-body { padding: 10px 14px 12px !important; display: flex; flex-direction: column; gap: 4px; }
.qf-sidebar-une-title {
  font-size: .82rem !important;
  font-weight: 700;
  color: var(--qf-noir);
  line-height: 1.3;
  margin: 0 !important;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.qf-sidebar-une-title a { color: inherit; text-decoration: none; }
.qf-sidebar-une-title a:hover { color: var(--qf-orange); }

/* Quartiers list */
.qf-quartier-list { list-style: none; padding: 0; margin: 0; }
.qf-quartier-list li { border-bottom: 1px solid var(--qf-border); }
.qf-quartier-list li:last-child { border-bottom: none; }
.qf-quartier-list a {
  display: block;
  font-size: .78rem;
  color: var(--qf-texte);
  text-decoration: none;
  padding: 6px 0;
  transition: color var(--t), padding-left var(--t);
}
.qf-quartier-list a:hover { color: var(--qf-orange); padding-left: 4px; }
.qf-quartier-list a.qf-current { color: var(--qf-orange); font-weight: 700; }
.qf-quartier-empty { font-size: .75rem; color: var(--qf-gris); margin: 0; }

/* Tag cloud — style chips homepage */
.qf-tag-cloud { display: flex !important; flex-wrap: wrap; gap: 6px; }
.qf-tag-cloud a {
  font-size: .68rem !important;
  font-weight: 600;
  padding: 4px 10px;
  background: var(--qf-neu-bg);
  border-radius: 100px;
  color: var(--qf-texte) !important;
  text-decoration: none;
  transition: background var(--t), color var(--t);
}
.qf-tag-cloud a:hover { background: var(--qf-orange); color: #fff !important; }

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 767px) {
  .qf-archive-sidebar { position: static; }
  .qf-card--list { flex-direction: column; }
  .qf-card--list .qf-card-img {
    flex: 0 0 auto; width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--r) var(--r) 0 0 !important;
  }
  .qf-card--list .qf-card-body { padding: 12px !important; }
}
@media (max-width: 520px) {
  .qf-archive-hero { padding: 32px 0 24px; }
  .qf-archive-title { font-size: 1.6rem !important; }
}

/* ── Breadcrumb : wp:home-link rend un <li> — sécurité ─────────  */
.qf-breadcrumb .wp-block-home-link,
.qf-breadcrumb li.wp-block-home-link {
  display: inline-flex !important;
  list-style: none !important;
  padding: 0 !important; margin: 0 !important;
}
.qf-breadcrumb .wp-block-home-link a {
  font-size: .65rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; color: var(--qf-gris); text-decoration: none;
  transition: color var(--t);
}
.qf-breadcrumb .wp-block-home-link a:hover { color: var(--qf-orange); }

/* Sidebar quartiers : neutralise wp:categories */
.qf-sidebar-quartiers .wp-block-categories-list { list-style: none; padding: 0; margin: 0; }
.qf-sidebar-quartiers .wp-block-categories-list a {
  display: block; font-size: .78rem; color: var(--qf-texte);
  text-decoration: none; padding: 6px 0;
  border-bottom: 1px solid var(--qf-border);
  transition: color var(--t);
}
.qf-sidebar-quartiers .wp-block-categories-list a:hover { color: var(--qf-orange); }



/* ══════════════════════════════════════════════════════════════
   BANDEAU INFOS (Pastilles Météo & Trafic)
   ══════════════════════════════════════════════════════════════ */
.qf-info-pills {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-block: 10px;
}

.qf-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1px solid var(--qf-border);
    border-radius: 100px;
    padding: 2px 12px;
    height: 28px;
    box-sizing: border-box;
    transition: all var(--t);
}

.qf-pill:hover {
    border-color: var(--qf-orange);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.qf-pill-label {
    font-size: 0.65rem;
    font-weight: 800;
    color: var(--qf-orange);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-right: 8px;
    position: relative;
}

.qf-pill-label::after {
    content: "";
    position: absolute;
    right: -5px;
    top: 20%;
    height: 60%;
    width: 1px;
    background: var(--qf-border);
}

.qf-pill-val {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--qf-texte);
    font-family: 'Poppins', sans-serif;
    line-height: 1;
}

/* ── Animations partagées ticker météo ── */
@keyframes qf-slide-out {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-12px); }
}
@keyframes qf-slide-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Ticker météo — nouveau HTML (pill unique + data-cities JSON) */
.qf-pill-ticker {
    overflow: hidden;
    position: relative;
}
.qf-pill-ticker .qf-pill-label,
.qf-pill-ticker .qf-pill-val {
    display: inline-flex;
    align-items: center;
    transition: none;
}
.qf-pill-ticker.qf-ticker-out .qf-pill-label,
.qf-pill-ticker.qf-ticker-out .qf-pill-val {
    animation: qf-slide-out 0.3s ease forwards;
}
.qf-pill-ticker.qf-ticker-in .qf-pill-label,
.qf-pill-ticker.qf-ticker-in .qf-pill-val {
    animation: qf-slide-in 0.3s ease forwards;
}

/* Ticker météo — ancien HTML (plusieurs pills séparés) */
.qf-info-pills.qf-rotating {
    overflow: hidden;
    position: relative;
    height: 28px;
    display: flex;
    align-items: center;
}
.qf-info-pills.qf-rotating .qf-pill.qf-pill-hidden {
    display: none;
}
.qf-info-pills.qf-rotating .qf-pill.qf-ticker-out {
    animation: qf-slide-out 0.3s ease forwards;
}
.qf-info-pills.qf-rotating .qf-pill.qf-ticker-in {
    animation: qf-slide-in 0.3s ease forwards;
}

.qf-weather-pill-icon {
    width: 32px;
    height: 32px;
    display: block;
    margin: -5px 0;
    flex-shrink: 0;
}

.wp-block-shortcode.qf-archive-hero-inner {
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 480px) {
    .qf-pill {
        padding: 3px 8px;
    }
    .qf-pill-label {
        margin-right: 5px;
    }
    .qf-pill-label::after {
        display: none;
    }
}
/* ══════════════════════════════════════════════════════════════
   HERO CATÉGORIE (category.html)
   Section entre le breadcrumb et la grille d'articles.
   Design : titre accentué + description + search + thèmes icônes.
   ══════════════════════════════════════════════════════════════ */

/* Wrapper pleine largeur */
.qf-cat-hero-wrap,
.qf-cat-hero-wrap.has-global-padding,
.qf-cat-hero-wrap.is-layout-flow {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: var(--qf-fond);
}

/* Conteneur centré — même largeur que la homepage (wide) */
.qf-cat-hero-inner {
  max-width: calc(var(--wp--style--global--content-size) + 3rem);
  margin-inline: auto;
  padding: 2.5rem 1.5rem 0;
}
.qf-cat-hero-inner > *,
.qf-cat-hero-inner.has-global-padding,
.qf-cat-hero-inner.is-layout-flow {
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Bloc titre + description + search */
.qf-cat-hero-block {
  margin-bottom: 2rem;
  text-align: center; /* entête centrée comme la homepage */
}

/* Titre : "LE MEILLEUR DES ACTUS" — gras + majuscules, centré */
.qf-cat-hero-title {
  font-family: 'Poppins', sans-serif !important;
  font-size: clamp(2rem, 6vw, 3rem) !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  letter-spacing: -.03em !important;
  color: var(--qf-noir) !important;
  margin: 0 0 .75rem !important;
  text-transform: uppercase !important; /* titre en gras tout en majuscule */
}

/* Accent orange sur le nom de la catégorie */
.qf-cat-hero-accent {
  color: var(--qf-orange);
}

/* Description de la catégorie — centrée */
.qf-cat-hero-desc {
  font-size: .92rem !important;
  color: var(--qf-gris) !important;
  line-height: 1.55 !important;
  max-width: 44ch;
  margin: 0 auto 1.5rem !important; /* centrée sous le titre */
}

/* Barre de recherche — centrée */
.qf-cat-search {
  display: flex;
  align-items: center;
  gap: .75rem;
  background: #fff;
  border: 1.5px solid var(--qf-border);
  border-radius: 100px;
  padding: .6rem 1.25rem;
  max-width: 600px;
  margin-inline: auto; /* centrée sous la description */
  text-align: left; /* le texte saisi reste aligné à gauche */
  transition: border-color var(--t), box-shadow var(--t);
}
.qf-cat-search:focus-within {
  border-color: var(--qf-orange);
  box-shadow: 0 0 0 3px rgba(228,84,4,.08);
}
.qf-cat-search-icon {
  flex-shrink: 0;
  color: var(--qf-gris);
}
.qf-cat-search input[type="search"] {
  flex: 1;
  border: none !important;
  outline: none !important;
  background: none !important;
  font-family: 'Poppins', sans-serif;
  font-size: .875rem;
  color: var(--qf-noir);
  min-width: 0;
}
.qf-cat-search input::placeholder {
  color: #bbb;
}

/* Section "Explorer par thème" */
.qf-cat-themes-wrap,
.qf-cat-themes-wrap.has-global-padding,
.qf-cat-themes-wrap.is-layout-flow {
  padding: 0 !important;
  margin-bottom: 0 !important;
  max-width: none !important;
}

.qf-cat-themes-title {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: .7rem !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: var(--qf-noir) !important;
  margin: 0 0 1rem !important;
  padding: 0 !important;
}
.qf-cat-themes-title::before {
  content: '' !important;
  display: block !important;
  width: 3px !important;
  height: 14px !important;
  background: var(--qf-orange) !important;
  border-radius: 2px !important;
  flex-shrink: 0 !important;
}

/* Grille thèmes — reprend qf-themes-grid */
.qf-cat-hero-inner .qf-themes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: .75rem;
  padding-bottom: 2rem;
}
.qf-cat-hero-inner .qf-bp-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .875rem .5rem;
  background: #fff;
  border: 1.5px solid var(--qf-border);
  border-radius: var(--r);
  text-decoration: none;
  color: var(--qf-texte) !important;
  font-size: .7rem;
  font-weight: 600;
  text-align: center;
  transition: border-color var(--t), color var(--t), box-shadow var(--t);
}
.qf-cat-hero-inner .qf-bp-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
}
.qf-cat-hero-inner .qf-bp-item:hover {
  border-color: var(--qf-orange);
  color: var(--qf-orange) !important;
  box-shadow: 0 2px 8px rgba(228,84,4,.1);
}
.qf-cat-hero-inner .qf-bp-label {
  color: inherit !important;
}
.qf-cat-hero-inner .qf-bp-icon svg {
  width: 28px;
  height: 28px;
  stroke: var(--qf-orange);
}

/* ══════════════════════════════════════════════════════════════
   UTILITAIRE : Séparateur wp:post-terms masqué partout
   ══════════════════════════════════════════════════════════════ */
.wp-block-post-terms__separator { display: none !important; }

/* ══════════════════════════════════════════════════════════════
   CLASSE UTILITAIRE : Suppression des espacements de Groupe
   ══════════════════════════════════════════════════════════════ */
.qf-group-flush {
    /* Écrase le padding-top: 60 et bottom: 60 de WordPress */
    padding-top: 8px !important;
    padding-bottom: 0 !important;
    
    /* Écrase la marge automatique entre les blocs (margin-block-start) */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Cible spécifiquement le premier élément à l'intérieur pour éviter le décalage */
.qf-group-flush > :first-child {
    margin-block-start: 0 !important;
}



/* ══════════════════════════════════════════════════════════════
   ARTICLE SINGLE — v1.0
   Charte graphique Que Faire · Poppins · Orange #e45404
   Largeur page : 1240px (wide-size) · Texte : 1080px (contentSize)
   ══════════════════════════════════════════════════════════════ */

/* ── 0. CONTENEUR PRINCIPAL — largeur wide-size ─────────────── */

/* Wrapper principal de la page article : même largeur que la homepage */
.qf-single-body {
  max-width: calc(var(--wp--style--global--content-size) + 3rem);
  margin-inline: auto;
  padding-inline: 0.2rem;
  box-sizing: border-box;
}

/* Section "Plus de publications" en bas de l'article */
.qf-single-related {
  max-width: calc(var(--wp--style--global--content-size) + 3rem);
  margin-inline: auto;
  padding-inline: 1.5rem;
  box-sizing: border-box;
}

/* has-global-padding ne doit pas écraser le padding-inline de qf-single-body */
.qf-single-body.has-global-padding {
  padding-left: 0.2rem !important;
  padding-right: 0.2rem !important;
}
.qf-single-related.has-global-padding {
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}

/* Mobile uniquement : on élargit le contenu des articles en réduisant
   le padding latéral du corps de texte (par défaut 40px via le global
   padding). Scopé aux pages article — n'affecte pas le reste du site. */
@media (max-width: 767px) {
  body.single .wp-block-post-content.has-global-padding {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}


/* ── 1. HERO IMAGE ──────────────────────────────────────────── */

/* Image mise en avant : pleine largeur, hauteur fixe, coins arrondis */
body.single .wp-block-post-featured-image {
  margin-bottom: 0 !important;
}

/* Image d'en-tête : largeur max 580px, centrée (hors hero pleine largeur) */
body.single .wp-block-post-featured-image {
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;
}
/* La variante hero reste en pleine largeur */
body.single .qf-article-hero .wp-block-post-featured-image {
  max-width: none;
}

/* ── Pastille date événement sur l'image à la une (single) ──── */
body.single .wp-block-post-featured-image {
  position: relative; /* ancre le badge en position absolute */
}
.qf-single-event-date {
  position: absolute;
  top: 1rem;   /* coin haut-droit de l'image à la une */
  right: 1rem;
  z-index: 2;
  margin: 0;
}
.qf-single-event-date time {
  display: inline-block;
  background: var(--qf-orange);
  color: #fff;
  font-size: .85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 5px 11px;
  border-radius: 6px;
  line-height: 1.3;
  white-space: nowrap;
}
body.single .wp-block-post-featured-image img {
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  border-radius: var(--r-lg);
  display: block;
}

/* Wrapper hero avec overlay dégradé pour lire le titre par-dessus */
body.single .qf-article-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  margin-bottom: 28px;
}
body.single .qf-article-hero .wp-block-post-featured-image {
  margin-bottom: 0 !important;
}
body.single .qf-article-hero img {
  aspect-ratio: 16 / 6;
  width: 100%;
  object-fit: cover;
  border-radius: 0;
  display: block;
}
body.single .qf-article-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.80) 0%, rgba(0,0,0,.20) 55%, transparent 100%);
  border-radius: var(--r-lg);
}
body.single .qf-article-hero-content {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 32px 36px 28px;
}
/* Titre en hero */
body.single .qf-article-hero .wp-block-post-title {
  color: #fff !important;
  font-size: clamp(1.6rem, 3.5vw, 2.4rem) !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  letter-spacing: -.02em !important;
  margin: 0 !important;
  text-shadow: 0 1px 4px rgba(0,0,0,.4);
}


/* ── 2. TITRE ARTICLE (hors hero) ────────────────────────────── */

body.single .wp-block-post-title {
  font-size: clamp(1.45rem, 3vw, 2.2rem) !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  letter-spacing: -.02em !important;
  text-transform: uppercase !important;
  color: var(--qf-noir) !important;
  margin-bottom: 16px !important;
}

/* Exception : les titres des CARDS (.qf-actus-card) sur une page article
   ne doivent PAS prendre le style "gros titre" ci-dessus. On restaure le
   style card identique à la home (slider "Plus de publications", etc.).
   Spécificité (0,3,1) > body.single .wp-block-post-title (0,2,1). */
body.single .qf-actus-card .wp-block-post-title {
  font-size: .85rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  margin: 10px 0 0 !important;
}


/* ── 3. META ARTICLE ─────────────────────────────────────────── */

/* ── Carte flottante titre + méta ─────────────────────────────── */
.qf-article-header-card {
  background: #fff;
  border-radius: var(--r-lg) !important;
  box-shadow: 0 -2px 0 0 var(--qf-orange),
              0 8px 40px rgba(0, 0, 0, .10),
              0 2px 8px rgba(0, 0, 0, .06);
  padding: 32px 32px 28px;
  margin-top: -48px;
  margin-left: auto !important;
  margin-right: auto !important;
  position: relative;
  z-index: 2;
  max-width: calc(var(--wp--style--global--content-size) - 40px) !important;
  width: calc(100% - 40px);
}

/* Le titre dans la carte */
body.single .qf-article-header-card .wp-block-post-title {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Badges catégorie + quartier au-dessus du titre */
.qf-article-badges {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
}
.qf-article-badges .wp-block-post-terms__separator {
  display: none !important;
}
.qf-article-badges .taxonomy-category,
.qf-article-badges .taxonomy-quartier {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
}
.qf-article-badges .taxonomy-category a {
  background: var(--qf-orange) !important;
  color: #fff !important;
  font-size: .65rem !important;
}
.qf-article-badges .taxonomy-quartier a {
  background: var(--qf-noir) !important;
  color: #fff !important;
  font-size: .65rem !important;
  border-radius: 4px !important;
  padding: 3px 8px !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
}

/* Masquer le doublon qf-article-meta s'il est dans le contenu de l'article */
.wp-block-post-content .qf-article-meta {
  display: none !important;
}

/* Zone méta : badge catégorie + badge quartier + date + temps de lecture */
.qf-article-meta {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0 14px;
  font-size: .78rem;
  line-height: 1.2;
  color: var(--qf-gris);
  margin-bottom: 24px;
  padding-top: 6px !important;
  padding-bottom: 0 !important;
}
/* Le shortcode temps de lecture est enrobé d'un <p> par wpautop : on neutralise ses marges */
.qf-article-meta p {
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
}
/* Badge catégorie — orange */
.qf-article-meta .taxonomy-category a,
.qf-article-meta .wp-block-post-terms.taxonomy-category a {
  font-size: .65rem;
  background: var(--qf-orange) !important;
  color: #fff !important;
}
/* Badge quartier — fond sombre (localisation) */
.qf-article-meta .taxonomy-quartier a,
.qf-article-meta .wp-block-post-terms.taxonomy-quartier a {
  font-size: .65rem;
  background: var(--qf-noir) !important;
  color: #fff !important;
  border-radius: 4px !important;
  padding: 3px 8px !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
}
/* Auteur + Date : icônes filaires via ::before */
.qf-article-meta .wp-block-post-author-name,
.qf-article-meta .wp-block-post-date {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}
.qf-article-meta .wp-block-post-author-name::before {
  content: '' !important;
  display: inline-block !important;
  width: 13px !important;
  height: 13px !important;
  flex-shrink: 0 !important;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}
.qf-article-meta .wp-block-post-date::before {
  content: '' !important;
  display: inline-block !important;
  width: 13px !important;
  height: 13px !important;
  flex-shrink: 0 !important;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}
.qf-article-meta .wp-block-post-author-name {
  font-size: .78rem;
  color: var(--qf-gris);
}
.qf-article-meta .wp-block-post-date time {
  font-size: .78rem;
  color: var(--qf-gris);
}
/* Cacher le bloc "Écrit par… dans" natif WP si présent */
.qf-article-meta-legacy {
  display: none !important;
}
.qf-article-meta-sep {
  width: 3px;
  height: 3px;
  background: var(--qf-gris);
  border-radius: 50%;
  flex-shrink: 0;
}
.qf-article-meta-read {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--qf-gris);
  font-size: .78rem;
  white-space: nowrap;
}
/* Icône horloge native (cohérente avec auteur + date) */
.qf-article-meta-read::before {
  content: '' !important;
  display: inline-block !important;
  width: 13px !important;
  height: 13px !important;
  flex-shrink: 0 !important;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}
.qf-article-meta-read svg {
  width: 13px;
  height: 13px;
  stroke: var(--qf-gris);
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════
   HARMONISATION DES EXCERPTS — icône filaire + look méta (gris)
   ──────────────────────────────────────────────────────────────
   Aligne tous les .wp-block-post-excerpt (cards slider, une-main,
   liste, une) + .qf-card-excerpt + .qf-sticky-excerpt sur le rendu
   du bloc méta : même teinte grise (--qf-gris), même icône SVG
   filaire (stroke #888). N'altère PAS les tailles propres à chaque
   contexte ni les line-clamp existants (déplacés sur le <p> interne).
   Variable réutilisable pour l'icône (lignes de texte / résumé).
   ══════════════════════════════════════════════════════════════ */
:root {
  --qf-ico-excerpt: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='17' y1='10' x2='3' y2='10'/%3E%3Cline x1='21' y1='6' x2='3' y2='6'/%3E%3Cline x1='21' y1='14' x2='3' y2='14'/%3E%3Cline x1='17' y1='18' x2='3' y2='18'/%3E%3C/svg%3E");
  --qf-ico-excerpt-blanc: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='17' y1='10' x2='3' y2='10'/%3E%3Cline x1='21' y1='6' x2='3' y2='6'/%3E%3Cline x1='21' y1='14' x2='3' y2='14'/%3E%3Cline x1='17' y1='18' x2='3' y2='18'/%3E%3C/svg%3E");
}

/* Contextes clairs : passage en flex (icône + texte) et teinte grise */
.qf-actus-card .wp-block-post-excerpt,
.qf-une-main .wp-block-post-excerpt,
.qf-liste .wp-block-post-excerpt,
.qf-card--list .qf-card-excerpt {
  display: flex !important;
  align-items: flex-start !important;
  gap: 6px !important;
  color: var(--qf-gris) !important;
}
.qf-actus-card .wp-block-post-excerpt::before,
.qf-une-main .wp-block-post-excerpt::before,
.qf-liste .wp-block-post-excerpt::before,
.qf-card--list .qf-card-excerpt::before {
  content: '' !important;
  display: inline-block !important;
  width: 14px !important;
  height: 14px !important;
  margin-top: 2px !important;
  flex-shrink: 0 !important;
  background-image: var(--qf-ico-excerpt) !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}
/* Le <p> interne porte le line-clamp (2 lignes) et peut rétrécir en flex */
.qf-actus-card .wp-block-post-excerpt p,
.qf-une-main .wp-block-post-excerpt p,
.qf-liste .wp-block-post-excerpt p,
.qf-card--list .qf-card-excerpt p {
  margin: 0 !important;
  min-width: 0 !important;
}
.qf-actus-card .wp-block-post-excerpt p,
.qf-card--list .qf-card-excerpt p {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Hero "Une" sur fond sombre : même icône en version blanche */
.qf-une .wp-block-post-excerpt {
  display: flex !important;
  align-items: flex-start !important;
  gap: 6px !important;
}
.qf-une .wp-block-post-excerpt::before {
  content: '' !important;
  display: inline-block !important;
  width: 14px !important;
  height: 14px !important;
  margin-top: 2px !important;
  flex-shrink: 0 !important;
  opacity: .75 !important;
  background-image: var(--qf-ico-excerpt-blanc) !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}
.qf-une .wp-block-post-excerpt p {
  margin: 0 !important;
  min-width: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Excerpt du bandeau sticky (souvent un <p> direct) */
.qf-sticky-excerpt {
  display: flex !important;
  align-items: flex-start !important;
  gap: 6px !important;
}
.qf-sticky-excerpt::before {
  content: '' !important;
  display: inline-block !important;
  width: 14px !important;
  height: 14px !important;
  margin-top: 2px !important;
  flex-shrink: 0 !important;
  background-image: var(--qf-ico-excerpt) !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* ──────────────────────────────────────────────────────────────
   Icône d'excerpt RETIRÉE de tout le site (demande Thomas, 2026-06-20)
   Les règles ::before ci-dessus sont conservées (LEGACY) mais
   neutralisées ici. Réactivation : supprimer ce bloc.
   ────────────────────────────────────────────────────────────── */
.qf-actus-card .wp-block-post-excerpt::before,
.qf-une-main .wp-block-post-excerpt::before,
.qf-liste .wp-block-post-excerpt::before,
.qf-card--list .qf-card-excerpt::before,
.qf-une .wp-block-post-excerpt::before,
.qf-sticky-excerpt::before {
  content: none !important;
  display: none !important;
}

/* Auteur */
.qf-article-author {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 28px 0;
  padding: 14px 18px;
  background: var(--qf-neu-bg);
  border-radius: var(--r);
}
.qf-article-author img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.qf-article-author-info {
  line-height: 1.35;
}
.qf-article-author-name {
  font-size: .85rem;
  font-weight: 700;
  color: var(--qf-noir);
}
.qf-article-author-role {
  font-size: .75rem;
  color: var(--qf-gris);
}


/* ── 4. TYPOGRAPHIE CONTENU ──────────────────────────────────── */

body.single .wp-block-post-content {
  font-size: 1.025rem;
  line-height: 1.75;
  color: var(--qf-texte);
}

/* Chapeaux / intro — premier paragraphe plus grand */
body.single .wp-block-post-content > p:first-of-type {
  font-size: 1.1rem;
  line-height: 1.7;
  color: #444;
}

/* Titres H2 */
body.single .wp-block-post-content h2 {
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  color: var(--qf-noir) !important;
  margin-top: 2.4em !important;
  margin-bottom: .6em !important;
  padding-left: 14px !important;
  border-left: 3px solid var(--qf-orange) !important;
  line-height: 1.25 !important;
  box-sizing: border-box !important; /* Fix : border + padding compris dans les 780px */
}

/* Titres H3 */
body.single .wp-block-post-content h3 {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: var(--qf-noir) !important;
  margin-top: 1.8em !important;
  margin-bottom: .5em !important;
  line-height: 1.3 !important;
}

/* Listes */
body.single .wp-block-post-content ul,
body.single .wp-block-post-content ol {
  padding-left: 1.4em !important;
}
body.single .wp-block-post-content li {
  margin-bottom: .4em;
}

/* Strong en orange */
body.single .wp-block-post-content strong {
  color: var(--qf-noir);
  font-weight: 700;
}

/* Liens dans l'article */
body.single .wp-block-post-content a {
  color: var(--qf-orange) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
body.single .wp-block-post-content a:hover {
  color: var(--qf-orange-dark) !important;
}

/* Séparateur */
body.single .wp-block-separator {
  border: none !important;
  border-top: 2px solid var(--qf-border) !important;
  margin: 2.5em auto !important;
  width: 60px !important;
  border-color: var(--qf-orange) !important;
  opacity: 1 !important;
}


/* ── 5. BLOCS SPÉCIAUX ───────────────────────────────────────── */

/* Citation Gutenberg native */
body.single .wp-block-quote {
  border-left: 3px solid var(--qf-orange) !important;
  padding: 18px 22px !important;
  background: #fdf0e8 !important;
  border-radius: 0 var(--r) var(--r) 0 !important;
  margin: 2em 0 !important;
}
body.single .wp-block-quote p {
  font-size: 1.05rem !important;
  font-style: italic !important;
  color: var(--qf-texte) !important;
  margin: 0 0 8px !important;
}
body.single .wp-block-quote cite {
  font-size: .8rem;
  color: var(--qf-gris);
  font-style: normal;
  display: block;
}

/* Grande citation — classe qf-citation-grand */
body.single .wp-block-quote.qf-citation-grand {
  background: var(--qf-noir) !important;
  border-left: none !important;
  border-radius: var(--r-lg) !important;
  padding: 32px 36px !important;
  text-align: center;
}
body.single .wp-block-quote.qf-citation-grand p {
  font-size: clamp(1.1rem, 2.5vw, 1.5rem) !important;
  font-style: italic !important;
  color: #fff !important;
  line-height: 1.55 !important;
}
body.single .wp-block-quote.qf-citation-grand p::before { content: '\201C '; }
body.single .wp-block-quote.qf-citation-grand p::after  { content: ' \201D'; }
body.single .wp-block-quote.qf-citation-grand cite {
  color: var(--qf-orange) !important;
  font-weight: 700 !important;
  font-style: normal !important;
  font-size: .85rem !important;
}

/* Encart info — groupe avec classe qf-encart */
body.single .wp-block-group.qf-encart {
  background: #fdf0e8 !important;
  border-radius: var(--r) !important;
  border-left: 4px solid var(--qf-orange) !important;
  padding: 20px 22px !important;
}
body.single .wp-block-group.qf-encart *:last-child {
  margin-bottom: 0 !important;
}

/* Encart neutre — classe qf-encart-gris */
body.single .wp-block-group.qf-encart-gris {
  background: var(--qf-neu-bg) !important;
  border-radius: var(--r) !important;
  border-left: 4px solid var(--qf-border) !important;
  padding: 20px 22px !important;
}

/* Encart dark — classe qf-encart-dark */
body.single .wp-block-group.qf-encart-dark {
  background: var(--qf-noir) !important;
  color: #fff !important;
  border-radius: var(--r) !important;
  padding: 24px 26px !important;
}
body.single .wp-block-group.qf-encart-dark * {
  color: #fff !important;
}
body.single .wp-block-group.qf-encart-dark a {
  color: var(--qf-orange) !important;
}

/* ── Bouton dans qf-encart-dark : blanc sur fond sombre ── */
body.single .wp-block-group.qf-encart-dark .wp-block-buttons.qf-btn-cta .wp-block-button__link {
  background: #fff !important;
  color: var(--qf-noir) !important;
  border: none !important;
}
body.single .wp-block-group.qf-encart-dark .wp-block-buttons.qf-btn-cta .wp-block-button__link:hover {
  background: rgba(255, 255, 255, .88) !important;
  color: var(--qf-noir) !important;
  transform: translateY(-1px) !important;
}
/* Masquer l'emoji ▶ et le remplacer par une icône SVG filaire */
body.single .wp-block-group.qf-encart-dark .wp-block-buttons.qf-btn-cta .wp-block-button__link img.emoji {
  display: none !important;
}
body.single .wp-block-group.qf-encart-dark .wp-block-buttons.qf-btn-cta .wp-block-button__link::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 7px;
  vertical-align: middle;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolygon points='10 8 16 12 10 16 10 8' fill='%23111111' stroke='none'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Tableau */
body.single .wp-block-table table {
  border-collapse: collapse;
  width: 100%;
  font-size: .9rem;
}
body.single .wp-block-table th {
  background: var(--qf-noir);
  color: #fff;
  font-weight: 700;
  padding: 10px 14px;
  text-align: left;
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
body.single .wp-block-table td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--qf-border);
  vertical-align: top;
}
body.single .wp-block-table tr:nth-child(even) td {
  background: var(--qf-neu-bg);
}

/* Image dans l'article — légende */
body.single .wp-block-image figcaption {
  font-size: .78rem;
  color: var(--qf-gris);
  text-align: center;
  margin-top: 8px;
  font-style: italic;
}

/* Galerie */
body.single .wp-block-gallery {
  margin: 1.5em 0;
}
body.single .wp-block-gallery img {
  border-radius: var(--r-sm);
}


/* ── 6. RESPONSIVE ARTICLE ───────────────────────────────────── */

@media (max-width: 640px) {
  body.single .wp-block-post-featured-image img {
    aspect-ratio: 4 / 3;
    border-radius: var(--r);
  }
  body.single .qf-article-hero img {
    aspect-ratio: 4 / 3;
  }
  body.single .qf-article-hero-content {
    padding: 20px 18px 16px;
  }
  body.single .wp-block-post-content h2 {
    font-size: 1.15rem !important;
  }
  body.single .wp-block-quote.qf-citation-grand {
    padding: 22px 18px !important;
  }

  /* ── Header card : empilement vertical sur mobile ── */
  .qf-article-header-card {
    padding: 20px 18px 18px !important;
    margin-top: -28px !important;
  }

  /* Badges : catégorie et quartier sur la même ligne (pas de retour) */
  .qf-article-badges {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 6px !important;
  }

  /* Méta : auteur · date · temps de lecture — tout sur UNE ligne, compact */
  .qf-article-meta {
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 0 10px !important;
    font-size: .7rem !important;
  }
  .qf-article-meta > *,
  .qf-article-meta p {
    width: auto !important;
    min-width: 0 !important;
  }
  .qf-article-meta .wp-block-post-author-name,
  .qf-article-meta .wp-block-post-date time,
  .qf-article-meta-read {
    font-size: .7rem !important;
  }
  /* On raccourcit en « 3 min » pour tenir sur une ligne */
  .qf-read-suffix {
    display: none !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   BLOC INFOS PRATIQUES — shortcode [infos_pratiques]
   ══════════════════════════════════════════════════════════════ */

.qf-infos-pratiques {
  background: #fff;
  border: 1.5px solid var(--qf-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin: 2em 0;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  font-family: 'Poppins', sans-serif;
}

/* Header orange */
.qf-ip-header {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--qf-noir);
  color: #fff;
  padding: 14px 20px;
}
.qf-ip-header-icon {
  display: flex;
  align-items: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.qf-ip-header-icon svg {
  width: 18px;
  height: 18px;
  stroke: var(--qf-orange);
}
.qf-ip-header-title {
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Body */
.qf-ip-body {
  padding: 18px 20px 20px;
}

/* Grille de lignes */
.qf-ip-lignes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px 16px;
  margin-bottom: 16px;
}

/* Une ligne */
.qf-ip-ligne {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: var(--qf-neu-bg);
  border-radius: var(--r-sm);
  min-width: 0;
}
.qf-ip-ligne:hover {
  background: #e2e4e8;
}

/* Icône */
.qf-ip-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: #fff;
  border-radius: 8px;
  flex-shrink: 0;
  border: 1.5px solid var(--qf-border);
}
.qf-ip-icon svg {
  width: 16px;
  height: 16px;
  stroke: var(--qf-orange);
}

/* Texte */
.qf-ip-texte {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
}
.qf-ip-label {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--qf-gris);
  line-height: 1;
}
.qf-ip-valeur {
  font-size: .85rem;
  font-weight: 600;
  color: var(--qf-noir);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.qf-ip-valeur a {
  color: var(--qf-orange) !important;
  text-decoration: none;
}
.qf-ip-valeur a:hover {
  color: var(--qf-orange-dark) !important;
  text-decoration: underline;
}

/* Badges booléens */
.qf-ip-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--qf-border);
}
.qf-ip-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 8px;
  background: #fff;
  border: 1.5px solid var(--qf-border);
  border-radius: 99px;
  font-size: .72rem;
  font-weight: 700;
  color: var(--qf-noir);
  white-space: nowrap;
}
.qf-ip-tag .qf-ip-icon {
  width: 24px;
  height: 24px;
  background: transparent;
  border: none;
  border-radius: 0;
}
.qf-ip-tag .qf-ip-icon svg {
  width: 14px;
  height: 14px;
  stroke: var(--qf-orange);
}

/* Responsive */
@media (max-width: 500px) {
  .qf-ip-lignes {
    grid-template-columns: 1fr;
  }
  .qf-ip-valeur {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
}


/* ══════════════════════════════════════════════════════════════
   BLOCS CRÉATIFS — MISE EN PAGE ARTICLE v1.0
   Classes à appliquer sur les blocs Gutenberg natifs
   ══════════════════════════════════════════════════════════════ */


/* ── CHAPEAU / INTRO ──────────────────────────────────────────── */
/* Sur : Bloc Paragraphe | Classe : qf-chapeau */

.wp-block-paragraph.qf-chapeau {
  font-size: 1.1rem !important;
  line-height: 1.75 !important;
  color: #3d3d3d !important;
  border-left: 4px solid var(--qf-orange) !important;
  padding-left: 18px !important;
  margin-bottom: 2rem !important;
}


/* ── COLONNES MAGAZINE (62 / 38) ──────────────────────────────── */
/* Sur : Bloc Colonnes | Classe : qf-cols-magazine */

.wp-block-columns.qf-cols-magazine {
  gap: 48px !important;
  align-items: center !important;
}
.wp-block-columns.qf-cols-magazine > .wp-block-column:first-child {
  flex-basis: 62% !important;
  min-width: 0;
}
.wp-block-columns.qf-cols-magazine > .wp-block-column:last-child {
  flex-basis: 34% !important;
  min-width: 0;
}

/* Colonnes 50/50 avec séparateur */
.wp-block-columns.qf-cols-split {
  gap: 40px !important;
  align-items: flex-start !important;
}
.wp-block-columns.qf-cols-split > .wp-block-column {
  flex-basis: calc(50% - 20px) !important;
}

/* Colonnes avec fond alterné */
.wp-block-columns.qf-cols-card > .wp-block-column {
  background: var(--qf-neu-bg);
  border-radius: var(--r);
  padding: 24px 20px !important;
}

@media (max-width: 781px) {
  .wp-block-columns.qf-cols-magazine,
  .wp-block-columns.qf-cols-split,
  .wp-block-columns.qf-cols-card {
    flex-direction: column !important;
    gap: 24px !important;
    align-items: stretch !important; /* étire les cartes sur toute la largeur de contenu */
  }
  .wp-block-columns.qf-cols-magazine > .wp-block-column,
  .wp-block-columns.qf-cols-split > .wp-block-column,
  .wp-block-columns.qf-cols-card > .wp-block-column {
    flex-basis: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}


/* ── CHIFFRES CLÉS / STATS ROW ────────────────────────────────── */
/* Sur : Bloc Groupe | Classe : qf-stats-row */
/* Les enfants (Groupe) reçoivent : qf-stat-item */

.qf-stats-row {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)) !important;
  gap: 1px !important;
  background: var(--qf-border) !important;
  border: 1.5px solid var(--qf-border) !important;
  border-radius: var(--r-lg) !important;
  overflow: hidden !important;
  margin: 2em auto !important; /* Fix : auto pour recentrer (0 décalait à gauche) */
  padding: 0 !important;
  max-width: var(--wp--style--global--content-size) !important;
  width: 100% !important;
}
/* Override flex layout Gutenberg */
/* Override Gutenberg flex + global-padding sur les items */
.qf-stats-row > .wp-block-group,
.qf-stats-row > * {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0 !important;
  max-width: none !important;
  min-width: 0 !important;
}

.qf-stat-item {
  background: #fff !important;
  /* Annule le has-global-padding de Gutenberg */
  padding: 28px 12px 24px !important;
  text-align: center !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  transition: background var(--t) !important;
}
.qf-stat-item:hover {
  background: #fdf0e8 !important;
}

.qf-stat-number {
  font-size: 2.2rem !important;
  font-weight: 900 !important;
  color: var(--qf-orange) !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  letter-spacing: -.03em !important;
  border: none !important;
}

.qf-stat-label {
  font-size: .65rem !important;
  color: var(--qf-gris) !important;
  font-weight: 600 !important;
  margin: 8px 0 0 !important;
  padding: 0 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  line-height: 1.35 !important;
}

/* ── STATS ROW — RESPONSIVE PAR NOMBRE DE COLONNES (mobile) ──────
   Le grid auto-fit laissait un item « orphelin » sur mobile
   (ex: 4 items → 3+1). On force un nombre de colonnes cohérent
   selon le nombre réel d'items, via quantity queries :has(). */
@media (max-width: 640px) {
  /* Défaut : 2 colonnes (couvre 2, 4, 5, 6 items → 2×2, 2×3, etc.) */
  .qf-stats-row {
    grid-template-columns: 1fr 1fr !important;
  }
  /* Exactement 3 items → 3 colonnes (reste sur une seule ligne) */
  .qf-stats-row:has(> *:nth-child(3):last-child) {
    grid-template-columns: 1fr 1fr 1fr !important;
  }
  /* 1 seul item → pleine largeur */
  .qf-stats-row:has(> *:only-child) {
    grid-template-columns: 1fr !important;
  }
  /* Compacter les items pour éviter les débordements de texte */
  .qf-stat-item {
    padding: 18px 8px 16px !important;
  }
  .qf-stat-number {
    font-size: 1.55rem !important;
  }
  .qf-stat-label {
    font-size: .6rem !important;
  }
}

/* ── TABLEAUX NATIFS — SCROLL HORIZONTAL SI TROP LARGE (mobile) ──
   Évite que les tableaux à nombreuses colonnes cassent la mise en
   page : le wrapper devient scrollable au lieu de déborder. */
@media (max-width: 640px) {
  body.single .wp-block-table {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  body.single .wp-block-table table {
    min-width: 480px; /* force le scroll plutôt que l'écrasement */
  }
}


/* ── MEDIA & TEXT STYLÉ ───────────────────────────────────────── */
/* Sur : Bloc Média & Texte | Classe : qf-media-feature */

.wp-block-media-text.qf-media-feature {
  border-radius: var(--r-lg) !important;
  overflow: hidden !important;
  background: var(--qf-neu-bg) !important;
  align-items: center !important;
  gap: 0 !important;
  max-width: var(--wp--style--global--content-size) !important; /* Fix : ramener à 780px */
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
}
.wp-block-media-text.qf-media-feature .wp-block-media-text__media {
  margin: 0 !important;
  align-self: stretch !important;
  overflow: hidden !important;
  position: relative !important;
}
.wp-block-media-text.qf-media-feature .wp-block-media-text__media img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border-radius: 0 !important;
  aspect-ratio: unset !important;
}
.wp-block-media-text.qf-media-feature .wp-block-media-text__content {
  padding: 36px 40px !important;
}
.wp-block-media-text.qf-media-feature h3 {
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  margin-top: 0 !important;
  margin-bottom: .75em !important;
}

/* Version avec ombre sur l'image */
.wp-block-media-text.qf-media-shadow {
  background: #fff !important;
  border: 1.5px solid var(--qf-border) !important;
  border-radius: var(--r-lg) !important;
  overflow: hidden !important;
}
.wp-block-media-text.qf-media-shadow .wp-block-media-text__media img {
  box-shadow: 8px 0 24px rgba(0,0,0,.10) !important;
}


/* ── IMAGE FORMATS ────────────────────────────────────────────── */

/* Format cinéma 21:9 */
/* Sur : Bloc Image | Classe : qf-img-cinema */
.wp-block-image.qf-img-cinema img {
  aspect-ratio: 21 / 9 !important;
  object-fit: cover !important;
  width: 100% !important;
  border-radius: var(--r-lg) !important;
}
.wp-block-image.qf-img-cinema figcaption {
  font-size: .78rem;
  color: var(--qf-gris);
  text-align: center;
  padding: 8px 0 0;
  font-style: italic;
}

/* Image avec ombre portée */
/* Sur : Bloc Image | Classe : qf-img-shadow */
.wp-block-image.qf-img-shadow img {
  border-radius: var(--r-lg) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.15) !important;
}

/* Image avec bordure orange */
/* Sur : Bloc Image | Classe : qf-img-accent */
.wp-block-image.qf-img-accent {
  position: relative;
}
.wp-block-image.qf-img-accent img {
  border-radius: var(--r-lg) !important;
  border: 3px solid var(--qf-orange) !important;
}

/* Image arrondie (portrait/profil) */
/* Sur : Bloc Image | Classe : qf-img-round */
.wp-block-image.qf-img-round img {
  border-radius: 50% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
}

/* Duo d'images côte à côte dans Galerie */
/* Sur : Bloc Galerie 2 colonnes | Classe : qf-gallery-duo */
.wp-block-gallery.qf-gallery-duo {
  gap: 12px !important;
}
.wp-block-gallery.qf-gallery-duo figure img {
  border-radius: var(--r) !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
}


/* ── LIGHTBOX ─────────────────────────────────────────────────── */

#qf-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
}
#qf-lightbox.qf-lb-open {
  display: flex;
}
.qf-lb-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .88);
  backdrop-filter: blur(6px);
}
.qf-lb-wrap {
  position: relative;
  z-index: 1;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.qf-lb-img {
  max-width: 90vw;
  max-height: 82vh;
  object-fit: contain;
  border-radius: var(--r-lg);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .5);
  display: block;
}
.qf-lb-caption {
  color: rgba(255, 255, 255, .7);
  font-size: .82rem;
  text-align: center;
  margin: 0;
  max-width: 600px;
}
.qf-lb-close,
.qf-lb-prev,
.qf-lb-next {
  position: fixed;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .2);
  color: #fff;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
  z-index: 2;
  backdrop-filter: blur(4px);
}
.qf-lb-close:hover,
.qf-lb-prev:hover,
.qf-lb-next:hover {
  background: rgba(255, 255, 255, .25);
}
.qf-lb-close { top: 20px;  right: 20px; }
.qf-lb-prev  { left: 20px; top: 50%; transform: translateY(-50%); font-size: 1.8rem; }
.qf-lb-next  { right: 20px; top: 50%; transform: translateY(-50%); font-size: 1.8rem; }


/* ── GALERIE TIGHT ────────────────────────────────────────────── */
/* Sur : Bloc Galerie | Classe : qf-gallery-tight */

.wp-block-gallery.qf-gallery-tight {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 4px !important;
  padding: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.wp-block-gallery.qf-gallery-tight figure {
  margin: 0 !important;
  width: 100% !important;
  overflow: hidden !important;
  border-radius: 6px !important;
}
.wp-block-gallery.qf-gallery-tight figure img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  aspect-ratio: 4 / 3 !important;
  display: block !important;
  border-radius: 0 !important;
  transition: transform .3s ease !important;
}
.wp-block-gallery.qf-gallery-tight figure:hover img {
  transform: scale(1.04) !important;
}


/* ── VIDEO EMBED STYLÉE ───────────────────────────────────────── */
/* Sur : Bloc Groupe (wrapper) | Classe : qf-video-wrap */

.wp-block-group.qf-video-wrap {
  border-radius: var(--r-lg) !important;
  overflow: hidden !important;
  margin: 1.5em auto !important; /* Fix : auto pour recentrer */
  box-shadow: 0 8px 32px rgba(0,0,0,.12) !important;
  padding: 0 !important;
  background: var(--qf-noir) !important;
  max-width: var(--wp--style--global--content-size) !important;
  width: 100% !important;
}
.wp-block-group.qf-video-wrap .wp-block-embed {
  margin: 0 !important;
}
.wp-block-group.qf-video-wrap .wp-block-embed__wrapper {
  border-radius: 0 !important;
  background: #000;
}
.wp-block-group.qf-video-wrap .wp-block-embed figcaption {
  padding: 10px 16px 12px !important;
  font-size: .78rem !important;
  color: rgba(255,255,255,.7) !important;
  font-style: italic !important;
  background: var(--qf-noir) !important;
  margin: 0 !important;
}


/* ── PULL QUOTE ───────────────────────────────────────────────── */
/* Sur : Bloc Pull Quote | Classe : qf-pullquote */

.wp-block-pullquote.qf-pullquote {
  border-top: 2px solid var(--qf-orange) !important;
  border-bottom: 2px solid var(--qf-orange) !important;
  border-left: none !important;
  border-right: none !important;
  padding: 28px 16px !important;
  background: transparent !important;
  margin: 2.5em auto !important; /* Fix : auto pour recentrer */
  text-align: center !important;
  max-width: var(--wp--style--global--content-size) !important;
  width: 100% !important;
}
.wp-block-pullquote.qf-pullquote blockquote p {
  font-size: clamp(1.05rem, 2.2vw, 1.3rem) !important;
  font-style: italic !important;
  color: var(--qf-noir) !important;
  line-height: 1.55 !important;
  font-weight: 600 !important;
}
.wp-block-pullquote.qf-pullquote blockquote cite {
  color: var(--qf-orange) !important;
  font-size: .8rem !important;
  font-weight: 700 !important;
  font-style: normal !important;
  display: block !important;
  margin-top: 8px !important;
}

/* Pull quote latéral (flottant) */
/* Sur : Bloc Pull Quote | Classe : qf-pullquote-side */
.wp-block-pullquote.qf-pullquote-side {
  float: right !important;
  width: 42% !important;
  margin: 0 0 24px 32px !important;
  border-top: 2px solid var(--qf-orange) !important;
  border-bottom: 2px solid var(--qf-orange) !important;
  border-left: none !important;
  border-right: none !important;
  padding: 18px 0 !important;
  background: transparent !important;
  clear: right;
}
.wp-block-pullquote.qf-pullquote-side blockquote p {
  font-size: 1rem !important;
  font-style: italic !important;
  color: var(--qf-noir) !important;
  font-weight: 700 !important;
}
@media (max-width: 600px) {
  .wp-block-pullquote.qf-pullquote-side {
    float: none !important;
    width: 100% !important;
    margin: 1.5em 0 !important;
  }
}


/* ── LISTE AVEC CHECKMARKS ────────────────────────────────────── */
/* Sur : Bloc Liste | Classe : qf-list-check */

.wp-block-list.qf-list-check,
ul.qf-list-check {
  list-style: none !important;
  padding-left: 0 !important;
}
.wp-block-list.qf-list-check li,
ul.qf-list-check li {
  position: relative !important;
  padding-left: 30px !important;
  margin-bottom: .6em !important;
  line-height: 1.6 !important;
}
.wp-block-list.qf-list-check li::before,
ul.qf-list-check li::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 3px !important;
  width: 18px !important;
  height: 18px !important;
  background: var(--qf-orange) !important;
  border-radius: 50% !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpolyline points='2.5,6.5 5,9 9.5,3' stroke='white' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-size: 12px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  flex-shrink: 0 !important;
}

/* Liste avec flèches */
/* Sur : Bloc Liste | Classe : qf-list-arrow */
.wp-block-list.qf-list-arrow,
ul.qf-list-arrow {
  list-style: none !important;
  padding-left: 0 !important;
}
.wp-block-list.qf-list-arrow li,
ul.qf-list-arrow li {
  position: relative !important;
  padding-left: 22px !important;
  margin-bottom: .5em !important;
}
.wp-block-list.qf-list-arrow li::before {
  content: '→' !important;
  position: absolute !important;
  left: 0 !important;
  color: var(--qf-orange) !important;
  font-weight: 700 !important;
}


/* ── BOUTONS CTA ──────────────────────────────────────────────── */
/* Sur : Bloc Boutons | Classe : qf-btn-cta */

.wp-block-buttons.qf-btn-cta .wp-block-button__link {
  background: var(--qf-orange) !important;
  color: #fff !important;
  border-radius: 99px !important;
  padding: 14px 32px !important;
  font-weight: 700 !important;
  font-size: .9rem !important;
  letter-spacing: .02em !important;
  box-shadow: var(--neu-btn) !important;
  transition: all var(--t) !important;
  border: none !important;
  text-decoration: none !important;
}
.wp-block-buttons.qf-btn-cta .wp-block-button__link:hover {
  background: var(--qf-orange-dark) !important;
  box-shadow: var(--neu-btn-hover) !important;
  transform: translateY(-1px) !important;
  color: #fff !important;
}

/* Bouton outline */
/* Sur : Bloc Boutons | Classe : qf-btn-outline */
.wp-block-buttons.qf-btn-outline .wp-block-button__link {
  background: transparent !important;
  color: var(--qf-orange) !important;
  border: 2px solid var(--qf-orange) !important;
  border-radius: 99px !important;
  padding: 12px 28px !important;
  font-weight: 700 !important;
  font-size: .9rem !important;
  transition: all var(--t) !important;
  text-decoration: none !important;
}
.wp-block-buttons.qf-btn-outline .wp-block-button__link:hover {
  background: var(--qf-orange) !important;
  color: #fff !important;
}

/* Bouton noir */
/* Sur : Bloc Boutons | Classe : qf-btn-dark */
.wp-block-buttons.qf-btn-dark .wp-block-button__link {
  background: var(--qf-noir) !important;
  color: #fff !important;
  border-radius: 99px !important;
  padding: 14px 32px !important;
  font-weight: 700 !important;
  font-size: .9rem !important;
  transition: all var(--t) !important;
  text-decoration: none !important;
  border: none !important;
}
.wp-block-buttons.qf-btn-dark .wp-block-button__link:hover {
  background: #333 !important;
  color: #fff !important;
}


/* ── SECTION ACCENT (bande orange) ───────────────────────────── */
/* Sur : Bloc Groupe | Classe : qf-section-accent */

.wp-block-group.qf-section-accent {
  background: linear-gradient(135deg, var(--qf-orange) 0%, #d44800 100%) !important;
  border-radius: var(--r-lg) !important;
  padding: 36px 40px !important;
  color: #fff !important;
  position: relative;
  overflow: hidden;
}
.wp-block-group.qf-section-accent::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 200px; height: 200px;
  background: rgba(255,255,255,.06);
  border-radius: 50%;
}
.wp-block-group.qf-section-accent * {
  color: #fff !important;
}
.wp-block-group.qf-section-accent h2,
.wp-block-group.qf-section-accent h3 {
  border-left: none !important;
  padding-left: 0 !important;
  margin-top: 0 !important;
}
.wp-block-group.qf-section-accent .wp-block-button__link {
  background: #fff !important;
  color: var(--qf-orange) !important;
  font-weight: 800 !important;
  border-radius: 99px !important;
  padding: 12px 28px !important;
  text-decoration: none !important;
}
.wp-block-group.qf-section-accent .wp-block-button__link:hover {
  background: rgba(255,255,255,.9) !important;
  color: var(--qf-orange-dark) !important;
}

/* Section fond neutre (gris) */
/* Sur : Bloc Groupe | Classe : qf-section-neutral */
.wp-block-group.qf-section-neutral {
  background: var(--qf-neu-bg) !important;
  border-radius: var(--r-lg) !important;
  padding: 32px 36px !important;
}
.wp-block-group.qf-section-neutral h2,
.wp-block-group.qf-section-neutral h3 {
  border-left: none !important;
  padding-left: 0 !important;
}


/* ── COVER GUTENBERG STYLÉ ────────────────────────────────────── */
/* Sur : Bloc Couverture | Classe : qf-cover-feature */

.wp-block-cover.qf-cover-feature {
  border-radius: var(--r-lg) !important;
  overflow: hidden !important;
  min-height: 320px !important;
}
.wp-block-cover.qf-cover-feature .wp-block-cover__inner-container {
  padding: 40px 48px !important;
}
.wp-block-cover.qf-cover-feature .wp-block-heading {
  font-size: clamp(1.5rem, 3vw, 2.4rem) !important;
  font-weight: 900 !important;
  letter-spacing: -.02em !important;
  line-height: 1.15 !important;
}

/* Cover minimaliste avec overlay orange */
.wp-block-cover.qf-cover-orange .wp-block-cover__background {
  background: var(--qf-orange) !important;
  opacity: .9 !important;
}


/* ── MISE EN AVANT CHIFFRE ISOLÉ ──────────────────────────────── */
/* Sur : Bloc Groupe | Classe : qf-big-number */
/* À l'intérieur : Titre (grand chiffre) + Paragraphe (label) */

.wp-block-group.qf-big-number {
  text-align: center !important;
  padding: 32px 24px !important;
  border: 1.5px solid var(--qf-border) !important;
  border-radius: var(--r-lg) !important;
  background: #fff !important;
  transition: box-shadow var(--t), border-color var(--t) !important;
}


/* ══════════════════════════════════════════════════════════════
   18. BADGES / FILTRES PAR TAGS
   v4.5.0
   ══════════════════════════════════════════════════════════════ */

/* ── Badges visuels sur les cartes ─────────────────────────── */
.qf-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px 0 4px;
}
.qf-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 3px 8px;
  border-radius: 100px;
  background: rgba(0,0,0,.06);
  color: #555;
  white-space: nowrap;
  letter-spacing: .02em;
}

/* ── Quick-badges homepage (sous hero) ─────────────────────── */
.qf-quick-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding: 16px 0 8px;
  max-width: var(--wp--style--global--content-size);
  margin-inline: auto;
}
.qf-quick-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 100px;
  background: var(--wp--preset--color--base-2, #f5f5f5);
  color: var(--wp--preset--color--contrast, #1a1a1a);
  text-decoration: none;
  border: 2px solid #e0e0e0;
  transition: background .2s, border-color .2s, color .2s;
  white-space: nowrap;
}
.qf-quick-badge:hover {
  background: var(--qf-orange);
  border-color: var(--qf-orange);
  color: #fff;
  text-decoration: none;
}

/* ── Barre de filtres — pages listing ──────────────────────── */
.qf-filterable-loop {
  width: 100%;
}
.qf-filter-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 0 20px;
  max-width: var(--wp--style--global--content-size);
  margin-inline: auto;
}
.qf-filter-bar__primary,
.qf-filter-bar__secondary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.qf-filter-bar__secondary {
  padding-top: 4px;
  border-top: 1px solid #e8e8e8;
}
.qf-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 100px;
  background: var(--wp--preset--color--base-2, #f5f5f5);
  color: var(--wp--preset--color--contrast, #1a1a1a);
  border: 2px solid #e0e0e0;
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
  font-family: inherit;
  white-space: nowrap;
  line-height: 1;
}
.qf-filter-chip:hover {
  border-color: var(--qf-orange);
  color: var(--qf-orange);
  background: #fff8f4;
}
.qf-filter-chip.is-active {
  background: var(--qf-orange);
  color: #fff;
  border-color: var(--qf-orange);
}
.qf-filter-more-btn {
  background: transparent;
  border-color: #ccc;
  color: #777;
  font-weight: 500;
}
.qf-filter-more-btn:hover,
.qf-filter-more-btn[aria-expanded="true"] {
  background: #f0f0f0;
  border-color: #aaa;
  color: #333;
}
.qf-filter-empty {
  text-align: center;
  color: #999;
  padding: 40px 20px;
  font-size: 15px;
  width: 100%;
  grid-column: 1 / -1;
}

/* ── AJAX filtering ──────────────────────────────────────────── */
.qf-filterable-loop.qf-loading {
  opacity: 0.5;
  pointer-events: none;
  transition: opacity 0.2s;
}
.qf-filter-loading {
  list-style: none;
  text-align: center;
  color: #999;
  padding: 40px 20px;
  font-size: 15px;
  grid-column: 1 / -1;
  width: 100%;
}
.qf-ajax-pagination {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 24px 0 8px;
  flex-wrap: wrap;
}
.qf-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border: 1.5px solid #e0e0e0;
  border-radius: 8px;
  background: #fff;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.qf-page-btn:hover {
  border-color: #333;
}
.qf-page-btn.is-current {
  background: #111;
  color: #fff;
  border-color: #111;
  cursor: default;
}

/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .qf-quick-badges { gap: 6px; padding: 12px 0 6px; }
  .qf-quick-badge  { font-size: 12px; padding: 8px 14px; }
  .qf-filter-chip  { font-size: 12px; padding: 8px 14px; }
  .qf-card-badge   { font-size: 10px; }
}

/* ── Explorer par thème — chips dans le hero d'archive ───────── */
.qf-explore-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
/* Les .qf-filter-chip sont déjà stylés dans la section 18 */

/* ── Tag pills sur les cartes (qf-tag-pills) ─────────────────── */
/* Note : classe différente de qf-card-badges (badges taxonomy WP) */
.qf-tag-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 5px 0 2px;
}
.qf-tag-pills .qf-card-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 100px;
  background: rgba(232,93,4,.10);
  color: var(--qf-orange);
  white-space: nowrap;
}

/* ── Icônes SVG outlined dans les pastilles / chips / badges ─── */
/* Remplacent les emoji — stroke, fill:none, alignement vertical  */
/* .qf-i — règle inachevée, neutralisée (cassait .qf-bottom-nav à la minif) */

/* ══════════════════════════════════════════════════════════════
   X. MENU BAS GLASSMORPHISME — navigation catégories (SITEWIDE)
   Injecté via qf_render_bottom_nav() — functions.php §18.c.2 (hook wp_footer).
   Pleine largeur, fixé en bas, effet verre dépoli. Texte seul.
   ══════════════════════════════════════════════════════════════ */
.qf-bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9000;
  display: flex;
  justify-content: center;
  padding: 10px 12px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border-top: 1px solid rgba(255, 255, 255, .6);
  box-shadow: 0 -8px 30px rgba(17, 17, 17, .10);
}
/* Conteneur interne : boutons limités à la largeur du site (content-size 1080px) */
.qf-bottom-nav__inner {
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: var(--wp--style--global--content-size, 1080px);
}
.qf-bottom-nav__link {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 13px 10px;
  border-radius: 12px;
  font-family: 'Poppins', sans-serif;
  font-size: .92rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none !important;
  background: rgba(255, 255, 255, .35);
  border: 1px solid rgba(255, 255, 255, .55);
  transition: background var(--t), color var(--t), border-color var(--t);
  /* Typo contour orange (cf. §22) — intérieur blanc, contour extérieur 3px */
  color: #fff;
  -webkit-text-fill-color: #fff;
  -webkit-text-stroke: 3px var(--qf-orange);
  text-stroke: 3px var(--qf-orange);
  paint-order: stroke fill;
}
.qf-bottom-nav__link:hover {
  background: rgba(255, 255, 255, .75);
}
.qf-bottom-nav__link--active {
  background: var(--qf-orange) !important;
  border-color: var(--qf-orange) !important;
  color: #fff !important;
  /* Onglet actif : texte blanc plein, pas de contour */
  -webkit-text-fill-color: #fff !important;
  -webkit-text-stroke: 0 !important;
  text-stroke: 0 !important;
}

/* Réserve l'espace en bas pour que le contenu ne passe pas sous la barre fixe */
body {
  padding-bottom: 84px;
  padding-bottom: calc(84px + env(safe-area-inset-bottom));
}


/* ══════════════════════════════════════════════════════════════
   19. PAGES RÉGLEMENTAIRES — Mentions légales / CGU
   Titres de section : h2.qf-titre-section (composant global §3.A)
   Classes de contenu : qf-legal-date / qf-legal-body / qf-legal-entity
   ══════════════════════════════════════════════════════════════ */

/* Date de mise à jour (en-tête + pied) */
.qf-legal-date {
  margin: 0;
  font-size: .85rem;
  color: #888;
}

/* Corps de texte réglementaire — lecture confortable */
.qf-legal-body {
  margin: 0 0 .9em;
  line-height: 1.7;
  color: #333;
}
.qf-legal-body a { color: var(--qf-orange); }

/* Espace après un titre de section avant le contenu */
h2.qf-titre-section + .qf-legal-body,
h2.qf-titre-section + .qf-legal-entity {
  margin-top: 14px;
}

/* Bloc d'identité (éditeur / hébergeur) — carte légère */
.qf-legal-entity {
  background: var(--qf-neu-bg, #f6f6f4);
  border: 1px solid var(--qf-border, #e8e8e8);
  border-radius: var(--r-lg, 16px);
  padding: 18px 24px;
}

/* Liste de définitions en grille : libellé + valeur sur la MÊME ligne.
   !important nécessaire : le thème parent (twentytwentyfive) applique des
   règles sur dl/dt/dd avec une spécificité supérieure à la classe seule. */
.qf-legal-entity .qf-legal-dl {
  display: grid !important;
  grid-template-columns: minmax(110px, max-content) 1fr !important;
  column-gap: 24px !important;
  row-gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  align-items: baseline !important;
}
.qf-legal-entity .qf-legal-dl dt {
  margin: 0 !important;
  padding: 0 !important;
  font-weight: 700 !important;
  font-size: .72rem !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: var(--qf-noir) !important;
}
.qf-legal-entity .qf-legal-dl dd {
  margin: 0 !important;
  padding: 0 !important;
  font-size: .95rem !important;
  color: #333 !important;
}
.qf-legal-entity .qf-legal-dl dd a { color: var(--qf-orange) !important; }

/* Mobile : libellé au-dessus de la valeur */
@media (max-width: 600px) {
  .qf-legal-entity .qf-legal-dl {
    grid-template-columns: 1fr !important;
    row-gap: 2px !important;
  }
  .qf-legal-entity .qf-legal-dl dd { margin-bottom: 12px !important; }
  .qf-legal-entity .qf-legal-dl dd:last-child { margin-bottom: 0 !important; }
}


/* ══════════════════════════════════════════════════════════════
   20. PAGE CONTACT
   Classes : qf-about-subtitle / qf-contact-links-grid /
   qf-contact-link-card(-icon/-title) / qf-propose-info-box
   ══════════════════════════════════════════════════════════════ */

/* Sous-titre du hero (réutilisé page À propos) */
.qf-about-subtitle {
  margin: 12px 0 0;
  font-size: 1.05rem;
  line-height: 1.6;
  color: #555;
}

/* Grille de cartes de redirection (pré-routing) */
.qf-contact-links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.qf-contact-link-card {
  display: block;
  padding: 22px 24px;
  border: 1.5px solid var(--qf-border, #e8e8e8);
  border-radius: var(--r-lg, 16px);
  background: #fff;
  color: inherit;
  text-decoration: none !important;
  transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}
.qf-contact-link-card:hover {
  border-color: var(--qf-orange);
  box-shadow: var(--neu-btn, 0 6px 20px rgba(0,0,0,.08));
  transform: translateY(-2px);
}
.qf-contact-link-card-icon {
  display: block;
  font-size: 1.6rem;
  line-height: 1;
  margin-bottom: 12px;
}
.qf-contact-link-card-title {
  margin: 0 0 6px;
  font-weight: 800;
  font-size: 1rem;
  color: var(--qf-noir);
}
.qf-contact-link-card p {
  margin: 0;
  font-size: .9rem;
  line-height: 1.55;
  color: #666;
}

/* Encadré info (délai de réponse) — réutilisable */
.qf-propose-info-box {
  background: var(--qf-neu-bg, #f6f6f4);
  border-left: 3px solid var(--qf-orange);
  border-radius: var(--r-lg, 16px);
  padding: 22px 26px;
}
.qf-propose-info-box h3 {
  margin: 0 0 8px;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--qf-noir);
}
.qf-propose-info-box p {
  margin: 0;
  line-height: 1.6;
  color: #444;
}


/* ══════════════════════════════════════════════════════════════
   21. PAGE À PROPOS (page-id-180)
   Le H1 éditorial est dans le contenu → on masque le titre WP natif.
   ══════════════════════════════════════════════════════════════ */

/* Masquer le titre de page natif (évite le doublon avec le H1 éditorial) */
body.page-id-180 .wp-block-post-title { display: none !important; }

/* Eyebrow / kicker du hero (même look que h2.qf-titre-section) */
.qf-about-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--qf-noir);
}
.qf-about-label::before {
  content: '';
  width: 3px;
  height: 16px;
  background: var(--qf-orange);
  border-radius: 2px;
  flex-shrink: 0;
}

/* Titre éditorial du hero */
.qf-about-title {
  margin: 0 0 18px;
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1.1;
  color: var(--qf-noir);
}
.qf-about-title .qf-accent { color: var(--qf-orange); }

/* Stats du hero */
.qf-about-stats { gap: 16px !important; margin-top: 8px; }
.qf-about-stat {
  text-align: center;
  padding: 22px 16px !important;
  border: 1.5px solid var(--qf-border);
  border-radius: var(--r-lg);
  background: #fff;
}
.qf-about-stat-num {
  margin: 0 !important;
  font-size: clamp(1.8rem, 4vw, 2.4rem) !important;
  font-weight: 900 !important;
  letter-spacing: -.04em !important;
  line-height: 1 !important;
  color: var(--qf-orange) !important;
}
.qf-about-stat-lbl {
  margin: 6px 0 0 !important;
  font-size: .85rem;
  color: var(--qf-gris);
}

/* Mission */
.qf-about-mission {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.7;
  color: var(--qf-texte);
}
.qf-about-mission em { color: var(--qf-orange); font-style: italic; }

/* Ce qu'on publie — grille 2×2 */
.qf-about-publie-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.qf-about-publie-card {
  padding: 24px;
  border: 1.5px solid var(--qf-border);
  border-radius: var(--r-lg);
  background: #fff;
  transition: border-color var(--t), transform var(--t);
}
.qf-about-publie-card:hover {
  border-color: var(--qf-orange);
  transform: translateY(-2px);
}
.qf-about-publie-icon {
  display: block;
  margin-bottom: 12px;
  font-size: 1.8rem;
  line-height: 1;
}
.qf-about-publie-card h3 {
  margin: 0 0 6px;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--qf-noir);
}
.qf-about-publie-card p {
  margin: 0;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--qf-texte);
}

/* Qui sommes-nous — colonnes texte + badges */
.qf-about-qui-grid {
  gap: 32px !important;
  align-items: center !important;
}
.qf-about-badges-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.qf-about-badge {
  padding: 14px 20px !important;
  border-radius: 99px !important;
  background: var(--qf-neu-bg) !important;
  justify-content: flex-start !important;
}
.qf-about-badge p {
  margin: 0 !important;
  position: relative;
  padding-left: 26px;
  font-weight: 700;
  font-size: .92rem;
  color: var(--qf-noir);
}
.qf-about-badge p::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--qf-orange);
  font-weight: 900;
}

/* Nos villes — chips */
.qf-about-villes-sublabel {
  margin: 0 0 10px;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--qf-gris);
}
.qf-about-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.qf-about-chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 99px;
  font-size: .85rem;
  font-weight: 600;
  background: var(--qf-neu-bg);
  color: var(--qf-gris);
  border: 1.5px solid transparent;
}
.qf-about-chip-active {
  background: #fff;
  color: var(--qf-orange);
  border-color: var(--qf-orange);
  font-weight: 700;
}

/* CTA final */
.qf-about-cta {
  text-align: center;
  padding: 40px 32px !important;
  border-radius: var(--r-lg) !important;
  background: var(--qf-neu-bg) !important;
}
.qf-about-cta h2 {
  margin: 0 0 10px;
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--qf-noir);
}
.qf-about-cta p {
  margin: 0 auto 22px;
  max-width: 520px;
  line-height: 1.6;
  color: var(--qf-texte);
}
.qf-about-cta .wp-block-button:not(.is-style-outline) .wp-block-button__link {
  background: var(--qf-orange);
  color: #fff;
  border-radius: 99px;
  padding: 13px 30px;
  font-weight: 700;
}
.qf-about-cta .wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--qf-orange);
  border: 2px solid var(--qf-orange);
  border-radius: 99px;
  padding: 11px 28px;
  font-weight: 700;
}

/* Mobile */
@media (max-width: 600px) {
  .qf-about-publie-grid { grid-template-columns: 1fr; }
}


/* ══════════════════════════════════════════════════════════════
   22. TITRE CONTOUR ORANGE — texte évidé, contour extérieur
   Sur : n'importe quel texte (span, h2, h3…) | Classe : qf-titre-contour-orange
   Effet : intérieur blanc, contour orange posé À L'EXTÉRIEUR des lettres
   (paint-order: stroke fill → le remplissage blanc recouvre la moitié
   interne du trait, ne laissant visible que sa moitié extérieure).
   ══════════════════════════════════════════════════════════════ */
.qf-titre-contour-orange {
  font-family: inherit;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: 32px;
  line-height: 1.1;
  display: inline-block;
  color: #fff;
  -webkit-text-fill-color: #fff;
  -webkit-text-stroke: 6px var(--qf-orange);
  text-stroke: 6px var(--qf-orange);
  paint-order: stroke fill;
}