/* ==========================================================================
   LES CARNETS MARRON — Design System
   CSS complémentaire à theme.json : mode sombre, transitions, micro-interactions.
   Philosophie : le site respire. Rien ne clignote, rien ne rebondit.
   Toutes les transitions : 220–350ms, easing doux (jamais de linear).
   ========================================================================== */

/* WooCommerce insère automatiquement une icône "Mon compte" (bloc
   woocommerce/customer-account) ET une icône panier (bloc
   woocommerce/mini-cart) dans la navigation du header dès que le plugin
   est actif — indépendamment du header.html du thème, donc impossible à
   retirer en éditant ce fichier. La première renvoie vers la page "Mon
   compte" native de WooCommerce (/my-account/), qu'on a justement choisi
   de ne pas utiliser (voir mes-carnets-sauvegardes.php : "Mes commandes"
   est intégré à /mes-carnets/ à la place) ; la seconde n'a aucune utilité
   tant que la Boutique n'a pas de vrai bouton "Ajouter au panier" (voir
   boutique.php — prix indicatif + "Bientôt disponible" seulement). Sans
   styles dédiés les deux s'affichaient comme de simples carrés vides. On
   les masque ; le lien "Espace membre" du header suffit pour l'instant. */
.wp-block-woocommerce-customer-account {
  display: none;
}

/* Panier : icone reactivee et stylee (etait masquee faute de style, cf. note ci-dessus). */
.wp-block-woocommerce-mini-cart {
  display: flex;
  align-items: center;
}
.wc-block-mini-cart__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  position: relative;
  color: var(--wp--preset--color--encre);
  transition: color var(--transition-fast);
}
.wc-block-mini-cart__button:hover { color: var(--wp--preset--color--marron); }
.wc-block-mini-cart__icon { width: 18px; height: 18px; }
.wc-block-mini-cart__badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background: var(--wp--preset--color--marron);
  color: #fff;
  font-size: 10px;
  line-height: 1;
  min-width: 15px;
  height: 15px;
  border-radius: 999px;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}
.wc-block-mini-cart__badge:not([style*="display: none"]):not([hidden]) {
  display: flex;
}

:root {
  --radius-sharp: 0px;
  --radius-soft: 2px;
  --radius-rounded: 4px;
  --radius-pill: 999px;

  --shadow-resting: 0 1px 2px rgba(26,22,20,.04), 0 2px 8px rgba(26,22,20,.04);
  --shadow-raised: 0 4px 12px rgba(26,22,20,.06), 0 12px 32px rgba(26,22,20,.08);
  --shadow-floating: 0 8px 24px rgba(26,22,20,.08), 0 24px 64px rgba(26,22,20,.12);

  --transition-fast: 260ms cubic-bezier(.4,0,.2,1);
  --transition-base: 300ms cubic-bezier(.4,0,.2,1);
  --transition-slow: 350ms cubic-bezier(.16,1,.3,1);
}

/* --------------------------------------------------------------------------
   BARRE DE DÉFILEMENT DORÉE — comme dans le prototype (base44) : pas une
   vraie barre de progression en JS, juste la scrollbar native du navigateur
   redessinée fine et sans arrondi, avec le curseur en couleur "or" du design
   system (--wp--preset--color--or) qui vire "marron" au survol. Fonctionne
   nativement sur Chrome/Edge/Safari (::-webkit-scrollbar) ; fallback
   scrollbar-color/-width pour Firefox, qui ne supporte pas les pseudo-
   éléments -webkit mais rendra un résultat proche (fin, mêmes couleurs).
   Globale (pas de sélecteur de page) car c'est ainsi que le prototype
   l'applique : la même scrollbar dorée existe sur toutes les pages.
   -------------------------------------------------------------------------- */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--wp--preset--color--or) var(--wp--preset--color--creme);
}
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--wp--preset--color--creme);
}
::-webkit-scrollbar-thumb {
  background: var(--wp--preset--color--or);
  border-radius: 0;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--wp--preset--color--marron);
}

/* --------------------------------------------------------------------------
   CORRECTIF SYSTÉMIQUE — Réglages globaux force tous les <a> en Manrope
   (règle "a:where(:not(.wp-element-button))" générée par le Site Editor).
   Cela casse l'héritage de la police display sur tout titre de carte
   enveloppé dans un lien (Genre, Œuvre, Essai, Auteur, Ressource, Concept).
   On restaure l'héritage avec une règle plus spécifique que le :where(),
   sans dépendre de l'ordre de chargement des feuilles de style.
   -------------------------------------------------------------------------- */
a:not(.wp-element-button) {
  font-family: inherit;
}

/* --------------------------------------------------------------------------
   ACCENT « MARRON » — italique + couleur marron sur le mot final du nom du
   site (logo du header, H1 du hero d'accueil), comme dans le prototype.
   -------------------------------------------------------------------------- */
.lcm-marron-accent {
  font-style: italic;
  color: var(--wp--preset--color--marron);
}

/* --------------------------------------------------------------------------
   HEADER STICKY — corrige le wrapper wp-block-template-part généré par WP
   autour du header : appliquer "position: sticky" directement sur .lcm-header
   ne fonctionne pas car son parent immédiat (le wrapper <header
   class="wp-block-template-part"><meta charset="utf-8">) a exactement la même hauteur que lui,
   ce qui laisse zéro marge de manœuvre au sticky (il se décolle au premier
   pixel de scroll). On rend donc le WRAPPER sticky à la place : son propre
   parent (.wp-site-blocks) couvre toute la hauteur de la page.
   -------------------------------------------------------------------------- */
header.wp-block-template-part:has(> .lcm-header) {
  position: sticky;
  top: 0;
  z-index: 50;
}
.lcm-header.is-position-sticky {
  position: static !important;
  top: auto !important;
}

/* Rangée titre + nav + bouton menu — grille à 3 colonnes plutôt que
   "space-between" : les onglets sont ainsi vraiment centrés dans le header
   au lieu d'être poussés vers le centre de l'espace restant (donc décalés
   par la largeur du titre). display:grid en !important prend le pas sur
   is-layout-flex généré par les réglages de bloc ("justifyContent":
   "space-between" dans header.html, conservé pour le fallback no-CSS). */
.lcm-header-row {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 24px;
}
.lcm-header-row > .wp-block-site-title {
  flex-shrink: 0;
  white-space: nowrap;
  justify-self: start;
}
@media (max-width: 600px) {
  .lcm-header-row > .wp-block-site-title,
  .lcm-header-row > .wp-block-site-title a {
    font-size: 1.3rem !important;
    white-space: normal;
    line-height: 1.15;
  }
}
.lcm-header-nav-wrap {
  justify-self: center;
}
.lcm-header-row .wp-block-navigation {
  flex-wrap: nowrap;
}
.lcm-header-row .wp-block-navigation__container {
  flex-wrap: nowrap;
  white-space: nowrap;
}

/* Liens du header (nom du site + onglets) — pas de soulignement au survol,
   un changement de couleur suffit et reste plus sobre. Règle explicite
   plutôt que de compter sur le style de lien global (le bloc Navigation de
   WordPress force color:inherit avec une spécificité qui prend le dessus
   sur le style de lien global de theme.json). */
.lcm-header-row a:not(.lcm-btn-subscribe) {
  text-decoration: none !important;
  transition: color var(--transition-fast);
}
.lcm-header-row a:not(.lcm-btn-subscribe):hover {
  color: var(--wp--preset--color--marron) !important;
  text-decoration: none !important;
}

/* --------------------------------------------------------------------------
   RECHERCHE + S'ABONNER — groupe ancré à droite, indépendant de la grille
   titre/nav pour ne jamais désaxer le centrage de la nav (voir plus haut :
   la nav reste centrée sur 1fr auto 1fr, ce groupe flotte par-dessus).
   -------------------------------------------------------------------------- */
.lcm-header-actions {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 20px;
}
.lcm-header-row { position: relative; }

.lcm-search-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--wp--preset--color--encre);
  transition: color var(--transition-fast);
}
.lcm-search-toggle:hover { color: var(--wp--preset--color--marron); }
.lcm-search-toggle svg { width: 18px; height: 18px; }

.lcm-header-search {
  position: absolute;
  top: calc(100% + 1px);
  right: 24px;
  width: 320px;
  max-width: calc(100vw - 48px);
  background: var(--wp--preset--color--papier);
  border: 1px solid var(--wp--preset--color--pierre);
  border-top: none;
  padding: 16px;
  display: flex;
  gap: 10px;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--transition-base), transform var(--transition-base), visibility 0s linear var(--transition-base);
}
.lcm-header-search.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity var(--transition-base), transform var(--transition-base);
}
.lcm-header-search input {
  flex: 1;
  border: none;
  border-bottom: 1px solid var(--wp--preset--color--pierre);
  background: transparent;
  font-family: var(--wp--preset--font-family--corps);
  font-size: 1rem;
  padding: 4px 2px;
}
.lcm-header-search input:focus { outline: none; border-bottom-color: var(--wp--preset--color--marron); }
.lcm-header-search button[type="submit"] {
  border: none;
  background: transparent;
  cursor: pointer;
  opacity: .6;
  transition: opacity var(--transition-fast);
}
.lcm-header-search button[type="submit"]:hover { opacity: 1; }

.lcm-btn-subscribe {
  display: inline-flex;
  align-items: center;
  background: var(--wp--preset--color--encre);
  color: var(--wp--preset--color--papier);
  border: 1px solid var(--wp--preset--color--encre);
  border-radius: var(--radius-sharp);
  padding: 9px 20px;
  font-family: var(--wp--preset--font-family--interface);
  font-size: .8rem;
  text-decoration: none !important;
  white-space: nowrap;
}
.lcm-btn-subscribe:hover {
  background: var(--wp--preset--color--marron);
  border-color: var(--wp--preset--color--marron);
  color: var(--wp--preset--color--papier) !important;
}

@media (max-width: 1100px) {
  .lcm-header-actions { right: 16px; gap: 12px; }
  .lcm-btn-subscribe { padding: 8px 14px; font-size: .75rem; }
}
@media (max-width: 900px) {
  .lcm-btn-subscribe { display: none; }
}

/* Sous 600px, le bloc Navigation natif de WordPress bascule tout seul en
   bouton "sandwich" (voir .wp-block-navigation__responsive-container-open,
   régle cœur WP à min-width:600px). Par défaut ce bouton reste dans la
   colonne centrale de la grille du header, donc loin de la loupe — on
   sort .lcm-header-nav-wrap de la grille pour l'ancrer juste à gauche de
   l'icône recherche (le bouton seul, une fois le menu replié, ne mesure
   que sa propre taille : ancrer le wrapper revient à ancrer le bouton).
   Le <nav> WordPress a lui-même "position:relative" (pour son propre
   système d'ancrage), donc ancrer le bouton directement n'aurait fait que
   le recoller au centre du <nav> — c'est bien le wrapper qu'il faut
   déplacer.
   IMPORTANT : centrage vertical SANS "transform". Le panneau plein écran
   du menu ouvert (.wp-block-navigation__responsive-container, position:
   fixed) est un DESCENDANT de ce wrapper — un "transform" sur un ancêtre
   redéfinit le containing block d'un élément "position:fixed" et le
   coince dans la petite boîte de l'ancêtre au lieu de couvrir l'écran
   (c'est ce qui rendait le menu ouvert invisible). "top / bottom: 0" +
   "margin: auto 0" centre verticalement sans passer par transform. */
@media (max-width: 600px) {
  .lcm-header-nav-wrap {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 56px;
    margin-top: auto;
    margin-bottom: auto;
  }
}


/* --------------------------------------------------------------------------
   TRANSITIONS GLOBALES — tout élément interactif respire
   -------------------------------------------------------------------------- */
a, button, .gb-button, .lcm-card, .wp-block-button__link, input, textarea, select {
  transition: color var(--transition-base), background-color var(--transition-base),
              border-color var(--transition-base), box-shadow var(--transition-base),
              transform var(--transition-slow), opacity var(--transition-base);
}

/* Focus visible sobre — accessibilité sans casser l'esthétique */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--wp--preset--color--or);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   CARTES (Œuvre / Auteur / Concept / Ressource) — lift au survol, jamais de zoom brutal
   -------------------------------------------------------------------------- */
.lcm-card {
  background: var(--wp--preset--color--blanc, #fff);
  border: 1px solid var(--wp--preset--color--pierre);
  border-radius: var(--radius-sharp);
  box-shadow: var(--shadow-resting);
  overflow: hidden;
}
.lcm-card:hover {
  box-shadow: var(--shadow-raised);
  transform: translateY(-4px);
  border-color: var(--wp--preset--color--marron);
}
.lcm-card img {
  transition: transform var(--transition-slow);
}
.lcm-card:hover img { transform: scale(1.02); }

/* Cartes "catalogue" (Studio, Boutique, Événements) : le prototype utilise un
   survol couleur-seule (bordure + titre en marron), sans le soulèvement +
   ombre du reste du site. Sélecteur combiné pour l'emporter sur .lcm-card:hover
   sans toucher à la règle sitewide (Racines, Genres, Ressources...). */
.lcm-card.lcm-card--catalogue:hover {
  transform: none;
  box-shadow: var(--shadow-resting);
  border-color: var(--wp--preset--color--marron);
}
/* Repère visuel quand on arrive sur une carte via une ancre (ex. lien
   Ressources d'un Parcours de lecture pointant vers un produit précis). */
.lcm-card.lcm-card--catalogue:target {
  border-color: var(--wp--preset--color--marron);
  box-shadow: 0 0 0 3px rgba(180, 84, 61, .15);
}
.lcm-card--catalogue__title {
  transition: color var(--transition-fast);
}
.lcm-card.lcm-card--catalogue:hover .lcm-card--catalogue__title {
  color: var(--wp--preset--color--marron);
}

/* Visuel produit (Boutique) : bloc clair à motif diagonal discret, façon
   prototype, avec l'initiale du produit en grand quand aucune image n'est
   définie. */
.lcm-produit-visuel {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin-bottom: 20px;
  background-color: var(--wp--preset--color--creme);
  background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(180, 84, 61, 0.03) 35px, rgba(180, 84, 61, 0.03) 70px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lcm-produit-visuel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lcm-produit-visuel__initiale {
  font-family: var(--wp--preset--font-family--display);
  font-style: italic;
  font-size: 4.5rem;
  color: var(--wp--preset--color--marron);
  opacity: .18;
}
/* Variante "aplat abstrait" (voir boutique.php) : le composant .lcm-fake-cover
   est réutilisé tel quel, seule sa taille/position sont adaptées pour
   remplir le cadre 4/3 de .lcm-produit-visuel (déjà arrondi + overflow:
   hidden côté parent, donc pas besoin de son propre radius/ombre/hover).
   Sélecteur à deux classes (.lcm-produit-visuel .lcm-fake-cover) pour
   l'emporter sur la déclaration de base .lcm-fake-cover (aspect-ratio 3/4,
   position: relative) malgré son ordre plus tardif dans la feuille. */
.lcm-produit-visuel .lcm-fake-cover {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  border-radius: 0;
  box-shadow: none;
}
.lcm-produit-visuel .lcm-fake-cover:hover {
  transform: none;
  box-shadow: none;
}
.lcm-produit-visuel .lcm-fake-cover__title {
  font-size: clamp(1rem, 7cqw, 1.5rem);
}
/* Produit vedette de la Boutique (façon "Maison d'édition", voir
   boutique.php) : réutilise .lcm-split, mais son visuel doit être un
   conteneur positionné pour ancrer le badge "À paraître" et l'aplat
   abstrait, tous deux en position:absolute — .lcm-split__visual de base
   n'a pas besoin de ça pour ses autres usages (image seule), donc on
   l'ajoute ici plutôt que sur la règle partagée. */
.lcm-boutique-vedette__visual {
	position: relative;
}
.lcm-boutique-vedette__visual img {
	position: relative;
	z-index: 0;
}

/* Mention "À paraître" — badge superposé en haut à droite du visuel,
   repris du prototype (produit annoncé mais pas encore disponible). */
.lcm-produit-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--wp--preset--color--creme);
  color: var(--wp--preset--color--marron);
  font-family: var(--wp--preset--font-family--interface);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
}

/* Grille Boutique : 3 colonnes sur desktop, 2 dès la tablette (≤900px) —
   à 3 colonnes fixes, les cartes devenaient illisibles sur mobile (titre
   du produit en surimpression collé au badge "À paraître", texte tassé).
   Colonnes définies ici plutôt qu'en style inline (voir boutique.php) pour
   pouvoir varier par média-requête. */
.lcm-boutique-grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
@media (max-width: 900px) {
  .lcm-boutique-grille {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  .lcm-card--catalogue {
    padding: 20px !important;
  }
  .lcm-produit-visuel {
    margin: -20px -20px 16px !important;
  }
  .lcm-card--catalogue__excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}
@media (max-width: 600px) {
  /* Sur telephone, 2 colonnes rendaient chaque carte trop etroite : le
     prix et "Ajouter au panier" n'avaient plus la place de tenir sur une
     ligne (le bouton passait sur 2 lignes). Une carte pleine largeur par
     ligne redonne assez d'air pour les deux tenir cote a cote. */
  .lcm-boutique-grille {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .lcm-boutique-cta {
    padding: 11px 20px !important;
    font-size: .8rem !important;
    white-space: nowrap;
  }
  /* Plafond a 6 objets visibles (voir boutique.php $lcm_boutique_cap) :
     au-dela, 1 carte par ligne rendrait le catalogue interminable a faire
     defiler. ~6 premiers gardes, le reste masque jusqu'au clic sur
     "Afficher X objets de plus" (qui retire .is-capped en JS). */
  .lcm-boutique-grille.is-capped > .lcm-card--catalogue:nth-child(n+7) {
    display: none;
  }
  .lcm-boutique-grille.is-capped ~ .lcm-boutique-plus {
    display: inline-block;
  }
}

/* "Mon espace lecteur" — titres plus compacts sur mobile (voir
   mes-carnets-sauvegardes.php) : le h1 et les h2 de section reprenaient la
   taille desktop pleine largeur, prenant beaucoup de place à l'écran sur un
   téléphone. */
@media (max-width: 600px) {
  /* Spécificité renforcée (.wp-block-post-content en préfixe) pour
     l'emporter sur la règle générale des titres de contenu (même poids
     !important, mais définie plus loin dans la feuille — voir
     .wp-block-post-content h1/h2 plus bas). */
  .wp-block-post-content h1.lcm-espace-h1 {
    font-size: 1.9rem !important;
    line-height: 1.15 !important;
  }
  .wp-block-post-content h2.lcm-espace-h2 {
    font-size: 1.3rem !important;
  }
}

/* Carte entièrement cliquable sans lien imbriqué invalide (ex. carte
   Ressource : la carte mène à la fiche, mais garde un bouton "Télécharger"
   cliquable séparément quand un fichier existe). Le lien invisible occupe
   toute la carte (z-index bas) ; tout lien réel à l'intérieur (le bouton
   Télécharger) passe au-dessus avec z-index:2 inline pour rester cliquable
   indépendamment. */
.lcm-card-stretched-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.lcm-card__eyebrow {
  font-family: var(--wp--preset--font-family--interface);
  font-size: 0.7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--marron);
  opacity: .85;
}

/* --------------------------------------------------------------------------
   BUG CORRIGÉ — une grille ".gb-grid" (display:grid) qui contient une
   requête (wp:query > wp:post-template) n'a qu'UN SEUL enfant réel : le
   <ul class="wp-block-post-template"> généré par WordPress. Les articles
   (<li>) restent alors empilés en liste verticale à l'intérieur de cette
   unique cellule de grille, au lieu de devenir chacun une cellule. On
   neutralise ce wrapper avec "display:contents" pour que chaque <li>
   devienne un vrai enfant direct de la grille — corrige la Bibliothèque
   (colonne unique) et sécurise toutes les grilles de requêtes du site.
   -------------------------------------------------------------------------- */
.gb-grid > .wp-block-post-template,
.lcm-medaillon-grid > .wp-block-post-template,
.lcm-explorer-grid > .wp-block-post-template {
  display: contents;
}

/* BUG CORRIGÉ — conséquence du "display:contents" ci-dessus : le <ul> qui
   porte la classe "is-layout-flow" ne génère plus de boîte, mais WordPress
   avait déjà posé sur CHAQUE <li> (sauf le tout premier de la requête,
   via le sélecteur générique "> * + *") une marge de espacement de bloc
   ("--wp--style--block-gap", ~32px) pensée pour un empilement vertical à
   une seule colonne. Une fois les <li> devenus des cellules de grille à
   part entière, cette marge s'ajoute par-dessus le "gap" de la grille —
   mais seulement pour les éléments qui ne sont pas premiers dans l'ordre
   du DOM, pas pour les premiers de chaque LIGNE visuelle. Résultat : la
   toute première carte de la grille (ex. Tomi Adeyemi, De sang et de rage)
   se retrouvait sans cette marge donc plus haute que ses voisines de
   ligne. Le "gap" de la grille gère déjà tout l'espacement : on neutralise
   la marge héritée sur les <li> eux-mêmes. */
.gb-grid > .wp-block-post-template.is-layout-flow > *,
.lcm-medaillon-grid > .wp-block-post-template.is-layout-flow > *,
.lcm-explorer-grid > .wp-block-post-template.is-layout-flow > * {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

/* --------------------------------------------------------------------------
   NUMÉRAL D'INDEX — grand chiffre pâle utilisé comme repère cartographique
   sur les cartes de genre ("01", "02"…). Volontairement distinct de
   l'eyebrow : c'est un élément de composition, pas un label.
   -------------------------------------------------------------------------- */
.lcm-index-number {
  display: block;
  /* margin:0 explicite : c'est un <p>, qui porte sinon la marge par
     défaut du navigateur (1em en haut ET en bas) — ce qui créait un
     grand vide entre le bord de la carte et le chiffre (espace non
     voulu, juste un artefact du tag <p>). Le titre en dessous garde son
     propre espacement (margin-top:10px en style inline). */
  margin: 0;
  font-family: var(--wp--preset--font-family--display);
  font-weight: 300;
  font-size: var(--lcm-idx-fs, clamp(1.7rem, 1.4rem + 1.2vw, 2.2rem));
  line-height: 1;
  color: color-mix(in srgb, var(--wp--preset--color--marron) 20%, transparent);
}

/* --------------------------------------------------------------------------
   BOUTONS — variantes primaire / fantôme / lien-souligné
   -------------------------------------------------------------------------- */
.lcm-btn-ghost {
  display: inline-block;
  background: transparent;
  border: 1px solid var(--wp--preset--color--encre);
  color: var(--wp--preset--color--encre);
  border-radius: var(--radius-sharp);
  padding: 16px 32px;
  font-family: var(--wp--preset--font-family--interface);
  font-size: .875rem;
  letter-spacing: normal;
  text-transform: none;
  box-shadow: none;
}
.lcm-btn-ghost:hover {
  background: var(--wp--preset--color--encre);
  color: var(--wp--preset--color--papier);
}

.lcm-btn-solid {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--wp--preset--color--encre);
  border: 1px solid var(--wp--preset--color--encre);
  color: var(--wp--preset--color--papier);
  border-radius: var(--radius-sharp);
  padding: 16px 32px;
  font-family: var(--wp--preset--font-family--interface);
  font-size: .875rem;
  letter-spacing: normal;
  text-transform: none;
  text-decoration: none;
  box-shadow: none;
}
.lcm-btn-solid:hover {
  background: var(--wp--preset--color--marron);
  border-color: var(--wp--preset--color--marron);
  color: var(--wp--preset--color--papier);
}

/* --------------------------------------------------------------------------
   HERO ACCUEIL — image de fond thématique + voile de lisibilité
   -------------------------------------------------------------------------- */
.lcm-hero-bg {
  position: relative;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  isolation: isolate;
  min-height: 74vh;
  display: flex;
  align-items: center;
  padding-block: var(--wp--preset--spacing--8, 128px);
  box-sizing: border-box;
}
@media (max-width: 782px) {
  .lcm-hero-bg { min-height: 66vh; padding-block: var(--wp--preset--spacing--6, 64px); }
}

/* Contenu du hero recentré à la même largeur que le reste du site — le fond
   (.lcm-hero-bg), lui, reste pleine largeur grâce à .lcm-band-full. */
.lcm-hero-inner {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

/* Fade-up au chargement (hero) — contrairement à .lcm-timeline__item qui
   s'anime au scroll (animation-timeline: view()), ceci joue une seule fois
   au chargement de la page, adapté à un élément déjà visible au-dessus du pli. */
.lcm-fade-up-load {
  opacity: 0;
  transform: translateY(16px);
  animation: lcm-fade-up var(--transition-slow) 120ms forwards;
}
@media (prefers-reduced-motion: reduce) {
  .lcm-fade-up-load { opacity: 1; transform: none; animation: none; }
}
/* Voile de lisibilité : fort là où le texte se trouve (le texte est toujours
   ancré à gauche dans .lcm-hero-bg__content), dégressif vers la droite où
   l'image respire. Un dégradé linéaire ancré à gauche garantit un contraste
   texte noir / fond clair quelle que soit l'image uploadée par l'utilisatrice
   (contrairement à un dégradé radial calé sur les proportions d'une seule
   image, qui se désaligne dès que l'image change). Un voile sombre léger est
   ajouté par-dessus pour assurer un plancher de contraste même sur une image
   déjà très claire. */
.lcm-hero-bg__overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(100deg, rgba(247,243,236,.95) 0%, rgba(247,243,236,.9) 28%, rgba(247,243,236,.62) 50%, rgba(247,243,236,.22) 70%, rgba(247,243,236,.08) 100%),
    rgba(20,17,15,.08);
  pointer-events: none;
}
@media (max-width: 782px) {
  /* Sur mobile le contenu occupe toute la largeur : voile uniforme plutôt
     qu'un dégradé qui laisserait la moitié droite du texte sans protection. */
  .lcm-hero-bg__overlay {
    background:
      linear-gradient(180deg, rgba(247,243,236,.92) 0%, rgba(247,243,236,.86) 60%, rgba(247,243,236,.7) 100%),
      rgba(20,17,15,.08);
  }
}
.lcm-hero-bg__content {
  position: relative;
  z-index: 1;
  max-width: 640px;
}
.lcm-hero-title {
  line-height: 1.05;
}
.lcm-hero-title .lcm-marron-accent {
  display: block;
}
/* Centré sur toute la largeur du hero (pas seulement sous le bloc de texte,
   qui lui est ancré à gauche) — positionné en absolu par rapport à
   .lcm-hero-bg plutôt que dans le flux du texte, avec un point qui pulse
   doucement : signale qu'il y a du contenu plus bas sans être un gadget
   qui distrait. */
.lcm-hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 40px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  font-family: var(--wp--preset--font-family--interface);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .55;
  z-index: 1;
}
@media (max-width: 782px) {
  /* Masqué plutôt que repositionné : sur mobile l'espace vertical est trop
     serré entre le sous-titre et les boutons pour que "Défiler" respire —
     et l'indication est de toute façon moins utile au pouce qu'à la souris. */
  .lcm-hero-scroll { display: none; }
}
.lcm-hero-scroll::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: lcm-scroll-pulse 2.2s ease-in-out infinite;
}
@keyframes lcm-scroll-pulse {
  0%, 100% { transform: scale(1); opacity: .4; }
  50% { transform: scale(1.7); opacity: .9; }
}
@media (prefers-reduced-motion: reduce) {
  .lcm-hero-scroll::after { animation: none; }
}

.lcm-link-underline {
  position: relative;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: background-size var(--transition-base);
}
.lcm-link-underline:hover { background-size: 100% 1px; }

/* --------------------------------------------------------------------------
   NAVIGATION EXPLORER — filtres qui invitent à flâner, pas à trier vite
   -------------------------------------------------------------------------- */
.lcm-explorer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.lcm-explorer-nav__pill {
  border: 1px solid var(--wp--preset--color--pierre);
  border-radius: var(--radius-pill);
  padding: 8px 18px;
  font-family: var(--wp--preset--font-family--interface);
  font-size: .8rem;
  cursor: pointer;
  background: transparent;
}
.lcm-explorer-nav__pill:hover,
.lcm-explorer-nav__pill.is-active {
  background: var(--wp--preset--color--marron);
  border-color: var(--wp--preset--color--marron);
  color: var(--wp--preset--color--papier);
}

/* --------------------------------------------------------------------------
   ESSAIS LIÉS (fiche Œuvre) — bande crème, liste simple séparée par des
   filets fins plutôt qu'une grille de cartes : ce sont des lectures
   complémentaires, pas des objets au même niveau que le livre affiché.
   -------------------------------------------------------------------------- */
.lcm-related-essais {
	background: var(--wp--preset--color--creme);
}
.lcm-related-essais__list {
	max-width: 680px;
	margin-top: 8px;
}
.lcm-related-essais__item {
	padding-block: 32px;
	border-bottom: 1px solid var(--wp--preset--color--pierre);
}
.lcm-related-essais__item:last-child {
	border-bottom: none;
}

/* --------------------------------------------------------------------------
   FICHE ESSAI — pied de page façon prototype /article/... : CONCEPTS LIÉS
   (pastilles centrées sur bande crème), QUE LIRE ENSUITE (grille 2 col,
   filet séparateur), puis CTA newsletter sur bande sombre.
   -------------------------------------------------------------------------- */

/* Chapeau (sous-titre italique, façon prototype) sous le H1 de l'essai. */
.lcm-essai-chapeau {
	margin-top: 12px;
	font-family: var(--wp--preset--font-family--corps);
	font-size: 1.15rem;
	font-style: italic;
	opacity: .65;
}

/* Signature auteur enrichie (médaillon + nom + pays), façon prototype —
   remplace la ligne texte simple "● Auteur · Date" pour les essais qui ont
   un auteur associé. Réutilise la même palette de teintes que les portraits
   Auteur (lcm_fake_cover_teinte) pour rester cohérent d'une page à l'autre. */
.lcm-essai-byline {
	margin-top: 24px;
	display: flex;
	align-items: center;
	gap: 12px;
}
.lcm-essai-byline__avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	flex-shrink: 0;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}
.lcm-essai-byline__avatar-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.lcm-essai-byline__monogram {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.1rem;
	color: var(--wp--preset--color--papier);
}
.lcm-essai-byline__meta {
	display: flex;
	flex-direction: column;
	line-height: 1.35;
}
.lcm-essai-byline__name {
	font-weight: 600;
	color: var(--wp--preset--color--encre);
	text-decoration: none;
}
.lcm-essai-byline__name:hover {
	color: var(--wp--preset--color--marron);
}
.lcm-essai-byline__pays {
	font-family: var(--wp--preset--font-family--interface);
	font-size: .7rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	opacity: .55;
	margin-top: 2px;
}

/* Bouton "Sauvegarder" — fiche Carnet (façon prototype) et pages compte
   (Connexion, Mes carnets). Contour discret par défaut ; une fois le carnet
   sauvegardé (.is-active), le fond se remplit et l'icône passe en plein,
   pour que l'état soit lisible en un coup d'œil sans dépendre de la seule
   couleur. */
.lcm-essai-actions {
	margin-top: 20px;
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 12px;
}
.lcm-btn-sauvegarder {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	border: 1px solid var(--wp--preset--color--encre);
	border-radius: var(--radius-sharp);
	background: transparent;
	color: var(--wp--preset--color--encre);
	font-family: var(--wp--preset--font-family--interface);
	font-size: .8rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, opacity .2s ease;
}
.lcm-btn-sauvegarder:hover {
	background: var(--wp--preset--color--encre);
	color: var(--wp--preset--color--papier);
}
.lcm-btn-sauvegarder.is-active {
	background: var(--wp--preset--color--marron);
	border-color: var(--wp--preset--color--marron);
	color: var(--wp--preset--color--papier);
}
.lcm-btn-sauvegarder.is-loading {
	opacity: .55;
	pointer-events: none;
}
.lcm-btn-sauvegarder__icone {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
}
.lcm-btn-sauvegarder.is-active .lcm-btn-sauvegarder__icone {
	fill: currentColor;
}

/* Bouton + panneau "Ajouter à une liste" — même bouton contour que
   "Sauvegarder", mais ouvre un petit panneau flottant (cases à cocher des
   listes existantes + création rapide) plutôt que de bascule directement.
   Voir lcm_bouton_liste() dans functions.php et js/listes.js. */
.lcm-liste-widget {
	position: relative;
}
.lcm-liste-panel {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	z-index: 20;
	min-width: 260px;
	max-width: 320px;
	background: var(--wp--preset--color--papier);
	border: 1px solid var(--wp--preset--color--pierre);
	border-radius: var(--radius-sharp);
	box-shadow: var(--shadow-raised);
	padding: 16px;
}
.lcm-liste-panel__chargement {
	margin: 0;
	font-size: .82rem;
	opacity: .6;
}
.lcm-liste-panel__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.lcm-liste-panel__liste label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: .85rem;
	cursor: pointer;
}
.lcm-liste-panel__liste input[type="checkbox"] {
	width: auto;
}
.lcm-liste-panel__nouvelle {
	display: flex;
	gap: 8px;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--wp--preset--color--pierre);
}
.lcm-liste-panel__nouvelle input[type="text"] {
	flex: 1;
	min-width: 0;
	padding: 8px 10px;
	border: 1px solid var(--wp--preset--color--pierre);
	border-radius: var(--radius-sharp);
	font-size: .85rem;
	font-family: var(--wp--preset--font-family--corps);
}
.lcm-liste-panel__nouvelle button {
	padding: 8px 14px;
	border: 1px solid var(--wp--preset--color--encre);
	border-radius: var(--radius-sharp);
	background: transparent;
	color: var(--wp--preset--color--encre);
	font-family: var(--wp--preset--font-family--interface);
	font-size: .78rem;
	letter-spacing: .03em;
	cursor: pointer;
	white-space: nowrap;
}
.lcm-liste-panel__nouvelle button:hover {
	background: var(--wp--preset--color--encre);
	color: var(--wp--preset--color--papier);
}
.lcm-liste-panel__message {
	margin: 10px 0 0;
	font-size: .78rem;
	color: #b23a2d;
}

/* Listes de lecture — présentation "dossier" repliée par défaut (voir
   mes-carnets-sauvegardes.php) : nom + pastille du nombre d'éléments,
   contenu masqué tant qu'on n'a pas cliqué. Pensé pour rester lisible
   même quand une liste grossit beaucoup avec le temps. */
