:root {
  --nuit: #1c130d;
  --brun: #33231a;
  --creme: #f6eee0;
  --papier: #fbf6ec;
  --ble: #d9a441;
  --ble-clair: #f0cf8a;
  --texte: #3a2c22;
  --doux: #75645a;
  --ligne: #e4d8c5;
  --titre: 'Fraunces', Georgia, serif;
  --corps: 'DM Sans', system-ui, sans-serif;
  --courbe: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--papier); color: var(--texte); font: 400 18px/1.65 var(--corps); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }
h1, h2, h3, p, figure, blockquote, address, ul { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; }
h1, h2, h3, blockquote { font-family: var(--titre); font-weight: 400; line-height: 1.08; letter-spacing: -0.01em; }
h2 { font-size: clamp(36px, 5vw, 64px); color: var(--nuit); }
h3 { font-size: 26px; color: var(--nuit); }
em { font-style: italic; }
section[id] { scroll-margin-top: 72px; }
.sur { font-size: 13px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #9a6b1c; margin-bottom: 18px; }

.bouton { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 30px; border-radius: 999px; background: var(--ble); color: var(--nuit); font-weight: 700; text-decoration: none; white-space: nowrap; transition: transform 0.35s var(--courbe), background 0.3s; }
.bouton:hover { transform: translateY(-3px); background: var(--ble-clair); }
.bouton-petit { min-height: 44px; padding: 0 20px; font-size: 15px; }
.lien { display: inline-block; margin-top: 26px; font-weight: 700; color: var(--nuit); text-decoration: none; border-bottom: 2px solid var(--ble); padding-bottom: 3px; transition: letter-spacing 0.35s var(--courbe); }
.lien:hover { letter-spacing: 0.03em; }

.nav { position: fixed; z-index: 20; inset: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px clamp(20px, 4vw, 56px); color: #fff; transition: background 0.4s, padding 0.4s, color 0.4s, box-shadow 0.4s; }
.nav.colle { background: rgb(251 246 236 / 0.94); backdrop-filter: blur(12px); color: var(--nuit); padding-block: 10px; box-shadow: 0 1px 0 var(--ligne); }
.nav nav { display: flex; gap: 30px; font-size: 16px; }
.nav nav a { text-decoration: none; opacity: 0.9; }
.nav nav a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 5px; }
.marque { font-family: var(--titre); font-size: 22px; font-style: italic; text-decoration: none; white-space: nowrap; }

.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; background: var(--nuit); color: #fff; }
.hero-image { position: absolute; inset: 0; }
.hero-image img { transform: scale(1.12); animation: lent 16s ease-out forwards; }
@keyframes lent { to { transform: scale(1); } }
.hero-voile { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(28 19 13 / 0.45) 0%, rgb(28 19 13 / 0.1) 40%, rgb(28 19 13 / 0.82) 100%); }
.hero-texte { position: relative; padding: 0 clamp(20px, 6vw, 88px) clamp(64px, 9vh, 104px); max-width: 1100px; }
.hero .sur { color: var(--ble-clair); }
h1 { font-size: clamp(50px, 9vw, 124px); font-weight: 300; }
h1 em { color: var(--ble-clair); }
.ligne { display: block; overflow: hidden; padding-bottom: 0.08em; }
.ligne > span { display: block; transform: translateY(110%); animation: monte 1.1s var(--courbe) 0.25s forwards; }
.ligne + .ligne > span { animation-delay: 0.42s; }
@keyframes monte { to { transform: none; } }
.hero-sous { font-size: clamp(18px, 1.8vw, 22px); max-width: 560px; margin-top: 22px; color: #f1e7da; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 30px; }
[data-entree] { opacity: 0; animation: arrive 1s var(--courbe) 0.8s forwards; }
@keyframes arrive { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.etat { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; }
.etat i { width: 10px; height: 10px; border-radius: 50%; background: var(--ble); }
.etat.ouvert i { background: #6fd39a; animation: pouls 2s infinite; }
@keyframes pouls { 0% { box-shadow: 0 0 0 0 rgb(111 211 154 / 0.6); } 100% { box-shadow: 0 0 0 12px rgb(111 211 154 / 0); } }
.descendre { position: absolute; right: clamp(20px, 5vw, 64px); bottom: 40px; width: 30px; height: 50px; border: 2px solid rgb(255 255 255 / 0.65); border-radius: 20px; }
.descendre span { position: absolute; left: 50%; top: 9px; width: 4px; height: 10px; margin-left: -2px; border-radius: 3px; background: #fff; animation: glisse 1.8s infinite; }
@keyframes glisse { 0% { transform: none; opacity: 1; } 80%, 100% { transform: translateY(18px); opacity: 0; } }

.defile { overflow: hidden; background: var(--nuit); color: var(--ble-clair); padding: 20px 0; }
.defile > div { display: flex; align-items: center; gap: 34px; width: max-content; font: italic 300 clamp(24px, 3vw, 36px) var(--titre); white-space: nowrap; animation: defile 38s linear infinite; }
.defile i { font-style: normal; font-size: 18px; color: var(--ble); }
@keyframes defile { to { transform: translateX(-50%); } }

.maison { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(40px, 7vw, 110px); align-items: center; padding: clamp(84px, 12vw, 170px) clamp(20px, 6vw, 88px); }
.maison-texte p:not(.sur) { margin-top: 24px; max-width: 520px; color: var(--doux); font-size: 19px; }
.maison-images { position: relative; min-height: clamp(460px, 56vw, 720px); }
.cadre { position: absolute; overflow: hidden; border-radius: 6px; }
.cadre img { height: 118%; margin-top: -9%; }
.cadre-grand { inset: 0 16% 12% 0; }
.cadre-petit { right: 0; bottom: 0; width: 44%; aspect-ratio: 4 / 5; border: 10px solid var(--papier); }

.journee { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--nuit); color: #efe4d4; }
.journee-images { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.journee-images img { position: absolute; inset: 0; opacity: 0; transform: scale(1.08); transition: opacity 0.9s, transform 1.6s var(--courbe); }
.journee-images img.actif { opacity: 1; transform: none; }
.journee-etapes { padding: clamp(70px, 12vh, 130px) clamp(24px, 6vw, 90px); }
.journee .sur { color: var(--ble-clair); }
.journee article { min-height: 72svh; display: flex; flex-direction: column; justify-content: center; opacity: 0.32; transition: opacity 0.6s; }
.journee article.actif { opacity: 1; }
.journee time { font: italic 300 clamp(44px, 6vw, 76px) var(--titre); color: var(--ble); }
.journee h3 { color: #fff; font-size: clamp(30px, 3.4vw, 42px); margin: 8px 0 14px; }
.journee article p { max-width: 460px; }

.pains { padding: clamp(84px, 12vw, 170px) clamp(20px, 6vw, 88px); background: var(--creme); }
.entete { max-width: 760px; margin-bottom: clamp(40px, 6vw, 72px); }
.grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 28px; }
.carte { background: var(--papier); border-radius: 8px; overflow: hidden; transition: transform 0.5s var(--courbe), box-shadow 0.5s; }
.carte:hover { transform: translateY(-8px); box-shadow: 0 26px 50px rgb(51 35 26 / 0.16); }
.carte-image { aspect-ratio: 4 / 3.4; overflow: hidden; }
.carte-image img { transition: transform 1.1s var(--courbe); }
.carte:hover .carte-image img { transform: scale(1.07); }
.carte-texte { padding: 24px 26px 28px; }
.carte-texte p { margin: 8px 0 14px; color: var(--doux); font-size: 17px; }
.carte-texte span { font-weight: 700; color: #8a5c12; }

.bandeau { position: relative; min-height: 86svh; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--nuit); text-align: center; padding: 60px 24px; }
.bandeau-image { position: absolute; inset: 0; }
.bandeau-image img { height: 124%; margin-top: -12%; }
.bandeau::after { content: ''; position: absolute; inset: 0; background: rgb(28 19 13 / 0.55); }
.bandeau blockquote { position: relative; z-index: 1; color: #fff; font-weight: 300; font-size: clamp(40px, 7vw, 92px); max-width: 1000px; }
.bandeau em { color: var(--ble-clair); }

.vitrine { padding: clamp(84px, 12vw, 170px) 0; overflow: hidden; }
.vitrine .entete { padding-inline: clamp(20px, 6vw, 88px); }
.vitrine-rail { display: flex; gap: 24px; width: max-content; padding-inline: clamp(20px, 6vw, 88px); will-change: transform; }
.vitrine-rail figure { width: clamp(270px, 32vw, 460px); }
.vitrine-rail img { aspect-ratio: 4 / 5; border-radius: 6px; }
.vitrine-rail figcaption { margin-top: 12px; font: italic 400 22px var(--titre); color: var(--nuit); }

.venir { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 110px); padding: clamp(84px, 12vw, 150px) clamp(20px, 6vw, 88px); background: var(--brun); color: #f1e7da; }
.venir h2 { color: #fff; }
.venir .sur { color: var(--ble-clair); }
.venir address { font-style: normal; font-size: 21px; margin: 26px 0; }
.horaires h3 { color: #fff; margin-bottom: 14px; }
.horaires li { display: flex; justify-content: space-between; gap: 18px; padding: 12px 0; border-bottom: 1px solid rgb(255 255 255 / 0.14); }
.horaires li.aujourdhui { color: var(--ble-clair); font-weight: 700; }

.pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 30px clamp(20px, 6vw, 88px); background: var(--nuit); color: #cdbfae; font-size: 15px; }
.pied .marque { color: #fff; }

[data-apparait] { opacity: 0; transform: translateY(34px); transition: opacity 1s var(--courbe), transform 1s var(--courbe); }
[data-apparait].vu { opacity: 1; transform: none; }
.grille [data-apparait]:nth-child(2) { transition-delay: 0.12s; }
.grille [data-apparait]:nth-child(3) { transition-delay: 0.24s; }

@media (max-width: 900px) {
  body { font-size: 17px; }
  .nav nav { display: none; }
  .maison, .venir { grid-template-columns: 1fr; }
  .maison-images { min-height: 110vw; }
  .journee { grid-template-columns: 1fr; }
  .journee-images { top: 0; height: 36svh; z-index: 1; }
  .journee article { min-height: 34svh; padding-block: 20px; }
  .descendre { display: none; }
}

@media (max-width: 520px) {
  .marque { font-size: 19px; }
  .bouton-petit { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  [data-apparait], [data-entree], .ligne > span { opacity: 1; transform: none; }
  .defile > div { animation: none; }
}