/* Sapedirect — styles du thème (mobile d'abord). */

@font-face {
	font-family: "Anton";
	src: url("../fonts/anton-latin.woff2") format("woff2");
	font-display: swap;
}
@font-face {
	font-family: "Archivo Black";
	src: url("../fonts/archivo-black-latin.woff2") format("woff2");
	font-display: swap;
}

:root {
	--noir: #0E0E0E;
	--blanc: #F2EFE8;
	--rouge: #FF3B00;
	--gris: #8C8880;
	--ligne: rgba(242, 239, 232, .22);
	--marge: 16px;
	--entete: 64px;
	--titre: "Anton", "Arial Narrow", sans-serif;
	--gras: "Archivo Black", "Arial Black", sans-serif;
	--texte: system-ui, -apple-system, "Segoe UI", sans-serif;
	--sortie: cubic-bezier(.16, 1, .3, 1);
	--delai: 0s;
}
.avec-intro { --delai: 1.15s; }

@media (min-width: 900px) {
	:root { --marge: 32px; --entete: 80px; }
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
	margin: 0;
	background: var(--noir);
	color: var(--blanc);
	font: 16px/1.5 var(--texte);
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--rouge); outline-offset: 3px; }
.sr-only {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap;
}
.lien-evitement {
	position: fixed; top: 8px; left: 8px; z-index: 200;
	padding: 10px 14px; background: var(--rouge); color: var(--noir);
	font-family: var(--gras); text-decoration: none;
	clip-path: inset(50%);
}
.lien-evitement:focus { clip-path: none; }
.menu-ouvert { overflow: hidden; }

/* Grain pellicule */
.grain {
	position: fixed; inset: 0; z-index: 150; pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
	opacity: .09;
	mix-blend-mode: overlay;
	animation: grain 1s steps(4) infinite;
}
@keyframes grain {
	0% { background-position: 0 0; }
	25% { background-position: -37px 23px; }
	50% { background-position: 51px -61px; }
	75% { background-position: -17px -43px; }
}

/* Intro du logo */
.intro { display: none; }
.avec-intro .intro {
	position: fixed; inset: 0; z-index: 180;
	display: flex; align-items: flex-end;
	padding: var(--marge);
	background: var(--noir);
	pointer-events: none;
	animation: intro-sortie .55s var(--sortie) .85s both;
}
.intro__logo {
	margin: 0;
	font: 400 clamp(56px, 22vw, 260px)/.9 var(--gras);
	letter-spacing: -.02em; text-transform: uppercase;
}
.intro__ligne { display: block; overflow: hidden; }
.intro__ligne > span { display: block; animation: monte .6s var(--sortie) .05s both; }
.intro__ligne--rouge { color: var(--rouge); }
.intro__ligne--rouge > span { animation-delay: .15s; }
@keyframes monte { from { transform: translateY(105%); } }
@keyframes intro-sortie { to { transform: translateY(-100%); } }

/* En-tête */
.entete {
	position: fixed; inset: 0 0 auto; z-index: 100;
	height: var(--entete);
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding: 0 var(--marge);
	transition: background-color .3s, border-color .3s;
	border-bottom: 1px solid transparent;
}
.entete.est-compact { background: var(--noir); border-color: var(--ligne); }
.admin-bar .entete { top: var(--wp-admin--admin-bar--height, 0px); }
.entete__logo { display: block; width: 84px; flex: none; }
.entete__logo img { width: 100%; height: auto; }
.entete__actions { display: flex; gap: 6px; }
.entete__bouton {
	display: inline-flex; align-items: center; gap: 8px;
	min-height: 44px; padding: 0 12px;
	background: none; border: 0; cursor: pointer;
	font: 400 14px/1 var(--gras); letter-spacing: .02em; text-transform: uppercase;
	text-decoration: none;
}
.entete__panier-nb {
	display: inline-grid; place-items: center;
	min-width: 22px; height: 22px; padding: 0 5px;
	background: var(--rouge); color: var(--noir); font-size: 12px;
}
@media (min-width: 900px) {
	.entete__logo { width: 104px; }
	.entete__bouton { font-size: 15px; }
}

