/* ===================================================================
   MAISON TRESSANE — feuille de style principale
   Direction artistique : noir profond, champagne, typographie editoriale.
   =================================================================== */

/* -------------------------------------------------
   1. Jetons de design (les variables du site)
   ------------------------------------------------- */
:root {
	--noir:        #0d0d0f;
	--noir-2:      #16161a;
	--noir-3:      #232329;
	--champagne:   #c6a87c;
	/* Assombri pour l’accessibilite : #b08f5f donnait 2,8:1 sur le creme,
	   loin des 4,5:1 requis pour du petit texte. #846437 passe a 5,05:1 sur
	   --creme et 4,62:1 sur --creme-2, en gardant la meme famille de teinte. */
	--champagne-2: #846437;
	--champagne-3: #e6d6ba;
	--creme:       #faf7f2;
	--creme-2:     #f2ece2;
	--blanc:       #ffffff;
	--gris:        #6f6a64;
	--gris-2:      #9a948d;
	--bordure:     rgba(198, 168, 124, .3);
	--bordure-2:   rgba(13, 13, 15, .1);
	--rouge:       #a3453b;
	--vert:        #4a6b52;

	--serif: 'Playfair Display', 'Times New Roman', Georgia, serif;
	--sans:  'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

	--max:      1320px;
	--max-etroit: 820px;
	--gouttiere: clamp(20px, 5vw, 56px);

	--t: .45s cubic-bezier(.22, .61, .36, 1);
	--ombre:   0 18px 50px -22px rgba(13, 13, 15, .35);
	--ombre-2: 0 30px 70px -30px rgba(13, 13, 15, .5);
}

/* -------------------------------------------------
   2. Base
   ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--creme);
	color: var(--noir);
	font-family: var(--sans);
	font-size: 16.5px;
	font-weight: 350;
	line-height: 1.72;
	letter-spacing: .006em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; transition: color var(--t), opacity var(--t); }

button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }

input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--champagne); color: var(--noir); }

:focus-visible {
	outline: 2px solid var(--champagne-2);
	outline-offset: 3px;
}

/* -------------------------------------------------
   3. Typographie
   ------------------------------------------------- */
h1, h2, h3, h4, h5 {
	font-family: var(--serif);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -.015em;
	margin: 0 0 .5em;
}

h1 { font-size: clamp(2.6rem, 6vw, 5.2rem); }
h2 { font-size: clamp(2rem, 4.2vw, 3.4rem); }
h3 { font-size: clamp(1.35rem, 2.2vw, 1.9rem); }
h4 { font-size: clamp(1.1rem, 1.6vw, 1.3rem); }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

.surtitre {
	display: block;
	font-family: var(--sans);
	font-size: .72rem;
	font-weight: 500;
	letter-spacing: .34em;
	text-transform: uppercase;
	color: var(--champagne-2);
	margin-bottom: 1.4em;
}

.surtitre--clair { color: var(--champagne); }

.chapo {
	font-size: clamp(1.02rem, 1.5vw, 1.16rem);
	color: var(--gris);
	line-height: 1.8;
	max-width: 62ch;
}

.italique { font-style: italic; }

/* Liseré décoratif sous les titres de section */
.trait {
	width: 54px;
	height: 1px;
	background: var(--champagne);
	margin: 1.6rem 0 0;
}
.trait--centre { margin-left: auto; margin-right: auto; }

/* -------------------------------------------------
   4. Structure
   ------------------------------------------------- */
.wrap {
	width: 100%;
	max-width: var(--max);
	margin-inline: auto;
	padding-inline: var(--gouttiere);
}

.wrap--etroit { max-width: var(--max-etroit); }

.section { padding-block: clamp(64px, 9vw, 130px); }
.section--serre { padding-block: clamp(44px, 6vw, 84px); }

.section--noir  { background: var(--noir); color: var(--creme); }
.section--noir h1, .section--noir h2, .section--noir h3 { color: var(--blanc); }
.section--noir .chapo { color: rgba(250, 247, 242, .68); }

.section--creme { background: var(--creme-2); }
.section--blanc { background: var(--blanc); }

.entete-section { margin-bottom: clamp(36px, 5vw, 64px); }
.entete-section--centre { text-align: center; }
.entete-section--centre .chapo { margin-inline: auto; }

.entete-section--ligne {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
}

/* -------------------------------------------------
   5. Boutons
   ------------------------------------------------- */
.btn {
	--bg: var(--noir);
	--fg: var(--creme);
	--bd: var(--noir);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6em;
	padding: 1.02em 2.5em;
	background: var(--bg);
	color: var(--fg);
	border: 1px solid var(--bd);
	font-family: var(--sans);
	font-size: .76rem;
	font-weight: 500;
	letter-spacing: .22em;
	text-transform: uppercase;
	line-height: 1;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: color var(--t), border-color var(--t), background-color var(--t);
	text-align: center;
}

/* Remplissage qui monte depuis le bas au survol */
.btn::after {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--champagne);
	transform: translateY(101%);
	transition: transform var(--t);
	z-index: 0;
}
.btn > * , .btn { position: relative; }
.btn span { position: relative; z-index: 1; }

.btn:hover { color: var(--noir); border-color: var(--champagne); }
.btn:hover::after { transform: translateY(0); }

.btn--or     { --bg: var(--champagne); --fg: var(--noir); --bd: var(--champagne); }
.btn--or::after { background: var(--noir); }
.btn--or:hover { color: var(--creme); border-color: var(--noir); }

.btn--vide   { --bg: transparent; --fg: var(--noir); --bd: var(--noir); }
.btn--clair  { --bg: transparent; --fg: var(--creme); --bd: rgba(250,247,242,.45); }
.btn--clair:hover { color: var(--noir); }

.btn--large  { width: 100%; }
.btn--petit  { padding: .82em 1.7em; font-size: .7rem; }

/* Lien souligné animé */
.lien-souligne {
	display: inline-flex;
	align-items: center;
	gap: .55em;
	font-size: .76rem;
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
	padding-bottom: .45em;
	border-bottom: 1px solid var(--bordure);
	transition: border-color var(--t), color var(--t);
	white-space: nowrap;
}
.lien-souligne:hover { border-color: var(--champagne); color: var(--champagne-2); }
.lien-souligne .fleche { transition: transform var(--t); }
.lien-souligne:hover .fleche { transform: translateX(5px); }

/* -------------------------------------------------
   6. Bandeau d'annonce
   ------------------------------------------------- */
.annonce {
	background: var(--noir);
	color: var(--creme);
	font-size: .715rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	text-align: center;
	padding: 11px var(--gouttiere);
	position: relative;
	z-index: 60;
}
.annonce__piste {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2.6em;
	flex-wrap: wrap;
}
.annonce__item { display: inline-flex; align-items: center; gap: .6em; opacity: .92; }
.annonce__item svg { width: 14px; height: 14px; stroke: var(--champagne); }
@media (max-width: 780px) {
	.annonce__item:not(:first-child) { display: none; }
}

/* -------------------------------------------------
   7. En-tete
   ------------------------------------------------- */
.entete {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(250, 247, 242, .9);
	backdrop-filter: saturate(150%) blur(14px);
	-webkit-backdrop-filter: saturate(150%) blur(14px);
	border-bottom: 1px solid var(--bordure-2);
	transition: background var(--t), box-shadow var(--t);
}
.entete.is-collee { box-shadow: 0 6px 28px -18px rgba(13,13,15,.5); }

.entete__barre {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 20px;
	min-height: 84px;
}

.site-logo { display: inline-flex; align-items: center; justify-self: center; }
.site-logo__img { max-height: 54px; width: auto; }
.site-logo__text {
	font-family: var(--serif);
	font-size: clamp(1.32rem, 2.3vw, 1.85rem);
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Navigation principale */
.nav-principale ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: clamp(16px, 2vw, 34px); }
.nav-principale a {
	font-size: .755rem;
	font-weight: 500;
	letter-spacing: .17em;
	text-transform: uppercase;
	padding: 6px 0;
	position: relative;
	white-space: nowrap;
}
.nav-principale a::after {
	content: '';
	position: absolute;
	left: 0; bottom: 0;
	width: 100%; height: 1px;
	background: var(--champagne);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform var(--t);
}
.nav-principale a:hover::after,
.nav-principale .current-menu-item > a::after,
.nav-principale .current_page_item > a::after { transform: scaleX(1); transform-origin: left; }

