/* ------------------------------------------------------------------
   Réassort — charte CAPELIO
   Palette, typographie et composants repris de charte-capelio.html.
   Marcellus est réservé au logotype ; tout le reste est en Jost.
   ------------------------------------------------------------------ */

:root {
  --ivoire:          #FBF6EC;
  --sable:           #EFE3C9;
  --champagne-clair: #C7AD83;
  --champagne:       #B89B6E;
  --or:              #8E7245;
  --espresso:        #271F18;

  --blanc:  #FFFFFF;
  --gris:   #6B6055;
  --succes: #4F7A5B;
  --alerte: #A85A42;

  --serif: "Marcellus", Georgia, serif;
  --sans:  "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  padding: 0 0 90px;
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  color: var(--espresso);
  background:
    radial-gradient(900px 420px at 82% -8%, rgba(199,173,131,.28), transparent 62%),
    radial-gradient(720px 380px at 6% 104%, rgba(184,155,110,.20), transparent 60%),
    var(--ivoire);
  background-attachment: fixed;
}

.saut {
  position: absolute; left: -9999px;
  background: var(--espresso); color: var(--ivoire); padding: 10px 16px;
}
.saut:focus { left: 12px; top: 12px; z-index: 50; }

/* --- En-tête ------------------------------------------------------ */

header.tete {
  background: var(--blanc);
  border-bottom: 1px solid var(--sable);
}
.tete__interieur {
  max-width: 1240px; margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
}
.tete__marque { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.tete__marque img { display: block; height: 40px; width: auto; }
.tete__appli {
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--or); border-left: 1px solid var(--sable); padding-left: 14px;
}

.onglets { margin-left: auto; display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.onglets a {
  display: inline-block; padding: 9px 15px; text-decoration: none;
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gris); border: 1px solid transparent;
}
.onglets a:hover { color: var(--or); border-color: var(--sable); }
.onglets a.actif { color: var(--ivoire); background: var(--or); border-color: var(--or); }
.onglets__sortie { margin-left: 10px; color: var(--champagne) !important; }

/* --- Page --------------------------------------------------------- */

.page { max-width: 1240px; margin: 0 auto; padding: 34px 24px 0; }
.page--etroite { max-width: 780px; }

h1 {
  font-weight: 300; font-size: clamp(26px, 3.6vw, 34px);
  letter-spacing: .045em; margin: 0 0 6px;
}
h2 {
  font-weight: 300; font-size: 21px; letter-spacing: .045em;
  margin: 46px 0 6px; padding-bottom: 11px; border-bottom: 1px solid var(--champagne);
}
h3 {
  font-size: 11.5px; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; color: var(--or); margin: 26px 0 10px;
}
.sous-titre { color: var(--gris); margin: 0 0 26px; max-width: 72ch; }
a { color: var(--or); }
.filet { width: 54px; height: 1px; background: var(--champagne); border: 0; margin: 18px 0 24px; }

/* --- Puces et encarts d'explication -------------------------------- */

.info { position: relative; display: inline-block; margin-left: 6px; vertical-align: middle; }
.info__puce {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--champagne); color: var(--blanc);
  font-size: 10.5px; font-weight: 500; cursor: help; font-style: italic;
}
.info__texte {
  position: absolute; left: 50%; bottom: calc(100% + 9px); transform: translateX(-50%);
  width: 280px; padding: 12px 14px; background: var(--espresso); color: var(--sable);
  font-size: 12.5px; line-height: 1.55; letter-spacing: 0; text-transform: none;
  font-weight: 300; z-index: 30; visibility: hidden; opacity: 0; transition: opacity .12s;
  box-shadow: 0 10px 26px rgba(39,31,24,.24);
}
.info__texte strong { display: block; color: var(--champagne-clair); font-weight: 500; margin-bottom: 3px; }
.info:hover .info__texte, .info:focus-within .info__texte { visibility: visible; opacity: 1; }

.encart {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--blanc); border: 1px solid var(--sable); border-left: 3px solid var(--champagne);
  padding: 15px 18px; margin: 0 0 22px;
}
.encart__puce {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; margin-top: 2px;
  background: var(--champagne); color: var(--blanc); font-size: 12px; font-style: italic; font-weight: 500;
}
.encart strong { display: block; font-weight: 500; font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--or); margin-bottom: 3px; }
.encart p { margin: 0; font-size: 14.5px; color: var(--gris); max-width: 92ch; }
.encart--alerte { border-left-color: var(--alerte); }
.encart--alerte .encart__puce { background: var(--alerte); }
.encart--alerte strong { color: var(--alerte); }

