/* gestion.inyvia.fr : toutes les valeurs viennent de tokens.css. */
*, *::before, *::after { box-sizing: border-box; }
html { font-family: var(--police); color: var(--encre); background: var(--papier); -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
body { margin: 0; font-size: var(--t-corps); line-height: 1.55; letter-spacing: var(--inter-corps); min-height: 100dvh; display: grid; grid-template-columns: 4rem minmax(0, 1fr); }
h1, h2, h3 { font-weight: 500; letter-spacing: var(--inter-titre); text-wrap: balance; margin: 0; }
p { text-wrap: pretty; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: var(--focus); outline-offset: 2px; }
small { font-size: var(--t-petit); letter-spacing: var(--inter-petit); }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@view-transition { navigation: auto; }

/* Barre latérale */
.lateral { background: var(--encre); color: var(--feuille); display: flex; flex-direction: column; align-items: center; padding: var(--e-4) 0; position: sticky; top: 0; height: 100dvh; }
.marque img { display: block; filter: brightness(0) invert(1); }
.lateral nav { margin-top: var(--e-8); display: flex; flex-direction: column; gap: var(--e-2); }
.lateral nav a, .compte a { position: relative; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--r-champ); text-decoration: none; opacity: .75; }
.lateral nav a:hover, .compte a:hover { opacity: 1; background: color-mix(in srgb, var(--feuille) 8%, transparent); }
.lateral nav a[aria-current=page] { opacity: 1; background: color-mix(in srgb, var(--feuille) 12%, transparent); }
.lateral nav a[aria-current=page]::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--trait-fort); background: var(--flamme-vive); }
.compte { margin-top: auto; }
.compte svg { fill: currentColor; }

main { min-width: 0; max-width: var(--largeur-lecture); width: 100%; margin: 0 auto; padding: var(--e-8) var(--e-6) var(--e-12); }

/* Champs et boutons */
label { display: block; font-size: var(--t-petit); letter-spacing: var(--inter-petit); color: var(--encre-sourde); margin: var(--e-4) 0 var(--e-1); }
input[type=text], input[type=email], input[type=password], input[type=url], input[type=search], select, textarea { width: 100%; background: var(--feuille); border: var(--trait) solid var(--filet); border-radius: var(--r-champ); padding: var(--e-2) var(--e-3); }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--flamme); }
[aria-invalid=true] { border-color: var(--flamme) !important; }
input[inputmode=decimal], input[inputmode=numeric] { font-variant-numeric: tabular-nums; }
button.primaire, button.secondaire, button.danger { padding: var(--e-2) var(--e-4); border-radius: var(--r-champ); border: var(--trait) solid transparent; cursor: pointer; }
button.primaire { background: var(--flamme); color: var(--feuille); font-weight: 500; }
button.primaire:hover { background: var(--encre); }
button.secondaire { background: var(--feuille); border-color: var(--filet); }
button.danger { background: transparent; color: var(--flamme); margin-left: auto; }
button.danger:hover { background: var(--flamme); color: var(--feuille); }
.plus { width: 2rem; height: 2rem; border-radius: var(--r-champ); border: var(--trait) solid var(--encre); background: var(--feuille); cursor: pointer; font-size: var(--t-titre); line-height: 1; }
.plus:hover { background: var(--encre); color: var(--feuille); }
.retirer { width: 1.75rem; height: 1.75rem; border: 0; background: transparent; border-radius: var(--r-champ); cursor: pointer; color: var(--encre-sourde); font-size: var(--t-titre); line-height: 1; }
.retirer:hover { color: var(--flamme); }
.erreur { color: var(--flamme); font-size: var(--t-petit); margin: var(--e-3) 0 0; }
.ref { color: var(--encre-sourde); font-size: var(--t-petit); letter-spacing: var(--inter-petit); }

/* Le colis à l'échelle */
.colis { display: block; overflow: visible; }
.colis polygon { stroke: var(--encre); stroke-width: var(--trait); stroke-linejoin: round; }
.colis .dessus { fill: var(--feuille); }
.colis .face { fill: var(--papier); }
.colis .cote { fill: var(--filet); }

