/* =========================================================
   CABAÏTAN — feuille de style principale
   Café-cantine végétarien, Lyon 7 (Guillotière)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,500;1,9..144,600&family=Work+Sans:wght@400;500;600;700&display=swap');

:root{
  /* --- Palette (issue du logo Cabaïtan) --- */
  --cream:        #FAF6EC;
  --paper:        #FFFFFF;
  --ink:          #26312E;
  --teal:         #0B4C52;
  --teal-deep:    #06343A;
  --terracotta:   #C6512F;
  --mustard:      #DE9A2A;
  --sage:         #8FAA88;
  --lavender:     #A79ECB;

  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Work Sans', 'Segoe UI', sans-serif;

  --radius-s: 8px;
  --radius-m: 16px;
  --radius-l: 28px;

  --shadow-soft: 0 10px 30px rgba(6,52,58,0.10);
  --shadow-card: 0 6px 18px rgba(38,49,46,0.08);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--cream);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.15;
  margin:0 0 .6em;
  color:var(--teal-deep);
}
p{ margin:0 0 1em; }
.container{ max-width:1120px; margin:0 auto; padding:0 1.5rem; }

/* Focus visibility (accessibilité) */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:3px solid var(--mustard);
  outline-offset:3px;
  border-radius:4px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* Petit grain de pellicule, pour unifier le rendu des photos */
.grain{ position:relative; }
.grain::after{
  content:"";
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
  opacity:.5;
  pointer-events:none;
}

/* =========================================================
   POINTS DE CONFETTIS — motif signature repris du logo
   ========================================================= */
.dot{ display:inline-block; width:.5em; height:.5em; border-radius:50%; }
.dot-terracotta{ background:var(--terracotta); }
.dot-mustard{ background:var(--mustard); }
.dot-sage{ background:var(--sage); }
.dot-lavender{ background:var(--lavender); }
.dot-teal{ background:var(--teal); }

