@charset "UTF-8";
/* =========================================================================
   PanierBasket V4 — habillage de la refonte
   Chargé APRÈS styles_v2.php, qu'il recouvre. Retirer la balise <link>
   dans template.tpl suffit à revenir au visuel précédent.

   Étape 1 : la coquille (bandeau de service, en-tête, navigation, pied de
   page). Le balisage n'est pas touché, seules les règles changent.
   ========================================================================= */

/* =========================================================================
   POLICES HEBERGEES SUR LE SITE (26/10/2026)
   Remplacent Google Fonts : memes noms de famille, donc rien d'autre a
   changer. Fichiers latin de Fontsource 5.3.0 (licence OFL, polices/LICENSE-*).
   Dossier « polices » et non « fonts » : le .htaccess envoie deja /fonts/
   vers fichiers/fonts/ via fichiers.php, qui renvoie une erreur 500.
   Nunito Sans : variable, graisses 200 a 1000 et taille optique.
   Barlow Condensed : 700 et 800, les seules utilisees par les titres v4.
   Les deux plus utiles sont prechargees dans template.tpl.
   ========================================================================= */
@font-face {
	font-family: "Nunito Sans";
	font-style: normal;
	font-weight: 200 1000;
	font-display: swap;
	src: url("polices/nunito-sans-latin-opsz-normal.woff2") format("woff2");
}

@font-face {
	font-family: "Barlow Condensed";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("polices/barlow-condensed-latin-700-normal.woff2") format("woff2");
}

@font-face {
	font-family: "Barlow Condensed";
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url("polices/barlow-condensed-latin-800-normal.woff2") format("woff2");
}

:root {
	/* Palette neutre : fond gris clair classique, cartes blanches.
	   Les noms des variables datent de la palette creme ; ils sont gardes
	   pour ne pas toucher aux dizaines de regles qui les utilisent. */
	--v4-encre:        #16181D;
	--v4-encre-douce:  #3A3D42;
	--v4-gris:         #5C6066;
	--v4-gris-clair:   #8B8F95;
	--v4-creme:        #F2F2F2;		/* fond de page, gris clair */
	--v4-sable:        #E9E9E9;		/* aplats et survols */
	--v4-blanc:        #FFFFFF;
	--v4-bordure:      #DCDCDC;
	--v4-bordure-pale: #E8E8E8;
	--v4-bordure-chip: #D2D2D2;
	--v4-rouge:        #C4231B;
	--v4-vert:         #17753F;
	--v4-or:           #F2B233;
	--v4-sur-encre:    #C8C8C8;

	--v4-titre: "Barlow Condensed", "Arial Narrow", sans-serif;
	--v4-texte: "Nunito Sans", Arial, sans-serif;

	--v4-pilule: 999px;
	--v4-rayon:  18px;
	--v4-marge:  80px;

}

/* ---------------------------------------------------------------- socle */

body {
	font-family: var(--v4-texte);
	color: var(--v4-encre);
	background: var(--v4-creme);
}

h1, h2, h3, .titre {
	font-family: var(--v4-titre);
	font-weight: 800;
	letter-spacing: .2px;
	text-transform: uppercase;
	line-height: 1.05;
}

h1 { font-size: 50px; }
h2 { font-size: 34px; }
h3 { font-size: 22px; }

a { color: var(--v4-encre); }
a:hover { color: var(--v4-encre); }

/* Le rouge au survol vaut pour les liens de texte. Sur une carte produit,
   le lien enveloppe le visuel, le nom, les avis et l'accroche : tout le
   bloc virait au rouge. Meme chose pour le nom du produit dans le hero.
   On garde la couleur de repos. */
.bloc-produit-v2 a:hover,
.v4-hero-carte a:hover {
	color: inherit;
}

/* =========================================================================
   LA COQUILLE — bandeau de service, en-tete, navigation
   Cotes repris de la maquette : bandeau 38 px, en-tete 88 px, nav 52 px,
   gouttiere laterale 80 px, pastilles 46 px.
   ========================================================================= */

/* --- bandeau de service ------------------------------------------------
   Le balisage place #header-2-pre DANS .v2-width, donc dans la gouttiere.
   Des marges negatives le font ressortir jusqu'aux deux bords de l'ecran,
   sans toucher au HTML. flex-shrink:0 l'empeche d'etre ramene a la largeur
   du conteneur par le flex parent. */
#header-2-pre {
	flex: 0 0 100%;
	width: 100%;
	margin: 0;
	min-height: 38px;
	padding: 0;
	background: transparent;
	color: var(--v4-sur-encre);
	font-size: 13px;
	font-weight: 600;
	display: flex;
	align-items: center;
}

#header-2-pre a { color: var(--v4-sur-encre); text-decoration: none; }
#header-2-pre a:hover { color: var(--v4-blanc); }
#header-2-pre .tel,
#header-2-pre b { color: var(--v4-blanc); font-weight: 800; }
#header-2-pre .slogan { color: var(--v4-blanc); font-weight: 700; }

/* --- en-tete -----------------------------------------------------------
   La feuille d'origine pose padding:10px 20px sur #header-2 : c'est de la
   que venaient la marge en haut et le bandeau qui ne touchait pas les
   bords. On remet a zero, la gouttiere est portee par .v2-width. */
#header-2 {
	background: linear-gradient(var(--v4-encre) 0 38px, var(--v4-blanc) 38px);
	border-bottom: 0;
	padding: 0;
}

#header-2 .v2-width,
#header-2-desktop .v2-width,
#footer-2 .v2-width {
	margin-left: auto;
	margin-right: auto;
	padding-left: 0;
	padding-right: 0;
}

/* en dessous de 1400 px le conteneur touche les bords : on lui rend la
   meme respiration que #conteneur, qui porte deja 20 px */
@media (max-width: 1439px) {
	#header-2 .v2-width,
	#header-2-desktop .v2-width,
	#footer-2 .v2-width {
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* la hauteur de la ligne blanche se regle sur le bloc du logo */
#header-2-left {
	min-height: 88px;
	padding-top: 0;
	padding-bottom: 0;
}

#header-2-left img,
#header-2 #header-2-left img { height: 52px; width: auto; max-height: 52px; }

/* la barre de recherche se centre dans l'espace libre, entre le logo et
   les pastilles. Les marges de 36 px sont le minimum qu'elle gardera de
   chaque cote quand l'ecran se resserre. */
#header-2-center { margin-left: 36px; margin-right: 36px; justify-content: center; }
#header-2-center form { max-width: 620px; }

/* la recherche : une pilule creme, le bouton loge dedans */
#header-2-center .search-container {
	height: 50px;
	border-radius: var(--v4-pilule);
	background: var(--v4-creme);
	border: 1.5px solid var(--v4-bordure);
	box-sizing: border-box;
}

#header-2-center .search-container:hover { border-color: var(--v4-gris-clair); }
#header-2-center .search-container:focus-within { border-color: var(--v4-encre); }

#header-2-center .search-input::placeholder {
	color: var(--v4-gris);
	opacity: 1;
}

#header-2-center .search-input {
	background: transparent;
	border: 0;
	border-radius: var(--v4-pilule);
	font-family: var(--v4-texte);
	font-size: 15px;
	color: var(--v4-encre);
	height: 100%;
	padding: 0 22px;
}

/* icone fournie ici en SVG : le PNG du site est noir, invisible sur
   le bouton sombre de la maquette */
#header-2-center .search-button {
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	margin-left: 0;
	margin-right: 5px;
	padding: 0;
	border: 0;
	border-radius: var(--v4-pilule);
	background-color: var(--v4-encre);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M16.5 16.5L21 21'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 18px 18px;
	cursor: pointer;
}

#header-2-center .search-button img { display: none; }
#header-2-center .clear-button { right: 52px; color: var(--v4-gris); }

/* --- les quatre pastilles ----------------------------------------------
   Attention au raccourci « background », qui effacerait l'image de fond
   posee par la feuille d'origine. On n'ecrit que background-color.
   Aristide garde son visuel maison (header-ia.png) ; les trois autres
   recoivent les traces de la maquette, en SVG, a la bonne couleur. */
#header-2-right { gap: 10px; }

#header-2-right .circle {
	position: relative;
	width: 46px;
	height: 46px;
	margin-right: 0;
	border-radius: var(--v4-pilule);
	background-color: var(--v4-creme);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 21px 21px;
	transition: background-color .15s ease;
}

#header-2-right .circle:hover { background-color: var(--v4-sable); }

#header-2-right .circle.support { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 24 24' fill='none' stroke='%2316181D' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14v-2a8 8 0 0 1 16 0v2'/%3E%3Crect x='2.5' y='13' width='4.5' height='6' rx='2'/%3E%3Crect x='17' y='13' width='4.5' height='6' rx='2'/%3E%3Cpath d='M19 19v.5a2.5 2.5 0 0 1-2.5 2.5H13'/%3E%3C/svg%3E"); }
#header-2-right .circle.account { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 24 24' fill='none' stroke='%2316181D' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M4.5 20.5c0-3.8 3.4-6.5 7.5-6.5s7.5 2.7 7.5 6.5'/%3E%3C/svg%3E"); }
#header-2-right .circle.cart    { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 24 24' fill='none' stroke='%2316181D' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.4 11h10.2L20 8H6.2'/%3E%3Ccircle cx='9' cy='20' r='1.5'/%3E%3Ccircle cx='17' cy='20' r='1.5'/%3E%3C/svg%3E"); }

/* Aristide : l'avatar occupe toute la pastille, plus la pastille verte
   de presence de la maquette. En ::before : chat2.js prend ::after pour la
   pointe de la bulle d'accueil (.open-chat.show-welcome::after) ; sur le
   meme pseudo-element, la pointe disparaissait et la pastille glissait sous
   l'avatar. */
#header-2-right .circle.ia {
	background-color: var(--v4-sable);
	background-size: 46px 46px;
}

#header-2-right .circle.ia::before {
	content: "";
	position: absolute;
	right: -1px;
	bottom: -1px;
	width: 12px;
	height: 12px;
	border-radius: var(--v4-pilule);
	background: var(--v4-vert);
	border: 2px solid var(--v4-blanc);
}

/* Pastille du panier, comme la maquette : 18 px, rouge de la charte, coin
   haut droit de l'icone, liseré blanc pour la detacher du rond gris.
   Selecteur a deux classes : la feuille du site pose 25 px rouge vif
   avec #header-2-right .circle .badge, qui l'emportait sur la regle v4. */
#header-2-right .circle .badge,
#header-2-right .circle #cart-badge {
	top: -3px;
	right: -3px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	width: auto;
	height: 20px;
	padding: 0 5px;
	box-sizing: border-box;
	border: 2px solid var(--v4-blanc);
	border-radius: var(--v4-pilule);
	background: var(--v4-rouge);
	color: var(--v4-blanc);
	font-family: var(--v4-texte);
	font-size: 11px;
	font-weight: 800;
	line-height: 1;
}

/* Panier vide : le serveur et ajax-caddie-header.php renvoient une pastille
   vide, on la masque. #cart-badge en plus : la regle ci-dessus, avec son id,
   l'emportait sur .badge:empty et la pastille restait affichee. */
#header-2-right .circle .badge:empty,
#header-2-right .circle #cart-badge:empty { display: none; }

/* --- navigation --------------------------------------------------------
   .menu-categories posait margin-top:10px, qui detachait la nav de
   l'en-tete. La maquette les fait se toucher. */
#header-2-desktop,
#header-2-desktop.menu-categories {
	margin-top: 0;
	padding: 0;
	height: auto;
	background: var(--v4-blanc);
	border-top: 1px solid var(--v4-bordure-pale);
	border-bottom: 1px solid var(--v4-bordure);
}

#header-2-desktop #header-2-desktop-menu-fixe,
#header-2-desktop.menu-categories #header-2-desktop-menu-fixe {
	display: flex;
	align-items: center;
	gap: 24px;
	min-height: 52px;
	padding: 0;
	margin-left: 0;
	border-left: none;
	color: var(--v4-encre);
}

#header-2-desktop #header-2-desktop-menu-fixe .item,
#header-2-desktop.menu-categories #header-2-desktop-menu-fixe .item {
	flex: 0 0 auto;
	padding: 0;
	text-transform: none;
}

#header-2-desktop #header-2-desktop-menu-fixe .item > a,
#header-2-desktop.menu-categories #header-2-desktop-menu-fixe .item > a {
	font-family: var(--v4-texte);
	font-size: 14px;
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
	color: var(--v4-encre);
	text-decoration: none;
	background: transparent;
	border: 0;
	padding: 0;
}

#header-2-desktop #header-2-desktop-menu-fixe .item > a:hover,
#header-2-desktop #header-2-desktop-menu-fixe .item.selected > a {
	color: var(--v4-rouge);
}

#header-2-desktop #header-2-desktop-menu-fixe .item.selected { background-color: transparent; }
/* Bons plans en rouge, Inspirations dans le bleu du concours */
#header-2-desktop #header-2-desktop-menu-fixe .item.deals > a { color: var(--v4-rouge); }
#header-2-desktop #header-2-desktop-menu-fixe .item.deals > a:hover { color: #96160F; }
#header-2-desktop #header-2-desktop-menu-fixe .item.inspirations > a { color: var(--v4-bleu, #1F5FA8); }
#header-2-desktop #header-2-desktop-menu-fixe .item.inspirations > a:hover { color: var(--v4-bleu-fonce, #163F75); }
#mobile-menu a.categorie.deals { color: var(--v4-rouge); }
#mobile-menu a.categorie.inspirations { color: var(--v4-bleu, #1F5FA8); }

/* ------------------------------------------------------ pied de page */

#footer-2 {
	background: var(--v4-encre);
	color: var(--v4-sur-encre);
	font-family: var(--v4-texte);
	font-size: 15px;
	padding: 64px 0 40px;
}

/* --- bandeau de reassurance, en haut du pied de page -------------------
   Il etait noir sur noir, donc invisible comme bloc. On le fond dans le
   pied de page et on le separe par un filet. Les trois pictogrammes sont
   deja des PNG blancs sur fond transparent, rien a reprendre. */
#footer-2 #support-header {
	background: transparent;
	color: var(--v4-sur-encre);
	border-bottom: 1px solid #33363D;
}

#footer-2 #support-header-content {
	padding: 0 0 40px;
	height: auto;
	gap: 32px;
}

#footer-2 #support-header-content .bloc .image img { opacity: .85; }

#footer-2 #support-header-content .bloc .bloc-message .titre {
	font-family: var(--v4-texte);
	font-size: 14px;
	font-weight: 800;
	letter-spacing: .3px;
	color: var(--v4-blanc);
	margin-bottom: 2px;
}

#footer-2 #support-header-content .bloc .bloc-message .contenu {
	font-size: 13px;
	line-height: 1.45;
	color: var(--v4-sur-encre);
}

/* --- les colonnes de liens --------------------------------------------
   Le balisage en compte cinq : logo, trois colonnes de liens, moyens de
   paiement. On masque le logo (il est deja dans l'en-tete, et la maquette
   n'en met pas ici) et on garde les quatre autres, comme la maquette.
   Pour le faire revenir : supprimer la regle .column:first-child. */
#footer-2 #support {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
	gap: 32px;
	padding: 48px 0 0;
	justify-content: initial;
}

#footer-2 #support .column:first-child { display: none; }

#footer-2 #support .column,
#footer-2 #support .column:last-child {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 12px;
	padding: 0;
	margin: 0;
	text-align: left;
}

#footer-2 #support .titre,
#footer-2 .titre {
	font-family: var(--v4-texte);
	font-size: 16px;
	font-weight: 800;
	text-transform: none;
	letter-spacing: 0;
	line-height: 1.3;
	color: var(--v4-blanc);
	margin: 0;
}

#footer-2 #support .line { line-height: 1.4; }

#footer-2 a { color: var(--v4-sur-encre); text-decoration: none; }
#footer-2 a:hover { color: var(--v4-blanc); text-decoration: underline; }

/* les moyens de paiement sont une image sur fond blanc : on l'assume en
   lui donnant une carte, plutot que de la laisser flotter sur le sombre */
#footer-2 #support .column:last-child img {
	background: var(--v4-blanc);
	border-radius: 12px;
	padding: 12px;
	box-sizing: border-box;
	max-width: 100%;
	height: auto;
}

#footer-2 #copyright {
	border-top: 1px solid #33363D;
	padding: 24px 0 0;
	margin-top: 40px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--v4-gris-clair);
	justify-content: flex-start;
	text-align: left;
}

/* --------------------------------------------- boutons et formulaires */

button,
.bouton,
input[type="submit"] {
	font-family: var(--v4-texte);
	font-weight: 800;
	border-radius: var(--v4-pilule);
}

.popover-content {
	border-radius: var(--v4-rayon);
	border: 1.5px solid var(--v4-bordure);
	background: var(--v4-blanc);
}

/* le degrade de #header-2 fige la bande noire a 38 px : le bandeau ne
   doit jamais passer sur deux lignes */
@media (max-width: 1200px) {
	#header-2-pre .slogan { display: none; }
}

/* Bandeau court du mobile. Sous 1000 px, la feuille du site masque la
   ligne .support (display:none !important) et laissait le slogan, que la
   regle ci-dessus masque aussi : la bande noire restait vide. On y met
   l'essentiel, comme sur la maquette : telephone, note, garantie, livraison. */
#header-2-pre .v4-bandeau-mobile { display: none; }

@media (max-width: 1000px) {
	#header-2-pre { justify-content: center; }
	#header-2-pre .v4-bandeau-mobile {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		width: 100%;
		font-size: 11px;
		font-weight: 600;
		white-space: nowrap;
		color: var(--v4-sur-encre);
	}
	/* numero en vert, ouvre la fenetre de contact (telephone en premier), comme sur ordinateur */
	#header-2-pre .v4-bandeau-mobile .tel { color: #5CD18B; font-weight: 800; cursor: pointer; }
	#header-2-pre .v4-bandeau-mobile .sep { color: #4A4E57; }
	#header-2-pre .v4-bandeau-mobile .etoile { color: var(--v4-or); }
}

@media (max-width: 389px) {
	/* le bandeau complet fait 337 px, plus 40 px de gouttieres : sous 390 px
	   de large (iPhone mini, la plupart des Android), on retire la livraison */
	#header-2-pre .v4-bandeau-mobile > :nth-last-child(-n+2) { display: none; }
}

/* ------------------------------------------------------------ mobile */

@media (max-width: 900px) {
	:root { --v4-marge: 18px; }

	h1 { font-size: 34px; }
	h2 { font-size: 26px; }

	#header-2-desktop-menu-fixe {
		gap: 16px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	#header-2-left { min-height: 64px; }
	#header-2-left img,
	#header-2 #header-2-left img { height: 40px; max-height: 40px; }
	#header-2 .v2-width { padding-bottom: 10px; }
	#header-2-center { margin-left: 0; margin-right: 0; }
	#header-2-right { gap: 8px; }
	#header-2-right .circle { width: 38px; height: 38px; background-size: 18px 18px; }
	#header-2-right .circle.ia { background-size: 38px 38px; }

	#footer-2 { padding: 40px 0 32px; }
	#footer-2 #support { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; padding-top: 32px; }
	#footer-2 #support-header-content { padding-bottom: 28px; }
	#footer-2 #copyright { margin-top: 28px; text-align: center; justify-content: center; }
}

@media (max-width: 600px) {
	#footer-2 #support { grid-template-columns: 1fr; }
	#footer-2 #support .column,
	#footer-2 #support .column:last-child { align-items: center; text-align: center; }
}

/* =========================================================================
   LA HOME
   Etape 1 : le hero et le bandeau de preuves.
   Le conteneur de page porte deja la largeur de 1400 px et la gouttiere,
   ces sections n'ajoutent donc que du rythme vertical.
   ========================================================================= */

#conteneur { background-color: var(--v4-creme); }

/* --- boutons ----------------------------------------------------------- */

.v4-bouton {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 58px;
	padding: 0 30px;
	border-radius: var(--v4-pilule);
	background: var(--v4-vert);
	color: var(--v4-blanc);
	font-family: var(--v4-texte);
	font-size: 17px;
	font-weight: 800;
	text-decoration: none;
	border: 0;
	cursor: pointer;
	transition: background .15s ease;
}

.v4-bouton:hover { background: #126033; color: var(--v4-blanc); }
.v4-bouton-petit { height: 48px; padding: 0 20px; font-size: 15px; }

.v4-bouton-ligne {
	display: inline-flex;
	align-items: center;
	height: 58px;
	padding: 0 28px;
	box-sizing: border-box;
	border: 2px solid var(--v4-encre);
	border-radius: var(--v4-pilule);
	color: var(--v4-encre);
	font-size: 17px;
	font-weight: 800;
	text-decoration: none;
	transition: background .15s ease, color .15s ease;
}

.v4-bouton-ligne:hover { background: var(--v4-encre); color: var(--v4-blanc); }

/* --- hero --------------------------------------------------------------- */

.v4-hero {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 56px;
	align-items: center;
	/* 24 px + les 15 px de #conteneur : 39 px sous le menu (71 avant) */
	padding: 24px 0 48px;
}

.v4-hero-texte { display: flex; flex-direction: column; gap: 26px; align-items: flex-start; }

/* le h1 du site, presente en pastille */
.v4-hero-pastille {
	display: inline-block;
	padding: 6px 14px;
	border-radius: var(--v4-pilule);
	background: var(--v4-blanc);
	border: 1px solid var(--v4-bordure);
}

.v4-hero-pastille #h1-home,
#conteneur .v4-hero-pastille #h1-home {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	font-family: var(--v4-texte);
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	min-height: 0;
	height: auto;
	width: auto;
	color: var(--v4-gris);
	text-align: left;
}

.v4-hero-titre {
	margin: 0;
	font-family: var(--v4-titre);
	font-weight: 800;
	font-size: 74px;
	line-height: .95;
	letter-spacing: -.5px;
	text-transform: uppercase;
	color: var(--v4-encre);
}

.v4-hero-titre span { color: var(--v4-rouge); }

.v4-hero .v4-hero-texte #home-contenu {
	margin: 0;
	font-size: 20px;
	line-height: 1.55;
	color: var(--v4-encre-douce);
	max-width: 560px;
	text-align: left;
}

.v4-hero-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

.v4-hero-preuves { display: flex; gap: 28px; align-items: center; padding-top: 6px; flex-wrap: wrap; }

.v4-note { display: flex; align-items: center; gap: 10px; }
.v4-note-chiffre { font-size: 30px; font-weight: 800; line-height: 1; }
.v4-note-chiffre span { font-size: 16px; color: var(--v4-gris); font-weight: 600; }
.v4-note-detail { display: flex; flex-direction: column; line-height: 1.25; }
.v4-etoiles { color: #D99A00; font-size: 16px; letter-spacing: 1px; }
.v4-note-detail span:last-child { font-size: 13px; color: var(--v4-gris); font-weight: 600; }
.v4-separateur { width: 1px; height: 36px; background: var(--v4-bordure-chip); }
.v4-hero-marque { font-size: 14px; line-height: 1.35; color: var(--v4-encre-douce); font-weight: 600; }

/* le visuel : la photo du produit mis en avant, sur un fond sombre */
.v4-hero-visuel {
	position: relative;
	height: 560px;
	border-radius: 28px;
	/* Fond transparent : un fond sombre ressortait en liseré sur le bord arrondi
	   de la photo (anticrenelage), comme sur mobile */
	background: transparent;
	overflow: hidden;
}

.v4-hero-photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 35%;
}

/* un voile sombre en bas du visuel, pour que la carte se detache quelle
   que soit la photo du produit */
.v4-hero-visuel::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 55%;
	background: linear-gradient(to top, rgba(22, 24, 29, .55), rgba(22, 24, 29, 0));
	pointer-events: none;
}

.v4-hero-carte { z-index: 1; }

.v4-hero-carte {
	position: absolute;
	left: 24px;
	bottom: 24px;
	width: 360px;
	max-width: calc(100% - 48px);
	box-sizing: border-box;
	padding: 20px;
	border-radius: 18px;
	background: var(--v4-blanc);
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: flex-start;
	box-shadow: 0 20px 40px rgba(0, 0, 0, .25);
}

.v4-etiquette {
	padding: 4px 10px;
	border-radius: 6px;
	background: var(--v4-encre);
	color: var(--v4-blanc);
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .4px;
}

.v4-hero-carte-nom {
	font-size: 20px;
	font-weight: 800;
	line-height: 1.2;
	color: var(--v4-encre);
	text-decoration: none;
}

.v4-hero-carte-nom:hover { color: var(--v4-encre); text-decoration: underline; text-underline-offset: 3px; }
.v4-hero-carte-slogan { font-size: 14px; color: var(--v4-gris); line-height: 1.4; }
.v4-hero-carte-slogan:empty { display: none; }

.v4-hero-carte-bas {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	width: 100%;
}

/* Le prix est rendu par bloc_prix_v2(), comme dans les listes categorie.
   Il faut la classe .bloc-produit-v2 pour que la feuille v3 le style, mais
   cette classe porte aussi toute la carte produit : bordure, coins arrondis,
   fond blanc, ombre et 20 px de padding. On remet ce decor a zero, le prix
   lui-meme n'y touche pas. */
.v4-hero-carte-bas .bloc-produit-v2 {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	padding: 0;
	margin: 0;
	overflow: visible;
}

.v4-hero-carte-bas .v4-bouton { margin-left: auto; }

/* --- bandeau de preuves -------------------------------------------------- */

.v4-preuves {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	padding-bottom: 24px;
}

.v4-preuve {
	display: flex;
	gap: 14px;
	align-items: center;
	padding: 20px 22px;
	border-radius: 16px;
	background: var(--v4-blanc);
}

.v4-preuve-icone {
	width: 48px;
	height: 48px;
	flex-shrink: 0;
	border-radius: 12px;
	background: #FBE9E7;
	color: var(--v4-rouge);
	display: flex;
	align-items: center;
	justify-content: center;
}

.v4-preuve-icone-nue { background: var(--v4-creme); }
.v4-preuve-texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.v4-preuve-texte strong { font-size: 16px; line-height: 1.25; }
.v4-preuve-texte span { font-size: 14px; color: var(--v4-gris); line-height: 1.3; }

/* --- la home sur petit ecran --------------------------------------------- */