/* Articles */
.liste-articles h1 { display: flex; align-items: center; gap: var(--e-3); font-size: var(--t-titre); }
.compte-titre { color: var(--encre-sourde); font-weight: 400; font-variant-numeric: tabular-nums; }
.liste-articles h1 .plus { margin-left: auto; }
.filtres { display: grid; grid-template-columns: 14rem minmax(0, 1fr); column-gap: var(--e-3); margin: var(--e-4) 0 var(--e-4); }
.filtres label { margin-top: 0; }
.articles { list-style: none; margin: 0; padding: 0; border-top: var(--trait-fort) solid var(--encre); }
.articles li[hidden] { display: none; }
.article { width: 100%; text-align: left; display: grid; grid-template-columns: 3rem minmax(0, 2.2fr) minmax(0, 1fr) 7.5rem 15rem; gap: var(--e-4); align-items: center; padding: var(--e-3) var(--e-2); background: var(--feuille); border: 0; border-bottom: var(--trait) solid var(--filet); cursor: pointer; }
.article:hover { background: var(--papier); }
.vignette { width: 3rem; height: 3rem; border-radius: var(--r-champ); background: var(--papier); overflow: hidden; display: block; }
.vignette img { width: 100%; height: 100%; object-fit: contain; display: block; background: var(--feuille); }
.article .nom { display: flex; flex-direction: column; min-width: 0; }
.article .lib { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.article .fourn { color: var(--encre-sourde); font-size: var(--t-petit); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.article .prix { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; color: var(--flamme); white-space: nowrap; }
.article .prix small { color: var(--encre-sourde); font-weight: 400; }
.colis-cellule { display: flex; align-items: center; gap: var(--e-3); justify-content: flex-end; }
.dims { font-size: var(--t-petit); letter-spacing: var(--inter-petit); color: var(--encre-sourde); font-variant-numeric: tabular-nums; line-height: 1.4; text-align: right; white-space: nowrap; }
.dims.a-mesurer { font-style: italic; }
.aucun { color: var(--encre-sourde); margin: var(--e-4) 0 0; }
.vide { padding: var(--e-8) 0; max-width: 32rem; }
.vide h2, .vide h3 { font-size: var(--t-titre); }
.vide p { color: var(--encre-sourde); margin: var(--e-2) 0 var(--e-4); }

/* Panneau */
.voile { position: fixed; inset: 0; background: color-mix(in srgb, var(--encre) 35%, transparent); }
.panneau { position: fixed; background: var(--feuille); border: var(--trait) solid var(--filet); border-radius: var(--r-panneau); overflow-y: auto; overflow-x: hidden; }
/* Fenêtre centrée, taillée pour un 13 pouces (1280 × 800) : deux colonnes, sans défilement. */
.modale { top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(54rem, calc(100% - 2 * var(--gouttiere))); max-height: calc(100dvh - 2 * var(--e-6)); padding: var(--e-6); }
.modale-tete { display: flex; justify-content: space-between; align-items: center; }
.modale-corps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 var(--e-8); }
.modale .colis-saisie { margin-top: var(--e-4); }
.panneau h2 { font-size: var(--t-titre); }
.deux { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-3); }
.trois { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-3); }
.colis-saisie { border: 0; padding: 0; margin: var(--e-4) 0 0; }
.colis-saisie legend { font-weight: 500; padding: 0; }
.libelle-champ { font-size: var(--t-petit); letter-spacing: var(--inter-petit); color: var(--encre-sourde); margin: var(--e-4) 0 var(--e-1); }
.photo-saisie { display: flex; align-items: center; gap: var(--e-4); }
.photo-saisie .apercu { width: 6rem; height: 6rem; flex: none; padding: 0; border: var(--trait) dashed var(--encre-sourde); border-radius: var(--r-ligne); background: var(--papier); overflow: hidden; display: block; cursor: pointer; }
.photo-saisie .apercu:hover { border-color: var(--encre); }
.photo-saisie .apercu img { width: 100%; height: 100%; object-fit: contain; display: block; background: var(--feuille); }
.photo-saisie > div { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-1); }
.bouton-photo { display: inline-block; margin: 0; padding: var(--e-2) var(--e-4); border: var(--trait) solid var(--encre); border-radius: var(--r-champ); background: var(--feuille); color: var(--encre); font-size: var(--t-corps); letter-spacing: var(--inter-corps); cursor: pointer; }
.bouton-photo:hover { background: var(--encre); color: var(--feuille); }
#a-photo:focus-visible + .bouton-photo { outline: var(--focus); outline-offset: 2px; }
.photo-saisie img[hidden] { display: none; }
label.case { display: flex; align-items: center; gap: var(--e-2); color: var(--encre); font-size: var(--t-corps); }
label.case[hidden] { display: none; }
textarea { resize: vertical; }
.actions { display: flex; gap: var(--e-2); align-items: center; margin-top: var(--e-6); }
@media (prefers-reduced-motion: no-preference) { .modale { animation: apparait .16s ease-out; } @keyframes apparait { from { opacity: 0; transform: translate(-50%, calc(-50% + var(--e-2))); } } }

