/* =========================================================
   BILLETTERIE — Théâtre Municipal de Domfront-en-Poiraie
   Thème CLAIR : papier chaud + or, accent par spectacle
   ========================================================= */

*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

:root{
  --bg-top:#faf6ee;
  --bg-bot:#f1e9db;
  --card:#fffdf9;
  --panel:#fbf7ef;
  --line:rgba(43,32,24,.12);

  --ink:#2b2018;
  --muted:#7c6e5f;

  --gold:#b8860b;
  --gold-soft:#caa12f;

  /* accent par défaut (or) — surchargé par les classes .theme-* */
  --accent:#b8860b;
  --accent-soft:#9c6f0a;
  --accent-tint:#f7eed8;

  --shadow:0 10px 30px rgba(43,32,24,.08);
  --shadow-lg:0 18px 44px rgba(43,32,24,.16);
  --radius:18px;
}

/* ---- Thèmes : posés sur <body> OU sur une carte ---- */
.theme-navire{ --accent:#0e7d9c; --accent-soft:#0a6175; --accent-tint:#e3f4f9; }
.theme-sucre { --accent:#c63a68; --accent-soft:#a42b54; --accent-tint:#fbe6ee; }
.theme-pilote{ --accent:#c2861e; --accent-soft:#9b6a14; --accent-tint:#fbefd6; }
.theme-trio  { --accent:#a8392c; --accent-soft:#8a2d22; --accent-tint:#f7e2dd; }

body{
  font-family:'DM Sans',system-ui,-apple-system,sans-serif;
  color:var(--ink);
  min-height:100vh;
  display:flex; flex-direction:column;
  background:
    radial-gradient(1100px 540px at 50% -12%, var(--accent-tint), transparent 62%),
    linear-gradient(180deg, var(--bg-top), var(--bg-bot));
  background-attachment:fixed;
}
img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
::selection{ background:var(--accent); color:#fff; }

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:relative; text-align:center; padding:52px 20px 44px;
  background:linear-gradient(180deg, #fbf7ef, transparent 92%);
  border-bottom:1px solid var(--line);
}
.site-header::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent); opacity:.7;
}
.header-inner{ max-width:760px; margin:0 auto; display:flex; flex-direction:column; align-items:center; gap:9px; }
.header-logo{
  width:74px; height:74px; border-radius:50%; background:#fff; padding:12px; object-fit:contain;
  border:2px solid var(--gold);
  box-shadow:0 8px 24px rgba(43,32,24,.14), 0 0 0 6px rgba(184,134,11,.10);
}
.theatre-name{ font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.22em; font-size:.78rem; color:var(--gold); }
.site-title{ font-family:'Playfair Display',serif; font-weight:900; font-size:clamp(2.1rem,6vw,3.3rem); line-height:1.05; color:var(--ink); margin-top:2px; }
.site-title::after{ content:""; display:block; width:70px; height:3px; border-radius:10px; background:var(--gold); margin:14px auto 0; }
.site-sub{ color:var(--muted); max-width:520px; line-height:1.5; }
.org-name{ font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; color:var(--muted); margin-top:2px; }

/* =========================================================
   ZONE PRINCIPALE
   ========================================================= */
.main-wrap{ width:100%; max-width:1300px; margin:0 auto; padding:36px 20px; flex:1; }
.shows-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(248px,1fr)); gap:22px; }

/* =========================================================
   CARTE SPECTACLE
   ========================================================= */
.show-card{
  position:relative; overflow:hidden; border-radius:var(--radius);
  background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.show-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px; z-index:2;
  background:linear-gradient(90deg, var(--accent), var(--accent-soft));
}
.show-card:hover{ transform:translateY(-6px); border-color:var(--accent); box-shadow:var(--shadow-lg); }
.card-link{ display:flex; flex-direction:column; height:100%; }

.card-media{ aspect-ratio:4/5; overflow:hidden; background:#ece4d6; }
.card-media img{ width:100%; height:100%; object-fit:cover; transition:transform .45s ease; }
.show-card:hover .card-media img{ transform:scale(1.05); }

.card-media-trio{ display:grid; grid-template-columns:repeat(3,1fr); gap:3px; aspect-ratio:4/5; background:#ece4d6; }
.card-media-trio img{ width:100%; height:100%; object-fit:cover; }

.card-body{ padding:18px 18px 20px; display:flex; flex-direction:column; gap:8px; flex:1; }
.card-kicker{ font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.16em; font-size:.7rem; color:var(--accent); }
.show-title{ font-family:'Playfair Display',serif; font-weight:700; font-size:1.5rem; line-height:1.12; color:var(--ink); }
.show-title em{ font-style:italic; font-weight:900; color:var(--accent); }
.show-meta{ color:var(--muted); font-size:.92rem; line-height:1.45; }
.card-foot{ margin-top:auto; padding-top:10px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.show-price{ font-family:'Oswald',sans-serif; font-weight:700; font-size:1.4rem; color:var(--ink); }
.show-price span{ font-size:.8rem; color:var(--muted); font-weight:400; margin-left:3px; }

/* ---- Ruban "offre spéciale" ---- */
.ribbon{
  position:absolute; z-index:3; top:25px; left:-45px; transform:rotate(-45deg);
  background:linear-gradient(90deg, var(--accent), var(--accent-soft)); color:#fff;
  font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.12em; font-size:.62rem; font-weight:700;
  padding:5px 44px; box-shadow:0 4px 14px rgba(43,32,24,.25);
}

/* =========================================================
   PAGE DÉTAIL (réservation)
   ========================================================= */
.back-link{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.08em; font-size:.8rem;
  color:var(--muted); margin-bottom:18px; transition:color .2s;
}
.back-link:hover{ color:var(--accent); }

.detail-card{
  display:grid; grid-template-columns:minmax(0,360px) minmax(0,1fr);
  border-radius:var(--radius); overflow:hidden;
  background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow-lg);
}
.detail-media{ position:relative; background:#ece4d6; min-height:260px; }
.detail-img{ width:100%; height:100%; object-fit:cover; }
.detail-media-trio{ display:grid; grid-template-rows:repeat(3,1fr); gap:3px; }
.detail-media-trio img{ width:100%; height:100%; object-fit:cover; }
.detail-body{ padding:30px 30px 34px; display:flex; flex-direction:column; gap:10px; }
.detail-card .show-title{ font-size:2rem; }
.detail-price{ margin-top:2px; }

/* =========================================================
   FORMULAIRE
   ========================================================= */
.show-form{ margin-top:18px; display:flex; flex-direction:column; gap:6px; }

.date-choice{ border:0; padding:0; margin:0 0 6px; }
legend{ font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.1em; font-size:.78rem; color:var(--muted); padding:0; margin-bottom:10px; }
.date-options{ display:flex; flex-wrap:wrap; gap:10px; }

.date-option{ position:relative; display:block; }
.date-option input{ position:absolute; inset:0; opacity:0; cursor:pointer; margin:0; }
.date-btn{
  display:flex; flex-direction:column; gap:2px; padding:.7em 1.05em; border-radius:14px; cursor:pointer;
  border:1.5px solid var(--line); background:#fff;
  transition:border-color .2s, background .2s, box-shadow .2s;
}
.date-day{ font-family:'Oswald',sans-serif; font-weight:600; letter-spacing:.02em; color:var(--ink); }
.date-time{ font-size:.85rem; color:var(--muted); }
.date-option:hover .date-btn{ border-color:var(--accent); }
.date-option input:checked + .date-btn{ border-color:var(--accent); background:var(--accent-tint); box-shadow:0 0 0 3px var(--accent-tint); }
.date-option input:checked + .date-btn .date-time{ color:var(--accent-soft); }
.date-option input:focus-visible + .date-btn{ outline:2px solid var(--accent); outline-offset:2px; }

/* ---- Quantité : sélecteur à flèches (− / +) ---- */
.qty-block{ margin-top:14px; padding:16px 18px; border-radius:16px; border:1px solid var(--line); background:var(--panel); }
.qty-label{ font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.08em; font-size:.8rem; color:var(--muted); margin-bottom:12px; }
.qty-control{ display:flex; align-items:center; gap:14px; }
.stepper{ display:inline-flex; align-items:center; border:1.5px solid var(--accent); border-radius:14px; overflow:hidden; background:#fff; }
.step-btn{
  width:46px; height:48px; border:0; background:transparent; color:var(--accent);
  font-size:1.5rem; font-weight:700; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s, color .15s, transform .05s;
}
.step-btn:hover{ background:var(--accent); color:#fff; }
.step-btn:active{ transform:scale(.92); }
.qty-input{
  width:64px; height:48px; border:0; border-left:1.5px solid var(--line); border-right:1.5px solid var(--line);
  text-align:center; font-family:'Oswald',sans-serif; font-weight:600; font-size:1.35rem; color:var(--ink);
  background:#fff; -moz-appearance:textfield;
}
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.qty-input:focus{ outline:none; background:var(--accent-tint); }
.qty-x{ font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.06em; font-size:1rem; color:var(--ink); }

.qty-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:14px; font-size:.92rem; color:var(--muted); }
.qty-total strong{ color:var(--accent-soft); font-size:1.1rem; font-family:'Oswald',sans-serif; }

/* ---- Quantité multi-tarifs : Adulte / Enfant ---- */
.qty-rows{ display:flex; flex-direction:column; gap:12px; }
.qty-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; }
.qty-row-label{ display:flex; flex-direction:column; gap:1px; font-family:'Oswald',sans-serif; font-weight:600; letter-spacing:.02em; color:var(--ink); }
.qty-row-price{ font-weight:400; font-size:.82rem; letter-spacing:.04em; color:var(--accent-soft); }
@media (max-width:420px){ .qty-row{ flex-wrap:wrap; row-gap:8px; } }

/* ---- Pass : sélection par spectacle ---- */
.pack-shows{ display:flex; flex-direction:column; gap:18px; }
.pack-show-title{
  font-family:'Oswald',sans-serif; font-weight:600; font-size:1rem; letter-spacing:.02em; color:var(--ink);
  margin-bottom:10px; padding-bottom:8px; border-bottom:1px solid var(--line);
}

/* =========================================================
   BOUTON
   ========================================================= */
.btn-pay{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.08em; font-weight:600; font-size:.95rem;
  padding:.85em 1.5em; border-radius:999px; cursor:pointer;
  color:var(--accent); background:transparent; border:2px solid var(--accent);
  transition:background .25s, color .25s, transform .25s, box-shadow .25s;
}
.btn-pay i{ font-size:.85em; transition:transform .25s; }
.btn-pay:hover{ background:var(--accent); color:#fff; box-shadow:0 10px 26px rgba(43,32,24,.18); transform:translateY(-2px); }
.btn-pay:hover i{ transform:translateX(3px); }
.show-form .btn-pay{ width:100%; margin-top:18px; }

/* ---- Rappel contribution HelloAsso ---- */
.tip-note{
  display:flex; gap:.6em; align-items:flex-start;
  margin-top:16px; padding:12px 14px; border-radius:12px;
  background:var(--accent-tint); border:1px solid var(--accent);
  color:var(--ink); font-size:.86rem; line-height:1.45;
}
.tip-note i{ color:var(--accent); margin-top:2px; }
.tip-note strong{ color:var(--accent-soft); }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{
  position:relative; margin-top:auto; text-align:center; padding:30px 20px 36px;
  background:linear-gradient(180deg, transparent, #ece2d1); border-top:1px solid var(--line);
}
.site-footer::before{
  content:""; position:absolute; left:0; right:0; top:-1px; height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent); opacity:.7;
}
.footer-inner{ max-width:760px; margin:0 auto; display:flex; flex-direction:column; align-items:center; gap:10px; }
.pay-line{ color:var(--ink); font-size:.95rem; display:flex; align-items:center; gap:.5em; }
.pay-line strong{ color:var(--gold); font-weight:700; }
.pay-icons{ display:flex; gap:14px; font-size:1.7rem; color:var(--muted); }
.footer-org{ font-size:.85rem; color:var(--muted); line-height:1.5; }
.footer-note{ font-size:.78rem; color:var(--muted); opacity:.85; max-width:520px; line-height:1.5; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:820px){
  .detail-card{ grid-template-columns:1fr; }
  .detail-media{ aspect-ratio:16/10; min-height:0; }
  .detail-media-trio{ aspect-ratio:16/9; grid-template-rows:none; grid-template-columns:repeat(3,1fr); }
  .detail-body{ padding:24px 22px 28px; }
  .detail-card .show-title{ font-size:1.7rem; }
}
@media (max-width:480px){
  .site-header{ padding:40px 18px 34px; }
  .main-wrap{ padding:26px 16px; }
  .shows-grid{ grid-template-columns:1fr; }
  .date-options{ display:grid; grid-template-columns:1fr 1fr; }
}