/* =========================================================
   Sucré & Salé : refonte 2026 (brasserie, salon de thé)
   Couche de style pour les modules Divi (classes ss-*)
   Le contenu reste éditable dans le Divi Builder.
   ========================================================= */

:root {
	--ss-choco: #321821;
	--ss-choco-soft: #4a2a35;
	--ss-cream: #ede6d8;
	--ss-paper: #e8e0d1;
	--ss-chalk: rgba(237, 230, 216, 0.92);
	--ss-chalk-dim: rgba(237, 230, 216, 0.62);
	--ss-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

::selection { background: var(--ss-choco); color: var(--ss-cream); }

/* ---------- Titres maison : Permanent Marker + /sous-titre ---------- */
.ss-title h1,
.ss-title h2 { line-height: 1.02 !important; padding-bottom: 0.08em; text-wrap: balance; }
.ss-title p { font-weight: 300; letter-spacing: 0.01em; line-height: 1.3 !important; }
@media (max-width: 980px) {
	.ss-title p { font-size: 19px !important; }
	.ss-daily { margin-bottom: 56px !important; }
}
/* Esperluette lisible dans les titres en Permanent Marker (son « & » ressemble à un « + ») */
.ss-amp { font-family: Montserrat, sans-serif; font-weight: 600; font-size: 0.8em; font-style: normal; letter-spacing: 0; vertical-align: 0.04em; }
.ss-lead p { max-width: 34em; text-wrap: pretty; }

/* ---------- Boutons côte à côte ---------- */
.ss-hero-col .et_pb_button_module_wrapper { display: inline-block; margin: 0 22px 14px 0 !important; vertical-align: middle; }
.ss-btn-link .et_pb_button,
a.ss-btn-link.et_pb_button { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.et_pb_button:focus-visible { outline: 3px solid var(--ss-choco); outline-offset: 4px; }
.ss-board .et_pb_button:focus-visible { outline-color: var(--ss-cream); }

/* ---------- Photos : légère inclinaison, comme posées sur la table ---------- */
.ss-tilt-l img { transform: rotate(-3.5deg); }
.ss-tilt-r img { transform: rotate(3deg); }
.ss-photo img { box-shadow: 0 22px 40px -18px rgba(50, 24, 33, 0.45); }
.ss-overlap { margin-top: -30% !important; position: relative; z-index: 2; }
.ss-hero, .ss-clip { overflow: hidden; }
.ss-cover, .ss-cover .et_pb_image_wrap { display: block; width: 100%; }
.ss-cover img { width: 100%; height: min(720px, 82vh); object-fit: cover; }
@media (max-width: 980px) { .ss-cover img { height: 420px; } }

/* ---------- La journée : frise horaire ---------- */
.ss-day ol { list-style: none !important; margin: 0 !important; padding: 2.6rem 0 0 !important; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; position: relative; }
.ss-day ol::before {
	content: ""; position: absolute; top: 0.62rem; left: 0; right: 0; height: 3px;
	background: repeating-linear-gradient(90deg, var(--ss-choco) 0 14px, transparent 14px 24px);
	transform-origin: left center;
}
.ss-day li { position: relative; padding: 0 !important; color: var(--ss-choco); line-height: 1.55; }
.ss-day li::before {
	content: ""; position: absolute; top: -2.35rem; left: 0; width: 18px; height: 18px; border-radius: 50%;
	background: var(--ss-cream); border: 3px solid var(--ss-choco); box-sizing: border-box;
}
.ss-day .ss-day__time { display: block; font-family: "Permanent Marker", cursive; font-size: 2.3rem; line-height: 1.05; margin-bottom: 0.35rem; }
.ss-day strong { display: block; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.86rem; margin-bottom: 0.3rem; }
.ss-day a { color: var(--ss-choco); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Sections « ardoise » (classe ss-board) ----------
   Le fond et les couleurs se règlent dans Divi (Arrière-plan de la section, couleur du texte des modules).
   Les éléments ci-dessous reprennent la couleur du texte (currentColor). */

/* Trait de craie sous le titre */
.ss-chalk-title h2::after {
	content: ""; display: block; width: min(340px, 72%); height: 14px; margin-top: 0.35em; background-color: currentColor; opacity: 0.85;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 14'%3E%3Cpath d='M3 9c38-5 77-7 116-5s70 6 108 4 66-6 110-4' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") left center / 100% 100% no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 14'%3E%3Cpath d='M3 9c38-5 77-7 116-5s70 6 108 4 66-6 110-4' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") left center / 100% 100% no-repeat;
	transform-origin: left center;
}

/* Carte : nom ..... prix */
.ss-menu h3 {
	font-family: "Permanent Marker", cursive !important; font-size: 1.9rem !important; line-height: 1.1 !important;
	padding-bottom: 0.2em; margin-bottom: 0.2em; color: inherit;
}
.ss-menu .ss-menu__note { font-size: 1.05rem; opacity: 0.7; margin-bottom: 0.9em; padding: 0; }
.ss-menu ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.ss-menu li {
	display: flex; flex-wrap: wrap; align-items: baseline;
	padding: 0.5em 0 !important; margin: 0; line-height: 1.3;
	font-family: "Permanent Marker", cursive; font-size: 1.32rem; color: inherit;
}
.ss-menu li::before {
	content: ""; order: 1; flex: 1 1 2.5em; min-width: 1.5em; margin: 0 0.55em 0.3em;
	border-bottom: 2px dotted currentColor; opacity: 0.4;
}
.ss-menu .ss-menu__name { order: 0; }
.ss-menu .ss-menu__price { order: 2; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ss-menu small {
	order: 3; flex-basis: 100%;
	font-family: Montserrat, sans-serif; font-size: 0.86rem; letter-spacing: 0.01em; opacity: 0.7; margin-top: 0.15em;
}
.ss-menu ul.ss-menu__plain li::before { display: none; }

/* Plat / poisson du jour mis en avant sur l'ardoise */
.ss-daily p { margin: 0; padding: 0; }
.ss-daily .ss-daily__price {
	display: inline-block; font-family: "Permanent Marker", cursive; font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: 1;
	color: inherit; padding: 0.18em 0.45em; margin: 0.15em 0 0.25em;
	border: 3px solid currentColor; border-radius: 999px 860px 920px 780px / 640px 820px 700px 900px;
	transform: rotate(-2deg);
}

/* Grande ardoise de l'accueil : chaque ligne est un lien */
.ss-menu--big li { padding: 0 !important; font-size: clamp(1.7rem, 3.4vw, 2.9rem); line-height: 1.05; }
.ss-menu--big li a { display: flex; flex-wrap: wrap; align-items: baseline; width: 100%; padding: 0.42em 0; color: inherit; text-decoration: none; transition: transform 0.35s var(--ss-ease); }
.ss-menu--big li::before { display: none; }
.ss-menu--big li a::before { content: ""; order: 1; flex: 1 1 2em; min-width: 1em; margin: 0 0.4em 0.18em; border-bottom: 3px dotted currentColor; opacity: 0.38; }
.ss-menu--big .ss-menu__price { font-size: 0.62em; }
.ss-menu--big small { font-size: 1rem; }
.ss-menu--big li a:hover, .ss-menu--big li a:focus-visible { transform: translateX(10px); outline: none; }
.ss-menu--big li a:focus-visible .ss-menu__name { text-decoration: underline; text-underline-offset: 6px; }

/* Hero vidéo : voile chocolat pour la lisibilité */
.ss-video { position: relative; display: flex; align-items: center; }
.ss-video::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(100deg, rgba(50, 24, 33, 0.86) 0%, rgba(50, 24, 33, 0.62) 48%, rgba(50, 24, 33, 0.22) 100%); }
.ss-video > .et_pb_row { position: relative; z-index: 2; width: 90%; }
/* Centrage vertical dans le bloc vidéo (plus fort que la marge de ligne générée par Divi) */
.ss-video.et_pb_section > .et_pb_row.et_pb_row { margin-top: auto !important; margin-bottom: auto !important; }
/* Grands écrans (27 pouces et plus) : le bloc grandit avec l'écran */
@media (min-width: 1800px) {
	.ss-video.et_pb_section > .et_pb_row.et_pb_row { max-width: 1600px !important; gap: 64px; }
	.ss-video.et_pb_section > .et_pb_row > .et_pb_column:last-child:not(:first-child) { flex-basis: 920px; }
	.ss-video.et_pb_section .et_pb_column:first-child:not(:last-child) .et_pb_image.et_pb_module { max-width: 360px !important; }
	.ss-video.et_pb_section .et_pb_column:last-child .et_pb_image.et_pb_module { max-width: 840px !important; }
	.ss-video.et_pb_section .ss-lead.et_pb_module p { font-size: 29px !important; max-width: 36em; }
	.ss-video.et_pb_section .et_pb_button_module_wrapper .et_pb_button { font-size: 19px !important; }
}
@media (min-width: 981px) {
	/* Colonnes du haut de page centrées en hauteur (mascotte au milieu du contenu) */
	.ss-video > .et_pb_row { display: flex; align-items: center; justify-content: center; gap: 48px; }
	.ss-video > .et_pb_row > .et_pb_column { float: none; margin-top: 0 !important; margin-bottom: 0 !important; margin-right: 0 !important; }
	/* Bloc centré sur grand écran : la mascotte prend sa largeur, le contenu au plus 720 px */
	.ss-video > .et_pb_row > .et_pb_column:first-child:not(:last-child) { flex: 0 0 auto; width: auto !important; }
	.ss-video > .et_pb_row > .et_pb_column:last-child:not(:first-child) { flex: 0 1 720px; width: auto !important; }
}
.ss-video .ss-btn-link .et_pb_button, .ss-video a.ss-btn-link { color: var(--ss-cream) !important; }

/* Section qui se fige au scroll (classe ss-pin) et section suivante qui passe dessus (classe ss-over).
   overflow-x: clip au lieu de hidden, sinon position: sticky ne fonctionne pas. */
html:has(.ss-pin), html:has(.ss-pin) body { overflow-x: clip !important; }
html:has(.ss-pin) #page-container { overflow: clip !important; }
.ss-pin { position: sticky !important; top: var(--ss-pin-top, 0px); z-index: 1 !important; }
.ss-over { position: relative; z-index: 120 !important; box-shadow: 0 -24px 40px -20px rgba(50, 24, 33, 0.45); }
/* Toutes les sections qui suivent passent aussi au-dessus de la section figée */
.ss-pin ~ .et_pb_section:not(.et_pb_section--fixed) { position: relative; z-index: 120 !important; }

/* Mascotte au-dessus des titres : léger balancement */
.ss-js .ss-bob img { transform-origin: 50% 92%; animation: ss-bob 3.2s ease-in-out infinite; }

/* Icône couverts sous la flèche « retour en haut » (même onglet que Divi) */
.ss-carte-top {
	position: fixed; right: 0; bottom: 79px; z-index: 99999;
	width: 40px; height: 40px; padding: 8px; box-sizing: border-box;
	display: flex; align-items: center; justify-content: center;
	background: rgba(0, 0, 0, 0.4); color: #fff; border-radius: 5px 0 0 5px;
	opacity: 0; visibility: hidden; transform: translateX(100%);
	transition: opacity 0.3s var(--ss-ease), transform 0.35s var(--ss-ease), visibility 0s linear 0.35s, background-color 0.2s;
}
.ss-carte-top svg { width: 22px; height: 22px; fill: currentColor; display: block; }
.et_pb_scroll_top.et-visible + .ss-carte-top { opacity: 1; visibility: visible; transform: none; transition-delay: 0.08s, 0.08s, 0s, 0s; }
.ss-carte-top:hover, .ss-carte-top:focus-visible { background: var(--ss-choco); color: var(--ss-cream); outline: none; }
.ss-carte-top:focus-visible { box-shadow: inset 0 0 0 2px var(--ss-cream); }

/* ---------- Infos pratiques ---------- */
.ss-hours ul { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.ss-hours li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.2em 1em; padding: 0.7em 0 !important; border-bottom: 1px solid color-mix(in srgb, currentColor 25%, transparent); }
.ss-hours li:last-child { border-bottom: 0; }
.ss-hours li strong { font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.9rem; }
.ss-hours li span { font-variant-numeric: tabular-nums; }

/* ---------- Animations (uniquement si JS actif et mouvement autorisé) ---------- */
.ss-js .ss-write li,
.ss-js .ss-write .ss-menu__note,
.ss-js .ss-write h3 { clip-path: inset(-10% 100% -10% 0); }
.ss-js .ss-write.is-in li,
.ss-js .ss-write.is-in .ss-menu__note,
.ss-js .ss-write.is-in h3 {
	clip-path: inset(-10% -2% -10% 0);
	transition: clip-path 0.95s var(--ss-ease);
	transition-delay: calc(var(--i, 0) * 85ms);
}
.ss-js .ss-chalk-title h2::after { transform: scaleX(0); }
.ss-js .ss-chalk-title.is-in h2::after { transform: scaleX(1); transition: transform 1.1s var(--ss-ease) 0.25s; }
.ss-js .ss-day ol::before { transform: scaleX(0); }
.ss-js .ss-day.is-in ol::before { transform: scaleX(1); transition: transform 1.4s var(--ss-ease); }
.ss-js .ss-day li::before { transform: scale(0); }
.ss-js .ss-day.is-in li::before { transform: scale(1); transition: transform 0.5s var(--ss-ease); transition-delay: calc(0.25s + var(--i, 0) * 260ms); }
.ss-js .ss-daily .ss-daily__price { clip-path: inset(0 100% 0 0); }
.ss-js .ss-daily.is-in .ss-daily__price { clip-path: inset(-20% -5% -20% -5%); transition: clip-path 1s var(--ss-ease) 0.2s; }

/* ---------- Mascottes animées : entrée en marchant, puis balancement ---------- */
.ss-mascot { --ss-from: 70px; }
.ss-mascot--left { --ss-from: -70px; }
.ss-perch { margin-top: -190px !important; position: relative; z-index: 3; }
@media (max-width: 980px) { .ss-perch { margin-top: -110px !important; } }
.ss-mascot img { transform-origin: 50% 92%; cursor: pointer; }
.ss-js .ss-mascot img { opacity: 0; }
.ss-js .ss-mascot.is-in img { animation: ss-walkin 1.5s var(--ss-ease) forwards, ss-bob 2.8s ease-in-out 1.5s infinite; }
.ss-js .ss-mascot.is-idle img { opacity: 1; animation: ss-bob 2.8s ease-in-out infinite; }
.ss-js .ss-mascot.is-in:not(.is-on) img { animation-play-state: paused; }
.ss-js .ss-mascot.is-idle.is-hop img { animation: ss-hop 0.6s var(--ss-ease); }
@keyframes ss-walkin {
	0%   { opacity: 0; transform: translateX(var(--ss-from)) rotate(-6deg); }
	15%  { opacity: 1; }
	25%  { transform: translateX(calc(var(--ss-from) * 0.75)) translateY(-7px) rotate(6deg); }
	50%  { transform: translateX(calc(var(--ss-from) * 0.45)) rotate(-6deg); }
	75%  { transform: translateX(calc(var(--ss-from) * 0.18)) translateY(-7px) rotate(5deg); }
	100% { opacity: 1; transform: none; }
}
@keyframes ss-bob {
	0%, 100% { transform: rotate(0deg); }
	25% { transform: translateY(-3px) rotate(-3deg); }
	75% { transform: translateY(-3px) rotate(3deg); }
}
@keyframes ss-hop {
	0% { transform: none; }
	35% { transform: translateY(-22px) rotate(-8deg); }
	65% { transform: translateY(0) rotate(4deg) scaleY(0.94); }
	100% { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.ss-js .ss-mascot img, .ss-js .ss-bob img { opacity: 1 !important; animation: none !important; }
	.ss-menu--big li a { transition: none; }
	.ss-js .ss-write li, .ss-js .ss-write .ss-menu__note, .ss-js .ss-write h3,
	.ss-js .ss-daily .ss-daily__price { clip-path: none !important; transition: none !important; }
	.ss-js .ss-chalk-title h2::after, .ss-js .ss-day ol::before, .ss-js .ss-day li::before { transform: none !important; transition: none !important; }
}

/* ---------- Mobile ---------- */
@media (max-width: 980px) {
	.ss-day ol { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 3.2rem; }
	.ss-day ol::before { display: none; }
	.ss-overlap { margin-top: -10% !important; }
}
@media (max-width: 600px) {
	.ss-day ol { grid-template-columns: 1fr; row-gap: 2.6rem; padding: 0.4rem 0 0 2.2rem !important; }
	.ss-day li::before { top: 0.6rem; left: -2.2rem; }
	.ss-menu li { font-size: 1.15rem; }
	.ss-menu h3 { font-size: 1.6rem !important; }
	.ss-tilt-l img, .ss-tilt-r img { transform: none; }
}

/* =========================================================
   En-tête (Saintes + téléphone + menu) et menu plein écran
   Pages avec la classe body .ss-new-header (voir inc/ss-header.php)
   ========================================================= */
.ss-new-header #main-header, .ss-new-header #et-top-navigation, .ss-new-header .et_slide_in_menu_container { display: none !important; }

.ss-hd {
	position: fixed; z-index: 100001;
	top: calc(env(safe-area-inset-top, 0px) + clamp(14px, 2.6vh, 26px));
	right: calc(env(safe-area-inset-right, 0px) + clamp(14px, 3vw, 44px));
	display: flex; align-items: center; gap: 10px;
}
@media (min-width: 601px) { body.admin-bar .ss-hd { top: calc(32px + clamp(14px, 2.6vh, 26px)); } }
@media (min-width: 601px) and (max-width: 782px) { body.admin-bar .ss-hd { top: calc(46px + clamp(14px, 2.6vh, 26px)); } }

.ss-hd-pill {
	display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 20px 0 16px; border-radius: 999px;
	font-family: Montserrat, sans-serif; font-size: 15px; font-weight: 600; letter-spacing: 0.01em; line-height: 1; white-space: nowrap;
	text-decoration: none !important; box-shadow: 0 6px 22px rgba(50, 24, 33, 0.22);
	transition: transform 0.3s var(--ss-ease), background-color 0.25s, color 0.25s;
}
.ss-hd-pill svg { width: 18px; height: 18px; flex: 0 0 auto; }
.ss-hd-where { background: var(--ss-choco); color: var(--ss-cream) !important; }
.ss-hd-tel { background: var(--ss-cream); color: var(--ss-choco) !important; font-variant-numeric: tabular-nums; }
.ss-hd-pill:hover { transform: translateY(-2px); }
.ss-hd-pill:focus-visible, .ss-burger:focus-visible { outline: 3px solid var(--ss-cream); outline-offset: 3px; box-shadow: 0 0 0 6px var(--ss-choco); }

.ss-burger {
	width: 54px; height: 54px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
	background: var(--ss-cream); color: var(--ss-choco); display: grid; place-items: center;
	box-shadow: 0 6px 22px rgba(50, 24, 33, 0.25); transition: transform 0.3s var(--ss-ease), background-color 0.3s;
}
.ss-burger:hover { transform: scale(1.06); background: #fff; }
.ss-burger i, .ss-burger i::before { display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px; transition: transform 0.35s ease, translate 0.35s ease; }
.ss-burger i { position: relative; translate: 0 -3.5px; }
.ss-burger i::before { content: ""; position: absolute; left: 0; top: 7px; }
html.ss-menu-open .ss-burger i { translate: 0 0; transform: rotate(45deg); }
html.ss-menu-open .ss-burger i::before { top: 0; transform: rotate(-90deg); }
html.ss-menu-open .ss-hd-pill { opacity: 0; pointer-events: none; }

.ss-nav {
	position: fixed; inset: 0; z-index: 100000; overflow-y: auto;
	background: var(--ss-choco); color: var(--ss-cream);
	opacity: 0; visibility: hidden; transform: translateY(-2%);
	transition: opacity 0.45s ease, transform 0.55s var(--ss-ease), visibility 0s linear 0.55s;
}
.ss-nav[hidden] { display: block; }
html.ss-menu-open .ss-nav { opacity: 1; visibility: visible; transform: none; transition: opacity 0.45s ease, transform 0.55s var(--ss-ease), visibility 0s; }
html.ss-menu-open, html.ss-menu-open body { overflow: hidden !important; }

.ss-menu-in {
	max-width: 1180px; margin: 0 auto; min-height: 100%; box-sizing: border-box;
	padding: clamp(96px, 14vh, 140px) clamp(22px, 5vw, 60px) 48px;
	display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 56px; align-items: start;
}
.ss-menu-k { font-family: Montserrat, sans-serif; font-size: 13px !important; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ss-cream); opacity: 0.6; margin: 0 0 16px !important; padding: 0 !important; }
.ss-nav ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }

.ss-menu-nav { display: grid; gap: 0.35em; }
.ss-menu-nav a {
	display: inline-flex; align-items: center; gap: 20px; text-decoration: none !important;
	color: rgba(237, 230, 216, 0.6) !important; transition: color 0.3s ease, transform 0.4s var(--ss-ease);
}
.ss-menu-nav img {
	width: clamp(52px, 5vw, 70px); height: clamp(52px, 5vw, 70px); border-radius: 50%; object-fit: cover; flex: 0 0 auto;
	border: 3px solid rgba(237, 230, 216, 0.6); transition: border-color 0.3s, transform 0.4s var(--ss-ease);
}
.ss-menu-t { font-family: "Permanent Marker", cursive; font-size: clamp(34px, 5.2vw, 72px); line-height: 1.02; }
.ss-menu-t small { display: block; font-family: Montserrat, sans-serif; font-size: 15px; font-weight: 400; letter-spacing: 0.01em; line-height: 1.4; margin-top: 4px; opacity: 0.85; }
.ss-menu-nav a:hover, .ss-menu-nav a:focus-visible, .ss-menu-nav a[aria-current] { color: var(--ss-cream) !important; transform: translateX(10px); outline: none; }
.ss-menu-nav a:hover img, .ss-menu-nav a:focus-visible img, .ss-menu-nav a[aria-current] img { border-color: var(--ss-cream); transform: rotate(-6deg); }
.ss-menu-nav a:focus-visible .ss-menu-t { text-decoration: underline; text-underline-offset: 8px; }
.ss-menu-nav a[aria-current] .ss-menu-t small::after { content: " · vous êtes ici"; font-weight: 700; }

.ss-menu-hours { display: grid; margin-bottom: 30px !important; }
.ss-menu-hours li { display: flex; justify-content: space-between; gap: 1em; padding: 10px 0 !important; border-bottom: 1px solid rgba(237, 230, 216, 0.2); font-family: Montserrat, sans-serif; font-size: 15px; }
.ss-menu-hours li span:last-child { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ss-menu-cta {
	display: inline-block; background: var(--ss-cream); color: var(--ss-choco) !important; text-decoration: none !important;
	font-family: Montserrat, sans-serif; font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: 0.04em;
	border-radius: 999px; padding: 15px 28px; transition: background-color 0.3s, transform 0.3s var(--ss-ease);
}
.ss-menu-cta:hover { background: #fff; transform: translateY(-2px); }
.ss-menu-links { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 30px !important; }
.ss-menu-links a { font-family: Montserrat, sans-serif; font-size: 16px; font-weight: 600; color: var(--ss-cream) !important; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.ss-menu-links a:hover { text-decoration-thickness: 2px; }

/* Apparition en cascade */
html .ss-nav li { opacity: 0; translate: 0 18px; transition: opacity 0.5s ease, translate 0.6s var(--ss-ease); }
html.ss-menu-open .ss-nav li { opacity: 1; translate: 0 0; }
html.ss-menu-open .ss-menu-nav li:nth-child(1) { transition-delay: 0.12s; }
html.ss-menu-open .ss-menu-nav li:nth-child(2) { transition-delay: 0.18s; }
html.ss-menu-open .ss-menu-nav li:nth-child(3) { transition-delay: 0.24s; }
html.ss-menu-open .ss-menu-nav li:nth-child(4) { transition-delay: 0.30s; }
html.ss-menu-open .ss-menu-nav li:nth-child(5) { transition-delay: 0.36s; }
html.ss-menu-open .ss-menu-hours li, html.ss-menu-open .ss-menu-links li { transition-delay: 0.4s; }

@media (max-width: 860px) {
	.ss-menu-in { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 600px) {
	.ss-hd { gap: 8px; }
	.ss-hd-pill { width: 46px; padding: 0; justify-content: center; }
	.ss-hd-pill span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.ss-hd-pill svg { width: 20px; height: 20px; }
	.ss-burger { width: 50px; height: 50px; }
	.ss-menu-nav a { gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
	.ss-nav, .ss-nav li, .ss-burger i, .ss-burger i::before, .ss-hd-pill, .ss-menu-nav a, .ss-menu-nav img { transition: none !important; }
}
/* Espacements de la colonne infos du menu (priorité sur .ss-nav ul) */
.ss-nav .ss-menu-hours { margin-bottom: 30px !important; }
.ss-nav .ss-menu-links { margin-top: 30px !important; }
.ss-menu-t { font-size: clamp(34px, 4.6vw, 64px); }

/* Flèche « section suivante » (ajoutée par ss-refonte.js sur .ss-video et .ss-scroll) */
.ss-video, .ss-scroll { position: relative; }
.ss-scroll-down {
	position: absolute; left: 50%; bottom: clamp(18px, 3.5vh, 36px); z-index: 3; translate: -50% 0;
	width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
	color: var(--ss-cream) !important; border: 1.5px solid rgba(237, 230, 216, 0.55); background: rgba(50, 24, 33, 0.25);
	transition: background-color 0.25s, border-color 0.25s;
	animation: ss-nudge 2.4s ease-in-out infinite;
}
.ss-scroll-down svg { width: 22px; height: 22px; display: block; }
.ss-scroll-down:hover { background: var(--ss-cream); color: var(--ss-choco) !important; border-color: var(--ss-cream); }
.ss-scroll-down:focus-visible { outline: 3px solid var(--ss-cream); outline-offset: 4px; }
@keyframes ss-nudge { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(6px); } }
@media (max-width: 980px) { .ss-scroll-down { width: 42px; height: 42px; } }
@media (prefers-reduced-motion: reduce) { .ss-scroll-down { animation: none; } }

/* Lien Accueil (petit, en haut du menu) */
.ss-menu-home {
	display: inline-flex; align-items: center; gap: 8px; margin: 0 0 28px; padding: 8px 16px 8px 12px; border-radius: 999px;
	border: 1.5px solid rgba(237, 230, 216, 0.45); color: var(--ss-cream) !important; text-decoration: none !important;
	font-family: Montserrat, sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 0.02em; line-height: 1;
	transition: background-color 0.25s, color 0.25s, border-color 0.25s;
}
.ss-menu-home svg { width: 18px; height: 18px; flex: 0 0 auto; }
.ss-menu-home:hover, .ss-menu-home:focus-visible { background: var(--ss-cream); color: var(--ss-choco) !important; border-color: var(--ss-cream); outline: none; }
.ss-menu-home[aria-current] { background: rgba(237, 230, 216, 0.12); }
html .ss-menu-home { opacity: 0; translate: 0 12px; transition: opacity 0.5s ease 0.06s, translate 0.6s var(--ss-ease) 0.06s, background-color 0.25s, color 0.25s, border-color 0.25s; }
html.ss-menu-open .ss-menu-home { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) { html .ss-menu-home { transition: none; } }

/* =========================================================
   Fond « mise au point » (classe ss-focus sur une section)
   Photo floue en fond, version nette révélée autour de la souris,
   léger mouvement de parallaxe. Images définies dans Divi :
   Avancé > CSS personnalisé > Élément principal :
   --ss-focus-blur: url(...floue...); --ss-focus-sharp: url(...nette...);
   ========================================================= */
.ss-focus { position: relative; overflow: hidden; isolation: isolate; }
.ss-focus > .et_pb_row { position: relative; z-index: 2; }
.ss-focus-bg { position: absolute; inset: -28px; z-index: 0; pointer-events: none; }
.ss-focus-l {
	position: absolute; inset: 0; background-size: cover; background-position: center 58%; background-repeat: no-repeat;
	transform: translate3d(var(--fx, 0px), var(--fy, 0px), 0) scale(1.04); will-change: transform;
}
.ss-focus-sharp {
	opacity: 0; transition: opacity 0.7s var(--ss-ease);
	-webkit-mask: radial-gradient(circle var(--fr, 300px) at var(--mx, 50%) var(--my, 50%), #000 0%, rgba(0, 0, 0, 0.55) 50%, transparent 100%);
	mask: radial-gradient(circle var(--fr, 300px) at var(--mx, 50%) var(--my, 50%), #000 0%, rgba(0, 0, 0, 0.55) 50%, transparent 100%);
}
.ss-focus.is-focus .ss-focus-sharp { opacity: 1; }
/* Voile crème uniforme : masque les défauts de la photo, garde la salle devinée (opacité réglable via --ss-veil) */
.ss-focus-veil, .ss-focus-veil--left { position: absolute; inset: 0; background: rgba(237, 230, 216, var(--ss-veil, 0.8)); }
@media (prefers-reduced-motion: reduce) { .ss-focus-l { transform: scale(1.04); } .ss-focus-sharp { display: none; } }

/* Hero en parallaxe : on garde le dégradé Divi DESSOUS et l'image fondue dessus (même rendu que sans parallaxe). Dégradé et mode de fusion restent réglables dans Divi. */
.ss-hero .et_parallax_bg_wrap { isolation: isolate; }
.ss-hero .et_parallax_gradient { z-index: 0; mix-blend-mode: normal !important; }
.ss-hero .et_parallax_bg { z-index: 1; mix-blend-mode: soft-light; }

/* Titre lu par Google et les lecteurs d'écran, invisible à l'écran (il reprend le texte du logo) */
.ss-sr-only, .et_pb_module.ss-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; }

/* Page 404 (Theme Builder Divi > modèle « Page 404 ») */
.ss-404 > .et_pb_row { width: 90%; }
.ss-404-links p { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.ss-404-links a { color: var(--ss-choco) !important; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.ss-404-links a:hover { text-decoration-thickness: 2px; }
@media (min-width: 981px) { .ss-404 > .et_pb_row { display: flex; align-items: center; } }

/* Hero de la Home : texte aligné sur le S de « Sucré » du logo (le S commence à 12,36 % de la largeur du logo). Classe ss-align-logo sur le module. */
.ss-align-logo { margin-left: calc(min(640px, 100%) * 0.1236) !important; }
@media (min-width: 981px) { .ss-align-logo { margin-right: calc(min(640px, 100%) * -0.1236) !important; } } /* garde la même largeur de texte qu'avant */
@media (min-width: 1800px) { .ss-align-logo { margin-left: calc(min(840px, 100%) * 0.1236) !important; margin-right: calc(min(840px, 100%) * -0.1236) !important; } }
@media (max-width: 980px) { .ss-align-logo { margin-left: calc(80% * 0.1236) !important; } }
@media (max-width: 767px) { .ss-align-logo { margin-left: calc(92% * 0.1236) !important; } }
/* Boutons du Hero de la Home alignés sur le S du logo (classe ss-align-logo-btn sur le 1er bouton ; le 2e suit sur la même ligne, ou en dessous sur mobile) */
.et_pb_button_module_wrapper:has(.ss-align-logo-btn) { margin-left: calc(min(640px, 100%) * 0.1236) !important; }
@media (min-width: 1800px) { .et_pb_button_module_wrapper:has(.ss-align-logo-btn) { margin-left: calc(min(840px, 100%) * 0.1236) !important; } }
@media (max-width: 980px) { .et_pb_button_module_wrapper:has(.ss-align-logo-btn) { margin-left: calc(80% * 0.1236) !important; } }
@media (max-width: 767px) { .et_pb_button_module_wrapper:has(.ss-align-logo-btn), .et_pb_button_module_wrapper:has(.ss-align-logo-btn) + .et_pb_button_module_wrapper { margin-left: calc(92% * 0.1236) !important; } }

/* Rangée dont les colonnes s'inversent sur mobile/tablette (classe ss-reverse-mobile sur la rangée) : le contenu passe avant l'image */
@media (max-width: 980px) { .ss-reverse-mobile.et_pb_row { display: flex; flex-direction: column-reverse; } .ss-reverse-mobile.et_pb_row > .et_pb_column { margin-bottom: 30px !important; } .ss-reverse-mobile.et_pb_row > .et_pb_column:first-child { margin-bottom: 0 !important; } }

/* En-tête : bouton maison (retour à l'accueil), masqué sur la page d'accueil */
.ss-hd .ss-hd-home { width: 46px; padding: 0; justify-content: center; background: var(--ss-cream); color: var(--ss-choco) !important; }
.ss-hd .ss-hd-home svg { width: 20px; height: 20px; }
html.ss-menu-open .ss-hd .ss-hd-home { opacity: 0; pointer-events: none; }