/*
Theme Name: AICMP — Association Internationale des Collaborateurs de Ministres et de Parlementaires (Atelier WP)
Theme URI: https://claude.ai/code/atelier-wp
Author: Atelier WP
Description: Thème de blocs généré par scripts/build-theme.py à partir du socle atelier-base et de la fiche du projet.
Version: 1.0.2
Requires at least: 6.5
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: aicmp
*/

/* Polices auto-hébergées (sous-ensemble latin) et variables de marque —
   générées par scripts/build-theme.py, ne pas modifier ici. */
@font-face {
  font-family: 'Libre Caslon Text';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/libre-caslon-text-400-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Libre Caslon Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/libre-caslon-text-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Libre Caslon Text';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/libre-caslon-text-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Public Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/public-sans-400-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('assets/fonts/public-sans-variable.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --atelier-accent-strong: #8A6A1F;
  --atelier-texture-light: url("/wp-content/uploads/2026/10/aicmp-marbre.jpg");
  --atelier-texture-dark: none;
}


/* ==========================================================================
   Refonte du 30/09/2026 (suite 12). Retour client sans détour : « il ne
   faut pas juste optimiser le site comme tu fais, il faut le repenser ».
   Les rounds précédents (icônes cerclées, cartes à badges, watermarks)
   sont abandonnés au profit d'un langage plus restreint et éditorial,
   calibré sur une maquette de référence transmise par le client :
   numérotation de section, fines lignes de séparation, typographie et
   espace blanc comme principaux porteurs de style, photographie réelle
   uniquement là où elle est bonne (hero, "Le cabinet"), pas de photo de
   remplissage ailleurs tant qu'une meilleure sélection n'existe pas.
   L'historique détaillé des rounds précédents (bugs trouvés, décisions,
   captures) reste dans git (`git log -- theme/dujancourt/style.css`) et
   dans docs/page-engine.md — pas repris ici pour ne pas garder de
   commentaires décrivant du code supprimé.
   ========================================================================== */

/* --- En-tête : liens de nav --- */
/* La neutralisation globale de --wp--style--block-gap (P09, theme.json
   styles.spacing.blockGap:"0") retire aussi l'espacement natif du groupe
   flex des liens de nav, qui n'a pas de gap CSS propre — repéré en
   screenshot lors de la refonte du 30/09/2026 (liens collés les uns aux
   autres dans l'en-tête). */
.nav-links {
  gap: 1.75rem;
}

/* --- En-tête : menu mobile (v1.9.0, 01/10/2026). Avant, sur téléphone,
   les six liens s'enroulaient sur quatre lignes et l'en-tête collant
   occupait ~240px (28% de l'écran) en permanence. Amélioration
   progressive : sans JS (pas de classe .has-js sur <html>), les liens
   restent affichés comme avant et le bouton reste caché ; avec JS
   (assets/nav-toggle.js), les liens se replient dans un panneau ouvert
   par le bouton. Le bouton "Prendre rendez-vous" de l'en-tête est masqué
   sur mobile : le hero, la bande #rdv et le bouton d'appel flottant
   couvrent déjà cette action, et il ne tenait pas sur la ligne.
   Seuil à 1079px et non 781px (seuil des colonnes WordPress) : en dessous
   de ~1080px, logo + six liens + bouton ne tiennent plus sur une ligne et
   l'en-tête passait sur deux ou trois lignes (142px en tablette). --- */
.nav-toggle {
  display: none;
}
@media (max-width: 1079px) {
  .site-header > .wp-block-group {
    flex-wrap: nowrap;
  }
  html.has-js .site-header .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0 -10px 0 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--wp--preset--color--ink);
    cursor: pointer;
  }
  .nav-toggle-bars,
  .nav-toggle-bars::before,
  .nav-toggle-bars::after {
    display: block;
    width: 22px;
    height: 1.5px;
    background: currentColor;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  .nav-toggle-bars {
    position: relative;
  }
  .nav-toggle-bars::before,
  .nav-toggle-bars::after {
    content: "";
    position: absolute;
    left: 0;
  }
  .nav-toggle-bars::before {
    top: -7px;
  }
  .nav-toggle-bars::after {
    top: 7px;
  }
  .site-header.is-menu-open .nav-toggle-bars {
    background: transparent;
  }
  .site-header.is-menu-open .nav-toggle-bars::before {
    transform: translateY(7px) rotate(45deg);
  }
  .site-header.is-menu-open .nav-toggle-bars::after {
    transform: translateY(-7px) rotate(-45deg);
  }
  .site-header .wp-block-buttons {
    margin-left: auto;
  }
  @media (max-width: 599px) {
    html.has-js .site-header .wp-block-buttons {
      display: none;
    }
  }
  html.has-js .site-header .nav-links {
    display: none;
  }
  html.has-js .site-header.is-menu-open .nav-links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 0.5rem var(--wp--style--root--padding-left, 1.5rem) 1rem;
    background: var(--wp--preset--color--surface);
    border-bottom: 1px solid var(--wp--preset--color--line);
    box-shadow: 0 12px 24px color-mix(in srgb, var(--wp--preset--color--ink) 8%, transparent);
  }
  html.has-js .site-header.is-menu-open .nav-links p {
    margin: 0;
    border-top: 1px solid var(--wp--preset--color--line);
  }
  html.has-js .site-header.is-menu-open .nav-links p:first-child {
    border-top: 0;
  }
  html.has-js .site-header.is-menu-open .nav-links a {
    display: block;
    padding: 0.85rem 0;
    font-size: var(--ac-fs-3, 1rem);
    color: var(--wp--preset--color--ink) !important;
  }
}

/* --- En-tête : mark (logo + nom), ajouté round "décorations" (30/09/2026,
   suite 15 — demande client : « ajouter des décorations, icons,
   backgrounds, images »). Une seule petite image de marque, jamais posée
   en carte/badge : juste un repère visuel à côté du nom. --- */
.brand-mark {
  align-items: center;
  gap: 0.7rem;
}
.brand-mark-logo {
  flex: 0 0 auto;
  margin: 0 !important;
}
.brand-mark-logo img {
  display: block;
  width: 34px;
  height: 34px;
  object-fit: contain;
  border-radius: 3px;
}

/* --- Base : ancres de navigation. L'en-tête est collant (~75px) : sans
   cette marge, un lien "#section" amène le haut de la section SOUS
   l'en-tête. Défilement doux sauf si l'utilisateur a demandé moins
   d'animations. */
html {
  scroll-padding-top: 76px;
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* --- Base : titres équilibrés sur leurs lignes (évite un mot seul en
   dernière ligne, ex. "Un message plutôt qu'un / appel ?"). Ignoré sans
   dommage par les navigateurs qui ne le gèrent pas. */
h1,
h2,
h3 {
  text-wrap: balance;
}

/* --- Base : mot composé à ne jamais couper en fin de ligne (ex.
   "rendez-vous", qui se coupait au trait d'union en laissant "vous" seul
   sur une ligne). Préféré au trait d'union insécable U+2011, absent de
   nombreuses polices web (repli sur une autre police, glyphe différent). */
.nobr {
  white-space: nowrap;
}

/* --- Base : texte secondaire sur fond sombre. "ink-soft" (#5C5348) sur
   "ink" (#211D18) ne donne que 2,2:1 de contraste (WCAG AA : 4,5:1) —
   constaté au pied de page le 01/10/2026. Un blanc translucide reste lisible
   quelle que soit la couleur sombre du fond. */
.on-dark-muted {
  color: rgba(255, 255, 255, 0.66);
}

/* --- Base : modèle de boîte. Sans cette règle, tout élément à
   "width:100%" + padding + bordure déborde de son parent (constaté le
   01/10/2026 : les champs du formulaire de contact dépassaient de 27px de
   leur carte et se touchaient). Règle standard de tout socle CSS moderne. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* --- Base : focus, accessibilité, mouvement réduit --- */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--wp--preset--color--accent);
  outline-offset: 2px;
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* --- Typographie : soulignement d'accent, mot en italique, liens --- */
.has-atelier-underline {
  position: relative;
  padding-bottom: var(--wp--preset--spacing--xs);
}
.has-atelier-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 3rem;
  height: 3px;
  background: var(--wp--preset--color--accent);
}
.accent-word {
  font-style: italic;
  color: var(--wp--preset--color--accent);
}
.link-underline {
  text-decoration: none !important;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: background-size 0.3s ease;
}
.link-underline:hover,
.link-underline:focus-visible {
  background-size: 100% 1px;
}
.link-arrow .arrow {
  display: inline-block;
  transition: transform 0.25s ease;
}
.link-arrow:hover .arrow {
  transform: translateX(4px);
}
.wp-block-button__link {
  transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease, background-color 0.25s ease;
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--wp--preset--color--ink) 18%, transparent);
  opacity: 0.94;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  transform: translateY(-2px);
  background-color: color-mix(in srgb, var(--wp--preset--color--accent) 14%, transparent);
}