/* --- Messages ------------------------------------------------------ */

.message {
  padding: 13px 18px; margin: 0 0 22px; background: var(--blanc);
  border: 1px solid var(--sable); border-left: 3px solid var(--champagne); font-size: 15px;
}
.message--succes { border-left-color: var(--succes); }
.message--erreur { border-left-color: var(--alerte); }

/* --- Cartes -------------------------------------------------------- */

.grille { display: grid; gap: 18px; }
.grille--2 { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.grille--3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.grille--4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

.carte {
  background: var(--blanc); border: 1px solid var(--sable);
  border-left: 3px solid var(--champagne); padding: 22px 24px;
}
.carte--muette { border-left-color: var(--sable); }
.carte h3 { margin-top: 0; }

.chiffre { font-size: 30px; font-weight: 300; letter-spacing: .02em; line-height: 1.2; }
.chiffre--or { color: var(--or); }
.chiffre__note { font-size: 13px; color: var(--gris); }

.etape {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--blanc); border: 1px solid var(--sable); padding: 20px 22px; margin-bottom: 12px;
}
.etape__num {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--champagne); color: var(--or);
  display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.etape--faite { border-left: 3px solid var(--succes); }
.etape--faite .etape__num { background: var(--succes); border-color: var(--succes); color: var(--blanc); }
.etape__corps { flex: 1 1 auto; min-width: 0; }
.etape__corps p { margin: 4px 0 0; color: var(--gris); font-size: 14.5px; }

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

.bouton {
  display: inline-block; padding: 13px 28px; font-family: var(--sans);
  font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; color: var(--ivoire); background: var(--or);
  border: 1px solid var(--or); cursor: pointer; transition: background .12s;
}
.bouton:hover { background: var(--espresso); border-color: var(--espresso); }
.bouton--clair { background: transparent; color: var(--or); }
.bouton--clair:hover { background: var(--or); color: var(--ivoire); }
.bouton--petit { padding: 8px 16px; font-size: 11px; }
.bouton[disabled], .bouton.desactive { opacity: .4; pointer-events: none; }
.rangee { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 18px 0; }
.rangee--fin { justify-content: flex-end; }

/* --- Étiquettes ---------------------------------------------------- */

.etiquette {
  display: inline-block; padding: 3px 10px; font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; border: 1px solid var(--champagne); color: var(--or);
  background: var(--ivoire); white-space: nowrap;
}
.etiquette--pleine { background: var(--or); border-color: var(--or); color: var(--ivoire); }
.etiquette--succes { border-color: var(--succes); color: var(--succes); background: #EFF5F0; }
.etiquette--alerte { border-color: var(--alerte); color: var(--alerte); background: #FBEFEB; }
.etiquette--muette { border-color: var(--sable); color: var(--gris); background: var(--blanc); }

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

label { display: block; }
.champ { margin-bottom: 20px; }
.champ__nom {
  display: block; font-size: 11px; font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; color: var(--or); margin-bottom: 6px;
}
.champ__aide { font-size: 13px; color: var(--gris); margin: 5px 0 0; }

input[type=text], input[type=number], input[type=password], input[type=date],
select, textarea {
  width: 100%; padding: 11px 13px; font-family: var(--sans); font-size: 15px;
  font-weight: 300; color: var(--espresso); background: var(--blanc);
  border: 1px solid var(--sable); border-radius: 0;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--champagne); outline-offset: -1px; }
input[type=checkbox], input[type=radio] { width: auto; margin-right: 8px; accent-color: var(--or); }
.case { display: flex; align-items: flex-start; gap: 4px; margin-bottom: 12px; font-size: 15px; }
.case input { margin-top: 5px; }
textarea { min-height: 90px; resize: vertical; }
fieldset { border: 1px solid var(--sable); background: var(--blanc); padding: 20px 22px; margin: 0 0 20px; }
legend { font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--or); padding: 0 8px; }

.duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 20px; }

/* --- Zone de dépôt ------------------------------------------------- */

