/* =============================================================================
   SCIERIE VOUTAZ — Feuille de style
   =============================================================================

   Parti pris graphique
   --------------------
   Le commerce du bois de chauffage se joue sur la confiance : le client achète
   une palette de 900 kg qu'il ne verra qu'à la livraison. L'interface doit
   donc paraître solide, pas spectaculaire. D'où :

   - une palette de bruns chauds et de neutres sableux, empruntée à la matière
     vendue, plutôt qu'un bleu corporate interchangeable ;
   - des surfaces franches, des bords nets, des ombres discrètes : aucun effet
     de verre ni de dégradé animé, qui coûteraient en performance et en
     lisibilité sans rien ajouter à la crédibilité ;
   - un vert #96D700 réservé exclusivement à l'action. S'il servait aussi de
     couleur décorative, le regard ne saurait plus où cliquer.

   Accessibilité
   -------------
   Le vert d'action est clair : il porte donc toujours un texte sombre
   (rapport de contraste ≈ 11:1). Pour un lien ou un texte vert sur fond clair,
   on utilise --action-texte, assombri jusqu'à 5:1.

   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. Jetons
   -------------------------------------------------------------------------- */

:root {
	/* Couleur d'action imposée, et ses déclinaisons */
	--action:          #96D700;
	--action-fonce:    #86C200;
	--action-sombre:   #6F9E00;
	--action-texte:    #4F7A00;  /* vert lisible sur fond clair */
	--action-voile:    #F2FBDC;
	--action-bord:     #D6EFA0;
	--sur-action:      #15120F;  /* texte posé sur le vert */

	/* Neutres chauds */
	--encre:           #1C1714;
	--encre-douce:     #4A403A;
	--encre-tertiaire: #756A62;
	--fond:            #FBF8F4;
	--surface:         #FFFFFF;
	--surface-douce:   #F4EEE6;
	--bord:            #E6DDD2;
	--bord-fort:       #D3C6B7;
	/* Contour des elements interactifs — champs, boutons de contour, selecteurs
	   de quantite. La WCAG exige 3:1 pour la limite d'un composant d'interface :
	   --bord-fort n'atteint que 1,68:1 sur blanc, ce qui suffit a une separation
	   decorative mais pas a delimiter un champ de saisie. */
	--bord-champ:      #9E8D7B;  /* 3,21:1 sur blanc, 3,03:1 sur le fond */

	/* Accents bois */
	--bois:            #8B5E3C;
	--bois-clair:      #B08159;
	--bois-voile:      #F6EFE7;
	--ecorce:          #2E2620;

	/* États */
	--succes:          #2E7D32;
	--succes-voile:    #E9F5EA;
	--alerte:          #B45309;
	--alerte-voile:    #FDF3E7;
	--erreur:          #B3261E;
	--erreur-voile:    #FDECEA;
	--info-voile:      #EEF4FA;

	/* Typographie */
	--titre: "Source Serif 4", "Iowan Old Style", Georgia, "Times New Roman", serif;
	--texte: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	/* Rythme */
	--r1: .25rem;  --r2: .5rem;   --r3: .75rem;  --r4: 1rem;
	--r5: 1.5rem;  --r6: 2rem;    --r7: 3rem;    --r8: 4rem;   --r9: 6rem;

	/* Arrondis */
	--arr-s: 6px;  --arr-m: 10px;  --arr-l: 16px;  --arr-xl: 24px;

	/* Ombres — discrètes, jamais diffuses */
	--ombre-1: 0 1px 2px rgba(28, 23, 20, .06), 0 1px 3px rgba(28, 23, 20, .04);
	--ombre-2: 0 2px 4px rgba(28, 23, 20, .06), 0 4px 12px rgba(28, 23, 20, .06);
	--ombre-3: 0 8px 24px rgba(28, 23, 20, .10), 0 2px 6px rgba(28, 23, 20, .06);

	/* Plans — une échelle unique évite les z-index de 9999 */
	--plan-sticky: 10;
	--plan-entete: 20;
	--plan-voile:  30;
	--plan-tiroir: 40;
	--plan-message: 50;

	--largeur: 1240px;
	--gouttiere: 1.25rem;
	--transition: 180ms cubic-bezier(.2, 0, .2, 1);
}

@media (min-width: 768px) {
	:root { --gouttiere: 2rem; }
}

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

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

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

body {
	margin: 0;
	background: var(--fond);
	color: var(--encre);
	font-family: var(--texte);
	font-size: 1rem;          /* 16px : jamais moins sur mobile */
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;       /* filet de sécurité, le contenu ne doit pas déborder */
}

h1, h2, h3, h4 {
	font-family: var(--titre);
	font-weight: 600;
	line-height: 1.18;
	letter-spacing: -.012em;
	color: var(--encre);
	margin: 0 0 var(--r4);
	text-wrap: balance;
}

h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); }
h2 { font-size: clamp(1.6rem, 1.25rem + 1.5vw, 2.35rem); }
h3 { font-size: clamp(1.2rem, 1.08rem + .5vw, 1.5rem); }
h4 { font-size: 1.0625rem; font-family: var(--texte); font-weight: 650; }

p { margin: 0 0 var(--r4); max-width: 68ch; }

a { color: var(--action-texte); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--action-sombre); }

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

ul, ol { margin: 0 0 var(--r4); padding-left: 1.25rem; }
li { margin-bottom: .35rem; }

hr { border: 0; border-top: 1px solid var(--bord); margin: var(--r6) 0; }

strong, b { font-weight: 650; }

:focus-visible {
	outline: 3px solid var(--action-sombre);
	outline-offset: 2px;
	border-radius: 3px;
}

/* Lien d'évitement : premier élément tabulable de chaque page */
.saut-contenu {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: var(--plan-message);
	background: var(--encre);
	color: #fff;
	padding: var(--r3) var(--r4);
	border-radius: 0 0 var(--arr-m) 0;
}
.saut-contenu:focus { left: 0; color: #fff; }

.visuellement-cache {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* -----------------------------------------------------------------------------
   3. Mise en page
   -------------------------------------------------------------------------- */

.conteneur {
	width: 100%;
	max-width: var(--largeur);
	margin-inline: auto;
	padding-inline: var(--gouttiere);
}

/*
 * Pages larges : accueil, catalogue et fiche produit. Le contenu occupe toute
 * la largeur disponible, moins une marge latérale légère. Sans cette marge, le
 * texte et les cartes viendraient coller au bord de l'écran — la place gagnée
 * se paierait en confort de lecture.
 *
 * Élargir ne met pas la lecture en danger ici : les blocs de texte portent
 * déjà leur propre limite (.section-entete à 60 ch, .heros__interieur à
 * 42 rem), et la description d'une fiche ajoute des colonnes plutôt que
 * d'allonger ses lignes. Ce sont les grilles qui gagnent la place.
 *
 * La règle est limitée à #contenu : le pied de page garde sa largeur propre.
 */
.page-large #contenu .conteneur {
	max-width: none;
	padding-inline: clamp(var(--gouttiere), 3vw, 3.5rem);
}

.section { padding-block: clamp(var(--r7), 5vw, var(--r9)); }
.section--serre { padding-block: clamp(var(--r6), 4vw, var(--r7)); }
.section--sable { background: var(--surface-douce); }
.section--blanc { background: var(--surface); }

.section-entete { max-width: 60ch; margin-bottom: var(--r6); }
.section-entete p { color: var(--encre-douce); margin-bottom: 0; }

.grille { display: grid; gap: var(--r4); }
@media (min-width: 600px)  { .grille--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 600px)  { .grille--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px)  { .grille--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 600px)  { .grille--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grille--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 768px)  { .grille { gap: var(--r5); } }

/* -----------------------------------------------------------------------------
   4. Boutons
   -------------------------------------------------------------------------- */

.bouton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55em;
	min-height: 48px;           /* cible tactile confortable */
	padding: .75rem 1.5rem;
	border: 1px solid transparent;
	border-radius: var(--arr-m);
	font-family: var(--texte);
	font-size: 1rem;
	font-weight: 620;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--transition), border-color var(--transition),
	            color var(--transition), box-shadow var(--transition);
}

/* Action principale : la seule à porter le vert imposé */
.bouton--action {
	background: var(--action);
	border-color: var(--action);
	color: var(--sur-action);
	box-shadow: var(--ombre-1);
}
.bouton--action:hover  { background: var(--action-fonce); border-color: var(--action-fonce); color: var(--sur-action); box-shadow: var(--ombre-2); }
.bouton--action:active { background: var(--action-sombre); border-color: var(--action-sombre); box-shadow: none; }

.bouton--sombre { background: var(--encre); border-color: var(--encre); color: #fff; }
.bouton--sombre:hover { background: var(--ecorce); border-color: var(--ecorce); color: #fff; }

.bouton--contour { background: var(--surface); border-color: var(--bord-champ); color: var(--encre); }
.bouton--contour:hover { border-color: var(--encre); background: var(--surface); color: var(--encre); }

.bouton--discret { background: transparent; border-color: transparent; color: var(--encre-douce); padding-inline: .75rem; }
.bouton--discret:hover { background: var(--surface-douce); color: var(--encre); }

.bouton--large { width: 100%; }
.bouton--grand { min-height: 56px; font-size: 1.0625rem; padding-inline: 2rem; }
.bouton--petit { min-height: 40px; font-size: .9375rem; padding: .5rem 1rem; }

.bouton[disabled], .bouton[aria-disabled="true"] {
	opacity: .5;
	cursor: not-allowed;
	pointer-events: none;
}

/* État d'attente : le bouton se verrouille pendant l'appel réseau, pour
   qu'un double clic ne crée pas deux lignes de panier. */
.bouton.est-occupe { pointer-events: none; opacity: .75; }
.bouton.est-occupe .bouton__libelle { visibility: hidden; }
.bouton.est-occupe::after {
	content: "";
	position: absolute;
	width: 1.15em; height: 1.15em;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: rotation .7s linear infinite;
}
.bouton { position: relative; }

@keyframes rotation { to { transform: rotate(360deg); } }

/* -----------------------------------------------------------------------------
   5. Barre de service et entête
   -------------------------------------------------------------------------- */

.barre-service {
	background: var(--ecorce);
	color: #E8E0D8;
	font-size: .8125rem;
}
.barre-service__interieur {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--r4);
	min-height: 40px;
	flex-wrap: wrap;
}
.barre-service__arguments {
	display: flex;
	gap: var(--r5);
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}
.barre-service__arguments li { display: flex; align-items: center; gap: .45rem; margin: 0; }
.barre-service__arguments i { color: var(--action); }
.barre-service__reglages { display: flex; align-items: center; gap: var(--r2); }

/*
 * Langue dans la bande, sous 1024 px.
 *
 * Au-dessus, elle est dans l'en-tête, près du compte et du panier. En dessous,
 * l'en-tête n'a de place que pour le panier et le menu : la langue n'était plus
 * que dans le tiroir, invisible tant qu'on ne l'ouvre pas. Elle rejoint le pays,
 * sous la même forme de bouton.
 */
.barre-service__langue { display: none; }
.selecteur__prefixe { display: none; color: rgba(232, 224, 216, .72); }

@media (max-width: 1023px) {
	.barre-service__langue { display: block; }
	.barre-service__arguments li:not(:first-child) { display: none; }
}

/*
 * Mobile : une seule ligne. L'argument de livraison ne tenait pas à côté des
 * réglages et renvoyait le sélecteur de pays seul sur une seconde ligne. Il cède
 * la place — le bandeau de réassurance sous l'accueil et la zone de livraison le
 * reprennent — et le bouton de pays gagne un libellé : « CH · CHF » seul ne
 * disait pas ce qu'il règle.
 */
@media (max-width: 767px) {
	.barre-service__interieur { flex-wrap: nowrap; gap: var(--r2); min-height: 46px; }
	.barre-service__arguments { display: none; }
	.barre-service__reglages { flex: 1 1 auto; min-width: 0; justify-content: space-between; }
	.barre-service .selecteur__bouton { min-height: 34px; }
	.selecteur__prefixe { display: inline; }
	/* Le bouton de pays est à gauche : son menu s'ouvre vers la droite. */
	.selecteur--pays .selecteur__menu { left: 0; right: auto; }
}
@media (max-width: 359px) {
	.selecteur__prefixe { display: none; }
}

/* Sélecteurs de langue et de pays */
.selecteur {
	position: relative;
}
.selecteur__bouton {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	min-height: 32px;
	padding: .25rem .6rem;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: var(--arr-s);
	color: inherit;
	font: inherit;
	cursor: pointer;
	transition: background-color var(--transition);
}
.selecteur__bouton:hover { background: rgba(255, 255, 255, .16); }
.selecteur__menu {
	display: none;
	position: absolute;
	right: 0;
	top: calc(100% + 6px);
	min-width: 190px;
	background: var(--surface);
	border: 1px solid var(--bord);
	border-radius: var(--arr-m);
	box-shadow: var(--ombre-3);
	padding: var(--r1);
	z-index: var(--plan-tiroir);
	list-style: none;
	margin: 0;
}
/* Le menu s'ouvre d'abord en CSS — au survol et des que le focus entre dans le
   selecteur. Sans cela, un visiteur sans JavaScript ne pourrait plus changer de
   langue ni de pays, alors que ce sont deux reglages essentiels du site.
   Le script ne fait qu'ajouter le declenchement au clic, utile au tactile. */
.selecteur:hover .selecteur__menu,
.selecteur:focus-within .selecteur__menu,
.selecteur__menu.est-ouvert { display: block; }
.selecteur__menu li { margin: 0; }
.selecteur__menu a, .selecteur__menu button {
	display: flex;
	align-items: center;
	gap: .6rem;
	width: 100%;
	padding: .6rem .75rem;
	background: none;
	border: 0;
	border-radius: var(--arr-s);
	color: var(--encre);
	font: inherit;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}
.selecteur__menu a:hover, .selecteur__menu button:hover { background: var(--surface-douce); }
.selecteur__menu [aria-current="true"] { font-weight: 650; background: var(--action-voile); }

.entete {
	position: sticky;
	top: 0;
	z-index: var(--plan-entete);
	background: var(--surface);
	border-bottom: 1px solid var(--bord);
}

/* La barre de navigation est le seul bloc du site qui doit loger cote a cote
   un logo, cinq entrees et des actions. Plafonnee comme le contenu a 1240 px,
   elle ne disposait que de 1176 px utiles — insuffisant en francais, ou les
   libelles sont plus longs qu'en allemand, et ce QUELLE QUE SOIT la taille de
   l'ecran : agrandir la fenetre n'apportait aucune place. On lui accorde donc
   sa propre largeur maximale, plus genereuse que celle du contenu. */
.entete .conteneur,
.barre-service .conteneur { max-width: 1600px; }

/* Sur les pages larges, l'en-tête suit la largeur du contenu. Sans cela, le
   logo démarre à 190 px du bord pendant que le fil d'Ariane démarre à 56 px,
   et le décalage se lit comme un défaut d'alignement. */
.page-large .entete .conteneur,
.page-large .barre-service .conteneur {
	max-width: none;
	padding-inline: clamp(var(--gouttiere), 3vw, 3.5rem);
}

/* -----------------------------------------------------------------------------
   Questions fréquentes
   -------------------------------------------------------------------------- */

.faq-entete { max-width: 46rem; margin-bottom: var(--r6); }
.faq-entete__texte { color: var(--encre-doux); margin-bottom: var(--r5); }

.faq-filtre { position: relative; max-width: 30rem; }
.faq-filtre__icone {
	position: absolute;
	left: .9rem; top: 50%;
	transform: translateY(-50%);
	color: var(--encre-tertiaire);
	pointer-events: none;
}
.faq-filtre__champ {
	width: 100%;
	min-height: 48px;
	padding: .7rem 1rem .7rem 2.6rem;
	background: var(--surface);
	border: 1px solid var(--bord-champ);
	border-radius: var(--arr-m);
	font: inherit;
}
.faq-filtre__vide { margin-top: var(--r4); color: var(--encre-doux); }

/* Sommaire : des pastilles cliquables, pas une liste à puces. */
.faq-sommaire { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: var(--r6); }
.faq-sommaire__lien {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	min-height: 44px;
	padding: .5rem .9rem;
	background: var(--surface);
	border: 1px solid var(--bord);
	border-radius: 999px;
	font-size: .9375rem;
	font-weight: 600;
	text-decoration: none;
}
.faq-sommaire__lien:hover { border-color: var(--bord-fort); }
.faq-sommaire__nb {
	display: inline-grid;
	place-items: center;
	min-width: 22px; height: 22px;
	padding: 0 .35rem;
	background: var(--action-voile);
	border-radius: 999px;
	font-size: .75rem;
	color: var(--action-texte);
}

.faq-section { margin-bottom: var(--r6); }
.faq-section__titre {
	font-size: 1.15rem;
	text-transform: uppercase;
	letter-spacing: .8px;
	padding-bottom: .6rem;
	margin-bottom: var(--r4);
	border-bottom: 1px solid var(--bord);
	scroll-margin-top: 100px;
}

.faq-item {
	border: 1px solid var(--bord);
	border-radius: var(--arr-m);
	background: var(--surface);
	margin-bottom: .6rem;
	overflow: hidden;
}
.faq-item[open] { border-color: var(--bord-fort); }
.faq-item__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--r4);
	min-height: 56px;
	padding: .9rem 1.1rem;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}
