/*
Theme Name: Jangle Diner
Theme URI: https://jangle-diner.fr
Author: Jangle Diner
Author URI: https://jangle-diner.fr
Description: Theme WordPress classique "Safari Chic Elegant" pour le restaurant & bar independant Jangle Diner. Une page, fonts Playfair Display + Jost, palette vert/or/creme.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.5
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jangle-diner
*/

:root{
  --green:#1F3A2E; --green-deep:#142922; --gold:#C9A24B; --cream:#F6F1E7; --text:#2A2A26; --orange:#FF7145;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Jost',sans-serif; background:var(--cream); color:var(--text); line-height:1.75; font-weight:300;}
h1,h2,h3{font-family:'Playfair Display',serif; font-weight:700;}
img{max-width:100%; display:block;}
a{text-decoration:none; color:inherit;}
ul{list-style:none;}
.eyebrow{letter-spacing:3px; text-transform:uppercase; font-size:.78rem; color:var(--gold); font-weight:500; margin-bottom:12px;}
.divider{width:60px; height:2px; background:var(--gold); margin:18px 0;}
.screen-reader-text{position:absolute; left:-9999px;}

/* HEADER */
header.site-header{position:sticky; top:0; z-index:50; background:rgba(20,41,34,.95); color:var(--cream); backdrop-filter:blur(6px);}
.nav-wrap{max-width:1240px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:20px 30px;}
.logo{font-family:'Playfair Display',serif; font-size:1.5rem; letter-spacing:2px;}
.logo a{color:inherit;}
nav.main-nav ul{display:flex; gap:34px; list-style:none; font-size:.85rem; letter-spacing:1px; text-transform:uppercase;}
nav.main-nav a{position:relative; display:inline-block; padding:4px 0; transition:color .3s ease;}
nav.main-nav a::after{content:""; position:absolute; left:0; bottom:0; width:100%; height:2px; background:var(--orange); transform:scaleX(0); transform-origin:left; transition:transform .35s ease;}
nav.main-nav a:hover{color:var(--orange);}
nav.main-nav a:hover::after{transform:scaleX(1);}
.btn-gold{border:1px solid var(--gold); color:var(--gold); padding:10px 26px; font-size:.8rem; letter-spacing:1px; text-transform:uppercase; transition:.3s; display:inline-block;}
.btn-gold:hover{background:var(--gold); color:var(--green-deep);}
.menu-toggle{display:none; background:none; border:1px solid var(--cream); color:var(--cream); padding:8px 14px; font-size:.8rem; text-transform:uppercase; letter-spacing:1px;}

/* SELECTEUR DE LANGUE (haut a droite, juste avant le bouton Reserver) */
.lang-switch{display:flex; align-items:center; gap:6px; font-size:.72rem; letter-spacing:1px; text-transform:uppercase; margin:0 6px;}
.lang-switch a{opacity:.55; transition:opacity .25s ease, color .25s ease;}
.lang-switch a:hover{opacity:1;}
.lang-switch a.is-active{opacity:1; color:var(--gold); font-weight:500;}
.lang-switch .sep{opacity:.3;}

/* DROPDOWN NAV (sous-menu "La Carte") */
nav.main-nav li{position:relative;}
nav.main-nav .sub-menu{display:flex; flex-direction:column; gap:0; position:absolute; top:100%; left:0; min-width:220px; width:max-content; background:var(--green-deep); border:1px solid var(--gold); padding:14px 0; margin-top:10px; opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .25s ease, transform .25s ease, visibility .25s;}
nav.main-nav .sub-menu li{padding:0 22px;}
nav.main-nav .sub-menu a{display:block; padding:10px 0; font-size:.8rem; white-space:nowrap;}
nav.main-nav .sub-menu a::after{display:none;}
nav.main-nav li:hover > .sub-menu,
nav.main-nav li:focus-within > .sub-menu{opacity:1; visibility:visible; transform:translateY(0);}
nav.main-nav .menu-item-has-children > a::before{content:"▾"; display:inline-block; margin-right:6px; font-size:.65rem; opacity:.7;}

/* HERO */
.hero{position:relative; min-height:88vh; display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden; background:var(--green-deep);}
.hero img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.45;}
.hero-content{position:relative; z-index:2; color:var(--cream); max-width:680px; padding:0 24px;}
.hero-content .eyebrow{color:var(--gold);}
.hero-content h1{font-size:3.4rem; margin-bottom:18px;}
.hero-content p{font-size:1.05rem; max-width:460px; margin:0 auto 30px; opacity:.9;}
.hero-cta{display:flex; justify-content:center; gap:16px; flex-wrap:wrap;}
.btn-outline-cream{border:1px solid var(--cream); color:var(--cream); padding:12px 28px; font-size:.8rem; letter-spacing:1px; text-transform:uppercase; display:inline-block;}

