/* ============================================================================
   LA TANIÈRE — feuille de style partagée (toutes les pages)
   Boutique de jeux de société & TCG — identité volontairement sombre
   ("soirée jeu" plutôt que thème clair/sombre automatique).
   Pour reskinner : modifiez le bloc de variables ":root" ci-dessous.
   ============================================================================ */

:root{
  /* --- palette (identité fixe, volontairement sombre) --- */
  --bg:          #17140F;
  --bg-alt:      #1F1A13;
  --surface:     #241F17;
  --surface-2:   #2B2419;
  --ink:         #EDE6D8;
  --ink-soft:    #AFA48D;
  --line:        #3A3220;
  --accent:      #4C8A63;   /* vert feutre — couleur de marque */
  --accent-deep: #2C5A3E;
  --accent-on:   #F5F1E4;
  --gold:        #D6A64B;   /* laiton — badges, prix, highlights */
  --danger:      #C0604A;
  --shadow:      0 24px 48px -28px rgba(0,0,0,0.7);

  --font-display: "Fredoka", "Segoe UI", sans-serif;
  --font-body:    "Work Sans", -apple-system, "Segoe UI", sans-serif;

  --text-xs:  0.75rem;
  --text-sm:  0.875rem;
  --text-base:1rem;
  --text-lg:  1.15rem;
  --text-xl:  clamp(1.3rem, 1.1rem + 0.8vw, 1.6rem);
  --text-2xl: clamp(1.7rem, 1.4rem + 1.4vw, 2.3rem);
  --text-3xl: clamp(2.1rem, 1.6rem + 2.2vw, 3rem);
  --text-4xl: clamp(2.6rem, 1.8rem + 3.6vw, 4.2rem);

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.25rem;
  --space-5: 3.5rem;
  --space-6: 5rem;

  --radius-sm: 4px;
  --radius-md: 8px;
  --maxw: 1180px;
}

/* ============================= RESET ============================= */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; color-scheme: dark; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:var(--text-base); line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3{ font-family:var(--font-display); text-wrap:balance; margin:0; font-weight:600; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
button{ font:inherit; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--space-4); }
@media (max-width:640px){ .wrap{ padding-inline:var(--space-3); } }

.eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-weight:600; font-size:var(--text-xs); letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); margin-bottom:var(--space-2);
}
.eyebrow::before{ content:""; width:1.4em; height:2px; background:var(--gold); }

.btn{
  display:inline-flex; align-items:center; gap:.6em;
  padding:.85em 1.5em; border-radius:var(--radius-sm);
  font-family:var(--font-display); font-weight:600; font-size:var(--text-sm);
  text-decoration:none; cursor:pointer; border:1px solid transparent;
  transition:transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn-primary{ background:var(--accent); color:var(--accent-on); }
.btn-primary:hover{ background:var(--accent-deep); transform:translateY(-2px); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold); transform:translateY(-2px); }
.btn-small{ padding:.5em 1em; font-size:var(--text-xs); }
.btn-danger{ background:transparent; color:var(--danger); border-color:var(--danger); }
.btn-danger:hover{ background:var(--danger); color:var(--accent-on); }
.btn[disabled]{ opacity:.5; cursor:not-allowed; transform:none !important; }

.icon{ width:20px; height:20px; flex:none; }

.photo{
  position:relative; border-radius:var(--radius-md); overflow:hidden;
  background:linear-gradient(160deg, var(--surface-2) 0%, var(--bg) 100%);
  aspect-ratio: var(--ar, 4/5);
}
.photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }

html.js .reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
html.js .reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ html.js .reveal{ opacity:1; transform:none; transition:none; } }

/* ============================= HEADER ============================= */
header{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease, box-shadow .25s ease;
}
header.scrolled{ border-color:var(--line); box-shadow:0 8px 24px -20px rgba(0,0,0,.6); }
.nav{ display:flex; align-items:center; justify-content:space-between; padding-block:var(--space-2); gap:var(--space-3); }
.logo{ font-family:var(--font-display); font-size:var(--text-xl); font-weight:600; text-decoration:none; display:flex; align-items:center; gap:.5em; }
.logo em{ font-style:normal; color:var(--gold); }
.nav-links{ display:flex; align-items:center; gap:var(--space-4); }
.nav-links a{ text-decoration:none; font-size:var(--text-sm); font-weight:600; color:var(--ink-soft); transition:color .15s ease; }
.nav-links a:hover, .nav-links a[aria-current="page"]{ color:var(--accent); }
.nav-actions{ display:flex; align-items:center; gap:var(--space-2); }
.burger{ display:none; background:none; border:none; padding:.4em; cursor:pointer; color:var(--ink); }
.admin-pill{
  display:inline-flex; align-items:center; gap:.5em; font-size:var(--text-xs); font-weight:600;
  padding:.4em .9em; border-radius:999px; border:1px solid var(--line); color:var(--ink-soft);
  background:transparent; cursor:pointer; white-space:nowrap;
}
.admin-pill:hover{ border-color:var(--gold); color:var(--gold); }
.admin-pill.is-active{ border-color:var(--accent); color:var(--accent); background:color-mix(in srgb, var(--accent) 14%, transparent); }
.admin-pill .dot{ width:7px; height:7px; border-radius:50%; background:var(--ink-soft); }
.admin-pill.is-active .dot{ background:var(--accent); }

