/*
Theme Name: Limerence Gallery
Theme URI: https://limerencegallery.fr
Author: Limerence Gallery
Description: Thème sur mesure — éditions vestimentaires temporaires. Esthétique de galerie : fond ivoire, Didot, filets fins, angles vifs, whitespace généreux. Prévu pour WooCommerce.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: limerence
Tags: e-commerce, minimal, editorial, custom-menu, translation-ready
WC requires at least: 8.0
*/

/* ==========================================================================
   FEUILLE UNIQUE DU SITE

   Reprend l'intégralité du CSS des maquettes HTML : les blocs <style> de
   chaque page ET les styles en ligne, convertis en classes.

   Sommaire
     01. Jetons
     02. Réinitialisation, base, conteneurs
     03. Typographie
     04. Header
     05. Overlay de menu
     06. Boutons, liens
     07. Formulaires
     08. Carré drop
     09. Accueil
     10. Fiche édition
     11. Panier
     12. Paiement
     13. Compte client
     14. Registre artiste
     15. Assistance
     16. Pages éditoriales et juridiques
     17. Devenir artiste
     18. Footer
     19. Animations
     20. Points de rupture
   ========================================================================== */


/* 01. JETONS ============================================================== */

:root {
	/* couleurs relevées une à une dans les maquettes */
	--lg-bg:            #FAFAFA;
	--lg-bg-pure:       #FFFFFF;
	--lg-ink:           #0A0A0A;
	--lg-body:          #3A3A3A;
	--lg-body-soft:     #525252;
	--lg-mid:           #5C5C5C;
	--lg-muted:         #737373;
	--lg-muted-2:       #8A8A8A;
	--lg-faint:         #A3A3A3;
	--lg-ghost:         #C6C6C6;
	--lg-ghost-2:       #D4D4D4;
	--lg-rule:          #E5E5E5;
	--lg-rule-soft:     #F4F4F4;
	--lg-rule-softer:   #F0F0F0;
	--lg-plate:         #F1F0EE;
	--lg-plate-2:       #EFEEEC;
	--lg-plate-3:       #EDECEA;
	--lg-header-bg:     rgba(255, 255, 255, .86);
	--lg-bar-bg:        rgba(255, 255, 255, .94);

	--lg-serif: 'GFS Didot', 'Times New Roman', serif;
	--lg-sans:  'Helvetica Neue', Helvetica, 'Segoe UI', sans-serif;
	--lg-mono:  ui-monospace, Menlo, monospace;

	--lg-side:      clamp(16px, 3vw, 40px);
	--lg-header-h:  72px;
	--lg-sticky:    104px;

	--lg-ease:      cubic-bezier(.4, 0, .2, 1);
	--lg-ease-zoom: cubic-bezier(.2, .7, .2, 1);
}


/* 02. BASE ================================================================ */

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

html {
	/* évite le saut de 8 px d'une page à l'autre */
	scrollbar-gutter: stable;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--lg-bg);
	color: var(--lg-ink);
	font-family: var(--lg-sans);
	-webkit-font-smoothing: antialiased;
}

/* fond blanc pur : paiement, connexion, à propos, devenir artiste, registre */
body.lg-pure { background: var(--lg-bg-pure); }

a {
	color: var(--lg-ink);
	text-decoration: none;
	transition: color .25s ease, opacity .25s ease;
}
a:hover { color: var(--lg-muted); }

img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font-family: inherit; }

::selection { background: var(--lg-ink); color: var(--lg-bg-pure); }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* conteneurs de page, un par gabarit */
.lg-page          { padding: clamp(130px,17vh,190px) var(--lg-side) clamp(80px,12vh,140px); max-width: 1500px; margin: 0 auto; }
.lg-page--legal   { max-width: 1100px; }
.lg-page--support { max-width: 1400px; padding-bottom: clamp(88px,13vh,150px); }
.lg-page--narrow  { max-width: 440px; display: flex; flex-direction: column; gap: clamp(34px,5vh,52px); }
.lg-page--checkout{ max-width: 1320px; }
.lg-page--account { display: flex; flex-wrap: wrap; gap: clamp(32px,4vw,72px); padding: clamp(104px,13vh,136px) var(--lg-side) clamp(70px,10vh,120px); align-items: flex-start; }


/* 03. TYPOGRAPHIE =========================================================

   Compensation optique : tout texte centré à fort interlettrage reçoit un
   margin-left égal à son letter-spacing. Sans cela, l'espace résiduel
   après la dernière lettre décale visuellement le bloc vers la gauche.
   ====================================================================== */

.lg-wordmark {
	font-family: var(--lg-serif);
	font-size: clamp(15px, 1.7vw, 21px);
	font-weight: 400;
	line-height: 1;
	letter-spacing: .2em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* grands titres — Didot fin, interlettrage négatif */
.lg-title      { margin: 0; font-family: var(--lg-serif); font-size: clamp(28px,3.6vw,46px); font-weight: 400; letter-spacing: .03em; line-height: 1.12; }
.lg-title--air { font-weight: 200; letter-spacing: -.015em; font-size: clamp(28px,4vw,52px); }
.lg-title--xl  { font-size: clamp(30px,4.4vw,58px); letter-spacing: .02em; }
.lg-heading    { margin: 0; font-family: var(--lg-serif); font-size: clamp(18px,1.9vw,24px); font-weight: 400; letter-spacing: .03em; line-height: 1.3; }

/* surtitre de section */
.lg-kicker { font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--lg-muted); }
.lg-kicker--xs { font-size: 9px; color: var(--lg-muted-2); }

.lg-lead  { margin: 0; font-size: 13px; font-weight: 300; line-height: 2.1; color: var(--lg-body-soft); text-wrap: pretty; }
.lg-body  { margin: 0; font-size: 13px; font-weight: 300; line-height: 1.9; color: var(--lg-body); text-wrap: pretty; }
.lg-note  { margin: 0; font-size: 12px; font-weight: 300; line-height: 2; color: var(--lg-muted-2); text-wrap: pretty; }
.lg-note--faint { font-size: 11px; line-height: 1.9; color: var(--lg-faint); }

/* paragraphe de récit, sur la fiche édition */
.lg-prose { margin: 0; font-size: clamp(16px,1.4vw,20px); font-weight: 300; line-height: 1.9; letter-spacing: .01em; text-wrap: pretty; }

/* chiffre en Didot */
.lg-figure     { font-family: var(--lg-serif); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.lg-figure--sm { font-size: 15px; }
.lg-figure--md { font-size: clamp(20px,2vw,26px); }
.lg-figure--lg { font-size: clamp(30px,3.4vw,44px); }

/* cartel sous image : — la boîte — */
.lg-caption { font-size: 10px; letter-spacing: .34em; color: var(--lg-muted-2); }

.lg-status { font-size: 9px; font-weight: 300; letter-spacing: .2em; text-transform: uppercase; color: var(--lg-faint); }

/* mention administrative à compléter avant mise en ligne */
.lg-fill { color: var(--lg-faint); font-style: italic; }

/* corps rédigé dans l'éditeur */
.lg-entry p  { font-size: 13px; font-weight: 300; line-height: 2.1; color: var(--lg-body); text-wrap: pretty; }
.lg-entry h2 { font-family: var(--lg-serif); font-weight: 400; letter-spacing: .03em; }
.lg-entry a  { text-decoration: underline; text-underline-offset: 4px; }


/* 04. HEADER ==============================================================

   Trois zones : les latérales en flex 1 1 0, le logo en flex 0 0 auto.
   C'est ce qui garantit son centrage exact au pixel.
   ====================================================================== */

.lg-header {
	position: fixed;
	/* jamais 100vw : la largeur inclurait la barre de défilement */
	top: 0; left: 0; right: 0;
	z-index: 50;
	height: var(--lg-header-h);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 0 var(--lg-side);
	background: var(--lg-header-bg);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--lg-rule);
	color: var(--lg-ink);
}

.lg-header__side { flex: 1 1 0; min-width: 0; display: flex; align-items: center; height: 24px; }
.lg-header__side--right { justify-content: flex-end; gap: clamp(10px,1.6vw,20px); }
.lg-header__logo { flex: 0 0 auto; display: flex; align-items: center; height: 24px; color: var(--lg-ink); }

/* bouton menu : trois filets d'un pixel */
.lg-menu-btn { display: flex; align-items: center; gap: 12px; height: 24px; padding: 0; background: none; border: 0; cursor: pointer; color: var(--lg-ink); transition: opacity .25s ease; }
.lg-menu-btn:hover { opacity: .55; }
.lg-menu-btn__bars { display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 20px; height: 24px; }
.lg-menu-btn__bars i { display: block; height: 1px; width: 20px; background: var(--lg-ink); }
.lg-menu-btn__label { font-size: 11px; line-height: 1; letter-spacing: .22em; text-transform: uppercase; }

/* sortie de l'espace artiste : « Quitter » */
.lg-quit { display: flex; align-items: center; gap: 11px; height: 24px; color: var(--lg-ink); transition: opacity .25s ease; }
.lg-quit:hover { opacity: .55; color: var(--lg-ink); }

/* langues : codes seuls, sans drapeau ni doublon */
.lg-lang { display: flex; align-items: center; gap: 9px; height: 24px; }
.lg-lang button { height: 24px; padding: 0; background: none; border: 0; cursor: pointer; font-size: 10px; line-height: 1; letter-spacing: .2em; color: var(--lg-faint); transition: color .25s ease; }
.lg-lang button:hover, .lg-lang button[aria-current="true"] { color: var(--lg-ink); }
.lg-lang span { font-size: 9px; color: var(--lg-ghost); }

.lg-header__icon { display: flex; align-items: center; gap: 7px; height: 24px; color: var(--lg-ink); line-height: 0; transition: opacity .25s ease; }
.lg-header__icon:hover { opacity: .55; color: var(--lg-ink); }
.lg-header__count { font-size: 10px; line-height: 1; letter-spacing: .14em; color: var(--lg-muted); }

/* mention « paiement sécurisé », masquée sur téléphone */
.lg-secure { display: flex; align-items: center; gap: 10px; height: 24px; }
.lg-secure span { font-size: 10px; line-height: 1; letter-spacing: .2em; text-transform: uppercase; color: var(--lg-muted-2); }


/* 05. OVERLAY DE MENU ===================================================== */

.lg-overlay {
	position: fixed;
	top: 0; left: 0; right: 0;
	height: 100vh;
	z-index: 60;
	display: flex;
	flex-direction: column;
	background: var(--lg-bg-pure);
	animation: lgMenuIn .3s ease both;
}
.lg-overlay[hidden] { display: none; }

/* la barre reprend la trame du header, sinon le logo saute à l'ouverture */
.lg-overlay__bar {
	flex: 0 0 auto;
	height: var(--lg-header-h);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 0 var(--lg-side);
	border-bottom: 1px solid var(--lg-rule);
}

