/*
Theme Name: Deco Couture & Co (Twenty Twenty-Five Child)
Theme URI:
Description: Thème enfant FSE de Twenty Twenty-Five pour la boutique Deco Couture & Co. Reconstruction post-Oxygen (voir MIGRATION-FSE.md).
Author: Deco Couture & Co
Template: twentytwentyfive
Version: 0.1.0
Requires at least: 6.7
Requires PHP: 8.0
Text Domain: twentytwentyfive-child
Tags: full-site-editing, block-styles, e-commerce
*/

/* L'essentiel du style est piloté par theme.json (FSE).
   Ci-dessous : correctifs ciblés (padding, bordures, boutons outline). */

/* --- Boutons : transition douce, harmonisée sur tous les styles --- */
.wp-block-button__link {
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* --- Bouton plein (charte) : léger assombrissement au survol --- */
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.wp-block-button:not(.is-style-outline) .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--button-hover) !important;
}

/* --- Boutons outline à la charte --- */
.wp-block-button.is-style-outline .wp-block-button__link {
	border: 2px solid var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
	background: transparent;
	padding: calc(0.75rem - 2px) calc(1.5rem - 2px);
	border-radius: 4px;
}
/* !important nécessaire : la classe utilitaire has-primary-color de WordPress
   (color !important) l'emporterait sinon sur le blanc voulu au survol, ce qui
   rendait le texte invisible (même teinte que le fond plein). */
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus {
	background: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--base) !important;
	border-color: var(--wp--preset--color--primary);
}

/* --- Sécurité anti-débordement horizontal ---
   Le tiroir hors-écran du mini-panier WooCommerce (~480px) forçait une
   largeur de page minimale et coupait tout le contenu sur mobile. */
html,
body {
	overflow-x: hidden;
}
.wc-block-mini-cart__drawer:not(.is-open) {
	position: fixed;
}

/* --- Images : coins arrondis cohérents + pas de débordement --- */
.wp-block-image img {
	max-width: 100%;
	height: auto;
}
.wp-block-cover {
	border-radius: 0;
}

/* ===================================================================
   CARTES PRODUITS WOOCOMMERCE (grilles « Catégorie de produits »,
   « En promo », etc.) — même esprit que les cartes .dcc-card.
   =================================================================== */

/* .wc-block-grid__products (blocs « Catégorie de produits », « En promo »…)
   est en flex-wrap. WooCommerce espace nativement ses cartes avec des bordures
   transparentes plutôt qu'un `gap` — mais un simple box-shadow posé sur cette
   même carte se calque alors sur le bord EXTÉRIEUR (bordure comprise), donc
   loin du contenu visible : les cartes semblent collées malgré l'espace réel.
   On neutralise ces bordures et on gère l'espacement nous-mêmes avec un vrai
   `gap`, en recalculant la largeur de chaque carte en conséquence : le
   box-shadow colle alors exactement au contour visible. */
.wc-block-grid__products {
	gap: 2rem;
	/* WooCommerce déborde son conteneur de 8px de chaque côté pour compenser ses
	   bordures-espaceurs, que nous neutralisons juste en dessous. Sans ce reset,
	   des cartes en 100% (mobile) débordent de 16px et créent un scroll latéral. */
	margin-left: 0;
	margin-right: 0;
}
.wc-block-grid__product {
	border: 0;
	margin: 0;
}

/* Le conteneur reste en flex à toutes les tailles : sous 480px WooCommerce le
   repasse en `display:block`, ce qui annule notre `gap` — or ses bordures-
   espaceurs sont neutralisées ci-dessus, donc les cartes se touchaient. */
.wc-block-grid.has-2-columns .wc-block-grid__products,
.wc-block-grid.has-3-columns .wc-block-grid__products,
.wc-block-grid.has-4-columns .wc-block-grid__products {
	display: flex;
}

/* Largeurs par palier. Nos sélecteurs ont la même spécificité que ceux de
   WooCommerce et notre feuille se charge après : ses paliers mobiles ne
   s'appliqueraient jamais, il faut donc les redéclarer nous-mêmes.
   Mobile : une carte par ligne. */
.wc-block-grid.has-2-columns .wc-block-grid__product,
.wc-block-grid.has-3-columns .wc-block-grid__product,
.wc-block-grid.has-4-columns .wc-block-grid__product {
	flex: 0 1 100%;
	max-width: 100%;
	/* Entre 481 et 599px, WooCommerce ajoute `margin: 0 0 24px` (spécificité
	   supérieure au `margin: 0` générique ci-dessus) : cumulé à notre `gap`,
	   l'écart vertical passait à 56px sur cette seule plage. */
	margin-bottom: 0;
}

/* Entre 481 et 599px, WooCommerce ajoute un padding latéral de 8px en
   alternance (`nth-child`) pour ses gouttières deux-colonnes. Nos cartes sont
   en pleine largeur sur cette plage : ce padding ne ferait que décaler leur
   contenu à droite puis à gauche. Le `:nth-child(n)` est là uniquement pour
   égaler la spécificité de ces règles ; on ne touche pas au `padding-bottom`
   de la carte, défini plus bas. */
.wc-block-grid.has-2-columns .wc-block-grid__product:nth-child(n),
.wc-block-grid.has-3-columns .wc-block-grid__product:nth-child(n),
.wc-block-grid.has-4-columns .wc-block-grid__product:nth-child(n) {
	padding-left: 0;
	padding-right: 0;
}

/* Tablette : deux colonnes — même palier que la grille Product Collection. */
@media (min-width: 600px) {
	.wc-block-grid.has-2-columns .wc-block-grid__product,
	.wc-block-grid.has-3-columns .wc-block-grid__product,
	.wc-block-grid.has-4-columns .wc-block-grid__product {
		flex: 0 1 calc(50% - 1rem);
		max-width: calc(50% - 1rem);
	}
}

