/* === Mon Petit Mariage — style sobre & élégant === */

:root{
  --bg: #faf9f7;
  --card: #ffffff;
  --ink: #2f2b28;
  --muted: #6b6059;
  --primary: #8b6f5a;        /* brun rosé doux */
  --primary-ink: #fff;
  --accent: #d6c2b3;         /* beige rosé */
  --border: #eee6df;
  --radius: 14px;
  --shadow: 0 8px 24px rgba(0,0,0,.06);
}

html,body{ background:var(--bg); color:var(--ink); }
a{ color:var(--primary); }
header nav{ padding:14px 0; }
.container{ max-width:980px; }

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

button, .button{
  background:var(--primary);
  color:var(--primary-ink) !important;
  border:none;
  border-radius:999px;
  padding:.6rem 1rem;
  box-shadow:0 6px 18px rgba(139,111,90,.18);
}
button:hover, .button:hover{ transform:translateY(-1px); }

.btn-red{ background:#b84a46; }
.btn-green{ background:#4c8f5b; }
.btn-amber{ background:#c98a32; }

.notice, .good, .bad{
  border-radius:var(--radius);
  padding:.75rem 1rem;
  border:1px solid var(--border);
  background:#fff;
}
.notice{ background:#fff9f1 }
.good{ background:#f1fff5 }
.bad{ background:#fff4f4 }

h1,h2,h3{ font-family: ui-serif, Georgia, 'Times New Roman', Times, serif; letter-spacing:.2px; }
h1{ font-size:2.1rem; }
h2{ font-size:1.35rem; color:var(--muted); }

.countdown{
  display:flex; gap:10px; flex-wrap:wrap;
  margin:.75rem 0 0;
}
.countdown .pill{
  min-width:92px; text-align:center;
  background:var(--card); border:1px solid var(--border);
  border-radius:12px; padding:.55rem .75rem;
  box-shadow:var(--shadow);
}
.countdown .pill strong{ display:block; font-size:1.3rem; }
.countdown .pill span{ display:block; color:var(--muted); font-size:.85rem; }
  .btn-red { background:#d9534f;color:#fff; }
  .btn-green { background:#5cb85c;color:#fff; }
  .btn-amber { background:#f0ad4e;color:#fff; }
  table td, table th { vertical-align: top; }

  /* === Forms: lisibles & responsives === */
form { margin-block: .75rem 1.25rem; }
label { display:block; font-weight:600; margin:.5rem 0 .25rem; }
label small { font-weight:400; color:var(--muted); }

/* Empile les champs même si input est dans le label */
label > input,
label > select,
label > textarea {
  display:block;
  width:100%;
  box-sizing:border-box;
  margin-top:.35rem;
  padding:.6rem .8rem;
  border:1px solid var(--border);
  background:#fff;
  border-radius:10px;
  outline:none;
}
label > textarea { min-height: 110px; }

/* Grilles simples et réactives (utilisables sans changer le HTML) */
.form-grid { display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width: 640px){ .form-grid.cols-2{ grid-template-columns:repeat(2,1fr);} }
@media (min-width: 860px){ .form-grid.cols-3{ grid-template-columns:repeat(3,1fr);} }

/* Fieldsets plus élégants */
fieldset {
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px;
  background:#fff;
  box-shadow: var(--shadow);
  margin-bottom:14px;
}
legend {
  padding:0 .5rem;
  font-weight:700;
  font-family: ui-serif, Georgia, 'Times New Roman', Times, serif;
  color:var(--primary);
}

/* Boutons & actions */
form .actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:.5rem; }
button, .button { cursor:pointer; }

/* Details/summary (présences par évènement) */
details { margin-top:.5rem; }
summary {
  cursor:pointer;
  font-weight:600;
  color:var(--primary);
  list-style:none;
}
summary::-webkit-details-marker { display:none; }

/* Tables (admin) scroll horizontal si nécessaire */
.table-scroll { overflow:auto; }
.table-scroll table { min-width:720px; }

/* Messages */
.notice, .good, .bad { margin:.5rem 0; }

/* Inputs de nombres et dates harmonisés */
input[type="number"], input[type="date"], input[type="datetime-local"] { padding:.55rem .7rem; }

/* Sélecteurs compacts et lisibles */
select { padding:.55rem .7rem; background:#fff; }

/* === Correction contrastes textarea / inputs === */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
textarea,
select {
  background-color: #fffdf9;
     /* fond blanc lisible */
  color: #222;                 /* texte gris foncé */
  border: 1px solid var(--border, #ccc);
  border-radius: 8px;
  padding: .6rem .8rem;
  box-sizing: border-box;
  font: inherit;
}

textarea::placeholder,
input::placeholder {
  color: #888;                 /* texte d’aide grisé */
}

/* focus élégant */
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--primary, #00896C);
  box-shadow: 0 0 0 2px rgba(0,137,108,0.1);
}

/* uniformise la taille */
textarea {
  min-height: 110px;
  resize: vertical;
}