/**
 * ============================================================
 * CANARDISES DE VAOUR — Habillage du contenu en blocs natifs
 * ============================================================
 * Prompt B17. Deux usages :
 *   1. Pages Accueil / À propos / Contact basculées sur l'éditeur de blocs
 *      (Frontend\Block_Editing) — le thème rend the_content() dans
 *      .canardises-native-content à la place du HTML figé.
 *   2. Zone « sections supplémentaires » en bas de fiche produit
 *      (.canardises-fiche-native) — Product_Fiche.
 *
 * Chargé par functions.php sur `enqueue_block_assets` : à la fois sur le
 * site public ET dans l'éditeur (aperçu des modèles de blocs fidèle au
 * rendu réel). Le fichier redéfinit donc lui-même, en repli, les tokens
 * --cdv-* dont il a besoin (source de vérité : canardises-design-system.css)
 * pour tenir seul dans l'iframe de l'éditeur.
 * ============================================================ */

:root,
.editor-styles-wrapper {
	--cdv-terracotta: #97362b;
	--cdv-terracotta-deep: #5c2019;
	--cdv-terracotta-soft: #f6e1d8;
	--cdv-amber: #d7a774;
	--cdv-amber-ink: #a9762f;
	--cdv-cream: #f2e7df;
	--cdv-bg: #f5ede4;
	--cdv-surface: #ffffff;
	--cdv-ink: #5b0e1a;
	--cdv-ink-soft: #6b3a37;
	--cdv-ink-faint: #8a5b52;
	--cdv-border: rgba(91, 14, 26, 0.16);
	--cdv-border-soft: rgba(91, 14, 26, 0.10);
	--cdv-border-strong: rgba(91, 14, 26, 0.26);
	--cdv-radius: 2px;
	--cdv-font-display: "EB Garamond", Garamond, "Times New Roman", Georgia, serif;
	--cdv-font-body: "ITC Avant Garde Gothic", "ITC Avant Garde Gothic Std", "Jost", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--cdv-container: 1200px;
}

/* ============================================================
 * 1. Conteneur de contenu (pages éditoriales + fiche produit)
 * ============================================================ */

.canardises-native-content {
	width: 100%;
	max-width: var(--cdv-container);
	margin-inline: auto;
	padding-inline: 1.5rem;
	color: var(--cdv-ink);
	font-family: var(--cdv-font-body);
}

/* Rythme vertical entre blocs de premier niveau */
.canardises-native-content > * {
	margin-block: 0;
}

.canardises-native-content > * + * {
	margin-block-start: clamp(1.75rem, 4vw, 3rem);
}

.canardises-native-content > .wp-block-group.alignfull + *,
.canardises-native-content > * + .wp-block-group.alignfull {
	/* Écart entre une bande pleine largeur et son voisin : réduit au minimum
	 * cohérent (retour exploitant « trop de marges entre les zones de texte »).
	 * L'essentiel de la respiration vient désormais du padding interne des
	 * bandes, pas de cette marge. */
	margin-block-start: clamp(0.5rem, 1.2vw, 1rem);
}

.canardises-native-content p {
	line-height: 1.7;
	max-width: 68ch;
}

.canardises-native-content h1,
.canardises-native-content h2,
.canardises-native-content h3,
.canardises-native-content h4,
.canardises-native-content h5,
.canardises-native-content h6 {
	font-family: var(--cdv-font-display);
	font-weight: 400;
	letter-spacing: -0.015em;
	line-height: 1.15;
	color: var(--cdv-ink);
}

.canardises-native-content h2 {
	font-size: clamp(1.7rem, 3.6vw, 2.4rem);
}

.canardises-native-content h3 {
	font-size: clamp(1.3rem, 2.4vw, 1.6rem);
}

.canardises-native-content a:not(.wp-block-button__link) {
	color: var(--cdv-terracotta);
	text-underline-offset: 0.16em;
}

.canardises-native-content ul,
.canardises-native-content ol {
	line-height: 1.7;
	max-width: 68ch;
}

.canardises-native-content .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--cdv-radius);
}

.canardises-native-content figure.wp-block-image {
	margin: 0;
}

/* Bouton : habillage charte (terracotta plein) — explicite ici car le
 * balisage de bloc core arrive avec des styles concurrents selon l'ordre
 * de chargement des feuilles. */
.canardises-native-content .wp-block-button__link,
.editor-styles-wrapper .wp-block-button__link {
	background-color: var(--cdv-terracotta);
	border: 1px solid var(--cdv-terracotta);
	color: var(--cdv-cream);
	border-radius: var(--cdv-radius);
	font-family: var(--cdv-font-body);
	font-weight: 500;
	padding: 0.8rem 1.6rem;
}

.canardises-native-content .wp-block-button__link:hover {
	background-color: var(--cdv-terracotta-deep);
	border-color: var(--cdv-terracotta-deep);
	color: var(--cdv-cream);
}