/* Le triangle natif de <summary>, que chaque navigateur dessine à sa façon. */
.faq-item__question::-webkit-details-marker { display: none; }
.faq-item__question:hover { background: var(--surface-douce); }
.faq-item__chevron {
	flex: 0 0 auto;
	color: var(--encre-doux);
	transition: transform var(--transition);
}
.faq-item[open] .faq-item__chevron { transform: rotate(180deg); }
.faq-item__reponse { padding: 0 1.1rem 1.1rem; max-width: 68ch; }
.faq-item__reponse p { margin-bottom: .75rem; }
.faq-item__reponse p:last-child { margin-bottom: 0; }

/* Sortie de secours en bas de page. */
.faq-reste {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--r5);
	margin-top: var(--r6);
	padding: var(--r5);
	background: var(--surface-douce);
	border: 1px solid var(--bord);
	border-radius: var(--arr-l);
}
.faq-reste h2 { font-size: 1.25rem; margin-bottom: .35rem; }
.faq-reste p { max-width: 52ch; color: var(--encre-doux); }
.faq-reste__actions { display: flex; flex-wrap: wrap; gap: .6rem; }

/* -----------------------------------------------------------------------------
   Page contact
   -------------------------------------------------------------------------- */

.contact-entete { max-width: 46rem; margin-bottom: var(--r6); }
.contact-entete__texte { color: var(--encre-doux); margin-bottom: 0; }

/* Les trois voies de contact, à égalité. */
.contact-voies { display: grid; gap: var(--r4); margin-bottom: var(--r7); }
@media (min-width: 700px)  { .contact-voies { grid-template-columns: repeat(3, 1fr); } }

.contact-voie {
	display: flex;
	flex-direction: column;
	padding: var(--r5);
	background: var(--surface);
	border: 1px solid var(--bord);
	border-radius: var(--arr-l);
}
/* Le téléphone est mis en avant : sur un achat pondéreux, c'est le canal qui
   résout le plus de questions en le moins de temps. */
.contact-voie--principale { border-color: var(--action); box-shadow: 0 0 0 3px var(--action-voile); }
.contact-voie__icone {
	display: inline-grid;
	place-items: center;
	width: 44px; height: 44px;
	margin-bottom: var(--r4);
	background: var(--action-voile);
	border-radius: 12px;
	color: var(--action-texte);
	font-size: 1.05rem;
}
.contact-voie h2 { font-size: 1.15rem; margin-bottom: .35rem; }
.contact-voie__texte { font-size: .9375rem; color: var(--encre-doux); margin-bottom: var(--r4); }
.contact-voie__valeur {
	display: block;
	margin-top: auto;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
	overflow-wrap: anywhere;
}
/* Une adresse e-mail longue ne doit pas élargir la carte. */
.contact-voie__valeur--mail { font-size: 1rem; }
.contact-voie__valeur--adresse { font-size: 1rem; font-weight: 600; }
.contact-voie__note {
	display: flex;
	align-items: center;
	gap: .45rem;
	margin: .6rem 0 0;
	font-size: .875rem;
	color: var(--encre-doux);
}

.contact-corps { display: grid; gap: var(--r6); align-items: start; }
@media (min-width: 1000px) { .contact-corps { grid-template-columns: 1.5fr 1fr; } }
.contact-formulaire > h2 { font-size: 1.35rem; margin-bottom: .35rem; }

.contact-cote { display: grid; gap: var(--r4); }
.contact-bloc {
	padding: var(--r5);
	background: var(--surface);
	border: 1px solid var(--bord);
	border-radius: var(--arr-l);
}
.contact-bloc h2 { font-size: 1.05rem; margin-bottom: .6rem; }
.contact-bloc--sable { background: var(--surface-douce); }
.contact-bloc--identite { background: transparent; border-style: dashed; }

.contact-adresse { font-style: normal; line-height: 1.6; margin-bottom: var(--r4); }
.contact-horaires { display: flex; align-items: center; gap: .5rem; font-weight: 600; margin-bottom: .5rem; }

.contact-identite { list-style: none; margin: 0; padding: 0; }
.contact-identite li {
	display: flex;
	align-items: center;
	gap: .6rem;
	margin-bottom: .5rem;
	font-size: .875rem;
	color: var(--encre-doux);
}
.contact-identite li:last-child { margin-bottom: 0; }
.contact-identite i { color: var(--action-texte); }

/* -----------------------------------------------------------------------------
   Compte client : bouton d'en-tête, pages d'accès, espace client
   -------------------------------------------------------------------------- */

/* Numéro d'assistance dans la bande de service. */
.barre-service__tel {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	color: inherit;
	text-decoration: none;
	font-weight: 600;
	white-space: nowrap;
}
.barre-service__tel:hover { color: var(--action); }
/* Sous 900 px la bande n'a plus la place : les arguments priment sur le numéro,
   que le pied de page et la page contact portent de toute façon. */
@media (max-width: 899px) { .barre-service__tel { display: none; } }

/*
 * Bouton du compte. Le libellé n'apparaît qu'à partir de 1200 px : en dessous,
 * la navigation et la recherche se disputent déjà la largeur, et une icône
 * seule reste comprise.
 */
/*
 * .action-icone est une grille centrée d'une seule colonne : l'icône et le
 * libellé s'y empileraient. On repasse en ligne, et la largeur devient libre.
 *
 * Sélecteur à deux classes : .action-icone est déclarée plus bas dans cette
 * feuille, et à spécificité égale c'est la dernière règle qui l'emporte.
 */
.action-icone.action-compte {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .45rem;
	width: auto;
	padding-inline: .55rem;
	white-space: nowrap;
}
/*
 * Sous 1024 px, ni le compte ni la langue ne tiennent dans la barre : mesuré à
 * 390 px, les actions faisaient 236 px et la page débordait de 52 px. Les deux
 * réglages passent alors dans le tiroir, qui les porte en pleine largeur.
 */
@media (max-width: 1023px) {
	.entete__actions .action-compte,
	.entete__actions .selecteur { display: none; }
}

.action-compte__texte { display: none; font-size: .875rem; font-weight: 600; }
/*
 * Le libellé n'apparaît qu'à 1440 px. Mesuré : à 1280 px la navigation
 * française — « Bois de chauffage, Granulés de bois, Briquettes de bois,
 * Charbon de bois » — occupe déjà toute la barre, et le libellé poussait le
 * panier hors de l'écran. L'icône seule reste comprise.
 */
@media (min-width: 1440px) {
	.action-icone.action-compte { padding-inline: .7rem; }
	.action-compte__texte {
		display: inline;
		max-width: 12ch;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

/* Compte et langue dans le tiroir mobile. */
.tiroir__compte,
.tiroir__reglages {
	margin-top: var(--r5);
	padding-top: var(--r5);
	border-top: 1px solid var(--bord);
}
.tiroir__langues { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }

/* Pages connexion / inscription : formulaire et encart côte à côte. */
.compte-acces { display: grid; gap: var(--r5); align-items: start; }
@media (min-width: 900px) {
	.compte-acces { grid-template-columns: 1.35fr 1fr; gap: var(--r6); }
}
.compte-acces__aparte {
	padding: var(--r5);
	background: var(--surface-douce);
	border: 1px solid var(--bord);
	border-radius: var(--arr-l);
}
.liste-avantages { list-style: none; margin: 0 0 var(--r5); padding: 0; }
.liste-avantages li {
	display: flex;
	align-items: flex-start;
	gap: .6rem;
	margin-bottom: .6rem;
	font-size: .9375rem;
	line-height: 1.45;
}
.liste-avantages i { color: var(--action-texte); margin-top: .2rem; }

/* Espace client. */
.compte-entete {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--r4);
	margin-bottom: var(--r5);
}
.compte-onglets {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
	margin-bottom: var(--r5);
	border-bottom: 1px solid var(--bord);
}
.compte-onglets__lien {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	min-height: 44px;
	padding: .5rem .9rem;
	text-decoration: none;
	font-weight: 600;
	font-size: .9375rem;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
}
.compte-onglets__lien--actif { border-bottom-color: var(--action); }

.tableau-commandes { width: 100%; border-collapse: collapse; }
.tableau-commandes th,
.tableau-commandes td {
	padding: .8rem .75rem;
	text-align: left;
	border-bottom: 1px solid var(--bord);
	font-size: .9375rem;
	vertical-align: middle;
}
.tableau-commandes thead th {
	font-size: .75rem;
	text-transform: uppercase;
	letter-spacing: .5px;
}
.tableau-commandes .droite { text-align: right; }

/* Pastille de statut : la couleur double le mot, elle ne le remplace pas —
   une information portée par la seule couleur est perdue pour une partie des
   lecteurs. */
.etiquette-statut {
	display: inline-block;
	padding: .2rem .6rem;
	border-radius: 999px;
	font-size: .75rem;
	font-weight: 700;
	white-space: nowrap;
	background: var(--surface-douce);
	border: 1px solid var(--bord-fort);
}
.etiquette-statut--en_attente_paiement { background: #FFF4DB; border-color: #E8CE8E; color: #6B4E00; }
.etiquette-statut--payee,
.etiquette-statut--en_preparation      { background: #E8F3FF; border-color: #A8CBF0; color: #17466F; }
.etiquette-statut--expediee            { background: #F2FBDC; border-color: #C4E37E; color: #46620B; }
.etiquette-statut--livree              { background: #E6F6EA; border-color: #9CD3AC; color: #17572C; }
.etiquette-statut--annulee,
.etiquette-statut--remboursee          { background: #F6E9E9; border-color: #DDAFAF; color: #6E2020; }

.entete__interieur {
	display: flex;
	align-items: center;
	gap: var(--r3);
	min-height: 76px;
	min-width: 0;
	flex-wrap: nowrap;
}
@media (min-width: 1600px) { .entete__interieur { gap: var(--r4); } }
/* L'en-tête reste collé en haut pendant le défilement : sur un téléphone, ses
   76 px prenaient un dixième de l'écran à chaque page. */
@media (max-width: 767px) { .entete__interieur { min-height: 64px; } }

.logo {
	display: inline-flex;
	align-items: center;
	gap: .7rem;
	text-decoration: none;
	color: var(--encre);
	flex-shrink: 0;
}
.logo__marque {
	display: grid;
	place-items: center;
	width: 42px; height: 42px;
	background: var(--ecorce);
	color: var(--action);
	border-radius: var(--arr-m);
	font-size: 1.15rem;
}
.logo__texte { display: flex; flex-direction: column; line-height: 1.12; }
.logo__nom {
	font-family: var(--titre);
	font-size: 1.2rem;
	font-weight: 650;
	letter-spacing: -.01em;
}
.logo__accroche {
	font-size: .6875rem;
	color: var(--encre-tertiaire);
	text-transform: uppercase;
	letter-spacing: .09em;
}
@media (max-width: 480px) { .logo__accroche { display: none; } }

/* Navigation principale.
   Les libelles francais sont nettement plus longs que les allemands
   (« Bois de chauffage » contre « Brennholz ») : a 1366 px, l'entete debordait
   en francais alors qu'il tenait en allemand. On reprend donc de la place la
   ou elle ne coute rien — l'icone et l'espacement — plutot que de masquer la
   navigation, et on autorise le bloc a retrecir. */
/*
 * Seuil d'affichage : 1380 px, le même que le champ de recherche.
 *
 * Il était à 1024 px, et l'en-tête débordait de 284 px en français à cette
 * largeur — mesuré, pas supposé. Cinq intitulés français (« Bois de chauffage »,
 * « Granulés de bois », « Briquettes de bois », « Charbon de bois »,
 * « Conseils ») plus le logo et les actions ne tiennent pas dans 1024 px, et
 * aucun réglage d'espacement n'y change quoi que ce soit.
 *
 * En dessous de 1380 px, le menu en tiroir prend le relais : il contient la
 * navigation complète, les sous-catégories et la recherche.
 */
.navigation { display: none; }
@media (min-width: 1380px) {
	.navigation {
		display: flex;
		align-items: center;
		gap: 2px;
		margin-inline: auto;
		/* La navigation ne retrecit JAMAIS. Lui permettre de le faire ne la
		   rendait pas plus compacte — ses libelles sont insecables — mais la
		   faisait deborder sous le champ de recherche, qui la recouvrait.
		   C'est la recherche qui absorbe la contrainte (voir plus bas). */
		flex: 0 0 auto;
	}
}
.navigation__lien {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .6rem .62rem;
	border-radius: var(--arr-s);
	color: var(--encre-douce);
	font-weight: 550;
	font-size: .9375rem;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--transition), color var(--transition);
}
/* Les icones et l'espacement genereux ne reviennent qu'a 1600 px, seuil mesure
   a partir duquel la version francaise tient encore avec le champ de recherche.
   En francais, les icones font passer la navigation de 672 a 799 px. */
.navigation__lien i { display: none; }
@media (min-width: 1600px) {
	.navigation { gap: var(--r1); }
	.navigation__lien { padding: .6rem .85rem; }
	.navigation__lien i { display: inline; }
}
.navigation__lien:hover { background: var(--surface-douce); color: var(--encre); }
.navigation__lien[aria-current="page"] { color: var(--encre); background: var(--action-voile); }

.entete__actions { display: flex; align-items: center; gap: var(--r2); margin-left: auto; flex: 0 0 auto; }

/* Accès à la recherche sur la plage ou ni le champ ni le tiroir ne sont la.
   Le selecteur porte deux classes : .action-icone, declaree plus bas, pose
   display:inline-grid a specificite egale et l'emporterait sinon. */
/*
 * Cette icône n'a plus de fenêtre d'utilité : navigation et champ de recherche
 * apparaissent désormais au même seuil (1380 px), et en dessous le tiroir
 * contient déjà la recherche. On la garde masquée plutôt que de la retirer du
 * gabarit, pour ne pas casser un lien profond existant.
 */
.entete__actions .recherche-lien { display: none; }

.action-icone {
	display: inline-grid;
	place-items: center;
	position: relative;
	width: 46px; height: 46px;
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--arr-m);
	color: var(--encre);
	font-size: 1.05rem;
	cursor: pointer;
	text-decoration: none;
	transition: background-color var(--transition), border-color var(--transition);
}
.action-icone:hover { background: var(--surface-douce); color: var(--encre); }

.pastille {
	position: absolute;
	top: 4px; right: 4px;
	min-width: 20px; height: 20px;
	padding-inline: 5px;
	display: grid;
	place-items: center;
	background: var(--action);
	color: var(--sur-action);
	border-radius: 999px;
	font-size: .6875rem;
	font-weight: 700;
	line-height: 1;
}
.pastille:empty, .pastille[hidden] { display: none; }

/* Le tiroir disparaît quand la navigation complète prend sa place, pas avant. */
@media (min-width: 1380px) { .bouton-menu { display: none; } }

/* Recherche.
   C'est elle qui absorbe toute la contrainte de largeur : un champ plus etroit
   reste utilisable, une navigation recouverte ne l'est plus. overflow:hidden
   garantit que meme comprimee a zero, elle ne deborde sur rien.
   Sous 1380 px, elle disparait de la barre — la recherche reste accessible
   dans le tiroir, ou elle est en pleine largeur. */
.recherche { position: relative; display: none; min-width: 0; overflow: hidden; }
@media (min-width: 1380px) { .recherche { display: block; flex: 1 1 200px; max-width: 240px; } }
@media (min-width: 1600px) { .recherche { flex: 1 1 260px; max-width: 380px; } }
.recherche__champ {
	width: 100%;
	min-height: 46px;
	padding: .6rem 1rem .6rem 2.6rem;
	background: var(--surface-douce);
	border: 1px solid transparent;
	border-radius: var(--arr-m);
	font: inherit;
	font-size: .9375rem;
	color: var(--encre);
}
.recherche__champ::placeholder { color: var(--encre-tertiaire); }
.recherche__champ:focus { background: var(--surface); border-color: var(--bord-fort); outline-offset: 0; }
.recherche__icone {
	position: absolute;
	left: .9rem; top: 50%;
	transform: translateY(-50%);
	color: var(--encre-tertiaire);
	pointer-events: none;
}

/* Tiroir de navigation mobile */
.voile {
	position: fixed;
	inset: 0;
	background: rgba(28, 23, 20, .45);
	z-index: var(--plan-voile);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--transition);
}
.voile.est-ouvert { opacity: 1; pointer-events: auto; }

.tiroir {
	position: fixed;
	inset-block: 0;
	inset-inline-end: 0;
	width: min(90vw, 380px);
	background: var(--surface);
	z-index: var(--plan-tiroir);
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform var(--transition);
	overflow-y: auto;
	overscroll-behavior: contain;
}
/* Meme raison que pour .notification : sans cette regle, le tiroir reste dans
   le document, invisible mais tabulable — le focus au clavier partait dans un
   menu hors ecran. */
.tiroir[hidden] { display: none; }
.tiroir.est-ouvert { transform: translateX(0); }
.tiroir__entete {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--r4);
	padding: var(--r4) var(--r5);
	border-bottom: 1px solid var(--bord);
	position: sticky;
	top: 0;
	background: var(--surface);
}
.tiroir__corps { padding: var(--r5); }
.tiroir__lien {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--r4);
	padding: .95rem .25rem;
	border-bottom: 1px solid var(--bord);
	color: var(--encre);
	font-weight: 550;
	text-decoration: none;
}
.tiroir__lien:hover { color: var(--action-texte); }
.tiroir__lien i { color: var(--encre-tertiaire); }

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

.fil-ariane { padding-block: var(--r4); font-size: .875rem; }
.fil-ariane ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .4rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.fil-ariane li { display: flex; align-items: center; gap: .4rem; margin: 0; }
.fil-ariane li:not(:last-child)::after {
	content: "";
	width: 5px; height: 5px;
	border-right: 1.5px solid var(--bord-fort);
	border-bottom: 1.5px solid var(--bord-fort);
	transform: rotate(-45deg);
}
/* Cible tactile portee a 32 px : ces liens sont courts et serres, et se situent
   juste sous l'entete — la zone la plus souvent effleuree au pouce. */
.fil-ariane a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	color: var(--encre-tertiaire);
	text-decoration: none;
}
.fil-ariane a:hover { color: var(--encre); text-decoration: underline; }
.fil-ariane [aria-current="page"] { display: inline-flex; align-items: center; min-height: 32px; }
.fil-ariane [aria-current="page"] { color: var(--encre-douce); font-weight: 550; }

