/**
 * user.css — Habillage « policarpa » pour template enfant de Cassiopeia (Joomla 6)
 *
 * Emplacement final :
 *   media/templates/site/cassiopeia_policarpa/css/user.css
 * Chargé automatiquement par Cassiopeia via l'asset « template.user »
 * (templates/cassiopeia/joomla.asset.json, poids 500 → chargé APRÈS template.css),
 * résolu enfant d'abord puis parent (libraries/src/HTML/HTMLHelper.php,
 * includeRelativeFiles).
 *
 * ⚠️ DEPUIS tpl 1.0.32 : la couche CONTENU (fontes §1, tokens §2, base §3,
 * rythme d'article §3 bis, boutons pilule §6a, séparateur §7, presse-entrée
 * §12, fonds §13) vit dans css/editor.css, chargée AVANT ce fichier par
 * index.php (asset « template.pol.contenu ») ET seule dans l'iframe JCE
 * (WYSIWYG pour l'écrivain). Ce fichier ne garde que le LAYOUT du site.
 * Cascade : Cassiopeia → editor.css → user.css.
 *
 * Charte : dev/synthese/02-Charte-graphique-design.md (valeurs vérifiées dans le
 * kit Elementor de production, dev/synthese/annexes/post-15-kit-elementor.css).
 *
 * Fontes : Lora / Hind / Heebo, licence SIL Open Font License (OFL),
 * hébergées localement dans ../fonts/ (aucun appel à Google Fonts — nLPD).
 *
 * ARBITRAGE BREAKPOINTS (charte 1024/767 vs Bootstrap 5 de Cassiopeia) :
 * - La charte de production utilise 2 seuils max-width : 1024px (tablette)
 *   et 767px (mobile).
 * - Cassiopeia embarque Bootstrap 5 : 576 / 768 / 992 / 1200 / 1400
 *   (vérifié dans media/templates/site/cassiopeia/css/template.css, :root
 *   --breakpoint-*), et bascule son menu horizontal/vertical à 992px.
 * - Choix retenu (mobile-first) :
 *     base            = mobile   (≤ 767px charte)
 *     min-width 768px = tablette (aligné sur BS5 « md » ET sur le seuil 767
 *                       de la charte : même frontière)
 *     min-width 1025px = desktop (seuil 1024 de la charte ; volontairement
 *                       PAS 992 ni 1200 pour rester fidèle aux tailles typo
 *                       relevées en production)
 *     min-width 992px  = réservé aux surcharges du MENU, car Cassiopeia
 *                       passe le menu en horizontal à 992px : utiliser un
 *                       autre seuil créerait une zone 992–1024 incohérente.
 */

/* ============================================================
   1. @font-face — fontes locales
   → DÉPLACÉ dans css/editor.css (§1) — couche contenu
   partagée site + éditeur JCE (tpl 1.0.32). Chargée AVANT ce
   fichier par index.php : la cascade reste inchangée.
   ============================================================ */

/* ============================================================
   2. Design tokens --pol-*
   → DÉPLACÉ dans css/editor.css (§2) — couche contenu
   partagée site + éditeur JCE (tpl 1.0.32). Chargée AVANT ce
   fichier par index.php : la cascade reste inchangée.
   ============================================================ */

/* ============================================================
   3. Base : corps de texte, titres, liens
   → DÉPLACÉ dans css/editor.css (§3) — couche contenu
   partagée site + éditeur JCE (tpl 1.0.32). Chargée AVANT ce
   fichier par index.php : la cascade reste inchangée.
   ============================================================ */

/* ============================================================
   3 bis. Pages de lecture — PART SITE restante
   La colonne de lecture et le rythme d'article sont DÉPLACÉS dans
   css/editor.css (§3 bis, sélecteurs frères site/éditeur). Restent
   ici : l'en-tête de page (inexistant dans l'iframe JCE) et la
   neutralisation du CSS de contenu de JCE Pro (site UNIQUEMENT :
   dans l'éditeur, ce CSS fait partie de l'outillage d'édition).
   ============================================================ */

/* Fil d'Ariane — SOUS-PAGES uniquement (fiches livres + années
   Poésies-Photos ; décision Yann, 05 Août 2026). Composé comme le
   « titre courant » d'un livre : centré au-dessus du titre, micro-typo
   grise, séparateur ›, survol/focus rouge. Le module n'est assigné
   qu'aux 9 items de sous-pages et le libellé « Vous êtes ici » est
   désactivé (paramètre showHere) — pages de niveau 1 sans fil (le menu
   marque déjà la position ; l'orientation SEO est portée par le JSON-LD
   BreadcrumbList du core, indépendant de ce module). */
.mod-breadcrumbs__wrapper {
  margin-block: 0.75rem 0;
}

ol.mod-breadcrumbs {
  --breadcrumb-divider: "›";
  --breadcrumb-divider-color: var(--pol-gris);
  --breadcrumb-item-active-color: var(--pol-texte);
  --breadcrumb-margin-bottom: 0;
  justify-content: center;
  background: none;
  font-family: var(--pol-police-corps);
  font-size: var(--pol-fs-petit);
  color: var(--pol-gris);
}

/* L'épingle de localisation du layout core devant « Accueil » :
   vocabulaire d'application, pas de titre courant — masquée. */
ol.mod-breadcrumbs [class*="icon-location"] {
  display: none;
}

ol.mod-breadcrumbs .breadcrumb-item a {
  color: var(--pol-gris);
  text-decoration: none;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

ol.mod-breadcrumbs .breadcrumb-item a:hover,
ol.mod-breadcrumbs .breadcrumb-item a:focus-visible {
  color: var(--pol-accent-fonce);
  text-decoration: underline;
}

/* Titre de page : respiration + filet signature (120×2) dessous */
.item-page > .page-header {
  margin-block: 1.5rem 2.5rem;
}

.item-page > .page-header h1 {
  margin: 0;
}

.item-page > .page-header::after {
  content: "";
  display: block;
  width: var(--pol-separateur-l);
  height: 2px;
  margin-top: 1.1rem;
  background-color: var(--pol-accent);
}

/* JCE Pro marque chaque figure éditée d'un data-wf-figure et son
   content.min.css (plg_system_jcepro, chargé sur le site) leur applique
   display:table + margins inherit — dès qu'un article passait par
   l'éditeur, les figures perdaient leur centrage (constaté par Yann,
   03 Août 2026, page 2024). Le rendu ne doit JAMAIS dépendre d'un
   passage dans l'éditeur : on neutralise, spécificité 0,2,1 > 0,1,1.
   ⚠️ Depuis 1.0.32, cette règle vient APRÈS figure.pol-figure-portrait
   (partie dans editor.css) à spécificité ÉGALE : ne jamais lui ajouter
   une propriété que .pol-figure-portrait pose aussi (le départage a
   changé de camp), sous peine de divergence site/éditeur silencieuse. */
.com-content-article__body figure[data-wf-figure] {
  display: block;
  margin-block: 1.8rem 2.2rem;
  margin-inline: auto;
}

.com-content-article__body figure[data-wf-figure] figcaption {
  display: block;
}

/* ============================================================
   4. Conteneur 1280px
   Cassiopeia borne .grid-child à 1320px et dimensionne la zone centrale
   de .site-grid à 4 colonnes de 19.875rem (template.css). On ramène le
   tout à 1280px : 4 × 19.25rem (308px) + 3 gouttières de 1em = 1280px.
   ============================================================ */

.grid-child {
  max-width: var(--pol-conteneur);
}

.site-grid {
  grid-template-columns: [full-start] minmax(0, 1fr)
    [main-start] repeat(4, minmax(0, 19.25rem))
    [main-end] minmax(0, 1fr) [full-end];
}

/* ============================================================
   5. Header — fond blanc, marque texte, menu pill
   Cassiopeia peint le header en dégradé bleu ; la charte impose un
   header blanc avec titre texte sombre.
   ============================================================ */

/* Le header est collant : les ancres doivent s'arrêter sous lui. */
html {
  scroll-padding-top: 8.5rem;
}

/* Header COLLANT et compact (décisions Yann, 30 Juillet 2026) :
   la navigation reste visible au défilement (lectorat senior).
   Desktop ≥1200 (navbar-expand-xl, override du layout menu) : deux rangées CENTRÉES (marque 21px puis menu) ≈ 110px —
   l'empilement gauche d'origine culminait à 160px pour un seul niveau.
   Mobile/tablette <1200 : UNE rangée — marque à gauche, burger à droite. */
.container-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background-color: var(--pol-blanc);
  background-image: none;
  /* Filet + ombre « feuille posée » (la seule du système, réutilisée —
     décision Yann 30 Juillet 2026) : le header sticky flotte au-dessus du
     contenu, l'ombre dit ce volume. */
  box-shadow: 0 1px 0 rgba(30, 30, 30, 0.08), 0 4px 20px rgba(30, 30, 30, 0.07);
}

