/* ============================================================================
   voslentilles.fr — couche de design
   ----------------------------------------------------------------------------
   Le site tournait sur la pile de polices systeme, sans echelle typographique
   ni interlettrage, avec des couleurs Tailwind ecrites en dur dans les pages
   (#64748b, #f8fafc) qui ignoraient la palette du theme. Cette feuille pose un
   jeu de tokens unique et l'applique partout.

   Parti pris : la palette est derivee du logo lui-meme (#0a6ebd et son ton
   fonce #00457b) plutot que d'une palette inventee, et la seule audace est
   l'echelle de dioptries de l'accueil — la notation du metier, pas un ornement.
   ========================================================================== */

@font-face {
	font-family: 'Archivo';
	src: url('fonts/archivo-latin.woff2') format('woff2-variations');
	font-weight: 500 800;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212;
}

:root {
	/* Couleur — tirée du logo */
	--vl-blue:       #0a6ebd;
	--vl-blue-deep:  #00457b;
	--vl-blue-mid:   #085ea1;
	--vl-ink:        #10243a;
	--vl-slate:      #5a6b7d;
	--vl-line:       #dbe5ee;
	/* Aplat des bandeaux : strictement neutre (R=G=B). Une teinte bleutee
	   posee contre du blanc pur fait paraitre le blanc voisin chaud — c'est du
	   contraste simultane, pas une couleur rouge dans la feuille. On retire donc
	   toute teinte : sans nuance, rien ne peut virer. */
	--vl-surface:    #f4f4f5;

	/* Rythme */
	--vl-section:    clamp(3rem, 6vw, 5.5rem);
	--vl-radius:     10px;
}

/* ---------------------------------------------------------------- Typographie
   Archivo sur les titres seulement. Le corps reste sur la pile systeme :
   rapide, deja lisible, et ca evite de charger un second fichier. */
h1, h2, h3, h4,
.ea-filter-title,
.ea-mm-top,
.woocommerce-loop-product__title {
	font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	letter-spacing: -0.021em;
	color: var(--vl-ink);
}
h1 { font-weight: 700; line-height: 1.12; }
h2 { font-weight: 700; line-height: 1.18; }
h3 { font-weight: 600; line-height: 1.25; }

/* Les chiffres d'un site d'optique s'alignent : prix, dioptries, compteurs. */
.price, .amount, .woocommerce-Price-amount,
.ea-lens-price-unit, .ea-lens-total-amount, .ea-lens-tier-price,
.ea-filter-count, .vl-scale-tick {
	font-variant-numeric: tabular-nums;
	font-feature-settings: 'tnum' 1;
}

/* Surtitre : sert a nommer une section sans lui voler la vedette. */
.vl-eyebrow {
	font-family: 'Archivo', sans-serif;
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--vl-blue);
	margin: 0 0 .5rem;
}

/* ------------------------------------------------------------------- Sections
   Rythme vertical unique. Les pages posaient leurs propres paddings, d'ou des
   respirations differentes d'une section a l'autre. */
.entry-content > .wp-block-group.alignfull {
	padding-top: var(--vl-section);
	padding-bottom: var(--vl-section);
}
.entry-content > .wp-block-group.alignfull.has-background {
	background-color: var(--vl-surface) !important;   /* ecrase le menthe et le gris ecrits en dur */
}

/* ---------------------------------------------------------------- Cartes
   Les boutons ne s'alignaient pas : la carte la plus bavarde poussait le sien
   26 px plus bas. On empile en colonne et on epingle l'action en pied. */
.wp-block-columns .wp-block-column.has-border-color {
	display: flex;
	flex-direction: column;
	border-color: var(--vl-line) !important;
	border-radius: var(--vl-radius);
	background: #fff;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.wp-block-columns .wp-block-column.has-border-color:hover {
	border-color: var(--vl-blue) !important;
	box-shadow: 0 10px 28px rgba(10, 110, 189, .10);
	transform: translateY(-2px);
}
.wp-block-columns .wp-block-column.has-border-color > .wp-block-buttons {
	margin-top: auto;
	padding-top: 1rem;
}

/* -------------------------------------------------------------- Boutons */
.wp-block-button__link,
.ea-lens-atc-btn {
	font-family: 'Archivo', sans-serif;
	font-weight: 600;
	letter-spacing: -0.005em;
	border-radius: 8px;
	transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	background-color: var(--vl-blue-deep);
}

/* --------------------------------------------------------- Grille produits
   Les vignettes n'avaient ni cadre ni ombre : la grille se lisait comme une
   planche d'images, pas comme des articles cliquables. */
ul.products li.product {
	border: 1px solid var(--vl-line);
	border-radius: var(--vl-radius);
	padding: 14px 14px 18px;
	background: #fff;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
ul.products li.product:hover {
	border-color: var(--vl-blue);
	box-shadow: 0 10px 28px rgba(10, 110, 189, .10);
	transform: translateY(-2px);
}
ul.products li.product .woocommerce-loop-product__title {
	font-size: .98rem;
	font-weight: 600;
}
ul.products li.product .price {
	color: var(--vl-ink);
	font-weight: 700;
}

/* ------------------------------------------------------- Section confiance
   Quatre colonnes de texte nu. Un filet en tete de colonne suffit a les poser
   comme des engagements distincts — pas de numerotation : ce n'est pas une
   sequence, l'ordre ne porte aucune information. */
.vl-trust .wp-block-column {
	border-top: 2px solid var(--vl-blue);
	padding-top: 1rem;
}
.vl-trust .wp-block-column h3 {
	font-size: 1.02rem;
	margin: 0 0 .4rem;
}

/* =============================================================== SIGNATURE
   L'echelle de correction.

   C'est la notation du metier — celle qui figure sur l'ordonnance — et c'est
   une affirmation verifiable : le catalogue couvre desormais toute la plage
   fabricant. Les discounters la relegue en petits caracteres ; ici elle est
   l'element que la page laisse en memoire. Rien d'autre sur la page ne cherche
   a etre remarque.
   ========================================================================== */
.vl-scale {
	margin: 3.25rem auto 0;
	max-width: 780px;
}
/* Les graduations couvrent -12,00 a +8,00 : une par dioptrie, 21 au total. */
.vl-scale-rule {
	position: relative;
	height: 30px;
	border-bottom: 2.5px solid var(--vl-blue);
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}
.vl-scale-rule span {
	width: 1px;
	height: 8px;
	background: var(--vl-blue);
	opacity: .38;
}
.vl-scale-rule span.is-major { height: 18px; width: 2.5px; opacity: 1; }

/* Les etiquettes sont posees a leur position reelle sur l'axe, pas reparties
   a intervalles egaux : le zero tombe a 60 %, la ou il tombe vraiment. */
.vl-scale-labels {
	position: relative;
	height: 1.4rem;
	margin-top: .4rem;
	font-family: 'Archivo', sans-serif;
	font-size: .95rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--vl-blue-deep);
}
.vl-scale-labels b {
	position: absolute;
	transform: translateX(-50%);
	font-weight: 600;
	white-space: nowrap;
}
.vl-scale-labels b:first-child  { transform: none; }
.vl-scale-labels b:last-child   { transform: translateX(-100%); }

