/*
 * La feuille de style du theme maison.
 *
 * La charte vient de la maquette de Remy (test 2_maquette-configurateur-peignoir.html),
 * qui fait office de cahier des charges : fond creme, encre chaude, bleu nuit
 * en couleur d'action.
 *
 * L'ACCENT EST LE BLEU DE LA MARQUE depuis le 11/08/2026, sur demande de
 * Thomas. La maquette proposait un laiton, mais #6EC1E4 est la couleur
 * « Principal » du site depuis toujours (palette Elementor) : le nouveau
 * theme n'avait aucune raison d'en changer. Le laiton a disparu de la
 * feuille, il n'etait utilise nulle part ailleurs.
 *
 * PAS DE « html { font-size: 62.5% } » ICI, ET C'EST DELIBERE.
 * OceanWP posait cette regle, qui fait valoir 10px a un rem au lieu de 16.
 * Tout le CSS du plugin configurateur a du etre ecrit en pixels pour y
 * survivre. Le theme maison revient a la taille normale : les rem valent donc
 * 16px, et le plugin, ecrit en pixels, reste juste dans les deux cas. Si
 * quelqu'un remet un jour 62.5% ici, le configurateur ne bougera pas mais tout
 * le reste du site sortira a 60% de sa taille.
 */

/* ---------------------------------------------------------------------------
   0. Les polices, hebergees avec le theme

   ELLES NE SONT PAS APPELEES CHEZ GOOGLE, ET C'EST DELIBERE.
   Un appel a fonts.googleapis.com envoie l'adresse IP de chaque visiteur a
   Google avant tout consentement. Un tribunal allemand l'a juge illicite en
   2022 et la CNIL suit la meme ligne : les fichiers sont donc poses ici, comme
   le plugin configurateur le fait deja pour sa police de broderie.

   DEUX FICHIERS PAR FAMILLE, ET UN SEUL EST TELECHARGE EN PRATIQUE.
   « latin » couvre le francais courant, accents et ligature « oe » compris.
   « latin-ext » ne sert qu'aux caracteres rares (le Y trema, les monnaies
   exotiques). Le navigateur ne va chercher un fichier que si la page contient
   un caractere de sa plage : ecrire les deux ne coute donc rien.

   LES DEUX FAMILLES SONT VARIABLES : un seul fichier porte toutes les graisses
   de 400 a 700. Inutile d'en telecharger un par graisse.

   « font-display: swap » affiche tout de suite le texte dans la police de repli,
   puis rebascule. Le contraire (« block ») laisse un blanc a la place du titre
   pendant le chargement, ce qui est pire sur une page de vente.
   --------------------------------------------------------------------------- */