@media (max-width:900px){
  .nav-links{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:flex-start; gap:0;
    background:var(--bg); border-bottom:1px solid var(--line);
    padding:var(--space-2) var(--space-3);
    transform-origin:top; transform:scaleY(0); opacity:0; pointer-events:none;
    transition:transform .2s ease, opacity .2s ease;
  }
  .nav-links a{ padding:.8em 0; width:100%; border-bottom:1px solid var(--line); }
  .nav-links a:last-child{ border-bottom:none; }
  .nav-links.open{ transform:scaleY(1); opacity:1; pointer-events:auto; }
  .nav-actions .btn-primary{ display:none; }
  .burger{ display:inline-flex; }
}

/* ============================= HERO ============================= */
.hero{ padding-block:var(--space-6); }
.hero .wrap{ display:grid; grid-template-columns:1.05fr .95fr; gap:var(--space-6); align-items:center; }
.hero h1{ font-size:var(--text-4xl); line-height:1.05; margin-block:var(--space-3); }
.hero p.lead{ font-size:var(--text-lg); color:var(--ink-soft); max-width:46ch; }
.hero .cta-row{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-4); }
.hero-art{ --ar:4/5; }
@media (max-width:900px){ .hero .wrap{ grid-template-columns:1fr; } .hero-art{ --ar:16/9; order:-1; } }

.page-hero{ padding-block:var(--space-6) var(--space-5); }
.page-hero .wrap{ display:flex; justify-content:space-between; align-items:flex-end; gap:var(--space-3); flex-wrap:wrap; }
.page-hero h1{ font-size:var(--text-3xl); margin-top:var(--space-2); }
.page-hero p{ color:var(--ink-soft); font-size:var(--text-lg); max-width:60ch; margin-top:var(--space-2); }

/* ============================= SECTIONS ============================= */
section{ padding-block:var(--space-6); }
.alt{ background:var(--bg-alt); }
.section-head{ max-width:60ch; margin-bottom:var(--space-5); }
.section-head h2{ font-size:var(--text-3xl); }
.section-head p{ color:var(--ink-soft); margin-top:var(--space-2); font-size:var(--text-lg); }
.section-foot{ display:flex; justify-content:center; margin-top:var(--space-5); }

.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-3); }
@media (max-width:860px){ .grid-3{ grid-template-columns:1fr; } }

.card{ display:flex; flex-direction:column; gap:var(--space-2); }
.card .photo{ --ar:4/3; }
.card h3{ font-size:var(--text-lg); }
.card p{ color:var(--ink-soft); font-size:var(--text-sm); }
.card a.more{ font-size:var(--text-sm); font-weight:600; color:var(--accent); text-decoration:none; margin-top:auto; }
.card a.more:hover{ color:var(--gold); }