/* -----------------------------------------------------------------------------
   7. Bandeau d'accueil
   -------------------------------------------------------------------------- */

.heros {
	position: relative;
	background: var(--ecorce);
	color: #fff;
	overflow: hidden;
}

/* Carrousel.
   Chaque diapositive est masquee par l'attribut hidden lorsqu'elle n'est pas
   active : ses images ne sont alors pas telechargees, et sans JavaScript la
   premiere reste affichee — le bandeau garde tout son sens, il ne defile pas.
   La hauteur minimale identique pour toutes evite que la page saute au
   changement de diapositive, alors meme que les textes n'ont pas la meme
   longueur d'une gamme a l'autre. */
.heros__diapo {
	position: relative;
	display: flex;
	align-items: center;
	/* La borne basse est calee sur la diapositive au texte le plus long : en
	   dessous, la page sautait de 29 px sur mobile en passant a la troisieme. */
	min-height: clamp(510px, 46vw, 620px);
}
.heros__diapo[hidden] { display: none; }
.heros__diapo > .conteneur { width: 100%; }

.heros__media { position: absolute; inset: 0; }
.heros__media img { width: 100%; height: 100%; object-fit: cover; opacity: .48; }
.heros__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(28, 23, 20, .92) 0%, rgba(28, 23, 20, .74) 45%, rgba(28, 23, 20, .35) 100%);
}
.heros__interieur {
	position: relative;
	padding-block: clamp(var(--r7), 7vw, 6rem);
	max-width: 42rem;
}
.heros__titre { color: #fff; margin-bottom: var(--r4); font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); }
.heros p { color: #E4DBD2; font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); margin-bottom: var(--r6); }
.heros__actions { display: flex; flex-wrap: wrap; gap: var(--r3); }

/* Apparition de la diapositive entrante. Volontairement breve et sans
   deplacement lateral : un bandeau qui glisse fait perdre la lecture. */
.heros__diapo.entre .heros__interieur { animation: diapo-entre 420ms cubic-bezier(.2, 0, .2, 1) both; }
.heros__diapo.entre .heros__media img { animation: diapo-fond 900ms cubic-bezier(.2, 0, .2, 1) both; }

@keyframes diapo-entre {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: none; }
}
@keyframes diapo-fond {
	from { opacity: 0; transform: scale(1.04); }
	to   { opacity: .48; transform: none; }
}

/* Commandes */
.heros__barre {
	position: absolute;
	left: 0; right: 0;
	bottom: clamp(var(--r4), 3vw, var(--r6));
	pointer-events: none;   /* seul le bloc de commandes reste cliquable */
}
.heros__commandes {
	display: inline-flex;
	align-items: center;
	gap: var(--r2);
	padding: .35rem;
	background: rgba(28, 23, 20, .55);
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 999px;
	backdrop-filter: blur(6px);
	pointer-events: auto;
}

.heros__fleche {
	display: grid;
	place-items: center;
	width: 40px; height: 40px;
	background: transparent;
	border: 0;
	border-radius: 50%;
	color: #fff;
	font-size: .85rem;
	cursor: pointer;
	transition: background-color var(--transition);
}
.heros__fleche:hover { background: rgba(255, 255, 255, .16); }

.heros__puces {
	display: flex;
	align-items: center;
	gap: .35rem;
	list-style: none;
	margin: 0;
	padding: 0 .25rem;
}
.heros__puces li { margin: 0; }

/* La puce est volontairement plus grande que sa barre visible : la cible
   tactile fait 40 px de haut, le trait n'en occupe que 4. */
.heros__puce {
	display: grid;
	place-items: center;
	width: 34px; height: 40px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}
.heros__puce-barre {
	display: block;
	width: 26px; height: 4px;
	background: rgba(255, 255, 255, .38);
	border-radius: 999px;
	transition: background-color var(--transition), width var(--transition);
}
.heros__puce:hover .heros__puce-barre { background: rgba(255, 255, 255, .6); }
.heros__puce[aria-current="true"] .heros__puce-barre { background: var(--action); width: 34px; }

@media (max-width: 520px) {
	.heros__fleche { width: 38px; height: 38px; }
	.heros__pause { display: none; }   /* la barre resterait plus large que l'ecran */
}

@media (prefers-reduced-motion: reduce) {
	.heros__diapo.entre .heros__interieur,
	.heros__diapo.entre .heros__media img { animation: none; }
}

.sur-titre {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin-bottom: var(--r4);
	padding: .35rem .85rem;
	background: rgba(150, 215, 0, .15);
	border: 1px solid rgba(150, 215, 0, .35);
	border-radius: 999px;
	color: var(--action);
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .02em;
}

/* -----------------------------------------------------------------------------
   8. Réassurance
   -------------------------------------------------------------------------- */

.reassurance {
	display: grid;
	gap: 1px;
	background: var(--bord);
	border: 1px solid var(--bord);
	border-radius: var(--arr-l);
	overflow: hidden;
}
@media (min-width: 640px)  { .reassurance { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .reassurance { grid-template-columns: repeat(4, 1fr); } }

.reassurance__item {
	display: flex;
	gap: var(--r3);
	padding: var(--r5);
	background: var(--surface);
}
.reassurance__icone {
	flex-shrink: 0;
	display: grid;
	place-items: center;
	width: 42px; height: 42px;
	background: var(--action-voile);
	color: var(--action-sombre);
	border-radius: var(--arr-m);
	font-size: 1.05rem;
}
.reassurance__titre { font-weight: 650; font-size: .9375rem; margin-bottom: .15rem; }
.reassurance__texte { font-size: .8125rem; color: var(--encre-tertiaire); line-height: 1.5; margin: 0; }

/* Version compacte, en liste : panier, commande, contact, accueil */
.reassurance-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--r3); }
.reassurance-liste li { display: flex; gap: .7rem; margin: 0; font-size: .9375rem; color: var(--encre-douce); }
.reassurance-liste i { color: var(--action-sombre); margin-top: .25rem; flex-shrink: 0; }
.reassurance-liste strong { color: var(--encre); font-weight: 620; }

/* Bandeau d'engagements de la fiche produit, sous la description.
   Grand écran : une colonne par engagement, séparées d'un filet. Entre les
   deux, les colonnes passent à la ligne en restant centrées, quel que soit
   leur nombre. Mobile : chaque engagement se lit en ligne, pictogramme à
   gauche — centrées sur 170 px, les phrases de détail feraient cinq lignes. */
.garanties {
	margin-top: var(--r7);
	padding: var(--r6) var(--r5);
	background: var(--surface);
	border: 1px solid var(--bord);
	border-radius: var(--arr-l);
}
.garanties__liste {
	display: grid;
	gap: var(--r5);
	margin: 0;
	padding: 0;
	list-style: none;
}
.garantie { display: flex; align-items: flex-start; gap: var(--r4); margin: 0; }
.garantie__icone {
	flex-shrink: 0;
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: var(--action-voile);
	color: var(--action-texte);
	font-size: 1.2rem;
}
.garantie__texte { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.garantie__titre {
	font-family: var(--titre);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--encre);
}
.garantie__detail { font-size: .875rem; line-height: 1.5; color: var(--encre-tertiaire); }

@media (min-width: 640px) {
	/* Un écart de colonne nul et un rembourrage latéral : trois colonnes
	   tiennent alors exactement dans 33,333 %. */
	.garanties__liste { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--r6) 0; }
	.garantie {
		flex: 0 0 33.333%;
		flex-direction: column;
		align-items: center;
		gap: var(--r3);
		padding-inline: var(--r4);
		text-align: center;
	}
	.garantie__icone { width: 3.5rem; height: 3.5rem; font-size: 1.35rem; }
}
/* Toutes sur une ligne seulement à partir de 1200 px : plus tôt, cinq colonnes
   feraient passer les titres eux-mêmes sur deux lignes. */
@media (min-width: 1200px) {
	.garanties { padding: var(--r7) var(--r4); }
	.garanties__liste { flex-wrap: nowrap; }
	.garantie { flex: 1 1 0; }
	.garantie + .garantie { border-left: 1px solid var(--bord); }
}

/* -----------------------------------------------------------------------------
   9. Cartes de catégorie
   -------------------------------------------------------------------------- */

/*
 * Mosaïque des catégories.
 *
 * Quatre vignettes identiques alignées ne hiérarchisent rien : le visiteur ne
 * sait pas par où commencer. La première carte occupe donc la hauteur de deux
 * rangées, et la dernière la largeur de deux colonnes. La composition reste
 * lisible parce qu'elle garde une trame régulière — elle ne se contente pas
 * d'être irrégulière.
 */
.categories { display: grid; gap: var(--r4); }
@media (min-width: 768px) { .categories { gap: var(--r5); } }

@media (min-width: 600px) {
	.categories--mosaique { grid-template-columns: repeat(2, 1fr); }
	/* Première et quatrième sur toute la largeur : à deux colonnes, quatre
	   cartes dont une double laisseraient sinon une case vide en bas. */
	.categories--mosaique .carte-categorie--vedette,
	.categories--mosaique .carte-categorie:nth-child(4) { grid-column: span 2; }
}
@media (min-width: 1024px) {
	.categories--mosaique {
		grid-template-columns: repeat(3, 1fr);
		/* La hauteur de rangée suit la largeur de l'écran. À 1920 px, une
		   rangée figée à 208 px donnait des cartes de 570 px de large pour
		   208 px de haut — presque des bandeaux. */
		grid-auto-rows: clamp(208px, 14vw, 280px);
	}
	.categories--mosaique .carte-categorie--vedette {
		grid-column: 1;
		grid-row: span 2;
	}
	/* La quatrième carte ferme la composition sur deux colonnes. */
	.categories--mosaique .carte-categorie:nth-child(4) { grid-column: span 2; }
}

.carte-categorie {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 240px;
	padding: var(--r5);
	background: var(--ecorce);
	border-radius: var(--arr-l);
	overflow: hidden;
	color: #fff;
	text-decoration: none;
	cursor: pointer;
	transition: box-shadow var(--transition);
}
.carte-categorie:hover { box-shadow: var(--ombre-3); color: #fff; }
.carte-categorie__media { position: absolute; inset: 0; }
.carte-categorie__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 400ms cubic-bezier(.2, 0, .2, 1);
}
.carte-categorie:hover .carte-categorie__media img { transform: scale(1.04); }
.carte-categorie__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(28, 23, 20, .92) 12%, rgba(28, 23, 20, .35) 62%, rgba(28, 23, 20, .12) 100%);
}
.carte-categorie__contenu { position: relative; }
.carte-categorie__nom {
	font-family: var(--titre);
	font-size: 1.3rem;
	font-weight: 600;
	margin-bottom: .2rem;
}
.carte-categorie--vedette .carte-categorie__nom { font-size: 1.75rem; }
.carte-categorie__texte {
	margin: .35rem 0 .1rem;
	max-width: 30ch;
	font-size: .9375rem;
	line-height: 1.45;
	color: #E2DAD1;
}

/* Prix d'entrée et nombre de produits, sur une ligne qui se replie. */
.carte-categorie__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .25rem .6rem;
	margin-top: .45rem;
}
.carte-categorie__prix {
	font-size: .9375rem;
	font-weight: 700;
	color: var(--action);
}
.carte-categorie__nombre { font-size: .8125rem; color: #CFC6BC; }

/*
 * Pastille d'icône : elle donne à chaque carte un repère immédiat, lisible
 * même quand la photographie est sombre ou chargée.
 */
.carte-categorie__icone {
	position: absolute;
	top: var(--r5); left: var(--r5);
	display: grid;
	place-items: center;
	width: 40px; height: 40px;
	background: rgba(20, 16, 13, .55);
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 12px;
	font-size: 1rem;
	color: var(--action);
	backdrop-filter: blur(4px);
	transition: background-color var(--transition), color var(--transition);
}
.carte-categorie:hover .carte-categorie__icone { background: var(--action); color: var(--sur-action); }
.carte-categorie__fleche {
	position: absolute;
	top: var(--r5); right: var(--r5);
	display: grid;
	place-items: center;
	width: 38px; height: 38px;
	/*
	 * Fond sombre, pas un voile blanc translucide : le haut de la carte n'est
	 * pas assombri par le dégradé, et une flèche blanche sur fond blanc — le
	 * cas des photos de catalogue détourées — devient invisible.
	 */
	background: rgba(20, 16, 13, .55);
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 50%;
	font-size: .85rem;
	color: #fff;
	backdrop-filter: blur(4px);
	transition: background-color var(--transition), color var(--transition);
}
.carte-categorie:hover .carte-categorie__fleche { background: var(--action); color: var(--sur-action); border-color: var(--action); }

/* -----------------------------------------------------------------------------
   9 bis. Bannière de page de catégorie
   -------------------------------------------------------------------------- */

/*
 * Le texte est posé sur la photographie plutôt qu'à côté : une colonne de
 * texte et une vignette séparées laissaient un grand vide et ne donnaient
 * aucune information utile. Ici la bannière porte le prix d'entrée, le nombre
 * de références et le délai de livraison — ce que le visiteur cherche avant
 * de faire défiler la liste.
 */
.banniere-cat {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 280px;
	padding: var(--r5);
	margin-bottom: var(--r6);
	background: var(--ecorce);
	border-radius: var(--arr-l);
	overflow: hidden;
	color: #fff;
}
.banniere-cat__media { position: absolute; inset: 0; }
.banniere-cat__media img { width: 100%; height: 100%; object-fit: cover; }
/*
 * Dégradé du bas vers le haut sur petit écran, de la gauche vers la droite sur
 * grand écran : le texte reste lisible sans jamais masquer le sujet de la
 * photographie.
 */
.banniere-cat__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top,
		rgba(24, 19, 15, .95) 6%,
		rgba(24, 19, 15, .72) 48%,
		rgba(24, 19, 15, .34) 100%);
}
.banniere-cat__contenu { position: relative; }

@media (min-width: 900px) {
	.banniere-cat { min-height: 340px; padding: var(--r6); }
	.banniere-cat__media::after {
		background: linear-gradient(to right,
			rgba(24, 19, 15, .94) 0%,
			rgba(24, 19, 15, .86) 38%,
			rgba(24, 19, 15, .30) 76%,
			rgba(24, 19, 15, .12) 100%);
	}
	.banniere-cat__contenu { max-width: 58%; }
}

.banniere-cat__icone {
	display: inline-grid;
	place-items: center;
	width: 44px; height: 44px;
	background: rgba(20, 16, 13, .55);
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 12px;
	font-size: 1.1rem;
	color: var(--action);
	backdrop-filter: blur(4px);
}
.banniere-cat__titre {
	margin: .7rem 0 .35rem;
	font-size: clamp(1.85rem, 4vw, 2.5rem);
	color: #fff;
}
.banniere-cat__texte {
	max-width: 54ch;
	margin: 0 0 var(--r4);
	color: #E6DED5;
}

.banniere-cat__faits {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.banniere-cat__fait {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .4rem .75rem;
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 999px;
	font-size: .875rem;
	backdrop-filter: blur(3px);
}
.banniere-cat__fait--prix {
	color: var(--action);
	font-weight: 700;
	background: rgba(150, 215, 0, .14);
	border-color: rgba(150, 215, 0, .45);
}

/* -----------------------------------------------------------------------------
   10. Cartes de produit
   -------------------------------------------------------------------------- */

.carte-produit {
	display: flex;
	flex-direction: column;
	background: var(--surface);
	border: 1px solid var(--bord);
	border-radius: var(--arr-l);
	overflow: hidden;
	transition: border-color var(--transition), box-shadow var(--transition);
}
.carte-produit:hover { border-color: var(--bord-fort); box-shadow: var(--ombre-2); }

.carte-produit__media {
	position: relative;
	aspect-ratio: 4 / 3;
	max-width: 100%;
	background: var(--surface-douce);
	overflow: hidden;
}
.carte-produit__media img { width: 100%; height: 100%; object-fit: cover; }

.carte-produit__corps {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: var(--r4);
	gap: .6rem;
}
.carte-produit__categorie {
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--bois);
}
.carte-produit__titre {
	font-family: var(--texte);
	font-size: 1rem;
	font-weight: 620;
	line-height: 1.35;
	margin: 0;
}
.carte-produit__titre a { color: var(--encre); text-decoration: none; }
/* La zone cliquable couvre toute la carte, sans imbriquer les liens */
.carte-produit__titre a::after { content: ""; position: absolute; inset: 0; }
.carte-produit { position: relative; }
.carte-produit__titre a:hover { color: var(--action-texte); }

