/* MRPoke – Light theme (Institut Agro) */

/* Inter variable, servie par le site (SIL Open Font License). */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter/InterVariable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter/InterVariable-Italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}

/* ====== Palette (variables CSS) ====== */
:root {
  /* Couleurs marque */
  --brand-primary: #f8ac00; /* Jaune orangé */
  --brand-dark:    #282929; /* Gris très foncé / Noir */

  /* Secondaires */
  --brand-yellow:   #feec2f;
  --brand-teal:     #3fb498;
  --brand-sky:      #a1daf8;
  --brand-violet:   #ab93c5;
  --brand-pink:     #f4a6b7;

  /* UI (dérivées, accessibles) */
  --bg:       #f7f7f7;
  --card:     #ffffff;
  --text:     var(--brand-dark);
  --muted:    #5f6b7a;
  --border:   #dfe5ef;
  --shadow:   0 10px 30px rgba(0,0,0,.06);

  --primary:       var(--brand-primary);
  --primary-600:   #e59c00;
  --primary-text:  #1b1b1b;

  --accent:        var(--brand-teal);
  --accent-600:    #309e86;

  /* États */
  --info:    #0b6efb;
  --success: #1f7a1f;
  --warning: #b46b00;
  --danger:  #c44f4f;
  --danger-bg: #fdecea;
  --warning-bg:#fff7e6;

  --radius: 12px;
}

/* ====== Reset & body ====== */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: "Inter", Arial, sans-serif;
  font-optical-sizing: auto;
  background: var(--bg);
  color: var(--text);
  display: flex;                /* centrage par défaut (login/lobby) */
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

/* Layout spécifique à la page jeu (désactive le centrage global) */
body.game {
  display: block;
  min-height: 100vh;
}

body.admin {
  display: block;
  min-height: 100vh;
  background: var(--bg);
}

/* ====== Cartes / layout ====== */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  width: 100%;
  max-width: 720px;
  box-shadow: none;
}

.card--wide { max-width: none; width: 100%; }

h1 { font-size: 1.6rem; margin: 0 0 12px; color: var(--text); }
p { margin: 0 0 16px; color: var(--muted); }
.small { font-size: .92rem; color: var(--muted); }
.table-note {
  margin: 10px 0 0;
  font-size: .85rem;
  color: var(--muted);
}

.table-note strong { color: var(--text); }

.table-note .legend-item {
  display: block;
  margin-top: 4px;
}

.table-note .legend-item:first-child { margin-top: 0; }

.table-note .legend-sign {
  font-weight: 600;
  display: inline-block;
  margin-right: 4px;
}

.table-note .legend-sign--alert { color: var(--danger); }
.today-note {
  display: block;
  margin: 4px 0 0;
  padding: 2px 6px;
  font-size: .58rem;
  font-weight: 600;
  color: var(--brand-dark);
  background: var(--brand-primary);
  border-radius: 6px;
  width: fit-content;
}
.hr { height:1px; background: var(--border); margin: 16px 0; }

.row { display:flex; gap:10px; }
.row > * { flex: 1 1 0; }

/* Sélecteurs Ligne/Produit : compacts + wrap si besoin */
.row.row-controls { 
  flex-wrap: wrap;
  gap: 12px 16px;
  justify-content: flex-start;
}
.row.row-controls > * {
  /* largeur “utile” sans prendre toute la ligne */
  flex: 0 1 400px;       /* cible ~400px, peut rétrécir/élargir */
  min-width: 240px;      /* évite que ça devienne trop petit */
  max-width: 460px;
}
.row.row-controls select { width: 100%; }

/* Mobile : repasse en pleine largeur */
@media (max-width: 680px) {
  .row.row-controls > * {
    flex: 1 1 100%;
    min-width: 0;
    max-width: none;
  }
}


/* ====== Formulaires ====== */
label { display:block; margin: 10px 0 6px; color: var(--text); }
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
select {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input::placeholder { color: #9aa0a6; }
input:focus,
select:focus {
  border-color: var(--brand-sky);
  box-shadow: 0 0 0 4px rgba(161,218,248,.35);
}

/* ====== Boutons ====== */
.btn {
  display: inline-block;
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  cursor: pointer;
  transition: transform .02s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
  box-shadow: none;
}
.btn:hover { background: var(--bg); }
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--primary);
  border-color: transparent;
  color: var(--primary-text);
  font-weight: 600;
}
.btn-primary:hover { background: var(--primary-600); }

.btn-accent {
  background: var(--brand-teal);
  border-color: transparent;
  color: var(--brand-dark);
  font-weight: 600;
}
.btn-accent:hover { background: var(--accent-600); }

.btn-outline { background: #ffffff; color: var(--text); }
.btn-sm { padding: 8px 12px; border-radius: 8px; font-size: .92rem; margin-top: 0; }

/* ====== Liens ====== */
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.admin a:hover { text-decoration: none; }

/* ====== Messages / alertes ====== */
.error {
  color: var(--danger);
  background: var(--danger-bg);
  border: 1px solid #f5c6cb;
  padding: 10px 12px;
  border-radius: 8px;
  margin-top: 10px;
}
.success {
  color: var(--success);
  background: #ecfdf0;
  border: 1px solid #b7e2c0;
  padding: 10px 12px; border-radius: 8px; margin-top:10px;
}
.warning {
  color: var(--warning);
  background: var(--warning-bg);
  border: 1px solid #ffe2b3;
  padding: 10px 12px; border-radius: 8px; margin-top:10px;
}

/* ====== Tables ====== */
table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; }
th { color: var(--text); }

/* ====== Header sticky ====== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #fff;
  border-bottom: 1px solid var(--border);
  box-shadow: none;
}
.site-header .bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 24px;
}
.brand { font-weight: 700; letter-spacing: .2px; }
.header-right { display: flex; align-items: center; gap: 12px; }
.date-ig strong { color: var(--text); }

/* ====== Containers ====== */
.container-narrow {
  padding: 20px 24px 8px;
  max-width: 1200px;      /* panneau d’info centré */
  margin: 0 auto;
}

/* Zone plein large (graphiques/tableaux) */
.content-wide {
  width: 100%;
  padding: 0 24px 32px;
}
.content-wide .panel-inner {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: none;
  min-height: 40vh; /* espace pour futurs graphes */
}

/* ====== Info flex (horizontal + wrap) ====== */
.info-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;       /* valeur finale souhaitée */
  align-items: baseline;
}
.info-flex .kv { flex: 1 1 220px; min-width: 160px; }
.info-flex .k  { font-size: .85rem; color: var(--muted); margin-bottom: 2px; }
.info-flex .v  { font-weight: 700; color: var(--text); }
@media (max-width: 680px) { .info-flex .kv { flex-basis: 46%; } }
@media (max-width: 480px) { .info-flex .kv { flex-basis: 100%; } }

/* Carte compacte (réduit la hauteur) */
.card--dense { padding: 16px 18px; border-radius: 12px; }

/* Info flex un peu plus “serré” sur une grande largeur */
.info-flex { gap: 12px 32px; }

/* ====== Tabs ====== */
.tabs {
  max-width: 1200px;
  margin: 16px auto 12px;
  padding: 0 24px;
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--border);
}
.tab {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  padding: 10px 14px;
  border-radius: 10px 10px 0 0;
  cursor: pointer;
  color: var(--muted);
  font-weight: 600;
}
.tab.is-active {
  color: var(--text);
  background: #fff;
  border-color: var(--border);
  border-bottom-color: #fff;
}
.tab:focus-visible { outline: 3px solid rgba(161,218,248,.75); outline-offset: 2px; }

.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ====== Utilities ====== */
.max-w-narrow { max-width: 520px; }
.center { display:flex; align-items:center; justify-content:center; }

/* ====== Admin dashboard ====== */
.admin-header {
  background: #fff;
  border-bottom: 1px solid var(--border);
  box-shadow: none;
}
.admin-header__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.admin-header__left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.admin-header__home {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  font-size: .85rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
}
.admin-header__home:hover {
  background: #f7f7f7;
}
.admin-header__title {
  font-size: 1.3rem;
  font-weight: 700;
}
.admin-header__title-link {
  color: inherit;
  text-decoration: none;
}
.admin-header__title-link:hover .admin-header__title {
  text-decoration: underline;
}
.admin-header__subtitle {
  font-size: .92rem;
  color: var(--muted);
}

.admin-shell {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.admin-card {
  max-width: none;
}

.admin-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}

.admin-tile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: var(--brand-primary);
  color: var(--brand-dark);
  box-shadow: none;
  transition: transform .02s ease, box-shadow .15s ease;
}

.admin-tile:hover {
  transform: translateY(-1px);
}

.admin-tile__title {
  font-weight: 700;
  font-size: 1rem;
}

.admin-tile__desc {
  font-size: .9rem;
  color: var(--muted);
}