.lg-overlay__nav { flex: 1 1 auto; overflow: auto; display: flex; flex-wrap: wrap; gap: clamp(28px,6vw,90px); padding: clamp(32px,7vh,80px) var(--lg-side); }
.lg-overlay__primary { flex: 1 1 320px; display: flex; flex-direction: column; gap: clamp(10px,2vh,20px); }
.lg-overlay__secondary { flex: 0 1 260px; display: flex; flex-direction: column; gap: clamp(20px,4vh,36px); animation: lgMenuItem .5s ease both .24s; }

/* liens géants, en cascade */
.lg-overlay__link { font-size: clamp(30px,6vw,68px); line-height: 1.05; font-weight: 200; letter-spacing: -.02em; color: var(--lg-ink); animation: lgMenuItem .45s ease both; }
.lg-overlay__link:hover { color: var(--lg-muted); }
.lg-overlay__link:nth-child(1) { animation-delay: .04s; }
.lg-overlay__link:nth-child(2) { animation-delay: .14s; }
.lg-overlay__link:nth-child(3) { animation-delay: .19s; }
.lg-overlay__link:nth-child(4) { animation-delay: .24s; }

.lg-overlay__group { display: flex; flex-direction: column; gap: 14px; }
.lg-overlay__group a { font-size: 13px; }
.lg-overlay__group .lg-lang { height: auto; gap: 14px; }
.lg-overlay__group .lg-lang button { height: auto; font-size: 12px; }
.lg-overlay__group .lg-lang span { font-size: 10px; }


/* 06. BOUTONS ET LIENS ==================================================== */

/* bouton signature : contour fin, fond blanc, inversion au survol */
.lg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 20px 44px;
	background: var(--lg-bg-pure);
	border: 1px solid var(--lg-ink);
	color: var(--lg-ink);
	font-size: 12px;
	font-weight: 300;
	letter-spacing: .22em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .3s ease, color .3s ease;
}
.lg-btn:hover { background: var(--lg-ink); color: var(--lg-bg-pure); }
.lg-btn--block { display: flex; width: 100%; padding: 22px 0; }

/* variante pleine : le bouton d'acquisition de la fiche édition */
.lg-btn--solid { background: var(--lg-ink); color: var(--lg-bg-pure); }
.lg-btn--solid:hover { background: var(--lg-bg-pure); color: var(--lg-ink); }

/* action secondaire */
.lg-link {
	align-self: flex-start;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	font-size: 10px;
	font-weight: 300;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--lg-muted-2);
	text-decoration: underline;
	text-underline-offset: 6px;
	transition: color .25s ease;
}
.lg-link:hover { color: var(--lg-ink); }

/* lien discret dans une ligne de texte */
.lg-link-soft {
	font-size: 11px;
	font-weight: 300;
	letter-spacing: .16em;
	color: var(--lg-faint);
	text-decoration: underline;
	text-decoration-thickness: .5px;
	text-underline-offset: 6px;
}
.lg-link-soft:hover { color: var(--lg-ink); }

/* adresse de courriel : soulignement gris qui se fonce au survol */
.lg-mail {
	align-self: flex-start;
	font-size: 13px;
	letter-spacing: .06em;
	color: var(--lg-ink);
	text-decoration: underline;
	text-underline-offset: 6px;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--lg-ghost);
	transition: text-decoration-color .3s ease, color .3s ease;
}
.lg-mail:hover { color: var(--lg-muted); text-decoration-color: var(--lg-ink); }

/* « Découvrir » du hero */
.lg-discover {
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	color: var(--lg-ink);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: .3em;
	margin-left: .3em;
	text-transform: uppercase;
	text-decoration: underline;
	text-decoration-thickness: .5px;
	text-underline-offset: 9px;
	transition: color .3s ease;
}
.lg-discover:hover { color: var(--lg-muted); }


/* 07. FORMULAIRES — un simple filet bas, jamais de cadre fermé ============ */

.lg-field { display: flex; flex-direction: column; gap: 12px; }
.lg-field__label { font-size: 10px; font-weight: 300; letter-spacing: .16em; text-transform: uppercase; color: var(--lg-muted-2); }

.lg-input, .lg-select, .lg-textarea,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--lg-rule);
	padding: 12px 0;
	color: var(--lg-ink);
	font-size: 14px;
	font-weight: 300;
	letter-spacing: .02em;
	outline: none;
	transition: border-color .3s ease;
}
.lg-input:focus, .lg-select:focus, .lg-textarea:focus,
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus { border-bottom-color: var(--lg-ink); }

.lg-input::placeholder, .lg-textarea::placeholder { color: var(--lg-ghost); font-weight: 300; }
.lg-select { cursor: pointer; }
.lg-textarea { line-height: 2; resize: vertical; }

.lg-field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 26px 40px; }

/* libellés WooCommerce alignés sur les nôtres */
.woocommerce form .form-row { display: flex; flex-direction: column; gap: 12px; margin: 0 0 26px; }
.woocommerce form .form-row label { font-size: 10px; font-weight: 300; letter-spacing: .16em; text-transform: uppercase; color: var(--lg-muted-2); }

/* case à cocher : la case native est masquée, l'état se lit sur un filet */
.lg-check { display: flex; align-items: center; gap: 14px; cursor: pointer; }
.lg-check input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.lg-check__mark { display: block; width: 22px; height: 1px; background: var(--lg-rule); transition: background .3s ease; }
.lg-check__text { font-size: 11px; font-weight: 300; letter-spacing: .16em; color: var(--lg-muted-2); transition: color .3s ease; }
.lg-check:hover .lg-check__text { color: var(--lg-body-soft); }
.lg-check:has(input:checked) .lg-check__mark { background: var(--lg-ink); }
.lg-check:has(input:checked) .lg-check__text { color: var(--lg-ink); }

/* choix souligné : certification des droits, dossier artiste */
.lg-opt { display: flex; align-items: baseline; gap: 14px; cursor: pointer; color: var(--lg-faint); font-weight: 300; transition: color .25s ease; }
.lg-opt input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.lg-opt:hover { color: var(--lg-body-soft); }
.lg-opt:has(input:checked) { color: var(--lg-ink); font-weight: 400; }
.lg-opt:has(input:checked) .lg-opt__name { text-decoration: underline; text-decoration-thickness: .5px; text-underline-offset: 7px; }


/* 08. CARRÉ DROP ==========================================================

   Le motif de l'artiste occupe tout le cadre. Aucun cadre, aucun coin
   arrondi : @ de l'artiste en bas à gauche, drapeau en bas à droite.
   ====================================================================== */

.lg-drop {
	position: relative;
	display: block;
	height: 100%;
	overflow: hidden;
	cursor: pointer;
	background-color: var(--lg-plate);
	background-size: 104% 104%;
	background-position: center;
	color: var(--lg-ink);
	transition: background-size 1s var(--lg-ease-zoom), filter .6s ease;
}
.lg-drop:hover { background-size: 112% 112%; color: var(--lg-ink); }

/* rétrospective : pièce clôturée, non acquérable */
.lg-drop--muted { filter: saturate(.35) contrast(.94) opacity(.62); }
.lg-drop--muted:hover { filter: none; }

/* repère en attente de la photographie de l'artiste */
.lg-drop__ph {
	position: absolute;
	top: 50%; left: 0; right: 0;
	transform: translateY(-50%);
	text-align: center;
	font-family: var(--lg-mono);
	font-size: 9px;
	letter-spacing: .24em;
	color: rgba(10, 10, 10, .26);
}

.lg-drop__handle {
	position: absolute;
	bottom: clamp(16px,2vw,22px);
	left: clamp(18px,2.2vw,26px);
	max-width: 58%;
	font-size: 12px;
	letter-spacing: .06em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.lg-drop__flag { position: absolute; bottom: clamp(16px,2vw,22px); right: clamp(18px,2.2vw,26px); display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.lg-drop__tag  { position: absolute; top: clamp(16px,2vw,22px); right: clamp(18px,2.2vw,26px); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--lg-mid); }
.lg-drop__sales{ position: absolute; top: clamp(16px,2vw,22px); left: clamp(18px,2.2vw,26px); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--lg-mid); }

