/* Page planning-reservation — chargé sur elle seule (repris de _generation/corps/planning-reservation.css). */
/* ── Héro sobre, sans photo ───────────────────────────────── */
.hero-titre{ background:linear-gradient(180deg,var(--bleu-brume) 0%,var(--blanc) 100%); }
.hero-titre__interieur{ padding-block:2.5rem 3rem; max-width:66ch; }
.hero-titre .surtitre{ font-size:.78rem; letter-spacing:.24em; text-transform:uppercase; color:var(--bleu-moyen); margin:0 0 1.25rem; }
.hero-titre h1{ font-family:var(--serif); font-size:clamp(1.9rem,4.6vw,2.9rem); color:var(--bleu); margin-bottom:1.25rem; }
.hero-titre p{ margin:0 0 1rem; }
.hero-titre p:last-child{ margin-bottom:0; }

/* ════════════════════════════════════════════════════════════
   LES PLANNINGS HEBDOMADAIRES
   ------------------------------------------------------------
   Deux mises en page pour une seule structure HTML.

   À partir de 900 px : les sept jours deviennent sept colonnes,
   et chaque créneau est positionné à sa hauteur réelle dans la
   journée. On lit la semaine d'un coup d'œil, comme sur un
   agenda — c'est ce que faisaient les images de l'ancien site,
   en moins lisible.

   En dessous : les colonnes ne tiennent pas. Les jours se
   déroulent alors les uns sous les autres, en liste, et les
   journées vides disparaissent. Aucun défilement latéral.
   ════════════════════════════════════════════════════════════ */

.espace-planning + .espace-planning{ margin-top:3.5rem; }

.espace-planning__entete{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem 1rem;
  padding-bottom:.85rem; margin-bottom:1.5rem;
  border-bottom:1px solid #e2e8ea;
}
.espace-planning__nom{ font-family:var(--serif); font-size:1.4rem; color:var(--bleu); }
.espace-planning__surnom{
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--bleu-moyen); border:1px solid var(--bleu-clair);
  border-radius:2px; padding:.15rem .55rem;
}
.espace-planning__description{ color:var(--gris); font-size:.95rem; margin-left:auto; }

/* ── Mise en page mobile (par défaut) ─────────────────────── */
.semaine__heures,
.semaine__trame{ display:none; }
.jour{ margin-bottom:1.25rem; }
.jour:last-child{ margin-bottom:0; }
.jour--vide{ display:none; }
.jour__nom{
  font-size:.75rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--bleu-moyen); margin:0 0 .5rem; font-weight:400;
}
.jour__piste{ display:grid; gap:.6rem; }

.creneau{
  /* Teinte neutre par défaut : un praticien sans « Couleur de ses créneaux » (fiche praticien)
     garde un créneau lisible. Les classes creneau--<couleur>, plus bas, la remplacent. */
  --creneau-fond:#f1f4f5; --creneau-trait:#c5d1d5;
  border-radius:3px; padding:.75rem .9rem;
  border-left:3px solid var(--creneau-trait);
  background:var(--creneau-fond);
  overflow:hidden;
}
.creneau__heures{
  font-size:.78rem; letter-spacing:.06em; color:var(--bleu-moyen);
  margin:0 0 .2rem;
}
.creneau__praticien{
  font-family:var(--serif); font-weight:400;
  font-size:1.18rem; color:var(--bleu);
  line-height:1.25; margin:0 0 .25rem;
}
/* Le nom est cliquable : un soulignement discret le dit d'emblée.
   Sans lui, rien ne distingue le nom d'un simple titre, et le renvoi
   vers la fiche — donc vers les coordonnées — passe inaperçu. */
.creneau__praticien a{
  color:inherit; text-decoration:underline;
  text-decoration-color:var(--bleu-clair);
  text-decoration-thickness:1px; text-underline-offset:.2em;
}
.creneau__praticien a:hover{ text-decoration-color:var(--bleu); }
.creneau__pratique{
  font-size:.92rem; color:var(--encre); line-height:1.4; margin:0;
}
.creneau__detail{ font-size:.82rem; color:var(--gris); line-height:1.45; margin:.3rem 0 0; }