.lcm-liste-dossier {
	padding: 22px 28px;
}
.lcm-liste-dossier__entete {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}
.lcm-liste-dossier__toggle {
	display: flex;
	align-items: center;
	gap: 12px;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	text-align: left;
	min-width: 0;
	flex: 1 1 auto;
}
.lcm-liste-dossier__icone {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	fill: none;
	stroke: var(--wp--preset--color--marron);
	stroke-width: 1.4;
	opacity: .8;
}
.lcm-liste-dossier__nom {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--base);
	color: var(--wp--preset--color--encre);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.lcm-liste-dossier__count {
	flex: 0 0 auto;
	min-width: 24px;
	height: 24px;
	padding: 0 8px;
	border-radius: var(--radius-pill);
	background: color-mix(in srgb, var(--wp--preset--color--marron) 10%, var(--wp--preset--color--creme));
	color: var(--wp--preset--color--marron);
	font-family: var(--wp--preset--font-family--interface);
	font-size: .75rem;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.lcm-liste-dossier__chevron {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	opacity: .6;
	transition: transform var(--transition-fast);
}
.lcm-liste-dossier__toggle[aria-expanded="true"] .lcm-liste-dossier__chevron {
	transform: rotate(180deg);
}
.lcm-liste-dossier__contenu {
	margin-top: 20px;
	padding-top: 4px;
}

/* Numéros de La Lettre dans Mon espace lecteur — cette liste n'avait aucun
   retour visuel au survol (contrairement aux autres cartes du tableau de
   bord) : léger fond + titre en marron, cohérent avec le reste du site. */
.lcm-espace-lettre-row {
	transition: background-color var(--transition-fast);
}
.lcm-espace-lettre-row:hover {
	background: color-mix(in srgb, var(--wp--preset--color--marron) 6%, transparent);
}
.lcm-espace-lettre-row__titre {
	transition: color var(--transition-fast);
}
.lcm-espace-lettre-row:hover .lcm-espace-lettre-row__titre {
	color: var(--wp--preset--color--marron);
}

/* Repli des numéros de La Lettre au-delà des 2 derniers, dans Mon espace
   lecteur — même logique que la page publique /la-lettre/ (<details>
   natif), avec le style "dossier" clair propre à cette page. */
.lcm-espace-lettres-plus__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 12px;
	margin: 0 -12px;
	cursor: pointer;
	list-style: none;
	border-radius: var(--radius-sharp);
	font-family: var(--wp--preset--font-family--interface);
	font-size: .85rem;
	color: var(--wp--preset--color--marron);
	transition: background-color var(--transition-fast);
}
.lcm-espace-lettres-plus__summary:hover {
	background: color-mix(in srgb, var(--wp--preset--color--marron) 6%, transparent);
}
.lcm-espace-lettres-plus__summary::-webkit-details-marker { display: none; }
.lcm-espace-lettres-plus__chevron {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	opacity: .7;
	transition: transform var(--transition-fast);
}
.lcm-espace-lettres-plus[open] .lcm-espace-lettres-plus__chevron {
	transform: rotate(180deg);
}

@media (max-width: 600px) {
	.lcm-liste-dossier {
		padding: 16px 18px;
	}
	.lcm-liste-dossier__nom {
		font-size: .95rem;
	}
}

/* Lecture plus confortable du corps de l'essai, façon prototype : premier
   paragraphe traité comme un chapô (italique, plus grand, aéré), puis lettrine
   sur le tout premier paragraphe "normal" qui suit. Scopé à .lcm-essai-body
   pour ne toucher aucune autre fiche (Œuvre/Auteur/Tradition...) qui partage
   le même bloc post-content générique. */
.lcm-essai-body .wp-block-post-content > p:first-of-type {
	font-family: var(--wp--preset--font-family--corps);
	font-style: italic;
	font-size: 1.2rem;
	line-height: 1.85;
	opacity: .85;
	margin: 8px 0 32px;
}
.lcm-essai-body .wp-block-post-content > p:nth-of-type(2)::first-letter {
	font-family: var(--wp--preset--font-family--display);
	font-size: 3.4rem;
	line-height: .78;
	float: left;
	padding-right: 10px;
	padding-top: 4px;
	color: var(--wp--preset--color--marron);
}

/* Section "RÉFÉRENCES" en pied de fiche Essai, façon prototype — chaque
   entrée bibliographique porte un filet vertical, comme les citations. */
.lcm-essai-references {
	margin-top: 40px;
	padding-top: 32px;
	border-top: 1px solid var(--wp--preset--color--pierre);
}
.lcm-essai-references__list {
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.lcm-essai-references__item {
	padding-left: 16px;
	border-left: 2px solid var(--wp--preset--color--pierre);
	font-size: .95rem;
	line-height: 1.65;
	opacity: .8;
}

.lcm-essai-concepts {
	background: var(--wp--preset--color--creme);
}
.lcm-essai-concepts__pills {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: 20px;
}
.lcm-concept-pill {
	background: var(--wp--preset--color--papier);
	border: 1px solid var(--wp--preset--color--pierre);
	border-radius: var(--radius-rounded);
	padding: 10px 20px;
	font-family: var(--wp--preset--font-family--interface);
	font-size: 0.9rem;
	color: var(--wp--preset--color--encre);
	text-decoration: none;
	transition: border-color var(--transition-base), color var(--transition-base);
}
.lcm-concept-pill:hover {
	border-color: var(--wp--preset--color--marron);
	color: var(--wp--preset--color--marron);
}
.lcm-concept-pill--filtre {
	cursor: pointer;
	font: inherit;
}
.lcm-concept-pill--active {
	background: var(--wp--preset--color--marron);
	border-color: var(--wp--preset--color--marron);
	color: var(--wp--preset--color--papier);
}
.lcm-concept-pill--active:hover {
	color: var(--wp--preset--color--papier);
}

/* Onglets de filtre de la Boutique éditoriale — texte souligné façon
   prototype (plutôt que des pastilles pleines), rangée avec un trait de
   séparation sous l'ensemble et un soulignement qui se déplace sur l'onglet
   actif. */
.lcm-boutique-tabs {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	gap: 28px;
	border-bottom: 1px solid var(--wp--preset--color--pierre);
	/* Bande défilante horizontale plutôt qu'un retour à la ligne : avec 7
	   catégories, flex-wrap faisait retomber les onglets sur 2-3 lignes sur
	   mobile — pas très propre. On scrolle latéralement à la place, comme
	   les onglets de filtre qu'on trouve ailleurs sur le web ; la barre de
	   défilement est masquée mais le geste reste disponible. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.lcm-boutique-tabs::-webkit-scrollbar {
	display: none;
}
.lcm-boutique-tab {
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	padding: 0 0 14px;
	font-family: var(--wp--preset--font-family--interface);
	font-size: 0.9rem;
	color: var(--wp--preset--color--encre);
	opacity: .6;
	cursor: pointer;
	white-space: nowrap;
	flex-shrink: 0;
	transition: color var(--transition-base), opacity var(--transition-base), border-color var(--transition-base);
}
.lcm-boutique-tab:hover {
	opacity: 1;
	color: var(--wp--preset--color--marron);
}
.lcm-boutique-tab.is-active {
	opacity: 1;
	color: var(--wp--preset--color--marron);
	border-bottom-color: var(--wp--preset--color--marron);
}

/* Boutique : mise en page sidebar + contenu (voir boutique.php) — catégories
   dans une colonne fixe à gauche façon filtre boutique, plutôt que des
   onglets horizontaux. Colonne étroite car il n'y a qu'une liste de
   catégories à afficher, pas de vrais filtres multiples. */
.lcm-boutique-layout {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 48px;
	align-items: start;
	margin-top: 40px;
}
.lcm-boutique-sidebar {
	position: sticky;
	top: 100px;
}
.lcm-boutique-sidebar__title {
	font-family: var(--wp--preset--font-family--interface);
	font-size: 0.7rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	opacity: .5;
	margin: 0 0 16px;
}
.lcm-boutique-tabs--sidebar {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	overflow-x: visible;
	gap: 4px;
	border-bottom: none;
}
.lcm-boutique-tabs--sidebar .lcm-boutique-tab {
	text-align: left;
	border-bottom: none;
	border-left: 2px solid transparent;
	padding: 8px 0 8px 14px;
	margin-bottom: 0;
	white-space: normal;
}
.lcm-boutique-tabs--sidebar .lcm-boutique-tab.is-active {
	border-bottom-color: transparent;
	border-left-color: var(--wp--preset--color--marron);
	background: var(--wp--preset--color--creme);
}
.lcm-boutique-content {
	min-width: 0;
}

/* Boutique : bouton "Ajouter au panier" discret sur les cartes de la grille
   (voir boutique.php) — les cartes ne montrent plus que image/nom/prix, le
   bouton passe donc en version fine/contourée plutôt qu'en CTA plein noir,
   pour rester secondaire par rapport au nom et au prix. Le bouton "Voir le
   produit" du produit vedette n'est pas concerné (sélecteur scopé à la
   grille). */
.lcm-boutique-grille .lcm-boutique-cta {
	background: none;
	color: var(--wp--preset--color--marron);
	border: 1px solid var(--wp--preset--color--pierre);
	padding: 6px 14px;
	font-size: .75rem;
}
.lcm-boutique-grille .lcm-boutique-cta:hover {
	border-color: var(--wp--preset--color--marron);
	background: var(--wp--preset--color--creme);
}
@media (max-width: 900px) {
	.lcm-boutique-layout {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.lcm-boutique-sidebar {
		position: static;
	}
	.lcm-boutique-tabs--sidebar {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 8px;
	}
	.lcm-boutique-tabs--sidebar .lcm-boutique-tab {
		border-left: none;
		border-bottom: 2px solid transparent;
		padding: 6px 12px;
		border-radius: var(--radius-pill);
		border: 1px solid var(--wp--preset--color--pierre);
	}
	.lcm-boutique-tabs--sidebar .lcm-boutique-tab.is-active {
		border-color: var(--wp--preset--color--marron);
		border-left-color: var(--wp--preset--color--marron);
	}
}

/* Boutique : pagination cote client (voir script dans boutique.php) — 12
   objets par page (4 lignes de 3 sur desktop). Remplace l'ancien plafond
   mobile a 6 objets (.is-capped), devenu inutile puisque la pagination
   limite maintenant le nombre d'objets affichés sur tous les écrans. */
.lcm-boutique-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	margin-top: 40px;
}
.lcm-boutique-pagination button {
	background: none;
	border: 1px solid var(--wp--preset--color--pierre);
	border-radius: var(--radius-pill);
	padding: 8px 18px;
	font-family: var(--wp--preset--font-family--interface);
	font-size: 0.85rem;
	color: var(--wp--preset--color--encre);
	cursor: pointer;
	transition: border-color var(--transition-base), color var(--transition-base);
}
.lcm-boutique-pagination button:hover:not(:disabled) {
	border-color: var(--wp--preset--color--marron);
	color: var(--wp--preset--color--marron);
}
.lcm-boutique-pagination button:disabled {
	opacity: .35;
	cursor: default;
}
.lcm-boutique-page-info {
	font-size: 0.8rem;
	opacity: .6;
	white-space: nowrap;
}

/* Bande "Aller plus loin" de la page Ressources — mêmes pastilles que
   "Concepts liés" sur la fiche Essai, réutilisées telles quelles. */
.lcm-ressources-suite__pills {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: 24px;
}

.lcm-essai-suite__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	margin-top: 32px;
}
.lcm-essai-suite__item {
	padding-top: 24px;
	border-top: 1px solid var(--wp--preset--color--pierre);
}
@media (max-width: 782px) {
	.lcm-essai-suite__grid { grid-template-columns: 1fr; gap: 32px; }
}

/* Grilles "Mon espace lecteur" (/mes-carnets/) — sauvegardes et
   recommandations en 3 colonnes sur desktop, mais 2 colonnes dès la
   tablette (≤900px) : à 3 colonnes fixes, les cartes devenaient trop
   étroites pour rester lisibles (texte tassé, pastille "Réservé aux
   membres" plus large que la carte) — 2 colonnes redonne de la place au
   texte, quitte à empiler un peu plus. */
.lcm-essai-suite__grid.lcm-mes-sauvegardes-grid {
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 32px;
	align-items: stretch;
}
@media (max-width: 900px) {
	.lcm-essai-suite__grid.lcm-mes-sauvegardes-grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 20px;
	}
}
@media (max-width: 480px) {
	.lcm-essai-suite__grid.lcm-mes-sauvegardes-grid { gap: 12px; }
}

/* Cartes de cette grille toujours à 3 colonnes (y compris en colonnes
   étroites sur mobile) : sans borne, un extrait de Carnet (jusqu'à 28 mots)
   s'étire beaucoup plus qu'une carte Livre (couverture, ratio fixe) ou
   Ressource (extrait à 10 mots), et la rangée devient très inégale. On
   force toutes les cartes de la rangée à la même hauteur et on tronque le
   texte qui dépasse — voir carte-essai.php / carte-ressource.php pour la
   classe .lcm-card__excerpt. */
.lcm-mes-sauvegardes-grid > .lcm-card,
.lcm-mes-sauvegardes-grid > * > .lcm-card {
	height: 100%;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
}
.lcm-mes-sauvegardes-grid .lcm-card__excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
/* Carte Livre (couverture pleine, ratio 3/4 fixe) : dans cette grille
   normalisée en hauteur, le ratio fixe laisse un vide sous une couverture
   plus courte que la rangée — flex-grow l'étire pour remplir l'espace en
   trop (image toujours recadrée proprement via object-fit: cover), tout en
   gardant aspect-ratio comme taille de secours quand la carte est seule
   sur sa rangée (sinon la couverture — dont l'unique enfant est en
   position: absolute — n'a plus aucune hauteur intrinsèque et s'écrase). */
.lcm-mes-sauvegardes-grid .lcm-card--overlay .lcm-card__cover,
.lcm-mes-sauvegardes-grid .lcm-card--overlay .lcm-fake-cover {
	flex: 1 1 auto;
}
/* Sur grand écran, les colonnes de cette grille sont larges — sans plafond,
   le ratio 3/4 de la couverture grandit d'autant et la carte Livre finit
   "vachement longue" à côté d'une carte Carnet dont le texte, lui, ne
   s'étire pas avec la largeur. On plafonne la hauteur de couverture pour
   garder des proportions raisonnables ; l'image reste bien cadrée grâce à
   object-fit: cover, déjà en place. */
@media (min-width: 901px) {
	.lcm-mes-sauvegardes-grid .lcm-card--overlay .lcm-card__cover,
	.lcm-mes-sauvegardes-grid .lcm-card--overlay .lcm-fake-cover {
		max-height: 420px;
	}
}
/* Titre carte Carnet ("Recommandé pour vous" / sauvegardes) : fixé en dur à
   --lg (1.4-1.6rem, voir carte-essai.php) sans plafond ni troncature. Sur les
   3 colonnes de cette grille (donc une colonne assez étroite dès le desktop),
   un titre long ("Le trickster africain : pourquoi il refuse de choisir
   entre le bien et le mal") peut occuper toute la hauteur de la carte. On
   réduit la taille et on tronque à 3 lignes — même logique que le clamp déjà
   appliqué à l'extrait juste en dessous. Un peu plus grand que --base et
   coloré en marron (au lieu d'hériter du encre par défaut) pour se
   distinguer clairement de l'extrait juste en dessous, qui utilise la même
   famille de taille. !important nécessaire des deux côtés : le font-size
   est posé en style inline dans carte-essai.php, et la couleur est
   reprise par la règle générale .wp-block-post-content h3 (voir plus haut
   dans ce fichier) qui force encre !important sur tous les h3 du Post
   Content. */
.lcm-mes-sauvegardes-grid .lcm-card--essai h3 {
	font-size: 1.2rem !important;
	color: var(--wp--preset--color--marron) !important;
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
@media (max-width: 600px) {
	.lcm-mes-sauvegardes-grid .lcm-card--essai,
	.lcm-mes-sauvegardes-grid .lcm-ressource-card {
		padding: 18px !important;
	}
	.lcm-mes-sauvegardes-grid .lcm-card__excerpt {
		-webkit-line-clamp: 2;
		font-size: 0.78rem !important;
	}
	.lcm-mes-sauvegardes-grid .lcm-card--essai h3,
	.lcm-mes-sauvegardes-grid .lcm-ressource-card__title {
		/* .lcm-ressource-card__title fixe son font-size en style inline
		   (var(--wp--preset--font-size--base), voir carte-ressource.php) :
		   sans cette règle, elle échappait au rétrécissement mobile
		   appliqué aux cartes Carnet/Livre ci-dessus, d'où des titres bien
		   trop grands sur les cartes Ressources du tableau de bord. */
		font-size: 0.95rem !important;
		margin-top: 6px !important;
	}
	.lcm-mes-sauvegardes-grid .lcm-card__meta {
		font-size: 0.68rem !important;
	}
}

.lcm-essai-cta h2 em {
	font-family: var(--wp--preset--font-family--display);
}
.lcm-essai-cta__btn {
	display: inline-block;
	border: 1px solid rgba(247,243,236,.4);
	color: var(--wp--preset--color--papier);
	border-radius: var(--radius-sharp);
	padding: 16px 32px;
	font-family: var(--wp--preset--font-family--interface);
	font-size: .875rem;
	text-decoration: none;
	transition: background var(--transition-base), border-color var(--transition-base);
}
.lcm-essai-cta__btn:hover {
	background: rgba(247,243,236,.1);
	border-color: var(--wp--preset--color--papier);
	color: var(--wp--preset--color--papier);
}

/* --------------------------------------------------------------------------
   BIBLIOTHÈQUE FILTRÉE — onglets Livres/Essais, recherche, filtres à tiroir.
   Filtrage 100% côté client (voir script dans bibliotheque-filtree.php) :
   pas de rechargement de page, état synchronisé avec l'URL pour permettre
   les liens profonds (ex. une pastille de thème sur une fiche Œuvre).
   -------------------------------------------------------------------------- */
.lcm-biblio-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-top: 48px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--wp--preset--color--pierre);
}
.lcm-biblio-tabs {
	display: flex;
	gap: 32px;
}
.lcm-biblio-tab {
	background: transparent;
	border: none;
	padding: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lg);
	color: var(--wp--preset--color--encre);
	opacity: .45;
	cursor: pointer;
}
.lcm-biblio-tab span {
	font-family: var(--wp--preset--font-family--interface);
	font-size: .8rem;
	opacity: .7;
	margin-left: 4px;
}
.lcm-biblio-tab.is-active {
	opacity: 1;
	color: var(--wp--preset--color--marron);
}
.lcm-biblio-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1 1 auto;
	max-width: 520px;
	margin-left: auto;
}
.lcm-biblio-search {
	border: 1px solid var(--wp--preset--color--pierre);
	border-radius: var(--radius-sharp);
	background: var(--wp--preset--color--creme);
	padding: 10px 16px;
	font-family: var(--wp--preset--font-family--interface);
	font-size: .875rem;
	flex: 1 1 auto;
	min-width: 220px;
}
.lcm-biblio-search:focus {
	outline: none;
	border-color: var(--wp--preset--color--marron);
}
.lcm-biblio-toggle {
	padding: 10px 24px !important;
}
.lcm-biblio-filters {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	margin-top: 24px;
	padding-top: 24px;
	border-top: 1px solid var(--wp--preset--color--pierre);
}
.lcm-biblio-filters[hidden] {
	display: none;
}
.lcm-biblio-filters label {
	display: block;
	margin-bottom: 8px;
}
.lcm-biblio-filters select {
	width: 100%;
	border: 1px solid var(--wp--preset--color--pierre);
	border-radius: var(--radius-sharp);
	background: var(--wp--preset--color--papier);
	padding: 10px 14px;
	font-family: var(--wp--preset--font-family--interface);
	font-size: .875rem;
	color: var(--wp--preset--color--encre);
}
.lcm-biblio-filters select:focus {
	outline: none;
	border-color: var(--wp--preset--color--marron);
}
.lcm-biblio-count {
	margin-top: 32px;
	margin-bottom: 16px;
	font-family: var(--wp--preset--font-family--interface);
	font-size: .75rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	opacity: .55;
}
.lcm-biblio-empty {
	padding: 48px 0;
	font-style: italic;
	opacity: .6;
	text-align: center;
}
.lcm-biblio-grid { margin-top: 0; }
@media (max-width: 782px) {
	.lcm-biblio-toolbar { flex-direction: column; align-items: flex-start; }
	.lcm-biblio-filters { grid-template-columns: repeat(2, 1fr); }
	.lcm-biblio-actions { max-width: none; margin-left: 0; width: 100%; }
	.lcm-biblio-search { min-width: 0; flex: 1; }
}

/* --------------------------------------------------------------------------
   TIMELINE — ligne fine, jalons discrets, apparition progressive au scroll
   -------------------------------------------------------------------------- */
.lcm-timeline { position: relative; padding-left: 32px; }
.lcm-timeline::before {
  content: "";
  position: absolute; left: 6px; top: 0; bottom: 0;
  width: 1px; background: var(--wp--preset--color--pierre);
}
.lcm-timeline__item {
  position: relative;
  padding-bottom: 48px;
  opacity: 0;
  transform: translateY(12px);
  animation: lcm-fade-up var(--transition-slow) forwards;
  animation-timeline: view();
  animation-range: entry 0% cover 20%;
}
.lcm-timeline__item::before {
  content: "";
  position: absolute; left: -32px; top: 6px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--wp--preset--color--or);
}

@keyframes lcm-fade-up {
  to { opacity: 1; transform: translateY(0); }
}

/* Fallback : navigateurs sans animation-timeline voient le contenu directement */
@supports not (animation-timeline: view()) {
  .lcm-timeline__item { opacity: 1; transform: none; animation: none; }
}

/* --------------------------------------------------------------------------
   APPARITION AU SCROLL — .lcm-reveal est ajoutée en JS (js/reveal.js, via
   IntersectionObserver) aux sections principales du site. Sans JS ou avec
   JS bloqué, le contenu reste visible par défaut (pas de classe = pas
   d'opacity:0) : aucune dépendance dure à JavaScript pour lire le site.
   Volontairement opacity seule, SANS transform : un transform sur ce
   conteneur promeut une nouvelle couche de composition GPU, ce qui peut
   entrer en collision avec le décodage asynchrone (decoding="async") des
   couvertures d'œuvres qu'il contient et les laisser bloquées sur un
   dégradé gris vide tant qu'aucun autre repaint n'est déclenché — bug
   repéré sur "Œuvres de cet auteur" (couvertures grises au lieu de la vraie
   image). Une transition opacity seule ne provoque pas cette collision. */
.lcm-reveal {
  opacity: 0;
  transition: opacity var(--transition-slow);
}
.lcm-reveal.is-visible {
  opacity: 1;
}

/* Hero du Coffret (page de vente) : opt-out du fondu au scroll — le titre
   et le texte produit doivent rester statiques dès le chargement, comme
   sur les fiches Ressource qui n'utilisent pas .lcm-section pour leur en-tête. */
.lcm-no-reveal,
.lcm-no-reveal.lcm-reveal {
	opacity: 1 !important;
	transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .lcm-reveal { opacity: 1; transition: none; }
}

/* --------------------------------------------------------------------------
   PAGINATION — liens numérotés (Découvrir, Genre, Studio) et bouton
   "Charger plus" (Lire, Ressources, Glossaire). Voir lcm_pagination_links()
   dans functions.php pour les liens numérotés ; le bouton "Charger plus" lui
   réutilise simplement .lcm-btn-ghost, posé au cas par cas dans chaque bloc.
   -------------------------------------------------------------------------- */
.lcm-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 48px;
  font-family: var(--wp--preset--font-family--interface);
  font-size: 0.9rem;
}
.lcm-pagination__prev,
.lcm-pagination__next {
  color: var(--wp--preset--color--encre);
  opacity: 0.75;
  text-decoration: none;
}
.lcm-pagination__prev:hover,
.lcm-pagination__next:hover { opacity: 1; }
.lcm-pagination__pages {
  display: flex;
  align-items: center;
  gap: 4px;
}
.lcm-pagination__page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--wp--preset--color--encre);
  opacity: 0.6;
  text-decoration: none;
}
.lcm-pagination__page:hover { opacity: 1; }
.lcm-pagination__page.is-current {
  opacity: 1;
  background: var(--wp--preset--color--encre);
  color: var(--wp--preset--color--papier);
}

.lcm-charger-plus-wrap {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}
/* État "fin de liste" — le bouton reste visible (pas de disparition brusque)
   mais se désactive et change de texte une fois tout révélé. */
.lcm-charger-plus-wrap button:disabled {
  opacity: 0.45;
  cursor: default;
  border-color: var(--wp--preset--color--pierre);
  color: var(--wp--preset--color--pierre);
}
.lcm-charger-plus-wrap button:disabled:hover {
  background: transparent;
  color: var(--wp--preset--color--pierre);
}

/* --------------------------------------------------------------------------
   NEWSLETTER (MailPoet) — formulaire discret, aligné sur la grille éditoriale
   -------------------------------------------------------------------------- */
.lcm-newsletter-form input[type="email"] {
  border: none;
  border-bottom: 1px solid var(--wp--preset--color--encre);
  background: transparent;
  border-radius: 0;
  padding: 12px 4px;
  font-family: var(--wp--preset--font-family--corps);
  font-size: 1.1rem;
  width: 100%;
}
.lcm-newsletter-form input[type="email"]:focus {
  border-bottom-color: var(--wp--preset--color--marron);
  outline: none;
}

/* --------------------------------------------------------------------------
   RESPIRATION DE SECTION — espacement systématique 8px, sections aérées
   -------------------------------------------------------------------------- */
.lcm-section {
	padding-block: 72px;
	max-width: 1100px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
	box-sizing: border-box;
}
.lcm-section--hero { padding-block: var(--wp--preset--spacing--9, 192px); }
/* Variante plus large — page Explorer, pour se rapprocher de la respiration
   du prototype (grille de cartes/médaillons plus généreuse que la colonne
   éditoriale standard de 1100px). */
.lcm-section.lcm-section--wide { max-width: 1320px; }

@media (max-width: 782px) {
  .lcm-section { padding-block: 40px; }
  .lcm-section--hero { padding-block: var(--wp--preset--spacing--7, 96px); }
  .gb-grid { grid-template-columns: 1fr !important; }
  .lcm-footer-grid { grid-template-columns: repeat(2,1fr) !important; }
  .lcm-stats-row { gap: 32px !important; row-gap: 32px !important; }
  /* Les imaginaires : accueil raccourci sur mobile — seulement les 3
     premiers genres puis directement la carte "Voir tous les genres"
     (7ᵉ élément de la grille, masquer 4/5/6 la fait remonter juste après
     la 3ᵉ carte puisque les éléments masqués ne prennent plus de place). */
  .lcm-imaginaires-grid > a:nth-child(4),
  .lcm-imaginaires-grid > a:nth-child(5),
  .lcm-imaginaires-grid > a:nth-child(6) {
    display: none !important;
  }
}

@media (max-width: 480px) {
  /* Deux colonnes plutôt qu'empilé sur une seule : plus compact, et les
     libellés de colonne ("Explorer", "Lire"...) restent courts donc lisibles
     même à cette largeur. */
  .lcm-footer-grid { grid-template-columns: repeat(2,1fr) !important; }
}

/* --------------------------------------------------------------------------
   FOOTER — colonnes de liens en vrais blocs Liste WordPress (Éditeur de
   site > Pied de page), pour que ce soit modifiable sans code : ajouter,
   renommer ou retirer un lien se fait comme dans n'importe quel article.
   -------------------------------------------------------------------------- */
.lcm-footer-list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lcm-footer-list li,
.lcm-footer-list a {
  font-size: .9rem;
  color: inherit;
  text-decoration: none !important;
  transition: color var(--transition-base, 240ms ease);
}
.lcm-footer-list a:hover { color: var(--wp--preset--color--or); }
.lcm-footer-list--muted li { font-size: .9rem; opacity: .45; }

.lcm-footer-legal {
  gap: 20px;
}
.lcm-footer-legal a {
  text-decoration: none !important;
  transition: color var(--transition-base, 240ms ease);
}
.lcm-footer-legal a:hover { color: var(--wp--preset--color--or); }
@media (max-width: 600px) {
  .lcm-footer-legal { gap: 10px; flex-wrap: nowrap; }
  .lcm-footer-legal p { font-size: 0.65rem !important; white-space: nowrap; }
}

/* Le lien "S'abonner" du bloc newsletter en pied de page suit le même
   effet doré au survol que les autres liens du footer (au lieu du
   marron générique utilisé ailleurs sur le site pour .lcm-link-underline). */
.lcm-footer .lcm-link-underline {
  transition: color var(--transition-base, 240ms ease), background-size var(--transition-base);
}
.lcm-footer .lcm-link-underline:hover { color: var(--wp--preset--color--or); }

/* Respect des préférences de mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   AJOUT — En-tête Œuvre : fausse couverture, grille méta, pastilles de thèmes
   ========================================================================== */

.lcm-oeuvre-breadcrumb {
	max-width: var(--wp--style--global--content-size, 760px);
	margin: 0 auto;
	padding: 24px 24px 0;
	font-family: var(--wp--preset--font-family--interface);
	font-size: 0.85rem;
}

.lcm-oeuvre-breadcrumb--wide {
	max-width: none;
	margin: 0;
	padding: 24px 0 0;
}

/* Fiche Carnet (essai) : en-tête (titre, chapô, méta) sur une bande large et
   centrée (1100px, même largeur que la fiche Ressource — voir
   .lcm-ressource-content plus bas) façon prototype Base44
   (/article/...) — sur grand écran ça donne au titre plus de présence
   qu'une colonne étroite. Le corps du texte (lcm-essai-body) reste lui
   à 680px pour rester confortable à lire, ancré au même point de départ
   gauche que la bande large ci-dessus. Classes dédiées (lcm-essai-*) : ne
   touche aucune autre page qui partage .lcm-oeuvre-content /
   .lcm-oeuvre-breadcrumb / .lcm-section. */
.lcm-essai-breadcrumb,
.lcm-essai-content {
	max-width: 1100px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
}
.lcm-essai-body {
	/* Pas de max-width ici : la largeur (760px) vient du contentSize du
	   bloc Group Gutenberg qui l'entoure (voir templates/single-essai.html)
	   — on ne fait que le centrer, sans la re-contraindre à une largeur
	   plus étroite (c'est ce qui rendait le texte trop serré). */
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
}

.lcm-oeuvre-header {
	display: grid;
	grid-template-columns: 320px 1fr;
	gap: 64px;
	max-width: 1100px;
	margin: 32px auto;
	padding: 0 24px;
	align-items: start;
}

/* Couverture "collée" (sticky) pendant le défilement de la fiche —
   reste visible tant que la colonne de contenu, plus longue, continue de
   défiler. Désactivée sous 782px où les deux colonnes s'empilent. */
.lcm-oeuvre-header .lcm-fake-cover {
	position: sticky;
	top: 96px;
}

@media (max-width: 782px) {
	.lcm-oeuvre-header { grid-template-columns: 1fr; gap: 32px; }
	.lcm-oeuvre-header .lcm-fake-cover { position: static; top: auto; }
}

/* Fausse couverture : dégradé + halo organique en pur CSS, aucune image requise.
   Le halo doux (radial, flouté) remplace les rayures diagonales mécaniques
   d'origine — plus proche d'une aquarelle abstraite que d'un motif technique.
   container-type: inline-size active les unités cqw ci-dessous : le texte et
   le padding se dimensionnent selon la largeur RÉELLE de la carte, pas celle
   de l'écran — indispensable ici car ce même composant sert aussi bien dans
   une grille serrée (Bibliothèque, ~140px) que sur la fiche Œuvre en pleine
   colonne (~450px). Sans ça, un texte fixe déborde dans les petites cartes. */
.lcm-fake-cover {
	container-type: inline-size;
	box-sizing: border-box;
	aspect-ratio: 3 / 4;
	border-radius: var(--radius-sharp);
	box-shadow: var(--shadow-resting);
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: clamp(14px, 8cqw, 32px);
	color: var(--wp--preset--color--papier);
	transition: box-shadow var(--transition-base);
}

.lcm-fake-cover::before {
	content: "";
	position: absolute;
	inset: 0;
	/* Texture "toile" en fines rayures diagonales plutot que les deux halos
	   flous d'origine (trop "generes par IA"/bruts au gout de Stephanie,
	   compare au prototype base44 -- voir capture du 11 aout 2026). Meme
	   esprit que le prototype : un aplat de couleur traverse d'un motif
	   discret, facon reliure en tissu, pas un halo lumineux. */
	background-image: repeating-linear-gradient(
		135deg,
		rgba(255, 255, 255, 0.14) 0px,
		rgba(255, 255, 255, 0.14) 1px,
		transparent 1px,
		transparent 7px
	);
	/* mix-blend-mode plutot qu'un simple calque blanc semi-transparent : sur
	   les teintes claires (--or notamment), un motif blanc classique se noie
	   dans le fond et devient quasi invisible. "overlay" densifie le contact
	   quelle que soit la couleur dessous -- le motif reste lisible sur TOUTES
	   les teintes, sombres comme claires, au lieu de ne "marcher" que sur
	   --encre et --marron-profond. */
	mix-blend-mode: overlay;
	pointer-events: none;
}