/* drapeaux dessinés en aplats sobres — cinq territoires, jamais d'emoji */
.lg-flag { display: block; width: 21px; height: 14px; background-size: 100% 100%; box-shadow: 0 0 0 .5px rgba(10, 10, 10, .28); }
.lg-flag--fr { background-image: linear-gradient(90deg, #16305F 0 33.34%, #F7F5F0 33.34% 66.67%, #A8202F 66.67%); }
.lg-flag--de { background-image: linear-gradient(180deg, #17181A 0 33.34%, #A8202F 33.34% 66.67%, #D2A526 66.67%); }
.lg-flag--es { background-image: linear-gradient(180deg, #A8202F 0 25%, #D2A526 25% 75%, #A8202F 75%); }
.lg-flag--it { background-image: linear-gradient(90deg, #2F6B4F 0 33.34%, #F7F5F0 33.34% 66.67%, #A8202F 66.67%); }
.lg-flag--pt { background-image: linear-gradient(90deg, #2F6B4F 0 40%, #A8202F 40%); }


/* 09. ACCUEIL ============================================================= */

.lg-hero { position: relative; height: 100svh; min-height: 560px; overflow: hidden; background: #F1F1F1; }

/* la composition, en image ou recomposée en grille */
.lg-hero__art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background-size: cover; background-position: center; }

/* composition de repli, dessinée en grille — mêmes proportions que l'image */
.lg-hero__grid {
	position: absolute; inset: 0;
	display: grid;
	grid-template-columns: 1.15fr 2.7fr .62fr;
	grid-template-rows: 3.3fr .5fr 1.05fr;
	gap: clamp(9px,1.1vw,17px);
	padding: clamp(9px,1.1vw,17px);
	background: var(--lg-ink);
}
.lg-hero__grid i { display: block; background: #F7F5F0; }
.lg-hero__grid i.is-red    { grid-column: 2 / span 2; background: #C8102E; }
.lg-hero__grid i.is-blue   { background: #1B3FA0; }
.lg-hero__grid i.is-yellow { background: #F4C300; }

/* voile léger : le visuel respire, le texte reste lisible */
.lg-hero__veil {
	position: absolute; inset: 0;
	background: linear-gradient(180deg,
		rgba(250,250,250,.42) 0%,
		rgba(250,250,250,.22) 38%,
		rgba(250,250,250,.95) 100%);
}

/*
 * Bloc de titre ancré depuis le bas, pour rester à la même hauteur
 * optique quelle que soit la fenêtre. La borne haute empêche tout
 * chevauchement avec le header.
 */
.lg-hero__block {
	position: absolute;
	left: 0; right: 0;
	bottom: min(clamp(369px, calc(32vh + 219px), 519px), calc(100svh - 220px));
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(24px,4vh,44px);
	padding: 0 24px;
	animation: lgFade 1.1s ease both;
}
.lg-hero__line {
	font-family: var(--lg-serif);
	font-size: clamp(22px,4.4vw,54px);
	font-weight: 200;
	letter-spacing: .36em;
	margin-left: .36em;   /* compensation optique */
	text-align: center;
}

.lg-editions { padding: clamp(80px,13vh,160px) var(--lg-side) clamp(96px,15vh,180px); background: var(--lg-bg); }
.lg-editions__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(40px,7vh,80px); }
.lg-editions__title { margin: 0; font-family: var(--lg-serif); font-size: clamp(24px,3.4vw,44px); font-weight: 200; letter-spacing: -.01em; }

/* trois rectangles debout, à gouttière large */
.lg-drop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px,2vw,28px); align-items: stretch; }
.lg-drop-grid > * { aspect-ratio: 2 / 3; }


/* 10. FICHE ÉDITION ======================================================= */

.lg-product { padding: var(--lg-header-h) var(--lg-side) 0; background: var(--lg-bg); }
.lg-product__split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); column-gap: clamp(32px,5vw,88px); max-width: 1560px; margin: 0 auto; }

/* Vues complémentaires : sous le visuel principal, dans sa colonne.
   Une par ligne, en grand, avec de l'air entre elles — jamais une grille
   de vignettes de boutique. */
.lg-product__views {
	grid-column: 1;
	grid-row: 2;
	display: flex;
	flex-direction: column;
	gap: clamp(28px, 4vh, 56px);
	padding: clamp(28px, 4vh, 56px) 0 0;
}
.lg-product__view { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.lg-product__view .lg-plate-img { aspect-ratio: 4 / 5; }

/* Une vue sur deux respire moins large : le regard descend en alternance. */
.lg-product__view:nth-child(even) { width: min(100%, 74%); align-self: flex-end; }
.lg-product__view:nth-child(even) .lg-plate-img { aspect-ratio: 1 / 1; }

/* le visuel déborde jusqu'aux bords, sous le filet vertical */
.lg-product__hero {
	grid-column: 1; grid-row: 1;
	height: calc(100svh - var(--lg-header-h));
	min-height: min(520px, calc(100svh - var(--lg-header-h)));
	margin-left: calc(-1 * var(--lg-side));
	margin-right: calc(-1 * clamp(32px,5vw,88px));
	background-color: var(--lg-plate-3);
	background-size: cover;
	background-position: center;
	animation: lgFade 1s ease both;
}

/*
 * Panneau d'acquisition : borné en hauteur, défilement interne et
 * centrage « safe » — il ne peut ni passer sous le header ni être
 * coupé en bas.
 */
.lg-product__panel {
	grid-column: 2; grid-row: 1 / span 2;
	position: sticky;
	top: var(--lg-header-h);
	min-height: calc(100svh - var(--lg-header-h));
	max-height: calc(100svh - var(--lg-header-h));
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	justify-content: safe center;
	gap: clamp(24px,3.4vh,38px);
	padding: clamp(30px,5vh,60px) 0 clamp(30px,5vh,60px) clamp(28px,3.4vw,58px);
	border-left: 1px solid var(--lg-rule);
}
.lg-product__cartel { display: flex; flex-direction: column; gap: 16px; }
.lg-product__by { display: flex; align-items: center; gap: 10px; }
.lg-product__handle { font-size: 12px; letter-spacing: .06em; }
.lg-product__country { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--lg-muted); }
.lg-product__title { margin: 0; font-family: var(--lg-serif); font-size: clamp(30px,3.2vw,44px); font-weight: 400; letter-spacing: .03em; line-height: 1.12; }

/* récit en escalier : chaque bloc glisse un peu plus vers la droite */
.lg-product__story { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; gap: clamp(60px,10vh,130px); padding: clamp(60px,10vh,130px) 0 clamp(60px,9vh,110px); }
.lg-narrative { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; gap: clamp(28px,3.6vw,60px); }
.lg-narrative--step2 { margin-left: clamp(0px, 4vw, 70px); }
.lg-narrative--step3 { margin-left: clamp(0px, 8vw, 140px); }
.lg-narrative__text { display: flex; flex-direction: column; gap: clamp(16px,2.4vh,24px); }
.lg-narrative__sign { font-size: 12px; letter-spacing: .06em; font-style: italic; }

.lg-figure-block { margin: 0; display: flex; flex-direction: column; gap: 16px; }
.lg-plate-img { width: 100%; background-color: var(--lg-plate); background-size: cover; background-position: center; }
.lg-plate--portrait  { aspect-ratio: 4 / 5; }
.lg-plate--square    { aspect-ratio: 1 / 1; background-color: var(--lg-plate-2); }
.lg-plate--tall      { aspect-ratio: 3 / 4; }
.lg-plate--landscape { aspect-ratio: 3 / 2; }
.lg-plate--band      { aspect-ratio: 16 / 6; }

/* bande finale, de bord à bord sous le filet */
.lg-band {
	margin: 0;
	margin-left: calc(-1 * var(--lg-side));
	margin-right: calc(-1 * clamp(32px,5vw,88px));
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: center;
}

/* tailles : lettres soulignées, cibles de clic de 48 px */
.lg-sizes { display: flex; align-items: baseline; gap: clamp(6px,1vw,14px); margin-left: -12px; }
.lg-size {
	background: none;
	border: 0;
	min-width: 48px;
	min-height: 48px;
	padding: 0 12px;
	cursor: pointer;
	font-size: 17px;
	letter-spacing: .14em;
	font-weight: 300;
	color: var(--lg-faint);
	text-underline-offset: 8px;
	text-decoration-thickness: .5px;
	transition: color .25s ease;
}
.lg-size:hover { color: var(--lg-ink); text-decoration: underline; }
.lg-size[aria-pressed="true"] { color: var(--lg-ink); font-weight: 400; text-decoration: underline; }

/* barre d'achat mobile, révélée au défilement */
.lg-buybar {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 45;
	display: flex;
	align-items: center;
	gap: clamp(12px,3vw,22px);
	padding: 14px clamp(16px,3vw,24px) calc(14px + env(safe-area-inset-bottom));
	background: var(--lg-bar-bg);
	backdrop-filter: blur(14px);
	border-top: 1px solid var(--lg-rule);
	transform: translateY(110%);
	transition: transform .4s var(--lg-ease);
}
.lg-buybar[data-show="1"] { transform: none; }
.lg-buybar__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.lg-buybar .lg-sizes { gap: 2px; margin-left: -8px; }
.lg-buybar .lg-size { min-width: 34px; min-height: 34px; padding: 0 8px; font-size: 13px; letter-spacing: .12em; text-underline-offset: 6px; }
.lg-buybar__cta { flex: 0 0 auto; padding: 18px 26px; font-size: 11px; letter-spacing: .2em; }


/* 11. PANIER ============================================================== */

/*
 * La grille et le filet vertical suivent la même règle de rupture :
 * sous le seuil, le séparateur devient horizontal. Sans cela, un trait
 * orphelin subsiste dans les largeurs intermédiaires.
 */
.lg-cart { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: clamp(16px,2vw,32px); align-items: stretch; }
.lg-cart__items { min-width: 0; display: flex; flex-direction: column; gap: 12px; border-right: 1px solid var(--lg-rule); padding-right: clamp(24px,3vw,52px); }
.lg-cart__recap { min-width: 0; position: sticky; top: var(--lg-sticky); align-self: flex-start; display: flex; flex-direction: column; gap: 22px; }

.lg-cart__line { display: flex; flex-wrap: wrap; gap: clamp(18px,2.4vw,30px); padding: 26px 0; border-bottom: 1px solid var(--lg-rule-soft); }
.lg-cart__body { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.lg-cart__title { font-size: 15px; }
.lg-cart__spec { font-size: 11px; color: var(--lg-muted); }

/* vignette à angles vifs */
.lg-thumb { width: clamp(90px,12vw,132px); aspect-ratio: 4 / 5; flex: 0 0 auto; background-color: var(--lg-plate); background-size: cover; background-position: center; }
.lg-thumb--sm { width: 66px; }
.lg-thumb--xs { width: 56px; height: 70px; aspect-ratio: auto; }

/* quantité : deux signes et un chiffre, sans contour.
   Les marges négatives élargissent la cible de clic à 44 px. */
.lg-qty { display: flex; align-items: baseline; gap: 14px; }
.lg-qty button { background: none; border: 0; padding: 12px 10px; margin: -12px -10px; cursor: pointer; color: var(--lg-faint); font-size: 13px; line-height: 1; transition: color .25s ease; }
.lg-qty button:hover { color: var(--lg-ink); }
.lg-qty input { width: 3ch; min-width: 18px; padding: 0; background: none; border: 0; text-align: center; font: inherit; font-size: 13px; font-weight: 300; color: inherit; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.lg-qty input::-webkit-outer-spin-button,
.lg-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.lg-remove { align-self: center; padding: 8px 0; margin: -8px 0; color: var(--lg-ghost); font-size: 11px; font-weight: 300; letter-spacing: .22em; transition: color .3s ease; }
.lg-remove:hover { color: var(--lg-ink); }

.lg-total { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; font-size: 12px; font-weight: 300; }
.lg-total__key { color: var(--lg-muted-2); }
.lg-total__val { font-variant-numeric: tabular-nums; }
.lg-total--final { border-top: 1px solid var(--lg-rule-soft); padding-top: 18px; }
.lg-total--final .lg-total__val { font-family: var(--lg-serif); font-size: 24px; letter-spacing: .03em; }


/* 12. PAIEMENT ============================================================ */

.lg-checkout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: clamp(32px,5vw,86px); align-items: stretch; }
.lg-checkout__fields { min-width: 0; border-right: 1px solid var(--lg-rule); padding-right: clamp(24px,3vw,52px); }
.lg-checkout__recap { min-width: 0; position: sticky; top: var(--lg-sticky); align-self: flex-start; display: flex; flex-direction: column; gap: 22px; }
.lg-checkout__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: clamp(34px,5vh,56px); }

/* moyen de paiement : ligne à point plein, filet noir si retenu */
.lg-pay {
	display: flex;
	align-items: center;
	gap: 18px;
	width: 100%;
	padding: 22px 2px;
	background: var(--lg-bg-pure);
	border-top: 0; border-left: 0; border-right: 0;
	border-bottom: 1px solid var(--lg-rule-soft);
	cursor: pointer;
	text-align: left;
	color: var(--lg-ink);
	transition: border-color .3s ease;
}
.lg-pay:hover { border-bottom-color: var(--lg-faint); }
.lg-pay[aria-pressed="true"] { border-bottom-color: var(--lg-ink); }
.lg-pay__dot { flex: 0 0 auto; width: 9px; height: 9px; border: 1px solid var(--lg-ghost-2); border-radius: 9999px; background: var(--lg-bg-pure); transition: border-color .3s ease, background .3s ease; }
.lg-pay[aria-pressed="true"] .lg-pay__dot { border-color: var(--lg-ink); background: var(--lg-ink); }
.lg-pay__label { flex: 1 1 auto; font-size: 13px; font-weight: 300; letter-spacing: .06em; }
.lg-pay[aria-pressed="true"] .lg-pay__label { font-weight: 400; }
.lg-pay__marks { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
/* pictogrammes ramenés en monochrome : aucune couleur de marque */
.lg-pay__marks img { max-height: 15px; width: auto; filter: grayscale(1) contrast(.85); opacity: .8; }


/* 13. COMPTE CLIENT ======================================================= */

/* barre latérale : liste textuelle pure, aucune pastille sur l'onglet actif */
.lg-side { flex: 0 0 auto; width: 200px; min-width: 0; display: flex; flex-direction: column; position: sticky; top: var(--lg-sticky); }
.lg-side__name { padding-bottom: 20px; }
.lg-side__link {
	padding: 10px 0;
	text-align: left;
	background: none;
	border: 0;
	cursor: pointer;
	font-size: 10px;
	font-weight: 300;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--lg-muted-2);
	transition: color .25s ease;
}
.lg-side__link:hover { color: var(--lg-ink); }
.lg-side__link[aria-current="page"] { color: var(--lg-ink); font-weight: 400; }
.lg-side__logout { padding: 10px 0; margin-top: 18px; font-size: 10px; font-weight: 300; letter-spacing: .3em; text-transform: uppercase; color: var(--lg-faint); }

.lg-view { flex: 1 1 420px; min-width: min(100%, 300px); display: flex; flex-direction: column; gap: clamp(26px,3.2vh,40px); }

/* flux de lignes à micro-filets — jamais de carte encadrée */
.lg-list { display: flex; flex-direction: column; border-top: 1px solid var(--lg-rule-soft); }
.lg-list__row { display: grid; align-items: center; gap: clamp(18px,3vw,44px); padding: 26px 0; border-bottom: 1px solid var(--lg-rule-soft); }
.lg-list__row--order { grid-template-columns: auto minmax(0, 1fr) auto auto auto; }
.lg-list__num { text-align: right; font-family: var(--lg-serif); font-size: 16px; letter-spacing: .04em; font-variant-numeric: tabular-nums; }

/* ligne libellé / valeur */
.lg-pair { display: flex; flex-wrap: wrap; gap: 8px 24px; padding: 11px 0; border-bottom: 1px solid var(--lg-rule-soft); }
.lg-pair:last-child { border-bottom: 0; }
.lg-pair__key { flex: 0 0 150px; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--lg-muted-2); }
.lg-pair__val { flex: 1 1 200px; font-size: 13px; font-weight: 300; color: var(--lg-body); }

.lg-empty { border-top: 1px solid var(--lg-rule-soft); padding-top: clamp(30px,5vh,54px); }


/* 14. REGISTRE ARTISTE ==================================================== */

/* onglet latéral de l'espace artiste */
.lg-nav-artist {
	padding: 10px 0;
	text-align: left;
	background: none;
	border: 0;
	cursor: pointer;
	font-size: 10px;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--lg-muted-2);
	font-weight: 300;
	transition: color .25s ease;
}
.lg-nav-artist:hover { color: var(--lg-ink); }
.lg-nav-artist[aria-current="page"] { color: var(--lg-ink); font-weight: 400; }

/* chiffres clés, en Didot */
.lg-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px,2.4vw,44px); }
.lg-metric { display: flex; flex-direction: column; gap: 14px; }
.lg-metric__note { font-size: 14px; letter-spacing: .03em; line-height: 1.7; color: var(--lg-body); }

/* registre des acquisitions */
.lg-row { display: grid; align-items: baseline; gap: clamp(14px,2.4vw,36px); padding: 19px 0; border-bottom: 1px solid var(--lg-rule-soft); grid-template-columns: minmax(0,1.1fr) minmax(0,1fr) minmax(0,1.2fr) auto; }
.lg-row__name { font-size: 13px; font-weight: 300; letter-spacing: .06em; }
.lg-row__city { font-size: 11px; font-weight: 300; letter-spacing: .18em; text-transform: uppercase; color: var(--lg-muted-2); }
.lg-row__meta { font-size: 11px; font-weight: 300; letter-spacing: .1em; color: var(--lg-muted-2); }
.lg-row__num  { text-align: right; font-family: var(--lg-serif); font-size: 15px; letter-spacing: .04em; font-variant-numeric: tabular-nums; }

.lg-block { display: flex; flex-direction: column; gap: 18px; padding-top: clamp(22px,2.8vh,34px); border-top: 1px solid var(--lg-rule-softer); }
.lg-block__head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }


/* 15. ASSISTANCE ==========================================================

   Volets à filets fins, tous fermés au chargement, un seul ouvert à la
   fois. L'ouverture annule l'atténuation du survol.
   ====================================================================== */

.lg-faq { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--lg-rule-soft); max-width: 900px; margin-bottom: clamp(80px,13vh,150px); }
.lg-faq__item { display: flex; flex-direction: column; gap: 14px; padding: 24px 2px; border-bottom: 1px solid var(--lg-rule-soft); cursor: pointer; transition: opacity .35s ease; }
.lg-faq__item[aria-expanded="false"]:hover { opacity: .5; }
.lg-faq__title { display: block; text-align: left; font-size: clamp(15px,1.6vw,19px); font-weight: 300; letter-spacing: .04em; }
.lg-faq__body { margin: 0; max-width: 660px; font-size: 13px; font-weight: 300; line-height: 2; color: var(--lg-muted-2); text-wrap: pretty; }

/* colonnes utiles sous les volets */
.lg-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: clamp(28px,4vw,64px); margin-bottom: clamp(56px,9vh,104px); }
.lg-col { border-top: 1px solid var(--lg-rule); padding: 22px 0 0; display: flex; flex-direction: column; gap: 18px; }

/* calendrier d'une édition */
.lg-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: clamp(20px,3vw,48px); }
.lg-step { display: flex; flex-direction: column; gap: 10px; }
.lg-step__num { font-family: var(--lg-mono); font-size: 9px; letter-spacing: .24em; color: #6B6B6B; }


/* 16. PAGES ÉDITORIALES ET JURIDIQUES ===================================== */

.lg-head { display: flex; flex-direction: column; gap: 16px; margin-bottom: clamp(56px,9vh,104px); max-width: 680px; }
.lg-head--center { align-items: center; text-align: center; margin-bottom: 0; gap: 14px; }

/* zigzag : figure et texte se répondent */
.lg-two { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px,4vw,80px); align-items: start; margin-top: clamp(60px,9vh,110px); }

/* article de loi : numéro et intitulé à gauche, corps à droite */
.lg-article { display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: clamp(24px,4vw,70px); border-top: 1px solid var(--lg-rule); padding: clamp(30px,5vh,52px) 0; }
.lg-article:last-of-type { border-bottom: 1px solid var(--lg-rule); }
.lg-article__head { display: flex; flex-direction: column; gap: 10px; }
.lg-article__num { font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--lg-faint); }
.lg-article__body { display: flex; flex-direction: column; gap: 16px; max-width: 620px; }


