/* ================================================================
   25. TABLEAU ÉDITORIAL (mc-table)
   ─────────────────────────────────────────────────────────────
   Composant tableau à usage éditorial et scientifique.
   Conçu pour des données botaniques, historiques ou comparatives.

   STRUCTURE HTML
   ──────────────
   <figure class="mc-table-wrap [mc-table-wrap--amber]">
     <figcaption class="mc-table__caption">
       Titre du tableau
       <span class="mc-table__caption-sub">Sous-titre ou source</span>
     </figcaption>
     <div class="mc-table__scroll">
       <table class="mc-table [mc-table--zebra] [mc-table--compact] [mc-table--bordered]">
         <thead>
           <tr>
             <th class="mc-table__th">Taxon</th>
             <th class="mc-table__th mc-table__th--num">Valeur</th>
             <th class="mc-table__th mc-table__th--center">Statut</th>
           </tr>
         </thead>
         <tbody>
           <tr class="mc-table__row [mc-table__row--highlight] [mc-table__row--muted]">
             <td class="mc-table__td">Contenu</td>
             <td class="mc-table__td mc-table__td--num">42,3</td>
             <td class="mc-table__td mc-table__td--center">
               <span class="mc-pill mc-pill--green">Valide</span>
             </td>
           </tr>
         </tbody>
         <tfoot>
           <tr>
             <td colspan="3" class="mc-table__foot-source">
               Source : Colas, B. & al. 1996
             </td>
           </tr>
         </tfoot>
       </table>
     </div>
   </figure>

   MODIFICATEURS DE WRAPPER
   ─────────────────────────
   .mc-table-wrap              → liseré vert (défaut botanique)
   .mc-table-wrap--amber       → liseré ambre (histoire / patrimoine)
   .mc-table-wrap--neutral     → liseré gris (données neutres)
   .mc-table-wrap--coral       → liseré coral (alerte / répulsion)

   MODIFICATEURS DE TABLE
   ───────────────────────
   .mc-table--zebra            → lignes alternées très subtiles
   .mc-table--compact          → padding réduit (données denses)
   .mc-table--bordered         → grille complète visible

   MODIFICATEURS DE CELLULE
   ─────────────────────────
   .mc-table__th--num          → en-tête colonne numérique (droite)
   .mc-table__th--center       → en-tête centré
   .mc-table__td--num          → données numériques (mono, droite)
   .mc-table__td--center       → cellule centrée
   .mc-table__td--muted        → valeur atténuée (gris)
   .mc-table__td--accent       → valeur mise en valeur (vert)
   .mc-table__td--accent-amber → valeur ambre
   .mc-table__row--highlight   → ligne mise en évidence (fond teinté)
   .mc-table__row--muted       → ligne atténuée (opacité réduite)
   ================================================================ */


/* ── Tokens locaux ── */
:root {
  --mc-tbl-border-top:      2px solid var(--mc-green-600);
  --mc-tbl-border-sep:      1px solid rgba(0,0,0,.06);
  --mc-tbl-border-head:     2px solid var(--mc-green-600);
  --mc-tbl-head-bg:         transparent;
  --mc-tbl-row-hover-bg:    rgba(29,80,67,.03);
  --mc-tbl-row-stripe-bg:   rgba(238,245,241,.5);
  --mc-tbl-highlight-bg:    rgba(29,80,67,.06);
  --mc-tbl-pad-v:           10px;
  --mc-tbl-pad-h:           14px;
}


