/* ═══════════════════════════════════════════════════════════════
   CALENDRIER ANIMOSTEO — feuille de style
   Reprend la charte partagee avec la Clinique Pedagogique et
   l'application Patient : meme palette, memes formes, meme
   typographie. Aucune dependance CSS externe.
   =============================================================== */

:root {
  --color-bg: #faf8f5;
  --color-surface: #ffffff;
  --color-surface-offset: #f4f1ec;
  --color-border: #e7e2da;
  --color-divider: #efeae2;

  --color-text: #1a1a1a;
  --color-text-muted: #5b6b73;
  --color-text-faint: #a9b4b9;
  --color-text-inverse: #ffffff;
  --color-heading: #24465c;

  --color-primary: #24465c;
  --color-primary-hover: #1b3648;
  --color-primary-active: #142a39;
  --color-primary-highlight: #e8edf0;

  --color-accent: #ef6c00;
  --color-accent-hover: #d35f00;
  --color-accent-highlight: #fdece0;

  --color-mint: #4db6ac;
  --color-clinic: #27796f;
  --color-clinic-hover: #1f6a61;
  --color-clinic-highlight: #e7f5f3;

  --color-success: #27796f;
  --color-success-highlight: #e7f5f3;
  --color-error: #a3372a;
  --color-error-highlight: #fbe6e3;
  --color-warning: #a94e00;
  --color-warning-highlight: #fdece0;

  --radius-sm: .5rem;
  --radius-md: .75rem;
  --radius-lg: .875rem;
  --radius-xl: 1.125rem;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 2px rgba(36, 70, 92, .06);
  --shadow-md: 0 1px 2px rgba(36, 70, 92, .04), 0 8px 24px -8px rgba(36, 70, 92, .12);

  --font-body: 'Mulish', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Fraunces', Georgia, serif;

  --transition: 240ms cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }

/* L'attribut hidden doit primer sur les regles de display de cette feuille.
   Sans cela, un .champ masque par le JavaScript reste visible : la regle
   display:flex de l'auteur l'emporte sur le display:none du navigateur. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--color-heading);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 .5rem;
}
h1 { font-size: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem); }
h2 { font-size: clamp(1.125rem, 1rem + .75vw, 1.5rem); }

a { color: var(--color-primary); text-underline-offset: .2em; }
a:hover { color: var(--color-primary-hover); }

/* ── En-tete ──────────────────────────────────────────────── */

.entete {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-sm);
}

.entete__interieur {
  max-width: 1400px;
  margin: 0 auto;
  padding: .75rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.signature { display: flex; align-items: center; gap: .625rem; text-decoration: none; }

.signature__pastille {
  width: 2.25rem; height: 2.25rem;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, .12);
  display: grid; place-items: center;
  color: var(--color-mint);
  flex: none;
}
.signature__pastille svg { width: 1.25rem; height: 1.25rem; }

.signature__texte { font-family: var(--font-display); font-size: 1.0625rem; letter-spacing: .01em; }
.signature__texte b { color: var(--color-text-inverse); font-weight: 600; }
.signature__texte span { color: var(--color-mint); font-weight: 500; }

.entete__espace { flex: 1 1 auto; }

.entete__menu { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; }

.entete__lien {
  color: rgba(255, 255, 255, .82);
  text-decoration: none;
  padding: .4rem .7rem;
  border-radius: var(--radius-sm);
  font-size: .9375rem;
  font-weight: 500;
  transition: background var(--transition), color var(--transition);
}
.entete__lien:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.entete__lien--actif { background: rgba(255, 255, 255, .16); color: #fff; }

.entete__identite {
  font-size: .875rem;
  color: rgba(255, 255, 255, .7);
  padding-left: .75rem;
  border-left: 1px solid rgba(255, 255, 255, .2);
}

/* ── Mise en page ─────────────────────────────────────────── */

.page { max-width: 1400px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }
.page--etroite { max-width: 480px; }

.carte {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 1.5rem;
}

.barre-outils {
  display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

/* ── Formulaires ──────────────────────────────────────────── */

.champ { display: flex; flex-direction: column; gap: .35rem; }
.champ + .champ { margin-top: 1rem; }

.champ label {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--color-text-muted);
  letter-spacing: .02em;
  text-transform: uppercase;
}

.champ input[type="text"], .champ input[type="password"], .champ input[type="email"],
.champ input[type="date"], .champ input[type="time"], .champ select, .champ textarea {
  font: inherit;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: .55rem .7rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-highlight);
}