/* --- Apparition progressive au scroll (gatée par html.has-js, posée tôt
   dans <head> par functions.php) : sans JS, tout reste visible. --- */
/* v1.10.0 : le fondu porte sur le CONTENU de la section, plus sur la
   section elle-même. Son fond reste donc opaque pendant l'apparition — ce
   qui est nécessaire depuis le pied de page « en rideau » (module M9), qui
   attend derrière la page : une section encore transparente le laissait
   apparaître par transparence. Les décors positionnés (aria-hidden : photo
   du hero, motifs SVG, signature) ne sont pas concernés, leur propre
   transform n'est pas écrasé. */
html.has-js .reveal > :not([aria-hidden="true"]) {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  transition-delay: calc(var(--reveal-i, 0) * 70ms);
}
html.has-js .reveal.is-visible > :not([aria-hidden="true"]) {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   Rythme des sections : espacement généreux + alternance de fond
   (retour client : « les blocs sont collés », « varie les fonds »).
   Utilise les tokens 3xl/4xl ajoutés à theme.json pour ce round (128px /
   160px) plutôt que xl/2xl (64px / 96px), jugés trop serrés en pratique
   malgré le padding déjà en place.
   ========================================================================== */
.section-band {
  padding-top: var(--wp--preset--spacing--4-xl) !important;
  padding-bottom: var(--wp--preset--spacing--4-xl) !important;
}
@media (max-width: 781px) {
  .section-band {
    padding-top: var(--wp--preset--spacing--2-xl) !important;
    padding-bottom: var(--wp--preset--spacing--2-xl) !important;
  }
}

/* Contraste WCAG AA (round "optimisations", 03/10/2026) : le ton accent
   de marque (#9C8259) sur fond blanc ne passe pas le seuil de contraste
   AA pour du texte normal (ratio mesuré 3.65, il en faut 4.5) — ces
   libellés font ~14px, trop petits pour entrer dans l'exception "grand
   texte" (≥24px, ou ≥19px en gras) qui se contente de 3:1. Redéfinir la
   variable --wp--preset--color--accent dans ce seul sélecteur suffit à
   corriger les deux usages de ".section-eyebrow" (la classe WP
   "has-accent-color" et le style inline "color:var(--wp--preset--color--
   accent)" des catégories d'actualité) sans toucher à l'accent partout
   ailleurs sur le site (boutons, gros chiffres), où il passe déjà le
   contraste. L'opacité à 0.85 posée ici, elle, rabaissait le contraste
   réellement rendu sous le seuil même après ce correctif de couleur
   (vérifié par calcul : 4.58 à pleine opacité, seulement 3.46 une fois
   mélangée à 85% avec le blanc) — retirée plutôt que compensée par une
   couleur encore plus sombre, qui aurait fini trop proche du marron du
   ton "primary" et aurait perdu la distinction visuelle de l'accent. */
.section-eyebrow {
  --wp--preset--color--accent: var(--atelier-accent-strong);
}
/* --- Numéro d'eyebrow ("01 — Le cabinet") : petit motif graphique
   ajouté round "décorations" (30/09/2026, suite 17 — précision du
   client après correction de la suite 16 : décor "sur les titres",
   concrètement un motif discret près du numéro). CSS pur, aucun
   changement de balisage textuel ni de mise en page — juste un repère
   avant le numéro, dans le même langage graphique fin (traits, accent)
   que le reste du site. Scopé à "--numbered" (pas à .section-eyebrow
   seul) : cette classe est réutilisée sans numéro pour les catégories
   des billets d'actualité (voir news_item() dans le script), où ce
   motif n'aurait pas de sens. --- */
.section-eyebrow--numbered {
  position: relative;
  padding-left: 1.4rem;
}
.section-eyebrow--numbered::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0.7rem;
  height: 1px;
  background: currentColor;
}

/* ==========================================================================
   Hero : plein écran (100vh), une seule vraie photo, traitement éditorial
   assumé (grain + duotone) plutôt qu'un rendu photo "propre" — la photo
   source (1024×768) ne tient pas la netteté sur une largeur d'écran
   complète, donc on en fait un parti pris de style plutôt qu'un défaut
   qu'on cache. Un repère de défilement en bas signale qu'il y a du
   contenu sous le pli, pour une page qui ouvre maintenant sur une image
   plutôt que sur du texte + un bandeau court.
   ========================================================================== */
.hero-band {
  position: relative;
  z-index: 0;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  align-items: center; /* centre verticalement l'unique enfant de flux : .hero-content */
}
/* .hero-content est un enfant direct normal du bloc "constrained" : WP lui
   applique nativement margin-left/right:auto + max-width:1200px, donc son
   bord gauche tombe exactement à la même abscisse que la colonne de
   contenu de toutes les autres sections — c'est ce qui manquait au
   premier correctif (30/09/2026, suite 13), qui neutralisait cette marge
   automatique directement sur les enfants du hero et les recentrait
   individuellement au lieu de les aligner sur cette même colonne (repéré
   par le client le 30/09/2026, suite 14 : "le texte est plus à gauche").
   La colonne de texte plus étroite (760px) est posée sur les enfants de
   .hero-content, pas sur .hero-content lui-même, pour ne pas casser ce
   centrage natif. */
.hero-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* En flux normal, un enfant bloc avec max-width:1200px + margin:auto
     (posé nativement par WP pour layout:"constrained") se centre tout
     seul car sa largeur par défaut ("auto") remplit l'espace disponible.
     Comme enfant flex de .hero-band (voir plus haut), ce n'est plus le
     cas par défaut : un item flex sans largeur explicite se réduit à son
     contenu, et le margin:auto centre alors cette boîte plus étroite —
     d'où un bord gauche différent de celui des autres sections (repéré
     le 30/09/2026, suite 14). width:100% restaure le même calcul que le
     flux normal (100% puis plafonné à 1200px par la règle native). */
  width: 100%;
}
.hero-content > h1,
.hero-content > p {
  max-width: 760px;
}
.hero-bg {
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  z-index: -2;
  overflow: hidden;
}
.hero-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  /* Photo remplacée round "décorations" (01/10/2026, suite 19 — demande
     client, l'ancienne photo "pas terrible"). Traitement allégé par
     rapport à l'ancienne : cette photo est nette et bien exposée (pas
     le défaut de netteté qui justifiait un noir et blanc marqué sur
     l'ancienne), donc on laisse davantage de sa chaleur dorée
     transparaître plutôt que de forcer un noir et blanc complet — le
     dégradé sombre (.hero-bg-overlay) fait l'essentiel du travail de
     lisibilité sur la colonne de texte, pas le filtre lui-même. */
  filter: grayscale(0.25) contrast(1.08) brightness(0.72) saturate(0.9);
}
/* Grain fin en overlay : masque le manque de définition à grande taille
   et lit comme un choix éditorial (argentique) plutôt qu'un défaut. */
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.5) 0.5px, transparent 0.5px);
  background-size: 3px 3px;
  opacity: 0.05;
  mix-blend-mode: overlay;
}
.hero-bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, color-mix(in srgb, var(--wp--preset--color--ink) 92%, transparent) 0%, color-mix(in srgb, var(--wp--preset--color--ink) 72%, transparent) 32%, color-mix(in srgb, var(--wp--preset--color--ink) 32%, transparent) 62%, color-mix(in srgb, var(--wp--preset--color--ink) 12%, transparent) 100%);
}
.hero-scroll-cue {
  position: absolute;
  /* Aligné sur le bord gauche de la colonne de contenu (1200px centrée),
     et plus sur le bord de l'écran : depuis que les sections vont
     réellement bord à bord (v1.9.0), "spacing--md" le collait au bord. */
  left: max(var(--wp--preset--spacing--md), calc((100% - 1200px) / 2));
  bottom: var(--wp--preset--spacing--lg);
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--ac-fs-1, 0.78rem);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.hero-scroll-cue::after {
  content: "↓";
  display: inline-block;
}
html.has-js .hero-scroll-cue::after {
  animation: hero-scroll-bob 1.8s ease-in-out infinite;
}
@keyframes hero-scroll-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}
@media (max-width: 781px) {
  .hero-band {
    min-height: 100svh;
  }
  .hero-scroll-cue {
    display: none;
  }
}