@media (max-width: 1100px) {
	.v4-hero { grid-template-columns: 1fr; gap: 36px; padding: 12px 0 36px; }	/* 27 px sous l'en-tete */
	.v4-hero-titre { font-size: 54px; }
	.v4-hero-visuel { height: 420px; }
	.v4-preuves { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
	.v4-hero-titre { font-size: 40px; }
	.v4-hero .v4-hero-texte #home-contenu { font-size: 17px; }
	/* Photo entiere en haut (4:3), puis la carte qui remonte de 40 px sur le bas
	   de la photo : sur 340 px de haut, la carte cachait le panier et les joueurs */
	.v4-hero-visuel { height: auto; overflow: visible; border-radius: 0; background: transparent; display: flex; flex-direction: column; }
	/* Fond transparent : le fond sombre ressortait en liseré sur le bord arrondi (anticrenelage) */
	.v4-hero-photo { position: relative; inset: auto; display: block; height: auto; aspect-ratio: 4 / 3; border-radius: 20px; background: transparent; }
	.v4-hero-visuel::after { display: none; }
	.v4-hero-carte { position: relative; left: auto; right: auto; bottom: auto; width: auto; max-width: none; margin: -40px 12px 0; padding: 16px; box-shadow: 0 12px 28px rgba(0, 0, 0, .14); }
	.v4-hero-carte-bas .v4-bouton { margin-left: 0; width: 100%; justify-content: center; }
	.v4-hero-actions { width: 100%; }
	.v4-hero-actions .v4-bouton,
	.v4-hero-actions .v4-bouton-ligne { flex: 1 1 100%; justify-content: center; }
	.v4-preuves { grid-template-columns: 1fr; }
}

/* =====================================================================
   SELECTEUR GUIDE DE LA HOME
   Deux questions, puis la grille produits deja en place. Les pastilles
   reprennent la maquette : fond blanc au repos, encre plein une fois
   choisies, pour que l'etat actif se lise aussi sans la couleur.
   ===================================================================== */

.v4-selecteur {
	display: flex;
	flex-direction: column;
	gap: 28px;
	padding: 72px 0 24px;
}

.v4-selecteur-entete {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
}

.v4-selecteur-intro {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.v4-selecteur-intro h2 {
	margin: 0;
	font-family: var(--v4-titre);
	font-weight: 800;
	font-size: clamp(34px, 3.6vw, 54px);
	line-height: 1;
	text-transform: uppercase;
	color: var(--v4-encre);
}

.v4-selecteur-intro p {
	margin: 0;
	font-size: 18px;
	color: var(--v4-encre-douce);
}

.v4-selecteur-tel {
	flex-shrink: 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--v4-encre);
	text-underline-offset: 4px;
}

/* --- Le panneau des deux questions --- */

.v4-selecteur-questions {
	padding: 24px 28px;
	border-radius: 20px;
	background: var(--v4-blanc);
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.v4-selecteur-questions[hidden] { display: none; }

.v4-selecteur-ligne {
	display: flex;
	align-items: center;
	gap: 20px;
}

.v4-selecteur-numero {
	width: 168px;
	flex-shrink: 0;
	font-size: 15px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .6px;
	color: var(--v4-gris);
}

.v4-selecteur-choix {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.v4-selecteur-separateur {
	height: 1px;
	background: var(--v4-bordure-pale);
}

.v4-chip {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 2px;
	padding: 10px 18px;
	min-height: 60px;
	min-width: 150px;
	border: 1.5px solid var(--v4-bordure-chip);
	border-radius: 12px;
	background: var(--v4-blanc);
	color: var(--v4-encre);
	font: inherit;
	font-size: 16px;
	font-weight: 700;
	text-align: left;
	cursor: pointer;
}

.v4-chip:hover { border-color: var(--v4-encre); }

.v4-chip.is-actif {
	background: var(--v4-encre);
	border-color: var(--v4-encre);
	color: var(--v4-blanc);
}

.v4-chip small {
	font-size: 13px;
	font-weight: 600;
	opacity: .78;
}

/* --- Le compteur au-dessus de la grille --- */

.v4-selecteur-compte {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
}

.v4-selecteur-compte[hidden] { display: none; }

.v4-selecteur-nombre {
	font-size: 18px;
	font-weight: 800;
	color: var(--v4-encre);
}

/* Le tri : un vrai <select>, habille en pilule. La fleche est dessinee
   en arriere-plan pour rester identique d'un navigateur a l'autre. */
.v4-selecteur-tri {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	font-weight: 700;
	color: var(--v4-gris);
}

.v4-selecteur-tri select {
	-webkit-appearance: none;
	appearance: none;
	height: 44px;
	padding: 0 40px 0 16px;
	border: 1.5px solid var(--v4-bordure-chip);
	border-radius: var(--v4-pilule);
	background-color: var(--v4-blanc);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2316181D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	color: var(--v4-encre);
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
}

.v4-selecteur-tri select:hover { border-color: var(--v4-encre); }

.v4-selecteur-tri select:focus-visible {
	outline: 2px solid var(--v4-encre);
	outline-offset: 2px;
}

/* --- Quand la combinaison ne donne rien --- */

.v4-selecteur-vide {
	min-height: 420px;
	box-sizing: border-box;
	border-radius: 20px;
	background: var(--v4-blanc);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	text-align: center;
	padding: 40px;
}

.v4-selecteur-vide[hidden] { display: none; }

.v4-selecteur-vide strong { font-size: 24px; color: var(--v4-encre); }

.v4-selecteur-vide span {
	font-size: 16px;
	color: var(--v4-gris);
	max-width: 520px;
}

.v4-selecteur-vide-action {
	height: 52px;
	padding: 0 26px;
	border-radius: var(--v4-pilule);
	background: var(--v4-encre);
	color: var(--v4-blanc);
	text-decoration: none;
	font-weight: 800;
	display: flex;
	align-items: center;
}

.v4-selecteur-vide-action:hover { color: var(--v4-blanc); }

/* --- Tablette --- */

@media (max-width: 1000px) {

	.v4-selecteur { padding-top: 48px; gap: 22px; }

	.v4-selecteur-entete {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}

	.v4-selecteur-intro h2 { font-size: 40px; }

	.v4-selecteur-ligne {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.v4-selecteur-numero { width: auto; }
}

/* --- Telephone ---
   Les pastilles passent sur deux colonnes : quatre choix tiennent en deux
   lignes au lieu de quatre, et la question suivante reste visible. */

@media (max-width: 640px) {

	/* Telephone : on reprend la planche Accueil-mobile de la maquette.
	   Pas de panneau blanc, un intitule court au-dessus de chaque rangee
	   (sans lui, « Peu importe » ou « Je ne sais pas » ne disent pas a
	   quelle question ils repondent), une rangee de pilules par question. Une rangee trop longue defile a l'horizontale
	   au lieu de passer sur deux lignes : les trois questions tiennent
	   ainsi sur trois lignes et le haut de la grille reste visible. */

	.v4-selecteur { padding-top: 32px; gap: 14px; }

	.v4-selecteur-entete { gap: 6px; }

	.v4-selecteur-intro { gap: 6px; }

	.v4-selecteur-intro h2 { font-size: 34px; }

	.v4-selecteur-intro p { font-size: 15px; }

	.v4-selecteur-tel { display: none; }

	.v4-selecteur-questions {
		padding: 0;
		background: none;
		border-radius: 0;
		gap: 14px;
	}

	.v4-selecteur-separateur { display: none; }

	.v4-selecteur-numero {
		display: block;
		width: auto;
		margin: 0 0 6px;
		font-size: 12px;
		letter-spacing: .5px;
		line-height: 1.2;
	}

	.v4-selecteur-ligne { display: block; }

	.v4-selecteur-choix {
		flex-wrap: nowrap;
		gap: 8px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.v4-selecteur-choix::-webkit-scrollbar { display: none; }

	.v4-chip {
		flex-shrink: 0;
		flex-direction: row;
		align-items: center;
		min-width: 0;
		min-height: 0;
		height: 44px;
		padding: 0 16px;
		border-radius: var(--v4-pilule);
		font-size: 15px;
		white-space: nowrap;
	}

	.v4-chip small { display: none; }

	/* Compteur et tri sur une seule ligne, comme la maquette : le tri
	   prenait une ligne entiere et repoussait les produits d'autant. */
	.v4-selecteur-compte {
		padding-top: 6px;
		flex-wrap: nowrap;
		gap: 10px;
	}

	.v4-selecteur-nombre {
		font-size: 15px;
		min-width: 0;
	}

	.v4-selecteur-tri span { display: none; }

	.v4-selecteur-tri select {
		height: 40px;
		padding: 0 34px 0 14px;
		background-position: right 13px center;
		font-size: 14px;
	}

	.v4-selecteur-vide { min-height: 0; padding: 28px 20px; }

	.v4-selecteur-vide strong { font-size: 20px; }
}

/* =====================================================================
   CARTES PRODUITS DU SELECTEUR ET DES PAGES CATEGORIE V4
   Habillage repris de la maquette (planches Main et Accueil-mobile).
   Le balisage des cartes ne change pas : il sort du gabarit partage
   template_categorie-bloc-produit-v2.tpl. Tout est limite a #selecteur
   (home), .v4-cat (template_categorie_v4.tpl) et #recommandations (fiche
   produit v4, cartes chargees par ajax-produit-cross.php) : l'ancien gabarit
   categorie garde ses cartes. :is() prend la specificite de l'id, les
   regles pesent autant qu'avant sur la home. Le bloc prix pv2 n'est pas
   touche : il garde la presentation des listes categorie.
   ===================================================================== */

:is(#selecteur, .v4-cat, #recommandations, #v4-recherche) #categorie-v2-produits {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	align-items: stretch;
}

:is(#selecteur, .v4-cat, #recommandations, #v4-recherche) .bloc-produit-v2 {
	float: none;
	width: auto;
	margin: 0;
	padding: 14px 14px 20px;
	border: 0;
	border-radius: 20px;
	background: var(--v4-blanc);
	box-shadow: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
	position: relative;
	overflow: visible;
}

/* Le lien porte visuel, nom, avis et accroche : il prend la hauteur
   libre pour que prix, stock et bouton s'alignent en bas de chaque carte. */
:is(#selecteur, .v4-cat, #recommandations, #v4-recherche) .bloc-produit-v2 > a {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1 1 auto;
	margin: 0;
	width: auto;
	color: var(--v4-encre);
	text-decoration: none;
}

:is(#selecteur, .v4-cat, #recommandations, #v4-recherche) .bloc-produit-v2 .marketing + a { margin-top: 0; }

/* Visuel : fond sable, produit contenu, jamais rogne */
:is(#selecteur, .v4-cat, #recommandations, #v4-recherche) .bloc-produit-v2 a .img-prd {
	/* Photos au format carre, sur toute la largeur de la carte : on
	   annule le padding de la carte sur les cotes et en haut. */
	display: block;
	width: calc(100% + 28px);
	max-width: none;
	height: auto;
	aspect-ratio: 1 / 1;
	margin: 0 -14px 6px;
	padding: 0;
	box-sizing: border-box;
	border-radius: 0;
	background: var(--v4-blanc);
	/* scale-down (09/11/2026) : une photo plus petite que la case reste a sa
	   taille reelle au lieu d'etre agrandie (floue), la case garde sa taille */
	object-fit: scale-down;
}

/* Plus de cadre sous le visuel : la photo carree couvre la largeur de
   la carte, sur le blanc de la carte. */
:is(#selecteur, .v4-cat, #recommandations, #v4-recherche) .bloc-produit-v2::before { display: none; }

/* Les cartes fantomes du chargement ont leur propre visuel */
:is(#selecteur, .v4-cat, #recommandations, #v4-recherche) .bloc-produit-v2.placeholder::before { display: none; }

/* Bandeau marque (garantie Lifetime...) pose en pastille sur le visuel */
/* Banniere marque au-dessus de la photo, dans le flux. La rangee existe
   meme sans banniere : les photos commencent toutes a la meme hauteur et
   les blocs restent alignes d'une carte a l'autre. */
:is(#selecteur, .v4-cat, #recommandations, #v4-recherche) .bloc-produit-v2 .marketing {
	position: static;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	height: 24px;
	margin: 0;
	padding: 0 6px;
}

:is(#selecteur, .v4-cat, #recommandations, #v4-recherche) .bloc-produit-v2 .marketing:empty { display: flex; }

:is(#selecteur, .v4-cat, #recommandations, #v4-recherche) .bloc-produit-v2 .marketing img {
	display: block;
	height: 24px;
	width: auto;
	border-radius: 6px;
}





:is(#selecteur, .v4-cat, #recommandations, #v4-recherche) .bloc-produit-v2 a .nom-produit,
:is(#selecteur, .v4-cat, #recommandations, #v4-recherche) .bloc-produit-v2 a .avis-clients,
:is(#selecteur, .v4-cat, #recommandations, #v4-recherche) .bloc-produit-v2 .attributs-marketing {
	padding: 0 6px;
	margin: 0;
}

:is(#selecteur, .v4-cat, #recommandations, #v4-recherche) .bloc-produit-v2 .nom-produit,
:is(#selecteur, .v4-cat, #recommandations, #v4-recherche) .bloc-produit-v2 .nom-produit.nom-produit-titre {
	font-size: 18px;
	font-weight: 800;
	line-height: 1.25;
	color: var(--v4-encre);
	/* Deux lignes au plus. La hauteur suit le texte : une ligne si le nom
	   est court. adjustNomProduitHeights() (scripts.v2.js) pose une hauteur
	   en style en ligne, sans jamais la remettre a zero avant de mesurer,
	   et ne repasse pas apres nos appels XHR : on l'annule ici, l'alignement
	   est assure par la grille (subgrid, plus bas). */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: normal;
	height: auto !important;
	min-height: 0;
	max-height: 2.5em;
}

:is(#selecteur, .v4-cat, #recommandations, #v4-recherche) .bloc-produit-v2 .avis-clients {
	font-size: 13px;
	height: auto;
}

:is(#selecteur, .v4-cat, #recommandations, #v4-recherche) .bloc-produit-v2 .avis-clients img {
	width: 13px;
	height: 13px;
}

:is(#selecteur, .v4-cat, #recommandations, #v4-recherche) .bloc-produit-v2 .attributs-marketing {
	display: block;
	font-size: 14px;
	line-height: 1.4;
	color: var(--v4-gris);
}

:is(#selecteur, .v4-cat, #recommandations, #v4-recherche) .bloc-produit-v2 .prix {
	margin: 0;
	padding: 4px 6px 0;
	box-sizing: border-box;
}

/* Stock : une pastille devant le libelle, de la couleur du libelle,
   pour suivre ce que le site affiche deja (en stock, sous x jours...). */
:is(#selecteur, .v4-cat, #recommandations, #v4-recherche) .bloc-produit-v2 .stock {
	color: var(--v4-vert);
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0 6px;
	height: auto;
	font-size: 13px;
	line-height: 1.3;
	font-weight: 700;
}

:is(#selecteur, .v4-cat, #recommandations, #v4-recherche) .bloc-produit-v2 .stock:not(:empty)::before {
	content: "";
	flex-shrink: 0;
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: currentColor;
}

:is(#selecteur, .v4-cat, #recommandations, #v4-recherche) .bloc-produit-v2 .goto {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 50px;
	margin: 2px 6px 0;
	padding: 0 16px;
	border: 0;
	border-radius: var(--v4-pilule);
	background-color: var(--v4-vert);
	color: var(--v4-blanc);
	font-size: 16px;
	font-weight: 800;
	line-height: 1;
	text-transform: none;
	transform: none;
}

:is(#selecteur, .v4-cat, #recommandations, #v4-recherche) .bloc-produit-v2 .goto:hover {
	background-color: #125E33;
	transform: none;
}

/* ---------------------------------------------------------------------
   Alignement des blocs d'une carte a l'autre, par rangee.
   Chaque carte occupe neuf rangees de la grille et les partage avec ses
   voisines (subgrid) : la rangee du nom prend la hauteur du nom le plus
   long de la rangee de cartes, une ligne ou deux, idem pour l'accroche.
   Plus besoin de reserver deux lignes partout ni du script d'egalisation.
   Le lien de la carte passe en display: contents pour que ses enfants
   (visuel, nom, avis, accroche) deviennent des cases de la grille ; ils
   restent dans le lien, donc cliquables.
   Les cartes fantomes du chargement ne sont pas concernees.
   --------------------------------------------------------------------- */
@supports (grid-template-rows: subgrid) {
@media (min-width: 641px) {

	:is(#selecteur, .v4-cat, #recommandations, #v4-recherche) #categorie-v2-produits { row-gap: 0; }

	:is(#selecteur, .v4-cat, #recommandations, #v4-recherche) .bloc-produit-v2:not(.placeholder) {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: subgrid;
		grid-row: span 9;
		row-gap: 8px;
		margin-bottom: 20px;
	}

	:is(#selecteur, .v4-cat, #recommandations, #v4-recherche) .bloc-produit-v2:not(.placeholder) > a { display: contents; }

	:is(#selecteur, .v4-cat, #recommandations, #v4-recherche) .bloc-produit-v2:not(.placeholder) .marketing           { grid-row: 1; }
	:is(#selecteur, .v4-cat, #recommandations, #v4-recherche) .bloc-produit-v2:not(.placeholder) a .img-prd           { grid-row: 2; margin-bottom: 0; }
	:is(#selecteur, .v4-cat, #recommandations, #v4-recherche) .bloc-produit-v2:not(.placeholder) .ban-v3-texte        { grid-row: 3; }
	:is(#selecteur, .v4-cat, #recommandations, #v4-recherche) .bloc-produit-v2:not(.placeholder) .nom-produit         { grid-row: 4; }
	:is(#selecteur, .v4-cat, #recommandations, #v4-recherche) .bloc-produit-v2:not(.placeholder) .avis-clients        { grid-row: 5; }
	:is(#selecteur, .v4-cat, #recommandations, #v4-recherche) .bloc-produit-v2:not(.placeholder) .attributs-marketing { grid-row: 6; }
	:is(#selecteur, .v4-cat, #recommandations, #v4-recherche) .bloc-produit-v2:not(.placeholder) .prix                { grid-row: 7; align-self: end; }
	:is(#selecteur, .v4-cat, #recommandations, #v4-recherche) .bloc-produit-v2:not(.placeholder) .stock               { grid-row: 8; }
	:is(#selecteur, .v4-cat, #recommandations, #v4-recherche) .bloc-produit-v2:not(.placeholder) .goto                { grid-row: 9; }
}
}

@media (max-width: 1200px) {
	:is(#selecteur, .v4-cat, #recommandations, #v4-recherche) #categorie-v2-produits { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
	:is(#selecteur, .v4-cat, #recommandations, #v4-recherche) #categorie-v2-produits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}

/* Telephone : cartes horizontales de la planche Accueil-mobile, visuel a
   gauche, tout le reste a droite. Le lien passe en display: contents pour
   que ses enfants se rangent dans la grille de la carte ; ils restent
   dans le lien, donc toujours cliquables. */
@media (max-width: 640px) {

	:is(#selecteur, .v4-cat, #recommandations, #v4-recherche) #categorie-v2-produits {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	:is(#selecteur, .v4-cat, #recommandations, #v4-recherche) .bloc-produit-v2 {
		display: grid;
		grid-template-columns: 136px minmax(0, 1fr);
		column-gap: 12px;
		row-gap: 4px;
		align-content: start;
		padding: 10px;
		border-radius: 16px;
	}

	:is(#selecteur, .v4-cat, #recommandations, #v4-recherche) .bloc-produit-v2 > a { display: contents; }



	/* Le bloc prix de la feuille du site autorise le retour a la ligne,
	   mais dans la grille de la carte la remise passait sous le prix sans
	   agrandir le bloc : elle chevauchait le stock et le bouton. On garde
	   tout sur une ligne, prix a gauche et remise calee a droite, comme la
	   planche mobile. Le dessin du prix lui-meme ne change pas. */
	:is(#selecteur, .v4-cat, #recommandations, #v4-recherche) .bloc-produit-v2 .prix {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: flex-end;
		gap: 6px;
		width: 100%;
		height: auto;
	}

	:is(#selecteur, .v4-cat, #recommandations, #v4-recherche) .bloc-produit-v2 .pv2-details {
		flex: 1 1 auto;
		min-width: 0;
		height: auto;
	}

	:is(#selecteur, .v4-cat, #recommandations, #v4-recherche) .bloc-produit-v2 .pv2-remise-wrapper { flex-shrink: 0; }

	/* Pastille de remise a la taille de la planche mobile : 20 px dans la
	   feuille du site, elle pesait plus que le prix dans la colonne etroite. */
	:is(#selecteur, .v4-cat, #recommandations, #v4-recherche) .bloc-produit-v2 .pv2-remise {
		height: auto;
		padding: 4px 8px;
		font-size: 14px;
		font-weight: 400;
		line-height: 1.1;
	}

	:is(#selecteur, .v4-cat, #recommandations, #v4-recherche) .bloc-produit-v2 a .img-prd {
		grid-column: 1;
		grid-row: 1 / span 7;
		width: 136px;
		height: 136px;
		min-height: 0;
		aspect-ratio: 1 / 1;
		align-self: start;
		margin: 0;
		padding: 0;
		border-radius: 12px;
	}

	:is(#selecteur, .v4-cat, #recommandations, #v4-recherche) .bloc-produit-v2 > *:not(a),
	:is(#selecteur, .v4-cat, #recommandations, #v4-recherche) .bloc-produit-v2 > a > *:not(.img-prd):not(link) {
		grid-column: 2;
		padding-left: 0;
		padding-right: 0;
	}

	:is(#selecteur, .v4-cat, #recommandations, #v4-recherche) .bloc-produit-v2 .marketing { height: auto; padding: 0; }

	:is(#selecteur, .v4-cat, #recommandations, #v4-recherche) .bloc-produit-v2 .marketing:empty { display: none; }

	:is(#selecteur, .v4-cat, #recommandations, #v4-recherche) .bloc-produit-v2 .marketing img { height: 18px; }


	/* Cartes horizontales : pas d'alignement a tenir entre cartes, le nom
	   prend une ou deux lignes selon sa longueur. */
	:is(#selecteur, .v4-cat, #recommandations, #v4-recherche) .bloc-produit-v2 .nom-produit,
	:is(#selecteur, .v4-cat, #recommandations, #v4-recherche) .bloc-produit-v2 .nom-produit.nom-produit-titre {
		font-size: 16px;
		line-height: 1.2;
		min-height: 0;
		max-height: 2.4em;
	}

	:is(#selecteur, .v4-cat, #recommandations, #v4-recherche) .bloc-produit-v2 .attributs-marketing { font-size: 12px; }

	:is(#selecteur, .v4-cat, #recommandations, #v4-recherche) .bloc-produit-v2 .stock { font-size: 12px; }

	:is(#selecteur, .v4-cat, #recommandations, #v4-recherche) .bloc-produit-v2 .goto {
		height: 44px;
		margin: 4px 0 0;
		font-size: 15px;
	}
}

/* =========================================================================
   ARISTIDE ET ANALYSE PHOTO (home, sous le selecteur)
   Maquette : planche Accueil, bloc « Ou dites-le avec vos mots ».
   Gabarit et habillage seulement : rien n'est branche pour l'instant.
   ========================================================================= */

/* utilitaires du bloc */
.v4-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.v4-sur-telephone { display: none; }

.v4-aristide { padding: 52px 0 76px; }

/* une carte, deux colonnes : 7/12 pour ecrire, 5/12 pour la photo */
.v4-aristide-carte {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	border: 1.5px solid var(--v4-bordure);
	border-radius: 24px;
	background: var(--v4-blanc);
	overflow: hidden;
}

/* --- colonne gauche : ecrire a Aristide --- */
.v4-aristide-ecrire {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 34px 36px;
}

.v4-aristide-entete {
	display: flex;
	align-items: center;
	gap: 14px;
}

/* avatar + pastille verte de presence, comme dans l'en-tete */
.v4-aristide-avatar {
	position: relative;
	flex-shrink: 0;
	width: 56px;
	height: 56px;
}

.v4-aristide-avatar img {
	display: block;
	width: 56px;
	height: 56px;
	border-radius: var(--v4-pilule);
	background: var(--v4-sable);
}

.v4-aristide-avatar::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 2px;
	width: 14px;
	height: 14px;
	box-sizing: border-box;
	border-radius: var(--v4-pilule);
	background: var(--v4-vert);
	border: 2.5px solid var(--v4-blanc);
}

.v4-aristide-titres {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.v4-aristide-titres h2 {
	margin: 0;
	font-family: var(--v4-titre);
	font-weight: 800;
	font-size: 40px;
	line-height: 1;
	text-transform: uppercase;
	color: var(--v4-encre);
}

.v4-aristide-sous-titre {
	font-size: 14px;
	font-weight: 600;
	color: var(--v4-gris);
}

.v4-aristide-texte {
	max-width: 620px;
	margin: 0;
	font-size: 17px;
	line-height: 1.55;
	color: var(--v4-encre-douce);
}

/* champ pilule, bouton rond noir a droite */
.v4-aristide-formulaire {
	position: relative;
	display: flex;
	max-width: 620px;
	margin: 0;
}

.v4-aristide-formulaire input {
	width: 100%;
	height: 56px;
	box-sizing: border-box;
	margin: 0;
	padding: 0 62px 0 22px;
	border: 2px solid var(--v4-encre);
	border-radius: var(--v4-pilule);
	background: var(--v4-blanc);
	font-family: var(--v4-texte);
	font-size: 16px;
	color: var(--v4-encre);
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}

.v4-aristide-formulaire input::placeholder { color: var(--v4-gris); opacity: 1; }

.v4-aristide-formulaire input:focus { box-shadow: 0 0 0 4px rgba(22, 24, 29, .12); }

.v4-aristide-envoyer {
	position: absolute;
	top: 5px;
	right: 5px;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 0;
	border-radius: var(--v4-pilule);
	cursor: pointer;
	background: var(--v4-encre) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 19px 19px no-repeat;
}

.v4-aristide-envoyer:hover { filter: brightness(1.35); }

/* phrases toutes faites */
.v4-aristide-suggestions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.v4-aristide-suggestion {
	flex-shrink: 0;
	margin: 0;
	padding: 9px 15px;
	border: 1.5px solid var(--v4-bordure);
	border-radius: var(--v4-pilule);
	background: var(--v4-blanc);
	font-family: var(--v4-texte);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--v4-encre);
	white-space: nowrap;
	cursor: pointer;
}

.v4-aristide-suggestion:hover { border-color: var(--v4-encre); }

/* --- colonne droite : la photo de l'emplacement --- */
.v4-aristide-photo {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 34px 36px;
	background: var(--v4-creme);
	border-left: 1.5px solid var(--v4-bordure);
}

.v4-aristide-photo-entete {
	display: flex;
	align-items: center;
	gap: 16px;
}

.v4-aristide-photo-vignette {
	flex-shrink: 0;
	width: 108px;
	height: 84px;
	border-radius: 12px;
	overflow: hidden;
	background: var(--v4-sable);
}

.v4-aristide-photo-vignette img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.v4-aristide-photo-titres {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--v4-gris);
}

.v4-aristide-photo-titres strong {
	font-size: 20px;
	font-weight: 800;
	line-height: 1.2;
	color: var(--v4-encre);
}

.v4-aristide-photo-texte {
	margin: 0;
	font-size: 16px;
	line-height: 1.55;
	color: var(--v4-encre-douce);
}

/* bouton vert, icone appareil photo */
.v4-aristide-photo-bouton {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	height: 54px;
	margin: 0;
	padding: 0 20px;
	border: 0;
	border-radius: var(--v4-pilule);
	background: var(--v4-vert);
	font-family: var(--v4-texte);
	font-size: 16px;
	font-weight: 800;
	color: var(--v4-blanc);
	cursor: pointer;
}

.v4-aristide-photo-bouton::before {
	content: "";
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.2' stroke-linejoin='round'%3E%3Cpath d='M4 8h3l2-3h6l2 3h3v11H4z'/%3E%3Ccircle cx='12' cy='13' r='3.4'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
}

.v4-aristide-photo-bouton:hover { filter: brightness(.9); }

.v4-aristide-mention {
	font-size: 13px;
	line-height: 1.45;
	color: var(--v4-gris);
}

/* --- tablette : les deux colonnes s'empilent --- */
@media (max-width: 900px) {
	.v4-aristide { padding: 40px 0 56px; }

	.v4-aristide-carte { grid-template-columns: minmax(0, 1fr); }

	.v4-aristide-photo {
		border-left: 0;
		border-top: 1.5px solid var(--v4-bordure);
	}
}

/* --- telephone : planche Accueil-mobile --- */
@media (max-width: 640px) {
	.v4-sur-ordinateur { display: none; }
	.v4-sur-telephone { display: inline; }

	.v4-aristide { padding: 4px 0 28px; }

	.v4-aristide-carte { border-radius: 20px; }

	.v4-aristide-ecrire {
		gap: 14px;
		padding: 20px 18px 0;
	}

	.v4-aristide-entete { gap: 12px; }

	.v4-aristide-avatar,
	.v4-aristide-avatar img { width: 46px; height: 46px; }

	.v4-aristide-avatar::after {
		bottom: 1px;
		width: 12px;
		height: 12px;
		border-width: 2px;
	}

	.v4-aristide-titres { gap: 2px; }
	.v4-aristide-titres h2 { font-size: 30px; }
	.v4-aristide-sous-titre { font-size: 12px; }

	.v4-aristide-texte { font-size: 15px; line-height: 1.5; }

	.v4-aristide-formulaire input {
		height: 50px;
		padding: 0 54px 0 18px;
		font-size: 15px;
	}

	.v4-aristide-envoyer {
		top: 4px;
		right: 4px;
		width: 42px;
		height: 42px;
		background-size: 18px 18px;
	}

	/* Les quatre suggestions sur une rangee qui defile a l'horizontale,
	   a l'interieur de la marge de la carte (le defilement s'arrete au
	   meme bord que le champ au-dessus). 2 px en haut et en bas pour que
	   le defilement ne rogne pas les bordures des pastilles, et une marge
	   sous la rangee pour la decoller du filet de la partie photo. */
	.v4-aristide-suggestions {
		flex-wrap: nowrap;
		gap: 8px;
		margin: 0 0 18px;
		padding: 2px 0;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.v4-aristide-suggestions::-webkit-scrollbar { display: none; }

	.v4-aristide-suggestion { padding: 8px 13px; font-size: 13px; }

	/* la photo reste dans la meme carte, sous un filet, sur fond blanc */
	.v4-aristide-photo {
		gap: 12px;
		margin: 0 18px;
		padding: 14px 0 20px;
		background: none;
		border-top: 1px solid var(--v4-bordure-pale);
	}

	.v4-aristide-photo-entete { gap: 14px; }

	.v4-aristide-photo-vignette {
		width: 92px;
		height: 72px;
		border-radius: 11px;
	}

	.v4-aristide-photo-titres {
		gap: 3px;
		font-weight: 400;
		line-height: 1.45;
		color: var(--v4-encre-douce);
	}

	.v4-aristide-photo-titres strong { font-size: 17px; line-height: 1.25; }

	.v4-aristide-photo-bouton { height: 50px; gap: 9px; }

	.v4-aristide-photo-bouton::before {
		width: 19px;
		height: 19px;
		background-size: 19px 19px;
	}

	.v4-aristide-mention { font-size: 12px; }
}

/* =========================================================================
   ANALYSE PHOTO DE L'EMPLACEMENT (home, sous la carte Aristide)
   Maquette : planche IA-photo. Panneau masque jusqu'au choix d'une photo,
   rempli par js/analyse-photo.js. Photo a gauche (7/12), precisions puis
   resultat a droite (5/12) ; tout s'empile sous 900 px.
   ========================================================================= */
.v4-photo[hidden],
.v4-photo [hidden] { display: none !important; }

.v4-photo {
	display: flex;
	flex-direction: column;
	gap: 22px;
	margin-top: 28px;
	scroll-margin-top: 20px;
}

.v4-photo-entete {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 30px;
}

.v4-photo-titres {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

#aristide-home .v4-photo-titres h2 {
	margin: 0;
	padding: 0;
	background: none;
	font-family: var(--v4-titre);
	font-size: 44px;
	font-weight: 800;
	line-height: 1;
	text-transform: uppercase;
	color: var(--v4-encre);
}

.v4-photo-titres p {
	margin: 0;
	max-width: 720px;
	font-size: 17px;
	line-height: 1.5;
	color: var(--v4-encre-douce);
}

/* « Prendre une autre photo » : meme bouton vert que dans la carte */
.v4-photo-autre {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
	height: 52px;
	margin: 0;
	padding: 0 24px;
	border: 0;
	border-radius: var(--v4-pilule);
	background: var(--v4-vert);
	font-family: var(--v4-texte);
	font-size: 15px;
	font-weight: 800;
	color: var(--v4-blanc);
	cursor: pointer;
}

.v4-photo-autre::before {
	content: "";
	width: 19px;
	height: 19px;
	flex-shrink: 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.2' stroke-linejoin='round'%3E%3Cpath d='M4 8h3l2-3h6l2 3h3v11H4z'/%3E%3Ccircle cx='12' cy='13' r='3.4'/%3E%3C/svg%3E") center / 19px 19px no-repeat;
}

.v4-photo-autre:hover { filter: brightness(.9); }

.v4-photo-grille {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: 24px;
	align-items: start;
}

/* --- colonne gauche : la photo --- */
.v4-photo-gauche {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

.v4-photo-image {
	position: relative;
	aspect-ratio: 700 / 470;
	border-radius: 20px;
	background: var(--v4-encre);
	overflow: hidden;
}

.v4-photo-image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.v4-photo-etat {
	position: absolute;
	left: 16px;
	top: 16px;
	padding: 6px 12px;
	border-radius: var(--v4-pilule);
	background: rgba(255, 255, 255, .92);
	font-size: 12px;
	font-weight: 800;
	color: var(--v4-encre);
}

.v4-photo-etat:empty { display: none; }

.v4-photo-confidentialite {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 12px 16px;
	border: 1.5px solid var(--v4-bordure);
	border-radius: 12px;
	background: var(--v4-blanc);
	font-size: 13px;
	line-height: 1.45;
	color: var(--v4-encre-douce);
}

.v4-photo-confidentialite::before {
	content: "";
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2316181D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='10' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
}

/* --- colonne droite --- */
.v4-photo-droite {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

/* carte blanche commune : precisions, attente, constat */
.v4-photo-precisions,
.v4-photo-attente,
.v4-photo-constat-carte,
.v4-photo-erreur {
	margin: 0;
	padding: 20px 22px;
	border: 1.5px solid var(--v4-bordure);
	border-radius: var(--v4-rayon);
	background: var(--v4-blanc);
}

/* precisions facultatives */
.v4-photo-precisions {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.v4-photo-precisions-titre { font-size: 17px; font-weight: 800; color: var(--v4-encre); }
.v4-photo-precisions-titre span { font-weight: 600; color: var(--v4-gris); }

.v4-photo-question {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
}

.v4-photo-question-titre {
	font-size: 13px;
	font-weight: 800;
	color: var(--v4-encre-douce);
}

.v4-photo-puces {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.v4-photo-puce {
	margin: 0;
	padding: 8px 14px;
	border: 1.5px solid var(--v4-bordure-chip);
	border-radius: var(--v4-pilule);
	background: var(--v4-blanc);
	font-family: var(--v4-texte);
	font-size: 14px;
	font-weight: 700;
	color: var(--v4-encre);
	cursor: pointer;
}

.v4-photo-puce:hover { border-color: var(--v4-encre); }

.v4-photo-puce[aria-pressed="true"] {
	border-color: var(--v4-encre);
	background: var(--v4-encre);
	color: var(--v4-blanc);
}

.v4-photo-longueur-champ {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	font-weight: 600;
	color: var(--v4-gris);
}

.v4-photo-dimensions-champs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 20px;
}

.v4-photo-longueur-champ input {
	width: 84px;
	height: 44px;
	margin: 0;
	padding: 0 14px;
	border: 1.5px solid var(--v4-bordure-chip);
	border-radius: 12px;
	background: var(--v4-blanc);
	font-family: var(--v4-texte);
	font-size: 16px;
	color: var(--v4-encre);
}

.v4-photo-longueur-champ input:focus { outline: 0; border-color: var(--v4-encre); }

.v4-photo-analyser {
	height: 54px;
	margin: 4px 0 0;
	padding: 0 20px;
	border: 0;
	border-radius: var(--v4-pilule);
	background: var(--v4-rouge);
	font-family: var(--v4-texte);
	font-size: 16px;
	font-weight: 800;
	color: var(--v4-blanc);
	cursor: pointer;
}

.v4-photo-analyser:hover { filter: brightness(.92); }

/* attente */
.v4-photo-attente {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 40px 22px;
	text-align: center;
}

.v4-photo-roue {
	width: 36px;
	height: 36px;
	border: 3px solid var(--v4-sable);
	border-top-color: var(--v4-vert);
	border-radius: 50%;
	animation: v4-photo-tourne .9s linear infinite;
}

@keyframes v4-photo-tourne { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
	.v4-photo-roue { animation-duration: 3s; }
}

.v4-photo-attente-texte { font-size: 16px; font-weight: 800; color: var(--v4-encre); }
.v4-photo-attente-duree { font-size: 13px; color: var(--v4-gris); }

/* resultat : « Ce que je vois » */
.v4-photo-resultat {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.v4-photo-constat-carte {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.v4-photo-constat-entete {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 17px;
}

.v4-photo-constat-entete img {
	width: 38px;
	height: 38px;
	border-radius: 50%;
}

.v4-photo-vu {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.v4-photo-constat-puce {
	padding: 7px 13px;
	border-radius: var(--v4-pilule);
	background: #E7F2EA;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.35;
	color: #155D33;
}

.v4-photo-constat-puce.attention { background: #F6EEDF; color: #7A5A14; }

.v4-photo-constat {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: var(--v4-encre-douce);
}

.v4-photo-verifier {
	margin: 0;
	padding: 0 0 0 18px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--v4-encre-douce);
}

.v4-photo-produits-titre { font-size: 17px; color: var(--v4-encre); }

/* type prefere du client qui ne convient pas a l'endroit photographie */
.v4-photo-preference {
	margin: 0;
	padding: 12px 16px;
	border-radius: 12px;
	background: #F6EEDF;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
	color: #7A5A14;
}

.v4-photo-produits {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* carte produit, lien vers la fiche */
.v4-photo-produit {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 14px;
	border: 1.5px solid var(--v4-bordure);
	border-radius: 16px;
	background: var(--v4-blanc);
	text-decoration: none;
	color: var(--v4-encre);
}

.v4-photo-produit:hover { border-color: var(--v4-encre); color: var(--v4-encre); }

.v4-photo-produit-image {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 84px;
	height: 84px;
	border-radius: 12px;
	background: var(--v4-sable);
}

.v4-photo-produit-image img {
	max-width: 84%;
	max-height: 84%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.v4-photo-produit-corps {
	display: flex;
	flex-direction: column;
	gap: 5px;
	flex-grow: 1;
	min-width: 0;
}

.v4-photo-produit-ligne {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.v4-photo-produit-titres {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 10px;
	min-width: 0;
}

.v4-photo-produit-nom { font-size: 16px; font-weight: 800; }

.v4-photo-produit-badge {
	padding: 3px 9px;
	border-radius: var(--v4-pilule);
	background: var(--v4-sable);
	font-size: 12px;
	font-weight: 800;
	color: var(--v4-encre-douce);
}

.v4-photo-produit-badge.recommande { background: #E7F2EA; color: #155D33; }

.v4-photo-produit-prix {
	flex-shrink: 0;
	font-size: 20px;
	font-weight: 800;
	white-space: nowrap;
}

/* Bloc prix des listes produits (bloc_prix_v2), sans la pastille de remise :
   prix barre en noir suivi d'un « i » ; au survol (toucher sur telephone),
   infobulle « Prix de comparaison : ... » geree par scripts.v2.js ; prix
   rouge dessous. */
.v4-photo-produit-prix .prix {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	line-height: 1.1;
}

.v4-photo-produit-prix .pv2-details {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
}

.v4-photo-produit-prix .pv2-old-price {
	display: flex;
	align-items: center;
	gap: 2px;
}

.v4-photo-produit-prix .pv2-strike {
	font-size: 15px;
	font-weight: 700;
	color: var(--v4-encre);
	text-decoration: line-through;
}

/* le « i » seul, zone de survol un peu plus large que l'icone */
.v4-photo-produit-prix .pv2-compare {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	cursor: pointer;
}

.v4-photo-produit-prix .pv2-compare::after {
	content: "i";
	display: flex;
	align-items: center;
	justify-content: center;
	width: 12px;
	height: 12px;
	border: 1px solid var(--v4-encre);
	border-radius: 50%;
	background: var(--v4-blanc);
	font-family: Georgia, serif;
	font-size: 9px;
	font-weight: 700;
	line-height: 1;
	color: var(--v4-encre);
}

.v4-photo-produit-prix .pv2-current {
	font-size: 22px;
	font-weight: 800;
	color: var(--price-color, #8C0000);
}

.v4-photo-produit-prix .pv2-euro { font-size: 70%; }

.v4-photo-produit-prix .pv2-tooltip {
	display: none;
	position: absolute;
	right: 0;
	bottom: calc(100% + 6px);
	z-index: 50;
	width: 220px;
	padding: 6px 8px;
	border-radius: 6px;
	background: #F4F4F4;
	box-shadow: 0 4px 8px rgba(0, 0, 0, .1);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.35;
	white-space: normal;
	text-align: left;
	color: #4A4A4A;
}

.v4-photo-produit-prix .pv2-tooltip::after {
	content: "";
	position: absolute;
	top: 100%;
	right: 14px;
	border: 7px solid transparent;
	border-top-color: #F4F4F4;
}

.v4-photo-produit-details { font-size: 13px; color: var(--v4-gris); }

.v4-photo-produit-details .v4-avis-etoiles {
	margin-right: 6px;
	font-size: 14px;
	vertical-align: -1px;
}

.v4-photo-produit-raison {
	font-size: 14px;
	line-height: 1.5;
	color: var(--v4-encre-douce);
}

.v4-photo-aucun,
.v4-photo-avertissement {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--v4-gris);
}

.v4-photo-aucun { font-size: 15px; color: var(--v4-encre-douce); }

.v4-photo-avertissement a { font-weight: 800; color: var(--v4-encre); white-space: nowrap; }

.v4-photo-erreur {
	border-color: #E8C3BF;
	background: #FBEFEE;
	font-size: 15px;
	line-height: 1.5;
	color: #8A1C15;
}

/* --- tablette : photo au-dessus, resultat dessous --- */
@media (max-width: 900px) {
	.v4-photo-grille { grid-template-columns: minmax(0, 1fr); }
	.v4-photo-entete { flex-direction: column; align-items: stretch; gap: 16px; }
	.v4-photo-autre { justify-content: center; }
}

/* --- telephone --- */
@media (max-width: 640px) {
	.v4-photo { gap: 16px; margin-top: 20px; }
	#aristide-home .v4-photo-titres h2 { font-size: 32px; }
	.v4-photo-titres p { font-size: 15px; }
	.v4-photo-autre { height: 48px; }
	.v4-photo-image { aspect-ratio: 4 / 3; border-radius: 16px; }
	.v4-photo-precisions,
	.v4-photo-constat-carte,
	.v4-photo-erreur { padding: 16px; }
	.v4-photo-vu { grid-template-columns: minmax(0, 1fr); gap: 8px; }
	.v4-photo-produit { gap: 12px; padding: 12px; }
	.v4-photo-produit-image { width: 72px; height: 72px; }
	.v4-photo-produit-prix { font-size: 18px; }
	.v4-photo-produit-prix .pv2-current { font-size: 19px; }
}

/* =========================================================================
   GUIDE : SUR PIED, MURAL OU A SCELLER (home, sous Aristide)
   Maquette : planche Accueil. Bande blanche sur toute la largeur de
   l'ecran, contenu dans la colonne de 1400 px.
   ========================================================================= */

.v4-guide {
	display: flex;
	flex-direction: column;
	gap: 36px;
	padding: 80px 0;
	background: var(--v4-blanc);
	/* fond blanc jusqu'aux bords de l'ecran sans creer de defilement
	   horizontal : l'ombre deborde, la decoupe ne garde que les cotes */
	box-shadow: 0 0 0 100vmax var(--v4-blanc);
	clip-path: inset(0 -100vmax);
}

.v4-guide-intro {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 760px;
}

.v4-guide-intro h2 {
	margin: 0;
	font-family: var(--v4-titre);
	font-weight: 800;
	font-size: 54px;
	line-height: 1;
	text-transform: uppercase;
	color: var(--v4-encre);
}

.v4-guide-intro p {
	margin: 0;
	font-size: 18px;
	color: var(--v4-encre-douce);
}

/* --- trois cartes --- */
.v4-guide-cartes {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

/* la carte entiere est le lien ; le « bouton » est un span habille */
.v4-guide-carte {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 28px;
	border-radius: 20px;
	background: var(--v4-creme);
	color: var(--v4-encre);
	text-decoration: none;
	transition: box-shadow .2s ease;
}

.v4-guide-carte:hover { color: var(--v4-encre); box-shadow: 0 12px 32px rgba(22, 24, 29, .10); }

.v4-guide-tete {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
}

.v4-guide-tete h3 {
	margin: 0;
	font-family: var(--v4-texte);
	font-size: 26px;
	font-weight: 800;
	line-height: 1.15;
	text-transform: none;		/* les h3 du site : capitales, fond gris, marge 5 px */
	letter-spacing: 0;
	padding: 0;
	background: none;
	color: var(--v4-encre);
}

.v4-guide-prix {
	font-size: 15px;
	font-weight: 700;
	color: var(--v4-gris);
	white-space: nowrap;
}

.v4-guide-prix strong {
	font-size: 22px;
	font-weight: 800;
	color: var(--v4-encre);
}

.v4-guide-court { display: none; }

.v4-guide-carte p {
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
	color: var(--v4-encre-douce);
}

.v4-guide-points {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 15px;
}

.v4-guide-points li {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	line-height: 1.35;
}

/* coche verte */
.v4-guide-points li::before {
	content: "";
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%231E6B38' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
}

.v4-guide-bouton {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 50px;
	margin-top: auto;
	border-radius: var(--v4-pilule);
	background: var(--v4-encre);
	color: var(--v4-blanc);
	font-size: 15px;
	font-weight: 800;
}

/* le bouton descend en bas de la carte meme si les textes different */
.v4-guide-points { margin-bottom: 8px; }

.v4-guide-carte:hover .v4-guide-bouton { filter: brightness(1.35); }

/* --- six raccourcis vers les autres rayons --- */
.v4-guide-raccourcis {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 14px;
}

.v4-guide-raccourci {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 18px 20px;
	border: 1.5px solid var(--v4-bordure);
	border-radius: 16px;
	color: var(--v4-encre);
	text-decoration: none;
	transition: border-color .2s ease;
}

.v4-guide-raccourci:hover { color: var(--v4-encre); border-color: var(--v4-encre); }

.v4-guide-raccourci strong { font-size: 17px; font-weight: 800; }

.v4-guide-raccourci span { font-size: 14px; color: var(--v4-gris); }

.v4-guide-raccourci-promo {
	border-color: transparent;
	background: #FBE9E7;
}

.v4-guide-raccourci-promo,
.v4-guide-raccourci-promo span,
.v4-guide-raccourci-promo:hover { color: #9E1B14; }

.v4-guide-raccourci-promo:hover { border-color: #9E1B14; }

/* --- ecrans moyens --- */
@media (max-width: 1200px) {
	.v4-guide-raccourcis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
	.v4-guide { gap: 28px; padding: 56px 0; }
	.v4-guide-intro h2 { font-size: 40px; }
	.v4-guide-cartes { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}

/* --- telephone : planche Accueil-mobile, cartes reduites a une ligne --- */
@media (max-width: 640px) {
	.v4-guide { gap: 14px; padding: 32px 0; }

	.v4-guide-intro h2 { font-size: 34px; }
	.v4-guide-intro p { display: none; }

	.v4-guide-cartes { gap: 14px; }

	/* titre et phrase courte a gauche, prix a droite */
	.v4-guide-carte {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		column-gap: 12px;
		row-gap: 3px;
		padding: 16px;
		border-radius: 14px;
	}

	.v4-guide-tete { display: contents; }

	.v4-guide-tete h3 { grid-column: 1; grid-row: 1; font-size: 17px; }

	.v4-guide-prix {
		grid-column: 2;
		grid-row: 1 / span 2;
		font-size: 13px;
	}

	.v4-guide-prix strong { font-size: 17px; }

	.v4-guide-court {
		display: block;
		grid-column: 1;
		grid-row: 2;
		font-size: 14px;
		line-height: 1.35;
		color: var(--v4-gris);
	}

	.v4-guide-carte p,
	.v4-guide-points,
	.v4-guide-bouton { display: none; }

	.v4-guide-raccourcis {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 8px;
		padding-top: 4px;
	}

	/* raccourcis : le nom seul, centre */
	.v4-guide-raccourci {
		align-items: center;
		justify-content: center;
		padding: 12px 8px;
		border-radius: 12px;
		text-align: center;
	}

	.v4-guide-raccourci strong { font-size: 14px; font-weight: 700; }
	.v4-guide-raccourci-promo strong { font-weight: 800; }

	.v4-guide-raccourci span { display: none; }
}

/* =========================================================================
   POURQUOI NOUS + AVIS CLIENTS (home, sous le guide d'installation)
   Maquette : planche Accueil. Carte sombre a gauche (5/12), avis a
   droite (7/12). Sur telephone, carte sombre courte et un seul avis.
   ========================================================================= */

.v4-confiance {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 24px;
	align-items: start;
	padding: 80px 0;
}

/* --- carte sombre --- */
.v4-confiance-carte {
	display: flex;
	flex-direction: column;
	gap: 22px;
	padding: 36px;
	border-radius: 24px;
	background: var(--v4-encre);
	color: var(--v4-blanc);
}

.v4-confiance-etiquette {
	font-size: 14px;
	font-weight: 800;
	letter-spacing: .8px;
	text-transform: uppercase;
	color: var(--v4-or);
}

.v4-confiance-accroche {
	margin: 0;
	font-family: var(--v4-titre);
	font-size: 36px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--v4-blanc);
}

.v4-confiance-points {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding: 0 0 22px;
	border-bottom: 1px solid #33363D;
	list-style: none;
}

.v4-confiance-points li {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}

.v4-confiance-icone {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 34px;
	height: 34px;
	border-radius: var(--v4-pilule);
	background: #2A2D33;
	color: var(--v4-or);
}

.v4-confiance-points li > span:last-child {
	display: flex;
	flex-direction: column;
	gap: 3px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--v4-sur-encre);
}

.v4-confiance-points strong {
	font-size: 16px;
	font-weight: 800;
	line-height: 1.3;
	color: var(--v4-blanc);
}

.v4-confiance-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.v4-confiance-tel,
.v4-confiance-carte .v4-confiance-aristide {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 52px;
	box-sizing: border-box;
	margin: 0;
	border-radius: var(--v4-pilule);
	font-family: var(--v4-texte);
	font-size: 16px;
	font-weight: 800;
	text-decoration: none;
	cursor: pointer;
}

.v4-confiance-tel {
	padding: 0 22px;
	background: var(--v4-blanc);
	color: var(--v4-encre);
}

.v4-confiance-tel:hover { color: var(--v4-encre); filter: brightness(.92); }

/* deux classes : chat2.js injecte .open-chat { display: inline-block } */
.v4-confiance-carte .v4-confiance-aristide {
	padding: 0 20px;
	border: 2px solid var(--v4-blanc);
	background: transparent;
	color: var(--v4-blanc);
}

.v4-confiance-carte .v4-confiance-aristide:hover { background: rgba(255, 255, 255, .08); }

.v4-confiance-aristide img {
	display: block;
	width: 26px;
	height: 26px;
	border-radius: var(--v4-pilule);
}

/* --- avis --- */
.v4-avis {
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
}

.v4-avis-entete {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.v4-avis-moyenne {
	display: flex;
	align-items: center;
	gap: 18px;
}

.v4-avis-note {
	font-family: var(--v4-titre);
	font-size: 72px;
	font-weight: 800;
	line-height: 1;
	color: var(--v4-encre);
}

.v4-avis-resume {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 15px;
	font-weight: 600;
	color: var(--v4-gris);
}

.v4-avis-etoiles {
	color: #D99A00;
	letter-spacing: 1px;
	white-space: nowrap;
}

.v4-avis-resume .v4-avis-etoiles { font-size: 22px; letter-spacing: 2px; }

.v4-avis-tous {
	font-size: 16px;
	font-weight: 700;
	color: var(--v4-encre);
	text-decoration: underline;
	text-underline-offset: 4px;
	white-space: nowrap;
}

.v4-avis-liste {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.v4-avis-carte {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 22px 24px;
	border: 0;					/* la feuille du site souligne les article en rouge */
	border-radius: 18px;
	background: var(--v4-blanc);
	box-shadow: none;
}

.v4-avis-carte-haut {
	display: flex;
	justify-content: space-between;
	gap: 12px;
}

.v4-avis-confirme {
	font-size: 13px;
	font-weight: 700;
	color: var(--v4-vert);
}

.v4-avis-confirme:empty { display: none; }

.v4-avis-carte p {
	margin: 0;
	font-size: 17px;
	line-height: 1.5;
	color: var(--v4-encre);
}

.v4-avis-auteur {
	font-size: 14px;
	font-weight: 700;
	color: var(--v4-gris);
}

.v4-avis-auteur a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--v4-bordure);
	text-underline-offset: 3px;
}

.v4-avis-auteur a:hover { color: var(--v4-encre); }

/* --- tablette : les deux colonnes s'empilent --- */
@media (max-width: 1000px) {
	.v4-confiance {
		grid-template-columns: minmax(0, 1fr);
		padding: 56px 0;
	}
}

/* --- telephone : planche Accueil-mobile --- */
@media (max-width: 640px) {
	.v4-confiance { gap: 14px; padding: 32px 0; }

	.v4-confiance-carte {
		gap: 14px;
		padding: 22px;
		border-radius: 20px;
	}

	.v4-confiance-etiquette { font-size: 12px; }

	.v4-confiance-accroche { font-size: 28px; }

	.v4-confiance-points { display: none; }

	.v4-confiance-actions {
		flex-direction: column;
		gap: 14px;
	}

	.v4-confiance-tel,
	.v4-confiance-carte .v4-confiance-aristide {
		width: 100%;
		height: 50px;
	}

	.v4-confiance-tel svg,
	.v4-confiance-aristide img { display: none; }

	/* avis : une seule carte blanche, la note puis les quatre avis,
	   separes par un filet */
	.v4-avis {
		gap: 10px;
		padding: 20px;
		border-radius: 20px;
		background: var(--v4-blanc);
	}

	.v4-avis-moyenne { gap: 12px; }
	.v4-avis-note { font-size: 48px; }
	.v4-avis-resume { font-size: 13px; font-weight: 400; }
	.v4-avis-resume .v4-avis-etoiles { font-size: 18px; letter-spacing: 1px; }

	.v4-avis-liste { gap: 0; }

	.v4-avis-carte {
		gap: 8px;
		padding: 16px 0;
		border-radius: 0;
		border-top: 1px solid var(--v4-bordure-pale);
	}

	.v4-avis-carte:first-child { padding-top: 6px; border-top: 0; }

	.v4-avis-carte-haut { font-size: 14px; }

	.v4-avis-carte p { font-size: 16px; }

	.v4-avis-auteur { font-size: 13px; }

	.v4-avis-tous { font-size: 15px; text-underline-offset: 3px; }
}

/* =========================================================================
   FAQ, COLLECTIVITES ET TEXTE DE REFERENCEMENT (bas de la home)
   Maquette : planches Accueil et Accueil-mobile.
   ========================================================================= */

/* --- FAQ : bande blanche pleine largeur, intro 4/12, questions 8/12 --- */
.v4-faq {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	gap: 24px;
	padding: 80px 0;
	background: var(--v4-blanc);
	box-shadow: 0 0 0 100vmax var(--v4-blanc);
	clip-path: inset(0 -100vmax);
}

.v4-faq-intro {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
}

.v4-faq-intro h2 {
	margin: 0;
	font-family: var(--v4-titre);
	font-weight: 800;
	font-size: 54px;
	line-height: 1;
	text-transform: uppercase;
	color: var(--v4-encre);
}

.v4-faq-intro p {
	margin: 0;
	font-size: 17px;
	line-height: 1.5;
	color: var(--v4-encre-douce);
}

.v4-faq-intro p a { color: var(--v4-encre); font-weight: 700; white-space: nowrap; }

.v4-faq-guide {
	font-size: 16px;
	font-weight: 700;
	color: var(--v4-encre);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.v4-faq-liste { display: flex; flex-direction: column; }

.v4-faq-item {
	padding: 22px 0;
	border-top: 1px solid var(--v4-bordure);
}

.v4-faq-item:last-child { border-bottom: 1px solid var(--v4-bordure); }

/* ordinateur : tout est deplie, le titre n'est pas un bouton */
.v4-faq-item summary {
	display: block;
	list-style: none;
	cursor: default;
}

.v4-faq-item summary::-webkit-details-marker { display: none; }

.v4-faq-item h3 {
	margin: 0;
	font-family: var(--v4-texte);
	font-size: 19px;
	font-weight: 800;
	line-height: 1.3;
	text-transform: none;		/* les h3 du site : capitales, fond gris, marge 5 px */
	letter-spacing: 0;
	padding: 0;
	background: none;
	color: var(--v4-encre);
}

.v4-faq-item p {
	margin: 8px 0 0;
	font-size: 16px;
	line-height: 1.55;
	color: var(--v4-encre-douce);
}

.v4-faq-item p a {
	color: var(--v4-encre);
	font-weight: 700;
	white-space: nowrap;
	text-underline-offset: 3px;
}

/* --- Collectivites : bande rouge pleine largeur --- */
.v4-collectivites {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	padding: 56px 0;
	background: var(--v4-rouge);
	box-shadow: 0 0 0 100vmax var(--v4-rouge);
	clip-path: inset(0 -100vmax);
	color: var(--v4-blanc);
}

.v4-collectivites-texte {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.v4-collectivites h2 {
	margin: 0;
	font-family: var(--v4-titre);
	font-weight: 800;
	font-size: 44px;
	line-height: 1;
	text-transform: uppercase;
	color: var(--v4-blanc);
}

.v4-collectivites p {
	margin: 0;
	font-size: 18px;
	line-height: 1.45;
	color: var(--v4-blanc);
}

.v4-collectivites-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}

.v4-collectivites-bouton,
.v4-collectivites-tel {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 56px;
	box-sizing: border-box;
	padding: 0 30px;
	border-radius: var(--v4-pilule);
	font-size: 17px;
	font-weight: 800;
	text-decoration: none;
	white-space: nowrap;
}

.v4-collectivites-bouton { background: var(--v4-blanc); color: var(--v4-encre); }
.v4-collectivites-bouton:hover { color: var(--v4-encre); filter: brightness(.92); }

.v4-collectivites-tel { border: 2px solid var(--v4-blanc); color: var(--v4-blanc); padding: 0 24px; }
.v4-collectivites-tel:hover { color: var(--v4-blanc); background: rgba(255, 255, 255, .12); }

/* --- tablette --- */
@media (max-width: 1000px) {
	.v4-faq { grid-template-columns: minmax(0, 1fr); padding: 56px 0; }
	.v4-faq-intro h2 { font-size: 40px; }

	.v4-collectivites {
		flex-direction: column;
		align-items: flex-start;
		gap: 22px;
		padding: 44px 0;
	}
}

/* --- telephone : accordeon, bandeau compact, texte resserre --- */
@media (max-width: 640px) {
	.v4-faq { gap: 12px; padding: 32px 0; }

	.v4-faq-intro h2 { font-size: 34px; }
	.v4-faq-intro p,
	.v4-faq-guide { display: none; }

	.v4-faq-item { padding: 14px 0; }

	.v4-faq-item summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		min-height: 28px;
		cursor: pointer;
	}

	/* chevron qui pivote a l'ouverture */
	.v4-faq-item summary::after {
		content: "";
		flex-shrink: 0;
		width: 14px;
		height: 14px;
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M2 5l5 5 5-5' fill='none' stroke='%2316181D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
		transition: transform .2s ease;
	}

	.v4-faq-item[open] summary::after { transform: rotate(180deg); }

	.v4-faq-item h3 { font-size: 16px; }

	.v4-faq-item p { font-size: 15px; line-height: 1.5; }

	.v4-collectivites { gap: 16px; padding: 32px 0; }
	.v4-collectivites h2 { font-size: 32px; }
	.v4-collectivites p { font-size: 16px; }

	.v4-collectivites-actions {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}

	.v4-collectivites-bouton,
	.v4-collectivites-tel { height: 50px; font-size: 16px; }

}

/* =========================================================================
   TEXTE DE REFERENCEMENT (#home-choisir.v4-seo, bas de la home)
   Bande blanche pleine largeur. A gauche (5/12) le titre, l'intro et le
   bloc conseil ; a droite (7/12) la gamme en trois cartes et les cinq
   arguments en liste cochee. Sur telephone, la planche Accueil-mobile.
   ========================================================================= */

#home-choisir.v4-seo {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 56px;
	align-items: start;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 72px 0 80px;
	background: var(--v4-blanc);
	box-shadow: 0 0 0 100vmax var(--v4-blanc);
	clip-path: inset(0 -100vmax);
	text-align: left;
	font-family: var(--v4-texte);
	color: var(--v4-encre-douce);
}

/* titres : la feuille du site met les h1/h2/h3 en capitales, sur fond gris */
#home-choisir.v4-seo h1,
#home-choisir.v4-seo h2,
#home-choisir.v4-seo h3 {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	text-align: left;
	letter-spacing: 0;
	color: var(--v4-encre);
}

#home-choisir.v4-seo h1,
#home-choisir.v4-seo h2 {
	font-family: var(--v4-titre);
	font-weight: 800;
	line-height: 1.02;
	text-transform: uppercase;
}

#home-choisir.v4-seo h1 { font-size: 44px; }
#home-choisir.v4-seo h1 strong { font-weight: 800; color: var(--v4-rouge); }
#home-choisir.v4-seo h2 { font-size: 30px; }

#home-choisir.v4-seo h3 {
	font-family: var(--v4-texte);
	font-size: 17px;
	font-weight: 800;
	line-height: 1.3;
	text-transform: none;
}

#home-choisir.v4-seo p {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--v4-encre-douce);
}

#home-choisir.v4-seo strong { color: var(--v4-encre); }

#home-choisir.v4-seo a { color: var(--v4-encre); font-weight: 700; text-underline-offset: 3px; }

/* --- colonne gauche --- */
#home-choisir .v4-seo-gauche {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

#home-choisir .v4-seo-conseil {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	margin-top: 10px;
	padding: 28px;
	border-radius: 20px;
	background: var(--v4-creme);
}

#home-choisir .v4-seo-conseil h2 { font-size: 26px; }

#home-choisir.v4-seo .v4-seo-tel {
	display: flex;
	align-items: center;
	height: 50px;
	margin-top: 4px;
	padding: 0 24px;
	border-radius: var(--v4-pilule);
	background: var(--v4-encre);
	color: var(--v4-blanc);
	font-size: 16px;
	font-weight: 800;
	text-decoration: none;
}

#home-choisir.v4-seo .v4-seo-tel:hover { color: var(--v4-blanc); filter: brightness(1.35); }

/* --- colonne droite --- */
#home-choisir .v4-seo-droite {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

#home-choisir .v4-seo-droite > h2:not(:first-child) { margin-top: 22px; }

#home-choisir .v4-seo-gamme {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	margin-top: 4px;
}

#home-choisir.v4-seo .v4-seo-carte {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 22px;
	border-radius: 16px;
	background: var(--v4-creme);
	font-weight: 400;
	text-decoration: none;
	transition: box-shadow .2s ease;
}

#home-choisir.v4-seo .v4-seo-carte:hover { box-shadow: 0 12px 32px rgba(22, 24, 29, .10); }

#home-choisir .v4-seo-carte p { font-size: 15px; line-height: 1.5; }

/* arguments : deux colonnes, coche verte */
#home-choisir .v4-seo-points {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 24px;
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
}

#home-choisir .v4-seo-points li {
	position: relative;
	padding-left: 30px;
	font-size: 16px;
	line-height: 1.45;
	color: var(--v4-encre-douce);
}

#home-choisir .v4-seo-points li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1px;
	width: 20px;
	height: 20px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%231E6B38' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
}

/* --- tablette : une colonne --- */
@media (max-width: 1000px) {
	#home-choisir.v4-seo {
		grid-template-columns: minmax(0, 1fr);
		gap: 36px;
		padding: 56px 0 64px;
	}

	#home-choisir.v4-seo h1 { font-size: 38px; }
}

/* --- telephone : planche Accueil-mobile, texte resserre --- */
@media (max-width: 640px) {
	#home-choisir.v4-seo { gap: 22px; padding: 28px 0 36px; }

	#home-choisir.v4-seo h1 { font-size: 30px; }
	#home-choisir.v4-seo h2 { font-size: 26px; }
	#home-choisir.v4-seo p { font-size: 15px; }

	#home-choisir .v4-seo-conseil { padding: 20px; border-radius: 16px; }
	#home-choisir .v4-seo-conseil h2 { font-size: 22px; }

	#home-choisir .v4-seo-droite > h2:not(:first-child) { margin-top: 14px; }

	/* la gamme devient une simple liste, comme la maquette mobile */
	#home-choisir .v4-seo-gamme { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	#home-choisir.v4-seo .v4-seo-carte { gap: 4px; padding: 0; border-radius: 0; background: none; }
	#home-choisir.v4-seo .v4-seo-carte:hover { box-shadow: none; }

	#home-choisir .v4-seo-points { grid-template-columns: minmax(0, 1fr); gap: 8px; }
	#home-choisir .v4-seo-points li { font-size: 15px; }

	#home-choisir.v4-seo .v4-seo-tel { width: 100%; justify-content: center; box-sizing: border-box; }
}

/* =========================================================================
   VITESSE : DECALAGE AU CHARGEMENT (CLS)
   Sous 800 px, l'en-tete #header-2 est fixe et scripts.v2.js
   (adjustHeaderSpacing) pousse la page de sa hauteur, 172 px, une fois le
   DOM pret : tout le contenu sautait de 172 px (CLS 0,32 sur PageSpeed).
   On reserve la place des le premier affichage. Le script ecrit ensuite la
   meme valeur en style en ligne, donc plus rien ne bouge. Si l'en-tete
   n'est pas fixe (bandeau code promo), la regle ne s'applique pas.
   ========================================================================= */
@media (max-width: 800px) {
	body:has(#header-2.header-2-fixed) { padding-top: 172px; }
}

/* =========================================================================
   PAGE CATEGORIE V4
   Gabarit : panierbasket.fr/template_categorie_v4.tpl
   Maquette : planches Categorie (ordinateur) et Categorie-mobile.
   Deux presentations des filtres sur ordinateur (1025 px et plus), selon
   la classe posee sur #categorie-v2 :
   - .v4-filtres-gauche : le tiroir #filtres-v2-menu devient une colonne
     fixe a gauche, les choix s'appliquent tout de suite ;
   - .v4-filtres-haut : barre de filtres horizontale et tiroir, comme la
     production.
   En dessous de 1025 px, les deux modes donnent la barre et le tiroir.
   Les cartes produits sont celles de la home (bloc plus haut).
   ========================================================================= */

.v4-cat {
	--filtres-color: var(--v4-rouge);
	text-align: left;
}

/* --- Fil d'Ariane --- */
.v4-cat #arbo {
	display: block;
	min-height: 0;
	margin: 20px 0 0;
	padding: 0;
	text-align: left;
	font-size: 14px;
	color: var(--v4-gris);
}

.v4-cat #arbo a { color: var(--v4-gris); }
.v4-cat #arbo a:hover { color: var(--v4-encre); text-decoration: underline; text-underline-offset: 3px; }

/* --- En-tete : titre et intro a gauche, reperes a droite --- */
.v4-cat-entete {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 24px;
	align-items: end;
	padding: 16px 0 28px;
}

.v4-cat #h1-categorie {
	display: block;
	width: auto;
	min-height: 0;
	margin: 0 0 12px;
	padding: 0;
	background: transparent;
	font-family: var(--v4-titre);
	font-size: 60px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0;
	text-transform: uppercase;
	text-align: left;
	color: var(--v4-encre);
}

.v4-cat-intro,
.v4-cat #categorie-header { display: block; min-width: 0; }

/* Le tableau de l'intro (table-choix) defile dans sa colonne au lieu
   d'elargir la page sur telephone. */
.v4-cat .table-choix-wrapper {
	max-width: 100%;
	overflow-x: auto;
}

.v4-cat #contenu-header-view {
	padding-bottom: 0;
	font-size: 17px;
	line-height: 1.55;
	color: var(--v4-encre-douce);
}

.v4-cat #contenu-header-view p { margin: 0 0 8px; }

.v4-cat #contenu-header-view.fade::after {
	height: 48px;
	background: linear-gradient(to bottom, rgba(242, 242, 242, 0), var(--v4-creme));
}

.v4-cat #contenu-header-view-toggle {
	margin-top: 6px;
	text-align: left;
	font-size: 14px;
	font-weight: 800;
	color: var(--v4-encre);
	text-underline-offset: 3px;
}

.v4-cat-reperes {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-end;
	gap: 12px;
}

.v4-cat-repere {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 150px;
	box-sizing: border-box;
	padding: 16px 20px;
	border-radius: 14px;
	background: var(--v4-blanc);
	color: var(--v4-encre);
	text-decoration: none;
}

.v4-cat-repere strong {
	font-size: 22px;
	font-weight: 800;
	line-height: 1.2;
}

.v4-cat-repere span {
	font-size: 14px;
	color: var(--v4-gris);
}

.v4-cat-repere-tel {
	min-width: 190px;
	background: var(--v4-encre);
	color: var(--v4-blanc);
}

.v4-cat-repere-tel strong { font-size: 17px; }
.v4-cat-repere-tel span { color: var(--v4-sur-encre); }
.v4-cat-repere-tel:hover { background: #000; color: var(--v4-blanc); }

.v4-cat .sous-categories,
.v4-cat .type-produit-grid { margin: 0; }

.v4-cat .sous-categories:has(> *),
.v4-cat .type-produit-grid:has(> *) { margin-bottom: 20px; }

/* --- Barre horizontale (mode haut) et boutons du tiroir --- */
.v4-cat #filtres-v2 {
	margin: 0 0 16px;
	gap: 8px;
	/* Les pastilles de nombre debordent du coin des boutons : on ne
	   coupe plus ce qui depasse. Les filtres qui n'ont pas la place
	   restent masques par #filtres-v2-desktop (adjustFilters). */
	overflow: visible;
}

/* Place pour la pastille au-dessus des filtres de la barre, qui gardent
   leur overflow: hidden */
.v4-cat #filtres-v2-desktop {
	padding-top: 8px;
	margin-top: -8px;
}

/* La feuille du site met 10 px a droite de « Trier » : le bouton
   s'arretait avant le bord des cartes. */
.v4-cat #filtres-v2 #trier { margin-right: 0; }

.v4-cat #filtres-v2 #filtres,
.v4-cat #filtres-v2 #trier,
.v4-cat #filtres-v2 .filtre {
	height: 42px;
	box-sizing: border-box;
	gap: 8px;
	padding: 0 16px;
	border: 1.5px solid var(--v4-bordure-chip);
	border-radius: var(--v4-pilule);
	background: var(--v4-blanc);
	color: var(--v4-encre);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
}

.v4-cat #filtres-v2 .filtre { margin-right: 8px; }

.v4-cat #filtres-v2 #filtres:hover,
.v4-cat #filtres-v2 #trier:hover,
.v4-cat #filtres-v2 .filtre:hover { border-color: var(--v4-encre); }

.v4-cat #filtres-v2 #filtres img,
.v4-cat #filtres-v2 #trier img {
	width: 18px;
	height: 18px;
	margin-left: 2px;
	mix-blend-mode: multiply;
}

.v4-cat #filtres-v2 #filtres .badge,
.v4-cat #filtres-v2 #trier .badge,
.v4-cat #filtres-v2 .filtre .badge {
	top: -6px;
	right: -6px;
	width: 20px;
	height: 20px;
	background: var(--v4-rouge);
	box-shadow: 0 0 0 2px var(--v4-creme);
	font-size: 11px;
	font-weight: 800;
	line-height: 20px;
}

/* --- Colonne des resultats --- */
.v4-cat-barre {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin: 0 0 16px;
}

.v4-cat-compte {
	font-size: 16px;
	font-weight: 800;
	color: var(--v4-encre);
}

/* Le select de tri ne sert qu'a la colonne de gauche : la barre
   horizontale et le tiroir ont deja « Trier ». */
.v4-cat-tri { display: none; }

.v4-cat-actifs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 16px;
}

.v4-cat-actifs[hidden] { display: none; }

.v4-cat-actifs-titre {
	font-size: 14px;
	font-weight: 700;
	color: var(--v4-gris);
}

.v4-cat-pastille {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 34px;
	padding: 0 12px;
	border: 0;
	border-radius: var(--v4-pilule);
	background: var(--v4-encre);
	color: var(--v4-blanc);
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
}

.v4-cat-pastille span[aria-hidden] { font-size: 16px; line-height: 1; }
.v4-cat-pastille:hover { background: #000; }

.v4-cat-pastille-effacer,
.v4-cat-effacer {
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--v4-rouge);
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.v4-cat #ajax-produits { margin: 0; }
.v4-cat #categorie-v2-produits { margin: 0; }
.v4-cat #endcaps:empty { display: none; }

/* Message « Aucun article... » de l'endpoint de filtrage */
.v4-cat #ajax-produits > br:first-child { display: none; }

.v4-cat #classement-footer-v2 { margin-top: 8px; }

.v4-cat .pagination-v2 a,
.v4-cat .pagination-v2 .p-select {
	width: 44px;
	height: 44px;
	padding: 0;
	line-height: 44px;
	font-size: 16px;
	font-weight: 700;
}

.v4-cat .pagination-v2 .p-n-select {
	border: 1.5px solid var(--v4-bordure-chip);
	background: var(--v4-blanc);
}

.v4-cat .pagination-v2 .p-select,
.v4-cat .pagination-v2 .p-n-select:hover {
	background: var(--v4-encre);
	border-color: var(--v4-encre);
}

/* Encarts publicitaires de la grille : meme hauteur qu'une carte */
@supports (grid-template-rows: subgrid) {
@media (min-width: 641px) {
	:is(#selecteur, .v4-cat, #recommandations, #v4-recherche) .bloc-box-categorie-v2 {
		grid-row: span 9;
		margin-bottom: 20px;
		border-radius: 20px;
		overflow: hidden;
	}
}
}

/* --- Encart « Vous hesitez » sous la grille --- */
.v4-cat-conseil {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	margin-top: 28px;
	padding: 28px 32px;
	border-radius: 20px;
	background: #FBE9E7;
}

.v4-cat-conseil-texte {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.v4-cat-conseil-texte strong { font-size: 22px; font-weight: 800; }

.v4-cat-conseil-texte span {
	font-size: 16px;
	color: var(--v4-encre-douce);
}

.v4-cat-conseil-actions {
	display: flex;
	flex-shrink: 0;
	gap: 12px;
}

.v4-cat-conseil-tel,
.v4-cat-conseil-aristide {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 52px;
	box-sizing: border-box;
	padding: 0 24px;
	border-radius: var(--v4-pilule);
	font: inherit;
	font-size: 16px;
	font-weight: 800;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
}

.v4-cat-conseil-tel {
	border: 0;
	background: var(--v4-encre);
	color: var(--v4-blanc);
}

.v4-cat-conseil-tel:hover { background: #000; color: var(--v4-blanc); }

.v4-cat-conseil-aristide {
	border: 2px solid var(--v4-encre);
	background: transparent;
	color: var(--v4-encre);
}

.v4-cat-conseil-aristide:hover { background: var(--v4-encre); color: var(--v4-blanc); }

/* --- Texte de reference sous la liste --- */
.v4-cat #description_footer {
	width: auto;
	max-width: none;
	box-sizing: border-box;
	margin: 56px 0 0;
	padding: 48px 56px;
	border-radius: 20px;
	background: var(--v4-blanc);
	font-size: 16px;
	line-height: 1.6;
	color: var(--v4-encre-douce);
}

.v4-cat #description_footer:empty { display: none; }

.v4-cat #description_footer > * { max-width: 860px; }

.v4-cat #description_footer h2 {
	margin: 32px 0 12px;
	font-family: var(--v4-titre);
	font-size: 36px;
	font-weight: 800;
	line-height: 1.05;
	color: var(--v4-encre);
}

.v4-cat #description_footer h3 {
	margin: 24px 0 8px;
	padding: 0;
	background: transparent;
	font-size: 21px;
	font-weight: 800;
	line-height: 1.25;
	color: var(--v4-encre);
}

.v4-cat #description_footer > :first-child { margin-top: 0; }

/* --- Contenu des filtres (tiroir et colonne) --- */
.v4-cat-titre-colonne,
.v4-cat-effacer { display: none; }

.v4-cat #filtres-v2-menu #filtres-menu-header {
	padding: 20px;
	font-size: 20px;
	font-weight: 800;
}

.v4-cat #filtres-v2-menu #filtres-v2-menu-content .attribut .titre {
	display: block;
	min-height: 0;
	margin: 0 0 6px;
	font-size: 15px;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: .6px;
	text-transform: uppercase;
	color: var(--v4-gris);
}

.v4-cat #filtres-v2-menu #filtres-v2-menu-content .attribut .header {
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
}

.v4-cat #filtres-v2-menu #filtres-v2-menu-content .attribut .header .titre { margin: 0; }

.v4-cat #filtres-v2-menu #filtres-v2-menu-content .attribut .amout {
	margin-left: auto;
	font-size: 14px;
	font-weight: 800;
	color: var(--v4-encre);
	white-space: nowrap;
}

.v4-cat #filtres-v2-menu label.filter-checkbox-label {
	margin: 0;
	padding: 7px 0 7px 32px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--v4-encre);
}

.v4-cat #filtres-v2-menu label.filter-checkbox-label a { color: inherit; }

.v4-cat #filtres-v2-menu label.filter-checkbox-label::before {
	left: 0;
	width: 20px;
	height: 20px;
	box-sizing: border-box;
	border: 1.5px solid var(--v4-gris-clair);
	border-radius: 5px;
}

.v4-cat #filtres-v2-menu input.filter-checkbox:focus-visible + label.filter-checkbox-label::before,
.v4-cat #filtres-v2-menu input.filter-radio:focus-visible + label.filter-radio-label::after {
	outline: 2px solid var(--v4-encre);
	outline-offset: 2px;
}

.v4-cat #filtres-v2-menu .attribut .contenu a {
	margin: 0;
	padding: 6px 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--v4-encre);
}

.v4-cat #filtres-v2-menu .ui-slider {
	width: calc(100% - 20px);
	height: 4px;
	margin: 18px 10px 8px;
	border-radius: var(--v4-pilule);
	background: var(--v4-bordure);
}

.v4-cat #filtres-v2-menu .ui-slider .ui-slider-range { background: var(--v4-vert); }

.v4-cat #filtres-v2-menu .ui-slider .ui-slider-handle {
	width: 20px;
	height: 20px;
	box-sizing: border-box;
	border: 2px solid var(--v4-vert);
	background: var(--v4-blanc);
}

.v4-cat #filtres-v2-menu #filtres-menu-footer button {
	height: 48px;
	border-radius: var(--v4-pilule);
	font: inherit;
	font-size: 16px;
	font-weight: 800;
}

.v4-cat #filtres-v2-menu #filtres-menu-footer #reset-filtres { background: var(--v4-sable); color: var(--v4-encre); }
.v4-cat #filtres-v2-menu #filtres-menu-footer #show-results { background: var(--v4-vert); color: var(--v4-blanc); }

/* ---------------------------------------------------------------------
   MODE GAUCHE, ordinateur : le tiroir devient la colonne de filtres.
   Les !important battent les styles en ligne poses par scripts.v2.js
   (ouverture du tiroir, bordures des blocs) si la fenetre passe d'une
   largeur de telephone a une largeur d'ordinateur.
   --------------------------------------------------------------------- */
@media (min-width: 1025px) {

	/* La barre reste dans la page, vide et sans hauteur :
	   filtresSelection() remonte la page a sa position. */
	#categorie-v2.v4-filtres-gauche #filtres-v2 {
		height: 0;
		margin: 0;
		padding: 0;
		border: 0;
	}

	#categorie-v2.v4-filtres-gauche #filtres-v2 > * { display: none !important; }

	.v4-filtres-gauche .v4-cat-corps {
		display: grid;
		grid-template-columns: 280px minmax(0, 1fr);
		gap: 28px;
		align-items: start;
	}

	#categorie-v2.v4-filtres-gauche #filtres-v2-menu {
		display: flex !important;
		flex-direction: column;
		gap: 14px;
		position: sticky !important;
		top: 16px;
		right: auto !important;
		left: auto !important;
		width: auto !important;
		max-width: none;
		height: auto;
		max-height: calc(100vh - 32px);
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
		background: transparent;
		box-shadow: none;
		opacity: 1 !important;
		z-index: 1;
	}

	#categorie-v2.v4-filtres-gauche #filtres-v2-menu #filtres-menu-header {
		position: static;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20px 22px;
		border: 0;
		border-radius: 18px;
		background: var(--v4-blanc);
		font-size: 17px;
	}

	.v4-filtres-gauche .v4-cat-titre-tiroir,
	.v4-filtres-gauche #close-filtres-v2-menu,
	.v4-filtres-gauche #filtres-menu-footer,
	.v4-filtres-gauche #filtres-v2-menu-overlay,
	#categorie-v2.v4-filtres-gauche #tri { display: none !important; }

	.v4-filtres-gauche .v4-cat-titre-colonne { display: inline; }
	.v4-filtres-gauche .v4-cat-effacer { display: inline-block; }

	#categorie-v2.v4-filtres-gauche #filtres-v2-menu #filtres-v2-menu-content {
		display: flex;
		flex-direction: column;
		flex: none;
		gap: 14px;
		padding: 0;
		overflow: visible;
	}

	#categorie-v2.v4-filtres-gauche #filtres-v2-menu #filtres-v2-menu-content .attribut {
		margin: 0;
		padding: 18px 22px;
		border: 0 !important;
		border-radius: 18px;
		background: var(--v4-blanc);
	}

	#categorie-v2.v4-filtres-gauche #filtres-v2-menu #filtres-v2-menu-content .attribut .clear { display: none; }

	/* Barre au-dessus de la grille : nombre de modeles et tri */
	.v4-filtres-gauche .v4-cat-barre {
		padding: 10px 12px 10px 20px;
		border-radius: 16px;
		background: var(--v4-blanc);
	}

	.v4-filtres-gauche .v4-cat-tri { display: flex; }

	/* Trois cartes par rangee a cote de la colonne, deux sous 1200 px */
	#categorie-v2.v4-filtres-gauche #categorie-v2-produits { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1025px) and (max-width: 1200px) {
	#categorie-v2.v4-filtres-gauche #categorie-v2-produits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Tablette et telephone --- */
@media (max-width: 1024px) {
	.v4-cat-entete { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 16px; }
	.v4-cat-reperes { flex-wrap: wrap; justify-content: flex-start; }
	.v4-cat-conseil { flex-direction: column; align-items: flex-start; gap: 18px; }
}

@media (max-width: 800px) {
	.v4-cat #arbo { margin-top: 12px; font-size: 13px; }

	.v4-cat-entete { gap: 12px; padding: 4px 0 16px; }

	.v4-cat #contenu-header-view-toggle { margin-top: 4px; }

	.v4-cat #h1-categorie { font-size: 38px; margin-bottom: 8px; }

	.v4-cat #contenu-header-view { font-size: 15px; }

	/* Les trois reperes sur une ligne, qui defile a l'horizontale ;
	   la bande deborde dans la marge de la page pour aller au bord. */
	.v4-cat-reperes {
		flex-wrap: nowrap;
		gap: 8px;
		margin: 0 -20px;
		padding: 0 20px;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		scroll-padding-inline: 20px;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.v4-cat-reperes::-webkit-scrollbar { display: none; }

	.v4-cat-repere {
		flex: 0 0 auto;
		min-width: 0;
		padding: 9px 13px;
		border-radius: 12px;
		white-space: nowrap;
		scroll-snap-align: start;
	}

	.v4-cat #filtres-v2 { margin-bottom: 12px; }
	.v4-cat-barre,
	.v4-cat-actifs { margin-bottom: 12px; }

	.v4-cat-repere strong { font-size: 15px; }
	.v4-cat-repere span { font-size: 12px; }
	.v4-cat-repere-tel strong { font-size: 15px; }

	.v4-cat #filtres-v2 #filtres {
		border-color: var(--v4-encre);
		background: var(--v4-encre);
		color: var(--v4-blanc);
	}

	.v4-cat #filtres-v2 #filtres img { filter: invert(1); mix-blend-mode: screen; }

	.v4-cat-compte { font-size: 15px; }

	.v4-cat-conseil { padding: 22px 20px; }
	.v4-cat-conseil-texte strong { font-size: 19px; }
	.v4-cat-conseil-texte span { font-size: 15px; }
	.v4-cat-conseil-actions { width: 100%; flex-direction: column; }
	.v4-cat-conseil-tel,
	.v4-cat-conseil-aristide { width: 100%; }

	.v4-cat #description_footer { margin-top: 36px; padding: 28px 20px; border-radius: 16px; font-size: 15px; }
	.v4-cat #description_footer h2 { font-size: 28px; }
	.v4-cat #description_footer h3 { font-size: 18px; }
}

/* --- Pages marque, support et geo : memes listes que la categorie v4 ---
   Gabarits : template_categorie-marque_v4.tpl (logo a cote du titre),
   template_page-support-categorie_v4.tpl (bloc Black Friday :
   template_page-black-friday_v4.tpl), template_page-categorie_v4.tpl
   (produits des pages geo, sans filtres). */
.v4-cat-titre-marque {
	display: flex;
	align-items: center;
	gap: 18px;
	margin: 0 0 12px;
}

.v4-cat-titre-marque #h1-categorie { margin: 0; }

.v4-cat-logo {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 72px;
	padding: 8px 14px;
	border: 1px solid var(--v4-bordure);
	border-radius: 14px;
	background: var(--v4-blanc);
	box-sizing: border-box;
}

.v4-cat-logo img {
	display: block;
	width: auto;
	height: auto;
	max-width: 150px;
	max-height: 54px;
}

.v4-cat-bf-titre {
	margin: 40px 0 16px;
	font-family: var(--v4-titre);
	font-size: 32px;
	font-weight: 800;
	line-height: 1;
	text-transform: uppercase;
	color: var(--v4-encre);
}

.v4-cat .v4-cat-bf {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	align-items: stretch;
}

.v4-cat-liste { margin: 24px 0; }

@media (max-width: 1200px) {
	.v4-cat .v4-cat-bf { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1025px) {
	#categorie-v2.v4-filtres-gauche .v4-cat-bf { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1025px) and (max-width: 1200px) {
	#categorie-v2.v4-filtres-gauche .v4-cat-bf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
	.v4-cat .v4-cat-bf { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}

@media (max-width: 640px) {
	.v4-cat-titre-marque { gap: 12px; }
	.v4-cat-logo { height: 56px; padding: 6px 10px; }
	.v4-cat-logo img { max-width: 110px; max-height: 42px; }
	.v4-cat-bf-titre { font-size: 26px; }
	.v4-cat .v4-cat-bf { grid-template-columns: 1fr; gap: 10px; }
}

/* =========================================================================
   FICHE PRODUIT V4
   Gabarits : panierbasket.fr/template_produit_v4.tpl (page) et
   template_produit_v4_commande.tpl (carte d'achat).
   Maquette : planches Produit (ordinateur) et Produit-mobile.
   Les anciens blocs (#produit-gauche, #produit-droite, #bloc-commande...)
   gardent leurs identifiants pour les scripts : leurs flottants, largeurs
   et positions de la feuille du site sont annules ici.
   ========================================================================= */

#produit-v2.v4-produit { text-align: left; }

/* La feuille du site met un fond blanc sous la fiche : on revient au
   fond gris de la v4 pour que les cartes blanches se detachent. */
#conteneur:has(#produit-v2.v4-produit) { background: transparent; }

#produit-v2.v4-produit #centre {
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	float: none;
}

#produit-v2.v4-produit #arbo {
	display: block;
	min-height: 0;
	margin: 20px 0 0;
	padding: 0;
	text-align: left;
	font-size: 14px;
	color: var(--v4-gris);
}

#produit-v2.v4-produit #arbo a { color: var(--v4-gris); }

#produit-v2.v4-produit #produit-gauche,
#produit-v2.v4-produit #produit-droite,
#produit-v2.v4-produit #produit-centre,
#produit-v2.v4-produit #produit-droite #bloc-commande {
	float: none;
	width: auto;
	max-width: none;
	min-height: 0;
	margin: 0;
	padding: 0;
	position: static;
	border: 0;
	box-shadow: none;
	background: transparent;
}

/* --- Haut de page : galerie a gauche, achat a droite --- */
#produit-v2.v4-produit .v4-produit-haut {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: 40px;
	align-items: start;
	padding: 24px 0 64px;
}

/* --- Galerie --- */
#produit-v2.v4-produit .v4-galerie {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
}

#produit-v2.v4-produit .v4-galerie-principale {
	position: relative;
	height: 600px;
	border-radius: 20px;
	background: var(--v4-blanc);
	overflow: hidden;
}

#produit-v2.v4-produit .v4-galerie-zoom {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: zoom-in;
}

#produit-v2.v4-produit .v4-galerie-zoom img {
	display: block;
	width: auto;
	height: auto;
	max-width: 86%;
	max-height: 88%;
	object-fit: contain;
}

/* Bandeau texte du produit (« N°1 des ventes »...) pose sur la photo */
#produit-v2.v4-produit .v4-galerie-principale > .ban-v3-texte,
#produit-v2.v4-produit .v4-galerie-principale > div:not(.v4-galerie-zoom) {
	position: absolute;
	top: 20px;
	left: 20px;
	z-index: 1;
	margin: 0;
}