.admin-tile--disabled {
  opacity: .5;
  cursor: not-allowed;
  background: #f3f4f6;
  border-color: var(--border);
}

.admin-tile--primary {
  background: var(--brand-primary);
  color: var(--brand-dark);
}

.admin-tile--light {
  background: #ffffff;
  color: var(--brand-dark);
  border-color: var(--border);
}

.password-meter {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 10px 0 12px;
}

.password-meter meter {
  width: 140px;
  height: 10px;
}

.password-meter__label {
  font-size: .9rem;
  color: var(--muted);
}

.inline-form {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

/* ===== Tables MRP (flat + compact) ===== */
.table-scroll {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  box-shadow: none;
}

/* base commune (forecast + history) */
.mrp-table, .forecast-table {
  table-layout: fixed;
  width: 100%;
  min-width: 1240px; /* garde les inputs/valeurs lisibles */
  border-collapse: separate;
  border-spacing: 0;
  font-variant-numeric: tabular-nums;
}

/* colonnes: 1ère fixe, jours = parts égales du reste */
.mrp-table col.col-head,
.forecast-table col.col-head { width: 220px; }
.mrp-table col.col-day,
.forecast-table col.col-day { width: calc((100% - 220px) / 15); }
.mrp-table col.col-day,
.forecast-table col.col-day { min-width: 68px; }

.mrp-table col.col-day--today,
.forecast-table col.col-day--today {
  width: calc((100% - 220px) / 15 + 20px);
  min-width: 96px;
}


/* en-têtes sur 2 lignes (jour + date) */
.mrp-table thead th, .forecast-table thead th {
  position: sticky; top: 0; z-index: 3;
  background: #fff;
  text-align: center; font-weight: 700;
  padding: 8px 6px;
  border-bottom: 1px solid var(--border);
  white-space: normal;        /* wrap autorisé */
  overflow: visible;
  text-overflow: clip;
}
.mrp-table thead th .dow, .forecast-table thead th .dow  { display:block; line-height:1.1; font-weight:700; }
.mrp-table thead th .date, .forecast-table thead th .date { display:block; line-height:1.1; font-size:.85rem; color: var(--muted); }

/* 1re colonne mise en valeur (sharp, sans ombre) */
.mrp-table .row-head, .forecast-table .row-head {
  position: sticky; left: 0; z-index: 4;
  background: #fffaf0;        /* léger ton chaud */
  text-align: left;
  padding: 10px 10px;
  white-space: nowrap;
  border-right: 2px solid var(--brand-primary);
  font-weight: 700;
}

.mrp-table .row-orders .row-head {
  background: #e7f5fd;
  border-right-color: rgba(161, 218, 248, 0.65);
}

/* coin haut-gauche (thead, 1re cellule) */
.mrp-table thead th.row-head,
.mrp-table thead th:first-child,
.forecast-table thead th.row-head,
.forecast-table thead th:first-child {
  background: #f3f4f6;
  border-right: 2px solid var(--brand-primary);
}

/* corps */
.mrp-table td, .forecast-table td {
  padding: 8px 8px;
  border-bottom: 1px solid var(--border);
  text-align: center;   /* nombres centrés */
  white-space: nowrap;
}

.mrp-table .row-orders th,
.mrp-table .row-orders td {
  font-weight: 700;
  background: rgba(161, 218, 248, 0.16);
  box-shadow: inset 0 -1px 0 rgba(161, 218, 248, 0.4);
}

.mrp-table .row-orders input.tbl-input {
  font-weight: 700;
}

#forecastTable td.today-actual .qty {
  font-weight: 600;
}

.mrp-table .row-duration-theoretical th,
.mrp-table .row-duration-theoretical td,
.mrp-table .row-duration-actual th,
.mrp-table .row-duration-actual td,
.mrp-table .row-trs th,
.mrp-table .row-trs td {
  background: rgba(171, 147, 197, 0.16);
}

.mrp-table .row-duration-theoretical .row-head,
.mrp-table .row-duration-actual .row-head,
.mrp-table .row-trs .row-head {
  background: rgba(171, 147, 197, 0.24);
  border-right-color: rgba(171, 147, 197, 0.85);
}

.mrp-table .row-duration-theoretical td,
.mrp-table .row-duration-actual td,
.mrp-table .row-trs td {
  box-shadow: inset 0 -1px 0 rgba(171, 147, 197, 0.28);
}

#forecastTable td.today-actual .qty-line {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
}

#forecastTable .forecast-diff {
  display: inline-block;
  margin-left: 4px;
  font-size: .78rem;
  color: var(--muted);
}

#forecastTable td.today-actual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

#forecastTable td.today-actual .qty-line .forecast-diff {
  margin-left: 0;
}

#forecastTable td.today-actual .today-note {
  margin-top: 2px;
}

#forecastTable .forecast-diff.is-pos {
  color: var(--success);
}

#forecastTable .forecast-diff.is-neg {
  color: var(--danger);
}

/* ===== Prévisions : colonnes hors jours de production ===== */
.npd {
  background: #f5f6f7; /* gris très léger, flat */
}

/* OF saisi un jour non productif : état d'erreur (rouge) */
.tbl-input.npd-error{
  border-color: var(--danger);                 /* #c44f4f dans ta palette */
  box-shadow: 0 0 0 2px rgba(198, 40, 40, .14);
}


/* Inputs num compacts */
.tbl-input {
  width: 56px;
  padding: 5px 6px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  text-align: center;          /* <-- centré */
}

.tbl-input[disabled] {
  background: #f0f0f0;
  color: var(--muted);
  cursor: not-allowed;
}

.tbl-input:focus {
  border-color: var(--brand-sky);
  box-shadow: 0 0 0 3px rgba(161,218,248,.25);
  outline: none;
}
.tbl-input::-webkit-outer-spin-button,
.tbl-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tbl-input[type="number"] { -moz-appearance: textfield; }

/* Graphique : pas de scroll ici */
.chart-wrap { margin-top: 12px; height: 300px; overflow: visible; }
.mrp-chart { width: 100% !important; height: 100% !important; }

/* ===== Forecast chart (couleurs charte) ===== */
.chart-wrap { margin-top: 12px; height: 320px; }
@media (max-width: 900px) { .chart-wrap { height: 280px; } }
@media (max-width: 600px) { .chart-wrap { height: 240px; } }
.mrp-chart { width: 100% !important; height: 100% !important; }

/* ====== Tableau Stocks (2 colonnes, compact & flat) ====== */
.table-scroll--narrow { display: inline-block; } /* le conteneur s’ajuste à la table */

.mrp-table-compact {
  table-layout: fixed;
  width: auto;               /* laisse la table garder une largeur compacte */
  min-width: 340px;          /* lisible même en étroit */
  border-collapse: separate;
  border-spacing: 0;
  font-variant-numeric: tabular-nums;
}

/* Colonnes étroites */
.mrp-table-compact col.col-dle { width: 180px; }
.mrp-table-compact col.col-qty { width: 120px; }

/* En-tête simple (pas sticky nécessaire ici, mais on peut garder le style) */
.mrp-table-compact thead th {
  background: #fff;
  font-weight: 700;
  text-align: center;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

/* Corps, centré pour les chiffres, sans hover */
.mrp-table-compact td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  text-align: center;
  white-space: nowrap;
}

