/* =============================================================
   Marie-Claire & Nicolas — Design system
   Palette reprise du faire-part : verdure aquarelle (eucalyptus/
   olivier), ivoire crème, touches dorées, calligraphie manuscrite.
   Mobile-first. iOS + Android. PWA.
   ============================================================= */

:root {
  /* Couleurs — faire-part */
  --ivory:      #FBF8F1;
  --cream:      #F3EDE0;
  --cream-2:    #EDE6D5;
  --sage:       #9CAF88;
  --sage-soft:  #C3D0B5;
  --sage-deep:  #6B7F5B;
  --forest:     #47563F;
  --forest-2:   #38452F;
  --gold:       #C6A15B;
  --gold-soft:  #DFC891;
  --ink:        #33382C;
  --ink-soft:   #5D6450;
  --white:      #FFFFFF;
  --danger:     #B5654A;
  --pt-red:     #C1272D;   /* clin d'oeil Portugal, tres discret */
  --pt-green:   #006233;

  /* Typo */
  --font-script: "Great Vibes", "Parisienne", cursive;
  --font-serif:  "Cormorant Garamond", "EB Garamond", Georgia, "Times New Roman", serif;
  --font-sans:   system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Espacements / rayons / ombres */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-pill: 999px;
  --shadow-sm: 0 1px 3px rgba(56,69,47,.08), 0 1px 2px rgba(56,69,47,.06);
  --shadow-md: 0 6px 20px rgba(56,69,47,.10);
  --shadow-lg: 0 16px 40px rgba(56,69,47,.16);

  --nav-h: 68px;
  --maxw: 720px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--ivory);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Fond texture douce + points dorés discrets facon aquarelle */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(circle at 12% 8%,  rgba(198,161,91,.10) 0 2px, transparent 3px),
    radial-gradient(circle at 88% 14%, rgba(198,161,91,.08) 0 2px, transparent 3px),
    radial-gradient(circle at 22% 82%, rgba(156,175,136,.10) 0 3px, transparent 4px),
    radial-gradient(circle at 78% 88%, rgba(198,161,91,.08) 0 2px, transparent 3px),
    linear-gradient(160deg, var(--ivory) 0%, var(--cream) 100%);
}

h1,h2,h3,h4 { font-family: var(--font-serif); font-weight: 600; color: var(--forest); line-height: 1.15; margin: 0 0 var(--sp-3); }
h1 { font-size: clamp(1.9rem, 6vw, 2.8rem); }
h2 { font-size: clamp(1.5rem, 4.5vw, 2rem); }
h3 { font-size: 1.25rem; }
p  { margin: 0 0 var(--sp-3); }
a  { color: var(--sage-deep); text-decoration: none; }
img { max-width: 100%; display: block; }

.script { font-family: var(--font-script); color: var(--sage-deep); font-weight: 400; line-height: 1; }
.muted  { color: var(--ink-soft); }
.center { text-align: center; }
.gold   { color: var(--gold); }

/* ============================ App shell ============================ */
#app { max-width: var(--maxw); margin: 0 auto; min-height: 100vh; }
.screen { padding: var(--sp-5) var(--sp-4) calc(var(--nav-h) + var(--sp-6)); animation: fade .35s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px);} to { opacity: 1; transform: none; } }

.section-title { display:flex; align-items:center; gap:var(--sp-3); margin: var(--sp-6) 0 var(--sp-4); }
.section-title::before, .section-title::after { content:""; flex:1; height:1px; background: linear-gradient(90deg, transparent, var(--sage-soft), transparent); }
.section-title span { font-family: var(--font-serif); font-size:1.4rem; color: var(--forest); white-space:nowrap; }

/* Feuillage decoratif reutilisable */
.leaf-divider { text-align:center; color: var(--sage); font-size: 1.4rem; letter-spacing:.4em; margin: var(--sp-5) 0; opacity:.8; }

/* ============================ Cards ============================ */
.card {
  background: var(--white);
  border: 1px solid rgba(107,127,91,.14);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--sp-4);
}
.card.pad-lg { padding: var(--sp-6); }
.card-soft { background: rgba(255,255,255,.7); }