@font-face {
	font-family: "Cormorant Garamond";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/cormorant-garamond-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Cormorant Garamond";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/cormorant-garamond-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/inter-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/inter-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------------------------------------------------------------------
   1. Jetons de design
   --------------------------------------------------------------------------- */

:root {
	/*
	 * L'ECHELLE DE BLEUS, POSEE LE 11/08/2026.
	 * « Prends les mêmes couleurs que sur le précédent Atelier du Peignoir,
	 * c'est-à-dire des nuances de bleu clair. »
	 *
	 * ELLE EST DERIVEE, PAS INVENTEE. La palette Elementor de l'ancien site a
	 * ete relue en base (kit 1156 de la copie figee) : elle ne contient qu'une
	 * seule couleur de marque, « Principal » = #6EC1E4. Les trois autres
	 * entrees sont deux gris et un vert que le site n'utilisait pas. Il n'y
	 * avait donc aucune nuance a recopier : les dix ci-dessous sont ce meme
	 * bleu (teinte 198, saturation 69 %) decline en luminosite, du presque
	 * blanc au presque noir. Le 300 est le bleu de la marque, inchange.
	 *
	 * A QUOI CHAQUE PALIER SERT :
	 *   050-100  fonds de page et de section
	 *   200      filets et separations
	 *   300      LE bleu de la marque : boutons, barre d'annonce, accents
	 *   500-600  le bleu des mots a lire (voir --ap-bleu-texte)
	 *   800-900  les fonds sombres, pied de page en tete
	 */
	--ap-bleu-050: #EEF8FC;
	--ap-bleu-100: #D4EDF7;
	--ap-bleu-200: #A9DAEF;
	--ap-bleu-300: #6EC1E4;
	--ap-bleu-400: #39AADA;
	--ap-bleu-500: #2289B5;
	--ap-bleu-600: #1B6F92;
	--ap-bleu-700: #155570;
	--ap-bleu-800: #0F3E52;
	--ap-bleu-900: #0A2A38;

	/*
	 * LE CREME A LAISSE LA PLACE AU BLEU TRES CLAIR, et les gris chauds aux
	 * gris froids. Le fond etait #f6f3ee, un creme repris de la maquette de
	 * Remy ; l'encre et les filets etaient assortis, donc chauds. Garder des
	 * beiges sous une charte bleue donnait deux familles de couleurs sur la
	 * meme page.
	 *
	 * --ap-doux vaut #5F7480 et non un gris plus clair : a 4,64:1 sur le fond
	 * il reste lisible en texte courant. La valeur precedente (#8a837a) tombait
	 * a 3,1:1, sous le seuil, sur toutes les mentions secondaires du site.
	 */
	--ap-fond: #F4FAFD;
	--ap-carte: #ffffff;
	--ap-encre: #1B2A32;
	--ap-doux: #5F7480;
	--ap-trait: #DCE8EE;
	/*
	 * LE BLEU NUIT A DISPARU DU SITE LE 11/08/2026, SUR DEMANDE DE THOMAS.
	 * « Remplace tout le bleu foncé du site par le bleu ciel. » La couleur
	 * d'action etait #1f3a5f, un marine ; c'est desormais le bleu de la marque.
	 *
	 * CE QUI CHANGE EN MEME TEMPS, ET QUI N'EST PAS UN DETAIL : le texte pose
	 * sur cette couleur ne peut plus etre blanc. Blanc sur #6EC1E4 donne 2,0:1,
	 * c'est-a-dire un bouton dont on devine le libelle. Les neuf « color: #fff »
	 * qui accompagnaient un fond d'action sont donc passes a --ap-action-texte,
	 * qui vaut l'encre du site : 8,6:1, lisible au soleil comme pour une vue
	 * basse. Un bouton bleu ciel a texte fonce, c'est ce que fait l'ancien site.
	 *
	 * LE SURVOL FONCE LE BLEU AU LIEU DE L'ECLAIRCIR. #4FB0DA est le meme bleu
	 * (teinte 198) baisse en luminosite : le bouton reagit visiblement au
	 * passage de la souris sans changer de famille de couleur.
	 *
	 * ATTENTION SI QUELQU'UN REPREND CETTE VARIABLE. --ap-action ne vaut plus
	 * que pour des FONDS. Partout ou le bleu portait un mot a lire (les liens,
	 * le fil d'Ariane, le bouton doux, le pied de page), la regle pointe
	 * maintenant sur --ap-bleu-texte, pour la raison expliquee juste dessous.
	 */
	--ap-action: var(--ap-bleu-300);
	--ap-action-survol: var(--ap-bleu-400);
	--ap-action-texte: var(--ap-encre);
	/*
	 * DEUX VALEURS POUR UN SEUL BLEU, ET IL FAUT LES DEUX.
	 *
	 * --ap-bleu est le bleu de la marque, tel quel. Il ne sert qu'a ce qui
	 * se REGARDE : filets, bordures, survols. Sur du texte il donne 1,8:1 sur
	 * le fond creme, tres loin des 4,5:1 exiges, et la phrase devient
	 * illisible pour qui voit mal.
	 *
	 * --ap-bleu-texte est le meme bleu (teinte 198, saturation 69 %)
	 * assombri jusqu'a passer le seuil : 4,6:1 sur le creme, 5,1:1 sur le
	 * blanc, et 5,1:1 pour du texte blanc pose dessus. Il sert des qu'il y a
	 * un mot a lire.
	 *
	 * Le laiton qu'ils remplacent etait deja sous le seuil en texte (2,8:1) :
	 * le defaut existait avant, il n'est pas ne du changement de couleur.
	 */
	--ap-bleu: var(--ap-bleu-300);
	--ap-bleu-texte: var(--ap-bleu-600);
	--ap-succes: #2f7d55;

	/*
	 * Les deux polices de la maquette, hebergees avec le theme depuis le
	 * 08/08/2026 : voir les @font-face du paragraphe 0. Les familles de repli
	 * restent nommees derriere, pour la seconde ou le fichier n'est pas encore
	 * arrive et pour le cas ou il manquerait.
	 */
	--ap-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--ap-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--ap-largeur: 1080px;
	--ap-largeur-texte: 720px;
	--ap-rayon: 14px;
	--ap-gouttiere: 18px;
}

/* ---------------------------------------------------------------------------
   2. Base
   --------------------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--ap-fond);
	color: var(--ap-encre);
	font-family: var(--ap-sans);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

img,
video,
iframe {
	max-width: 100%;
	height: auto;
}

a {
	color: var(--ap-bleu-texte);
}

h1, h2, h3, h4 {
	font-family: var(--ap-serif);
	font-weight: 600;
	line-height: 1.2;
	margin: 0 0 0.5em;
}

h1 { font-size: 2.25rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.3rem; }

@media (min-width: 768px) {
	h1 { font-size: 2.75rem; }
	h2 { font-size: 2rem; }
}

.ap-contenant {
	max-width: var(--ap-largeur);
	margin: 0 auto;
	padding: 0 var(--ap-gouttiere);
}

.ap-principal {
	display: block;
	padding: 28px 0 64px;
	min-height: 50vh;
}

/*
 * Lien d'evitement : invisible tant qu'il n'a pas le focus, puis visible au
 * clavier. C'est la premiere chose qu'entend un lecteur d'ecran.
 */
.ap-evitement {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	padding: 12px 18px;
	background: var(--ap-action);
	color: var(--ap-action-texte);
	text-decoration: none;
}

.ap-evitement:focus {
	left: 0;
}

/* ---------------------------------------------------------------------------
   3. En-tete
   --------------------------------------------------------------------------- */

/*
 * L'EN-TETE SUIT LE DEFILEMENT (11/08/2026, inspiration wopilo.com).
 * Le panier et le menu restent a portee sur toute la page, ce qui compte sur
 * une fiche produit longue ou le bouton d'achat sort de l'ecran des le premier
 * defilement.
 *
 * « position: sticky » et non « fixed » : le sticky garde sa place dans le flux,
 * donc rien n'a besoin d'une marge haute de compensation, et la barre d'annonce
 * defile normalement avant que l'en-tete ne s'accroche.
 *
 * z-index: 90 et non 1000 : au-dessus du contenu, mais SOUS la barre
 * d'administration de WordPress et sous le lien d'evitement, qui doit rester
 * atteignable au clavier.
 */
.ap-entete {
	position: sticky;
	top: 0;
	z-index: 90;
	background: var(--ap-carte);
	border-bottom: 1px solid var(--ap-trait);
}

/* La barre d'admin de WordPress est elle-meme fixe : on se pose dessous. */
.admin-bar .ap-entete {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .ap-entete {
		top: 46px;
	}
}

/*
 * LA BARRE D'ANNONCE EST BLEU CIEL, PAS BLEU NUIT (Thomas, 11/08/2026).
 * C'est la barre qui court au-dessus du logo, celle qui precede la bande
 * « Broderie comprise » de l'accueil. Elle etait peinte en --ap-action, le
 * bleu nuit ; elle reprend le bleu de la marque, comme sur l'ancien site.
 *
 * LE TEXTE PASSE DONC EN ENCRE ET NON EN BLANC. Du blanc sur #6EC1E4 donne
 * 2,0:1, illisible au soleil comme pour une vue basse ; l'encre sur ce meme
 * bleu donne 8,6:1. L'ancien site ecrivait deja cette barre en noir.
 */
.ap-entete__barre {
	background: var(--ap-bleu);
	color: var(--ap-encre);
}

.ap-entete__annonce {
	max-width: var(--ap-largeur);
	margin: 0 auto;
	padding: 8px var(--ap-gouttiere);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-align: center;
}

/*
 * « flex-wrap: wrap » CORRIGE LE MENU QUI DEBORDAIT DE L'ECRAN (11/08/2026).
 *
 * Le defaut, mesure a 375 px : le menu ouvert sortait a 399 px, soit 24 px
 * hors de la page, ecrase sur une colonne de 64 px de large a droite.
 *
 * La cause n'etait pas dans le menu. La regle mobile lui donne bien
 * « flex-basis: 100% » pour qu'il occupe une ligne a lui seul, mais ce
 * conteneur etait un flex SANS wrap : une ligne de flex qui ne peut pas se
 * couper garde tous ses enfants cote a cote et repartit la largeur qui reste.
 * Le menu demandait 100 %, il recevait les 64 px laisses par le burger, le
 * logo et le panier, et debordait d'autant.
 *
 * A ne pas retirer en croyant simplifier : sans cette ligne, le defaut revient
 * a l'identique et ne se voit que sur telephone.
 */
.ap-entete__corps {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	padding-top: 14px;
	padding-bottom: 14px;
}

.ap-marque {
	flex: 0 0 auto;
}

.ap-marque img,
.custom-logo {
	display: block;
	max-height: 56px;
	width: auto;
}

.ap-marque__texte {
	font-family: var(--ap-serif);
	font-size: 1.5rem;
	letter-spacing: 0.05em;
	text-decoration: none;
	color: var(--ap-encre);
}

.ap-menu {
	flex: 1 1 auto;
}

.ap-menu__liste {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

/*
 * Menu en petites capitales espacees, comme wopilo. Le gain n'est pas
 * seulement esthetique : quatre entrees courtes en capitales se lisent d'un
 * coup d'oeil et tiennent sur une ligne bien plus longtemps avant de replier.
 */
.ap-menu__liste a {
	color: var(--ap-encre);
	text-decoration: none;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	padding: 8px 0;
	border-bottom: 2px solid transparent;
	transition: color 0.15s, border-color 0.15s;
}

.ap-menu__liste a:hover,
.ap-menu__liste .current-menu-item > a {
	color: var(--ap-bleu-texte);
	border-bottom-color: var(--ap-bleu);
}

.ap-entete__actions {
	flex: 0 0 auto;
	margin-left: auto;
}

.ap-panier {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	text-decoration: none;
	color: var(--ap-encre);
	font-size: 0.9rem;
}

.ap-panier__icone {
	font-size: 1.25rem;
	line-height: 1;
}

.ap-panier__nombre {
	display: inline-grid;
	place-items: center;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: 10px;
	background: var(--ap-action);
	color: var(--ap-action-texte);
	font-size: 0.7rem;
	font-weight: 600;
}

/* Le bouton d'ouverture du menu, cache tant que l'ecran est large. */
.ap-burger {
	display: none;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--ap-trait);
	border-radius: 10px;
	background: var(--ap-carte);
	cursor: pointer;
}

.ap-burger span,
.ap-burger span::before,
.ap-burger span::after {
	display: block;
	width: 18px;
	height: 2px;
	margin: 0 auto;
	background: var(--ap-encre);
	position: relative;
}

.ap-burger span::before,
.ap-burger span::after {
	content: "";
	position: absolute;
}

.ap-burger span::before { top: -6px; }
.ap-burger span::after  { top: 6px; }

@media (max-width: 860px) {
	.ap-burger {
		display: block;
		order: 1;
	}
	.ap-marque {
		order: 2;
		margin: 0 auto;
	}
	.ap-entete__actions {
		order: 3;
	}
	/*
	 * Le menu deplie occupe toute la largeur, SOUS la ligne du logo. Les
	 * marges negatives et le padding qui les compense l'etendent d'un bord a
	 * l'autre de l'ecran : sans elles, le panneau s'arrete aux gouttieres du
	 * conteneur et les separations flottent au milieu de rien.
	 */
	.ap-menu {
		order: 4;
		flex-basis: 100%;
		width: 100%;
		display: none;
		margin: 0 calc(-1 * var(--ap-gouttiere));
		padding: 0 var(--ap-gouttiere);
		border-top: 1px solid var(--ap-trait);
		background: var(--ap-bleu-050);
	}
	.ap-menu.est-ouvert {
		display: block;
	}
	.ap-menu__liste {
		flex-direction: column;
		gap: 0;
		align-items: stretch;
	}
	.ap-menu__liste li + li {
		border-top: 1px solid var(--ap-trait);
	}
	.ap-menu__liste a {
		display: block;
		padding: 15px 0;
		font-size: 0.85rem;
		border-bottom: none;
	}
	.ap-menu__liste a:hover,
	.ap-menu__liste .current-menu-item > a {
		border-bottom-color: transparent;
	}
}

/* ---------------------------------------------------------------------------
   4. Fil d'Ariane
   --------------------------------------------------------------------------- */

.ap-ariane ol {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	font-size: 0.8rem;
	color: var(--ap-doux);
}

.ap-ariane li + li::before {
	content: "/";
	margin-right: 8px;
	color: var(--ap-trait);
}

.ap-ariane a {
	color: var(--ap-doux);
	text-decoration: none;
}

.ap-ariane a:hover {
	color: var(--ap-bleu-texte);
}

/* ---------------------------------------------------------------------------
   5. Contenu redactionnel
   --------------------------------------------------------------------------- */

.ap-prose {
	max-width: var(--ap-largeur-texte);
}

.ap-prose > * + * {
	margin-top: 1.1em;
}

.ap-prose h2 {
	margin-top: 1.8em;
}

.ap-prose h3 {
	margin-top: 1.5em;
}

.ap-prose ul,
.ap-prose ol {
	padding-left: 1.4em;
}

.ap-prose li + li {
	margin-top: 0.4em;
}

.ap-prose img {
	border-radius: var(--ap-rayon);
}

.ap-prose blockquote {
	margin: 1.5em 0;
	padding: 2px 0 2px 20px;
	border-left: 3px solid var(--ap-bleu);
	color: var(--ap-doux);
	font-style: italic;
}

/* La page d'accueil n'est pas une colonne de texte : son contenu s'etale.
   Elle a sa propre mise en page, au paragraphe 15. */
.ap-accueil .ap-prose {
	max-width: none;
}

/* ---------------------------------------------------------------------------
   6. Listes d'articles
   --------------------------------------------------------------------------- */

.ap-liste__entete {
	margin-bottom: 32px;
}

.ap-grille {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 26px;
}

.ap-carte {
	background: var(--ap-carte);
	border: 1px solid var(--ap-trait);
	border-radius: var(--ap-rayon);
	overflow: hidden;
	transition: box-shadow 0.15s, transform 0.15s;
}

.ap-carte:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(20, 30, 45, 0.08);
}

.ap-carte__lien {
	display: block;
	color: inherit;
	text-decoration: none;
}

.ap-carte__visuel img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.ap-carte__texte {
	padding: 18px 20px 22px;
}

.ap-carte__titre {
	font-size: 1.2rem;
	margin-bottom: 8px;
}

.ap-carte__extrait {
	margin: 0 0 12px;
	color: #4a443c;
	font-size: 0.92rem;
}

.ap-carte__meta,
.ap-article__meta {
	margin: 0;
	color: var(--ap-doux);
	font-size: 0.8rem;
}

/* ---------------------------------------------------------------------------
   7. Article
   --------------------------------------------------------------------------- */

.ap-article__entete {
	margin-bottom: 24px;
}

