/* =========================================================
   Mariage — Thème "Chic élégant" (boosté)
   - Palette: bourgogne, dusty mauve, dark mauve, dusty rose, or
   - Alignements + Responsive + Accessibilité + Admin lisible
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Cormorant+Garamond:wght@500;600&display=swap');

/* ---------- Variables ---------- */
:root{
  --bg:#fffaf7;
  --paper:#ffffff;
  --ink:#2b2b2b;
  --muted:#6f6f6f;

  --accent:#7d1f2a;            /* Bourgogne */
  --accent-2:#b08fa1;          /* Dusty mauve */
  --ring:rgba(125,31,42,.25);

  --bourgogne:#7d1f2a;
  --dusty-mauve:#b08fa1;
  --dark-mauve:#7a4b63;
  --dusty-rose:#c98e94;
  --or:#d6b66a;

  --radius:18px;
  --shadow:0 12px 40px rgba(17,17,17,.10);
  --maxw:1100px;
  --gap: clamp(12px, 2vw, 20px);
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth; text-size-adjust:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";
  color:var(--ink);
  background:var(--bg);
  line-height:1.65;
  letter-spacing:.2px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video{max-width:100%; height:auto; display:block}
picture{display:block}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(16px, 3vw, 40px)}

/* ---------- Typo ---------- */
h1,h2,h3{font-family:"Cormorant Garamond", serif; line-height:1.2; margin:0 0 .6rem}
h1{font-size:clamp(2.4rem, 4vw, 3.6rem); font-weight:600; letter-spacing:.01em}
h2{font-size:clamp(1.8rem, 3vw, 2.3rem); font-weight:600}
h3{font-size:clamp(1.22rem, 2.2vw, 1.5rem); font-weight:600}
p{margin:.25rem 0 1rem}
small, .small{font-size:.92rem; color:var(--muted)}

/* Focus accessible */
:where(a,button,input,select,textarea):focus-visible{
  outline:0; box-shadow:0 0 0 4px var(--ring);
  border-radius:10px
}

/* Réduire les animations si demandé */
@media (prefers-reduced-motion: reduce){
  *{animation:none!important; transition:none!important; scroll-behavior:auto!important}
}

