/* =============================================================
   CONTENU — charpente des gabarits (Le Caribou, thème FSE)
   Port des composants « niveau gabarit » de tasks/preview/article.html :
   hero d'article, prose de base (post-content), fiche auteur,
   « À lire ensuite », commentaires. Même discipline que chrome.css :
   les valeurs appartiennent à theme.json, on ne fait qu'aliaser.
   Les composants DANS le corps (En bref, citation, étapes, Ton
   prochain pas, infolettre inline, TDM) sont des PATTERNS → 3D.
   ============================================================= */

/* --- alias tokens (valeurs = theme.json). Au niveau :root car la prose et la
   fiche auteur ne sont pas toujours dans un conteneur de contenu précis ; ces
   alias ne font que pointer vers des variables --wp--preset--* déjà globales. --- */
:root {
	--terre: var(--wp--preset--color--terre);
	--spruce-900: var(--wp--preset--color--spruce-900);
	--spruce-800: var(--wp--preset--color--spruce-800);
	--bourgogne: var(--wp--preset--color--bourgogne);
	--bourgogne-vif: var(--wp--preset--color--bourgogne-vif);
	--clay: var(--wp--preset--color--clay);
	--sauge: var(--wp--preset--color--sauge);
	--bg: var(--wp--preset--color--bg);
	--surface: var(--wp--preset--color--surface);
	--ink: var(--wp--preset--color--ink);
	--ink-soft: var(--wp--preset--color--ink-soft);
	--line: var(--wp--preset--color--line);
	--line-strong: var(--wp--preset--color--line-strong);
	--on-dark: var(--wp--preset--color--on-dark);
	--on-dark-soft: var(--wp--preset--color--on-dark-soft);
	--grotesk: var(--wp--preset--font-family--grotesk);
	--sans: var(--wp--preset--font-family--sans);
	--ease: var(--wp--custom--ease);
	--measure: var(--wp--custom--measure);
	--step--1: var(--wp--preset--font-size--fine);
	--step-0: var(--wp--preset--font-size--base);
	--step-1: var(--wp--preset--font-size--dek);
	--step-2: var(--wp--preset--font-size--section);
	--step-3: var(--wp--preset--font-size--titre);
	--step-4: var(--wp--preset--font-size--hero);
	--head-h: 60px;
}

/* ================= HERO d'article (bandeau sapin sombre) ================= */
.hero { position: relative; background: var(--spruce-900); color: var(--on-dark); overflow: hidden; }
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-inner { position: relative; z-index: 2; max-width: 940px; margin: 0 auto; padding: clamp(2.6rem, 6vw, 5rem) clamp(1.2rem, 4vw, 2.5rem) clamp(2.2rem, 5vw, 3.5rem); }
.hero-inner a { color: inherit; }
.hero .crumb { font-family: var(--grotesk); font-weight: 500; font-size: .86rem; color: var(--on-dark-soft); margin-bottom: 1.4rem; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.hero .crumb a { text-decoration: none; color: var(--on-dark-soft); transition: color .2s; }
.hero .crumb a:hover { color: var(--on-dark); }
.hero .crumb .sep { opacity: .5; }
.hero .kicker { font-family: var(--grotesk); font-weight: 700; font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; color: var(--sauge); text-decoration: none; display: inline-flex; align-items: center; gap: .5rem; }
.hero .kicker::before { content: ""; width: 1.8rem; height: 2px; background: var(--sauge); }
.hero h1.title { font-family: var(--grotesk); font-weight: 800; font-size: var(--step-4); line-height: 1.0; letter-spacing: -.035em; color: var(--on-dark); margin: 1.1rem 0 0; max-width: 26ch; text-wrap: balance; }
.hero .dek { font-family: var(--sans); font-size: var(--step-1); line-height: 1.4; color: var(--on-dark-soft); max-width: 54ch; margin-top: 1.3rem; font-weight: 400; }
.hero .meta { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; font-family: var(--grotesk); font-size: .9rem; color: var(--on-dark-soft); margin-top: 1.9rem; padding-top: 1.4rem; border-top: 1px solid oklch(0.5 0.03 178 / .35); }
.hero .meta b { color: var(--on-dark); font-weight: 600; }
.hero .meta .avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.hero .meta .sepdot { width: 3px; height: 3px; border-radius: 50%; background: var(--on-dark-soft); }
/* Le bloc coeur wp:post-author (display:flex sans align-items, cf. cœur WP) laisse
   l'avatar et le nom mal alignés verticalement : on force le centrage ici. */
.hero .meta .wp-block-post-author { display: flex; align-items: center; }
.hero .meta .wp-block-post-author__name { margin: 0; }

/* --- Hero en mode PHOTO : quand l'article a une image à la une, elle devient le
   hero (le motif sapin sert de repli quand il n'y en a pas). Bascule via :has(). --- */
.hero .wp-block-post-featured-image { position: absolute; inset: 0; z-index: 0; margin: 0; }
.hero .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; }
.hero-scrim { position: absolute; inset: 0; z-index: 1; display: none; margin: 0; } /* margin:0 sinon l'espacement de bloc décale le voile vers le bas */
.hero:has(.wp-post-image) { display: flex; align-items: flex-end; min-height: clamp(480px, 66vh, 680px); }
.hero:has(.wp-post-image) .hero-bg { display: none; } /* on masque le motif sapin sous la photo */
/* Sur une photo à la une, le hero occupe toute la largeur : on élargit la colonne
   de titre (940 → 1120px) pour qu'un titre long remplisse l'espace horizontal au
   lieu de s'empiler en hauteur. Le dek (54ch) et la méta restent bornés. */
.hero:has(.wp-post-image) .hero-inner { width: 100%; max-width: 1120px; padding-top: clamp(3rem, 9vw, 5.5rem); padding-bottom: clamp(2.2rem, 5vw, 3.4rem); }
.hero:has(.wp-post-image) .hero-scrim { display: block; background: linear-gradient(180deg, oklch(0.14 0.02 182 / .28) 0%, oklch(0.14 0.02 182 / .5) 44%, oklch(0.12 0.018 182 / .78) 70%, oklch(0.1 0.016 182 / .95) 100%); }
.hero:has(.wp-post-image) h1.title,
.hero:has(.wp-post-image) .dek,
.hero:has(.wp-post-image) .kicker,
.hero:has(.wp-post-image) .meta { text-shadow: 0 1px 3px oklch(0.1 0.02 182 / .55), 0 2px 20px oklch(0.1 0.02 182 / .5); }
.hero:has(.wp-post-image) .dek { color: oklch(0.9 0.012 90); }
/* Le voile est plus pâle en haut du hero (dégradé) : sur une photo claire à cet
   endroit, le kicker en simple texte devient illisible malgré l'ombre portée.
   Un fond en pastille garantit le contraste peu importe la photo. */
.hero:has(.wp-post-image) .kicker { background: oklch(0.12 0.02 182 / .6); padding: .35rem .8rem .35rem .7rem; border-radius: 999px; text-shadow: none; }

/* ================= CORPS de lecture (post-content) ================= */
.article-shell { max-width: var(--measure); margin: 0 auto; padding: clamp(2.4rem, 5vw, 3.6rem) clamp(1.2rem, 4vw, 1.5rem) 0; }
.prose p { line-height: 1.7; }
.prose h2, .prose h3 { font-family: var(--grotesk); color: var(--ink); text-wrap: balance; scroll-margin-top: calc(var(--head-h) + 2rem); }
.prose h2 { font-weight: 800; font-size: var(--step-2); line-height: 1.12; letter-spacing: -.03em; margin-top: 3rem; margin-bottom: 1rem; }
.prose h3 { font-weight: 700; font-size: var(--step-1); line-height: 1.2; letter-spacing: -.02em; margin-top: 2.2rem; margin-bottom: .8rem; }
.prose a { color: var(--bourgogne); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; text-decoration-color: var(--line-strong); transition: text-decoration-color .2s; }
.prose a:hover { text-decoration-color: var(--bourgogne); }
.prose strong { font-weight: 600; }
.prose ul, .prose ol { padding-left: 1.4rem; }
.prose li { margin: .35rem 0; line-height: 1.6; }
.prose blockquote { margin: 2.4rem 0; padding-left: 1.3rem; border-left: 3px solid var(--bourgogne); }
.prose blockquote p { font-family: var(--grotesk); font-weight: 700; font-size: var(--step-1); line-height: 1.2; letter-spacing: -.02em; color: var(--terre); }
/* chapô : première ligne d'accroche (classe .lead sur un paragraphe) */
.prose .lead { font-size: calc(var(--step-0) + .12rem); line-height: 1.6; color: var(--ink); }
.prose .lead::first-letter { font-family: var(--grotesk); font-weight: 800; font-size: 3.2em; line-height: .8; float: left; margin: .04em .12em -.04em 0; color: var(--bourgogne); }