.lcm-fake-cover--marron { background: linear-gradient(160deg, var(--wp--preset--color--marron), var(--wp--preset--color--marron-profond)); }
.lcm-fake-cover--sauge  { background: linear-gradient(160deg, var(--wp--preset--color--sauge), #3d4838); }
.lcm-fake-cover--or     { background: linear-gradient(160deg, var(--wp--preset--color--or), #6e5324); }
.lcm-fake-cover--encre  { background: linear-gradient(160deg, var(--wp--preset--color--encre), #3a322c); }

/* Texte toujours lisible même sur les teintes claires (--or) : une ombre
   portée douce, plutôt qu'une simple opacité, qui se voit sur fond sombre
   ET sur fond clair — l'opacité seule ne suffisait que sur --encre. */
.lcm-fake-cover__year,
.lcm-fake-cover__title,
.lcm-fake-cover__author {
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

.lcm-fake-cover__year {
	position: absolute;
	top: clamp(14px, 8cqw, 32px);
	left: clamp(14px, 8cqw, 32px);
	font-family: var(--wp--preset--font-family--interface);
	font-size: clamp(0.65rem, 3.2cqw, 0.85rem);
	letter-spacing: 0.08em;
	opacity: 0.85;
	z-index: 1;
}

.lcm-fake-cover__title {
	position: relative;
	z-index: 1;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(0.9rem, 6cqw, 1.6rem);
	line-height: 1.15;
	margin-bottom: clamp(4px, 2cqw, 8px);
	/* Filet de sécurité si un titre reste long même à taille réduite : on
	   tronque plutôt que de déborder de la carte. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

.lcm-fake-cover__author {
	position: relative;
	z-index: 1;
	font-family: var(--wp--preset--font-family--interface);
	font-size: clamp(0.65rem, 3.2cqw, 0.85rem);
	opacity: 0.9;
}

.lcm-fake-cover__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Colonne de contenu */
/* .lcm-oeuvre-title est la classe générique "grand titre de page" —
   Bibliothèque, Ressources, Explorer, Essai, La Lettre (numéro), Glossaire
   (terme), Œuvre, Auteur, etc. Alignée sur xl-3, la même taille que
   .lcm-lettre-hero__titre (utilisée par À propos et le bloc La Lettre de
   l'accueil), pour que tous les grands titres de page soient cohérents.
   Elle vivait auparavant sur xl-4 (jusqu'à 112px, le gabarit du hero
   d'accueil) — beaucoup trop imposant pour un titre de page intérieure. */
.lcm-oeuvre-title {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl-3);
	margin-top: 12px;
}

.lcm-oeuvre-original {
	font-style: italic;
	opacity: 0.7;
	margin-top: 8px;
}

.lcm-oeuvre-author {
	margin-top: 20px;
	font-size: 1.05rem;
	display: flex;
	align-items: center;
	gap: 8px;
}
.lcm-oeuvre-author__icon { font-size: 0.6rem; opacity: 0.5; }

.lcm-oeuvre-divider {
	border: none;
	height: 1px;
	width: 72px;
	margin: 32px 0;
	background: linear-gradient(90deg, var(--wp--preset--color--pierre), transparent);
}

/* Fiche Ressource individuelle (templates/single-ressource.html) — doit
   utiliser le même contenant que la page mère /ressources/ (grille en
   .lcm-section, 1100px, pile centrée), pas la colonne éditoriale étroite
   et excentrée des Carnets/Œuvres : ici on vient d'une grille de cartes
   large, la fiche doit rester dans les mêmes proportions perçues. La règle
   .lcm-oeuvre-breadcrumb de base centre déjà à 760px ; celle-ci, déclarée
   après dans le fichier, prend le dessus sur .lcm-ressource-breadcrumb/
   .lcm-ressource-content pour les passer à 1100px. */
.lcm-ressource-breadcrumb,
.lcm-ressource-content {
	max-width: 1100px;
	margin-left: auto;
	margin-right: auto;
}

/* Fiche Ressource façon "page produit" (référence donnée par Stéphanie :
   une fiche e-commerce, adaptée ici à une ressource téléchargeable et
   gratuite — pas de prix/panier). Deux colonnes : galerie à gauche, info
   à droite. Même recette de grille que .lcm-oeuvre-header (colonne de
   gauche sticky pendant que la colonne de droite, plus longue, défile),
   simplement avec une colonne image plus large puisqu'il n'y a pas de
   fausse couverture 3/4 à respecter ici. */
.lcm-ressource-fiche {
	display: grid;
	grid-template-columns: minmax(0, 480px) 1fr;
	gap: 56px;
	align-items: start;
	margin-top: 8px;
}
@media (max-width: 860px) {
	.lcm-ressource-fiche { grid-template-columns: 1fr; gap: 28px; }
}

.lcm-ressource-fiche__gallery {
	position: sticky;
	top: 96px;
}
@media (max-width: 860px) {
	.lcm-ressource-fiche__gallery { position: static; top: auto; }
}

/* Image principale : ratio fixé sur le CONTENEUR (div), pas sur la balise
   <img> — évite le bug rencontré précédemment où WordPress pose ses
   propres attributs width/height sur <img> et où certains navigateurs
   ignorent alors l'aspect-ratio déclaré en CSS. Ici le div n'a aucun
   attribut HTML concurrent, donc le ratio s'applique de façon fiable. */
.lcm-ressource-fiche__main {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--radius-sharp);
	border: 1px solid var(--wp--preset--color--pierre);
	box-shadow: var(--shadow-resting);
	background: var(--wp--preset--color--creme, #f4f1ec);
	display: flex;
	align-items: center;
	justify-content: center;
}
.lcm-ressource-fiche__main img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.lcm-ressource-fiche__main-icon .lcm-card__icon {
	width: 56px;
	height: 56px;
	opacity: .55;
}

.lcm-ressource-fiche__thumbs {
	display: flex;
	gap: 12px;
	margin-top: 16px;
}
.lcm-ressource-fiche__thumb {
	width: 72px;
	height: 72px;
	padding: 0;
	border-radius: var(--radius-sharp);
	border: 1px solid var(--wp--preset--color--pierre);
	overflow: hidden;
	cursor: pointer;
	background: none;
	opacity: .6;
	transition: opacity .2s ease, border-color .2s ease;
}
.lcm-ressource-fiche__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.lcm-ressource-fiche__thumb:hover {
	opacity: .85;
}
.lcm-ressource-fiche__thumb.is-active {
	opacity: 1;
	border-color: var(--wp--preset--color--marron);
}

/* Bouton Télécharger agrandi/pleine largeur pour cette mise en page, façon
   CTA "Ajouter au panier" de la page de référence — s'appuie sur
   .lcm-btn-sauvegarder pour garder les mêmes couleurs/hover que partout
   ailleurs sur le site. */
.lcm-btn-sauvegarder--large {
	width: 100%;
	justify-content: center;
	padding: 16px 24px;
	font-size: .85rem;
	margin-top: 4px;
}

/* Trois lignes de réassurance sous le bouton, façon page produit — mais
   avec un contenu honnête pour une ressource numérique gratuite (pas de
   livraison/paiement à mentionner). */
.lcm-ressource-fiche__reassurance {
	list-style: none;
	margin: 28px 0 0;
	padding: 20px 0 0;
	border-top: 1px solid var(--wp--preset--color--pierre);
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.lcm-ressource-fiche__reassurance li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-family: var(--wp--preset--font-family--corps);
	font-size: .875rem;
	line-height: 1.5;
	opacity: .85;
}
.lcm-ressource-fiche__reassurance svg,
.lcm-ressource-fiche__reassurance img {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	margin-top: 1px;
	fill: none;
	stroke: var(--wp--preset--color--marron);
	stroke-width: 1.5;
}
.lcm-ressource-fiche__reassurance img {
	/* Cas d'une icône personnalisée importée (image plutôt que SVG de la
	   bibliothèque) : object-fit évite toute déformation à 20×20. */
	object-fit: contain;
}
.lcm-ressource-fiche__reassurance strong {
	color: var(--wp--preset--color--encre);
}

.lcm-ressource-content__icon .lcm-card__icon {
	width: 40px;
	height: 40px;
	opacity: 1;
}
.lcm-ressource-content__note {
	display: inline-block;
	font-family: var(--wp--preset--font-family--interface);
	font-size: .8rem;
	opacity: .6;
	font-style: italic;
}

.lcm-oeuvre-meta-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	margin-bottom: 8px;
}
@media (max-width: 600px) {
	.lcm-oeuvre-meta-grid { grid-template-columns: repeat(2, 1fr); }
}
.lcm-oeuvre-meta-grid--3col { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 600px) {
	/* Comme la fiche Oeuvre (Pays/Annee/Editeur/Niveau) : deux champs par
	   ligne sur mobile plutot qu'empiles un par un. */
	.lcm-oeuvre-meta-grid--3col { grid-template-columns: repeat(2, 1fr); }
}
.lcm-oeuvre-meta-grid p { margin-top: 6px; font-size: 1.05rem; }
.lcm-oeuvre-meta-grid__label {
	font-family: var(--wp--preset--font-family--interface);
	font-size: 0.7rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	opacity: .55;
	margin-top: 0 !important;
}

.lcm-oeuvre-resume {
	margin-top: 16px;
	font-size: 1.1rem;
	line-height: 1.7;
}

.lcm-tag-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

/* --------------------------------------------------------------------------
   FICHE BIBLIOGRAPHIQUE — encadré de synthèse sur la fiche Œuvre (titre
   original, auteur, genre, éditeur, année, niveau). Bordure gauche "or" —
   seule zone de la page où l'accent secondaire apparaît, en complément
   du marron déjà présent sur l'eyebrow (règle des 2 accents maximum).
   -------------------------------------------------------------------------- */
.lcm-fiche-biblio {
	margin-top: 48px;
	padding: 32px 0 0;
	border-top: 1px solid var(--wp--preset--color--pierre);
}
.lcm-fiche-biblio__rows {
	margin-top: 20px;
	display: grid;
	gap: 14px;
}
.lcm-fiche-biblio__rows > div {
	display: grid;
	grid-template-columns: 140px 1fr;
	gap: 16px;
	align-items: baseline;
}
.lcm-fiche-biblio__rows dt {
	font-family: var(--wp--preset--font-family--interface);
	font-size: 0.85rem;
	opacity: 0.65;
}
.lcm-fiche-biblio__rows dd {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.05rem;
	font-weight: 300;
}

.lcm-card__cover {
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	position: relative;
	/* Fond de secours pendant le chargement/décodage de la couverture — sans
	   cela, le rectangle reste transparent et seul le dégradé sombre du
	   .lcm-card__scrim est visible par-dessus le fond crème de la page,
	   donnant l'impression d'une couverture "cassée"/grise tant que l'image
	   n'a pas fini de peindre (particulièrement visible sur "Œuvres de cet
	   auteur", où plusieurs grandes couvertures se chargent d'un coup). */
	background: var(--wp--preset--color--marron-profond);
}
.lcm-card__cover img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
}

.lcm-card--overlay {
	background: transparent;
	border: none;
	box-shadow: none;
	display: flex;
	flex-direction: column;
}
/* Ces cartes (couverture Livre, "Recommandé pour vous"...) sont sans
   bordure ni ombre au repos — .lcm-card:hover les soulève déjà de 4px,
   mais sans ombre pour "vendre" ce soulèvement, et sans <img> à zoomer
   quand la couverture est un aplat abstrait (.lcm-fake-cover, pas de
   photo), l'effet passait inaperçu. On restaure une ombre légère au
   survol et on zoome la couverture (photo réelle OU aplat abstrait). */
.lcm-card--overlay:hover {
	box-shadow: var(--shadow-raised);
}
.lcm-card--overlay:hover .lcm-fake-cover {
	transform: scale(1.03);
}
.lcm-card__scrim {
	position: absolute;
	inset: 0;
	/* Assombrit le haut (sur-titre + titre) ET le bas (auteur) de la
	   couverture, comme le prototype, plutôt qu'un simple dégradé bas. */
	background: linear-gradient(180deg, rgba(20,17,15,0.62) 0%, rgba(20,17,15,0) 32%, rgba(20,17,15,0) 60%, rgba(20,17,15,0.82) 100%);
}
/* Sur la couverture : date + titre en haut. */
.lcm-card__overlay-top {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	z-index: 1;
	padding: 24px;
	color: var(--wp--preset--color--papier);
}
/* Sur la couverture : liseré + nom de l'auteur en bas. */
.lcm-card__overlay-content {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	padding: 24px;
	color: var(--wp--preset--color--papier);
}
.lcm-card__divider {
	display: block;
	width: 28px;
	height: 1px;
	background: rgba(250,247,242,.5);
	margin-bottom: 10px;
}
.lcm-card__eyebrow--on-image {
	font-family: var(--wp--preset--font-family--interface);
	font-size: 0.7rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--or);
	opacity: .9;
}
.lcm-card__overlay-title {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lg);
	color: inherit;
	margin-top: 8px;
	line-height: 1.25;
}
.lcm-card__overlay-meta {
	font-family: var(--wp--preset--font-family--interface);
	font-size: 0.85rem;
	opacity: .95;
	margin: 0;
}
/* Sous la couverture : titre cliquable + auteur, comme le prototype
   (le titre/auteur apparaissent une seconde fois, hors image, en texte
   sobre — pas seulement en surimpression). */
.lcm-card__below {
	padding-top: 14px;
}
.lcm-card__below-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.05rem;
	line-height: 1.3;
}
.lcm-card__below-title a {
	color: var(--wp--preset--color--encre);
	text-decoration: none;
	transition: color var(--transition-base);
}
.lcm-card__below-title a:hover {
	color: var(--wp--preset--color--marron);
}
.lcm-card__below-auteur {
	margin: 6px 0 0;
	font-family: var(--wp--preset--font-family--interface);
	font-size: 0.72rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	opacity: .55;
}

/* ==========================================================================
   PAGE EXPLORER — grille de cartes Genres/Racines/Découvrir, onglets
   ========================================================================== */

h1 em, h2 em, .gb-headline em {
	font-style: italic;
	color: var(--wp--preset--color--marron);
}

.lcm-explorer-panel { display: none; }
.lcm-explorer-panel.is-active-panel { display: block; }

.lcm-explorer-subnav {
	display: flex;
	gap: 32px;
	flex-wrap: wrap;
	border-top: 1px solid var(--wp--preset--color--pierre);
	border-bottom: 1px solid var(--wp--preset--color--pierre);
	padding: 20px 0;
	margin: 48px 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.1rem;
	/* Statique avec fond au défilement, comme le header : reste collée
	   juste sous le header sticky (75px ≈ sa hauteur rendue) pendant que
	   le contenu défile en dessous. */
	position: sticky;
	top: 75px;
	z-index: 40;
	background: var(--wp--preset--color--papier);
}
.lcm-explorer-subnav a {
	text-decoration: none;
	color: var(--wp--preset--color--encre);
	opacity: 0.45;
}
.lcm-explorer-subnav a.is-active {
	color: var(--wp--preset--color--marron);
	opacity: 1;
}
.lcm-explorer-subnav a[aria-disabled="true"] {
	pointer-events: none;
	cursor: default;
}

.lcm-explorer-subnav sup {
	font-family: var(--wp--preset--font-family--interface);
	font-size: 0.7rem;
	opacity: 0.6;
	margin-left: 2px;
}

/* Menu-ancre groupé de l'espace membre (Ma bibliothèque / Mes découvertes /
   Mes ressources / Mon compte) — cf. mes-carnets-sauvegardes.php,
   $lcm_nav_groupes. Réutilise .lcm-explorer-subnav (sticky, fond, bordures,
   style des liens) ; on ajoute seulement la mise en page interne par groupe. */
.lcm-espace-nav-groupee {
	align-items: flex-start;
	gap: 28px 40px;
}
.lcm-espace-nav-groupee__groupe {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.lcm-espace-nav-groupee__titre {
	font-family: var(--wp--preset--font-family--interface);
	font-size: 0.68rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.5;
}
.lcm-espace-nav-groupee__groupe > a {
	font-size: 1rem;
}
@media (max-width: 600px) {
	.lcm-espace-nav-groupee {
		gap: 20px 28px;
	}
}

.lcm-explorer-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 28px;
}
@media (max-width: 782px) {
	.lcm-explorer-grid { grid-template-columns: 1fr; }
}

.lcm-explorer-card {
	border: none;
	background: var(--wp--preset--color--creme);
	padding: 28px;
	position: relative;
	transition: box-shadow var(--transition-base), transform var(--transition-slow);
}
.lcm-explorer-card::after {
	content: "";
	position: absolute;
	/* Aligné sur le centre vertical du chiffre d'index (.lcm-index-number,
	   margin:0 — voir cette règle) : sa hauteur de ligne fait 1em
	   (line-height:1), donc son centre est à padding + 0.5em depuis le
	   haut de la carte ; on recule ensuite de la moitié de la pastille
	   (3px) pour la centrer sur cette ligne. --lcm-idx-fs reprend
	   exactement le font-size utilisé par .lcm-index-number dans chaque
	   contexte (voir plus bas), pour rester exact à toutes les largeurs
	   d'écran plutôt qu'une approximation fixe. */
	top: calc(28px + 0.5 * var(--lcm-idx-fs, clamp(1.7rem, 1.4rem + 1.2vw, 2.2rem)) - 3px);
	right: 28px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--or);
	opacity: .8;
}
.lcm-explorer-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-raised);
}

/* Accueil — grille "Les imaginaires" : dimensions et effets de survol
   repris du prototype (vérifiés dans son CSS compilé — padding 32px,
   bordure fine constante, survol = teinte de fond + soulèvement de 4px +
   couleur sur le numéro/titre/pastille, sans ombre supplémentaire). On
   scope tout ceci à l'accueil pour ne pas toucher la page Explorer, qui a
   son propre style (fond blanc + bordure, voir plus bas). */
.lcm-imaginaires-grid .lcm-explorer-card {
	padding: 32px;
	border: 1px solid var(--wp--preset--color--pierre);
	transition: background-color var(--transition-base), transform var(--transition-slow);
}
.lcm-imaginaires-grid .lcm-explorer-card:hover {
	transform: translateY(-4px);
	box-shadow: none;
	border-color: var(--wp--preset--color--pierre);
	background: color-mix(in srgb, var(--wp--preset--color--marron) 9%, var(--wp--preset--color--creme));
}
.lcm-imaginaires-grid .lcm-explorer-card h3,
.lcm-imaginaires-grid .lcm-explorer-card .lcm-index-number {
	transition: color var(--transition-fast);
}
.lcm-imaginaires-grid .lcm-explorer-card:hover h3 {
	color: var(--wp--preset--color--marron);
}
.lcm-imaginaires-grid .lcm-explorer-card:hover .lcm-index-number {
	color: color-mix(in srgb, var(--wp--preset--color--marron) 40%, transparent);
}
.lcm-imaginaires-grid .lcm-explorer-card::after {
	/* Padding 32px ici (contre 28px par défaut) : même recentrage sur le
	   centre du chiffre, réajusté à ce padding (voir .lcm-explorer-card::after
	   pour le détail du calcul). */
	top: calc(32px + 0.5 * var(--lcm-idx-fs, clamp(1.7rem, 1.4rem + 1.2vw, 2.2rem)) - 3px);
	right: 32px;
	transition: opacity var(--transition-fast), background-color var(--transition-fast);
}
.lcm-imaginaires-grid .lcm-explorer-card:hover::after {
	opacity: 1;
	background: var(--wp--preset--color--marron);
}
/* La carte "Voir tous les genres" garde sa bordure en pointillés (règle
   .lcm-explorer-card--empty plus bas) : on la rétablit ici explicitement
   car le sélecteur ci-dessus, plus spécifique, l'écraserait sinon. */
.lcm-imaginaires-grid .lcm-explorer-card--empty {
	border-style: dashed;
}

/* Genres de la page Explorer — plus proche des tons du prototype (fond
   blanc + bordure fine plutôt que le fond crème sans bordure de l'accueil)
   et plus compact : cette page affiche tous les genres à la fois, pas
   seulement un aperçu de 6, donc la densité doit rester lisible. */
.lcm-explorer-grid .lcm-explorer-card {
	--lcm-idx-fs: clamp(1.2rem, 1rem + 0.6vw, 1.5rem);
	background: var(--wp--preset--color--blanc, #fff);
	border: 1px solid var(--wp--preset--color--pierre);
	padding: 22px;
}
.lcm-explorer-grid .lcm-explorer-card::after {
	/* Padding 22px + chiffre plus petit ici : même recentrage sur le
	   centre du chiffre, via --lcm-idx-fs (voir .lcm-explorer-card::after
	   pour le détail du calcul). */
	top: calc(22px + 0.5 * var(--lcm-idx-fs) - 3px);
	right: 22px;
}
.lcm-explorer-grid .lcm-explorer-card .lcm-tag-pills {
	margin-top: 14px;
	gap: 6px;
}
.lcm-explorer-grid .lcm-tag-pill {
	padding: 4px 12px;
	font-size: 0.72rem;
}

.lcm-explorer-card__number {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: 2rem;
	color: var(--wp--preset--color--pierre);
	margin-bottom: 8px;
}
.lcm-explorer-card__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl);
	margin: 0;
}
.lcm-explorer-card__tagline {
	font-style: italic;
	opacity: 0.7;
	margin-top: 4px;
	font-family: var(--wp--preset--font-family--corps);
}
.lcm-explorer-card__desc {
	margin-top: 20px;
	line-height: 1.7;
}
.lcm-explorer-card .lcm-tag-pills { margin-top: 24px; }

.lcm-explorer-card--empty {
	border-style: dashed;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 8px;
	opacity: 0.6;
}
.lcm-explorer-card--empty:hover { border-color: var(--wp--preset--color--pierre); }
.lcm-explorer-card__plus {
	width: 40px;
	height: 40px;
	border: 1px dashed var(--wp--preset--color--pierre);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.2rem;
	margin-bottom: 8px;
}

/* Onglet Découvrir — grille "Livres" : 6 colonnes sur ordinateur (plus
   petites, plus denses que la Bibliothèque qui reste à 3), 2 colonnes sur
   mobile. Polices/paddings réduits en conséquence pour rester lisible. */
@media (max-width: 1100px) {
	.lcm-decouvrir-livres { grid-template-columns: repeat(4, 1fr) !important; }
}
@media (max-width: 782px) {
	.lcm-decouvrir-livres { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
}
.lcm-decouvrir-livres .lcm-card__overlay-title {
	font-size: 1rem;
	margin-top: 4px;
}
.lcm-decouvrir-livres .lcm-card__eyebrow--on-image {
	font-size: 0.6rem;
}
.lcm-decouvrir-livres .lcm-card__overlay-meta {
	font-size: 0.72rem;
}
.lcm-decouvrir-livres .lcm-card__overlay-content,
.lcm-decouvrir-livres .lcm-card__overlay-top {
	padding: 14px;
}
.lcm-decouvrir-livres .lcm-card__below-title {
	font-size: 0.92rem;
}
.lcm-decouvrir-livres .lcm-card__below-auteur {
	font-size: 0.66rem;
}

/* Bibliothèque ("Lire") — même densité que la grille Livres de Découvrir :
   6 colonnes sur ordinateur, 3 sur mobile (au lieu de l'empilement à 1
   colonne des grilles génériques .gb-grid). */
@media (max-width: 1100px) {
	.lcm-biblio-grid { grid-template-columns: repeat(4, 1fr) !important; }
}
@media (max-width: 782px) {
	.lcm-biblio-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
}
.lcm-biblio-grid .lcm-card__overlay-title {
	font-size: 1rem;
	margin-top: 4px;
}
.lcm-biblio-grid .lcm-card__eyebrow--on-image {
	font-size: 0.6rem;
}
.lcm-biblio-grid .lcm-card__overlay-meta {
	font-size: 0.72rem;
}
.lcm-biblio-grid .lcm-card__overlay-content,
.lcm-biblio-grid .lcm-card__overlay-top {
	padding: 14px;
}
.lcm-biblio-grid .lcm-card__below-title {
	font-size: 0.92rem;
}
.lcm-biblio-grid .lcm-card__below-auteur {
	font-size: 0.66rem;
}

/* "Livres liés" (fiche Œuvre) et "Œuvres de cet auteur" (fiche Auteur) —
   même densité compacte que Découvrir/Bibliothèque plutôt que la grande
   carte 3-colonnes utilisée pour les grilles principales. */
.lcm-livres-compact-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 16px;
}
@media (max-width: 1100px) {
	.lcm-livres-compact-grid { grid-template-columns: repeat(4, 1fr) !important; }
}
@media (max-width: 782px) {
	.lcm-livres-compact-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
}
.lcm-livres-compact-grid .lcm-card__overlay-title {
	font-size: 1rem;
	margin-top: 4px;
}
.lcm-livres-compact-grid .lcm-card__eyebrow--on-image {
	font-size: 0.6rem;
}
.lcm-livres-compact-grid .lcm-card__overlay-meta {
	font-size: 0.72rem;
}
.lcm-livres-compact-grid .lcm-card__overlay-content,
.lcm-livres-compact-grid .lcm-card__overlay-top {
	padding: 14px;
}
.lcm-livres-compact-grid .lcm-card__below-title {
	font-size: 0.92rem;
}
.lcm-livres-compact-grid .lcm-card__below-auteur {
	font-size: 0.66rem;
}

/* Fiche Tradition (single-tradition.html) — colonne éditoriale étroite
   (680px) : la grille "Romans associés" reste à 6 colonnes par défaut, ce
   qui écraserait les couvertures ici. On la resserre à 3 colonnes. */
.lcm-tradition-romans-grid {
	grid-template-columns: repeat(3, 1fr) !important;
}
@media (max-width: 620px) {
	.lcm-tradition-romans-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 400px) {
	.lcm-tradition-romans-grid { grid-template-columns: 1fr !important; }
}

/* Onglet "Essais" de la Bibliothèque — deux par ligne (au lieu des 6
   colonnes des Livres) : ce sont des cartes texte, pas des couvertures, et
   ont besoin de plus de largeur. Repris du prototype : pas d'encadré/ombre,
   simple liseré horizontal au-dessus de chaque entrée. */
.lcm-biblio-grid.is-essai-view {
	grid-template-columns: repeat(2, 1fr) !important;
	gap: 0 48px !important;
}
@media (max-width: 782px) {
	.lcm-biblio-grid.is-essai-view { grid-template-columns: 1fr !important; }
}
.lcm-biblio-grid .lcm-card--essai {
	background: transparent;
	border: none;
	border-top: 1px solid var(--wp--preset--color--pierre);
	border-radius: 0;
	box-shadow: none;
	padding: 28px 0 28px 0 !important;
	transition: transform var(--transition-base), border-top-color var(--transition-base);
}
.lcm-biblio-grid .lcm-card--essai:hover {
	box-shadow: none;
	transform: translateX(8px);
	border-top-color: var(--wp--preset--color--marron);
}

/* Fiche Œuvre — "Livres liés" : deux colonnes sur mobile plutôt qu'une
   seule, plus proche du reste du site (Genres, Découvrir) qu'un simple
   empilement vertical. */
@media (max-width: 782px) {
	.lcm-oeuvres-liees-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
}

/* Bibliothèque — barre d'onglets/recherche/filtres statique avec fond au
   défilement, comme le menu principal et la bande d'onglets d'Explorer. */
.lcm-biblio-toolbar {
	position: sticky;
	top: 75px;
	z-index: 40;
	background: var(--wp--preset--color--papier);
}

/* --------------------------------------------------------------------------
   RACINES — cartes façon accueil (mêmes classes que "Commencer ici" et
   "Les imaginaires" : .lcm-card.lcm-explorer-card + .lcm-index-number), pour
   que le niveau 1 des Racines se fonde visuellement dans le reste du site.
   Le wrapper porte à la fois .lcm-explorer-grid (mise en page, 2 col / 1 col
   mobile — comme l'onglet Genres) et .lcm-racines-list (accroche JS). Accent
   marron + pleine opacité pour les familles actives (au moins une Tradition
   publiée/en brouillon), carte grisée pour les familles "à venir".
   -------------------------------------------------------------------------- */
.lcm-racines-list[hidden] {
	display: none;
}
/* Le prototype affiche les familles sur 3 colonnes en desktop (contre 2 pour
   l'onglet Genres, dont les cartes sont plus texte-denses) — override du
   nombre de colonnes hérité de .lcm-explorer-grid. */
.lcm-racines-list {
	grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) {
	.lcm-racines-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.lcm-racines-list { grid-template-columns: 1fr; }
}
.lcm-racines-row--actif:hover {
	border-color: var(--wp--preset--color--marron);
}
.lcm-racines-row--avenir {
	opacity: .55;
}
.lcm-racines-row .lcm-tag-pills { margin-top: 20px; }

.lcm-racines-row__compteur {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 20px;
	font-family: var(--wp--preset--font-family--interface);
	font-size: 0.75rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	background: none;
	border: none;
	padding: 0;
	color: var(--wp--preset--color--marron);
}
button.lcm-racines-row__compteur { cursor: pointer; }
.lcm-racines-row__compteur--avenir { opacity: .45; }

.lcm-racines-back {
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--interface);
	font-size: 0.8rem;
	letter-spacing: .04em;
	color: var(--wp--preset--color--marron);
	margin-bottom: 32px;
	display: inline-block;
}

.lcm-racines-level2__titre {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl);
	margin-top: 12px;
}
.lcm-racines-level2__desc {
	margin-top: 12px;
	max-width: 72ch;
	opacity: .8;
	line-height: 1.7;
}
.lcm-racines-level2__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: 40px;
}
@media (max-width: 900px) {
	.lcm-racines-level2__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.lcm-racines-level2__grid { grid-template-columns: 1fr; }
}
/* Cartes de traditions (niveau 2) : même carte que .lcm-explorer-card
   (fond, ombre, lift au survol) — on ne redéfinit ici que la mise en page
   interne propre à ce composant. */
.lcm-racines-carte {
	display: flex;
	flex-direction: column;
	gap: 6px;
	text-align: left;
	cursor: pointer;
	position: relative;
	width: 100%;
	/* .lcm-explorer-card définit du padding sans imposer border-box : en
	   content-box, "width: 100%" + padding dépasse la colonne de la grille
	   et fait chevaucher les cartes voisines. On force border-box ici pour
	   que la carte occupe exactement sa colonne. */
	box-sizing: border-box;
	font: inherit;
	color: inherit;
	text-decoration: none;
}
.lcm-racines-carte--avenir {
	cursor: default;
	opacity: .5;
}
.lcm-racines-carte--avenir:hover { transform: none; border-color: var(--wp--preset--color--pierre); box-shadow: var(--shadow-resting); }
.lcm-racines-carte__nom {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.15rem;
}
.lcm-racines-carte__region {
	font-size: 0.85rem;
	opacity: .6;
}
.lcm-racines-carte__badge {
	position: absolute;
	top: 16px;
	right: 16px;
	font-family: var(--wp--preset--font-family--interface);
	font-size: 0.65rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--marron);
	opacity: .7;
}

.lcm-racines-level3__titre {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl);
}
.lcm-racines-level3__tagline {
	font-style: italic;
	opacity: .75;
	margin-top: 12px;
	max-width: 64ch;
}
.lcm-racines-level3__meta { margin-top: 32px; padding-bottom: 24px; border-bottom: 1px solid var(--wp--preset--color--pierre); }
.lcm-racines-level3__contenu { margin-top: 24px; max-width: 72ch; line-height: 1.8; }
.lcm-racines-level3__contenu p + p { margin-top: 20px; }
.lcm-racines-level3__brouillon {
	display: inline-block;
	font-family: var(--wp--preset--font-family--interface);
	font-size: 0.75rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--marron);
	background: color-mix(in srgb, var(--wp--preset--color--marron) 10%, transparent);
	padding: 6px 12px;
	border-radius: 3px;
	margin-bottom: 20px !important;
}
.lcm-racines-level3__lien { margin-top: 28px; }

/* --------------------------------------------------------------------------
   PARCOURS — un ou deux itinéraires de lecture, chacun avec une durée
   indicative et la chaîne numérotée de ses étapes.
   -------------------------------------------------------------------------- */
.lcm-parcours-list {
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.lcm-parcours-card {
	border: 1px solid var(--wp--preset--color--pierre);
	padding: 36px;
	background: var(--wp--preset--color--blanc, #fff);
	transition: box-shadow var(--transition-base), transform var(--transition-slow), border-color var(--transition-base);
}
.lcm-parcours-card:hover {
	box-shadow: var(--shadow-raised);
	transform: translateY(-3px);
	border-color: var(--wp--preset--color--marron);
}
.lcm-parcours-card__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}
.lcm-parcours-card__titre {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lg);
	margin: 0;
}
.lcm-parcours-card__duree {
	font-family: var(--wp--preset--font-family--interface);
	font-size: 0.7rem;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--marron);
	opacity: 0.85;
	white-space: nowrap;
}
.lcm-parcours-card__texte {
	margin-top: 14px;
	opacity: 0.75;
	max-width: 72ch;
	line-height: 1.6;
}
.lcm-parcours-steps {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 28px 0 0;
	padding-top: 24px;
	list-style: none;
	border-top: 1px solid var(--wp--preset--color--creme);
}
.lcm-parcours-steps__item {
	display: flex;
	align-items: baseline;
	gap: 8px;
	font-size: 0.92rem;
}
.lcm-parcours-steps__num {
	font-family: var(--wp--preset--font-family--interface);
	font-size: 0.68rem;
	color: var(--wp--preset--color--or);
	opacity: 0.85;
}
.lcm-parcours-steps__item a {
	color: var(--wp--preset--color--encre);
	text-decoration: none;
	transition: color var(--transition-fast);
}
.lcm-parcours-steps__item a:hover {
	color: var(--wp--preset--color--marron);
}
.lcm-parcours-steps__arrow {
	opacity: 0.3;
	color: var(--wp--preset--color--pierre);
}

/* Étape "à venir" : pas encore de fiche Œuvre pour ce titre — même esprit
   que les cartes grisées "à venir" du reste du site (Racines, etc.) plutôt
   qu'un lien mort ou une fiche vide créée juste pour l'occasion. */
.lcm-parcours-steps__item--avenir span {
	color: var(--wp--preset--color--encre);
	opacity: 0.45;
}

/* Sections "Essais" / "Ressources" liées à un parcours — façon prototype :
   petit label discret + soit un simple lien souligné au survol (essai),
   soit des pastilles cliquables vers la Boutique (objets). */
.lcm-parcours-extra {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--wp--preset--color--creme);
}
.lcm-parcours-extra__label {
	font-size: 0.68rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--marron);
	opacity: 0.7;
	margin: 0 0 8px;
}
.lcm-parcours-extra__link {
	color: var(--wp--preset--color--encre);
	text-decoration: none;
	font-size: 0.92rem;
	border-bottom: 1px solid transparent;
	transition: color var(--transition-fast), border-color var(--transition-fast);
}
.lcm-parcours-extra__link:hover {
	color: var(--wp--preset--color--marron);
	border-color: var(--wp--preset--color--marron);
}
.lcm-parcours-extra__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.lcm-parcours-pill {
	display: inline-block;
	padding: 7px 16px;
	border: 1px solid var(--wp--preset--color--pierre);
	border-radius: 999px;
	font-size: 0.82rem;
	color: var(--wp--preset--color--encre);
	text-decoration: none;
	transition: border-color var(--transition-fast), color var(--transition-fast);
}
.lcm-parcours-pill:hover {
	border-color: var(--wp--preset--color--marron);
	color: var(--wp--preset--color--marron);
}