.champ--case { flex-direction: row; align-items: center; gap: .5rem; }
.champ--case label { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--color-text); }

/* ── Boutons ──────────────────────────────────────────────── */

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  font: inherit; font-weight: 600;
  padding: .55rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.bouton svg { width: 1.05em; height: 1.05em; }

/* Logo d'une application sœur : un peu plus grand qu'une icône de trait, parce
   que c'est une vignette pleine et non un pictogramme, et arrondi comme la
   favicon qu'il reprend. */
.bouton__logo { display: inline-flex; flex: none; }
.bouton__logo svg { width: 1.3em; height: 1.3em; border-radius: .28em; }

.bouton--principal { background: var(--color-accent); color: var(--color-text-inverse); }
.bouton--principal:hover { background: var(--color-accent-hover); color: var(--color-text-inverse); }

.bouton--secondaire { background: var(--color-surface); color: var(--color-primary); border-color: var(--color-border); }
.bouton--secondaire:hover { background: var(--color-primary-highlight); }

.bouton--discret { background: transparent; color: var(--color-text-muted); }
.bouton--discret:hover { background: var(--color-surface-offset); color: var(--color-text); }

.bouton--large { width: 100%; }

/* ── Messages ─────────────────────────────────────────────── */

.message {
  border-radius: var(--radius-md);
  padding: .7rem .9rem;
  margin-bottom: 1rem;
  font-size: .9375rem;
  border: 1px solid transparent;
}
.message--success { background: var(--color-success-highlight); color: var(--color-success); border-color: #cbe6e1; }
.message--error   { background: var(--color-error-highlight);   color: var(--color-error);   border-color: #f2cdc7; }
.message--warning { background: var(--color-warning-highlight); color: var(--color-warning); border-color: #f6d8bd; }
.message--info    { background: var(--color-primary-highlight); color: var(--color-heading); border-color: #d3dee5; }

/* ── Etiquettes ───────────────────────────────────────────── */

.etiquette {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .75rem; font-weight: 700; letter-spacing: .02em;
  padding: .15rem .5rem;
  border-radius: var(--radius-full);
  background: var(--color-surface-offset);
  color: var(--color-text-muted);
}
.etiquette--annee { background: var(--color-clinic-highlight); color: var(--color-clinic); }

/* ── Agenda ───────────────────────────────────────────────── */

.agenda { background: var(--color-surface); border: 1px solid var(--color-border);
          border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 1rem; }

.fc { --fc-border-color: var(--color-divider);
      --fc-today-bg-color: var(--color-accent-highlight);
      --fc-page-bg-color: var(--color-surface);
      font-family: var(--font-body); }

.fc .fc-toolbar-title { font-family: var(--font-display); color: var(--color-heading); font-size: 1.25rem; }

.fc .fc-button {
  background: var(--color-surface); color: var(--color-primary);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  font-weight: 600; text-transform: none; box-shadow: none;
}
.fc .fc-button:hover { background: var(--color-primary-highlight); color: var(--color-primary-hover); }
.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
  background: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-inverse);
}
.fc .fc-button-primary:disabled { background: var(--color-surface-offset); color: var(--color-text-faint); border-color: var(--color-border); }
.fc .fc-button:focus { box-shadow: 0 0 0 3px var(--color-primary-highlight); }

/* Rendu d'un cours. L'intitule doit rester lisible sans clic : c'est le
   principal reproche fait a un planning. */
.fc-event { border: none; border-radius: var(--radius-sm); padding: 4px 6px; }
.fc-event-main { overflow: hidden; }

.evt { display: flex; flex-direction: column; gap: 3px; overflow: hidden; }
.evt__entete { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; }
.evt__heure { font-size: .75rem; font-weight: 800; letter-spacing: .01em; opacity: .9; }

/* Pastilles en trait plutot qu'en aplat : elles restent lisibles aussi bien
   sur une couleur de promotion sombre que sur une pale. */
.evt__badge {
  font-size: .6875rem; font-weight: 800; line-height: 1;
  padding: 2px 5px; border-radius: var(--radius-full);
  border: 1px solid currentColor; opacity: .85;
  white-space: nowrap;
}
.evt__badge--emargement { border-style: dashed; }

/* Pastille du lieu : fond plein a sa propre couleur, posee sur la couleur de
   la promotion. Elle doit donc porter son propre contraste, sans quoi elle
   disparaitrait sur certaines combinaisons. */
.evt__badge--lieu { opacity: 1; }

.evt__titre { font-size: .84375rem; font-weight: 600; line-height: 1.3; white-space: normal;
              overflow-wrap: anywhere; }

/* Les anniversaires sont des journees entieres, sans horaire ni pastille. */
.evt--anniversaire { font-size: .8125rem; font-weight: 600; white-space: normal; overflow-wrap: anywhere; }

/* En vue mensuelle, un cours occupe toute la largeur du jour et s'etale sur
   autant de lignes qu'il en faut. */
.fc-daygrid-event { white-space: normal; align-items: flex-start; }
.fc-daygrid-event-harness { margin-bottom: 3px; }
.fc-daygrid-day-frame { padding-bottom: .25rem; }
.fc .fc-daygrid-day-number { font-weight: 700; color: var(--color-heading); font-size: .8125rem; }
.fc .fc-daygrid-week-number { background: var(--color-surface-offset); color: var(--color-text-muted);
                              font-size: .6875rem; font-weight: 700; padding: 2px 6px; }

/* Samedi et dimanche ne portent jamais de cours : on leur laisse la moitie
   d'une colonne ordinaire, et les cinq jours ouvres se partagent le reste —
   environ 19 % de largeur gagnee chacun, ce qui fait tenir les intitules sur
   moins de lignes. Uniquement en vue mensuelle : la vue semaine a besoin de
   ses sept colonnes egales pour rester lisible.
   La largeur est posee sur l'en-tete et sur la cellule du jour : ce sont deux
   tableaux distincts, qui doivent recevoir la meme consigne pour rester
   alignes. */
.fc-dayGridMonth-view .fc-col-header-cell.fc-day-sat,
.fc-dayGridMonth-view .fc-col-header-cell.fc-day-sun,
.fc-dayGridMonth-view .fc-daygrid-day.fc-day-sat,
.fc-dayGridMonth-view .fc-daygrid-day.fc-day-sun { width: 7.5%; }

/* En dessous de cette largeur, l'ecran est trop etroit pour que le partage
   ait un sens : on revient a sept colonnes egales. */
@media (max-width: 700px) {
  .fc-dayGridMonth-view .fc-col-header-cell.fc-day-sat,
  .fc-dayGridMonth-view .fc-col-header-cell.fc-day-sun,
  .fc-dayGridMonth-view .fc-daygrid-day.fc-day-sat,
  .fc-dayGridMonth-view .fc-daygrid-day.fc-day-sun { width: auto; }
}

/* En vue semaine, les colonnes sont etroites : on masque l'horaire, deja
   donne par la grille, pour laisser la place a l'intitule. */
.fc-timegrid-event .evt__heure { display: none; }
.fc-timegrid-event .evt__titre { font-size: .6875rem; }

.fc-col-header-cell { background: var(--color-surface-offset); }
.fc-col-header-cell-cushion { color: var(--color-heading); font-weight: 700; font-size: .8125rem; text-transform: uppercase; letter-spacing: .03em; }

/* ── Panneau de detail d'un cours ─────────────────────────── */

.panneau {
  position: fixed; inset: auto 0 0 auto; top: 0; height: 100%; width: min(420px, 100%);
  background: var(--color-surface); border-left: 1px solid var(--color-border);
  box-shadow: -12px 0 32px -16px rgba(36, 70, 92, .3);
  transform: translateX(100%); transition: transform var(--transition);
  display: flex; flex-direction: column; z-index: 40;
}
.panneau[data-ouvert="true"] { transform: translateX(0); }
.panneau__entete { padding: 1.25rem; border-bottom: 1px solid var(--color-divider); }
.panneau__corps { padding: 1.25rem; overflow-y: auto; flex: 1; }
.panneau__pied { padding: 1rem 1.25rem; border-top: 1px solid var(--color-divider); display: flex; gap: .5rem; }
.panneau__pied--souple { flex-wrap: wrap; }

.detail { display: grid; grid-template-columns: 7rem 1fr; gap: .4rem 1rem; font-size: .9375rem; }
.detail dt { color: var(--color-text-muted); font-weight: 600; font-size: .8125rem; text-transform: uppercase; letter-spacing: .02em; }
.detail dd { margin: 0; }

.valeur-promotion { display: inline-flex; align-items: center; gap: .4rem; }
.puce-promotion {
  width: 11px; height: 11px; border-radius: var(--radius-full); flex: none;
  box-shadow: inset 0 0 0 1px rgba(36, 70, 92, .25);
}

/* ── Etat de l'emargement dans le panneau ─────────────────── */

.panneau__attente { color: var(--color-text-faint); font-size: .875rem; }

.emargement__resume {
  margin: 1.25rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--color-divider);
  font-weight: 600;
  color: var(--color-heading);
}

.emargement__bloc { margin-top: 1rem; }

.emargement__titre {
  font-family: var(--font-body);
  font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 .4rem;
}

.emargement__vide { margin: 0; font-size: .9375rem; color: var(--color-text-muted); }

.jetons { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }

.jeton {
  font-size: .8125rem; font-weight: 600;
  padding: .2rem .55rem;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
}
.jeton--absent { background: var(--color-error-highlight); color: var(--color-error); border-color: #f2cdc7; }
.jeton--depart { background: var(--color-warning-highlight); color: var(--color-warning); border-color: #f6d8bd; }
.jeton--rattrapage { background: var(--color-primary-highlight); color: var(--color-heading); border-color: #d3dee5; }

/* Rattrapage d'une signature, propose sur chaque absent a l'administrateur. */
.jeton__action {
  font: inherit; font-size: .6875rem; font-weight: 700;
  margin-left: .4rem; padding: 0 .35rem;
  color: inherit; background: rgba(255, 255, 255, .6);
  border: 1px solid currentColor; border-radius: var(--radius-full);
  cursor: pointer;
}
.jeton__action:hover { background: #fff; }
.jeton__action:disabled { opacity: .5; cursor: default; }

/* ── Formulaire de modification d'un cours ────────────────── */

.formulaire-cours .champ + .champ { margin-top: .875rem; }
.formulaire-cours select[multiple] { min-height: 5.5rem; }
.formulaire-cours__erreurs:empty { display: none; }
.formulaire-cours__actions {
  display: flex; gap: .5rem; align-items: center;
  margin-top: 1.25rem; padding-top: 1rem;
  border-top: 1px solid var(--color-divider);
}

/* ── Ecran de connexion ───────────────────────────────────── */

.connexion { min-height: 100dvh; display: grid; place-items: center; padding: 2rem 1.25rem; }
.connexion__carte { width: 100%; max-width: 400px; }
.connexion__signature { display: flex; flex-direction: column; align-items: center; gap: .75rem; margin-bottom: 1.75rem; }
.connexion__signature .signature__pastille {
  width: 3.25rem; height: 3.25rem; background: var(--color-primary); border-radius: var(--radius-lg);
}
.connexion__signature .signature__pastille svg { width: 1.75rem; height: 1.75rem; }
.connexion__signature .signature__texte { font-size: 1.375rem; }
.connexion__signature .signature__texte b { color: var(--color-heading); }
.connexion__signature .signature__texte span { color: var(--color-clinic); }

.aide { font-size: .875rem; color: var(--color-text-muted); text-align: center; margin-top: 1.25rem; }

@media (max-width: 640px) {
  .entete__interieur { padding: .625rem .875rem; }
  .page { padding: 1rem .875rem 3rem; }
  .carte { padding: 1.125rem; }
}

/* ── Zone de signature ────────────────────────────────────── */

.zone-signature {
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-md);
  background: #fff;
  touch-action: none;
}
.zone-signature canvas { display: block; width: 100%; height: 220px; border-radius: var(--radius-md); }
.zone-signature--panneau canvas { height: 170px; }