/* ============================ Buttons ============================ */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  font-family: var(--font-sans); font-size:1rem; font-weight:600;
  padding: 14px 22px; border-radius: var(--r-pill); border:0; cursor:pointer;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
  min-height: 48px;
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--sage-deep); color: var(--white); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--forest); box-shadow: var(--shadow-md); }
.btn-gold { background: linear-gradient(135deg, var(--gold), var(--gold-soft)); color:#3c2f13; }
.btn-ghost { background: transparent; color: var(--sage-deep); border:1.5px solid var(--sage); }
.btn-block { display:flex; width:100%; }
.btn:disabled { opacity:.5; cursor:not-allowed; }

/* ============================ Forms ============================ */
label { display:block; font-size:.9rem; font-weight:600; color: var(--forest); margin-bottom: var(--sp-2); }
input, textarea, select {
  width:100%; font-family: var(--font-sans); font-size:1rem; color: var(--ink);
  background: var(--white); border:1.5px solid rgba(107,127,91,.25);
  border-radius: var(--r-sm); padding: 13px 14px; margin-bottom: var(--sp-4);
}
input:focus, textarea:focus, select:focus { outline:none; border-color: var(--sage-deep); box-shadow: 0 0 0 3px rgba(156,175,136,.25); }
textarea { min-height: 96px; resize: vertical; }
.field-row { display:flex; gap: var(--sp-3); }
.field-row > * { flex:1; }

/* ============================ Login / Welcome ============================ */
.welcome { min-height: 100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding: var(--sp-6) var(--sp-5); position:relative; }
.welcome .initials { font-family:var(--font-script); font-size: clamp(3.5rem, 18vw, 6rem); color: var(--sage-deep); line-height:.9; }
.welcome .names { font-family:var(--font-serif); font-size: clamp(1.6rem,7vw,2.4rem); color:var(--forest); margin-top: var(--sp-2); letter-spacing:.02em; }
.welcome .meta { color: var(--ink-soft); font-size:1.05rem; margin-top: var(--sp-3); }
.welcome-card { background: rgba(255,255,255,.82); backdrop-filter: blur(4px); border:1px solid rgba(198,161,91,.25); border-radius: var(--r-lg); padding: var(--sp-6); max-width: 420px; width:100%; box-shadow: var(--shadow-md); margin-top: var(--sp-6); }

/* ============================ Hero (accueil) ============================ */
.hero { text-align:center; padding: var(--sp-6) var(--sp-3) var(--sp-5); }
.hero .initials { font-family:var(--font-script); font-size: clamp(3rem,16vw,5rem); color: var(--sage-deep); }
.hero .names { font-family:var(--font-serif); font-size: clamp(1.5rem,6vw,2.2rem); color:var(--forest); }
.hero .date  { letter-spacing:.16em; text-transform:uppercase; font-size:.85rem; color: var(--gold); margin-top: var(--sp-3); font-weight:600; }
.hero .place { color: var(--ink-soft); margin-top: var(--sp-1); }

/* Countdown */
.countdown { display:flex; justify-content:center; gap: var(--sp-3); margin: var(--sp-5) 0; }
.count-box { background: var(--white); border:1px solid rgba(107,127,91,.16); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-2); min-width: 68px; box-shadow: var(--shadow-sm); }
.count-box .num { font-family: var(--font-serif); font-size: 2rem; font-weight:600; color: var(--forest); line-height:1; }
.count-box .lbl { font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; color: var(--ink-soft); margin-top: var(--sp-1); }

/* ============================ Programme (timeline) ============================ */
.timeline { position:relative; margin-left: 8px; padding-left: var(--sp-5); }
.timeline::before { content:""; position:absolute; left:0; top:6px; bottom:6px; width:2px; background: linear-gradient(var(--sage-soft), var(--gold-soft)); }
.tl-item { position:relative; margin-bottom: var(--sp-5); }
.tl-item::before { content:""; position:absolute; left: calc(-1 * var(--sp-5) - 5px); top:4px; width:12px; height:12px; border-radius:50%; background: var(--white); border:2.5px solid var(--sage-deep); }
.tl-time { font-family: var(--font-serif); font-size:1.15rem; font-weight:600; color: var(--gold); }
.tl-title { font-family: var(--font-serif); font-size:1.25rem; color: var(--forest); }
.tl-loc { font-size:.85rem; color: var(--sage-deep); }
.tl-desc { color: var(--ink-soft); font-size:.95rem; }