/* --- IMAGES dans le corps : toujours accrochées à la colonne de lecture -----------
   Une image sans alignement occupe la mesure (comme le texte), centrée. Une image
   « alignée à droite/gauche » flotte DANS la colonne (le texte l'enrobe) : sa marge
   extérieure suit le bord de la mesure au lieu de fuir au bord de la page. Sous 640 px
   le flottement est retiré (image pleine largeur). La visionneuse (clic pour agrandir)
   vient du réglage natif lightbox de theme.json, pas d'ici. --- */
.prose figure.wp-block-image { margin-block: 1.9rem; }
.prose figure.wp-block-image img { border-radius: 10px; display: block; height: auto; }
.prose figure.wp-block-image figcaption { font-family: var(--sans); font-size: 1rem; line-height: 1.45; color: var(--ink-soft); text-align: center; margin-top: .55rem; }
.prose .alignright, .prose .alignleft { max-width: min(46%, 320px); }
.prose .alignright figcaption, .prose .alignleft figcaption { text-align: left; }
.prose .alignright { margin-inline-end: max(0px, calc((100% - var(--measure)) / 2)); }
.prose .alignleft  { margin-inline-start: max(0px, calc((100% - var(--measure)) / 2)); }
@media (max-width: 640px) {
  .prose .alignright, .prose .alignleft { float: none; max-width: 100%; margin-inline: auto; }
}

/* --- Anti-débordement horizontal (surtout mobile) : les vieux articles
   convertis embarquent des médias à largeur héritée (images width="1440" ou
   style="width:500px", iframes/intégrations YouTube-Twitter à 560 px) qui
   dépassent la colonne et font « glisser » la page. On les borne à la largeur
   du contenu, sans toucher aux composants qui gèrent déjà leur mise à l'échelle. */
.prose img, .prose video, .prose iframe, .prose embed, .prose object,
.prose .wp-block-embed, .prose .wp-block-embed__wrapper { max-width: 100%; }
.prose img { height: auto; }
.prose pre, .prose table { display: block; max-width: 100%; overflow-x: auto; }
.prose { overflow-wrap: break-word; }
/* Le widget de réservation Amelia (id #amelia-container) est rendu DANS le contenu
   .prose. Sa grille de calendrier est un FullCalendar en <table> : la règle ci-dessus
   (.prose table{display:block}, faite pour les tableaux d'articles) casse la mise en
   page de FullCalendar → la table du corps sort à height:0 et les jours deviennent
   invisibles. On restaure la mise en page « table » pour les seules tables d'Amelia
   (l'id l'emporte sur .prose en spécificité, pas besoin de !important). */
#amelia-container table { display: table; overflow: visible; }

/* ================= FICHE AUTEUR (bloc post-author) ================= */
.author-card { max-width: var(--measure); margin: 3rem auto 0; padding: 2rem clamp(1.2rem, 4vw, 1.5rem) 0; border-top: 1px solid var(--line-strong); }
.author-card .wp-block-post-author { display: flex; gap: 1.2rem; align-items: flex-start; }
.author-card .wp-block-post-author__avatar { flex-shrink: 0; }
.author-card .wp-block-post-author__avatar img { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; display: block; }
.author-card .wp-block-post-author__name { font-family: var(--grotesk); font-weight: 800; font-size: 1.15rem; color: var(--ink); margin: 0 0 .35rem; }
.author-card .wp-block-post-author__bio { font-size: var(--step-0); line-height: 1.6; color: var(--ink-soft); margin: 0; }

/* ================= À LIRE ENSUITE ================= */
.reads { max-width: 1100px; margin: 4rem auto 0; padding: 0 clamp(1.2rem, 4vw, 2.5rem); }
.reads-head { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 2px solid var(--ink); padding-bottom: .8rem; margin-bottom: 1.6rem; gap: 1rem; }
.reads-head h3 { font-family: var(--grotesk); font-weight: 800; font-size: var(--step-1); letter-spacing: -.02em; color: var(--ink); margin: 0; }
.reads-head a { font-family: var(--grotesk); font-weight: 600; font-size: .9rem; color: var(--bourgogne); text-decoration: none; }
.read-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 2rem; }
.read { text-decoration: none; color: inherit; display: block; }
.read .rk { font-family: var(--grotesk); font-weight: 700; font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; color: var(--bourgogne); }
.read h4 { font-family: var(--grotesk); font-weight: 700; font-size: 1.2rem; line-height: 1.2; letter-spacing: -.02em; color: var(--ink); margin: .4rem 0; transition: color .2s; }
.read:hover h4 { color: var(--bourgogne); }
.read p { font-size: var(--step-0); color: var(--ink-soft); line-height: 1.5; margin: 0; }

/* ================= COMMENTAIRES =================
   Port du module « Discussion » de tasks/preview/article.html, adapté à la sortie
   des blocs natifs (comments-title, comment-template, avatar, comment-author-name,
   comment-date, comment-content, comment-reply-link, post-comments-form). Le fil et
   le formulaire restent 100 % natifs (pas de vote/tri/partage inventés) : c'est un
   habillage, pas une nouvelle mécanique. */
.comments { max-width: var(--measure); margin: 3.5rem auto 0; padding: 2.2rem clamp(1.2rem, 4vw, 1.5rem) 0; border-top: 1px solid var(--line-strong); }
.comments .wp-block-post-comments-form,
.comments .wp-block-comments { margin-top: 1.6rem; }

/* En-tête « N réponses » (titre d'article retiré via showPostTitle:false dans le gabarit) */
.comments .wp-block-comments-title,
.comments .comment-reply-title { font-family: var(--grotesk); font-weight: 800; font-size: var(--step-1); letter-spacing: -.02em; color: var(--ink); line-height: 1.2; text-wrap: balance; margin: 0; }

/* Ligne d'en-tête : titre à gauche, raccourci « Laisser un commentaire ↓ » à droite.
   Le lien saute au vrai formulaire (#respond) — pas de faux bouton : sur un article à
   beaucoup de commentaires, il évite d'avoir à tout dérouler pour participer. */
.comments .comments-head { align-items: baseline; justify-content: space-between; gap: .5rem 1.2rem; margin-bottom: 1.6rem; }
.comments .comments-jump { margin: 0; }
.comments .comments-jump a { display: inline-flex; align-items: center; gap: .3rem; min-height: 44px; padding: 0 .2rem; font-family: var(--grotesk); font-weight: 700; font-size: .9rem; color: var(--bourgogne); text-decoration: none; white-space: nowrap; transition: color .2s, gap .2s; }
.comments .comments-jump a:hover { color: var(--bourgogne-vif); gap: .45rem; }
@media (prefers-reduced-motion: reduce) { .comments .comments-jump a { transition: color .2s; } .comments .comments-jump a:hover { gap: .3rem; } }

/* Fil : listes sans puces, réponses en retrait doux */
.comments .wp-block-comment-template,
.comments .wp-block-comment-template ol { list-style: none; margin: 0; padding: 0; }
.comments .wp-block-comment-template > li { padding: 1.5rem 0; border-top: 1px solid var(--line); }
.comments .wp-block-comment-template > li:first-child { border-top: 0; }
/* Réponses en retrait : la sortie « comment-template » imbrique un <ol> SANS classe
   (pas .children comme en PHP classique) → on cible tout <ol> descendant. Le filet
   gauche est un repère de fil (comme un fil de discussion / une citation), pas un
   accent décoratif ; il matérialise l'imbrication. */
.comments .wp-block-comment-template ol { margin: 1.3rem 0 0; padding-left: clamp(1rem, 3vw, 1.6rem); border-left: 2px solid var(--line); }
.comments .wp-block-comment-template ol > li { padding: 1.3rem 0 0; border-top: 0; }

/* Ligne commentaire : avatar + corps (colonnes natives, non empilées) */
.comments .comment-item { gap: .9rem; margin: 0; align-items: flex-start; }
.comments .comment-item > .wp-block-column:first-child { flex: 0 0 44px; }
.comments .wp-block-avatar { line-height: 0; }
.comments .wp-block-avatar img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }

