/* Styles propres à un écran (tableau de bord, ventes, niches, activité, commissions, statistiques).
   Les composants communs sont dans components.css ; ce fichier est chargé après lui. */

/* ---- Tableau de bord ----
   Mobile : une colonne, dans l'ordre d'usage (héros, saisie du jour, indicateurs, objectifs, semaine, évolution, à encaisser).
   Bureau (>= 1200 px) : colonne principale + colonne latérale. La colonne principale est un « conteneur » :
   quand elle dépasse 1 000 px, héros et indicateurs se mettent côte à côte, puis évolution et à encaisser. */
.head-controls { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.dash { display: flex; flex-direction: column; }
.dash-main, .dash-side, .dash-top, .dash-pair { display: contents; }
.dash .dash-hero { order: 1; } .dash .dash-quick { order: 2; } .dash .dash-stats { order: 3; } .dash .dash-obj { order: 4; }
.dash .dash-week { order: 5; } .dash .dash-evo { order: 6; } .dash .dash-due { order: 7; } .dash .dash-recent { order: 8; }
/* Ligne de vente : statut à gauche du montant (grand écran), empilé sur mobile */
@media (min-width: 600px) {
  .dash-recent .row-end { display: grid; grid-template-columns: auto auto; column-gap: var(--s-4); row-gap: 2px; align-items: center; justify-items: end; }
  .dash-recent .row-end > .pill { grid-row: 1 / span 2; }
}
.dash-stats { margin: 0 0 var(--s-4); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
@media (min-width: 1200px) {
  .dash { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 0 20px; align-items: start; }
  .dash-main, .dash-side { display: block; min-width: 0; }
  .dash-main { container: dashmain / inline-size; }
}
@media (min-width: 1600px) { .dash { grid-template-columns: minmax(0, 1fr) 420px; } }
@container dashmain (min-width: 1000px) {
  .dash-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: stretch; margin: 0 0 var(--s-4); }
  .dash-top .hero { margin: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; }
  .dash-top .dash-stats { margin: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container dashmain (min-width: 860px) {
  /* Les deux cartes prennent la même hauteur (pas de trou sous la plus courte) */
  .dash-pair { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 0 16px; align-items: stretch; margin-bottom: var(--s-4); }
  .dash-pair > .card { margin-bottom: 0; }
}
.due-done { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3); border-radius: 12px; background: var(--green-soft); color: var(--text); font-size: 15px; font-weight: 500; }
.due-done-icon { color: var(--green); display: grid; place-items: center; }
.card-sub-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); margin: var(--s-4) 0 var(--s-1); }
.card-sub-head .caption { margin: 0; }
.week-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-2); }
.week-grid div { padding: var(--s-2) var(--s-2); border-radius: 10px; background: var(--card-2); text-align: center; }
.week-grid dt { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.week-grid dd { margin: 2px 0 0; font-size: 20px; font-weight: 700; }
.demo-grid > .card { break-inside: avoid; }
@media (min-width: 1300px) { .demo-grid { columns: 2 520px; column-gap: 16px; } }
.qe-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); margin-bottom: var(--s-3); }
.qe-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-2); }
@media (min-width: 600px) { .qe-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .dash-side .qe-grid { grid-template-columns: repeat(2, 1fr); } }
.qe-cell { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: var(--s-3) var(--s-2); border-radius: 12px; background: var(--card-2); }
.qe-cell .eyebrow { font-size: 11px; }
.qe-cell .stepper .num { font-size: 26px; min-width: 2ch; }
.qe-cell .seg { margin: -2px 0 2px; }
.stepper .num.pop { animation: numPop var(--dur-3) var(--ease-spring); }
@keyframes numPop { 0% { transform: scale(1.35); color: var(--accent); } 100% { transform: none; } }
.due-check { flex: none; }
.obj-row { display: flex; align-items: center; gap: var(--s-4); }
.obj-status { margin: var(--s-3) 0 0; display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.obj-status .caption { margin: 0; }
.obj-row .ring { flex: none; }
.obj-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.obj-list li { display: flex; justify-content: space-between; gap: var(--s-2); }
.obj-list .caption { margin: 0; }


/* ---- Écran Ventes ---- */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-3); }
.toolbar .select { flex: none; }
.summary { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); align-items: baseline; margin: var(--s-3) 0 var(--s-4); font-size: 14px; color: var(--text-2); }
.summary strong { color: var(--text); font-weight: 600; }
.focus-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-4); margin: 0 0 var(--s-4); border-radius: var(--r-card); background: var(--accent-soft); color: var(--text); font-size: 15px; }
.focus-bar strong { color: var(--accent); }
.month-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); margin: var(--s-5) 0 var(--s-2); padding: 0 var(--s-1); }
.month-head .title-3 { margin: 0; }
.month-head .caption { margin: 0; }
.sale-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); width: 100%; min-height: 64px; padding: var(--s-2) var(--s-4); border: 0; background: transparent; color: var(--text); text-align: left; font: inherit; cursor: pointer; transition: background var(--dur-1) var(--ease); }
.sale-row:hover { background: var(--fill); } .sale-row:active { background: var(--fill-2); }
.list li + li .sale-row { border-top: 1px solid var(--line); }
.sale-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sale-title { display: flex; align-items: center; gap: var(--s-2); font-size: 15px; font-weight: 600; min-width: 0; }
.sale-title span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sale-sub { font-size: 13px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sale-ech { display: flex; align-items: center; gap: var(--s-2); max-width: 220px; }
.sale-ech .progress { flex: 1; height: 5px; }
.sale-ech .caption { margin: 0; white-space: nowrap; font-size: 12px; }
.sale-end { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.sale-money { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.sale-title .pill { flex: none; }
.sale-amount { font-size: 15px; font-weight: 700; }
.sale-comm { font-size: 12px; color: var(--text-3); white-space: nowrap; }
.sale-comm .pos { color: var(--green); font-weight: 600; }
@media (min-width: 900px) {
  .sale-row { grid-template-columns: 40px minmax(0, 1.4fr) minmax(140px, 0.8fr) 120px minmax(150px, auto); }
  .sale-row .sale-end { display: contents; }
  .sale-row .sale-money { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
  .sale-row .pill { justify-self: end; }
}
@media (max-width: 899px) { .sale-row .sale-ech-wide { display: none; } }
@media (min-width: 900px) { .sale-row .sale-ech-inline { display: none; } }
.more-row { display: flex; justify-content: center; margin: var(--s-4) 0; }

/* ---- Feuille de vente ---- */
.sheet-wide { }
@media (min-width: 700px) { .sheet.sheet-wide { width: min(720px, calc(100vw - 48px)); } }
.form-section { margin: var(--s-5) 0 var(--s-2); display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.form-section .eyebrow { margin: 0; }
.suggest { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 var(--s-4); }
.suggest .chip { min-height: 30px; font-size: 13px; }
.plan-rows { display: flex; flex-direction: column; gap: 6px; }
.plan-row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) 36px 32px; gap: 6px; align-items: center; }
.plan-row .input { min-height: 40px; padding: 0 10px; }
.plan-row.is-acompte .input { border-color: var(--amber); }
.plan-row .del { width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: var(--text-3); cursor: pointer; display: grid; place-items: center; }
.plan-row .del:hover { background: var(--red-soft); color: var(--red); }
.plan-head { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) 36px 32px; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); padding: 0 2px; }
.plan-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); margin-top: var(--s-2); }
.plan-total { font-size: 14px; color: var(--text-2); }
.plan-total.warn { color: var(--amber); }
.preview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); margin-top: var(--s-3); }
.preview-grid div { padding: var(--s-3); border-radius: 12px; background: var(--card-2); }
.preview-grid dt { font-size: 12px; color: var(--text-3); }
.preview-grid dd { margin: 4px 0 0; font-size: 17px; font-weight: 700; }
.preview-grid dd.pos { color: var(--green); }
.sheet-foot .btn-round { flex: none; }

