/*
Theme Name: Blocksy Child — Plaisirs d'Orient
Theme URI: https://refonte.plaisirsdorient.com
Description: Thème enfant de Blocksy pour la refonte de plaisirsdorient.com. Contient les hooks et le CSS spécifiques au projet, versionnés en Git conformément au §8.1 du cahier des charges.
Author: Plaisirs d'Orient
Template: blocksy
Version: 1.12.75
License: GNU General Public License v2 or later
Text Domain: blocksy-child
*/

/* Blocksy charge ses propres feuilles de style séparément — ne pas importer
   style.css du parent, ce serait une requête HTTP inutile. */

/* ==========================================================================
   JETONS
   Charte Al Mashriq, appliquée le 2026-09-03 sur proposition du client.
   ========================================================================== */

:root {
	/* Charte Al Mashriq (2026-09-03) — issue du document « Accueil Al Mashriq
	   recoloré » : encre, laiton, sable, grès, brun oud. Réversible par Git. */
	--pdo-ink:    #17120c;   /* encre : noir d'imprimerie légèrement relevé */
	--pdo-ink-2:  #4a443c;   /* texte courant */
	--pdo-muted:  #6a6158;   /* grès foncé : mentions secondaires */
	--pdo-ground: #ffffff;
	--pdo-sand:   #faf7f2;   /* fond alterné chaud */
	--pdo-line:   #e3d9cc;   /* filets */
	--pdo-laiton: #a8834e;   /* accent : le laiton, jamais en aplat sauf bloc marque */
	--pdo-sable:  #ece7de;
	--pdo-gres:   #a29481;
	--pdo-oud:    #201b13;
}


/* ==========================================================================
   MÉGA-MENU

   Le méga-menu de Blocksy est réservé à sa version Pro. Celui-ci le remplace
   en CSS seul, sans extension et sans JavaScript.

   Rien à générer côté balisage : WordPress produit déjà la hiérarchie complète
   en <ul> imbriquées, sémantiquement correctes et navigables au clavier. On se
   contente de les disposer autrement à partir du bureau.

   Ne s'applique qu'aux items portant la classe .pdo-mega. Cette classe est
   posée par functions.php selon une règle structurelle — branche à trois
   niveaux — et non sur un nom de catégorie. Toute catégorie ajoutée plus
   tard basculera donc d'elle-même. Le nombre de colonnes suit le contenu :
   rien n'est calé sur l'arborescence d'aujourd'hui.
   Une branche large mais plate (sans petits-enfants) ne bascule pas en
   méga-menu : la grille ci-dessous suppose des têtes de colonne (des items
   qui ont eux-mêmes un sous-menu) — sans ça, chaque entrée s'affiche en
   style « titre », ce qui est illisible pour une simple liste plate.
   ========================================================================== */

