/*
Theme Name: Volk Engineering — Multipage
Theme URI: https://volkengineering.fr/
Author: Volk Engineering
Description: Extension du thème Volk Engineering : pages prestations, réalisations, boutique WooCommerce et référencement. Nécessite le thème « Volk Engineering ». Pour revenir à la version d'origine, réactivez simplement le thème parent.
Template: volk-engineering
Version: 1.2.1
Requires at least: 6.3
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: volk
*/

/* ==========================================================================
   En-tête : sous-menu « Prestations » et panier
   ========================================================================== */
.nav__list > li { position: relative; }
.nav__list > .menu-item-has-children > a { display: inline-flex; align-items: center; gap: 6px; }
.nav__list > .menu-item-has-children > a::before {
	content: ""; order: 2; width: 6px; height: 6px; margin-top: -3px;
	border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
	transform: rotate(45deg); transition: transform .3s var(--ease);
}
.nav__list .current-menu-item > a,
.nav__list .current-menu-ancestor > a,
.nav__list .current_page_parent > a { color: var(--text); }

@media (min-width: 961px) {
	.nav__list .sub-menu {
		position: absolute; top: calc(100% + 14px); left: -20px; z-index: 110;
		min-width: 360px; padding: 10px 0;
		background: rgba(12, 13, 16, .96);
		-webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
		border: 1px solid var(--line-strong);
		opacity: 0; visibility: hidden; transform: translateY(-6px);
		transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s linear .25s;
	}
	.nav__list .sub-menu::before { content: ""; position: absolute; inset: -16px 0 auto; height: 16px; }
	.nav__list > li.is-open > .sub-menu,
	.nav__list > li:focus-within > .sub-menu {
		opacity: 1; visibility: visible; transform: none;
		transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s;
	}
	.nav__list > li.is-open > a::before { transform: rotate(-135deg); margin-top: 3px; }
	.nav__list .sub-menu a {
		display: block; padding: 12px 22px;
		font-family: var(--f-body); font-size: 15px; letter-spacing: 0; text-transform: none;
		color: var(--muted);
	}
	.nav__list .sub-menu a::after { display: none; }
	.nav__list .sub-menu a:hover, .nav__list .sub-menu .current-menu-item > a { color: var(--text); background: rgba(217, 98, 43, .1); }
	.nav__list .sub-menu li + li { border-top: 1px solid var(--line); }
}

@media (max-width: 960px) {
	.nav__list .sub-menu { padding: 0 0 14px 2px; }
	.nav__list .sub-menu li { border: 0 !important; opacity: 1 !important; transform: none !important; }
	.nav__list .sub-menu a {
		padding: 9px 0 9px 18px !important; font-family: var(--f-body) !important; font-size: 17px !important;
		color: var(--muted) !important; border-left: 1px solid var(--line-strong);
	}
	.nav__list > .menu-item-has-children > a::before { display: none; }
	.nav-open .nav__list li:nth-child(5) { transition-delay: .24s; }
	.nav-open .nav__list li:nth-child(6) { transition-delay: .28s; }
}

.header-cart {
	position: relative; display: grid; place-items: center;
	width: 44px; height: 40px; border: 1px solid var(--line-strong); color: var(--text);
	transition: border-color .2s, color .2s;
}
.header-cart .icon { width: 20px; }
.header-cart:hover { border-color: var(--accent); color: var(--accent); }
.header-cart__count {
	position: absolute; top: -7px; right: -7px; min-width: 18px; height: 18px; padding: 0 4px;
	display: grid; place-items: center; border-radius: 9px;
	background: var(--accent); color: #fff; font-family: var(--f-mono); font-size: 10px; line-height: 1;
}
.nav-open .header-cart { visibility: hidden; }

/* ==========================================================================
   Accueil : prestations cliquables, boutons de section, boutique
   ========================================================================== */
