/* Charte du Pavillon Gaïa, reprise du site. Pas de build : le fichier est servi
   tel quel, ce qui permet de déployer sur un hébergement mutualisé sans Node. */
:root {
  --vert:       #53664C;
  --vert-fonce: #354136;
  --vert-clair: #A9B895;
  --vert-voile: #E6EBDE;
  --rose:       #D98282;
  --rose-voile: #FBEDEA;
  --creme:      #FAF4EA;
  --creme-2:    #F3EADC;
  --bord:       #E7DCC9;
  --blanc:      #FFFCF7;
  --encre:      #2C3729;
  --encre-2:    #4A5546;
  --encre-3:    #6E7A6A;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--creme);
  color: var(--encre);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.enveloppe { width: min(100% - 2rem, 78rem); margin-inline: auto; padding-block: 2rem 4rem; }

/* ------------------------------------------------------------------ entête */
.entete { display: flex; flex-wrap: wrap; align-items: baseline; gap: .75rem 1.5rem; margin-bottom: 1.75rem; }
.entete h1 { margin: 0; font-size: 1.5rem; font-weight: 600; color: var(--vert-fonce); }
.entete .qui { margin-left: auto; font-size: .9rem; color: var(--encre-3); }
.entete form { display: inline; }
.lien-nu { background: none; border: 0; padding: 0; font: inherit; color: var(--rose); cursor: pointer; text-decoration: underline; }

/* --------------------------------------------------------------- navigation */
.navigation { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.navigation .semaine { font-weight: 600; color: var(--vert-fonce); }
.bouton {
  padding: .45rem .9rem; border: 1px solid var(--bord); border-radius: 8px;
  background: var(--blanc); color: var(--encre-2); font: inherit; font-size: .9rem; cursor: pointer;
}
.bouton:hover:not(:disabled) { border-color: var(--vert-clair); }
.bouton:disabled { opacity: .4; cursor: default; }

/* -------------------------------------------------------------------- avis */
.avis { padding: .7rem 1rem; border-radius: 9px; margin-bottom: 1rem; font-size: .93rem; }
.avis.ok     { background: var(--vert-voile); color: var(--vert-fonce); }
.avis.erreur { background: var(--rose-voile); color: #B85D5D; }

/* ------------------------------------------------------------------ grille */
.cadre { overflow-x: auto; border: 1px solid var(--bord); border-radius: 12px; background: var(--blanc); }
table.grille { border-collapse: collapse; width: 100%; min-width: 46rem; }
table.grille th, table.grille td { border: 1px solid var(--bord); padding: 0; }
table.grille thead th {
  padding: .6rem .5rem; background: var(--creme-2); font-size: .85rem; font-weight: 600;
  color: var(--vert-fonce); text-align: center; line-height: 1.3;
}
table.grille thead th .date { display: block; font-weight: 400; color: var(--encre-3); }
table.grille tbody th {
  width: 5.5rem; padding: .5rem; background: var(--creme-2); font-size: .82rem;
  font-weight: 500; color: var(--encre-2); white-space: nowrap;
}

.creneau {
  display: block; width: 100%; min-height: 3rem; padding: .4rem .5rem;
  border: 0; background: none; font: inherit; font-size: .82rem; text-align: center; cursor: pointer;
}
.creneau:disabled { cursor: default; }

.creneau.libre        { background: var(--blanc); color: var(--vert-clair); }
.creneau.libre:hover  { background: var(--vert-voile); color: var(--vert-fonce); }
.creneau.moi          { background: var(--vert); color: var(--creme); font-weight: 600; }
.creneau.moi:hover    { background: var(--vert-fonce); }
.creneau.occupe       { background: var(--creme-2); color: var(--encre-3); }
.creneau.passe        { background: var(--creme); color: var(--bord); }
.creneau.hors         { background: repeating-linear-gradient(135deg, var(--creme-2) 0 6px, var(--creme) 6px 12px); }
.creneau .serie       { display: block; font-size: .72rem; font-weight: 400; opacity: .85; }

/* ------------------------------------------------------------------ légende */
.legende { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 1rem; font-size: .85rem; color: var(--encre-3); }
.legende span { display: inline-flex; align-items: center; gap: .45rem; }
.pastille { width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--bord); }
.pastille.libre  { background: var(--blanc); }
.pastille.moi    { background: var(--vert); }
.pastille.occupe { background: var(--creme-2); }

/* ---------------------------------------------------------------- connexion */
.connexion { width: min(100% - 2rem, 24rem); margin: 12vh auto 0; }
.connexion h1 { font-size: 1.4rem; color: var(--vert-fonce); margin: 0 0 .4rem; }
.connexion p.intro { color: var(--encre-2); margin: 0 0 1.4rem; }
.connexion label:not(.nom) { display: block; font-size: .88rem; font-weight: 600; margin-bottom: .35rem; }
.connexion input:not([type="radio"]) {
  width: 100%; padding: .65rem .8rem; border: 1px solid var(--bord); border-radius: 9px;
  background: var(--blanc); font: inherit; margin-bottom: .9rem;
}
.connexion input:not([type="radio"]):focus { outline: 2px solid var(--vert-clair); outline-offset: 1px; }
.connexion button {
  width: 100%; padding: .7rem; border: 0; border-radius: 9px;
  background: var(--vert); color: var(--creme); font: inherit; font-weight: 600; cursor: pointer;
}
.connexion button:hover { background: var(--vert-fonce); }
.erreur-champ { color: #B85D5D; font-size: .85rem; margin: -.5rem 0 .9rem; }

@media (max-width: 640px) {
  .enveloppe { padding-block: 1.25rem 3rem; }
  .entete h1 { font-size: 1.25rem; }
}

/* ------------------------------------------------------ choix du praticien */
.connexion--large { width: min(100% - 2rem, 40rem); margin-top: 8vh; }

.visages {
  list-style: none; margin: 0 0 1.6rem; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: .9rem;
}

.connexion .visage {
  display: flex; flex-direction: column; align-items: center; gap: .55rem;
  padding: .8rem .5rem; border: 1px solid var(--bord); border-radius: 13px;
  background: var(--blanc); cursor: pointer; text-align: center;
  transition: border-color .12s, transform .12s;
}
.connexion .visage:hover { border-color: var(--vert-clair); transform: translateY(-1px); }

/* Le bouton radio n'est pas masqué à l'assistance vocale, seulement à l'œil :
   c'est lui qui porte l'état sélectionné et le focus au clavier. */
.connexion .visage input {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
}
.connexion .visage:has(input:checked) { border-color: var(--vert); background: var(--vert-voile); }
.connexion .visage:has(input:checked) img,
.connexion .visage:has(input:checked) .initiales { box-shadow: 0 0 0 3px var(--vert); }
.connexion .visage:has(input:focus-visible) { outline: 2px solid var(--vert); outline-offset: 2px; }

.connexion .visage img,
.connexion .visage .initiales {
  width: 4.6rem; height: 4.6rem; border-radius: 50%; object-fit: cover;
  background: var(--creme-2); transition: box-shadow .12s;
}
.connexion .visage .initiales {
  display: grid; place-items: center;
  font-weight: 600; font-size: 1.2rem; color: var(--vert);
}
.connexion .visage .prenom { font-size: .92rem; font-weight: 600; color: var(--encre); line-height: 1.2; }

/* -------------------------------------------------- panneau d'un créneau */
.voile { position: fixed; inset: 0; background: rgba(44, 55, 41, .35); z-index: 10; }
.panneau {
  position: fixed; z-index: 11; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(100% - 2rem, 27rem); padding: 1.4rem 1.5rem 1.2rem;
  background: var(--blanc); border: 1px solid var(--bord); border-radius: 14px;
  box-shadow: 0 18px 48px rgba(44, 55, 41, .22);
}
.panneau h2 { margin: 0 0 1rem; font-size: 1.05rem; color: var(--vert-fonce); }
/* capitalize mettrait aussi une majuscule au mois, qui n'en prend pas en français */
.panneau h2::first-letter { text-transform: uppercase; }
.panneau label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .35rem; }
.panneau select, .panneau input[type="number"] {
  width: 100%; padding: .55rem .7rem; border: 1px solid var(--bord); border-radius: 9px;
  background: var(--creme); font: inherit; margin-bottom: 1rem;
}
.panneau .choix { border: 0; margin: 0 0 1rem; padding: 0; }
.panneau .choix legend { font-size: .85rem; font-weight: 600; padding: 0; margin-bottom: .4rem; }
.panneau .option {
  display: flex; align-items: center; gap: .6rem; font-weight: 400; margin-bottom: .35rem;
  padding: .5rem .7rem; border: 1px solid var(--bord); border-radius: 9px; cursor: pointer;
}
.panneau .option:has(input:checked) { border-color: var(--vert); background: var(--vert-voile); }
.panneau .option input { margin: 0; accent-color: var(--vert); }
.panneau .duree { display: flex; align-items: baseline; gap: .7rem; }
.panneau .duree input { width: 5rem; margin-bottom: 0; }
.panneau .duree span { font-size: .85rem; color: var(--encre-3); }
.panneau .occupant { margin: 0 0 1.2rem; color: var(--encre-2); }
.panneau .actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; margin-top: 1.2rem; }
.bouton.principal { background: var(--vert); border-color: var(--vert); color: var(--creme); font-weight: 600; }
.bouton.principal:hover:not(:disabled) { background: var(--vert-fonce); border-color: var(--vert-fonce); }
.creneau.actif { outline: 2px solid var(--vert); outline-offset: -2px; }

/* ------------------------------------------------------- récapitulatif */
table.recap tbody th, table.recap tfoot th { text-align: left; width: auto; white-space: normal; }
table.recap td, table.recap th { padding: .6rem .8rem; }
table.recap .nombre { text-align: right; font-variant-numeric: tabular-nums; }
table.recap tfoot { font-weight: 600; background: var(--creme-2); }
.entete .qui a { color: var(--rose); }