/* Bureau : le nombre de colonnes demandé par le bloc.
   Formule : 100%/N − gap × (N−1)/N, avec notre gap de 2rem. */
@media (min-width: 900px) {
	.wc-block-grid.has-3-columns .wc-block-grid__product { flex: 0 1 calc(33.3333% - 1.3334rem); max-width: calc(33.3333% - 1.3334rem); }
	.wc-block-grid.has-4-columns .wc-block-grid__product { flex: 0 1 calc(25% - 1.5rem); max-width: calc(25% - 1.5rem); }
}

.wc-block-grid__product {
	background: var(--wp--preset--color--base);
	border-radius: 10px;
	padding-bottom: 1.4rem;
	overflow: hidden;
	box-shadow: 0 0 0 1px var(--wp--preset--color--border-whisper), 0 8px 24px rgba(72, 48, 62, 0.07);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.wc-block-grid__product:hover {
	box-shadow: 0 0 0 1px var(--wp--preset--color--border-whisper), 0 14px 30px rgba(72, 48, 62, 0.14);
	transform: translateY(-3px);
}

/* Product Collection / Query (grille CSS native) : gap classique, sans risque,
   et un `border` normal convient (pas de mécanisme de bordure-espaceur ici). */
.wp-block-woocommerce-product-template {
	gap: 2rem !important;
}
.wp-block-woocommerce-product-template li.product {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border-whisper);
	border-radius: 10px;
	padding: 0 0 1.4rem;
	overflow: hidden;
	box-shadow: 0 8px 24px rgba(72, 48, 62, 0.07);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
	/* Indispensable : ces cartes sont en `content-box` par défaut, si bien que la
	   bordure de 1px s'ajoutait de part et d'autre de la largeur calculée
	   ci-dessous (306px demandés -> 308px réels). Sur 4 colonnes, ces 8px de trop
	   suffisaient à dépasser le conteneur (1328px pour 1320px) et à renvoyer la
	   4e carte à la ligne. */
	box-sizing: border-box;
}
.wp-block-woocommerce-product-template li.product:hover {
	box-shadow: 0 14px 30px rgba(72, 48, 62, 0.14);
	transform: translateY(-3px);
}

/* Largeur des cartes recalculée pour NOTRE gap.
   WooCommerce dimensionne ses cartes en supposant son propre gap de 1.25em :
   `width: calc(25% - .9375em)` sur 4 colonnes (3 gaps × 1.25em = 3.75em de
   marge libérée, soit exactement 100%). Notre gap de 2rem ci-dessus est plus
   large : 3 gaps × 2rem = 6rem pour seulement 3.75rem libérés, donc la 4e carte
   débordait et passait à la ligne. Formule : 100%/N − gap × (N−1)/N.
   Sous 600px, WooCommerce empile les cartes (width:100%) : on reste dans sa
   media query pour préserver cet empilement mobile. */
@media (min-width: 600px) {
	.wp-block-woocommerce-product-template.is-flex-container.columns-2 > li { width: calc(50% - 1rem) !important; }
	.wp-block-woocommerce-product-template.is-flex-container.columns-3 > li { width: calc(33.33333% - 1.33333rem) !important; }
	.wp-block-woocommerce-product-template.is-flex-container.columns-4 > li { width: calc(25% - 1.5rem) !important; }
	.wp-block-woocommerce-product-template.is-flex-container.columns-5 > li { width: calc(20% - 1.6rem) !important; }
	.wp-block-woocommerce-product-template.is-flex-container.columns-6 > li { width: calc(16.66667% - 1.66667rem) !important; }
}

/* Tablette : WooCommerce applique ses colonnes dès 600px, ce qui écraserait
   4 cartes à ~110px de large. On repasse à 2 colonnes jusqu'à 900px ; au-delà
   (bureau), les 4 tiennent sur une ligne. */
@media (min-width: 600px) and (max-width: 899px) {
	.wp-block-woocommerce-product-template.is-flex-container.columns-4 > li,
	.wp-block-woocommerce-product-template.is-flex-container.columns-5 > li,
	.wp-block-woocommerce-product-template.is-flex-container.columns-6 > li {
		width: calc(50% - 1rem) !important;
	}
	.wp-block-woocommerce-product-template.is-flex-container.columns-3 > li {
		width: calc(50% - 1rem) !important;
	}
}

/* Image en pleine largeur de carte (bord à bord), ratio fixe et recadrée
   proprement (fini les hauteurs inégales).
   WooCommerce force nativement `.wc-block-grid__product-link` et
   `.wc-block-grid__product-image` en `display:inline-block` (pour centrer
   d'anciennes vignettes à taille naturelle). Un inline-block sans largeur
   propre n'a pas de largeur définie : le `width:100%` de l'image ne peut
   alors pas se calculer et l'image retombe sur sa taille source en pixels —
   d'où les images plus petites qui restaient en retrait (et, par effet de
   bord, des cartes de hauteur inégale et des boutons mal alignés). On repasse
   ces deux conteneurs en bloc pleine largeur pour que le width:100% marche. */
.wc-block-grid__product-link,
.wc-block-grid__product-image {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
}
.wc-block-grid__product-image img {
	margin: 0;
	border-radius: 0;
}
.wc-block-grid__product-image img {
	aspect-ratio: 4 / 3;
	width: 100%;
	height: auto;
	object-fit: cover;
	display: block;
}

/* Texte : respiration horizontale sous l'image */
.wc-block-grid__product-title,
.wc-block-grid__product-price,
.wc-block-grid__product-add-to-cart {
	margin-left: 1.2rem;
	margin-right: 1.2rem;
}

/* Titre à la charte (aubergine) plutôt que le rouge lien par défaut */
.wc-block-grid__product-title {
	display: block;
	margin-top: 1rem;
	margin-bottom: 0.3rem;
	color: var(--wp--preset--color--primary) !important;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 1.1rem;
	text-decoration: none !important;
}
.wc-block-grid__product-link:hover .wc-block-grid__product-title {
	color: var(--wp--preset--color--accent) !important;
}