.tag{
  display:inline-flex; align-items:center; font-size:var(--text-xs); font-weight:700;
  padding:.3em .7em; border-radius:999px; letter-spacing:.03em; text-transform:uppercase;
  background:color-mix(in srgb, var(--accent) 20%, transparent); color:var(--accent);
}
.tag[data-tag="tcg"]{ background:color-mix(in srgb, var(--gold) 22%, transparent); color:var(--gold); }
.tag[data-tag="jdr"]{ background:color-mix(in srgb, #7C6FC9 25%, transparent); color:#B7ACEF; }
.tag[data-tag="special"]{ background:color-mix(in srgb, var(--danger) 22%, transparent); color:#E29684; }

/* ============================= COMMUNAUTÉ (photo pleine largeur) ============================= */
.feature-split{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-6); align-items:center; }
.feature-split .photo{ --ar:4/3; }
@media (max-width:900px){ .feature-split{ grid-template-columns:1fr; } .feature-split .photo{ order:-1; --ar:16/9; } }
.feature-list{ display:flex; flex-direction:column; gap:var(--space-3); margin-top:var(--space-4); }
.feature-list li{ display:flex; gap:var(--space-2); align-items:flex-start; }
.feature-list .icon{ color:var(--gold); margin-top:.15em; }
.feature-list b{ display:block; font-size:var(--text-sm); }
.feature-list span{ font-size:var(--text-sm); color:var(--ink-soft); }

/* ============================= PLANNING ============================= */
.agenda{ display:flex; flex-direction:column; gap:var(--space-2); margin-bottom:var(--space-4); }
.agenda-day{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:var(--space-3);
}
.agenda-day.is-today{ border-color:var(--gold); }
.agenda-day-head{ margin-bottom:var(--space-2); }
.agenda-day-head h3{
  font-family:var(--font-display); font-size:var(--text-sm); font-weight:600;
  margin:0; color:var(--ink);
}
.agenda-day.is-today .agenda-day-head h3{ color:var(--gold); }
.agenda-events{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:var(--space-2); }
.agenda-section-heading{
  font-size:var(--text-sm); text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft);
  margin:var(--space-4) 0 var(--space-2);
}
.event-card{
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:var(--space-2); display:flex; flex-direction:column; gap:.4em;
}
.event-card time{ font-size:var(--text-xs); color:var(--gold); font-weight:700; font-variant-numeric:tabular-nums; }
.event-card h4{ font-family:var(--font-display); font-size:var(--text-sm); font-weight:600; margin:0; }
.event-card p{ font-size:var(--text-xs); color:var(--ink-soft); }
.event-empty{ font-size:var(--text-xs); color:var(--ink-soft); opacity:.6; padding:var(--space-2) 0; text-align:center; }
.event-admin-row{ display:flex; gap:.4em; margin-top:.2em; }
.event-admin-row button{ flex:1; }

.featured-event{
  display:flex; justify-content:space-between; align-items:center; gap:var(--space-3);
  background:linear-gradient(120deg, var(--accent-deep), var(--surface));
  border:1px solid var(--line); border-radius:var(--radius-md); padding:var(--space-4);
  margin-bottom:var(--space-5); flex-wrap:wrap;
}
.featured-event h3{ font-size:var(--text-xl); }
.featured-event p{ color:var(--ink-soft); margin-top:.3em; }

/* ============================= ANNONCES ============================= */
.posts{ display:flex; flex-direction:column; gap:var(--space-4); max-width:760px; margin-inline:auto; }
.post{
  display:grid; grid-template-columns:220px 1fr; gap:var(--space-3);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
  overflow:hidden;
}
.post .photo{ --ar:1/1; border-radius:0; }
.post-body{ padding:var(--space-3) var(--space-3) var(--space-3) 0; display:flex; flex-direction:column; gap:.5em; }
.post-body time{ font-size:var(--text-xs); color:var(--ink-soft); text-transform:uppercase; letter-spacing:.05em; }
.post-body h3{ font-size:var(--text-lg); }
.post-body p.text{ color:var(--ink-soft); font-size:var(--text-sm); white-space:pre-line; }
.post-admin-row{ display:flex; gap:.5em; margin-top:.3em; }
@media (max-width:640px){
  .post{ grid-template-columns:1fr; }
  .post .photo{ --ar:16/9; }
  .post-body{ padding:var(--space-3); }
}

/* ============================= MODALE (connexion / formulaires) ============================= */
.modal-overlay{
  position:fixed; inset:0; z-index:200; padding:var(--space-3);
  background:rgba(10,9,6,0.75); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center;
}
.modal-overlay[hidden]{ display:none; }
.modal{
  position:relative; width:100%; max-width:480px; max-height:88vh; overflow:auto;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); box-shadow:var(--shadow);
  padding:var(--space-4);
}
.modal h2{ font-size:var(--text-xl); margin-bottom:var(--space-1); }
.modal p.modal-note{ color:var(--ink-soft); font-size:var(--text-sm); margin-bottom:var(--space-3); }
.radio-label{
  display:flex; align-items:flex-start; gap:.6em; font-size:var(--text-sm); color:var(--ink);
  cursor:pointer; margin-bottom:.5em;
}
.radio-label input{ margin-top:.2em; }
.modal-close{
  position:absolute; top:var(--space-2); right:var(--space-2);
  width:34px; height:34px; border-radius:50%; border:1px solid var(--line);
  background:var(--surface-2); color:var(--ink); cursor:pointer; font-size:1.1rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.modal-close:hover{ border-color:var(--gold); color:var(--gold); }
.modal-actions{ display:flex; gap:var(--space-2); margin-top:var(--space-3); justify-content:flex-end; }
.modal-error{ color:var(--danger); font-size:var(--text-sm); margin-top:var(--space-2); display:none; }
.modal-error.show{ display:block; }

form.stack{ display:flex; flex-direction:column; gap:var(--space-2); }
.field{ display:flex; flex-direction:column; gap:.35em; }
.field label{ font-size:var(--text-xs); font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft); }
.field input, .field select, .field textarea{
  font:inherit; padding:.75em .85em; border-radius:var(--radius-sm);
  border:1px solid var(--line); background:var(--surface-2); color:var(--ink);
}
.field textarea{ resize:vertical; min-height:90px; }
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--accent); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-2); }
.field-preview{ margin-top:.5em; border-radius:var(--radius-sm); overflow:hidden; border:1px solid var(--line); display:none; }
.field-preview.show{ display:block; }
.field-preview img{ width:100%; max-height:180px; object-fit:cover; display:block; }