/* Teintes pastel, une par praticien : la même personne se reconnaît
   d'un tableau à l'autre. Fonds très clairs, textes en encre —
   tous au-dessus de 9:1, largement au-delà du minimum AA. */
.creneau--brume{ --creneau-fond:#e6f0f4; --creneau-trait:#84b4c0; }
.creneau--sable{ --creneau-fond:#f6ecdb; --creneau-trait:#d8b678; }
.creneau--vert { --creneau-fond:#e3efe5; --creneau-trait:#8fbb99; }
.creneau--rose { --creneau-fond:#f7e7e5; --creneau-trait:#d4a8a2; }
.creneau--lilas{ --creneau-fond:#eae9f2; --creneau-trait:#a9a6c4; }

.planning-etat{ text-align:center; color:var(--gris); margin:2rem 0; }

/* ── Mise en page agenda, à partir de 900 px ──────────────── */
@media (min-width:900px){
  .semaine{
    display:grid;
    grid-template-columns:3.25rem repeat(7, 1fr);
    gap:0 2px;
    background:var(--blanc);
    border:1px solid #e4eaec;
    border-radius:3px;
    padding:0 .75rem .75rem 0;
  }

  /* La colonne des heures porte aussi les filets horizontaux,
     qui débordent sur toute la largeur de la grille. */
  .semaine__heures{
    display:block; position:relative;
    grid-row:2; grid-column:1;
    height:var(--hauteur);
  }
  .semaine__heures span{
    position:absolute; right:.55rem; transform:translateY(-.55em);
    font-size:.72rem; color:var(--gris); white-space:nowrap;
  }
  /* Les filets horizontaux vivent sur leur propre calque, qui couvre
     exactement les sept colonnes de jours. Posés sur la colonne des
     heures, ils auraient eu sa largeur. */
  .semaine__trame{
    position:relative; grid-row:2; grid-column:2 / -1;
    height:var(--hauteur); pointer-events:none;
  }
  .semaine__trame i{
    position:absolute; left:0; right:0;
    border-top:1px solid #e2e8ea;
  }

  .jour{ margin:0; grid-row:1 / span 2; display:flex; flex-direction:column; }
  .jour--vide{ display:flex; }
  .jour__nom{
    text-align:center; padding:.7rem .25rem .55rem;
    margin:0; border-bottom:1px solid #e2e8ea;
  }
  .jour__piste{
    position:relative; display:block; height:var(--hauteur);
    margin-top:0; border-left:1px solid #f0f3f4;
  }
  .jour:first-of-type .jour__piste{ border-left:0; }

  .creneau{
    position:absolute; left:3px; right:3px;
    top:var(--debut); height:var(--duree);
    padding:.6rem .7rem; border-radius:2px;
    display:flex; flex-direction:column;
  }
  .creneau__heures{ font-size:.72rem; margin-bottom:.3rem; }
  .creneau__praticien{ font-size:1.1rem; }
  .creneau__pratique{ font-size:.87rem; }
  .creneau__detail{ font-size:.78rem; }
}

/* Sur les très grands écrans, les colonnes respirent. */
@media (min-width:1100px){
  .creneau{ padding:.75rem .85rem; }
  .creneau__praticien{ font-size:1.18rem; }
  .creneau__pratique{ font-size:.9rem; }
}

/* ── Note de bas de tableau ───────────────────────────────── */
.planning-note{
  max-width:70ch; margin:2.5rem auto 0; padding:1.15rem 1.35rem;
  background:var(--creme); border-left:2px solid var(--bleu-clair); border-radius:3px;
  font-size:.93rem; color:var(--gris);
}
.planning-note strong{ font-weight:500; color:var(--encre); }