/* Sous-menus */
.nav-principale li { position: relative; }
.nav-principale .sub-menu {
	position: absolute;
	top: 100%; left: -22px;
	min-width: 244px;
	background: var(--blanc);
	border: 1px solid var(--bordure);
	padding: 14px 0;
	display: block;
	flex-direction: column;
	gap: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity var(--t), transform var(--t), visibility var(--t);
	box-shadow: var(--ombre);
}
.nav-principale li:hover > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-principale .sub-menu li { width: 100%; }
.nav-principale .sub-menu a { display: block; padding: 10px 24px; letter-spacing: .12em; }
.nav-principale .sub-menu a::after { display: none; }
.nav-principale .sub-menu a:hover { color: var(--champagne-2); background: var(--creme); }

/* Outils a droite */
.entete__outils {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: clamp(12px, 1.6vw, 22px);
}
.icone-btn {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	padding: 8px;
	position: relative;
	line-height: 1;
}
.icone-btn svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.3; }
.icone-btn:hover { color: var(--champagne-2); }
.icone-btn__label {
	font-size: .74rem;
	letter-spacing: .14em;
	text-transform: uppercase;
}
@media (max-width: 1080px) { .icone-btn__label { display: none; } }

.pastille {
	position: absolute;
	top: 0; right: 0;
	min-width: 18px; height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--champagne);
	color: var(--noir);
	font-size: .63rem;
	font-weight: 600;
	letter-spacing: 0;
	display: grid;
	place-items: center;
	line-height: 1;
}

/* Bouton menu mobile */
.burger { display: none; padding: 8px; }
.burger span {
	display: block;
	width: 24px; height: 1.4px;
	background: currentColor;
	margin: 5px 0;
	transition: transform var(--t), opacity var(--t);
}
.burger.is-ouvert span:nth-child(1) { transform: translateY(6.4px) rotate(45deg); }
.burger.is-ouvert span:nth-child(2) { opacity: 0; }
.burger.is-ouvert span:nth-child(3) { transform: translateY(-6.4px) rotate(-45deg); }

@media (max-width: 1024px) {
	.entete__barre { grid-template-columns: auto 1fr auto; min-height: 70px; }
	.nav-principale { display: none; }
	.burger { display: block; }
	.site-logo { justify-self: center; }
}

/* Tiroir mobile */
.tiroir {
	position: fixed;
	inset: 0;
	z-index: 90;
	background: var(--noir);
	color: var(--creme);
	padding: 96px var(--gouttiere) 48px;
	transform: translateX(-100%);
	transition: transform .55s cubic-bezier(.65,.05,.36,1);
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 34px;
}
.tiroir.is-ouvert { transform: translateX(0); }
.tiroir__fermer { position: absolute; top: 26px; right: var(--gouttiere); font-size: 1.9rem; line-height: 1; }
.tiroir ul { list-style: none; margin: 0; padding: 0; }
.tiroir > nav > ul > li { border-bottom: 1px solid rgba(250,247,242,.13); }
.tiroir > nav > ul > li > a {
	display: block;
	padding: 18px 0;
	font-family: var(--serif);
	font-size: 1.55rem;
	letter-spacing: .02em;
}
.tiroir .sub-menu { padding: 0 0 16px 14px; }
.tiroir .sub-menu a {
	display: block;
	padding: 7px 0;
	font-size: .82rem;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: rgba(250,247,242,.62);
}
.tiroir .sub-menu a:hover { color: var(--champagne); }
.tiroir__pied { margin-top: auto; display: flex; flex-direction: column; gap: 16px; }

/* Recherche plein ecran */
.recherche-overlay {
	position: fixed;
	inset: 0;
	z-index: 95;
	background: rgba(13,13,15,.97);
	display: grid;
	place-items: center;
	padding: var(--gouttiere);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--t), visibility var(--t);
}
.recherche-overlay.is-ouvert { opacity: 1; visibility: visible; }
.recherche-overlay form { width: min(720px, 100%); }
.recherche-overlay input[type="search"] {
	width: 100%;
	background: transparent;
	border: 0;
	border-bottom: 1px solid rgba(250,247,242,.3);
	color: var(--creme);
	font-family: var(--serif);
	font-size: clamp(1.6rem, 4vw, 2.7rem);
	padding: .4em 0;
}
.recherche-overlay input::placeholder { color: rgba(250,247,242,.32); }
.recherche-overlay__aide {
	margin-top: 22px;
	color: rgba(250,247,242,.5);
	font-size: .76rem;
	letter-spacing: .2em;
	text-transform: uppercase;
}
.recherche-overlay__fermer { position: absolute; top: 28px; right: var(--gouttiere); color: var(--creme); font-size: 2rem; line-height: 1; }

/* -------------------------------------------------
   8. Hero
   ------------------------------------------------- */
.hero {
	position: relative;
	min-height: clamp(560px, 88vh, 920px);
	display: grid;
	align-items: center;
	overflow: hidden;
	background: var(--noir);
	color: var(--creme);
	isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img, .hero__media video {
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: center 32%;
}
.hero__voile {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(100deg, rgba(13,13,15,.86) 0%, rgba(13,13,15,.56) 42%, rgba(13,13,15,.24) 72%, rgba(13,13,15,.5) 100%),
		linear-gradient(to top, rgba(13,13,15,.6) 0%, transparent 45%);
}
.hero__contenu { max-width: 660px; padding-block: clamp(90px, 14vw, 150px); }
.hero h1 { color: var(--blanc); margin-bottom: .3em; }
.hero h1 em { font-style: italic; color: var(--champagne); }
.hero__chapo {
	font-size: clamp(1rem, 1.5vw, 1.14rem);
	color: rgba(250,247,242,.8);
	max-width: 50ch;
	margin-bottom: 2.6em;
	line-height: 1.85;
}
.hero__actions { display: flex; gap: 16px; flex-wrap: wrap; }

.hero__defiler {
	position: absolute;
	bottom: 34px; left: 50%;
	transform: translateX(-50%);
	color: rgba(250,247,242,.6);
	font-size: .64rem;
	letter-spacing: .3em;
	text-transform: uppercase;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}
.hero__defiler::after {
	content: '';
	width: 1px; height: 46px;
	background: linear-gradient(to bottom, var(--champagne), transparent);
	animation: defile 2.4s ease-in-out infinite;
}
@keyframes defile {
	0%, 100% { opacity: .3; transform: scaleY(.5); transform-origin: top; }
	50%      { opacity: 1;  transform: scaleY(1);  transform-origin: top; }
}
@media (max-width: 640px) { .hero__defiler { display: none; } }

/* -------------------------------------------------
   9. Bandeau de reassurance
   ------------------------------------------------- */
.reassurance {
	background: var(--blanc);
	border-bottom: 1px solid var(--bordure-2);
}
.reassurance__grille {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: var(--bordure-2);
}
.reassurance__item {
	background: var(--blanc);
	padding: clamp(26px, 3vw, 40px) clamp(16px, 2vw, 28px);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}
.reassurance__item svg { width: 26px; height: 26px; stroke: var(--champagne-2); fill: none; stroke-width: 1.2; }
.reassurance__titre {
	font-size: .76rem;
	font-weight: 500;
	letter-spacing: .17em;
	text-transform: uppercase;
}
.reassurance__texte { font-size: .86rem; color: var(--gris); line-height: 1.6; }
@media (max-width: 900px) { .reassurance__grille { grid-template-columns: repeat(2, 1fr); } }

/* -------------------------------------------------
   10. Collections (grille de categories)
   ------------------------------------------------- */
.collections {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(14px, 1.6vw, 24px);
}
.collections--4 { grid-template-columns: repeat(4, 1fr); }

.collection {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--noir-2);
	aspect-ratio: 4 / 5;
	isolation: isolate;
}
.collection img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 1s cubic-bezier(.22,.61,.36,1), filter var(--t);
	filter: brightness(.86) saturate(.95);
}
.collection:hover img { transform: scale(1.07); filter: brightness(.72); }
.collection__voile {
	position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(13,13,15,.82) 0%, rgba(13,13,15,.15) 55%, transparent 100%);
}
.collection__texte {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: clamp(20px, 2.6vw, 34px);
	color: var(--creme);
}
.collection__nom {
	font-family: var(--serif);
	font-size: clamp(1.15rem, 1.9vw, 1.6rem);
	color: var(--blanc);
	margin-bottom: .3em;
	line-height: 1.15;
}
.collection__compte {
	font-size: .7rem;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--champagne);
	display: flex;
	align-items: center;
	gap: .6em;
}
.collection__compte .fleche { transition: transform var(--t); }
.collection:hover .collection__compte .fleche { transform: translateX(6px); }