/* 17. DEVENIR ARTISTE ===================================================== */

.lg-apply { display: flex; flex-wrap: wrap; gap: clamp(36px,6vw,96px); align-items: flex-start; }
.lg-apply__form { flex: 1 1 500px; min-width: min(100%, 320px); display: flex; flex-direction: column; gap: clamp(40px,6vh,64px); }
.lg-apply__aside { flex: 0 1 320px; min-width: min(100%, 260px); position: sticky; top: var(--lg-sticky); display: flex; flex-direction: column; gap: clamp(22px,3vh,32px); }
.lg-apply__section { display: flex; flex-direction: column; gap: 22px; }

/* confirmation d'envoi : rien d'autre à l'écran */
.lg-sent {
	min-height: calc(100svh - var(--lg-header-h));
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 26px;
	padding: 0 24px;
	text-align: center;
	animation: lgSent .6s var(--lg-ease) both;
}


/* 17 bis. MESSAGES WOOCOMMERCE — filet à gauche, ni bandeau ni pastille ==== */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notices-wrapper li {
	list-style: none;
	margin: 0 0 26px;
	padding: 18px 0 18px 22px;
	background: none;
	border: 0;
	border-left: 1px solid var(--lg-ink);
	color: var(--lg-body);
	font-size: 13px; font-weight: 300; line-height: 2;
}
.woocommerce-error { border-left-color: #A8202F; }
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { content: none; }
.woocommerce-notices-wrapper ul { margin: 0; padding: 0; }

.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
	float: none; display: inline-block;
	margin-left: 18px; padding: 0;
	background: none; border: 0;
	color: var(--lg-muted);
	font-size: 11px; font-weight: 300;
	letter-spacing: .2em; text-transform: uppercase;
	text-decoration: underline; text-underline-offset: 5px;
	transition: color .3s ease;
}
.woocommerce-message .button:hover,
.woocommerce-info .button:hover,
.woocommerce-error .button:hover { background: none; color: var(--lg-ink); }


/* 17 ter. TUNNEL — champs, cases, boutons express ========================= */

/* Les lignes de formulaire de WooCommerce sont flottantes et à largeur
   fixe : d'où des champs coupés. On les remet en pleine largeur, et les
   paires prénom / nom sur une grille. */
.woocommerce form .form-row,
.woocommerce-checkout .form-row {
	float: none !important;
	width: 100% !important;
	padding: 0;
	margin: 0 0 26px;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-checkout input.input-text,
.woocommerce-checkout textarea { width: 100% !important; box-sizing: border-box; }

/* Prénom et nom côte à côte, comme dans la maquette. */
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-additional-fields__field-wrapper {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: 0 clamp(24px, 3vw, 40px);
}
.woocommerce-billing-fields__field-wrapper > .form-row-wide,
.woocommerce-shipping-fields__field-wrapper > .form-row-wide,
.woocommerce-additional-fields__field-wrapper > .form-row-wide { grid-column: 1 / -1; }

/* Champs sur deux lignes serrées (adresse 2, notes) : un peu d'air. */
.woocommerce form .form-row label { display: block; margin-bottom: 4px; }
.woocommerce form .form-row .required { color: var(--lg-faint); text-decoration: none; }
.woocommerce form .form-row textarea { min-height: 90px; line-height: 2; }

/* Boutons express (Apple Pay, Google Pay, Link) : le vert de Link est hors
   palette. On les conserve mais en retrait, sous un filet. */
.wc-stripe-product-checkout-container,
#wc-stripe-express-checkout-element,
.wcpay-payment-request-wrapper {
	margin: 0 0 34px;
	padding-bottom: 30px;
	border-bottom: 1px solid var(--lg-rule);
	filter: saturate(.12) contrast(1.05);
	opacity: .88;
	transition: filter .3s ease, opacity .3s ease;
}
.wc-stripe-product-checkout-container:hover,
#wc-stripe-express-checkout-element:hover,
.wcpay-payment-request-wrapper:hover { filter: none; opacity: 1; }

/* Le séparateur « OU » de Stripe, dans la typographie de la maison. */
.wc-stripe-checkout-separator,
#wc-stripe-express-checkout-button-separator {
	margin: 0 0 32px;
	font-size: 10px; font-weight: 300;
	letter-spacing: .26em; text-transform: uppercase;
	color: var(--lg-faint); text-align: center;
}

/* Sélecteurs natifs et select2 : un filet bas, jamais de cadre. */
.woocommerce form .form-row .select2-container .select2-selection--single,
.woocommerce .select2-container .select2-selection--single {
	height: auto;
	padding: 12px 0;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--lg-rule);
	border-radius: 0;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0;
	color: var(--lg-ink);
	font-size: 14px; font-weight: 300; line-height: 1.6;
}
.select2-container--default .select2-selection--single .select2-selection__arrow { top: 50%; right: 0; transform: translateY(-50%); }
.select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: var(--lg-faint) transparent transparent; }
.select2-dropdown { border: 1px solid var(--lg-rule); border-radius: 0; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--lg-ink); }

