/*
Theme Name: Yakoss
Theme URI: https://yakoss.fr
Author: Yakoss
Description: Thème sur-mesure pour Yakoss, les jus faits maison de Firmine Ngolombi : présentation des jus et formulaire de commande (dès 3 bouteilles, Rhône uniquement).
Version: 1.2.0
Requires at least: 6.2
Requires PHP: 7.4
Text Domain: yakoss
*/

:root {
	--hibiscus: #8E0F2E;
	--hibiscus-nuit: #4A0717;
	--capsule: #F2601F;
	--gingembre: #F7C76B;
	--peche: #FBDCCB;
	--menthe: #1F6B4A;
	--encre: #2B0A12;
	--blanc: #FFFFFF;
	--gris: #6E5A5F;

	--f-titre: "Unbounded", "Arial Black", system-ui, sans-serif;
	--f-texte: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

	--t-xs: .875rem;
	--t-s: 1rem;
	--t-m: 1.125rem;
	--t-l: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
	--t-xl: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
	--t-xxl: clamp(2.6rem, 1.4rem + 5vw, 5.6rem);

	--gouttiere: clamp(1rem, 4vw, 3rem);
	--max: 1200px;
	--rayon: 22px;
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	font-family: var(--f-texte);
	font-size: var(--t-m);
	line-height: 1.6;
	color: var(--encre);
	background: var(--blanc);
	overflow-x: hidden;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--f-titre); line-height: 1.08; margin: 0 0 .5em; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--capsule); outline-offset: 3px; border-radius: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.evitement { position: absolute; left: -999px; top: 0; background: var(--encre); color: #fff; padding: .6rem 1rem; z-index: 100; }
.evitement:focus { left: 1rem; }

/* ---------- Boutons : la capsule orange des bouteilles ---------- */
.bouton {
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	min-height: 52px; padding: .8rem 1.6rem;
	font-family: var(--f-titre); font-weight: 700; font-size: var(--t-s);
	text-decoration: none; border-radius: 999px; border: 2px solid transparent;
	cursor: pointer; transition: transform .15s ease, background-color .15s ease, color .15s ease;
}
.bouton:active { transform: translateY(1px); }
.bouton--capsule { background: var(--capsule); color: var(--blanc); box-shadow: inset 0 -4px 0 rgba(0,0,0,.18); }
.bouton--capsule:hover { background: #D94E12; }
.bouton--contour { border-color: currentColor; color: var(--blanc); }
.bouton--contour:hover { background: rgba(255,255,255,.12); }
.bouton--contour-sombre { border-color: var(--encre); color: var(--encre); }
.bouton--plein { background: var(--jus-encre, var(--encre)); color: var(--jus, #fff); }
.bouton--plein:hover { opacity: .9; }
.bouton--large { width: 100%; font-size: var(--t-m); min-height: 60px; }

/* ---------- En-tête ---------- */
.entete {
	position: sticky; top: 0; z-index: 50;
	background: var(--hibiscus-nuit);
	color: var(--blanc);
}
.entete__inner {
	max-width: var(--max); margin: 0 auto; padding: .7rem var(--gouttiere);
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.marque { text-decoration: none; }
.marque__mot {
	font-family: var(--f-titre); font-weight: 900; font-size: 1.6rem; letter-spacing: .02em;
	color: var(--gingembre);
}
.nav__liste { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: .3rem; }
.nav__liste a { display: block; padding: .55rem .9rem; text-decoration: none; font-weight: 600; border-radius: 999px; }
.nav__liste a:hover { background: rgba(255,255,255,.1); }
.nav__cta a { background: var(--capsule); color: #fff; font-family: var(--f-titre); font-size: var(--t-xs); padding: .6rem 1.1rem; }
.nav__cta a:hover { background: #D94E12; }
.nav__bouton { display: none; }

@media (max-width: 760px) {
	.nav__bouton {
		display: grid; place-items: center; width: 46px; height: 46px;
		background: transparent; border: 0; color: inherit; cursor: pointer;
	}
	.nav__icone, .nav__icone::before, .nav__icone::after {
		content: ""; display: block; width: 24px; height: 2px; background: currentColor; position: relative; transition: transform .2s;
	}
	.nav__icone::before { position: absolute; top: -7px; }
	.nav__icone::after { position: absolute; top: 7px; }
	.nav__bouton[aria-expanded="true"] .nav__icone { background: transparent; }
	.nav__bouton[aria-expanded="true"] .nav__icone::before { transform: translateY(7px) rotate(45deg); }
	.nav__bouton[aria-expanded="true"] .nav__icone::after { transform: translateY(-7px) rotate(-45deg); }
	.nav__liste {
		display: none; position: absolute; left: 0; right: 0; top: 100%;
		flex-direction: column; align-items: stretch; gap: 0;
		background: var(--hibiscus-nuit); padding: .5rem var(--gouttiere) 1.2rem;
	}
	.nav__liste.est-ouvert { display: flex; }
	.nav__liste a { padding: .9rem 0; font-size: var(--t-m); border-radius: 0; }
	.nav__cta a { margin-top: .6rem; text-align: center; padding: .9rem; border-radius: 999px; }
}

/* ---------- Hero ---------- */
.hero {
	background:
		radial-gradient(120% 90% at 85% 40%, #B31842 0%, transparent 60%),
		var(--hibiscus);
	color: var(--blanc);
	overflow: hidden;
}
.hero__inner {
	max-width: var(--max); margin: 0 auto;
	padding: clamp(2.5rem, 7vw, 6rem) var(--gouttiere) clamp(3rem, 8vw, 6.5rem);
	display: grid; grid-template-columns: 1.25fr .9fr; gap: clamp(2rem, 5vw, 5rem); align-items: center;
}
.hero__titre { font-size: var(--t-xxl); font-weight: 900; max-width: 11ch; margin-bottom: .45em; }
.hero__intro { font-size: var(--t-l); line-height: 1.45; max-width: 34ch; opacity: .92; margin-bottom: 1.8em; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 2.2rem; }
.hero__faits { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-size: var(--t-s); }
.hero__faits li { display: flex; align-items: center; gap: .5rem; }
.hero__faits li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--gingembre); flex: none; }

.hero__visuel { position: relative; justify-self: center; width: min(100%, 380px); }
/* Le signe de la marque : une silhouette de bouteille avec sa capsule orange */
.bouteille {
	position: relative;
	padding-top: 46px;
	animation: arrivee 1s cubic-bezier(.2,.8,.2,1) both;
}
.bouteille::before {
	content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
	width: 34%; height: 58px; border-radius: 14px 14px 6px 6px;
	background: repeating-linear-gradient(90deg, var(--capsule) 0 7px, #D94E12 7px 9px);
	box-shadow: inset 0 -6px 0 rgba(0,0,0,.18);
	z-index: 2;
}
.bouteille__video {
	width: 100%; aspect-ratio: 9 / 16; object-fit: cover;
	border-radius: 42% 42% var(--rayon) var(--rayon) / 14% 14% var(--rayon) var(--rayon);
	border: 6px solid rgba(255,255,255,.9);
	background: var(--hibiscus-nuit);
	position: relative; z-index: 1;
}
.sceau {
	position: absolute; left: -2.2rem; bottom: 12%; z-index: 3;
	width: 118px; height: 118px; border-radius: 50%;
	display: grid; place-content: center; text-align: center;
	background: var(--gingembre); color: var(--encre);
	font-family: var(--f-titre); font-weight: 700; font-size: .78rem; line-height: 1.15;
	transform: rotate(-12deg);
	box-shadow: 0 0 0 6px var(--hibiscus), 0 0 0 8px var(--gingembre);
	margin: 0;
}
.sceau span { display: block; font-size: 1.5rem; font-weight: 900; }
@keyframes arrivee { from { opacity: 0; transform: translateY(40px) rotate(3deg); } to { opacity: 1; transform: none; } }

@media (max-width: 860px) {
	.hero__inner { grid-template-columns: 1fr; }
	.hero__visuel { width: min(78%, 320px); }
	.sceau { left: -1.2rem; width: 96px; height: 96px; font-size: .68rem; }
	.sceau span { font-size: 1.2rem; }
}

/* ---------- Les jus : chaque jus prend sa couleur ---------- */
.jus { background: var(--jus); color: var(--jus-encre); overflow: clip; }
.jus__inner {
	max-width: var(--max); margin: 0 auto;
	padding: clamp(3rem, 8vw, 6.5rem) var(--gouttiere);
	display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.jus--inverse .jus__visuel { order: 2; }
.jus__visuel { margin: 0; }
.jus__visuel img {
	width: 100%; border-radius: var(--rayon);
	box-shadow: 0 30px 60px -30px rgba(0,0,0,.55);
	transform: rotate(-1.5deg);
}
.jus--inverse .jus__visuel img { transform: rotate(1.5deg); }
.jus__nom { font-size: var(--t-xxl); font-weight: 900; margin-bottom: .15em; }
.jus__accroche { font-family: var(--f-titre); font-weight: 500; font-size: var(--t-l); line-height: 1.3; margin-bottom: 1.1em; }
.jus__texte > p { max-width: 58ch; }
.jus__sous-titre { font-size: var(--t-s); font-weight: 700; margin: 1.6em 0 .7em; }
.ingredients { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.ingredients li {
	padding: .35rem .85rem; border-radius: 999px; font-size: var(--t-xs); font-weight: 600;
	border: 1.5px solid currentColor;
}
.atouts { margin: 0; padding-left: 1.2rem; }
.atouts li { margin-bottom: .3rem; }
.atouts li::marker { content: "✦  "; }
.jus__pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1.5px solid currentColor; }
.jus__formats { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
.jus__formats li { font-family: var(--f-titre); font-weight: 700; font-size: var(--t-l); white-space: nowrap; }
.jus__prix { margin-left: .6rem; padding: .15rem .7rem; border-radius: 999px; background: var(--jus-encre); color: var(--jus); }
.jus__indispo { margin: 0; font-weight: 700; }

@media (max-width: 860px) {
	.jus__inner { grid-template-columns: 1fr; }
	.jus--inverse .jus__visuel { order: 0; }
}

/* ---------- Fait maison ---------- */
.maison { background: var(--peche); padding: clamp(3.5rem, 8vw, 6rem) 0; }
.maison__entete { max-width: var(--max); margin: 0 auto 2.5rem; padding: 0 var(--gouttiere); display: grid; grid-template-columns: 1.4fr 1fr; gap: 2rem; align-items: end; }
.maison__entete p { font-size: var(--t-m); max-width: 46ch; margin: 0; }
.titre-section { font-size: var(--t-xl); font-weight: 900; margin: 0; }
.maison__bande {
	display: flex; gap: 1rem; align-items: center;
	overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin;
	padding: .5rem var(--gouttiere) 1.5rem;
}
.maison__item {
	margin: 0; flex: none; width: clamp(200px, 26vw, 280px); scroll-snap-align: start;
	border-radius: var(--rayon); overflow: hidden; background: var(--hibiscus-nuit);
	aspect-ratio: 3 / 4;
}
.maison__item--haut { aspect-ratio: 9 / 16; }
.maison__item img, .maison__item video { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) { .maison__entete { grid-template-columns: 1fr; gap: 1rem; } }

/* ---------- Histoire ---------- */
.histoire { background: var(--blanc); }
.histoire__inner {
	max-width: var(--max); margin: 0 auto;
	padding: clamp(3.5rem, 8vw, 6.5rem) var(--gouttiere);
	display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 6vw, 5rem); align-items: center;
}
.histoire__photo { margin: 0; position: relative; }
.histoire__photo img { width: 100%; object-position: 50% 20%; border-radius: 48% 48% var(--rayon) var(--rayon) / 30% 30% var(--rayon) var(--rayon); aspect-ratio: 4 / 5; object-fit: cover; }
.histoire__photo::after {
	content: ""; position: absolute; inset: auto -14px -14px auto; width: 46%; height: 46%;
	border-radius: var(--rayon); background: var(--gingembre); z-index: -1;
}
.histoire__texte p { max-width: 60ch; }
.histoire__texte .titre-section { margin-bottom: .8em; color: var(--hibiscus); }
.citation { margin: 2rem 0 0; padding: 1.4rem 1.6rem; background: var(--hibiscus); color: #fff; border-radius: var(--rayon) var(--rayon) var(--rayon) 4px; }
.citation p { font-family: var(--f-titre); font-weight: 500; font-size: var(--t-l); line-height: 1.35; margin: 0 0 .6rem; }
.citation footer { font-size: var(--t-xs); opacity: .85; }
@media (max-width: 860px) { .histoire__inner { grid-template-columns: 1fr; } .histoire__photo { max-width: 420px; } }

/* ---------- Commander ---------- */
.commander { background: var(--gingembre); }
.commander__inner {
	max-width: var(--max); margin: 0 auto;
	padding: clamp(3.5rem, 8vw, 6.5rem) var(--gouttiere);
	display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 5vw, 4rem); align-items: start;
}
.commander__intro { position: sticky; top: 100px; }
.commander__intro .titre-section { font-size: clamp(2.2rem, 1rem + 2.6vw, 3.2rem); margin-bottom: 1.5rem; }
.etapes { list-style: none; counter-reset: e; margin: 0; padding: 0; }
.etapes li { counter-increment: e; position: relative; padding-left: 3.4rem; margin-bottom: 1.4rem; }
.etapes li::before {
	content: counter(e); position: absolute; left: 0; top: -.15rem;
	width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center;
	background: var(--capsule); color: #fff; font-family: var(--f-titre); font-weight: 700;
}
.etapes strong { display: block; font-family: var(--f-titre); font-weight: 700; font-size: var(--t-s); }

.formulaire, .confirmation {
	background: var(--blanc); border-radius: var(--rayon);
	padding: clamp(1.4rem, 4vw, 2.5rem);
	box-shadow: 0 30px 60px -40px rgba(74,7,23,.6);
}
.bloc { border: 0; margin: 0 0 2rem; padding: 0; min-width: 0; }
.bloc legend { font-family: var(--f-titre); font-weight: 700; font-size: var(--t-l); margin-bottom: 1rem; padding: 0; }
.ligne-jus {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	padding: .9rem 1rem .9rem 1.2rem; margin-bottom: .6rem;
	border-radius: 16px; background: #FFF4EC;
	border-left: 8px solid var(--jus);
}
.ligne-jus__nom { font-family: var(--f-titre); font-weight: 700; font-size: var(--t-m); }
.ligne-jus__nom span { display: block; font-family: var(--f-texte); font-weight: 400; font-size: var(--t-xs); color: var(--gris); }
.compteur { display: flex; align-items: center; gap: .3rem; }
.compteur__btn {
	width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
	background: var(--encre); color: #fff; font-size: 1.4rem; line-height: 1;
}
.compteur__btn:hover { background: var(--hibiscus); }
.compteur__val {
	width: 3.2rem; height: 44px; text-align: center; border: 0; background: transparent;
	font-family: var(--f-titre); font-weight: 700; font-size: 1.3rem; color: var(--encre);
	-moz-appearance: textfield;
}
.compteur__val::-webkit-outer-spin-button, .compteur__val::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.total { margin: 1rem 0 0; font-weight: 700; }
.total [data-total] { font-family: var(--f-titre); font-size: var(--t-l); }
.total__note { font-weight: 400; color: var(--gris); }
.total.est-ok .total__note { color: var(--menthe); font-weight: 600; }

.grille { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.2rem; }
.champ { margin: 0 0 1.1rem; display: flex; flex-direction: column; }
.champ label { font-weight: 700; margin-bottom: .35rem; }
.champ__aide { display: block; font-weight: 400; font-size: var(--t-xs); color: var(--gris); }
.champ input, .champ textarea {
	font: inherit; font-size: var(--t-s); color: var(--encre);
	padding: .8rem 1rem; min-height: 50px; border-radius: 12px;
	border: 2px solid #E8D6CF; background: #fff; width: 100%;
}
.champ input:focus, .champ textarea:focus { border-color: var(--hibiscus); outline: none; box-shadow: 0 0 0 3px rgba(142,15,46,.18); }
.champ input[aria-invalid="true"] { border-color: #C0152B; }
.champ__erreur { color: #B0102A; font-size: var(--t-xs); font-weight: 600; margin: .35rem 0 0; }
.bloc > .champ__erreur { margin-top: .6rem; }
@media (max-width: 600px) { .grille { grid-template-columns: 1fr; } }

.choix { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-bottom: 1.2rem; }
.choix__item {
	display: flex; gap: .7rem; align-items: flex-start; cursor: pointer;
	padding: 1rem; border-radius: 16px; border: 2px solid #E8D6CF; font-size: var(--t-xs);
}
.choix__item strong { display: block; font-family: var(--f-titre); font-size: var(--t-s); margin-bottom: .2rem; }
.choix__item input { accent-color: var(--hibiscus); width: 20px; height: 20px; margin-top: .15rem; flex: none; }
.choix__item:has(input:checked) { border-color: var(--hibiscus); background: #FFF4EC; }
@media (max-width: 600px) { .choix { grid-template-columns: 1fr; } }

.consentement { font-size: var(--t-xs); margin: 0 0 1.5rem; }
.consentement label { display: flex; gap: .6rem; align-items: flex-start; cursor: pointer; }
.consentement input { accent-color: var(--hibiscus); width: 20px; height: 20px; flex: none; margin-top: .1rem; }
.alerte { background: #FDE7EA; color: #8A0C20; border-radius: 12px; padding: .9rem 1.1rem; font-weight: 600; }
.piege { position: absolute; left: -9999px; }
.confirmation__titre { font-family: var(--f-titre); font-weight: 900; font-size: var(--t-xl); color: var(--hibiscus); margin-bottom: .4em; }

@media (max-width: 860px) {
	.commander__inner { grid-template-columns: 1fr; }
	.commander__intro { position: static; }
}

/* ---------- Pages simples ---------- */
.page__inner { max-width: 760px; margin: 0 auto; padding: clamp(3rem, 8vw, 5rem) var(--gouttiere); }
.page__titre { font-size: var(--t-xl); font-weight: 900; color: var(--hibiscus); }
.page__texte h2 { font-size: var(--t-l); margin-top: 1.6em; }

/* ---------- Pied de page ---------- */
.pied { background: var(--hibiscus-nuit); color: #F6E3E7; font-size: var(--t-s); }
.pied__inner {
	max-width: var(--max); margin: 0 auto; padding: 3.5rem var(--gouttiere) 2rem;
	display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem;
}
.pied__mot { font-family: var(--f-titre); font-weight: 900; font-size: 2.4rem; color: var(--gingembre); margin-bottom: .3em; line-height: 1; }
.pied__titre { font-family: var(--f-titre); font-weight: 700; color: #fff; margin-bottom: .5em; }
.pied a { color: #fff; }
.pied__bas {
	max-width: var(--max); margin: 0 auto; padding: 1.2rem var(--gouttiere) 2rem;
	display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
	border-top: 1px solid rgba(255,255,255,.15); font-size: var(--t-xs);
}
.pied__bas p { margin: 0; }
@media (max-width: 760px) { .pied__inner { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Les colonnes de grille ne doivent jamais dépasser l'écran */
.hero__inner > *, .jus__inner > *, .histoire__inner > *, .commander__inner > *, .maison__entete > * { min-width: 0; }
@media (max-width: 420px) {
	.ligne-jus { padding: .8rem .6rem .8rem .9rem; gap: .5rem; }
	.compteur__btn { width: 40px; height: 40px; }
	.compteur__val { width: 2.4rem; }
}