/* =============================================================================
   Composants — voir docs/direction-artistique.md
   Uniquement les variables de theme.css : aucune couleur, police ni taille en dur
   (seules les épaisseurs de trait sont écrites en px).
   ============================================================================= */

/* --- Mise en page --------------------------------------------------------------- */
.entete {
  display: flex;
  flex-wrap: wrap; /* écran étroit : le prénom et le bouton passent sous le logo, sans couper les mots */
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2) var(--e-3);
  padding: var(--e-2) var(--e-4);
  background: var(--surface);
  border-bottom: var(--separateur);
}

.marque {
  font-family: var(--police-marque);
  font-weight: var(--graisse-marque);
  letter-spacing: var(--interlettrage-marque);
  font-size: var(--t-l);
  line-height: 1;
}

.marque-logo {
  display: block;
  height: var(--e-6); /* 32 px (DA §7) */
  width: auto;
}

.entete-utilisateur {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  margin-left: auto;
  color: var(--encre-2);
  font-size: var(--t-s);
  white-space: nowrap;
}

.marqueur {
  height: var(--marqueur-hauteur);
  background: var(--marqueur);
}

.contenu {
  max-width: var(--largeur-max);
  padding: var(--e-5) var(--e-4) var(--e-7);
}

/* Connexion et écrans salarié : une seule colonne, qui ne s'étire pas sur ordinateur. */
.colonne {
  max-width: calc(2 * var(--taille-point));
}

.titre-ecran {
  margin: 0 0 var(--e-5);
  font-family: var(--police-marque);
  font-weight: var(--graisse-marque);
  letter-spacing: var(--interlettrage-marque);
  font-size: var(--t-xl);
  line-height: 1.2;
}

/* --- Boutons, champs, messages --------------------------------------------------- */
.bouton {
  min-height: var(--cible-min);
  padding: 0 var(--e-4);
  border: 1px solid transparent;
  border-radius: var(--rayon);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.bouton-principal {
  background: var(--accent);
  color: var(--sur-accent);
}

.bouton-discret {
  background: transparent;
  color: var(--accent-texte);
  border-color: var(--trait);
  font-size: var(--t-s);
}

.bouton-large {
  width: 100%;
}

.bouton:disabled {
  opacity: 0.6;
  cursor: progress;
}

.champ {
  margin-bottom: var(--e-4);
}

.champ label {
  display: block;
  margin-bottom: var(--e-1);
  font-weight: 700;
}

.champ input,
.champ select {
  width: 100%;
  min-height: var(--cible-min);
  padding: 0 var(--e-3);
  font: inherit;
  color: var(--encre);
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-petit);
}

.message {
  margin: var(--e-3) 0 0;
  font-weight: 700;
}

.message-erreur { color: var(--erreur); }
.message-alerte { color: var(--alerte); }
.message-ok { color: var(--ok); }

.lien {
  display: inline-flex;
  align-items: center;
  min-height: var(--cible-min);
  color: var(--accent-texte);
  font-weight: 700;
}

.note {
  margin: var(--e-2) 0 0;
  color: var(--encre-2);
  font-size: var(--t-s);
}

/* --- Cartes et listes de valeurs (récapitulatifs) ------------------------------- */
.carte {
  margin: 0 0 var(--e-4);
  padding: var(--e-4);
  background: var(--surface);
  border: var(--separateur);
  border-radius: var(--rayon);
}

.carte-entete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-2);
}

.titre-bloc {
  margin: 0 0 var(--e-3);
  font-size: var(--t-l);
  line-height: 1.25;
}

.valeurs {
  margin: 0;
}

.ligne-valeur {
  display: flex;
  justify-content: space-between;
  gap: var(--e-3);
  padding: var(--e-1) 0;
}

.ligne-valeur dt { color: var(--encre-2); }
.ligne-valeur dd { margin: 0; font-weight: 700; text-align: right; }

.statut {
  font-size: var(--t-s);
  font-weight: 700;
}

.statut-validee { color: var(--ok); }
.statut-a-valider { color: var(--alerte); }
.statut-en-cours { color: var(--encre-2); }

.etiquette {
  color: var(--alerte);
  font-size: var(--t-s);
  font-weight: 700;
}

.navigation-mois {
  display: flex;
  justify-content: space-between;
  gap: var(--e-2);
  margin-bottom: var(--e-4);
}

.navigation-mois-titre {
  margin: 0 0 var(--e-2);
  font-size: var(--t-l);
  font-weight: 700;
}

.detail-pointages summary {
  display: flex;
  align-items: center;
  min-height: var(--cible-min);
  color: var(--accent-texte);
  font-weight: 700;
  cursor: pointer;
}

.liste-pointages,
.liste-corrections {
  margin: var(--e-3) 0 0;
  padding: 0;
  list-style: none;
}

.liste-pointages li,
.liste-corrections li {
  padding: var(--e-2) 0;
  border-top: var(--separateur);
}

/* Un pointage : « Lun. 12 oct. · Midi » et sa durée, puis les horaires en dessous. */
.pointage {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 var(--e-3);
}

.pointage > * { grid-column: 1 / -1; }
.pointage-titre { grid-column: 1; font-weight: 700; }
.pointage-duree { grid-column: 2; grid-row: 1; font-weight: 700; text-align: right; }

.liste-corrections p { margin: 0; }
.correction-titre { font-weight: 700; }

/* --- Espace employeur : sélecteur d'enseigne, menu ------------------------------ */
.selecteur-enseigne {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-1);
}

