/* ═══════════════════════════════════════════════════════════════════════════
   LE CADRE — bande d'annonce, en-tête, navigation, tiroir, recherche, pied.
   Le balisage est le nôtre : il n'y a donc pas un seul `!important` dans ce
   fichier. C'est la contrepartie visible d'avoir repris le thème.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. La bande d'annonce ────────────────────────────────────────────────
   Le SEUL aplat de couleur du haut de page. L'ancien en-tête en avait deux,
   voisins et de la même teinte : ils se salissaient l'un l'autre.
   `absolute` et non `fixed` : elle défile d'elle-même, et l'en-tête remonte
   prendre sa place. Aucune synchronisation en JavaScript, donc rien à
   désynchroniser. */
.ad-annonce {
	position: absolute;
	inset-inline: 0;
	top: 0;
	z-index: 5;
	height: var(--ad-annonce-h);
	background: var(--ad-prune);
	color: var(--ad-lu-sombre);
	font-size: 11.5px;
	letter-spacing: .04em;
}
.ad-annonce__piste {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	height: 100%;
}
.ad-annonce__point {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--ad-or-clair);
	opacity: .55;
}
.ad-annonce a { color: #fff; }
.ad-annonce a:hover { color: var(--ad-or-clair); }

/* ── 2. L'en-tête ─────────────────────────────────────────────────────────
   Fond ivoire translucide plutôt que prune saturée. Deux raisons, dont une
   qui n'est pas une question de goût : le logo de la maison est NOIR ET ROSE,
   dessiné pour un fond clair. Sur la prune il fallait lui substituer une
   version blanche, qui perd le rose — c'est-à-dire la moitié de la marque. */
.ad-entete {
	position: fixed;
	inset-inline: 0;
	top: var(--ad-annonce-h);
	z-index: 10;
	background: rgba(252, 250, 249, .93);
	-webkit-backdrop-filter: blur(14px) saturate(125%);
	backdrop-filter: blur(14px) saturate(125%);
	border-bottom: 1px solid var(--ad-filet);
	/* UNE seule déclaration `transition` par nœud : une seconde écraserait la
	   première au lieu de s'y ajouter. */
	transition: top var(--ad-duree) var(--ad-courbe),
	            box-shadow var(--ad-duree) var(--ad-courbe),
	            background-color var(--ad-duree) var(--ad-courbe);
}

/* Grille en trois colonnes, et non une rangée en `space-between` : c'est ce
   qui met la navigation au centre de la PAGE, et non au centre de ce qui
   reste entre le logo et les actions. */
.ad-entete__barre {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 24px;
	height: var(--ad-entete-h);
	transition: height var(--ad-duree) var(--ad-courbe);
}

.ad-entete__logo { justify-self: start; display: flex; align-items: center; min-height: 44px; }
.ad-entete__logo img {
	height: 46px;
	width: auto;
	transition: height var(--ad-duree) var(--ad-courbe);
}

/* Au défilement : la bande d'annonce s'en va, l'en-tête se resserre et pose
   une ombre à peine perceptible. Les seuils sont hystérétiques (voir
   `cadre.js`) — sans quoi la barre clignoterait à la moindre secousse. */
body.ad-defile .ad-entete {
	top: 0;
	background: rgba(252, 250, 249, .97);
	box-shadow: 0 1px 26px rgba(46, 31, 42, .08);
}
body.ad-defile .ad-entete__barre { height: var(--ad-entete-h-min); }
body.ad-defile .ad-entete__logo img { height: 38px; }

/* ── 3. La navigation ─────────────────────────────────────────────────────
   Pleine hauteur : le survol tient sur toute la barre, ce qui laisse
   descendre vers un sous-menu sans le perdre en chemin. */
.ad-nav { height: 100%; }
.ad-nav__liste {
	display: flex;
	align-items: stretch;
	height: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ad-nav__liste > li { position: relative; display: flex; align-items: center; }
.ad-nav__liste > li > a {
	position: relative;
	display: flex;
	align-items: center;
	height: 100%;
	padding-inline: 13px;
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--ad-encre);
	white-space: nowrap;
	transition: color .3s var(--ad-courbe);
}
/* Le soulignement se trace depuis la gauche : c'est l'unique geste de survol
   du site, repris à l'identique dans le pied et dans le corps du texte. */
.ad-nav__liste > li > a::after {
	content: "";
	position: absolute;
	left: 13px;
	right: 13px;
	bottom: calc(50% - 15px);
	height: 1px;
	background: var(--ad-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .38s cubic-bezier(.65, 0, .35, 1);
}
.ad-nav__liste > li > a:hover,
.ad-nav__liste > li > a:focus-visible { color: var(--ad-accent); }
.ad-nav__liste > li > a:hover::after,
.ad-nav__liste > li > a:focus-visible::after,
.ad-nav__liste > li.current-menu-item > a::after,
.ad-nav__liste > li.current-menu-ancestor > a::after,
.ad-nav__liste > li.current-menu-parent > a::after { transform: scaleX(1); }
.ad-nav__liste > li.current-menu-item > a,
.ad-nav__liste > li.current-menu-ancestor > a { color: var(--ad-accent); }

/* Le chevron d'un sous-menu : deux bordures et une rotation, pas une police
   d'icônes. Le site en charge déjà trois, dont aucune n'est garantie présente
   sur une page donnée. */
.ad-nav__liste > li.menu-item-has-children > a { padding-right: 26px; }
.ad-nav__liste > li.menu-item-has-children > a::before {
	content: "";
	position: absolute;
	right: 13px;
	top: calc(50% - 4px);
	width: 5px;
	height: 5px;
	border-right: 1.2px solid currentColor;
	border-bottom: 1.2px solid currentColor;
	transform: rotate(45deg);
	opacity: .45;
	transition: opacity .3s var(--ad-courbe), transform .3s var(--ad-courbe);
}
.ad-nav__liste > li.menu-item-has-children:hover > a::before {
	opacity: 1;
	transform: rotate(225deg) translate(-2px, -2px);
}

.ad-nav__liste .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 232px;
	margin: 0;
	padding: 8px 0;
	list-style: none;
	background: var(--ad-blanc);
	border: 1px solid var(--ad-filet);
	box-shadow: 0 18px 44px rgba(46, 31, 42, .10);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity .26s var(--ad-courbe), transform .26s var(--ad-courbe), visibility .26s;
}
/* `focus-within` en plus de `hover` : sans lui le sous-menu est inatteignable
   au clavier — il s'ouvre au survol et se referme dès qu'on tabule dedans. */
.ad-nav__liste > li:hover > .sub-menu,
.ad-nav__liste > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.ad-nav__liste .sub-menu a {
	display: block;
	padding: 9px 20px;
	font-size: 13.5px;
	color: var(--ad-encre-douce);
	transition: color .25s var(--ad-courbe), background-color .25s var(--ad-courbe);
}
.ad-nav__liste .sub-menu a:hover,
.ad-nav__liste .sub-menu a:focus-visible {
	color: var(--ad-accent);
	background: var(--ad-prune-voile);
}

/* ── 4. Les actions ───────────────────────────────────────────────────────
   Un trait d'icône, sans cercle autour. Les quatre pastilles de 38 px de
   l'ancien en-tête pesaient plus lourd que la navigation elle-même, à hauteur
   d'œil, là où le regard cherche le nom de la marque. */
.ad-entete__actions {
	justify-self: end;
	display: flex;
	align-items: center;
	gap: 6px;
}
.ad-action {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 44 px : la cible tactile minimale (audit 2026-10-01 — elles faisaient
	   38 × 40 sur téléphone). L'icône reste à 20 px : c'est la ZONE qui grandit. */
	width: 44px;
	height: 44px;
	color: var(--ad-encre);
	transition: color .3s var(--ad-courbe);
}
.ad-action:hover, .ad-action:focus-visible { color: var(--ad-accent); }

/* La pastille n'existe dans le HTML que lorsqu'elle a un nombre à dire.
   L'ancien en-tête écrivait « CFA 0 » sur un panier vide, sur toutes les
   pages du site. */
.ad-panier__nb {
	position: absolute;
	top: 3px;
	right: 2px;
	min-width: 16px;
	height: 16px;
	padding-inline: 4px;
	border-radius: 8px;
	background: var(--ad-rose);
	color: #fff;
	font-size: 10px;
	font-weight: 600;
	line-height: 16px;
	text-align: center;
}

.ad-burger { display: none; flex-direction: column; gap: 5px; }
.ad-burger__trait {
	display: block;
	width: 19px;
	height: 1.4px;
	background: currentColor;
	transition: transform .3s var(--ad-courbe), opacity .3s var(--ad-courbe);
}

/* ── 5. Le téléphone ──────────────────────────────────────────────────────
   `--ad-annonce-h` passe à 0 : l'en-tête, la réserve haute des pages nues et
   le décalage d'ancre suivent tous seuls, sans une règle de plus. */
@media (max-width: 1024px) {
	.ad-nav { display: none; }
	.ad-burger { display: inline-flex; }
	.ad-entete__barre { grid-template-columns: auto 1fr; }
	.ad-entete__actions { grid-column: 2; }
}
@media (max-width: 767px) {
	:root { --ad-annonce-h: 0px; --ad-entete-h: 62px; }
	.ad-annonce { display: none; }
	.ad-entete__logo img { height: 38px; }
	body.ad-defile .ad-entete__logo img { height: 34px; }
	.ad-entete__actions { gap: 0; }
}

/* ── 6. Le tiroir ─────────────────────────────────────────────────────────
   Les sous-rubriques y sont dépliées d'emblée. Un accordéon économise de la
   hauteur sur un écran qui défile — autrement dit il fait payer un geste pour
   épargner ce qui ne coûte rien. */
.ad-tiroir { position: fixed; inset: 0; z-index: 70; }
.ad-tiroir[hidden] { display: none; }
.ad-tiroir__voile {
	position: absolute;
	inset: 0;
	background: rgba(46, 31, 42, .42);
	opacity: 0;
	transition: opacity .34s var(--ad-courbe);
}
.ad-tiroir__panneau {
	position: absolute;
	inset-block: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	width: min(380px, 90vw);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 10px 22px 32px;
	background: var(--ad-ivoire);
	transform: translateX(100%);
	transition: transform .38s var(--ad-courbe);
	outline: none;
}
.ad-tiroir.est-ouvert .ad-tiroir__voile { opacity: 1; }
.ad-tiroir.est-ouvert .ad-tiroir__panneau { transform: translateX(0); }

.ad-tiroir__tete {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}
.ad-tiroir__nom { font-family: var(--ad-police-titre); font-size: 15px; color: var(--ad-encre-douce); }
.ad-tiroir__fermer {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-right: -10px;
	color: var(--ad-encre);
}
.ad-tiroir__chercher {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	padding: 0 14px;
	border: 1px solid var(--ad-encre-douce);
	background: var(--ad-blanc);
}
.ad-tiroir__chercher .ad-icone { color: var(--ad-encre-douce); }
.ad-tiroir__chercher input {
	flex: 1;
	min-width: 0;
	height: 46px;
	border: 0;
	background: transparent;
	font-size: 16px;   /* 16 px : en dessous, iOS zoome sur le champ au toucher */
	outline: none;
}
.ad-tiroir__boutique { width: 100%; margin: 14px 0 6px; }

.ad-tiroir__liste, .ad-tiroir__liste .sub-menu { margin: 0; padding: 0; list-style: none; }
.ad-tiroir__liste > li { border-bottom: 1px solid var(--ad-filet); }
.ad-tiroir__liste > li > a {
	display: flex;
	align-items: center;
	min-height: 52px;
	font-family: var(--ad-police-titre);
	font-size: 17px;
	color: var(--ad-encre);
}
.ad-tiroir__liste .sub-menu {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 12px;
	padding: 0 0 12px;
}
.ad-tiroir__liste .sub-menu a {
	display: flex;
	align-items: center;
	min-height: 44px;
	font-size: 15px;
	color: var(--ad-encre-douce);
}
.ad-tiroir__liste a:hover { color: var(--ad-accent); }
/* La page où l'on est : marquée, sinon le menu ne dit pas « vous êtes ici ». */
.ad-tiroir__liste .current-menu-item > a,
.ad-tiroir__liste .current-menu-ancestor > a { color: var(--ad-accent); font-weight: 600; }

.ad-tiroir__raccourcis { margin: 18px 0 0; padding: 0; list-style: none; }
.ad-tiroir__raccourcis a {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 46px;
	font-size: 15px;
	color: var(--ad-encre);
}
.ad-tiroir__raccourcis .ad-icone { color: var(--ad-accent); }
.ad-tiroir__raccourcis .ad-panier__pastille { margin-left: auto; }
.ad-tiroir__raccourcis .ad-panier__nb { position: static; display: inline-block; }
.ad-tiroir__pied { margin-top: 14px; }
.ad-tiroir__pied .ad-reseaux { gap: 4px; }
.ad-tiroir__pied .ad-reseaux a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--ad-encre-douce); }

