/*
Theme Name: Mates Café
Theme URI: https://team14.digitol.online/
Author: Ulysse — Team 14 (Digitol)
Description: Thème one-page sur mesure pour le Mates Café à Saint-Gilles-Croix-de-Vie — café de spécialité, boutique, coworking & tatouage. Hub de vie premium et décontracté.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mates-cafe
*/

/* =========================================================
   DESIGN TOKENS — "Café & Côte"
   Palette : sable chaud, espresso, vert marin. Un seul accent
   fort (le vert marin) — clin d'œil au bord de mer vendéen.
   ========================================================= */
:root{
  --sand:      #E9E1D2;   /* fond sable chaud (bord de mer)      */
  --paper:     #EAE3D2;   /* cartes / surfaces claires (écume)   */
  --espresso:  #4F2B1D;   /* encre — brun quasi-noir             */
  --coffee:    #6B4A38;   /* brun café mi-teinte                 */
  --sea:       #14584A;   /* accent — vert marin premium         */
  --sea-deep:  #0E4239;   /* accent foncé (hover)                */
  --line:      rgba(36,28,23,.14);
  --muted:     rgba(36,28,23,.62);

  --font-display: "Cinzel", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "Space Mono", ui-monospace, monospace;

  --wrap: 1200px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius: 18px;
}

/* =========================================================
   RESET / BASE
   ========================================================= */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--sand);
  color:var(--espresso);
  font-family:var(--font-body);
  font-size:clamp(1rem,.96rem + .3vw,1.125rem);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family:var(--font-display); font-weight:800; line-height:.98; letter-spacing:-.02em; margin:0; }
p{ margin:0; }

.wrap{ width:min(100% - 2*var(--gutter), var(--wrap)); margin-inline:auto; }

/* Eyebrow / mono tag — signature typographique */
.tag{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--sea);
  display:inline-flex;
  align-items:center;
  gap:.6ch;
}
.tag::before{
  content:"";
  width:1.6rem; height:1px; background:var(--sea); display:inline-block;
}

/* Boutons */
.btn{
  --bg:var(--sea); --fg:var(--paper);
  display:inline-flex; align-items:center; gap:.6ch;
  font-family:var(--font-mono); font-size:.82rem; letter-spacing:.06em;
  text-transform:uppercase;
  background:var(--bg); color:var(--fg);
  padding:.95em 1.6em; border-radius:999px; border:1.5px solid var(--bg);
  cursor:pointer; transition:transform .18s ease, background .18s ease, color .18s ease;
  white-space:nowrap;
}
.btn:hover{ background:var(--sea-deep); border-color:var(--sea-deep); transform:translateY(-2px); }
.btn--ghost{ --bg:transparent; --fg:var(--espresso); border-color:var(--line); }
.btn--ghost:hover{ background:var(--espresso); border-color:var(--espresso); color:var(--paper); }
.btn--sm{ padding:.7em 1.2em; font-size:.74rem; }
.btn__arrow{ transition:transform .18s ease; }
.btn:hover .btn__arrow{ transform:translateX(3px); }

:focus-visible{ outline:3px solid var(--sea); outline-offset:3px; border-radius:4px; }

/* =========================================================
   HEADER / NAV
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--sand) 82%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{ display:flex; align-items:center; justify-content:space-between; height:76px; }
.brand{ display:flex; align-items:baseline; gap:.5ch; font-family:var(--font-display); font-weight:800; font-size:1.35rem; letter-spacing:-.02em; }
.brand .dot{ color:var(--sea); }
.nav-links{ display:flex; align-items:center; gap:2rem; list-style:none; margin:0; padding:0; }
.nav-links a{ font-size:.95rem; position:relative; }
.nav-links a::after{ content:""; position:absolute; left:0; bottom:-4px; height:2px; width:0; background:var(--sea); transition:width .2s ease; }
.nav-links a:hover::after{ width:100%; }
.nav-cta{ display:flex; align-items:center; gap:1.25rem; }
.nav-toggle{ display:none; background:none; border:0; cursor:pointer; padding:.4rem; }
.nav-toggle span{ display:block; width:26px; height:2px; background:var(--espresso); margin:5px 0; transition:.25s; }

/* =========================================================
   HERO
   ========================================================= */
