/* ============================================================
   PASTA CORNER — MENU FLIPBOOK
   Feuille de style — construite from scratch
   ============================================================ */

:root{
  --ink-black: #0b0f0c;
  --deep-green: #0e1c14;
  --deep-green-2: #142a1d;
  --gold: #c9a55c;
  --gold-soft: rgba(201,165,92,0.55);
  --warm-glow: rgba(255, 176, 92, 0.16);
  --paper-shadow: rgba(0,0,0,0.55);
  --ui-fg: rgba(240, 236, 224, 0.92);
  --ui-fg-dim: rgba(240, 236, 224, 0.5);
  --ui-line: rgba(240, 236, 224, 0.16);
  --page-radius: 3px;
  --font-display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --font-ui: 'Marcellus', 'Cormorant Garamond', Georgia, serif;
}

@font-face{
  font-family:'Cormorant Garamond';
  src: local('Cormorant Garamond');
}

*{ box-sizing: border-box; }
html,body{
  margin:0; padding:0; width:100%; height:100%;
  overflow:hidden;
  background:#050806;
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------
   BACKGROUND — ambiance nocturne, restaurant italien premium
   --------------------------------------------------------------- */
.bg-layer{
  position:fixed; inset:0; z-index:0; overflow:hidden;
}
.bg-photo{
  position:absolute; inset:-5%;
  width:110%; height:110%;
  background-image: url('assets/facade-night.jpg');
  background-size: cover;
  background-position: center 30%;
  filter: saturate(0.9) brightness(0.55);
  opacity: 0.55;
  transform: scale(1.05);
}
.bg-tint{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 60% 45% at 50% 8%, var(--warm-glow), transparent 60%),
    radial-gradient(ellipse 90% 70% at 50% 100%, rgba(0,0,0,0.75), transparent 60%),
    linear-gradient(180deg, rgba(6,12,9,0.55) 0%, rgba(8,16,11,0.72) 40%, rgba(4,8,6,0.92) 100%);
}
.bg-vignette{
  position:absolute; inset:0;
  box-shadow: inset 0 0 22vw 4vw rgba(0,0,0,0.65);
  background: radial-gradient(ellipse 75% 75% at 50% 45%, transparent 45%, rgba(2,5,3,0.55) 100%);
}
.bg-grain{
  position:absolute; inset:0;
  opacity:0.035; mix-blend-mode:overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---------------------------------------------------------------
   LAYOUT GLOBAL
   --------------------------------------------------------------- */
.app{
  position:relative; z-index:1;
  width:100%; height:100%;
  display:flex; flex-direction:column;
  align-items:center;
}

/* ---- header ---- */
.topbar{
  width:100%;
  display:flex; align-items:center; justify-content:center;
  flex-direction:column;
  padding: 14px 20px 6px;
  flex-shrink:0;
  text-align:center;
}
.topbar .brandrow{
  display:flex; align-items:center; gap:14px;
}
.topbar .logo-img{
  height:38px; width:auto;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
  opacity:0.96;
}
.topbar .brand-text{
  display:flex; flex-direction:column; align-items:flex-start;
  line-height:1;
}
.topbar .brand-title{
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: 0.16em;
  color: var(--ui-fg);
  font-weight: 600;
}
.topbar .brand-sub{
  font-size: 9.5px;
  letter-spacing: 0.22em;
  color: var(--ui-fg-dim);
  margin-top:3px;
}
.topbar .powered{
  margin-top: 7px;
  font-size: 9px;
  letter-spacing: 0.14em;
  color: rgba(240,236,224,0.28);
  font-style: italic;
}

/* ---- stage (zone du livre) ---- */
.stage{
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  display:flex; align-items:center; justify-content:center;
  position:relative;
  padding: 4px 10px;
}

.perspective-wrap{
  perspective: 3200px;
  perspective-origin: 50% 45%;
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%;
  position:relative;
}

/* the book container: transitions in width between single/double page */
.book{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  height: var(--page-h);
  width: var(--book-w);
  transition: width 620ms cubic-bezier(.65,.05,.36,1);
  transform-style: preserve-3d;
}

.book-shadow{
  position:absolute;
  left:50%; bottom:-4%;
  transform: translateX(-50%);
  width: 86%; height: 34px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0) 72%);
  filter: blur(2px);
  z-index:0;
  pointer-events:none;
}

