/* ============================================================================
   Portail salarié CPlanning — système de design
   Mobile d'abord : cible principale un téléphone tenu à une main, en tactile.
   ========================================================================== */

:root {
  /* Couleur — identité distincte du bleu/violet générique : sarcelle profond,
     évoque le calme et le sérieux d'un outil RH, sans être froid. */
  --couleur-accent: #1f6f6b;
  --couleur-accent-vif: #2c8c86;
  --couleur-accent-teinte: #e4f1f0;
  --couleur-accent-contraste: #ffffff;

  --couleur-fond: #f7f8f7;
  --couleur-surface: #ffffff;
  --couleur-surface-alt: #eef1f0;
  --couleur-bordure: #e3e7e5;
  --couleur-texte: #1b211f;
  --couleur-texte-att: #5c6b67;
  --couleur-texte-faible: #8b9793;

  --couleur-succes: #3c8f5c;
  --couleur-succes-teinte: #e5f3ea;
  --couleur-attention: #c98a2a;
  --couleur-attention-teinte: #fbf0e0;
  --couleur-danger: #c7484b;
  --couleur-danger-teinte: #fbe9e9;

  --ombre-carte: 0 1px 2px rgba(20, 30, 28, 0.06), 0 1px 1px rgba(20, 30, 28, 0.04);
  --ombre-flottant: 0 8px 24px rgba(20, 30, 28, 0.14);

  --rayon-s: 10px;
  --rayon-m: 14px;
  --rayon-l: 20px;
  --rayon-pilule: 999px;

  --espace-1: 0.25rem;
  --espace-2: 0.5rem;
  --espace-3: 0.75rem;
  --espace-4: 1rem;
  --espace-5: 1.5rem;
  --espace-6: 2rem;

  --cible-tactile: 48px;

  --police:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --barre-nav-hauteur: calc(64px + env(safe-area-inset-bottom, 0px));
  --barre-app-hauteur: 56px;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --couleur-accent: #4fbdb5;
    --couleur-accent-vif: #6fd0c8;
    --couleur-accent-teinte: #163330;
    --couleur-accent-contraste: #0c1413;

    --couleur-fond: #121615;
    --couleur-surface: #1b211f;
    --couleur-surface-alt: #232b28;
    --couleur-bordure: #2b3532;
    --couleur-texte: #edf1ef;
    --couleur-texte-att: #9faea9;
    --couleur-texte-faible: #6d7975;

    --couleur-succes: #5cbb82;
    --couleur-succes-teinte: #16281c;
    --couleur-attention: #e0a94f;
    --couleur-attention-teinte: #2c2213;
    --couleur-danger: #e2787a;
    --couleur-danger-teinte: #2c1717;

    --ombre-carte: 0 1px 2px rgba(0, 0, 0, 0.3);
    --ombre-flottant: 0 8px 24px rgba(0, 0, 0, 0.45);

    color-scheme: dark;
  }
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--police);
  background: var(--couleur-fond);
  color: var(--couleur-texte);
  -webkit-font-smoothing: antialiased;
  line-height: 1.45;
}

h1, h2, h3, p {
  margin: 0;
}

h1 {
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h2 {
  font-size: 1.0625rem;
  font-weight: 600;
}

a {
  color: var(--couleur-accent);
}

/* Taille par défaut de toute icône en ligne (voir Composants/Icones.cs, viewBox 24×24 sans
   width/height explicites) — sans ceci, un <svg> sans dimension prend sa taille intrinsèque de
   remplacement (300×150 selon la spécification CSS), ce qui casse visuellement tout bouton qui
   n'a pas sa propre règle de taille plus spécifique. Les classes plus spécifiques (.bouton-icone
   svg, .barre-nav__lien svg...) l'emportent normalement par spécificité CSS. */
svg {
  width: 24px;
  height: 24px;
  flex: none;
}

/* Empêche l'anneau de focus par défaut du navigateur sur un <h1> ciblé par FocusOnNavigate
   (accessibilité lecteur d'écran) — utile pour la navigation au clavier, mais un cadre visible
   autour d'un titre ressemble à un bug pour un lecteur voyant ; le focus reste bien appliqué
   (annoncé par un lecteur d'écran), seul le style visuel par défaut est retiré. */
h1:focus {
  outline: none;
}

button {
  font-family: inherit;
}

/* Couche de fond derrière chaque page — la barre d'app et la barre de nav flottent au-dessus. */
.page {
  min-height: 100dvh;
  padding-top: var(--barre-app-hauteur);
  padding-bottom: calc(var(--barre-nav-hauteur) + var(--espace-4));
}

.page--sans-nav {
  padding-bottom: var(--espace-4);
}

/* --- Barre d'application (haut) ------------------------------------------ */

.barre-app {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--barre-app-hauteur);
  padding-top: env(safe-area-inset-top, 0px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-3);
  padding-left: var(--espace-4);
  padding-right: var(--espace-2);
  background: color-mix(in srgb, var(--couleur-surface) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--couleur-bordure);
  z-index: 20;
}

