/* NOTE: !important est utilisé sur certaines règles pour gagner
   contre des CSS injectés par des plugins tiers (Opt-In Panda,
   Jetpack, Social Locker) qui chargent après le theme.json. */

/*
Theme Name: Hammoudi Child
Theme URI: https://thomashammoudi.com
Description: Thème enfant de Twenty Twenty-Three — design system 2026 (palette Hammoudi #E50A3B, DM Sans + Source Serif Pro).
Author: Thomas Hammoudi
Version: 0.7.8
Template: twentytwentythree
Requires at least: 6.4
Tested up to: 6.7
Text Domain: hammoudi-child
License: GPL v2 or later
*/

/* ============================================================
   Garde mobile : grid items des Query Loops doivent pouvoir
   shrink en-dessous de leur min-content (par défaut, un grid
   item avec auto-min ne shrink jamais sous la min-content de
   ses enfants — typiquement la featured image avec width:100%
   qui propage la natural width). Sans ce fix, le track 1fr
   devient aussi large que la natural width de l'image et le
   LI déborde du UL parent.
   ============================================================ */
.wp-block-post-template > li {
  min-width: 0;
}

/* ============================================================
   Jetpack Instant Search overlay — empêche le débordement mobile
   sur les pages d'archive après filtrage.
   Le DOM de l'overlay (.jetpack-instant-search__overlay) est
   inséré dans la page même quand l'overlay est fermé. Sur les
   pages cachées par LSCache (HIT), son CSS est optimisé et
   l'overlay reste contenu. Sur les pages MISS (genre /blog/?orderby=rand),
   le CSS Jetpack est servi non optimisé et l'overlay prend une
   largeur de viewport+45px (un padding interne 45px qui sort
   du flow), ce qui pousse le scrollWidth du document et fait
   déborder toute la page sur mobile (Brave, Chrome Mobile).
   On contraint l'overlay à ne jamais sortir du viewport,
   indépendamment de l'état (ouvert/fermé).
   Cf. screenshot Brave Mobile 2026-04-30 : VP=384 DOC=429.
   ============================================================ */
.jetpack-instant-search__overlay,
.jetpack-instant-search__overlay--light,
.jetpack-instant-search__search-results,
.jetpack-instant-search__search-results-wrapper,
.jetpack-instant-search__search-results-controls,
.jetpack-instant-search__search-results-content,
.jetpack-instant-search__search-results-primary,
.jetpack-instant-search__jetpack-colophon {
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

/* ============================================================
   Design tokens complémentaires (compléments à theme.json)
   ============================================================ */
:root {
  --accent-underline-offset: 0.15em;
  --reading-max-width: 42rem; /* ~672px — 65-72 caractères par ligne */
}

/* Fraunces axes variables :
   - opsz : optical size, adapte les serifs à la taille (9–144)
   - SOFT : souplesse des courbes (0 = acéré, 100 = doux)
   - WONK : 0 = glyphes classiques, 1 = variantes fantaisistes (À avec décorations)
   Le défaut de Fraunces peut activer WONK → À majuscule apparaît avec des
   décorations bizarres. On force WONK=0 partout pour un rendu sobre et lisible. */
/* Fraunces a un glyphe alternate pour le A majuscule (A avec apex ondulé).
   Il apparaît via des character variants (cv01-cv99) et/ou features
   discrétionnaires. On désactive tout ce qui remplace des glyphes, et on
   normalise via les propriétés CSS modernes. Résultat : glyphes standards,
   compatible avec les minuscules Fraunces. */
h1, h2, h3, h4, h5, h6,
.wp-block-post-title,
.hc-hero-title,
.hc-pilier-card .wp-block-post-title,
.hc-article-card .wp-block-post-title,
.hc-stat-num,
.hc-about-quote p,
.hc-about-signature,
.hc-path-num {
  font-variation-settings: "opsz" 30, "SOFT" 50, "WONK" 0 !important;
  font-variant-alternates: normal !important;
  font-variant-caps: normal !important;
  font-variant-ligatures: common-ligatures no-discretionary-ligatures no-historical-ligatures no-contextual !important;
  font-feature-settings:
    "liga" 1, "kern" 1,
    "calt" 0, "salt" 0, "dlig" 0, "hlig" 0, "titl" 0, "case" 0,
    "ss01" 0, "ss02" 0, "ss03" 0, "ss04" 0, "ss05" 0, "ss06" 0, "ss07" 0, "ss08" 0, "ss09" 0,
    "cv01" 0, "cv02" 0, "cv03" 0, "cv04" 0, "cv05" 0, "cv06" 0, "cv07" 0, "cv08" 0, "cv09" 0,
    "cv10" 0, "cv11" 0, "cv12" 0, "cv13" 0, "cv14" 0, "cv15" 0 !important;
}

/* ============================================================
   Fix CLS — cards d'articles dans les Query Loops
   Réserve l'espace de la featured image avant son chargement.
   Cible /blog/ (archive), /accueil-blog/ (synced pattern).
   ============================================================ */
.wp-block-post-template .wp-block-post-featured-image,
.wp-block-post-template .wp-block-post-featured-image a,
.wp-block-post-template .wp-block-post-featured-image img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  width: 100%;
  height: auto;
  display: block;
}

/* ============================================================
   Header — tweaks DA sans révolution
   Items de nav avec letter-spacing fin + underline animé accent au hover,
   "Le Blog" en italic pour rappeler les h2 du reste du site, icône search
   hover accent, logo grayscale → couleur au hover.
   ============================================================ */
header .wp-block-navigation .wp-block-navigation-item__content {
  letter-spacing: 0.01em;
  font-size: 1.05rem;
  line-height: 1.2;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  text-decoration: none !important;
  transition: border-color 0.25s ease, color 0.25s ease;
}
header .wp-block-navigation .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
header .wp-block-navigation .wp-block-navigation-item__content:hover {
  border-bottom-color: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--accent) !important;
  text-decoration: none !important;
}
/* "Le Blog" — uniquement cet item en italic (même police Source Serif Pro
   héritée, juste font-style pour un accent subtil). */
header .wp-block-navigation .wp-block-navigation-item a[href*="/accueil-blog/"],
header .wp-block-navigation .wp-block-navigation-item a[href*="/blog"] {
  font-style: italic;
}
/* Sous-menu Projets photo / Boutique : fond surface, bordure top accent, DA clean */
header .wp-block-navigation .wp-block-navigation__submenu-container {
  background: var(--wp--preset--color--base) !important;
  border-top: 2px solid var(--wp--preset--color--accent) !important;
  border-radius: 0 !important;
  padding: var(--wp--preset--spacing--20) 0 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  min-width: 220px;
}
header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  padding: 8px 20px !important;
  font-size: 0.98rem !important;
  border: 0 !important;
}
header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  background: var(--wp--preset--color--surface) !important;
  color: var(--wp--preset--color--accent) !important;
}
/* Bouton recherche (icône loupe) : hover accent + léger scale */
header .wp-block-search__button {
  color: var(--wp--preset--color--contrast) !important;
  transition: color 0.25s ease, transform 0.25s ease;
}
header .wp-block-search__button:hover {
  color: var(--wp--preset--color--accent) !important;
  transform: scale(1.08);
}
/* Logo : grayscale par défaut, couleur au hover — cohérent avec café + cards */
header .wp-block-site-logo img {
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}
header .wp-block-site-logo:hover img {
  filter: none;
}

/* ============================================================
   Articles (single) et pages — lecture éditoriale
   - Largeur confortable + justification
   - Images flottantes à gauche/droite (style magazine)
   - Liens plus sobres dans le body (pas de "tout rouge")
   ============================================================ */
:is(.single, .page) .wp-block-post-content {
  /* Conteneur pour les floats qu'on ajoute ci-dessous */
  overflow: visible;
}

:is(.single, .page) .wp-block-post-content > p,
:is(.single, .page) .wp-block-post-content > ul,
:is(.single, .page) .wp-block-post-content > ol,
:is(.single, .page) .wp-block-post-content > blockquote,
:is(.single, .page) .wp-block-post-content > h2,
:is(.single, .page) .wp-block-post-content > h3,
:is(.single, .page) .wp-block-post-content > h4 {
  max-width: var(--reading-max-width);
  margin-left: auto;
  margin-right: auto;
}

/* Paragraphes, listes et citations justifiés avec césure — magazine-style
   !important pour gagner contre les plugins (Opt-In Panda etc.)
   Inclut aussi les pages (body.page) — ex: /newsletter/ */
body:is(.single, .page) .wp-block-post-content > p,
body:is(.single, .page) .wp-block-post-content > ul,
body:is(.single, .page) .wp-block-post-content > ol,
body:is(.single, .page) .wp-block-post-content > ul li,
body:is(.single, .page) .wp-block-post-content > ol li,
body:is(.single, .page) .wp-block-post-content > blockquote p {
  text-align: justify !important;
  hyphens: auto !important;
  -webkit-hyphens: auto !important;
  text-wrap: pretty;
}

/* Typographie forcée sur les titres d'article : Fraunces
   Doit gagner contre :
   - .has-source-serif-pro-font-family (classe Gutenberg haute spécificité)
   - Plugins qui forcent PT Sans (Opt-In Panda etc.)
   Sélecteurs très spécifiques + !important. */