/* CTA posé sur le hero : fond rouge (terracotta), texte crème — inversé le
 * 02/09 à la demande de l'exploitant (avant : fond crème/texte terracotta,
 * peu visible sur la photo). Survol : terracotta plus foncé. */
.canardises-native-content .cdv-migrated-hero .wp-block-button__link {
	background-color: var(--cdv-terracotta);
	border-color: var(--cdv-terracotta);
	color: var(--cdv-cream);
}

.canardises-native-content .cdv-migrated-hero .wp-block-button__link:hover {
	background-color: var(--cdv-terracotta-deep);
	border-color: var(--cdv-terracotta-deep);
	color: var(--cdv-cream);
}

/* ============================================================
 * 2. Largeurs « large » / « pleine largeur » dans un thème non-bloc
 *    (align-wide déclaré dans functions.php). Portée aux pages
 *    éditoriales : #page.site a overflow-x:clip (design system), donc
 *    le débordement à 100vw ne crée pas de défilement latéral.
 * ============================================================ */

.canardises-editorial .canardises-native-content > .alignfull {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	max-width: 100vw;
	width: 100vw;
}

.canardises-editorial .canardises-native-content > .alignwide {
	margin-left: calc(50% - 44vw);
	margin-right: calc(50% - 44vw);
	max-width: 88vw;
	width: 88vw;
}

/* Marges verticales du conteneur selon la page : l'Accueil démarre par un
 * hero pleine largeur (aucune marge en tête) ; Contact démarre par du texte
 * (respiration en tête, façon .cdv-*-section du rendu figé). À propos démarre
 * par une section .cdv-intro-row qui apporte DÉJÀ sa propre respiration
 * verticale : on n'empile pas celle du conteneur par-dessus (sinon ~200px
 * de vide entre le fil d'Ariane et le premier texte). */
.canardises-home .canardises-native-content,
.canardises-apropos .canardises-native-content {
	padding-top: 0;
}

.canardises-contact .canardises-native-content {
	/* haut resserré (retour exploitant « remonte la section Contact ») ;
	 * bas : on garde une respiration avant le pied de page. */
	padding-block: clamp(0.75rem, 2vw, 1.5rem) clamp(1.75rem, 4vw, 3rem);
}

/* La 1re section « présentation » d'À propos est remontée le plus haut
 * possible sous le fil d'Ariane (retour exploitant « remonte la section
 * À propos »). */
.canardises-apropos .canardises-native-content > .cdv-intro-row:first-child {
	padding-top: clamp(0.75rem, 2vw, 1.5rem);
}

/* « Où acheter mes produits » (carte) — padding interne resserré, en
 * contexte blocs uniquement (le rendu figé garde son réglage d'editorial.css). */
.canardises-apropos .canardises-native-content .cdv-ap-section {
	padding-block: clamp(1.5rem, 3vw, 2.5rem);
}

/* Les bandes à fond plein et la section « présentation » fournissent leur
 * propre respiration verticale : elles se collent l'une à l'autre (le rendu
 * figé fait pareil, filets pour séparer). */
.canardises-native-content > .cdv-bleed,
.canardises-native-content > .cdv-bleed + *,
.canardises-native-content > * + .cdv-bleed,
.canardises-native-content > .cdv-intro-row,
.canardises-native-content > * + .cdv-intro-row,
.canardises-native-content > .cdv-migrated-hero,
.canardises-native-content > .cdv-migrated-hero + * {
	margin-block-start: 0;
}

/* ============================================================
 * 3. Éléments éditoriaux communs (surtitre, titre, chapô) — repris
 *    des tokens de canardises-editorial.css. Posés sur les blocs
 *    eux-mêmes pour que l'aperçu de l'inserteur soit déjà à la charte.
 * ============================================================ */

.canardises-native-content .cdv-eyebrow,
.cdv-pattern .cdv-eyebrow {
	display: block;
	font-family: var(--cdv-font-body);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--cdv-terracotta);
	margin: 0 0 0.75rem;
	max-width: none;
}

.canardises-native-content .cdv-eyebrow--onwine {
	color: var(--cdv-amber);
}

.canardises-native-content .cdv-section-title,
.cdv-pattern .cdv-section-title {
	font-family: var(--cdv-font-display);
	font-weight: 400;
	font-size: clamp(1.9rem, 4vw, 2.75rem);
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin: 0;
	color: var(--cdv-ink);
	max-width: 32ch;
}

.canardises-native-content .cdv-section-title--onwine {
	color: var(--cdv-cream);
}

.canardises-native-content .cdv-section-intro,
.cdv-pattern .cdv-section-intro {
	font-size: 1rem;
	line-height: 1.65;
	color: var(--cdv-ink-faint);
	margin: 1.25rem 0 0;
	max-width: 60ch;
}