/* --- Coordonnées bancaires ---------------------------------------------
   Stripe encadre ses Elements de deux boîtes successives. On les efface :
   la saisie doit flotter sur le blanc comme le reste du formulaire.
   Les champs eux-mêmes vivent dans une iframe et sont mis en forme par
   lg_stripe_appearance(), dans inc/stripe.php.
   --------------------------------------------------------------------- */
.woocommerce-checkout #payment,
.woocommerce-checkout #payment .payment_box,
.woocommerce-checkout #payment div.payment_box,
.wc-stripe-upe-element,
#wc-stripe-upe-element,
.wc-stripe-elements-field,
.woocommerce-checkout #payment ul.payment_methods li {
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding-left: 0;
	padding-right: 0;
}
.woocommerce-checkout #payment .payment_box::before,
.woocommerce-checkout #payment div.payment_box::before { content: none; }

/* Titre de la passerelle : en surtitre, pas en gras noir. */
.woocommerce-checkout #payment ul.payment_methods label[for^="payment_method"] {
	font-size: 10px; font-weight: 300;
	letter-spacing: .2em; text-transform: uppercase;
	color: var(--lg-muted);
}

/* « Enregistrer mes informations » : case ronde, libellé en bas de casse. */
.woocommerce-SavedPaymentMethods-saveNew,
.wc-stripe-save-payment-method,
.woocommerce-terms-and-conditions-wrapper {
	margin: 22px 0;
	border: 0;
	padding: 0;
}
.woocommerce-checkout #payment .form-row.woocommerce-SavedPaymentMethods-saveNew label,
.woocommerce-terms-and-conditions-wrapper label {
	display: flex; align-items: baseline; gap: 14px;
	margin: 0;
	font-size: 12px; font-weight: 300; letter-spacing: .02em;
	text-transform: none; color: var(--lg-body-soft);
	cursor: pointer;
}
.woocommerce-checkout #payment input[type="checkbox"],
.woocommerce-terms-and-conditions-wrapper input[type="checkbox"] {
	appearance: none; -webkit-appearance: none;
	flex: 0 0 auto; width: 9px; height: 9px;
	margin: 0;
	border: 1px solid #D4D4D4; border-radius: 9999px;
	background: var(--lg-bg-pure);
	cursor: pointer;
	transition: border-color .25s ease, background .25s ease;
}
.woocommerce-checkout #payment input[type="checkbox"]:checked,
.woocommerce-terms-and-conditions-wrapper input[type="checkbox"]:checked { border-color: var(--lg-ink); background: var(--lg-ink); }

.woocommerce-privacy-policy-text p { font-size: 11px; font-weight: 300; line-height: 2; color: var(--lg-faint); }
.woocommerce-checkout #payment ul.wc_payment_methods { margin: 0; padding: 0; list-style: none; }

/* Bouton de validation : jamais le gris par défaut de WooCommerce. */
#place_order,
.woocommerce #payment #place_order {
	display: block; width: 100%;
	margin-top: clamp(28px,4vh,48px);
	padding: 22px 0;
	background: var(--lg-bg-pure);
	border: 1px solid var(--lg-ink); border-radius: 0;
	color: var(--lg-ink);
	font-size: 12px; font-weight: 300;
	letter-spacing: .22em; text-transform: uppercase;
	cursor: pointer;
	transition: background .3s ease, color .3s ease;
}
#place_order:hover { background: var(--lg-ink); color: var(--lg-bg-pure); }

/* Filet de sécurité : si une extension ajoute son propre bouton de
   validation, seul le premier reste visible. */
#place_order ~ #place_order,
[name="woocommerce_checkout_place_order"] ~ [name="woocommerce_checkout_place_order"] { display: none; }

/* Curseur « interdit » : WooCommerce pose un voile pendant ses calculs.
   Il écrit son curseur en style inline — support.js le neutralise aussi. */
.blockUI.blockOverlay,
.woocommerce .blockUI.blockOverlay,
.blockUI {
	cursor: default !important;
	background: var(--lg-bg-pure) !important;
	opacity: .5 !important;
}
.blockUI.blockOverlay::before { content: none; }
.processing, .woocommerce .processing { cursor: default !important; }

/* --- « Expédier à une adresse différente ? » ---------------------------
   WooCommerce en fait un titre de niveau 3, gras et noir. On le ramène au
   registre des autres choix : case ronde et libellé en bas de casse.
   --------------------------------------------------------------------- */
#ship-to-different-address {
	margin: 30px 0 0;
	padding: 26px 0 0;
	border-top: 1px solid var(--lg-rule-soft);
	font-size: inherit;
	font-weight: 300;
}
#ship-to-different-address label,
#ship-to-different-address .woocommerce-form__label-for-checkbox {
	display: flex; align-items: baseline; gap: 14px;
	margin: 0;
	font-size: 12px !important;
	font-weight: 300 !important;
	letter-spacing: .02em;
	text-transform: none;
	color: var(--lg-body-soft);
	cursor: pointer;
}
#ship-to-different-address span { font-weight: 300; }
#ship-to-different-address input[type="checkbox"] {
	appearance: none; -webkit-appearance: none;
	flex: 0 0 auto; width: 9px; height: 9px;
	margin: 0;
	border: 1px solid #D4D4D4; border-radius: 9999px;
	background: var(--lg-bg-pure);
	cursor: pointer;
	transition: border-color .25s ease, background .25s ease;
}
#ship-to-different-address input[type="checkbox"]:checked { border-color: var(--lg-ink); background: var(--lg-ink); }

/* Adresse de remise dépliée : un peu d'air avant les champs. */
.shipping_address { padding-top: 22px; }

/* Notes de commande : même respiration que le reste. */
#order_comments_field { margin-top: 26px; }

/* --- Espace client -----------------------------------------------------
   Le contenu n'emplissait pas la fenêtre : le fond du corps apparaissait
   sous lui, dans une autre teinte.
   --------------------------------------------------------------------- */
body.woocommerce-account #lg-main,
body.woocommerce-cart #lg-main,
body.woocommerce-checkout #lg-main {
	min-height: 100svh;
	background: var(--lg-bg-pure);
}
body.woocommerce-account,
body.woocommerce-cart,
body.woocommerce-checkout { background: var(--lg-bg-pure); }

/* La colonne de droite garde sa place pendant l'échange de vue. */
.lg-account__view { min-height: 320px; }


/* 18. FOOTER ============================================================== */

.lg-footer { border-top: 1px solid var(--lg-rule); padding: clamp(48px,7vh,84px) var(--lg-side) 32px; background: var(--lg-bg-pure); color: var(--lg-ink); }
.lg-footer__cols { display: flex; flex-wrap: wrap; gap: clamp(32px,5vw,80px); justify-content: space-between; margin-bottom: clamp(40px,6vh,70px); }
.lg-footer__brand { display: flex; flex-direction: column; gap: 16px; flex: 1 1 260px; max-width: 340px; }
.lg-footer__mark { font-family: var(--lg-serif); font-size: 13px; letter-spacing: .34em; text-transform: uppercase; font-weight: 300; }
.lg-footer__col { display: flex; flex-direction: column; gap: 14px; flex: 0 1 150px; }
.lg-footer__col a { font-size: 12px; }
.lg-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid var(--lg-rule); padding-top: 24px; }
.lg-footer__copy { font-size: 10px; letter-spacing: .16em; color: var(--lg-muted); }
.lg-footer__legal { display: flex; flex-wrap: wrap; gap: clamp(14px,2vw,28px); }
.lg-footer__legal a { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--lg-muted); }
.lg-footer__legal a:hover { color: var(--lg-ink); }


/* 19. ANIMATIONS ==========================================================

   Voile d'ouverture : le fond est peint aussitôt, le contenu se révèle
   en fondu. CSS pur — la page ne peut pas rester masquée si un script
   échoue.
   ====================================================================== */

@keyframes lgBoot     { 0%, 42% { opacity: 0 } 100% { opacity: 1 } }
@keyframes lgFade     { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }
@keyframes lgSent     { from { opacity: 0 } to { opacity: 1 } }
@keyframes lgMenuIn   { from { opacity: 0 } to { opacity: 1 } }
@keyframes lgMenuItem { from { opacity: 0; transform: translateY(16px) } to { opacity: 1; transform: none } }
@keyframes lgSweep    { to { transform: rotate(360deg) } }

/*
 * Le voile d'ouverture ne porte plus sur le corps entier : le header en
 * était aussi affecté et clignotait à chaque changement de page. Seul le
 * contenu se révèle en fondu ; la barre est peinte immédiatement et paraît
 * immobile d'une page à l'autre.
 */