/* Premiere carte en grand format */
.collections .collection--vedette { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
@media (max-width: 1024px) {
	.collections, .collections--4 { grid-template-columns: repeat(2, 1fr); }
	.collections .collection--vedette { grid-column: span 2; grid-row: auto; aspect-ratio: 16/10; }
}
@media (max-width: 560px) {
	.collections, .collections--4 { grid-template-columns: 1fr; }
	.collections .collection--vedette { grid-column: span 1; }
}

/* -------------------------------------------------
   11. Bloc editorial (image + texte)
   ------------------------------------------------- */
.editorial {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: clamp(36px, 6vw, 90px);
}
.editorial--inverse .editorial__media { order: 2; }
.editorial__media { position: relative; }
.editorial__media img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }

/* Cadre champagne decale derriere l'image */
.editorial__media::before {
	content: '';
	position: absolute;
	inset: 22px -22px -22px 22px;
	border: 1px solid var(--champagne);
	z-index: -1;
}
.editorial--inverse .editorial__media::before { inset: 22px 22px -22px -22px; }

.editorial__liste { list-style: none; margin: 2rem 0 2.4rem; padding: 0; display: grid; gap: 14px; }
.editorial__liste li {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	font-size: .95rem;
	line-height: 1.65;
}
.editorial__liste svg { width: 17px; height: 17px; flex: 0 0 17px; margin-top: 5px; stroke: var(--champagne-2); fill: none; stroke-width: 1.6; }

@media (max-width: 880px) {
	.editorial { grid-template-columns: 1fr; }
	.editorial--inverse .editorial__media { order: 0; }
	.editorial__media::before { display: none; }
}

/* -------------------------------------------------
   12. Chiffres cles
   ------------------------------------------------- */
.chiffres {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(24px, 3vw, 48px);
	text-align: center;
}
.chiffre__valeur {
	font-family: var(--serif);
	font-size: clamp(2.4rem, 4.4vw, 3.6rem);
	color: var(--champagne);
	line-height: 1;
	margin-bottom: .32em;
}
.chiffre__label {
	font-size: .72rem;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: rgba(250,247,242,.62);
}
@media (max-width: 700px) { .chiffres { grid-template-columns: repeat(2, 1fr); } }

/* -------------------------------------------------
   13. Section video
   ------------------------------------------------- */
.video-section {
	position: relative;
	min-height: clamp(420px, 62vh, 700px);
	display: grid;
	place-items: center;
	overflow: hidden;
	background: var(--noir);
	text-align: center;
	color: var(--creme);
	isolation: isolate;
}
.video-section__media { position: absolute; inset: 0; z-index: -2; }
.video-section__media video, .video-section__media img { width: 100%; height: 100%; object-fit: cover; }
.video-section__voile { position: absolute; inset: 0; z-index: -1; background: rgba(13,13,15,.6); }
.video-section__contenu { max-width: 680px; padding: clamp(56px, 8vw, 100px) var(--gouttiere); }
.video-section h2 { color: var(--blanc); }

.lecture {
	width: 80px; height: 80px;
	border-radius: 50%;
	border: 1px solid rgba(250,247,242,.5);
	display: grid;
	place-items: center;
	margin: 0 auto 28px;
	transition: background var(--t), border-color var(--t), transform var(--t);
}
.lecture svg { width: 22px; height: 22px; fill: var(--creme); margin-left: 4px; }
.lecture:hover { background: var(--champagne); border-color: var(--champagne); transform: scale(1.07); }
.lecture:hover svg { fill: var(--noir); }

/* -------------------------------------------------
   14. Avis clientes
   ------------------------------------------------- */
.avis-grille {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(18px, 2.4vw, 34px);
}
.avis {
	background: var(--blanc);
	border: 1px solid var(--bordure);
	padding: clamp(28px, 3.4vw, 44px);
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.avis__etoiles { display: flex; gap: 3px; }
.avis__etoiles svg { width: 15px; height: 15px; fill: var(--champagne); }
.avis__texte {
	font-family: var(--serif);
	font-size: clamp(1.02rem, 1.4vw, 1.18rem);
	font-style: italic;
	line-height: 1.65;
	color: var(--noir-2);
	flex: 1;
}
.avis__auteur { font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gris); }
.avis__auteur strong { color: var(--noir); font-weight: 500; }
@media (max-width: 900px) { .avis-grille { grid-template-columns: 1fr; } }

/* -------------------------------------------------
   15. Journal (articles de blog)
   ------------------------------------------------- */
.articles {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(20px, 2.6vw, 38px);
}
.article-carte { display: flex; flex-direction: column; gap: 18px; }
.article-carte__media { overflow: hidden; aspect-ratio: 3/2; background: var(--creme-2); }
.article-carte__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.22,.61,.36,1); }
.article-carte:hover .article-carte__media img { transform: scale(1.06); }
.article-carte__meta { font-size: .69rem; letter-spacing: .22em; text-transform: uppercase; color: var(--champagne-2); }
.article-carte__titre { font-family: var(--serif); font-size: clamp(1.15rem, 1.7vw, 1.45rem); line-height: 1.25; }
.article-carte:hover .article-carte__titre { color: var(--champagne-2); }
.article-carte__extrait { font-size: .92rem; color: var(--gris); line-height: 1.7; }
@media (max-width: 880px) { .articles { grid-template-columns: 1fr; } }

/* -------------------------------------------------
   16. Newsletter
   ------------------------------------------------- */
.newsletter { text-align: center; }
.newsletter__form {
	display: flex;
	gap: 10px;
	max-width: 520px;
	margin: 2.4rem auto 1.1rem;
	flex-wrap: wrap;
}
.newsletter__form input[type="email"] {
	flex: 1 1 260px;
	background: transparent;
	border: 1px solid rgba(250,247,242,.28);
	color: var(--creme);
	padding: 1.05em 1.3em;
	font-size: .88rem;
	letter-spacing: .05em;
}
.newsletter__form input::placeholder { color: rgba(250,247,242,.4); }
.newsletter__form input:focus { border-color: var(--champagne); outline: none; }
.newsletter__mention { font-size: .74rem; color: rgba(250,247,242,.45); }

/* -------------------------------------------------
   17. Pied de page
   ------------------------------------------------- */
.pied { background: var(--noir); color: rgba(250,247,242,.7); padding-top: clamp(56px, 7vw, 92px); }
.pied a:hover { color: var(--champagne); }

.pied__haut {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr;
	gap: clamp(28px, 4vw, 60px);
	padding-bottom: clamp(40px, 5vw, 64px);
}
.pied__marque .site-logo__text { color: var(--blanc); font-size: 1.5rem; }
.pied__baseline { margin-top: 18px; font-size: .9rem; line-height: 1.75; max-width: 34ch; }
.pied__titre {
	font-size: .72rem;
	font-weight: 500;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--blanc);
	margin-bottom: 1.5em;
}
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.pied ul a { font-size: .88rem; }

.pied__contact { display: grid; gap: 10px; font-size: .88rem; margin-top: 22px; }
.pied__contact a { display: inline-flex; align-items: center; gap: .6em; }
.pied__contact svg { width: 15px; height: 15px; stroke: var(--champagne); fill: none; stroke-width: 1.4; }

.reseaux { display: flex; gap: 14px; margin-top: 26px; }
.reseaux a {
	width: 38px; height: 38px;
	border: 1px solid rgba(250,247,242,.2);
	display: grid; place-items: center;
	transition: border-color var(--t), background var(--t);
}
.reseaux a:hover { border-color: var(--champagne); background: rgba(198,168,124,.12); }
.reseaux svg { width: 16px; height: 16px; fill: currentColor; }