/* Mobile : chaîne d'étapes en liste verticale plutôt qu'en ligne qui
   s'enroule — plus lisible et plus facile à toucher qu'un texte qui se
   casse au milieu d'une flèche. Les flèches horizontales n'ont plus de
   sens en colonne, on les masque au profit d'un simple espacement. */
@media (max-width: 600px) {
	.lcm-parcours-card { padding: 24px 20px; text-align: center; }
	.lcm-parcours-card__head {
		flex-direction: column;
		align-items: center;
		gap: 8px;
	}
	.lcm-parcours-card__duree { order: -1; }
	.lcm-parcours-card__texte { margin-left: auto; margin-right: auto; }
	.lcm-parcours-steps {
		flex-direction: column;
		align-items: center;
		gap: 14px;
	}
	.lcm-parcours-steps__item {
		width: 100%;
		justify-content: center;
		font-size: 1rem;
		padding: 4px 0;
	}
	.lcm-parcours-steps__arrow { display: none; }
	/* "Essais"/"Ressources" sous les etapes : le texte simple heritait deja
	   du text-align:center de .lcm-parcours-card, mais .lcm-parcours-extra__pills
	   est un conteneur flex (justify-content non herite de text-align), d'ou
	   la pastille "Ressources" restee collee a gauche. */
	.lcm-parcours-extra__pills { justify-content: center; }
}

/* --------------------------------------------------------------------------
   QUIZ — panneau simple en attendant le quiz interactif ("le quizz plus
   tard" : on garde l'onglet et sa promesse, pas la logique de questions).
   -------------------------------------------------------------------------- */
.lcm-quiz-teaser {
	max-width: 60ch;
	padding: 48px 0;
}

/* --------------------------------------------------------------------------
   CONTINUER À EXPLORER — quatre portes de sortie, en bas de la page
   Explorer, dans une bande claire (crème) et centrée, comme le prototype.
   -------------------------------------------------------------------------- */
.lcm-band-creme {
	background: var(--wp--preset--color--creme);
	color: var(--wp--preset--color--encre);
}
.lcm-continuer {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.lcm-continuer__eyebrow {
	font-family: var(--wp--preset--font-family--interface);
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--marron);
}
.lcm-continuer__titre {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl-2);
	margin-top: 12px;
	color: var(--wp--preset--color--encre);
}
.lcm-continuer-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
	margin-top: 32px;
}
.lcm-continuer-links a {
	border: 1px solid var(--wp--preset--color--pierre);
	padding: 14px 28px;
	font-family: var(--wp--preset--font-family--interface);
	font-size: 0.9rem;
	color: var(--wp--preset--color--encre);
	text-decoration: none !important;
	transition: border-color var(--transition-fast), color var(--transition-fast);
}
.lcm-continuer-links a:hover {
	border-color: var(--wp--preset--color--marron);
	color: var(--wp--preset--color--marron) !important;
}
@media (max-width: 600px) {
	.lcm-continuer-links { flex-direction: column; width: 100%; max-width: 320px; }
	.lcm-continuer-links a { text-align: center; }
}

/* ==========================================================================
   PAGE RESSOURCES — grille de cartes, état d'attente, bande "À venir"
   ========================================================================== */
.lcm-ressources-empty {
	margin-top: 48px;
	padding: 56px 24px;
	border: 1px dashed var(--wp--preset--color--pierre);
	text-align: center;
	font-style: italic;
	opacity: .65;
	font-family: var(--wp--preset--font-family--corps);
}
.lcm-academie-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-top: 40px;
}
@media (max-width: 782px) {
	.lcm-academie-grid { grid-template-columns: 1fr; }
}
.lcm-academie-card {
	background: var(--wp--preset--color--papier);
	border: 1px dashed var(--wp--preset--color--pierre);
	padding: 32px 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	transition: border-color var(--transition-base);
}
.lcm-academie-card:hover {
	border-color: var(--wp--preset--color--marron);
}
.lcm-academie-card__plus {
	width: 40px;
	height: 40px;
	border: 1px dashed var(--wp--preset--color--pierre);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.1rem;
	color: var(--wp--preset--color--marron);
	opacity: .7;
	margin-bottom: 16px;
}
.lcm-academie-card__titre {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--base);
	margin: 0;
}
.lcm-academie-card__texte {
	margin-top: 10px;
	font-family: var(--wp--preset--font-family--corps);
	font-size: .875rem;
	opacity: .75;
}
.lcm-academie-note {
	margin-top: 32px;
	text-align: center;
	font-style: italic;
	opacity: .6;
	font-family: var(--wp--preset--font-family--corps);
}
/* Variante 4 colonnes (page À propos — "Les briques à venir") */
.lcm-academie-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
	.lcm-academie-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.lcm-academie-grid--4 { grid-template-columns: 1fr; }
}
.lcm-academie-card__badge {
	margin-top: 10px;
	font-family: var(--wp--preset--font-family--interface);
	font-size: .7rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	opacity: .5;
}
/* Cartes en pointillés sur fond sombre (À propos) — .lcm-academie-card est
   pensée pour un fond clair par défaut (Ressources) ; sur .lcm-band-dark on
   réinverse les tons plutôt que dupliquer tout le gabarit de carte. */
.lcm-band-dark .lcm-academie-card {
	background: transparent;
	border-color: rgba(247,243,236,.2);
}
.lcm-band-dark .lcm-academie-card:hover { border-color: var(--wp--preset--color--or); }
.lcm-band-dark .lcm-academie-card__plus {
	border-color: rgba(247,243,236,.3);
	color: var(--wp--preset--color--or);
}
.lcm-band-dark .lcm-academie-card__titre { color: var(--wp--preset--color--papier); }
.lcm-band-dark .lcm-academie-note { color: var(--wp--preset--color--papier); opacity: .5; }
.lcm-band-dark .lcm-continuer__eyebrow { color: var(--wp--preset--color--or); }
.lcm-band-dark .lcm-continuer__titre { color: var(--wp--preset--color--papier); }

/* ==========================================================================
   PAGE "À PROPOS" — mission (texte en deux colonnes), valeurs éditoriales
   ========================================================================== */
.lcm-mission-grid {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 48px;
	align-items: start;
}
@media (max-width: 782px) {
	.lcm-mission-grid { grid-template-columns: 1fr; gap: 16px; }
}
.lcm-guide-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
	margin-top: 40px;
}
.lcm-guide-grid__item {
	padding-top: 24px;
	border-top: 1px solid var(--wp--preset--color--pierre);
}
.lcm-guide-grid__item h3 {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.15rem;
	font-weight: 400;
}
.lcm-guide-grid__item p {
	margin-top: 8px;
	opacity: .75;
	font-size: .95rem;
}
@media (max-width: 900px) {
	.lcm-guide-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.lcm-guide-grid { grid-template-columns: 1fr; }
}

/* Valeurs éditoriales (Maison d'édition) — grille 2 colonnes avec filet
   vertical à gauche de chaque item, fidèle au prototype (2x2, pas 4 en
   ligne, pas de titre H2 au-dessus — juste le sur-titre puis la grille). */
.lcm-valeurs-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 32px;
	margin-top: 32px;
}
.lcm-valeurs-grid__item {
	border-left: 2px solid rgba(107, 63, 42, .3);
	padding-left: 24px;
}
.lcm-valeurs-grid__item h3 {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.5rem;
	font-weight: 400;
	color: var(--wp--preset--color--encre);
	margin: 0 0 12px;
}
.lcm-valeurs-grid__item p {
	opacity: .75;
	line-height: 1.6;
	margin: 0;
}
@media (max-width: 700px) {
	.lcm-valeurs-grid { grid-template-columns: 1fr; }
}

/* Section "Manifeste" (page Maison d'édition) — extraits du manifeste de la
   maison, mis en avant sur fond sombre, texte large façon citation plutôt
   que paragraphe courant. */
.lcm-manifeste .lcm-card__eyebrow { text-align: center; }
.lcm-manifeste__lignes {
	margin-top: 40px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
	text-align: center;
}
.lcm-manifeste__lignes p {
	max-width: 34ch;
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-size: var(--wp--preset--font-size--lg, 1.75rem);
	line-height: 1.4;
	opacity: .95;
}
@media (max-width: 700px) {
	.lcm-manifeste__lignes p { font-size: 1.35rem; }
}

/* Carte "Ressource à venir" — insérée en fin de grille ; le bouton
   "S'abonner" renvoie vers /la-lettre/, où se trouve le vrai formulaire
   d'abonnement (voir inc/blocks/ressources-grid.php). Même esprit pointillé
   que les cartes de la bande "À venir", mais reste une carte de la grille
   (pas de la bande crème) donc fond papier + bordure. */
.lcm-card--avenir {
	background: var(--wp--preset--color--papier);
	border: 1px dashed var(--wp--preset--color--pierre);
	padding: 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.lcm-card--avenir .lcm-card__eyebrow { color: var(--wp--preset--color--marron); }
.lcm-card--avenir__cta {
	margin-top: 18px;
}

/* ==========================================================================
   GLOSSAIRE — navigation alphabétique et entrées
   ========================================================================== */

.lcm-glossaire-az {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	border-top: 1px solid var(--wp--preset--color--pierre);
	border-bottom: 1px solid var(--wp--preset--color--pierre);
	padding: 24px 0;
	margin: 48px 0;
}
.lcm-glossaire-az a,
.lcm-glossaire-az span,
.lcm-glossaire-az button {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--interface);
	font-size: 0.9rem;
	text-decoration: none;
	color: var(--wp--preset--color--encre);
}
.lcm-glossaire-az button {
	background: none;
	border: none;
	border-radius: 999px;
	cursor: pointer;
	transition: background var(--transition-base), color var(--transition-base);
}
.lcm-glossaire-az span.is-inactive { opacity: 0.25; }
.lcm-glossaire-az a:hover,
.lcm-glossaire-az button:hover { background: var(--wp--preset--color--creme); }
.lcm-glossaire-az button.is-selected,
.lcm-glossaire-az button.is-selected:hover {
	background: var(--wp--preset--color--encre);
	color: var(--wp--preset--color--papier);
}

.lcm-glossaire-letter-section {
	padding-top: 48px;
	border-top: 1px solid var(--wp--preset--color--pierre);
	margin-top: 48px;
}
.lcm-glossaire-letter-section:first-of-type { border-top: none; margin-top: 0; }

.lcm-glossaire-entry {
	display: grid;
	grid-template-columns: 48px 1fr;
	gap: 24px;
	padding: 32px 0;
	border-top: 1px solid var(--wp--preset--color--pierre);
}
.lcm-glossaire-letter-section > .lcm-glossaire-entry:first-of-type { border-top: none; padding-top: 24px; }

.lcm-glossaire-entry__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 32px 48px;
	margin-top: 20px;
}
.lcm-glossaire-entry__meta > div { min-width: 160px; }

.lcm-glossaire-entry--single {
	max-width: 1100px;
	margin: 0 auto;
	padding: 32px 24px;
	border: none;
}

.lcm-glossaire-entry__letter {
	font-family: var(--wp--preset--font-family--interface);
	font-size: 0.75rem;
	color: var(--wp--preset--color--or);
	opacity: 0.8;
}
.lcm-glossaire-entry--single .lcm-glossaire-entry__letter {
	font-size: 1rem;
}

.lcm-medaillon-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 24px;
}
@media (max-width: 900px) {
	.lcm-medaillon-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
	.lcm-medaillon-grid { grid-template-columns: repeat(2, 1fr); }
}
.lcm-medaillon-card {
	display: block;
	text-decoration: none;
	color: inherit;
}
.lcm-medaillon-card .lcm-fake-cover {
	transition: transform var(--transition-slow), box-shadow var(--transition-base);
}
.lcm-medaillon-card:hover .lcm-fake-cover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-raised);
}

/* ==========================================================================
   LA LETTRE — liste des lettres passées, fond sombre
   ========================================================================== */

.lcm-lettres-passees {
	max-width: none;
	background: var(--wp--preset--color--encre);
	color: var(--wp--preset--color--papier);
}
.lcm-lettres-passees > * {
	max-width: 1100px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
	box-sizing: border-box;
}

.lcm-lettre-item {
	display: flex;
	align-items: flex-start;
	gap: 32px;
	padding: 32px 0;
	border-top: 1px solid rgba(255,255,255,0.15);
	text-decoration: none;
	color: inherit;
	transition: opacity var(--transition-base);
}
.lcm-lettre-item:hover { opacity: .7; }

.lcm-lettre-item__numero {
	font-family: var(--wp--preset--font-family--interface);
	font-size: 0.8rem;
	color: var(--wp--preset--color--or);
	flex-shrink: 0;
	width: 56px;
}
.lcm-lettre-item__content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.lcm-lettre-item__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lg);
	color: var(--wp--preset--color--papier);
}
.lcm-lettre-item__excerpt {
	font-size: 0.95rem;
	opacity: 0.7;
}
.lcm-lettre-item__meta {
	font-family: var(--wp--preset--font-family--interface);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	opacity: 0.6;
	flex-shrink: 0;
	white-space: nowrap;
}
@media (max-width: 600px) {
	.lcm-lettre-item { flex-direction: column; gap: 8px; }
}

/* Repli des numéros plus anciens (au-delà des 2 derniers) — <details> natif,
   pas de JS requis sur cette page publique. */
.lcm-lettres-plus {
	border-top: 1px solid rgba(255,255,255,0.15);
}
.lcm-lettres-plus__summary {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 20px 0;
	cursor: pointer;
	list-style: none;
	font-family: var(--wp--preset--font-family--interface);
	font-size: 0.85rem;
	letter-spacing: 0.03em;
	color: var(--wp--preset--color--or);
	user-select: none;
}
.lcm-lettres-plus__summary::-webkit-details-marker { display: none; }
.lcm-lettres-plus__chevron {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	opacity: .8;
	transition: transform var(--transition-fast);
}
.lcm-lettres-plus[open] .lcm-lettres-plus__chevron {
	transform: rotate(180deg);
}
.lcm-lettres-plus__contenu .lcm-lettre-item:last-child {
	border-bottom: none;
}

/* ==========================================================================
   CONTENU COLLÉ (MailerLite, Word, etc.) — écrase les styles inline importés
   ========================================================================== */
body:not(.page-id-2673) .wp-block-post-content h1 { font-size: var(--wp--preset--font-size--xl-4) !important; font-family: var(--wp--preset--font-family--display) !important; font-weight: 300 !important; color: var(--wp--preset--color--encre) !important; line-height: 1.1 !important; }
.wp-block-post-content h2 { font-size: var(--wp--preset--font-size--xl-3) !important; font-family: var(--wp--preset--font-family--display) !important; font-weight: 300 !important; color: var(--wp--preset--color--encre) !important; line-height: 1.15 !important; }
.wp-block-post-content h3 { font-size: var(--wp--preset--font-size--xl-2) !important; font-family: var(--wp--preset--font-family--display) !important; font-weight: 300 !important; color: var(--wp--preset--color--encre) !important; line-height: 1.15 !important; }
.wp-block-post-content h4 { font-size: var(--wp--preset--font-size--xl) !important; font-family: var(--wp--preset--font-family--display) !important; font-weight: 300 !important; color: var(--wp--preset--color--encre) !important; }
.wp-block-post-content h5 { font-size: var(--wp--preset--font-size--lg) !important; font-family: var(--wp--preset--font-family--display) !important; font-weight: 500 !important; color: var(--wp--preset--color--encre) !important; }
.wp-block-post-content h6 { font-size: var(--wp--preset--font-size--base) !important; font-family: var(--wp--preset--font-family--interface) !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; color: var(--wp--preset--color--encre) !important; }
/* Le titre en surimpression sur une couverture Œuvre réelle
   (.lcm-card__overlay-title, ex. cartes "Recommandé pour vous" dans Mon
   espace lecteur) est un <h3> : la règle ci-dessus le forçait en encre
   (texte quasi noir) au lieu du blanc/crème hérité de son conteneur
   (.lcm-card__overlay-top, sur fond sombre de couverture) — d'où le
   texte "en noir sur l'image" repéré sur Lagoon (couverture réelle avec
   surimpression) alors que les couvertures sans photo (aplat abstrait,
   <span> et non <h3>) n'étaient pas touchées. Spécificité renforcée pour
   l'emporter sur la règle ci-dessus malgré son ordre plus précoce. */
.wp-block-post-content h3.lcm-card__overlay-title {
	color: inherit !important;
}
/* Même bug que ci-dessus pour l'année (.lcm-card__eyebrow--on-image) et
   l'auteur (.lcm-card__overlay-meta) en surimpression sur la couverture :
   ce sont des <p>, donc également repris par la règle générale ci-dessous
   (couleur ET taille forcées) — d'où l'année "restée noire" en plus du
   titre. On restaure aussi la taille voulue (sinon la police du corps de
   texte, bien plus grande, s'applique) pour les cartes "par défaut" (ex.
   "Recommandé pour vous") ; les grilles plus denses (Bibliothèque,
   Découvrir, Livres compacts) ont leur propre taille encore plus réduite,
   rétablie juste après avec une spécificité supérieure pour continuer à
   gagner face à ces mêmes règles. */
.wp-block-post-content p.lcm-card__eyebrow--on-image,
.wp-block-post-content p.lcm-card__overlay-meta {
	color: inherit !important;
}
.wp-block-post-content p.lcm-card__eyebrow--on-image {
	font-size: 0.7rem !important;
}
.wp-block-post-content p.lcm-card__overlay-meta {
	font-size: 0.85rem !important;
}
.wp-block-post-content .lcm-decouvrir-livres p.lcm-card__eyebrow--on-image,
.wp-block-post-content .lcm-biblio-grid p.lcm-card__eyebrow--on-image,
.wp-block-post-content .lcm-livres-compact-grid p.lcm-card__eyebrow--on-image {
	font-size: 0.6rem !important;
}
.wp-block-post-content .lcm-decouvrir-livres p.lcm-card__overlay-meta,
.wp-block-post-content .lcm-biblio-grid p.lcm-card__overlay-meta,
.wp-block-post-content .lcm-livres-compact-grid p.lcm-card__overlay-meta {
	font-size: 0.72rem !important;
}
body:not(.page-id-2673) .wp-block-post-content p, body:not(.page-id-2673) .wp-block-post-content li {
	font-size: var(--wp--preset--font-size--base) !important;
	font-family: var(--wp--preset--font-family--corps) !important;
	color: var(--wp--preset--color--encre) !important;
}

/* Légendes d'images dans le corps des articles (bloc Image natif,
   figcaption) — sans cette règle elles héritent du style par défaut de
   WordPress (Times New Roman-ish, non cohérent avec la charte). Petite,
   italique, police d'interface, centrée sous l'image. */
.wp-block-post-content .wp-block-image figcaption {
	font-family: var(--wp--preset--font-family--interface) !important;
	font-size: 0.85rem !important;
	font-style: italic !important;
	color: var(--wp--preset--color--encre) !important;
	opacity: 0.65;
	text-align: center;
	margin-top: 10px !important;
}

.lcm-fake-portrait {
	aspect-ratio: 1 / 1;
}
.lcm-fake-portrait--empty::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: repeating-radial-gradient(
		circle at center,
		transparent 0,
		transparent 38px,
		rgba(255,255,255,0.12) 39px,
		rgba(255,255,255,0.12) 40px
	);
}
.lcm-fake-portrait__monogram {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	text-align: center;
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-size: 5rem;
	opacity: 0.55;
	margin: auto 0;
}
.lcm-fake-portrait { justify-content: center; align-items: center; padding: 0; }

.lcm-eyebrow-link {
	color: inherit;
	text-decoration: none;
}
.lcm-eyebrow-link:hover {
	text-decoration: underline;
	color: var(--wp--preset--color--marron);
}
/* Pastille "Réservé aux membres" — Ressources (fiche et carte), voir
   lcm_ressource_est_reservee() dans functions.php. Même habillage que
   .lcm-produit-badge ("À paraître" de la Boutique, voir plus bas) : fond
   crème plein + ombre légère plutôt que le contour doré d'origine, jugé
   moins "joli" — cohérence visuelle entre les deux pastilles du site. */
.lcm-badge-membres {
	display: inline-block;
	max-width: 100%;
	background: var(--wp--preset--color--creme);
	color: var(--wp--preset--color--marron);
	font-family: var(--wp--preset--font-family--interface);
	font-size: 0.68rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: center;
	white-space: normal;
	padding: 6px 14px;
	border-radius: var(--radius-pill);
	box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
	vertical-align: middle;
}
/* Sur la carte Ressource (accueil, archive Ressources) : sur la même
   ligne que l'icône (voir carte-ressource.php), et n'apparaît qu'au survol
   — même traitement que .lcm-ressource-card__cta ("Accéder →") pour rester
   cohérent avec le reste de la carte, plutôt qu'affichée en permanence
   (jugée pas assez discrète, cf. le rendu "flou" constaté sur fond sombre
   quand elle restait visible en permanence). */
.lcm-ressource-card .lcm-badge-membres {
	background: var(--wp--preset--color--creme);
	opacity: 0;
	transform: translateX(4px);
	transition: opacity .2s ease, transform .2s ease;
}
.lcm-ressource-card:hover .lcm-badge-membres {
	opacity: 1;
	transform: translateX(0);
}
/* Exception : dans "Mon espace lecteur", cette section sert justement à
   mettre en avant les ressources réservées — la pastille doit y rester
   visible en permanence (aussi sur mobile/tablette, où il n'y a pas de
   survol). Habillage plus doux que la version "hover" ci-dessus : visible
   en permanence, l'ombre + le fond plein lisaient comme un vrai bouton
   ("trop dur") plutôt qu'une simple étiquette — fond légèrement teinté au
   lieu de crème plein, sans ombre, texte moins contrasté. */
.lcm-mes-sauvegardes-grid .lcm-ressource-card .lcm-badge-membres {
	opacity: 1;
	transform: none;
	background: color-mix(in srgb, var(--wp--preset--color--marron) 8%, var(--wp--preset--color--creme));
	box-shadow: none;
	color: color-mix(in srgb, var(--wp--preset--color--marron) 75%, transparent);
	/* Le texte "Réservé aux membres" est bien plus long qu'"À paraître" :
	   dans la rangée étroite partagée avec l'icône (voir carte-ressource.php),
	   il retombait sur 2 lignes et prenait l'aspect d'un gros bouton — plus
	   "dur" que la pastille du prototype, qui tient toujours sur une seule
	   ligne. Taille et interlettrage réduits pour qu'il tienne sur une seule
	   ligne même sur les cartes les plus étroites (mobile, 2 colonnes). */
	font-size: 0.58rem;
	letter-spacing: 0.03em;
	padding: 5px 11px;
	white-space: nowrap;
}

.lcm-tag-pill {
	border: 1px solid var(--wp--preset--color--pierre);
	border-radius: var(--radius-pill);
	padding: 6px 16px;
	font-family: var(--wp--preset--font-family--interface);
	font-size: 0.8rem;
	text-decoration: none;
	color: var(--wp--preset--color--encre);
	display: inline-block;
}
.lcm-tag-pill:hover {
	background: var(--wp--preset--color--marron);
	border-color: var(--wp--preset--color--marron);
	color: var(--wp--preset--color--papier);
	text-decoration: none;
}
/* Variante non cliquable (ex. thèmes sous la présentation d'un auteur) —
   même apparence, mais sans le survol "actionnable". */
.lcm-tag-pill--static {
	cursor: default;
	opacity: .85;
}

/* Survol de la fausse couverture — léger lift + assombrissement du dégradé */
.lcm-fake-cover {
	transition: transform var(--transition-slow), box-shadow var(--transition-base);
}
.lcm-oeuvre-header:hover .lcm-fake-cover,
.lcm-fake-cover:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow-floating);
}

/* Quand une bande pleine largeur à fond contrasté (Continuer à explorer,
   S'abonner...) est la dernière section avant le footer, l'espacement
   standard entre blocs racine (32px, hérité du thème) laisse apparaître un
   liseré de la couleur de fond de page entre les deux — visible dès que la
   bande n'a pas exactement le même ton que le fond. On colle les deux. */
.lcm-band-full + .wp-block-template-part {
	margin-top: 0 !important;
}

/* ==========================================================================
   BANDE PLEINE LARGEUR — utilitaire pour les sections qui doivent déborder
   du conteneur pour toucher les deux bords de l'écran (stats, ressources).
   ========================================================================== */
.lcm-band-full {
	width: 100vw;
	max-width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw !important;
	margin-right: -50vw !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	box-sizing: border-box;
}

/* Espacement sitewide : quand une bande pleine largeur (.lcm-band-full) est la derniere
 section avant le footer, elle y touche directement (margin force a 0). On reintroduit
 un espace visible avant le footer dans ce cas precis, plus une respiration interne
 en haut/bas du footer lui-meme. */
.lcm-band-full:has(+ footer) {
	margin-bottom: 64px !important;
}
.lcm-footer {
	padding-top: 56px !important;
	padding-bottom: 40px !important;
}

/* ==========================================================================
   STATISTIQUES — bande pleine largeur, chiffres réels comptés en direct
   ========================================================================== */
.lcm-stats-row {
	border-top: 1px solid var(--wp--preset--color--pierre);
	border-bottom: 1px solid var(--wp--preset--color--pierre);
}
.lcm-stats-row__inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 32px;
	padding-block: 48px;
	max-width: 1400px;
	margin-inline: auto;
	padding-left: 40px;
	padding-right: 40px;
	box-sizing: border-box;
}
.lcm-stats-row__inner > div { text-align: center; }
.lcm-stats-row__icon {
	display: inline-flex;
	width: 22px;
	height: 22px;
	margin-bottom: 6px;
	color: var(--wp--preset--color--marron);
	opacity: .75;
}
.lcm-stats-row__icon svg { width: 100%; height: 100%; }
.lcm-stats-row__number {
	font-weight: 300;
	font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.8rem) !important;
	color: var(--wp--preset--color--marron) !important;
	letter-spacing: 0.01em;
}
@media (max-width: 782px) {
	.lcm-stats-row__inner { justify-content: center; gap: 32px 48px; padding-left: 24px; padding-right: 24px; }
	/* Sur mobile, six chiffres passent sur deux lignes et pèsent lourd —
	   on garde les quatre premiers (Auteurs, Livres, Essais, Genres), les
	   plus parlants pour un premier visiteur, et on masque Mythologies/
	   Pays (toujours visibles et à jour sur desktop et sur /explorer/). */
	.lcm-stats-row__inner > div:nth-child(5),
	.lcm-stats-row__inner > div:nth-child(6) {
		display: none;
	}
}

/* ==========================================================================
   COMMENCER ICI — entête pleine largeur (comme Les imaginaires) + deux
   cartes, tons crème plus soutenus que le fond de page (le fond de section
   doit rester le plus clair)
   ========================================================================== */
.lcm-commencer-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
	align-items: start;
	margin-top: 40px;
}
@media (max-width: 960px) {
	.lcm-commencer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
	.lcm-commencer-grid { grid-template-columns: 1fr; }
}
.lcm-card--tinted {
	background: var(--wp--preset--color--creme);
	border-color: var(--wp--preset--color--creme);
}
.lcm-card--tinted:hover {
	border-color: var(--wp--preset--color--marron);
}

/* ==========================================================================
   DERNIERS ESSAIS — essai vedette avec repère visuel + liste fine
   ========================================================================== */
.lcm-essai-featured {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: 48px;
	align-items: start;
	margin-top: 40px;
}
@media (max-width: 782px) {
	.lcm-essai-featured { grid-template-columns: 1fr; }
}
.lcm-essai-featured__visual {
	background: var(--wp--preset--color--creme);
	aspect-ratio: 4 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform var(--transition-slow), box-shadow var(--transition-base);
}
.lcm-essai-featured__visual:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-raised);
}
.lcm-essai-featured__letter {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-weight: 300;
	font-size: 5rem;
	color: color-mix(in srgb, var(--wp--preset--color--marron) 22%, transparent);
}
.lcm-essai-list-item {
	display: block;
	padding: 24px 0;
	border-top: 1px solid var(--wp--preset--color--pierre);
	text-decoration: none;
	color: inherit;
	transition: transform var(--transition-slow);
}
/* Comme le prototype (classe "lift-hover") : soulèvement léger au survol,
   plutôt qu'un fondu de toute la ligne — seul le titre change de couleur. */
.lcm-essai-list-item:hover {
	transform: translateY(-4px);
}
.lcm-essai-list-item__date {
	display: block;
	font-size: .72rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--marron);
	opacity: .85;
}
.lcm-essai-list-item__titre {
	display: block;
	margin-top: 10px;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--base);
	transition: color var(--transition-fast);
}
.lcm-essai-list-item:hover .lcm-essai-list-item__titre {
	color: var(--wp--preset--color--marron);
}
.lcm-essai-list-item__excerpt {
	display: block;
	margin-top: 10px;
	font-size: .9rem;
	line-height: 1.6;
	opacity: .8;
}
.lcm-essai-list-item__meta {
	display: block;
	margin-top: 12px;
	font-size: .72rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	opacity: .55;
}

/* ==========================================================================
   VALEURS DU PORTAIL — bande sombre juste après le hero, quatre piliers
   avec icône fine, inspirée du bandeau du prototype
   ========================================================================== */
.lcm-valeurs__inner {
	padding-block: 56px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
}
/* Taille de base de l'icône des cartes Ressource/Concept — sans cette
   règle, un SVG sans width/height explicite hérite de ses dimensions
   internes brutes (souvent énorme). Ne posait pas problème sur l'accueil,
   où ces cartes vivent toujours dans .lcm-band-dark (qui la redéfinit à
   26px) ; mais la grille de la page Ressources dédiée utilise ces mêmes
   cartes hors bande sombre, d'où le besoin d'une taille par défaut. */
.lcm-card__icon {
	width: 28px;
	height: 28px;
	color: var(--wp--preset--color--marron);
	opacity: .8;
}
img.lcm-icon-custom {
	object-fit: contain;
	display: inline-block;
}

/* Carte Ressource (archive /ressources/ et accueil) — interface calquée sur
   le prototype : icône fichier passive en haut à droite si un fichier est
   attaché, titre qui vire marron et "Accéder →" qui n'apparaît qu'au survol
   (au lieu d'être toujours visible), .lcm-card:hover gère déjà le
   lift/l'ombre/le liseré marron — on ajoute seulement le titre + le CTA,
   scopés à cette carte pour ne pas toucher Œuvre/Auteur/Concept. */
.lcm-ressource-card__fichier-icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	fill: none;
	stroke: var(--wp--preset--color--pierre);
	stroke-width: 1.6;
}
.lcm-ressource-card__title {
	transition: color .2s ease;
}
.lcm-ressource-card:hover .lcm-ressource-card__title {
	color: var(--wp--preset--color--marron);
}
.lcm-ressource-card__cta {
	font-family: var(--wp--preset--font-family--interface);
	font-size: .85rem;
	white-space: nowrap;
	color: var(--wp--preset--color--marron);
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity .2s ease, transform .2s ease;
}
.lcm-ressource-card:hover .lcm-ressource-card__cta {
	opacity: 1;
	transform: translateX(0);
}
.lcm-valeurs__item .lcm-card__icon { margin-bottom: 12px; }
@media (max-width: 900px) {
  .lcm-valeurs__inner { grid-template-columns: repeat(2, 1fr); padding-block: 40px; }
}
@media (max-width: 480px) {
  .lcm-valeurs__inner { grid-template-columns: 1fr; }
}
@media (max-width: 782px) {
  .lcm-valeurs { display: none !important; }
}

/* ==========================================================================
   RESSOURCES / OUTILS — bande sombre pleine largeur, cartes discrètes
   ========================================================================== */
.lcm-band-dark {
	background: var(--wp--preset--color--encre);
	color: var(--wp--preset--color--papier);
}
.lcm-band-dark h1,
.lcm-band-dark h2,
.lcm-band-dark h3,
.lcm-band-dark h4 { color: var(--wp--preset--color--papier); }
/* Les cartes .lcm-card héritent automatiquement des tons sombres lorsqu'elles
   vivent à l'intérieur d'une bande .lcm-band-dark (ex. Ressources accueil) —
   pas besoin de dupliquer le gabarit de carte pour l'archive Ressources qui,
   elle, reste sur fond clair. */
.lcm-band-dark .lcm-card {
	background: color-mix(in srgb, var(--wp--preset--color--encre) 80%, var(--wp--preset--color--marron-profond) 20%);
	border: 1px solid rgba(247,243,236,.1);
	box-shadow: none;
	color: var(--wp--preset--color--papier);
}
.lcm-band-dark .lcm-card:hover {
	border-color: rgba(184,147,74,.5);
	box-shadow: none;
	transform: translateY(-4px);
}
.lcm-band-dark .lcm-card__eyebrow { color: var(--wp--preset--color--or); opacity: 1; }
.lcm-band-dark .lcm-card h1,
.lcm-band-dark .lcm-card h2,
.lcm-band-dark .lcm-card h3,
.lcm-band-dark .lcm-card h4,
.lcm-band-dark .lcm-card p,
.lcm-band-dark .lcm-card span,
.lcm-band-dark .lcm-card a:not(.lcm-link-underline) { color: var(--wp--preset--color--papier); }
.lcm-band-dark .lcm-card .lcm-link-underline { color: var(--wp--preset--color--or); }
.lcm-band-dark .lcm-card__icon {
	width: 26px;
	height: 26px;
	color: var(--wp--preset--color--or);
	opacity: .9;
	margin-bottom: 16px;
	display: block;
}

/* ==========================================================================
   LA LETTRE / À PROPOS — mise en page à deux colonnes, image + texte
   ========================================================================== */
.lcm-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
}
@media (max-width: 782px) {
	.lcm-split { grid-template-columns: 1fr; }
}
.lcm-split__visual {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--wp--preset--color--creme);
}
.lcm-split__visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--transition-slow);
}
.lcm-split__visual:hover img { transform: scale(1.03); }

/* ==========================================================================
   PAGE "LA LETTRE" — ce que vous recevez, témoignages, formulaire dédié
   ========================================================================== */
