/* Poerava v2 — pilotage Tahiti Pearl Market
   Direction : ivoire nacré, encre profonde, un seul accent lagon sombre.
   Aucune police externe : empilement système, serif pour la maison et les titres
   de rapport, sans-serif tabulaire pour les chiffres. */

:root {
  --ivoire: #F6F4EF;
  --ivoire-clair: #FCFBF8;
  --surface: #FFFFFF;
  --encre: #16191B;
  --encre-douce: #3E4245;
  --gris: #6E7275;
  --gris-clair: #9EA1A4;
  --trait: #E3DFD7;
  --trait-fort: #CDC7BB;

  --lagon: #17494F;
  --lagon-clair: #2E6E73;
  --nacre-fort: #6E8E92;
  --nacre: #C6D2D2;
  --or: #9A7C3F;

  --hausse: #2F6B34;
  --baisse: #9A3242;
  --critique: #8E2A38;
  --attention: #8A6412;

  --serie-1: #17494F;
  --serie-2: #6E8E92;
  --serie-3: #9A7C3F;
  --serie-4: #9BAFAE;
  --serie-5: #7C6B57;
  --serie-6: #BCC6BF;

  --r: 3px;
  --ombre: 0 1px 2px rgba(22, 25, 27, .04), 0 10px 30px -22px rgba(22, 25, 27, .22);

  --serif: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif;
  --sans: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', sans-serif;

  --fs-micro: .688rem;
  --fs-petit: .78rem;
  --fs-base: .875rem;
  --fs-titre: 1.05rem;
  --fs-kpi: 1.6rem;
  --fs-kpi-fort: 1.95rem;

  --largeur: 1400px;
  --marge-page: clamp(1rem, 3vw, 2.75rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ivoire);
  color: var(--encre);
  font-family: var(--sans);
  font-size: var(--fs-base);
  line-height: 1.55;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 500; letter-spacing: -0.01em; }
p { margin: 0 0 .5rem; }
p:last-child { margin-bottom: 0; }

.mono { font-variant-numeric: tabular-nums; letter-spacing: .01em; font-size: .95em; color: var(--encre-douce); }
.muted { color: var(--gris); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.sans-js { padding: 3rem var(--marge-page); max-width: 40rem; }

button { font: inherit; color: inherit; }

/* ============================================================ Boutons */

.bouton {
  appearance: none;
  border: 1px solid var(--lagon);
  background: var(--lagon);
  color: #FBFAF7;
  padding: .42rem .85rem;
  border-radius: var(--r);
  font-size: var(--fs-petit);
  letter-spacing: .01em;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  white-space: nowrap;
}
.bouton:hover { background: var(--lagon-clair); border-color: var(--lagon-clair); }
.bouton:focus-visible { outline: 2px solid var(--lagon); outline-offset: 2px; }

.bouton--fin {
  background: transparent;
  color: var(--encre-douce);
  border-color: var(--trait-fort);
}
.bouton--fin:hover { background: var(--surface); border-color: var(--nacre-fort); color: var(--lagon); }
.bouton[disabled] { opacity: .4; cursor: default; }

.lien {
  appearance: none; background: none; border: 0; padding: 0;
  color: var(--lagon); font-size: var(--fs-petit); cursor: pointer;
  border-bottom: 1px solid color-mix(in srgb, var(--lagon) 35%, transparent);
}
.lien:hover { border-bottom-color: var(--lagon); }

.puce {
  appearance: none;
  border: 1px solid var(--trait);
  background: var(--ivoire-clair);
  color: var(--encre-douce);
  padding: .34rem .72rem;
  border-radius: 999px;
  font-size: var(--fs-petit);
  cursor: pointer;
  white-space: nowrap;
}
.puce:hover { border-color: var(--nacre-fort); color: var(--lagon); }
.puce.est-actif {
  background: var(--lagon); border-color: var(--lagon); color: #FBFAF7;
}
.puce:focus-visible { outline: 2px solid var(--lagon); outline-offset: 2px; }

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

.entete {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(246, 244, 239, .93);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--trait);
}

.entete__haut,
.nav,
.filtres,
.contenu {
  max-width: var(--largeur);
  margin: 0 auto;
  padding-left: var(--marge-page);
  padding-right: var(--marge-page);
}

