/* =============================================================================
   Jetons de la direction artistique — voir docs/direction-artistique.md
   Le thème s'applique avec l'attribut data-enseigne sur <html> :
     <html data-enseigne="case">   ou   <html data-enseigne="banger">
   Sans attribut : socle neutre (connexion, vue employeur « Les deux »).
   Ne mettre ici que des jetons et les règles de base : les composants vont dans style.css
   et n'utilisent que ces variables (aucune couleur en dur ailleurs).
   ============================================================================= */

/* --- Polices (fichiers woff2 à placer dans pb_public/vendor/fonts/, licence OFL) --- */
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("vendor/fonts/atkinson-hyperlegible-next-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("vendor/fonts/atkinson-hyperlegible-next-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("vendor/fonts/source-serif-4-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Big Shoulders";
  src: url("vendor/fonts/big-shoulders-800.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}

/* --- Socle : « ardoise et pierre » (toits d'ardoise, murs de tuffeau) ----------- */
:root {
  /* Typographie */
  --police-texte: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, sans-serif;
  --police-marque: var(--police-texte);
  --graisse-marque: 700;
  --interlettrage-marque: 0;

  /* Échelle (base 17 px, rapport ≈ 1,25) */
  --t-xs: 0.8125rem;   /* 13,8 px : mentions, légendes */
  --t-s: 0.9375rem;    /* 15,9 px : texte secondaire */
  --t-m: 1.0625rem;    /* 18 px : texte courant */
  --t-l: 1.375rem;     /* 23 px : titres de bloc */
  --t-xl: 1.875rem;    /* 32 px : titre d'écran */
  --t-xxl: 2.75rem;    /* 47 px : libellé du bouton de pointage */

  /* Espacements */
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px; --e-6: 32px; --e-7: 48px;

  /* Formes */
  --rayon-petit: 6px;
  --rayon: 10px;
  --cible-min: 48px;                 /* hauteur minimale de toute zone cliquable */
  --taille-point: min(66vw, 240px);  /* diamètre du bouton de pointage */
  --largeur-max: 1120px;             /* largeur maximale des vues employeur */

  /* Couleurs */
  --fond: #EFEEEA;          /* pierre */
  --surface: #FFFFFF;
  --encre: #22292F;         /* ardoise foncée */
  --encre-2: #55606A;       /* texte secondaire */
  --trait: #77818A;         /* bordures de champs et de tableaux (≥ 3:1) */
  --separateur: 1px solid #E2E1DC; /* lignes entre les rangées d'une liste ou d'un tableau */
  --accent: #2F4858;        /* ardoise bleue : boutons principaux */
  --sur-accent: #FFFFFF;    /* texte posé sur --accent */
  --accent-texte: #2F4858;  /* liens et texte d'accent */
  --ok: #1E7A46;
  --alerte: #A2470C;
  --erreur: #B42318;
  --focus: #1F5FBF;

  /* Bouton de pointage */
  --point-bordure: 0 solid transparent;
  --point-ombre: none;
  --point-ombre-appui: none;
  --point-decalage-appui: 0;

  /* Marqueur de marque (bandeau sous l'en-tête) */
  --marqueur: none;
  --marqueur-hauteur: 0;
}

/* --- Case. : chaux, stuc ocre brun, zellige, inox ; serif fine du logo ---------- */
[data-enseigne="case"] {
  --police-marque: "Source Serif 4", Georgia, serif;
  --graisse-marque: 400;

  --fond: #F2EDE4;          /* chaux chaude */
  --surface: #FBF9F4;       /* émail */
  --encre: #3B2A20;         /* stuc brun */
  --encre-2: #6A584B;
  --trait: #7F878A;         /* inox */
  --separateur: 1px solid #E2DACB;
  --accent: #0E6B5A;        /* zellige vert */
  --accent-texte: #0E6B5A;
  --zellige-bleu: #1F5A85;
  --zellige-ocre: #C98A1C;  /* décoratif uniquement, jamais pour du texte */

  /* Disque émaillé : liseré clair intérieur, comme le bord d'une assiette */
  --point-ombre: inset 0 0 0 10px rgb(255 255 255 / 0.16);
  --point-ombre-appui: inset 0 0 0 14px rgb(255 255 255 / 0.22);

  /* Bande de zellige sous l'en-tête */
  --marqueur: repeating-linear-gradient(90deg,
      #0E6B5A 0 14px, #FBF9F4 14px 16px,
      #1F5A85 16px 30px, #FBF9F4 30px 32px,
      #C98A1C 32px 46px, #FBF9F4 46px 48px);
  --marqueur-hauteur: 6px;
}

/* --- Banger : carnet de notes, logo rouge, tabliers noirs, assiettes émaillées ----- */
[data-enseigne="banger"] {
  --police-marque: "Big Shoulders", Impact, "Arial Narrow", sans-serif;
  --graisse-marque: 800;
  --interlettrage-marque: 0.01em;

  --fond: #F1ECDD;          /* papier du carnet */
  --surface: #FFFFFF;       /* tôle émaillée blanche */
  --encre: #181818;         /* tablier noir */
  --encre-2: #5A5448;
  --trait: #181818;
  --separateur: 1px solid #AFC0D3; /* réglure bleue du carnet */
  --accent: #E01E05;        /* rouge du logo (#F11F05), à peine foncé pour le texte blanc */
  --accent-texte: #B81904;  /* rouge foncé : texte d'accent */
  --marine: #14234F;        /* liseré bleu marine des assiettes émaillées */
  --ok: #17613A;
  --alerte: #8A3B08;
  --erreur: #A11D16;

  --rayon: 4px;
  --rayon-petit: 2px;

  /* Autocollant : contour épais + ombre pleine décalée, qui s'écrase à l'appui */
  --point-bordure: 4px solid var(--encre);
  --point-ombre: 0 6px 0 var(--encre);
  --point-ombre-appui: 0 1px 0 var(--encre);
  --point-decalage-appui: 5px;

  /* Liseré bleu marine sous l'en-tête, comme le bord des assiettes */
  --marqueur: var(--marine);
  --marqueur-hauteur: 6px;
}

/* --- Règles de base ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 106.25%; /* 17 px */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--police-texte);
  font-size: var(--t-m);
  line-height: 1.5;
}

/* Chiffres alignés partout où il y a des heures et des durées */
.chiffres, table, time, .duree { font-variant-numeric: tabular-nums; }

/* Focus clavier toujours visible */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}