.ap-article__image {
	margin: 0 0 28px;
}

.ap-article__image img {
	width: 100%;
	border-radius: var(--ap-rayon);
}

/*
 * LE TEXTE D'UN ARTICLE EST CENTRE, comme celui des fiches produit.
 * Demande de Thomas du 13/08/2026.
 *
 * C'est exactement le defaut corrige sur les fiches le 10/08 (retour 4), reste
 * en place sur le blog : la colonne de lecture fait 720 px dans un contenant de
 * 1080, elle etait calee a gauche, et le texte se retrouvait donc decale sous un
 * titre et une image qui, eux, prennent toute la largeur. Mesure avant
 * correction : texte a 238 px du bord, vide de 324 px a droite.
 *
 * Le titre et l'image de couverture gardent la pleine largeur : ils cadrent
 * l'article, ils ne se lisent pas ligne apres ligne.
 */
.ap-article .ap-prose,
.ap-liste__intro {
	margin-left: auto;
	margin-right: auto;
}

/* --- Les photos dans le corps d'un article --------------------------------- *
 *
 * Demande de Thomas du 13/08/2026 : mieux integrer les photos au texte, en
 * gardant la meme colonne, quitte a ce qu'une petite photo soit plus etroite.
 * Le classement petite / large est fait au rendu par ap_photos_dans_le_texte().
 */

.ap-photo {
	margin: 2em 0;
}

.ap-photo img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
}

/*
 * LA PETITE PHOTO FLOTTE, ET C'EST TOUT L'INTERET. Posee en bloc, une vignette
 * de 300 px dans une colonne de 720 laissait 420 px de blanc a sa droite et
 * coupait la lecture. En flottant, le texte qui suit s'enroule autour d'elle.
 *
 * « clear: both » sur les titres est indispensable : sans lui, le titre de la
 * section suivante viendrait se ranger a cote de la photo au lieu de repartir
 * sur toute la largeur.
 */
.ap-photo--petite {
	float: right;
	width: 300px;
	max-width: 42%;
	margin: 0.3em 0 1.2em 1.8em;
	shape-margin: 1.8em;
}

/*
 * La photo qui n'a aucun texte a cote d'elle ne flotte pas, elle se centre.
 * Sans cette regle, une photo seule entre deux titres restait plaquee a droite
 * avec un grand vide a sa gauche.
 */
.ap-photo--seule {
	width: 300px;
	max-width: 100%;
	margin: 2em auto;
}

.ap-prose h2,
.ap-prose h3 {
	clear: both;
}

@media (max-width: 720px) {

	/*
	 * Sur telephone, une photo qui flotte laisse une colonne de texte de moins
	 * de 120 px a cote d'elle : illisible. Elle reprend donc toute la largeur,
	 * centree, comme les grandes.
	 */
	.ap-photo--petite {
		float: none;
		width: 100%;
		max-width: 340px;
		margin: 1.6em auto;
	}
}

.ap-article__voisins {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 16px;
	margin-top: 48px;
	padding-top: 28px;
	border-top: 1px solid var(--ap-trait);
}

.ap-article__voisin {
	display: block;
	padding: 16px 18px;
	background: var(--ap-carte);
	border: 1px solid var(--ap-trait);
	border-radius: var(--ap-rayon);
	text-decoration: none;
	color: inherit;
}

.ap-article__voisin span {
	display: block;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ap-doux);
	margin-bottom: 4px;
}

/* ---------------------------------------------------------------------------
   8. Boutons, formulaires
   --------------------------------------------------------------------------- */

.ap-bouton,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	display: inline-block;
	padding: 14px 24px;
	border: none;
	border-radius: 12px;
	background: var(--ap-action);
	color: var(--ap-action-texte);
	font-family: inherit;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s;
}

.ap-bouton:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
	background: var(--ap-action-survol);
	color: var(--ap-action-texte);
}

/*
 * LE BOUTON « alt » DE WOOCOMMERCE, ET POURQUOI IL EST TRAITE A PART.
 *
 * WooCommerce marque d'une classe « alt » ses boutons d'action principaux :
 * « Ajouter au panier » sur la fiche produit, « Valider la commande » dans le
 * tunnel. Il les peint en #7f54b3, son violet de marque, avec le selecteur
 * « .woocommerce button.button.alt » : une classe de plus que la regle
 * ci-dessus. A specificite inferieure, le bleu nuit du theme est ignore et le
 * bouton le plus important du site sort en violet. Constate le 08/08/2026.
 *
 * Les selecteurs de WooCommerce sont enveloppes dans des « :where() », qui ne
 * comptent pour rien dans le calcul : inutile de chercher a les imiter, il
 * suffit de passer devant. Le prefixe ajoute l'element qui manque, sans
 * recourir a !important.
 *
 * ET CE PREFIXE EST « html », PAS « body ». C'est WordPress qui pose la classe
 * « woocommerce » SUR LE BODY LUI-MEME (body_class()). « body .woocommerce »
 * cherche donc un descendant du body portant cette classe : sur une fiche
 * produit, il n'y en a pas, et la regle entiere ne s'applique a rien, en
 * silence. « html », lui, est bien l'ancetre du body et reste juste dans
 * l'autre cas, quand « .woocommerce » est un div interieur. Vecu le 08/08/2026,
 * une correction posee et sans effet visible.
 */
html .woocommerce a.button.alt,
html .woocommerce button.button.alt,
html .woocommerce input.button.alt,
html .woocommerce #respond input#submit.alt {
	background: var(--ap-action);
	color: var(--ap-action-texte);
}

html .woocommerce a.button.alt:hover,
html .woocommerce button.button.alt:hover,
html .woocommerce input.button.alt:hover,
html .woocommerce #respond input#submit.alt:hover {
	background: var(--ap-action-survol);
	color: var(--ap-action-texte);
}

html .woocommerce a.button.alt:disabled,
html .woocommerce button.button.alt:disabled,
html .woocommerce button.button.alt.disabled,
html .woocommerce input.button.alt:disabled {
	background: var(--ap-action);
	opacity: 0.5;
	cursor: default;
}

.ap-bouton--doux {
	background: transparent;
	color: var(--ap-bleu-texte);
	border: 1px solid var(--ap-trait);
}

.ap-bouton--doux:hover {
	background: var(--ap-carte);
	color: var(--ap-bleu-texte);
	border-color: var(--ap-bleu);
}

.ap-recherche {
	display: flex;
	gap: 8px;
	max-width: 460px;
	margin: 24px 0;
}

.ap-recherche__champ {
	flex: 1;
	padding: 12px 14px;
	border: 1px solid var(--ap-trait);
	border-radius: 12px;
	background: var(--ap-carte);
	font-family: inherit;
	font-size: 0.95rem;
}

.ap-recherche__champ:focus {
	outline: none;
	border-color: var(--ap-action);
}

.ap-recherche__bouton {
	padding: 12px 18px;
	border: none;
	border-radius: 12px;
	background: var(--ap-action);
	color: var(--ap-action-texte);
	font-family: inherit;
	font-weight: 600;
	cursor: pointer;
}

/* ---------------------------------------------------------------------------
   9. Pagination
   --------------------------------------------------------------------------- */

.pagination {
	margin-top: 44px;
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}

.pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--ap-trait);
	border-radius: 10px;
	background: var(--ap-carte);
	color: var(--ap-encre);
	text-decoration: none;
	font-size: 0.9rem;
}

.pagination .page-numbers.current {
	background: var(--ap-action);
	border-color: var(--ap-action);
	color: var(--ap-action-texte);
}

/* ---------------------------------------------------------------------------
   10. Pied de page
   --------------------------------------------------------------------------- */

/*
 * LE PIED DE PAGE EST SOMBRE (11/08/2026, inspiration wopilo.com).
 * Il etait blanc sur fond blanc, donc invisible : rien ne disait au visiteur
 * que la page se terminait. Un aplat sombre ferme la page et fait ressortir
 * les colonnes de liens.
 *
 * LE SOMBRE RESTE DANS LA FAMILLE DE LA MARQUE. --ap-bleu-900 est le bleu
 * #6EC1E4 descendu a 13 % de luminosite : c'est le meme bleu, pas un gris
 * anthracite emprunte ailleurs. Le blanc dessus donne 15:1.
 */
.ap-pied {
	background: var(--ap-bleu-900);
	color: #fff;
	margin-top: 72px;
}

/*
 * Quatre colonnes : la marque, l'aide, la boutique, les reseaux. « auto-fit »
 * les replie tout seul en deux colonnes puis en une, sans point de rupture a
 * ecrire. 200px de minimum et non 220 : a 220 la quatrieme colonne sautait a
 * la ligne des 1000px, en laissant un vide a droite sur un ecran d'ordinateur
 * portable.
 */
.ap-pied__corps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 32px;
	padding-top: 56px;
	padding-bottom: 48px;
}

/*
 * La colonne de marque prend un peu plus de place que les trois autres des
 * qu'il y a la largeur : c'est elle qui porte le nom et la phrase, les trois
 * autres ne portent que des liens courts.
 */
@media (min-width: 900px) {
	.ap-pied__corps {
		grid-template-columns: 1.4fr 1fr 1fr 1fr;
		gap: 40px;
	}
}

.ap-pied__titre {
	font-family: var(--ap-sans);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ap-bleu-300);
	margin: 0 0 18px;
}

.ap-pied__nom {
	font-family: var(--ap-serif);
	font-size: 1.5rem;
	color: #fff;
	margin: 0 0 10px;
}

.ap-pied__baseline {
	margin: 0;
	max-width: 30em;
	/* Blanc a 72 % : lisible (10,7:1) sans concurrencer le nom juste au-dessus. */
	color: rgba(255, 255, 255, 0.72);
	font-size: 0.92rem;
}

