/*
Theme Name: Crêperie du château
Theme URI: https://creperieduchateau-angers.fr/
Author: Crêperie du château
Description: Thème sur mesure, visuel et léger pour la Crêperie du château à Angers.
Version: 1.11.2
Text Domain: creperie-chateau
*/

:root {
  --cream: #f4efe5;
  --paper: #fffaf0;
  --ink: #29231d;
  --wine: #8b2029;
  --green: #213c32;
  --gold: #c7a66a;
  --serif: Georgia, "Times New Roman", serif;
  --sans: Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--cream); font-family: var(--sans); line-height: 1.65; }
body.menu-open { overflow: hidden; }
body.notice-open { overflow: hidden; }
a { color: inherit; }
img { display: block; width: 100%; height: auto; }
.site-header { position: fixed; z-index: 50; inset: 0 0 auto; padding: 18px 4vw; display: flex; align-items: center; justify-content: space-between; color: #fff; transition: .3s; }
.site-header.scrolled { background: rgba(26,31,26,.96); padding-top: 11px; padding-bottom: 11px; box-shadow: 0 4px 20px rgba(0,0,0,.15); }
.page-template-page-mentions-legales .site-header,
.page-id-120 .site-header { background: rgba(26,31,26,.96); box-shadow: 0 4px 20px rgba(0,0,0,.15); }
.brand { text-decoration: none; font-family: var(--serif); font-size: clamp(1.2rem,2vw,1.65rem); letter-spacing: .02em; }
.main-nav { display: flex; gap: 28px; align-items: center; }
.main-nav a { color: #fff; text-decoration: none; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; }
.main-nav .nav-cta { border: 1px solid rgba(255,255,255,.7); padding: 10px 15px; }
.menu-toggle { display: none; border: 0; color: #fff; background: transparent; font-size: 1.55rem; }
.hero { min-height: 100svh; display: grid; place-items: center; text-align: center; color: #fff; position: relative; background: center/cover no-repeat; }
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,rgba(12,15,12,.45),rgba(12,15,12,.64)); }
.hero-content { position: relative; width: min(100%, 980px); padding: 120px 32px 70px; }
.eyebrow { margin: 0 0 18px; text-transform: uppercase; letter-spacing: .25em; font-size: .72rem; font-weight: 700; }
.hero h1 { margin: 0 auto; max-width: 100%; font-family: var(--serif); font-size: clamp(3rem,7.5vw,6.5rem); line-height: 1.06; font-weight: 400; text-wrap: balance; text-shadow: 0 4px 20px rgba(0,0,0,.25); }
.hero .tagline { max-width: 680px; margin: 30px auto; font-family: var(--serif); font-size: clamp(1.2rem,2.4vw,1.75rem); }
.page-hero { min-height:68vh; display:grid; place-items:center; position:relative; background:center/cover no-repeat; text-align:center; color:#fff; }
.page-hero::before { content:""; position:absolute; inset:0; background:rgba(15,16,13,.52); }
.page-hero > div { position:relative; padding:130px 24px 60px; }
.page-hero h1 { margin:0; font:400 clamp(3.4rem,8vw,7rem)/1 var(--serif); }
.page-content { max-width:850px; margin:auto; padding:clamp(70px,10vw,140px) 7vw; text-align:center; }
.menu-page-content { max-width:1400px; text-align:left; }
.menu-tabs { position:sticky; z-index:20; top:60px; display:flex; justify-content:center; gap:12px; padding:22px 4vw; background:rgba(244,239,229,.97); border-bottom:1px solid rgba(41,35,29,.12); }
.menu-tab { display:inline-block; padding:15px clamp(16px,3vw,30px); border:1px solid var(--wine); color:var(--wine); background:transparent; font:700 .72rem/1 var(--sans); letter-spacing:.12em; text-align:center; text-decoration:none; text-transform:uppercase; cursor:pointer; transition:.2s; }
.menu-tab:hover { color:#fff; background:#a54850; border-color:#a54850; transform:translateY(-2px); }
.menu-tab.active { color:#fff; background:var(--wine); border-color:var(--wine); }
.menu-panel { display:none; }
.menu-panel.active { display:block; }
.menu-panel[data-panel="galettes"] { background:#f4efe5; box-shadow:0 0 0 100vmax #f4efe5; clip-path:inset(0 -100vmax); }
.menu-panel[data-panel="sweets"] { background:#eee5d6; box-shadow:0 0 0 100vmax #eee5d6; clip-path:inset(0 -100vmax); }
.menu-panel[data-panel="ciders"] { background:#e8dfcf; box-shadow:0 0 0 100vmax #e8dfcf; clip-path:inset(0 -100vmax); min-height:52vh; }
.menu-panel[data-panel="drinks"] { background:#e7ece7; box-shadow:0 0 0 100vmax #e7ece7; clip-path:inset(0 -100vmax); }
.drinks-columns { display:grid; grid-template-columns:1fr 1fr; gap:clamp(45px,7vw,100px); }
.drinks-columns h2 { margin-top:45px; }
.menu-note,.alcohol-warning { text-align:center; font-style:italic; }
.alcohol-warning { margin-top:65px; font-size:.88rem; }
.menu-page-content > .menu-lead { margin:0 0 55px; color:var(--wine); font-family:var(--serif); font-size:1.4rem; }
.menu-page-content .menu-columns { display:flex; flex-wrap:nowrap; gap:clamp(45px,7vw,100px); align-items:flex-start; }
.menu-page-content .menu-columns > .wp-block-column { flex:1 1 0; min-width:0; }
.menu-page-content h2 { text-align:center; color:var(--wine); }
.menu-page-content h3 { margin:45px 0 24px; text-align:center; font:italic 400 1.65rem/1.2 var(--serif); }
.menu-page-content .menu-item { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin:0; padding:12px 0; border-bottom:1px dotted rgba(41,35,29,.25); line-height:1.4; }
.menu-page-content .menu-item > span { flex:1; }
.menu-page-content .menu-item > strong { flex:0 0 auto; white-space:nowrap; color:var(--wine); }
.gallery-full { grid-auto-rows:330px; }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.button { display: inline-block; padding: 13px 21px; border: 1px solid currentColor; text-decoration: none; text-transform: uppercase; letter-spacing: .13em; font-size: .7rem; font-weight: 700; transition: .2s; }
.button.primary { color: #fff; background: var(--wine); border-color: var(--wine); }
.button.light { color: #fff; background: rgba(0,0,0,.15); }
.button:hover { transform: translateY(-2px); filter: brightness(1.08); }
.intro { display: grid; grid-template-columns: 1.05fr .95fr; min-height: 720px; background: var(--paper); }
.intro-image { min-height: 540px; background: center/cover no-repeat; }
.copy { align-self: center; max-width: 640px; padding: clamp(60px,8vw,120px); }
.kicker { color: var(--wine); text-transform: uppercase; letter-spacing: .22em; font-size: .7rem; font-weight: 700; }
h2 { margin: 14px 0 24px; font-family: var(--serif); font-size: clamp(2.3rem,5vw,4.6rem); line-height: 1.04; font-weight: 400; }
.copy p, .section-copy p { font-size: 1.02rem; }
.photo-quote { min-height: 72vh; display: grid; place-items: center; position: relative; color: #fff; text-align: center; background: center/cover fixed no-repeat; }
.photo-quote::before { content:""; position:absolute; inset:0; background:rgba(20,15,10,.52); }
.photo-quote h2 { position:relative; max-width:900px; padding:40px 25px; font-size:clamp(2.5rem,6vw,5.4rem); }
.cuisine { display:grid; grid-template-columns: 1fr 1fr; background: var(--green); color:#fff; }
.cuisine .section-copy { align-self:center; padding:clamp(60px,8vw,120px); }
.cuisine .kicker { color: var(--gold); }
.cuisine-image { min-height:650px; background:center/cover no-repeat; }
.heritage { display:grid; grid-template-columns: .9fr 1.1fr; background:var(--paper); }
.heritage-image { min-height:700px; background:center/cover no-repeat; }
.heritage .section-copy { align-self:center; max-width:700px; padding:clamp(60px,8vw,120px); }
.gallery { padding:clamp(70px,9vw,130px) 4vw; background:#181c18; color:#fff; }
.gallery-heading { text-align:center; max-width:700px; margin:0 auto 50px; }
.gallery-grid { display:grid; grid-template-columns:repeat(12,1fr); grid-auto-rows:240px; gap:12px; }
.gallery-grid figure { margin:0; overflow:hidden; }
.gallery-grid figure:nth-child(1) { grid-column:span 7; grid-row:span 2; }
.gallery-grid figure:nth-child(2) { grid-column:span 5; }
.gallery-grid figure:nth-child(3) { grid-column:span 5; }
.gallery-grid figure:nth-child(4), .gallery-grid figure:nth-child(5), .gallery-grid figure:nth-child(6) { grid-column:span 4; }
.gallery-grid img { height:100%; object-fit:cover; transition:transform .5s; }
.gallery-grid img:hover { transform:scale(1.035); }
.visit { display:grid; grid-template-columns:1fr 1fr; }
.visit-copy { padding:clamp(60px,8vw,120px); background:var(--wine); color:#fff; }
.visit-details { padding:clamp(60px,8vw,120px); background:var(--cream); }
.visit-details h3 { font-family:var(--serif); font-size:1.8rem; margin:0 0 7px; font-weight:400; }
.visit-details p { margin:0 0 30px; }
.visit-details .route-button { margin:0 0 48px; }
.visit-details .booking-button { margin-top:8px; }
.visit-details .details-phone-bottom { margin-top:48px; }
.site-footer { padding:35px 4vw; background:#121712; color:#d9d4c9; font-size:.78rem; }
.site-footer__content { display:flex; align-items:center; justify-content:space-between; gap:25px; width:100%; }
.site-footer__content p { margin:0; }
.site-footer__content a { text-underline-offset:3px; }
.legal-page { min-height:75vh; padding:clamp(130px,16vw,190px) 7vw clamp(70px,10vw,130px); background:var(--paper); }
.legal-page__inner { width:min(100%,900px); margin:0 auto; }
.legal-page h1 { margin:0 0 55px; font:400 clamp(3rem,7vw,6rem)/1 var(--serif); }
.legal-page h2 { margin-top:48px; color:var(--wine); font-size:clamp(1.8rem,4vw,2.7rem); }
.site-notice[hidden] { display:none; }
.site-notice { position:fixed; z-index:1000; inset:0; display:grid; place-items:center; padding:24px; }
.site-notice__backdrop { position:absolute; inset:0; background:rgba(18,23,18,.78); backdrop-filter:blur(3px); }
.site-notice__dialog { position:relative; width:min(100%,680px); max-height:calc(100vh - 48px); overflow:auto; padding:clamp(38px,6vw,68px); border-top:6px solid var(--wine); background:var(--paper); box-shadow:0 24px 80px rgba(0,0,0,.38); outline:none; text-align:center; }
.site-notice__close { position:absolute; top:12px; right:16px; width:42px; height:42px; border:0; color:var(--ink); background:transparent; font:300 2rem/1 var(--sans); cursor:pointer; }
.site-notice__eyebrow { margin:0 0 12px; color:var(--wine); font-size:.7rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; }
.site-notice h2 { margin:0 0 28px; font-size:clamp(2.25rem,6vw,4rem); }
.site-notice__content { max-width:540px; margin:0 auto; font-size:1.05rem; }
.site-notice__content p { margin:0 0 18px; }
.site-notice__actions { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:18px; margin-top:34px; }
.site-notice__dismiss { padding:12px 5px; border:0; border-bottom:1px solid currentColor; color:var(--ink); background:transparent; font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; }

@media (max-width: 820px) {
  .hero-content { padding-right:7vw; padding-left:7vw; }
  .hero h1 { font-size:clamp(2.8rem,12vw,5rem); line-height:1.08; }
  .menu-toggle { display:block; z-index:2; }
  .main-nav { display:none; position:fixed; inset:0; background:rgba(24,29,24,.98); flex-direction:column; justify-content:center; }
  .main-nav.open { display:flex; }
  .intro,.cuisine,.heritage,.visit { grid-template-columns:1fr; }
  .intro-image,.cuisine-image,.heritage-image { min-height:65vh; }
  .cuisine .cuisine-image { order:-1; }
  .copy,.cuisine .section-copy,.heritage .section-copy,.visit-copy,.visit-details { padding:65px 7vw; }
  .photo-quote { background-attachment:scroll; }
  .gallery-grid { grid-template-columns:1fr 1fr; grid-auto-rows:230px; }
  .gallery-grid figure, .gallery-grid figure:nth-child(n) { grid-column:span 1; grid-row:span 1; }
  .gallery-grid figure:first-child { grid-column:1/-1; }
  .site-footer__content { flex-direction:column; align-items:flex-start; }
  .menu-page-content .wp-block-columns { display:block; }
  .menu-page-content .wp-block-column + .wp-block-column { margin-top:75px; }
  .menu-tabs { top:52px; justify-content:flex-start; overflow-x:auto; padding:15px 5vw; }
  .menu-tab { flex:0 0 auto; }
  .drinks-columns { grid-template-columns:1fr; }
}

@media (max-width:520px) {
  .hero h1 { font-size:clamp(2.55rem,13vw,4rem); }
  .gallery-grid { grid-template-columns:1fr; }
  .gallery-grid figure, .gallery-grid figure:nth-child(n) { grid-column:1; }
  .site-notice { padding:14px; }
  .site-notice__dialog { max-height:calc(100vh - 28px); padding:48px 24px 34px; }
  .site-notice__actions { flex-direction:column; }
}