/* --- « Texte + photo » (core/columns), modèle de bloc + section
 *     « présentation » migrée --- */
/* align-items en !important : WordPress génère pour ce bloc columns une
 * classe unique (wp-container-core-columns-is-layout-XXXX) avec sa propre
 * règle align-items (posée par son système "layout", injectée en <style>
 * dans le <head> - constaté ici avec "normal", équivalent à stretch) qui
 * l'emportait malgré une spécificité plus faible que la nôtre. Même cause
 * que les !important sur les <img> plus bas (styles générés par le cœur
 * de Gutenberg, pas seulement des styles inline sur les balises). */
.wp-block-columns.cdv-pattern--media {
	gap: clamp(2rem, 5vw, 3.5rem);
	align-items: center !important;
	margin-block: 0;
}

/* 02/09 : galerie alignée en haut (flex-start) pour la coller au titre
 * "Ma manière de travailler". 04/09 (retour exploitant) : le texte à
 * droite est devenu plus long que la galerie, flex-start laissait un grand
 * vide sous les photos — retour au centrage vertical (hérité de la règle
 * .wp-block-columns.cdv-pattern--media ci-dessus : ~85 px au-dessus et en
 * dessous de la galerie face au texte). */

/* À propos, ligne d'intro : le texte (avec sa liste à puces) est bien plus
 * long que le portrait — même centré verticalement, le dernier paragraphe
 * ("Me voilà lancé...") retombe loin sous l'image (retour exploitant
 * 02/09). La colonne image reste visible à l'écran (position: sticky)
 * pendant qu'on lit le texte, au lieu de rester figée en haut de la
 * colonne — desktop uniquement (voir le repli mobile en colonne empilée
 * plus bas dans ce fichier, où sticky n'aurait pas de sens). */
/* 2e essai (02/09) : le 1er (position: sticky sur l'image, colonne étirée
 * en hauteur) était correct en théorie et vérifié fonctionnel en test
 * automatisé, mais `#page.site` porte overflow-x:clip (nécessaire pour le
 * débordement pleine largeur ailleurs sur le site) — une valeur
 * d'overflow autre que "visible", même seulement sur l'axe X, transforme
 * cet ancêtre en "conteneur de défilement" au sens de sticky sur certains
 * navigateurs, rendant le calque de collage peu fiable (constaté par
 * l'exploitant : aucun effet visible). Abandonné au profit d'un réglage
 * statique, fiable partout : l'image est simplement rendue plus haute
 * (aspect-ratio, recadrée en object-fit:cover) pour se rapprocher de la
 * hauteur du bloc de texte, centrée verticalement dans la ligne — geste
 * purement CSS, sans dépendre du défilement. */
/* !important : WordPress pose un style INLINE (aspect-ratio calculé à
 * partir du fichier + height:auto) sur chaque <img> de bloc, qui l'emporte
 * toujours sur une feuille externe — voir la même note plus bas sur
 * .cdv-modele-gallery, cause probable pour laquelle ce réglage semblait
 * n'avoir qu'un effet partiel. */
.cdv-intro-row.cdv-pattern--media .wp-block-column:has(.wp-block-image) .wp-block-image img {
	aspect-ratio: 3 / 4 !important;
	object-fit: cover;
}

.canardises-native-content > .wp-block-columns.cdv-intro-row {
	padding-block: clamp(1.75rem, 3vw, 2.5rem);
}

.cdv-pattern--media .cdv-pattern__img img,
.cdv-pattern--media .wp-block-image img {
	width: 100%;
	height: auto;
	border-radius: 0;
	object-fit: cover;
}

/* Les 4 puces « Ma manière de travailler » (à côté/sous la galerie) sans
 * aucun espacement entre elles par défaut (margin de liste à 0) : 4 longs
 * paragraphes qui se lisaient comme un seul bloc continu, pas 4 points
 * distincts — retour exploitant 03/09. */
.cdv-modele-band .wp-block-list > li {
	margin-block-end: 1.25rem;
}

.cdv-modele-band .wp-block-list > li:last-child {
	margin-block-end: 0;
}

/* La liste est scindée en deux (cdv-list-a / cdv-list-b) pour l'insertion
 * de la galerie au milieu sur mobile — sur desktop les deux listes doivent
 * rester une suite continue : on annule les marges de bloc entre elles et
 * on rend à la dernière puce de A le même rythme (1,25rem) qu'ailleurs. */
.cdv-modele-band .cdv-list-a {
	margin-block-end: 0;
}

.cdv-modele-band .cdv-list-b {
	margin-block-start: 0;
}

.cdv-modele-band .cdv-list-a > li:last-child {
	margin-block-end: 1.25rem;
}

