/*
  Palette :
  - fond      #FAF7F1 (lin clair)
  - encre     #2B2620 (brun presque noir, pas de noir pur)
  - vert      #3B5B45 (feuillage — accent principal, prestations extérieures / validation)
  - terre     #B4622C (argile — accent secondaire, boutons d'action)
  - ligne     #E4DCC9 (bordures discrètes)
  Typo :
  - Titres : "Fraunces" (serif chaleureuse, à contraste marqué)
  - Texte  : "Inter" (sans-serif lisible pour les formulaires)
*/

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600&family=Inter:wght@400;500;600&display=swap');

:root {
  --fond: #FAF7F1;
  --panneau: #FFFFFF;
  --encre: #2B2620;
  --encre-douce: #6B6255;
  --vert: #3B5B45;
  --vert-fonce: #2C4634;
  --terre: #B4622C;
  --terre-fonce: #96501F;
  --ligne: #E4DCC9;
  --rouge: #A8402E;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: 'Inter', system-ui, sans-serif;
  line-height: 1.55;
}

a { color: var(--vert-fonce); }

.site-entete {
  padding: 28px 24px 20px;
  max-width: 640px;
  margin: 0 auto;
}

.site-entete h1 {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1.7rem;
  margin: 0 0 4px;
  color: var(--vert-fonce);
}

.site-entete p {
  margin: 0;
  color: var(--encre-douce);
  font-size: 0.95rem;
}

main {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 24px 64px;
}

.etapes {
  display: flex;
  gap: 6px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}

.etapes li {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--ligne);
}

.etapes li.faite,
.etapes li.active {
  background: var(--vert);
}

.panneau {
  background: var(--panneau);
  border: 1px solid var(--ligne);
  border-radius: 10px;
  padding: 28px;
}

h2 {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1.35rem;
  margin: 0 0 20px;
}

.mois-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.mois-nav .mois-label {
  font-family: 'Fraunces', serif;
  font-size: 1.1rem;
}

.mois-nav a {
  text-decoration: none;
  color: var(--vert-fonce);
  font-size: 0.9rem;
  padding: 6px 10px;
  border: 1px solid var(--ligne);
  border-radius: 6px;
}

.calendrier {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.calendrier .en-tete-jour {
  text-align: center;
  font-size: 0.75rem;
  color: var(--encre-douce);
  padding-bottom: 4px;
}

.calendrier a.jour,
.calendrier span.jour {
  display: block;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 0.9rem;
  text-decoration: none;
  color: var(--encre);
}

.calendrier span.jour {
  color: #C9C0AE;
}

.calendrier a.jour {
  background: #EFEAE0;
  font-weight: 500;
}

.calendrier a.jour:hover {
  background: var(--vert);
  color: #fff;
}

.liste-creneaux {
  display: grid;
  gap: 10px;
}

.creneau-bouton {
  display: block;
  width: 100%;
  text-align: left;
  padding: 16px 18px;
  border: 1px solid var(--ligne);
  border-radius: 8px;
  background: var(--panneau);
  font-size: 1rem;
  font-family: inherit;
  color: var(--encre);
  cursor: pointer;
  text-decoration: none;
}

.creneau-bouton:hover {
  border-color: var(--vert);
}

fieldset {
  border: none;
  padding: 0;
  margin: 0 0 22px;
}

legend {
  font-family: 'Fraunces', serif;
  font-size: 1rem;
  margin-bottom: 10px;
  padding: 0;
}

.case-prestation {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--ligne);
}

.case-prestation:last-child { border-bottom: none; }

.case-prestation input { width: 18px; height: 18px; }

label { font-weight: 500; }

.champ {
  margin-bottom: 18px;
}

.champ label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.92rem;
}

.champ input,
.champ textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--ligne);
  border-radius: 6px;
  font-family: inherit;
  font-size: 1rem;
  background: #fff;
  color: var(--encre);
}

.champ textarea { resize: vertical; min-height: 90px; }

.deux-colonnes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.bouton {
  display: inline-block;
  border: none;
  border-radius: 7px;
  padding: 13px 22px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
}

.bouton-principal {
  background: var(--terre);
  color: #fff;
}

.bouton-principal:hover { background: var(--terre-fonce); }

.bouton-discret {
  background: transparent;
  color: var(--encre-douce);
  border: 1px solid var(--ligne);
}

.barre-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 26px;
}

.recap-ligne {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--ligne);
  font-size: 0.95rem;
}

.recap-ligne:last-child { border-bottom: none; }

.recap-ligne span:first-child { color: var(--encre-douce); }

.confirmation-icone {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--vert);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 18px;
}

.reference {
  font-family: 'Fraunces', serif;
  font-size: 1.15rem;
  color: var(--vert-fonce);
}

.erreur {
  background: #FBEAE6;
  border: 1px solid var(--rouge);
  color: var(--rouge);
  padding: 12px 14px;
  border-radius: 6px;
  margin-bottom: 18px;
  font-size: 0.92rem;
}

.aide {
  color: var(--encre-douce);
  font-size: 0.88rem;
  margin-top: 6px;
}

/* --- Espace administrateur : registre plus utilitaire --- */

.admin-barre {
  background: var(--vert-fonce);
  color: #fff;
  padding: 14px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.admin-barre a { color: #fff; text-decoration: none; margin-left: 18px; font-size: 0.9rem; }

.admin-contenu { max-width: 920px; margin: 0 auto; padding: 28px 24px 60px; }

.admin-nav {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.admin-nav a {
  padding: 8px 14px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--encre);
  border: 1px solid var(--ligne);
  font-size: 0.9rem;
}

.admin-nav a.actif { background: var(--vert); color: #fff; border-color: var(--vert); }

table.admin-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--panneau);
  border: 1px solid var(--ligne);
  border-radius: 8px;
  overflow: hidden;
}

table.admin-table th,
table.admin-table td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--ligne);
  font-size: 0.92rem;
}

table.admin-table th { background: #F1ECE1; font-weight: 600; }

table.admin-table tr:last-child td { border-bottom: none; }

.badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 600;
}

.badge-confirmee { background: #E3EEE4; color: var(--vert-fonce); }
.badge-annulee { background: #F3E3DE; color: var(--rouge); }

.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fond);
}

.login-panneau {
  width: 100%;
  max-width: 360px;
  background: var(--panneau);
  border: 1px solid var(--ligne);
  border-radius: 10px;
  padding: 32px;
}

@media (max-width: 480px) {
  .deux-colonnes { grid-template-columns: 1fr; }
}