.service--link { grid-template-columns: 64px minmax(0, 1fr) 28px; position: relative; }
.service--link > .icon { width: 22px; align-self: center; color: var(--faint); transition: color .3s, transform .3s var(--ease); }
.service--link .service__title a::after { content: ""; position: absolute; inset: 0; }
.service--link:hover > .icon { color: var(--accent); transform: translateX(4px); }
@media (max-width: 560px) {
	.service--link { grid-template-columns: 1fr 24px; }
	.service--link .service__index { grid-column: 1 / -1; }
}

.section__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-self: end; }
@media (max-width: 860px) { .section__actions { justify-self: start; } }

.section--shop-teaser { background: var(--bg-2); border-top: 1px solid var(--line); }
.product-teasers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.product-teaser a { display: grid; gap: 8px; }
.product-teaser figure { overflow: hidden; background: var(--bg-3); border: 1px solid var(--line); }
.product-teaser img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 1s var(--ease); }
.product-teaser a:hover img { transform: scale(1.04); }
.product-teaser__title { margin-top: 8px; font-family: var(--f-display); font-size: 1.1rem; letter-spacing: -.01em; }
.product-teaser__price { font-family: var(--f-mono); font-size: 13px; color: var(--accent); }
@media (max-width: 760px) { .product-teasers { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .product-teasers { grid-template-columns: 1fr; } }

/* ==========================================================================
   En-tête des pages internes
   ========================================================================== */
.page-hero {
	position: relative;
	padding-top: calc(var(--header-h) + clamp(28px, 5vw, 64px));
	padding-bottom: clamp(48px, 7vw, 96px);
	border-bottom: 1px solid var(--line);
	background:
		linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%);
}
.page-hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: end; margin-top: clamp(24px, 4vw, 48px); }
.page-hero--simple .label--accent { margin-top: clamp(24px, 4vw, 48px); }
.page-hero__title {
	margin-top: 22px;
	font-family: var(--f-display); font-weight: 500;
	font-size: clamp(2.1rem, 4.8vw, 4.4rem); line-height: 1.02; letter-spacing: -.03em;
	max-width: 18ch; text-wrap: balance;
}
.page-hero__lead { margin-top: 26px; max-width: 56ch; color: var(--muted); font-size: clamp(1.02rem, 1.25vw, 1.15rem); text-wrap: pretty; }
.page-hero__actions { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 12px; }
.page-hero__figure .media { aspect-ratio: 4 / 5; border: 1px solid var(--line); background: var(--bg-2); overflow: hidden; }
.page-hero__figure .media--drawing { aspect-ratio: 5 / 4; display: flex; align-items: center; justify-content: center; padding: 6%; opacity: .85; }
.page-hero__figure .media--drawing svg { height: auto; }
.page-hero__figure figcaption { margin-top: 14px; }
.page-hero .label--accent a { color: inherit; border-bottom: 1px solid var(--line-strong); }
.page-hero .label--accent a:hover { color: var(--accent); }
@media (max-width: 960px) {
	.page-hero__grid { grid-template-columns: 1fr; align-items: start; }
	.page-hero__figure .media { aspect-ratio: 16 / 10; }
	.page-hero__figure .media--drawing { aspect-ratio: 16 / 9; }
}