/* À propos, section « Modèle » : 3 photos qui s'empilaient à la file
 * (beaucoup plus haut que les 4 puces du texte en regard) — retour
 * exploitant 02/09. 1re photo (atelier) en pleine largeur au-dessus, les 2
 * suivantes côte à côte en dessous : un vrai petit mur d'images plutôt
 * qu'une colonne qui s'étire. */
.cdv-modele-gallery {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
}

/* Corrigé le 02/09 (3e essai). 1er essai (height:100% dans une grille) :
 * une hauteur en % se heurte à une circularité de spec quand la hauteur
 * de la ligne dépend elle-même de son contenu — ne donnait qu'une
 * fraction imprévisible de la hauteur attendue. 2e essai (aspect-ratio
 * sur l'<img>) : toujours pas fiable — .cdv-pattern--media impose déjà
 * width:100%/height:auto/object-fit:cover à cet <img> par ailleurs, et
 * l'aspect-ratio n'a pas systématiquement priorité sur le ratio
 * intrinsèque du fichier dans ce cumul de règles. Solution robuste : une
 * hauteur EXPLICITE (en rem, pas en % ni en ratio) posée sur la FIGURE
 * elle-même (conteneur de bloc, hors grille), l'<img> rempli ensuite en
 * width/height:100% + object-fit:cover à l'intérieur — plus aucune
 * ambiguïté de calcul, quel que soit le ratio du fichier source. */
.cdv-modele-gallery > .wp-block-image:first-child {
	grid-column: 1 / -1;
	height: 26rem;
}

.cdv-modele-gallery > .wp-block-image:not(:first-child) {
	height: 14rem;
}

/* !important nécessaire ici : WordPress pose un style INLINE sur chaque
 * <img> de bloc (aspect-ratio + width px + height:auto, calculés à partir
 * du fichier — anti-saut de mise en page), qui l'emporte toujours sur une
 * feuille externe quelle que soit sa spécificité. C'est la cause réelle
 * des 2 essais précédents restés sans effet. */
.cdv-modele-gallery .wp-block-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
}

/* Mobile (retour exploitant 03/09) : les 3 photos passaient chacune quasi
 * plein écran (26rem/14rem/14rem empilées = ~54rem, près de 900px avant
 * même d'atteindre le texte) — le repli en 1 colonne gardait les MÊMES
 * hauteurs que le desktop, jamais pensées pour un écran de téléphone.
 * Grille resserrée : 1re photo en bandeau (moins haute), les 2 suivantes
 * toujours côte à côte mais nettement plus compactes — la galerie tient
 * dans un bloc cohérent au lieu de 3 pleines pages à faire défiler. */
@media (max-width: 782px) {
	.cdv-modele-gallery > .wp-block-image:first-child {
		height: 12rem;
	}

	.cdv-modele-gallery > .wp-block-image:not(:first-child) {
		height: 9rem;
	}
}

/* --- « Bloc intro pleine largeur » (core/group) --- */
.wp-block-group.cdv-pattern--intro {
	background: var(--cdv-terracotta-soft);
	border-block: 1px solid rgba(151, 54, 43, 0.2);
	padding-block: clamp(3rem, 7vw, 5.5rem);
	padding-inline: 1.5rem;
}

.wp-block-group.cdv-pattern--intro > * {
	max-width: var(--cdv-container);
	margin-inline: auto;
}

.wp-block-group.cdv-pattern--intro .cdv-section-intro {
	max-width: 66ch;
}

/* ============================================================
 * 3b. Bandes à fond plein du contenu migré (cdv_bleed) :
 *     .cdv-bleed (pleine largeur, fond + padding vertical) enveloppe
 *     .cdv-bleed__inner (contraint à la largeur de lecture).
 * ============================================================ */

.canardises-native-content .cdv-bleed {
	/* padding interne resserré (retour exploitant) — c'est la principale
	 * source de respiration entre sections désormais. */
	padding-block: clamp(1.75rem, 3vw, 2.5rem);
	padding-inline: 0;
}

.canardises-native-content .cdv-bleed--soft {
	background: var(--cdv-terracotta-soft);
	border-block: 1px solid rgba(151, 54, 43, 0.2);
}

.canardises-native-content .cdv-bleed--wine {
	background: var(--cdv-terracotta-deep);
}

/* « Notre façon de travailler » : collée à la bande précédente (marge 0),
 * même padding interne resserré que les autres bandes. */
.canardises-native-content > .wp-block-group.cdv-bleed--wine {
	margin-block-start: 0;
	padding-block: clamp(1.75rem, 3vw, 2.5rem);
}

.canardises-native-content .cdv-bleed__inner {
	max-width: var(--cdv-container);
	margin-inline: auto;
	padding-inline: 1.5rem;
}

