/* Thème sable & lagon */
:root{
  --teal:#21bfc8;
  --teal-dark:#149aa2;
  --sand:#f3ede3;
  --ink:#142127;
  --white:#ffffff;
  --shadow:0 10px 25px rgba(0,0,0,.08);
  --radius:16px;

  /* soulignement vague */
  --wave-w:56px;
  --wave-h:10px;
}

/* Police de marque chargée via <link> Google Fonts */
.logo-script { font-family:'Allison', cursive; }
.logo-script a { color:inherit; text-decoration:none; }
.logo-script a:hover, .logo-script a:focus-visible { color:var(--teal-dark); }

html,body{height:100%}
body{
  color:var(--ink);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  margin:0;
  background:
    linear-gradient(180deg, rgba(243,237,227,.55), rgba(243,237,227,0)) no-repeat,
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8"><path fill="%23f7f2ea" d="M0 0h8v8H0z"/></svg>') repeat;
}

/* bloquer le scroll quand la modale est ouverte (évite inline style) */
body.no-scroll { overflow:hidden; }

.container { width:min(1100px, 92%); margin-inline:auto; }
.section { padding:72px 0; }
.section.alt { background:var(--sand); }
.section-title {
  font-family: Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:800; letter-spacing:.4px;
  font-size: clamp(1.6rem, 2vw + 1rem, 2.1rem);
  margin:0 0 12px 0;
}
p { line-height:1.6; }

/* Lien d’évitement */
.skip-link{ position:absolute; left:-9999px; top:auto; }
.skip-link:focus-visible{
  left:16px; top:16px; background:#fff; padding:10px 14px; border-radius:8px; box-shadow:var(--shadow);
}

/* Focus visible global */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline:3px solid #7fdfe5; outline-offset:2px;
}

/* Header */
.site-header{
  background: linear-gradient(180deg, var(--sand), rgba(255,255,255,0));
  position:sticky; top:0; z-index:20;
  backdrop-filter:saturate(180%) blur(8px);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:24px; padding:14px 0}
.logo-script{
  font-size: clamp(2.2rem, 4vw + 1rem, 3.6rem);
  color: var(--teal-dark);
  margin:0; line-height:1;
}
.logo-script .thin{font-weight:400; font-family: Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-size:.42em; margin-left:.2em}
.baseline{margin:.15rem 0 0 2px; font-weight:600; color:var(--ink)}

.main-nav ul{display:flex; list-style:none; gap:18px; margin:0; padding:0; align-items:center}
.main-nav a{font-weight:600; text-decoration:none; color:var(--ink)}
.main-nav .btn{padding:10px 14px; border-radius:999px; background:var(--teal); color:var(--white)}
.main-nav .btn:hover{background:var(--teal-dark)}
.nav-toggle{display:none}

.wave svg{width:100%; height:60px; display:block}
.wave path{fill:var(--teal); opacity:.2}

/* Hero */
.hero{
  background: linear-gradient(180deg, rgba(33,191,200,.08), rgba(33,191,200,0));
  padding:56px 0 72px;
}
.hero-inner{display:grid; grid-template-columns: 1fr; align-items:center}
.hero-text h2{font-size:clamp(1.8rem, 3vw + 1rem, 2.6rem); margin:0 0 8px}
.hero .accent{color:var(--teal-dark)}
.hero-cta .btn{margin-right:12px}

/* Layouts & cards */
.grid-2{display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:center}
.card{background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; position:relative}
.card img{display:block; width:100%; height:auto}
.card.photo{padding:0}
.card .card-body{padding:16px}

.btn{display:inline-block; padding:12px 18px; border-radius:12px; text-decoration:none; font-weight:700; border:2px solid transparent}
.btn-primary{background:var(--teal); color:var(--white)}
.btn-primary:hover{background:var(--teal-dark)}
.btn-outline{border-color:var(--teal); color:var(--teal); background:transparent}
.btn-outline:hover{background:var(--teal); color:var(--white)}

.menu-grid{display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:22px; margin-top:14px}
.note{opacity:.8; font-size:.95rem; margin-top:12px}

/* Horaires */
.hours{display:grid; gap:10px; max-width:560px}
.hour-row{display:flex; justify-content:space-between; padding:12px 16px; border-radius:12px; background:var(--white); box-shadow:var(--shadow)}
.hour-row em{opacity:.7}

/* Mise en avant du jour courant */
.hour-row.today {
  background: rgba(33,191,200,.12);
  border: 1px solid rgba(20,154,162,.25);
  box-shadow: none;
  position: relative;
}
.hour-row.today::before{
  content:''; position:absolute; left:0; top:8px; bottom:8px;
  width:4px; border-radius:4px; background:#21bfc8; opacity:.6;
}

/* Badge d’icône en haut à droite des cartes */
.card-icon{
  position:absolute; top:12px; right:12px;
  width:56px; height:56px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--white);
  border-radius:12px; box-shadow:var(--shadow);
  text-decoration:none;
}
.card-icon img{display:block; max-width:70%; max-height:70%; object-fit:contain}
.card .card-body{ padding-top:14px }