/* ── 7. La recherche ──────────────────────────────────────────────────────
   Le formulaire fonctionne SANS JavaScript une fois ouvert : c'est une
   soumission GET ordinaire. Le script n'ajoute que l'ouverture. */
.ad-recherche { position: fixed; inset: 0; z-index: 60; }
.ad-recherche[hidden] { display: none; }
.ad-recherche__voile {
	position: absolute;
	inset: 0;
	background: rgba(46, 31, 42, .48);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	opacity: 0;
	transition: opacity .3s var(--ad-courbe);
}
.ad-recherche__boite {
	position: relative;
	width: min(760px, calc(100% - 2 * var(--ad-marge)));
	margin: clamp(64px, 16vh, 180px) auto 0;
	padding: clamp(28px, 4vw, 46px);
	background: var(--ad-ivoire);
	box-shadow: 0 30px 80px rgba(46, 31, 42, .22);
	opacity: 0;
	transform: translateY(-14px);
	transition: opacity .32s var(--ad-courbe), transform .32s var(--ad-courbe);
}
.ad-recherche.est-ouvert .ad-recherche__voile { opacity: 1; }
.ad-recherche.est-ouvert .ad-recherche__boite { opacity: 1; transform: translateY(0); }

.ad-recherche__fermer {
	position: absolute;
	top: 16px;
	right: 16px;
	color: var(--ad-encre-douce);
	transition: color .25s var(--ad-courbe);
}
.ad-recherche__fermer:hover { color: var(--ad-encre); }
.ad-recherche__titre {
	display: block;
	margin-bottom: 18px;
	font-family: var(--ad-police-titre);
	font-size: clamp(19px, 2.6vw, 25px);
	color: var(--ad-encre);
}
.ad-recherche__ligne {
	display: flex;
	align-items: center;
	gap: 12px;
	border-bottom: 1px solid var(--ad-encre);
	padding-bottom: 6px;
}
.ad-recherche__ligne .ad-icone { color: var(--ad-encre-douce); }
.ad-recherche__ligne input {
	flex: 1;
	min-width: 0;
	padding: 10px 0;
	border: 0;
	background: transparent;
	font-size: 17px;
	outline: none;
}
.ad-recherche__valider {
	flex: none;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .16em;
	color: var(--ad-accent);
}
.ad-recherche__pistes {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 22px;
	font-size: 12.5px;
	color: var(--ad-encre-douce);
}
.ad-recherche__pistes a {
	padding: 6px 13px;
	border: 1px solid var(--ad-filet);
	color: var(--ad-encre);
	transition: border-color .25s var(--ad-courbe), color .25s var(--ad-courbe);
}
.ad-recherche__pistes a:hover { border-color: var(--ad-accent); color: var(--ad-accent); }