/* Titre du hero à deux colonnes — xl4/.lcm-oeuvre-title est calibré pour une
   section pleine largeur (Explorer, Ressources) ; dans une colonne de
   .lcm-split (~50% de la largeur), ce même réglage fait sauter le titre à
   la ligne après quasiment chaque mot. xl3 reste imposant sans ce défaut. */
.lcm-lettre-hero__titre {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl-3);
	line-height: 1.08;
}
.lcm-recevez-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	margin-top: 48px;
}
.lcm-recevez-grid__item {
	border-left: 2px solid rgba(145, 122, 77, .3);
	padding: 8px 0 8px 24px;
}
.lcm-recevez-grid__item h3 {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.15rem;
	font-weight: 400;
}
.lcm-recevez-grid__item p {
	margin-top: 8px;
	opacity: .75;
	font-size: .95rem;
}
@media (max-width: 782px) {
	.lcm-recevez-grid { grid-template-columns: 1fr; }
}

.lcm-temoignages-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
	margin-top: 48px;
}
.lcm-temoignage {
	border-left: 2px solid var(--wp--preset--color--marron);
	padding-left: 24px;
}
.lcm-temoignage__citation {
	font-style: italic;
	font-size: 1.02rem;
	line-height: 1.6;
	opacity: .9;
}
.lcm-temoignage__nom {
	margin-top: 16px;
	font-family: var(--wp--preset--font-family--display);
}
.lcm-temoignage__role {
	margin-top: 2px;
	font-family: var(--wp--preset--font-family--interface);
	font-size: .7rem;
	letter-spacing: .08em;
	opacity: .55;
}
@media (max-width: 900px) {
	.lcm-temoignages-grid { grid-template-columns: 1fr; gap: 32px; }
}

.lcm-abonnement-form {
	display: flex;
	gap: 12px;
	max-width: 480px;
	margin: 32px auto 0;
	flex-wrap: wrap;
	justify-content: center;
}
.lcm-abonnement-form input[type="text"],
.lcm-abonnement-form input[type="email"] {
	flex: 1 1 220px;
	border: 1px solid var(--wp--preset--color--pierre);
	background: var(--wp--preset--color--papier);
	border-radius: var(--radius-sharp);
	padding: 14px 16px;
	font-family: var(--wp--preset--font-family--corps);
	font-size: .95rem;
}
.lcm-abonnement-form input[type="text"]:focus,
.lcm-abonnement-form input[type="email"]:focus {
	border-color: var(--wp--preset--color--marron);
	outline: none;
}
.lcm-abonnement-form.is-loading { opacity: .6; }
.lcm-abonnement-form__message {
	flex-basis: 100%;
	margin: 0;
	font-size: .82rem;
	min-height: 1.2em;
}
.lcm-abonnement-form__message.is-success { color: var(--wp--preset--color--marron); }
.lcm-abonnement-form__message.is-error { color: #b23a2d; }
.lcm-abonnement-form__consent {
	flex-basis: 100%;
	order: 3;
	margin: 4px 0 0;
	font-family: var(--wp--preset--font-family--interface);
	font-size: .72rem;
	line-height: 1.5;
	opacity: .65;
}
.lcm-abonnement-form__consent a {
	text-decoration: underline;
	opacity: 1;
}
.lcm-abonnement-caption {
	margin-top: 16px;
	font-family: var(--wp--preset--font-family--interface);
	font-size: .7rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	opacity: .5;
}

/* --------------------------------------------------------------------------
   QUIZ — onglet Explorer #quiz. Carte de lancement centrée, puis question
   unique affichée à la fois (progression + options texte, sans encadré
   lourd), puis écran de résultat (couverture + fiche + deux pistes
   secondaires). Tout piloté par le JS inline du bloc lcm/quiz.
   -------------------------------------------------------------------------- */
.lcm-quiz-bandeau {
	/* Largeur/fond gérés par .lcm-band-full + .lcm-section--wide (même
	   traitement que la bande "Continuer à explorer") — cette règle ne
	   fixe plus que le padding interne et le centrage du texte. */
	text-align: center;
}
.lcm-quiz-bandeau > * { max-width: 60ch; margin-left: auto; margin-right: auto; }
.lcm-quiz { max-width: 720px; margin: 56px auto 0; text-align: center; }

.lcm-quiz-launch__icon {
	width: 64px;
	height: 64px;
	margin: 0 auto 20px;
	border-radius: 50%;
	border: 1px solid var(--wp--preset--color--pierre);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--or);
}
.lcm-quiz-launch__icon svg { width: 26px; height: 26px; }

.lcm-quiz-question { text-align: left; max-width: 620px; margin-inline: auto; }
.lcm-quiz-progress {
	font-family: var(--wp--preset--font-family--interface);
	font-size: .7rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	opacity: .5;
}
.lcm-quiz-question__texte {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl-2);
	margin-top: 12px;
	font-weight: 300;
}
.lcm-quiz-options { margin-top: 32px; }
.lcm-quiz-option {
	display: block;
	width: 100%;
	text-align: left;
	background: none;
	border: none;
	border-bottom: 1px solid var(--wp--preset--color--pierre);
	padding: 18px 4px;
	font-family: var(--wp--preset--font-family--corps, inherit);
	font-size: 1.05rem;
	color: var(--wp--preset--color--encre);
	cursor: pointer;
	transition: color var(--transition-fast), padding-left var(--transition-fast);
}
.lcm-quiz-option:hover {
	color: var(--wp--preset--color--marron);
	padding-left: 10px;
}
.lcm-quiz-back {
	margin-top: 24px;
	background: none;
	border: none;
	padding: 0;
	font-family: var(--wp--preset--font-family--interface);
	font-size: .85rem;
	opacity: .6;
	cursor: pointer;
	transition: opacity var(--transition-fast);
}
.lcm-quiz-back:hover { opacity: 1; }

.lcm-quiz-result__intro { margin-bottom: 40px; }
.lcm-quiz-result__titre {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl-2);
	margin-top: 12px;
	font-weight: 300;
}
.lcm-quiz-result__grid {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: 48px;
	text-align: left;
	align-items: start;
}
.lcm-quiz-result__cover { width: 100%; }
.lcm-quiz-result__tagline {
	font-family: var(--wp--preset--font-family--interface);
	font-size: .72rem;
	letter-spacing: .1em;
	color: var(--wp--preset--color--marron);
}
.lcm-quiz-result__booktitle {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl);
	margin-top: 8px;
	font-weight: 400;
}
.lcm-quiz-result__byline {
	margin-top: 8px;
	opacity: .7;
	font-size: .95rem;
}
.lcm-quiz-result__resume {
	margin-top: 20px;
	line-height: 1.7;
	opacity: .9;
}
.lcm-quiz-result__grid .lcm-tag-pills { margin-top: 20px; }

.lcm-quiz-mini-grid {
	margin-top: 56px;
	padding-top: 32px;
	border-top: 1px solid var(--wp--preset--color--pierre);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	text-align: left;
}
.lcm-quiz-mini {
	display: flex;
	align-items: center;
	gap: 16px;
	text-decoration: none;
	color: inherit;
}
.lcm-quiz-mini__cover {
	width: 56px;
	flex-shrink: 0;
	padding: 10px;
}
.lcm-quiz-mini__titre {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.05rem;
	margin-top: 2px;
	transition: color var(--transition-fast);
}
.lcm-quiz-mini:hover .lcm-quiz-mini__titre { color: var(--wp--preset--color--marron); }
.lcm-quiz-mini__auteur {
	margin-top: 2px;
	font-size: .78rem;
	opacity: .6;
}

.lcm-quiz-restart {
	margin-top: 40px;
	background: none;
	border: none;
	font-family: var(--wp--preset--font-family--interface);
	font-size: .85rem;
	opacity: .6;
	cursor: pointer;
	transition: opacity var(--transition-fast);
}
.lcm-quiz-restart:hover { opacity: 1; }

@media (max-width: 700px) {
	.lcm-quiz-result__grid { grid-template-columns: 1fr; }
	.lcm-quiz-result__cover { max-width: 220px; margin: 0 auto; }
	.lcm-quiz-mini-grid { gap: 16px; }
	.lcm-quiz-mini { gap: 10px; }
	.lcm-quiz-mini__cover { width: 40px; padding: 6px; }
	.lcm-quiz-mini__titre { font-size: .92rem; }
}

/* ==========================================================================
   Carte-réseau interactive des territoires de l'imaginaire (Explorer > Genres)
   ========================================================================== */

.lcm-carte-genres {
	margin-top: 40px;
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
	gap: 32px;
	align-items: start;
}

.lcm-carte-genres__canvas {
	position: relative;
	width: 100%;
	aspect-ratio: 10 / 7;
	background: var(--wp--preset--color--creme);
	border: 1px solid var(--wp--preset--color--pierre);
	border-radius: var(--radius-sharp);
	overflow: hidden;
}

.lcm-carte-genres__liens {
	position: absolute;
	/* Même inset que .lcm-carte-genres__noeuds (voir commentaire là-bas) —
	   les deux boîtes doivent rester identiques en taille/position pour que
	   les traits (coordonnées viewBox) pointent toujours pile sur le centre
	   des nœuds (coordonnées en %). */
	inset: 32px;
	width: auto;
	height: auto;
}

.lcm-carte-genres__ligne--plein {
	stroke: var(--wp--preset--color--marron);
	stroke-width: 1.5;
	opacity: .28;
	transition: opacity var(--transition-base), stroke-width var(--transition-base);
}
.lcm-carte-genres__ligne--pointille {
	stroke: var(--wp--preset--color--marron);
	stroke-width: 1.2;
	stroke-dasharray: 4 5;
	opacity: .2;
	transition: opacity var(--transition-base), stroke-width var(--transition-base);
}
.lcm-carte-genres__ligne.is-active {
	opacity: .8;
	stroke-width: 2.2;
}

.lcm-carte-genres__noeuds {
	position: absolute;
	/* Marge intérieure pour que les nœuds proches d'un bord (Mythopœïa en
	   haut, Réalisme magique en bas, Fantastique/Science-fiction sur les
	   côtés...) aient de l'air autour d'eux plutôt que de toucher la bordure
	   du cadre. Le SVG des liens partage exactement le même inset juste
	   en-dessous, sinon les traits ne pointeraient plus vers les nœuds. */
	inset: 32px;
}

.lcm-carte-genres__noeud {
	position: absolute;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 2px;
	border-radius: 50%;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--interface);
	color: var(--wp--preset--color--encre);
	border: 1px solid var(--wp--preset--color--pierre);
	box-shadow: var(--shadow-resting);
	transition: transform var(--transition-base), box-shadow var(--transition-base), opacity var(--transition-base);
	padding: 4px;
}

/* Fond neutre pour les nœuds secondaires (mouvements/hybrides) — les
   territoires reçoivent leur fond via une classe lcm-fake-cover--* (voir
   plus haut dans ce fichier) : cette règle générique doit rester en-dessous
   en spécificité, sinon elle écrase le dégradé de teinte (deux classes ==
   même spécificité, et l'ordre du fichier place cette règle après). */
.lcm-carte-genres__noeud--secondaire {
	background: var(--wp--preset--color--papier);
}

.lcm-carte-genres__noeud--territoire {
	width: 120px;
	height: 120px;
	color: var(--wp--preset--color--papier);
	border: none;
	z-index: 2;
}
.lcm-carte-genres__noeud--territoire .lcm-carte-genres__noeud-emoji { font-size: 1.3rem; }
.lcm-carte-genres__noeud--territoire .lcm-carte-genres__noeud-label {
	font-family: var(--wp--preset--font-family--display);
	font-size: .8rem;
	line-height: 1.15;
	padding: 0 8px;
	overflow-wrap: break-word;
	hyphens: auto;
}

.lcm-carte-genres__noeud--secondaire {
	width: 70px;
	height: 70px;
	font-size: .64rem;
	opacity: .85;
	z-index: 1;
}
.lcm-carte-genres__noeud--secondaire .lcm-carte-genres__noeud-label {
	line-height: 1.15;
	padding: 0 6px;
	overflow-wrap: break-word;
	hyphens: auto;
}

.lcm-carte-genres__noeud:hover,
.lcm-carte-genres__noeud.is-survole,
.lcm-carte-genres__noeud.is-actif {
	transform: translate(-50%, -50%) scale(1.08);
	box-shadow: var(--shadow-floating);
	opacity: 1;
}
.lcm-carte-genres__noeud.is-lie { opacity: 1; }
.lcm-carte-genres__noeuds:has(.is-survole, .is-actif) .lcm-carte-genres__noeud:not(.is-lie, .is-survole, .is-actif) {
	opacity: .45;
}

/* Étiquettes des mouvements/hybrides : invisibles par défaut, révélées au
   survol/clic d'un territoire relié (voir js/carte-genres.js). Pas de
   cercle : juste un texte dans un petit encadré, positionné comme les
   nœuds l'étaient avant, mais sans jamais entrer en collision puisqu'une
   seule étiquette (ou un petit groupe, selon le territoire actif) est
   visible à la fois. */
.lcm-carte-genres__etiquettes {
	position: absolute;
	inset: 32px;
	pointer-events: none;
}
.lcm-carte-genres__etiquette {
	position: absolute;
	transform: translate(-50%, -50%);
	white-space: nowrap;
	background: var(--wp--preset--color--papier);
	border: 1px solid var(--wp--preset--color--pierre);
	color: var(--wp--preset--color--marron);
	font-family: var(--wp--preset--font-family--interface);
	font-size: .65rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 999px;
	opacity: 0;
	transition: opacity var(--transition-base);
	z-index: 3;
}
.lcm-carte-genres__etiquette.is-visible { opacity: 1; }

.lcm-carte-genres__panel {
	background: var(--wp--preset--color--creme);
	border: 1px solid var(--wp--preset--color--pierre);
	border-radius: var(--radius-sharp);
	padding: 28px;
	min-height: 220px;
}
.lcm-carte-genres__panel-placeholder {
	opacity: .6;
	font-style: italic;
	font-size: .9rem;
}
.lcm-carte-genres__panel-head {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.3rem;
}
.lcm-carte-genres__panel-desc {
	margin-top: 10px;
	opacity: .85;
	font-size: .9rem;
	line-height: 1.6;
}

.lcm-tag-pill--muet {
	opacity: .55;
	cursor: default;
}

/* Alternative texte complet — utile en lecture d'écran, recherche dans la
   page, et comme repli si la carte-réseau ne convient pas à l'écran. */
.lcm-carte-genres-fallback {
	margin-top: 32px;
	border-top: 1px solid var(--wp--preset--color--pierre);
	padding-top: 24px;
}
.lcm-carte-genres-fallback__item {
	padding: 14px 0;
	border-bottom: 1px solid var(--wp--preset--color--pierre);
}
.lcm-carte-genres-fallback__item summary {
	cursor: pointer;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.05rem;
	display: flex;
	align-items: center;
	gap: 10px;
}

/* Légende sous le canevas — reprend le trio Grand genre / Territoire
   culturel / Hybride, comme le prototype. Purement informative. */
.lcm-carte-genres__legende {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
	margin-top: 20px;
	font-size: .8rem;
	opacity: .75;
}
.lcm-carte-genres__legende span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.lcm-legende-puce {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: 1px solid var(--wp--preset--color--encre);
}
.lcm-legende-puce--grand-genre { background: transparent; }
.lcm-legende-puce--territoire-culturel {
	background: var(--wp--preset--color--marron);
	border-color: var(--wp--preset--color--marron);
}
.lcm-legende-trait {
	display: inline-block;
	width: 20px;
	height: 0;
	border-top: 1px solid var(--wp--preset--color--encre);
}
.lcm-carte-genres__legende-aide {
	font-style: italic;
	opacity: .8;
}

/* Panneau de détail : liste « Hybrides & connexions ». */
.lcm-carte-genres__connexions {
	margin-top: 8px;
	list-style: none;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.lcm-carte-genres__connexions li {
	font-size: .88rem;
}
.lcm-carte-genres__connexions a { color: var(--wp--preset--color--marron); }
.lcm-carte-genres__connexions-fleche {
	color: var(--wp--preset--color--marron);
	margin-right: 2px;
}
.lcm-carte-genres__connexions-avec {
	opacity: .6;
	font-size: .82rem;
}

/* Mouvements littéraires — grille de cartes narratives (2 col). */
.lcm-mouvements-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 32px 48px;
}
.lcm-mouvement-card {
	padding-top: 20px;
	border-top: 1px solid var(--wp--preset--color--pierre);
}
.lcm-mouvement-card__titre {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.3rem;
	color: var(--wp--preset--color--encre);
	text-decoration: none;
}
a.lcm-mouvement-card__titre:hover { color: var(--wp--preset--color--marron); }
.lcm-mouvement-card__desc {
	margin-top: 10px;
	opacity: .8;
	font-size: .92rem;
	line-height: 1.6;
}

/* Hybrides — grille de cartes compactes (3 col). */
.lcm-hybrides-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
.lcm-hybride-card {
	padding: 20px 24px;
	border: 1px solid var(--wp--preset--color--pierre);
	border-radius: var(--radius-sharp);
}
.lcm-hybride-card__titre {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.15rem;
	color: var(--wp--preset--color--encre);
	text-decoration: none;
}
a.lcm-hybride-card__titre:hover { color: var(--wp--preset--color--marron); }
.lcm-hybride-card__sous-titre {
	margin-top: 6px;
	font-size: .7rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	opacity: .55;
}

@media (max-width: 900px) {
	.lcm-mouvements-grid { grid-template-columns: 1fr; }
	.lcm-hybrides-grid { grid-template-columns: repeat(2, 1fr); }
	.lcm-carte-genres__etiquette { font-size: .58rem; padding: 3px 8px; }
	.lcm-carte-genres { grid-template-columns: 1fr; }
	.lcm-carte-genres__canvas { aspect-ratio: 1 / 1; }
	.lcm-carte-genres__noeud--territoire { width: 92px; height: 92px; }
	.lcm-carte-genres__noeud--territoire .lcm-carte-genres__noeud-label { font-size: .7rem; }
	.lcm-carte-genres__noeud--secondaire { width: 52px; height: 52px; font-size: .56rem; }
}

/* ==========================================================================
   ACCUEIL — "L'écosystème" (bande sombre de fermeture, avant le pied de page)
   ========================================================================== */
.lcm-ecosysteme {
	padding-block: 64px;
}
.lcm-ecosysteme__titre {
	margin-top: 16px;
	max-width: 22ch;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl-2);
	line-height: 1.1;
}
.lcm-ecosysteme__intro {
	margin-top: 20px;
	max-width: 60ch;
	opacity: .85;
}
.lcm-ecosysteme__grille {
	margin-top: 48px;
	padding-top: 40px;
	border-top: 1px solid rgba(247, 243, 236, .15);
	display: grid;
	/* auto-fit (pas repeat(5,...)) : se recompacte proprement si une ou
	   plusieurs étapes sont masquées (.lcm-ecosysteme__etape--masquee),
	   sans laisser de colonnes vides. Cf. accueil-ecosysteme.php. */
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 32px;
}
.lcm-ecosysteme__etape--masquee {
	display: none;
}
.lcm-ecosysteme__numero {
	font-family: var(--wp--preset--font-family--display);
	font-size: .8rem;
	letter-spacing: .05em;
	color: var(--wp--preset--color--or);
	opacity: .8;
}
.lcm-ecosysteme__etape-titre {
	margin-top: 8px;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.4rem;
	color: var(--wp--preset--color--papier);
}
.lcm-ecosysteme__etape-texte {
	margin-top: 12px;
	font-size: .85rem;
	line-height: 1.5;
	opacity: .7;
}
.lcm-ecosysteme__liens {
	margin-top: 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.lcm-ecosysteme__liens a {
	font-size: .85rem;
	color: var(--wp--preset--color--or);
	opacity: .85;
	text-decoration: none;
	transition: opacity var(--transition-base);
}
.lcm-ecosysteme__liens a:hover {
	opacity: 1;
	text-decoration: underline;
}
@media (max-width: 900px) {
	.lcm-ecosysteme__grille {
		grid-template-columns: repeat(2, 1fr);
		gap: 40px 32px;
	}
}
@media (max-width: 600px) {
	.lcm-ecosysteme__grille {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
   PAGE CHECKOUT (id 9, titre WP renommé "Validation" par Stéphanie) — le
   titre de page reste visible (même gabarit que les autres pages, on ne le
   masque plus). La grille à deux colonnes du bloc Paiement (Coordonnées à
   gauche, Résumé de la commande à droite) est comprimée dans le conteneur
   "wide" du thème (~760px) : le nom d'article héritait par défaut de la
   taille de titre géante du thème (h3 ~51px) et débordait de la colonne. On
   élargit un peu le conteneur et on réduit la taille du nom d'article à une
   taille de liste normale, plus lisible dans une colonne étroite.
   -------------------------------------------------------------------------- */
body.page-id-9 .wp-block-woocommerce-checkout {
	max-width: 1100px;
}
body.page-id-9 .wc-block-components-product-name {
	overflow-wrap: break-word;
	word-break: normal;
	max-width: none;
	font-size: 0.95rem !important;
	line-height: 1.3 !important;
}
@media (max-width: 782px) {
	body.page-id-9 .wc-block-checkout__sidebar,
	body.page-id-9 .wc-block-checkout__main {
		width: 100%;
	}
}

/* Fiche Ressource individuelle sur mobile : .lcm-ressource-breadcrumb et
   .lcm-ressource-content n'ont pas de marge latérale propre (seulement un
   max-width centré), donc le texte touche les bords de l'écran une fois la
   grille à 1100px devenue plus large que le viewport. */
@media (max-width: 600px) {
	.lcm-ressource-breadcrumb,
	.lcm-ressource-content {
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* --------------------------------------------------------------------------
   BOUTON "RETOUR EN HAUT" — flèche flottante en bas à droite, même or que la
   scrollbar (--wp--preset--color--or), qui vire marron au survol pour rester
   cohérent avec elle. Injecté et affiché/masqué en JS (voir functions.php,
   lcm_bouton_retour_haut()) selon la position de défilement.
   -------------------------------------------------------------------------- */
.lcm-retour-haut {
	position: fixed;
	right: 24px;
	bottom: 24px;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--or);
	color: var(--wp--preset--color--papier);
	border: none;
	border-radius: var(--radius-sharp);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity var(--transition-base), transform var(--transition-base), background var(--transition-base);
	z-index: 90;
}
.lcm-retour-haut.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.lcm-retour-haut:hover {
	background: var(--wp--preset--color--marron);
}
.lcm-retour-haut svg {
	width: 18px;
	height: 18px;
}


/* Notifications WooCommerce (panier, paiement, erreurs) — alignees sur le design du site plutot que le style par defaut. */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
  margin: 0 0 24px;
  padding: 16px 20px;
  list-style: none;
  background: var(--wp--preset--color--papier);
  border: 1px solid var(--wp--preset--color--pierre);
  border-left: 3px solid var(--wp--preset--color--sauge);
  border-radius: 4px;
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--wp--preset--color--encre);
}
.woocommerce-error {
  border-left-color: #A9503D;
}
.woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-info::before {
  content: none;
}
.woocommerce-error li {
  list-style: none;
  margin: 0;
}
.woocommerce-error li + li {
  margin-top: 8px;
}
.woocommerce-message {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.woocommerce-message a.button.wc-forward,
.woocommerce-error a.button,
.woocommerce-info a.button {
  background: var(--wp--preset--color--marron);
  color: #fff !important;
  border: none;
  border-radius: 3px;
  padding: 8px 16px;
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.woocommerce-message a.button.wc-forward:hover,
.woocommerce-error a.button:hover,
.woocommerce-info a.button:hover {
  background: var(--wp--preset--color--marron-profond);
}


/* Notifications WooCommerce Blocks (panier/checkout) : panier ajoute, erreurs de paiement, etc. Structure differente des notices classiques ci-dessus (.wc-block-components-notice-banner). */
.wc-block-components-notice-banner.is-success,
.wc-block-components-notice-banner.is-info,
.wc-block-components-notice-banner.is-warning,
.wc-block-components-notice-banner.is-error {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 24px;
  padding: 16px 20px;
  background: var(--wp--preset--color--papier);
  border: 1px solid var(--wp--preset--color--pierre);
  border-left: 3px solid var(--wp--preset--color--sauge);
  border-radius: 4px;
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--wp--preset--color--encre);
}
.wc-block-components-notice-banner.is-error,
.wc-block-components-notice-banner.is-warning {
  border-left-color: #A9503D;
}
.wc-block-components-notice-banner.is-success > svg,
.wc-block-components-notice-banner.is-info > svg {
  flex-shrink: 0;
  fill: var(--wp--preset--color--sauge);
}
.wc-block-components-notice-banner.is-error > svg,
.wc-block-components-notice-banner.is-warning > svg {
  flex-shrink: 0;
  fill: #A9503D;
}
.wc-block-components-notice-banner__content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.wc-block-components-notice-banner__content a.button.wc-forward.wp-element-button,
.wc-block-components-notice-banner__content a.button {
  background: var(--wp--preset--color--marron) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 3px !important;
  padding: 8px 16px !important;
  font-family: 'Manrope', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  white-space: nowrap;
  display: inline-block;
}
.wc-block-components-notice-banner__content a.button.wc-forward.wp-element-button:hover,
.wc-block-components-notice-banner__content a.button:hover {
  background: var(--wp--preset--color--marron-profond) !important;
}
.wc-block-components-notice-banner__dismiss {
  background: transparent;
  border: none;
  color: var(--wp--preset--color--encre);
  opacity: .5;
  cursor: pointer;
}
.wc-block-components-notice-banner__dismiss:hover {
  opacity: 1;
}


/* Tiroir mini-panier trop large sur grands ecrans : on le contraint a une largeur raisonnable, avec un contenu plus resserre/aere plutot qu'etale. */
.wc-block-mini-cart__drawer,
.wc-block-components-drawer {
  max-width: 440px !important;
  width: 100% !important;
}
.wc-block-mini-cart-items,
.wc-block-mini-cart__footer,
.wc-block-mini-cart__title {
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box;
}
.wc-block-mini-cart-items__row {
  align-items: flex-start;
  gap: 16px;
}
.wc-block-mini-cart-items__image {
  max-width: 72px;
}

/* Panneau mini-panier impossible a faire defiler sur mobile : aucun
   element de ce panneau n'avait overflow-y:auto (verifie en direct — tout
   etait a "visible"), donc avec plusieurs articles le contenu depassait
   simplement l'ecran sans aucun moyen d'y acceder (total et bouton
   "Valider la commande" invisibles). On reconstruit ici la mise en page en
   colonne flex : titre et pied (sous-total + bouton) restent fixes, seule
   la liste d'articles au centre defile. */
.wc-block-components-drawer__content {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
/* Deux wrappers intermediaires entre .drawer__content et le bloc de
   contenu reel (template-part WooCommerce) : sans le meme traitement flex
   ici, un simple height:100% plus bas dans l'arbre reste sans effet (une
   hauteur en % a besoin d'un parent a hauteur definie A CHAQUE niveau). */
.wc-block-mini-cart__template-part,
.wp-block-woocommerce-mini-cart-contents,
.wp-block-woocommerce-filled-mini-cart-contents-block {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
.wc-block-mini-cart__title {
  flex-shrink: 0;
}
.wc-block-mini-cart__items {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
}
.wc-block-mini-cart__footer {
  flex-shrink: 0;
}

/* Page "Soutenir le portail" — les 2 grilles (formules d'adhesion, autres
   facons de soutenir) etaient en display:grid;repeat(3,1fr) fige en style
   inline, sans le moindre point de rupture mobile : 3 cartes ecrasees sur
   un ecran de telephone. Classes dediees pour pouvoir les empiler en 1
   colonne sous 600px (les valeurs desktop reprennent exactement l'inline
   d'origine). */
.lcm-soutenir-formules {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  align-items: stretch;
}
.lcm-soutenir-autres {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 600px) {
  .lcm-soutenir-formules,
  .lcm-soutenir-autres {
    grid-template-columns: 1fr;
  }
}


/* Apercu produit boutique en fenetre modale (clic sur une fiche non-cliquable auparavant). */
.lcm-boutique-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.lcm-boutique-modal[hidden] {
  display: none;
}
.lcm-boutique-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(26, 22, 20, 0.55);
}
.lcm-boutique-modal__panel {
  position: relative;
  background: var(--wp--preset--color--papier);
  border-radius: 6px;
  max-width: 720px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  display: flex;
  flex-wrap: wrap;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.lcm-boutique-modal__visual {
  flex: 1 1 260px;
  min-width: 260px;
  min-height: 260px;
  position: relative;
}
.lcm-boutique-modal__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.lcm-boutique-modal__body {
  flex: 1 1 320px;
  min-width: 280px;
  padding: 40px 36px;
  box-sizing: border-box;
}
.lcm-boutique-modal__desc {
  font-size: .95rem;
  opacity: .85;
}
.lcm-boutique-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.85);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}
@media (max-width: 640px) {
  .lcm-boutique-modal__panel {
    flex-direction: column;
    max-height: 92vh;
  }
  .lcm-boutique-modal__visual {
    min-width: 100%;
    height: 220px;
  }
}

/* Panier vide (bloc natif WooCommerce) : l'icone livree par defaut (un
   visage triste plein, sans rapport avec l'identite du site) ne correspond
   a rien de notre design - masquee plutot que redessinee, les autres etats
   vides du site (Mes Carnets sans rien de sauvegarde, etc.) restent deja
   uniquement textuels sans icone, c'est le meme parti pris ici. */
.wc-block-cart__empty-cart__title.with-empty-cart-icon svg,
.wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
  display: none;
}

/* Page "Boutique" native de WooCommerce (creee automatiquement par le
   plugin, atterrit sur /boutique-2/ car /boutique/ est deja pris par notre
   vitrine editoriale) : pas destinee a etre parcourue par les visiteuses en
   temps normal (aucun lien ne pointe vers elle), mais habillee par securite
   pour rester coherente avec le reste du site si quelqu'un y arrive quand
   meme - meme traitement que le filtre de la Bibliotheque pour la liste
   deroulante de tri, et la meme famille de police/couleurs pour les fiches
   produit natives. */
.woocommerce-ordering select.orderby {
  border: 1px solid var(--wp--preset--color--pierre);
  border-radius: var(--radius-sharp);
  background: var(--wp--preset--color--papier);
  padding: 10px 14px;
  font-family: var(--wp--preset--font-family--interface);
  font-size: .875rem;
  color: var(--wp--preset--color--encre);
}
.woocommerce-ordering select.orderby:focus {
  outline: none;
  border-color: var(--wp--preset--color--marron);
}
ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 300;
  color: var(--wp--preset--color--encre);
}
ul.products li.product .price {
  font-family: var(--wp--preset--font-family--interface);
  color: var(--wp--preset--color--marron);
}
.woocommerce-result-count,
.woocommerce-breadcrumb {
  font-family: var(--wp--preset--font-family--interface);
  color: var(--wp--preset--color--encre);
  opacity: .7;
}

/* Menu "Mon compte" (page /mon-compte/, tableau de bord natif WooCommerce) -
   les liens (Commandes, Telechargements, Adresses...) n'avaient aucun
   retour visuel au survol. Pas de soulignement (le reste du site n'en
   utilise pas pour ce type de lien) : meme fond leger que
   .lcm-espace-lettre-row:hover, le motif deja en place pour une liste de
   liens similaire plus haut sur cette meme page. La page active garde son
   soulignement fixe (deja en place via le theme parent). Le !important sur
   text-decoration est necessaire : WooCommerce force lui-meme un
   soulignement au survol (regle
   ".woocommerce-account .woocommerce-MyAccount-navigation li a:hover" dans
   woocommerce-blocktheme.css), plus specifique que sans lui. */
.woocommerce-MyAccount-navigation a {
  display: inline-block;
  padding: 4px 10px;
  margin: -4px -10px;
  border-radius: var(--radius-sharp);
  text-decoration: none !important;
  transition: background-color var(--transition-fast);
}
.woocommerce-MyAccount-navigation-link:not(.is-active) a:hover,
.woocommerce-MyAccount-navigation-link:not(.is-active) a:focus-visible {
  background: color-mix(in srgb, var(--wp--preset--color--marron) 8%, transparent);
}

/* Message d'accueil du tableau de bord "Mon compte" (paragraphe WooCommerce
   natif : "vous pouvez visualiser vos commandes recentes, gerer vos
   adresses...") - les liens dans ce texte etaient en marron comme les liens
   de la navigation, mais noyes dans le paragraphe : le marron (#6B3F2A) est
   trop proche de l'encre du corps de texte (#1A1614) pour se distinguer par
   la seule couleur. Contrairement au menu de gauche (liens autonomes, voir
   regle au-dessus), ici les liens sont DANS une phrase : un soulignement
   discret (attenue par defaut, plein au survol) est le traitement adapte a
   ce contexte, pas un simple changement de couleur. */
.woocommerce-MyAccount-content a {
  color: var(--wp--preset--color--marron);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--wp--preset--color--marron) 40%, transparent);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--transition-fast);
}
.woocommerce-MyAccount-content a:hover,
.woocommerce-MyAccount-content a:focus-visible {
  text-decoration-color: var(--wp--preset--color--marron);
}

/* Boutons "Ajouter au panier" natifs WooCommerce (grille boutique-2, ventes
   croisees "Nouveautes dans la boutique" sur le panier, fiche produit) -
   memes valeurs que .lcm-btn-solid pour qu'ils aient vraiment l'air d'un
   bouton du site plutot que d'un simple lien texte souligne. Selecteurs
   larges (.woocommerce ...) plutot que scopes a une seule page : ce meme
   bouton natif reapparait a plusieurs endroits du parcours (grille, ventes
   croisees, fiche produit), autant le couvrir partout d'un coup. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--wp--preset--color--encre);
  border: 1px solid var(--wp--preset--color--encre);
  color: var(--wp--preset--color--papier);
  border-radius: var(--radius-sharp);
  padding: 16px 32px;
  font-family: var(--wp--preset--font-family--interface);
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  text-decoration: none;
  box-shadow: none;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
  background: var(--wp--preset--color--marron);
  border-color: var(--wp--preset--color--marron);
  color: var(--wp--preset--color--papier);
}
/* Fiche produit individuelle : meme traitement de typo que la grille pour le
   titre et le prix, coherent avec .woocommerce-loop-product__title plus
   haut. */
