@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@700&family=Public+Sans:wght@400;600;700&display=swap');

:root {
  --corail: #FF5A3C;
  --corail-d: #D6431F;
  --lagon: #17C3B2;
  --lagon-d: #0E8F82;
  --graphite: #15181C;
  --ecume: #FAF7F2;
  --gris-texte: #5B6675;
  --bordure: #E3E0DA;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--ecume);
  color: var(--graphite);
  font-family: "Public Sans", -apple-system, system-ui, sans-serif;
  display: flex;
  justify-content: center;
  padding: 48px 20px;
}

.cadre {
  width: 100%;
  max-width: 640px;
}

.cadre-large { max-width: 880px; }

.hero {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-bottom: 32px;
}

.hero .autruche {
  width: 130px;
  height: auto;
  flex-shrink: 0;
}

@media (max-width: 560px) {
  .hero { flex-direction: column; text-align: center; gap: 14px; }
  .hero .autruche { width: 110px; }
}

.deroule {
  border: 1px solid var(--bordure);
  border-radius: 12px;
  background: #fff;
  padding: 22px 26px;
  margin-bottom: 32px;
}

.deroule h2 {
  font-family: "Space Grotesk", "Public Sans", sans-serif;
  font-size: 17px;
  margin: 0 0 12px;
}

.etapes {
  margin: 0;
  padding-left: 20px;
  color: var(--gris-texte);
  font-size: 14.5px;
  line-height: 1.55;
}

.etapes li { margin-bottom: 8px; }
.etapes li:last-child { margin-bottom: 0; }
.etapes strong { color: var(--graphite); }

.titre-choix {
  font-family: "Space Grotesk", "Public Sans", sans-serif;
  font-size: 20px;
  margin: 0 0 18px;
}

.choix-types {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 8px;
}

.carte-type {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  border: 1px solid var(--bordure);
  border-left: 4px solid var(--corail);
  border-radius: 14px;
  background: #fff;
  padding: 22px 24px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}

.carte-type:hover {
  border-color: var(--corail);
  box-shadow: 0 8px 24px rgba(255, 90, 60, .12);
  transform: translateY(-2px);
}

.carte-type-titre {
  font-family: "Space Grotesk", "Public Sans", sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: var(--graphite);
}

.carte-type-desc {
  font-size: 14px;
  line-height: 1.5;
  color: var(--gris-texte);
}

#bouton-changer-type { margin-bottom: 14px; }

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

#titre-semaine {
  font-family: "Space Grotesk", "Public Sans", sans-serif;
  font-weight: 700;
  font-size: 16px;
}

.bouton-nav {
  border: 1px solid var(--bordure);
  border-radius: 8px;
  background: #fff;
  width: 38px;
  height: 38px;
  font-size: 16px;
  cursor: pointer;
}

.bouton-nav:hover:not(:disabled) { border-color: var(--lagon); }
.bouton-nav:disabled { opacity: .35; cursor: default; }

.semaine {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}

.colonne-jour {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.titre-jour {
  font-family: "Space Grotesk", "Public Sans", sans-serif;
  font-weight: 700;
  font-size: 13.5px;
  text-align: center;
  padding: 8px 4px;
  border-bottom: 2px solid var(--bordure);
  text-transform: capitalize;
}

.jour-complet {
  color: var(--gris-texte);
  font-size: 13px;
  text-align: center;
  padding: 10px 0;
}

@media (max-width: 640px) {
  .semaine { grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); }
}

h1 {
  font-family: "Space Grotesk", "Public Sans", sans-serif;
  font-size: 28px;
  font-weight: 700;
  margin: 0;
}

.sous-titre {
  margin: 10px 0 32px;
  color: var(--gris-texte);
  font-size: 16px;
  line-height: 1.5;
}

.grille-creneaux {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}

.creneau {
  border: 1px solid var(--bordure);
  border-radius: 10px;
  background: #fff;
  padding: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: border-color .15s, background .15s;
}

.creneau:hover {
  border-color: var(--lagon);
  background: rgba(23, 195, 178, .06);
}

/* Heure absente de ce jour-là : elle tient sa place pour que les lignes de la
   semaine restent alignées, mais elle ne se prend pas. */
.creneau.indispo {
  color: var(--gris-texte);
  background: transparent;
  border-style: dashed;
  opacity: .5;
  cursor: default;
}

.creneau.indispo:hover {
  border-color: var(--bordure);
  background: transparent;
}

.chargement, .rien {
  color: var(--gris-texte);
  font-size: 15px;
}

.formulaire {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}

.creneau-choisi {
  font-weight: 700;
  font-size: 16px;
  margin: 0 0 6px;
}

.formulaire input, .formulaire textarea {
  border: 1px solid var(--bordure);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 14px;
  font-family: inherit;
}

.formulaire input:focus, .formulaire textarea:focus {
  outline: none;
  border-color: var(--lagon);
}

.actions {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 8px;
}

.bouton-primaire {
  background: var(--corail);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 13px 28px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.bouton-primaire:hover { background: var(--corail-d); }
.bouton-primaire:disabled { opacity: .6; cursor: default; }

.bouton-secondaire {
  background: none;
  border: none;
  color: var(--lagon-d);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 8px 0;
}

.confirmation {
  border-radius: 12px;
  border: 1px solid var(--lagon);
  background: rgba(23, 195, 178, .08);
  padding: 24px;
}

.confirmation h2 {
  font-family: "Space Grotesk", "Public Sans", sans-serif;
  margin: 0 0 8px;
  font-size: 20px;
}

.erreur {
  border-radius: 10px;
  border: 1px solid var(--corail);
  background: rgba(255, 90, 60, .08);
  color: var(--corail-d);
  padding: 14px 16px;
  font-size: 14px;
  margin-top: 16px;
}