/* Kits */
main.kits { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: var(--e-8); align-items: start; }
main.kits > * { min-width: 0; }
.kits-liste h1 { font-size: var(--t-titre); margin-bottom: var(--e-4); }
.kits-liste ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e-1); }
.kits-liste a { display: block; padding: var(--e-2) var(--e-3); border-radius: var(--r-ligne); text-decoration: none; border: var(--trait) solid transparent; }
.kits-liste a:hover { background: var(--feuille); border-color: var(--filet); }
.kits-liste a[aria-current=page] { background: var(--feuille); border-color: var(--encre); }
.kits-liste .lib { display: block; font-weight: 500; }
.kits-liste .quand { display: block; font-size: var(--t-petit); color: var(--encre-sourde); font-variant-numeric: tabular-nums; }
.kit-tete { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--e-6); padding-bottom: var(--e-3); border-bottom: var(--trait-fort) solid var(--encre); }
.kit-tete h2 { font-size: var(--t-titre); }
.kit-chiffres { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-4); margin: var(--e-2) 0 0; font-variant-numeric: tabular-nums; color: var(--encre-sourde); }
.kit-chiffres .cout { color: var(--flamme); font-weight: 500; font-size: var(--t-chiffre); }
.kit-alerte { font-size: var(--t-petit); color: var(--encre-sourde); font-style: italic; margin: var(--e-1) 0 0; }
.pile { margin: 0 0 calc(-1 * var(--e-3)); flex: none; }
.pile figcaption { font-size: var(--t-petit); color: var(--encre-sourde); text-align: center; }
.composition { width: 100%; border-collapse: collapse; margin-top: var(--e-2); }
.composition th { text-align: left; font-weight: 400; font-size: var(--t-petit); letter-spacing: var(--inter-petit); color: var(--encre-sourde); padding: var(--e-2) var(--e-2) var(--e-2) 0; border-bottom: var(--trait) solid var(--filet); }
.composition td { padding: var(--e-2) var(--e-2) var(--e-2) 0; border-bottom: var(--trait) solid var(--filet); vertical-align: middle; }
.composition .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.composition .fort { font-weight: 500; }
.composition .lib { font-weight: 500; }
.composition form { margin: 0; }
.qte input { width: 4rem; text-align: center; }
.ajout { display: grid; grid-template-columns: minmax(0, 1fr) 6rem auto; gap: var(--e-3); align-items: end; margin-top: var(--e-6); }
.ajout label { margin-top: 0; }

/* Connexion */
.page-connexion { display: grid; place-items: center; grid-template-columns: 1fr; }
.connexion { width: 22rem; max-width: calc(100% - 2 * var(--gouttiere)); padding: var(--e-8) 0; }
.connexion img { display: block; margin-bottom: var(--e-4); }
.connexion h1 { font-size: var(--t-titre); margin-bottom: var(--e-2); }
.connexion button { margin-top: var(--e-6); width: 100%; }

@media (max-width: 56rem) {
  body { grid-template-columns: 1fr; }
  .lateral { position: static; height: auto; flex-direction: row; gap: var(--e-2); padding: var(--e-2) var(--gouttiere); }
  .lateral nav { margin: 0 0 0 var(--e-4); flex-direction: row; }
  .compte { margin: 0 0 0 auto; }
  .lateral nav a[aria-current=page]::before { top: auto; left: 0; right: 0; width: auto; height: var(--trait-fort); }
  main { padding-left: var(--gouttiere); padding-right: var(--gouttiere); }
  .filtres { grid-template-columns: 1fr; row-gap: var(--e-2); }
  .article { grid-template-columns: 3rem minmax(0, 1fr) auto; grid-template-areas: "vig nom prix" "vig colis colis"; row-gap: var(--e-2); }
  .article .vignette { grid-area: vig; align-self: start; } .article .nom { grid-area: nom; } .article .prix { grid-area: prix; }
  .article .fourn { display: none; } .colis-cellule { grid-area: colis; justify-content: flex-start; }
  .modale-corps { grid-template-columns: 1fr; }
  main.kits { grid-template-columns: 1fr; gap: var(--e-6); }
  .kits-liste ul { flex-direction: row; overflow-x: auto; }
  .kits-liste a { white-space: nowrap; }
  .kit-tete { flex-direction: column; align-items: flex-start; }
  .composition th:nth-child(3), .composition td:nth-child(3), .composition th:nth-child(5), .composition td:nth-child(5) { display: none; }
  .ajout { grid-template-columns: 1fr 5rem; } .ajout button { grid-column: 1 / -1; }
}

/* Catégories */
.icone-cat { flex: none; }
.onglets-cat { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-4); }
.onglets-cat .cat { display: inline-flex; align-items: center; gap: var(--e-2); padding: var(--e-1) var(--e-3); border: var(--trait) solid var(--filet); border-radius: var(--r-ligne); background: var(--feuille); color: var(--encre); cursor: pointer; font-size: var(--t-petit); letter-spacing: var(--inter-petit); }
.onglets-cat .cat small { color: var(--encre-sourde); font-variant-numeric: tabular-nums; }
.onglets-cat .cat:hover { border-color: var(--encre-sourde); }
.onglets-cat .cat[aria-pressed=true] { background: var(--encre); border-color: var(--encre); color: var(--feuille); }
.onglets-cat .cat[aria-pressed=true] small { color: var(--filet); }
.cat-ligne { display: inline-flex; vertical-align: -3px; margin-right: var(--e-2); color: var(--encre-sourde); }
fieldset.categories { border: 0; padding: 0; margin: var(--e-4) 0 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--e-2); }
fieldset.categories legend { font-size: var(--t-petit); letter-spacing: var(--inter-petit); color: var(--encre-sourde); padding: 0; margin-bottom: var(--e-1); }
fieldset.categories label { margin: 0; }
fieldset.categories input { position: absolute; opacity: 0; width: 1px; height: 1px; }
fieldset.categories span { display: flex; flex-direction: column; align-items: center; gap: var(--e-1); padding: var(--e-2) var(--e-1); border: var(--trait) solid var(--filet); border-radius: var(--r-champ); color: var(--encre); font-size: var(--t-petit); letter-spacing: var(--inter-petit); text-align: center; cursor: pointer; }
fieldset.categories span:hover { border-color: var(--encre-sourde); }
fieldset.categories input:checked + span { background: var(--encre); border-color: var(--encre); color: var(--feuille); }
fieldset.categories input:focus-visible + span { outline: var(--focus); outline-offset: 2px; }
fieldset.categories[aria-invalid=true] span { border-color: var(--flamme); }

