/* Page praticiens — chargé sur elle seule (repris de _generation/corps/praticiens.css). */
/* ── Bandeau de connexion ─────────────────────────────────── */
.acces{ background:linear-gradient(180deg,var(--bleu-brume) 0%,var(--blanc) 100%); }
.acces__interieur{ padding-block:3rem 3.5rem; max-width:52ch; margin-inline:auto; text-align:center; }
.acces .surtitre{ font-size:.78rem; letter-spacing:.24em; text-transform:uppercase; color:var(--bleu-moyen); margin:0 0 1.25rem; }
.acces h1{ font-family:var(--serif); font-size:clamp(1.9rem,4.6vw,2.7rem); color:var(--bleu); margin-bottom:1rem; }
.acces p{ color:var(--gris); margin:0 0 2rem; }
.acces .bouton{ margin-inline:.25rem; }

/* Cadenas décoratif : il annonce la nature de la page avant même
   qu'on lise le titre. aria-hidden, il n'apporte rien à l'oral. */
.acces__icone{
  width:44px; height:44px; margin:0 auto 1.5rem; color:var(--bleu-clair);
}
.acces__icone svg{ width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.4; }

/* ── Ce que contient l'espace ─────────────────────────────── */
.fonctions{ display:grid; gap:1.5rem; }
@media (min-width:768px){ .fonctions{ grid-template-columns:repeat(3,1fr); } }
.fonction{
  background:var(--blanc); border:1px solid #e4eaec; border-radius:3px;
  padding:1.75rem 1.5rem;
}
.fonction h3{ font-family:var(--serif); font-size:1.15rem; color:var(--bleu); margin-bottom:.6rem; }
.fonction p{ color:var(--gris); font-size:.95rem; margin:0; }
.fonction__etat{
  display:inline-block; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--bleu-moyen); border:1px solid var(--bleu-clair); border-radius:2px;
  padding:.15rem .5rem; margin-bottom:.75rem;
}

/* ── Texte courant ────────────────────────────────────────── */
.texte{ max-width:66ch; margin-inline:auto; }
.texte h3{ font-family:var(--serif); font-size:1.15rem; color:var(--bleu); margin:2rem 0 .75rem; }
.texte h3:first-child{ margin-top:0; }
.texte p{ margin:0 0 1.15rem; }
.texte p:last-child{ margin-bottom:0; }
.texte strong{ font-weight:500; color:var(--encre); }

.encadre{
  max-width:66ch; margin:0 auto; padding:1.25rem 1.5rem;
  background:var(--creme); border-left:2px solid var(--bleu-clair); border-radius:3px;
}
.encadre h3{ font-family:var(--serif); font-size:1.05rem; color:var(--bleu); margin-bottom:.4rem; }
.encadre p{ margin:0; color:var(--gris); font-size:.93rem; }

/* ════════════════════════════════════════════════════════════
   LA CONNEXION (déconnecté) — code court [connexion], inc/espace.php
   ════════════════════════════════════════════════════════════ */