/* ============================ Photo wall ============================ */
.uploader { display:flex; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.photo-grid { columns: 2; column-gap: var(--sp-3); }
@media (min-width:520px){ .photo-grid { columns:3; } }
.photo-grid figure { break-inside: avoid; margin:0 0 var(--sp-3); border-radius: var(--r-sm); overflow:hidden; box-shadow: var(--shadow-sm); position:relative; background: var(--cream); }
.photo-grid img { width:100%; border-radius: var(--r-sm); }
.photo-grid figcaption { position:absolute; left:0; right:0; bottom:0; padding:6px 8px; font-size:.72rem; color:#fff; background: linear-gradient(transparent, rgba(0,0,0,.55)); }
.like-btn { position:absolute; top:6px; right:6px; background:rgba(255,255,255,.85); border:0; border-radius:50%; width:32px; height:32px; cursor:pointer; font-size:.9rem; box-shadow: var(--shadow-sm); }

/* ---- Fil chronologique (photos + videos + commentaires) ---- */
.uploader { flex-wrap: wrap; }
.uploader .btn { flex:1; min-width: 90px; }
/* Input fichier masque MAIS declenchable (pas de display:none -> camera OK sur iOS) */
.vh { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; opacity:0; }
.photo-feed { display:flex; flex-direction:column; gap: var(--sp-4); }
.feed-item { background: var(--white); border:1px solid rgba(107,127,91,.14); border-radius: var(--r-md); box-shadow: var(--shadow-sm); overflow:hidden; }
.fi-head { display:flex; align-items:baseline; justify-content:space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4) var(--sp-2); }
.fi-who { font-family: var(--font-serif); font-weight:600; color: var(--forest); }
.fi-when { font-size:.78rem; color: var(--ink-soft); white-space:nowrap; }
.fi-media img, .fi-media video { width:100%; display:block; max-height: 78vh; object-fit: contain; background: var(--cream); }
.fi-cap { padding: var(--sp-3) var(--sp-4) 0; }
.feed-item > .chip { margin: var(--sp-2) var(--sp-4) 0; }
.fi-actions { display:flex; flex-wrap:wrap; align-items:center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); }
.fi-actions .chip { cursor:pointer; border:0; background: var(--cream); font-size:.82rem; }
.fi-actions .chip.like:active { transform: scale(.94); }
.fi-comments { padding: 0 var(--sp-4); display:flex; flex-direction:column; gap: 6px; }
.fi-comments:not(:empty) { padding-bottom: var(--sp-2); }
.pc { font-size:.9rem; background: var(--cream); border-radius: var(--r-sm); padding: 7px 11px; }
.pc b { color: var(--forest); font-family: var(--font-serif); font-weight:600; margin-right: 4px; }
.fi-add { display:flex; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4) var(--sp-4); }
.fi-add input { margin:0; flex:1; }
.fi-add .btn { min-height:0; padding: 10px 16px; white-space:nowrap; }

/* Case de consentement (formulaire d'acces) */
.consent { display:flex; gap:8px; align-items:flex-start; font-weight:400; font-size:.8rem; margin:8px 0 16px; }
.consent input { width:auto; margin:2px 0 0; }

/* ============================ Quiz ============================ */
.quiz-progress { height:6px; background: var(--cream-2); border-radius: var(--r-pill); overflow:hidden; margin-bottom: var(--sp-5); }
.quiz-progress > i { display:block; height:100%; background: linear-gradient(90deg, var(--sage), var(--gold)); transition: width .3s ease; }
.quiz-opt { display:block; width:100%; text-align:left; background: var(--white); border:1.5px solid rgba(107,127,91,.22); border-radius: var(--r-sm); padding: 15px 16px; margin-bottom: var(--sp-3); font-size:1rem; cursor:pointer; transition: all .15s; }
.quiz-opt:hover { border-color: var(--sage); }
.quiz-opt.correct { background: rgba(156,175,136,.25); border-color: var(--sage-deep); }
.quiz-opt.wrong   { background: rgba(181,101,74,.16); border-color: var(--danger); }
.score-ring { font-family: var(--font-serif); font-size: 3.5rem; color: var(--forest); font-weight:600; }