.entete__haut {
  padding-top: .85rem;
  padding-bottom: .7rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.marque { display: flex; align-items: center; gap: .7rem; color: var(--lagon); }
.marque__logo { display: inline-flex; }
.marque__texte { display: flex; flex-direction: column; line-height: 1.2; }
.marque__texte strong {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.02rem;
  letter-spacing: .055em;
  text-transform: uppercase;
  color: var(--encre);
}
.marque__sous { font-size: var(--fs-micro); color: var(--gris); letter-spacing: .09em; text-transform: uppercase; }

.entete__droite { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }

.freshness {
  display: flex; align-items: baseline; gap: .45rem;
  font-size: var(--fs-petit); color: var(--encre-douce);
}
.freshness__point {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gris-clair); flex: 0 0 auto; align-self: center;
}
.freshness--ok .freshness__point { background: var(--hausse); }
.freshness--retard .freshness__point { background: var(--attention); }
.freshness--erreur .freshness__point { background: var(--critique); }
.freshness__sous { font-size: var(--fs-micro); color: var(--gris); }

/* ============================================================ Navigation */

.nav {
  display: flex;
  gap: .1rem;
  overflow-x: auto;
  scrollbar-width: thin;
  border-top: 1px solid var(--trait);
}
.nav__lien {
  appearance: none; background: none; border: 0;
  padding: .62rem .78rem;
  font-size: var(--fs-petit);
  color: var(--gris);
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  letter-spacing: .015em;
}
.nav__lien:hover { color: var(--encre); }
.nav__lien.est-actif { color: var(--lagon); border-bottom-color: var(--lagon); }
.nav__lien:focus-visible { outline: 2px solid var(--lagon); outline-offset: -2px; }

/* ============================================================ Filtres */

.filtres {
  padding-top: .6rem;
  padding-bottom: .7rem;
  border-top: 1px solid var(--trait);
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.filtres__periodes { display: flex; gap: .35rem; flex-wrap: wrap; }
.filtres__dates, .filtres__selects { display: flex; gap: .75rem; flex-wrap: wrap; }

.champ { display: flex; flex-direction: column; gap: .18rem; min-width: 0; }
.champ__lib {
  font-size: var(--fs-micro); color: var(--gris);
  text-transform: uppercase; letter-spacing: .07em;
}
.champ input, .champ select {
  font: inherit;
  font-size: var(--fs-petit);
  color: var(--encre);
  background: var(--surface);
  border: 1px solid var(--trait-fort);
  border-radius: var(--r);
  padding: .32rem .45rem;
  max-width: 15rem;
}
.champ select { max-width: 13rem; }
.champ--recherche input { min-width: 15rem; }
.champ input:focus-visible, .champ select:focus-visible { outline: 2px solid var(--lagon); outline-offset: 1px; }

.filtres__actifs { display: flex; gap: .35rem; flex-wrap: wrap; }
.etiquette {
  appearance: none;
  display: inline-flex; align-items: center; gap: .35rem;
  background: color-mix(in srgb, var(--nacre) 34%, var(--ivoire-clair));
  border: 1px solid var(--nacre);
  color: var(--lagon);
  font-size: var(--fs-micro);
  padding: .18rem .5rem;
  border-radius: 999px;
  cursor: pointer;
}
.etiquette:hover { border-color: var(--lagon); }
.etiquette__x { font-size: .95rem; line-height: 1; }
.etiquette--vide { background: transparent; border-style: dashed; color: var(--gris); }

/* ============================================================ Contenu */

.contenu {
  padding-top: 1.4rem;
  padding-bottom: 4rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.carte {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--r);
  box-shadow: var(--ombre);
}
.carte__tete {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: .95rem 1.15rem .55rem;
}
.carte__titre {
  font-family: var(--serif);
  font-size: var(--fs-titre);
  font-weight: 400;
  letter-spacing: .005em;
}
.carte__sous { font-size: var(--fs-petit); color: var(--gris); max-width: 74ch; margin: .18rem 0 0; }
.carte__actions { display: flex; align-items: flex-end; gap: .5rem; flex-wrap: wrap; }
.carte__corps { padding: .35rem 1.15rem 1.15rem; }
.carte .note {
  margin: 0; padding: 0 1.15rem 1rem;
  font-size: var(--fs-micro); color: var(--gris); max-width: 90ch;
}
.note { font-size: var(--fs-micro); color: var(--gris); }
.sous-titre {
  font-family: var(--serif); font-weight: 400; font-size: .95rem;
  margin: 0 0 .35rem; color: var(--encre-douce);
}

.duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 1.4rem; }
/* Sans min-width nulle, une cellule de grille se dilate a la largeur
   naturelle du tableau qu'elle contient et deborde la page. */