/* Ligne « qui » : nom + badge auteur + date */
.comments .comment-who { align-items: baseline; gap: .6rem; margin-bottom: .3rem; }
.comments .wp-block-comment-author-name { font-family: var(--grotesk); font-weight: 700; font-size: .98rem; color: var(--ink); }
.comments .wp-block-comment-author-name a { color: var(--ink); text-decoration: none; }
.comments .wp-block-comment-author-name a:hover { color: var(--bourgogne); }
/* Badge « Auteur » sur les commentaires d'Alexandre (WP marque .bypostauthor) */
.comments .bypostauthor > .comment-item .comment-who .wp-block-comment-author-name::after,
.comments .bypostauthor > * .comment-who .wp-block-comment-author-name::after { content: "Auteur"; margin-left: .5rem; font-family: var(--grotesk); font-weight: 700; font-size: .68rem; letter-spacing: .03em; text-transform: uppercase; color: var(--on-dark); background: var(--terre); padding: .1rem .45rem; border-radius: 4px; vertical-align: middle; }
.comments .wp-block-comment-date,
.comments .wp-block-comment-date a { font-family: var(--sans); font-size: .82rem; color: var(--ink-soft); text-decoration: none; }
.comments .wp-block-comment-date a:hover { color: var(--bourgogne); }

/* Corps du commentaire */
.comments .wp-block-comment-content { font-size: 1rem; line-height: 1.6; color: var(--ink); margin: .25rem 0 0; }
.comments .wp-block-comment-content p { margin: 0 0 .6rem; }
.comments .wp-block-comment-content p:last-child { margin-bottom: 0; }

/* « Répondre » en bouton doux (comme la maquette) */
.comments .wp-block-comment-reply-link { margin-top: .45rem; }
.comments .wp-block-comment-reply-link a { display: inline-flex; align-items: center; font-family: var(--grotesk); font-weight: 600; font-size: .85rem; color: var(--ink-soft); text-decoration: none; padding: .35rem .55rem; margin-left: -.55rem; border-radius: 8px; transition: color .2s, background .2s; }
.comments .wp-block-comment-reply-link a:hover { color: var(--bourgogne); background: var(--surface); }

/* Formulaire : textarea + champs invité + case + bouton */
.comments .comment-form { display: flex; flex-direction: column; gap: 1rem; }
.comments .comment-form .comment-notes,
.comments .comment-form .comment-form-cookies-consent { font-size: .9rem; color: var(--ink-soft); }
.comments .comment-form label { font-family: var(--sans); font-weight: 600; font-size: .9rem; color: var(--ink-soft); display: block; margin-bottom: .35rem; }
.comments .comment-form textarea,
.comments .comment-form input[type="text"],
.comments .comment-form input[type="email"],
.comments .comment-form input[type="url"] { width: 100%; box-sizing: border-box; font-family: var(--sans); font-size: 1rem; line-height: 1.5; padding: .8rem .9rem; border: 1.5px solid var(--line-strong); border-radius: 9px; background: var(--bg); color: var(--ink); }
.comments .comment-form textarea { min-height: 110px; resize: vertical; }
.comments .comment-form textarea:focus,
.comments .comment-form input:focus { outline: 2px solid var(--bourgogne); border-color: var(--bourgogne); }
.comments .comment-form .comment-form-author,
.comments .comment-form .comment-form-email,
.comments .comment-form .comment-form-url { margin: 0; }
/* Deux cases, deux structures WP (cookies = input+label frères ; StCR = <label> qui
   enveloppe case + texte + lien). On les traite pareil : flux EN LIGNE — la case reste
   au fil du texte (un flex éclaterait le libellé StCR et éjecterait son lien). La case
   s'aligne sur la 1re ligne via vertical-align ; le libellé s'enroule dessous. Le <p>
   porte la cible tactile (≥44px). StCR arrive avec un style inline width:30px → seul
   !important le ramène à 20px. */
.comments .comment-form .comment-form-cookies-consent,
.comments .comment-form .comment-form-subscriptions { margin: 0; padding: .5rem 0; min-height: 44px; }
.comments .comment-form .comment-form-cookies-consent label,
.comments .comment-form .comment-form-subscriptions label { margin: 0; font-family: var(--sans); font-weight: 400; font-size: .95rem; line-height: 1.6; color: var(--ink-soft); cursor: pointer; }
.comments .comment-form .comment-form-cookies-consent input[type="checkbox"],
.comments .comment-form .comment-form-subscriptions input[type="checkbox"] { width: 20px !important; height: 20px; margin: 0 .5rem 0 0; vertical-align: -.28em; accent-color: var(--bourgogne); }
.comments .comment-form .comment-form-subscriptions a { color: var(--bourgogne); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--line-strong); transition: text-decoration-color .2s; }
.comments .comment-form .comment-form-subscriptions a:hover { text-decoration-color: var(--bourgogne); }

/* hCaptcha invisible : présent pour la validation, mais sorti du flux flex pour ne pas
   ouvrir un espace fantôme entre les cases (le défi éventuel s'affiche en surimpression). */
.comments .comment-form .h-captcha { position: absolute; width: 1px; height: 1px; left: -9999px; }

/* Bouton d'envoi : la vraie sortie porte .wp-block-button__link (pas .submit). */
.comments .comment-form .form-submit { margin: 0; }
.comments .comment-form input[type="submit"],
.comments .comment-form .wp-block-button__link { font-family: var(--grotesk); font-weight: 700; font-size: .95rem; background: var(--ink); color: var(--bg); border: 0; padding: .7rem 1.4rem; border-radius: 8px; cursor: pointer; transition: background .2s; box-shadow: none; }
.comments .comment-form input[type="submit"]:hover,
.comments .comment-form .wp-block-button__link:hover { background: var(--bourgogne); }
@media (max-width: 560px) {
  .comments .comment-form .comment-form-author,
  .comments .comment-form .comment-form-email { width: 100%; }
}

/* ================= LISTES (archive de catégorie, blog) =================
   Port de la « liste éditoriale » de tasks/preview/archive.html, adapté à la
   sortie des blocs natifs (query-title, term-description, post-template,
   query-pagination). La « une illustrée » du mockup n'est PAS reprise : sur une
   archive, la boucle hérite du fil de la catégorie (inherit) et ne peut pas
   traiter le 1er billet à part sans bloc sur mesure → candidat pattern (3D). */
.list-wrap { max-width: 1100px; margin-inline: auto; padding-inline: clamp(1.2rem, 4vw, 2.5rem); }

.cat-head { padding: clamp(2.6rem, 6vw, 4.4rem) 0 clamp(1.4rem, 3vw, 2rem); }
.cat-head .crumb { font-family: var(--grotesk); font-weight: 500; font-size: .86rem; color: var(--ink-soft); margin: 0 0 1.3rem; }
.cat-head .crumb a { text-decoration: none; color: var(--ink-soft); transition: color .2s; }
.cat-head .crumb a:hover { color: var(--bourgogne); }
.cat-head .crumb .sep { opacity: .5; margin: 0 .35rem; }
.cat-head h1, .cat-head .wp-block-query-title { font-family: var(--grotesk); font-weight: 800; font-size: var(--step-3); line-height: 1.02; letter-spacing: -.035em; color: var(--terre); text-wrap: balance; margin: 0; }
.cat-head .cat-desc, .cat-head .wp-block-term-description { font-size: var(--step-1); line-height: 1.4; color: var(--ink-soft); max-width: 58ch; margin: 1rem 0 0; text-wrap: pretty; }
.cat-head .wp-block-term-description p { margin: 0; }

.archive-list { margin-top: clamp(1.4rem, 3vw, 2.2rem); }
.list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-strong); }
.list > li { display: flex; gap: clamp(1rem, 2.5vw, 1.6rem); align-items: flex-start; padding: 1.7rem 0; border-bottom: 1px solid var(--line); margin: 0; }
/* Vignette à la une (3:2) — repli sapin dégradé quand l'article n'a pas d'image. */
.list .row-thumb { flex: 0 0 clamp(9rem, 24vw, 13.5rem); aspect-ratio: 3 / 2; border-radius: 10px; overflow: hidden; background: linear-gradient(150deg, var(--spruce-900), oklch(0.29 0.028 172)); }
.list .row-thumb .wp-block-post-featured-image { margin: 0; height: 100%; }
.list .row-thumb .wp-block-post-featured-image a { display: block; width: 100%; height: 100%; }
.list .row-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .45s cubic-bezier(0.22, 1, 0.36, 1); }
.list > li:hover .row-thumb img { transform: scale(1.04); }
.list .row-body { flex: 1 1 0; min-width: 0; }
.list .row-meta { gap: .55rem; align-items: center; margin: 0 0 .45rem; }
.list .row-meta .tag, .list .row-meta .tag a { font-family: var(--grotesk); font-weight: 700; font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--bourgogne); text-decoration: none; }
.list .row-meta .wp-block-post-date, .list .row-meta time { font-family: var(--sans); font-size: .85rem; color: var(--ink-soft); }
.list h3 { font-family: var(--grotesk); font-weight: 700; font-size: clamp(1.28rem, 1.1rem + .6vw, 1.55rem); line-height: 1.2; letter-spacing: -.02em; margin: 0 0 .4rem; text-wrap: balance; }
.list h3 a { color: var(--ink); text-decoration: none; transition: color .2s; }
.list h3 a:hover { color: var(--bourgogne); }
.list .wp-block-post-excerpt { margin: 0; }
.list .wp-block-post-excerpt p, .list .wp-block-post-excerpt__excerpt { font-size: var(--step-0); line-height: 1.5; color: var(--ink-soft); max-width: 72ch; margin: 0; }
.list .wp-block-post-excerpt__more-text, .list .wp-block-post-excerpt__more-link { display: none; }
@media (max-width: 620px) {
  .list > li { gap: .95rem; }
  .list .row-thumb { flex-basis: clamp(6.5rem, 30vw, 8.5rem); border-radius: 8px; }
  .list h3 { font-size: clamp(1.12rem, 1rem + 1.4vw, 1.3rem); }
}
@media (prefers-reduced-motion: reduce) {
  .list .row-thumb img { transition: none; }
  .list > li:hover .row-thumb img { transform: none; }
}