/* Raffinement (navigateurs récents) : plat en HAUT de page, l'ombre
   n'apparaît qu'au défilement — le volume ne se montre que quand le
   header flotte réellement au-dessus du contenu. */
@supports (animation-timeline: scroll()) {
  .container-header {
    animation: pol-header-ombre linear both;
    animation-timeline: scroll();
    animation-range: 0 120px;
  }

  @keyframes pol-header-ombre {
    from {
      box-shadow: 0 1px 0 rgba(30, 30, 30, 0.08);
    }

    to {
      box-shadow: 0 1px 0 rgba(30, 30, 30, 0.08),
        0 4px 20px rgba(30, 30, 30, 0.1);
    }
  }
}

.container-header .navbar-brand,
.container-header .navbar-brand a {
  color: var(--pol-texte);
  font-family: var(--pol-police-titres);
  font-weight: 500;
  text-decoration: none;
}

.container-header .navbar-brand:hover,
.container-header .navbar-brand:focus {
  color: var(--pol-texte);
}

/* Marque compacte (le core l'affiche à 32px → header massif).
   Depuis le 05 Août 2026 la marque est le NOM SEUL (« Claude Maier »,
   au lieu de « Site internet de Claude Maier ») : deux fois plus court,
   elle peut donc porter le corps qui lui donne son autorité de signature
   sans alourdir l'en-tête. La mention de métier vit dans .site-description. */
.container-header .navbar-brand {
  font-size: 22px;
  line-height: 1.2;
  margin: 0;
}

@media (min-width: 1200px) {
  /* Les grid-child du core empilent 40px de paddings + 8px de margin
     navbar : neutralisés, le rythme vertical vit sur la marque et le nav.
     justify-content: les grid-child sont des conteneurs FLEX — la marque
     (item à largeur de contenu) doit être centrée par son parent. */
  .container-header > .grid-child {
    padding-block: 0;
    justify-content: center;
  }

  .container-header .navbar-brand {
    display: block; /* inline-block par défaut : text-align serait sans effet */
    text-align: center;
    font-size: 30px;
    padding-block: 1rem 0.3rem;
  }

  /* Touche rouge du header (Yann, 30 Juillet 2026) : le filet d'imprimeur
     signature sous la marque — même grammaire que les titres de pages
     (120×2) et du footer (36×2). UNE seule marque rouge, pas de
     séparateurs répétés entre les items (règle du Filet Rouge : sa rareté
     fait son autorité). Desktop seulement : en mobile la marque partage
     sa rangée avec le burger. */
  .container-header .navbar-brand a::after {
    content: "";
    display: block;
    width: 46px;
    height: 2px;
    margin: 0.45rem auto 0;
    background-color: var(--pol-accent);
  }

  .container-header .navbar {
    justify-content: center;
    margin-top: 0;
    padding-block: 0 0.8rem;
  }
}

/* Mention de métier sous le nom (paramètre « Description du site » du
   style de template, 05 Août 2026) : c'est la seule information qu'un nom
   propre ne porte pas. Registre volontairement effacé — micro-typo Heebo
   très espacée, gris secondaire — pour qu'elle serve de signature sous le
   nom sans jamais lui disputer la vedette. */
.container-header .site-description {
  color: var(--pol-gris);
  font-family: var(--pol-police-micro);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.24em;
  line-height: 1.2;
  text-transform: uppercase;
  /* compense l'espacement de lettres, qui décale l'ensemble vers la droite */
  text-indent: 0.24em;
}

@media (min-width: 1200px) {
  /* margin-top : le filet rouge se referme au ras du bas du lien ; sans
     cet écart la mention viendrait toucher le filet (mesuré à 0px). */
  .container-header .site-description {
    margin-top: 0.5rem;
    font-size: 12px;
    text-align: center;
    padding-bottom: 0.3rem;
  }
}

/* <1200 : la marque partage sa rangée avec le bouton du menu ; la mention
   se range sous le nom, alignée sur lui. */
@media (max-width: 1199.98px) {
  .container-header .navbar-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
  }
}

/* Bouton hamburger (<1200) : cible tactile 44px, SANS bordure (décision
   Yann, 30 Juillet 2026), charte sombre sur blanc. display géré UNIQUEMENT
   dans le bloc <1200 : un display posé ici écraserait le display:none
   Bootstrap du desktop (même spécificité, feuille chargée après). */
.container-header .navbar-toggler {
  color: var(--pol-texte);
  border: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  -webkit-tap-highlight-color: transparent; /* surbrillance tap iOS/Android */
}

/* Au clic/tap, Bootstrap peint un épais box-shadow de focus (« bordure
   moche » relevée par Yann) : supprimé. On RESTE sur un <button> (clavier
   + lecteurs d'écran — engagement accessibilité senior) : le focus
   CLAVIER, lui, reste marqué par le :focus-visible global (§14). */
.container-header .navbar-toggler:focus {
  box-shadow: none;
  outline: none;
}

.container-header .navbar-toggler:focus-visible {
  outline: 2px solid var(--pol-accent);
  outline-offset: 2px;
}

/* <1200 : marque à gauche, burger à DROITE sur la même rangée ; le menu
   s'ouvre en panneau pleine largeur SOUS le header (position: absolute,
   ancré sur le header sticky). */
@media (max-width: 1199.98px) {
  .container-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    column-gap: 1rem;
    padding-inline: 18px;
  }

  .container-header > .grid-child {
    margin: 0;
    padding: 0;
    width: auto;
    max-width: none;
  }

  .container-header .navbar-brand {
    font-size: 16px;
    padding-block: 0.85rem;
  }

  /* Sélecteur .container-nav doublé : à <768 le core pose
     « .container-header .container-nav nav { margin-top: 1em } » (0,2,1)
     qui battait la règle simple — d'où un header plus haut de 14px en
     mobile qu'en tablette (incohérence relevée par Yann, corrigée). */
  .container-header .navbar,
  .container-header .container-nav nav,
  .container-header .container-nav .navbar {
    margin: 0;
    padding: 0;
    justify-content: flex-end;
    /* static : le panneau .navbar-collapse (absolute) doit s'ancrer sur le
       HEADER sticky, pas sur le navbar (que Bootstrap positionne). */
    position: static;
  }

  .container-header .navbar-toggler {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .container-header .navbar-collapse {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--pol-blanc);
    border-top: 1px solid rgba(30, 30, 30, 0.08);
    box-shadow: 0 14px 24px rgba(30, 30, 30, 0.1);
    padding: 0.9rem 18px 1.1rem;
  }
}

/* --- Menu principal : Hind 500, uppercase, letter-spacing 2px ---
   Sélecteur doublé (.metismenu.mod-menu) : les layouts metismenu de
   Cassiopeia posent leur propre font-size avec une spécificité qui
   battrait .container-header .mod-menu seul (constaté au passage du
   layout « collapse-metismenu », 30 Juillet 2026). */
