/* Surcouche Orée au-dessus de Bootstrap 5 */

@font-face { font-family: "Earth Tone"; src: url("../assets/fonts/EarthTone-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Earth Tone"; src: url("../assets/fonts/EarthTone-Bold.otf") format("opentype"); font-weight: 700; font-display: swap; }

:root {
	--terracotta: #944824;
	--ocre: #ca8536;
	--forest: #34411e;
	--forest-deep: #232d14;
	--matcha: #b7ad4a;
	--nude: #f1e3c8;
	--ink: #1a1a1a;
	--font-title: "Earth Tone", "Poppins", sans-serif;
	--font-text: "Poppins", system-ui, sans-serif;
	--header-h: 72px;

	--bs-body-font-family: var(--font-text);
	--bs-body-color: var(--ink);
	--bs-body-bg: var(--nude);
	--bs-body-font-size: .875rem;
	--bs-body-font-weight: 300;
	--bs-body-line-height: 1.7;
	--bs-border-radius: 0;
}

html { scroll-padding-top: 0; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-title); font-weight: 400; }
.lead { font-size: 1.05rem; font-weight: 300; }
h2 { font-size: clamp(2rem, 4.4vw, 3.2rem); }
h3 { font-size: 1.4rem; }
h4 { font-weight: 400; font-size: 1.1rem; margin: 0; }

/* Couleurs de la charte (complètent les utilitaires Bootstrap) */
.text-terracotta { color: var(--terracotta); }
.text-matcha { color: var(--matcha); }
.text-nude { color: var(--nude); }
.bg-forest-deep { background: var(--forest-deep); }

.eyebrow { font-size: .78rem; letter-spacing: .22em; }

.link { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.link:hover { color: var(--terracotta); }
.link--light:hover { color: var(--matcha); }

/* Boutons */
.btn-oree {
	--bs-btn-padding-x: 2em;
	--bs-btn-padding-y: .85em;
	--bs-btn-font-size: .8rem;
	--bs-btn-color: var(--nude);
	--bs-btn-border-color: var(--nude);
	--bs-btn-border-radius: 0;
	--bs-btn-hover-color: var(--forest);
	--bs-btn-hover-bg: var(--nude);
	--bs-btn-hover-border-color: var(--nude);
	--bs-btn-active-color: var(--forest);
	--bs-btn-active-bg: var(--nude);
	--bs-btn-active-border-color: var(--nude);
	text-transform: uppercase;
	letter-spacing: .16em;
}
.btn-oree.btn-sm { --bs-btn-padding-x: 1.4em; --bs-btn-padding-y: .6em; --bs-btn-font-size: .72rem; }
.btn-oree--dark { --bs-btn-color: var(--terracotta); --bs-btn-border-color: var(--terracotta); --bs-btn-hover-color: var(--nude); --bs-btn-hover-bg: var(--terracotta); --bs-btn-hover-border-color: var(--terracotta); --bs-btn-active-color: var(--nude); --bs-btn-active-bg: var(--terracotta); --bs-btn-active-border-color: var(--terracotta); }
.modal-oree .modal-content { background: var(--nude); color: var(--ink); padding: .5rem 1rem 1rem; }
.modal-oree .modal-title { font-size: clamp(1.5rem, 3vw, 2rem); }
.btn-oree--big { --bs-btn-padding-x: 2.6em; --bs-btn-padding-y: 1em; --bs-btn-bg: var(--nude); --bs-btn-color: var(--forest); --bs-btn-hover-bg: transparent; --bs-btn-hover-color: var(--nude); }

/* Header */
.header { height: var(--header-h); padding: 0; color: var(--nude); transition: background .3s; }
.header.is-solid { background: rgba(52, 65, 30, .88); backdrop-filter: blur(12px); }
.header__logo img { height: 34px; width: auto; }
.header__nav { gap: 0 2rem; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; }
.header__nav .nav-link { color: var(--nude); padding: .3em 0; border-bottom: 1px solid transparent; }
.header__nav .nav-link:hover, .header__nav .nav-link.is-current { color: var(--nude); border-color: var(--nude); }

/* Hero */
.hero { min-height: 560px; background: var(--forest-deep); color: var(--nude); }
.hero__slides, .slide { position: absolute; inset: 0; }
.slide { opacity: 0; transition: opacity 1.2s ease; background: var(--forest); overflow: hidden; }
.slide.is-active { opacity: 1; }
.slide video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slide__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: var(--kb-origin, center); }
.slide.has-video .slide__photo { display: none; }
/* Effet Ken Burns : zoom lent + léger glissement, une direction par slide */
.slide.is-active .slide__photo { animation: kenburns calc(var(--slide-duration, 6s) + 1.5s) ease-out forwards; }
.slide--1 { --kb-from: scale(1.18) translate(-2%, 1%); --kb-to: scale(1.05) translate(1%, -1%); --kb-origin: 40% 40%; }
.slide--2 { --kb-from: scale(1.05) translate(2%, 0); --kb-to: scale(1.2) translate(-2%, 1%); --kb-origin: 60% 50%; }
.slide--3 { --kb-from: scale(1.2) translate(1%, 2%); --kb-to: scale(1.06) translate(-1%, -1%); --kb-origin: 50% 50%; }
.slide--4 { --kb-from: scale(1.06) translate(-2%, -1%); --kb-to: scale(1.2) translate(2%, 1%); --kb-origin: 50% 50%; }
@keyframes kenburns { from { transform: var(--kb-from); } to { transform: var(--kb-to); } }
/* Voile pour garder le texte lisible : dégradé vertical + zone sombre centrée derrière le texte */
.hero__shade { position: absolute; inset: 0; background:
	radial-gradient(ellipse 60% 55% at 50% 50%, rgba(20, 26, 10, .55), rgba(20, 26, 10, 0) 100%),
	linear-gradient(to bottom, rgba(20, 26, 10, .6), rgba(20, 26, 10, .35) 40%, rgba(20, 26, 10, .7)); }