/* Boutons sociaux */
.socials{display:flex; align-items:center; gap:12px}
.btn-social{
  --size:48px;
  width:var(--size); height:var(--size);
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px;
  color:#fff;
  background:#999;
  box-shadow:var(--shadow);
  border:1px solid rgba(0,0,0,.05);
  text-decoration:none;
  transition: transform .15s ease, box-shadow .15s ease, filter .2s ease;
}
.btn-social i{ font-size:1.2rem; line-height:1; }
.btn-social:hover{ transform:translateY(-2px); filter:saturate(115%); box-shadow:0 8px 28px rgba(0,0,0,.12) }
.btn-social:active{ transform:translateY(0) }
.btn-social.fb{ background:#1877F2 }
.btn-social.ig{
  background: radial-gradient(circle at 30% 107%,
    #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}

/* Bouton Google avec image centrée */
.btn-social.google{ width:48px; height:48px; background:#fff; }
.btn-social img.icon-google{ width:60%; height:60%; object-fit:contain; }

.sr-only{
  position:absolute !important; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Divers */
.checks{padding-left:18px}
.checks li{margin:6px 0}
.map-embed{display:flex; align-items:center; justify-content:center; min-height:260px}
.map-embed iframe{width:100%; height:320px; border:0}
.socials a{margin-right:12px}
.site-footer{padding:28px 0; background: linear-gradient(0deg, var(--sand), rgba(255,255,255,0))}
.footer-inner{display:flex; gap:16px; justify-content:space-between; align-items:center; flex-wrap:wrap}
.footer-inner a{margin-left:12px; color:inherit; text-decoration:none}

/* Soulignement vague dans la nav (sauf bouton) */
.main-nav a:not(.btn){ position:relative; padding-bottom:16px; }
.main-nav a.btn::after{ content:none; }
.main-nav a:not(.btn)::after{
  content:""; position:absolute; left:0; bottom:0;
  width:var(--wave-w); height:var(--wave-h);
  opacity:0; overflow:hidden; pointer-events:none;
  background-image:url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" width="56" height="10" viewBox="0 0 56 10">\
<path d="M0 7 C 6 7 6 3 12 3 S 18 7 24 7 30 3 36 3 42 7 48 7 54 3 56 3" fill="none" stroke="%2321bfc8" stroke-width="2" stroke-linecap="round"/>\
</svg>');
  background-repeat:no-repeat; background-position:left bottom;
  background-size: 0 var(--wave-h);
  transition: background-size .55s ease-out, opacity .15s ease .1s;
}
.main-nav a:not(.btn):hover::after,
.main-nav a:not(.btn):focus-visible::after{
  opacity:1; background-size: var(--wave-w) var(--wave-h);
}

/* Mobile */
@media (max-width:860px){
  .grid-2{grid-template-columns:1fr}
  .main-nav ul{display:none}
  .nav-toggle{display:inline-flex; background:transparent; border:2px solid var(--teal); padding:8px 12px; border-radius:999px; font-weight:700}
  .main-nav[aria-expanded="true"] ul{
    display:flex; flex-direction:column; position:absolute; right:4%; top:72px;
    background:var(--white); padding:14px; border-radius:14px; box-shadow:var(--shadow)
  }
  .card-icon{ width:48px; height:48px }
  .map-embed iframe{ height:260px }
}

/* Lightbox / Modale */
.modal {
  display:none; position:fixed; z-index:1000; inset:0; padding-top:60px;
  background-color: rgba(20,33,39,0.8); backdrop-filter: blur(6px);
}
.modal.open { display:block; }
.modal-content {
  display:block; margin:auto; max-width:90%; max-height:85vh;
  border-radius:var(--radius); box-shadow:var(--shadow); background:var(--white); padding:10px;
}
.modal-close {
  position:absolute; top:20px; right:30px; color:var(--white);
  font-size:40px; font-weight:bold; cursor:pointer; background:transparent; border:0; line-height:1;
  transition: color .2s;
}
.modal-close:hover { color: var(--teal); }
#caption {
  margin: 15px auto 0; text-align: center; color: var(--white); font-size: 1.1rem; max-width: 80%;
}

/* Réduire les animations si demandé */
@media (prefers-reduced-motion: reduce){
  * { scroll-behavior:auto !important; }
  .btn-social:hover{ transform:none; }
}



/* Carte interactive — réutilise le thème existant */
.menu-controls{
  display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; margin:10px 0 14px;
}
.menu-search{ flex:1 1 280px; padding:12px 14px; border:1px solid #dcd6ce; border-radius:10px; font:inherit }
.menu-filters{ display:flex; flex-wrap:wrap; gap:8px }
.menu-filters .btn{ padding:10px 12px }
.menu-filters .is-active{ background:var(--teal); color:#fff; border-color:var(--teal); }
.menu-actions{ display:flex; gap:8px }

.menu-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:16px }
.menu-item{
  background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:14px 14px 12px; display:grid; gap:8px;
}
.menu-item .head{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px }
.menu-item .title{ font-weight:800; line-height:1.2 }
.menu-item .price{ font-weight:800; color:var(--teal-dark); white-space:nowrap }
.menu-item .desc{ margin:0; opacity:.9; line-height:1.5 }
.menu-item .tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:4px }
.tag{
  font-size:.82rem; line-height:1; padding:6px 8px; border-radius:999px; background:rgba(33,191,200,.12); color:var(--teal-dark);
  border:1px solid rgba(20,154,162,.25);
}
.tag.seasonal{ background:#fff3cd; border-color:#ffe08a; color:#8a6d00 }
.tag.new{ background:#eaf8f1; border-color:#b8e7cf; color:#256149 }

@media (max-width: 720px){
  .menu-actions{ width:100%; justify-content:flex-end }
}