/* ============================================================================
   ARTICLE TEMPLATE — V4
   ============================================================================
   Version livrée le 23 avril 2026.

   Changements vs V3 :
   - Largeurs Solution B (texte 800px, modules 880px — écart réduit 40px/côté)
   - Ajout hero-e (texte gauche / image droite, inverse du hero-b)
   - Steps en 2 variantes : par défaut (compact, 720px) et --grid (3 colonnes)
   - Alternance pipeline B/D/E par index % 3

   Préfixe : .art-*
   Architecture : BEM (.art-block__element--modifier)
   Dépendances : aucune (vanilla CSS)
   Responsive : mobile first, breakpoint 768px

   Deux couches à combiner :
   1. Ce fichier (structure + modules) → identique sur tous les sites
   2. article-variables-{site}.css (couleurs + typos) → spécifique par site
   ============================================================================ */


/* ============================================================================
   1. FONDATIONS : reset léger, variables par défaut, typographie
   ============================================================================ */

.art-article *,
.art-article *::before,
.art-article *::after {
  box-sizing: border-box;
}

.art-article {
  /* ---- Variables par défaut (surchargées par article-variables-{site}.css) ---- */

  /* Couleurs */
  --art-ink: #1a1a1a;
  --art-muted: #6b6b6b;
  --art-surface: #ffffff;
  --art-subtle: #f7f4ef;
  --art-border: rgba(26, 26, 26, 0.08);
  --art-primary: #c2613e;
  --art-primary-soft: #f4e8e0;
  --art-accent: #1d3b5c;
  --art-accent-soft: #e8edf3;

  /* Couleurs "Réponse rapide" — Pallier Z4-c (2026-05-18) : allégée, fond quasi-blanc
     teinté + liseré gauche vert. Identique sur tous les sites (assumé flotte). */
  --art-quick-bg: #f6faf0;     /* Z4-c : était #eef4e2, allégé vers quasi-blanc teinté. */
  --art-quick-border: #639922; /* Z4-c : liseré gauche net (était #97C459 plus pâle). */
  --art-quick-text: #27500A;   /* Conservé pour usages éventuels, mais le corps passe à --art-ink */
  --art-quick-label: #3B6D11;  /* Label + intitulés <strong> dans les points uniquement */

  /* Typographies */
  --art-font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --art-font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Taille de base */
  --art-font-size-base: 1.0625rem;
  --art-line-height-base: 1.75;

  /* ---- Largeurs (anti-zigzag) ---- */
  --art-content-width: 800px;    /* texte courant — Solution B */
  --art-module-width: 880px;     /* modules visuels — Solution B (écart 40px de chaque côté) */
  --art-wide-width: 1000px;      /* container global */

  /* Formes */
  --art-radius-sm: 6px;
  --art-radius-md: 12px;
  --art-radius-lg: 20px;

  /* Application */
  max-width: var(--art-wide-width);
  margin: 0 auto;
  /* Pallier Z4-b (2026-05-18) : fusion fond article/site, suppression effet carte.
     background passé à transparent → l'article hérite du fond du body (thème site).
     Padding-top 2.5rem ajouté pour respiration sans bordure ni ombre.
     NB : .art-article.art-author-page conserve son fond carte (sélecteur plus
     spécifique html body … plus loin, surcharge cette règle). */
  padding: 2.5rem 1.25rem 4rem;
  font-family: var(--art-font-body);
  font-size: var(--art-font-size-base);
  line-height: var(--art-line-height-base);
  color: var(--art-ink);
  background: transparent;
}


/* ============================================================================
   2. ÉLÉMENTS DE BASE : paragraphes, titres, liens, emphase
   ============================================================================ */

.art-article p {
  margin: 0 0 1.25em;
  max-width: var(--art-content-width);
}

.art-article p:first-child {
  margin-top: 0;
}

/* Pallier Z9 (2026-05-18) — Fix centrage RÉEL <p> orphelins (Z8 incomplet).
   Cible : <p> ORPHELINS enfants directs de <article.art-article>, hors de toute .art-body
   (anomalie markup pipeline : la .art-body wrappante se ferme prématurément après le <h2>
   "Erreurs à éviter", laissant les <p> détaillés au niveau racine de .art-article).

   Z8 (margin:auto seul) était INERTE : le <p> orphelin se rendait pleine largeur en pratique
   malgré `.art-article p { max-width: var(--art-content-width) }` théoriquement appliqué.
   Cause exacte non identifiée en cascade (article-styles.css, flowup-skeleton.css,
   gp main.min.css, <style> inline tous audités — aucun override max-width sur p trouvé).
   Hypothèse plausible : injection runtime ou custom_css legacy DB qui force width 100%.

   Z9 reproduit le mécanisme EXACT de .art-body au pixel près + !important pour blinder :
   - max-width: var(--art-content-width) = 800px (idem .art-body)
   - margin-left/right: auto (centrage horizontal, idem .art-body)
   - padding-left/right: 1.25rem mobile / 0 desktop ≥960px (idem .art-body breakpoint)
   - box-sizing: border-box (hérité de .art-article *, expliciter par sécurité)
   - display: block (par défaut sur <p>, expliciter par sécurité)

   !important utilisé pour battre tout override custom_css de spécificité équivalente.

   Sélecteur CHIRURGICAL `.art-article:not(.art-author-page) > p` (child combinator strict) :
   - Cible UNIQUEMENT les <p> enfants directs de .art-article (= orphelins par définition).
   - NE touche PAS les <p> dans .art-body, .art-callout, .art-quick-answer, .art-faq__answer,
     .art-card, .art-pullquote, etc. (tous descendants indirects, jamais matchés par `>`).
   - Exclusion :not(.art-author-page) : pages auteur intactes (Z7-b appliqué séparément).

   Statut rétroactif : 100%. Pur CSS sur sélecteur prouvé Z8. Audit lecture seule : 5085 a
   4 <p> orphelins, 5186/5188/5202 ont 0 orphelin. Anomalie rare mais récurrente, Z9 corrige
   sans risque de déborder. */
