/* =====================================================================
   MUTUKA — feuille de style applicative
   Structure reprise de e-School ; charte SADA MOTORS CD (annexe 2) :
   orange #E8590C réservé à l'action, brun-rouge #7A2807 en dégradé,
   fond neutre #F3F4F6, texte #1F2933. L'orange n'est jamais un fond
   de page. Les statuts d'OR ont leur propre échelle, hors marque.
   ===================================================================== */

:root {
  --orange:     #E8590C;
  --orange-f:   #C44A07;
  --orange-cl:  #FDEDE1;
  --orange-tr:  #F7C9A9;
  --brun:       #7A2807;
  --ardoise:    #161D24;
  --ardoise-2:  #202A33;
  --ardoise-3:  #2C3945;

  --papier:    #F3F4F6;
  --surface:   #FFFFFF;
  --creux:     #FAFAFB;
  --trait:     #E2E5E9;
  --texte:     #1F2933;
  --texte-2:   #616E7C;
  --texte-3:   #9AA5B1;

  --vert:      #1E7A4C;
  --alerte:    #B4232A;
  --ambre:     #B4740A;

  --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --corps:   'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono:    'IBM Plex Mono', Consolas, monospace;

  --r: 6px;
  --ombre: 0 1px 2px rgba(31,41,51,.05), 0 4px 14px rgba(31,41,51,.05);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--corps);
  font-size: 14px;
  line-height: 1.5;
  color: var(--texte);
  background: var(--papier);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--texte); text-decoration: none; }

/* --- Structure -------------------------------------------------------- */

.app { display: grid; grid-template-columns: 236px 1fr; min-height: 100vh; }