/* ============================= AVIS ============================= */
.quote-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:var(--space-4); display:flex; flex-direction:column; gap:var(--space-3);
}
.stars{ color:var(--gold); letter-spacing:.1em; }
.who{ display:flex; align-items:center; gap:var(--space-2); margin-top:auto; }
.avatar{
  width:38px; height:38px; border-radius:50%; flex:none;
  background:var(--accent); color:var(--accent-on);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:600; font-size:var(--text-sm);
}
.who b{ display:block; font-size:var(--text-sm); }
.who span{ font-size:var(--text-xs); color:var(--ink-soft); }

/* ============================= CONTACT ============================= */
.contact{ display:grid; grid-template-columns:.9fr 1.1fr; gap:var(--space-6); }
@media (max-width:900px){ .contact{ grid-template-columns:1fr; } }
.info-block{ display:flex; gap:var(--space-2); margin-bottom:var(--space-4); align-items:flex-start; }
.info-block .icon{ color:var(--gold); margin-top:.2em; }
.info-block b{ display:block; font-size:var(--text-sm); }
.info-block span, .info-block a{ font-size:var(--text-sm); color:var(--ink-soft); text-decoration:none; }
table.hours{ border-collapse:collapse; font-size:var(--text-sm); font-variant-numeric:tabular-nums; }
table.hours td{ padding:.35em 1.2em .35em 0; color:var(--ink-soft); }
table.hours td:last-child{ padding-right:0; color:var(--ink); font-weight:500; }
.social-row{ display:flex; gap:var(--space-2); margin-top:var(--space-4); }
.social-row a{ width:38px; height:38px; border:1px solid var(--line); border-radius:50%; display:flex; align-items:center; justify-content:center; text-decoration:none; transition:border-color .15s ease, color .15s ease; }
.social-row a:hover{ border-color:var(--gold); color:var(--gold); }

/* ============================= FOOTER ============================= */
footer{ background:var(--bg-alt); border-top:1px solid var(--line); padding-block:var(--space-5) var(--space-3); }
footer .wrap{ display:flex; flex-direction:column; gap:var(--space-4); }
footer .foot-top{ display:flex; justify-content:space-between; gap:var(--space-4); flex-wrap:wrap; }
footer nav{ display:flex; gap:var(--space-4); flex-wrap:wrap; }
footer nav a{ text-decoration:none; color:var(--ink-soft); font-size:var(--text-sm); }
footer nav a:hover{ color:var(--gold); }
.foot-bottom{ display:flex; justify-content:space-between; gap:var(--space-2); flex-wrap:wrap; border-top:1px solid var(--line); padding-top:var(--space-3); font-size:var(--text-xs); color:var(--ink-soft); }
.foot-bottom a{ text-decoration:underline; }

/* ============================= BANDEAU DÉMO ============================= */
/* ============================= BANDEAU DÉMO (galerie mktemplate.fr) =============================
   Bandeau commun à tous les templates de la galerie, pour qu'un client qui
   navigue d'un modèle à l'autre s'y retrouve toujours. Couleurs volontairement
   neutres (pas les tokens du template) pour rester identique sur tous les
   modèles, quel que soit leur thème.
   ⚠️ À SUPPRIMER avant de livrer ce site en production à un vrai client :
   retirez le <div class="demo-banner">...</div> en haut de chaque page HTML,
   et ce bloc CSS n'aura alors plus d'effet. */
.demo-banner{
  background:#1F1B18; color:#F4EDE7; font-size:.8rem; font-weight:600;
  padding:.6em 1.2em; display:flex; align-items:center; justify-content:center;
  gap:1.2em; flex-wrap:wrap; text-align:center;
}
.demo-banner-back{
  color:#D6A64B; text-decoration:none; font-weight:700; white-space:nowrap;
  border-right:1px solid rgba(244,237,231,.25); padding-right:1.2em;
}
.demo-banner-back:hover{ text-decoration:underline; }
.demo-banner-tarifs{
  color:#D6A64B; text-decoration:none; font-weight:700; white-space:nowrap;
  border-right:1px solid rgba(244,237,231,.25); padding-right:1.2em;
}
.demo-banner-tarifs:hover{ text-decoration:underline; }
.demo-banner-text{ color:#F4EDE7; }
.demo-banner-text strong{ color:#D6A64B; }
@media (max-width:600px){
  .demo-banner-back, .demo-banner-tarifs{ border-right:none; padding-right:0; }
}