.woocommerce div.product .product_title {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 300;
  color: var(--wp--preset--color--encre);
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--wp--preset--font-family--interface);
  color: var(--wp--preset--color--marron);
}
/* Titre "Nouveautes dans la boutique" (ventes croisees, panier vide) et
   titres de produits dans ces grilles-la : meme famille que le reste des
   titres de blocs du site. */
.wc-block-cart-cross-sells__title,
.wc-block-grid__product-name,
ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 300;
  color: var(--wp--preset--color--encre);
}
.wc-block-grid__product-price {
  font-family: var(--wp--preset--font-family--interface);
  color: var(--wp--preset--color--marron);
}

/* Bouton "Se deconnecter" de la barre de compte (Mes carnets) : meme effet
   d'assombrissement au survol que les boutons solid/Woo ci-dessus, plutot
   que de rester statique (couleur de base deja marron, on fonce vers
   marron-profond au survol pour rester coherent). */
.lcm-espace-btn-logout {
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.lcm-espace-btn-logout:hover {
  background: var(--wp--preset--color--marron-profond) !important;
  border-color: var(--wp--preset--color--marron-profond) !important;
}

/* Section "Zone sensible" (suppression de compte, Mon espace lecteur) -
   meme assombrissement au survol que le reste des boutons pleins du site,
   sur une couleur d'alerte plutot que marron pour signaler l'irreversibilite. */
#espace-suppression-compte button[type="submit"] {
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}
#espace-suppression-compte button[type="submit"]:hover {
  background: #8f2e23 !important;
  border-color: #8f2e23 !important;
}

/* Menu-ancre "Mon espace lecteur" : reprend .lcm-explorer-subnav tel quel
   (Explorer), y compris sur mobile (simple retour à la ligne, comme les
   onglets Genres/Carte/Racines/Découvrir/Parcours/Quiz d'Explorer) — pas de
   traitement mobile dédié. */

/* Grilles "sauvegardés" (Mon espace lecteur) — UNE seule grille continue par
   section (classe ".lcm-cap-grid"), plafond différent selon l'écran obtenu
   en masquant simplement les éléments au-delà du rang N via ":nth-child",
   plutôt que deux blocs de grille séparés (ancienne version) : deux grilles
   CSS empilées ne s'alignent pas forcément (nombre d'éléments pas multiple
   du nombre de colonnes), ce qui laissait des lignes orphelines / cassait
   visuellement la continuité de la grille. Ici, tant que ".is-capped" est
   présent, seuls les 4 premiers (mobile) ou 6 premiers (desktop) éléments
   restent affichés ; le bouton ".lcm-cap-toggle" retire (ou remet) cette
   classe au clic (voir JS dans mes-carnets-sauvegardes.php). */
.lcm-cap-grid.is-capped > * {
	display: none;
}
@media (max-width: 600px) {
	.lcm-cap-grid.is-capped > *:nth-child(-n+4) {
		display: block;
	}
}
@media (min-width: 601px) {
	.lcm-cap-grid.is-capped > *:nth-child(-n+6) {
		display: block;
	}
}

.lcm-cap-toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	background: none;
	border: none;
	padding: 12px;
	margin-left: -12px;
	cursor: pointer;
	list-style: none;
	border-radius: var(--radius-sharp);
	font-family: var(--wp--preset--font-family--interface);
	font-size: .85rem;
	color: var(--wp--preset--color--marron);
	transition: background-color var(--transition-fast);
}
.lcm-cap-toggle:hover {
	background: color-mix(in srgb, var(--wp--preset--color--marron) 6%, transparent);
}
.lcm-cap-toggle__chevron {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	opacity: .7;
	transition: transform var(--transition-fast);
}
.lcm-cap-toggle[aria-expanded="true"] .lcm-cap-toggle__chevron {
	transform: rotate(180deg);
}

.lcm-cap-texte-mobile {
	display: none;
}
/* Etiquette "Voir X autres" -> "Voir moins" une fois deplie, pour qu'on
   comprenne au premier coup d'oeil qu'un second clic referme (le chevron
   tourne deja, voir regle ci-dessus). */
.lcm-cap-label-open {
	display: none;
}
.lcm-cap-toggle[aria-expanded="true"] .lcm-cap-label-closed {
	display: none !important;
}
.lcm-cap-toggle[aria-expanded="true"] .lcm-cap-label-open {
	display: inline;
}

/* Rien a reveler sur desktop (ex. recommandations, plafonnees a 6 au total
   des la requete) : le declencheur ne sert alors qu'a l'usage mobile — on le
   masque sur desktop plutot que d'afficher un "Voir 0 autre" inutile. */
@media (min-width: 601px) {
	.lcm-cap-toggle--mobile-only {
		display: none;
	}
}
@media (max-width: 600px) {
	.lcm-cap-texte-mobile {
		display: inline;
	}
	.lcm-cap-texte-desktop {
		display: none;
	}
}

/* Boutons "Ajouter au panier" des BLOCS WooCommerce React (grille categorie
   /boutique-2/ via Product Collection block, et grille "Nouveautes dans la
   boutique" affichee sur le panier vide via l'ancien Products/Grid block) :
   classes differentes des boutons WooCommerce classiques traites plus haut
   (pas de "button" comme token de classe isole ici, d'ou un selecteur
   dedie). !important car ce sont des composants React avec leur propre
   feuille de style Woo Blocks, potentiellement plus specifique/tardive. */
.wc-block-grid__product-add-to-cart .add_to_cart_button,
.wp-block-woocommerce-product-button .add_to_cart_button,
a.add_to_cart_button.wp-block-button__link {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  background: var(--wp--preset--color--encre) !important;
  border: 1px solid var(--wp--preset--color--encre) !important;
  color: var(--wp--preset--color--papier) !important;
  border-radius: var(--radius-sharp) !important;
  padding: 16px 32px !important;
  font-family: var(--wp--preset--font-family--interface) !important;
  font-size: .875rem !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.wc-block-grid__product-add-to-cart .add_to_cart_button:hover,
.wp-block-woocommerce-product-button .add_to_cart_button:hover,
a.add_to_cart_button.wp-block-button__link:hover {
  background: var(--wp--preset--color--marron) !important;
  border-color: var(--wp--preset--color--marron) !important;
  color: var(--wp--preset--color--papier) !important;
}

/* Bouton "Valider la commande" : deux composants React distincts selon la
   page (Cart Block sur /panier/, Checkout Block sur /checkout/), chacun
   avec sa propre classe wc-block-components-*. */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
  background: var(--wp--preset--color--encre) !important;
  border: 1px solid var(--wp--preset--color--encre) !important;
  color: var(--wp--preset--color--papier) !important;
  border-radius: var(--radius-sharp) !important;
  padding: 16px 32px !important;
  font-family: var(--wp--preset--font-family--interface) !important;
  font-size: .875rem !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
  background: var(--wp--preset--color--marron) !important;
  border-color: var(--wp--preset--color--marron) !important;
  color: var(--wp--preset--color--papier) !important;
}

/* Lien du titre produit sur la page categorie /boutique-2/ (Product
   Collection block) : deja non souligne par defaut sur ce theme, on le
   fixe explicitement (etat normal + survol) pour eviter toute variation
   selon le navigateur. */
.wc-block-product .wp-block-post-title a,
.wc-block-product .wp-block-post-title a:hover {
  text-decoration: none;
  color: inherit;
}

/* --------------------------------------------------------------------------
   PAGE LIENS (id 2673) — page type "Linktree" construite en HTML brut
   (bloc wp:html) avec son propre titre stylise en H1 dans le contenu ; on
   masque donc le titre de page WordPress natif ("Liens") pour ne garder
   que celui du bloc, comme pour la page Checkout/Validation.
   -------------------------------------------------------------------------- */
/* Page "Inscription confirmée" (/inscription-confirmee/, id 2720) : le
   bloc lcm/inscription-confirmee affiche déjà son propre titre ("Bienvenue,
   ... !") — le titre de page générique du gabarit par défaut ferait doublon
   (comme sur /connexion/ et /mes-carnets/, qui masquent le leur de la même
   façon). */
body.page-id-2720 .wp-block-post-title {
  display: none;
}
body.page-id-2673 .wp-block-post-title {
  display: none;
}

/* --------------------------------------------------------------------------
   PAGE LIENS (id 2673) — page type "Linktree" : on masque le header (menu
   principal) et le footer du theme sur cette page uniquement, pour une mise
   en page epuree, sans navigation ni pied de page globaux.
   -------------------------------------------------------------------------- */
body.page-id-2673 header.wp-block-template-part,
body.page-id-2673 footer.wp-block-template-part {
  display: none;
}

/* --------------------------------------------------------------------------
   PAGE LIENS (id 2673) — reconstruite avec des blocs WordPress natifs
   (Titre, Paragraphes, Boutons, Reseaux sociaux) au lieu d'un bloc HTML
   unique, afin que Stephanie puisse editer les liens, les textes et la
   mise en avant directement depuis l'editeur visuel, sans toucher au code.
   Les regles ci-dessous utilisent !important + une specificite elevee car
   le theme applique des tailles de police globales en !important sur
   ".wp-block-post-content h1" et ".wp-block-post-content p" qui, sans
   cela, ecrasent silencieusement les tailles voulues ici.
   -------------------------------------------------------------------------- */
body.page-id-2673 .wp-block-post-content {
  max-width: 560px !important;
  margin: 0 auto !important;
  padding: 64px 24px 56px !important;
  text-align: center !important;
  font-family: var(--wp--preset--font-family--corps, inherit) !important;
  color: var(--wp--preset--color--marron, #6B3F2A) !important;
}

/* Badge decoratif en haut de page */
body.page-id-2673 .lcm-liens__badge {
  width: 56px;
  height: 56px;
  margin: 0 auto 28px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--or, #B8934A) 35%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
body.page-id-2673 .lcm-liens__badge::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--or, #B8934A) 18%, transparent);
}
body.page-id-2673 .lcm-liens__badge svg {
  width: 16px;
  height: 16px;
  color: var(--wp--preset--color--or, #B8934A);
}

/* Titre H1 */
body.page-id-2673 .wp-block-post-content h1.lcm-liens__title {
  font-family: var(--wp--preset--font-family--titre, serif);
  font-size: clamp(2.4rem, 6vw, 3rem);
  line-height: 1.1;
  font-weight: 400;
  color: #2a2019;
  margin: 0 0 14px !important;
}
body.page-id-2673 .wp-block-post-content h1.lcm-liens__title em {
  font-style: italic;
  color: var(--wp--preset--color--marron, #6B3F2A);
}

/* Sur-titre (tagline) */
body.page-id-2673 .wp-block-post-content p.lcm-liens__tagline {
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wp--preset--color--or, #B8934A);
  margin: 0 0 22px !important;
}

/* Description */
body.page-id-2673 .wp-block-post-content p.lcm-liens__desc {
  font-size: 0.875rem;
  line-height: 1.6;
  color: #6b5d51;
  max-width: 420px !important;
  margin: 0 auto 40px !important;
}

/* Labels de groupe (À lire / Ressources & boutique / Suivre le projet) */
body.page-id-2673 .wp-block-post-content p.lcm-liens__label {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #a8987f;
  margin: 0 0 16px !important;
  text-align: center !important;
}

/* Liste de liens (boutons natifs stylises en pilules) */
body.page-id-2673 .wp-block-post-content .wp-block-buttons.lcm-liens__group {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin: 0 0 32px !important;
}
body.page-id-2673 .wp-block-post-content .wp-block-buttons.lcm-liens__group .wp-block-button.lcm-liens__link {
  width: 100% !important;
}
body.page-id-2673 .wp-block-post-content .wp-block-buttons.lcm-liens__group .wp-block-button.lcm-liens__link > .wp-block-button__link {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 14px !important;
  padding: 16px 20px !important;
  border: 1px solid #e6ddcf !important;
  border-radius: 2px !important;
  text-decoration: none !important;
  color: #2a2019 !important;
  font-size: 1rem !important;
  background: #fff !important;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease !important;
  text-align: left !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
body.page-id-2673 .wp-block-post-content .wp-block-buttons.lcm-liens__group .wp-block-button.lcm-liens__link > .wp-block-button__link::after {
  content: "\2192";
  color: #a8987f;
  flex-shrink: 0;
  margin-left: auto;
  transition: transform 0.2s ease;
}
body.page-id-2673 .wp-block-post-content .wp-block-buttons.lcm-liens__group .wp-block-button.lcm-liens__link > .wp-block-button__link:hover {
  border-color: var(--wp--preset--color--or, #B8934A) !important;
  transform: translateY(-1px) !important;
}
body.page-id-2673 .wp-block-post-content .wp-block-buttons.lcm-liens__group .wp-block-button.lcm-liens__link > .wp-block-button__link:hover::after {
  transform: translateX(3px);
}
body.page-id-2673 .wp-block-post-content .wp-block-buttons.lcm-liens__group .wp-block-button.lcm-liens__link--featured > .wp-block-button__link {
  background: var(--wp--preset--color--marron, #6B3F2A) !important;
  border-color: var(--wp--preset--color--marron, #6B3F2A) !important;
  color: var(--wp--preset--color--papier, #F7F3EC) !important;
}
body.page-id-2673 .wp-block-post-content .wp-block-buttons.lcm-liens__group .wp-block-button.lcm-liens__link--featured > .wp-block-button__link::after {
  color: var(--wp--preset--color--papier, #F7F3EC);
}
body.page-id-2673 .wp-block-post-content .wp-block-buttons.lcm-liens__group .wp-block-button.lcm-liens__link--featured > .wp-block-button__link:hover {
  background: var(--wp--preset--color--or, #B8934A) !important;
  border-color: var(--wp--preset--color--or, #B8934A) !important;
}

/* Separateurs decoratifs */
body.page-id-2673 .lcm-liens__divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 32px;
  color: #d8cbb4;
}
body.page-id-2673 .lcm-liens__divider span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
}
body.page-id-2673 .lcm-liens__divider span.lcm-liens__divider-diamond {
  width: 7px;
  height: 7px;
  border-radius: 1px;
  background: var(--wp--preset--color--or, #B8934A);
  transform: rotate(45deg);
}

/* Reseaux sociaux (bloc natif WordPress) */
body.page-id-2673 .wp-block-post-content ul.wp-block-social-links.lcm-liens__social {
  justify-content: center !important;
  margin: 0 0 32px !important;
  gap: 10px !important;
}
body.page-id-2673 .wp-block-post-content ul.wp-block-social-links.lcm-liens__social .wp-social-link a {
  background: var(--wp--preset--color--marron, #6B3F2A) !important;
  color: var(--wp--preset--color--papier, #F7F3EC) !important;
}
body.page-id-2673 .wp-block-post-content ul.wp-block-social-links.lcm-liens__social .wp-social-link a:hover {
  background: var(--wp--preset--color--or, #B8934A) !important;
}

/* Pied de page */
body.page-id-2673 .wp-block-post-content p.lcm-liens__footer {
  margin-top: 24px !important;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: #c9bda6;
  text-align: center !important;
}

/* Icones par lien, comme dans le prototype (masque CSS + currentColor pour
   suivre automatiquement la couleur du texte, y compris en mode "featured"). */
body.page-id-2673 .wp-block-post-content .wp-block-buttons.lcm-liens__group .wp-block-button.lcm-liens__link > .wp-block-button__link::before {
  content: "";
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
body.page-id-2673 .lcm-icon-lettre > .wp-block-button__link::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'3'%20y%3D'5'%20width%3D'18'%20height%3D'14'%20rx%3D'2'%2F%3E%3Cpath%20d%3D'm3%207%209%206%209-6'%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'3'%20y%3D'5'%20width%3D'18'%20height%3D'14'%20rx%3D'2'%2F%3E%3Cpath%20d%3D'm3%207%209%206%209-6'%2F%3E%3C%2Fsvg%3E");
}
body.page-id-2673 .lcm-icon-oeuvres > .wp-block-button__link::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M4%2019.5A2.5%202.5%200%200%201%206.5%2017H20'%2F%3E%3Cpath%20d%3D'M6.5%202H20v20H6.5A2.5%202.5%200%200%201%204%2019.5v-15A2.5%202.5%200%200%201%206.5%202z'%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M4%2019.5A2.5%202.5%200%200%201%206.5%2017H20'%2F%3E%3Cpath%20d%3D'M6.5%202H20v20H6.5A2.5%202.5%200%200%201%204%2019.5v-15A2.5%202.5%200%200%201%206.5%202z'%2F%3E%3C%2Fsvg%3E");
}
body.page-id-2673 .lcm-icon-glossaire > .wp-block-button__link::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'10'%2F%3E%3Cpolygon%20points%3D'16.24%207.76%2014.12%2014.12%207.76%2016.24%209.88%209.88%2016.24%207.76'%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'10'%2F%3E%3Cpolygon%20points%3D'16.24%207.76%2014.12%2014.12%207.76%2016.24%209.88%209.88%2016.24%207.76'%2F%3E%3C%2Fsvg%3E");
}
body.page-id-2673 .lcm-icon-auteurs > .wp-block-button__link::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%2020h9'%2F%3E%3Cpath%20d%3D'M16.5%203.5a2.12%202.12%200%200%201%203%203L7%2019l-4%201%201-4Z'%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%2020h9'%2F%3E%3Cpath%20d%3D'M16.5%203.5a2.12%202.12%200%200%201%203%203L7%2019l-4%201%201-4Z'%2F%3E%3C%2Fsvg%3E");
}
body.page-id-2673 .lcm-icon-boutique > .wp-block-button__link::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M6%202%203%206v14a2%202%200%200%200%202%202h14a2%202%200%200%200%202-2V6l-3-4Z'%2F%3E%3Cpath%20d%3D'M3%206h18'%2F%3E%3Cpath%20d%3D'M16%2010a4%204%200%200%201-8%200'%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M6%202%203%206v14a2%202%200%200%200%202%202h14a2%202%200%200%200%202-2V6l-3-4Z'%2F%3E%3Cpath%20d%3D'M3%206h18'%2F%3E%3Cpath%20d%3D'M16%2010a4%204%200%200%201-8%200'%2F%3E%3C%2Fsvg%3E");
}

/* --------------------------------------------------------------------------
   EN-TETE COLLANT (sticky) : gere ici en CSS plutot que via l'attribut de
   style du bloc "En-tete" (parts/header.html), car WordPress ne peut pas
   representer z-index/background dans les attributs standard du bloc
   Groupe. Avant, ces proprietes etaient codees en dur dans le HTML du bloc
   sans etre refletees dans ses attributs JSON, ce qui rendait le bloc
   "invalide" a chaque ouverture de l'editeur (bannière "Le bloc contient du
   contenu invalide ou inattendu"), sur TOUTES les pages du site — bloquant
   de fait toute edition (textes, tailles, etc.) pour Stephanie. Meme rendu
   visuel qu'avant, juste deplace en CSS pour rester valide.
   -------------------------------------------------------------------------- */
.lcm-header {
  position: sticky;
  top: 0px;
  z-index: 50;
  background: var(--wp--preset--color--papier);
}

/* --------------------------------------------------------------------------
   PAGE LIENS — bibliotheque d'icones supplementaires, au choix, pour les
   liens de la page /liens/. Pour changer ou ajouter une icone a un lien
   depuis l'editeur (sans toucher au code) : selectionner le bouton/lien ->
   panneau lateral droit -> "Avanced" -> "Classe(s) CSS supplementaire(s)"
   -> ajouter une des classes ci-dessous (en plus de "lcm-liens__link").
   -------------------------------------------------------------------------- */
body.page-id-2673 .lcm-icon-etoile > .wp-block-button__link::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpolygon%20points%3D'12%202%2015.09%208.26%2022%209.27%2017%2014.14%2018.18%2021.02%2012%2017.77%205.82%2021.02%207%2014.14%202%209.27%208.91%208.26%2012%202'%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpolygon%20points%3D'12%202%2015.09%208.26%2022%209.27%2017%2014.14%2018.18%2021.02%2012%2017.77%205.82%2021.02%207%2014.14%202%209.27%208.91%208.26%2012%202'%2F%3E%3C%2Fsvg%3E");
}
body.page-id-2673 .lcm-icon-coeur > .wp-block-button__link::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M20.84%204.61a5.5%205.5%200%200%200-7.78%200L12%205.67l-1.06-1.06a5.5%205.5%200%200%200-7.78%207.78l1.06%201.06L12%2021.23l7.78-7.78%201.06-1.06a5.5%205.5%200%200%200%200-7.78z'%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M20.84%204.61a5.5%205.5%200%200%200-7.78%200L12%205.67l-1.06-1.06a5.5%205.5%200%200%200-7.78%207.78l1.06%201.06L12%2021.23l7.78-7.78%201.06-1.06a5.5%205.5%200%200%200%200-7.78z'%2F%3E%3C%2Fsvg%3E");
}
body.page-id-2673 .lcm-icon-image > .wp-block-button__link::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'3'%20y%3D'3'%20width%3D'18'%20height%3D'18'%20rx%3D'2'%20ry%3D'2'%2F%3E%3Ccircle%20cx%3D'8.5'%20cy%3D'8.5'%20r%3D'1.5'%2F%3E%3Cpolyline%20points%3D'21%2015%2016%2010%205%2021'%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'3'%20y%3D'3'%20width%3D'18'%20height%3D'18'%20rx%3D'2'%20ry%3D'2'%2F%3E%3Ccircle%20cx%3D'8.5'%20cy%3D'8.5'%20r%3D'1.5'%2F%3E%3Cpolyline%20points%3D'21%2015%2016%2010%205%2021'%2F%3E%3C%2Fsvg%3E");
}
body.page-id-2673 .lcm-icon-micro > .wp-block-button__link::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%201a3%203%200%200%200-3%203v8a3%203%200%200%200%206%200V4a3%203%200%200%200-3-3z'%2F%3E%3Cpath%20d%3D'M19%2010v2a7%207%200%200%201-14%200v-2'%2F%3E%3Cline%20x1%3D'12'%20y1%3D'19'%20x2%3D'12'%20y2%3D'23'%2F%3E%3Cline%20x1%3D'8'%20y1%3D'23'%20x2%3D'16'%20y2%3D'23'%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%201a3%203%200%200%200-3%203v8a3%203%200%200%200%206%200V4a3%203%200%200%200-3-3z'%2F%3E%3Cpath%20d%3D'M19%2010v2a7%207%200%200%201-14%200v-2'%2F%3E%3Cline%20x1%3D'12'%20y1%3D'19'%20x2%3D'12'%20y2%3D'23'%2F%3E%3Cline%20x1%3D'8'%20y1%3D'23'%20x2%3D'16'%20y2%3D'23'%2F%3E%3C%2Fsvg%3E");
}
body.page-id-2673 .lcm-icon-calendrier > .wp-block-button__link::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'3'%20y%3D'4'%20width%3D'18'%20height%3D'18'%20rx%3D'2'%20ry%3D'2'%2F%3E%3Cline%20x1%3D'16'%20y1%3D'2'%20x2%3D'16'%20y2%3D'6'%2F%3E%3Cline%20x1%3D'8'%20y1%3D'2'%20x2%3D'8'%20y2%3D'6'%2F%3E%3Cline%20x1%3D'3'%20y1%3D'10'%20x2%3D'21'%20y2%3D'10'%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'3'%20y%3D'4'%20width%3D'18'%20height%3D'18'%20rx%3D'2'%20ry%3D'2'%2F%3E%3Cline%20x1%3D'16'%20y1%3D'2'%20x2%3D'16'%20y2%3D'6'%2F%3E%3Cline%20x1%3D'8'%20y1%3D'2'%20x2%3D'8'%20y2%3D'6'%2F%3E%3Cline%20x1%3D'3'%20y1%3D'10'%20x2%3D'21'%20y2%3D'10'%2F%3E%3C%2Fsvg%3E");
}
body.page-id-2673 .lcm-icon-lien-externe > .wp-block-button__link::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M18%2013v6a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2V8a2%202%200%200%201%202-2h6'%2F%3E%3Cpolyline%20points%3D'15%203%2021%203%2021%209'%2F%3E%3Cline%20x1%3D'10'%20y1%3D'14'%20x2%3D'21'%20y2%3D'3'%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M18%2013v6a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2V8a2%202%200%200%201%202-2h6'%2F%3E%3Cpolyline%20points%3D'15%203%2021%203%2021%209'%2F%3E%3Cline%20x1%3D'10'%20y1%3D'14'%20x2%3D'21'%20y2%3D'3'%2F%3E%3C%2Fsvg%3E");
}
body.page-id-2673 .lcm-icon-cadeau > .wp-block-button__link::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpolyline%20points%3D'20%2012%2020%2022%204%2022%204%2012'%2F%3E%3Crect%20x%3D'2'%20y%3D'7'%20width%3D'20'%20height%3D'5'%2F%3E%3Cline%20x1%3D'12'%20y1%3D'22'%20x2%3D'12'%20y2%3D'7'%2F%3E%3Cpath%20d%3D'M12%207H7.5a2.5%202.5%200%200%201%200-5C11%202%2012%207%2012%207z'%2F%3E%3Cpath%20d%3D'M12%207h4.5a2.5%202.5%200%200%200%200-5C13%202%2012%207%2012%207z'%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpolyline%20points%3D'20%2012%2020%2022%204%2022%204%2012'%2F%3E%3Crect%20x%3D'2'%20y%3D'7'%20width%3D'20'%20height%3D'5'%2F%3E%3Cline%20x1%3D'12'%20y1%3D'22'%20x2%3D'12'%20y2%3D'7'%2F%3E%3Cpath%20d%3D'M12%207H7.5a2.5%202.5%200%200%201%200-5C11%202%2012%207%2012%207z'%2F%3E%3Cpath%20d%3D'M12%207h4.5a2.5%202.5%200%200%200%200-5C13%202%2012%207%2012%207z'%2F%3E%3C%2Fsvg%3E");
}
body.page-id-2673 .lcm-icon-message > .wp-block-button__link::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M21%2011.5a8.38%208.38%200%200%201-.9%203.8%208.5%208.5%200%200%201-7.6%204.7%208.38%208.38%200%200%201-3.8-.9L3%2021l1.9-5.7a8.38%208.38%200%200%201-.9-3.8%208.5%208.5%200%200%201%204.7-7.6%208.38%208.38%200%200%201%203.8-.9h.5a8.48%208.48%200%200%201%208%208v.5z'%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M21%2011.5a8.38%208.38%200%200%201-.9%203.8%208.5%208.5%200%200%201-7.6%204.7%208.38%208.38%200%200%201-3.8-.9L3%2021l1.9-5.7a8.38%208.38%200%200%201-.9-3.8%208.5%208.5%200%200%201%204.7-7.6%208.38%208.38%200%200%201%203.8-.9h.5a8.48%208.48%200%200%201%208%208v.5z'%2F%3E%3C%2Fsvg%3E");
}
body.page-id-2673 .lcm-icon-lieu > .wp-block-button__link::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M21%2010c0%207-9%2013-9%2013s-9-6-9-13a9%209%200%200%201%2018%200z'%2F%3E%3Ccircle%20cx%3D'12'%20cy%3D'10'%20r%3D'3'%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M21%2010c0%207-9%2013-9%2013s-9-6-9-13a9%209%200%200%201%2018%200z'%2F%3E%3Ccircle%20cx%3D'12'%20cy%3D'10'%20r%3D'3'%2F%3E%3C%2Fsvg%3E");
}
body.page-id-2673 .lcm-icon-lecture > .wp-block-button__link::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'10'%2F%3E%3Cpolygon%20points%3D'10%208%2016%2012%2010%2016%2010%208'%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'10'%2F%3E%3Cpolygon%20points%3D'10%208%2016%2012%2010%2016%2010%208'%2F%3E%3C%2Fsvg%3E");
}
body.page-id-2673 .lcm-icon-ressources > .wp-block-button__link::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M20%2020a2%202%200%200%200%202-2V8a2%202%200%200%200-2-2h-7.9a2%202%200%200%201-1.69-.9L9.6%203.9A2%202%200%200%200%207.93%203H4a2%202%200%200%200-2%202v13a2%202%200%200%200%202%202Z'%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M20%2020a2%202%200%200%200%202-2V8a2%202%200%200%200-2-2h-7.9a2%202%200%200%201-1.69-.9L9.6%203.9A2%202%200%200%200%207.93%203H4a2%202%200%200%200-2%202v13a2%202%200%200%200%202%202Z'%2F%3E%3C%2Fsvg%3E");
}
body.page-id-2673 .lcm-icon-coffret > .wp-block-button__link::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M11%2021.73a2%202%200%200%200%202%200l7-4A2%202%200%200%200%2021%2016V8a2%202%200%200%200-1-1.73l-7-4a2%202%200%200%200-2%200l-7%204A2%202%200%200%200%203%208v8a2%202%200%200%200%201%201.73Z'%2F%3E%3Cpath%20d%3D'M12%2022V12'%2F%3E%3Cpath%20d%3D'M3.29%207%2012%2012l8.71-5'%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M11%2021.73a2%202%200%200%200%202%200l7-4A2%202%200%200%200%2021%2016V8a2%202%200%200%200-1-1.73l-7-4a2%202%200%200%200-2%200l-7%204A2%202%200%200%200%203%208v8a2%202%200%200%200%201%201.73Z'%2F%3E%3Cpath%20d%3D'M12%2022V12'%2F%3E%3Cpath%20d%3D'M3.29%207%2012%2012l8.71-5'%2F%3E%3C%2Fsvg%3E");
}

/* Crédit "Visuel généré par IA" — mention discrète mais réellement lisible
   (texte HTML, pas un ::after décoratif) posée en coin bas-droit du hero,
   sur une petite pastille pour rester contrastée quelle que soit l'image de
   fond. Conforme aux recommandations de bonnes pratiques de la Commission
   européenne (AI Act, art. 50) : visible dès la première exposition, non
   masquée, et accessible aux lecteurs d'écran (vrai texte, pas une image). */
.lcm-hero-ai-credit {
  position: absolute;
  right: 20px;
  bottom: 20px;
  z-index: 1;
  margin: 0;
  padding: 5px 12px;
  font-family: var(--wp--preset--font-family--interface);
  font-size: .68rem;
  letter-spacing: .02em;
  color: var(--wp--preset--color--encre);
  background: rgba(247, 243, 236, .78);
  border-radius: 999px;
  opacity: .82;
}
@media (max-width: 782px) {
  .lcm-hero-ai-credit {
    right: 12px;
    bottom: 12px;
    font-size: .62rem;
    padding: 4px 10px;
  }
}


/* ==========================================================================
QUIZ EXPLORATEUR (/quiz/) — variante enrichie du bloc quiz existant :
dots de progression, écran de transition, résultat en profil + bundle.
========================================================================== */
.lcm-qe-dots { display: flex; justify-content: center; gap: 8px; margin-bottom: 8px; }
.lcm-qe-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	border: 1px solid var(--wp--preset--color--pierre);
	background: transparent;
}
.lcm-qe-dot.is-done { background: var(--wp--preset--color--pierre); }
.lcm-qe-dot.is-current { border-color: var(--wp--preset--color--marron); background: var(--wp--preset--color--marron); }

.lcm-qe-transition[hidden] { display: none; }
.lcm-qe-transition {
	min-height: 260px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--encre);
	color: var(--wp--preset--color--papier);
	margin: 40px calc(50% - 50vw) 0;
	width: 100vw;
	max-width: 100vw;
}
.lcm-qe-transition__texte {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-size: var(--wp--preset--font-size--xl-2);
	font-weight: 300;
}

.lcm-qe-result__intro { margin-bottom: 40px; }
.lcm-qe-result__titre {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl-2);
	margin-top: 12px;
	font-style: italic;
	font-weight: 300;
}
.lcm-qe-result__descr { max-width: 52ch; margin: 16px auto 0; opacity: .85; }
.lcm-qe-affinite { margin-top: 16px; opacity: .75; font-style: italic; }

.lcm-qe-result__grid {
	margin-top: 56px;
	padding-top: 40px;
	border-top: 1px solid var(--wp--preset--color--pierre);
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 40px;
	text-align: left;
}
.lcm-qe-section__head {
	display: flex;
	align-items: center;
	gap: 10px;
}
.lcm-qe-coffret .lcm-qe-section__head { justify-content: center; }
.lcm-qe-section__icon {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid var(--wp--preset--color--pierre);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--or);
	flex-shrink: 0;
}
.lcm-qe-section__icon svg { width: 16px; height: 16px; }
.lcm-qe-list { margin-top: 14px; padding-left: 0; list-style: none; }
.lcm-qe-list li {
	padding: 10px 0;
	border-bottom: 1px solid var(--wp--preset--color--pierre);
	font-family: var(--wp--preset--font-family--corps, inherit);
}
.lcm-qe-list li:last-child { border-bottom: none; }
.lcm-qe-section__texte { margin-top: 14px; opacity: .85; line-height: 1.6; }

.lcm-qe-coffret {
	margin-top: 56px;
	padding: 40px;
	background: var(--wp--preset--color--creme);
	text-align: center;
}
.lcm-qe-coffret__titre {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lg, 1.5rem);
	margin-top: 16px;
	font-weight: 400;
}
.lcm-qe-coffret__texte { margin-top: 10px; opacity: .8; line-height: 1.6; max-width: 60ch; margin-left: auto; margin-right: auto; }
.lcm-qe-coffret__prix {
	margin-top: 14px;
	font-family: var(--wp--preset--font-family--interface);
	font-size: 1.1rem;
	color: var(--wp--preset--color--marron);
}
.lcm-qe-coffret.lcm-card--avenir {
	text-align: center;
	display: block;
	border: 1px dashed var(--wp--preset--color--pierre);
	background: var(--wp--preset--color--papier);
}

@media (max-width: 700px) {
	.lcm-qe-result__grid { grid-template-columns: 1fr; }
	.lcm-qe-coffret { padding: 28px; }
	.lcm-qe-transition { min-height: 200px; }
}


/* ==========================================================================
QUIZ EXPLORATEUR — v2 : pastilles, livres/auteurs en fausses couvertures,
rangée lecture/racine/ressource, section "parcours", CTA newsletter.
========================================================================== */
.lcm-qe-tags { justify-content: center; margin-top: 24px; }