/* ==========================================================================
   "Le cabinet" : une seule photo pleine, sobre, légendée — la composition
   à médaillon superposé du round précédent est abandonnée (pas critiquée
   frontalement mais incohérente avec la restriction générale demandée).
   ========================================================================== */
.photo-frame {
  overflow: hidden;
  height: 460px;
}
/* La <figure> du bloc image doit elle aussi prendre la hauteur du cadre :
   sans ça, le "height:100%" de l'image se résout en "auto", l'image garde
   sa hauteur naturelle (1067px pour un portrait à 600px de large) et le
   cadre n'en montre que le HAUT — d'où le visage coupé au menton constaté
   le 01/10/2026 (v1.9.0). Le object-position ne pouvait donc rien faire. */
.photo-frame .wp-block-image,
.photo-frame figure {
  height: 100%;
  margin: 0;
}
.photo-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Point de cadrage vertical réglable par photo via --focus-y (50% par
     défaut). Modificateur .photo-frame--portrait pour un portrait assis
     cadré large (visage dans le tiers haut de l'image). */
  object-position: 50% var(--focus-y, 50%);
}
.photo-frame--portrait {
  --focus-y: 22%;
}
.photo-caption {
  margin-top: 0.75rem !important;
  font-size: var(--ac-fs-1, 0.8rem);
  letter-spacing: 0.04em;
  opacity: 0.65;
}
@media (max-width: 781px) {
  .photo-frame {
    height: 320px;
  }
}

/* ==========================================================================
   Liste éditoriale numérotée — remplace les grilles de cartes à icônes
   pour "Domaines d'intervention" (6 items, 2 colonnes) : la sophistication
   vient de la numérotation, de la ligne fine et de l'espace, pas d'un
   badge circulaire par ligne (retour client explicite sur ce point).
   ========================================================================== */
.editorial-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap: 0;
  column-gap: var(--wp--preset--spacing--lg);
  margin-top: var(--wp--preset--spacing--lg) !important;
}
.editorial-row {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1.6rem 0;
  border-top: 1px solid var(--wp--preset--color--line);
  transition: padding-left 0.25s ease;
}
.editorial-row:nth-child(1),
.editorial-row:nth-child(2) {
  border-top: none;
}
.editorial-row:hover {
  padding-left: 0.4rem;
}
.editorial-num {
  flex: 0 0 auto;
  font-size: var(--ac-fs-1, 0.8rem);
  font-family: var(--wp--preset--font-family--heading);
  color: var(--wp--preset--color--accent);
  min-width: 1.6rem;
}
.editorial-row-body {
  flex: 1 1 auto;
  min-width: 0;
}
.editorial-row-body h3 {
  margin: 0 !important;
}
.editorial-row-body p {
  margin: 0.35rem 0 0 !important;
}
.editorial-row-arrow {
  flex: 0 0 auto;
  color: var(--wp--preset--color--primary);
  transition: transform 0.25s ease;
}
.editorial-row:hover .editorial-row-arrow {
  transform: translateX(4px);
}
@media (max-width: 781px) {
  .editorial-list {
    grid-template-columns: 1fr;
  }
  .editorial-row:nth-child(2) {
    border-top: 1px solid var(--wp--preset--color--line);
  }
}

/* ==========================================================================
   Layout fractionné avec liséré vertical — "Honoraires" (texte + liste de
   réassurance) et "Actualités" (2 billets), même composant : une colonne
   plus étroite, une ligne fine verticale, une colonne de contenu. Remplace
   la carte "Cadre légal" à filigrane et les vignettes photo des
   actualités (photos jugées mal choisies/pixelisées — retirées en
   attendant une meilleure sélection).
   ========================================================================== */
.split-with-rule {
  display: flex;
  gap: var(--wp--preset--spacing--xl);
}
.split-with-rule > .wp-block-column:last-child {
  border-left: 1px solid var(--wp--preset--color--line);
  padding-left: var(--wp--preset--spacing--xl) !important;
}
@media (max-width: 781px) {
  .split-with-rule {
    flex-direction: column;
  }
  .split-with-rule > .wp-block-column:last-child {
    border-left: none;
    padding-left: 0 !important;
    border-top: 1px solid var(--wp--preset--color--line);
    padding-top: var(--wp--preset--spacing--lg) !important;
  }
}
.reassurance-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: var(--wp--preset--spacing--sm) !important;
}
.reassurance-item {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}
.reassurance-item::before {
  content: "—";
  color: var(--wp--preset--color--accent);
  flex: 0 0 auto;
}
.reassurance-item p {
  margin: 0 !important;
}

.news-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--wp--preset--spacing--xl);
  margin-top: var(--wp--preset--spacing--lg) !important;
}
.news-split-item {
  border-left: 1px solid var(--wp--preset--color--line);
  padding-left: var(--wp--preset--spacing--lg);
}
@media (max-width: 781px) {
  .news-split {
    grid-template-columns: 1fr;
    gap: var(--wp--preset--spacing--lg);
  }
}

/* --- "Actualités" : texture de fond ajoutée round "décorations"
   (30/09/2026, suite 15), pas de photo — les vignettes photo de cette
   section avaient déjà été retirées à un round précédent car mal
   choisies/pixelisées (voir plus haut) ; ce point n'a pas été rouvert
   par le client, donc on reste sur un habillage non photographique ici
   : grille de points très discrète, dans l'esprit du motif géométrique
   déjà utilisé pour "Prendre rendez-vous". --- */
/* Texture remplacée round "décorations" (01/10/2026, suite 19) : grille
   de points CSS (30/09/2026, suite 15) remplacée par une vraie photo de
   texture (marbre clair + fines lignes, fournie par le client). Voile
   quasi opaque superposé (même couleur que le fond "paper" existant) :
   section dense en texte, la photo doit rester un grain de fond à peine
   perceptible, jamais concurrencer la lisibilité du texte. */
#actualites {
  background-image: linear-gradient(color-mix(in srgb, var(--wp--preset--color--paper) 94%, transparent), color-mix(in srgb, var(--wp--preset--color--paper) 94%, transparent)), var(--atelier-texture-light, none);
  background-size: cover;
  background-position: center;
}

/* ==========================================================================
   FAQ : layout asymétrique (titre à gauche, accordéon à droite), même
   composant core/details natif qu'avant (sans JS).
   ========================================================================== */
.faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--wp--preset--spacing--xl);
  align-items: start;
}
@media (max-width: 781px) {
  .faq-layout {
    grid-template-columns: 1fr;
  }
}
.faq-item {
  border-bottom: 1px solid var(--wp--preset--color--line);
  padding: 1.1rem 0;
}
.faq-item:first-child {
  border-top: 1px solid var(--wp--preset--color--line);
}
.faq-item summary {
  cursor: pointer;
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--ac-fs-3, 1.15rem);
  color: var(--wp--preset--color--ink);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.faq-item summary::marker {
  content: "";
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary::after {
  content: "+";
  font-size: var(--ac-fs-5, 1.5rem);
  color: var(--wp--preset--color--accent);
  transition: transform 0.25s ease;
  flex: 0 0 auto;
  line-height: 1;
}
.faq-item[open] summary::after {
  transform: rotate(45deg);
}
.faq-item p {
  margin-top: 0.75rem;
}

/* ==========================================================================
   Bande interstitielle "Prendre rendez-vous" : rupture de rythme délibérée
   (fond plein "primary", pas de photo — la photo de façade utilisée au
   round précédent était trop petite pour un fond plein cadre et rendait
   flou, au point de ressembler à un bug plutôt qu'à un choix). Motif
   graphique assumé : rayures diagonales fines en texture + un large motif
   arqué, plus affirmé qu'un simple cercle discret. Cartes de contact
   simplifiées en texte pur (plus de badge d'icône).
   ========================================================================== */
.rdv-band {
  position: relative;
  overflow: hidden;
  /* Fond photo ajouté round "décorations" (01/10/2026, suite 19) —
     remplace le dégradé CSS (30/09/2026, suite 15) par une vraie photo
     de texture (bronze + monogramme "MD", fournie par le client) : un
     fond conçu plutôt qu'une approximation en dégradé. Dégradé sombre
     superposé (mêmes teintes que l'ancien fond) pour garantir le
     contraste du texte blanc par-dessus, quelle que soit la zone de la
     photo derrière chaque bloc de texte. Rayures diagonales retirées
     (redondantes avec la texture déjà présente dans la photo). */
  background-image: linear-gradient(120deg, color-mix(in srgb, var(--wp--preset--color--ink) 60%, transparent) 0%, color-mix(in srgb, var(--wp--preset--color--ink) 32%, transparent) 45%, color-mix(in srgb, var(--wp--preset--color--ink) 55%, transparent) 100%), var(--atelier-texture-dark, none);
  background-size: cover;
  background-position: center;
}
/* Opacite abaissee round "decorations" (01/10/2026, suite 19) : la photo
   de fond ajoutee ce round porte deja sa propre ligne diagonale doree et
   son monogramme "MD" (voir .rdv-band ci-dessus) -- ce motif SVG fait
   desormais simple echo discret plutot que motif principal, pour ne pas
   concurrencer visuellement la photo. */
.rdv-decoration {
  position: absolute;
  z-index: 0;
  top: 50%;
  right: -180px;
  transform: translateY(-50%);
  width: 620px;
  height: 620px;
  opacity: 0.1;
  pointer-events: none;
}
.rdv-decoration svg {
  display: block;
  width: 100%;
  height: 100%;
}
.rdv-band .wp-block-columns {
  position: relative;
  z-index: 1;
}
.rdv-eyebrow {
  opacity: 0.78;
}
.rdv-contact {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}
.rdv-contact-item p {
  /* Marges natives de paragraphe remises à zéro : c'est le "gap" ci-dessous
     qui règle l'espace libellé/valeur (sinon ~60px entre "TÉLÉPHONE" et le
     numéro, constaté le 01/10/2026). */
  margin: 0;
}
.rdv-contact-item {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}
.rdv-contact-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.rdv-contact-label {
  font-size: var(--ac-fs-1, 0.75rem);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.65);
}
.rdv-contact-value {
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--ac-fs-4, 1.35rem);
}
.rdv-contact-value a {
  color: var(--wp--preset--color--surface);
  text-decoration: none;
}
@media (max-width: 781px) {
  .rdv-decoration {
    width: 360px;
    height: 360px;
    right: -140px;
  }
}

/* --- Formulaire de contact, bloc "06 — Contact" dédié (round "évolutions",
   03/10/2026 ; déplacé hors de la bande #rdv le même jour -- deux tentatives
   d'intégration en colonnes dans #rdv ont été refusées par le client,
   "mieux vaut 2 blocs que 1 moche"). Styles pensés comme un module autonome
   (.contact-form-*) réutilisable par d'autres sections ou thèmes du moteur
   -- rien ici ne dépend d'une bande précise, seulement des tokens de
   couleur globaux, donc copiable tel quel pour un futur projet qui voudrait
   le même bloc de contact en fin de page. Mise en page volontairement
   simple (un seul panneau centré, empilé verticalement : titre+intro au-
   dessus, formulaire en dessous) après deux échecs de composition en
   colonnes -- voir design-system.md. */
/* Composition centrée (v1.9.0) : le numéro de section, le titre, l'intro
   et la carte partagent désormais le même axe. Avant, le numéro restait
   calé sur la grille de 1200px, le titre sur une colonne de 720px et la
   carte sur 640px : trois bords gauches différents. */
.contact-section .contact-head {
  text-align: center;
}
.contact-section .section-eyebrow--numbered {
  padding-left: 0;
}
.contact-section .section-eyebrow--numbered::before {
  position: static;
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.7rem;
  transform: none;
}
.contact-section .has-atelier-underline::after {
  left: 50%;
  transform: translateX(-50%);
}
.contact-form-row--consent input[type="checkbox"] {
  accent-color: var(--wp--preset--color--primary);
}
.contact-form-wrap {
  max-width: 640px;
  margin: 0 auto;
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 8px;
  padding: 1.75rem;
}
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.contact-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.1rem;
}
.contact-form-grid .contact-form-row:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}
.contact-form-row {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.contact-form-row label {
  font-size: var(--ac-fs-1, 0.8rem);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--wp--preset--color--ink-soft);
}
.contact-form-row input[type="text"],
.contact-form-row input[type="email"],
.contact-form-row input[type="tel"],
.contact-form-row input[type="number"],
.contact-form-row input[type="date"],
.contact-form-row select,
.contact-form-row textarea {
  font: inherit;
  font-size: var(--ac-fs-3, 1rem);
  color: var(--wp--preset--color--ink);
  background: var(--wp--preset--color--paper);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 4px;
  padding: 0.65rem 0.8rem;
  width: 100%;
}
.contact-form-row input::placeholder,
.contact-form-row textarea::placeholder {
  color: var(--wp--preset--color--ink-soft);
  opacity: 0.7;
}
.contact-form-row textarea {
  resize: vertical;
  min-height: 6.5rem;
}
.contact-form-row--consent label {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: var(--ac-fs-2, 0.85rem);
  text-transform: none;
  letter-spacing: normal;
  color: var(--wp--preset--color--ink-soft);
}
.contact-form-row--consent input[type="checkbox"] {
  margin-top: 0.2rem;
  flex-shrink: 0;
}
.contact-form-row input[type="file"] { font: inherit; font-size: var(--ac-fs-2, 0.9rem); }
.contact-form-hint { font-size: var(--ac-fs-1, 0.75rem); color: var(--wp--preset--color--ink-soft); }
/* Mention d'information sous la case (RGPD, 07/10/2026) */
.contact-form-note {
  margin: -0.4rem 0 0;
  font-size: var(--ac-fs-2, 0.85rem);
  line-height: 1.55;
  color: var(--wp--preset--color--ink-soft);
}
.contact-form-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.contact-form-submit {
  align-self: flex-start;
  border: none;
  cursor: pointer;
  font: inherit;
}
.contact-form-submit:disabled {
  opacity: 0.6;
  cursor: default;
}
.contact-form-status {
  font-size: var(--ac-fs-2, 0.9rem);
  padding: 0.7rem 0.9rem;
  border-radius: 4px;
}
.contact-form-status.is-success {
  background: rgba(132, 176, 129, 0.16);
  border: 1px solid rgba(132, 176, 129, 0.45);
  color: var(--wp--preset--color--ink);
}
.contact-form-status.is-error {
  background: rgba(196, 101, 85, 0.14);
  border: 1px solid rgba(196, 101, 85, 0.45);
  color: var(--wp--preset--color--ink);
}
/* Honeypot : hors-écran plutôt que display:none -- certains bots lisent
   les styles inline/calculés pour ignorer les display:none mais ratent
   plus souvent un positionnement hors-écran. Toujours accessible-inerte :
   aria-hidden + tabindex="-1" + autocomplete="off" sur le champ (voir le
   markup dans build-dujancourt-v1.py) pour qu'aucun lecteur d'écran ni
   navigation clavier ne puisse jamais l'atteindre. */