.container-header .mod-menu,
.container-header .metismenu.mod-menu,
.container-header .metismenu.mod-menu > li > a,
.container-header .metismenu.mod-menu > li > button {
  color: var(--pol-texte);
  font-family: var(--pol-police-corps);
  font-size: var(--pol-fs-nav);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--pol-ls-nav);
}

/* Le soulignement animé de Cassiopeia (li:after / metismenu) est remplacé
   par la pill beige : on le neutralise pour éviter un double marqueur. */
.container-header .mod-menu > li::after,
.container-header .metismenu > li > a::after,
.container-header .metismenu > li > button::before {
  display: none;
}

/* Layouts « *-metismenu » de Cassiopeia : le core souligne actif/survol via
   .metismenu.mod-menu .metismenu-item... (spécificité 0,4,1) — la pill des
   règles génériques ci-dessous perdrait sans cette neutralisation dédiée. */
.container-header .metismenu.mod-menu .metismenu-item.active > a,
.container-header .metismenu.mod-menu .metismenu-item.active > button,
.container-header .metismenu.mod-menu .metismenu-item > a:hover,
.container-header .metismenu.mod-menu .metismenu-item > button:hover {
  text-decoration: none;
}

.container-header .mod-menu > li > a,
.container-header .mod-menu > li > span {
  display: inline-block;
  /* Verticales asymétriques : calage optique Hind (voir --pol-cale-texte) */
  padding: calc(0.5em + var(--pol-cale-texte)) 1.25em
    calc(0.5em - var(--pol-cale-texte));
  border-radius: var(--pol-radius-pill);
  color: var(--pol-texte);
  text-decoration: none;
  transition: background-color 0.2s ease;
}

/* Survol et focus : pill beige TRANSLUCIDE — distincte de l'état actif
   (retour Yann 30 Juillet 2026 : l'actif doit se voir). */
.container-header .mod-menu > li > a:hover,
.container-header .mod-menu > li > a:focus-visible {
  background-color: rgba(238, 223, 204, 0.5);
  color: var(--pol-texte);
  text-decoration: none;
}

/* État ACTIF : pill beige pleine (.active = chemin actif, .current = page
   exacte, classes vérifiées dans modules/mod_menu/tmpl/default.php).
   Déclaré APRÈS le survol pour le dominer sur l'item courant. */
.container-header .mod-menu > li.active > a,
.container-header .mod-menu > li.current > a,
.container-header .mod-menu > li.active > span,
.container-header .mod-menu > li.active > a:hover,
.container-header .mod-menu > li.active > a:focus-visible {
  background-color: var(--pol-beige);
  color: var(--pol-texte);
  text-decoration: none;
}

/* Menu horizontal (≥1200, layout collapse-metismenu passé en navbar-expand-xl — 7 items ne tiendront jamais sous ~1150px) : 7 items en pills
   uppercase ≈ 1380px — plus large que le conteneur jusqu'à ~1400px.
   Comme sur le site de production : retour à la ligne AUTORISÉ et rangées
   centrées (jamais de débordement horizontal), plus un léger resserrage
   en plage intermédiaire pour tenir sur une rangée dès que possible. */
@media (min-width: 1200px) {
  .container-header .navbar-collapse .mod-menu {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 0.25em;
  }
}

/* Jusqu'à 1439px : la rangée pleine taille (≈1380px) ne tient pas dans le
   conteneur → version resserrée (13px / ls 1px / pills 1em) qui tient sur
   UNE rangée dès ~1250px ; en dessous, le retour à la ligne centré prend
   le relais. Pleine taille (14px / ls 2px) à partir de 1440px. */
@media (min-width: 1200px) and (max-width: 1439.98px) {
  .container-header .mod-menu,
  .container-header .metismenu.mod-menu > li > a,
  .container-header .metismenu.mod-menu > li > button {
    font-size: 13px;
    letter-spacing: 1px;
  }

  .container-header .mod-menu > li > a,
  .container-header .mod-menu > li > span {
    padding-left: 1em;
    padding-right: 1em;
  }
}

/* --- Sous-menu niveau 2 (liens des <li> imbriqués, layout metismenu) --- */
.container-header .metismenu li li > a {
  display: block;
  padding: 0.55em 1.25em;
  color: var(--pol-texte);
  font-size: 13px;
  letter-spacing: 1px;
  text-decoration: none;
}

.container-header .metismenu li li > a:hover,
.container-header .metismenu li li > a:focus-visible {
  background-color: var(--pol-creme);
  color: var(--pol-accent-fonce);
  text-decoration: none;
}

/* Desktop à POINTEUR : ouverture au SURVOL du parent (décision Yann,
   30 Juillet 2026 — plus de clic sur caret), clavier couvert par
   :focus-within, carte blanche « feuille posée » sous l'item. Le caret
   metismenu devient superflu et est masqué. Sur écran TACTILE ≥1200
   (hover: none), le clic sur caret du core est conservé tel quel. */
@media (min-width: 1200px) and (hover: hover) {
  .container-header .metismenu > li.parent {
    position: relative;
  }

  .container-header .metismenu > li.parent > button.mm-toggler {
    display: none;
  }

  .container-header .metismenu > li.parent > ul.mm-collapse {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 230px;
    height: auto !important; /* neutralise l'animation height du collapse */
    margin: 0;
    padding: 0.5em 0;
    list-style: none;
    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);
    z-index: 1040;
  }

  .container-header .metismenu > li.parent:hover > ul.mm-collapse,
  .container-header .metismenu > li.parent:focus-within > ul.mm-collapse {
    display: block;
  }
}

/* Menu replié mobile/tablette (<1200 : Cassiopeia force des textes blancs prévus
   pour son header bleu → repasser en sombre sur fond blanc). */
@media (max-width: 1199.98px) {
  /* Pile VERTICALE sur toute la plage burger : le core passe le metismenu
     en flex ROW dès 992px (« @media (width >= 992px) .metismenu.menu-
     horizontal », + margin-left 1.55em entre items) — notre burger allant
     jusqu'à 1199, la bande 992–1199 affichait le menu horizontal desktop
     DANS le panneau (constaté par Yann, corrigé). */
  .container-header .metismenu.menu-horizontal,
  .container-header .metismenu.mod-menu {
    display: block;
    flex: none;
    /* Enfant flex de .navbar-collapse : sans min-width:0, sa largeur
       min-content (gonflée par les libellés nowrap des sous-menus ouverts)
       déborde du panneau — +29px constatés à 375 avec les 9 fiches. */
    width: 100%;
    min-width: 0;
  }

  .container-header .mod-menu > li + li {
    margin-left: 0;
  }

  /* Sous-menus TOUJOURS ouverts dans le panneau (décision Yann,
     30 Juillet 2026) : sur mobile le caret est une cible minuscule et le
     visiteur tape le parent à tous les coups — on montre tout, 8 items au
     total. Le caret devient inutile et disparaît ; height:auto neutralise
     l'état replié du collapse. Léger retrait pour marquer le niveau. */
  .container-header .metismenu li > button.mm-toggler {
    display: none;
  }

  /* Spécificité 0,4,1 : le core replie via
     « .metismenu.mod-menu .mm-collapse:not(.mm-show) » (0,4,0), et style
     le sous-menu en carte flottante ABSOLUE (desktop) qui recouvrirait
     les items suivants → retour au flux normal, à plat, dans le panneau. */
  .container-header .metismenu.mod-menu li > ul.mm-collapse {
    display: block;
    height: auto !important;
    position: static;
    transform: none;
    min-width: 0;
    width: 100%; /* passe SOUS le lien parent (les li du core sont en flex) */
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    padding-block: 0;
  }

  .container-header .metismenu.mod-menu > li {
    flex-wrap: wrap; /* autorise le sous-menu pleine largeur à la ligne */
  }

  .container-header .metismenu li ul {
    list-style: none;
    padding-left: 1.25em;
  }

  /* Le core mobile souligne aussi via .mod-menu.mod-list > li > a:hover
     (spécificité 0,4,1) : la variante .mod-list est indispensable, la règle
     générique (0,3,2) ne suffirait pas à l'emporter. */
  .container-header .mod-menu > li.active > a,
  .container-header .mod-menu > li.active > span,
  .container-header .mod-menu > li > a:hover,
  .container-header .mod-menu.mod-list > li > a:hover {
    text-decoration: none; /* le core souligne : la pill suffit */
  }

  .container-header .mod-menu > li {
    margin-bottom: 0.25em; /* aère la liste verticale des pills */
  }
}