/* ---- Niches ---- */
.niche-preview { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3); margin: 0 0 var(--s-4); border-radius: 12px; background: var(--card-2); font-size: 16px; }
.emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 6px; }
.emoji-btn { height: 40px; border: 1px solid var(--line); border-radius: 10px; background: var(--card-2); font-size: 20px; cursor: pointer; transition: all var(--dur-1) var(--ease); }
.emoji-btn:hover { background: var(--fill-2); }
.emoji-btn.on { border-color: var(--accent); background: var(--accent-soft); transform: scale(1.06); }
.color-row { display: flex; flex-wrap: wrap; gap: 10px; }
.color-btn { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--card); background: var(--c); box-shadow: 0 0 0 1px var(--line); cursor: pointer; transition: transform var(--dur-1) var(--ease); }
.color-btn.on { box-shadow: 0 0 0 2px var(--text); transform: scale(1.08); }

/* ---- Activité ---- */
.card-link { border: 0; background: transparent; cursor: pointer; font: inherit; font-size: 14px; }
.period-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); margin: 0 0 var(--s-4); }
.period-nav { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.period-nav .field { margin: 0; flex-direction: row; align-items: center; gap: 6px; }
.period-label { min-width: 160px; text-align: center; font-size: 15px; font-weight: 600; }
.act-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); margin: 0 0 var(--s-4); }
.act-stats .stat:nth-child(-n+2) { grid-column: span 1; }
@media (min-width: 700px) { .act-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } .act-stats .stat:nth-child(-n+2) { grid-column: span 2; } }
@media (min-width: 1400px) { .act-stats { grid-template-columns: repeat(6, minmax(0, 1fr)); } .act-stats .stat:nth-child(-n+2) { grid-column: span 3; } }
.bar-chart .bar { fill: var(--accent-bg); opacity: 0.85; }
.bar-chart .bar.zero { fill: var(--fill-2); opacity: 1; }
.bar-dot { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 2px var(--card); }
.legend-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--green); margin-right: 4px; vertical-align: middle; }
.eod-grid { margin-top: var(--s-3); }
@media (min-width: 700px) { .sheet .eod-grid { grid-template-columns: repeat(3, 1fr); } }
.eod-note { margin-top: var(--s-4); }