.contact-form-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
@media (max-width: 781px) {
  .contact-form-wrap {
    padding: 1.25rem;
  }
  .contact-form-grid {
    grid-template-columns: 1fr;
  }
  .contact-form-grid .contact-form-row:last-child:nth-child(odd) {
    grid-column: auto;
  }
}

/* ==========================================================================
   Pied de page : chiffres-clés intégrés ("19 ans / 6 domaines / Auxerre")
   au lieu d'une bande "ink" séparée entre les chiffres et le pied — les
   deux étaient jusque-là deux aplats sombres consécutifs, redondants.
   ========================================================================== */
/* Vignette de fond ajoutée round "décorations" (30/09/2026, suite 15) :
   un léger dégradé radial plutôt qu'un aplat "ink" uniforme, pour donner
   un peu de profondeur au pied de page sans y ajouter de photo. */
#apropos {
  background-image: radial-gradient(ellipse 900px 500px at 50% -10%, color-mix(in srgb, var(--wp--preset--color--accent) 16%, transparent), transparent 65%);
}

.footer-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.5rem;
  padding-bottom: var(--wp--preset--spacing--lg) !important;
  margin-bottom: var(--wp--preset--spacing--lg) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.footer-stat {
  min-width: 140px;
  text-align: center;
}
.footer-stat-number {
  font-size: var(--ac-fs-6, clamp(1.9rem, 1.6rem + 1.2vw, 2.5rem));
  color: var(--wp--preset--color--accent);
  line-height: 1;
  margin: 0 !important;
}
.footer-stat-label {
  margin-top: 0.4rem !important;
  margin-bottom: 0 !important;
  opacity: 0.7;
  font-size: var(--ac-fs-2, 0.85rem);
}

/* ==========================================================================
   Widgets flottants : bouton d'appel + flèche "remonter en haut"
   (priorités retenues le 01/10/2026). Imprimés par functions.php
   (wp_footer, hors contenu de page) — voir ce fichier pour le détail des
   choix (pastille texte plutôt qu'icône circulaire, flèche masquée par
   défaut).
   ========================================================================== */

.call-float {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.15rem;
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--surface) !important;
  border-radius: 999px;
  text-decoration: none;
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--ac-fs-2, 0.85rem);
  font-weight: 500;
  letter-spacing: 0.01em;
  box-shadow: 0 6px 20px color-mix(in srgb, var(--wp--preset--color--ink) 22%, transparent);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.call-float:hover,
.call-float:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--wp--preset--color--ink) 28%, transparent);
}
.call-float-icon {
  width: 0.85rem;
  height: 0.85rem;
  flex: none;
}

.back-to-top {
  position: fixed;
  right: 1.25rem;
  bottom: 5rem;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 999px;
  color: var(--wp--preset--color--primary);
  text-decoration: none;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--wp--preset--color--ink) 12%, transparent);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.back-to-top:hover,
.back-to-top:focus-visible {
  border-color: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--accent);
}
.back-to-top svg {
  width: 1rem;
  height: 1rem;
}

