/*
 * Feuille unique de la boutique — base du kit, à recalibrer sur CHAQUE clone.
 *
 * Ce fichier accompagne les parts de `theme/parts/` : les classes correspondent une à une.
 * Ce qu'il faut ajuster au démarrage d'un clone, et seulement cela :
 *   1. les jetons de `:root` — police, couleurs, largeur de conteneur, rayons ;
 *   2. les tailles de titres si la source s'en écarte.
 * Relever ces valeurs avec `tools/releve-styles.js` (getComputedStyle), jamais dans le CSS
 * déclaré de la source : variables surchargées et media queries y mentent.
 *
 * Palette relevée dans le CSS de soya-paris.com (thème Impact) : encre et accent #042146,
 * fond blanc, prix promo #4974CA. Roboto pour tout, comme la source — elle est libre.
 */

/* Palette relevée dans le CSS de soya-paris.com (thème Impact 6.4.1), pas de mémoire :
   --text-primary / --accent / --button-background-primary / --footer-background valent
   tous 4 33 70, soit #042146. Roboto est libre (Apache 2.0) : aucune substitution. */
:root {
	--font: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
	--font-titre: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;

	--texte: #042146;
	--noir: #042146;
	--gris: #5A6B80;
	--gris-clair: #8A97A6;
	--ligne: rgba(4, 33, 70, .12);
	--fond: #FFFFFF;
	--blanc: #FFFFFF;

	--creme: #F2F2F2;
	--creme-bord: #E1E4E9;
	--rose: #F5F7FA;
	--rose-bord: #E1E4E9;
	/* L'accent de la marque : le même bleu marine que l'encre, boutons et pied de page. */
	--brun: #042146;
	--brun-fonce: #021530;
	--sauge: #042146;
	/* Prix promo et badges (--on-sale-text / --on-sale-badge-background). */
	--promo: #4974CA;
	--or: #FFB74A;
	--rouge: #D72C2C;

	--wrap: 1600px;
	--rayon: 10px;
	--rayon-carte: 12px;
}

/* ------------------------------------------------------------------ Base */

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

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

body {
	margin: 0;
	background: var(--fond);
	color: var(--texte);
	font-family: var(--font);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.8;
	letter-spacing: .06em;
	overflow-x: hidden;
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; letter-spacing: inherit; }