#lg-main { animation: lgBoot .42s var(--lg-ease) both; }
.lg-footer { animation: lgBoot .42s var(--lg-ease) both; }
.lg-header, .lg-overlay { animation: none; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	body, #lg-main, .lg-footer, .lg-hero__block, .lg-product__hero,
	.lg-overlay, .lg-overlay__link, .lg-overlay__secondary, .lg-sent { animation: none; }
}
@media print { body, #lg-main, .lg-footer { animation: none; } }


/* 20. POINTS DE RUPTURE ===================================================

   Ne ciblez jamais un élément par [style*="…"] : les styles en ligne sont
   resérialisés avec des espaces et le sélecteur ne correspond plus.
   ====================================================================== */

/* récit produit : une colonne, image en 16/9 */
@media (max-width: 1180px) {
	.lg-narrative { grid-template-columns: minmax(0, 1fr); margin-left: 0; gap: clamp(20px,3vh,32px); }
	.lg-narrative .lg-plate-img { aspect-ratio: 16 / 9; }
}

/* paiement */
@media (max-width: 1000px) {
	.lg-checkout { grid-template-columns: minmax(0, 1fr); }
	.lg-checkout__fields { border-right: 0; border-bottom: 1px solid var(--lg-rule); padding-right: 0; padding-bottom: clamp(28px,5vh,44px); }
	.lg-checkout__recap { position: static; padding-top: clamp(20px,3vh,32px); }
}

/* zigzag éditorial : la figure remonte au-dessus du texte */
@media (max-width: 980px) {
	.lg-two { grid-template-columns: minmax(0, 1fr); margin-left: 0; gap: clamp(20px,3vh,32px); }
	.lg-two__figure { order: -1; }
	.lg-two__figure .lg-plate-img { aspect-ratio: 16 / 10; }
}

/* panier : la grille et le filet basculent d'un même mouvement */
@media (max-width: 960px) {
	.lg-cart { grid-template-columns: minmax(0, 1fr); }
	.lg-cart__items { border-right: 0; border-bottom: 1px solid var(--lg-rule); padding-right: 0; padding-bottom: clamp(28px,5vh,44px); }
	.lg-cart__recap { position: static; padding-top: clamp(20px,3vh,32px); }
}

/* fiche édition : le panneau passe sous le visuel, la barre d'achat sort */
@media (max-width: 900px) {
	.lg-product__split { grid-template-columns: minmax(0, 1fr); }
	.lg-product__hero { height: 62svh; min-height: 360px; margin-right: calc(-1 * var(--lg-side)); }
	.lg-product__views { grid-row: auto; padding-top: clamp(22px, 4vh, 40px); gap: clamp(20px, 3vh, 36px); }
	.lg-product__view:nth-child(even) { width: 100%; align-self: stretch; }
	.lg-band { margin-right: calc(-1 * var(--lg-side)); }
	.lg-product__panel {
		position: static;
		min-height: 0; max-height: none; overflow: visible;
		border-left: 0;
		border-bottom: 1px solid var(--lg-rule);
		padding: clamp(34px,6vh,56px) 0;
	}
	.lg-article { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}
@media (min-width: 901px) { .lg-buybar { display: none; } }

/* grille des éditions : une colonne, format 3/4 */
@media (max-width: 820px) {
	.lg-drop-grid { grid-template-columns: 1fr; }
	.lg-drop-grid > * { aspect-ratio: 3 / 4; }
}

/* barres latérales des espaces personnels */
@media (max-width: 760px) { .lg-side { width: 100%; position: static; } }

/*
 * Header : sans cet allègement il réclame près de 445 px et déborde sur
 * téléphone. Le sélecteur de langue reste accessible dans l'overlay.
 */
@media (max-width: 680px) {
	.lg-header { padding: 0 16px; gap: 10px; }
	.lg-header .lg-wordmark { font-size: 12px; letter-spacing: .12em; }
	.lg-menu-btn__label, .lg-header .lg-lang, .lg-secure span { display: none; }
}

/* registre artiste */
@media (max-width: 640px) {
	.lg-metrics { grid-template-columns: 1fr; gap: 26px; }
	.lg-row, .lg-list__row { grid-template-columns: 1fr; gap: 8px; }
	.lg-row__num, .lg-list__num { text-align: left; }
}


/* ==========================================================================
   19. AJUSTEMENTS — sélection, langue, tunnel, espace client, mobile
   ========================================================================== */

/* --- Aucune sélection de texte -----------------------------------------
   Le curseur ne surligne plus rien : la lecture reste celle d'un objet
   imprimé. Les champs de saisie gardent évidemment leur comportement.
   --------------------------------------------------------------------- */
/*
 * La sélection reste permise dans le corps du texte : c'est user-select:
 * none sur <body> qui provoquait le curseur « interdit » — privé de
 * sélection, le navigateur interprète tout clic-glissé comme un
 * glisser-déposer refusé. On ne le pose que sur les éléments d'interface.
 */
body { -webkit-tap-highlight-color: transparent; }

.lg-header, .lg-overlay, .lg-footer, .lg-side, .lg-drop,
.lg-kicker, .lg-caption, .lg-status, .lg-btn, .lg-link, .lg-discover,
.lg-size, .lg-qty, .lg-option, .lg-lang, .lg-accordion__title,
button, label, [role="button"] {
	-webkit-user-select: none;
	user-select: none;
}
input, textarea, select, [contenteditable="true"] {
	-webkit-user-select: text;
	user-select: text;
}

/* Cause réelle du curseur « interdit » : sans sélection possible, le
   navigateur interprète tout clic-glissé comme un glisser-déposer et
   affiche son curseur de refus. On désarme le glissement lui-même. */
* {
	-webkit-user-drag: none;
	-khtml-user-drag: none;
}
img, svg, a, figure, picture, video, .lg-drop, .lg-plate-img, .lg-thumb {
	-webkit-user-drag: none;
	user-select: none;
}

/* Le curseur de blocage ne doit apparaître nulle part.

   Trois sources distinctes, trois remèdes :
   — le voile de jQuery blockUI, qui écrit « cursor: wait » en style inline ;
   — les éléments désactivés, que le navigateur affiche « not-allowed » ;
   — les zones à pointer-events: none, même traitement.
   support.js désarme en outre blockUI à la source. */

.blockUI, .blockOverlay, .blockPage, .blockMsg, .processing,
.woocommerce .blockUI, .woocommerce .blockOverlay,
.blockUI *, .blockOverlay *, .processing * { cursor: default !important; }

/* Pendant un recalcul, plus rien ne change de curseur — y compris les
   liens et boutons que le voile recouvre. */
body.lg-busy, body.lg-busy * { cursor: default !important; }

:disabled, [disabled], [aria-disabled="true"], [readonly],
button:disabled, .lg-btn[disabled], fieldset:disabled { cursor: default !important; }

[style*="pointer-events: none"], [style*="pointer-events:none"] { cursor: default !important; }

/* --- Panier vide et états vides ----------------------------------------
   Centré dans la page, sans encadré ni illustration.
   --------------------------------------------------------------------- */
/* --- Panier vide et états vides ----------------------------------------
   Centré sur la hauteur visible, sans encadré ni illustration. Le gabarit
   s'affiche dans .lg-page, dont le padding supérieur est déjà important :
   on le neutralise ici pour que le bloc tombe au milieu de l'écran.
   --------------------------------------------------------------------- */
.lg-page:has(.lg-empty-state) { padding-top: var(--lg-header-h); padding-bottom: 0; }

.lg-empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 20px;
	min-height: calc(100svh - var(--lg-header-h));
	max-width: 460px;
	margin: 0 auto;
	padding: 0 0 clamp(40px, 8vh, 90px);
}
.lg-empty-state__line {
	margin: 0;
	font-family: var(--lg-serif);
	font-size: clamp(24px, 3vw, 38px);
	font-weight: 400;
	letter-spacing: .02em;
	line-height: 1.25;
}
.lg-empty-state__note {
	margin: 0;
	font-size: 13px;
	font-weight: 300;
	line-height: 2.1;
	color: var(--lg-muted);
	text-wrap: pretty;
}
.lg-empty-state__action { margin-top: 14px; }

/* Le code court du panier imprime lui-même ses notifications, au-dessus du
   gabarit. Sans mise en forme, il n'en restait qu'un fragment collé sous le
   header — d'où ce traitement explicite du conteneur natif. */
.woocommerce-notices-wrapper {
	max-width: var(--lg-max-checkout);
	margin: 0 auto;
	padding: 0 var(--lg-side);
}
.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error { margin: 0 0 8px; }
.woocommerce-notices-wrapper:not(:empty) { padding-top: clamp(96px, 15vh, 130px); }

/* Sur les pages qui ouvrent déjà sous le header, pas de double marge. */
.lg-page .woocommerce-notices-wrapper:not(:empty) { padding: 0 0 8px; }

/* Butée de quantité : sous la liste, le temps d'être lue, puis elle s'efface. */
.lg-qty__note {
	display: block;
	margin: 22px 0 0;
	padding: 0;
	font-size: 10px;
	font-weight: 300;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--lg-muted);
	opacity: 0;
	transition: opacity .3s ease;
	pointer-events: none;
}
.lg-qty__note[data-shown="1"] { opacity: 1; }

/* Notifications sans contenu : aucun filet, aucune marge résiduelle. */
.lg-notices:empty,
.lg-notices > .woocommerce-notices-wrapper:empty { display: none; }
.lg-notices--centered { width: 100%; margin-bottom: 22px; text-align: left; }
.lg-notices--centered:empty { display: none; margin: 0; }
.lg-notices--centered .woocommerce-message,
.lg-notices--centered .woocommerce-info { display: inline-block; text-align: left; }

/* Message natif « panier vide » : écarté, cart-empty.php le remplace. */
.cart-empty,
.woocommerce-info.cart-empty,
.wc-empty-cart-message,
.return-to-shop { display: none !important; }


/* --- Fiche produit : formulaire d'acquisition ---------------------------
   Le sélecteur de quantité n'a pas lieu d'être : une édition numérotée
   s'acquiert à l'unité.
   --------------------------------------------------------------------- */
.lg-product__panel form.cart {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
}
.lg-product__panel .quantity,
.lg-product__panel form.cart .quantity,
.lg-product__panel form.cart .quantity input { display: none !important; }

/* Bouton d'acquisition : noir plein, il s'inverse au survol — en miroir
   du bouton à contour fin du panier. Les sélecteurs sont volontairement
   redondants : WooCommerce et ses extensions varient le balisage. */
.lg-product__panel form.cart button,
.lg-product__panel form.cart button[type="submit"],
.lg-product__panel .single_add_to_cart_button,
.woocommerce .lg-product__panel form.cart button.button,
.woocommerce div.product form.cart .button,
.woocommerce div.product .single_add_to_cart_button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 22px 0;
	background: var(--lg-ink);
	border: 1px solid var(--lg-ink);
	border-radius: 0;
	color: var(--lg-bg-pure);
	font-family: var(--lg-sans);
	font-size: 12px;
	font-weight: 300;
	letter-spacing: .22em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background .3s ease, color .3s ease;
}
.lg-product__panel form.cart button:hover,
.lg-product__panel .single_add_to_cart_button:hover,
.woocommerce div.product form.cart .button:hover,
.woocommerce div.product .single_add_to_cart_button:hover {
	background: var(--lg-bg-pure);
	color: var(--lg-ink);
}

/* État de confirmation, deux secondes après l'ajout. */
.lg-product__panel form.cart button[data-added="1"],
.lg-product__panel .single_add_to_cart_button[data-added="1"] {
	background: var(--lg-bg-pure);
	color: var(--lg-ink);
	letter-spacing: .18em;
}
.lg-product__panel form.cart button:disabled { opacity: 1; cursor: default; }
.lg-product__panel .single_add_to_cart_button.disabled { opacity: .35; }

/* Variations : le tableau natif disparaît, nos tailles le remplacent. */
.lg-product__panel form.cart table.variations,
.lg-product__panel .woocommerce-variation-price,
.lg-product__panel .woocommerce-variation-availability,
.lg-product__panel .reset_variations { display: none !important; }

/* Prix : la ligne éditoriale, pas le style boutique. */
.lg-product__panel .price,
.lg-product__panel p.price {
	margin: 0;
	font-family: var(--lg-serif);
	font-size: clamp(20px, 2.2vw, 27px);
	font-weight: 400;
	letter-spacing: .03em;
	color: var(--lg-ink);
}
.lg-product__panel .price del { opacity: .4; margin-right: 10px; }
.lg-product__panel .price ins { text-decoration: none; }

.lg-product__panel .stock,
.lg-product__panel .out-of-stock {
	margin: 0;
	font-size: 10px;
	font-weight: 300;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--lg-muted);
}




/* --- Sélecteur de langue : un drapeau, puis un choix déplié ------------- */
.lg-lang { position: relative; display: flex; align-items: center; height: 24px; }
.lg-lang__toggle {
	display: flex; align-items: center; justify-content: center;
	height: 24px; padding: 0;
	background: none; border: 0; cursor: pointer;
	transition: opacity .25s ease;
}
.lg-lang__toggle:hover { opacity: .55; }
.lg-lang__toggle .lg-flag { width: 20px; height: 13px; }