/* pagination — version sobre (le motif « piste du caribou » de la maquette est
   décoratif : candidat pattern/plugin, pas indispensable au gabarit) */
.wp-block-query-pagination { margin-top: clamp(2.4rem, 4vw, 3.4rem); gap: .35rem; font-family: var(--grotesk); font-weight: 600; align-items: center; justify-content: center; }
.wp-block-query-pagination .page-numbers { min-width: 44px; height: 44px; display: inline-grid; place-items: center; border-radius: 9px; text-decoration: none; color: var(--ink-soft); transition: background .2s, color .2s; }
.wp-block-query-pagination .page-numbers:hover { background: var(--surface); color: var(--ink); }
.wp-block-query-pagination .page-numbers.current { color: var(--bourgogne); font-weight: 800; }
.wp-block-query-pagination-previous, .wp-block-query-pagination-next { display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box; color: var(--ink-soft); font-weight: 600; text-decoration: none; padding: 0 .8rem; }
.wp-block-query-pagination-previous:hover, .wp-block-query-pagination-next:hover { color: var(--ink); }

/* ---- champ de recherche du repli (index.html) ---- */
.cat-head .wp-block-search { margin-top: 1.2rem; max-width: 460px; }
.cat-head .wp-block-search__inside-wrapper { display: flex; gap: .5rem; }
.cat-head .wp-block-search__input { flex: 1; font-family: var(--sans); font-size: 1rem; padding: .7rem .9rem; border: 1.5px solid var(--line-strong); border-radius: 8px; background: var(--bg); color: var(--ink); }
.cat-head .wp-block-search__input:focus { outline: 2px solid var(--bourgogne); border-color: var(--bourgogne); }
.cat-head .wp-block-search__button { font-family: var(--grotesk); font-weight: 700; font-size: .95rem; padding: .7rem 1.2rem; border: 0; border-radius: 8px; background: var(--bourgogne); color: var(--on-dark); cursor: pointer; transition: background .2s; }
.cat-head .wp-block-search__button:hover { background: var(--bourgogne-vif); }
.no-res { font-size: var(--step-0); line-height: 1.55; color: var(--ink-soft); padding: 2rem 0; }
.no-res a { color: var(--bourgogne); }

/* ================= UNE ILLUSTRÉE (pattern) =================
   Port de la « une illustrée » de tasks/preview/archive.html, adapté à la sortie des
   blocs natifs (query non héritée perPage 1 → post-template → featured-image + méta).
   Le badge catégorie est en incrustation (post-terms absolu sur la carte). */
.feature { margin: clamp(1.4rem, 3vw, 2.2rem) 0 clamp(2.4rem, 4vw, 3.2rem); }
.feature .wp-block-post-template { list-style: none; margin: 0; padding: 0; }
.feature .wp-block-post-template > li { margin: 0; }
.feature-card { position: relative; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: clamp(1.3rem, 3vw, 2.4rem); align-items: stretch; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--bg); transition: box-shadow .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease); }
.feature-card:hover { border-color: var(--line-strong); box-shadow: 0 16px 44px oklch(0.2 0.02 60 / .09); transform: translateY(-2px); }
.feature-img { position: relative; overflow: hidden; background: var(--spruce-900); min-height: 220px; margin: 0; }
.feature-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feature-flag { position: absolute; top: 1rem; left: 1rem; z-index: 2; margin: 0; font-family: var(--grotesk); font-weight: 700; font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; background: var(--bourgogne); padding: .3rem .7rem; border-radius: 6px; }
.feature-flag, .feature-flag a { color: var(--on-dark); text-decoration: none; }
.feature-body { padding: clamp(1.4rem, 3vw, 2rem) clamp(1.4rem, 3vw, 2rem) clamp(1.4rem, 3vw, 2rem) 0; display: flex; flex-direction: column; justify-content: center; }
.feature-meta, .feature-meta time { font-family: var(--sans); font-size: .86rem; color: var(--ink-soft); }
.feature-meta { margin: 0 0 .5rem; }
.feature-body .wp-block-post-title { font-family: var(--grotesk); font-weight: 800; font-size: var(--step-2); line-height: 1.08; letter-spacing: -.03em; margin: 0; text-wrap: balance; }
.feature-body .wp-block-post-title a { color: var(--ink); text-decoration: none; transition: color .2s; }
.feature-card:hover .wp-block-post-title a { color: var(--bourgogne); }
.feature-excerpt { margin: .7rem 0 0; }
.feature-excerpt p { font-size: var(--step-0); line-height: 1.55; color: var(--ink-soft); margin: 0; max-width: 48ch; }
/* a.feature-more : bat le lien global de theme.json (:root :where(a), 0,1,0) pour retirer le soulignement */
.feature-body a.feature-more { font-family: var(--grotesk); font-weight: 700; font-size: .92rem; color: var(--bourgogne); text-decoration: none; margin-top: 1.1rem; display: inline-flex; align-items: center; gap: .4rem; transition: gap .2s; }
.feature-card:hover .feature-more { gap: .65rem; }

@media (max-width: 640px) {
  .feature-card { grid-template-columns: 1fr; }
  .feature-body { padding: 0 clamp(1.2rem, 4vw, 1.6rem) clamp(1.4rem, 4vw, 1.8rem); }
}
@media (prefers-reduced-motion: reduce) {
  .feature-card, .feature-card .wp-block-post-title a, .feature-more { transition: none; }
}

/* ================= ACCUEIL (patterns) =================
   Port de tasks/preview/accueil.html. Trois patterns : hero manifeste + aurore
   (hero-accueil), derniers articles par catégorie (derniers-categorie),
   passerelle pro (passerelle-pro). Les valeurs restent celles de theme.json ;
   les oklch() littéraux sont des couleurs d'effet décoratives (ombres, alphas,
   aurore) — mêmes exceptions que chrome.css. */
.shell { max-width: 1200px; margin-inline: auto; padding-inline: clamp(1.2rem, 4vw, 2.5rem); }