@media (max-width: 781px) {
  .call-float {
    right: 1rem;
    bottom: 1rem;
    padding: 0.7rem 0.85rem;
  }
  /* Place limitée en mobile : icône seule, le numéro reste accessible via
     aria-label et le lien tel: reste fonctionnel au clic. */
  .call-float-number {
    display: none;
  }
  .back-to-top {
    right: 1rem;
    bottom: 4.25rem;
    width: 2.5rem;
    height: 2.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .back-to-top {
    transition: opacity 0.01ms;
  }
  .call-float {
    transition: none;
  }
  .call-float:hover,
  .call-float:focus-visible {
    transform: none;
  }
}

/* ==========================================================================
   Bandeau de consentement (module CookieYes / "cookie-law-info") aux
   couleurs du site — v1.9.0, 01/10/2026. Par défaut le module affiche des
   boutons bleus (#1863DC) et un bouton rond "revoir mes choix" bleu
   (#0056A7) qui jurent avec toute charte. Ses couleurs sont posées en
   attribut style="" sur chaque bouton : d'où les !important, seul moyen de
   les surcharger depuis le thème. Tout passe par les tokens de marque,
   donc ce bloc se copie tel quel d'un client à l'autre. Les TEXTES du
   bandeau (langue, formulation) se règlent, eux, dans l'admin du module.
   ========================================================================== */
.cky-consent-container,
.cky-modal,
.cky-btn-revisit-wrapper {
  font-family: var(--wp--preset--font-family--body) !important;
}
.cky-consent-container .cky-notice .cky-title,
.cky-preference-center .cky-preference-title {
  font-family: var(--wp--preset--font-family--heading) !important;
  font-weight: 600;
  color: var(--wp--preset--color--ink) !important;
}
.cky-consent-container .cky-consent-bar,
.cky-preference-center {
  border-radius: 6px !important;
  border-color: var(--wp--preset--color--line) !important;
}
.cky-notice-des,
.cky-preference-content-wrapper,
.cky-accordion-header-des {
  color: var(--wp--preset--color--ink-soft) !important;
}
.cky-btn {
  border-radius: 4px !important;
  font-family: inherit !important;
  font-weight: 500 !important;
}
.cky-btn.cky-btn-accept,
.cky-btn.cky-btn-preferences {
  color: var(--wp--preset--color--surface) !important;
  background-color: var(--wp--preset--color--primary) !important;
  border-color: var(--wp--preset--color--primary) !important;
}
.cky-btn.cky-btn-reject,
.cky-btn.cky-btn-customize {
  color: var(--wp--preset--color--primary) !important;
  background-color: transparent !important;
  border-color: var(--wp--preset--color--primary) !important;
}
.cky-notice-des a.cky-policy,
.cky-notice-des button.cky-policy,
.cky-preference-content-wrapper .cky-show-desc-btn {
  color: var(--wp--preset--color--primary) !important;
}
.cky-switch input[type="checkbox"]:checked {
  background: var(--wp--preset--color--primary) !important;
}
.cky-btn-revisit-wrapper {
  background-color: var(--wp--preset--color--primary) !important;
}
/* Sur grand écran, le bandeau (440px, coin bas-gauche par défaut) masquait
   les boutons d'action du hero au premier affichage : déplacé dans le coin
   bas-droit, au-dessus de la partie image du hero. */
@media (min-width: 782px) {
  .cky-consent-container.cky-box-bottom-left {
    left: auto !important;
    right: 40px !important;
  }
}

/* ==========================================================================
   KIT D'ANIMATIONS « l'encre et le papier » (v1.10.0, 01/10/2026)
   Neuf modules réutilisables d'un site à l'autre (classes génériques, couleurs
   par tokens). Deux règles pour tous :
   1. Rien n'est caché sans JavaScript : les états "avant animation" sont
      gatés par html.motion-ready, posée par assets/motion.js. Seules les
      animations d'entrée du hero sont en CSS pur, et leur état de départ
      n'existe QUE dans les @keyframes (si l'animation ne joue pas, le texte
      est visible).
   2. prefers-reduced-motion: reduce => tout est figé dans l'état final
      (motion.js ne pose pas motion-ready, les @keyframes sont sous
      media no-preference).
   ========================================================================== */

/* --- M1. Hero : titre ligne à ligne, soulignement tracé à l'encre, photo
   qui se pose lentement. --- */
.hero-title .line {
  display: block;
  overflow: hidden;
  /* marge de sécurité pour l'italique et les jambages, compensée */
  padding: 0 0.14em 0.12em 0;
  margin: 0 -0.14em -0.12em 0;
}
.hero-title .line > span {
  display: inline-block;
}
.ink-underline {
  position: relative;
  white-space: nowrap;
}
.ink-underline::after {
  content: "";
  position: absolute;
  left: -3%;
  right: -5%;
  bottom: -0.06em;
  height: 0.3em;
  background: var(--wp--preset--color--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath d='M3 15 C 46 7, 112 4, 197 10' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round'/%3E%3Cpath d='M14 19 C 64 14, 124 13, 182 16' fill='none' stroke='%23000' stroke-opacity='.55' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath d='M3 15 C 46 7, 112 4, 197 10' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round'/%3E%3Cpath d='M14 19 C 64 14, 124 13, 182 16' fill='none' stroke='%23000' stroke-opacity='.55' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-title .line > span {
    animation: m-line-up 1.05s cubic-bezier(0.2, 0.75, 0.15, 1) both;
  }
  .hero-title .line:nth-child(2) > span {
    animation-delay: 0.14s;
  }
  .hero-content > p:first-child {
    animation: m-fade-up 0.9s cubic-bezier(0.2, 0.75, 0.15, 1) both;
  }
  .hero-content > h1 + p {
    animation: m-fade-up 0.9s 0.45s cubic-bezier(0.2, 0.75, 0.15, 1) both;
  }
  .hero-content > .wp-block-buttons {
    animation: m-fade-up 0.9s 0.6s cubic-bezier(0.2, 0.75, 0.15, 1) both;
  }
  .ink-underline::after {
    animation: m-ink 1.1s 1s cubic-bezier(0.6, 0.1, 0.2, 1) both;
  }
  .hero-bg {
    animation: m-settle 2.8s cubic-bezier(0.2, 0.6, 0.2, 1) both;
  }
}
@keyframes m-line-up {
  from { transform: translateY(105%); }
}
@keyframes m-fade-up {
  from { opacity: 0; transform: translateY(16px); }
}
@keyframes m-ink {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}
@keyframes m-settle {
  from { transform: scale(1.08); }
}
@keyframes m-draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

/* --- M2. Photo dévoilée comme une feuille qu'on soulève (.motion-curtain,
   posée sur le cadre de l'image ; motion.js ajoute .is-inview). --- */
html.motion-ready .motion-curtain {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.25s cubic-bezier(0.7, 0, 0.2, 1);
}
html.motion-ready .motion-curtain img {
  transform: scale(1.12);
  transition: transform 1.8s cubic-bezier(0.2, 0.6, 0.2, 1);
}
html.motion-ready .motion-curtain.is-inview {
  clip-path: inset(0 0 0 0);
}
html.motion-ready .motion-curtain.is-inview img {
  transform: none;
}

/* --- M3. Tracés dessinés : au défilement (.draw-on-scroll, progression
   --draw de 0 à 1 calculée par motion.js) ou à l'apparition
   (.draw-on-view). Chaque tracé porte pathLength="1". --- */
html.motion-ready .draw-on-scroll path,
html.motion-ready .draw-on-scroll line {
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--draw, 1));
}
.draw-on-view path {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
html.motion-ready .draw-on-view path {
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 2.2s cubic-bezier(0.65, 0, 0.35, 1);
}
html.motion-ready .draw-on-view path:nth-child(2) {
  transition-delay: 0.85s;
}
html.motion-ready .draw-on-view.is-inview path {
  stroke-dashoffset: 0;
}
.rdv-decoration.draw-on-scroll {
  opacity: 0.22;
}

/* --- M4. Domaines : icône au trait qui se dessine, balayage bronze au
   survol, médaillon qui suit le curseur (créé par motion.js, souris
   uniquement, écrans >= 1080px). --- */
.editorial-row {
  position: relative;
  isolation: isolate;
  align-items: flex-start;
}
.editorial-row::before {
  content: "";
  position: absolute;
  inset: 0 -0.75rem;
  z-index: -1;
  background: linear-gradient(90deg, color-mix(in srgb, var(--wp--preset--color--accent) 10%, transparent), color-mix(in srgb, var(--wp--preset--color--accent) 0%, transparent) 70%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.1, 1);
}
.editorial-row:hover::before {
  transform: scaleX(1);
}
.editorial-icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  color: var(--wp--preset--color--accent);
}
.line-icon {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.line-icon path {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.editorial-row-body h3 .editorial-num {
  display: inline-block;
  min-width: 0;
  margin-right: 0.55rem;
  font-size: var(--ac-fs-1, 0.72rem);
  vertical-align: 0.2em;
}
.editorial-list {
  position: relative;
}
.domain-cursor {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 112px;
  height: 112px;
  margin: -132px 0 0 28px;
  pointer-events: none;
}
.domain-cursor-inner {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--wp--preset--color--surface);
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 45%, transparent);
  color: var(--wp--preset--color--accent);
  box-shadow: 0 18px 40px -18px color-mix(in srgb, var(--wp--preset--color--ink) 40%, transparent);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.2, 0.7, 0.1, 1);
}
.domain-cursor.is-active .domain-cursor-inner {
  opacity: 1;
  transform: scale(1);
}
.domain-cursor .line-icon {
  width: 54px;
  height: 54px;
}
@media (prefers-reduced-motion: no-preference) {
  .editorial-row:hover .editorial-icon .line-icon path,
  .domain-cursor .line-icon path {
    animation: m-draw 1s cubic-bezier(0.65, 0, 0.35, 1) both;
  }
}
@media (max-width: 781px) {
  .editorial-icon {
    width: 32px;
    height: 32px;
  }
}

/* --- M5. Bandeau typographique défilant. --- */
.marquee-band {
  overflow: hidden;
  padding-left: 0 !important;
  padding-right: 0 !important;
  border-top: 1px solid var(--wp--preset--color--line);
  border-bottom: 1px solid var(--wp--preset--color--line);
}
.marquee-band > .marquee {
  display: flex;
  width: max-content;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.marquee-track {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  padding-right: clamp(1.25rem, 3vw, 2.5rem);
}
.marquee-item {
  font-family: var(--wp--preset--font-family--heading);
  font-style: italic;
  font-size: var(--ac-fs-7, clamp(2.2rem, 1.2rem + 4.5vw, 5.25rem));
  line-height: 1.15;
  color: var(--wp--preset--color--ink);
  white-space: nowrap;
}
.marquee-item.is-outline {
  color: transparent;
  -webkit-text-stroke: 1px var(--wp--preset--color--accent);
}
.marquee-sep {
  color: var(--wp--preset--color--accent);
  font-size: var(--ac-fs-6, clamp(1.4rem, 1rem + 2vw, 2.6rem));
}
@media (prefers-reduced-motion: no-preference) {
  .marquee-band > .marquee {
    animation: m-marquee 50s linear infinite;
  }
  .marquee-band:hover > .marquee {
    animation-play-state: paused;
  }
}
@keyframes m-marquee {
  to { transform: translateX(-50%); }
}

/* --- M6. Compteurs (footer) : motion.js anime de 0 à data-count à
   l'apparition ; sans JS la valeur finale est déjà dans le HTML. --- */
.footer-stat-number {
  font-variant-numeric: tabular-nums;
}

/* --- M7. Matière : grain de papier sur les bandes sombres + halo de
   lumière qui suit la souris dans la bande #rdv. --- */
.rdv-band::after,
#apropos::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.09;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.rdv-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(560px circle at var(--mx, 70%) var(--my, 40%), color-mix(in srgb, var(--wp--preset--color--accent) 20%, transparent), transparent 62%);
  transition: opacity 0.5s ease;
}
.rdv-band.is-lit::before {
  opacity: 1;
}
#apropos {
  position: relative;
}
#apropos > :not(.footer-signature) {
  position: relative;
  z-index: 1;
}

