/* =========================================================================
   Ôbobun Grenette · page « Ouverture bientôt »
   Complément à styles.css (mêmes tokens). Ne charge PAS fnb-ds.css.
   ========================================================================= */

/* Overlock italique (signature DS) · absent du site principal, ajouté ici */
@font-face{font-family:"OverlockVU";src:url("/assets/fonts/OverlockVU-Italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}

:root{
  --clay:#B84C2B;      /* accent chaud · citations sur fond clair */
  --amber:#D4A762;     /* italiques sur fond sombre */
  --vert-deep:#233A10; /* fond hero, un cran plus profond que --green */
}

/* ---------- Bandeau annonce ---------- */
.cs-bandeau{background:var(--green);color:var(--green-link);text-align:center;
  font:600 12.5px/1.4 var(--sans);letter-spacing:.04em;padding:9px 16px}
.cs-bandeau strong{color:#fff;font-weight:700}

/* ---------- Hero ---------- */
.cs-hero{position:relative;overflow:hidden;background:var(--vert-deep);color:var(--cream);
  padding:clamp(48px,8vw,96px) 0 clamp(40px,6vw,72px)}
.cs-hero::before{content:"Ô";position:absolute;right:-4vw;top:50%;transform:translateY(-50%);
  font:900 min(58vw,760px)/1 var(--serif);color:#fff;opacity:.05;pointer-events:none;user-select:none}
.cs-hero .wrap{position:relative;z-index:1}
.cs-eyebrow{font:600 11px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--amber);margin-bottom:22px}
.cs-hero h1{font:700 clamp(44px,8vw,88px)/1.02 var(--serif);letter-spacing:-.01em;margin:0 0 20px;color:var(--cream);max-width:14ch}
.cs-hero h1 em{font-style:italic;color:var(--amber)}
.cs-hero .cs-sub{font:300 clamp(17px,2.2vw,21px)/1.55 var(--sans);color:var(--green-on-dark);max-width:52ch;margin:0 0 34px;text-wrap:pretty}
.cs-hero .cs-sub em{font-style:italic;color:var(--amber)}
.cs-hero .btn-primary{margin-top:6px}

/* ---------- Compte à rebours ---------- */
.countdown{display:flex;gap:clamp(8px,2vw,16px);margin:0 0 34px;flex-wrap:wrap}
.cd-cell{flex:1 1 0;min-width:66px;max-width:130px;background:rgba(252,248,239,.07);
  border:1px solid rgba(252,248,239,.16);border-radius:12px;padding:16px 8px;text-align:center}
.cd-num{font:900 clamp(30px,5vw,48px)/1 var(--serif);color:#fff;font-variant-numeric:tabular-nums;display:block}
.cd-lab{font:400 10.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--green-on-dark);margin-top:8px;display:block}
.cs-open-msg{display:none}
.cs-hero.is-open .countdown{display:none}
.cs-hero.is-open .cs-open-msg{display:block;font:700 clamp(26px,4vw,40px)/1.15 var(--serif);color:var(--amber);margin:0 0 26px}

/* ---------- Story ---------- */
.cs-story{background:var(--cream);padding:clamp(44px,7vw,80px) 0}
.cs-story .wrap{max-width:760px}
.cs-story .kicker{margin-bottom:16px}
.cs-story p{font:400 clamp(16px,2vw,18px)/1.7 var(--sans);color:var(--ink-3);margin:0 0 20px;max-width:65ch;text-wrap:pretty}
.cs-quote{margin:30px 0 0;padding:4px 0 4px 22px;border-left:4px solid var(--clay)}
.cs-quote em{font-style:italic;color:var(--clay);font-size:clamp(19px,2.6vw,24px);line-height:1.4;font-family:var(--serif)}
.cs-quote .sign{display:block;margin-top:12px;font:400 13px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-5)}

/* ---------- Carte preview ---------- */
.cs-carte{background:var(--card);padding:clamp(44px,7vw,80px) 0;border-top:1px solid var(--line)}
.cs-carte h2,.cs-infos h2,.cs-form h2{font:700 clamp(28px,4vw,40px)/1.1 var(--serif);color:var(--green);letter-spacing:-.01em;margin:0 0 6px}
.cs-carte .lead{font:400 15px/1.6 var(--sans);color:var(--ink-4);margin:0 0 28px}
.cs-menu{display:grid;grid-template-columns:1fr 1fr;gap:2px 40px}
.cs-dish{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:15px 0;border-bottom:1px solid var(--line)}
.cs-dish .n{font:600 16.5px/1.3 var(--sans);color:var(--ink-2)}
.cs-dish .n small{display:block;font:300 13.5px/1.45 var(--sans);color:var(--ink-4);margin-top:3px}
.cs-dish .p{font:700 15px/1 var(--sans);color:var(--green);white-space:nowrap}
.cs-carte .note{font:400 13px/1.5 var(--sans);color:var(--ink-5);margin-top:22px;font-style:italic}

/* ---------- Infos pratiques ---------- */
.cs-infos{background:var(--cream);padding:clamp(44px,7vw,80px) 0}
.cs-infos-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:22px;margin-top:24px}
.cs-info .lab{font:600 10.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--green-mid);margin-bottom:8px}
.cs-info .val{font:400 15.5px/1.55 var(--sans);color:var(--ink-2)}
.cs-info .val a{color:var(--green);text-decoration:underline}

