/* ============================================================================
   Les Tadornes — Maison de vacances partagée
   Identité : encre de nuit / bleu marée / laiton de phare
   ============================================================================ */

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

:root {
  /* Palette */
  --encre:        #0B2545;
  --encre-clair:  #13315C;
  --maree:        #1D5C8A;
  --maree-clair:  #2E7DAD;
  --laiton:       #E8B45C;
  --laiton-clair: #F2C97D;
  --sable:        #F4F1EA;
  --algue:        #3D8C70;
  --alerte:       #C9554A;

  /* Typo */
  --police-titre: 'Fraunces', serif;
  --police-corps: 'Inter', sans-serif;
  --police-cadran: 'JetBrains Mono', monospace;

  /* Échelle */
  --rayon: 10px;
  --rayon-grand: 18px;
  --ombre: 0 8px 24px rgba(5, 16, 33, 0.35);
}

* { box-sizing: border-box; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--encre);
  color: var(--sable);
  font-family: var(--police-corps);
  min-height: 100vh;
}

body {
  background-image:
    radial-gradient(circle at 15% 0%, rgba(29, 92, 138, 0.25), transparent 45%),
    radial-gradient(circle at 85% 100%, rgba(232, 180, 92, 0.08), transparent 40%);
}

a { color: var(--laiton-clair); }

h1, h2, h3 {
  font-family: var(--police-titre);
  font-weight: 600;
  margin: 0;
  letter-spacing: 0.01em;
}

button {
  font-family: var(--police-corps);
  cursor: pointer;
}

/* ---------- En-tête ---------- */

.entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.5rem;
  background: linear-gradient(180deg, var(--encre-clair), var(--encre));
  border-bottom: 1px solid rgba(232, 180, 92, 0.18);
  position: sticky;
  top: 0;
  z-index: 50;
}

.entete__marque {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.entete__phare {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
}

.entete__titre {
  font-size: 1.35rem;
  color: var(--sable);
}

.entete__sous-titre {
  font-size: 0.75rem;
  color: var(--maree-clair);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-top: 0.1rem;
}

.entete__utilisateur {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 0.9rem;
}

.pastille-famille {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  font-size: 0.8rem;
}

.pastille-famille__point {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
}

.bouton-texte {
  background: none;
  border: none;
  color: var(--maree-clair);
  font-size: 0.85rem;
  text-decoration: underline;
  padding: 0;
}
.bouton-texte:hover { color: var(--laiton-clair); }

/* ---------- Navigation ---------- */

.nav-principale {
  display: flex;
  gap: 0.4rem;
  padding: 0.6rem 1.5rem;
  background: rgba(7, 20, 41, 0.6);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  overflow-x: auto;
}

.nav-principale__lien {
  background: none;
  border: none;
  color: rgba(244, 241, 234, 0.65);
  font-size: 0.92rem;
  padding: 0.5rem 0.9rem;
  border-radius: var(--rayon);
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}

.nav-principale__lien:hover {
  background: rgba(255,255,255,0.05);
  color: var(--sable);
}

.nav-principale__lien.actif {
  background: var(--maree);
  color: var(--sable);
  font-weight: 600;
}

/* ---------- Conteneur principal ---------- */

.conteneur {
  max-width: 1180px;
  margin: 0 auto;
  padding: 1.5rem;
}

.ecran { display: none; }
.ecran.visible { display: block; }

.entete-ecran {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-bottom: 1.3rem;
}

.entete-ecran h2 { font-size: 1.6rem; }
.entete-ecran p {
  margin: 0.3rem 0 0;
  color: rgba(244,241,234,0.6);
  font-size: 0.92rem;
}

/* ---------- Boutons ---------- */

.bouton {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.2rem;
  border-radius: var(--rayon);
  border: none;
  font-size: 0.92rem;
  font-weight: 600;
  transition: transform 0.12s, box-shadow 0.12s, background 0.15s;
}
.bouton:active { transform: translateY(1px); }

.bouton--primaire {
  background: var(--laiton);
  color: var(--encre);
}
.bouton--primaire:hover { background: var(--laiton-clair); box-shadow: 0 4px 14px rgba(232,180,92,0.3); }

.bouton--secondaire {
  background: rgba(255,255,255,0.08);
  color: var(--sable);
}
.bouton--secondaire:hover { background: rgba(255,255,255,0.14); }

.bouton--danger {
  background: rgba(201, 85, 74, 0.15);
  color: #f0a99f;
}
.bouton--danger:hover { background: rgba(201, 85, 74, 0.3); }

.bouton--pleine-largeur { width: 100%; justify-content: center; }
.bouton:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- Cartes / panneaux ---------- */

.panneau {
  background: var(--encre-clair);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--rayon-grand);
  padding: 1.4rem;
  box-shadow: var(--ombre);
}

.panneau + .panneau { margin-top: 1.2rem; }

/* ---------- Connexion ---------- */