/* SECTIONS */
section{padding:110px 30px;}
.section-inner{max-width:1180px; margin:0 auto;}
.split{display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center;}
.split img{border:1px solid var(--gold); padding:10px;}
.split h2{font-size:2.4rem; margin-bottom:6px;}
.schedule{margin-top:22px; font-size:.85rem; letter-spacing:1px; text-transform:uppercase; color:var(--gold); border-top:1px solid var(--gold); border-bottom:1px solid var(--gold); display:inline-block; padding:10px 0;}
.cta-row{display:flex; gap:18px; margin-top:30px; flex-wrap:wrap;}
.btn-line{border-bottom:1px solid var(--text); padding-bottom:4px; font-size:.85rem; letter-spacing:1px; text-transform:uppercase;}

.safari-section{background:var(--green); color:var(--cream);}
.safari-section .split img{border-color:var(--gold);}
.safari-section .btn-line{border-color:var(--cream);}

.contact{background:var(--cream); text-align:center;}
.contact h2{margin-bottom:10px;}
.contact p{margin-bottom:6px; opacity:.85;}

/* PAGE HERO (sous-pages : carte, evenements...) */
.page-hero{background:var(--green-deep); color:var(--cream); text-align:center; padding:90px 30px 70px;}
.page-hero .eyebrow{color:var(--gold);}
.page-hero h1{font-size:2.6rem;}
.page-hero p{max-width:560px; margin:14px auto 0; opacity:.85;}

/* CARTE - listing menu */
.menu-category{margin-bottom:50px;}
.menu-category:last-child{margin-bottom:0;}
.menu-category h3{font-size:1.5rem; color:var(--green-deep); margin-bottom:18px; display:flex; align-items:center; gap:14px;}
.menu-category h3::after{content:""; flex:1; height:1px; background:var(--gold);}
.safari-section .menu-category h3{color:var(--cream);}
.menu-list{display:flex; flex-direction:column; gap:14px;}
.menu-list li{display:flex; justify-content:space-between; align-items:baseline; gap:16px; border-bottom:1px dotted rgba(0,0,0,.2); padding-bottom:8px;}
.safari-section .menu-list li{border-bottom-color:rgba(246,241,231,.3);}
.menu-list .item-name{font-weight:500;}
.menu-list .item-desc{display:block; font-size:.82rem; opacity:.65; font-weight:300; margin-top:2px;}
.menu-list .item-price{font-family:'Playfair Display',serif; color:var(--gold); white-space:nowrap;}

/* CARTE - cartes (page d'accueil de la carte) */
.carte-cards{display:grid; grid-template-columns:1fr 1fr; gap:40px;}
.carte-card{position:relative; border:1px solid var(--gold); overflow:hidden; min-height:360px; display:flex; align-items:flex-end;}
.carte-card img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.carte-card::after{content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(20,41,34,.92), rgba(20,41,34,.15));}
.carte-card-content{position:relative; z-index:2; padding:30px; color:var(--cream);}
.carte-card-content h3{font-size:1.7rem; margin-bottom:10px;}
.carte-card-content a{font-size:.8rem; letter-spacing:1px; text-transform:uppercase; border-bottom:1px solid var(--gold); color:var(--gold); padding-bottom:3px;}

