@charset "utf-8";

/* @import url(https://fonts.googleapis.com/css?family=Titillium+Web:400,400italic,700,700italic&display=swap); */
/*@import url(/fonts/titillium.css);*/

/* @import url(https://fonts.googleapis.com/css?family=Economica:400,700&display=swap); */
/*@import url(/fonts/economica.css);*/


/* =============================================================
   Phase 3 — Design tokens (CSS custom properties)
   Modifier ces valeurs pour changer l'aspect global du site
   ============================================================= */
:root {
	/* Couleurs */
	--clr-text:        #525252;
	--clr-text-dark:   #333333;
	/* Système de marque — bascule encre + or (cf. spec 2026-06-20) */
	--clr-ink:          #241a12;   /* surfaces sombres, fond CTA, barre promo */
	--clr-ink-dark:     #140d06;   /* hover des surfaces encre */
	--clr-or:           #b88a3e;   /* accents déco : icônes CTA, liserés, fills sur sombre */
	--clr-or-text:      #8a6224;   /* texte d'accent sur fond clair (AA) */
	/* Palette « sur encre » (spec cagnotte 18/07). Sur fond --clr-ink, --clr-or/-or-text
	   sont trop sombres pour être lisibles → jeu dédié, contraste AA sur --clr-ink. */
	--clr-or-on-ink:      #e8cd97;   /* accent / montant or sur surface encre */
	--clr-text-on-ink:    #e7ded1;   /* texte courant crème sur surface encre */
	--clr-textsoft-on-ink:#c9b892;   /* label atténué (or-grège) sur surface encre */
	--clr-border:      #C5C5C5;
	--clr-border-dark: #C8C8C8;
	--clr-bg-light:    #F9F5EA;
	--clr-bg-grey:     #EEEEEE;
	--clr-success:      #2d6635;   /* vert action — CTA fiche produit, ligne de confiance */
	--clr-success-dark: #1f4d27;
	--clr-gold:         #f0a500;   /* or — étoiles de notation */
  /* Échelle de rayon — cran « doux » par défaut. Surchargée vers « net »
     par le <style> injecté dans header.inc.php quand ui_radius_style=sharp.
     NE PAS coder de rayon en dur ailleurs : utiliser --radius-s|m|l.
     Les cercles (50% / 999px) restent hors de ce système. */
  --radius-s:         8px;   /* boutons, champs, chips, stepper */
  --radius-m:         12px;  /* cartes, encadrés, panneaux moyens */
  --radius-l:         16px;  /* grandes modales, drawers, gros blocs */
  /* Gabarit bouton — source unique (spec #6+#17, 2026-07-05).
     Tous les CTA (primaires encre + secondaires bordés) consomment ces tokens.
     NE PAS coder padding/poids/ombre de bouton en dur ailleurs.
     Exceptions ASSUMÉES : « Payer » (plus fort, cf. .cc-cb-pay) et les
     chips/tags (composant ≠ bouton, restent en 999px). */
  /* Échelle de boutons S/M/L — commun aux 3 crans */
  --btn-weight:       700;
  --btn-letter:       .3px;
  --btn-shadow:       0 1px 2px rgba(36,26,18,.30);  /* ombre de contact — primaires encre */
  /* M — défaut (hauteur = cible tactile 44px) */
  --btn-min-h:        44px;
  --btn-pad-y:        10px;
  --btn-pad-x:        20px;
  --btn-font:         14px;
  /* S — actions denses répétées (min-height passe à 44px sous le breakpoint mobile) */
  --btn-sm-min-h:     36px;
  --btn-sm-pad:       6px 14px;
  --btn-sm-font:      13px;
  /* L — CTA majeur (paiement) */
  --btn-lg-min-h:     48px;
  --btn-lg-pad:       12px 28px;
  --btn-lg-font:      15px;
  --max-width:        1200px;
	--clr-white:       #FFFFFF;
	--clr-count:       #6E6860;   /* compteurs de facettes — gris chaud quiet, AA sur blanc et sur le wash sélectionné */

	/* =========================================================
	   SYSTÈME COULEUR — source unique (spec 2026-06-20)
	   PRIMITIVES (valeurs brutes cibles) — un seul endroit à éditer
	   ========================================================= */
	--n-page:#FAF8F3; --n-surface:#FFFFFF; --n-soft:#F4EFE4;
	--n-greige:#D9D3C8; --n-greige-strong:#C2BAAC; --n-line:#E7E1D6;
	--n-grey-border:#C5C5C5; --n-bg-grey:#EEEEEE;
	--n-text:#525252; --n-text-strong:#333333;
	--ink:#241a12; --ink-dark:#140d06;
	--or-bronze:#b88a3e; --or-text:#8a6224; --or-star:#f0a500;
	--green:#2d6635; --green-dark:#1f4d27; --red:#c0392b; --amber:#c8862a;
	/* feedback — triplets appariés AA */
	--fb-ok-bg:#EDF4EE; --fb-ok-bd:#C3D8C6; --fb-ok-tx:#245A2C;
	--fb-no-bg:#FBEDEC; --fb-no-bd:#ECC6C2; --fb-no-tx:#A33327;
	--fb-wa-bg:#FBF3E2; --fb-wa-bd:#EAD7A8; --fb-wa-tx:#8A5A12;
	--fb-in-bg:#EEF2F8; --fb-in-bd:#C9D6E8; --fb-in-tx:#3A5573;
	--fb-ok-strong-bg:var(--fb-ok-bg); --fb-ok-strong-bd:var(--fb-ok-bd); --fb-ok-strong-tx:var(--fb-ok-tx);
	--fb-no-strong-bg:var(--fb-no-bg); --fb-no-strong-bd:var(--fb-no-bd); --fb-no-strong-tx:var(--fb-no-tx);


	/* SÉMANTIQUES (rôles) — ce que les composants utilisent.
	   Phase 1 : pointent les bridges (apparence inchangée).
	   Phase 2 : repointées vers les primitives cibles. */
	--c-page:var(--n-page);
	--c-surface:var(--n-surface);
	--c-bg-soft:var(--n-soft);
	--c-bg-grey:var(--n-bg-grey);
	--c-border-struct:var(--n-greige);
	--c-border-input:var(--n-grey-border);
	--c-border-strong:var(--n-greige-strong);
	--c-line:var(--n-line);
	--c-frame:var(--n-greige);
	--c-text:var(--n-text); --c-text-strong:var(--n-text-strong);
	--c-ink:var(--ink); --c-ink-hover:var(--ink-dark);
	--c-accent:var(--or-bronze); --c-accent-text:var(--or-text); --c-star:var(--or-star);
	--c-success:var(--green); --c-success-dark:var(--green-dark);
	--c-danger:var(--red); --c-warning:var(--amber);

	/* Typographie */
	--ff-body:   'Montserrat', Arial, Verdana, sans-serif;
	--ff-title:  'Montserrat', Arial, Verdana, sans-serif;
	--ff-script: 'Montserrat', cursive;

	/* Espacements */
	--space-xs:  4px;
	--space-sm:  8px;
	--space-md:  20px;
	--space-lg:  40px;
	--space-xl:  80px;

	/* Breakpoints (référence commentée — utiliser dans les @media) */
	/* --bp-mobile: 1130px */
}

/* corps */
body {
	/* line-height RACINE : 1.5 unitless (ratio exact 30/20) au lieu de 30px FIXE.
	   Le 30px longueur était hérité tel quel par tout descendant sans line-height propre,
	   gonflant la boîte des éléments <20px (steppers, pastilles, sous-libellés) — cf.
	   chantier parapluie line-height. Unitless = chaque élément recalcule sur SON font-size :
	   texte 20px inchangé, <20px se resserre, >20px sans line-height propre s'aère (attendu). */
	font: normal normal normal 20px/1.5 var(--ff-body);
	color: var(--clr-text);
	margin: 0;
	background-color: var(--clr-white);
	}

/* Garde tunnel : le tunnel de commande N'A PAS de line-height propre au niveau
   <body> (body.tunnel ne pose que des variables) — il hérite donc du body global.
   Ses innombrables compensations par élément + les hauteurs de boutons (64px, cf.
   chantier « hauteur réelle des boutons ») ont été calibrées CONTRE le 30px FIXE.
   On épingle donc body.tunnel au 30px d'origine pour que le fix racine reste scopé
   au site hors tunnel (pages auditées : accueil/fiche vin/producteurs/login = OK).
   À retirer si l'on veut plus tard propager le resserrement dans le tunnel (recette
   dédiée requise — le tunnel gèle en accès direct). La spécificité body.tunnel(0,1,1)
   prime sur body(0,0,1), indépendamment de l'ordre de chargement site.css/tunnel.css. */
body.tunnel { line-height: 30px; }

/* #14 (retours Thomas 04/07) — normalize : les contrôles de formulaire n'héritent
   pas de la police par défaut (UA font → Arial). Sans ce reset, tout <button>/<input>/
   <textarea>/<select> à texte (newsletter, tiroirs panier/compte, boutons overlay, etc.)
   s'affichait en Arial au lieu de Montserrat, en décalage avec le reste du site. Les
   règles font-family:inherit ponctuelles ailleurs deviennent redondantes (inoffensives). */
input, button, textarea, select { font-family: inherit; }

/* Parapluie line-height des îlots posés en position:fixed au niveau <body>.
   Hors flux, ils héritent DIRECTEMENT le body { line-height:30px } FIXE (l.119) :
   toute mini-ligne descendante sans line-height propre (appellation, méta, stock,
   valeur du stepper…) se retrouve dans une boîte de 30px → aération excessive et
   steppers surdimensionnés. Sur le blog ce bug n'existe pas car carnet.css remet
   le body à line-height:1.6. On reproduit ici ce même 1.6 pour ces 4 îlots (même
   doctrine parapluie que .wine-card:1.45 / .cc-verify-banner:1.45). Les enfants qui
   posent déjà leur line-height (nom:1.3, appel-vide:1.25…) gardent le leur. */
#cart-drawer, #cart-added, #cart-toast, #account-drawer { line-height: 1.6; }

/* titres */
h1 { 
	font: normal normal 600 30px/50px Montserrat;
	letter-spacing: 0px;
	color: var(--c-text);

	margin-top: 0px;
	padding: 8px 0;
	}
h2 { 
	font-family: "Montserrat", Arial, Verdana, sans-serif;
	color: var(--c-text-strong);
	font-size: 1.4em;
	font-weight: bold;
	padding: 5px 0 5px 0;
	margin: 5px 0;
	}

h3 { 
	font-family: "Montserrat", Arial, Verdana, sans-serif;
	color: var(--c-text-strong);
	font-size: 1.2em;
	font-weight: bold;
	margin: 10px;
	}

/* �l�ments */
img { border: 0; }
abbr { border-bottom: 1px dotted #000000; cursor: help; }

strong,b {
	color: var(--c-text-strong);
	}

.centre {
	width: 100%;
	margin: auto;
	text-align: center;
	}

.texte {
	margin-top: 5px;
	margin-left: 10px;
	}

.texte-h3 {
	margin-left: 10px;
	border-left: 1px solid #ccc;
	padding-left: 5px;
	}

.sanspuces {
	list-style-type: none;
	}

/* liens standard */
a {
	text-decoration: none;
	color: var(--clr-text);
	}
/* pt13d (29/07) — LA source de rémanence la plus large du site, trouvée par la MESURE
   et non par la lecture : je l'avais écartée comme « trop globale pour y toucher ».
   Le banc (tests/hover-tactile-mesure.js, contexte tactile) a montré le titre d'une
   carte catalogue passer de l'encre #151515 au GRIS #666 après un tap — et y rester.
   Ce défaut global rattrape TOUT lien sans règle de survol propre : au doigt, le
   dernier lien touché se lit comme désactivé. Le conditionner ne change rien au
   desktop, où (hover: hover) est vrai. cf. pt11-survol-tactile. */
@media (hover: hover) {
a:hover {
	color: #666;
	}
}

/* Phase 3 — WCAG 2.1 : focus clavier visible (critère 2.4.7) */
:focus-visible {
	outline: 3px solid var(--clr-ink);
	outline-offset: 2px;
}

/* Phase 3 — WCAG 2.1 : skip-to-content (critère 2.4.1)
   Pattern sr-only / clip : invisible totalement par défaut (taille 1x1, clip).
   N'apparaît qu'au focus CLAVIER (:focus-visible) pour ne pas se déclencher
   sur un simple tap mobile. */
.skip-link {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
.skip-link:focus-visible {
	position: absolute;
	top: 0;
	left: 0;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip: auto;
	clip-path: none;
	white-space: normal;
	background: var(--clr-ink);
	color: var(--clr-white);
	padding: var(--space-sm) var(--space-md);
	font-weight: bold;
	z-index: 9999;
	outline: none;
}

.centered {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transform: -webkit-translate(-50%, -50%);
	transform: -moz-translate(-50%, -50%);
	transform: -ms-translate(-50%, -50%);
	color:darkred;
	}

.h1 {
		font-family: Roboto, Arial, Verdana, sans-serif;
		color: 	var(--c-text-strong);
		font-size: 1.7em;
		line-height: 1.8em;
		font-weight: bold;
		margin-top: 0px;
		padding: 8px 0;
	}

.h2 {
		font-family: Montserrat, Arial, Verdana, sans-serif;
		color: var(--clr-or-text);
		font-size: 1.4em;
		font-weight: bold;
		padding: 5px 0 5px 0;
		margin: 5px 0;	}
		
/***********************/
/* STRUCTURE           */
/***********************/

#wrappeur {
	width: 100%;
	max-width: 1920px;; 
	text-align: center; 
	margin: auto; 
	display: flex;
	min-height: 70vh;
	position: relative;
	}

/* colonne gauche */
#col-gauche {
	width: 20%;
	min-width: 200px;
	text-align: left;
	}

#closemenuburger {
	display:none;
}

#visuel_home {
  position: relative;
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  aspect-ratio: 4/1;
  background-image:  url("/img/home/visuel_home.jpg");
  background-repeat:no-repeat;
  background-position: center center;
  background-size: cover;
  /* display: flex;
  flex-direction:column;
  justify-content: center;
  */
  font : normal normal normal 50px/50px Montserrat;
  letter-spacing: 0px;
  color: #FFFFFF;
  opacity: 1;
}

#visuel_home_inside {
	display: inline-block;
  background: rgba(0, 0, 0, 0.2);
  padding: 10px;
  border-radius: var(--radius-s);
  margin-left: 120px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  }

#visuel_home span.sub {
	margin-top:5px;
	font : normal normal normal 25px/25px Montserrat;
}

#visuel_home_cta {
	display: inline;
  background-color: white;
  color: var(--c-text);
  padding: 20px;
  position: absolute;
  font: normal normal normal 20px/25px Montserrat;
  bottom: -70px;
  left: 10px;
}

#visuels_home_atouts {
	max-width: 1920px;
	margin-left: auto;
	margin-right: auto;
	display: flex;
	margin-top: 20px;
  flex-direction:row;
  justify-content: center;
  align-items: center;
  padding-left: 0%;
  padding-right: 0%;
}

#visuels_home_atouts p {
	height: 50px;
}

#visuels_home_atouts div {
  width: 19%;
  display: flex;
  flex-direction:column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 10px;
  font: normal normal bold 20px/25px Montserrat;
  letter-spacing: 0px;
  color: var(--c-text);
  opacity: 1;
  text-transform: uppercase;
}

#visuels_home_atouts > div > img {
	width: 30%;
}

#visuels_home_desc {
	width: 100%;
	max-width: 1920px;
	height: 240px;
	display: flex;
	flex-direction:column;
	justify-content: center;
	align-items: center;
	
	background: var(--c-bg-soft) 0% 0% no-repeat padding-box;
	opacity: 1;
	margin-left: auto;
  	margin-right: auto;
	text-align: left;
	font: normal normal 500 40px/50px Montserrat;
	letter-spacing: 0px;
	color: var(--c-text);
	opacity: 1;
	/* padding-left:3%;
	padding-right:3%; */
	margin-bottom: 20px;
}

@media only screen and (max-width: 1130px) {
	#visuels_home_desc, #visuels_home_atouts  {
		display: none;
	}

}

/* Breadcrumb inutile sur la home (affiche juste &nbsp;) */
#page-index #breadcrumb {
	display: none;
}



#visuels_home_desc_tag {
	max-width:1800px;
	 width:92%;
	  margin-left: auto; 
	  margin-right:auto

}

/* colonne droite */
#col-droite {
	width: 20%;
	min-width: 200px;
	min-height: 600px;
	position: absolute;
	right: 3%;
	}


/* contenu central */
#col-centre {
	/* flex-grow: 1; */
	background: #FFFFFF;
	
	padding: 0;
	padding-left: 5%;
	
	margin-top: 20px;
	text-align: left;

	width: 48%
	}

div.accueilcases {
	margin-top: -10px;
	margin-left: auto;
	margin-right: auto;
	display: flex; flex-wrap: wrap;
	font-family: var(--ff-title);
	font-weight: bold;
	font-size: 18px;

}
div.accueilcase {
		flex: 1 0 20%; 
		aspect-ratio: 1 / 1;
		background-color:	#999;
		margin: 2%;
		padding: 20px;
		color: white;
		line-height: 25px;
		text-transform: uppercase;
		display:flex;
		align-items: center;
	}

div.accueilcase a {
	color: white;
}
div.accueilcase a:hover {
	color: #EEE;
}

.accueildroite {
	text-align: right;
	justify-content: right;
}
.accueilcentre {
	text-align: center;
	justify-content:center;
}
.accueilgauche {
	text-align: left;
	justify-content:ileft;
}

#accueilligne {
	background-position-y: center;
  	flex: 1 0 80%;
  	aspect-ratio: 11/3;
}
/***********************/
/* HEADER              */
/***********************/

header {
	margin-top: 10px;
}

/* === HEADER DESKTOP — refonte 2026 (recherche + tél + avis vérifiés) === */
#header_desktop {
	max-width: 1920px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 5% 15px;
	margin-left: auto;
	margin-right: auto;
}

	/* --- GAUCHE : 3 arguments de réassurance empilés --- */
	#header-gauche {
		display: flex;
		flex-direction: column;
		gap: 12px;
		width: 270px;
		flex-shrink: 0;
	}

	#header-gauche .hg-item {
		display: flex;
		align-items: center;
		gap: 12px;
		text-decoration: none;
		color: var(--c-text);
		font: normal normal 500 14px/18px Montserrat;
	}

	@media (hover: hover) {   /* pt13d — cf. pt11-survol-tactile */
		#header-gauche a.hg-item:hover .hg-text,
		#header-gauche .hg-item a:hover {
			color: var(--clr-or-text);
		}
	}

	#header-gauche .hg-icon {
		flex-shrink: 0;
		width: 46px;
		height: 46px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	#header-gauche .hg-icon img,
	#header-gauche .hg-icon svg {
		width: 100%;
		height: auto;
		max-height: 46px;
	}

	#header-gauche .hg-text {
		text-align: left;
		flex: 1;
	}

	#header-gauche .hg-text a {
		color: var(--clr-or-text);
		text-decoration: none;
		font-weight: 600;
	}

	#header-gauche .hg-avis-stars {
		display: block;
		color: #F4B100;
		font-size: 14px;
		letter-spacing: 2px;
		line-height: 1.2;
	}

	#header-gauche .hg-avis-label {
		font-size: 11px;
		color: #888;
		text-transform: uppercase;
		letter-spacing: 0.5px;
	}

	/* --- CENTRE : logo --- */
	#header-centre {
		flex: 0 0 auto;
		text-align: center;
	}

	#header-centre img {
		width: 200px;
		display: block;
		margin: 0 auto;
	}

	/* --- DROITE : recherche + panier + compte --- */
	#header-droite {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: 18px;
		width: 320px;
		flex-shrink: 0;
	}

	.hd-recherche {
		display: flex;
		align-items: center;
		gap: 10px;
		width: 100%;
		border: 0;
		border-bottom: 1.5px solid var(--c-ink);
		background: transparent;
		transition: border-bottom-width .15s, border-bottom-color .15s;
	}

	.hd-recherche:focus-within { border-bottom-width: 2px; border-bottom-color: var(--c-ink); }
	.hd-search-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; background: transparent; cursor: pointer; flex-shrink: 0; color: var(--c-ink); }
	.hd-search-btn:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 2px; border-radius: var(--radius-s); }
	.hd-search-ico { width: 18px; height: 18px; color: var(--c-ink); flex-shrink: 0; }

	.hd-recherche input[type="search"] {
		flex: 1 1 auto;
		min-width: 0;
		border: 0;
		outline: none;
		padding: 0 2px 7px;
		font: normal normal 400 14px/1.2 Montserrat;
		color: var(--c-text);
		background: transparent;
	}

	.hd-recherche input[type="search"]::placeholder {
		color: #9a8e78;
	}

	#header-droite .icones {
		display: flex;
		margin-top: 0;
		width: auto;
		align-items: flex-start;
	}

	.margindroite {
		margin-right: 24px;
	}

	#header-droite .icone {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: start;
	}

	#header-droite .icone div {
		width: 90px;
		font: normal normal 500 14px/18px Montserrat;
		text-align: center;
		letter-spacing: 0px;
		color: var(--c-text);
	}

	#header-droite .icone img {
		width: 56px;
	}

	/* Helper accessibilité — label de recherche masqué visuellement */
	.visually-hidden {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}











/* menus colonne gauche dans menus.css */

#entete {
	color: white;
	background-color: red;
	border-radius: var(--radius-s) var(--radius-s) 0 0;
	margin-bottom: 0;
	width: 200px;
	padding: 3px;
	margin: auto;
	text-align: center
	}

/* 🧨 CLS (27/07) — REPLI MÉTRIQUE DU BANDEAU D'ANNONCE.
   Le bandeau est le premier bloc du flux : toute variation de SA hauteur pousse la page
   entière. Or son texte passe d'UNE à DEUX lignes quand Montserrat (Google Fonts,
   display=swap) remplace la police de repli — Montserrat est ~11 % plus large qu'Arial.
   Mesuré au banc iPhone 13 sur dev, message BO du jour : 349,8px en Arial pour 350px
   utiles (une ligne, à 0,2px près) contre 390,1px en Montserrat (deux lignes), soit un
   saut de 38,5 → 56,1px APRÈS le premier rendu.
   On donne donc au repli la largeur de Montserrat : `size-adjust: 111 %` (rapport mesuré
   sur des phrases réelles : 1,098 à 1,115 ; 1,166 sur l'alphabet complet). Le texte de
   repli s'affiche 11 % plus grand pendant la fraction de seconde du chargement — c'est le
   prix, et il est moins cher qu'un saut de 17px sur toute la page.
   `line-height: 1.35` étant sans unité, la hauteur de ligne ne dépend pas de la police :
   seule la LARGEUR décide du nombre de lignes, donc de la hauteur. D'où le seul
   size-adjust, sans ascent/descent-override.
   Portée volontairement limitée à ce bandeau : c'est le seul bloc dont la hauteur pousse
   toute la page (CLS mesuré ailleurs : 0,007 sur l'accueil, 0 sur une page de contenu).
   Dégradation : sur un appareil sans Arial/Helvetica/Liberation (Android → Roboto, un peu
   plus étroit), l'ajustement est moins exact mais reste dans le bon sens. Aucun repli
   disponible → la famille est ignorée et on retrouve le comportement d'avant. */
@font-face {
	font-family: 'Montserrat repli';
	src: local('Arial'), local('Helvetica'), local('Liberation Sans'), local('Roboto');
	size-adjust: 111%;
	font-display: swap;
	}

/* pt8 — bandeau d'annonce global (ex-#conges). Crème + filet or, pleine largeur,
   au-dessus du header, non-sticky. Texte piloté back-office (message_bandeau).

   🎯 LE FILET OR EST EN BAS, PAS EN HAUT — ne pas le remonter (retour Thomas 29/07).
   Il était en `border-top`, donc collé au bord du viewport : le seul endroit de la page
   que personne ne regarde. Or la couture qui compte est en BAS (crème #F4EFE4 → header
   blanc, jadis séparés par 1px de --c-line) : elle ne se lisait plus depuis la suppression
   de la barre encre qui fermait le haut de page (.m-promo + .header-top, pt2 du 28/07).
   Descendu en `border-bottom`, le MÊME filet sépare enfin du header ET devient visible.
   La ligne grise --c-line n'a plus d'objet : le filet la remplace. Le crème touche donc
   le bord haut du viewport, sans liseré — c'est voulu.
   Vaut desktop ET mobile : cette règle est la SEULE déclaration de .cc-annonce (aucune
   media query ne la surcharge ; celle de ≤1130px juste dessous ne vise que .cc-annonce__in).
   ⚠ Bordures 2+1 → 0+2 : le bandeau perd 1px. Sans effet, la hauteur étant mesurée en JS
   (index.php, --cc-header-mobile-top) et non écrite en dur. */
.cc-annonce {
	width: 100%;
	background: var(--c-bg-soft);
	border-bottom: 2px solid var(--c-accent);
	color: var(--c-ink);
	font-weight: 500;
	}
.cc-annonce__in {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 11px var(--space-md);
	text-align: center;
	font-size: 14px;
	line-height: 1.35;
	/* Repli métrique : cf. @font-face « Montserrat repli » juste au-dessus. Il ne sert
	   qu'entre le premier rendu et l'arrivée de Montserrat — après, la première famille
	   du stack gagne et rien ne change. */
	font-family: 'Montserrat', 'Montserrat repli', Arial, Verdana, sans-serif;
	}
@media (max-width: 1130px) {
	.cc-annonce__in { padding: 9px var(--space-md); font-size: 13px; }
	}
/**********************
 CADRES NOUVEAUTE ET CC
*********************/
.encart {
	text-align: left;
	margin-top: 30px;
	margin-bottom: 50px;
	clear: both;
	font: normal normal 600 20px/30px Montserrat;
	display: flex;
	position: relative;
	}

.encart1::before {
	content: "";
	position: absolute;
	top: -15px; /* Distance réglable au-dessus */
	left: -25px; /* Distance réglable à gauche */
	right: -40px; /* Distance réglable à droite */
	bottom: -15px; /* Distance réglable en bas */
	border: 10px double black; /* Propriétés du cadre */
	pointer-events: none; /* Empêche le cadre d'interférer avec les clics */
	z-index: -1; /* Place le cadre derrière le div */
} 

	
.encart_infos {
	flex-grow: 1;
	width: 70%;	
	position:relative;
	height: 250px;
	z-index: 1;
}



@media only screen and (max-width: 1280px) {	

	.encart div {
		margin-top: 0px;
	  }

	.encart1::before {
		top: 0px; /* Distance réglable au-dessus */
	} 

	
	.encart_infos {
		height: 250px;
	}
	
}





.encart_droite_footer {
	position:absolute;
	bottom: 10px;
}
	.encart .h2 {
		text-align: left;
		font: normal normal normal 60px/77px Montserrat;
		letter-spacing: 0px;
		color: var(--c-text);
		opacity: 1;
		text-decoration: none;
		
		}
	.encart div {
		margin-top: 0px;
		}
	.encart .encart_produit {
		margin-top: -5px;
	}
	.encart .encart_produit a {
		color: var(--c-text);
		display: block;
		text-transform: capitalize;
		line-height: 25px;
		}
	.encart .encart_produit a:hover {
		color: #666;	
				
		}
	.encart .encart_couleur {
		margin-top: 5px;
		margin-bottom: 28px;		
		

		
		}

	.encart .encart_cuvee {
		margin-top: 1px;
		font-style: italic;
		font: italic normal 600 18px/30px Montserrat;
		}

	.encart .encart_producteur  {
		margin-top: 0px;
		font-style: italic;
		font: italic normal 600 18px/30px Montserrat;
		}
	

	.encart .encart_producteur a,	.encart .encart_producteur a:hover {
		color: var(--c-text);	
		}

	.encart .encart_couleur,#col-droite .encart .encart_millesime,#col-droite .encart .encart_cuvee {
		color: var(--c-text);
		}
	.encart .encart_photo {
		top:45px;
		flex-grow: 1;
		position:absolute;
		right: 0px;
		z-index: 10;
		}

	.encart_photo > a > img {
			width: 50px;
			z-index: 0;
	}

	.encart_photo_picto img {
		width: 100%;
		
		}

	.encart_photo_picto {
		position:absolute;
		top: 5px;
		right:-28px;
		width: 40px;
		height: 40px;
	}
	.encart .encart_prix {
		text-align: left;
		font: normal normal bold 20px/30px Montserrat;
		letter-spacing: 0px;
		color: var(--c-text);
		opacity: 1;
		}
	.encart .encart_prix_montant {
		color: var(--c-text);
		}

	@media only screen and (max-width: 1680px) {

		.encart {
			margin-top: 55px;
			font: normal normal 600 18px/30px Montserrat;
		}

		.encart .encart_photo {
			top:60px;
			flex-grow: 1;
			position:absolute;
			right: 0px;
		}
		
		.encart .h2 {
			font: normal normal normal 50px/50px Montserrat;
		}
  
		.encart .encart_prix {
			font: normal normal bold 18px/30px Montserrat;
			
		  }

	}

	@media only screen and (max-width: 1280px) {	
		
		.encart .encart_produit {
			margin-top: -30px;
		  }

		.encart .h2 {
			font: normal normal normal 50px/50px Montserrat;
    		margin-bottom: 30px;
		}

		.encart {
			font: normal normal 600 18px/30px Montserrat;
			margin-top: 50px;
		}

		.encart .encart_prix {
			font: normal normal bold 20px/30px Montserrat;
		}
	}

/* encadré actualités */
#actualites {
	border-top: 1px solid var(--c-border-input);
	padding-top: 10px;
	margin-left:auto;
	margin-right:auto;
	margin-bottom: 10px;
	text-align: left;
	}
	#actualites h1 {
		margin: 0;
		}
	#actualites ul {
		list-style: none;
		padding: 0;
		display:flex;
		flex-wrap: wrap;
		justify-content: center;
		margin-left: auto;
		margin-right: auto;
		}
		#actualites li {
			width: 190px;
			border-left: 1px solid var(--c-border-input);
			padding-left: 10px;
			padding-right: 10px;
			margin-bottom: 10px;
			}

/******************
 LISTEs PRODUITS
******************/

.liste-vins {
	list-style-type: none;
	padding-left: 0;
	margin-left: 0;
	}
	.liste-vins li {
		width:100%;
		margin-bottom: 8px;
		margin-left: 0;
		border-bottom: 2px solid var(--c-border-input);
		height: 28px;
		line-height: 26px;
		display: table;
		}
	.liste-vins a {
		}
	@media (hover: hover) {   /* pt13d — cf. pt11-survol-tactile */
	.liste-vins a:hover {
		color: var(--clr-or-text);
		}
	}
	.liste-vins .prix {
		color: var(--c-text-strong);
		width: 60px;
		text-align: right;
		display: table-cell;
		}

	.liste-vins .libelle {
		/* display:table-cell; */
		text-align: left;
		font: normal normal 500 20px/30px Montserrat;
		letter-spacing: 0px;
		color: var(--c-text);
	}

	.prix_normal {
		color: var(--c-text-strong);
		font-size: 90%;
		font-weight: normal;
		text-decoration: line-through;
		}
	.liste-vins .addtocart {
		width: 90px;
		/* float: right; */
		/*margin-left: 10px;*/
		display: table-cell;
	
		text-align: right;
		}
	.liste-vins .details {
		width: 60px;
		/*float: right;*/
		margin-left: 5px;
		font-size: 0.8em;
		display: table-cell;
		}
	.liste-vins .details a {
			color: #666;
		}
	@media (hover: hover) {   /* pt13d — cf. pt11-survol-tactile */
	.liste-vins .details a:hover {
				color: var(--clr-or-text);
		}
	}
	/* Phase 3 — remplace $(".liste-vins li:last-child").css("border-bottom","none") en JS */
	.liste-vins li:last-child {
		border-bottom: none;
	}
/******************
 PANIER
******************/

#liste-panier {
	list-style-type: none;
	padding-left: 0;
	margin-left: 0;
	}
	#liste-panier li {
		margin-bottom: 8px;
		margin-left: 0;
		border-bottom: 2px solid var(--c-border-input);
		/*height: 28px;*/
		line-height: 26px;
		display:flex;
		}

	#liste-panier a {
			color: #000;
			order: 2;
			flex-grow: 1;
			}

			
	#liste-panier .imgcontainer {
		order: 1;
		margin-right: 10px;
	}
		
	#liste-panier .imgcontainer img {
		margin-top:8px;
	}

	@media (hover: hover) {   /* pt13d — cf. pt11-survol-tactile */
	#liste-panier a:hover {
			color: var(--clr-or-text);
	}
	}

	#liste-panier .prix {
		color: var(--clr-or-text);
		width: 60px;
		/* float: right; */
		text-align: right;
		order:4;
		}
	#liste-panier .addtocart {
		width: 120px;
		/* float: right; */
		margin-left: 10px;
		text-align: right;
		order:3;
		}
#page-panier .valeur.total,#page-panier .entete.total {
	color: var(--clr-or-text);
	font-weight: bold;
	}

#page-panier ul.compte_voir li {
	list-style: none;
}

.offert { 
	background: var(--c-text-strong); 
	color: #FFF;
	text-transform: uppercase; 
	font-size: 0.9em;
	padding: 2px;
	}

.niveau_franco { 
	background: #666; 
	color: #FFF;
	font-size: 0.9em;
	padding: 2px;
	}

/******************
 PRODUCTEURS
******************/

#liste-producteurs {
	list-style-type: none;
	padding-left: 0;
	margin-left: 20px;
	}
	#liste-producteurs li {
		margin-bottom: 8px;
		margin-left: 0;
		border-bottom: 2px solid #EEE;
		line-height: 26px;
		padding-left: 20px;
		}
#album-producteur {
	margin-top: 10px;
	margin-left: 0;
	padding: 0;
	}
	#album-producteur li {
		float: left;		
		list-style: none;
		width: 220px;
		min-height: 130px;
		text-align: left;
		}
		#album-producteur li img {
			border-radius: var(--radius-s);
			box-shadow: 3px 3px 10px var(--c-border-input);
			}
	#album-producteur .legende {
		font-size: 0.8em;
		margin-top: 5px;
		color: #555;
		text-align: center;
		}

#producteur-appell, #producteur-bouteilles {
	font-weight: bold;
	color: var(--clr-or-text);
	font-size: 1.4em;
	font-family: Montserrat, Arial, Verdana, sans-serif;
	/* float: left; */	
	max-width: 450px;
	/* height: 45px; */
	margin-top: 10px;	
	}
	#producteur-bouteilles {
		text-align: right;
		width: 190px;
		}

#producteur-infos {
	clear: left;
	margin-top: 10px;
	margin-bottom: 8px;
	font-size: 0.88em;
	color: #444;
	}
	.prod-info-item {
		display: inline-block;
		margin-right: 18px;
		white-space: nowrap;
		}

#producteur-bloc1, #producteur-bloc2 {
	margin-top: 20px;
	float: left;
	width: 320px;
	font-size: 0.9em;
	}
#producteur-bloc2 {
	margin-left: 20px;
	}
	#producteur-bloc1 h2,#producteur-bloc2 h2 {
		font-weight: bold;
		color: var(--clr-or-text);
		font-size: 1.3em;
		font-family: Montserrat, Arial, Verdana, sans-serif;
		}
#producteur-coordonnees {
	clear: left;
	margin-left: 340px;
	font-family: Montserrat, Arial, Verdana, sans-serif;
	color: #000;
	font-size: 1.3em;
	}
	

/******************
 APPELLATIONS
******************/
#page-appellations #col-centre h1 {
	font-family: "Montserrat", Arial, Verdana, sans-serif;
	color: #262626;
	margin-bottom: 0;
	}
#col-centre h2.liste-vins {
	background-color: var(--c-bg-soft);
		padding-left:5px;
		padding-top: 10px;
		padding-bottom: 10px;
		text-align: left;
		font: normal normal normal 60px/50px Montserrat;
		letter-spacing: 0px;
		color: var(--c-text);
		opacity: 1;
	}
	

/******************
 FORMULAIRES GENERIQUES
******************/
.entete {
	margin: 0 5px 0 60px;
	padding-right: 10px;
	text-align: right;
	border-right: 2px solid #C8C8C8;
	color: #707070;
	float: left;
	width: 170px;
	/*height: 30px;*/
	line-height: 30px;
	}
.valeur {
	/* height: 30px; */
	line-height: 30px;
	color: #000;
	}

/******************
 COMPTE
******************/
/* Hero "Mon compte" */
.compte-hero {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 0 24px 0;
	border-bottom: 1px solid #eee;
	margin-bottom: 24px;
}
.compte-hero-text { min-width: 0; }
.compte-hello {
	margin: 0;
	font-size: 1.1em;
	line-height: 1.3;
}
.compte-hello strong { color: var(--clr-or-text); }
.compte-since {
	margin: 4px 0 0 0;
	font-size: 0.85em;
	color: #777;
}
.compte-logout {
	flex-shrink: 0;
	padding: 10px 16px;
	border: 1px solid #ccc;
	border-radius: var(--radius-s);
	text-decoration: none;
	font-size: 0.9em;
	color: #555;
	white-space: nowrap;
}
.compte-logout:hover {
	border-color: var(--clr-or);
	color: var(--clr-or-text);
}

/* Cartes "Mon compte" */
.compte-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}
.compte-card {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 16px;
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: var(--radius-m);
	text-decoration: none;
	color: inherit;
	transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
/* pt13d — SCINDÉ : :focus-visible (clavier) reste hors media. cf. pt11-survol-tactile. */
.compte-card:focus-visible {
	border-color: var(--clr-or);
	box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
@media (hover: hover) {
	.compte-card:hover {
		border-color: var(--clr-or);
		box-shadow: 0 2px 8px rgba(0,0,0,0.06);
	}
}
.compte-card:active { transform: scale(0.99); }
.compte-card-icon {
	width: 44px;
	height: 44px;
	flex-shrink: 0;
}
.compte-card-body {
	flex: 1;
	min-width: 0;
}
.compte-card-title {
	margin: 0;
	font-size: 0.85em;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #888;
	font-weight: 600;
}
.compte-card-value {
	margin: 4px 0 2px 0;
	font-size: 1.25em;
	font-weight: 600;
	color: #222;
	overflow-wrap: anywhere;
	line-height: 1.25;
}
.compte-card-value-sm {
	font-size: 1em;
	font-weight: 500;
}
.compte-card-value.compte-card-empty {
	color: #999;
	font-weight: 500;
}
.compte-card-hint {
	margin: 2px 0 0 0;
	font-size: 0.85em;
	color: #777;
	line-height: 1.3;
}
.compte-card-arrow {
	flex-shrink: 0;
	font-size: 1.6em;
	color: #ccc;
	line-height: 1;
}
.compte-card:focus-visible .compte-card-arrow { color: var(--clr-or); }   /* pt13d — parité clavier, hors media */
@media (hover: hover) { .compte-card:hover .compte-card-arrow { color: var(--clr-or); } }   /* pt13d — cf. pt11-survol-tactile */

/* Layout 2 colonnes sur grand écran */
@media (min-width: 720px) {
	.compte-cards { grid-template-columns: 1fr 1fr; }
}

/* =====================================================================
   LOT 2 — REFONTE MON COMPTE (dashboard, sidebar, sous-pages, adresses)
   d'après mockup-mon-compte.html — couleurs codées en dur (convention site)
   ===================================================================== */


/* --- Layout grille compte --- */
.account-wrap { padding: 32px 0 40px; }
.account-grid { display: grid; grid-template-columns: 230px 1fr; gap: 28px; align-items: start; }

/* --- Sidebar --- */
/* Lot 2bis : la sidebar ne suit plus le scroll (demande Thomas) → position statique. */
.account-sidebar { position: static; }
.sidebar-nav { background: #fff; border: 1px solid var(--c-border-input); border-radius: var(--radius-m); overflow: hidden; }
/* #7 — sidebar v2 « avec présence » : en-tête d'identité + entrées larges. */
.sidebar-id { display: flex; align-items: center; gap: 13px; padding: 18px 18px 16px; border-bottom: 1px solid var(--c-line); background: linear-gradient(180deg, #fffdf9, #fff); }
.sidebar-av { flex: 0 0 46px; width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Montserrat', Arial, sans-serif; font-weight: 700; font-size: 16px; line-height: 1; color: var(--clr-or-text); background: color-mix(in srgb, var(--clr-or) 16%, #fff); border: 1px solid color-mix(in srgb, var(--clr-or) 35%, #fff); }
.sidebar-who { min-width: 0; display: flex; flex-direction: column; }
.sidebar-name { font-family: 'Montserrat', Arial, sans-serif; font-weight: 700; font-size: 15px; line-height: 1.25; color: var(--clr-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-mail { font-size: 12px; color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-nav-item {
	display: flex; align-items: center; gap: 13px;
	padding: 14px 18px; border-left: 3px solid transparent;
	cursor: pointer; transition: background 0.15s, color 0.15s;
	font-size: 15px; font-weight: 500; color: var(--c-text-strong); text-decoration: none;
	/* #2 (retours 20260702) — sans nowrap, le badge (margin-left:auto) réduit la
	   boîte restante du libellé et « Mes commandes » passait sur 2 lignes alors
	   qu'il reste de la place. nowrap garde chaque entrée sur une seule ligne. */
	white-space: nowrap;
}
/* pt11 (retours 28/07) — survol réservé aux pointeurs qui survolent (cf. le bloc de
   doctrine en fin de feuille, marqueur pt11-survol-tactile). .active reste hors media. */
@media (hover: hover) { .sidebar-nav-item:hover { background: var(--c-bg-soft); } }
.sidebar-nav-item.active { background: color-mix(in srgb, var(--clr-or) 12%, #fff); color: var(--clr-or-text); border-left-color: var(--clr-or); font-weight: 600; }
.sni-ico { font-size: 18px; width: 20px; flex: 0 0 20px; display: flex; align-items: center; justify-content: center; }
.sidebar-nav-item.active .sni-ico { color: var(--clr-or); }
.sni-badge { margin-left: auto; background: var(--clr-ink); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 10px; }
/* #33 (retours 20260702) : « 4,00 € » cassait avec le « € » seul sur la 2e ligne
   quand la ligne « Ma cagnotte » est active (sidebar étroite). nowrap garde le
   montant insécable, flex-shrink:0 l'empêche d'être compressé sous le libellé. */
.sni-amount { margin-left: auto; font-size: 13.5px; font-weight: 700; color: var(--clr-or-text); white-space: nowrap; flex-shrink: 0; }
.sidebar-nav-item.logout { border-top: 1px solid var(--c-line); color: var(--c-text); font-size: 14px; }
/* pt19 (retours 20260718) — retrait du hover rouge/rose (#c0392b/#fff5f5, hex en dur)
   jugé laid : « Se déconnecter » retombe sur le hover neutre générique ci-dessus
   (.sidebar-nav-item:hover { background: var(--c-bg-soft) }). Pas de couleur dédiée. */

/* --- En-tête de section --- */
.section-header { display: flex; align-items: center; justify-content: space-between; margin: 24px 0 16px; gap: 12px; flex-wrap: wrap; }
.section-header:first-child { margin-top: 0; }
.account-main .section-title { font-family: 'Montserrat', Arial, sans-serif; font-size: 17px; font-weight: 700; color: var(--c-text-strong); margin: 0; }
.section-link { font-size: 13px; font-weight: 700; color: var(--clr-or-text); text-decoration: none; white-space: nowrap; }
.section-link:hover { text-decoration: underline; }

/* --- Lien secondaire — doctrine « flèche » (arbitrage Thomas 26/07) ---------
   Un lien de sortie porte son affordance dans SON STYLE — or + souligné —
   jamais dans un glyphe « → » accolé au libellé. La flèche reste réservée à
   l'opérateur « devient/vers » (« 3 → 2 bouteilles », « A → Z ») et aux
   contrôles directionnels SANS libellé (pagination, article suivant).

   Couvre deux usages :
     .cc-link-sec         — liens de sortie nus (form_send, compte, tunnel
                            invité, suggestion d'appellation du catalogue) ;
     .cc-see-all          — « voir tout » d'en-tête de section (accueil), qui
                            n'avait jusqu'ici que la couleur pour se signaler.
   text-decoration-color suit currentColor : aucune couleur n'est redéclarée,
   le trait reste accordé au lien quel que soit son contexte.
   NB : .section-link ci-dessus est MORTE (0 usage) — candidate au ménage.

   🧨 SPÉCIFICITÉ DOUBLÉE (`.cc-link-sec.cc-link-sec`, recette du 27/07) — pourquoi.
   La classe seule pèse (0,1,0) et perdait contre DEUX resets génériques du site,
   tous deux à (0,1,1) :
     • auth.css:56  `.auth-page a { color:inherit; text-decoration:none }`
     • site.css:223 `a:hover { color:#666 }`
   Or `.auth-page` habille précisément l'écran de conversion du tunnel invité
   (checkout_invite.inc.php:326), l'un des liens visés par cette règle : mesuré en
   cascade réelle, le lien y sortait GRIS #525252 et SANS soulignement — il perdait
   sa flèche sans rien récupérer. La classe étant une affordance de système, elle
   doit survivre aux resets d'habillage : on la double pour la porter à (0,2,0)
   (et (0,3,0) au survol) plutôt que d'énumérer les contextes à contrer un par un,
   liste qu'il faudrait rallonger à chaque nouvel habillage. */
.cc-link-sec.cc-link-sec { color: var(--c-accent-text); font-weight: 600; }
.cc-link-sec--sm { font-size: 13px; }
.cc-link-sec.cc-link-sec,
#homepage-content .cc-see-all {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}
.cc-link-sec.cc-link-sec:hover,
#homepage-content .cc-see-all:hover {
	color: var(--c-ink-hover);
	text-decoration-color: currentColor;
}



/* --- Tableau / cartes commandes --- */
.orders-card { background: #fff; border: 1px solid var(--c-border-input); border-radius: var(--radius-m); overflow: hidden; margin-bottom: 24px; }
.orders-head { display: grid; grid-template-columns: 1fr 120px 100px 110px 140px; gap: 12px; padding: 11px 18px; background: #EEE; border-bottom: 1px solid var(--c-border-input); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px; color: var(--c-text-strong); }
.order-row { display: grid; grid-template-columns: 1fr 120px 100px 110px 140px; gap: 12px; padding: 14px 18px; border-bottom: 1px solid #f5f5f5; align-items: center; transition: background 0.15s; }
.order-row:last-child { border-bottom: none; }
@media (hover: hover) { .order-row:hover { background: #fafafa; } }   /* pt11 — cf. pt11-survol-tactile */
.order-num { font-weight: 700; color: var(--clr-or-text); font-size: 13.5px; }
.order-items { font-size: 12px; color: #999; margin-top: 2px; }
.order-date { font-size: 13px; color: var(--c-text); }
.order-total { font-family: 'Montserrat', Arial, sans-serif; font-size: 14px; font-weight: 700; color: var(--c-text-strong); }
.order-status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; background: transparent; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.order-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.status-shipped { color: #5b6470; }
.status-delivered { color: #2f6b46; }
.status-preparing { color: #5b6470; }
.status-cancelled { color: #8a8175; }
.order-actions { display: flex; gap: 6px; flex-wrap: wrap; }
/* box-sizing:border-box + line-height:1 (chantier hauteur réelle boutons) : sans eux le
   padding s'empile sur min-height → S rendait 48px au lieu de 36 (44 mobile). */
.order-btn { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; line-height: 1; min-height: var(--btn-sm-min-h); padding: var(--btn-sm-pad); border-radius: var(--radius-s); font-family: 'Montserrat', Arial, sans-serif; font-size: var(--btn-sm-font); font-weight: var(--btn-weight); cursor: pointer; transition: background 0.15s; border: none; text-decoration: none; }
@media (max-width: 768px) { .order-btn { min-height: var(--btn-min-h); } }
.order-btn-primary { background: var(--clr-ink); color: #fff; }
.order-btn-primary:hover { background: var(--clr-ink-dark); }
.order-btn-neutral { background: #EEE; color: var(--c-text-strong); }
.order-btn-neutral:hover { background: #ddd; }
.orders-empty { padding: 24px 18px; color: #999; text-align: center; }

/* carte commande (sous-page commandes) */
.order-card { background: #fff; border: 1px solid var(--c-border-input); border-radius: var(--radius-m); padding: 18px 20px; margin-bottom: 16px; }
.order-card h3 { display: inline-block; margin: 8px 0; }

/* --- Profil / cartes --- */
/* U5 (audit 2026-06-15) — onglets de la page « Mon profil » (Identité / Sécurité /
   Préférences). Les sections existantes deviennent des panneaux. */
/* #6 — onglets profil fusionnés : sections empilées séparées par un filet fin. */
.seprule { height: 1px; background: var(--c-line); margin: 26px 0; }

/* Indice « champ verrouillé » (e-mail = identifiant de connexion). */
.lock-hint { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: #999; margin-top: 5px; }
.lock-hint svg { width: 13px; height: 13px; }

/* #9 (Thomas 07/07) — align-items:start : cocher « Je commande pour une entreprise »
   déplie les champs société/TVA dans la carte Identité (gauche). Sans ceci, la grille
   étire aussi la carte Contact (droite) à la même hauteur → grand vide sous Contact. */
.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 24px; align-items: start; }
.profile-card { background: #fff; border: 1px solid var(--c-border-input); border-radius: var(--radius-m); padding: 20px; }
/* Cases à cocher du front, redessinées « maison » (appearance:none) : liseré à l'état
   DÉCOCHÉ, fond plein + coche blanche à l'état coché. S'applique à TOUTES les cases du
   front sans balisage case par case ; n'atteint PAS le back-office (qui charge le
   /site.css legacy, pas ce v4). Sélecteur type=checkbox uniquement → radios intacts.
   La coche est un SVG de fond centré → indépendante de la taille de la case (les
   contextes vont de 16 à 19px ; box-sizing:border-box pour que le liseré n'élargisse
   pas la case). Rayon fixe 4px : validé au visuel — un checkbox en --radius-s (8px)
   paraîtrait trop rond.

   pt4 (retours 20260722) — TEINTE BASCULÉE DE L'OR VERS L'ENCRE. L'or (rendu validé
   le 11/07) colorait un état binaire où il n'apporte rien, et son accumulation diluait
   l'accent là où il est utile : montants, liens, médailles. Le tunnel avait déjà tranché
   dans ce sens en surchargeant cette règle (Lot D checkout-2col) ; ici on remonte cette
   décision au niveau GLOBAL et la surcharge tunnel devient inutile — elle est retirée.
   🧨 Ne PAS tenter de repeindre ces cases via `accent-color` : sans effet, la propriété
   ne s'applique qu'aux contrôles NATIFS et `appearance:none` ci-dessous les dénative.
   Les seuls leviers sont border-color / background-color / outline-color. */
input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px; flex: 0 0 auto; box-sizing: border-box;
  border: 1.6px solid var(--clr-ink); border-radius: 4px;
  background-color: #fff; background-repeat: no-repeat; background-position: center; background-size: 72%;
  cursor: pointer; vertical-align: middle;
  transition: background-color .12s ease, border-color .12s ease;
}
input[type="checkbox"]:checked {
  background-color: var(--clr-ink); border-color: var(--clr-ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.4l3 3 6-6.6'/%3E%3C/svg%3E");
}
@media (hover: hover) { input[type="checkbox"]:hover:not(:disabled) { border-color: var(--clr-ink-dark); } }   /* pt13d — cf. pt11-survol-tactile */
input[type="checkbox"]:focus-visible { outline: 2px solid var(--clr-ink); outline-offset: 2px; }
input[type="checkbox"]:disabled { opacity: .5; cursor: not-allowed; }
/* Case « entreprise » (espace compte) : variante INLINE dans un label (case + texte) —
   la classe ne porte plus que la taille et l'alignement vertical, la teinte vient de la
   règle globale ci-dessus. pt4 : `accent-color` retiré (mort depuis appearance:none) et
   classe renommée .cc-check-or → .cc-check-inline, le nom annonçait une couleur fausse. */
.cc-check-inline { width: 17px; height: 17px; cursor: pointer; vertical-align: -4px; margin-right: 5px; }
.pc-title { font-family: 'Montserrat', Arial, sans-serif; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--c-text-strong); margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; }
.pc-edit { font-size: 12px; color: var(--clr-or-text); font-weight: 700; text-transform: none; letter-spacing: 0; cursor: pointer; text-decoration: none; }
@media (hover: hover) { .pc-edit:hover { text-decoration: underline; } }   /* pt13d — cf. pt11-survol-tactile */
.pc-field { margin-bottom: 10px; display: block; }
.pc-field-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: #999; font-weight: 700; margin-bottom: 2px; }
.pc-field-val { font-size: 14px; color: var(--c-text-strong); font-weight: 600; overflow-wrap: anywhere; }
.pc-field-val.pc-empty { color: #b0a99c; font-weight: 500; font-style: italic; }

/* MES ADRESSES — liste sobre (refonte 2026-06-22, direction B / variante B2).
   Remplace les anciennes cartes .addr-block (fond beige, badge bleu,
   repli <details>, tuile pointillée). Lignes séparées par filet fin, liseré or
   pour le rôle par défaut, actions en liens, "Définir par défaut" inline. */
.addr-list { border-top: 1px solid var(--c-line); margin-bottom: 8px; }
/* État vide « Mes adresses » (retour Thomas 20260622-3 #4) — invite sobre. */
.addr-empty { color: var(--c-text-soft, #8a8275); font-size: 13px; padding: 16px 2px; margin: 0; }
.addr-row { display: flex; align-items: flex-start; gap: 18px; padding: 16px 4px 16px 0; border-bottom: 1px solid var(--c-line); position: relative; }
.addr-row.is-default { padding-left: 14px; }
.addr-row.is-default::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; background: var(--clr-or); border-radius: var(--radius-s); }
.addr-body { flex: 1 1 auto; min-width: 0; }
.addr-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; flex-wrap: wrap; }
.addr-label { font-family: 'Montserrat', Arial, sans-serif; font-weight: 700; font-size: 14px; color: var(--c-text-strong); }
.addr-badge { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--clr-or-text); border: 1px solid var(--c-border-struct); border-radius: var(--radius-s); padding: 1px 7px; white-space: nowrap; }
.addr-lines { font-size: 13.5px; line-height: 1.6; color: var(--c-text); }
.addr-setdefault { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.addr-setdefault form { display: contents; margin: 0; }
.addr-setdefault .asd-lbl { font-size: 12px; color: #8a8275; }
.addr-setdefault button { font-family: 'Montserrat', Arial, sans-serif; font-size: 12px; font-weight: 600; color: var(--clr-or-text); background: #fff; border: 1px solid var(--c-border-struct); border-radius: var(--radius-s); padding: 4px 10px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
@media (hover: hover) { .addr-setdefault button:hover { border-color: var(--clr-or); background: #fbf5ec; } }   /* pt13d — cf. pt11-survol-tactile */
.addr-actions { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.addr-actions form { display: contents; margin: 0; }
.addr-action { font-family: 'Montserrat', Arial, sans-serif; font-size: 12.5px; font-weight: 600; color: var(--c-text-strong); background: none; border: none; padding: 0; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
@media (hover: hover) { .addr-action:hover { color: var(--clr-or-text); text-decoration: none; } }   /* pt13d — cf. pt11-survol-tactile */
/* Retour Thomas 10/07 : « Supprimer » dé-dramatisé — plus de rouge (l'icône
   poubelle est CONSERVÉE). Le bouton reprend le look neutre encre/or des autres
   actions (Modifier), la confirmation onsubmit garde le garde-fou. */
.addr-action.del { color: var(--c-text-strong); }
@media (hover: hover) { .addr-action.del:hover { color: var(--clr-or-text); } }   /* pt13d — cf. pt11-survol-tactile */
.addr-add-btn { display: inline-flex; align-items: center; gap: 8px; font-family: 'Montserrat', Arial, sans-serif; font-size: 13px; font-weight: 600; color: var(--c-text-strong); background: none; border: none; border-bottom: 1px solid var(--c-border-struct); padding: 10px 2px; cursor: pointer; text-decoration: none; margin-top: 4px; }
@media (hover: hover) { .addr-add-btn:hover { color: var(--clr-or-text); border-color: var(--clr-or); text-decoration: none; } }   /* pt13d — cf. pt11-survol-tactile */
.addr-add-btn .aac-plus { font-size: 17px; line-height: 1; color: var(--clr-or); }

/* --- Listes & formulaires compte (sous-pages) --- */
.points-list { list-style: none; padding: 0; margin: 0; }
.points-list li { padding: 8px 0; border-bottom: 1px solid #f0f0f0; font-size: 13.5px; }
/* .cagnotte-solde retiré 18/07 : CSS mort (ancien Lot 2, jamais câblé côté PHP —
   la page « Ma cagnotte » utilise .cc-cag-solde). Retiré pour lever la confusion. */
.account-main .grandbouton { cursor: pointer; }
.account-main h2 { font-family: 'Montserrat', Arial, sans-serif; font-size: 17px; font-weight: 700; color: var(--c-text-strong); margin: 24px 0 14px; }
.account-main h3 { font-size: 14px; font-weight: 600; color: var(--c-text); margin: 8px 0; }
.account-main ul.liste { list-style: none; padding: 0; margin: 0; }
.addr-form .pc-field input, .account-main form input.form, .account-main form input.formc { font-family: 'Montserrat', Arial, sans-serif; }

/* --- Responsive --- */
@media (max-width: 900px) {
	.account-grid { grid-template-columns: 1fr; }
	/* #11 — empêche le « grid blowout » : sans min-width:0, une piste 1fr s'élargit à
	   la largeur intrinsèque d'un contenu (ex. input legacy size=40) → débord horizontal. */
	.account-main, .account-sidebar { min-width: 0; }
	.account-sidebar { position: static; }
	/* #7 — sidebar v2 : pas d'accordéon mobile, entrées toujours dépliées. */
	.account-sidebar .sidebar-nav-item { display: flex; }
	.profile-grid { grid-template-columns: 1fr; }
	.orders-head { display: none; }
	.order-row { grid-template-columns: 1fr; gap: 4px; }
}

/**********************************************************************
 LOT 2bis — SOUS-SECTIONS MON COMPTE (primitives nouvelles)
 D'après mockup-mon-compte-sections.html. Tout est scopé sous
 #compte-content pour ne pas entrer en collision avec les classes
 génériques du reste du site (notamment .btn-primary du hero homepage).
 Couleurs codées en dur comme le reste du bloc LOT 2.
**********************************************************************/

/* En-tête de section : sous-titre */
#compte-content .section-sub { font-size: 13px; color: #888; margin-top: 2px; font-weight: 500; }

/* Cartes & formulaires */
#compte-content .card { background: #fff; border: 1px solid var(--c-border-input); border-radius: var(--radius-m); padding: 22px; margin-bottom: 18px; }
#compte-content .card-head { font-family: 'Montserrat', Arial, sans-serif; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--c-text-strong); margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid #f0f0f0; display: flex; align-items: center; justify-content: space-between; gap: 10px; line-height: 1.25; }
#compte-content .card-head .ch-ico { color: var(--clr-or); margin-right: 6px; display: inline-flex; align-items: center; vertical-align: middle; }

#compte-content .field { margin-bottom: 15px; }
#compte-content .field:last-child { margin-bottom: 0; }
#compte-content .field-lbl { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: #8a8a8a; font-weight: 700; margin-bottom: 5px; }
#compte-content .field-lbl .req { color: var(--clr-or-text); }
#compte-content .field-input,
#compte-content .field-select { width: 100%; box-sizing: border-box; font-family: 'Montserrat', Arial, sans-serif; font-size: 14px; color: var(--c-text-strong); background: #fcfcfb; border: 1px solid var(--c-border-input); border-radius: var(--radius-s); padding: 10px 13px; outline: none; transition: border-color 0.15s, box-shadow 0.15s, background 0.15s; }
#compte-content .field-input::placeholder { color: #bbb; }
#compte-content .field-input:focus,
#compte-content .field-select:focus { border-color: var(--clr-or); background: #fff; box-shadow: 0 0 0 3px rgba(184,138,62,0.18); /* alpha 0.18 intentionnel : doré + clair que bordeaux, compensé pour visibilité focus a11y */ }
#compte-content .field-input:disabled { background: #EEEEEE; color: #999; cursor: not-allowed; }
#compte-content .field-hint { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: #999; margin-top: 5px; }
#compte-content .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ===== #39 — Largeur des champs « au contenu » (cohérence avec le tunnel, Lot 4 :
   méthode « match input length » — largeur = Nch + 28px de padding/bordure ; un select
   ajoute ~52px pour le chevron). Empêche l'étirement des champs sur les cartes larges
   de l'espace compte (adresses, profil, sécurité). ===== */
#compte-content .field,
#compte-content .field-row { max-width: 600px; }
/* Paires dimensionnées au contenu (colonnes explicites, cf. tunnel.css --civnom/--cp…).
   minmax(0, …) au lieu d'une largeur fixe : sur une carte plus étroite que la somme des
   deux pistes (grille profil 2 colonnes en desktop), des pistes fixes ne rétrécissent pas
   et débordent de la carte (retour Thomas 29/06). minmax(0, X) garde la largeur « au
   contenu » quand il y a la place, et autorise le rétrécissement quand la carte est trop
   étroite — couplé au min-width:0 sur .field plus bas. */
#compte-content .field-row.field-row--civsoc    { grid-template-columns: minmax(0, calc(7ch + 52px)) minmax(0, calc(30ch + 28px)); }
#compte-content .field-row.field-row--nomprenom { grid-template-columns: minmax(0, calc(18ch + 28px)) minmax(0, calc(18ch + 28px)); }
#compte-content .field-row.field-row--cpville   { grid-template-columns: minmax(0, calc(7ch + 28px)) minmax(0, calc(22ch + 28px)); }
#compte-content .field-row.field-row--paystel   { grid-template-columns: minmax(0, calc(18ch + 28px)) minmax(0, calc(15ch + 28px)); }
/* Champs pleine ligne : plafond au contenu attendu (sinon width:100% les étire). */
#compte-content #addr_label,
#compte-content #pf-tva            { max-width: calc(22ch + 28px); }
#compte-content #addr_adresse1,
#compte-content #addr_adresse2     { max-width: calc(34ch + 28px); }
#compte-content #addr_societe,
#compte-content #pf-societe,
#compte-content #pf-email,
#compte-content #newpw,
#compte-content #sec-ident         { max-width: calc(30ch + 28px); }
#compte-content #pf-mobile         { max-width: calc(15ch + 28px); }
/* #5 (22/06) — Civilité (standalone .field, pas en paire) bornée au contenu */
#compte-content #pane-identite .field:has(#genre),
#compte-content #pane-identite #genre { max-width: calc(7ch + 52px); }
/* #39 — fin */
/* Anti-débordement : les cellules de grille (profile-card dans .profile-grid,
   .field dans .field-row) ne doivent pas refuser de rétrécir sous leur contenu. */
#compte-content .profile-card,
#compte-content .field { min-width: 0; }
#compte-content .field-pw { position: relative; }
/* L'œil afficher/masquer s'ancre sur .pw-row (= l'input seul), pas sur tout le
   bloc .field-pw qui inclut label + barre de force + critères : sinon top:50%
   le centrait sur l'ensemble du bloc et l'œil flottait au-dessus de l'input
   (retour Thomas #12). */
/* #10 (Thomas 23/06) — la ligne d'input est plafonnée à la même largeur que le
   champ (30ch), sinon l'œil ancré sur .pw-row à right:10px flotte dans le vide à
   droite d'un input plus étroit.
   Retour Thomas 10/07 (œil « toujours décalé ») — cause racine : `ch` se calcule
   dans la police de CHAQUE élément. L'input (#newpw) plafonne à 30ch en Montserrat
   14px (~262px), mais cette div .pw-row héritait la police par défaut → son 30ch
   valait ~334px, donc la ligne dépassait l'input de ~72px et l'œil flottait à
   droite. On aligne la police de la ligne sur celle de l'input : les deux `30ch`
   coïncident, la ligne épouse l'input et l'œil se cale à 10px de son bord droit. */
#compte-content .field-pw .pw-row { position: relative; max-width: calc(30ch + 28px); font-family: 'Montserrat', Arial, sans-serif; font-size: 14px; }
#compte-content .field-pw .pw-toggle { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; line-height: 0; cursor: pointer; color: #999; user-select: none; }
@media (hover: hover) { #compte-content .field-pw .pw-toggle:hover { color: #666; } }   /* pt13d — cf. pt11-survol-tactile */
/* R2 — œil / œil barré (cf auth.css) */
#compte-content .field-pw .pw-toggle .eye-hide { display: none; }
#compte-content .field-pw .pw-toggle.is-revealed .eye-show { display: none; }
#compte-content .field-pw .pw-toggle.is-revealed .eye-hide { display: inline-block; }
/* combogenre() sort un <select class='form'> : on lui applique le look .field-select */
#compte-content .field select { width: 100%; box-sizing: border-box; font-family: 'Montserrat', Arial, sans-serif; font-size: 14px; color: var(--c-text-strong); background: #fcfcfb; border: 1px solid var(--c-border-input); border-radius: var(--radius-s); padding: 10px 13px; outline: none; transition: border-color 0.15s, box-shadow 0.15s, background 0.15s; }
#compte-content .field select:focus { border-color: var(--clr-or); background: #fff; box-shadow: 0 0 0 3px rgba(184,138,62,0.18); /* alpha 0.18 intentionnel : doré + clair que bordeaux, compensé pour visibilité focus a11y */ }

/* Champ en erreur (validation serveur) — « cran doux » (doctrine messages système,
   cf. vague tunnel) : bordure rose DISCRÈTE --fb-no-bd, SANS anneau ni fond rosé.
   Le rouge reste concentré sur le signal utile — texte + icône de .field-err. Au
   focus, le champ reprend l'anneau OR normal (pas d'anneau rouge). .form-req-note =
   mention « * champ obligatoire » en bas de formulaire. */
#compte-content .field.is-error .field-input,
#compte-content .field.is-error .field-select,
#compte-content .field.is-error select { border-color: var(--fb-no-bd); }
#compte-content .field-err { display: flex; align-items: flex-start; gap: 6px;
  color: var(--fb-no-tx); font-size: 11.5px; line-height: 1.3; margin-top: 5px; font-weight: 600; }
#compte-content .field-err::before { content: ""; flex: 0 0 auto; width: 13px; height: 13px; margin-top: 1px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A33327' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v5M12 16h.01'/%3E%3C/svg%3E") center/contain no-repeat; }
#compte-content .form-req-note { font-size: 12px; color: #8a8a8a; margin: 12px 0 0; }
#compte-content .form-req-note .req { color: var(--clr-or-text); }

/* Boutons */
/* #12 (retours Thomas 20260704) — line-height explicite : sans lui, un <a class="btn">
   hérite le line-height:30px FIXE du body (l.108) → 44px de haut, tandis qu'un <button>
   garde le line-height:normal du navigateur → 28px. Dans .cmd-actions (flex, align-items
   stretch par défaut), le <a> « Payer maintenant » étirait le <button> « Voir le détail »
   voisin à 44px sur la carte à payer, alors qu'en solo il restait à 28px → tailles
   incohérentes entre cartes. line-height:1.2 aligne <a> et <button> à la même hauteur. */
/* box-sizing:border-box (chantier hauteur réelle boutons) : 44px rendus au lieu de 64.
   line-height:1.2 conservé (raison #12 ci-dessus) : 1.2×14 passe sous le plancher 44. */
#compte-content .btn { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; gap: 7px; font-family: 'Montserrat', Arial, sans-serif; font-weight: var(--btn-weight); font-size: var(--btn-font); line-height: 1.2; letter-spacing: var(--btn-letter); border: none; border-radius: var(--radius-s); min-height: var(--btn-min-h); padding: var(--btn-pad-y) var(--btn-pad-x); cursor: pointer; transition: background 0.18s, color 0.18s, box-shadow 0.18s, transform 0.05s; }
#compte-content .btn:active { transform: translateY(1px); }
#compte-content .btn-primary { background: var(--clr-ink); color: #fff; }
#compte-content .btn-primary:hover { background: var(--clr-ink-dark); }
/* État désactivé : bouton visiblement grisé (mot de passe + enregistrer profil).
   Le bouton reste inerte tant que la condition d'activation n'est pas remplie. */
#compte-content .btn:disabled,
#compte-content .btn[disabled],
#compte-content .btn-primary:disabled,
#compte-content .btn-primary:disabled:hover { background: #d9d9d9; color: #fff; cursor: not-allowed; box-shadow: none; transform: none; }
#compte-content .btn-neutral { background: #EEEEEE; color: var(--c-text-strong); }
#compte-content .btn-neutral:hover { background: #e0e0e0; }
#compte-content .btn-outline { background: #fff; color: var(--clr-or-text); border: 1.5px solid var(--clr-or); }
#compte-content .btn-outline:hover { background: color-mix(in srgb, var(--clr-or) 5%, #fff); }
#compte-content .btn-sm { min-height: var(--btn-sm-min-h); padding: 7px 15px; font-size: 12.5px; border-radius: var(--radius-s); }
#compte-content .btn-block { width: 100%; }
#compte-content .form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
#compte-content .form-actions.center { justify-content: center; }
/* Barre d'action « profil » : mention obligatoire à gauche, bouton à droite, sur
   une même ligne (retour Thomas #14 — supprime le vide diagonal sous les cartes). */
#compte-content .form-actions--split { justify-content: space-between; align-items: center; }
#compte-content .form-actions--split .form-req-note { margin: 0; }
@media (max-width: 640px) {
  #compte-content .form-actions--split { flex-direction: column; align-items: stretch; gap: 12px; }
  #compte-content .form-actions--split .btn { width: 100%; }
  /* Pt 22 (retours 16/07) : boutons d'action des cartes compte centrés sur mobile
     (« Modifier mon mot de passe », « Enregistrer mes préférences »…) au lieu d'être
     collés à droite. On épargne la variante --split, gérée en colonne juste au-dessus. */
  #compte-content .form-actions:not(.form-actions--split) { justify-content: center; }
}

/* Notes / toast / empty */
#compte-content .note { display: flex; gap: 11px; align-items: flex-start; background: var(--fb-in-bg); border: 1px solid var(--fb-in-bd); border-radius: var(--radius-m); padding: 13px 16px; font-size: 13px; color: var(--fb-in-tx); line-height: 1.55; margin-bottom: 18px; }
#compte-content .note .note-ico { font-size: 16px; flex-shrink: 0; line-height: 1.4; }
#compte-content .note a { color: var(--clr-or-text); font-weight: 700; }
#compte-content .note a:hover { text-decoration: underline; }
#compte-content .note.info { background: var(--fb-in-bg); border-color: var(--fb-in-bd); color: var(--fb-in-tx); }
#compte-content .note.warn { background: var(--fb-wa-bg); border-color: var(--fb-wa-bd); color: var(--fb-wa-tx); }
#compte-content .toast { display: inline-flex; align-items: center; gap: 8px; background: var(--fb-ok-strong-bg); border: 1px solid var(--fb-ok-strong-bd); color: var(--fb-ok-strong-tx); font-weight: 600; font-size: 13px; padding: 9px 15px; border-radius: var(--radius-s); margin-bottom: 16px; }
/* pt17 + pt20 (retours 20260718) — états vides « Mes commandes » / « Cagnotte »
   (même composant .empty). L'ancien rendu (boîte pointillée grise + fond blanc +
   texte #999 + grosse icône) faisait « placeholder d'appli / cheap » (retour Thomas).
   Piste A « éditorial filet or » validée : plus de boîte ni d'icône — un filet or
   court centré (::before, la signature maison), un titre encre, un sous-titre muté,
   beaucoup d'air. Un seul correctif sert les deux états vides. */
#compte-content .empty { text-align: center; padding: 44px 24px; background: transparent; border: 0; color: var(--c-text); }
#compte-content .empty::before { content: ""; display: block; width: 46px; height: 2px; margin: 0 auto 16px; background: var(--c-accent); border-radius: 2px; }
#compte-content .empty-title { font-family: 'Montserrat', Arial, sans-serif; font-size: 16px; font-weight: 700; color: var(--c-ink); margin-bottom: 6px; letter-spacing: .01em; }

/* Statut « à payer » (état 1) — complète les status-* existants */
#compte-content .status-topay { color: var(--clr-or-text); }

/* MES COMMANDES — onglets + accordéon */
#compte-content .cmd-tabs { display: flex; gap: 4px; border-bottom: 2px solid #eee; margin-bottom: 20px; }
#compte-content .cmd-tab { padding: 10px 18px; font-family: 'Montserrat', Arial, sans-serif; font-size: 13px; font-weight: 700; color: #999; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: color 0.15s, border-color 0.15s; display: flex; align-items: center; gap: 7px; }
@media (hover: hover) { #compte-content .cmd-tab:hover { color: var(--c-text-strong); } }   /* pt13d — cf. pt11-survol-tactile */
#compte-content .cmd-tab.active { color: var(--clr-or-text); border-bottom-color: var(--clr-or); }
#compte-content .cmd-tab .tab-count { background: transparent; border: 1px solid #ddd; color: #b0a99e; font-size: 10.5px; font-weight: 700; padding: 0 6px; border-radius: var(--radius-s); }
#compte-content .cmd-tab.active .tab-count { background: transparent; color: var(--clr-or-text); border-color: var(--c-line); }
#compte-content .cmd-pane { display: none; }
#compte-content .cmd-pane.active { display: block; }
#compte-content .cmd-card { background: #fff; border: 1px solid #dcd7cf; border-radius: var(--radius-m); margin-bottom: 14px; overflow: hidden; transition: box-shadow 0.2s; }
#compte-content .cmd-actions .btn { border-radius: var(--radius-s); }
@media (hover: hover) { #compte-content .cmd-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.06); } }   /* pt13d — cf. pt11-survol-tactile */
#compte-content .cmd-card.is-topay { border-left: 4px solid var(--clr-or); }
#compte-content .cmd-card-top { display: flex; align-items: center; gap: 16px; padding: 16px 20px; cursor: pointer; }
#compte-content .cmd-id { font-family: 'Montserrat', Arial, sans-serif; font-weight: 700; font-size: 15px; color: var(--c-text-strong); }
#compte-content .cmd-ref { font-family: 'Montserrat', Arial, sans-serif; font-size: 11px; color: #999; margin-top: 3px; letter-spacing: .2px; }
#compte-content .cmd-meta { font-size: 12.5px; color: #999; margin-top: 2px; }
#compte-content .cmd-grow { flex: 1; min-width: 0; }
#compte-content .cmd-amount { font-family: 'Montserrat', Arial, sans-serif; font-weight: 700; font-size: 16px; color: var(--c-text-strong); white-space: nowrap; }
#compte-content .cmd-chevron { color: #b0a99e; line-height: 0; transition: transform 0.2s; }
#compte-content .cmd-thumb .cc-i { color: var(--c-text); }
#compte-content .cmd-card.open .cmd-chevron { transform: rotate(180deg); }
#compte-content .cmd-actions { display: flex; gap: 8px; padding: 0 20px 16px; flex-wrap: wrap; }
#compte-content .cmd-detail { display: none; border-top: 1px solid #f0f0f0; padding: 18px 20px; background: #fcfbf9; }
#compte-content .cmd-card.open .cmd-detail { display: block; }
/* Carte « commande mise en avant » (espace compte recentré) : le détail réutilise
   .cmd-detail, mais sans ancêtre .cmd-card.open. Sa visibilité est pilotée par
   l'attribut [hidden] de .cc-hl-detail (toggle JS) → on force display:block ici,
   sinon .cmd-detail reste à display:none et le détail ne s'affiche jamais. */
#compte-content .cc-hl-detail .cmd-detail { display: block; }
#compte-content .cmd-items { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
#compte-content .cmd-items th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.5px; color: #999; font-weight: 700; padding: 6px 8px; border-bottom: 1px solid #eee; }
#compte-content .cmd-items th.num, #compte-content .cmd-items td.num { text-align: right; }
#compte-content .cmd-items td { padding: 9px 8px; border-bottom: 1px solid #f3f3f3; font-size: 13px; color: var(--c-text-strong); }
#compte-content .cmd-items .it-name { font-weight: 600; }
#compte-content .cmd-items .it-sub { font-size: 11.5px; color: #999; font-weight: 500; }
/* Cagnotte gagnée PAR VIN dans le détail (R7 2026-06-10) — ton doré, aligné sous le nom. */
#compte-content .cmd-items .cmd-item-gain { margin-top: 4px; }
#compte-content .cc-cagnotte-gain { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; color: #9a7b2e; line-height: 1.2; }
#compte-content .cc-cagnotte-gain svg { flex-shrink: 0; }
#compte-content .cmd-tots { margin-left: auto; width: 260px; font-size: 13px; }
#compte-content .cmd-tots .tot-row { display: flex; justify-content: space-between; padding: 4px 8px; }
#compte-content .cmd-tots .tot-row.grand { border-top: 1px solid #e5e5e5; margin-top: 4px; padding-top: 8px; font-family: 'Montserrat', Arial, sans-serif; font-weight: 700; font-size: 15px; color: var(--c-text-strong); }
#compte-content .cmd-tots .free { color: var(--c-success); font-weight: 700; }
/* Cagnotte dans le détail de commande (Mes commandes). R7 2026-06-10 */
#compte-content .cmd-tots .tot-row.cagnotte { color:#9a7b2e; }
#compte-content .cmd-tots .tot-row.cagnotte.spent { color:var(--clr-or-text); }
#compte-content .cmd-track { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #e7e7e7; border-radius: var(--radius-s); padding: 10px 14px; font-size: 13px; margin-top: 6px; }
#compte-content .cmd-track .trk-ico { display: inline-flex; align-items: center; color: var(--clr-or); }
/* R4 — icônes maison (cc_icon) à la place des emojis sur la page Sécurité */
#compte-content .field-hint .fh-ico { display: inline-flex; align-items: center; color: var(--clr-or); }
#compte-content .sec-tip .st-ico { display: inline-flex; align-items: center; vertical-align: middle; }
#compte-content .cmd-track a { color: var(--clr-or-text); font-weight: 700; }
#compte-content .invoice-chip { display: inline-flex; align-items: center; gap: 7px; background: #fff; border: 1px solid var(--c-border-input); border-radius: var(--radius-s); padding: 8px 13px; font-size: 13px; font-weight: 600; color: var(--c-text-strong); }
#compte-content .invoice-chip .inv-ico { font-size: 17px; color: var(--clr-or); }
#compte-content .hist-filter { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
#compte-content .hist-filter .field-select { width: auto; min-width: 160px; }
#compte-content .hist-row { display: grid; grid-template-columns: 1.4fr 130px 110px 120px 1fr; gap: 12px; align-items: center; background: #fff; border: 1px solid var(--c-border-input); border-radius: var(--radius-m); padding: 12px 16px; margin-bottom: 8px; }
#compte-content .hist-row .h-num { font-weight: 700; color: var(--clr-or-text); }
#compte-content .hist-row .h-date { color: #777; font-size: 13px; }
#compte-content .hist-row .h-tot { font-family: 'Montserrat', Arial, sans-serif; font-weight: 700; color: var(--c-text-strong); }
#compte-content .hist-row .h-act { display: flex; gap: 6px; justify-content: flex-end; }

/* MES ADRESSES — voir le bloc liste sobre plus haut (.addr-list / .addr-row). */

/* ALERTES & NEWSLETTERS — toggles */
/* Pt 4 (retours 16/07) : .pref-row est désormais un <label> englobant tout le texte
   → toute la ligne coche la case. cursor:pointer pour le signaler. */
#compte-content .pref-row { display: flex; align-items: flex-start; gap: 16px; padding: 18px 4px; border-bottom: 1px solid #f0f0f0; cursor: pointer; }
#compte-content .pref-row:last-of-type { border-bottom: none; }
#compte-content .pref-ico { width: 42px; height: 42px; border-radius: var(--radius-s); background: var(--c-bg-soft); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
#compte-content .pref-text { flex: 1; }
#compte-content .pref-title { font-weight: 700; color: var(--c-text-strong); font-size: 14px; line-height: 1.3; }
/* D1-9 — interligne resserré : sur mobile la description passe à 2-3 lignes et
   l'interligne global hérité (large) la rendait béante (« texte trop espacé »). */
#compte-content .pref-desc { font-size: 12.5px; color: #888; margin-top: 2px; line-height: 1.4; }

/* SÉCURITÉ */
#compte-content .pw-strength { height: 5px; border-radius: var(--radius-s); background: #eee; margin-top: 8px; overflow: hidden; }
#compte-content .pw-strength span { display: block; height: 100%; width: 0; background: linear-gradient(90deg,#e0a000,var(--c-success)); border-radius: var(--radius-s); transition: width 0.2s; }
/* .pw-match retiré avec le champ de confirmation (#7 Thomas 07/07). */
#compte-content .sec-tip { display: flex; gap: 8px; font-size: 12.5px; color: #777; margin-top: 6px; }
/* Liste des conditions du mot de passe (live) */
#compte-content .pw-reqs { list-style: none; padding: 0; margin: 10px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; }
#compte-content .pw-reqs li { font-size: 12px; color: #999; display: flex; align-items: center; gap: 7px; transition: color 0.15s; }
#compte-content .pw-reqs li::before { content: '\2715'; font-weight: 700; color: var(--c-border-input); width: 14px; text-align: center; }
#compte-content .pw-reqs li.ok { color: var(--c-success); }
#compte-content .pw-reqs li.ok::before { content: '\2713'; color: var(--c-success); }

@media (max-width: 900px) {
	#compte-content .field-row,
	#compte-content .field-row[class*="field-row--"] { grid-template-columns: 1fr; }
	#compte-content .addr-row { flex-direction: column; gap: 10px; }
	#compte-content .addr-actions { flex-direction: row; align-self: flex-start; align-items: center; gap: 18px; }
	#compte-content .addr-action, #compte-content .addr-setdefault button, #compte-content .addr-add-btn { min-height: 44px; }
	#compte-content .hist-row { grid-template-columns: 1fr 1fr; }
	#compte-content .cmd-tots { width: 100%; }
	#compte-content .cmd-card-top { flex-wrap: wrap; gap: 8px 12px; }
	#compte-content .pw-reqs { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
	/* Carte repliée : le titre humanisé (long) prend toute la 1re ligne ; statut
	   + montant + chevron descendent sur une 2e ligne — fini le titre cassé sur
	   3-4 lignes quand le statut est long (« EN PRÉPARATION »). */
	#compte-content .cmd-card-top { flex-wrap: wrap; align-items: center; row-gap: 4px; column-gap: 10px; }
	#compte-content .cmd-card-top .cmd-grow { flex: 1 1 100%; }
	#compte-content .cmd-card-top .order-status { order: 2; }
	#compte-content .cmd-card-top .cmd-amount { order: 3; margin-left: auto; }
	#compte-content .cmd-card-top .cmd-chevron { order: 4; flex: 0 0 auto; }
}

/* === Toasts unifiés (spec 2026-07-06) — encre premium, 3 teintes, filet latéral.
   Gabarit unique consommé par scripts/cc-toast.js. Icônes : coche / attention. === */
#cc-toast-stack { position: fixed; top: 22px; left: 50%; transform: translateX(-50%);
  z-index: 99999; display: flex; flex-direction: column; gap: 10px;
  width: min(460px, 92vw); pointer-events: none;
  /* #7 — suit le header : la position `top` est repositionnée en JS (cc-toast.js)
     quand le header se masque/réapparaît au scroll ; on anime le glissement. */
  transition: top .25s ease; }
/* Catalogue : le header défile, le toast se cale sur .cc-filtres-bar et suit le
   scroll en continu (rAF, cc-toast.js). On COUPE la transition top : sur des mises
   à jour à chaque frame, elle ferait « traîner » le toast derrière sa cible (effet
   rebond descend/remonte). Sans transition, le toast reste collé net à la barre. */
body.catalogue #cc-toast-stack { transition: none; }
.cc-toast { display: flex; align-items: center; gap: 12px; box-sizing: border-box;
  padding: 12px 15px; border-radius: var(--radius-s);
  font-family: 'Montserrat', Arial, sans-serif; font-weight: 600; font-size: 13.5px; line-height: 1.36;
  background: var(--ink); color: var(--n-soft);
  box-shadow: 0 10px 28px rgba(20,13,6,.32);
  opacity: 0; transform: translateY(-14px); transition: opacity .3s, transform .3s; }
.cc-toast.show { opacity: 1; transform: translateY(0); }
.cc-toast__icon { flex: 0 0 auto; }
.cc-toast__text { flex: 1; }
.cc-toast__text--short { display: none; }
.cc-toast--ok    { border: 1px solid rgba(184,138,62,.42); border-left: 3px solid #b88a3e; }
.cc-toast--ok    .cc-toast__icon { color: #f0a500; }
.cc-toast--alert { border: 1px solid rgba(217,138,58,.48); border-left: 3px solid #d98a3a; }
.cc-toast--alert .cc-toast__icon { color: #e6a760; }
/* --error : réservé au compte (erreur()→'error'). Teinte tokenisée sur le rouge de
   marque --red + glyphe cercle-exclamation propre (cc-toast.js), doctrine erreur. */
.cc-toast--error { border: 1px solid rgba(192,57,43,.48); border-left: 3px solid var(--red); }
.cc-toast--error .cc-toast__icon { color: var(--red); }

/* #7 — variante persistante : icône+texte groupés + bouton d'acquittement.
   Mobile-first : bouton pleine largeur sous le texte.
   pointer-events:auto — #cc-toast-stack coupe les événements pointeur (toasts
   éphémères click-through) ; on les RÉACTIVE ici, sinon le bouton « J'ai compris »
   hérite de none et devient inclicable (l'acquittement ne part jamais). */
.cc-toast--persist { pointer-events: auto; flex-direction: column; align-items: stretch; gap: 12px; padding: 13px 15px; }
.cc-toast--persist .cc-toast__head { display: flex; align-items: flex-start; gap: 12px; }
.cc-toast__ack {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  box-sizing: border-box; width: 100%; min-height: var(--btn-min-h); line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 18px;
  border: 0; border-radius: var(--radius-s);
  background: var(--n-soft); color: var(--ink);
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: var(--btn-weight); font-size: var(--btn-font); letter-spacing: var(--btn-letter);
}
.cc-toast__ack:disabled { opacity: .6; cursor: default; }
/* Desktop : texte à gauche, bouton compact à droite */
@media (min-width: 600px) {
  .cc-toast--persist { flex-direction: row; align-items: center; gap: 14px; }
  .cc-toast--persist .cc-toast__head { flex: 1; }
  .cc-toast__ack { width: auto; flex: 0 0 auto; padding: 0 var(--btn-pad-x); white-space: nowrap; }
}

@media (max-width: 600px) {
  .cc-toast__text--full  { display: none; }
  .cc-toast__text--short { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
  .cc-toast { transition: opacity .3s; transform: none; }
  .cc-toast.show { transform: none; }
  #cc-toast-stack { transition: none; }
}

/******************
 RECHERCHE
******************/

#recherche .valeur select {
	border: 2px solid #C8C8C8;
	background: none;
	font-size: 0.9em;
	color: var(--clr-or-text);
	margin-left: -7px;
	}

/* formulaire recherche */
#recherche {
	text-align: left;
	}

#recherche li {
	display:flex;
}

#recherche select {
	font-size: 0.7em;
	}

/* Largeur par défaut de l'input mot-clé (desktop) */
#recherche input.rech-input {
	width: 250px;
	}



/******************
 ALBUMS PHOTOS
******************/

.album {
	margin-top: 20px;
	margin-left: 0;
	}
.album li {
	float: left;		
	list-style: none;
	width: 170px;
	height: 170px;
	text-align: center;
	margin-left: 25px;
	margin-bottom: 40px;
	}
.album li img {
	border-radius: var(--radius-s);
	/* box-shadow: 3px 3px 10px var(--c-border-input); */
	}
.album li.noshadow img {
	box-shadow: none;
	}
.album .legende {
	font-size: 0.8em;
	margin-top: 5px;
	color: #555;
	line-height: normal;
	}

/******************
 FICHE VIN
******************/
/* =============================================================
   REFONTE FICHE VIN (2026) — pleine largeur, layout 2 colonnes
   Agit UNIQUEMENT sur body#page-vin : les autres pages gardent
   leur structure 3 colonnes (col-gauche / col-centre / col-droite).
   ============================================================= */
#page-vin #col-gauche,
#page-vin #col-droite {
	display: none;
}
#page-vin #wrappeur {
	display: block;          /* annule le flex 3 colonnes pour cette page */
}
#page-vin #col-centre {
	width: 100%;
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
	/* le générique #col-centre pose margin-top:20px → trop d'air sous le menu sur
	   la fiche ; on resserre pour combler le vide au-dessus du fil d'Ariane. */
	margin-top: 6px;
	/* #3 (round 2 — vraie cause) : sans box-sizing, width:100% + 2×--space-lg
	   (80px desktop / 32px mobile) débordait le viewport horizontalement. Il n'y a
	   PAS de reset *{box-sizing:border-box} global sur ce site → on le pose ici. */
	box-sizing: border-box;
	padding-left: var(--space-lg);
	padding-right: var(--space-lg);
}
/* Fil d'Ariane fiche (#4 — P1) : ligne sobre alignée sur le contenu, plus de
   bandeau crème full-bleed. Le beige est réservé aux accents (doctrine S1).
   Visible aussi en mobile (override en bas de fichier, cf @media 1130px). */
/* ===== Fiche vin #10 — Bandeau héro (anti-vide) ===== */
.vin-hero{ background:linear-gradient(180deg,#fbf8f1,var(--c-bg-soft)); border-bottom:1px solid var(--c-line); }
/* pt3 (retours Thomas 28/07) — le cartouche photo (.vin-hero-stage) démarrait EXACTEMENT
   au bord gauche de l'encart beige : mesuré au banc, .vin-hero.left = .vin-hero-stage.left
   (280px à 1920, 40px à 1440), soit 0px d'écart. Deux bordures superposées à la même
   abscisse → elles se font concurrence au lieu de se hiérarchiser.
   Le padding est mis des DEUX côtés, pas seulement à gauche : le même collage existait à
   droite (le bloc « Livraison à la carte » et la mention légale touchaient le bord droit
   de l'encart), il était juste moins visible faute de bordure pour le souligner. Un
   padding-left seul aurait corrigé le symptôme signalé en créant une asymétrie.
   Valeur : var(--space-lg) = 40px (doctrine zéro valeur en dur). En dessous de 900px la
   grille passe en colonne unique et 40px de chaque côté mangeraient trop de largeur utile
   → on redescend à var(--space-md). */
/* Lot 3 fiche vin (retours Thomas 28/07, capture annotee) — « equilibrer la largeur moins
   importante a gauche par rapport au bord qu'a droite par rapport au texte ». Les deux
   bandes encadrees par le proprietaire encadrent la CARTE PHOTO, pas le bandeau : a gauche
   le padding du conteneur (var(--space-lg) = 40px), a droite le gap de la grille (50px).
   La photo n'etait donc pas centree dans son couloir — 10px de plus a droite. Le gap
   s'aligne sur le padding pose juste a cote dans la MEME regle : meme token, donc les deux
   espaces restent egaux si la valeur bouge un jour, et une valeur en dur disparait
   (doctrine zero valeur en dur). Effet de bord assume : la piste 1fr gagne les 10px cedes
   par le gap, la colonne texte demarre 10px plus a gauche et s'elargit d'autant.
   La bascule <=900px repose gap:24px en colonne unique : non concernee (mesure a 390px :
   aucun ecart). */
.vin-hero-grid{ display:grid; grid-template-columns:360px 1fr; gap:0 var(--space-lg); align-items:stretch; padding:34px var(--space-lg); }
/* cartouche : s'étire sur toute la hauteur de la colonne d'achat, bouteille centrée */
.vin-hero-stage{ position:relative; background:var(--c-surface); border:1px solid var(--c-line); border-radius:var(--radius-m);
                 min-height:300px; /* plancher = hauteur naturelle d'une bouteille, JAMAIS plus (cf. spec §5.3) */
                 display:flex; flex-direction:column; align-items:center; justify-content:center;
                 padding:26px; box-shadow:0 2px 12px rgba(36,26,18,.07); }
.vin-hero-buy{ align-self:start; }
#page-vin .vin-hero-buy h1{ font:700 27px/1.25 var(--ff-title); color:var(--c-text-strong); margin:0 0 6px; padding:0; }
@media (max-width:900px){
  .vin-hero-grid{ grid-template-columns:1fr; gap:24px; padding-left:var(--space-md); padding-right:var(--space-md); }
}

/* Galerie */
/* Desktop : le cadre photo NE grandit plus pour remplir la colonne (#10).
   flex:0 0 auto → il prend la hauteur de la photo (bornée par min-height plancher
   et max-height plafond ci-dessous). Gaté ≥901px (en deçà : 1 colonne, media 900px). */
@media (min-width: 901px) {
	.vin-gallery-main { flex: 0 0 auto; }
}
.vin-gallery-main {
	position: relative;
	background: #fff;
	border-radius: var(--radius-m);
	/* #10 — plancher abaissé 520→320 : le cadre épouse la photo (la plupart font
	   ~360px de haut). 320 reste un plancher décent pour le cas « Photo bientôt
	   disponible » (placeholder texte). */
	min-height: 320px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	cursor: zoom-in;
	isolation: isolate;
}
.vin-gallery-main > a.glightbox { display: flex; align-items: center; justify-content: center; align-self: stretch; min-height: 0; width: 100%; }
/* LIGHTBOX GLightbox — deux correctifs cumulés sur le même sélecteur :
   (a) #51 bis : la feuille CDN glightbox.min.css (chargée APRÈS site.css, cf.
   header.inc.php) impose object-fit:cover → rogne nos bouteilles portrait (ex.
   100×360) en haut ET en bas ; on rétablit « contain » (image entière, bandes
   sur les côtés). !important indispensable : le CDN gagne à spécificité égale.
   (b) #2 (Thomas 29/06-2) : le max-height:100vh natif dépasse la zone visible
   sur mobile (barres navigateur dynamiques) et ne laisse aucune marge aux
   contrôles → haut/bas rognés ; on plafonne l'image sous 100vh. */
.glightbox-container .gslide-image img {
	object-fit: contain !important;
	max-height: 88vh;
	max-height: calc(100dvh - 72px);
}
/* PLAFOND DÉFINITION (photos basse résolution, en attendant un reshoot) :
   on N'AGRANDIT PLUS la photo. width:auto + height:auto → la bouteille s'affiche
   au plus à sa taille native (nette), bornée par max-width:100% (anti-débordement)
   et max-height:560px (réduit seulement les gros fichiers). Une petite photo reste
   petite mais propre, au lieu d'être étirée et floue. L'ancien width:100% +
   object-fit:contain forçait l'agrandissement → supprimés. Pas de cadre matérialisé
   (fond blanc only) → le « blanc » autour d'une petite bouteille se fond dans la page.
   #10 — PLAFOND HAUTEUR abaissé 560→420 : empêche les ~15% de photos plus hautes
   (≈455px) de dépasser le bloc infos (~380px) et de recréer le vide à droite. Sans
   incidence sur les 71% de photos à 360px. Réduction imperceptible (455→420). */
.vin-photo-main { width: auto; height: auto; max-width: 100%; max-height: 340px; padding: 8px; box-sizing: border-box; mix-blend-mode: multiply; position: relative; z-index: 1; }
/* Ombre de sol retirée : la bouteille est désormais centrée dans un cadre stable
   (et non posée en bas), donc une ombre calée en bas du cadre se détacherait sous
   elle. Le liseré du cadre suffit à ancrer visuellement la photo. */
.vin-gallery-main::after { content: none; }
/* pt2c (retours 28/07) — repli « Photo à venir » de la fiche vin, aligné sur celui de la
   carte catalogue (.wc-photo-empty, l. ~9359+) : colonne flex centrée, picto bouteille
   maison à 54px puis mention en petites capitales. Pas de white-space:nowrap volontaire —
   .vin-gallery-main porte overflow:hidden, mieux vaut un retour à la ligne qu'un rognage
   muet. Les teintes #999 / #cbb27a / #b9ae97 restent en dur : aucun token existant ne
   correspond EXACTEMENT (les tokeniser changerait la teinte, hors périmètre). */
.vin-photo-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 24px 8px; color: #999; font-family: var(--ff-body); text-align: center; }
.vin-photo-empty .cc-i { width: 54px; height: 54px; color: #cbb27a; opacity: .85; }
.vin-photo-empty__lbl { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #b9ae97; }
/* R2 (recette 28/07) — état « la base annonce une photo, le fichier est absent du disque ».
   Le repli est PRÉ-RENDU masqué dans .vin-gallery-main (inc/vin.inc.php) ; le script inline
   de fin de .vin-hero-stage pose .is-photo-404 sur le conteneur quand l'<img> échoue.
   On masque alors le lien lightbox (qui portait l'image cassée ET le href vers le 404) et
   l'indice « Cliquez pour agrandir », qui promettrait un agrandissement inexistant.
   Sélecteur en 0,3,0 : il bat sans !important les bascules de .vin-zoom-hint--hover/--touch
   posées dans des media queries (0,1,0). Ces trois règles doivent rester APRÈS le bloc
   .vin-photo-empty ci-dessus, dont elles annulent le display:flex par défaut. */
.vin-photo-empty--repli { display: none; }
.vin-hero-stage.is-photo-404 .vin-gallery-main > a { display: none; }
.vin-hero-stage.is-photo-404 .vin-photo-empty--repli { display: flex; }
.vin-hero-stage.is-photo-404 .vin-zoom-hint { display: none; }
.vin-badges { position: absolute; top: 14px; right: 14px; z-index: 3; display: flex; flex-direction: column; gap: 9px; align-items: flex-end; }
/* #24 — médaillons-pictos identiques à la carte catalogue (.wc-tag) : crème +
   liseré doré + picto bordeaux. Légèrement plus grands (32px) car la photo de la
   fiche est plus grande que la vignette catalogue. */
.vin-badges .vin-medal { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--clr-bg-light); border: 1.5px solid var(--clr-or); box-shadow: 0 1px 3px rgba(138,98,36,.24); }
.vin-badges .vin-medal .cc-i { width: 18px; height: 18px; stroke: var(--clr-ink); }
/* Premium (vins VIP) — retours 25/07 pt3 : la puce TEXTE .vin-prem est SUPPRIMÉE, elle
   était le seul badge dépareillé de la pile. Premium passe en .vin-medal ci-dessus avec
   le picto maison 'premium' (une clé) : plus aucune règle dédiée n'est nécessaire. */
/* #8/#51 — légende « Cliquez/Touchez pour agrandir » sortie du cadre photo (cf.
   inc/vin.inc.php) : posée en flux SOUS la photo, centrée dans .vin-hero-stage
   (flex column, align-items:center). Plus de position:absolute → plus de rognage
   par overflow:hidden ni de chevauchement de la bouteille. */
.vin-zoom-hint { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; white-space: nowrap; font: 600 10px/1 var(--ff-body); letter-spacing: 1px; text-transform: uppercase; color: #707070; }
.vin-gallery-main.zooming .vin-zoom-hint { opacity: 0; }
.vin-thumbs { display: flex; gap: 8px; margin-top: 12px; }
.vin-thumb { width: 60px; height: 60px; border: 2px solid #eee; border-radius: var(--radius-s); display: flex; align-items: center; justify-content: center; overflow: hidden; background: #fff; }
.vin-thumb.active { border-color: var(--clr-or); }
.vin-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }

/* Infos */
.vin-appellation { font: 600 11px/1 var(--ff-body); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 12px; }
.vin-appellation a { color: var(--clr-or-text); }
.vin-subtitle { font: normal 500 18px/1.45 var(--ff-title); color: var(--clr-or-text); margin: 0 0 18px; }  /* pt2 (retours JL) : nom de domaine — italique retire, Montserrat droit aligne sur le titre/appellation, or-texte, poids/taille legerement affirmes. Annule l'ex-#23 (Georgia->Montserrat italique). */
.vin-subtitle a { color: var(--clr-or-text); }
.vin-divider { width: 40px; height: 2px; background: var(--clr-or); margin-bottom: 22px; }

/* pt6 (retours 28/07) — même barré DIAGONAL que la carte catalogue (.wc-price-old).
   Cette règle couvre les DEUX rendus du prix barré de la fiche (variante E
   inc/vin.inc.php l. ~255 et variante B l. ~277) : même classe, même sélecteur.
   Le title='Prix normal' déjà posé sur ces deux <span> conserve la sémantique perdue
   avec text-decoration:line-through. Le font shorthand pose déjà line-height:1, la boîte
   inline-block colle donc aux chiffres.
   ⚠️ Le TRACÉ du barré est mutualisé en fin de feuille (cherche cc-barre-diagonale). */
.vin-price-old { color: #a59c8c; font: 500 14px/1 var(--ff-body); margin-left: 9px; }

.vin-stock { font: 600 13px/1 var(--ff-body); margin-bottom: 18px; display: flex; align-items: center; gap: 8px; }
.vin-stock-in { color: #2d6a2d; }
.vin-stock-in::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #2d6a2d; }
.vin-stock-out { color: #b00; }

/* Retour #7 20260713 : cartouche « épuisé » de la fiche vin (remplace le .vin-stock-out
   nu). Ton sobre encre/or — un vin épuisé est un état, pas une erreur (fini le rouge). */
.vin-soldout { margin: 2px 0 18px; }
.vin-soldout--card { display: flex; gap: 13px; align-items: flex-start; background: var(--c-bg-soft); border: 1px solid var(--c-line); border-left: 3px solid var(--clr-or); border-radius: var(--radius-m); padding: 14px 16px; }
.vin-soldout--card .vso-ico { flex: 0 0 auto; margin-top: 1px; color: var(--clr-or-text); }
.vin-soldout--card .vso-ico .cc-i { width: 22px; height: 22px; }
.vin-soldout--card .vso-title { font: 700 15px/1.25 var(--ff-title); color: var(--c-ink); }
.vin-soldout--card .vso-sub { font-size: 13px; line-height: 1.5; color: var(--c-text); margin-top: 3px; }
.vin-soldout--card .vso-link { display: block; width: fit-content; margin-top: 6px; color: var(--clr-or-text); font-weight: 600; }
/* Correctif mention légale : en rupture la colonne perd prix+achat et raccourcit ; on la
   passe en flex-column pleine hauteur pour que la mention redescende en bas (comme en stock). */
.vin-hero-buy--out { display: flex; flex-direction: column; align-self: stretch; }
.vin-hero-buy--out .vin-legal-mention { margin-top: auto; }

.vin-cart-row { display: flex; gap: 10px; align-items: stretch; margin-bottom: 18px; max-width: 420px; }
/* #5 — Quantité en dropdown VISIBLE (le <select> n'est plus masqué) : il est
   directement la source de vérité AJAX. Pilule alignée sur la hauteur du CTA. */
.vin-cart-row .vin-qty { display: inline-flex; align-items: center; flex-shrink: 0; min-height: 0; background: none; }
/* width fixe : l'état fermé n'affiche que le nombre sélectionné. Sans contrainte,
   le <select> se dimensionne sur sa plus longue option (l'indice désactivé
   « — Encore N avant le maximum (M) — » ajouté après un ajout), gonfle et pousse
   le bouton « Ajouter » hors de la barre mobile. Le texte d'info reste lisible à
   l'ouverture du menu déroulant. */
/* L3 (#10) — pilule resserrée (moins de vide interne) : width 88→74, hauteur 54→50,
   padding droite 34→26. Le CTA suit (align-items:stretch). */
.vin-cart-row .vin-qty select { width: 74px; box-sizing: border-box; min-height: 50px; border: 1px solid var(--clr-border-dark); border-radius: var(--radius-s); padding: 0 26px 0 14px; font: 500 15px/1 var(--ff-body); color: var(--clr-text-dark); background: #fff; cursor: pointer; }
.vin-cart-row .vin-qty select:focus-visible { outline: 2px solid var(--clr-or); outline-offset: 1px; }
.vin-cart-row .cc-wine-card__cart-button { flex: 1; }
.vin-btn-max { background: #e8e8e8; color: #999 !important; cursor: not-allowed; box-shadow: none; }
.vin-already { font: 600 13px/1.4 var(--ff-body); color: #707070; margin-bottom: 18px; }
.vin-already a { color: var(--clr-or-text); }

.vin-guarantees { display: flex; border: 1px solid var(--clr-border-dark); border-radius: var(--radius-m); overflow: hidden; margin-bottom: 22px; }
.vin-guarantee { flex: 1; padding: 13px 10px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; border-right: 1px solid var(--clr-border-dark); font: 700 10px/1.3 var(--ff-body); letter-spacing: .5px; text-transform: uppercase; color: #707070; }
.vin-guarantee:last-child { border-right: none; }
.vin-guarantee-ico { font-size: 20px; }

.vin-info-titles { min-width: 0; }

.vin-description { margin-top: 48px; padding-top: 36px; border-top: 1px solid var(--clr-border-dark); }
.vin-section-title { font-family: var(--ff-title); font-size: 19px; font-weight: 700; color: var(--clr-text-dark); margin: 0 0 7px; }
.vin-description-text { font: 500 15px/1.8 var(--ff-body); color: #555; max-width: 760px; }

/* Loupe */
.vin-zoom-lens { position: absolute; width: 170px; height: 170px; border-radius: 50%; border: 3px solid rgba(184,138,62,0.55); box-shadow: 0 8px 28px rgba(0,0,0,0.28), inset 0 0 0 1px rgba(255,255,255,0.5); background-color: var(--clr-bg-light); background-repeat: no-repeat; pointer-events: none; opacity: 0; transition: opacity .18s; z-index: 6; filter: contrast(1.08) saturate(1.06); }
.vin-gallery-main.zooming .vin-zoom-lens { opacity: 1; }

/* Responsive */
@media (max-width: 900px) {
	#page-vin #col-centre { padding-left: 16px; padding-right: 16px; }
	/* Retour 12/06 #7 — photo trop grande sur mobile (elle remplissait l'écran) :
	   on resserre le cadre ET on plafonne la hauteur de la bouteille. */
	.vin-gallery-main { min-height: 300px; }
	.vin-photo-main { max-height: 340px; padding: 10px; }
	.vin-guarantees { flex-wrap: wrap; }
	.vin-guarantee { flex: 1 1 45%; }
}

/* ===== REFONTE FICHE VIN — refonte graphique (mockup v2) ===== */

/* Chips clés couleur / appellation / millésime */
.vin-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.vin-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 20px; font: 700 13px/1 var(--ff-body); letter-spacing: .2px; border: 1.5px solid; }
.vin-chip img { width: 12px; height: auto; }
.vin-chip-couleur { background: color-mix(in srgb, var(--clr-or) 5%, #fff); color: var(--clr-or-text); border-color: color-mix(in srgb, var(--clr-or) 28%, #fff); }
.vin-chip-appel { background: #fff; color: var(--clr-text-dark); border-color: var(--c-border-struct); }
.vin-chip-millesime { background: var(--clr-bg-grey); color: var(--clr-text-dark); border-color: var(--clr-border); }
a.vin-chip { cursor: pointer; transition: border-color .18s, color .18s; }
a.vin-chip:hover, a.vin-chip:focus-visible { border-color: var(--clr-or); color: var(--clr-or-text); }

/* Note moyenne au point de décision */
.vin-rating { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.vin-rating-stars { color: var(--clr-gold); font-size: 16px; letter-spacing: 1px; }
.vin-rating-score { font-weight: 700; color: var(--clr-text-dark); }
.vin-rating-link { font-size: 13px; color: var(--clr-or-text); font-weight: 600; }
.vin-rating-link:hover { text-decoration: underline; }

/* Bloc prix — variantes B / E */
.vin-price-variant { margin-bottom: 20px; }
.vin-amount { font-family: var(--ff-title); color: var(--clr-or-text); font-weight: 700; line-height: 1; white-space: nowrap; }
.vin-amount .int { font-size: 42px; }
.vin-amount .dec { font-size: 22px; }
.vin-amount .cur { font-size: 24px; margin-left: 2px; }
.vin-sub-fmt { font-size: 12px; color: #6b6b6b; font-style: italic; }
.vin-price-line { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.vin-pvB-label { font-family: var(--ff-title); font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--clr-or-text); margin-bottom: 6px; }
.vin-pvB-trust { display: flex; align-items: center; gap: 7px; font: 600 12.5px/1.4 var(--ff-body); color: var(--clr-success); margin-top: 10px; }
.vin-price-variant--B .vin-sub-fmt { margin-top: 6px; }
/* D2 — Prix domaine valorisé (#prix-domaine) : accent OR, pas d'aplat, distinct du bordeaux du prix */
.vin-prix-domaine { display: flex; gap: 9px; align-items: flex-start; margin-top: 12px; }
.vin-prix-domaine .vpd-ico { color: var(--c-text); flex-shrink: 0; margin-top: 1px; }
.vin-prix-domaine .vpd-body strong { display: block; font-family: var(--ff-title); font-size: 13px; line-height: 1.25; color: var(--c-text-strong); letter-spacing: .03em; }  /* #39 — line-height resserré : sans lui, l'héritage (30px) surdimensionnait la boîte du titre et le picto (aligné flex-start) flottait au-dessus du texte. */
.vin-prix-domaine .vpd-body span { font-size: 12px; color: #6b6354; line-height: 1.4; }
/* #22 — cagnotte : « ligne nue » (recette poune 18/06) — l'ancien badge crème + cadre
   + barre dorée était jugé trop marqué. On retire fond/bordures/padding : icône + texte
   doré seuls, mise en avant discrète. */
.vin-cagnotte { display: flex; gap: 9px; align-items: flex-start; margin-top: 12px; }
.vin-cagnotte .vc-ico { color: var(--clr-or); flex-shrink: 0; margin-top: 1px; }
.vin-cagnotte .vc-body strong { display: block; font-family: var(--ff-title); font-size: 14px; font-weight: 600; line-height: 1.25; color: var(--c-text-strong); letter-spacing: .02em; }  /* #39 — cf. .vpd-body strong : line-height resserré pour aligner le picto sur le texte. */
.vin-cagnotte .vc-body span { font-size: 12px; color: #6b6354; line-height: 1.4; }
/* T2 — rareté réelle (stock bas) : italique éditorial, ton terre cuite */
.vin-rarete { font-style: italic; font-size: 12.5px; color: #9a6a3a; margin: 9px 0 0; }
.vin-pvE-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.vin-pvE-benefit { display: flex; align-items: flex-start; gap: 9px; background: #eef5ef; border: 1px solid #cfe3d2; border-left: 3px solid var(--clr-success); border-radius: 0 var(--radius-m) var(--radius-m) 0; padding: 11px 14px; font: 400 12.5px/1.5 var(--ff-body); color: var(--clr-success-dark); }
.vin-pvE-benefit .ico { font-size: 15px; flex-shrink: 0; }

/* Accordéon fiche technique */
.vin-specs-accordion { margin-bottom: 22px; border: 1px solid var(--c-line); border-radius: var(--radius-m); overflow: hidden; }
.vin-specs-accordion > summary { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: #fff; font: 700 13px/1 var(--ff-body); letter-spacing: .3px; color: var(--clr-text-dark); cursor: pointer; list-style: none; user-select: none; }
.vin-specs-accordion > summary::-webkit-details-marker { display: none; }
.vin-specs-accordion > summary::after { content: '▼'; font-size: 9px; color: #707070; transition: transform .2s; }
.vin-specs-accordion[open] > summary::after { transform: rotate(180deg); }
@media (hover: hover) { .vin-specs-accordion > summary:hover { background: #fafafa; } }   /* pt11 — cf. pt11-survol-tactile */
.vin-specs-accordion .vin-specs { border: none; border-radius: 0; margin-bottom: 0; border-top: 1px solid #f0f0f0; }

/* CTA panier — BORDEAUX PLEIN sur la fiche (cohérent catalogue, version pleine = action principale) */
.vin-cart-row .cc-wine-card__cart-button { display: inline-flex; align-items: center; justify-content: center; gap: 11px; padding: 0 24px; background: var(--clr-ink); border-radius: var(--radius-s); box-shadow: 0 2px 12px rgba(184,138,62,.28); }
/* Retour Thomas : l'aspect plein (encre) doit être permanent — le survol ne
   change plus la couleur (état repos = état survol). */
.vin-cart-row .cc-wine-card__cart-button:hover,
.vin-cart-row .cc-wine-card__cart-button:focus-visible { background: var(--clr-ink); }
.vin-cart-row .cc-wine-card__cart-button--success,
.vin-cart-row .cc-wine-card__cart-button--success:hover,
.vin-cart-row .cc-wine-card__cart-button--success:focus-visible { background: var(--clr-ink-dark); }
/* Icône intégrée au bouton : plus de tuile blanche, SVG bordeaux passé en blanc. */
.vin-cart-row .cc-wine-card__cart-icon { width: auto; height: auto; background: transparent; }
.vin-cart-row .cc-wine-card__cart-icon img { width: 20px; height: 20px; filter: brightness(0) invert(1); }
.vin-cart-row .cc-wine-card__cart-button span:last-child { padding: 0; }
/* État max sur la fiche : ALIGNÉ sur le bouton « Ajouter » (encre plein) et sur
   l'état max du catalogue — plus de version beige/dorée (retour Thomas). Garde la
   géométrie du bouton « Ajouter » de la fiche (rayon 3px, inline-flex hérité). */
.vin-cart-row .cc-wine-card__cart-button--maxed {
	background: var(--clr-ink);
	box-shadow: 0 1px 2px rgba(36,26,18,.30); /* ombre de contact (remplace le halo doré du bouton actif) */
	color: #fff;
}

/* Bandeau livraison / stockage en cave */
.vin-ship-info { display: flex; flex-direction: column; gap: 6px; background: var(--clr-bg-light); border: 1px solid var(--c-border-struct); border-radius: var(--radius-m); padding: 12px 14px; margin-bottom: 18px; font: 400 12.5px/1.45 var(--ff-body); color: var(--clr-text-dark); }
.vin-ship-line { display: flex; align-items: flex-start; gap: 8px; }
.vin-ship-line .si-ico { font-size: 15px; flex-shrink: 0; }
.vin-ship-line strong { color: var(--clr-or-text); font-weight: 700; }
.vin-ship-line a { color: var(--clr-or-text); font-weight: 600; text-decoration: underline; }

/* Mention légale */
.vin-legal-mention { font-size: 10.5px; color: #6b6b6b; text-align: center; line-height: 1.4; margin: 14px 0; }

.vin-title-rule { width: 46px; height: 3px; background: var(--clr-or); border-radius: var(--radius-s); margin: 4px 0 16px; }

/* Caractéristiques en bandeau horizontal (pleine largeur) */
.vin-specs-strip{ display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
                  border:1px solid var(--c-line); border-radius:var(--radius-m); overflow:hidden; margin-top:38px; }
/* pt18 (Thomas 20260728) — le filet vertical s'arrêtait avant le bas en mobile.
   Ce n'était PAS un problème de hauteur : les items de grille s'étirent déjà
   (align-items:stretch), donc chaque filet couvre toute la hauteur de SA rangée.
   Le filet était la border-right des cellules, et `:last-child` la supprimait —
   règle juste tant que la grille tenait sur UNE rangée (desktop), fausse dès que
   `auto-fit` passe à 2 colonnes : avec 5 caractéristiques, la 5e (Format) tombe
   en colonne 1, dernière rangée… et était aussi :last-child → filet manquant.
   Correctif : plus de :last-child, et le filet devient un box-shadow porté par
   TOUTES les cellules. Le conteneur a overflow:hidden (ci-dessus) → l'ombre des
   cellules de dernière colonne est découpée, quel que soit le nombre de colonnes
   résolu par auto-fit. Aucun nth-child, aucune media query, aucune hauteur devinée.
   Dette : la teinte #f1ede4 est en dur ici alors que le conteneur voisin utilise
   var(--c-line) — teinte conservée à l'identique (pas de changement visuel). */
.vin-spec-cell{ padding:14px 16px; box-shadow:1px 0 0 #f1ede4; }
.vin-spec-k{ font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--c-text); margin-bottom:5px; }
.vin-spec-v{ font-size:14px; font-weight:600; color:var(--c-text-strong); }
.vin-spec-v a{ color:var(--clr-or-text); }

/* « Le vin » pleine largeur */
.vin-block{ margin-top:38px; }
.vin-block .vin-description-text{ max-width:820px; }

/* Notes & dégustation inline */
.vin-notes-inline{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:20px; }
.vin-notes-inline--solo{ margin-top:24px; }
.vin-notes-lbl{ font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--c-text); }
.vin-note-pill{ font-size:13px; color:var(--c-text); border:1px solid var(--c-line); border-radius:var(--radius-s); padding:6px 12px; background:var(--c-surface); }
.vin-note-pill strong{ color:var(--c-text-strong); margin-left:4px; }

/* ===== Accords mets & vins (fiche vin §2) — chips texte sobres + note =====
   Pleine largeur sous .vin-block / .vin-specs-strip. Le gap interne des chips
   réserve la place d'un picto à gauche du libellé (chantier icônes dédié, sans refonte). */
.vin-accords { margin-top: 40px; }
.vin-accords-chips { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.vin-accords-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border: 1px solid var(--c-border-struct); border-radius: 999px; background: var(--clr-bg-light); color: var(--clr-text-dark); font: 600 13px/1 var(--ff-body); }
.vin-accords-note { margin: 16px 0 0; color: #555; font: 500 15px/1.7 var(--ff-body); max-width: 760px; }

/* « Du même producteur » — grille 4 colonnes (2 rangées = 8 vins) + repli « Afficher plus » */
.vin-related { margin-top: 48px; }
.vin-related ul.liste-vins.cc-wine-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* display:contents : le <li> ne génère aucune boîte → la .wine-card devient
   l'élément de grille DIRECT et remplit sa piste (cartes à hauteur égale).
   Indispensable pour neutraliser le style liste hérité « .liste-vins li {
   display:table } » : sinon le <li> se réduit à la largeur min-content de la
   carte (nom du vigneron en white-space:nowrap) et DÉBORDE sa piste sur mobile
   → décalage horizontal. Même correctif que le catalogue (.cc-cat … > li).
   Le masquage « voir plus » (is-collapsed) et la pagination JS posent display:none
   sur le <li>, ce qui l'emporte sur display:contents — comportement préservé. */
.vin-related ul.liste-vins.cc-wine-grid > li { display: contents; }
.vin-related.is-collapsed ul.liste-vins.cc-wine-grid > li:nth-child(n+5) { display: none; }
/* #21 — « Afficher plus » : de l'air en haut ET en bas pour qu'il respire entre
   la grille et le footer (il collait au bas de page). */
.vin-related-more { text-align: center; margin-top: 26px; margin-bottom: 40px; }
.vin-related-more-btn { background: transparent; color: var(--clr-or-text); border: 1.6px solid var(--clr-or); border-radius: var(--radius-s); padding: 12px 30px; font: 600 13.5px/1 var(--ff-title); cursor: pointer; transition: background .2s, color .2s, border-color .2s, box-shadow .2s, transform .2s; }
/* pt2 (retours 26/07) — le survol ne bascule plus en encre plein. Même patron que les
   « + panier » de suggestion (pt4 du 24/07) : les presets --cc-addh-* sont pilotés par le
   back-office (cart_add_hover) et définis dans le bloc pt4 plus bas dans ce fichier.
   Preset par défaut = AUCUNE bascule de couleur (--c-surface #fff = fond de page,
   --c-accent = --clr-or, --c-accent-text = --clr-or-text : la bordure et le texte ne
   bougent pas), seulement l'ombre dorée + la montée de 1px. C'est la demande de Thomas. */
.vin-related-more-btn:hover, .vin-related-more-btn:focus-visible { background: var(--cc-addh-bg); border-color: var(--cc-addh-bd); color: var(--cc-addh-tx); box-shadow: var(--cc-addh-sh); transform: var(--cc-addh-tr); }
@media (max-width: 1100px) { .vin-related ul.liste-vins.cc-wine-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .vin-related ul.liste-vins.cc-wine-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px)  { .vin-related ul.liste-vins.cc-wine-grid { grid-template-columns: 1fr; } }

/* #3 (round 2, corrections-mobile) — Filet anti-débordement horizontal de la fiche.
   La vraie cause (box-sizing manquant sur #page-vin #col-centre) est corrigée plus
   haut ; on garde ce overflow-x:hidden en sécurité (ne rogne pas le tiroir panier
   fixe, relatif au viewport). */
body#page-vin { overflow-x: hidden; }

/* Barre d'achat collante — mobile uniquement */
.vin-mobile-buybar { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; box-sizing: border-box; max-width: 100%; background: #fff; border-top: 1px solid var(--clr-border); box-shadow: 0 -4px 16px rgba(0,0,0,0.12); padding: 10px 16px; align-items: center; gap: 12px; }
.vin-mobile-buybar .mb-price-block { flex-shrink: 0; line-height: 1.1; }
.vin-mobile-buybar .mb-price { font: 700 21px/1 var(--ff-title); color: var(--clr-or-text); }
.vin-mobile-buybar .mb-price-lbl { font-size: 10px; color: #6b6b6b; }
.vin-mobile-buybar .mb-btn { flex: 1; min-width: 0; background: var(--clr-ink); color: #fff; border: none; border-radius: var(--radius-s); height: 48px; font: var(--btn-weight) var(--btn-font)/1 var(--ff-body); letter-spacing: var(--btn-letter); display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 2px 12px rgba(184,138,62,.28); }
.vin-mobile-buybar .mb-btn img { width: 18px; height: 18px; filter: brightness(0) invert(1); }
.vin-mobile-buybar .mb-btn:active { background: var(--clr-ink-dark); }

/* ===== AVIS CLIENTS — refonte (résumé + répartition + cartes) ===== */
.avis_clients { margin-top: 0; padding: 30px 0; border-top: 1px solid var(--c-line); }
.avis-header { margin-bottom: 22px; padding-bottom: 12px; border-bottom: 2px solid var(--clr-or); }
.avis-header h2 { font: 700 18px/1 var(--ff-title); color: var(--clr-text-dark); margin: 0; }
.avis-layout { display: grid; grid-template-columns: 280px 1fr; gap: 40px; align-items: start; }
.avis-summary { background: var(--clr-bg-light); border: 1px solid var(--c-border-struct); border-radius: var(--radius-m); padding: 22px 20px; text-align: center; }
.avis-rs-score { font: 700 46px/1 var(--ff-title); color: var(--clr-text-dark); }
.avis-rs-score small { font-size: 18px; color: #6b6b6b; font-weight: 600; }
.avis-rs-stars { color: var(--clr-gold); font-size: 18px; letter-spacing: 2px; margin: 8px 0 4px; }
.avis-rs-count { font-size: 12.5px; color: var(--clr-text); margin-bottom: 18px; }
.avis-rs-dist { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.avis-rs-row { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #6b6b6b; }
.avis-rs-row .rs-lbl { width: 30px; flex-shrink: 0; }
.avis-rs-row .rs-bar { flex: 1; height: 6px; background: rgba(0,0,0,0.08); border-radius: var(--radius-s); overflow: hidden; }
.avis-rs-row .rs-bar-fill { height: 100%; background: var(--clr-gold); border-radius: var(--radius-s); }
.avis-rs-row .rs-num { width: 22px; text-align: right; flex-shrink: 0; }
.avis-list { display: flex; flex-direction: column; gap: 16px; }
.avis-card { border: 1px solid var(--clr-border-dark); border-radius: var(--radius-m); padding: 16px 18px; }
.avis-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.avis-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--clr-ink); color: #fff; display: flex; align-items: center; justify-content: center; font: 700 14px/1 var(--ff-title); flex-shrink: 0; }
.avis-meta { flex: 1; min-width: 0; }
.avis-name { font-weight: 700; color: var(--clr-text-dark); font-size: 13.5px; }
.avis-sub { font-size: 11.5px; color: #6b6b6b; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.avis-verified { color: var(--clr-success); font-weight: 700; }
.avis-stars { color: var(--clr-gold); font-size: 13px; letter-spacing: 1px; }
.avis-text { font: 400 13px/1.7 var(--ff-body); color: var(--clr-text); margin: 0; }
.avis_formulaire { margin-top: 24px; max-width: 560px; }
.avis_formulaire h3 { font: 700 15px/1 var(--ff-title); margin-bottom: 12px; }
.avis_confirmation { color: var(--clr-success); font-weight: 600; margin-top: 16px; }
.avis_erreur { color: #b00; font-weight: 600; }
.avis_info, .avis_vide { color: #6b6b6b; margin-top: 16px; }
.avis_info a { color: var(--clr-or-text); font-weight: 600; }
/* État vide soigné (aucun avis) */
.avis-empty { text-align: center; padding: 40px 24px; background: var(--clr-bg-light); border: 1px solid var(--c-border-struct); border-radius: var(--radius-m); }
.avis-empty-ico { font-size: 34px; line-height: 1; color: var(--clr-gold); margin-bottom: 12px; }
.avis-empty-title { font: 700 16px/1.2 var(--ff-title); color: var(--clr-text-dark); margin: 0 0 6px; }
.avis-empty-sub { font: 400 13px/1.5 var(--ff-body); color: #6b6b6b; margin: 0; }

/* ===== DÉTAILS FICHE VIN — chantier 2026-06-15 (Option B « Fiche unifiée » + épure) ===== */
/* L2 (#3) — indice de zoom : « Survolez » au survol (desktop), « Touchez pour
   agrandir » au tactile. Remplace l'ancien <style> inline qui masquait le hint. */
.vin-zoom-hint--touch { display: none; }
@media (hover: none), (pointer: coarse) {
	.vin-zoom-hint--hover { display: none; }
	.vin-zoom-hint--touch { display: inline-flex; }
}
/* L4 (#9) — limite par commande : mention discrète sous le sélecteur de quantité. */
/* #4 (Thomas 07/07) — mention sur deux lignes : contrainte puis lien en dessous. */
.vin-qty-max { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; font: 600 12px/1.3 var(--ff-body); color: #8a8170; margin: -8px 0 18px; }

/* ── Popover info « au clic » (#20 Thomas 10/07) — bulle in-page qui remplace un
   renvoi FAQ (« Pourquoi cette limite ? », « Comment ça marche ? » livraison à la
   carte). Disclosure : .cc-pop__trigger est un <button> rendu comme l'ancien lien
   doré ; .cc-pop__panel s'ouvre dessous, DA v4. Position gérée en JS si débordement. */
.cc-pop { position: relative; display: inline-block; }
.cc-pop__trigger {
  -webkit-appearance: none; appearance: none; background: none; border: 0;
  padding: 0; margin: 0; font: inherit; cursor: help;
  color: var(--clr-or-text); font-weight: 600;
  display: inline-flex; align-items: center; gap: 5px;
  text-decoration: none;
}
@media (hover: hover) { .cc-pop__trigger:hover { color: var(--clr-or); } }   /* pt13d — cf. pt11-survol-tactile */
.cc-pop__trigger .cc-i { flex: none; }
.cc-pop__trigger:focus-visible { outline: 2px solid var(--clr-or); outline-offset: 2px; border-radius: 2px; }
.cc-pop__panel {
  position: absolute; z-index: 40; top: calc(100% + 8px); left: 0;
  width: max-content; max-width: min(300px, calc(100vw - 32px));
  background: var(--clr-bg-light); border: 1px solid var(--c-border-struct);
  border-radius: var(--radius-m); padding: 12px 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
  font: 400 12.5px/1.5 var(--ff-body); color: var(--clr-text-dark);
  text-align: left; white-space: normal;
}
.cc-pop__panel[hidden] { display: none; }
.cc-pop__panel::before {
  content: ""; position: absolute; bottom: 100%; left: 18px;
  border: 7px solid transparent; border-bottom-color: var(--c-border-struct);
}
.cc-pop__panel::after {
  content: ""; position: absolute; bottom: 100%; left: 19px;
  border: 6px solid transparent; border-bottom-color: var(--clr-bg-light);
}
.cc-pop__p { display: block; }
.cc-pop__p + .cc-pop__p { margin-top: 8px; }
.cc-pop__more {
  display: inline-block; margin-top: 10px;
  color: var(--clr-or-text); font-weight: 600;
  text-decoration: underline; text-underline-offset: 2px;
}
@media (hover: hover) { .cc-pop__more:hover { color: var(--clr-or); } }   /* pt13d — cf. pt11-survol-tactile */
/* Bandeau « Livraison à la carte » : le déclencheur passe TOUJOURS à la ligne
   sous la phrase (desktop comme mobile), au lieu de rester en fin de ligne sur
   desktop (retour Thomas 11/07). */
.vin-ship-line .cc-pop { display: block; margin-top: 3px; }

#page-vin .avis_clients { border-top: none; }

/* Responsive fiche refonte */
@media (max-width: 900px) {
	.avis-layout { grid-template-columns: 1fr; gap: 24px; }
	.avis-summary { max-width: 340px; }
	.vin-mobile-buybar { display: flex; }
	#page-vin { padding-bottom: 74px; }
	/* #10 — barre collante : UN seul bouton. Le formulaire relogé (dropdown + CTA
	   cc_icon, identiques au desktop) sert d'ajout ; le bouton mb-btn redondant est masqué. */
	.vin-mobile-buybar .mb-btn { display: none; }
	/* État « déjà au maximum » : aucun formulaire rendu → libellé désactivé
	   (sinon la barre n'aurait que le prix). */
	.vin-mobile-buybar .mb-max { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 8px; height: 46px; border-radius: var(--radius-s); background: var(--clr-ink); box-shadow: none; color: #fff; font: 700 13px/1 var(--ff-body); letter-spacing: .3px; text-transform: none; }
	.vin-mobile-buybar form { flex: 1; min-width: 0; margin: 0; }
	.vin-mobile-buybar .vin-cart-row { display: flex; gap: 8px; align-items: stretch; margin: 0; max-width: none; }
	.vin-mobile-buybar .vin-qty select { width: 76px; min-height: 46px; padding: 0 28px 0 12px; font-size: 14px; }
	.vin-mobile-buybar .cc-wine-card__cart-button { flex: 1; min-width: 0; padding: 0 14px; height: 46px; box-shadow: none; }
	.vin-mobile-buybar .cc-wine-card__cart-button span:last-child { white-space: nowrap; font-size: 13px; }
	/* #51 — l'aspect-ratio 4/5 imposait un cadre court (~133px quand la colonne se
	   réduit à la bouteille basse-déf) alors que la photo monte jusqu'à 340px :
	   overflow:hidden la rognait au niveau de l'épaule (bouteille « cassée » mobile).
	   Sans aspect-ratio, le cadre épouse la hauteur de la photo → bouteille entière. */
	.vin-gallery-main { min-height: 0; }
	.vin-thumbs { gap: 6px; }
}

/* Dropdown quantité + CTA « Ajouter au panier » tiennent sur une seule ligne
   sur très petit écran (sinon le CTA déborde hors viewport). */
@media (max-width: 540px) {
	.vin-cart-row { gap: 8px; }
	.vin-cart-row .vin-qty select { min-height: 48px; padding: 0 26px 0 12px; }
	.vin-cart-row .cc-wine-card__cart-button { min-width: 0; padding: 0 12px; }
	.vin-cart-row .cc-wine-card__cart-button span:last-child { white-space: nowrap; font-size: 13px; }
}

/* Phase 3 — mise en page flex pour les caractéristiques du vin (legacy preserved) */
ul.vincaras {
	list-style: none;
	/* padding/margin laissés au défaut navigateur pour matcher le rendu legacy
	   (padding-left:40px + margin-top:20px sur la prod) */
}
ul.vincaras li {
	display: flex;
	/* pas de min-height ni align-items ni margin-bottom : legacy = juste display:flex */
}
#page-vin .entete {
	margin: 0 5px 0 0;
	float: none;
	width: 40%;
	padding-right: 10px;
	text-align: right;
	border-right: 2px solid var(--clr-border-dark);
	color: #707070;
	line-height: 30px;
	}
#page-vin .valeur {
	line-height: 30px;
	color: #000;
	width: 50%;
	}

	#page-vin .valeur.rouge {
		color: var(--c-text-strong);
		}
	#page-vin .double {
		height: 50px;
		line-height: 25px;
		}

#page-vin .valeur select {
	border: 2px solid #C8C8C8;
	background: none;
	font-size: 1.2em;
	color: var(--c-text-strong);
	margin-left: -7px;
	}

#page-vin .description{
	/* font-style: italic; */
	border-top: 2px solid #C8C8C8;
	padding-top: 5px;
	clear: both;
	}

#page-vin .dernieres { 
	font-size: 1em; 
	color: #000000; 
	font-weight: bold;
	}

#page-vin .photo_produit {
	margin-right: auto;
	margin-left: auto;
	/*margin-top: 40px;*/
	/*max-width: 150px;*/
	}
	/* anciennes photos */
	#page-vin .photo_produit.old {
		margin-top: 120px;
		max-width: 150px;
		}

#page-vin .pp {
	background-color: var(--c-text-strong);
	color: #FFF;
	padding: 2px;
	font-size: 0.9em;
	margin-left: 5px;
	}

#page-vin .item {
	display:flex;
}


/******************
 DIVERS
******************/
/* #message_popup : styles déplacés vers la section "Dialog natif" en bas du fichier (Phase 3) */


.temoignage{
	background: url(/img/quotes1.png) no-repeat left top;
	padding-left: 20px;
	color: #666;
	font-style: italic;
	line-height: 22px;
	margin: 20px 0 0 30px;
	}

.retour {
	clear: both;
	text-align: center;
	}

/* .erreur — Direction B (vague « .erreur global », 21/07). DERNIÈRE primitive de
   message sortie de la Direction A : carte blanche + filet rouge + icône
   cercle-exclamation INLINE rouge, CENTRÉE verticalement (align-items:center —
   arbitrage Thomas B2 : le .erreur porte des messages courts/mono-ligne, l'icône
   centrée est mieux « posée » qu'alignée en haut). Texte NU conservé (erreur()
   inchangé) → l'icône est un ::before, premier flex-item, centré avec le nœud
   texte. Balaie les 3 surfaces réelles encore en A : contact (form.inc.php),
   conversion invité (convert.inc.php), panier (panier.inc.php). Les pages
   .auth-page gardent leur propre override (auth.css, plus spécifique) ; le compte
   retire ses .erreur du DOM (toast). Aligné sur la couleur/glyphe de l'auth. */
.erreur {
	display:flex; gap:11px; align-items:center; box-sizing:border-box;
	background:#fff; border:1px solid #e7ded0; border-left:3px solid var(--fb-no-tx);
	border-radius:var(--radius-m); padding:12px 15px; margin:0 0 14px; max-width:560px;
	font-size:14px; font-weight:400; color:var(--clr-ink); line-height:1.45; text-align:left;
}
.erreur::before {
	content:""; flex:0 0 auto; width:20px; height:20px;
	background-repeat:no-repeat; background-position:center; background-size:contain;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A33327' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v5M12 16h.01'/%3E%3C/svg%3E");
}
.erreur a { color:var(--clr-ink); text-decoration:underline; text-underline-offset:2px; font-weight:700; }

/* Feedback legacy .msgOK/.msgNO — Direction A conservée (code CSS mort en pratique :
   émis uniquement par le compte, où compte.inc.php les retire du DOM pour les
   re-router en toasts encre/or). Laissés intacts : carte blanche + filet + pastille
   encre ::before. Le contrat JS _fonctions.js (lecture .msgNO/.msgOK via classe +
   textContent) reste intact ; le pseudo-élément survit au changement de textContent. */
.msgNO, .msgOK {
	display:block; position:relative; box-sizing:border-box;
	background:#fff; border:1px solid #e7ded0; border-radius:var(--radius-m);
	padding:13px 16px 13px 56px; margin:0 0 14px; width:auto; max-width:560px;
	font-size:13.5px; font-weight:600; color:var(--clr-text); line-height:1.45; text-align:left;
}
.msgNO::before, .msgOK::before {
	content:""; position:absolute; left:14px; top:50%; transform:translateY(-50%);
	width:30px; height:30px; border-radius:50%;
	background-color:var(--clr-ink); background-repeat:no-repeat; background-position:center; background-size:16px;
}
/* msgNO = accent rouge */
.msgNO { border-left:3px solid var(--fb-no-tx); }
.msgNO::before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e08a80' stroke-width='2.3' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v5M12 16h.01'/%3E%3C/svg%3E"); }
/* msgOK = accent vert */
.msgOK { border-left:3px solid var(--fb-ok-tx); }
.msgOK::before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237bbf86' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E"); }
/* liens dans un message — conservés du lot B */
.msgNO a, .msgOK a { color:var(--clr-ink); text-decoration:underline; text-underline-offset:2px; font-weight:700; }

/* ============================================================
   Messages système tokenisés — Direction B (réconciliation 20/07)
   Bandeau global : carte blanche + filet d'accent + ICÔNE INLINE nue
   colorée par registre (l'ancienne pastille encre est retirée). Doctrine
   or/encre TRANCHÉE : succès + info = OR, attention (--warn) = ENCRE,
   erreur = ROUGE. Aligné sur la brique du tunnel (.cc-cart-alert).
   Consommateur unique en prod : overlay stock du tiroir panier
   (ajax_panier.php, variante --warn = attention).
   ============================================================ */
.cc-msg { display:flex; gap:10px; align-items:flex-start;
  background:#fff; border:1px solid #e7ded0; border-left:3px solid var(--clr-or);
  border-radius:var(--radius-m); padding:12px 15px; margin:0 0 14px;
  color:var(--clr-ink); font-weight:400; text-align:left; font-size:14px; line-height:1.45; }
.cc-msg[hidden] { display:none; }
/* Ex-.cc-msg__coin (pastille ronde encre 32px) → simple porte-icône inline,
   sans fond ni rond. L'icône hérite la couleur du registre (color → currentColor). */
.cc-msg__coin { flex:0 0 auto; width:20px; height:20px; margin-top:1px;
  display:grid; place-items:center; color:var(--clr-or); }
.cc-msg__coin .cc-i, .cc-msg__coin svg { width:20px; height:20px; stroke-width:2; }
.cc-msg__txt { flex:1; min-width:0; }
.cc-msg__lead { display:block; font-size:15px; font-weight:700; color:var(--clr-ink); margin-bottom:2px; }
.cc-msg__body { display:block; font-size:13.5px; color:var(--clr-text); line-height:1.45; }
.cc-msg__body strong { color:var(--clr-ink); font-weight:600; }
/* Registres — couleur du filet + de l'icône (Façon 2 or/encre, rouge = erreur). */
.cc-msg--err  { border-left-color:var(--fb-no-tx); } .cc-msg--err  .cc-msg__coin { color:var(--fb-no-tx); }
.cc-msg--ok   { border-left-color:var(--clr-or);    } .cc-msg--ok   .cc-msg__coin { color:var(--clr-or); }
.cc-msg--info { border-left-color:var(--clr-or);    } .cc-msg--info .cc-msg__coin { color:var(--clr-or); }
.cc-msg--warn { border-left-color:var(--clr-ink);   } .cc-msg--warn .cc-msg__coin { color:var(--clr-ink); }

/* Erreur sous un champ (remplace le pop-up natif) — sobre, Direction A.
   Généralise .cc-field-err hors du tunnel (helper js/cc-form-validate.js). */
.cc-field-err { display:flex; align-items:flex-start; gap:6px; margin-top:5px;
  font-size:12.5px; font-weight:600; line-height:1.3; color:var(--fb-no-tx); }
.cc-field-err::before { content:""; flex:0 0 auto; width:14px; height:14px; margin-top:1px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A33327' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v5M12 16h.01'/%3E%3C/svg%3E") center/contain no-repeat; }
.cc-field.is-error input, .cc-field.is-error select, .cc-field.is-error textarea,
input.is-error, select.is-error, textarea.is-error { border-color:var(--fb-no-tx); outline:none; }

/******************
 BAS DE PAGE
******************/

footer {
		width:100%;
		
	}

	#footer_desktop {
		max-width: 1920px; 
		margin: auto;
				background: var(--c-bg-soft) 0% 0% no-repeat padding-box;
		margin-top: 0px;
		font: normal normal 600 30px/40px Montserrat;
	}

	#footer_newsletter {
		text-transform: uppercase;
		
		text-align:center;
		padding:70px;
		word-spacing:5px;
		display: flex;
		flex-direction: row;
		color: var(--c-text);

	}

	.footer_newsletter_a {
		text-align:left;
		width: 50%;
		padding-left: 3%;
	}

	
	.footer_newsletter_form {
		
		width: 50%;
	}

	.form_newsletter{
		position:relative;
	}
	
	.input_newsletter{
		text-align: left;
		font: normal normal 300 22px/50px Montserrat;
		letter-spacing: 0px;
		color: var(--c-text);
		margin-right:5px;
	}
	
	.button_newsletter{
		position:absolute;
		top: -2px;
		border-radius: var(--radius-s);
		padding: 18px;
		background: var(--clr-ink) 0% 0% no-repeat padding-box;
		height: 60px;
		text-align: left;
		font: normal normal 100 24px/21px Montserrat;
		letter-spacing: 0px;
		color: #FFFFFF;

		text-transform: uppercase;
	}

	#footer_infos {
		display:flex;
		
		background: #818A55 0% 0% no-repeat padding-box;
		font: normal normal 500 22px/30px Montserrat;
		padding-left: 10%;
		padding-right: 10%;
		padding-top: 70px;
		padding-bottom: 50px;
		color: white;
	}

	@media only screen and (max-width: 1600px) {
		#footer_infos {
			font: normal normal 500 20px/30px Montserrat;
		}
	}

	@media only screen and (max-width: 1280px) {
		#footer_infos {
			font: normal normal 500 18px/30px Montserrat;
		}
	}

	

	#footer_infos a{
		color: white;
	}

	
	#footer_infos a:hover{
		color: white;
	}

	#footer_info strong {
		color:white;
	}

	#footer_info {
		flex-grow: 1;
		text-align:left;
		
	}
	
	footer ul {
		list-style: none;
		line-height: 25px;
		max-width: 1150px;
		text-align: right;
		margin: auto;
		padding:0;
		}
	footer ul li {
		margin-right: 10px; 
		display: inline;
		}
	footer ul li a {
		color: #FFF;
		font-size: 0.8em;
		}
#copyright {
	width: 100%;
	text-align: center;
	}

.noir { color: #222222; }
.rouge { color: #E1001A; }
.vert  { color: #7EC65F; }

/* boutons et forms */
.form  { 
	background: url("/icones/input_bg.png") left top repeat-x; 
	border: 1px solid #DDD;
	margin-bottom: 2px;
	font-size: 0.9em;
	}
.formc {
	background: url("/icones/input_bg.png") left top repeat-x;
	border: 1px solid #DDD;
	text-align: center;
	margin-bottom: 2px;
	font-size: 0.9em;
	}

.bouton { 
	color: #FFF;
	font-size: 85%;
	background-color: var(--c-text-strong);
	
	}
.grandbouton {
	color: #FFF;
	font-size: 1.1em;
	background-color: var(--c-text-strong);
	letter-spacing: 1px;
	text-transform: uppercase;}

.ban-address-field {
	position: relative;
	overflow: visible;
}

/* #24 (retour Thomas 20260702) — panneau d'autocomplétion d'adresse ré-habillé v4
   (était un reste legacy : police Roboto, gris en dur, coins carrés). Palette greige/or,
   rayon et ombre douce cohérents avec le tunnel. */
.ban-address-suggestions {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 50;
	width: 100%;
	min-width: 260px;
	max-width: 440px;
	margin-top: 6px;
	background: #FFF;
	border: 1px solid #e6ddc9;
	border-radius: var(--radius-m, 10px);
	box-shadow: 0 10px 26px rgba(40,26,18,0.14);
	overflow: hidden;
	line-height: 1.3;
}

.ban-address-suggestions.is-visible {
	display: block;
}

.ban-address-option {
	display: block;
	width: 100%;
	padding: 10px 14px;
	background: #FFF;
	border: 0;
	border-bottom: 1px solid #efe7d6;
	color: var(--c-text-strong);
	cursor: pointer;
	font-family: inherit;
	font-size: 13.5px;
	line-height: 1.35;
	text-align: left;
	white-space: normal;
	transition: background .12s;
}

.ban-address-option:last-child {
	border-bottom: 0;
}

/* pt13d (29/07) — SCINDÉ. C'est ICI que le correctif du 28/07 était inopérant :
   il n'avait été posé que sur le sélecteur restreint `.cc-relais-inpwrap
   .ban-address-option` (tunnel.css), et cette règle de base continuait de coller
   le fond crème ET le doré à la dernière suggestion touchée. `.is-active`
   (navigation clavier) reste hors media. cf. pt11-survol-tactile. */
.ban-address-option.is-active {
	background: #faf6ec;
	color: var(--clr-or-text);
}
@media (hover: hover) {
	.ban-address-option:hover {
		background: #faf6ec;
		color: var(--clr-or-text);
	}
}

.ban-address-option strong {
	display: block;
	color: inherit;
	font-weight: 600;
}

.ban-address-option span {
	display: block;
	margin-top: 2px;
	color: #8a8377;
	font-size: 12px;
}

.ban-address-empty {
	padding: 8px 10px;
	color: #666;
	font-size: 12px;
}

/* backoffice */
#admin { background: #FFF; font-size: 12px; font-family: Arial, sans-serif;}
#admin a { font-size: 11px; }
#admin td { font-size: 11px; }
#admin .form  { font-size: 11px; background : #FFF url("/icones/input_bg.png") left top repeat-x; border: 1px solid #bbb; margin-bottom: 2px; }
#admin .formc { font-size: 11px; background : #FFF url("/icones/input_bg.png") left top repeat-x; border: 1px solid #bbb; text-align: center; margin-bottom: 2px; }
#admin .bouton	{ color: #FFF; font-size: 90%; background-color: var(--clr-ink); }
#admin form { margin: 0; }

span.disabled { color: #CCC; }
.colonneadmin { background-color: #DDAE89; color: #000; height: 25px; }
td.admin { color: var(--c-text-strong); }
div.result { padding: 5px; border: 1px dotted #CCC; width: 600px; font-weight: bold; margin: auto;}
.box {	font-size: 14px; font-family: Arial, sans-serif; border: 1px solid #ddd; visibility: hidden; float: left; padding: 5px; width: 0px; height: 0px; margin: 5px; background: #F3EECC; z-index: 1; margin-left: 60px;}
.masque { vertical-align: middle; -moz-opacity:0.3; filter:alpha(opacity=30); -khtml-opacity: 0.3; opacity: 0.3; }
.fondrouge { background: #F9BD3B; color: #000; padding: 5px; }
.fondvert  { background: #7EC65F; color: #FFF; padding: 5px; }
.titre { font-size: 14px; font-weight: bold; letter-spacing: 2px; color: #00004C; }

/* ADMIN albums-photos */
ul#list-photos li.highlight {
  background: #f2f2f2;
  border: 1px dashed #212326;
  width: 120px;
  height: 90px;
}
ul#list-photos { list-style: none; }
ul#list-photos li { border: 1px solid #ddd; padding: 4px; width: auto; height: 140px; cursor: move; float: left; margin-bottom: 5px; margin-right: 4px; background: #fff; color:#212326; box-shadow:2px 2px 5px #ccc; }



#header_mobile, #footer_mobile {
	display: none;
}



.liste-vins-pictos-container {
	width:30px;
	display: table-cell;
}

.liste-vins-pictos {
	display: flex;
	width: 28px;
	flex-direction: row;

}

.liste-vins .picto {
	width:12px; height:12px; margin-top:6px
}

.liste-vins .pictobio {
	width:14px; height:14px; margin-top:6px
}


.liste-vins .details .a > img {
	width: 15px;
	height: 16px;
	margin-top: 3px
}

.liste-vins .details .a {
	display:flex;
	flex-direction: row;
	justify-content: center;
}

#page-vin .vinvisuel {
	width: 40%;
	order: 2;
	text-align:center;
}


#page-vin ul.vincaras  {
	min-width:250px;
	float:left;
	margin-bottom: 0;
	width:50%;
	order: 1;
}



.vincaras li {
	display:flex;
}

ul.compte_voir li {
	display: flex;
}
/*
#page-compte ul.compte_voir li {
	display: flex;
}
*/

/* Nouvelle liste vins en cartes */
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

#col-centre h2.liste-vins.cc-appellation-title,
h2.liste-vins.cc-appellation-title {
	display: flex;
	align-items: center;
	gap: 13px;
	margin: 18px 0 13px;
	padding: 0;
	background: transparent;
	color: #343434;
	font: normal normal normal 58px/0.9 Montserrat, cursive;
	letter-spacing: 0;
}

#col-centre h2.liste-vins.cc-appellation-title::before,
h2.liste-vins.cc-appellation-title::before {
	content: "";
	width: 44px;
	height: 5px;
	border-radius: var(--radius-s);
	background: #f4d65c;
}

ul.liste-vins.cc-wine-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 17px;
	align-items: stretch;
	margin: 0 0 28px;
	padding: 0;
	list-style: none;
}

.liste-vins.cc-wine-grid li.cc-wine-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 100%;
	height: auto;
	overflow: hidden;
	margin: 0;
	padding: 0;
	border: 1px solid #d9d1c5;
	border-radius: var(--radius-m);
	background: #fff;
	box-shadow: 0 1px 0 rgba(0, 0, 0, .03);
	line-height: 1.42;
	transition: border-color .18s ease, background-color .18s ease;
}

/* Survol B+ : crème doré + liseré marqué, sans lift ni ombre (palette encre/or, validé comparateur 2026-06-20) */
/* pt13d — SCINDÉ : :focus-within (clavier) reste hors media, le survol y entre. */
.liste-vins.cc-wine-grid li.cc-wine-card:focus-within {
	background: #F8F4EA;
	border-color: #D8BE8A;
}
@media (hover: hover) {
	.liste-vins.cc-wine-grid li.cc-wine-card:hover {
		background: #F8F4EA;
		border-color: #D8BE8A;
	}
}

.cc-wine-card__media {
	position: relative;
	display: grid;
	min-height: 178px;
	place-items: center;
	padding: 12px 18px 8px;
	background: #fff;
}

.cc-wine-card__media::after {
	content: "";
	position: absolute;
	left: 26%;
	right: 6%;
	bottom: 16px;
	height: 28px;
	border-radius: 50%;
	background: radial-gradient(ellipse 60% 100% at 30% 50%, rgba(73, 54, 32, .20), rgba(73, 54, 32, 0) 72%);
	transform: rotate(-7deg);
	transform-origin: left center;
	pointer-events: none;
}

.cc-wine-card__media a {
	position: relative;
	z-index: 1;
	display: grid;
	min-height: 154px;
	width: 100%;
	place-items: center;
}

.cc-wine-card__product {
	display: block;
	width: auto;
	max-width: 88%;
	max-height: 166px;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.cc-wine-card__badges {
	position: absolute;
	z-index: 2;
	top: 11px;
	left: 11px;
	right: 11px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: space-between;
	pointer-events: none;
}

.cc-wine-badge {
	display: inline-flex;
	min-height: 28px;
	align-items: center;
	border-radius: 999px;
	background: #fff;
	padding: 5px 10px;
	color: #151515;
	font: normal normal 700 13px/1 Montserrat, Arial, sans-serif;
	box-shadow: 0 10px 20px rgba(32, 24, 18, .08);
}

/* pt5 (retours 20260718) — bio des cartes cc-wine-card : logo AB officiel en coin
   bas-droit de la photo (aligné sur .wc-bio des wine-card), au lieu du badge texte
   « Bio ». Décision Thomas : logo AB officiel partout sauf les filtres catalogue. */
.cc-wine-card__bio {
	position: absolute;
	right: 10px;
	bottom: 10px;
	z-index: 3;
	height: 28px;
	width: auto;
	mix-blend-mode: multiply;
	pointer-events: none;
}

/* pt5 — logo officiel AB dans le fil du texte (specs fiche vin, encart droite,
   tag fiche vigneron, légende FAQ). multiply efface le fond blanc du JPG. */
.cc-bio-inline {
	height: 16px;
	width: auto;
	vertical-align: middle;
	mix-blend-mode: multiply;
}

.cc-wine-badge--heart {
	color: var(--clr-or-text);
}

.cc-wine-badge--vip,
.cc-wine-badge--stock {
	background: #151515;
	color: #fff;
}

.cc-wine-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 12px 15px 0;
	border-top: 1px solid #f0ece5;
}

.cc-wine-card__title {
	min-height: 40px;
	margin: 0;
	color: #151515;
	font: normal normal 700 24px/1.03 "Montserrat", Georgia, serif;
	letter-spacing: 0;
}

/* pt13d (29/07) — le nom du vin restait DORÉ après un effleurement : c'est le
   symptôme littéral du retour. cf. pt11-survol-tactile. */
@media (hover: hover) {
	.cc-wine-card__title a:hover {
		color: var(--clr-or-text);
	}
}

.cc-wine-card__price-row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 10px;
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px solid #d9d1c5;
}

.cc-wine-card__price {
	color: var(--clr-or-text);
	font: normal normal 700 33px/0.85 "Montserrat", Georgia, serif;
}

.cc-wine-card__price .prix_normal {
	color: #555;
	font-size: 55%;
	font-weight: 600;
	text-decoration: line-through;
	vertical-align: 4px;
}

.cc-wine-card__format {
	margin-top: 3px;
	color: #5f5f5f;
	font-size: 13px;
	font-weight: 700;
}

.cc-wine-card__commerce-note {
	margin-top: 3px;
	color: var(--clr-or-text);
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
}

.cc-wine-card__points {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: #477455;
	font-size: 13px;
	font-weight: 700;
}

.cc-wine-card__points img {
	width: 17px;
	height: 17px;
}

.cc-wine-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	align-items: center;
	min-height: 40px;
	margin: auto -15px 0;
	padding: 10px 15px 8px;
	background: #fff;
	color: #666;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .03em;
	text-transform: uppercase;
}

.cc-wine-card__meta span + span::before {
	content: "\00b7";
	margin-right: 5px;
	color: var(--clr-or-text);
}

.cc-wine-card__actions {
	position: absolute;
	z-index: 4;
	left: 0;
	right: 0;
	bottom: 0;
	display: grid;
	grid-template-columns: 74px minmax(0, 1fr);
	margin: 0;
	opacity: 0;
	pointer-events: none;
	transform: translateY(100%);
	transition: opacity .18s ease, transform .18s ease;
}

.cc-wine-card:hover .cc-wine-card__actions,
.cc-wine-card:focus-within .cc-wine-card__actions {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}

.cc-wine-card__qty {
	display: grid;
	align-items: stretch;
	min-height: 40px;
	background: #151515;
}

.cc-wine-card__qty select {
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: 0;
	background: #151515;
	color: #fff;
	padding: 0 8px;
	font-size: 16px;
	font-weight: 700;
	text-align: center;
}

.cc-wine-card__cart-button {
	display: grid;
	grid-template-columns: 42px minmax(0, 1fr);
	align-items: center;
	min-height: 40px;
	border: 0;
	border-radius: var(--radius-s);
	background: var(--clr-ink);
	color: #fff;
	font-size: 12px;
	font-weight: var(--btn-weight);
	letter-spacing: .08em;
	line-height: 1.1;
	text-align: center;
	text-transform: uppercase;
	cursor: pointer;
	/* Ombre de contact (cf. .btn-primary) — les états --maxed/--disabled la neutralisent. */
	box-shadow: var(--btn-shadow);
}

/* Direction validée : icône CTA dorée sur bouton encre, sans liseré */
.cc-wine-card__cart-button svg, .cc-wine-card__cart-button svg *,
.order-btn-primary svg, .order-btn-primary svg *,
#compte-content .btn-primary svg, #compte-content .btn-primary svg *,
.cdw-btn svg, .cdw-btn svg *,
.cc-cart-ackbtn svg, .cc-cart-ackbtn svg *,
.cart-drawer-cta svg, .cart-drawer-cta svg *,
.btn-ap-primary svg, .btn-ap-primary svg *,
.cart-added-see svg, .cart-added-see svg *,
#admin .bouton svg, #admin .bouton svg * { fill: var(--clr-or); stroke: var(--clr-or); }

/* Retour Thomas : bouton « Ajouter » plein en permanence — le survol
   n'introduit plus de changement de couleur (repos = survol). */
.cc-wine-card__cart-button:hover,
.cc-wine-card__cart-button:focus-visible {
	background: var(--clr-ink);
	color: #fff;
}

.cc-wine-card__cart-button span:last-child {
	min-width: 0;
	padding: 0 10px;
	white-space: nowrap;
}

.cc-wine-card__cart-icon {
	display: grid;
	width: 42px;
	height: 40px;
	place-items: center;
	background: #fff;
}

.cc-wine-card__cart-icon img {
	width: 28px;
	height: 28px;
}

.cc-wine-card__cart-button--disabled {
	grid-column: 1 / -1;
	grid-template-columns: 1fr;
	background: #575757;
	cursor: not-allowed;
	box-shadow: none;
}

/* #16 — État positif « Au maximum » (le client a atteint le max au
   panier). Classe SÉPARÉE de --disabled (= « Épuisé », gris foncé conservé)
   pour que les deux états soient enfin distincts. Reprend la largeur pleine
   de --disabled ; palette crème / liseré doré / bordeaux. */
.cc-wine-card__cart-button--maxed {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 40px;
	/* État max : encre plein, plus de liseré doré (retour Thomas). Même ombre
	   de contact que « Ajouter » (retour Thomas 04/07 : pilule encre = ombrée). */
	background: var(--clr-ink);
	box-shadow: 0 1px 2px rgba(36,26,18,.30);
	color: #fff;
	text-transform: none;
	letter-spacing: .02em;
	cursor: default;
}
.cc-wine-card__cart-button--maxed:hover,
.cc-wine-card__cart-button--maxed:focus-visible {
	background: var(--clr-ink);
	color: #fff;
}
.cc-wc-maxed-ic { display: inline-flex; align-items: center; }

.cc-wine-card__cart-button--success,
.cc-wine-card__cart-button--success:hover,
.cc-wine-card__cart-button--success:focus-visible {
	background: var(--clr-ink-dark);
	cursor: default;
}

@media (max-width: 980px) {
	ul.liste-vins.cc-wine-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 680px) {
	#col-centre h2.liste-vins.cc-appellation-title,
	h2.liste-vins.cc-appellation-title {
		font-size: 50px;
	}

	ul.liste-vins.cc-wine-grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.liste-vins.cc-wine-grid li.cc-wine-card {
		display: grid;
		grid-template-columns: 108px minmax(0, 1fr);
		min-height: 0;
		width: 100%;
	}

	.cc-wine-card__media {
		min-height: 178px;
		padding: 12px 8px;
		border-right: 1px solid #f0ece5;
	}

	.cc-wine-card__media::after {
		left: 22%;
		right: 8%;
		bottom: 28px;
		height: 20px;
	}

	.cc-wine-card__media a {
		min-height: 132px;
	}

	.cc-wine-card__product {
		max-width: 100%;
		max-height: 136px;
	}

	.cc-wine-card__badges {
		top: 8px;
		left: 8px;
		right: 8px;
	}

	.cc-wine-badge {
		min-height: 24px;
		padding: 4px 8px;
		font-size: 11px;
	}

	.cc-wine-card__body {
		min-width: 0;
		overflow: hidden;
		padding: 11px 12px 48px;
		border-top: 0;
	}

	.cc-wine-card__title {
		min-height: 0;
		font-size: 20px;
		line-height: 1.02;
	}

	.cc-wine-card__price-row {
		justify-content: flex-start;
		gap: 12px;
	}

	.cc-wine-card__price {
		font-size: 29px;
	}

	.cc-wine-card__points {
		gap: 2px;
		font-size: 11px;
	}

	.cc-wine-card__points img {
		width: 14px;
		height: 14px;
	}

	.cc-wine-card__meta {
		display: none;
	}

	.cc-wine-card__actions {
		left: 108px;
		opacity: 1;
		pointer-events: auto;
		transform: none;
		grid-template-columns: 62px minmax(0, 1fr);
	}

	.cc-wine-card__qty,
	.cc-wine-card__cart-button {
		min-height: 42px;
	}

	.cc-wine-card__cart-button {
		grid-template-columns: 40px minmax(0, 1fr);
		font-size: 11px;
	}

	.cc-wine-card__cart-icon {
		width: 40px;
		height: 42px;
	}
}

@media (hover: none) {
	.cc-wine-card__body {
		padding-bottom: 44px;
	}

	.cc-wine-card__actions {
		opacity: 1;
		pointer-events: auto;
		transform: none;
	}

	.liste-vins.cc-wine-grid li.cc-wine-card:hover {
		transform: none;
	}
}
/*
#page-form ul.compte_voir li {
	display: flex;
}

#page-compte_ajout ul.compte_voir li {
	display: flex;
}

#page-login ul.compte_voir li {
	display: flex;
}
*/
#page-inscription-newsletter ul.newsletter li {
	display: flex;
}

#page-inscription-newsletter ul.newsletter .valeursnewsletter {
	display: flex;
	flex-direction: row;
}

#page-commande ul.recap_panier li {
	display: flex;
}

#sousrub {
	display:none;
}

#sousrub a {
	float: left;
	width: 50%;
	text-align:left;
	min-height: 48px;
	color: black;
}

/* RESPONSIVE */
@media only screen and (max-width: 1130px) {
	body {
		padding-left:0px;
		padding-right:0px;
	}
	
	h1 {
		text-align: left;
	}

	/* #3 (10/07) — ombre noire legacy sur les cases retirée : incompatible avec
	   la case custom dorée (appearance:none) introduite au global. */

	#sousrub {
		display:block;
	}

	.hidemobile {
		display: none;
	}
	#header_desktop {
  		display: none;
	}

	.height0mobile {
		height: 0px;
	}

	/* #header_desktop {
		display: none;
	} */

	/* 🧨 CLS (27/07) — LE HEADER DOIT ÊTRE À SA PLACE AU PREMIER PIXEL PEINT.
	   `top: 0` en dur faisait recouvrir intégralement le bandeau d'annonce
	   (.cc-annonce, opaque, émis AVANT dans le flux) tant que le JS d'index.php
	   (applyOffset, lié à DOMContentLoaded) n'avait pas posé son décalage — soit
	   ~670 ms de bandeau invisible sur le catalogue, où DCL attend une dizaine de
	   <script src> bloquants. La position vient désormais d'une variable posée par
	   un script SYNCHRONE émis juste après le bandeau (index.php), donc avant tout
	   rendu ; applyOffset ne fait plus que l'entretenir (scroll, resize, resize du
	   bandeau). Repli 0px : si le bandeau BO est vide, le script ne pose rien et on
	   retrouve le comportement d'origine. */
	#header_mobile {
		display: block;
		position: fixed;
		width: 100%;
		background-color:white;
		z-index:1000;
		top: var(--cc-header-mobile-top, 0px);
		font-family: 'Roboto', Arial, Verdana, sans-serif;
		transition: transform 0.3s ease;
	}

	#header_mobile.header--hidden {
		transform: translateY(-100%);
	}

	#footer_mobile {
		display: block;
	}

	#footer_mobile_encarts {
		display:flex;
		flex-wrap: wrap;
		max-width: 620px;
		margin-left:auto;
		margin-right:auto;
		justify-content: center;
	}

	.footer_mobile_encarts_encart  {
		width: 225px;
		padding-right: 50px; 
		padding-left: 50px; 
	}


	/* Header mobile : alignement vertical homogène des icônes
	   (burger 25px, loupe 39px, panier 50px, compte 50px, badge 20px) */
	#header_mobile a > img,
	#header_mobile #nbArticlesPanier {
		vertical-align: middle;
	}

	/* Badge nb articles : sorti du flux pour ne plus pousser le panier vers le haut */
	#paniermobile { position: relative; display: inline-block; }
	#cart-drawer-btn-mobile { position: relative; display: inline-block; }
	#nbArticlesPanier {
		position: absolute;
		top: -8px; right: -8px;
		text-align: center;
		border: 1px solid green; border-radius: 50%; width:20px; height:20px;
		background-color: white;
		line-height: 18px;
		font-size: 13px;
	}

	#col-gauche {
		position: fixed;
		background-color: #eeeeee;
		left: 0;
		top: var(--cc-mobile-menu-top, 140px);
		bottom: 0;
		width: 350px;
		max-width: calc(100vw - 30px);
		font-size: 1.2em;
		line-height: 1.4em;
		z-index:999;
		display:none;
		overflow-y: auto;
	}

	#closemenuburger {
		display:block;
		position: absolute;
		top: 0;
		right: 0;
	}

	/* Le bandeau USP rouge desktop (.header-top) n'a aucune raison d'être sur
	   mobile (le header mobile a son propre .m-promo). Laissé dans le flux, ses
	   ~78px restaient SOUS le header fixe et créaient un vrai « trou » blanc sous
	   le header sur toutes les pages (catalogue, contenu, tunnel…).

	   pt (retour Thomas 26/07) — « le téléphone perdu tout seul dans un bandeau
	   noir dupliqué » : l'accueil était exempté de ce masquage. Or à ≤768px cette
	   barre perd son .ht-center (l.7857) et son bloc avis est éteint
	   (cc_avis_verifies_actif() = OFF) : il ne lui restait QUE le .ht-right-item
	   téléphone, seul dans une bande encre pleine largeur, collée juste au-dessus
	   du .m-promo (même fond encre) du header mobile → lu comme un doublon.
	   Mesuré au banc iPhone 13 (390×844, accueil dev) : .header-top 56,1→88,8px,
	   un seul enfant visible = « 04 75 07 94 60 ». Le tel reste joignable en un
	   tap dans le tiroir burger (.dr-tel, header.inc.php).
	   L'exception n'a plus lieu d'être : le hero réserve lui-même la hauteur du
	   header fixe en padding-top (cf. #homepage-content .hero plus bas), il n'a
	   jamais eu besoin de cette barre dans le flux. On masque donc PARTOUT. */
	.header-top {
		display: none;
	}

	/* 🧨 pt (retour 26/07, suite) — le second symptôme de la même capture (bande
	   blanche entre ce bandeau et le header mobile) vient du transform de
	   #site-sticky-header, qui en fait le containing block du #header_mobile
	   fixed → double décalage. Le correctif ne peut PAS vivre ici : il serait
	   battu par spécificité par body.homepage #site-sticky-header, défini plus
	   bas. Cf. « DOUBLE DÉCALAGE DU HEADER FIXE » dans la section HOMEPAGE. */

	/* Réservation de l'espace du header mobile fixe : on consomme la hauteur
	   RÉELLE mesurée en JS (--header-mobile-h, cf. index.php). Repli 110px ≈
	   hauteur réelle si le JS n'a pas encore posé la var (anti-flash).
	   IMPORTANT : on réserve en PADDING-top (et non margin-top). Une fois
	   .header-top masqué, #site-sticky-header est de hauteur nulle ; un
	   margin-top se « collapse » à travers lui et fait dériver le header fixe
	   (qui y est ancré via son transform). Le padding est insensible au
	   margin-collapse. Tous les conteneurs de premier niveau réservent ainsi :
	   #wrappeur (pages standard/fiche), .cc-content (contenu), #compte-content,
	   #tunnel-content. Le catalogue (#catalogue-content) réserve ici AUSSI depuis le
	   27/07 : il ne réservait qu'en JS (applyOffset, padding inline), donc à partir du
	   DOMContentLoaded — toute la page catalogue démarrait sous le header puis descendait
	   de 142px d'un bloc. Mesuré au banc iPhone 13 sur dev : CLS 0,214 sur /boutique.html,
	   un seul décalage massif, contre 0,007 sur l'accueil et 0 sur une page de contenu,
	   qui réservaient déjà en CSS. Le JS continue d'affiner (padding 0 quand le header se
	   masque au scroll) : son style inline bat cette règle, rien ne change de ce côté.

	   🧨 pt3 (retours 26/07) — CETTE RÉSERVATION EST CORRECTE, ne pas y toucher pour
	   régler le « vide au-dessus de la barre des filtres ». Le vide venait du bandeau
	   d'annonce .cc-annonce (message_bandeau, index.php:239), premier bloc du flux,
	   que #header_mobile (fixed, top:0, opaque) recouvrait intégralement : 56px de
	   bandeau invisible, puis 140px de réservation empilés dessus = 55px de blanc.
	   Le correctif est dans index.php : le header fixe se DÉCALE sous le bandeau tant
	   qu'il n'a pas défilé. Les conteneurs, eux, continuent de réserver la seule
	   hauteur du header — le bandeau occupe déjà la sienne dans le flux. */
	#wrappeur {
		margin-top: 0;
		padding-top: var(--header-mobile-h, 110px);
		width: 98%;
	}
	.cc-content,
	#compte-content,
	#tunnel-content,
	#catalogue-content,
	/* #vignerons-content : conteneur pleine largeur (liste annuaire + fiche
	   domaine). Il ne réservait pas la hauteur du header fixe → le haut du hero
	   sombre « Nos vignerons » (et le haut de la fiche) passait sous le header
	   collant en mobile (retour Thomas 20260622-3 #14). Le padding blanc ainsi
	   réservé est masqué par le header opaque, comme pour #wrappeur. */
	#vignerons-content {
		margin-top: 0;
		padding-top: var(--header-mobile-h, 110px);
	}

	/* Homepage : le hero est avant le wrappeur, il gère sa propre superposition
	   → aucune réservation. */
	#page-index #wrappeur {
		margin-top: 0;
		padding-top: 0;
	}

    #actualites {
		/* display: none; */
	}

	#col-centre {
		width:100%;
		max-width: 870px; 
		padding:0;
		margin-left: auto;
		margin-right: auto;
		border-left: none;
	}

	#breadcrumb_link_1 { display: none;	}

	

	/* Hauteur fluide pour ne pas tronquer les titres longs (4+ lignes) */
	.liste-vins li { min-height: 76px; height: auto; padding: 6px 0; line-height: 20px; }

	.liste-vins .details {	width: 30px; font-size: 10px;	}

	.liste-vins .details .a {	display:flex;		flex-direction: column;		justify-content: center;	}

	.liste-vins .details .a > img {		margin-left: 5px;	}

	.liste-vins-pictos-container { width:20px }

	.liste-vins-pictos { flex-direction: column; width: 15px; }

	.liste-vins .pictobio {	width:15px; height:14px; margin-top:6px; margin-left:-1px; display:table-cell;	}

	.liste-vins .addtocart { width: 110px; }

	.liste-vins .addtocart select {	width: 48px; height: 48px; font-size: 16px;	}

	.liste-vins .addtocart img { width: 48px; height: 34px; }

	.liste-vins .prix {
		width: 55px;
	}

	#page-vin .entete {
		margin: 0 5px 0 0px;
	}

	#page-vin .description {
		clear:both;
	}

	#page-vin photo_produit {
		float: right;
	}

	#page-vin ul.vincaras  {
		min-width:250px;
		padding:0;
	}

	/* Phase 3 — fiche vin : colonne unique sur mobile */
	ul.vincaras li {
		grid-template-columns: 1fr;
		border-bottom: 1px solid var(--clr-border);
		padding: var(--space-xs) 0;
	}
	ul.vincaras li:last-child {
		border-bottom: none;
	}
	#page-vin .entete {
		border-right: none;
		text-align: left;
		font-size: 0.85em;
		color: #999;
		line-height: 20px;
	}
	#page-vin .valeur {
		padding-left: 0;
		font-weight: bold;
	}

	/* Phase 3 — hero homepage visible sur mobile (réduit) */
	#visuel_home {
		aspect-ratio: 3/1;
		min-height: 200px;
		font-size: 22px;
		line-height: 28px;
		padding: 10px 0;
		margin-top: var(--header-mobile-h, 110px);
	}

	/* Retours D1-3/D1-7 (18/06) — La refonte accueil a remplacé #visuel_home par
	   .hero dans #homepage-content ; l'ancienne réservation ci-dessus vise un ID
	   mort. Le hero se superpose volontairement au header fixe (image de fond
	   translucide sous le header). MAIS son CONTENU — kicker doré + H1 —
	   passait sous le bas du header (la rangée de recherche) et était mangé.
	   On réserve la hauteur RÉELLE du header (--header-mobile-h, posée en JS par
	   index.php) en PADDING-top (pas margin → margin-collapse) ; box-sizing
	   border-box pour que la hauteur du hero absorbe le padding sans repousser
	   les sections suivantes. Mesuré au harnais iPhone 13 : overlap +12px → 0. */
	#homepage-content .hero {
		padding-top: var(--header-mobile-h, 110px);
		box-sizing: border-box;
	}
	/* inside en flux normal → le hero grandit pour tout contenir, pas de troncature */
	#visuel_home_inside {
		position: relative;
		top: auto;
		transform: none;
		display: block;
		margin: 0 20px;
	}
	#visuel_home span.sub {
		font-size: 14px;
		line-height: 18px;
	}
	/* CTA en flux normal sur mobile */
	#visuel_home_cta {
		display: block;
		position: relative;
		bottom: auto;
		left: auto;
		margin-top: 8px;
		padding: 10px 20px;
	}



	#page-panier .entete {
		margin: 0 5px 0 0px;
	}

	#page-commande .entete {
		margin: 0 5px 0 0px;
	}

	#page-form .entete {
		margin: 0 5px 0 0px;
		width:120px;
	}
	
	#page-compte #form_update {
		max-width: 550px;
		margin-left: auto;
		margin-right: auto;
	}



	#recherche ul {
		padding-left: 0px;
	}


	#recherche	.entete {
		margin-top: -10px;
		margin-left: 0px;
		width: 30%;
		line-height: 48px;
		font-size: 1.2em;
		}

	#recherche .valeur {
		width: 60%;
	}

	#recherche .valeur select {
			font-size: 1.2em;
	}

	#recherche .bouton {
		font-size:100%;
	}

	#page-compte ul.compte_voir li {
		flex-direction: column;
		margin-bottom: 10px;
	}

	#page-compte ul.compte_voir li div.entete {
		margin-left:0;
		border-right: none;
		text-align: left;
	}

	/* #11 (retour Thomas 2026-06-11) — débord horizontal mobile de « Mon compte » :
	   les inputs legacy à attribut size= (notamment l'e-mail size=40 ≈ 415px) forçaient
	   une largeur > viewport. On les borne au conteneur et on retire l'indentation par
	   défaut du <ul>. max-width (pas width) → aucun changement desktop/tablette large. */
	#page-compte ul.compte_voir { padding-left: 0; }
	#page-compte ul.compte_voir li input.form,
	#page-compte ul.compte_voir li input.formc { width: 100%; max-width: 100%; box-sizing: border-box; }

	#page-compte_ajout ul.compte_voir li div.entete {
		margin-left:0;
		/* border-right: none; */
		text-align: left;
		width:120px;
	}

	#page-login  ul.compte_voir  li div.entete {
		margin-left:0;
		width:120px;
	}


	#page-inscription-newsletter ul.newsletter {
		margin-left: -20px;
		padding-left: 0px;
	}

	#page-inscription-newsletter ul.newsletter li div.entete {
		margin: 0 5px 0 0px;
	}
}

/* RESPONSIVE */
@media only screen and (max-width: 600px) {

	.ban-address-suggestions {
		width: 100%;
		min-width: 0;
	}

	#page-form ul.compte_voir li {
		flex-direction: column;
	}


	#page-login ul.compte_voir li {
		flex-direction: column;
	}



	#page-compte_ajout ul.compte_voir li {
		flex-direction: column;
	}

	#page-compte_ajout .entete {
		text-align:left; 
		margin-left: 10px;
		border-right: none;
	}

	#page-login .entete {
		text-align:left; 
		margin-left: 10px;
		border-right: none;
	}

	#page-form .entete {
		text-align:left; 
		margin-left: 10px;
		border-right: none;
	}

	#recherche .entete {
		text-align:left; 
		margin-left: 10px;
		border-right: none;
	}

	#page-vin .vinvisuel {
		width: 100%;
		order: 1;
		text-align:center;
	}

	#page-vin ul.vincaras  {
		width:100%;
		order: 2;
	}

	#page-vin .item {
		flex-direction: column;
	}

	#page-vin .valeur {
		width: 69%;
	}

	#recherche li {
		flex-direction: column;
	}
	#recherche .entete {
		text-align:left;
		margin-left: 10px;
		border-right: none;
		width: auto;
	}

	#recherche .valeur {
		margin-left: 20px;
		width: auto;
	}

	/* Input mot-clé + bouton en colonne sur mobile */
	#recherche .valeur.double {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}

	#recherche input.rech-input {
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
	}

	#producteur-bloc1 { /* ex : /producteur-56-christophe-curtat.html */
		width:90%;
		margin-left: 10px;
	}
	#producteur-bloc2 { /* ex : /producteur-56-christophe-curtat.html */
		width:90%;
		margin-left: 10px;
	}

	#producteur-coordonnees {
		margin-left: 10px;
	}

	#page-inscription-newsletter li {
		flex-direction: column;

	}

	#page-inscription-newsletter .entete {
		text-align:left; 
		margin-left: 10px;
		border-right: none;
	}

	#page-inscription-newsletter ul.newsletter {
		margin-left: 10px;
	}

	#page-inscription-newsletter ul.newsletter .valeursnewsletter {
		display:flex;
		flex-direction: column;
	}
}

/* =============================================================
   Phase 3 — Animations vanilla JS (remplace jQuery UI effects)
   ============================================================= */
@keyframes shake {
	0%, 100% { transform: translateX(0); }
	20%       { transform: translateX(-6px); }
	40%       { transform: translateX(6px); }
	60%       { transform: translateX(-4px); }
	80%       { transform: translateX(4px); }
}
.shake {
	animation: shake 0.4s ease-in-out;
}

/* =============================================================
   Phase 3 — Dialog natif (remplace bPopup + jQuery UI Dialog)
   ============================================================= */
dialog {
	border: none;
	border-radius: var(--radius-l);
	padding: 0;
	max-width: 90vw;
	box-shadow: 0 8px 40px rgba(0,0,0,0.25);
}
dialog::backdrop {
	background: rgba(0, 0, 0, 0.55);
}

/* Popup panier (#message_popup) — registre ERREUR.
   Vague MODAL (messages système, 22/07) : cette modale ne porte QU'UNE erreur
   (« Quantité trop importante… » via panier_gestion.inc.php ; le chemin succès
   est commenté). L'ancien rendu = carte grise + cadre or 4px = registre FAUX
   (l'or est la couleur des feedbacks bénins maison). On la bascule en brique
   ERREUR Direction B, cohérente avec .cc-step-error (tunnel) et .auth-page
   .erreur (auth) : carte blanche + filet rouge --fb-no-tx + icône cercle-
   exclamation + texte encre. Forme = variante B (choix Thomas 22/07) : filet
   GAUCHE + icône absolue en haut à gauche + texte aligné à gauche — signature
   strictement identique aux bandeaux inline (calque .auth-page .erreur). CSS-
   only : aucun markup PHP touché (l'icône est un ::before absolu, hors flux du
   hook JS showModal). */
#message_popup {
	position: relative;
	background-color: var(--c-surface);
	border: 1px solid var(--c-line);
	border-left: 4px solid var(--fb-no-tx);
	text-align: left;
	padding: 26px 30px 24px 62px;
	color: var(--c-ink);
	font-weight: 600;
	min-width: 300px;
	max-width: 460px;
}
/* Icône erreur (cercle-exclamation rouge) calée en haut à gauche, dans la
   gouttière ménagée par padding-left. Hex %23A33327 = --fb-no-tx « baké » dans
   le data-uri (exception data-uri actée, cf. tunnel/auth/compte). Alignée sur
   la 1re ligne du message (top ≈ padding-top). */
#message_popup::before {
	content: "";
	position: absolute;
	left: 22px;
	top: 25px;
	width: 26px;
	height: 26px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A33327' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v5M12 16h.01'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
#message_popup .dialog-actions {
	margin-top: 22px;
	display: flex;
	gap: 20px;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
}
/* Bouton « Fermer » (chemin réel, message_timer>0) : gabarit bouton encre
   tokenisé (--btn-*), aligné sur #news_popup .dialog-close mais sans valeur en
   dur. Avant : bouton navigateur brut (aucune règle #message_popup .dialog-close). */
#message_popup .dialog-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: var(--btn-min-h);
	padding: var(--btn-pad-y) var(--btn-pad-x);
	background: var(--c-ink);
	color: #fff;
	border: none;
	border-radius: var(--radius-s);
	box-shadow: var(--btn-shadow);
	font: var(--btn-weight) var(--btn-font)/1 var(--ff-body);
	letter-spacing: var(--btn-letter);
	cursor: pointer;
}
#message_popup .dialog-close:hover {
	background: var(--c-ink-hover);
}
/* Liens or (chemin succès, message_timer<=0 — aujourd'hui code mort car le
   succès est commenté ; conservés tokenisés au cas où il serait réactivé). */
#message_popup .dialog-actions a {
	color: var(--c-accent-text);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Popup news (#news_popup) */
#news_popup {
	padding: 30px;
	max-width: 600px;
}
#news_popup h2 {
	margin-top: 0;
}
#news_popup .dialog-close {
	display: block;
	margin: 20px auto 0;
	padding: 10px 30px;
	background: var(--clr-ink);
	color: var(--clr-white);
	border: none;
	border-radius: var(--radius-s);
	cursor: pointer;
	font: normal normal 500 18px/25px var(--ff-body);
	letter-spacing: 0;
}
#news_popup .dialog-close:hover {
	background: var(--clr-ink-dark);
}

/* =============================================================
   Phase 3 — Banner cookies CNIL (tarteaucitron skin maison)
   Cible les éléments générés par tarteaucitron.js (orientation:bottom,
   DenyAllCta:true). Éléments utilisés :
     #tarteaucitronRoot           — racine injectée dans le body
     #tarteaucitronAlertBig       — conteneur principal du bandeau
     .tarteaucitronAlertBigBottom — classe ajoutée pour orientation=bottom
     #tarteaucitronDisclaimerAlert — texte du bandeau
     #tarteaucitronPersonalize2   — bouton "Tout accepter" (.tarteaucitronCTAButton.tarteaucitronAllow)
     #tarteaucitronAllDenied2     — bouton "Tout refuser"  (.tarteaucitronCTAButton.tarteaucitronDeny)
     #tarteaucitronCloseAlert     — bouton "Personnaliser" (secondaire)
   Les règles de tarteaucitron.css sont chargées AVANT site.css dans index.php ;
   on les écrase par sélecteurs plus spécifiques préfixés #tarteaucitronRoot.
   ============================================================= */

/* — Conteneur principal ————————————————————————————————————— */
#tarteaucitronRoot #tarteaucitronAlertBig.tarteaucitronAlertBigBottom {
	/* border-box : sans ça, width:100% + padding déborde le viewport sur mobile
	   et le navigateur dézoome. Cf. revue mobile #4 ancien bandeau. */
	box-sizing: border-box !important;
	display: flex !important;
	flex-direction: row;
	/* nowrap : tout sur UNE ligne (texte qui se comprime + 2 boutons + 2 liens).
	   En wrap, « Politique de confidentialité » basculait sur une 2e rangée et
	   doublait la hauteur du bandeau pour rien. Le mobile repasse en grid plus bas. */
	flex-wrap: nowrap;
	align-items: center;
	gap: 12px 14px;
	position: fixed !important;
	/* #2 (retours 24/06-3) : BARRE PLEINE LARGEUR collée en bas (Option 1 maquette).
	   Fini l'encart centré flottant qui chevauchait hero + barre réassurance.
	   Fond bord-à-bord (--clr-ink), contenu calé sur la grille 1200px via le
	   padding-inline. Texte à gauche, boutons à droite (flex:1 1 auto du disclaimer).
	   Coins droits + liséré supérieur doré conservés. */
	bottom: 0 !important;
	left: 0 !important;
	right: 0 !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	/* padding vertical 16->12 (retour Thomas 14/07 « bandeau trop haut vs son
	   contenu ») : bande plus fine, combinée aux boutons ramenés à 44px. */
	padding: 12px max(40px, calc((100% - var(--max-width)) / 2)) !important;
	background: var(--clr-ink) !important;
	color: #f0f0f0 !important;
	font: normal normal 400 15px/22px var(--ff-body) !important;
	border: none !important;
	border-top: 3px solid var(--clr-or) !important;
	border-radius: 0 !important;
	box-shadow: 0 -4px 20px rgba(0,0,0,0.22) !important;
	z-index: 9999 !important;
	text-align: left !important;
}

/* FIX (2026-06-25) — bandeau cookies FANTÔME qui intercepte les taps.
   Pour masquer le bandeau, tarteaucitron.js pose en INLINE `opacity:0` PUIS
   `display:none` (userInterface.css, l.1347-1350). Le `display:flex !important`
   ci-dessus écrasait le `display:none` inline (un !important de feuille de style
   bat un inline non-important) → le bandeau restait en layout : invisible
   (opacity:0, non écrasé) mais TOUJOURS fixé en bas, z-index 9999, captant les
   clics. Sur mobile, taper « Continuer → Livraison » du tunnel touchait ce
   fantôme (lien Politique) → renvoi vers /legal.html. On rend le bandeau
   réellement inerte une fois masqué : on cible l'inline `display: none` que pose
   tarteaucitron (sérialisé avec l'espace par tous les navigateurs). Spécificité
   supérieure à la règle d'affichage (id+id+classe+attribut), et ne matche JAMAIS
   l'état affiché (inline `display: block`). */
#tarteaucitronRoot #tarteaucitronAlertBig.tarteaucitronAlertBigBottom[style*="display: none"] {
	display: none !important;
}

/* — Texte du bandeau ————————————————————————————————————————— */
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronDisclaimerAlert {
	flex: 1 1 auto;   /* texte à gauche qui grandit ; boutons sur la même rangée à droite */
	color: #f0f0f0 !important;
	font: normal normal 400 14px/21px var(--ff-body) !important;
}
/* Bloc vide injecté après les boutons (tarteaucitron.js:773) = le « vide en dessous ». */
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronPercentage {
	display: none !important;
}
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronDisclaimerAlert strong {
	color: #f0f0f0 !important;
}
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronDisclaimerAlert a {
	color: #ccc !important;
	text-decoration: underline;
}

/* — Groupe de boutons CTA ——————————————————————————————————— */
/* Accepter et Refuser : poids ÉGAL (boutons côte à côte, même taille) */
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronPersonalize2,
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronAllDenied2 {
	flex-shrink: 0;
	/* border-box (retour Thomas 14/07 « boutons trop volumineux ») : sans lui,
	   min-height:44 est la hauteur de CONTENU → +padding 10+10 = 64px rendus (bug
	   64px connu). Avec border-box, min-height:44 devient la hauteur TOTALE → 44px
	   réels (cible tactile mini). Réduit aussi la hauteur du bandeau (16+44+16). */
	box-sizing: border-box !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-height: var(--btn-min-h);
	padding: var(--btn-pad-y) var(--btn-pad-x) !important;
	border-radius: var(--radius-s);
	cursor: pointer;
	font: normal normal var(--btn-weight) var(--btn-font)/20px var(--ff-body) !important;
	font-size: var(--btn-font) !important;
	white-space: nowrap;
	text-decoration: none !important;
	line-height: 20px !important;
	margin-left: 0 !important;
}

/* Accepter — plein crème, texte encre, sans bordure (primaire sur fond sombre) */
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronPersonalize2 {
	background: var(--clr-bg-light) !important;
	color: var(--clr-ink) !important;
	border: none !important;
}
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronPersonalize2:hover {
	background: var(--clr-white) !important;
}

/* Refuser — gris plein translucide, texte clair, sans bordure (neutre sur fond sombre) */
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronAllDenied2 {
	background: rgba(255,255,255,.12) !important;
	color: #f1ece4 !important;
	border: none !important;
}
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronAllDenied2:hover {
	background: rgba(255,255,255,.20) !important;
}

/* Personnaliser + Politique de confidentialité — discrets, secondaires.
   #tarteaucitronPrivacyUrl rendait en noir par défaut → illisible sur le fond sombre. */
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronCloseAlert,
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronPrivacyUrl {
	flex-shrink: 0;
	display: inline-flex !important;
	align-items: center;
	background: transparent !important;
	color: #aaa !important;
	border: none !important;
	font: normal normal 400 13px/18px var(--ff-body) !important;
	font-size: 13px !important;
	padding: 6px 10px !important;
	cursor: pointer;
	text-decoration: underline;
	white-space: nowrap;
	margin-left: 0 !important;
}
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronCloseAlert:hover,
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronPrivacyUrl:hover {
	color: #f0f0f0 !important;
}

/* Masquer l'icône interne tarteaucitron dans les boutons CTA */
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronPersonalize2 .tarteaucitronCheck,
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronAllDenied2 .tarteaucitronCross {
	display: none;
}

@media only screen and (max-width: 1130px) {
	#tarteaucitronRoot #tarteaucitronAlertBig.tarteaucitronAlertBigBottom {
		/* #1 (recadrage poune 20/06) — on COMPACTE la HAUTEUR sur mobile.
		   Grille 2 colonnes : « Tout accepter | Tout refuser » côte à côte (≥44px),
		   puis « Personnaliser | Politique » en une seule rangée de liens discrets.
		   Le texte garde sa propre rangée pleine largeur scrollable. Gain ≈ 2 rangées
		   pleine largeur (~70px) vs l'empilement précédent. On garde la bande pleine
		   largeur collée en bas, le skin sombre, le liséré doré, les coins droits. */
		display: grid !important;
		/* minmax(0,1fr) (retour 14/07) : sans le plancher 0, le minimum d'une
		   colonne 1fr = largeur de son contenu le plus large. « Politique de
		   confidentialité » (nowrap) gonflait la colonne 2 → « Tout refuser » plus
		   large que « Tout accepter ». Le 0 force deux colonnes strictement égales. */
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: stretch !important;
		bottom: 0 !important;
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		/* Plafond abaissé 42vh → 30vh : le texte scrolle, les contrôles restent visibles. */
		max-height: 30vh !important;
		padding: var(--space-sm) var(--space-md) !important;
		/* safe-area : boutons jamais sous la barre d'accueil iPhone */
		padding-bottom: calc(var(--space-sm) + env(safe-area-inset-bottom)) !important;
		gap: var(--space-xs) var(--space-sm) !important;
		font-size: 13.5px !important;
		line-height: 1.45 !important;
		/* Retour 12/06 #9 — on RÉ-AFFIRME le skin sombre sur mobile : sans ça les
		   boutons (pensés pour fond sombre : texte clair) rendaient mal quand le
		   fond repassait clair. Fond aligné sur le token de marque --clr-ink. */
		background: var(--clr-ink) !important;
		color: #f0f0f0 !important;
		border-top: 3px solid var(--clr-or) !important;
	}
	#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronDisclaimerAlert {
		grid-column: 1 / -1;          /* texte sur sa propre rangée pleine largeur */
		min-height: 0;                /* autorise le shrink */
		max-height: 16vh !important;  /* borne le texte ; les contrôles restent dessous */
		overflow-y: auto !important;  /* le texte scrolle, le bandeau reste borné */
		-webkit-overflow-scrolling: touch;
		color: #f0f0f0 !important;
	}
	/* Accepter | Refuser : 2 colonnes, cibles tactiles ≥44px. */
	#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronPersonalize2,
	#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronAllDenied2 {
		width: auto !important;
		min-height: 44px !important;
		text-align: center !important;
		padding: 11px 14px !important;
		font-size: 15px !important;
	}
	#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronPersonalize2 { grid-column: 1; }
	/* « Tout refuser » : colonne 2 (gris plein translucide, sans liseré — cf. desktop). */
	#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronAllDenied2 {
		grid-column: 2;
		color: #f5f5f5 !important;
	}
	/* Personnaliser | Politique : une seule rangée de liens discrets (≠ 2 blocs pleine largeur). */
	#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronCloseAlert,
	#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronPrivacyUrl {
		width: auto !important;
		text-align: center !important;
		justify-content: center;
		color: #cfcfcf !important;
		padding: 6px 8px !important;
		font-size: 12.5px !important;
		/* Colonnes égalisées (minmax 0) : « Politique de confidentialité » ne peut plus
		   élargir sa colonne → on l'autorise à passer sur 2 lignes plutôt que déborder. */
		white-space: normal !important;
		line-height: 1.25 !important;
	}
	#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronCloseAlert { grid-column: 1; }
	#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronPrivacyUrl  { grid-column: 2; }
}

/* =============================================================
   Phase 3 (suite) — PANNEAU de gestion des cookies (la grande modale
   ouverte par « Gérer mes cookies » / « Préférences »). Le bandeau du bas
   (#tarteaucitronAlertBig) est habillé plus haut ; ici on habille
   #tarteaucitron (la modale) + #tarteaucitronBack (le voile).
   Refonte esthétique : carte blanche, en-tête crème CONTENU, lignes de
   service en flex (nom à gauche / interrupteur à droite), catégories
   repliables sobres, ligne obligatoire « Toujours actif », scrollbar
   discrète, pied « Enregistrer » collant.
   Architecture DOM : #tarteaucitron > #tarteaucitronServices (scroll) >
     [#tarteaucitronMainLineOffset = en-tête] + [.tarteaucitronBorder =
     liste des catégories/services] + [#tarteaucitronSave = pied].
   On scope les règles de LIGNE sous .tarteaucitronBorder pour ne PAS
   toucher l'en-tête (qui est hors .tarteaucitronBorder).
   ============================================================= */

/* Taille de police de la modale : le <body> du site est à 20px sur mobile, et la règle
   reset de tarteaucitron `div{font:inherit}` (spécif. 1,0,1) bat son propre `*{14px}`
   (1,0,0) -> la modale HÉRITE les 20px du body -> intro à l'interligne énorme sur
   smartphone (signalé Thomas, invisible en desktop où le body est plus petit). On pose
   une base explicite ; les éléments déjà dimensionnés (H1, intro p, titres…) gardent la
   leur. `text-size-adjust:100%` en plus, au cas où Chrome réel sur-inflate le texte. */
#tarteaucitronRoot {
	-webkit-text-size-adjust: 100% !important;
	text-size-adjust: 100% !important;
}
#tarteaucitronRoot #tarteaucitron { font-size: 13px !important; }

/* Voile sombre derrière la modale */
#tarteaucitronRoot #tarteaucitronBack {
	background: rgba(20,15,15,0.55) !important;
	opacity: 1 !important;
}

/* La carte modale */
#tarteaucitronRoot #tarteaucitron {
	box-sizing: border-box !important;
	max-width: 460px !important;
	width: calc(100% - 32px) !important;
	margin: 0 !important;
	left: 50% !important;
	top: 50% !important;
	transform: translate(-50%, -50%) !important;
	max-height: 86vh !important;
	background: var(--clr-white) !important;
	border: none !important;
	border-radius: var(--radius-l) !important;
	box-shadow: 0 18px 60px rgba(0,0,0,0.35) !important;
	overflow: hidden !important;
	font-family: var(--ff-body) !important;
}

/* Conteneur scrollable interne (tarteaucitron lui pose height/overflow-x
   inline -> on neutralise en !important) + scrollbar discrète */
#tarteaucitronRoot #tarteaucitron #tarteaucitronServices {
	height: auto !important;
	max-height: 86vh !important;
	margin-top: 0 !important;       /* vendored pose 21px -> bande blanche au-dessus du crème */
	padding-top: 0 !important;
	overflow-x: hidden !important;
	overflow-y: auto !important;
	background: var(--clr-white) !important;
	border: none !important;
	scrollbar-width: thin !important;
	scrollbar-color: var(--clr-border) transparent !important;
}
#tarteaucitronRoot #tarteaucitron #tarteaucitronServices::-webkit-scrollbar { width: 8px !important; }
#tarteaucitronRoot #tarteaucitron #tarteaucitronServices::-webkit-scrollbar-track { background: transparent !important; }
#tarteaucitronRoot #tarteaucitron #tarteaucitronServices::-webkit-scrollbar-thumb {
	background: var(--clr-border) !important;
	border-radius: var(--radius-s) !important;
	border: 2px solid var(--clr-white) !important;
}
#tarteaucitronRoot #tarteaucitron .tarteaucitronBorder {
	background: var(--clr-white) !important;
	border: none !important;
	max-height: none !important;
}
#tarteaucitronRoot #tarteaucitron .tarteaucitronBorder > ul { margin: 0 !important; padding: 0 !important; }
#tarteaucitronRoot #tarteaucitron .tarteaucitronBorder .clear { display: none !important; }

/* Fermeture : croix « × » ronde et discrète dans le coin haut-droit (le clic
   sur le voile #tarteaucitronBack ferme aussi le panneau). On masque le mot
   « Fermer » en font-size:0 (conservé dans le DOM pour l'accessibilité) et on
   dessine la croix en ::before. */
#tarteaucitronRoot #tarteaucitronClosePanel {
	position: absolute !important;
	top: 9px !important;
	right: 9px !important;
	z-index: 5 !important;
	width: 30px !important;
	height: 30px !important;
	min-width: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
	border: none !important;
	border-radius: 50% !important;
	font-size: 0 !important;        /* cache « Fermer » sans le retirer du DOM (a11y) */
	line-height: 0 !important;
	cursor: pointer !important;
	overflow: hidden !important;
	text-transform: none !important;
}
#tarteaucitronRoot #tarteaucitronClosePanel::before {
	content: '\00d7' !important;    /* × */
	display: block !important;
	font: normal normal 400 24px/30px var(--ff-body) !important;
	text-align: center !important;
	color: var(--clr-text) !important;
}
#tarteaucitronRoot #tarteaucitronClosePanel:hover { background: rgba(0,0,0,0.07) !important; }
#tarteaucitronRoot #tarteaucitronClosePanel:hover::before { color: var(--clr-or-text) !important; }

/* ---- EN-TÊTE crème (titre + intro + couple global) — compact ---- */
#tarteaucitronRoot #tarteaucitron #tarteaucitronMainLineOffset {
	background: var(--clr-bg-light) !important;
	border: none !important;
	border-bottom: 1px solid var(--clr-border) !important;
	margin: 0 !important;
	padding: 14px 18px 14px !important;
	display: block !important;
	/* L'en-tête HÉRITE un line-height fixe de 30px (strut tarteaucitron) qui gonfle
	   l'intro à ~30px/ligne -> interligne énorme + en-tête à 217px qui pousse la
	   dernière ligne service (Google Analytics) sous le bouton « Enregistrer »
	   sticky sur mobile. On casse le strut ici (et sur #tarteaucitronInfo). */
	line-height: 1.4 !important;
}
#tarteaucitronRoot #tarteaucitron .tarteaucitronH1 {
	display: block !important;
	font: normal normal 600 15.5px/1.3 var(--ff-title) !important;
	color: var(--clr-text-dark) !important;
	text-align: center !important;
	margin: 0 0 6px !important;
	padding: 0 34px !important;       /* marge latérale pour ne pas passer sous la croix */
	border: none !important;
}
/* Intro fondue dans le crème (par défaut : bloc blanc gras envahissant).
   ⚠️ Le contenu est un NŒUD TEXTE brut, PAS un <p> (cf. tarteaucitron.js:599) :
   la typo doit être posée ICI, pas sur `#tarteaucitronInfo p` (qui ne matche rien). */
#tarteaucitronRoot #tarteaucitron #tarteaucitronInfo {
	display: block !important;
	position: static !important;
	max-width: none !important;
	width: auto !important;
	background: transparent !important;
	border: none !important;            /* vendored pose des bordures #555 haut/bas */
	color: var(--clr-text) !important;
	text-align: center !important;
	padding: 0 4px !important;
	margin: 0 !important;
	/* interligne régulier + casse le strut 30px hérité (cf. MainLineOffset) */
	font: normal normal 400 12.5px/1.5 var(--ff-body) !important;
}
/* Filet défensif si une version future enveloppe l'intro dans un <p>. */
#tarteaucitronRoot #tarteaucitron #tarteaucitronInfo p {
	margin: 0 !important;
	font: normal normal 400 12.5px/1.5 var(--ff-body) !important;
	color: var(--clr-text) !important;
}
#tarteaucitronRoot #tarteaucitron #tarteaucitronInfo br { display: none !important; }
/* Lien « Politique de confidentialité » : en FLUX INLINE (pas inline-block) pour
   qu'il ne gonfle pas la hauteur de la ligne. Les 2 <br> sources sont masqués, il
   suit donc « …bon fonctionnement. » avec une espace normale. L'ancien margin-top
   + inline-block créait le trou irrégulier au-dessus de cette ligne (recette Thomas). */
#tarteaucitronRoot #tarteaucitron #tarteaucitronPrivacyUrlDialog {
	display: inline !important;
	vertical-align: baseline !important;
	margin: 0 !important;
	background: transparent !important;
	border: none !important;
	padding: 0 !important;
	color: var(--clr-or-text) !important;
	font: normal normal 400 12.5px/1.5 var(--ff-body) !important;
	text-decoration: underline !important;
	cursor: pointer !important;
}
/* Label « Préférences pour tous les services » : RETIRÉ (redondant avec les deux
   boutons explicites juste en dessous) -> en-tête plus compact. */
#tarteaucitronRoot #tarteaucitron #tarteaucitronMainLineOffset .tarteaucitronName {
	display: none !important;
}
/* Couple global « Tout accepter / Tout refuser » centré */
#tarteaucitronRoot #tarteaucitron #tarteaucitronMainLineOffset .tarteaucitronAsk {
	display: flex !important;
	justify-content: center !important;
	gap: 10px !important;
	margin: 12px 0 0 !important;
	padding: 0 !important;
	float: none !important;
}

/* ---- pt4 (retours 26/07) : AUCUN SERVICE À CONSENTIR = AUCUN CHOIX PROPOSÉ ----
   Grief Thomas : « les cookies Google Analytics ne sont pas activés, pourtant ça
   donne l'impression avec la possibilité de tout accepter ou tout refuser ».
   Quand `ga4_measurement_id` est vide, `cc-analytics.js` n'enregistre aucun
   service : le volet ne contient plus que la catégorie « Cookies obligatoires »,
   et proposer « Tout accepter / Tout refuser » puis « Enregistrer » revient à
   offrir un choix qui ne pilote rien — et à laisser croire qu'un traceur est
   posé. `cc-analytics.js` pose alors `html.cc-cookies-sans-service` ; on retire
   ici le duo global ET la barre « Enregistrer » (rien à enregistrer). Reste le
   message natif « Ce site n'utilise aucun cookie nécessitant votre consentement »
   + la ligne « Cookies obligatoires — Toujours actif », qui disent le vrai.
   ⚠️ ne concerne QUE le volet : le bandeau de 1re visite ne s'affiche déjà pas
   dans ce cas (tarteaucitron.js:871 appelle closeAlert() si job.length === 0). */
html.cc-cookies-sans-service #tarteaucitronRoot #tarteaucitron #tarteaucitronMainLineOffset .tarteaucitronAsk,
html.cc-cookies-sans-service #tarteaucitronRoot #tarteaucitron #tarteaucitronSave {
	display: none !important;
}
/* Même raison pour la phrase d'intro : « En autorisant ces services tiers, vous
   acceptez le dépôt et la lecture de cookies… » décrit une action qui n'existe
   pas ici — elle contredit mot pour mot le message « aucun cookie nécessitant
   votre consentement ». On masque le seul <p> : le lien « Politique de
   confidentialité » est un frère (#tarteaucitronPrivacyUrlDialog), il reste. */
html.cc-cookies-sans-service #tarteaucitronRoot #tarteaucitron #tarteaucitronInfo p {
	display: none !important;
}

/* ---- CATÉGORIES repliables (Cookies obligatoires / Mesure d'audience…) ---- */
#tarteaucitronRoot #tarteaucitron .tarteaucitronTitle {
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
}
#tarteaucitronRoot #tarteaucitron .tarteaucitronTitle button {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	width: 100% !important;
	box-sizing: border-box !important;
	margin: 0 !important;
	padding: 13px 20px !important;
	background: transparent !important;
	border: none !important;
	border-top: 1px solid var(--clr-border) !important;
	font: normal normal 600 13.5px/1.3 var(--ff-title) !important;
	color: var(--clr-text-dark) !important;
	text-align: left !important;
	text-transform: none !important;
	cursor: pointer !important;
}
#tarteaucitronRoot #tarteaucitron .tarteaucitronTitle button:hover { background: var(--clr-bg-light) !important; }
#tarteaucitronRoot #tarteaucitron .tarteaucitronPlus,
#tarteaucitronRoot #tarteaucitron .tarteaucitronPlus::before {
	display: inline-block !important;
	width: 14px !important;
	text-align: center !important;
	color: var(--clr-or) !important;
	font-weight: 700 !important;
}
/* Glyphe +/− piloté par aria-expanded du bouton catégorie : tarteaucitron ne change
   pas le glyphe au dépliage (il restait "+" / "✛" même ouvert). On force "+" replié,
   "−" déplié. */
#tarteaucitronRoot #tarteaucitron .tarteaucitronTitle button .tarteaucitronPlus::before {
	content: "+" !important;
}
#tarteaucitronRoot #tarteaucitron .tarteaucitronTitle button[aria-expanded="true"] .tarteaucitronPlus::before {
	content: "\2212" !important;   /* − signe moins */
}
/* « Cookies obligatoires » : catégorie NON dépliable (aucun handler attaché aux
   `mandatory`, cf. tarteaucitron.js:961) → le « + » promet du vide. On le retire et
   on neutralise l'affordance cliquable du bouton de cette ligne (la pastille
   « Toujours actif » et le texte sont déjà visibles en permanence). */
#tarteaucitronRoot #tarteaucitron #tarteaucitronServicesTitle_mandatory .tarteaucitronPlus {
	display: none !important;
}
#tarteaucitronRoot #tarteaucitron #tarteaucitronServicesTitle_mandatory .tarteaucitronTitle button {
	cursor: default !important;
}
#tarteaucitronRoot #tarteaucitron #tarteaucitronServicesTitle_mandatory .tarteaucitronTitle button:hover {
	background: transparent !important;
}
/* Encadré de détail d'une catégorie (déplié au clic).
   ⚠️ tarteaucitron rend `.tarteaucitronDetails` en `position:absolute; z-index:max;
   max-width:270px` (overlay flottant type tooltip). Sur mobile la description
   « Mesure d'audience » se posait PAR-DESSUS la ligne service Google Analytics et la
   masquait ; comme l'overlay est calé sur la ligne, le scroll ne le décolle jamais ->
   l'utilisateur devait replier pour revoir GA. On force le détail dans le flux normal
   (static, pleine largeur) : il pousse GA vers le bas au lieu de le recouvrir. */
#tarteaucitronRoot #tarteaucitron .tarteaucitronDetails {
	position: static !important;
	max-width: none !important;
	width: auto !important;
	z-index: auto !important;
	float: none !important;
	background: var(--clr-bg-light) !important;
	color: var(--clr-text) !important;
	font: normal normal 400 12.5px/1.5 var(--ff-body) !important;
	margin: 0 !important;
	padding: 4px 20px 12px !important;
}

/* ---- LIGNE DE SERVICE (flex : nom à gauche / interrupteur à droite) ----
   On préfixe #tarteaucitronServices pour battre les floats vendored (égalité
   de spécificité sinon, et tarteaucitron.css est chargé APRÈS site.css).
   ⚠️ pt4 (retours 26/07) : on EXCLUT #tarteaucitronNoServicesTitle. Ce <li> porte
   lui aussi .tarteaucitronLine, et tarteaucitron le masque en `display:none`
   INLINE dès qu'un service est enregistré (tarteaucitron.js:1217) — un
   `display:flex !important` ici battait cet inline et le rendait toujours
   visible, d'où l'ancien masquage inconditionnel qui, lui, le cachait même
   quand il disait vrai. Hors de cette règle, le mécanisme natif reprend la
   main : message visible si aucun service, masqué sinon. */
#tarteaucitronRoot #tarteaucitron #tarteaucitronServices .tarteaucitronBorder .tarteaucitronLine:not(#tarteaucitronNoServicesTitle) {
	display: flex !important;
	align-items: center !important;
	gap: 14px !important;
	background: #fcfbfa !important;
	border: none !important;
	border-top: 1px dashed var(--clr-border) !important;
	margin: 0 !important;
	padding: 12px 20px !important;
	min-height: 0 !important;
}
#tarteaucitronRoot #tarteaucitron #tarteaucitronServices .tarteaucitronBorder .tarteaucitronName {
	float: none !important;
	width: auto !important;
	flex: 1 1 auto !important;
	min-width: 0 !important;
	margin: 0 !important;
	text-align: left !important;
	color: var(--clr-text-dark) !important;
	font-family: var(--ff-body) !important;
}
#tarteaucitronRoot #tarteaucitron #tarteaucitronServices .tarteaucitronBorder .tarteaucitronName .tarteaucitronH3 {
	display: block !important;
	margin: 0 0 2px !important;
	font: normal normal 600 13px/1.35 var(--ff-body) !important;
	color: var(--clr-text-dark) !important;
}
#tarteaucitronRoot #tarteaucitron #tarteaucitronServices .tarteaucitronBorder .tarteaucitronName br { display: none !important; }
/* Statut verbeux « interdit - aucun cookie » + liste vide : masqués */
#tarteaucitronRoot #tarteaucitron .tarteaucitronStatusInfo,
#tarteaucitronRoot #tarteaucitron .tarteaucitronListCookies:empty { display: none !important; }
#tarteaucitronRoot #tarteaucitron .tarteaucitronListCookies,
#tarteaucitronRoot #tarteaucitron .tarteaucitronServiceDescription { color: var(--clr-text) !important; }
/* Liens « En savoir plus / Voir le site officiel » sobres */
#tarteaucitronRoot #tarteaucitron .tarteaucitronReadmoreInfo,
#tarteaucitronRoot #tarteaucitron .tarteaucitronReadmoreOfficial,
#tarteaucitronRoot #tarteaucitron .tarteaucitronName a {
	color: var(--clr-or-text) !important;
	font: normal normal 400 11.5px/1.5 var(--ff-body) !important;
	text-decoration: underline !important;
}
#tarteaucitronRoot #tarteaucitron .tarteaucitronReadmoreSeparator { color: var(--clr-text-light) !important; }
/* Couple Autoriser/Interdire de la ligne, à droite */
#tarteaucitronRoot #tarteaucitron #tarteaucitronServices .tarteaucitronBorder .tarteaucitronLine .tarteaucitronAsk {
	display: flex !important;
	flex: 0 0 auto !important;
	gap: 8px !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	white-space: nowrap !important;
}

/* Ligne « Cookies obligatoires » : on masque le couple Autoriser/Interdire
   (ma règle flex sur .tarteaucitronAsk plus haut les ré-affichait -> ici 4 ids
   pour reprendre la main) et on pose une pastille « Toujours actif » en pseudo
   SUR LA LIGNE (flex) — pas sur l'ask qui est masqué. */
#tarteaucitronRoot #tarteaucitron #tarteaucitronServices #tarteaucitronServices_mandatory .tarteaucitronAsk {
	display: none !important;
}
#tarteaucitronRoot #tarteaucitron #tarteaucitronServices_mandatory .tarteaucitronLine::after {
	content: "Toujours actif";
	flex: 0 0 auto !important;
	display: inline-flex !important;
	align-items: center !important;
	padding: 6px 12px !important;
	border-radius: 999px !important;
	background: #eef3ec !important;
	color: #4a6b3f !important;
	font: normal normal 600 11.5px/1 var(--ff-body) !important;
	white-space: nowrap !important;
}
#tarteaucitronRoot #tarteaucitron #tarteaucitronServices_mandatory .tarteaucitronName .tarteaucitronH3 {
	font-weight: 400 !important;
	font-size: 12.5px !important;
	color: var(--clr-text) !important;
}
/* Message « Ce site n'utilise aucun cookie nécessitant votre consentement. »
   pt4 (retours 26/07) — il était masqué en dur, au motif « faux ici : on a GA ».
   Ce motif ne tient pas : si `ga4_measurement_id` est vide (base dev rafraîchie,
   ou retrait de GA), AUCUN service n'est enregistré et le message dit vrai. Le
   masquer laissait un volet qui propose « Tout accepter / Tout refuser » sans
   rien à accepter ni refuser. On le laisse donc vivre — tarteaucitron le pose et
   le retire tout seul (cf. l'exclusion du flex plus haut) — et on se contente de
   l'habiller. AUCUNE déclaration `display` ici : elle rebattrait l'inline natif. */
#tarteaucitronRoot #tarteaucitron #tarteaucitronServices .tarteaucitronBorder #tarteaucitronNoServicesTitle.tarteaucitronLine {
	background: #fcfbfa !important;
	border: none !important;
	border-top: 1px dashed var(--clr-border) !important;
	margin: 0 !important;
	padding: 16px 20px !important;
	font: normal normal 400 12.5px/1.5 var(--ff-body) !important;
	color: var(--clr-text) !important;
	text-align: center !important;
}

/* ---- BOUTONS CTA : gabarit commun (on neutralise le jaune tarteaucitron) ---- */
#tarteaucitronRoot #tarteaucitron .tarteaucitronCTAButton,
#tarteaucitronRoot #tarteaucitron .tarteaucitronAllow,
#tarteaucitronRoot #tarteaucitron .tarteaucitronDeny,
#tarteaucitronRoot #tarteaucitron #tarteaucitronAllAllowed,
#tarteaucitronRoot #tarteaucitron #tarteaucitronAllDenied,
#tarteaucitronRoot #tarteaucitron #tarteaucitronSaveButton {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin: 0 !important;
	padding: 7px 14px !important;
	border-radius: var(--radius-s) !important;
	font: normal normal 600 12.5px/1.2 var(--ff-body) !important;
	cursor: pointer !important;
	text-decoration: none !important;
	text-shadow: none !important;
	opacity: 1 !important;
	transition: background .12s, border-color .12s, color .12s !important;
}
/* Interrupteurs Autoriser/Interdire : AU REPOS = gris plein, sans liseré.
   Contraste sélection ↔ repos porté par le remplissage (encre vs gris), pas la bordure. */
#tarteaucitronRoot #tarteaucitron .tarteaucitronAllow,
#tarteaucitronRoot #tarteaucitron .tarteaucitronDeny,
#tarteaucitronRoot #tarteaucitron #tarteaucitronAllAllowed,
#tarteaucitronRoot #tarteaucitron #tarteaucitronAllDenied {
	background: var(--clr-bg-grey) !important;
	color: var(--clr-text-dark) !important;
	border: none !important;
}
#tarteaucitronRoot #tarteaucitron .tarteaucitronAllow:hover,
#tarteaucitronRoot #tarteaucitron .tarteaucitronDeny:hover,
#tarteaucitronRoot #tarteaucitron #tarteaucitronAllAllowed:hover,
#tarteaucitronRoot #tarteaucitron #tarteaucitronAllDenied:hover {
	background: var(--clr-border) !important;
}
/* ÉTAT SÉLECTIONNÉ = encre plein, sans bordure (le bouton actif de chaque couple) */
#tarteaucitronRoot #tarteaucitron .tarteaucitronIsAllowed .tarteaucitronAllow,
#tarteaucitronRoot #tarteaucitron .tarteaucitronAllow.tarteaucitronIsSelected,
#tarteaucitronRoot #tarteaucitron .tarteaucitronIsDenied .tarteaucitronDeny,
#tarteaucitronRoot #tarteaucitron .tarteaucitronDeny.tarteaucitronIsSelected,
#tarteaucitronRoot #tarteaucitron #tarteaucitronAllAllowed.tarteaucitronIsSelected,
#tarteaucitronRoot #tarteaucitron #tarteaucitronAllDenied.tarteaucitronIsSelected {
	background: var(--clr-ink) !important;
	border: none !important;
	color: var(--clr-white) !important;
}
/* Masquer les glyphes □ ✗ ✓ internes des boutons */
#tarteaucitronRoot #tarteaucitron .tarteaucitronCheck,
#tarteaucitronRoot #tarteaucitron .tarteaucitronCross { display: none !important; }

/* ---- PIED : barre « Enregistrer » collante (toujours atteignable) ---- */
#tarteaucitronRoot #tarteaucitron #tarteaucitronSave {
	position: sticky !important;
	bottom: 0 !important;
	z-index: 2 !important;
	text-align: center !important;
	margin: 0 !important;
	padding: 14px 20px !important;
	background: var(--clr-bg-light) !important;
	border-top: 1px solid var(--clr-border) !important;
}
/* « Enregistrer » = CTA primaire bordeaux. NB : c'est button#tarteaucitronSaveButton
   (pas un <button> enfant) -> on cible l'ID, sinon il retombe sur le gris au repos. */
#tarteaucitronRoot #tarteaucitron #tarteaucitronSaveButton {
	min-width: 220px !important;
	padding: 10px 24px !important;
	font-size: 13.5px !important;
	background: var(--clr-ink) !important;
	color: var(--clr-white) !important;
	border: none !important;
}
#tarteaucitronRoot #tarteaucitron #tarteaucitronSaveButton:hover {
	background: var(--clr-ink-dark) !important;
}

@media only screen and (max-width: 1130px) {
	#tarteaucitronRoot #tarteaucitron {
		width: calc(100% - 20px) !important;
		max-height: 90vh !important;
		/* pt19 (retours 28/07) — le panneau était haut comme l'écran, quel que soit son
		   contenu. La lib vendorisée impose height:100% + bottom:0 dans sa media ≤767px
		   (scripts/tarteaucitron/css/tarteaucitron.css) ; notre skin ne posait qu'un
		   PLAFOND (max-height), jamais de hauteur, donc c'est l'écran qui dictait.
		   LES DEUX LIGNES SONT INDISPENSABLES et se tiennent :
		     - height:auto  neutralise le 100% -> la carte se dimensionne sur son contenu ;
		     - bottom:auto  referme le piège qu'ouvre la ligne précédente. Aujourd'hui
		       bottom:0 est INERTE (top + height + bottom = sur-contraint, le navigateur
		       ignore bottom) ; dès que height passe à auto, la paire top:50% (bloc
		       desktop ci-dessus) + bottom:0 redevient contraignante et RÉÉTIRE la carte
		       de 50% à 100% de la hauteur — height:auto seul donnerait donc un faux
		       correctif à 50vh. Avec bottom:auto, top:50% + translate(-50%,-50%)
		       recentrent une carte enfin dimensionnée par son contenu.
		   Le plafond max-height:90vh RESTE : sur panneau long, #tarteaucitronServices
		   (overflow-y:auto) prend le relais en défilement. On ne touche PAS au vendorisé
		   (mise à jour de la lib possible sans reperdre ce correctif) : nos sélecteurs
		   à 2 ID + !important l'emportent sur ses 1 ID. */
		height: auto !important;
		bottom: auto !important;
	}
	#tarteaucitronRoot #tarteaucitron #tarteaucitronServices { max-height: 90vh !important; }
	#tarteaucitronRoot #tarteaucitron #tarteaucitronMainLineOffset { padding: 11px 16px 11px !important; }
	/* Mobile : on resserre la marge du couple « Tout accepter / Tout refuser » (en-tête plus
	   compact = moins de scroll). */
	#tarteaucitronRoot #tarteaucitron #tarteaucitronMainLineOffset .tarteaucitronAsk { margin-top: 8px !important; }
	/* Mobile : le bouton « Enregistrer » est `position:sticky bottom:0` DANS le conteneur
	   scrollable -> quand « Mesure d'audience » est dépliée, son couple Autoriser/Interdire
	   passe SOUS la barre sticky (« ça se superpose mal en bas »). On le replace en fin de
	   flux : il descend après Google Analytics, plus aucune occultation, tout reste atteignable
	   au scroll. (Desktop : le panneau ne déborde jamais, la barre reste visible en bas.) */
	#tarteaucitronRoot #tarteaucitron #tarteaucitronSave { position: static !important; }
	#tarteaucitronRoot #tarteaucitron .tarteaucitronH1 { font-size: 16px !important; }
	#tarteaucitronRoot #tarteaucitron .tarteaucitronBorder .tarteaucitronLine { padding: 12px 16px !important; }
	#tarteaucitronRoot #tarteaucitron .tarteaucitronTitle button { padding: 13px 16px !important; }
	/* Mobile : le couple Autoriser/Interdire (flex:0 0 auto, nowrap ~210px) ne tient
	   pas à côté du nom sur une ligne étroite. Sans garde, le nom (min-width:0) s'écrase
	   à 0px et « En savoir plus » / « Voir le site officiel » tombent un mot par ligne.
	   Fix : on autorise le retour à la ligne ET on plancher le nom à 55% — la ligne
	   « Cookies obligatoires » (pastille « Toujours actif » étroite) reste sur une seule
	   ligne, la ligne Google Analytics fait passer l'ask en dessous, nom pleine largeur. */
	#tarteaucitronRoot #tarteaucitron #tarteaucitronServices .tarteaucitronBorder .tarteaucitronLine {
		flex-wrap: wrap !important;
	}
	#tarteaucitronRoot #tarteaucitron #tarteaucitronServices .tarteaucitronBorder .tarteaucitronName {
		min-width: 55% !important;
	}
}

/* =============================================================
   Phase 1 — fix #11 : bandeau impersonation admin
   Persistant en haut de toutes les pages frontend pendant qu'un
   admin est connecté en tant que client (cf. inc/impersonation.inc.php).
   ============================================================= */
#cc-impersonation-banner {
	position: sticky;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10000;
	background: #b00020;
	color: #fff;
	padding: 10px var(--space-md, 20px);
	font: normal normal 600 14px/20px var(--ff-body, sans-serif);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-md, 20px);
	flex-wrap: wrap;
	box-shadow: 0 2px 8px rgba(0,0,0,0.3);
	text-align: center;
}
#cc-impersonation-banner .cc-imp-icon {
	font-size: 20px;
	line-height: 1;
}
#cc-impersonation-banner .cc-imp-text strong {
	background: rgba(255,255,255,0.15);
	padding: 2px 8px;
	border-radius: var(--radius-s);
}
#cc-impersonation-banner .cc-imp-exit {
	background: #fff;
	color: #b00020;
	padding: 6px 14px;
	border-radius: var(--radius-s);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.15s ease;
}
#cc-impersonation-banner .cc-imp-exit:hover,
#cc-impersonation-banner .cc-imp-exit:focus {
	background: #f0f0f0;
	color: #7a0014;
}
@media only screen and (max-width: 700px) {
	#cc-impersonation-banner {
		font-size: 13px;
		padding: 8px 10px;
		gap: 8px;
	}
}

/* =============================================================
   Chips de filtres actifs (recherche-vins.inc.php)
   ============================================================= */
.filtres-actifs {
	margin: 16px 0;
	padding: 10px 14px;
	background: var(--clr-bg-light);
	border-radius: var(--radius-m);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 6px;
	font-size: 0.95em;
}
.filtres-actifs__label {
	color: var(--clr-text);
	font-size: 0.85em;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-right: 4px;
	opacity: 0.7;
}
.chip-filtre {
	display: inline-flex;
	align-items: center;
	padding: 4px 6px 4px 12px;
	background: var(--clr-white);
	border: 1px solid var(--clr-border);
	border-radius: 999px;
	color: var(--clr-text-dark);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
@media (hover: hover) {   /* pt13d — une puce de filtre reste à l'écran : bordée d'or, elle se lisait comme active. */
	.chip-filtre:hover {
		border-color: var(--clr-or);
		box-shadow: 0 1px 3px rgba(184,138,62,0.08);
	}
}
.chip-filtre__critere {
	color: var(--clr-text);
	opacity: 0.75;
	margin-right: 4px;
}
.chip-filtre__valeur {
	font-weight: 600;
}
/* #7 revue Poune 20/06 : picto thématique (icône maison cc_icon) devant les chips
   de sélection spéciale (Coups de cœur / Nouveautés / Fins de loges / Bio), à la
   place des emojis universels. Hérite la couleur d'encre du chip. */
.chip-filtre__ico {
	display: inline-flex;
	align-items: center;
	margin-right: 6px;
}
.chip-filtre__ico .cc-i {
	width: 15px;
	height: 15px;
}
.chip-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	margin-left: 8px;
	border-radius: 50%;
	color: var(--clr-text);
	font-size: 1.1em;
	line-height: 1;
	text-decoration: none;
	opacity: 0.6;
	transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
/* pt13d — SCINDÉ : :focus (clavier) reste hors media. cf. pt11-survol-tactile. */
.chip-close:focus {
	background: var(--clr-ink);
	color: var(--clr-white);
	opacity: 1;
	text-decoration: none;
}
@media (hover: hover) {
	.chip-close:hover {
		background: var(--clr-ink);
		color: var(--clr-white);
		opacity: 1;
		text-decoration: none;
	}
}
.filtres-actifs__tout {
	margin-left: auto;
	padding: 4px 10px;
	font-size: 0.9em;
	color: var(--clr-text);
	text-decoration: underline;
	opacity: 0.75;
	transition: color 0.15s ease, opacity 0.15s ease;
}
/* pt13d — SCINDÉ : :focus (clavier) reste hors media. cf. pt11-survol-tactile. */
.filtres-actifs__tout:focus {
	color: var(--clr-or-text);
	opacity: 1;
}
@media (hover: hover) {
	.filtres-actifs__tout:hover {
		color: var(--clr-or-text);
		opacity: 1;
	}
}
@media only screen and (max-width: 700px) {
	.filtres-actifs {
		gap: 6px;
	}
	.filtres-actifs__tout {
		margin-left: 0;
		flex-basis: 100%;
		text-align: right;
	}
}

/* =============================================================
   Bloc "Aucun résultat" (recherche-vins.inc.php)
   ============================================================= */
.no-results {
	margin: 24px 0;
	padding: 24px 28px;
	background: var(--clr-bg-light);
	border-left: 4px solid var(--clr-or);
	border-radius: var(--radius-m);
}

/* Erreur de chargement de la grille (catalogue, AJAX filtres) — retour Thomas
   20260622-3 #8. Remplace le message brut « Erreur lors du chargement. Recharger ».
   Même langage visuel que .no-results (fond clair, liseré or), avec un bouton
   « Réessayer » qui relance la requête sans recharger la page. */
.cc-grid-erreur {
	margin: 24px 0;
	padding: 28px 28px 32px;
	background: var(--clr-bg-light);
	border-left: 4px solid var(--clr-or);
	border-radius: var(--radius-m);
	text-align: center;
}
.cc-grid-erreur-titre {
	margin: 0 0 6px;
	font-family: var(--ff-title);
	font-size: 16px;
	font-weight: 700;
	color: var(--clr-ink);
}
.cc-grid-erreur-sub {
	margin: 0 0 18px;
	font-size: 14px;
	color: var(--clr-text-soft, #6b6b6b);
}
.cc-grid-erreur-btn {
	display: inline-block;
	padding: 10px 22px;
	font-family: var(--ff-title);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.5px;
	color: var(--clr-white);
	background: var(--clr-ink);
	border: 1px solid var(--clr-ink);
	border-radius: var(--radius-s);
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}
.cc-grid-erreur-btn:hover {
	background: var(--clr-or);
	border-color: var(--clr-or);
	color: var(--clr-ink);
}

/* ============================================================
   FILTRES PANEL — colonne gauche pages listing
   ============================================================ */

/* Conteneur principal */
#filtres-panel {
  padding: 16px 12px 32px;
}

/* Titre avec badge compteur */
.filtres-titre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--ff-title);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--clr-or-text);
  margin-bottom: 14px;
}
.filtres-titre__badge {
  background: var(--clr-ink);
  color: var(--clr-white);
  border-radius: 10px;
  padding: 1px 8px;
  font-size: 11px;
}

/* Chips filtres actifs */
#filtres-panel .filtres-actifs {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 8px;
}
#filtres-panel .chip-filtre {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: color-mix(in srgb, var(--clr-or) 5%, #fff); /* tint or legacy */
  border: 1px solid var(--clr-or); /* tint bordeaux legacy */
  color: var(--clr-or-text);
  border-radius: 12px;
  padding: 3px 8px 3px 10px;
  font-size: 11px;
  font-weight: 600;
}
#filtres-panel .chip-close {
  color: var(--clr-or-text);
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  opacity: 0.7;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  /* pt3 (retours 20260722) — chip « lâche » sur les libellés courts (« Rouge ») : le ✕
     héritait de .chip-close (l.4982) un margin-left:8px + un cercle 22px, EN PLUS du
     gap:4px du parent → ~20px de vide entre le label et le ✕. On resserre dans le seul
     scope de la barre : gap parent seul (margin annulée) + cercle 18px proportionné au
     chip 11px/30px (l'affordance de survol .chip-close:hover reste un disque, plus petit). */
  width: 18px;
  height: 18px;
  margin-left: 0;
}
@media (hover: hover) { #filtres-panel .chip-close:hover { opacity: 1; } }   /* pt13d — cf. pt11-survol-tactile */
#filtres-panel .filtres-tout-effacer {
  display: block;
  font-size: 11px;
  color: var(--clr-or-text);
  text-decoration: underline;
  cursor: pointer;
  margin-bottom: 12px;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--ff-body);
}

/* Groupes accordéon */
.filtre-groupe {
  border-top: 1px solid var(--clr-border);
  padding: 10px 0;
}
.filtre-groupe__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--ff-title);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--clr-text-dark);
  cursor: pointer;
  user-select: none;
  margin-bottom: 8px;
}
.filtre-groupe__arrow {
  font-size: 9px;
  color: var(--clr-border);
  transition: transform 0.2s;
}
.filtre-groupe.is-open .filtre-groupe__arrow {
  transform: rotate(180deg);
}
.filtre-groupe__body {
  display: none;
}
.filtre-groupe.is-open .filtre-groupe__body {
  display: block;
}

/* Sélecteur couleur */
.couleurs-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.couleur-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--radius-s);
  border: 2px solid transparent;
  font-size: 10px;
  color: var(--clr-text);
  font-weight: 600;
  transition: border-color 0.15s;
}
@media (hover: hover) { .couleur-item:hover { border-color: var(--clr-border); } }   /* pt13d — cf. pt11-survol-tactile */
.couleur-item.is-selected { border-color: var(--clr-ink); }
.couleur-dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.1);
}
.couleur-cnt { font-weight: 400; font-size: 9px; color: var(--clr-count); font-variant-numeric: tabular-nums; }

/* Checkboxes appellations / producteurs */
.check-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.check-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--clr-text);
  cursor: pointer;
  padding: 3px 0;
}
.check-item__box {
  width: 14px;
  height: 14px;
  min-width: 14px;
  border-radius: var(--radius-s);
  border: 1.5px solid var(--clr-border);
  background: var(--clr-white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, border-color 0.12s;
}
.check-item.is-checked .check-item__box {
  background: var(--clr-ink);
  border-color: var(--clr-ink);
}
/* Coche : icône maison « coche » masquée et centrée dans la box (retour Thomas
   07/07 #1). L'ancien checkmark tracé en border-left/bottom + rotate(-45deg)
   avait un centre optique décalé (« croix mal centrée dans le rond » en mode
   soft, où --radius-s=8px arrondit la box 14px en cercle). Le masque SVG (path
   centré dans le viewBox 24×24) centre la coche quel que soit le rayon. */
.check-item.is-checked .check-item__box::after {
  content: '';
  width: 10px;
  height: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
.check-item__count {
  margin-left: auto;
  font-size: 11px;
  color: var(--clr-count);
  font-variant-numeric: tabular-nums;
}
/* Option « Sélection » menant à 0 résultat : grisée + non cliquable (D2-E). */
.check-item.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
.filtres-voir-plus {
  display: block;
  font-size: 11px;
  color: var(--clr-or-text);
  text-decoration: underline;
  cursor: pointer;
  margin-top: 4px;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--ff-body);
}

/* Slider prix (deux inputs range superposés) */
.prix-range-wrap {
  margin-top: 6px;
}
.prix-range-track {
  position: relative;
  height: 4px;
  margin: 16px 0 10px;
}
.prix-range-track input[type=range] {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
  -webkit-appearance: none;
  background: transparent;
  pointer-events: none;
}
.prix-range-track input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--clr-ink);
  border: 2px solid var(--clr-white);
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  cursor: pointer;
  pointer-events: all;
}
.prix-range-track input[type=range]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--clr-ink);
  border: 2px solid var(--clr-white);
  cursor: pointer;
  pointer-events: all;
}
.prix-range-fill {
  position: absolute;
  top: 0;
  height: 4px;
  background: var(--clr-ink);
  border-radius: var(--radius-s);
  pointer-events: none;
}
.prix-range-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--clr-bg-grey);
  border-radius: var(--radius-s);
}
.prix-display {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--clr-text);
}
.prix-display span { font-weight: 600; }
/* Retour Thomas 24/06 — montants de prix éditables (saisie d'une valeur exacte).
   Champ compact, sobre, coins droits (cohérent refonte), spinners natifs masqués. */
.prix-field { display: inline-flex; align-items: center; gap: 3px; }
.prix-num {
  width: 4ch;
  padding: 2px 4px;
  line-height: 1.3;
  font: inherit;
  font-weight: 600;
  text-align: right;
  color: var(--clr-text);
  background: #fff;
  border: 1px solid var(--clr-border, #d9d2c6);
  border-radius: 0;
  -moz-appearance: textfield;
}
.prix-num:focus {
  outline: none;
  border-color: var(--clr-or, #b88a3e);
}
.prix-num::-webkit-outer-spin-button,
.prix-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.prix-unit { font-weight: 600; color: var(--clr-text); }

/* Millésimes — liste VERTICALE : une ligne par année (année à gauche, nombre de
   vins correspondants à droite, mis à jour en temps réel par repaintFacets). */
.millesime-grid {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
  max-height: 280px;
  overflow-y: auto;
}
.millesime-tag {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 6px 10px;
  border-radius: var(--radius-s);
  font-size: 13px;
  /* Graisse 400 = même langage que .check-item (les autres dropdowns). L'année
     n'est plus en gras : un millésime parle comme une appellation/un producteur. */
  font-weight: 400;
  border: 1.5px solid transparent;
  color: var(--clr-text);
  cursor: pointer;
  background: var(--clr-white);
  transition: all 0.12s;
  font-family: var(--ff-body);
  text-align: left;
}
.millesime-an { font-variant-numeric: tabular-nums; }
@media (hover: hover) { .millesime-tag:hover { border-color: var(--clr-or); color: var(--clr-or-text); } }   /* pt13d — cf. pt11-survol-tactile */
.millesime-tag.is-selected {
  background: rgba(36,26,18,.06);
  border-color: var(--clr-ink);
  color: var(--clr-ink);
}
.millesime-count { font-weight: 400; font-size: 11px; color: var(--clr-count); font-variant-numeric: tabular-nums; }
.millesime-tag.is-selected .millesime-count { color: var(--clr-count); }

/* Skeleton loader résultats */
.filtres-skeleton-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}
.filtres-skeleton-card {
  border: 1px solid var(--clr-bg-grey);
  border-radius: var(--radius-m);
  overflow: hidden;
  animation: filtres-pulse 1.4s ease-in-out infinite;
}
.filtres-skeleton-img  { background: var(--clr-bg-grey); height: 150px; }
.filtres-skeleton-body { padding: 10px 12px; }
.filtres-skeleton-line {
  background: var(--clr-bg-grey);
  border-radius: var(--radius-s);
  margin-bottom: 7px;
}
.filtres-skeleton-line--sm  { height: 10px; width: 55%; }
.filtres-skeleton-line--md  { height: 14px; width: 90%; }
.filtres-skeleton-line--lg  { height: 10px; width: 70%; }
.filtres-skeleton-btn { background: var(--clr-bg-grey); height: 30px; margin: 6px 12px 12px; border-radius: var(--radius-s); }
@keyframes filtres-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.45; }
}

/* Spinner overlay sur la zone résultats */
#filtres-resultats {
  position: relative;
  min-height: 200px;
}
.filtres-spinner-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.7);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 60px;
  z-index: 5;
}
.filtres-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--clr-bg-grey);
  border-top-color: var(--clr-or);
  border-radius: 50%;
  animation: filtres-spin 0.7s linear infinite;
}
@keyframes filtres-spin { to { transform: rotate(360deg); } }

/* Compteur résultats */
#filtres-count-wrap {
  margin-bottom: 14px;
}

/* Bouton fermer — caché sur desktop, visible sur mobile */
.filtres-close-btn {
  display: none;
  background: none;
  border: none;
  font-size: 18px;
  color: var(--clr-border);
  cursor: pointer;
  padding: 0;
  line-height: 1;
  margin-left: auto;
}
.filtres-close-btn:hover { color: var(--clr-or-text); }

/* Badge compteur — prend le reste de l'espace */
.filtres-titre__text { flex: 1; }

/* Bouton mobile "Filtrer les vins" — caché sur desktop */
.filtres-mobile-toggle {
  display: none;
}

/* Overlay fond foncé quand drawer mobile ouvert */
.filtres-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 998;
}
.filtres-overlay.is-visible {
  display: block;
}

/* Footer mobile (bouton "Voir X vins") — caché sur desktop */
.filtres-mobile-footer { display: none; }

/* Sticky col-gauche sur les pages listing — desktop uniquement */
@media (min-width: 1131px) {
  #page-boutique #col-gauche,
  #page-liste #col-gauche,
  #page-nouveautes #col-gauche,
  #page-coups-de-coeur #col-gauche,
  #page-fins-de-loges #col-gauche,
  #page-caveprivee #col-gauche,
  #page-dernieres-bouteilles #col-gauche,
  #page-appellations #col-gauche,
  #page-recherche-vins #col-gauche {
    position: sticky;
    top: 160px; /* override dynamique via filtres.js (stickyHdr.offsetHeight) */
    align-self: flex-start;
    max-height: calc(100vh - 160px);
    overflow-y: auto;
  }
}

/* ---- MOBILE (≤ 1130px) ---- */
@media (max-width: 1130px) {
  .filtres-accordion-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 11px 16px;
    background: var(--clr-white);
    border: none;
    border-bottom: 1px solid var(--clr-bg-grey);
    font-family: var(--ff-title);
    font-size: 14px;
    font-weight: 600;
    color: var(--clr-text-dark);
    cursor: pointer;
    text-align: left;
  }
  .filtres-accordion-btn__count {
    background: var(--clr-ink);
    color: var(--clr-white);
    border-radius: 10px;
    padding: 1px 8px;
    font-size: 11px;
    margin-left: 6px;
  }
  .filtres-accordion-btn__arrow {
    font-size: 11px;
    color: var(--clr-border);
    transition: transform 0.2s;
  }
  .filtres-accordion-btn.is-open .filtres-accordion-btn__arrow {
    transform: rotate(180deg);
  }
  .filtres-accordion-panel {
    display: none;
    background: var(--clr-bg-light);
    padding: 12px 16px 0;
    border-bottom: 1px solid var(--clr-bg-grey);
  }
  .filtres-accordion-panel.is-open {
    display: block;
  }
  .filtres-apply-btn {
    display: block;
    width: 100%;
    background: var(--clr-ink);
    color: var(--clr-white);
    border: none;
    border-radius: var(--radius-s);
    padding: 12px;
    font-family: var(--ff-title);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    margin: 12px 0;
    text-align: center;
  }
  #col-gauche {
    display: none;
  }
  /* Sur les pages listing, le drawer filtre s'ouvre en overlay plein écran */
  #col-gauche:has(#filtres-panel) {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    background: #fff;
    z-index: 1001;
    padding-bottom: 80px;
    box-sizing: border-box;
  }
  #col-gauche.filtres-open {
    display: block;
  }

  /* Bouton fermer visible sur mobile */
  .filtres-close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--clr-bg-grey);
    color: var(--clr-text-dark);
    font-size: 16px;
    flex-shrink: 0;
  }

  /* Barre titre figée en haut du drawer : la croix reste toujours
     atteignable, même après avoir scrollé jusqu'aux millésimes. */
  #col-gauche:has(#filtres-panel) .filtres-titre {
    position: sticky;
    top: 0;
    z-index: 3;
    background: #fff;
    padding: 10px 0;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--clr-bg-grey);
  }

  /* Bouton "Filtrer les vins" visible sur mobile */
  .filtres-mobile-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: var(--clr-ink);
    color: var(--clr-white);
    border: none;
    border-radius: var(--radius-s);
    font-family: var(--ff-title);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    margin-bottom: 14px;
  }
  .filtres-mobile-toggle__arrow {
    font-size: 9px;
    opacity: 0.8;
  }

  /* Footer avec bouton appliquer */
  .filtres-mobile-footer {
    display: block;
    padding: 0 12px 16px;
  }
}

/* Masquer le formulaire dropdown quand le panneau de filtres est actif */
.filtres-nojs-form {
  display: none;
}
.no-results__title {
	margin: 0 0 12px;
	color: var(--clr-text-dark);
	font-size: 1.4em;
	font-weight: 600;
}
.no-results__title em {
	color: var(--clr-or-text);
	font-style: normal;
}
.no-results__suggestion {
	margin: 0 0 16px;
	padding: 12px 16px;
	background: var(--clr-white);
	border-radius: var(--radius-m);
	font-size: 1.05em;
}
.no-results__suggestion a {
	color: var(--clr-or-text);
	font-weight: 600;
	text-decoration: underline;
}
.no-results__suggestion a:hover {
	text-decoration: none;
}
.no-results__tips {
	margin: 0;
	padding-left: 20px;
	color: var(--clr-text);
	font-size: 0.95em;
}
.no-results__tips li {
	margin: 4px 0;
}
.no-results__tips a {
	color: var(--clr-or-text);
	text-decoration: underline;
}

/* Overrides finaux pour isoler les cartes vins des anciens styles liste. */
ul.liste-vins.cc-wine-grid .cc-wine-card__actions {
	width: auto;
	text-align: initial;
}

ul.liste-vins.cc-wine-grid .cc-wine-card__qty select {
	width: 100%;
	height: 100%;
	font-size: 16px;
}

ul.liste-vins.cc-wine-grid .cc-wine-card__cart-icon img {
	width: 28px;
	height: 28px;
}

@media (max-width: 680px) {
	ul.liste-vins.cc-wine-grid .cc-wine-card__actions {
		width: auto;
	}

	ul.liste-vins.cc-wine-grid .cc-wine-card__qty select {
		width: 100%;
		height: 100%;
		font-size: 16px;
	}
}



/* =============================================================
   Sticky header desktop — refonte 2026
   Bloc <header> + #menu horizontal restent figés en haut de page
   au scroll. Mode compact au-delà de 120px (body.is-scrolled) :
   logo réduit, colonne de réassurance masquée, paddings réduits.
   Mobile non concerné (#header_mobile est déjà position:fixed).
   ============================================================= */
#site-sticky-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: #fff;
	transform: translateY(0);
	transition: box-shadow 0.25s ease, transform 0.3s ease;
}

/* Hide-on-scroll global : le header (+ USP) se masque en défilant vers le bas
   et réapparaît au scroll vers le haut. S'applique à toutes les pages SAUF
   homepage (règle identique dédiée plus bas) et catalogue (position:static →
   défile naturellement, ne reçoit jamais cette classe). La classe
   .header--hidden est posée par le JS de hide-on-scroll dans index.php. */
#site-sticky-header.header--hidden {
	transform: translateY(-100%);
}

/* annule les margin-top historiques pour éviter un blanc en haut */
#site-sticky-header > header {
	margin-top: 0;
}
#site-sticky-header #menu {
	margin-top: 0;
}

/* ombre discrète quand le bloc est figé (au-delà du scroll seuil) */
body.is-scrolled #site-sticky-header {
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

/* transitions douces (conservées pour d'éventuels usages futurs) */
#header_desktop,
#header-centre img,
#menu ul {
	transition: padding 0.2s ease, width 0.2s ease;
}

/* =====================================================
   CART DRAWER — tiroir panier + overlay
   ===================================================== */

/* Overlay */
#cart-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
#cart-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

/* Tiroir */
#cart-drawer {
    position: fixed;
    right: 0;
    top: 0;
    height: 100vh;
    height: 100dvh; /* Firefox/Chrome Android : suit la zone visible (barre d'adresse) — sinon le footer « Commander » tombe sous l'écran */
    width: 400px;
    max-width: 100%;
    background: #fff;
    z-index: 10000;
    transform: translateX(110%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
}
#cart-drawer.is-open {
    transform: translateX(0);
}

/* Header tiroir — ambiance cave */
.cart-drawer-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, #1a0a0f 0%, var(--clr-ink) 55%, var(--clr-ink-dark) 100%);
    overflow: hidden;
    flex-shrink: 0;
}
.cart-drawer-title {
    font-family: var(--ff-title);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: #fff;
    text-transform: none;
    display: flex;
    align-items: center;
    gap: 9px;
}
.cart-drawer-count-badge {
    background: rgba(255,255,255,0.16);
    border: 1px solid rgba(255,255,255,0.22);
    color: #fff;
    font-family: var(--ff-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    padding: 2px 9px;
    border-radius: 11px;
}
.cart-drawer-close {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    border-radius: 50%;
    background: none;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    line-height: 1;
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    padding: 0;
    transition: background 0.15s, color 0.15s;
}
.cart-drawer-close:hover { background: rgba(255,255,255,0.12); color: #fff; }

/* Corps scrollable */
.cart-drawer-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    padding: 0;
}

/* Jauge livraison offerte */
.cart-drawer-ship {
    padding: 11px 20px;
    background: var(--clr-bg-light);
    border-bottom: 1px solid #ece0c4;
}
.cart-drawer-ship-msg { font-size: 12px; color: var(--clr-text); margin-bottom: 7px; }
.cart-drawer-ship-msg strong { color: var(--clr-or-text); font-weight: 700; }
.cart-drawer-ship-track { height: 6px; background: #e6dcc2; border-radius: var(--radius-s); overflow: hidden; }
.cart-drawer-ship-fill { height: 100%; border-radius: var(--radius-s); background: var(--clr-ink); transition: width 0.6s ease; }
.cart-drawer-ship.ok { background: #f1f7f2; border-bottom-color: #d7ecdb; }
.cart-drawer-ship.ok .cart-drawer-ship-msg { color: var(--clr-success); font-weight: 600; margin-bottom: 0; }

/* Liste articles */
.cart-drawer-list { list-style: none; margin: 0; padding: 0; }
.cart-drawer-item {
    display: flex;
    flex-wrap: wrap; /* #4 — laisse l'overlay stock (.cart-drawer-warn, flex-basis:100%) passer pleine largeur sous vignette+infos */
    gap: 13px;
    padding: 14px 20px;
    border-bottom: 1px solid #f3f3f3;
    position: relative;
    transition: background 0.12s;
}
@media (hover: hover) { .cart-drawer-item:hover { background: #fcfaf6; } }   /* pt11 — cf. pt11-survol-tactile */
.cart-drawer-item:last-child { border-bottom: none; }
.cart-drawer-thumb {
    width: 54px;
    height: 76px;
    border-radius: var(--radius-s);
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    box-shadow: 3px 5px 13px rgba(0,0,0,0.16);
    isolation: isolate;
}
.cart-drawer-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 4px; box-sizing: border-box; mix-blend-mode: multiply; }
.cart-drawer-thumb-emoji {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    /* #6 : repli sans photo aligné sur le catalogue — fond clair hérité de
       .cart-drawer-thumb (#f5f5f5), plus de fond bordeaux ni d'emoji. */
}
/* Repli « photo à venir » du drawer : silhouette bouteille (cc_icon) en or
   discret, façon .wc-photo-empty du catalogue, sans libellé (illisible ici). */
.cart-drawer-thumb-emoji svg,
.cart-drawer-empty-emoji svg,
.cart-drawer-cross-emoji svg { width: 34px; height: 34px; color: #cbb27a; opacity: .85; }
.cart-drawer-item-info { flex: 1; min-width: 0; }
/* ═══ pt7e (recette 28/07) — UN SEUL AFFICHAGE ligne panier / ligne tiroir ═══
   Thomas : « il faut aligner ça en conservant un seul affichage ». Les deux lignes
   avaient la même géométrie depuis le pt7 mais deux PALETTES. Règle d'arbitrage
   appliquée à chaque jeton : on garde la valeur la PLUS LISIBLE des deux — ce qui
   fait remonter le tiroir, systématiquement le plus délavé (#999 / #aaa / #ccc,
   ce dernier à ~1,6:1 sur blanc). Seule exception, le TOTAL de ligne : il descend
   de l'or à l'encre (cf. .cart-drawer-price plus bas). Valeurs de référence =
   celles de la page (tunnel.css : .od-appell, .od-name, .od-type, .od-unit). */
.cart-drawer-appel { font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--clr-or-text); font-weight: 700; }
.cart-drawer-name {
    font-family: var(--ff-title);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--c-ink);        /* pt7e : était --clr-text-dark (#333) — l'encre du site */
    line-height: 1.3;
    margin: 1px 0 2px;
}
.cart-drawer-meta { font-size: 11.5px; color: var(--c-text); }   /* pt7e : #999 → jeton de texte */
/* pt7e — mêmes interlignes que la page (tunnel.css, « les quatre libellés mono-ligne »).
   Sans ça les blocs du tiroir respirent 3 à 4 px de plus par ligne et les deux rendus
   ne se superposent pas, à couleurs pourtant identiques.
   🧨 .cart-drawer-name garde SON line-height 1.3 déjà déclaré : le nom du vin est le
   seul de ces libellés à passer sur deux lignes. */
.cart-drawer-appel,
.cart-drawer-meta,
.cart-drawer-price,
.cart-drawer-price small { line-height: 1.3; }
/* pt1 (retours 30/07) — RÉSERVE DE LARGEUR sous la corbeille, option B arbitrée.
   .cart-drawer-remove est en position:absolute (l. ~6317) avec une cible tactile de
   44px : elle SORT DU FLUX, donc .cart-drawer-item-info (flex:1) s'étend sous elle et
   « Domaine de Beaurenard — Boisrenard 2019 » passait sous le picto. Ce n'est pas un
   défaut de retour à la ligne (le nom se coupe déjà) mais une réserve manquante.
   Réserve posée sur les DEUX LIGNES HAUTES seulement (appellation + nom), les seules
   qui atteignent la bande de la corbeille : les lignes basses (type/stock, stepper,
   prix) gardent toute la largeur pour que le PRIX reste calé à droite.
   ⛔ Ne pas la remonter sur .cart-drawer-item-info (le prix perdrait son alignement),
   ne pas sortir la corbeille de l'absolu (casse le flex-wrap dont dépend le bandeau
   .cart-drawer-warn pleine largeur), pas d'ellipse (prive du millésime).
   Largeur = la cible tactile du système (--btn-min-h, 44px) + 2px de respiration,
   pas un 46 en dur : si la cible bouge, la réserve suit. */
.cart-drawer-appel,
.cart-drawer-name { padding-right: calc(var(--btn-min-h) + 2px); }
/* La ligne FANTÔME (article épuisé, ajax_panier.php ~l.1096) n'a PAS de corbeille :
   rien à contourner, la réserve n'y serait qu'un vide. */
.cart-drawer-ghost .cart-drawer-appel,
.cart-drawer-ghost .cart-drawer-name { padding-right: 0; }
.cart-drawer-stock { font-size: 10.5px; color: #a98028; margin-top: 4px; }
.cart-drawer-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 9px; }
/* ═══ STEPPER DE QUANTITÉ — composant partagé ════════════════════════════════
   Utilisé par la ligne de la page panier (<form class="cc-cart-qty cc-qty">) ET
   par la ligne de l'overlay panier (<div class="cc-qty">). Il vivait auparavant
   dans tunnel.css sous le préfixe body.tunnel ; le tiroir s'ouvrant sur TOUTES
   les pages du site, ce préfixe l'empêchait de servir hors tunnel.
   Le placement dans la grille de la ligne panier reste dans tunnel.css
   (.cc-cart-qtycell) : ici, le dessin seulement.

   🧨 overflow:visible est OBLIGATOIRE. La cible tactile est portée par un
   ::after qui DÉBORDE du cadre ; un overflow:hidden le rognerait et ramènerait
   la zone de clic à la taille du dessin — exactement le défaut corrigé le 27/07.
   Le hover qui débordait des coins arrondis est compensé par un border-radius
   sur les deux boutons d'extrémité. */
.cc-qty {
  display:flex; align-items:center; border:1.5px solid var(--clr-border);
  border-radius:var(--radius-s); overflow:visible; width:auto; box-sizing:border-box; margin:0;
}
/* Retour 12/06 #1 — pilule blanche, glyphes +/− or, séparateurs fins autour de
   la valeur (au lieu de 3 pavés gris sur mobile). */
.cc-qty-btn {
  position:relative; /* ancre du ::after qui porte la cible tactile */
  width:35px; height:35px; min-width:35px; min-height:35px; background:#fff; border:none;
  cursor:pointer; font-size:15px; font-weight:700; color:var(--clr-or-text);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  line-height:1; transition:background 0.15s;
}
/* 🔑 Retour Thomas 27/07 — « le stepper est trop gros ». Le DESSIN descend à 35px
   (essayé à 30 : jugé trop petit en recette), la CIBLE TACTILE reste à 44px : elle est
   portée par ce ::after transparent, qui fait 44px de haut et déborde de 5px de chaque
   côté (35+5+5 = 45 ≥ 44). Le doigt garde sa surface, l'œil ne voit plus que 35.
   ⚠️ Les ::after des deux boutons ne se recouvrent PAS (la valeur fait 30px de large,
   ils ne débordent que de 5 chacun) — aucun risque qu'un « + » déclenche un « − ». Ils
   passent en revanche par-dessus la valeur, qui n'est pas interactive : sans effet.
   🧨 NE PAS rétablir de variante @media (pointer: fine) : elle avait laissé le doigt à
   44px pendant que la souris descendait à 34, et une iframe de 390px répond
   `pointer: fine` — un banc ne peut donc pas valider ce gabarit. */
.cc-qty-btn::after {
  content:''; position:absolute; left:-5px; right:-5px; top:50%;
  transform:translateY(-50%); height:44px;
}
.cc-qty-btn:first-of-type { border-right:1px solid var(--clr-border); border-radius:var(--radius-s) 0 0 var(--radius-s); }
.cc-qty-btn:last-of-type  { border-left:1px solid var(--clr-border); border-radius:0 var(--radius-s) var(--radius-s) 0; }
@media (hover: hover) { .cc-qty-btn:hover { background:var(--c-bg-grey); } }   /* pt13d — cf. pt11-survol-tactile */
/* Bouton borné (quantité 1 → « − », plafond atteint → « + ») : non cliquable, grisé.
   Le PHP pose EN PLUS un title qui explique pourquoi — cf. panier.inc.php et
   ajax_panier.php. Un bouton éteint sans explication est un cul-de-sac. */
.cc-qty-btn--off { color:var(--cc-text-muted,#b3b3b3); cursor:not-allowed; opacity:.5; }
@media (hover: hover) { .cc-qty-btn--off:hover { background:#fff; } }   /* pt13d — cf. pt11-survol-tactile */
/* Valeur : <span> statique (la saisie libre est retirée, on ne modifie que par +/−).
   align-self:stretch + flex pour centrer le chiffre sur la hauteur des boutons. */
.cc-qty-val {
  flex:0 0 auto; width:30px; min-width:0; text-align:center;
  align-self:stretch; display:flex; align-items:center; justify-content:center; user-select:none;
  background:#fff; font-family:inherit; font-size:14px; font-weight:700; color:var(--c-text-strong);
}

.cart-drawer-price {
    font-family: var(--ff-title);
    font-size: 14px;
    font-weight: 800;
    /* pt13a (retours Thomas 29/07) — ⚠️ INVERSION ASSUMÉE du pt7e (28/07), qui avait
       fait descendre ce total de ligne de l'or à l'encre au nom de la hiérarchie
       « chaque ligne / le total à payer ». Arbitrage explicite de Thomas le 29/07 :
       le prix de ligne est DORÉ, sur les trois surfaces (tiroir, page /panier,
       panneau « Produit ajouté »). Ne pas re-descendre en encre sans nouvel
       arbitrage — ce fichier a déjà documenté le contraire une fois.
       ⚠️ Or TEXTE (--c-accent-text, #8a6224, AA sur fond clair), jamais --clr-or
       (#b88a3e) qui est l'or DÉCORATIF des icônes et des filets. */
    color: var(--c-accent-text);
    text-align: right;
}
.cart-drawer-price small {
    display: block;
    font-family: var(--ff-body);
    font-size: 11.5px;
    font-weight: 400;
    color: var(--c-text);       /* pt7e : #aaa → jeton de texte (cf. .od-unit) */
    text-align: right;
}
.cart-drawer-remove {
    position: absolute;
    top: 13px;
    right: 18px;
    background: none;
    border: none;
    padding: 0;
    font-size: 13px;
    /* pt7e — #ccc sur blanc plafonnait à ~1,6:1 : sous tout seuil lisible, et la cible
       ne faisait que 28px. On reprend la corbeille de la page (.cc-cart-remove-link,
       tunnel.css) : même encre, même surface tactile de 44px. */
    color: #767676;
    min-width: 44px; min-height: 44px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    z-index: 1;
    transition: color 0.12s;
}
@media (hover: hover) { .cart-drawer-remove:hover { color: #e53e3e; } }   /* pt13d — cf. pt11-survol-tactile */

/* État vide */
#cart-drawer.is-empty .cart-drawer-footer { display: none; }
/* L'état vide est injecté DANS .cart-drawer-body, qui est déjà LE scroller du
   tiroir (flex:1 + min-height:0 + overflow-y:auto + overscroll-behavior:contain
   + touch-action:pan-y). En faire ici un SECOND conteneur scrollable le piégeait :
   son flex:1 est inerte (le parent .cart-drawer-body n'est pas un flex) → sa
   hauteur = celle du contenu, donc il n'a jamais rien à scroller lui-même, et son
   overscroll-behavior:contain empêchait le geste de se propager au vrai scroller.
   Résultat mobile : panier vide impossible à faire défiler (retour Thomas
   20260622-3 #12). On laisse donc l'état vide couler normalement. */
/* pt3 (retours Thomas 20260724) — le CTA doit être ANCRÉ EN BAS du tiroir, et
   l'espace mort rempli (3 rayons au lieu d'un). Les deux tiennent à une seule
   mécanique : rendre le scroller flex UNIQUEMENT à l'état vide, et y étirer
   .cart-drawer-empty en `flex: 1 0 auto`.
   - `1 0 auto` et pas `1` : avec flex-basis:0 la boîte serait plafonnée à la
     hauteur du scrollport alors que son contenu (3 rayons) la dépasse — le CTA
     collant, contraint par cette boîte trop courte, décrocherait dès qu'on
     défile au-delà. `auto` + shrink 0 → la boîte fait AU MOINS son contenu, et
     s'étire au scrollport quand le contenu est court (rayons vides).
   - Le gate `.is-empty` protège l'état garni : la liste d'articles n'est jamais
     rendue dans un parent flex.
   ⚠️ On ne remet NI overflow NI overscroll-behavior ici : c'est ce couple, et non
   le flex, qui avait piégé le scroll mobile du panier vide (retour 20260622-3 #12,
   cf. commentaire ci-dessus). .cart-drawer-body reste LE seul scroller. */
#cart-drawer.is-empty .cart-drawer-body { display: flex; flex-direction: column; }
.cart-drawer-empty { padding: 32px 24px 18px; text-align: center; flex: 1 0 auto; display: flex; flex-direction: column; }
/* .cart-drawer-empty devient flex column → ses enfants sont blockifiés et
   text-align:center ne centre plus une boîte à largeur FIXE : sans ce margin auto
   le médaillon de 92px repartait se coller à gauche. (Mesuré, pas supposé.)
   Inoffensif hors flex : un margin auto sur un inline-flex en flux normal est ignoré. */
.cart-drawer-empty-ico { margin-inline: auto; }
/* Espaceur qui ancre le CTA en bas. Il ABSORBE la hauteur libre quand le contenu est
   court (rayons vides : rien à défiler, et `position:sticky` ne POUSSE jamais un
   élément vers le bas — il ne fait que le retenir pendant un défilement ; mesuré à
   577 px du bas sans cet espaceur), et se réduit à sa hauteur minimale quand les trois
   rayons remplissent le tiroir, où il ne sert plus que de respiration avant la barre.
   Un `margin-top:auto` sur la barre elle-même ne convenait pas : il vaut 0 dès que le
   contenu est long, et collerait la barre aux cartes. */
.cart-drawer-empty-gap { flex: 1 1 auto; min-height: 18px; }
.cart-drawer-empty-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 32%, #fff 0%, var(--c-bg-soft) 70%);
    box-shadow: inset 0 0 0 1px rgba(184,138,62,0.08), 0 6px 16px rgba(184,138,62,0.08);
    margin-bottom: 12px;
}
.cart-drawer-empty-ico svg { height: 62px; width: auto; display: block; }
.cart-drawer-empty-title { font-family: var(--ff-title); font-size: 17px; font-weight: 700; color: var(--clr-text-dark); }
.cart-drawer-empty-sub { font-size: 13px; color: #999; margin: 6px auto 22px; max-width: 280px; }
.cart-drawer-empty-block { text-align: left; margin-top: 4px; }
/* pt3 — respiration entre les trois rayons (coups de cœur / Dernières bouteilles /
   Promotions). Sur le premier bloc la marge reste à 4px : il suit le titre. */
.cart-drawer-empty-block + .cart-drawer-empty-block { margin-top: 22px; }
.cart-drawer-empty-block-head { font-family: var(--ff-script); font-size: 22px; font-weight: 700; color: var(--clr-or-text); line-height: 1; margin-bottom: 12px; }
.cart-drawer-empty-list { display: flex; flex-direction: column; gap: 8px; }
.cart-drawer-empty-card {
    display: flex;
    flex-direction: column;   /* #38 — lien (bouteille+infos) au-dessus, pied (prix + « + Panier ») en dessous */
    border: 1px solid var(--c-line);
    border-radius: var(--radius-m);
    padding: 9px 11px;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.cart-drawer-empty-link { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.cart-drawer-empty-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
/* ================================================================
   pt4 (retours 24/07) — SURVOL DES « + PANIER » DE SUGGESTION.
   Trois boutons partagent le même motif (blanc + liseré doré au repos) :
   .cart-drawer-empty-add (tiroir vide), .cart-drawer-cross-add (cartes
   suggérées du tiroir rempli) et .cc-esugg-btn (page panier vide, tunnel.css).
   Ils basculaient en encre plein au survol — trop brutal pour une action
   secondaire, et contraire à la doctrine « bouton bordé : le survol vire à
   l'or ». Le survol est désormais piloté par le back-office (Gestion de la
   configuration → cart_add_hover), posé en classe sur <body> par index.php.
   Les CTA principaux (« Explorer la cave », « Commander ») ne sont PAS
   concernés : ils sont encre au repos et gardent leur survol encre foncé.
   ================================================================ */
body {
    /* relief — défaut : aucune bascule de couleur, ombre dorée + montée de 1px */
    --cc-addh-bg: var(--c-surface);
    --cc-addh-bd: var(--c-accent);
    --cc-addh-tx: var(--c-accent-text);
    --cc-addh-sh: 0 3px 10px rgba(184,138,62,.32);   /* encre or translucide, cf. ombres dorées voisines */
    --cc-addh-tr: translateY(-1px);
}
body.cc-addhover-or {
    /* or — fond or bronze plein, texte blanc */
    --cc-addh-bg: var(--c-accent);
    --cc-addh-bd: var(--c-accent);
    --cc-addh-tx: #fff;
    --cc-addh-sh: 0 2px 8px rgba(184,138,62,.30);
    --cc-addh-tr: none;
}

.cart-drawer-empty-add {
    flex-shrink: 0; border: 1px solid var(--clr-or); background: #fff; color: var(--clr-or-text);
    font-family: var(--ff-title); font-size: 12px; font-weight: 700; line-height: 1.2;
    padding: 5px 11px; border-radius: var(--radius-s); cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.cart-drawer-empty-add:hover {
    background: var(--cc-addh-bg); border-color: var(--cc-addh-bd); color: var(--cc-addh-tx);
    box-shadow: var(--cc-addh-sh); transform: var(--cc-addh-tr);
}
.cart-drawer-empty-add:disabled { opacity: 0.7; cursor: default; }
@media (hover: hover) { .cart-drawer-empty-card:hover { border-color: var(--clr-or); box-shadow: 0 4px 14px rgba(184,138,62,0.08); } }   /* pt13d — cf. pt11-survol-tactile */
.cart-drawer-empty-bottle {
    width: 40px;
    height: 56px;
    border-radius: var(--radius-s);
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    background: linear-gradient(160deg,#f3f0ea,#e9e4db);
    box-shadow: 2px 3px 9px rgba(0,0,0,0.14);
}
.cart-drawer-empty-bottle img { width: 100%; height: 100%; object-fit: contain; padding: 3px; box-sizing: border-box; mix-blend-mode: multiply; }
.cart-drawer-empty-emoji { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.cart-drawer-empty-info { flex: 1; min-width: 0; text-align: left; }
.cart-drawer-empty-appel { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--clr-or-text); line-height: 1.25; }   /* line-height explicite : sinon hérite du 30px global → vide si l'appellation passe sur 2 lignes */
.cart-drawer-empty-name { font-family: var(--ff-title); font-size: 12px; font-weight: 700; color: var(--clr-text-dark); line-height: 1.25; }
.cart-drawer-empty-price { font-size: 12.5px; font-weight: 700; color: var(--clr-text-dark); flex-shrink: 0; }
/* pt3 — barre du CTA, collée au bas du scroller. Les marges négatives la font
   déborder le padding de .cart-drawer-empty pour qu'elle occupe TOUTE la largeur
   du tiroir, comme le vrai pied de l'état garni (.cart-drawer-footer, masqué ici).
   Fond opaque + filet haut obligatoires : les cartes défilent DERRIÈRE elle.
   safe-area-inset-bottom : sur iOS le bas du tiroir passe sous la barre système. */
.cart-drawer-empty-cta {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin: 0 -24px -18px;   /* la respiration au-dessus vient de .cart-drawer-empty-gap */
    padding: 12px 24px calc(12px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-top: 1px solid var(--c-line);
}
.cart-drawer-empty-cta .cart-drawer-explore { margin: 0; }
.cart-drawer-explore {
    display: block;
    margin: 18px 0 4px;
    padding: var(--btn-pad-y) var(--btn-pad-x);
    border-radius: var(--radius-s);
    background: var(--clr-ink); /* pt6b 20260722 : #333 (--clr-text-dark) → encre charte, aligné sur .cc-btn-next */
    color: #fff !important;
    font-size: var(--btn-font);
    font-weight: var(--btn-weight);
    letter-spacing: var(--btn-letter);
    box-shadow: var(--btn-shadow);
    text-align: center;
    text-decoration: none !important;
    transition: background 0.15s;
}
.cart-drawer-explore:hover { background: var(--clr-ink-dark); }

/* Suggestion du caviste — carrousel */
.cart-drawer-cross { padding: 14px 0 8px; border-top: 1px solid #eee; }
.cart-drawer-cross-head { padding: 0 20px 9px; }
.cart-drawer-cross-script { font-family: var(--ff-script); font-size: 22px; font-weight: 700; color: var(--clr-or-text); line-height: 1; }
.cart-drawer-cross-label { font-family: var(--ff-title); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.4px; color: var(--clr-or-text); display: flex; align-items: center; gap: 9px; }
.cart-drawer-cross-label::before { content: ''; width: 16px; height: 2px; background: var(--clr-or); border-radius: var(--radius-s); flex-shrink: 0; }
.cart-drawer-cross-sublabel { font-size: 11px; color: #9a8f7e; margin-top: 5px; letter-spacing: 0.2px; }
.cart-drawer-cross-scroll { display: flex; gap: 10px; padding: 0 20px 4px; overflow-x: auto; }
.cart-drawer-cross-scroll::-webkit-scrollbar { height: 5px; }
.cart-drawer-cross-scroll::-webkit-scrollbar-thumb { background: #ddd; border-radius: var(--radius-s); }
.cart-drawer-cross-card { width: 130px; flex-shrink: 0; display: flex; flex-direction: column; border: 1px solid var(--c-line); border-radius: var(--radius-m); overflow: hidden; background: #fff; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; }
@media (hover: hover) { .cart-drawer-cross-card:hover { border-color: var(--clr-or); box-shadow: 0 5px 16px rgba(184,138,62,0.14); } }   /* pt13d — cf. pt11-survol-tactile */
.cart-drawer-cross-thumb { height: 72px; display: flex; align-items: center; justify-content: center; font-size: 25px; background: linear-gradient(160deg,#f3f0ea,#e9e4db); overflow: hidden; }
.cart-drawer-cross-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 5px; box-sizing: border-box; mix-blend-mode: multiply; }
.cart-drawer-cross-emoji { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.cart-drawer-cross-body { padding: 7px 9px 9px; flex: 1; display: flex; flex-direction: column; }
.cart-drawer-cross-appel { font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px; line-height: 1.2; min-height: 21px; color: var(--clr-or-text); }
.cart-drawer-cross-name { font-family: var(--ff-title); font-size: 10.5px; font-weight: 700; color: var(--clr-text-dark); line-height: 1.3; margin: 1px 0 6px; min-height: 27px; }
.cart-drawer-cross-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
.cart-drawer-cross-price { font-size: 12px; font-weight: 700; color: var(--clr-text-dark); }
.cart-drawer-cross-add { width: 24px; height: 24px; border-radius: var(--radius-s); border: 1.5px solid var(--clr-border); background: #fff; color: var(--clr-or-text); font-size: 16px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; transition: all 0.12s; }   /* #15 : 6px→3px */
/* pt4 — le « + » suit le survol de la CARTE (et le sien propre) ; preset piloté par le BO. */
@media (hover: hover) {   /* pt13d — cf. pt11-survol-tactile ; le preset BO reste intact sur desktop. */
.cart-drawer-cross-card:hover .cart-drawer-cross-add,
.cart-drawer-cross-add:hover {
    background: var(--cc-addh-bg); color: var(--cc-addh-tx); border-color: var(--cc-addh-bd);
    box-shadow: var(--cc-addh-sh); transform: var(--cc-addh-tr);
}
}
.cart-drawer-cross-link { display: block; color: inherit; text-decoration: none; }   /* #32 : carte suggérée cliquable */

/* Footer — sous-total + CTA */
.cart-drawer-footer {
    flex-shrink: 0;
    border-top: 1px solid var(--clr-border);
    background: #fff;
    box-shadow: 0 -5px 16px rgba(0,0,0,0.04);
    padding: 14px 20px 16px;
}
.cart-drawer-sub {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}
.cart-drawer-sub-lbl {
    font-family: var(--ff-title);
    font-size: 13px;
    font-weight: 700;
    color: var(--clr-text-dark);
}
.cart-drawer-sub-lbl span {
    font-family: var(--ff-body);
    font-weight: 400;
    font-size: 11px;
    color: #999;
}
.cart-drawer-sub-val {
    font-family: var(--ff-title);
    font-size: 22px;
    font-weight: 700;
    color: var(--clr-or-text);
}
.cart-drawer-shipping-note {
    font-size: 11.5px;
    color: #999;
    margin: 3px 0 12px;
}
.cart-drawer-shipping-note.ok { color: var(--clr-success); font-weight: 600; }
.cart-drawer-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: var(--btn-pad-y) var(--btn-pad-x);
    border: none;
    border-radius: var(--radius-s);
    background: var(--clr-ink);
    color: #fff !important;
    font-size: var(--btn-font);
    font-weight: var(--btn-weight);
    letter-spacing: var(--btn-letter);
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    box-sizing: border-box;
    box-shadow: var(--btn-shadow);   /* #6 : ombre de contact, aligne sur .btn-primary (moins « plaqué ») */
    transition: background 0.15s, transform 0.1s;
}
.cart-drawer-cta:hover { background: var(--clr-ink-dark); }
.cart-drawer-cta:active { transform: translateY(1px); }
/* #19 (retour Thomas 22/06) : « Continuer mes achats » était ici un simple lien
   texte (background:none;border:none) alors que le même libellé, dans le panneau
   de confirmation « Produit ajouté » (.btn-ap-secondary, rendu après ajout depuis
   une carte), est un vrai bouton bordé. Selon le chemin (tiroir complet vs
   confirmation) le bouton apparaissait donc tantôt en texte, tantôt en bouton.
   On l'aligne sur le rendu « carte » (bouton secondaire bordé) ; radius gardé à
   3px pour rester cohérent avec le CTA « Commander → » voisin (retour #15). */
.cart-drawer-continue {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: var(--btn-pad-y) var(--btn-pad-x);
    background: #fff;
    color: var(--clr-text);
    border: 1.5px solid var(--clr-border);
    border-radius: var(--radius-s);
    font-size: var(--btn-font);
    font-weight: var(--btn-weight);
    letter-spacing: var(--btn-letter);
    text-align: center;
    cursor: pointer;
    box-sizing: border-box;
    transition: border-color 0.15s, color 0.15s;
}
.cart-drawer-continue:hover { border-color: var(--clr-text-dark); color: var(--clr-text-dark); }

/* Responsive — tiroir panier plein écran sur mobile */
@media (max-width: 600px) {
    #cart-drawer { width: 100%; max-width: 100%; }
    .cart-drawer-footer { position: sticky; bottom: 0; }
}

/* Verrouillage scroll body quand tiroir ouvert */
body.cart-drawer-open { overflow: hidden; }

/* ============ TIROIR « COMPTE » (#11 — calqué sur #cart-drawer) ============ */
#account-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:9999;opacity:0;pointer-events:none;transition:opacity .3s ease}
#account-overlay.is-open{opacity:1;pointer-events:auto}
#account-drawer{position:fixed;right:0;top:0;height:100vh;height:100dvh;width:400px;max-width:100%;background:#fff;z-index:10000;transform:translateX(110%);transition:transform .3s ease;display:flex;flex-direction:column;box-shadow:-4px 0 20px rgba(0,0,0,.15)}
#account-drawer.is-open{transform:translateX(0)}
.acc-drawer-header{position:relative;display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:linear-gradient(135deg,#1a0a0f 0%,var(--clr-ink) 55%,var(--clr-ink-dark) 100%);overflow:hidden;flex-shrink:0}
.acc-drawer-title{font-family:var(--ff-title);font-size:15px;font-weight:700;letter-spacing:.3px;color:#fff;display:flex;align-items:center;gap:9px}
.acc-drawer-title .cc-i{stroke:#fff}
.acc-drawer-close{width:28px;height:28px;min-width:28px;border-radius:50%;background:none;border:none;display:flex;align-items:center;justify-content:center;font-size:17px;line-height:1;color:rgba(255,255,255,.6);cursor:pointer;padding:0;transition:background .15s,color .15s}
.acc-drawer-close:hover{background:rgba(255,255,255,.12);color:#fff}
/* pt8a (Thomas 20/07) — le pied du tiroir (CTA + déconnexion) doit être plaqué en
   BAS du panneau, pas collé sous le dernier lien. L'état déconnecté le faisait déjà
   (colonne flex + `margin-top:auto`), l'état CONNECTÉ non : d'où le grand vide blanc
   sous les boutons. On remonte donc la colonne flex sur le corps commun aux deux
   états, et `margin-top:auto` sur le pied lui-même (cf. .acc-drawer-footer).
   `flex-shrink:0` sur les enfants directs : sans lui, un panneau trop court écraserait
   l'encart cagnotte et les liens au lieu de laisser le corps défiler. */
.acc-drawer-body{flex:1;overflow-y:auto;padding:0;display:flex;flex-direction:column}
.acc-drawer-body > *{flex-shrink:0}
.acc-greet{display:flex;align-items:center;gap:13px;padding:20px 22px 18px;border-bottom:1px solid #f0ead9}
.acc-avatar{width:46px;height:46px;border-radius:50%;background:#f6f1e6;border:1px solid #ece2cc;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.acc-avatar .cc-i{stroke:var(--clr-ink)}
.acc-greet-name{font-family:var(--ff-title);font-size:17px;font-weight:700;color:var(--clr-text-dark);line-height:1.2}
.acc-greet-sub{font-size:12px;color:#999;margin-top:2px}
/* pt2 (Thomas 20/07) — encart « cheap » repris : le dégradé beige en diagonale
   disparaît au profit d'un fond plat + filet or à gauche, la signature du site.
   Ne s'affiche plus que si le solde est > 0 (cf. account-drawer.inc.php) ; à
   solde nul c'est .acc-link-cag qui prend le relais, en ligne de menu. */
.acc-cagnotte{display:flex;align-items:center;gap:14px;margin:16px 22px;padding:15px 16px 15px 15px;border:1px solid var(--c-line);border-left:3px solid var(--clr-or);border-radius:0 var(--radius-m) var(--radius-m) 0;background:var(--c-bg-soft);text-decoration:none;cursor:pointer;transition:border-color .15s,box-shadow .15s}
@media (hover: hover) { .acc-cagnotte:hover{border-color:#d8c9a3;border-left-color:var(--clr-or);box-shadow:0 2px 8px rgba(0,0,0,.05)} }   /* pt13d — cf. pt11-survol-tactile */
/* variante « ligne » (solde nul) : même gabarit que les autres liens du tiroir.
   Le montant a été retiré (recette Thomas 22/07) — plus de « 0,00 € » à afficher,
   donc plus de .acc-cag-amount ni de margin-left:8px sur le chevron : celui-ci
   reprend le margin-left:auto générique de .acc-link-chev et reste à droite. */
/* Recette Thomas 22/07 — plus de dorure d'icône ici. `stroke:var(--clr-or-text)`
   repeignait l'ENCRE de l'icône (le cercle de la pièce) et pas seulement l'accent,
   ce qui donnait un picto 100 % or au milieu de voisines encre. L'icône garde
   désormais partout son rendu natif ; la signature or de l'encart, c'est son filet
   à gauche, pas son picto. */
.acc-cagnotte .cc-i{flex-shrink:0}
.acc-cagnotte .acc-link-chev{stroke:#c9c0ad}
.acc-cagnotte-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--clr-or-text)}
.acc-cagnotte-val{font-family:var(--ff-title);font-size:22px;font-weight:800;color:var(--clr-ink);line-height:1.05;margin-top:3px}
.acc-links{list-style:none;margin:0;padding:4px 0 8px}
.acc-link{display:flex;align-items:center;gap:14px;padding:14px 22px;text-decoration:none;color:var(--clr-text-dark);font-size:14px;font-weight:600;border-bottom:1px solid #f4f0e7;transition:background .15s}
.acc-link:last-child{border-bottom:none}
@media (hover: hover) { .acc-link:hover{background:#fcfaf6} }   /* pt11 — cf. pt11-survol-tactile */
.acc-link .cc-i{stroke:var(--clr-ink);flex-shrink:0}
.acc-link-chev{margin-left:auto;transform:rotate(-90deg);stroke:#c9c0ad}
.acc-link-priv .cc-i:first-child{stroke:var(--clr-or-text)}
.acc-link-priv .acc-link-chev{margin-left:10px}
.acc-tag{margin-left:auto;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--clr-or-text);background:#f6efe0;border:1px solid #ece2cc;border-radius:10px;padding:2px 8px}
.acc-drawer-footer{flex-shrink:0;margin-top:auto;border-top:1px solid var(--clr-border);background:#fff;box-shadow:0 -5px 16px rgba(0,0,0,.04);padding:14px 20px 16px}
.acc-cta{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:var(--btn-min-h);padding:var(--btn-pad-y) var(--btn-pad-x);border:none;border-radius:var(--radius-s);background:var(--clr-ink);color:#fff !important;font-size:var(--btn-font);font-weight:var(--btn-weight);text-decoration:none !important;cursor:pointer;box-sizing:border-box;line-height:1;transition:background .15s}   /* line-height:1 (chantier hauteur boutons) : border-box seul laissait le line-height hérité (30px tunnel) pousser à ~50px */
.acc-cta:hover{background:var(--clr-ink-dark)}
.acc-cta .cc-i{stroke:#fff}
.acc-secondary{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:8px;padding:12px;background:#fff;color:var(--clr-text);border:1.5px solid var(--clr-border);border-radius:var(--radius-s);font-size:13px;font-weight:700;text-decoration:none;cursor:pointer;box-sizing:border-box;transition:border-color .15s,color .15s}
.acc-secondary:hover{border-color:var(--clr-text-dark);color:var(--clr-text-dark)}
.acc-secondary .cc-i{stroke:currentColor}
.acc-empty{padding:52px 26px 8px;text-align:center}
.acc-empty-ico{width:74px;height:74px;border-radius:50%;background:#f6f1e6;border:1px solid #ece2cc;display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
.acc-empty-ico .cc-i{stroke:var(--clr-ink)}
.acc-empty-title{font-family:var(--ff-title);font-size:18px;font-weight:700;color:var(--clr-text-dark)}
.acc-empty-sub{font-size:13px;color:#999;margin:8px auto 4px;max-width:280px;line-height:1.5}
/* (pt8a) `.acc-empty + .acc-drawer-footer{margin-top:auto}` retiré : le pied porte
   désormais `margin-top:auto` pour les DEUX états — une seule source de vérité. */
body.account-drawer-open{overflow:hidden}
@media (max-width:600px){#account-drawer{width:100%}}

/* Verrou de defilement des overlays (burger, recherche, panier) — pose par
   ccSyncScrollLock (JS) sur <body> quand un overlay est ouvert.
   ⚠️ On verrouille UNIQUEMENT le <body>, JAMAIS la racine <html>.
   Sur Firefox Android, overflow:hidden sur <html> desactive le defileur
   racine et Firefox ne route alors PLUS le geste tactile vers le defileur
   interne de l'overlay : scroll totalement mort + le bas du tiroir (footer
   « Commander », derniers liens du burger) devient inatteignable. Chrome le
   tolere, pas Firefox. body{overflow:hidden} suffit a bloquer l'arriere-plan.
   ⚠️ PAS non plus de position:fixed sur le body (cassait aussi Firefox). */
body.cc-scroll-locked {
    overflow: hidden;
    overscroll-behavior: none;
}

/* ============================================================
   Panneau de confirmation « Produit ajouté » — design mockup
   (mockup-ajout-panier.html). Volet droit sur desktop, bottom
   sheet sur mobile. Distinct du tiroir panier complet :
   en-tête succès + produit + récap (barre franco) + suggestions.
   ============================================================ */
#cart-added {
    position: fixed;
    right: 0;
    top: 0;
    height: 100vh;
    width: 400px;
    max-width: 100%;
    background: #fff;
    z-index: 10001;
    transform: translateX(110%);
    transition: transform 0.28s ease;
    display: flex;
    flex-direction: column;
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.2);
}
#cart-added.is-open { transform: translateX(0); }

/* Handle — visible uniquement en bottom-sheet mobile */
.ap-handle { display: none; }

/* En-tête succès (dégradé vert) */
.ap-head {
    /* Aligné sur l'identité visuelle : même dégradé bordeaux que .cart-drawer-header
       (le vert détonnait — retour Thomas #8). ✓ blanc translucide + titre blanc OK dessus. */
    background: linear-gradient(135deg, #1a0a0f 0%, var(--clr-ink) 55%, var(--clr-ink-dark) 100%);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.ap-check {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.75rem; color: #fff; font-weight: 700; flex-shrink: 0;
}
.ap-head-title {
    font-size: 0.8rem; font-weight: 700; color: #fff;
    text-transform: uppercase; letter-spacing: 0.6px; flex: 1;
}
.ap-close {
    background: none; border: none;
    font-size: 1.25rem; line-height: 1;
    color: rgba(255, 255, 255, 0.6); cursor: pointer;
    padding: 6px; transition: color 0.12s;
}
.ap-close:hover { color: #fff; }

/* Corps scrollable (injecté par AJAX) */
.cart-added-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    padding: 0;
}

/* Produit ajouté */
.ap-product {
    display: flex; gap: 14px; align-items: flex-start;
    padding: 16px 18px 14px;
    border-bottom: 1px solid #f0f0f0;
}
.ap-bottle {
    width: 58px; height: 76px;
    border-radius: var(--radius-s);
    flex-shrink: 0;
    overflow: hidden;
    background: #f5f5f5;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 3px 5px 14px rgba(0, 0, 0, 0.12);
    isolation: isolate;
}
.ap-bottle img { width: 100%; height: 100%; object-fit: contain; padding: 4px; box-sizing: border-box; mix-blend-mode: multiply; }
.ap-bottle--emoji {
    background: linear-gradient(160deg, var(--clr-ink-dark) 0%, var(--clr-ink) 100%);
    color: #fff;   /* repli sans photo : icône bouteille (cc_icon) en blanc sur le fond bordeaux, à la place de l'émoji */
}
.ap-info { flex: 1; min-width: 0; }
.ap-appel {
    display: block;
    font-size: 0.625rem; text-transform: uppercase; letter-spacing: 1.3px;
    color: var(--clr-or-text); font-weight: 700; margin-bottom: 3px;
}
.ap-name {
    font-size: 0.9rem; font-weight: 700;
    color: var(--clr-text-dark); line-height: 1.25; margin-bottom: 6px;
}
.ap-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.ap-tag {
    background: var(--clr-bg-grey); border-radius: var(--radius-s);
    padding: 2px 7px; font-size: 0.69rem; color: var(--clr-text);
}
.ap-tag.tag-prod { font-weight: 700; color: var(--clr-text-dark); }
/* Tag couleur du vin : pastille colorée (même --wine-accent que les cartes catalogue)
   au lieu d'un émoji 🍷/🌸/🥂. La classe wc-<slug> portée par le tag fournit la teinte. */
.ap-tag--color { display: inline-flex; align-items: center; gap: 5px; }
.ap-tag--color .ap-dot {
    width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
    background: var(--wine-accent, var(--clr-or-text));
    box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.16), 0 0 0 1px rgba(0,0,0,.05);
}
.ap-price-row { display: flex; align-items: center; gap: 7px; }
.ap-qty {
    background: var(--clr-bg-grey); border-radius: var(--radius-s);
    padding: 3px 9px;
    display: flex; align-items: center; gap: 5px;
    font-size: 0.75rem; font-weight: 700; color: var(--clr-text-dark);
}
/* pt13c (retours Thomas 29/07) — les deux seuls gris en dur du bloc prix du panneau
   « Produit ajouté » (#aaa et #b0b0b0) passent au jeton de texte. Ils étaient plus
   clairs que le gris du même rôle dans le tiroir et sur /panier (.cart-drawer-price
   small, .od-unit — tous deux sur --c-text) : trois surfaces, trois gris. Doctrine
   « zéro valeur en dur » (site.css:68-104). */
.ap-qty small { font-weight: 400; color: var(--c-text); font-size: 0.69rem; }
.ap-unit { font-size: 0.69rem; color: var(--c-text); }
.ap-total {
    margin-left: auto;
    font-size: 1.1rem; font-weight: 700; color: var(--clr-or-text);
}

/* Récap mini-panier */
.ap-recap {
    padding: 12px 18px;
    background: var(--clr-bg-light);
    border-bottom: 1px solid var(--c-border-struct);
}
.ap-recap-row {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 9px;
}
.ap-recap-left {
    display: flex; align-items: center; gap: 7px;
    font-size: 0.78rem; color: var(--clr-text);
}
.ap-recap-pill {
    background: var(--clr-ink); color: #fff;
    font-size: 0.625rem; font-weight: 700;
    min-width: 21px; height: 21px; border-radius: 11px; padding: 0 6px;
    display: flex; align-items: center; justify-content: center;
}
.ap-recap-total {
    font-size: 1rem; font-weight: 700; color: var(--clr-text-dark);
}
.ap-ship-msg { font-size: 0.72rem; color: var(--clr-text); margin-bottom: 6px; }
.ap-ship-msg strong { color: var(--clr-or-text); }
.ap-ship-msg--ok strong { color: var(--clr-success); display: inline-flex; align-items: center; gap: 5px; }
.ap-ship-msg--ok strong svg { flex-shrink: 0; }   /* icône livraison (cc_icon) alignée au texte, à la place de l'émoji 🎉 */
.ap-ship-track {
    height: 6px; background: rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-s); overflow: hidden;
}
.ap-ship-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--clr-ink), var(--clr-or));
    border-radius: var(--radius-s);
    transition: width 0.4s ease;
}

/* Suggestions « Vous aimerez aussi » */
.ap-suggestions { padding: 13px 18px 10px; border-bottom: 1px solid #f0f0f0; }
.ap-sugg-label {
    font-size: 0.625rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1.4px;
    color: #bbb; margin-bottom: 9px;
}
.ap-sugg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.ap-sugg-card {
    border: 1.5px solid var(--clr-border); border-radius: var(--radius-m);
    overflow: hidden;
    display: flex; flex-direction: column;
    transition: border-color 0.15s, box-shadow 0.15s;
}
@media (hover: hover) {   /* pt13d — cf. pt11-survol-tactile */
.ap-sugg-card:hover {
    border-color: var(--clr-or);
    box-shadow: 0 3px 12px rgba(184,138,62,0.14);
}
}
.ap-sugg-link { display: block; color: inherit; }
.ap-sugg-thumb {
    height: 56px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; overflow: hidden; background: #f5f5f5;
    isolation: isolate;
}
.ap-sugg-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 4px; box-sizing: border-box; mix-blend-mode: multiply; }
.sth-r1 { background: linear-gradient(160deg, var(--clr-ink-dark), var(--clr-ink)); }
.sth-r2 { background: linear-gradient(160deg, var(--clr-ink-dark), var(--clr-ink)); }
.sth-wh { background: linear-gradient(160deg, #e8d88a, #c0a840); }
.ap-sugg-body { padding: 5px 7px 4px; }
.ap-sugg-appel {
    font-size: 0.53rem; text-transform: uppercase; letter-spacing: 0.9px;
    color: var(--clr-or-text); font-weight: 700; margin-bottom: 2px;
    /* #17 — appellation autorisée sur 2 lignes max (au lieu d'une seule tronquée)
       avant d'empiéter sur la cuvée ; au-delà, ellipsis. */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.25;   /* #17 (suite) — sans ça, hérite du line-height:30px global du site → ~30px de vide entre les 2 lignes (retour poune 18/06) */
}
.ap-sugg-name {
    font-size: 0.66rem; font-weight: 700; color: var(--clr-text-dark);
    line-height: 1.3; margin-bottom: 4px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.ap-sugg-foot {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 7px 7px;
    /* Pied (prix + bouton) calé en bas de carte : les cartes de la grille étant à
       hauteur égale, les pieds s'alignent même si un nom passe sur 2 lignes (retour Thomas R10). */
    margin-top: auto;
}
.ap-sugg-price { font-size: 0.72rem; font-weight: 700; color: var(--clr-or-text); }
.ap-sugg-btn {
    font-size: 0.59rem; font-weight: 700; color: #aaa;
    background: none; border: 1px solid var(--clr-border);
    border-radius: var(--radius-s); padding: 2px 6px; cursor: pointer;
    transition: all 0.12s; white-space: nowrap; line-height: 1.4;
}
@media (hover: hover) {   /* pt13d — le panneau « Produit ajouté » reste à l'écran après le tap. */
.ap-sugg-btn:hover,
.ap-sugg-card:hover .ap-sugg-btn {
    background: var(--clr-ink); color: #fff; border-color: var(--clr-ink);
}
}
.ap-sugg-btn:disabled { opacity: 0.7; cursor: default; }

/* CTAs (footer) */
.ap-actions {
    padding: 14px 18px calc(18px + env(safe-area-inset-bottom, 0px));
    flex-shrink: 0;
    border-top: 1px solid #f0f0f0;
    background: #fff;
}
.btn-ap-primary {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; background: var(--clr-ink); color: #fff;
    border: none; cursor: pointer;
    box-sizing: border-box; line-height: 1;
    min-height: var(--btn-min-h); padding: var(--btn-pad-y) var(--btn-pad-x); border-radius: var(--radius-s);
    font-size: var(--btn-font); font-weight: var(--btn-weight); letter-spacing: var(--btn-letter);
    box-shadow: var(--btn-shadow);
    margin-bottom: 8px; transition: background 0.15s, box-shadow 0.18s;
}
.btn-ap-primary:hover { background: var(--clr-ink-dark); }
.btn-ap-primary .btn-meta { font-size: 0.69rem; opacity: 0.75; font-weight: 600; }
.btn-ap-secondary {
    display: flex; align-items: center; justify-content: center; width: 100%;
    background: #fff; color: var(--clr-text);
    border: 1.5px solid var(--clr-border); cursor: pointer;
    box-sizing: border-box; line-height: 1;
    min-height: var(--btn-min-h); padding: var(--btn-pad-y) var(--btn-pad-x); border-radius: var(--radius-s);
    font-size: var(--btn-font); font-weight: 700;
    text-align: center; transition: border-color 0.15s, color 0.15s;
}
.btn-ap-secondary:hover { border-color: var(--clr-text-dark); color: var(--clr-text-dark); }

/* Repli legacy (si le serveur ne renvoie pas added_html : vieux cache) */
.cart-added-product { display: flex; align-items: flex-start; gap: 16px; padding: 20px 18px; }
.cart-added-img { width: 60px; height: 150px; object-fit: contain; flex-shrink: 0; mix-blend-mode: multiply; }
.cart-added-info { flex: 1; padding-top: 4px; }
.cart-added-name { font-size: 1rem; font-weight: 700; color: #222; line-height: 1.35; margin-bottom: 10px; }
.cart-added-region { font-size: 0.85rem; color: #666; margin-bottom: 6px; }
.cart-added-qty { font-size: 0.85rem; color: #444; margin-bottom: 10px; }
.cart-added-price { font-size: 1.15rem; font-weight: 700; color: var(--clr-or-text); }

/* Toast d'erreur AJAX */
#cart-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(80px);
    background: var(--c-danger);
    color: #fff;
    padding: 10px 20px;
    border-radius: var(--radius-s);
    font-size: 0.9rem;
    z-index: 11000;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    white-space: nowrap;
    pointer-events: none;
}
#cart-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Photo produit dans le tiroir */
.cart-drawer-item-photo {
    width: 55px;
    height: 90px;
    object-fit: contain;
    border-radius: var(--radius-s);
    flex-shrink: 0;
    background: #f5f5f5;
    padding: 3px;
    box-sizing: border-box;
}

/* Colonne droite : sous-total + bouton supprimer */
.cart-drawer-item-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    gap: 6px;
    flex-shrink: 0;
    min-height: 60px;
}

/* Contrôles quantité */
.cart-drawer-item-qty {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: #444;
    flex-wrap: wrap;
}
/* Bouton supprimer article */
.cart-drawer-remove {
    background: none;
    border: none;
    color: #767676;             /* pt7e — cf. la règle jumelle plus haut */
    font-size: 1.2rem;
    cursor: pointer;
    padding: 2px 4px;
    line-height: 1;
    transition: color 0.15s;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media (hover: hover) { .cart-drawer-remove:hover { color: var(--c-danger); } }   /* pt13d — cf. pt11-survol-tactile */

/* Mobile : tiroir plein écran */
@media (max-width: 768px) {
    #cart-drawer {
        width: 100%;
        height: 100dvh;
    }
    /* #1 20260715 (retour Thomas) : sur mobile, « Commander » (18px/1.05rem) faisait
       le double de « Continuer mes achats » (resté à --btn-pad-y). On aligne les deux
       CTA sur la même hauteur ; la primauté du CTA se lit à son remplissage encre
       plein, pas à sa taille.
       pt7 (Thomas 24/07) — « la police n'est pas la même qu'ailleurs ». La FAMILLE
       l'était bien (reset input,button,textarea,select{font-family:inherit}, l.151),
       mais la TAILLE non : ce bloc écrasait font-size à 1rem (16px) et padding à 14px,
       seuls boutons du site hors de l'échelle --btn-* (14px / 10px 20px). D'où un
       rendu plus gros et plus lourd que partout ailleurs. On revient aux tokens et on
       tient la cible tactile par min-height (44px) au lieu du padding en dur — les
       deux CTA restent donc de hauteur identique, objectif d'origine préservé. */
    .cart-drawer-cta,
    .cart-drawer-continue {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: var(--btn-min-h);
    }
    .cart-drawer-footer { padding: 16px; }

    /* Panneau « Produit ajouté » → bottom sheet (glisse depuis le bas) */
    #cart-added {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: 88vh;
        max-height: 88dvh;
        border-radius: var(--radius-l) var(--radius-l) 0 0;
        transform: translateY(110%);
        box-shadow: 0 -6px 30px rgba(0, 0, 0, 0.2);
    }
    #cart-added.is-open { transform: translateY(0); }
    .ap-handle {
        display: block;
        text-align: center;
        padding: 8px 0 4px;
        flex-shrink: 0;
    }
    .ap-handle span {
        display: inline-block;
        width: 36px; height: 4px;
        background: #ddd; border-radius: var(--radius-s);
    }
}

/* ============================================================
   Pages listing : masquer la colonne droite + élargir col-centre
   + grille 5 colonnes pour exploiter l'espace gagné.
   Desktop only ; sur mobile/tablette les media queries existantes
   (980px → 2 col, 680px → 1 col) restent prioritaires.
   ============================================================ */
@media (min-width: 981px) {
  #page-boutique #col-droite,
  #page-liste #col-droite,
  #page-nouveautes #col-droite,
  #page-coups-de-coeur #col-droite,
  #page-fins-de-loges #col-droite,
  #page-caveprivee #col-droite,
  #page-dernieres-bouteilles #col-droite,
  #page-appellations #col-droite,
  #page-recherche-vins #col-droite {
    display: none;
  }

  /* col-centre récupère l'espace de col-droite (20% + 3% marge = ~23%).
     col-gauche reste à 20% min 200px. On laisse un peu d'air à droite. */
  #page-boutique #col-centre,
  #page-liste #col-centre,
  #page-nouveautes #col-centre,
  #page-coups-de-coeur #col-centre,
  #page-fins-de-loges #col-centre,
  #page-caveprivee #col-centre,
  #page-dernieres-bouteilles #col-centre,
  #page-appellations #col-centre,
  #page-recherche-vins #col-centre {
    width: auto;
    flex: 1 1 auto;
    padding-left: 28px;   /* on resserre vers les filtres pour gagner de la largeur */
    padding-right: 24px;  /* petit gutter à droite */
  }

  /* Colonnes desktop des listings, pilotées par le back-office (catalogue_grid_cols
     → classe body.cc-grid-XX, variables --cc-cat-tracks définies en fin de fichier).
     Preset 45 (défaut) = 4 colonnes ici (≥981px), 5 au-delà de 1600px (bloc dédié
     plus bas). Preset 34 = 3 puis 4. La déclaration littérale sert de repli aux
     navigateurs ne sachant pas substituer une var() dans une valeur de grille.
     NB : #page-boutique exclu — la boutique v4 a son propre bloc .cc-cat. */
  #page-liste ul.liste-vins.cc-wine-grid,
  #page-nouveautes ul.liste-vins.cc-wine-grid,
  #page-coups-de-coeur ul.liste-vins.cc-wine-grid,
  #page-fins-de-loges ul.liste-vins.cc-wine-grid,
  #page-caveprivee ul.liste-vins.cc-wine-grid,
  #page-dernieres-bouteilles ul.liste-vins.cc-wine-grid,
  #page-appellations ul.liste-vins.cc-wine-grid,
  #page-recherche-vins ul.liste-vins.cc-wine-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-columns: var(--cc-cat-tracks, repeat(4, minmax(0, 1fr)));
    gap: 14px;
  }
}

/* Palier « très grand écran » (≥1600px) : preset 45 → 5 colonnes, preset 34 → 4.
   En dessous de 1600px on reste sur --cc-cat-tracks (4 ou 3). #page-boutique exclu. */
@media (min-width: 1600px) {
  #page-liste ul.liste-vins.cc-wine-grid,
  #page-nouveautes ul.liste-vins.cc-wine-grid,
  #page-coups-de-coeur ul.liste-vins.cc-wine-grid,
  #page-fins-de-loges ul.liste-vins.cc-wine-grid,
  #page-caveprivee ul.liste-vins.cc-wine-grid,
  #page-dernieres-bouteilles ul.liste-vins.cc-wine-grid,
  #page-appellations ul.liste-vins.cc-wine-grid,
  #page-recherche-vins ul.liste-vins.cc-wine-grid {
    grid-template-columns: var(--cc-cat-tracks-wide, repeat(5, minmax(0, 1fr)));
  }
}

/* ===== HOMEPAGE ===== */

/* Conteneur pleine largeur */
#homepage-content { width: 100%; max-width: 100%; }

/* Container centré réutilisable */
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }

/* ---- Sticky header homepage (hide on scroll down / show on scroll up) ---- */
body.homepage #site-sticky-header {
  position: sticky;
  top: 0;
  z-index: 200;
  transform: translateY(0);
  transition: transform 0.3s ease;
}
body.homepage #site-sticky-header.header--hidden {
  transform: translateY(-100%);
}

/* 🧨 pt (retour Thomas 26/07) — LE DOUBLE DÉCALAGE DU HEADER FIXE EN MOBILE.
   Un transform ≠ none fait de l'élément le CONTAINING BLOCK de ses descendants
   position:fixed. #header_mobile (fixed, top:0) vit DANS #site-sticky-header
   (index.php) : avec le translateY(0) ci-dessus, il n'est donc pas ancré au
   viewport mais au sticky — lequel est déjà placé sous le bandeau d'annonce.
   Le correctif pt3 (index.php : hdr.style.top = hauteur de .cc-annonce) lui
   rajoutait alors une SECONDE fois cette hauteur.
   Mesuré au banc iPhone 13 sur dev (390×844, scrollY=0, annonce = 56,1px) :
     · accueil   → header fixe à 112,1px (56,1 + 56) = 23,3px de blanc, dont
                   32,8 masqués par .header-top tant qu'il s'affichait ;
     · contenu   → header fixe à 112,1px, sticky de hauteur nulle = 56px de blanc ;
     · catalogue → header fixe à 56px, gap 0 — SEULE page juste, et la seule à
                   neutraliser déjà le transform (cf. body.catalogue plus bas).
   On aligne tout le mobile sur la géométrie du catalogue, la seule prouvée
   correcte : ancrage viewport, le décalage JS redevient le seul en jeu.
   ⚠️ Spécificité : cette règle doit venir APRÈS body.homepage #site-sticky-header
   (juste au-dessus) et à spécificité au moins égale, sinon elle est ignorée sur
   l'accueil. Ne pas la remonter dans la media 1130px du haut du fichier.
   Les DEUX états sont neutralisés : .header--hidden est posé aussi en mobile par
   le hide-on-scroll « desktop » (index.php, actif hors catalogue quelle que soit
   la largeur) ; sans ça il recréerait le containing block au scroll et ferait
   sauter le header de la hauteur du sticky.
   Sans effet visuel par ailleurs : .header-top étant masqué en mobile (cf. media
   1130px), ce conteneur est de hauteur NULLE sur toutes les pages mobiles — il
   n'y a plus rien à translater. Le hide-on-scroll mobile reste porté par
   #header_mobile.header--hidden. */
@media only screen and (max-width: 1130px) {
  body.homepage #site-sticky-header,
  body.homepage #site-sticky-header.header--hidden,
  #site-sticky-header,
  #site-sticky-header.header--hidden {
    transform: none;
  }
}

/* ---- Catalogue : comportement eBay ----
   Le header (USP + barre principale + menu) défile normalement et disparaît.
   SEULE la barre de filtres (.cc-filtres-bar, sticky top:0) reste épinglée en
   haut quand on scrolle. Le header ne réapparaît qu'en haut de page. */
body.catalogue #site-sticky-header {
  position: static;
  z-index: auto;
  /* transform:translateY(0) hérité de la règle de base crée un contexte
     d'empilement même en position:static : il enferme les dropdowns du header
     (méga-menu « La cave » z-1000, flyout compte z-10001) au niveau « auto » de
     la racine, donc SOUS le contenu catalogue à z-index positif (.cc-filtres-bar
     z-500, cartes). On le neutralise ici pour libérer les dropdowns. */
  transform: none;
}

/* Retour Poune #5 — panneau de recherche recouvert par les cartes catalogue.
   Le panneau d'autocomplétion (.cc-ac-panel, absolute z:1000) vit dans la barre
   de recherche, donc DANS #site-sticky-header. Sur catalogue ce header est
   neutralisé (static / z:auto / transform:none) pour libérer les méga-menus :
   il ne crée plus de contexte d'empilement. Le panneau partage alors le contexte
   racine avec le contenu catalogue ; les médaillons des cartes (sparkle/sablier,
   z:3) et surtout leurs propres contextes d'empilement (survol/transform)
   peignaient par-dessus le BAS du panneau (#14 a déjà neutralisé la barre de
   filtres, mais pas les cartes — non masquables).
   Fix : tant que le panneau est ouvert (body.cc-ac-open, posé par
   autocompletion.js en desktop), on redonne à #site-sticky-header un contexte
   d'empilement DÉDIÉ à très haut z-index. Tout son sous-arbre — dont le panneau
   absolu — passe alors AU-DESSUS de tout le contenu catalogue d'un bloc, quels
   que soient les z-index internes des cartes. On le fait UNIQUEMENT pendant
   l'ouverture (le méga-menu est fermé quand la recherche est active → pas de
   ré-enfermement des dropdowns). Le rendu mobile (.search-scrim) n'est pas
   concerné : body.cc-ac-open n'est posé qu'en desktop, et l'overlay mobile vit
   déjà sous <body>. #14 (barre de filtres masquée) reste en place. */
body.catalogue.cc-ac-open #site-sticky-header {
  position: relative;
  z-index: 12000;
}

/* ---- Header niveau 1 — Top bar rouge ---- */
.header-top {
  background: var(--clr-ink);
  color: white;
  padding: 7px 0;
  font-size: 12.5px;
}
.header-top .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.ht-reviews { display: flex; align-items: center; gap: 5px; }
.ht-stars   { color: #FFD700; font-size: 14px; }
.ht-score   { font-weight: 700; font-size: 13px; }
.ht-count   { opacity: .85; }
.ht-center  { font-weight: 700; font-size: 13px; letter-spacing: .2px; }
.ht-right   { display: flex; gap: 14px; }
.ht-right-item { opacity: .9; }
/* #23b/#23c : .ht-center et .ht-right-item sont devenus des liens (FAQ / tel:).
   On neutralise le style de lien par défaut (bleu souligné) dans la barre rouge. */
a.ht-center, a.ht-right-item { color: inherit; text-decoration: none; }
a.ht-center:hover, a.ht-right-item:hover { text-decoration: underline; opacity: 1; }

/* ---- Header niveau 2 — barre principale homepage ---- */
.header-main {
  background: var(--clr-white);
  border-bottom: 1px solid var(--clr-border);
  padding: 14px 0;
}
.header-main .container {
  display: flex;
  align-items: center;
  gap: 20px;
}
.logo-hp { flex-shrink: 0; text-decoration: none; display: block; }
.logo-hp img { height: 44px; display: block; }
.hp-searchbar {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 0;
  border-bottom: 1.5px solid var(--c-ink);
  border-radius: 0;
  /* #7 (retours Thomas 04/07) — padding vertical équilibré (était 0 en haut / 10px en
     bas → loupe et texte collés en haut de la boîte, « surélevés » avec un vide sous le
     texte). 5/5 recentre le contenu sans changer la hauteur du header (total inchangé). */
  padding: 5px 2px 5px;
  background: transparent;
  transition: border-bottom-width .15s, border-bottom-color .15s;
}
.hp-searchbar:focus-within { border-bottom-width: 2px; border-bottom-color: var(--c-ink); }
.hp-searchbar input[type="search"] {
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  color: var(--clr-text);
  width: 100%;
  outline: none;
}
.hp-searchbar input[type="search"]::placeholder { color: #9a8e78; }
.hp-searchbar input[type="hidden"] { display: none; }
.hp-search-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; background: transparent; cursor: pointer; flex-shrink: 0; color: var(--c-ink); }
.hp-search-btn:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 2px; border-radius: var(--radius-s); }
.hp-search-ico { width: 18px; height: 18px; color: var(--c-ink); flex-shrink: 0; }
.hp-header-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-shrink: 0;
}
.hp-haction {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: 10.5px;
  color: var(--clr-text-dark);
  text-decoration: none;
  font-family: inherit;
  cursor: pointer;
}
.hp-haction img { width: 26px; height: 26px; object-fit: contain; }
/* Labels (« Connexion » / « Compte » / « Panier ») : line-height normalisé + nowrap.
   Le span du lien compte héritait d'un line-height de 30px (résidu de l'ancien
   panneau déroulant), ce qui rendait le compte plus haut que le panier et
   désalignait les deux icônes du header (retour D2-C). */
.hp-haction span { white-space: nowrap; line-height: 1.25; }
.hp-account { display: flex; }
/* Le picto panier est « bottom-lourd » (corps + roues en bas de son viewBox)
   alors que le compte est « top-lourd » (tête pleine en haut) : à boîtes 26px
   alignées, le panier paraît descendre et le compte monter (retour 22/06-3 #3).
   On remonte le panier de 2px pour aligner sa masse (le corps du caddie) sur le
   torse du compte — l'alignement de boîte seul ne suffisait pas optiquement. */
.hp-haction .hp-cart-ico { transform: translateY(-2px); }


/* ---- Header niveau 3 — nav dark homepage ---- */
/* #24bis (Thomas 20260702) — la bande sombre du menu doit courir sur TOUTE la
   largeur comme le header. #menu porte un max-width:1920px (menus.css) : au dézoom
   (viewport > 1920px) le fond s'arrêtait et laissait du blanc de part et d'autre.
   On libère la largeur de la BANDE (fond) et on recentre le CONTENU (> ul) à
   l'ancienne largeur pour préserver l'alignement. */
:is(body.homepage,body.catalogue,body.header-hp) #menu { background: #2a2a2a; margin-top: 0; max-width: none; width: 100%; }
:is(body.homepage,body.catalogue,body.header-hp) #menu > ul { max-width: 1920px; margin-left: auto; margin-right: auto; }
/* Liens de premier niveau : blancs sur fond sombre */
:is(body.homepage,body.catalogue,body.header-hp) #menu > ul {
  padding-top: 0;
  padding-bottom: 0;
}
:is(body.homepage,body.catalogue,body.header-hp) #menu > ul > li > a {
  color: white;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.2;
  padding: 13px 18px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: block;
}
:is(body.homepage,body.catalogue,body.header-hp) #menu > ul > li > a:hover { background: var(--clr-ink); color: white; }
/* Flèche indicatrice sur les items dropdown (Rhône Nord / Rhône Sud) */
:is(body.homepage,body.catalogue,body.header-hp) #menu li.has-dropdown > a::after {
  content: ' ▾';
  position: static;
  left: auto;
  bottom: auto;
  width: auto;
  height: auto;
  background: transparent;
  display: inline;
  font-size: 11px;
  transition: none;
}
:is(body.homepage,body.catalogue,body.header-hp) #menu li.has-dropdown > a:hover::after { width: auto; left: auto; }
/* #7 (Thomas 20260702) — l'onglet à méga-menu (« La cave ») réutilise son ::after
   pour le caret ▾, ce qui le privait du liseré doré au survol présent sur les
   autres onglets (« Nos vignerons », « Cave Coste »…). On rétablit le liseré via
   ::before (absolu, hors flux → n'affecte ni le texte ni le caret). Scopé au même
   contexte que le caret pour ne pas doublonner le ::after normal ailleurs. */
:is(body.homepage,body.catalogue,body.header-hp) #menu li.has-dropdown > a::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--clr-or);
  transition: width 0.25s ease, left 0.25s ease;
}
:is(body.homepage,body.catalogue,body.header-hp) #menu li.has-dropdown > a:hover::before { width: 40%; left: 30%; }
/* Sous-menus dropdown : le style complet (méga-menu Option A 2 colonnes) est
   désormais défini dans css/v4/menus.css (.menu-dropdown--mega). On ne surcharge
   plus les liens ici pour éviter les conflits de spécificité. */

/* ---- Hero ---- */
/* pt1a (Thomas 20/07) — « le bloc doit commencer plus haut et finir plus bas ».
   Le bloc n'est plus centré : il occupe toute la hauteur du cadre et ses deux
   groupes (sur-titre+titre / sous-titre+boutons) sont poussés aux extrémités.
   Le vide se crée au MILIEU, où il laisse voir la photo. Hauteur 460 → 560 px.
   Sous 768px la media query reprend la main (height:auto + flex-end). */
.hero {
  /* pt1b/accueil — bande calmée : la photo native 1.5:1 n'est plus rognée à 41 %
     mais à ~24 %, le ciel et le premier plan reviennent (recette Thomas : 2.0 retenu,
     le moins tassé). aspect-ratio bornée : min-height protège les petits laptops,
     max-height plafonne l'ultrawide.
     ⚠️ width:100% OBLIGATOIRE : sans largeur explicite, dès que la hauteur atteint le
     plafond max-height, le navigateur DÉDUIT la largeur du ratio (2 × 700 = 1400px) au
     lieu de remplir le viewport → gouttière vide à droite au-delà de 1400px. width:100%
     fige la largeur ; aspect-ratio ne pilote alors que la hauteur (plafonnée à 700). */
  width: 100%;
  background-size: cover;
  background-position: center;
  aspect-ratio: 2 / 1;
  min-height: 540px;
  max-height: 700px;
  position: relative;
  display: flex;
  align-items: stretch;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  /* #9 (JL) puis pt1b/accueil (recette Thomas) — voile encore allégé ET resserré :
     les nouvelles photos hero sont claires (grand ciel), l'ancien voile paraissait
     sombre. On baisse l'encre (0.60→0.48) et on la ramène vite à zéro (transparent
     dès 56% au lieu de 76%) → le centre/droite de la photo respire, le sombre ne
     reste que tout à gauche sous le texte. Contraste titre vérifié 5.37:1 (> AA 4.5). */
  background: linear-gradient(90deg, rgba(18,7,9,0.48) 0%, rgba(18,7,9,0.15) 33%, rgba(18,7,9,0) 56%);
}
/* #1 (Thomas 05/07) — le .hero est flex : on force le .container interne à occuper
   toute la largeur (capée par --max-width + centrée), pour que le bloc texte s'aligne
   exactement sur le bord gauche du conteneur du site au lieu d'un retrait fixe. */
.hero > .hero-container { width: 100%; display: flex; }
.hero-content {
  position: relative;
  z-index: 1;
  /* pt1a — colonne pleine hauteur, groupes repoussés aux deux bords */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 54px 0 58px;
  max-width: 620px;
}
/* pt1a — les deux groupes restent SOUDÉS : l'amplitude vient de l'écart entre
   eux, pas d'un écartement ligne à ligne (sinon le sous-titre se détache du
   titre et le bloc ne se lit plus d'un seul tenant). */
.hero-grp { display: block; }
.hero-grp > :last-child { margin-bottom: 0; }
.hero-kicker {
  position: relative;
  z-index: 1;
  color: #f0c98a;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-size: 11.5px;
  margin: 0 0 14px;
}
.hero-content h1 {
  font-family: var(--ff-title);
  font-size: 46px;
  font-weight: 800;
  color: white;
  line-height: 1.05;
  text-shadow: 0 2px 10px rgba(0,0,0,0.35);
  margin: 0 0 14px;
}
.hero-sub {
  color: #f3e9df;
  font-size: 16px;
  line-height: 1.55;
  margin: 0 0 28px;
  max-width: 560px;
}
.hero-ctas { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
/* #11 — Carrousel hero : calques empilés en fondu, contrôles pastilles + flèches.
   Les calques passent SOUS le voile .hero::after (lisibilité) et le contenu. */
/* pt1b/accueil (fix clic dots) — PAS de z-index sur .hero-slides : sinon il crée un
   contexte d'empilement à z:0 qui PIÈGE les dots (.hero-ctrl, enfant) sous .hero-content
   (z:2) → clic volé. Sans z-index ici, les enfants (.hero-slide z:0, .hero-ctrl z:3)
   participent au contexte du .hero et se stratifient face au contenu : images (0) <
   contenu (2) < dots (3). .hero-slides reste positionné (absolute) → containing block
   des dots, calage bannière mobile préservé. */
.hero-slides { position: absolute; inset: 0; }
.hero-slide {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  opacity: 0; transition: opacity .8s ease;
}
.hero-slide.is-active { opacity: 1; }
.hero--carousel .hero-content { z-index: 2; }
/* pt1c (Thomas 20/07) — les deux pastilles-flèches sont SUPPRIMÉES (choix validé,
   variante « points seuls » de la maquette). Le carrousel tourne seul toutes les
   5 s et les points suffisent à revenir en arrière.
   Au passage la cible tactile est réparée : le point mesurait 9×9 px, très en
   dessous des 44 px de la charte. Le bouton fait désormais 28×44 px et la
   pastille visible est dessinée en ::before — la zone cliquable grandit sans que
   le point grossisse, et deux boutons voisins ne se chevauchent pas. */
.hero-ctrl {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 12px;
  display: flex; align-items: center; justify-content: center; gap: 12px;
}
.hero-dots { display: flex; align-items: center; gap: 2px; }
.hero-dot {
  position: relative; width: 28px; height: 44px; padding: 0; border: 0;
  background: none; cursor: pointer;
}
.hero-dot::before {
  content: ''; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255,255,255,.5);
  transition: background .2s ease, transform .2s ease;
}
.hero-dot.on::before { background: #fff; transform: translate(-50%, -50%) scale(1.3); }
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
}
.btn-primary {
  background: var(--clr-ink);
  color: white;
  font-size: var(--btn-font);
  font-weight: var(--btn-weight);
  letter-spacing: var(--btn-letter);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border-radius: var(--radius-s);
  text-decoration: none;
  display: inline-block;
  transition: background 0.2s;
  /* Ombre de contact : enveloppe le bord bas entamé par l'antialiasing
     (pilule encre sur fond crème) — l'œil lit « ombre », plus « bord sale ». */
  box-shadow: var(--btn-shadow);
}
.btn-primary:hover { background: var(--clr-ink-dark); color: white; }
.btn-ghost-lnk {
  color: rgba(255,255,255,0.9);
  font-size: 14px;
  font-weight: 700;
  border-bottom: 1px solid rgba(255,255,255,0.45);
  text-decoration: none;
}
/* pt1b (Thomas 20/07) — au survol, le texte devenait GRIS et disparaissait sur la
   photo : la règle globale `a:hover{color:#666}` (l.223) a une spécificité (0,1,1)
   supérieure à `.btn-ghost-lnk` (0,1,0), et ce :hover ne redéclarait que le filet.
   On repose donc explicitement la couleur du texte. */
.btn-ghost-lnk:hover { color: #fff; border-bottom-color: white; }

/* ---- Bandeau de confiance (ex-USP) ---- */
.trustbar { background: #fff; border-bottom: 1px solid #ece5d6; }
.trustbar .container { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding-top: 18px; padding-bottom: 18px; }
.tb-item { display: flex; align-items: center; gap: 13px; flex: 1; }
/* #10 (JL) — encre = couleur du texte (pas or) : l'accent or « cuit » de chaque
   picto ressort → bicolore or+encre, comme Compte/Panier. Avant : color:var(--clr-or)
   peignait aussi l'encre (currentColor) en or → picto entièrement doré. */
.tb-ico { color: var(--ink); display: inline-flex; flex: 0 0 auto; }
.tb-ico svg { width: 26px; height: 26px; }
.tb-txt { font-size: 13px; font-weight: 600; color: #5a5145; line-height: 1.3; }
.tb-txt b { display: block; font-family: var(--ff-title); font-weight: 700; color: var(--clr-text-dark); font-size: 13.5px; }
.tb-txt a { color: inherit; }
.tb-sep { width: 1px; align-self: stretch; background: #ece5d6; flex: 0 0 auto; }

/* ---- Wine card ---- */
.wine-card {
  position: relative;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-m);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: white;
  transition: box-shadow 0.25s, transform 0.25s, border-color 0.25s, background-color 0.25s;
}
/* Survol carte — deux mecanismes pilotes par le back-office (body.cc-cardhover-*,
   param `catalogue_card_hover`, cf. cc_catalogue_card_hover) :
   - B+ (defaut) : fond creme dore + lisere marque, SANS lift ni ombre ni zoom
                   (palette encre/or, valide comparateur 2026-06-20) ;
   - lift (C)    : ancien lift + ombre portee + leger zoom de la photo. */
@media (hover: hover) { .cc-cardhover-bplus .wine-card:hover { background: #F8F4EA; border-color: #D8BE8A; } }   /* pt13d — cf. pt11-survol-tactile */
@media (hover: hover) { .cc-cardhover-lift  .wine-card:hover { box-shadow: 0 14px 34px rgba(36,26,18,0.14); transform: translateY(-4px); border-color: #d8cfbb; } }   /* pt13d — cf. pt11-survol-tactile */
/* Refonte v2 : filet de couleur en tête de carte = code couleur du type de vin. */
.wine-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--wine-accent, var(--clr-or-text));
  z-index: 3;
}
/* Les actions panier dans les wine-cards de la homepage sont toujours visibles
   (contrairement aux cc-wine-card du catalogue qui révèlent les actions au hover). */
.wine-card .cc-wine-card__actions {
  position: static;
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
.wine-img {
  /* La zone photo GRANDIT pour absorber la hauteur excédentaire des cartes peu
     remplies (grille à hauteur égale) : plus de gros « trou » au-dessus du prix,
     et la bouteille respire davantage (mise en valeur). Le corps de carte, lui,
     ne grandit pas (.wine-body { flex: 0 0 auto }). */
  flex: 1 0 290px;
  min-height: 290px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding-bottom: 6px;
  /* Spotlight crème DOUX, sans blanc pur : combiné à mix-blend-mode:multiply sur
     la photo (JPEG à fond blanc), le fond du cliché se fond dans la crème → plus
     de « rectangle blanc ». Un cœur blanc (ancien réglage) rendait justement ce
     rectangle visible. */
  background: radial-gradient(78% 72% at 50% 40%, var(--c-bg-soft) 0%, var(--c-bg-soft) 76%, var(--c-bg-soft) 100%);
}
/* Photo en multiply : le fond blanc du cliché se fond dans la zone blanche de la
   carte (même technique que les cartes catalogue .cc-wine-card__product), ce qui
   supprime le rectangle blanc qui « flottait » sur l'ancien aplat coloré. */
.wine-img a { display: flex; align-items: flex-end; justify-content: center; height: 100%; }
/* PAS de drop-shadow : sur un JPEG OPAQUE (pas d'alpha), drop-shadow projette
   l'ombre du RECTANGLE de la photo → c'est ce « contour rectangulaire » disgracieux.
   L'ancrage de la bouteille est assuré par l'ellipse de sol .wine-img::after. */
.wine-img img { max-height: 262px; max-width: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .35s ease; }
@media (hover: hover) { .cc-cardhover-lift .wine-card:hover .wine-img img { transform: translateY(-2px) scale(1.015); } }   /* pt13d — cf. pt11-survol-tactile */
/* Ombre douce au pied de la bouteille pour l'ancrer dans la zone (réglage d'origine). */
.wine-img::after {
  content: "";
  position: absolute;
  left: 30%;
  right: 8%;
  bottom: 8px;
  height: 20px;
  border-radius: 50%;
  /* Dégradé décentré vers la gauche-bas (pied de bouteille) puis estompé vers
     la droite → l'ombre « part » en diagonale vers le bas-droite. */
  background: radial-gradient(ellipse 60% 100% at 30% 50%, rgba(73,54,32,.20), rgba(73,54,32,0) 72%);
  transform: rotate(-7deg);
  transform-origin: left center;
  pointer-events: none;
}
.wine-badges { position: absolute; top: 8px; left: 8px; display: flex; flex-direction: column; gap: 4px; z-index: 1; }
/* Accent couleur par type de vin : porté par .wc-* sur .wine-card, hérité par le
   filet sous la photo (.wine-img) et l'appellation (.wine-appel). La photo reste
   sur fond blanc ; seul le « chrome » de la carte porte la couleur. Teintes
   choisies pour passer le contraste AA sur blanc (texte de l'appellation). */
.wc-rouge       { --wine-accent: #99042f; }
.wc-blanc       { --wine-accent: #8a6a00; }
.wc-liquoreux   { --wine-accent: #92640a; }
.wc-rose        { --wine-accent: #b03a5b; }
.wc-other       { --wine-accent: #6b5d49; }
.wine-color-emoji { font-size: 60px; }
.badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border: 1px solid;
}
/* Option A — pilule bordeaux (défaut) */
.badge-style-a .b-new   { background: var(--clr-bg-alt); color: var(--clr-or-text); border-color: rgba(184,138,62,.3); }
.badge-style-a .b-stock { background: var(--clr-ink); color: #fff; border-color: var(--clr-ink); }
.badge-style-a .b-coeur { background: #f5ede0; color: #7b4a12; border-color: rgba(180,120,40,.3); }
/* Option B — ruban diagonal coin haut gauche */
.ribbon-wrap { position: absolute; top: 0; left: 0; width: 82px; height: 82px; overflow: hidden; z-index: 2; pointer-events: none; }
.ribbon { position: absolute; top: 17px; left: -24px; width: 112px; padding: 4px 0; text-align: center; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; transform: rotate(-45deg); white-space: nowrap; }
.r-new   { background: var(--clr-bg-alt); color: var(--clr-or-text); border-top: 1px solid rgba(184,138,62,.25); border-bottom: 1px solid rgba(184,138,62,.25); }
.r-stock { background: var(--clr-ink); color: #fff; }
.r-coeur { background: #f0e4cc; color: #7b4a12; border-top: 1px solid rgba(180,120,40,.3); border-bottom: 1px solid rgba(180,120,40,.3); }
/* Option C — étiquette accent latéral */
.wine-badges.badge-style-c { left: 0; }
.badge-style-c .badge { background: rgba(255,255,255,.88); border: none; border-radius: 0 var(--radius-s) var(--radius-s) 0; padding: 4px 10px 4px 8px; font-size: 9.5px; letter-spacing: .8px; gap: 7px; }
.badge-style-c .badge::before { content: ''; display: block; width: 3px; height: 14px; border-radius: var(--radius-s); flex-shrink: 0; }
.badge-style-c .b-new::before   { background: var(--clr-or); }
.badge-style-c .b-stock::before { background: var(--clr-or); }
.badge-style-c .b-coeur::before { background: #b07830; }
.badge-style-c .b-new   { color: var(--clr-or-text); }
.badge-style-c .b-stock { color: var(--clr-ink-dark); }
.badge-style-c .b-coeur { color: #7b4a12; }
.wine-body { padding: 9px 15px 11px; flex: 1; display: flex; flex-direction: column; }
.wine-appel   { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--clr-or-text); margin-bottom: 2px; }
.wine-cuvee   { font-family: var(--ff-title); font-size: 14.5px; font-weight: 600; color: var(--clr-text-dark); line-height: 1.25; min-height: 1.15em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wine-prod    { font-size: 12.5px; color: var(--clr-text); line-height: 1.3; }
.wine-year    { font-size: 11.5px; color: #888; margin-bottom: 6px; }
/* Chips (Bio, grand format) — comblent une partie du vide sous l'identité du vin.
   N'apparaissent que si la donnée existe ; sinon la rangée n'est pas rendue. */
.wine-meta    { display: flex; flex-wrap: wrap; gap: 6px; margin: 1px 0 0; }
.wine-chip    { display: inline-flex; align-items: center; gap: 4px; font: 700 11px/1 var(--ff-body, Montserrat), Arial, sans-serif; padding: 4px 9px; border-radius: 999px; background: #f5f1ea; color: #6b5d49; }
.wine-chip--bio { color: #477455; background: #eef4ec; }
/* Le bloc prix reste ancré en bas (prix alignés d'une carte à l'autre) ; le filet
   au-dessus transforme l'espace résiduel en « pied de carte » assumé plutôt qu'en
   trou. */
.wine-price-block { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--c-line); }
.wine-price-lbl { font-size: 11px; color: #777; font-style: italic; }
.wine-price   { font-family: var(--ff-title); font-size: 22px; font-weight: 700; color: var(--clr-text-dark); }
.wine-stock-warn { font-size: 11.5px; font-weight: 700; color: var(--c-danger); display: flex; align-items: center; gap: 4px; margin-top: 4px; }
.btn-cart {
  width: 100%;
  box-sizing: border-box;
  line-height: 1;
  min-height: var(--btn-min-h);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  background: var(--clr-ink);
  color: white;
  border: none;
  border-radius: 0 0 var(--radius-m) var(--radius-m);
  font-size: var(--btn-font);
  font-weight: var(--btn-weight);
  letter-spacing: var(--btn-letter);
  box-shadow: var(--btn-shadow);
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.18s;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.btn-cart:hover { background: var(--clr-ink-dark); color: white; }

/* ================================================================
   WINE-CARD v2 (refonte « Coups de cœur v2 ») — homepage uniquement.
   Markup : inc/templates/v4/wine-card.inc.php. Réglage du pied de carte
   (épurée / stepper) : cc_home_card_action_style() → home_card_action_style.
   ================================================================ */

/* Sceau millésime (haut gauche de la zone image). */
.vintage-stamp {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  width: 54px; height: 54px; border-radius: 50%;
  background: #fffdf8; border: 1.5px solid var(--clr-or);
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1;
}
.vintage-stamp .v-year { font-family: var(--ff-title); font-weight: 700; font-size: 20px; color: var(--clr-or-text); }

/* Badge Bio (haut droit), discret. */
.img-badge {
  position: absolute; top: 16px; right: 14px; z-index: 2;
  display: inline-flex; align-items: center; gap: 4px;
  background: #eef5ea; color: #3a7d34; border: 1px solid #bcd9b3;
  font-size: 11px; font-weight: 700; letter-spacing: .3px;
  padding: 3px 10px; border-radius: 20px;
}

/* Corps de carte v2. */
/* flex: 0 0 auto → le corps garde sa hauteur naturelle ; c'est .wine-img qui
   absorbe l'excédent. Ainsi le prix reste collé sous l'identité du vin (plus de
   trou) et le bouton sous le prix, sur toutes les cartes. */
.wine-body { padding: 14px 16px 12px; flex: 0 0 auto; display: flex; flex-direction: column; }
.type-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  color: var(--clr-or-text); margin-bottom: 7px; align-self: flex-start;
}
.type-pill .dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--wine-accent, var(--clr-or-text));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wine-accent, var(--clr-or-text)) 18%, transparent);
}
.wine-appel { font-family: var(--ff-title); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px; color: var(--clr-or-text); margin-bottom: 4px; }
/* min-height réserve une ligne même quand la cuvée est vide (fréquent : ~1 vin
   sur 2 n'a pas de cuvée saisie) → toutes les cartes ont la même hauteur de
   contenu, donc plus de gros vide au-dessus du prix sur ces cartes (le bouton
   ne « flotte » plus). */
.wine-cuvee { font-family: var(--ff-title); font-size: 16px; font-weight: 600; color: var(--clr-text-dark); line-height: 1.2; margin-bottom: 3px; white-space: normal; min-height: 1.2em; overflow: visible; }
.wine-prod  { font-size: 13px; color: var(--clr-text); line-height: 1.3; }

/* Zone prix collée en bas → prix alignés d'une carte à l'autre. */
/* min-height + align-items:flex-end : la rangée prix a la même hauteur qu'il y
   ait un sceau « Prix domaine » (rangée +16px) ou non, et le prix reste collé en
   bas (près du bouton). Sans ça, les cartes sans sceau avaient un vide plus grand
   au-dessus du prix → bouton qui paraissait mal placé (ex. carte Saint Préfert). */
.price-row { margin-top: auto; padding-top: 14px; min-height: 54px; display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.wine-price { font-family: var(--ff-title); font-weight: 700; font-size: 24px; color: var(--clr-text-dark); line-height: 1; }
/* #11 — prix barré aligné sur le gris sobre de .wc-price-old (était rose #a08). */
.wine-price .prix_normal { font-size: 14px; font-weight: 600; color: #999; text-decoration: line-through; opacity: .65; margin-right: 2px; }
/* Sceau « Prix domaine » accolé au prix. */
.seal-domaine {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  color: #6e5410; background: #fbf3da; border: 1px solid #e3c873;
  padding: 4px 9px; border-radius: var(--radius-s); white-space: nowrap;
}
.seal-domaine svg { width: 11px; height: 11px; }
/* Ligne stock : affichée seulement si stock faible. */
.stock-line { min-height: 22px; margin-top: 6px; font-size: 12px; font-weight: 700; color: var(--c-danger); display: flex; align-items: center; gap: 5px; }
/* La ligne stock conserve sa hauteur réservée (~22px) MÊME sans alerte
   (contenu &nbsp; → invisible). Ainsi le corps de carte a la même hauteur
   sur toutes les cartes → la zone photo élastique (.wine-img) grandit de
   façon identique → les bouteilles s'arrêtent toutes à la même ligne, et
   les pieds de carte restent alignés. (Avant : la ligne s'écrasait à 0,
   ce qui décalait la photo des cartes sans alerte.) */
.wine-card .stock-line[aria-hidden="true"] { visibility: hidden; }

/* ---- Pied de carte (footer). Le <form> porte .card-foot + .cc-wine-card__actions. ---- */
.wine-card .card-foot { display: block; padding: 0 16px 16px; box-sizing: border-box; }
/* <select> de quantité masqué : source de vérité pour l'AJAX, piloté par le stepper. */
.wine-card .card-foot .cc-wine-card__qty { display: none; }

/* Bouton « Ajouter au panier » — style outline (variante épurée + base stepper). */
.wine-card .card-foot .cc-wine-card__cart-button {
  box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 0; grid-template-columns: none;
  padding: 12px 14px; border-radius: var(--radius-s);
  background: transparent; color: var(--clr-or-text);
  border: 1.6px solid var(--clr-or);
  font-family: var(--ff-title); font-size: 13.5px; font-weight: 600; letter-spacing: .3px; text-transform: none;
  transition: background .2s, color .2s, box-shadow .2s;
  box-shadow: none; /* variante outline transparente : l'ombre de contact du bouton plein n'a pas de sens ici */
}
.wine-card .card-foot .cc-wine-card__cart-button:hover,
.wine-card .card-foot .cc-wine-card__cart-button:focus-visible {
  background: var(--clr-ink); color: #fff; box-shadow: 0 6px 16px rgba(184,138,62,.28);
}
.wine-card .card-foot .cc-wine-card__cart-button:active { transform: translateY(1px); }
.wine-card .card-foot .cc-wine-card__cart-icon { display: inline-flex; width: auto; height: auto; background: transparent; place-items: center; }
.wine-card .card-foot .cc-wine-card__cart-icon img { width: 17px; height: 17px; }
/* Icône bordeaux par défaut → blanche quand le fond devient plein (hover / succès). */
.wine-card .card-foot .cc-wine-card__cart-button:hover .cc-wine-card__cart-icon img,
.wine-card .card-foot .cc-wine-card__cart-button:focus-visible .cc-wine-card__cart-icon img,
.wine-card .card-foot .cc-wine-card__cart-button--success .cc-wine-card__cart-icon img { filter: brightness(0) invert(1); }
.wine-card .card-foot .cc-wine-card__cart-button span:last-child { padding: 0; white-space: nowrap; }
/* États « Épuisé » / « Maximum atteint ». */
.wine-card .card-foot .cc-wine-card__cart-button--disabled {
  background: #f3eee6; color: #9a9a9a; border-color: #e0d9cb; cursor: not-allowed; box-shadow: none;
}

/* ---- Variante B : stepper −/+ + bouton compact ---- */
.wine-card .card-foot.foot-stepper { display: flex; gap: 10px; align-items: stretch; }
.wine-card .card-foot.foot-stepper .cc-wine-card__cart-button { flex: 1; padding: 12px 8px; }
.wine-card .card-foot.foot-stepper .cc-wine-card__cart-button span:last-child { font-size: 12.5px; }
/* L'icône est masquée en mode stepper pour laisser la place au sélecteur. */
.wine-card .card-foot.foot-stepper .cc-wine-card__cart-icon { display: none; }
.qty-stepper {
  display: inline-flex; align-items: center; flex-shrink: 0;
  border: 1.6px solid var(--clr-border); border-radius: var(--radius-s); overflow: hidden;
}
.qty-stepper button {
  width: 32px; border: none; background: #faf7ef; cursor: pointer;
  font-family: var(--ff-title); font-size: 18px; font-weight: 600; color: var(--clr-or-text);
  line-height: 1; transition: background .15s;
}
@media (hover: hover) { .qty-stepper button:hover { background: #f1ead8; } }   /* pt13d — cf. pt11-survol-tactile */
.qty-stepper .qty-val { width: 30px; text-align: center; font-family: var(--ff-title); font-weight: 600; font-size: 15px; color: var(--clr-text-dark); user-select: none; }

/* ---- Section produits ---- */
.section-products { padding: 52px 0; }
.section-products.bg-alt { background: var(--clr-bg-light); }
.section-header { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid var(--clr-or); margin-bottom: 28px; padding-bottom: 12px; }
.section-title   { font-family: var(--ff-title); font-size: 22px; font-weight: 700; color: var(--clr-text-dark); }
.section-see-all { font-size: 13px; font-weight: 700; color: var(--clr-or-text); text-decoration: none; }
.section-see-all:hover { text-decoration: underline; }
.section-title-wrap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* Sticker calligraphié (Whisper) — Coups de cœur, Nouveautés */
.sticker-script { display: inline-flex; align-items: center; gap: 6px; font-family: var(--ff-script); font-size: 22px; color: var(--clr-or-text); line-height: 1; flex-shrink: 0; position: relative; padding: 0 4px 2px; }
.sticker-script::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: var(--clr-or); opacity: 0.4; }
.sticker-script .sticker-deco { width: 16px; height: 1px; background: var(--clr-or); display: inline-block; vertical-align: middle; opacity: 0.5; margin-bottom: 3px; }
/* Sticker cachet octogonal — Nos vignerons */
.sticker-stamp { display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--clr-or-text); border: 2px solid var(--clr-or); font-family: var(--ff-body); font-size: 9px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; padding: 5px 10px; clip-path: polygon(6px 0%, calc(100% - 6px) 0%, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0% calc(100% - 6px), 0% 6px); line-height: 1; flex-shrink: 0; }
.wines-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

/* ---- Carrousel vignerons (cartes-photo) ---- */
.vignerons-section { padding: 44px 0; border-top: 1px solid var(--clr-bg-grey); border-bottom: 1px solid var(--clr-bg-grey); overflow: hidden; }
.vg-outer { position: relative; max-width: var(--max-width); margin: auto; padding: 0 24px; }
.vg-track-wrap { overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.vg-track-wrap::-webkit-scrollbar { display: none; }
.vg-track { display: flex; gap: 20px; width: max-content; padding: 6px 2px 12px; }
.vg { position: relative; flex: 0 0 270px; height: 330px; border-radius: var(--radius-m); overflow: hidden; box-shadow: 0 5px 18px rgba(0,0,0,0.14); text-decoration: none; display: block; scroll-snap-align: start; }
.vg-img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 0.4s; }
@media (hover: hover) { .vg:hover .vg-img { transform: scale(1.05); } }   /* pt13d — cf. pt11-survol-tactile */
.vg-ov { position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,4,6,0.92) 0%, rgba(15,4,6,0.35) 50%, rgba(15,4,6,0.05) 80%); }
.vg-txt { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 18px 18px; z-index: 3; color: #fff; display: block; }
.vg-name { display: block; font-family: var(--ff-title); font-weight: 800; font-size: 19px; line-height: 1.12; color: #fff; }
.vg-app { display: block; font-size: 11px; color: var(--c-star); text-transform: uppercase; letter-spacing: 0.8px; margin-top: 5px; font-weight: 600; }
.vg-quote { display: block; font-size: 12.5px; font-style: italic; color: #f0e6d6; margin-top: 8px; line-height: 1.4; }
.vg-cuv { display: inline-flex; align-items: center; font-size: 11.5px; color: #fff; margin-top: 9px; background: rgba(255,255,255,0.14); padding: 3px 9px; border-radius: 20px; }
.vg-bio { position: absolute; top: 12px; left: 12px; background: rgba(255,255,255,0.95); padding: 4px; border-radius: var(--radius-s); z-index: 4; line-height: 0; box-shadow: 0 2px 6px rgba(0,0,0,0.22); }
.vg-bio img { display: block; height: 34px; width: auto; border-radius: var(--radius-s); }
.vg-arrow { width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,0.95); box-shadow: 0 2px 10px rgba(0,0,0,0.18); border: none; cursor: pointer; font-size: 20px; color: var(--clr-or-text); display: flex; align-items: center; justify-content: center; z-index: 5; }
.vg-arrow.vg-prev, .vg-arrow.vg-next { position: absolute; top: 50%; transform: translateY(-50%); opacity: 0; transition: opacity 0.25s; }
.vg-arrow.vg-prev { left: 10px; }
.vg-arrow.vg-next { right: 10px; }
.vignerons-section:hover .vg-arrow { opacity: 1; }
/* Pt 11 (retours 16/07) : flèche inactive masquée selon la position de défilement
   (prev au tout début, next en fin). Pilotée par le JS (classe .is-edge, index.inc.php).
   Spécificité (0,3,0) pour l'emporter sur les règles opacity:1 (hover / tactile / mobile).
   Sur desktop les flèches sont en position:absolute → masquer n'affecte pas la mise en page. */
.vignerons-section .vg-arrow.is-edge { opacity: 0; pointer-events: none; }
.vg-ctrl { } /* desktop : conteneur transparent (flèches en absolu, dots cachés) */
.vg-dots { display: none; }
.vg-dot { width: 7px; height: 7px; border-radius: 50%; background: #d8cdb6; padding: 0; }
.vg-dot.on { background: var(--clr-or); width: 18px; border-radius: 4px; }
/* Carte de fin « Encore N domaines à découvrir » — vignes en voile clair : la photo
   continue (réutilise .vg-img) mais s'éclaircit, la carte s'efface dans la lumière.
   Discrète, pour se ressentir comme un enchaînement (≠ un bouton qui claque). */
.vg-more-veil { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(252,249,244,0.46) 0%, rgba(252,249,244,0.74) 55%, rgba(252,249,244,0.9) 100%); }
.vg-more-in { position: absolute; inset: 0; z-index: 3; box-sizing: border-box; padding: 26px 22px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--clr-or-text); }
.vg-more-k { font-size: 11px; text-transform: uppercase; letter-spacing: 2.5px; font-weight: 700; color: #9a7320; }
.vg-more-num { font-family: var(--ff-title); font-weight: 700; font-size: 44px; line-height: 1; margin: 5px 0 3px; color: var(--clr-or-text); }
.vg-more-lbl { font-size: 12.5px; color: #5c4330; }
.vg-more-circ { margin-top: 18px; width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid rgba(184,138,62,0.75); display: flex; align-items: center; justify-content: center; color: var(--clr-or); transition: transform 0.2s, background 0.2s, color 0.2s; }
@media (hover: hover) { .vg:hover .vg-more-circ { transform: translateX(3px); background: var(--clr-ink); color: #fff; } }   /* pt13d — cf. pt11-survol-tactile */
/* Tactile : pas de :hover -> flèches visibles (desktop tactile). */
@media (hover: none) { .vg-arrow.vg-prev, .vg-arrow.vg-next { opacity: 1; } }
/* Mobile : peek + flèches centrées dessous + dots. */
@media (max-width: 768px) {
  .vg-outer { padding: 0; }
  .vg-track { gap: 14px; padding-left: 16px; padding-right: 16px; }
  .vg { flex-basis: 78vw; max-width: 300px; height: 300px; }
  .vg-arrow.vg-prev, .vg-arrow.vg-next { position: static; transform: none; opacity: 1; width: 44px; height: 44px; }
  .vg-ctrl { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; }
  .vg-dots { display: flex; gap: 6px; }
}

/* ---- Guides ---- */
.section-guides { padding: 56px 0; }
.guides-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 32px; }
.guide-card {
  position: relative;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-m);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s, transform 0.2s;
}
@media (hover: hover) { .guide-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.10); transform: translateY(-3px); } }   /* pt13d — cf. pt11-survol-tactile */
/* Carte guide entièrement cliquable : le lien « Lire le guide » est étiré sur
   toute la carte via ::after (un seul lien réel, sémantique conservée). */
.guide-card .guide-link::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.guide-card:hover { cursor: pointer; }
.guide-img { height: 160px; background-size: cover; background-position: center; background-color: var(--clr-bg-grey); }
.guide-body { padding: 20px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.guide-tag  { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; padding: 3px 8px; border-radius: 20px; width: fit-content; background: #ece7e1; color: #5a5048; }
/* Rubriques éditoriales réelles du blog (cf. cc_home_guides_rubrique_map). */
.guide-tag-guides      { background: color-mix(in srgb, var(--clr-or) 10%, #fff); color: var(--clr-or-text); }
.guide-tag-offrir      { background: #fdf1d6; color: #7b580a; }
.guide-tag-degustation { background: #ece1f0; color: #5a2a6e; }
.guide-tag-carnet      { background: #e8eed6; color: #4a5a18; }
.guide-tag-arrivages   { background: #d5f2d5; color: #186018; }
.guide-tag-autre       { background: #ece7e1; color: #5a5048; }
.guide-title   { font-family: var(--ff-title); font-size: 15px; font-weight: 700; color: var(--clr-text-dark); line-height: 1.35; }
.guide-excerpt { font-size: 13px; color: var(--clr-text); line-height: 1.55; margin: 0; }
.guide-link    { font-size: 13px; font-weight: 700; color: var(--clr-or-text); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; margin-top: auto; }

/* Survol de la carte guide — arbitrage Thomas 26/07, variante H1 (alignée sur
   le Carnet, cf. carnet.css « .card:hover h4 »). La carte entière étant la
   seule cible (::after{inset:0} plus haut), c'est le TITRE qui répond — l'œil
   le vise — et « Lire le guide » reste un accent d'action stable, PAS un lien
   à souligner : le souligner annoncerait une seconde cible qui n'existe pas.
   L'ancien `.guide-link:hover{color:--clr-ink-dark}` est supprimé : il
   éteignait l'accent doré au moment précis où l'on visait la carte.
   :focus-within double chaque état — au clavier, la carte ne répondait pas
   du tout (même patron que .cc-wine-card:focus-within).

   🧨 Le supprimer ne suffisait PAS (recette du 27/07) : `.guide-link` pèse (0,1,0)
   et la règle globale `a:hover{color:#666}` (site.css:223) pèse (0,1,1). Le lien
   virait donc au GRIS au survol — l'accent s'éteignait quand même, et le focus
   clavier (que le sélecteur global ne vise pas) restait or : les deux états
   divergeaient. Même piège que .btn-ghost-lnk (cf. commentaire pt1b plus haut).
   On repose donc l'or explicitement, à (0,2,0), pour les deux états. */
.guide-title, .guide-link { transition: color 0.2s; }
/* pt13d — SCINDÉ : :focus-within (clavier) reste hors media, le survol y entre. */
.guide-card:focus-within .guide-title { color: var(--c-accent-text); }
.guide-card:focus-within .guide-link { color: var(--c-accent-text); }
@media (hover: hover) {
	.guide-card:hover .guide-title { color: var(--c-accent-text); }
	.guide-card:hover .guide-link { color: var(--c-accent-text); }
}
.guide-card:focus-within { box-shadow: 0 6px 20px rgba(0,0,0,0.10); transform: translateY(-3px); }

/* ---- Newsletter ---- */
.newsletter {
  background: var(--clr-bg-light);
  border-top: 1px solid var(--c-border-struct);
  border-bottom: 1px solid var(--c-border-struct);
  padding: 36px 0;
}
.newsletter .container { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.nl-text h3 { font-family: var(--ff-title); font-size: 17px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 4px; }
.nl-text p  { font-size: 13px; color: var(--clr-text); margin: 0; }
/* #5 — position:relative pour ancrer le message d'inscription en absolu (sinon
   il réserve ~27px sous le form et déséquilibre le centrage vertical du bloc). */
.nl-form { position: relative; }
.nl-form form { display: flex; gap: 10px; align-items: center; }
.nl-input {
  padding: 10px 16px;
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-s);
  min-width: 260px;
  font-size: 14px;
}
.nl-input:focus { border-color: var(--clr-or); outline: none; }
/* #1 — message inline d'inscription newsletter (AJAX). Vide par défaut.
   #5 — sorti du flux (absolu) pour ne pas gonfler .nl-form et fausser le
   centrage vertical desktop ; remis en flux sur mobile (bloc empilé). */
.nl-msg { position: absolute; top: 100%; left: 0; font-size: 13px; margin-top: 8px;
  display: inline-flex; align-items: flex-start; gap: 6px; font-weight: 600; }
.nl-msg:empty { display: none; }
/* Retour inline (texte + icône). Doctrine or/encre sur fond crème du bloc newsletter :
   succès = OR-texte AA + coche ; erreur (réseau/champ vide) = rouge AA + cercle-exclam.
   Icône = data-uri couleur bakée (limite technique, hex aligné sur le token du texte). */
.nl-msg::before { content: ""; flex: 0 0 auto; width: 15px; height: 15px; margin-top: 1px;
  background: center/contain no-repeat; display: none; }
.nl-msg.is-ok    { color: var(--clr-or-text); }
.nl-msg.is-error { color: var(--fb-no-tx); }
.nl-msg.is-ok::before    { display: block; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a6224' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E"); }
.nl-msg.is-error::before { display: block; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A33327' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.6v5.2'/%3E%3Cpath d='M12 16.4v.05'/%3E%3C/svg%3E"); }
.nl-manage{margin-top:10px;font-size:12px;line-height:1.4}
.nl-manage a{color:var(--or-text);text-decoration:none;border-bottom:1px solid transparent}
.nl-manage a:hover,.nl-manage a:focus-visible{border-bottom-color:var(--or-text)}
.btn-nl {
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box; line-height: 1;
  background: var(--clr-ink);
  color: white;
  min-height: var(--btn-min-h);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border-radius: var(--radius-s);
  font-size: var(--btn-font);
  font-weight: var(--btn-weight);
  letter-spacing: var(--btn-letter);
  border: none;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.18s;
  white-space: nowrap;
  box-shadow: var(--btn-shadow); /* ombre de contact système */
}
.btn-nl:hover { background: var(--clr-ink-dark); }

/* ---- Footer 4 colonnes ---- */
/* Bande sombre pleine largeur du footer. Appliquée sur .footer-dark (et non
   sur <footer>) car la newsletter vit désormais aussi dans <footer> mais doit
   garder son fond crème. Plus de gate body.homepage : le footer unifié rend
   sur TOUTES les pages. */
.footer-dark {
  background: #2a2a2a;
  color: rgba(255,255,255,0.7);
  padding: 44px 0 20px;
}
.footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px; margin-bottom: 36px; }
/* pt6a (retours 30/07) — CES RÈGLES SONT BORNÉES À .footer-dark, ce sont des
   colonnes de FOOTER. Nues, elles portaient bien au-delà : le blog charge site.css
   AVANT carnet.css, et le hero « À la une » du Carnet a lui aussi un `<div class="fc">`
   (hub-magazine.php:69). `.fc a` (0,1,1) écrase donc `.read-cta` (0,1,0) et
   `.fc a:hover` (0,2,1) écrase `.read-cta:hover` (0,2,0) → au tap, fond blanc ET
   texte blanc, le CTA disparaissait (mesuré : color = bg = rgb(255,255,255)).
   Dégât collatéral mesuré au passage : le titre du hero rendait à 13px (font-size
   de `.fc a`) au lieu des 28px de `.featured h2`.
   Périmètre vérifié : les SEULS `class="fc"` du dépôt sont les 4 colonnes de
   inc/templates/v4/footer.inc.php (toutes dans .footer-dark) et ce hero de blog. */
.footer-dark .fc h4 {
  font-family: var(--ff-title);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: white;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  padding-bottom: 10px;
  margin: 0 0 14px;
}
.footer-dark .fc a, .footer-dark .fc p  { font-size: 13px; color: rgba(255,255,255,0.62); display: block; margin-bottom: 6px; line-height: 1.5; text-decoration: none; }
.footer-dark .fc a:hover   { color: white; }
.footer-dark .fc p         { margin: 0 0 6px; }
.footer-social { display: flex; gap: 14px; font-size: 22px; margin-top: 6px; }
.footer-social a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 16px;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  flex-wrap: wrap;
  gap: 8px;
}
/* Bande légale du bas — lien « Gérer mes cookies ». Sans cette règle le <a>
   tomberait en bleu souligné par défaut sur le fond sombre. */
.footer-bottom a { color: rgba(255,255,255,0.7); text-decoration: underline; text-underline-offset: 2px; }
.footer-bottom a:hover { color: #fff; }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .wines-grid  { grid-template-columns: repeat(2, 1fr); }
  .guides-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}

@media (max-width: 768px) {
  /* Hero */
  /* pt1b/accueil — reflow "image paysage pleine puis texte" (v1+ crème).
     L'image passe EN FLUX (bannière 1.5:1 = ratio natif → 0 rognage), le texte
     s'empile dessous sur crème. Plus de texte sur l'image → voile masqué. */
  .hero {
    height: auto; aspect-ratio: auto; min-height: 0; max-height: none;
    display: flex; flex-direction: column; align-items: stretch;
    padding-bottom: 0;
    /* padding-top de réservation header conservé (défini @1130px, :3796) */
  }
  .hero-slides { position: relative; inset: auto; width: 100%; aspect-ratio: 1.5 / 1; }
  .hero::after { display: none; }
  .hero > .hero-container { display: block; padding: 0; max-width: 100%; }
  .hero-content {
    position: static; max-width: 100%; display: block;
    background: var(--c-page);            /* crème #FAF8F3 (token) */
    padding: 26px 24px 30px;
  }
  .hero-kicker { color: var(--c-accent-text); }        /* or-texte AA */
  .hero-content h1 { font-size: 30px; color: var(--c-ink); text-shadow: none; position: relative; padding-bottom: 14px; }
  /* pt1b/accueil (recette Thomas) — filet or sous le H1 mobile : accent système
     « filet or », structure le bloc crème. Couleur + rayon en tokens (zéro dur). */
  .hero-content h1::after { content: ''; position: absolute; left: 0; bottom: 0; width: 56px; height: 3px; background: var(--c-accent); border-radius: var(--radius-s); }
  .hero-sub { color: var(--c-text); }
  .btn-ghost-lnk { color: var(--c-accent-text); border-bottom-color: var(--c-accent-text); }
  .hero-ctas { flex-direction: column; align-items: flex-start; gap: 14px; }
  .hero-ctrl { bottom: 8px; }              /* dots calés en bas de la bannière */

  /* Bandeau de confiance — 2x2 en mobile */
  .trustbar .container { flex-wrap: wrap; }
  .tb-sep { display: none; }
  .tb-item { flex: 0 0 46%; }

  /* Wines */
  .wines-grid { grid-template-columns: repeat(2, 1fr); }

  /* Guides */
  .guides-grid { grid-template-columns: 1fr; }

  /* Newsletter */
  .newsletter .container { flex-direction: column; text-align: center; }
  .nl-input { width: 100%; min-width: 0; box-sizing: border-box; }
  .nl-form form { flex-direction: column; width: 100%; }
  /* pt5 (retours 30/07) — LE CHAMP GRANDISSAIT À L'APPARITION DU MESSAGE.
     Mesuré à 390px : 204px au repos → 342px dès que #cc-nl-msg n'est plus vide
     (+138px), hauteur INCHANGÉE (40px), et la bordure or n'est qu'un :focus qui
     ne touche à aucune dimension. Cause : `.newsletter .container` passe en
     `flex-direction: column` ci-dessus mais garde le `align-items: center` de sa
     règle de base — en colonne, l'axe transversal est HORIZONTAL, donc .nl-form
     est en shrink-to-fit et sa largeur est dictée par son contenu INTRINSÈQUE.
     Message masqué (`.nl-msg:empty{display:none}`) → c'est la largeur par défaut
     de l'<input> (attribut size implicite) qui gagne ; message affiché → c'est
     le texte long de la confirmation. Le `width:100%` du champ suivait donc le
     message. On donne à .nl-form une largeur DÉFINIE : plus rien d'intrinsèque,
     le gabarit ne bouge plus, et le `width:100%` déjà déclaré sur le champ et
     sur le form prend enfin l'effet voulu. Desktop non concerné (le message y
     est en position:absolute, hors flux — mesuré 0px de delta). */
  .nl-form { width: 100%; }
  /* #5 — bloc empilé : le message revient dans le flux (pas d'absolu qui
     chevaucherait le footer sombre). */
  .nl-msg { position: static; margin-top: 8px; }

  /* Footer */
  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }

  /* Top bar */
  .ht-center { display: none; }
  .header-top .container { flex-direction: column; gap: 4px; }
}

@media (max-width: 480px) {
  .wines-grid  { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
}
/* ===== END HOMEPAGE ===== */


/* =============================================================
   CATALOGUE v4 — page boutique pleine largeur, barre de filtres
   en pilules (style eBay), grille plate, "voir plus".
   Réutilise les styles d'options existants (.couleur-item,
   .check-item, .millesime-tag, .prix-range-*, .chip-filtre) :
   ils sont rendus à l'intérieur des menus déroulants .cc-dd.
   ============================================================= */
.cc-cat { font-family: var(--ff-body); color: var(--clr-text); }
.cc-cat *, .cc-cat *::before, .cc-cat *::after { box-sizing: border-box; }
.cc-cat .cc-container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }

/* Bandeau titre + fil d'Ariane */
.cc-cat-title { background: var(--clr-bg-light); border-bottom: 1px solid var(--c-border-struct); padding: 16px 0; line-height: 1.3; }
/* line-height/padding remis à plat : la règle <h1> globale impose un
   line-height:50px + padding 8px (≈46px de vide autour du titre) qui gonflait
   le bandeau d'une grande zone beige inutile. */
.cc-cat-title h1 { font-family: var(--ff-title); font-size: 20px; font-weight: 700; line-height: 1.25; color: var(--clr-text-dark); margin: 0; padding: 0; }
.cc-cat-title p { font-size: 13px; line-height: 1.4; color: var(--clr-text); margin: 3px 0 0; }

/* Description éditoriale (pages appellation : vins_appell.edito). Bloc clampé
   avec dégradé blanc-crème en bas + bouton « Voir plus / Voir moins ». Texte
   d'altitude éditoriale, distinct des sous-titres courts <p>. Seuils :
   - mobile ≤640 : 4 lignes (~88px) — confort de pli avant les premières cartes
   - desktop     : 5 lignes (~110px) — l'écran porte plus de mots par ligne     */
.cc-cat-title .cc-cat-desc-wrap { margin-top: 8px; max-width: 880px; }
.cc-cat-title .cc-cat-desc {
  position: relative;
  font-size: 14px;
  line-height: 1.55;
  color: var(--clr-text);
  overflow: hidden;
  transition: max-height .22s ease;
}
/* Normalisation du WYSIWYG back-office : LibreOffice/Word produisent souvent
   des <p style="margin-bottom: 0cm"> qui collent les paragraphes. On force un
   espacement cohérent et on neutralise les styles inline indésirables (cm,
   couleurs imposées) pour garder l'altitude éditoriale du bandeau. */
.cc-cat-title .cc-cat-desc p { margin: 0 0 9px; padding: 0; }
.cc-cat-title .cc-cat-desc p:last-child { margin-bottom: 0; }
.cc-cat-title .cc-cat-desc p[style] { margin-bottom: 9px !important; }
.cc-cat-title .cc-cat-desc a { color: var(--clr-or-text); text-decoration: underline; }
.cc-cat-title .cc-cat-desc ul,
.cc-cat-title .cc-cat-desc ol { margin: 0 0 9px 20px; padding: 0; }
.cc-cat-title .cc-cat-desc strong,
.cc-cat-title .cc-cat-desc b { color: var(--clr-text-dark); font-weight: 700; }
.cc-cat-title .cc-cat-desc.is-collapsed { max-height: 110px; padding-bottom: 16px; }
.cc-cat-title .cc-cat-desc.is-collapsed::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 38px;
  /* Le bandeau a un fond crème (--clr-bg-light = #F9F5EA) : le dégradé doit
     fondre vers cette couleur, pas vers blanc, pour éviter une barre claire. */
  background: linear-gradient(180deg, rgba(249,245,234,0) 0%, rgba(249,245,234,.88) 55%, var(--clr-bg-light) 100%);
  pointer-events: none;
}
.cc-cat-title .cc-cat-desc.is-expanded { max-height: 9999px; padding-bottom: 0; }
.cc-cat-title .cc-cat-desc-toggle {
  margin-top: 6px;
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: none; padding: 0;
  font-family: var(--ff-body); font-size: 13px; font-weight: 600;
  color: var(--clr-or-text); cursor: pointer;
}
/* #8 (22/06) — le soulignement vit sur le libellé seul, pas sur le conteneur
   inline-flex. Le chevron qui motivait cette séparation a été retiré au pt2 des
   retours 0727 ; la règle est conservée telle quelle (le trait doit rester borné
   au mot, pas s'étendre au padding du bouton). */
.cc-cat-title .cc-cat-desc-toggle__label {
  text-decoration: underline; text-underline-offset: 3px;
}
/* L'attribut HTML `hidden` (UA: display:none, spécificité 0,1,0) est écrasé
   par le `display: inline-flex` ci-dessus (auteur 0,2,1) — du coup le bouton
   servi caché par le serveur restait visible. On force la prise en compte
   de `[hidden]` pour que la décision JS (auto-expansion sans bouton) tienne. */
.cc-cat-title .cc-cat-desc-toggle[hidden] { display: none; }
/* pt9 (retours 28/07) — « lorsque je clique sur voir plus, le voir moins perd le doré ;
   le doré revient si je scroll ». MÊME cause que le pt11 : en tactile, :hover se pose au
   toucher et RESTE. Ce bouton bascule le texte et demeure à l’écran → il garde donc
   l’encre du survol (--clr-ink-dark) au lieu de son or de repos, jusqu’au défilement qui
   purge l’état. Le conditionner au pointeur suffit : plus de survol, plus de rémanence.
   cf. le bloc pt11-survol-tactile en fin de feuille. */
@media (hover: hover) { .cc-cat-title .cc-cat-desc-toggle:hover { color: var(--clr-ink-dark); } }
/* pt2 (retours 0727) — les 2 règles .cc-cat-desc-toggle__chev (glyphe + rotation
   à l'ouverture) sont supprimées avec le chevron lui-même (cf. index.php). */
@media (max-width: 640px) {
  .cc-cat-title .cc-cat-desc { font-size: 13.5px; }
  .cc-cat-title .cc-cat-desc.is-collapsed { max-height: 88px; }
}

/* ===== Fil d'Ariane — composant unique (refonte 2026-06-15) =====
   Source de vérité unique du style. Remplace .cc-cat-breadcrumb, #breadcrumb
   (legacy + fiche vin) et .vgf-breadcrumb. Rendu : <ol class="cc-breadcrumb">. */
.cc-breadcrumb {
	list-style: none;
	margin: 0 0 6px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	font-family: 'Montserrat', sans-serif;
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	line-height: 1.4;
}
.cc-breadcrumb li { display: inline-flex; align-items: center; }
.cc-breadcrumb li + li::before {
	content: "\203A";            /* chevron › */
	color: var(--c-star);              /* or */
	margin: 0 8px;
	font-size: 13px;
	letter-spacing: 0;
}
.cc-breadcrumb a { color: var(--clr-or-text); text-decoration: none; display: inline-flex; align-items: center; }
.cc-breadcrumb a:hover { text-decoration: underline; }
.cc-breadcrumb li[aria-current="page"] { color: #2a2a2a; letter-spacing: .04em; }
.cc-breadcrumb li[aria-current="page"] b { font-weight: 600; }
.cc-breadcrumb svg { width: 14px; height: 14px; flex: 0 0 auto; }

/* Libellé « Accueil » de la racine : présent pour l'a11y + la dédup PHP, masqué visuellement. */
.cc-bc-home-label {
	position: absolute; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Mobile : « retour parent honnête » (option A, retours Thomas #18, 2026-06-22).
   Le fil se réduit à UN seul lien « ‹ Parent » réellement cliquable. On masque tous les
   maillons sauf l'avant-dernier (le parent direct) ; la maison et la page courante sont
   masquées (le logo d'en-tête couvre l'accueil, le H1 dit la page courante). Le chevron
   retour ‹ fait partie du lien ; ellipsis pour qu'un libellé long ne déborde jamais.
   Cas limite « Accueil › Page » (2 maillons) : nth-last-child(2) = la maison → « ‹ 🏠 »
   cliquable vers /. Desktop (> 768px) inchangé. */
@media (max-width: 768px) {
	.cc-breadcrumb li { display: none; }
	.cc-breadcrumb li:nth-last-child(2) { display: inline-flex; max-width: 100%; }
	.cc-breadcrumb li:nth-last-child(2)::before { content: none; }   /* pas de séparateur › devant */
	.cc-breadcrumb li:nth-last-child(2) a {
		display: inline-block;
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		vertical-align: middle;
	}
	.cc-breadcrumb li:nth-last-child(2) a::before {
		content: "\2039";          /* chevron retour ‹ — inclus dans le lien, donc cliquable */
		color: var(--c-star);
		margin-right: 7px;
		font-size: 15px;
	}
}

/* ── #12 Bouton « Retour a mes resultats » (fiche vin, origine catalogue) ──
   Cree par scripts/fiche-retour.js, insere sous .cc-breadcrumb. Desktop : ligne
   sobre sous le fil. Mobile : remplace le chevron-parent du fil (un seul « ‹ »). */
.cc-retour-resultats { margin: 6px 0 2px; }
.cc-retour-resultats__lien {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--clr-text);
  text-decoration: none; padding: 4px 0; min-height: 32px;
}
.cc-retour-resultats__lien:hover { text-decoration: underline; }
.cc-retour-resultats__chev { color: var(--c-star); font-size: 15px; line-height: 1; }

@media (max-width: 768px) {
  .cc-retour-resultats__lien { min-height: 44px; } /* cible tactile */
  /* le retour remplace le chevron-parent : un seul « ‹ » a l'ecran */
  body.cc-retour-actif .cc-breadcrumb { display: none; }
}

/* Ligne de sous-rayons (pages Région) : liens d'appellations sous le fil d'Ariane.
   Discret, éditorial — pas de fond plein, pas de badge. */
.cc-subrayons { background: var(--clr-bg-light); border-bottom: 1px solid var(--c-border-struct); padding: 8px 0; }
/* La rangée porte la mise en forme (et le défilement en mobile) : le conteneur
   .cc-container reste un simple conteneur de largeur, et .cc-subrayons__scroll
   sert d'ancre stable aux indicateurs de défilement (cf. .cc-hscroll plus bas). */
.cc-subrayons__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.cc-subrayons__label { font-size: 12px; font-weight: 600; color: var(--clr-text); margin-right: 2px; }
.cc-subrayons__item { font-size: 13px; color: var(--clr-or-text); text-decoration: none; white-space: nowrap; }
.cc-subrayons__item:hover { text-decoration: underline; }
@media (max-width: 768px) {
  .cc-subrayons__row { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cc-subrayons__item { padding: 2px 0; }
}

/* Barre de filtres collante */
/* Barre épinglée seule (style eBay) : le header défile au-dessus et disparaît,
   la barre se colle en haut du viewport (top calé en JS pour le header mobile fixe). */
.cc-filtres-bar { background:#fff; border-bottom:1px solid var(--clr-border); padding:12px 0; position:sticky; top:0; z-index:500; box-shadow:0 2px 8px rgba(0,0,0,.06); }
/* En mode barre, on neutralise le padding du panneau gauche (16px 12px 32px)
   qui gonflait inutilement la barre épinglée (~48px de vide sous les pilules,
   visible en permanence). La barre ne fait plus que la hauteur de son contenu. */
.cc-filtres-bar #filtres-panel.is-barre { padding:0; }
.cc-filtres-row { display:flex; align-items:center; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:2px; }

/* ══ Affordance de défilement horizontal (.cc-hscroll) ══════════════════════
   Deux rangées débordent sur mobile et partagent ce mécanisme : la rangée de
   pilules de la barre de filtres (.cc-filtres-row) et la ligne d'appellations
   des pages Région (.cc-subrayons__row). Toutes deux portent .cc-hscroll__row,
   dans un conteneur stable .cc-hscroll qui sert d'ancre aux indicateurs.

   Forme pilotée par le back-office (Gestion de la configuration, paramètre
   `filtres_scroll_hint` ; classe posée sur <body> par index.php) :

     cc-filtrescroll-ombres  ombres aux deux bords, du côté où il reste du contenu (défaut)
     cc-filtrescroll-barre   barre de défilement maison sous la rangée, permanente
     cc-filtrescroll-native  barre de défilement du navigateur

   ⚠️ Le mode `native` n'est PAS équivalent aux deux autres : sur mobile (Android
   comme iOS) la barre du navigateur est en overlay, elle n'apparaît que PENDANT
   le glissement et s'efface ensuite → aucun indice à l'arrivée sur la page, au
   moment où il servirait. C'était le comportement historique de la ligne des
   appellations, conservé ici comme option pour pouvoir comparer. */
.cc-hscroll { position:relative; }

/* Couleur de l'indicateur — second réglage BO (filtres_scroll_couleur), libre de
   se combiner avec la forme. Une seule variable sert les deux formes colorables :
   le curseur du rail maison et la barre du navigateur en mode natif. */
body.cc-filtrescolor-or    { --cc-hscroll-thumb: var(--c-accent); }
body.cc-filtrescolor-encre { --cc-hscroll-thumb: var(--clr-ink); }

/* Masquage de la barre native : dans les modes maison uniquement. En mode
   `native` on ne touche NI à ::-webkit-scrollbar NI à scrollbar-width — les
   styliser reconstruirait la barre et la rendrait permanente, donc plus du tout
   « native ». Seule scrollbar-color est posée (ci-dessous) : elle recolore la
   barre du navigateur sans la reconstruire. */
body.cc-filtrescroll-ombres .cc-hscroll__row,
body.cc-filtrescroll-barre  .cc-hscroll__row { scrollbar-width:none; }
body.cc-filtrescroll-ombres .cc-hscroll__row::-webkit-scrollbar,
body.cc-filtrescroll-barre  .cc-hscroll__row::-webkit-scrollbar { display:none; }

/* Mode `native` — la barre du navigateur se dessine au ras du contenu : sur
   mobile elle venait toucher les pilules. On écarte la rangée de sa barre par
   le bas, et seulement quand il y a vraiment débordement (sinon on gonflerait
   la barre collante pour rien).
   ⚠️ scrollbar-color n'est pas implémenté par Safari : sur iPhone la barre garde
   la couleur du système, le réglage de couleur n'y a aucun effet. Le mode
   `barre` (rail maison), lui, est colorable sur tous les navigateurs. */
body.cc-filtrescroll-native .cc-hscroll.has-overflow > .cc-hscroll__row { padding-bottom:9px; }
body.cc-filtrescroll-native .cc-hscroll__row { scrollbar-color: var(--cc-hscroll-thumb) var(--c-line); }

/* Mode `ombres` — la rangée défile à l'intérieur du conteneur stable, dont les
   ombres ::before/::after restent collées aux bords. Elles sont AFFICHÉES par
   les classes .has-more-left / .has-more-right que filtres.js pose selon la
   position de défilement → l'ombre n'apparaît QUE du côté où il reste du
   contenu. On pilote en JS (et non en CSS pur) car l'ex-astuce
   background-attachment:local ne fonctionnait PAS sur Safari iOS (local non
   supporté) : aucune ombre sur iPhone. Cette version marche partout. */
body.cc-filtrescroll-ombres .cc-hscroll::before,
body.cc-filtrescroll-ombres .cc-hscroll::after {
  content:""; position:absolute; top:0; bottom:0; width:26px; pointer-events:none;
  z-index:2; opacity:0; transition:opacity .15s ease;
}
body.cc-filtrescroll-ombres .cc-hscroll::before { left:0;  background:linear-gradient(to right, rgba(0,0,0,.18), rgba(0,0,0,0)); }
body.cc-filtrescroll-ombres .cc-hscroll::after  { right:0; background:linear-gradient(to left,  rgba(0,0,0,.18), rgba(0,0,0,0)); }
body.cc-filtrescroll-ombres .cc-hscroll.has-more-left::before  { opacity:1; }
body.cc-filtrescroll-ombres .cc-hscroll.has-more-right::after  { opacity:1; }

/* Mode `barre` — barre de défilement maison. Le rail est toujours dans le DOM
   (cf. inc/templates/v4/filtres-barre.inc.php) mais n'est affiché que dans ce
   mode ET quand la rangée déborde vraiment (.has-overflow, posée par
   filtres.js) : sans débordement, une barre pleine largeur serait un signal
   mensonger. Largeur et position du curseur calculées en JS à partir de
   scrollLeft/scrollWidth. Purement décoratif → pointer-events:none. */
.cc-hscroll-rail { display:none; }
body.cc-filtrescroll-barre .cc-hscroll.has-overflow .cc-hscroll-rail {
  display:block; position:relative; height:3px; margin-top:7px;
  background:var(--c-line); border-radius:3px; pointer-events:none;
}
.cc-hscroll-rail__thumb {
  position:absolute; top:0; left:0; height:100%; width:0;
  background:var(--cc-hscroll-thumb, var(--c-accent)); border-radius:inherit;
}

/* Zone tri poussée à droite (réutilise le <select id="tri"> existant) */
.cc-tri-area { display:flex; align-items:center; gap:8px; margin-left:auto; flex-shrink:0; padding-left:12px; border-left:1px solid var(--clr-border); }
.cc-tri-area label, .cc-tri-area .cc-tri-label { font-size:12px; color:var(--clr-text); white-space:nowrap; }
.cc-tri-area form#trier { margin:0; display:flex; align-items:center; gap:8px; font-size:12px; color:var(--clr-text); }
.cc-tri-area select#tri { border:1.5px solid var(--clr-border); border-radius:20px; background:#fff; font-family:var(--ff-body); font-size:13px; font-weight:600; color:var(--clr-text-dark); padding:7px 13px; cursor:pointer; }

/* Pilule */
.cc-pill-wrap { position:relative; flex-shrink:0; }
.cc-pill { display:inline-flex; align-items:center; gap:6px; padding:7px 13px; border:1.5px solid var(--clr-border); border-radius:20px; background:#fff; font-family:var(--ff-body); font-size:13px; font-weight:600; color:var(--clr-text-dark); cursor:pointer; transition:border-color .15s, background .15s, color .15s; white-space:nowrap; user-select:none; }
@media (hover: hover) { .cc-pill:hover { border-color:#888; } }   /* pt13d — cf. pt11-survol-tactile */
.cc-pill.is-open { border-color:var(--clr-text-dark); border-width:2px; }
.cc-pill.has-value { border-color:var(--clr-ink); background:var(--clr-ink); color:#fff; }
@media (hover: hover) { .cc-pill.has-value:hover { background:var(--clr-ink-dark); border-color:var(--clr-ink-dark); } }   /* pt13d — cf. pt11-survol-tactile */
.cc-pill-chevron { font-size:9px; transition:transform .2s; opacity:.7; }
.cc-pill.is-open .cc-pill-chevron { transform:rotate(180deg); }
.cc-pill-count { background:var(--clr-ink); color:#fff; border-radius:10px; padding:0 5px; font-size:11px; font-weight:700; }
.cc-pill.has-value .cc-pill-count { background:rgba(255,255,255,.28); color:#fff; }
/* #7 (retour Thomas 22/06) : pastille d'un filtre sans aucune option à proposer.
   Grisée et non-ouvrable (le JS bloque togglePill). Sobre, encre atténuée, pas de
   rouge — on signale l'indisponibilité, on n'alerte pas. */
.cc-pill.is-disabled { opacity:.42; cursor:default; border-color:var(--clr-border); background:#fff; color:var(--clr-text-dark); }
@media (hover: hover) { .cc-pill.is-disabled:hover { border-color:var(--clr-border); } }   /* pt13d — cf. pt11-survol-tactile */
.cc-pill.is-disabled .cc-pill-chevron { opacity:.35; }

/* Menu déroulant (positionné en fixed par filtres.js) */
/* overscroll-behavior:contain — #13 (mobile, retour 22/06-3) : la liste d'options
   (.cc-dd est le VRAI scroller : max-height + overflow-y:auto) doit garder son
   geste de défilement POUR ELLE. Sans ça, arrivé en bout de la longue liste
   Appellations, le drag tactile chaînait vers la page (Blink/Android : Chrome +
   DuckDuckGo) → pageYOffset bougeait ≥40px → onBarScroll() fermait le menu
   (« le scroll À L'INTÉRIEUR du filtre est perdu, le menu se referme »). contain
   borne le scroll au menu : doigt DANS le menu = page figée = menu gardé ; doigt
   HORS (sur la grille) = page scrolle = close conservé. Ce n'est PAS le piège du
   #12 (là, contain était posé sur un scroller INERTE) : ici .cc-dd scrolle vraiment. */
.cc-dd { position:fixed; top:0; left:0; min-width:230px; background:#fff; border:1px solid #ddd; border-radius:var(--radius-m); box-shadow:0 6px 24px rgba(0,0,0,.13),0 2px 6px rgba(0,0,0,.07); z-index:600; display:none; padding:12px 14px; max-height:360px; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; }
.cc-dd.is-open { display:block; animation:ccddIn .15s ease; }
.cc-dd.wide { min-width:300px; }
/* #2 (Thomas 23/06) — le menu Couleur s'ajuste à son contenu : quand des pastilles
   sont masquées (couleurs incompatibles avec les filtres actifs), le panneau ne
   garde plus une largeur de plancher vide à droite. */
#cc-dd-couleur { min-width:0; width:max-content; }
/* Millésime : contenu court (4 chiffres + petit compteur) → colonne étroite,
   sinon justify-content:space-between creuse un gouffre dans une boîte de 230px.
   Scopé desktop : la media query mobile (min-width:0 + positionDD left/right:8px)
   gère déjà la largeur tactile. */
@media (min-width:769px) {
  #cc-dd-mil { min-width: 0; width: 160px; }
}
@keyframes ccddIn { from{opacity:0; transform:translateY(-4px);} to{opacity:1; transform:translateY(0);} }
/* Mobile : le menu déroulant épouse la largeur de son CONTENU (pt17, retour
   Thomas 16/07), plafonné à la largeur écran. Millésime → étroit, Producteur /
   Appellation → large. width:max-content supprime aussi le « gouffre » (compteur
   qui filait au bord droit d'une boîte pleine largeur). Ancrage sous-pilule +
   clamp gérés par positionDD (JS). box-sizing:border-box explicite (déclaré ici
   plutôt que délégué) : sans lui, un max-width qui ne compterait que le contenu
   laisserait le padding 14px/16px + la bordure 1px déborder du plafond. .cc-dd
   est actuellement toujours rendu dans .cc-cat, qui pose déjà border-box en
   ambiant sur ses descendants (l.7486) — cette déclaration locale rend la règle
   auto-suffisante si ce contexte de rendu change un jour (cf. convention
   .wine-card l.8173, .order-btn l.1425). */
@media (max-width:768px) {
  .cc-dd, .cc-dd.wide { min-width:0; width:max-content; max-width:calc(100vw - 16px);
    box-sizing:border-box;
    max-height:62vh; padding:14px 16px;
    box-shadow:0 12px 32px rgba(0,0,0,.22),0 2px 8px rgba(0,0,0,.12); }

  /* pt17 — Sélection : la boîte se cale sur les libellés courts (« Coups de cœur »).
     Les longs tronquent en ellipsis (« Promotions… ») ; le compteur reste à droite.
     (Autres filtres : pas d'ellipsis, ils grandissent à leur contenu.) */
  #cc-dd-sel { max-width:214px; }
  #cc-dd-sel .check-item__label { flex:1 1 auto; min-width:0;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  #cc-dd-sel .check-item__count { flex:0 0 auto; margin-left:8px; }
}
/* Les listes d'options reprennent les styles existants ; on neutralise
   juste les marges héritées du panneau gauche dans le contexte dropdown. */
.cc-dd .filtre-groupe__body { display:block; padding:0; }
.cc-dd .filtres-voir-plus { margin-top:8px; }

/* ── Recherche dans un dropdown de filtre (#1) ───────────────────────────
   Champ souligné calqué sur .hd-recherche (soulignement seul, loupe à gauche,
   fond transparent). Hérite les tokens :root, aucune valeur en dur de couleur
   hors placeholder (déjà #9a8e78 ailleurs sur le site). */
/* #8 (retour Thomas 24/06-3) — champ aligné sur les options qu'il filtre :
   margin-left 0 (bord gauche = colonne des cases) et gap 6px (icône 16 + 6 = 22,
   identique à case 14 + gap 8) → texte de saisie aligné pile sur les libellés. */
.cc-dd-search { display: flex; align-items: center; gap: 6px; margin: 11px 0 6px;
  border: 0; border-bottom: 1.5px solid var(--clr-ink); transition: border-bottom-width .15s; }
.cc-dd-search:focus-within { border-bottom-width: 2px; }
/* #40 (retour Thomas 02/07) — la loupe tombait ~3,5px sous le placeholder :
   l'input porte padding-bottom:7px (dégagement du trait souligné) qui grandit sa
   boîte, et align-items:center centrait la loupe sur cette boîte padrée, pas sur
   le texte. margin-bottom miroir → loupe et texte centrés sur la même ligne. */
.cc-dd-search__ico { width: 16px; height: 16px; color: var(--clr-ink); flex-shrink: 0; margin-bottom: 7px; }
.cc-dd-search__input { flex: 1 1 auto; min-width: 0; border: 0; outline: none; background: transparent;
  padding: 0 2px 7px; font: 400 13.5px/1.2 Montserrat, Arial, sans-serif; color: var(--clr-text); }
.cc-dd-search__input::placeholder { color: #9a8e78; }
/* Champ masqué quand la liste courante est sous le seuil (gate ré-évalué en JS
   après chaque repaint AJAX — voir _f_dd_search / syncDropdownSearchVisibility). */
.cc-dd-search.is-hidden { display: none; }

/* Option masquée par la recherche (front pur, aucune incidence sur la sélection). */
.check-item.is-hidden { display: none; }

/* Liste filtrée vide. */
.cc-dd-noresult { padding: 14px 12px; text-align: center; color: var(--clr-count);
  font-size: 12.5px; font-style: italic; }

/* ---- TRI v4 (#7) — contrôle typographique sur la ligne du compteur ----
   Le tri n'est plus une pilule de la barre de filtres (retour poune #7, « ne plus
   confondre trier et filtrer ») : il se pose sur la ligne du compteur, en contrôle
   typographique, avec un panneau « liste explicite » (modèle B), une feuille basse
   mobile et un bouton flottant. Le <select> #tri reste dans le DOM (source de
   vérité + fallback no-JS) mais masqué accessiblement. */
.cc-tri-native { position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ligne tri : compteur à gauche, contrôle de tri poussé à droite */
.cc-tri-line { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.cc-tri-line #filtres-count-wrap, .cc-tri-line .cc-results-count { margin-bottom:0; }
.cc-tri-control { position:relative; margin-left:auto; flex:0 0 auto; }

/* déclencheur typographique (variante C) — texte cliquable, PAS une pilule */
.cc-tri-trigger { display:inline-flex; align-items:center; gap:6px; background:none; border:none;
  font-family:var(--ff-body); font-size:13.5px; color:var(--clr-text); cursor:pointer; padding:4px 2px; }
.cc-tri-trigger__ico { color:var(--clr-or); display:inline-flex; }
.cc-tri-trigger__lead { color:#8a8378; }
.cc-tri-trigger__value { font-weight:700; color:var(--clr-ink-dark);
  border-bottom:1.5px solid var(--clr-or); padding-bottom:1px; }
.cc-tri-trigger__chev { color:var(--clr-or); display:inline-flex; transition:transform .18s ease; }
.cc-tri-trigger[aria-expanded="true"] .cc-tri-trigger__chev { transform:rotate(180deg); }

/* panneau (popover desktop) — modèle B liste explicite */
/* panneau (popover desktop) — esthétique B : coins droits, filet doré en haut,
   flex colonne (en-tête figé + liste scrollable) */
.cc-tri-panel { position:absolute; top:calc(100% + 8px); right:0; z-index:430; min-width:248px;
  background:#fff; border:1px solid var(--clr-or); border-top:3px solid var(--clr-or);
  box-shadow:0 10px 30px rgba(0,0,0,.12); padding:0; display:none;
  flex-direction:column; max-height:min(70vh,560px); }
.cc-tri-panel.is-open { display:flex; }
/* ouvert depuis le bouton flottant (desktop) : la ligne tri a défilé hors champ,
   on pose le panneau en fixed AU-DESSUS du FAB (bas-DROITE, aligné sur lui : le FAB
   est passé à droite) plutôt qu'ancré au déclencheur invisible. bottom = 84 (FAB) +
   54 (sa hauteur) + 12 (gap) = 150. */
.cc-tri-panel.is-fab { position:fixed; right:18px; bottom:150px; top:auto; left:auto; }
.cc-tri-panel__head { display:flex; align-items:center; padding:9px 16px; border-bottom:1px solid #f1ede4; flex:0 0 auto; }
.cc-tri-panel__title { font-family:var(--ff-title); font-size:13px; font-weight:600; letter-spacing:.4px;
  text-transform:uppercase; color:var(--clr-text-dark); }
.cc-tri-panel__close { margin-left:auto; background:none; border:none; color:#b0a78f; cursor:pointer; display:none; padding:0; }
.cc-tri-panel__list { display:flex; flex-direction:column; flex:1 1 auto; overflow-y:auto; }
/* indice « ça défile » : appliqué par filtres.js seulement si la liste déborde */
.cc-tri-panel.is-scrollable .cc-tri-panel__list {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent);
}

/* corps compact : 1 critère / ligne, 2 sens en interrupteur segmenté doré */
.cc-tri-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 16px; }
.cc-tri-row + .cc-tri-row { border-top:1px solid #f4efe3; }
.cc-tri-row__name { font-family:var(--ff-body); font-weight:600; font-size:13.5px; color:var(--clr-text-dark); }
/* nom du critère actif -> bordeaux gras, piloté par l'état du segment (zéro JS) */
.cc-tri-row:has(.cc-tri-opt.is-active) .cc-tri-row__name { color:var(--clr-ink-dark); font-weight:700; }
.cc-tri-seg { display:inline-flex; flex:0 0 auto; border:1px solid var(--clr-border); }
.cc-tri-opt { font-family:var(--ff-body); font-weight:600; font-size:11.5px; line-height:1; color:var(--clr-text-dark);
  background:#fff; border:none; padding:6px 11px; cursor:pointer; white-space:nowrap; }
.cc-tri-opt + .cc-tri-opt { border-left:1px solid var(--clr-border); }
@media (hover: hover) { .cc-tri-opt:hover { background:var(--clr-bg-light); } }   /* pt11 — cf. pt11-survol-tactile ; .is-active reste hors media (l. suivante) */
.cc-tri-opt.is-active, .cc-tri-opt.is-active:hover { background:var(--clr-ink); color:#fff; }

/* bouton flottant (V1) — MÊME format rond que le FAB panier (.cc-fab__btn : 54px ink,
   z-480), icône seule, pour cohérence visuelle de la pile. Empilé EN BAS-DROITE
   au-dessus du panier → offset = 18 + 54 + 12. */
.cc-tri-fab { position:fixed; right:18px; bottom:84px; z-index:470; width:54px; height:54px;
  border-radius:50%; border:none; background:var(--clr-ink); box-shadow:0 4px 14px rgba(0,0,0,.22);
  display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0;
  opacity:0; transform:translateY(14px); pointer-events:none;
  transition:opacity .25s ease, transform .25s ease; }
.cc-tri-fab:hover { background:var(--clr-ink-dark); }
.cc-tri-fab.is-visible { opacity:1; transform:none; pointer-events:auto; }
.cc-tri-fab__ico { color:#fff; display:inline-flex; }
.cc-tri-fab__txt { display:none; }
/* feuille basse ouverte (mobile) : on masque le FAB pour ne pas chevaucher la feuille */
body.cc-tri-sheet-open .cc-tri-fab { opacity:0; pointer-events:none; }

/* overlay feuille basse mobile — AU-DESSUS de la barre de filtres collante
   (.cc-filtres-bar, z-index:500), sinon la barre perce le voile. */
.cc-tri-overlay { position:fixed; inset:0; background:rgba(30,20,15,.38); z-index:1400; opacity:0;
  pointer-events:none; transition:opacity .2s ease; }
.cc-tri-overlay.is-visible { opacity:1; pointer-events:auto; }

/* ── Mobile (≤760px) : libellé compact (M2) + feuille basse. Le breakpoint DOIT
   rester synchrone avec triIsSheet() dans scripts/filtres.js. ── */
@media (max-width: 760px) {
  .cc-tri-trigger__lead { display:none; }   /* « ⇅ <valeur> ▾ » seul */
  .cc-tri-line { gap:8px; }
  .cc-tri-panel.is-sheet { position:fixed; left:0; right:0; bottom:0; top:auto; min-width:0;
    border:none; border-top:3px solid var(--clr-or); border-radius:0; padding:0; z-index:1410;
    box-shadow:0 -6px 24px rgba(0,0,0,.18);
    display:flex; flex-direction:column; max-height:78vh; }
  /* poignée (grabber) sobre, dorée pâle */
  .cc-tri-panel.is-sheet::before { content:''; flex:0 0 auto; width:38px; height:4px; border-radius:var(--radius-s);
    background:#e3d9bf; margin:9px auto 2px; }
  .cc-tri-panel.is-sheet .cc-tri-panel__head { flex:0 0 auto; }
  .cc-tri-panel.is-sheet .cc-tri-panel__list { flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch; }
  .cc-tri-panel.is-sheet .cc-tri-panel__close { display:inline-flex; }
  /* M2 : nom au-dessus, segment pleine largeur dessous (cibles ~44px) */
  .cc-tri-panel.is-sheet .cc-tri-row { flex-direction:column; align-items:stretch; gap:7px; padding:11px 18px 13px; }
  .cc-tri-panel.is-sheet .cc-tri-row__name { font-size:13px; }
  .cc-tri-panel.is-sheet .cc-tri-seg { display:flex; }
  .cc-tri-panel.is-sheet .cc-tri-opt { flex:1; min-height:44px; padding:6px 0; font-size:12.5px; text-align:center; }
  .cc-tri-fab { right:12px; bottom:72px; width:48px; height:48px; }
  body.cc-tri-sheet-open { overflow:hidden; }
}

/* Filtres actifs (chips) sous la barre — réutilise .chip-filtre */
/* Historique : pt12/0716 avait empilé un en-tête (label + « Tout effacer » collé au
   label) au-dessus des chips. pt6/0718 revient à une ligne unique (ci-dessous) et
   PRIME sur cette structure — décision Thomas 20/07. */
/* Pt 6 (retour Thomas 20260718) — RETOUR à une LIGNE UNIQUE (prime sur pt12/0716).
   .cc-actifs redevient un seul flex-wrap row : label · chips · « Tout effacer ».
   Les wrappers __head/__chips sont supprimés du markup (leurs règles avec). Le bouton
   vient désormais APRÈS les chips (ordre du DOM), pas collé au label. */
/* MISE À JOUR pt10 (28/07) — ce qui précède reste vrai MAIS ne suffisait pas : l'ordre du
   DOM ne garantit rien tant que les chips restent enfermés dans <span id="filtres-chips">,
   qui ne compte que pour UN item flex. Le vrai correctif est le display:contents posé sur
   ce conteneur, l. ~8608 ci-dessous. Ne PAS re-toucher au markup : il est correct. */
.cc-actifs { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:10px; line-height:1.3; }
.cc-actifs:empty, .cc-actifs.hidden { display:none; }
/* La ligne des chips hérite des styles du panneau gauche (#filtres-panel) :
   marge basse + grande interligne qui doublaient sa hauteur dans la barre.
   On la compacte pour ne pas gaspiller d'espace quand des filtres sont posés. */
/* #19 (retour Thomas 02/07) — #filtres-chips réutilise .filtres-actifs, dont la
   règle de base (panneau gauche) pose un ENCART crème (padding + fond
   --clr-bg-light + rayon). Dans la barre horizontale ce conteneur ne doit être
   qu'un rail transparent : son fond crème transparaissait dans le gap de 8px
   ENTRE deux chips → « bande jaune parasite ». On neutralise fond + rayon. */
.cc-filtres-bar #filtres-panel .filtres-actifs { margin:0; padding:0; background:transparent; border-radius:0; align-items:center; line-height:1.3; }
/* Pt 10 (retours 28/07) — « Tout effacer » doit se coller À LA SUITE des chips, sur la
   même ligne de wrap, y compris quand les chips débordent.
   CAUSE RÉSIDUELLE (le pt6/0718 ci-dessous avait déjà mis le bouton APRÈS les chips dans
   le DOM, et c'est correct) : les chips ne sont pas enfants directs de .cc-actifs, ils
   vivent dans <span id="filtres-chips" class="filtres-actifs"> (filtres-barre.inc.php),
   lui-même flex-wrap → UN SEUL item flex dans .cc-actifs, de taille hypothétique
   max-content. Dès que les chips dépassent la largeur disponible, cet item part seul sur
   sa ligne et le bouton — item SUIVANT — tombe à la ligne d'après. À un seul chip ça
   tient : d'où le faux « ça semble ok ».
   display:contents supprime la boîte du conteneur : les chips deviennent enfants flex
   DIRECTS de .cc-actifs et entrent dans le même flux de wrap que le bouton. Le <span> et
   son id restent dans le DOM → scripts/filtres.js (chipsZone.innerHTML) et la visibilité
   serveur (inc/catalogue_filtre.inc.php) sont inchangés, aucun JS ni markup touché.
   ⚠ Sélecteur OBLIGATOIREMENT préfixé « #filtres-panel .cc-actifs » : .filtres-actifs est
   une classe PARTAGÉE avec le panneau gauche de recherche (l. ~5127, recherche-vins.inc.php),
   qu'il ne faut surtout pas contaminer.
   ⚠ Effet de bord assumé : la boîte disparaissant, le gap:5px et le margin-bottom:8px de
   « #filtres-panel .filtres-actifs » (l. ~5313) ne s'appliquent plus aux chips, qui
   héritent du gap:8px de .cc-actifs — espacement inter-chips 5→8px, et la ligne perd 8px
   de retombée basse. Alignement volontaire sur le reste de la ligne (label, chip de rayon
   et bouton étaient déjà espacés de 8px). */
#filtres-panel .cc-actifs .filtres-actifs { display:contents; }
.cc-filtres-bar #filtres-panel .chip-filtre { line-height:1.3; }
.cc-actifs .cc-actifs-label { font-size:12px; color:var(--clr-text); }
/* « Tout effacer » : bouton fantôme sobre (liseré + rayon --radius-s + ✕), aligné
   à droite. Direction B, retour Thomas 20260704 #9 : le texte encre nu ne se lisait
   pas comme cliquable (isolé, sans affordance). Rayon 8px (≠ chips pilule 999px de la
   même ligne) → c'est un bouton, pas un chip ; icône ✕ maison pour le sens « effacer ».
   Action secondaire/destructive → fantôme, pas dorée. Liseré = --clr-border (cohérent
   avec les chips voisins), hover = fond soft + bordure encre.
   Sélecteur #filtres-panel .cc-actifs … pour battre #filtres-panel .filtres-tout-effacer
   (règle du panneau gauche : display:block + underline). */
/* Pt 6 (20260718), CORRIGÉ pt10 (28/07) : le bouton est le dernier enfant de .cc-actifs,
   mais cela ne suffisait PAS à le poser après les chips — jusqu'au pt10 les chips
   n'étaient pas des items flex de .cc-actifs (ils étaient encapsulés dans
   #filtres-chips, un item unique qui partait seul sur sa ligne dès qu'il débordait).
   C'est le display:contents de la l. ~8608 qui les met dans le même flux de wrap ; le
   bouton vient alors réellement à leur suite. Toujours pas de margin-left:auto. */
#filtres-panel .cc-actifs .filtres-tout-effacer { display:inline-flex; align-items:center; gap:6px; margin:0; flex:0 0 auto; font-size:12px; color:var(--clr-text-dark); text-decoration:none; cursor:pointer; background:none; border:1px solid var(--clr-border); border-radius:var(--radius-s); padding:5px 11px; transition:background .15s ease, color .15s ease, border-color .15s ease; }
#filtres-panel .cc-actifs .filtres-tout-effacer:hover { color:var(--clr-ink-dark); border-color:var(--clr-ink-dark); background:var(--c-bg-soft); text-decoration:none; }
/* pointer-events:none : le handler de filtres.js capte le clic via
   target.id === 'filtres-tout-effacer' (délégation stricte). Sans ça, un clic sur
   le SVG interne aurait pour cible le <svg>/<path> et n'effacerait rien. */
#filtres-panel .cc-actifs .filtres-tout-effacer .cc-i { stroke-width:2.1; pointer-events:none; }
/* Pt 12 (retour Thomas 20260716) — l'ancien patch mobile #3 (20260715) qui reléguait le
   bouton sur sa propre ligne, centré pleine largeur (@media ≤680px), est SUPPRIMÉ : la
   doctrine d'en-tête (label ↔ bouton) s'applique désormais à l'identique sur mobile,
   le bouton reste en haut à droite quelle que soit la largeur. */


/* Chip de RAYON (région / appellation / identité souple) : contexte identitaire
   épinglé dans la barre de filtres. Fond crème + liseré, eyebrow de catégorie
   (« RÉGION » / « APPELLATION » / etc.). Son ✕ sort du rayon vers /boutique.html
   via greffe pjax (data-cc-scope="exit", géré par catalogue-nav.js). */
/* #3 (variante A) — chip de contexte « Région/Appellation » : crème + liseré
   bordeaux. Distingué du reste sans l'écraser (fini le plein bordeaux lourd à
   côté des chips de facette légères). Même hauteur/forme que .chip-filtre. */
.cc-chip-rayon {
  display: inline-flex;
  /* pt3 (retours 20260718) — décision Thomas : on CONSERVE l'affichage initial
     centré (les variantes baseline/eyebrow ont été écartées en recette). */
  align-items: center;
  gap: 8px;
  background: var(--clr-bg-light, #F9F5EA);   /* crème */
  color: var(--clr-text-dark, #333);
  text-decoration: none;
  padding: 5px 11px 5px 13px;
  border-radius: 999px;
  border: 1px solid var(--c-border-struct);
  box-shadow: inset 3px 0 0 var(--clr-or);    /* liseré or = contexte */
  line-height: 1.1;
  transition: background .15s, border-color .15s;
}
@media (hover: hover) { .cc-chip-rayon:hover { background: var(--c-bg-soft); border-color: var(--c-border-struct); } }   /* pt13d — cf. pt11-survol-tactile */
.cc-chip-rayon__eyebrow {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--clr-or-text);
  margin-right: 1px;
}
.cc-chip-rayon__label {
  font-size: 13px;
  font-weight: 700;
  color: var(--clr-text-dark, #333);
}
.cc-chip-rayon__x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center; /* pt3 — rester centré alors que le conteneur est en baseline */
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(184,138,62,.14);
  color: var(--clr-or);
  font-size: 14px;
  line-height: 1;
}
@media (hover: hover) { .cc-chip-rayon:hover .cc-chip-rayon__x { background: rgba(184,138,62,.28); } }   /* pt13d — cf. pt11-survol-tactile */
/* Retour Thomas 24/06 — seul le ✕ doit fermer le chip de contexte. On neutralise
   le pointeur sur le corps du chip <a> et on le ré-active sur la croix : cliquer
   ailleurs que sur le ✕ ne navigue plus. Le href de sortie (tenu à jour par
   filtres.js) reste porté par l'<a>, donc la croix déclenche bien la navigation.
   pointer-events n'affecte pas le clavier : Entrée sur le lien focalisé marche encore. */
.cc-chip-rayon { pointer-events: none; cursor: default; }
.cc-chip-rayon__x { pointer-events: auto; cursor: pointer; }
@media (hover: hover) { .cc-chip-rayon__x:hover { background: rgba(184,138,62,.28); } }   /* pt13d — cf. pt11-survol-tactile */

/* État de greffe pjax : pendant le fetch de la page cible, le conteneur
   catalogue passe en .cc-nav-loading (léger voile + curseur d'attente).
   Empêche aussi un double-clic accidentel pendant le chargement. */
#catalogue-content.cc-nav-loading { opacity: .55; pointer-events: none; cursor: progress; transition: opacity .12s; }

/* Filtrage AJAX FLUIDE : les résultats restent affichés et s'estompent le temps
   de la requête (au lieu d'un squelette blanc plein écran qui, scrollé bas,
   ressemblait à un rechargement de page). Aucun flash blanc, le contenu morphe. */
#filtres-resultats.cc-grid-loading { opacity: .5; pointer-events: none; cursor: progress; transition: opacity .15s ease; }

/* En-tête résultats — espacement resserré sous la barre de filtres (l'espace
   « mort » entre les pilules et la première rangée de cartes était trop grand). */
.cc-results { padding:14px 0 56px; }
.cc-results .cc-container { text-align:left; }
.cc-results-count { font-size:13px; color:var(--clr-text); margin-bottom:14px; }
/* Au chargement (avant filtrage AJAX) le compteur est vide : on supprime sa
   marge pour ne pas laisser d'espace mort sous la barre. Le sélecteur #id est
   nécessaire pour l'emporter sur `#filtres-count-wrap { margin-bottom:14px }`. */
.cc-results-count:empty, #filtres-count-wrap:empty { margin-bottom:0; }
.cc-results-count strong { color:var(--clr-text-dark); }

/* ── Presets de colonnes des grilles catalogue/listing (back-office catalogue_grid_cols) ──
   La classe body.cc-grid-XX (posée par index.php) définit la liste de pistes consommée
   par les sélecteurs listing (#page-*) et boutique (.cc-cat). On stocke la valeur COMPLÈTE
   de grid-template-columns (pas seulement l'entier) car repeat(var(--n),…) n'est pas fiable.
   Concerne uniquement le desktop ; accueil (.wines-grid) et producteurs (.vg-grid) exclus. */
body.cc-grid-45 { --cc-cat-tracks: repeat(4, minmax(0,1fr)); --cc-cat-tracks-wide: repeat(5, minmax(0,1fr)); }
body.cc-grid-34 { --cc-cat-tracks: repeat(3, minmax(0,1fr)); --cc-cat-tracks-wide: repeat(4, minmax(0,1fr)); }

/* GRILLE PLATE 3 colonnes — surcharge la grille groupée.
   Cartes .cc-wine-card stylées par leur section dédiée (inchangée). */
.cc-cat ul.liste-vins.cc-wine-grid { grid-template-columns: repeat(3, minmax(0,1fr)); margin: 0; }

/* Catalogue v4 : chaque vin est un <li> contenant une .wine-card (design de
   l'accueil, rendu par cc_render_wine_grid). Le <li> est la cellule de grille ;
   la carte la remplit pour que toutes les cartes aient la même hauteur — comme
   sur l'accueil. Le pied de carte (bouton, stepper) hérite directement des
   styles .wine-card de l'accueil : rien à redéfinir ici. */
.cc-cat ul.liste-vins.cc-wine-grid { gap: 20px; }
/* display:contents : le <li> ne génère aucune boîte, donc la .wine-card devient
   l'élément de grille DIRECT (comme sur l'accueil) → cartes à hauteur égale via
   l'étirement de la grille. Indispensable aussi pour neutraliser le style liste
   hérité « .liste-vins li { height:28px; display:table; border-bottom } » qui
   écrasait sinon chaque carte à 28px. La pagination « voir plus » (filtres.js)
   continue de masquer/afficher le <li> via style.display none/''. */
.cc-cat ul.liste-vins.cc-wine-grid > li { display: contents; }
/* #2 — Regroupement producteur (pages catalogue filtrées, tri par défaut) :
   repère « début de producteur » sur la 1re carte de chaque producteur (1er
   inclus). On NE casse PLUS la rangée (fini les cellules vides) : la grille reste
   continue. Repère = filet doré à gauche de la carte (inset box-shadow, sans
   impact layout) + nom du vigneron en doré/gras. Note : le <li> a
   display:contents (transparent pour le layout), donc on cible l'enfant
   .wine-card, pas le <li>. */
/* #16 (retour Thomas) : le filet doré « début de producteur » doit courir sur TOUTE
   la hauteur de la carte, photo comprise, jusqu'en haut. L'ancien inset box-shadow
   était recouvert par le fond crème de la photo (.wc-photo a son propre fond +
   .wine-card a overflow:hidden) → le liseré ne se voyait que SOUS la photo ; il
   disparaissait même au survol (.wine-card:hover réécrit box-shadow). On le rend
   donc via un ::before absolu peint au-dessus de la photo (z-index), clippé aux
   coins arrondis par l'overflow:hidden de la carte. Vaut desktop ET mobile. */
.cc-cat ul.liste-vins.cc-wine-grid > li.wc-prod-start > .wine-card::before {
  content: ""; display: block; position: absolute; left: 0; top: 0; bottom: 0;
  right: auto; height: auto;   /* annule le filet HORIZONTAL hérité de .wine-card::before (top:0;right:0;height:4px) : sans ça top+bottom sont ignorés et la barre reste un carré 4×4px */
  width: 4px; background: var(--c-accent); z-index: 4; pointer-events: none;
}
.cc-cat ul.liste-vins.cc-wine-grid > li.wc-prod-start .wc-vigneron { color: var(--c-accent); font-weight: 700; }
.cc-cat .cc-empty { padding: 40px 0; color: var(--clr-text); font-size: 15px; text-align: center; }

/* Bandeaux d'angle réactivés sur le catalogue (Nouveau / Fin de stock / Coup de
   cœur). Le template ne les rend que là (via $wc_show_badges) ; sur l'accueil ils
   restent masqués. Ancrés en bas à gauche de la photo : le coin haut-gauche porte
   le sceau millésime, le haut-droit le badge Bio. Palette bordeaux/crème. */
.wine-img .wc-badges { position: absolute; left: 12px; bottom: 12px; z-index: 3;
  display: flex; flex-direction: column; gap: 5px; align-items: flex-start; pointer-events: none; }
.wc-badge { display: inline-flex; align-items: center; line-height: 1;
  font-family: var(--ff-body); font-size: 10.5px; font-weight: 700; letter-spacing: .3px;
  text-transform: uppercase; padding: 4px 9px; border-radius: 20px;
  box-shadow: 0 2px 6px rgba(32,24,18,.16); }
.wc-badge--new   { background: var(--clr-ink); color: #fff; }
.wc-badge--stock { background: #fff; color: var(--clr-or-text); border: 1px solid var(--clr-or); }
.wc-badge--coeur { background: #fff; color: var(--clr-or-text); border: 1px solid #e7d9c4; }

/* Voir plus */
.cc-voirplus-wrap { display:flex; flex-direction:column; align-items:center; gap:12px; margin-top:44px; }
.cc-voirplus-btns { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.cc-btn-voirplus { display:inline-flex; align-items:center; gap:10px; padding:14px 40px; border:1.5px solid var(--clr-or); border-radius:var(--radius-s); background:#fff; font-family:var(--ff-body); font-size:14px; font-weight:700; color:var(--clr-or-text); cursor:pointer; transition:background .2s,color .2s,border-color .2s,box-shadow .2s,transform .2s; min-width:240px; justify-content:center; }
/* pt2 (retours 26/07) — même famille que « Afficher les N autres vins » : bouton bordé or
   qui virait en encre plein au survol. Patron --cc-addh-* (cf. bloc pt4 du 24/07). */
@media (hover: hover) {   /* pt9 (28/07) — bouton qui RESTE à l’écran après le clic : son survol
     rémanent en tactile masquerait l’or de repos. cf. pt11-survol-tactile. */
  .cc-btn-voirplus:hover { background:var(--cc-addh-bg); border-color:var(--cc-addh-bd); color:var(--cc-addh-tx); box-shadow:var(--cc-addh-sh); transform:var(--cc-addh-tr); }
}
.cc-btn-voirplus[disabled] { opacity:.5; cursor:default; }
/* « Tout afficher » : action secondaire, style plus discret que « voir plus ». */
.cc-btn-voirtout { display:inline-flex; align-items:center; gap:8px; box-sizing:border-box; line-height:1; min-height:var(--btn-min-h);padding:var(--btn-pad-y) var(--btn-pad-x); border:1.5px solid var(--clr-border); border-radius:var(--radius-s); background:#fff; font-family:var(--ff-body); font-size:var(--btn-font); font-weight:600; color:var(--clr-text); cursor:pointer; transition:border-color .2s,color .2s; justify-content:center; }
.cc-btn-voirtout:hover { border-color:var(--clr-or); color:var(--clr-or-text); }
.cc-voirplus-info { font-size:12px; color:var(--clr-text); }

/* Grille fluide responsive. Desktop piloté par le back-office (catalogue_grid_cols
   → variables --cc-cat-tracks / --cc-cat-tracks-wide, définies en fin de fichier),
   exactement comme les pages listing : preset 45 → 4 puis 5 (≥1600px), preset 34 →
   3 puis 4. La base 3 colonnes (plus haut) sert de repli ; tablette/mobile inchangés.
   Seuil de bascule desktop↔tablette ALIGNÉ sur les listings (981/980px, jadis 901/900)
   pour que boutique et listings montrent le même nb de colonnes à toute largeur. */
@media (min-width:981px)  { .cc-cat ul.liste-vins.cc-wine-grid { grid-template-columns: var(--cc-cat-tracks, repeat(4,minmax(0,1fr))); } }
@media (min-width:1600px) { .cc-cat ul.liste-vins.cc-wine-grid { grid-template-columns: var(--cc-cat-tracks-wide, repeat(5,minmax(0,1fr))); } }
@media (max-width:980px)  { .cc-cat ul.liste-vins.cc-wine-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:680px)  { .cc-cat ul.liste-vins.cc-wine-grid { grid-template-columns:1fr; } }

/* Accès rapide « Mon compte » + « Panier » — boutons flottants.
   Le header défile et disparaît (sticky façon eBay) : ces boutons gardent le
   compte et le panier accessibles sans devoir remonter en haut de page.
   Ils apparaissent dès qu'on a fait défiler la page (classe .is-visible posée
   par filtres.js). Le bouton panier rouvre le même tiroir que le header. */
.cc-fab { position:fixed; right:18px; bottom:18px; z-index:480; display:flex; flex-direction:column; gap:12px; opacity:0; transform:translateY(14px); pointer-events:none; transition:opacity .25s ease, transform .25s ease; }
.cc-fab.is-visible { opacity:1; transform:none; pointer-events:auto; }
.cc-fab__btn { position:relative; width:54px; height:54px; border-radius:50%; border:none; background:var(--clr-ink); box-shadow:0 4px 14px rgba(0,0,0,.22); display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; color:#fff; transition:background .2s ease, transform .15s ease; }
.cc-fab__btn:hover { background:var(--clr-ink-dark); transform:translateY(-2px); }
/* FAB panier = même glyphe que le header : cc_icon('panier') (.cc-i--panier).
   color:#fff sur le bouton → le contour du caddie (stroke:currentColor) passe blanc,
   lisible sur le fond ink ; les roues or « cuites » (#b88a3e) restent dorées comme au header.
   (Inversion du retour #11 du 22/06 : header + FAB reviennent du caddie « + » à l'ancien panier.) */
.cc-fab__btn .cc-i { width:27px; height:27px; }
.cc-fab__badge { position:absolute; top:-4px; right:-4px; min-width:20px; height:20px; padding:0 5px; border-radius:10px; background:#fff; color:var(--clr-or-text); font-family:var(--ff-body); font-size:12px; font-weight:700; line-height:20px; text-align:center; box-shadow:0 1px 4px rgba(0,0,0,.2); display:none; }
.cc-fab__badge.is-on { display:block; }
@media (max-width:680px) { .cc-fab { right:12px; bottom:12px; } .cc-fab__btn { width:48px; height:48px; } .cc-fab__btn .cc-i { width:24px; height:24px; } }

/* Garde anti-recouvrement : tant que le bandeau de consentement cookies
   (#tarteaucitronAlertBig) est ouvert, il se superpose aux boutons flottants
   collés en bas (Trier/Panier, z-index 470/480 < bandeau) et capte leurs taps
   → lien CGV du bandeau. On neutralise donc les FAB jusqu'au choix cookies (la
   classe html.cc-consent-open est posée/retirée par scripts/filtres.js). Le
   panier reste joignable via le header. */
html.cc-consent-open .cc-fab,
html.cc-consent-open .cc-tri-fab {
  opacity: 0 !important;
  transform: translateY(14px) !important;
  pointer-events: none !important;
}
/* ===== END CATALOGUE v4 ===== */

/* ===== session-3 : hauteur de photo UNIFORME sur toutes les pages catalogue =====
   Contexte : la carte d'accueil (.wine-card / wine-card.inc.php) est réutilisée
   par le catalogue (.cc-cat). Sa zone photo .wine-img est ÉLASTIQUE
   (flex:1 0 290px) : dans une carte étirée à la hauteur de la rangée, un libellé
   sur 2 lignes (cuvée/appellation/producteur) gonfle le corps → la photo rétrécit
   → bouteilles de tailles différentes d'une carte à l'autre (cf. capture).
   Correctif (catalogue uniquement, l'accueil utilise .wines-grid et n'est pas
   touché) : on FIGE la hauteur de la zone photo et on laisse le corps .wine-body
   absorber l'écart d'étirement. Résultat : zone photo identique partout, pieds de
   carte toujours alignés, quelles que soient les conditions (badges, prix domaine,
   stock, longueur des libellés). */
.cc-cat .wine-img {
  flex: 0 0 278px;   /* ne grandit plus : hauteur constante  */
  height: 278px;
  min-height: 278px;
}
/* Le corps reprend le rôle d'élément élastique → footers alignés, pas de vide
   sous le bouton quand la carte est étirée. Le bloc prix reste collé en bas
   (margin-top:auto déjà posé sur .price-row / .wine-price-block). */
.cc-cat .wine-body { flex: 1 0 auto; }

@media (max-width: 1130px) {
  .cc-cat .wine-img { flex-basis: 250px; height: 250px; min-height: 250px; }
}
@media (max-width: 680px) {
  .cc-cat .wine-img { flex-basis: 230px; height: 230px; min-height: 230px; }
}
/* ===== fin session-3 ===== */


/* ============================================================================
   WINE-CARD v4 « PRIX DOMAINE » — re-skin du composant PARTAGÉ
   (accueil, catalogue, vins liés, page producteur). Markup :
   inc/templates/v4/wine-card.inc.php. Maquettes validées Thomas 2026-06-05 :
     desktop : prototypes/cartes-vin-prix-domaine-signature-generalise.html
     mobile  : prototypes/cartes-vin-mobile-icone-seule.html
               (≤640px : 2 fiches/ligne, bouton ICÔNE SEULE, lignes ancrées,
                millésime sur sa propre ligne)
   Placé en FIN de fichier → gagne la cascade sur l'ancien bloc .wine-card (v2)
   à spécificité égale, sans !important. Le visuel utilise des classes .wc-*
   (anti-collision) ; les accroches .cc-wine-card__* du <form> sont conservées
   pour l'AJAX (cart-drawer.js) et restylées ici.
   NB : l'ancien CSS v2 (.wine-img/.wine-body/.type-pill/.seal-domaine/.vintage-stamp/
   .stock-line + .cc-cat .wine-img de « session-3 ») devient inerte (classes plus
   émises). Nettoyage = tâche séparée (limite le risque de régression).
   ============================================================================ */
.wine-card { height: 100%; border-radius: var(--radius-m); line-height: 1.45; --wine: var(--wine-accent, var(--clr-or-text)); }   /* le site impose line-height:30px globalement → sans ça les pastilles wc-tag (8px) deviennent de grosses ovales et l'appellation/vigneron sont trop aérés */
.wine-card, .wine-card * { box-sizing: border-box; }   /* le site n'impose pas border-box globalement → hauteurs fixes (.wc-photo, ancrage mobile) calées comme la maquette */
.wine-card::before { display: none; }   /* pas de filet de couleur en tête : la pastille .wc-dot porte la couleur */

/* — PHOTO — fond crème (dégradé radial) + multiply pour dissoudre le blanc du JPG.
   Décision Thomas 2026-06-08 : retour au fond crème (le blanc pur introduit le
   07-06 est annulé). Le multiply absorbe le blanc des clichés sur ce fond crème. */
.wine-card .wc-photo {
  position: relative; flex: 0 0 220px; height: 220px;   /* #14 carte resserrée : 250→220 (bouteille reste lisible) */
  display: flex; align-items: flex-end; justify-content: center;
  padding: 8px 0 8px; overflow: hidden;
  background: radial-gradient(78% 72% at 50% 42%, var(--c-bg-soft) 0%, var(--c-bg-soft) 76%, var(--c-bg-soft) 100%);
}
.wine-card .wc-photo a { display: flex; align-items: flex-end; justify-content: center; height: 100%; width: 100%; }
/* Bouteille agrandie : les vraies photos sont souvent carrées avec une marge blanche
   intégrée (effacée par multiply) → un max-width étroit les rapetissait et laissait
   un vide en haut. On laisse la photo remplir presque toute la zone. */
.wine-card .wc-photo img { max-height: 100%; max-width: 94%; object-fit: contain; mix-blend-mode: multiply; transition: transform .35s ease; }   /* #14 fix : suivait le conteneur en dur (234px = 250−padding) ; resserrement 250→220 l'a laissée déborder (204px utiles) → bouteille coupée. 100% se cale sur la zone quelle que soit la hauteur. */
@media (hover: hover) { .cc-cardhover-lift .wine-card:hover .wc-photo img { transform: translateY(-2px) scale(1.015); } }   /* pt13d — cf. pt11-survol-tactile */
/* Repli photo cassée (404) : rend comme le placeholder « pas de photo » — silhouette
   bouteille maison, pas de multiply parasite, même gabarit que .wine-color-emoji svg. */
/* pt2b (retours 28/07) — CONVERGENCE des deux replis. L'asset servi ici
   (/img/v4/bouteille-placeholder.svg) reprend désormais le tracé ET les teintes du repli
   canonique .wc-photo-empty (l. ~9359) : #cbb27a cuit dans le SVG (une <img> n'hérite pas
   de currentColor) + accent or #b88a3e. Gabarit aligné 64→54px et opacity .5→.85 pour que
   les deux replis soient indiscernables. width/height explicites : le SVG n'ayant pas de
   taille intrinsèque déclarée jusqu'ici, max-width/max-height seuls laissaient le
   dimensionnement au navigateur. */
.wine-card .wc-photo img.wc-photo-fallback { mix-blend-mode: normal; width: 54px; height: 54px; max-width: 54px; max-height: 54px; opacity: .85; }
/* État 404 du LIEN photo (classe posée par l'attribut onerror de l'<img>, cf.
   inc/templates/v4/wine-card.inc.php) : le lien bascule en colonne centrée pour porter
   « icône + mention », comme .wc-photo-empty. Sélecteur à 3 classes + type pour battre
   « .wine-card .wc-photo a » (align-items:flex-end) juste au-dessus. */
.wine-card .wc-photo a.wc-photo-404 { flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-decoration: none; }
/* La mention « Photo à venir » du repli 404 est TOUJOURS dans le DOM (texte côté PHP,
   pas de content: CSS → aucun risque de charset) et ne se révèle qu'en état 404.
   Sa typographie est mutualisée avec .wc-photo-empty__lbl (l. ~9366). */
.wine-card .wc-photo-404__lbl { display: none; }
.wine-card .wc-photo a.wc-photo-404 .wc-photo-404__lbl { display: block; }
.wine-card .wine-color-emoji { font-size: 60px; align-self: center; }
/* Placeholder « pas de photo » : silhouette bouteille du jeu maison (encre + ceinture or) */
.wine-card .wine-color-emoji svg { width: 64px; height: 64px; color: var(--wine, var(--clr-or)); opacity: .55; }

/* Pastilles d'angle (catalogue uniquement) — empilées en haut à droite, max 2 */
/* Médaillon picto seul (décision Thomas 19/06) : doré sobre, empilé en coin
   haut-droit. Tous les statuts partagent le même habillage — seule l'icône
   maison change (nouveau / dernieres-bouteilles / coup-de-coeur). */
.wine-card .wc-tag {
  position: absolute; right: 9px; top: 9px; z-index: 3;
  width: 26px; height: 26px; padding: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--clr-bg-light); border: 1.5px solid var(--clr-or);
  box-shadow: 0 1px 2px rgba(138,98,36,.22);
}
.wine-card .wc-tag .cc-i { width: 15px; height: 15px; stroke: var(--clr-ink); }
/* #8 20260713 : badge « Épuisé » — teinte NEUTRE (état, pas l'urgence dorée des autres). */
.wine-card .wc-tag--epuise { background: #f2f0ea; border-color: #cfc8ba; box-shadow: 0 1px 2px rgba(60,55,45,.15); }
.wine-card .wc-tag--epuise .cc-i { stroke: #8c857a; }
.wine-card .wc-tag ~ .wc-tag { top: 41px; }   /* 2e médaillon dessous (26px + 9px) */

/* Logo officiel AB */
.wine-card .wc-bio { position: absolute; right: 10px; bottom: 10px; z-index: 3; height: 30px; width: auto; mix-blend-mode: multiply; }

/* — INFO — */
.wine-card .wc-info { padding: 12px 18px 0 20px; text-align: left; flex: 1 1 auto; display: flex; flex-direction: column; }   /* #14 : 14→12 top */
.wine-card .wc-appell {
  font-family: var(--ff-title); font-size: 10px; letter-spacing: .22em;
  color: var(--clr-text, #666); text-transform: uppercase; font-weight: 500; margin-bottom: 6px;
  display: flex; align-items: center; gap: 7px; flex-wrap: nowrap; min-height: 15px;
}
/* #16 (retours 11/07) : appellation sur UNE ligne (ellipsis) au lieu de wrap. Sur une carte
   étroite (5 colonnes), « IGP Collines Rhôdaniennes » passait sur 2 lignes et la pastille
   .wc-dot (margin-left:auto) dérivait vers le bas → hiérarchie incohérente vs une appellation
   courte (« Crozes-Hermitage »). Une ligne + pastille pinée à droite = rendu homogène.
   (L'appellation complète reste dans le fil d'Ariane / H1 / filtre.) Reprend la règle mobile. */
.wine-card .wc-appell-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wine-card .wc-dot {
  /* Pastille couleur alignée au bord DROIT de la carte (retour Thomas #11,
     desktop). margin-left:auto la pousse à l'extrême droite de la ligne
     appellation. NB : en mobile elle reste collée au libellé (override plus bas)
     — le correctif L7 « point orphelin » ne valait que pour le petit écran. */
  margin-left: auto;
  align-self: center; width: 13px; height: 13px; border-radius: 50%;
  background: var(--wine, currentColor); flex-shrink: 0;
  box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.16), 0 0 0 1px rgba(0,0,0,.05);
}
/* #16 (retours 11/07, 2e passe) : min-height = 2 lignes (16px × 1.25 × 2 = 40px). Un nom de
   cuvée court (« Bessards · 2007 », 1 ligne) et un long (« Domaine des Tourettes · 2011 »,
   2 lignes) réservent la même hauteur → la ligne vigneron (« Delas ») et le filet dessous
   s'alignent d'une carte à l'autre (le bloc prix, lui, était déjà ancré en bas par margin-top:auto).
   Neutralisé en mobile (nom en nowrap 1 ligne → override plus bas). */
.wine-card .wc-name { font-family: var(--ff-title); font-weight: 600; font-size: 16px; line-height: 1.25; min-height: 40px; color: var(--clr-text-dark, #1a1a1a); margin-bottom: 3px; }
.wine-card .wc-name a { color: inherit; text-decoration: none; }
@media (hover: hover) { .wine-card .wc-name a:hover { text-decoration: underline; } }   /* pt13d — cf. pt11-survol-tactile */
.wine-card .wc-millesime { font-weight: 500; color: var(--clr-text, #666); }
.wine-card .wc-millesime::before { content: ' · '; }   /* L7 — espace AVANT le point médian (« Côte rôtie · 2017 », fini « Côte rôtie· 2017 ») */
.wine-card .wc-vintage { display: none; }   /* affiché uniquement en mobile (ligne propre) */
/* pt7 (retours JL 25/07) : nom de domaine des cartes — italique RETIRÉ, variante
   « droit-gris » choisie par Thomas sur comparatif des 4 traitements (25/07).
   JL : « le nom du producteur n'a pas changé de police et toujours en italique ».
   --ff-body et --ff-title valent tous deux Montserrat : ce que JL lisait comme une
   autre police était l'italique oblique synthétique. font-style: normal règle donc
   « police » et « italique » d'un seul geste — couleur et taille restent inchangées.
   ⚠️ ARBITRAGE INVERSÉ, ne pas « corriger » : c'est exactement l'option B rejetée à la
   recette du 24/07 (fiche mémoire « ne PAS reproposer B tel quel »). Thomas l'a revue
   en contexte le 25/07, sur la vraie séquence de cartes, et l'a validée. Les variantes
   or-texte 15px et encre-douce ont été écartées à cette occasion.
   Bénéfice de bord : le nom restant en gris, le repère de début de domaine
   (.wc-prod-start .wc-vigneron, l. 8302 — or franc #b88a3e + gras) ressort DAVANTAGE
   que si toutes les cartes passaient en or. La hiérarchie du pt6b y gagne. */
.wine-card .wc-vigneron { font-family: var(--ff-title); font-style: normal; font-weight: 500; font-size: 14px; color: var(--clr-text, #666); margin-bottom: 9px; }   /* #14 : 12→9 */
/* margin-top:auto : ancre le bloc prix (prix + cagnotte + « Prix domaine ») en BAS
   de la zone info → ces 3 lignes s'alignent d'une carte à l'autre même quand le
   titre du vin passe sur 2 lignes (sinon « Prix domaine » flottait à des hauteurs
   différentes selon la longueur de la cuvée). Thomas 2026-06-07. */
.wine-card .wc-pricerow { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: auto; margin-bottom: 4px; }
.wine-card .wc-price-left { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.wine-card .wc-price-now { font-family: var(--ff-title); font-weight: 700; font-size: 22px; color: var(--clr-text-dark, #1a1a1a); letter-spacing: -.02em; }
.wine-card .wc-price-now.is-promo { color: var(--c-ink); } /* #5 (retours 22/06-2) : promo en encre, plus de rouge danger ; l'ancien prix barré gris signale la promo */
/* pt6 (retours 28/07) — ancien prix barré EN DIAGONALE (et non plus text-decoration:
   line-through, horizontal par définition).
   line-height:1 : sans lui la boîte inline-block inclut le demi-interligne et la
   diagonale déborderait au-dessus/en dessous des chiffres (alignement baseline du parent
   flex .wc-price-left inchangé, seule la boîte se resserre).
   L'accessibilité perdue avec line-through est reprise par un <span class="visually-hidden">
   dans inc/templates/v4/wine-card.inc.php.
   ⚠️ Le TRACÉ du barré n'est plus ici : il est mutualisé en fin de feuille, bloc
   « PRIX BARRÉ EN DIAGONALE — idiome unique » (cherche cc-barre-diagonale). */
.wine-card .wc-price-old { font-family: var(--ff-title); font-size: 13px; line-height: 1; color: #999; }
.wine-card .wc-price-unit { font-family: var(--ff-body); font-size: 11px; color: var(--clr-text, #666); font-weight: 500; }
.wine-card .wc-cagnotte { display: flex; align-items: center; gap: 5px; min-height: 16px; margin-bottom: 6px; font-family: var(--ff-title); font-size: 11px; font-weight: 500; color: var(--c-text); }   /* #14 : 8→6 */
.wine-card .wc-cagnotte img,
.wine-card .wc-cagnotte svg { width: 13px; height: 13px; flex-shrink: 0; }
.wine-card .wc-signals { display: flex; gap: 6px; min-height: 24px; margin-bottom: 10px; align-items: center; }   /* #14 : min-height 30→24, mb 14→10 */

/* « Prix domaine » — liseré or + tonneau */
.wine-card .wc-pd { display: inline-flex; flex-direction: column; gap: 4px; }
.wine-card .wc-pd .rule { height: 1px; width: 40px; background: linear-gradient(90deg, #b4894c 0%, rgba(180,137,76,0) 100%); }
.wine-card .wc-pd .lbl { font-family: var(--ff-title); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--c-text); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.wine-card .wc-pd .lbl svg { width: 14px; height: 14px; flex-shrink: 0; }

/* — ACTIONS = le <form>.cc-wine-card__actions (.wc-actions) — */
.wine-card .wc-actions { display: flex; gap: 8px; margin-top: auto; padding: 0 18px 14px 20px; position: static; opacity: 1; pointer-events: auto; transform: none; }   /* #14 : pb 16→14 */
/* background:none : neutralise le fond #151515 du legacy .cc-wine-card__qty, sinon
   ses coins carrés sombres dépassent derrière le select arrondi (--radius-s). */
.wine-card .wc-actions .cc-wine-card__qty { display: flex; flex: 0 0 64px; margin: 0; background: none; }
.wine-card .wc-actions .cc-wine-card__qty select {
  width: 100%; border: 1px solid var(--clr-border, #d8d4c8); border-radius: var(--radius-s); background: #fff;
  font-family: var(--ff-title); font-size: 13px; font-weight: 500; color: var(--clr-text-dark, #1a1a1a);
  padding: 0 6px; height: 44px; cursor: pointer;
}
/* pt7/0720 — le contour noir qui restait après sélection n'était pas propre au
   select : il héritait du :focus-visible GLOBAL (3px var(--clr-ink), plus haut
   dans cette feuille), trop dur sur une carte claire. On ne supprime pas l'anneau
   (navigation clavier), on l'aligne sur le traitement DÉJÀ retenu pour le même
   select en fiche vin (.vin-cart-row .vin-qty select) : or, 2px, offset 1px.
   Porté sur .cc-wine-card__qty (pas .wc-actions) pour couvrir aussi la variante
   sombre des grilles ul.liste-vins ; la fiche vin garde sa règle, plus spécifique. */
.cc-wine-card__qty select:focus-visible {
  outline: 2px solid var(--clr-or);
  outline-offset: 1px;
}
.wine-card .wc-actions .cc-wine-card__cart-button {
  box-sizing: border-box; flex: 1; width: auto; min-height: 0; grid-template-columns: none;
  background: var(--clr-ink); color: #fff; border: 0; border-radius: var(--radius-s); cursor: pointer;
  height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--ff-title); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; font-weight: 600; text-decoration: none; padding: 0 10px;
  transition: background .18s;
}
.wine-card .wc-actions .cc-wine-card__cart-button:hover,
.wine-card .wc-actions .cc-wine-card__cart-button:focus-visible { background: var(--clr-ink-dark); color: #fff; }
.wine-card .wc-actions .cc-wine-card__cart-button:active { transform: translateY(1px); }
.wine-card .wc-actions .cc-wine-card__cart-icon { display: inline-flex; width: auto; height: auto; background: transparent; place-items: center; color: #fff; }
.wine-card .wc-actions .cc-wine-card__cart-icon img { width: 18px; height: 18px; filter: brightness(0) invert(1); }   /* toujours blanc (bouton plein) */
.wine-card .wc-actions .cc-wine-card__cart-icon svg { width: 16px; height: 16px; }   /* panier au trait, hérite color:#fff via currentColor */
.wine-card .wc-actions .cc-wine-card__cart-button span:last-child { padding: 0; white-space: nowrap; }
/* État « Épuisé » : pleine largeur, encre plein — ALIGNÉ sur « Ajouter » et
   « Au maximum » (retour Thomas 20260713-finitions : plus de beige résiduel). */
.wine-card .wc-actions .cc-wine-card__cart-button--disabled {
  flex: 1; background: var(--clr-ink); color: #fff; border: 0;
  /* cursor:default (pas not-allowed) : le rond rouge barré est redondant avec le
     libellé « Épuisé » (retour Thomas 20260713-finitions). Le bouton reste disabled
     → aucune action au clic. */
  cursor: default; box-shadow: none; letter-spacing: .08em;
}

/* #17 (retour Thomas) — CATALOGUE uniquement : le bouton « Ajouter ».
   Décision Thomas 20/06 (branche encre-or) : supprimer la bascule de couleur au
   survol. L'ancien état était beige doré par défaut → encre plein au survol ;
   on garde désormais l'ASPECT SURVOL (encre plein, texte/icône blancs) EN
   PERMANENCE, sans variation au survol/focus. Cible le SEUL <a> actif (les états
   Épuisé/Max atteint sont des <button>) et exclut --success (confirmation
   transitoire post-ajout). Scopé .cc-cat : l'accueil ne change pas. */
.cc-cat .wine-card .wc-actions a.cc-wine-card__cart-button:not(.cc-wine-card__cart-button--success),
.cc-cat .wine-card .wc-actions a.cc-wine-card__cart-button:not(.cc-wine-card__cart-button--success):hover,
.cc-cat .wine-card .wc-actions a.cc-wine-card__cart-button:not(.cc-wine-card__cart-button--success):focus-visible {
  background: var(--clr-ink); color: #fff; border: 1.5px solid var(--clr-ink);
}
.cc-cat .wine-card .wc-actions a.cc-wine-card__cart-button:not(.cc-wine-card__cart-button--success) .cc-wine-card__cart-icon { color: #fff; }
.cc-cat .wine-card .wc-actions a.cc-wine-card__cart-button:not(.cc-wine-card__cart-button--success) .cc-wine-card__cart-icon img { filter: brightness(0) invert(1); }

/* ===================== MOBILE (≤640px) — maquette icône seule ===================== */
@media (max-width: 640px) {
  .wine-card .wc-photo { flex: 0 0 168px; height: 168px; padding: 6px 0 6px; }
  .wine-card .wc-photo img { max-height: 156px; max-width: 94%; }
  /* Retour 14/06 #2 : à 26px le logo AB mordait encore la photo de la bouteille
     sur mobile. On le réduit et on le recolle dans le coin. */
  .wine-card .wc-bio { height: 22px; right: 7px; bottom: 7px; }
  .wine-card .wc-tag { top: 8px; right: 8px; width: 22px; height: 22px; }
  .wine-card .wc-tag .cc-i { width: 13px; height: 13px; }
  .wine-card .wc-tag ~ .wc-tag { top: 36px; }   /* 22px + 8px */
  .wine-card .wc-info { padding: 11px 12px 0 13px; }
  /* Appellation sur UNE ligne (tronquée si longue) + pastille couleur qui ne wrappe
     jamais → la pastille n'est plus coupée par overflow:hidden quand l'appellation
     est longue (retour Thomas mobile). */
  .wine-card .wc-appell { font-size: 9px; line-height: 1.5; letter-spacing: .16em; margin-bottom: 5px; align-items: center; gap: 6px; min-height: 18px; flex-wrap: nowrap; }
  .wine-card .wc-appell-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .wine-card .wc-dot { margin-left: auto; width: 12px; height: 12px; flex-shrink: 0; }   /* #5 20260715 : pastille pinée à DROITE de la carte sur mobile aussi (revient sur le correctif L7 « point orphelin », demande Thomas — aligne le mobile sur le desktop #11) */
  .wine-card .wc-name { font-size: 13.5px; line-height: 1.22; min-height: 0; margin-bottom: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* #16 : nom sur 1 ligne (ellipsis) → pas de hauteur réservée (annule le min-height desktop) */
  .wine-card .wc-millesime { display: none; }   /* le millésime passe sur sa propre ligne en mobile */
  .wine-card .wc-vintage { display: block; font-family: var(--ff-title); font-weight: 500; font-size: 12px; color: var(--clr-text, #666); margin-bottom: 9px; height: 16px; line-height: 16px; overflow: hidden; }
  .wine-card .wc-vigneron { font-size: 13px; margin-bottom: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .wine-card .wc-pricerow { gap: 6px; margin-bottom: 4px; }
  .wine-card .wc-price-left { gap: 4px; flex-wrap: nowrap; flex-shrink: 0; white-space: nowrap; }   /* les prix ne se clippent jamais */
  .wine-card .wc-price-now { font-size: 17px; }
  .wine-card .wc-price-old { font-size: 10px; }
  /* l'unité absorbe le reste et se clippe au besoin (jamais de chevauchement avec le prix) */
  .wine-card .wc-price-unit { font-size: 9.5px; flex: 1 1 auto; min-width: 0; padding-left: 4px; white-space: nowrap; overflow: hidden; text-align: right; }
  .wine-card .wc-cagnotte { height: 16px; min-height: 0; overflow: hidden; margin-bottom: 8px; font-size: 10.5px; }
  .wine-card .wc-cagnotte img,
  .wine-card .wc-cagnotte svg { width: 12px; height: 12px; }
  .wine-card .wc-signals { height: 26px; min-height: 0; overflow: hidden; margin-bottom: 11px; }   /* hauteur fixe → pied de carte aligné */
  .wine-card .wc-pd { gap: 3px; }
  .wine-card .wc-pd .rule { width: 36px; }
  .wine-card .wc-pd .lbl { font-size: 8.5px; letter-spacing: .16em; gap: 5px; white-space: nowrap; }
  .wine-card .wc-pd .lbl svg { width: 13px; height: 13px; }
  .wine-card .wc-actions { gap: 7px; padding: 0 12px 12px 13px; }
  .wine-card .wc-actions .cc-wine-card__qty { flex: 0 0 50px; }
  .wine-card .wc-actions .cc-wine-card__qty select { padding: 0 4px; }
  /* bouton ICÔNE SEULE : libellé masqué, icône centrée — SAUF l'état « max atteint »
     (#50 : le libellé « Au maximum » doit rester lisible sur mobile, sinon il ne
     reste qu'une coche muette) */
  .wine-card .wc-actions .cc-wine-card__cart-button:not(.cc-wine-card__cart-button--maxed) span:last-child { display: none; }
  .wine-card .wc-actions .cc-wine-card__cart-icon img { width: 20px; height: 20px; }
  .wine-card .wc-actions .cc-wine-card__cart-icon svg { width: 20px; height: 20px; }
}

/* ===================== GRILLES — 2 fiches/ligne sur mobile (toutes surfaces) ===================== */
@media (max-width: 680px) {
  .wines-grid { grid-template-columns: repeat(2, 1fr); gap: 13px; }
  ul.liste-vins.cc-wine-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 13px; }
  .cc-cat ul.liste-vins.cc-wine-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .vin-related ul.liste-vins.cc-wine-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
/* ===== fin wine-card v4 « Prix domaine » ===== */

/* =====================================================================
   Jeu d'icônes maison « signature E » — classe de base du helper cc_icon()
   (inc/icones.inc.php). Encre = couleur du texte (currentColor) ; les
   accents or/bordeaux sont cuits en attributs dans chaque tracé.
   NE PAS cibler « .cc-i path » en CSS : cela écraserait les accents cuits.
   ===================================================================== */
.cc-i {
  display: inline-block;
  vertical-align: middle;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Panier d'ajout : en mode 'blanc' (défaut back-office, param cart_icon_accent),
   le CADDIE est rendu PLEIN blanc — intérieur du panier REMPLI (fill:currentColor),
   pas un simple contour creux. La règle CTA générique plus haut
   « .cc-wine-card__cart-button svg * { fill:var(--clr-or); stroke:var(--clr-or) } »
   remplit + trace toute la glyphe en or ; on la rejoue en blanc (currentColor du
   bouton, fill ET stroke) → caddie plein blanc identique en forme au caddie or, mais
   blanc. L'accent « + » se retrouve noyé dans le remplissage blanc → invisible (ce
   qui règle aussi le « + parasite » : plus de croix qui ressort). Exception ASSUMÉE
   et PÉRIMÉTRÉE à la règle « NE PAS cibler .cc-i path » : scope STRICT à
   .cc-i--ajouter-panier, jamais une autre icône (accents cuits des autres icônes
   intacts). Mode 'or' = aucune règle, caddie plein or d'origine conservé. Couvre
   aussi le bouton reconstruit en JS (scripts/cart-drawer.js) qui porte la classe. */
body.cc-carticon-blanc .cc-i--ajouter-panier,
body.cc-carticon-blanc .cc-i--ajouter-panier * { fill: currentColor; stroke: currentColor; }

/* Mode 'blanc' — étend l'accent blanc à la CONFIRMATION d'ajout au panier.
   (1) Caddie de succès « ✓ Ajouté ! » (.cc-i--panier injecté par
       scripts/cart-drawer.js dans le bouton --success) : ce bouton est TOUJOURS
       sur fond encre (carte = --clr-ink, fiche = --clr-ink-dark) ; la règle CTA
       générique « .cc-wine-card__cart-button svg * { fill/stroke:var(--clr-or) } »
       peint le caddie en or → on le rejoue PLEIN blanc (currentColor du bouton
       = #fff), cohérent avec le caddie .cc-i--ajouter-panier ci-dessus. Scope
       strict à --success → l'icône panier du header (.cc-i--panier aussi) reste
       intacte.
   (2) Coche « Maximum au panier » : depuis l'alignement encre (retour Thomas),
       TOUS les états max sont sur fond encre — cartes (.wc-actions), fiche vin
       (.vin-cart-row) ET buy-bar mobile (.mb-max). La coche, peinte en or par la
       même règle CTA, passe blanc partout. (Plus de « limite crème » : l'ancien
       fond beige clair a disparu.) Mode 'or' = aucune règle, coche or conservée
       sur fond encre (lisible). */
body.cc-carticon-blanc .cc-wine-card__cart-button--success .cc-i--panier,
body.cc-carticon-blanc .cc-wine-card__cart-button--success .cc-i--panier *,
body.cc-carticon-blanc .cc-wine-card__cart-button--maxed .cc-wc-maxed-ic .cc-i,
body.cc-carticon-blanc .cc-wine-card__cart-button--maxed .cc-wc-maxed-ic .cc-i *,
body.cc-carticon-blanc .mb-max .cc-wc-maxed-ic .cc-i,
body.cc-carticon-blanc .mb-max .cc-wc-maxed-ic .cc-i * { fill: currentColor; stroke: currentColor; }

/* =====================================================================
   GALERIE — re-skin façon caviste premium (réf. Lavinia/Twil, captures
   Playwright 2026-06-09). Scope = surfaces portant la classe .cc-gallery :
   les sections produits de l'accueil (Coups de cœur, Nouveautés, Dernières
   bouteilles) ET les résultats du catalogue (.cc-results). Cartes SANS
   cadre, bouteilles sur blanc (pas d'ombre au sol), séparateurs verticaux
   en filet, prix bordeaux, filet avant le prix, bouton « Ajouter » en
   contour ; sélecteur de quantité conservé. Cas SOLDÉ géré (prix promo
   en encre + ancien prix barré, produits par le markup .wc-price-old).
   La fiche producteur et les vins liés (sans .cc-gallery) gardent la boîte.
   ===================================================================== */

/* Surfaces en blanc (annule le crème .bg-alt / le fond de page). */
.section-products.cc-gallery { background: #fff; }
.cc-results.cc-gallery { background: #fff; }

/* Carte : on retire la « boîte » (cadre, ombre, arrondi). Fond blanc opaque
   conservé pour masquer les séparateurs sauf dans l'interstice voulu. */
.cc-gallery .wine-card { border: 0; border-radius: 0; box-shadow: none; background: #fff; }

/* Séparateurs verticaux fins entre colonnes — portés par une OMBRE PORTÉE à
   gauche de chaque carte (n'affecte pas la mise en page). Colonnes jointives
   (column-gap:0) ; le filet de la 1re colonne déborde à gauche et est rogné
   par overflow:hidden → aucun cadre extérieur. Robuste quel que soit le
   nombre de colonnes (1→5) et avec une dernière rangée incomplète (pas de
   bloc coloré dans les cases vides). Les rangées sont espacées (row-gap),
   sans filet horizontal. */
.cc-gallery .wines-grid,
.cc-gallery ul.liste-vins.cc-wine-grid {
  overflow: hidden; column-gap: 0; row-gap: 26px; background: transparent;
}
.cc-gallery .wine-card { box-shadow: -1px 0 0 var(--c-line); transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, border-color .25s ease; }
/* Survol « lift + ombre » sur TOUTES les surfaces galerie (accueil, catalogue,
   appellation, producteur, vins liés, cross-sell) — gardé pour le mode lift (C).
   En mode B+ (défaut), le survol crème/liséré générique .cc-cardhover-bplus
   .wine-card:hover s'applique aussi à la galerie (pas de re-lift ici). */
@media (hover: hover) { .cc-cardhover-lift .cc-gallery .wine-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(36,26,18,0.13); } }   /* pt13d — cf. pt11-survol-tactile */

/* Photo : fond blanc (annule le dégradé crème), pas d'ombre au sol. */
.cc-gallery .wine-card .wc-photo { background: #fff; }

/* Filet fin avant le bloc prix (réf. Lavinia). */
.cc-gallery .wine-card .wc-pricerow { border-top: 1px solid var(--c-line); padding-top: 12px; }

/* Prix en or ; le cas SOLDÉ passe le prix en encre (#5 retours 22/06-2, plus de rouge) + ancien prix barré gris. */
.cc-gallery .wine-card .wc-price-now { color: var(--clr-or-text); }
.cc-gallery .wine-card .wc-price-now.is-promo { color: var(--c-ink); }

/* Bouton « Ajouter » : plein bordeaux en permanence (pas de variation au survol). */
.cc-gallery .wine-card .wc-actions .cc-wine-card__cart-button.btn-cart,
.cc-gallery .wine-card .wc-actions .cc-wine-card__cart-button.btn-cart:hover,
.cc-gallery .wine-card .wc-actions .cc-wine-card__cart-button.btn-cart:focus-visible {
  background: var(--clr-ink); color: #fff; border: 1.5px solid var(--clr-ink);
}
.cc-gallery .wine-card .wc-actions .cc-wine-card__cart-icon { color: inherit; }

/* ============================================================
   REFONTE ACCUEIL 2026-06-14 — en-têtes « sobre premium »,
   bloc B (Explorer), bloc C (Conseil), vignerons allégé.
   Tout est scopé sous #homepage-content pour éviter toute
   collision avec les classes génériques (.section-title…).
   ============================================================ */

/* ---- En-têtes de section « sobre premium » ---- */
#homepage-content .cc-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 0 0 28px; border: 0; padding: 0; flex-wrap: wrap; }
#homepage-content .cc-kick { display: block; font-family: var(--ff-body); font-weight: 700; text-transform: uppercase; letter-spacing: 2.5px; font-size: 11px; color: var(--clr-or-text); margin: 0 0 9px; }
#homepage-content .cc-sec-title { font-family: var(--ff-title); font-weight: 700; font-size: 27px; color: #2a1015; line-height: 1; position: relative; padding-bottom: 12px; }
#homepage-content .cc-sec-title::after { content: ''; position: absolute; left: 0; bottom: 0; width: 46px; height: 3px; background: var(--clr-gold); border-radius: var(--radius-s); }
#homepage-content .cc-see-all { font-weight: 600; font-size: 13.5px; color: var(--clr-or-text); white-space: nowrap; }
@media (max-width: 820px) { #homepage-content .cc-sec-title { font-size: 22px; } }

/* ---- Bloc B : Explorer par appellation ---- */
#homepage-content .cc-explore { padding: 54px 0; background: #fff; }
#homepage-content .cc-regions { display: flex; gap: 16px; }
#homepage-content .cc-region { position: relative; flex: 1; border-radius: var(--radius-m); min-height: 172px; color: #fff; display: flex; flex-direction: column; justify-content: flex-end; padding: 22px; overflow: hidden; text-decoration: none; transition: transform .2s, box-shadow .2s; }
@media (hover: hover) { #homepage-content .cc-region:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(36,26,18,.18); } }   /* pt13d — cf. pt11-survol-tactile */
#homepage-content .cc-region-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
#homepage-content .cc-region::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(20,5,8,.82) 0%, rgba(20,5,8,.30) 45%, rgba(20,5,8,.05) 100%); }
#homepage-content .cc-region b { position: relative; z-index: 2; font-family: var(--ff-title); font-size: 20px; font-weight: 700; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.55); }
#homepage-content .cc-region span { position: relative; z-index: 2; font-size: 12.5px; color: #f1e3d8; margin-top: 3px; }
#homepage-content .cc-region .cc-region-badge { position: absolute; top: 12px; left: 12px; z-index: 2; width: auto; margin: 0; background: rgba(255,255,255,.92); color: var(--clr-or-text); font-weight: 700; font-size: 11px; padding: 4px 10px; border-radius: 20px; }
#homepage-content .cc-region--nord { background: linear-gradient(135deg, #2a1015 0%, var(--clr-ink-dark) 60%, var(--clr-ink-dark) 100%); }
#homepage-content .cc-region--sud  { background: linear-gradient(135deg, var(--clr-ink) 0%, var(--clr-ink) 55%, #c0612f 100%); }
#homepage-content .cc-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
#homepage-content .cc-chip { background: var(--clr-bg-light); border: 1px solid #e7dcc6; color: #5a4f40; font-weight: 600; font-size: 13px; padding: 8px 15px; border-radius: 22px; text-decoration: none; transition: border-color .2s, color .2s; }
@media (hover: hover) { #homepage-content .cc-chip:hover { border-color: var(--clr-or); color: var(--clr-or-text); } }   /* pt13d — cf. pt11-survol-tactile */
@media (max-width: 820px) { #homepage-content .cc-regions { flex-direction: column; } }

/* ---- Bloc C : Le conseil du caviste ---- */
#homepage-content .cc-advice { background: var(--clr-bg-light); }
#homepage-content .cc-advice .container { display: flex; align-items: stretch; min-height: 260px; gap: 0; padding-left: 0; padding-right: 0; }
#homepage-content .cc-advice-pic { flex: 0 0 38%; background: linear-gradient(120deg, rgba(36,26,18,.35), rgba(36,26,18,.25)), url('/img/v4/hero-vignes-rhone.jpg'); background-size: cover; background-position: center; }
#homepage-content .cc-advice-pic--bottle { background: var(--clr-bg-light); display: flex; align-items: center; justify-content: center; padding: 24px 16px; text-decoration: none; }
/* Bouteille « conseil du caviste » : on CAPE l'image (retour Thomas 20260622-3
   #9). L'ancien width/height:100% la faisait s'étirer à la hauteur du corps
   (cellule flex en align stretch) → bouteille démesurée (« le monstre »). On
   laisse width/height auto + max-height pour la cadrer proprement, centrée. */
#homepage-content .cc-advice-pic--bottle img { width: auto; height: auto; max-width: 100%; max-height: 260px; object-fit: contain; mix-blend-mode: multiply; display: block; }
#homepage-content .cc-advice-body { flex: 1; padding: 42px 50px; }
#homepage-content .cc-advice-quote { font-family: var(--ff-title); font-size: 21px; font-weight: 600; color: #2a1015; line-height: 1.4; margin: 8px 0 12px; max-width: 560px; }
/* #7 (Thomas 05/07) — guillemets « conseil du caviste » plus sobres : plus petits
   et atténués (étaient 42px doré plein, jugés trop voyants). */
#homepage-content .cc-advice-mark { font-family: var(--ff-script); color: var(--clr-or-text); opacity: .5; font-size: 26px; line-height: 0; vertical-align: -3px; margin-right: 3px; }
/* #10 (Thomas 20260702) — guillemet fermant symétrique : même fioriture dorée que l'ouvrant, marge inversée (colle au dernier mot). */
#homepage-content .cc-advice-mark--close { margin-right: 0; margin-left: 4px; }
#homepage-content .cc-advice-who { font-size: 13px; color: #8a7d6c; font-style: italic; margin: 0 0 20px; }
#homepage-content .cc-advice-wine { display: flex; align-items: center; gap: 14px; border-top: 1px solid #e6ddca; padding-top: 18px; max-width: 560px; flex-wrap: wrap; }
#homepage-content .cc-advice-wn { font-family: var(--ff-title); font-weight: 700; font-size: 14px; color: #2a1015; }
#homepage-content .cc-advice-wn a { color: inherit; text-decoration: none; }
#homepage-content .cc-advice-wn a:hover { text-decoration: underline; }
#homepage-content .cc-advice-wa { font-size: 12px; color: #9a8f80; }
#homepage-content .cc-advice-wprice { margin-left: auto; font-family: var(--ff-title); font-weight: 700; color: var(--clr-or-text); font-size: 18px; }
#homepage-content .cc-advice-cta { padding: 9px 18px; font-size: 13.5px; }
@media (max-width: 820px) {
  #homepage-content .cc-advice .container { flex-direction: column; }
  #homepage-content .cc-advice-pic { flex: 0 0 170px; }
  /* Variante bouteille : cellule à hauteur de contenu (pas la bande fixe 170px
     de l'image de fond) + image capée pour rester cadrée sur mobile (#9). */
  #homepage-content .cc-advice-pic--bottle { flex: 0 0 auto; padding: 20px 16px; }
  #homepage-content .cc-advice-pic--bottle img { max-height: 190px; }
  #homepage-content .cc-advice-body { padding: 28px 22px; }
  #homepage-content .cc-advice-wprice { margin-left: 0; }
}

/* ---- Carrousel vignerons (compaction sur l'accueil) ---- */
#homepage-content .vignerons-section { padding: 38px 0; }

/* Retour Thomas 15/06 #1 — l'en-tête vignerons porte .container ET .cc-sec-head ;
   ma règle #homepage-content .cc-sec-head (padding:0 / margin:0) écrasait le
   centrage+padding du .container (spécificité avec #id), d'où le titre collé
   à gauche / rogné. On restaure le comportement conteneur pour CET en-tête. */
#homepage-content .vignerons-header.cc-sec-head { max-width: var(--max-width); margin: 0 auto 28px; padding: 0 24px; }

/* ---- Bandeaux vérification e-mail — migrés sur la primitive .cc-msg (pt16, retours 0718) ----
   L'ancien .cc-verify-banner (ambre en dur) est retiré : « Vérifiez » = .cc-msg--warn
   (attention encre), « Lien renvoyé »/« Compte créé » = .cc-msg--ok (succès or).
   Restent deux sous-éléments propres à ces bandeaux, portés par .cc-msg__txt : */
.cc-msg__mail{color:var(--clr-ink);font-weight:700}
.cc-msg__act{margin-top:7px}
.cc-msg__act a{color:var(--clr-or-text);font-weight:700;text-decoration:underline;text-underline-offset:2px;font-size:13px}

/* ============================================================================
   Finitions catalogue / appellations (revue design 2026-06-15) — voir
   .mobile-review/revue-catalogue-2026-06-15. Items #2 #3 #5 #6 #7 #9.
   ========================================================================== */

/* #9 — Pastille couleur des vins BLANCS : or doux #E8C24A (décision Thomas),
   aligné sur la pastille du menu de filtres. On ne touche PAS --wine-accent
   (qui colore le TEXTE de l'appellation, contraste AA) : override du SEUL dot. */
.wine-card.wc-blanc .wc-dot { background: #E8C24A; }

/* #2 — Repli « photo à venir » : remplit la cellule au lieu d'un trou blanc. */
/* Sélecteur volontairement à 3 classes (.wine-card .wc-photo .wc-photo-empty)
   pour battre « .wine-card .wc-photo a » (ligne ~7112, align-items:flex-end) qui,
   avec son sélecteur de type, l'emportait sinon et collait la mention à droite.
   Parent .wc-photo aligne en bas (flex-end, pour poser les bouteilles) → un enfant
   en flux normal était décentré. Absolute inset:0 remplit la cellule (parent
   position:relative) et centre exactement icône + mention. */
.wine-card .wc-photo .wc-photo-empty {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; text-decoration: none; color: #b9ae97;
}
.wine-card .wc-photo-empty .wine-color-emoji { font-size: 0; align-self: center; }
.wine-card .wc-photo-empty .wine-color-emoji svg { width: 54px; height: 54px; color: #cbb27a; opacity: .85; }
.wine-card .wc-photo-empty__lbl { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #b9ae97; }

/* #3 — Pastille couleur réintégrée dans les chips de facette (ex. « Blanc »). */
.chip-filtre .chip-dot {
  width: 11px; height: 11px; border-radius: 50%; flex: none; margin-right: 7px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.14);
}

/* #5 — Mesure de lecture de l'éditorial appellation bornée en desktop (le mobile
   est déjà géré par le repli « Voir plus »). ~66 caractères. */
@media (min-width: 1024px) {
  .cc-cat-title .cc-cat-desc { max-width: 66ch; }
}

/* #6 — Chevrons/flèches en icônes maison (cc_icon) au lieu de glyphes Unicode. */
.cc-pill-chevron { display: inline-flex; align-items: center; line-height: 0; }
.cc-pill-chevron .cc-i { width: 13px; height: 13px; }
.cc-tri-opt { display: inline-flex; align-items: center; justify-content: center; }
.cc-tri-opt .cc-i { width: 13px; height: 13px; }
.cc-tri-opt .cc-chev-up { transform: rotate(180deg); }

/* #7 — « Appellations : » : libellé insécable (fini le deux-points orphelin sur mobile). */
.cc-subrayons__label { white-space: nowrap; }

/* ===== Contrôle de disponibilité — overlay panier (#37/#38 ; #4 pleine largeur) =====
   Le manque « stock insuffisant » adopte la primitive Direction A .cc-msg--warn
   (carte blanche + filet or + pastille encre) et s'étend sur TOUTE la largeur de
   la ligne : rendu en frère direct de .cart-drawer-item (flex-wrap) → flex-basis
   100 %. Sizing resserré pour le contexte compact du tiroir ; le bouton
   « J'ai compris » reste à droite, centré verticalement. */
.cart-drawer-warn.cc-msg{flex:0 0 100%;margin:10px 0 2px;padding:11px 13px;gap:10px}
.cart-drawer-warn .cc-msg__coin{width:26px;height:26px}
.cart-drawer-warn .cc-msg__lead{font-size:13px}
.cart-drawer-warn .cc-msg__body{font-size:12.5px}
.cart-drawer-warn .cdw-btn{flex:0 0 auto;align-self:center;margin-top:0}
.cart-drawer-warn .qty-was{color:#a9a298;text-decoration:line-through;font-weight:600}
.cart-drawer-warn .qty-now{color:var(--clr-or-text);font-weight:700}
.cart-drawer-gone{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:7px;
  font-size:12.5px;color:var(--clr-or-text);font-weight:600}
.cdw-btn,.cdg-btn,.cdn-btn,.cc-cart-ackbtn{display:inline-flex;align-items:center;gap:6px;
  border-radius:var(--radius-s);padding:6px 14px;font-size:12px;font-weight:700;cursor:pointer;
  font-family:'Montserrat',Arial,sans-serif;margin-top:9px}
.cdw-btn,.cc-cart-ackbtn{border:1px solid var(--clr-ink);background:var(--clr-ink);color:#fff}
.cdg-btn{border:1px solid var(--c-border-input);background:#fff;color:var(--c-text-strong)}
.cart-drawer-news{margin:10px 16px;background:#F4F7F1;border:1px solid #D6E2CF;
  box-shadow:inset 3px 0 0 #6f8f63;border-radius:var(--radius-m);padding:11px 13px;position:relative}
.cart-drawer-news .cdn-top{display:flex;align-items:flex-start;gap:8px}
.cart-drawer-news .cdn-ico{color:#6f8f63;flex:0 0 auto;margin-top:1px}
.cart-drawer-news .cdn-msg{font-size:12.5px;color:var(--c-text-strong);line-height:1.45;flex:1}
.cart-drawer-news .cdn-btn{border:1px solid var(--c-border-input);background:#fff;color:var(--c-text-strong);margin-top:9px}
.cart-drawer-news .cdn-decline{position:absolute;top:8px;right:10px;border:0;background:none;
  cursor:pointer;color:#bcb4a6;padding:2px}
.cart-drawer-ghost{opacity:.85}
.cart-drawer-ghost .cart-drawer-thumb{filter:grayscale(.4);opacity:.75}   /* #28 : vraie photo estompée mais reconnaissable */
.cart-drawer-ghost .cart-drawer-name{color:#8d877d}
/* Proposition de remontée — accolée à la ligne (#37/#38) */
.cart-drawer-up{display:flex;align-items:flex-start;gap:8px;margin-top:10px;
  background:#F4F7F1;border:1px solid #D6E2CF;box-shadow:inset 3px 0 0 #6f8f63;
  border-radius:var(--radius-m);padding:9px 11px}
.cart-drawer-up .cdu-ico{color:#6f8f63;flex:0 0 auto;margin-top:1px}
.cart-drawer-up .cdu-body{flex:1;min-width:0}
.cart-drawer-up .cdu-msg{font-size:12.5px;color:var(--c-text-strong);line-height:1.45}
.cart-drawer-up .qty-from{color:#a9a298;font-weight:600}
.cart-drawer-up .qty-to{color:#4d6b3f;font-weight:700}
.cart-drawer-up .cdu-btn{display:inline-flex;align-items:center;gap:6px;border-radius:var(--radius-s);/* #15 : 999px→3px */
  padding:6px 14px;font-size:12px;font-weight:700;cursor:pointer;font-family:'Montserrat',Arial,sans-serif;
  border:1px solid #6f8f63;background:#6f8f63;color:#fff;margin-top:9px}
/* Verrou « Commander » */
.cart-drawer-cta.is-locked,.is-locked.cart-drawer-cta{background:#d8c7cc !important;cursor:not-allowed}

/* Carte « commande mise en avant » (espace compte recentré 2026-06-21) */
.cc-hl{border:1px solid var(--c-border-struct);border-top:3px solid var(--c-accent);border-radius:var(--radius-m);background:var(--c-surface);padding:20px 22px;margin:0 0 22px}
.cc-hl--wa{border-top-color:var(--fb-wa-tx)}
.cc-hl--in{border-top-color:var(--fb-in-bd)}
.cc-hl-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.cc-hl-num{font-size:17px;font-weight:700;color:var(--c-ink)}
.cc-hl-meta{font-size:13px;color:var(--c-text);margin-top:3px}
.cc-hl-right{text-align:right}
.cc-hl-amt{font-size:18px;font-weight:700;color:var(--c-ink);margin-bottom:6px}
.cc-hl-msg{margin:14px 0 4px;font-size:14px;color:var(--c-text-strong)}
.cc-hl-reminder{margin-top:12px;background:var(--c-bg-soft);border:1px solid var(--c-line);border-radius:var(--radius-s);padding:11px 14px;font-size:13px;color:var(--c-text)}
.cc-hl-reminder b{color:var(--c-ink)}
.cc-hl-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.cc-hl-detail{margin-top:16px;border-top:1px solid var(--c-line);padding-top:8px}
/* Frise de suivi */
.cc-step{display:flex;margin:20px 0 4px}
.cc-step .cc-s{flex:1;text-align:center;position:relative;font-size:11.5px;color:var(--c-text)}
.cc-step .cc-s::before{content:"";position:absolute;top:6px;left:-50%;width:100%;height:2px;background:var(--c-line)}
.cc-step .cc-s:first-child::before{display:none}
.cc-step .cc-s .cc-d{width:13px;height:13px;border-radius:50%;background:var(--c-surface);border:2px solid var(--c-line);margin:0 auto 7px;position:relative;z-index:1;display:block}
.cc-step .cc-s.done .cc-d{background:var(--c-accent);border-color:var(--c-accent)}
.cc-step .cc-s.done::before{background:var(--c-accent)}
.cc-step .cc-s.done{color:var(--c-text-strong)}
.cc-step .cc-s.now{color:var(--c-ink);font-weight:700}
.cc-step .cc-s.now .cc-d{background:var(--c-ink);border-color:var(--c-ink);box-shadow:0 0 0 3px rgba(36,26,18,.12)}
@media(max-width:640px){.cc-step .cc-s{font-size:10.5px}}
/* Ma cagnotte — refonte sobre (2026-06-21) */
/* Carte « Solde disponible » (Ma cagnotte) — direction « encre & or » (validée Thomas
   18/07) : c'est le moment-vitrine de la fidélité → traitement premium encre + montant
   doré, langue de marque (spec 2026-06-20). Le bandeau du tunnel, lui, reste en filet or
   (rappel inline discret) — hiérarchie voulue. Refonte CSS pure, markup inchangé. */
.cc-cag-solde{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;background:linear-gradient(135deg,var(--clr-ink) 0%,var(--clr-ink-dark) 100%);border:1px solid color-mix(in srgb,var(--clr-or) 30%,transparent);border-radius:var(--radius-m);padding:18px 22px;margin:0 0 8px;box-shadow:0 2px 10px color-mix(in srgb,var(--clr-ink) 12%,transparent)}
.cc-cag-lbl{font-size:12.5px;color:var(--clr-textsoft-on-ink);text-transform:uppercase;letter-spacing:.6px;font-weight:600}
.cc-cag-val{font-size:26px;font-weight:700;color:var(--clr-or-on-ink);margin-top:2px}
.cc-cag-explain{flex:1;min-width:240px;font-size:13px;color:var(--clr-text-on-ink);border-left:1px solid color-mix(in srgb,#fff 16%,transparent);padding-left:20px}
.cc-cag-explain b{color:var(--clr-or-on-ink)}
.cc-cag-histh{font-size:13px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--c-text);margin:26px 0 10px}
.cc-cag-ledger{border:1px solid var(--c-line);border-radius:var(--radius-m);overflow:hidden}
/* #41 (retours 20260702) — récap cagnotte « plus pro » : lignes resserrées,
   liens non soulignés en permanence (soulignés au survol seulement, plus de
   « liste de liens » legacy), montant en colonne à largeur fixe + slot « flag »
   toujours présent pour que les montants s'alignent quelle que soit la pilule. */
.cc-cag-row{display:flex;align-items:center;gap:14px;padding:11px 18px;border-top:1px solid var(--c-line);font-size:14px}
.cc-cag-row:first-child{border-top:none}
.cc-cag-title{flex:1;min-width:0;color:var(--c-text-strong)}
.cc-cag-title a{color:var(--c-text-strong);text-decoration:none}
.cc-cag-title a:hover,.cc-cag-title a:focus-visible{color:var(--clr-or-text);text-decoration:underline}
.cc-cag-amt{flex:0 0 auto;min-width:76px;text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.cc-cag-amt.gain{color:var(--green)}
.cc-cag-amt.spent{color:var(--red)}
.cc-cag-flag{flex:0 0 92px;display:flex;justify-content:flex-end}
/* #41 (retours 20260702) — la pilule pleine beige (fond + bordure + coins 20px)
   faisait « jeu ». On reprend le vocabulaire des statuts de commande (.order-status,
   l.1356) : fond transparent, puce ::before + libelle capitales, couleur semantique
   doree (= « a payer », la cagnotte etant en attente du reglement de la commande). */
.cc-cag-pend{display:inline-flex;align-items:center;gap:6px;padding:0;background:none;border:0;border-radius:0;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--clr-or-text);white-space:nowrap}
.cc-cag-pend::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
/* Préférences — cases à cocher sobres (remplacent les toggles iOS) */
.pref-check{flex:none;margin-top:2px;display:inline-flex}
/* pt4 : `accent-color` retiré (mort — cases dénativées par appearance:none, cf. l.1474) ;
   la teinte encre vient de la règle globale, il ne reste ici que la taille. */
.pref-check input{width:19px;height:19px;cursor:pointer}
.cc-cag-tip{margin-top:12px;font-size:12.5px;color:var(--c-text)}

/* ═══════════════════════════════════════════════════════════════════════════
   PRIX BARRÉ EN DIAGONALE — idiome unique  (marqueur : cc-barre-diagonale)
   Recette 28/07 R1 : « c'est super pixellisé le prix barré en diagonal ».
   ─────────────────────────────────────────────────────────────────────────
   CAUSE de l'escalier : le pt6 traçait la diagonale avec un linear-gradient à
   BUTÉES FRANCHES (transparent → currentColor sur 0 px). Un dégradé est évalué
   par pixel le long de son axe : une butée franche donne un pixel entièrement
   encré ou entièrement vide, JAMAIS d'encre partielle — donc aucun
   anticrénelage. Mesuré sur un banc de rendu à DPR 1, trait seul sur fond
   blanc : dégradé = 0 % de pixels d'encre partielle (58 pixels, tous pleins),
   tracé SVG = 73 % (94 pixels dont 69 partiels). Le « / » d'un vrai glyphe,
   lui, est anticrénelé — d'où le contraste qui saute aux yeux sur la capture.
   ─────────────────────────────────────────────────────────────────────────
   REMPLAÇANT (arbitrage Thomas 28/07) : un <line> SVG, choisi sur banc contre
   un dégradé adouci et un trait de 1 px tourné en `transform`.
   · preserveAspectRatio='none' étire le viewBox 40×14 sur la boîte réelle → le
     trait relie les deux coins quelle que soit la largeur du nombre, sans le
     moindre angle à calculer (c'est la seule propriété du dégradé qu'on tenait
     à conserver : rien ne casse à 10 px sur mobile) ;
   · vector-effect='non-scaling-stroke' garde l'épaisseur constante malgré cet
     étirement non uniforme — sans lui le trait maigrirait sur les prix longs ;
   · posé en MASQUE et non en fond : l'encre vient de background-color:
     currentColor, donc le trait suit la couleur du prix (#999 sur la carte
     catalogue, #a59c8c sur la fiche vin, #555 sur la carte legacy). Un SVG en
     background-image aurait imposé une teinte CUITE dans le data-URI, donc
     fausse sur au moins deux des trois surfaces, et une valeur en dur de plus.
   ─────────────────────────────────────────────────────────────────────────
   REPLI : hors @supports (masques non gérés), on garde text-decoration:
   line-through — le barré redevient horizontal, ce qui est dégradé mais juste.
   Sans ce garde-fou, un navigateur sans masques peindrait le ::after en
   currentColor PLEIN, soit un rectangle opaque en travers du prix.
   ⚠️ Ce bloc doit rester APRÈS les règles de chaque surface : il les bat par
   la position, à spécificité égale. Ne pas le remonter dans la feuille.
   ═══════════════════════════════════════════════════════════════════════════ */
.wine-card .wc-price-old,
.vin-price-old,
.cc-wine-card__price .prix_normal,
.wine-price .prix_normal {
  position: relative; display: inline-block; text-decoration: line-through;
}
@supports (mask-image: linear-gradient(#000, #000)) or (-webkit-mask-image: linear-gradient(#000, #000)) {
  .wine-card .wc-price-old,
  .vin-price-old,
  .cc-wine-card__price .prix_normal,
  .wine-price .prix_normal { text-decoration: none; }

  .wine-card .wc-price-old::after,
  .vin-price-old::after,
  .cc-wine-card__price .prix_normal::after,
  .wine-price .prix_normal::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 14' preserveAspectRatio='none'><line x1='0' y1='14' x2='40' y2='0' stroke='%23000' stroke-width='1.1' vector-effect='non-scaling-stroke'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 14' preserveAspectRatio='none'><line x1='0' y1='14' x2='40' y2='0' stroke='%23000' stroke-width='1.1' vector-effect='non-scaling-stroke'/></svg>");
    -webkit-mask-size: 100% 100%;         mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;       mask-repeat: no-repeat;
  }
}
/* ═══════════════════════════════════════════════════════════════════════════
   SURVOL EN TACTILE — doctrine  (marqueur : pt11-survol-tactile)
   Retours 28/07 pt11 : « selon comment j'effleure avec mon doigt, la ligne
   devient beige. Ça ne devrait pas. Je pense que ce problème existe à d'autres
   endroits. » — et oui, partout.
   ─────────────────────────────────────────────────────────────────────────
   MÉCANIQUE : sur un écran tactile, :hover n'est pas un survol, c'est un état
   RÉMANENT. Le navigateur le pose sur l'élément touché et l'y laisse jusqu'au
   toucher suivant ailleurs. Une liste dont la ligne s'éclaire au survol garde
   donc une ligne éclairée en permanence après le moindre effleurement — et le
   client la lit comme « sélectionnée », ce qu'elle n'est pas.
   ─────────────────────────────────────────────────────────────────────────
   ⛔ CETTE DOCTRINE N'A PLUS DE LISTE.  (révision 29/07, pt13d)
   La version du 28/07 énumérait ici les surfaces « traitées ». Deux d'entre elles
   ne l'étaient qu'à moitié, et la liste l'a caché pendant vingt-quatre heures :
     · .ban-address-option — le correctif n'avait été posé que sur le sélecteur
       restreint `.cc-relais-inpwrap .ban-address-option` (tunnel.css) ; la règle
       de BASE, ici même, continuait de coller fond crème + doré hors tunnel relais ;
     · a.ccr-line — le fond était enfermé, mais pas la règle voisine qui passait le
       nom du vin au doré, et l'y laissait.
   Une liste tenue à la main dans un commentaire ne se vérifie pas : elle se croit.
   Le recensement vit désormais dans  tests/hover-tactile-cli.php , qui parcourt les
   dix feuilles v4, refuse toute règle :hover nue non inscrite au recensement gelé,
   et refuse tout état clavier enfermé dans un media de survol.
   ─────────────────────────────────────────────────────────────────────────
   LE CRITÈRE (le seul à retenir) : ce n'est pas « est-ce un bouton ou une ligne
   de liste », c'est **est-ce que la surface reste à l'écran après le tap**.
   · ELLE RESTE (ligne de liste, carte de grille, puce de filtre, bascule, stepper,
     œil de mot de passe, case à cocher, action de ligne, panneau qui ne se ferme
     pas) → fond / bordure / ombre / couleur / transform de survol vont sous
     @media (hover: hover).
   · ELLE DISPARAÎT (on navigue, on soumet, on ferme le panneau) → rien à faire :
     le survol rémanent part avec la surface.
   ⚠️ Le « c'est un bouton, on quitte la page dans la foulée » de la v1 était FAUX
   pour tout ce qui agit en AJAX sans naviguer : + Panier des cartes suggérées,
   stepper de quantité, corbeille de ligne. Ces boutons-là restent à l'écran, donc
   ils entrent dans le media. C'est le trou par lequel le pt13d est revenu.
   ─────────────────────────────────────────────────────────────────────────
   CE QUI RESTE VOLONTAIREMENT DEHORS :
   · les états .is-active / .active / .on / .is-selected / :focus-visible /
     :focus-within — navigation clavier ou sélection réelle, ils doivent se voir
     sur TOUS les pointeurs. Les enfermer avec le survol est LE piège : toujours
     SCINDER la règle d'abord, enfermer ensuite. Le harnais le vérifie.
   · les révélations fonctionnelles déjà doublées d'un repli @media (hover: none)
     — .cc-wine-card__actions, .vg-arrow. Les enfermer les rendrait inatteignables
     au doigt.
   · les menus déroulants desktop (#menu … :hover) — invisibles en mobile, où le
     tiroir burger prend le relais.
   · le bandeau cookies (tarteaucitron) — code tiers.
   · les états :active (ex. .dr-link:active, header-mobile.css) — :active se relâche
     au doigt levé, il n'est pas rémanent. Rien à corriger là.
   ⚠️ @media (hover: hover) est vrai sur un portable tactile (le pointeur PRIMAIRE
   y est la souris) : le desktop ne perd rien.
   ═══════════════════════════════════════════════════════════════════════════ */