/* ═══════════════════════════════════════════════════════════════
   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; }

/* Menu : tous les liens sont rangés derrière le bouton « Menu », sur
   téléphone comme sur ordinateur, pour garder le haut de l'écran libre. */
.entete__menu { display: flex; flex-direction: column; align-items: stretch; gap: .125rem; }

.entete__lien {
  color: rgba(255, 255, 255, .82);
  text-decoration: none;
  padding: .55rem .75rem;
  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:focus-visible { outline: 2px solid var(--color-mint); outline-offset: -2px; }
.entete__lien--actif { background: rgba(255, 255, 255, .16); color: #fff; }

/* Applications sœurs : petite flèche « s'ouvre ailleurs » ; la mention
   « (nouvel onglet) » reste pour les lecteurs d'écran. */
.entete__lien--appli { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.entete__lien--appli::after {
  content: "";
  flex: none;
  width: .8rem; height: .8rem;
  background: currentColor;
  opacity: .6;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4L10 14M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4L10 14M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.entete__onglet {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.entete__groupe {
  margin: .5rem .75rem .125rem;
  font-size: .6875rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-mint);
}
.entete__separateur { height: 1px; margin: .375rem .5rem; background: rgba(255, 255, 255, .14); }

/* L'identité en tête du menu : on sait sous quel compte on est avant de
   choisir où aller. */
.entete__identite {
  font-size: .875rem;
  color: rgba(255, 255, 255, .7);
  padding: .25rem .75rem .5rem;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  margin-bottom: .25rem;
  overflow-wrap: anywhere;
}

.entete__interieur { position: relative; }

.entete__bascule {
  display: inline-flex;
  align-items: center; gap: .45rem;
  font: inherit; font-size: .9375rem; font-weight: 600;
  color: #fff;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--radius-sm);
  padding: .45rem .75rem;
  cursor: pointer;
}
.entete__bascule:hover { background: rgba(255, 255, 255, .2); }
.entete__bascule:focus-visible { outline: 2px solid var(--color-mint); outline-offset: 2px; }
.entete__bascule svg { width: 1.25rem; height: 1.25rem; }
.entete__croix { display: none; }
.entete__bascule[aria-expanded="true"] .entete__trait { display: none; }
.entete__bascule[aria-expanded="true"] .entete__croix { display: inline; }

/* Le tiroir : fermé par défaut, ouvert par le bouton. */
.entete__tiroir { display: none; flex-direction: column; align-items: stretch; }
.entete[data-menu-ouvert="true"] .entete__tiroir { display: flex; }

/* Ordinateur : un panneau sous le bouton, au-dessus de l'agenda. */
@media (min-width: 961px) {
  .entete__tiroir {
    position: absolute;
    top: calc(100% - .25rem);
    right: 1.25rem;
    z-index: 50;
    width: 18rem;
    padding: .5rem;
    background: var(--color-primary);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--radius-md);
    box-shadow: 0 12px 32px -8px rgba(20, 42, 57, .45);
  }
}

/* Téléphone et tablette : le menu se déplie sous l'en-tête, sur toute la largeur. */
@media (max-width: 960px) {
  .entete__tiroir {
    flex: 1 0 100%;
    gap: .25rem;
    padding-top: .5rem;
    border-top: 1px solid rgba(255, 255, 255, .14);
  }
  .entete__identite { border-bottom: none; margin-bottom: 0; }
  .entete__lien { padding: .7rem .75rem; font-size: 1rem; }
}

/* Petits telephones : le mot « Menu » cede la place, l'icone reste et le
   lecteur d'ecran continue de l'annoncer. */
@media (max-width: 380px) {
  .entete__interieur { gap: .5rem; }
  .entete__bascule { padding: .45rem .55rem; }
  .entete__bascule span {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
}

/* ── 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; }

/* En vue liste, l'horaire a deja sa propre colonne. */
.fc-list-event .evt__heure { display: none; }

/* ── Agenda sur telephone ─────────────────────────────────── */

/* La barre de FullCalendar tient sur une ligne par defaut et deborde de
   l'ecran sous 760 pixels environ. On la range alors sur trois lignes : le
   titre, puis la navigation, puis le choix de la vue, chacune sur toute la
   largeur. */
@media (max-width: 760px) {
  .fc .fc-toolbar.fc-header-toolbar { flex-wrap: wrap; gap: .5rem; margin-bottom: .875rem; }
  .fc .fc-toolbar-chunk { display: flex; align-items: center; flex: 1 1 100%; }
  .fc .fc-toolbar-chunk:nth-child(2) { order: -1; justify-content: center; }
  .fc .fc-toolbar-chunk:first-child { justify-content: space-between; }
  .fc .fc-toolbar-chunk .fc-button-group { flex: 1 1 auto; }
  .fc .fc-toolbar-chunk:first-child .fc-button-group { flex: none; }
  .fc .fc-toolbar-title { font-size: 1.125rem; text-align: center; }
  .fc .fc-button { font-size: .875rem; padding: .45rem .55rem; }
  .fc .fc-prev-button, .fc .fc-next-button { padding-inline: .8rem; }
}

@media (max-width: 640px) {
  .agenda { padding: .625rem; border-radius: var(--radius-md); }

  /* Sept colonnes sur un telephone : chaque case est etroite. On reduit le
     texte et on coupe les mots a la francaise plutot qu'a la lettre pres. */
  .fc .fc-daygrid-week-number { font-size: .625rem; padding: 1px 4px; }
  .fc-event { padding: 3px 4px; }
  .evt__titre, .evt--anniversaire { font-size: .75rem; hyphens: auto; -webkit-hyphens: auto; }
  .evt__heure { font-size: .6875rem; }
  .evt__badge { font-size: .625rem; padding: 2px 4px; }
  .fc-col-header-cell-cushion { font-size: .6875rem; letter-spacing: 0; }

  .fc .fc-list-event-title { white-space: normal; }
  .barre-outils { gap: .75rem; }
}

/* ── 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; }

/* Pied rangé en étages : action du cours, applications, puis Modifier / Fermer.
   « Fermer » vient du gabarit ; l'ordre se règle ici, pour ne jamais le
   retirer du pied quand les actions d'un autre cours le remplacent. */
.panneau__pied--souple { align-items: center; row-gap: .75rem; }
.panneau__action { order: 1; flex: 1 1 100%; display: flex; }
.panneau__applis { order: 2; flex: 1 1 100%; }
.panneau__modifier { order: 3; }
.panneau__pied > [data-fermer-panneau] { order: 4; margin-left: auto; }
.panneau__applis-titre {
  margin: 0 0 .4rem; font-size: .75rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--color-text-muted);
}
.panneau__applis-grille {
  display: flex; flex-direction: column;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-surface); overflow: hidden;
}

/* Une ligne par application sœur, dans une même liste : son logo (sa
   favicon), son nom, ce que l'on y fait, et la flèche « nouvel onglet ». */
.vignette-appli {
  display: flex; align-items: center; gap: .7rem;
  padding: .55rem .75rem;
  color: var(--color-primary); text-decoration: none;
  transition: background var(--transition);
}
.vignette-appli + .vignette-appli { border-top: 1px solid var(--color-divider); }
.vignette-appli:hover { background: var(--color-primary-highlight); }
.vignette-appli:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--color-primary); }
.vignette-appli__logo { display: inline-flex; flex: none; }
.vignette-appli__logo svg { width: 1.9rem; height: 1.9rem; border-radius: .45rem; }
.vignette-appli__textes { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.vignette-appli__nom { font-weight: 700; font-size: .9375rem; }
.vignette-appli__detail { font-size: .8125rem; color: var(--color-text-muted); }
.vignette-appli__fleche { margin-left: auto; display: inline-flex; color: var(--color-text-faint); }
.vignette-appli__fleche svg { width: 1rem; height: 1rem; }
.vignette-appli:hover .vignette-appli__fleche { color: var(--color-primary); }

.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; }