/* ============================================================
   6. Boutons — PART SITE restante
   Les pilules .pol-btn sont DÉPLACÉES dans css/editor.css (§6a).
   Restent ici : l'habillage des boutons Bootstrap du core.
   ============================================================ */

/* Les boutons Bootstrap du core (btn-primary) suivent déjà la charte via
   --cassiopeia-color-primary/hover ; on aligne la forme pilule. */
.btn-primary,
button[type="submit"].btn {
  border-radius: var(--pol-radius-pill);
  font-family: var(--pol-police-corps);
  font-weight: 600;
  text-transform: uppercase;
}

/* Calage optique Hind sur les boutons du core (base .375rem symétrique).
   :not(.pol-order__submit) : le bouton du formulaire com_policarpaorder a
   sa propre base 0.6rem déjà calée dans order.css — sans l'exclusion, ce
   sélecteur (0,2,1) lui imposerait la base core. Exclure de même tout futur
   bouton de composant qui définit son propre padding. */
.btn-primary:not(.pol-order__submit),
button[type="submit"].btn:not(.pol-order__submit) {
  padding-top: calc(0.375rem + var(--pol-cale-texte));
  padding-bottom: calc(0.375rem - var(--pol-cale-texte));
}


/* ============================================================
   7. Séparateur signature et labels
   → DÉPLACÉ dans css/editor.css (§7) — couche contenu
   partagée site + éditeur JCE (tpl 1.0.32). Chargée AVANT ce
   fichier par index.php : la cascade reste inchangée.
   ============================================================ */

/* ============================================================
   8. Carte livre
   Fond blanc, coins arrondis, ombre légère, séparateur rouge,
   prix rouge (kit de prod : Hind 600, CHF XX.00).
   ============================================================ */

.pol-grille-livres {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding: 0;
  margin: 2rem 0;
  list-style: none; /* la grille peut être un <ul> sémantique */
}