.ecran-connexion {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.carte-connexion {
  width: 100%;
  max-width: 400px;
  text-align: center;
}

.carte-connexion .entete__phare { width: 56px; height: 56px; margin: 0 auto 0.8rem; display: block; }
.carte-connexion h1 { font-size: 1.7rem; margin-bottom: 0.3rem; }
.carte-connexion p.intro { color: rgba(244,241,234,0.6); font-size: 0.9rem; margin: 0 0 1.5rem; }

.champ {
  text-align: left;
  margin-bottom: 1rem;
}
.champ label {
  display: block;
  font-size: 0.82rem;
  color: rgba(244,241,234,0.7);
  margin-bottom: 0.35rem;
}
.champ input, .champ select, .champ textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border-radius: var(--rayon);
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(7,20,41,0.45);
  color: var(--sable);
  font-family: var(--police-corps);
  font-size: 0.95rem;
}
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: 2px solid var(--laiton);
  outline-offset: 1px;
  border-color: transparent;
}
.champ--cadran input {
  font-family: var(--police-cadran);
  letter-spacing: 0.03em;
}

.message-erreur {
  background: rgba(201, 85, 74, 0.15);
  border: 1px solid rgba(201, 85, 74, 0.4);
  color: #f0a99f;
  border-radius: var(--rayon);
  padding: 0.7rem 0.9rem;
  font-size: 0.85rem;
  margin-bottom: 1rem;
  text-align: left;
  display: none;
}
.message-erreur.visible { display: block; }

.message-succes {
  background: rgba(61, 140, 112, 0.15);
  border: 1px solid rgba(61, 140, 112, 0.4);
  color: #9fe0c4;
  border-radius: var(--rayon);
  padding: 0.7rem 0.9rem;
  font-size: 0.85rem;
  margin-bottom: 1rem;
  text-align: left;
  display: none;
}
.message-succes.visible { display: block; }

/* ---------- Planning : bande de marée ---------- */

.bande-maree {
  position: relative;
  overflow-x: auto;
  border-radius: var(--rayon-grand);
  border: 1px solid rgba(255,255,255,0.06);
  background:
    linear-gradient(180deg, transparent 0%, transparent 60%, rgba(29,92,138,0.18) 100%),
    var(--encre-clair);
}

.bande-maree__mois {
  display: flex;
  flex-direction: column;
}

.bande-maree__etiquette-mois {
  position: sticky;
  left: 0;
  display: inline-block;
  font-family: var(--police-titre);
  font-size: 1.05rem;
  color: var(--laiton-clair);
  padding: 0.9rem 1.2rem 0.4rem;
  text-transform: capitalize;
}

.grille-jours {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
  gap: 3px;
  padding: 0 1rem 1.1rem;
}

.jour {
  position: relative;
  aspect-ratio: 1;
  min-height: 46px;
  border-radius: 7px;
  background: rgba(255,255,255,0.035);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  font-size: 0.72rem;
  color: rgba(244,241,234,0.55);
  font-family: var(--police-cadran);
  cursor: default;
}

.jour__semaine {
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.7;
}

.jour__numero {
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1;
}

.jour.week-end {
  background: rgba(232, 180, 92, 0.06);
}

.jour.aujourdhui {
  box-shadow: inset 0 0 0 2px var(--laiton);
  color: var(--laiton-clair);
}
.jour.aujourdhui .jour__numero { font-weight: 700; }

.jour.passe { opacity: 0.4; }
.jour.passe.occupe { opacity: 0.75; }

.jour.occupe {
  color: #FFFFFF;
  text-shadow: 0 1px 2px rgba(0,0,0,0.55);
  box-shadow: 0 2px 6px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(255,255,255,0.25);
  filter: saturate(1.35) brightness(1.12);
}
.jour.occupe .jour__semaine { opacity: 0.95; }
.jour.occupe .jour__numero { font-weight: 700; }

.jour.occupe.statut-annulee {
  opacity: 0.35;
  text-decoration: line-through;
}

.jour.selectionnable:hover {
  background: rgba(232,180,92,0.18);
  cursor: pointer;
}

/* Légende des familles */

.legende-familles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1rem 0 0;
}

/* ---------- Liste de réservations ---------- */

.liste-reservations { display: flex; flex-direction: column; gap: 0.8rem; }

.carte-reservation {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.2rem;
  background: rgba(255,255,255,0.03);
  border-radius: var(--rayon);
  border-left: 4px solid var(--maree);
  flex-wrap: wrap;
}

.carte-reservation.statut-annulee {
  opacity: 0.55;
  border-left-color: var(--alerte);
}

.carte-reservation.statut-terminee {
  border-left-color: var(--algue);
}

.carte-reservation__dates {
  font-family: var(--police-cadran);
  font-size: 0.95rem;
  font-weight: 600;
  min-width: 190px;
}

.carte-reservation__meta {
  flex: 1;
  font-size: 0.85rem;
  color: rgba(244,241,234,0.65);
}