.pied__bas {
	border-top: 1px solid rgba(250,247,242,.13);
	padding-block: 26px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 22px;
	flex-wrap: wrap;
	font-size: .78rem;
}
.pied__legal { display: flex; gap: 22px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.paiements { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.paiements span {
	border: 1px solid rgba(250,247,242,.2);
	padding: 5px 11px;
	font-size: .66rem;
	letter-spacing: .14em;
	text-transform: uppercase;
}
@media (max-width: 900px) { .pied__haut { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pied__haut { grid-template-columns: 1fr; } }

/* -------------------------------------------------
   18. Pages de contenu simples
   ------------------------------------------------- */
.entete-page {
	background: var(--noir);
	color: var(--creme);
	padding-block: clamp(60px, 8vw, 110px);
	text-align: center;
}
.entete-page h1 { color: var(--blanc); margin-bottom: 0; }
.entete-page .chapo { color: rgba(250,247,242,.7); margin: 1.2rem auto 0; }

.fil { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gris-2); margin-bottom: 1.4em; }
.fil a:hover { color: var(--champagne-2); }
.entete-page .fil { color: rgba(250,247,242,.5); }

.contenu { font-size: 1.02rem; line-height: 1.85; }
.contenu h2 { margin-top: 2em; }
.contenu h3 { margin-top: 1.7em; }
.contenu ul, .contenu ol { padding-left: 1.3em; margin-bottom: 1.3em; }
.contenu li { margin-bottom: .5em; }
.contenu a { color: var(--champagne-2); border-bottom: 1px solid var(--bordure); }
.contenu a:hover { border-color: var(--champagne-2); }
.contenu img { margin: 2em 0; }
.contenu blockquote {
	margin: 2em 0;
	padding: 1.4em 0 1.4em 2em;
	border-left: 2px solid var(--champagne);
	font-family: var(--serif);
	font-size: 1.24rem;
	font-style: italic;
	line-height: 1.6;
}
.contenu table { width: 100%; border-collapse: collapse; margin: 2em 0; font-size: .93rem; }
.contenu th, .contenu td { border: 1px solid var(--bordure-2); padding: 12px 16px; text-align: left; }
.contenu th { background: var(--creme-2); font-weight: 500; letter-spacing: .06em; }

/* FAQ en accordeon */
.faq { display: grid; gap: 0; border-top: 1px solid var(--bordure-2); }
.faq__item { border-bottom: 1px solid var(--bordure-2); }
.faq__q {
	width: 100%;
	text-align: left;
	padding: 1.5em 2.6em 1.5em 0;
	font-family: var(--serif);
	font-size: clamp(1.02rem, 1.5vw, 1.22rem);
	position: relative;
	transition: color var(--t);
}
.faq__q:hover { color: var(--champagne-2); }
.faq__q::after {
	content: '+';
	position: absolute;
	right: 0; top: 50%;
	transform: translateY(-50%);
	font-family: var(--sans);
	font-size: 1.4rem;
	font-weight: 300;
	color: var(--champagne-2);
	transition: transform var(--t);
}
.faq__item.is-ouvert .faq__q::after { transform: translateY(-50%) rotate(45deg); }
.faq__r { max-height: 0; overflow: hidden; transition: max-height .5s cubic-bezier(.22,.61,.36,1); }
.faq__r > div { padding-bottom: 1.8em; color: var(--gris); max-width: 72ch; }

/* Formulaire de contact */
.form-contact { display: grid; gap: 18px; }
.form-ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-champ { display: grid; gap: 8px; }
.form-champ label { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gris); }
.form-champ input, .form-champ textarea, .form-champ select {
	background: var(--blanc);
	border: 1px solid var(--bordure-2);
	padding: .95em 1.1em;
	font-size: .95rem;
	transition: border-color var(--t);
	width: 100%;
}
.form-champ input:focus, .form-champ textarea:focus, .form-champ select:focus { border-color: var(--champagne); outline: none; }
.form-champ textarea { min-height: 165px; resize: vertical; }
@media (max-width: 640px) { .form-ligne { grid-template-columns: 1fr; } }

.encart {
	background: var(--creme-2);
	border-left: 2px solid var(--champagne);
	padding: clamp(22px, 3vw, 34px);
	margin: 2em 0;
	font-size: .95rem;
}
.encart strong { display: block; margin-bottom: .5em; font-weight: 500; }

/* 404 */
.page-404 { text-align: center; padding-block: clamp(90px, 14vw, 180px); }
.page-404__code { font-family: var(--serif); font-size: clamp(6rem, 18vw, 13rem); line-height: .85; color: var(--champagne-3); }

/* Pagination */
.pagination { display: flex; justify-content: center; gap: 8px; margin-top: clamp(44px, 6vw, 70px); flex-wrap: wrap; }
.pagination .page-numbers {
	min-width: 44px; height: 44px;
	display: grid; place-items: center;
	padding: 0 12px;
	border: 1px solid var(--bordure-2);
	font-size: .84rem;
	transition: border-color var(--t), background var(--t), color var(--t);
}
.pagination .page-numbers:hover { border-color: var(--champagne); }
.pagination .page-numbers.current { background: var(--noir); color: var(--creme); border-color: var(--noir); }

/* -------------------------------------------------
   19. Animations d'apparition au defilement
   ------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s ease, transform .9s cubic-bezier(.22,.61,.36,1); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal--d1 { transition-delay: .1s; }
.reveal--d2 { transition-delay: .2s; }
.reveal--d3 { transition-delay: .3s; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
	.reveal { opacity: 1; transform: none; }
}

/* -------------------------------------------------
   20. Utilitaires
   ------------------------------------------------- */
.centre { text-align: center; }
.mt-0 { margin-top: 0; }
.sr-only {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.skip-link {
	position: absolute;
	left: -9999px;
	z-index: 999;
	padding: 1em 1.5em;
	background: var(--noir);
	color: var(--creme);
}
.skip-link:focus { left: 12px; top: 12px; }

/* -------------------------------------------------
   21. Hero : lent zoom sur l'image de fond
   Donne du mouvement sans le poids d'une video.
   ------------------------------------------------- */
.hero__media img { animation: heroZoom 22s ease-in-out infinite alternate; will-change: transform; }
@keyframes heroZoom {
	from { transform: scale(1); }
	to   { transform: scale(1.09); }
}
@media (prefers-reduced-motion: reduce) {
	.hero__media img { animation: none; }
}

/* Repli visuel des cartes collection sans image */
.collection { background: linear-gradient(140deg, var(--noir-2), var(--noir-3)); }

/* -------------------------------------------------
   22. Comparateur avant / apres
   ------------------------------------------------- */
.ba { margin: 0; display: flex; flex-direction: column; gap: 18px; }

.ba__media {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--noir-2);
	cursor: ew-resize;
	user-select: none;
	touch-action: pan-y;
	isolation: isolate;
}

.ba__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 18%;
	pointer-events: none;
}
/* L'image "avant" est rognee jusqu'a la position du curseur. */
.ba__img--avant { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }

.ba__tag {
	position: absolute;
	top: 16px;
	z-index: 3;
	font-size: .6rem;
	font-weight: 500;
	letter-spacing: .22em;
	text-transform: uppercase;
	padding: .5em 1em;
	line-height: 1;
	pointer-events: none;
	backdrop-filter: blur(4px);
}
.ba__tag--avant { left: 16px; background: rgba(13,13,15,.82); color: var(--creme); }
.ba__tag--apres { right: 16px; background: var(--champagne); color: var(--noir); }

.ba__poignee {
	position: absolute;
	top: 0; bottom: 0;
	left: var(--pos);
	width: 2px;
	margin-left: -1px;
	background: var(--creme);
	z-index: 4;
	pointer-events: none;
	box-shadow: 0 0 18px rgba(13,13,15,.45);
}
.ba__poignee-rond {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 52px; height: 52px;
	border-radius: 50%;
	background: var(--creme);
	color: var(--noir);
	display: grid;
	place-items: center;
	box-shadow: 0 8px 26px -8px rgba(13,13,15,.6);
}
.ba__poignee-rond svg { width: 24px; height: 12px; }

/* Le champ natif reste accessible au clavier, mais invisible. */
.ba__curseur {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: ew-resize;
	z-index: 5;
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
}
.ba__curseur::-webkit-slider-thumb { -webkit-appearance: none; width: 54px; height: 100%; }
.ba__curseur::-moz-range-thumb { width: 54px; height: 100%; border: 0; background: transparent; }
.ba__curseur:focus-visible + .ba__poignee .ba__poignee-rond,
.ba__media:focus-within .ba__poignee-rond { outline: 2px solid var(--champagne-2); outline-offset: 3px; }