.selecteur-enseigne button {
  min-height: var(--cible-min);
  padding: 0 var(--e-3);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-petit);
  background: var(--surface);
  color: var(--encre);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.selecteur-enseigne button[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--sur-accent);
}

/* Sur téléphone, le sélecteur passe sur sa propre ligne, sous le logo et le nom. */
@media (max-width: 45em) {
  .selecteur-enseigne { order: 3; flex-basis: 100%; }
}

.menu {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--e-4);
  padding: 0 var(--e-4);
  background: var(--surface);
  border-bottom: var(--separateur);
}

.menu a {
  display: inline-flex;
  align-items: center;
  min-height: var(--cible-min);
  border-bottom: 3px solid transparent;
  color: var(--encre);
  font-weight: 700;
  text-decoration: none;
}

.menu a[aria-current="page"] {
  border-bottom-color: var(--accent);
  color: var(--accent-texte);
}

/* --- Formulaires, actions, listes de cartes ------------------------------------- */
a.bouton {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.titre-avec-action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  margin-bottom: var(--e-4);
}

.titre-avec-action .titre-ecran { margin: 0; }

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin-top: var(--e-3);
}

.formulaire { margin-top: var(--e-3); }

.grille-champs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16em), 1fr));
  gap: 0 var(--e-4);
}

.formulaire-ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0 var(--e-3);
}

.formulaire-ligne .champ { flex: 1 1 10em; }
.formulaire-ligne .champ:has(input[type="number"]) { flex: 0 1 6em; }
.formulaire-ligne > .bouton { margin-bottom: var(--e-4); }
.formulaire-ligne > .message { flex-basis: 100%; margin: 0 0 var(--e-3); }

.aide { margin: 0 0 var(--e-1); }

.section { margin-bottom: var(--e-6); }

.liste-cartes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22em), 1fr));
  gap: var(--e-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.liste-cartes .carte { margin: 0; }

.pastille-enseigne {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  font-weight: 700;
}

.pastille {
  width: 0.8em;
  height: 0.8em;
  border-radius: 50%;
  background: var(--accent);
}

.nom-salarie {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--e-2);
}

.liste-simple {
  margin: 0;
  padding: 0;
  list-style: none;
}

.liste-simple li {
  padding: var(--e-2) 0;
  border-top: var(--separateur);
}

.liste-simple li:first-child { border-top: 0; }

.a-traiter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2) var(--e-3);
}

.actions-pointage { grid-column: 1 / -1; }
.ajout-pointage { margin-bottom: var(--e-4); }
.formulaire-correction { margin-top: var(--e-2); }

/* --- Tableaux (employeur) : des cartes sur téléphone (DA §8) ---------------------- */
.tableau {
  width: 100%;
  border-collapse: collapse;
}

.tableau th,
.tableau td {
  padding: var(--e-2) var(--e-3);
  border-bottom: var(--separateur);
  text-align: left;
  vertical-align: middle;
}

.tableau thead th {
  color: var(--encre-2);
  font-size: var(--t-s);
}

.tableau .nombre {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 45em) {
  .tableau thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .tableau tr {
    display: block;
    padding: var(--e-2) 0;
    border-bottom: var(--separateur);
  }

  .tableau tbody th {
    display: block;
    padding: 0 0 var(--e-1);
    border: 0;
  }

  .tableau td {
    display: inline-flex;
    gap: var(--e-1);
    padding: 0 var(--e-3) 0 0;
    border: 0;
  }

  .tableau td[data-colonne]::before {
    content: attr(data-colonne) " :";
    color: var(--encre-2);
  }
}

/* --- Choix du service (DA §3 et §8) ---------------------------------------------- */
.choix-service {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--e-3);
}

.bouton-service {
  min-height: calc(var(--cible-min) + var(--e-2)); /* 56 px */
  border: 2px solid var(--trait);
  border-radius: var(--rayon);
  background: var(--surface);
  color: var(--encre);
  font: inherit;
  font-size: var(--t-l);
  font-weight: 700;
  cursor: pointer;
}

.bouton-service[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--sur-accent);
}

.bouton-service:disabled { cursor: default; }
.bouton-service:disabled[aria-pressed="false"] { opacity: 0.5; }

/* --- Bouton de pointage (DA §3) : le seul élément audacieux du site ---------------- */
.zone-point {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: var(--e-6);
}

.point {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--e-1);
  width: var(--taille-point);
  height: var(--taille-point);
  padding: var(--e-3);
  border: var(--point-bordure);
  border-radius: 50%;
  background: var(--accent);
  color: var(--sur-accent);
  box-shadow: var(--point-ombre);
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform 80ms ease-out, box-shadow 80ms ease-out, opacity 120ms;
}

/* Le disque s'enfonce à l'appui (Case. : le liseré s'élargit ; Banger : l'ombre s'écrase). */
.point:active:not(:disabled) {
  transform: translateY(var(--point-decalage-appui)) scale(0.98);
  box-shadow: var(--point-ombre-appui);
}

.point[data-etat="envoi"] {
  opacity: 0.6;
  cursor: progress;
}

.point-principal {
  font-size: var(--t-xxl);
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.point-secondaire {
  font-size: var(--t-m);
  font-weight: 700;
}

/* Place réservée : l'écran ne bouge pas quand un message apparaît sous le disque. */
.point-message {
  min-height: 3em;
  margin-top: var(--e-4);
  text-align: center;
}