body:is(.single, .page) h1.wp-block-post-title,
body:is(.single, .page) .wp-block-post-content h1,
body:is(.single, .page) .wp-block-post-content h2,
body:is(.single, .page) .wp-block-post-content h3,
body:is(.single, .page) .wp-block-post-content h4,
body:is(.single, .page) .wp-block-post-content.has-source-serif-pro-font-family h1,
body:is(.single, .page) .wp-block-post-content.has-source-serif-pro-font-family h2,
body:is(.single, .page) .wp-block-post-content.has-source-serif-pro-font-family h3,
body:is(.single, .page) .wp-block-post-content.has-source-serif-pro-font-family h4,
body:is(.single, .page) .entry-title {
  font-family: "Fraunces", "Source Serif Pro", Georgia, serif !important;
  font-weight: 400 !important;
  font-style: italic;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

/* H1 d'article en Fraunces italique — statement typographique */
body:is(.single, .page) h1.wp-block-post-title {
  font-size: clamp(2.5rem, 5.5vw, 4.25rem);
  font-weight: 300 !important;
  margin-bottom: 1.5rem;
}

/* H2 / H3 sobres (Fraunces roman, pas italique). !important pour gagner
   contre la classe .has-source-serif-pro-font-family qui force italic. */
body:is(.single, .page) .wp-block-post-content h2,
body:is(.single, .page) .wp-block-post-content.has-source-serif-pro-font-family h2 {
  font-style: normal !important;
  font-weight: 500 !important;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  margin-top: 2.5em;
  margin-bottom: 0.5em;
  letter-spacing: -0.015em;
}
body:is(.single, .page) .wp-block-post-content h3,
body:is(.single, .page) .wp-block-post-content.has-source-serif-pro-font-family h3 {
  font-style: normal !important;
  font-weight: 500 !important;
  font-size: clamp(1.35rem, 2vw, 1.6rem);
  margin-top: 2em;
  margin-bottom: 0.4em;
  letter-spacing: -0.01em;
}
body:is(.single, .page) .wp-block-post-content h4,
body:is(.single, .page) .wp-block-post-content.has-source-serif-pro-font-family h4 {
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 1.15rem;
  color: var(--wp--preset--color--accent-dark);
  margin-top: 1.8em;
  margin-bottom: 0.3em;
  letter-spacing: 0;
}

/* Pages (vs articles) : rythme resserré. Une page a moins de contenu
   entre deux titres qu'un article long, donc le margin-top éditorial
   2.5em paraît excessif — on divise par ~2. */
body.page .wp-block-post-content h2 {
  margin-top: 1.4em;
}
body.page .wp-block-post-content h3 {
  margin-top: 1.2em;
}
body.page .wp-block-post-content h4 {
  margin-top: 1em;
}

/* Images, galeries, vidéos et embeds : par défaut à la largeur de lecture (672px),
   comme les paragraphes. Seuls alignwide / alignfull débordent — sinon les images
   "size-large" sans alignement apparaissent démesurées par rapport au texte. */
:is(.single, .page) .wp-block-post-content > figure,
:is(.single, .page) .wp-block-post-content > .wp-block-image,
:is(.single, .page) .wp-block-post-content > .wp-block-embed,
:is(.single, .page) .wp-block-post-content > .wp-block-gallery,
:is(.single, .page) .wp-block-post-content > .wp-block-video,
:is(.single, .page) .wp-block-post-content > .wp-block-cover {
  max-width: var(--reading-max-width);
  margin-left: auto;
  margin-right: auto;
}
/* alignwide = bordure généreuse jusqu'à 1000px, reste centré */
:is(.single, .page) .wp-block-post-content > .alignwide {
  max-width: 1000px;
}
/* alignfull = pleine largeur du viewport (sort du conteneur) */
:is(.single, .page) .wp-block-post-content > .alignfull {
  max-width: none;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Images avec texte qui s'enroule — alignleft / alignright */
:is(.single, .page) .wp-block-post-content .wp-block-image.alignleft {
  float: left;
  max-width: 45%;
  margin: 0.25em 2rem 1rem 0;
  clear: left;
  shape-outside: margin-box;
}
:is(.single, .page) .wp-block-post-content .wp-block-image.alignright {
  float: right;
  max-width: 45%;
  margin: 0.25em 0 1rem 2rem;
  clear: right;
  shape-outside: margin-box;
}
:is(.single, .page) .wp-block-post-content .wp-block-image.alignleft img,
:is(.single, .page) .wp-block-post-content .wp-block-image.alignright img {
  width: 100%;
  height: auto;
  display: block;
}
/* Légendes d'images — monospace, plus petit, aligné gauche.
   Un "registre aparté" typographique pour marquer la différence avec le corps Fraunces/Serif.
   Cible toutes les images (flottantes + pleine largeur) et les galeries. */
:is(.single, .page) .wp-block-post-content figcaption,
:is(.single, .page) .wp-block-post-content .wp-element-caption {
  font-family: "Courier Prime", "Courier New", Courier, ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--wp--preset--color--muted);
  font-style: normal;
  letter-spacing: 0.01em;
  margin-top: 0.6rem;
  text-align: left !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
}

/* Aparté / PS / Couplet — bloc Gutenberg "Verse" (pre.wp-block-verse) et
   "Préformaté" (pre.wp-block-preformatted). Thomas s'en sert comme d'un
   post-scriptum éditorial : encadré gris chaud, bordure gauche en accent,
   monospace "courrier". Les deux blocs partagent le même rendu pour éviter
   de retoucher toute l'archive. */
:is(.single, .page) .wp-block-post-content > pre.wp-block-verse,
:is(.single, .page) .wp-block-post-content pre.wp-block-verse,
:is(.single, .page) .wp-block-post-content > pre.wp-block-preformatted,
:is(.single, .page) .wp-block-post-content pre.wp-block-preformatted {
  max-width: var(--reading-max-width);
  margin: 2.25rem auto;
  padding: 1.15rem 1.4rem;
  background: #F3F1EC;
  border-left: 2px solid var(--wp--preset--color--accent);
  font-family: "Courier Prime", "Courier New", Courier, ui-monospace, "SFMono-Regular", Menlo, monospace !important;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--wp--preset--color--contrast);
  font-style: normal !important;
  letter-spacing: 0.005em;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
  text-align: left !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
}
/* L'éventuel surlignage jaune de "PS" dans l'éditeur (Gutenberg highlight)
   n'a plus de sens visuel dans l'encadré monospace → on neutralise. */
:is(.single, .page) .wp-block-post-content pre.wp-block-verse mark,
:is(.single, .page) .wp-block-post-content pre.wp-block-verse .has-inline-color,
:is(.single, .page) .wp-block-post-content pre.wp-block-preformatted mark,
:is(.single, .page) .wp-block-post-content pre.wp-block-preformatted .has-inline-color {
  background: transparent !important;
  color: inherit !important;
}

/* Les headings doivent passer la ligne après une image flottante */
:is(.single, .page) .wp-block-post-content h2,
:is(.single, .page) .wp-block-post-content h3,
:is(.single, .page) .wp-block-post-content hr,
:is(.single, .page) .wp-block-post-content .wp-block-separator {
  clear: both;
}

/* En-dessous de ~720px : les floats tombent en full-width */
@media (max-width: 720px) {
  :is(.single, .page) .wp-block-post-content .wp-block-image.alignleft,
  :is(.single, .page) .wp-block-post-content .wp-block-image.alignright {
    float: none;
    max-width: 100%;
    margin: 1rem auto;
  }
}

/* Liens dans le corps d'article — sobres
   Le rouge est réservé au décoratif (titres hover, boutons, badges).
   Les liens dans le texte : noir, soulignement rouge très fin. */
:is(.single, .page) .wp-block-post-content > p a,
:is(.single, .page) .wp-block-post-content > ul a,
:is(.single, .page) .wp-block-post-content > ol a,
:is(.single, .page) .wp-block-post-content > blockquote a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--wp--preset--color--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color 0.15s ease, text-decoration-thickness 0.15s ease;
}
:is(.single, .page) .wp-block-post-content > p a:hover,
:is(.single, .page) .wp-block-post-content > ul a:hover,
:is(.single, .page) .wp-block-post-content > ol a:hover,
:is(.single, .page) .wp-block-post-content > blockquote a:hover {
  color: var(--wp--preset--color--accent);
  text-decoration-thickness: 2px;
}

/* ============================================================
   Liens — accent + souligné avec offset, transition douce
   ============================================================ */
.entry-content a:where(:not(.wp-element-button)):where(:not(.wp-block-button__link)),
.wp-block-post-content a:where(:not(.wp-element-button)):where(:not(.wp-block-button__link)),
.wp-block-post-excerpt a:where(:not(.wp-element-button)):where(:not(.wp-block-button__link)) {
  color: var(--wp--preset--color--accent);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: var(--accent-underline-offset);
  transition: color 0.2s ease, text-underline-offset 0.2s ease;
}
.entry-content a:where(:not(.wp-element-button)):where(:not(.wp-block-button__link)):hover,
.wp-block-post-content a:where(:not(.wp-element-button)):where(:not(.wp-block-button__link)):hover,
.wp-block-post-excerpt a:where(:not(.wp-element-button)):where(:not(.wp-block-button__link)):hover {
  color: var(--wp--preset--color--accent-dark);
  text-underline-offset: calc(var(--accent-underline-offset) + 0.05em);
}

/* ============================================================
   Post titles — noir par défaut, rouge seulement au survol
   Les post-titles sont des liens mais ne doivent pas hériter
   du rouge accent (écrasant dans les listings).
   ============================================================ */
.wp-block-post-title a,
.wp-block-post-title a:visited {
  color: var(--wp--preset--color--contrast);
  text-decoration: none;
}
.wp-block-post-title a:hover {
  color: var(--wp--preset--color--accent);
  text-decoration: underline;
  text-underline-offset: var(--accent-underline-offset);
}

/* Post-date — gris muted, petite typographie */
.wp-block-post-date,
.wp-block-post-date time {
  color: var(--wp--preset--color--muted);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}

/* ============================================================
   Archives (tag, category, author, date) — listes d'articles
   Titres en Fraunces (choix éditorial assumé). Le A majuscule apparaît
   avec un apex stylisé propre à Fraunces — Thomas préfère conserver
   cette identité typographique plutôt que de fallback sur Source Serif.
   ============================================================ */
body.archive .wp-block-post-title,
body.archive .wp-block-post-title a,
body.blog .wp-block-post-title,
body.blog .wp-block-post-title a,
body.search .wp-block-post-title,
body.search .wp-block-post-title a {
  font-family: var(--wp--preset--font-family--fraunces) !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em;
  color: var(--wp--preset--color--contrast) !important;
}
body.archive .wp-block-post-excerpt,
body.archive .wp-block-post-excerpt p,
body.archive .wp-block-post-excerpt__excerpt,
body.blog .wp-block-post-excerpt,
body.blog .wp-block-post-excerpt p,
body.blog .wp-block-post-excerpt__excerpt,
body.search .wp-block-post-excerpt,
body.search .wp-block-post-excerpt p,
body.search .wp-block-post-excerpt__excerpt {
  text-align: justify !important;
  hyphens: auto;
  -webkit-hyphens: auto;
  text-wrap: pretty;
  /* Empêche les URLs longues (extraites des descriptions YouTube anciennes
     non éditorialisées) de déborder horizontalement. Sans cette règle,
     justify + URL non-cassable créait un débordement visible sur mobile
     Brave/Safari (cf. cas /youtube avec ?orderby=rand). */
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Grille des listes d'articles (archive / blog / recherche) — 3 colonnes.
   archive.html déclare un post-template layout {type:grid, columnCount:3}, mais
   WordPress n'émet la règle grid-template-columns que sur une classe-conteneur
   HASHÉE (.wp-container-core-post-template-is-layout-XXXX), dont le hash change
   au gré des versions WP/Gutenberg. LiteSpeed mutualise une UCSS par type de
   page : dès que le hash dérive, la règle de grille n'est plus incluse dans
   l'UCSS servie et la liste retombe en UNE colonne — d'où l'aspect "version
   mobile" sur desktop. On fixe donc les colonnes sur des classes STABLES (comme
   déjà fait pour .hc-piliers-grid et le cover de la 404), indépendamment du
   hash volatil. Incident /tag/grands-photographes — 2026-06-08.
   La grille (display:grid) et le gap viennent des règles core .is-layout-grid. */