@media (min-width: 768px) {
  .pol-grille-livres {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1025px) {
  .pol-grille-livres {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.pol-carte-livre {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.75rem 1.5rem;
  text-align: center;
  background-color: var(--pol-blanc);
  border: 1px solid rgba(30, 30, 30, 0.06); /* fine bordure des captures */
  border-radius: var(--pol-radius-carte);
  box-shadow: var(--pol-ombre-carte);
}

.pol-carte-livre__couverture {
  width: 100%;
  margin-bottom: 1.25rem;
}

.pol-carte-livre__couverture img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: 4px; /* léger, pour adoucir les scans de couvertures */
}

.pol-carte-livre__titre {
  font-family: var(--pol-police-titres);
  font-size: var(--pol-fs-h5);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 0.5rem;
}

/* Le séparateur d'une carte est plus court que le séparateur de section */
.pol-carte-livre .pol-separateur {
  width: 60px;
  margin: 0.75rem auto;
}

.pol-carte-livre__prix {
  color: var(--pol-accent-fonce);
  font-weight: 600;
  font-size: var(--pol-fs-bouton);
  margin-bottom: 1rem;
}

.pol-carte-livre__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: auto; /* pousse les boutons en bas → cartes alignées */
}

/* ============================================================
   9. Bannière intérieure (position « banner » de Cassiopeia,
   pleine largeur .container-banner.full-width — un module
   « HTML personnalisé » par page, gabarits dev/gabarits/modules/)
   Image de fond du client + son slogan incrusté en VRAI texte
   (net à toutes les tailles, modifiable en 10 s, accessible),
   placé selon sa consigne écrite (« dans l'herbe, sur la
   droite », « dans le ciel »…) par variantes combinables :
   --gauche/--droite (axe horizontal), --haut/--bas (axe
   vertical, défaut centré) ; --encre-sombre pour les photos
   claires (brouillard, ciel), encre claire + ombre par défaut.
   ============================================================ */

.pol-banniere {
  display: grid;
  overflow: hidden;
  background-color: var(--pol-sombre); /* repli si l'image ne charge pas */
}

/* min-height : sur mobile la bande 1920×~400 deviendrait un ruban de
   ~80px — object-fit recadre les flancs pour garder une vraie bannière.
   max-height : au-delà de ~1700px de fenêtre, borne la hauteur (les
   fonds client font 328 à 482px de haut à 1920 de large). */
.pol-banniere__fond {
  grid-area: 1 / 1;
  display: block;
  width: 100%;
  height: auto;
  min-height: 180px;
  max-height: 380px;
  object-fit: cover;
}

/* Variante « adaptative » (chantier bannières, 06 Août 2026, pilote
   Poésies-Photos) : le module sert TROIS cadrages art-directed via
   <picture> (desktop 2400×600 4:1 ≥1025 · tablette 1536×614 2.5:1
   ≥768 · mobile 896×504 16:9), générés depuis l'original upscalé ×2
   (Topaz). Chaque cadrage s'affiche EN ENTIER — les garde-fous
   min/max-height de la version mono-fichier (qui rognaient >50 % de
   l'image en mobile) ne s'appliquent plus ; seul un plafond à 480px
   borne les écrans >1920 (léger recadrage cover au-delà seulement).
   display:contents : le <picture> s'efface pour que l'img reste
   l'enfant de la grille (superposition du slogan en 1/1). */
.pol-banniere--adaptative picture {
  display: contents;
}

.pol-banniere--adaptative .pol-banniere__fond {
  min-height: 0;
  max-height: 480px;
}

/* Point focal HAUT : au-delà de 1920px, le plafond de 480px recadre
   verticalement (cover) — par défaut au centre, ce qui rognerait un sujet
   placé haut. Posé sur la bannière d'accueil : le gypaète vole dans le
   quart supérieur du cadrage héros (mesuré : y 12-24 %), le recadrage
   sacrifie le bas (pentes) et jamais l'oiseau. */
.pol-banniere--focal-haut .pol-banniere__fond {
  object-position: center 25%;
}

/* Slogan recalibré aux nouvelles hauteurs (validé Yann, 06 Août 2026) :
   la bannière adaptative gagne 17 % de hauteur en mobile et 26 % à 1920 —
   le clamp suit cette croissance LÀ OÙ elle a lieu (+1px mobile, +2 à
   1440, +3.3 à 1920, plafond 30px) sans devenir proportionnel : la
   lisibilité est absolue et le slogan doit rester DANS l'image, pas sur
   elle. Ratios slogan/bannière retrouvés : ~8.5/5.6/6.9/6.1 %. */
.pol-banniere--adaptative .pol-banniere__slogan {
  font-size: clamp(18px, 12px + 0.9vw, 30px);
}

.pol-banniere__slogan {
  grid-area: 1 / 1; /* superposé à l'image, pas de position absolue */
  z-index: 1;
  align-self: center;
  justify-self: center;
  margin: 0;
  padding: 0.5rem clamp(1rem, 4vw, 3rem);
  max-width: min(34ch, 92%);
  font-family: var(--pol-police-titres);
  font-style: italic;
  font-size: clamp(17px, 14.2px + 0.62vw, 26px);
  font-weight: 500;
  line-height: 1.45;
  text-align: center;
  color: var(--pol-blanc);
  /* halo, pas voile : le contraste est garanti localement autour des
     lettres, l'image reste intacte */
  text-shadow: 0 1px 3px rgba(30, 30, 30, 0.6), 0 0 22px rgba(30, 30, 30, 0.5);
}

/* Variantes latérales alignées sur la GRILLE de contenu (retour Yann,
   06 Août 2026) : dès que l'écran dépasse ~1420px, le slogan se cale sur
   la gouttière du conteneur 1280px — la même géométrie que le menu et le
   contenu, au lieu de dériver vers le bord de l'écran. En dessous, le
   terme fluide 5vw garde l'espacement proportionnel (tablette/mobile
   inchangés). Le % d'une marge se résout sur la largeur de la bannière
   (pleine page), d'où le calc((100% - 1280px) / 2). */
.pol-banniere--gauche .pol-banniere__slogan {
  justify-self: start;
  text-align: left;
  margin-inline-start: max(clamp(0.25rem, 5vw, 6rem), calc((100% - 1280px) / 2));
}

.pol-banniere--droite .pol-banniere__slogan {
  justify-self: end;
  text-align: right;
  margin-inline-end: max(clamp(0.25rem, 5vw, 6rem), calc((100% - 1280px) / 2));
}

.pol-banniere--haut .pol-banniere__slogan {
  align-self: start;
  margin-top: clamp(0.75rem, 3vw, 2.75rem);
}

.pol-banniere--bas .pol-banniere__slogan {
  align-self: end;
  margin-bottom: clamp(0.75rem, 3vw, 2.75rem);
}

/* Photos claires (mer de brouillard, ciel de couchant) : encre du site
   + halo clair inversé */
/* Encre sombre (photos claires) : deux traitements REJETÉS successivement
   aux tests du 06 Août 2026 — le halo blanc (« contour autocollant ») puis
   le panneau de verre flouté (l'objet attirait l'œil plus que l'image ;
   « glass as decoration », refus explicite du référentiel de craft).
   Traitement final : le VOILE FONDU — un dégradé elliptique de crème qui
   s'éteint avant tout bord (aucun rectangle, aucun flou, aucun coin) :
   la photo paraît juste « embuée » derrière les lettres. Le padding large
   donne au dégradé la place de mourir en douceur ; la micro-assise
   text-shadow (1px, quasi invisible) sécurise les lettres qui débordent
   du cœur du voile. */
.pol-banniere--encre-sombre .pol-banniere__slogan {
  color: var(--pol-texte);
  padding: 1.5rem clamp(2rem, 5vw, 4rem);
  background: radial-gradient(
    ellipse closest-side,
    rgba(250, 249, 245, 0.65),
    rgba(250, 249, 245, 0.45) 55%,
    rgba(250, 249, 245, 0) 100%
  );
  text-shadow: 0 1px 2px rgba(250, 249, 245, 0.7);
}

/* ============================================================
   10. Footer sombre 3 colonnes
   Niveau visuel calé sur le footer de production (référence
   visuelle SEULEMENT — aucun code repris du WordPress) : fond
   sombre au filigrane fleur signature (cf. .footer), titres Lora
   soulignés du séparateur rouge signature, icônes de contact et
   logo Facebook officiel. Toute l'iconographie vit ici en mask-image
   (le HTML du module reste nu → insensible au filtrage JCE).
   Colonnes : Liens rapides · Informations de contact + Rester
   connecté · Informations légales. Gabarit :
   dev/gabarits/modules/footer.html.
   ============================================================ */

.footer {
  background-color: var(--pol-sombre);
  /* Filigrane de papier (remplace la texture topographique jugée
     « maquette » par Yann, 05 Août 2026) : LA fleur à 6 pétales du site
     (tracé exact du favicon, media/images/joomla-favicon.svg) posée UNE
     seule fois en grand contour fin, rognée au coin bas-droit — comme un
     motif gaufré dans la masse du papier. Encre chaude de la charte
     (Beige Reliure à 6 %, jamais de gris neutre sur fond sombre), halo
     sommital conservé contre l'aplat mort. */
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><g fill='none' stroke='%23EEDFCC' stroke-opacity='.06' stroke-width='.25'><circle cx='32' cy='32' r='11.5'/><circle cx='53' cy='32' r='9'/><circle cx='42.5' cy='50.2' r='9'/><circle cx='21.5' cy='50.2' r='9'/><circle cx='11' cy='32' r='9'/><circle cx='21.5' cy='13.8' r='9'/><circle cx='42.5' cy='13.8' r='9'/></g></svg>"),
    radial-gradient(140% 90% at 50% -10%, #323231 0%, var(--pol-sombre) 58%);
  background-repeat: no-repeat, no-repeat;
  /* Mobile : filigrane réduit au coin bas (en pile étroite centrée, la
     grande version passait derrière tout le texte — constaté à 375). */
  background-position: right -80px bottom -95px, center top;
  background-size: 300px 300px, auto;
  color: var(--pol-blanc);
  margin-top: 3rem;
}

@media (min-width: 768px) {
  .footer {
    background-position: right -85px bottom -105px, center top;
    background-size: 520px 520px, auto;
  }
}

.footer .grid-child {
  /* Le core met .grid-child en flex sans retour à la ligne : module et
     crédit (rendu par index.php) se tasseraient sur la même rangée. */
  display: block;
  padding-top: 3.5rem;
  padding-bottom: 2rem;
}

/* Le module unique occupe toute la largeur du flex parent du core */
.footer .mod-custom,
.footer .pol-footer {
  width: 100%;
}

.pol-footer-grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.25rem;
}

/* Dès la tablette : 3 colonnes à la largeur de leur CONTENU, distribuées
   bord à bord (space-between). Des pistes « 1fr » calaient les textes à
   gauche de chaque piste et laissaient un vide traînant à droite : masse
   visuelle décentrée dès que les marges extérieures du conteneur ne
   dominent plus (constaté par Yann entre 768 et 1599px). Ici les bords
   gauche ET droit du contenu s'alignent sur le conteneur à toutes les
   largeurs — et la tablette n'a plus de rangée orpheline. */
@media (min-width: 768px) {
  .pol-footer-grille {
    grid-template-columns: repeat(3, auto);
    justify-content: space-between;
    column-gap: 2.5rem;
  }
}

.pol-footer-titre {
  color: var(--pol-blanc);
  font-family: var(--pol-police-titres);
  font-size: var(--pol-fs-h4);
  font-weight: 600;
  margin: 0 0 1.1rem;
}

/* Mini-séparateur signature sous chaque titre : déclinaison 36px
   du séparateur rouge 120×2 de la charte (§7). */
.pol-footer-titre::after {
  content: "";
  display: block;
  width: 36px;
  height: 2px;
  margin-top: 0.55rem;
  background-color: var(--pol-accent);
}

.footer a:not(.pol-btn),
.pol-footer-grille a {
  color: var(--pol-blanc);
  text-decoration: none;
  text-underline-offset: 3px;
  transition: color 0.15s ease;
}

/* :focus inclus : le core peint .footer a:not(.btn):focus en gris clair
   (--gray-200), qui gagnerait sinon au focus souris. */
.footer a:not(.pol-btn):hover,
.footer a:not(.pol-btn):focus,
.footer a:not(.pol-btn):focus-visible {
  color: var(--pol-beige);
  text-decoration: underline;
}

.pol-footer-liste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pol-footer-liste li {
  margin-bottom: 0.55em;
}

/* --- Colonne contact : lignes iconées (pin, enveloppe) --- */

.pol-footer-contact {
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: 1.7;
}

.pol-contact-item {
  position: relative;
  padding-left: 1.9rem;
  margin-bottom: 0.9rem;
}

/* Icône en mask-image : l'alpha du SVG découpe le fond beige.
   SVG autoproduits (trait 1.8, terminaisons rondes). */
.pol-contact-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25em;
  width: 1.15rem;
  height: 1.15rem;
  background-color: var(--pol-beige);
  -webkit-mask: var(--pol-ico) no-repeat center / contain;
  mask: var(--pol-ico) no-repeat center / contain;
}