/* Section « Modèle » (À propos) : photos jugées pas assez visibles (retour
 * exploitant 02/09) — élargie au même gabarit que la carte "Où acheter"
 * juste en dessous, plutôt que de changer la répartition 52/48 des
 * colonnes (qui casserait l'équilibre texte/images demandé "sans perdre
 * l'harmonie") : les 3 photos grandissent proportionnellement, toujours
 * dans les mêmes proportions entre elles. */
.canardises-native-content .cdv-modele-band .cdv-bleed__inner {
	max-width: 92vw;
}

/* --- Hero, port 1:1 de .cdv-hero (canardises-editorial.css). Groupe
 *     pleine largeur + core/image réel en fond absolu (pas de core/cover :
 *     son fond image ne se peint pas de façon fiable partout) + voile
 *     terracotta + dégradé bas, contenu ancré en bas.
 *     WP enveloppe les enfants d'un groupe dans .wp-block-group__inner-container
 *     -> c'est LUI la boîte de mise en page (flex, colonne, ancré en bas). --- */
.canardises-native-content .cdv-migrated-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	border-bottom: 1px solid var(--cdv-border);
	padding: 0;
}

.canardises-native-content .cdv-migrated-hero > .wp-block-group__inner-container {
	/* position: static -> l'image de fond (enfant) s'ancre sur
	 * .cdv-migrated-hero (pleine largeur), pas sur ce conteneur (1200px). */
	min-height: clamp(420px, 62vh, 640px);
	box-sizing: border-box;
	max-width: var(--cdv-container);
	margin-inline: auto;
	/* haut : ~un interligne seulement (le bloc surtitre/titre/chapô est collé
	 * au sommet de l'image, retour exploitant). Bas : respiration pour le
	 * bouton, ancré en pied via .wp-block-buttons { margin: auto 0 0 }. */
	padding: 1.25rem 1.5rem clamp(2rem, 5vw, 3.25rem);
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 1rem;
}

/* Le texte passe au-dessus du voile (l'image + ::before/::after sont en
 * z-index 0 et 1 sur .cdv-migrated-hero). */
.canardises-native-content .cdv-migrated-hero > .wp-block-group__inner-container > * {
	position: relative;
	z-index: 2;
}

/* Repli si une version de WP ne pose pas d'inner-container. */
.canardises-native-content .cdv-migrated-hero:not(:has(> .wp-block-group__inner-container)) {
	min-height: clamp(420px, 62vh, 640px);
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 1rem;
	padding: 1.25rem 1.5rem clamp(2rem, 5vw, 3.25rem);
}

.canardises-native-content .cdv-migrated-hero .cdv-hero__bg {
	position: absolute;
	inset: 0;
	margin: 0;
	z-index: 0;
}

.canardises-native-content .cdv-migrated-hero .cdv-hero__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	border-radius: 0;
	display: block;
	/* Promotion en couche GPU : sans ça, une image `object-fit` en position
	 * absolue sous un voile ne se peint pas de façon fiable (constaté sur
	 * Chromium). */
	transform: translateZ(0);
}

/* Pas de voile plein (assombrissait trop la photo — retour exploitant).
 * Le texte est maintenant ancré EN HAUT (bouton en pied) : léger fondu
 * sombre en haut ET en bas pour garder le texte crème lisible, mais le
 * centre de l'image reste à pleine luminosité — c'est là que sont les
 * canards, qu'on veut voir (retour exploitant). */
.canardises-native-content .cdv-migrated-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	/* Assombri et étendu le 02/09 (retour exploitant « texte peu lisible ») :
	 * la 1re zone (titre + chapô) reste plus sombre plus longtemps, sans
	 * assombrir le bas de l'image où sont les canards. */
	background: linear-gradient(
		to bottom,
		rgba(40, 12, 9, 0.74) 0%,
		rgba(40, 12, 9, 0.5) 20%,
		rgba(40, 12, 9, 0.18) 38%,
		transparent 52%,
		transparent 80%,
		rgba(40, 12, 9, 0.36) 100%
	);
}

.canardises-native-content .cdv-migrated-hero .cdv-eyebrow {
	color: var(--cdv-amber);
	margin: 0;
	text-shadow: 0 1px 10px rgba(20, 6, 4, 0.5);
}

.canardises-native-content .cdv-migrated-hero h1 {
	color: var(--cdv-cream);
	font-size: clamp(2.25rem, 5.2vw, 3.6rem);
	line-height: 1.1;
	max-width: 34ch;
	margin: 0;
	/* Ombre renforcée le 02/09 (retour exploitant « texte peu lisible ») :
	 * un halo sombre serré autour des lettres, sans assombrir l'image
	 * elle-même — pas de bandeau, pas de gras. */
	text-shadow: 0 1px 3px rgba(15, 4, 3, 0.75), 0 2px 22px rgba(15, 4, 3, 0.7);
}