body.archive .wp-block-query .wp-block-post-template.is-layout-grid,
body.blog    .wp-block-query .wp-block-post-template.is-layout-grid,
body.search  .wp-block-query .wp-block-post-template.is-layout-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* Mobile : 1 colonne (reproduit le breakpoint core @media max-width:600px ;
   nécessaire car nos sélecteurs ont une spécificité supérieure à la règle core). */
@media (max-width: 600px) {
  body.archive .wp-block-query .wp-block-post-template.is-layout-grid,
  body.blog    .wp-block-query .wp-block-post-template.is-layout-grid,
  body.search  .wp-block-query .wp-block-post-template.is-layout-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Section "Continuer à explorer" (pied de page des archives — pattern 24427)
   Fond surface, 4 colonnes sobres, titres réduits, tag cloud propre.
   ============================================================ */
.hc-section-footer-explore .hc-explore-col {
  padding: 0 var(--wp--preset--spacing--20);
}
.hc-section-footer-explore .hc-section-head h2 {
  font-family: var(--wp--preset--font-family--fraunces);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  color: var(--wp--preset--color--contrast);
  margin: 0 0 0.5rem;
}
.hc-section-footer-explore .hc-section-head h2 em {
  color: var(--wp--preset--color--accent);
  font-style: italic;
}
/* Tag cloud — petits badges cohérents avec la DA */
.hc-tag-cloud {
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px !important;
}
.hc-tag-cloud a {
  display: inline-block;
  padding: 4px 10px !important;
  background: var(--wp--preset--color--base) !important;
  border: 1px solid var(--wp--preset--color--line);
  color: var(--wp--preset--color--ink-soft) !important;
  text-decoration: none !important;
  font-size: 12px !important;
  letter-spacing: 0.01em;
  border-radius: 4px;
  transition: all 0.2s ease;
}
.hc-tag-cloud a:hover {
  background: var(--wp--preset--color--contrast) !important;
  color: var(--wp--preset--color--base) !important;
  border-color: var(--wp--preset--color--contrast);
}
/* Liste ressources — puces discrètes, hover accent */
.hc-resource-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.hc-resource-list li {
  list-style: none !important;
  padding: 10px 0 10px 18px !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--wp--preset--color--line);
  position: relative;
  font-size: 0.94rem;
  line-height: 1.4;
}
.hc-resource-list li:last-child {
  border-bottom: 0;
}
.hc-resource-list li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--wp--preset--color--accent);
  font-weight: 500;
  transition: transform 0.2s ease;
}
.hc-resource-list li:hover::before {
  transform: translateX(3px);
}
.hc-resource-list a {
  color: var(--wp--preset--color--contrast) !important;
  text-decoration: none !important;
}
.hc-resource-list a:hover {
  color: var(--wp--preset--color--accent) !important;
}
/* Bouton magique — style custom plus "présent" */
.hc-magic-button .wp-block-button__link {
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  padding: 14px 18px !important;
  font-size: 13px !important;
  letter-spacing: 0.04em;
  transition: all 0.2s ease;
}
.hc-magic-button .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--contrast) !important;
  color: var(--wp--preset--color--base) !important;
}
/* Mobile : la grille se décompose proprement */
@media (max-width: 900px) {
  .hc-section-footer-explore .wp-block-columns {
    flex-wrap: wrap !important;
  }
  .hc-section-footer-explore .hc-explore-col {
    flex-basis: 50% !important;
    padding: 0 !important;
    margin-bottom: var(--wp--preset--spacing--50);
  }
}
@media (max-width: 600px) {
  .hc-section-footer-explore .hc-explore-col {
    flex-basis: 100% !important;
  }
}

/* ============================================================
   Page 404 — hero banner + trois colonnes d'options cohérentes DA.
   Réutilise .hc-eyebrow / .hc-section-head / .hc-magic-button.
   ============================================================ */
.hc-404-hero {
  margin-bottom: 0 !important;
  position: relative;
  overflow: hidden;
}
/* UCSS strippe parfois les règles core du cover image — on les force. */
.hc-404-hero .wp-block-cover__image-background {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  z-index: 0 !important;
}
.hc-404-hero .wp-block-cover__background {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1 !important;
}
.hc-404-hero .wp-block-cover__inner-container {
  position: relative;
  z-index: 2;
  padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
}
.hc-404-hero .hc-eyebrow {
  margin-bottom: var(--wp--preset--spacing--30) !important;
}
.hc-404-hero h1 {
  font-family: var(--wp--preset--font-family--fraunces);
  font-size: clamp(2rem, 5vw, 3.2rem);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
.hc-404-hero h1 em {
  color: #FFD4DC;
  font-style: italic;
  font-weight: 400;
}
.hc-404-hero p {
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.hc-404-hero .hc-eyebrow {
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.hc-404-col {
  padding: 0 var(--wp--preset--spacing--20);
  display: flex !important;
  flex-direction: column;
}
/* Pousse le CTA (search ou bouton) en bas pour aligner les 3 colonnes */
.hc-404-col > .wp-block-search,
.hc-404-col > .wp-block-buttons {
  margin-top: auto !important;
}
/* Champ de recherche aligné DA : bordure discrète, coin léger, bouton accent */
.hc-404-search .wp-block-search__inside-wrapper {
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 4px;
  overflow: hidden;
  padding: 0;
}
.hc-404-search .wp-block-search__input {
  border: 0 !important;
  padding: 10px 12px !important;
  font-size: 0.95rem;
  background: var(--wp--preset--color--base);
}
.hc-404-search .wp-block-search__button {
  background: var(--wp--preset--color--accent) !important;
  color: #fff !important;
  border: 0 !important;
  padding: 10px 16px !important;
  font-family: var(--wp--preset--font-family--dm-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background-color 0.2s ease;
}
.hc-404-search .wp-block-search__button:hover {
  background: var(--wp--preset--color--contrast) !important;
}
@media (max-width: 900px) {
  main .wp-block-columns:has(.hc-404-col) {
    flex-wrap: wrap !important;
  }
  .hc-404-col {
    flex-basis: 100% !important;
    padding: 0 !important;
    margin-bottom: var(--wp--preset--spacing--50);
  }
}

/* ============================================================
   Menu de tri sur les archives — élégant et sobre.
   Label "Trier" + 3 liens (Plus récents, Plus anciens, A-Z) séparés par
   un petit point. Un underline accent indique l'option active.
   ============================================================ */
.hc-archive-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 20px;
  max-width: 1200px;
  margin: 0 auto 48px;
  padding: 16px 24px;
  border-top: 1px solid var(--wp--preset--color--line);
  border-bottom: 1px solid var(--wp--preset--color--line);
  font-family: var(--wp--preset--font-family--dm-sans);
}
.hc-archive-filters__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--wp--preset--color--muted);
  flex-shrink: 0;
}
.hc-archive-filters__list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}
.hc-archive-filters__list li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  position: relative;
}
.hc-archive-filters__list li + li::before {
  content: "·";
  position: absolute;
  left: -13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--wp--preset--color--line);
  font-weight: 700;
}
.hc-archive-filters__link {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--wp--preset--color--muted);
  text-decoration: none !important;
  padding: 2px 0;
  border-bottom: 1.5px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.hc-archive-filters__link:hover {
  color: var(--wp--preset--color--contrast) !important;
  border-bottom-color: var(--wp--preset--color--line);
}
.hc-archive-filters__link.is-active {
  color: var(--wp--preset--color--contrast) !important;
  border-bottom-color: var(--wp--preset--color--accent);
  font-weight: 700;
}

/* Post-meta — une seule ligne compacte : "Publié le 31 mars 2026 · Étiquettes : Pratique" */
.hc-post-meta {
  gap: 8px 10px !important;
  align-items: baseline;
}
.hc-post-meta p,
.hc-post-meta .wp-block-post-date,
.hc-post-meta .wp-block-post-terms {
  margin: 0 !important;
  font-size: 0.88rem !important;
  line-height: 1.4 !important;
}
.hc-post-meta .hc-post-meta-date {
  color: var(--wp--preset--color--contrast) !important;
  font-weight: 500;
}
.hc-post-meta .hc-post-meta-sep {
  font-weight: 700;
}
.hc-post-meta .hc-post-meta-tags a {
  color: var(--wp--preset--color--accent) !important;
  text-decoration: none !important;
}
.hc-post-meta .hc-post-meta-tags a:hover {
  text-decoration: underline !important;
  text-decoration-color: var(--wp--preset--color--accent) !important;
  text-underline-offset: 0.2em;
}

/* Pattern "Offrez-moi un café" (25916) — encadré sobre avec image + CTA
   côte à côte. Bordure discrète, pas de fond (blanc comme l'article). */
.hc-coffee {
  margin-top: var(--wp--preset--spacing--60);
  margin-bottom: var(--wp--preset--spacing--60);
}
/* Image centrée au-dessus du bloc — carré, object-fit cover.
   Hover grayscale → couleur uniquement quand on survole l'image
   (et pas toute la zone du bloc, sinon flicker quand la souris traverse). */
.hc-coffee-media,
.hc-coffee .hc-coffee-media {
  margin-left: auto !important;
  margin-right: auto !important;
  overflow: hidden;
  width: 200px !important;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  /* WP applique display:table à .is-resized → on force block pour que
     overflow:hidden et aspect-ratio fonctionnent correctement. */
  display: block !important;
  border-radius: 2px;
}
.hc-coffee-media img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  display: block;
  margin: 0;
  filter: grayscale(100%);
  transition: transform 0.5s ease, filter 0.4s ease;
  transform-origin: center center;
}
.hc-coffee-media:hover img,
.hc-coffee-media:focus-within img {
  filter: none !important;
  transform: scale(1.04);
}

/* Pattern "Partager l'article" (23942) — petit bloc centré, même rythme
   que .hc-coffee. On laisse Jetpack rendre ses boutons natifs. */