#produit-v2.v4-produit .v4-galerie-compte,
#produit-v2.v4-produit .v4-galerie-video {
	position: absolute;
	bottom: 20px;
	z-index: 1;
	border-radius: var(--v4-pilule);
	background: var(--v4-creme);
	color: var(--v4-encre);
	font-weight: 700;
}

#produit-v2.v4-produit .v4-galerie-compte {
	left: 20px;
	padding: 7px 14px;
	font-size: 13px;
}

#produit-v2.v4-produit .v4-galerie-compte:empty { display: none; }

#produit-v2.v4-produit .v4-galerie-video {
	right: 20px;
	display: flex;
	align-items: center;
	gap: 9px;
	height: 46px;
	padding: 0 18px;
	border: 1.5px solid var(--v4-bordure);
	font: inherit;
	font-size: 14px;
	font-weight: 800;
	cursor: pointer;
}

#produit-v2.v4-produit .v4-galerie-video:hover { border-color: var(--v4-encre); }
#produit-v2.v4-produit .v4-galerie-video ~ .v4-galerie-video { display: none; }

#produit-v2.v4-produit .v4-galerie-vignettes {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

#produit-v2.v4-produit .v4-vignette {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 268px;
	padding: 0;
	border: 1.5px solid var(--v4-bordure);
	border-radius: 18px;
	background: var(--v4-blanc);
	cursor: pointer;
	overflow: hidden;
}

