/* Pages de rendez-vous : complète style.css (le même que le formulaire de demande). */

.surtitre { color: var(--accent-lien); font-weight: 700; font-size: 13.5px; letter-spacing: 0.06em; text-transform: uppercase; }
.entete .surtitre + h1 { margin-top: 6px; }
#reservation { margin-top: 18px; }
[data-mode="decision"] .appeler { display: none; } /* page de l'artisan : pas besoin de s'appeler soi-même */
.jour small:last-of-type { text-transform: none; }
.pastilles { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.pastilles li {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--bord); color: var(--texte-2); font-size: 14px; font-weight: 600;
}
.pastilles svg { flex: none; color: var(--accent-lien); width: 16px; height: 16px; }

/* Boutons secondaires (voir les créneaux, déplacer, annuler, refuser) */
.secondaire {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 12px 20px;
  border: 1.5px solid var(--accent); border-radius: 14px; background: var(--surface); color: var(--accent-lien);
  font: inherit; font-size: 16px; font-weight: 700; text-decoration: none; cursor: pointer;
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}
.secondaire:hover { background: var(--accent-doux); transform: translateY(-1px); }
.secondaire:focus-visible { outline: none; box-shadow: var(--anneau); }
.secondaire:disabled { opacity: 0.6; cursor: progress; transform: none; }
.secondaire.large { width: 100%; margin-top: 18px; }
.secondaire.danger { border-color: color-mix(in srgb, var(--danger) 55%, var(--bord)); color: var(--danger); }
.secondaire.danger:hover { background: var(--danger-doux); }
.principal.danger { background: var(--danger); box-shadow: 0 12px 24px -12px color-mix(in srgb, var(--danger) 85%, transparent); }