.barre-app__marque {
  display: flex;
  align-items: center;
  gap: var(--espace-2);
  min-width: 0;
}

.barre-app__logo-etablissement {
  width: 26px;
  height: 26px;
  object-fit: contain;
  flex: none;
}

.barre-app__titre {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.barre-app__titre h1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.barre-app__sous-titre {
  font-size: 0.75rem;
  color: var(--couleur-texte-att);
}

.bouton-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--cible-tactile);
  height: var(--cible-tactile);
  border-radius: var(--rayon-pilule);
  border: none;
  background: transparent;
  color: var(--couleur-texte-att);
  flex: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.bouton-icone:active {
  background: var(--couleur-surface-alt);
}

.bouton-icone svg {
  width: 22px;
  height: 22px;
}

/* --- Barre de navigation (bas, onglets) ----------------------------------- */

.barre-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--barre-nav-hauteur);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  display: flex;
  background: color-mix(in srgb, var(--couleur-surface) 94%, transparent);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--couleur-bordure);
  z-index: 20;
}

.barre-nav__lien {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 64px;
  color: var(--couleur-texte-faible);
  text-decoration: none;
  font-size: 0.6875rem;
  font-weight: 600;
  -webkit-tap-highlight-color: transparent;
}

.barre-nav__lien svg {
  width: 24px;
  height: 24px;
}

.barre-nav__lien.actif {
  color: var(--couleur-accent);
}

.barre-nav__lien:active {
  opacity: 0.65;
}

/* --- Structure de contenu -------------------------------------------------- */

.conteneur {
  max-width: 560px;
  margin: 0 auto;
  padding: var(--espace-4);
  display: flex;
  flex-direction: column;
  gap: var(--espace-4);
}

.carte {
  background: var(--couleur-surface);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-l);
  box-shadow: var(--ombre-carte);
  padding: var(--espace-4);
}

.carte-empilee {
  display: flex;
  flex-direction: column;
  gap: var(--espace-3);
}

.etiquette {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--couleur-texte-faible);
}

.texte-att {
  color: var(--couleur-texte-att);
  font-size: 0.875rem;
}

/* --- Formulaires ------------------------------------------------------------ */

.champ {
  display: flex;
  flex-direction: column;
  gap: var(--espace-2);
}

.champ label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--couleur-texte);
}

.champ input, .champ select {
  height: var(--cible-tactile);
  padding: 0 var(--espace-4);
  border-radius: var(--rayon-m);
  border: 1.5px solid var(--couleur-bordure);
  background: var(--couleur-surface);
  color: var(--couleur-texte);
  font-size: 1rem;
  font-family: inherit;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
}

.champ input:focus-visible, .champ select:focus-visible {
  outline: none;
  border-color: var(--couleur-accent);
  box-shadow: 0 0 0 3px var(--couleur-accent-teinte);
}

.champ select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235c6b67' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--espace-3) center;
  padding-right: 2.5rem;
}

/* Bouton présenté comme un champ de sélection (même boîte et même chevron que .champ select),
   pour ouvrir un popup de choix multiple — voir Annuaire.razor § Fonctions. */
.champ .selecteur {
  height: var(--cible-tactile);
  padding: 0 2.5rem 0 var(--espace-4);
  border-radius: var(--rayon-m);
  border: 1.5px solid var(--couleur-bordure);
  background: var(--couleur-surface);
  color: var(--couleur-texte);
  font-size: 1rem;
  font-family: inherit;
  width: 100%;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235c6b67' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--espace-3) center;
}

.champ .selecteur:focus-visible {
  outline: none;
  border-color: var(--couleur-accent);
  box-shadow: 0 0 0 3px var(--couleur-accent-teinte);
}

.champ-erreur {
  font-size: 0.8125rem;
  color: var(--couleur-danger);
  font-weight: 600;
}

/* --- Boutons ----------------------------------------------------------------- */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espace-2);
  height: var(--cible-tactile);
  padding: 0 var(--espace-5);
  border-radius: var(--rayon-m);
  border: none;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.08s ease, opacity 0.15s ease;
}

.bouton:active {
  transform: scale(0.98);
}

.bouton:disabled {
  opacity: 0.55;
  cursor: default;
}

.bouton--primaire {
  background: var(--couleur-accent);
  color: var(--couleur-accent-contraste);
}

.bouton--secondaire {
  background: var(--couleur-surface-alt);
  color: var(--couleur-texte);
}

.bouton--discret {
  background: transparent;
  color: var(--couleur-accent);
  height: auto;
  padding: var(--espace-2);
}

/* --- Bandeau d'alerte / message ---------------------------------------------- */