.hero{ padding:clamp(3rem,7vw,6rem) 0 clamp(3.5rem,7vw,6.5rem); position:relative; overflow:hidden; }
.hero__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.hero__title{ font-size:clamp(2.9rem,7.5vw,6rem); margin:1.4rem 0 0; }
.hero__title .em{ color:var(--sea); }
.hero__title .city{ display:block; font-size:.62em; color:var(--coffee); font-weight:700; margin-top:.15em; }
.hero__sub{ max-width:46ch; margin-top:1.6rem; color:var(--muted); font-size:1.12rem; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.2rem; }
.hero__meta{ display:flex; gap:1.8rem; margin-top:2.6rem; flex-wrap:wrap; }
.hero__meta div{ font-family:var(--font-mono); font-size:.8rem; color:var(--muted); }
.hero__meta strong{ display:block; font-family:var(--font-body); font-size:1.05rem; color:var(--espresso); font-weight:600; }

/* Cadre photo + motif tache de café (signature) */
.frame{
  position:relative; border-radius:var(--radius); overflow:hidden;
  background:var(--paper); border:1px solid var(--line);
  aspect-ratio:4/5;
  display:grid; place-items:center;
}
.frame--wide{ aspect-ratio:5/4; }
.frame__ph{ display:flex; flex-direction:column; align-items:center; gap:1rem; color:var(--coffee); padding:2rem; text-align:center; }
.frame__ph svg{ width:70px; height:70px; opacity:.55; }
.frame__ph span{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.ring{ position:absolute; border-radius:50%; border:2px solid var(--sea); opacity:.16; pointer-events:none; }
.hero .ring--1{ width:220px; height:220px; right:-70px; top:-60px; }
.hero .ring--2{ width:120px; height:120px; left:-40px; bottom:40px; border-color:var(--coffee); }

/* =========================================================
   SECTION GENERIC
   ========================================================= */
.section{ padding:clamp(3.5rem,8vw,7rem) 0; }
.section--paper{ background:var(--paper); }
.section__head{ max-width:60ch; }
.section__title{ font-size:clamp(2rem,4.5vw,3.4rem); margin-top:1rem; }

/* Concept — deux colonnes */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.split__body p.lead{ margin-top:1.5rem; font-size:1.15rem; color:var(--espresso); }
.split__body .btn{ margin-top:2rem; }

/* Bandeau Brunch */
.brunch{ background:var(--espresso); color:var(--paper); border-radius:var(--radius); padding:clamp(2rem,5vw,3.5rem); margin-top:clamp(2rem,5vw,3.5rem); display:grid; grid-template-columns:1fr auto; gap:2rem; align-items:center; position:relative; overflow:hidden; }
.brunch .tag{ color:#E9C58A; }
.brunch .tag::before{ background:#E9C58A; }
.brunch h3{ font-size:clamp(1.5rem,3vw,2.2rem); margin-top:.8rem; }
.brunch p{ margin-top:1rem; color:rgba(246,242,233,.78); max-width:52ch; }
.brunch .btn{ --bg:#E9C58A; --fg:var(--espresso); border-color:#E9C58A; }
.brunch .btn:hover{ --bg:#f2d3a1; border-color:#f2d3a1; }
.brunch .ring{ width:260px; height:260px; right:-90px; bottom:-110px; border-color:#E9C58A; opacity:.22; }

/* Tiers-lieu — cartes */
.cards{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,3vw,2.5rem); margin-top:clamp(2.5rem,5vw,3.5rem); }
.card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; transition:transform .2s ease, box-shadow .2s ease; }
.card:hover{ transform:translateY(-4px); box-shadow:0 18px 40px -24px rgba(36,28,23,.5); }
.card__img{ aspect-ratio:16/10; border-bottom:1px solid var(--line); }
.card__body{ padding:clamp(1.5rem,3vw,2.2rem); display:flex; flex-direction:column; gap:.9rem; flex:1; }
.card__body h3{ font-size:1.6rem; }
.card__body p{ color:var(--muted); }
.card__body .btn{ margin-top:auto; align-self:flex-start; }

/* BtoB */
.btob{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.btob__list{ list-style:none; margin:1.8rem 0 0; padding:0; display:grid; gap:1.1rem; }
.btob__list li{ display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:start; padding-bottom:1.1rem; border-bottom:1px solid var(--line); }
.btob__list li:last-child{ border-bottom:0; }
.btob__list .n{ font-family:var(--font-mono); color:var(--sea); font-size:.9rem; font-weight:700; padding-top:.15rem; }
.btob__list strong{ display:block; font-size:1.08rem; }
.btob__list span{ color:var(--muted); font-size:.98rem; }
.btob__card{ background:var(--sea); color:var(--paper); border-radius:var(--radius); padding:clamp(2rem,4vw,3rem); position:relative; overflow:hidden; }
.btob__card h3{ font-size:clamp(1.6rem,3vw,2.3rem); }
.btob__card p{ margin-top:1rem; color:rgba(246,242,233,.82); }
.btob__card .btn{ --bg:var(--paper); --fg:var(--sea-deep); border-color:var(--paper); margin-top:2rem; }
.btob__card .btn:hover{ --bg:#fff; border-color:#fff; }
.btob__card .ring{ width:200px; height:200px; right:-70px; top:-70px; border-color:var(--paper); opacity:.25; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ background:var(--espresso); color:rgba(246,242,233,.8); padding:clamp(3rem,6vw,5rem) 0 2rem; }
.footer__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2.5rem; }
.footer__brand .brand{ color:var(--paper); font-size:1.5rem; }
.footer__brand p{ margin-top:1rem; max-width:34ch; font-size:.95rem; }
.footer__col h4{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:#E9C58A; margin:0 0 1rem; }
.footer__col a, .footer__col p{ display:block; font-size:.95rem; margin-bottom:.5rem; color:rgba(246,242,233,.8); }
.footer__col a:hover{ color:var(--paper); }
.footer__note{ opacity:.6; font-style:italic; }
.footer__bottom{ margin-top:3rem; padding-top:1.5rem; border-top:1px solid rgba(246,242,233,.16); display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; font-family:var(--font-mono); font-size:.75rem; letter-spacing:.04em; color:rgba(246,242,233,.6); }

/* Placeholder editable hint */
.edit-hint{ color:#E9C58A; font-style:italic; }

/* Reveal on scroll */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 900px){
  .nav-links, .nav-cta .btn{ display:none; }
  .nav-toggle{ display:block; }
  .nav[data-open="true"] + .nav-mobile{ display:flex; }
  .hero__grid, .split, .btob, .cards, .brunch, .footer__grid{ grid-template-columns:1fr; }
  .brunch{ text-align:left; }
  .hero__grid .frame{ order:-1; }
  .footer__grid{ gap:2rem; }
}
@media (max-width: 560px){
  .footer__grid{ grid-template-columns:1fr 1fr; }
  .hero__meta{ gap:1.2rem; }
}

/* Menu mobile */
.nav-mobile{ display:none; flex-direction:column; gap:.25rem; padding:1rem 0 1.5rem; border-top:1px solid var(--line); }
.nav-mobile a{ padding:.7rem 0; font-family:var(--font-mono); font-size:.9rem; text-transform:uppercase; letter-spacing:.06em; border-bottom:1px solid var(--line); }
.nav-mobile .btn{ margin-top:1rem; justify-content:center; }