.carte-reservation__badge {
  font-size: 0.72rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
}
.badge-confirmee { background: rgba(29,92,138,0.3); color: #a9d4ee; }
.badge-terminee { background: rgba(61,140,112,0.3); color: #9fe0c4; }
.badge-annulee { background: rgba(201,85,74,0.25); color: #f0a99f; }

.badge-log-succes { background: rgba(61,140,112,0.3); color: #9fe0c4; }
.badge-log-echec { background: rgba(201,85,74,0.25); color: #f0a99f; }

.ligne-email-suspect {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  font-size: 0.88rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ligne-email-suspect:last-child { border-bottom: none; }
.ligne-email-suspect strong { font-family: var(--police-cadran); color: #f0a99f; }

.carte-reservation__actions {
  display: flex;
  gap: 0.5rem;
}

.carte-reservation__actions .bouton {
  padding: 0.45rem 0.8rem;
  font-size: 0.8rem;
}

/* ---------- Cadrans de compteurs (signature visuelle) ---------- */

.grille-cadrans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin: 1rem 0;
}

.bloc-cadran {
  background: rgba(7,20,41,0.5);
  border-radius: var(--rayon-grand);
  padding: 1.1rem;
  border: 1px solid rgba(255,255,255,0.07);
}

.bloc-cadran__titre {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: rgba(244,241,234,0.6);
  margin-bottom: 0.7rem;
}

.bloc-cadran__icone { width: 16px; height: 16px; }

.bloc-cadran__champs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
}

.cadran {
  background: var(--encre);
  border-radius: var(--rayon);
  padding: 0.6rem 0.7rem;
  border: 1px solid rgba(255,255,255,0.08);
}

.cadran label {
  display: block;
  font-size: 0.68rem;
  color: rgba(244,241,234,0.5);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.3rem;
}

.cadran input {
  width: 100%;
  background: none;
  border: none;
  color: var(--laiton-clair);
  font-family: var(--police-cadran);
  font-size: 1.15rem;
  font-weight: 700;
  padding: 0;
}
.cadran input:focus { outline: none; }

.bloc-cadran__consommation {
  margin-top: 0.8rem;
  padding-top: 0.7rem;
  border-top: 1px dashed rgba(255,255,255,0.1);
  font-size: 0.85rem;
  color: rgba(244,241,234,0.75);
}
.bloc-cadran__consommation strong {
  font-family: var(--police-cadran);
  color: var(--sable);
  font-size: 1rem;
}

/* ---------- Synthèse ---------- */

.cartes-totaux {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.carte-total {
  border-radius: var(--rayon-grand);
  padding: 1.2rem;
  background: rgba(255,255,255,0.03);
  border-top: 4px solid var(--maree);
}

.carte-total h3 { font-size: 1.05rem; margin-bottom: 0.7rem; }

.carte-total__ligne {
  display: flex;
  justify-content: space-between;
  font-size: 0.88rem;
  padding: 0.3rem 0;
  color: rgba(244,241,234,0.75);
}
.carte-total__ligne strong {
  font-family: var(--police-cadran);
  color: var(--sable);
}

.tableau-detail {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.tableau-detail th, .tableau-detail td {
  padding: 0.6rem 0.7rem;
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.tableau-detail th {
  color: rgba(244,241,234,0.55);
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
}
.tableau-detail td.numerique { font-family: var(--police-cadran); text-align: right; }
.tableau-detail-conteneur { overflow-x: auto; }

/* ---------- État vide ---------- */

.etat-vide {
  text-align: center;
  padding: 2.5rem 1rem;
  color: rgba(244,241,234,0.5);
}
.etat-vide__icone { width: 44px; height: 44px; margin: 0 auto 0.8rem; opacity: 0.5; }

/* ---------- Fenêtre modale (nouvelle réservation) ---------- */

.fond-modale {
  position: fixed;
  inset: 0;
  background: rgba(5, 13, 28, 0.7);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 1rem;
}
.fond-modale.visible { display: flex; }

.modale {
  width: 100%;
  max-width: 460px;
  max-height: 90vh;
  overflow-y: auto;
}

.modale__entete {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.1rem;
}

.modale__fermer {
  background: none;
  border: none;
  color: rgba(244,241,234,0.6);
  font-size: 1.3rem;
  line-height: 1;
  padding: 0.2rem;
}
.modale__fermer:hover { color: var(--sable); }

.rangee-champs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
}

/* ---------- Pied de page ---------- */

.pied-page {
  text-align: center;
  padding: 2rem 1rem;
  color: rgba(244,241,234,0.35);
  font-size: 0.78rem;
}

/* ---------- Responsive ---------- */

@media (max-width: 640px) {
  .entete { padding: 0.9rem 1rem; }
  .entete__titre { font-size: 1.1rem; }
  .entete__sous-titre { display: none; }
  .conteneur { padding: 1rem; }
  .rangee-champs { grid-template-columns: 1fr; }
  .carte-reservation { flex-direction: column; align-items: flex-start; }
  .carte-reservation__actions { width: 100%; }
  .entete-ecran { flex-direction: column; align-items: flex-start; }
  .grille-jours { grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); }
  .jour { min-height: 40px; }
  .jour__semaine { font-size: 0.52rem; }
  .jour__numero { font-size: 0.74rem; }
}