/*
 * Methode ART — Layout & Gutenberg structural fixes
 *
 * Single-file CSS, ecrit a la main, zero build step, zero framework.
 *
 * Principe :
 *   - Tokens design (couleurs, typo, spacing) vivent dans theme.json (SSOT
 *     derive de theme/src/design-tokens.css via sync-theme-from-tokens.js).
 *   - WordPress genere les utilities has-*-color / has-*-font-size / les
 *     custom properties --wp--preset--* automatiquement a partir de
 *     theme.json. Les patterns consomment ces slugs via les attributs natifs
 *     (backgroundColor, textColor, fontSize, fontFamily, style.spacing).
 *   - Ce fichier ne contient QUE des regles structurelles Gutenberg non
 *     couvertes par theme.json (fixes cascade, dimensions par defaut des
 *     blocs natifs, etat actif navigation).
 *
 * Regle absolue : zero `!important`. Specificite plate (1 classe ou 1 element
 * + pseudo-classe max). Si un conflit de cascade apparait, diagnostiquer la
 * source (editor styles, block supports, plugin tiers) au lieu de patcher.
 *
 * Ce fichier est charge via wp_enqueue_style() ET add_editor_style() pour
 * garantir Back = Front (cf. theme/functions.php).
 */

/* ==========================================================================
   STACKING — flush vertical entre blocs top-level
   Supprime l'espacement par defaut que WP ajoute entre frere-du-site, pour
   laisser les patterns gerer leur propre padding vertical (section-py).
   ========================================================================== */

.wp-site-blocks > * + * { margin-block-start: 0; }
.is-layout-constrained > .alignfull + .alignfull { margin-block-start: 0; }

/* Sections top-level des pages (patterns {slug}--*.php) : stacking flush.
   Le blockGap racine (24px) laissait un liseré du fond body entre chaque
   section alignfull. Chaque section gere son propre padding vertical
   (section-py) — aucun margin inter-sections necessaire.
   Exclut .methodeart-article (prose single post, marges gerees plus bas). */
.entry-content.wp-block-post-content:not(.methodeart-article) > * { margin-block-start: 0; }

/* ==========================================================================
   SEPARATOR — largeur 60px par defaut, full width via is-style-wide
   ========================================================================== */

.wp-block-separator:not(.is-style-wide) { width: 60px; max-width: 60px; }
.wp-block-separator.is-style-wide { width: 100%; max-width: 100%; }
.is-content-justification-center > .wp-block-separator { margin-inline: auto; }

/* ==========================================================================
   NAVIGATION — etat actif
   Hover gere dans theme.json > styles.elements.link.
   ========================================================================== */

.wp-block-navigation a[aria-current="page"] { color: var(--wp--preset--color--gold); }

/* ==========================================================================
   COLUMNS — egaliser la hauteur des cards imbriquees
   ========================================================================== */

.wp-block-columns > .wp-block-column { display: flex; flex-direction: column; }
.wp-block-columns > .wp-block-column > .wp-block-group { flex: 1; }

/* ==========================================================================
   ACCUEIL — règles structurelles spécifiques (page f0bvr)
   Aucune couleur/fontSize/spacing — tout passe par theme.json.
   ========================================================================== */

/* Hero — image media right (zone placeholder ou image future) */
.methodeart-hero__media { min-height: 320px; }
@media (min-width: 1024px) {
	.methodeart-hero__media { min-height: 820px; }
}

/* Hero — séparateurs typographiques */
.methodeart-rule--32 { width: 32px; max-width: 32px; height: 1px; }
.methodeart-rule--40 { width: 40px; max-width: 40px; height: 1px; }
.methodeart-rule--52 { width: 52px; max-width: 52px; height: 1px; }
.methodeart-rule--24 { width: 24px; max-width: 24px; height: 1px; }
.methodeart-rule--60 { width: 60px; max-width: 60px; height: 1px; }
/* Hero — gradient gold→transparent (largeur 48px) */
.methodeart-rule--48-grad {
	width: 48px; max-width: 48px; height: 1px; border: 0;
	background: linear-gradient(90deg, var(--wp--preset--color--gold) 0%, rgba(201,169,97,0) 100%);
}
/* CTA — gradient transparent→gold→transparent (largeur 80px) */
.methodeart-rule--80-grad {
	width: 80px; max-width: 80px; height: 1px; border: 0;
	background: linear-gradient(90deg, rgba(201,169,97,0) 0%, var(--wp--preset--color--gold) 50%, rgba(201,169,97,0) 100%);
	margin-inline: auto;
}