.lg-lang__menu {
	position: absolute;
	top: calc(100% + 14px); right: 0;
	z-index: 60;
	display: flex; flex-direction: column;
	min-width: 150px;
	padding: 6px 0;
	background: var(--lg-bg-pure);
	border: 1px solid var(--lg-rule);
	animation: lgFade .22s ease both;
}
.lg-lang__menu[hidden] { display: none; }
.lg-lang__item {
	display: flex; align-items: center; gap: 12px;
	padding: 11px 16px;
	background: none; border: 0; cursor: pointer;
	font-size: 12px; font-weight: 300; letter-spacing: .04em;
	color: var(--lg-faint);
	text-align: left;
	transition: color .25s ease, background .25s ease;
}
.lg-lang__item:hover { color: var(--lg-ink); background: #FAFAFA; }
.lg-lang__item[aria-current="true"] { color: var(--lg-ink); }
.lg-lang__item .lg-flag { width: 18px; height: 12px; flex: 0 0 auto; }

/* --- Tunnel : une seule mesure d'espacement ---------------------------- */
.woocommerce-checkout .lg-checkout__fields section { margin-bottom: clamp(40px, 6vh, 64px); }
.woocommerce-checkout .lg-checkout__fields section:last-of-type { margin-bottom: 0; }
.woocommerce form .form-row { margin: 0 0 24px; }
.woocommerce form .form-row:last-child { margin-bottom: 0; }
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3 { display: none; }

/* Les champs complémentaires ne servent plus. */
.woocommerce-additional-fields,
#order_comments_field,
.woocommerce-additional-fields__field-wrapper { display: none !important; }

/* Le séparateur de Stripe, si l'extension l'impose malgré le filtre. */
.wc-stripe-checkout-separator,
#wc-stripe-express-checkout-button-separator,
.wcpay-payment-request-wrapper + p { display: none !important; }

/* --- Erreurs : un filet, une phrase, rien de plus ---------------------- */
.woocommerce-NoticeGroup .woocommerce-error,
ul.woocommerce-error {
	margin: 0 0 34px;
	padding: 20px 0 20px 22px;
	background: none;
	border: 0; border-left: 1px solid #A8202F;
	list-style: none;
}
ul.woocommerce-error li {
	margin: 0 0 8px;
	padding: 0;
	list-style: none;
	font-size: 12px; font-weight: 300; line-height: 1.9;
	color: var(--lg-body);
}
ul.woocommerce-error li:last-child { margin-bottom: 0; }
ul.woocommerce-error li strong { font-weight: 400; }
ul.woocommerce-error::before { content: none; }

/* Champ fautif : le filet passe au bordeaux, sans fond ni encadré. */
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select,
.woocommerce form .form-row.woocommerce-invalid .select2-selection { border-bottom-color: #A8202F !important; }
.woocommerce form .form-row.woocommerce-invalid label { color: #A8202F; }
.woocommerce form .form-row.woocommerce-validated input.input-text { border-bottom-color: var(--lg-rule); }

/* --- Espace client : tout ce que WooCommerce rend en brut -------------- */

/* Coordonnées */
.woocommerce-Addresses,
.woocommerce-Address { display: block; width: 100%; float: none; }
.woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: clamp(28px, 4vw, 64px);
	margin-top: 26px;
}
.woocommerce-Address-title { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--lg-rule-soft); padding-bottom: 14px; margin-bottom: 20px; }
.woocommerce-Address-title h2,
.woocommerce-Address-title h3 {
	margin: 0;
	font-family: var(--lg-sans);
	font-size: 9px; font-weight: 400;
	letter-spacing: .26em; text-transform: uppercase;
	color: var(--lg-muted);
}
.woocommerce-Address-title .edit {
	font-size: 11px; font-weight: 300;
	letter-spacing: .2em; text-transform: uppercase;
	color: var(--lg-muted);
	text-decoration: underline; text-underline-offset: 5px;
}
.woocommerce-Address-title .edit:hover { color: var(--lg-ink); }
.woocommerce-Address address {
	font-style: normal;
	font-size: 13px; font-weight: 300; line-height: 2.1;
	color: var(--lg-body);
}
.woocommerce-Address address br { line-height: 2.1; }

/* Moyens de paiement */
.woocommerce-MyAccount-paymentMethods {
	width: 100%;
	border: 0; border-collapse: collapse;
	margin-top: 26px;
}
.woocommerce-MyAccount-paymentMethods thead { display: none; }
.woocommerce-MyAccount-paymentMethods tr { border-bottom: 1px solid var(--lg-rule-soft); }
.woocommerce-MyAccount-paymentMethods td {
	border: 0;
	padding: 22px 0;
	font-size: 13px; font-weight: 300;
	color: var(--lg-body);
	vertical-align: middle;
}
.woocommerce-MyAccount-paymentMethods td.payment-method-actions { text-align: right; }
.woocommerce-MyAccount-paymentMethods .button {
	background: none; border: 0; padding: 0;
	color: var(--lg-muted);
	font-size: 11px; font-weight: 300;
	letter-spacing: .2em; text-transform: uppercase;
	text-decoration: underline; text-underline-offset: 5px;
}
.woocommerce-MyAccount-paymentMethods .button:hover { background: none; color: var(--lg-ink); }

/* Commandes */
.woocommerce-orders-table { width: 100%; border: 0; border-collapse: collapse; margin-top: 26px; }
.woocommerce-orders-table thead th {
	border: 0; border-bottom: 1px solid var(--lg-rule);
	padding: 0 0 14px;
	font-size: 9px; font-weight: 400;
	letter-spacing: .26em; text-transform: uppercase;
	color: var(--lg-muted);
	text-align: left;
}
.woocommerce-orders-table tbody td {
	border: 0; border-bottom: 1px solid var(--lg-rule-soft);
	padding: 22px 0;
	font-size: 13px; font-weight: 300;
	color: var(--lg-body);
}
.woocommerce-orders-table__cell-order-actions { text-align: right; }
.woocommerce-orders-table .button,
.woocommerce-MyAccount-content .button:not(.lg-btn) {
	background: none; border: 0; padding: 0;
	color: var(--lg-muted);
	font-size: 11px; font-weight: 300;
	letter-spacing: .2em; text-transform: uppercase;
	text-decoration: underline; text-underline-offset: 5px;
	transition: color .3s ease;
}
.woocommerce-orders-table .button:hover,
.woocommerce-MyAccount-content .button:not(.lg-btn):hover { background: none; color: var(--lg-ink); }

/* Profil : le formulaire natif reprend nos champs */
.woocommerce-EditAccountForm { margin-top: 26px; max-width: 640px; }
.woocommerce-EditAccountForm fieldset {
	border: 0; border-top: 1px solid var(--lg-rule-soft);
	margin: 34px 0 0; padding: 30px 0 0;
}
.woocommerce-EditAccountForm legend {
	padding: 0;
	font-size: 9px; font-weight: 400;
	letter-spacing: .26em; text-transform: uppercase;
	color: var(--lg-muted);
}
.woocommerce-EditAccountForm em,
.woocommerce-EditAccountForm .description { font-size: 11px; font-style: normal; color: var(--lg-faint); }
.woocommerce-EditAccountForm button[type="submit"],
.woocommerce-MyAccount-content .lg-btn { margin-top: 30px; }

/* Titre de section rendu par WooCommerce */
.woocommerce-MyAccount-content > h2,
.woocommerce-MyAccount-content > h3 {
	margin: 0 0 8px;
	font-family: var(--lg-serif);
	font-size: clamp(18px, 1.9vw, 24px);
	font-weight: 400; letter-spacing: .03em;
}
.woocommerce-MyAccount-content > p { font-size: 13px; font-weight: 300; line-height: 2.1; color: var(--lg-body-soft); }
.woocommerce-MyAccount-content mark { background: none; color: var(--lg-ink); font-weight: 400; }

/* --- Pages juridiques -------------------------------------------------- */
.lg-legal__head { display: flex; flex-direction: column; gap: 18px; max-width: 680px; margin-bottom: clamp(56px, 9vh, 100px); }
.lg-legal__date { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--lg-faint); }
.lg-legal__section {
	display: grid;
	grid-template-columns: minmax(0, 230px) minmax(0, 1fr);
	gap: clamp(24px, 4vw, 70px);
	border-top: 1px solid var(--lg-rule);
	padding: clamp(30px, 5vh, 52px) 0;
}
.lg-legal__section:last-of-type { border-bottom: 1px solid var(--lg-rule); }
.lg-legal__section .lg-heading { display: flex; flex-direction: column; gap: 10px; }
.lg-legal__num { font-family: var(--lg-sans); font-size: 10px; font-weight: 300; letter-spacing: .24em; text-transform: uppercase; color: var(--lg-faint); }
.lg-legal__body { display: flex; flex-direction: column; gap: 16px; max-width: 620px; }
.lg-legal__pairs { display: flex; flex-direction: column; margin-top: 6px; }
.lg-pair__val--link { text-decoration: underline; text-underline-offset: 5px; }
.lg-legal__foot { margin-top: clamp(34px, 5vh, 60px); max-width: 620px; }

/* --- À propos ---------------------------------------------------------- */
.lg-about__intro {
	margin: 8px 0 0;
	max-width: 680px;
	font-size: clamp(14px, 1.5vw, 17px);
	font-weight: 300; line-height: 2;
	color: var(--lg-body);
	text-wrap: pretty;
}

/* --- Remerciement ------------------------------------------------------ */
.lg-thanks__head { display: flex; flex-direction: column; gap: 18px; max-width: 620px; margin-bottom: clamp(48px, 8vh, 90px); }
.lg-thanks__grid { display: grid; grid-template-columns: minmax(0, 1fr) var(--lg-aside); gap: var(--lg-gutter-wide); align-items: start; }
.lg-thanks__main { min-width: 0; border-right: 1px solid var(--lg-rule); padding-right: clamp(24px, 3vw, 52px); }
.lg-thanks__steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: clamp(20px, 3vw, 40px); margin: 26px 0 clamp(40px, 6vh, 64px); }
.lg-thanks__step { display: flex; flex-direction: column; gap: 10px; }
.lg-thanks__num { font-family: ui-monospace, Menlo, monospace; font-size: 9px; letter-spacing: .24em; color: var(--lg-faint); }
.lg-thanks__label { font-size: 13px; font-weight: 300; }
.lg-thanks__meta { display: flex; flex-direction: column; border-top: 1px solid var(--lg-rule-soft); padding-top: 6px; }
.lg-thanks__actions { display: flex; flex-wrap: wrap; gap: 26px; margin-top: clamp(30px, 5vh, 48px); }
.lg-thanks__recap { min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.lg-thanks__items { display: flex; flex-direction: column; border-top: 1px solid var(--lg-rule-soft); margin-top: 4px; }
.lg-thanks__item { display: flex; align-items: center; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--lg-rule-soft); }
.lg-thanks__item-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.lg-thanks__item-name { font-size: 13px; font-weight: 300; }
.lg-thanks__item-spec { font-size: 11px; font-weight: 300; letter-spacing: .14em; text-transform: uppercase; color: var(--lg-muted); }
.lg-thanks__item-total { flex: 0 0 auto; font-size: 13px; font-weight: 300; font-variant-numeric: tabular-nums; }
.lg-thanks__totals { display: flex; flex-direction: column; gap: 13px; }