#produit-v2.v4-produit .v4-vignette img {
	display: block;
	width: auto;
	height: auto;
	max-width: 84%;
	max-height: 84%;
	object-fit: contain;
}

#produit-v2.v4-produit .v4-vignette:hover { border-color: var(--v4-encre); }
#produit-v2.v4-produit .v4-vignette.on { border: 2.5px solid var(--v4-encre); }
#produit-v2.v4-produit .v4-vignette:focus-visible { outline: 2px solid var(--v4-encre); outline-offset: 2px; }

/* Quatre vignettes ; la quatrieme annonce les photos suivantes */
#produit-v2.v4-produit .v4-vignette:nth-child(n+5) { display: none; }

#produit-v2.v4-produit .v4-vignette-plus::after {
	content: attr(data-plus);
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(22, 24, 29, .55);
	color: var(--v4-blanc);
	font-size: 22px;
	font-weight: 800;
}

#produit-v2.v4-produit .v4-galerie-points { display: none; }
/* Une seule photo : ni vignette, ni compteur « 1 / 1 », ni points (CSS seul :
   la classe v4-galerie-seule posee par le script etait sur #produit-v2 et ne
   correspondait pas a ce selecteur) */
#produit-v2.v4-produit .v4-galerie:not(:has(.v4-vignette + .v4-vignette)) :is(.v4-galerie-vignettes, .v4-galerie-compte, .v4-galerie-points) { display: none; }

/* --- Colonne d'achat --- */
#produit-v2.v4-produit .v4-produit-infos {
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-width: 0;
}

#produit-v2.v4-produit .v4-produit-titre {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

#produit-v2.v4-produit #banniere-marketing { margin: 0; }
#produit-v2.v4-produit #banniere-marketing:empty { display: none; }

#produit-v2.v4-produit #banniere-marketing img {
	display: block;
	width: auto;
	height: 24px;
	mix-blend-mode: multiply;
}

#produit-v2.v4-produit #h1-produit {
	display: block;
	width: auto;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 0;
	background: transparent;
	font-family: var(--v4-texte);
	font-size: 34px;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: 0;
	text-align: left;
	text-transform: none;
	color: var(--v4-encre);
}

#produit-v2.v4-produit .v4-produit-note {
	display: inline-flex;
	align-self: flex-start;
	font-size: 15px;
	color: var(--v4-gris);
	text-decoration: none;
}

#produit-v2.v4-produit .v4-produit-note img { mix-blend-mode: multiply; }
#produit-v2.v4-produit .v4-produit-note .txt { text-decoration: underline; text-underline-offset: 3px; }
#produit-v2.v4-produit .v4-produit-note:hover .txt { color: var(--v4-encre); text-decoration: underline; text-underline-offset: 3px; }
#produit-v2.v4-produit #sells:empty { display: none; }

/* Carte d'achat */
#produit-v2.v4-produit #produit-droite #bloc-commande.v4-achat {
	padding: 22px 24px;
	border-radius: 18px;
	background: var(--v4-blanc);
}

#produit-v2.v4-produit #produit-droite #bloc-commande.v4-achat #commande {
	display: flex;
	flex-direction: column;
	gap: 16px;
	text-align: left;
	box-shadow: none;
	border-radius: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
}

#produit-v2.v4-produit #produit-droite #bloc-commande.v4-achat #commande .prix_p {
	display: flex;
	align-items: flex-end;
	gap: 14px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
}

#produit-v2.v4-produit #produit-droite #bloc-commande.v4-achat #commande .prix_p > .pr-datas { display: none; }
#produit-v2.v4-produit #produit-droite #bloc-commande.v4-achat #commande .prix_p .pv2-current { font-size: 44px; line-height: 1; }
#produit-v2.v4-produit #produit-droite #bloc-commande.v4-achat #commande .prix_p .pv2-current .pv2-euro { font-size: .6em; }
#produit-v2.v4-produit #produit-droite #bloc-commande.v4-achat #commande .prix_p .pv2-strike { font-size: 20px; }
#produit-v2.v4-produit #produit-droite #bloc-commande.v4-achat #commande .prix_p .pv2-remise { font-size: 16px; font-weight: 400; padding: 5px 10px; }

/* Listes d'origine remplacees par des boutons, gardees pour les scripts */
#produit-v2.v4-produit #produit-droite #bloc-commande.v4-achat #commande #liste_references { margin: 0; padding: 0; }
#produit-v2.v4-produit #produit-droite #bloc-commande.v4-achat #commande #liste_references.v4-choix-prets { font-size: 0; line-height: 0; }
#produit-v2.v4-produit #produit-droite #bloc-commande.v4-achat #commande #liste_references.v4-choix-prets > * { font-size: 15px; line-height: 1.3; }
#produit-v2.v4-produit #produit-droite #bloc-commande.v4-achat #commande #liste_references.v4-choix-prets > br { display: none; }
#produit-v2.v4-produit #produit-droite #bloc-commande.v4-achat #commande #liste_references:empty { display: none; }

#produit-v2.v4-produit .v4-liste-remplacee {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

#produit-v2.v4-produit #produit-droite #bloc-commande.v4-achat #commande select {
	height: 46px;
	padding: 0 14px;
	border: 1.5px solid var(--v4-bordure-chip);
	border-radius: 12px;
	background: var(--v4-blanc);
	font: inherit;
	font-size: 15px;
	color: var(--v4-encre);
}

#produit-v2.v4-produit .v4-choix {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 12px;
}

#produit-v2.v4-produit .v4-choix:last-of-type { margin-bottom: 0; }

#produit-v2.v4-produit .v4-achat-libelle {
	font-size: 15px;
	font-weight: 800;
	color: var(--v4-encre);
}

#produit-v2.v4-produit .v4-choix-boutons {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

#produit-v2.v4-produit .v4-choix-bouton {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 2px;
	min-height: 64px;
	box-sizing: border-box;
	padding: 12px 14px;
	border: 1.5px solid var(--v4-bordure-chip);
	border-radius: 12px;
	background: var(--v4-blanc);
	color: var(--v4-encre);
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.25;
	text-align: left;
	cursor: pointer;
}

#produit-v2.v4-produit .v4-choix-bouton small { font-size: 15px; font-weight: 800; }

/* Modeles avec miniature : photo a gauche, nom a droite */
#produit-v2.v4-produit .v4-choix-photos .v4-choix-bouton {
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	padding: 8px 12px 8px 8px;
}
#produit-v2.v4-produit .v4-choix-bouton .v4-choix-img {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	max-width: none;
	border-radius: 8px;
	background: var(--v4-sable);
	object-fit: contain;
}
#produit-v2.v4-produit .v4-choix-bouton small:empty { display: none; }
#produit-v2.v4-produit .v4-choix-bouton:hover { border-color: var(--v4-encre); }
#produit-v2.v4-produit .v4-choix-bouton.on { border: 2px solid var(--v4-encre); background: var(--v4-creme); }
#produit-v2.v4-produit .v4-choix-bouton:disabled { opacity: .45; cursor: not-allowed; }
#produit-v2.v4-produit .v4-choix-bouton:focus-visible { outline: 2px solid var(--v4-encre); outline-offset: 2px; }

#produit-v2.v4-produit .v4-achat-ligne {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px 16px;
}

#produit-v2.v4-produit .v4-quantite { display: flex; align-items: center; gap: 16px; }
#produit-v2.v4-produit .v4-quantite[hidden] { display: none; }

#produit-v2.v4-produit .v4-quantite-boutons { display: flex; align-items: center; gap: 10px; }

#produit-v2.v4-produit .v4-quantite-boutons button {
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1.5px solid var(--v4-bordure-chip);
	border-radius: var(--v4-pilule);
	background: var(--v4-blanc);
	color: var(--v4-encre);
	font: inherit;
	font-size: 20px;
	font-weight: 800;
	cursor: pointer;
}

#produit-v2.v4-produit .v4-quantite-boutons button:hover:not(:disabled) { border-color: var(--v4-encre); }
#produit-v2.v4-produit .v4-quantite-boutons button:disabled { opacity: .4; cursor: default; }

#produit-v2.v4-produit .v4-quantite-valeur {
	min-width: 34px;
	text-align: center;
	font-size: 20px;
	font-weight: 800;
}

#produit-v2.v4-produit #produit-droite #bloc-commande.v4-achat #commande #disponibilite {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	margin: 0 0 0 auto;
	padding: 0;
	font-size: 14px;
	text-align: right;
}

#produit-v2.v4-produit #produit-droite #bloc-commande.v4-achat #commande #disponibilite .delai { font-weight: 700; }
#produit-v2.v4-produit #produit-droite #bloc-commande.v4-achat #commande #disponibilite .stock { display: inline-flex; align-items: center; gap: 8px; }

#produit-v2.v4-produit #produit-droite #bloc-commande.v4-achat #commande #disponibilite .stock::before {
	content: "";
	width: 9px;
	height: 9px;
	border-radius: 999px;
	background: currentColor;
}

#produit-v2.v4-produit #produit-droite #bloc-commande.v4-achat #commande #disponibilite .mkt_stock { font-size: 13px; color: #B45309; }
/* Contraste (PageSpeed) : vert #618B3D a 4:1 sur blanc, #17753F a 5,9:1 */
#produit-v2.v4-produit #produit-droite #bloc-commande.v4-achat #commande #disponibilite .stock { color: var(--v4-vert); }
#produit-v2.v4-produit #produit-droite #bloc-commande.v4-achat #commande #disponibilite .mkt_stock:empty,
#produit-v2.v4-produit #produit-droite #bloc-commande.v4-achat #commande #prix_promo:empty { display: none; }

#produit-v2.v4-produit .v4-livraison {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	border-radius: 12px;
	background: #F1F5F1;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
}

#produit-v2.v4-produit .v4-livraison::before {
	content: "";
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317753F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center / contain no-repeat;
}

#produit-v2.v4-produit .v4-livraison-texte { display: flex; flex-direction: column; gap: 2px; }
#produit-v2.v4-produit .v4-livraison-urgence { color: var(--v4-vert); font-weight: 800; }
#produit-v2.v4-produit .v4-livraison-urgence + span { font-weight: 600; }

#produit-v2.v4-produit .v4-livraison:empty,
#produit-v2.v4-produit .v4-livraison[hidden] { display: none; }

#produit-v2.v4-produit #produit-droite #bloc-commande.v4-achat #commande #qte { display: none; }
#produit-v2.v4-produit #produit-droite #bloc-commande.v4-achat #commande #qte:has(select, input:not([type="hidden"])) { display: block; }

#produit-v2.v4-produit #produit-droite #bloc-commande.v4-achat #commande #bt { margin: 0; }

#produit-v2.v4-produit #produit-droite #bloc-commande.v4-achat #commande #bt .bt-commander,
#produit-v2.v4-produit #produit-droite #bloc-commande.v4-achat #commande #bt button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: none;
	height: 60px;
	margin: 0;
	padding: 0 20px;
	border: 0;
	border-radius: var(--v4-pilule);
	background: var(--v4-vert);
	color: var(--v4-blanc);
	font: inherit;
	font-size: 18px;
	font-weight: 800;
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
	box-shadow: none;
}

#produit-v2.v4-produit #produit-droite #bloc-commande.v4-achat #commande #bt .bt-commander:hover,
#produit-v2.v4-produit #produit-droite #bloc-commande.v4-achat #commande #bt button:hover { background: #125E33; }

#produit-v2.v4-produit #produit-droite #bloc-commande.v4-achat #commande .paiement-3x {
	margin: -6px 0 0;
	text-align: center;
	font-size: 13px;
	color: var(--v4-gris);
}

/* Paiement en 3x CB : une pastille, comme les pastilles de reassurance
   prevues dans la maquette (bloc retravaille par le script) */
#produit-v2.v4-produit #produit-droite #bloc-commande.v4-achat #commande .paiement-3x.v4-3x {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 8px 10px;
	border-radius: 10px;
	background: var(--v4-creme);
	color: var(--v4-encre);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
}
#produit-v2.v4-produit .v4-3x svg { flex-shrink: 0; }
#produit-v2.v4-produit .v4-3x-montant { font-weight: 400; color: var(--v4-gris); }

#produit-v2.v4-produit .v4-achat-garanties {
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

#produit-v2.v4-produit .v4-achat-garanties li {
	flex: 1 1 0;
	padding: 8px 10px;
	border-radius: 10px;
	background: var(--v4-creme);
	font-size: 13px;
	font-weight: 700;
	text-align: center;
}

#produit-v2.v4-produit .v4-achat-garanties li:empty { display: none; }

/* Barre du bas sur telephone : masquee sur ordinateur */
#produit-v2.v4-produit #produit-droite #bloc-commande-mobile { display: none; }

/* --- Aristide sur la fiche --- */
#produit-v2.v4-produit .v4-aristide-produit {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 20px 22px;
	border: 1.5px solid var(--v4-bordure);
	border-radius: 18px;
	background: var(--v4-blanc);
}

#produit-v2.v4-produit .v4-ap-entete { display: flex; align-items: center; gap: 12px; }

#produit-v2.v4-produit .v4-ap-entete img {
	flex-shrink: 0;
	width: 46px;
	height: 46px;
	border-radius: 999px;
}

#produit-v2.v4-produit .v4-ap-entete > span { display: flex; flex-direction: column; line-height: 1.3; }
#produit-v2.v4-produit .v4-ap-entete strong { font-size: 16px; }
#produit-v2.v4-produit .v4-ap-entete span span { font-size: 13px; color: var(--v4-gris); }

#produit-v2.v4-produit .v4-ap-form { position: relative; display: flex; margin: 0; }

#produit-v2.v4-produit .v4-ap-form input {
	width: 100%;
	height: 48px;
	box-sizing: border-box;
	padding: 0 52px 0 18px;
	border: 1.5px solid var(--v4-bordure-chip);
	border-radius: var(--v4-pilule);
	background: var(--v4-creme);
	color: var(--v4-encre);
	font: inherit;
	font-size: 15px;
}

#produit-v2.v4-produit .v4-ap-form input:focus-visible { outline: 2px solid var(--v4-encre); outline-offset: 1px; }

#produit-v2.v4-produit .v4-ap-form button {
	position: absolute;
	top: 4px;
	right: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: var(--v4-pilule);
	background: var(--v4-encre);
	color: var(--v4-blanc);
	cursor: pointer;
}

#produit-v2.v4-produit .v4-ap-suggestions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Bouton technique qui ouvre le chat (classe .open-chat de chat2.js) */
#produit-v2.v4-produit .v4-ap-ouvrir { display: none !important; }

#produit-v2.v4-produit .v4-ap-suggestions button {
	padding: 8px 13px;
	border: 1.5px solid var(--v4-bordure);
	border-radius: var(--v4-pilule);
	background: var(--v4-blanc);
	color: var(--v4-encre);
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
}

#produit-v2.v4-produit .v4-ap-suggestions button:hover { border-color: var(--v4-encre); }

/* Questions types des paniers : pas sur les ballons ni les accessoires */
#produit-v2.v4-produit:not([data-volumineux="oui"]) .v4-ap-suggestions { display: none; }

/* --- Reassurance --- */
#produit-v2.v4-produit .v4-reassurance {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 20px 24px;
	border-radius: 18px;
	background: var(--v4-blanc);
	list-style: none;
	font-size: 15px;
}

#produit-v2.v4-produit .v4-reassurance li { display: flex; align-items: center; gap: 12px; }
#produit-v2.v4-produit .v4-reassurance svg { flex-shrink: 0; }
#produit-v2.v4-produit .v4-reassurance a { font-weight: 800; }
#produit-v2.v4-produit .v4-reassurance li:has(> span:empty) { display: none; }
/* numero du service client (reassurance, etapes de livraison) : vert, ouvre
   la fenetre de contact avec le telephone en premier (06/11/2026) */
#produit-v2.v4-produit :is(.v4-reassurance, .v4-etapes) a.v4-tel-contact { color: var(--v4-vert); font-weight: 800; white-space: nowrap; cursor: pointer; }
#produit-v2.v4-produit :is(.v4-reassurance, .v4-etapes) a.v4-tel-contact:hover { color: #0F5A2F; text-decoration: underline; text-underline-offset: 3px; }

/* --- Bandes blanches (essentiel, avis) --- */
#produit-v2.v4-produit .v4-produit-bande {
	padding: 56px;
	border-radius: 24px;
	background: var(--v4-blanc);
}

#produit-v2.v4-produit .v4-titre-section {
	margin: 0;
	font-family: var(--v4-titre);
	font-size: 44px;
	font-weight: 800;
	line-height: 1;
	text-transform: uppercase;
	color: var(--v4-encre);
}

#produit-v2.v4-produit .v4-produit-essentiel {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

#produit-v2.v4-produit .v4-chiffres {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}

#produit-v2.v4-produit .v4-chiffres:not(:has(.v4-chiffre)) { display: none; }

#produit-v2.v4-produit .v4-chiffre {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 24px;
	border-radius: 18px;
	background: var(--v4-creme);
}

#produit-v2.v4-produit .v4-chiffre strong {
	font-family: var(--v4-titre);
	font-size: 40px;
	font-weight: 800;
	line-height: 1;
}

#produit-v2.v4-produit .v4-chiffre.v4-chiffre-long strong { font-size: 30px; line-height: 1.05; }

#produit-v2.v4-produit .v4-chiffre span {
	font-size: 15px;
	color: var(--v4-encre-douce);
}

#produit-v2.v4-produit .v4-produit-description {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: 32px;
	align-items: start;
}

/* Sans avis de l'expert : pas d'encart, la description prend toute la largeur
   (tableaux de presentation des anciennes fiches, ex. ballons Molten) */
#produit-v2.v4-produit .v4-produit-description.v4-sans-expert { grid-template-columns: minmax(0, 1fr); }
#produit-v2.v4-produit .v4-produit-description.v4-sans-expert .v4-expert { display: none; }

#produit-v2.v4-produit .v4-description-texte {
	display: flex;
	flex-direction: column;
	gap: 20px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--v4-encre-douce);
}

#produit-v2.v4-produit .v4-description-texte #description-marketing,
#produit-v2.v4-produit .v4-description-texte #v4-description-longue {
	margin: 0;
	padding: 0;
	font-size: 16px;
	line-height: 1.6;
}

#produit-v2.v4-produit .v4-description-texte ul { margin: 0 0 16px; padding-left: 20px; }
#produit-v2.v4-produit .v4-description-texte li { margin-bottom: 6px; }
#produit-v2.v4-produit .v4-description-texte strong { color: var(--v4-encre); }
#produit-v2.v4-produit .v4-description-texte h2,
#produit-v2.v4-produit .v4-description-texte h3 { margin: 20px 0 8px; font-size: 21px; line-height: 1.25; color: var(--v4-encre); background: transparent; }
#produit-v2.v4-produit .v4-description-texte img { max-width: 100%; height: auto; border-radius: 14px; }
#produit-v2.v4-produit #v4-description-longue:empty { display: none; }

#produit-v2.v4-produit .v4-expert {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 32px;
	border-radius: 20px;
	background: var(--v4-encre);
	color: var(--v4-blanc);
}

#produit-v2.v4-produit .v4-expert-avis { display: flex; flex-direction: column; gap: 18px; }
#produit-v2.v4-produit .v4-expert-avis:has(.v4-expert-citation:empty) { display: none; }

#produit-v2.v4-produit .v4-expert-sur-titre {
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .8px;
	text-transform: uppercase;
	color: var(--v4-or);
}

#produit-v2.v4-produit .v4-expert-citation {
	font-family: var(--v4-titre);
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
}

#produit-v2.v4-produit .v4-expert-citation p { margin: 0; }
#produit-v2.v4-produit .v4-expert-auteur { display: flex; align-items: center; gap: 14px; }

#produit-v2.v4-produit .v4-expert-initiale {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 999px;
	background: #3A3E46;
	font-size: 20px;
	font-weight: 800;
}

#produit-v2.v4-produit .v4-expert-auteur > span:last-child { display: flex; flex-direction: column; }
#produit-v2.v4-produit .v4-expert-auteur > span:last-child span { font-size: 14px; color: var(--v4-sur-encre); }
#produit-v2.v4-produit .v4-expert-filet { height: 1px; background: #33363D; }

#produit-v2.v4-produit .v4-expert p {
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
	color: #E4E6E9;
}

#produit-v2.v4-produit .v4-expert-tel {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 52px;
	border-radius: var(--v4-pilule);
	background: var(--v4-vert);
	color: var(--v4-blanc);
	font-size: 16px;
	font-weight: 800;
	text-decoration: none;
	cursor: pointer;
}

#produit-v2.v4-produit .v4-expert-tel:hover { background: #0F5A2F; color: var(--v4-blanc); }

/* ---------- Description : intro + avis de l'expert cote a cote, puis les
   anciens cadres (tableaux de presentation) sur toute la largeur ---------- */
#produit-v2.v4-produit .v4-produit-description {
	grid-template-areas: "titre expert" "intro expert" "longue longue";
	grid-template-rows: auto 1fr auto;
	gap: 20px 48px;
}
#produit-v2.v4-produit .v4-produit-description.v4-sans-expert { grid-template-areas: "titre" "intro" "longue"; grid-template-rows: auto; }
#produit-v2.v4-produit .v4-produit-description > #produit-centre { display: contents; }
#produit-v2.v4-produit .v4-description-texte > .v4-titre-section { grid-area: titre; }
#produit-v2.v4-produit .v4-description-texte > #description-marketing { grid-area: intro; font-size: 16px; line-height: 1.6; color: var(--v4-encre-douce); }
#produit-v2.v4-produit .v4-produit-description > .v4-expert { grid-area: expert; }
#produit-v2.v4-produit .v4-description-texte > #v4-description-longue { grid-area: longue; margin-top: 20px; font-size: 16px; line-height: 1.6; color: var(--v4-encre-douce); }
#produit-v2.v4-produit #v4-description-longue :is(ul, ol) { margin: 0 0 16px; padding-left: 20px; }
#produit-v2.v4-produit #v4-description-longue strong { color: var(--v4-encre); }
#produit-v2.v4-produit #v4-description-longue img { max-width: 100%; height: auto; border-radius: 14px; }
#produit-v2.v4-produit #description-marketing ul { margin: 0 0 16px; padding-left: 20px; }
#produit-v2.v4-produit #description-marketing li { margin-bottom: 6px; }
#produit-v2.v4-produit #description-marketing strong { color: var(--v4-encre); }
/* puces rondes classiques (remplacent l'image produit-description-check.png de styles_v2) */
#produit-v2.v4-produit :is(#description-marketing, #v4-description-longue) ul { margin: 0 0 16px; padding-left: 22px; list-style: disc; }
#produit-v2.v4-produit :is(#description-marketing, #v4-description-longue) li { display: list-item; list-style: disc; background: none; padding-left: 4px; font-size: inherit; line-height: 1.6; margin-bottom: 4px; }
#produit-v2.v4-produit :is(#description-marketing, #v4-description-longue) li::marker { color: var(--v4-encre); }

/* Cadres reconstruits en grille (script « Anciens cadres ») */
#produit-v2.v4-produit .v4-desc-cartes {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 40px 32px;
	margin: 0 0 24px;
}
#produit-v2.v4-produit .v4-desc-carte { min-width: 0; font-size: 15px; line-height: 1.55; }
/* largeur de la carte au plus, jamais plus grande que la taille reelle de l'image (09/11/2026) */
#produit-v2.v4-produit .v4-desc-carte img { display: block; width: auto; max-width: 100%; height: auto; margin: 0 0 14px; object-fit: contain; }
#produit-v2.v4-produit .v4-desc-carte[style*="center"] img { margin-left: auto; margin-right: auto; }
#produit-v2.v4-produit .v4-desc-carte img[width="500"][height="300"] { width: auto; max-height: 240px; }
#produit-v2.v4-produit .v4-desc-carte :is(h2, h3, h4) { margin: 0 0 8px; font-size: 19px; line-height: 1.25; color: var(--v4-encre); }
#produit-v2.v4-produit .v4-desc-carte p { margin: 0 0 8px; }
#produit-v2.v4-produit .v4-desc-carte ul { text-align: left; }
/* textes des cadres alignes a gauche (les cellules etaient souvent centrees) */
#produit-v2.v4-produit .v4-desc-carte :is(td, th, p, div, span) { text-align: left !important; }
/* tableaux imbriques dans un cadre (classes posees par le script « Anciens cadres ») :
   une seule cellule = simple bloc de texte ; plusieurs = vrai tableau de caracteristiques */
#produit-v2.v4-produit .v4-desc-carte table.v4-desc-bloc,
#produit-v2.v4-produit .v4-desc-carte .v4-desc-bloc > tbody,
#produit-v2.v4-produit .v4-desc-carte .v4-desc-bloc > tbody > tr,
#produit-v2.v4-produit .v4-desc-carte .v4-desc-bloc > tbody > tr > :is(td, th) { display: block; width: auto !important; height: auto !important; padding: 0; border: 0; }
#produit-v2.v4-produit .v4-desc-carte table.v4-desc-tableau { width: 100% !important; border-collapse: collapse; margin: 0; font-size: 14px; line-height: 1.4; }
#produit-v2.v4-produit .v4-desc-carte .v4-desc-tableau :is(td, th) { padding: 9px 12px 9px 0; border: 0; border-top: 1px solid #E6E6E6; background: none; vertical-align: top; width: auto !important; height: auto !important; font-size: 14px; }
#produit-v2.v4-produit .v4-desc-carte .v4-desc-tableau tr:first-child > :is(td, th) { border-top: 0; }
#produit-v2.v4-produit .v4-desc-carte .v4-desc-tableau tr > :first-child { width: 42% !important; color: var(--v4-gris); }
#produit-v2.v4-produit .v4-desc-carte .v4-desc-tableau tr > :last-child:not(:first-child) { color: var(--v4-encre); font-weight: 600; padding-right: 0; }
#produit-v2.v4-produit .v4-desc-carte p > br:first-child { display: none; }
/* 1 a 3 cartes : autant de colonnes que de cartes, images a leur taille */
#produit-v2.v4-produit .v4-desc-cartes.v4-desc-cartes-peu { grid-template-columns: repeat(var(--v4-cols), minmax(0, 1fr)); gap: 40px 56px; }
#produit-v2.v4-produit .v4-desc-cartes-peu .v4-desc-carte img { width: auto; }
/* chaque ancien tableau commence une nouvelle ligne */
#produit-v2.v4-produit .v4-desc-cartes .v4-desc-debut { grid-column-start: 1; }
/* videos : 2 par ligne (grille #videos_c) ; une video seule sur la fiche est
   centree a la largeur d'une colonne ; nombre impair : la derniere reste a gauche */
#produit-v2.v4-produit #videos_c > .wrapper:only-child { grid-column: 1 / -1; justify-self: center; width: calc((100% - 20px) / 2); }

@media (max-width: 900px) {
	#produit-v2.v4-produit .v4-produit-description { grid-template-areas: "titre" "intro" "expert" "longue"; grid-template-rows: auto; gap: 20px; }
	#produit-v2.v4-produit .v4-description-texte > #v4-description-longue { margin-top: 4px; }
	#produit-v2.v4-produit .v4-desc-cartes { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 28px 20px; }
	#produit-v2.v4-produit .v4-desc-cartes.v4-desc-cartes-peu { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	#produit-v2.v4-produit #videos_c > .wrapper:only-child { width: 100%; }
}

#produit-v2.v4-produit #images_mood {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	margin: 0;
}

#produit-v2.v4-produit #images_mood:not(:has(img)) { display: none; }

#produit-v2.v4-produit #images_mood img {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	margin: 0;
	border-radius: 18px;
}

#produit-v2.v4-produit .v4-fpm:not(:has(.fpm_v)) { display: none; }
#produit-v2.v4-produit #videos:not(:has(.youtube)) { display: none; }
#produit-v2.v4-produit #videos_c { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
#produit-v2.v4-produit #videos .wrapper { margin: 0; max-width: none; }

#produit-v2.v4-produit #videos .youtube {
	position: relative;
	aspect-ratio: 16 / 9;
	height: auto;
	padding: 0;
	border-radius: 18px;
	overflow: hidden;
	background: #000;
}

#produit-v2.v4-produit #videos .youtube iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* --- Fiche technique et livraison --- */
#produit-v2.v4-produit .v4-produit-technique {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: 32px;
	align-items: start;
	padding: 64px 0;
}

#produit-v2.v4-produit .v4-fiche,
#produit-v2.v4-produit .v4-livraison-montage {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding: 0;
}

#produit-v2.v4-produit .v4-fiche-carte {
	border-radius: 18px;
	background: var(--v4-blanc);
	overflow: hidden;
}

#produit-v2.v4-produit .v4-fiche .attribut-nom-groupe {
	margin: 0;
	padding: 18px 22px 6px;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .6px;
	text-transform: uppercase;
	color: var(--v4-gris);
}

#produit-v2.v4-produit .v4-fiche .attribut-nom-groupe:empty { display: none; }
#produit-v2.v4-produit .v4-fiche .attribut-tab { display: block; width: auto; white-space: normal; }