.lcm-qe-parcours {
	margin-top: 64px;
	padding-top: 40px;
	border-top: 1px solid var(--wp--preset--color--pierre);
	text-align: center;
}
.lcm-qe-parcours__titre {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl-2);
	margin-top: 12px;
	font-weight: 300;
}
.lcm-qe-parcours__titre em { font-style: italic; color: var(--wp--preset--color--marron); }

.lcm-qe-books-grid {
	margin-top: 24px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	text-align: left;
}
.lcm-qe-authors-grid {
	margin-top: 24px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	text-align: left;
}
.lcm-qe-cardwrap { display: flex; flex-direction: column; }
.lcm-qe-book, .lcm-qe-author { margin-bottom: 12px; }
.lcm-qe-book__desc { font-size: .82rem; opacity: .75; line-height: 1.5; margin: 0; }
.lcm-qe-author__pays {
	position: absolute;
	top: clamp(14px, 8cqw, 32px);
	left: clamp(14px, 8cqw, 32px);
	font-family: var(--wp--preset--font-family--interface);
	font-size: clamp(.6rem, 3cqw, .75rem);
	letter-spacing: .08em;
	text-transform: uppercase;
	opacity: .85;
	z-index: 1;
	text-shadow: 0 1px 6px rgba(0, 0, 0, .35);
}

.lcm-qe-3col {
	margin-top: 56px;
	padding-top: 40px;
	border-top: 1px solid var(--wp--preset--color--pierre);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
	text-align: left;
}
.lcm-qe-meta {
	margin-top: 14px;
	font-family: var(--wp--preset--font-family--interface);
	font-size: .7rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	opacity: .55;
}
.lcm-qe-card__titre {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.15rem;
	margin-top: 6px;
	font-weight: 400;
}
.lcm-qe-card__soustitre { font-style: italic; opacity: .7; margin-top: 4px; font-size: .9rem; }
.lcm-qe-section__texte { margin-top: 12px; opacity: .85; line-height: 1.6; }
.lcm-qe-cta {
	display: inline-block;
	margin-top: 16px;
	color: var(--wp--preset--color--marron);
	text-decoration: none;
	font-family: var(--wp--preset--font-family--interface);
	font-size: .85rem;
}
.lcm-qe-cta:hover { text-decoration: underline; }

.lcm-qe-newsletter {
	margin-top: 24px;
	padding: 56px 24px;
	background: var(--wp--preset--color--papier);
	text-align: center;
}
.lcm-qe-newsletter__titre {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl-2);
	margin-top: 12px;
	font-weight: 300;
}
.lcm-qe-newsletter__titre em { font-style: italic; color: var(--wp--preset--color--marron); }
.lcm-qe-newsletter__texte { max-width: 52ch; margin: 16px auto 0; opacity: .8; }

@media (max-width: 900px) {
	.lcm-qe-3col { grid-template-columns: 1fr; gap: 32px; }
	.lcm-qe-books-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.lcm-qe-books-grid { grid-template-columns: 1fr; }
	.lcm-qe-authors-grid { grid-template-columns: 1fr; }
}


/* ==========================================================================
QUIZ EXPLORATEUR — v3 : résultat en gabarit large (comme le reste du
site), newsletter en bande plein-bord, section "Que découvrir ensuite ?"
sur l'écran de lancement.
========================================================================== */
.lcm-quiz .lcm-qe-result {
	max-width: 1320px;
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	margin-top: 56px;
	padding-inline: 24px;
	box-sizing: border-box;
}

.lcm-qe-newsletter {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	box-sizing: border-box;
}

.lcm-qe-nextsteps {
	margin-top: 56px;
	padding-top: 40px;
	border-top: 1px solid var(--wp--preset--color--pierre);
	text-align: center;
}
.lcm-qe-nextsteps__grid {
	margin-top: 20px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	text-align: left;
}
.lcm-qe-nextstep {
	display: block;
	padding: 20px;
	border: 1px solid var(--wp--preset--color--pierre);
	text-decoration: none;
	color: inherit;
	transition: border-color var(--transition-base, .2s);
}
.lcm-qe-nextstep:hover { border-color: var(--wp--preset--color--marron); }
.lcm-qe-nextstep__icon {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid var(--wp--preset--color--pierre);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--or);
}
.lcm-qe-nextstep__icon svg { width: 16px; height: 16px; }
.lcm-qe-nextstep__titre {
	display: block;
	margin-top: 14px;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.05rem;
}
.lcm-qe-nextstep__texte {
	display: block;
	margin-top: 6px;
	font-size: .82rem;
	opacity: .75;
	line-height: 1.5;
}
@media (max-width: 700px) {
	.lcm-qe-nextsteps__grid { grid-template-columns: 1fr; }
}


/* ==========================================================================
PAGE GENRE — grilles Auteurs/Œuvres ramenées à 4 colonnes max sur desktop
(au lieu de 5/6), cartes plus lisibles. Scopé à .lcm-genre-detail pour ne
pas toucher Découvrir/Studio qui réutilisent les mêmes classes de grille.
========================================================================== */
.lcm-genre-detail .lcm-medaillon-grid {
	grid-template-columns: repeat(4, 1fr);
}
.lcm-genre-detail .lcm-livres-compact-grid {
	grid-template-columns: repeat(4, 1fr) !important;
}
@media (max-width: 782px) {
	.lcm-genre-detail .lcm-livres-compact-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}
@media (max-width: 900px) {
	.lcm-genre-detail .lcm-medaillon-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
	.lcm-genre-detail .lcm-medaillon-grid { grid-template-columns: repeat(2, 1fr); }
}


/* ==========================================================================
QUIZ EXPLORATEUR — v4 : cartes lecture/racine/ressource avec effet .lcm-card
(bordure + ombre + lift au survol, comme le reste du site).
========================================================================== */
.lcm-qe-section3 {
	padding: 28px;
	transition: box-shadow var(--transition-base, .2s), transform var(--transition-base, .2s), border-color var(--transition-base, .2s);
}


/* ==========================================================================
QUIZ EXPLORATEUR — v5 : écran de lancement plus proche du prototype (méta
10 questions/2 min + "cinq portes"), citation + texte enrichi sur le profil,
et la fonctionnalité "Partagez votre exploration" (carte + copier/partager).
========================================================================== */
.lcm-qe-launch__meta {
	margin-top: 14px;
	font-family: var(--wp--preset--font-family--interface);
	font-size: 0.7rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	opacity: .5;
}

.lcm-qe-portes {
	margin-top: 48px;
	padding-top: 32px;
	border-top: 1px solid var(--wp--preset--color--pierre);
}
.lcm-qe-portes__icons {
	display: flex;
	justify-content: center;
	gap: 16px;
}
.lcm-qe-portes__icon {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--wp--preset--color--pierre);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--or);
}
.lcm-qe-portes__icon svg { width: 18px; height: 18px; }
.lcm-qe-portes__texte {
	margin-top: 14px;
	font-family: var(--wp--preset--font-family--interface);
	font-size: .7rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	opacity: .5;
}

.lcm-qe-result__pretitre {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-size: 1.1rem;
	opacity: .7;
	margin-top: 4px;
}
.lcm-qe-result__quote {
	max-width: 56ch;
	margin: 18px auto 0;
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-size: 1.15rem;
	line-height: 1.5;
	color: var(--wp--preset--color--marron);
}

.lcm-qe-partage {
	margin-top: 64px;
	padding-top: 40px;
	border-top: 1px solid var(--wp--preset--color--pierre);
	text-align: center;
}
.lcm-qe-partage__titre {
	margin-top: 12px;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl-2);
	font-weight: 300;
}
.lcm-qe-partage__titre em { font-style: italic; color: var(--wp--preset--color--marron); }
.lcm-qe-partage__body {
	margin-top: 32px;
	display: grid;
	grid-template-columns: minmax(220px, 320px) 1fr;
	gap: 48px;
	align-items: center;
	text-align: left;
	max-width: 880px;
	margin-left: auto;
	margin-right: auto;
}
.lcm-qe-partage__card {
	position: relative;
	aspect-ratio: 3 / 4;
	padding: 28px;
	display: flex;
	flex-direction: column;
	color: var(--wp--preset--color--papier);
}
.lcm-qe-partage__card-icon {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,.4);
	display: flex;
	align-items: center;
	justify-content: center;
}
.lcm-qe-partage__card-icon svg { width: 18px; height: 18px; }
.lcm-qe-partage__card-marque {
	margin-top: 20px;
	font-family: var(--wp--preset--font-family--interface);
	font-size: .68rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	opacity: .85;
}
.lcm-qe-partage__card-titre {
	margin-top: auto;
	padding-top: 32px;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.4rem;
	line-height: 1.25;
}
.lcm-qe-partage__card-titre em { font-style: italic; }
.lcm-qe-partage__card-quote {
	margin-top: 24px;
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-size: .82rem;
	line-height: 1.5;
	opacity: .9;
}
.lcm-qe-partage__card-url {
	margin-top: 16px;
	font-family: var(--wp--preset--font-family--interface);
	font-size: .68rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	opacity: .75;
}
.lcm-qe-partage__texte {
	opacity: .8;
	line-height: 1.6;
	margin-bottom: 24px;
}
.lcm-qe-partage__actions button {
	display: block;
	width: 100%;
	margin-bottom: 12px;
}

.lcm-qe-toast {
	position: fixed;
	bottom: 24px;
	right: 24px;
	max-width: 320px;
	background: var(--wp--preset--color--papier);
	border: 1px solid var(--wp--preset--color--pierre);
	box-shadow: var(--shadow-raised);
	padding: 16px 20px;
	z-index: 9999;
	animation: lcm-qe-toast-in .25s ease-out;
}
.lcm-qe-toast.is-leaving { opacity: 0; transition: opacity .3s; }
.lcm-qe-toast__titre {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1rem;
}
.lcm-qe-toast__texte {
	margin-top: 4px;
	font-size: .82rem;
	opacity: .75;
}
@keyframes lcm-qe-toast-in {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 700px) {
	.lcm-qe-portes__icons { gap: 10px; }
	.lcm-qe-partage__body { grid-template-columns: 1fr; max-width: 320px; }
}


/* --------------------------------------------------------------------------
QUIZ v6 — écran de lancement style capture (gauche, sans bandeau générique),
transitions fluides entre étapes (launch/question/transition/résultat).
-------------------------------------------------------------------------- */
.lcm-quiz-launch.lcm-qe-launch--intro {
	text-align: left;
	max-width: 680px;
	margin-inline: auto;
}
.lcm-qe-launch__eyebrow {
	display: flex;
	align-items: center;
	gap: 8px;
}
.lcm-qe-launch__eyebrow-icon {
	display: inline-flex;
	color: var(--wp--preset--color--marron);
}
.lcm-qe-launch__titre {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl-2);
	margin-top: 16px;
	line-height: 1.15;
}
.lcm-qe-launch__texte {
	max-width: 58ch;
	margin-top: 20px;
	opacity: .85;
}
.lcm-qe-launch__cta {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	margin-top: 32px;
}
.lcm-qe-launch__cta .lcm-qe-launch__meta {
	margin-top: 0;
}
.lcm-qe-launch--intro .lcm-qe-portes__icons {
	justify-content: flex-start;
}
@media (max-width: 600px) {
	.lcm-quiz-launch.lcm-qe-launch--intro {
		text-align: center;
	}
	.lcm-qe-launch--intro .lcm-qe-portes__icons {
		justify-content: center;
	}
	.lcm-qe-launch__cta {
		flex-direction: column;
		align-items: center;
		gap: 12px;
	}
	.lcm-quiz-question {
		text-align: center;
	}
}

/* Transitions fluides — fondu + léger glissement à chaque changement d'étape */
@keyframes lcm-qe-stepfade {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: translateY(0); }
}
.lcm-qe-step-in {
	animation: lcm-qe-stepfade .55s cubic-bezier(.16,.84,.44,1) both;
}
@media (prefers-reduced-motion: reduce) {
	.lcm-qe-step-in { animation: none; }
}


/* Espace entre la bande CTA newsletter (essai) et le footer */
.lcm-essai-cta {
	margin-bottom: 40px !important;
}


/* Quiz — invite optionnelle a creer un compte, sous la newsletter */
.lcm-qe-account {
	margin-top: 64px;
	padding: 24px;
	text-align: center;
	opacity: .85;
}
.lcm-qe-account__texte {
	font-size: .9rem;
	margin-bottom: 12px;
}


/* Page Explorer — CTA distinct vers le Quiz des explorateurs (different de la Boussole de lecture) */
.lcm-explorer-quiz-cta {
	margin-top: 28px;
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
}
.lcm-explorer-quiz-cta__texte {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-size: var(--wp--preset--font-size--lg, 1.25rem);
	opacity: .9;
	margin: 0;
}
@media (max-width: 600px) {
	.lcm-explorer-quiz-cta { flex-direction: column; align-items: flex-start; gap: 12px; }
}


/* Espace entre la section precedente et le bandeau Concepts lies */
.lcm-essai-concepts {
	margin-top: 40px !important;
}


/* Espace sous le formulaire d'abonnement de la page La Lettre (id=abonnement) : evite qu'il colle a la fois a la section au-dessus et au footer en dessous. */
#abonnement {
	margin-top: 56px !important;
	margin-bottom: 64px !important;
}

/* Meme chose pour le Quiz des explorateurs (/quiz/) : .lcm-quiz n'avait pas de marge basse, donc le launch (etat par defaut) colle directement au footer. */
.lcm-quiz {
	margin-bottom: 64px;
}

/* Resultats du quiz sur mobile : 2 cartes par ligne (oeuvres + auteurs) au lieu d'une seule colonne. */
@media (max-width: 640px) {
	.lcm-qe-books-grid,
	.lcm-qe-authors-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}
}

/* Bande marron plein cadre pour la section "Partagez votre exploration" du Quiz (au lieu d'un fond marron isole sur la suggestion de Coffret, qui reste creme comme le reste du site). */
.lcm-band-marron {
	background: var(--wp--preset--color--marron);
	color: var(--wp--preset--color--papier);
}
.lcm-band-marron h1,
.lcm-band-marron h2,
.lcm-band-marron h3,
.lcm-band-marron h4 { color: var(--wp--preset--color--papier); }
.lcm-qe-partage.lcm-band-full {
	margin-top: 64px !important;
	margin-bottom: 64px !important;
}
.lcm-band-marron .lcm-qe-partage__titre em { color: var(--wp--preset--color--or); }
.lcm-band-marron .lcm-card__eyebrow { color: var(--wp--preset--color--or); }
.lcm-band-marron .lcm-btn-ghost {
	border-color: rgba(247,243,236,.5);
	color: var(--wp--preset--color--papier);
}
.lcm-band-marron .lcm-btn-ghost:hover {
	background: rgba(247,243,236,.1);
}


/* Commentaires (Carnets) — lcm/essai-comments */
.lcm-essai-comments {
	margin-top: 40px;
	padding-top: 32px;
	border-top: 1px solid var(--wp--preset--color--pierre);
}
.lcm-essai-comments__title {
	margin-top: 16px;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--l, 1.5rem);
}
.lcm-comments__list {
	list-style: none;
	margin: 32px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 28px;
}
.lcm-comment {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}
.lcm-comment__avatar img {
	display: block;
	border-radius: 50%;
	width: 44px;
	height: 44px;
}
.lcm-comment__body {
	flex: 1;
	min-width: 0;
}
.lcm-comment__meta {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
}
.lcm-comment__author {
	font-family: var(--wp--preset--font-family--interface);
	font-weight: 600;
	font-size: .9rem;
	color: var(--wp--preset--color--encre);
}
.lcm-comment__date {
	font-size: .78rem;
	opacity: .55;
}
.lcm-comment__text {
	margin-top: 6px;
	font-size: .95rem;
	line-height: 1.65;
	opacity: .85;
}
.lcm-comment__text p {
	margin: 0 0 8px;
}
.lcm-comment__pending {
	margin-top: 6px;
	font-size: .85rem;
	font-style: italic;
	color: var(--wp--preset--color--marron);
	opacity: .8;
}
.lcm-comments__form {
	margin-top: 48px;
	padding-top: 32px;
	border-top: 1px solid var(--wp--preset--color--pierre);
}
.lcm-comments__form-title {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--m, 1.15rem);
	margin-bottom: 4px;
}
.lcm-comments__notice {
	margin-top: 8px;
	font-size: .82rem;
	opacity: .6;
}
.lcm-comments__form-inner {
	margin-top: 20px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.lcm-comments__form-inner .logged-in-as {
	font-size: .85rem;
	opacity: .7;
}
.lcm-comments__form-inner .logged-in-as a {
	color: var(--wp--preset--color--marron);
}
.lcm-comment-field {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: .85rem;
}
.lcm-comment-field label {
	font-family: var(--wp--preset--font-family--interface);
	font-size: .78rem;
	letter-spacing: .02em;
}
.lcm-comment-field input,
.lcm-comment-field textarea {
	padding: 10px 12px;
	border: 1px solid rgba(0,0,0,.15);
	border-radius: var(--radius-sharp);
	font-family: var(--wp--preset--font-family--corps);
	font-size: .95rem;
	background: var(--wp--preset--color--papier, #fff);
	width: 100%;
	box-sizing: border-box;
}
.lcm-comment-field textarea {
	resize: vertical;
	min-height: 120px;
}
.lcm-comment-field input:focus,
.lcm-comment-field textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--marron);
}
.lcm-comments__form-inner .lcm-btn-sauvegarder {
	align-self: flex-start;
	margin-top: 8px;
}
.lcm-comments__closed {
	margin-top: 20px;
	font-size: .9rem;
	opacity: .6;
	font-style: italic;
}
@media (max-width: 600px) {
	.lcm-comment {
		gap: 10px;
	}
	.lcm-comment__avatar img {
		width: 36px;
		height: 36px;
	}
}


/* Aperçu au survol des images produits — Ressources (fiche détail) */
.lcm-ressource-fiche__main,
.lcm-ressource-fiche__thumb {
	overflow: hidden;
}
.lcm-ressource-fiche__main img,
.lcm-ressource-fiche__thumb img {
	transition: transform .35s ease;
}
.lcm-ressource-fiche__main:hover img,
.lcm-ressource-fiche__thumb:hover img {
	transform: scale(1.06);
}


/* Réponses aux commentaires (fil de discussion) — lcm/essai-comments */
.lcm-comment__actions {
	margin-top: 10px;
}
.lcm-comment__reply a {
	font-family: var(--wp--preset--font-family--interface);
	font-size: .78rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--marron);
	text-decoration: none;
	opacity: .85;
}
.lcm-comment__reply a:hover {
	opacity: 1;
	text-decoration: underline;
}
.lcm-comments__list ul.children {
	list-style: none;
	margin: 20px 0 0;
	padding: 0 0 0 28px;
	border-left: 1px solid var(--wp--preset--color--pierre);
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.lcm-comments__list ul.children .lcm-comment {
	margin-top: 20px;
}
.lcm-comments__list ul.children .lcm-comment:first-child {
	margin-top: 0;
}
@media (max-width: 600px) {
	.lcm-comments__list ul.children {
		padding-left: 16px;
	}
}


/* Cœur "j'aime" sur les commentaires */
.lcm-comment__actions {
	margin-top: 10px;
	display: flex;
	align-items: center;
	gap: 18px;
}
.lcm-comment__like {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	color: var(--wp--preset--color--encre);
	opacity: .55;
	transition: opacity .2s ease, color .2s ease;
}
.lcm-comment__like:hover {
	opacity: .85;
}
.lcm-comment__like.is-liked {
	color: var(--wp--preset--color--marron);
	opacity: 1;
}
.lcm-comment__like.is-liked svg path {
	fill: currentColor;
}
.lcm-comment__like.is-loading {
	opacity: .4;
	cursor: default;
}
.lcm-comment__like-count {
	font-size: .78rem;
	font-family: var(--wp--preset--font-family--interface);
	min-width: 8px;
}

/* Pastille de notifications non lues — menu "Espace membre" */
.lcm-notif-pastille {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	margin-left: 6px;
	border-radius: 999px;
	background: var(--wp--preset--color--marron);
	color: #fff;
	font-size: .68rem;
	font-weight: 600;
	line-height: 1;
	vertical-align: middle;
}

/* Onglet Notifications — /mes-carnets/ */
.lcm-notification {
	border-top: 1px solid var(--wp--preset--color--pierre);
}
.lcm-notification:last-child {
	border-bottom: 1px solid var(--wp--preset--color--pierre);
}
.lcm-notification__link {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px 4px;
	text-decoration: none;
	color: inherit;
}
.lcm-notification--unread .lcm-notification__link {
	position: relative;
	padding-left: 18px;
}
.lcm-notification--unread .lcm-notification__link::before {
	content: '';
	position: absolute;
	left: 0;
	top: 22px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--wp--preset--color--marron);
}
.lcm-notification__text {
	font-size: .92rem;
	line-height: 1.5;
}
.lcm-notification__excerpt {
	font-size: .85rem;
	font-style: italic;
	opacity: .7;
}
.lcm-notification__date {
	font-size: .75rem;
	opacity: .5;
}


/* Genre (page individuelle) — Œuvres : au-delà de 8, masquer sur mobile
   et révéler via "Charger plus" (grille déjà à 2 colonnes < 782px,
   voir .lcm-livres-compact-grid plus haut). Desktop inchangé (12
   visibles + pagination numérotée .lcm-pagination). */
.lcm-charger-plus-wrap--mobile-only {
	display: none;
}
@media (max-width: 782px) {
	.lcm-genre-oeuvre-item--extra {
		display: none;
	}
	.lcm-genre-oeuvre-item--extra.is-revealed {
		display: block;
	}
	.lcm-charger-plus-wrap--mobile-only {
		display: flex;
		justify-content: center;
		margin-top: 24px;
	}
	.lcm-genre-detail .lcm-pagination {
		display: none;
	}
}


/* Résultats de recherche (templates/search.html) — extraits cliquables,
   plus le contenu complet dumpé (comportement par défaut hérité du
   thème parent twentytwentyfive avant ce template). */
.lcm-search-results__item {
	border-top: 1px solid var(--wp--preset--color--pierre);
	padding: 28px 0;
}
.lcm-search-results__item:last-child {
	border-bottom: 1px solid var(--wp--preset--color--pierre);
}
.lcm-search-results__item .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}
.lcm-search-results__item .wp-block-post-excerpt {
	opacity: .85;
}
.lcm-search-results__item .lcm-link-underline {
	margin-top: 10px;
	display: inline-block;
	font-size: .85rem;
}


/* Avatars abstraits "Mon compte" (echange du 14/08/2026). */
.lcm-avatar-choice {
	transition: transform .15s ease, box-shadow .15s ease;
}
.lcm-avatar-choice:hover {
	transform: scale(1.08);
}
.lcm-avatar-choice.is-selected {
	box-shadow: 0 0 0 3px #B8934A;
}


/* ==========================================================================
   COFFRETS IMAGINAIRES — page listing + fiche detaillee (structure/design,
   avant produit WooCommerce reel — voir coffrets-listing.php et
   coffret-detail-afrofantasy.php)
   ========================================================================== */
.lcm-coffrets-grille {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 32px;
}
@media (max-width: 700px) {
	.lcm-coffrets-grille { grid-template-columns: 1fr; gap: 20px; }
}

.lcm-coffret-contenu-grille {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}
@media (max-width: 1100px) {
	.lcm-coffret-contenu-grille { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
	.lcm-coffret-contenu-grille { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.lcm-coffret-contenu-grille { grid-template-columns: 1fr; }
}

.lcm-coffret-etapes {
	display: flex;
	flex-direction: column;
	gap: 28px;
}
.lcm-coffret-etape {
	display: flex;
	gap: 24px;
	align-items: flex-start;
	padding-bottom: 28px;
	border-bottom: 1px solid var(--wp--preset--color--pierre);
}
.lcm-coffret-etape:last-child { border-bottom: none; padding-bottom: 0; }
.lcm-coffret-etape__numero {
	font-family: var(--wp--preset--font-family--display);
	font-size: 2rem;
	font-style: italic;
	color: var(--wp--preset--color--or);
	flex-shrink: 0;
	width: 48px;
}

.lcm-coffret-profils {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}
.lcm-coffret-profil {
	display: flex;
	align-items: baseline;
	gap: 16px;
	font-size: 1.02rem;
}
.lcm-coffret-profil__numero {
	font-family: var(--wp--preset--font-family--interface);
	font-size: .78rem;
	letter-spacing: .1em;
	color: var(--wp--preset--color--marron);
	opacity: .7;
	flex-shrink: 0;
}

/* Refonte "Votre voyage" (badges numérotés reliés) et "Ce coffret est pour
   vous si..." (bande sombre pleine largeur) façon prototype base44, sur la
   page de vente du Coffret. */
.lcm-coffret-etape--timeline {
	display: grid;
	grid-template-columns: 56px 1fr;
	gap: 22px;
}
.lcm-coffret-etape__connector {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.lcm-coffret-etape__circle {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 1px solid var(--wp--preset--color--or);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	color: var(--wp--preset--color--or);
	font-size: 1.1rem;
	background: var(--wp--preset--color--creme);
	flex-shrink: 0;
}
.lcm-coffret-etape__line {
	width: 1px;
	flex: 1;
	background: var(--wp--preset--color--pierre);
	margin: 4px 0;
	min-height: 30px;
}
.lcm-coffret-etape--timeline:last-child .lcm-coffret-etape__line { display: none; }
.lcm-coffret-etape__body { padding-bottom: 34px; }
.lcm-coffret-etape__body h3 {
	margin: 2px 0 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.2rem;
}
.lcm-coffret-etape__body p {
	margin: 6px 0 0;
	font-size: .92rem;
	opacity: .85;
}

.lcm-coffret-profils--dark {
	background: var(--wp--preset--color--marron-profond);
	color: var(--wp--preset--color--papier);
	padding: 64px 24px;
}
.lcm-coffret-profils--dark .lcm-card__eyebrow { color: var(--wp--preset--color--or); }
.lcm-coffret-profils--dark h2 { color: var(--wp--preset--color--papier); }
.lcm-coffret-profils--dark h2 em { color: var(--wp--preset--color--or); font-style: italic; }
.lcm-coffret-profil-rows {
	max-width: 640px;
	margin: 30px auto 0;
	text-align: left;
}
.lcm-coffret-profil-row {
	display: flex;
	align-items: baseline;
	gap: 20px;
	padding: 18px 0;
	border-bottom: 1px solid rgba(247,243,236,0.15);
	font-size: 1.1rem;
}
.lcm-coffret-profil-row:last-child { border-bottom: none; }
.lcm-coffret-profil-row__numero {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	color: var(--wp--preset--color--or);
	font-size: 1rem;
	width: 28px;
	flex-shrink: 0;
}


/* ==========================================================================
   PAGE "COFFRETS IMAGINAIRES" — coffret vedette (image avec eyebrow + titre
   en surimpression, façon prototype base44) + grille "Les prochains voyages".
   ========================================================================== */
.lcm-coffret-vedette__visual {
	position: relative;
}
.lcm-coffret-vedette__visual img {
	position: relative;
	z-index: 0;
}
.lcm-coffret-vedette__visual::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(20, 14, 10, .78), rgba(20, 14, 10, 0) 55%), linear-gradient(to bottom, rgba(20, 14, 10, .4), rgba(20, 14, 10, 0) 28%);
	pointer-events: none;
	z-index: 1;
}
.lcm-coffret-vedette__eyebrow {
	position: absolute;
	top: 20px;
	left: 20px;
	z-index: 2;
	color: var(--wp--preset--color--papier);
	font-family: var(--wp--preset--font-family--interface);
	font-size: .72rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	opacity: .9;
}
.lcm-coffret-vedette__titre-overlay {
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: 20px;
	z-index: 2;
	color: var(--wp--preset--color--papier);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl);
	line-height: 1.08;
}
.lcm-coffret-vedette__visual .lcm-produit-badge {
	z-index: 2;
}

/* Grille "Les prochains voyages" : 3 colonnes, chaque carte = visuel avec
   titre en surimpression (même logique que le coffret vedette, en réduit) +
   eyebrow/titre/texte en dessous — cf. prototype. */
.lcm-prochains-grille {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
}
@media (max-width: 900px) {
	.lcm-prochains-grille { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
@media (max-width: 600px) {
	.lcm-prochains-grille { grid-template-columns: 1fr; gap: 32px; }
}
.lcm-prochain-card__visual {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--wp--preset--color--creme);
}
.lcm-prochain-card__visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--transition-slow);
}
.lcm-prochain-card__visual:hover img { transform: scale(1.04); }
.lcm-prochain-card__visual::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(20, 14, 10, .72), rgba(20, 14, 10, 0) 55%);
	pointer-events: none;
}
.lcm-prochain-card__titre-overlay {
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 14px;
	z-index: 2;
	color: var(--wp--preset--color--papier);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.2rem;
	line-height: 1.15;
}
.lcm-prochain-card__visual .lcm-produit-badge {
	z-index: 2;
}

/* Bouton "ghost" pour fond sombre (CTA newsletter /coffrets/) : même logique
   que .lcm-btn-ghost, couleurs inversées pour rester lisible sur --encre. */
.lcm-btn-ghost--clair {
	border-color: var(--wp--preset--color--papier);
	color: var(--wp--preset--color--papier);
}
.lcm-btn-ghost--clair:hover {
	background: var(--wp--preset--color--papier);
	color: var(--wp--preset--color--encre);
}

/* Section CTA "Recevoir La Lettre" en bas de /coffrets/ : fond sombre plein
   cadre, pas de formulaire intégré — juste un lien vers /la-lettre/ (demande
   de Stéphanie : la Lettre doit rester le point d'entrée unique). */
.lcm-coffret-lettre-cta {
	background: var(--wp--preset--color--encre);
	color: var(--wp--preset--color--papier);
	text-align: center;
	padding: 64px 32px;
	border-radius: var(--radius-sharp);
}
.lcm-coffret-lettre-cta .lcm-card__eyebrow {
	color: var(--wp--preset--color--papier);
	opacity: .8;
}


/* ==========================================================================
   FICHE COFFRET DÉTAILLÉE (Afrofantasy) — icônes ligne pour la grille "Huit
   entrées pour le voyage", façon prototype base44.
   ========================================================================== */
.lcm-coffret-contenu-item__icone {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border: 1px solid var(--wp--preset--color--pierre);
	color: var(--wp--preset--color--marron);
	opacity: .75;
}
.lcm-coffret-contenu-item__icone svg {
	width: 24px;
	height: 24px;
	display: block;
}

/* Variante de carte propre au Coffret Imaginaire — bordure fine sans fond
   ni ombre, ordre titre (petites capitales) -> texte (serif) -> format,
   façon prototype base44. Scopée à .lcm-coffret-contenu-item : ne modifie
   pas .lcm-card ailleurs sur le site. */
.lcm-coffret-contenu-item.lcm-card {
	background: transparent;
	border: 1px solid var(--wp--preset--color--pierre);
	box-shadow: none;
}
.lcm-coffret-contenu-item.lcm-card:hover {
	box-shadow: none;
	transform: none;
	border-color: var(--wp--preset--color--marron);
}
.lcm-coffret-contenu-item__texte {
	margin-top: 12px;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.05rem;
	line-height: 1.4;
	opacity: .9;
}
.lcm-coffret-contenu-item__format {
	margin-top: 16px;
	font-family: var(--wp--preset--font-family--interface);
	font-size: .7rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	opacity: .5;
}

/* Coffrets "à paraître" grisés dans la grille "Les prochains voyages" de
   /coffrets/ — reprend le traitement en teintes neutres/désaturées du
   prototype (les coffrets déjà disponibles restent en couleur). */
.lcm-prochain-card__visual.is-a-paraitre img,
.lcm-prochain-card__visual.is-a-paraitre .lcm-fake-cover {
	filter: grayscale(.85) brightness(.94);
}


/* ==========================================================================
   FICHE COFFRET DÉTAILLÉE (Afrofantasy) — carte récap + checklist avant la
   section "extrait gratuit", façon prototype base44.
   ========================================================================== */
.lcm-coffret-recap {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 48px;
	align-items: center;
	background: var(--wp--preset--color--creme);
	border: 1px solid var(--wp--preset--color--pierre);
	border-radius: var(--radius-sharp);
	padding: 48px;
}
.lcm-coffret-recap__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.lcm-coffret-recap__liste li {
	position: relative;
	padding-left: 26px;
	font-size: .95rem;
	opacity: .85;
}
.lcm-coffret-recap__liste li::before {
	content: '\2713';
	position: absolute;
	left: 0;
	top: 0;
	color: var(--wp--preset--color--marron);
	font-weight: 600;
}
@media (max-width: 760px) {
	.lcm-coffret-recap {
		grid-template-columns: 1fr;
		padding: 32px 24px;
	}
}


/* Lien "Ouvrir" sur les entrées du coffret qui ont déjà une vraie ressource
   cliquable (ex. Le Quiz -> /quiz/). Les entrées sans lien restent de simples
   cartes statiques. */
.lcm-coffret-contenu-item__lien {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 16px;
	font-family: var(--wp--preset--font-family--interface);
	font-size: .8rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--marron);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color var(--transition-slow, .2s);
}
.lcm-coffret-contenu-item__lien:hover {
	border-bottom-color: var(--wp--preset--color--marron);
}


/* ==========================================================================
   PAGE MEMBRE "MON COFFRET" (Afrofantasy) — grille des ressources + état
   "bientôt disponible" pour les entrées dont le contenu final n'existe pas
   encore.
   ========================================================================== */
.lcm-moncoffret-grille {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}
@media (max-width: 760px) {
	.lcm-moncoffret-grille {
		grid-template-columns: 1fr;
	}
}
.lcm-coffret-contenu-item__lien--inerte {
	color: var(--wp--preset--color--pierre);
	cursor: default;
	border-bottom-color: transparent !important;
}