.ba__legende { display: flex; flex-direction: column; gap: 8px; }
.ba__titre {
	font-family: var(--serif);
	font-size: clamp(1.1rem, 1.6vw, 1.35rem);
	line-height: 1.25;
}
.ba__texte { font-size: .92rem; color: var(--gris); line-height: 1.65; }
.ba__legende .lien-souligne { align-self: flex-start; margin-top: 6px; }
.section--noir .ba__texte { color: rgba(250,247,242,.66); }
.section--noir .ba__titre { color: var(--blanc); }

.ba-grille {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(18px, 2.4vw, 34px);
}
@media (max-width: 900px) { .ba-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ba-grille { grid-template-columns: 1fr; } }

.ba-mention {
	margin-top: clamp(26px, 3vw, 40px);
	font-size: .78rem;
	color: var(--gris-2);
	text-align: center;
	letter-spacing: .02em;
}
.section--noir .ba-mention { color: rgba(250,247,242,.42); }

/* -------------------------------------------------
   23. Bandeau video sur les pages collection
   ------------------------------------------------- */
.cat-video {
	position: relative;
	height: clamp(280px, 42vh, 460px);
	overflow: hidden;
	background: var(--noir);
	isolation: isolate;
}
.cat-video video, .cat-video img {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: center 32%;
	z-index: -2;
}
.cat-video__voile {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to top, rgba(13,13,15,.9) 0%, rgba(13,13,15,.35) 55%, rgba(13,13,15,.55) 100%);
}
.cat-video__texte {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: clamp(24px, 4vw, 52px) var(--gouttiere);
	color: var(--creme);
	max-width: var(--max);
	margin-inline: auto;
}
.cat-video__texte p { max-width: 56ch; color: rgba(250,247,242,.8); font-size: clamp(.94rem, 1.3vw, 1.06rem); margin: 0; }
.cat-video__texte .surtitre { margin-bottom: .8em; }

/* -------------------------------------------------
   24. Tableau comparatif naturel / synthetique
   ------------------------------------------------- */
.comparo {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	background: var(--bordure);
	border: 1px solid var(--bordure);
	margin: 2.2rem 0 2.4rem;
}
.comparo__col {
	background: var(--creme);
	padding: clamp(20px, 2.4vw, 28px);
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.section--creme .comparo__col { background: var(--blanc); }
.comparo__titre {
	font-family: var(--serif);
	font-size: 1.08rem;
	line-height: 1.25;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--bordure-2);
}
.comparo__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; flex: 1; }
.comparo__col li {
	position: relative;
	padding-left: 20px;
	font-size: .89rem;
	line-height: 1.55;
	color: var(--gris);
}
.comparo__col li::before {
	content: '';
	position: absolute;
	left: 0; top: .62em;
	width: 9px; height: 1px;
	background: var(--champagne);
}
.comparo__prix {
	font-size: .72rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--champagne-2);
	padding-top: 12px;
	border-top: 1px solid var(--bordure-2);
}
@media (max-width: 520px) { .comparo { grid-template-columns: 1fr; } }

/* -------------------------------------------------
   25. Illustrations dans le corps des articles
   ------------------------------------------------- */
.art-fig { margin: 2.6em 0; }
.art-fig img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	object-position: center 25%;
}
.art-fig figcaption {
	margin-top: 12px;
	font-size: .8rem;
	color: var(--gris-2);
	line-height: 1.55;
	padding-left: 14px;
	border-left: 1px solid var(--champagne);
}
/* Une illustration qui suit immediatement un titre doit respirer au-dessus */
.contenu .art-fig + h2 { margin-top: 1.6em; }

/* ===================================================================
   26. HERO EN DEUX VOLETS  (remplace l'ancien hero plein ecran)
   Panneau noir a gauche pour le texte, photographie a droite.
   Contraste garanti, photo respectee, pas de texte illisible.
   =================================================================== */
.hero {
	display: grid;
	grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
	/* align-items explicite : l'ancienne version du hero imposait "center",
	   ce qui laissait le volet photo s'effondrer a zero de hauteur puisque
	   son image est en position absolue (donc hors du flux). */
	align-items: stretch;
	align-content: stretch;
	min-height: min(88vh, 860px);
	background: var(--noir);
	color: var(--creme);
	overflow: hidden;
	position: relative;
	isolation: isolate;
}
.hero > * { min-height: 100%; }

/* ---- Volet texte ---- */
.hero__panneau {
	display: flex;
	align-items: center;
	padding: clamp(48px, 6vw, 92px) clamp(24px, 5vw, 84px);
	position: relative;
	background:
		radial-gradient(120% 90% at 0% 0%, rgba(198,168,124,.10) 0%, transparent 58%),
		var(--noir);
}
/* Filet champagne qui separe les deux volets */
.hero__panneau::after {
	content: '';
	position: absolute;
	top: 0; bottom: 0; right: 0;
	width: 1px;
	background: linear-gradient(to bottom, transparent, var(--champagne), transparent);
	opacity: .55;
}
.hero__inner { width: 100%; max-width: 560px; margin-left: auto; }

.hero__note {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 2.2em;
	font-size: .76rem;
	letter-spacing: .08em;
	color: rgba(250,247,242,.62);
}
.hero__etoiles { display: inline-flex; gap: 2px; }
.hero__etoiles svg { width: 13px; height: 13px; fill: var(--champagne); }

.hero h1 {
	font-size: clamp(2.5rem, 4.2vw, 4.15rem);
	line-height: 1.04;
	letter-spacing: -.022em;
	color: var(--blanc);
	margin: 0 0 .5em;
}
.hero h1 em { font-style: italic; color: var(--champagne); }

.hero__chapo {
	font-size: clamp(.98rem, 1.15vw, 1.1rem);
	line-height: 1.82;
	color: rgba(250,247,242,.72);
	max-width: 46ch;
	margin: 0 0 2.4em;
}

.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }

.hero__points {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(14px, 2vw, 26px);
	margin: clamp(34px, 4.2vw, 54px) 0 0;
	padding: clamp(24px, 3vw, 32px) 0 0;
	border-top: 1px solid rgba(250,247,242,.14);
}
.hero__points li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: .78rem;
	line-height: 1.45;
	color: rgba(250,247,242,.7);
	letter-spacing: .015em;
}
.hero__points svg {
	width: 17px; height: 17px;
	flex: 0 0 17px;
	margin-top: 2px;
	stroke: var(--champagne);
	fill: none;
	stroke-width: 1.2;
}

/* ---- Volet photographie ---- */
.hero__visuel { position: relative; overflow: hidden; background: var(--noir-2); }
.hero__visuel img {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: center 26%;
	animation: heroZoom 26s ease-in-out infinite alternate;
	will-change: transform;
}
/* Fondu vers le panneau : la couture entre les deux volets disparait */
.hero__grain {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to right, rgba(13,13,15,.72) 0%, rgba(13,13,15,.12) 26%, transparent 52%),
		linear-gradient(to top, rgba(13,13,15,.55) 0%, transparent 42%);
	pointer-events: none;
}