.depot {
  border: 2px dashed var(--champagne-clair); background: var(--blanc);
  padding: 40px 24px; text-align: center; cursor: pointer; transition: background .12s, border-color .12s;
}
.depot:hover, .depot.survol { border-color: var(--or); background: #FFFDF8; }
.depot__titre { font-size: 17px; margin: 0 0 6px; }
.depot__note { color: var(--gris); font-size: 13.5px; margin: 0; }
.depot input[type=file] { display: none; }

.barre { height: 4px; background: var(--sable); overflow: hidden; margin-top: 16px; }
.barre__jauge { height: 100%; width: 0; background: var(--or); transition: width .2s; }

/* --- Tableaux ------------------------------------------------------ */

.cadre-table { overflow-x: auto; border: 1px solid var(--sable); background: var(--blanc); }
table { width: 100%; border-collapse: collapse; background: var(--blanc); font-size: 14px; }
th {
  text-align: left; padding: 11px 13px; background: var(--espresso); color: var(--sable);
  font-size: 10.5px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase;
  white-space: nowrap; position: sticky; top: 0; z-index: 2;
}
td { padding: 9px 13px; border-top: 1px solid var(--sable); vertical-align: middle; }
tbody tr:hover td { background: #FDFAF3; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ref { font-weight: 500; white-space: nowrap; }
.muet { color: var(--gris); font-size: 13px; }
.ligne-total td { border-top: 2px solid var(--or); font-weight: 500; background: var(--ivoire); }
tr.exclue td { color: var(--gris); background: #FBFAF7; }
td input[type=number] { width: 84px; padding: 5px 7px; font-size: 14px; text-align: right; }

.tri { cursor: pointer; user-select: none; }
.tri::after { content: ' ⇅'; opacity: .4; font-size: 10px; }
.tri.asc::after { content: ' ↑'; opacity: 1; }
.tri.desc::after { content: ' ↓'; opacity: 1; }

/* --- Barre d'outils du tableau ------------------------------------- */

.outils {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  background: var(--blanc); border: 1px solid var(--sable); padding: 12px 16px; margin-bottom: 0;
}
.outils input[type=text] { width: 240px; }
.outils select { width: auto; }
.outils__compte { margin-left: auto; font-size: 13px; color: var(--gris); }

/* --- Connexion ----------------------------------------------------- */

.connexion { max-width: 420px; margin: 8vh auto 0; text-align: center; }
.connexion img { width: 190px; height: auto; margin: 0 auto 28px; display: block; }
.connexion form { background: var(--blanc); border: 1px solid var(--sable); padding: 30px 28px; text-align: left; }

/* --- Pied ---------------------------------------------------------- */

.pied {
  max-width: 1240px; margin: 60px auto 0; padding: 22px 24px;
  border-top: 1px solid var(--sable); color: var(--gris); font-size: 12.5px;
}
.pied p { margin: 0; }

/* --- Rapport imprimable -------------------------------------------- */

.rapport { background: var(--blanc); border: 1px solid var(--sable); padding: 44px 46px; }
.rapport__tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 30px; flex-wrap: wrap; }
.rapport__tete img { height: 46px; width: auto; }
.rapport__meta { text-align: right; font-size: 13px; color: var(--gris); }
.rapport dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px 22px; margin: 22px 0 0; }
.rapport dt { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--or); }
.rapport dd { margin: 2px 0 0; font-size: 15px; }

@media print {
  body { background: #fff; padding: 0; }
  header.tete, .onglets, .pied, .rangee, .outils, .sans-impression { display: none !important; }
  .page { max-width: none; padding: 0; }
  .rapport { border: 0; padding: 0; }
  th { position: static; background: #271F18 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  tr { break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
}

@media (max-width: 700px) {
  .tete__interieur { padding: 12px 16px; gap: 14px; }
  .onglets { margin-left: 0; width: 100%; }
  .page { padding: 24px 16px 0; }
  .rapport { padding: 24px 18px; }
}

/* --- Blocs du rapport (partagés avec l'export HTML) ---------------- */

.rapport__sur { font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--or); margin: 0; }
.kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin: 20px 0 4px; }
.kpi div { border: 1px solid var(--sable); border-left: 3px solid var(--champagne); padding: 12px 15px; }
.kpi span { display: block; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--or); }
.kpi strong { font-weight: 400; font-size: 22px; }
.note { background: var(--ivoire); border-left: 3px solid var(--champagne); padding: 11px 15px; margin: 22px 0 0; }
.corrige { color: var(--alerte); }
code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; background: var(--ivoire);
       padding: 1px 5px; border: 1px solid var(--sable); }
.rapport h1 { font-size: 27px; }
.rapport h2 { margin-top: 34px; }
.rapport table { margin-top: 6px; font-size: 12.5px; }
.rapport td { padding: 6px 10px; }
.rapport th { position: static; }
@media print { .saut-page { break-before: page; } }
.reglages { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px 22px; margin: 22px 0 0; }
.reglages span { display: block; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--or); }
.reglages strong { font-weight: 400; font-size: 14px; }