/* page slot (statique, une seule page à la fois) */
.slot{
  position:relative;
  width: var(--page-w);
  height: var(--page-h);
  flex: 0 0 auto;
  transition: opacity 220ms ease;
}
.slot.empty{ opacity:0; pointer-events:none; }

.slot img{
  display:block;
  width:100%; height:100%;
  object-fit: cover;
  border-radius: var(--page-radius);
  background:#efe9da;
  user-select:none; -webkit-user-drag:none;
}

.slot.single img{
  border-radius: var(--page-radius);
  box-shadow:
    0 18px 40px -8px rgba(0,0,0,0.65),
    0 4px 16px rgba(0,0,0,0.4);
}

/* satin sheen overlay — visible en permanence, dérive lente et discrète */
.slot .sheen{
  position:absolute; inset:0;
  border-radius: inherit;
  background: linear-gradient(120deg,
    rgba(255,255,255,0) 15%,
    rgba(255,255,255,0.22) 32%,
    rgba(255,255,255,0.34) 40%,
    rgba(255,255,255,0.10) 50%,
    rgba(255,255,255,0) 62%);
  background-size: 260% 260%;
  background-position: 80% 20%;
  pointer-events:none;
  mix-blend-mode: soft-light;
  animation: satinDrift 10s ease-in-out infinite alternate;
}

@keyframes satinDrift{
  0%   { background-position: 92% 8%; }
  50%  { background-position: 42% 58%; }
  100% { background-position: 78% 30%; }
}

/* ---------------------------------------------------------------
   FLIPPING LEAF
   --------------------------------------------------------------- */
.flip-layer{
  position:absolute;
  top:0; left:0; width:100%; height:100%;
  pointer-events:none;
  z-index:20;
}
.leaf{
  position:absolute;
  top:0;
  width: var(--page-w);
  height: var(--page-h);
  transform-style: preserve-3d;
  will-change: transform;
}
.leaf .face{
  position:absolute; inset:0;
  backface-visibility:hidden;
  overflow:hidden;
  border-radius: var(--page-radius);
}
.leaf .face img{
  width:100%; height:100%; object-fit:cover; display:block;
  user-select:none; -webkit-user-drag:none;
}
.leaf .face.back{
  transform: rotateY(180deg);
}
.leaf .shade{
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(0,0,0,0.35), rgba(0,0,0,0) 40%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.35));
  opacity:0;
  pointer-events:none;
  border-radius: inherit;
}
.leaf .sheen-moving{
  position:absolute; inset:0;
  background: linear-gradient(115deg,
    rgba(255,255,255,0) 25%,
    rgba(255,255,255,0.20) 42%,
    rgba(255,255,255,0.55) 50%,
    rgba(255,255,255,0.20) 58%,
    rgba(255,255,255,0) 75%);
  background-size: 300% 300%;
  mix-blend-mode: soft-light;
  pointer-events:none;
  border-radius: inherit;
}
.leaf.dropshadow{
  filter: drop-shadow(0 18px 26px rgba(0,0,0,0.55));
}

/* ---------------------------------------------------------------
   CONTROLS
   --------------------------------------------------------------- */
.nav-btn{
  position:absolute;
  top:50%; transform: translateY(-50%);
  width:44px; height:44px;
  border-radius:50%;
  border:1px solid var(--ui-line);
  background: rgba(10,16,12,0.35);
  backdrop-filter: blur(6px);
  color: var(--ui-fg);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition: background 180ms ease, transform 180ms ease, opacity 180ms ease;
  z-index: 30;
  opacity: 0.55;
}
.nav-btn:hover{ background: rgba(201,165,92,0.18); opacity:1; }
.nav-btn:active{ transform: translateY(-50%) scale(0.92); }
.nav-btn.prev{ left: 2%; }
.nav-btn.next{ right: 2%; }
.nav-btn svg{ width:16px; height:16px; }
.nav-btn[disabled]{ opacity:0.15; pointer-events:none; }

.click-zone{
  position:absolute; top:0; bottom:0; width:16%;
  cursor:pointer; z-index:15;
}
.click-zone.z-left{ left:0; }
.click-zone.z-right{ right:0; }