/* Menu plein écran */
.menu-plein {
	position: fixed; inset: 0; z-index: 120;
	display: flex; flex-direction: column;
	padding: 0 var(--marge) calc(var(--marge) + env(safe-area-inset-bottom));
	background: var(--rouge); color: var(--noir);
	clip-path: inset(0 0 100% 0);
	transition: clip-path .6s var(--sortie);
	overflow-y: auto;
}
.menu-plein[hidden] { display: none; }
.menu-plein.est-ouvert { clip-path: inset(0); }
.menu-plein__haut {
	height: var(--entete); flex: none;
	display: flex; align-items: center; justify-content: space-between;
}
.menu-plein__nav { margin-top: auto; padding: 24px 0; }
.menu-plein__liste { list-style: none; margin: 0; padding: 0; }
.menu-plein__liste li { overflow: hidden; border-top: 1px solid rgba(14, 14, 14, .35); }
.menu-plein__liste li:last-child { border-bottom: 1px solid rgba(14, 14, 14, .35); }
.menu-plein__liste a {
	display: block; padding: 6px 0 2px;
	font: 400 clamp(44px, 13vw, 120px)/1 var(--titre);
	text-transform: uppercase; text-decoration: none;
	transform: translateY(105%);
	transition: transform .6s var(--sortie);
}
.menu-plein.est-ouvert .menu-plein__liste a { transform: none; }
.menu-plein.est-ouvert li:nth-child(2) a { transition-delay: .05s; }
.menu-plein.est-ouvert li:nth-child(3) a { transition-delay: .1s; }
.menu-plein.est-ouvert li:nth-child(4) a { transition-delay: .15s; }
.menu-plein.est-ouvert li:nth-child(5) a { transition-delay: .2s; }
.menu-plein.est-ouvert li:nth-child(n+6) a { transition-delay: .25s; }
.menu-plein__liste a:hover { color: var(--blanc); }
.menu-plein__bas { margin: 0; font: 400 13px/1.4 var(--gras); text-transform: uppercase; max-width: 32ch; }

/* Sélecteur de langue « FR NL EN » : discret, la langue affichée soulignée */
.langues {
	list-style: none; margin: 0; padding: 0;
	display: flex;
	font: 400 13px/1 var(--gras); letter-spacing: .04em;
}
.langues a {
	display: inline-grid; place-items: center;
	min-width: 40px; min-height: 44px;
	text-decoration: none; opacity: .55;
	transition: opacity .2s;
}
.langues a:hover, .langues a[aria-current] { opacity: 1; }
.langues abbr { text-decoration: none; }
.langues a[aria-current] abbr { text-decoration: underline 2px; text-underline-offset: 5px; }
.langues--entete { display: none; }
.langues--menu, .langues--pied { margin-left: -12px; }
.langues--menu { margin-bottom: 8px; }
@media (min-width: 900px) {
	.langues--entete { display: flex; margin-right: 6px; }
}

/* Couverture */
.couv {
	position: relative;
	min-height: 100vh; min-height: 100svh;
	display: grid; grid-template-rows: 1fr auto auto;
	overflow: hidden;
	isolation: isolate;
}
.couv__media { position: absolute; inset: 0; z-index: -1; }
.couv__media img, .couv__media video {
	width: 100%; height: 100%; object-fit: cover;
	animation: zoom-sortie 1.8s var(--sortie) var(--delai) both;
}
.couv__media::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(to bottom, rgba(14, 14, 14, .55) 0, transparent 22%, transparent 45%, rgba(14, 14, 14, .85) 100%);
}
@keyframes zoom-sortie { from { transform: scale(1.12); } }
.provisoire {
	position: absolute; z-index: 1; top: calc(var(--entete) + 8px); right: var(--marge);
	font: 400 11px/1 var(--gras); letter-spacing: .08em; text-transform: uppercase;
	color: var(--gris); border: 1px solid currentColor; padding: 6px 8px;
}
.couv__contenu {
	grid-row: 2;
	padding: 0 var(--marge) 20px;
}
.couv__numero {
	margin: 0 0 12px;
	font: 400 13px/1 var(--gras); letter-spacing: .06em; text-transform: uppercase;
	animation: apparait-bas .8s var(--sortie) calc(var(--delai) + .1s) both;
}
.couv__accroche {
	margin: 0;
	font: 400 clamp(76px, 24vw, 240px)/.86 var(--titre);
	text-transform: uppercase;
	letter-spacing: -.005em;
	max-width: 9ch;
	animation: apparait-bas 1s var(--sortie) calc(var(--delai) + .15s) both;
}
.couv__bouton {
	grid-row: 3;
	display: flex; align-items: center; justify-content: space-between;
	min-height: 64px; padding: 0 var(--marge);
	padding-bottom: env(safe-area-inset-bottom);
	background: var(--rouge); color: var(--noir);
	font: 400 18px/1 var(--gras); text-transform: uppercase; letter-spacing: .01em;
	text-decoration: none;
	animation: apparait-bas .8s var(--sortie) calc(var(--delai) + .3s) both;
}
.couv__bouton span { font-size: 28px; transition: transform .3s var(--sortie); }
.couv__bouton:hover span { transform: translateX(8px); }
.couv__bouton:hover { background: var(--blanc); }
@keyframes apparait-bas { from { opacity: 0; transform: translateY(40px); } }
@media (min-width: 900px) {
	.couv__contenu { padding-bottom: 32px; }
	.couv__accroche { max-width: 11ch; font-size: clamp(120px, 14vw, 260px); }
	.couv__bouton { min-height: 88px; font-size: 24px; }
}

