/* Charte des outils Walpine, proposition B « Étiquette ».
   Tirée de walpine.fr : ambre de marque, encre, fonds gris clair,
   Big Shoulders Display pour les titres, Inter pour le texte.

   Règles de lisibilité communes à tous les outils de la brasserie :
   - jamais de texte blanc sur l'ambre (2,6 : 1), texte encre à la place ;
   - rien de tactile sous 44 px ;
   - aucun contraste obtenu par transparence : une teinte secondaire est une couleur ;
   - un état se dit par un mot, pas par une couleur seule.

   Toujours en clair, même quand le téléphone est en mode sombre : c'est la
   charte retenue par Jean. */

:root {
  color-scheme: light;

  --fond: #eaeaea;
  --carte: #ffffff;
  --trait: #e2e2e2;
  --encre: #121212;
  --texte: #374151;
  --texte-discret: #5b6270;

  --bandeau: #121212;
  --bandeau-texte: #f5f5f5;
  --bandeau-discret: #c9c9c9;

  --ambre: #da932e;
  --sur-ambre: #121212;
  --ambre-texte: #9c6212;
  --inactif-fond: #d5d5d5;
  --inactif-texte: #4b5160;

  --champ: #ffffff;
  --champ-bordure: #c9cdd3;

  --erreur-fond: #fbe9e6;
  --erreur-bordure: #ebb8ae;
  --erreur-texte: #8e2a20;
  --succes-fond: #eaf3df;
  --succes-bordure: #c9dfaf;
  --succes-texte: #3f6b1e;

  --police-titre: 'Big Shoulders Display', 'Arial Narrow', Impact, sans-serif;
  --police-texte: Inter, 'Helvetica Neue', Arial, sans-serif;

  --rayon-carte: 16px;
  --rayon-champ: 12px;
  --pilule: 999px;
  --touche: 44px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police-texte);
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
}

.page {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 16px 32px;
}

/* Le bandeau : la signature commune. Seul le mot sous WALPINE change d'un outil à l'autre. */

.bandeau {
  background: var(--bandeau);
  color: var(--bandeau-texte);
  margin: 0 -16px 20px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.marque {
  margin: 0;
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 30px;
  line-height: 0.88;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--bandeau-texte);
}

.marque small {
  display: block;
  margin-top: 6px;
  font-family: var(--police-texte);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.14em;
  color: var(--ambre);
}

.bandeau .nom {
  font-size: 14px;
  color: var(--bandeau-discret);
}

.bandeau-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-shrink: 0;
}

/* Cartes */

.carte {
  background: var(--carte);
  border-radius: var(--rayon-carte);
  padding: 16px;
  margin-bottom: 16px;
}

.carte > h2 {
  margin: 0 0 14px;
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 24px;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--encre);
}

.carte > p {
  margin: 0;
}

/* Une carte dans une carte (liste des salariés) devient une ligne. */
.carte .carte {
  background: transparent;
  border-radius: 0;
  margin: 0;
  padding: 14px 0 4px;
  border-top: 1px solid var(--trait);
}

.carte .carte:first-child {
  border-top: 0;
  padding-top: 0;
}

.carte strong {
  color: var(--encre);
  font-weight: 600;
}

/* Champs */

label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 6px;
  color: var(--texte);
}

input,
select {
  width: 100%;
  font-family: inherit;
  font-size: 16px;
  padding: 10px 14px;
  border: 1px solid var(--champ-bordure);
  border-radius: var(--rayon-champ);
  background: var(--champ);
  color: var(--encre);
  margin-bottom: 16px;
  min-height: 48px;
}

input:focus,
select:focus {
  outline: 3px solid var(--ambre);
  outline-offset: 1px;
  border-color: var(--ambre-texte);
}

/* Boutons : pilule ambre pleine largeur, texte encre. */

button {
  width: 100%;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  min-height: 48px;
  padding: 12px 20px;
  border: none;
  border-radius: var(--pilule);
  background: var(--ambre);
  color: var(--sur-ambre);
  cursor: pointer;
}

button:focus-visible,
a:focus-visible {
  outline: 3px solid var(--ambre);
  outline-offset: 2px;
}

button:disabled {
  background: var(--inactif-fond);
  color: var(--inactif-texte);
  cursor: default;
}

button.secondaire {
  background: transparent;
  color: var(--ambre-texte);
  border: 1.5px solid currentColor;
}

button.discret {
  width: auto;
  background: transparent;
  color: var(--bandeau-texte);
  border: 1px solid var(--bandeau-texte);
  min-height: var(--touche);
  padding: 0 14px;
  font-size: 14px;
  font-weight: 500;
}