#produit-v2.v4-produit .v4-fiche .attribut-tab .row,
#produit-v2.v4-produit .v4-fiche .v4-fiche-ligne {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	min-height: 0;
	padding: 14px 22px;
	border-top: 1px solid #EEEEEE;
	background: transparent;
	font-size: 16px;
	line-height: 1.45;
}

#produit-v2.v4-produit .v4-fiche .attribut-tab .cell { display: block; padding: 0; white-space: normal; }
#produit-v2.v4-produit .v4-fiche .attribut-tab .picto { display: none; }
#produit-v2.v4-produit .v4-fiche .attribut-tab .picto.has-picto { display: block; flex: 0 0 28px; height: 28px; background-size: contain; }
#produit-v2.v4-produit .v4-fiche .attribut-tab .attribut,
#produit-v2.v4-produit .v4-fiche .v4-fiche-libelle { color: var(--v4-gris); }
#produit-v2.v4-produit .v4-fiche .attribut-tab .valeur,
#produit-v2.v4-produit .v4-fiche .v4-fiche-valeur { font-weight: 800; text-align: right; color: var(--v4-encre); }

#produit-v2.v4-produit .v4-fiche-carte > .attribut-tab:first-of-type .row:first-child,
#produit-v2.v4-produit .v4-fiche-texte > ul > li:first-child { border-top: 0; }

#produit-v2.v4-produit .v4-fiche-texte { font-size: 16px; line-height: 1.6; }
#produit-v2.v4-produit .v4-fiche-texte:empty { display: none; }
#produit-v2.v4-produit .v4-fiche-texte ul { margin: 0; padding: 0; list-style: none; }
#produit-v2.v4-produit #fiche-technique .v4-fiche-texte li { list-style: none; }
#produit-v2.v4-produit .v4-fiche .v4-fiche-libelle,
#produit-v2.v4-produit .v4-fiche .attribut-tab .attribut { flex-shrink: 0; max-width: 45%; }
#produit-v2.v4-produit #fiche-technique .v4-fiche-texte li::before,
#produit-v2.v4-produit #fiche-technique .v4-fiche-texte li::marker { display: none; content: none; }
#produit-v2.v4-produit .v4-fiche-texte > :not(ul) { margin: 0; padding: 14px 22px; }

#produit-v2.v4-produit .v4-etapes {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
	padding: 24px;
	border-radius: 18px;
	background: var(--v4-blanc);
	list-style: none;
	font-size: 16px;
	line-height: 1.55;
}

#produit-v2.v4-produit .v4-etapes li { display: flex; gap: 14px; }

#produit-v2.v4-produit .v4-etape-num {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 999px;
	background: #FBE9E7;
	color: var(--v4-rouge);
	font-weight: 800;
}

#produit-v2.v4-produit .v4-etapes a { font-weight: 800; }
/* Titres « Fiche technique » et « Livraison et montage » dans leur carte blanche */
#produit-v2.v4-produit .v4-carte-titre { padding: 28px 22px 12px; }
#produit-v2.v4-produit .v4-livraison-carte {
	border-radius: 18px;
	background: var(--v4-blanc);
	overflow: hidden;
}
#produit-v2.v4-produit .v4-livraison-carte .v4-etapes { padding-top: 8px; border-radius: 0; background: transparent; }

#produit-v2.v4-produit:not([data-volumineux="oui"]) .v4-livraison-montage { display: none; }
#produit-v2.v4-produit:not([data-volumineux="oui"]) .v4-produit-technique { grid-template-columns: minmax(0, 1fr); }

/* Fiche technique en texte libre (puces sans « libelle : valeur ») : memes
   marges que les lignes, sinon la premiere ligne collait au haut de la carte */
#produit-v2.v4-produit #fiche-technique .v4-fiche-texte li:not(.v4-fiche-ligne) {
	margin: 0;
	padding: 14px 22px;
	border-top: 1px solid #EEEEEE;
	font-size: 16px;
	line-height: 1.55;
	color: var(--v4-encre-douce);
}

#produit-v2.v4-produit #fiche-technique .v4-fiche-texte li:not(.v4-fiche-ligne) + li:not(.v4-fiche-ligne) { border-top: 0; padding-top: 0; }
#produit-v2.v4-produit #fiche-technique .v4-fiche-texte > ul > li:first-child { border-top: 0; }

/* Fiche seule sur toute la largeur (produit non volumineux, pas de bloc
   livraison) : valeur a cote du libelle et non au bord droit de la carte */
@media (min-width: 901px) {
	#produit-v2.v4-produit:not([data-volumineux="oui"]) .v4-fiche .v4-fiche-ligne,
	#produit-v2.v4-produit:not([data-volumineux="oui"]) .v4-fiche .attribut-tab .row { justify-content: flex-start; }

	#produit-v2.v4-produit:not([data-volumineux="oui"]) .v4-fiche .v4-fiche-libelle,
	#produit-v2.v4-produit:not([data-volumineux="oui"]) .v4-fiche .attribut-tab .attribut { flex: 0 0 280px; max-width: none; }

	#produit-v2.v4-produit:not([data-volumineux="oui"]) .v4-fiche .v4-fiche-valeur,
	#produit-v2.v4-produit:not([data-volumineux="oui"]) .v4-fiche .attribut-tab .valeur { flex: 1 1 auto; text-align: left; }
}

/* --- Avis --- */
#produit-v2.v4-produit .v4-avis {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	gap: 32px;
	align-items: start;
}

#produit-v2.v4-produit .v4-avis[data-avis="0"] .v4-avis-note,
#produit-v2.v4-produit .v4-avis[data-avis="0"] .v4-avis-barres { display: none; }

#produit-v2.v4-produit .v4-avis-synthese { display: flex; flex-direction: column; gap: 16px; }
#produit-v2.v4-produit .v4-avis-note { display: flex; align-items: center; gap: 18px; }

#produit-v2.v4-produit .v4-avis-moyenne {
	font-family: var(--v4-titre);
	font-size: 68px;
	font-weight: 800;
	line-height: 1;
}

#produit-v2.v4-produit .v4-avis-detail { display: flex; flex-direction: column; gap: 2px; font-size: 14px; font-weight: 600; color: var(--v4-gris); }

/* Etoiles remplies selon la note (--note en %) */
#produit-v2.v4-produit .v4-etoiles {
	display: inline-block;
	font-size: 20px;
	letter-spacing: 2px;
	line-height: 1;
	background: linear-gradient(90deg, #D99A00 var(--note, 100%), #D9D9D9 var(--note, 100%));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

#produit-v2.v4-produit .v4-avis-barres { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
#produit-v2.v4-produit .v4-avis-barres li { display: flex; align-items: center; gap: 10px; font-size: 14px; }
#produit-v2.v4-produit .v4-avis-barre-libelle { width: 44px; font-weight: 700; color: var(--v4-gris); }
#produit-v2.v4-produit .v4-avis-barre { flex-grow: 1; height: 8px; border-radius: 999px; background: #EEEEEE; overflow: hidden; }
#produit-v2.v4-produit .v4-avis-barre span { display: block; height: 8px; border-radius: 999px; background: #D99A00; }
#produit-v2.v4-produit .v4-avis-barre-pct { flex-shrink: 0; width: 50px; text-align: right; font-weight: 700; color: var(--v4-gris); white-space: nowrap; }
/* Nombre d'avis de la note, a cote du pourcentage (06/11/2026) */
#produit-v2.v4-produit .v4-avis-barre-nb { flex-shrink: 0; width: 46px; text-align: left; font-size: 13px; font-weight: 400; color: var(--v4-gris); white-space: nowrap; }

/* Filtre des avis par note : chaque barre est un bouton (template_produit_v4.tpl) */
#produit-v2.v4-produit .v4-avis-barres li { display: block; }
#produit-v2.v4-produit .v4-avis-filtre {
	display: flex;
	align-items: center;
	gap: 10px;
	box-sizing: border-box;
	width: calc(100% + 16px);
	margin: 0 -8px;
	padding: 5px 8px;
	border: 0;
	border-radius: 10px;
	background: none;
	color: inherit;
	font: inherit;
	font-size: 14px;
	text-align: left;
	cursor: pointer;
	transition: background .15s ease;
}
#produit-v2.v4-produit .v4-avis-filtre:hover { background: var(--v4-creme); }
#produit-v2.v4-produit .v4-avis-filtre:hover .v4-avis-barre-libelle { color: var(--v4-encre); text-decoration: underline; text-underline-offset: 3px; }
#produit-v2.v4-produit .v4-avis-filtre[aria-pressed="true"] { background: var(--v4-sable); }
#produit-v2.v4-produit .v4-avis-filtre[aria-pressed="true"] :is(.v4-avis-barre-libelle, .v4-avis-barre-pct) { color: var(--v4-encre); }
#produit-v2.v4-produit .v4-avis-filtre:disabled { cursor: default; }
#produit-v2.v4-produit .v4-avis-filtre:disabled:hover { background: none; }
#produit-v2.v4-produit .v4-avis-filtre:disabled:hover .v4-avis-barre-libelle { color: var(--v4-gris); text-decoration: none; }
#produit-v2.v4-produit .v4-avis-filtre-etat {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	margin: 0 0 14px;
	color: var(--v4-encre);
	font-size: 15px;
	font-weight: 800;
}
#produit-v2.v4-produit .v4-avis-filtre-etat[hidden] { display: none; }
#produit-v2.v4-produit .v4-avis-filtre-tout { padding: 0; border: 0; background: none; color: var(--v4-gris); font: inherit; font-size: 14px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
#produit-v2.v4-produit .v4-avis-filtre-tout:hover { color: var(--v4-encre); text-decoration: underline; text-underline-offset: 3px; }

#produit-v2.v4-produit .v4-avis-liste { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; }
#produit-v2.v4-produit .v4-avis-liste > h2,
#produit-v2.v4-produit .v4-avis-liste > .titre { display: none; }
#produit-v2.v4-produit .v4-avis-liste #temoignages-ajax { display: contents; }

#produit-v2.v4-produit .v4-avis-liste .temoignage {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	margin: 0;
	padding: 22px 24px;
	border: 0;
	border-radius: 18px;
	background: var(--v4-creme);
	float: none;
	width: auto;
}

#produit-v2.v4-produit .v4-avis-liste .temoignage.v4-cache { display: none; }
#produit-v2.v4-produit .v4-avis-liste .temoignage .nom { order: 3; width: 100%; font-size: 14px; color: var(--v4-gris); }
#produit-v2.v4-produit .v4-avis-liste .temoignage .nom b { font-weight: 700; }
#produit-v2.v4-produit .v4-avis-liste .temoignage .note_etoile img { width: 15px; height: 15px; mix-blend-mode: multiply; }
#produit-v2.v4-produit .v4-avis-liste .temoignage .note { display: none; }
#produit-v2.v4-produit .v4-avis-liste .temoignage .achat { margin-left: auto; font-size: 13px; font-weight: 700; color: #1E6B38; }
#produit-v2.v4-produit .v4-avis-liste .temoignage .tem-cli { order: 2; width: 100%; margin: 0; padding: 0; background: transparent; }
#produit-v2.v4-produit .v4-avis-liste .temoignage .tem-cli .quote { display: none; }
#produit-v2.v4-produit .v4-avis-liste .temoignage .contenu { margin: 0; font-size: 17px; line-height: 1.5; color: var(--v4-encre); }
/* Ordre (06/11/2026) : avis, prenom du client, puis notre reponse. Le bloc .tem-cli
   s'efface pour que l'avis et la reponse se rangent de part et d'autre du nom
   (aussi pour les avis charges en plus, gabarits partages de fichiers/) */
#produit-v2.v4-produit .v4-avis-liste .temoignage .tem-cli { display: contents; }
#produit-v2.v4-produit .v4-avis-liste .temoignage .contenu { order: 2; width: 100%; }
#produit-v2.v4-produit .v4-avis-liste .temoignage .reponse { order: 4; width: 100%; box-sizing: border-box; }

#produit-v2.v4-produit .v4-avis-liste .temoignage .reponse {
	margin-top: 8px;
	padding: 12px 14px;
	border-radius: 12px;
	background: var(--v4-blanc);
	font-size: 14px;
	line-height: 1.5;
}

#produit-v2.v4-produit .v4-avis-plus {
	align-self: flex-start;
	height: 48px;
	padding: 0 24px;
	border: 2px solid var(--v4-encre);
	border-radius: var(--v4-pilule);
	background: transparent;
	color: var(--v4-encre);
	font: inherit;
	font-size: 15px;
	font-weight: 800;
	cursor: pointer;
}

#produit-v2.v4-produit .v4-avis-plus[hidden] { display: none; }
#produit-v2.v4-produit .v4-avis-plus:hover { background: var(--v4-encre); color: var(--v4-blanc); }

/* --- Questions --- */
/* Bande blanche arrondie, comme les avis. La regle .v4-faq de la home
   (fond blanc pleine largeur par box-shadow et clip-path) est neutralisee. */
#produit-v2.v4-produit #faq.v4-faq {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 64px 0 0;
	padding: 56px;
	border-radius: 24px;
	background: var(--v4-blanc);
	box-shadow: none;
	clip-path: none;
}

#produit-v2.v4-produit .v4-faq .faq {
	margin: 0;
	padding: 22px 24px;
	border-radius: 18px;
	background: var(--v4-creme);
}

#produit-v2.v4-produit .v4-faq .titre_faq { font-size: 13px; font-weight: 700; color: var(--v4-gris); }
#produit-v2.v4-produit .v4-faq .question { margin: 4px 0 10px; font-size: 17px; font-weight: 800; line-height: 1.4; color: var(--v4-encre); }
#produit-v2.v4-produit #faq.v4-faq .faq .reponse {
	margin: 0;
	padding: 14px 16px;
	border: 0;
	border-radius: 12px;
	background: var(--v4-blanc);
	font-size: 15px;
	line-height: 1.6;
	color: var(--v4-encre-douce);
}

#produit-v2.v4-produit #faq.v4-faq .faq[hidden] { display: none; }

/* Formulaire « poser une question » charge par produit_3_question.php */
#produit-v2.v4-produit #ajax_poser_question:not(:empty) {
	box-sizing: border-box;
	width: 100%;
	max-width: 720px;
	margin-top: 10px;
	padding: 24px;
	border-radius: 18px;
	background: var(--v4-creme);
}

#produit-v2.v4-produit #ajax_poser_question #poser_question {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 12px;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	text-align: left;
}

#produit-v2.v4-produit #ajax_poser_question #envoi_question {
	font-size: 17px;
	font-weight: 800;
	color: var(--v4-encre);
}

#produit-v2.v4-produit #ajax_poser_question #recaptcha {
	width: auto;
	max-width: none;
	margin: 0;
	text-align: left;
}

#produit-v2.v4-produit #ajax_poser_question .g-recaptcha { text-align: left !important; }

#produit-v2.v4-produit #ajax_poser_question .poser {
	align-self: flex-start;
	margin: 0;
	height: 48px;
	padding: 0 24px;
	border: 0;
	border-radius: var(--v4-pilule);
	background: var(--v4-encre);
	color: var(--v4-blanc);
	font: inherit;
	font-size: 15px;
	font-weight: 800;
	text-transform: none;
	cursor: pointer;
}

#produit-v2.v4-produit #ajax_poser_question input[type="text"],
#produit-v2.v4-produit #ajax_poser_question input[type="email"],
#produit-v2.v4-produit #ajax_poser_question textarea {
	width: 100%;
	max-width: none;
	margin: 0;
	box-sizing: border-box;
	padding: 12px 14px;
	border: 1.5px solid var(--v4-bordure-chip);
	border-radius: 12px;
	background: var(--v4-blanc);
	font: inherit;
	font-size: 15px;
}

/* --- Recommandations : cartes de la home --- */
#produit-v2.v4-produit .v4-reco-bloc { padding: 64px 0 24px; }
#produit-v2.v4-produit .v4-reco-bloc:not(:has(.bloc-produit-v2)) { display: none; }

#produit-v2.v4-produit #recommandations {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: 20px;
	row-gap: 0;
	align-items: stretch;
}

#produit-v2.v4-produit #recommandations > .titre {
	grid-column: 1 / -1;
	margin: 0 0 20px;
	font-family: var(--v4-titre);
	font-size: 44px;
	font-weight: 800;
	line-height: 1;
	text-transform: uppercase;
}

/* --- Barre d'achat du haut (ordinateur) --- */
#produit-v2.v4-produit .v4-barre-achat {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 900;
	background: var(--v4-blanc);
	border-bottom: 1px solid var(--v4-bordure);
	box-shadow: 0 6px 20px rgba(22, 24, 29, .06);
}

#produit-v2.v4-produit .v4-barre-achat[hidden] { display: none; }

#produit-v2.v4-produit .v4-barre-achat-contenu {
	display: flex;
	align-items: center;
	gap: 20px;
	max-width: 1400px;
	height: 76px;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
}

#produit-v2.v4-produit .v4-barre-achat img {
	width: 52px;
	height: 52px;
	border-radius: 10px;
	background: var(--v4-sable);
	object-fit: contain;
}

#produit-v2.v4-produit .v4-barre-achat-nom { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
#produit-v2.v4-produit .v4-barre-achat-nom strong { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#produit-v2.v4-produit .v4-barre-achat-sous { font-size: 13px; color: var(--v4-gris); }
#produit-v2.v4-produit .v4-barre-achat-sous .v4-etoiles { font-size: 13px; letter-spacing: 1px; }
#produit-v2.v4-produit .v4-barre-achat-prix {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	margin-left: auto;
	white-space: nowrap;
}

/* Prix des barres d'achat (haut sur ordinateur, bas sur telephone) */
#produit-v2.v4-produit .v4-bp-ancien {
	display: flex;
	align-items: baseline;
	gap: 6px;
	font-size: 14px;
	line-height: 1;
	color: var(--v4-encre);
}

#produit-v2.v4-produit .v4-bp-comparaison { font-size: 11px; font-weight: 600; color: var(--v4-gris); }

/* Prix de comparaison des barres : repris de la carte d'achat (#prix_p) */
#produit-v2.v4-produit .v4-bp-ref { position: relative; outline: none; }
#produit-v2.v4-produit .v4-bp-ref .pv2-old-price { display: flex; align-items: center; gap: 5px; }
#produit-v2.v4-produit .v4-bp-ref .pv2-strike { font-size: 15px; line-height: 1; color: #262626; text-decoration: line-through; }
#produit-v2.v4-produit .v4-bp-ref .pv2-compare {
	position: relative;
	padding-right: 12px;
	font-size: 9px;
	font-weight: 400;
	line-height: 1;
	color: #262626;
	text-align: left;
	white-space: nowrap;
	cursor: pointer;
}
#produit-v2.v4-produit .v4-bp-ref .v4-bp-sep { display: block; }
#produit-v2.v4-produit .v4-bp-ref .pv2-compare::after {
	content: "i";
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 9px;
	height: 9px;
	border: 1px solid #262626;
	border-radius: 50%;
	background: #FFFFFF;
	font-size: 8px;
	color: #262626;
}
#produit-v2.v4-produit .v4-bp-ref .pv2-tooltip {
	display: none;
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 5000;
	width: 230px;
	box-sizing: border-box;
	padding: 6px 8px;
	border-radius: 5px;
	background: #F4F4F4;
	box-shadow: 0 4px 8px rgba(0, 0, 0, .1);
	color: #4A4A4A;
	font-size: 11px;
	font-weight: 400;
	line-height: 1.3;
	text-align: left;
	white-space: normal;
}
#produit-v2.v4-produit .v4-bp-ref .pv2-tooltip::after {
	content: "";
	position: absolute;
	bottom: 100%;
	right: 20px;
	border: 7px solid transparent;
	border-bottom-color: #F4F4F4;
}
#produit-v2.v4-produit .v4-bp-ref:hover .pv2-tooltip,
#produit-v2.v4-produit .v4-bp-ref:focus .pv2-tooltip { display: block; }
#produit-v2.v4-produit .v4-bp-ligne { display: flex; align-items: center; gap: 8px; }

#produit-v2.v4-produit .v4-bp-actuel {
	font-size: 26px;
	font-weight: 800;
	line-height: 1;
	color: var(--price-color, #8C0000);
}

#produit-v2.v4-produit .v4-bp-remise {
	padding: 3px 7px;
	border-radius: 5px;
	background: var(--price-color, #8C0000);
	color: var(--v4-blanc);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.2;
}

#produit-v2.v4-produit .v4-barre-achat-bouton {
	height: 52px;
	padding: 0 28px;
	border: 0;
	border-radius: var(--v4-pilule);
	background: var(--v4-vert);
	color: var(--v4-blanc);
	font: inherit;
	font-size: 16px;
	font-weight: 800;
	cursor: pointer;
}

#produit-v2.v4-produit .v4-barre-achat-bouton:hover { background: #125E33; }

/* --- Ecrans moyens --- */
@media (max-width: 1200px) {
	#produit-v2.v4-produit .v4-produit-haut { gap: 28px; }
	#produit-v2.v4-produit .v4-galerie-principale { height: 520px; }
	#produit-v2.v4-produit .v4-vignette { height: 220px; }
	#produit-v2.v4-produit .v4-chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	#produit-v2.v4-produit #images_mood { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	#produit-v2.v4-produit #recommandations { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- Tablette et telephone --- */
@media (max-width: 900px) {
	#produit-v2.v4-produit .v4-barre-achat { display: none !important; }

	#produit-v2.v4-produit #arbo { margin-top: 12px; font-size: 13px; }

	#produit-v2.v4-produit .v4-produit-haut {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
		padding: 12px 0 36px;
	}

	#produit-v2.v4-produit .v4-galerie { gap: 10px; }
	#produit-v2.v4-produit .v4-galerie-principale { height: auto; aspect-ratio: 1 / 1; border-radius: 16px; }
	#produit-v2.v4-produit .v4-galerie-video { height: 40px; padding: 0 14px; font-size: 13px; right: 12px; bottom: 12px; }
	#produit-v2.v4-produit .v4-galerie-compte { left: 12px; bottom: 12px; }

	/* Vignettes en bande qui defile */
	/* Bande de vignettes calee sur la largeur de la photo principale */
	#produit-v2.v4-produit .v4-galerie-vignettes {
		display: flex;
		gap: 8px;
		overflow-x: auto;
		scrollbar-width: none;
		scroll-snap-type: x proximity;
		margin: 0;
		padding: 0;
		max-width: 100%;
	}
	#produit-v2.v4-produit .v4-galerie-vignettes .v4-vignette { scroll-snap-align: start; }

	#produit-v2.v4-produit .v4-galerie-vignettes::-webkit-scrollbar { display: none; }

	/* 4 vignettes et un quart a l'ecran : la vignette coupee montre qu'il y en a
	   d'autres (avant, 5 vignettes de 64 px tombaient pile sur la largeur) */
	#produit-v2.v4-produit .v4-vignette,
#produit-v2.v4-produit .v4-vignette:nth-child(n+5) {
		display: flex;
		flex: 0 0 calc((100% - 32px) / 4.25);
		height: auto;
		aspect-ratio: 1;
		border-radius: 12px;
	}

	#produit-v2.v4-produit .v4-vignette.on { border-width: 2px; }
	#produit-v2.v4-produit .v4-vignette-plus::after { display: none; }

	#produit-v2.v4-produit #h1-produit { font-size: 26px; }

	#produit-v2.v4-produit #produit-droite #bloc-commande.v4-achat { padding: 18px; border-radius: 16px; }
	#produit-v2.v4-produit #produit-droite #bloc-commande.v4-achat #commande .prix_p .pv2-current { font-size: 38px; }
	#produit-v2.v4-produit .v4-choix-bouton { min-height: 56px; padding: 10px 12px; font-size: 14px; }
	#produit-v2.v4-produit .v4-choix-bouton small { font-size: 14px; }

	#produit-v2.v4-produit .v4-produit-bande { padding: 28px 20px; border-radius: 16px; }
	#produit-v2.v4-produit .v4-titre-section,
#produit-v2.v4-produit #recommandations > .titre { font-size: 32px; }

	#produit-v2.v4-produit .v4-produit-essentiel { gap: 28px; }
	#produit-v2.v4-produit .v4-chiffres { gap: 10px; }
	#produit-v2.v4-produit .v4-chiffre { padding: 16px; border-radius: 14px; }
	#produit-v2.v4-produit .v4-chiffre strong { font-size: 30px; }
	#produit-v2.v4-produit .v4-chiffre.v4-chiffre-long strong { font-size: 22px; }
	#produit-v2.v4-produit .v4-chiffre span { font-size: 13px; }

	#produit-v2.v4-produit .v4-produit-description,
#produit-v2.v4-produit .v4-produit-technique,
#produit-v2.v4-produit .v4-avis { grid-template-columns: minmax(0, 1fr); gap: 24px; }

	#produit-v2.v4-produit .v4-produit-technique { padding: 36px 0; }
	#produit-v2.v4-produit .v4-expert { padding: 24px; }
	#produit-v2.v4-produit .v4-expert-citation { font-size: 24px; }

	#produit-v2.v4-produit #images_mood,
#produit-v2.v4-produit #videos_c { grid-template-columns: minmax(0, 1fr); gap: 12px; }

	#produit-v2.v4-produit #faq.v4-faq { margin-top: 36px; padding: 28px 20px; border-radius: 16px; }
	#produit-v2.v4-produit .v4-faq .faq { padding: 18px; border-radius: 14px; }
	#produit-v2.v4-produit .v4-reco-bloc { padding: 36px 0 12px; }
	#produit-v2.v4-produit #recommandations { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

	/* Barre d'achat du bas */
	#produit-v2.v4-produit #produit-droite #bloc-commande-mobile {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		box-sizing: border-box;
		width: auto;
		margin: 0;
		z-index: 900;
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
		background: var(--v4-blanc);
		border-top: 1px solid var(--v4-bordure);
		box-shadow: 0 -6px 20px rgba(22, 24, 29, .08);
	}

	/* Vignette du produit a gauche, remonte aux photos au clic (09/11/2026) */
	#produit-v2.v4-produit #produit-droite #bloc-commande-mobile .v4-barre-mobile-vignette { flex-shrink: 0; width: 48px; height: 48px; padding: 0; border: 1px solid var(--v4-bordure); border-radius: 10px; background: var(--v4-blanc); overflow: hidden; cursor: pointer; }
	#produit-v2.v4-produit #produit-droite #bloc-commande-mobile .v4-barre-mobile-vignette img { display: block; width: 100%; height: 100%; object-fit: contain; }
	#produit-v2.v4-produit #produit-droite #bloc-commande-mobile .v4-barre-mobile-prix { display: flex; flex-direction: column; gap: 2px; white-space: nowrap; }
	#produit-v2.v4-produit #produit-droite #bloc-commande-mobile .v4-bp-ancien { font-size: 13px; }
	#produit-v2.v4-produit #produit-droite #bloc-commande-mobile .v4-bp-comparaison { font-size: 10px; }
	#produit-v2.v4-produit #produit-droite #bloc-commande-mobile .v4-bp-ref .pv2-strike { font-size: 13px; }
	#produit-v2.v4-produit #produit-droite #bloc-commande-mobile .v4-bp-ref .v4-bp-sep { display: inline; }
	#produit-v2.v4-produit #produit-droite #bloc-commande-mobile .v4-bp-ref .pv2-tooltip { top: auto; bottom: calc(100% + 8px); right: auto; left: 0; }
	#produit-v2.v4-produit #produit-droite #bloc-commande-mobile .v4-bp-ref .pv2-tooltip::after { bottom: auto; top: 100%; right: auto; left: 12px; border-bottom-color: transparent; border-top-color: #F4F4F4; }
	#produit-v2.v4-produit #produit-droite #bloc-commande-mobile .v4-bp-actuel { font-size: 22px; }
	#produit-v2.v4-produit #produit-droite #bloc-commande-mobile .v4-bp-remise { font-size: 12px; padding: 2px 6px; }
	#produit-v2.v4-produit #produit-droite #bloc-commande-mobile #disponibilite_mobile { display: flex; flex-direction: column; font-size: 12px; line-height: 1.3; min-width: 0; }
	#produit-v2.v4-produit #produit-droite #bloc-commande-mobile #disponibilite_mobile .mkt_stock { display: none; }
	#produit-v2.v4-produit #produit-droite #bloc-commande-mobile #disponibilite_mobile .delai,
	#produit-v2.v4-produit #produit-droite #bloc-commande-mobile #disponibilite_mobile .delai * { font-size: 13px; font-weight: 700; line-height: 1.3; white-space: nowrap; }

	/* La bulle d'Aristide remonte au-dessus de la barre d'achat */
	body:has(#produit-v2.v4-produit) .chat-quickbutton { bottom: 90px !important; }
	#produit-v2.v4-produit #produit-droite #bloc-commande-mobile #bt_mobile { flex-shrink: 0; margin: 0 0 0 auto; }

	#produit-v2.v4-produit #produit-droite #bloc-commande-mobile #bt_mobile .bt-commander,
#produit-v2.v4-produit #produit-droite #bloc-commande-mobile #bt_mobile button {
		height: 48px;
		padding: 0 22px;
		border: 0;
		border-radius: var(--v4-pilule);
		background: var(--v4-vert);
		color: var(--v4-blanc);
		font: inherit;
		font-size: 16px;
		font-weight: 800;
		text-transform: none;
		width: auto;
		max-width: none;
	}

	/* Place pour la barre du bas en fin de page */
	body:has(.v4-produit) { padding-bottom: 76px; }
}

/* Petit telephone : la barre du bas garde le prix et le bouton, le stock
   reste visible dans la carte d'achat */
@media (max-width: 420px) {
	#produit-v2.v4-produit #produit-droite #bloc-commande-mobile #disponibilite_mobile { display: none; }
}

@media (max-width: 640px) {
	#produit-v2.v4-produit #recommandations { grid-template-columns: minmax(0, 1fr); gap: 10px; }
	#produit-v2.v4-produit .v4-avis-moyenne { font-size: 56px; }
	#produit-v2.v4-produit .v4-achat-garanties { flex-wrap: wrap; }
	#produit-v2.v4-produit .v4-achat-garanties li { flex: 1 1 40%; }
}


/* ===========================================================================
   VITESSE ET ACCESSIBILITE (PageSpeed du 27/10/2026)
   =========================================================================== */

/* Cartes v4 : vraie image avec width/height (place reservee, pas de decalage) */
:is(#selecteur, .v4-cat, #recommandations, #v4-recherche) .bloc-produit-v2 img.img-prd { height: auto; aspect-ratio: 1 / 1; }

/* Videos YouTube en facade : miniature + bouton lecture, lecteur charge au clic */
#produit-v2.v4-produit #videos .v4-video-facade {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: #000;
	cursor: pointer;
}
#produit-v2.v4-produit #videos .v4-video-facade img {
	/* La feuille du site decale .youtube img vers le haut (top: -16.82 %, ancien
	   lecteur) : la vignette laissait une bande noire en bas. On la recale. */
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
	object-position: center;
	opacity: .9;
}
#produit-v2.v4-produit #videos .v4-video-lecture {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 68px;
	height: 48px;
	border-radius: 14px;
	background: rgba(22, 24, 29, .82);
	transform: translate(-50%, -50%);
	transition: background .15s;
}
#produit-v2.v4-produit #videos .v4-video-lecture::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	border-style: solid;
	border-width: 11px 0 11px 18px;
	border-color: transparent transparent transparent #FFFFFF;
	transform: translate(-50%, -50%);
}
#produit-v2.v4-produit #videos .v4-video-facade:hover .v4-video-lecture,
#produit-v2.v4-produit #videos .v4-video-facade:focus-visible .v4-video-lecture { background: #C4231B; }

/* « Contactez-nous » du bandeau : bouton (ouvre la fenetre de contact) a l'allure d'un lien */
button.v4-lien-bouton {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
}
button.v4-lien-bouton:hover { text-decoration: underline; }
/* Bandeau ordinateur (06/11/2026) : le numero ouvre la fenetre de contact (plus de
   « Contactez-nous »), en vert ; lien vers les avis clients comme sur mobile */
#header-2-pre button.v4-tel-contact { color: #5CD18B; font-weight: 800; }
#header-2-pre button.v4-tel-contact:hover { color: #8FE3AE; text-decoration: underline; text-underline-offset: 3px; }
#header-2-pre .v4-lien-avis .etoile { color: var(--v4-or); }

/* --- concours video : teinte bleue propre au concours (28/10/2026), distincte de
   la carte sombre et jaune des avis clients ------------------------------------ */
:root {
	--v4-bleu:        #1F5FA8;
	--v4-bleu-fonce:  #163F75;
	--v4-bleu-clair:  #8EC1FF;
	--v4-bleu-pale:   #E8F0FA;
}

/* barre haute, toutes les pages, au-dessus de 1000 px */
#header-2-pre a.v4-lien-concours { margin-left: auto; margin-right: 16px; color: var(--v4-bleu-clair); font-weight: 800; white-space: nowrap; }
#header-2-pre a.v4-lien-concours:hover { color: var(--v4-blanc); }
@media (max-width: 1000px) {
	#header-2-pre a.v4-lien-concours { display: none; }
}

/* bandeau court, entre 768 et 1000 px (ni ligne de service ni burger) */
#header-2-pre .v4-bandeau-mobile .v4-bandeau-concours { display: none; }
#header-2-pre .v4-bandeau-mobile a.v4-bandeau-concours { color: var(--v4-bleu-clair); font-weight: 800; }
@media (min-width: 768px) and (max-width: 1000px) {
	#header-2-pre .v4-bandeau-mobile .v4-bandeau-concours { display: inline; }
}

/* encart du menu mobile */
#mobile-menu a.v4-menu-concours { display: flex; align-items: center; gap: 12px; margin: 14px 20px 10px; padding: 14px; border-radius: 14px; background: var(--v4-bleu-pale); border: 1.5px solid var(--v4-bleu); color: var(--v4-encre); text-decoration: none; }
#mobile-menu .v4-menu-concours-icone { width: 44px; height: 44px; flex-shrink: 0; border-radius: 999px; background: var(--v4-bleu); color: var(--v4-blanc); display: flex; align-items: center; justify-content: center; }
#mobile-menu .v4-menu-concours-texte { display: flex; flex-direction: column; gap: 2px; line-height: 1.3; font-size: 12px; color: var(--v4-gris); }
#mobile-menu .v4-menu-concours-texte strong { font-size: 15px; color: var(--v4-encre); }
#mobile-menu .v4-menu-concours-sur { font-size: 11px; font-weight: 800; color: var(--v4-bleu); text-transform: uppercase; letter-spacing: .4px; }