/* Bandeau qui défile */
.bandeau {
	overflow: hidden;
	background: var(--rouge); color: var(--noir);
	border-top: 1px solid var(--noir);
}
.bandeau__piste {
	display: flex; width: max-content;
	animation: defile 28s linear infinite;
}
.bandeau__piste span {
	padding: 12px 0;
	font: 400 18px/1 var(--gras); text-transform: uppercase; white-space: nowrap;
}
@keyframes defile { to { transform: translateX(-50%); } }

/* Titres géants et liens fléchés */
.titre-geant {
	margin: 0;
	font: 400 clamp(60px, 17vw, 200px)/.88 var(--titre);
	text-transform: uppercase;
}
.lien-fleche {
	font: 400 14px/1 var(--gras); text-transform: uppercase; text-decoration: none;
	white-space: nowrap; padding: 12px 0;
}
.lien-fleche span { color: var(--rouge); display: inline-block; transition: transform .3s var(--sortie); }
.lien-fleche:hover span { transform: translateX(6px); }

/* Nouveautés */
.nouv { padding: 72px 0 56px; position: relative; }
.nouv__tete {
	display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap;
	padding: 0 var(--marge) 28px;
}
.nouv__rail {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--marge);
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}
.nouv__rail::-webkit-scrollbar { display: none; }
.nouv__liste {
	list-style: none; margin: 0;
	display: flex; gap: 12px;
	padding: 0 var(--marge);
	width: max-content;
}
.carte { width: 78vw; max-width: 440px; scroll-snap-align: start; }
.carte__lien { display: block; text-decoration: none; }
.carte__image { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #1a1a1a; }
.carte__image img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform .8s var(--sortie);
}
.carte__lien:hover .carte__image img { transform: scale(1.04); }
.carte__num { margin: 12px 0 4px; font: 400 11px/1 var(--gras); color: var(--gris); letter-spacing: .06em; }
.carte__nom { margin: 0; font: 400 20px/1.05 var(--gras); text-transform: uppercase; letter-spacing: -.01em; }
.carte__prix { margin: 6px 0 0; font: 400 16px/1.2 var(--gras); }
.carte__prix del { color: var(--gris); font-size: .85em; margin-right: 6px; }
.carte__prix ins { text-decoration: none; color: var(--rouge); }
.badge-livraison {
	display: inline-block;
	font: 400 10px/1 var(--gras); letter-spacing: .06em; text-transform: uppercase;
	padding: 6px 7px;
	background: var(--noir); color: var(--blanc);
	border: 1px solid var(--ligne);
}
.carte__image .badge-livraison { position: absolute; left: 10px; bottom: 10px; }
.nouv__fleches { display: none; }
@media (min-width: 900px) {
	.nouv { padding: 120px 0 96px; }
	.carte { width: 26vw; }
	.nouv__liste { gap: 20px; }
	.nouv__fleches { display: flex; gap: 8px; justify-content: flex-end; padding: 20px var(--marge) 0; }
	.nouv__fleche {
		width: 56px; height: 56px; cursor: pointer;
		background: none; border: 1px solid var(--ligne);
		font: 400 22px/1 var(--gras);
		transition: background-color .2s, color .2s;
	}
	.nouv__fleche:hover:not(:disabled) { background: var(--blanc); color: var(--noir); }
	.nouv__fleche:disabled { opacity: .3; cursor: default; }
}

/* Lookbook */
.look {
	position: relative;
	min-height: 100vh; min-height: 100svh;
	display: flex; align-items: flex-end;
	overflow: hidden; isolation: isolate;
}
.look__media { position: absolute; inset: 0; z-index: -1; }
.look__media img, .look__media video { width: 100%; height: 100%; object-fit: cover; }
.couv__media video, .look__media video { position: absolute; inset: 0; }
.look__media::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(to bottom, transparent 50%, rgba(14, 14, 14, .8));
}
.look__contenu { padding: var(--marge); padding-bottom: 40px; }
.etiquette {
	display: inline-block; margin-bottom: 14px;
	padding: 7px 9px;
	background: var(--rouge); color: var(--noir);
	font: 400 12px/1 var(--gras); letter-spacing: .06em; text-transform: uppercase;
}
.look__accroche {
	margin: 0;
	font: 400 clamp(72px, 22vw, 240px)/.86 var(--titre);
	text-transform: uppercase;
	max-width: 10ch;
}
.look .provisoire { top: var(--marge); color: var(--noir); }