.hc-share {
  margin-top: var(--wp--preset--spacing--60);
  margin-bottom: var(--wp--preset--spacing--60);
}

/* Hover élégant sur les cards d'archive.
   Petite translation + featured image qui perd son duotone grayscale et
   zoome discrètement + titre qui passe accent. Tout en douceur. */
body.archive .wp-block-post,
body.blog .wp-block-post,
body.search .wp-block-post {
  transition: transform 0.3s ease;
}
body.archive .wp-block-post:hover,
body.blog .wp-block-post:hover,
body.search .wp-block-post:hover {
  transform: translateY(-3px);
}
/* Featured image : wrapper masque le débordement, image zoom léger */
body.archive .wp-block-post .wp-block-post-featured-image,
body.blog .wp-block-post .wp-block-post-featured-image,
body.search .wp-block-post .wp-block-post-featured-image {
  overflow: hidden;
}
body.archive .wp-block-post .wp-block-post-featured-image img,
body.blog .wp-block-post .wp-block-post-featured-image img,
body.search .wp-block-post .wp-block-post-featured-image img {
  transition: transform 0.5s ease, filter 0.4s ease;
}
body.archive .wp-block-post:hover .wp-block-post-featured-image img,
body.blog .wp-block-post:hover .wp-block-post-featured-image img,
body.search .wp-block-post:hover .wp-block-post-featured-image img {
  transform: scale(1.04);
  /* Retire le duotone grayscale pour révéler la vraie couleur au hover */
  filter: none !important;
}
body.archive .wp-block-post:hover .wp-block-post-title,
body.archive .wp-block-post:hover .wp-block-post-title a,
body.blog .wp-block-post:hover .wp-block-post-title,
body.blog .wp-block-post:hover .wp-block-post-title a,
body.search .wp-block-post:hover .wp-block-post-title,
body.search .wp-block-post:hover .wp-block-post-title a {
  color: var(--wp--preset--color--accent) !important;
  transition: color 0.2s ease;
}

/* ============================================================
   Utilitaires éditoriaux
   Ajoutés à l'inserteur via register_block_style dans functions.php
   ============================================================ */

/* Eyebrow — surtitre discret, rouge accent en uppercase */
.is-style-eyebrow {
  font-family: var(--wp--preset--font-family--dm-sans) !important;
  font-size: 0.875rem !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--accent) !important;
  font-weight: 500;
  margin-bottom: 0.5rem !important;
}

/* Badge — indicateur "en cours" / statut sur un projet */
.is-style-badge {
  display: inline-block;
  padding: 0.3em 0.8em;
  font-size: 0.75rem !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--wp--preset--color--accent-dark) !important;
  background-color: rgba(229, 10, 59, 0.12) !important;
  border-radius: 999px;
  font-weight: 500;
  line-height: 1.4;
}

/* Accent highlight — mot isolé en rouge au milieu d'un titre */
.has-accent-color-custom {
  color: var(--wp--preset--color--accent);
}

/* ============================================================
   Pattern "Accueil-Blog-2026" — styles pour le synced pattern
   refondu qui reproduit le mockup landing-blog-v3-mockup.html.
   Classes appliquées via className dans les blocs Gutenberg.
   ============================================================ */

/* Eyebrow style journal : tiret + texte rouge uppercase */
.hc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--wp--preset--font-family--dm-sans) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--wp--preset--color--accent) !important;
  margin-bottom: 20px !important;
}
.hc-eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--wp--preset--color--accent);
  display: inline-block;
}

/* Hero typographique */
.hc-hero h1 em,
.hc-hero-title em {
  font-style: italic;
  color: var(--wp--preset--color--accent);
  font-weight: 400;
}
.hc-hero-stats {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px 32px !important;
  font-size: 12px;
  color: var(--wp--preset--color--muted);
  padding-top: 28px;
  border-top: 1px solid var(--wp--preset--color--line);
  letter-spacing: 0;
  text-transform: none;
  font-weight: 500;
  font-family: var(--wp--preset--font-family--dm-sans);
}
@media (max-width: 781px) {
  .hc-hero-stats { grid-template-columns: repeat(2, 1fr) !important; }
}
.hc-hero-stats .hc-stat {
  min-width: 0;
}
.hc-hero-stat strong {
  color: var(--wp--preset--color--contrast);
  font-size: 1.75rem;
  font-family: var(--wp--preset--font-family--fraunces);
  font-weight: 400;
  display: block;
  margin-bottom: 4px;
  letter-spacing: -0.01em;
  text-transform: none;
}

/* Path cards (onboarding 3 parcours) */
.hc-path-card {
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--line);
  padding: 32px 28px;
  transition: all 0.2s ease;
  position: relative;
}
.hc-path-card:hover {
  transform: translateY(-3px);
  border-color: var(--wp--preset--color--contrast);
  box-shadow: 0 8px 20px rgba(0,0,0,0.05);
}
.hc-path-num {
  font-family: var(--wp--preset--font-family--fraunces) !important;
  font-style: italic;
  font-size: 2rem !important;
  color: var(--wp--preset--color--accent) !important;
  line-height: 1;
  margin-bottom: 16px !important;
  font-weight: 400 !important;
}
.hc-path-link {
  color: var(--wp--preset--color--accent) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--wp--preset--font-family--dm-sans);
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.15s ease;
}
.hc-path-link:hover {
  color: var(--wp--preset--color--accent-dark) !important;
  gap: 10px;
}

/* Category cards (thèmes — fond blanc, bordurées) */
.hc-cat-card {
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--line);
  padding: 26px 22px;
  transition: all 0.2s ease;
  display: block;
  text-decoration: none !important;
}
.hc-cat-card:hover {
  border-color: var(--wp--preset--color--accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.05);
}
.hc-cat-count {
  font-size: 11px !important;
  color: var(--wp--preset--color--accent) !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  display: block;
  font-family: var(--wp--preset--font-family--dm-sans) !important;
}

/* Pilier + article cards (mêmes hover pour harmoniser les 2 grilles
   "Si vous ne devez en lire que X" et "Ce qui est paru récemment"). */
.hc-pilier-card,
.hc-article-card {
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--line);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  display: block;
  text-decoration: none !important;
  color: inherit;
  overflow: hidden;
}
.hc-pilier-card:hover,
.hc-article-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.06);
  border-color: var(--wp--preset--color--ink-soft);
}
.hc-pilier-card .hc-pilier-thumb img,
.hc-article-card .hc-article-thumb img {
  transition: transform 0.5s ease;
}
.hc-pilier-card:hover .hc-pilier-thumb img,
.hc-article-card:hover .hc-article-thumb img {
  transform: scale(1.04);
}
/* Tag category : discret, gris muted (moins visible que le titre).
   Auparavant en rouge accent + bold uppercase = criard, concurrençait le titre.
   Désormais : lowercase-like style, gris, petit, léger. */
.hc-pilier-cat {
  font-size: 10.5px !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--wp--preset--color--muted) !important;
  font-weight: 500 !important;
  font-family: var(--wp--preset--font-family--dm-sans) !important;
  margin: 0 0 8px !important;
}
.hc-pilier-cat a,
.hc-pilier-cat a:visited {
  color: var(--wp--preset--color--muted) !important;
  text-decoration: none !important;
}
.hc-pilier-cat a:hover {
  color: var(--wp--preset--color--accent) !important;
}

/* Titres de cards (piliers + récents) : plus présents que le tag.
   Fraunces roman, contraste fort, taille généreuse sur la big card. */
.hc-pilier-card .wp-block-post-title,
.hc-article-card .wp-block-post-title {
  font-family: var(--wp--preset--font-family--fraunces) !important;
  font-weight: 500 !important;
  line-height: 1.22 !important;
  letter-spacing: -0.005em !important;
  color: var(--wp--preset--color--contrast) !important;
  margin: 0 !important;
}
.hc-pilier-card .wp-block-post-title a,
.hc-article-card .wp-block-post-title a {
  color: var(--wp--preset--color--contrast) !important;
  text-decoration: none !important;
}
.hc-pilier-card .wp-block-post-title a:hover,
.hc-article-card .wp-block-post-title a:hover {
  color: var(--wp--preset--color--accent) !important;
}

/* Mobile : forcer titres de cards >= 16px (le body) — hiérarchie typo correcte */
@media (max-width: 600px) {
  .hc-pilier-card .wp-block-post-title,
  .hc-article-card .wp-block-post-title {
    font-size: 1rem !important;
  }
}

/* Formations offer cards */
.hc-formation-card {
  background: var(--wp--preset--color--base);
  padding: 36px 32px;
  border: 1px solid var(--wp--preset--color--line);
  display: flex;
  flex-direction: column;
}
.hc-formation-price {
  font-family: var(--wp--preset--font-family--dm-sans) !important;
  font-size: 0.85rem !important;
  color: var(--wp--preset--color--accent-dark) !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700 !important;
}
.hc-formation-card ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 24px !important;
}
.hc-formation-card ul li {
  padding: 8px 0 8px 24px;
  position: relative;
  color: var(--wp--preset--color--ink-soft);
  line-height: 1.45;
  font-size: 0.94rem;
}
.hc-formation-card ul li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--wp--preset--color--accent);
  font-weight: 700;
}

/* Pépites du Moudiverse — apps cards */
.hc-app-card {
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--line);
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  transition: all 0.2s ease;
  text-decoration: none !important;
  color: inherit;
}
.hc-app-card:hover {
  border-color: var(--wp--preset--color--accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.05);
}
.hc-app-icon {
  width: 46px;
  height: 46px;
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  margin-bottom: 18px;
}

/* About — blockquote avec quote mark rouge */
.hc-about-quote {
  position: relative;
  padding-left: 0;
  font-family: var(--wp--preset--font-family--fraunces) !important;
  font-style: italic;
  font-size: 1.4rem !important;
  line-height: 1.42 !important;
  color: var(--wp--preset--color--contrast) !important;
  border-left: none !important;
  margin: 0 0 22px !important;
}
.hc-about-quote::before {
  content: "\201C"; /* left double quotation mark */
  position: absolute;
  left: -0.5em;
  top: -0.2em;
  font-size: 2.5em;
  color: var(--wp--preset--color--accent);
  font-weight: 400;
  line-height: 1;
}

