/* ==========================================================================
   Charge à programmer — L'Atelier du Trégor

   Même vocabulaire que le planning mural : Caveat pour les titres et les
   grands chiffres, Archivo Narrow pour le reste, fond blanc, filets noirs,
   et les quatre feutres du tableau en aplats pastel cernés d'un filet fin.

   Contrairement au planning, cette page n'est pas une feuille A3 : une seule
   colonne pleine largeur qui défile. Rien n'est prévu pour l'impression.

   Les @font-face sont recopiées de styles.css plutôt que partagées : les deux
   pages sont servies indépendamment, et la duplication évite de toucher à une
   feuille qui fonctionne. Les fichiers, eux, ne sont chargés qu'une fois.

   DEUX RÈGLES À NE PAS DÉFAIRE, apprises sur le site en production :

   1. Tous les sélecteurs sont préfixés par « .charge ». La page est injectée
      dans le thème WordPress, qui se bat à spécificité égale — « .entry h3 »
      contre « .lot-head h3 » — et c'est alors l'ordre de chargement qui
      tranche, donc le hasard. Le préfixe donne 0,2,1 contre 0,1,1 : la
      question ne se pose plus.

   2. Les phases s'appellent « atelier » et « chantier », jamais « fab » ni
      « pose ». Le thème charge Font Awesome sur tout le site, et « .fab » y
      est la famille « Brands » : « display:inline-block » et « width:1em »
      écrasaient le bloc Atelier de chaque lot, réduit à 36 px de large sur
      fond gris. Vérifier toute classe nouvelle contre Font Awesome.
   ========================================================================== */

@font-face {
  font-family: 'Archivo Narrow';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/archivo-narrow-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo Narrow';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/archivo-narrow-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/caveat-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/caveat-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Jetons --------------------------------------------------------------
   Les quatre couleurs sont celles des feutres du planning mural. Elles ne
   portent jamais de texte : les chiffres et les libellés restent en noir,
   la couleur ne sert qu'à l'aplat ou au soulignement.                      */

.charge {
  --encre: #111;
  --gris: #555;
  --gris-clair: #7d7d7d;
  --papier: #fff;
  --filet: #d9d9d9;
  --piste: #ededed;

  --atelier: #F1F17F;      /* jaune  — fabrication et études */
  --chantier: #91DAF3;     /* bleu   — pose */
  --avancement: #ACED97;   /* vert   — heures déjà pointées */
  --depassement: #F4B09A;  /* rose   — au-delà du prévu */

  --titre: Caveat, cursive;
  --texte: 'Archivo Narrow', sans-serif;

  font-family: var(--texte);
  color: var(--encre);
  background: var(--papier);
  font-size: 16px;
  line-height: 1.5;
  max-width: 1400px;
  margin: 0 auto;
  padding: 32px 22px 80px;
  box-sizing: border-box;
}
.charge *,
.charge *::before,
.charge *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; background: #fff; }

/* Chiffres alignés en colonne partout où ils se comparent */
.charge .keys dd,
.charge .tot,
.charge .phase .h,
.charge .phase .wk,
.charge .stepper .val,
.charge .lot-foot .dur,
.charge .crow .vv,
.charge .avance .lbl,
.charge .target input {
  font-variant-numeric: tabular-nums;
}

/* --- Bandeau de tête ----------------------------------------------------- */

.charge .masthead { border-bottom: 2px solid var(--encre); padding-bottom: 18px; }
.charge .eyebrow {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris);
}
.charge h1 {
  font-family: var(--titre);
  font-weight: 400;
  font-size: clamp(38px, 5.5vw, 62px);
  line-height: 1;
  margin: 6px 0 0;
}
.charge .lede { max-width: 68ch; color: var(--gris); margin: 12px 0 0; font-size: 16px; }

/* --- Réglages ------------------------------------------------------------ */

.charge .settings {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 32px;
  align-items: flex-end;
  border: 1px solid var(--encre);
  padding: 16px 20px;
  margin: 24px 0 0;
}
.charge .fld { display: flex; flex-direction: column; gap: 4px; }
.charge .fld > label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gris);
}
.charge .fld input[type=number] {
  font-family: var(--texte);
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  background: transparent;
  color: var(--encre);
  border: 0;
  border-bottom: 1.5px solid var(--encre);
  padding: 2px 2px;
  width: 120px;
}
.charge .fld input[type=number]:focus { outline: none; border-bottom-width: 3px; }
.charge .fld .hint { font-size: 12.5px; color: var(--gris-clair); }