/* Fenêtre photo : coller, glisser-déposer, importer */
.photo-modale { margin: auto; width: min(28rem, calc(100% - 2 * var(--gouttiere))); border: var(--trait) solid var(--filet); border-radius: var(--r-panneau); padding: var(--e-6); background: var(--feuille); color: var(--encre); font-family: var(--police); }
.photo-modale::backdrop { background: color-mix(in srgb, var(--encre) 45%, transparent); }
.photo-modale h2 { font-size: var(--t-titre); }
.photo-zone { margin-top: var(--e-4); border: var(--trait-fort) dashed var(--filet); border-radius: var(--r-ligne); padding: var(--e-8) var(--e-4); text-align: center; color: var(--encre-sourde); line-height: 1.7; }
.photo-zone b { color: var(--encre); font-weight: 500; }
.photo-zone.sur { border-color: var(--flamme); background: var(--papier); }
.photo-zone button { margin-top: var(--e-3); }
.photo-modale .actions { justify-content: flex-end; }
@media (max-width: 56rem) { fieldset.categories { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Boutons de la fiche : collés au bas de la fenêtre, visibles sans défiler. */
.modale .actions { position: sticky; bottom: calc(-1 * var(--e-6)); margin: var(--e-6) calc(-1 * var(--e-6)) calc(-1 * var(--e-6)); padding: var(--e-3) var(--e-6) var(--e-6); background: var(--feuille); border-top: var(--trait) solid var(--filet); z-index: 1; }

/* Prix de vente, commissions et marge restante d'un kit */
fieldset.niveaux { border: 0; padding: 0; margin: var(--e-2) 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-2); }
fieldset.niveaux label { margin-top: 0; }
.kits-liste .marge-liste { color: var(--encre); }
@media (max-width: 56rem) { fieldset.niveaux { grid-template-columns: repeat(2, minmax(0, 1fr)); } .general { flex-direction: column; } }

/* Total des vendeurs et lignes du décompte */
.total-vendeurs { margin-left: var(--e-2); color: var(--encre); font-weight: 500; font-variant-numeric: tabular-nums; }
.lignes-decompte { margin: var(--e-2) 0 0; }
.lignes-decompte div { display: flex; justify-content: space-between; gap: var(--e-4); padding: var(--e-2) 0; border-bottom: var(--trait) solid var(--filet); font-variant-numeric: tabular-nums; }
.lignes-decompte dt { color: var(--encre-sourde); }
.lignes-decompte dd { margin: 0; }
.lignes-decompte .reste { border-bottom: 0; border-top: var(--trait-fort) solid var(--encre); margin-top: var(--e-1); }
.lignes-decompte .reste dt { color: var(--encre); font-weight: 500; }
.lignes-decompte .reste dd { font-size: var(--t-chiffre); font-weight: 600; }
.lignes-decompte .reste dd small { font-weight: 400; color: var(--encre-sourde); margin-left: var(--e-2); }
.lignes-decompte .reste.negative dd { color: var(--flamme); }
.decompte .invite { color: var(--encre-sourde); margin: var(--e-2) 0 0; }
.decompte [hidden] { display: none; }

/* Kits sur toute la largeur (13 pouces : 1280 à 1440 px) : liste des kits | onglets du kit | marge, toujours visible. */
.onglets-kit { display: flex; gap: var(--e-6); margin-top: var(--e-3); border-bottom: var(--trait) solid var(--filet); }
.onglets-kit [role=tab] { background: transparent; border: 0; padding: var(--e-2) 0; margin-bottom: calc(-1 * var(--trait)); cursor: pointer; color: var(--encre-sourde); border-bottom: var(--trait-fort) solid transparent; }
.onglets-kit [role=tab]:hover { color: var(--encre); }
.onglets-kit [role=tab][aria-selected=true] { color: var(--encre); font-weight: 500; border-bottom-color: var(--flamme); }
.panneau-kit[hidden] { display: none; }
.kit-corps { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-6); margin-top: var(--e-4); align-items: start; }
.kit-tete { align-items: baseline; }
.general { display: flex; justify-content: space-between; gap: var(--e-6); align-items: flex-start; }
.general > div { flex: 1; max-width: 24rem; }
.general label, .bonus label, .commissions label { margin-top: 0; }
.chiffres-kit { margin: var(--e-4) 0 0; }
.chiffres-kit div { display: flex; justify-content: space-between; padding: var(--e-2) 0; border-bottom: var(--trait) solid var(--filet); font-variant-numeric: tabular-nums; }
.chiffres-kit dt { color: var(--encre-sourde); }
.chiffres-kit dd { margin: 0; }
.commissions { max-width: 30rem; display: flex; flex-direction: column; gap: var(--e-3); }
.commissions input, .bonus input, #k-prix { text-align: right; }
.commissions button { align-self: flex-start; }
.bonus { max-width: 24rem; }
.tous-kits { color: var(--encre-sourde); font-style: italic; }
.decompte { padding: var(--e-4); background: var(--feuille); border: var(--trait) solid var(--filet); border-radius: var(--r-ligne); }
.decompte .lignes-decompte { margin-top: 0; }
@media (min-width: 64rem) {
  main.kits { max-width: none; grid-template-columns: 13rem minmax(0, 1fr); gap: var(--e-6); padding-left: var(--e-6); padding-right: var(--e-6); }
  .kit-corps { grid-template-columns: minmax(0, 1fr) 22rem; }
  .decompte { position: sticky; top: var(--e-4); }
}
fieldset.niveaux legend { font-size: var(--t-petit); letter-spacing: var(--inter-petit); color: var(--encre-sourde); padding: 0; margin-bottom: var(--e-1); }
.champ-bouton { display: flex; gap: var(--e-2); }
.champ-bouton input { flex: 1; min-width: 0; text-align: right; }