.bandeau {
  display: flex;
  align-items: flex-start;
  gap: var(--espace-3);
  padding: var(--espace-3) var(--espace-4);
  border-radius: var(--rayon-m);
  font-size: 0.875rem;
  font-weight: 500;
}

.bandeau svg {
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 1px;
}

.bandeau--danger {
  background: var(--couleur-danger-teinte);
  color: var(--couleur-danger);
}

.bandeau--attention {
  background: var(--couleur-attention-teinte);
  color: var(--couleur-attention);
}

/* Information neutre (ex. report exceptionnel de congé accordé) — teinte accent,
   volontairement distincte des variantes danger/attention : rien à corriger, juste à savoir. */
.bandeau--info {
  background: var(--couleur-accent-teinte);
  color: var(--couleur-accent);
}

/* --- Sélecteur de période (planning) ------------------------------------------ */

.selecteur-periode {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-2);
}

.selecteur-periode__libelle {
  flex: 1;
  text-align: center;
  font-weight: 700;
  font-size: 1rem;
  text-transform: capitalize;
}

/* --- Jour du planning (agenda) ------------------------------------------------ */

.jour {
  display: flex;
  align-items: center;
  gap: var(--espace-3);
  padding: var(--espace-3);
  border-radius: var(--rayon-m);
}

.jour--aujourdhui {
  background: var(--couleur-accent-teinte);
}

.jour__date {
  flex: none;
  width: 46px;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
}

.jour__date-jour-semaine {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--couleur-texte-faible);
}

.jour__date-numero {
  font-size: 1.25rem;
  font-weight: 700;
}

.jour__contenu {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.jour__heures {
  flex: none;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--couleur-texte-att);
  text-align: right;
  font-variant-numeric: tabular-nums;
  min-width: 3.5rem;
}

.vignette {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: var(--rayon-s);
  font-size: 0.8125rem;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jour__vide {
  color: var(--couleur-texte-faible);
  font-size: 0.875rem;
}

/* --- Lignes d'information (congés à venir, compte) ------------------------------ */

.ligne-info {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--espace-3);
  padding: var(--espace-2) 0;
}

.ligne-info + .ligne-info {
  border-top: 1px solid var(--couleur-bordure);
}

.ligne-info__libelle {
  color: var(--couleur-texte-att);
  font-size: 0.875rem;
}

.ligne-info__valeur {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* --- Chips de sélection (motifs de congé) --------------------------------------- */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-2);
}

.chip {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 var(--espace-4);
  border-radius: var(--rayon-pilule);
  border: 1.5px solid var(--couleur-bordure);
  background: var(--couleur-surface);
  color: var(--couleur-texte);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.chip.actif {
  background: var(--couleur-accent);
  border-color: var(--couleur-accent);
  color: var(--couleur-accent-contraste);
}

/* Pastille retenue affichée dans la carte de filtres de l'Annuaire : un appui la retire. */
.chip--retirable {
  gap: var(--espace-2);
}

.chip__croix {
  font-size: 1.125rem;
  line-height: 1;
  opacity: 0.85;
}

/* Popup de choix des fonctions : la liste défile si les fonctions sont nombreuses, les actions
   restent visibles. */
.popup-fonctions__chips {
  max-height: 40vh;
  overflow-y: auto;
  padding: 2px;
}

.popup-fonctions__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-3);
}

/* --- Écran de connexion --------------------------------------------------------- */

.ecran-connexion {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--espace-6) var(--espace-5);
  gap: var(--espace-6);
}

.ecran-connexion__marque {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espace-3);
}

/* Logo établissement (« papillon », voir Assets/Papillon Logo.png) — déjà coloré, pas de fond
   supplémentaire ; une ombre douce le détache du fond de page plutôt qu'un cadre. */
.ecran-connexion__logo-etablissement {
  width: 84px;
  height: 84px;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(20, 30, 28, 0.18));
}

.ecran-connexion__marque h1 {
  font-size: 1.375rem;
}

.centre-vertical {
  min-height: 60dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--espace-3);
  text-align: center;
  color: var(--couleur-texte-att);
  padding: var(--espace-5);
}

.spinner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid var(--couleur-bordure);
  border-top-color: var(--couleur-accent);
  animation: tourner 0.7s linear infinite;
}

@keyframes tourner {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 1.6s; }
  .bouton { transition: none; }
}

/* --- Bandeau de service (Liste de présence) ------------------------------------- */

.bandeau-service {
  padding: var(--espace-3) var(--espace-4);
  font-weight: 700;
  color: #fff;
  /* Halo sombre autour du texte blanc, pas un simple contraste espéré : reste lisible quelle que
     soit la couleur de service paramétrée, y compris une couleur claire où du blanc uni se
     fondrait dans le fond — même correctif que le poste bureau (Views/PlanningView.axaml.cs,
     bandeau d'en-tête de service, DropShadowEffect Blanc gras + halo noir). */
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.9);
}