.charge .check { display: flex; align-items: center; gap: 8px; padding-bottom: 2px; }
.charge .check input { width: 16px; height: 16px; accent-color: #4a4a4a; }
.charge .check-libelle {
  font-size: 14.5px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--encre);
}

.charge .btn {
  font-family: var(--texte);
  font-size: 14px;
  color: var(--encre);
  background: var(--papier);
  border: 1px solid var(--encre);
  border-radius: 2px;
  padding: 7px 13px;
  cursor: pointer;
}
.charge .btn:hover { background: #f2f2f2; }
.charge .btn:focus-visible,
.charge .step:focus-visible,
.charge .check input:focus-visible,
.charge .target input:focus-visible { outline: 2px solid var(--encre); outline-offset: 2px; }

/* --- Synthèse ------------------------------------------------------------ */

/* Les filets sont portés par les cases, pas par le fond de la grille : à cinq
   indicateurs sur une grille à deux ou quatre colonnes, la case surnuméraire
   laisserait voir un rectangle gris. */
.charge .keys {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  background: var(--papier);
  margin: 22px 0 0;
}
.charge .key {
  background: var(--papier);
  padding: 14px 18px;
  outline: 1px solid var(--filet);
}
.charge .key dt {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gris);
  margin: 0 0 4px;
}
.charge .key dd {
  margin: 0;
  font-family: var(--titre);
  font-size: 40px;
  line-height: 1;
  display: inline-block;
}
.charge .key dd span {
  font-family: var(--texte);
  font-size: 13px;
  color: var(--gris);
  margin-left: 5px;
}
/* Atelier et chantier : le chiffre est souligné de sa couleur */
.charge .key.atelier dd { border-bottom: 4px solid var(--atelier); }
.charge .key.chantier dd { border-bottom: 4px solid var(--chantier); }

/* --- Sections ------------------------------------------------------------ */

.charge h2 {
  font-family: var(--titre);
  font-weight: 400;
  font-size: 36px;
  line-height: 1;
  margin: 46px 0 4px;
}
.charge .note { color: var(--gris); font-size: 14.5px; margin: 0 0 18px; max-width: 78ch; }
.charge .note strong { color: var(--encre); }

/* --- Carte de lot -------------------------------------------------------- */

.charge .lot { background: var(--papier); border: 1px solid var(--filet); margin: 0 0 12px; }
.charge .lot-head {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  align-items: baseline;
  padding: 13px 18px 11px;
}
.charge .lot-head h3 { font-size: 16.5px; font-weight: 700; margin: 0; }
.charge .lot-head .chantier {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gris);
}
.charge .lot-head .tot {
  margin-left: auto;
  font-size: 13.5px;
  color: var(--gris);
  text-align: right;
}
.charge .lot-head .tot b { color: var(--encre); font-weight: 700; }
.charge .lot-head .tot em { font-style: normal; }

.charge .avance {
  padding: 0 18px 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
}
.charge .avance .track {
  flex: 1 1 200px;
  min-width: 130px;
  height: 9px;
  background: var(--piste);
  border: 1px solid rgba(0, 0, 0, 0.18);
  display: flex;
}
.charge .avance .track i { display: block; height: 100%; background: var(--avancement); }
.charge .avance .track i.over { background: var(--depassement); }
.charge .avance .lbl { font-size: 12.5px; color: var(--gris); }
.charge .avance .lbl b { color: var(--encre); font-weight: 700; }

/* Pastilles : aplat pastel, filet fin, texte noir — comme les barres du
   planning, où la couleur ne porte jamais l'information à elle seule. */
.charge .pill {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 2px 8px;
  border: 1px solid rgba(0, 0, 0, 0.32);
  border-radius: 2px;
  background: var(--piste);
  color: var(--encre);
  white-space: nowrap;
}
.charge .pill.encours { background: var(--avancement); }
.charge .pill.depasse { background: var(--depassement); }

.charge .phases {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--filet);
  border-top: 1px solid var(--filet);
}
@media (max-width: 700px) {.charge .phases { grid-template-columns: 1fr; } }