/* Rayures douces (flat) */
.mrp-table-compact tbody tr:nth-child(even) td { background: #f8f8f8; }
.mrp-table-compact tbody tr:nth-child(odd)  td { background: #fff; }

/* ===== Historique : colonnes fixes + scroll horizontal si nécessaire ===== */
.mrp-table--history {
  table-layout: fixed;         /* respecte les <col> ci-dessus */
  width: max-content;          /* la table s'élargit selon le nb de jours */
  min-width: 760px;            /* lisible même à 0/peu de colonnes */
}

.restore-history-block {
  margin-top: 24px;
}

.restore-history-header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.restore-history-toggle {
  appearance: none;
  background: none;
  border: 0;
  padding: 4px 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}

.restore-history-toggle .label {
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.restore-history-toggle .chevron {
  display: inline-block;
  width: 0.65em;
  height: 0.65em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.2s ease;
}

.restore-history-toggle:hover .label,
.restore-history-toggle:focus-visible .label {
  color: var(--accent);
  text-decoration-color: currentColor;
}

.restore-history-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.restore-history-toggle.is-open .chevron {
  transform: rotate(45deg);
}

.restore-history-count {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  font-size: 0.95rem;
  color: var(--text);
  margin-left: auto;
}

.restore-history-count strong {
  font-weight: 700;
}

.restore-history-count .label-text {
  white-space: nowrap;
}

.restore-history {
  margin-top: 12px;
}

.restore-history-table {
  width: 100%;
  min-width: 320px;
  border-collapse: collapse;
}

.restore-history-table th,
.restore-history-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}

.restore-history-table thead th {
  background: #fff;
  font-weight: 600;
}

.restore-history-table tbody tr:nth-child(even) td {
  background: #f9f9f9;
}

.restore-history-table .dow {
  display: inline-block;
  min-width: 2ch;
  font-weight: 600;
  margin-right: 4px;
}

.restore-history-table .date {
  display: inline-block;
}

.restore-history-table td.empty {
  text-align: center;
  font-style: italic;
  color: var(--text-light);
}


/* ====== Sauvegardes (sélection compacte) ====== */
.save-controls{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.save-actions{
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: nowrap;
}

.save-select{
  width: 180px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}

.save-select:disabled{
  opacity: .6;
}

@media (max-width: 520px) {
  .save-actions{
    flex-wrap: wrap;
  }
  .save-select{
    width: 100%;
    flex: 1 1 160px;
  }
}

/* Feedback visuel court après clic */
#savesTable tr.highlight-row td { background: #fff6cc; } /* jaune très léger */

/* ===== Next Day form (inline dans #nextDayMsg) ===== */
#nextDayMsg { margin: 12px 0; }

/* Panel : même gabarit que les autres cartes */
.nextday-panel{
  border:1px solid var(--border);
  border-left:4px solid var(--brand-primary);
  background:#fff9ed;                /* fond doux non blanc */
  border-radius:12px;
  padding:20px;                      /* même padding que tes panels */
  overflow-x:auto;
}

/* Titre comme “Paramètres de production” */
.nextday-title{
  margin:0 0 12px;
  color:#282929;                     /* texte foncé, pas d’orange ici */
}

/* Tableau : largeurs cohérentes et OF centré/noir */
.nextday-list{
  width:100%;
  min-width:1040px;
  table-layout:fixed;                /* active <colgroup> */
  border-collapse:collapse;
  font-variant-numeric:tabular-nums;
}
.nextday-list col.col-prod { width:auto; }   /* colonne élastique */
.nextday-list col.col-of  { width:70px; }    /* OF compact */
.nextday-list col.col-fab { width:160px; }   /* input confortable */
.nextday-list col.col-duration-theoretical,
.nextday-list col.col-duration-actual { width:170px; }
.nextday-list col.col-trs { width:150px; }

.nextday-list th,
.nextday-list td{
  border-bottom:1px solid var(--border);
  padding:10px 12px;
}
.nextday-list th{
  text-align:center;
  white-space:normal;
  overflow-wrap:anywhere;
  line-height:1.25;
  vertical-align:bottom;
}
.nextday-list th:first-child{
  text-align:left;
}
.nextday-list td{
  text-align:center;
  white-space:nowrap;
}
.nextday-list td.col-prod{ text-align:left; }
.nextday-list td.col-of{
  font-weight:700;
  color:#282929;                    /* OF noir */
  text-align:center;                /* et centré */
}

/* Badge ligne (L1, L2, …) */
.nextday-badge{
  display:inline-block;
  line-height:1;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#fff;
  margin-right:8px;
  font-size:.85rem;
  color:#282929;
}

/* Inputs */
.nextday-input{
  width:100%;
  max-width:140px;
  box-sizing:border-box;
  text-align:center;
  padding:8px 10px;
  border:1px solid var(--border);
  border-radius: 8px;
}

/* Actions + désactivation nette des boutons */
.nextday-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:12px; }
.btn:disabled, .btn[disabled]{
  opacity:.55;
  cursor:not-allowed;
  pointer-events:none;              /* plus aucun hover trompeur */
  box-shadow:none !important;
}

/* Cache le conteneur quand vide */
#nextDayMsg:empty { display:none; }

/* ===== Stocks : carte étroite façon “sauvegardes” ===== */
.stocks-wrap{
  max-width: 400px;           /* réduit la largeur globale */
}
@media (max-width: 640px){
  .stocks-wrap{ max-width: 100%; }
}
.stocks-table{
  table-layout: fixed;        /* respecte le <colgroup> */
  width: 100%;
}
.stocks-table col.col-date{ width: 260px; }
.stocks-table col.col-qty { width: 120px; }
.stocks-table th, .stocks-table td{
  padding: 8px 12px;          /* un peu plus compact */
  text-align:center;
}
.stocks-table td.num{
  text-align: center;         /* chiffres centrés */
  font-variant-numeric: tabular-nums;
}

/* Stocks : ligne Total */
.stocks-table tfoot .stocks-total td{
  font-weight: 700;
  border-top: 2px solid var(--border);
  background: #fff;          /* léger contraste, flat */
}

/* ===== Admin scénarios ===== */

.admin-card > h1,
.admin-card > h2,
.admin-card > h3,
.scenario-list-card > h3,
.scenario-editor-block > h3 {
  margin-top: 0;
  margin-bottom: 12px;
  color: var(--text);
}

.admin-card > h2,
.scenario-hero h2,
.scenario-editor__header h2 {
  font-size: 1.45rem;
}

.admin-card > h3,
.scenario-list-card > h3,
.scenario-editor-block > h3 {
  font-size: 1.15rem;
}

.scenario-list-card,
.scenario-create-card,
.session-create-card {
  border-left: 4px solid var(--brand-primary);
}
.scenario-hero,
.scenario-editor__header,
.scenario-create-form,
.scenario-meta-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.scenario-create-form {
  align-items: end;
  flex-wrap: wrap;
}

.scenario-create-form > div {
  flex: 1 1 320px;
}

.checkbox-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  margin: 0;
}

.checkbox-line input {
  width: auto;
}

.checkbox-line--panel {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
}

.scenario-lists {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.scenario-table-wrap {
  box-shadow: none;
}

.scenario-table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
}

.scenario-table th,
.scenario-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
}

.scenario-table th {
  background: #f8fafc;
  font-weight: 700;
}

.scenario-table input[type="checkbox"] {
  width: 18px;
  height: 18px;
}

.scenario-editor {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.scenario-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(46, 125, 50, .12);
  color: var(--success);
  font-weight: 700;
  white-space: nowrap;
}

.scenario-badge--readonly {
  background: #f3f4f6;
  color: var(--muted);
}

.scenario-editor-form,
.scenario-products-stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.scenario-meta-grid {
  align-items: end;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.scenario-meta-grid > div {
  flex: 1 1 360px;
}

.scenario-editor-block {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fbfcfd;
}

.scenario-editor-block h4 {
  margin-top: 0;
}

.scenario-line-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.scenario-mini-card,
.scenario-product-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  padding: 14px;
}

.scenario-product-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.scenario-product-card__title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.scenario-product-card__title span {
  color: var(--muted);
  font-weight: 700;
}

.scenario-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}

.scenario-days-picker {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px;
  border-radius: 12px;
  background: #f8fafc;
}

.scenario-days-picker span {
  font-weight: 700;
  margin-right: 4px;
}

.scenario-days-picker label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
}

.scenario-days-picker input,
.scenario-stock-row input[type="number"] {
  width: auto;
}

.scenario-forecast-table {
  min-width: 860px;
  width: 100%;
  table-layout: fixed;
}

.scenario-forecast-table .tbl-input {
  width: 52px;
}

.scenario-stocks-grid {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.scenario-stock-row {
  display: inline-flex;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fffaf0;
}

.scenario-stock-row label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: .9rem;
}

.scenario-stock-row input {
  max-width: 72px;
}

@media (max-width: 760px) {
  .scenario-hero,
  .scenario-editor__header,
  .scenario-create-form,
  .scenario-meta-grid {
    align-items: stretch;
    flex-direction: column;
  }
}

.scenario-mini-card--new,
.scenario-product-card--new {
  border-style: dashed;
  background: #fffaf0;
}