/* Sidebar "À ne pas manquer" dans section Récents */
.hc-sidebar-list {
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--line);
  padding: 26px;
}
.hc-sidebar-list ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 20px !important;
}
.hc-sidebar-list li {
  padding: 15px 0;
  border-bottom: 1px solid var(--wp--preset--color--line);
  font-family: var(--wp--preset--font-family--fraunces);
  font-size: 1.02rem;
  line-height: 1.3;
}
.hc-sidebar-list li:last-child {
  border-bottom: 0;
}
.hc-sidebar-list li small {
  display: block;
  font-family: var(--wp--preset--font-family--dm-sans);
  font-size: 11px;
  color: var(--wp--preset--color--muted);
  margin-top: 5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
}

/* CTA "Voir toutes les..." centré en bas de section */
.hc-all-link {
  display: block;
  text-align: center;
  color: var(--wp--preset--color--accent-dark) !important;
  font-size: 13px !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700 !important;
  font-family: var(--wp--preset--font-family--dm-sans);
  text-decoration: none !important;
  margin-top: 32px;
}
.hc-all-link:hover {
  color: var(--wp--preset--color--contrast) !important;
}

/* ============================================================
   Pattern "Accueil-Blog-2026" — corrections v0.3.0
   ============================================================ */

/* 1. Masquer le post_title WP "Bienvenue sur le Blog 👋🏻" :
   doublon avec le H1 du hero qu'on compose nous-mêmes.
   On cible SEULEMENT le h1 (le page title), pas les h2 des Query Loops
   qui utilisent aussi la classe .wp-block-post-title. */
body.page-id-28524 h1.wp-block-post-title {
  display: none !important;
}

/* 2. Hero polaroids — style magazine (2 photos superposées rotées).
   Le bloc <wp:html> contient juste .hc-hero-visual + 2 .hc-polaroid.
   Hauteur capée pour éviter l'effet "marque-page" quand la colonne de
   texte est grande. Ratio 5/4 pour un cadrage plus carré et dense. */
.hc-hero-visual {
  position: relative;
  aspect-ratio: 5 / 4;
  width: 100%;
  max-width: 520px;
  min-height: 380px;
  max-height: 500px;
  margin: 0 auto;
}
.hc-polaroid {
  position: absolute;
  background: #fff;
  padding: 10px 10px 32px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  width: 52%;
}
.hc-polaroid img {
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #1a1a1a;
  max-width: none;
}
.hc-polaroid-1 {
  transform: rotate(-5deg);
  left: 4%;
  top: 8%;
  z-index: 1;
}
.hc-polaroid-2 {
  transform: rotate(6deg);
  right: 2%;
  top: 20%;
  z-index: 2;
}
@media (max-width: 900px) {
  .hc-hero-visual {
    max-height: 420px;
    min-height: 320px;
  }
  .hc-polaroid { width: 50%; }
}

/* 3. Piliers — grille uniforme, toutes cards même taille et même hauteur.
   Le Query Loop tire depuis Yoast "Contenu pilier" (hc-query-cornerstone).
   Le nombre de colonnes s'adapte à la largeur disponible (auto-fit),
   peu importe le nombre d'articles cornerstone (3, 5, 8, 12…). */
.hc-piliers-grid .wp-block-post-template {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
  list-style: none;
  padding: 0;
  margin: 0;
}
/* Sur desktop large, on cap à 4 colonnes pour éviter les cards trop étroites
   quand il y a beaucoup de piliers. */
@media (min-width: 1100px) {
  .hc-piliers-grid .wp-block-post-template {
    grid-template-columns: repeat(4, 1fr);
  }
}
.hc-piliers-grid .wp-block-post-template > li {
  list-style: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
}
.hc-piliers-grid .wp-block-post-template > li > .hc-pilier-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.hc-piliers-grid .wp-block-post-template > li > .hc-pilier-card > .hc-pilier-body {
  flex: 1 1 auto;
}
/* Mobile : 1 colonne */
@media (max-width: 600px) {
  .hc-piliers-grid .wp-block-post-template {
    grid-template-columns: 1fr;
  }
}

/* 4. Featured images Query Loops — défiler propre + lazy-load fix.
   Les images WP ont object-fit:cover via style.css haut, on force l'aspect
   ratio également sur le <figure> pour éviter le flash gris pendant le lazy. */
.hc-pilier-card .hc-pilier-thumb,
.hc-article-card .hc-article-thumb {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--wp--preset--color--surface);
}
.hc-pilier-card .hc-pilier-thumb img,
.hc-article-card .hc-article-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* quand lazyload tient encore le placeholder, on garde le cadre */
.hc-pilier-card .hc-pilier-thumb img[data-lazyloaded],
.hc-article-card .hc-article-thumb img[data-lazyloaded] {
  background: var(--wp--preset--color--surface);
}

/* 5. Spacing plus serré entre les sections — on évite l'effet "vitrine vide" */
.hc-hero,
.hc-onboarding,
.hc-section-piliers,
.hc-section-categories,
.hc-section-recent,
.hc-section-formations,
.hc-section-newsletter,
.hc-section-moudiverse,
.hc-section-about {
  padding-top: clamp(3rem, 5vw, 4.5rem) !important;
  padding-bottom: clamp(3rem, 5vw, 4.5rem) !important;
}
.hc-section-head {
  margin-bottom: clamp(2rem, 3vw, 3rem) !important;
}

/* 6. Eyebrow style journal (tiret court rouge + texte uppercase) */
.hc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--wp--preset--color--accent) !important;
  margin-bottom: 20px !important;
  font-family: var(--wp--preset--font-family--dm-sans) !important;
}
.hc-eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--wp--preset--color--accent);
  display: inline-block;
  flex-shrink: 0;
}
.hc-eyebrow-on-dark,
.hc-section-newsletter .hc-eyebrow {
  justify-content: center;
}

/* 7. Stats hero — chiffres en Fraunces */
.hc-hero-stats .hc-stat-num {
  font-family: var(--wp--preset--font-family--fraunces) !important;
  font-size: 1.6rem !important;
  font-weight: 500 !important;
  color: var(--wp--preset--color--contrast) !important;
  margin: 0 !important;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: none !important;
}
.hc-hero-stats .hc-stat-label {
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--wp--preset--color--muted) !important;
  margin: 4px 0 0 !important;
  font-weight: 500;
  line-height: 1.35;
}

/* 8. Path cards (parcours) — bordure discrète, hover noir */
.hc-path-card {
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--line);
  padding: 32px 28px !important;
  transition: all 0.2s ease;
}
.hc-path-card:hover {
  transform: translateY(-3px);
  border-color: var(--wp--preset--color--contrast);
}
.hc-path-num {
  font-family: var(--wp--preset--font-family--fraunces) !important;
  font-style: italic;
  font-size: 2rem !important;
  color: var(--wp--preset--color--accent) !important;
  line-height: 1;
  margin: 0 0 16px !important;
  font-weight: 400;
}
.hc-path-link {
  color: var(--wp--preset--color--accent) !important;
  font-weight: 500;
  font-size: 13px !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--wp--preset--font-family--dm-sans) !important;
  margin-top: auto !important;
}

/* 9. Cat cards — la couleur du compteur en rouge, bordure propre au hover */
.hc-cat-card {
  display: block;
  text-decoration: none !important;
  transition: all 0.2s ease;
}
.hc-cat-card:hover {
  border-color: var(--wp--preset--color--accent) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
}
.hc-cat-count {
  color: var(--wp--preset--color--accent) !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* 10. App cards (pépites du Moudiverse) */
.hc-app-card {
  display: flex !important;
  flex-direction: column;
  text-decoration: none !important;
  transition: all 0.2s ease;
}
.hc-app-card:hover {
  border-color: var(--wp--preset--color--accent) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
}
.hc-app-icon {
  width: 46px;
  height: 46px;
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  margin: 0 0 18px !important;
  padding: 0 !important;
}

/* 11. Sidebar "À ne pas manquer" dans les derniers articles */
.hc-sidebar-item {
  border-bottom: 1px solid var(--wp--preset--color--line);
}
.hc-sidebar-item:last-child {
  border-bottom: 0;
}
.hc-sidebar-item .wp-block-post-title {
  font-family: var(--wp--preset--font-family--fraunces) !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
}

/* 12. Formations — fond surface, bénéfices avec flèche rouge */
.hc-formation-card {
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--line);
  padding: 36px 32px !important;
  display: flex !important;
  flex-direction: column;
}
.hc-formation-kicker {
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--wp--preset--color--accent-dark) !important;
  font-weight: 700 !important;
  margin: 0 0 16px !important;
  font-family: var(--wp--preset--font-family--dm-sans) !important;
}
.hc-formation-lead {
  font-family: var(--wp--preset--font-family--fraunces) !important;
  font-style: italic;
  color: var(--wp--preset--color--ink-soft) !important;
  margin-bottom: 16px !important;
}
.hc-formation-price {
  font-size: 12px !important;
  color: var(--wp--preset--color--accent-dark) !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700 !important;
  margin-bottom: 22px !important;
}
.hc-formation-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 26px !important;
}
.hc-formation-list li {
  padding: 8px 0 8px 24px !important;
  position: relative;
  color: var(--wp--preset--color--ink-soft);
  line-height: 1.45;
}
.hc-formation-list li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--wp--preset--color--accent);
  font-weight: 700;
}