/* Bloc de prix, puis bouton en pleine largeur dessous. */
.carte-produit__pied {
	display: flex;
	flex-direction: column;
	margin-top: auto;
	padding-top: var(--r2);
	margin-bottom: var(--r3);
}
/* min-width: min-content, et non 0.
   Sans contrainte, la mention de TVA — plus longue en allemand — imposait sa
   largeur entiere et poussait la carte au-dela de ses bords. Avec 0, c'est le
   prix lui-meme qui se faisait rogner. min-content laisse la mention de TVA se
   replier tout en garantissant que le montant reste entier : c'est la seule
   information de la carte qu'on ne peut pas couper. */
.carte-produit__prix { display: flex; flex-direction: column; min-width: min-content; }
.carte-produit__montant { font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
/* Sur sa propre ligne, sous le prix et le bouton. */
.carte-produit__tva { font-size: .75rem; color: var(--encre-tertiaire); margin-top: .3rem; }

/* Le bouton doit passer au-dessus de la zone cliquable du titre */
.carte-produit__ajout { position: relative; z-index: 1; width: 100%; margin-top: auto; }
.carte-produit__ajout .bouton { width: 100%; }

.etiquette {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .2rem .55rem;
	border-radius: var(--arr-s);
	font-size: .75rem;
	font-weight: 620;
	line-height: 1.5;
}
.etiquette--stock   { background: var(--succes-voile); color: var(--succes); }
.etiquette--commande{ background: var(--alerte-voile); color: var(--alerte); }
.etiquette--epuise  { background: var(--surface-douce); color: var(--encre-tertiaire); }
.etiquette--promo   { background: var(--action); color: var(--sur-action); }
.etiquette--flottante { position: absolute; top: var(--r3); left: var(--r3); z-index: 1; box-shadow: var(--ombre-1); }

/* Produits associés de la fiche : un bloc compact sous le détail.
   Six suggestions sont chargées. Mobile et tablette : elles défilent à
   l'horizontale, la carte suivante entamée pour annoncer la suite. Dès
   1024 px, une rangée de quatre, les deux dernières masquées ; dès 1440 px,
   les six. Jamais moins de quatre suggestions, et chaque rangée est pleine. */
.associes__titre { font-size: clamp(1.3rem, 1.1rem + .7vw, 1.75rem); margin-bottom: var(--r4); }
.associes__liste {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(14rem, 62%);
	gap: var(--r4);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	padding-bottom: var(--r2);
	scrollbar-width: thin;
}
.associes__liste > * { min-width: 0; scroll-snap-align: start; }
@media (min-width: 640px) { .associes__liste { grid-auto-columns: minmax(14rem, 38%); } }
@media (min-width: 1024px) {
	.associes__liste {
		grid-auto-flow: row;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		overflow: visible;
		padding-bottom: 0;
	}
	.associes__liste > :nth-child(n+5) { display: none; }
}
@media (min-width: 1440px) {
	.associes__liste { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.associes__liste > :nth-child(n+5) { display: flex; }
}
/* Cartes resserrées : une suggestion se survole, elle ne se détaille pas. */
.associes .carte-produit__corps { padding: var(--r3) var(--r3) var(--r4); }
.associes .carte-produit__titre { font-size: .9375rem; line-height: 1.35; }
.associes .carte-produit__montant { font-size: 1.125rem; }
.associes .etiquette--flottante { top: var(--r2); left: var(--r2); }
/* Prix, TVA et bouton alignés en bas de chaque carte, quelle que soit la
   longueur du titre : l'espace libre passe entièrement au-dessus du prix au
   lieu d'être partagé avec le bouton. */
.associes .carte-produit__ajout { margin-top: 0; }

/* -----------------------------------------------------------------------------
   Blog — mise en page de journal
   Deux motifs empruntés au métier : les cernes de croissance du bois, en
   filigrane sur les fonds écorce, et une rangée de dents de scie qui ferme
   l'en-tête. La typographie reste celle du site, poussée en grand format : le
   Source Serif des titres suffit à l'allure éditoriale, sans police de plus.
   Les cartes perdent leur cadre — photo, rubrique, titre, comme dans un
   magazine ; seule la une garde un encart blanc, posé sur sa photo.
   -------------------------------------------------------------------------- */

/* Couleur de chaque rubrique : pastille vive, libellé lisible sur fond clair. */
.rubrique--marche         { --rubrique: #96D700; --rubrique-texte: #4F7A00; }
.rubrique--foret          { --rubrique: #5FAE62; --rubrique-texte: #2E6B31; }
.rubrique--energie        { --rubrique: #E8913A; --rubrique-texte: #9A4A0B; }
.rubrique--reglementation { --rubrique: #C9A27C; --rubrique-texte: #7A5234; }

.blog-rubrique {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	color: var(--rubrique-texte, var(--encre-tertiaire));
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .09em;
	line-height: 1.3;
	text-transform: uppercase;
	text-decoration: none;
}
.blog-rubrique::before {
	content: "";
	flex-shrink: 0;
	width: .55rem;
	height: .55rem;
	border-radius: 50%;
	background: var(--rubrique, var(--bord-fort));
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--rubrique, #D3C6B7) 25%, transparent);
}
a.blog-rubrique:hover { text-decoration: underline; text-underline-offset: 4px; }

/* --- En-tête du journal ---------------------------------------------------- */

.journal-tete {
	position: relative;
	overflow: hidden;
	padding-block: var(--r7) calc(var(--r7) + 12px);
	color: #F6EFE7;
	background:
		radial-gradient(56rem 30rem at 88% 0%, rgba(176, 129, 89, .30), transparent 62%),
		repeating-radial-gradient(circle at 100% 0%, transparent 0 21px, rgba(246, 239, 231, .045) 21px 22px),
		var(--ecorce);
}
/* Place réservée à la photo de la une, qui remonte sur l'en-tête. */
.journal-tete--une { padding-bottom: calc(var(--r9) + var(--r7) + 12px); }
/* Grain léger : le fond ne fait pas « aplat numérique ». */
.journal-tete::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
/* Dents de scie : des triangles couleur de page, pointe vers le haut, qui
   découpent le bas de l'en-tête. */
.journal-tete::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -1px;
	left: 0;
	height: 12px;
	background: conic-gradient(from -45deg at 50% 100%, var(--fond) 90deg, transparent 0) 0 100% / 24px 12px repeat-x;
}
.journal-tete__interieur { position: relative; z-index: 1; }
.journal-tete__surtitre {
	display: flex;
	align-items: center;
	gap: .75rem;
	max-width: none;
	margin: 0 0 var(--r5);
	color: rgba(246, 239, 231, .7);
	font-size: .8125rem;
	font-weight: 650;
	letter-spacing: .16em;
	text-transform: uppercase;
}
.journal-tete__surtitre::before { content: ""; width: 2.5rem; height: 2px; background: var(--action); }
.journal-tete__titre {
	max-width: 15ch;
	margin-bottom: var(--r6);
	color: #FBF8F4;
	font-size: clamp(2.5rem, 1.4rem + 4.2vw, 5.25rem);
	line-height: 1;
	letter-spacing: -.03em;
}
.journal-tete__pied { display: grid; gap: var(--r5); margin-bottom: var(--r6); }
@media (min-width: 1024px) {
	.journal-tete__pied { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--r8); }
}
.journal-tete__intro {
	max-width: 52ch;
	margin: 0;
	color: rgba(246, 239, 231, .78);
	font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
	line-height: 1.6;
}
.journal-tete__chiffres { display: flex; flex-wrap: wrap; gap: var(--r4) 0; margin: 0; padding: 0; list-style: none; }
.journal-tete__chiffres li { display: grid; gap: .15rem; margin: 0; padding-right: var(--r5); }
.journal-tete__chiffres li + li { padding-left: var(--r5); border-left: 1px solid rgba(246, 239, 231, .16); }
.journal-tete__chiffres strong {
	color: #FFFFFF;
	font-family: var(--titre);
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}
.journal-tete__chiffres span { color: rgba(246, 239, 231, .6); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 599px) {
	/* Les trois chiffres tiennent sur une ligne : un chiffre rejeté seul sous les
	   autres gardait son filet de séparation, à gauche, sans rien à séparer. */
	.journal-tete__chiffres { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; }
	.journal-tete__chiffres li { padding-right: var(--r4); }
	.journal-tete__chiffres li + li { padding-left: var(--r4); }
	.journal-tete__chiffres strong { font-size: 1.35rem; }
	.journal-tete__chiffres span { font-size: .6875rem; letter-spacing: .05em; }
}

.journal-rubriques { display: flex; flex-wrap: wrap; gap: var(--r2); }
.journal-rubriques__lien {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	min-height: 44px;
	padding: .4rem .5rem .4rem 1rem;
	background: rgba(251, 248, 244, .04);
	border: 1px solid rgba(246, 239, 231, .2);
	border-radius: 999px;
	color: #F6EFE7;
	font-size: .9375rem;
	font-weight: 560;
	text-decoration: none;
	transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}
.journal-rubriques__lien::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--rubrique); }
.journal-rubriques__lien--tous::before { display: none; }
.journal-rubriques__lien:hover { background: rgba(251, 248, 244, .09); border-color: rgba(246, 239, 231, .45); color: #FFFFFF; }
.journal-rubriques__lien[aria-current="page"] { background: #FBF8F4; border-color: #FBF8F4; color: var(--ecorce); }
.journal-rubriques__nombre {
	min-width: 1.6rem;
	padding: .05rem .45rem;
	border-radius: 999px;
	background: rgba(246, 239, 231, .12);
	font-size: .75rem;
	font-weight: 700;
	text-align: center;
}
.journal-rubriques__lien[aria-current="page"] .journal-rubriques__nombre { background: var(--ecorce); color: #FBF8F4; }

/* --- Cartes ---------------------------------------------------------------- */

.blog-carte { position: relative; display: flex; flex-direction: column; min-width: 0; }
.blog-carte__media { overflow: hidden; aspect-ratio: 16 / 10; background: var(--surface-douce); border-radius: var(--arr-l); }
.blog-carte__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 800ms cubic-bezier(.2, .7, .2, 1); }
.blog-carte:hover .blog-carte__media img { transform: scale(1.05); }
.blog-carte__corps { display: flex; flex-direction: column; flex: 1; gap: .55rem; padding-top: var(--r4); }
.blog-carte__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .35rem 1rem;
	max-width: none;
	margin: 0;
	color: var(--encre-tertiaire);
	font-size: .8125rem;
}
.blog-carte__titre { margin: 0; font-size: 1.3rem; line-height: 1.2; letter-spacing: -.012em; }
.blog-carte__titre a {
	color: var(--encre);
	text-decoration: none;
	background: linear-gradient(var(--action), var(--action)) 0 100% / 0 2px no-repeat;
	transition: background-size 450ms cubic-bezier(.2, .7, .2, 1);
}
/* Toute la carte est cliquable, par un seul lien. */
.blog-carte__titre a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.blog-carte:hover .blog-carte__titre a { background-size: 100% 2px; }
.blog-carte__titre a:focus-visible { outline: none; }
.blog-carte:focus-within { outline: 2px solid var(--action-sombre); outline-offset: 6px; border-radius: var(--arr-l); }
.blog-carte__chapo {
	display: -webkit-box;
	overflow: hidden;
	margin: 0;
	color: var(--encre-douce);
	font-size: .9375rem;
	line-height: 1.65;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}
.blog-carte__suite {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin-top: var(--r2);
	color: var(--encre);
	font-size: .875rem;
	font-weight: 650;
}
.blog-carte__suite i { color: var(--action-texte); transition: transform var(--transition); }
.blog-carte:hover .blog-carte__suite i { transform: translateX(4px); }
.blog-carte__surtitre {
	display: flex;
	align-items: center;
	gap: .65rem;
	max-width: none;
	margin: 0;
	color: var(--bois);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.blog-carte__surtitre::before { content: ""; width: 1.75rem; height: 2px; background: var(--action); }

/* La une remonte sur l'en-tête ; sur grand écran, son texte se pose en encart
   sur le bord de la photo. Les éléments de grille se peignent dans l'ordre du
   document : l'encart passe devant la photo sans z-index, et le lien étendu
   de la carte continue de couvrir l'ensemble. */
.blog-carte--une .blog-carte__media { aspect-ratio: 16 / 10; border-radius: var(--arr-xl); box-shadow: var(--ombre-3); }
.blog-carte--une .blog-carte__titre { font-size: clamp(1.7rem, 1.15rem + 1.8vw, 2.75rem); line-height: 1.08; letter-spacing: -.02em; }
.blog-carte--une .blog-carte__chapo { font-size: 1.0625rem; -webkit-line-clamp: 5; }
@media (min-width: 960px) {
	.blog-carte--une { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: end; }
	.blog-carte--une .blog-carte__media { aspect-ratio: 4 / 3; }
	.blog-carte--une .blog-carte__corps {
		gap: var(--r3);
		margin: 0 0 var(--r7) calc(-1 * var(--r8));
		padding: var(--r6);
		background: var(--surface);
		border: 1px solid var(--bord);
		border-radius: var(--arr-xl);
		box-shadow: var(--ombre-3);
	}
}

.blog-carte--moyenne .blog-carte__media { aspect-ratio: 3 / 2; }
.blog-carte--moyenne .blog-carte__titre { font-size: clamp(1.35rem, 1.1rem + .8vw, 1.85rem); line-height: 1.15; }

.blog-carte--breve {
	display: grid;
	grid-template-columns: 6.5rem minmax(0, 1fr);
	gap: var(--r4);
	align-items: start;
	padding-block: var(--r4);
	border-bottom: 1px solid var(--bord);
}
@media (min-width: 600px) { .blog-carte--breve { grid-template-columns: 9.5rem minmax(0, 1fr); } }
.blog-carte--breve .blog-carte__media { aspect-ratio: 4 / 3; border-radius: var(--arr-m); }
.blog-carte--breve .blog-carte__corps { gap: .4rem; padding-top: 0; }
.blog-carte--breve .blog-carte__meta { gap: .25rem .75rem; font-size: .75rem; }
.blog-carte--breve .blog-carte__titre { font-size: 1.1rem; line-height: 1.3; }
.blog-carte--breve:focus-within { border-radius: var(--arr-m); }

/* --- Liste ----------------------------------------------------------------- */

/* Positionnée pour passer devant l'en-tête, sur lequel remonte la une. */
.journal { position: relative; z-index: 1; padding-block: var(--r7) var(--r8); }
.journal > .blog-carte--une { margin-top: calc(-1 * (var(--r7) + var(--r8))); }

.journal-duo { display: grid; gap: var(--r7) var(--r6); margin-top: var(--r8); }
.journal > .journal-duo:first-child { margin-top: 0; }
@media (min-width: 768px) { .journal-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .journal-duo { column-gap: var(--r8); } }

.journal-section__titre {
	display: flex;
	align-items: center;
	gap: var(--r4);
	margin-bottom: var(--r4);
	color: var(--encre-tertiaire);
	font-family: var(--texte);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.journal-section__titre::after { content: ""; flex: 1; height: 1px; background: var(--bord-fort); }

.journal-breves { margin-top: var(--r8); }
.journal-breves__liste { display: grid; column-gap: var(--r7); }
@media (min-width: 900px) { .journal-breves__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .journal-breves__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--r6); } }

/* Apparition échelonnée des cartes au chargement. */
@media (prefers-reduced-motion: no-preference) {
	.journal .blog-carte,
	.journal-trio .blog-carte {
		animation: journal-apparition 700ms cubic-bezier(.2, .7, .2, 1) both;
		animation-delay: calc(var(--ordre, 0) * 90ms);
	}
	.journal-tete__interieur > * { animation: journal-apparition 700ms cubic-bezier(.2, .7, .2, 1) both; }
	.journal-tete__interieur > :nth-child(2) { animation-delay: 70ms; }
	.journal-tete__interieur > :nth-child(3) { animation-delay: 140ms; }
	.journal-tete__interieur > :nth-child(4) { animation-delay: 210ms; }
}
@keyframes journal-apparition { from { opacity: 0; transform: translateY(16px); } }

.blog-vide {
	display: grid;
	justify-items: center;
	gap: var(--r3);
	padding: var(--r8) var(--r4);
	text-align: center;
	color: var(--encre-tertiaire);
}
.blog-vide > i { font-size: 2rem; color: var(--bois-clair); }

.blog-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--r2); margin-top: var(--r8); }
.blog-pagination a,
.blog-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 .8rem;
	background: var(--surface);
	border: 1px solid var(--bord-fort);
	border-radius: 999px;
	color: var(--encre);
	font-weight: 600;
	text-decoration: none;
}
.blog-pagination a:hover { border-color: var(--encre-tertiaire); }
.blog-pagination [aria-current="page"] { background: var(--ecorce); border-color: var(--ecorce); color: #FFFFFF; }

/* --- Engagement et abonnement ---------------------------------------------- */

.journal-promesse { margin-top: var(--r8); border-block: 1px solid var(--bord-fort); }
.journal-promesse__liste { display: grid; gap: var(--r5); margin: 0; padding: var(--r6) 0; list-style: none; }
@media (min-width: 900px) { .journal-promesse__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--r7); } }
.journal-promesse__liste li { display: flex; align-items: flex-start; gap: var(--r4); margin: 0; }
.journal-promesse__icone {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	background: var(--bois-voile);
	border: 1px solid #E8D9C6;
	border-radius: 50%;
	color: var(--bois);
}
.journal-promesse__liste strong { display: block; margin-bottom: .2rem; color: var(--encre); font-family: var(--titre); font-size: 1.125rem; font-weight: 600; }
.journal-promesse__liste li > span:last-child > span { display: block; color: var(--encre-douce); font-size: .9375rem; line-height: 1.55; }