/* Le défilement de l'arrière-plan est bloqué pendant qu'une surimpression est
   ouverte — sinon la page glisse derrière le voile à la molette. */
body.ad-fige { overflow: hidden; }

/* ── 8. Le pied ───────────────────────────────────────────────────────────
   Quatre colonnes courtes sur ordinateur ; sur téléphone, les deux listes de
   liens côte à côte et le contact en deux boutons (audit 2026-10-01 : le pied
   empilé faisait 1 039 px). Voir `footer.php`. */
.ad-pied {
	background: var(--ad-prune-nuit);
	color: var(--ad-lu-sombre);
	font-size: 14px;
}
.ad-pied__grille {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr);
	gap: 34px 48px;
	padding-block: clamp(44px, 6vw, 72px) clamp(28px, 4vw, 44px);
}
.ad-pied__logo { display: inline-block; }
.ad-pied__logo img { height: 54px; width: auto; }
.ad-pied__signature {
	max-width: 32ch;
	margin: 16px 0 12px;
	line-height: 1.7;
}
/* Titres de colonne : 13 px, sans capitales espacées (§ 03 — plus d'eyebrows). */
.ad-pied__titre {
	margin: 0 0 6px;
	font-family: var(--ad-police-titre);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0;
	color: #fff;
}
.ad-pied__liste { margin: 0; padding: 0; list-style: none; }
/* Chaque lien est une cible de 44 px : ils faisaient 16 px, espacés de 10. */
.ad-pied__liste a {
	display: flex;
	align-items: center;
	min-height: 44px;
	color: var(--ad-lu-sombre);
	transition: color .25s var(--ad-courbe);
}
.ad-pied__liste a:hover { color: #fff; }

.ad-pied__boutons { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 14px; }
.ad-pied__bouton {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-height: 44px;
	padding: 0 16px;
	border: 1px solid rgba(255, 255, 255, .34);
	color: #fff;
	font-size: 14px;
	transition: border-color .25s var(--ad-courbe), background-color .25s var(--ad-courbe);
}
.ad-pied__bouton:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }
.ad-pied__bouton .ad-icone { width: 18px; height: 18px; }
.ad-pied__adresse { display: flex; align-items: center; gap: 9px; margin: 0; }
.ad-pied__adresse .ad-icone { width: 18px; height: 18px; color: var(--ad-or-clair); }