.hero__logo { width: min(420px, 70vw); height: auto; }
.hero__tagline { font-size: clamp(1rem, 1.7vw, 1.3rem); }
.hero__dots { position: absolute; z-index: 3; bottom: 2rem; left: 50%; transform: translateX(-50%); display: flex; gap: .7rem; }
.hero__dots button { width: 38px; height: 4px; border-radius: 4px; padding: 0; border: 0; background: rgba(241, 227, 200, .35); cursor: pointer; position: relative; overflow: hidden; }
.hero__dots button.is-active::after { content: ""; position: absolute; inset: 0; background: var(--nude); transform-origin: left; animation: fill var(--slide-duration, 6s) linear forwards; }
@keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hero__scroll { position: absolute; z-index: 3; bottom: 1.2rem; right: 2rem; width: 28px; height: 44px; display: grid; place-items: center; }
.hero__scroll span { width: 10px; height: 10px; border-right: 1px solid var(--nude); border-bottom: 1px solid var(--nude); transform: rotate(45deg); animation: bob 2s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(6px) rotate(45deg); } }

/* Sections */
.section { padding: clamp(4rem, 9vw, 8rem) 0; }
.section--nude { background: var(--nude); }
.section--forest { background: var(--forest); color: var(--nude); }
.section--terra { background: var(--terracotta); color: var(--nude); }
.encart__logo { width: min(240px, 60vw); height: auto; }

/* Une section = un écran. Le scroll "accroche" chaque section (scroll-snap) : elle s'affiche en entier.
   Si le contenu dépasse la hauteur d'écran (petits écrans), la section grandit et se scrolle normalement. */
html { scroll-snap-type: y mandatory; }
.hero, .panel, #reserver { scroll-snap-align: start; }
.site-footer { scroll-snap-align: end; }

