/**
 * 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);
  --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;
  border-radius: var(--pol-radius-carte);
  box-shadow: var(--pol-ombre-carte);
}
.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; }

/* 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 de CLÔTURE de page (accueil) : le bas
   de page est deux blocs de registres distincts (revue du 06 Août 2026) —
   l'action (question + boutons), puis la voix. L'épigraphe se pose au
   centre comme une signature, sans la barre latérale (registre « extrait
   dans le fil »), ouverte par le filet rouge d'imprimeur qui marque le
   changement de bloc ; son détachement (3.75rem) répond à celui de la
   bande crème au-dessus du bloc action. */
.pol-citation--epigraphe {
  margin-block-start: 3.75rem;
  padding: 0;
  border-left: none;
  text-align: center;
}

.pol-citation--epigraphe::before {
  content: "";
  display: block;
  width: 120px;
  height: 2px;
  margin: 0 auto 1.75rem;
  background-color: var(--pol-accent);
}

/* 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;
}

/* 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;
  border-radius: 6px;
}

.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;
}