/* Pastille produit posee sur la photo */
.hero__pastille {
	position: absolute;
	right: clamp(18px, 2.4vw, 34px);
	bottom: clamp(18px, 2.4vw, 34px);
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 14px;
	max-width: min(340px, calc(100% - 36px));
	padding: 12px 16px 12px 12px;
	background: rgba(250, 247, 242, .95);
	backdrop-filter: blur(10px);
	color: var(--noir);
	box-shadow: 0 22px 50px -24px rgba(13,13,15,.85);
	transition: transform var(--t), background var(--t);
}
.hero__pastille:hover { transform: translateY(-3px); background: var(--blanc); }
.hero__pastille-img { flex: 0 0 56px; width: 56px; height: 70px; overflow: hidden; background: var(--creme-2); }
.hero__pastille-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__pastille-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hero__pastille-eyebrow {
	font-size: .58rem;
	font-weight: 500;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--champagne-2);
}
.hero__pastille-nom {
	font-family: var(--serif);
	font-size: .94rem;
	line-height: 1.25;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.hero__pastille-prix { font-size: .84rem; font-weight: 500; }
.hero__pastille-prix .price { font-size: inherit; }
.hero__pastille-fleche { margin-left: auto; color: var(--champagne-2); transition: transform var(--t); }
.hero__pastille:hover .hero__pastille-fleche { transform: translateX(4px); }

/* ---- Tablette : la photo passe en bandeau au-dessus ---- */
@media (max-width: 900px) {
	.hero { grid-template-columns: 1fr; min-height: 0; }
	.hero__visuel { order: -1; aspect-ratio: 16 / 11; }
	.hero__visuel img { position: absolute; }
	.hero__grain { background: linear-gradient(to bottom, rgba(13,13,15,.25) 0%, transparent 40%, rgba(13,13,15,.55) 100%); }
	.hero__panneau { padding: clamp(36px, 7vw, 56px) var(--gouttiere); }
	.hero__panneau::after { display: none; }
	.hero__inner { margin-inline: auto; max-width: 640px; }
}

@media (max-width: 560px) {
	.hero__visuel { aspect-ratio: 4 / 5; }
	.hero__points { grid-template-columns: 1fr; gap: 12px; }
	.hero__points li { align-items: center; }
	.hero__points span br { display: none; }
	.hero__actions .btn { width: 100%; }
	.hero__pastille { left: 14px; right: 14px; bottom: 14px; max-width: none; }
}

/* Les anciennes regles du hero plein ecran ne s'appliquent plus. */
.hero__voile, .hero__defiler, .hero__media { display: none; }

/* -------------------------------------------------
   27. Hero — ajustements
   L'image est desormais au format portrait : elle remplit
   le volet vertical sans rogner le visage.
   La pastille produit a ete retiree (illisible en petit,
   et le visuel produit sur fond blanc jurait avec la photo).
   ------------------------------------------------- */
.hero__visuel img { object-position: center 46%; }
.hero__pastille { display: none !important; }

@media (max-width: 900px) {
	.hero__visuel { aspect-ratio: 4 / 3; }
	.hero__visuel img { object-position: center 44%; }
}
@media (max-width: 560px) {
	.hero__visuel { aspect-ratio: 1 / 1; }
}

/* Photo de hero deja sombre : on allege le fondu pour ne pas
   noyer la chevelure, tout en gardant la couture invisible. */
.hero__grain {
	background:
		linear-gradient(to right, rgba(13,13,15,.55) 0%, rgba(13,13,15,.06) 22%, transparent 44%),
		linear-gradient(to top, rgba(13,13,15,.32) 0%, transparent 38%);
}
@media (max-width: 900px) {
	.hero__grain { background: linear-gradient(to bottom, rgba(13,13,15,.18) 0%, transparent 42%, rgba(13,13,15,.45) 100%); }
}

/* -------------------------------------------------
   28. Encart code de réduction (page Accompagnement)
   ------------------------------------------------- */
.encart-code {
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: center;
	text-align: center;
	background: var(--noir);
	color: var(--creme);
	padding: clamp(28px, 4vw, 44px) clamp(20px, 3vw, 36px);
	margin: 2.4em 0;
	position: relative;
}
.encart-code::after {
	content: '';
	position: absolute;
	inset: 8px;
	border: 1px solid rgba(198,168,124,.35);
	pointer-events: none;
}
.encart-code__label {
	font-size: .68rem;
	font-weight: 500;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--champagne);
}
.encart-code__code {
	font-family: var(--serif);
	font-size: clamp(1.7rem, 4vw, 2.5rem);
	letter-spacing: .06em;
	color: var(--blanc);
	line-height: 1.1;
	user-select: all;
}
.encart-code__detail {
	font-size: .82rem;
	color: rgba(250,247,242,.6);
	line-height: 1.65;
	max-width: 46ch;
}

/* Bandeau d'accès depuis la page d'accueil */
.accompagnement {
	background: var(--creme-2);
	border-top: 1px solid var(--bordure);
	border-bottom: 1px solid var(--bordure);
}
.accompagnement__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(20px, 3vw, 46px);
	padding-block: clamp(30px, 4vw, 46px);
	flex-wrap: wrap;
}
.accompagnement__texte { max-width: 62ch; }
.accompagnement__titre {
	font-family: var(--serif);
	font-size: clamp(1.2rem, 2vw, 1.55rem);
	line-height: 1.25;
	margin: 0 0 .5em;
}
.accompagnement__texte p { font-size: .93rem; color: var(--gris); line-height: 1.7; margin: 0; }
.accompagnement__texte strong { color: var(--noir); font-weight: 500; }
@media (max-width: 700px) {
	.accompagnement__inner { flex-direction: column; align-items: flex-start; }
	.accompagnement .btn { width: 100%; }
}

/* -------------------------------------------------
   29. En-tête — correctif de compression
   Avec « 1fr auto 1fr », la colonne 1fr ne descend jamais
   sous la largeur de son contenu : une navigation un peu
   longue pousse alors tout l'en-tête hors de l'écran.
   minmax(0, 1fr) autorise la compression.
   ------------------------------------------------- */
.entete__barre {
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}
.nav-principale { min-width: 0; }
.nav-principale ul { flex-wrap: nowrap; }
.entete__outils { min-width: 0; }

/* Entre 1024 et 1400 px, on resserre plutôt que de déborder */
@media (min-width: 1025px) and (max-width: 1400px) {
	.nav-principale ul { gap: 15px; }
	.nav-principale a { font-size: .7rem; letter-spacing: .1em; }
	.site-logo__text { font-size: clamp(1.05rem, 1.7vw, 1.45rem); letter-spacing: .07em; }
	.entete__outils { gap: 10px; }
	.icone-btn { padding: 6px; }
}
@media (min-width: 1025px) and (max-width: 1240px) {
	.icone-btn__label { display: none; }
}

/* -------------------------------------------------
   30. En-tête — logo à gauche
   Le logo centré n'est tenable qu'avec une navigation courte.
   Dès que le menu s'enrichit, il passe SOUS le logo et les textes
   se superposent. Le logo à gauche accepte n'importe quel menu.
   ------------------------------------------------- */
@media (min-width: 1301px) {
	.entete__barre {
		grid-template-columns: auto minmax(0, 1fr) auto;
		gap: clamp(20px, 3vw, 48px);
	}
	.site-logo       { grid-column: 1; justify-self: start; }
	.nav-principale  { grid-column: 2; justify-self: center; min-width: 0; }
	.entete__outils  { grid-column: 3; justify-self: end; }
	.burger          { display: none; }

	.nav-principale ul { flex-wrap: nowrap; gap: clamp(12px, 1.4vw, 26px); }
	.nav-principale a  { font-size: .7rem; letter-spacing: .09em; white-space: nowrap; }
	.site-logo__text   { font-size: clamp(1.15rem, 1.6vw, 1.6rem); letter-spacing: .08em; }
}

/* En dessous, le menu déroulant plein écran prend le relais :
   plus lisible qu'une navigation comprimée à l'extrême. */
@media (max-width: 1300px) {
	.entete__barre { grid-template-columns: auto 1fr auto; }
	.nav-principale { display: none; }
	.burger { display: block; grid-column: 1; justify-self: start; }
	.site-logo { grid-column: 2; justify-self: center; }
	.entete__outils { grid-column: 3; justify-self: end; }
}

/* -------------------------------------------------
   31. En-tête — largeur et seuil du menu déroulant
   Le contenu de l'en-tête (logo + 7 entrées + outils) réclame
   davantage que les 1320 px du reste du site. On l'autorise à
   s'étendre, et on bascule sur le menu déroulant plus tôt.
   ------------------------------------------------- */
.entete__barre {
	max-width: min(1720px, 100%);
}

@media (min-width: 1401px) {
	.entete__barre {
		grid-template-columns: auto minmax(0, 1fr) auto;
		gap: clamp(18px, 2vw, 40px);
	}
	.site-logo      { grid-column: 1; justify-self: start; }
	.nav-principale { grid-column: 2; justify-self: center; min-width: 0; overflow: hidden; display: block; }
	.entete__outils { grid-column: 3; justify-self: end; }
	.burger         { display: none; }

	.nav-principale ul { flex-wrap: nowrap; gap: clamp(10px, 1.1vw, 22px); justify-content: center; }
	.nav-principale a  { font-size: .66rem; letter-spacing: .07em; white-space: nowrap; }
	.site-logo__text   { font-size: clamp(1.1rem, 1.4vw, 1.5rem); letter-spacing: .07em; }
}