/* --- M8. Signature « MD » tracée en haut du pied de page (le
   monogramme du cabinet, redessiné en trait fin à partir du logo). --- */
.footer-signature {
  position: absolute !important;
  z-index: 0;
  top: var(--wp--preset--spacing--2xl);
  right: max(var(--wp--preset--spacing--md), calc((100% - 1200px) / 2));
  width: clamp(140px, 19vw, 270px);
  max-width: none !important;
  margin: 0 !important;
  color: var(--wp--preset--color--accent);
  opacity: 0.6;
  pointer-events: none;
}
.footer-signature svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
@media (max-width: 1079px) {
  .footer-signature {
    top: var(--wp--preset--spacing--md);
    width: 104px;
    opacity: 0.45;
  }
}

/* --- M9. Pied de page « en rideau » : il est découvert sous la page qui
   remonte, au lieu d'arriver à la suite. Seulement sur grand écran, et si
   la fenêtre est assez haute pour l'afficher en entier. --- */
@media (min-width: 1080px) and (min-height: 760px) and (prefers-reduced-motion: no-preference) {
  .wp-block-post-content > .alignfull:not(#apropos):not(.site-header) {
    position: relative;
    z-index: 1;
  }
  .wp-block-post-content > #apropos {
    position: sticky;
    bottom: 0;
    z-index: 0;
  }
}

/* ==========================================================================
   Parties de modèle communes (v1.12.0, 01/10/2026) — en-tête et pied de page
   sortis du contenu des pages (gabarit « blank » : header / main / footer).
   ========================================================================== */
/* En-tête collant : c'est l'enveloppe de la partie de modèle qui colle (le
   groupe intérieur, aussi haut que son parent, ne pourrait pas coller). */
.site-header-part {
  position: sticky;
  top: var(--wp-admin--admin-bar--height, 0px);
  z-index: 50;
}
/* Pied de page « en rideau » (M9) : la page, opaque, remonte et découvre le
   pied resté collé en bas. */
@media (min-width: 1080px) and (min-height: 760px) and (prefers-reduced-motion: no-preference) {
  .wp-site-blocks > main {
    position: relative;
    z-index: 1;
    background: var(--wp--preset--color--surface);
  }
  .site-footer-part {
    position: sticky;
    bottom: 0;
    z-index: 0;
  }
}

/* ==========================================================================
   Composants éditables (v1.12.0, 01/10/2026) — équivalents en blocs natifs
   de ce qui était en bloc HTML (liste des domaines, coordonnées, liste à
   tirets, actualités, pastilles, sommaire). Mêmes classes qu'avant : seuls
   les réglages propres aux nouveaux éléments sont ici.
   ========================================================================== */
/* Ligne de domaine : toute la ligne est cliquable quand le titre est un lien. */
.editorial-row-body > h3 a { color: inherit; text-decoration: none; }
.editorial-row.has-row-link h3 a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.editorial-row.has-row-link:focus-within { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 4px; }
.editorial-row > .editorial-icon, .editorial-row > .editorial-row-arrow { flex: 0 0 auto; }
.editorial-row-body > * { margin-top: 0; }

/* Coordonnées (bande « Prendre rendez-vous ») et liste à tirets : marges
   natives des paragraphes neutralisées, l'espacement vient du gap. */
.rdv-contact-item > p, .reassurance-item > p { margin: 0 !important; }

/* Actualités (ex-styles en ligne) */
.news-split-item > * { margin: 0; }
.news-cat { text-transform: uppercase; letter-spacing: 0.06em; color: var(--atelier-accent-strong); font-size: var(--ac-fs-1, 0.8rem); }
.news-title { margin-top: 0.5rem !important; }
.news-desc { margin-top: 0.5rem !important; }
.news-link { margin-top: 0.75rem !important; }
.news-link a { color: var(--wp--preset--color--primary); text-decoration: none; }

/* Pastilles « autres domaines » : boutons natifs habillés en pastilles. */
.ac-chips { gap: 0.75rem !important; margin-top: var(--wp--preset--spacing--lg) !important; }
.ac-chips .ac-chip .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.2rem;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 999px;
  background: transparent;
  color: var(--wp--preset--color--ink);
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--ac-fs-3, 1.05rem);
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.ac-chips .ac-chip .wp-block-button__link::after { content: "→"; color: var(--wp--preset--color--accent); transition: transform 0.25s ease; }
.ac-chips .ac-chip .wp-block-button__link:hover,
.ac-chips .ac-chip .wp-block-button__link:focus-visible { background: var(--wp--preset--color--ink); border-color: var(--wp--preset--color--ink); color: var(--wp--preset--color--surface); }
.ac-chips .ac-chip .wp-block-button__link:hover::after { transform: translateX(3px); }

/* Sommaire des pages légales : liste native. */
.ac-toc ol { margin: 0 !important; padding: 0 !important; }
.ac-toc li { margin: 0; }

/* --- Photo de fond du hero en bloc Image (v1.12.0) : même rendu que
   l'ancien bloc HTML, le voile sombre et le grain passent en ::after du
   bloc (plus d'élément <span> dédié possible dans un bloc Image). --- */
.hero-bg.wp-block-image::after {
  opacity: 1;
  mix-blend-mode: normal;
  z-index: 1;
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.025) 0.5px, transparent 0.5px),
    linear-gradient(100deg, color-mix(in srgb, var(--wp--preset--color--ink) 92%, transparent) 0%, color-mix(in srgb, var(--wp--preset--color--ink) 72%, transparent) 32%, color-mix(in srgb, var(--wp--preset--color--ink) 32%, transparent) 62%, color-mix(in srgb, var(--wp--preset--color--ink) 12%, transparent) 100%);
  background-size: 3px 3px, auto;
}
.footer-stats > .footer-stat > p { margin: 0; }

/* Socle (02/10/2026) : en-tête provisoire du thème générique, avant que le
   moteur ne génère celui du site — liens du menu espacés. */
.site-header .wp-block-navigation__container,
.site-header .wp-block-page-list { gap: 0.4rem 1.5rem; }

/* ==========================================================================
   Articles (v2.1.0, 02/10/2026 — round 37) : page d'article et listes.
   Colonne de lecture de 720 px, intertitres aérés, FAQ en accordéon (même
   style que les pages : details.faq-item), encadrés « À retenir », cartes
   d'articles. Tout passe par les rôles du thème (couleurs, polices).
   ========================================================================== */