/* ── Wrapper ── */
.mc-table-wrap {
  margin: 0 0 2rem;
  border-top: var(--mc-tbl-border-top);
  background: var(--mc-white);
}
.mc-table-wrap--amber {
  border-top-color: var(--mc-amber-600);
  --mc-tbl-border-head:   2px solid var(--mc-amber-600);
  --mc-tbl-row-hover-bg:  rgba(184,146,46,.04);
  --mc-tbl-row-stripe-bg: rgba(255,251,235,.55);
  --mc-tbl-highlight-bg:  rgba(184,146,46,.07);
}
.mc-table-wrap--neutral {
  border-top-color: var(--mc-gray-400);
  --mc-tbl-border-head:   2px solid var(--mc-gray-300, #c4c2b9);
  --mc-tbl-row-hover-bg:  rgba(0,0,0,.02);
  --mc-tbl-row-stripe-bg: rgba(0,0,0,.015);
  --mc-tbl-highlight-bg:  rgba(0,0,0,.04);
}
.mc-table-wrap--coral {
  border-top-color: var(--mc-coral-600);
  --mc-tbl-border-head:   2px solid var(--mc-coral-600);
  --mc-tbl-row-hover-bg:  rgba(220,38,38,.03);
  --mc-tbl-row-stripe-bg: rgba(254,242,242,.5);
  --mc-tbl-highlight-bg:  rgba(220,38,38,.06);
}


/* ── Légende (au-dessus, style muséum) ── */
.mc-table__caption {
  display: block;
  padding: .8rem var(--mc-tbl-pad-h) .65rem;
  border-bottom: 1px solid rgba(0,0,0,.06);
  font-family: var(--mc-font-ui);
  font-size: .68em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--mc-green-800);
  line-height: 1.35;
  background: var(--mc-green-50);
}
.mc-table-wrap--amber   .mc-table__caption { color: var(--mc-amber-800);  background: var(--mc-amber-50); }
.mc-table-wrap--neutral .mc-table__caption { color: var(--mc-gray-700);   background: var(--mc-gray-100); }
.mc-table-wrap--coral   .mc-table__caption { color: var(--mc-coral-800);  background: var(--mc-coral-50); }

.mc-table__caption-sub {
  display: block;
  font-size: .9em;
  font-weight: 400;
  text-transform: none;
  letter-spacing: .02em;
  font-style: italic;
  color: var(--mc-gray-400);
  margin-top: 2px;
}


/* ── Conteneur scroll (overflow mobile) ── */
.mc-table__scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* indicateur de scroll discret */
  background:
    linear-gradient(to right, var(--mc-white) 30%, rgba(255,255,255,0)) left / 30px 100% no-repeat,
    linear-gradient(to left,  var(--mc-white) 30%, rgba(255,255,255,0)) right / 30px 100% no-repeat,
    radial-gradient(ellipse at left,  rgba(0,0,0,.06) 0%, transparent 70%) left  / 12px 100% no-repeat,
    radial-gradient(ellipse at right, rgba(0,0,0,.06) 0%, transparent 70%) right / 12px 100% no-repeat;
  background-attachment: local, local, scroll, scroll;
}


/* ── Table elle-même ── */
.mc-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mc-font-body);
  font-size: .84em;
  color: var(--mc-gray-700);
  line-height: 1.5;
}

/* ── En-têtes de colonnes ── */
.mc-table thead {
  border-bottom: var(--mc-tbl-border-head);
}
.mc-table__th {
  padding: var(--mc-tbl-pad-v) var(--mc-tbl-pad-h);
  text-align: left;
  font-family: var(--mc-font-ui);
  font-size: .72em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--mc-green-800);
  white-space: nowrap;
  vertical-align: bottom;
  background: var(--mc-tbl-head-bg);
}
.mc-table-wrap--amber   .mc-table__th { color: var(--mc-amber-800); }
.mc-table-wrap--neutral .mc-table__th { color: var(--mc-gray-500); }
.mc-table-wrap--coral   .mc-table__th { color: var(--mc-coral-800); }

.mc-table__th--num    { text-align: right; font-family: var(--mc-font-mono); letter-spacing: .04em; }
.mc-table__th--center { text-align: center; }


/* ── Lignes du corps ── */
.mc-table tbody tr.mc-table__row {
  border-bottom: var(--mc-tbl-border-sep);
  transition: background var(--mc-transition);
}
.mc-table tbody tr.mc-table__row:last-child { border-bottom: none; }
.mc-table tbody tr.mc-table__row:hover { background: var(--mc-tbl-row-hover-bg); }

/* Lignes alternées */
.mc-table--zebra tbody tr.mc-table__row:nth-child(even) {
  background: var(--mc-tbl-row-stripe-bg);
}
.mc-table--zebra tbody tr.mc-table__row:nth-child(even):hover {
  background: var(--mc-tbl-row-hover-bg);
}

