/**
 * editor.css — Couche CONTENU partagée du template policarpa (tpl ≥ 1.0.32)
 *
 * UN SEUL fichier, DEUX contextes de chargement (zéro duplication à maintenir) :
 *  1. LE SITE : chargé par index.php AVANT user.css (asset
 *     « template.pol.contenu », dépendance de « template.user ») —
 *     la cascade est : Cassiopeia → editor.css (contenu) → user.css (layout).
 *  2. L'ÉDITEUR JCE : AUTO-DÉTECTÉ par convention — avec « CSS du
 *     template : Oui » (défaut), JCE cherche un fichier NOMMÉ editor.css
 *     dans le dossier css/ du template site actif (com_jce editor.php,
 *     hasEditorStylesheet) et le charge SEUL dans l'iframe → l'écrivain
 *     voit ses encres, alignements et rythmes EXACTEMENT comme sur le
 *     site (WYSIWYG). ⚠️ NE JAMAIS RENOMMER ce fichier : la détection
 *     est muette — renommé, l'éditeur retombe sur le skin nu sans erreur.
 *     Édition prévue sur DESKTOP uniquement (contrainte transmise au client
 *     par Yann, 04 Août 2026).
 *
 * Contient UNIQUEMENT ce qui décrit du contenu éditorial : fontes (§1),
 * tokens de charte (§2), base typographique (§3), rythme des pages de
 * lecture (§3 bis, à TRIPLES SÉLECTEURS site/éditeur), boutons pilule (§6a),
 * séparateur et labels (§7), styles « presse-entrée » (§12), fonds (§13),
 * plus une section éditeur-seul (§É) en fin de fichier. La numérotation
 * historique de user.css est conservée pour les renvois de la doc.
 *
 * RÈGLE DES SÉLECTEURS FRÈRES (§3 bis) : le contexte site
 * (.com-content-article__body) et le contexte éditeur (body.mceContentBody — classe réelle de l'iframe JCE, héritée de TinyMCE 3 —
 * doublée de body.mce-content-body, la classe des TinyMCE modernes) sont des sélecteurs FRÈRES séparés par
 * une virgule — JAMAIS fusionnés dans un :is(), qui alignerait la
 * spécificité des deux côtés sur le plus fort et fausserait la cascade que
 * user.css calcule contre les règles site (0,1,1).
 *
 * Le layout du site (header, menu, bannières, grilles, fiches, footer,
 * formulaires, zoom) reste dans user.css : il n'a pas de sens dans l'iframe.
 */

/* ============================================================
   1. @font-face — fontes locales (woff2 uniquement, subset latin)
   Chemins relatifs depuis css/ → ../fonts/ =
   media/templates/site/cassiopeia_policarpa/fonts/
   ============================================================ */