.wc-block-grid__product-price {
	display: block;
	margin-bottom: 1rem;
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
}

/* Bouton plus discret que l'image (pleine largeur), centré et compact */
.wc-block-grid__product-add-to-cart {
	margin-top: 0.5rem;
	text-align: center;
}
.wc-block-grid__product-add-to-cart .wp-block-button__link {
	width: auto;
	display: inline-flex;
	padding: 0.55rem 1.6rem;
	font-size: 0.9rem;
}

/* Navigation et en-tête : voir la section « EN-TÊTE » plus bas. */

/* --- Formulaire WPForms : respiration --- */
.wpforms-container {
	margin-top: 0.5rem;
}

/* --- Carte Google Maps intégrée : coins arrondis --- */
.wp-block-html iframe {
	display: block;
	width: 100%;
	border-radius: 8px;
}

/* --- Sécurité mobile : pas de scroll horizontal --- */
@media (max-width: 600px) {
	.wp-block-columns {
		gap: var(--wp--preset--spacing--40, 1.5rem);
	}
}

/* ===================================================================
   EN-TÊTE
   =================================================================== */

.dcc-header {
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* --- Barre de contact haute --- */
.dcc-header .dcc-topbar {
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.dcc-header .dcc-contact {
	margin: 0;
	color: #fff;
}
.dcc-header .dcc-contact a {
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
}
.dcc-header .dcc-contact a:hover {
	text-decoration: underline;
}
/* Pictogrammes de contact : SVG en masque (::before), teinté par currentColor.
   Ciblés par le type de lien -> aucun markup HTML particulier requis,
   donc le bloc reste un paragraphe standard valide dans l'éditeur.

   Mutualisés avec le pied de page (`.dcc-footer__contact`), qui affiche les
   mêmes coordonnées : une seule définition des masques pour les deux zones. */
.dcc-header .dcc-contact a::before,
.dcc-footer__contact a::before {
	content: "";
	display: inline-block;
	width: 0.95em;
	height: 0.95em;
	margin-right: 0.4em;
	vertical-align: -0.14em;
	background-color: currentColor;
	-webkit-mask: center / contain no-repeat;
	mask: center / contain no-repeat;
}
.dcc-header .dcc-contact a[href^="mailto:"]::before,
.dcc-footer__contact a[href^="mailto:"]::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1.5 8.67v8.58a3 3 0 0 0 3 3h15a3 3 0 0 0 3-3V8.67l-8.928 5.493a3 3 0 0 1-3.144 0L1.5 8.67Z'/%3E%3Cpath d='M22.5 6.908V6.75a3 3 0 0 0-3-3h-15a3 3 0 0 0-3 3v.158l9.714 5.978a1.5 1.5 0 0 0 1.572 0L22.5 6.908Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1.5 8.67v8.58a3 3 0 0 0 3 3h15a3 3 0 0 0 3-3V8.67l-8.928 5.493a3 3 0 0 1-3.144 0L1.5 8.67Z'/%3E%3Cpath d='M22.5 6.908V6.75a3 3 0 0 0-3-3h-15a3 3 0 0 0-3 3v.158l9.714 5.978a1.5 1.5 0 0 0 1.572 0L22.5 6.908Z'/%3E%3C/svg%3E");
}
.dcc-header .dcc-contact a[href^="tel:"]::before,
.dcc-footer__contact a[href^="tel:"]::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1.5 4.5a3 3 0 0 1 3-3h1.372c.86 0 1.61.586 1.819 1.42l1.105 4.423a1.875 1.875 0 0 1-.694 1.955l-1.293.97c-.135.101-.164.249-.126.352a11.285 11.285 0 0 0 6.697 6.697c.103.038.25.009.352-.126l.97-1.293a1.875 1.875 0 0 1 1.955-.694l4.423 1.105c.834.209 1.42.959 1.42 1.82V19.5a3 3 0 0 1-3 3h-2.25C8.552 22.5 1.5 15.448 1.5 6.75V4.5Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1.5 4.5a3 3 0 0 1 3-3h1.372c.86 0 1.61.586 1.819 1.42l1.105 4.423a1.875 1.875 0 0 1-.694 1.955l-1.293.97c-.135.101-.164.249-.126.352a11.285 11.285 0 0 0 6.697 6.697c.103.038.25.009.352-.126l.97-1.293a1.875 1.875 0 0 1 1.955-.694l4.423 1.105c.834.209 1.42.959 1.42 1.82V19.5a3 3 0 0 1-3 3h-2.25C8.552 22.5 1.5 15.448 1.5 6.75V4.5Z'/%3E%3C/svg%3E");
}
.dcc-header .wp-block-social-links {
	gap: 0.35rem;
}

/* --- Logo : tracé noir dans un encadré blanc sur le bandeau aubergine,
   comme l'original Oxygen (`Logo-Denise-V3-sans-fond.png`).
   Attention au nom du fichier : « sans-fond » désigne l'absence du fond
   décoratif de la variante « avec-fond », PAS la transparence — ce PNG porte
   déjà son propre fond blanc. Le `background` blanc ci-dessous est donc
   redondant avec l'image, mais il garantit le même encadré si on lui substitue
   un jour un logo réellement transparent. --- */
.dcc-header .dcc-logo {
	line-height: 0;
}
.dcc-header .dcc-logo img {
	background: #fff;
	padding: 0;
	border-radius: 0;
}

/* --- Navigation (bureau) : liens blancs, graisse allégée --- */
.dcc-header .wp-block-navigation {
	font-weight: 500;
}
.dcc-header .wp-block-navigation .wp-block-navigation-item__content {
	color: #fff;
	padding-block: 0.35rem;
}
.dcc-header .wp-block-navigation .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.dcc-header .wp-block-navigation .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent);
}
/* jamais de soulignement au survol dans le menu (bureau et sous-menus) */
.dcc-header .wp-block-navigation-item__content,
.dcc-header .wp-block-navigation-item__content:hover,
.dcc-header .wp-block-navigation-item__content:focus {
	text-decoration: none !important;
}

