/*
Theme Name: Gravelle 2026
Author: Jérôme Denis
Description: Thème custom du site La Gravelle — gîte et camping à la ferme à Mortagne-sur-Gironde.
Version: 0.2.0
Requires PHP: 8.1
Text Domain: gravelle-2026
*/

:root{
  /* ——— Palette « estuaire & prairie » ——— */
  --vert-pre:#3e5c3a;
  --vert-sauge:#7d9b76;
  --creme:#faf6ee;
  --ecru:#f1e9da;
  --terracotta:#c26d45;
  --bleu-estuaire:#5b7f95;
  --encre:#2c2a25;

  --titre:'Fraunces',Georgia,serif;
  --texte:'Public Sans',system-ui,sans-serif;
  --radius:14px;
  --ombre:0 6px 24px rgba(44,42,37,.08);
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--texte);color:var(--encre);background:var(--creme);line-height:1.65;font-size:16.5px}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{font-family:var(--titre);color:var(--vert-pre);line-height:1.15}
a{color:var(--terracotta)}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
section{padding:72px 0}
.kicker{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--terracotta);margin-bottom:10px}
h2{font-size:clamp(1.7rem,3.5vw,2.4rem);margin-bottom:18px}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Placeholder photo (tant que les vraies photos ne sont pas en place) */
.ph{background:linear-gradient(135deg,var(--vert-sauge),var(--bleu-estuaire));display:flex;align-items:center;justify-content:center;color:#fff;font-size:.85rem;font-weight:600;letter-spacing:.05em;text-align:center;padding:12px}
.photo{object-fit:cover;width:100%;height:100%}

/* ——— Bandeau annonce ——— */
.annonce{background:var(--vert-pre);color:#fff;text-align:center;font-size:.88rem;padding:9px 16px}
.annonce strong{color:#f3d9a4}

/* ——— Header ——— */
.site-header{position:sticky;top:0;z-index:50;background:rgba(250,246,238,.95);backdrop-filter:blur(6px);border-bottom:1px solid var(--ecru)}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px;gap:18px}
.logo{font-family:var(--titre);font-weight:700;font-size:1.35rem;color:var(--vert-pre);text-decoration:none;line-height:1.25}
.logo small{display:block;font-family:var(--texte);font-weight:500;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--vert-sauge)}
.nav-menu ul{display:flex;gap:26px;list-style:none}
.nav-menu a{color:var(--encre);text-decoration:none;font-weight:500;font-size:.95rem}
.nav-menu a:hover{color:var(--terracotta)}
.nav-menu .sub-menu{display:none;position:absolute;background:#fff;box-shadow:var(--ombre);border-radius:10px;padding:10px 16px;flex-direction:column;gap:8px;min-width:200px}
.nav-menu li{position:relative}
.nav-menu li:hover > .sub-menu,.nav-menu li:focus-within > .sub-menu{display:flex}
.btn{display:inline-block;background:var(--terracotta);color:#fff;text-decoration:none;font-weight:600;padding:12px 26px;border-radius:999px;transition:filter .15s;border:none;cursor:pointer;font-size:1rem}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;border:2px solid #fff;color:#fff}
.nav-toggle{display:none;background:none;border:none;font-size:1.7rem;color:var(--vert-pre);cursor:pointer}

/* ——— Hero ——— */
.hero{position:relative;min-height:78vh;display:flex;align-items:center;color:#fff;background:linear-gradient(rgba(44,60,40,.45),rgba(44,60,40,.55)),linear-gradient(120deg,#4a6b45,#5b7f95);background-size:cover;background-position:center;padding:90px 0}
.hero-inner{max-width:720px}
.hero .kicker{color:#f3d9a4}
.hero h1{color:#fff;font-size:clamp(2.2rem,5.5vw,3.6rem);margin-bottom:18px}
.hero p{font-size:1.15rem;max-width:560px;margin-bottom:30px}
.hero .actions{display:flex;gap:14px;flex-wrap:wrap}

/* ——— Badges de confiance ——— */
.badges{background:var(--ecru);padding:26px 0}
.badges .wrap{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;align-items:center}
.badge{display:flex;align-items:center;gap:10px;font-size:.92rem;font-weight:700;color:var(--encre);background:#fff;border:1px solid rgba(62,92,58,.18);border-radius:999px;padding:8px 18px 8px 8px;box-shadow:var(--ombre)}
.badge .dot{width:38px;height:38px;border-radius:50%;background:var(--creme);border:2px solid var(--terracotta);display:flex;align-items:center;justify-content:center;font-size:1.15rem}

/* ——— Cartes hébergements ——— */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:26px;margin-top:36px}
.card{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--ombre);display:flex;flex-direction:column}
.card .ph,.card .card-img{height:190px;overflow:hidden}
.card-body{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1}
.card h3{font-size:1.25rem;margin-bottom:8px}
.card p{font-size:.95rem;flex:1}
.prix{margin:14px 0 4px;font-weight:700;color:var(--terracotta)}
.prix small{font-weight:500;color:var(--encre);opacity:.7}
.card a.lien{font-weight:600;text-decoration:none}

/* ——— Sections alternées ——— */
.ferme{background:var(--ecru)}
.split{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center}
.split .ph,.split .split-img{height:380px;border-radius:var(--radius);overflow:hidden}
.liste-ferme{list-style:none;margin-top:18px}
.liste-ferme li{padding:10px 0 10px 34px;position:relative;border-bottom:1px dashed var(--vert-sauge)}
.liste-ferme li::before{content:"✦";position:absolute;left:6px;color:var(--terracotta)}
.table-paysanne .split .ph,.table-paysanne .split .split-img{height:320px}
.citation{font-family:var(--titre);font-size:1.5rem;color:var(--vert-pre);margin:14px 0}

/* ——— Infos pratiques ——— */
.infos{background:var(--vert-pre);color:#fff}
.infos h2,.infos h3{color:#fff}
.infos .kicker{color:#f3d9a4}
.grille-infos{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:26px;margin-top:30px}
.info-bloc{background:rgba(255,255,255,.08);border-radius:var(--radius);padding:20px}
.info-bloc h3{font-size:1.1rem;margin-bottom:10px}
.info-bloc p{font-size:.93rem;opacity:.92}
.gps{margin-top:34px;background:#f3d9a4;color:var(--encre);border-radius:var(--radius);padding:22px 26px;font-size:.98rem}
.gps strong{color:var(--vert-pre)}

/* ——— Contact ——— */
.contact .info-bloc{background:#fff;box-shadow:var(--ombre)}
.contact .info-bloc h3{color:var(--vert-pre)}
.contact .info-bloc p{opacity:1}
.contact a{font-weight:600}

/* ——— Footer ——— */
.site-footer{background:#2c3a29;color:#cfd8c8;padding:54px 0 30px;font-size:.9rem}
.site-footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:36px}
.site-footer h4{color:#fff;margin-bottom:12px}
.site-footer ul{list-style:none}
.site-footer li{margin-bottom:7px}
.site-footer a{color:#cfd8c8;text-decoration:none}
.site-footer a:hover{color:#f3d9a4}
.copy{margin-top:40px;padding-top:18px;border-top:1px solid rgba(255,255,255,.15);text-align:center;font-size:.8rem;opacity:.7}

/* ——— Pages intérieures & articles ——— */
.page-hero{background:var(--vert-pre);color:#fff;padding:64px 0 48px}
.page-hero h1{color:#fff;font-size:clamp(1.9rem,4vw,2.8rem)}
.page-hero .kicker{color:#f3d9a4}
.contenu{padding:56px 0}
.entry-content{max-width:760px}
.entry-content h2,.entry-content h3{margin:1.6em 0 .5em}
.entry-content p,.entry-content ul,.entry-content ol{margin-bottom:1.1em}
.entry-content ul,.entry-content ol{padding-left:1.4em}
.entry-content img{border-radius:var(--radius)}
.entry-content blockquote{border-left:4px solid var(--vert-sauge);padding-left:18px;font-style:italic;margin:1.4em 0}
.entry-content table{border-collapse:collapse;width:100%;margin:1.4em 0}
.entry-content th,.entry-content td{border:1px solid var(--ecru);padding:10px 14px;text-align:left}
.entry-content th{background:var(--ecru);font-family:var(--titre);color:var(--vert-pre)}
article.liste-article{background:#fff;border-radius:var(--radius);box-shadow:var(--ombre);padding:28px 32px;margin-bottom:26px}
article.liste-article h2{font-size:1.4rem;margin-bottom:8px}
article.liste-article h2 a{text-decoration:none;color:var(--vert-pre)}
.pagination{margin-top:30px}
.wp-block-image img{border-radius:var(--radius)}
.aligncenter{margin-left:auto;margin-right:auto}

/* ——— Responsive ——— */
@media(max-width:860px){
  .nav-toggle{display:block}
  .nav-menu{display:none;position:absolute;top:74px;left:0;right:0;background:var(--creme);border-bottom:1px solid var(--ecru);padding:18px 24px}
  .nav-menu.ouvert{display:block}
  .nav-menu ul{flex-direction:column;gap:14px}
  .nav-menu .sub-menu{display:flex;position:static;box-shadow:none;background:transparent;padding:6px 0 0 16px}
  .split{grid-template-columns:1fr}
  .split .ph,.split .split-img{height:260px}
  .site-footer .cols{grid-template-columns:1fr 1fr}
  section{padding:52px 0}
}