.pol-contact-adresse {
  --pol-ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 21c-3.9-3.7-6.5-7-6.5-10.4a6.5 6.5 0 0 1 13 0C18.5 14 15.9 17.3 12 21Z'/><circle cx='12' cy='10.4' r='2.4'/></svg>");
}

.pol-contact-email {
  --pol-ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5.5' width='18' height='13' rx='2'/><path d='m3.8 7.5 8.2 5.5 8.2-5.5'/></svg>");
}

/* --- Bloc « Rester connecté » (sous le contact, même colonne) --- */

.pol-footer-social {
  margin-top: 1.9rem;
}

.pol-footer-social-texte {
  margin: 0 0 0.85rem;
  max-width: 34ch;
  color: rgba(238, 223, 204, 0.75); /* beige atténué (charte), pas de gris */
  font-size: var(--pol-fs-petit);
}

/* Cercles sociaux beiges (30px maquette → 36px, cible tactile) */
.pol-sociaux {
  display: flex;
  gap: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pol-social-cercle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--pol-social-taille);
  height: var(--pol-social-taille);
  border-radius: 50%;
  background-color: var(--pol-beige);
  color: var(--pol-sombre);
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease,
    transform 0.2s ease;
}

.pol-social-cercle:hover,
.pol-social-cercle:focus-visible {
  background-color: var(--pol-accent);
  color: var(--pol-blanc);
  text-decoration: none;
  transform: translateY(-2px);
}

/* Le glyphe (currentColor) doit rester Noir Éditeur sur le cercle beige au
   repos : les règles de liens du footer (.footer a…, spécificité 0,2,1+)
   battraient .pol-social-cercle (0,1,0) et le peindraient en blanc —
   illisible sur beige. Overrides à spécificité suffisante, déclarés APRÈS
   les règles de liens pour gagner l'égalité au :hover/:focus. */
.footer a.pol-social-cercle,
.pol-footer-grille a.pol-social-cercle {
  color: var(--pol-sombre);
}

.footer a.pol-social-cercle:hover,
.footer a.pol-social-cercle:focus,
.footer a.pol-social-cercle:focus-visible,
.pol-footer-grille a.pol-social-cercle:hover,
.pol-footer-grille a.pol-social-cercle:focus-visible {
  color: var(--pol-blanc);
}

/* Glyphe « f » officiel de Facebook, découpé dans la couleur du
   cercle (currentColor). Tracé d'après Font Awesome Free 6
   « facebook-f » (licence CC BY 4.0 — fontawesome.com/license/free). */
.pol-social-facebook::before {
  content: "";
  width: 42%;
  height: 54%;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'><path d='M80 299.3V512H196V299.3h86.5l18-97.8H196V166.9c0-51.7 20.3-71.5 72.7-71.5c16.3 0 29.4 .4 37 1.2V7.9C291.4 4 256.4 0 236.2 0C129.3 0 80 50.5 80 166.9v34.6H14v97.8H80z'/></svg>") no-repeat center / contain;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'><path d='M80 299.3V512H196V299.3h86.5l18-97.8H196V166.9c0-51.7 20.3-71.5 72.7-71.5c16.3 0 29.4 .4 37 1.2V7.9C291.4 4 256.4 0 236.2 0C129.3 0 80 50.5 80 166.9v34.6H14v97.8H80z'/></svg>") no-repeat center / contain;
}

/* Ligne de crédit : micro-texte Heebo en bandeau séparé (filet).
   grid-column conservé au cas où le <p> serait collé DANS la grille. */
.pol-footer-credit {
  grid-column: 1 / -1; /* si collé dans la grille du module            */
  width: 100%;         /* item du flex .grid-child (rendu par index.php) */
  margin: 2.75rem 0 0;
  padding-top: 1.4rem;
  padding-inline: 0.75rem; /* à 375px le © frôlait les bords du viewport (7px mesurés) */
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  text-align: center;
  color: rgba(238, 223, 204, 0.7); /* beige atténué, cohérent charte */
  font-family: var(--pol-police-micro);
  font-size: var(--pol-fs-micro);
  font-weight: 300;
  letter-spacing: 0.03em;
}

/* Mobile : pile UNIQUE entièrement centrée (l'alignement à gauche de la
   version desktop paraît déséquilibré en colonne étroite). Les icônes de
   contact passent au-dessus de leur texte, les filets se centrent.
   ⚠️ Bloc à garder EN FIN de section 10 : à spécificité égale il doit
   suivre les définitions de base pour gagner la cascade. */
@media (max-width: 767.98px) {
  .pol-footer-col,
  .pol-footer-social {
    text-align: center;
  }

  .pol-footer-titre::after {
    margin-left: auto;
    margin-right: auto;
  }

  .pol-contact-item {
    padding-left: 0;
    margin-bottom: 1.1rem;
  }

  .pol-contact-item::before {
    position: static;
    display: block;
    margin: 0 auto 0.45rem;
  }

  .pol-footer-social-texte {
    max-width: none;
    margin-left: auto;
    margin-right: auto;
  }

  .pol-sociaux {
    justify-content: center;
  }
}

/* ============================================================
   11. Formulaires
   Kit de prod : fond et bordure #F8F8F8, coins 30px, texte saisi
   #54595F ; au focus le fond passe au blanc.
   ============================================================ */

label,
.form-label {
  font-family: var(--pol-police-corps);
  font-weight: 600;
  font-size: var(--pol-fs-label); /* 15px max (kit) : ne suit pas le corps à 16px */
  margin-bottom: 0.35em;
}

input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
textarea,
select,
.form-control,
.form-select {
  font-family: var(--pol-police-corps);
  font-size: var(--pol-fs-corps);
  line-height: var(--pol-lh-corps);
  color: var(--pol-gris);
  background-color: var(--pol-champ);
  border: 1px solid var(--pol-champ);
  border-radius: var(--pol-radius-pill);
  padding: 0.6em 1.25em;
}

textarea {
  border-radius: 20px; /* pilule complète illisible sur un champ multiligne */
  min-height: 8em;
}

input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):focus,
textarea:focus,
select:focus,
.form-control:focus,
.form-select:focus {
  color: var(--pol-texte);
  background-color: var(--pol-blanc);
  border-color: var(--pol-champ);
  box-shadow: none; /* remplacé par le focus-visible global (§14) */
}

/* ============================================================
   12. Styles « presse-entrée » pour JCE
   → DÉPLACÉ dans css/editor.css (§12) — couche contenu
   partagée site + éditeur JCE (tpl 1.0.32). Chargée AVANT ce
   fichier par index.php : la cascade reste inchangée.
   ============================================================ */

/* ============================================================
   12 bis. Grille de livres (pages Publications et Acheter)
   Cartes blanches « feuille posée » ; les couvertures ont des ratios
   très variables (0,95 à 0,66) → cadre 3/4 uniforme en object-fit:
   contain sur fond crème, comme un livre posé sur une étagère.
   3 colonnes desktop → 2 tablette → 1 mobile. La grille est un <div> :
   volontairement hors du cap de mesure des éléments de texte (§3 bis).
   ============================================================ */

/* Cartes bornées 300–380px (jamais étirées ni écrasées — les couvertures
   garderaient sinon un air « tiré en hauteur » aux largeurs intermédiaires).
   Pistes en minmax(300px, 1fr) : auto-fill compte les colonnes sur le MIN
   (un max fixe ferait tomber la tablette 768 à une seule colonne) ; le
   plafond des 380px est porté par la carte elle-même, centrée dans sa
   piste. min(100%,…) protège les très petits écrans (<330px). */
.pol-livres {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 2rem;
  margin-block: 2.5rem;
}

.pol-livre {
  width: 100%;
  max-width: 380px;
  justify-self: center;
}