/* --- Sous-menus (bureau) : carte blanche avec ombre douce ---
   !important pour battre la teinte primary-dark héritée du réglage
   overlayBackgroundColor du bloc navigation. */
.dcc-header .wp-block-navigation__submenu-container {
	background-color: #fff !important;
	border: 1px solid var(--wp--preset--color--border-whisper);
	border-radius: 8px;
	box-shadow: 0 14px 30px rgba(72, 48, 62, 0.18);
	padding: 0.35rem 0;
	min-width: 230px;
}
.dcc-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: var(--wp--preset--color--primary-dark) !important;
	padding: 0.5rem 1.1rem;
}
.dcc-header .wp-block-navigation__submenu-container .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.dcc-header .wp-block-navigation__submenu-container .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent) !important;
}

/* --- Mini-panier : icône et montant en blanc --- */
.dcc-header .wc-block-mini-cart__button,
.dcc-header .wc-block-mini-cart__amount,
.dcc-header .wc-block-mini-cart__quantity-badge {
	color: #fff;
}

/* --- Bouton hamburger --- */
.dcc-header .wp-block-navigation__responsive-container-open,
.dcc-header .wp-block-navigation__responsive-container-close {
	color: #fff;
}

/* ===================================================================
   EN-TÊTE — RESPONSIVE
   =================================================================== */

/* Tablette : logo un peu réduit */
@media (max-width: 900px) {
	.dcc-header .dcc-logo { max-width: 155px; }
}

/* --- Overlay mobile : plein écran ---
   Structure rendue par le bloc navigation du cœur :
     .is-menu-open > .__responsive-close > .__responsive-dialog
       > button.__responsive-container-close
       > .__responsive-container-content > ul.__container > li.__item */
.dcc-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: 1.25rem 1.25rem 3rem;
	/* le menu est long (sous-menus dépliés) : il défile sans entraîner la page */
	overscroll-behavior: contain;
}

/* Bouton de fermeture : cible tactile confortable */
.dcc-header .wp-block-navigation__responsive-container-close {
	padding: 0.6rem;
	border-radius: 999px;
	transition: background-color 0.2s ease;
}
.dcc-header .wp-block-navigation__responsive-container-close:hover {
	background-color: rgba(255, 255, 255, 0.1);
}

.dcc-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: stretch;
	justify-content: flex-start;
	width: 100%;
	margin-top: 0.75rem;
}
/* gap: 0 sur les deux niveaux de liste — le cœur y met `gap: inherit`, qui
   récupère le blockGap du bloc navigation (pensé pour l'horizontale du bureau)
   et aérait les sous-items au hasard. Ici le rythme vient des paddings. */
.dcc-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container,
.dcc-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container {
	gap: 0;
}
.dcc-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: stretch;
	width: 100%;
}
.dcc-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
	align-items: stretch;
}

/* Le lien remplit sa ligne : toute la largeur est tapable, pas seulement le
   texte. min-height 44px = cible tactile minimale (WCAG 2.5.8, Apple HIG).
   La bordure gauche transparente réserve la place de la barre d'item actif,
   pour que le texte ne se décale pas d'une page à l'autre. */
.dcc-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	/* border-box : sans lui, width 100% + padding déborde du conteneur et le
	   fond de la ligne active fuyait sous le bord droit de l'écran. */
	box-sizing: border-box;
	width: 100%;
	min-height: 44px;
	padding: 0.5rem 0.75rem;
	color: #fff;
	font-size: 1.05rem;
	border-radius: 6px;
	border-left: 3px solid transparent;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
/* niveau 1 : un cran plus affirmé que les sous-items, filet de séparation */
.dcc-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item + .wp-block-navigation-item {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.dcc-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	font-size: 1.15rem;
	font-weight: 600;
}

/* Sous-menus : transparents, indentés le long d'un rail, texte adouci.
   Sélecteur calqué sur celui du cœur (.has-child …) et préfixé par .dcc-header
   pour le battre : le cœur impose padding-left/right 2rem + min-width 200px,
   ce qui enfonçait le niveau 3 hors de l'écran sur un mobile étroit. */
.dcc-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container {
	background-color: transparent !important;
	border: 0;
	border-left: 1px solid rgba(255, 255, 255, 0.16);
	box-shadow: none;
	min-width: 0;
	padding: 0 0 0.35rem 0.85rem;
	margin-left: 0.75rem;
}
.dcc-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: rgba(255, 255, 255, 0.78) !important;
	font-size: 0.98rem;
	font-weight: 400;
	min-height: 40px;
	padding-left: 0.6rem;
}

/* Survol / appui */
.dcc-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.dcc-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:active {
	background-color: rgba(255, 255, 255, 0.08);
	color: #fff !important;
}

/* Page courante : repère volontaire (barre + teinte accent). C'est ce qui
   signale « vous êtes ici » — rôle que jouait par accident l'anneau de focus. */
.dcc-header .wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent) !important;
	border-left-color: var(--wp--preset--color--accent);
	background-color: rgba(204, 89, 114, 0.12);
	font-weight: 600;
}
/* Parent de la page courante : même teinte, sans le fond (repère secondaire) */
.dcc-header .wp-block-navigation__responsive-container.is-menu-open .current-menu-ancestor > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent) !important;
}

/* Anneau de focus : au clavier uniquement.
   Avec :focus, l'ouverture de l'overlay déplace le focus sur le premier lien
   (piège de focus du cœur) et dessinait un cadre rose permanent autour
   d'« Accueil », même à l'ouverture au doigt. */