.ap-pied__liste {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ap-pied__liste li + li {
	margin-top: 11px;
}

.ap-pied__liste a {
	color: rgba(255, 255, 255, 0.82);
	text-decoration: none;
	font-size: 0.9rem;
	transition: color 0.15s;
}

.ap-pied__liste a:hover {
	color: var(--ap-bleu-300);
	text-decoration: underline;
}

/*
 * LA RANGEE DU BAS. Le filet est un blanc tres transparent et non une couleur
 * fixe : il reste juste quel que soit le bleu du fond, si celui-ci change un
 * jour de palier.
 */
.ap-pied__bas {
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	font-size: 0.78rem;
}

.ap-pied__bas-corps {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	padding-top: 18px;
	padding-bottom: 18px;
}

.ap-pied__copyright {
	margin: 0;
	color: rgba(255, 255, 255, 0.6);
}

.ap-pied__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ap-pied__legal a {
	color: rgba(255, 255, 255, 0.72);
	text-decoration: none;
}

.ap-pied__legal a:hover {
	color: #fff;
	text-decoration: underline;
}

/* Sur telephone la rangee du bas se centre, sinon elle pend a gauche. */
@media (max-width: 700px) {
	.ap-pied__bas-corps {
		justify-content: center;
		text-align: center;
	}
	.ap-pied__legal {
		justify-content: center;
	}
}

/* ---------------------------------------------------------------------------
   11. 404
   --------------------------------------------------------------------------- */

.ap-404 {
	padding: 40px 0 80px;
}

.ap-404__liens {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 28px;
}

/* ---------------------------------------------------------------------------
   12. La grille des produits (boutique et categories)

   WooCommerce dispose ses produits en FLOTTANTS, avec des largeurs en
   pourcentage et des marges calculees (woocommerce-layout.css). Les regles qui
   suivent remplacent ce systeme par une grille.

   POURQUOI DU !important ICI, ALORS QU'IL EST BANNI PARTOUT AILLEURS.
   Les selecteurs de WooCommerce sont identiques aux notres (« .woocommerce
   ul.products li.product ») : a specificite egale, c'est la derniere feuille
   chargee qui gagne, et l'ordre de chargement entre le theme et le plugin
   n'est garanti par rien. Le !important est limite aux trois proprietes du
   flottant, celles qu'il faut neutraliser pour qu'une grille tienne.

   L'alternative serait de retirer woocommerce-layout.css. Elle est ecartee :
   ce fichier met aussi en page le panier et la commande, et le theme ne touche
   pas au tunnel d'achat.
   --------------------------------------------------------------------------- */

.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 26px;
	margin: 0 0 48px;
	padding: 0;
	list-style: none;
}

/* WooCommerce degage ses flottants avec des pseudo-elements : dans une grille,
   ils deviendraient deux cellules vides. */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
	content: none;
}

.woocommerce ul.products li.product {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	position: relative; /* ancre le ruban « Promo ! », en absolu plus bas */
	display: flex;
	flex-direction: column;
	background: var(--ap-carte);
	border: 1px solid var(--ap-trait);
	border-radius: var(--ap-rayon);
	overflow: hidden;
	text-align: left;
	transition: box-shadow 0.15s, transform 0.15s;
}

.woocommerce ul.products li.product:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(20, 30, 45, 0.08);
}

/* Le lien couvre l'image, le titre et le prix : c'est WooCommerce qui les
   emballe ainsi, on ne fait que lui donner une mise en page. */
.woocommerce ul.products li.product a.woocommerce-loop-product__link {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	color: inherit;
	text-decoration: none;
}

.woocommerce ul.products li.product img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	margin: 0 0 16px;
	border-radius: 0;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	padding: 0 20px;
	margin: 0 0 8px;
	font-size: 1.15rem;
	line-height: 1.25;
}

.woocommerce ul.products li.product .price {
	display: block;
	padding: 0 20px;
	margin: auto 0 0;
	color: var(--ap-encre);
	font-family: var(--ap-sans);
	font-size: 1.05rem;
	font-weight: 600;
}

.woocommerce ul.products li.product .price del {
	color: var(--ap-doux);
	font-weight: 400;
	margin-right: 6px;
}

/*
 * Les etoiles et le nombre d'avis tiennent sur la meme ligne. Le .star-rating
 * de WooCommerce est un bloc dont la largeur est calculee en em : sans le
 * passer en ligne, le compte tomberait dessous. Les 20 px de gauche etaient
 * deja la, ils alignent la note sur le titre du produit ; ils restent.
 * Voir ap_woo_nombre_avis() dans inc/woocommerce.php.
 */
.woocommerce ul.products li.product .star-rating {
	display: inline-block;
	vertical-align: middle;
	margin: 0 0 8px 20px;
	font-size: 0.8em;
}

.woocommerce ul.products li.product .ap-avis-nombre {
	display: inline-block;
	vertical-align: middle;
	margin: 0 20px 8px 8px;
	color: var(--ap-doux);
	font-size: 0.8rem;
}

/*
 * Le bouton est CENTRE sur la carte (Thomas, 11/08/2026), et non cale a
 * gauche sous le prix. La carte est une colonne flex : c'est donc align-self
 * qui commande la position horizontale, pas text-align, qui n'a aucun effet
 * sur un enfant de flex.
 */
.woocommerce ul.products li.product .button {
	align-self: center;
	margin: 16px 20px 20px;
}

/* Le ruban « Promo ! » de WooCommerce, repositionne sur la carte. */
.woocommerce ul.products li.product .onsale {
	position: absolute;
	top: 12px;
	left: 12px;
	min-height: 0;
	min-width: 0;
	margin: 0;
	padding: 4px 12px;
	border-radius: 999px;
	/* Fond colore avec du texte blanc dessus : la variante lisible s'impose. */
	background: var(--ap-bleu-texte);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 600;
	line-height: 1.4;
}

/* ---------------------------------------------------------------------------
   13. La page d'une categorie de produits

   La page la plus importante du site pour le referencement : titre, chapeau,
   grille, puis un vrai contenu de fond. Les blocs de fond sont volontairement
   en colonne de lecture (.ap-prose) et non pleine largeur : au-dela de 720 px,
   l'oeil perd sa ligne.
   --------------------------------------------------------------------------- */

/*
 * 14/08/2026, retour du cousin de Thomas : « ajuste le texte, il est tout serre
 * a gauche, harmonise avec la page boutique ». La page categorie calait son
 * entete et son texte sur 720 px SANS marge automatique : tout le contenu
 * pendait a gauche avec 360 px de vide a droite, alors que la boutique, elle,
 * laisse son chapeau prendre la largeur du contenant. Les deux pages presentent
 * la meme chose, elles se lisent maintenant pareil.
 */
.ap-categorie__entete {
	max-width: none;
	margin-bottom: 36px;
}

.ap-categorie__chapeau,
.ap-categorie__texte {
	max-width: none;
}

.ap-categorie__chapeau {
	margin-top: 16px;
	font-size: 1.05rem;
	color: #4a443c;
}

.ap-categorie__corps {
	margin-top: 8px;
	padding-top: 40px;
	border-top: 1px solid var(--ap-trait);
}

/* Les trois etapes : une explication du parcours, pas une liste a puces. */
.ap-etapes {
	margin-bottom: 48px;
}

.ap-etapes__liste {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: ap-etape;
}

.ap-etapes__liste li {
	position: relative;
	padding: 22px 22px 24px;
	background: var(--ap-carte);
	border: 1px solid var(--ap-trait);
	border-radius: var(--ap-rayon);
	counter-increment: ap-etape;
}

.ap-etapes__liste li::before {
	content: counter(ap-etape);
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	margin-bottom: 12px;
	border-radius: 50%;
	background: var(--ap-action);
	color: var(--ap-action-texte);
	font-family: var(--ap-sans);
	font-size: 0.9rem;
	font-weight: 700;
}

.ap-etapes__liste h3 {
	margin: 0 0 6px;
	font-size: 1.15rem;
}

.ap-etapes__liste p {
	margin: 0;
	font-size: 0.92rem;
	color: #4a443c;
}

.ap-categorie__texte h2 {
	margin-top: 2em;
}

.ap-categorie__texte h3 {
	font-family: var(--ap-sans);
	font-size: 1.02rem;
	font-weight: 700;
	margin-top: 1.6em;
	margin-bottom: 0.3em;
}

/* ---------------------------------------------------------------------------
   14. La fiche produit

   La page qui vend. Deux colonnes sur ordinateur : l'apercu a gauche, qui suit
   le defilement, et a droite tout ce sur quoi le client agit (prix,
   configurateur, bouton). Une seule colonne sur telephone, l'apercu en haut.

   POURQUOI DU !important ICI, comme en section 12. WooCommerce dispose la
   galerie et le resume en FLOTTANTS a 48 % (woocommerce.css), avec des
   selecteurs identiques aux notres (« .woocommerce div.product div.images »).
   A specificite egale, c'est la derniere feuille chargee qui gagne, et l'ordre
   de chargement entre le theme et le plugin n'est garanti par rien. Le
   !important est limite aux trois proprietes du flottant.
   --------------------------------------------------------------------------- */

/*
 * La grille porte sur « .ap-fiche__haut », le conteneur pose par le theme
 * autour de l'apercu et du resume, et NON sur « div.product ». La raison est
 * dans inc/fiche-produit.php : un apercu collant s'arrete au bas de son parent,
 * et « div.product » descend jusqu'aux avis.
 */
.woocommerce div.product .ap-fiche__haut {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
}

/* WooCommerce degage ses flottants avec des pseudo-elements : dans une grille,
   ils deviendraient deux cellules vides. */
.woocommerce div.product::before,
.woocommerce div.product::after,
.woocommerce div.product .ap-fiche__haut::before,
.woocommerce div.product .ap-fiche__haut::after {
	content: none;
}