/* ==========================================================================
   20. MOBILE

   Une seule colonne, des cibles d'au moins 44 px, aucun texte superposé.
   ========================================================================== */

@media (max-width: 1000px) {
	.lg-thanks__grid { grid-template-columns: minmax(0, 1fr); }
	.lg-thanks__main { border-right: 0; border-bottom: 1px solid var(--lg-rule); padding-right: 0; padding-bottom: clamp(28px, 5vh, 44px); }
}

@media (max-width: 900px) {
	.lg-legal__section { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.lg-pair { flex-direction: column; gap: 6px; }
	.lg-pair__key { flex: 0 0 auto; }
}

@media (max-width: 760px) {

	/* Espace client et registre : la navigation passe en rail horizontal. */
	.lg-account { flex-direction: column; gap: 28px; }
	.lg-side {
		width: 100%;
		position: static;
		flex-direction: row;
		flex-wrap: nowrap;
		gap: 22px;
		overflow-x: auto;
		border-bottom: 1px solid var(--lg-rule-soft);
		padding-bottom: 4px;
		-webkit-overflow-scrolling: touch;
	}
	.lg-side::-webkit-scrollbar { display: none; }
	.lg-side__name { display: none; }
	.lg-side__link, .lg-side__logout {
		flex: 0 0 auto;
		padding: 12px 0;
		margin: 0;
		white-space: nowrap;
		letter-spacing: .2em;
	}
	.lg-side__link[aria-current="page"] { border-bottom: 1px solid var(--lg-ink); }

	/* Tableaux : chaque ligne devient un bloc lisible. */
	.woocommerce-orders-table thead,
	.woocommerce-MyAccount-paymentMethods thead { display: none; }
	.woocommerce-orders-table tr,
	.woocommerce-MyAccount-paymentMethods tr {
		display: flex; flex-direction: column; gap: 8px;
		padding: 22px 0;
		border-bottom: 1px solid var(--lg-rule-soft);
	}
	.woocommerce-orders-table td,
	.woocommerce-MyAccount-paymentMethods td { padding: 0; border: 0; }
	.woocommerce-orders-table td::before {
		content: attr(data-title);
		display: block;
		margin-bottom: 4px;
		font-size: 9px; letter-spacing: .26em; text-transform: uppercase;
		color: var(--lg-muted);
	}
	.woocommerce-orders-table__cell-order-actions,
	.woocommerce-MyAccount-paymentMethods td.payment-method-actions { text-align: left; }
}

@media (max-width: 720px) {

	/* Panier et paiement : plus de colonne, plus de filet vertical. */
	[data-cart], .lg-split, .lg-checkout { grid-template-columns: minmax(0, 1fr) !important; }
	[data-items], .lg-split__main, .lg-checkout__fields {
		border-right: 0 !important;
		border-bottom: 1px solid var(--lg-rule);
		padding-right: 0 !important;
		padding-bottom: 30px;
	}
	[data-recap], .lg-split__aside, .lg-checkout__recap { position: static !important; padding-top: 26px; }

	/* Lignes du panier : vignette et texte côte à côte, actions dessous. */
	.lg-cart-line { gap: 14px; }
	.lg-cart-line .lg-thumb { width: 76px; }

	/* Champs à hauteur de doigt. */
	.lg-input, .lg-select, .lg-textarea,
	.woocommerce form .form-row input.input-text,
	.woocommerce form .form-row select { padding: 14px 0; font-size: 16px; }
	.lg-btn { padding: 18px 28px; }
	.lg-btn--block { padding: 20px 0; }
	.lg-qty button { padding: 14px 12px; margin: -14px -12px; }

	/* Grilles de formulaire : une colonne, jamais de champ coupé. */
	.lg-field-grid,
	.woocommerce-billing-fields__field-wrapper,
	.woocommerce-shipping-fields__field-wrapper { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 680px) {

	/* Header : le logo seul au centre, le reste allégé. */
	.lg-header { height: 60px; padding: 0 16px; gap: 8px; }
	.lg-header .lg-wordmark { font-size: 11px; letter-spacing: .1em; margin-left: .1em; }
	.lg-menu-btn__label { display: none; }
	.lg-header__side--right { gap: 14px; }
	.lg-header__icon svg { width: 20px; height: 20px; }

	/* Le voile d'ouverture suit la hauteur réduite du header. */
	.lg-page { padding-top: clamp(96px, 15vh, 130px); }
	.lg-overlay__bar { height: 60px; padding: 0 16px; }
	.lg-overlay__nav { flex-direction: column; gap: 40px; padding: 34px 16px 60px; }
	.lg-overlay__link { font-size: clamp(30px, 11vw, 46px); }

	/* Le menu de langue s'ancre au bord droit sans déborder. */
	.lg-lang__menu { right: -8px; min-width: 160px; }

	/* Hero : le bloc ne peut plus chevaucher la grille. */
	.lg-hero { min-height: 92svh; }
	.lg-hero__block { bottom: clamp(120px, 26vh, 220px) !important; padding: 0 20px; }
	.lg-hero__wordmark { font-size: clamp(20px, 7vw, 30px); letter-spacing: .24em; margin-left: .24em; }

	/* Fiche produit : le panneau se pose sous le visuel. */
	.lg-product { grid-template-columns: minmax(0, 1fr); gap: 34px; }
	.lg-product__panel {
		position: static;
		min-height: 0; max-height: none; overflow: visible;
		border-left: 0; padding-left: 0;
	}
	.lg-narrative { grid-template-columns: minmax(0, 1fr); margin-left: 0 !important; gap: 22px; }
	.lg-two { grid-template-columns: minmax(0, 1fr); gap: 22px; }
	.lg-two__figure { order: -1; }

	/* Volets d'assistance : moins hauts, titre à gauche. */
	.lg-accordion__item { min-height: 92px; padding: 20px 0; }
	.lg-accordion__title { font-size: 15px; }

	/* Registre : les chiffres s'empilent. */
	.lg-metrics { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.lg-list__row { grid-template-columns: minmax(0, 1fr) !important; gap: 6px; }
	.lg-list__num { text-align: left; }

	/* Remerciement. */
	.lg-thanks__steps { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.lg-thanks__actions { flex-direction: column; gap: 16px; }

	/* Pied de page : colonnes empilées, mentions en liste. */
	.lg-footer__cols { flex-direction: column; gap: 34px; }
	.lg-footer__col { flex: 1 1 auto; }
	.lg-footer__bottom { flex-direction: column; align-items: flex-start; gap: 18px; }
	.lg-footer__legal { gap: 14px 20px; }

	/* Aucun texte ne doit déborder de sa colonne. */
	.lg-title, .lg-title--xl, .lg-heading, .lg-hero__wordmark { overflow-wrap: anywhere; }
}

@media (max-width: 420px) {
	.lg-header .lg-wordmark { font-size: 10px; letter-spacing: .06em; margin-left: .06em; }
	.lg-title { font-size: clamp(24px, 8vw, 32px); }
	.lg-title--xl { font-size: clamp(26px, 9vw, 36px); }
	.lg-drop-grid { gap: 14px; }
}

/* ==========================================================================
   BLOC RÈGLEMENT — ce que la passerelle injecte

   Stripe et WooCommerce rendent leur propre liste d'options : radios
   natives, cadres gris, coins arrondis. Nos lignes .lg-pay les remplacent ;
   il reste à effacer ce qui vient par-dessus.
   ========================================================================== */

.woocommerce-checkout #payment,
.woocommerce-checkout #payment ul.payment_methods,
.woocommerce-checkout #payment ul.wc_payment_methods,
.woocommerce-checkout #payment div.payment_box,
.woocommerce-checkout #payment .payment_box,
.wc-stripe-upe-element,
#wc-stripe-upe-element,
.wc-stripe-elements-field,
.wc_payment_method,
li.wc_payment_method {
	list-style: none;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}
.woocommerce-checkout #payment div.payment_box::before,
.woocommerce-checkout #payment .payment_box::before { content: none; }

/* Les radios et libellés natifs cèdent la place à nos lignes. */
.woocommerce-checkout #payment ul.payment_methods > li > input[type="radio"],
.woocommerce-checkout #payment ul.payment_methods > li > label,
.woocommerce-checkout #payment ul.wc_payment_methods > li > input[type="radio"],
.woocommerce-checkout #payment ul.wc_payment_methods > li > label { display: none; }

/* Titre « Options de paiement » : en surtitre gris, jamais en gras noir. */
.woocommerce-checkout #payment h3,
.woocommerce-checkout #payment h4,
.wc-stripe-upe-element h3,
#payment .wc-stripe-payment-title {
	margin: 0 0 18px;
	font-family: var(--lg-sans);
	font-size: 9px;
	font-weight: 400;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--lg-muted);
}

/* Description d'une passerelle : une note, pas un encadré. */
.woocommerce-checkout #payment .payment_box p,
.wc-stripe-upe-element p,
.woocommerce-checkout #payment .about_paypal {
	margin: 0;
	font-size: 12px;
	font-weight: 300;
	line-height: 2;
	color: var(--lg-muted);
}

/* Champs bancaires : ils vivent dans une iframe, seule leur boîte nous
   revient. Un filet bas, comme partout ailleurs sur le site. */
.wc-stripe-elements-field,
.wc-stripe-iban-element-field,
.woocommerce-checkout #payment .form-row {
	margin: 0 0 22px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
}
.wc-stripe-elements-field .StripeElement,
.StripeElement {
	padding: 12px 0;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--lg-rule);
	border-radius: 0;
	transition: border-color .3s ease;
}
.StripeElement--focus { border-bottom-color: var(--lg-ink); }
.StripeElement--invalid { border-bottom-color: #A8202F; }

/* Le bloc de champs de la passerelle retenue. */
.lg-gateway-fields { padding: 22px 0 0; }
.lg-gateway-fields:empty { display: none; }


/* ==========================================================================
   MOBILE — header et menu principal
   ========================================================================== */

@media (max-width: 680px) {

	/* Le compte se rejoint depuis le menu : l'icône encombrait la barre. */
	.lg-header__side--right > a[href*="compte"],
	.lg-header__side--right > a[title="Compte"],
	.lg-header__account { display: none; }

	/* Le logo reprend de la présence, la place étant libérée. */
	.lg-header .lg-wordmark {
		font-size: 15px;
		letter-spacing: .16em;
		margin-left: .16em;
	}

	/* Menu principal : les colonnes secondaires passent dessous. */
	.lg-overlay__nav {
		flex-direction: column;
		gap: clamp(34px, 6vh, 56px);
	}
	.lg-overlay__primary { flex: 0 0 auto; width: 100%; }
	.lg-overlay__secondary {
		flex: 0 0 auto;
		width: 100%;
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr));
		gap: 28px 24px;
		border-top: 1px solid var(--lg-rule-soft);
		padding-top: clamp(26px, 4vh, 40px);
	}
}

@media (max-width: 420px) {
	.lg-header .lg-wordmark { font-size: 13px; letter-spacing: .1em; margin-left: .1em; }
	.lg-overlay__secondary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}