.scenario-actions,
.scenario-toolbar,
.scenario-block-heading,
.scenario-line-fields,
.scenario-product-tabs,
.scenario-tabs {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.scenario-actions {
  justify-content: flex-end;
}

.scenario-toolbar {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
}

.scenario-block-heading {
  justify-content: space-between;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.scenario-line-fields {
  align-items: end;
  margin-bottom: 14px;
}

.scenario-line-fields > div {
  flex: 1 1 220px;
}

.scenario-tabs,
.scenario-product-tabs {
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #f8fafc;
}

.scenario-tab,
.scenario-subtab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
}

.scenario-tab.is-active,
.scenario-subtab.is-active {
  background: #fff3d6;
  border-color: var(--brand-primary);
  color: var(--brand-dark);
}

.scenario-line-panels {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.scenario-line-panel--new,
.is-marked-delete {
  border-style: dashed;
}

.is-marked-delete {
  opacity: .58;
  background: #fff1f2;
}

@media (max-width: 760px) {
  .scenario-actions,
  .scenario-toolbar,
  .scenario-block-heading {
    align-items: stretch;
    flex-direction: column;
  }
}

/* ===== UX scénarios : toggles et champs compacts ===== */
.scenario-meta-grid--compact {
  align-items: end;
}

.scenario-days-count {
  flex: 0 1 260px;
}

.scenario-sharing {
  display: grid;
  gap: 8px;
  min-width: 320px;
  padding: 10px;
  border: 1px solid #f3d189;
  border-radius: 8px;
  background: #fffdf5;
}

.scenario-days-count input {
  max-width: 110px;
}

.scenario-line-panel {
  background: #f7f8fb;
  border-color: #f2dfad;
  padding: 0;
  overflow: hidden;
}

.scenario-line-body {
  padding: 14px;
}

.scenario-product-card {
  background: #fff0c7;
  border-color: #e7c77c;
  padding: 0;
  overflow: hidden;
}

.scenario-product-body {
  padding: 16px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  background: #fff9ed;
}

.scenario-toggle-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.scenario-toggle-title::-webkit-details-marker {
  display: none;
}

.scenario-toggle-title::before {
  content: '▸';
  font-weight: 700;
  color: var(--brand-dark);
  transition: transform .15s ease;
}

details[open] > .scenario-toggle-title::before {
  transform: rotate(90deg);
}

.scenario-toggle-title h3,
.scenario-toggle-title h4 {
  margin: 0;
  flex: 1;
}

.scenario-toggle-title__hint {
  color: var(--muted);
  font-size: .85rem;
  font-weight: 600;
}

.scenario-toggle-title--product {
  background: #feec2f;
  border-bottom: 1px solid #f8ac00;
}

.scenario-block-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.icon-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.icon-action__glyph {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--brand-primary);
  color: var(--brand-dark);
  font-weight: 900;
  line-height: 1;
}

.icon-action--danger .icon-action__glyph {
  background: #fee2e2;
  color: var(--danger);
}

.scenario-compact-fields {
  grid-template-columns: repeat(auto-fit, minmax(92px, auto));
  justify-content: start;
}

.scenario-compact-fields .field-xs { max-width: 96px; }
.scenario-compact-fields .field-sm { max-width: 128px; }
.scenario-compact-fields .field-md { min-width: 220px; max-width: 320px; }
.scenario-compact-fields .field-lg { min-width: 260px; max-width: 440px; }

.scenario-compact-fields input[type="number"],
.scenario-compact-fields .field-xs input {
  max-width: 96px;
}

.scenario-forecast-table .tbl-input {
  width: 46px;
  padding-left: 4px;
  padding-right: 4px;
}

.scenario-tabs,
.scenario-product-tabs {
  display: none;
}

.scenario-product-card,
.scenario-line-panel {
  display: block;
}

.scenario-title-input {
  font-size: 1.35rem;
  font-weight: 700;
  border: 1px solid #f8ac00;
  border-radius: 8px;
  padding: 6px 10px;
  max-width: 520px;
  background: #fffdf5;
}

.scenario-table--macro a {
  color: #282929;
  text-decoration: none;
  font-weight: 600;
}
.scenario-table--macro tr.macro-line-row.line-orange.product-tone-a td {
  background: #ffe7ba;
}
.scenario-table--macro tr.macro-line-row.line-orange.product-tone-b td {
  background: #ffdca0;
}
.scenario-table--macro tr.macro-line-row.line-white.product-tone-a td {
  background: #ffffff;
}
.scenario-table--macro tr.macro-line-row.line-white.product-tone-b td {
  background: #f3f4f6;
}
.scenario-table--macro td[rowspan] {
  font-weight: 700;
  vertical-align: middle;
}
.scenario-table--macro td,
.scenario-table--macro th {
  border-color: #f3d189;
}
.scenario-table--macro th {
  background: var(--bg);
  color: #282929;
}

.scenario-add-line-footer {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
}

.icon-action .icon-action__glyph {
  background: #3fb498;
  color: #fff;
}

.icon-action--danger .icon-action__glyph,
.icon-action--danger {
  color: #b91c1c;
}

.icon-action--danger .icon-action__glyph {
  background: #e53935;
  color: #fff;
}

.scenario-editor input:disabled,
.scenario-editor select:disabled {
  background: #ececec;
  color: #6b6b6b;
  border-color: #c0c0c0;
  cursor: not-allowed;
}

.scenario-line-panel {
  background: #fff7dd;
  border-color: #f8ac00;
}

.scenario-product-card {
  background: #fff2bf;
  border-color: #e8c66a;
}

.scenario-product-body {
  gap: 18px;
}

.scenario-add-product-footer {
  margin-top: 12px;
}

.scenario-add-product-footer .btn,
.scenario-add-line-footer .btn {
  width: 100%;
  justify-content: center;
}

.icon-action,
.toggle-delete-btn {
  background: #fff !important;
}

.scenario-forecast-table th,
.scenario-forecast-table td {
  white-space: nowrap;
  padding: 4px 5px;
}
.scenario-forecast-table thead th {
  background: #f8ac00;
  color: #282929;
}

.toggle-name-input {
  width: min(100%, 300px);
  max-width: 300px;
  font-weight: 700;
  border: 1px solid #d7d7d7;
  border-radius: 8px;
  padding: 3px 6px;
}

.scenario-toggle-actions {
  margin-left: auto;
  display: inline-flex;
  gap: 6px;
}

.scenario-stocks-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.scenario-week-row th {
  background: var(--bg);
  color: #282929;
  text-align: center;
}

.scenario-week-row .date {
  display: inline-block;
  min-width: 34px;
  text-align: center;
}

.scenario-stocks-table th,
.scenario-stocks-table td {
  border: 1px solid #ecd59a;
  padding: 6px 8px;
  text-align: center;
}

.scenario-stocks-table thead th {
  background: #f8ac00;
  color: #282929;
  font-weight: 700;
}

.scenario-stocks-table td input {
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}

.scenario-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px 12px;
}

.scenario-product-grid label,
.scenario-stocks-grid > strong {
  flex-basis: 100%;
  font-weight: 700;
}

.scenario-stocks-note {
  flex-basis: 100%;
  color: var(--muted-strong);
  font-size: .82rem;
  font-weight: 700;
}

.scenario-stocks-grid {
  background: #fff;
  border: 1px solid #f8ac00;
  border-radius: 8px;
  padding: 10px;
  max-width: min(100%, 760px);
}

.scenario-stocks-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  width: 100%;
}

.scenario-days-picker,
.scenario-forecast-wrap,
.scenario-stocks-grid,
.scenario-product-grid {
  background: #fff;
  border: 1px solid #f3d189;
  border-radius: 8px;
  padding: 10px;
}

.scenario-days-picker span {
  font-weight: 700;
  color: #282929;
}

.scenario-line-panel {
  background: #f7f8fb;
  border-color: #f8ac00;
}

.scenario-toggle-title {
  background: #fff8e8;
}

@media (max-width: 700px) {
  .scenario-product-grid,
  .scenario-line-fields,
  .scenario-compact-fields {
    grid-template-columns: 1fr 1fr;
  }

  .scenario-compact-fields input,
  .scenario-editor input {
    width: 100%;
    max-width: 100%;
  }
}

.scenario-sharing {
  min-width: 320px;
  border: 1px solid #f3d189;
  border-radius: 8px;
  background: #fffdf5;
  padding: 10px;
}
.scenario-sharing > strong {
  display: block;
  margin-bottom: 8px;
  color: #282929;
}
.scenario-sharing__body { padding: 10px; display: grid; gap: 10px; }
.scenario-sharing__add-row { display: grid; grid-template-columns: 1.5fr 1fr auto; gap: 8px; }
.scenario-sharing-table td:last-child { width: 100px; }
.scenario-sharing--full {
  width: 100%;
  margin: 14px 0;
}
.scenario-sharing__error {
  margin: 0;
}


/* Gestion des parties */
.scenario-create-form > .bulk-groups-editor{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin:16px 0 14px;flex:0 0 100%;width:100%;max-width:100%;}
.scenario-create-form > .bulk-groups-editor label{display:flex;flex-direction:column;gap:4px;}
.session-create-card label,
.session-create-card .checkbox-line,
.scenario-create-form > .bulk-groups-editor .scenario-table th {
  font-size: 1rem;
  font-weight: 700;
}
.scenario-create-form > .bulk-groups-editor .scenario-table th {
  background: transparent;
}

.session-bulk-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:8px 0 16px;}
.session-forecast-input{width:5.5rem;min-width:0;}
.session-submit-wrap{display:flex;justify-content:center;margin-top:16px;}
.session-code-cell{text-align:center;vertical-align:middle;}
.session-code-cell .inline-form{display:flex;justify-content:center;}
.session-code-cell strong{display:block;text-align:center;}

/* ===== Notes de journée ===== */
.day-log-card {
  margin-top: 16px;
}