/* En dessous de 1400 px, menu déroulant : plus lisible qu'une
   navigation comprimée jusqu'à l'illisible. */
@media (max-width: 1400px) {
	.entete__barre { grid-template-columns: auto 1fr auto; }
	.nav-principale { display: none; }
	.burger { display: block; grid-column: 1; justify-self: start; }
	.site-logo { grid-column: 2; justify-self: center; }
	.entete__outils { grid-column: 3; justify-self: end; }
}

/* -------------------------------------------------
   32. En-tête — tout sur une seule ligne
   Piège de CSS Grid : le logo (colonne 1) apparaît APRÈS la
   navigation (colonne 2) dans le HTML. Sans grid-row explicite,
   le navigateur renvoie le logo à la ligne suivante.
   ------------------------------------------------- */
@media (min-width: 1401px) {
	.entete__barre    { grid-template-rows: auto; align-items: center; min-height: 88px; }
	.site-logo        { grid-row: 1; grid-column: 1; }
	.nav-principale   { grid-row: 1; grid-column: 2; }
	.entete__outils   { grid-row: 1; grid-column: 3; }
}
@media (max-width: 1400px) {
	.entete__barre { grid-template-rows: auto; align-items: center; }
	.burger        { grid-row: 1; grid-column: 1; }
	.site-logo     { grid-row: 1; grid-column: 2; }
	.entete__outils{ grid-row: 1; grid-column: 3; }
}

/* -------------------------------------------------
   33. En-tête — finitions
   ------------------------------------------------- */
.entete {
	background: rgba(250, 247, 242, .94);
	border-bottom: 1px solid var(--bordure-2);
}
.entete.is-collee {
	background: rgba(250, 247, 242, .985);
	box-shadow: 0 8px 30px -22px rgba(13, 13, 15, .55);
}

.site-logo__text {
	font-weight: 500;
	white-space: nowrap;
	transition: opacity var(--t);
}
.site-logo:hover .site-logo__text { opacity: .72; }

.nav-principale > ul > li > a {
	padding-block: 10px;
	color: var(--noir);
	opacity: .82;
	transition: opacity var(--t), color var(--t);
}
.nav-principale > ul > li > a:hover,
.nav-principale .current-menu-item > a,
.nav-principale .current_page_item > a { opacity: 1; }

/* Le soulignement part du centre : plus soigné que du bord */
.nav-principale > ul > li > a::after {
	left: 50%;
	right: auto;
	width: 0;
	transform: none;
	transition: width var(--t), left var(--t);
}
.nav-principale > ul > li > a:hover::after,
.nav-principale .current-menu-item > a::after,
.nav-principale .current_page_item > a::after { left: 0; width: 100%; }

.entete__outils { align-items: center; }
.icone-btn { color: var(--noir); opacity: .82; }
.icone-btn:hover { opacity: 1; color: var(--champagne-2); }
.icone-btn__label { font-size: .68rem; letter-spacing: .16em; }

.pastille {
	top: -2px; right: -4px;
	box-shadow: 0 0 0 2px var(--creme);
}

/* -------------------------------------------------
   34. En-tête — version allégée
   Les libellés ayant été raccourcis, la navigation tient
   désormais bien plus bas en largeur : on redescend le seuil
   du menu déroulant de 1400 à 1100 px.
   ------------------------------------------------- */
@media (min-width: 1181px) {
	.entete__barre {
		grid-template-columns: auto minmax(0, 1fr) auto;
		gap: clamp(20px, 2.4vw, 46px);
		align-items: center;
		min-height: 82px;
	}
	.site-logo      { grid-row: 1; grid-column: 1; justify-self: start; }
	.nav-principale { grid-row: 1; grid-column: 2; justify-self: center; display: block; min-width: 0; }
	.entete__outils { grid-row: 1; grid-column: 3; justify-self: end; }
	.burger         { display: none; }

	.nav-principale ul { flex-wrap: nowrap; gap: clamp(14px, 1.5vw, 30px); justify-content: center; }
	.nav-principale a  { font-size: .69rem; letter-spacing: .13em; white-space: nowrap; }
	.site-logo__text   { font-size: clamp(1.15rem, 1.5vw, 1.5rem); letter-spacing: .1em; }
}
@media (max-width: 1180px) {
	.entete__barre  { grid-template-columns: auto 1fr auto; align-items: center; }
	.nav-principale { display: none; }
	.burger         { display: block; grid-row: 1; grid-column: 1; justify-self: start; }
	.site-logo      { grid-row: 1; grid-column: 2; justify-self: center; }
	.entete__outils { grid-row: 1; grid-column: 3; justify-self: end; }
}

/* Bandeau d'annonce plus discret */
.annonce {
	font-size: .68rem;
	letter-spacing: .16em;
	padding: 9px var(--gouttiere);
	background: var(--noir);
}
.annonce__piste { gap: 2.2em; }
.annonce__item { opacity: .85; }

/* Puce du hero (remplace les étoiles inventées) */
.hero__puce {
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--champagne);
	flex: 0 0 6px;
	box-shadow: 0 0 0 3px rgba(198,168,124,.2);
}
.hero__note { gap: 10px; }

/* Cartes de collection : le dégradé ne doit pas noyer la photo */
.collection img { filter: brightness(.92) saturate(1); }
.collection:hover img { filter: brightness(.78); }
.collection__voile {
	background: linear-gradient(to top, rgba(13,13,15,.88) 0%, rgba(13,13,15,.18) 52%, rgba(13,13,15,.05) 100%);
}

/* ===================================================================
   35. TROIS FAÇONS  (remplace l'ancien avant/après)
   ------------------------------------------------------------------
   Trois cartes verticales sur fond noir. La photo garde un ratio fixe
   (aspect-ratio) : sans cela la hauteur dépend du poids de l'image
   décodée et la grille sursaute au chargement.
   ------------------------------------------------- */
.facons {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(20px, 2.6vw, 40px);
}

.facon {
	display: flex;
	flex-direction: column;
	background: var(--noir-2);
	border: 1px solid rgba(198,168,124,.16);
	border-radius: 3px;
	overflow: hidden;
	transition: border-color var(--t), transform var(--t);
}
.facon:hover { border-color: rgba(198,168,124,.42); transform: translateY(-4px); }

.facon__media {
	position: relative;
	display: block;
	aspect-ratio: 9 / 11;
	overflow: hidden;
	background: var(--noir-3);
}
.facon__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 1.1s cubic-bezier(.22,.61,.36,1);
}
.facon:hover .facon__media img { transform: scale(1.05); }

/* Pastille de durée : le seul chiffre de la carte, il doit ressortir. */
.facon__duree {
	position: absolute;
	left: 14px; bottom: 14px;
	padding: 7px 14px;
	background: rgba(13,13,15,.72);
	backdrop-filter: blur(6px);
	color: var(--champagne-3);
	font-family: var(--sans);
	font-size: .72rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	border: 1px solid rgba(198,168,124,.3);
	border-radius: 2px;
}

.facon__corps {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: clamp(22px, 2.4vw, 34px);
}

.facon__num {
	display: block;
	font-family: var(--serif);
	font-size: .95rem;
	color: var(--champagne);
	letter-spacing: .18em;
	margin-bottom: 12px;
}

.facon h3 {
	font-family: var(--serif);
	font-size: clamp(1.28rem, 1.7vw, 1.62rem);
	line-height: 1.22;
	margin: 0 0 14px;
}
.facon h3 a { color: var(--creme); text-decoration: none; }
.facon h3 a:hover { color: var(--champagne-3); }

.facon p {
	color: var(--gris-2);
	font-size: .95rem;
	line-height: 1.72;
	margin: 0 0 22px;
}

/* Poussé en bas pour que les trois liens s'alignent malgré des textes
   de longueurs différentes. */
.lien-fleche {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: var(--champagne);
	font-family: var(--sans);
	font-size: .78rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	text-decoration: none;
}
.lien-fleche svg {
	width: 22px; height: 10px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.2;
	transition: transform var(--t);
}
.lien-fleche:hover { color: var(--champagne-3); }
.lien-fleche:hover svg { transform: translateX(6px); }