@font-face {
  font-family: 'Lora';
  src: url('../fonts/lora-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lora';
  src: url('../fonts/lora-400italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Lora';
  src: url('../fonts/lora-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lora';
  src: url('../fonts/lora-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Hind';
  src: url('../fonts/hind-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Hind';
  src: url('../fonts/hind-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Hind';
  src: url('../fonts/hind-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Heebo';
  src: url('../fonts/heebo-300.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}


/* ============================================================
   2. Design tokens --pol-* (valeurs de base = MOBILE, mobile-first)
   ============================================================ */

:root {
  /* --- Palette (kit Elementor de production, vérifiée) --- */
  --pol-accent: #F13B3A;  /* rouge SIGNATURE : filets, séparateurs, puces, fonds décoratifs, outlines — le rouge PORTEUR DE TEXTE vit sur --pol-accent-fonce (AA, audit phase 8) */
  --pol-texte:  #1E1E1E;  /* texte principal et titres                    */
  --pol-creme:  #FAF9F5;  /* fond crème (sections alternées)              */
  --pol-beige:  #EEDFCC;  /* pill menu actif, cercles sociaux             */
  --pol-sombre: #282828;  /* footer, hover des boutons                    */
  --pol-gris:   #54595F;  /* texte secondaire, texte saisi                */
  --pol-champ:  #F8F8F8;  /* fond + bordures des champs de formulaire     */
  --pol-vert:   #1E7A34;  /* vert réserve — famille des VERTS des Word client ; vivifié le
                             03 Août 2026 (retour Yann : l'ancien #064530 se lisait comme
                             du noir pour un œil senior) — vert feuille franc, AA ≈ 5.4:1 */
  --pol-blanc:  #FFFFFF;

  /*
   * Encres additionnelles — harmonisation des couleurs de texte des Word
   * du client (relevé exhaustif du 31 Juillet 2026 sur la version finale :
   * rouges C00000/FF0000/EE0000/BC0000…, ocre-brun 984806, bleus
   * 020294/2808CA, verts 0B6F17/538C46/17730B…, gris 757575).
   * Décision : UNE famille client = UNE encre de la charte, appliquée via
   * les classes .pol-rouge/.pol-ocre/.pol-bleu/.pol-vert/.pol-gris (§12).
   * Les rouges vont sur --pol-accent, les verts sur --pol-vert, le gris
   * sur --pol-gris ; les deux encres ci-dessous complètent la palette.
   */
  --pol-accent-2: #9C5B18; /* ocre reliure (famille des ocres/bruns — beige foncé lisible, AA sur blanc) */
  --pol-accent-fonce: #D32F2E; /* rouge charte assombri d'un cran — porte TOUT l'interactif textuel
                                  depuis l'audit phase 8 (validé Yann 06 Août 2026) : boutons, labels,
                                  prix, liens ; #F13B3A plafonne à 3.67:1 sur crème (sous AA),
                                  celui-ci tient 4.73:1 sur crème et 4.98:1 sur blanc */
  --pol-encre-rouge: #C00000; /* encre ROUGE du CONTENU client (audit phase 8, 06 Août 2026) :
                                 rouge profond = la famille DOMINANTE des Word du client
                                 (C00000/BC0000, « rouge foncé » Word) — plus fidèle que le rouge
                                 charte ET nettement AA (6.48:1 sur blanc, 6.15:1 sur crème) ;
                                 distinct du rouge du template (demande Yann) */
  --pol-bleu:     #2D50C8; /* encre bleue (famille des bleus Word 020294/2808CA) ; vivifié le
                              03 Août 2026 (même retour) — outremer franc proche de l'intention
                              du client, AA ≈ 6.8:1, nettement distinct du noir et du vert */

  /*
   * Emplacements toujours réservés (CDC §4.1, « architecture ouverte ») :
   * --pol-fond-2:        ;   [fond de section supplémentaire]
   * --pol-decor:         ;   [couleur décorative ponctuelle]
   */

  /* --- Typographies --- */
  --pol-police-titres: 'Lora', Georgia, 'Times New Roman', serif;
  --pol-police-corps:  'Hind', 'Segoe UI', Arial, sans-serif;
  --pol-police-micro:  'Heebo', 'Segoe UI', Arial, sans-serif;

  /*
   * Échelle typographique — valeurs MOBILE (≤767px de la charte).
   * Sources : kit Elementor (échelle 72/48/36/26/18/14 desktop et ses
   * déclinaisons 1024/767). Le 72px du kit est réservé au héros d'accueil
   * (.pol-hero-titre) ; le h1 des pages est calé à 48px desktop → 38px
   * mobile (décision projet, rapport 02).
   */
  --pol-fs-hero:   38px;  /* héros accueil (72px desktop)                 */
  --pol-fs-h1:     38px;
  --pol-fs-h2:     24px;
  --pol-fs-h3:     20px;
  --pol-fs-h4:     18px;
  --pol-fs-h5:     16px;  /* titres de cartes/widgets — Lora 600          */
  --pol-fs-h6:     12px;  /* style label (Hind 500 uppercase, cf. kit h6) */
  --pol-fs-corps:  14px;
  --pol-fs-petit:  12px;
  --pol-fs-micro:  11px;  /* Heebo 300                                    */
  --pol-fs-nav:    12px;  /* navigation, uppercase + letter-spacing       */
  --pol-fs-bouton: 14px;
  --pol-fs-label:  14px;  /* labels de formulaire (kit 520c191 : 15/15/14,
                             distinct du corps qui monte à 16px desktop)  */

  --pol-lh-titres: 1.1;
  --pol-lh-corps:  1.5;
  --pol-lh-petit:  1.6;
  --pol-ls-nav:    2px;   /* letter-spacing nav/labels (kit 84ca66e)      */

  /* --- Layout et composants --- */
  --pol-conteneur:    1280px; /* conteneur max de la charte               */
  --pol-radius-pill:  30px;   /* boutons pilule, champs, pill menu        */
  --pol-radius-carte: 10px;   /* cartes livres — à valider visuellement   */
  --pol-ombre-carte:  0 4px 20px rgba(30, 30, 30, 0.07);
  /* Filet de TOUTES les images de contenu (couvertures, photos d'article,
     bloc événement, vignettes de galerie, iframe JCE). 0.5 d'encre = #8E8E8E,
     3,3:1 sur blanc / 3,2:1 sur crème — seuil non-texte WCAG 1.4.11. Choix
     Yann du 15 Septembre 2026 (retour de l'écrivain : à 0.14 le filet était
     invisible, 1,33:1). Voir le bloc « Filet des images de contenu ». */
  --pol-bordure-image: 1px solid rgba(30, 30, 30, 0.5);
  /* Passe-partout : marge crème entre l'image et son filet (Yann, 15
     Septembre 2026). Un filet seul n'est perçu comme un cadre que si
     l'image est plus claire que lui ; sur un bord de photo moyen ou sombre
     (Chou-Chou, Poésies-Photos 2026) il se fondait dans l'image. La marge
     détache le filet de la photo quelle que soit sa tonalité — usage de
     l'imprimerie. Crème Vélin du template, pas blanc (cohérence). 3px :
     posé à 4 puis abaissé par Yann (15 Sept.) — 1px se lirait comme un halo,
     3px reste une marge perceptible. Coins CONCENTRIQUES : rayon de la
     photo = rayon du cadre − 1px de filet − cette marge (le navigateur le
     calcule seul sur une img à padding ; gallery.css le pose à la main). */
  --pol-passe-partout: 3px;
  /* Rayon MINIMUM de la photo elle-même (Yann, 15 Septembre 2026) : la
     règle des coins concentriques donne rayon photo = cadre − 1px − marge ;
     si un cadre est trop peu arrondi, la photo retombe à angles droits sous
     un cadre courbe. Plancher : chaque cadre vaut au moins
     rayon-min + 1px + marge (max() dans les règles concernées). */
  --pol-rayon-photo-min: 3px;
  --pol-separateur-l: 120px;  /* séparateur signature 120×2px             */
  --pol-social-taille: 36px;  /* cercles sociaux : 30px sur la maquette,
                                 élargi à 36px (cible tactile, client 78 ans) */

  /* Mesure de lecture : largeur maximale de la colonne de texte des pages
     d'articles. 41rem = 656px ≈ 75ch du corps Hind 16px (plafond de la
     fourchette lisible 65-75ch, adapté au lectorat senior). En rem et pas
     en ch : ch varie avec la police de CHAQUE élément (75ch d'un h2 Lora
     36px ≈ 1690px — aucun plafond), rem reste stable et suit le zoom. */
  --pol-mesure: 41rem;

  /* Calage optique vertical du texte dans les contrôles pilule : les
     métriques de Hind (ascender 17px vs descender 9px à 16px, mesurés au
     canvas) placent l'encre ~1.3px AU-DESSUS du centre de la ligne — le
     texte paraît haut dans les boutons. On rend l'excédent au padding haut
     et on le retire au bas (≈0.09em, constant à toutes les tailles). */
  --pol-cale-texte: 0.09em;

  /*
   * --- Pont vers les variables Cassiopeia (vérifiées dans template.css
   * et templates/cassiopeia/index.php) ---
   * PRÉREQUIS : laisser « Schéma de police : Aucun » dans les options du
   * style de template, sinon index.php injecte un style inline :root qui
   * redéfinirait --cassiopeia-font-family-* après ce fichier.
   */
  --cassiopeia-font-family-body: var(--pol-police-corps);
  --cassiopeia-font-family-headings: var(--pol-police-titres);
  --cassiopeia-font-weight-normal: 400;
  --cassiopeia-font-weight-headings: 500;

  /* Le rouge devient la couleur « primaire » du template (boutons core,
     lien retour haut de page) ; le hover reprend le sombre du kit. */
  --cassiopeia-color-primary: var(--pol-accent-fonce);
  --cassiopeia-color-hover: var(--pol-sombre);
  --cassiopeia-color-link: var(--pol-accent-fonce);
  --cassiopeia-color-brand: var(--pol-texte);

  /* Liens : texte sombre, hover rouge (comportement du kit de prod). */
  --link-color: var(--pol-texte);
  --link-color-rgb: 30, 30, 30;
  --link-hover-color: var(--pol-accent-fonce);
  --link-hover-color-rgb: 211, 47, 46;
}

/* Tablette (768–1024 charte ; frontière commune avec BS5 « md ») */
@media (min-width: 768px) {
  :root {
    --pol-fs-hero:   48px;
    --pol-fs-h1:     42px; /* interpolation : la charte ne fournit que les
                              bornes 48 desktop / 38 mobile pour ce h1     */
    --pol-fs-h2:     28px;
    --pol-fs-h3:     22px;
    --pol-fs-h4:     20px;
    --pol-fs-h5:     17px;
    --pol-fs-h6:     13px;
    --pol-fs-corps:  15px;
    --pol-fs-petit:  13px;
    --pol-fs-micro:  12px;
    --pol-fs-nav:    13px;
    --pol-fs-bouton: 15px;
    --pol-fs-label:  15px; /* le kit plafonne le label à 15px, y compris desktop */
  }
}

/* Desktop (≥1025 charte) */
@media (min-width: 1025px) {
  :root {
    --pol-fs-hero:   72px;
    --pol-fs-h1:     48px;
    --pol-fs-h2:     36px;
    --pol-fs-h3:     26px;
    --pol-fs-h4:     22px;
    --pol-fs-h5:     18px;
    --pol-fs-h6:     14px;
    --pol-fs-corps:  16px;
    --pol-fs-petit:  14px;
    --pol-fs-micro:  13px;
    --pol-fs-nav:    14px;
    --pol-fs-bouton: 16px;
  }
}


/* ============================================================
   3. Base : corps de texte, titres, liens
   ============================================================ */

body {
  color: var(--pol-texte);
  font-family: var(--pol-police-corps);
  font-size: var(--pol-fs-corps);
  font-weight: 400;
  line-height: var(--pol-lh-corps);
  background-color: var(--pol-blanc);
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 {
  color: var(--pol-texte);
  font-family: var(--pol-police-titres);
  font-weight: 500;
  line-height: var(--pol-lh-titres);
}

/* balance : un h1 sur 2 lignes se coupe en lignes équilibrées (sinon
   « mes rêves ! » orphelin sur l'accueil à 1440 — propriété ignorée par
   les navigateurs qui ne la connaissent pas, aucun repli nécessaire) */
h1, .h1 { font-size: var(--pol-fs-h1); text-wrap: balance; }
h2, .h2 { font-size: var(--pol-fs-h2); }
h3, .h3 { font-size: var(--pol-fs-h3); }
h4, .h4 { font-size: var(--pol-fs-h4); }

/* h5 = titres de cartes/widgets : seul niveau en graisse 600 (kit) */
h5, .h5 {
  font-size: var(--pol-fs-h5);
  font-weight: 600;
  line-height: 1.2;
}

/* h6 = label rouge uppercase : le kit de prod traite h6 comme un label
   de section (« L'AUTEUR », « ACTUALITÉS »…), pas comme un titre serif. */
h6, .h6 {
  color: var(--pol-accent-fonce);
  font-family: var(--pol-police-corps);
  font-size: var(--pol-fs-h6);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--pol-ls-nav);
  line-height: 1.2;
}

/* Titre héros de la page d'accueil (72px desktop, letter-spacing -2px du kit) */
.pol-hero-titre {
  font-size: var(--pol-fs-hero);
  line-height: 1;
  letter-spacing: -2px;
}

small, .small, .pol-petit {
  font-size: var(--pol-fs-petit);
  line-height: var(--pol-lh-petit);
}

/* Micro-textes (crédits, mentions) — Heebo 300 du kit */
.pol-micro {
  font-family: var(--pol-police-micro);
  font-size: var(--pol-fs-micro);
  font-weight: 300;
}


/* ============================================================
   3 bis. Pages de lecture (articles) — « La Belle Édition »
   Colonne de lecture CENTRÉE à la mesure lisible (--pol-mesure,
   75ch ≈ 650px) comme une page de livre, rythme vertical d'éditeur
   (plus d'air au-dessus d'un titre qu'en dessous), puces au rouge
   du filet d'imprimeur. Les composants riches insérés dans les
   articles (galeries, grilles de livres, blocs événement — des
   <div>) ne sont PAS cappés : seuls les éléments de texte le sont.
   DOUBLE CONTEXTE : chaque règle porte le sélecteur du site ET
   celui de l'iframe JCE en frères (voir l'entête du fichier).
   Les règles de neutralisation JCE [data-wf-figure] restent dans
   user.css : côté éditeur, le CSS de JCE Pro fait partie de
   l'outillage d'édition et ne doit pas être combattu.
   ============================================================ */

/* Colonne centrée : en-tête de page + éléments de texte du corps.
   margin-inline seul (jamais de shorthand margin ici) : les marges
   verticales restent pilotées par les règles de rythme ci-dessous. */
.item-page > .page-header,
.com-content-article__body > :is(p, h2, h3, h4, h5, h6, ul, ol,
    blockquote, figure, .pol-citation, .pol-encadre, .pol-legende,
    .pol-credit, .pol-intertitre, .pol-evenement),
body.mceContentBody > :is(p, h2, h3, h4, h5, h6, ul, ol,
    blockquote, figure, .pol-citation, .pol-encadre, .pol-legende,
    .pol-credit, .pol-intertitre, .pol-evenement),
body.mce-content-body > :is(p, h2, h3, h4, h5, h6, ul, ol,
    blockquote, figure, .pol-citation, .pol-encadre, .pol-legende,
    .pol-credit, .pol-intertitre, .pol-evenement) {
  max-width: var(--pol-mesure);
  margin-inline: auto;
}

/* Rythme de lecture : interligne élargi (lectorat senior) et marges
   verticales d'éditeur — l'espace AVANT un titre domine l'espace après. */
.com-content-article__body,
body.mceContentBody,
body.mce-content-body {
  line-height: 1.65;
  padding-bottom: 1.5rem;
}
.com-content-article__body p,
body.mceContentBody p,
body.mce-content-body p {
  margin-block: 0 1.1em;
}
.com-content-article__body :is(h2, .pol-intertitre),
body.mceContentBody :is(h2, .pol-intertitre),
body.mce-content-body :is(h2, .pol-intertitre) {
  margin-block: 2.6rem 0.9rem;
}
.com-content-article__body h3,
body.mceContentBody h3,
body.mce-content-body h3 {
  margin-block: 2rem 0.7rem;
}
.com-content-article__body h4,
body.mceContentBody h4,
body.mce-content-body h4 {
  margin-block: 1.6rem 0.6rem;
}

/* Le premier titre du corps suit immédiatement le titre de page :
   pas besoin du grand retrait de section. */
.com-content-article__body > :is(h2, h3):first-child,
body.mceContentBody > :is(h2, h3):first-child,
body.mce-content-body > :is(h2, h3):first-child {
  margin-block-start: 0.25rem;
}
.com-content-article__body :is(ul, ol),
body.mceContentBody :is(ul, ol),
body.mce-content-body :is(ul, ol) {
  margin-block: 0 1.3em;
  padding-inline-start: 1.4em;
}
.com-content-article__body li,
body.mceContentBody li,
body.mce-content-body li {
  margin-block: 0 0.5em;
}
.com-content-article__body li::marker,
body.mceContentBody li::marker,
body.mce-content-body li::marker {
  color: var(--pol-accent); /* puce = filet d'imprimeur */
}

/* Puce assortie à l'encre du texte (règle Yann, 04 Août 2026 : une liste
   bleue ne doit pas avoir de puces rouges — Info à la une, Me rencontrer ;
   les listes en encre par défaut gardent la puce rouge de la charte).
   Deux formes couvertes : la classe posée par le dropdown Styles de JCE
   (span DANS le li — la forme de référence des gabarits) via :has(),
   et la classe directement sur le li (repli robuste sans :has). */
.com-content-article__body li.pol-bleu::marker,
.com-content-article__body li:has(> .pol-bleu:first-child)::marker,
body.mceContentBody li.pol-bleu::marker,
body.mceContentBody li:has(> .pol-bleu:first-child)::marker,
body.mce-content-body li.pol-bleu::marker,
body.mce-content-body li:has(> .pol-bleu:first-child)::marker {
  color: var(--pol-bleu);
}

.com-content-article__body li.pol-vert::marker,
.com-content-article__body li:has(> .pol-vert:first-child)::marker,
body.mceContentBody li.pol-vert::marker,
body.mceContentBody li:has(> .pol-vert:first-child)::marker,
body.mce-content-body li.pol-vert::marker,
body.mce-content-body li:has(> .pol-vert:first-child)::marker {
  color: var(--pol-vert);
}

.com-content-article__body li.pol-ocre::marker,
.com-content-article__body li:has(> .pol-ocre:first-child)::marker,
body.mceContentBody li.pol-ocre::marker,
body.mceContentBody li:has(> .pol-ocre:first-child)::marker,
body.mce-content-body li.pol-ocre::marker,
body.mce-content-body li:has(> .pol-ocre:first-child)::marker {
  color: var(--pol-accent-2);
}

.com-content-article__body li.pol-gris::marker,
.com-content-article__body li:has(> .pol-gris:first-child)::marker,
body.mceContentBody li.pol-gris::marker,
body.mceContentBody li:has(> .pol-gris:first-child)::marker,
body.mce-content-body li.pol-gris::marker,
body.mce-content-body li:has(> .pol-gris:first-child)::marker {
  color: var(--pol-gris);
}

/* Figures d'article : image pleine colonne aux coins de carte, légende
   .pol-legende dessous (§12). margin-inline auto vient du cap commun. */
.com-content-article__body figure,
body.mceContentBody figure,
body.mce-content-body figure {
  margin-block: 1.8rem 2.2rem;
}
.com-content-article__body figure img,
body.mceContentBody figure img,
body.mce-content-body figure img {
  display: block;
  width: 100%;
  height: auto;
  /* max() : plancher du rayon de la photo (voir --pol-rayon-photo-min) */
  border-radius: max(var(--pol-radius-carte), calc(var(--pol-rayon-photo-min) + 1px + var(--pol-passe-partout)));
  box-shadow: var(--pol-ombre-carte);
}

/* Filet des images de contenu (review de l'écrivain du 10 Septembre 2026 :
   « on ne voit pas les bordures ») : une photo claire se fondait dans le
   fond, l'ombre seule ne dessine pas un bord. UN token pour toutes les
   images intégrées à une page — photos d'article, images nues que user.js
   normalise en figure (le bouton de zoom s'intercale entre figure et img,
   d'où le sélecteur descendant), image du bloc événement, couvertures
   (user.css) et vignettes de galerie (gallery.css, filet propre : exclues
   ici pour ne pas le doubler) — et pour l'iframe JCE, afin que l'écrivain
   voie la même chose en éditant sans rien poser. Coins et ombre restent
   ceux de chaque contexte. */
.com-content-article__body figure:not(.pol-gallery__item) img,
.com-content-article__body p > img,
body.mceContentBody img,
body.mce-content-body img {
  padding: var(--pol-passe-partout); /* marge crème image → filet (voir le token) */
  background-color: var(--pol-creme);
  border: var(--pol-bordure-image);
}
.com-content-article__body figure figcaption,
body.mceContentBody figure figcaption,
body.mce-content-body figure figcaption {
  margin-bottom: 0; /* la marge basse de la figure fait le travail */
}

/* Image verticale (ex. portrait en pied) : bornée plus étroit que la
   mesure pour ne pas écraser la page de sa hauteur. */
.com-content-article__body figure.pol-figure-portrait,
body.mceContentBody figure.pol-figure-portrait,
body.mce-content-body figure.pol-figure-portrait {
  max-width: min(26rem, 100%);
}

/* ============================================================
   6. Boutons pilule
   Primaire : fond rouge, texte blanc — hover fond sombre (kit de prod).
   Secondaire : fond blanc, texte rouge, bordure rouge 2px.
   ============================================================ */

.pol-btn {
  display: inline-block;
  /* Verticales asymétriques : calage optique Hind (voir --pol-cale-texte) */
  padding: calc(0.75em + var(--pol-cale-texte)) 2.2em
    calc(0.75em - var(--pol-cale-texte));
  font-family: var(--pol-police-corps);
  font-size: var(--pol-fs-bouton);
  font-weight: 600;
  line-height: 1.5;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  color: var(--pol-blanc);
  background-color: var(--pol-accent-fonce);
  border: 2px solid var(--pol-accent-fonce);
  border-radius: var(--pol-radius-pill);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.pol-btn:hover,
.pol-btn:focus-visible {
  color: var(--pol-blanc);
  background-color: var(--pol-sombre);
  border-color: var(--pol-sombre);
  text-decoration: none;
}

.pol-btn--secondaire {
  color: var(--pol-accent-fonce);
  background-color: var(--pol-blanc);
}

.pol-btn--secondaire:hover,
.pol-btn--secondaire:focus-visible {
  color: var(--pol-blanc);
  background-color: var(--pol-accent-fonce);
  border-color: var(--pol-accent-fonce);
}

/* ============================================================
   7. Séparateur signature et labels
   ============================================================ */

/* Utilisable sur <hr class="pol-separateur"> ou un <div> vide */
.pol-separateur {
  display: block;
  width: var(--pol-separateur-l);
  height: 2px;
  margin: 1.5rem 0;
  background-color: var(--pol-accent);
  border: 0;
  opacity: 1; /* neutralise l'opacité par défaut des <hr> Bootstrap */
}

.pol-separateur--centre {
  margin-left: auto;
  margin-right: auto;
}

/* Label rouge uppercase au-dessus des titres (« L'AUTEUR », « ACTUALITÉS ») */
.pol-label {
  display: block;
  margin-bottom: 0.75em;
  color: var(--pol-accent-fonce);
  font-family: var(--pol-police-corps);
  font-size: var(--pol-fs-h6);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--pol-ls-nav);
  line-height: 1.2;
}


/* ============================================================
   12. Styles « presse-entrée » pour JCE
   Classes appliquées par l'écrivain via la liste déroulante de styles
   du profil JCE (aucune saisie de classe manuelle). Préliminaires :
   ajustements attendus en phase contenu.
   ============================================================ */

/* Encres de couleur — reprise du stylage des Word du client (il colore
   pour accentuer le sens : exclamation, interpellation, voix). Une classe
   = une encre : en relecture avec l'écrivain, on change une couleur en
   changeant UN mot de classe (doc : dev/gabarits/STYLES_TEXTE.md).
   Mapping des Word : rouges → pol-rouge · ocres/bruns → pol-ocre ·
   bleus → pol-bleu · verts → pol-vert · gris → pol-gris.
   L'ITALIQUE n'est pas une classe : balise <em> (bouton I de JCE) —
   paroles rapportées, adresse au lecteur, titres d'œuvre. */
.pol-rouge { color: var(--pol-encre-rouge); }
.pol-ocre  { color: var(--pol-accent-2); }
.pol-bleu  { color: var(--pol-bleu); }
.pol-vert  { color: var(--pol-vert); }
.pol-gris  { color: var(--pol-gris); }

/* Encre de SECOURS pour l'écrivain (demande Yann, 04 Août 2026) : force
   le noir du site par-dessus tout héritage — quand un texte reste coloré
   par son paragraphe parent (ex. le point final bleu du titre « Hisséo »),
   « Noir » le ramène à la normale sans avoir à comprendre l'héritage. */
.pol-noir  { color: var(--pol-texte); }

/* Alignements du texte client (Word w:jc) — valables à toutes les
   largeurs : l'alignement fait partie du sens (ex. présentation de
   Chou-Chou à droite), il ne « rattrape » jamais à gauche en mobile. */
.pol-droite { text-align: right; }
.pol-centre { text-align: center; }

/* Bloc insécable : le contenu du span ne se coupe jamais en fin de ligne
   (premier usage : « (1981-1983). » sur L'auteur, qui se coupait sur le
   tiret à 600 et de 1100 à 1600px). Préféré au trait d'union insécable
   U+2011 : Chrome substitue le glyphe de Hind s'il manque, Safari non
   garanti (choix Yann, 24 Septembre 2026). */
.pol-insecable { white-space: nowrap; }

/* Espace de section au-dessus d'un paragraphe : même retrait que devant un
   h2 (2.6rem, §3 bis) pour détacher une ligne d'introduction de ce qui
   précède SANS titre ni filet. Sélecteurs frères site/éditeur à (0,2,x) :
   ils doivent battre « .com-content-article__body p » (0,1,1) qui pose le
   margin-block des paragraphes. Premier usage : « Les 11 photos du
   recueil… » sur la fiche Cressier-Posat (demande de l'écrivain, 24
   Septembre 2026 : plus d'espace et centré ; option retenue par Yann). */
.com-content-article__body .pol-espace-haut,
body.mceContentBody .pol-espace-haut,
body.mce-content-body .pol-espace-haut {
  margin-block-start: 2.6rem;
}

/* Ligne d'action (paragraphe centré ne contenant QUE des boutons) :
   gouttière contrôlée — en simple <p>, les pilules empilées se touchaient
   bord à bord à 375px et l'écart horizontal tombait à 3px vers 500px
   (mesures revue du 05 Août 2026, accueil). Vaut pour toute ligne de
   boutons centrée (accueil, Poésies-Photos — 1 bouton : rendu inchangé). */
p.pol-centre:has(> .pol-btn:first-child) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem 1rem;
}

/* Poème du client (fiches livres et pages Poésies-Photos) : chaque bloc
   de couleur est un paragraphe séparé (aération demandée). Le modificateur
   --gradue (poèmes d'Escapade) applique la hiérarchie de tailles de ces
   Word-là (titre 20 / corps bleu 12 / pivots et finale 14 → ≈ 1.17× le
   corps) ; les Word des calendriers sont à taille unique, donc pas de
   gradation par défaut. */
.pol-poeme--gradue p.pol-vert,
.pol-poeme--gradue p.pol-rouge {
  font-size: 1.17em;
}

/* Signature d'auteur sous un poème (« Texte et photo : © … ») : plus
   discrète que le corps, comme dans les Word des calendriers (24 vs 28-36
   demi-points). */
.pol-poeme .pol-signature {
  font-size: 0.85em;
}

/* Titre de poème : rapport du Word (20/12 ≈ 1.67× le corps), plus intime
   que les h2 éditoriaux du site — spécificité 0,2,1 pour passer devant
   le rythme d'article. */
.pol-poeme h2.pol-rouge {
  font-size: 1.67em;
}

/* Un poème est un <div> : ses enfants échappent au cap de mesure posé sur
   les enfants DIRECTS de l'article (§3) — on réapplique la colonne de
   lecture ici, sinon photos et vers s'étalent sur toute la page. */
.pol-poeme > :is(p, h2, figure, ul, ol) {
  max-width: var(--pol-mesure);
  margin-inline: auto;
}

/* Deux niveaux de retrait des Word (dialogue de juillet 2025) :
   narration décalée, répliques en liste à tirets plus profonde
   (numPr + ind du Word — tiret suspendu comme le hanging indent). */
.pol-retrait {
  padding-inline-start: 1.5rem;
}

/* Bloc centré au contenu : l'ENSEMBLE se centre dans la page mais son
   texte reste aligné à gauche (novembre 2025 : « Au premier plan… » —
   le Word simule ce centrage par un retrait fixe sur une page A4). */
.pol-bloc-centre {
  width: fit-content;
  max-width: var(--pol-mesure);
  margin-inline: auto;
  text-align: start;
}

.pol-liste-tirets {
  list-style: none;
  margin-block: 0 1rem;
  padding-inline-start: 2.5rem;
}

.pol-liste-tirets li {
  padding-inline-start: 0.9em;
  text-indent: -0.9em;
}

.pol-liste-tirets li::before {
  content: '\2013\2002';
}

/* Vers en colonnes (mai 2025 : « Pas de chat ––– suspendu en l'air ») :
   le Word compose un pseudo-tableau — terme calé à droite, tirets tous
   alignés au centre, définition à gauche, colonnes ajustées au contenu,
   l'ensemble centré dans la page. Rendu de table sans table (demande
   Yann, 03 Août 2026). */
.pol-vers-tableau {
  display: grid;
  /* colonnes latérales ÉGALES : la colonne des tirets tombe exactement
     sur l'axe central de la colonne de lecture, au même niveau que le
     titre centré (retour Yann, 03 Août 2026) */
  grid-template-columns: 1fr auto 1fr;
  max-width: var(--pol-mesure);
  margin-block: 0 1rem;
  margin-inline: auto;
  column-gap: 0.6em;
}

.pol-vers-tableau__gauche { text-align: right; }
.pol-vers-tableau__tiret  { text-align: center; }
.pol-vers-tableau__droite { text-align: left; }

/* Citation mise en valeur — Lora italique, filet rouge à gauche */
.pol-citation {
  margin: 2rem 0;
  padding: 0.5rem 0 0.5rem 1.5rem;
  border-left: 2px solid var(--pol-accent);
  font-family: var(--pol-police-titres);
  font-style: italic;
  font-size: var(--pol-fs-h4);
  line-height: 1.4;
  color: var(--pol-texte);
}

/* La citation peut contenir plusieurs strophes (div > p) */
.pol-citation > :last-child {
  margin-bottom: 0;
}

/* Attribution accolée : un crédit qui suit IMMÉDIATEMENT une citation en
   est l'attribution (« Eduardo Galeano », signature d'une critique) — les
   2rem de base l'en détachaient plus que du bloc suivant (Gestalt cassée,
   revue du 05 Août 2026). Marges effondrées restantes : 0.25rem. */
.pol-citation:has(+ .pol-credit) {
  margin-bottom: 0.25rem;
}

/* Variante « épigraphe » — citation qui CLÔT L'INTRODUCTION de l'accueil
   (déplacée du bas de page vers le haut à la demande de l'écrivain, review
   du 10 Septembre 2026). Posée au centre comme une signature, sans la
   barre latérale (registre « extrait dans le fil ») et SANS filet rouge :
   le filet 120×2 du titre de page est à ~270px au-dessus dans la même
   colonne — un second filet s'y lisait comme un titre sans titre (retour
   Yann) — et la bande crème qui suit marque déjà le changement de bloc.
   Ce qui la distingue du corps est typographique (Lora italique centré,
   règle des trois voix). Mesure courte 32rem, usage des épigraphes
   imprimées et lignes équilibrées : surcharge LOCALE de --pol-mesure, lue
   par la règle de colonne ci-dessus (spécificité 0,2,0 — un max-width
   posé ici perdrait). Écart au-dessus = les 2rem de base de .pol-citation
   (≈ 1,8 × l'espace entre paragraphes) : elle change de voix mais reste
   groupée avec l'introduction ; les 48px de la bande crème restent le plus
   grand écart. */
.pol-citation--epigraphe {
  --pol-mesure: 32rem;
  padding: 0;
  border-left: none;
  text-align: center;
}

/* L'attribution suit le centrage de l'épigraphe, tiret d'attribution
   compris (présentation, pas contenu : le gabarit reste « Eduardo
   Galeano » nu). */
.pol-citation--epigraphe + .pol-credit {
  text-align: center;
}

.pol-citation--epigraphe + .pol-credit::before {
  content: "— ";
}

/* Légende sous une image — petit texte gris centré */
.pol-legende {
  display: block;
  margin: 0.5rem 0 1.5rem;
  text-align: center;
  color: var(--pol-gris);
  font-family: var(--pol-police-micro);
  font-size: var(--pol-fs-petit);
  font-weight: 300;
}

/* Légende tapée par l'écrivain dans JCE (filigrane « Saisissez une
   légende… » du plugin figure, 14 Octobre 2026, décision Yann) : JCE
   enregistre un <figcaption> SANS classe. Même rendu que .pol-legende,
   dans l'éditeur (le filigrane aussi) et sur le site — zéro classe à sa
   charge, comme pour les photos. Marge basse laissée à la figure (même
   choix que la règle « figure figcaption » du §3 bis). Spécificité 0,1,2 :
   les légendes des gabarits (.pol-legende) gardent exactement leur rendu. */
.com-content-article__body figure > figcaption,
body.mceContentBody figure > figcaption,
body.mce-content-body figure > figcaption {
  display: block;
  margin: 0.5rem 0 0;
  text-align: center;
  color: var(--pol-gris);
  font-family: var(--pol-police-micro);
  font-size: var(--pol-fs-petit);
  font-weight: 300;
}

/* Intertitre de section dans un article long */
.pol-intertitre {
  margin: 2.5rem 0 1rem;
  font-family: var(--pol-police-titres);
  font-size: var(--pol-fs-h3);
  font-weight: 500;
  line-height: var(--pol-lh-titres);
  color: var(--pol-texte);
}

/* Crédit photo / source — micro-texte discret aligné à droite */
.pol-credit {
  display: block;
  margin: 0.25rem 0 1rem;
  text-align: right;
  color: var(--pol-gris);
  font-family: var(--pol-police-micro);
  font-size: var(--pol-fs-micro);
  font-weight: 300;
  font-style: italic;
}

/* Encadré d'information — fond crème, coins arrondis */
.pol-encadre {
  margin: 2rem 0;
  padding: 1.5rem 1.75rem;
  background-color: var(--pol-creme);
  border: 1px solid var(--pol-beige);
  border-radius: var(--pol-radius-carte);
}

.pol-encadre > :last-child {
  margin-bottom: 0;
}

/*
 * Bloc événement « Me rencontrer en chair et en os » :
 * 2 colonnes image/texte en tablette+ → 1 colonne en mobile.
 * Inséré par le modèle JCE « Bloc événement » (profil Claude) ; l'écrivain
 * ne manipule jamais ces classes lui-même. La largeur vient de la liste
 * blanche §3 (colonne de lecture) : un div qui n'y figure pas s'étale sur
 * toute la largeur de l'article (constaté par Yann le 06 Août 2026).
 */
.pol-evenement {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin: 2rem 0;
  padding: 1.5rem;
  background-color: var(--pol-blanc);
  border: 1px solid rgba(30, 30, 30, 0.06);
  border-radius: var(--pol-radius-carte);
  box-shadow: var(--pol-ombre-carte);
}

@media (min-width: 768px) {
  .pol-evenement {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    align-items: start;
    padding: 2rem;
  }
}

.pol-evenement__image img {
  display: block;
  width: 100%;
  height: auto;
  padding: var(--pol-passe-partout);
  background-color: var(--pol-creme);
  border: var(--pol-bordure-image); /* même filet et passe-partout que toutes les images */
  border-radius: max(6px, calc(var(--pol-rayon-photo-min) + 1px + var(--pol-passe-partout)));
}

.pol-evenement__texte > :first-child {
  margin-top: 0;
}

.pol-evenement__texte > :last-child {
  margin-bottom: 0;
}

/* ============================================================
   13. Sections utilitaires (fonds de la charte)
   ============================================================ */

.pol-fond-creme { background-color: var(--pol-creme); }
.pol-fond-beige { background-color: var(--pol-beige); }
.pol-fond-sombre {
  background-color: var(--pol-sombre);
  color: var(--pol-blanc);
}

/* ============================================================
   É. Éditeur JCE uniquement (body.mceContentBody / .mce-content-body)
   L'iframe n'a ni wrapper d'article ni grille de page : on donne
   au body la colonne de lecture du site — l'écrivain voit les
   longueurs de ligne réelles — et le fond blanc de la charte.
   (Le padding-bottom 1.5rem vient de la règle commune du §3 bis ;
   le shorthand ci-dessous le répète à l'identique.)
   ============================================================ */
html:has(body.mceContentBody),
html:has(body.mce-content-body) {
  /* le skin JCE cale la racine de l'iframe à ~13px → tous les rem (dont
     --pol-mesure) seraient réduits ; on rétablit le rem standard du site */
  font-size: 16px;
}

body.mceContentBody,
body.mce-content-body {
  min-width: 0; /* le skin JCE pose min-width:90% — il l'emporterait sur max-width */
  max-width: var(--pol-mesure);
  margin-inline: auto;
  padding: 1.25rem 1rem 1.5rem;
  background-color: var(--pol-blanc);

  /* Tokens typo ÉPINGLÉS AUX VALEURS DESKTOP (audit 04 Août 2026) : les
     media queries du §2 s'évaluent sur la largeur de l'IFRAME (~980px en
     admin → tailles tablette, et le plein écran JCE fait SAUTER h2 de
     28 à 36px en cours d'édition). L'édition étant desktop uniquement,
     on fige ici les valeurs du bloc ≥1025 — posées sur le body, elles
     l'emportent par héritage sur :root pour tout le contenu. */
  --pol-fs-hero:   72px;
  --pol-fs-h1:     48px;
  --pol-fs-h2:     36px;
  --pol-fs-h3:     26px;
  --pol-fs-h4:     22px;
  --pol-fs-h5:     18px;
  --pol-fs-h6:     14px;
  --pol-fs-corps:  16px;
  --pol-fs-petit:  14px;
  --pol-fs-micro:  13px;
  --pol-fs-nav:    14px;
  --pol-fs-bouton: 16px;
  --pol-fs-label:  15px; /* plafonné à 15px, y compris desktop (kit) */
}

/* Portrait en pied : le skin JCE pose `[contentEditable=false] {
   max-width: 99.8% }` en 0,3,0 sur les figures (contenteditable=false
   posé par le plugin figure de JCE Pro) — il battait notre cap 26rem du
   §3 bis (0,2,2) et l'écrivain voyait ses portraits « énormes ».
   Spécificité 0,3,2 pour reprendre la main. */
body.mceContentBody figure.pol-figure-portrait[contenteditable="false"],
body.mce-content-body figure.pol-figure-portrait[contenteditable="false"] {
  max-width: min(26rem, 99.8%);
}

/* Cap générique des images dans l'ÉDITEUR : l'iframe ne charge ni
   template.css ni user.js — une image nue fraîchement uploadée (1600px)
   s'affichait à sa taille naturelle, débordant largement la colonne
   (constaté par Yann le 06 Août 2026). Sur le SITE, le même img nu est
   normalisé en figure par user.js ; ici on borne simplement à la colonne,
   height:auto pour préserver le ratio malgré l'attribut height. */
body.mceContentBody img,
body.mce-content-body img {
  max-width: 100%;
  height: auto;
  /* L'iframe JCE ne charge pas le reboot Bootstrap du site (box-sizing:
     border-box sur tout) : en content-box, le passe-partout + le filet
     ajoutaient 8px au 100 % de la figure et Chrome compressait la marge
     droite à 1,33px dans la figure (display: table). Même boîte que le
     site (mesuré le 15 Septembre 2026, compte claude). */
  box-sizing: border-box;
}

/* Le content.css par défaut de JCE pose `.mceContentBody img:not([data-mce-selected])
   { padding-right: 1pt }` (0,2,1 : aide au placement du curseur après une
   image) — il battait notre `padding` (0,1,2) sur le seul côté droit : marge
   crème de 1,33px à droite contre 3px ailleurs (mesuré au pixel le
   15 Septembre 2026). Même sélecteur + body (0,2,2) pour reprendre la main ;
   la marge reste positive, l'intention de JCE est conservée. */
body.mceContentBody img:not([data-mce-selected]),
body.mce-content-body img:not([data-mce-selected]) {
  padding-right: var(--pol-passe-partout);
}