/* --- Choix du jour --- */
.choix-creneau .etat { padding: 16px; border-radius: var(--rayon-petit); background: var(--champ); border: 1.5px dashed var(--bord-fort); color: var(--texte-2); font-size: 15px; }
.conseil { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 12px; padding: 10px 12px; border-radius: var(--rayon-petit); background: var(--ok-doux); color: var(--texte); font-size: 14px; font-weight: 550; }
.etoile { color: #e0a100; font-style: normal; font-size: 15px; line-height: 1.3; }
.jours { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; }
.jour { position: relative; display: block; cursor: pointer; }
.jour input, .heure input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; opacity: 0; cursor: pointer; }
.jour span {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 9px 4px 8px;
  border: 1.5px solid var(--bord); border-radius: var(--rayon-petit); background: var(--surface); line-height: 1.15;
  transition: border-color 0.15s, background 0.15s, color 0.15s, transform 0.15s;
}
.jour small { font-size: 12.5px; font-weight: 600; color: var(--discret); text-transform: capitalize; }
.jour b { font-size: 20px; font-weight: 750; letter-spacing: -0.02em; }
.jour .etoile { position: absolute; top: 2px; right: 5px; font-size: 12px; }
.jour.proche span { border-color: color-mix(in srgb, var(--ok) 45%, var(--bord)); background: var(--ok-doux); }
.jour:hover span { border-color: var(--accent); transform: translateY(-1px); }
.jour input:checked + span { border-color: var(--accent); background: var(--accent); color: #fff; box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--accent) 80%, transparent); }
.jour input:checked + span small { color: rgba(255, 255, 255, 0.85); }
.jour input:checked + span .etoile { color: #ffd34d; }
.jour input:focus-visible + span, .heure input:focus-visible + span { box-shadow: var(--anneau); border-color: var(--accent); }
.plus-de-jours {
  display: block; margin: 10px auto 0; padding: 8px 14px; border: 0; background: none; color: var(--accent-lien);
  font: inherit; font-size: 14.5px; font-weight: 650; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}

/* --- Choix de l'heure --- */
.heures:not(:empty) { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--bord); }
.jour-choisi { font-weight: 700; font-size: 16px; }
.moment { margin: 12px 0 8px; font-size: 13px; font-weight: 650; color: var(--discret); text-transform: uppercase; letter-spacing: 0.05em; }
.grille-heures { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.heure { position: relative; display: block; cursor: pointer; }
.heure span {
  display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 8px;
  border: 1.5px solid var(--bord); border-radius: var(--rayon-petit); background: var(--surface);
  font-weight: 650; font-size: 15.5px; font-variant-numeric: tabular-nums; transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.heure:hover span { border-color: var(--accent); background: var(--accent-doux); }
.heure input:checked + span { border-color: var(--accent); background: var(--accent); color: #fff; }
.en-erreur .jour span, .en-erreur .heure span { border-color: color-mix(in srgb, var(--danger) 50%, var(--bord)); }

.recap {
  margin-top: 18px; padding: 12px 16px; border-radius: var(--rayon-petit); background: var(--accent-doux);
  color: var(--texte); font-weight: 700; text-align: center;
}

/* --- Accueil : les types de rendez-vous --- */
.liste-types { display: grid; gap: 12px; margin-top: 20px; }
.carte-type {
  display: flex; align-items: center; gap: 14px; padding: 18px; border: 1px solid var(--bord); border-radius: var(--rayon);
  background: var(--surface); box-shadow: var(--ombre); color: var(--texte); text-decoration: none;
  transition: border-color 0.15s, transform 0.15s;
}
.carte-type:hover { border-color: var(--accent); transform: translateY(-1px); }
.carte-type > span { flex: 1; min-width: 0; display: grid; gap: 3px; }
.carte-type b { font-size: 17px; font-weight: 750; }
.carte-type small { color: var(--texte-2); font-size: 14.5px; }
.carte-type small + small { color: var(--discret); }
.carte-type > svg { flex: none; color: var(--accent-lien); }

/* --- Fiche du rendez-vous (gérer, décision) --- */
.fiche { margin-top: 18px; }
.fiche > * + * { margin-top: 8px; }
.statut { display: inline-block; padding: 4px 11px; border-radius: 999px; font-size: 13.5px; font-weight: 700; background: var(--champ); color: var(--texte-2); }
.statut.attente { background: #fff4d6; color: #8a5a00; }
.statut.ok { background: var(--ok-doux); color: var(--ok); }
.statut.ko { background: var(--danger-doux); color: var(--danger); }
.quand { font-size: 21px; font-weight: 750; letter-spacing: -0.015em; }
.duree { color: var(--texte-2); }
.fiche dl { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--bord); display: grid; gap: 10px; }
.ligne-fiche { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; }
.ligne-fiche dt { color: var(--discret); font-size: 14.5px; }
.ligne-fiche dd { margin: 0; font-weight: 550; overflow-wrap: anywhere; white-space: pre-line; }
.actions-rdv { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.actions-rdv > * { flex: 1 1 160px; margin-top: 0; min-height: 54px; }
.note { margin-top: 16px; padding: 12px 16px; border-radius: var(--rayon-petit); background: var(--surface); border: 1px solid var(--bord); color: var(--texte-2); }
.message-ok { margin-top: 16px; padding: 12px 16px; border-radius: var(--rayon-petit); background: var(--ok-doux); color: var(--ok); font-weight: 650; }
#vue-deplacer h2, #vue-raison h2 { margin-bottom: 16px; }
.confirmation .secondaire { margin-top: 6px; }

/* Lien prérempli : l'objet et le bonjour en tête de page */
.objet-rdv { margin-top: 12px; font-size: 16px; color: var(--texte-2); }
.objet-rdv b { color: var(--texte); font-weight: 700; }
.bonjour { padding: 12px 16px; border-radius: var(--rayon-petit); background: var(--accent-doux); color: var(--texte); font-weight: 550; }

/* --- Page « Envoyer un lien » (pour l'artisan) --- */
.bloc h2 .facultatif { margin-left: auto; }
.grille + .grille, .grille + .seulement-domicile, .seulement-domicile > .question + .grille { margin-top: 22px; }
.modeles { display: flex; flex-wrap: wrap; gap: 8px; }
.modele {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 9px 14px;
  border: 1.5px solid var(--bord); border-radius: var(--rayon-petit); background: var(--surface); color: var(--texte);
  font: inherit; font-size: 15px; font-weight: 650; text-align: left; cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.modele small { font-size: 13px; font-weight: 500; color: var(--discret); }
.modele:hover { border-color: var(--accent); background: var(--accent-doux); }
.modele.choisi { border-color: var(--accent); background: var(--accent); color: #fff; }
.modele.choisi small { color: rgba(255, 255, 255, 0.85); }
.apercu-message {
  padding: 14px 16px; border-radius: var(--rayon-petit); background: var(--champ); border: 1.5px solid var(--bord);
  font-size: 15px; white-space: pre-line; overflow-wrap: anywhere;
}
.apercu-message.vide { color: var(--discret); border-style: dashed; }
.envois .principal { width: auto; }
.envois .inactif { opacity: 0.45; pointer-events: none; }
p.discret { margin-top: 14px; }
@media (prefers-color-scheme: dark) {
  :root:not(.integre):not([data-theme="clair"]) .statut.attente { background: #3a2e10; color: #f2c661; }
}

@media (max-width: 480px) {
  .jours { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .jour b { font-size: 18px; }
  .grille-heures { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ligne-fiche { grid-template-columns: 1fr; gap: 2px; }
}