.nextday-comment-title {
  display: block;
  margin: 0 0 8px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
}

.long-text-input {
  width: 100%;
  min-height: 150px;
  box-sizing: border-box;
  resize: vertical;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  color: var(--text);
  font: inherit;
  line-height: 1.45;
}

.long-text-input:focus {
  outline: none;
  border-color: var(--muted);
}

.nextday-comment {
  margin-top: 16px;
}

.nextday-comment .long-text-input {
  min-height: 120px;
}

.long-text-help {
  margin: 6px 0 0;
}

.nextday-list--simple {
  min-width: 620px;
}

.scenario-create-form > .td-mode-field {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

/* ====== Page d'accueil publique ====== */
body.home {
  display: block;
  min-height: 100vh;
  padding: 40px 20px 88px;
  background: var(--bg);
}

.home-shell {
  width: min(1120px, 100%);
  margin: 0 auto;
}

.home-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 5vw, 56px);
}

.home-hero::after {
  content: "";
  position: absolute;
  right: -80px;
  top: -90px;
  width: 260px;
  height: 260px;
  border-radius: 999px;
  background: rgba(248, 172, 0, .18);
  pointer-events: none;
}

.home-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--primary-text);
  background: rgba(248, 172, 0, .2);
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.home-hero h1 {
  margin: 0 0 14px;
  font-size: clamp(2.4rem, 8vw, 5rem);
  line-height: .95;
  letter-spacing: -.06em;
}

.home-lead {
  max-width: 760px;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  line-height: 1.6;
}

.home-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 18px 0;
}

.home-card {
  min-height: 100%;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .82);
  box-shadow: none;
}

.home-card h2,
.home-legal h2,
.home-cookie h2 {
  margin: 0 0 10px;
  font-size: 1.12rem;
}

.home-card p,
.home-legal p,
.home-cookie p {
  line-height: 1.58;
}

.home-legal,
.home-cookie {
  padding: 24px;
}

.home-legal {
  margin-bottom: 18px;
}

.home-legal h3 {
  margin: 0 0 10px;
  font-size: 1rem;
}

.admin-floating-btn {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: calc(100vw - 40px);
  padding: 12px 16px;
  border-radius: 999px;
  background: var(--brand-dark);
  color: #fff;
  font-weight: 700;
  box-shadow: var(--shadow);
}

.admin-floating-btn:hover {
  color: #fff;
  text-decoration: none;
  background: #111;
}

@media (max-width: 820px) {
  .home-grid { grid-template-columns: 1fr; }
  .admin-floating-btn { left: 20px; }
}

/* ====== Rafraîchissement esthétique global 2026 ====== */
:root {
  --bg: #f7f8fb;
  --surface: #ffffff;
  --surface-soft: #f7f8fb;
  --surface-tint: #f1fbf8;
  --text: #282929;
  --muted: #5f6b7a;
  --muted-strong: #454847;
  --border: #dfe5ef;
  --border-strong: #c7d2e0;
  --shadow: 0 8px 24px rgba(40, 41, 41, .06);
  --shadow-soft: none;
  --ring: none;
  --radius: 12px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
}

html {
  scroll-behavior: smooth;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: "Inter", Arial, sans-serif;
  line-height: 1.55;
  background: #f7f8fb;
}

body.game,
body.admin {
  background: #f7f8fb;
}

body.admin {
  color: var(--text);
}

::selection {
  color: var(--brand-dark);
  background: rgba(254, 236, 47, .85);
}

h1,
h2,
h3,
h4,
.brand,
.admin-header__title,
.panel-title {
  color: var(--text);
  letter-spacing: -.025em;
  line-height: 1.12;
}

h1 { font-size: clamp(1.75rem, 3vw, 2.45rem); }
h2 { font-size: clamp(1.28rem, 2vw, 1.75rem); }
h3 { font-size: clamp(1.05rem, 1.4vw, 1.25rem); }

p,
.small,
.table-note,
.admin-header__subtitle,
.password-meter__label {
  color: var(--muted);
}

p {
  max-width: 78ch;
  line-height: 1.72;
}

.small {
  line-height: 1.6;
}

a {
  color: #247f6d;
  font-weight: 600;
  text-underline-offset: .18em;
}

a:hover {
  color: #165f51;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid rgba(248, 172, 0, .58);
  outline-offset: 3px;
}

.card,
.home-card,
.content-wide .panel-inner,
.admin-card,
.scenario-mini-card,
.scenario-product-card,
.scenario-line-panel,
.nextday-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: none;
}

.card,
.content-wide .panel-inner,
.admin-card {

}

.card:hover,
.home-card:hover,
.admin-tile:hover,
.scenario-mini-card:hover,
.scenario-product-card:hover {
  box-shadow: none;
}

.hr {
  height: 1px;
  border: 0;
  background: #dfe5ef;
}

label,
.scenario-product-grid label,
.scenario-stocks-grid > strong {
  color: var(--muted-strong);
  font-size: .86rem;
  font-weight: 600;
  letter-spacing: .01em;
}

input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
select,
textarea,
.scenario-title-input,
.toggle-name-input {
  border-color: var(--border);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, .96);
  box-shadow: none;
}

input:hover,
select:hover,
textarea:hover {
  border-color: var(--border-strong);
}

input:focus,
select:focus,
textarea:focus,
.tbl-input:focus {
  border-color: var(--muted);
  box-shadow: var(--ring);
}

.btn,
.admin-header__home,
.restore-history-count,
.home-kicker,
.scenario-badge,
.scenario-days-count {
  border-radius: var(--radius-sm);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  border-color: var(--border);
  background: #fff;
  font-weight: 600;
  text-decoration: none;
  box-shadow: none;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease, color .16s ease;
}

.btn:hover {
  transform: translateY(-1px);
  border-color: var(--border-strong);
  background: var(--bg);
  box-shadow: none;
  text-decoration: none;
}

.btn:active {
  transform: translateY(0);
  box-shadow: none;
}

.btn-primary,
.admin-tile--primary {
  color: #282929;
  border-color: transparent;
  background: #f8ac00;
}

.btn-primary:hover,
.admin-tile--primary:hover {
  color: #1d1e1e;
  background: var(--primary-600);
}

.btn-accent {
  color: var(--brand-dark);
  background: var(--brand-teal);
}

.btn-accent:hover {
  color: var(--brand-dark);
  background: var(--accent-600);
}

.btn-outline {
  background: #ffffff;
  border-color: var(--border);
  color: var(--text);
}

.error,
.alert,
.success,
.warning {
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: none;
  line-height: 1.55;
}

.alert,
.error {
  color: #9f1f1f;
  background: #fdecea;
  border: 1px solid #f4b8b2;
}

.success {
  color: #176b32;
  background: #e5f8ea;
  border-color: #a7ddb5;
}

.warning {
  color: #895000;
  background: #fff0d1;
  border-color: #ffd891;
}

.site-header,
.admin-header {
  background: rgba(255, 255, 255, .86);
  border-bottom-color: var(--border);
  box-shadow: none;

}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: 1.15rem;
}

.brand::before,
.admin-header__title::before {
  content: "";
  width: .72rem;
  height: .72rem;
  border-radius: 999px;
  background: var(--brand-primary);
  box-shadow: none;
}

.admin-header__title {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
}

.date-ig {
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .72);
  color: var(--muted-strong);
  font-size: .92rem;
}

.info-flex {
  align-items: stretch;
}

.info-flex .kv {
  padding: 13px 15px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #f7f8fb;
}

.info-flex .k {
  margin-bottom: 5px;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .055em;
}

.info-flex .v {
  font-size: 1.05rem;
}

.table-scroll {
  border-color: var(--border);
  border-radius: 12px;
  box-shadow: none;
}

th,
td,
.mrp-table thead th,
.forecast-table thead th,
.scenario-table th,
.scenario-table td,
.restore-history-table th,
.restore-history-table td {
  border-bottom-color: var(--border);
}

th,
.mrp-table thead th,
.forecast-table thead th,
.scenario-table th,
.restore-history-table th {
  color: var(--text);
  background: var(--bg);
  font-weight: 700;
}

tr:hover td,
.scenario-table tr:hover td,
.restore-history-table tr:hover td {
  background-color: rgba(161, 218, 248, .12);
}

.tbl-input {
  border-radius: 8px;
  border-color: var(--border);
  font-weight: 700;
}

.npd {
  background: #f1f3f2;
}

.admin-shell,
.admin-layout {
  width: min(1200px, calc(100% - 32px));
  margin: 0 auto;
  padding: clamp(22px, 4vw, 36px) 0;
}

.admin-layout {
  min-height: 100vh;
  display: grid;
  place-items: center;
}

.admin-intro,
.scenario-hero,
.session-create-card {
  background: #f7f8fb;
}