/* Variante « hub » (accueil) : 4 cartes = 2×2, jamais une rangée
   orpheline. Le plafond de largeur (2 cartes + gouttière) suffit à
   imposer 2 colonnes dès ~660px et 1 colonne en dessous — aucune
   media query, donc aucun palier à surveiller (tpl 1.0.36). */
.pol-livres--hub {
  max-width: 812px;
  margin-inline: auto;
}

/* Rythme de l'accueil : la ligne d'action qui suit le hub (« Un ouvrage
   vous tente… ») ouvre le dernier temps de la page — à 40px elle se
   lisait comme une légende de la grille (même air que h2→grille, mesuré
   revue du 05 Août 2026). 3.75rem la détache nettement en restant sous
   l'écart qui précède le témoignage. */
.pol-livres--hub + p {
  margin-block-start: 3.75rem;
}

/* Bande Crème Vélin derrière « Par où commencer ? » (option de la revue
   du 05 Août, posée pour arbitrage Yann le 06 Août 2026) : détache le hub
   du fil de l'article. Pleine largeur par ombre étendue + clip vertical —
   aucun 100vw, donc aucun débord horizontal lié à la barre de défilement.
   La ligne d'action qui suit reçoit son détachement du margin-block-end
   (équivalent du 3.75rem de la règle ci-dessus). */
.pol-bande-creme {
  background-color: var(--pol-creme);
  box-shadow: 0 0 0 100vmax var(--pol-creme);
  clip-path: inset(0 -100vmax);
  padding-block: 2.5rem 3rem;
  margin-block: 3rem 3.75rem;
}

.pol-bande-creme > h2:first-child {
  margin-block-start: 0;
}

.pol-bande-creme .pol-livres {
  margin-block-end: 0;
}

.pol-livre {
  display: flex;
  flex-direction: column;
  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);
  overflow: hidden; /* les coins de la couverture suivent le radius */
}

.pol-livre__couv {
  display: block;
  position: relative;
  flex: none;
  aspect-ratio: 3 / 4;
  background-color: var(--pol-creme);
}

/* Variante « paysage » (revue cohérence du 06 Août 2026) : le cadre 3:4
   est pensé pour des COUVERTURES portrait ; imposé aux photos horizontales
   des pages de calendrier (page Poésies-Photos), il les laissait flotter
   dans le crème — plus de la moitié de la carte vide. Le cadre suit
   l'orientation dominante de la SÉRIE : 3:2 quand toute la grille est
   paysage. Variante de GRILLE uniquement, PAS par carte : testé sur la
   carte Poésies du hub (rangée mixte), la grille étire les cartes à
   hauteur égale et le corps de la carte courte se creuse d'un grand vide
   entre notice et bouton — pire que le letterbox. Le hub garde donc son
   cadre 3:4 uniforme (sa série à lui, ce sont les 4 vignettes). */
.pol-livres--paysage .pol-livre__couv {
  aspect-ratio: 3 / 2;
}

/* Image en absolu : sa taille intrinsèque ne participe plus au calcul
   de hauteur du cadre (en flex, elle renégociait l'aspect-ratio et
   désalignait les cartes d'une même rangée). width/height auto + max-* :
   la boîte épouse la couverture (ratio intrinsèque), margin auto centre —
   la bordure fait ainsi un VRAI cadre au bord de l'image (demande client :
   « image de couverture encadrée », CDC ; coins 4px du vocabulaire). */
.pol-livre__couv img {
  position: absolute;
  inset: 1.25rem;
  margin: auto;
  width: auto;
  height: auto;
  max-width: calc(100% - 2.5rem);
  max-height: calc(100% - 2.5rem);
  object-fit: contain;
  background-color: var(--pol-blanc);
  border: 1px solid rgba(30, 30, 30, 0.14);
  border-radius: 4px;
}

.pol-livre__corps {
  display: flex;
  flex-direction: column;
  flex: 1; /* toutes les cartes d'une rangée alignent leurs boutons en bas */
  gap: 0.65rem;
  padding: 1.5rem;
}

/* .pol-livre h2... : le rythme d'article cible :is(h2, .pol-intertitre)
   (0,2,0 — la classe fixe la spécificité du :is) ; il faut 0,2,1 ici.
   Anatomie DESIGN.md (kit de prod) : titre Lora 600 CENTRÉ + filet rouge
   60×2 dessous — le filet de carte du vocabulaire, pas une nouveauté. */
/* h2 OU h3 : sur les pages de liste la carte porte un h2 (aucun titre de
   section au-dessus), sur l'accueil elle vit sous le h2 « Par où
   commencer ? » et doit donc être un h3 — même style dans les deux cas,
   la hiérarchie du document reste correcte (tpl 1.0.36). */
.pol-livre h2.pol-livre__titre,
.pol-livre h3.pol-livre__titre {
  margin: 0;
  font-family: var(--pol-police-titres);
  font-size: var(--pol-fs-h5);
  font-weight: 600;
  line-height: var(--pol-lh-titres);
  text-align: center;
}

.pol-livre h2.pol-livre__titre::after,
.pol-livre h3.pol-livre__titre::after {
  content: "";
  display: block;
  width: 60px;
  height: 2px;
  margin: 0.65rem auto 0;
  background-color: var(--pol-accent);
}

.pol-livre__titre a {
  color: var(--pol-texte);
  text-decoration: none;
}

.pol-livre__titre a:hover,
.pol-livre__titre a:focus-visible {
  color: var(--pol-accent-fonce);
  text-decoration: underline;
}

p.pol-livre__notice {
  margin: 0;
  font-size: 0.95em;
}

p.pol-livre__isbn {
  margin: 0;
  color: var(--pol-gris);
  font-family: var(--pol-police-micro);
  font-size: var(--pol-fs-petit);
  font-weight: 300;
  letter-spacing: 0.02em;
}

p.pol-livre__prix {
  margin: 0.35rem 0 0;
  font-size: var(--pol-fs-h4);
  font-weight: 600;
  color: var(--pol-accent-fonce); /* prix en rouge AA : anatomie du kit de prod, assombri (audit phase 8) */
}

/* Règle d'alignement des cartes (revue cohérence du 06 Août 2026) : les
   éléments d'AFFICHAGE se centrent (titre, prix, boutons — l'axe de la
   carte), les PARAGRAPHES descriptifs se lisent à gauche (notice
   bibliographique, ISBN — multi-lignes). Le prix était à gauche sur
   Publications et centré sur Acheter : centré partout désormais. */
.pol-livre .pol-livre__prix {
  text-align: center;
}

.pol-livre__prix small {
  font-size: var(--pol-fs-petit);
  font-weight: 400;
  color: var(--pol-gris);
}

/* Boutons pleine largeur empilés : cibles généreuses (confort senior),
   hauteur homogène quel que soit le retour à la ligne des libellés. */
p.pol-livre__actions {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0;
  margin-block-start: auto; /* pousse les boutons au bas de la carte */
  padding-top: 0.85rem;
}

.pol-livre__actions .pol-btn {
  width: 100%;
}

/* ============================================================
   12 ter. En-tête de fiche livre (pages « En savoir plus »)
   Couverture encadrée à gauche, notice/ISBN/prix/bouton à droite ;
   une colonne en mobile. Calé sur la mesure de lecture (§3 bis)
   pour s'aligner avec les paragraphes qui suivent.
   ============================================================ */

.pol-fiche {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem 2rem;
  align-items: start;
  max-width: var(--pol-mesure);
  margin: 0 auto 2.5rem;
}

@media (min-width: 768px) {
  .pol-fiche {
    grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  }
}

/* Couverture encadrée (même vocabulaire que les cartes de la grille).
   .pol-fiche figure... : les figures d'article (§3 bis, 0,1,1) imposent
   sinon leur margin-block 1.8rem — la couverture démarrait 29px plus bas
   que la colonne d'infos (alignement haut cassé, retour Yann).
   En 1 colonne (<768) la couverture prend TOUTE la largeur (retour Yann,
   31 Juillet 2026 : à 220px elle semblait perdue au-dessus du texte) ;
   le cap 220px ne vaut qu'en 2 colonnes. */