/* 13. Photo de profil About — cercle doux, centrée dans sa colonne */
.hc-about-photo {
  text-align: center;
  margin-left: auto !important;
  margin-right: auto !important;
}
.hc-about-photo img {
  border-radius: 50%;
  width: 100%;
  max-width: 280px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.hc-about-quote {
  position: relative;
  padding-left: 0;
}
.hc-about-quote::before {
  content: "\201C";
  position: absolute;
  left: -0.4em;
  top: -0.3em;
  font-size: 3em;
  color: var(--wp--preset--color--accent);
  font-family: var(--wp--preset--font-family--fraunces);
  line-height: 1;
  font-weight: 400;
}

/* ============================================================
   Pagination des archives — "Page suivante" en bouton outlined.
   Avec posts_per_page=12, la pagination devient l'action principale
   en bas de page : il faut qu'elle se lise comme un bouton, pas
   comme un "Lire la suite" de card.
   ============================================================ */
.wp-block-query-pagination {
  margin-top: 5rem !important;
  gap: 1rem;
  align-items: center;
}
/* Page 1 (pas de "précédent") : on centre le "suivant" au lieu de
   le laisser collé à droite par le flex-justify space-between. */
.wp-block-query-pagination:not(:has(.wp-block-query-pagination-previous)) {
  justify-content: center !important;
}

.wp-block-query-pagination-next,
.wp-block-query-pagination-previous {
  display: inline-flex !important;
  align-items: center;
  gap: 0.6em;
  padding: 0.85rem 1.8rem;
  box-sizing: border-box;
  font-family: var(--wp--preset--font-family--dm-sans) !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none !important;
  color: var(--wp--preset--color--accent) !important;
  background: transparent;
  border: 2px solid var(--wp--preset--color--accent);
  border-radius: 0;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.wp-block-query-pagination-next:hover,
.wp-block-query-pagination-previous:hover {
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--base) !important;
  text-decoration: none !important;
  transform: translateY(-1px);
}
.wp-block-query-pagination-next-arrow,
.wp-block-query-pagination-previous-arrow {
  font-size: 1.1em;
  line-height: 1;
  transition: transform 0.2s ease;
  margin: 0 !important;
}
.wp-block-query-pagination-next:hover .wp-block-query-pagination-next-arrow {
  transform: translateX(3px);
}
.wp-block-query-pagination-previous:hover .wp-block-query-pagination-previous-arrow {
  transform: translateX(-3px);
}

/* Mobile : les deux boutons empilés et pleine largeur */
@media (max-width: 640px) {
  .wp-block-query-pagination {
    flex-direction: column;
    align-items: stretch !important;
  }
  .wp-block-query-pagination-next,
  .wp-block-query-pagination-previous {
    justify-content: center;
    width: 100%;
  }
}

/* Embed YouTube : aspect-ratio 16/9 garanti même si UCSS purifie le CSS
   core de wp-block-embed. Largeur et centrage gérés par le wp:group parent. */
figure.hc-featured-video {
  margin: 0;
  position: relative;
  aspect-ratio: 16 / 9;
}
figure.hc-featured-video .wp-block-embed__wrapper {
  position: absolute;
  inset: 0;
  padding: 0;
}
figure.hc-featured-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ===== BEGIN landing /culture-photo/ ===== */
/* =========================================================================
   landing.css , programme « Acquérir une culture photo » (/culture-photo/)
   Tout est scopé sous .page-id-29390 (body class injectée par WP).
   Suit la grammaire pattern accueil-blog : blocs Gutenberg natifs + wp:html
   ciblés pour les éléments décoratifs (fiche A5, polaroid, grille thèmes,
   audience oui/non).
   ========================================================================= */

/* ---------- Variables locales (scope page) ---------- */
.page-id-29390 {
  --acp-base:        #FFFFFF;
  --acp-contrast:    #1A1A1A;
  --acp-ink-soft:    #4A4A4A;
  --acp-muted:       #6B6B6B;
  --acp-surface:     #F5F5F5;
  --acp-line:        #E5E5E5;
  --acp-accent:      #E50A3B;
  --acp-accent-dark: #B80831;
  --acp-accent-wash: #FCE7EB;
  --acp-paper-warm:  #F3F1EC;
  --acp-dark-bg:     #1A1A1A;
}

/* ---------- Reset spécifique : tuer les artefacts WP autour des sections ---------- */
.page-id-29390 .entry-content > .wp-block-group:first-child,
.page-id-29390 .acp-hero { margin-top: 0; }

.page-id-29390 .acp-section,
.page-id-29390 .acp-hero,
.page-id-29390 .acp-cta,
.page-id-29390 .acp-foot {
  background-clip: padding-box;
}

/* ---------- HERO , typo manifeste, papier warm ---------- */
.page-id-29390 .acp-hero {
  background: var(--acp-paper-warm);
  position: relative;
  overflow: hidden;
}
.page-id-29390 .acp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(26,26,26,0.035) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
  opacity: 0.5;
}
.page-id-29390 .acp-hero > * { position: relative; }

.page-id-29390 .acp-hero-pre {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--wp--preset--font-family--source-serif), system-ui, sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--acp-muted);
  margin: 0 0 var(--wp--preset--spacing--40);
  font-weight: 500;
}
.page-id-29390 .acp-hero-pre::before {
  content: "";
  display: inline-block;
  width: 36px;
  height: 1px;
  background: var(--acp-accent);
}

.page-id-29390 .acp-hero-title {
  font-family: var(--wp--preset--font-family--fraunces), Georgia, serif !important;
  font-weight: 300 !important;
  font-size: clamp(2.5rem, 7vw, 5.5rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.02em !important;
  font-variation-settings: "opsz" 144, "SOFT" 30 !important;
  color: var(--acp-contrast);
}
.page-id-29390 .acp-hero-title em {
  font-style: italic;
  font-weight: 300;
  color: var(--acp-accent);
  font-variation-settings: "opsz" 144, "SOFT" 80;
}
.page-id-29390 .acp-hero-title .acp-strike {
  position: relative;
  display: inline-block;
  font-style: normal;
  font-weight: 300;
  color: var(--acp-muted);
}
.page-id-29390 .acp-hero-title .acp-strike::after {
  content: "";
  position: absolute;
  left: -3%; right: -3%; top: 56%;
  height: 0.06em;
  background: var(--acp-accent);
  transform: rotate(-2deg);
}

.page-id-29390 .acp-hero-lead {
  max-width: 36rem;
  font-size: clamp(1.05rem, 1.4vw, 1.18rem);
  line-height: 1.6;
  color: var(--acp-ink-soft);
  margin: 0 0 var(--wp--preset--spacing--50);
}
.page-id-29390 .acp-hero-lead strong { color: var(--acp-contrast); font-weight: 700; }

/* CTAs hero : les boutons WP héritent du theme, on raffine juste le link */
.page-id-29390 .acp-btn-link .wp-block-button__link {
  background: transparent;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  padding: 0.95em 0.5em;
}
.page-id-29390 .acp-btn-link .wp-block-button__link:hover { color: var(--acp-accent); }
.page-id-29390 .acp-btn-primary .wp-block-button__link:hover {
  background: var(--acp-accent) !important;
  border-color: var(--acp-accent) !important;
}

/* Hero meta : compteurs */
.page-id-29390 .acp-hero-meta { font-size: 0.92rem; }
.page-id-29390 .acp-meta-item { display: flex; flex-direction: column; gap: 0.15rem; }
.page-id-29390 .acp-meta-num {
  font-family: var(--wp--preset--font-family--fraunces), Georgia, serif;
  font-size: 1.55rem;
  font-weight: 400;
  color: var(--acp-contrast);
  line-height: 1;
  letter-spacing: -0.01em;
}
.page-id-29390 .acp-meta-label {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--acp-muted);
}

/* ---------- Fiche A5 inclinée (signature visuelle hero) ---------- */
.page-id-29390 .acp-hero-visual {
  position: relative;
  aspect-ratio: 0.78;
  width: 100%;
}
.page-id-29390 .acp-card {
  position: absolute;
  inset: 0;
  background: #FFFFFF;
  border: 1px solid var(--acp-line);
  box-shadow:
    0 1px 0 rgba(26,26,26,0.04),
    0 18px 32px -12px rgba(26,26,26,0.18),
    0 32px 60px -28px rgba(26,26,26,0.22);
  padding: clamp(1.25rem, 2.4vw, 2rem);
  transform: rotate(-3.2deg);
  transition: transform 0.6s cubic-bezier(0.2,0,0,1);
}
.page-id-29390 .acp-card:hover { transform: rotate(-1deg) translateY(-6px); }
.page-id-29390 .acp-card::before {
  content: "";
  position: absolute;
  top: -12px; left: 50%;
  width: 60px; height: 24px;
  background: rgba(229,10,59,0.18);
  transform: translateX(-50%) rotate(-1.5deg);
  border-radius: 2px;
}
.page-id-29390 .acp-card-meta {
  display: flex; justify-content: space-between;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--acp-muted);
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
}
.page-id-29390 .acp-card-meta strong { color: var(--acp-accent); font-weight: 700; }
.page-id-29390 .acp-card-title {
  font-family: var(--wp--preset--font-family--fraunces), Georgia, serif;
  font-size: clamp(1.3rem, 2.4vw, 1.85rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--acp-contrast);
  margin: 0 0 0.4rem;
}
.page-id-29390 .acp-card-sub {
  font-family: var(--wp--preset--font-family--fraunces), Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: 0.95rem;
  color: var(--acp-ink-soft);
  margin: 0 0 clamp(1rem, 2vw, 1.5rem);
}
.page-id-29390 .acp-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  filter: blur(3.5px);
  pointer-events: none;
  user-select: none;
  margin-bottom: 0.75rem;
}
.page-id-29390 .acp-card-cell {
  background: var(--acp-paper-warm);
  border: 1px solid var(--acp-line);
  height: clamp(60px, 10vw, 92px);
  padding: 8px;
}
.page-id-29390 .acp-card-cell-bar {
  height: 8px; background: var(--acp-contrast);
  width: 60%; margin-bottom: 6px;
}
.page-id-29390 .acp-card-cell-text {
  height: 4px; background: var(--acp-line);
  width: 90%; margin-bottom: 4px;
}
.page-id-29390 .acp-card-cell-text--short { width: 50%; }
.page-id-29390 .acp-card-foot {
  display: flex; justify-content: space-between;
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--acp-muted);
  padding-top: 0.6rem;
  border-top: 1px solid var(--acp-line);
}
.page-id-29390 .acp-card-stamp {
  position: absolute;
  top: 22%; right: -18px;
  background: var(--acp-accent);
  color: var(--acp-base);
  font-family: var(--wp--preset--font-family--source-serif), system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.45rem 0.9rem;
  transform: rotate(8deg);
  box-shadow: 0 6px 14px -4px rgba(229,10,59,0.5);
}

/* ---------- Sections génériques (constat, piliers, audience) ---------- */
.page-id-29390 .acp-section--white { background: var(--acp-base); }
.page-id-29390 .acp-section--paper { background: var(--acp-paper-warm); }
.page-id-29390 .acp-section--surface { background: var(--acp-surface); }