.admin-tile {
  border-radius: 12px;
  border-color: var(--border);
}

.admin-tile__desc {
  color: rgba(40, 41, 41, .72);
}

.scenario-toggle-title,
.scenario-tab,
.scenario-subtab,
.restore-history-toggle {
  border-radius: 12px;
}

.scenario-tab.is-active,
.scenario-subtab.is-active {
  background: #fff3d6;
  color: var(--brand-dark);
}

.home-hero {
  min-height: 330px;
  display: grid;
  align-content: center;
  background: #f7f8fb;
}

.home-hero::before {
  content: "";
  position: absolute;
  right: clamp(24px, 7vw, 90px);
  bottom: clamp(20px, 5vw, 64px);
  width: clamp(86px, 13vw, 160px);
  aspect-ratio: 1;
  border-radius: 34% 66% 58% 42% / 42% 42% 58% 58%;
  background: #3fb498;
  box-shadow: none;
}

.home-kicker {
  width: fit-content;
  color: #674500;
  background: #fff3d6;
  border: 1px solid rgba(248, 172, 0, .35);
}

.home-hero h1 {
  color: var(--brand-dark);
}

.home-lead {
  color: var(--muted-strong);
}

.home-card {
  position: relative;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}

.home-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: var(--brand-primary);
}

.home-card:hover {
  transform: translateY(-3px);
}

.home-legal,
.home-cookie,
body.legal-page .card {
  background: #fff;
}

body.legal-page {
  display: block;
  padding: clamp(20px, 5vw, 56px);
}

body.legal-page .card {
  max-width: 940px;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 42px);
}

body.legal-page h1 {
  margin-bottom: 24px;
}

body.legal-page section {
  padding: 18px 0;
  border-top: 1px solid var(--border);
}

.admin-floating-btn {
  background: var(--brand-dark);
  box-shadow: var(--shadow);
}

.admin-floating-btn::before {
  content: "↗";
  margin-right: .45rem;
}

@media (max-width: 720px) {
  body {
    align-items: stretch;
    padding: 16px;
  }

  body.game,
  body.admin,
  body.home,
  body.legal-page {
    padding: 0;
  }

  .card {
    padding: 20px;
  }

  .site-header .bar,
  .admin-header__inner,
  .header-right {
    align-items: flex-start;
    flex-direction: column;
  }

  .tabs {
    overflow-x: auto;
    padding-bottom: 8px;
  }

  .tab {
    white-space: nowrap;
  }

  .home-hero::before {
    opacity: .32;
  }
}

/* ====== Ajustement flat + ergonomie éditeur de scénario ====== */
:root {
  --flat-page: #f7f8fb;
  --flat-panel: #ffffff;
  --flat-panel-alt: #f7f8fb;
  --flat-section: #f7f8fb;
  --flat-line: #dfe5ef;
  --flat-line-soft: #fff8e8;
  --flat-product: #f1f9f6;
  --flat-product-border: #c7d2e0;
  --flat-focus: rgba(40, 41, 41, .18);
}

body,
body.home,
body.game,
body.admin {
  background: var(--flat-page);
}

.card,
.home-card,
.content-wide .panel-inner,
.admin-card,
.scenario-mini-card,
.scenario-product-card,
.scenario-line-panel,
.nextday-panel {
  background: var(--flat-panel);
  border-color: #dfe5ef;
  box-shadow: none;
}

.card:hover,
.home-card:hover,
.admin-tile:hover,
.scenario-mini-card:hover,
.scenario-product-card:hover {
  box-shadow: none;
}

.site-header,
.admin-header {
  background: #ffffff;
  box-shadow: none;
}

.btn {
  box-shadow: none;
}

.btn:hover {
  transform: none;
  box-shadow: none;
}

.home-hero::after,
.home-hero::before {
  display: none;
}

.home-hero,
.home-legal,
.home-cookie,
body.legal-page .card {
  background: #ffffff;
}

.home-card::before {
  background: var(--brand-primary);
}

/* Éditeur scénario : lecture rapide, zones flat et actions évidentes */
.scenario-editor {
  padding: 0;
  overflow: hidden;
  border-top: 6px solid var(--brand-primary);
}

.scenario-editor__header {
  position: sticky;
  top: 0;
  z-index: 30;
  align-items: flex-start;
  padding: 18px 20px;
  border-bottom: 1px solid #dfe5ef;
  background: #ffffff;
}

.scenario-editor__title {
  display: grid;
  gap: 8px;
  min-width: min(100%, 520px);
}

.scenario-editor__eyebrow {
  width: fit-content;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  background: var(--flat-line-soft);
  color: #6b4700;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.scenario-title-label {
  margin: 0;
  color: var(--brand-dark);
  font-size: 1.15rem;
  font-weight: 700;
}

.scenario-title-input {
  width: min(100%, 620px);
  max-width: 620px;
  padding: 10px 12px;
  border: 2px solid var(--border-strong);
  border-radius: 8px;
  background: #ffffff;
  color: var(--brand-dark);
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  line-height: 1.15;
}

.scenario-editor__help {
  max-width: 68ch;
  margin: 0;
}

.scenario-actions--sticky {
  position: sticky;
  top: 18px;
  align-self: flex-start;
  gap: 8px;
}

.scenario-editor-form {
  padding: 20px;
  background: #ffffff;
}

.scenario-editor-block {
  background: var(--flat-section);
  border: 1px solid #dfe5ef;
  border-radius: 12px;
}

.scenario-macro {
  border-left: 6px solid var(--brand-teal);
}

.scenario-macro h3,
.scenario-editor-block > h3 {
  margin-bottom: 10px;
}

.scenario-meta-grid {
  padding: 14px;
  border: 1px solid #dfe5ef;
  border-radius: 12px;
  background: #ffffff;
}

.scenario-days-count {
  flex-basis: 340px;
}

.scenario-days-count .small {
  display: block;
  margin-top: 6px;
}

.scenario-line-panels {
  gap: 22px;
}

.scenario-line-panel {
  border: 2px solid var(--flat-line);
  border-radius: 12px;
  background: #ffffff;
}

.scenario-line-panel[open] {
  border-color: var(--brand-primary);
}

.scenario-line-panel > .scenario-toggle-title {
  min-height: 62px;
  background: var(--flat-line-soft);
  border-bottom: 1px solid var(--flat-line);
}

.scenario-line-panel[open] > .scenario-toggle-title {
  background: #fff3d6;
}

.scenario-toggle-title::before {
  flex: 0 0 auto;
  color: #6b4700;
}

.scenario-toggle-title h3,
.scenario-toggle-title h4 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.scenario-line-body {
  padding: 16px;
  background: #ffffff;
}

.scenario-products-stack {
  gap: 16px;
}

.scenario-product-card {
  border: 1px solid var(--flat-product-border);
  border-left: 6px solid var(--brand-teal);
  border-radius: 12px;
  background: #ffffff;
}

.scenario-product-card[open] {
  border-left-color: var(--brand-teal);
}

.scenario-product-card > .scenario-toggle-title--product {
  background: var(--flat-product);
  border-bottom: 1px solid var(--flat-product-border);
}

.scenario-product-body {
  padding: 16px;
  background: #ffffff;
}

.scenario-product-grid,
.scenario-days-picker,
.scenario-forecast-wrap,
.scenario-stocks-grid,
.scenario-sharing {
  background: #ffffff;
  border: 1px solid #dfe5ef;
  border-radius: 12px;
}

.scenario-product-grid {
  grid-template-columns: repeat(auto-fit, minmax(132px, max-content));
  gap: 12px;
  align-items: end;
}

.scenario-product-grid > div,
.scenario-compact-fields > div {
  display: grid;
  gap: 5px;
}

.scenario-compact-fields .field-xs,
.scenario-compact-fields .field-sm {
  max-width: 132px;
}

.scenario-compact-fields input[type="number"],
.scenario-compact-fields .field-xs input {
  max-width: 132px;
}

.toggle-name-input {
  width: min(100%, 360px);
  max-width: 360px;
  min-height: 36px;
  border-color: #c7d2e0;
  background: #ffffff;
}

.scenario-days-picker {
  gap: 8px;
}

.scenario-days-picker span {
  flex-basis: 100%;
  margin-bottom: 2px;
}

.scenario-days-picker label {
  min-width: 44px;
  justify-content: center;
  padding: 7px 9px;
  border: 1px solid #dfe5ef;
  border-radius: var(--radius-sm);
  background: #ffffff;
  color: var(--brand-dark);
  font-weight: 700;
}

.scenario-days-picker label:has(input:checked) {
  border-color: var(--brand-teal);
  background: var(--flat-product);
  color: #176b5c;
}

.scenario-days-picker input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--brand-teal);
}

.scenario-forecast-wrap {
  padding: 0;
}

.scenario-forecast-table,
.scenario-stocks-table,
.scenario-table {
  font-size: .92rem;
}