.ac-post-hero .ac-post-kicker { gap: 0.4rem 1rem; align-items: baseline; }
.ac-post-hero .ac-post-kicker > * { margin: 0 !important; }
.ac-post-cat, .ac-card-cat { font-size: var(--ac-fs-1, 0.75rem); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.ac-post-hero .ac-post-cat a { color: inherit; text-decoration: none; opacity: 0.8; }
.ac-post-head > * { margin-left: 0; margin-right: 0; }
.ac-post-title { margin-top: var(--wp--preset--spacing--sm) !important; max-width: 26ch; text-wrap: balance; }
.ac-post-meta { gap: 0.25rem 1.25rem; margin-top: var(--wp--preset--spacing--md) !important; font-size: var(--ac-fs-2, 0.875rem); opacity: 0.82; }
.ac-post-meta > *, .ac-post-updated > * { margin: 0 !important; }
.ac-post-updated { gap: 0.3em; }
.ac-post-updated:not(:has(time)) { display: none; }
.ac-post-cover { margin-bottom: var(--wp--preset--spacing--xl) !important; }
.ac-post-cover img { border-radius: 2px; }
.ac-article { font-size: var(--ac-fs-3, 1.0625rem); line-height: 1.75; }
.ac-article > * + * { margin-top: 1.1em; }
.ac-article > :is(h2, h3) { margin-top: 2.2em; text-wrap: balance; }
.ac-article > h2 { font-size: var(--wp--preset--font-size--large); }
.ac-article > h3 { font-size: var(--wp--preset--font-size--medium); }
.ac-article > p:first-child { font-size: var(--ac-fs-4, 1.1875rem); line-height: 1.65; color: var(--wp--preset--color--ink); }
.ac-article a:not(.wp-element-button) { color: var(--wp--preset--color--primary); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ac-article ul.wp-block-list, .ac-article ol.wp-block-list { padding-left: 1.25em; }
.ac-article ul.wp-block-list > li::marker { color: var(--atelier-accent-strong); }
.ac-article li + li { margin-top: 0.4em; }
.ac-article blockquote.wp-block-quote { margin-left: 0; padding: 0.25em 0 0.25em 1.25em; border-left: 2px solid var(--wp--preset--color--accent); font-family: var(--wp--preset--font-family--heading); font-size: var(--ac-fs-3, 1.15em); }
.ac-article blockquote.wp-block-quote cite { display: block; margin-top: 0.5em; font-family: var(--wp--preset--font-family--body); font-size: var(--ac-fs-1, 0.8rem); font-style: normal; letter-spacing: 0.04em; color: var(--wp--preset--color--ink-soft); }
.ac-article .ac-callout { padding: var(--wp--preset--spacing--md) var(--wp--preset--spacing--lg); background: var(--wp--preset--color--paper); border-top: 2px solid var(--wp--preset--color--accent); }
.ac-article .ac-callout > * { margin: 0; }
.ac-article .ac-callout > * + * { margin-top: 0.6em; }
.ac-article .ac-callout-title { font-size: var(--ac-fs-1, 0.75rem); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--atelier-accent-strong); }
.ac-article .wp-block-table { overflow-x: auto; }
.ac-article .wp-block-table table { border-collapse: collapse; width: 100%; font-size: var(--ac-fs-2, 0.95rem); font-variant-numeric: tabular-nums; }
.ac-article .wp-block-table :is(th, td) { padding: 0.6em 0.8em; border-bottom: 1px solid var(--wp--preset--color--line); text-align: left; }
.ac-article .wp-block-table th { font-weight: 600; }
.ac-article .ac-faq-title { margin-top: 2.4em; }
.ac-article .wp-block-separator { margin: 2.4em auto; border: 0; border-top: 1px solid var(--wp--preset--color--line); width: 100%; }
.ac-article .ac-sources { font-size: var(--ac-fs-2, 0.85rem); color: var(--wp--preset--color--ink-soft); }
.ac-post-cta-inner > * { margin: 0; }
.ac-post-cta .ac-post-cta-text { margin-top: 0.75rem; max-width: 60ch; font-size: var(--ac-fs-3, 1.0625rem); }
.ac-post-cta .wp-block-buttons { margin-top: var(--wp--preset--spacing--md); }
.ac-post-cards { gap: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--lg) !important; margin-top: var(--wp--preset--spacing--lg); }
.ac-post-cards > li { display: flex; flex-direction: column; gap: 0.5rem; }
.ac-post-cards > li > * { margin: 0 !important; }
.ac-post-cards .wp-block-post-featured-image { margin-bottom: 0.5rem !important; overflow: hidden; }
.ac-post-cards .wp-block-post-featured-image img { transition: transform 0.5s ease; }
.ac-post-cards > li:hover .wp-block-post-featured-image img { transform: scale(1.03); }
.ac-card-cat a { color: var(--atelier-accent-strong); text-decoration: none; }
.ac-card-title a { color: var(--wp--preset--color--ink); text-decoration: none; }
.ac-card-title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ac-card-excerpt { color: var(--wp--preset--color--ink-soft); font-size: var(--ac-fs-2, 0.95rem); }
.ac-card-excerpt .wp-block-post-excerpt__more-text { display: none; }
.ac-card-date { font-size: var(--ac-fs-1, 0.8rem); color: var(--wp--preset--color--ink-soft); }
.ac-posts .wp-block-query-pagination { margin-top: var(--wp--preset--spacing--xl); gap: 1rem; }
@media (max-width: 781px) {
  .ac-post-cards { grid-template-columns: 1fr !important; }
  .ac-article { font-size: var(--ac-fs-3, 1rem); }
}
@media (prefers-reduced-motion: reduce) { .ac-post-cards .wp-block-post-featured-image img { transition: none; } }

/* Formulaire « Exercer mes droits » dans une page de texte légal (07/10/2026) :
   aligné sur la colonne de lecture plutôt que centré et plus large qu'elle. */
.ac-doc .contact-form-wrap { margin: var(--wp--preset--spacing--md, 1.5rem) 0 0; max-width: 40rem; }
.ac-doc .contact-form-grid { grid-template-columns: 1fr; }

/* Champ fichier (devis) : bouton assorti aux autres champs. */
.contact-form-row input[type="file"]::file-selector-button {
  font: inherit;
  font-weight: 600;
  margin-right: 0.8rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 4px;
  background: var(--wp--preset--color--surface);
  color: var(--wp--preset--color--ink);
  cursor: pointer;
}

/* Plan du site (08/10/2026) : bloc atelier-wp/plan-du-site. */
.atelier-plan { display: grid; gap: 2.5rem; }
.atelier-plan-titre { margin: 0 0 0.8rem !important; font-size: var(--ac-fs-4, 1.25rem) !important; }
.atelier-plan-liste, .atelier-plan-liste ul { list-style: none; margin: 0; padding: 0; }
.atelier-plan-liste ul { padding-left: 1.2rem; border-left: 1px solid var(--wp--preset--color--line, #e6e8ec); margin: 0.3rem 0 0.3rem 0.3rem; }
.atelier-plan-liste li { margin: 0.35rem 0; line-height: 1.5; }
.atelier-plan-liste a { text-decoration: none; }
.atelier-plan-liste a:hover { text-decoration: underline; }
.atelier-plan-date { font-size: var(--ac-fs-1, 0.8rem); opacity: 0.7; margin-left: 0.4rem; }

/* --- Formulaire « véhicule » : aide carte grise (16/10/2026, EURODOM) ------- */
.contact-form-row--large { grid-column: 1 / -1; }
.contact-form-code { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace !important; letter-spacing: 0.04em; text-transform: uppercase; }
.cg-aide { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-left: 0.35rem; padding: 0; border: 0; border-radius: 50%; background: var(--wp--preset--color--primary); color: var(--wp--preset--color--paper); font: 700 0.8125rem/1 var(--wp--preset--font-family--body); cursor: pointer; vertical-align: middle; }
.cg-aide[aria-expanded="true"] { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--ink); }
.cg-panneau { margin: 0 0 1.2rem; padding: 0.9rem; border: 1px solid var(--wp--preset--color--line); border-radius: 10px; background: var(--wp--preset--color--surface); }
.cg-panneau[hidden] { display: none; }
.cg-texte { margin: 0 0 0.6rem !important; font-size: 0.9375rem; font-weight: 600; }
.cg-panneau svg { display: block; width: 100%; height: auto; }
.cg-fond { fill: #f7fafc; stroke: #b8c6d4; }
.cg-entete { font: 600 12px var(--wp--preset--font-family--body); fill: #4b5b6c; letter-spacing: 0.06em; }
.cg-pied { font: 400 11px var(--wp--preset--font-family--body); fill: #4b5b6c; }
.cg-z rect { fill: #ffffff; stroke: #b8c6d4; }
.cg-z text { font: 500 12px ui-monospace, Menlo, Consolas, monospace; fill: #4b5b6c; }
.cg-z.is-vif rect { fill: #fff3d6; stroke: var(--wp--preset--color--accent); stroke-width: 2.5; }
.cg-z.is-vif text { fill: #0c1b2b; font-weight: 700; }