/* --- Annuaire (liste cliquable, avec fonction) --------------------------------- */

.ligne-annuaire {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: var(--espace-3) var(--espace-4);
  border: none;
  background: transparent;
  text-align: left;
  font-family: inherit;
  font-size: 1rem;
  color: var(--couleur-texte);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.ligne-annuaire + .ligne-annuaire {
  border-top: 1px solid var(--couleur-bordure);
}

/* Ligne salarié enveloppée (ligne cliquable + bouton Agence côte à côte, voir Annuaire.razor) :
   les .ligne-annuaire n'y sont plus frères directs, le séparateur ci-dessus ne s'appliquait plus. */
.ligne-annuaire-conteneur {
  display: flex;
  align-items: stretch;
}

.ligne-annuaire-conteneur + .ligne-annuaire-conteneur {
  border-top: 1px solid var(--couleur-bordure);
}

.ligne-annuaire:active {
  background: var(--couleur-surface-alt);
}

/* --- Popup coordonnées (Présence, Annuaire) ------------------------------------- */

.superposition {
  position: fixed;
  inset: 0;
  background: rgba(20, 30, 28, 0.45);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 40;
  padding: var(--espace-4);
}

.popup-coordonnees {
  width: 100%;
  max-width: 480px;
  background: var(--couleur-surface);
  border-radius: var(--rayon-l);
  box-shadow: var(--ombre-flottant);
  padding: var(--espace-5) var(--espace-4);
  display: flex;
  flex-direction: column;
  gap: var(--espace-3);
  margin-bottom: calc(var(--barre-nav-hauteur) + var(--espace-3));
  /* Bornée à la fenêtre et défilante : un popup à contenu variable (PopupFonctions) ne doit
     jamais pousser son en-tête hors de l'écran en paysage ou sur un petit téléphone. */
  max-height: calc(100dvh - var(--barre-nav-hauteur) - var(--espace-3) - 2 * var(--espace-4));
  overflow-y: auto;
}

.popup-coordonnees__entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-3);
}

.popup-coordonnees__entete h2 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.popup-coordonnees__telephones {
  display: flex;
  flex-direction: column;
  gap: var(--espace-2);
}