.art-article:not(.art-author-page) > p {
  display: block !important;
  max-width: var(--art-content-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important;
  box-sizing: border-box !important;
}

@media (min-width: 960px) {
  .art-article:not(.art-author-page) > p {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

.art-article strong {
  font-weight: 600;
  color: var(--art-ink);
}

.art-article em {
  font-style: italic;
}

.art-article a {
  color: var(--art-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.15s ease;
}

.art-article a:hover {
  color: var(--art-primary);
}

.art-article h2 {
  /* Pallier Z4-d (2026-05-18) : H2 centrés, max-width 70% (margin auto), pour
     éviter l'effet "poème" sur titre long. H3 et corps (p, ul/ol) restent
     alignés à gauche (lisibilité hiérarchique). text-wrap: balance conservé. */
  font-family: var(--art-font-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 2.2vw + 1rem, 2.15rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--art-ink);
  margin: 3rem auto 1.2rem;
  max-width: 70%;
  text-align: center;
  text-wrap: balance;
}

.art-article h3 {
  /* Pallier Z4-d : H3 reste aligné gauche, hiérarchie claire vs H2 centrés. */
  font-family: var(--art-font-display);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--art-ink);
  margin: 2rem 0 0.8rem;
  max-width: var(--art-content-width);
}

.art-article ul,
.art-article ol {
  margin: 0 0 1.25em;
  padding-left: 1.5em;
  max-width: var(--art-content-width);
}

.art-article ul li,
.art-article ol li {
  margin-bottom: 0.5em;
  line-height: 1.7;
}


/* ============================================================================
   3. HERO : VARIANTE B — Split image + texte (60/40)
   ============================================================================
   Image à gauche (60%), bloc texte à droite (40%). Sur mobile : image
   au-dessus du texte, 100% largeur chacun.
   */

/* Pallier I.4-quinquies.B (Bug X3) + I.4-sexies E (Bug Y4) + I.4-septies Z1+Z2 :
   Layout symétrique photo gauche / texte droite. Hero aligné sur même grille que .art-body
   (max-width: var(--art-content-width) = 800px) → photo bord gauche aligné avec marge
   gauche des sections "À propos / Parcours". Margin-top 2rem (~32px) pour respiration
   entre header et photo. Photo plus petite (~400×440 desktop), bord droit aligné avec
   début bloc texte droit, bord bas aligné avec fin citation. */
.art-hero--b {
  /* Pallier Z5-a (2026-05-18) : header fond fusionné, suppression carte blanche hero
     (cohérent Z4-b sur .art-article). Le hero se fond dans le fond site.
     - background var(--art-surface) → transparent
     - border-radius retiré (plus de carte visuelle ; photo arrondie par Z4-a sur __image)
     - overflow:hidden conservé (clip défensif sur image absolute inset:0 du wrap)
     - Pages auteur : la grande carte est portée par .art-article.art-author-page,
       PAS par le hero (cf. Pallier I.7-ter ci-dessous) → impact visuel nul. */
  display: grid;
  grid-template-columns: 1fr;
  min-height: 380px;
  max-width: var(--art-content-width);
  margin: 1.75rem auto 3rem;
  padding: 0 1.25rem;
  background: transparent;
  overflow: hidden;
}

@media (min-width: 900px) {
  .art-hero--b {
    grid-template-columns: 1fr 1fr;
    /* Pallier I.4-septies Z2 : pas de max-height fixé — laisse le bloc texte dicter sa
       hauteur naturelle (bio + citation), photo s'aligne via align-items: stretch. */
    padding: 0;
  }
}

/* Specificity sur .art-author-page (R-FLEX) pour cibler uniquement les pages auteur,
   pas les articles standards qui peuvent réutiliser .art-hero--b avec d'autres règles.
   html body en prefix pour spécificité maximum (override custom_css legacy). */
html body .art-article.art-author-page .art-hero--b {
  margin-top: 2rem;
  margin-bottom: 2rem;
  /* Pallier I.7-ter : rollback I.7-bis. La grande carte est désormais portée par
     le wrapper racine .art-article.art-author-page (cf bloc ci-dessous). Le hero
     ne porte plus son propre bg/radius/shadow. La photo conserve son rendu via
     overflow:hidden + border-radius hérités du .art-hero--b base. */
}

/* ============================================================================
   Pallier I.7-ter — Grande carte "page magazine" sur la page auteur entière
   ============================================================================
   Pattern Wizard v2 : pour les pages éditoriales fortes (notre-redaction, author),
   le contenu est englobé dans une carte blanche flottante avec coins arrondis et
   ombre douce. Référence visuelle : /notre-redaction/ (.inside-article 22px radius).

   Sur les pages auteur (template flowup-author-pages.php), le wrapper natif est
   <article class="art-article art-author-page"> rendu directement dans wp_body_open
   (pas dans .inside-article GP standard). On peint donc la grande carte sur ce
   wrapper. Le hero interne conserve son alignement pixel-perfect Z2.
*/
html body .art-article.art-author-page {
  background: var(--fu-surface-card, var(--art-surface, #FFFFFF));
  border-radius: var(--fu-radius, 22px);
  box-shadow: var(--fu-shadow, 0 14px 40px rgba(58, 42, 32, .07));
  /* Padding généreux haut/bas pour respiration éditoriale, latéral 1.25rem
     pour conserver l'alignement interne du hero/sections (max-width 800px). */
  padding: 56px 1.25rem 80px;
  margin: 48px auto;
  overflow: hidden;
}

@media (min-width: 960px) {
  html body .art-article.art-author-page {
    padding: 56px 56px 80px;
  }
}

@media (max-width: 600px) {
  html body .art-article.art-author-page {
    padding: 32px 16px 48px;
    margin: 24px 12px;
    border-radius: var(--fu-radius-sm, 14px);
  }
}

/* Liserés horizontaux entre les sections .art-body de la page auteur, cohérent
   avec le rendu /notre-redaction/. Le premier .art-body après le hero porte le
   séparateur ; chaque suivant aussi. R-FLEX-2 : si une section est skip côté
   PHP (bio_long absente, etc.), pas de liseré orphelin. */
html body .art-article.art-author-page .art-body {
  border-top: 1px solid var(--fu-line, #E8DDD0);
  padding-top: 2.5rem;
  margin-top: 2.5rem;
}

/* Pallier Z7-b (2026-05-18) — Bio pages auteur aérée (espacement + line-height).
   Sélecteur ciblé pour ne toucher QUE les paragraphes des pages auteur, JAMAIS
   les paragraphes des articles standards (qui sont déjà validés par Z3→Z6).
   Préfixe html body pour spécificité haute (compense overrides custom_css GP).
   Valeurs : margin-bottom 1.75em (au lieu de 1.25em hérité de .art-article p),
   line-height 1.85 (au lieu de 1.75 hérité). Lecture plus aérée et premium. */
html body .art-article.art-author-page .art-body p {
  margin-bottom: 1.75em;
  line-height: 1.85;
}

.art-hero--b__image-wrap {
  position: relative;
  background: var(--art-subtle);
  min-height: 280px;
  aspect-ratio: 4 / 5;
}

@media (min-width: 900px) {
  .art-hero--b__image-wrap {
    /* Pallier I.4-septies Z2 : pas de max-height — la photo s'étire à la hauteur réelle
       du bloc texte droit (align-items: stretch grid default) → bord bas photo aligné avec
       fin citation. min-height 380 = compactage par rapport à 460 précédent. */
    aspect-ratio: auto;
    min-height: 380px;
    height: 100%;
  }
}

.art-hero--b__image {
  /* Pallier Z4-a (2026-05-18) : coins photo hero arrondis 12px, 3 variantes (B/D/E).
     Le wrap conserve son background --art-subtle qui crée un fin liseré neutre derrière
     les 4 coins arrondis. Pas de gap supplémentaire ajouté pour rester minimal. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

.art-hero--b__body {
  /* Pallier I.4-septies Z2 : padding réduit pour bloc texte plus compact.
     Pallier Z5-a : background var(--art-surface) → transparent (fond fusionné).
     Pallier Z5-b : text-align center pour H1/catégorie/chapô centrés. */
  padding: 2rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: transparent;
  text-align: center;
}

@media (min-width: 900px) {
  .art-hero--b__body {
    padding: 3rem 3.5rem;
  }
}

.art-hero--b__category {
  font-family: var(--art-font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--art-primary);
  margin-bottom: 1rem;
}

.art-hero--b__title {
  font-family: var(--art-font-display);
  font-weight: 500;
  font-size: clamp(1.8rem, 2.5vw + 0.8rem, 2.6rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--art-ink);
  margin: 0 0 0.85rem;
  text-wrap: balance;
}

.art-hero--b__subtitle {
  font-family: var(--art-font-display);
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.45;
  color: var(--art-muted);
  margin: 0 0 1.5rem;
}

.art-hero--b__byline {
  /* Pallier Z5-b : justify-content center pour cohérence avec __body text-align center. */
  display: flex;
  gap: 1rem;
  font-size: 0.78rem;
  color: var(--art-muted);
  padding-top: 1rem;
  border-top: 1px solid var(--art-border);
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
}


/* ============================================================================
   4. HERO : VARIANTE D — Texte au-dessus, image en-dessous
   ============================================================================
   Catégorie + titre + sous-titre + byline en haut sur fond clair,
   puis image panoramique en-dessous. Style éditorial sobre.
   */

.art-hero--d {
  /* Pallier Z5-a (2026-05-18) : header fond fusionné, suppression carte blanche
     (cohérent Z4-b). overflow:hidden conservé pour le full-bleed négatif margin. */
  margin: 0 calc(50% - 50vw) 3rem;
  max-width: 100vw;
  background: transparent;
  overflow: hidden;
}

@media (min-width: 960px) {
  .art-hero--d {
    margin: 0 -1.5rem 3rem;
    max-width: none;
  }
}

.art-hero--d__body {
  /* Pallier Z5-b (2026-05-18) : text-align center pour H1/catégorie/chapô centrés.
     __title et __subtitle (max-width fixes 720/640px) reçoivent margin: auto séparément. */
  max-width: var(--art-module-width);
  margin: 0 auto;
  padding: 2rem 1.5rem 2rem;
  text-align: center;
}

@media (min-width: 768px) {
  .art-hero--d__body {
    padding: 3rem 2rem 2.5rem;
  }
}

.art-hero--d__category {
  font-family: var(--art-font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--art-primary);
  margin-bottom: 1rem;
  display: inline-block;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--art-primary);
}

.art-hero--d__title {
  /* Pallier Z5-b : margin auto sur les côtés pour centrer la boîte (max-width 720px). */
  font-family: var(--art-font-display);
  font-weight: 500;
  font-size: clamp(2rem, 3.5vw + 0.8rem, 3.2rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--art-ink);
  margin: 0 auto 1rem;
  text-wrap: balance;
  max-width: 720px;
}

.art-hero--d__subtitle {
  /* Pallier Z5-b : margin auto sur les côtés pour centrer la boîte (max-width 640px). */
  font-family: var(--art-font-display);
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.45;
  color: var(--art-muted);
  margin: 0 auto 1.5rem;
  max-width: 640px;
}

.art-hero--d__byline {
  /* Pallier Z5-b : justify-content center pour centrer les 3 spans (auteur/date/lecture)
     sous le titre centré. flex-wrap conservé pour éviter overflow sur petit écran. */
  display: flex;
  gap: 1.25rem;
  font-size: 0.78rem;
  color: var(--art-muted);
  padding-top: 1.25rem;
  border-top: 1px solid var(--art-border);
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
}

.art-hero--d__image-wrap {
  width: 100%;
  aspect-ratio: 21 / 9;
  min-height: 320px;
  max-height: 540px;
  overflow: hidden;
  background: var(--art-subtle);
}

@media (min-width: 960px) {
  .art-hero--d__image-wrap {
    max-width: var(--art-wide-width);
    margin: 0 auto;
    border-radius: var(--art-radius-md);
  }
}

.art-hero--d__image {
  /* Pallier Z4-a : coins photo hero arrondis 12px (cf. .art-hero--b__image). */
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 12px;
}




/* ============================================================================
   4bis. HERO : VARIANTE E — Split inversé (texte à gauche, image à droite)
   ============================================================================
   Variante du hero B avec inversion. Ajoute une 3e structure pour l'alternance
   automatique B/D/E dans le pipeline (index % 3).
   */

.art-hero--e {
  /* Pallier Z5-a (2026-05-18) : header fond fusionné, suppression carte blanche
     (cohérent Z4-b). overflow:hidden conservé pour clip défensif sur image absolute. */
  display: grid;
  grid-template-columns: 1fr;
  min-height: 440px;
  margin: 0 calc(50% - 50vw) 3rem;
  max-width: 100vw;
  background: transparent;
  overflow: hidden;
}

@media (min-width: 900px) {
  .art-hero--e {
    grid-template-columns: 2fr 3fr;
    /* Pallier I.4-septies Z3 : applique Z2 à hero E — photo s'étire à la hauteur réelle
       du bloc texte (align-items: stretch grid default), object-fit cover, robuste
       paysage/portrait. Pas de max-height fixé : sinon container plafonne et la photo
       reste calée en haut avec vide gris en bas (bug observé sur post 5126 JP).
       Pallier Z5-a : border-radius retiré (plus de carte visuelle). */
    margin: 0 -1.5rem 3rem;
    max-width: none;
  }
}

.art-hero--e__body {
  /* Pallier Z5-a : background var(--art-surface) → transparent (fond fusionné).
     Pallier Z5-b : text-align center pour H1/catégorie/chapô centrés dans la colonne. */
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: transparent;
  text-align: center;
  order: 2;
}

@media (min-width: 900px) {
  .art-hero--e__body {
    padding: 3rem 3.5rem;
    order: 1;
  }
}

.art-hero--e__category {
  font-family: var(--art-font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--art-primary);
  margin-bottom: 1rem;
}

.art-hero--e__title {
  font-family: var(--art-font-display);
  font-weight: 500;
  font-size: clamp(1.8rem, 2.5vw + 0.8rem, 2.6rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--art-ink);
  margin: 0 0 0.85rem;
  text-wrap: balance;
}

.art-hero--e__subtitle {
  font-family: var(--art-font-display);
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.45;
  color: var(--art-muted);
  margin: 0 0 1.5rem;
}

.art-hero--e__byline {
  /* Pallier Z5-b : justify-content center pour cohérence avec __body text-align center. */
  display: flex;
  gap: 1rem;
  font-size: 0.78rem;
  color: var(--art-muted);
  padding-top: 1rem;
  border-top: 1px solid var(--art-border);
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
}

.art-hero--e__image-wrap {
  position: relative;
  background: var(--art-subtle);
  min-height: 280px;
  aspect-ratio: 4 / 3;
  order: 1;
}

@media (min-width: 900px) {
  .art-hero--e__image-wrap {
    /* Pallier I.4-septies Z3 : pas de min-height fixe. height: 100% laisse
       align-items: stretch (grid default) étirer la cellule à la hauteur naturelle
       du __body texte gauche → l'image (object-fit: cover) remplit toute la hauteur,
       zéro vide gris. */
    aspect-ratio: auto;
    height: 100%;
    order: 2;
  }
}

.art-hero--e__image {
  /* Pallier Z4-a : coins photo hero arrondis 12px (cf. .art-hero--b__image). */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}


/* ============================================================================
   Pallier Z6-a (2026-05-18) — HEADER UNIFIÉ VARIANTE D POUR B/E (rétroactif)
   ============================================================================
   Décision validation pilote JP : H1 centré en colonne étroite (B 50%, E 40%)
   donne effet "poème haché". On unifie B et E sur le rendu D (bloc plein largeur
   centré + image panoramique 21/9 dessous), SANS toucher le markup (figé en
   post_content). Tout passe en surcharge CSS sur les classes existantes.

   Sélecteur préfixé .art-article:not(.art-author-page) → EXCLUSION des pages
   auteur (qui réutilisent .art-hero--b en grille 2 colonnes photo+bio,
   design distinct à préserver — cf. Pallier I.7-ter).

   Mécanique :
   - Container B/E : display: flex / flex-direction: column (annule grid 2col)
   - __body : block centré, ordre 1 (au-dessus), padding D, max-width module
   - __image-wrap : ordre 2 (dessous), aspect-ratio 21/9 panoramique, full-width
   - __image : position static (annule absolute), display block, radius 12px

   Les anciens paliers Z2/Z3 (image-wrap min-height, height:100% pour stretch
   grid) deviennent obsolètes en mode D : on annule via position:static +
   height:auto + aspect-ratio fixe.
   ============================================================================ */

.art-article:not(.art-author-page) .art-hero--b,
.art-article:not(.art-author-page) .art-hero--e {
  display: flex;
  flex-direction: column;
  grid-template-columns: none;
  min-height: 0;
  max-height: none;
  margin: 0 calc(50% - 50vw) 3rem;
  max-width: 100vw;
  padding: 0;
  background: transparent;
  overflow: hidden;
  border-radius: 0;
}

@media (min-width: 900px) {
  .art-article:not(.art-author-page) .art-hero--b,
  .art-article:not(.art-author-page) .art-hero--e {
    grid-template-columns: none;
  }
}

@media (min-width: 960px) {
  .art-article:not(.art-author-page) .art-hero--b,
  .art-article:not(.art-author-page) .art-hero--e {
    margin: 0 -1.5rem 3rem;
    max-width: none;
  }
}

/* __body B/E : reproduire .art-hero--d__body — block plein largeur centré. */
.art-article:not(.art-author-page) .art-hero--b__body,
.art-article:not(.art-author-page) .art-hero--e__body {
  display: block;
  max-width: var(--art-module-width);
  margin: 0 auto;
  padding: 2rem 1.5rem 2rem;
  text-align: center;
  background: transparent;
  order: 1;
  /* annuler le flex justify-content vertical hérité (mode 2-col) */
  justify-content: flex-start;
}

@media (min-width: 768px) {
  .art-article:not(.art-author-page) .art-hero--b__body,
  .art-article:not(.art-author-page) .art-hero--e__body {
    padding: 3rem 2rem 2.5rem;
  }
}

/* __category B/E : reproduire .art-hero--d__category — inline-block + border-bottom. */
.art-article:not(.art-author-page) .art-hero--b__category,
.art-article:not(.art-author-page) .art-hero--e__category {
  letter-spacing: 0.16em;
  display: inline-block;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--art-primary);
  margin-bottom: 1rem;
}

/* __title B/E : reproduire .art-hero--d__title — gros font + max-width 720 + auto margins. */
.art-article:not(.art-author-page) .art-hero--b__title,
.art-article:not(.art-author-page) .art-hero--e__title {
  font-size: clamp(2rem, 3.5vw + 0.8rem, 3.2rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0 auto 1rem;
  max-width: 720px;
  font-weight: 500;
}

/* __subtitle B/E : reproduire .art-hero--d__subtitle — font 1.2rem + max-width 640 + auto margins. */
.art-article:not(.art-author-page) .art-hero--b__subtitle,
.art-article:not(.art-author-page) .art-hero--e__subtitle {
  font-size: 1.2rem;
  margin: 0 auto 1.5rem;
  max-width: 640px;
}

/* __byline B/E : reproduire .art-hero--d__byline — gap + padding-top D. */
.art-article:not(.art-author-page) .art-hero--b__byline,
.art-article:not(.art-author-page) .art-hero--e__byline {
  gap: 1.25rem;
  padding-top: 1.25rem;
}

/* __image-wrap B/E : reproduire .art-hero--d__image-wrap — panoramique 21/9 full-width.
   Annule position:relative + aspect 4/5 (B) + 4/3 (E) + height:100% (Z3 sur E). */
.art-article:not(.art-author-page) .art-hero--b__image-wrap,
.art-article:not(.art-author-page) .art-hero--e__image-wrap {
  position: static;
  width: 100%;
  aspect-ratio: 21 / 9;
  min-height: 320px;
  max-height: 540px;
  height: auto;
  overflow: hidden;
  background: var(--art-subtle);
  order: 2;
}

@media (min-width: 960px) {
  .art-article:not(.art-author-page) .art-hero--b__image-wrap,
  .art-article:not(.art-author-page) .art-hero--e__image-wrap {
    max-width: var(--art-wide-width);
    margin: 0 auto;
    border-radius: var(--art-radius-md);
  }
}

/* __image B/E : reproduire .art-hero--d__image — static + display block + radius 12.
   Annule position:absolute inset:0 width/height:100% (B/E original). */
.art-article:not(.art-author-page) .art-hero--b__image,
.art-article:not(.art-author-page) .art-hero--e__image {
  position: static;
  inset: auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 12px;
}


/* ============================================================================
   5. QUICK ANSWER : module "Réponse rapide" — OBLIGATOIRE après le hero
   ============================================================================ */

.art-quick-answer {
  max-width: var(--art-module-width);
  margin: 0 auto 3rem;
  padding: 0 1.25rem;
}

@media (min-width: 960px) {
  .art-quick-answer {
    padding: 0;
  }
}

.art-quick-answer__inner {
  /* Pallier Z6-b (2026-05-18) : Réponse Rapide refondue — label seul, texte noir
     explicite #1a1a1a, points 2 colonnes compactes. Annule les choix Z4-c qui
     créaient un bug de contraste (label inline-flex margin-bottom ignoré + couleur
     héritée pouvant ressortir claire selon cascade thème WP).
     - background #f6faf0 (--art-quick-bg, vert très pâle)
     - border-left 3px solid #97C459 (couleur en dur, pas la var quick-border)
     - border-radius 0 8px 8px 0 (compact, style callout)
     - padding 1rem 1.25rem (~16px 20px, compact) */
  background: #f6faf0;
  border-left: 3px solid #97C459;
  border-radius: 0 8px 8px 0;
  padding: 1rem 1.25rem;
  position: relative;
  /* Texte du bloc en NOIR EXPLICITE — pas de variable, pas de cascade thème.
     Ce reset garantit que summary et li héritent #1a1a1a si jamais une règle
     locale omettait color. */
  color: #1a1a1a;
}

@media (max-width: 640px) {
  .art-quick-answer__inner {
    padding: 0.875rem 1rem;
  }
}

.art-quick-answer__label {
  /* Pallier Z6-b : label SEUL SUR SA PROPRE LIGNE.
     CRITIQUE : display:block (pas inline-flex) sinon margin-bottom ignoré
     par le flow inline → label collé au summary (bug observé). */
  display: block;
  font-family: var(--art-font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #3B6D11;
  margin: 0 0 10px;
}

.art-quick-answer__label::before {
  /* Pallier Z6-b : tiret horizontal du label supprimé (design simplifié). */
  content: none;
}

.art-quick-answer__summary {
  /* Pallier Z6-b : couleur noir EN DUR #1a1a1a (pas de var, pas de cascade thème).
     C'est LE fix du bug Bruce : texte quasi-invisible qu'il devait surligner pour
     lire. font-display serif conservé (cohérence éditoriale). */
  font-family: var(--art-font-display);
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1.6;
  color: #1a1a1a;
  margin: 0 0 0.85rem;
  letter-spacing: -0.005em;
  max-width: none;
}

.art-quick-answer__points {
  /* Pallier Z6-b : points en 2 COLONNES via CSS columns (display: block, pas flex).
     CSS columns valide ici car .art-quick-answer__points est une vraie <ul> avec
     <li> simples (texte direct, pas de structure imbriquée) — confirmé lecture REST
     sur 3 articles JP (5126, 5174, 5188, tous 4 li). */
  display: block;
  list-style: none;
  padding: 0;
  margin: 0;
  columns: 2;
  column-gap: 1.75rem;
  max-width: none;
}

@media (max-width: 640px) {
  .art-quick-answer__points {
    /* Mobile : repasser en 1 colonne pour lisibilité (sinon colonnes trop étroites). */
    columns: 1;
  }
}

.art-quick-answer__points li {
  /* Pallier Z6-b : break-inside avoid pour éviter qu'un li soit coupé entre les
     2 colonnes. Marges compactes, NI border-top NI padding-top (Z4-c retiré).
     Couleur noir EN DUR. */
  break-inside: avoid;
  position: relative;
  font-family: var(--art-font-body);
  font-size: 0.94rem;
  line-height: 1.5;
  color: #1a1a1a;
  margin: 0 0 7px;
  padding: 0;
  border-top: none;
}

.art-quick-answer__points li:first-child {
  /* Pallier Z6-b : règle Z4-c first-child obsolète (plus de border-top à annuler),
     conservée pour explicitement neutraliser tout reliquat cascade. */
  border-top: none;
  padding-top: 0;
}

.art-quick-answer__points li::before {
  /* Pallier Z6-b : tiret/dash gauche absent (cohérent avec design compact). */
  content: none;
}

.art-quick-answer__points li strong {
  /* Pallier Z6-b : intitulé du point en VERT (seul élément coloré dans le bloc). */
  color: #3B6D11;
  font-weight: 600;
}


/* ============================================================================
   6. CORPS D'ARTICLE : wrapper pour paragraphes et sections
   ============================================================================ */

.art-body {
  max-width: var(--art-content-width);
  margin: 0 auto;
  padding: 0 1.25rem;
}

@media (min-width: 960px) {
  .art-body {
    padding: 0;
  }
}


/* ============================================================================
   7. CALLOUT : note en avant (info / attention / astuce)
   ============================================================================ */

.art-callout {
  /* Lifting CSS 2026-05-18 (rev) : retour au liseré gauche épais coloré (4px) +
     arrondi côté droit uniquement (0 12px 12px 0). Le côté gauche reste droit pour
     accueillir le liseré proprement (pas d'angle vif visible). Distinction des
     3 variantes = couleur liseré + couleur fond. NOTE: ne s'applique PAS à
     .art-quick-answer qui reste en bordure complète 2px + arrondi 12px (validé). */
  border-left: 4px solid var(--art-primary);
  background: var(--art-primary-soft);
  padding: 1.25rem 1.5rem;
  margin: 2rem auto;
  border-radius: 0 12px 12px 0;
  font-size: 0.98rem;
  line-height: 1.65;
  max-width: var(--art-content-width);
}

.art-callout p {
  margin: 0;
  max-width: none;
}

.art-callout p + p {
  margin-top: 0.6em;
}

.art-callout__label {
  /* Pallier Z7-a (2026-05-18) : alignement bloc erreurs à éviter cohérent avec mise
     en page. Le label (ex "À ÉVITER ABSOLUMENT", "RÈGLE UTILE", "CONSEIL") est
     centré pour suivre la cohérence visuelle des h2 de section (centrés par Z4-d).
     Le TEXTE du callout reste aligné à gauche (paragraphe à l'intérieur) — seul le
     label uppercase letter-spacing est centré, comme une étiquette au-dessus du bloc.
     S'applique aux 3 variantes (default primary, --info bleu, --warning orange). */
  display: block;
  font-family: var(--art-font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--art-primary);
  margin-bottom: 0.5rem;
  text-align: center;
}

.art-callout--info {
  border-left-color: var(--art-accent);
  background: var(--art-accent-soft);
}

.art-callout--info .art-callout__label {
  color: var(--art-accent);
}

.art-callout--warning {
  border-left-color: #b4531a;
  background: #fbefe3;
}

.art-callout--warning .art-callout__label {
  color: #b4531a;
}


/* ============================================================================
   8. PULLQUOTE : citation mise en avant
   ============================================================================ */

.art-pullquote {
  margin: 3rem auto;
  padding: 0;
  border: none;
  max-width: var(--art-content-width);
}

.art-pullquote p {
  font-family: var(--art-font-display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.35rem, 1.5vw + 1rem, 1.65rem);
  line-height: 1.35;
  color: var(--art-ink);
  margin: 0 0 0.75rem;
  letter-spacing: -0.01em;
  text-wrap: balance;
  max-width: none;
}

.art-pullquote p::before {
  content: "« ";
  color: var(--art-primary);
}

.art-pullquote p::after {
  content: " »";
  color: var(--art-primary);
}

.art-pullquote cite {
  display: block;
  font-family: var(--art-font-body);
  font-style: normal;
  font-size: 0.85rem;
  color: var(--art-muted);
  letter-spacing: 0.02em;
}

.art-pullquote cite::before {
  content: "— ";
}


/* ============================================================================
   9. CARDS : grille 2 ou 3 colonnes
   ============================================================================ */

.art-cards {
  /* Pallier Z4-e : align-items: stretch (default grid, expliciter pour robustesse)
     → les .art-card prennent la hauteur de la cell row, ce qui combiné à
     height:100% sur .art-card donne des cartes de hauteur égale dans la row. */
  display: grid;
  gap: 1.25rem;
  margin: 2rem auto;
  max-width: var(--art-module-width);
  align-items: stretch;
}

.art-cards--2 {
  grid-template-columns: 1fr;
}

.art-cards--3 {
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .art-cards--2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .art-cards--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Lifting CSS 2026-05-17 — Défense anti-injection plugin tiers (ex: WP Inline Related
   Posts qui peut injecter un <div> entre 2 paragraphes du contenu, et donc parfois
   atterrir comme enfant direct d'une .art-cards--3 et casser la 3-up). Tout enfant
   direct de .art-cards qui n'est PAS une .art-card s'étend sur toute la largeur
   au lieu de prendre une cellule. Solution la moins destructive (vs display:none) :
   l'intrus reste visible mais ne casse plus la grille. */
.art-cards > :not(.art-card) {
  grid-column: 1 / -1;
}


/* ============================================================================
   Pallier Z6-c (2026-05-18) — VOIR AUSSI bleu pastel (surcharge plugin Inline Related Posts)
   ============================================================================
   Le plugin "WP Inline Related Posts" injecte un <a class="u{hash32}"> avec un
   <style> inline contenant border-left:4px solid #34495E !important + fond gris.
   Le markup observé en fixture (article 5126 historique, pré-cleanup) :
     <a class="uXXXXXXXX">
       <style>.uXXX {…border-left:4px solid #34495E !important;…}</style>
       <div><span class="ctaText">VOIR AUSSI</span> <span class="postTitle">…</span></div>
     </a>

   État actuel JP : 0 hit sur 100+20 articles scannés (récents + plus anciens) —
   plugin neutralisé sur JP. Surcharge Z6-c préventive/défensive pour les autres
   sites de la flotte qui peuvent encore avoir le plugin actif.

   Pourquoi :has() : le <a> a une classe dynamique u{hash32} (hash MD5 par instance),
   imprévisible. On cible via :has(.ctaText) qui matche tout <a> contenant le span
   "VOIR AUSSI". Support :has() Chrome 105+ / Safari 15.4+ / Firefox 121+ — OK.

   Spécificité : .art-article a:has(.ctaText) = 0,2,1 vs plugin .uXXX = 0,1,0.
   Notre règle gagne PAR LA SPÉCIFICITÉ. !important utilisé en sécurité car le
   plugin met aussi !important sur border-left.
   ============================================================================ */

.art-article a:has(.ctaText) {
  background-color: #eef4fb !important;
  background: #eef4fb !important;
  border-left: 4px solid #378ADD !important;
  border-radius: 0 8px 8px 0 !important;
}

.art-article a:has(.ctaText) .ctaText {
  color: #185FA5 !important;
}

.art-article a:has(.ctaText) .postTitle {
  color: #0C447C !important;
}

.art-card {
  /* Pallier Z4-e (2026-05-18) : cartes 3-up fond doux + hauteurs égalisées.
     - Background --art-subtle (équivalent secondary background du système art).
     - Border --art-border (rgba 0.08, très fin ; le 0.5px demandé est unstable
       cross-navigateur, on garde 1px avec couleur ultra-subtle).
     - Border-radius 10px (cohérent avec quick-answer + callout side-right).
     - height: 100% + align-items: stretch (default grid sur .art-cards--3)
       → toutes les cards prennent la hauteur du contenu le plus grand. */
  background: var(--art-subtle);
  border: 1px solid var(--art-border);
  border-radius: 10px;
  padding: 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: 100%;
}

.art-card__label {
  font-family: var(--art-font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--art-primary);
}

.art-card__title {
  font-family: var(--art-font-display);
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.3;
  color: var(--art-ink);
  margin: 0;
}

.art-card__body {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--art-ink);
  margin: 0;
  max-width: none;
}


/* ============================================================================
   10. TABLE : tableau simple 2-4 colonnes
   ============================================================================ */

.art-table {
  width: 100%;
  max-width: var(--art-module-width);
  margin: 2rem auto;
  border-collapse: collapse;
  font-size: 0.95rem;
  background: var(--art-surface);
  border: 1px solid var(--art-border);
  /* Lifting CSS 2026-05-17 : 12px (avant: --art-radius-sm 6px). overflow:hidden rogne
     proprement les cellules d'angle (1ère/dernière) avec border-collapse:collapse. */
  border-radius: 12px;
  overflow: hidden;
}

.art-table thead {
  background: var(--art-subtle);
}

.art-table th {
  font-family: var(--art-font-body);
  font-weight: 600;
  text-align: left;
  padding: 0.85rem 1rem;
  font-size: 0.85rem;
  color: var(--art-ink);
  border-bottom: 1px solid var(--art-border);
  letter-spacing: 0.01em;
}

.art-table td {
  padding: 0.85rem 1rem;
  vertical-align: top;
  border-bottom: 1px solid var(--art-border);
  line-height: 1.55;
}

.art-table tr:last-child td {
  border-bottom: none;
}

.art-table td:first-child {
  font-weight: 500;
  color: var(--art-ink);
}


/* ============================================================================
   11. STEPS : liste numérotée — DEUX variantes
   ============================================================================
   Variante par défaut (--compact) : rectangles adaptatifs, contenu serré
   Variante --grid : grille 3 colonnes (pour étapes courtes en parallèle)
   */

.art-steps {
  list-style: none;
  counter-reset: art-step;
  padding: 0;
  margin: 2rem auto;
  max-width: var(--art-module-width);
}


/* --- Variante par défaut = compact (rectangles adaptatifs) --- */

.art-steps:not(.art-steps--grid) {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.85rem;
  max-width: 720px;          /* Rectangles plus resserrés */
  margin-left: auto;          /* Centrage forcé dans la page */
  margin-right: auto;
}

.art-steps:not(.art-steps--grid) .art-steps__item {
  position: relative;
  padding: 1rem 1.5rem 1rem 3.75rem;
  background: var(--art-subtle);
  border-radius: var(--art-radius-sm);
  counter-increment: art-step;
}

.art-steps:not(.art-steps--grid) .art-steps__item::before {
  content: counter(art-step, decimal-leading-zero);
  position: absolute;
  left: 1.3rem;
  top: 1rem;
  font-family: var(--art-font-display);
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--art-primary);
  line-height: 1;
}


/* --- Variante --grid : grille 3 colonnes (cards numérotées) --- */

.art-steps--grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
}

@media (min-width: 768px) {
  .art-steps--grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.art-steps--grid .art-steps__item {
  padding: 1.5rem 1.25rem 1.35rem;
  background: var(--art-subtle);
  border-radius: var(--art-radius-md);
  counter-increment: art-step;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  position: relative;
}

.art-steps--grid .art-steps__item::before {
  content: counter(art-step, decimal-leading-zero);
  font-family: var(--art-font-display);
  font-weight: 500;
  font-size: 1.75rem;
  color: var(--art-primary);
  line-height: 1;
  margin-bottom: 0.4rem;
}


/* --- Titre et body communs aux deux variantes --- */

.art-steps__title {
  font-family: var(--art-font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--art-ink);
  margin: 0 0 0.35rem;
  line-height: 1.3;
}

.art-steps__body {
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
  color: var(--art-ink);
  max-width: none;
}


/* ============================================================================
   12. FIGURE : image dans le corps avec légende (taille standard)
   ============================================================================ */

.art-figure {
  margin: 2.5rem auto;
  max-width: var(--art-module-width);
}

.art-figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--art-radius-sm);
  background: var(--art-subtle);
}

.art-figure figcaption {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  color: var(--art-muted);
  font-style: italic;
  line-height: 1.45;
}


/* ============================================================================
   13. FIGURE FULL-WIDTH : image pleine largeur (usage parcimonieux)
   ============================================================================ */

.art-figure--full {
  margin: 3rem calc(50% - 50vw);
  max-width: 100vw;
  padding: 0;
}

@media (min-width: 960px) {
  .art-figure--full {
    margin: 3.5rem -1.5rem;
    max-width: none;
  }
}

.art-figure--full img {
  width: 100%;
  height: auto;
  max-height: 70vh;
  object-fit: cover;
  display: block;
  border-radius: 0;
  background: var(--art-subtle);
}

@media (min-width: 960px) {
  .art-figure--full img {
    border-radius: var(--art-radius-md);
  }
}

.art-figure--full figcaption {
  max-width: var(--art-content-width);
  margin: 0.75rem auto 0;
  padding: 0 1.25rem;
  font-size: 0.85rem;
  color: var(--art-muted);
  font-style: italic;
  line-height: 1.45;
  text-align: center;
}

@media (min-width: 960px) {
  .art-figure--full figcaption {
    padding: 0;
  }
}


/* ============================================================================
   14. SPLIT : image + texte côte à côte (dans le corps, pas en hero)
   ============================================================================ */

.art-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin: 3rem auto;
  max-width: var(--art-module-width);
  align-items: center;
}

@media (min-width: 768px) {
  .art-split {
    grid-template-columns: 1fr 1fr;
    gap: 2.25rem;
  }
}

@media (min-width: 768px) {
  .art-split--reverse .art-split__media {
    order: 2;
  }
}

.art-split__media {
  border-radius: var(--art-radius-sm);
  overflow: hidden;
  background: var(--art-subtle);
}

.art-split__media img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.art-split__body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.art-split__label {
  font-family: var(--art-font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--art-primary);
}

.art-split__title {
  font-family: var(--art-font-display);
  font-weight: 600;
  font-size: 1.35rem;
  line-height: 1.25;
  color: var(--art-ink);
  margin: 0 0 0.3rem;
  letter-spacing: -0.01em;
}

.art-split__text {
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--art-ink);
  margin: 0;
  max-width: none;
}


/* ============================================================================
   15. FAQ : questions/réponses avec accordéon natif (<details>)
   ============================================================================ */

.art-faq {
  margin: 3rem auto;
  max-width: var(--art-module-width);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Pallier Z4-f (2026-05-18) : titre "Questions fréquentes" injecté via ::before CSS.
   100% rétroactif : la classe .art-faq existe sur tous les articles V4 ayant une FAQ.
   Aucun changement de markup ; le pseudo-élément crée un titre H2-like centré au-dessus
   du premier <details>. Filet décoratif via border-bottom court (width: fit-content). */
.art-faq::before {
  content: "Questions fréquentes";
  display: block;
  width: fit-content;
  margin: 0 auto 1.75rem;
  padding-bottom: 0.6rem;
  font-family: var(--art-font-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 2.2vw + 1rem, 2.15rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--art-ink);
  text-align: center;
  border-bottom: 2px solid var(--art-primary);
}

.art-faq__item {
  background: var(--art-surface);
  border: 1px solid var(--art-border);
  border-radius: var(--art-radius-sm);
  overflow: hidden;
}

.art-faq__item[open] {
  border-color: var(--art-primary);
  background: var(--art-subtle);
}

.art-faq__question {
  cursor: pointer;
  padding: 1rem 1.25rem;
  font-family: var(--art-font-body);
  font-weight: 600;
  font-size: 1rem;
  color: var(--art-ink);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  line-height: 1.4;
}

.art-faq__question::-webkit-details-marker {
  display: none;
}

.art-faq__question::after {
  content: "+";
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--art-primary-soft);
  color: var(--art-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1;
  transition: transform 0.2s ease, background 0.2s ease;
}

.art-faq__item[open] .art-faq__question::after {
  transform: rotate(45deg);
  background: var(--art-primary);
  color: var(--art-surface);
}

.art-faq__answer {
  padding: 0 1.25rem 1.25rem;
  font-size: 0.96rem;
  line-height: 1.65;
  color: var(--art-ink);
  margin: 0;
  max-width: none;
}


/* ============================================================================
   16. DIVIDER : séparateur subtil entre sections majeures
   ============================================================================ */

.art-divider {
  border: none;
  border-top: 1px solid var(--art-border);
  margin: 3rem auto;
  max-width: var(--art-content-width);
}

.art-divider--center {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  margin: 3.5rem auto;
  max-width: var(--art-content-width);
}

.art-divider--center::before {
  content: "◆ ◆ ◆";
  color: var(--art-primary);
  font-size: 0.7rem;
  letter-spacing: 1em;
  opacity: 0.5;
}


/* ============================================================================
   17. OUTRO : fermeture naturelle
   ============================================================================ */

.art-outro {
  margin: 3rem auto 1rem;
  max-width: var(--art-content-width);
}

.art-outro p {
  font-family: var(--art-font-display);
  font-weight: 400;
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--art-ink);
  margin: 0;
  letter-spacing: -0.005em;
  max-width: none;
}


/* ============================================================================
   18. RESPONSIVE FINAL : ajustements mobile
   ============================================================================ */

@media (max-width: 640px) {
  .art-article {
    font-size: 1rem;
  }

  .art-hero--b__title,
  .art-hero--d__title,
  .art-hero--e__title {
    font-size: 2rem;
    line-height: 1.08;
  }

  .art-hero--b__subtitle,
  .art-hero--d__subtitle,
  .art-hero--e__subtitle {
    font-size: 1.05rem;
  }

  .art-hero--b__byline,
  .art-hero--d__byline,
  .art-hero--e__byline {
    font-size: 0.75rem;
    gap: 0.75rem;
  }

  .art-quick-answer__summary {
    font-size: 1.05rem;
  }

  .art-pullquote p {
    font-size: 1.2rem;
  }

  .art-callout,
  .art-faq__question,
  .art-faq__answer {
    font-size: 0.95rem;
  }

  .art-steps__item {
    padding: 0.9rem 1rem 0.9rem 3rem;
  }

  .art-steps__item::before {
    left: 1rem;
  }

  .art-table {
    font-size: 0.88rem;
  }

  .art-table th,
  .art-table td {
    padding: 0.7rem 0.8rem;
  }
}

/* Print */
@media print {
  .art-article {
    max-width: none;
    padding: 0;
  }
  .art-faq__item,
  .art-callout,
  .art-pullquote,
  .art-hero--b,
  .art-hero--d,
  .art-hero--e,
  .art-figure--full {
    break-inside: avoid;
  }
  .art-faq__item {
    border: 1px solid #ccc;
  }
}

/* ============================================================================
   FIX WIDTH V4 — override du thème WordPress (GeneratePress separate containers)

   Les thèmes WP contraignent .entry-content / .inside-article / .content-area
   à leur container central (720-800px). Sans override, .art-article ne peut
   pas atteindre sa largeur cible de 1100px (imposée par --art-wide-width en
   .art-article elle-même à 1000px mais écrasée par le parent).

   Cette règle cible toutes les pages single-post et libère les conteneurs
   parents, puis impose la largeur du .art-article. Le mu-plugin ne chargeant
   le CSS que sur is_single(), l'impact reste contenu aux articles.
   ============================================================================ */

body.single-post .content-area,
body.single-post .inside-article,
body.single-post .entry-content {
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.art-article {
  max-width: 1100px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
}