.scenario-forecast-table thead th,
.scenario-stocks-table thead th,
.scenario-table--macro th {
  background: var(--bg);
  color: var(--brand-dark);
  border-color: var(--border);
}

.scenario-week-row th {
  background: var(--bg);
  color: var(--brand-dark);
}

.scenario-forecast-table td,
.scenario-forecast-table th,
.scenario-stocks-table td,
.scenario-stocks-table th {
  border-color: #dfe5ef;
}

.scenario-forecast-table .tbl-input {
  width: 64px;
  min-height: 34px;
  border-radius: 8px;
  font-weight: 700;
}

.scenario-stocks-table td input {
  width: 100%;
  box-sizing: border-box;
  min-height: 34px;
  border-radius: 8px;
  font-weight: 700;
}

.scenario-table--macro tr.macro-line-row.line-orange.product-tone-a td,
.scenario-table--macro tr.macro-line-row.line-orange.product-tone-b td {
  background: #fff8e8;
}

.scenario-table--macro tr.macro-line-row.line-white.product-tone-a td,
.scenario-table--macro tr.macro-line-row.line-white.product-tone-b td {
  background: #ffffff;
}

.scenario-table--macro a {
  color: #176b5c;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.scenario-add-product-footer .btn,
.scenario-add-line-footer .btn {
  min-height: 42px;
  border-style: dashed;
  border-color: var(--brand-teal);
  background: #ffffff;
  color: #176b5c;
}

.scenario-add-product-footer .btn:hover,
.scenario-add-line-footer .btn:hover {
  background: var(--flat-product);
}

.icon-action__glyph,
.icon-action .icon-action__glyph {
  background: var(--bg);
  color: var(--text);
}

.icon-action--danger,
.icon-action--danger .icon-action__glyph {
  color: #9f1f1f;
}

.icon-action--danger .icon-action__glyph {
  background: #fdecea;
  border: 1px solid #f4b8b2;
}

.is-marked-delete {
  opacity: 1;
  background: #fff4f2;
  border-color: #f4b8b2;
}

.is-marked-delete > .scenario-toggle-title {
  background: #fdecea;
}

.scenario-sharing--full {
  border-left: 6px solid var(--brand-violet);
  background: #ffffff;
}

.scenario-sharing > strong {
  font-size: 1.05rem;
}

.scenario-sharing__add-row {
  align-items: end;
}

input:focus,
select:focus,
textarea:focus,
.tbl-input:focus,
.toggle-name-input:focus,
.scenario-title-input:focus {
  border-color: var(--muted);
  box-shadow: var(--ring);
}

/* Repère clavier neutre, sans halo coloré autour des champs. */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--muted);
  outline-offset: 2px;
}

@media (max-width: 900px) {
  .scenario-editor__header {
    position: static;
  }

  .scenario-actions--sticky {
    position: static;
    width: 100%;
  }

  .scenario-actions--sticky .btn {
    width: 100%;
  }

  .scenario-editor-form {
    padding: 14px;
  }
}

@media (max-width: 700px) {
  .scenario-product-grid,
  .scenario-line-fields,
  .scenario-compact-fields {
    grid-template-columns: 1fr;
  }

  .scenario-toggle-title h3,
  .scenario-toggle-title h4 {
    align-items: stretch;
    flex-direction: column;
  }

  .scenario-toggle-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .scenario-sharing__add-row {
    grid-template-columns: 1fr;
  }
}

/* ====== Ajustements demandés : sessions, NPD rose et aide commande ====== */
.session-management-card .btn:not(.btn-icon-only) {
  border-color: var(--border);
  background: #ffffff;
  color: var(--brand-dark);
  font-weight: 700;
}

.session-management-card .btn:not(.btn-icon-only):hover,
.session-management-card .btn:not(.btn-icon-only):focus-visible {
  background: var(--bg);
  color: var(--brand-dark);
}

#forecastTable th.npd,
#forecastTable td.npd,
#historyTable th.npd,
#historyTable td.npd {
  background-color: #f2f4f3;
  background-image: none;
  color: var(--brand-dark);
}

#forecastTable thead th.npd,
#historyTable thead th.npd {
  background-color: #e1e6e3;
  color: var(--brand-dark);
}

.npd-badge {
  display: block;
  width: max-content;
  max-width: 100%;
  margin: 4px auto 0;
  padding: 2px 6px;
  border: 1px solid #7c8782;
  border-radius: 999px;
  background: #fff;
  color: #313a36;
  font-size: .64rem;
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: .02em;
  cursor: help;
}

.npd-legend {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -4px 0 10px;
  color: var(--muted);
}

.npd-legend-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  padding: 2px 7px;
  border: 1px solid #7c8782;
  border-radius: 999px;
  background: #fff;
  color: #313a36;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.today-note {
  position: relative;
  cursor: help;
}

/* ====== Ajustements finaux sessions et aide forecast ====== */
.session-submit-wrap #createBulkGamesBtn {
  font-size: .95rem;
  font-weight: 700;
}

.session-management-card .session-bulk-actions {
  margin: 10px 0 12px;
}
/* ====== Espacement sessions et libellés de suppression ====== */
.session-management-card .scenario-table-wrap:has(#games-table-active),
.session-management-card .scenario-table-wrap:has(#games-table-all-active) {
  margin-bottom: 22px;
}

.session-management-card #showMoreAllActive {
  margin-bottom: 22px;
}

.session-create-card > h2 {
  margin-top: 0;
  margin-bottom: 12px;
  font-size: 1.45rem;
}

.toggle-delete-btn,
.scenario-toggle-actions .icon-action--danger {
  gap: 8px;
}

/* ====== Aide fabrications du jour ====== */
.nextday-panel > .small {
  max-width: none;
  width: 100%;
}