.lien-tel {
  display: flex;
  align-items: center;
  gap: var(--espace-3);
  height: var(--cible-tactile);
  padding: 0 var(--espace-4);
  border-radius: var(--rayon-m);
  background: var(--couleur-accent-teinte);
  color: var(--couleur-accent);
  font-weight: 700;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

/* Ligne salarié cliquable de la Liste de présence — même cible tactile que .ligne-annuaire,
   sans en reprendre le style (structure interne différente, voir Presence.razor). */
.ligne-presence-cliquable {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.ligne-presence-cliquable:active {
  background: var(--couleur-surface-alt);
}

/* Écrans plus larges (tablette/desktop) : le contenu reste centré et lisible plutôt que de
   s'étirer sur toute la largeur — le portail reste d'abord pensé pour un téléphone. */
@media (min-width: 640px) {
  .barre-app, .barre-nav {
    max-width: 640px;
    left: 50%;
    transform: translateX(-50%);
    right: auto;
    width: 100%;
  }
}

/* ============================================================================
   Écran « Besoins » (Intégration de Crempla) — commun aux deux présentations
   ========================================================================== */

.bouton--danger {
  background: var(--couleur-danger);
  color: #fff;
}

.visuellement-cache {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.pastille {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px var(--espace-3);
  border-radius: var(--rayon-pilule);
  background: var(--couleur-accent-teinte);
  color: var(--couleur-accent);
  white-space: nowrap;
}

.mission-carte {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--espace-3);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-m);
  background: var(--couleur-surface-alt);
}

.ligne-confirmation {
  padding: var(--espace-2) 0;
  border-top: 1px solid var(--couleur-bordure);
}

.ligne-confirmation--retiree {
  color: var(--couleur-danger);
}

.ligne-confirmation--attribuee {
  border-left: 3px solid var(--couleur-succes);
  padding-left: var(--espace-2);
}

.popup-confirmation {
  max-width: 560px;
}

.popup-confirmation__actions {
  display: flex;
  gap: var(--espace-3);
}

/* Entrée de menu mobile au libellé long (« Intégration de Crempla ») : deux lignes, corps réduit. */
.barre-nav__lien--long span {
  font-size: 0.625rem;
  line-height: 1.05;
  text-align: center;
  max-width: 64px;
}

.tableau {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.tableau th {
  text-align: left;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--couleur-texte-att);
  padding: var(--espace-3) var(--espace-4);
  border-bottom: 1px solid var(--couleur-bordure);
  background: var(--couleur-surface-alt);
}

.tableau td {
  padding: var(--espace-3) var(--espace-4);
  border-bottom: 1px solid var(--couleur-bordure);
  vertical-align: top;
}

.tableau__fort {
  white-space: nowrap;
  font-weight: 700;
}

.tableau__nombre {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tableau__actions {
  text-align: right;
  white-space: nowrap;
}

.tableau__ligne-ouverte td {
  background: var(--couleur-accent-teinte);
}

.tableau__detail > td {
  background: var(--couleur-surface-alt);
}

.tableau--detail th {
  background: transparent;
}

.carte--tableau {
  padding: 0;
  overflow: hidden;
}

/* ============================================================================
   Présentation PC (hôte Crempla, constraint-252) : menu latéral fixe, contenu large.
   Les pages sont celles du mobile ; seules la coque et la largeur changent.
   ========================================================================== */

.pc-coque {
  display: flex;
  min-height: 100vh;
}

.pc-menu {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 248px;
  display: flex;
  flex-direction: column;
  gap: var(--espace-4);
  padding: var(--espace-4) var(--espace-3);
  background: var(--couleur-surface);
  border-right: 1px solid var(--couleur-bordure);
  z-index: 20;
}

.pc-menu__marque {
  display: flex;
  align-items: center;
  gap: var(--espace-3);
  padding: var(--espace-2) var(--espace-3) var(--espace-4);
  border-bottom: 1px solid var(--couleur-bordure);
}

.pc-menu__logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.pc-menu__nom {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--couleur-accent);
}

.pc-menu__liens {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
}

.pc-menu__lien {
  display: flex;
  align-items: center;
  gap: var(--espace-3);
  padding: var(--espace-3);
  border-radius: var(--rayon-m);
  color: var(--couleur-texte-att);
  text-decoration: none;
  font-weight: 600;
}

.pc-menu__lien:hover {
  background: var(--couleur-surface-alt);
}

.pc-menu__lien.actif {
  background: var(--couleur-accent-teinte);
  color: var(--couleur-accent);
}

.pc-menu__pied {
  display: flex;
  flex-direction: column;
  gap: var(--espace-2);
  padding-top: var(--espace-3);
  border-top: 1px solid var(--couleur-bordure);
}

.pc-menu__utilisateur {
  padding: 0 var(--espace-3);
  font-size: 0.875rem;
  color: var(--couleur-texte-att);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pc-menu__deconnexion {
  display: flex;
  align-items: center;
  gap: var(--espace-3);
  padding: var(--espace-3);
  border: none;
  border-radius: var(--rayon-m);
  background: transparent;
  color: var(--couleur-texte-att);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  text-align: left;
}

.pc-menu__deconnexion:hover {
  background: var(--couleur-surface-alt);
}

.pc-contenu {
  flex: 1 1 auto;
  margin-left: 248px;
  min-width: 0;
}

.presentation-pc .pc-contenu .conteneur {
  max-width: 1120px;
  margin: 0;
  padding: var(--espace-5) var(--espace-6);
}

/* Fenêtres : centrées (pas de barre d'onglets à éviter), plus larges que sur téléphone. */
.presentation-pc .superposition {
  align-items: center;
}

.presentation-pc .popup-coordonnees {
  margin-bottom: 0;
  max-height: calc(100vh - 2 * var(--espace-6));
  max-width: 560px;
}

.presentation-pc .popup-confirmation {
  max-width: 640px;
}

/* Boutons de formulaire : largeur naturelle sur PC plutôt que pleine largeur tactile. */
.presentation-pc .pc-contenu .bouton {
  width: auto;
  height: 40px;
}

.presentation-pc .pc-contenu .popup-confirmation__actions {
  justify-content: flex-end;
}

.presentation-pc .pc-contenu .bouton--discret {
  height: auto;
}

/* Horaire d'une mission de besoin : vignette du Planning + horaire en texte, à la ligne si l'écran est étroit. */
.horaire-mission {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espace-2);
}

/* --- Notifications du Compte (constraint-266) ---------------------------------- */

.voyant {
  display: flex;
  align-items: center;
  gap: var(--espace-3);
  padding: var(--espace-3) var(--espace-4);
  border-radius: var(--rayon-m);
  font-weight: 600;
  font-size: 0.9375rem;
}

.voyant__point {
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: var(--rayon-pilule);
  background: currentColor;
}

.voyant--vert { background: var(--couleur-succes-teinte); color: var(--couleur-succes); }
.voyant--orange { background: var(--couleur-attention-teinte); color: var(--couleur-attention); }
.voyant--rouge { background: var(--couleur-danger-teinte); color: var(--couleur-danger); }
.voyant--gris { background: var(--couleur-surface-alt); color: var(--couleur-texte-att); }

.voyant__texte { color: var(--couleur-texte); }

.appareils-notifications {
  display: flex;
  flex-direction: column;
  gap: var(--espace-2);
}

.appareil-notifications {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--espace-2) var(--espace-3);
  border-radius: var(--rayon-s);
  background: var(--couleur-surface-alt);
}