.aside {
  background: linear-gradient(178deg, #1B242D 0%, #12181E 100%);
  color: #A9B4BF;
  display: flex;
  flex-direction: column;
}

.marque {
  padding: 17px 18px 14px;
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.marque img { display: block; width: 154px; height: auto; margin-bottom: 8px; }
.marque span {
  font-size: 10px;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--orange);
  font-weight: 600;
}

.menu { padding: 11px 10px; flex: 1; }
.menu a, .menu .is-locked {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-radius: var(--r);
  color: #A9B4BF;
  font-weight: 500;
  font-size: 13.2px;
  border-left: 3px solid transparent;
}
.menu a.is-active {
  background: var(--ardoise-2);
  color: #fff;
  border-left-color: var(--orange);
}
.menu .groupe {
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #6C7B89;
  padding: 14px 12px 5px;
}
.menu .is-locked { color: #5E6D7B; }
.menu .is-locked em {
  margin-left: auto; font-style: normal; font-size: 9.5px;
  letter-spacing: .1em; text-transform: uppercase; color: #6C7B89;
  border: 1px solid #303C48; border-radius: 999px; padding: 1px 7px;
}
.badge-menu {
  margin-left: auto; background: var(--orange); color: #fff;
  font-size: 10.5px; font-weight: 700; min-width: 18px; text-align: center;
  padding: 1px 6px; border-radius: 999px;
}

.version-appli {
  padding: 12px 18px 15px;
  border-top: 1px solid rgba(255,255,255,.09);
  font-size: 11px; color: #6C7B89; letter-spacing: .04em;
}
.version-appli span { display: block; font-size: 10px; color: #4E5B67; }

.principal { min-width: 0; display: flex; flex-direction: column; }

.barre {
  background: var(--surface);
  border-bottom: 1px solid var(--trait);
  padding: 12px 24px;
  display: flex; align-items: center; gap: 16px;
}
.barre h1 {
  margin: 0;
  font-family: var(--display);
  font-size: 25px; font-weight: 600;
  letter-spacing: .045em; text-transform: uppercase;
}
.barre .actions { display: flex; gap: 8px; }

/* Marqueur d'offre : PRO / PREMIUM. Contour seul en PRO, aplat orange
   en PREMIUM — l'orange marque l'état actif, pas la décoration. */
.offre {
  font-family: var(--display);
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 600; padding: 3px 10px; border-radius: 3px;
  border: 1px solid var(--trait); color: var(--texte-2); background: var(--creux);
}
.offre--premium { background: var(--orange); border-color: var(--orange); color: #fff; }

.compte {
  display: flex; align-items: center; gap: 10px;
  margin-left: auto; padding-left: 14px; border-left: 1px solid var(--trait);
}
.compte__pastille {
  width: 33px; height: 33px; border-radius: 50%;
  background: var(--ardoise); color: #fff;
  font-family: var(--display); font-size: 12.5px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.compte__identite { line-height: 1.25; }
.compte__identite b { display: block; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.compte__identite em {
  font-style: normal; font-size: 10.5px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--texte-2);
}
.compte__action {
  width: 31px; height: 31px; border: 1px solid var(--trait); border-radius: 50%;
  background: var(--surface); color: var(--texte-2);
  display: inline-flex; align-items: center; justify-content: center;
}
.compte__action svg { width: 16px; height: 16px; }

.contenu { padding: 20px 24px 34px; flex: 1; }

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

.carte {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--r);
  box-shadow: var(--ombre);
  margin-bottom: 18px;
}
.carte > h2 {
  margin: 0; padding: 13px 20px;
  border-bottom: 1px solid var(--trait);
  font-family: var(--display);
  font-size: 15.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--texte-2);
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.carte > h2 .sur { font-family: var(--corps); font-size: 11.5px; letter-spacing: 0; text-transform: none; color: var(--texte-3); }
.carte > .corps { padding: 18px 20px; }
.carte > .corps--plat { padding: 0; }

.grille { display: grid; gap: 16px; align-items: start; }
.grille--2 { grid-template-columns: 1fr 1fr; }
.grille--3 { grid-template-columns: repeat(3, 1fr); }
.grille--2-1 { grid-template-columns: 1.6fr 1fr; }
.grille--1-2 { grid-template-columns: 1fr 1.7fr; }

.indication {
  margin: 0 0 14px; padding: 9px 12px;
  border-left: 3px solid var(--orange-tr);
  background: var(--creux); color: var(--texte-2);
  font-size: 12px; line-height: 1.55;
  border-radius: 0 var(--r) var(--r) 0;
}
.indication b { color: var(--texte); font-weight: 600; }
.discret { color: var(--texte-2); font-size: 12px; }

/* --- Indicateurs ------------------------------------------------------ */

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.kpi {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-top: 3px solid var(--ardoise-3);
  border-radius: var(--r);
  padding: 12px 14px;
}
.kpi--argent { border-top-color: var(--orange); }
.kpi--alerte { border-top-color: var(--alerte); }
.kpi--ok     { border-top-color: var(--vert); }
.kpi span {
  display: block; font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--texte-2); font-weight: 600;
}
.kpi b {
  display: block; font-family: var(--display); font-size: 29px;
  font-weight: 600; line-height: 1.15; margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.kpi em {
  font-style: normal; display: block; font-size: 11px; color: var(--texte-2);
  margin-top: 1px;
}
.kpi em.hausse { color: var(--vert); font-weight: 600; }
.kpi em.baisse { color: var(--alerte); font-weight: 600; }

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

.tableau { width: 100%; border-collapse: collapse; }
.tableau th {
  text-align: left; font-family: var(--display); font-size: 11.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--texte-2);
  padding: 9px 14px; border-bottom: 1px solid var(--trait);
  background: var(--creux); white-space: nowrap;
}
.tableau td { padding: 10px 14px; border-bottom: 1px solid var(--trait); vertical-align: middle; }
.tableau tbody tr:last-child td { border-bottom: none; }
.tableau .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tableau .fort { font-weight: 600; }
.tableau tr.is-selectionnee td { background: var(--orange-cl); box-shadow: inset 3px 0 0 var(--orange); }
.tableau .sous td { background: var(--creux); font-size: 12.5px; color: var(--texte-2); }
.tableau tfoot td { background: var(--creux); font-weight: 600; border-top: 1px solid var(--trait); }

.ref {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  letter-spacing: .04em; background: var(--ardoise); color: #fff;
  padding: 2px 7px; border-radius: 3px; font-size: 11.5px; white-space: nowrap;
}
.ref--clair { background: var(--orange-cl); color: var(--brun); }
.plaque {
  display: inline-block; white-space: nowrap;
  font-family: var(--mono); font-weight: 600; font-size: 12px;
  border: 1px solid var(--trait); border-left: 4px solid var(--ardoise-3);
  border-radius: 3px; padding: 2px 7px; background: #fff; letter-spacing: .05em;
}

/* --- Pastilles -------------------------------------------------------- */

.pastille {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: .02em; border: 1px solid;
  white-space: nowrap;
}
.pastille.ok      { color: #10603F; background: #E4F2EB; border-color: #B9DCCC; }
.pastille.wait    { color: #7E5106; background: #FBF1DE; border-color: #EBD8AC; }
.pastille.bad     { color: #8A1A20; background: #FAE9EA; border-color: #EEC5C7; }
.pastille.neutral { color: #3E4C59; background: #EDEFF2; border-color: #D8DDE3; }
.pastille.info    { color: #1B4B7E; background: #E6EFF8; border-color: #C3D8EC; }

/* Statuts d'OR : échelle propre, indépendante de la marque (annexe 2). */
.statut {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.statut::before { content: ''; width: 8px; height: 8px; border-radius: 2px; background: currentColor; }
.st-brouillon { color: #7B8794; }
.st-ouvert    { color: #2C6FB5; }
.st-cours     { color: #0F766E; }
.st-piece     { color: #B4232A; }
.st-client    { color: #B4740A; }
.st-qualite   { color: #6B4FA8; }
.st-pret      { color: #1E7A4C; }
.st-facture   { color: #1E4E8C; }

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

.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: var(--r);
  border: 1px solid var(--trait); background: var(--surface);
  color: var(--texte); font: inherit; font-weight: 600; font-size: 12.5px;
  white-space: nowrap;
}
.btn--primaire { background: var(--orange); border-color: var(--orange); color: #fff; }
.btn--sombre   { background: var(--ardoise); border-color: var(--ardoise); color: #fff; }
.btn--danger   { color: var(--alerte); border-color: #EEC5C7; }
.btn--petit    { padding: 4px 10px; font-size: 11.5px; }

/* --- Formulaires et filtres ------------------------------------------- */

.filtres {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
  padding: 12px 16px; background: var(--surface);
  border: 1px solid var(--trait); border-radius: var(--r); margin-bottom: 16px;
}
.champs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px 15px; }
.champs--2 { grid-template-columns: repeat(2, 1fr); }
.champs--4 { grid-template-columns: repeat(4, 1fr); }
.champ { display: flex; flex-direction: column; gap: 4px; min-width: 140px; }
.champ--large { grid-column: 1 / -1; }
.champ label { font-size: 11.5px; font-weight: 600; color: var(--texte-2); }
.champ .val, .champ input, .champ select {
  width: 100%; padding: 7px 10px; border: 1px solid var(--trait);
  border-radius: var(--r); background: var(--surface); font: inherit;
  font-size: 13px; color: var(--texte);
}
.champ .val--vide { color: var(--texte-3); }
.champ .val--focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(232,89,12,.14); }
.champ .val--select { padding-right: 26px; background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='7'><path d='M1 1l4 4 4-4' stroke='%23616E7C' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>") right 10px center no-repeat; }
.pied-formulaire {
  display: flex; gap: 10px; align-items: center;
  padding: 13px 20px; border-top: 1px solid var(--trait);
  background: var(--creux); border-radius: 0 0 var(--r) var(--r);
}
.pied-formulaire .a-droite { margin-left: auto; display: flex; gap: 10px; align-items: center; }

fieldset { border: 1px solid var(--trait); border-radius: var(--r); padding: 13px 15px; margin: 0 0 15px; }
legend {
  font-family: var(--display); font-size: 12.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--brun); padding: 0 6px; font-weight: 600;
}

/* --- Alertes ---------------------------------------------------------- */

.alerte {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 11px 15px; border: 1px solid; border-left-width: 3px;
  border-radius: var(--r); margin-bottom: 15px; font-size: 13px; line-height: 1.5;
}
.alerte::before {
  flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%;
  font-family: var(--display); font-size: 12px; font-weight: 700; line-height: 18px;
  text-align: center; color: #fff;
}
.alerte__texte { flex: 1; }
.alerte__texte b { display: block; font-weight: 600; margin-bottom: 1px; }
.alerte__actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.alerte.warning { background: #FCF5E6; border-color: #EBD8AC; border-left-color: var(--ambre); color: #7E5106; }
.alerte.warning::before { content: "!"; background: var(--ambre); }
.alerte.info { background: var(--orange-cl); border-color: var(--orange-tr); border-left-color: var(--orange); color: #8A3806; }
.alerte.info::before { content: "i"; background: var(--orange); }
.alerte.success { background: #E9F4EE; border-color: #B9DCCC; border-left-color: var(--vert); color: #10603F; }
.alerte.success::before { content: "\2713"; background: var(--vert); }

/* --- Paires libellé / valeur ------------------------------------------ */

.paires { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 13px 20px; }
.paire span {
  display: block; font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--texte-2); font-weight: 600;
}
.paire b { font-weight: 500; font-size: 13.5px; }

/* --- Graphiques ------------------------------------------------------- */

.graphe { width: 100%; height: auto; display: block; overflow: visible; }
.graphe--fixe { width: auto; flex: 0 0 auto; }
.graphe-legende { list-style: none; margin: 0; padding: 0; }
.graphe-legende li {
  display: flex; align-items: center; gap: 9px; padding: 5px 0;
  border-bottom: 1px solid var(--trait); font-size: 12.5px;
}
.graphe-legende li:last-child { border-bottom: none; }
.graphe-legende__puce { flex: 0 0 auto; width: 11px; height: 11px; border-radius: 3px; }
.graphe-legende__nom { flex: 1; }
.graphe-legende__valeur { font-weight: 600; font-variant-numeric: tabular-nums; }
.graphe-legende__valeur em { font-style: normal; font-weight: 400; color: var(--texte-2); margin-left: 5px; }
.graphe-legende--inline { display: flex; gap: 18px; margin-bottom: 10px; font-size: 12px; color: var(--texte-2); }
.graphe-legende--inline span { display: flex; align-items: center; gap: 7px; }

.jauge { position: relative; height: 24px; border-radius: 12px; background: #E6E8EC; overflow: hidden; }
.jauge__barre { height: 100%; background: linear-gradient(90deg, var(--brun), var(--orange)); border-radius: 12px; }
.jauge__barre--ok { background: linear-gradient(90deg, #145F3B, #2E9C66); }
.jauge__barre--alerte { background: linear-gradient(90deg, #7E1216, var(--alerte)); }
.jauge__valeur {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 12.5px; font-weight: 700; color: #fff;
  letter-spacing: .04em; text-shadow: 0 1px 2px rgba(0,0,0,.28);
}
.jauge--mince { height: 7px; border-radius: 4px; }
.jauge__legende { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: var(--texte-2); }
.jauge__legende b { color: var(--texte); }

/* --- Planning atelier ------------------------------------------------- */

.planning { width: 100%; border-collapse: collapse; table-layout: fixed; }
.planning th {
  font-family: var(--display); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--texte-2); font-weight: 600;
  padding: 7px 4px; border-bottom: 1px solid var(--trait); background: var(--creux);
}
.planning th.baie { text-align: left; padding-left: 14px; width: 172px; }
.planning td { border-bottom: 1px solid var(--trait); border-left: 1px solid #EDEFF2; height: 54px; padding: 0; position: relative; }
.planning td.baie {
  border-left: none; padding: 8px 12px; vertical-align: middle; background: var(--creux);
}
.planning .baie b { display: block; font-family: var(--display); font-size: 15px; letter-spacing: .06em; text-transform: uppercase; }
.planning .baie span { font-size: 11px; color: var(--texte-2); }
.tache {
  position: absolute; top: 7px; bottom: 7px; left: 3px;
  border-radius: 4px; padding: 5px 8px; overflow: hidden;
  color: #fff; font-size: 11.5px; line-height: 1.25;
}
.tache b { display: block; font-weight: 600; font-size: 11.5px; }
.tache span { opacity: .82; font-size: 10.5px; }
.t-cours   { background: #0F766E; }
.t-piece   { background: #B4232A; }
.t-client  { background: #B4740A; }
.t-qualite { background: #6B4FA8; }
.t-pret    { background: #1E7A4C; }
.t-ouvert  { background: #2C6FB5; }
.t-libre   { background: repeating-linear-gradient(135deg, #EDEFF2 0 6px, #F6F7F9 6px 12px); color: var(--texte-3); }

/* --- Inspection numérique --------------------------------------------- */

.insp { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.insp__pt {
  border: 1px solid var(--trait); border-radius: var(--r);
  padding: 11px 13px; background: var(--surface);
  border-left: 4px solid var(--trait);
}
.insp__pt--ok  { border-left-color: var(--vert); }
.insp__pt--surv{ border-left-color: var(--ambre); background: #FEFBF4; }
.insp__pt--rep { border-left-color: var(--alerte); background: #FDF6F6; }
.insp__pt--nc  { border-left-color: #CBD2D9; opacity: .72; }
.insp__tete { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; }
.insp__tete b { font-family: var(--display); font-size: 15px; letter-spacing: .06em; text-transform: uppercase; flex: 1; }
.insp__note { font-size: 12px; color: var(--texte-2); line-height: 1.45; }
.insp__photos { display: flex; gap: 6px; margin-top: 8px; }
.vignette {
  width: 46px; height: 34px; border-radius: 3px; border: 1px solid var(--trait);
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; color: var(--texte-3); letter-spacing: .06em;
}
.vignette--photo { background: linear-gradient(135deg, #58646F 0%, #2C3945 100%); color: rgba(255,255,255,.6); border-color: #2C3945; }

/* --- Fil de statuts (OR) ---------------------------------------------- */

.fil { display: flex; align-items: stretch; gap: 0; margin: 0 0 4px; }
.fil__etape {
  flex: 1; padding: 8px 10px 8px 16px; background: var(--creux);
  border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait);
  font-size: 11px; color: var(--texte-3); position: relative;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 50%, 9px 50%);
}
.fil__etape b { display: block; font-family: var(--display); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: inherit; }
.fil__etape--faite { background: #E9EDF1; color: var(--texte-2); }
.fil__etape--active { background: var(--orange); color: #fff; }
.fil__etape--active b { color: #fff; }

/* --- Écran de connexion ----------------------------------------------- */

.connexion { min-height: 100vh; display: grid; grid-template-columns: 1.08fr 1fr; }
.connexion__scene {
  color: #fff; padding: 54px 56px; display: flex; flex-direction: column;
  background:
    radial-gradient(940px 520px at 8% -12%, #7A2807 0%, transparent 58%),
    linear-gradient(158deg, #1B242D 0%, #0D1216 100%);
  position: relative; overflow: hidden;
}
.connexion__scene::after {
  content: ''; position: absolute; left: -18%; top: 40%;
  width: 136%; aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.14);
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.028), transparent 70%);
  pointer-events: none;
}
.connexion__scene > * { position: relative; z-index: 1; }
.connexion__scene .logo { width: 250px; margin-bottom: 34px; }
.connexion__scene h1 {
  font-family: var(--display); font-size: 62px; line-height: .95;
  letter-spacing: .035em; text-transform: uppercase; margin: 0 0 14px;
}
.connexion__scene h1 em { color: var(--orange); font-style: normal; }
.connexion__scene p { color: #9AA5B1; max-width: 42ch; margin: 0 0 auto; }
.affichage { border-top: 1px solid rgba(255,255,255,.12); padding-top: 16px; }
.affichage div {
  display: grid; grid-template-columns: 96px 1fr auto; gap: 14px;
  font-family: var(--mono); font-size: 12px; color: #7B8794;
  padding: 6px 0; border-bottom: 1px dotted rgba(255,255,255,.1);
}
.affichage div b { color: var(--orange); font-weight: 600; }
.affichage div i { font-style: normal; color: #9AA5B1; }
.connexion__panneau {
  background: var(--papier); display: flex; align-items: center;
  justify-content: center; padding: 40px;
}
.connexion__boite { width: 100%; max-width: 344px; }
.connexion__boite h2 {
  font-family: var(--display); font-size: 27px; letter-spacing: .08em;
  text-transform: uppercase; margin: 0 0 4px;
}
.connexion__boite > p { color: var(--texte-2); margin: 0 0 22px; }
.connexion__boite .champ { margin-bottom: 13px; }
.connexion__boite .btn { width: 100%; justify-content: center; padding: 11px; margin-top: 8px; }
.mention-editeur { margin: 22px 0 0; font-size: 11px; color: var(--texte-3); text-align: center; }

/* --- Portail client ---------------------------------------------------
   Le client n'est pas un utilisateur de l'atelier : pas de barre latérale,
   pas de jargon d'OR. Un en-tête de marque, puis ses véhicules. */

.portail { min-height: 100vh; background: var(--papier); }
.portail__entete {
  background: linear-gradient(158deg, #1B242D 0%, #0D1216 100%);
  padding: 20px 44px 26px;
  color: #fff;
}
.portail__barre { display: flex; align-items: center; gap: 18px; }
.portail__barre img { width: 150px; }
.portail__nav { display: flex; gap: 4px; margin-left: 34px; }
.portail__nav a {
  color: #A9B4BF; font-weight: 500; font-size: 13.5px;
  padding: 7px 14px; border-radius: var(--r);
}
.portail__nav a.is-active { background: rgba(255,255,255,.09); color: #fff; }
.portail__compte { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.portail__compte b { font-size: 13px; }
.portail__compte em { font-style: normal; font-size: 11px; color: #9AA5B1; display: block; }
.portail__titre {
  margin: 26px 0 0; font-family: var(--display); font-size: 34px;
  letter-spacing: .04em; text-transform: uppercase;
}
.portail__titre + p { margin: 4px 0 0; color: #9AA5B1; }
.portail__corps { padding: 22px 44px 46px; max-width: 1320px; }

.vehicule-carte {
  display: flex; gap: 18px; align-items: center;
  padding: 16px 20px; border-bottom: 1px solid var(--trait);
}
.vehicule-carte:last-child { border-bottom: none; }
.vehicule-carte__photo {
  width: 108px; height: 72px; border-radius: var(--r); flex: 0 0 auto;
  background: linear-gradient(135deg, #58646F 0%, #2C3945 100%);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.5); font-size: 10px; letter-spacing: .1em;
}
.vehicule-carte__corps { flex: 1; min-width: 0; }
.vehicule-carte__corps b { font-family: var(--display); font-size: 19px; letter-spacing: .05em; text-transform: uppercase; display: block; }

/* --- Comptoir : caisse ------------------------------------------------ */

.comptoir { display: grid; grid-template-columns: 1fr 400px; gap: 16px; align-items: start; }
.article {
  display: flex; gap: 12px; align-items: center;
  padding: 11px 14px; border-bottom: 1px solid var(--trait);
}
.article:last-child { border-bottom: none; }
.article__ref { flex: 0 0 auto; }
.article__nom { flex: 1; min-width: 0; }
.article__nom b { display: block; font-weight: 600; font-size: 13.5px; }
.article__nom span { font-size: 11.5px; color: var(--texte-2); }
.article__prix { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }

/* --- Frise chronologique du véhicule ---------------------------------- */

.frise { position: relative; padding-left: 26px; }
.frise::before {
  content: ''; position: absolute; left: 6px; top: 6px; bottom: 6px;
  width: 2px; background: var(--trait);
}
.frise__item { position: relative; padding: 0 0 18px; }
.frise__item::before {
  content: ''; position: absolute; left: -25px; top: 4px;
  width: 11px; height: 11px; border-radius: 50%;
  background: #fff; border: 2px solid var(--trait);
}
.frise__item--fort::before { border-color: var(--orange); background: var(--orange); }
.frise__item time {
  display: block; font-family: var(--mono); font-size: 11px;
  color: var(--texte-2); letter-spacing: .04em;
}
.frise__item b { display: block; font-size: 13.5px; margin: 1px 0 2px; }
.frise__item p { margin: 0; font-size: 12.5px; color: var(--texte-2); line-height: 1.5; }

/* --- Matrice de droits ------------------------------------------------ */

.matrice { width: 100%; border-collapse: collapse; }
.matrice th {
  font-family: var(--display); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--texte-2); font-weight: 600;
  padding: 9px 6px; border-bottom: 1px solid var(--trait); background: var(--creux);
  text-align: center;
}
.matrice th.libelle { text-align: left; padding-left: 16px; width: 320px; }
.matrice td { padding: 8px 6px; border-bottom: 1px solid var(--trait); text-align: center; }
.matrice td.libelle { text-align: left; padding-left: 16px; font-size: 13px; }
.coche {
  display: inline-block; width: 17px; height: 17px; border-radius: 4px;
  border: 1px solid var(--trait); background: #fff;
}
.coche--oui { background: var(--orange); border-color: var(--orange); position: relative; }
.coche--oui::after {
  content: '\2713'; color: #fff; font-size: 11px; font-weight: 700;
  position: absolute; inset: 0; line-height: 15px; text-align: center;
}
.coche--herite { background: #E9EDF1; border-color: #D8DDE3; }