/**
 * 500 Degrés 2 — styles du site (étape 1 : base, en-tête, bandeau, pied de page, barre mobile).
 * Couleurs et polices : theme.json (--wp--preset--*). Maquettes : canevas « 500 Degrés — Maquettes ».
 */

:root {
	--m5-noir: #000;
	--m5-rose: var(--wp--preset--color--rose, #F4A9AC);
	--m5-rose-fonce: var(--wp--preset--color--rose-fonce, #CC3366);
	--m5-vert: var(--wp--preset--color--accent, #2CAD64);
	--m5-rouge: var(--wp--preset--color--rouge, #E52421);
	--m5-gris: var(--wp--preset--color--fond-alt, #F4F4F4);
	--m5-k: var(--wp--preset--font-family--titre, "Knockout", "Arial Narrow", sans-serif);
	--m5-f: var(--wp--preset--font-family--texte, "Futura TS", "Century Gothic", sans-serif);
	--m5-wrap: 1320px;
	--m5-gutter: 40px;
	--m5-ease: cubic-bezier(.2, .8, .2, 1);
	--m5-hot: linear-gradient(95deg, #F4A9AC 10%, #FF6F91 90%);
}
@media (max-width: 760px) { :root { --m5-gutter: 18px; } }

body { font-synthesis: none; }
b, strong { font-weight: 900; }
h1, h2, h3, h4 { font-weight: 400; }
.m5-wrap { max-width: var(--m5-wrap); margin-inline: auto; padding-inline: var(--m5-gutter); }
.m5-hot { font-style: normal; background: var(--m5-hot); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ---------- Boutons ---------- */
.m5-btn,
.wp-block-button__link,
.woocommerce .button {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	min-height: 52px; padding: 0 28px; border: 0; border-radius: 999px;
	background: #000; color: #fff;
	font-family: var(--m5-f); font-weight: 900; font-size: 14px; letter-spacing: .08em; text-transform: uppercase;
	text-decoration: none; cursor: pointer;
	transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}
.m5-btn:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0, 0, 0, .25); }
.m5-btn--light { background: #fff; color: #000; }
.m5-btn--light:hover { color: #000; box-shadow: 0 12px 30px rgba(255, 255, 255, .18); }
.m5-btn--line { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .75); }
.m5-btn--line:hover { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1.5px #fff; }

/* ---------- Bandeau défilant (au-dessus de l'en-tête, part au défilement) ---------- */
.m5-marq { position: relative; display: block; overflow: hidden; white-space: nowrap; background: linear-gradient(90deg, #2CAD64, #F4A9AC); color: #000; text-decoration: none; }
.m5-marq__t { display: inline-flex; animation: m5-defile 40s linear infinite; }
.m5-marq:hover .m5-marq__t { animation-play-state: paused; }
.m5-marq__i { padding: 8px 0; font-weight: 900; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.m5-marq__sep { padding: 0 14px; }
@keyframes m5-defile { to { transform: translateX(-50%); } }

/* ---------- En-tête : noir, logo · menu centré · bouton + compte ---------- */
.m5-header .mm-navbar { background: #000; color: #fff; }
.m5-header .mm-navbar__inner {
	display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 32px;
	max-width: var(--m5-wrap); margin-inline: auto; padding-inline: var(--m5-gutter);
}
.m5-logo { display: inline-block; line-height: 0; }
.m5-logo img { height: 46px; width: auto; }
.m5-header .mm-nav__menu { gap: 0 44px; }
.m5-header .mm-nav__menu a {
	position: relative; padding: 6px 0; color: #fff;
	font-family: var(--m5-k); font-size: 24px; letter-spacing: .03em; text-transform: uppercase;
}
.m5-header .mm-nav__menu a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: #fff; transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.m5-header .mm-nav__menu a:hover::after,
.m5-header .mm-nav__menu .current-menu-item > a::after,
.m5-header .mm-nav__menu .current_page_item > a::after { transform: scaleX(1); }
.m5-actions { justify-self: end; display: flex; align-items: center; gap: 8px; }
.m5-cta { min-height: 46px; padding: 0 22px; }
.m5-cta.is-full { background: var(--m5-vert); color: #fff; }
.m5-cta.is-full:hover { color: #fff; box-shadow: 0 12px 26px rgba(44, 173, 100, .35); }
.m5-cta.is-ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .6); }
.m5-cta__n { min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; background: #fff; color: #000; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; letter-spacing: 0; }
.m5-cta.is-ghost .m5-cta__n { background: var(--m5-vert); color: #fff; }
.m5-cta__sep { opacity: .5; }
.m5-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; color: #fff; transition: background .2s; }
.m5-icon-btn:hover, .m5-icon-btn.is-on { background: #1c1c1c; color: #fff; }

@media (max-width: 1024px) {
	/* Mobile : logo · bouton · compte · burger « ME / NU » */
	.m5-header .mm-navbar__inner { display: flex; gap: 6px; }
	.m5-header .mm-brand { margin-right: auto; }
	.m5-header .mm-nav { order: 3; }
	.m5-header .m5-actions { order: 2; }
	.m5-header .mm-nav__toggle { color: #fff; }
	.m5-header .mm-nav__menu { background: #000; box-shadow: 0 20px 40px rgba(0, 0, 0, .4); }
	.m5-header .mm-nav__menu > li { border-bottom-color: #222; }
	.m5-header .mm-nav__menu a { font-size: 30px; padding: 18px var(--m5-gutter); }
	.m5-header .mm-nav__menu a::after { display: none; }
}
@media (max-width: 760px) {
	.m5-cta { min-height: 40px; padding: 0 12px; font-size: 12px; }
	.m5-cta:not(.is-full):not(.is-ghost) { display: none; } /* « Commander » : la barre mobile s'en charge */
	.m5-cta__l, .m5-cta__sep { display: none; }
	.m5-logo img { height: 38px; }
	.m5-marq__i { font-size: 12px; padding: 7px 0; }
}

/* Menu mobile : les entrées glissent à l'ouverture */
@media (max-width: 1024px) and (prefers-reduced-motion: no-preference) {
	.m5-header .mm-nav.is-open .mm-nav__menu > li { animation: m5-menu-in .45s var(--m5-ease) both; }
	.m5-header .mm-nav.is-open .mm-nav__menu > li:nth-child(2) { animation-delay: .06s; }
	.m5-header .mm-nav.is-open .mm-nav__menu > li:nth-child(3) { animation-delay: .12s; }
	.m5-header .mm-nav.is-open .mm-nav__menu > li:nth-child(4) { animation-delay: .18s; }
}
@keyframes m5-menu-in { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }

/* ---------- Pied de page ---------- */
.m5-footer { background: #000; color: #cfcfcf; padding: 56px 0 28px; }
.m5-footer a { color: #fff; text-decoration: none; }
.m5-footer a:hover { text-decoration: underline; }
.m5-footer__cols { max-width: var(--m5-wrap); margin-inline: auto; padding-inline: var(--m5-gutter); display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 32px; }
.m5-footer p, .m5-footer li { font-size: 15px; line-height: 1.7; margin: 0 0 12px; }
.m5-footer__t { margin: 0 0 16px; font-family: var(--m5-k); font-size: 26px; letter-spacing: .03em; color: #fff; }
.m5-logo--foot img { height: 58px; }
.m5-footer__tag { margin-top: 18px !important; font-weight: 900; color: #fff; }
.m5-footer__hours { list-style: none; margin: 0; padding: 0; }
.m5-footer__hours li { display: flex; justify-content: space-between; gap: 12px; margin: 0; }
.m5-footer__menu { list-style: none; margin: 0; padding: 0; }
.m5-footer__menu li { margin: 0; }
.m5-footer__legal { max-width: var(--m5-wrap); margin: 32px auto 0; padding: 22px var(--m5-gutter) 0; border-top: 1px solid #222; }
.m5-footer__legal p { font-size: 13px; line-height: 1.55; color: #9a9a9a; margin: 0 0 6px; }
@media (max-width: 1100px) { .m5-footer__cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .m5-footer { padding-bottom: 96px; } .m5-footer__cols { grid-template-columns: 1fr; gap: 8px; } }

/* ---------- Barre de commande mobile ---------- */
.m5-mbar { display: none; }
@media (max-width: 760px) {
	.m5-mbar {
		display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; gap: 10px; align-items: center;
		padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
		background: rgba(0, 0, 0, .92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	}
	.m5-mbar .m5-btn { flex: 1; min-height: 50px; }
	.m5-mbar__info { margin: 0; color: #fff; font-size: 13px; line-height: 1.3; }
	.m5-mbar__info b { display: block; }
}

/* ---------- Mouvements réduits ---------- */
@media (prefers-reduced-motion: reduce) {
	.m5-marq__t { animation: none; }
	.m5-btn { transition: none; }
}

/* Bouton flottant Orderable : remplacé par « Mon panier » (en-tête) et la barre mobile. */
.orderable-floating-cart { display: none !important; }