.charge .phase {
  background: var(--papier);
  padding: 13px 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
}
.charge .phase .tag {
  font-size: 11px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 2px 8px;
  border: 1px solid rgba(0, 0, 0, 0.32);
  border-radius: 2px;
}
.charge .phase.atelier .tag { background: var(--atelier); }
.charge .phase.chantier .tag { background: var(--chantier); }
.charge .phase .h { font-size: 14px; color: var(--gris); }
.charge .phase .wk {
  margin-left: auto;
  font-family: var(--titre);
  font-size: 30px;
  line-height: 1;
}
.charge .phase.atelier .wk { border-bottom: 3px solid var(--atelier); }
.charge .phase.chantier .wk { border-bottom: 3px solid var(--chantier); }
.charge .phase .wk small { font-family: var(--texte); font-size: 12px; color: var(--gris); margin-left: 3px; }
/* Phase soldée ou vide : pas de chiffre, donc pas de soulignement */
.charge .phase.void .wk { font-family: var(--texte); font-size: 15px; color: var(--gris-clair); border-bottom: 0; }

.charge .stepper { display: inline-flex; align-items: center; border: 1px solid var(--encre); border-radius: 2px; }
.charge .step {
  font-family: var(--texte);
  font-size: 17px;
  line-height: 1;
  width: 28px;
  height: 28px;
  background: transparent;
  color: var(--encre);
  border: 0;
  cursor: pointer;
}
.charge .step:hover { background: #f2f2f2; }
.charge .step[disabled] { opacity: 0.3; cursor: default; }
.charge .stepper .val {
  font-size: 13.5px;
  min-width: 56px;
  text-align: center;
  padding: 0 4px;
  border-left: 1px solid var(--encre);
  border-right: 1px solid var(--encre);
}

.charge .lot-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: center;
  padding: 10px 18px;
  border-top: 1px solid var(--filet);
}
.charge .lot-foot .dur { font-size: 13.5px; color: var(--gris); }
.charge .lot-foot .dur b { color: var(--encre); font-weight: 700; }
.charge .bar {
  flex: 1 1 200px;
  min-width: 130px;
  height: 10px;
  background: var(--piste);
  border: 1px solid rgba(0, 0, 0, 0.18);
  display: flex;
}
.charge .bar i { display: block; height: 100%; }
.charge .bar .b-atelier { background: var(--atelier); }
.charge .bar .b-chantier { background: var(--chantier); }

.charge .target { display: flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--gris); }
.charge .target input {
  font-family: var(--texte);
  font-size: 14px;
  width: 58px;
  background: transparent;
  color: var(--encre);
  border: 1px solid var(--encre);
  border-radius: 2px;
  padding: 3px 6px;
}
.charge .target input:focus { outline: none; border-width: 2px; }

/* --- Comparatif ---------------------------------------------------------- */

.charge .compare { border: 1px solid var(--filet); background: var(--papier); padding: 16px 20px; }
.charge .crow {
  display: grid;
  grid-template-columns: minmax(150px, 1.4fr) 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 7px 0;
}
.charge .crow + .crow { border-top: 1px solid var(--filet); }
.charge .crow .nm { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.charge .crow .tr {
  height: 13px;
  background: var(--piste);
  border: 1px solid rgba(0, 0, 0, 0.18);
  display: flex;
}
.charge .crow .tr i { display: block; height: 100%; }
.charge .crow .vv { font-size: 13px; color: var(--gris); }

/* --- États et anomalies --------------------------------------------------- */

.charge .state { border: 1px solid var(--encre); background: var(--papier); padding: 18px 22px; margin: 22px 0 0; }
.charge .state.warn { background: var(--depassement); }
.charge .state h3 { font-family: var(--titre); font-weight: 400; font-size: 26px; line-height: 1; margin: 0 0 6px; }
.charge .state p { margin: 0; font-size: 14.5px; max-width: 70ch; }
.charge .state.warn p { color: var(--encre); }

/* Anomalies remontées par l'endpoint — rien ne disparaît en silence */
.charge .avertissements { margin: 26px 0 0; font-size: 13px; color: var(--gris-clair); }
.charge .avertissements-titre {
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gris);
}

.charge footer {
  margin: 48px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--filet);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  font-size: 12px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gris-clair);
}