/* ---- Commissions ----
   Mobile : chaque mois sur trois lignes (mois et total ; quatre chiffres ; état). Ordinateur : une ligne en colonnes. */
.txt-green { color: var(--green); } .txt-amber { color: var(--amber); } .txt-red { color: var(--red); }
.comm-stats { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); margin: 0 0 var(--s-4); }
@media (min-width: 700px) { .comm-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.comm-list { list-style: none; margin: 0; padding: 0; }
.comm-list li + li .comm-row { border-top: 1px solid var(--line); }
.comm-row, .comm-foot { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) 18px; gap: 6px var(--s-2); align-items: center; width: 100%;
  padding: var(--s-3) 0; text-align: left; color: var(--text); font: inherit; background: none; border: 0; }
.comm-row { cursor: pointer; border-radius: 10px; transition: background var(--dur-1) var(--ease); }
.comm-row:hover { background: var(--fill); }
.comm-foot { border-top: 2px solid var(--line); margin-top: 2px; }
.c-month { grid-column: 1 / 3; grid-row: 1; display: flex; flex-direction: column; gap: 2px; }
.c-total { grid-column: 3 / 5; grid-row: 1; text-align: right; font-size: 17px; font-weight: 700; }
.comm-row .row-chev { grid-column: 5; grid-row: 1 / span 3; color: var(--text-3); }
.c-num { grid-row: 2; font-size: 14px; font-variant-numeric: tabular-nums; display: flex; flex-direction: column; gap: 1px; }
.c-num::before { content: attr(data-l); font-size: 11px; color: var(--text-3); }
.c-fact { color: var(--blue); font-weight: 600; }
.c-state { grid-column: 1 / 5; grid-row: 3; }
.comm-head { display: none; }
@media (min-width: 900px) {
  .comm-row, .comm-foot, .comm-head { grid-template-columns: minmax(130px, 1.3fr) repeat(4, minmax(0, 1fr)) minmax(0, 1.1fr) minmax(170px, 1.4fr) 18px; padding: 10px var(--s-2); }
  .comm-head { display: grid; gap: var(--s-2); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); border-bottom: 1px solid var(--line); }
  .comm-head span:not(:first-child):not(:last-child) { text-align: right; }
  .comm-head span:nth-child(7) { text-align: left; padding-left: var(--s-3); }
  .c-month, .c-total, .c-num, .c-state, .comm-row .row-chev { grid-column: auto; grid-row: auto; }
  .c-num { display: block; text-align: right; font-size: 15px; }
  .c-num::before { content: none; }
  .c-total { font-size: 16px; }
  .c-state { padding-left: var(--s-3); }
}
.rel-list { list-style: none; margin: 0; padding: 0; }
.rel-row { display: flex; align-items: center; gap: var(--s-2); }
.rel-list li + li { border-top: 1px solid var(--line); }
.rel-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) 0; background: none; border: 0; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.rel-main .row-main { flex: 1; min-width: 0; }
.mois-comp { padding: var(--s-3) 0; }
.mois-comp + .mois-comp { border-top: 1px solid var(--line); }
.mois-comp-head { display: flex; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-2); font-weight: 600; }
.mois-comp .preview-grid { margin-top: 0; }
.mois-items { list-style: none; margin: 0; padding: 0; }
.mois-items li { display: flex; align-items: center; gap: var(--s-3); padding: 10px 0; }
.mois-items li + li { border-top: 1px solid var(--line); }
.mois-items .row-main { flex: 1; min-width: 0; }