/* bloc de la home */
.v4-concours-home { padding: 80px 0 0; }
.v4-concours-home-carte { display: flex; align-items: center; gap: 40px; padding: 48px; border-radius: 24px; background: linear-gradient(135deg, var(--v4-bleu) 0%, var(--v4-bleu-fonce) 100%); color: #DCE7F5; }
.v4-concours-home-texte { flex: 1 1 auto; display: flex; flex-direction: column; gap: 14px; }
.v4-concours-home-etiquette { font-size: 14px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: var(--v4-bleu-clair); }
.v4-concours-home h2 { margin: 0; padding: 0; background: none; font-family: var(--v4-titre); font-weight: 800; font-size: 54px; line-height: 1; text-transform: uppercase; color: var(--v4-blanc); }
.v4-concours-home h2 span { color: var(--v4-bleu-clair); }
.v4-concours-home p { margin: 0; font-size: 17px; line-height: 1.5; max-width: 720px; }
.v4-concours-home p.v4-concours-home-accroche { font-family: var(--v4-titre); font-weight: 700; font-size: 26px; line-height: 1.15; color: var(--v4-blanc); }
.v4-concours-home-etapes { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.v4-concours-home-etapes li { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--v4-blanc); font-size: 15px; }
.v4-concours-home-etapes b { width: 30px; height: 30px; border-radius: 999px; background: var(--v4-blanc); color: var(--v4-bleu); display: flex; align-items: center; justify-content: center; font-size: 14px; }
.v4-concours-home-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; margin-top: 8px; }
.v4-concours-home .v4-concours-home-bouton { background: var(--v4-blanc); color: var(--v4-bleu); }
.v4-concours-home .v4-concours-home-bouton:hover { background: var(--v4-bleu-pale); color: var(--v4-bleu-fonce); }
.v4-concours-home-lien { color: #DCE7F5; font-weight: 700; text-decoration: underline; }
.v4-concours-home-lien:hover { color: var(--v4-blanc); }
.v4-concours-home-montant { flex: 0 0 auto; width: 220px; height: 220px; border-radius: 999px; background: var(--v4-blanc); color: var(--v4-bleu); box-shadow: 0 0 0 10px rgba(255,255,255,.14); display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; line-height: 1.1; }
.v4-concours-home-montant b { font-family: var(--v4-titre); font-size: 64px; color: var(--v4-bleu-fonce); }
@media (max-width: 900px) {
	.v4-concours-home { padding: 56px 0 0; }
	.v4-concours-home-carte { flex-direction: column-reverse; align-items: flex-start; gap: 22px; padding: 28px; }
	.v4-concours-home h2 { font-size: 40px; }
	.v4-concours-home-montant { width: 140px; height: 140px; font-size: 13px; box-shadow: 0 0 0 7px rgba(255,255,255,.14); }
	.v4-concours-home-montant b { font-size: 42px; }
}
@media (max-width: 640px) {
	.v4-concours-home { padding: 32px 0 0; }
	.v4-concours-home-carte { padding: 22px; border-radius: 18px; }
	.v4-concours-home h2 { font-size: 34px; }
	.v4-concours-home p.v4-concours-home-accroche { font-size: 21px; }
	.v4-concours-home p { font-size: 15px; }
	.v4-concours-home-etapes { flex-direction: column; }
	.v4-concours-home-actions .v4-bouton { width: 100%; justify-content: center; }
}

/* ===========================================================================
   RECHERCHE (03/11/2026) : liste deroulante et page de resultats
   Maquette, planche 5a. Moteur : fichiers/inc/recherche_ia.php
   =========================================================================== */

/* liste deroulante : proposition « Demander a Aristide » */
#search-results a.v4-recherche-aristide { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 12px 14px; border-radius: 14px; background: var(--v4-encre); color: var(--v4-blanc); text-decoration: none; }
#search-results a.v4-recherche-aristide:hover { background: #2A2D33; }
#search-results a.v4-recherche-aristide img { width: 40px; height: 40px; border-radius: 999px; flex-shrink: 0; }
#search-results a.v4-recherche-aristide > span { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
#search-results a.v4-recherche-aristide strong { font-size: 15px; font-weight: 800; color: var(--v4-blanc); }
#search-results a.v4-recherche-aristide > span > span { font-size: 13px; color: var(--v4-sur-encre); }
#search-results a.v4-recherche-aristide svg { flex-shrink: 0; }

/* page de resultats */
#v4-recherche { max-width: 1400px; margin: 0 auto; padding: 28px 0 64px; font-family: var(--v4-texte); color: var(--v4-encre); }
#v4-recherche.v4-recherche-ia { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 28px; align-items: start; }
#v4-recherche.v4-recherche-classique .v4-rech-colonne { display: none; }
#v4-recherche .v4-rech-colonne { position: sticky; top: 20px; }
/* Grille comme la page categorie (filtres a gauche) : 3 cartes par rangee au plus,
   2 entre 901 et 1200 px a cote de la colonne Aristide ; en dessous, regles communes (v4-recherche grille 3) */
@media (min-width: 1201px) { #v4-recherche #categorie-v2-produits { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 901px) and (max-width: 1200px) { #v4-recherche.v4-recherche-ia #categorie-v2-produits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

#v4-recherche .v4-rech-aristide { display: flex; flex-direction: column; gap: 14px; padding: 24px; border-radius: 24px; background: var(--v4-blanc); }
#v4-recherche .v4-rech-tete { display: flex; align-items: center; gap: 12px; }
#v4-recherche .v4-rech-tete img { width: 46px; height: 46px; border-radius: 999px; }
#v4-recherche .v4-rech-tete > span { display: flex; flex-direction: column; line-height: 1.25; }
#v4-recherche .v4-rech-tete strong { font-size: 17px; font-weight: 800; }
#v4-recherche .v4-rech-tete > span > span { font-size: 13px; color: var(--v4-gris); }
#v4-recherche .v4-rech-question { align-self: flex-end; max-width: 90%; margin: 0; padding: 10px 14px; border-radius: 16px 16px 4px 16px; background: var(--v4-encre); color: var(--v4-blanc); font-size: 15px; line-height: 1.45; }
#v4-recherche .v4-rech-compris { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--v4-gris); }
#v4-recherche .v4-rech-puce { padding: 4px 10px; border-radius: 999px; background: var(--v4-creme); color: var(--v4-encre); font-weight: 700; }
#v4-recherche .v4-rech-reponse { margin: 0; padding: 14px 16px; border-radius: 4px 16px 16px 16px; background: var(--v4-creme); font-size: 15px; line-height: 1.55; }
#v4-recherche .v4-rech-note { margin: 0; font-size: 13px; color: var(--v4-gris); }
/* Lien vers la grille, telephone et tablette seulement (gabarit template_search_v4.tpl) */
#v4-recherche .v4-rech-voir { display: none; }
@media (max-width: 1024px) {
	#v4-recherche .v4-rech-voir { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px; border-radius: 999px; background: var(--v4-vert); color: var(--v4-blanc); font-size: 16px; font-weight: 800; text-decoration: none; }
	#v4-recherche .v4-rech-voir:hover { background: #126033; color: var(--v4-blanc); }
	#v4-recherche .v4-rech-voir span { font-size: 18px; line-height: 1; }
}
#v4-recherche .v4-rech-suites { display: flex; flex-wrap: wrap; gap: 8px; }
#v4-recherche .v4-rech-suites button { min-height: 40px; padding: 8px 14px; border: 1.5px solid var(--v4-bordure-chip); border-radius: 999px; background: var(--v4-blanc); color: var(--v4-encre); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; text-align: left; }
#v4-recherche .v4-rech-suites button:hover { border-color: var(--v4-encre); }
#v4-recherche .v4-rech-suites .v4-rech-ecrire { background: var(--v4-encre); border-color: var(--v4-encre); color: var(--v4-blanc); }

#v4-recherche .v4-rech-barre { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
#v4-recherche h1.v4-rech-titre { margin: 0; padding: 0; background: none; font-family: var(--v4-titre); font-size: 40px; font-weight: 800; line-height: 1; text-transform: uppercase; text-align: left; color: var(--v4-encre); }
#v4-recherche .v4-rech-filtres { display: flex; flex-wrap: wrap; gap: 8px; }
#v4-recherche .v4-rech-filtre { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 14px; border-radius: 999px; background: var(--v4-blanc); border: 1.5px solid var(--v4-bordure-chip); color: var(--v4-encre); font-size: 14px; font-weight: 700; text-decoration: none; }
#v4-recherche a.v4-rech-filtre:hover { border-color: var(--v4-encre); }
#v4-recherche .v4-rech-filtre > span[aria-hidden] { font-size: 18px; line-height: 1; color: var(--v4-gris); }
#v4-recherche .v4-rech-filtre-assoupli { text-decoration: line-through; color: var(--v4-gris); background: transparent; }
#v4-recherche a.v4-rech-filtre.v4-rech-categorie { background: var(--v4-encre); border-color: var(--v4-encre); color: var(--v4-blanc); }
#v4-recherche a.v4-rech-filtre.v4-rech-categorie > span[aria-hidden] { color: var(--v4-blanc); }
#v4-recherche a.v4-rech-filtre.v4-rech-remettre { background: transparent; border-style: dashed; color: var(--v4-gris); }
#v4-recherche .v4-rech-assoupli,
#v4-recherche .v4-rech-message { margin: 0; font-size: 14px; color: var(--v4-gris); }
#v4-recherche .v4-rech-message { margin-bottom: 12px; padding: 12px 16px; border-radius: 14px; background: var(--v4-blanc); }
#v4-recherche .v4-rech-classique { align-self: flex-start; font-size: 14px; font-weight: 700; color: var(--v4-encre); }
#v4-recherche .v4-rech-vide { padding: 24px; border-radius: 18px; background: var(--v4-blanc); font-size: 16px; line-height: 1.5; }
#v4-recherche .v4-rech-vide p { margin: 0 0 8px; }
#v4-recherche .v4-rech-vide a { font-weight: 700; color: var(--v4-encre); }

@media (max-width: 1100px) {
	#v4-recherche.v4-recherche-ia { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 900px) {
	#v4-recherche { padding: 16px 0 40px; }
	#v4-recherche.v4-recherche-ia { grid-template-columns: minmax(0, 1fr); }
	#v4-recherche .v4-rech-colonne { position: static; }
	#v4-recherche .v4-rech-aristide { padding: 18px; border-radius: 18px; }
	#v4-recherche h1.v4-rech-titre { font-size: 30px; }
	#v4-recherche .v4-rech-filtre { min-height: 32px; padding: 5px 12px; font-size: 13px; }
}
/* Ordinateur (1025 px et plus) : la reponse d'Aristide s'affiche dans son panneau a gauche
   (js_general/aristide.js), plus dans la page. Tablette et telephone : carte dans la page. */
@media (min-width: 1025px) {
	#v4-recherche.v4-recherche-ia { grid-template-columns: minmax(0, 1fr); }
	#v4-recherche.v4-recherche-ia .v4-rech-colonne { display: none; }
}


/* =========================================================================
   PAGE AVIS CLIENTS V4 (avis-clients.html)
   Gabarit : panierbasket.fr/template_avis-clients_v4.tpl (fichiers/page.php?id=8)
   Synthese en carte blanche (note, repartition, part des 4 et 5 etoiles),
   cartes d'avis sur deux colonnes, produit en pied de carte, pagination.
   ========================================================================= */

.v4-avp {
	padding: 0 0 56px;
	text-align: left;
	font-family: var(--v4-texte);
	color: var(--v4-encre);
}

.v4-avp .v4-avp-arbo {
	display: block;
	min-height: 0;
	margin: 20px 0 0;
	padding: 0;
	text-align: left;
	font-size: 14px;
	color: var(--v4-gris);
}

.v4-avp .v4-avp-arbo a { color: var(--v4-gris); }
.v4-avp .v4-avp-arbo a:hover { color: var(--v4-encre); text-decoration: underline; text-underline-offset: 3px; }

.v4-avp-entete { padding: 16px 0 24px; }

.v4-avp #h1-avis {
	margin: 0 0 10px;
	padding: 0;
	background: transparent;
	font-family: var(--v4-titre);
	font-size: 60px;
	font-weight: 800;
	line-height: 1;
	text-transform: uppercase;
	text-align: left;
	color: var(--v4-encre);
}

.v4-avp-entete p {
	max-width: none;
	margin: 0;
	font-size: 17px;
	line-height: 1.55;
	color: var(--v4-encre-douce);
}

/* --- Synthese --- */
.v4-avp-synthese {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 40px;
	margin-bottom: 28px;
	padding: 28px 32px;
	border-radius: var(--v4-rayon);
	background: var(--v4-blanc);
}

.v4-avp-note { display: flex; align-items: center; gap: 18px; }

.v4-avp-moyenne {
	font-family: var(--v4-titre);
	font-size: 72px;
	font-weight: 800;
	line-height: 1;
}

.v4-avp-moyenne span { font-size: 30px; color: var(--v4-gris); }

.v4-avp-note-detail { display: flex; flex-direction: column; gap: 4px; font-size: 15px; font-weight: 600; color: var(--v4-gris); }

.v4-avp-etoiles {
	display: inline-block;
	font-size: 24px;
	letter-spacing: 2px;
	line-height: 1;
	background: linear-gradient(90deg, #D99A00 var(--note, 100%), #D9D9D9 var(--note, 100%));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.v4-avp-barres { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.v4-avp-barres li { display: block; font-size: 14px; }
/* Barres cliquables : filtre par note (?note=N, fichiers/page.php), 06/11/2026 */
.v4-avp-filtre { display: flex; align-items: center; gap: 12px; margin: 0 -8px; padding: 4px 8px; border-radius: 10px; color: inherit; text-decoration: none; }
a.v4-avp-filtre:hover { background: var(--v4-creme); color: inherit; }
a.v4-avp-filtre:hover .v4-avp-barre-libelle { color: var(--v4-encre); text-decoration: underline; text-underline-offset: 3px; }
.v4-avp-filtre-actif { background: var(--v4-sable); }
.v4-avp-filtre-actif :is(.v4-avp-barre-libelle, .v4-avp-barre-pct) { color: var(--v4-encre); }
.v4-avp-barre-pct { flex: 0 0 50px; text-align: right; font-weight: 700; color: var(--v4-gris); white-space: nowrap; }
.v4-avp-barre-libelle { flex: 0 0 34px; font-weight: 700; color: var(--v4-gris); white-space: nowrap; }
.v4-avp-barre { flex-grow: 1; height: 8px; border-radius: 999px; background: #EEEEEE; overflow: hidden; }
.v4-avp-barre span { display: block; height: 100%; border-radius: 999px; background: #D99A00; }
.v4-avp-barre-nb { flex: 0 0 64px; text-align: left; font-size: 13px; color: var(--v4-gris); font-variant-numeric: tabular-nums; white-space: nowrap; }
.v4-avp-filtre-etat { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 16px; font-size: 15px; font-weight: 700; color: var(--v4-encre); }
.v4-avp-filtre-etat a { font-size: 14px; color: var(--v4-gris); text-decoration: underline; text-underline-offset: 3px; }

.v4-avp-reco {
	display: flex;
	flex-direction: column;
	gap: 4px;
	max-width: 190px;
	padding: 18px 20px;
	border-radius: 14px;
	background: #E7F2EA;
	color: #155D33;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
}

.v4-avp-reco strong { font-family: var(--v4-titre); font-size: 40px; font-weight: 800; line-height: 1; }

/* --- Cartes --- */
/* Deux colonnes remplies de haut en bas (06/11/2026) : en grille, une carte
   courte a cote d'une longue laissait un blanc sous la courte */
.v4-avp-liste {
	display: block;
	columns: 2;
	column-gap: 16px;
}
.v4-avp-liste .v4-avp-carte { break-inside: avoid; margin-bottom: 16px; }

.v4-avp-carte {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 22px 24px;
	border: 0;
	border-radius: var(--v4-rayon);
	background: var(--v4-blanc);
}

.v4-avp-carte-haut { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.v4-avp-carte .v4-avis-etoiles { font-size: 18px; letter-spacing: 2px; }
.v4-avp-confirme { font-size: 13px; font-weight: 700; color: var(--v4-vert); }

.v4-avp-texte {
	margin: 0;
	font-size: 17px;
	line-height: 1.55;
	color: var(--v4-encre);
	overflow-wrap: anywhere;
}

.v4-avp-reponse {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px 16px;
	border-left: 3px solid var(--v4-rouge);
	border-radius: 0 12px 12px 0;
	background: var(--v4-creme);
	font-size: 15px;
	line-height: 1.5;
	color: var(--v4-encre-douce);
}

.v4-avp-reponse strong { font-size: 13px; color: var(--v4-encre); }

.v4-avp-pied {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	margin-top: 4px;
	padding-top: 14px;
	border-top: 1px solid #EEEEEE;
}

.v4-avp-auteur { display: flex; align-items: center; gap: 10px; min-width: 0; }

.v4-avp-initiale {
	display: flex;
	flex: 0 0 36px;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 999px;
	background: var(--v4-sable);
	font-weight: 800;
	color: var(--v4-encre);
}

.v4-avp-auteur > span:last-child { display: flex; flex-direction: column; min-width: 0; font-size: 14px; line-height: 1.3; }
.v4-avp-auteur strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.v4-avp-auteur > span:last-child span { font-size: 13px; color: var(--v4-gris); }

.v4-avp-produit {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	max-width: 55%;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	text-align: right;
	color: var(--v4-encre);
	text-decoration: none;
}

.v4-avp-produit span { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.v4-avp-produit:hover span { color: var(--v4-encre); text-decoration: underline; text-underline-offset: 3px; }

.v4-avp-produit img {
	flex: 0 0 48px;
	order: 2;
	width: 48px;
	height: 48px;
	margin: 0;
	border: 1px solid #EEEEEE;
	border-radius: 10px;
	background: var(--v4-blanc);
	object-fit: contain;
}

/* --- Pagination --- */
.v4-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin: 32px 0 0;
}

.v4-pagination a,
.v4-pagination span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 12px;
	box-sizing: border-box;
	border-radius: 999px;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	color: var(--v4-encre);
}

.v4-pagination a { border: 1.5px solid var(--v4-bordure); background: var(--v4-blanc); }
.v4-pagination a:hover { border-color: var(--v4-encre); }
.v4-pagination .v4-pag-actuelle { background: var(--v4-encre); color: var(--v4-blanc); }
.v4-pagination .v4-pag-ellipse { min-width: 20px; padding: 0; color: var(--v4-gris); }
.v4-pagination .v4-pag-fleche { font-size: 24px; line-height: 1; }

.v4-avp-conseil { margin-top: 36px; }

/* --- Tablette et telephone --- */
@media (max-width: 1024px) {
	.v4-avp-synthese { grid-template-columns: auto minmax(0, 1fr); gap: 24px 32px; }
	.v4-avp-reco { grid-column: 1 / -1; max-width: none; flex-direction: row; align-items: baseline; gap: 10px; }
	.v4-avp-reco strong { font-size: 30px; }
}

@media (max-width: 800px) {
	.v4-avp #h1-avis { font-size: 40px; }
	.v4-avp-entete p { font-size: 16px; }
	.v4-avp-synthese { grid-template-columns: minmax(0, 1fr); padding: 22px 20px; }
	.v4-avp-moyenne { font-size: 60px; }
	.v4-avp-liste { columns: 1; }
	.v4-avp-liste .v4-avp-carte { margin-bottom: 12px; }
	.v4-avp-carte { padding: 20px; }
	.v4-avp-texte { font-size: 16px; }
	.v4-avp-pied { flex-direction: column; align-items: flex-start; gap: 12px; }
	.v4-avp-produit { max-width: none; text-align: left; }
	.v4-avp-produit img { order: 0; }
	.v4-pagination a, .v4-pagination span { min-width: 40px; height: 40px; font-size: 15px; }
}

/* =========================================================================
   BLOG V4 (/blog/ et articles) : meme mise en page qu'avant, habillage v4
   Gabarits partages fichiers/template_blog-v2.tpl et template_blog-page-v2.tpl
   (non modifies) : tout passe par ces regles, chargees seulement sur ce site.
   ========================================================================= */

/* --- Fil d'Ariane et titre --- */
#centre:is(.blog-v2, .blog-v2-article) #arbo {
	display: block;
	min-height: 0;
	margin: 20px 0 0;
	padding: 0;
	text-align: left;
	font-size: 14px;
	color: var(--v4-gris);
}

#centre:is(.blog-v2, .blog-v2-article) #arbo .link { display: inline; }
#centre:is(.blog-v2, .blog-v2-article) #arbo a { color: var(--v4-gris); text-decoration: none; }
#centre:is(.blog-v2, .blog-v2-article) #arbo a:hover { color: var(--v4-encre); text-decoration: underline; text-underline-offset: 3px; }

#centre.blog-v2 #h1-blog,
#centre.blog-v2-article .h1-blog {
	display: block;
	width: auto;
	min-height: 0;
	margin: 16px 0 28px;
	padding: 0;
	background: transparent;
	font-family: var(--v4-titre);
	font-size: 60px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0;
	text-transform: uppercase;
	text-align: left;
	color: var(--v4-encre);
}

#centre.blog-v2-article .h1-blog { font-size: 48px; line-height: 1.05; margin-bottom: 20px; }

/* --- Cartes d'articles (liste et « a lire aussi ») --- */
#centre.blog-v2 .blog-list-container,
#centre.blog-v2-article + .blog-list-container {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	padding: 0 0 40px;
}

#centre.blog-v2 .blog-list-article,
#centre.blog-v2-article + .blog-list-container .blog-list-article {
	position: relative;
	display: flex;
	flex-direction: column;
	width: auto;
	margin: 0;
	border-radius: var(--v4-rayon);
	background: var(--v4-blanc);
	box-shadow: none;
	overflow: hidden;
	transition: transform .15s ease, box-shadow .15s ease;
}

#centre.blog-v2 .blog-list-article:hover,
#centre.blog-v2-article + .blog-list-container .blog-list-article:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(22, 24, 29, .08);
}

#centre.blog-v2 .blog-list-article .image,
#centre.blog-v2-article + .blog-list-container .blog-list-article .image {
	width: auto;
	height: auto;
	margin: 0;
	aspect-ratio: 16 / 10;
	background: var(--v4-sable);
	overflow: hidden;
}

#centre.blog-v2 .blog-list-article .image img,
#centre.blog-v2-article + .blog-list-container .blog-list-article .image img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border-radius: 0;
	object-fit: cover;
}

#centre.blog-v2 .blog-list-article .content,
#centre.blog-v2-article + .blog-list-container .blog-list-article .content {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 10px;
	padding: 20px 22px 22px;
}

#centre.blog-v2 .blog-list-article h2,
#centre.blog-v2-article + .blog-list-container .blog-list-article .title {
	margin: 0;
	padding: 0;
	font-family: var(--v4-titre);
	font-size: 24px;
	font-weight: 800;
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--v4-encre);
}

#centre.blog-v2 .blog-list-article h2 a,
#centre.blog-v2-article + .blog-list-container .blog-list-article .title a {
	color: inherit;
	text-decoration: none;
}

/* Toute la carte est cliquable : le lien du titre la couvre */
#centre.blog-v2 .blog-list-article h2 a::after,
#centre.blog-v2-article + .blog-list-container .blog-list-article .title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

#centre.blog-v2 .blog-list-article .article,
#centre.blog-v2-article + .blog-list-container .blog-list-article .article {
	display: -webkit-box;
	margin: 0;
	padding: 0;
	overflow: hidden;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	font-size: 15px;
	line-height: 1.55;
	color: var(--v4-encre-douce);
}

#centre.blog-v2 .blog-list-article .article p,
#centre.blog-v2-article + .blog-list-container .blog-list-article .article p { display: inline; margin: 0; }

#centre.blog-v2 .blog-list-article .lire,
#centre.blog-v2-article + .blog-list-container .blog-list-article .lire {
	margin-top: auto;
	padding-top: 4px;
	text-align: left;
}

#centre.blog-v2 .blog-list-article .lire a,
#centre.blog-v2-article + .blog-list-container .blog-list-article .lire a {
	display: inline-flex;
	padding: 0;
	border-radius: 0;
	background: none;
	font-size: 15px;
	font-weight: 800;
	color: var(--v4-rouge);
	text-decoration: underline;
	text-underline-offset: 4px;
}

#centre.blog-v2 .blog-list-article .lire a::after,
#centre.blog-v2-article + .blog-list-container .blog-list-article .lire a::after { content: "\00a0\2192"; }

/* « A lire aussi » sous l'article (titre ajoute ici, le gabarit partage n'en a pas) */
#centre.blog-v2-article + .blog-list-container {
	max-width: 1400px;
	margin: 20px auto 0;
	padding-top: 36px;
	border-top: 1px solid var(--v4-bordure);
}

#centre.blog-v2-article + .blog-list-container::before {
	content: "\00C0  lire aussi";	/* deux espaces : la premiere termine le code \00C0 */
	grid-column: 1 / -1;
	font-family: var(--v4-titre);
	font-size: 44px;
	font-weight: 800;
	line-height: 1;
	text-transform: uppercase;
	color: var(--v4-encre);
}

/* --- Pagination de la liste --- */
#centre.blog-v2 .pagination-blog {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0 0 56px;
}

#centre.blog-v2 .pagination-blog > div { float: none; margin: 0; padding: 0; border: 0; background: none; }

#centre.blog-v2 .pagination-blog .p-select,
#centre.blog-v2 .pagination-blog .p-n-select a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 12px;
	box-sizing: border-box;
	border-radius: 999px;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
}

#centre.blog-v2 .pagination-blog .p-select { background: var(--v4-encre); color: var(--v4-blanc); }
#centre.blog-v2 .pagination-blog .p-n-select a { border: 1.5px solid var(--v4-bordure); background: var(--v4-blanc); color: var(--v4-encre); }
#centre.blog-v2 .pagination-blog .p-n-select a:hover { border-color: var(--v4-encre); }

/* --- Article --- */
#centre.blog-v2-article .article-blog {
	margin: 0;
	font-size: 18px;
	line-height: 1.7;
	color: var(--v4-encre-douce);
}

#centre.blog-v2-article .article-blog > p:first-child { font-size: 20px; line-height: 1.6; color: var(--v4-encre); }
#centre.blog-v2-article .article-blog p { margin: 0 0 20px; }

#centre.blog-v2-article .article-blog h2 {
	margin: 40px 0 14px;
	padding: 0;
	background: transparent;
	font-family: var(--v4-titre);
	font-size: 32px;
	font-weight: 800;
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--v4-encre);
}

#centre.blog-v2-article .article-blog h3 { margin: 28px 0 10px; font-size: 21px; line-height: 1.3; color: var(--v4-encre); }

#centre.blog-v2-article .article-blog a {
	color: var(--v4-encre);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-color: var(--v4-rouge);
	text-underline-offset: 3px;
}

#centre.blog-v2-article .article-blog a:hover { color: var(--v4-encre); text-decoration: underline; text-underline-offset: 3px; }

#centre.blog-v2-article .article-blog img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 8px 0 24px;
	border-radius: var(--v4-rayon);
}

#centre.blog-v2-article .article-blog ul,
#centre.blog-v2-article .article-blog ol { margin: 0 0 20px; padding-left: 22px; }
#centre.blog-v2-article .article-blog li { margin-bottom: 8px; }

#centre.blog-v2-article .article-blog table { width: 100%; margin: 0 0 24px; border-collapse: collapse; font-size: 16px; }
#centre.blog-v2-article .article-blog :is(th, td) { padding: 10px 12px; border-bottom: 1px solid #E5E5E5; text-align: left; }
#centre.blog-v2-article .article-blog th { background: var(--v4-blanc); color: var(--v4-encre); }

/* --- Tablette et telephone --- */
@media (max-width: 1100px) {
	#centre.blog-v2 .blog-list-container,
	#centre.blog-v2-article + .blog-list-container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
	#centre.blog-v2 #h1-blog { font-size: 40px; margin-bottom: 20px; }
	#centre.blog-v2-article .h1-blog { font-size: 34px; }
	#centre.blog-v2 .blog-list-container,
	#centre.blog-v2-article + .blog-list-container { grid-template-columns: minmax(0, 1fr); gap: 14px; }
	#centre.blog-v2-article + .blog-list-container::before { font-size: 32px; }
	#centre.blog-v2-article .article-blog { font-size: 17px; }
	#centre.blog-v2-article .article-blog > p:first-child { font-size: 18px; }
	#centre.blog-v2-article .article-blog h2 { font-size: 28px; margin-top: 32px; }
}

/* =========================================================================
   MOBILE : CORRECTIFS GENERAUX (04/11/2026)
   ========================================================================= */

/* iOS : Safari zoome sur un champ dont le texte fait moins de 16 px (recherche
   du haut 15 px, tri 14 px, Aristide de la home et de la fiche 15 px,
   formulaire de contact...). Regle limitee a iOS (-webkit-touch-callout). */
@supports (-webkit-touch-callout: none) {
	input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="file"]):not([type="color"]),
	select,
	textarea { font-size: 16px !important; }
}

/* Fil d'Ariane a gauche sur les pages avis et blog (la feuille du site le centre sur telephone) */
.v4-avp #arbo.v4-avp-arbo,
#centre:is(.blog-v2, .blog-v2-article) #arbo { text-align: left !important; }

/* Fiche produit, telephone : le formulaire « poser une question » (reCAPTCHA de
   304 px de large fixes + marges) elargissait la page a 417 px sur 375 px.
   La colonne garde la largeur de l'ecran, le reCAPTCHA est reduit sur
   petit ecran et ne peut plus depasser de son cadre. */
/* #produit-v2 est une colonne flex : #centre prenait la largeur de son contenu
   le plus large au lieu de celle de l'ecran */
#produit-v2.v4-produit #centre { width: 100%; max-width: 100%; min-width: 0; }
#produit-v2.v4-produit #centre > * { min-width: 0; }

#produit-v2.v4-produit #ajax_poser_question #recaptcha { max-width: 100%; overflow: hidden; }

@media (max-width: 640px) {
	#produit-v2.v4-produit #ajax_poser_question:not(:empty) { padding: 16px; }
}

@media (max-width: 420px) {
	#produit-v2.v4-produit #ajax_poser_question .g-recaptcha { transform: scale(.82); transform-origin: 0 0; height: 64px; }
}

/* Blog : images flottantes des anciens articles (style="float:right; width:300px",
   ex. « Comment lester son panier de basket ») : texte autour, image limitee a
   45 % de la colonne sur ordinateur, pleine largeur sur telephone (l'image de
   300 px laissait un mot seul a cote). */
#centre.blog-v2-article .article-blog img:is([style*="float:right"], [style*="float: right"], [align="right"]) {
	float: right;
	max-width: 45%;
	margin: 4px 0 16px 20px;
}

#centre.blog-v2-article .article-blog img:is([style*="float:left"], [style*="float: left"], [align="left"]) {
	float: left;
	max-width: 45%;
	margin: 4px 20px 16px 0;
}

#centre.blog-v2-article .article-blog :is(h2, h3) { clear: both; }

/* Telephone : image sur toute la largeur, au-dessus du texte (elle est en tete du paragraphe) */
@media (max-width: 640px) {
	#centre.blog-v2-article .article-blog img:is([style*="float:right"], [style*="float: right"], [align="right"], [style*="float:left"], [style*="float: left"], [align="left"]) {
		float: none;
		width: 100% !important;
		max-width: 100%;
		margin: 0 0 18px;
	}
}

/* =========================================================================
   PAGES SUPPORT V4 : contenu dans un bloc blanc arrondi (comme la description
   de la fiche produit). Gabarit : template_page-support-categorie_v4.tpl
   ========================================================================= */
.v4-cat .v4-sup-entete { align-items: center; padding-bottom: 20px; }
.v4-cat .v4-sup-entete #h1-categorie { margin: 0; }

.v4-cat .v4-sup-contenu {
	margin: 0 0 28px;
	padding: 32px 40px 28px;
	border-radius: var(--v4-rayon);
	background: var(--v4-blanc);
}

.v4-cat .v4-sup-contenu #categorie-header { display: block; }

.v4-cat .v4-sup-contenu #contenu-header-view {
	max-width: none;
	/* hauteur repliee des le premier affichage (data-hauteur du gabarit, 280 px) :
	   avant, 100 px (styles_v2) puis 280 px pose par le script (09/11/2026) */
	max-height: 280px;
	font-size: 17px;
	line-height: 1.65;
	color: var(--v4-encre-douce);
}

.v4-cat .v4-sup-contenu #contenu-header-view :is(h2, h3) {
	margin: 24px 0 10px;
	font-family: var(--v4-titre);
	font-size: 28px;
	font-weight: 800;
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--v4-encre);
}

.v4-cat .v4-sup-contenu #contenu-header-view h3 { font-size: 22px; }
.v4-cat .v4-sup-contenu #contenu-header-view > :first-child { margin-top: 0; }
.v4-cat .v4-sup-contenu #contenu-header-view p { margin: 0 0 14px; }
.v4-cat .v4-sup-contenu #contenu-header-view a { color: var(--v4-encre); font-weight: 700; text-decoration: underline; text-decoration-color: var(--v4-rouge); text-underline-offset: 3px; }

.v4-cat .v4-sup-contenu #contenu-header-view img { max-width: 100%; height: auto; border-radius: 14px; }

.v4-cat .v4-sup-contenu #contenu-header-view img:is([style*="float:left"], [style*="float: left"], [align="left"]) { float: left; max-width: 40%; margin: 4px 24px 12px 0 !important; }
.v4-cat .v4-sup-contenu #contenu-header-view img:is([style*="float:right"], [style*="float: right"], [align="right"]) { float: right; max-width: 40%; margin: 4px 0 12px 24px !important; }

/* Degrade du « Lire plus » sur le fond blanc du bloc */
.v4-cat .v4-sup-contenu #contenu-header-view.fade::after {
	height: 64px;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--v4-blanc));
}

.v4-cat .v4-sup-contenu #contenu-header-view-toggle { margin-top: 10px; }

@media (max-width: 1024px) {
	.v4-cat .v4-sup-entete { align-items: start; }
}

@media (max-width: 640px) {
	.v4-cat .v4-sup-contenu { margin-bottom: 20px; padding: 22px 20px 20px; border-radius: 16px; }
	.v4-cat .v4-sup-contenu #contenu-header-view { font-size: 16px; }
	.v4-cat .v4-sup-contenu #contenu-header-view :is(h2, h3) { font-size: 24px; }
	/* Images flottantes : pleine largeur au-dessus du texte */
	/* pleine largeur au plus, jamais plus grande que sa taille reelle (09/11/2026) :
	   width/height auto passent devant les dimensions en ligne de l'editeur */
	.v4-cat .v4-sup-contenu #contenu-header-view img:is([style*="float"], [align="left"], [align="right"]) { float: none !important; clear: both; display: block; width: auto !important; height: auto !important; max-width: 100%; margin: 0 0 16px !important; }
}

/* =========================================================================
   PAGES D'INFORMATION V4 : livraison, CGV, mentions legales, paiement,
   qui sommes-nous, contact, suivi de commande, plan du site, cookies,
   donnees personnelles. Le contenu (#centre) passe dans un bloc blanc
   arrondi, comme les cartes de la fiche produit. Classe posee sur <body>
   par fichiers/page.php et fichiers/conditions-generales-vente.php
   ({BODY_PAGE}) quand $v4_categorie = 1.
   ========================================================================= */
body.v4-page-info #conteneur > .v2-width { padding-top: 28px; padding-bottom: 48px; }

body.v4-page-info #centre {
	float: none;
	box-sizing: border-box;
	width: auto;
	max-width: 1120px;
	margin: 0 auto;
	padding: 40px 56px 44px;
	border-radius: var(--v4-rayon);
	background: var(--v4-blanc);
	font-size: 16px;
	line-height: 1.7;
	color: var(--v4-encre-douce);
	text-align: left;
	overflow-wrap: break-word;
}

body.v4-page-info #centre::after { content: ""; display: table; clear: both; }

body.v4-page-info #centre h1 {
	margin: 0 0 24px;
	padding: 0 0 20px;
	border-bottom: 1px solid var(--v4-bordure-pale);
	font-family: var(--v4-titre);
	font-size: 44px;
	font-weight: 800;
	line-height: 1.02;
	text-transform: uppercase;
	color: var(--v4-encre);
}

body.v4-page-info #centre :is(h2, h3, h4) {
	margin: 28px 0 10px;
	font-family: var(--v4-titre);
	font-weight: 800;
	line-height: 1.15;
	text-transform: uppercase;
	color: var(--v4-encre);
}

body.v4-page-info #centre h2 { font-size: 28px; }
body.v4-page-info #centre :is(h3, h4) { font-size: 21px; }
body.v4-page-info #centre p { margin: 0 0 14px; }
body.v4-page-info #centre strong { color: var(--v4-encre); }
body.v4-page-info #centre a:not([class]) { color: var(--v4-encre); font-weight: 700; text-decoration: underline; text-decoration-color: var(--v4-rouge); text-underline-offset: 3px; }
body.v4-page-info #centre a:not([class]):hover { color: var(--v4-encre); text-decoration: underline; text-underline-offset: 3px; }
body.v4-page-info #centre img { max-width: 100%; height: auto; }
body.v4-page-info #centre table { max-width: 100%; border-collapse: collapse; }
body.v4-page-info #centre :is(td, th) { padding: 8px 12px; border: 1px solid var(--v4-bordure-pale); }
body.v4-page-info #centre :is(input, select, textarea) { box-sizing: border-box; max-width: 100%; }

@media (max-width: 900px) {
	body.v4-page-info #centre { padding: 32px 32px 36px; }
	body.v4-page-info #centre h1 { font-size: 36px; }
}

@media (max-width: 600px) {
	body.v4-page-info #conteneur > .v2-width { padding-top: 16px; padding-bottom: 32px; }
	body.v4-page-info #centre { margin: 0; padding: 24px 20px 28px; border-radius: 16px; font-size: 15px; line-height: 1.65; }
	body.v4-page-info #centre h1 { margin-bottom: 18px; padding-bottom: 14px; font-size: 30px; text-align: left; }
	body.v4-page-info #centre h2 { font-size: 24px; }
	body.v4-page-info #centre table { display: block; overflow-x: auto; }
}

@media (max-width: 420px) {
	body.v4-page-info #centre .g-recaptcha { transform: scale(.88); transform-origin: 0 0; }
}

/* =========================================================================
   TUNNEL DE COMMANDE V4 : caddie, identification, adresse, livraison et
   paiement, confirmation, retours de paiement.
   Gabarits template_caddie_v4.tpl, template_caddie_vide_v4.tpl,
   template_commande_v4.tpl, template_commande_adresse_v4.tpl,
   template_commande_2_v4.tpl, template_commande_2_integre_v4.tpl,
   template_commande_3_v4.tpl,
   template_commande_ok_v4.tpl, template_commande_ko_v4.tpl.
   Les blocs fabriques en PHP (choix de livraison .choix, modes de
   paiement .mode_paiement, code promo, prix .pv2-caddie) gardent leur
   balisage : on les habille ici. Toutes les regles partent de
   #centre.v4-tunnel pour passer devant styles_v2 (.caddie-v2,
   .commande-v2, .commande-2-v2 #left-bloc...).
   ========================================================================= */