.ad-reseaux { display: flex; gap: 4px; margin: 0 0 0 -12px; padding: 0; list-style: none; }
.ad-reseaux a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--ad-lu-sombre);
	transition: color .25s var(--ad-courbe);
}
.ad-reseaux a:hover { color: var(--ad-or-clair); }
.ad-reseaux svg { width: 19px; height: 19px; }

.ad-pied__bas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 4px 28px;
	padding-block: 14px;
	border-top: 1px solid var(--ad-filet-clair);
	font-size: 13px;
	color: rgba(255, 255, 255, .6);
}
.ad-pied__bas p { margin: 0; }
.ad-pied__bas nav { display: flex; flex-wrap: wrap; column-gap: 22px; }
.ad-pied__bas a { display: inline-flex; align-items: center; min-height: 44px; color: rgba(255, 255, 255, .68); }
.ad-pied__bas a:hover { color: #fff; }

@media (max-width: 900px) {
	.ad-pied__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
	.ad-pied__marque, .ad-pied__contact { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
	.ad-pied__grille { padding-block: 36px 20px; }
	.ad-pied__marque { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
	.ad-pied__logo img { height: 44px; }
	.ad-pied__signature { order: 3; flex-basis: 100%; margin: 4px 0 0; }
	.ad-reseaux { margin: 0 -12px 0 0; }
	.ad-pied__boutons { margin-bottom: 10px; }
	.ad-pied__bouton { flex: 1 1 0; justify-content: center; padding: 0 10px; }
	.ad-pied__bas { flex-direction: column; align-items: flex-start; }
}

/* ── 9. Les listes de résultats ───────────────────────────────────────────
   Une fiche SANS vignette ne reçoit PAS de cadre vide : réserver la même
   place à une image absente donne une plaque unie, qui se remarque bien plus
   qu'une carte plus courte — la grille se met à ressembler à un chargement en
   panne. D'où `align-items: start`, qui laisse ces cartes-là être courtes. */
.ad-entrant { margin-bottom: clamp(28px, 4vw, 44px); }
.ad-entrant h1 { font-size: clamp(26px, 4vw, 38px); }

.ad-liste {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
	gap: 34px 26px;
	align-items: start;
}
/* ═══ LES CARTES ═════════════════════════════════════════════════════════════
   Produit ou article, une seule famille. Refaites le 2026-08-28 : les
   précédentes étaient un lien, une image et trois lignes empilées — rien de
   fautif, aucune tenue.

   ⚠️ CES RÈGLES VIVENT DANS `cadre.css`, PAS DANS `boutique.css`. Les styles de
   la carte PRODUIT (proportion carrée, gamme, prix) étaient dans la feuille de
   la boutique — que l'accueil ne charge pas. Le rail de produits de l'accueil
   n'en recevait donc aucun : ses vignettes prenaient la proportion 4/5 des
   articles et la gamme s'affichait à la taille du corps de texte. Une règle
   employée par deux pages appartient à la feuille que les deux chargent. */

/* ⚠️ LA CARTE EST UN BLOC CONTENEUR (`position: relative`). Sans elle, le
   texte caché que WooCommerce pose dans un prix (« Plage de prix : … », en
   `position: absolute`) avait pour bloc conteneur le bloc INITIAL : il
   s'échappait du rail de l'accueil — que son `overflow` ne rognait donc pas —
   et élargissait la page à 1 560 px sur téléphone, menu et panier hors écran
   (ERR-20261001-01, audit U1). */
.ad-fiche { position: relative; display: flex; flex-direction: column; }
.ad-fiche__lien {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.ad-fiche__vue {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	margin-bottom: 14px;
	/* Un fond légèrement teinté, jamais blanc : les photos produit sont
	   détourées sur des fonds pastel, et un cadre blanc derrière un fond rose
	   pâle fabrique un liseré qu'on prend pour un défaut de découpe. */
	background: #F4EEF1;
}
.ad-fiche__vue img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .8s var(--ad-courbe);
}
.ad-fiche__lien:hover .ad-fiche__vue img,
.ad-fiche__lien:focus-visible .ad-fiche__vue img { transform: scale(1.06); }

/* La carte produit est CARRÉE. Les flacons sont photographiés de face, centrés :
   un cadre plus haut que large leur ajoute du vide en haut et en bas. */
.ad-fiche--produit .ad-fiche__vue { aspect-ratio: 1 / 1; }

/* ═══ LA CARTE D'ARTICLE ═════════════════════════════════════════════════════
   REFAITE LE 2026-08-29. Elle empruntait tout à la carte produit : même cadre
   vertical, même texte à nu sous l'image, même absence de fond. Résultat, trois
   articles au bas de l'accueil ressemblaient à trois produits sans prix — on ne
   savait pas qu'on changeait de nature de contenu.

   Un article n'est pas un produit : son image illustre, elle ne montre pas ce
   qu'on achète. Elle passe donc en PAYSAGE (3/2, le cadrage de la photo de
   presse), et le texte reçoit un FOND et une réserve — la carte devient un
   bloc, pas une légende posée sous une vignette. */
.ad-fiche--article .ad-fiche__vue {
	aspect-ratio: 3 / 2;
	margin-bottom: 0;
}
.ad-fiche--article .ad-fiche__texte {
	padding: clamp(18px, 2vw, 26px);
	background: var(--ad-ivoire);
	border: 1px solid var(--ad-filet);
	border-top: 0;
}
.ad-fiche--article .ad-fiche__nom {
	font-size: clamp(16px, 1.7vw, 19px);
	line-height: 1.35;
}
/* La date passe SOUS le titre et sous l'extrait, en pied de carte : c'est la
   dernière chose qu'on regarde sur un article, et la première qu'on lisait. */
.ad-fiche--article .ad-fiche__date {
	order: 3;
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid var(--ad-filet);
	font-size: 11.5px;
	letter-spacing: .06em;
}
.ad-fiche--article .ad-fiche__extrait { order: 2; }
.ad-fiche--article .ad-fiche__suite {
	order: 4;
	margin-top: 10px;
	color: var(--ad-accent);
}
/* Sur un article, la barre de survol dit « Lire l'article » : elle garde le même
   mécanisme que sur un produit, ce qui fait que les deux cartes appartiennent à
   la même famille malgré leurs formes différentes. */

/* ── La barre qui monte au survol ────────────────────────────────────────── */
.ad-fiche__voir {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	padding: 11px 14px;
	background: var(--ad-encre);
	color: #fff;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	text-align: center;
	transform: translateY(101%);   /* 101 et non 100 : un pixel de sous-pixel dépassait sur certains zooms */
	transition: transform .4s var(--ad-courbe);
}
.ad-fiche__lien:hover .ad-fiche__voir,
.ad-fiche__lien:focus-visible .ad-fiche__voir { transform: none; }
/* Au doigt, il n'y a pas de survol : la barre ne paraîtrait jamais et
   n'occuperait de la place dans aucun cas. On ne la montre pas. */
@media (hover: none) { .ad-fiche__voir { display: none; } }

/* ── Le badge ────────────────────────────────────────────────────────────── */
.ad-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 1;
	padding: 5px 10px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #fff;
	background: var(--ad-encre);
}
/* Quatre tons, et pas un de plus. Un badge par carte (voir `arlette_badge()`) :
   la couleur sert à distinguer la nature du signal, pas à décorer. */
.ad-badge--vedette { background: var(--ad-prune); }
.ad-badge--nouveau { background: var(--ad-rose); }
.ad-badge--offre   { background: var(--ad-or); color: var(--ad-encre); }
.ad-badge--attente { background: rgba(46, 31, 42, .72); }

/* ── Le texte ────────────────────────────────────────────────────────────── */
.ad-fiche__texte { display: flex; flex-direction: column; flex: 1; }
.ad-fiche__nom {
	display: block;
	font-family: var(--ad-police-titre);
	font-size: 15.5px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--ad-encre);
	transition: color .25s var(--ad-courbe);
}
.ad-fiche__lien:hover .ad-fiche__nom { color: var(--ad-accent); }
.ad-fiche__gamme,
.ad-fiche__date {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	color: var(--ad-encre-douce);
}
.ad-fiche__extrait {
	display: block;
	margin-top: 8px;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--ad-encre-douce);
}