.confetti{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.confetti span{
  position:absolute; border-radius:50%; opacity:.9;
}

/* =========================================================
   HEADER / NAVIGATION
   ========================================================= */
header.site-header{
  background:var(--teal-deep);
  padding:.8rem 1.5rem;
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  box-shadow:0 2px 12px rgba(0,0,0,.15);
}
.logo-container{
  background:var(--paper);
  padding:.35rem 1rem;
  border-radius:999px;
  display:flex; align-items:center;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.logo-container img{ height:32px; width:auto; }

nav.site-nav{ display:flex; align-items:center; gap:.25rem; }
nav.site-nav a{
  color:#fff;
  text-decoration:none;
  padding:.6rem .9rem;
  font-weight:500;
  border-radius:999px;
  transition:background .25s, color .25s;
}
nav.site-nav a:hover, nav.site-nav a.active{
  background:rgba(255,255,255,.12);
  color:var(--mustard);
}
nav.site-nav a.btn-nav{
  background:var(--terracotta);
  color:#fff !important;
  font-weight:600;
  margin-left:.4rem;
}
nav.site-nav a.btn-nav:hover{ background:#a83f22; }

.nav-toggle{
  display:none;
  background:none; border:none; cursor:pointer;
  width:42px; height:42px; padding:8px;
  flex-direction:column; justify-content:center; gap:5px;
}
.nav-toggle span{ display:block; height:2px; width:100%; background:#fff; border-radius:2px; }

@media (max-width:820px){
  .nav-toggle{ display:flex; }
  nav.site-nav{
    position:absolute; top:100%; left:0; right:0;
    background:var(--teal-deep);
    flex-direction:column; align-items:stretch;
    gap:0; padding:.5rem 1rem 1rem;
    max-height:0; overflow:hidden;
    transition:max-height .3s ease;
  }
  nav.site-nav.open{ max-height:320px; }
  nav.site-nav a{ padding:.9rem 1rem; border-radius:10px; text-align:center; }
  nav.site-nav a.btn-nav{ margin:.4rem 0 0; }
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  background:var(--teal-deep);
  color:#fff;
  position:relative;
  overflow:hidden;
  padding:4.5rem 1.5rem 6rem;
  text-align:center;
}
.hero .confetti span:nth-child(1){ width:14px; height:14px; background:var(--terracotta); top:12%; left:8%; }
.hero .confetti span:nth-child(2){ width:20px; height:20px; background:var(--mustard); top:70%; left:14%; }
.hero .confetti span:nth-child(3){ width:10px; height:10px; background:var(--sage); top:20%; left:88%; }
.hero .confetti span:nth-child(4){ width:16px; height:16px; background:var(--lavender); top:78%; left:90%; }
.hero .confetti span:nth-child(5){ width:9px;  height:9px;  background:var(--terracotta); top:85%; left:50%; }
.hero .confetti span:nth-child(6){ width:12px; height:12px; background:var(--sage); top:8%; left:50%; }

.hero-inner{ position:relative; z-index:2; max-width:680px; margin:0 auto; }
.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-body); font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; font-size:.78rem;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25);
  padding:.4rem .9rem; border-radius:999px; margin-bottom:1.4rem;
}
.hero h1{ color:#fff; font-size:clamp(2.2rem,5vw,3.4rem); }
.hero h1 em{ font-style:italic; color:var(--mustard); }
.hero p.lead{ font-size:1.15rem; opacity:.92; max-width:520px; margin:0 auto 2rem; }
.hero-btns{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

.btn-primary, .btn-secondary, .btn-outline{
  display:inline-block; text-decoration:none; font-weight:700; font-family:var(--font-body);
  padding:.85rem 1.8rem; border-radius:999px; border:none; cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn-primary{ background:var(--terracotta); color:#fff; box-shadow:0 8px 20px rgba(198,81,47,.35); }
.btn-primary:hover{ transform:translateY(-2px); background:#a83f22; }
.btn-secondary{ background:var(--mustard); color:var(--teal-deep); box-shadow:0 8px 20px rgba(222,154,42,.3); }
.btn-secondary:hover{ transform:translateY(-2px); }
.btn-outline{ background:transparent; color:#fff; border:2px solid rgba(255,255,255,.6); }
.btn-outline:hover{ background:rgba(255,255,255,.12); }

/* vague de transition sous le hero */
.hero-wave{ display:block; width:100%; height:60px; margin-top:-2px; }

/* =========================================================
   SECTIONS GÉNÉRIQUES
   ========================================================= */
section{ padding:4.5rem 1.5rem; }
.section-title{ text-align:center; font-size:clamp(1.7rem,3.4vw,2.3rem); margin-bottom:.6rem; }
.section-sub{ text-align:center; max-width:520px; margin:0 auto 3rem; color:#5b625f; }

.divider{
  width:70px; height:3px; margin:0 auto 3rem;
  background:repeating-linear-gradient(90deg,var(--terracotta) 0 10px, transparent 10px 16px);
  border-radius:2px;
}

/* =========================================================
   VALEURS
   ========================================================= */
.values-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.75rem; max-width:1100px; margin:0 auto; }
.value-card{
  background:var(--paper); padding:2rem 1.75rem; border-radius:var(--radius-m);
  box-shadow:var(--shadow-card); border-top:5px solid var(--terracotta);
  text-align:left;
}
.value-card:nth-child(2){ border-color:var(--mustard); }
.value-card:nth-child(3){ border-color:var(--sage); }
.value-card h3{ display:flex; align-items:center; gap:.6rem; font-size:1.2rem; }

/* =========================================================
   PHOTO-STRIP — élément signature (polaroids épinglés)
   ========================================================= */
.photo-strip{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-end;
  gap:1.6rem 1.4rem; max-width:1050px; margin:0 auto; padding:1rem 0 2rem;
}
.polaroid{
  background:var(--paper); padding:10px 10px 34px; border-radius:4px;
  box-shadow:var(--shadow-soft); width:160px; position:relative;
  transform:rotate(var(--tilt,0deg));
  transition:transform .3s ease, box-shadow .3s ease;
}
.polaroid:hover{ transform:rotate(0deg) translateY(-4px) scale(1.03); box-shadow:0 16px 34px rgba(6,52,58,.22); z-index:5; }
.polaroid:nth-child(1){ --tilt:-6deg; }
.polaroid:nth-child(2){ --tilt:4deg;  margin-top:1.4rem;}
.polaroid:nth-child(3){ --tilt:-3deg; }
.polaroid:nth-child(4){ --tilt:7deg;  margin-top:2rem;}
.polaroid:nth-child(5){ --tilt:-8deg; }
.polaroid:nth-child(6){ --tilt:3deg;  margin-top:1rem;}
.polaroid .frame{ overflow:hidden; border-radius:2px; background:#eee; height:150px; position:relative; }
.polaroid .frame img{ width:100%; height:100%; object-fit:cover; filter:saturate(1.05) contrast(1.05); }
.polaroid .tape{
  position:absolute; top:-10px; left:50%; transform:translateX(-50%) rotate(-3deg);
  width:56px; height:20px;
  background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,.35));
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 2px 4px rgba(0,0,0,.1);
}
.polaroid figcaption{
  position:absolute; bottom:8px; left:0; right:0; text-align:center;
  font-family:var(--font-display); font-style:italic; font-size:.92rem; color:var(--teal-deep);
}

/* =========================================================
   MENU / PLATS
   ========================================================= */
.menu-preview{ background:var(--teal); border-radius:var(--radius-l); padding:3.5rem 1.5rem; }
.menu-preview .section-title, .menu-preview .section-sub{ color:#fff; }
.menu-preview .section-sub{ color:rgba(255,255,255,.78); }

.dishes{ display:flex; justify-content:center; flex-wrap:wrap; gap:1.6rem; max-width:1100px; margin:0 auto; }
.dish-card{
  background:var(--paper); border-radius:var(--radius-m); overflow:hidden;
  width:290px; text-align:left; box-shadow:var(--shadow-card);
  transition:transform .25s ease, box-shadow .25s ease;
}
.dish-card:hover{ transform:translateY(-5px); box-shadow:0 14px 26px rgba(6,52,58,.18); }
.dish-card .frame{ height:180px; overflow:hidden; background:#eee; }
.dish-card .frame img{ width:100%; height:100%; object-fit:cover; filter:saturate(1.05) contrast(1.05); }
.dish-card .content{ padding:1.3rem 1.4rem 1.5rem; }
.dish-card .badge{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.78rem; font-weight:600; color:var(--teal-deep);
  background:var(--cream); padding:.3rem .7rem; border-radius:999px; margin-bottom:.6rem;
}
.dish-card h3{ font-size:1.15rem; margin-bottom:.4rem; }
.dish-card p{ font-size:.94rem; color:#5b625f; margin-bottom:0; }
.dish-card .price{ font-family:var(--font-display); font-weight:600; color:var(--terracotta); }

.menu-category{ max-width:820px; margin:0 auto 3rem; }
.menu-category h2{ display:flex; align-items:center; gap:.6rem; font-size:1.5rem; border-bottom:2px dashed rgba(11,76,82,.25); padding-bottom:.6rem; margin-bottom:1.4rem; }
.menu-list{ display:grid; gap:1.1rem; }
.menu-item{ display:flex; justify-content:space-between; gap:1rem; align-items:baseline; }
.menu-item .name{ font-weight:600; color:var(--teal-deep); }
.menu-item .desc{ display:block; font-weight:400; color:#5b625f; font-size:.92rem; margin-top:.15rem; }
.menu-item .price{ font-family:var(--font-display); font-weight:600; color:var(--terracotta); white-space:nowrap; }
.menu-item .leaders{ flex:1; border-bottom:1px dotted rgba(38,49,46,.25); margin-bottom:.4rem; min-width:20px; }

/* =========================================================
   INFOS PRATIQUES
   ========================================================= */
.info-container{
  display:grid; grid-template-columns:1fr 1fr; gap:2rem;
  background:var(--paper); padding:2.5rem; border-radius:var(--radius-m); box-shadow:var(--shadow-card);
  max-width:900px; margin:0 auto;
}
.info-block h3{ display:flex; align-items:center; gap:.5rem; font-size:1.15rem; margin-bottom:.9rem; }
.info-block p{ margin-bottom:.3rem; }
@media (max-width:640px){ .info-container{ grid-template-columns:1fr; } }

/* =========================================================
   FORMULAIRES
   ========================================================= */
.form-card{ max-width:600px; margin:0 auto; background:var(--paper); padding:2.2rem; border-radius:var(--radius-m); box-shadow:var(--shadow-card); }
.form-group{ margin-bottom:1.3rem; display:flex; flex-direction:column; }
.form-group label{ margin-bottom:.5rem; font-weight:600; color:var(--teal-deep); }
.form-group input, .form-group textarea{
  padding:.85rem; border:1.5px solid #ddd7c9; border-radius:var(--radius-s);
  font-family:inherit; font-size:1rem; background:#fffdf8; transition:border-color .2s;
}
.form-group input:focus, .form-group textarea:focus{ border-color:var(--teal); outline:none; }
#form-status{ font-weight:600; margin-bottom:1rem; min-height:1.2em; }
.hp-field{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }

/* =========================================================
   FOOTER
   ========================================================= */
footer.site-footer{
  background:var(--teal-deep); color:#fff; padding:3rem 1.5rem 2rem; margin-top:4rem;
}
.footer-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:2rem; max-width:1100px; margin:0 auto 2rem; }
.footer-grid h4{ color:#fff; font-size:1rem; margin-bottom:.8rem; }
.footer-grid p, .footer-grid a{ color:rgba(255,255,255,.78); text-decoration:none; font-size:.94rem; }
.footer-grid a:hover{ color:var(--mustard); }
.footer-bottom{ text-align:center; font-size:.85rem; color:rgba(255,255,255,.55); border-top:1px solid rgba(255,255,255,.12); padding-top:1.4rem; max-width:1100px; margin:0 auto; }

/* =========================================================
   REVEAL AU SCROLL (discret)
   ========================================================= */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in-view{ opacity:1; transform:translateY(0); }