.duo > *, .rapport__bloc, .carte__corps, .kpi { min-width: 0; }

/* ============================================================ Indicateurs */

.kpi-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr));
  gap: 1px;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--r);
  overflow: hidden;
}
.kpi {
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--trait);
  padding: .8rem .9rem .85rem;
  display: flex; flex-direction: column; gap: .1rem;
}
.kpi__lib {
  font-size: var(--fs-micro); color: var(--gris);
  text-transform: uppercase; letter-spacing: .07em;
}
.kpi__val {
  font-size: var(--fs-kpi); line-height: 1.15;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
  color: var(--encre);
}
.kpi--fort .kpi__val { font-size: var(--fs-kpi-fort); color: var(--lagon); }
.kpi__note { font-size: var(--fs-micro); color: var(--gris); }
.kpi__evos { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: .3rem; }

.evo {
  display: inline-flex; align-items: baseline; gap: .22rem;
  font-size: var(--fs-micro); font-variant-numeric: tabular-nums;
  color: var(--gris);
}
.evo__lib { color: var(--gris-clair); letter-spacing: .04em; }
.evo__marque { font-size: .62rem; }
.evo--hausse { color: var(--hausse); }
.evo--baisse { color: var(--baisse); }
.evo--stable { color: var(--gris); }
.evo--nulle { color: var(--gris-clair); }
.evo--nulle .evo__val { font-style: italic; }

/* ============================================================ Tableaux */

.table-enveloppe { overflow-x: auto; }
.table-bloc > .defilement { display: none; margin: 0 0 .3rem; }
.table-enveloppe:focus-visible { outline: 2px solid var(--lagon); }
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-petit);
}
.table th, .table td {
  padding: .42rem .55rem;
  border-bottom: 1px solid var(--trait);
  text-align: left;
  vertical-align: top;
}
.table th {
  font-weight: 500;
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--gris);
  border-bottom: 1px solid var(--trait-fort);
  white-space: nowrap;
}
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table tbody tr:hover { background: color-mix(in srgb, var(--nacre) 12%, var(--surface)); }
.table tfoot td {
  border-top: 1px solid var(--trait-fort);
  border-bottom: 0;
  background: var(--ivoire-clair);
  font-variant-numeric: tabular-nums;
}
.table--compact th, .table--compact td { padding: .32rem .5rem; }
.cellule-sous { display: block; font-size: var(--fs-micro); color: var(--gris); font-variant-numeric: normal; }
.marqueur {
  display: inline-block; font-size: var(--fs-micro); padding: 0 .3rem;
  border: 1px solid var(--trait-fort); border-radius: 2px; color: var(--gris);
}
.marqueur--avoir { color: var(--baisse); border-color: color-mix(in srgb, var(--baisse) 40%, transparent); }
.ecart { color: var(--baisse); }

.pagination {
  display: flex; align-items: center; gap: .75rem;
  padding-top: .7rem; justify-content: flex-end;
}
.pagination__etat { font-size: var(--fs-petit); color: var(--gris); }

.depliant { margin-top: 1rem; border-top: 1px solid var(--trait); padding-top: .6rem; }
.depliant summary {
  cursor: pointer; font-size: var(--fs-petit); color: var(--lagon);
  margin-bottom: .5rem;
}

/* ============================================================ Graphiques */