.page-id-29390 .acp-eyebrow {
  font-family: var(--wp--preset--font-family--source-serif), system-ui, sans-serif;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--acp-accent) !important;
  margin: 0 0 var(--wp--preset--spacing--30) !important;
}
.page-id-29390 .acp-eyebrow.is-ink { color: var(--acp-contrast) !important; }
.page-id-29390 .acp-eyebrow--accent { color: #FF5773 !important; }

.page-id-29390 .acp-h2 {
  font-family: var(--wp--preset--font-family--fraunces), Georgia, serif !important;
  font-weight: 300 !important;
  font-size: clamp(1.75rem, 3.5vw, 2.75rem) !important;
  line-height: 1.18 !important;
  letter-spacing: -0.018em !important;
  margin: 0 0 var(--wp--preset--spacing--40) !important;
  font-variation-settings: "opsz" 60, "SOFT" 50 !important;
}
.page-id-29390 .acp-h2 em {
  font-style: italic;
  color: var(--acp-accent);
  font-weight: 300;
}

.page-id-29390 .acp-lead-soft {
  font-size: 1.08rem;
  color: var(--acp-ink-soft);
  margin: 0;
}

/* ---------- CONSTAT , polaroid + texte manifeste ---------- */
.page-id-29390 .acp-portrait {
  display: flex; justify-content: center;
  padding-top: 0.5rem;
}
.page-id-29390 .acp-portrait-circle {
  position: relative;
  z-index: 0;
  width: 100%;
  max-width: 280px;
  aspect-ratio: 1;
  transition: transform 0.5s cubic-bezier(0.2,0,0,1);
}
.page-id-29390 .acp-portrait-circle::before {
  /* pastille rose décalée derrière la photo */
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background: var(--acp-accent-wash);
  transform: translate(14px, 14px);
  z-index: 0;
}
.page-id-29390 .acp-portrait-circle img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  background: var(--acp-surface);
  box-shadow: 0 18px 36px -16px rgba(26,26,26,0.22);
}
.page-id-29390 .acp-portrait-circle:hover { transform: translateY(-4px); }
.page-id-29390 .acp-statement-p {
  font-family: var(--wp--preset--font-family--fraunces), Georgia, serif !important;
  font-style: italic !important;
  font-weight: 300 !important;
  font-size: clamp(1.2rem, 1.9vw, 1.65rem) !important;
  line-height: 1.45 !important;
  color: var(--acp-contrast) !important;
  margin: 0 0 1rem !important;
}
.page-id-29390 .acp-statement-p strong {
  font-style: normal; font-weight: 700;
}
.page-id-29390 .acp-statement-p em {
  font-style: italic; color: var(--acp-accent);
}
.page-id-29390 .acp-author {
  display: flex; align-items: center; gap: 0.85rem;
  font-family: var(--wp--preset--font-family--source-serif), system-ui, sans-serif !important;
  font-style: normal !important;
  font-size: 0.95rem !important;
  color: var(--acp-muted) !important;
  margin-top: 1.5rem !important;
}
.page-id-29390 .acp-author::before {
  content: "";
  width: 28px; height: 1px;
  background: var(--acp-accent);
}

/* ---------- 6 THÈMES (grille 2×3) ---------- */
.page-id-29390 .acp-themes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid var(--acp-line);
  border-left: 1px solid var(--acp-line);
}
@media (max-width: 760px) {
  .page-id-29390 .acp-themes-grid { grid-template-columns: 1fr; }
}
.page-id-29390 .acp-theme {
  position: relative;
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
  border-right: 1px solid var(--acp-line);
  border-bottom: 1px solid var(--acp-line);
  display: flex;
  gap: 1.25rem;
  background: var(--acp-base);
  transition: background 0.3s, transform 0.3s;
}
.page-id-29390 .acp-theme:hover { background: var(--acp-paper-warm); }
.page-id-29390 .acp-theme-num {
  font-family: var(--wp--preset--font-family--fraunces), Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: 2.2rem;
  line-height: 1;
  color: var(--acp-accent);
  letter-spacing: -0.02em;
  flex-shrink: 0;
  width: 2.2rem;
}
.page-id-29390 .acp-theme-body { flex: 1; }
.page-id-29390 .acp-theme h3 {
  font-family: var(--wp--preset--font-family--source-serif), system-ui, sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--acp-contrast);
  margin: 0 0 0.6rem;
}
.page-id-29390 .acp-theme p {
  font-family: var(--wp--preset--font-family--fraunces), Georgia, serif;
  font-weight: 300;
  font-size: 1.12rem;
  line-height: 1.4;
  color: var(--acp-ink-soft);
  margin: 0;
  font-variation-settings: "opsz" 60, "SOFT" 30;
}
.page-id-29390 .acp-theme p em {
  font-style: italic; color: var(--acp-contrast);
}

/* ---------- 3 PILIERS ---------- */
.page-id-29390 .acp-pillars { gap: clamp(1.5rem, 3vw, 3rem) !important; }
.page-id-29390 .acp-pillar { padding: 0; }
.page-id-29390 .acp-pillar-num {
  font-family: var(--wp--preset--font-family--fraunces), Georgia, serif !important;
  font-style: italic !important;
  font-weight: 300 !important;
  font-size: 1.05rem !important;
  color: var(--acp-accent) !important;
  margin-bottom: 0.75rem !important;
}
.page-id-29390 .acp-pillar-h {
  font-family: var(--wp--preset--font-family--fraunces), Georgia, serif !important;
  font-weight: 400 !important;
  font-size: 1.45rem !important;
  line-height: 1.18 !important;
  letter-spacing: -0.01em !important;
  color: var(--acp-contrast) !important;
  margin: 0 0 0.85rem !important;
}
.page-id-29390 .acp-pillar-p {
  font-size: 1rem !important;
  line-height: 1.6 !important;
  color: var(--acp-ink-soft) !important;
  margin: 0 !important;
}
.page-id-29390 .acp-pillar-p strong {
  color: var(--acp-contrast); font-weight: 700;
}

/* ---------- AUDIENCE oui / non ---------- */
.page-id-29390 .acp-audience {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--acp-line);
  margin-top: var(--wp--preset--spacing--50);
}
@media (max-width: 760px) {
  .page-id-29390 .acp-audience { grid-template-columns: 1fr; }
}
.page-id-29390 .acp-audience-col {
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  background: var(--acp-base);
}
.page-id-29390 .acp-audience-col + .acp-audience-col {
  border-left: 1px solid var(--acp-line);
  background: var(--acp-paper-warm);
}
@media (max-width: 760px) {
  .page-id-29390 .acp-audience-col + .acp-audience-col {
    border-left: 0;
    border-top: 1px solid var(--acp-line);
  }
}
.page-id-29390 .acp-audience-tag {
  display: inline-block;
  font-family: var(--wp--preset--font-family--source-serif), system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border: 1px solid currentColor;
  margin-bottom: 1.25rem;
}
.page-id-29390 .acp-audience-col--yes .acp-audience-tag { color: var(--acp-accent); }
.page-id-29390 .acp-audience-col--no .acp-audience-tag { color: var(--acp-muted); }
.page-id-29390 .acp-audience h3 {
  font-family: var(--wp--preset--font-family--fraunces), Georgia, serif;
  font-weight: 400;
  font-size: 1.45rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 1.1rem;
  color: var(--acp-contrast);
}
.page-id-29390 .acp-audience ul {
  list-style: none;
  padding: 0; margin: 0;
}
.page-id-29390 .acp-audience li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--acp-ink-soft);
  margin-bottom: 0.85rem;
}
.page-id-29390 .acp-audience-col--yes li::before {
  content: "+";
  position: absolute; left: 0; top: 0;
  font-weight: 700;
  color: var(--acp-accent);
  font-size: 1.1rem;
}
.page-id-29390 .acp-audience-col--no li::before {
  content: "·";
  position: absolute; left: 0; top: -0.1rem;
  font-weight: 700;
  color: var(--acp-muted);
  font-size: 1.4rem;
}

/* ---------- CTA dark + formulaire Brevo ---------- */
.page-id-29390 .acp-cta {
  position: relative;
  overflow: hidden;
  color: var(--acp-base);
}
.page-id-29390 .acp-cta::before {
  content: "";
  position: absolute;
  top: -50%; right: -20%;
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(229,10,59,0.18), transparent 60%);
  pointer-events: none;
}
.page-id-29390 .acp-cta > * { position: relative; }
.page-id-29390 .acp-cta-h {
  font-family: var(--wp--preset--font-family--fraunces), Georgia, serif !important;
  font-weight: 300 !important;
  font-size: clamp(2.25rem, 4.5vw, 3.5rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 1.5rem !important;
  color: var(--acp-base) !important;
  font-variation-settings: "opsz" 144, "SOFT" 50 !important;
}
.page-id-29390 .acp-cta-h em {
  font-style: italic; color: #FF5773; font-weight: 300;
}
.page-id-29390 .acp-cta-p {
  color: rgba(255,255,255,0.78) !important;
  font-size: 1.08rem !important;
  line-height: 1.6 !important;
  margin: 0 0 0.75rem !important;
  max-width: 32rem !important;
}
.page-id-29390 .acp-cta-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1.75rem;
  margin-top: 1.75rem;
  font-family: var(--wp--preset--font-family--source-serif), system-ui, sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.page-id-29390 .acp-cta-meta span { display: flex; align-items: center; gap: 0.5rem; }
.page-id-29390 .acp-cta-meta span::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--acp-accent);
  border-radius: 50%;
}