/* ---- footer ---- */
.bottombar{
  width:100%;
  flex-shrink:0;
  display:flex; flex-direction:column; align-items:center;
  gap:6px;
  padding: 8px 16px 16px;
}
.counter{
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing:0.12em;
  color: var(--ui-fg);
}
.counter b{ color: var(--gold); font-weight:600; }
.hint{
  font-size: 9.5px;
  letter-spacing:0.16em;
  color: var(--ui-fg-dim);
  display:flex; align-items:center; gap:8px;
}
.hint .dot{ opacity:0.4; }

.toolbar{
  position:absolute;
  bottom: 10px; right: 14px;
  display:flex; gap:8px;
  z-index: 40;
}
.tool-btn{
  width:34px; height:34px; border-radius:8px;
  border:1px solid var(--ui-line);
  background: rgba(10,16,12,0.35);
  backdrop-filter: blur(6px);
  color: var(--ui-fg);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  opacity:0.6;
  transition: opacity 160ms ease, background 160ms ease;
}
.tool-btn:hover{ opacity:1; background: rgba(201,165,92,0.18); }
.tool-btn svg{ width:15px; height:15px; }

/* ---------------------------------------------------------------
   THUMBNAIL GRID
   --------------------------------------------------------------- */
.grid-overlay{
  position:fixed; inset:0; z-index:100;
  background: rgba(4,8,6,0.88);
  backdrop-filter: blur(10px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition: opacity 260ms ease;
}
.grid-overlay.open{ opacity:1; pointer-events:auto; }
.grid-inner{
  width:min(920px, 92vw);
  max-height: 86vh;
  overflow-y:auto;
  padding: 30px 10px;
}
.grid-title{
  text-align:center; color:var(--ui-fg); font-family:var(--font-display);
  font-size:20px; letter-spacing:0.14em; margin-bottom:22px;
}
.grid-list{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap:16px;
  padding: 0 16px;
}
.grid-item{
  cursor:pointer;
  border-radius:4px;
  overflow:hidden;
  border:1px solid var(--ui-line);
  transition: transform 160ms ease, border-color 160ms ease;
  position:relative;
}
.grid-item:hover{ transform: translateY(-4px); border-color: var(--gold-soft); }
.grid-item img{ width:100%; display:block; aspect-ratio:0.7071; object-fit:cover; }
.grid-item .lbl{
  position:absolute; bottom:0; left:0; right:0;
  font-size:9px; letter-spacing:0.1em; text-align:center;
  padding:4px 0; color:#fff;
  background: linear-gradient(to top, rgba(0,0,0,0.75), transparent);
}
.grid-close{
  position:absolute; top:18px; right:22px;
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--ui-line); background:rgba(255,255,255,0.04);
  color:var(--ui-fg); cursor:pointer; display:flex; align-items:center; justify-content:center;
}

/* ---------------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------------- */
@media (max-width: 680px){
  .topbar{ padding:10px 14px 4px; }
  .topbar .logo-img{ height:30px; }
  .topbar .brand-title{ font-size:14px; letter-spacing:0.12em; }
  .topbar .brand-sub{ font-size:8px; }
  .nav-btn{ width:36px; height:36px; }
  .nav-btn.prev{ left:1%; }
  .nav-btn.next{ right:1%; }
  .toolbar{ bottom:8px; right:8px; }
  .tool-btn{ width:30px; height:30px; }
  .counter{ font-size:12px; }
  .hint{ font-size:8.5px; }
}

.no-select{ user-select:none; -webkit-user-select:none; }

::-webkit-scrollbar{ width:8px; }
::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.15); border-radius:4px; }

/* ============================================================
   ÉCRANS — intro / livre / outro
   ============================================================ */
.screen{
  position:fixed; inset:0;
  z-index:2;
  opacity:0;
  visibility:hidden;
  transition: opacity 560ms ease, visibility 0s linear 560ms;
}
.screen.active{
  opacity:1;
  visibility:visible;
  transition: opacity 560ms ease, visibility 0s linear 0s;
}