/* Fil d'Ariane */
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px 0; }
.crumbs li { display: inline-flex; align-items: center; font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.crumbs li + li::before { content: "/"; margin: 0 10px; color: var(--line-strong); }
.crumbs a { color: var(--muted); transition: color .2s; }
.crumbs a:hover { color: var(--accent); }
.crumbs [aria-current] { color: var(--muted); }

/* ==========================================================================
   Corps des pages prestations
   ========================================================================== */
.section--service-body { padding-top: clamp(56px, 8vw, 112px); }
.section--service-body .split { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
.brief { padding: clamp(22px, 2.6vw, 32px); background: var(--bg-2); border: 1px solid var(--line); }
.brief dl { margin: 18px 0 26px; display: grid; gap: 0; }
.brief dl > div { padding: 14px 0; border-top: 1px solid var(--line); }
.brief dt { font-size: 10px; color: var(--accent); }
.brief dd { margin: 6px 0 0; color: var(--text); font-size: .96em; line-height: 1.5; }
@media (max-width: 960px) {
	.section--service-body .split { grid-template-columns: 1fr; }
	.section--service-body .split__aside { order: 2; }
}

.prose--service { font-size: 1.04em; max-width: 72ch; }
.prose--service > h2:first-child { margin-top: 0; }
.prose--service h2 {
	margin-top: 2.2em; padding-top: 1.1em; border-top: 1px solid var(--line);
	font-size: clamp(1.45rem, 2.2vw, 1.9rem); letter-spacing: -.015em;
}
.prose--service > h2:first-child { border-top: 0; padding-top: 0; }
.prose--service strong { color: var(--text); font-weight: 500; }
.prose ol.wp-block-list { list-style: none; padding-left: 0; counter-reset: volkc; }
.prose ol.wp-block-list > li { counter-increment: volkc; position: relative; padding: 14px 0 14px 56px; border-top: 1px solid var(--line); margin-top: 0; }
.prose ol.wp-block-list > li:last-child { border-bottom: 1px solid var(--line); }
.prose ol.wp-block-list > li::before {
	content: counter(volkc, decimal-leading-zero); position: absolute; left: 0; top: 15px;
	font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; color: var(--accent);
}
.prose ul.wp-block-list { list-style: none; padding-left: 0; }
.prose ul.wp-block-list > li { position: relative; padding-left: 26px; }
.prose ul.wp-block-list > li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; border: 1px solid var(--accent); transform: rotate(45deg); }

/* FAQ (bloc « Détails ») */
.prose details { border-top: 1px solid var(--line); }
.prose details + details { margin-top: 0; }
.prose details:last-of-type { border-bottom: 1px solid var(--line); }
.prose summary {
	position: relative; padding: 20px 44px 20px 0; cursor: pointer; list-style: none;
	font-family: var(--f-display); font-weight: 500; font-size: 1.08rem; color: var(--text); letter-spacing: -.01em;
	transition: color .2s;
}
.prose summary::-webkit-details-marker { display: none; }
.prose summary::after {
	content: ""; position: absolute; right: 6px; top: 50%; width: 14px; height: 14px; margin-top: -7px;
	background:
		linear-gradient(var(--accent), var(--accent)) center / 14px 1px no-repeat,
		linear-gradient(var(--accent), var(--accent)) center / 1px 14px no-repeat;
	transition: transform .3s var(--ease);
}
.prose details[open] summary::after { transform: rotate(45deg); }
.prose summary:hover { color: var(--accent); }
.prose details > :not(summary) { margin: 0 0 22px; color: var(--muted); }

/* Autres prestations */
.section--related .section__title { max-width: 24ch; }
.cards--links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card:has(.card__link) { padding: 0; }
.card__link { display: flex; flex-direction: column; height: 100%; padding: clamp(22px, 2.6vw, 34px); }
.card__more { margin-top: 18px; color: var(--ink); }
.card__more .icon { width: 16px; transition: transform .3s var(--ease); }
.card__link:hover .card__more { color: var(--accent); }
.card__link:hover .card__more .icon { transform: translateX(4px); }
@media (max-width: 560px) { .cards--links { grid-template-columns: 1fr; } }

/* ==========================================================================
   Réalisations
   ========================================================================== */
.work__link { display: block; height: 100%; }
.work__link figure { height: 100%; }
.work__placeholder { aspect-ratio: 4 / 5; display: flex; align-items: center; justify-content: center; padding: 12%; color: var(--text); opacity: .5; }
.work__placeholder svg { height: auto; }
.works--grid .work { grid-column: span 4; }
.works--grid .work img { aspect-ratio: 4 / 5 !important; }
@media (max-width: 860px) { .works--grid .work { grid-column: span 6 !important; } }
@media (max-width: 720px) {
	.works.works--grid { display: grid; overflow: visible; margin-inline: 0; padding-inline: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.works.works--grid .work { flex: none; grid-column: auto !important; }
}
@media (max-width: 460px) { .works.works--grid { grid-template-columns: 1fr; } }

.section--archive { padding-top: clamp(48px, 6vw, 80px); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 36px; }
.filter {
	display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 16px;
	border: 1px solid var(--line-strong);
	font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
	transition: border-color .2s, color .2s, background .2s;
}
.filter span { color: var(--faint); }
.filter:hover { border-color: var(--text); color: var(--text); }
.filter.is-active { background: var(--text); border-color: var(--text); color: var(--bg); }
.filter.is-active span { color: var(--bg); opacity: .6; }

.realisation__cover { margin-top: clamp(32px, 4vw, 56px); border: 1px solid var(--line); overflow: hidden; background: var(--bg-2); }
.realisation__cover img { width: 100%; max-height: 78vh; object-fit: cover; }
.section--realisation { padding-top: clamp(48px, 6vw, 88px); padding-bottom: clamp(48px, 6vw, 80px); }
.realisation__meta { margin-top: 48px; color: var(--faint); }
.prose .wp-block-gallery { gap: 12px; }
.prose .wp-block-gallery figure { margin: 0; }
.prose .wp-block-image img, .prose .wp-block-gallery img { border: 1px solid var(--line); }

.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 32px 0 clamp(64px, 8vw, 112px); background: var(--line); border: 1px solid var(--line); }
.post-nav__link { display: grid; gap: 8px; padding: 22px 24px; background: var(--bg); font-family: var(--f-display); transition: background .2s; }
.post-nav__link--next { text-align: right; grid-column: 2; }
.post-nav__link:hover { background: var(--bg-2); }
.post-nav:empty { display: none; }

.pagination, .navigation.pagination { margin-top: 48px; }
.nav-links .page-numbers { display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 12px; border: 1px solid var(--line-strong); color: var(--muted); }
.nav-links .page-numbers.current, .nav-links .page-numbers:hover { border-color: var(--accent); color: var(--text); }

/* ==========================================================================
   Encadré d'appel (boutique, réalisations)
   ========================================================================== */
.shop-banner {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px;
	margin-top: clamp(48px, 6vw, 80px); padding: clamp(24px, 3vw, 40px);
	background: var(--bg-2); border: 1px solid var(--line); border-left: 2px solid var(--accent);
}
.shop-banner__text { margin-top: 14px; max-width: 52ch; color: var(--muted); }
.shop-banner__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ==========================================================================
   Pied de page
   ========================================================================== */
.site-footer__top--4 { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); }
.site-footer__zone { margin-top: 18px; gap: 8px; color: var(--muted); letter-spacing: .08em; text-transform: none; font-size: 12px; }
.site-footer__zone .icon { width: 15px; color: var(--accent); }
@media (max-width: 960px) {
	.site-footer__top--4 { grid-template-columns: 1fr 1fr; }
	.site-footer__top--4 .site-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 420px) { .site-footer__top--4 { grid-template-columns: 1fr; } }