/* ---------- Formulaire ---------- */
.cs-form{background:var(--vert-deep);color:var(--cream);padding:clamp(48px,7vw,88px) 0}
.cs-form .wrap{max-width:620px}
.cs-form h2{color:var(--cream)}
.cs-form .lead{font:300 16px/1.6 var(--sans);color:var(--green-on-dark);margin:0 0 28px;text-wrap:pretty}
.cs-field{margin-bottom:18px}
.cs-field label{display:block;font:600 13px/1.3 var(--sans);color:var(--cream);margin-bottom:7px}
.cs-field .opt{font-weight:400;color:var(--green-on-dark)}
.cs-input{width:100%;font:400 16px/1.3 var(--sans);color:var(--ink);background:var(--cream);
  border:1.5px solid transparent;border-radius:10px;padding:14px 15px;outline:none}
.cs-input:focus{border-color:var(--amber);box-shadow:0 0 0 3px rgba(212,167,98,.3)}
.cs-input.err{border-color:#F0A58C;box-shadow:0 0 0 3px rgba(214,90,52,.25)}
.cs-error{display:none;font:400 13px/1.4 var(--sans);color:#F2B8A5;margin-top:7px}
.cs-error.show{display:block}
.cs-row{display:flex;gap:14px}
.cs-row .cs-field{flex:1}
.cs-consent{display:flex;gap:12px;align-items:flex-start;margin:6px 0 6px}
.cs-consent input{margin-top:3px;width:20px;height:20px;flex:none;accent-color:var(--green-mid)}
.cs-consent label{font:400 13.5px/1.5 var(--sans);color:var(--green-on-dark)}
.cs-legal{font:400 12px/1.55 var(--sans);color:var(--green-faint);margin:14px 0 0}
.cs-legal a{color:var(--green-on-dark);text-decoration:underline}
.cs-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cs-form .btn-primary{width:100%;margin-top:20px;font-size:16.5px;padding:17px}
.cs-form .btn-primary[disabled]{opacity:.7;cursor:progress}
.cs-reassure{font:400 13px/1.4 var(--sans);color:var(--green-on-dark);text-align:center;margin-top:14px}
/* Succès / erreur */
.cs-success,.cs-fail{display:none}
.cs-success.show,.cs-fail.show{display:block;animation:obPop .25s ease}
.cs-success{background:rgba(143,178,94,.14);border:1px solid rgba(143,178,94,.5);border-radius:14px;padding:28px 26px;text-align:center}
.cs-success .ic{width:48px;height:48px;border-radius:50%;background:var(--green-mid);color:#fff;display:flex;align-items:center;justify-content:center;font-size:26px;margin:0 auto 16px}
.cs-success h3{font:400 24px/1.2 var(--serif);color:var(--cream);margin:0 0 10px}
.cs-success p{font:300 15px/1.6 var(--sans);color:var(--green-on-dark);margin:0}
.cs-fail{background:rgba(214,90,52,.12);border:1px solid rgba(214,90,52,.45);border-radius:12px;padding:18px 20px;color:#F2B8A5;font:400 14.5px/1.5 var(--sans);text-align:center}
.cs-fail a{color:#fff;text-decoration:underline}

@media (max-width:640px){
  .cs-menu{grid-template-columns:1fr;gap:0}
  .cs-row{flex-direction:column;gap:0}
}