/* Catégories */
.cats { padding: 72px var(--marge) 96px; }
.cats__titre {
	margin: 0 0 20px;
	font: 400 12px/1 var(--gras); letter-spacing: .08em; text-transform: uppercase; color: var(--gris);
}
.cats__liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ligne); }
.cats__liste li { border-bottom: 1px solid var(--ligne); }
.cats__lien {
	position: relative;
	display: flex; align-items: center; gap: 12px;
	padding: 14px 0 10px;
	text-decoration: none;
}
.cats__nom {
	font: 400 clamp(52px, 15vw, 200px)/.9 var(--titre);
	text-transform: uppercase;
	transition: transform .4s var(--sortie), color .2s;
}
.cats__nb {
	position: absolute; top: 14px; right: 0;
	font: 400 11px/1 var(--gras); color: var(--gris); text-transform: uppercase; letter-spacing: .06em;
}
.cats__fleche {
	margin-left: auto;
	font: 400 clamp(36px, 10vw, 120px)/1 var(--gras);
	color: var(--rouge);
	transition: transform .4s var(--sortie);
}
.cats__lien:hover .cats__nom { transform: translateX(12px); color: var(--rouge); }
.cats__lien:hover .cats__fleche { transform: translateX(-8px); }
@media (min-width: 900px) {
	.cats { padding: 120px var(--marge) 140px; }
}

/* Pied de page clair */
.pied {
	position: relative; z-index: 1;
	background: var(--blanc); color: var(--noir);
	padding: 56px var(--marge) calc(28px + env(safe-area-inset-bottom));
	display: grid; gap: 40px;
}
.pied__logo { display: block; width: min(100%, 560px); }
.pied__logo img { width: 100%; height: auto; }
.pied__liens { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(14, 14, 14, .2); }
.pied__liens li { border-bottom: 1px solid rgba(14, 14, 14, .2); }
.pied__liens a {
	display: block; padding: 14px 0;
	font: 400 18px/1 var(--gras); text-transform: uppercase; text-decoration: none;
}
.pied__liens a:hover { color: var(--rouge); }
.pied__copyright { margin: 0; font-size: 13px; color: #5c5a55; }
.pied__legal { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 20px; }
.pied__legal a { display: inline-block; padding: 10px 0; font-size: 13px; color: #5c5a55; text-underline-offset: 3px; }
.pied__legal a:hover { color: var(--rouge); }
@media (min-width: 900px) {
	.pied { grid-template-columns: 1.4fr 1fr; align-items: end; padding-top: 96px; }
	.pied__copyright, .langues--pied, .pied__legal { grid-column: 1 / -1; }
}

/* Apparitions au défilement (seulement avec JavaScript) */
.js [data-apparait] {
	opacity: 0; transform: translateY(48px);
	transition: opacity .9s var(--sortie), transform .9s var(--sortie);
}
.js [data-apparait].est-visible { opacity: 1; transform: none; }
.js .carte[data-apparait]:nth-child(2) { transition-delay: .08s; }
.js .carte[data-apparait]:nth-child(3) { transition-delay: .16s; }

/* Pages simples et WooCommerce (provisoire) */
.page-simple { padding: calc(var(--entete) + 32px) var(--marge) 72px; }
.page-simple__texte { max-width: 65ch; margin-top: 24px; line-height: 1.6; }
.page-simple__texte h2 { margin: 40px 0 8px; font: 400 18px/1.2 var(--gras); text-transform: uppercase; letter-spacing: .02em; }
.page-simple__texte h3 { margin: 28px 0 6px; font: 400 15px/1.2 var(--gras); text-transform: uppercase; }
.page-simple__texte p { margin: 0 0 12px; }
.page-simple__texte a { color: inherit; text-decoration-color: var(--rouge); text-underline-offset: 3px; }
.page-simple__texte a:hover { color: var(--rouge); }
/* Textes à compléter (pages légales) : impossibles à rater. */
.a-completer { background: var(--rouge); color: var(--noir); padding: 0 4px; font-weight: 700; }

/* Moins d'animations : tout s'affiche directement, rien ne bouge en boucle. */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		animation-delay: 0s !important;
		transition-duration: .01ms !important;
		transition-delay: 0s !important;
		scroll-behavior: auto !important;
	}
	.grain { animation: none; }
	.bandeau__piste { animation: none; flex-wrap: wrap; width: auto; }
	.bandeau__piste span:not(:first-child) { display: none; }
	.bandeau__piste span { padding-inline: var(--marge); white-space: normal; }
	.js [data-apparait] { opacity: 1; transform: none; }
}