.dcc-header .wp-block-navigation__responsive-container.is-menu-open a:focus,
.dcc-header .wp-block-navigation__responsive-container.is-menu-open button:focus {
	outline: none;
}
.dcc-header .wp-block-navigation__responsive-container.is-menu-open a:focus-visible,
.dcc-header .wp-block-navigation__responsive-container.is-menu-open button:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
	border-radius: 6px;
}

/* Ouverture : les lignes se posent en cascade. */
@media (prefers-reduced-motion: no-preference) {
	.dcc-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
		animation: dcc-menu-item-in 0.26s ease both;
	}
	.dcc-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(2) { animation-delay: 0.03s; }
	.dcc-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(3) { animation-delay: 0.06s; }
	.dcc-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(4) { animation-delay: 0.09s; }
	.dcc-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(5) { animation-delay: 0.12s; }
	.dcc-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(n + 6) { animation-delay: 0.15s; }
}
@keyframes dcc-menu-item-in {
	from { opacity: 0; transform: translateY(-6px); }
	to { opacity: 1; transform: none; }
}

/* Mobile : réseaux sociaux puis contact, chacun centré sur sa ligne */
@media (max-width: 600px) {
	.dcc-header .dcc-topbar {
		padding-left: 0.8rem;
		padding-right: 0.8rem;
	}
	.dcc-header .dcc-topbar > .wp-block-group {
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.2rem;
	}
	.dcc-header .dcc-topbar .wp-block-social-links {
		flex-basis: 100%;
		justify-content: center;
	}
	.dcc-header .dcc-contact {
		flex-basis: 100%;
		font-size: 0.8rem;
		text-align: center;
	}
	.dcc-header .dcc-logo { max-width: 135px; }
	.dcc-header .dcc-main-row {
		padding-top: 0.25rem;
		padding-bottom: 0.25rem;
	}
}

/* ===================================================================
   PIED DE PAGE
   =================================================================== */

/* Liseré de séparation avec le contenu, identique au filet de l'en-tête. */
.dcc-footer {
	border-top: 3px solid var(--wp--preset--color--accent);
}

/* ⚠️ Liens en BLANC, et non à la couleur de lien du thème.
   `theme.json` fixe les liens à `link` (#e03236) : sur le fond aubergine
   foncé du pied de page (#48303e) le rapport de contraste tombe à 2,5:1,
   sous le minimum AA de 4,5:1 (le blanc atteint 11,6:1). Le soulignement
   n'apparaît qu'au survol pour ne pas hachurer les colonnes de liens.
   Les règles du thème passent par `:where()` (spécificité 0) : ces
   sélecteurs de classe l'emportent sans `!important`. */
.dcc-footer a {
	color: #fff;
	text-decoration: none;
}
.dcc-footer a:hover,
.dcc-footer a:focus {
	color: #fff;
	text-decoration: underline;
}
.dcc-footer a:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* --- Logo : même encadré blanc que dans l'en-tête (le PNG porte son propre
   fond blanc opaque — voir la note « sans-fond » ≠ transparent plus haut). --- */
.dcc-footer__logo {
	line-height: 0;
}
.dcc-footer__logo img {
	background: #fff;
}

/* --- Intitulés de colonne : capitales espacées, soulignés d'un court trait
   accent qui structure les colonnes sans alourdir. --- */
.dcc-footer__title {
	margin: 0 0 1rem;
	padding-bottom: 0.5rem;
	position: relative;
}
.dcc-footer__title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 32px;
	height: 2px;
	background: var(--wp--preset--color--accent);
}

/* --- Colonnes de liens : liste sans puce, cible tactile confortable. --- */
.dcc-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
}
.dcc-footer__links li {
	margin-bottom: 0.55rem;
	font-size: 0.95rem;
}
/* Léger décalage au survol : retour visuel sans provoquer de reflow
   (transform, pas margin). */
.dcc-footer__links a {
	display: inline-block;
	transition: transform 0.15s ease, opacity 0.15s ease;
	opacity: 0.9;
}
.dcc-footer__links a:hover {
	opacity: 1;
	transform: translateX(3px);
}

/* --- Bloc « Nous trouver » --- */
.dcc-footer__address,
.dcc-footer__hours {
	margin: 0 0 0.9rem;
	opacity: 0.9;
}
.dcc-footer__contact {
	margin: 0;
	line-height: 2;
}
.dcc-footer__contact a {
	white-space: nowrap;
}

/* --- Réseaux sociaux : pastilles translucides, contrastées au survol --- */
.dcc-footer__social {
	gap: 0.5rem;
}
.dcc-footer__social .wp-social-link {
	background: rgba(255, 255, 255, 0.1);
	border-radius: 50%;
	transition: background-color 0.2s ease, transform 0.2s ease;
}
.dcc-footer__social .wp-social-link:hover {
	background: var(--wp--preset--color--accent);
	transform: translateY(-2px);
}

/* --- Barre basse : copyright + mentions légales --- */
.dcc-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	gap: 0.5rem 1.5rem;
}
/* Vise les deux lignes indifféremment (copyright et mentions légales), qui
   partagent la même présentation. Sélecteur d'élément et non de classe pour le
   copyright : le bloc `core/shortcode` n'émet aucune classe, juste le `<p>`
   ajouté par `wpautop` autour de la sortie du shortcode. */
.dcc-footer__bottom p {
	margin: 0;
	font-size: 0.85rem;
	opacity: 0.75;
}

/* ===================================================================
   PIED DE PAGE — RESPONSIVE
   =================================================================== */

/* Tablette : les 4 colonnes passent en 2x2 plutôt que de s'étrangler.
   `!important` requis : le bloc `columns` impose ses `flex-basis` en style
   inline (30% / 26%), qu'aucun sélecteur externe ne peut surclasser. */
@media (max-width: 900px) {
	.dcc-footer .wp-block-columns {
		flex-wrap: wrap !important;
	}
	.dcc-footer .wp-block-column {
		flex-basis: calc(50% - var(--wp--preset--spacing--60, 2rem)) !important;
	}
}