/* Paliers mensuels de bonus (onglet Bonus) */
.paliers { margin-top: var(--e-8); max-width: 40rem; }
.paliers fieldset { border: 0; padding: 0; margin: 0; }
.paliers legend { display: flex; align-items: center; gap: var(--e-2); width: 100%; font-weight: 500; padding: 0; }
.paliers legend .plus { margin-left: auto; }
.plus.petit { width: 1.5rem; height: 1.5rem; font-size: var(--t-corps); }
.palier { display: grid; grid-template-columns: 9rem 8rem auto; gap: var(--e-3); align-items: center; margin-top: var(--e-2); }
.palier.entete { font-size: var(--t-petit); letter-spacing: var(--inter-petit); color: var(--encre-sourde); margin-top: var(--e-3); }
.palier .ventes { display: flex; align-items: center; gap: var(--e-2); }
.palier .ventes span { font-size: var(--t-petit); color: var(--encre-sourde); }
.palier input { text-align: right; }
.couverture { font-size: var(--t-petit); letter-spacing: var(--inter-petit); color: var(--encre-sourde); font-variant-numeric: tabular-nums; }
.couverture.negative { color: var(--flamme); }
.paliers > button { margin-top: var(--e-4); }


/* Ventes : grille des 12 mois et réglages communs */
main.ventes { max-width: none; padding-left: var(--e-6); padding-right: var(--e-6); }
.ventes-tete { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-4); }
.ventes-tete h1 { font-size: var(--t-titre); }
.annees { display: flex; gap: var(--e-2); }
.annees a { padding: var(--e-1) var(--e-3); border: var(--trait) solid var(--filet); border-radius: var(--r-champ); text-decoration: none; font-size: var(--t-petit); background: var(--feuille); }
.annees a:hover { border-color: var(--encre-sourde); }
.grille-ventes { width: 100%; border-collapse: collapse; margin-top: var(--e-4); background: var(--feuille); border: var(--trait) solid var(--filet); border-radius: var(--r-ligne); font-variant-numeric: tabular-nums; }
.grille-ventes th, .grille-ventes td { padding: var(--e-1) var(--e-3); border-bottom: var(--trait) solid var(--filet); }
.grille-ventes thead th { font-weight: 400; font-size: var(--t-petit); letter-spacing: var(--inter-petit); color: var(--encre-sourde); text-align: left; padding-top: var(--e-2); padding-bottom: var(--e-2); }
.grille-ventes tbody th { text-align: left; font-weight: 500; white-space: nowrap; }
.grille-ventes .num { text-align: right; white-space: nowrap; }
.grille-ventes input { width: 4.5rem; text-align: right; padding: var(--e-1) var(--e-2); }
.grille-ventes .fort { font-weight: 600; }
.grille-ventes tfoot th, .grille-ventes tfoot td { border-bottom: 0; border-top: var(--trait-fort) solid var(--encre); font-weight: 600; padding-top: var(--e-2); padding-bottom: var(--e-2); text-align: right; }
.grille-ventes tfoot th { text-align: left; }
.ventes > form > .actions { margin-top: var(--e-4); }
.reglages-ventes { margin-top: var(--e-12); display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: var(--e-8); align-items: start; }
.reglages-ventes h2 { grid-column: 1 / -1; font-size: var(--t-titre); padding-bottom: var(--e-2); border-bottom: var(--trait-fort) solid var(--encre); }
.reglages-ventes .paliers { margin-top: 0; }
.lien-reglages { color: var(--flamme); font-weight: 500; }
@media (max-width: 56rem) { .grille-ventes { display: block; overflow-x: auto; } .reglages-ventes { grid-template-columns: 1fr; } }