.woocommerce div.product div.images,
.woocommerce div.product div.summary {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
}

@media (min-width: 900px) {

	.woocommerce div.product .ap-fiche__haut {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 44px;
		align-items: start;
	}

	/*
	 * L'apercu suit le defilement.
	 *
	 * DEUX CONDITIONS, ET IL FAUT LES DEUX.
	 *
	 * 1. Le selecteur porte « .woocommerce-product-gallery » en plus de
	 *    « .images ». Ce n'est pas une redondance : WooCommerce ecrit
	 *    « div.product div.images.woocommerce-product-gallery{position:relative} »
	 *    dans woocommerce.css, soit une classe de plus que nous. A specificite
	 *    inferieure, notre « position: sticky » est simplement ignore, et
	 *    l'apercu defile comme si la regle n'existait pas. Vecu le 08/08/2026.
	 * 2. « align-self: start ». Sans lui, la cellule de grille etire l'element
	 *    sur toute la hauteur de la ligne, et un element aussi haut que son
	 *    conteneur n'a jamais rien a coller.
	 */
	.woocommerce div.product div.images.woocommerce-product-gallery {
		position: sticky;
		top: 24px;
		align-self: start;
	}
}

/* --- L'apercu ------------------------------------------------------------
   Les selecteurs de ce bloc portent tous « .images.woocommerce-product-gallery »
   et non « .images » seul : c'est la specificite qu'emploie woocommerce.css sur
   ce meme conteneur, et il faut l'egaler pour ne pas dependre de l'ordre de
   chargement des feuilles, qui n'est garanti par rien.
   ------------------------------------------------------------------------- */

.woocommerce div.product div.images.woocommerce-product-gallery {
	padding: 16px;
	background: var(--ap-carte);
	border-radius: 18px;
	box-shadow: 0 18px 40px rgba(20, 30, 45, 0.10);
}

.woocommerce div.product div.images img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
}

/* Les miniatures, posees par FlexSlider apres le chargement de la page. */
.woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 8px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}

.woocommerce div.product div.images .flex-control-thumbs li {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	list-style: none;
}

/* Le « li » est indispensable : WooCommerce cible « .flex-control-thumbs li img »
   pour son opacite, une specificite de plus que « .flex-control-thumbs img ». */
.woocommerce div.product div.images .flex-control-thumbs li img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border: 1px solid var(--ap-trait);
	border-radius: 8px;
	opacity: 0.65;
	cursor: pointer;
	transition: opacity 0.15s, border-color 0.15s;
}

.woocommerce div.product div.images .flex-control-thumbs li img:hover,
.woocommerce div.product div.images .flex-control-thumbs li img.flex-active {
	opacity: 1;
	border-color: var(--ap-action);
}

/* --- Le resume ------------------------------------------------------------ */

.woocommerce div.product .product_title {
	margin: 0 0 6px;
	font-size: 1.9rem;
}

@media (min-width: 900px) {
	.woocommerce div.product .product_title {
		font-size: 2.2rem;
	}
}

.woocommerce div.product .woocommerce-product-rating {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 10px;
	font-size: 0.85rem;
}

.woocommerce div.product .woocommerce-product-rating .star-rating {
	margin: 0;
	color: var(--ap-bleu-texte);
	font-size: 0.95em;
}

.woocommerce div.product .woocommerce-review-link {
	color: var(--ap-doux);
	text-decoration: none;
}

.woocommerce div.product .woocommerce-review-link:hover {
	color: var(--ap-bleu-texte);
	text-decoration: underline;
}

.woocommerce div.product p.price {
	margin: 0 0 18px;
	color: var(--ap-encre);
	font-family: var(--ap-sans);
	font-size: 1.75rem;
	font-weight: 600;
	line-height: 1.2;
}

.woocommerce div.product p.price del {
	margin-right: 8px;
	color: var(--ap-doux);
	font-size: 0.7em;
	font-weight: 400;
}

.woocommerce div.product p.price ins {
	background: none;
	text-decoration: none;
}

.woocommerce div.product .woocommerce-product-details__short-description {
	margin-bottom: 22px;
	padding-bottom: 22px;
	border-bottom: 1px solid var(--ap-trait);
	color: #4a443c;
	font-size: 0.95rem;
}

.woocommerce div.product .woocommerce-product-details__short-description p:last-child {
	margin-bottom: 0;
}

/* --- Le formulaire d'ajout au panier -------------------------------------- */

/*
 * Le configurateur du plugin occupe toute la largeur ; la quantite et le bouton
 * se partagent la derniere ligne. Rien ici ne connait le configurateur : il
 * arrive comme un enfant de plus du formulaire, et il prend sa ligne comme les
 * autres.
 */
.woocommerce div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
}

.woocommerce div.product form.cart::before,
.woocommerce div.product form.cart::after {
	content: none;
}

.woocommerce div.product form.cart > * {
	flex: 1 1 100%;
	margin: 0;
}

.woocommerce div.product form.cart .quantity {
	flex: 0 0 auto;
}

/*
 * Quantite forcee a 1 sur la fiche : WooCommerce bascule alors son champ en
 * type="hidden", mais il garde le <div class="quantity"> autour, toujours sans
 * classe distinctive. Ce conteneur devenu vide reste un enfant du flex et
 * prendrait un gap de 12 px pour rien, d'ou le :has().
 *
 * Si un navigateur ne connaissait pas :has(), le conteneur ne contiendrait de
 * toute facon qu'un champ cache et un label deja masque par woocommerce.css :
 * le seul degat serait ce gap. Voir ap_woo_quantite_unique() dans
 * inc/woocommerce.php.
 */
.woocommerce div.product form.cart .quantity:has(input[type="hidden"]) {
	display: none;
}

.woocommerce div.product form.cart .quantity .qty {
	width: 78px;
	height: 100%;
	padding: 14px 8px;
	border: 1px solid var(--ap-trait);
	border-radius: 12px;
	background: var(--ap-carte);
	font-family: inherit;
	font-size: 1rem;
	text-align: center;
}

.woocommerce div.product form.cart .single_add_to_cart_button {
	flex: 1 1 auto;
	padding: 17px 24px;
	border-radius: 14px;
	font-size: 1rem;
	text-align: center;
}

/* --- La reassurance ------------------------------------------------------- */

.ap-fiche__reassurance {
	display: grid;
	gap: 8px;
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.85rem;
	color: #4a443c;
}

.ap-fiche__reassurance li {
	display: flex;
	align-items: flex-start;
	gap: 9px;
}

.ap-fiche__coche {
	flex: 0 0 auto;
	color: var(--ap-succes);
	font-weight: 700;
}

.woocommerce div.product .product_meta {
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var(--ap-trait);
	color: var(--ap-doux);
	font-size: 0.8rem;
}

.woocommerce div.product .product_meta a {
	color: var(--ap-doux);
}

/* --- Le contenu de fond, en sections empilees ------------------------------ */

.ap-fiche__sections {
	margin-top: 24px;
	padding-top: 8px;
}

.ap-fiche__section + .ap-fiche__section {
	margin-top: 44px;
	padding-top: 44px;
	border-top: 1px solid var(--ap-trait);
}

.ap-fiche__section-titre {
	margin-bottom: 0.6em;
	font-size: 1.6rem;
}

/*
 * Le contenu de ces sections vient encore d'Elementor sur les sept fiches : il
 * apporte sa propre mise en page et sa propre largeur. On ne lui impose donc
 * pas de colonne de lecture, ce serait un combat de largeurs. Ce sera l'affaire
 * de la migration des fiches, ou le texte redevient du HTML simple.
 */
.ap-fiche__section > h2:first-child {
	margin-top: 0;
}

/*
 * Le texte sous la fiche prend toute la largeur du contenant.
 *
 * 14/08/2026, retour du cousin de Thomas : « sur cette page produit le texte en
 * dessous il est trop resserre aussi, il devrait prendre toute la largeur ».
 * Ce qui a saute a la place : la colonne de lecture de 720 px, posee le 10/08
 * et centree, qui laissait 180 px de vide de chaque cote sous un configurateur
 * qui, lui, va au bout. C'etait cet ecart qui se voyait, plus que la largeur.
 *
 * Le prix a payer, assume : environ 130 caracteres par ligne sur un grand ecran
 * au lieu de 85. Au-dela de ~90, l'oeil perd sa ligne en revenant a la gauche.
 * Si la lecture en souffre, le reglage se rattrape ici sans toucher au reste.
 */
.ap-fiche__section--commun,
.ap-fiche__section--migre {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

.ap-fiche__section--migre h2 {
	margin-top: 1.6em;
}

.ap-fiche__section--migre > h2:first-child {
	margin-top: 0;
}

.ap-fiche__section--migre p {
	margin: 0 0 1.1em;
}

/*
 * La galerie de realisations d'une fiche migree. Elle sort de la colonne de
 * lecture, qui est faite pour du texte : quatre photos a 720 px de large
 * empilees feraient defiler la page sur des metres.
 */
.ap-galerie {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 12px;
	width: 100%;
	max-width: var(--ap-largeur);
	margin: 1.4em 0 1.6em;
	padding: 0;
}

/*
 * ⚠ wpautop AJOUTE UN <br> APRES CHAQUE IMAGE, et un <br> est un enfant de la
 * grille comme un autre : il occupe une cellule. Ecrire une image par ligne
 * dans le fichier de contenu, ce qui est la seule facon de le garder lisible,
 * donnait donc une photo, une cellule vide, une photo, une cellule vide.
 * Constate le 08/08/2026 sur la fiche femme : quatre colonnes annoncees, deux
 * photos par rangee a l'ecran.
 * La regle est ici plutot que dans le contenu pour que le piege soit reglé une
 * fois pour toutes, y compris sur les fiches ecrites plus tard.
 */
.ap-galerie br {
	display: none;
}

.ap-galerie img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border: 1px solid var(--ap-trait);
	border-radius: var(--ap-rayon);
	background: var(--ap-carte);
}