/* --- HERO manifeste + vedette --- */
.home-hero { position: relative; background: var(--spruce-900); color: var(--on-dark); overflow: hidden; }
.home-hero .hbg { position: absolute; inset: 0; z-index: 0; }
.home-hero .hbg svg { width: 100%; height: 100%; object-fit: cover; }
.aurora { position: absolute; inset: 0 0 auto 0; height: 78%; z-index: 1; overflow: hidden; pointer-events: none; }
.aurora i { position: absolute; top: -32%; height: 150%; width: 28%; opacity: .5; filter: blur(32px); mix-blend-mode: screen; border-radius: 46% 54% 48% 52%/60% 62% 40% 38%; transform-origin: 50% 15%; }
.aurora .a0 { top: -16%; left: 2%; width: 82%; height: 120%; border-radius: 50%; background: radial-gradient(ellipse 82% 62% at 52% 40%, oklch(0.8 0.14 168 / .58), transparent 78%); opacity: .55; filter: blur(50px); animation: glow 15s ease-in-out infinite; }
.aurora .a1 { left: 6%; background: linear-gradient(180deg, transparent 4%, oklch(0.85 0.18 156 / .9) 40%, transparent 80%); animation: sway1 9s ease-in-out infinite; }
.aurora .a2 { left: 24%; background: linear-gradient(180deg, transparent 6%, oklch(0.8 0.16 178 / .82) 44%, transparent 82%); animation: sway2 11s ease-in-out infinite; animation-delay: -2s; }
.aurora .a3 { left: 40%; background: linear-gradient(180deg, transparent 4%, oklch(0.87 0.17 150 / .85) 38%, transparent 78%); animation: sway1 8s ease-in-out infinite; animation-delay: -4s; }
.aurora .a4 { left: 52%; background: linear-gradient(180deg, transparent 8%, oklch(0.66 0.17 322 / .62) 46%, transparent 82%); animation: sway2 12s ease-in-out infinite; animation-delay: -1s; }
.aurora .a5 { left: 16%; width: 44%; background: linear-gradient(180deg, transparent 6%, oklch(0.82 0.15 188 / .72) 42%, transparent 82%); animation: sway1 10s ease-in-out infinite; animation-delay: -6s; }
.stars { position: absolute; inset: 0 0 auto 0; height: 60%; z-index: 1; pointer-events: none; }
.stars i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: oklch(0.97 0.02 90); box-shadow: 0 0 4px oklch(0.97 0.02 90 / .7); opacity: .5; animation: twinkle 6s ease-in-out infinite; }
.shoot { position: absolute; top: 6%; left: 62%; width: 150px; height: 2px; z-index: 1; border-radius: 2px; background: linear-gradient(90deg, oklch(0.98 0.03 90), transparent); box-shadow: 0 0 6px oklch(0.97 0.03 90 / .5); opacity: 0; transform: rotate(-20deg); animation: shoot 10s ease-in infinite; animation-delay: 3s; pointer-events: none; }
@keyframes sway1 { 0%, 100% { transform: translateX(-3%) skewX(-4deg) scaleY(.95); opacity: .48; } 50% { transform: translateX(4%) skewX(3deg) scaleY(1.07); opacity: .82; } }
@keyframes sway2 { 0%, 100% { transform: translateX(3%) skewX(4deg) scaleY(1.05); opacity: .78; } 50% { transform: translateX(-4%) skewX(-3deg) scaleY(.93); opacity: .46; } }
@keyframes glow { 0%, 100% { opacity: .5; } 50% { opacity: .62; } }
@keyframes twinkle { 0%, 100% { opacity: .16; } 50% { opacity: .85; } }
@keyframes shoot { 0%, 88% { opacity: 0; transform: translate(0, 0) rotate(-20deg); } 90% { opacity: .9; } 100% { opacity: 0; transform: translate(-260px, 95px) rotate(-20deg); } }
/* Décor du hero figé en reduced-motion : l'aurore garde sa lueur statique, les
   étoiles restent posées, l'étoile filante ne traverse plus (base opacity 0). */
@media (prefers-reduced-motion: reduce) {
  .aurora .a0, .aurora .a1, .aurora .a2, .aurora .a3, .aurora .a4, .aurora .a5,
  .stars i, .shoot { animation: none; }
}
/* Voile de contraste (scrim) intercalé entre le décor (z-index 1) et le texte
   (z-index 2). L'aurore animée monte à L 0.8-0.87 (mix-blend screen) pile derrière
   les mots : le crème y chutait bien sous 4.5:1. Ce voile pose un fond sombre fiable
   sous le texte, tout en laissant l'aurore respirer en haut, aux bords et derrière la
   carte « À la une ». Pseudo ::after (z-index 1, peint APRÈS .aurora dans l'ordre de
   l'arbre) → couvre le décor sans toucher au texte ni à la carte (z-index 2). */
.home-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(118% 116% at 22% 48%,
    oklch(0.13 0.02 196 / .82) 0%, oklch(0.13 0.02 196 / .58) 33%,
    oklch(0.13 0.02 196 / .18) 56%, transparent 72%);
}
.home-hero .hero-inner { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: clamp(2.8rem, 6vw, 5rem) clamp(1.2rem, 4vw, 2.5rem) clamp(3rem, 6vw, 5rem); display: grid; grid-template-columns: 1.02fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
/* Halo sombre serré (première couche) pour garder le texte lisible même au-dessus
   des zones CLAIRES de l'aurore animée ; deuxième couche = ambiance diffuse (C5). */
.manifesto h1, .manifesto .intro { text-shadow: 0 0 2px oklch(0.15 0.03 200 / .72), 0 1px 4px oklch(0.15 0.03 200 / .9), 0 2px 26px oklch(0.16 0.03 200 / .66); }
.manifesto h1 { font-family: var(--grotesk); font-weight: 800; font-size: var(--step-4); line-height: .98; letter-spacing: -.038em; color: var(--on-dark); text-wrap: balance; max-width: 13ch; margin: 0; }
/* Intro portée à --on-dark (comme le titre) : sur le décor animé, l'aurore éclaircit
   le fond par endroits et l'ancien --on-dark-soft (0.78) chutait sous 4.5:1. La
   hiérarchie tient par la taille (step-1) et le poids (400 vs 800), pas la couleur. */
.manifesto .intro { font-family: var(--sans); font-size: var(--step-1); line-height: 1.4; color: var(--on-dark); margin-top: 1.3rem; max-width: 44ch; }
.byline { display: flex; align-items: center; gap: .75rem; margin-top: 1.7rem; }
.byline img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 1.5px solid oklch(0.5 0.03 178 / .5); }
.byline .who { font-family: var(--grotesk); font-size: .92rem; line-height: 1.3; color: var(--on-dark); }
.byline .who span { display: block; font-family: var(--sans); font-size: .85rem; color: var(--on-dark-soft); }
.home-hero .actions { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.9rem; }
.btn-p { font-family: var(--grotesk); font-weight: 700; font-size: .98rem; background: var(--bg); color: var(--ink); padding: .75rem 1.3rem; border-radius: 9px; text-decoration: none; transition: background .2s, transform .2s; }
.btn-p:hover { background: var(--bourgogne); color: var(--on-dark); transform: translateY(-1px); }
.btn-s { font-family: var(--grotesk); font-weight: 700; font-size: .98rem; color: var(--on-dark); padding: .75rem 1.3rem; border-radius: 9px; text-decoration: none; border: 1.5px solid oklch(0.55 0.03 178 / .55); background: oklch(0.4 0.03 180 / .16); transition: border-color .2s, background .2s; }
.btn-s:hover { border-color: var(--sauge); background: oklch(0.3 0.03 180 / .4); }
/* Les boutons du hero portent LEURS propres couleurs. On les soustrait à la règle
   générique `.hero-inner a { color: inherit }` (qui impose le texte clair du hero) :
   sinon le primaire — fond clair `--bg` — hérite d'un texte clair et devient illisible
   (contraste ~1). Scopé au hero (spécificité 0,2,1) → aucun effet sur le kicker/fil
   d'Ariane du hero d'article. Le secondaire reçoit explicitement ce qu'il avait déjà. */