/* Ventes du mois, ligne par ligne */
.lignes-ventes { width: 100%; border-collapse: collapse; margin-top: var(--e-4); background: var(--feuille); border: var(--trait) solid var(--filet); border-radius: var(--r-ligne); font-variant-numeric: tabular-nums; }
.lignes-ventes th, .lignes-ventes td { padding: var(--e-2) var(--e-3); border-bottom: var(--trait) solid var(--filet); vertical-align: middle; }
.lignes-ventes thead th { font-weight: 400; font-size: var(--t-petit); letter-spacing: var(--inter-petit); color: var(--encre-sourde); text-align: left; }
.lignes-ventes .num { text-align: right; white-space: nowrap; }
.lignes-ventes .fort { font-weight: 600; }
.lignes-ventes td:first-child input { min-width: 10rem; }
.lignes-ventes td.num input { width: 8rem; text-align: right; }
.lignes-ventes tfoot td { border-bottom: 0; }
fieldset.choix-kit { border: 0; padding: 0; margin: 0; display: inline-flex; gap: var(--e-1); }
fieldset.choix-kit label { margin: 0; }
fieldset.choix-kit input { position: absolute; opacity: 0; width: 1px; height: 1px; }
fieldset.choix-kit span { display: inline-block; padding: var(--e-1) var(--e-3); border: var(--trait) solid var(--filet); border-radius: var(--r-champ); font-size: var(--t-petit); letter-spacing: var(--inter-petit); color: var(--encre); cursor: pointer; white-space: nowrap; }
fieldset.choix-kit span:hover { border-color: var(--encre-sourde); }
fieldset.choix-kit input:checked + span { background: var(--encre); border-color: var(--encre); color: var(--feuille); }
fieldset.choix-kit input:focus-visible + span { outline: var(--focus); outline-offset: 2px; }
.ajout-vente { border: 0; background: transparent; color: var(--flamme); font-weight: 500; cursor: pointer; padding: var(--e-1) 0; }
.ajout-vente:hover { text-decoration: underline; }
.bilan-mois { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-8); margin: var(--e-4) 0 0; padding: var(--e-4); background: var(--feuille); border: var(--trait) solid var(--filet); border-radius: var(--r-ligne); }
.bilan-mois div { display: flex; flex-direction: column; }
.bilan-mois dt { font-size: var(--t-petit); letter-spacing: var(--inter-petit); color: var(--encre-sourde); }
.bilan-mois dd { margin: 0; font-variant-numeric: tabular-nums; font-size: var(--t-chiffre); }
.bilan-mois dd.fort { font-weight: 600; }
.page-bonus h1 { font-size: var(--t-titre); margin-bottom: var(--e-4); }
.page-bonus .paliers { margin-top: 0; }
@media (max-width: 56rem) { .lignes-ventes { display: block; overflow-x: auto; } }
/* Les éléments masqués (cases d'option, libellés pour lecteurs d'écran) restent contenus dans le tableau défilant. */
.lignes-ventes, fieldset.choix-kit, .grille-ventes { position: relative; }

/* Bonus : 5 niveaux fixes et Quickstart */
.niveaux-fixes .palier { grid-template-columns: 5rem 9rem 8rem; }
.palier .niveau { font-weight: 500; }
.quickstart { margin-top: var(--e-8); max-width: 52rem; }
.quickstart fieldset { border: 0; padding: 0; margin: 0; }
.quickstart legend { font-weight: 500; padding: 0; display: flex; gap: var(--e-2); align-items: baseline; }
.quickstart .phrase { line-height: 2.4; margin: var(--e-2) 0 0; }
.quickstart .phrase input { width: 4rem; text-align: right; display: inline-block; padding: var(--e-1) var(--e-2); margin: 0 var(--e-1); }
.quickstart .phrase input.montant { width: 7rem; }
.quickstart > button { margin-top: var(--e-3); }