.ap-fiche__liste {
	margin: 0 0 1.1em;
	padding-left: 1.3em;
}

.ap-fiche__liste li + li {
	margin-top: 0.4em;
}

.ap-fiche__tableau {
	width: 100%;
	margin: 1.2em 0;
	border-collapse: collapse;
	background: var(--ap-carte);
	border: 1px solid var(--ap-trait);
	border-radius: var(--ap-rayon);
	overflow: hidden;
	font-size: 0.95rem;
}

.ap-fiche__tableau th,
.ap-fiche__tableau td {
	padding: 12px 16px;
	text-align: left;
	font-weight: 400;
	border-top: 1px solid var(--ap-trait);
}

.ap-fiche__tableau tr:first-child th,
.ap-fiche__tableau tr:first-child td {
	border-top: none;
}

.ap-fiche__tableau td {
	white-space: nowrap;
	text-align: right;
	color: var(--ap-doux);
}

/*
 * LE TABLEAU DES DELAIS FAISAIT DEBORDER TOUTE LA FICHE PRODUIT SUR TELEPHONE.
 * Mesure a 375 px : la page defilait jusqu'a 542 px, soit 167 px de trop, et
 * c'etait le seul debordement horizontal du site.
 *
 * La cause est le « white-space: nowrap » ci-dessus. Il sert a garder « 7 a 10
 * jours ouvres » sur une ligne, ce qui est juste sur grand ecran, mais la
 * derniere cellule dit « environ 2 semaines, hors periodes de vacances » :
 * insecable, elle imposait a elle seule une largeur minimale de tableau
 * superieure a l'ecran, et le tableau poussait la page entiere.
 *
 * Sous 640 px les cellules se remettent donc a couper, et chaque ligne passe
 * en deux blocs empiles, libelle puis valeur : a cette largeur, deux colonnes
 * cote a cote ne laissaient de toute facon plus rien a la seconde.
 */
@media (max-width: 640px) {
	.ap-fiche__tableau,
	.ap-fiche__tableau tbody,
	.ap-fiche__tableau tr {
		display: block;
	}

	.ap-fiche__tableau th,
	.ap-fiche__tableau td {
		display: block;
		white-space: normal;
		text-align: left;
		padding: 0 14px;
	}

	.ap-fiche__tableau tr {
		padding: 12px 0;
		border-top: 1px solid var(--ap-trait);
	}

	.ap-fiche__tableau tr:first-child {
		border-top: none;
	}

	.ap-fiche__tableau th {
		padding-bottom: 2px;
		border-top: none;
	}

	.ap-fiche__tableau td {
		border-top: none;
	}
}

.ap-fiche__tableau-total th,
.ap-fiche__tableau-total td {
	font-weight: 700;
	color: var(--ap-encre);
	background: #faf7f2;
}

/*
 * L'AUTEUR ET LA DATE D'UN AVIS. WooCommerce les ecrit en #767676, une valeur
 * en dur dans sa propre feuille, qui donne 4,31:1 sur le fond du site : juste
 * sous les 4,5:1 exiges. La couleur secondaire du theme est plus sombre et
 * passe le seuil. Releve au balayage du 11/08/2026.
 */
.woocommerce #reviews .comment-text p.meta,
.woocommerce #reviews .comment-text p.meta * {
	color: var(--ap-doux);
}

/* --- « Et si vous en offriez deux ? » -------------------------------------- *
 *
 * Le bloc qui compare le peignoir seul et le duo, en fin de fiche adulte. Il est
 * pose en carte bleue et non en section ordinaire : c'est le seul endroit de la
 * page qui propose autre chose que ce que le visiteur regarde, il doit se voir
 * comme une respiration, pas comme un huitieme paragraphe.
 *
 * La regle « section + section » du dessus lui donnerait un filet et 44 px de
 * padding : les deux sont annules ici, la carte porte deja sa propre bordure.
 */

.ap-offre-duo.ap-fiche__section {
	padding: 26px 28px;
	border: 1px solid var(--ap-bleu-100);
	border-radius: var(--ap-rayon);
	background: var(--ap-bleu-050);
}

.ap-fiche__section + .ap-offre-duo.ap-fiche__section {
	padding-top: 26px;
	border-top: 1px solid var(--ap-bleu-100);
}

.ap-offre-duo__corps {
	display: flex;
	gap: 28px;
	align-items: center;
}

.ap-offre-duo__texte {
	flex: 1 1 auto;
	min-width: 0;
}

/*
 * « min-width: 0 » n'est pas decoratif. Un element de flex vaut par defaut
 * min-width: auto, c'est-a-dire « jamais plus etroit que mon contenu » : l'image
 * de WooCommerce faisant 300 px, la photo sortait a 329 px malgre sa base de
 * 190, et mangeait la colonne de texte, ou « Le duo, deux peignoirs brodes »
 * passait alors sur deux lignes. Constate au controle du 13/08/2026.
 */
.ap-offre-duo__photo {
	flex: 0 0 220px;
	min-width: 0;
	display: block;
	line-height: 0;
}

.ap-offre-duo__photo img {
	width: 100%;
	height: auto;
	border-radius: 10px;
}

.ap-offre-duo__calcul {
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
}

/*
 * Deux colonnes : le libelle a gauche, le montant a droite, et le detail sur
 * toute la largeur en dessous. La grille evite le point de fuite d'un tableau,
 * qui aurait impose une largeur minimale et pousse la page sur telephone. C'est
 * exactement le defaut corrige le 11/08 sur le tableau des delais.
 */
.ap-offre-duo__calcul li {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 2px 16px;
	padding: 12px 0;
	border-top: 1px solid var(--ap-bleu-100);
}

.ap-offre-duo__calcul li:first-child {
	border-top: none;
	padding-top: 0;
}

.ap-offre-duo__ligne {
	font-weight: 600;
}

.ap-offre-duo__montant {
	font-family: var(--ap-serif);
	font-size: 1.5rem;
	line-height: 1;
	text-align: right;
	white-space: nowrap;
	color: var(--ap-encre);
}

.ap-offre-duo__detail {
	grid-column: 1 / -1;
	color: var(--ap-doux);
	font-size: 0.86rem;
}

.ap-offre-duo__conclusion {
	margin: 0 0 18px;
	font-size: 1.05rem;
}

.ap-offre-duo__lien {
	display: inline-block;
}

.ap-offre-duo__mention {
	margin: 12px 0 0;
	color: var(--ap-doux);
	font-size: 0.8rem;
}

@media (max-width: 720px) {

	.ap-offre-duo.ap-fiche__section {
		padding: 22px 18px;
	}

	/*
	 * La photo passe AU-DESSUS du calcul sur telephone (colonne inversee) : elle
	 * dit en une image de quoi on parle, avant les chiffres.
	 */
	.ap-offre-duo__corps {
		flex-direction: column-reverse;
		gap: 18px;
		align-items: stretch;
	}

	.ap-offre-duo__photo {
		flex: 0 0 auto;
		max-width: 220px;
		margin: 0 auto;
	}
}

/* --- Les avis, en defile horizontal ---------------------------------------- *
 *
 * Demande de Thomas du 13/08/2026, sur le modele de wopilo.com : des cartes
 * cote a cote qu'on fait defiler, plutot qu'une pile verticale.
 *
 * POURQUOI CA VALAIT LE COUP. Les sept avis de la fiche femme sont tous a 5 sur
 * 5 et empilaient une quinzaine d'ecrans en bas de page : la meilleure preuve du
 * site etait aussi la moins vue. En cartes, les sept tiennent dans la hauteur
 * d'une seule.
 *
 * CE N'EST PAS UN CARROUSEL JAVASCRIPT. C'est un debordement horizontal avec
 * accroche (scroll-snap) : le doigt et la molette suffisent, les fleches ajoutees
 * par theme.js ne sont qu'un confort. Sans JavaScript, la zone reste defilable ;
 * sans CSS, on retrouve la liste d'origine. Les sept avis restent dans le DOM
 * dans les deux cas, ce qui compte pour le referencement comme pour un lecteur
 * d'ecran.
 *
 * ⚠️ TOUS LES SELECTEURS DE CE BLOC PORTENT DEUX ID, « #reviews #comments ».
 * Ce n'est pas du zele : la feuille de WooCommerce ecrit ses regles d'avis avec
 * ces deux id, et une regle a un seul id perd la bataille de specificite sans
 * rien dire. Constate le 13/08/2026 : les cartes gardaient bien leur largeur et
 * leur arrondi, qui ne sont poses que par nous, mais perdaient leur fond blanc
 * et leur bordure, que WooCommerce remet a zero. Elles se fondaient dans la
 * page. Ne jamais retirer le « #comments » d'une de ces lignes.
 */

.woocommerce #reviews #comments ol.commentlist {
	display: flex;
	gap: 18px;
	margin: 0;
	padding: 4px 2px 16px;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-left: 2px;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
}

.woocommerce #reviews #comments ol.commentlist li.review,
.woocommerce #reviews #comments ol.commentlist li.comment {
	flex: 0 0 min(340px, 84%);
	margin: 0;
	padding: 0;
	border: 1px solid var(--ap-trait);
	border-radius: var(--ap-rayon);
	background: var(--ap-carte);
	scroll-snap-align: start;
	display: flex;
}

.woocommerce #reviews #comments ol.commentlist li .comment_container {
	display: flex;
	flex: 1 1 auto;
	padding: 20px 20px 0;
	border: none;
	background: none;
}

/*
 * L'AVATAR DISPARAIT. C'est une image decorative, tiree de gravatar.com, qui ne
 * dit rien du peignoir : sept requetes vers un domaine tiers pour sept ronds
 * gris. Le nom de l'autrice ou de l'auteur, lui, reste ecrit en toutes lettres.
 */