/* ---------- Header / Nav ---------- */
header.site{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(140%) blur(8px);
  background:linear-gradient(180deg, rgba(255,250,247,.92), rgba(255,250,247,.6));
  border-bottom:1px solid rgba(0,0,0,.06)
}
.topbar{display:flex; align-items:center; gap:.8rem; padding:.6rem 0}
.brand{display:flex; align-items:center; gap:.7rem}
.brand .monogram{
  width:42px; height:42px; border-radius:50%;
  background:radial-gradient(100% 100% at 30% 20%, #ffe9e1 0%, #f5e7db 40%, #e9d6cc 100%);
  box-shadow:var(--shadow); display:grid; place-items:center;
  font-family:"Cormorant Garamond", serif; color:#86543e; letter-spacing:.02em
}
.brand .title{display:flex; flex-direction:column}
.brand .title strong{font-family:"Cormorant Garamond", serif; font-size:1.18rem}
.brand .title span{color:var(--muted); font:600 .9rem/1 Inter, system-ui}
nav{margin-left:auto}
.nav{display:flex; gap:.8rem; align-items:center}
.nav a{
  padding:.45rem .7rem; border-radius:999px; font-weight:700; color:#3a3a3a
}
.nav a[aria-current="page"]{background:#fff; box-shadow:0 1px 0 rgba(0,0,0,.06)}
.nav a:hover{background:#fff; box-shadow:0 1px 0 rgba(0,0,0,.06)}
.burger{display:none}
@media (max-width: 820px){
  .nav{display:none}
  .burger{display:inline-grid; place-items:center; width:40px; height:40px; border-radius:999px; border:1px solid rgba(0,0,0,.08); background:#fff}
}
/* Dialog menu (mobile) */
dialog.drawer{border:none; border-radius:16px; padding:0; width:min(520px,92vw)}
dialog.drawer::backdrop{background:rgba(0,0,0,.35)}

/* ---------- Hero ---------- */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  border-bottom:1px solid rgba(0,0,0,.06);
  background:
    radial-gradient(1000px 500px at 80% 0%, rgba(125,31,42,.08), transparent 60%),
    radial-gradient(1000px 600px at 0% 100%, rgba(176,143,161,.12), transparent 60%),
    var(--bg);
}
.hero .wrap{
  display:grid; gap:clamp(20px, 5vw, 60px); align-items:center;
  grid-template-columns: 1.1fr .9fr;
  padding-block:clamp(28px, 5vw, 80px)
}
.hero .names{font-family:"Cormorant Garamond", serif; font-size:clamp(2.2rem, 7vw, 4.9rem); letter-spacing:.01em}
.hero .meta{color:var(--muted); font-weight:600; margin-top:.5rem}
.hero .cta{margin-top:1.2rem; display:flex; gap:.6rem; flex-wrap:wrap}
.card{background:var(--paper); border-radius:var(--radius); box-shadow:var(--shadow); border:1px solid rgba(0,0,0,.06)}
.btn{display:inline-flex; align-items:center; gap:.5rem; border:1px solid rgba(0,0,0,.12); background:#fff; padding:.75rem 1rem; border-radius:999px; font-weight:800; cursor:pointer}
.btn:hover{box-shadow:0 6px 18px rgba(0,0,0,.06)}
.btn.primary{background:linear-gradient(135deg, var(--bourgogne), var(--dark-mauve)); color:#fff; border:none}
.btn.primary:hover{filter:saturate(1.05) brightness(1.03); transform:translateY(-1px)}
.hero .photo{position:relative}
.hero .photo .frame{aspect-ratio:3/4; border-radius:calc(var(--radius) + 10px); overflow:hidden; border:10px solid #fff; box-shadow:var(--shadow)}
.hero .photo img{width:100%; height:100%; object-fit:cover; object-position:center}
.hero .photo .stamp{
  position:absolute; bottom:-10px; right:-10px; background:#fff; border-radius:999px;
  padding:.5rem .8rem; font-weight:700; color:var(--accent);
  border:1px dashed rgba(125,31,42,.25)
}
@media (max-width:920px){
  .hero .wrap{grid-template-columns:1fr; text-align:center}
  .hero .cta{justify-content:center}
  .hero .photo{order:-1}
}

/* ---------- Sections & Grid ---------- */
section{padding-block:clamp(38px, 6vw, 90px)}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1.2rem}
.section-head p{color:var(--muted)}
.grid{display:grid; gap:clamp(14px, 2.2vw, 22px)}
/* Auto-fit pour meilleure responsivité */
.grid.cols-3{grid-template-columns: repeat(auto-fit, minmax(240px,1fr))}
.grid.cols-2{grid-template-columns: repeat(auto-fit, minmax(280px,1fr))}

/* ---------- KPI (Date / Lieu / Palette) ---------- */
.kpi{padding:1.1rem 1.2rem; display:flex; flex-direction:column; gap:.5rem; min-height:130px}
.kpi .label{
  font:700 .78rem/1 Inter, system-ui;
  text-transform:uppercase; letter-spacing:.14em; color:var(--muted)
}
.kpi strong{
  font-family:"Cormorant Garamond", serif; font-weight:600; letter-spacing:.01em;
  font-size:clamp(1.6rem, 3vw, 2.2rem)
}
.kpi .place-pill{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.48rem .8rem; border-radius:999px; background:#fff;
  border:1px solid rgba(0,0,0,.08); font-weight:700
}
.kpi .place-pill .pin{font-size:1rem}
.kpi .place-pill .city{font-weight:800}
.kpi .place-pill .country{color:var(--muted); font-weight:700}
.palette{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.swatch{width:28px; height:28px; border-radius:999px; border:2px solid rgba(0,0,0,.08); box-shadow:0 2px 8px rgba(0,0,0,.05)}
.swatch.bourgogne{background:var(--bourgogne)}
.swatch.dusty-mauve{background:var(--dusty-mauve)}
.swatch.dark-mauve{background:var(--dark-mauve)}
.swatch.dusty-rose{background:var(--dusty-rose)}
.swatch.or{background:var(--or)}

/* === KPI Triptych Boost (ajout) === */
.grid.kpi-triptych{
  grid-template-columns: repeat(3, minmax(280px,1fr));
  gap: 1.1rem;
}
@media (max-width:1100px){ .grid.kpi-triptych{ grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); } }
@media (max-width:560px){ .grid.kpi-triptych{ grid-template-columns: 1fr; } }

.kpi--big{
  padding:1.25rem 1.3rem;
  min-height:160px;
  display:grid;
  align-content:center;
  gap:.5rem;
}
.kpi--big .kpi-label{
  font:700 .9rem/1 Inter, system-ui;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--muted);
}
.kpi--big .kpi-value{
  font-family:"Cormorant Garamond", serif;
  font-weight:600;
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  line-height:1.18;
}
.kpi-place{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:.7rem;
  min-width:0;
}
.kpi-emoji{ font-size:1.6rem; line-height:1; }
.kpi-place-text{
  font-size: clamp(1.2rem, 2.2vw, 1.7rem);
  font-weight:700;
  white-space: nowrap;
}
@media (max-width:420px){ .kpi-place-text{ white-space: normal; } }
.palette--lg{ margin-top:.5rem; gap:.45rem; }
.palette--lg .swatch{ width:30px; height:30px; border-radius:8px; }

/* ---------- Timeline ---------- */
.timeline{display:grid; gap:12px}
.event{
  display:grid; gap:12px; align-items:center;
  grid-template-columns: clamp(84px,12vw,140px) 1fr;
  padding:12px 14px; border-radius:12px; border:1px solid rgba(0,0,0,.06); background:#fff
}
.event time{font-weight:800; color:var(--accent)}
.event .where{color:var(--muted)}
@media (max-width:640px){.event{grid-template-columns:1fr}.event time{order:-1}}

/* ---------- Galerie ---------- */
.gallery{display:grid; grid-template-columns:repeat(12,1fr); gap:10px}
.gallery picture{border-radius:14px; overflow:hidden; box-shadow:var(--shadow); border:1px solid rgba(0,0,0,.06); background:#f6f6f6}
.gallery img{width:100%; height:100%; object-fit:cover}
.gallery .t1{grid-column: span 7}
.gallery .t2{grid-column: span 5}
.gallery .t3{grid-column: span 12}
@media (max-width:920px){ .gallery .t1,.gallery .t2,.gallery .t3{grid-column:1/-1} }

/* ---------- Accordion (programme détaillé) ---------- */
.accordion{display:grid; gap:10px}
.ac-item{border:1px solid rgba(0,0,0,.08); border-radius:12px; background:#fff; overflow:hidden}
.ac-head{display:flex; align-items:center; justify-content:space-between; padding:12px 14px; cursor:pointer}
.ac-title{display:flex; gap:10px; align-items:center; font-weight:800}
.ac-body{display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s ease}
.ac-body>div{overflow:hidden}
.ac-item.open .ac-body{grid-template-rows:1fr}

/* ---------- Tabs horizontaux (programme.php) ---------- */
.scroll-tabs{
  display:flex; gap:8px; overflow:auto; padding:6px; border-radius:12px; background:#fff; border:1px solid rgba(0,0,0,.06);
  scroll-snap-type:x mandatory
}
.scroll-tabs a{
  scroll-snap-align:center; white-space:nowrap; padding:.55rem .9rem; border-radius:999px; font-weight:800;
  border:1px solid rgba(0,0,0,.08); background:#fff; color:#333; text-decoration:none
}
.scroll-tabs a[aria-current="page"], .scroll-tabs a.active{
  background:linear-gradient(135deg, var(--bourgogne), var(--dark-mauve)); color:#fff; border-color:transparent
}

/* ---------- Formulaires (Présence / Menu) ---------- */
form{display:grid; gap:16px}
.field{display:grid; gap:6px}
.row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.row-3{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px}
@media (max-width:900px){.row-3{grid-template-columns:1fr 1fr}}
@media (max-width:720px){.row,.row-3{grid-template-columns:1fr}}
label{font-weight:700}
input, select, textarea{
  width:100%; padding:.9rem .95rem; border-radius:12px; border:1px solid rgba(0,0,0,.12); background:#fff;
  outline:0; font:500 1rem/1.4 Inter, system-ui; color:inherit; transition:border-color .2s ease, box-shadow .2s ease
}
input::placeholder, textarea::placeholder{color:#9a9a9a}
input:focus, select:focus, textarea:focus{border-color:var(--accent); box-shadow:0 0 0 4px var(--ring)}
input:invalid, select:invalid, textarea:invalid{border-color:#c0392b}
small.help{color:var(--muted)}
.pill{display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .8rem; border-radius:999px; background:#fff; border:1px solid rgba(0,0,0,.06); box-shadow:0 3px 10px rgba(0,0,0,.04); font-weight:700}
.guest-list{display:grid; gap:10px}
.guest{display:grid; grid-template-columns:1fr 1fr; gap:10px}
@media (max-width:820px){.guest{grid-template-columns:1fr}}

/* Notices */
.notice{padding:1rem; border-radius:12px; background:linear-gradient(180deg, #fff, #fff7f4); border:1px solid rgba(176,114,86,.2)}
.notice.closed{background:linear-gradient(180deg, #fff, #f5f7f6); border-color:rgba(122,163,154,.25)}
.notice.success{background:linear-gradient(180deg,#fff,#f6fff6); border-color:rgba(46,204,113,.25)}

/* ---------- Admin (tables lisibles + sticky) ---------- */
.table{
  width:100%; border-collapse:separate; border-spacing:0; background:#fff;
  border:1px solid rgba(0,0,0,.06); border-radius:12px; overflow:hidden
}
.table th, .table td{padding:.75rem .9rem; text-align:left; vertical-align:top}
.table thead th{
  background:#faf7f6; font:800 .9rem/1 Inter, system-ui; letter-spacing:.02em;
  position:sticky; top:0; z-index:1  /* sticky dans le conteneur scroll */
}
.table tbody tr:nth-child(odd) td{background:#fffdfa}
.table tbody tr+tr td{border-top:1px solid rgba(0,0,0,.06)}
.table .min{white-space:nowrap}
code, .code{font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size:.92rem; color:#5a514e}

/* ---------- Footer ---------- */
footer{border-top:1px solid rgba(0,0,0,.08); padding:28px 0; text-align:center; color:var(--muted)}

/* ---------- Utilitaires ---------- */
.center{text-align:center}
.hide{display:none !important}
.mt-0{margin-top:0} .mt-1{margin-top:.25rem} .mt-2{margin-top:.5rem} .mt-3{margin-top:1rem}
.mb-0{margin-bottom:0} .mb-1{margin-bottom:.25rem} .mb-2{margin-bottom:.5rem} .mb-3{margin-bottom:1rem}
.grid-center{display:grid; place-items:center}
.block{display:block}
.inline{display:inline}
.w-100{width:100%}

/* ---------- Petites améliorations responsive globales ---------- */
@media (max-width:560px){
  .hero .names{font-size:clamp(2rem, 8vw, 3rem)}
  .kpi{min-height:auto}
  .nav a{font-weight:700}
}

/* ---------- Alignements & corrections visuelles ---------- */
.card{padding:clamp(12px, 1.8vw, 18px)}
/* Conteneur scroll autour d’un tableau : ajoutez overflow:auto dans le HTML (déjà fait) */
/* Exemple dans l’admin : <div style="overflow:auto"> ... table ... </div> */