@media (min-width: 1000px) {

	/* Le panneau doit se caler sur la barre de menu, pas sur l'item. Blocksy
	   maintient le <li> en position:relative avec une règle plus spécifique
	   que la nôtre — c'est le seul !important structurel de ce bloc, et il
	   est là pour ça. */
	.pdo-mega {
		position: static !important;
	}

	.pdo-mega > .sub-menu {
		/* Une seule rangée : la grille coule en colonnes (auto-flow: column),
		   jamais à la ligne. Les catégories À enfants occupent toute la
		   hauteur (grid-row: 1/-1 plus bas) ; celles SANS enfants prennent une
		   cellule, et « dense » les empile les unes sous les autres dans la
		   même colonne au lieu de leur en ouvrir une chacune. Les 6 rangées
		   plafonnent l'empilement — au-delà, une colonne de plus s'ouvre. */
		display: grid;
		grid-auto-flow: column dense;
		grid-template-rows: repeat(6, auto);
		grid-auto-columns: minmax(150px, 1fr);
		align-items: start;
		gap: 0 44px;

		left: 0;
		right: 0;
		top: 100%;
		margin-top: 0 !important;
		width: 100%;
		max-width: none;
		/* Le fond court sur toute la largeur, le contenu reste centré. */
		padding: 34px max(40px, calc((100% - 1400px) / 2)) 38px;
		border-radius: 0;

		background: var(--dropdown-background-color, var(--theme-palette-color-4, #0a0500));
		border-top: 1px solid rgba(255, 255, 255, .08);
		box-shadow: 0 20px 44px rgba(0, 0, 0, .3);
	}

	/* Une catégorie qui a des enfants devient une colonne pleine hauteur. */
	.pdo-mega > .sub-menu > li:has(> .sub-menu) {
		grid-row: 1 / -1;
	}

	/* Blocksy pose chaque <li> de menu en flex horizontal centré : dans une
	   colonne, ça met le sous-menu À CÔTÉ du titre au lieu d'en dessous, titre
	   centré verticalement et entrées tronquées. On repasse la colonne en
	   flux vertical normal. */
	.pdo-mega > .sub-menu > li {
		display: block !important;
		min-width: 0;
		overflow: visible;
	}

	.pdo-mega > .sub-menu > li > .ct-sub-menu-parent {
		display: block;
		width: 100%;
	}

	/* Le panneau vit sur le fond sombre des déroulants : liens clairs,
	   survol sur l'accent de la palette — tout suit le Customizer. */
	.pdo-mega > .sub-menu .ct-menu-link {
		color: var(--pdo-sable, #ece7de);
		min-height: 0;
	}

	.pdo-mega > .sub-menu .ct-menu-link:hover {
		color: var(--theme-palette-color-1, #ffcd05);
	}

	/* Titre de colonne. Les items qui ont des enfants enveloppent leur lien
	   dans un span .ct-sub-menu-parent — d'où le sélecteur double. */
	.pdo-mega > .sub-menu > li > .ct-menu-link,
	.pdo-mega > .sub-menu > li > .ct-sub-menu-parent > .ct-menu-link {
		display: block;
		width: 100%;
		font-size: 12px;
		line-height: 1.3;
		letter-spacing: .14em;
		text-transform: uppercase;
		font-weight: 600;
		padding: 0 0 10px;
		margin-bottom: 12px;
		border-bottom: 1px solid rgba(255, 255, 255, .16);
	}

	/* Le troisième niveau se déplie SOUS son titre au lieu de s'ouvrir en
	   cascade sur le côté. Redéfinir var(--dropdown-position) n'a pas suffi :
	   Blocksy positionne ses sous-menus imbriqués en absolu par une règle
	   directe. On force le retour au flux — deuxième et dernier !important
	   structurel du bloc. */
	.pdo-mega > .sub-menu .sub-menu {
		--dropdown-position: static;
		position: static !important;
		inset: auto !important;

		display: block;
		float: none;

		/* inherit et non visible/auto : panneau fermé, ces listes doivent
		   être fermées aussi — les forcer les laissait invisibles mais
		   survolables sous la barre, et le panneau s'ouvrait dès que la
		   souris approchait de leur zone. */
		opacity: 1;
		visibility: inherit;
		transform: none !important;
		transition: none;
		pointer-events: inherit;

		min-width: 0;
		width: auto;
		margin: 0;
		padding: 0;
		background: none;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}

	/* Les items du troisième niveau : mêmes contraintes de flux que les
	   colonnes, sinon le flex de Blocksy les compresse et les tronque. */
	.pdo-mega > .sub-menu .sub-menu > li {
		display: block !important;
		min-width: 0;
		overflow: visible;
	}

	/* Entrées du troisième niveau : plus discrètes que les titres, aérées,
	   sur une seule ligne complète. */
	.pdo-mega > .sub-menu .sub-menu .ct-menu-link {
		display: block;
		width: 100%;
		padding: 7px 0;
		font-size: 13.5px;
		line-height: 1.5;
		letter-spacing: .015em;
		text-transform: none;
		font-weight: 400;
		overflow: visible;
		color: rgba(236, 231, 222, .78);
		border: 0;
		margin: 0;
	}

	.pdo-mega > .sub-menu .sub-menu .ct-menu-link:hover {
		color: var(--theme-palette-color-1, #ffcd05);
	}

	/* Les indicateurs de sous-menu n'ont plus de sens : tout est déplié. */
	.pdo-mega > .sub-menu .ct-toggle-dropdown-mobile,
	.pdo-mega > .sub-menu .ct-toggle-dropdown-desktop,
	.pdo-mega > .sub-menu .ct-icon {
		display: none;
	}

	/* ------------------------------------------------------------------
	   La barre de menu elle-même : même fond sombre que les déroulants et
	   le panneau. Ciblée par :has(nav) pour ne toucher que la rangée qui
	   porte la navigation, pas celles du logo ou de la recherche. */
	/* !important assumé : le CSS dynamique de Blocksy s'imprime après cette
	   feuille et repeint la rangée — sans lui, la barre reste blanche. */
	.ct-header [data-row]:has(nav) {
		background: var(--theme-palette-color-4, #0a0500) !important;
		/* Ancre les panneaux sur cette rangée : top:100% tombe pile sous la
		   barre, sans l'interstice du conteneur parent. */
		position: relative;
	}

	.ct-header [data-row]:has(nav) > div {
		background: transparent !important;
	}

	/* Liens du premier niveau : blanc sur la barre sombre. Le survol et
	   l'item actif gardent l'accent de la palette, comme avant. */
	.ct-header nav > ul > li > .ct-menu-link,
	.ct-header nav > ul > li > .ct-sub-menu-parent > .ct-menu-link {
		color: var(--pdo-sable, #ece7de);
	}

	.ct-header nav > ul > li:hover > .ct-menu-link,
	.ct-header nav > ul > li:hover > .ct-sub-menu-parent > .ct-menu-link,
	.ct-header nav > ul > li.current-menu-item > .ct-menu-link,
	.ct-header nav > ul > li.current-menu-ancestor > .ct-sub-menu-parent > .ct-menu-link {
		color: var(--theme-palette-color-1, #ffcd05);
	}

}

/* Sous 1000 px, on ne touche à rien : le menu mobile de Blocksy gère
   l'accordéon, et un panneau multi-colonnes n'y aurait aucun sens. */

/* ==========================================================================
   PAGE D'ACCUEIL — accents typographiques uniquement.
   Toute la mise en page (grilles, fonds, dégradés, largeurs, hauteurs)
   vit dans les attributs des blocs : elle est visible et modifiable dans
   l'éditeur. Ici, seulement ce que l'interface des blocs ne sait pas
   régler : casse, espacement des lettres, filets.
   ========================================================================== */

/* La mosaïque colle au noir du menu. L'espace venait de l'espacement
   vertical de contenu de Blocksy, porté par .ct-container-full
   (data-vertical-spacing) — pas par main ni entry-content. */
.home .ct-container-full { padding-top: 0 !important; }
.home .entry-content { margin-top: 0 !important; }

/* Le H1 de l'accueil vit dans le contenu : pas de titre de page en double. */
.home .entry-header,
.home .page-title { display: none; }

.pdo-eyebrow { font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
	color: #78736a; font-weight: 500; }

.pdo-voir a { font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
	text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 3px; }

.pdo-btn .wp-block-button__link { font-size: 11px; letter-spacing: .16em;
	text-transform: uppercase; font-weight: 500; }

.pdo-reassurance { border-top: 1px solid #e4e0d8; border-bottom: 1px solid #e4e0d8;
	padding: 24px 0; }
.pdo-reassurance .wp-block-column:not(:first-child) { border-left: 1px solid #e4e0d8; }
.pdo-rea-t { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
	font-weight: 600; margin-bottom: 4px; }
.pdo-rea-d { font-size: 12.5px; color: #78736a; }

/* Section texte de l'accueil, refaite le 2026-09-22 pour le mot-clé
   « vêtements musulmans ». Les intertitres sont des H2 (structure sémantique
   voulue par le client) mais gardent l'allure discrète du bandeau de
   réassurance. Sélecteurs préfixés par .home : la règle .home h2.wp-block-heading
   (26 px) les écraserait sinon. */
.home .pdo-seo-cols :is(h2, h3).wp-block-heading,
.home .pdo-seo-pied h2.wp-block-heading { font-size: 12px; letter-spacing: .18em;
	text-transform: uppercase; font-weight: 600; line-height: 1.5; margin: 0 0 14px; }
.home .pdo-seo-cols h2.wp-block-heading::after { content: ""; display: block; width: 26px;
	height: 2px; margin-top: 10px; background: var(--pdo-laiton); }
.pdo-seo-cols p,
.pdo-seo-pied p { font-size: 14.5px; line-height: 1.68; color: #3d3a35; }
.pdo-seo-cols a,
.pdo-seo-pied a { text-decoration: none; border-bottom: 1px solid #c9cbd6; }

/* Les quatre univers en onglets (script : js/onglets.js). Sans JavaScript,
   les panneaux s'affichent les uns sous les autres, espacés. */
.pdo-onglets { max-width: 1040px; margin: 0 auto; }
.pdo-onglet + .pdo-onglet { margin-top: 56px; }
.pdo-onglets.est-actif .pdo-onglet { margin-top: 0; }
.pdo-onglet[hidden] { display: none !important; }
.pdo-onglet:focus { outline: none; }
/* Onglets sur UNE seule ligne (demande client du 2026-09-29) : jamais de retour
   à la ligne. Centrés quand ils tiennent (marges automatiques du premier et du
   dernier) ; sinon, sur téléphone, la barre défile horizontalement au doigt.
   Le filet du bas est un fond et non une bordure : avec overflow, une bordure
   rognerait d'un pixel le trait laiton de l'onglet actif. */
.pdo-onglets-liste { display: flex; justify-content: flex-start; flex-wrap: nowrap; gap: 8px 40px;
	overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch;
	background: linear-gradient(var(--pdo-line), var(--pdo-line)) left bottom / 100% 1px no-repeat;
	margin: 34px 0 40px; }
.pdo-onglets-liste::-webkit-scrollbar { display: none; }
/* Resserrement automatique quand les libellés ne tiennent pas (js/onglets.js). */
.pdo-onglets-liste.serre { column-gap: 24px; }
.pdo-onglets .pdo-onglets-liste.serre .pdo-onglets-bouton { letter-spacing: .1em; }
.pdo-onglets-liste.tres-serre { column-gap: 16px; }
.pdo-onglets .pdo-onglets-liste.tres-serre .pdo-onglets-bouton { letter-spacing: .04em; font-size: 11px; }
.pdo-onglets-liste > :first-child { margin-left: auto; }
.pdo-onglets-liste > :last-child { margin-right: auto; }
.pdo-onglets .pdo-onglets-bouton { appearance: none; background: none; border: 0;
	border-bottom: 2px solid transparent; border-radius: 0; box-shadow: none;
	flex: 0 0 auto; white-space: nowrap;
	margin-top: 0; margin-bottom: 0; padding: 0 2px 14px; min-height: 0; height: auto;
	font-family: inherit; font-size: 12px; line-height: 1.4; font-weight: 600;
	letter-spacing: .18em; text-transform: uppercase; color: var(--pdo-muted);
	cursor: pointer; transition: color .2s, border-color .2s; }
.pdo-onglets .pdo-onglets-bouton:hover { color: var(--pdo-ink); background: none; }
.pdo-onglets .pdo-onglets-bouton[aria-selected="true"] { color: var(--pdo-ink);
	border-bottom-color: var(--pdo-laiton); }
.pdo-onglets .pdo-onglets-bouton:focus-visible { outline: 1px solid var(--pdo-laiton);
	outline-offset: 4px; }
.pdo-onglet-cols.wp-block-columns { gap: 48px; margin: 0; }
.pdo-onglet-photo { margin: 0; }
.pdo-onglet-photo img { display: block; width: 100%; aspect-ratio: 4 / 5; max-height: 340px;
	object-fit: cover; object-position: 50% 15%; }
@media (max-width: 781px) {
	.pdo-onglets-liste { gap: 6px 22px; margin: 26px 0 28px; }
	.pdo-onglets .pdo-onglets-bouton { letter-spacing: .12em; font-size: 11.5px; }
	.pdo-onglet-cols.wp-block-columns { gap: 24px; }
	.pdo-onglet-photo img { aspect-ratio: 16 / 9; max-height: 220px; }
}
.pdo-seo-pied { max-width: 760px; margin: 48px auto 0; text-align: center; }

/* Sous-titres des panneaux (qamis, sarouel, musc...) : précédés d'un tiret
   laiton, en casse normale pour se distinguer du titre du panneau. */
.home .pdo-seo-cols h3.wp-block-heading { font-size: 14.5px;
	letter-spacing: 0; text-transform: none; color: var(--pdo-ink); margin: 20px 0 6px; }
.home .pdo-seo-cols h3.wp-block-heading::before { content: "\2014\00a0";
	color: var(--pdo-laiton); }
.pdo-seo-cols h3 + p { margin-top: 0; }

/* Tableau comparatif de l'onglet femme. */
.pdo-seo-table { margin: 18px 0 16px; }
/* Le cadre de Blocksy et le trait de 3 px de Gutenberg sous l'en-tête sont retirés. */
.wp-block-table.pdo-seo-table table { border: 0; }
.wp-block-table.pdo-seo-table thead { border-bottom: 0; }
.pdo-seo-table table { border-collapse: collapse; width: 100%; font-size: 13.5px;
	line-height: 1.5; color: #3d3a35; }
.pdo-seo-table th { font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
	font-weight: 600; color: var(--pdo-ink); text-align: left;
	border: 0; border-bottom: 1px solid var(--pdo-laiton); padding: 0 10px 8px 0; }
.pdo-seo-table td { border: 0; border-bottom: 1px solid #ebe4d9; padding: 10px 10px 10px 0;
	vertical-align: top; }
.pdo-seo-table td:first-child { font-weight: 600; color: var(--pdo-ink); white-space: nowrap; }

/* FAQ de l'accueil : des volets <details>, lisibles sans JavaScript. */
.pdo-faq .wp-block-details { border-bottom: 1px solid var(--pdo-line); padding: 16px 2px;
	margin: 0; }
.pdo-faq summary { cursor: pointer; list-style: none; color: var(--pdo-ink);
	font-weight: 600; font-size: 15px; display: flex; justify-content: space-between;
	gap: 16px; }
.pdo-faq summary::-webkit-details-marker { display: none; }
.pdo-faq summary::after { content: "+"; flex: 0 0 24px; height: 24px; box-sizing: border-box;
	border: 1px solid var(--pdo-laiton); border-radius: 50%; color: var(--pdo-laiton);
	font-size: 15px; font-weight: 400; line-height: 22px; text-align: center; }
.pdo-faq details[open] summary::after { content: "\2013"; }
.pdo-faq details p { margin: 10px 0 0; font-size: 14.5px; line-height: 1.68;
	color: #3d3a35; }

/* Appel à l'action de fin d'accueil : bande sable (fond de la section texte), filet laiton de la
   charte en tête. Boutons carrés, en petites capitales comme les liens
   .pdo-lien du reste de la page. */
.pdo-cta { border-top: 3px solid var(--pdo-laiton); }
.pdo-cta .pdo-cta-titre { color: var(--pdo-ink); font-size: clamp(22px, 2.6vw, 28px);
	font-weight: 600; line-height: 1.3; margin: 0 0 10px; }
.pdo-cta .pdo-cta-texte { color: var(--pdo-muted); font-size: 14.5px; line-height: 1.6; margin: 0 0 28px; }
.pdo-cta-boutons { gap: 14px; }
.pdo-cta .wp-block-button .wp-block-button__link { font-size: 11px; letter-spacing: .16em;
	text-transform: uppercase; font-weight: 600; border-radius: 0; padding: 15px 30px;
	min-height: 0; transition: background-color .2s, color .2s, border-color .2s; }
.pdo-cta .pdo-cta-plein .wp-block-button__link { background: var(--pdo-ink);
	color: #ffffff; border: 1px solid var(--pdo-ink); }
.pdo-cta .pdo-cta-plein .wp-block-button__link:hover { background: var(--pdo-oud); border-color: var(--pdo-laiton); }
.pdo-cta .pdo-cta-contour .wp-block-button__link { background: transparent;
	color: var(--pdo-ink); border: 1px solid var(--pdo-laiton); }
.pdo-cta .pdo-cta-contour .wp-block-button__link:hover { background: var(--pdo-ink); color: #ffffff; border-color: var(--pdo-ink); }


@media (max-width: 700px) {
	.pdo-reassurance .wp-block-column { border-left: 0 !important; }
}

/* ------------------------------------------------------------------ *
 * Bandeau de sous-catégories en tête des pages catégorie.
 * La navigation qui tient lieu de filtres (option D, 2026-09-02) :
 * des liens statiques vers les enfants, pas de facettes.
 * ------------------------------------------------------------------ */
/* Une seule ligne : les sous-catégories à gauche, le menu de tri natif
   aligné à droite sur la même rangée (décision client 2026-09-02). */
.pdo-barre { display: flex; flex-wrap: wrap; align-items: center;
	justify-content: space-between; gap: 10px; margin: 0 0 26px; }
/* margin-left auto : le tri reste collé à droite même quand les
   sous-catégories occupent toute la ligne et le renvoient dessous. */
.pdo-barre-droite { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.pdo-barre .woocommerce-ordering { margin: 0; flex: 0 0 auto; }
/* Compteur de résultats dans la barre, après le tri (demande client). */
.pdo-barre .woocommerce-result-count { display: block; margin: 0; font-size: 11.5px;
	letter-spacing: .06em; text-transform: uppercase; color: var(--pdo-muted); white-space: nowrap; }
/* Chevron sur le menu de tri : le natif est masqué par le thème. */
.pdo-barre .woocommerce-ordering select { -webkit-appearance: none; appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2317120c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
	background-repeat: no-repeat; background-position: right 12px center; cursor: pointer; }
.pdo-barre .woocommerce-ordering select { border: 1px solid var(--pdo-line);
	background-color: var(--pdo-ground); color: var(--pdo-ink); font-size: 13.5px;
	padding: 8px 34px 8px 16px; border-radius: 0; height: auto;
	min-height: 0; line-height: 1.63; }

.pdo-souscats { display: flex; flex-wrap: wrap; gap: 8px;
	flex: 1 1 auto; margin: 0; }
.pdo-souscats a { display: inline-block; padding: 8px 16px;
	border: 1px solid var(--pdo-line); color: var(--pdo-ink);
	font-size: 13.5px; text-decoration: none; }
.pdo-souscats a:hover { background: var(--pdo-ink); border-color: var(--pdo-ink);
	color: #ffffff; }

/* Mobile : la barre passe en colonne. Le tri collé à droite (margin-left
   auto) le décalait sous les pastilles, au milieu de la ligne. Les
   pastilles sont aussi resserrées pour tenir en deux lignes. */
@media (max-width: 600px) {
	.pdo-barre { flex-direction: column; align-items: stretch; gap: 12px; margin-bottom: 20px; }
	.pdo-barre-droite { margin-left: 0; width: 100%; }
	.pdo-barre .woocommerce-ordering { flex: 1 1 auto; width: 100%; }
	.pdo-barre .woocommerce-ordering select { width: 100%; }
	/* Pastilles en grille de deux colonnes sur toute la largeur (demande
	   client du 2026-09-29 : l'habillage en vrac était disgracieux). Une
	   pastille seule en fin de liste prend la ligne entière. */
	.pdo-souscats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
	.pdo-souscats a { display: flex; align-items: center; justify-content: center;
		text-align: center; padding: 8px 8px; font-size: 12.5px; line-height: 1.3; }
	.pdo-souscats a:last-child:nth-child(odd) { grid-column: 1 / -1; }
	/* Titre de page : trois lignes sur un téléphone, c'est trop. */
	.hero-section .page-title { font-size: 24px; line-height: 1.25; }
}
/* Blocksy ajoute sa propre icône de tri dans le formulaire : inutile, notre
   menu porte déjà un chevron, et sur mobile elle tombe sous le menu. */
.pdo-barre .woocommerce-ordering > svg { display: none; }

/* ------------------------------------------------------------------ *
 * Cartes produit : alignement constant quelle que soit l'image.
 * Les photos importées ont des formats hétérogènes (744x800, 792x1024,
 * 1100x1422…) : la zone image est figée à un ratio portrait 2/3 —
 * celui d'un mannequin debout, pour que les packshots sur fond blanc
 * remplissent le cadre —, le titre réserve deux lignes pour que les
 * prix tombent à la même hauteur, et le bouton est épinglé en bas de
 * carte. Règle structurelle : s'applique à toutes les grilles
 * WooCommerce (accueil, catégories, associés). Le rognage des marges
 * blanches recompose les toiles au même ratio 2/3.
 * ------------------------------------------------------------------ */
.products .product { display: flex; flex-direction: column; }
.products .product .ct-media-container { aspect-ratio: 2 / 3; width: 100%; }
.products .product .ct-media-container img { width: 100%; height: 100%;
	object-fit: cover; }
.products .product .woocommerce-loop-product__title { min-height: 2.7em;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
	overflow: hidden; }
.products .product .ct-woo-card-actions { margin-top: auto; }

/* Pas de ligne de catégories sur les cartes produit (décision client
   2026-09-02) — elle reste sur la fiche produit pour le maillage. */
.products .product .entry-meta { display: none; }

/* Bouton sur toute la largeur de la carte, et rythme vertical resserré
   entre titre, prix et bouton (décision client 2026-09-02). */
.products .product .ct-woo-card-actions,
.products .product .ct-woo-card-actions .button,
.products .product > .button { width: 100%; }
.products .product .button { display: block; text-align: center; }
.products .product .woocommerce-loop-product__title { margin-top: 10px;
	margin-bottom: 2px; }
.products .product .price { margin-bottom: 10px; }
.products .product .ct-woo-card-actions { margin-bottom: 0; }


/* ==========================================================================
   CHARTE AL MASHRIQ — règles d'écriture (proposition du 2026-09-03)
   Surtitres en laiton, étiquettes ancrées sur un filet laiton de 3 px,
   liens soulignés à la place des boutons pleins dans les photos, titres de
   section en 600/26 px, nom de produit souligné au survol seulement, prix en
   encre au même corps que le nom. Tout est réversible par Git.
   ========================================================================== */
.pdo-eyebrow { color: var(--pdo-laiton); }
.pdo-etiquette { border-left: 3px solid var(--pdo-laiton); }
.pdo-etiquette-haut { border-left: 0; border-top: 3px solid var(--pdo-laiton); }
.pdo-icone { display: block; line-height: 0; color: var(--pdo-laiton); margin-bottom: 8px; }
.pdo-lien a { display: inline-block; font-size: 11px; letter-spacing: .16em;
	text-transform: uppercase; font-weight: 600; color: var(--pdo-ink);
	text-decoration: none; border-bottom: 1px solid var(--pdo-laiton);
	padding-bottom: 3px; }
.pdo-lien a:hover { color: var(--pdo-laiton); }
.home h2.wp-block-heading { font-weight: 600; font-size: 26px; }
.pdo-souscats a:hover { background: var(--pdo-ink); border-color: var(--pdo-ink); }
.products .product .woocommerce-loop-product__title a { text-decoration: none; }
.products .product .woocommerce-loop-product__title a:hover { text-decoration: underline;
	text-underline-offset: 3px; }
.products .product .price { color: var(--pdo-ink); font-size: 17px; font-weight: 500; }

/* Étiquettes du héro : un seul format pour les trois (largeur et hauteur
   fixes, contenu calé en bas) — demande client du 2026-09-03. */
.pdo-etiquette-hero { width: 236px; max-width: 100%; min-height: 124px;
	display: flex; flex-direction: column; justify-content: flex-end; }
.pdo-etiquette-hero > * { margin-top: 0; }
.pdo-etiquette-hero .pdo-eyebrow { margin-bottom: 6px; font-size: 10.5px; }
.pdo-etiquette-hero .wp-block-heading { margin-bottom: 10px; font-weight: 600; }

/* Menu : le texte est en sable (beige clair de la charte), pas en blanc —
   demande client du 2026-09-03. Sur la barre comme dans le panneau. */
.ct-header [data-row]:has(nav) .ct-menu-link,
.ct-header [data-row]:has(nav) .ct-toggle-dropdown-desktop { color: var(--pdo-sable); }
.ct-header [data-row]:has(nav) .ct-menu-link:hover,
.ct-header [data-row]:has(nav) .current-menu-item > .ct-menu-link,
.ct-header [data-row]:has(nav) .current-menu-ancestor > .ct-menu-link { color: var(--pdo-laiton); }

/* Cartouches des blocs promo : un seul format pour les trois (largeur et
   hauteur fixes, contenu centré) — demande client du 2026-09-03. */
.pdo-etiquette-haut { width: 330px; max-width: 100%; min-height: 156px;
	display: flex; flex-direction: column; justify-content: center; }
.pdo-etiquette-haut > * { margin-top: 0; }
.pdo-etiquette-haut .wp-block-heading { font-weight: 600; }

/* Cartes produit : un liseré fin encadre le nom et le prix, entre l'image
   et le bouton (demande client du 2026-09-03). Le cadre est dessiné en deux
   moitiés — haut sur le titre, bas sur le prix — pour ne toucher ni au
   balisage ni à l'alignement des cartes. */
.products .product .woocommerce-loop-product__title { border: 1px solid var(--pdo-line);
	border-bottom: 0; margin: 10px 0 0; padding: 10px 12px 4px; }
.products .product .price { border: 1px solid var(--pdo-line); border-top: 0;
	margin: 0 0 10px; padding: 0 12px 10px; }

/* Sur un aplat laiton, le filet laiton d'une étiquette ne se voit plus :
   il passe en encre (bloc marque maison, tuile Musc & Parfum). */
.wp-block-group[style*="#a7824e"] .pdo-etiquette,
.wp-block-group[style*="#a8834e"] .pdo-etiquette { border-color: var(--pdo-ink); }

/* Pages catégorie : la hauteur du bandeau (400 -> 170 px) est réglée dans le
   personnalisateur (woo_categories_hero_height), pas ici ; demande client
   du 2026-09-03. Titre à la graisse de la charte. */
[data-prefix="woo_categories"] .hero-section .page-title { font-weight: 600; font-size: 34px; }

/* Pages catégorie : espacements resserrés pour remonter la première rangée
   (demande client du 2026-09-03). L'en-tête (150 -> 90 px) et le bandeau
   (170 -> 130 px) sont réglés dans le personnalisateur, pas ici. */
[data-prefix="woo_categories"] { --theme-content-vertical-spacing: 20px; }
[data-prefix="woo_categories"] .pdo-barre { margin-bottom: 10px; }
[data-prefix="woo_categories"] .woo-listing-top { margin-bottom: 0; }
[data-prefix="woo_categories"] .hero-section .ct-breadcrumbs { margin-top: 8px;
	font-size: 12.5px; letter-spacing: .04em; }
/* Bandeau catégorie : marges internes 50 -> 24 px (le sélecteur préfixé
   par html dépasse la règle en ligne de Blocksy sans !important). */
html [data-prefix="woo_categories"] .hero-section[data-type="type-2"] { --container-padding: 14px 0px; }
[data-prefix="woo_categories"] .woo-listing-top .woocommerce-result-count { display: none; }
/* Cartes : titre un peu plus près de l'image (gain vertical). */
[data-prefix="woo_categories"] .products .product .woocommerce-loop-product__title { margin-top: 6px; }

/* Tuiles univers de l'accueil : étiquette centrée dans la tuile, contenu
   centré, grande icône (demande client du 2026-09-03). */
.pdo-etiquette-univers { min-height: 224px; display: flex; flex-direction: column;
	justify-content: center; align-items: center; text-align: center; }
.pdo-etiquette-univers > * { margin-top: 0; }
.pdo-etiquette-univers .pdo-icone { margin-bottom: 14px; }
.pdo-etiquette-univers .pdo-icone svg { width: 56px; height: 56px; }
.pdo-etiquette-univers .wp-block-heading { margin-bottom: 8px; font-size: 20px; font-weight: 600; }
.pdo-etiquette-univers .pdo-eyebrow { margin: 0; }

/* Méga-menu : pas de séparateur tireté de Blocksy (--dropdown-divider) au-dessus
   des colonnes ni entre les entrées — seul le filet sous les titres de colonne
   subsiste (demande client du 2026-09-03). */
@media (min-width: 1000px) {
	.pdo-mega > .sub-menu { --dropdown-divider: none; }
	.pdo-mega > .sub-menu .menu-item { border-top: 0; }
}

/* Tuiles univers : pas de filet à gauche sur l'étiquette centrée. */
.pdo-etiquette-univers { border-left: 0; }

/* Blocs promo : plus de filet en tête, grande icône au-dessus du surtitre
   (demande client du 2026-09-03). */
.pdo-etiquette-haut { border-top: 0; min-height: 236px; }
.pdo-etiquette-haut .pdo-icone { margin-bottom: 12px; }
.pdo-etiquette-haut .pdo-icone svg { width: 56px; height: 56px; }

/* Tuiles univers : toute la tuile est cliquable — le lien du titre est
   étendu à la tuile entière (demande client du 2026-09-03). */
.wp-block-group:has(> .pdo-etiquette-univers) { position: relative; cursor: pointer;
	transition: transform .2s ease; }
.wp-block-group:has(> .pdo-etiquette-univers):hover { transform: translateY(-3px); }
.pdo-etiquette-univers .wp-block-heading a::after { content: ""; position: absolute; inset: 0; }

/* ==========================================================================
   ESSAI (2026-09-04) — étiquettes du héro transparentes : texte posé sur la
   photo, surtitre laiton, titre blanc, lien blanc souligné laiton.
   RÉVERSIBLE : supprimer ce bloc rend les cartouches blancs (le contenu de
   la page n'a pas été modifié). Les !important lèvent les styles en ligne
   des blocs (fond blanc, marges, corps du titre) sans toucher aux blocs.
   ========================================================================== */
.pdo-etiquette-hero { background-color: transparent !important; border-left: 0;
	padding: 0 !important; width: auto; min-height: 0;
	text-shadow: 0 1px 14px rgba(0, 0, 0, .45); }
.pdo-etiquette-hero .pdo-eyebrow { color: var(--pdo-laiton); font-size: 11px;
	letter-spacing: .2em; margin-bottom: 8px; }
.pdo-etiquette-hero .wp-block-heading { color: #ffffff; font-size: 36px !important;
	line-height: 1.05 !important; margin-bottom: 14px; }
.pdo-etiquette-hero .pdo-lien a { color: #ffffff; border-bottom: 1px solid var(--pdo-laiton);
	padding-bottom: 4px; }
.pdo-etiquette-hero .pdo-lien a:hover { color: var(--pdo-laiton); }
/* Voile sombre en dégradé qui remonte du bas de chaque tuile du héro : le
   texte des étiquettes reste lisible sur les zones claires des photos, sans
   changer ses couleurs. L'étiquette passe au-dessus du voile. */
.wp-block-group:has(> .pdo-etiquette-hero) { position: relative; isolation: isolate; }
.wp-block-group:has(> .pdo-etiquette-hero)::after { content: ""; position: absolute; inset: 0;
	pointer-events: none;
	background: linear-gradient(to top, rgba(23, 18, 12, .82) 0%, rgba(23, 18, 12, .55) 22%, rgba(23, 18, 12, .22) 45%, rgba(23, 18, 12, 0) 66%); }
.pdo-etiquette-hero { position: relative; z-index: 1; }
/* Surtitre laiton : ombre plus dense pour rester lisible sur les zones claires. */
.pdo-etiquette-hero .pdo-eyebrow { text-shadow: 0 1px 3px rgba(0, 0, 0, .75), 0 0 14px rgba(0, 0, 0, .5); }

/* ==========================================================================
   PIED DE PAGE (proposition du 2026-09-04)
   1. Bloc « Tendance actuelle » : titre et flèches lisibles sur le fond
      sombre (ils héritaient de la couleur encre des titres).
   2. Rangée des réseaux : fond sable qui casse entre les deux blocs sombres,
      icônes encre, centrées et plus grandes, survol laiton.
   ========================================================================== */
.ct-trending-block .ct-module-title,
.ct-trending-block .ct-module-title a,
.ct-trending-block .ct-post-title,
.ct-trending-block .ct-post-title a { color: var(--pdo-sable) !important; }
.ct-trending-block .ct-trending-arrows button,
.ct-trending-block .ct-trending-arrows .ct-icon { color: var(--pdo-sable); fill: var(--pdo-sable); border-color: rgba(236, 231, 222, .35); }
.ct-footer [data-row="top"] [data-id="socials"] { justify-content: center; --theme-icon-color: #ffffff; }
.ct-footer [data-row="top"] [data-id="socials"] { --theme-icon-size: 24px; }
.ct-footer [data-row="top"] [data-id="socials"] .ct-icon { width: 24px; height: 24px; fill: #ffffff; }
.ct-footer [data-row="top"] [data-id="socials"] a:hover .ct-icon { fill: var(--pdo-ink); }
.ct-footer [data-row="top"] > div { justify-content: center; }
/* Colonnes du pied de page : titres en petites capitales sable, texte clair,
   liens sable / survol laiton ; bande des réseaux nette et plus fine. */
.ct-footer [data-row="middle"] .wp-block-heading { color: var(--pdo-sable) !important;
	font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600;
	margin: 0 0 16px; }
.ct-footer [data-row="middle"] p, .ct-footer [data-row="middle"] li { color: rgba(236, 231, 222, .78);
	font-size: 14.5px; line-height: 1.7; }
.ct-footer [data-row="middle"] .wp-block-list { list-style: none; padding: 0; margin: 0; }
.ct-footer [data-row="middle"] .wp-block-list li { margin: 0 0 6px; }
.ct-footer [data-row="middle"] a { color: var(--pdo-sable); text-decoration: none; }
.ct-footer [data-row="middle"] a:hover { color: var(--pdo-laiton); }
.ct-footer [data-row="middle"] strong { color: var(--pdo-sable); }
.ct-footer [data-row="top"] { box-shadow: none !important; background-image: none !important; --container-spacing: 14px; }
.ct-footer [data-row="top"] > div { min-height: 0; }
.ct-footer [data-row="bottom"] .ct-footer-copyright { font-size: 12.5px; color: rgba(236, 231, 222, .6); }
/* Accueil : plus de blanc sous la dernière section (rembourrage bas du
   conteneur), la section sable touche le bloc « Tendance ». */
.home .ct-container-full { padding-bottom: 0 !important; }
.home .ct-container-full > .entry-content > :last-child,
.home .entry-content > .wp-block-group.alignfull:last-child { margin-bottom: 0; }
/* Bande des réseaux : fond sable clair de la charte, uni (aucun dégradé ni
   ombre hérités du thème). */
.ct-footer [data-row="top"] { background: var(--pdo-laiton) !important; }
.ct-footer [data-row="top"]::before, .ct-footer [data-row="top"]::after { display: none !important; }
.ct-footer [data-row="top"] > div { background: none !important; box-shadow: none !important; }
/* Tendance actuelle : les deux flèches en laiton (contour et pictogramme). */
.ct-trending-block .ct-slider-arrows > span { color: var(--pdo-laiton) !important;
	border-color: var(--pdo-laiton) !important; }
.ct-trending-block .ct-slider-arrows > span:hover { color: var(--pdo-sand) !important;
	border-color: var(--pdo-sand) !important; }

/* Sélecteur de langue TranslatePress : en haut à droite, à 5 px des bords,
   pour ne plus couvrir le contenu (demande client du 2026-09-04). */
#trp-floater-ls, nav.trp-language-switcher.trp-floating-switcher { top: 0 !important; right: 5px !important; bottom: auto !important; left: auto !important;
	border-radius: 0 0 10px 10px !important; overflow: hidden; }
/* Languette collée en haut : l arrondi regarde vers le site, le bord plat vers l exterieur. */
nav.trp-floating-switcher .trp-language-switcher-inner,
nav.trp-floating-switcher .trp-language-item { border-radius: 0 0 10px 10px !important; }
nav.trp-floating-switcher .trp-language-switcher-inner > :first-child { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; }

/* ==========================================================================
   DÉROULANTS CLASSIQUES — MÊME TYPO QUE LE MÉGA-MENU
   Les déroulants à deux niveaux (Femme, Enfant, Bazar, Bien-être…) tiraient
   leur police des réglages Blocksy (12 px, graisse 500, blanc), le méga-menu
   de sa propre règle (13,5 px, graisse 400, sable). Le client a demandé une
   typo identique : on aligne les déroulants sur les entrées du méga-menu.
   Sélecteur volontairement plus spécifique que la règle générée par le
   Customizer, pour la surcharger sans !important.
   ========================================================================== */

@media (min-width: 1000px) {
	[data-header*="type-1"] .ct-header [data-id="menu"] .menu > li:not(.pdo-mega) .sub-menu .ct-menu-link {
		--theme-link-initial-color: rgba(236, 231, 222, .78);
		--theme-link-hover-color: var(--theme-palette-color-1, #ffcd05);
		--theme-font-size: 13.5px;
		--theme-font-weight: 400;
		line-height: 1.5;
		letter-spacing: .015em;
		text-transform: none;
	}
}

/* ==========================================================================
   PAGINATION PAR DIZAINES
   Blocksy pose display:flex sur .woocommerce-pagination > .page-numbers mais
   aucun justify-content : la barre se colle donc a gauche. On la centre.
   Les points de suspension entre deux reperes n'ont volontairement ni cadre
   ni fond : ils marquent le saut sans se faire passer pour un lien.
   ========================================================================== */

.woocommerce-pagination.pdo-pagination > .page-numbers {
	justify-content: center;
}

.woocommerce-pagination.pdo-pagination .page-numbers.dots {
	border: 0;
	min-width: 0;
	padding: 0 2px;
	opacity: .55;
	letter-spacing: .1em;
}

/* ==========================================================================
   TEXTE SEO SOUS LA GRILLE DES CATÉGORIES (functions.php, pdo_texte_bas)
   Même langage que la section texte de l'accueil (demande client du
   2026-09-22 : « c'est une page catégorie, pas un article ») : bande sable
   pleine largeur, intro centrée, onglets (js/onglets.js), blocs à tiret
   laiton, tableaux et pastilles, puis FAQ à volets et sources.
   ========================================================================== */
.pdo-cat-texte { margin-top: 56px; color: #3d3a35; }
/* Bande sable sur toute la largeur de l'écran, sans barre de défilement
   horizontale : l'ombre étend le fond, le clip-path le recoupe. */
.pdo-cat-bande { background: var(--pdo-sand); box-shadow: 0 0 0 100vmax var(--pdo-sand);
	clip-path: inset(0 -100vmax); padding: 56px 0 48px; }
.pdo-cat-intro { max-width: 1040px; margin: 0 auto; text-align: center; }
.pdo-cat-texte h2 { font-size: 26px; line-height: 1.3; font-weight: 600; color: var(--pdo-ink);
	margin: 0 0 14px; }
.pdo-cat-intro p { font-size: 15px; line-height: 1.72; color: #4a443c; }
.pdo-cat-texte p { margin: 0 0 12px; }
.pdo-cat-texte a { color: var(--pdo-ink); text-decoration: none; border-bottom: 1px solid #c9cbd6; }
.pdo-cat-texte a:hover { color: var(--pdo-laiton); border-bottom-color: var(--pdo-laiton); }

/* Dans les onglets, les titres des panneaux prennent l'allure discrète des
   intertitres de l'accueil (petites capitales et trait laiton). */
.pdo-cat-texte .pdo-onglet h2 { font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
	line-height: 1.5; margin: 0 0 18px; }
.pdo-cat-texte .pdo-onglet h2::after { content: ""; display: block; width: 26px; height: 2px;
	margin-top: 10px; background: var(--pdo-laiton); }
.pdo-cat-texte .pdo-onglet p { font-size: 14.5px; line-height: 1.68; }

/* Blocs (coupes, occasions) : grille de deux colonnes, tiret laiton. */
.pdo-cat-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 48px; }
.pdo-cat-bloc h3 { font-size: 14.5px; font-weight: 600; color: var(--pdo-ink); margin: 0 0 6px; }
.pdo-cat-bloc h3::before { content: "\2014\00a0"; color: var(--pdo-laiton); }
.pdo-cat-bloc p { margin: 0; }
/* Nombre impair de blocs : le dernier prend les deux colonnes, sinon la grille
   reste bancale avec un trou à droite. */
.pdo-cat-grille > .pdo-cat-bloc:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* Texte à gauche, tableau ou pastilles à droite. */
.pdo-cat-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px;
	align-items: center; }

/* Pastilles de couleur. */
.pdo-pastilles { list-style: none; margin: 0; padding: 0; display: grid;
	grid-template-columns: repeat(4, 1fr); gap: 18px 12px; }
.pdo-pastilles li { display: flex; flex-direction: column; align-items: center; gap: 8px;
	font-size: 12px; color: var(--pdo-muted); text-align: center; }
.pdo-pastilles span { width: 38px; height: 38px; border-radius: 50%;
	border: 1px solid var(--pdo-line); box-shadow: inset 0 0 0 3px #ffffff; }

/* FAQ et sources, sous la bande. */
.pdo-cat-texte .pdo-faq { max-width: 760px; margin: 48px auto 0; }
.pdo-cat-texte .pdo-faq h2 { text-align: center; margin-bottom: 18px; }
.pdo-cat-sources { max-width: 760px; margin: 36px auto 24px; padding-top: 16px;
	border-top: 1px solid var(--pdo-line); font-size: 13px; line-height: 1.6; color: var(--pdo-muted); }
.pdo-cat-sources .pdo-cat-signature { font-style: italic; margin-bottom: 12px; }
.pdo-cat-sources .pdo-cat-sources-titre { font-size: 11px; letter-spacing: .16em;
	text-transform: uppercase; font-weight: 600; color: var(--pdo-ink); margin: 0 0 6px; }
.pdo-cat-sources ul { margin: 0; padding-left: 18px; }
.pdo-cat-sources li { margin: 0 0 4px; }
.pdo-cat-texte .pdo-cat-sources a { color: var(--pdo-muted); }

@media (max-width: 781px) {
	.pdo-cat-bande { padding: 40px 0 32px; }
	.pdo-cat-texte h2 { font-size: 22px; }
	.pdo-cat-grille, .pdo-cat-cols { grid-template-columns: 1fr; gap: 20px; }
	.pdo-pastilles { grid-template-columns: repeat(4, 1fr); }
}

/* Intro de la section texte de l'accueil : largeur de lecture limitée,
   centrée sous le titre (elle occupait toute la largeur). */
.pdo-seo-intro { max-width: 780px; margin-left: auto !important; margin-right: auto !important; }

/* Appel à l'action en fin de texte de catégorie et de la page Boutique.
   Même bande et mêmes boutons que l'accueil, mais en HTML simple (le texte
   est stocké en méta, pas en blocs Gutenberg). */
/* Même bande pleine largeur que sur l’accueil : fond sable étendu par
   l’ombre, recoupé par le clip-path, filet laiton en tête. */
/* Bande pleine largeur : le fond est étendu par l’ombre puis recoupé en
   haut et en bas (le fond ne déborde donc jamais sur le reste de la page).
   Le filet laiton est un pseudo-élément, parce qu’une bordure s’arrêterait
   à la largeur du contenu. La marge basse négative annule le rembourrage
   du conteneur : sans elle, une bande blanche de 20 px subsiste avant le
   bloc « Tendance actuelle ». */
.pdo-cat-texte .pdo-cta { position: relative; border-top: 0;
	margin: 56px 0 calc(var(--theme-content-vertical-spacing, 20px) * -1);
	padding: 60px 20px 56px; background: var(--pdo-sand);
	box-shadow: 0 0 0 100vmax var(--pdo-sand); clip-path: inset(0 -100vmax);
	text-align: center; }
.pdo-cat-texte .pdo-cta::before { content: ""; position: absolute; top: 0;
	left: -100vmax; right: -100vmax; height: 3px; background: var(--pdo-laiton); }
.pdo-cat-texte .pdo-cta > * { max-width: 640px; margin-left: auto; margin-right: auto; }
.pdo-cat-texte .pdo-cta-boutons { display: flex; flex-wrap: wrap; justify-content: center;
	gap: 14px; margin: 0 auto; }
.pdo-cta a.pdo-cta-plein,
.pdo-cta a.pdo-cta-contour { display: inline-block; font-size: 11px; letter-spacing: .16em;
	text-transform: uppercase; font-weight: 600; padding: 15px 30px; border-radius: 0;
	text-decoration: none; transition: background-color .2s, color .2s, border-color .2s; }
.pdo-cta a.pdo-cta-plein { background: var(--pdo-ink); color: #ffffff;
	border: 1px solid var(--pdo-ink); }
.pdo-cta a.pdo-cta-plein:hover { background: var(--pdo-oud); border-color: var(--pdo-laiton);
	color: #ffffff; }
.pdo-cta a.pdo-cta-contour { background: transparent; color: var(--pdo-ink);
	border: 1px solid var(--pdo-laiton); }
.pdo-cta a.pdo-cta-contour:hover { background: var(--pdo-ink); color: #ffffff;
	border-color: var(--pdo-ink); }
@media (max-width: 600px) {
	.pdo-cat-texte .pdo-cta { padding: 40px 18px 36px; }
	.pdo-cta a.pdo-cta-plein,
	.pdo-cta a.pdo-cta-contour { width: 100%; padding: 14px 18px; }
}

/* Bandeau blanc avec le logo en tête du menu mobile : sur téléphone, le
   panneau couvre l'en-tête, il faut un chemin de retour vers l'accueil. */
/* Le panneau est un flex en colonne aligné à gauche, et il remet les marges
   des enfants à zéro : il faut un sélecteur plus fort et align-self. */
#offcanvas .ct-panel-content-inner > .pdo-offcanvas-logo { background: #ffffff;
	align-self: stretch; width: auto; margin: -25px -25px 24px; padding: 0 56px 16px;
	position: relative; z-index: 0;
	text-align: center; }
.pdo-offcanvas-logo .custom-logo-link { display: inline-block; }
.pdo-offcanvas-logo img { display: block; width: auto; height: 44px; margin: 0 auto; }
/* Le blanc part du tout en haut : la barre du bouton de fermeture est
   habillée en blanc elle aussi, et le bouton passe en encre pour rester
   visible par-dessus. */
#offcanvas .ct-panel-actions { background: #ffffff; padding-bottom: 0; position: relative;
	z-index: 1; }
/* Blocksy colore la croix par sa variable --theme-icon-color (blanc à 70 %) :
   sur fond blanc elle disparaissait. */
#offcanvas .ct-toggle-close { color: var(--pdo-ink); --theme-icon-color: var(--pdo-ink);
	--theme-icon-hover-color: var(--pdo-laiton); }
#offcanvas .ct-toggle-close svg { fill: var(--pdo-ink); }


/* Titres du pied de page devenus des paragraphes (2026-10-01, structure des
   titres : le pied de page ne doit plus ajouter de H3 sous le dernier bloc de
   chaque page). On retrouve l'interligne et la graisse qu'avaient les H3. */
.ct-footer .widget_block p.wp-block-heading { line-height: 1.5; }
.ct-trending-block p.ct-module-title { font-weight: 700; line-height: 1.5; margin-bottom: 10px; }

/* Sous-titre H2 sous le H1 des pages catégorie et marque (2026-10-01) : une
   phrase inspirante, sobre, qui reprend l'alignement du titre. */
.hero-section .pdo-sous-titre { font-size: 17px; font-weight: 400; line-height: 1.45;
	color: var(--pdo-muted); margin: 6px auto 0; max-width: 46em; text-align: inherit; }
@media (max-width: 600px) {
	.hero-section .pdo-sous-titre { font-size: 15px; }
}

/* Fil d'Ariane des bandeaux de titre : plus fin que le sous-titre H2 (demande
   client du 2026-10-01 : il était plus visible que le H2). Plus petit, graisse
   normale, couleur plus claire que le sous-titre ; le lien courant reste lisible. */
.hero-section .ct-breadcrumbs,
.hero-section .ct-breadcrumbs a,
.hero-section .ct-breadcrumbs span { font-size: 11px; font-weight: 400; letter-spacing: .06em; }
.hero-section .ct-breadcrumbs,
.hero-section .ct-breadcrumbs a { color: #958d82; }
.hero-section .ct-breadcrumbs a:hover { color: var(--pdo-ink); }
.hero-section .ct-breadcrumbs .last-item,
.hero-section .ct-breadcrumbs .last-item span { color: #7d756b; }