/* Mobile : une seule colonne, tout centré (logo et réseaux compris). */
@media (max-width: 600px) {
	.dcc-footer .wp-block-column {
		flex-basis: 100% !important;
		text-align: center;
	}
	.dcc-footer__title::after {
		left: 50%;
		transform: translateX(-50%);
	}
	.dcc-footer__logo img {
		margin-inline: auto;
	}
	.dcc-footer__social {
		justify-content: center;
	}
	.dcc-footer__bottom {
		justify-content: center;
		text-align: center;
	}
}

/* ===================================================================
   CARTES « univers » (badge + liseré coloré)
   =================================================================== */

.dcc-card {
	border-radius: 10px 10px 0 0;
	overflow: hidden;
	box-shadow: 0 8px 24px rgba(72, 48, 62, 0.08);
	padding: 0 0 1.6rem;
	height: 100%;
}
.dcc-card__img {
	margin: 0;
}
.dcc-card__img img {
	width: 100%;
	aspect-ratio: 5 / 4;
	object-fit: cover;
	display: block;
}
.dcc-card > * {
	padding-inline: 1.4rem;
}
.dcc-card .dcc-card__img {
	padding-inline: 0;
}

/* Badge de catégorie : pastille colorée qui chevauche l'image */
.dcc-badge {
	display: inline-block;
	margin: -1.1rem auto 0.8rem;
	padding: 0.35rem 1rem;
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #fff;
	position: relative;
	line-height: 1.2;
}
/* vert figé en dur : le slug --button désigne désormais la couleur des boutons (rose),
   ce badge doit rester vert indépendamment de ce changement */
.dcc-badge--green { background: #8ba460; }
.dcc-badge--gold  { background: var(--wp--preset--color--gold); }
.dcc-badge--pink  { background: var(--wp--preset--color--accent); }

/* Retrait à gauche du badge. Le !important est nécessaire pour battre la règle
   du layout « constrained » de WordPress (margin-left:auto !important sur chaque
   enfant direct) ; la spécificité .dcc-card .dcc-badge (0,2,0) passe devant. */
.dcc-card .dcc-badge {
	margin-left: 0.8rem !important;
	margin-right: 0 !important;
}

/* ===================================================================
   FICHE PRODUIT
   =================================================================== */

/* --- Bouton « Voir la notice » (shortcode [dcc_notice_produit]) ---
   Rendu par functions.php uniquement si le champ ACF notice_pdf est rempli :
   quand il est vide, aucun conteneur n'est émis, donc aucune marge résiduelle. */
.dcc-notice {
	margin-block: 1.4rem;
}
.dcc-notice__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
}
/* Pictogramme « document » teinté par currentColor : suit donc l'inversion
   de couleur du style outline au survol, sans règle supplémentaire. */
.dcc-notice__link::before {
	content: "";
	width: 1.05em;
	height: 1.05em;
	flex: none;
	background-color: currentColor;
	-webkit-mask: center / contain no-repeat;
	mask: center / contain no-repeat;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.625 1.5H9a3.75 3.75 0 0 1 3.75 3.75v1.875c0 1.036.84 1.875 1.875 1.875H16.5a3.75 3.75 0 0 1 3.75 3.75v7.875c0 1.035-.84 1.875-1.875 1.875H5.625a1.875 1.875 0 0 1-1.875-1.875V3.375c0-1.036.84-1.875 1.875-1.875Zm5.925 13.425a.75.75 0 0 0-1.06-1.06l-2.47 2.47-.94-.94a.75.75 0 1 0-1.06 1.06l1.47 1.47a.75.75 0 0 0 1.06 0l3-3Z'/%3E%3Cpath d='M14.25 5.25a5.23 5.23 0 0 0-1.279-3.434 9.768 9.768 0 0 1 6.963 6.963A5.23 5.23 0 0 0 16.5 7.5h-1.875a.375.375 0 0 1-.375-.375V5.25Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.625 1.5H9a3.75 3.75 0 0 1 3.75 3.75v1.875c0 1.036.84 1.875 1.875 1.875H16.5a3.75 3.75 0 0 1 3.75 3.75v7.875c0 1.035-.84 1.875-1.875 1.875H5.625a1.875 1.875 0 0 1-1.875-1.875V3.375c0-1.036.84-1.875 1.875-1.875Zm5.925 13.425a.75.75 0 0 0-1.06-1.06l-2.47 2.47-.94-.94a.75.75 0 1 0-1.06 1.06l1.47 1.47a.75.75 0 0 0 1.06 0l3-3Z'/%3E%3Cpath d='M14.25 5.25a5.23 5.23 0 0 0-1.279-3.434 9.768 9.768 0 0 1 6.963 6.963A5.23 5.23 0 0 0 16.5 7.5h-1.875a.375.375 0 0 1-.375-.375V5.25Z'/%3E%3C/svg%3E");
}

/* --- Onglets produit (rendu classique via woocommerce/product-details) --- */
.woocommerce-tabs ul.tabs {
	border-bottom: 1px solid var(--wp--preset--color--border-whisper);
}
.woocommerce-tabs .dcc-accessoires h3:first-child {
	margin-top: 0;
}

/* ===================================================================
   BOUTIQUE (archive-product)
   =================================================================== */

/* Fil d'Ariane centré dans le bandeau de titre, à la charte. */
.dcc-shop-hero .wc-block-breadcrumbs {
	text-align: center;
}

/* Barre « X résultats » + tri : discrète, séparée de la grille par un filet. */
.dcc-shop-toolbar {
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--wp--preset--color--border-whisper);
	gap: 1rem;
}
.dcc-shop-toolbar .woocommerce-result-count {
	margin: 0;
	color: var(--wp--preset--color--primary);
}
.dcc-shop-toolbar .woocommerce-ordering select,
.dcc-shop-toolbar select {
	padding: 0.4rem 0.6rem;
	border: 1px solid var(--wp--preset--color--border-whisper);
	border-radius: 4px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-family: inherit;
}