/* Le pied de la carte produit : le prix, et ce que les autres ont acheté.
   ⚠️ `margin-top: auto` colle ce bloc EN BAS de la carte. Sans lui, sur une
   rangée où les noms font une ou deux lignes, les prix ne s'alignent pas — et
   une rangée de prix désalignés se lit comme une grille bancale. */
.ad-fiche__bas {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 2px 10px;
	margin-top: auto;
	padding-top: 10px;
}
.ad-fiche__prix {
	font-size: 16px;
	font-weight: 600;
	color: var(--ad-encre);
	white-space: nowrap;
}
.ad-fiche__prix del { opacity: .45; margin-right: 6px; font-weight: 400; }
.ad-fiche__prix ins { text-decoration: none; color: var(--ad-accent); }
/* « 1 000+ vendus ». Discret par construction : c'est une preuve, pas une
   annonce — le jour où on l'écrit aussi gros que le prix, elle sonne faux. */
.ad-fiche__preuve {
	font-size: 12.5px;
	color: var(--ad-encre-douce);
	white-space: nowrap;
}
.ad-fiche__suite {
	margin-top: 12px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ad-accent);
}
.ad-fiche--texte { border-top: 1px solid var(--ad-filet); padding-top: 16px; }

/* ── Le bouton d'ajout de la carte ──────────────────────────────────────
   AUDIT 2026-10-01 : c'était un lien souligné de 25 px de haut, sous la cible
   tactile, qu'on prenait pour une légende. C'est un BOUTON, de 44 px, sur
   toute la largeur de la carte — la boutique, l'accueil, la recherche et les
   articles emploient le même (`.ad-fiche .button`). Le contour plutôt que
   l'aplat : vingt-six aplats prune côte à côte écraseraient les photos. */