/* Comparer les kits */
.kits-liste .lien-comparer { display: inline-block; margin: calc(-1 * var(--e-2)) 0 var(--e-4); color: var(--flamme); font-weight: 500; font-size: var(--t-petit); }
main.comparer { max-width: none; padding-left: var(--e-6); padding-right: var(--e-6); }
.table-comparer { width: 100%; border-collapse: collapse; margin-top: var(--e-4); background: var(--feuille); border: var(--trait) solid var(--filet); border-radius: var(--r-ligne); font-variant-numeric: tabular-nums; position: relative; }
.table-comparer th, .table-comparer td { padding: var(--e-2) var(--e-3); border-bottom: var(--trait) solid var(--filet); text-align: left; }
.table-comparer thead th { font-weight: 400; font-size: var(--t-petit); letter-spacing: var(--inter-petit); color: var(--encre-sourde); }
.table-comparer thead th a { color: var(--encre); font-weight: 500; font-size: var(--t-corps); text-decoration: none; }
.table-comparer thead th a:hover { color: var(--flamme); }
.table-comparer .num { text-align: right; white-space: nowrap; }
.table-comparer tbody th { font-weight: 500; }
.cat-ligne-comparer td { background: var(--papier); font-size: var(--t-petit); letter-spacing: var(--inter-petit); color: var(--encre-sourde); font-weight: 500; }
.cat-ligne-comparer .icone-cat { vertical-align: -4px; margin-right: var(--e-2); }
.qte-comparer { font-weight: 600; }
.qte-comparer.absent { background: var(--papier); }
tr.differe .qte-comparer:not(.absent) { color: var(--flamme); }
.table-comparer tfoot th, .table-comparer tfoot td { font-weight: 500; }
.table-comparer tfoot tr:first-child th, .table-comparer tfoot tr:first-child td { border-top: var(--trait-fort) solid var(--encre); }
.marge-comparer th, .marge-comparer td { font-size: var(--t-chiffre); font-weight: 600; border-bottom: 0; }
.marge-comparer td small { display: block; font-size: var(--t-petit); font-weight: 400; color: var(--encre-sourde); }
.marge-comparer td.negative { color: var(--flamme); }
@media (max-width: 56rem) { .table-comparer { display: block; overflow-x: auto; } }

/* Comparateur : réordonner les équipements */
.poignee-cellule { width: 2rem; padding-right: 0 !important; }
.poignee { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border: 0; border-radius: var(--r-champ); background: transparent; color: var(--encre-sourde); cursor: grab; }
.poignee svg { fill: currentColor; }
.poignee:hover { color: var(--encre); background: var(--papier); }
tr.equipement.tire { opacity: .45; }
tr.equipement[draggable=true] { cursor: grab; }

/* Simulation des commissions */
main.simulation { max-width: none; padding-left: var(--e-6); padding-right: var(--e-6); }
main.simulation section { margin-top: var(--e-8); }
main.simulation h2 { font-size: var(--t-corps); font-weight: 500; margin-bottom: var(--e-2); }
.table-sim { width: 100%; border-collapse: collapse; background: var(--feuille); border: var(--trait) solid var(--filet); border-radius: var(--r-ligne); font-variant-numeric: tabular-nums; position: relative; }
.table-sim th, .table-sim td { padding: var(--e-2) var(--e-3); border-bottom: var(--trait) solid var(--filet); text-align: left; vertical-align: middle; }
.table-sim thead th { font-weight: 400; font-size: var(--t-petit); letter-spacing: var(--inter-petit); color: var(--encre-sourde); }
.table-sim .num { text-align: right; white-space: nowrap; }
.table-sim .fort { font-weight: 600; }
.table-sim .sim-nom { min-width: 10rem; font-weight: 500; }
.table-sim select { min-width: 9rem; }
.table-sim .sim-q { width: 4.5rem; text-align: right; }
.table-sim label.case { margin: 0; font-size: var(--t-petit); color: var(--encre); }
.resultats tbody th { font-weight: 500; }
.resultats tfoot th, .resultats tfoot td { border-bottom: 0; border-top: var(--trait-fort) solid var(--encre); font-weight: 600; }
.lignes-decompte.societe { max-width: 34rem; padding: var(--e-4); background: var(--feuille); border: var(--trait) solid var(--filet); border-radius: var(--r-ligne); }
@media (max-width: 56rem) { .table-sim { display: block; overflow-x: auto; } }

/* Comparateur : quantités modifiables */
.qte-c { width: 3.5rem; text-align: right; font-weight: 600; padding: var(--e-1) var(--e-2); background: transparent; border-color: transparent; }
.qte-c:hover { border-color: var(--filet); background: var(--feuille); }
.qte-c:focus-visible { background: var(--feuille); }
tr.differe .qte-c { color: var(--flamme); }
.qte-comparer.absent .qte-c { color: var(--encre-sourde); }

/* Fiche article : onglets et commissions hors kit */
.onglets-fiche { margin: var(--e-2) 0 var(--e-2); }
.panneau-fiche[hidden] { display: none; }
.commissions-article .ref { margin: var(--e-2) 0 0; }
.commissions-article .trois input, #a-prix-vente { text-align: right; }
.prix-article { max-width: 26rem; margin: var(--e-4) 0 var(--e-2); }
.commissions-article .ecart { color: var(--flamme); }
.vente-article { display: block; color: var(--encre-sourde); font-weight: 400; }