.appareil-notifications__nom { font-weight: 600; }

.activation-notifications {
  display: flex;
  flex-direction: column;
  gap: var(--espace-3);
}

.lien-guide {
  font-size: 0.875rem;
  font-weight: 600;
}

.reglage-heures {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--espace-3);
}

.reglage-case {
  display: flex;
  align-items: flex-start;
  gap: var(--espace-3);
  font-size: 0.9375rem;
  cursor: pointer;
}

.reglage-case input {
  flex: none;
  width: 24px;
  height: 24px;
  margin: 0;
  accent-color: var(--couleur-accent);
}

/* --- Onglet Missions : établissements suivis et disponibilités (constraint-274, constraint-275) ------- */

.missions-grille {
  display: flex;
  flex-direction: column;
  gap: var(--espace-4);
}

.presentation-pc .missions-grille {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: var(--espace-5);
}

.liste-cases {
  display: flex;
  flex-direction: column;
}

.ligne-case {
  align-items: center;
  min-height: var(--cible-tactile);
  padding: var(--espace-1) 0;
  border-top: 1px solid var(--couleur-bordure);
}

.ligne-case:first-child {
  border-top: none;
}

.ligne-case__texte {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espace-2);
  font-weight: 600;
}

.calendrier-dispo {
  display: flex;
  flex-direction: column;
  gap: var(--espace-1);
}

.jour-dispo {
  display: flex;
  align-items: center;
  gap: var(--espace-2);
  padding: var(--espace-2);
  border-radius: var(--rayon-m);
  background: var(--couleur-surface-alt);
}

.jour-dispo--bloque {
  opacity: 0.7;
}

.jour-dispo__bloque {
  flex: 1;
  text-align: center;
  font-weight: 600;
  color: var(--couleur-texte-att);
}

/* Bouton à trois états : le sens est toujours écrit en toutes lettres, la couleur ne fait que le renforcer. */
.creneau {
  flex: 1;
  min-width: 0;
  min-height: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: var(--espace-1) var(--espace-2);
  border-radius: var(--rayon-s);
  border: 2px solid var(--couleur-bordure);
  background: var(--couleur-surface);
  color: var(--couleur-texte);
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.creneau:disabled {
  opacity: 0.55;
  cursor: default;
}

.creneau__nom {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--couleur-texte-att);
}

.creneau__valeur {
  font-size: 0.875rem;
  font-weight: 700;
}

.creneau--dispo {
  border-color: var(--couleur-succes);
  background: var(--couleur-succes-teinte);
}

.creneau--indispo {
  border-color: var(--couleur-danger);
  background: var(--couleur-danger-teinte);
}

.creneau--vide .creneau__valeur {
  font-weight: 500;
  color: var(--couleur-texte-att);
}

/* --- Onglet Missions : fil des missions proposées et candidature (constraint-279) ------------------------ */

.missions-grille[hidden],
.presentation-pc .missions-grille[hidden] {
  display: none;
}

.fil-missions {
  display: flex;
  flex-direction: column;
  gap: var(--espace-3);
}

.presentation-pc .fil-missions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  align-items: start;
  gap: var(--espace-4);
}

.mission-proposee {
  display: flex;
  flex-direction: column;
  gap: var(--espace-2);
  padding: var(--espace-4);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-m);
  background: var(--couleur-surface-alt);
}

.mission-proposee__entete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--espace-2);
}

.mission-proposee__etablissement {
  font-size: 1.0625rem;
  font-weight: 700;
}

.mission-proposee__fonction {
  font-weight: 600;
  color: var(--couleur-accent);
}

.mission-proposee__dates {
  font-weight: 600;
}

.mission-proposee__regle {
  font-size: 0.8125rem;
}

.jour-mission-ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espace-2) var(--espace-3);
}

.jour-mission-ligne__date {
  min-width: 6.5rem;
  font-size: 0.9375rem;
}

.bouton-retour {
  align-self: flex-start;
  width: auto;
  gap: var(--espace-1);
}

.bouton-retour svg {
  width: 20px;
  height: 20px;
}

.jours-mission {
  margin: 0;
  padding: 0;
  border: none;
  display: flex;
  flex-direction: column;
}

.jours-mission legend {
  padding: 0 0 var(--espace-2);
  font-size: 0.875rem;
  font-weight: 700;
}

.jour-mission {
  padding: var(--espace-3) 0;
}

.jour-mission__texte {
  display: flex;
  flex-direction: column;
  gap: var(--espace-1);
}

.zone-message {
  width: 100%;
  min-height: 5.5rem;
  padding: var(--espace-3) var(--espace-4);
  border-radius: var(--rayon-m);
  border: 1.5px solid var(--couleur-bordure);
  background: var(--couleur-surface);
  color: var(--couleur-texte);
  font-size: 1rem;
  font-family: inherit;
  resize: vertical;
}