.woocommerce #reviews #comments ol.commentlist li img.avatar {
	display: none;
}

/*
 * DEUX ID DANS LE SELECTEUR, ET C'EST NECESSAIRE. La feuille de WooCommerce
 * ecrit « #reviews #comments ol.commentlist li .comment-text » avec un padding
 * de 1em, une bordure et une marge gauche de 50 px pour l'avatar. Un selecteur a
 * un seul id perdait la bataille de specificite : le pied de carte s'arretait a
 * 16 px des bords au lieu de les toucher. Constate au controle du 13/08/2026.
 */
.woocommerce #reviews #comments ol.commentlist li .comment-text {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 0;
}

/*
 * L'ordre du markup de WooCommerce est etoiles, auteur, texte. Dans une carte,
 * on veut etoiles, texte, puis l'auteur en pied : c'est « order » qui le fait,
 * sans toucher au HTML que WooCommerce genere.
 */
.woocommerce #reviews #comments ol.commentlist li .comment-text .star-rating {
	order: 1;
	margin: 0 auto 14px;
	float: none;
}

/*
 * LE TEXTE EST BORNE A SIX LIGNES. Sans cela, toutes les cartes prenaient la
 * hauteur du plus long avis — celui de Manon, quatre phrases — et le defile
 * faisait 517 px de haut avec un grand vide sous « Super peignoir! ». Six
 * lignes suffisent a juger un avis ; theme.js pose un « Voir plus » sur les
 * cartes reellement coupees, et lui seul retire la limite.
 */
.woocommerce #reviews #comments ol.commentlist li .comment-text .description {
	order: 2;
	flex: 1 1 auto;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 6;
	line-clamp: 6;
	overflow: hidden;
}

.woocommerce #reviews #comments ol.commentlist li.est-deplie .comment-text .description {
	display: block;
	overflow: visible;
}

.woocommerce #reviews #comments ol.commentlist li .comment-text .description p:last-child {
	margin-bottom: 0;
}

.ap-avis-plus {
	order: 3;
	align-self: flex-start;
	margin-top: 8px;
	padding: 0;
	border: none;
	background: none;
	color: var(--ap-bleu-texte);
	font-family: inherit;
	font-size: 0.9rem;
	text-decoration: underline;
	cursor: pointer;
}

.woocommerce #reviews #comments ol.commentlist li .comment-text p.meta {
	order: 4;
	margin: 18px -20px 0;
	padding: 12px 20px;
	border-top: 1px solid var(--ap-trait);
	border-radius: 0 0 13px 13px;
	background: var(--ap-bleu-050);
	font-size: 0.85rem;
}

/* La barre de defilement, discrete mais visible : c'est elle qui dit qu'il y a
   la suite, avant meme qu'on ait vu les fleches. */
.woocommerce #reviews #comments ol.commentlist {
	scrollbar-color: var(--ap-bleu-200) transparent;
}

.woocommerce #reviews #comments ol.commentlist::-webkit-scrollbar {
	height: 8px;
}

.woocommerce #reviews #comments ol.commentlist::-webkit-scrollbar-thumb {
	border-radius: 4px;
	background: var(--ap-bleu-200);
}

.woocommerce #reviews #comments ol.commentlist::-webkit-scrollbar-track {
	background: transparent;
}

/* --- Les fleches du defile ------------------------------------------------- */

.ap-avis-navigation {
	display: flex;
	gap: 10px;
	justify-content: flex-end;
	margin-top: -4px;
}

.ap-avis-navigation button {
	width: 42px;
	height: 42px;
	padding: 0;
	border: 1px solid var(--ap-trait);
	border-radius: 50%;
	background: var(--ap-carte);
	color: var(--ap-bleu-texte);
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
}

.ap-avis-navigation button:hover {
	border-color: var(--ap-bleu-300);
	background: var(--ap-bleu-050);
}

.ap-avis-navigation button[disabled] {
	opacity: 0.35;
	cursor: default;
}

/* --- Les produits lies ---------------------------------------------------- */

.woocommerce div.product .related,
.woocommerce div.product .up-sells {
	margin-top: 44px;
	padding-top: 44px;
	border-top: 1px solid var(--ap-trait);
}

.woocommerce div.product .related > h2,
.woocommerce div.product .up-sells > h2 {
	margin-bottom: 0.8em;
	font-size: 1.6rem;
}

/* ---------------------------------------------------------------------------
   15. La page d'accueil

   Une suite de bandes pleine largeur qui alternent le blanc et le fond creme,
   pour donner un rythme a la page la plus vue du site. Chaque bande pose son
   fond sur toute la largeur de l'ecran et rentre son contenu dans le
   .ap-contenant : c'est pour cela que les sections sont a deux niveaux.

   Le decalage negatif du haut colle l'entree en matiere sous l'en-tete. Le
   padding de .ap-principal vaut pour toutes les pages du site ; l'accueil est
   la seule ou un blanc entre l'en-tete et l'image ferait un accident.
   --------------------------------------------------------------------------- */

.ap-accueil {
	margin-top: -28px;
}

/* --- L'entree en matiere --------------------------------------------------- */

/*
 * LA PHOTO OCCUPE TOUTE LA SECTION, LE TEXTE EST POSE DESSUS.
 * Mise en page de l'ancien site, retablie le 11/08/2026 sur demande de Thomas.
 * La version precedente mettait la photo dans une colonne a droite : sur un
 * ecran large elle n'occupait plus qu'un quart de la page.
 *
 * « isolation: isolate » cree un contexte d'empilement propre a la section, ce
 * qui permet de poser le fond en z-index: -1 sans qu'il passe DERRIERE le fond
 * de la page (et donc devienne invisible). Sans cette ligne, l'image dispararait
 * sur les navigateurs qui peignent le body en dernier.
 */
.ap-heros {
	position: relative;
	isolation: isolate;
	border-bottom: 1px solid var(--ap-trait);
	background: var(--ap-carte);
}

.ap-heros__fond {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
}

/*
 * La balise <img> est conservee plutot qu'un background-image : elle garde son
 * srcset, donc le mobile ne telecharge pas le fichier pleine taille. C'est le
 * object-fit qui lui fait jouer le role d'un fond.
 */
.ap-heros__fond img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 32%;
}

.ap-heros__corps {
	display: flex;
	align-items: center;
	min-height: 440px;
	padding-top: 44px;
	padding-bottom: 44px;
}

@media (min-width: 900px) {
	.ap-heros__corps {
		min-height: 560px;
		padding-top: 64px;
		padding-bottom: 64px;
	}
}

/*
 * LA CARTE BLEUE. Le bleu de la marque a 88 % : la photo transparait un peu,
 * comme sur l'ancien site (qui etait a 83 %), sans que le texte perde en
 * lisibilite. Le blanc pur sur ce bleu ne donne que 2,0:1, c'est pourquoi le
 * chapeau et le titre sont ecrits en encre et non en blanc. L'ancien site
 * ecrivait en blanc ; c'etait joli et illisible en plein soleil.
 */
/*
 * TOUT LE CONTENU DE LA CARTE EST CENTRE (Thomas, 11/08/2026 : « les boutons
 * ne sont pas au milieu »). C'est aussi ce que faisait l'ancien site : titre,
 * paragraphe et bouton alignes sur le meme axe. Le texte etait a gauche et les
 * deux boutons pendaient sous lui, ce qui se voyait surtout sur telephone, ou
 * ils passent l'un sous l'autre.
 */
.ap-heros__carte {
	max-width: 34rem;
	padding: 32px 26px;
	border-radius: 32px;
	background: rgba(110, 193, 228, 0.88);
	color: var(--ap-encre);
	text-align: center;
}

@media (min-width: 900px) {
	.ap-heros__carte {
		padding: 44px 40px;
		border-radius: 40px;
	}
}

.ap-heros__titre {
	margin-bottom: 0.35em;
	color: var(--ap-encre);
}

.ap-heros__chapeau {
	margin: 0 0 28px;
	font-size: 1.1rem;
	color: var(--ap-encre);
}

/*
 * « justify-content: center » et non « text-align » : les deux enfants sont
 * des elements de flex, sur lesquels text-align n'a aucune prise.
 */
.ap-heros__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 18px;
	align-items: center;
	justify-content: center;
	margin: 0;
}

.ap-lien-sobre {
	color: var(--ap-doux);
	font-size: 0.95rem;
	text-decoration: none;
	border-bottom: 1px solid var(--ap-trait);
	padding-bottom: 2px;
}

.ap-lien-sobre:hover {
	color: var(--ap-encre);
	border-color: var(--ap-bleu);
}

/* Le lien secondaire pose sur la carte bleue : le gris clair y disparait. */
.ap-lien-sobre--clair {
	color: var(--ap-encre);
	border-bottom-color: rgba(31, 29, 26, 0.35);
}

.ap-lien-sobre--clair:hover {
	color: var(--ap-encre);
	border-bottom-color: var(--ap-encre);
}

/*
 * Le bouton blanc de l'ancien site, en pastille. Sur la carte bleue, le bleu
 * nuit du bouton normal fait deux bleus qui se battent.
 */
.ap-bouton--clair {
	background: #fff;
	color: var(--ap-bleu-texte);
	border-radius: 30px;
	padding: 14px 28px;
}

.ap-bouton--clair:hover {
	background: #fff;
	color: var(--ap-bleu-texte);
}

/* --- La bande de reassurance ----------------------------------------------- */

.ap-reassurance {
	padding-top: 26px;
	padding-bottom: 26px;
}