/* --- Vignettes de sous-catégories (shortcode [dcc_sous_categories]) ---
   Ex. « Marques machines » : logos des marques plutôt que les produits.
   Même esprit que les cartes de l'accueil. Les logos sont des images au ratio
   très variable : on les contient (`object-fit: contain`) dans une zone de
   hauteur fixe, sur fond blanc, pour aligner les cartes sans rogner les logos. */
.dcc-souscats {
	list-style: none;
	margin: 0 0 var(--wp--preset--spacing--60, 3rem);
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 2rem;
}
.dcc-souscat__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border-whisper);
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 8px 24px rgba(72, 48, 62, 0.07);
	text-decoration: none;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.dcc-souscat__link:hover,
.dcc-souscat__link:focus {
	box-shadow: 0 14px 30px rgba(72, 48, 62, 0.14);
	transform: translateY(-3px);
	text-decoration: none;
}
.dcc-souscat__img {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 150px;
	padding: 1.2rem;
	background: #fff;
}
.dcc-souscat__img img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}
.dcc-souscat__name {
	padding: 0 1.2rem;
	margin-top: 1rem;
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 1.05rem;
	text-align: center;
}
.dcc-souscat__link:hover .dcc-souscat__name {
	color: var(--wp--preset--color--accent);
}
.dcc-souscat__count {
	padding: 0 1.2rem 1.3rem;
	margin-top: 0.25rem;
	color: var(--wp--preset--color--contrast);
	font-size: 0.85rem;
	text-align: center;
}

/* Titres des cartes du bloc Product Collection (boutique ET produits liés) :
   à la charte plutôt qu'en rouge lien. La section « cartes produits » plus haut
   ne les atteint pas : ce bloc rend un `core/post-title`, qui ne porte aucune
   des classes `.wc-block-grid__*` qu'elle cible. */
.wp-block-woocommerce-product-template .wp-block-post-title {
	margin-top: 1rem;
	margin-inline: 1.2rem;
	font-family: var(--wp--preset--font-family--heading);
}
.wp-block-woocommerce-product-template .wp-block-post-title a {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}
.wp-block-woocommerce-product-template .wp-block-post-title a:hover,
.wp-block-woocommerce-product-template .wp-block-post-title a:focus {
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

/* Pagination : chiffres à la charte */
.wp-block-query-pagination {
	gap: 0.5rem;
}
.wp-block-query-pagination .page-numbers {
	padding: 0.35rem 0.7rem;
	border-radius: 4px;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}
.wp-block-query-pagination .page-numbers.current {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

/* ===================================================================
   BANDEAU D'ATOUTS (fiche produit + boutique)
   =================================================================== */

.dcc-atouts .wp-block-columns {
	gap: 1.5rem;
}
.dcc-atout {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
}
.dcc-atout::before {
	content: "";
	display: block;
	width: 2.2rem;
	height: 2.2rem;
	margin: 0 auto 0.6rem;
	background-color: var(--wp--preset--color--accent);
	-webkit-mask: center / contain no-repeat;
	mask: center / contain no-repeat;
}
.dcc-atout--livraison::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.375 4.5C2.339 4.5 1.5 5.34 1.5 6.375V13.5h13.5V6.375c0-1.036-.84-1.875-1.875-1.875h-9.75ZM1.5 15v2.625c0 1.035.84 1.875 1.875 1.875h.375a3 3 0 1 1 6 0h3a.75.75 0 0 0 .75-.75V15H1.5Z'/%3E%3Cpath d='M16.5 6.75h1.664c.723 0 1.376.446 1.638 1.12l1.36 3.502a.75.75 0 0 1 .053.276v5.977a.75.75 0 0 1-.75.75h-.375a3 3 0 1 0-6 0h-.375a.75.75 0 0 1-.75-.75V6.75h3.535ZM18 12.75h1.72l-1.02-2.625a.375.375 0 0 0-.35-.24H16.5v2.865H18Z'/%3E%3Ccircle cx='6.75' cy='19.5' r='1.5'/%3E%3Ccircle cx='17.25' cy='19.5' r='1.5'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.375 4.5C2.339 4.5 1.5 5.34 1.5 6.375V13.5h13.5V6.375c0-1.036-.84-1.875-1.875-1.875h-9.75ZM1.5 15v2.625c0 1.035.84 1.875 1.875 1.875h.375a3 3 0 1 1 6 0h3a.75.75 0 0 0 .75-.75V15H1.5Z'/%3E%3Cpath d='M16.5 6.75h1.664c.723 0 1.376.446 1.638 1.12l1.36 3.502a.75.75 0 0 1 .053.276v5.977a.75.75 0 0 1-.75.75h-.375a3 3 0 1 0-6 0h-.375a.75.75 0 0 1-.75-.75V6.75h3.535ZM18 12.75h1.72l-1.02-2.625a.375.375 0 0 0-.35-.24H16.5v2.865H18Z'/%3E%3Ccircle cx='6.75' cy='19.5' r='1.5'/%3E%3Ccircle cx='17.25' cy='19.5' r='1.5'/%3E%3C/svg%3E");
}
.dcc-atout--garantie::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.516 2.17a.75.75 0 0 0-1.032 0 11.209 11.209 0 0 1-7.877 3.08.75.75 0 0 0-.722.515A12.74 12.74 0 0 0 2.25 9.75c0 5.942 4.064 10.933 9.563 12.348a.749.749 0 0 0 .374 0c5.499-1.415 9.563-6.406 9.563-12.348 0-1.39-.223-2.73-.635-3.985a.75.75 0 0 0-.722-.516 11.209 11.209 0 0 1-7.877-3.08ZM15.75 9.75l-4.5 4.5-2.25-2.25'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.516 2.17a.75.75 0 0 0-1.032 0 11.209 11.209 0 0 1-7.877 3.08.75.75 0 0 0-.722.515A12.74 12.74 0 0 0 2.25 9.75c0 5.942 4.064 10.933 9.563 12.348a.749.749 0 0 0 .374 0c5.499-1.415 9.563-6.406 9.563-12.348 0-1.39-.223-2.73-.635-3.985a.75.75 0 0 0-.722-.516 11.209 11.209 0 0 1-7.877-3.08ZM15.75 9.75l-4.5 4.5-2.25-2.25'/%3E%3C/svg%3E");
}
.dcc-atout--cadeaux::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.375 3a1.875 1.875 0 0 0 0 3.75h1.875v4.5H3.375A1.875 1.875 0 0 1 1.5 9.375v-.75c0-1.036.84-1.875 1.875-1.875h3.193A3.375 3.375 0 0 1 12 2.753a3.375 3.375 0 0 1 5.432 3.997h3.943c1.035 0 1.875.84 1.875 1.875v.75c0 1.036-.84 1.875-1.875 1.875H12.75v-4.5h1.875a1.875 1.875 0 1 0-1.875-1.875V6.75h-1.5V4.875C11.25 3.839 10.41 3 9.375 3ZM11.25 12.75H3v6.75a2.25 2.25 0 0 0 2.25 2.25h6v-9ZM12.75 12.75v9h6a2.25 2.25 0 0 0 2.25-2.25v-6.75h-8.25Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.375 3a1.875 1.875 0 0 0 0 3.75h1.875v4.5H3.375A1.875 1.875 0 0 1 1.5 9.375v-.75c0-1.036.84-1.875 1.875-1.875h3.193A3.375 3.375 0 0 1 12 2.753a3.375 3.375 0 0 1 5.432 3.997h3.943c1.035 0 1.875.84 1.875 1.875v.75c0 1.036-.84 1.875-1.875 1.875H12.75v-4.5h1.875a1.875 1.875 0 1 0-1.875-1.875V6.75h-1.5V4.875C11.25 3.839 10.41 3 9.375 3ZM11.25 12.75H3v6.75a2.25 2.25 0 0 0 2.25 2.25h6v-9ZM12.75 12.75v9h6a2.25 2.25 0 0 0 2.25-2.25v-6.75h-8.25Z'/%3E%3C/svg%3E");
}