.chart { position: relative; }
.chart--line { width: 100%; }
.chart__svg { width: 100%; height: clamp(190px, 26vw, 300px); display: block; overflow: visible; }
.chart__grid { stroke: var(--trait); stroke-width: 1; }
.chart__tick { fill: var(--gris); font-size: 10px; font-family: var(--sans); }
.chart__line { stroke: var(--lagon); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.chart__line--serie-b { stroke: var(--nacre-fort); stroke-width: 1.2; stroke-dasharray: 4 3; }
.chart__line--serie-c { stroke: var(--or); stroke-width: 1.2; stroke-dasharray: 1.5 3; }
.chart__dot { fill: var(--surface); stroke: var(--lagon); stroke-width: 1.4; }
.chart__bar-ghost { fill: var(--nacre); opacity: .45; }
.chart__hit { cursor: crosshair; }
.chart__hit:focus-visible { outline: 1px dashed var(--lagon); }

.chart__legend {
  list-style: none; margin: .5rem 0 0; padding: 0;
  display: flex; gap: 1.1rem; flex-wrap: wrap;
  font-size: var(--fs-micro); color: var(--gris);
}
.chart__legend li { display: flex; align-items: center; gap: .35rem; }
.trait { width: 18px; height: 0; border-top: 2px solid var(--lagon); display: inline-block; }
.trait--serie-b { border-top: 1.5px dashed var(--nacre-fort); }
.trait--serie-c { border-top: 1.5px dotted var(--or); }

.chart__tooltip {
  position: absolute; top: 0; transform: translateX(-50%);
  background: var(--encre); color: var(--ivoire-clair);
  padding: .4rem .55rem; border-radius: var(--r);
  font-size: var(--fs-micro); line-height: 1.4;
  display: flex; flex-direction: column; pointer-events: none;
  white-space: nowrap; z-index: 5;
}
.chart__tooltip .muted { color: var(--nacre); }
.chart__tooltip[hidden] { display: none !important; }

.bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.bars__item { display: flex; flex-direction: column; gap: .2rem; }
.bars__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.bars__label { font-size: var(--fs-petit); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bars__value { font-size: var(--fs-petit); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bars__track { height: 6px; background: var(--ivoire); border-radius: 999px; overflow: hidden; }
.bars__fill { height: 100%; width: var(--part); background: var(--lagon); border-radius: 999px; }
.bars__note { font-size: var(--fs-micro); color: var(--gris); }

.split { display: flex; flex-direction: column; gap: .7rem; }
.split__bar { display: flex; height: 12px; border-radius: 2px; overflow: hidden; background: var(--ivoire); }
.split__seg { background: var(--teinte); min-width: 2px; }
.split__legend {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .3rem .9rem;
  font-size: var(--fs-petit);
}
.split__legend li { display: grid; grid-template-columns: auto 1fr auto auto; gap: .5rem; align-items: baseline; }
.dot { width: 8px; height: 8px; border-radius: 2px; background: var(--teinte); }
.split__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.split__val { font-variant-numeric: tabular-nums; }
.split__part { color: var(--gris); font-variant-numeric: tabular-nums; }

/* ============================================================ Alertes */

.alertes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.alerte {
  display: flex; gap: .7rem;
  border: 1px solid var(--trait);
  border-left: 3px solid var(--gris-clair);
  border-radius: var(--r);
  padding: .55rem .75rem;
  background: var(--ivoire-clair);
}
.alerte--critique { border-left-color: var(--critique); }
.alerte--attention { border-left-color: var(--attention); }
.alerte--information { border-left-color: var(--nacre-fort); }
.alerte__marque {
  width: 1.1rem; height: 1.1rem; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 50%; border: 1px solid currentColor;
  font-size: .68rem; color: var(--gris);
}
.alerte--critique .alerte__marque { color: var(--critique); }
.alerte--attention .alerte__marque { color: var(--attention); }
.alerte__titre {
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  font-size: var(--fs-base);
}
.alerte__gravite {
  font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .08em; color: var(--gris);
}
.alerte__detail { font-size: var(--fs-petit); color: var(--encre-douce); }
.alerte--critique.alerte:not(li) { flex-wrap: wrap; align-items: center; }

/* ============================================================ États */

.etat-vide {
  margin: 0; padding: 1.4rem 1rem;
  text-align: center; color: var(--gris); font-size: var(--fs-petit);
  border: 1px dashed var(--trait-fort); border-radius: var(--r);
  background: var(--ivoire-clair);
}
.etat-vide--ok { border-style: solid; }

.grille-squelette { display: flex; flex-direction: column; gap: 1.1rem; }
.skeleton {
  height: 8rem; border-radius: var(--r);
  background: linear-gradient(100deg, var(--ivoire-clair) 30%, #F1EEE7 50%, var(--ivoire-clair) 70%);
  background-size: 220% 100%;
  animation: glisse 1.5s linear infinite;
  border: 1px solid var(--trait);
}
.skeleton:nth-child(2) { height: 14rem; }
.skeleton:nth-child(3) { height: 20rem; }
@keyframes glisse { from { background-position: 130% 0; } to { background-position: -30% 0; } }
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================ Rapports */

.rapports { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.rapports__item {
  display: flex; align-items: center; justify-content: space-between; gap: 1.4rem;
  border: 1px solid var(--trait); border-radius: var(--r);
  padding: .85rem 1rem; background: var(--ivoire-clair);
}
.rapports__titre { font-family: var(--serif); font-size: 1rem; font-weight: 400; }
.rapports__resume { font-size: var(--fs-petit); color: var(--encre-douce); max-width: 78ch; margin: .15rem 0 .15rem; }
.rapports__periode { font-size: var(--fs-micro); color: var(--gris); margin: 0; }
.rapports__actions { flex: 0 0 auto; }

.barre-rapport {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap;
}
.barre-rapport__droite { display: flex; align-items: center; gap: .7rem; }

.rapport {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--r);
  box-shadow: var(--ombre);
  padding: 1.6rem clamp(1rem, 2.5vw, 2rem) 1.8rem;
  max-width: 210mm;
  margin: 0 auto;
}
.rapport__bloc { margin-top: 1.5rem; }
.rapport__titre {
  font-family: var(--serif); font-size: 1rem; font-weight: 400;
  border-bottom: 1px solid var(--trait-fort);
  padding-bottom: .25rem; margin-bottom: .6rem;
  letter-spacing: .02em;
}
.rapport__mention {
  margin-top: 1.6rem; padding-top: .6rem;
  border-top: 1px solid var(--trait);
  display: flex; flex-direction: column; gap: .2rem;
  font-size: var(--fs-micro); color: var(--gris);
}
.kpi-band--papier { grid-template-columns: repeat(4, 1fr); }
.rapport .duo { grid-template-columns: 1fr; gap: 1rem; }

/* En-tête et pied de rapport : masqués à l'écran sauf dans la section Rapports */

.impression-entete, .impression-pied { display: none; }
.rapport .impression-entete { display: block; }
.rapport .impression-pied {
  display: flex; justify-content: space-between; gap: 1rem;
  font-size: var(--fs-micro); color: var(--gris);
  border-top: 1px solid var(--trait); margin-top: .8rem; padding-top: .4rem;
}
.rapport .impression-pied__page { display: none; }

.impression-entete__rang {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
  border-bottom: 1px solid var(--encre);
  padding-bottom: .35rem;
}
.impression-entete__marque { display: flex; flex-direction: column; }
.impression-entete__maison {
  font-family: var(--serif); font-size: .95rem; letter-spacing: .16em;
}
.impression-entete__outil { font-size: var(--fs-micro); color: var(--gris); letter-spacing: .05em; }
.impression-entete__horo {
  display: flex; flex-direction: column; text-align: right;
  font-size: var(--fs-micro); color: var(--gris);
}
.impression-entete__titre {
  font-family: var(--serif); font-weight: 400;
  font-size: 1.4rem; margin: .7rem 0 .2rem;
}
.impression-entete__meta {
  display: flex; flex-direction: column; gap: .05rem;
  font-size: var(--fs-petit); color: var(--encre-douce); margin: 0 0 .3rem;
}

/* ============================================================ Portable */

@media (max-width: 860px) {
  :root { --fs-kpi: 1.4rem; --fs-kpi-fort: 1.6rem; }
  .entete__haut { padding-top: .7rem; }
  .entete__droite { width: 100%; justify-content: space-between; }
  .freshness {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 .4rem;
    align-items: baseline;
  }
  .freshness__point { grid-row: 1 / 3; align-self: center; }
  .freshness__texte, .freshness__sous { grid-column: 2; }
  .kpi-band { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
  .carte__tete { padding: .8rem .85rem .5rem; }
  .carte__corps { padding: .3rem .85rem 1rem; }
  .carte .note { padding: 0 .85rem .85rem; }
  .champ input, .champ select { max-width: none; width: 100%; }
  .champ--recherche input { min-width: 0; }
  .filtres__selects { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .6rem; }
  .filtres__dates { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .6rem; }
  .rapports__item { flex-direction: column; align-items: flex-start; gap: .6rem; }
  .split__legend li { grid-template-columns: auto 1fr auto; }
  .split__part { display: none; }
  .rapport { padding: 1.1rem .85rem 1.3rem; max-width: 100%; }
  /* Un tableau de pilotage ne se lit pas ecrase : on le fait defiler. */
  .table-enveloppe {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-right: 1px solid var(--trait);
  }
  .table { min-width: 44rem; }
  .table--compact { min-width: 52rem; }
  .table-bloc > .defilement { display: block; }
  .impression-entete__rang { flex-direction: column; gap: .3rem; }
  .impression-entete__horo { text-align: left; }
  .impression-entete__titre { font-size: 1.15rem; }
}

@media (max-width: 520px) {
  /* Sur telephone, « 6 909 849 XPF » depasse la cellule a 1,6rem. */
  :root { --fs-kpi: 1.1rem; --fs-kpi-fort: 1.25rem; }
  .kpi__val { overflow-wrap: anywhere; }
  .kpi { padding: .7rem .6rem .75rem; }
  .filtres__selects { grid-template-columns: 1fr 1fr; }
  .bars__head { flex-direction: column; gap: 0; align-items: flex-start; }
  .table th, .table td { padding: .35rem .4rem; }
}

/* ============================================================ IMPRESSION A4 */

@page {
  size: A4 portrait;
  margin: 14mm 12mm 16mm;
  @bottom-center {
    content: "Page " counter(page) " sur " counter(pages);
    font-family: Georgia, serif;
    font-size: 8pt;
    color: #000;
  }
}

@media print {
  :root {
    --ivoire: #FFFFFF;
    --ivoire-clair: #FFFFFF;
    --surface: #FFFFFF;
    --encre: #000000;
    --encre-douce: #000000;
    --gris: #333333;
    --gris-clair: #444444;
    --trait: #B9B9B9;
    --trait-fort: #6A6A6A;
    --lagon: #000000;
    --lagon-clair: #000000;
    --nacre-fort: #555555;
    --nacre: #BBBBBB;
    --or: #4A4A4A;
    --hausse: #000000;
    --baisse: #000000;
    --critique: #000000;
    --attention: #000000;
    --serie-1: #1F1F1F;
    --serie-2: #5A5A5A;
    --serie-3: #8A8A8A;
    --serie-4: #ADADAD;
    --serie-5: #C9C9C9;
    --serie-6: #E0E0E0;
    --ombre: none;
    --fs-base: 9.5pt;
    --fs-petit: 8.4pt;
    --fs-micro: 7.4pt;
    --fs-titre: 11pt;
    --fs-kpi: 13pt;
    --fs-kpi-fort: 15pt;
    --marge-page: 0;
  }

  html, body {
    background: #FFFFFF !important;
    color: #000000 !important;
    font-size: var(--fs-base);
  }

  /* Ce qui n'a pas sa place sur le papier */
  .entete, .nav, .filtres, .ecran-seul, .carte__actions,
  .pagination, .barre-rapport, .chart__tooltip, .lien,
  .bouton, .champ, .etiquette, noscript, .skeleton, .grille-squelette {
    display: none !important;
  }

  .contenu { display: block; padding: 0; max-width: none; }
  #appli { display: block; }

  /* En-tête et pied de page du rapport papier */
  .impression-entete {
    display: block !important;
    margin: 0 0 6mm;
  }
  .impression-entete__rang { border-bottom: 0.6pt solid #000; padding-bottom: 1.5mm; }
  .impression-entete__maison { font-size: 11pt; letter-spacing: .18em; color: #000; }
  .impression-entete__outil { color: #333; }
  .impression-entete__titre { font-size: 15pt; margin: 4mm 0 1mm; }
  .impression-entete__meta { color: #000; font-size: 8.4pt; }
  .impression-entete__horo { color: #333; }

  .impression-pied {
    display: flex !important;
    justify-content: space-between;
    gap: 6mm;
    border-top: 0.6pt solid #000;
    margin-top: 6mm;
    padding-top: 1.5mm;
    font-size: 7.4pt;
    color: #000;
  }
  .impression-pied__page { display: none; }

  /* Cartes : sobres, sans ombre ni fond, jamais coupées au milieu */
  .carte {
    border: 0;
    border-top: 0.6pt solid #000;
    border-radius: 0;
    box-shadow: none;
    margin: 0 0 5mm;
    padding: 0;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .carte__tete { padding: 1.5mm 0 1mm; display: block; }
  .carte__titre { font-size: 11pt; }
  .carte__sous { color: #333; font-size: 8pt; max-width: none; }
  .carte__corps { padding: 0 0 1mm; }
  .carte .note { padding: 1mm 0 0; color: #333; }

  .eviter-coupure, .rapport__bloc, .kpi-band, .chart, .bars, .split, .alertes, .duo > div {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .rapport {
    border: 0; box-shadow: none; padding: 0; margin: 0; max-width: none;
  }
  .rapport__bloc { margin-top: 5mm; }
  .rapport__titre { font-size: 10.5pt; border-bottom: 0.4pt solid #000; }
  .rapport__mention { color: #000; border-top: 0.4pt solid #000; margin-top: 5mm; }

  /* Indicateurs */
  .kpi-band {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    background: none;
    border: 0;
  }
  .kpi {
    padding: 1.5mm 2mm;
    box-shadow: none;
    border: 0.3pt solid #8A8A8A;
    background: none;
  }
  .kpi__lib { color: #333; }
  .kpi__val { color: #000; }
  .kpi--fort .kpi__val { color: #000; font-weight: 600; }
  .kpi__note, .evo, .evo__lib { color: #000; }
  .evo--nulle, .evo--nulle .evo__val { color: #444; }

  /* Tableaux : en-tête répété sur chaque page, pas de ligne coupée */
  .table-enveloppe { overflow: visible; border: 0; }
  .defilement { display: none !important; }
  .table, .table--compact { font-size: 8pt; width: 100%; min-width: 0; }
  .table thead { display: table-header-group; }
  /* table-footer-group repeterait la ligne de total au bas de chaque page :
     on garde un flux normal pour qu'elle n'apparaisse qu'une fois. */
  .table tfoot { display: table-row-group; }
  .table tr { break-inside: avoid; page-break-inside: avoid; }
  .table th {
    color: #000; border-bottom: 0.6pt solid #000;
    background: none;
  }
  .table td { border-bottom: 0.3pt solid #B9B9B9; }
  .table tbody tr:hover { background: none; }
  .table tfoot td { background: none; border-top: 0.6pt solid #000; font-weight: 600; }
  .cellule-sous { color: #333; }
  .marqueur { border-color: #000; color: #000; }

  /* Graphiques : traits noirs, taille fixe, jamais coupés */
  .chart__svg { height: 52mm; }
  .chart__grid { stroke: #C8C8C8; }
  .chart__tick { fill: #000; font-size: 7pt; }
  .chart__line { stroke: #000; stroke-width: 1.1; }
  .chart__line--serie-b { stroke: #666; stroke-dasharray: 3 2; }
  .chart__line--serie-c { stroke: #999; stroke-dasharray: 1 2; }
  .chart__dot { fill: #FFF; stroke: #000; stroke-width: .8; }
  .chart__bar-ghost { fill: #D7D7D7; opacity: 1; }
  .chart__legend { color: #000; }
  .trait { border-top-color: #000; }
  .trait--serie-b { border-top-color: #666; }
  .trait--serie-c { border-top-color: #999; }

  .bars__fill { background: #333; }
  .bars__track { background: #E4E4E4; }
  .bars__note, .bars__label, .bars__value { color: #000; }
  .split__bar { background: #E4E4E4; }
  .split__legend { color: #000; }
  .split__part { display: inline; color: #333; }

  .alerte {
    background: none;
    border: 0.3pt solid #8A8A8A;
    border-left: 1.2pt solid #000;
  }
  .alerte__titre, .alerte__detail, .alerte__gravite, .alerte__marque { color: #000; }

  .etat-vide { color: #000; border-color: #8A8A8A; background: none; padding: 3mm; }
  .depliant { border-top: 0.4pt solid #B9B9B9; }
  .depliant summary { display: none; }
  .muted, .note { color: #333 !important; }

  a[href]::after { content: none; }
}