/* Les Explorateurs — fiches auteurs du Coffret #01 */
.lcm-explorateurs-liste {
	display: flex;
	flex-direction: column;
	gap: 32px;
	margin-top: 28px;
}
.lcm-explorateur-fiche {
	padding: 40px;
}
.lcm-explorateur-fiche__nom {
	margin-top: 10px;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.6rem;
	color: var(--wp--preset--color--encre);
}
.lcm-explorateur-fiche__meta {
	margin-top: 4px;
	font-style: italic;
	color: var(--wp--preset--color--marron);
}
.lcm-explorateur-fiche__label {
	margin-top: 24px;
	margin-bottom: 6px;
	font-weight: 600;
	color: var(--wp--preset--color--marron);
	font-size: .85rem;
	text-transform: uppercase;
	letter-spacing: .04em;
}
.lcm-explorateur-fiche__texte {
	opacity: .85;
	line-height: 1.6;
}
.lcm-explorateur-fiche__lire {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--wp--preset--color--pierre);
	font-size: .95rem;
}
.lcm-explorateur-fiche__lire span {
	font-weight: 600;
	color: var(--wp--preset--color--marron);
}


/* La Carte des Imaginaires — zones interactives (clic + tooltip) */
.lcm-carte-wrap{position:relative}
.lcm-carte-hitzones{position:absolute;inset:0}
.lcm-carte-hitzone{position:absolute;width:130px;height:96px;transform:translate(-50%,-50%);display:block;border-radius:50%;text-decoration:none;outline:none;transition:background-color .2s ease}
.lcm-carte-hitzone:hover,.lcm-carte-hitzone:focus-visible{background-color:rgba(107,66,38,.1)}
.lcm-carte-hitzone::after{content:attr(data-tooltip);position:absolute;bottom:58%;left:50%;transform:translate(-50%,-6px);background:var(--wp--preset--color--encre);color:var(--wp--preset--color--blanc);font-family:var(--wp--preset--font-family--body,sans-serif);font-size:.8rem;line-height:1.3;white-space:nowrap;padding:6px 12px;border-radius:6px;opacity:0;pointer-events:none;transition:opacity .15s ease,transform .15s ease;z-index:5}
.lcm-carte-hitzone:hover::after,.lcm-carte-hitzone:focus-visible::after{opacity:1;transform:translate(-50%,-12px)}
.lcm-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}


/* La Carte des Imaginaires — panneau d'explication au clic (boutons) */
.lcm-carte-hitzone{background:none;border:0;padding:0;font:inherit;color:inherit;-webkit-appearance:none;appearance:none}
.lcm-carte-hitzone.lcm-node-active{background-color:rgba(107,66,38,.16);box-shadow:0 0 0 2px var(--wp--preset--color--marron) inset}
.lcm-carte-info{margin-top:20px;background:var(--wp--preset--color--creme);border:1px solid rgba(107,66,38,.18);border-radius:var(--radius-sharp,4px);padding:20px 24px;font-family:var(--wp--preset--font-family--body,sans-serif);font-size:.92rem;line-height:1.6;color:var(--wp--preset--color--encre)}
.lcm-carte-info__eyebrow{display:block;font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--wp--preset--color--marron);margin-bottom:8px}
.lcm-carte-info p{margin:0}
.lcm-carte-info__lien{color:var(--wp--preset--color--marron);text-decoration:underline;text-underline-offset:3px}


/* La Carte des Imaginaires v2 — patron deux colonnes (carte + panneau), inspiré de la Cartographie interactive du Golfe de Guinée */
.lcm-carte-layout{display:flex;gap:32px;align-items:flex-start;flex-wrap:wrap}
.lcm-carte-map-col{flex:1 1 520px;min-width:280px}
.lcm-carte-panel-col{flex:1 1 300px;min-width:260px}
.lcm-carte-map-frame{width:100%;position:relative}
.lcm-carte-map-section {
  width: 100vw;
  max-width: 100vw;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  left: 50%;
  right: 50%;
  position: relative;
}
.lcm-carte-map-section .lcm-card {
  border-radius: 0;
}
.lcm-carte-map-frame svg{width:100%;height:auto;display:block}
.lcm-carte-mer{fill:var(--wp--preset--color--creme)}
.lcm-carte-continent{fill:var(--wp--preset--color--sauge);opacity:.35}
.lcm-carte-mer-label{font-family:var(--wp--preset--font-family--display);fill:var(--wp--preset--color--marron);font-size:15px;font-style:italic;opacity:.5}
.lcm-carte-route{fill:none;stroke:var(--wp--preset--color--marron);stroke-width:1.5;stroke-dasharray:4 6;opacity:.5}
.lcm-carte-etoile-route{fill:none;stroke:var(--wp--preset--color--or);stroke-width:1.5;stroke-dasharray:2 5;opacity:.7}
.lcm-carte-compas-n{font-family:var(--wp--preset--font-family--body,sans-serif);fill:var(--wp--preset--color--marron);font-size:11px}
.lcm-carte-pin{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;border:none;background:transparent;padding:4px;z-index:2}
.lcm-carte-pin-dot{width:13px;height:13px;flex:0 0 auto;border-radius:50%;background:var(--wp--preset--color--marron);border:2px solid var(--wp--preset--color--creme);box-shadow:0 1px 3px rgba(26,22,20,.35);transition:transform .15s ease,background .15s ease}
.lcm-carte-pin--wide .lcm-carte-pin-dot{background:var(--wp--preset--color--or)}
.lcm-carte-pin-label{font-family:var(--wp--preset--font-family--display);font-style:italic;font-size:.66rem;line-height:1.15;color:var(--wp--preset--color--encre);background:var(--wp--preset--color--papier);padding:2px 6px;border-radius:3px;box-shadow:0 1px 3px rgba(26,22,20,.15);max-width:100px;overflow-wrap:break-word;hyphens:auto;text-align:center;transition:background .15s ease,color .15s ease}
@media (max-width: 600px) {
  .lcm-carte-pin-label { font-size: .58rem; max-width: 76px; padding: 2px 5px; }
  .lcm-carte-pin-dot { width: 11px; height: 11px; }
}
.lcm-carte-pin:hover .lcm-carte-pin-dot,.lcm-carte-pin:focus-visible .lcm-carte-pin-dot{transform:scale(1.35)}
.lcm-carte-pin.lcm-carte-pin-active .lcm-carte-pin-dot{background:var(--wp--preset--color--or);transform:scale(1.4)}
.lcm-carte-pin.lcm-carte-pin-active .lcm-carte-pin-label{background:var(--wp--preset--color--marron);color:var(--wp--preset--color--papier);font-weight:600}
.lcm-carte-legend{display:flex;gap:24px;flex-wrap:wrap;margin-top:16px;font-family:var(--wp--preset--font-family--body,sans-serif);font-size:.85rem;color:var(--wp--preset--color--encre);opacity:.8}
.lcm-carte-legend span{display:inline-flex;align-items:center;gap:8px}
.lcm-carte-legend i{width:12px;height:12px;border-radius:50%;background:var(--wp--preset--color--marron);display:inline-block;font-style:normal}
.lcm-carte-legend i.wide{background:var(--wp--preset--color--or)}
.lcm-carte-panel{background:var(--wp--preset--color--creme);border:1px solid rgba(107,66,38,.18);border-radius:var(--radius-sharp,4px);padding:24px;min-height:220px;font-family:var(--wp--preset--font-family--body,sans-serif)}
.lcm-carte-placeholder{margin:0;opacity:.65;font-size:.92rem;line-height:1.6;color:var(--wp--preset--color--encre)}
.lcm-carte-eyebrow{display:block;font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--wp--preset--color--marron);margin-bottom:10px}
.lcm-carte-panel h4{margin:0 0 12px;font-family:var(--wp--preset--font-family--display);font-size:1.25rem;color:var(--wp--preset--color--encre)}
.lcm-carte-panel p{margin:0;font-size:.92rem;line-height:1.65;color:var(--wp--preset--color--encre);opacity:.9}
.lcm-carte-link{display:inline-block;margin-top:16px;color:var(--wp--preset--color--marron);text-decoration:underline;text-underline-offset:3px;font-size:.9rem}
@media (max-width:782px){.lcm-carte-layout{flex-direction:column;gap:20px}.lcm-carte-map-col,.lcm-carte-panel-col{flex:0 1 auto;width:100%;min-width:0}.lcm-carte-panel{min-height:0}}


/* Le Laboratoire — atelier d'écriture interactif */
.lcm-labo-liste{display:flex;flex-direction:column;gap:20px}
.lcm-labo-textarea{width:100%;margin-top:16px;padding:14px 16px;background:var(--wp--preset--color--papier,#fff);border:1px solid rgba(107,66,38,.25);border-radius:var(--radius-sharp,4px);font-family:var(--wp--preset--font-family--body,sans-serif);font-size:.95rem;line-height:1.6;color:var(--wp--preset--color--encre);resize:vertical}
.lcm-labo-textarea:focus{outline:none;border-color:var(--wp--preset--color--marron)}
.lcm-labo-footer{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.lcm-labo-statut{font-size:.78rem;opacity:.55;font-style:italic}
.lcm-labo-effacer{background:none;border:0;padding:0;font-family:var(--wp--preset--font-family--body,sans-serif);font-size:.8rem;color:var(--wp--preset--color--marron);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.lcm-labo-effacer:hover{opacity:.7}


/* Le Laboratoire v2 — bouton Enregistrer, atelier synopsis, téléchargement */
.lcm-labo-atelier--synopsis{border-top:3px solid var(--wp--preset--color--or)}
.lcm-labo-actions{display:flex;align-items:center;gap:16px}
.lcm-labo-enregistrer{background:none;border:0;padding:0;font-family:var(--wp--preset--font-family--body,sans-serif);font-size:.8rem;color:var(--wp--preset--color--encre);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.lcm-labo-enregistrer:hover{opacity:.7}
.lcm-labo-download-card{border:1px dashed rgba(107,66,38,.3)}
.lcm-labo-download-btn{background:var(--wp--preset--color--marron);color:var(--wp--preset--color--blanc,#fff);border:0;border-radius:var(--radius-pill,999px);padding:12px 28px;font-family:var(--wp--preset--font-family--body,sans-serif);font-size:.9rem;cursor:pointer;transition:opacity .15s ease}
.lcm-labo-download-btn:hover{opacity:.85}


/* Pages du Coffret Imaginaire #01 — le bloc lcm/* affiche déjà son propre
   h1 (.lcm-oeuvre-title), donc on masque le titre WP redondant en haut de
   page sur Mon Coffret et ses pages indépendantes (carte, laboratoire,
   quiz, racines, explorateurs). */
body.page-id-2972 .wp-block-post-title,
body.page-id-2789 .wp-block-post-title,
body.page-id-2975 .wp-block-post-title,
body.page-id-2977 .wp-block-post-title,
body.page-id-2979 .wp-block-post-title,
body.page-id-2983 .wp-block-post-title,
body.page-id-2985 .wp-block-post-title,
body.page-id-2989 .wp-block-post-title,
body.page-id-2990 .wp-block-post-title,
body.page-id-2991 .wp-block-post-title,
body.page-id-3058 .wp-block-post-title,
body.page-id-3059 .wp-block-post-title,
body.page-id-3060 .wp-block-post-title,
body.page-id-3061 .wp-block-post-title,
body.page-id-3062 .wp-block-post-title,
body.page-id-3063 .wp-block-post-title,
body.page-id-3064 .wp-block-post-title,
body.page-id-3065 .wp-block-post-title {
	display: none;
}


/* h3 utilisé pour le titre des cartes coffret (voir .lcm-coffret-contenu-item
   plus haut) : les styles globaux de titre du thème (Twenty Twenty-Five)
   ont priorité sur .lcm-card__eyebrow seule -> on force ici. */
.lcm-coffret-contenu-item h3.lcm-card__eyebrow {
	font-family: var(--wp--preset--font-family--interface) !important;
	font-size: .78rem !important;
	letter-spacing: .1em !important;
	text-transform: uppercase !important;
	font-style: normal !important;
	font-weight: 400 !important;
}


/* ============================================================
   AVIS CLIENTS — habillage des onglets ‹AMP› avis WooCommerce
   natifs sur les fiches produit (Coffrets), pour reprendre la
   charte éditoriale du site (typos, couleurs, radius).
   ============================================================ */
.woocommerce-tabs {
	margin-top: 64px;
	padding-top: 48px;
	border-top: 1px solid var(--wp--preset--color--pierre);
}
.woocommerce-tabs ul.tabs {
	display: flex;
	gap: 32px;
	list-style: none;
	margin: 0 0 32px;
	padding: 0;
	border-bottom: 1px solid var(--wp--preset--color--pierre);
}
.woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0 0 14px;
}
.woocommerce-tabs ul.tabs li a {
	font-family: var(--wp--preset--font-family--interface);
	font-size: .78rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--encre);
	opacity: .55;
	text-decoration: none;
}
.woocommerce-tabs ul.tabs li.active a {
	opacity: 1;
	border-bottom: 2px solid var(--wp--preset--color--marron);
	padding-bottom: 14px;
	margin-bottom: -15px;
}
.woocommerce-tabs .panel {
	font-family: var(--wp--preset--font-family--corps);
	color: var(--wp--preset--color--encre);
	max-width: 720px;
}
.woocommerce-Reviews-title {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.6rem;
	font-weight: 400;
	margin-bottom: 24px;
}
.woocommerce-Reviews .commentlist {
	list-style: none;
	margin: 0 0 32px;
	padding: 0;
}
.woocommerce-Reviews .comment {
	padding: 20px 0;
	border-bottom: 1px solid var(--wp--preset--color--pierre);
}
.woocommerce-Reviews .comment_container {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}
.woocommerce-Reviews .comment-text {
	flex: 1;
}
.woocommerce-Reviews .comment-text p.meta {
	font-family: var(--wp--preset--font-family--interface);
	font-size: .78rem;
	color: var(--wp--preset--color--encre);
	opacity: .6;
	margin: 0 0 6px;
}
.woocommerce-Reviews .star-rating {
	color: var(--wp--preset--color--marron);
	margin-bottom: 8px;
}
.woocommerce-Reviews .star-rating::before {
	color: var(--wp--preset--color--pierre);
}
.woocommerce-Reviews .star-rating span::before {
	color: var(--wp--preset--color--marron);
}
.woocommerce-noreviews {
	font-family: var(--wp--preset--font-family--corps);
	font-style: italic;
	opacity: .75;
	margin-bottom: 32px;
}
#review_form_wrapper #reply-title {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.4rem;
	font-weight: 400;
	margin-bottom: 16px;
}
.comment-form-rating label,
.comment-form-author label,
.comment-form-email label,
.comment-form-comment label {
	display: block;
	font-family: var(--wp--preset--font-family--interface);
	font-size: .78rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	opacity: .7;
	margin-bottom: 6px;
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--wp--preset--color--pierre);
	border-radius: var(--radius-sharp);
	font-family: var(--wp--preset--font-family--corps);
	font-size: .95rem;
	background: var(--wp--preset--color--papier);
	color: var(--wp--preset--color--encre);
}
.comment-form p {
	margin-bottom: 18px;
}
.comment-form p.form-submit {
	margin-top: 24px;
}
.comment-form p.form-submit input {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--wp--preset--color--encre);
	border: 1px solid var(--wp--preset--color--encre);
	color: var(--wp--preset--color--papier);
	border-radius: var(--radius-sharp);
	padding: 14px 28px;
	font-family: var(--wp--preset--font-family--interface);
	font-size: .85rem;
	cursor: pointer;
}
.comment-form p.form-submit input:hover {
	background: var(--wp--preset--color--marron);
	border-color: var(--wp--preset--color--marron);
}


.lcm-oeuvre-breadcrumb--coffret {
	max-width: 1100px;
	box-sizing: border-box;
}


.lcm-coffret-hero {
	align-items: start;
}
.lcm-coffret-hero-visual {
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-sharp);
	position: sticky;
	top: 96px;
}
@media (max-width: 782px) {
	.lcm-coffret-hero-visual { aspect-ratio: 4 / 3; position: static; }
}


.lcm-ressource-coffret-cta.lcm-band-full {
	margin-top: 48px !important;
}


/* ============================================================
   Page /produits/ (archive WooCommerce native) : harmonisation
   visuelle avec la Boutique editoriale (memes typos, cartes,
   sidebar, espacements). Scope strict a body.woocommerce-shop
   pour ne pas toucher aux autres usages des blocs Woo.
   ============================================================ */

body.woocommerce-shop .wp-block-columns {
  gap: 48px !important;
  margin-top: 40px;
  align-items: flex-start !important;
}
body.woocommerce-shop .wp-block-columns > .wp-block-column:first-child {
  flex-basis: 200px !important;
  max-width: 200px;
}
body.woocommerce-shop .wp-block-columns > .wp-block-column:last-child {
  flex-basis: 0 !important;
  flex-grow: 1 !important;
  min-width: 0;
}

/* Titre "Filtres", facon .lcm-boutique-sidebar__title */
body.woocommerce-shop .wc-block-product-filters .wp-block-heading {
  font-family: var(--wp--preset--font-family--interface);
  font-size: 0.7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .5;
  margin: 0 0 16px;
}
body.woocommerce-shop .wc-block-product-filters {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
body.woocommerce-shop .wc-block-product-filter-checkbox-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
body.woocommerce-shop .wc-block-product-filter-checkbox-list__item {
  padding: 8px 0 8px 14px;
  border-left: 2px solid transparent;
}
body.woocommerce-shop .wc-block-product-filter-checkbox-list input[type="checkbox"] {
  accent-color: var(--wp--preset--color--marron);
}
body.woocommerce-shop .wc-block-product-filter-checkbox-list__item:has(input:checked) {
  border-left-color: var(--wp--preset--color--marron);
  background: var(--wp--preset--color--creme);
}

/* Grille produits : memes espacements que .lcm-boutique-grille */
body.woocommerce-shop .wc-block-product-template {
  gap: 40px !important;
}

/* Cartes produit, facon .lcm-card / .lcm-card--catalogue */
body.woocommerce-shop .wc-block-product-template li.wc-block-product {
  background: var(--wp--preset--color--blanc, #fff);
  border: 1px solid var(--wp--preset--color--pierre);
  border-radius: var(--radius-sharp);
  box-shadow: var(--shadow-resting);
  overflow: hidden;
  padding: 20px;
  transition: border-color var(--transition-fast, .2s ease);
}
body.woocommerce-shop .wc-block-product-template li.wc-block-product:hover {
  border-color: var(--wp--preset--color--marron);
  box-shadow: var(--shadow-resting);
}

/* Visuel produit : meme cadre 4/3 creme que la Boutique, bord a bord */
body.woocommerce-shop .wc-block-components-product-image {
  aspect-ratio: 4 / 3;
  background-color: var(--wp--preset--color--creme);
  margin: -20px -20px 16px !important;
  overflow: hidden;
}
body.woocommerce-shop .wc-block-components-product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Titre produit, facon .lcm-card--catalogue__title */
body.woocommerce-shop .wc-block-product-template .wp-block-post-title {
  font-family: var(--wp--preset--font-family--display) !important;
  font-size: var(--wp--preset--font-size--base) !important;
  font-weight: 400;
  text-align: left !important;
  margin: 0 0 6px;
}

/* Prix, facon .lcm-boutique-grille */
body.woocommerce-shop .wc-block-components-product-price {
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.1rem;
  color: var(--wp--preset--color--marron);
  text-align: left !important;
  margin: 0 0 12px;
}

/* Bouton "Ajouter au panier" discret, facon .lcm-boutique-cta */
body.woocommerce-shop .wp-block-woocommerce-product-button {
  text-align: left !important;
}
body.woocommerce-shop .wc-block-components-product-button__button {
  background: none !important;
  color: var(--wp--preset--color--marron) !important;
  border: 1px solid var(--wp--preset--color--pierre) !important;
  padding: 6px 14px !important;
  font-size: .75rem !important;
  width: auto !important;
  display: inline-block !important;
}
body.woocommerce-shop .wc-block-components-product-button__button:hover {
  border-color: var(--wp--preset--color--marron) !important;
  background: var(--wp--preset--color--creme) !important;
  color: var(--wp--preset--color--marron) !important;
}

@media (max-width: 900px) {
  body.woocommerce-shop .wp-block-columns {
    flex-wrap: wrap !important;
    gap: 24px !important;
  }
  body.woocommerce-shop .wp-block-columns > .wp-block-column:first-child,
  body.woocommerce-shop .wp-block-columns > .wp-block-column:last-child {
    flex-basis: 100% !important;
    max-width: none;
  }
  body.woocommerce-shop .wc-block-product-template {
    gap: 24px !important;
  }
}
@media (max-width: 600px) {
  body.woocommerce-shop .wc-block-product-template {
    gap: 20px !important;
  }
}

/* ==========================================================================
   CHECKOUT (page Validation) - habillage aux couleurs de la charte
   Fond blanc (papier) partout, traits fins dores (or a faible opacite) en
   guise de separateurs - le meme esprit epure que le bloc "Details de
   facturation" natif, sans aplats creme qui alourdissent la page.
   Le <body> des pages de checkout porte lui-meme la classe
   "woocommerce-checkout" (body_class()), donc on scope tout sur
   "form.checkout" (le vrai formulaire) pour ne pas attraper les widgets
   d'admin (ex. le score SEO Rank Math dans la barre d'administration), et
   pour avoir assez de specificite face aux regles par defaut de
   woocommerce.css (ex. ".woocommerce form .form-row .input-text").
   -------------------------------------------------------------------------- */

body.page-id-9 form.checkout h3 {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 300;
	font-size: 1.5rem;
	color: var(--wp--preset--color--encre);
	letter-spacing: 0.01em;
	margin: 48px 0 24px;
	padding-bottom: 16px;
	border-bottom: 1px solid rgba(184, 147, 74, 0.35);
}

body.page-id-9 form.checkout #customer_details {
	gap: 48px;
}

/* Libelles de champ */
body.page-id-9 form.checkout .form-row label {
	font-family: var(--wp--preset--font-family--interface);
	font-size: 0.8rem;
	letter-spacing: 0.03em;
	color: var(--wp--preset--color--encre);
	margin-bottom: 8px;
}

body.page-id-9 form.checkout .form-row label .required {
	color: var(--wp--preset--color--marron);
	text-decoration: none;
}

/* Champs texte, select, textarea */
body.page-id-9 form.checkout .form-row .input-text,
body.page-id-9 form.checkout .form-row select,
body.page-id-9 form.checkout .form-row textarea,
body.page-id-9 form.checkout .select2-selection {
	font-family: var(--wp--preset--font-family--interface) !important;
	font-size: 0.95rem;
	color: var(--wp--preset--color--encre);
	background-color: var(--wp--preset--color--papier);
	border: 1px solid var(--wp--preset--color--pierre);
	border-radius: 2px !important;
	padding: 12px 16px;
	height: auto;
	box-shadow: none;
	transition: border-color 250ms ease, box-shadow 250ms ease;
}

body.page-id-9 form.checkout .select2-selection {
	display: flex;
	align-items: center;
}

body.page-id-9 form.checkout .select2-selection__rendered {
	font-family: var(--wp--preset--font-family--interface);
	color: var(--wp--preset--color--encre);
	line-height: normal !important;
	padding-left: 0 !important;
}

body.page-id-9 form.checkout .select2-selection__arrow {
	height: 100% !important;
}

body.page-id-9 form.checkout .form-row .input-text:focus,
body.page-id-9 form.checkout .form-row select:focus,
body.page-id-9 form.checkout .form-row textarea:focus,
body.page-id-9 form.checkout .select2-container--focus .select2-selection,
body.page-id-9 form.checkout .select2-container--open .select2-selection {
	border-color: var(--wp--preset--color--marron);
	box-shadow: 0 0 0 3px rgba(107, 63, 42, 0.1);
	outline: none;
}

body.page-id-9 .select2-dropdown {
	font-family: var(--wp--preset--font-family--interface);
	border-color: var(--wp--preset--color--pierre);
	border-radius: 0 0 2px 2px;
}

body.page-id-9 .select2-results__option--highlighted[aria-selected] {
	background-color: var(--wp--preset--color--marron) !important;
}

/* Cases a cocher (CGV + renonciation retractation) */
body.page-id-9 form.checkout input[type="checkbox"] {
	width: 18px;
	height: 18px;
	accent-color: var(--wp--preset--color--marron);
	vertical-align: middle;
	margin-right: 8px;
	cursor: pointer;
}

body.page-id-9 form.checkout .woocommerce-terms-and-conditions-wrapper {
	margin: 32px 0 0;
	padding: 0;
	background-color: var(--wp--preset--color--papier);
}

body.page-id-9 form.checkout .woocommerce-privacy-policy-text p,
body.page-id-9 form.checkout .lcm-retractation-row span,
body.page-id-9 form.checkout .woocommerce-terms-and-conditions-checkbox-text {
	font-family: var(--wp--preset--font-family--interface);
	font-size: 0.85rem;
	line-height: 1.6;
	color: var(--wp--preset--color--encre);
}

body.page-id-9 form.checkout .lcm-retractation-row {
	margin-top: 20px;
}

body.page-id-9 form.checkout .woocommerce-privacy-policy-link,
body.page-id-9 form.checkout .woocommerce-terms-and-conditions-wrapper a {
	color: var(--wp--preset--color--marron);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 250ms ease;
}

body.page-id-9 form.checkout .woocommerce-privacy-policy-link:hover,
body.page-id-9 form.checkout .woocommerce-terms-and-conditions-wrapper a:hover {
	border-bottom-color: var(--wp--preset--color--marron);
}

body.page-id-9 form.checkout .woocommerce-terms-and-conditions {
	font-family: var(--wp--preset--font-family--corps);
	font-size: 0.95rem;
	color: var(--wp--preset--color--encre);
	background-color: var(--wp--preset--color--papier);
	border: 1px solid var(--wp--preset--color--pierre);
	padding: 16px 24px;
	margin-top: 16px;
}

body.page-id-9 form.checkout .woocommerce-terms-and-conditions h2 {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: 1.1rem;
	color: var(--wp--preset--color--encre);
}

/* Recapitulatif de commande - fond blanc, traits dores fins, pas d'aplat */
body.page-id-9 form.checkout #order_review,
body.page-id-9 form.checkout .woocommerce-checkout-review-order-table {
	background-color: var(--wp--preset--color--papier);
	padding: 0;
}

body.page-id-9 form.checkout .woocommerce-checkout-review-order-table {
	font-family: var(--wp--preset--font-family--corps);
	border-collapse: collapse;
	margin-top: 8px;
}

body.page-id-9 form.checkout .woocommerce-checkout-review-order-table th,
body.page-id-9 form.checkout .woocommerce-checkout-review-order-table td {
	font-family: var(--wp--preset--font-family--interface);
	font-size: 0.85rem;
	color: var(--wp--preset--color--encre);
	border-bottom: 1px solid rgba(184, 147, 74, 0.35);
	padding: 14px 0;
}

body.page-id-9 form.checkout .woocommerce-checkout-review-order-table .product-name,
body.page-id-9 form.checkout .woocommerce-checkout-review-order-table .amount,
body.page-id-9 form.checkout .woocommerce-checkout-review-order-table .order-total .amount {
	font-family: var(--wp--preset--font-family--corps);
	font-size: 1rem;
}

body.page-id-9 form.checkout .woocommerce-checkout-review-order-table tfoot .order-total th,
body.page-id-9 form.checkout .woocommerce-checkout-review-order-table tfoot .order-total td {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.2rem;
	font-weight: 400;
	border-bottom: none;
	border-top: 1px solid var(--wp--preset--color--encre);
	padding-top: 16px;
}

/* Moyens de paiement - fond blanc, separateurs fins dores */
body.page-id-9 form.checkout ul.wc_payment_methods {
	border: none;
	padding: 0;
	margin: 16px 0 0;
	background-color: var(--wp--preset--color--papier);
}

body.page-id-9 form.checkout ul.wc_payment_methods li.wc_payment_method {
	border-bottom: 1px solid rgba(184, 147, 74, 0.35);
	padding: 16px 0;
	background-color: var(--wp--preset--color--papier);
}

body.page-id-9 form.checkout ul.wc_payment_methods li.wc_payment_method:first-child {
	border-top: 1px solid rgba(184, 147, 74, 0.35);
}

body.page-id-9 form.checkout ul.wc_payment_methods label {
	font-family: var(--wp--preset--font-family--interface);
	font-size: 0.95rem;
	color: var(--wp--preset--color--encre);
	cursor: pointer;
}

body.page-id-9 form.checkout ul.wc_payment_methods input.input-radio {
	width: 18px;
	height: 18px;
	accent-color: var(--wp--preset--color--marron);
	margin-right: 8px;
	vertical-align: middle;
}

body.page-id-9 form.checkout .payment_box {
	background-color: var(--wp--preset--color--papier) !important;
	border: none;
	box-shadow: none;
	padding: 16px 0 8px;
	margin-top: 8px;
	font-family: var(--wp--preset--font-family--interface);
	font-size: 0.85rem;
	color: var(--wp--preset--color--encre);
}

body.page-id-9 form.checkout .payment_box:before {
	display: none;
}

body.page-id-9 form.checkout .payment_box p {
	font-family: var(--wp--preset--font-family--interface);
}

body.page-id-9 form.checkout .wc-upe-form,
body.page-id-9 form.checkout .wc-stripe-upe-element {
	background-color: var(--wp--preset--color--papier);
	border: 1px solid var(--wp--preset--color--pierre);
	border-radius: 2px;
	padding: 12px 16px;
}

/* Bouton Commander : meme habillage que les boutons du reste du site */
body.page-id-9 form.checkout #place_order,
body.page-id-9 form.checkout .place-order .button {
	font-family: var(--wp--preset--font-family--interface);
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	text-transform: none;
	color: var(--wp--preset--color--papier);
	background-color: var(--wp--preset--color--encre);
	border: none;
	border-radius: 0;
	padding: 16px 32px;
	width: 100%;
	transition: background-color 300ms ease;
	cursor: pointer;
}

body.page-id-9 form.checkout #place_order:hover,
body.page-id-9 form.checkout #place_order:focus {
	background-color: var(--wp--preset--color--marron-profond);
}

body.page-id-9 form.checkout .place-order {
	margin-top: 32px;
	background-color: var(--wp--preset--color--papier);
}

/* Notices d'erreur : on garde le rouge conventionnel mais on l'accorde a la charte (rayons, police) */
body.page-id-9 .woocommerce-error,
body.page-id-9 .woocommerce-message,
body.page-id-9 .woocommerce-NoticeGroup .woocommerce-error {
	font-family: var(--wp--preset--font-family--interface);
	font-size: 0.85rem;
	border-radius: 0;
	border-top-width: 3px;
}


body.page-id-9 form.checkout #wc-stripe-currency-selector {
	border: none;
	padding: 0;
	margin-top: 0 !important;
}


/* Anti-FOUC : le payment_box de chaque moyen de paiement est cache par
   defaut cote CSS (WooCommerce le montre en JS pour la methode active des
   le chargement, mais un court instant avant que ce script ne tourne, la
   boite s'affichait avec le gris par defaut de woocommerce.css). */
body.page-id-9 form.checkout ul.payment_methods .payment_box {
	display: none;
}

/* Notifications "info" (ex. bandeau "Avez-vous un code promo ?") : le
   cercle bleu par defaut de WooCommerce Blocks devient dore. */
body.page-id-9 .wc-block-components-notice-banner.is-info svg,
body.page-id-9 .wc-block-components-notice-banner:not(.is-success):not(.is-error) svg {
	background-color: var(--wp--preset--color--or) !important;
}

body.page-id-9 .woocommerce-info {
	border-top-color: var(--wp--preset--color--or) !important;
}

body.page-id-9 .woocommerce-info::before {
	color: var(--wp--preset--color--or) !important;
}


/* La racine #payment de WooCommerce a un fond violet translucide par
   defaut (rgba du primary WC a 14%) ; il transparaissait dans les zones de
   padding non couvertes par les elements enfants (ex. sous la derniere
   methode de paiement). On le passe en blanc comme le reste. */
body.page-id-9 form.checkout #payment {
	background-color: var(--wp--preset--color--papier) !important;
	padding: 0 !important;
}


/* ==========================================================================
   NOTIFICATIONS DU SITE (ajout au panier, erreurs, infos) - dans la charte
   WooCommerce utilise le composant "notice banner" des Blocks meme sur les
   pages classiques (produit, panier). Par defaut : rouge pour l'erreur,
   vert pour le succes, bleu pour l'info - avec en plus un contour bleu de
   focus par defaut du navigateur (l'element est auto-focus pour
   l'accessibilite). On distingue toujours erreur / succes / info au premier
   coup d'oeil, mais avec les teintes de la charte plutot que les couleurs
   generiques : marron pour l'erreur, sauge pour le succes, or pour l'info.
   -------------------------------------------------------------------------- */

.wc-block-components-notice-banner:focus,
.wc-block-components-notice-banner:focus-visible {
	outline: none;
}

.wc-block-components-notice-banner {
	font-family: var(--wp--preset--font-family--interface);
	border-radius: 0;
}

.wc-block-components-notice-banner.is-error {
	border-left-color: var(--wp--preset--color--marron) !important;
}
.wc-block-components-notice-banner.is-error svg {
	background-color: var(--wp--preset--color--marron) !important;
}

.wc-block-components-notice-banner.is-success {
	border-left-color: var(--wp--preset--color--sauge) !important;
}
.wc-block-components-notice-banner.is-success svg {
	background-color: var(--wp--preset--color--sauge) !important;
}

.wc-block-components-notice-banner.is-info svg,
.wc-block-components-notice-banner:not(.is-success):not(.is-error) svg {
	background-color: var(--wp--preset--color--or) !important;
}

/* Meme logique pour les notices "classiques" WooCommerce (dashicons),
   utilisees sur certaines pages (mon compte, etc.). */
.woocommerce-error {
	border-top-color: var(--wp--preset--color--marron) !important;
}
.woocommerce-error::before {
	color: var(--wp--preset--color--marron) !important;
}
.woocommerce-message {
	border-top-color: var(--wp--preset--color--sauge) !important;
}
.woocommerce-message::before {
	color: var(--wp--preset--color--sauge) !important;
}
.woocommerce-info {
	border-top-color: var(--wp--preset--color--or) !important;
}
.woocommerce-info::before {
	color: var(--wp--preset--color--or) !important;
}


/* Le glyphe (point d'exclamation / coche) a l'interieur du rond colore
   garde par defaut la teinte rouge/verte/bleue d'origine de WooCommerce
   (fill: currentColor herite d'une couleur non stylee) meme apres avoir
   recolore le fond du rond. On le force en blanc casse pour qu'il reste
   lisible sur les trois fonds (marron / sauge / or). */
.wc-block-components-notice-banner svg path {
	fill: var(--wp--preset--color--papier) !important;
}