/* Ligne mise en évidence */
.mc-table__row--highlight {
  background: var(--mc-tbl-highlight-bg) !important;
}
.mc-table__row--highlight .mc-table__td:first-child {
  border-left: 2px solid var(--mc-green-600);
}
.mc-table-wrap--amber .mc-table__row--highlight .mc-table__td:first-child {
  border-left-color: var(--mc-amber-600);
}

/* Ligne atténuée */
.mc-table__row--muted { opacity: .48; }
.mc-table__row--muted:hover { opacity: .72; }


/* ── Cellules ── */
.mc-table__td {
  padding: var(--mc-tbl-pad-v) var(--mc-tbl-pad-h);
  vertical-align: middle;
  line-height: 1.55;
}

/* Données numériques */
.mc-table__td--num {
  font-family: var(--mc-font-mono);
  font-size: .9em;
  font-weight: 600;
  text-align: right;
  color: var(--mc-gray-700);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

/* Centré */
.mc-table__td--center { text-align: center; }

/* Valeur sémantiquement atténuée */
.mc-table__td--muted {
  color: var(--mc-gray-400);
  font-style: italic;
}

/* Valeur mise en évidence — vert */
.mc-table__td--accent {
  font-weight: 700;
  color: var(--mc-green-800);
}
/* Valeur mise en évidence — ambre */
.mc-table__td--accent-amber {
  font-weight: 700;
  color: var(--mc-amber-800);
}
/* Valeur mise en évidence — coral */
.mc-table__td--accent-coral {
  font-weight: 700;
  color: var(--mc-coral-800);
}

/* Cellule mono (formule, code, identifiant) */
.mc-table__td--mono {
  font-family: var(--mc-font-mono);
  font-size: .82em;
  color: var(--mc-gray-700);
  letter-spacing: .02em;
}


/* ── Variante grille bordée ── */
.mc-table--bordered .mc-table__th,
.mc-table--bordered .mc-table__td {
  border: 1px solid rgba(0,0,0,.07);
}
.mc-table--bordered thead tr {
  background: var(--mc-green-50);
}
.mc-table-wrap--amber   .mc-table--bordered thead tr { background: var(--mc-amber-50); }
.mc-table-wrap--neutral .mc-table--bordered thead tr { background: var(--mc-gray-100); }


/* ── Variante compacte ── */
.mc-table--compact .mc-table__th,
.mc-table--compact .mc-table__td {
  padding: 6px var(--mc-tbl-pad-h);
  font-size: .8em;
}
.mc-table--compact .mc-table__th { font-size: .67em; }


/* ── Pied de tableau (source / note) ── */
.mc-table tfoot tr {
  border-top: 1px solid rgba(0,0,0,.07);
}
.mc-table__foot-source {
  padding: .5rem var(--mc-tbl-pad-h);
  font-family: var(--mc-font-ui);
  font-size: .66em;
  font-style: italic;
  color: var(--mc-gray-400);
  text-align: right;
  line-height: 1.4;
}
.mc-table__foot-source a {
  color: var(--mc-green-600);
  text-decoration: none;
  border-bottom: 1px solid rgba(44,121,100,.25);
}
.mc-table__foot-source a:hover {
  border-bottom-color: var(--mc-green-600);
}


/* ── Indicateur de tri (colonne triable, optionnel) ── */
.mc-table__th--sortable {
  cursor: pointer;
  user-select: none;
  padding-right: calc(var(--mc-tbl-pad-h) + 14px);
  position: relative;
}
.mc-table__th--sortable::after {
  content: '↕';
  position: absolute;
  right: var(--mc-tbl-pad-h);
  bottom: var(--mc-tbl-pad-v);
  font-size: .85em;
  opacity: .25;
  transition: opacity var(--mc-transition);
}
.mc-table__th--sortable:hover::after  { opacity: .6; }
.mc-table__th--sort-asc::after        { content: '↑'; opacity: .8; }
.mc-table__th--sort-desc::after       { content: '↓'; opacity: .8; }


/* ── Responsive ── */
@media (max-width: 580px) {
  :root {
    --mc-tbl-pad-v: 8px;
    --mc-tbl-pad-h: 10px;
  }
  .mc-table { font-size: .8em; }
  .mc-table__caption { font-size: .64em; padding: .65rem 10px .5rem; }
}