@media (max-width: 900px) {
	.facons { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
	.facon__media { aspect-ratio: 4 / 3; }
}

/* ===================================================================
   36. COLLECTIONS — grille régulière
   ------------------------------------------------------------------
   Remplace la mosaïque « une tuile géante + des petites » : dès que le
   nombre de collections ne tombait pas juste, elle laissait un trou en
   bas à droite. Six cartes strictement identiques, trois par ligne.
   Le média est isolé dans un span pour que le voile et le texte ne
   subissent pas le zoom au survol.
   ------------------------------------------------- */
.collections { grid-template-columns: repeat(3, 1fr); }
.collections .collection--vedette { grid-column: auto; grid-row: auto; }

.collection {
	aspect-ratio: 4 / 5;
	border: 1px solid transparent;
	transition: border-color var(--t), transform var(--t);
}
.collection:hover { border-color: rgba(198,168,124,.45); transform: translateY(-3px); }

.collection__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
	display: block;
}
.collection__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
}

/* Voile plus dense en bas : ces photos sont claires (fonds blancs de
   studio) et le texte crème s'y perdait complètement. */
.collection__voile {
	background: linear-gradient(to top,
		rgba(13,13,15,.90) 0%,
		rgba(13,13,15,.55) 30%,
		rgba(13,13,15,.10) 62%,
		rgba(13,13,15,0) 100%);
}

.collection__texte { z-index: 2; }

.collection__accroche {
	display: block;
	font-family: var(--sans);
	font-size: .66rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--champagne);
	margin-bottom: .7em;
}
.collection__nom { display: block; }

@media (max-width: 1024px) {
	.collections { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.collections { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
	.collection  { aspect-ratio: 3 / 2; }
}

/* ===================================================================
   37. ACCOMPAGNEMENT CANCER
   ------------------------------------------------------------------
   Deux formats du même engagement. La version « ligne » doit être
   lisible sans jamais devenir un bandeau publicitaire : le sujet ne
   supporte ni gros caractères ni couleur criarde.
   ------------------------------------------------- */

/* Le code promo, partout où il apparaît : sélectionnable d'un double-clic. */
.accompagnement code,
.accompagnement-ligne code {
	font-family: var(--sans);
	font-size: .92em;
	font-weight: 500;
	letter-spacing: .08em;
	background: rgba(198,168,124,.22);
	border: 1px solid rgba(198,168,124,.5);
	border-radius: 2px;
	padding: .12em .5em;
	color: var(--noir);
	white-space: nowrap;
	user-select: all;
}

.accompagnement-ligne {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: clamp(26px, 3vw, 40px) 0;
	padding: 16px 20px;
	background: rgba(198,168,124,.09);
	border-left: 2px solid var(--champagne);
	font-size: .87rem;
	line-height: 1.65;
	color: var(--gris);
}
.accompagnement-ligne strong { color: var(--noir); font-weight: 500; }
.accompagnement-ligne a {
	color: var(--champagne-2);
	border-bottom: 1px solid rgba(198,168,124,.5);
	white-space: nowrap;
}
.accompagnement-ligne a:hover { color: var(--noir); border-bottom-color: var(--noir); }

.accompagnement-ligne__pastille {
	flex: 0 0 auto;
	width: 7px; height: 7px;
	margin-top: .55em;
	border-radius: 50%;
	background: var(--champagne);
}

/* Dans le pied de page, fond sombre : on inverse les valeurs. */
.pied .accompagnement-ligne {
	background: rgba(198,168,124,.10);
	color: var(--gris-2);
	margin: 0 0 30px;
}
.pied .accompagnement-ligne strong { color: var(--creme); }
.pied .accompagnement-ligne code { color: var(--creme); background: rgba(198,168,124,.2); }
.pied .accompagnement-ligne a { color: var(--champagne-3); }
.pied .accompagnement-ligne a:hover { color: var(--blanc); border-bottom-color: var(--blanc); }

@media (max-width: 600px) {
	.accompagnement-ligne { flex-direction: row; padding: 14px 16px; font-size: .84rem; }
}

/* ===================================================================
   38. COLLECTIONS — cadrage des visages
   ------------------------------------------------------------------
   Les vignettes sont des photos portrait de mannequins (900 × 1200).
   `object-fit: cover` recadre depuis le CENTRE : dans une carte plus
   large que haute, le centre d'un portrait tombe sur le menton, et la
   carte n'affiche qu'une bouche et des cheveux. On décale donc le point
   d'ancrage vers le haut pour garder le visage et la racine — c'est
   précisément ce que la cliente vient regarder sur une perruque.
   ------------------------------------------------- */
.collection__media img { object-position: 50% 22%; }

@media (max-width: 560px) {
	/* Format portrait plutôt que paysage : sur un écran étroit, la carte
	   large coupait la tête. Le 4/5 laisse tenir le sujet entier. */
	.collection { aspect-ratio: 4 / 5; }
	.collection__media img { object-position: 50% 18%; }
	.collection__texte { padding: 18px 20px 20px; }
	.collection__nom { font-size: 1.24rem; }
}

/* Renvoi vers le guide, sous la grille des collections. Remplace une
   section entière qui répétait les mêmes cartes vers les mêmes pages. */
.collections__guide {
	margin-top: clamp(26px, 3vw, 40px);
	text-align: center;
	font-size: .92rem;
	color: var(--gris);
}
.collections__guide a {
	color: var(--noir);
	border-bottom: 1px solid var(--bordure);
	padding-bottom: 2px;
	margin-left: .4em;
	white-space: nowrap;
}
.collections__guide a:hover { color: var(--champagne-2); border-bottom-color: var(--champagne); }
.collections__guide .fleche { display: inline-block; transition: transform var(--t); }
.collections__guide a:hover .fleche { transform: translateX(5px); }
@media (max-width: 600px) {
	.collections__guide a { white-space: normal; display: inline-block; margin-left: 0; margin-top: .4em; }
}

/* ===================================================================
   39. LISIBILITE — correctifs mesures
   ------------------------------------------------------------------
   Trois défauts relevés en mesurant la page rendue, pas en la regardant :
   contraste insuffisant du champagne sur crème (corrigé dans les jetons
   ci-dessus), lignes de texte trop longues, et libellés sous 11 px.
   ------------------------------------------------- */

/* 161 caractères par ligne : au-delà de 75, l'œil perd le début de la
   ligne suivante. On ramène à une largeur de lecture. */
.collections__guide {
	max-width: 52ch;
	margin-inline: auto;
}

/* 10 px pour des capitales très espacées, c'est sous le seuil de confort.
   On remonte d'un cran et on resserre l'interlettrage en compensation. */
.article-carte__meta { font-size: .74rem; letter-spacing: .18em; }

/* Le suptitre cumulait petite taille et interlettrage très large. */
.surtitre { letter-spacing: .28em; }

/* ===================================================================
   40. ZONES TACTILES SUR MOBILE
   ------------------------------------------------------------------
   Mesuré sur un écran de 375 px : les icônes de l'en-tête faisaient
   17 × 35 px, les croix de fermeture 30 × 32, la pagination 26 × 33.
   La cible recommandée est 44 × 44 — en dessous, on rate le bouton et
   on touche le lien d'à côté. Le doigt ne vise pas comme la souris.
   ------------------------------------------------- */
@media (max-width: 900px) {

	.icone-btn,
	.burger {
		min-width: 44px;
		min-height: 44px;
		justify-content: center;
		padding: 8px;
	}

	.tiroir__fermer,
	.filtres__fermer,
	.recherche-overlay__fermer {
		min-width: 44px;
		min-height: 44px;
		display: grid;
		place-items: center;
		padding: 0;
	}

	/* WooCommerce enveloppe sa pagination dans nav.woocommerce-pagination,
	   pas dans .pagination : ma premiere regle ne l'atteignait pas. */
	.pagination .page-numbers,
	.woocommerce-pagination li .page-numbers,
	.woocommerce-pagination a.page-numbers,
	.woocommerce-pagination span.page-numbers {
		min-width: 44px;
		min-height: 44px;
		display: inline-grid;
		place-items: center;
	}

	/* Options de filtre : on les tape en serie, 38 px etait juste. */
	.filtre__option { min-height: 44px; }
	.btn, .btn--clair, .btn--or { min-height: 44px; }

	/* Le bouton d'ajout au panier sur la carte produit. */
	ul.products li.product .button { min-height: 44px; display: inline-grid; place-items: center; }
}