/* Exclusive game control */
.game-control-button {
  position: fixed; right: 22px; bottom: 22px; z-index: 1100;
  width: 48px; height: 48px; border: 1px solid #c7d2e0; border-radius: 50%;
  background: #fff; font-size: 25px; cursor: pointer;
  box-shadow: var(--shadow);
}
.game-control-button[hidden] { display: none; }
.game-control-button:focus-visible { outline: 3px solid #3fb498; outline-offset: 3px; }
.game-control-prompt {
  position: fixed; right: 82px; bottom: 22px; z-index: 1090; margin: 0;
  max-width: min(340px, calc(100vw - 105px)); padding: 8px 12px;
  background: #fff; color: #282929; border: 1px solid #c7d2e0; border-radius: 8px;
  font-size: 12px; box-shadow: var(--shadow); cursor: pointer;
}
.game-control-dialog {
  max-width: 480px; width: calc(100% - 40px); box-sizing: border-box;
  border: 0; border-radius: var(--radius-xl); padding: 24px; color: #282929; background: #fff;
}
.game-control-dialog::backdrop { background: #28292980; }
.game-control-dialog h2 { margin-top: 0; font-size: 21px; }
.game-control-dialog p { line-height: 1.5; }
.game-control-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.control-error { color: #b91c1c; }
.control-locked { opacity: .5; cursor: not-allowed; }
.game-readonly .row-orders input:not(:disabled), .game-readonly #dayLogInput { background: #f1f5f9; color: #5f6b7a; }

.game-control-prompt[hidden] { display: none; }
.game-control-prompt:focus-visible { outline: 3px solid #3fb498; outline-offset: 3px; }

/* Action principale des sessions : priorité explicite sur les boutons secondaires. */
.session-management-card .btn.btn-primary:not(.btn-icon-only) {
  background: var(--primary);
  border-color: transparent;
  color: var(--brand-dark);
}

.session-management-card .btn.btn-primary:not(.btn-icon-only):hover,
.session-management-card .btn.btn-primary:not(.btn-icon-only):focus-visible {
  background: var(--primary-600);
}

/* Typographie commune : contrôles natifs et hiérarchie de lecture. */
button,
input,
select,
textarea {
  font-family: inherit;
}

h1,
.home-hero h1 {
  font-weight: 800;
  letter-spacing: -.035em;
}

h2,
h3,
h4 {
  font-weight: 700;
  letter-spacing: -.015em;
}

label,
.scenario-product-grid label,
.scenario-stocks-grid > strong,
.scenario-days-picker label,
.scenario-forecast-table .tbl-input,
.scenario-stocks-table td input {
  font-weight: 600;
}

.btn,
.session-management-card .btn:not(.btn-icon-only),
.session-submit-wrap #createBulkGamesBtn {
  font-weight: 600;
  letter-spacing: 0;
}

/* ====== Composants partagés du design system ====== */

/* Hiérarchie : tous les titres de panneaux de même niveau ont le même gabarit. */
.panel-title,
.section-title {
  margin: 0 0 12px;
  font-size: clamp(1.28rem, 2vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.12;
}

/* Boutons : dimensions et états communs, y compris dans les écrans denses. */
.btn {
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
}

.btn-sm {
  min-height: 38px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: .9rem;
}

.btn-primary {
  border-color: transparent;
  background: var(--brand-primary);
  color: var(--brand-dark);
}

.btn-accent,
.btn-success {
  border-color: transparent;
  background: var(--brand-teal);
  color: var(--brand-dark);
}

.btn-accent:hover,
.btn-success:hover {
  background: var(--accent-600);
  color: var(--brand-dark);
}

.btn-secondary,
.btn-outline {
  border-color: var(--border);
  background: #fff;
  color: var(--text);
}

.btn-danger {
  border-color: transparent;
  background: var(--danger);
  color: #fff;
}

.btn-danger:hover {
  background: #a93f3f;
  color: #fff;
}

.btn-icon-only {
  width: 38px;
  min-width: 38px;
  padding: 0;
}

.btn:disabled,
.btn[disabled] {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}

/* Bandeau applicatif : identité, titre réellement centré et actions globales. */
.app-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid var(--border);
  background: #fff;
}

.site-header .app-header__inner,
.admin-header .app-header__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  width: min(1200px, calc(100% - 32px));
  min-height: 72px;
  margin: 0 auto;
  padding: 10px 0;
}

.app-header__identity {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  width: fit-content;
}

.app-header__logo {
  display: block;
  width: auto;
  height: 42px;
  max-width: min(220px, 100%);
}

.app-header__title,
.app-header__title-link {
  justify-self: center;
  min-width: 0;
  margin: 0;
  color: var(--text);
  text-align: center;
  text-decoration: none;
}

.app-header__title {
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  font-weight: 700;
  white-space: nowrap;
}

.app-header__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  justify-self: end;
  gap: 10px;
  margin: 0;
}

.app-header__actions .btn {
  min-height: 44px;
}

/* Infobulle de référence : utilisable sur une icône d’aide ou une action. */
.field-info {
  position: relative;
  z-index: 4;
  display: inline-flex;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  border: 1px solid #8a98ad;
  border-radius: 50%;
  background: #fff;
  color: #415177;
  font-size: .78rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  cursor: help;
  vertical-align: middle;
}

.tooltip-trigger,
.field-info {
  position: relative;
}

/* Le déclencheur flottant conserve son ancrage malgré la classe d’infobulle. */
.game-control-button.tooltip-trigger {
  position: fixed;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.tooltip-trigger::after,
.field-info::after {
  content: attr(data-tooltip);
  position: absolute;
  z-index: 1200;
  left: 0;
  bottom: calc(100% + 10px);
  width: max-content;
  max-width: min(260px, calc(100vw - 40px));
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: #16233d;
  color: #fff;
  box-shadow: 0 8px 24px rgba(17, 24, 39, .20);
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity .16s ease, transform .16s ease;
}

.tooltip-trigger::before,
.field-info::before {
  content: "";
  position: absolute;
  z-index: 1201;
  left: 5px;
  bottom: calc(100% + 4px);
  border: 6px solid transparent;
  border-top-color: #16233d;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity .16s ease, transform .16s ease;
}

.tooltip-trigger:hover::after,
.tooltip-trigger:focus-visible::after,
.tooltip-trigger:hover::before,
.tooltip-trigger:focus-visible::before,
.tooltip-trigger.tooltip-open::after,
.tooltip-trigger.tooltip-open::before,
.field-info:hover::after,
.field-info:focus::after,
.field-info:hover::before,
.field-info:focus::before {
  opacity: 1;
  transform: translateY(0);
}

/* Avertissement attaché au champ d’OF actuellement édité. */
.npd-edit-tooltip {
  position: relative;
}

.npd-edit-tooltip::after {
  content: attr(data-edit-tooltip);
  position: absolute;
  z-index: 1200;
  left: 50%;
  bottom: calc(100% + 10px);
  width: max-content;
  max-width: min(300px, calc(100vw - 40px));
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: #16233d;
  color: #fff;
  box-shadow: 0 8px 24px rgba(17, 24, 39, .20);
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity .16s ease, transform .16s ease;
}

.npd-edit-tooltip::before {
  content: "";
  position: absolute;
  z-index: 1201;
  left: 50%;
  bottom: calc(100% + 4px);
  border: 6px solid transparent;
  border-top-color: #16233d;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity .16s ease, transform .16s ease;
}

.npd-edit-tooltip.tooltip-open::after,
.npd-edit-tooltip.tooltip-open::before {
  opacity: 1;
  transform: translate(-50%, 0);
}

.field-info:hover,
.field-info:focus {
  border-color: var(--brand-primary);
  color: #9a5d00;
  outline: 3px solid rgba(248, 172, 0, .20);
}

.tooltip-right::after {
  right: 0;
  left: auto;
}

.tooltip-right::before {
  right: 5px;
  left: auto;
}

/* Variante utile dans les entêtes de tableaux afin d’éviter le rognage par le scroll horizontal. */
.tooltip-bottom::after {
  top: calc(100% + 10px);
  bottom: auto;
}

.tooltip-bottom::before {
  top: calc(100% + 4px);
  bottom: auto;
  border-top-color: transparent;
  border-bottom-color: #16233d;
}

/* L’aide de tableau conserve son aspect de badge, mais partage la même bulle. */
.today-note.tooltip-trigger::after {
  left: 50%;
  transform: translate(-50%, 4px);
}

.today-note.tooltip-trigger::before {
  left: 50%;
  transform: translate(-50%, 4px);
}

.today-note.tooltip-trigger:hover::after,
.today-note.tooltip-trigger:focus-visible::after,
.today-note.tooltip-trigger:hover::before,
.today-note.tooltip-trigger:focus-visible::before {
  transform: translate(-50%, 0);
}

@media (max-width: 720px) {
  .site-header .app-header__inner,
  .admin-header .app-header__inner {
    grid-template-columns: 1fr auto;
    gap: 10px 16px;
    width: min(100% - 24px, 1200px);
    padding: 10px 0;
  }

  .app-header__identity {
    grid-column: 1;
    grid-row: 1;
  }

  .app-header__title,
  .app-header__title-link {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: start;
    text-align: left;
  }

  .app-header__actions {
    grid-column: 2;
    grid-row: 1;
    align-items: center;
    flex-direction: row;
    justify-self: end;
  }

  .app-header__logo {
    height: 36px;
  }

  .date-ig {
    display: none;
  }
}

.session-line-choices { --line-choice-size: 38px; display: grid; width: max-content; gap: 8px; }
.session-line-choice { position: relative; margin: 0; cursor: pointer; }
.session-line-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.session-line-choice span { display: flex; align-items: center; justify-content: center; width: var(--line-choice-size); height: var(--line-choice-size); padding: 4px; box-sizing: border-box; border: 2px solid #dce3ef; border-radius: 8px; background: #fff; color: #111; }
.session-line-choice input:checked + span { background: #fff9e9; border-color: #f5a000; }
.session-line-choice input:focus-visible + span { outline: 2px solid #b87300; outline-offset: 3px; }
.session-line-choices [data-all-lines] { height: var(--line-choice-size); min-height: var(--line-choice-size); box-sizing: border-box; width: 100%; white-space: nowrap; }
.session-line-choices [aria-pressed="true"] { background: #fff9e9; border-color: #f5a000; color: #111; }

.session-line-buttons { display: flex; flex-wrap: nowrap; gap: 8px; }
.bulk-groups-editor .scenario-table { width: 100%; table-layout: auto; }
.bulk-groups-editor .scenario-table th:last-child,
.bulk-groups-editor .scenario-table td:last-child { width: 1%; white-space: nowrap; }
.bulk-groups-editor [data-group-name] { width: 100%; min-width: 0; box-sizing: border-box; }

/* Hidden help must not create scrollable space beyond the last day. */
.tooltip-trigger:not(:hover):not(:focus-visible):not(.tooltip-open)::after,
.tooltip-trigger:not(:hover):not(:focus-visible):not(.tooltip-open)::before,
.field-info:not(:hover):not(:focus)::after,
.field-info:not(:hover):not(:focus)::before,
.npd-edit-tooltip:not(.tooltip-open)::after,
.npd-edit-tooltip:not(.tooltip-open)::before { display: none; }

/* Keep the frozen OF label opaque while inputs scroll beneath it. */
#forecastTable .row-orders .row-head { background: #e7f5fd; }

/* Let the remaining day columns share the actual available width. */
#forecastTable col.col-day { width: auto; }
#forecastTable col.col-day--today { width: 106px; }

/* Same typography for session fields and line choices. */
#bulkSessionForm input,
#bulkSessionForm select,
#bulkSessionForm .session-line-choice span,
#bulkSessionForm [data-all-lines] { font-size: .9rem; font-weight: 400; }