.vl-scale-note {
	margin: .75rem 0 0;
	font-family: 'Archivo', sans-serif;
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--vl-blue-deep);
	opacity: .78;
}

/* ------------------------------------------------------------------ Divers */
.ct-footer { border-top: 1px solid var(--vl-line); }

/* Accessibilite : le focus clavier doit rester visible partout. */
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible {
	outline: 2px solid var(--vl-blue);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-columns .wp-block-column.has-border-color,
	ul.products li.product { transition: none; }
	.wp-block-columns .wp-block-column.has-border-color:hover,
	ul.products li.product:hover { transform: none; }
}

@media (max-width: 781px) {
	.vl-scale { margin-top: 1.75rem; }
	.vl-scale-labels { font-size: .7rem; }
}

/* ------------------------------------------------- Reassurance remboursement
   Une ligne discrete sur la fiche produit (l'espace vertical y est compte),
   un bloc plus explicite au panier et a la commande. */
.vl-remb {
	/* Du texte courant, pas une grille : en flex, le libellé, la phrase et le
	   lien devenaient trois colonnes qui se cassaient chacune de leur côté. */
	margin: .85rem 0 0;
	font-size: .88rem;
	line-height: 1.5;
	color: var(--vl-slate);
}
.vl-remb-ico { color: var(--vl-blue); font-weight: 700; margin-right: .35rem; }
.vl-remb a { color: var(--vl-blue); text-decoration: underline; text-underline-offset: 2px; }

.vl-remb-bloc {
	margin: 1.5rem 0;
	padding: 1.1rem 1.25rem;
	border: 1px solid var(--vl-line);
	border-left: 3px solid var(--vl-blue);
	border-radius: var(--vl-radius);
	background: #fff;
}
.vl-remb-titre {
	margin: 0 0 .55rem;
	font-family: 'Archivo', sans-serif;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--vl-blue);
}
.vl-remb-bloc ul { margin: 0; padding-left: 1.1rem; }
.vl-remb-bloc li { margin: 0 0 .4rem; font-size: .9rem; line-height: 1.5; color: var(--vl-slate); }
.vl-remb-bloc li:last-child { margin-bottom: 0; }
.vl-remb-bloc a { color: var(--vl-blue); }