.lien {
  display: inline-flex;
  align-items: center;
  width: auto;
  min-height: var(--touche);
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  color: var(--ambre-texte);
  font-size: 15px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.actions-carte {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.actions-carte button {
  width: auto;
  flex: 1 1 auto;
  font-size: 15px;
}

.actions-carte ~ div {
  margin-top: 12px;
}

/* Messages */

.bandeau-erreur,
.bandeau-succes {
  border-radius: var(--rayon-champ);
  padding: 12px 14px;
  margin-bottom: 16px;
}

.bandeau-erreur {
  background: var(--erreur-fond);
  border: 1px solid var(--erreur-bordure);
  color: var(--erreur-texte);
}

.bandeau-succes {
  background: var(--succes-fond);
  border: 1px solid var(--succes-bordure);
  color: var(--succes-texte);
}

.cache {
  display: none !important;
}

/* Texte d'information */

.info-titre {
  margin: 18px 0 4px;
  font-size: 17px;
  font-weight: 600;
  color: var(--encre);
}

.info-titre:first-child {
  margin-top: 0;
}

.info-paragraphe {
  margin: 0 0 8px;
  color: var(--texte);
  line-height: 1.55;
}

.confirmation-depart {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: var(--erreur-fond);
  border: 1px solid var(--erreur-bordure);
  border-radius: var(--rayon-champ);
}

.confirmation-depart p {
  margin: 0 0 4px;
  color: var(--erreur-texte);
}

.contrat-ligne {
  color: var(--texte-discret);
  font-size: 14px;
  margin: 4px 0 0;
}

/* Rectifications d'une feuille (ticket 06) */

.rectifications {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1.5px solid var(--ambre);
  border-radius: var(--rayon-champ);
}

.rectifications p {
  margin: 0 0 6px;
}

/* Contrats d'un salarié (ticket 05) */

.historique-contrats {
  margin-bottom: 12px;
}

.historique-contrats p {
  margin: 0 0 8px;
}

.formulaire-contrat {
  margin-top: 12px;
}

/* Planning type et mois (ticket 02) */

.bandeau-alerte {
  border-radius: var(--rayon-champ);
  padding: 12px 14px;
  margin-bottom: 16px;
  background: var(--carte);
  border: 1.5px solid var(--ambre);
  color: var(--encre);
}

.ligne-planning {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: var(--touche);
  padding: 10px 0;
  border-top: 1px solid var(--trait);
}

.ligne-planning:first-child {
  border-top: 0;
}

.ligne-planning .nom-jour {
  font-size: 14px;
  font-weight: 600;
  color: var(--encre);
}

.ligne-planning.jour-dimanche .nom-jour {
  color: var(--ambre-texte);
}

.choix-duree {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}

.choix-duree select {
  width: auto;
  min-width: 64px;
  margin-bottom: 0;
}

/* Navigation du mois */

.navigation-mois {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
}

.navigation-mois button {
  width: var(--touche);
  height: var(--touche);
  min-height: var(--touche);
  padding: 0;
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
}

.navigation-mois h2 {
  margin: 0;
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--encre);
  text-align: center;
  flex: 1;
}

/* Semaines */

.semaine-entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding-bottom: 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--trait);
}

.semaine-entete strong {
  color: var(--encre);
  font-size: 15px;
  flex-basis: 100%;
}

.etiquette {
  font-size: 12px;
  font-weight: 600;
  color: var(--texte-discret);
}

/* Une ligne de jour */

.jour {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: var(--touche);
  padding: 10px 4px;
  border-top: 1px solid var(--trait);
  border-left: 3px solid transparent;
  cursor: pointer;
}

.jour:first-child {
  border-top: 0;
}

.jour-dimanche {
  border-left-color: var(--ambre);
}

.jour-ferie {
  background: var(--fond);
}

.jour-hors-contrat {
  background: var(--inactif-fond);
  color: var(--inactif-texte);
  cursor: default;
}

.jour-libelle {
  font-size: 14px;
  font-weight: 600;
  color: var(--encre);
}

.jour-hors-contrat .jour-libelle {
  color: var(--inactif-texte);
}

.jour-ferie-nom {
  font-size: 12px;
  color: var(--texte-discret);
}

.jour-etat {
  font-size: 14px;
  color: var(--texte);
  text-align: right;
}

.jour-hors-contrat .jour-etat {
  color: var(--inactif-texte);
}

/* Éditeur d'un jour */

.editeur-jour {
  border-top: 1px solid var(--trait);
  padding: 14px 4px;
}

.editeur-jour .mode-boutons {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.editeur-jour .mode-boutons button {
  flex: 1 1 auto;
  width: auto;
}

.editeur-jour label {
  margin-top: 10px;
}

.editeur-jour .lien {
  margin-top: 6px;
}

/* Signature et verrouillage (ticket 03) */

.etat-feuille {
  margin: 8px 0 0;
  font-weight: 600;
  color: var(--encre);
}

.jour-verrouille {
  cursor: default;
}

.pied-signature {
  border-top: 1px solid var(--trait);
  padding: 12px 4px 0;
}

.pied-signature .bandeau-alerte {
  margin-bottom: 12px;
}

.signature-date {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--encre);
}

.signature-image {
  display: block;
  width: 100%;
  max-width: 300px;
  aspect-ratio: 5 / 2;
  background: var(--champ);
  border: 1px solid var(--champ-bordure);
  border-radius: var(--rayon-champ);
}

.zone-signature {
  margin-top: 4px;
}

.zone-signature .contrat-ligne {
  margin: 0 0 8px;
}

/* touch-action: none : le doigt trace sans faire défiler la page. */
.pad-signature {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 2;
  background: var(--champ);
  border: 2px dashed var(--champ-bordure);
  border-radius: var(--rayon-champ);
  touch-action: none;
  cursor: crosshair;
}

.zone-signature .bandeau-erreur {
  margin: 12px 0 0;
}

.deverrouillage-admin {
  margin-top: 12px;
}

/* Mois, validation et envoi (ticket 04) */

.ligne-mois {
  border-top: 1px solid var(--trait);
  padding: 12px 0;
}

.ligne-mois:first-child {
  border-top: 0;
}

.ligne-mois p {
  margin: 0 0 4px;
}

.ligne-mois .actions-carte {
  margin-top: 8px;
}

#zone-envoi-mois {
  border-top: 1px solid var(--trait);
  padding-top: 12px;
}

#zone-envoi-mois p {
  margin: 0 0 8px;
}

.ligne-journal {
  margin: 0;
  padding: 8px 0;
  border-top: 1px solid var(--trait);
  font-size: 14px;
  color: var(--texte);
}

.ligne-journal:first-child {
  border-top: 0;
}