/* Pages larges (panier, commande, compte) */
.wrap--shop { max-width: 1120px; }
.product-teaser__price ins { text-decoration: none; }
.product-teaser__price del { color: var(--faint); margin-right: 6px; }
@media (min-width: 961px) {
	.nav__list { align-items: center; }
	.nav__list > li > a { display: inline-flex; align-items: center; }
}

/* ===== Banderole : écart resserré et symétrique autour du losange ===== */
.ticker li { gap: 18px; padding: 16px 0 16px 18px; }
/* L'espacement des lettres ajoute un blanc après la dernière lettre : on le compense. */
.ticker li::after { margin-left: -.2em; flex-shrink: 0; }

/* ===== Cartes « Autres prestations » avec image (si la page a une image mise en avant) ===== */
.card__media { margin: calc(-1 * clamp(22px, 2.6vw, 34px)) calc(-1 * clamp(22px, 2.6vw, 34px)) 22px; aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper-2); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.card__link:hover .card__media img { transform: scale(1.04); }
.card__link:has(.card__media) .card__title { padding-top: 0; }

/* ===== Listes déroulantes au style du site (boutique : finitions, tri) ===== */
.vselect { position: relative; display: block; width: 100%; max-width: 420px; }
.vselect__native { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; opacity: 0; pointer-events: none; }
.vselect__btn {
	display: flex; align-items: center; justify-content: space-between; gap: 14px;
	width: 100%; min-height: 48px; padding: 0 16px;
	background: var(--bg-2); color: var(--text);
	border: 1px solid var(--line-strong); border-radius: 0;
	font: inherit; font-size: .98em; text-align: left; cursor: pointer;
	transition: border-color .2s;
}
.vselect__btn::after {
	content: ""; flex-shrink: 0; width: 7px; height: 7px; margin-top: -4px;
	border-right: 1px solid var(--accent); border-bottom: 1px solid var(--accent);
	transform: rotate(45deg); transition: transform .25s var(--ease), margin .25s var(--ease);
}
.vselect.is-open .vselect__btn { border-color: var(--accent); }
.vselect.is-open .vselect__btn::after { transform: rotate(-135deg); margin-top: 4px; }
.vselect__btn.is-placeholder span { color: var(--muted); }
.vselect__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vselect__list {
	position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
	max-height: min(55vh, 380px); overflow-y: auto; overscroll-behavior: contain;
	margin: 0; padding: 6px 0; list-style: none;
	background: rgba(12, 13, 16, .97);
	-webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
	border: 1px solid var(--line-strong);
	opacity: 0; visibility: hidden; transform: translateY(-6px);
	transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s linear .2s;
}
.vselect.is-open .vselect__list { opacity: 1; visibility: visible; transform: none; transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s; }
.vselect__list li {
	position: relative; padding: 13px 18px 13px 40px; cursor: pointer;
	font-size: 15px; color: var(--muted); line-height: 1.3;
}
.vselect__list li + li { border-top: 1px solid var(--line); }
.vselect__list li:hover, .vselect__list li.is-active { color: var(--text); background: rgba(217, 98, 43, .1); }
.vselect__list li[aria-selected="true"] { color: var(--text); }
.vselect__list li[aria-selected="true"]::before {
	content: ""; position: absolute; left: 18px; top: 50%; width: 7px; height: 7px; margin-top: -4px;
	background: var(--accent); transform: rotate(45deg);
}
.vselect__list li.is-disabled { opacity: .35; pointer-events: none; }
@media (max-width: 760px) { .vselect { max-width: none; } .vselect__list li { padding-top: 15px; padding-bottom: 15px; } }
/* Tri de la boutique : plus étroit, aligné à droite */
.woocommerce-ordering .vselect { width: 260px; max-width: 100%; }
/* Variations sur téléphone : libellé au-dessus de la liste */
@media (max-width: 760px) {
	.woocommerce div.product table.variations, .woocommerce div.product table.variations tbody, .woocommerce div.product table.variations tr,
	.woocommerce div.product table.variations th, .woocommerce div.product table.variations td { display: block; width: 100%; }
	.woocommerce div.product table.variations th { padding: 0 0 8px; text-align: left; }
	.woocommerce div.product table.variations td { padding: 0 0 12px; }
}
.woocommerce div.product table.variations th label { font-family: var(--f-mono); font-size: 11px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.woocommerce div.product .reset_variations { display: inline-block; margin-top: 10px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }

/* ===== 1.0.7 — Menu téléphone : flou rétabli sur toutes les pages =====
   Sur les pages autres que l'accueil, l'en-tête gardait son propre flou, ce qui empêchait
   le menu (placé dedans) de flouter la page derrière lui. */
@media (max-width: 960px) {
	.nav-open body .site-header,
	.nav-open body:not(.is-home) .site-header,
	.nav-open .site-header.is-scrolled {
		-webkit-backdrop-filter: none !important;
		backdrop-filter: none !important;
		background: transparent !important;
		border-bottom-color: transparent !important;
	}
}

/* ===== 1.0.7 — Panier, commande, compte : blocs centrés (pas de débord « large » vers la gauche) ===== */
.prose--shop > .alignwide,
.prose--shop > .alignfull { margin-left: 0; margin-right: 0; max-width: 100%; width: auto; }

/* ===== 1.0.8 — Flou de l'en-tête porté par un calque séparé =====
   Un élément flouté qui en contient un autre empêche ce dernier de flouter la page :
   le menu téléphone devait attendre que l'en-tête perde son flou (écran noir un instant).
   Le flou de la barre est maintenant sur un calque à part : le menu floute dès la première image. */
.site-header,
body:not(.is-home) .site-header,
.site-header.is-scrolled {
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
	background: transparent !important;
}
.site-header::before {
	content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
	background: rgba(10, 11, 13, .82);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	backdrop-filter: blur(14px) saturate(140%);
	opacity: 0; transition: opacity .35s var(--ease);
}
body:not(.is-home) .site-header::before,
.site-header.is-scrolled::before { opacity: 1; }
@media (max-width: 960px) {
	.nav-open .site-header::before { opacity: 0 !important; transition: none !important; }
}

/* ===== 1.1.1 — Volet téléphone : apparition en fondu =====
   Safari (iPhone) affiche du noir quand un élément flouté change de forme ou de taille pendant
   une animation (découpe ou hauteur). Le volet garde donc sa taille et apparaît en fondu :
   le flou est présent dès la première image. Les liens glissent toujours en cascade. */
@media (max-width: 960px) {
	.nav,
	.nav-open .nav {
		-webkit-clip-path: none !important;
		clip-path: none !important;
		will-change: opacity !important;
		transform: none !important;
		height: 100vh !important;
		height: 100dvh !important;
	}
	.nav {
		opacity: 0 !important;
		visibility: hidden;
		transition: opacity .28s ease, visibility 0s linear .28s !important;
	}
	.nav-open .nav {
		opacity: 1 !important;
		visibility: visible;
		transition: opacity .28s ease, visibility 0s !important;
	}
}
@media (max-width: 960px) and (prefers-reduced-motion: reduce) {
	.nav, .nav-open .nav { transition: none !important; }
}

/* ===== 1.1.1 — Banderole : espacement verrouillé =====
   Sur certains écrans d'ordinateur, la liste s'étirait et répartissait de grands blancs entre
   les mots. Tout est maintenant figé : chaque mot prend sa largeur, puis un losange centré
   avec le même écart de chaque côté. */
.ticker .ticker__track { width: max-content !important; justify-content: flex-start !important; gap: 0 !important; }
.ticker .ticker__track > ul {
	display: flex !important; flex: 0 0 auto !important; width: max-content !important; min-width: 0 !important; max-width: none !important;
	justify-content: flex-start !important; gap: 0 !important; margin: 0 !important; padding: 0 !important; list-style: none !important;
}
.ticker .ticker__track > ul > li {
	display: flex !important; flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; max-width: none !important;
	align-items: center; justify-content: flex-start !important; gap: 0 !important; margin: 0 !important;
	padding: 16px 0 !important; text-align: left !important;
}
.ticker .ticker__track > ul > li::before { display: none !important; content: none !important; }
.ticker .ticker__track > ul > li::after {
	flex: 0 0 auto; margin: 0 24px 0 calc(24px - .2em) !important;
}

/* ===== 1.2.0 — Lien « Mon compte » dans l'en-tête ===== */
.header-account {
	display: grid; place-items: center; width: 44px; height: 40px;
	border: 1px solid var(--line-strong); color: var(--text); transition: border-color .2s, color .2s;
}
.header-account .icon { width: 20px; }
.header-account:hover, .header-account.is-current { border-color: var(--accent); color: var(--accent); }
.nav-open .header-account { visibility: hidden; }
@media (max-width: 480px) { .header-account { display: none; } }
.nav__account { color: var(--text) !important; }