/* --------------------------------------------------------------- Tiers payant */
.vl-remb-cta { margin: .8rem 0 0; }
.vl-remb-cta a {
	display: inline-block;
	padding: .5rem .9rem;
	border-radius: 8px;
	background: var(--vl-blue);
	color: #fff;
	font-family: 'Archivo', sans-serif;
	font-weight: 600;
	font-size: .88rem;
	text-decoration: none;
}
.vl-remb-cta a:hover { background: var(--vl-blue-deep); color: #fff; }

.vltp-manque, .vltp-encours {
	margin: 1.2rem 0;
	padding: 1rem 1.15rem;
	border-radius: var(--vl-radius);
	border-left: 3px solid var(--vl-blue);
	background: var(--vl-surface);
}
.vltp-manque ul { margin: .4rem 0 0; padding-left: 1.1rem; }
.vltp-form { margin: 1.2rem 0; }
.vltp-form h3 { margin-bottom: .6rem; }
.vltp-form input[type="number"] { max-width: 9em; }

/* ====================================================== Section tiers payant
   L'argument le plus fort face au discounter, place juste sous le hero.
   La numerotation 1-2-3 est justifiee : c'est une sequence reelle, l'ordre
   porte une information dont le lecteur a besoin. */
.vl-tp-section {
	padding: var(--vl-section) 1.25rem;
	background: var(--vl-surface);
	border-top: 1px solid var(--vl-line);
	border-bottom: 1px solid var(--vl-line);
}
/* Meme largeur de conteneur que le reste de la page : a 1050 px le bord
   gauche tombait 120 px a droite des autres sections, ce qui se lit comme un
   defaut d'alignement et non comme une intention. La longueur de ligne du
   chapo est bornee separement. */
.vl-tp-inner { max-width: 1290px; margin: 0 auto; }
.vl-tp-h2 {
	margin: 0 0 .5rem;
	font-family: 'Archivo', sans-serif;
	font-weight: 700;
	font-size: clamp(1.6rem, 3.2vw, 2.2rem);
	letter-spacing: -0.022em;
	line-height: 1.15;
	color: var(--vl-ink);
}
.vl-tp-chapo {
	margin: 0 0 2.25rem;
	max-width: 46ch;
	font-size: 1.02rem;
	line-height: 1.55;
	color: var(--vl-slate);
}

.vl-tp-etapes {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}
.vl-tp-etape {
	display: flex;
	flex-direction: column;
	gap: .45rem;
	padding-top: 1rem;
	border-top: 2px solid var(--vl-blue);
}
.vl-tp-num {
	font-family: 'Archivo', sans-serif;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .12em;
	color: var(--vl-blue);
	font-variant-numeric: tabular-nums;
}
.vl-tp-titre {
	font-family: 'Archivo', sans-serif;
	font-size: 1.04rem;
	font-weight: 600;
	letter-spacing: -0.012em;
	color: var(--vl-ink);
}
.vl-tp-texte { font-size: .92rem; line-height: 1.55; color: var(--vl-slate); }

.vl-tp-cta { margin: 2.25rem 0 0; }
.vl-tp-cta a {
	display: inline-block;
	padding: .8rem 1.5rem;
	border-radius: 8px;
	background: var(--vl-blue);
	color: #fff;
	font-family: 'Archivo', sans-serif;
	font-weight: 600;
	font-size: .98rem;
	text-decoration: none;
	transition: background-color .18s ease;
}
.vl-tp-cta a:hover { background: var(--vl-blue-deep); color: #fff; }

@media (max-width: 900px) {
	.vl-tp-etapes { grid-template-columns: 1fr; gap: 1.4rem; }
	.vl-tp-chapo { margin-bottom: 1.75rem; }
}

/* ============================================ Sélecteur de correction (duo)
   Négatives à gauche, positives à droite. Une ordonnance se lit par signe :
   on cherche « −4,25 », pas la 37e ligne d'une liste. */
.vl-duo { position: relative; }
.vl-duo > select { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }

.vl-duo-bouton {
	width: 100%;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	/* Aligné au pixel sur .ea-lens-select : sans ça le champ sphère faisait
	   30 px de haut au milieu de selects de 40, et sautait aux yeux. */
	min-height: 40px;
	padding: 7px 11px;
	border: 1.5px solid var(--vl-line);
	border-radius: 10px;
	background: #fff;
	color: var(--vl-ink);
	font: inherit;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.4;
	font-variant-numeric: tabular-nums;
	text-align: left;
	cursor: pointer;
}
.vl-duo-bouton::after { content: '⌄'; color: var(--vl-slate); font-size: .9em; line-height: 1; }
.vl-duo-bouton.is-vide { color: var(--vl-slate); font-weight: 500; }
.vl-duo-bouton:hover { border-color: var(--vl-blue); }
.vl-duo-bouton[aria-expanded="true"] { border-color: var(--vl-blue); box-shadow: 0 0 0 3px rgba(10,110,189,.14); }

.vl-duo-panneau {
	position: absolute;
	z-index: 40;
	top: calc(100% + 4px);
	left: 0;
	min-width: 100%;
	max-height: 15rem;
	overflow-y: auto;
	padding: 6px;
	border: 1px solid var(--vl-line);
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 14px 34px rgba(16, 36, 58, .16);
}
.vl-duo-panneau.is-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 0 6px; }
.vl-duo-panneau.is-simple { display: block; }
.vl-duo-autres { grid-column: 1 / -1; border-top: 1px solid var(--vl-line); margin-top: 4px; padding-top: 4px; }

.vl-duo-opt {
	display: block;
	width: 100%;
	padding: 6px 8px;
	border: 0;
	border-radius: 6px;
	background: none;
	color: var(--vl-ink);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	text-align: center;
	cursor: pointer;
	white-space: nowrap;
}
.vl-duo-opt:hover { background: var(--vl-surface); }
.vl-duo-opt.is-active { background: var(--vl-blue); color: #fff; }
.vl-duo-opt:focus-visible { outline: 2px solid var(--vl-blue); outline-offset: -2px; }

/* Saisie d'ordonnance : paramètres en lignes, yeux en colonnes. */
.ea-ordo-saisie--transpose { width: 100%; border-collapse: separate; border-spacing: 0 8px; }
.ea-ordo-saisie--transpose th { text-align: left; font-size: .9rem; }
.ea-ordo-saisie--transpose th[scope="row"] { width: 42%; padding-right: 1rem; font-weight: 600; color: var(--vl-ink); }
.ea-ordo-saisie--transpose th[scope="row"] em { font-style: normal; font-weight: 500; color: var(--vl-slate); }
.ea-ordo-saisie--transpose td { width: 29%; padding-right: 8px; vertical-align: middle; }

@media (max-width: 640px) {
	.ea-ordo-saisie--transpose th[scope="row"] { width: 34%; font-size: .85rem; }
	.vl-duo-panneau { max-height: 12rem; }
}

/* ==================================================== Dépôt d'un document
   Le <input type="file"> natif affiche un bouton système daté, différent d'un
   navigateur à l'autre, et n'indique pas le fichier choisi de façon lisible.
   On le masque et on habille son <label> : le champ reste un vrai input, donc
   la validation, l'accessibilité et l'envoi du formulaire sont inchangés. */
.vl-fichier { display: block; }
.vl-fichier input[type="file"] {
	position: absolute;
	width: 1px; height: 1px;
	opacity: 0;
	overflow: hidden;
}
.vl-fichier-zone {
	display: flex;
	align-items: center;
	gap: .85rem;
	padding: 1rem 1.15rem;
	border: 1.5px dashed var(--vl-line);
	border-radius: var(--vl-radius);
	background: var(--vl-surface);
	cursor: pointer;
	transition: border-color .18s ease, background-color .18s ease;
}
.vl-fichier-zone:hover,
.vl-fichier input[type="file"]:focus-visible + .vl-fichier-zone {
	border-color: var(--vl-blue);
	background: #fff;
}
.vl-fichier input[type="file"]:focus-visible + .vl-fichier-zone {
	outline: 2px solid var(--vl-blue);
	outline-offset: 2px;
}
.vl-fichier-zone.is-rempli { border-style: solid; border-color: var(--vl-blue); background: #fff; }

.vl-fichier-ico {
	flex: 0 0 auto;
	width: 38px; height: 38px;
	display: grid;
	place-items: center;
	border-radius: 9px;
	background: color-mix(in srgb, var(--vl-blue) 12%, #fff);
	color: var(--vl-blue);
	font-size: 17px;
}
.vl-fichier-txt { min-width: 0; }
.vl-fichier-titre {
	display: block;
	font-family: 'Archivo', sans-serif;
	font-weight: 600;
	font-size: .95rem;
	color: var(--vl-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.vl-fichier-aide { display: block; font-size: .82rem; color: var(--vl-slate); margin-top: .1rem; }

/* ============================================ Navigation de l'espace client
   Une liste de liens nus. On lui donne la lisibilité d'un menu : une ligne par
   entrée, séparateurs fins, état actif franc, chevron pour signaler qu'on entre
   quelque part. */
.woocommerce-MyAccount-navigation ul {
	margin: 0 0 2rem;
	padding: 0;
	list-style: none;
	border: 1px solid var(--vl-line);
	border-radius: var(--vl-radius);
	overflow: hidden;
	background: #fff;
}
.woocommerce-MyAccount-navigation li { margin: 0; border-bottom: 1px solid var(--vl-line); }
.woocommerce-MyAccount-navigation li:last-child { border-bottom: 0; }
.woocommerce-MyAccount-navigation li a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	padding: .85rem 1.1rem;
	font-family: 'Archivo', sans-serif;
	font-size: .96rem;
	font-weight: 600;
	color: var(--vl-ink);
	text-decoration: none;
	transition: background-color .16s ease, color .16s ease;
}
.woocommerce-MyAccount-navigation li a::after {
	content: '›';
	flex: 0 0 auto;
	font-size: 1.35em;
	line-height: 1;
	color: var(--vl-slate);
	transition: transform .16s ease, color .16s ease;
}
.woocommerce-MyAccount-navigation li a:hover { background: var(--vl-surface); color: var(--vl-blue); }
.woocommerce-MyAccount-navigation li a:hover::after { color: var(--vl-blue); transform: translateX(2px); }
.woocommerce-MyAccount-navigation li.is-active > a,
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--active > a {
	background: var(--vl-blue);
	color: #fff;
}
.woocommerce-MyAccount-navigation li.is-active > a::after,
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--active > a::after { color: #fff; }

/* La déconnexion n'est pas une destination comme les autres. */
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--vl-slate); font-weight: 500; }

/* ============================ Espace client : navigation en onglets sur mobile
   En colonne, les onze entrées poussaient le contenu de l'onglet choisi sous la
   ligne de flottaison : on cliquait « Mes ordonnances » puis on devait scroller
   pour voir le formulaire. Sur mobile la navigation devient une barre d'onglets
   qui défile horizontalement, collée en haut, le contenu juste dessous. */
@media (max-width: 900px) {
	.woocommerce-MyAccount-navigation {
		position: sticky;
		top: 0;
		z-index: 20;
		margin: 0 -1rem 1.25rem;
		padding: 0;
		background: #fff;
		border-bottom: 1px solid var(--vl-line);
	}
	.woocommerce-MyAccount-navigation ul {
		display: flex;
		gap: 0;
		margin: 0;
		padding: 0 .5rem;
		border: 0;
		border-radius: 0;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.woocommerce-MyAccount-navigation ul::-webkit-scrollbar { display: none; }
	.woocommerce-MyAccount-navigation li { border-bottom: 0; scroll-snap-align: start; }
	.woocommerce-MyAccount-navigation li a {
		padding: .8rem .85rem;
		white-space: nowrap;
		border-bottom: 3px solid transparent;
		font-size: .92rem;
	}
	/* L'onglet actif garde l'aplat bleu du bureau : sur une barre d'onglets il
	   se repère mieux qu'un souligné, et c'est le repère que le client attend.
	   Seuls les coins sont adoucis vers le haut. */
	.woocommerce-MyAccount-navigation li.is-active > a {
		border-radius: 8px 8px 0 0;
	}
	.woocommerce-MyAccount-navigation li a::after { display: none; }
	.woocommerce-MyAccount-navigation li a:hover { background: none; }
	.woocommerce-MyAccount-content { margin-top: 0; }
}

/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  SIGNATURE — la mesure                                                   ║
   ╚══════════════════════════════════════════════════════════════════════════╝
   Le concurrent signe ses pages au feutre : flèches en zigzag, surlignage tracé
   à la main. C'est le registre du discounter sympathique.

   Ici, la signature vient du métier : un opticien mesure. Ce qui doit être
   souligné l'est par une RÈGLE GRADUÉE — un filet ponctué de graduations, comme
   l'échelle de dioptries du hero. Même geste, autre registre : précis plutôt que
   spontané. C'est exactement ce qui distingue un opticien diplômé d'un
   comparateur de prix, et ça ne ressemble à personne d'autre.

   Deux outils, pas trois : la règle pour souligner, les pastilles pour qualifier. */

/* --- La règle graduée : remplace le surlignage --------------------------- */
.vl-mesure {
	position: relative;
	display: inline;
	font-weight: 700;
	color: var(--vl-ink);
	background-image:
		/* le filet */
		linear-gradient( to right, var(--vl-blue) 0 100% ),
		/* les graduations, une tous les 8 px */
		repeating-linear-gradient( to right,
			var(--vl-blue) 0 1px, transparent 1px 8px );
	background-repeat: no-repeat, repeat-x;
	background-size: 100% 2px, 100% 5px;
	background-position: 0 100%, 0 calc(100% - 2px);
	padding-bottom: 9px;
}

/* Variante bloc, pour coiffer un titre de section. */
.vl-regle {
	display: block;
	height: 12px;
	margin-bottom: 1rem;
	border-bottom: 2px solid var(--vl-blue);
	background: repeating-linear-gradient( to right,
		color-mix(in srgb, var(--vl-blue) 55%, transparent) 0 1px, transparent 1px 9px );
	background-repeat: repeat-x;
	background-size: 100% 6px;
	background-position: 0 100%;
}
.vl-regle--court { max-width: 92px; }

/* --- Les pastilles : qualifier d'un coup d'œil --------------------------- */
.vl-pastille {
	display: inline-flex;
	align-items: center;
	gap: .35em;
	padding: .28em .7em;
	border-radius: 999px;
	font-family: 'Archivo', sans-serif;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	line-height: 1.35;
}
.vl-pastille::before {
	content: '';
	width: .45em; height: .45em;
	border-radius: 50%;
	background: currentColor;
	flex: 0 0 auto;
}
.vl-pastille--info      { background: color-mix(in srgb, var(--vl-blue) 12%, #fff);  color: var(--vl-blue-deep); }
.vl-pastille--fort      { background: var(--vl-blue);                                 color: #fff; }
.vl-pastille--ok        { background: #e7f4ec;                                        color: #1f6b42; }
.vl-pastille--attention { background: #fdf1e3;                                        color: #96541b; }
.vl-pastille--neutre    { background: var(--vl-surface);                              color: var(--vl-slate); }
.vl-pastille--sansPoint::before { display: none; }

/* --- Application : les endroits où un statut se lit ---------------------- */

/* « meilleur tarif » sur le conditionnement */
.ea-lens-tier-badge, .ea-lens-tier .badge, .ea-lens-tiers .meilleur {
	border-radius: 999px !important;
	font-family: 'Archivo', sans-serif;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
}

/* Rupture de stock sur la grille produits */
ul.products li.product .onsale,
ul.products li.product .outofstock,
.wc-block-components-product-badge {
	border-radius: 999px;
	font-family: 'Archivo', sans-serif;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
}

/* Encart « préparé sur commande » : une pastille, pas un pavé. */
.ea-lens-on-demand-notice {
	border-radius: 999px;
	padding: .45rem .95rem;
	font-size: .82rem;
}

/* ═══════════════════════════════════════════ Parcours de filtrage (mobile) */
.vl-barre-tri { display: none; }
.vl-fond, .vl-panneau { display: none; }

@media (max-width: 900px) {
	.vl-barre-tri {
		display: block;
		position: sticky;
		top: 0;
		z-index: 25;
		margin: 0 0 1rem;
		padding: .7rem 0;
		background: #fff;
		border-bottom: 1px solid var(--vl-line);
	}
	.vl-barre-actions { display: flex; gap: .6rem; }
	.vl-bouton-filtre, .vl-bouton-tri {
		flex: 1 1 0;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: .45rem;
		padding: .7rem 1rem;
		border: 1.5px solid var(--vl-line);
		border-radius: 999px;
		background: #fff;
		color: var(--vl-ink);
		font-family: 'Archivo', sans-serif;
		font-weight: 600;
		font-size: .95rem;
		cursor: pointer;
	}
	.vl-bouton-filtre::before { content: '≡'; color: var(--vl-blue); font-size: 1.1em; line-height: 1; }
	.vl-bouton-tri::before    { content: '⇅'; color: var(--vl-blue); font-size: 1em; line-height: 1; }
	.vl-bouton-filtre:active, .vl-bouton-tri:active { border-color: var(--vl-blue); }

	.vl-puces { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .7rem; }

	.vl-fond {
		display: block;
		position: fixed; inset: 0;
		z-index: 60;
		background: rgba(16, 36, 58, .45);
	}
	.vl-panneau {
		display: flex;
		flex-direction: column;
		position: fixed;
		z-index: 61;
		left: 0; right: 0; bottom: 0;
		max-height: 88vh;
		transform: translateY(100%);
		transition: transform .26s cubic-bezier(.22,.61,.36,1);
		background: #fff;
		border-radius: 18px 18px 0 0;
		box-shadow: 0 -12px 40px rgba(16,36,58,.22);
	}
	.vl-panneau.est-ouvert { transform: translateY(0); }
	.vl-panneau-tete {
		display: flex; align-items: center; justify-content: space-between;
		padding: 1rem 1.15rem;
		border-bottom: 1px solid var(--vl-line);
		font-family: 'Archivo', sans-serif;
		font-size: 1.05rem;
	}
	.vl-panneau-x {
		border: 0; background: none; cursor: pointer;
		font-size: 1.6rem; line-height: 1; color: var(--vl-slate); padding: 0 .2rem;
	}
	.vl-panneau-corps { flex: 1 1 auto; overflow-y: auto; padding: .25rem 1.15rem 1rem; -webkit-overflow-scrolling: touch; }
	/* La barre latérale est positionnée en fixed pour le bureau. Telle quelle
	   dans le panneau, elle sortait du flux et le corps s'écrasait à 20 px.
	   On la remet dans le flux, en pleine largeur. */
	.vl-panneau-corps .ea-filter-sidebar {
		position: static !important;
		width: 100% !important;
		max-width: none !important;
		flex: none !important;
		height: auto !important;
		max-height: none !important;
		overflow: visible !important;
		border: 0;
		padding: 0;
		box-shadow: none;
		top: auto !important;
		/* Elle a son propre hors-écran mobile : une translateX(-338px) qui la
		   sortait du panneau. Dans le panneau, c'est nous qui gérons l'entrée. */
		transform: none !important;
		visibility: visible !important;
		opacity: 1 !important;
	}
	.vl-panneau-corps .ea-filter-head { display: none; }
	.vl-panneau-pied {
		padding: .85rem 1.15rem calc(.85rem + env(safe-area-inset-bottom));
		border-top: 1px solid var(--vl-line);
		background: #fff;
	}
	.vl-panneau-voir {
		width: 100%;
		padding: .9rem;
		border: 0; border-radius: 10px;
		background: var(--vl-blue); color: #fff;
		font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 1rem;
		cursor: pointer;
	}
	/* Le tri natif de WooCommerce n'apparaît qu'à la demande. */
	.woocommerce-ordering { display: none; }
	.woocommerce-ordering.est-visible { display: block; margin: 0 0 1rem; }
	.woocommerce-ordering.est-visible select { width: 100%; padding: .8rem; border-radius: 10px; }
}

@media (prefers-reduced-motion: reduce) {
	.vl-panneau { transition: none; }
}

/* --- Puces de filtre actif (les deux affichages) ------------------------- */
.vl-puce {
	display: inline-flex; align-items: center; gap: .4rem;
	padding: .3rem .75rem;
	border: 1.5px solid var(--vl-blue);
	border-radius: 999px;
	background: color-mix(in srgb, var(--vl-blue) 8%, #fff);
	color: var(--vl-blue-deep);
	font-family: 'Archivo', sans-serif; font-size: .82rem; font-weight: 600;
	cursor: pointer;
}
.vl-puce:hover { background: color-mix(in srgb, var(--vl-blue) 16%, #fff); }
.vl-puce-x { font-size: 1.1em; line-height: 1; opacity: .7; }
.vl-puce--raz { border-color: #d8a4a4; background: #fdf2f2; color: #97402f; }
.vl-puce--raz:hover { background: #fbe6e6; }

/* Compteur de filtres actifs, sur le bouton et par groupe. */
.vl-compteur {
	display: inline-grid; place-items: center;
	min-width: 1.35em; height: 1.35em;
	padding: 0 .3em;
	margin-left: .4em;
	border-radius: 999px;
	background: var(--vl-blue); color: #fff;
	font-size: .72rem; font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* Un display explicite l'emporte sur l'attribut hidden : il faut le dire pour
   CHAQUE composant concerné. Oublier .vl-fond a laissé un voile fixe sur tout
   l'écran des pages catégorie : la page devenait ininteractive. */
.vl-compteur[hidden],
.vl-puces[hidden],
.vl-fond[hidden],
.vl-panneau[hidden] { display: none !important; }

@media (max-width: 900px) {
	/* Le mu-plugin ea-mega-menu impose
	     .woocommerce-archive .woocommerce-ordering { display: inline-flex !important }
	   soit deux classes. Il faut au moins autant de spécificité pour garder le
	   tri replié jusqu'à ce que le client demande « Trier ». */
	body.woocommerce-archive .woocommerce-ordering { display: none !important; }
	body.woocommerce-archive .woocommerce-ordering.est-visible { display: block !important; }
}

/* Le recomptage vivant masque les options sans issue via l'attribut hidden.
   Les <li> de la sidebar ont un display propre : il faut le dire explicitement. */
.ea-filter-list li[hidden],
.ea-filter-group[hidden] { display: none !important; }

/* Une option qui devient indisponible ne doit pas disparaître brutalement
   pendant qu'on lit la liste. */
.ea-filter-list li { transition: opacity .14s ease; }
@media (prefers-reduced-motion: reduce) { .ea-filter-list li { transition: none; } }

/* =========================================================================
 * Tiers payant sous le bouton d'ajout, et delai de preparation en pastille
 * ===================================================================== */

/* Le bouton secondaire reprend la forme du bouton d'ajout mais en contour :
   c'est une alternative au paiement, pas une action concurrente. */
.ea-lens-tp {
	margin-top: .7rem;
}
.ea-lens-tp-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	width: 100%;
	padding: .7rem 1rem;
	border: 1px solid var(--vl-blue);
	border-radius: 8px;
	background: #fff;
	color: var(--vl-blue-deep);
	font-family: 'Archivo', sans-serif;
	font-weight: 600;
	font-size: .95rem;
	line-height: 1.2;
	letter-spacing: -0.005em;
	text-decoration: none;
	transition: background-color .18s ease, border-color .18s ease;
}
.ea-lens-tp-btn:hover,
.ea-lens-tp-btn:focus-visible {
	background: color-mix(in srgb, var(--vl-blue) 8%, #fff);
	color: var(--vl-blue-deep);
	text-decoration: none;
}
.ea-lens-tp-btn svg { flex: 0 0 auto; }
.ea-lens-tp-note {
	margin: .45rem 0 0;
	font-size: .82rem;
	line-height: 1.4;
	color: var(--vl-slate);
	text-align: center;
}

/* Prepare sur commande : une horloge remplace le point, et le libelle porte
   le delai. Il est trop long pour tenir sur une ligne en mobile, donc cette
   variante seule leve le nowrap de .vl-pastille. */
.vl-pastille--commande {
	white-space: normal;
	text-transform: none;
	letter-spacing: .005em;
	font-size: .78rem;
	align-items: flex-start;
	line-height: 1.35;
	max-width: 32ch;
}
.vl-pastille--commande::before {
	width: 1.05em;
	height: 1.05em;
	margin-top: .1em;
	border-radius: 0;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.4 2'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.4 2'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* En mobile .ea-lens-atc-wrap est une barre fixe en bas d'ecran : le tiers
   payant y tient en une ligne discrete sous le bouton, sans manger l'ecran. */
@media (max-width: 600px) {
	.ea-lens-tp { margin-top: .45rem; }
	.ea-lens-tp-btn {
		border: 0;
		padding: .15rem 0;
		font-size: .88rem;
		font-weight: 600;
		text-decoration: underline;
		text-underline-offset: 3px;
		background: none;
	}
	.ea-lens-tp-btn:hover,
	.ea-lens-tp-btn:focus-visible { background: none; }
	.ea-lens-tp-btn svg { width: 15px; height: 15px; }
	.ea-lens-tp-note { display: none; }
	.ea-lens-configurator { padding-bottom: 132px; }
}

/* Renvoi entre gamme courante et gamme etendue : une note, pas une alerte —
   rien n'est en erreur, c'est une orientation. */
.ea-lens-variante {
	display: flex;
	align-items: flex-start;
	gap: .55em;
	margin: .9rem 0 0;
	padding: .65rem .8rem;
	border-left: 3px solid var(--vl-blue);
	border-radius: 0 8px 8px 0;
	background: color-mix(in srgb, var(--vl-blue) 6%, #fff);
	font-size: .85rem;
	line-height: 1.45;
	color: var(--vl-ink);
}
.ea-lens-variante svg {
	flex: 0 0 auto;
	margin-top: .12em;
	color: var(--vl-blue);
}
.ea-lens-variante a {
	color: var(--vl-blue-deep);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ================== Tiers payant : nature des articles et plafonnement ==== */

.vltp-panier {
	width: 100%;
	margin: .8rem 0;
	border-collapse: collapse;
	font-size: .9rem;
}
.vltp-panier th,
.vltp-panier td {
	padding: .5rem .6rem;
	text-align: left;
	border-bottom: 1px solid var(--vl-line);
}
.vltp-panier thead th {
	font-size: .74rem;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--vl-slate);
}
.vltp-panier td:last-child,
.vltp-panier th:last-child { text-align: right; white-space: nowrap; }
.vltp-panier tfoot th,
.vltp-panier tfoot td { border-bottom: 0; padding-top: .7rem; }
.vltp-panier tfoot tr:first-child th { border-top: 2px solid var(--vl-ink); }

/* Ce qui sort de la prise en charge doit se voir sans avoir a lire. */
.vltp-panier tr.vltp-hors td { color: var(--vl-slate); }
.vltp-panier tr.vltp-hors td:first-child { text-decoration: line-through; text-decoration-thickness: 1px; }

.vltp-alerte {
	margin: 1rem 0;
	padding: .8rem 1rem;
	border-left: 3px solid #b8791f;
	border-radius: 0 8px 8px 0;
	background: #fdf6ea;
	font-size: .88rem;
	line-height: 1.5;
}
.vltp-alerte p { margin: 0; }

.vltp-choix { margin: .8rem 0; font-size: .92rem; }
.vltp-choix label { display: flex; gap: .55em; align-items: flex-start; cursor: pointer; }
.vltp-note { color: var(--vl-slate); }

.vltp-detail summary {
	cursor: pointer;
	font-size: .82rem;
	color: var(--vl-blue-deep);
	font-weight: 600;
}
.vltp-detail[open] summary { margin-bottom: .3rem; }
.vltp-hors-note { margin: .4rem 0 0; font-size: .82rem; color: var(--vl-slate); }

.vl-remb-alerte {
	margin: .7rem 0 0;
	padding: .65rem .8rem;
	border-left: 3px solid #b8791f;
	border-radius: 0 8px 8px 0;
	background: #fdf6ea;
	font-size: .85rem;
	line-height: 1.5;
}

/* ===================== Compte : onglets regroupes par intention =========== */

/* Sommaire d'une page qui porte plusieurs sections. Sans lui, on scrolle a
   l'aveugle : trois blocs sur un ecran de telephone, ca fait long. */
.vl-compte-nav {
	margin: 0 0 1.4rem;
	padding: .55rem .2rem;
	border-bottom: 1px solid var(--vl-line);
}
.vl-compte-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: .3rem .5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.vl-compte-nav a {
	display: inline-block;
	padding: .32rem .75rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--vl-blue) 8%, #fff);
	color: var(--vl-blue-deep);
	font-size: .84rem;
	font-weight: 600;
	text-decoration: none;
	transition: background-color .15s ease;
}
.vl-compte-nav a:hover,
.vl-compte-nav a:focus-visible {
	background: color-mix(in srgb, var(--vl-blue) 16%, #fff);
	text-decoration: none;
}

.vl-compte-section { margin: 0 0 2.4rem; scroll-margin-top: 1.5rem; }
.vl-compte-section > h2 {
	margin: 0 0 .9rem;
	padding-bottom: .45rem;
	border-bottom: 2px solid var(--vl-ink);
	font-size: 1.15rem;
	letter-spacing: -0.01em;
}
.vl-compte-section:last-child { margin-bottom: 0; }

/* ===================== Retrait en magasin ================================ */

.vl-retrait {
	display: flex;
	align-items: flex-start;
	gap: .6em;
	margin: .9rem 0 0;
	padding: .7rem .85rem;
	border: 1px solid var(--vl-line);
	border-radius: 10px;
	background: #fff;
	font-size: .87rem;
	line-height: 1.5;
	color: var(--vl-ink);
}
.vl-retrait-ico {
	flex: 0 0 auto;
	font-size: 1.15em;
	line-height: 1.2;
	color: var(--vl-blue);
}

.vl-retrait-bloc {
	margin: .8rem 0;
	padding: .85rem 1rem;
	border-left: 3px solid var(--vl-blue);
	border-radius: 0 8px 8px 0;
	background: color-mix(in srgb, var(--vl-blue) 6%, #fff);
	font-size: .89rem;
	line-height: 1.55;
}
.vl-retrait-bloc p { margin: 0 0 .4rem; }
.vl-retrait-bloc p:last-child { margin-bottom: 0; }
.vl-retrait-titre { font-weight: 700; color: var(--vl-blue-deep); }
.vl-retrait-quand { font-variant-numeric: tabular-nums; }
.vl-retrait-note { color: var(--vl-slate); font-size: .84rem; }

/* ================== Dossier tiers payant : etat puis pieces ============== */

/* L'en-tete porte l'etat et la seule action du moment. Tout le reste de la
   page est de la consultation. */
.vl-dossier {
	margin: 0 0 2rem;
	padding: 1.15rem 1.3rem;
	border: 1px solid color-mix(in srgb, var(--vl-blue) 22%, #fff);
	border-radius: var(--vl-radius);
	background: color-mix(in srgb, var(--vl-blue) 5%, #fff);
}
.vl-dos-titre {
	margin: 0 0 .35rem;
	font-family: 'Archivo', sans-serif;
	font-size: 1.18rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--vl-ink);
}
.vl-dos-phrase {
	margin: 0 0 1rem;
	font-size: .93rem;
	line-height: 1.55;
	color: var(--vl-slate);
	max-width: 56ch;
}
.vl-dos-action { margin: 0 0 1.1rem; }
.vl-dos-action .button { margin: 0; }

/* Les puces disent l'etat ET servent de navigation : le sommaire separe
   qui existait ici disait deux fois la meme chose. */
.vl-dos-puces {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem .55rem;
	margin: 0;
	padding: .9rem 0 0;
	border-top: 1px solid color-mix(in srgb, var(--vl-blue) 18%, #fff);
	list-style: none;
}
.vl-dos-puces li {
	display: inline-flex;
	align-items: center;
	gap: .35em;
	padding: .26em .7em;
	border-radius: 999px;
	font-size: .8rem;
	font-weight: 600;
	white-space: nowrap;
}
.vl-dos-ok     { background: #e7f4ec; color: #1f6b42; }
.vl-dos-manque { background: #fff; color: var(--vl-slate); border: 1px dashed var(--vl-line); }

/* Volets replies : un formulaire ne s'ouvre que si on le demande. */
.vl-repli { margin: .9rem 0 0; }
.vl-repli > summary {
	display: inline-flex;
	align-items: center;
	gap: .45em;
	padding: .5rem .9rem;
	border: 1px solid var(--vl-blue);
	border-radius: 8px;
	background: #fff;
	color: var(--vl-blue-deep);
	font-family: 'Archivo', sans-serif;
	font-size: .89rem;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}
.vl-repli > summary::-webkit-details-marker { display: none; }
.vl-repli > summary::before { content: '+'; font-size: 1.05em; line-height: 1; }
.vl-repli[open] > summary::before { content: '–'; }
.vl-repli > summary:hover { background: color-mix(in srgb, var(--vl-blue) 8%, #fff); }
.vl-repli[open] { padding: 0 0 .3rem; }
.vl-repli[open] > summary { margin-bottom: .9rem; }

@media (max-width: 600px) {
	.vl-dossier { padding: 1rem; }
	.vl-dos-action .button { width: 100%; text-align: center; }
}

/* Le gabarit du plugin porte son propre titre « Demander une prise en charge ».
   La section qui l'accueille le dit deja, en langage client : deux titres
   colles disent deux fois la meme chose. */
#demander .vltp-form > h3:first-child { display: none; }

/* Les actions d'une ordonnance se suivaient sans separation lisible. */
.ea-ordo-actions a + a,
.ea-doc-actions a + a { margin-left: .9em; }
.ea-ordo-actions a::before,
.ea-doc-actions a::before { content: ''; }

/* Le bouton d'action de l'en-tete doit ressembler a un bouton meme quand le
   theme n'a pas encore stylise .button dans ce contexte. */
.vl-dos-action .button {
	display: inline-block;
	padding: .62rem 1.15rem;
	border-radius: 8px;
	background: var(--vl-blue);
	color: #fff;
	font-family: 'Archivo', sans-serif;
	font-weight: 600;
	font-size: .95rem;
	text-decoration: none;
}
.vl-dos-action .button:hover,
.vl-dos-action .button:focus-visible { background: var(--vl-blue-deep); color: #fff; }

/* En dessous de 600 px, les tableaux du compte poussaient la page entiere en
   largeur. Ils defilent desormais dans leur propre cadre : c'est le tableau
   qui bouge, pas la mise en page. */
@media (max-width: 600px) {
	.woocommerce-MyAccount-content table.shop_table,
	.woocommerce-MyAccount-content .vltp-panier {
		display: block;
		width: 100%;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.woocommerce-MyAccount-content table.shop_table > tbody,
	.woocommerce-MyAccount-content table.shop_table > thead,
	.woocommerce-MyAccount-content table.shop_table > tfoot,
	.woocommerce-MyAccount-content .vltp-panier > tbody,
	.woocommerce-MyAccount-content .vltp-panier > thead,
	.woocommerce-MyAccount-content .vltp-panier > tfoot {
		display: table;
		width: 100%;
		min-width: 30rem;
	}
	.woocommerce-MyAccount-content { overflow-x: hidden; }
}

/* ============ Boutons du compte : le theme ne les stylait pas ============ */

/* WooCommerce pose `.woocommerce-Button button` sur ses soumissions, mais rien
   ne les habille dans l'espace client : elles sortaient en boutons bruts du
   navigateur. On les aligne sur le bouton d'ajout au panier, deja connu du
   visiteur — meme forme, meme famille, meme bleu. */
.woocommerce-MyAccount-content button[type="submit"],
.woocommerce-MyAccount-content .woocommerce-Button,
.woocommerce-MyAccount-content input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	padding: .72rem 1.4rem;
	border: 0;
	border-radius: 8px;
	background: var(--vl-blue);
	color: #fff;
	font-family: 'Archivo', sans-serif;
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.005em;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .18s ease, box-shadow .18s ease, transform .06s ease;
}
.woocommerce-MyAccount-content button[type="submit"]:hover,
.woocommerce-MyAccount-content .woocommerce-Button:hover,
.woocommerce-MyAccount-content input[type="submit"]:hover {
	background: var(--vl-blue-deep);
	color: #fff;
}
.woocommerce-MyAccount-content button[type="submit"]:focus-visible,
.woocommerce-MyAccount-content .woocommerce-Button:focus-visible,
.woocommerce-MyAccount-content input[type="submit"]:focus-visible {
	outline: 2px solid var(--vl-blue-deep);
	outline-offset: 2px;
}
/* Un appui doit se sentir : le clic sur mobile n'a pas de survol pour le dire. */
.woocommerce-MyAccount-content button[type="submit"]:active,
.woocommerce-MyAccount-content input[type="submit"]:active { transform: translateY(1px); }

/* La soumission du tiers payant est l'action principale de la page : elle
   merite la pleine largeur et un peu d'air au-dessus. */
#demander .vltp-form button[type="submit"] {
	width: 100%;
	margin-top: .4rem;
	padding: .85rem 1.4rem;
	font-size: 1rem;
}

/* Le bandeau oriente, il n'agit pas : son bouton reste en contour pour ne pas
   entrer en concurrence avec la soumission qui suit. */
.vl-dos-action .button {
	background: #fff;
	border: 1px solid var(--vl-blue);
	color: var(--vl-blue-deep);
}
.vl-dos-action .button::after {
	content: '↓';
	font-size: .95em;
	line-height: 1;
}
.vl-dos-action .button:hover,
.vl-dos-action .button:focus-visible {
	background: color-mix(in srgb, var(--vl-blue) 8%, #fff);
	color: var(--vl-blue-deep);
}
/* Sauf quand il mene ailleurs qu'a un ancrage : la, c'est bien une action. */
.vl-dos-action .button[href^="http"] { background: var(--vl-blue); color: #fff; border-color: var(--vl-blue); }
.vl-dos-action .button[href^="http"]::after { content: '→'; }
.vl-dos-action .button[href^="http"]:hover { background: var(--vl-blue-deep); color: #fff; }

@media (max-width: 600px) {
	.woocommerce-MyAccount-content button[type="submit"],
	.woocommerce-MyAccount-content input[type="submit"] { width: 100%; }
}

/* La fleche du bandeau se collait au texte : `gap` ne vaut qu'en flex, et le
   bouton etait en inline-block. */
.vl-dos-action .button {
	display: inline-flex;
	align-items: center;
	gap: .5em;
}

/* Champ à valeur unique : il n'y a pas de choix à faire, et « — Choisir — »
   n'est plus dans la liste. On le donne à voir comme une information, pas
   comme un champ à remplir. */
.ea-lens-select--fige {
	background-color: color-mix(in srgb, var(--vl-blue) 4%, #fff);
	border-color: var(--vl-line);
	color: var(--vl-slate);
	cursor: default;
	background-image: none;
	padding-right: .9em;
}
.ea-lens-select--fige:focus-visible {
	outline: 2px solid var(--vl-line);
	outline-offset: 1px;
}

/* ---------------------------------------------------------------- Services
 * Le retrait en magasin garde sa carte : c'est ce qui nous distingue. Les
 * services qui suivent sont secondaires — meme grille, mais sans cadre, pour
 * qu'ils se lisent sans concurrencer le bouton d'achat.
 */
.vl-services {
	margin: .55rem 0 0;
	padding: .1rem 0 0;
}

.vl-service {
	display: flex;
	align-items: flex-start;
	gap: .6em;
	margin: 0;
	padding: .45rem .1rem;
	font-size: .84rem;
	line-height: 1.5;
	color: var(--vl-ink);
}

.vl-service + .vl-service {
	border-top: 1px solid var(--vl-line);
}

.vl-service-ico {
	flex: 0 0 auto;
	font-size: .95em;
	line-height: 1.6;
	color: var(--vl-blue);
}

.vl-service strong { font-weight: 600; }

.vl-service a {
	color: var(--vl-blue);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.vl-service a:hover,
.vl-service a:focus-visible { text-decoration-thickness: 2px; }