#conteneur:has(.v4-tunnel) { background-color: var(--v4-creme); }

#centre.v4-tunnel {
	float: none;
	box-sizing: border-box;
	width: auto;
	max-width: 1240px;
	margin: 0 auto;
	padding: 24px 0 64px;
	text-align: left;
	color: var(--v4-encre);
	font-size: 15px;
	line-height: 1.5;
}

#centre.v4-tunnel *,
#centre.v4-tunnel *::before,
#centre.v4-tunnel *::after { box-sizing: border-box; }

/* --- etapes ------------------------------------------------------------ */
#centre.v4-tunnel .v4-etapes {
	display: flex;
	gap: 8px;
	margin: 0 0 28px;
	padding: 0;
	list-style: none;
}

#centre.v4-tunnel .v4-etapes li {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 8px 16px 8px 8px;
	border-radius: var(--v4-pilule);
	background: var(--v4-blanc);
	color: var(--v4-gris);
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
}

#centre.v4-tunnel .v4-etapes li > a {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	color: inherit;
	text-decoration: none;
}

#centre.v4-tunnel .v4-etape-nom { overflow: hidden; text-overflow: ellipsis; }

#centre.v4-tunnel .v4-etape-num {
	flex: 0 0 30px;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--v4-sable);
	color: var(--v4-encre);
	font-size: 13px;
	font-weight: 800;
}

#centre.v4-tunnel .v4-etapes li.v4-etape-active { background: var(--v4-encre); color: var(--v4-blanc); }
#centre.v4-tunnel .v4-etape-active .v4-etape-num { background: var(--v4-rouge); color: var(--v4-blanc); }
#centre.v4-tunnel .v4-etapes li.v4-etape-faite { color: var(--v4-encre); }
#centre.v4-tunnel .v4-etape-faite .v4-etape-num { background: var(--v4-vert); color: transparent; position: relative; }
#centre.v4-tunnel .v4-etape-faite .v4-etape-num::after {
	content: "";
	position: absolute;
	inset: 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
}
#centre.v4-tunnel .v4-etape-faite a:hover { color: var(--v4-encre); text-decoration: underline; text-underline-offset: 3px; }

/* --- titres et grille -------------------------------------------------- */
#centre.v4-tunnel .v4-tun-entete {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 16px;
	margin: 0 0 20px;
}

#centre.v4-tunnel .v4-tun-entete h1,
#centre.v4-tunnel .v4-tun-message h1,
#centre.v4-tunnel #modification_adresse h1 {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--v4-titre);
	font-size: 44px;
	font-weight: 800;
	line-height: 1.02;
	text-transform: uppercase;
	text-align: left;
	color: var(--v4-encre);
}

#centre.v4-tunnel .v4-tun-compte { color: var(--v4-gris); font-size: 16px; font-weight: 700; }

#centre.v4-tunnel .v4-tun-grille {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 390px;
	gap: 24px;
	align-items: start;
}

#centre.v4-tunnel #left-bloc :is(#livraison, #adresses, #paiement) { margin: 0; }

#centre.v4-tunnel .v4-tun-principal {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
}

#centre.v4-tunnel .v4-tun-recap {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
	position: sticky;
	top: 20px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
	font-size: 15px;
	color: var(--v4-encre);
}

#centre.v4-tunnel .v4-tun-recap > form { display: flex; flex-direction: column; gap: 16px; margin: 0; }

#centre.v4-tunnel .v4-tun-carte {
	margin: 0;
	padding: 26px 28px;
	border-radius: var(--v4-rayon);
	background: var(--v4-blanc);
}

#centre.v4-tunnel .v4-tun-titre,
#centre.v4-tunnel #left-bloc .commande-titre {
	display: flex;
	align-items: center;
	width: auto;
	height: auto;
	margin: 0 0 18px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	font-family: var(--v4-titre);
	font-size: 26px;
	font-weight: 800;
	line-height: 1.1;
	text-transform: uppercase;
	text-align: left;
	color: var(--v4-encre);
}

#centre.v4-tunnel .v4-tun-num {
	flex: 0 0 32px;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	margin-right: 12px;
	border-radius: 50%;
	background: var(--v4-encre);
	color: var(--v4-blanc);
	font-family: var(--v4-texte);
	font-size: 15px;
	font-weight: 800;
}

#centre.v4-tunnel .v4-tun-intro { margin: -10px 0 20px; color: var(--v4-gris); font-size: 15px; }
#centre.v4-tunnel .v4-tun-aide { margin: 14px 0 0; color: var(--v4-gris); font-size: 14px; }
#centre.v4-tunnel .v4-tun-aide a { color: var(--v4-encre); font-weight: 800; }

#centre.v4-tunnel .v4-tun-retour {
	align-self: flex-start;
	color: var(--v4-encre);
	font-weight: 800;
	text-decoration: none;
}
#centre.v4-tunnel .v4-tun-retour:hover { color: var(--v4-encre); text-decoration: underline; text-underline-offset: 3px; }

#centre.v4-tunnel .v4-masque {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* --- lignes produit (caddie et recapitulatif de l'etape 3) --------------- */
#centre.v4-tunnel .v4-cad-lignes { padding-top: 6px; padding-bottom: 6px; }
#centre.v4-tunnel .v4-cad-ligne { margin: 0; }
#centre.v4-tunnel .v4-cad-ligne + .v4-cad-ligne,
#centre.v4-tunnel .v4-cmd-ligne + .v4-cmd-ligne { border-top: 1px solid var(--v4-bordure-pale); }

#centre.v4-tunnel table.v4-cad-table { width: 100%; margin: 0; border: 0; border-collapse: collapse; }

#centre.v4-tunnel .v4-cad-table td {
	width: auto;
	height: auto;
	padding: 20px 0;
	border: 0;
	background: none;
	vertical-align: middle;
	text-align: left;
}

#centre.v4-tunnel td.v4-cad-visuel { width: 120px; padding-right: 20px; }

#centre.v4-tunnel .v4-cad-visuel img {
	display: block;
	width: 100px;
	height: 100px;
	object-fit: contain;
	border-radius: 12px;
	background: var(--v4-blanc);
}

#centre.v4-tunnel td.v4-cad-infos { padding-right: 18px; }

#centre.v4-tunnel .v4-cad-infos a.nom_produit {
	color: var(--v4-encre);
	font-size: 17px;
	font-weight: 800;
	line-height: 1.3;
	text-decoration: none;
}
#centre.v4-tunnel .v4-cad-infos a.nom_produit:hover { color: var(--v4-encre); text-decoration: underline; text-underline-offset: 3px; }

#centre.v4-tunnel .v4-cad-infos .note { margin: 6px 0 0; line-height: 1; }
#centre.v4-tunnel .v4-cad-infos .note img { width: 14px; height: 14px; }
#centre.v4-tunnel .v4-cad-options:empty { display: none; }
#centre.v4-tunnel .v4-cad-options span { display: block; margin-top: 4px; color: var(--v4-gris); font-size: 13px; }
#centre.v4-tunnel .v4-cad-dispo { margin-top: 8px; }
#centre.v4-tunnel .v4-cad-dispo span { font-size: 13px !important; font-weight: 700; }
#centre.v4-tunnel .v4-cad-dispo .mkt_stock:empty { display: none; }
#centre.v4-tunnel .max_qte_commande:empty { display: none; }
#centre.v4-tunnel .max_qte_commande { display: block; margin-top: 6px; color: var(--v4-rouge); font-size: 12px; }

#centre.v4-tunnel td.v4-cad-prix { width: 130px; padding-right: 24px; text-align: right; }

#centre.v4-tunnel .pv2-caddie {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 3px;
}
#centre.v4-tunnel .pv2-caddie .pv2-current {
	order: 1;
	font-family: var(--v4-texte);
	font-size: 24px;
	font-weight: 300;
	line-height: 1;
	color: var(--price-color, #8C0000);
}
#centre.v4-tunnel .pv2-caddie .pv2-euro { font-size: .75em; }
#centre.v4-tunnel .pv2-caddie .pv2-compare {
	order: 2;
	color: var(--v4-gris);
	font-size: 14px;
	text-decoration: line-through;
}
#centre.v4-tunnel .pv2-caddie .pv2-remise {
	order: 3;
	padding: 2px 8px;
	border-radius: var(--v4-pilule);
	background: var(--price-color, #8C0000);
	color: var(--v4-blanc);
	font-size: 12px;
	font-weight: 400;
}
#centre.v4-tunnel .pv2-caddie .pv2-tooltip {
	display: none;
	position: absolute;
	right: 0;
	bottom: calc(100% + 6px);
	z-index: 5;
	width: 220px;
	padding: 8px 10px;
	border-radius: 10px;
	background: var(--v4-encre);
	color: var(--v4-blanc);
	font-size: 12px;
	text-align: left;
}

#centre.v4-tunnel td.v4-cad-qte { width: 140px; }
#centre.v4-tunnel td.v4-cad-suppr { width: 56px; text-align: right; }

#centre.v4-tunnel .v4-qte {
	display: inline-flex;
	align-items: center;
	height: 44px;
	border: 1px solid var(--v4-bordure);
	border-radius: var(--v4-pilule);
	background: var(--v4-blanc);
	overflow: hidden;
}

#centre.v4-tunnel .v4-qte button {
	width: 40px;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--v4-encre);
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
}
#centre.v4-tunnel .v4-qte button:hover { background: var(--v4-sable); }

#centre.v4-tunnel .v4-qte input.champtexte_qte {
	width: 40px;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--v4-encre);
	font-size: 16px;
	font-weight: 800;
	text-align: center;
}

/* Corbeille seule, zone de clic de 40 px */
#centre.v4-tunnel .v4-suppr {
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	color: var(--v4-gris);
	text-decoration: none;
	transition: background .15s ease, color .15s ease;
}
#centre.v4-tunnel .v4-suppr:hover { background: var(--v4-sable); color: var(--v4-encre); }
#centre.v4-tunnel .v4-cmd-qte .v4-suppr { width: 36px; height: 36px; }

/* Recapitulatif de l'etape 3 : lignes compactes */
#centre.v4-tunnel .v4-cmd-lignes { margin: 0 0 18px; }
#centre.v4-tunnel .v4-cmd-ligne td { padding: 14px 0; vertical-align: top; }
#centre.v4-tunnel .v4-cmd-ligne td.v4-cad-visuel { width: 76px; padding-right: 12px; }
#centre.v4-tunnel .v4-cmd-ligne .v4-cad-visuel img { width: 64px; height: 64px; border-radius: 10px; }
#centre.v4-tunnel .v4-cmd-ligne td.v4-cad-infos { padding-right: 10px; }
#centre.v4-tunnel .v4-cmd-ligne a.nom_produit { font-size: 15px; }
#centre.v4-tunnel .v4-cmd-ligne td.v4-cad-prix { width: auto; padding-right: 0; }
#centre.v4-tunnel .v4-cmd-ligne .pv2-caddie .pv2-current { font-size: 19px; }
#centre.v4-tunnel .v4-cmd-ligne .pv2-caddie .pv2-compare { font-size: 12px; }
#centre.v4-tunnel .v4-cmd-ligne .v4-cad-dispo { margin-top: 4px; }
#centre.v4-tunnel .v4-cmd-qte { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 10px; }
#centre.v4-tunnel .v4-qte-petit { height: 36px; }
#centre.v4-tunnel .v4-qte-petit button { width: 32px; font-size: 18px; }
#centre.v4-tunnel .v4-qte-petit input.champtexte_qte { width: 32px; font-size: 16px; }

/* --- livraison : choix fabriques en PHP (.choix) ---------------------- */
#centre.v4-tunnel #panier-livraison {
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	font-size: 14px;
	color: var(--v4-encre-douce);
}

#centre.v4-tunnel #panier-livraison > select,
#centre.v4-tunnel #bon-reduction-commande .ch,
#centre.v4-tunnel #bon-reduction .ch {
	height: 44px;
	padding: 0 12px;
	border: 1px solid var(--v4-bordure);
	border-radius: 12px;
	background: var(--v4-blanc);
	color: var(--v4-encre);
	font-family: var(--v4-texte);
	font-size: 16px;
}

#centre.v4-tunnel #panier-livraison > select { margin: 6px 0 4px; width: 100%; }

#centre.v4-tunnel :is(#livraison, #panier-livraison) .choix {
	position: relative;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 14px;
	margin: 12px 0 0;
	padding: 16px 18px;
	border: 2px solid var(--v4-bordure-pale);
	border-radius: 14px;
	background: var(--v4-blanc);
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease;
}

#centre.v4-tunnel :is(#livraison, #panier-livraison) .choix:first-of-type { margin-top: 0; }
#centre.v4-tunnel :is(#livraison, #panier-livraison) .choix::before { content: none; }
#centre.v4-tunnel :is(#livraison, #panier-livraison) .choix > *:not(:first-child) { margin-left: 0; }
#centre.v4-tunnel :is(#livraison, #panier-livraison) .choix:hover { border-color: var(--v4-bordure-chip); }
#centre.v4-tunnel :is(#livraison, #panier-livraison) .choix.selected-border,
#centre.v4-tunnel :is(#livraison, #panier-livraison) .choix:has(.l input[type="radio"]:checked) {
	border-color: var(--v4-vert);
	background: #F3F9F5;
}

#centre.v4-tunnel :is(#livraison, #panier-livraison) .choix > label {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 12px;
	width: auto;
	margin: 0;
}

#centre.v4-tunnel :is(#livraison, #panier-livraison) .choix .l { flex: 0 0 22px; width: 22px; margin: 0; }
#centre.v4-tunnel :is(#livraison, #panier-livraison) .choix .l2 { flex: 0 0 auto; width: auto; margin: 0; }
#centre.v4-tunnel :is(#livraison, #panier-livraison) .choix .l2 img { display: block; width: 76px; height: auto; border-radius: 8px; }

#centre.v4-tunnel :is(#livraison, #panier-livraison) .choix .c {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	font-size: 15px;
	line-height: 1.45;
	color: var(--v4-encre);
}

#centre.v4-tunnel :is(#livraison, #panier-livraison) .choix .c .plus_lien {
	display: inline-block;
	margin-top: 4px;
	color: var(--v4-gris);
	font-size: 13px;
	cursor: pointer;
}

#centre.v4-tunnel :is(#livraison, #panier-livraison) .choix .c .plus { font-size: 13px; line-height: 1.45; font-style: normal; color: var(--v4-gris); }
#centre.v4-tunnel :is(#livraison, #panier-livraison) .choix .c .message_livraison { font-size: 13px; }

#centre.v4-tunnel :is(#livraison, #panier-livraison) .choix .c2 {
	flex: 0 0 auto;
	width: auto;
	font-size: 15px;
	font-weight: 800;
	text-align: right;
	color: var(--v4-encre);
}

#centre.v4-tunnel :is(#livraison, #panier-livraison) .choix .c2 .offert { color: var(--v4-vert); }
#centre.v4-tunnel :is(#livraison, #panier-livraison) .choix .eur { font-size: .8em; }

/* Colonne du caddie, plus etroite : le logo du transporteur rapetisse */
#centre.v4-tunnel #panier-livraison .choix { gap: 10px; padding: 14px; }
#centre.v4-tunnel #panier-livraison .choix .l2 img { width: 56px; }
#centre.v4-tunnel #panier-livraison .choix .c { font-size: 14px; }

/* Boutons radio (livraison et paiement) */
#centre.v4-tunnel .choix .l [type="radio"] + label,
#centre.v4-tunnel .mode_paiement .select-mode [type="radio"] + label {
	position: relative;
	display: block;
	width: 22px;
	height: 22px;
	margin: 0;
	padding: 0;
}

#centre.v4-tunnel .choix .l [type="radio"] + label::before,
#centre.v4-tunnel .mode_paiement .select-mode [type="radio"] + label::before {
	top: 0;
	left: 0;
	width: 22px;
	height: 22px;
	border: 2px solid var(--v4-bordure-chip);
}

#centre.v4-tunnel .choix .l [type="radio"]:checked + label::before,
#centre.v4-tunnel .mode_paiement .select-mode [type="radio"]:checked + label::before { border-color: var(--v4-vert); }

#centre.v4-tunnel .choix .l [type="radio"] + label::after,
#centre.v4-tunnel .mode_paiement .select-mode [type="radio"] + label::after {
	top: 6px;
	left: 6px;
	width: 10px;
	height: 10px;
	background: var(--v4-vert);
}

/* Point relais : bloc charge en AJAX dans le choix */
#centre.v4-tunnel :is(#livraison, #panier-livraison) .choix .top_relais { flex: 1 0 100%; }
#centre.v4-tunnel :is(#livraison, #panier-livraison) .choix:has(.top_relais) { flex-wrap: wrap; }

/* Point relais, recherche et liste (10/11/2026) : gabarits
   template_commande_2-dpd-relais-v2.tpl et -so-colissimo-v2.tpl.
   Plus de cadre gris a hauteur fixe : champs en ligne, liste en cartes
   qui defile seule. display reste pilote par le JS (style en ligne).
   Selecteurs longs voulus : styles_v2 vise ces champs par
   .commande-2-v2 #left-bloc #livraison .choix .top_relais #relais_header
   (3 id, 4 classes), il faut peser plus lourd. */
#centre.v4-tunnel :is(#livraison, #panier-livraison) .choix .top_relais {
	box-sizing: border-box;
	height: auto;
	overflow: visible;
	margin: 6px 0 0;
	padding: 16px 0 0;
	border-top: 1px solid var(--v4-bordure-pale);
	background: transparent;
	cursor: default;
}
#centre.v4-tunnel :is(#livraison, #panier-livraison) .choix .top_relais #relais_header.v4-relais-entete {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
	align-items: end;
	gap: 12px 16px;
	margin: 0 0 14px;
	padding: 0;
	line-height: normal;
}
#centre.v4-tunnel :is(#livraison, #panier-livraison) .choix .top_relais #relais_header .v4-relais-champ { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
#centre.v4-tunnel :is(#livraison, #panier-livraison) .choix .top_relais #relais_header .v4-relais-champ > label {
	display: block;
	width: auto;
	margin: 0;
	font-size: 14px;
	font-weight: 800;
	line-height: 1.3;
	color: var(--v4-encre);
	cursor: default;
}
#centre.v4-tunnel :is(#livraison, #panier-livraison) .choix .top_relais #relais_header .v4-relais-champ > label span { font-weight: 400; color: var(--v4-gris); }
#centre.v4-tunnel :is(#livraison, #panier-livraison) .choix .top_relais #relais_header .v4-relais-recherche { display: flex; gap: 8px; }
#centre.v4-tunnel :is(#livraison, #panier-livraison) .choix .top_relais #relais_header.v4-relais-entete :is(.tel_portable, .cp) {
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	height: 48px;
	margin: 0;
	padding: 0 14px;
	border: 1.5px solid var(--v4-bordure);
	border-radius: 12px;
	background-color: var(--v4-blanc);
	font-family: var(--v4-texte);
	font-size: 16px;
	line-height: normal;
	color: var(--v4-encre);
	-webkit-appearance: none;
	appearance: none;
}
#centre.v4-tunnel :is(#livraison, #panier-livraison) .choix .top_relais #relais_header.v4-relais-entete .cp { flex: 1 1 auto; }
#centre.v4-tunnel :is(#livraison, #panier-livraison) .choix .top_relais #relais_header.v4-relais-entete :is(.tel_portable, .cp):focus {
	border-color: var(--v4-encre);
	outline: none;
	box-shadow: 0 0 0 3px rgba(22, 24, 29, .08);
}
#centre.v4-tunnel :is(#livraison, #panier-livraison) .choix .top_relais #relais_header.v4-relais-entete .cp_bt {
	flex: 0 0 auto;
	height: 48px;
	margin: 0;
	padding: 0 22px;
	border: 0;
	border-radius: var(--v4-pilule);
	background: var(--v4-encre);
	color: var(--v4-blanc);
	font-family: var(--v4-texte);
	font-size: 15px;
	font-weight: 800;
	line-height: 1;
	text-transform: none;
	cursor: pointer;
}
#centre.v4-tunnel :is(#livraison, #panier-livraison) .choix .top_relais #relais_header.v4-relais-entete .cp_bt:hover { background: var(--v4-encre-douce); }
#centre.v4-tunnel :is(#livraison, #panier-livraison) .choix .top_relais #relais_header.v4-relais-entete .message {
	grid-column: 1 / -1;
	display: block;
	padding: 10px 14px;
	border-radius: 12px;
	background: #FDECEA;
	font-size: 14px;
	font-weight: 700;
	color: var(--v4-rouge);
}

#centre.v4-tunnel :is(#livraison, #panier-livraison) .choix .top_relais .v4-relais-liste {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-height: 360px;
	overflow-y: auto;
	padding: 2px 6px 2px 0;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--v4-bordure) transparent;
}
#centre.v4-tunnel :is(#livraison, #panier-livraison) .choix .top_relais .v4-relais-liste:not(:has(.v4-relais)) { display: none; }
#centre.v4-tunnel :is(#livraison, #panier-livraison) .choix .top_relais label.v4-relais {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 12px 14px;
	border: 1.5px solid var(--v4-bordure);
	border-radius: 12px;
	background: var(--v4-blanc);
	cursor: pointer;
	transition: border-color .15s, box-shadow .15s;
}
#centre.v4-tunnel :is(#livraison, #panier-livraison) .choix .top_relais label.v4-relais:hover { border-color: var(--v4-gris-clair); }
#centre.v4-tunnel :is(#livraison, #panier-livraison) .choix .top_relais label.v4-relais:has(input:checked) {
	border-color: var(--v4-vert);
	box-shadow: 0 0 0 1px var(--v4-vert);
}
#centre.v4-tunnel :is(#livraison, #panier-livraison) .choix .top_relais .v4-relais input[type="radio"] {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	accent-color: var(--v4-vert);
	cursor: pointer;
}
#centre.v4-tunnel :is(#livraison, #panier-livraison) .choix .top_relais .v4-relais-texte { display: flex; flex-direction: column; gap: 3px; min-width: 0; line-height: 1.35; }
#centre.v4-tunnel :is(#livraison, #panier-livraison) .choix .top_relais .v4-relais-nom { font-size: 15px; font-weight: 800; color: var(--v4-encre); }
#centre.v4-tunnel :is(#livraison, #panier-livraison) .choix .top_relais .v4-relais-nom .consigne {
	display: inline-block;
	margin-right: 6px;
	padding: 2px 7px;
	border-radius: 6px;
	background: #FDECEA;
	color: var(--v4-rouge) !important;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .3px;
	text-transform: uppercase;
	vertical-align: 2px;
}
#centre.v4-tunnel :is(#livraison, #panier-livraison) .choix .top_relais .v4-relais-adresse { font-size: 14px; color: var(--v4-gris); }
#centre.v4-tunnel :is(#livraison, #panier-livraison) .choix .top_relais .v4-relais-horaires {
	align-self: flex-start;
	margin-top: 2px;
	font-size: 13px;
	font-weight: 700;
	color: var(--v4-encre);
	text-decoration: underline;
	text-underline-offset: 3px;
}
#centre.v4-tunnel :is(#livraison, #panier-livraison) .choix .top_relais .v4-relais-horaires:hover { color: var(--v4-vert); }

@media (max-width: 640px) {
	#centre.v4-tunnel :is(#livraison, #panier-livraison) .choix .top_relais #relais_header.v4-relais-entete { grid-template-columns: minmax(0, 1fr); }
	#centre.v4-tunnel :is(#livraison, #panier-livraison) .choix .top_relais #relais_header.v4-relais-entete .cp_bt { padding: 0 18px; }
	#centre.v4-tunnel :is(#livraison, #panier-livraison) .choix .top_relais .v4-relais-liste { max-height: 420px; }
}

#centre.v4-tunnel #panier-expedition-today {
	margin: 0 0 14px;
	padding: 12px 14px 12px 64px;
	border-radius: 12px;
	font-size: 13px;
	line-height: 1.4;
	background-position: 18px center;
}

/* --- adresses ---------------------------------------------------------- */
#centre.v4-tunnel #adresses .commande-adresse-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin: 0;
}

#centre.v4-tunnel #adresses #commande-adresse-livraison,
#centre.v4-tunnel #adresses #commande-adresse-facturation {
	float: none;
	width: auto;
	min-height: 0;
	margin: 0;
	padding: 18px 20px;
	border: 1px solid var(--v4-bordure-pale);
	border-radius: 14px;
	background: var(--v4-blanc);
	color: var(--v4-encre-douce);
	font-size: 14px;
	line-height: 1.6;
}

#centre.v4-tunnel #adresses .v4-adr-titre {
	display: block;
	margin-bottom: 6px;
	color: var(--v4-gris);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
}

#centre.v4-tunnel #adresses .commande-adresse-container a.modifier {
	display: inline-flex;
	align-items: center;
	height: 36px;
	margin-top: 12px;
	padding: 0 16px;
	border: 2px solid var(--v4-encre);
	border-radius: var(--v4-pilule);
	background: none;
	color: var(--v4-encre);
	font-size: 13px;
	font-weight: 800;
	line-height: 1;
	text-decoration: none;
	text-transform: none;
}
#centre.v4-tunnel #adresses .commande-adresse-container a.modifier:hover { background: var(--v4-encre); color: var(--v4-blanc); }

/* --- paiement : modes fabriques en PHP (.mode_paiement) --------------- */
#centre.v4-tunnel #paiement .mode_paiement {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	width: auto;
	height: auto;
	margin: 12px 0 0;
	padding: 16px 18px;
	border: 2px solid var(--v4-bordure-pale);
	border-radius: 14px;
	background: var(--v4-blanc);
	transition: border-color .15s ease, background-color .15s ease;
}

#centre.v4-tunnel #paiement .commande-titre + .mode_paiement { margin-top: 0; }
#centre.v4-tunnel #paiement .mode_paiement:hover { border-color: var(--v4-bordure-chip); }
#centre.v4-tunnel #paiement .mode_paiement.selected-border,
#centre.v4-tunnel #paiement .mode_paiement:has(input[type="radio"]:checked) {
	border-color: var(--v4-vert);
	background: #F3F9F5;
}

#centre.v4-tunnel #paiement .mode_paiement .select-mode { flex: 0 0 22px; width: 22px; margin: 0; }

#centre.v4-tunnel #paiement .mode_paiement > span,
#centre.v4-tunnel #paiement .mode_paiement .mode_paiement_label {
	flex: 1 1 0;
	min-width: 0;
	color: var(--v4-encre);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	text-align: left;
}

#centre.v4-tunnel #paiement .mode_paiement > img,
#centre.v4-tunnel #paiement .mode_paiement .mode_paiement_logo {
	flex: 0 0 auto;
	width: auto;
	max-width: 130px;
	height: auto;
	max-height: 40px;
	margin: 0;
}

/* Paiement integre (Monetico) : la ligne du mode, puis le formulaire de
   carte, l'erreur eventuelle et la mention Monetico sur toute la largeur */
#centre.v4-tunnel #paiement .mode_paiement .mode_paiement_head {
	flex: 1 0 100%;
	display: flex !important;
	flex-wrap: nowrap;
	align-items: center;
	gap: 14px;
	width: auto;
}

#centre.v4-tunnel #paiement .mode_paiement .mode_paiement_head .select-mode { flex: 0 0 22px; width: 22px; }
#centre.v4-tunnel #paiement .mode_paiement .mode_paiement_label { cursor: pointer; margin: 0; }

#centre.v4-tunnel #paiement .mode_paiement > .type_paiement_integre_v2_error,
#centre.v4-tunnel #paiement .mode_paiement > .type_paiement_integre_v2_content,
#centre.v4-tunnel #paiement .mode_paiement > div[style] { flex: 1 0 100%; width: 100%; }

#centre.v4-tunnel #paiement .mode_paiement > .type_paiement_integre_v2_error:empty { display: none; }
#centre.v4-tunnel #paiement .mode_paiement > .type_paiement_integre_v2_error { font-size: 14px; font-weight: 700; }
#centre.v4-tunnel #paiement .mode_paiement > .type_paiement_integre_v2_content { margin-top: 4px; }
#centre.v4-tunnel #paiement .mode_paiement > div[style] { margin-top: 2px !important; border-radius: 10px !important; }
#centre.v4-tunnel #paiement .mode_paiement > div[style] span { font-weight: 400; }

/* Echeancier du paiement en 3 fois, rempli par scripts.v2.js */
#centre.v4-tunnel #echeances-3-fois { margin: -6px 0 16px; }
#centre.v4-tunnel #echeances-3-fois .echeances-3-fois-bloc {
	padding: 14px 16px;
	border-radius: 12px;
	background: var(--v4-creme);
	color: var(--v4-encre-douce);
	font-size: 13px;
	line-height: 1.45;
}
#centre.v4-tunnel #echeances-3-fois .echeances-3-fois-titre { margin-bottom: 6px; color: var(--v4-encre); font-size: 14px; font-weight: 800; }
#centre.v4-tunnel #echeances-3-fois .echeances-3-fois-ligne { padding: 2px 0; }
#centre.v4-tunnel #echeances-3-fois .echeances-3-fois-label { color: var(--v4-gris); }
#centre.v4-tunnel #echeances-3-fois .echeances-3-fois-detail { font-size: 12px; }
#centre.v4-tunnel #echeances-3-fois .echeances-3-fois-montant { color: var(--v4-encre); font-weight: 700; }

/* --- recapitulatif : code promo, total, remarques, bouton -------------- */
#centre.v4-tunnel #bon-reduction,
#centre.v4-tunnel #right-bloc #bon-reduction-commande {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	height: auto;
	margin: 0 0 16px;
	padding: 0;
	text-align: left;
	line-height: 1.4;
}

#centre.v4-tunnel #bon-reduction .ch,
#centre.v4-tunnel #right-bloc #bon-reduction-commande .ch { flex: 1 1 140px; width: auto; min-width: 0; margin: 0; }

#centre.v4-tunnel #bon-reduction #bt,
#centre.v4-tunnel #right-bloc #bon-reduction-commande #bt {
	flex: 0 0 auto;
	height: 44px;
	min-height: 0;
	margin: 0;
	padding: 0 18px;
	border: 0;
	border-radius: var(--v4-pilule);
	background: var(--v4-encre);
	color: var(--v4-blanc);
	font-family: var(--v4-texte);
	font-size: 14px;
	font-weight: 800;
	line-height: 44px;
	text-transform: none;
	cursor: pointer;
}

#centre.v4-tunnel #bon-reduction #ajax-bon-reduction,
#centre.v4-tunnel #right-bloc #bon-reduction-commande #ajax-bon-reduction { flex: 1 0 100%; margin: 0; font-size: 13px; font-weight: 700; }
#centre.v4-tunnel #ajax-bon-reduction:empty { display: none; }

#centre.v4-tunnel #validationpanier #total,
#centre.v4-tunnel #right-bloc .right-bloc-price {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 20px;
	padding: 18px 0 0;
	border-top: 1px solid var(--v4-bordure-pale);
	font-size: 16px;
	font-weight: 800;
	color: var(--v4-encre);
}

#centre.v4-tunnel #total_a_payer {
	display: inline-flex;
	align-items: baseline;
	gap: 2px;
	font-family: var(--v4-texte);
	font-size: 32px;
	font-weight: 300;
	line-height: 1;
	color: var(--price-color, #8C0000);
}

#centre.v4-tunnel #total_a_payer .euro,
#centre.v4-tunnel #total_a_payer .caddie_total_euro { display: inline; font-size: 22px; }

#centre.v4-tunnel #ajax-ligne-reduction:empty { display: none; }
#centre.v4-tunnel #ajax-ligne-reduction { margin: -6px 0 16px; font-size: 14px; }

#centre.v4-tunnel #validationpanier { float: none; width: auto; margin: 0; padding: 0; border: 0; background: none; text-align: left; }
#centre.v4-tunnel #validationpanier #bouton { margin: 0; }

#centre.v4-tunnel #validationpanier #bouton a.v4-tun-valider,
#centre.v4-tunnel .button_commande,
#centre.v4-tunnel .button_commande_integre,
#centre.v4-tunnel .update-adresse-actions .button_action {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	height: 58px;
	margin: 0;
	padding: 0 24px;
	border: 0;
	border-radius: var(--v4-pilule);
	background: var(--v4-vert);
	color: var(--v4-blanc);
	font-family: var(--v4-texte);
	font-size: 17px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	cursor: pointer;
	max-width: none;
	transition: background .15s ease;
}

#centre.v4-tunnel #validationpanier #bouton a.v4-tun-valider:hover,
#centre.v4-tunnel .button_commande:hover,
#centre.v4-tunnel .button_commande_integre:hover,
#centre.v4-tunnel .update-adresse-actions .button_action:hover { background: #126033; color: var(--v4-blanc); }

#centre.v4-tunnel :is(.button_commande, .button_commande_integre) img.button_icon { width: 18px; height: 18px; margin: 0; }

/* Bouton « devis » eventuel sous le bouton principal */
#centre.v4-tunnel .bt_caddie { margin-top: 12px; }
#centre.v4-tunnel .bt_caddie a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 48px;
	padding: 0 20px;
	border: 2px solid var(--v4-encre);
	border-radius: var(--v4-pilule);
	background: none;
	color: var(--v4-encre);
	font-size: 15px;
	font-weight: 800;
	line-height: 1;
	text-transform: none;
}

#centre.v4-tunnel #right-bloc #remarques { margin: 0 0 16px; font-size: 14px; }
#centre.v4-tunnel .v4-remarques summary {
	cursor: pointer;
	list-style: none;
	color: var(--v4-encre);
	font-weight: 700;
}
#centre.v4-tunnel .v4-remarques summary::-webkit-details-marker { display: none; }
#centre.v4-tunnel .v4-remarques summary::before { content: "+"; display: inline-block; width: 18px; font-weight: 800; }
#centre.v4-tunnel .v4-remarques[open] summary::before { content: "\2212"; }

#centre.v4-tunnel #right-bloc #remarques textarea {
	width: 100%;
	min-height: 96px;
	margin-top: 10px;
	padding: 12px 14px;
	border: 1px solid var(--v4-bordure);
	border-radius: 12px;
	font-family: var(--v4-texte);
	font-size: 16px;
	resize: vertical;
}

#centre.v4-tunnel #right-bloc #cgv { margin: 12px 0 0; color: var(--v4-gris); font-size: 12px; line-height: 1.45; text-align: center; }
#centre.v4-tunnel #right-bloc #cgv a { color: var(--v4-encre); }

#centre.v4-tunnel .message_div {
	display: none;
	margin: 12px 0 0;
	padding: 12px 14px;
	border-radius: 12px;
	background: #FBE6E4;
	color: #8E1B14;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
}

/* Reassurance sous le recapitulatif */
#centre.v4-tunnel .v4-tun-garanties {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 4px 8px;
	list-style: none;
	color: var(--v4-encre-douce);
	font-size: 14px;
}

#centre.v4-tunnel .v4-tun-garanties li { position: relative; margin: 0; padding-left: 30px; }
#centre.v4-tunnel .v4-tun-garanties li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--v4-vert) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
}
#centre.v4-tunnel .v4-tun-garanties a { color: var(--v4-encre); font-weight: 800; text-decoration: none; }

/* --- formulaires (identification, adresse) ----------------------------- */
#centre.v4-tunnel .v4-ident-grille {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	gap: 24px;
	align-items: start;
}

#centre.v4-tunnel #commande-1-gauche,
#centre.v4-tunnel #commande-1-droite {
	float: none;
	width: auto;
	margin: 0;
	padding: 28px 32px;
	border: 0;
}

#centre.v4-tunnel #commande-1-gauche { order: 1; }
#centre.v4-tunnel #commande-1-droite { order: 2; position: sticky; top: 20px; }

#centre.v4-tunnel .v4-champs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px 18px;
}

#centre.v4-tunnel .v4-champ-large { grid-column: 1 / -1; }
#centre.v4-tunnel .v4-champs .v4-champ-large > .form_label { margin: 0; }

#centre.v4-tunnel .form_label {
	display: block;
	width: auto;
	margin: 0 0 16px;
	padding: 0;
}

#centre.v4-tunnel .v4-champs .form_label { margin: 0; }

#centre.v4-tunnel .form_label label {
	display: block;
	float: none;
	width: auto;
	margin: 0 0 6px;
	padding: 0;
	color: var(--v4-encre);
	font-size: 14px;
	font-weight: 700;
	text-align: left;
}

#centre.v4-tunnel .form_label div { float: none; width: auto; margin: 0; }

#centre.v4-tunnel .v4-facultatif { margin-left: 4px; color: var(--v4-gris); font-size: 12px; font-weight: 600; }

#centre.v4-tunnel .form_label :is(input[type="text"], input[type="email"], input[type="tel"], input[type="password"], textarea, select) {
	display: block;
	width: 100%;
	height: 50px;
	margin: 0;
	padding: 0 14px;
	border: 1px solid var(--v4-bordure);
	border-radius: 12px;
	background: var(--v4-blanc);
	box-shadow: none;
	color: var(--v4-encre);
	font-family: var(--v4-texte);
	font-size: 16px;
	line-height: 1.3;
}