.journal-abonnement {
	position: relative;
	overflow: hidden;
	display: grid;
	gap: var(--r5);
	align-items: center;
	margin-top: var(--r7);
	padding: var(--r6) var(--r5);
	border-radius: var(--arr-xl);
	color: #F6EFE7;
	background:
		radial-gradient(36rem 20rem at 0% 100%, rgba(150, 215, 0, .16), transparent 62%),
		repeating-radial-gradient(circle at 0% 100%, transparent 0 21px, rgba(246, 239, 231, .05) 21px 22px),
		var(--ecorce);
}
@media (min-width: 900px) {
	.journal-abonnement { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--r7); padding: var(--r7) var(--r8); }
}
.journal-abonnement__titre { margin-bottom: var(--r2); color: #FBF8F4; font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); }
.journal-abonnement__texte { margin: 0; color: rgba(246, 239, 231, .75); }
.journal-abonnement__formulaire { margin-top: 0; }
.journal-abonnement .champ__saisie,
.journal-abonnement .champ__saisie:focus { background: rgba(251, 248, 244, .08); border-color: rgba(246, 239, 231, .35); color: #FBF8F4; }
.journal-abonnement .champ__saisie::placeholder { color: rgba(246, 239, 231, .6); }

/* --- Article --------------------------------------------------------------- */

.blog-apercu {
	padding-block: var(--r3);
	background: var(--alerte-voile);
	border-bottom: 1px solid var(--alerte);
	color: var(--alerte);
	font-size: .9375rem;
	font-weight: 600;
}

/* Barre de progression de lecture, en amélioration progressive : seuls les
   navigateurs qui animent au défilement l'affichent. */
.article-progression { display: none; }
@supports (animation-timeline: scroll()) {
	.article-progression {
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		z-index: calc(var(--plan-entete) + 1);
		display: block;
		height: 3px;
		background: linear-gradient(90deg, var(--action), var(--action-fonce));
		transform: scaleX(0);
		transform-origin: 0 50%;
		pointer-events: none;
		animation: article-progression linear both;
		animation-timeline: scroll(root block);
	}
	@keyframes article-progression { to { transform: scaleX(1); } }
}
@media (prefers-reduced-motion: reduce) { .article-progression { display: none; } }

.article-tete {
	position: relative;
	overflow: hidden;
	padding-block: var(--r6) var(--r8);
	background: radial-gradient(48rem 26rem at 100% 0%, rgba(176, 129, 89, .14), transparent 65%), var(--fond);
	border-bottom: 1px solid var(--bord);
}
.article-tete::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: repeating-radial-gradient(circle at 100% 0%, transparent 0 21px, rgba(139, 94, 60, .07) 21px 22px);
	-webkit-mask-image: radial-gradient(circle at 100% 0%, #000 0, transparent 34rem);
	mask-image: radial-gradient(circle at 100% 0%, #000 0, transparent 34rem);
}
.article-tete__grille { position: relative; display: grid; gap: var(--r7); align-items: center; }
/* Le texte prend la plus grande part : les titres allemands alignent des mots
   composés (« Entwaldungsverordnung ») qu'une colonne étroite coupait mal. */
@media (min-width: 1024px) {
	.article-tete__grille { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: var(--r8); }
	.article-tete__grille--sans-photo { grid-template-columns: minmax(0, 1fr); }
}
.article-tete__grille--sans-photo .article-tete__texte { max-width: 48rem; }
.article-tete__rubrique { margin-bottom: var(--r4); }
.article-tete__titre {
	max-width: 28ch;
	margin-bottom: var(--r5);
	font-size: clamp(1.75rem, 1.2rem + 2.3vw, 3.1rem);
	line-height: 1.08;
	letter-spacing: -.022em;
	overflow-wrap: break-word;
	-webkit-hyphens: auto;
	hyphens: auto;
	hyphenate-limit-chars: 12 5 5;
}
.article-tete__chapo {
	max-width: 58ch;
	margin-bottom: var(--r5);
	color: var(--encre-douce);
	font-size: clamp(1.0625rem, .98rem + .35vw, 1.25rem);
	line-height: 1.65;
}
.article-tete__signature {
	display: flex;
	align-items: center;
	gap: var(--r3);
	padding-top: var(--r4);
	border-top: 1px solid var(--bord-fort);
}
.article-tete__avatar {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	background: var(--ecorce);
	border-radius: 50%;
	color: var(--action);
}
.article-tete__signature strong { display: block; color: var(--encre); font-size: .9375rem; }
.article-tete__meta { display: flex; flex-wrap: wrap; gap: .15rem .9rem; color: var(--encre-tertiaire); font-size: .8125rem; }
.article-tete__meta a { color: var(--action-texte); font-weight: 600; }

/* Un plateau veiné, décalé derrière la photo, comme une planche posée dessous.
   Le décalage est pris sur la marge intérieure de la figure : un plateau qui
   dépasserait de sa boîte déborderait dans la gouttière sur mobile. */
.article-tete__photo { position: relative; margin: 0; padding: 0 var(--r3) var(--r3) 0; }
.article-tete__photo::before {
	content: "";
	position: absolute;
	inset: var(--r5) 0 0 var(--r5);
	background: repeating-linear-gradient(90deg, #EFE3D4 0 1px, transparent 1px 9px), var(--bois-voile);
	border: 1px solid #E8D9C6;
	border-radius: var(--arr-xl);
}
.article-tete__photo picture { position: relative; display: block; }
.article-tete__photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--arr-xl);
	box-shadow: var(--ombre-3);
}
.article-tete__credit { position: relative; margin-top: var(--r4); color: var(--encre-tertiaire); font-size: .75rem; text-align: right; }
.article-tete__credit a { color: inherit; }

/* Petits liens de l'article : zone de toucher portée à 32 px par une marge
   intérieure que compense une marge négative, sans rien décaler. */
.article-tete__rubrique { padding-block: .55rem; margin-block: -.55rem calc(var(--r4) - .55rem); }
.article-tete__meta a { padding-block: .35rem; margin-block: -.35rem; }
.article-tete__credit a { display: inline-block; padding-block: .55rem; margin-block: -.55rem; }
.article-sources__liste a { padding-block: .3rem; margin-block: -.3rem; }

.article-corps { display: grid; gap: var(--r6); padding-block: var(--r7) var(--r8); }
@media (min-width: 1024px) {
	.article-corps { grid-template-columns: 14rem minmax(0, 44rem); justify-content: center; gap: var(--r8); }
}
.article-corps__texte { min-width: 0; }
.article-corps__cote { display: none; }
@media (min-width: 1024px) {
	.article-corps__cote { position: sticky; top: 112px; display: block; align-self: start; }
}
.article-sommaire__titre {
	max-width: none;
	margin: 0 0 var(--r3);
	color: var(--encre-tertiaire);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.article-sommaire ol { margin: 0 0 var(--r5); padding: 0; list-style: none; border-left: 2px solid var(--bord); counter-reset: sommaire; }
.article-sommaire li { margin: 0; counter-increment: sommaire; }
.article-sommaire a {
	display: grid;
	grid-template-columns: 1.6rem minmax(0, 1fr);
	margin-left: -2px;
	padding: .45rem 0 .45rem .85rem;
	border-left: 2px solid transparent;
	color: var(--encre-douce);
	font-size: .875rem;
	line-height: 1.4;
	text-decoration: none;
	transition: color var(--transition), border-color var(--transition);
}
.article-sommaire a::before {
	content: counter(sommaire, decimal-leading-zero);
	padding-top: .12em;
	color: var(--encre-tertiaire);
	font-size: .75rem;
	font-variant-numeric: tabular-nums;
}
.article-sommaire a:hover { border-left-color: var(--action); color: var(--encre); }
.article-retour {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	min-height: 44px;
	color: var(--encre);
	font-size: .875rem;
	font-weight: 650;
	text-decoration: none;
}
.article-retour:hover { color: var(--action-texte); }

/* Texte : lettrine, intertitres numérotés, puces en losange. Le texte porte
   aussi .prose--document, dont les règles viennent plus loin dans la feuille :
   le double sélecteur .prose.article-texte leur passe devant. */
.prose.article-texte { color: var(--encre-douce); font-size: 1.125rem; line-height: 1.8; counter-reset: intertitre; }
.article-texte > p:first-child { color: var(--encre); font-size: 1.25rem; line-height: 1.7; }
.article-texte > p:first-child::first-letter {
	float: left;
	margin: .06em .14em 0 0;
	color: var(--bois);
	font-family: var(--titre);
	font-size: 3.6em;
	font-weight: 600;
	line-height: .8;
}
.prose.article-texte .doc__section {
	margin-top: var(--r8);
	padding-top: 0;
	border-top: 0;
	counter-increment: intertitre;
	font-size: clamp(1.45rem, 1.2rem + .8vw, 1.9rem);
	line-height: 1.18;
	letter-spacing: -.015em;
	scroll-margin-top: 120px;
}
.article-texte .doc__section::before {
	content: counter(intertitre, decimal-leading-zero);
	display: block;
	width: 2.25rem;
	margin-bottom: var(--r3);
	padding-bottom: .4rem;
	border-bottom: 2px solid var(--action);
	color: var(--action-texte);
	font-family: var(--texte);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .1em;
}
.prose.article-texte ul { padding-left: 0; list-style: none; }
.prose.article-texte ul > li { position: relative; padding-left: 1.6rem; }
.article-texte ul > li::before {
	content: "";
	position: absolute;
	top: .68em;
	left: .25rem;
	width: .45rem;
	height: .45rem;
	background: var(--action);
	transform: rotate(45deg);
}
.prose.article-texte a {
	color: var(--action-texte);
	font-weight: 560;
	text-decoration-color: color-mix(in srgb, var(--action-texte) 45%, transparent);
	text-decoration-thickness: 1.5px;
}
.prose.article-texte a:hover { text-decoration-color: currentColor; }
.prose.article-texte table { margin-block: var(--r5) var(--r6); box-shadow: var(--ombre-1); font-size: .9375rem; line-height: 1.55; }
.article-texte thead th {
	background: var(--ecorce);
	border-bottom: 0;
	color: #F6EFE7;
	font-size: .75rem;
	font-weight: 650;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.article-texte thead th:first-child { border-top-left-radius: calc(var(--arr-m) - 1px); }
.article-texte thead th:last-child { border-top-right-radius: calc(var(--arr-m) - 1px); }
@media (max-width: 560px) {
	/* Le tableau s'empile : l'intitulé de chaque ligne suffit, l'en-tête de
	   colonnes reste pour les lecteurs d'écran. */
	.article-texte thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

.article-sources {
	position: relative;
	overflow: hidden;
	margin-top: var(--r8);
	padding: var(--r6) var(--r5) var(--r5);
	background: var(--surface);
	border: 1px solid var(--bord);
	border-radius: var(--arr-l);
	scroll-margin-top: 120px;
}
.article-sources::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--action), var(--bois-clair));
}
@media (min-width: 640px) { .article-sources { padding: var(--r6); } }
.article-sources__titre { display: flex; align-items: center; gap: .6rem; margin-bottom: var(--r3); font-size: 1.35rem; }
.article-sources__titre i { color: var(--action-texte); font-size: 1rem; }
.article-sources__liste { margin: 0; padding: 0; list-style: none; counter-reset: source; }
.article-sources__liste li {
	display: grid;
	grid-template-columns: 2rem minmax(0, 1fr);
	column-gap: .75rem;
	margin: 0;
	padding-block: .85rem;
	border-top: 1px dashed var(--bord-fort);
	counter-increment: source;
	font-size: .9375rem;
	line-height: 1.5;
}
.article-sources__liste li::before {
	content: counter(source);
	grid-row: 1 / span 3;
	display: grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	background: var(--bois-voile);
	border-radius: 50%;
	color: var(--bois);
	font-size: .75rem;
	font-weight: 700;
}
.article-sources__editeur { grid-column: 2; color: var(--encre-tertiaire); font-size: .6875rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.article-sources__liste a { grid-column: 2; color: var(--encre); font-weight: 580; text-decoration-color: var(--bord-fort); overflow-wrap: anywhere; }
.article-sources__liste a:hover { color: var(--action-texte); text-decoration-color: currentColor; }
.article-sources__liste time { grid-column: 2; color: var(--encre-tertiaire); font-size: .8125rem; }
.article-sources__note {
	max-width: none;
	margin: var(--r3) 0 0;
	padding-top: var(--r3);
	border-top: 1px solid var(--bord);
	color: var(--encre-tertiaire);
	font-size: .8125rem;
}

.article-appel {
	position: relative;
	overflow: hidden;
	display: grid;
	gap: var(--r4);
	align-items: center;
	margin-top: var(--r7);
	padding: var(--r6) var(--r5);
	border-radius: var(--arr-xl);
	color: #F6EFE7;
	background:
		radial-gradient(30rem 16rem at 100% 100%, rgba(150, 215, 0, .16), transparent 60%),
		repeating-radial-gradient(circle at 100% 100%, transparent 0 21px, rgba(246, 239, 231, .05) 21px 22px),
		var(--ecorce);
}
@media (min-width: 640px) { .article-appel { grid-template-columns: minmax(0, 1fr) auto; padding: var(--r6) var(--r7); } }
.article-appel__titre { margin-bottom: .35rem; color: #FBF8F4; font-size: clamp(1.3rem, 1.1rem + .7vw, 1.7rem); }
.article-appel__texte { margin: 0; color: rgba(246, 239, 231, .75); }

.journal-suite { padding-block: var(--r7) var(--r8); background: var(--surface-douce); border-top: 1px solid var(--bord); }
.journal-trio { display: grid; gap: var(--r6); }
@media (min-width: 768px) { .journal-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.journal-trio .blog-carte__titre { font-size: 1.25rem; }
.journal-trio .blog-carte__chapo { -webkit-line-clamp: 2; }

/* -----------------------------------------------------------------------------
   11. Fiche produit
   -------------------------------------------------------------------------- */

.produit { display: grid; gap: var(--r6); align-items: start; }
/* Un element de grille vaut min-width:auto par defaut : sa largeur minimale
   est celle de son contenu. L'image principale, large de 900 px en intrinseque,
   forcait donc la colonne a 450 px sur un ecran de 390 px, et toute la page
   debordait. min-width:0 rend la colonne libre de retrecir. */
.produit > * { min-width: 0; }
@media (min-width: 960px) {
	.produit { grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr); gap: var(--r7); }
}

.galerie__principale {
	position: relative;
	aspect-ratio: 4 / 3;
	max-width: 100%;
	background: var(--surface);
	border: 1px solid var(--bord);
	border-radius: var(--arr-l);
	overflow: hidden;
}
.galerie__principale img { width: 100%; height: 100%; object-fit: cover; }
.galerie__vignettes {
	display: flex;
	gap: var(--r2);
	margin-top: var(--r3);
	overflow-x: auto;
	padding-bottom: .25rem;
	scrollbar-width: thin;
}
.galerie__vignette {
	flex: 0 0 84px;
	aspect-ratio: 1;
	padding: 0;
	background: var(--surface);
	border: 2px solid var(--bord);
	border-radius: var(--arr-m);
	overflow: hidden;
	cursor: pointer;
	transition: border-color var(--transition);
}
.galerie__vignette img { width: 100%; height: 100%; object-fit: cover; }
.galerie__vignette:hover { border-color: var(--bord-fort); }
.galerie__vignette[aria-current="true"] { border-color: var(--action-sombre); }

/* Bloc d'achat — la colonne qui porte la conversion */
.achat {
	background: var(--surface);
	border: 1px solid var(--bord);
	border-radius: var(--arr-l);
	padding: var(--r5);
	box-shadow: var(--ombre-1);
}
@media (min-width: 960px) {
	.achat { position: sticky; top: 96px; }
}

.achat__entete { margin-bottom: var(--r4); }
.achat__reference { font-size: .8125rem; color: var(--encre-tertiaire); margin-bottom: .35rem; }
.achat h1 { font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem); margin-bottom: var(--r3); }

.achat__prix-bloc {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: .6rem;
	margin-bottom: .3rem;
}
.achat__prix { font-size: 2.1rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.achat__prix-barre { font-size: 1.1rem; color: var(--encre-tertiaire); text-decoration: line-through; }
.achat__tva { font-size: .875rem; color: var(--encre-tertiaire); margin-bottom: var(--r4); }

.achat__stock { display: flex; align-items: center; gap: .5rem; margin-bottom: var(--r4); font-size: .9375rem; font-weight: 600; }
.achat__stock--dispo { color: var(--succes); }
.achat__stock--commande { color: var(--alerte); }
.achat__stock--epuise { color: var(--encre-tertiaire); }

.achat__livraison {
	display: flex;
	gap: .7rem;
	padding: var(--r3) var(--r4);
	margin-bottom: var(--r4);
	background: var(--info-voile);
	border-radius: var(--arr-m);
	font-size: .875rem;
	color: var(--encre-douce);
}
.achat__livraison i { color: var(--bois); margin-top: .2rem; }

.achat__ligne-achat { display: flex; gap: var(--r3); margin-bottom: var(--r4); }

.quantite {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--bord-champ);
	border-radius: var(--arr-m);
	overflow: hidden;
	background: var(--surface);
	flex-shrink: 0;
}
.quantite__bouton {
	width: 46px; height: 56px;
	display: grid;
	place-items: center;
	background: transparent;
	border: 0;
	color: var(--encre);
	font-size: .95rem;
	cursor: pointer;
	transition: background-color var(--transition);
}
.quantite__bouton:hover { background: var(--surface-douce); }
.quantite__champ {
	width: 52px; height: 56px;
	border: 0;
	border-inline: 1px solid var(--bord);
	text-align: center;
	font: inherit;
	font-weight: 650;
	font-size: 1rem;
	color: var(--encre);
	background: var(--surface);
	-moz-appearance: textfield;
}
.quantite__champ::-webkit-outer-spin-button,
.quantite__champ::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }


/* Choix de déclinaison */
.variantes { margin-bottom: var(--r4); }
.variantes__titre { font-size: .9375rem; font-weight: 650; margin-bottom: .2rem; }
.variantes__aide { font-size: .8125rem; color: var(--encre-tertiaire); margin-bottom: var(--r3); }
.variantes__options { display: grid; gap: var(--r2); }
.variante-option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--r3);
	padding: .8rem 1rem;
	background: var(--surface);
	border: 1.5px solid var(--bord);
	border-radius: var(--arr-m);
	cursor: pointer;
	transition: border-color var(--transition), background-color var(--transition);
}
.variante-option:hover { border-color: var(--bord-fort); }
.variante-option:has(input:checked) { border-color: var(--action-sombre); background: var(--action-voile); }
.variante-option input { accent-color: var(--action-sombre); width: 18px; height: 18px; flex-shrink: 0; }
.variante-option__libelle { flex: 1; font-size: .9375rem; font-weight: 550; }
.variante-option__prix { font-weight: 650; white-space: nowrap; }