/* FORMULE DU JOUR (au-dessus des cartes Bar/Restaurant sur "La Carte") */
.formule-section{padding-bottom:0;}
.formule-card{position:relative; overflow:hidden; display:grid; grid-template-columns:280px 1fr; align-items:stretch; text-decoration:none; border:1px solid var(--gold); background:var(--green-deep); color:var(--cream); margin-top:6px;}
.formule-card img{width:100%; height:100%; min-height:220px; object-fit:cover;}
.formule-card-content{padding:34px 38px; display:flex; flex-direction:column; gap:10px; justify-content:center;}
.formule-date{font-size:.72rem; letter-spacing:1px; text-transform:uppercase; color:var(--gold);}
.formule-card-content h3{font-size:1.6rem;}
.formule-card-content p{opacity:.85; font-size:.92rem;}
.formule-cta{font-size:.78rem; letter-spacing:1px; text-transform:uppercase; color:var(--gold); border-bottom:1px solid var(--gold); display:inline-block; width:fit-content; padding-bottom:3px; margin-top:4px;}
.formule-empty{opacity:.6; font-style:italic; margin-top:6px;}
.formule-ribbon{position:absolute; top:22px; right:-44px; width:170px; padding:7px 0; background:var(--gold); color:var(--green-deep); text-align:center; font-family:'Jost',sans-serif; font-size:.82rem; font-weight:600; letter-spacing:1px; text-transform:uppercase; transform:rotate(45deg); box-shadow:0 2px 8px rgba(0,0,0,.3); z-index:5;}
@media(max-width:860px){
  .formule-card{grid-template-columns:1fr;}
  .formule-card img{min-height:200px;}
  .formule-ribbon{top:16px; right:-46px; width:160px; font-size:.76rem;}
}

/* RESERVATION */
.reservation{background:var(--green-deep); color:var(--cream); text-align:center;}
.reservation .eyebrow{color:var(--gold);}
.reservation .divider{margin:18px auto 40px;}
.reservation-form{max-width:760px; margin:0 auto; text-align:left;}
.reservation-fields{display:grid; grid-template-columns:1fr 1fr; gap:22px;}
.form-row{display:flex; flex-direction:column; gap:8px;}
.form-row-full{grid-column:1 / -1;}
.form-row label{font-size:.78rem; letter-spacing:1px; text-transform:uppercase; color:var(--gold);}
.form-row input{background:rgba(246,241,231,.06); border:1px solid rgba(201,162,75,.5); color:var(--cream); padding:12px 14px; font-family:'Jost',sans-serif; font-size:.95rem; font-weight:300;}
.form-row input::placeholder{color:rgba(246,241,231,.5);}
.form-row input:focus{outline:none; border-color:var(--gold);}
.form-row input[type="date"],
.form-row input[type="time"]{color-scheme:dark;}
.reservation-form button.btn-gold{margin-top:30px; background:none; border:1px solid var(--gold); color:var(--gold); font-family:'Jost',sans-serif; cursor:pointer;}
.reservation-form button.btn-gold:hover{background:var(--gold); color:var(--green-deep);}
.form-msg{margin-bottom:30px; padding:14px 20px; font-size:.9rem; border:1px solid var(--gold); max-width:760px; margin-left:auto; margin-right:auto;}
.form-msg-success{border-color:#7FB88A; color:#CFE8D2;}
.form-msg-error{border-color:#E08A6B; color:#F4C9B8;}
.jd-hp{position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0;}

/* EVENEMENTS */
.event-grid{display:grid; grid-template-columns:1fr 1fr; gap:34px;}
.event-card{background:#fff; border:1px solid var(--gold); padding:32px;}
.event-card h3{font-size:1.5rem; margin-bottom:10px;}
.event-card p{opacity:.85; margin-bottom:14px;}
.event-card .schedule{font-size:.78rem;}

/* FOOTER */
footer.site-footer{background:var(--green-deep); color:var(--cream); padding:40px 30px; text-align:center; font-size:.82rem; letter-spacing:.5px;}
footer.site-footer .foot-links{display:flex; justify-content:center; gap:20px; margin-top:14px; flex-wrap:wrap; text-transform:uppercase; font-size:.75rem;}

@media(max-width:860px){
  .split, .carte-cards, .event-grid, .reservation-fields{grid-template-columns:1fr;}
  .hero-content h1{font-size:2.3rem;}
  .lang-switch{margin:0 4px; font-size:.68rem;}
  nav.main-nav{display:none;}
  .menu-toggle{display:inline-block;}
  nav.main-nav.is-open{display:block; position:absolute; top:100%; left:0; right:0; background:var(--green-deep); padding:20px;}
  nav.main-nav.is-open ul{flex-direction:column; gap:18px;}
  nav.main-nav .sub-menu{position:static; opacity:1; visibility:visible; transform:none; background:transparent; border:none; padding:6px 0 0 18px; margin-top:8px;}
  .menu-list li{flex-direction:column; align-items:flex-start; gap:2px;}
}