.ap-reassurance__liste {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ap-reassurance__liste li {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-left: 14px;
	border-left: 2px solid var(--ap-bleu);
}

.ap-reassurance__liste strong {
	font-size: 0.98rem;
}

.ap-reassurance__liste span {
	font-size: 0.88rem;
	color: var(--ap-doux);
}

/* --- Les sections courantes ------------------------------------------------- */

.ap-accueil__section {
	padding-top: 48px;
	padding-bottom: 8px;
}

.ap-accueil__entete {
	max-width: var(--ap-largeur-texte);
	margin-bottom: 30px;
}

.ap-accueil__entete h2,
.ap-accueil__titre-seul {
	margin-bottom: 0.3em;
}

.ap-accueil__entete p {
	margin: 0;
	color: var(--ap-doux);
}

.ap-accueil__titre-seul {
	margin-bottom: 30px;
}

/* La grille produits pose deja 48px sous elle : le bouton n'en veut pas plus. */
.ap-accueil__vitrine ul.products {
	margin-bottom: 28px;
}

.ap-accueil__suite {
	margin: 0;
}

/* --- La mise en avant du duo ------------------------------------------------ */

.ap-duo {
	margin-top: 48px;
	background: var(--ap-carte);
	border-top: 1px solid var(--ap-trait);
	border-bottom: 1px solid var(--ap-trait);
}

.ap-duo__corps {
	display: grid;
	gap: 28px;
	align-items: center;
	padding-top: 48px;
	padding-bottom: 48px;
}

@media (min-width: 900px) {
	.ap-duo__corps {
		grid-template-columns: 1fr 1.15fr;
		gap: 48px;
	}
}

.ap-duo__visuel img {
	display: block;
	width: 100%;
	border-radius: var(--ap-rayon);
}

.ap-duo__surtitre {
	margin: 0 0 4px;
	font-family: var(--ap-sans);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ap-bleu-texte);
}

.ap-duo__texte p {
	color: #4a443c;
}

.ap-duo__texte p:last-child {
	margin-bottom: 0;
}

/* --- Les realisations ------------------------------------------------------- */

.ap-realisations {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 20px;
}

.ap-realisations img {
	display: block;
	width: 100%;
	border-radius: var(--ap-rayon);
	background: var(--ap-carte);
}

/* --- Les quatre arguments --------------------------------------------------- */

.ap-arguments {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 24px;
}

/*
 * Vignette et texte centres dans leur colonne, demande de Thomas du 10/08/2026.
 * La vignette etait calee a gauche : desaxee par rapport a son paragraphe, elle
 * cassait l'alignement des quatre cartes.
 */
.ap-argument {
	text-align: center;
}

.ap-argument img {
	display: block;
	width: 84px;
	height: 84px;
	margin: 0 auto 14px;
	border-radius: 50%;
	object-fit: cover;
}

.ap-argument h3 {
	margin-bottom: 0.3em;
	font-size: 1.15rem;
}

.ap-argument p {
	margin: 0;
	font-size: 0.92rem;
	color: #4a443c;
}

/* --- L'atelier et sa video --------------------------------------------------- */

.ap-atelier {
	margin-top: 56px;
	background: var(--ap-carte);
	border-top: 1px solid var(--ap-trait);
	border-bottom: 1px solid var(--ap-trait);
}

.ap-atelier__corps {
	display: grid;
	gap: 32px;
	align-items: center;
	padding-top: 48px;
	padding-bottom: 48px;
}

@media (min-width: 900px) {
	.ap-atelier__corps {
		grid-template-columns: 1fr 1fr;
		gap: 48px;
	}
}

.ap-atelier__texte p {
	color: #4a443c;
}

/*
 * La video : un rapport 16/9 tenu par le conteneur, pour que le remplacement
 * de la facade par le lecteur au clic ne fasse pas sauter la page.
 */
.ap-video {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: var(--ap-rayon);
	overflow: hidden;
	background: var(--ap-encre);
}

.ap-video > * {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: none;
}

.ap-video__facade {
	display: block;
	padding: 0;
	margin: 0;
	background: none;
	cursor: pointer;
}

.ap-video__facade img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.85;
	transition: opacity 0.15s;
}

.ap-video__facade:hover img {
	opacity: 1;
}

/* Le triangle de lecture, dessine en CSS : pas d'image a telecharger. */
.ap-video__lecture {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 68px;
	height: 68px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	/* Bleu ciel comme le reste du site depuis le 11/08/2026, plus de marine. */
	background: rgba(110, 193, 228, 0.92);
}

.ap-video__lecture::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 11px 0 11px 18px;
	/* Triangle en encre : sur le bleu ciel, un triangle blanc s'efface. */
	border-color: transparent transparent transparent var(--ap-action-texte);
}

/*
 * Le libelle est lu par les lecteurs d'ecran et sert de titre a l'iframe une
 * fois la video ouverte, mais il n'a pas a s'afficher par-dessus la vignette.
 */
.ap-video__libelle {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/*
 * LE TITRE « BOUTIQUE » RESTE VISIBLE.
 *
 * Il avait ete masque hors champ le 13/08/2026, puis remis le jour meme sur
 * demande de Thomas. Seul le sous-titre « Sept peignoirs a faire broder » a
 * disparu : c'etait un <h2> du contenu de la page 1132, retire en base
 * (sauvegarde dans ~/sauvegardes-claude/). Il n'y a donc rien a ecrire ici, et
 * cette note existe pour qu'on ne recommence pas.
 */

/* --- Le blog ----------------------------------------------------------------- */

.ap-accueil .ap-grille {
	margin-bottom: 28px;
}

/* --- La largeur de lecture des articles, 14/08/2026 ---------------------------
 *
 * Retour du cousin de Thomas : « le texte est beaucoup trop serre au milieu sur
 * le PC, ajuste a l'ecran pour qu'il prenne la page correctement ». Essaye sur
 * l'article hotel seul, valide par Thomas le jour meme (« tres bien l'article »),
 * puis etendu aux treize articles.
 *
 * Pourquoi 880 px et pas la pleine largeur : a 1080 px la ligne depasse 120
 * caracteres et l'oeil rate sa ligne en revenant a gauche. A 880 px et 17 px on
 * mesure 108 caracteres, deja au-dessus de la zone confortable qui s'arrete
 * vers 90, mais le bloc remplit l'ecran sans se disloquer. C'est le compromis
 * assume : le symptome signale etait reel, une colonne de 720 sous un titre et
 * une image qui vont au bout, ca se voit.
 *
 * SI LA LECTURE EN SOUFFRE, NE PAS TOUCHER A LA LARGEUR : monter la taille du
 * texte a 18 ou 19 px remplit l'ecran sans allonger la ligne en caracteres.
 *
 * Le mobile ne risque rien : 880 px est un plafond, sous cette largeur la
 * colonne suit deja la fenetre. Mesure de controle en iframe de 390 px, jamais
 * en redimensionnant la fenetre, qui ne change pas le viewport et rend des
 * mesures fausses. Verifie le 14/08 : colonne 335 px, aucun debordement.
 */
.ap-article .ap-prose {
	max-width: 880px;
	font-size: 17px;
}

/*
 * Les tableaux du corps d'article scrollent dans leur coin, 14/08/2026.
 *
 * Trois articles font scroller la PAGE ENTIERE sur un telephone a cause d'un
 * tableau plus large que l'ecran : mesure sur `grammage-peignoir`, 571 px de
 * tableau dans une colonne de 335, soit 236 px de debordement, et la page part
 * de travers des qu'on la touche. Defaut releve a l'audit du 12/08, confirme au
 * doigt le 14/08 en marge du retour « attention a ce que ce soit responsive ».
 *
 * `display: block` + `width: max-content` : le tableau garde sa largeur
 * naturelle et ses colonnes alignees, mais devient un bloc qui defile
 * horizontalement DANS son cadre. La page, elle, ne bouge plus.
 */
.ap-prose > table,
.ap-prose > figure > table {
	display: block;
	width: max-content;
	max-width: 100%;
	overflow-x: auto;
}

/*
 * L'appel vers la boutique dans le corps d'un article, 14/08/2026.
 *
 * Pourquoi ce bloc existe : l'article « hotel » amene 1 678 visiteurs en six
 * semaines, deux fois la page d'accueil, et n'envoie que 4 personnes vers un
 * produit, soit 0,2 %. `cadeaux-noces-coton`, le seul article qui vend, est a
 * 3,6 % avec DEUX LIENS TEXTE ORDINAIRES, sans bouton. Le format n'est donc pas
 * le levier, la POSITION l'est : noces de coton pose son premier lien a 22 % du
 * texte, l'article hotel n'avait rien avant 74 %, et le lecteur qui a eu sa
 * reponse est parti bien avant.
 *
 * L'encart sert a rendre l'appel visible sans le deguiser en publicite : fond
 * bleu tres pale de la palette, pas de couleur rapportee. Il reste dans la
 * colonne de lecture de 880 px, il ne la deborde pas.
 *
 * `.ap-appel-ligne` est la version nue, un bouton seul sous un paragraphe qui
 * porte deja le propos : inutile de repeter le texte dans un cadre.
 */
.ap-appel {
	margin: 32px 0;
	padding: 20px 24px;
	border: 1px solid var(--ap-bleu-100);
	border-radius: var(--ap-rayon);
	background: var(--ap-bleu-050);
}

.ap-appel > p {
	margin: 0 0 16px;
}

.ap-appel > p:last-child {
	margin-bottom: 0;
}

.ap-appel-ligne {
	margin: 8px 0 32px;
}

/*
 * Sur telephone le bouton prend la largeur : a 335 px de colonne, un
 * inline-block de 278 px laisse un vide a droite qui le fait passer pour un
 * element decoratif. Pleine largeur, texte centre, il redevient une action.
 */
@media (max-width: 520px) {
	.ap-appel .ap-bouton,
	.ap-appel-ligne .ap-bouton {
		display: block;
		text-align: center;
	}
}