.hero-inner a.btn-p { color: var(--ink); }
.hero-inner a.btn-s { color: var(--on-dark); }
.hero-feature { background: var(--bg); color: var(--ink); border-radius: 16px; overflow: hidden; box-shadow: 0 26px 64px oklch(0.1 0.02 180 / .5); text-decoration: none; display: block; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.hero-feature:hover { transform: translateY(-3px); box-shadow: 0 34px 74px oklch(0.1 0.02 180 / .58); }
.hero-feature .fimg { position: relative; aspect-ratio: 16/9; background: var(--spruce-800); overflow: hidden; }
.hero-feature .fimg svg, .hero-feature .fimg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-feature .flag { position: absolute; top: 1rem; left: 1rem; font-family: var(--grotesk); font-weight: 700; font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; color: var(--on-dark); background: var(--bourgogne); padding: .3rem .7rem; border-radius: 6px; }
.hero-feature .fbody { padding: clamp(1.3rem, 3vw, 1.7rem) clamp(1.4rem, 3vw, 1.9rem) clamp(1.4rem, 3vw, 1.8rem); }
.hero-feature .fmeta { font-family: var(--grotesk); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--bourgogne); font-weight: 700; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.hero-feature .fmeta time { font-family: var(--sans); text-transform: none; letter-spacing: 0; color: var(--ink-soft); font-weight: 400; }
.hero-feature .fmeta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--line-strong); }
.hero-feature h2 { font-family: var(--grotesk); font-weight: 800; font-size: var(--step-1); line-height: 1.12; letter-spacing: -.025em; color: var(--ink); margin: .55rem 0 .5rem; text-wrap: balance; transition: color .2s; }
.hero-feature:hover h2 { color: var(--bourgogne); }
.hero-feature .fex { font-size: var(--step-0); line-height: 1.5; color: var(--ink-soft); max-width: 52ch; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hero-feature .fmore { font-family: var(--grotesk); font-weight: 700; font-size: .9rem; color: var(--bourgogne); margin-top: .9rem; display: inline-flex; align-items: center; gap: .4rem; transition: gap .2s; }
.hero-feature:hover .fmore { gap: .65rem; }
@media (max-width: 880px) { .home-hero .hero-inner { grid-template-columns: 1fr; gap: 2.2rem; } .manifesto h1 { max-width: 16ch; }
  /* En colonne unique le texte occupe toute la largeur et la lueur centrale de
     l'aurore tombe pile derrière le paragraphe : voile recentré et élargi. */
  .home-hero::after { background: radial-gradient(140% 82% at 44% 40%,
    oklch(0.13 0.02 196 / .84) 0%, oklch(0.13 0.02 196 / .6) 42%,
    oklch(0.13 0.02 196 / .2) 68%, transparent 88%); } }

/* --- DERNIERS articles par catégorie --- */
.derniers { padding: clamp(3rem, 6vw, 5rem) 0 clamp(1rem, 2vw, 1.5rem); }
.derniers .sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.derniers .sec-head h2 { font-family: var(--grotesk); font-weight: 800; font-size: var(--step-2); letter-spacing: -.03em; color: var(--ink); margin: 0; }
.derniers .sec-head .lead { font-family: var(--sans); font-size: var(--step-0); color: var(--ink-soft); max-width: 40ch; margin: 0; }
.cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 3rem) clamp(2.5rem, 5vw, 4rem); }
.cat-block-head { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; border-bottom: 2px solid var(--ink); padding-bottom: .6rem; }
.cat-block-head h3 { font-family: var(--grotesk); font-weight: 800; font-size: var(--step-1); letter-spacing: -.02em; margin: 0; }
.cat-block-head h3 a { text-decoration: none; color: var(--ink); transition: color .2s; }
.cat-block-head h3 a:hover { color: var(--bourgogne); }
.cat-block-head .all { font-family: var(--grotesk); font-weight: 600; font-size: .85rem; color: var(--bourgogne); text-decoration: none; white-space: nowrap; padding-block: .38rem; margin-block: -.38rem; }
.cat-block-head .all:hover { text-decoration: underline; text-underline-offset: 3px; }
.cat-block ul, .cat-block .wp-block-post-template { list-style: none; margin: 0; padding: 0; }
.cat-row, .cat-block .wp-block-post-template > li { display: block; padding: .95rem 0; border-bottom: 1px solid var(--line); margin: 0; }
.cat-block .wp-block-post-template > li:last-child { border-bottom: 0; }
.cat-row time, .cat-block .wp-block-post-date, .cat-block .wp-block-post-date time { font-family: var(--sans); font-size: .8rem; color: var(--ink-soft); }
.cat-row h4, .cat-block .wp-block-post-title { font-family: var(--grotesk); font-weight: 700; font-size: 1.12rem; line-height: 1.25; letter-spacing: -.015em; color: var(--ink); margin-top: .15rem; margin-bottom: 0; text-wrap: balance; }
.cat-block .wp-block-post-title a { color: var(--ink); text-decoration: none; transition: color .2s; }
.cat-block .wp-block-post-title a:hover, .cat-row:hover h4 { color: var(--bourgogne); }
.cat-row .dek, .cat-block .wp-block-post-excerpt p { font-size: var(--step-0); line-height: 1.45; color: var(--ink-soft); margin: .3rem 0 0; max-width: 46ch; }
.cat-block .wp-block-post-excerpt__more-text { display: none; }
@media (max-width: 720px) { .cat-grid { grid-template-columns: 1fr; gap: 2.4rem; } }

/* --- PASSERELLE pro --- */
.pro { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: clamp(2.5rem, 5vw, 4rem); }
.pro-inner { max-width: 1200px; margin: 0 auto; padding: clamp(2.8rem, 6vw, 4.5rem) clamp(1.2rem, 4vw, 2.5rem); }
.pro-head h2 { font-family: var(--grotesk); font-weight: 800; font-size: var(--step-2); letter-spacing: -.03em; color: var(--terre); text-wrap: balance; margin: 0; }
.pro-head p { font-family: var(--sans); font-size: var(--step-0); line-height: 1.5; color: var(--ink-soft); margin-top: .7rem; max-width: 60ch; }
.pro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.2rem, 2.5vw, 1.6rem); margin-top: clamp(1.6rem, 3vw, 2.2rem); }
.pro-card { background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: clamp(1.4rem, 3vw, 1.8rem); text-decoration: none; color: inherit; transition: border-color .2s, box-shadow .25s, transform .25s; }
.pro-card:hover { border-color: var(--line-strong); box-shadow: 0 14px 38px oklch(0.2 0.02 60 / .08); transform: translateY(-2px); }
.pro-card h3 { font-family: var(--grotesk); font-weight: 800; font-size: var(--step-1); letter-spacing: -.02em; color: var(--ink); display: flex; align-items: center; gap: .55rem; margin: 0; }
.pro-card h3 .go { color: var(--bourgogne); transition: transform .2s var(--ease); }
.pro-card:hover h3 .go { transform: translateX(4px); }
.pro-card p { font-size: var(--step-0); line-height: 1.5; color: var(--ink-soft); margin-top: .6rem; max-width: 44ch; }
.pro-foot { font-family: var(--sans); font-size: var(--step-0); line-height: 1.6; color: var(--ink-soft); margin-top: clamp(1.4rem, 3vw, 1.9rem); }
.pro-foot a { color: var(--bourgogne); text-decoration: none; font-family: var(--grotesk); font-weight: 700; }
.pro-foot a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 720px) { .pro-grid { grid-template-columns: 1fr; } }

/* --- animations d'entrée + réduction de mouvement --- */
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.rise { animation: rise .7s var(--ease) both; }
.rise.d1 { animation-delay: .08s; }
.rise.d2 { animation-delay: .16s; }
@media (prefers-reduced-motion: reduce) {
	.rise { animation: none; }
	.hero-feature, .pro-card { transition: none !important; }
	.aurora i, .stars i, .shoot { animation: none !important; }
	.shoot { opacity: 0 !important; }
}

/* ================= COMPOSANTS DU CORPS D'ARTICLE (patterns 3D.1) =================
   Insérables dans le post-content, donc stylés au sein de .prose. Port de
   tasks/preview/article.html. Valeurs = theme.json ; oklch() littéraux = effets. */

/* Étapes numérotées (liste ordonnée native + className "steps") */
.prose ol.steps { list-style: none; counter-reset: s; margin: 1.4rem 0 1.5rem; padding-left: 0; display: flex; flex-direction: column; gap: 1.1rem; }
.prose ol.steps li { counter-increment: s; position: relative; padding-left: 3rem; margin: 0; }
.prose ol.steps li::before { content: counter(s); position: absolute; left: 0; top: -.1rem; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--surface); border: 1.5px solid var(--line-strong); color: var(--bourgogne); font-family: var(--grotesk); font-weight: 800; font-size: .95rem; display: grid; place-items: center; }
.prose ol.steps li b, .prose ol.steps li strong { font-family: var(--grotesk); font-weight: 700; color: var(--ink); }

/* « En bref » — encart-réponse (GEO / réponse d'abord) */
.brief { margin: 2.2rem 0; background: color-mix(in oklab, var(--sauge) 26%, var(--bg)); border: 1px solid color-mix(in oklab, var(--sauge) 55%, var(--line)); border-radius: 12px; padding: 1.5rem 1.7rem; }
.brief .lbl { font-family: var(--grotesk); font-weight: 700; font-size: .8rem; letter-spacing: .09em; text-transform: uppercase; color: var(--bourgogne); display: flex; align-items: center; gap: .55rem; margin: 0 0 .7rem; }
.brief .lbl::before { content: ""; width: 1.6rem; height: 2px; background: var(--bourgogne); }
.brief p { font-size: calc(var(--step-0) + .02rem); line-height: 1.6; color: var(--ink); margin: 0; }

/* « Aller à la recette » — barre coup d'œil en haut d'un article-recette (pattern),
   pointe vers la carte plus bas (#recette). Le pattern Recette pose l'ancre. */
.recipe-jump { display: flex; align-items: center; gap: .9rem 1.2rem; flex-wrap: wrap; margin: 2rem 0; padding: .85rem .8rem .85rem 1.15rem; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px; }
.recipe-jump .facts { font-family: var(--grotesk); font-weight: 600; font-size: .95rem; color: var(--ink-soft); margin: 0; }
.recipe-jump .facts strong, .recipe-jump .facts b { color: var(--ink); font-weight: 700; }
.recipe-jump .jump-link { margin: 0 0 0 auto; }
.recipe-jump .jump-link a { font-family: var(--grotesk); font-weight: 700; font-size: .95rem; color: var(--on-dark); background: var(--terre); padding: .6rem 1.1rem; border-radius: 8px; text-decoration: none; display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; transition: background .2s var(--ease), transform .2s var(--ease); }
.recipe-jump .jump-link a:hover { background: var(--bourgogne); transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .recipe-jump .jump-link a { transition: none; } }