/* Mobile : les 3 atouts restent sur une ligne chacun, sans écrasement */
@media (max-width: 600px) {
	.dcc-atouts .wp-block-columns {
		gap: 1.8rem;
	}
}

/* ===================================================================
   CHRONOLOGIE (.dcc-timeline) — pages institutionnelles de marque
   =================================================================== */

/* Filet vertical continu, tiré derrière les pastilles. Il s'arrête à 0.7rem
   des extrémités pour ne pas dépasser sous la première et la dernière
   pastille (dont le centre est calé sur la 1re ligne de texte de l'entrée). */
.dcc-timeline {
	position: relative;
	padding-left: 2.4rem;
}
.dcc-timeline::before {
	content: "";
	position: absolute;
	left: 0.45rem;
	top: 0.7rem;
	bottom: 0.7rem;
	width: 2px;
	background: var(--wp--preset--color--border-whisper);
}

/* Pastille d'entrée. Le décalage négatif la sort du padding du conteneur pour
   la centrer sur le filet : -2.4rem ramène au bord du conteneur, +0.45rem
   rejoint le filet, -5px recentre la pastille (12px) sur ses 2px de largeur.
   L'anneau blanc masque le filet derrière la pastille : sans lui, le trait
   resterait visible en transparence sur les bords arrondis. */
.dcc-timeline__item {
	position: relative;
}
.dcc-timeline__item::before {
	content: "";
	position: absolute;
	left: calc(-2.4rem + 0.45rem - 5px);
	top: 0.55rem;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 4px var(--wp--preset--color--base);
}

/* L'année : repère de lecture, d'où le rouge de marque et la graisse forte. */
.dcc-timeline__year {
	margin: 0 0 0.15rem;
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 2px;
	color: var(--wp--preset--color--link);
}
.dcc-timeline__item p:last-child {
	margin-bottom: 0;
}

@media (max-width: 600px) {
	.dcc-timeline {
		padding-left: 1.8rem;
	}
	.dcc-timeline__item::before {
		left: calc(-1.8rem + 0.45rem - 5px);
	}
}

/* ===================================================================
   CARTE DE MARQUE (.dcc-marque-logo) — section « Nos marques »
   =================================================================== */

/* Bandeau de logo d'une carte .dcc-card. Contrairement à .dcc-card__img
   (photo recadrée en 5/4, `object-fit: cover`), un logo ne doit JAMAIS être
   rogné : il est donc contenu dans une boîte de hauteur fixe.
   La spécificité (0,2,0) passe devant `.dcc-card > *` (0,1,0), dont le
   padding latéral décollerait le bandeau des bords de la carte.

   ⚠️ Fond BLANC obligatoire, comme les vignettes .dcc-souscat__img de la page
   « marques » : les PNG de logos ne sont pas détourés, ils portent leur propre
   fond blanc opaque. Sur un fond beige (`section-light`), chacun affichait donc
   un rectangle blanc en écusson. Même piège que le logo du site (voir
   MIGRATION-FSE.md, « sans-fond » ≠ transparent). */
.dcc-card .dcc-marque-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 180px;
	margin: 0;
	padding: 1.5rem 2rem;
	background: var(--wp--preset--color--base);
}

/* Bornes reprises des vignettes de la page « marques », où elles équilibrent
   des logos de proportions très différentes : Gritzner est un bandeau large
   (431x117), Sigma un bloc presque carré (284x177) très margé. Contraindre par
   la seule largeur écraserait Sigma à la moitié de la taille de Gritzner. */
.dcc-card .dcc-marque-logo img {
	width: auto;
	height: auto;
	max-width: 220px;
	max-height: 130px;
	object-fit: contain;
}