/* ---- Statistiques et objectifs ---- */
.stat-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); margin: 0 0 var(--s-4); }
.stat-row .stat:last-child { grid-column: span 2; }
@media (min-width: 900px) { .stat-row { grid-template-columns: repeat(5, minmax(0, 1fr)); } .stat-row .stat:last-child { grid-column: auto; } }
.bar-value { position: absolute; transform: translate(-50%, calc(-100% - 3px)); font-size: 11px; font-weight: 600; color: var(--text-2); white-space: nowrap; pointer-events: none; }
@media (max-width: 599px) { .bar-value { display: none; } }
/* Tableau qui défile de côté : le conteneur n'a AUCUNE marge intérieure (sinon les colonnes qui défilent
   restent visibles à gauche de la colonne « Mois » figée : bug iPhone du 27/09) ; ce sont les cellules du bord qui la portent. */
.table-wrap { overflow-x: auto; margin: 0 calc(-1 * var(--s-4)); }
.table-wrap .stat-table th:first-child, .table-wrap .stat-table td:first-child, .rp-table .stat-table th:first-child, .rp-table .stat-table td:first-child { padding-left: var(--s-4); }
.table-wrap .stat-table th:last-child, .table-wrap .stat-table td:last-child, .rp-table .stat-table th:last-child, .rp-table .stat-table td:last-child { padding-right: var(--s-4); }
.stat-table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.stat-table th { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); text-align: right; padding: 0 var(--s-2) var(--s-2); border-bottom: 1px solid var(--line); white-space: nowrap; }
.stat-table td { text-align: right; padding: 10px var(--s-2); border-bottom: 1px solid var(--line); white-space: nowrap; }
.stat-table th:first-child, .stat-table td:first-child { text-align: left; padding-left: 0; position: sticky; left: 0; z-index: 1; background: var(--card); }
@media (max-width: 759px) { .stat-table th:first-child, .stat-table td:first-child { box-shadow: inset -1px 0 0 var(--line); } }
.stat-table tr.total td { font-weight: 700; border-bottom: 0; border-top: 2px solid var(--line); }
.obj-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); flex-wrap: wrap; margin: -4px 0 var(--s-3); }
.obj-metrics { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3) var(--s-5); }
@media (min-width: 900px) { .obj-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.obj-line { display: flex; justify-content: space-between; gap: var(--s-2); font-size: 14px; margin-bottom: 6px; }
.obj-line .num { color: var(--text-2); white-space: nowrap; } .obj-line strong { color: var(--text); }
.obj-metrics .caption { margin: 4px 0 0; }
.obj-empty { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; }
.obj-empty .secondary { margin: 0; }
.obj-hist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2) var(--s-5); }
@media (min-width: 900px) { .obj-hist { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.obj-hist button { display: flex; justify-content: space-between; width: 100%; padding: 0 0 4px; background: none; border: 0; color: var(--text-2); font: inherit; font-size: 14px; cursor: pointer; }
.obj-hist button:hover { color: var(--text); }
.niche-break { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.nb-line { display: flex; align-items: center; gap: var(--s-3); margin-bottom: 8px; }
@media (min-width: 1300px) { .stat-pair:not(.single) { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--s-4); align-items: start; } }
.seuil-block { padding: var(--s-3); margin: 0 0 var(--s-4); border-radius: 12px; background: var(--card-2); }
.seuil-block .obj-line { align-items: center; }
.seuil-block .caption { margin: 6px 0 0; }
.seuil-block.compact { margin-bottom: var(--s-3); }
.seuil-empty { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.seuil-empty .secondary { margin: 0; }
.budget-big { margin: -4px 0 var(--s-2); font-size: 28px; font-weight: 700; letter-spacing: -0.02em; }
.budget-big .secondary { font-size: 14px; font-weight: 400; letter-spacing: 0; }
.budget-rows { list-style: none; margin: 0 0 var(--s-2); padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.budget-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 44px; grid-template-areas: "nom nom x" "montant type x"; gap: 6px var(--s-2); align-items: center; padding-bottom: var(--s-2); border-bottom: 1px solid var(--line); }
.budget-row .b-nom { grid-area: nom; } .budget-row .b-montant { grid-area: montant; } .budget-row .b-type { grid-area: type; } .budget-row > .btn { grid-area: x; }
@media (min-width: 700px) { .budget-row { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) auto 44px; grid-template-areas: "nom montant type x"; padding-bottom: 0; border-bottom: 0; } }
.budget-result { margin: var(--s-4) 0 var(--s-2); padding: var(--s-3) var(--s-4); border-radius: 12px; background: var(--accent-soft); }
.budget-result p { margin: 0; } .budget-result strong { font-size: 20px; color: var(--accent); }
.budget-result .caption { margin-top: 4px; }
.budget-result.empty { background: var(--card-2); }