/* ⚠️ `:not(#ad)` POUR LE POIDS, pas pour filtrer : la feuille de WooCommerce
   pèse 0,3,2 (`.woocommerce ul.products li.product .button`) et la règle
   générique de `boutique.css` 0,4,0. Le faux identifiant fait passer celle-ci
   devant les deux sans `!important`. */
.ad-fiche:not(#ad) .button,
.ad-fiche:not(#ad) .added_to_cart,
.ad-guide__carte:not(#ad) .button,
.ad-guide__carte:not(#ad) .added_to_cart {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 44px;
	margin-top: 14px;
	padding: 8px 12px;
	border: 1px solid var(--ad-accent);
	border-radius: 0;
	background: transparent;
	color: var(--ad-accent);
	/* En minuscules : « AJOUTER AU PANIER » espacé ne tenait pas sur une ligne
	   dans une carte de 165 px et se cassait en deux. */
	font-size: 14px;
	font-weight: 600;
	line-height: 1.25;
	text-align: center;
	text-transform: none;
	letter-spacing: 0;
	transition: background-color .25s var(--ad-courbe), color .25s var(--ad-courbe);
}
.ad-fiche:not(#ad) .button:hover,
.ad-fiche:not(#ad) .button:focus-visible,
.ad-guide__carte:not(#ad) .button:hover,
.ad-guide__carte:not(#ad) .button:focus-visible { background: var(--ad-accent); color: #fff; }
.ad-fiche:not(#ad) .button.loading,
.ad-guide__carte:not(#ad) .button.loading { opacity: .6; }
.ad-fiche:not(#ad) .button.added::after,
.ad-guide__carte:not(#ad) .button.added::after { content: none; }
/* Le lien « Voir le panier » que WooCommerce ajoute après un ajout en AJAX :
   le panneau « Ajouté au panier » (inc/vente.php) le remplace. */
.ad-fiche:not(#ad) .added_to_cart,
.ad-guide__carte:not(#ad) .added_to_cart { display: none; }

.ad-resultats__form {
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: 560px;
	margin-bottom: clamp(30px, 4vw, 44px);
	padding: 4px 6px 4px 14px;
	border: 1px solid var(--ad-filet);
}
.ad-resultats__form .ad-icone { color: var(--ad-encre-douce); }
.ad-resultats__form input {
	flex: 1;
	min-width: 0;
	padding: 11px 0;
	border: 0;
	background: transparent;
	outline: none;
	font-size: 15px;
}
.ad-resultats__form button {
	flex: none;
	padding: 10px 18px;
	background: var(--ad-accent);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .14em;
	transition: background-color .25s var(--ad-courbe);
}
.ad-resultats__form button:hover { background: var(--ad-encre); }
.ad-resultats__vide { max-width: 560px; color: var(--ad-encre-douce); }

.navigation.pagination { margin-top: clamp(36px, 5vw, 56px); }
.navigation.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.navigation.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding-inline: 12px;
	border: 1px solid var(--ad-filet);
	font-size: 13px;
	transition: border-color .25s var(--ad-courbe), color .25s var(--ad-courbe);
}
.navigation.pagination .page-numbers:hover { border-color: var(--ad-accent); color: var(--ad-accent); }
.navigation.pagination .page-numbers.current {
	background: var(--ad-accent);
	border-color: var(--ad-accent);
	color: #fff;
}

/* ── 10. WooCommerce en attendant le Lot 1 ────────────────────────────────
   Les gabarits de WooCommerce sont corrects, seulement génériques. On leur
   donne la largeur du site et une réserve haute, rien de plus : les redessiner
   ici serait du travail à refaire au Lot 1. */
.ad-woo { padding-bottom: 72px; }   /* la réserve haute vient de `.ad-reserve` */

/* Les deux familles de résultats. Elles ne se cherchent pas de la même façon :
   un produit se regarde, une page se lit. */
.ad-resultats__bloc + .ad-resultats__bloc { margin-top: clamp(40px, 5vw, 64px); }
.ad-resultats__sous {
	margin-bottom: 22px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--ad-filet);
	font-family: var(--ad-police);
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .18em;
	color: var(--ad-encre-douce);
}
.ad-resultats__pages { margin: 0; padding: 0; list-style: none; max-width: 760px; }
.ad-resultats__pages li { padding: 16px 0; border-bottom: 1px solid var(--ad-filet); }
.ad-resultats__pages a {
	display: block;
	font-family: var(--ad-police-titre);
	font-size: 16px;
	color: var(--ad-encre);
}
.ad-resultats__pages span {
	display: block;
	margin-top: 4px;
	font-size: 13.5px;
	color: var(--ad-encre-douce);
}

/* ═══ LE PANNEAU « AJOUTÉ AU PANIER » (audit 2026-10-01) ═════════════════════
   Une feuille qui monte du bas sur téléphone, une carte en haut à droite sur
   ordinateur — là où est l'icône du panier. Même mécanique que la recherche et
   le tiroir (cadre.js) : voile, Échap, focus rendu. */
.ad-ajout { position: fixed; inset: 0; z-index: 80; }
.ad-ajout[hidden] { display: none; }
.ad-ajout__voile {
	position: absolute;
	inset: 0;
	background: rgba(46, 31, 42, .38);
	opacity: 0;
	transition: opacity .3s var(--ad-courbe);
}
.ad-ajout__boite {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	padding: 22px var(--ad-marge) calc(22px + env(safe-area-inset-bottom));
	background: var(--ad-ivoire);
	box-shadow: 0 -12px 40px rgba(46, 31, 42, .18);
	transform: translateY(100%);
	transition: transform .34s var(--ad-courbe);
}
.ad-ajout.est-ouvert .ad-ajout__voile { opacity: 1; }
.ad-ajout.est-ouvert .ad-ajout__boite { transform: none; }
.ad-ajout__fermer {
	position: absolute;
	top: 8px;
	right: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--ad-encre-douce);
}
.ad-ajout__titre {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 6px;
	font-family: var(--ad-police-titre);
	font-size: 19px;
	font-weight: 600;
	color: var(--ad-accent);
	outline: none;
}
.ad-ajout__titre .ad-icone { stroke-width: 2.2; }
.ad-ajout__produit { margin: 0; font-size: 15px; color: var(--ad-encre); }
.ad-ajout__produit:empty { display: none; }
.ad-ajout__resume { margin: 4px 0 16px; font-size: 14px; color: var(--ad-encre-douce); }
.ad-ajout__actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin: 0; }
.ad-ajout__actions .ad-bouton { width: 100%; padding-inline: 12px; }
.ad-ajout__note { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-size: 13px; color: var(--ad-encre-douce); }
.ad-ajout__note .ad-icone { width: 17px; height: 17px; color: var(--ad-accent); }
@media (max-width: 380px) { .ad-ajout__actions { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 768px) {
	.ad-ajout__voile { background: rgba(46, 31, 42, .18); }
	.ad-ajout__boite {
		inset: calc(var(--ad-entete-h) + var(--ad-annonce-h) + 8px) var(--ad-marge) auto auto;
		width: 400px;
		padding: 24px 26px;
		box-shadow: 0 24px 60px rgba(46, 31, 42, .22);
		transform: translateY(-12px);
		opacity: 0;
		transition: transform .3s var(--ad-courbe), opacity .3s var(--ad-courbe);
	}
	.ad-ajout.est-ouvert .ad-ajout__boite { opacity: 1; }
}

/* ═══ LES SUGGESTIONS DE LA RECHERCHE (audit 2026-10-01) ═══════════════════ */
.ad-suggestions { margin: 14px 0 0; padding: 0; list-style: none; }
.ad-suggestions[hidden] { display: none; }
.ad-suggestion {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr) auto;
	align-items: center;
	gap: 14px;
	min-height: 60px;
	padding: 6px 0;
	border-bottom: 1px solid var(--ad-filet);
	color: var(--ad-encre);
}
.ad-suggestion img { width: 48px; height: 48px; object-fit: cover; background: #F4EEF1; }
.ad-suggestion__nom { font-family: var(--ad-police-titre); font-size: 15px; }
.ad-suggestion__prix { font-size: 14px; font-weight: 600; color: var(--ad-accent); white-space: nowrap; }
.ad-suggestion:hover .ad-suggestion__nom, .ad-suggestion:focus-visible .ad-suggestion__nom { color: var(--ad-accent); }
.ad-recherche__boite { max-height: calc(100vh - 32px); overflow-y: auto; }
.ad-recherche__pistes a { display: inline-flex; align-items: center; min-height: 40px; }

/* ═══ AUDIT UX DU 2026-10-01 — petits textes et titres de résultats ═════════ */
.ad-fil, .woocommerce-breadcrumb { font-size: 13px !important; }
.ad-badge { font-size: 11px; }
.ad-fiche--article .ad-fiche__date { font-size: 12.5px; }
.ad-fiche__suite { font-size: 12.5px; }
/* « PRODUITS », « PAGES ET ARTICLES » en capitales espacées de 11 px : la
   forme d'un surtitre (§ 03). Ce sont des titres : ils en prennent la forme. */
.ad-resultats__sous {
	font-family: var(--ad-police-titre);
	font-size: 19px;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
	color: var(--ad-encre);
}
/* Les produits trouvés : deux colonnes sur téléphone, comme la boutique. */
@media (max-width: 560px) {
	.ad-liste--produits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; }
}

/* Les soins cités par un article du journal (inc/vente.php). */
.ad-cites { margin-top: clamp(40px, 6vw, 64px); padding-top: clamp(28px, 4vw, 40px); border-top: 1px solid var(--ad-filet); }
.ad-cites__titre { margin: 0 0 20px; font-family: var(--ad-police-titre); font-size: 22px; font-weight: 600; color: var(--ad-encre); }
.ad-cites__liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 28px 18px; margin: 0; padding: 0; list-style: none; }
/* Dans un article, les listes et les liens prennent le style du TEXTE
   (retrait, soulignement) : les cartes de produit n'en veulent aucun. */
.ad-article .ad-cites__liste { padding-left: 0; margin-block-end: 0; }
.ad-article .ad-cites__liste li { margin: 0; padding: 0; }
.ad-article .ad-cites a:not(.ad-bouton) { color: inherit; background-image: none; padding-bottom: 0; }
.ad-article .ad-cites .button { color: var(--ad-accent); }
@media (max-width: 560px) { .ad-cites__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; } }

/* Le formulaire de commentaire d'un article : borné, et lisible. */
.comment-respond { max-width: 760px; margin: clamp(40px, 6vw, 64px) auto 0; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	min-height: 48px;
	padding: 11px 13px;
	border: 1px solid rgba(46, 31, 42, .32);
	background: var(--ad-blanc);
	font-size: 16px;
}
.comment-form label { display: block; margin-bottom: 6px; font-size: 14px; color: var(--ad-encre-douce); }
.comment-form .submit {
	min-height: 48px;
	padding: 12px 28px;
	border: 0;
	background: var(--ad-accent);
	color: #fff;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .12em;
	cursor: pointer;
}