.pol-fiche figure.pol-fiche__couv {
  margin: 0;
}

@media (min-width: 768px) {
  .pol-fiche figure.pol-fiche__couv {
    max-width: 220px;
  }
}

.pol-fiche__couv img {
  display: block;
  width: 100%;
  height: auto;
  background-color: var(--pol-blanc);
  border: 1px solid rgba(30, 30, 30, 0.14);
  border-radius: 4px;
}

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

/* --- Zoom des images de contenu (bouton + overlay construits par user.js) ---
   Couvertures de fiches ET figures d'article : le gabarit reste une simple
   figure > img, user.js enveloppe l'img dans un <button> et pose un badge
   « Agrandir » TOUJOURS visible (public senior : l'affordance doit être
   explicite, un curseur ne suffit pas). */

.pol-zoom {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  border-radius: 4px;
}

/* Badge : pilule « voile d'encre » — le vocabulaire des bannières de la
   charte (blanc sur voile sombre #1E1E1E) en format pilule interactif.
   Voile à 70 % + léger flou : lisible (AA) sur toute image, claire,
   foncée ou colorée. Au survol/focus : Rouge Policarpa, comme tout
   l'interactif du site. */
.pol-zoom__badge {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 30px;
  background: rgba(30, 30, 30, 0.7);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  font-family: var(--pol-police-corps, 'Hind', 'Segoe UI', Arial, sans-serif);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  pointer-events: none;
  transition: background-color 0.2s;
}

.pol-zoom:hover .pol-zoom__badge,
.pol-zoom:focus-visible .pol-zoom__badge {
  background: var(--pol-accent-fonce, #D32F2E);
}

/* Overlay plein écran — mêmes codes que la lightbox du module galerie
   (voile sombre, croix blanche en haut à droite, image ombrée). */
.pol-zoom-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.95);
  cursor: zoom-out;
}

.pol-zoom-lightbox[hidden] {
  display: none;
}

.pol-zoom-lb-image {
  max-width: min(92vw, 900px);
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
  background: var(--pol-blanc, #FFFFFF);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.pol-zoom-lb-close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.15s;
}

.pol-zoom-lb-close:hover {
  background: rgba(255, 255, 255, 0.1);
}

.pol-zoom-lb-close:focus-visible {
  outline: 3px solid var(--pol-accent, #F13B3A);
  outline-offset: 2px;
}

/* ============================================================
   13. Sections utilitaires (fonds de la charte)
   → DÉPLACÉ dans css/editor.css (§13) — couche contenu
   partagée site + éditeur JCE (tpl 1.0.32). Chargée AVANT ce
   fichier par index.php : la cascade reste inchangée.
   ============================================================ */

/* ============================================================
   14. Accessibilité
   ============================================================ */

/* Focus clavier visible partout — indispensable pour un public senior */
:focus-visible {
  outline: 2px solid var(--pol-accent);
  outline-offset: 2px;
}

/* Sur les surfaces rouges/sombres, un liseré rouge serait invisible */
.pol-btn:focus-visible,
.pol-social-cercle:focus-visible,
.pol-fond-sombre :focus-visible,
.footer :focus-visible {
  outline-color: var(--pol-beige);
  outline-offset: 3px;
}

/* Respect du réglage système « réduire les animations » */
@media (prefers-reduced-motion: reduce) {
  :root {
    scroll-behavior: auto; /* Cassiopeia force scroll-behavior:smooth */
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   15. === Page d'erreur ===
   Gabarit commun 404/403/500 rendu par error.php du template
   enfant : grand code en Lora, message chaleureux, séparateur
   signature, boutons pilule (§6). Scopé si utile via .error_site
   (classe body posée par error.php, convention Cassiopeia).
   ============================================================ */

.pol-erreur {
  max-width: 640px;
  margin: 0 auto;
  padding: 3rem 1rem 4rem;
  text-align: center;
}

@media (min-width: 768px) {
  .pol-erreur {
    padding: 4.5rem 1rem 6rem;
  }
}

.pol-erreur__label {
  margin-bottom: 0.5em;
}

/* Grand code décoratif (aria-hidden) — même voix que le héros d'accueil */
.pol-erreur__code {
  margin: 0;
  color: var(--pol-texte);
  font-family: var(--pol-police-titres);
  /* clamp : ~96px mobile → 176px desktop, sans palier de breakpoint */
  font-size: clamp(96px, 22vw, 176px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -2px;
}

/* Titre en Lora italique, calibre h2 : ton littéraire plutôt que cri h1 */
.pol-erreur__titre {
  margin: 0.5em 0 0;
  font-size: var(--pol-fs-h2);
  font-weight: 500;
  font-style: italic;
  line-height: 1.3;
}

.pol-erreur .pol-separateur {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.pol-erreur__texte {
  margin: 0 auto 2.5rem;
  max-width: 46ch; /* ligne courte = lecture confortable du message */
  color: var(--pol-gris);
  font-size: var(--pol-fs-corps);
  line-height: var(--pol-lh-corps);
}

.pol-erreur__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 1rem;
}

/* ============================================================
   16. Témoignage « À vous la parole ! » (tpl 1.0.35)
   Bloc repris de l'ancien site (décision Yann, 29 Juillet 2026) :
   module HTML en bas de Bienvenue ET de Contact — carte crème,
   photo des deux sœurs à gauche, invitation à témoigner à droite.
   Une seule colonne sous 700px (le bloc, pas le viewport : layout
   intrinsèquement stable à toutes les largeurs de conteneur).
   ============================================================ */

.pol-temoignage {
  container-type: inline-size;
  max-width: 900px;
  /* Marge haute quasi nulle VOULUE (retour Yann, 06 Août 2026 : les espaces
     VISUELS s'additionnent) : le contexte apporte déjà ~54-56px au-dessus de
     la carte — padding bas de l'article Cassiopeia 24px + marge main-bottom
     16px + retombée du dernier élément (crédit d'épigraphe sur Bienvenue,
     bouton du formulaire sur Contact). 6px de plus = ~60px visuels, le même
     battement que bande→question et boutons→filet mesuré sur l'accueil. */
  margin: 0.375rem auto 3rem;
}

.pol-temoignage__carte {
  display: grid;
  grid-template-columns: minmax(200px, 300px) 1fr;
  gap: 2rem;
  align-items: center;
  padding: 2rem;
  background-color: var(--pol-creme, #FAF9F5);
  border: 1px solid rgba(30, 30, 30, 0.06);
  border-radius: var(--pol-radius-carte, 10px);
  box-shadow: var(--pol-ombre-carte, 0 4px 20px rgba(30, 30, 30, 0.07));
}

@container (max-width: 700px) {
  .pol-temoignage__carte {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 1.5rem;
  }

  .pol-temoignage__photo {
    max-width: 320px;
    margin-inline: auto;
  }
}

.pol-temoignage__photo {
  width: 100%;
  height: auto;
  border-radius: 6px;
}

.pol-temoignage__surtitre {
  margin: 0 0 0.35rem;
  /* rouge assombri : 13px en capitales = petit corps, le rouge charte
     reste sous AA sur la carte crème (arbitrage Yann, 06 Août 2026) */
  color: var(--pol-accent-fonce, #D32F2E);
  font-family: var(--pol-police-micro);
  font-size: var(--pol-fs-petit);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.pol-temoignage h2.pol-temoignage__titre {
  margin: 0 0 1rem;
  font-family: var(--pol-police-titres);
  font-size: var(--pol-fs-h4);
  font-weight: 600;
  line-height: var(--pol-lh-titres);
}

.pol-temoignage__texte p {
  margin: 0 0 0.8em;
}

.pol-temoignage__texte p:last-child {
  margin-bottom: 0;
}