/* Onglets d'information */
.onglets { margin-top: var(--r7); }
.onglets__barre {
	display: flex;
	gap: var(--r1);
	border-bottom: 1px solid var(--bord);
	overflow-x: auto;
	margin-bottom: var(--r5);
}
.onglets__bouton {
	padding: .85rem 1.1rem;
	background: none;
	border: 0;
	border-bottom: 2.5px solid transparent;
	color: var(--encre-tertiaire);
	font: inherit;
	font-weight: 600;
	font-size: .9375rem;
	white-space: nowrap;
	cursor: pointer;
	transition: color var(--transition), border-color var(--transition);
}
.onglets__bouton:hover { color: var(--encre); }
.onglets__bouton[aria-selected="true"] { color: var(--encre); border-bottom-color: var(--action); }
.onglets__panneau[hidden] { display: none; }

.prose { max-width: 72ch; color: var(--encre-douce); }
.prose h2 { font-size: 1.45rem; margin-top: var(--r6); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.15rem; margin-top: var(--r5); color: var(--encre); }
.prose p { margin-bottom: var(--r4); }
.prose ul { padding-left: 1.15rem; }
.prose li { margin-bottom: .5rem; }
.prose strong { color: var(--encre); }
.prose a { font-weight: 550; }

/* Description de la fiche : toute la largeur, sans lignes interminables.
   Les blocs se rangent sur deux colonnes (45 à 80 caractères par ligne) ; le
   titre et le bloc de données prennent la largeur entière. Un bloc élargi
   pour ne pas laisser de trou (marque plein2 : voir description_blocs())
   répartit son texte en sous-colonnes, espacées comme la grille et donc
   alignées sur elle : sa longueur de ligne ne change pas.
   La grille est portée par un enfant du panneau et non par le panneau : un
   display posé sur celui-ci l'emporterait sur son attribut hidden. */
.fiche-desc {
	--fiche-ecart: var(--r6);
	max-width: none;
	display: grid;
	gap: var(--r6) var(--fiche-ecart);
}
.fiche-desc p { max-width: none; }
.fiche-desc__bloc { min-width: 0; column-gap: var(--fiche-ecart); }
.fiche-desc__bloc > :first-child { margin-top: 0; }
.fiche-desc__bloc > :last-child { margin-bottom: 0; }
.fiche-desc__bloc > h3 { column-span: all; }
/* Rapproche le titre des blocs qu'il chapeaute. */
.fiche-desc__bloc--titre { margin-bottom: calc(var(--r3) - var(--r6)); }
/* Deux colonnes dès la tablette : sur une seule, la ligne y dépassait 90 caractères. */
@media (min-width: 768px) {
	.fiche-desc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.fiche-desc__bloc--titre,
	.fiche-desc__bloc--large,
	.fiche-desc__bloc--plein2 { grid-column: 1 / -1; }
	.fiche-desc__bloc--plein2 { columns: 2; }
}
@media (min-width: 960px) { .fiche-desc { --fiche-ecart: var(--r7); } }
/* Dès 1440 px, la fiche occupe toute la largeur de l'écran, et deux colonnes
   de texte y dépasseraient 80 caractères par ligne. Le texte garde ses deux
   colonnes et le bloc de données en ouvre une troisième, à côté, sur toute la
   hauteur du texte : il reste sous les yeux pendant la lecture.
   Trois colonnes de texte ont été essayées : pour ne pas laisser de trou, il
   fallait étaler certains blocs sur deux colonnes, et leur texte coupé en deux
   se lisait comme deux blocs, dont l'un sans titre. */
@media (min-width: 1440px) {
	.fiche-desc--donnees { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.fiche-desc--donnees .fiche-desc__bloc--plein2 { grid-column: auto; columns: auto; }
	.fiche-desc--donnees .fiche-desc__bloc--large {
		grid-column: 3;
		grid-row: var(--debut, 2) / span var(--rangees, 1);
		align-self: start;
		position: sticky;
		top: 96px;
	}
}

/* Fiches libellé / valeur : données de la description et onglet
   Caractéristiques. La grille ajoute des fiches par rangée à mesure que la
   place grandit, au lieu d'étirer une liste à puces ou un tableau.
   Classe fiche-caracteristiques et non caracteristiques : cette dernière
   habille le tableau de la page de confirmation de commande. */
.fiche-desc__bloc--large ul,
.fiche-caracteristiques {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
	gap: var(--r2);
	margin: 0;
	padding: 0;
	list-style: none;
}
.fiche-desc__bloc--large li,
.fiche-caracteristiques__item {
	margin: 0;
	padding: .75rem 1rem;
	background: var(--surface);
	border: 1px solid var(--bord);
	border-radius: var(--arr-m);
	color: var(--encre);
}
.fiche-desc__bloc--large li > strong:first-child,
.fiche-caracteristiques dt {
	display: block;
	margin-bottom: .15rem;
	font-size: .8125rem;
	font-weight: 600;
	color: var(--encre-tertiaire);
}
.fiche-caracteristiques dd { margin: 0; overflow-wrap: anywhere; }

/* Onglet Livraison et retour : ses deux sections côte à côte, les liens dessous. */
.fiche-livraison { max-width: none; display: grid; gap: var(--r5) var(--r7); }
.fiche-livraison > div > :first-child { margin-top: 0; }
.fiche-livraison ul { margin-bottom: 0; }
@media (min-width: 768px) {
	.fiche-livraison { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.fiche-livraison__liens { grid-column: 1 / -1; }
}

/* Tableau de caractéristiques */
.caracteristiques {
	width: 100%;
	border-collapse: collapse;
	font-size: .9375rem;
}
.caracteristiques th, .caracteristiques td {
	padding: .8rem 1rem;
	text-align: left;
	border-bottom: 1px solid var(--bord);
	vertical-align: top;
}
.caracteristiques th { width: 42%; font-weight: 600; color: var(--encre-douce); }
.caracteristiques td { color: var(--encre); }
.caracteristiques tr:nth-child(odd) { background: var(--surface-douce); }
/* position: relative n'est pas décoratif : un libellé .visuellement-cache posé
   dans une cellule est en position absolue. Sans bloc conteneur positionné ici,
   il se placerait par rapport à la page, à sa position statique dans un tableau
   plus large que l'écran — et ferait défiler tout le document à l'horizontale. */
.tableau-defilant { overflow-x: auto; position: relative; border-radius: var(--arr-m); border: 1px solid var(--bord); }

/* Barre d'achat mobile, ancrée en bas */
.barre-achat-mobile {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: var(--plan-sticky);
	display: flex;
	align-items: center;
	gap: var(--r3);
	padding: var(--r3) var(--gouttiere);
	padding-bottom: calc(var(--r3) + env(safe-area-inset-bottom));
	background: var(--surface);
	border-top: 1px solid var(--bord);
	box-shadow: 0 -4px 16px rgba(28, 23, 20, .08);
	transform: translateY(110%);
	transition: transform var(--transition);
}
.barre-achat-mobile.est-visible { transform: translateY(0); }
.barre-achat-mobile__prix { display: flex; flex-direction: column; line-height: 1.2; }
.barre-achat-mobile__montant { font-weight: 700; font-size: 1.15rem; }
.barre-achat-mobile__tva { font-size: .6875rem; color: var(--encre-tertiaire); }
.barre-achat-mobile .bouton { flex: 1; }
@media (min-width: 960px) { .barre-achat-mobile { display: none; } }

/* -----------------------------------------------------------------------------
   12. Panier
   -------------------------------------------------------------------------- */

.panier { display: grid; gap: var(--r6); align-items: start; }
.panier > * { min-width: 0; }   /* voir la note sur .produit > * */
@media (min-width: 960px) { .panier { grid-template-columns: minmax(0, 1fr) 380px; gap: var(--r7); } }

.panier-ligne {
	display: grid;
	grid-template-columns: 92px minmax(0, 1fr);
	gap: var(--r4);
	padding: var(--r4) 0;
	border-bottom: 1px solid var(--bord);
}
@media (min-width: 640px) { .panier-ligne { grid-template-columns: 120px minmax(0, 1fr); } }

.panier-ligne__media {
	aspect-ratio: 1;
	max-width: 100%;
	border-radius: var(--arr-m);
	overflow: hidden;
	background: var(--surface-douce);
	border: 1px solid var(--bord);
}
.panier-ligne__media img { width: 100%; height: 100%; object-fit: cover; }
.panier-ligne__corps { display: flex; flex-direction: column; gap: .5rem; }
.panier-ligne__titre { font-weight: 620; font-size: .9375rem; line-height: 1.4; }
.panier-ligne__titre a { color: var(--encre); text-decoration: none; }
.panier-ligne__titre a:hover { color: var(--action-texte); }
.panier-ligne__meta { font-size: .8125rem; color: var(--encre-tertiaire); }
.panier-ligne__pied {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--r3);
	flex-wrap: wrap;
	margin-top: auto;
}
.panier-ligne__total { font-weight: 700; font-size: 1.0625rem; }

.quantite--compacte .quantite__bouton { width: 38px; height: 42px; }
.quantite--compacte .quantite__champ { width: 44px; height: 42px; }

.recap {
	background: var(--surface);
	border: 1px solid var(--bord);
	border-radius: var(--arr-l);
	padding: var(--r5);
	box-shadow: var(--ombre-1);
}
@media (min-width: 960px) { .recap { position: sticky; top: 96px; } }
.recap h2 { font-size: 1.25rem; margin-bottom: var(--r4); }
.recap__ligne {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--r3);
	padding-block: .5rem;
	font-size: .9375rem;
}
.recap__ligne--total {
	margin-top: var(--r3);
	padding-top: var(--r4);
	border-top: 1px solid var(--bord);
	font-size: 1.3rem;
	font-weight: 700;
}
.recap__note { font-size: .8125rem; color: var(--encre-tertiaire); }
.recap__gratuit { color: var(--succes); font-weight: 620; }