/* La Méthode A.R.T. — Hero image (proto ratio 300/380) */
.methodeart-lma-hero__image { max-width: 300px; margin-inline: auto; }
.methodeart-lma-hero__image img {
	width: 100%; height: auto; aspect-ratio: 300 / 380;
	object-fit: cover; display: block;
	border: 1px solid var(--wp--preset--color--gold-soft);
	border-radius: 2px;
	background: var(--wp--preset--color--card);
}

/* La Méthode A.R.T. — Posture photo (full-bleed gauche) */
.methodeart-lma-posture__photo { width: 100%; height: 100%; min-height: 320px; }
.methodeart-lma-posture__photo img {
	width: 100%; height: 100%; min-height: 320px;
	object-fit: cover; display: block;
}
@media (min-width: 1024px) {
	.methodeart-lma-posture__photo,
	.methodeart-lma-posture__photo img { min-height: 600px; }
}

/* La Méthode A.R.T. — icones lucide cards differenciateurs (mask-image)
 * Chaque icone est un <div> vide avec class methodeart-icon methodeart-icon--{name}
 * Le SVG est inline-encode en data: URI et applique en mask-image sur la couleur preset gold.
 */
.methodeart-icon {
	width: 28px; height: 28px; display: block;
	background-color: var(--wp--preset--color--gold);
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-position: center; mask-position: center;
	-webkit-mask-size: 28px 28px; mask-size: 28px 28px;
}
.methodeart-icon--layers   { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><polygon points='12 2 2 7 12 12 22 7 12 2'/><polyline points='2 17 12 22 22 17'/><polyline points='2 12 12 17 22 12'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><polygon points='12 2 2 7 12 12 22 7 12 2'/><polyline points='2 17 12 22 22 17'/><polyline points='2 12 12 17 22 12'/></svg>"); }
.methodeart-icon--wind     { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M9.59 4.59A2 2 0 1 1 11 8H2'/><path d='M17.73 2.73A2.5 2.5 0 1 1 19.5 7H2'/><path d='M14.5 19.5A2.5 2.5 0 1 0 12.83 16H2'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M9.59 4.59A2 2 0 1 1 11 8H2'/><path d='M17.73 2.73A2.5 2.5 0 1 1 19.5 7H2'/><path d='M14.5 19.5A2.5 2.5 0 1 0 12.83 16H2'/></svg>"); }
.methodeart-icon--sparkles { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l1.91 5.84L20 11l-6.09 2.16L12 19l-1.91-5.84L4 11l6.09-2.16z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l1.91 5.84L20 11l-6.09 2.16L12 19l-1.91-5.84L4 11l6.09-2.16z'/></svg>"); }
.methodeart-icon--message  { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z'/></svg>"); }
.methodeart-icon--timer    { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><line x1='10' y1='2' x2='14' y2='2'/><line x1='12' y1='14' x2='15' y2='11'/><circle cx='12' cy='14' r='8'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><line x1='10' y1='2' x2='14' y2='2'/><line x1='12' y1='14' x2='15' y2='11'/><circle cx='12' cy='14' r='8'/></svg>"); }
.methodeart-icon--shield   { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/><polyline points='9 12 11 14 15 10'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/><polyline points='9 12 11 14 15 10'/></svg>"); }

/* Chiffres — séparateurs verticaux entre colonnes (rgba alpha hors preset) */
.methodeart-chiffres__cols > .wp-block-column + .wp-block-column { position: relative; }
.methodeart-chiffres__cols > .wp-block-column + .wp-block-column::before {
	content: ''; position: absolute; left: 0; top: 50%;
	transform: translateY(-50%); width: 1px; height: 48px;
	background: rgba(201, 169, 97, 0.188); /* #c9a96130 */
	display: none;
}
@media (min-width: 768px) {
	.methodeart-chiffres__cols > .wp-block-column + .wp-block-column::before { display: block; }
}

/* Portrait — image cover ratio fixe */
.methodeart-portrait__photo { overflow: hidden; }
.methodeart-portrait__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 1024px) {
	.methodeart-portrait__photo { min-height: 640px; }
}

/* Tags — flex inline alignement */
.methodeart-tag { display: inline-flex; align-items: center; }

/* Témoignages — thumb video ratio + overlay play */
.methodeart-temoignage { overflow: hidden; }
.methodeart-temoignage__thumb { position: relative; }
.methodeart-temoignage__thumb::before {
	content: ''; position: absolute; top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 56px; height: 56px; border-radius: 50%;
	background: rgba(0, 0, 0, 0.667);
	border: 1px solid rgba(255, 255, 255, 0.2);
}
.methodeart-temoignage__thumb::after {
	content: ''; position: absolute; top: 50%; left: 50%;
	transform: translate(-40%, -50%);
	width: 0; height: 0;
	border-left: 14px solid #FFFFFF;
	border-top: 9px solid transparent;
	border-bottom: 9px solid transparent;
}

/* Avatar circulaire — taille fixe + centrage */
.methodeart-avatar { width: 28px; height: 28px; min-width: 28px; flex-shrink: 0; }

/* FAQ — chevron summary (compatible details natif) */
.methodeart-faq__item { list-style: none; }
.methodeart-faq__item summary { cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
/* Question FAQ : blanc ivoire + medium. Le <summary> n'est pas ciblable via
   attributs Gutenberg (core/details colore tout le bloc, reponses incluses) —
   sans cette regle il herite du texte body (trop discret sur fond sombre). */
.methodeart-faq__item summary { color: var(--wp--preset--color--ivory); font-weight: 500; }
.methodeart-faq__item summary::-webkit-details-marker { display: none; }
.methodeart-faq__item summary::after {
	content: '+'; font-size: 18px; color: var(--wp--preset--color--gold);
	flex-shrink: 0; transition: transform 0.2s ease;
}
.methodeart-faq__item[open] summary::after { content: '×'; }

/* Banner-dates — nav stack mobile (inline desktop déjà géré par flex-wrap) */
.methodeart-banner > .wp-block-buttons { flex-shrink: 0; }

/* ==========================================================================
   BLOG (page 9iCGj) — règles structurelles
   Aucune couleur/fontSize/spacing hardcodée — uniquement aspect-ratio,
   compteurs CSS, opacité décorative. Voir patterns/blog--*.php.
   ========================================================================== */

/* Decor-soft — opacité décorative (banner Sec-Articles 0.55, decor CTA 0.45).
 * Non exposable via theme.json (pas de preset opacity).
 */
.is-style-decor-soft img { opacity: 0.55; }
.methodeart-bl-cta-decor img { opacity: 0.45; }

/* Articles loop — numérotation 01..05.. via CSS counter
 * Le compteur incrémente sur chaque <li> de wp-block-post-template, et
 * continue naturellement quand le block methodeart/load-more append des <li>.
 */
.methodeart-bl-articles__list { counter-reset: art-num; }
.methodeart-bl-articles__list > li { counter-increment: art-num; }
.methodeart-bl-article__num::before { content: counter(art-num, decimal-leading-zero); }

/* Article — layout horizontal (num + thumb + content) avec stack mobile */
.methodeart-bl-article { flex-wrap: wrap; }
.methodeart-bl-article__num { min-width: 64px; flex-shrink: 0; }
.methodeart-bl-article__content { flex: 1; min-width: 240px; }
.methodeart-bl-article__thumb { flex-shrink: 0; max-width: 240px; }
.methodeart-bl-article__thumb img { aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 768px) {
	.methodeart-bl-article { flex-wrap: nowrap; }
}

/* Hero blog — image cadrage 640/412 */
.methodeart-bl-hero__image img { aspect-ratio: 640 / 412; object-fit: cover; }
@media (min-width: 1024px) {
	.methodeart-bl-hero { min-height: 580px; }
}

/* Hero blog — pastille initiales auteur (44x44 rond) */
.methodeart-bl-hero__author-photo { width: 44px; height: 44px; }
.methodeart-bl-hero__author-photo .wp-block-paragraph,
.methodeart-bl-hero__author-photo p { margin: 0; }

/* Articles — banner 1200x320 */
.methodeart-bl-articles__banner img { height: 320px; object-fit: cover; }

/* CTA — decor images 240px hauteur fixe */
.methodeart-bl-cta-decor img { height: 240px; object-fit: cover; }

/* Load More — bouton centré, gold border, transparent.
 * Le bouton est rendu par methodeart/load-more (plugin) — voir block render.php.
 */
.methodeart-load-more {
	display: inline-flex; align-items: center;
	gap: var(--wp--preset--spacing--10);
	padding: var(--wp--preset--spacing--14) var(--wp--preset--spacing--40);
	background: transparent;
	border: 1px solid var(--wp--preset--color--gold);
	border-radius: 1px;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--11);
	font-weight: 500;
	color: var(--wp--preset--color--gold);
	letter-spacing: 1.5px;
	cursor: pointer;
	transition: background 200ms ease, color 200ms ease;
}
.methodeart-load-more:hover,
.methodeart-load-more:focus-visible {
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--ink);
}
.methodeart-load-more[aria-busy="true"] { opacity: 0.6; cursor: wait; }
.methodeart-load-more__arrow { font-size: var(--wp--preset--font-size--sm); line-height: 1; }

/* ==========================================================================
   Contact — images figures (aspect-ratio + object-fit)
   ========================================================================== */
.methodeart-contact-hero__image { max-width: 300px; }
.methodeart-contact-hero__image img {
	width: 100%; height: auto; aspect-ratio: 300 / 380;
	object-fit: cover; display: block;
}
.methodeart-contact-form__image img {
	width: 100%; max-width: 720px; height: 200px;
	object-fit: cover; display: block; margin-inline: auto;
}
.methodeart-contact-coord__image img {
	width: 100%; height: 300px;
	object-fit: cover; display: block;
}

/* ==========================================================================
   Contact — Formulaire (champs HTML natifs, non exprimables en blocs core)
   Consomme uniquement les --wp--preset--* du theme.
   ========================================================================== */
.methodeart-form { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--24); width: 100%; max-width: 720px; margin-inline: auto; background: var(--wp--preset--color--card); border: 1px solid var(--wp--preset--color--gold-soft); border-radius: 2px; padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--48); }
.methodeart-form__row { display: grid; grid-template-columns: 1fr; gap: var(--wp--preset--spacing--20); }
.methodeart-form__field { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--8); }
.methodeart-form__label { font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--11); font-weight: 500; color: var(--wp--preset--color--cream-soft); letter-spacing: 0.5px; }
.methodeart-form__input,
.methodeart-form__select,
.methodeart-form__textarea {
	box-sizing: border-box; /* UA default = content-box sur input/textarea → +2px hauteur ; design WM2m9 = 44px total */
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--13);
	font-weight: 300;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--cream);
	border: 1px solid var(--wp--preset--color--gold-soft);
	border-radius: 2px;
	padding: 0 var(--wp--preset--spacing--14);
	height: 44px;
	width: 100%;
	outline: none;
}
.methodeart-form__textarea { height: 120px; padding: var(--wp--preset--spacing--14); resize: vertical; }
.methodeart-form__input::placeholder,
.methodeart-form__textarea::placeholder { color: var(--wp--preset--color--cream-faded); }
.methodeart-form__select:invalid { color: var(--wp--preset--color--cream-faded); }
.methodeart-form__submit {
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 1px;
	border: 0;
	border-radius: 1px;
	padding: var(--wp--preset--spacing--16) var(--wp--preset--spacing--24);
	width: 100%;
	cursor: pointer;
	transition: background-color .25s ease, transform .15s ease;
}
.methodeart-form__submit:hover { background: var(--wp--preset--color--gold-warm); }
.methodeart-form__submit:active { transform: translateY(1px); }
.methodeart-form__submit:focus-visible { outline: 2px solid var(--wp--preset--color--gold-warm); outline-offset: 2px; }
.methodeart-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px; height: 1px;
	overflow: hidden;
}
/* ALTCHA widget — theme via les custom props natives du composant (valeurs = tokens theme). */
.methodeart-form__altcha {
	--altcha-border-width: 1px;
	--altcha-border-radius: 2px;
	--altcha-color-base: var(--wp--preset--color--ink);
	--altcha-color-border: var(--wp--preset--color--gold-soft);
	--altcha-color-text: var(--wp--preset--color--cream-soft);
	--altcha-color-border-focus: var(--wp--preset--color--gold);
	--altcha-color-error-text: var(--wp--preset--color--cream-soft);
	--altcha-color-footer-bg: var(--wp--preset--color--card);
	--altcha-max-width: 100%;
	display: block;
	width: 100%;
}
.methodeart-form__flash {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	padding: var(--wp--preset--spacing--16) var(--wp--preset--spacing--20);
	border-radius: 2px;
	margin: 0 0 var(--wp--preset--spacing--16);
	width: 100%;
	max-width: 720px;
	margin-inline: auto;
}
.methodeart-form__flash--ok {
	background: var(--wp--preset--color--card);
	border: 1px solid var(--wp--preset--color--gold);
	color: var(--wp--preset--color--gold);
}
.methodeart-form__flash--err {
	background: var(--wp--preset--color--card);
	border: 1px solid var(--wp--preset--color--gold-mid);
	color: var(--wp--preset--color--cream-soft);
}
.methodeart-form-wrap { width: 100%; }
@media (min-width: 768px) {
	.methodeart-form__row { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   NAVIGATION OFF-CANVAS — overrides projet
   Surcharge les variables exposees par le mu-plugin methodeart-navigation.
   Decommenter les lignes utiles, supprimer les autres.
   Doc complete : wp-content/mu-plugins/methodeart-navigation/README.md
   ========================================================================== */

/*
.methodeart-nav-offcanvas {
	--methodeart-nav-offcanvas-bg:      var(--wp--preset--color--bg-dark);
	--methodeart-nav-offcanvas-color:   var(--wp--preset--color--text-white);
	--methodeart-nav-offcanvas-overlay: rgba(0, 0, 0, .7);
	--methodeart-nav-offcanvas-width:   min(480px, 90vw);
}
*/

/* ==========================================================================
   PRATICIENS CERTIFIES — pieces structurelles spec.json (eBWut)
   Toutes les couleurs/spacings restent piloted par theme.json. Ces regles
   gerent uniquement la geometrie (dimensions rondes/carrees, gap pixel)
   non exprimable via les attributs natifs Gutenberg.
   ========================================================================== */

/* Sidebar filtres — pastille de region en pseudo-element (zero core/html
   pour respecter le scan FSE strict, etat off/actif/hover). */
.methodeart-pc-filter::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	border: 1px solid var(--wp--preset--color--gold-line);
	display: inline-block;
	flex-shrink: 0;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}
.methodeart-pc-filter.is-active::before {
	background: var(--wp--preset--color--gold);
	border-color: var(--wp--preset--color--gold);
}
.methodeart-pc-filter:hover::before {
	background: var(--wp--preset--color--gold);
	border-color: var(--wp--preset--color--gold);
}

/* Sidebar filtres — etat actif : fond gold-mist + label or 500. Le className
   `is-active` est injecte cote PHP (render_block_core/group) selon ?region URL. */
.methodeart-pc-filter.is-active {
	background-color: var(--wp--preset--color--gold-mist);
}
.methodeart-pc-filter.is-active p,
.methodeart-pc-filter.is-active a {
	color: var(--wp--preset--color--gold);
	font-weight: 500;
}

/* Sidebar filtres — etat hover (cursor pointer + souligne label) */
.methodeart-pc-filter a {
	cursor: pointer;
}

/* Annuaire — etat AJAX en cours de chargement (fade subtil sur la grille). */
.methodeart-pc-annuaire-query {
	transition: opacity 0.2s ease;
}
.methodeart-pc-annuaire-query.is-loading {
	opacity: 0.45;
	pointer-events: none;
}

/* Avatar rond loop annuaire — alignement du contenu (initiales).
   padding:0 pour neutraliser le block-supports spacing default qui
   décale les initiales dans le cercle. */
.methodeart-praticien-avatar {
	width: 56px;
	max-width: 56px;
	margin-inline: auto;
	padding: 0;
}

/* Hero image praticiens (ratio 300x380 a la Pencil node rbinM). */
.methodeart-pc-hero__image { max-width: 300px; margin-inline: auto; }
.methodeart-pc-hero__image img {
	width: 100%; height: auto; aspect-ratio: 300 / 380;
	object-fit: cover; display: block;
	border: 1px solid var(--wp--preset--color--gold-soft);
	border-radius: 2px;
	background: var(--wp--preset--color--card);
}

/* Photo garantie (full-bleed cote droit, hauteur 480 desktop). */
.methodeart-pc-garantie__photo img {
	width: 100%; aspect-ratio: 16 / 9;
	object-fit: cover; display: block;
	border-radius: 2px;
	background: var(--wp--preset--color--card);
}
@media (min-width: 1024px) {
	.methodeart-pc-garantie__photo img { aspect-ratio: auto; min-height: 480px; }
}

/* Image equipement — opacite 0.55 (overlay design Pencil node uSuPP). */
.methodeart-pc-equipement__img img {
	width: 100%; aspect-ratio: 16 / 5;
	object-fit: cover; display: block;
	opacity: 0.55;
	border-radius: 2px;
	background: var(--wp--preset--color--card);
}

/* Stack items full-width — Gutenberg flex-vertical pose align-items: flex-start
   ce qui retrecit les enfants a la largeur de leur contenu. On force la stretch
   sur les items connus pour rester en colonne (Pencil node IEPZc / o9SmT / IduKU). */
.methodeart-se-eco__card,
.methodeart-se-cqn__item,
.methodeart-faq__item {
	align-self: stretch;
	width: 100%;
	box-sizing: border-box;
}

/* ============================================================
   Article single (blog) — prose du contenu importé
   Le contenu des posts (blocs h2/h3/p/ul plats) n'a pas de
   classes preset : on le style ici via tokens. Zero !important.
   ============================================================ */
.methodeart-article {
	color: var(--wp--preset--color--cream-soft);
	font-family: var(--wp--preset--font-family--body);
}
.methodeart-article > * {
	margin-top: var(--wp--preset--spacing--24);
	margin-bottom: 0;
}
.methodeart-article > *:first-child { margin-top: 0; }

.methodeart-article p {
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.85;
	font-weight: 300;
	color: var(--wp--preset--color--cream-soft);
}
.methodeart-article h2 {
	font-family: var(--wp--preset--font-family--heading);
	color: var(--wp--preset--color--ivory);
	font-size: var(--wp--preset--font-size--3-xl);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.5px;
	margin-top: var(--wp--preset--spacing--52);
}
.methodeart-article h3 {
	font-family: var(--wp--preset--font-family--heading);
	color: var(--wp--preset--color--gold-warm);
	font-size: var(--wp--preset--font-size--2-xl);
	font-weight: 500;
	line-height: 1.3;
	font-style: italic;
	margin-top: var(--wp--preset--spacing--40);
}
.methodeart-article h4 {
	font-family: var(--wp--preset--font-family--body);
	color: var(--wp--preset--color--ivory);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 600;
	letter-spacing: 0.5px;
	margin-top: var(--wp--preset--spacing--32);
}
.methodeart-article a {
	color: var(--wp--preset--color--gold);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}
.methodeart-article a:hover { color: var(--wp--preset--color--gold-warm); }
.methodeart-article strong { color: var(--wp--preset--color--ivory); font-weight: 600; }
.methodeart-article em { font-style: italic; }

.methodeart-article ul,
.methodeart-article ol {
	padding-left: var(--wp--preset--spacing--24);
	color: var(--wp--preset--color--cream-soft);
}
.methodeart-article li {
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.7;
	font-weight: 300;
	margin-top: var(--wp--preset--spacing--8);
}
.methodeart-article blockquote {
	border-left: 2px solid var(--wp--preset--color--gold);
	padding-left: var(--wp--preset--spacing--24);
	font-family: var(--wp--preset--font-family--cormorant);
	font-style: italic;
	color: var(--wp--preset--color--ivory);
	font-size: var(--wp--preset--font-size--xl);
	line-height: 1.6;
}