/* Chapô du hero : laissé s'étendre sur toute la largeur de lecture du hero
 * (borné par .wp-block-group__inner-container à --cdv-container) plutôt que
 * ramené à une colonne étroite — retour exploitant « zone trop étroite »,
 * le texte tient alors sur ~2 lignes au lieu de 5. */
.canardises-native-content .cdv-migrated-hero p:not(.cdv-eyebrow) {
	/* Opacité montée à 100% (au lieu de 88%) + ombre renforcée le 02/09,
	 * même logique que le h1 juste au-dessus — la photo reste entièrement
	 * visible, seul le texte gagne en contraste. */
	color: var(--cdv-cream);
	font-size: 1.05rem;
	line-height: 1.6;
	max-width: none;
	margin: 0;
	text-shadow: 0 1px 3px rgba(15, 4, 3, 0.7), 0 2px 18px rgba(15, 4, 3, 0.65);
}

.canardises-native-content .cdv-migrated-hero .wp-block-buttons {
	/* poussé au pied du hero : le texte est ancré en haut, le bouton reste en bas */
	margin: auto 0 0;
}

/* ============================================================
 * 3c. Grilles du contenu migré (cartes « Nos gammes », colonnes
 *     « Réassurance » / « cycle » / « valeurs » / Contact) —
 *     reprises des grilles de canardises-editorial.css.
 * ============================================================ */

/* Nos gammes : 6 cartes en CSS Grid — largeurs et hauteurs strictement
 * égales quelles que soient les longueurs de texte, les 2 rangées alignées
 * (retour exploitant : « les largeurs variables se voient »). WP enveloppe
 * les enfants d'un groupe dans .wp-block-group__inner-container -> c'est LUI
 * qui porte la grille et chaque carte. */
.canardises-native-content .cdv-gammes-grid > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	margin-block-start: 3rem;
}

.canardises-native-content .cdv-gammes-grid:not(:has(> .wp-block-group__inner-container)) {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	margin-block-start: 3rem;
}