.zone-message:focus-visible {
  outline: none;
  border-color: var(--couleur-accent);
  box-shadow: 0 0 0 3px var(--couleur-accent-teinte);
}

.compteur-message {
  align-self: flex-end;
  font-size: 0.75rem;
}

/* --- Candidats et disponibles d'un besoin (constraint-281 à constraint-284) ------------------------------------------
   Fiche dépliable (details/summary natifs : aucune interaction JavaScript, donc rien de plus pour la CSP). Une alerte garde son
   libellé écrit (« Attention », « Limite dépassée ») : la couleur du bord ne fait que le renforcer. */

.candidats {
  display: flex;
  flex-direction: column;
  gap: var(--espace-3);
  margin-top: var(--espace-4);
}

.candidats h3,
.candidats h4 {
  margin: 0;
}

.candidats__note {
  margin: 0;
  color: var(--couleur-texte-att);
  font-size: 0.875rem;
}

.fiche-candidat {
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-m);
  background: var(--couleur-surface);
}

.fiche-candidat > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--espace-1) var(--espace-3);
  min-height: 48px;
  padding: var(--espace-3);
}

.fiche-candidat > summary::-webkit-details-marker {
  display: none;
}

.fiche-candidat > summary::after {
  content: "Voir la fiche";
  margin-left: auto;
  color: var(--couleur-accent);
  font-size: 0.8125rem;
  font-weight: 600;
}

.fiche-candidat[open] > summary::after {
  content: "Masquer la fiche";
}

.fiche-candidat__nom {
  font-weight: 700;
}

.fiche-candidat__resume {
  flex-basis: 100%;
  order: 3;
  color: var(--couleur-texte-att);
  font-size: 0.8125rem;
}

.fiche-candidat__corps {
  display: flex;
  flex-direction: column;
  gap: var(--espace-2);
  padding: 0 var(--espace-3) var(--espace-3);
}

.fiche-candidat__corps p {
  margin: 0;
}

.alerte-repos {
  padding: var(--espace-2) var(--espace-3);
  border-left: 4px solid var(--couleur-attention);
  border-radius: var(--rayon-s);
  background: var(--couleur-attention-teinte);
  color: var(--couleur-texte);
  font-size: 0.875rem;
}

.alerte-repos--depassement {
  border-left-color: var(--couleur-danger);
}

.pastille--attention {
  border: 1px solid var(--couleur-attention);
  background: var(--couleur-attention-teinte);
  color: var(--couleur-texte);
}

.pastille--proposee {
  border: 1px solid var(--couleur-accent);
}

.candidat-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-3);
  align-items: center;
}

/* Fiche d'historique des collaborations d'un candidat (constraint-364) : une ligne par mission faite, désistement ou annulation. */
.historique-ligne {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--espace-2) 0;
  border-top: 1px solid var(--couleur-bordure);
}

/* Désistement à moins de 24 h de la mission (constraint-295) : bord danger, le sens reste écrit dans le texte. */
.mission-carte--urgente {
  border-left: 3px solid var(--couleur-danger);
}

.section-desistements {
  display: flex;
  flex-direction: column;
  gap: var(--espace-2);
  margin-top: var(--espace-3);
}

/* Bouton « Appeler » (lien tel:, désistement sous 24 h) : un lien qui a l apparence d un bouton. */
.bouton--appel {
  text-decoration: none;
  flex: 0 0 auto; /* ne s'écrase pas dans une fenêtre qui défile */
  min-height: var(--cible-tactile);
  margin-top: var(--espace-2);
}

/* --- Mon dossier (constraint-308) --------------------------------------------- */

.notice-liste {
  margin: 0;
  padding-left: var(--espace-5);
  display: flex;
  flex-direction: column;
  gap: var(--espace-2);
  font-size: 0.875rem;
  color: var(--couleur-texte-att);
}

.carte-groupe {
  display: flex;
  flex-direction: column;
  gap: var(--espace-3);
}

.document-carte__entete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-2);
}

.document-carte__nom {
  font-weight: 600;
}

.pastille--ok {
  background: var(--couleur-succes-teinte);
  color: var(--couleur-succes);
}

.pastille--refus {
  background: var(--couleur-danger-teinte);
  color: var(--couleur-danger);
}

.panneau-envoi {
  display: flex;
  flex-direction: column;
  gap: var(--espace-3);
  padding-top: var(--espace-3);
  border-top: 1px solid var(--couleur-bordure);
}

.document-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-3);
}

.document-actions .bouton {
  position: relative;
  flex: 1 1 12rem;
  width: auto;
}

/* Zone de fichier masquée mais atteignable au clavier : le libellé qui l'entoure sert de bouton. */
.fichier-masque {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}