/* Lien Instagram ancré en bas à gauche sur toutes les pages */
.instagram-fixed { position: fixed; z-index: 1030; left: 1.25rem; bottom: 1.25rem; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: var(--forest-deep); color: var(--nude); border: 1px solid rgba(241, 227, 200, .4); transition: background .2s, color .2s; }
.instagram-fixed:hover { background: var(--nude); color: var(--forest-deep); }
.panel { background: var(--panel-bg); }
.panel--nude { --panel-bg: var(--nude); }
.panel--forest { --panel-bg: var(--forest); color: var(--nude); }
.panel--terra { --panel-bg: var(--terracotta); color: var(--nude); }
.panel__stage { min-height: 100vh; display: grid; grid-template-columns: 5fr 7fr; }
.panel--right .panel__stage { grid-template-columns: 7fr 5fr; }
.panel--right .panel__photo { order: 2; }
.panel__photo { position: relative; margin: 0; overflow: hidden; }
.panel__frame { position: absolute; inset: 0; }
/* Photo animée comme le carrousel de l'accueil (zoom lent + glissement), en boucle */
.panel__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: kenburns 16s ease-in-out infinite alternate; }
.panel--left { --kb-from: scale(1.16) translate(-2%, 1%); --kb-to: scale(1.04) translate(1%, -1%); }
.panel--right { --kb-from: scale(1.04) translate(2%, 0); --kb-to: scale(1.16) translate(-2%, 1%); }
.panel__text { display: flex; align-items: center; padding: calc(var(--header-h) + 1rem) clamp(2rem, 4vw, 4rem) 1.5rem; }
.panel__inner { width: 100%; max-width: 780px; }
/* Cadre uni en attendant les photos */
.panel__frame--ocre { background: var(--ocre); }
.panel__frame--forest { background: var(--forest-deep); }
/* Cadre à deux photos : fondu de l'une à l'autre en boucle */
.panel__frame--swap img + img { opacity: 0; animation: kenburns 16s ease-in-out infinite alternate, swap 12s ease-in-out infinite; }
@keyframes swap { 0%, 40% { opacity: 0; } 50%, 90% { opacity: 1; } 100% { opacity: 0; } }
/* Picto du contact : teinté en nude (masque) */
.sprig--nude { width: 56px; height: 56px; background-color: var(--nude); -webkit-mask: url("../assets/img/ill-sprig.png") center / contain no-repeat; mask: url("../assets/img/ill-sprig.png") center / contain no-repeat; }

/* Carte */
.panel h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); }
/* Jour (aligné à droite) : Midi/Soir (aligné à gauche), les « : » sont alignés au centre */
.horaires li span:first-child { font-weight: 500; }
.horaires li span:last-child { text-align: left; }
.horaires li { display: grid; grid-template-columns: 1fr auto 1fr; column-gap: .6rem; line-height: 1.5; }
.formule { height: 100%; padding: 1.25rem 1.5rem; background: rgba(255, 255, 255, .4); }
.formules h4 { font-size: 1.25rem; }
.formules p { margin: .2rem 0 0; font-size: .78rem; line-height: 1.5; }
.formules .note { font-size: .7rem; letter-spacing: .15em; margin: .1rem 0 .4rem; }
.dishes li { margin-bottom: 1.5rem; }
.dishes h4 { font-size: 1rem; }
.dishes p { margin: .1rem 0 0; font-size: .75rem; line-height: 1.45; opacity: .8; }

@media (max-width: 767.98px) {
	.header .navbar-collapse { background: var(--forest); padding: 1rem 1.5rem 1.5rem; margin: 0 -1rem; }

	/* Mobile : pas d'accroche entre sections, photo au-dessus du texte */
	html { scroll-snap-type: none; }
	.panel__stage { display: block; min-height: 0; }
	.panel__photo { height: 40vh; }
	.panel__text { padding: 1.5rem 1.5rem 4rem; }
}

@media (prefers-reduced-motion: reduce) {
	.slide { transition: none; }
	.slide.is-active .slide__photo, .panel__frame img { animation: none; }
	.hero__scroll span { animation: none; }
}