@media (max-width: 1024px) {
	.canardises-native-content .cdv-gammes-grid > .wp-block-group__inner-container,
	.canardises-native-content .cdv-gammes-grid:not(:has(> .wp-block-group__inner-container)) {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.canardises-native-content .cdv-gammes-grid > .wp-block-group__inner-container,
	.canardises-native-content .cdv-gammes-grid:not(:has(> .wp-block-group__inner-container)) {
		grid-template-columns: 1fr;
	}
}

.canardises-native-content .cdv-gamme-card {
	border: 1px solid rgba(151, 54, 43, 0.16);
	background: var(--cdv-surface);
	display: flex;
	flex-direction: column;
	/* La grille aligne les cartes ; on neutralise l'interlignage vertical que
	 * le layout « flow » de WordPress ajoute sinon à chaque carte sauf la 1re
	 * (elles se retrouvent décalées de 24px dans leur rangée). */
	margin: 0;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.canardises-native-content .cdv-gammes-grid > .wp-block-group__inner-container > * {
	margin-block: 0;
}

/* Carte = colonne flex sur toute la hauteur (la grille étire toutes les
 * cartes d'une rangée à la même hauteur) -> le conteneur interne remplit
 * la carte (flex:1) et le lien « Découvrir » se colle en bas via
 * margin-top:auto, aligné d'une carte à l'autre. */
.canardises-native-content .cdv-gamme-card > .wp-block-group__inner-container {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	width: 100%;
	padding-bottom: 1.5rem;
}

.canardises-native-content .cdv-gamme-card:hover {
	border-color: var(--cdv-terracotta);
	box-shadow: 0 4px 14px rgba(91, 14, 26, 0.10);
}

.canardises-native-content .cdv-gamme-card .wp-block-image,
.canardises-native-content .cdv-gamme-card figure.wp-block-image {
	margin: 0 0 1.5rem;
}

.canardises-native-content .cdv-gamme-card img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 0;
	display: block;
}

.canardises-native-content .cdv-gamme-card h3 {
	font-family: var(--cdv-font-display);
	font-weight: 400;
	font-size: 1.35rem;
	line-height: 1.2;
	margin: 0;
	padding: 0 1.5rem;
	color: var(--cdv-ink);
}

.canardises-native-content .cdv-gamme-card h3 a {
	color: inherit;
	text-decoration: none;
}

.canardises-native-content .cdv-gamme-card h3 a:hover {
	color: var(--cdv-terracotta);
}

.canardises-native-content .cdv-gamme-card p:not(.cdv-textlink) {
	margin: 0.75rem 0 0;
	padding: 0 1.5rem;
	font-size: 0.88rem;
	line-height: 1.55;
	color: var(--cdv-ink-faint);
	max-width: none;
}

/* Prefixe .cdv-gammes-grid : bat la règle .cdv-gamme-card--pro .cdv-textlink
 * de canardises-editorial.css (page figée, mêmes noms de classe) qui remet
 * un margin-top fixe. */
.canardises-native-content .cdv-gammes-grid .cdv-gamme-card .cdv-textlink {
	margin: 1.5rem 1.5rem 0;
	margin-top: auto;
	align-self: flex-start;
	padding-top: 1.25rem;
}

.canardises-native-content .cdv-gamme-card--pro {
	background: var(--cdv-terracotta);
	border-color: var(--cdv-terracotta);
}

.canardises-native-content .cdv-gamme-card--pro > .wp-block-group__inner-container {
	padding: 1.5rem;
}

.canardises-native-content .cdv-gamme-card--pro h3 {
	padding: 0;
	color: var(--cdv-cream);
}

.canardises-native-content .cdv-gamme-card--pro p:not(.cdv-textlink) {
	padding: 0;
	color: color-mix(in srgb, var(--cdv-cream) 80%, transparent);
}

.canardises-native-content .cdv-gammes-grid .cdv-gamme-card--pro .cdv-textlink {
	margin-inline: 0;
	margin-top: auto;
}

/* Le migrateur de blocs rend « <p class="cdv-textlink..."><a>texte</a></p> »
 * alors que les styles .cdv-textlink visaient l'ancre elle-même (ancien
 * front-page.php). L'ancre enfant récupérait donc la couleur de lien
 * générique du contenu bloc (terracotta), invisible sur la carte
 * « Offre professionnelle » à fond terracotta : seul le filet bas restait
 * visible (retour exploitant 2026-09-02). On fait suivre à l'ancre la
 * couleur de son .cdv-textlink parent, en ambre sur la carte PRO. */
.canardises-native-content .cdv-textlink a {
	color: inherit;
	text-decoration: none;
}

.canardises-native-content .cdv-gamme-card--pro .cdv-textlink,
.canardises-native-content .cdv-gamme-card--pro .cdv-textlink a {
	color: var(--cdv-amber);
}

.canardises-native-content .cdv-gamme-card--pro .cdv-textlink:hover,
.canardises-native-content .cdv-gamme-card--pro .cdv-textlink a:hover {
	color: var(--cdv-cream);
}

/* Réassurance : 4 colonnes à filet supérieur sur fond sombre. */
.canardises-native-content .cdv-reassurance-row {
	gap: 2.5rem;
	margin-block-start: 3.25rem;
}

.canardises-native-content .cdv-reassurance-row > .wp-block-column,
.canardises-native-content .cdv-ap-steps-row > .wp-block-column,
.canardises-native-content .cdv-ap-values-row > .wp-block-column,
.canardises-native-content .cdv-ct-grid-row > .wp-block-column {
	min-width: 0; /* laisse les colonnes s'égaliser sans être poussées par leur contenu */
}

.canardises-native-content .cdv-rea-col {
	border-top: 1px solid rgba(242, 231, 223, 0.25);
	padding-top: 1.5rem;
}

.canardises-native-content .cdv-rea-col h3 {
	font-family: var(--cdv-font-display);
	font-weight: 400;
	font-size: 1.25rem;
	color: var(--cdv-cream);
	margin: 0;
}

.canardises-native-content .cdv-rea-col p {
	margin: 0.75rem 0 0;
	font-size: 0.88rem;
	line-height: 1.6;
	color: color-mix(in srgb, var(--cdv-cream) 75%, transparent);
	max-width: none;
}

/* À propos : cycle (numéros ambre) + valeurs, colonnes à filet supérieur. */
.canardises-native-content .cdv-ap-steps-row,
.canardises-native-content .cdv-ap-values-row {
	gap: 2.5rem;
	margin-block-start: 3rem;
}

.canardises-native-content .cdv-ap-step-col,
.canardises-native-content .cdv-ap-value-col {
	border-top: 1px solid var(--cdv-border);
	padding-top: 1.5rem;
}

.canardises-native-content .cdv-ap-step-col .cdv-ap-step-num {
	font-family: var(--cdv-font-display);
	font-size: 1.9rem;
	color: var(--cdv-amber-ink);
	margin: 0;
	max-width: none;
}

.canardises-native-content .cdv-ap-step-col h3,
.canardises-native-content .cdv-ap-value-col h3 {
	font-family: var(--cdv-font-display);
	font-weight: 400;
	font-size: 1.25rem;
	margin: 0.5rem 0 0;
}

.canardises-native-content .cdv-ap-step-col p,
.canardises-native-content .cdv-ap-value-col p {
	margin: 0.75rem 0 0;
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--cdv-ink-faint);
	max-width: 42ch;
}

/* Contact : deux blocs à filet supérieur, coordonnées en paires
 * libellé (petites capitales) / valeur, façon <dl>. */
.canardises-native-content .cdv-ct-grid-row {
	gap: 3rem;
	margin-block-start: 3.5rem;
}