/* Citation (pull-quote) — filet + grande phrase terre */
.pull { margin: 2.8rem 0; }
.pull::before { content: ""; display: block; width: 56px; height: 4px; background: var(--bourgogne); margin-bottom: 1.3rem; }
.pull p { font-family: var(--grotesk); font-weight: 700; font-size: var(--step-2); line-height: 1.14; letter-spacing: -.03em; color: var(--terre); text-wrap: balance; margin: 0; }

/* Passerelle pro en fin d'article */
.bridge { margin: 3rem 0 0; padding: 1.5rem 1.6rem; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 14px; display: flex; gap: 1.3rem; align-items: center; flex-wrap: wrap; }
.bridge .bx { flex: 1; min-width: 240px; }
.bridge p { font-size: var(--step-0); line-height: 1.5; color: var(--ink); margin: 0; }
.bridge b { color: var(--ink); font-family: var(--grotesk); font-weight: 700; }
.bridge a.go { font-family: var(--grotesk); font-weight: 700; font-size: .95rem; color: var(--on-dark); background: var(--bourgogne); padding: .62rem 1.15rem; border-radius: 8px; text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; gap: .4rem; transition: background .2s, gap .2s, transform .2s; }
.bridge a.go:hover { background: var(--bourgogne-vif); gap: .65rem; transform: translateY(-1px); }

/* « Ton prochain pas » — bloc de fin, signé, avec case à cocher */
.next-step { margin: 3rem 0 0; padding: clamp(1.5rem, 4vw, 1.9rem); border: 1.5px solid var(--bourgogne); border-radius: 14px; background: linear-gradient(180deg, oklch(0.965 0.016 26), var(--bg)); }
.next-step .ns-head { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.1rem; }
.next-step .ns-bird { width: 34px; height: 34px; color: var(--bourgogne); flex-shrink: 0; }
.next-step .ns-kx { font-family: var(--grotesk); font-weight: 800; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--bourgogne); }
.next-step .ns-body { display: flex; gap: 1rem; align-items: flex-start; }
.next-step .ns-check { width: 28px; height: 28px; flex-shrink: 0; border: 2px solid var(--bourgogne); border-radius: 8px; margin-top: .2rem; background: var(--bg); cursor: pointer; display: grid; place-items: center; padding: 0; transition: background .18s var(--ease), border-color .18s var(--ease); }
.next-step .ns-check svg { width: 18px; height: 18px; stroke: var(--bg); stroke-width: 3.4; fill: none; opacity: 0; transform: scale(.5); transition: opacity .18s var(--ease), transform .18s var(--ease); }
.next-step .ns-check:hover { background: oklch(0.42 0.16 26 / .1); }
.next-step .ns-check[aria-pressed="true"] { background: var(--bourgogne); }
.next-step .ns-check[aria-pressed="true"]:hover { background: oklch(0.38 0.15 26); }
.next-step .ns-check[aria-pressed="true"] svg { opacity: 1; transform: scale(1); }
.next-step .ns-gesture { font-family: var(--grotesk); font-weight: 800; font-size: clamp(1.2rem, 1rem + .9vw, 1.55rem); line-height: 1.18; letter-spacing: -.02em; color: var(--ink); text-wrap: balance; margin: 0; }
.next-step .ns-sig { margin: 1.15rem 0 0; display: flex; align-items: center; gap: .5rem; font-family: var(--grotesk); font-weight: 600; font-size: .92rem; color: var(--ink-soft); }
.next-step .ns-sig .paw { width: 18px; height: 18px; color: var(--bourgogne); opacity: .85; flex-shrink: 0; }
.next-step .ns-sig b { color: var(--ink); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .next-step .ns-check, .next-step .ns-check svg { transition: none; } }

/* « Offre » — appel à l'action de service en fin d'article (carte affirmée).
   Plus de poids visuel que la passerelle discrète .bridge : bordure bourgogne,
   fond dégradé, pastille à glyphe, promesse en titre grotesk, gros bouton. */
.offer { margin: 3rem 0 0; padding: clamp(1.5rem, 4vw, 2rem); border: 1.5px solid var(--bourgogne); border-radius: 16px; background: linear-gradient(180deg, oklch(0.965 0.016 26), var(--bg)); }
.offer .of-head { display: flex; align-items: center; gap: .65rem; margin-bottom: 1rem; }
.offer .of-badge { width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center; border-radius: 11px; background: var(--bourgogne); color: var(--on-dark); }
.offer .of-badge svg { width: 22px; height: 22px; }
.offer .of-kx { font-family: var(--grotesk); font-weight: 800; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--bourgogne); }
.offer .of-title { font-family: var(--grotesk); font-weight: 800; font-size: clamp(1.22rem, 1rem + 1vw, 1.55rem); line-height: 1.16; letter-spacing: -.02em; color: var(--ink); text-wrap: balance; margin: 0; }
.offer .of-sub { font-size: var(--step-0); line-height: 1.55; color: var(--ink-soft); margin: .6rem 0 0; max-width: 52ch; }
.offer .go { display: inline-flex; align-items: center; gap: .45rem; min-height: 48px; box-sizing: border-box; margin-top: 1.3rem; font-family: var(--grotesk); font-weight: 700; font-size: 1rem; color: var(--on-dark); background: var(--bourgogne); padding: .7rem 1.4rem; border-radius: 9px; text-decoration: none; transition: background .2s, gap .2s, transform .2s; }
.offer .go:hover { background: var(--bourgogne-vif); gap: .7rem; transform: translateY(-1px); }
.offer .go:focus-visible { outline: 2px solid var(--bourgogne); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .offer .go { transition: none; } .offer .go:hover { transform: none; } }

/* ================= INFOLETTRE MAILPOET (habillage du bloc natif, 3D.2) =================
   Le bloc MailPoet sort son propre balisage (.mailpoet_form) + des styles inline
   (width:100% sur les champs). On plaque le design system par-dessus ; les rares
   !important ne neutralisent QUE ces styles inline du plugin. Contextes : infolettre
   inline d'article (.inline-cta) et pied de page (.nl, quand le footer sera natif).
   ⚠️ Le numéro de formulaire (formId) est propre à chaque site (voir README). */

/* encart inline au fil de l'article */
.inline-cta { margin: 3rem 0; padding: 1.8rem; border: 1.5px solid var(--ink); border-radius: 12px; }
.inline-cta h3 { font-family: var(--grotesk); font-weight: 800; font-size: var(--step-1); line-height: 1.1; letter-spacing: -.02em; color: var(--ink); margin: 0 0 .5rem; }
.inline-cta > p { font-size: var(--step-0); line-height: 1.5; color: var(--ink-soft); margin: 0 0 1.1rem; max-width: 54ch; }