/* ============================ Bingo ============================ */
.bingo-grid { display:grid; grid-template-columns: repeat(4,1fr); gap: var(--sp-2); }
.bingo-cell { aspect-ratio:1; display:flex; align-items:center; justify-content:center; text-align:center; font-size:.62rem; padding:4px; border-radius: var(--r-sm); background: var(--white); border:1.5px solid rgba(107,127,91,.2); cursor:pointer; line-height:1.15; transition: all .15s; }
.bingo-cell.on { background: linear-gradient(135deg, var(--sage), var(--sage-deep)); color:#fff; border-color: var(--sage-deep); transform: scale(.97); }
.bingo-cell.free { background: var(--gold-soft); font-family: var(--font-serif); font-weight:700; }

/* ============================ Guestbook / messages ============================ */
.msg { background: var(--white); border-left:3px solid var(--sage); border-radius: var(--r-sm); padding: var(--sp-4); margin-bottom: var(--sp-3); box-shadow: var(--shadow-sm); }
.msg .who { font-family: var(--font-serif); font-weight:600; color: var(--forest); }
.msg .when { font-size:.75rem; color: var(--ink-soft); }
.msg .text { margin-top: var(--sp-2); }

/* ============================ Chips / badges / lists ============================ */
.chip { display:inline-flex; align-items:center; gap:6px; background: var(--cream); border:1px solid rgba(107,127,91,.2); border-radius: var(--r-pill); padding:6px 12px; font-size:.85rem; margin: 0 6px 8px 0; }
.mission { display:flex; align-items:center; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom:1px dashed rgba(107,127,91,.2); }
.mission .box { width:26px; height:26px; border-radius:8px; border:2px solid var(--sage); flex:0 0 auto; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.mission.done .box { background: var(--sage-deep); border-color: var(--sage-deep); color:#fff; }
.mission.done .lbl { text-decoration: line-through; color: var(--ink-soft); }
.faq-q { font-weight:600; color: var(--forest); margin-bottom:4px; }
.info-row { display:flex; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom:1px solid rgba(107,127,91,.12); }
.info-row .ic { font-size:1.3rem; }

/* ============================ Bottom nav ============================ */
.tabbar {
  position: fixed; left:0; right:0; bottom:0; height: var(--nav-h);
  background: rgba(251,248,241,.92); backdrop-filter: blur(10px);
  border-top:1px solid rgba(107,127,91,.18);
  display:flex; justify-content:space-around; align-items:center;
  padding-bottom: env(safe-area-inset-bottom); z-index: 50; max-width: var(--maxw); margin:0 auto;
}
.tabbar button { background:none; border:0; display:flex; flex-direction:column; align-items:center; gap:2px; color: var(--ink-soft); font-size:.66rem; cursor:pointer; padding:6px 8px; flex:1; }
.tabbar button .ic { font-size:1.35rem; line-height:1; }
.tabbar button.active { color: var(--sage-deep); }
.tabbar button.active .ic { transform: translateY(-1px); }

/* ============================ Toast / helpers ============================ */
.toast { position:fixed; left:50%; bottom: calc(var(--nav-h) + 16px); transform: translateX(-50%); background: var(--forest); color:#fff; padding:12px 20px; border-radius: var(--r-pill); box-shadow: var(--shadow-lg); z-index:100; font-size:.9rem; animation: fade .2s; max-width: 90%; }
.empty { text-align:center; color: var(--ink-soft); padding: var(--sp-6) var(--sp-4); }
.empty .ic { font-size:2.5rem; opacity:.5; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap: var(--sp-3); }
.spinner { width:28px; height:28px; border:3px solid var(--sage-soft); border-top-color: var(--sage-deep); border-radius:50%; animation: spin 1s linear infinite; margin: var(--sp-5) auto; }
@keyframes spin { to { transform: rotate(360deg); } }
.hidden { display:none !important; }

/* Admin badge */
.admin-bar { background: var(--forest); color: var(--gold-soft); text-align:center; font-size:.78rem; padding:6px; letter-spacing:.05em; }

/* Projection mode (diaporama) */
.projector { position:fixed; inset:0; background: var(--forest-2); z-index:200; display:flex; align-items:center; justify-content:center; }
.projector img { max-width:92vw; max-height:82vh; border-radius: var(--r-md); box-shadow: var(--shadow-lg); }
.projector .cap { position:absolute; bottom:6vh; left:0; right:0; text-align:center; color:var(--gold-soft); font-family:var(--font-serif); font-size:1.6rem; }
.projector .close { position:absolute; top:16px; right:16px; background:rgba(255,255,255,.15); color:#fff; border:0; border-radius:50%; width:44px; height:44px; font-size:1.2rem; cursor:pointer; }