.canardises-native-content .cdv-ct-block {
	border-top: 1px solid var(--cdv-border);
	padding-top: 1.5rem;
}

.canardises-native-content .cdv-ct-block h2 {
	font-family: var(--cdv-font-display);
	font-weight: 400;
	font-size: 1.5rem;
	margin: 0;
}

.canardises-native-content .cdv-ct-label {
	font-size: 0.7rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--cdv-ink-faint);
	margin: 1.5rem 0 0.2rem;
}

.canardises-native-content .cdv-ct-value {
	margin: 0;
	font-size: 0.95rem;
	color: var(--cdv-ink);
	max-width: none;
}

/* En mode blocs, chaque libellé et chaque valeur est un <p> : la règle
 * .canardises-contact .cdv-ct-block > p (canardises-editorial.css) leur
 * imposait à toutes la même marge haute de 0.75rem + la couleur estompée,
 * d'où un couple libellé/valeur qui ressemblait à deux lignes séparées
 * (retour exploitant 2026-09-07). On resserre le libellé sur sa valeur et
 * on redonne à la valeur la couleur d'encre pleine. Sélecteur plus
 * spécifique (0,3,1) pour repasser devant la règle éditoriale. */
.canardises-contact .cdv-ct-block > .cdv-ct-label {
	margin: 1.35rem 0 0;
	line-height: 1.3;
}

.canardises-contact .cdv-ct-block > .cdv-ct-value {
	margin: 0.1rem 0 0;
	line-height: 1.4;
	color: var(--cdv-ink);
}

/* ============================================================
 * 4. Empilement responsive des colonnes core (Storefront ne fournit
 *    pas le CSS responsive des colonnes) — au-delà du seuil natif 781px
 *    de WordPress, on garde 2 colonnes sur les grilles à 4.
 * ============================================================ */

@media (max-width: 1024px) and (min-width: 782px) {
	.canardises-native-content .cdv-reassurance-row,
	.canardises-native-content .cdv-ap-steps-row {
		flex-wrap: wrap;
	}

	.canardises-native-content .cdv-reassurance-row > .wp-block-column,
	.canardises-native-content .cdv-ap-steps-row > .wp-block-column {
		flex-basis: calc(50% - 1.25rem) !important;
	}
}

@media (max-width: 781px) {
	.wp-block-columns.cdv-pattern--media {
		display: flex;
		flex-direction: column;
	}

	.wp-block-columns.cdv-pattern--media > .wp-block-column {
		flex-basis: 100% !important;
	}

	/* « Ma manière de travailler » (bande Modèle) : sur mobile, insérer la
	 * galerie de photos AU MILIEU de la liste — après « Transformation
	 * artisanale », avant « Vente directe » (retour exploitant 04/09).
	 * La colonne de texte est neutralisée (`display: contents`) pour que
	 * ses enfants (chapô, titre, liste A, liste B) deviennent des éléments
	 * flex frères de la galerie, qu'on peut alors réordonner. La liste est
	 * scindée en deux dans le contenu de la page (`cdv-list-a` = 2 premières
	 * puces, `cdv-list-b` = 2 dernières). Desktop inchangé (2 colonnes). */
	.cdv-modele-band .cdv-pattern--media {
		gap: 1.25rem;
	}

	.cdv-modele-band .cdv-pattern--media > .wp-block-column:not(.cdv-modele-gallery) {
		display: contents;
	}

	.cdv-modele-band .cdv-pattern--media > .cdv-modele-gallery {
		order: 3;
		margin-block: 0.5rem 0;
	}

	.cdv-modele-band .cdv-pattern--media > .wp-block-column:not(.cdv-modele-gallery) > .cdv-list-b {
		order: 4;
	}
}

/* ============================================================
 * 5. Zone « sections supplémentaires » de la fiche produit
 *    (Product_Fiche::render_native_blocks_section)
 * ============================================================ */

.canardises-fiche-native {
	margin-top: clamp(2.5rem, 6vw, 4rem);
	padding-top: clamp(2rem, 5vw, 3rem);
	border-top: 1px solid var(--cdv-border);
}

.canardises-fiche-native.canardises-native-content {
	padding-inline: 0;
	max-width: none;
}

/* ============================================================
 * 6. Aperçu dans l'éditeur — le contenu est sous .editor-styles-wrapper
 *    (pas sous .canardises-native-content). On y rappelle l'essentiel.
 * ============================================================ */

.editor-styles-wrapper {
	font-family: var(--cdv-font-body);
	color: var(--cdv-ink);
}

.editor-styles-wrapper h1,
.editor-styles-wrapper h2,
.editor-styles-wrapper h3,
.editor-styles-wrapper h4 {
	font-family: var(--cdv-font-display);
	font-weight: 400;
	letter-spacing: -0.015em;
	color: var(--cdv-ink);
}