#centre.v4-tunnel .form_label textarea { height: auto; min-height: 76px; padding: 13px 14px; resize: vertical; }
#centre.v4-tunnel .form_label select { padding-right: 40px; -webkit-appearance: none; appearance: none; background: var(--v4-blanc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2316181D' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 14px center / 14px 14px no-repeat; }
#centre.v4-tunnel #list_pays { display: block; width: 100%; }
#centre.v4-tunnel #list_pays::after { content: none; display: none; }

#centre.v4-tunnel .form_label :is(input, textarea, select):focus {
	border-color: var(--v4-encre);
	outline: 3px solid rgba(22, 24, 29, .12);
	outline-offset: 0;
}

#centre.v4-tunnel .form_label ::placeholder { color: var(--v4-gris-clair); }

#centre.v4-tunnel .v4-erreur { margin-top: 6px; font-size: 13px; font-weight: 700; }

#centre.v4-tunnel .v4-ident-actions {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 14px;
	margin-top: 22px;
	text-align: center;
}

#centre.v4-tunnel .popover-mdp-perdu { color: var(--v4-gris); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
#centre.v4-tunnel .popover-mdp-perdu:hover { color: var(--v4-encre); text-decoration: underline; text-underline-offset: 3px; }

#centre.v4-tunnel #message_div {
	margin: 0;
	padding: 0;
	color: #8E1B14;
	font-size: 14px;
	font-weight: 700;
}

#centre.v4-tunnel .v4-tun-mentions { margin-top: 20px; color: var(--v4-gris-clair); font-size: 11px; line-height: 1.5; }
#centre.v4-tunnel .v4-tun-mentions a { color: inherit; }

/* Modifier une adresse */
#centre.v4-tunnel #modification_adresse {
	float: none;
	width: auto;
	max-width: 760px;
	margin: 0 auto;
	padding: 32px 36px;
}

#centre.v4-tunnel #modification_adresse h1 { margin: 0 0 24px; font-size: 36px; }

#centre.v4-tunnel .update-adresse-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 26px;
}

#centre.v4-tunnel .update-adresse-actions .button_action { flex: 1 1 220px; width: auto; }
#centre.v4-tunnel .update-adresse-actions .button_action.back {
	border: 2px solid var(--v4-encre);
	background: none;
	color: var(--v4-encre);
}
#centre.v4-tunnel .update-adresse-actions .button_action.back:hover { background: var(--v4-encre); color: var(--v4-blanc); }

/* --- messages : panier vide, confirmation, retours de paiement --------- */
#centre.v4-tunnel .v4-tun-message {
	max-width: 760px;
	margin: 0 auto;
	padding: 44px 44px 40px;
	text-align: center;
}

#centre.v4-tunnel .v4-tun-message h1 { margin: 0 0 14px; font-size: 40px; text-align: center; }
#centre.v4-tunnel .v4-tun-message p { margin: 0 0 10px; color: var(--v4-encre-douce); font-size: 16px; line-height: 1.6; }

#centre.v4-tunnel .v4-tun-pictogramme {
	display: inline-grid;
	place-items: center;
	width: 76px;
	height: 76px;
	margin: 0 0 18px;
	border-radius: 50%;
	background: var(--v4-sable);
	color: var(--v4-encre);
}

#centre.v4-tunnel .v4-picto-ok { background: #E2F1E7; color: var(--v4-vert); }
#centre.v4-tunnel .v4-picto-ko { background: #FBE6E4; color: var(--v4-rouge); }

#centre.v4-tunnel .v4-tun-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: 26px;
}

#centre.v4-tunnel .v4-tun-actions .v4-bouton-ligne { background: none; font-family: var(--v4-texte); cursor: pointer; }

#centre.v4-tunnel .v4-tun-raccourcis {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 26px 0 0;
	padding: 0;
	list-style: none;
}

#centre.v4-tunnel .v4-tun-raccourcis a {
	display: inline-flex;
	align-items: center;
	height: 38px;
	padding: 0 16px;
	border: 1px solid var(--v4-bordure-chip);
	border-radius: var(--v4-pilule);
	color: var(--v4-encre);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}
#centre.v4-tunnel .v4-tun-raccourcis a:hover { border-color: var(--v4-encre); }

#centre.v4-tunnel .v4-cmd3-ref { font-size: 18px; }
#centre.v4-tunnel .v4-cmd3-ref strong { color: var(--v4-encre); }

#centre.v4-tunnel .v4-cmd3-infos {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin: 26px 0 22px;
	text-align: left;
}

#centre.v4-tunnel .v4-cmd3-infos > div { padding: 16px 18px; border-radius: 14px; background: var(--v4-creme); }
#centre.v4-tunnel .v4-cmd3-infos dt { color: var(--v4-gris); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
#centre.v4-tunnel .v4-cmd3-infos dd { margin: 4px 0 0; color: var(--v4-encre); font-size: 19px; font-weight: 800; }

#centre.v4-tunnel .v4-cmd3-paiement { display: flex; flex-direction: column; align-items: center; gap: 12px; }
#centre.v4-tunnel .v4-cmd3-paiement :is(input[type="submit"], button) { cursor: pointer; }
#centre.v4-tunnel .v4-cmd3-aide { text-align: center; }

/* --- tablette ------------------------------------------------------------ */
@media (max-width: 1100px) {
	#centre.v4-tunnel .v4-tun-grille { grid-template-columns: minmax(0, 1fr) 340px; }
}

@media (max-width: 960px) {
	#centre.v4-tunnel .v4-tun-grille,
	#centre.v4-tunnel .v4-ident-grille { grid-template-columns: minmax(0, 1fr); }
	#centre.v4-tunnel .v4-tun-recap,
	#centre.v4-tunnel #commande-1-droite { position: static; }
	#centre.v4-tunnel #commande-1-droite,
	#centre.v4-tunnel #commande-1-gauche { order: 0; }
	#centre.v4-tunnel .v4-etapes li:not(.v4-etape-active) { flex: 0 0 auto; padding-right: 8px; }
	#centre.v4-tunnel .v4-etapes li:not(.v4-etape-active) .v4-etape-nom { display: none; }
}

/* --- mobile -------------------------------------------------------------- */
@media (max-width: 700px) {
	#centre.v4-tunnel { padding: 16px 0 40px; }
	#centre.v4-tunnel .v4-etapes { gap: 6px; margin-bottom: 18px; }
	#centre.v4-tunnel .v4-etapes li { padding: 5px 12px 5px 5px; font-size: 13px; }
	#centre.v4-tunnel .v4-etapes li:not(.v4-etape-active) { padding-right: 5px; }
	#centre.v4-tunnel .v4-etape-num { flex-basis: 26px; width: 26px; height: 26px; font-size: 12px; }

	#centre.v4-tunnel .v4-tun-entete h1,
	#centre.v4-tunnel #modification_adresse h1 { font-size: 32px; }
	#centre.v4-tunnel .v4-tun-message h1 { font-size: 30px; }

	#centre.v4-tunnel .v4-tun-carte,
	#centre.v4-tunnel #commande-1-gauche,
	#centre.v4-tunnel #commande-1-droite,
	#centre.v4-tunnel #modification_adresse { padding: 22px 18px; border-radius: 16px; }
	#centre.v4-tunnel .v4-tun-message { padding: 32px 20px 28px; }
	#centre.v4-tunnel .v4-tun-titre,
	#centre.v4-tunnel #left-bloc .commande-titre { font-size: 22px; margin-bottom: 14px; }

	/* Ligne de caddie : visuel a gauche, infos et prix, puis quantite */
	#centre.v4-tunnel .v4-cad-table,
	#centre.v4-tunnel .v4-cad-table tbody { display: block; }
	#centre.v4-tunnel .v4-cad-table tr {
		display: grid;
		grid-template-columns: 84px minmax(0, 1fr) auto;
		grid-template-areas: "img infos infos" "img prix prix" "qte qte suppr";
		gap: 8px 14px;
		padding: 18px 0;
	}
	#centre.v4-tunnel .v4-cad-table td { display: block; width: auto; padding: 0; }
	#centre.v4-tunnel td.v4-cad-visuel { grid-area: img; width: auto; padding: 0; }
	#centre.v4-tunnel .v4-cad-visuel img { width: 84px; height: 84px; }
	#centre.v4-tunnel td.v4-cad-infos { grid-area: infos; padding: 0; }
	#centre.v4-tunnel td.v4-cad-prix { grid-area: prix; width: auto; padding: 0; text-align: left; }
	#centre.v4-tunnel td.v4-cad-qte { grid-area: qte; width: auto; padding-top: 6px; }
	#centre.v4-tunnel td.v4-cad-suppr { grid-area: suppr; width: auto; align-self: end; padding: 0 0 2px; }
	#centre.v4-tunnel .v4-cad-table .pv2-caddie { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
	#centre.v4-tunnel .v4-cad-infos a.nom_produit { font-size: 16px; }

	/* Recapitulatif de l'etape 3 : pas de colonne de quantite separee */
	#centre.v4-tunnel .v4-cmd-ligne tr {
		grid-template-columns: 64px minmax(0, 1fr);
		grid-template-areas: "img infos" "img prix";
		padding: 14px 0;
	}
	#centre.v4-tunnel .v4-cmd-ligne .v4-cad-visuel img { width: 64px; height: 64px; }

	#centre.v4-tunnel :is(#livraison, #panier-livraison) .choix { flex-wrap: wrap; gap: 10px 12px; padding: 14px; }
	#centre.v4-tunnel :is(#livraison, #panier-livraison) .choix .c { flex: 1 1 calc(100% - 160px); }
	#centre.v4-tunnel :is(#livraison, #panier-livraison) .choix .l2 img { width: 60px; }
	#centre.v4-tunnel #paiement .mode_paiement { flex-wrap: wrap; padding: 14px; }
	#centre.v4-tunnel #paiement .mode_paiement > span,
	#centre.v4-tunnel #paiement .mode_paiement .mode_paiement_label { flex-basis: calc(100% - 36px); }
	#centre.v4-tunnel #paiement .mode_paiement > img,
	#centre.v4-tunnel #paiement .mode_paiement .mode_paiement_logo { margin-left: 36px; max-height: 34px; }
	#centre.v4-tunnel #paiement .mode_paiement .mode_paiement_head { flex-wrap: wrap; }

	#centre.v4-tunnel #adresses .commande-adresse-container { grid-template-columns: 1fr; }

	#centre.v4-tunnel .v4-champs { grid-template-columns: 1fr; gap: 14px; }
	#centre.v4-tunnel .v4-cmd3-infos { grid-template-columns: 1fr; }
	#centre.v4-tunnel #total_a_payer { font-size: 30px; }
}

/* Etape livraison et paiement : produits et total dans deux cartes.
   Sur tablette et mobile, ordre de lecture : produits, livraison, adresses,
   paiement, puis total et bouton. Les deux colonnes s'effacent
   (display: contents) pour que leurs cartes se rangent dans un seul flux. */
#centre.v4-tunnel .v4-cmd-produits .v4-cmd-lignes { margin: 0; }

@media (max-width: 960px) {
	#centre.v4-cmd2 .v4-tun-grille { display: flex; flex-direction: column; align-items: stretch; gap: 20px; }
	#centre.v4-cmd2 #left-bloc,
	#centre.v4-cmd2 #right-bloc { display: contents; }
	#centre.v4-cmd2 .v4-cmd-produits { order: 1; }
	#centre.v4-cmd2 #livraison { order: 2; }
	#centre.v4-cmd2 #adresses { order: 3; }
	#centre.v4-cmd2 #paiement { order: 4; }
	#centre.v4-cmd2 .v4-cmd-total { order: 5; }
	#centre.v4-cmd2 .v4-tun-garanties { order: 6; }
}

/* =========================================================================
   BULLE D'ACCUEIL D'ARISTIDE (.chat-welcome-message, creee par chat2.js)
   Carte blanche a la place du fond noir : texte plus grand et plus aere,
   signature « Aristide », bouton vert pleine largeur. chat2.js injecte son
   CSS dans <head> apres cette feuille : les regles partent de « html body »
   pour passer devant. Le texte vient de chatv2_chats.welcome_message.
   ========================================================================= */
html body .chat-welcome-message {
	box-sizing: border-box;
	width: calc(100vw - 24px);
	max-width: 340px;
	padding: 16px 16px 16px 18px;
	gap: 8px;
	border: 1px solid var(--v4-bordure-pale);
	border-radius: 18px;
	background: var(--v4-blanc);
	color: var(--v4-encre);
	box-shadow: 0 18px 40px rgba(22, 24, 29, .18), 0 2px 6px rgba(22, 24, 29, .08);
	font-family: var(--v4-texte);
	font-size: 15px;
	line-height: 1.55;
}

html body .chat-welcome-text { flex: 1 1 auto; min-width: 0; line-height: 1.55; }

/* Signature au-dessus du message */
html body .chat-welcome-text::before {
	content: "Aristide \00B7  Conseiller PanierBasket";
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 6px;
	color: var(--v4-gris);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .02em;
}

html body .chat-welcome-text br { display: none; }

html body .chat-welcome-open {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: 46px;
	margin: 14px 0 0;
	padding: 0 18px;
	border: 0;
	border-radius: var(--v4-pilule);
	background: var(--v4-vert);
	color: var(--v4-blanc);
	font-family: var(--v4-texte);
	font-size: 15px;
	font-weight: 800;
	cursor: pointer;
	transition: background .15s ease;
}

html body .chat-welcome-open::after { content: "\2192"; font-size: 17px; line-height: 1; }
html body .chat-welcome-open:hover { background: #126033; }

html body .chat-welcome-close {
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	margin: -6px -6px 0 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--v4-gris);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}

html body .chat-welcome-close:hover { background: var(--v4-sable); color: var(--v4-encre); }

/* Pointe vers l'avatar, blanche comme la carte */
html body .open-chat.show-welcome::after {
	border-left-width: 8px;
	border-right-width: 8px;
	border-bottom: 8px solid var(--v4-blanc);
	filter: drop-shadow(0 -1px 0 var(--v4-bordure-pale));
	z-index: 1000;
}


/* =====================================================================
   CONCOURS VIDEO : MENTIONS (05/11/2026)
   - encadre de la fiche produit (paniers), sous le paiement 3x :
     template_produit_v4_commande.tpl, montant mis a jour par la fiche ;
   - carte de la grille des categories de paniers, en 4e position, page 1,
     sans filtre : template_categorie-bloc-produit-v4.tpl (LISTE.V4_CONCOURS),
     posee par fichiers/categorie_include.php.
   ===================================================================== */
#produit-v2.v4-produit #produit-droite #bloc-commande.v4-achat #commande .v4-concours-fiche {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 12px 14px;
	border-radius: 12px;
	background: #E8F0FA;
	color: #163F75;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	text-align: left;
}
#produit-v2.v4-produit .v4-concours-fiche .v4-cf-picto {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	border-radius: 999px;
	background: var(--v4-bleu, #1F5FA8);
	color: var(--v4-blanc);
}
#produit-v2.v4-produit .v4-concours-fiche strong { color: #163F75; font-weight: 800; }
#produit-v2.v4-produit .v4-concours-fiche a { color: #163F75; text-decoration: underline; text-underline-offset: 3px; }
#produit-v2.v4-produit .v4-concours-fiche a.v4-cf-participer { color: var(--v4-bleu, #1F5FA8); font-weight: 800; }
#produit-v2.v4-produit .v4-concours-fiche a:hover { color: #0F2C52; }

#categorie-v2-produits .v4-concours-carte {
	display: flex;
	flex-direction: column;
	gap: 14px;
	box-sizing: border-box;
	padding: 26px 24px 22px;
	border-radius: 20px;
	background: linear-gradient(160deg, var(--v4-bleu, #1F5FA8) 0%, var(--v4-bleu-fonce, #163F75) 100%);
	color: #DCE7F5;
}
@supports (grid-template-rows: subgrid) {
@media (min-width: 641px) {
	#categorie-v2-produits .v4-concours-carte { grid-row: span 9; margin-bottom: 20px; }
}
}
#categorie-v2-produits .v4-cc-sur-titre { font-size: 13px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: #8EC1FF; }
#categorie-v2-produits .v4-cc-picto {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	align-self: center;
	width: 150px;
	height: 150px;
	margin: 10px 0 6px;
	border-radius: 999px;
	background: var(--v4-blanc);
	color: var(--v4-bleu, #1F5FA8);
	box-shadow: 0 0 0 8px rgba(255, 255, 255, .14);
	font-size: 15px;
	font-weight: 800;
	line-height: 1.1;
	text-align: center;
}
/* plafond du concours, comme la pastille de la page concours (06/11/2026) */
#categorie-v2-produits .v4-cc-picto b { font-family: var(--v4-titre); font-size: 50px; line-height: 1; }
#categorie-v2-produits .v4-cc-titre { font-family: var(--v4-titre); font-size: 34px; font-weight: 800; line-height: 1; text-transform: uppercase; color: var(--v4-blanc); }
#categorie-v2-produits .v4-cc-titre span { color: #8EC1FF; }
#categorie-v2-produits .v4-cc-texte { margin: 0; font-size: 15px; line-height: 1.5; color: #DCE7F5; }
#categorie-v2-produits .v4-cc-actions { display: flex; flex-direction: column; gap: 12px; margin-top: auto; }
#categorie-v2-produits .v4-cc-bouton {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 50px;
	border-radius: 999px;
	background: var(--v4-blanc);
	color: var(--v4-bleu, #1F5FA8);
	font-size: 16px;
	font-weight: 800;
	text-decoration: none;
}
#categorie-v2-produits .v4-cc-bouton:hover { background: #E8F0FA; color: #163F75; }
#categorie-v2-produits .v4-cc-reglement { align-self: center; font-size: 13px; color: rgba(255, 255, 255, .8); text-decoration: underline; text-underline-offset: 3px; }
#categorie-v2-produits .v4-cc-reglement:hover { color: var(--v4-blanc); }

@media (max-width: 640px) {
	#produit-v2.v4-produit #produit-droite #bloc-commande.v4-achat #commande .v4-concours-fiche { font-size: 13px; }

	#categorie-v2-produits .v4-concours-carte {
		display: grid;
		grid-template-columns: 96px minmax(0, 1fr);
		column-gap: 14px;
		row-gap: 6px;
		align-items: center;
		padding: 16px;
		border-radius: 16px;
	}
	#categorie-v2-produits .v4-cc-picto { grid-column: 1; grid-row: 1 / span 4; width: 96px; height: 96px; margin: 0; box-shadow: 0 0 0 6px rgba(255, 255, 255, .14); }
	#categorie-v2-produits .v4-cc-picto { font-size: 11px; }
	#categorie-v2-produits .v4-cc-picto b { font-size: 32px; }
	#categorie-v2-produits :is(.v4-cc-sur-titre, .v4-cc-titre, .v4-cc-texte, .v4-cc-actions) { grid-column: 2; }
	#categorie-v2-produits .v4-cc-sur-titre { font-size: 11px; letter-spacing: .6px; }
	#categorie-v2-produits .v4-cc-titre { font-size: 24px; }
	#categorie-v2-produits .v4-cc-texte { font-size: 13px; line-height: 1.4; }
	#categorie-v2-produits .v4-cc-actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 4px; }
	#categorie-v2-produits .v4-cc-bouton { height: 40px; padding: 0 18px; font-size: 14px; white-space: nowrap; }
	#categorie-v2-produits .v4-cc-reglement { font-size: 12px; white-space: nowrap; }
}

/* =====================================================================
   CARTES PRODUIT DE LA CATEGORIE v4 : hauteurs des lignes (09/11/2026)
   Avant : scripts.v2.js (adjustMarketingHeights, adjustAvisClientsHeights,
   adjustAttributsMarketingHeights, adjustPrixProduitHeights...) mesurait
   chaque carte et posait des hauteurs en ligne, avec une mise en page
   forcee par carte (environ 400 ms au chargement, TBT PageSpeed). Sur
   .v4-cat ces fonctions ne tournent plus : la grille en subgrid aligne
   deja les lignes, ces regles reprennent les hauteurs fixes.
   ===================================================================== */
#categorie-v2.v4-cat .bloc-produit-v2 .marketing:has(*),
#categorie-v2.v4-cat .bloc-produit-v2 .avis-clients:has(*) { min-height: 30px; }
#categorie-v2.v4-cat .bloc-produit-v2 .attributs-marketing:not(:empty):not(:has(ul)) { min-height: 40px; }
#categorie-v2.v4-cat .bloc-produit-v2 .marketing:not(:has(*)) + a { margin-top: 0; }
#categorie-v2.v4-cat .bloc-produit-v2 .prix { align-self: stretch; }
@media (max-width: 599px) {
	#categorie-v2.v4-cat .bloc-produit-v2 .attributs-marketing:not(:empty):not(:has(ul)) { min-height: 50px; }
}


/* =====================================================================
   Fenetre d'ajout au panier (10/11/2026)
   template_ajax-caddie-add.tpl et template_ajax-caddie-add-select.tpl,
   ouverte par openPopOverCustom (scripts.v2.js). Reprend les cartes et
   les boutons du site : titre Barlow, bouton vert plein pour terminer la
   commande, contour pour continuer, cartes blanches a bord pale avec
   « Ajouter » en contour vert. Les regles de styles_v2 (#box-caddie-v2)
   sont neutralisees ici, y compris leurs !important du mobile.
   ===================================================================== */

.popover-custom:has(#box-caddie-v2) { border-radius: 22px; box-shadow: 0 24px 60px rgba(22, 24, 29, .25); }
.popover-custom:has(#box-caddie-v2) .popover-content { border: 0; }

#box-caddie-v2.v4-ajout-panier { gap: 0; padding: 8px 8px 4px; font-family: var(--v4-texte); color: var(--v4-encre); }

#box-caddie-v2.v4-ajout-panier #top-content { align-items: center; gap: 24px; padding-right: 36px; }
#box-caddie-v2.v4-ajout-panier #left-content { flex: 0 0 132px; }
#box-caddie-v2.v4-ajout-panier #image {
	display: flex; align-items: center; justify-content: center;
	width: 132px; height: 132px; border-radius: 16px; background: var(--v4-creme); overflow: hidden;
}
#box-caddie-v2.v4-ajout-panier #image img { display: block; width: 100%; height: 100%; object-fit: scale-down; mix-blend-mode: multiply; }
#box-caddie-v2.v4-ajout-panier #right-content { flex: 1 1 auto; min-width: 0; padding-left: 0; }

#box-caddie-v2.v4-ajout-panier #titre {
	display: flex; align-items: center; gap: 10px; margin: 0 0 4px; text-align: left;
	font-family: var(--v4-titre); font-size: 30px; font-weight: 800; line-height: 1; text-transform: uppercase; color: var(--v4-encre);
}
#box-caddie-v2.v4-ajout-panier .v4-ajout-coche {
	display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
	width: 28px; height: 28px; border-radius: 999px; background: var(--v4-vert); color: var(--v4-blanc);
}
#box-caddie-v2.v4-ajout-panier #produit { margin: 0 0 16px; text-align: left; font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--v4-gris); }
#box-caddie-v2.v4-ajout-panier #produit select {
	height: 44px; margin-left: 6px; padding: 0 40px 0 14px; max-width: 100%;
	border: 1.5px solid var(--v4-bordure); border-radius: 12px; background-color: var(--v4-blanc);
	font-family: var(--v4-texte); font-size: 15px; color: var(--v4-encre);
}

#box-caddie-v2.v4-ajout-panier #actions { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 10px; }
#box-caddie-v2.v4-ajout-panier #action-r,
#box-caddie-v2.v4-ajout-panier #action-p { flex: 0 0 auto; max-width: none; }
#box-caddie-v2.v4-ajout-panier #action-p a { display: block; text-decoration: none; }
#box-caddie-v2.v4-ajout-panier :is(#rester-2, #action-2, #action-commander) {
	display: flex; align-items: center; justify-content: center; box-sizing: border-box;
	height: 50px; margin: 0; padding: 0 26px; border-radius: var(--v4-pilule);
	font-family: var(--v4-texte); font-size: 16px; font-weight: 800; line-height: 1; text-transform: none; cursor: pointer;
	transition: background-color .15s, border-color .15s, color .15s;
}
#box-caddie-v2.v4-ajout-panier :is(#action-2, #action-commander) { border: 0; background-color: var(--v4-vert); color: var(--v4-blanc); }
#box-caddie-v2.v4-ajout-panier :is(#action-2, #action-commander):hover { background-color: #125E33; }
#box-caddie-v2.v4-ajout-panier #rester-2 { border: 1.5px solid var(--v4-bordure); background-color: var(--v4-blanc); color: var(--v4-encre); }
#box-caddie-v2.v4-ajout-panier #rester-2:hover { border-color: var(--v4-encre); background-color: var(--v4-blanc); }
#box-caddie-v2.v4-ajout-panier :is(#rester-2, #action-2, #action-commander):focus-visible { outline: 2px solid var(--v4-encre); outline-offset: 2px; }

/* Ventes croisees */
#box-caddie-v2.v4-ajout-panier .caddie-cross { margin-top: 24px; padding: 22px 0 0; border-top: 1px solid var(--v4-bordure-pale); }
#box-caddie-v2.v4-ajout-panier .caddie-cross #title {
	margin: 0 0 14px; text-align: left;
	font-family: var(--v4-titre); font-size: 22px; font-weight: 800; line-height: 1.1; text-transform: uppercase; color: var(--v4-encre);
}
#box-caddie-v2.v4-ajout-panier #produits {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0;
}
#box-caddie-v2.v4-ajout-panier #produits > .bloc-produit-v2 {
	float: none; width: auto; height: auto; min-height: 0; margin: 0; padding: 0 12px 14px; box-sizing: border-box;
	display: flex; flex-direction: column; gap: 8px; overflow: hidden;
	border: 1.5px solid var(--v4-bordure-pale); border-radius: var(--v4-rayon); background: var(--v4-blanc); box-shadow: none;
	text-align: left; transition: border-color .15s;
}
#box-caddie-v2.v4-ajout-panier #produits > .bloc-produit-v2:hover { border-color: var(--v4-bordure); }
#box-caddie-v2.v4-ajout-panier #produits > .bloc-produit-v2::before,
#box-caddie-v2.v4-ajout-panier #produits > .bloc-produit-v2::after { display: none; }
#box-caddie-v2.v4-ajout-panier #produits > .bloc-produit-v2 .image { margin: 0 -12px; }
#box-caddie-v2.v4-ajout-panier #produits > .bloc-produit-v2 .image a { display: block; }
#box-caddie-v2.v4-ajout-panier #produits > .bloc-produit-v2 .image img {
	display: block; width: 100%; max-width: none; height: auto; aspect-ratio: 1 / 1; object-fit: scale-down; margin: 0;
}
#box-caddie-v2.v4-ajout-panier #produits > .bloc-produit-v2 .nom-produit,
#box-caddie-v2.v4-ajout-panier #produits > .bloc-produit-v2 .nom-produit.nom-produit-titre {
	margin: 0; padding: 0; height: auto !important; min-height: 2.5em; max-height: 2.5em;
	font-size: 15px; font-weight: 800; line-height: 1.25; text-align: left;
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
#box-caddie-v2.v4-ajout-panier #produits > .bloc-produit-v2 .nom-produit a { color: var(--v4-encre); text-decoration: none; }
#box-caddie-v2.v4-ajout-panier #produits > .bloc-produit-v2 .nom-produit a:hover { text-decoration: underline; text-underline-offset: 3px; }
#box-caddie-v2.v4-ajout-panier #produits > .bloc-produit-v2 .prix {
	flex: 1 1 auto; width: auto; height: auto; min-height: 0; margin: 0; padding: 0; line-height: normal; text-align: left;
	/* prix barre et mention sur une ligne, puis prix et remise cote a cote,
	   comme la barre d'achat de la fiche : la carte est trop etroite pour
	   la remise calee a droite des listes (elle passait dessous) */
	display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; align-content: flex-end; gap: 2px 8px;
}
#box-caddie-v2.v4-ajout-panier #produits > .bloc-produit-v2 .pv2-details { display: contents; }
#box-caddie-v2.v4-ajout-panier #produits > .bloc-produit-v2 .pv2-old-price { flex: 0 0 100%; }
#box-caddie-v2.v4-ajout-panier #produits > .bloc-produit-v2 .qte-td { display: none; }
#box-caddie-v2.v4-ajout-panier #produits > .bloc-produit-v2 .pv2-remise-wrapper { flex-shrink: 0; }
#box-caddie-v2.v4-ajout-panier #produits > .bloc-produit-v2 .pv2-remise { height: auto; padding: 4px 7px; font-size: 13px; font-weight: 400; line-height: 1.1; }
#box-caddie-v2.v4-ajout-panier #produits > .bloc-produit-v2 .bt { width: auto; margin: 0; }
#box-caddie-v2.v4-ajout-panier #produits > .bloc-produit-v2 .bt .goto {
	display: flex; align-items: center; justify-content: center; box-sizing: border-box;
	width: 100%; height: 42px; min-height: 0; margin: 0; padding: 0 12px;
	border: 1.5px solid var(--v4-vert); border-radius: var(--v4-pilule); background: var(--v4-blanc); color: var(--v4-vert);
	font-family: var(--v4-texte); font-size: 15px; font-weight: 800; line-height: 1; text-transform: none; transform: none; cursor: pointer;
	transition: background-color .15s, color .15s;
}
#box-caddie-v2.v4-ajout-panier #produits > .bloc-produit-v2 .bt .goto:hover { background: var(--v4-vert); color: var(--v4-blanc); }

#box-caddie-v2.v4-ajout-panier #categorie_cross:not(:empty) { padding: 16px 0 0; text-align: left; font-size: 15px; font-weight: 700; }
#box-caddie-v2.v4-ajout-panier #categorie_cross a { color: var(--v4-encre); text-decoration: underline; text-underline-offset: 4px; }
#box-caddie-v2.v4-ajout-panier #categorie_cross a::after { content: " \2192"; }
#box-caddie-v2.v4-ajout-panier #categorie_cross a:hover { color: var(--v4-vert); }

@media (max-width: 600px) {
	#box-caddie-v2.v4-ajout-panier { padding: 4px 0 0; }
	/* grille : photo a gauche du titre et du nom, boutons sur toute la largeur dessous */
	#box-caddie-v2.v4-ajout-panier #top-content {
		display: grid; grid-template-columns: 72px minmax(0, 1fr); grid-template-areas: "photo titre" "photo produit" "actions actions";
		column-gap: 14px; row-gap: 4px; align-items: start; padding-right: 0;
	}
	#box-caddie-v2.v4-ajout-panier #left-content { display: block; grid-area: photo; }
	#box-caddie-v2.v4-ajout-panier #image { width: 72px; height: 72px; border-radius: 12px; }
	#box-caddie-v2.v4-ajout-panier #right-content { display: contents; }
	#box-caddie-v2.v4-ajout-panier #titre { grid-area: titre; align-self: end; margin: 0; padding-right: 30px; font-size: 23px; gap: 8px; }
	#box-caddie-v2.v4-ajout-panier .v4-ajout-coche { width: 22px; height: 22px; }
	#box-caddie-v2.v4-ajout-panier .v4-ajout-coche svg { width: 13px; height: 13px; }
	#box-caddie-v2.v4-ajout-panier #produit { grid-area: produit; margin: 0; font-size: 14px; }
	#box-caddie-v2.v4-ajout-panier #produit select { display: block; width: 100%; margin: 8px 0 0; }
	#box-caddie-v2.v4-ajout-panier #actions { grid-area: actions; flex-direction: column; gap: 8px; width: auto; margin: 12px 0 0; }
	#box-caddie-v2.v4-ajout-panier :is(#action-r, #action-p) { width: 100%; }
	#box-caddie-v2.v4-ajout-panier :is(#rester-2, #action-2, #action-commander) { width: 100%; height: 48px; margin: 0; }

	#box-caddie-v2.v4-ajout-panier .caddie-cross { margin-top: 18px; padding: 16px 0 0; overflow: visible; }
	#box-caddie-v2.v4-ajout-panier .caddie-cross #title { padding: 0; font-size: 19px; text-align: left; margin-bottom: 10px; }
	#box-caddie-v2.v4-ajout-panier #produits {
		display: flex !important; gap: 10px !important; margin: 0 -16px !important; padding: 0 16px 6px !important;
		overflow-x: auto !important; scroll-snap-type: x mandatory; scroll-padding: 0 16px; scrollbar-width: none;
	}
	#box-caddie-v2.v4-ajout-panier #produits > .bloc-produit-v2 {
		flex: 0 0 58% !important; width: 58% !important; min-width: 58% !important; max-width: 58% !important;
		padding: 0 10px 12px !important; scroll-snap-align: start;
	}
	#box-caddie-v2.v4-ajout-panier #produits > .bloc-produit-v2 .image { margin: 0 -10px; }
	#box-caddie-v2.v4-ajout-panier #produits > .bloc-produit-v2 .nom-produit,
	#box-caddie-v2.v4-ajout-panier #produits > .bloc-produit-v2 .nom-produit.nom-produit-titre { font-size: 14px; margin: 0; }
	#box-caddie-v2.v4-ajout-panier #produits > .bloc-produit-v2 .prix { margin: 0; min-height: 0; }
	#box-caddie-v2.v4-ajout-panier #produits > .bloc-produit-v2 .bt .goto { height: 40px; margin: 0; padding: 0 8px; font-size: 14px; display: flex; }
	#box-caddie-v2.v4-ajout-panier #categorie_cross:not(:empty) { padding: 12px 0 0; font-size: 14px; }
}

/* Barre d'achat de la fiche (ordinateur) : sans avis, ni etoiles ni « 0 avis » (10/11/2026) */
#produit-v2.v4-produit .v4-barre-achat-sous[data-avis="0"] { display: none; }


/* =====================================================================
   Fin de promotion « jusqu'au mercredi 11 novembre » (11/11/2026)
   Cartes, fiche, panier et commande : toujours sur sa propre ligne,
   sous le bloc prix. Texte produit par v4_fin_promo() (inc/fonctions.php).
   ===================================================================== */
.pv2-fin-promo .date { display: inline; font-weight: 700; color: var(--price-color); }

/* Cartes en mobile : la regle « tout sur une ligne » (prix + remise) poussait
   la date dans une colonne etroite a droite. Elle passe a la ligne. */
@media (max-width: 640px) {
	:is(#selecteur, .v4-cat, #recommandations, #v4-recherche) .bloc-produit-v2 .prix { flex-wrap: wrap; row-gap: 4px; }
	:is(#selecteur, .v4-cat, #recommandations, #v4-recherche) .bloc-produit-v2 .pv2-details { flex: 1 1 0%; }
	:is(#selecteur, .v4-cat, #recommandations, #v4-recherche) .bloc-produit-v2 .pv2-fin-promo {
		order: 5;
		flex: 0 0 100%;
		width: 100%;
		font-size: 13px;
		line-height: 1.3;
	}
}

/* Fiche produit : sous le prix, sur toute la largeur du bloc */
#produit-v2.v4-produit .prix_p .pv2-fin-promo {
	order: 5;
	flex: 0 0 100%;
	width: 100%;
	margin: 0;
	font-size: 14px;
	line-height: 1.3;
	color: var(--v4-encre-douce);
}
/* Ecart sous le prix : le bloc vide #produit-code-promo prenait sa propre
   rangee, soit deux ecarts de 14 px avant la date */
#produit-v2.v4-produit .prix_p:has(.pv2-fin-promo) { row-gap: 6px; }
#produit-v2.v4-produit .prix_p #produit-code-promo:empty { display: none; }

/* Barres d'achat fixes (ordinateur et mobile) : date sous le prix, recopiee
   par le script de la fiche (.v4-bp-fin) */
#produit-v2.v4-produit .v4-bp-fin { display: block; font-size: 12px; font-weight: 400; line-height: 1.2; color: var(--v4-encre-douce); white-space: nowrap; }
#produit-v2.v4-produit .v4-bp-fin b { font-weight: 700; color: var(--price-color); }
#produit-v2.v4-produit .v4-bp-fin .v4-bp-fin-courte { display: none; }
#produit-v2.v4-produit #bloc-commande-mobile .v4-bp-fin { align-self: flex-start; font-size: 11px; text-align: left; }
#produit-v2.v4-produit #bloc-commande-mobile .v4-bp-fin .v4-bp-fin-longue { display: none; }
#produit-v2.v4-produit #bloc-commande-mobile .v4-bp-fin .v4-bp-fin-courte { display: inline; }

/* Panier et commande : sous la disponibilite de la ligne */
.v4-cad-fin-promo:empty { display: none; }
.v4-cad-fin-promo .pv2-fin-promo { margin-top: 4px; font-size: 13px; line-height: 1.3; color: var(--v4-encre-douce); }