.bouton:has(.fichier-masque:focus-visible) {
  outline: 2px solid var(--couleur-accent);
  outline-offset: 2px;
}

.liste-pages {
  margin: 0;
  padding-left: var(--espace-5);
  display: flex;
  flex-direction: column;
  gap: var(--espace-1);
}

.liste-pages li::marker {
  font-weight: 600;
}

.liste-pages li {
  padding-left: var(--espace-1);
}

.liste-pages__nom {
  overflow-wrap: anywhere;
}

/* Statistiques Crempla (page /statistiques, constraint-352) : filtres en ligne, tableau défilant, barre du taux de pourvoi en CSS pur. */
.filtres-stat {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-4);
}

.defilement-horizontal {
  overflow-x: auto;
}

/* Tableau compact : colonne « Mois » figée à gauche (fond opaque, clair et sombre) avec une ombre de bord qui signale que le reste défile. */
.tableau--statistiques {
  font-size: 0.8125rem;
}

.tableau--statistiques th,
.tableau--statistiques td {
  padding: var(--espace-2) var(--espace-2);
}

.tableau--statistiques th {
  white-space: normal;
  vertical-align: bottom;
  min-width: 3.25rem;
  font-size: 0.6875rem;
  letter-spacing: 0;
  text-transform: none;
  text-align: right;
  line-height: 1.2;
  cursor: help;
}

.tableau--statistiques th:first-child,
.tableau--statistiques td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 4.5rem;
  text-align: left;
  background: var(--couleur-surface);
  box-shadow: 6px 0 6px -4px rgba(20, 30, 28, 0.22);
}

.tableau--statistiques th:first-child {
  background: var(--couleur-surface-alt);
}

.tableau__total td {
  font-weight: 700;
  background: var(--couleur-surface-alt);
}

.tableau--statistiques .tableau__total td:first-child {
  background: var(--couleur-surface-alt);
}

@media (max-width: 480px) {
  .tableau--statistiques {
    font-size: 0.75rem;
  }

  .tableau--statistiques th,
  .tableau--statistiques td {
    padding: var(--espace-2) 0.375rem;
  }
}

.barre-taux {
  display: block;
  height: 4px;
  margin-top: 4px;
  border-radius: var(--rayon-pilule);
  background: var(--couleur-bordure);
  overflow: hidden;
}

.barre-taux__rempli {
  display: block;
  height: 100%;
  background: var(--couleur-accent);
}

.legende-stat {
  margin-top: var(--espace-4);
}

.legende-stat summary {
  cursor: pointer;
  font-weight: 700;
}

.legende-stat dt {
  font-weight: 700;
  margin-top: var(--espace-3);
}

.legende-stat dd {
  margin: 0;
  color: var(--couleur-texte-att);
}

/* Aide du site Crempla PC (constraint-435) : barre fine en haut du contenu, panneau latéral à droite, rendu des rubriques. */
.pc-barre {
  display: flex;
  justify-content: flex-end;
  padding: var(--espace-2) var(--espace-6);
  border-bottom: 1px solid var(--couleur-bordure);
}

.pc-aide {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 400px;
  max-width: 100vw;
  display: flex;
  flex-direction: column;
  background: var(--couleur-surface);
  border-left: 1px solid var(--couleur-bordure);
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.08);
  z-index: 50;
}

.pc-aide__entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--espace-3) var(--espace-4);
  border-bottom: 1px solid var(--couleur-bordure);
}

.pc-aide__entete h2 {
  margin: 0;
  font-size: 1.15rem;
}

.pc-aide__acces {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-2);
  padding: var(--espace-3) var(--espace-4) 0;
}

.pc-aide__corps {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--espace-3) var(--espace-4);
}

.pc-aide__rubrique {
  display: block;
  width: 100%;
  text-align: left;
  margin-bottom: var(--espace-2);
}

.pc-aide__pied {
  padding: var(--espace-2) var(--espace-4);
  border-top: 1px solid var(--couleur-bordure);
  color: var(--couleur-texte-faible);
  font-size: 0.75rem;
}

.notice__titre {
  font-size: 1rem;
  margin: var(--espace-4) 0 var(--espace-2);
}

.notice__sous-titre {
  font-size: 0.9rem;
  margin: var(--espace-3) 0 var(--espace-2);
}

.notice p,
.notice ul,
.notice ol {
  margin: 0 0 var(--espace-3);
}

.notice__astuce {
  background: var(--couleur-accent-teinte);
  border-left: 3px solid var(--couleur-accent);
  border-radius: 4px;
  padding: var(--espace-2) var(--espace-3);
  margin-bottom: var(--espace-3);
}

.notice__image img {
  max-width: 100%;
}

.notice__image figcaption {
  color: var(--couleur-texte-faible);
  font-size: 0.75rem;
}