/* champ + bouton (communs inline + footer) : on gagne la spécificité sur le plugin */
.inline-cta .mailpoet_form, .nl .mailpoet_form { margin: 0; }
.inline-cta .mailpoet_form_form, .nl .mailpoet_form_form { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.inline-cta .mailpoet_paragraph, .nl .mailpoet_paragraph { margin: 0; }
/* léger décalage vers le bas du paragraphe du bouton (après le reset margin:0 ci-dessus) */
.inline-cta .mailpoet_paragraph.last, .nl .mailpoet_paragraph.last { margin-top: 10px; }
.inline-cta .mailpoet_paragraph:has(.mailpoet_text), .nl .mailpoet_paragraph:has(.mailpoet_text) { flex: 1 1 210px; }
.inline-cta .mailpoet_paragraph:has(.mailpoet_submit), .nl .mailpoet_paragraph:has(.mailpoet_submit) { flex: 0 0 auto; }
.inline-cta .mailpoet_message, .nl .mailpoet_message { flex-basis: 100%; padding: 0 !important; margin: .6rem 0 0 !important; }

.inline-cta .mailpoet_text, .nl .mailpoet_text {
  font-family: var(--sans); font-size: 1rem; padding: .75rem .9rem;
  border-radius: 8px; border: 1.5px solid var(--line-strong);
  background: var(--bg); color: var(--ink);
  width: 100% !important; box-sizing: border-box; margin: 0 !important;
}
.inline-cta .mailpoet_text:focus, .nl .mailpoet_text:focus { outline: 2px solid var(--bourgogne); border-color: var(--bourgogne); }

/* champ en contexte footer sombre (sapin) : override des seules couleurs — le reste
   (police, marges, largeur) vient de la règle partagée ci-dessus. Vars héritées de
   .site-foot (chrome.css). Champ CLAIR « givré » (famille sapin, pas crème) : sur la
   carte spruce-800, un champ pâle se lit tout de suite comme « à remplir » — l'ancien
   fond sombre translucide se fondait dans la carte. Focus bourgogne hérité (règle
   partagée ci-dessus), plus lisible que le sauge sur ce champ clair. */
.nl .mailpoet_text { background: oklch(0.96 0.008 175); border-color: oklch(0.6 0.03 178 / .6); color: var(--spruce-900); }
.nl .mailpoet_text::placeholder { color: oklch(0.44 0.02 180); } /* ≥ 4.5:1 sur le champ clair */

.inline-cta .mailpoet_submit, .nl .mailpoet_submit {
  font-family: var(--grotesk); font-weight: 700; font-size: .98rem;
  padding: .75rem 1.3rem; border-radius: 8px; border: 0;
  background: var(--bourgogne); color: var(--on-dark); cursor: pointer;
  width: auto !important; margin: 0 !important; transition: background .2s;
}
.inline-cta .mailpoet_submit:hover, .nl .mailpoet_submit:hover { background: var(--bourgogne-vif); }

/* messages succès/erreur (MailPoet contrôle ce balisage : habillé, sans l'icône) */
.inline-cta .mailpoet_validate_success, .nl .mailpoet_validate_success,
.inline-cta .mailpoet_validate_error, .nl .mailpoet_validate_error {
  font-family: var(--sans); font-size: 1rem; line-height: 1.5; margin: 0; padding: .8rem 1rem; border-radius: 8px;
}
.inline-cta .mailpoet_validate_success, .nl .mailpoet_validate_success { color: var(--spruce-900); background: var(--sauge); }
.inline-cta .mailpoet_validate_error, .nl .mailpoet_validate_error { color: var(--bourgogne); background: oklch(0.42 0.16 26 / .08); }

/* ═══ A19 · message de confirmation du PIED après inscription ═══════════
   Au succès, MailPoet ajoute .mailpoet_form_successfully_send au <form> et
   centre le message en position:absolute par-dessus le champ+bouton via
   « .mailpoet_form.mailpoet_form_successfully_send .mailpoet_validate_success »
   (spécificité 0,3,0) → message arraché du flux, « mal cadré », le sapin (teal)
   transparaît autour. On le remet dans le flux (spécificité 0,4,0), on masque le
   champ+bouton devenus inutiles, et on en fait une confirmation nette, lisible
   sur le sapin. Scopé .nl : n'affecte ni l'encart d'article ni la page. */
.nl .mailpoet_form.mailpoet_form_successfully_send { position: static; }
.nl .mailpoet_form_successfully_send .mailpoet_paragraph { display: none; }
.nl .mailpoet_form.mailpoet_form_successfully_send .mailpoet_message { margin: 0; padding: 0; }
.nl .mailpoet_form.mailpoet_form_successfully_send .mailpoet_validate_success {
  position: static; left: auto; top: auto; transform: none; text-align: left;
  margin: 0; padding: .9rem 1.1rem; border-radius: var(--wp--custom--radius--card, 10px);
  background: var(--sauge); color: var(--spruce-900);
  font-family: var(--sans); font-size: 1rem; font-weight: 600; line-height: 1.5;
}
/* coche de succès en tête (forme via masque SVG, couleur = token, zéro hex).
   inline-block : MailPoet révèle le message avec display:block inline (jQuery
   .show()) — un ::before flex serait ignoré, un inline-block tient dans tous les cas. */
.nl .mailpoet_form.mailpoet_form_successfully_send .mailpoet_validate_success::before {
  content: ""; display: inline-block; width: 1.25rem; height: 1.25rem;
  vertical-align: -.28em; margin-right: .5rem;
  background: var(--spruce-900);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* NB : le formulaire « choisis tes sujets » ([mailpoet_manage_subscription]) est
   habillé par le plugin (lecaribou-fonctionnalites/assets/infolettre/manage.css,
   scopé .mailpoet-manage-subscription) — pas ici, pour ne pas dupliquer. */

/* ─────────────────────────────────────────────────────────────────────
   Encart « Rediffusion » de webinaire (pattern article-rediffusion)
   Cadre vidéo 16:9 (Odysée/YouTube en iframe) + libellé + bouton d'action.
   Variante sans vidéo : retirer .rp-frame, garder le libellé, la note, le bouton.
   ───────────────────────────────────────────────────────────────────── */
.replay { margin: 3rem 0; padding: clamp(1.4rem, 4vw, 1.8rem); border: 1.5px solid var(--line-strong); border-radius: 14px; background: var(--surface); }
.replay .rp-head { display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.replay .rp-play { width: 26px; height: 26px; flex-shrink: 0; color: var(--bourgogne); }
.replay .rp-kx { font-family: var(--grotesk); font-weight: 800; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--bourgogne); }
.replay .rp-frame { aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: var(--spruce-900); border: 1px solid var(--line-strong); }
.replay .rp-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.replay .rp-note { font-size: var(--step-0); line-height: 1.5; color: var(--ink-soft); margin: 1rem 0 0; }
.replay .go { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; box-sizing: border-box; margin-top: 1.2rem; font-family: var(--grotesk); font-weight: 700; font-size: .95rem; color: var(--on-dark); background: var(--bourgogne); padding: .6rem 1.2rem; border-radius: 8px; text-decoration: none; transition: background .2s, gap .2s, transform .2s; }
.replay .go:hover { background: var(--bourgogne-vif); gap: .65rem; transform: translateY(-1px); }
.replay .go:focus-visible { outline: 2px solid var(--bourgogne); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .replay .go { transition: none; } .replay .go:hover { transform: none; } }

/* Variante SANS vidéo (className "replay no-video") : le webinaire est passé et
   pointe vers sa rediffusion ailleurs → le bouton EST l'action principale. On lui
   donne du poids (carte teintée, gros bouton lisible) au lieu d'un lien discret. */
.replay.no-video { background: linear-gradient(180deg, oklch(0.965 0.016 26), var(--surface)); border-color: var(--bourgogne); }
.replay.no-video .rp-play { width: 30px; height: 30px; }
.replay.no-video .rp-note { font-size: var(--step-0); line-height: 1.5; color: var(--ink); margin-top: .3rem; }
.replay.no-video .go { min-height: 52px; font-size: 1.05rem; padding: .85rem 1.7rem; margin-top: 1.25rem; border-radius: 10px; box-shadow: 0 10px 26px oklch(0.42 0.16 26 / .22); }
.replay.no-video .go:hover { box-shadow: 0 14px 30px oklch(0.42 0.16 26 / .28); }

/* ================= SOMMAIRE FLOTTANT (rail latéral, longs articles) =================
   Rail collant dans la marge gauche, construit par assets/js/toc-rail.js à partir du
   sommaire Rank Math inline (qui reste en place, pour mobile + SEO + lecteur d'écran).
   Desktop large seulement (≥ 1240px : la marge à gauche de la colonne 47.5rem suffit) ;
   masqué en deçà. Doublon PUREMENT visuel pour le pointeur → le JS le met en aria-hidden
   et rend ses liens non focusables ; l'AT garde le sommaire inline étiqueté. Sans JS :
   rien ne s'affiche, l'inline suffit. Actif = section courante (scroll-spy). */
.lc-toc-rail {
  position: fixed;
  top: clamp(6.5rem, 21vh, 12rem);
  left: max(1.25rem, calc((100vw - var(--measure)) / 2 - 13.25rem));
  width: 12rem;
  max-height: 66vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 5;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-8px);
  transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.lc-toc-rail.is-visible { opacity: 1; visibility: visible; transform: none; }
.lc-toc-rail__title {
  font-family: var(--grotesk);
  font-weight: 800;
  font-size: .72rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 .85rem;
  padding-left: .95rem;
}
.lc-toc-rail ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--line);
}
.lc-toc-rail li { margin: 0; }
.lc-toc-rail li a {
  display: block;
  margin-left: -1px;                    /* chevauche le rail-track */
  border-left: 1px solid transparent;   /* indicateur d'actif : 1px, dans les clous */
  padding: .32rem 0 .32rem .95rem;
  font-family: var(--grotesk);
  font-weight: 500;
  font-size: .82rem;
  line-height: 1.32;
  color: var(--ink-soft);
  text-decoration: none;
  text-wrap: pretty;
  transition: color .2s, border-color .2s;
}
.lc-toc-rail li a:hover { color: var(--ink); }
.lc-toc-rail li a[aria-current="true"] {
  color: var(--bourgogne);
  font-weight: 700;
  border-left-color: var(--bourgogne);
}
@media (max-width: 1239px) { .lc-toc-rail { display: none; } }
@media (prefers-reduced-motion: reduce) { .lc-toc-rail { transition: none; } }