/* Jauge de franco de port */
.franco {
	padding: var(--r4);
	margin-bottom: var(--r4);
	background: var(--action-voile);
	border: 1px solid var(--action-bord);
	border-radius: var(--arr-m);
	font-size: .875rem;
}
.franco--atteint { background: var(--succes-voile); border-color: #BFE0C2; color: var(--succes); font-weight: 600; }
.franco__barre {
	height: 7px;
	margin-top: .6rem;
	background: #fff;
	border-radius: 999px;
	overflow: hidden;
}
.franco__progression {
	height: 100%;
	background: var(--action);
	border-radius: 999px;
	transition: width 400ms cubic-bezier(.2, 0, .2, 1);
}

/* -----------------------------------------------------------------------------
   13. Formulaires et tunnel de commande
   -------------------------------------------------------------------------- */

.champ { margin-bottom: var(--r4); }
.champ__label {
	display: block;
	margin-bottom: .35rem;
	font-size: .875rem;
	font-weight: 600;
	color: var(--encre);
}
.champ__facultatif { font-weight: 400; color: var(--encre-tertiaire); }
.champ__aide { margin-top: .3rem; font-size: .8125rem; color: var(--encre-tertiaire); }
.champ__erreur { margin-top: .3rem; font-size: .8125rem; color: var(--erreur); font-weight: 550; }

.champ__saisie,
.champ__zone,
.champ__liste {
	width: 100%;
	min-height: 50px;
	padding: .7rem .9rem;
	background: var(--surface);
	border: 1.5px solid var(--bord-champ);
	border-radius: var(--arr-m);
	font: inherit;
	font-size: 1rem;   /* 16px : empêche le zoom automatique sur iOS */
	color: var(--encre);
	transition: border-color var(--transition), box-shadow var(--transition);
}
.champ__zone { min-height: 110px; resize: vertical; line-height: 1.6; }
.champ__saisie:focus, .champ__zone:focus, .champ__liste:focus {
	border-color: var(--action-sombre);
	box-shadow: 0 0 0 3px var(--action-voile);
	outline: none;
}
.champ--erreur .champ__saisie,
.champ--erreur .champ__zone,
.champ--erreur .champ__liste { border-color: var(--erreur); }
.champ__liste { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%234A403A' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 12px; padding-right: 2.5rem; }

.champs-groupe { display: grid; gap: 0 var(--r4); }
@media (min-width: 560px) { .champs-groupe--2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 560px) { .champs-groupe--npa { grid-template-columns: 140px 1fr; } }

.case {
	display: flex;
	align-items: flex-start;
	gap: .7rem;
	padding: .35rem 0;
	cursor: pointer;
	font-size: .9375rem;
	line-height: 1.55;
}
.case input {
	width: 20px; height: 20px;
	margin-top: .15rem;
	accent-color: var(--action-sombre);
	flex-shrink: 0;
	cursor: pointer;
}
/*
 * Les liens à l'intérieur d'une case à cocher — CGV, confidentialité — sont des
 * cibles tactiles à part entière. En ligne dans un texte de 15 px ils ne font
 * que 19 px de haut : au doigt, on coche la case en voulant ouvrir le document.
 * On les épaissit sans casser la ligne, en compensant par l'interligne.
 */
.case { line-height: 1.8; }
.case a {
	display: inline-block;
	padding-block: .4rem;
	line-height: 1.3;
}

.bloc-formulaire {
	background: var(--surface);
	border: 1px solid var(--bord);
	border-radius: var(--arr-l);
	padding: var(--r5);
	margin-bottom: var(--r5);
}
.bloc-formulaire h2 {
	display: flex;
	align-items: center;
	gap: .7rem;
	font-size: 1.2rem;
	margin-bottom: var(--r4);
}
.bloc-formulaire__numero {
	display: grid;
	place-items: center;
	width: 30px; height: 30px;
	background: var(--encre);
	color: #fff;
	border-radius: 50%;
	font-family: var(--texte);
	font-size: .875rem;
	font-weight: 700;
	flex-shrink: 0;
}

.paiement-option {
	display: flex;
	align-items: flex-start;
	gap: var(--r3);
	padding: var(--r4);
	border: 1.5px solid var(--action-sombre);
	background: var(--action-voile);
	border-radius: var(--arr-m);
}
.paiement-option__icone { color: var(--action-sombre); font-size: 1.2rem; margin-top: .1rem; }
.paiement-option__titre { font-weight: 650; margin-bottom: .2rem; }
.paiement-option__texte { font-size: .875rem; color: var(--encre-douce); margin: 0; }

/*
 * Souhait de livraison — jour et créneau, facultatifs.
 * Une carte claire à la fin du bloc d'adresse, juste avant le paiement. Les
 * boutons radio sont masqués visuellement (voir checkout.php) : pastilles et
 * cartes de créneau sont leurs libellés. 44 px de haut au moins, pour le doigt.
 */
.souhait-livraison {
	display: grid;
	gap: var(--r5);
	padding: var(--r5);
	background: var(--fond);
	border: 1px solid var(--bord);
	border-radius: var(--arr-m);
}
.souhait-livraison__groupe { min-width: 0; margin: 0; padding: 0; border: 0; }
.souhait-livraison__groupe legend { padding: 0; margin-bottom: var(--r3); }
.souhait-livraison__aide { margin: 0; font-size: .8125rem; color: var(--encre-tertiaire); }

.souhait-jour,
.souhait-creneau { position: relative; display: block; cursor: pointer; }

.souhait-jours { display: flex; flex-wrap: wrap; gap: var(--r2); }
.souhait-jour__libelle {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding-inline: 1.15rem;
	background: var(--surface);
	border: 1.5px solid var(--bord-fort);
	border-radius: 999px;
	font-size: .8125rem;
	font-weight: 650;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--encre-douce);
	transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

.souhait-creneaux { display: grid; gap: var(--r2); }
@media (min-width: 560px) { .souhait-creneaux { grid-template-columns: 1fr 1fr; } }
.souhait-creneau__carte {
	display: flex;
	align-items: center;
	gap: .7rem;
	min-height: 52px;
	padding: .7rem var(--r4);
	background: var(--surface);
	border: 1.5px solid var(--bord-fort);
	border-radius: var(--arr-m);
	font-size: .9375rem;
	font-weight: 550;
	color: var(--encre);
	transition: background-color var(--transition), border-color var(--transition);
}
/* Rond de sélection, dessiné : le vrai bouton radio est masqué. */
.souhait-creneau__carte::before {
	content: "";
	flex-shrink: 0;
	width: 18px; height: 18px;
	background: var(--surface);
	border: 1.5px solid var(--bord-champ);
	border-radius: 50%;
	transition: background-color var(--transition), border-color var(--transition);
}

.souhait-jour:hover .souhait-jour__libelle,
.souhait-creneau:hover .souhait-creneau__carte { border-color: var(--bord-champ); }

.souhait-jour input:checked + .souhait-jour__libelle {
	background: var(--action);
	border-color: var(--action);
	color: var(--sur-action);
}
.souhait-creneau input:checked + .souhait-creneau__carte {
	background: var(--action-voile);
	border-color: var(--action-sombre);
}
.souhait-creneau input:checked + .souhait-creneau__carte::before {
	background: var(--action-sombre);
	border-color: var(--action-sombre);
	box-shadow: inset 0 0 0 3px var(--surface);
}
.souhait-jour input:focus-visible + .souhait-jour__libelle,
.souhait-creneau input:focus-visible + .souhait-creneau__carte {
	outline: 3px solid var(--action-sombre);
	outline-offset: 2px;
}

/* Petit écran : les cinq jours tiennent sur deux lignes plutôt que trois. */
@media (max-width: 479px) {
	.souhait-livraison { padding: var(--r4); }
	.souhait-jour__libelle { padding-inline: .8rem; letter-spacing: .03em; }
}

/*
 * Mode de livraison — trois formules au choix, du colis léger à la palette
 * complète. Même principe que le souhait de livraison ci-dessus : un vrai
 * bouton radio masqué visuellement, la carte qui suit dessine l'état choisi.
 */
.mode-livraison { display: grid; gap: var(--r3); }
.mode-livraison__option { display: block; cursor: pointer; }
.mode-livraison__carte {
	display: flex;
	align-items: center;
	gap: var(--r3);
	padding: var(--r4);
	background: var(--surface);
	border: 1.5px solid var(--bord-fort);
	border-radius: var(--arr-m);
	transition: background-color var(--transition), border-color var(--transition);
}
.mode-livraison__icone {
	display: grid;
	place-items: center;
	width: 40px; height: 40px;
	flex-shrink: 0;
	background: var(--fond);
	border-radius: 50%;
	color: var(--encre-douce);
	font-size: 1.1rem;
}
.mode-livraison__texte { flex: 1; min-width: 0; }
.mode-livraison__titre { display: block; font-weight: 650; }
.mode-livraison__detail { display: block; font-size: .8125rem; color: var(--encre-tertiaire); margin-top: .15rem; }
.mode-livraison__prix { flex-shrink: 0; font-weight: 700; white-space: nowrap; }

.mode-livraison__option:hover .mode-livraison__carte { border-color: var(--bord-champ); }

.mode-livraison__option input:checked + .mode-livraison__carte {
	background: var(--action-voile);
	border-color: var(--action-sombre);
}
.mode-livraison__option input:checked + .mode-livraison__carte .mode-livraison__icone {
	background: var(--action-sombre);
	color: var(--sur-action);
}
.mode-livraison__option input:focus-visible + .mode-livraison__carte {
	outline: 3px solid var(--action-sombre);
	outline-offset: 2px;
}
.mode-livraison.champ--erreur .mode-livraison__carte { border-color: var(--erreur); }

/* Progression du tunnel */
.etapes {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin-bottom: var(--r6);
	font-size: .875rem;
	flex-wrap: wrap;
}
.etapes__item { display: flex; align-items: center; gap: .5rem; color: var(--encre-tertiaire); }
.etapes__puce {
	display: grid;
	place-items: center;
	width: 26px; height: 26px;
	border: 1.5px solid var(--bord-fort);
	border-radius: 50%;
	font-size: .75rem;
	font-weight: 700;
}
.etapes__item--actif { color: var(--encre); font-weight: 620; }
.etapes__item--actif .etapes__puce { background: var(--action); border-color: var(--action); color: var(--sur-action); }
.etapes__item--fait .etapes__puce { background: var(--succes); border-color: var(--succes); color: #fff; }
.etapes__trait { width: 24px; height: 1.5px; background: var(--bord-fort); }

/* -----------------------------------------------------------------------------
   13 bis. Pages documentaires — legales, aide, entreprise
   --------------------------------------------------------------------------
   Ces pages ne sont pas des pages de vente : elles doivent se lire, se
   parcourir et s'imprimer. D'ou une largeur de texte tenue, un sommaire
   lateral collant, et une hierarchie de titres nettement plus marquee que
   dans le reste du site — un document dense sans reperes visuels se
   parcourt mal, et c'est precisement ce qu'un client vient y faire.
   -------------------------------------------------------------------------- */

.doc-entete {
	background: var(--surface);
	border-bottom: 1px solid var(--bord);
	padding-block: var(--r5) var(--r6);
}

.doc-entete__groupe {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin-bottom: var(--r4);
	padding: .3rem .8rem;
	background: var(--bois-voile);
	border: 1px solid #E8D9C6;
	border-radius: 999px;
	color: var(--bois);
	font-size: .75rem;
	font-weight: 650;
	letter-spacing: .07em;
	text-transform: uppercase;
}

.doc-entete__titre {
	font-size: clamp(1.9rem, 1.4rem + 2.2vw, 2.9rem);
	margin-bottom: var(--r4);
	max-width: 22ch;
}

.doc-entete__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--r2) var(--r5);
	margin: 0;
	max-width: none;
	font-size: .8125rem;
	color: var(--encre-tertiaire);
}
.doc-entete__meta span { display: inline-flex; align-items: center; gap: .4rem; }
.doc-entete__meta i { color: var(--bois-clair); }

/* Deux colonnes : sommaire a gauche, document a droite. */
.doc {
	display: grid;
	gap: var(--r6);
	align-items: start;
	padding-block: var(--r6) var(--r8);
}
.doc > * { min-width: 0; }
@media (min-width: 1024px) {
	.doc { grid-template-columns: 264px minmax(0, 1fr); gap: var(--r7); }
}

/* --- Colonne laterale ------------------------------------------------------ */

.doc__cote { display: none; }
@media (min-width: 1024px) {
	.doc__cote {
		display: block;
		position: sticky;
		top: 96px;          /* hauteur de l'entete collante */
		max-height: calc(100vh - 120px);
		overflow-y: auto;
		overscroll-behavior: contain;
	}
}

.doc__cote-titre {
	font-family: var(--texte);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--encre-tertiaire);
	margin-bottom: var(--r3);
}

.doc__nav { margin-bottom: var(--r6); }
.doc__nav ul, .doc__nav ol { list-style: none; margin: 0; padding: 0; }
.doc__nav li { margin: 0; }

.doc__nav a {
	display: block;
	padding: .5rem .8rem;
	border-left: 2px solid var(--bord);
	color: var(--encre-douce);
	font-size: .9375rem;
	line-height: 1.45;
	text-decoration: none;
	transition: border-color var(--transition), color var(--transition), background-color var(--transition);
}
.doc__nav a:hover { border-left-color: var(--bord-fort); background: var(--surface-douce); color: var(--encre); }
.doc__nav a[aria-current="page"] {
	border-left-color: var(--action);
	background: var(--action-voile);
	color: var(--encre);
	font-weight: 620;
}

/* Le sommaire de la page se distingue de la liste des documents par sa
   numerotation : on sait ainsi qu'on navigue DANS la page, pas entre pages. */
.doc__nav--sommaire ol { counter-reset: sommaire; }
.doc__nav--sommaire a::before {
	counter-increment: sommaire;
	content: counter(sommaire) ".";
	display: inline-block;
	min-width: 1.4em;
	color: var(--encre-tertiaire);
	font-variant-numeric: tabular-nums;
}
.doc__nav--sommaire a { font-size: .875rem; }

/* Les CGV numerotent deja leurs articles : un second compteur donnerait
   « 1. 1. Champ d'application ». */
.doc__nav--sans-compteur a::before { content: none; }

.doc__imprimer { justify-content: flex-start; }

/* --- Sommaire replie, sur petits ecrans ------------------------------------ */

.doc__sommaire-mobile {
	margin-bottom: var(--r6);
	background: var(--surface);
	border: 1px solid var(--bord);
	border-radius: var(--arr-m);
	overflow: hidden;
}
@media (min-width: 1024px) { .doc__sommaire-mobile { display: none; } }

.doc__sommaire-mobile summary {
	display: flex;
	align-items: center;
	gap: .6rem;
	min-height: 52px;
	padding: .75rem 1rem;
	font-weight: 620;
	font-size: .9375rem;
	cursor: pointer;
	list-style: none;
}
.doc__sommaire-mobile summary::-webkit-details-marker { display: none; }
.doc__sommaire-mobile summary::after {
	content: "";
	width: 7px; height: 7px;
	margin-left: auto;
	border-right: 2px solid var(--encre-tertiaire);
	border-bottom: 2px solid var(--encre-tertiaire);
	transform: rotate(45deg);
	transition: transform var(--transition);
}
.doc__sommaire-mobile[open] summary::after { transform: rotate(-135deg); }
.doc__sommaire-mobile ol {
	margin: 0;
	padding: 0 1rem 1rem 2.4rem;
	border-top: 1px solid var(--bord);
	padding-top: .75rem;
}
/* Meme raison que pour le sommaire lateral : pas de double numerotation. */
.doc__sommaire-mobile--sans-compteur ol { list-style: none; padding-left: 1rem; }
.doc__sommaire-mobile li { margin-bottom: .2rem; }
.doc__sommaire-mobile a {
	display: inline-flex;
	align-items: center;
	min-height: 34px;
	color: var(--encre-douce);
	font-size: .9375rem;
	text-decoration: none;
}
.doc__sommaire-mobile a:hover { color: var(--action-texte); text-decoration: underline; }

/* --- Corps du document ----------------------------------------------------- */

.doc__corps { max-width: 74ch; }

.prose--document { color: var(--encre-douce); font-size: 1.0625rem; line-height: 1.75; }

/* Le titre de section porte un filet superieur : sur un document long, c'est
   ce qui donne au regard un point d'arret franc entre deux parties. */
.prose--document .doc__section {
	position: relative;
	margin-top: var(--r8);
	padding-top: var(--r5);
	border-top: 1px solid var(--bord);
	font-size: clamp(1.3rem, 1.15rem + .6vw, 1.6rem);
	scroll-margin-top: 110px;   /* l'entete collante ne doit pas masquer l'ancre */
}
.prose--document .doc__section:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* Ancre discrete, revelee au survol du titre. */
.doc__ancre {
	position: absolute;
	left: -1.1em;
	color: var(--bord-fort);
	text-decoration: none;
	opacity: 0;
	transition: opacity var(--transition);
}
.doc__section:hover .doc__ancre { opacity: 1; }
@media (max-width: 1023px) { .doc__ancre { display: none; } }

.prose--document h3 {
	margin-top: var(--r6);
	margin-bottom: var(--r3);
	font-size: 1.1rem;
	color: var(--encre);
}
.prose--document p { max-width: none; }
.prose--document ul, .prose--document ol { padding-left: 1.35rem; margin-bottom: var(--r5); }
.prose--document li { margin-bottom: .55rem; }
.prose--document li::marker { color: var(--bois-clair); }
.prose--document strong { color: var(--encre); font-weight: 650; }

/* Les listes ordonnees des procedures (« marche a suivre ») meritent des
   pastilles numerotees : ce sont des etapes, pas des items. */
.prose--document ol {
	list-style: none;
	counter-reset: etape;
	padding-left: 0;
}
.prose--document ol > li {
	counter-increment: etape;
	position: relative;
	padding-left: 2.6rem;
	margin-bottom: var(--r4);
}
.prose--document ol > li::before {
	content: counter(etape);
	position: absolute;
	left: 0; top: .1em;
	display: grid;
	place-items: center;
	width: 1.8rem; height: 1.8rem;
	background: var(--action-voile);
	border: 1px solid var(--action-bord);
	border-radius: 50%;
	color: var(--action-sombre);
	font-family: var(--texte);
	font-size: .8125rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* Tableaux : bordures franches et en-tetes de ligne lisibles. Sans cela, le
   tableau de ce qui est rembourse se lisait comme deux colonnes de texte. */
.prose--document table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	margin-bottom: var(--r5);
	font-size: .9375rem;
	border: 1px solid var(--bord);
	border-radius: var(--arr-m);
	overflow: hidden;
}
.prose--document th,
.prose--document td {
	padding: .85rem 1rem;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--bord);
}
.prose--document tr:last-child th,
.prose--document tr:last-child td { border-bottom: 0; }
.prose--document th[scope="row"] {
	width: 38%;
	background: var(--surface-douce);
	border-right: 1px solid var(--bord);
	color: var(--encre);
	font-weight: 650;
}
.prose--document td { background: var(--surface); }

@media (max-width: 560px) {
	/* Sous cette largeur, deux colonnes rendent chaque cellule illisible :
	   on empile l'intitule au-dessus de sa valeur. */
	.prose--document table, .prose--document tbody,
	.prose--document tr, .prose--document th, .prose--document td { display: block; width: auto; }
	.prose--document th[scope="row"] {
		width: auto;
		border-right: 0;
		border-bottom: 0;
		padding-bottom: .25rem;
		font-size: .8125rem;
		text-transform: uppercase;
		letter-spacing: .04em;
		color: var(--encre-tertiaire);
	}
	.prose--document td { padding-top: 0; }
	.prose--document tr { border-bottom: 1px solid var(--bord); }
	.prose--document tr:last-child { border-bottom: 0; }
}

/* Valeur pas encore renseignee : visible comme une consigne, pas comme un texte. */
.doc__a-completer {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	padding: .05rem .5rem;
	background: var(--alerte-voile);
	border: 1px dashed var(--alerte);
	border-radius: var(--arr-s);
	color: var(--alerte);
	font-size: .8125rem;
	font-weight: 620;
	white-space: nowrap;
}
.doc__a-completer::before { content: "\f071"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: .7em; }

/* --- Pied de document ------------------------------------------------------ */

.doc__pied { margin-top: var(--r8); }

.doc__aide {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--r4);
	padding: var(--r5);
	background: var(--bois-voile);
	border: 1px solid #E8D9C6;
	border-radius: var(--arr-l);
	margin-bottom: var(--r6);
}
.doc__aide-icone {
	display: grid;
	place-items: center;
	width: 46px; height: 46px;
	background: var(--surface);
	border-radius: 50%;
	color: var(--bois);
	font-size: 1.1rem;
	flex-shrink: 0;
}
.doc__aide > div:nth-child(2) { flex: 1 1 240px; }
.doc__aide-titre { font-family: var(--texte); font-size: 1.0625rem; font-weight: 650; margin-bottom: .2rem; }
.doc__aide-texte { font-size: .9375rem; color: var(--encre-douce); margin: 0; max-width: none; }

.doc__voir-aussi { margin-bottom: var(--r6); }

.doc__haut {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	min-height: 40px;
	color: var(--encre-tertiaire);
	font-size: .875rem;
	text-decoration: none;
}
.doc__haut:hover { color: var(--encre); }

/* --- Impression ------------------------------------------------------------ */