/* ---- boutons partagés intro / outro ---- */
.cta-btn{
  appearance:none; -webkit-appearance:none;
  display:inline-flex; align-items:center; gap:10px;
  background: rgba(201,165,92,0.10);
  border: 1px solid var(--gold-soft);
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 0.06em;
  padding: 14px 26px;
  border-radius: 999px;
  cursor:pointer;
  text-decoration:none;
  transition: background 200ms ease, transform 200ms ease, border-color 200ms ease;
}
.cta-btn:hover{
  background: rgba(201,165,92,0.22);
  border-color: var(--gold);
  transform: translateY(-2px);
}
.cta-btn:active{ transform: translateY(0); }
.cta-btn svg{ width:16px; height:16px; }

.text-link{
  appearance:none; background:none; border:none;
  color: var(--ui-fg-dim);
  font-family: var(--font-ui);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  cursor:pointer;
  padding: 6px 10px;
  transition: color 180ms ease;
}
.text-link:hover{ color: var(--ui-fg); }

/* ---- INTRO ---- */
.intro-bg{
  position:absolute; inset:0;
  background-image: url('assets/facade-hero.jpg');
  background-size: cover;
  background-position: center 60%;
}
.intro-tint{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 30%, rgba(0,0,0,0.15), transparent 60%),
    linear-gradient(180deg, rgba(4,8,6,0.55) 0%, rgba(4,8,6,0.35) 35%, rgba(3,6,4,0.55) 68%, rgba(2,5,3,0.88) 100%);
}
.intro-content{
  position:relative; z-index:2;
  height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding: 32px 24px;
  gap: 6px;
}
.intro-logo{
  height:64px; width:auto;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,0.6));
  margin-bottom: 6px;
}
.intro-kicker{
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--gold);
  opacity:0.9;
  margin-bottom: 4px;
}
.intro-title{
  font-family: var(--font-display);
  font-weight:600;
  font-size: clamp(32px, 6vw, 54px);
  line-height: 1.08;
  color: #f6f2e8;
  margin: 6px 0 14px;
  text-shadow: 0 4px 24px rgba(0,0,0,0.5);
}
.intro-sub{
  font-family: var(--font-ui);
  font-size: 14.5px;
  letter-spacing: 0.02em;
  color: var(--ui-fg-dim);
  max-width: 420px;
  margin: 0 0 30px;
  line-height:1.6;
}
.intro-legal{
  position:absolute; left:0; right:0; bottom:16px;
  text-align:center; z-index:2;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  color: rgba(240,236,224,0.32);
  font-style: italic;
}

/* ---- bouton Terminer (visible seulement sur la dernière page) ---- */
.finish-btn{
  appearance:none; -webkit-appearance:none;
  background:none;
  border: 1px solid var(--ui-line);
  color: var(--ui-fg-dim);
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.16em;
  padding: 7px 20px;
  border-radius: 999px;
  cursor:pointer;
  opacity:0; transform: translateY(6px);
  pointer-events:none;
  transition: opacity 320ms ease, transform 320ms ease, background 180ms ease, color 180ms ease, border-color 180ms ease;
}
.finish-btn.show{
  opacity:1; transform:translateY(0);
  pointer-events:auto;
}
.finish-btn:hover{
  background: rgba(201,165,92,0.14);
  border-color: var(--gold-soft);
  color: var(--gold);
}

/* ---- OUTRO ---- */
.outro-bg{
  position:absolute; inset:0;
  background-image: url('assets/chef-hero.jpg');
  background-size: cover;
  background-position: center 30%;
}
.outro-tint{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 25%, rgba(0,0,0,0.1), transparent 60%),
    linear-gradient(180deg, rgba(4,8,6,0.6) 0%, rgba(4,8,6,0.4) 30%, rgba(3,6,4,0.6) 65%, rgba(2,5,3,0.9) 100%);
}
.outro-content{
  position:relative; z-index:2;
  height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding: 32px 24px;
}
.outro-logo{
  height:52px; width:auto;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,0.6));
  margin-bottom: 10px;
}
.outro-title{
  font-family: var(--font-display);
  font-weight:600;
  font-size: clamp(26px, 5vw, 42px);
  line-height: 1.15;
  color: #f6f2e8;
  margin: 6px 0 14px;
  text-shadow: 0 4px 24px rgba(0,0,0,0.5);
}
.outro-content .intro-sub{ max-width: 440px; }
.instagram-btn{ margin-bottom: 18px; }

@media (max-width: 680px){
  .intro-logo{ height:50px; }
  .intro-sub, .outro-content .intro-sub{ font-size:13px; }
  .outro-logo{ height:42px; }
}