h1, h2, h3 { font-weight: 700; line-height: 1.3; margin: 0 0 .5em; }
h1 { font-size: 24px; letter-spacing: .78px; color: var(--noir); }
h2 { font-size: 22px; color: #111; }
h3 { font-size: 17px; }
p { margin: 0 0 1em; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 50px; }

.visually-hidden {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.section__titre { text-align: center; font-size: 22px; font-weight: 700; margin-bottom: 28px; }

.etoiles { color: var(--or); letter-spacing: 2px; margin: 0 0 8px; line-height: 1; }

/* Icônes Material : la police n'arrive qu'après le CSS, d'où la réserve de place. */
.micone {
	font-family: "Material Symbols Outlined";
	font-weight: normal; font-style: normal; font-size: 22px;
	line-height: 1; letter-spacing: normal; text-transform: none;
	display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr;
	-webkit-font-feature-settings: "liga"; font-feature-settings: "liga";
	-webkit-font-smoothing: antialiased; flex-shrink: 0; min-width: 22px;
}
.micone--grand { font-size: 34px; min-width: 34px; }

/* Boutons */
.btn {
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--brun); color: #fff; text-decoration: none;
	font-size: 17px; font-weight: 700; letter-spacing: 1px;
	/* Boutons en pilule, comme la source (mesuré sur la capture). */
	padding: 16px 34px; border: 0; border-radius: 999px; cursor: pointer;
	gap: 8px; transition: opacity .18s ease;
}
.btn:hover { opacity: .86; }
.btn--atc { width: 100%; font-size: 19px; padding: 16px 30px; margin-top: 14px; }
.btn[disabled] { opacity: .55; cursor: progress; }

/* ---------------------------------------------------------------- Ticker */

.ticker { overflow: hidden; }
.ticker__piste { display: flex; width: max-content; align-items: center; gap: 60px; animation: defile 50s linear infinite; }
.ticker__item { font-size: 14px; white-space: nowrap; }
/* Bandeau d'annonce de la source : deux lignes de texte et, à leur droite, un décompte
   qui expire chaque soir à 23 h 59. Fond #042146, hauteur 58 px — relevé sur la source. */
.annonce { background: var(--brun); color: #fff; }
.annonce__texte {
	display: flex; align-items: center; justify-content: center; gap: 24px;
	margin: 0; padding: 8px 20px; min-height: 58px; text-align: center;
	color: inherit; text-decoration: none;
}
.annonce__texte:hover { text-decoration: none; }
.annonce__messages { display: flex; flex-direction: column; gap: 2px; }
.annonce__titre { font-size: 15px; font-weight: 700; letter-spacing: .04em; line-height: 1.2; }
.annonce__sous  { font-size: 12.5px; font-weight: 400; letter-spacing: .02em; opacity: .92; }

/* Le décompte : trois nombres séparés par deux-points, chacun avec sa légende dessous.
   tabular-nums fige la largeur des chiffres — sans lui, la barre tressaute à chaque
   seconde parce que « 1 » est plus étroit que « 8 ». */
.annonce__compte { display: flex; align-items: flex-start; gap: 6px; font-variant-numeric: tabular-nums; }
.annonce__bloc { display: flex; flex-direction: column; align-items: center; min-width: 26px; }
.annonce__n { font-size: 16px; font-weight: 700; line-height: 1.1; }
.annonce__l { font-size: 9px; letter-spacing: .06em; opacity: .75; }
.annonce__sep { font-size: 16px; font-weight: 700; line-height: 1.1; opacity: .6; }

@media (max-width: 749px) {
	.annonce__texte { gap: 14px; padding: 7px 12px; min-height: 54px; }
	.annonce__titre { font-size: 13px; }
	.annonce__sous  { font-size: 11px; }
	.annonce__n, .annonce__sep { font-size: 14px; }
	.annonce__l { font-size: 8px; }
	.annonce__bloc { min-width: 22px; }
}
.ticker--urgence { background: #fff; color: #000; padding: 14px 0; border-block: 1px solid var(--ligne); }
.ticker--urgence .ticker__item { font-size: 15px; font-weight: 500; }
.ticker__puce { opacity: .45; }
@keyframes defile { to { transform: translateX(calc(-50% - 30px)); } }
@media (prefers-reduced-motion: reduce) { .ticker__piste { animation: none; } }

/* ---------------------------------------------------------------- Header */

/* L'en-tête de la source n'est pas collant et n'a pas de filet : il défile avec la page,
   et la séparation d'avec la bannière se fait au seul contraste. Trois colonnes égales
   sur les bords, la navigation au centre — c'est cette grille qui fait retomber
   « Contact » et « Suivre votre commande » sur une seconde ligne, comme la source. */
.header { position: static; background: var(--fond); }
.header__in {
	display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
	gap: 16px; padding-block: 12px;
}
.header__logo { justify-self: center; }
.header__logo img { width: 100px; height: auto; }
.header__nav { display: none; }
.header__icons { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 24px; }
.header__icons a, .header__icons .header__devise { position: relative; display: flex; align-items: center; color: var(--noir); }
.header__devise { gap: 6px; font-size: 14px; text-decoration: none; }
.header__drapeau { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.cart__n {
	position: absolute; top: -6px; right: -8px; min-width: 16px; height: 16px;
	background: var(--brun); color: #fff; border-radius: 50%;
	font-size: 10px; line-height: 16px; text-align: center; letter-spacing: 0;
}

.burger { display: flex; flex-direction: column; gap: 5px; background: none; border: 0; padding: 6px 0; cursor: pointer; }
.burger span { display: block; width: 22px; height: 1.5px; background: var(--noir); border-radius: 4px; }

.mobile-nav { border-top: 1px solid var(--ligne); background: var(--fond); }
.mobile-nav__in { display: flex; flex-direction: column; }
.mobile-nav a { display: block; padding: 14px 0; text-decoration: none; font-size: 15px; border-top: 1px solid var(--ligne); }
.mobile-nav a:first-child { border-top: 0; }

@media (pointer: fine) {
	.header__nav a:hover { opacity: .7; }
}

@media (min-width: 1000px) {
	.burger { display: none; }
	.mobile-nav { display: none; }
	.header__in { padding-block: 24px; }
	.header__logo img { width: 120px; }
	/* La colonne du milieu est bornée : c'est ce qui replie la navigation sur deux
	   lignes centrées, comme la source, au lieu d'une seule ligne étirée. */
	.header__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 24px; max-width: 660px; }
	.header__nav a { text-decoration: none; font-size: 16px; font-weight: 700; letter-spacing: normal; transition: opacity .2s ease-in-out; }
	.header__devise { font-size: 16px; }
}

/* ------------------------------------------------------------------ Hero */

.hero { position: relative; }
.hero__lien { display: block; }
.hero__img { width: 100%; height: auto; }
/* Le bouton se pose sur la bannière, comme la source. */
.hero__cta { position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%); margin: 0; }

/* ------------------------------------------------------- Bandeau de presse */

/* Un panneau marine généreux, pas un liseré : 96 px de respiration verticale et des
   logos de 48 px. Le marine est ici #0F2756, un ton plus clair que le --brun des
   boutons et du pied — la source distingue les deux. Les tuiles sont groupées à
   GAUCHE avec un écart fixe : les étaler sur toute la largeur les isole les uns des
   autres et fait perdre l'effet de bandeau de presse. */
.presse { background: #0f2756; padding: 96px 48px; }
.presse__logos {
	list-style: none; margin: 0 auto; padding: 0; max-width: var(--wrap);
	display: flex; align-items: center; justify-content: flex-start;
	gap: 24px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
}
.presse__logos::-webkit-scrollbar { display: none; }
.presse__logos li { flex: 0 0 171px; display: flex; align-items: center; }
.presse__logos img { height: 48px; width: 100%; object-fit: contain; }

@media (max-width: 749px) {
	/* Sur petit écran la source fait défiler la bande : trois logos à la fois, les
	   autres au doigt. Les replier sur deux rangées les rapetissait de moitié. */
	.presse { padding: 48px 20px; }
	.presse__logos { gap: 8px; }
	.presse__logos li { flex: 0 0 120px; }
	.presse__logos img { height: 40px; }
}

/* --------------------------------------------------- Blocs média + texte */

/* La source aligne les deux colonnes en hauteur : le visuel se recadre pour épouser
   la carte de texte, au lieu de rester en 3:2 et de laisser un décrochage. Le texte y
   est aussi plus lisible — encre pleine, corps de 16 px — et la carte respire deux
   fois plus. */
.bloc { padding: 48px 0 0; }
.bloc:last-of-type { padding-bottom: 48px; }
.bloc__in { display: grid; gap: 24px; align-items: stretch; }
.bloc__media { border-radius: var(--rayon-carte); overflow: hidden; }
.bloc__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bloc__texte {
	background: #f8f8f8; border-radius: var(--rayon-carte); padding: 40px 32px;
	display: flex; flex-direction: column; justify-content: center;
}
.bloc__sur-titre { font-size: 16px; font-weight: 700; color: #1a1a1a; margin: 0 0 24px; }
.bloc__titre { font-size: 28px; font-weight: 500; line-height: 1.2; margin: 0 0 14px; }
.bloc__corps { font-size: 14px; line-height: 1.6; color: #1a1a1a; }
.bloc__corps strong { color: var(--texte); }
.bloc__corps p:last-child { margin-bottom: 20px; }
/* Le bouton de ces blocs est un rectangle à coins doux, pas la pilule du reste du
   site : on ne touche pas à .btn, qui sert ailleurs. */
.bloc .btn { border-radius: 10px; font-size: 16px; letter-spacing: normal; padding: 17px 40px; }

@media (min-width: 1000px) {
	.bloc { padding: 96px 0 0; }
	.bloc:last-of-type { padding-bottom: 96px; }
	.bloc__in { grid-template-columns: 1fr 1fr; gap: 24px; }
	.bloc__texte { padding: 80px; }
	.bloc__titre { font-size: 44px; line-height: 1.1; }
	.bloc__corps { font-size: 16px; }
	/* Le second bloc inverse l'ordre : texte à gauche, visuel à droite. */
	.bloc--media-droite .bloc__media { order: 2; }
}

/* ------------------------------------------------------------ Fiche : mise en page */

.fiche { padding-block: 16px 24px; }
.fiche__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }

@media (min-width: 990px) {
	.fiche { padding-block: 36px; }
	.fiche__in { grid-template-columns: minmax(0, 55%) minmax(0, 1fr); gap: 40px; align-items: start; }
	/* La source range les vignettes en COLONNE à gauche de la vue, pas en bande dessous. */
	.galerie { position: sticky; top: 84px; display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 10px; }
	.galerie__scene { order: 2; }
	.galerie__vignettes {
		order: 1; flex-direction: column; margin-top: 0;
		overflow-x: visible; overflow-y: auto; max-height: 100%;
	}
	.galerie__vignette { width: 100%; }
}

/* Galerie */
.galerie__scene { position: relative; border-radius: var(--rayon-carte); overflow: hidden; background: #fafafa; }
.galerie__vue { display: none; margin: 0; }
.galerie__vue.est-active { display: block; }
.galerie__vue img { width: 100%; aspect-ratio: 1; object-fit: cover; }

.galerie__vignettes { display: flex; gap: 8px; margin-top: 8px; overflow-x: auto; scrollbar-width: none; }
.galerie__vignettes::-webkit-scrollbar { display: none; }
.galerie__vignette {
	flex: 0 0 auto; width: 72px; padding: 0; background: none; cursor: pointer;
	border: 1px solid var(--ligne); border-radius: 6px; overflow: hidden; line-height: 0;
}
.galerie__vignette.est-active { border-color: var(--noir); }
.galerie__vignette img { width: 100%; aspect-ratio: 1; object-fit: cover; }

/* ------------------------------------------------------- Colonne d'achat */

/* Une seule ligne au-dessus du titre de la fiche : étoiles, note, nombre d'utilisateurs. */
.preuve { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; font-size: 13px; }
.preuve__etoiles { color: #00B67A; letter-spacing: 2px; font-size: 14px; }
.preuve__note { font-weight: 700; color: var(--texte); letter-spacing: 0; }
.preuve__legende { color: var(--gris); line-height: 1.35; }

.achat__titre { font-size: 24px; margin-bottom: 12px; }
.achat__badge {
	display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 1px;
	background: var(--noir); color: #fff; padding: 4px 10px; border-radius: 4px; margin: 0 0 12px;
}
.achat__accroche { font-size: 14px; line-height: 1.7; margin-bottom: 24px; }

/* Liste à puces du bloc d'achat. Renommée : « benefices » est le nom de la SECTION
   bénéfices, dont le CSS (assets/css/benefices.css) lui posait un fond et 48px de marge. */
.achat__points { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 12px; }
.achat__points li { display: flex; align-items: center; gap: 12px; font-size: 15px; line-height: 1.4; }

.savoir {
	display: flex; align-items: flex-start; gap: 16px;
	padding: 20px 22px; margin-bottom: 16px;
	border: 1.5px solid #d5d0c8; border-radius: 14px; background: #fff;
}
.savoir__icone { color: var(--sauge); flex-shrink: 0; margin-top: 2px; }
.savoir__titre { font-size: 15px; font-weight: 700; color: #111; line-height: 1.4; margin: 0 0 6px; }
.savoir__texte { font-size: 14px; color: var(--gris); line-height: 1.55; margin: 0; }

.checks {
	list-style: none; margin: 0 0 16px; padding: 20px 22px; display: grid; gap: 14px;
	background: var(--rose); border: 1.5px solid var(--rose-bord); border-radius: 14px;
}
.checks li { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; color: var(--brun); line-height: 1.4; }
.checks__puce {
	flex-shrink: 0; width: 26px; height: 26px; border-radius: 6px; background: #6b4226; color: #fff;
	display: flex; align-items: center; justify-content: center;
}

.guide-lien { text-align: center; margin: 15px 0; }
.guide-btn {
	background: linear-gradient(135deg, #f5e6da 0%, #faeee5 50%, #f5e6da 100%);
	color: var(--brun-fonce); font-size: 15px; font-weight: 600; letter-spacing: .5px;
	padding: 13px 30px; border: 1.5px solid #e8d5c4; border-radius: 50px; cursor: pointer;
	box-shadow: 0 4px 15px rgba(122, 74, 46, .15); transition: transform .2s ease;
}
.guide-btn:hover { transform: scale(1.04); }

/* ------------------------------------------------------------- Les offres */

.offres__titre {
	text-align: center; font-size: 16px; font-weight: 700; color: #000;
	margin: 0 0 5px; padding-bottom: 8px; border-bottom: 2px solid #000;
}
.offres { display: grid; gap: 5px; }

.offre { position: relative; border: 2px solid rgba(0, 0, 0, .48); border-radius: 6px; background: #fff; }
.offre.est-active { border-color: #000; background: rgba(0, 0, 0, .06); }
.offre__radio { position: absolute; opacity: 0; pointer-events: none; }
.offre__badge {
	position: absolute; top: -11px; right: 14px; z-index: 2;
	background: var(--brun); color: #fff; font-size: 12px; font-weight: 700;
	padding: 2px 12px; border-radius: 20px; letter-spacing: .3px;
}
.offre__label { display: flex; align-items: center; gap: 10px; padding: 10px 20px; cursor: pointer; }
.offre__img { width: 50px; height: 50px; object-fit: cover; border-radius: 5px; flex-shrink: 0; }
.offre__texte { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.offre__t { font-size: 16px; font-weight: 700; color: #000; line-height: 1.3; }
.offre__st { font-size: 14px; font-weight: 500; color: var(--gris-clair); }
.offre__prix { text-align: right; flex-shrink: 0; }
.offre__p { display: block; font-size: 16px; font-weight: 700; color: #000; }
.offre__pb { display: block; font-size: 13px; color: #6b7280; }

/* Sélecteurs par unité — visibles seulement dans l'offre retenue. */
.variantes { display: none; border: 0; margin: 0; padding: 0 20px 14px; }
.offre.est-active .variantes, .variantes--seule { display: grid; gap: 10px; }
.variantes--seule { padding: 0; margin-bottom: 14px; }

.unite { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.unite__n { font-size: 13px; font-weight: 700; color: var(--gris-clair); min-width: 22px; }

/* La source affiche le nom de la finition SOUS la pastille, en clair. */
.pastilles { display: flex; gap: 18px; }
.pastille__radio { position: absolute; opacity: 0; pointer-events: none; }
.pastille {
	display: flex; flex-direction: column; align-items: center; gap: 6px;
	cursor: pointer; line-height: 1;
}
.pastille img {
	width: 34px; height: 34px; border-radius: 20%; object-fit: cover;
	border: 2px solid transparent; box-shadow: 0 0 0 1px var(--ligne);
}
.pastille__nom { font-size: 12px; color: var(--gris); letter-spacing: 0; }
.pastille__radio:checked + .pastille img { border-color: var(--texte); box-shadow: 0 0 0 1px var(--texte); }
.pastille__radio:checked + .pastille .pastille__nom { color: var(--texte); font-weight: 600; }
.pastille__radio:focus-visible + .pastille img { outline: 2px solid var(--texte); outline-offset: 2px; }

.champ-select { flex: 0 1 150px; min-width: 84px; }
.champ-select select, .select-simple {
	width: 100%; font: inherit; font-size: 14px; letter-spacing: 0;
	padding: 7px 28px 7px 10px; border: 1px solid rgba(0, 0, 0, .27); border-radius: 4px;
	background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.4'/></svg>") no-repeat right 10px center;
	-webkit-appearance: none; appearance: none; cursor: pointer;
}

.achat__prix { display: flex; align-items: baseline; gap: 10px; margin: 0 0 14px; }
.achat__p { font-size: 22px; font-weight: 700; }
.achat__pb { color: #6b7280; }

.achat__erreur { color: var(--rouge); font-size: 14px; margin: 10px 0 0; }

/* Paiements et réassurance */
.paiements { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 15px 0; padding: 0; }
.paiements__svg { display: block; width: 38px; height: 24px; }

.reassurance { list-style: none; display: flex; justify-content: space-between; gap: 10px; margin: 15px 0; padding: 0; }
.reassurance__item { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: 12px; line-height: 1.3; }
.reassurance__item .micone { font-size: 28px; min-width: 28px; }

/* ------------------------------------------------------------------- FAQ */

.faq, .accordeons { margin: 24px 0; }

/* La FAQ de bas de page : titrée, centrée, à sa propre largeur de lecture. */
.faq--bloc { max-width: 760px; margin: 72px auto; padding: 0 20px; }
.faq__titre { font-family: var(--font-titre); font-size: 28px; font-weight: 700; text-align: center; margin: 0 0 32px; letter-spacing: 0; }
@media (max-width: 700px) { .faq--bloc { margin: 48px auto; } .faq__titre { font-size: 24px; margin-bottom: 24px; } }
.faq__item { border-bottom: 1px solid #eee; }
.faq__item > summary {
	display: flex; align-items: center; gap: 12px; padding: 18px 0;
	cursor: pointer; list-style: none; font-size: 15px; font-weight: 600; color: #111;
}
.faq__item > summary::-webkit-details-marker { display: none; }
.faq__q { flex: 1; line-height: 1.4; }
/* Icône « plus » qui pivote en croix à l'ouverture, comme la source. */
.faq__plus { flex-shrink: 0; color: var(--texte); line-height: 0; transition: transform .25s ease; }
.faq__item[open] .faq__plus { transform: rotate(45deg); }
.faq__media { width: 100%; max-width: 270px; border-radius: var(--rayon-carte); margin-top: 12px; }
.faq__r { padding: 0 0 18px 34px; font-size: 14px; line-height: 1.6; color: var(--gris); }
.faq__r p { margin: 0 0 .8em; }
.accordeons .faq__r { padding-left: 0; }

/* ---------------------------------------------------------------- Presse */

/* Blanc pur et non crème : la source tranche nettement ce bandeau du reste de la page (mesuré). */

/* ------------------------------------------------------------ Avant/après */

.avant-apres { padding-block: 24px; }
.avant-apres__in { max-width: 760px; margin-inline: auto; text-align: center; }
.avant-apres__titre { font-size: 22px; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 16px; }
.avant-apres__video { width: 100%; border-radius: 10px; }

/* ------------------------------------------------- Témoignages en vidéo */

.ugc { padding-block: 24px 40px; }
.ugc__titre { text-align: center; font-size: 20px; font-weight: 800; line-height: 1.35; margin-bottom: 20px; }
.ugc__cadre { position: relative; max-width: 960px; margin-inline: auto; }
.ugc__piste { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.ugc__piste::-webkit-scrollbar { display: none; }
.ugc__item { flex: 0 0 75%; scroll-snap-align: start; border-radius: 10px; overflow: hidden; background: #000; aspect-ratio: 9 / 16; }
.ugc__item video { width: 100%; height: 100%; object-fit: cover; }
.ugc__fleche {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
	width: 36px; height: 36px; border: 0; border-radius: 50%; cursor: pointer;
	background: rgba(255, 255, 255, .88); box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
	font-size: 20px; line-height: 1; color: #111;
}
.ugc__fleche--g { left: 6px; }
.ugc__fleche--d { right: 6px; }
@media (min-width: 750px) { .ugc__item { flex-basis: calc(33.333% - 8px); } }

/* ---------------------------------------------------------- Fondatrices */

.fondatrices { padding-block: 24px; }
.fondatrices__in { display: grid; gap: 24px; align-items: center; }
.fondatrices__media img { width: 100%; border-radius: var(--rayon-carte); }
.fondatrices__texte h2 { font-size: 26px; line-height: 1.25; }
.fondatrices__texte p { font-size: 17px; line-height: 1.7; }
@media (min-width: 750px) { .fondatrices__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; } }

/* ------------------------------------------------------------ Comparatif */

.comparatif { padding-block: 40px 30px; }
.comparatif__in { max-width: 720px; margin-inline: auto; text-align: center; }
.comparatif__surtitre { font-size: 12px; font-weight: 700; color: #8a6d5a; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 10px; }
.comparatif__titre { font-size: 24px; font-weight: 800; line-height: 1.3; margin-bottom: 8px; }
.comparatif__sous { font-size: 14px; color: #777; margin-bottom: 24px; }
.comparatif__img { width: 100%; border-radius: 10px; margin-bottom: 20px; }
.comparatif__cartes { display: grid; gap: 14px; margin-bottom: 20px; }
.comparatif__carte { border: 1.5px solid #e0dcd7; border-radius: 12px; padding: 20px 18px; text-align: left; }
.comparatif__carte--pour { border-color: #6b3a3a; }
.comparatif__carte h3 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 14px; }
.comparatif__carte--contre h3 { color: var(--rouge); }
.comparatif__carte--pour h3 { color: #111; }
.comparatif__carte ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.comparatif__carte li { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: #444; line-height: 1.45; }
.comparatif__carte--contre li span { color: #bbb; }
.comparatif__carte--pour li span { color: #111; }
.comparatif__pied {
	display: flex; align-items: flex-start; gap: 14px; text-align: left;
	background: var(--creme); border-radius: 12px; padding: 18px 22px;
}
.comparatif__pied-icone { color: var(--sauge); flex-shrink: 0; margin-top: 2px; }
.comparatif__pied p { font-size: 13px; color: #333; line-height: 1.55; margin: 0; }
@media (min-width: 750px) { .comparatif__cartes { grid-template-columns: 1fr 1fr; } }

/* ----------------------------------------------------------- Témoignages */

.temoignages { padding-block: 24px; }
.temoignages__liste { list-style: none; display: grid; gap: 16px; margin: 0; padding: 0; }
.temoignages__item { border: 1px solid #f0ece6; border-radius: var(--rayon-carte); padding: 20px; }
.temoignages__texte { font-size: 14px; line-height: 1.6; color: var(--gris); }
.temoignages__auteur { font-size: 13px; color: #999; margin: 0; }
@media (min-width: 750px) { .temoignages__liste { grid-template-columns: repeat(3, 1fr); } }

/* ------------------------------------------------------------------ Avis */
/* La grille du widget Loox : colonnes CSS, chaque carte garde sa hauteur propre. */

.avis { padding-block: 46px; background: var(--fond); }
.avis__titre {
	font-family: var(--font-titre); font-size: 28px; font-weight: 700;
	text-align: center; margin: 0 0 10px; letter-spacing: 0; color: var(--texte);
}
.avis__note {
	display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
	gap: 10px; font-size: 14px; color: var(--gris); margin: 0 0 30px;
}
.avis__note-valeur { font-weight: 700; color: var(--texte); }
.avis__etoiles { color: var(--or); letter-spacing: 2px; line-height: 1; }

.avis__grille { columns: 1; column-gap: 16px; }
.avis__carte {
	break-inside: avoid; display: inline-block; width: 100%;
	background: #fff; border: 1px solid var(--bord, #E7E9EE); border-radius: var(--rayon-carte);
	padding: 16px; margin: 0 0 16px; overflow: hidden;
}
.avis__img {
	display: block; width: calc(100% + 32px); margin: -16px -16px 14px;
	height: auto; object-fit: cover;
}
.avis__carte .avis__etoiles { font-size: 14px; margin: 0 0 9px; }
.avis__texte { font-size: 14px; line-height: 1.6; color: var(--texte); margin: 0 0 12px; }
.avis__meta {
	display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
	font-size: 12.5px; color: var(--gris-clair, #7A8699); margin: 0;
}
.avis__auteur { font-weight: 600; color: var(--texte); }
.avis__verifie { display: inline-flex; align-items: center; gap: 4px; color: var(--brun); font-weight: 600; }
.avis__produit { font-size: 12px; color: var(--gris-clair, #7A8699); margin: 6px 0 0; }

@media (min-width: 560px)  { .avis__grille { columns: 2; } }
@media (min-width: 1000px) { .avis__grille { columns: 3; } }
@media (min-width: 1300px) { .avis__grille { columns: 4; } }

/* -------------------------------------------------------------- Garantie */

.garantie { padding-block: 30px 39px; }
.garantie__in { max-width: 760px; margin-inline: auto; text-align: center; }
.garantie__titre { font-size: 24px; }
.garantie__texte { font-size: 14px; color: var(--gris); }

/* --------------------------------------------------------------- Accueil */

/* La bannière colle à l'en-tête et au bandeau de presse : la source ne met aucune
   bande blanche autour d'elle, les trois blocs forment un aplat continu. */
.hero { padding: 0; }
.hero__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: center; }
.hero__media img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }

.hero__note { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; color: var(--gris); margin: 0 0 20px; }
.hero__etoiles { color: #00B67A; letter-spacing: 2px; font-size: 15px; }
.hero__note a { color: var(--gris); text-underline-offset: 3px; }

.hero__texte h1 { font-family: var(--font-titre); font-size: clamp(34px, 4.2vw, 58px); font-weight: 400; line-height: 1.08; letter-spacing: -.01em; margin: 0 0 20px; text-wrap: balance; }
.hero__sous { font-family: var(--font); font-size: 17px; font-weight: 400; color: var(--gris); line-height: 1.6; margin: 0 0 28px; max-width: 44ch; }

@media (max-width: 900px) {
	.hero__in { grid-template-columns: 1fr; gap: 26px; }
	.hero__texte { text-align: center; }
	.hero__note { justify-content: center; }
	.hero__sous { margin-inline: auto; }
}

/* ── Nos best sellers ──────────────────────────────────────────────────────────
   La source fait défiler ses quatorze produits sur UNE ligne, avec une barre de
   progression et deux flèches. Une grille figée montrait tout d'un coup, ce qui
   allongeait la page et cassait son rythme. */
.phares { padding-block: 40px 56px; }
.phares__entete { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.phares__entete .section__titre {
	text-align: left; margin: 0;
	font-size: 28px; font-weight: 500; letter-spacing: 1.1px; line-height: 1.1; color: var(--brun);
}
@media (min-width: 700px) {
	.phares__entete .section__titre { font-size: 44px; }
}
.phares__lien {
	display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
	font-size: 14px; color: var(--brun); text-decoration: none;
}
.phares__lien:hover { text-decoration: underline; }

.phares__rail {
	list-style: none; margin: 24px 0 0; padding: 0 0 4px;
	display: grid; grid-auto-flow: column; gap: 24px;
	grid-auto-columns: 74vw;
	overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
	/* Le rail sort des marges du conteneur pour toucher les bords, comme la source. */
	margin-inline: calc(-1 * var(--gouttiere, 20px));
	padding-inline: var(--gouttiere, 20px);
}
.phares__rail::-webkit-scrollbar { display: none; }
.carte { scroll-snap-align: start; }
.carte a { text-decoration: none; display: block; }
.carte__media { position: relative; border-radius: 6px; overflow: hidden; background: #fff; }
.carte__img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
/* Le second visuel est posé par-dessus le premier et se découvre au survol. Il ne
   remplace rien : les deux restent chargés, l'un s'efface. */
.carte__img--seconde { position: absolute; inset: 0; opacity: 0; transition: opacity .3s ease; }
@media (pointer: fine) {
	.carte:hover .carte__img--seconde { opacity: 1; }
}
/* L'achat rapide : posé en bas du visuel, invisible au repos, révélé au survol. Sur
   écran tactile il n'y a pas de survol — le bouton y reste visible en permanence. */
.carte { position: relative; }
.carte__achat { position: absolute; left: 12px; right: 12px; bottom: 12px; margin: 0; }
.carte__achat button {
	width: 100%; height: 46px; border: 0; border-radius: 10px; cursor: pointer;
	background: var(--brun); color: #fff; font: inherit; font-size: 15px;
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.carte__achat button:hover { background: var(--brun-fonce); }
@media (pointer: fine) {
	.carte__achat { opacity: 0; transition: opacity .2s ease; }
	.carte:hover .carte__achat,
	.carte__achat:focus-within { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.carte__achat { transition: none; }
}

.carte__couleurs { display: flex; align-items: center; gap: 2px; margin-top: 8px; }
.carte__pastille { width: 14px; height: 14px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgba(4, 33, 70, .15); }
.carte__couleurs-plus { font-size: 12px; color: rgba(4, 33, 70, .5); margin-left: 4px; }
.carte__remise {
	position: absolute; top: 10px; left: 10px; background: #4974ca; color: #fff;
	font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 10px;
}
.carte__nom { font-size: 16px; font-weight: 400; margin: 12px 0 4px; text-align: left; }
.carte__prix { display: flex; gap: 8px; font-size: 16px; font-weight: 400; margin: 0; color: rgba(4, 33, 70, .7); }
.carte__prix s { color: rgba(4, 33, 70, .45); }

/* La barre de progression : un trait fin qui se remplit au défilement, et les
   deux flèches à sa droite. Les flèches disparaissent sur petit écran, où l'on
   fait défiler au doigt. */
.phares__barre { display: flex; align-items: center; gap: 24px; margin-top: 24px; }
.phares__piste { flex: 1; height: 2px; background: rgba(4, 33, 70, .1); border-radius: 2px; overflow: hidden; }
.phares__avancee { display: block; height: 100%; width: 0; background: var(--brun); transition: width .15s linear; }
.phares__fleches { display: none; gap: 8px; }
.phares__fleche {
	width: 48px; height: 48px; border-radius: 9999px; border: 1px solid rgba(4, 33, 70, .15);
	background: #fff; color: var(--brun); cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
	transition: border-color .15s ease, opacity .15s ease;
}
.phares__fleche:hover:not(:disabled) { border-color: var(--brun); }
.phares__fleche:disabled { opacity: .35; cursor: default; }

@media (min-width: 700px) {
	.phares__rail { grid-auto-columns: 36vw; }
}
@media (min-width: 1000px) {
	.phares__rail { grid-auto-columns: calc(100% / 3 - 16px); }
	.phares__fleches { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
	.phares__rail { scroll-behavior: auto; }
	.phares__avancee { transition: none; }
}

.avis-accueil { padding-block: 20px 40px; }
.avis-accueil__piste { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 10px; }
.avis-accueil__piste::-webkit-scrollbar { display: none; }
.avis-accueil__carte {
	flex: 0 0 260px; scroll-snap-align: start; margin: 0; padding: 22px;
	border: 1px solid #f0ece6; border-radius: var(--rayon-carte);
}
.avis-accueil__carte blockquote { margin: 0 0 12px; font-size: 14px; line-height: 1.6; color: var(--gris); }
.avis-accueil__carte figcaption { font-size: 13px; color: #999; }

.sav { padding-block: 20px 40px; }
.sav__in { display: grid; gap: 24px; align-items: center; }
.sav__media img { width: 100%; border-radius: var(--rayon-carte); }
@media (min-width: 750px) { .sav__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; } }

/* Les quatre réassurances : un groupe compact et centré chez la source, pas une rangée
   étirée d'un bord à l'autre. Sous 1150 px elles défilent une par une plutôt que de
   s'empiler sur quatre écrans de haut. */
.colonnes { padding-block: 20px 50px; }
.colonnes__in {
	display: grid; grid-auto-flow: column; grid-auto-columns: 100%;
	gap: 24px; text-align: center;
	overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.colonnes__in::-webkit-scrollbar { display: none; }
.colonnes__item { scroll-snap-align: center; }
.colonnes__item .micone { font-size: 24px; min-width: 24px; }
.colonnes__item h3 { font-size: 16px; font-weight: 500; margin: 12px 0 6px; }
.colonnes__item p { font-size: 14px; color: var(--gris); margin: 0; }
@media (min-width: 1150px) {
	.colonnes__in {
		grid-auto-flow: row; grid-template-columns: repeat(4, 1fr);
		max-width: 880px; margin-inline: auto; overflow-x: visible;
	}
}

/* ---------------------------------------------------------------- Modale */

.modale { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; }
.modale[hidden] { display: none; }
.modale__fond { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); }
.modale__boite {
	position: relative; z-index: 1; width: min(380px, 92vw); max-height: 85vh; overflow-y: auto;
	background: #fff; border-radius: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
}
.modale__fermer { position: absolute; top: 12px; right: 14px; background: none; border: 0; font-size: 20px; color: var(--brun-fonce); cursor: pointer; z-index: 2; }
.modale__entete { background: linear-gradient(135deg, #f5e6da 0%, #faeee5 100%); border-radius: 16px 16px 0 0; padding: 22px 20px 16px; text-align: center; }
.modale__titre { font-size: 18px; font-weight: 700; color: var(--brun-fonce); margin: 0 0 4px; }
.modale__sous { font-size: 13px; color: #6b4c35; margin: 0; }
.modale__corps { padding: 16px; }

.tailles { width: 100%; border-collapse: collapse; font-size: 13px; letter-spacing: 0; }
.tailles th, .tailles td { padding: 11px 8px; text-align: center; border-bottom: 1px solid #f0e4d9; }
.tailles thead th { background: #f0dfd0; color: var(--brun-fonce); font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; }
.tailles thead th:first-child, .tailles tbody th { text-align: left; padding-left: 14px; }
.tailles tbody th { font-size: 14px; font-weight: 700; color: var(--brun-fonce); }
.tailles tbody tr:last-child th, .tailles tbody tr:last-child td { border-bottom: 0; }
.tailles__conseil {
	display: flex; gap: 8px; margin-top: 14px; padding: 12px;
	background: linear-gradient(135deg, #fff8f3 0%, #faeee5 100%);
	border: 1.5px solid #e8d5c4; border-radius: 10px;
	font-size: 12px; color: var(--brun-fonce); line-height: 1.5;
}

/* ----------------------------------------------------------------- Pages */

.page-service { padding-top: 32px; padding-bottom: 48px; max-width: 860px; }
.page-service h1 { font-size: 28px; margin-bottom: 20px; }
.page-service h2 { font-size: 19px; margin-top: 28px; }
.page-service p, .page-service li { font-size: 15px; line-height: 1.75; color: var(--gris); }

/* ------------------------------------------------------------- Pied de page */
/* Trois colonnes sur fond marine, puis la barre du bas. La source n'y met pas de logo. */

.footer { background: var(--brun); color: rgba(255, 255, 255, .88); padding: 64px 0; }
.footer a { color: inherit; }

.footer__in { display: grid; gap: 34px; }
.footer__titre { font-size: 16px; font-weight: 700; color: #fff; margin: 0 0 24px; }
.footer__texte { font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, .7); margin: 0 0 12px; max-width: 46ch; }
/* « En savoir plus » est un lien discret dans le paragraphe, pas un appel à l'action
   détaché : le détacher et le souligner en fait une promesse qu'il ne tient pas. */
.footer__plus { font-size: 16px; font-weight: 400; text-decoration: none; color: rgba(255, 255, 255, .7); }
.footer__plus:hover { text-decoration: underline; }

.footer__lettre-texte { font-size: 18px; font-weight: 500; line-height: 1.4; color: #fff; margin: 0 0 24px; max-width: 40ch; }
/* Un seul champ, avec le bouton posé à l'intérieur à droite — la source n'a pas de gros
   bouton blanc sous le champ. */
.footer__lettre { position: relative; max-width: 400px; }
.footer__lettre input {
	width: 100%; height: 60px; padding: 0 60px 0 16px; font: inherit; font-size: 16px;
	color: #fff; background: transparent; border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 8px;
}
.footer__lettre input::placeholder { color: rgba(255, 255, 255, .6); }
.footer__lettre-envoi {
	position: absolute; top: 50%; right: 12px; transform: translateY(-50%);
	width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3);
	background: transparent; color: #fff; cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
	transition: background-color .15s ease;
}
.footer__lettre-envoi:hover { background: rgba(255, 255, 255, .12); }
.footer__lettre input:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.btn--clair { background: #fff; color: var(--brun); }
.btn--clair:hover { background: rgba(255, 255, 255, .88); }

.footer__links { display: flex; flex-direction: column; gap: 12px; list-style: none; margin: 0; padding: 0; }
.footer__links a { font-size: 16px; color: #fff; text-decoration: none; }
.footer__links a:hover { text-decoration: underline; }

.footer__bas { margin-top: 48px; display: flex; flex-direction: column; align-items: flex-start; gap: 48px; }
.footer__pays { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: #fff; margin: 0; }
.footer__drapeau { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.footer__bas-ligne { width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.footer__bas .paiements { gap: 8px; }
.footer__bas .paiements__svg { width: 38px; }
.footer__legal { font-size: 14px; color: rgba(255, 255, 255, .7); margin: 0; }

@media (min-width: 850px) {
	.footer__in { grid-template-columns: 448px 336px 218px; justify-content: start; gap: 40px 96px; }
	.footer__lettre-texte { font-size: 22px; }
}

/* --------------------------------------------------------------- Mobile */

@media (max-width: 749px) {
	.wrap { padding-inline: 20px; }
	/* La photo du hero touche les bords de l'écran, comme la source en mobile. */
	.hero__media { margin-inline: -20px; }
	h1, .achat__titre { font-size: 20px; }
	.avis__titre { font-size: 22px; }
	.comparatif__titre { font-size: 19px; }
	.fondatrices__texte h2 { font-size: 21px; }
	.ugc__titre { font-size: 17px; }
	.offre__label { padding: 10px 12px; }
	.offre__t { font-size: 15px; }
	.variantes { padding-inline: 12px; }
	.reassurance__item { font-size: 11px; }
}

/* Apparition au défilement. La classe « a-apparaitre » n'est posée QUE par le script :
   sans JS, rien ne se cache. */
.a-apparaitre { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; }
.est-apparu { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.a-apparaitre { opacity: 1; transform: none; transition: none; }
}