@media print {
	.doc-entete { border-bottom: 2px solid #000; padding-block: 0 1rem; }
	.doc-entete__groupe { border: 0; background: none; padding: 0; color: #555; }
	.doc { display: block; padding: 0; }
	.doc__cote, .doc__sommaire-mobile, .doc__aide, .doc__voir-aussi, .doc__haut { display: none; }
	.doc__corps { max-width: none; }
	.prose--document .doc__section { break-after: avoid; page-break-after: avoid; }
	.prose--document table { break-inside: avoid; page-break-inside: avoid; }
	.doc__a-completer { border: 1px solid #000; color: #000; background: none; }
}

/* -----------------------------------------------------------------------------
   14. Messages
   -------------------------------------------------------------------------- */

.message {
	display: flex;
	gap: var(--r3);
	padding: var(--r4);
	border-radius: var(--arr-m);
	margin-bottom: var(--r5);
	font-size: .9375rem;
	line-height: 1.6;
}
.message i { margin-top: .2rem; flex-shrink: 0; }
.message p:last-child { margin-bottom: 0; }
.message--succes { background: var(--succes-voile); color: #1B5E20; }
.message--succes i { color: var(--succes); }
.message--erreur { background: var(--erreur-voile); color: #8C1D18; }
.message--erreur i { color: var(--erreur); }
.message--info   { background: var(--info-voile); color: var(--encre-douce); }
.message--info i { color: var(--bois); }
.message--alerte { background: var(--alerte-voile); color: #7C3A06; }
.message--alerte i { color: var(--alerte); }

/* Notification d'ajout au panier */
.notification {
	position: fixed;
	z-index: var(--plan-message);
	left: var(--gouttiere);
	right: var(--gouttiere);
	bottom: var(--r4);
	display: flex;
	align-items: center;
	gap: var(--r3);
	padding: var(--r4);
	background: var(--encre);
	color: #fff;
	border-radius: var(--arr-m);
	box-shadow: var(--ombre-3);
	font-size: .9375rem;
	transform: translateY(140%);
	transition: transform 260ms cubic-bezier(.2, 0, .2, 1);
}
/* L'attribut hidden du HTML pose display:none, mais avec la specificite d'une
   regle du navigateur : la declaration display:flex ci-dessus l'emportait, et
   la notification restait affichee en permanence au milieu de la page. */
.notification[hidden] { display: none; }
.notification.est-visible { transform: translateY(0); }
.notification i { color: var(--action); font-size: 1.1rem; }
.notification a { color: var(--action); font-weight: 620; margin-left: auto; white-space: nowrap; }
@media (min-width: 640px) {
	.notification { left: auto; right: var(--r5); bottom: var(--r5); max-width: 420px; }
}
@media (min-width: 960px) {
	/* Au-dessus de la barre d'achat mobile quand elle existe */
	.notification { bottom: var(--r5); }
}

/* -----------------------------------------------------------------------------
   15. Avis
   -------------------------------------------------------------------------- */

.avis {
	display: flex;
	flex-direction: column;
	gap: var(--r3);
	padding: var(--r5);
	background: var(--surface);
	border: 1px solid var(--bord);
	border-radius: var(--arr-l);
	height: 100%;
}
.etoiles { display: inline-flex; gap: .15rem; color: #D99A00; font-size: .875rem; }
.etoiles i { line-height: 1; }
.avis__texte { font-size: .9375rem; color: var(--encre-douce); margin: 0; flex: 1; }
.avis__auteur { display: flex; align-items: center; gap: .6rem; font-size: .875rem; }
.avis__initiale {
	display: grid;
	place-items: center;
	width: 34px; height: 34px;
	background: var(--bois-voile);
	color: var(--bois);
	border-radius: 50%;
	font-weight: 700;
	font-size: .8125rem;
}
.avis__nom { font-weight: 620; }
.avis__lieu { color: var(--encre-tertiaire); font-size: .8125rem; }
.avis__verifie { display: inline-flex; align-items: center; gap: .3rem; font-size: .75rem; color: var(--succes); font-weight: 600; }

/* -----------------------------------------------------------------------------
   16. Pied de page
   -------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------
   Zone de livraison
   Avant le pied de page, sur les pages d'achat : la carte, et pour chaque pays
   les frais et le seuil de la livraison offerte. Fond sable accolé au pied de
   page sombre : la fin du contenu se marque sans bande vide entre les deux.
   -------------------------------------------------------------------------- */

.zone-livraison {
	padding-block: clamp(var(--r7), 5vw, var(--r8));
	background: var(--surface-douce);
	border-top: 1px solid var(--bord);
}
body:has(.zone-livraison) .pied { margin-top: 0; }

.zone-livraison__grille { display: grid; gap: var(--r6); align-items: center; }
@media (min-width: 900px) {
	.zone-livraison__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--r6); }
}
/* Grand écran : le texte garde une largeur de lecture, la carte prend le reste. */
@media (min-width: 1280px) {
	.zone-livraison__grille { grid-template-columns: minmax(0, 38rem) minmax(0, 1fr); gap: var(--r8); }
}
.zone-livraison__texte { min-width: 0; }
.zone-livraison__surtitre {
	display: flex;
	align-items: center;
	gap: .6rem;
	max-width: none;
	margin: 0 0 var(--r3);
	color: var(--bois);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.zone-livraison__titre { margin-bottom: var(--r3); font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); }
.zone-livraison__intro { max-width: 58ch; margin-bottom: var(--r5); color: var(--encre-douce); }

/* Le tableau garde ses colonnes sur mobile et défile dans son cadre si besoin. */
.zone-livraison__cadre {
	overflow-x: auto;
	margin-bottom: var(--r3);
	background: var(--surface);
	border: 1px solid var(--bord);
	border-radius: var(--arr-l);
}
.zone-livraison__tableau { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.zone-livraison__tableau th,
.zone-livraison__tableau td {
	padding: .7rem 1rem;
	border-bottom: 1px solid var(--bord);
	text-align: left;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.zone-livraison__tableau thead th {
	color: var(--encre-tertiaire);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.zone-livraison__tableau tbody tr:last-child > * { border-bottom: 0; }
.zone-livraison__tableau tbody th { color: var(--encre); font-weight: 600; }
.zone-livraison__code {
	display: inline-grid;
	place-items: center;
	min-width: 2.1rem;
	margin-right: .4rem;
	padding: .1rem .35rem;
	background: var(--ecorce);
	border-radius: var(--arr-s);
	color: #F6EFE7;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .04em;
}
.zone-livraison__lien {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	min-height: 44px;
	color: var(--action-texte);
	font-weight: 650;
}

/* La carte n'a ni cadre ni ombre : sa mer et ses pays voisins s'estompent vers
   les bords (masque dans le SVG), elle fait partie du bandeau au lieu d'y être
   posée. Sur grand écran, elle mord sur les marges du bandeau. */
.zone-livraison__carte { justify-self: center; width: 100%; max-width: 40rem; margin: 0; }
.zone-livraison__carte img { display: block; width: 100%; height: auto; }
@media (min-width: 900px) { .zone-livraison__carte { margin-block: calc(-1 * var(--r6)); } }
@media (max-width: 899px) { .zone-livraison__carte { max-width: 30rem; } }
@media (max-width: 560px) {
	/* Sur un téléphone, les trois colonnes tiennent sans défilement : le code
	   pays s'efface, le nom suffit, et les intitulés passent à la ligne. */
	.zone-livraison__tableau th,
	.zone-livraison__tableau td { padding: .6rem .55rem; font-size: .875rem; }
	.zone-livraison__tableau thead th { font-size: .6875rem; letter-spacing: .03em; white-space: normal; }
	.zone-livraison__code { display: none; }
}

/* Page « Expédition et livraison » : la liste des pays et la carte se partagent
   la largeur du texte. Sans cadre non plus : la carte se fond dans la page. */
.doc-zone { display: grid; gap: var(--r4); align-items: center; margin-block: var(--r4) var(--r5); }
@media (min-width: 900px) {
	.doc-zone { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: var(--r5); }
}
.prose .doc-zone > ul { margin: 0; }
.doc-zone__carte { justify-self: center; width: 100%; max-width: 40rem; margin: 0; }
.doc-zone__carte img { display: block; width: 100%; height: auto; }

.pied { background: var(--ecorce); color: #C9C0B7; margin-top: var(--r8); }

/* --- Bandeau de service ---------------------------------------------------- */

.pied__service {
	background: rgba(255, 255, 255, .05);
	border-bottom: 1px solid rgba(255, 255, 255, .1);
	padding-block: var(--r4);
}
.pied__service-interieur {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--r5);
}
.pied__service-bloc {
	display: flex;
	align-items: center;
	gap: var(--r3);
	flex: 1 1 300px;
	min-width: 0;
}
.pied__service-icone {
	display: grid;
	place-items: center;
	width: 44px; height: 44px;
	background: rgba(150, 215, 0, .14);
	border: 1px solid rgba(150, 215, 0, .3);
	border-radius: var(--arr-m);
	color: var(--action);
	font-size: 1.25rem;
	flex-shrink: 0;
}
.pied__service-titre {
	color: #fff;
	font-weight: 650;
	font-size: 1.0625rem;
	line-height: 1.3;
	margin-bottom: .15rem;
}
.pied__service-texte { margin: 0; font-size: .875rem; color: #B4AAA0; max-width: 38ch; }

.pied__service-horaires { display: flex; flex-direction: column; gap: .25rem; font-size: .9375rem; }
.pied__service-horaires i { color: var(--action); margin-right: .35rem; }

.pied__service-etiquette {
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #8D8279;
}

.pied__service-actions { display: flex; flex-wrap: wrap; gap: var(--r3); margin-left: auto; align-items: center; }

/* Numero pas encore renseigne : encadre neutre, pas un bouton d'action. */
.pied__tel-absent {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	min-height: 48px;
	padding: .5rem 1rem;
	border: 1px dashed rgba(255, 255, 255, .28);
	border-radius: var(--arr-m);
	color: #9B9089;
	font-size: .9375rem;
}
.pied__tel-absent > i { color: #9B9089; }

/* Bouton de contour sur fond sombre : la bordure claire doit rester visible. */
.pied__bouton-clair {
	background: transparent;
	border-color: rgba(255, 255, 255, .28);
	color: #fff;
}
.pied__bouton-clair:hover { background: rgba(255, 255, 255, .1); border-color: #fff; color: #fff; }

/* --- Colonnes -------------------------------------------------------------- */

.pied > .conteneur { padding-block: var(--r6) var(--r4); }
.pied__grille { display: grid; gap: var(--r5); margin-bottom: var(--r5); }
@media (min-width: 640px)  { .pied__grille { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pied__grille { grid-template-columns: 1.5fr repeat(3, 1fr); gap: var(--r5); } }

.pied__titre {
	color: #fff;
	font-family: var(--texte);
	font-size: .75rem;
	font-weight: 650;
	letter-spacing: .09em;
	text-transform: uppercase;
	margin-bottom: var(--r3);
}
/* Les liens de pied de page sont les plus exposes aux erreurs de visee au
   doigt : ils sont nombreux, serres, et en bas d'ecran. On leur donne donc une
   hauteur de cible d'au moins 40 px, en jouant sur le remplissage plutot que
   sur la taille du texte. */
.pied__liens { list-style: none; margin: 0; padding: 0; }
.pied__liens li { margin-bottom: 0; }
.pied__liens a {
	display: inline-flex;
	align-items: center;
	min-height: 34px;    /* assez pour viser au doigt, sans etirer la colonne */
	color: #C9C0B7;
	text-decoration: none;
	font-size: .875rem;
}
.pied__liens a:hover { color: var(--action); text-decoration: underline; }

.pied__marque { display: flex; align-items: center; gap: .7rem; margin-bottom: var(--r3); color: #fff; }
.pied__texte { font-size: .875rem; line-height: 1.6; max-width: 42ch; margin-bottom: var(--r4); }

/* Coordonnees : meme traitement d'icone que les identifiants, en plus discret. */
.pied__coord { list-style: none; margin: 0; padding: 0; font-size: .875rem; }
.pied__coord li { display: flex; gap: .6rem; margin-bottom: .35rem; line-height: 1.45; }
.pied__coord i { color: var(--action); margin-top: .3rem; width: 15px; flex-shrink: 0; }
.pied__coord a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	color: #C9C0B7;
	text-decoration: none;
}
.pied__coord a:hover { color: var(--action); }

/* --- Identifiants de l'entreprise ------------------------------------------
   Une seule rangee, chaque donnee precedee de son icone verte — meme
   traitement que les coordonnees, pour que le pied de page se lise d'un bloc.
   -------------------------------------------------------------------------- */

.pied__identite {
	padding-top: var(--r4);
	border-top: 1px solid rgba(255, 255, 255, .11);
	margin-bottom: var(--r4);
}

/* Grille plutot que flex : au repli, les entrees s'alignent en colonnes nettes
   au lieu de se repartir irregulierement selon la longueur de chacune. */
.pied__identifiants {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--r3) var(--r5);
	list-style: none;
	margin: 0;
	padding: 0;
}

.pied__identifiant {
	display: flex;
	align-items: flex-start;
	gap: .6rem;
	margin: 0;
	min-width: 0;
}
.pied__identifiant-icone {
	display: grid;
	place-items: center;
	width: 30px; height: 30px;
	background: rgba(150, 215, 0, .12);
	border-radius: var(--arr-s);
	color: var(--action);
	font-size: .8125rem;
	flex-shrink: 0;
}
.pied__identifiant-texte { display: flex; flex-direction: column; min-width: 0; }
.pied__identifiant-libelle {
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #8D8279;
	line-height: 1.4;
}
.pied__identifiant-valeur {
	color: #E4DBD2;
	font-size: .875rem;
	line-height: 1.35;
	/* Un numero d'identification ne doit jamais se couper en fin de ligne. */
	overflow-wrap: anywhere;
}

/* --- Moyens de paiement -----------------------------------------------------
   Vignettes blanches sur fond sombre, centrees sous un intitule discret.
   Le fond blanc n'est pas decoratif : les marques de paiement imposent un
   fond clair, et c'est ainsi qu'elles sont reconnues au premier coup d'oeil.
   -------------------------------------------------------------------------- */

.paiements {
	padding-top: var(--r4);
	border-top: 1px solid rgba(255, 255, 255, .11);
	text-align: center;
}

.paiements__titre {
	display: block;
	margin-bottom: var(--r2);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #8D8279;
}

.paiements__liste {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.paiements__liste li { margin: 0; }

.paiements__vignette {
	display: grid;
	place-items: center;
	min-width: 62px;
	height: 44px;
	padding-inline: .75rem;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.paiements__vignette--large { padding-inline: 1rem; }

/* Virement bancaire : pastille verte, intitule en gras, precision dessous. */
.paiements__virement { display: inline-flex; align-items: center; gap: .6rem; text-align: left; }
.paiements__virement-pastille {
	display: grid;
	place-items: center;
	width: 26px; height: 26px;
	background: var(--action);
	border-radius: 50%;
	color: var(--sur-action);
	font-size: .8rem;
	flex-shrink: 0;
}
.paiements__virement strong {
	display: block;
	color: #15120F;
	font-size: .9375rem;
	font-weight: 700;
	line-height: 1.15;
	white-space: nowrap;
}
.paiements__virement small { display: block; color: #6B6158; font-size: .6875rem; line-height: 1.3; }

/* Marques */
.paiements__visa {
	color: #1434CB;
	font-family: var(--texte);
	font-size: 1rem;
	font-weight: 800;
	font-style: italic;
	letter-spacing: .01em;
}
.paiements__svg { width: 40px; height: 24px; display: block; }
.paiements__amex {
	display: grid;
	place-items: center;
	min-width: 44px;
	padding: .3rem .45rem;
	background: #006FCF;
	border-radius: 3px;
	color: #fff;
	font-size: .625rem;
	font-weight: 800;
	letter-spacing: .04em;
}
.paiements__paypal { font-size: .9375rem; font-weight: 800; font-style: italic; letter-spacing: -.01em; }
.paiements__paypal-1 { color: #003087; }
.paiements__paypal-2 { color: #009CDE; }
.paiements__applepay {
	display: inline-flex;
	align-items: center;
	gap: .18rem;
	color: #000;
	font-size: .9375rem;
	font-weight: 600;
}
.paiements__applepay i { font-size: 1rem; }


/* La pastille « à compléter » vit aussi dans le pied de page, sur fond sombre :
   l'orange des pages claires y deviendrait illisible. */
.pied .doc__a-completer {
	background: rgba(180, 83, 9, .2);
	border-color: #E08A3C;
	color: #F0B27A;
}

.pied__bas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--r2) var(--r4);
	margin-top: var(--r4);
	padding-top: var(--r3);
	border-top: 1px solid rgba(255, 255, 255, .11);
	font-size: .8125rem;
}
.pied__bas-gauche { display: flex; flex-wrap: wrap; align-items: center; gap: var(--r2) var(--r4); }
.pied__bas-liens { display: flex; flex-wrap: wrap; gap: 0 var(--r4); }
.pied__bas-liens a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;     /* cible tactile, comme les autres liens du pied */
	color: #9B9089;
	text-decoration: none;
}
.pied__bas-liens a:hover { color: var(--action); text-decoration: underline; }

.pied__badge { display: inline-flex; align-items: center; gap: .45rem; color: #C9C0B7; }
.pied__badge i { color: var(--action); }

/* Lettre d'information */
.newsletter {
	background: var(--bois-voile);
	border: 1px solid #E8D9C6;
	border-radius: var(--arr-l);
	padding: var(--r6);
}
.newsletter__formulaire { display: flex; flex-wrap: wrap; gap: var(--r3); margin-top: var(--r4); }
.newsletter__formulaire .champ__saisie { flex: 1 1 240px; }

/* -----------------------------------------------------------------------------
   17. Utilitaires
   -------------------------------------------------------------------------- */

.pile { display: grid; gap: var(--r4); }
.pile--serree { gap: var(--r2); }
.ligne { display: flex; align-items: center; gap: var(--r3); flex-wrap: wrap; }
.ligne--espacee { justify-content: space-between; }
.centre { text-align: center; }
.centre p { margin-inline: auto; }
.muet { color: var(--encre-tertiaire); }
.petit { font-size: .875rem; }
.gras { font-weight: 650; }
.sans-marge { margin: 0; }
.mt-4 { margin-top: var(--r4); }
.mt-6 { margin-top: var(--r6); }
.mb-0 { margin-bottom: 0; }

.etat-vide {
	text-align: center;
	padding: var(--r8) var(--r4);
	background: var(--surface);
	border: 1px dashed var(--bord-fort);
	border-radius: var(--arr-l);
}
.etat-vide__icone {
	display: grid;
	place-items: center;
	width: 68px; height: 68px;
	margin: 0 auto var(--r4);
	background: var(--surface-douce);
	color: var(--encre-tertiaire);
	border-radius: 50%;
	font-size: 1.5rem;
}

/* -----------------------------------------------------------------------------
   18. Mouvement et impression
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
	.carte-categorie:hover .carte-categorie__media img { transform: none; }
}

@media print {
	.barre-service, .entete, .pied, .barre-achat-mobile, .notification,
	.bouton, .onglets__barre { display: none !important; }
	body { background: #fff; color: #000; }
	.recap, .achat, .bloc-formulaire { border: 1px solid #999; box-shadow: none; }
	a[href]::after { content: " (" attr(href) ")"; font-size: .75em; color: #555; }
}