.connexion{ max-width:24rem; margin:0 auto 1.5rem; text-align:left; }
.connexion .connexion__message{ padding:.75rem 1rem; border-radius:3px; font-size:.93rem; margin:0 0 1.25rem; }
.connexion__message--erreur{ background:#fbecea; color:#8a2f25!important; border-left:3px solid #c0584a; }
.connexion__message--info{ background:var(--bleu-brume); color:var(--encre)!important; border-left:3px solid var(--bleu-clair); }
.connexion__formulaire{ background:var(--blanc); border:1px solid #e4eaec; border-radius:3px; padding:1.5rem; }
.connexion .champ{ margin:0 0 1rem; color:var(--encre); }
.connexion .bouton{ width:100%; margin:0; cursor:pointer; }
.connexion__oubli{ margin-top:1rem; font-size:.93rem; }
.connexion__oubli summary{ cursor:pointer; color:var(--bleu); }
.connexion__oubli form{ margin-top:.85rem; }
.acces .acces__rejoindre{ font-size:.93rem; margin:0; }

/* Les champs de formulaire : connexion et fenêtre de réservation.
   Texte à 16 px minimum : en dessous, l'iPhone zoome sur le champ. */
.champ label{ display:block; font-size:.9rem; color:var(--encre); margin-bottom:.35rem; font-weight:400; }
.champ input[type=text], .champ input[type=password], .champ select, .champ textarea{
  width:100%; font:inherit; font-size:1rem; line-height:1.4; padding:.65rem .75rem;
  border:1px solid #c3cfd3; border-radius:2px; background:var(--blanc); color:var(--encre);
}
.champ input:focus, .champ select:focus, .champ textarea:focus{ outline:2px solid var(--bleu-clair); outline-offset:1px; border-color:var(--bleu-moyen); }
.champ--case label{ display:flex; gap:.5rem; align-items:center; font-weight:300; }
.champ--case input{ width:1.1rem; height:1.1rem; accent-color:var(--bleu); }

/* ════════════════════════════════════════════════════════════
   L'ESPACE (connecté) — inc/espace.php + assets/js/pages/praticiens.js
   ════════════════════════════════════════════════════════════ */
.espace-entete{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:1rem 2rem; padding-block:1.25rem .5rem; }
.espace-entete__surtitre{ font-size:.78rem; letter-spacing:.24em; text-transform:uppercase; color:var(--bleu-moyen); margin:0 0 .4rem; }
.espace-entete__titre{ font-family:var(--serif); font-size:clamp(1.8rem,4.2vw,2.5rem); color:var(--bleu); }
.espace-entete__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:.75rem 1.25rem; margin:0; font-size:.93rem; }
.espace-entete__actions .bouton{ padding:.55rem 1.1rem; }
.espace-bloc{ padding-block:1.75rem; }
.espace__titre{ font-family:var(--serif); font-size:1.5rem; color:var(--bleu); margin-bottom:.5rem; }
.espace__aide{ color:var(--gris); font-size:.95rem; margin:0 0 1.25rem; max-width:72ch; }
.espace__chargement{ color:var(--gris); }
.espace__erreur{ color:#8a2f25; background:#fbecea; padding:.75rem 1rem; border-radius:3px; }
.espace button{ font:inherit; cursor:pointer; }
.espace button:disabled{ opacity:.4; cursor:default; }

/* ── Choix de la salle ─────────────────────────────────────── */
.salles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr)); gap:.5rem; margin-bottom:1rem; }
.salles__bouton{
  display:flex; flex-direction:column; align-items:flex-start; text-align:left;
  padding:.6rem .9rem; border:1px solid #d3dde0; border-radius:3px; background:var(--blanc); color:var(--encre);
}
.salles__bouton[aria-pressed="true"]{ border-color:var(--bleu); background:var(--bleu-brume); box-shadow:inset 0 -3px 0 var(--bleu); }
.salles__nom{ font-weight:400; line-height:1.3; }
.salles__surnom{ font-size:.78rem; color:var(--gris); }