/* Calculateur */
.calculateur h1 { font-size: var(--t-titre); margin-bottom: var(--e-6); }
.etape fieldset { border: 0; padding: var(--e-6); margin: 0; background: var(--feuille); border: var(--trait) solid var(--filet); border-radius: var(--r-ligne); }
.etape legend { display: flex; align-items: center; gap: var(--e-3); font-weight: 500; padding: 0 var(--e-2); }
.num-etape { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--encre); color: var(--feuille); font-size: var(--t-petit); }
.champs-etape { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-4); }
.champs-etape input { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 56rem) { .champs-etape { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 56rem) { .lateral nav { gap: var(--e-1); margin-left: var(--e-2); } .lateral nav a, .compte a { width: 2.25rem; height: 2.25rem; } }

/* Calculateur : type de logement */
fieldset.segments-calc { border: 0; padding: 0; margin: 0 0 var(--e-6); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e-3); background: transparent; }
fieldset.segments-calc legend { float: left; width: 100%; justify-content: center; text-align: center; font-size: var(--t-petit); letter-spacing: var(--inter-petit); color: var(--encre-sourde); font-weight: 400; padding: 0; margin-bottom: var(--e-1); }
fieldset.segments-calc label { margin: 0; position: relative; display: flex; }
fieldset.segments-calc label span { flex: 1; }
fieldset.segments-calc input { position: absolute; opacity: 0; width: 1px; height: 1px; }
fieldset.segments-calc span { display: flex; flex-direction: column; align-items: center; gap: var(--e-2); min-width: 9rem; padding: var(--e-4) var(--e-4) var(--e-3); border: var(--trait) solid var(--filet); border-radius: var(--r-champ); cursor: pointer; color: var(--encre); font-size: var(--t-corps); letter-spacing: var(--inter-corps); background: var(--feuille); }
fieldset.segments-calc span:hover { border-color: var(--encre-sourde); }
fieldset.segments-calc input:checked + span { background: var(--encre); border-color: var(--encre); color: var(--feuille); }
fieldset.segments-calc input:focus-visible + span { outline: var(--focus); outline-offset: 2px; }
@media (max-width: 30rem) { fieldset.segments-calc { gap: var(--e-2); } fieldset.segments-calc label { flex: 1 1 0; } fieldset.segments-calc span { min-width: 0; padding: var(--e-3) var(--e-2); text-align: center; } }

/* Calculateur : étape 2, kit et matériel en plus */
#calc-etape-2 { margin-top: var(--e-6); }
.cadre-etape { padding: var(--e-6); background: var(--feuille); border: var(--trait) solid var(--filet); border-radius: var(--r-ligne); position: relative; }
.cadre-etape h2 { display: flex; align-items: center; gap: var(--e-3); font-size: var(--t-corps); font-weight: 500; margin: 0 0 var(--e-4); }
.table-calc { border: 0; }
.table-calc .num { text-align: right; }
.table-calc tr.en-plus td:nth-child(5), .table-calc tr.en-plus td:nth-child(7) { color: var(--flamme); font-weight: 500; }
.prix-calc { max-width: 26rem; margin: var(--e-4) 0 0 auto; }
.cadre-etape .kit-alerte { margin: var(--e-4) 0 0; }
.defile-calc { overflow-x: auto; position: relative; }
@media (max-width: 56rem) { .cadre-etape { padding: var(--e-4); } .table-calc th:nth-child(2), .table-calc td:nth-child(2) { display: none; } }

/* Calculateur : détecteur par niveau */
.niveaux { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: var(--e-3) var(--e-6); margin-top: var(--e-6); padding-top: var(--e-4); border-top: var(--trait) solid var(--filet); }
.niveaux[hidden] { display: none; }
.niveaux fieldset { border: 0; padding: 0; margin: 0; display: flex; align-items: center; gap: var(--e-2); flex-wrap: nowrap; background: transparent; }
.niveaux legend { float: left; flex: none; width: 8.5rem; padding: 0; white-space: nowrap; font-size: var(--t-petit); color: var(--encre-sourde); font-weight: 400; display: block; }
.niveaux label { position: relative; margin: 0; }
.niveaux input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.niveaux span { display: inline-block; white-space: nowrap; padding: var(--e-1) var(--e-3); border: var(--trait) solid var(--filet); border-radius: var(--r-champ); font-size: var(--t-petit); color: var(--encre); background: var(--feuille); cursor: pointer; }
.niveaux span:hover { border-color: var(--encre-sourde); }
.niveaux input:checked + span { background: var(--encre); border-color: var(--encre); color: var(--feuille); }
.niveaux input:focus-visible + span { outline: var(--focus); outline-offset: 2px; }
.table-calc tr.sous-titre td { padding-top: var(--e-4); font-size: var(--t-petit); color: var(--encre-sourde); }
.table-calc tr.compris th { font-weight: 400; }
.table-calc tr.compris td { color: var(--encre-sourde); }
@media (max-width: 30rem) { .niveaux legend { width: 7.5rem; white-space: normal; } }