/* Form card */
.page-id-29390 .acp-form-card {
  background: var(--acp-base);
  color: var(--acp-contrast);
  padding: clamp(1.75rem, 3.5vw, 2.5rem) !important;
  border: 1px solid var(--acp-line);
  position: relative;
}
.page-id-29390 .acp-form-card::before {
  content: "";
  position: absolute;
  top: -8px; left: -8px;
  right: 24px; bottom: 24px;
  border: 1px solid var(--acp-accent);
  pointer-events: none;
}
.page-id-29390 .acp-form-card-eyebrow {
  font-family: var(--wp--preset--font-family--source-serif), system-ui, sans-serif !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--acp-accent) !important;
  font-weight: 500 !important;
  margin: 0 0 0.85rem !important;
}
.page-id-29390 .acp-form-card-h {
  font-family: var(--wp--preset--font-family--fraunces), Georgia, serif !important;
  font-weight: 400 !important;
  font-size: 1.4rem !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
  margin: 0 0 0.85rem !important;
  color: var(--acp-contrast) !important;
}
.page-id-29390 .acp-form-card-p {
  font-size: 0.95rem !important;
  color: var(--acp-ink-soft) !important;
  margin: 0 0 1.25rem !important;
}
.page-id-29390 .acp-form-card-note {
  margin-top: 0.9rem !important;
  font-size: 0.78rem !important;
  color: var(--acp-muted) !important;
  letter-spacing: 0.02em !important;
}
.page-id-29390 .acp-link {
  color: var(--acp-contrast);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.page-id-29390 .acp-link:hover { color: var(--acp-accent); }

/* ---------- Brevo form override (le plugin sib_signup_form) ---------- */
.page-id-29390 .acp-form-card .sib_signup_form,
.page-id-29390 .acp-form-card #sib_signup_form_9,
.page-id-29390 .acp-form-card .sib_signup_box_inside_9 {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  width: 100%;
}
.page-id-29390 .acp-form-card .sib_signup_form input[type="text"],
.page-id-29390 .acp-form-card .sib_signup_form input[type="email"] {
  width: 100% !important;
  padding: 0.85rem 1rem !important;
  font-family: var(--wp--preset--font-family--source-serif), system-ui, sans-serif !important;
  font-size: 1rem !important;
  border: 1px solid var(--acp-line) !important;
  border-radius: 2px !important;
  background: var(--acp-paper-warm) !important;
  color: var(--acp-contrast) !important;
  margin-bottom: 0.6rem !important;
  box-sizing: border-box !important;
}
.page-id-29390 .acp-form-card .sib_signup_form input[type="text"]:focus,
.page-id-29390 .acp-form-card .sib_signup_form input[type="email"]:focus {
  outline: 2px solid var(--acp-accent) !important;
  outline-offset: 1px !important;
}
.page-id-29390 .acp-form-card .sib_signup_form .sib-default-btn,
.page-id-29390 .acp-form-card .sib_signup_form input[type="submit"] {
  width: 100% !important;
  padding: 0.95em 1.5em !important;
  font-family: var(--wp--preset--font-family--source-serif), system-ui, sans-serif !important;
  font-weight: 500 !important;
  font-size: 0.98rem !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  border: 0 !important;
  background: var(--acp-accent) !important;
  color: var(--acp-base) !important;
  cursor: pointer !important;
  transition: background 0.25s !important;
  border-radius: 2px !important;
}
.page-id-29390 .acp-form-card .sib_signup_form .sib-default-btn:hover,
.page-id-29390 .acp-form-card .sib_signup_form input[type="submit"]:hover {
  background: var(--acp-accent-dark) !important;
}
.page-id-29390 .acp-form-card .sib-form-block__paragraph,
.page-id-29390 .acp-form-card label {
  font-size: 0.8rem !important;
  color: var(--acp-muted) !important;
  margin-bottom: 0.3rem !important;
}

/* ---------- FOOTER programme ---------- */
.page-id-29390 .acp-foot {
  background: var(--acp-paper-warm);
  text-align: center;
}
.page-id-29390 .acp-foot-signature {
  font-family: var(--wp--preset--font-family--fraunces), Georgia, serif !important;
  font-style: italic !important;
  font-weight: 300 !important;
  font-size: 1.15rem !important;
  color: var(--acp-ink-soft) !important;
  margin: 0 auto 0.75rem !important;
  max-width: 38rem !important;
  text-align: center !important;
}
.page-id-29390 .acp-foot-by {
  font-family: var(--wp--preset--font-family--source-serif), system-ui, sans-serif !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--acp-muted) !important;
  margin: 0 auto !important;
  text-align: center !important;
}
.page-id-29390 .acp-foot-by strong { color: var(--acp-contrast); font-weight: 700; }

/* ---------- Mobile : hero passe en colonne unique ---------- */
@media (max-width: 880px) {
  .page-id-29390 .acp-hero-col-visual { display: none; }
  .page-id-29390 .acp-hero-col-text { flex-basis: 100% !important; }

  /* Le ::before pastille rose du portrait déborde de 14px en bas-droite ;
     en mobile col unique, ça chevauche l'eyebrow qui suit. On crée
     l'espace en bas pour compenser le débordement + un peu d'air. */
  .page-id-29390 .acp-portrait { margin-bottom: 1.75rem; }
  .page-id-29390 .acp-portrait-circle { max-width: 220px; }
  .page-id-29390 .acp-portrait-circle::before { transform: translate(10px, 10px); }
}

/* ---------- WP override : pages without title ---------- */
.page-id-29390 .wp-block-post-title {
  display: none !important;
}
.page-id-29390 main {
  margin-top: 0 !important;
}
.page-id-29390 main > .wp-block-group:has(> .wp-block-post-title) {
  display: none !important;
}
.page-id-29390 .entry-content {
  padding: 0 !important;
  max-width: 100% !important;
}

/* ===== END landing /culture-photo/ ===== */
/* ===== BEGIN hc-cta + hc-form-card + hc-about-portrait (global) ===== */
/* CSS partagé : section newsletter (.hc-cta) + card formulaire (.hc-form-card)
   + portrait à pastille rose décalée (.hc-about-portrait). Utilisé par
   accueil-blog (pattern 28523). Mêmes blocs visuels que /culture-photo/. */

/* ---------- Section CTA dark ---------- */
.hc-cta {
  position: relative;
  overflow: hidden;
  color: var(--wp--preset--color--base) !important;
  background-color: var(--wp--preset--color--contrast) !important;
}
.hc-cta::before {
  content: "";
  position: absolute;
  top: -50%; right: -20%;
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(229,10,59,0.18), transparent 60%);
  pointer-events: none;
}
.hc-cta > * { position: relative; }
.hc-cta-h {
  font-family: var(--wp--preset--font-family--fraunces), Georgia, serif !important;
  font-weight: 300 !important;
  font-size: clamp(2.25rem, 4.5vw, 3.5rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 1.5rem !important;
  color: var(--wp--preset--color--base) !important;
}
.hc-cta-h em {
  font-style: italic; color: #FF5773; font-weight: 300;
}
.hc-cta-p {
  color: rgba(255,255,255,0.78) !important;
  font-size: 1.08rem !important;
  line-height: 1.6 !important;
  margin: 0 0 0.85rem !important;
  max-width: 32rem !important;
}
.hc-cta-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1.75rem;
  margin-top: 1.75rem;
  font-family: var(--wp--preset--font-family--source-serif), system-ui, sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.hc-cta-meta span { display: flex; align-items: center; gap: 0.5rem; }
.hc-cta-meta span::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--wp--preset--color--accent);
  border-radius: 50%;
}
.hc-eyebrow--accent { color: #FF5773 !important; }

/* ---------- Form card (blanche encadrée rouge) ---------- */
.hc-form-card {
  background: var(--wp--preset--color--base);
  color: var(--wp--preset--color--contrast);
  padding: clamp(1.75rem, 3.5vw, 2.5rem) !important;
  border: 1px solid var(--wp--preset--color--line);
  position: relative;
}
.hc-form-card::before {
  content: "";
  position: absolute;
  top: -8px; left: -8px;
  right: 24px; bottom: 24px;
  border: 1px solid var(--wp--preset--color--accent);
  pointer-events: none;
}
.hc-form-card-eyebrow {
  font-family: var(--wp--preset--font-family--source-serif), system-ui, sans-serif !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--wp--preset--color--accent) !important;
  font-weight: 500 !important;
  margin: 0 0 0.85rem !important;
}
.hc-form-card-h {
  font-family: var(--wp--preset--font-family--fraunces), Georgia, serif !important;
  font-weight: 400 !important;
  font-size: 1.4rem !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
  margin: 0 0 0.85rem !important;
  color: var(--wp--preset--color--contrast) !important;
}
.hc-form-card-p {
  font-size: 0.95rem !important;
  color: var(--wp--preset--color--ink-soft, #4A4A4A) !important;
  margin: 0 0 1rem !important;
}
.hc-form-card-iframe {
  background: var(--wp--preset--color--paper-warm, #F3F1EC);
  padding: 0.5rem;
  border-radius: 2px;
  margin: 0 -0.5rem;
}
.hc-form-card-iframe iframe {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  border: 0 !important;
  background: transparent !important;
}
.hc-form-card-note {
  margin-top: 0.85rem !important;
  font-size: 0.78rem !important;
  color: var(--wp--preset--color--muted, #6B6B6B) !important;
  letter-spacing: 0.02em !important;
}

/* Mobile : col unique */
@media (max-width: 880px) {
  .hc-cta .wp-block-columns { flex-wrap: wrap; }
  .hc-cta .wp-block-column { flex-basis: 100% !important; }
}

/* ---------- Portrait section "Qui écrit ici" (pastille rose décalée) ---------- */
.hc-about-portrait {
  display: flex;
  justify-content: center;
}
.hc-about-portrait-circle {
  position: relative;
  z-index: 0;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 1;
  transition: transform 0.5s cubic-bezier(0.2,0,0,1);
}
.hc-about-portrait-circle::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background: var(--wp--preset--color--accent-wash, #FCE7EB);
  transform: translate(16px, 16px);
  z-index: 0;
}
.hc-about-portrait-circle img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  background: var(--wp--preset--color--surface, #F5F5F5);
  box-shadow: 0 18px 36px -16px rgba(26,26,26,0.22);
}
.hc-about-portrait-circle:hover { transform: translateY(-4px); }

@media (max-width: 880px) {
  .hc-about-portrait-col { margin-bottom: 1.75rem; }
  .hc-about-portrait-circle { max-width: 240px; }
  .hc-about-portrait-circle::before { transform: translate(10px, 10px); }
}
/* ===== END hc-cta + hc-form-card + hc-about-portrait (global) ===== */

/* ===== BEGIN /accueil-blog/ — kill block-gap auto WP entre sections ===== */
/* Le template page-accueil-blog.html insère le pattern 28523 directement
   au niveau du wrapper .wp-site-blocks (pas de wp:post-content). WP applique
   alors :where(.wp-site-blocks)>*{margin-block-start:1.5rem} sur chaque
   enfant direct, soit 24px de blanc entre chaque section. Invisible quand
   les deux sections sont blanches, mais visible dès qu'une section colorée
   (gris surface ou noir contrast) est impliquée. On annule ce gap pour cette
   page uniquement (page-id 21763), sur les sections .hc-* du pattern + le
   footer (sinon 24px blanc entre about et le footer noir). */
.page-id-21763 .wp-site-blocks > section[class*="hc-"],
.page-id-21763 .wp-site-blocks > footer {
  margin-block-start: 0;
}
/* ===== END /accueil-blog/ — kill block-gap auto WP entre sections ===== */

/* ===== BEGIN /culture-photo/ — kill block-gap auto WP entre sections ===== */
/* Même cause que /accueil-blog/ : page-culture-photo.html insère le pattern
   29391 directement au niveau .wp-site-blocks, donc :where(.wp-site-blocks)>*
   pose un margin-block-start de 1.5rem (24px) entre chaque section. Le pattern
   29391 utilise des classes acp-* (acp-hero, acp-section--*, acp-cta, acp-foot)
   au lieu de hc-*. */
.page-id-29390 .wp-site-blocks > section[class*="acp-"],
.page-id-29390 .wp-site-blocks > footer {
  margin-block-start: 0;
}
/* ===== END /culture-photo/ — kill block-gap auto WP entre sections ===== */