/* ── Semaine précédente / suivante ─────────────────────────── */
.semaine-nav{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-bottom:.85rem; }
.semaine-nav__titre{ flex:1 1 100%; margin:0; font-family:var(--serif); font-size:1.15rem; color:var(--bleu); }
.semaine-nav__bouton{ padding:.4rem .8rem; font-size:.88rem!important; border:1px solid #d3dde0; border-radius:2px; background:var(--blanc); color:var(--bleu); }
.semaine-nav__courante{ margin-left:auto; }
@media (min-width:768px){
  .semaine-nav__titre{ flex:0 1 auto; order:1; margin-inline:.75rem; }
  .semaine-nav__bouton:nth-of-type(2){ order:2; }
  .semaine-nav__courante{ order:3; }
}

/* ── Jour affiché, sur téléphone ───────────────────────────── */
.jours-choix{ display:grid; grid-template-columns:repeat(7,1fr); gap:.25rem; margin-bottom:.6rem; }
.jours-choix__bouton{
  display:flex; flex-direction:column; align-items:center; line-height:1.25; padding:.35rem 0;
  font-size:.75rem!important; border:1px solid #e0e7e9; border-radius:3px; background:var(--blanc); color:var(--encre);
}
.jours-choix__bouton strong{ font-weight:400; font-size:.95rem; }
.jours-choix__bouton[aria-pressed="true"]{ background:var(--bleu); border-color:var(--bleu); color:var(--blanc); }

/* ════════════════════════════════════════════════════════════
   L'AGENDA
   ------------------------------------------------------------
   Une colonne des heures, puis une colonne par jour. Tout ce qui
   est dans une colonne est positionné en pourcentage de la
   journée d'ouverture (8 h – 23 h), calculé par le script.
   Sur téléphone, un seul jour à la fois (choisi au-dessus) ;
   à partir de 900 px, la semaine entière.
   ════════════════════════════════════════════════════════════ */
.agenda{
  --heure:3rem; --entete:3.1rem;
  display:grid; grid-template-columns:2.6rem minmax(0,1fr);
  border:1px solid #e4eaec; border-radius:3px; background:var(--blanc);
  padding-bottom:.8rem;   /* place pour l'étiquette « 23 h », posée à cheval sur le dernier filet */
  transition:opacity .15s;
}
.agenda[aria-busy="true"]{ opacity:.55; }
.agenda__heures{ position:relative; margin-top:var(--entete); height:calc(15 * var(--heure)); }
.agenda__heures span{ position:absolute; right:.4rem; transform:translateY(-.55em); font-size:.7rem; color:var(--gris); white-space:nowrap; }
.agenda__jour{ display:none; min-width:0; border-left:1px solid #edf1f2; }
.agenda__jour.est-choisi{ display:block; }
.agenda__entete{
  height:var(--entete); display:flex; flex-direction:column; align-items:center; justify-content:center;
  border-bottom:1px solid #e2e8ea; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--bleu-moyen); line-height:1.3; font-weight:400;
}
.agenda__entete strong{ font-weight:400; font-size:.92rem; letter-spacing:0; text-transform:none; color:var(--encre); }
.agenda__piste{
  position:relative; height:calc(15 * var(--heure));
  /* un filet à chaque heure */
  background-image:repeating-linear-gradient(to bottom,#e6ecee 0 1px,transparent 1px var(--heure));
}
.agenda__jour--passe .agenda__piste{ background-color:#f5f6f6; }
.agenda__jour--passe .agenda__entete{ color:#737c7e; }

@media (min-width:900px){
  .agenda{ --heure:2.5rem; grid-template-columns:3rem repeat(7,minmax(0,1fr)); }
  .agenda__jour{ display:block; }
  .jours-choix{ display:none; }
}

/* Une demi-heure libre : un bouton. Teinte légère en permanence, heure affichée au survol
   (souris) ou tout le temps (écran tactile, où le survol n'existe pas). */
.agenda__libre{
  position:absolute; left:2px; right:2px; z-index:2;
  display:flex; align-items:center; padding:0 .45rem; border:0; border-radius:2px;
  background:rgba(238,244,246,.6); border-top:1px solid var(--blanc);
  font-size:.72rem!important; color:transparent; text-align:left;
}
.agenda__libre span::before{ content:"+ "; }
.agenda__libre:hover, .agenda__libre:focus-visible{ background:var(--bleu-brume); color:var(--bleu); outline:1px solid var(--bleu-clair); outline-offset:-1px; }
@media (hover:none){ .agenda__libre{ color:var(--bleu-moyen); } }

/* Ce qui occupe la salle */
.agenda__occupation{
  position:absolute; left:2px; right:2px; z-index:3; overflow:hidden;
  padding:.25rem .45rem; border-radius:2px; border-left:3px solid #b6c5ca; background:#eef1f2;
  font-size:.75rem; line-height:1.3;
}
.agenda__occupation p{ margin:0; }
.agenda__horaire{ font-size:.68rem; color:var(--bleu-moyen); }
.agenda__nom{ font-family:var(--serif); font-size:.9rem; color:var(--bleu); }
.agenda__detail{ font-size:.7rem; color:var(--gris); }
/* La couleur de chaque personne, la même que sur la page Planning publique */
.teinte--brume{ background:#e6f0f4; border-left-color:#84b4c0; }
.teinte--sable{ background:#f6ecdb; border-left-color:#d8b678; }
.teinte--vert { background:#e3efe5; border-left-color:#8fbb99; }
.teinte--rose { background:#f7e7e5; border-left-color:#d4a8a2; }
.teinte--lilas{ background:#eae9f2; border-left-color:#a9a6c4; }
.agenda__occupation--moi{ background:var(--bleu); border-left-color:#17323a; }
.agenda__occupation--moi p{ color:var(--blanc); }
.agenda__occupation--blocage{ background:repeating-linear-gradient(135deg,#eceff0 0 6px,#dfe5e7 6px 12px); border-left-color:#8e9a9e; }
.agenda__occupation--blocage .agenda__nom{ color:var(--encre); }
/* Une plage fixe libérée reste visible, en pointillé, mais laisse passer les clics :
   les heures libres qu'elle recouvre restent réservables. */
.agenda__occupation--liberee{ z-index:1; background:transparent; border:1px dashed #a9bbc1; pointer-events:none; }
.agenda__occupation--liberee .agenda__nom{ color:var(--gris); }
/* Les marges de 30 minutes autour d'une demi-journée, d'une journée, d'une plage fixe */
.agenda__marge{ position:absolute; left:2px; right:2px; z-index:1; pointer-events:none; background:repeating-linear-gradient(135deg,transparent 0 4px,#e3e9eb 4px 6px); }
.agenda__ecoule{ position:absolute; left:0; right:0; z-index:1; pointer-events:none; background:#f5f6f6; }
.agenda__note{ position:absolute; inset:1rem .4rem auto; margin:0; text-align:center; font-size:.78rem; color:var(--gris); }

/* ── Légende ───────────────────────────────────────────────── */
.legende{ list-style:none; display:flex; flex-wrap:wrap; gap:.35rem 1.25rem; margin:.85rem 0 0; padding:0; font-size:.82rem; color:var(--gris); }
.legende li{ display:flex; align-items:center; gap:.45rem; }
.legende li::before{ content:""; flex:none; width:1.1rem; height:.85rem; border-radius:2px; }
.legende__libre::before{ background:var(--bleu-brume); outline:1px solid var(--bleu-clair); }
.legende__moi::before{ background:var(--bleu); }
.legende__occupe::before{ background:#e6f0f4; border-left:3px solid #84b4c0; }
.legende__liberee::before{ border:1px dashed #9fb2b8; }
.legende__marge::before{ background:repeating-linear-gradient(135deg,transparent 0 3px,#d4dde0 3px 5px); outline:1px solid #e4eaec; }
.legende__ferme::before{ background:repeating-linear-gradient(135deg,#eceff0 0 3px,#d2dadd 3px 6px); }

/* ── La fenêtre de réservation ─────────────────────────────── */
.dialogue{
  width:min(28rem, calc(100vw - 2rem)); max-height:calc(100vh - 2rem); overflow:auto;
  padding:0; border:0; border-radius:4px; color:var(--encre);
  box-shadow:0 18px 48px rgba(20,40,48,.28);
}
.dialogue::backdrop{ background:rgba(33,56,64,.45); }
.dialogue__formulaire{ padding:1.5rem; }
.dialogue__titre{ font-family:var(--serif); font-size:1.3rem; color:var(--bleu); }
.dialogue__date{ margin:.2rem 0 1rem; color:var(--gris); }
.dialogue__choix{ display:grid; gap:.4rem; margin:0 0 1rem; padding:0; border:0; }
.dialogue__choix legend{ padding:0; margin-bottom:.4rem; font-size:.9rem; }
.dialogue__option{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:0 .6rem;
  padding:.55rem .75rem; border:1px solid #d8e1e4; border-radius:3px; cursor:pointer;
}
.dialogue__option input{ accent-color:var(--bleu); width:1.05rem; height:1.05rem; margin:0; }
.dialogue__option:has(input:checked){ border-color:var(--bleu); background:var(--bleu-brume); }
.dialogue__horaire{ font-size:.88rem; color:var(--gris); white-space:nowrap; }
.dialogue__option.est-indisponible{ cursor:default; background:#f6f7f7; color:#6f787a; }
.dialogue__raison{ grid-column:2 / -1; font-size:.76rem; color:#6f787a; }
.dialogue .champ{ margin:0 0 .9rem; }
.dialogue__erreur{ margin:0 0 .5rem; padding:.6rem .8rem; border-radius:3px; background:#fbecea; color:#8a2f25; font-size:.9rem; }
.dialogue__actions{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.6rem; margin:1.25rem 0 0; }
.dialogue .bouton{ padding:.7rem 1.3rem; cursor:pointer; }
.dialogue .bouton:disabled{ opacity:.6; cursor:default; }

/* ── Mes réservations ──────────────────────────────────────── */
.mes{ list-style:none; margin:0; padding:0; border-top:1px solid #e4eaec; }
.mes__ligne{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:.15rem 1rem; padding:.85rem 0; border-bottom:1px solid #e4eaec; }
.mes__ligne p{ margin:0; }
.mes__quand strong{ font-weight:400; color:var(--encre); }
.mes__quand span{ color:var(--bleu-moyen); white-space:nowrap; }
.mes__quoi{ grid-column:1; font-size:.9rem; color:var(--gris); }
.mes__annuler{ grid-column:2; grid-row:1 / span 2; padding:.45rem .9rem; font-size:.88rem!important; border:1px solid #c0584a; border-radius:2px; background:var(--blanc); color:#8a2f25; }
.mes__annuler:hover{ background:#fbecea; }
.mes__commencee{ grid-column:2; grid-row:1 / span 2; font-size:.8rem; color:var(--gris); }
.mes__vide{ color:var(--gris); }
#mes-reservations button{ font:inherit; cursor:pointer; }

/* ── Message de confirmation, en bas de l'écran ────────────── */
.annonce{
  position:fixed; left:50%; bottom:1.25rem; z-index:60; transform:translateX(-50%);
  width:max-content; max-width:calc(100vw - 2rem); margin:0; padding:.8rem 1.2rem; border-radius:3px;
  background:var(--encre); color:var(--blanc); font-size:.93rem; box-shadow:0 8px 24px rgba(0,0,0,.2);
}
.annonce--erreur{ background:#8a2f25; }

/* ── Mes plages fixes ──────────────────────────────────────── */
.plages{ display:grid; gap:.85rem; }
.plage{ padding:1rem 1.15rem; border:1px solid #e4eaec; border-radius:3px; background:var(--blanc); }
.plage__entete{ display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:.75rem 1rem; }
.plage__titre{ font-family:var(--serif); font-size:1.15rem; color:var(--bleu); }
.plage__quoi{ margin:.15rem 0 0; font-size:.9rem; color:var(--gris); }
.plage__liberer{ padding:.5rem 1rem; font-size:.9rem; }
.plage__message{ margin:.85rem 0 0; padding:.6rem .8rem; border-radius:3px; background:#fbecea; color:#8a2f25; font-size:.9rem; }
.plage__sous-titre{ margin:1rem 0 .45rem; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--bleu-moyen); }
.liberations{ display:grid; gap:.6rem; margin:0; padding:0; list-style:none; }
.liberation{ padding:.65rem .8rem; border-left:2px dashed #9fb2b8; border-radius:2px; background:var(--creme); }
.liberation__titre{ margin:0 0 .45rem; font-size:.92rem; }
.liberation__titre strong{ font-weight:400; color:var(--bleu); }
.liberation__jours{ display:flex; flex-wrap:wrap; gap:.35rem; margin:0; padding:0; list-style:none; }
.liberation__jour{
  display:inline-flex; align-items:center; gap:.15rem; padding:.1rem .15rem .1rem .65rem;
  border:1px solid #d6dfe2; border-radius:999px; background:var(--blanc); font-size:.85rem;
}
/* 2 rem : une cible assez grande pour le doigt */
.liberation__retablir{ width:2rem; height:2rem; border:0; border-radius:50%; background:transparent; color:var(--gris); font-size:1.05rem; line-height:1; }
.liberation__retablir:hover, .liberation__retablir:focus-visible{ background:#fbecea; color:#8a2f25; }
.liberation__tout{ margin-top:.55rem; padding:0; border:0; background:none; color:var(--bleu); font-size:.88rem; text-decoration:underline; text-underline-offset:.2em; }
#mes-plages button{ font-family:inherit; cursor:pointer; }

.plages__actions{ margin:0 0 1rem; }
.plages__actions .bouton{ cursor:pointer; padding:.7rem 1.4rem; }
#mes-plages > .plage__message{ margin:1rem 0 0; }
.liberation__plage{ margin-left:.4rem; font-size:.78rem; color:var(--gris); }

/* La fenêtre « Déclarer une absence » */
.dialogue__plages{ max-height:15rem; overflow:auto; }
.dialogue__dates{ display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
.champ input[type=date]{
  width:100%; font:inherit; font-size:1rem; line-height:1.4; padding:.6rem .7rem;
  border:1px solid #c3cfd3; border-radius:2px; background:var(--blanc); color:var(--encre);
}
.dialogue__apercu{ margin:-.25rem 0 .9rem; font-size:.9rem; color:var(--bleu-moyen); }
.dialogue__apercu:empty{ display:none; }
.dialogue__note{ margin:0 0 .5rem; font-size:.85rem; color:var(--gris); }