/**
 * Escaliers Messier — Tableaux des articles de blogue.
 *
 * Ajoute 2026-08-24.
 *
 * Le theme ne stylait pas les <table> du contenu : ni grille, ni bordures, et
 * un debordement horizontal sur mobile. Deux comportements ici :
 *
 *   - Ecran large : grille complete, en-tete contraste, lignes alternees.
 *   - Sous 640px : chaque ligne devient une carte, chaque cellule affichant son
 *     intitule via l'attribut data-label present dans le markup des articles.
 *
 * Les variables proviennent du shell (em-shell.php), avec valeurs de repli.
 */

.em-article-table{
  margin:0 0 2rem;
}
.em-article-table table{
  width:100%;
  border-collapse:collapse;
  font-size:15px;
  line-height:1.55;
  background:#fff;
  border:1px solid var(--line,#D8D8D3);
}
.em-article-table thead th{
  background:var(--fg,#0D171D);
  color:#fff;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  text-align:left;
  padding:12px 14px;
  border-right:1px solid rgba(255,255,255,.14);
  vertical-align:middle;
}
.em-article-table thead th:last-child{border-right:0;}
.em-article-table tbody td{
  padding:12px 14px;
  border-top:1px solid var(--line,#D8D8D3);
  border-right:1px solid var(--line,#D8D8D3);
  color:var(--fg-soft,#30373E);
  vertical-align:top;
}
.em-article-table tbody td:last-child{border-right:0;}
.em-article-table tbody tr:nth-child(even) td{background:#F7F7F5;}
.em-article-table tbody td strong{color:var(--fg,#0D171D);}
.em-article-table tbody td a{
  color:var(--fg,#0D171D);
  text-decoration:underline;
}
.em-article-table figcaption{
  font-size:13px;
  line-height:1.6;
  color:var(--fg-soft,#30373E);
  opacity:.85;
  margin-top:10px;
  padding-left:2px;
}
.em-article-table figcaption a{color:var(--fg,#0D171D);}

/* Tableau a deux colonnes comparatives : la premiere colonne sert d'intitule. */
.em-article-table tbody td:first-child{
  color:var(--fg,#0D171D);
  font-weight:600;
}

@media(max-width:640px){
  .em-article-table table{
    border:0;
    background:transparent;
  }
  .em-article-table thead{
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
  }
  .em-article-table table,
  .em-article-table tbody,
  .em-article-table tr,
  .em-article-table td{
    display:block;
    width:100%;
  }
  .em-article-table tbody tr{
    border:1px solid var(--line,#D8D8D3);
    background:#fff;
    margin:0 0 12px;
    padding:2px 14px;
  }
  .em-article-table tbody tr:nth-child(even) td{background:transparent;}
  .em-article-table tbody td{
    border:0;
    border-bottom:1px solid var(--line,#D8D8D3);
    padding:11px 0;
    display:grid;
    grid-template-columns:minmax(88px,38%) 1fr;
    gap:14px;
    align-items:start;
  }
  .em-article-table tbody tr td:last-child{border-bottom:0;}
  .em-article-table tbody td::before{
    content:attr(data-label);
    font-size:11.5px;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:var(--fg,#0D171D);
    opacity:.6;
    line-height:1.45;
    padding-top:1px;
  }
  /* Cellule sans data-label : occupe toute la largeur plutot qu'une colonne vide. */
  .em-article-table tbody td:not([data-label]){
    display:block;
  }
  .em-article-table tbody td:first-child{
    font-weight:700;
  }
  .em-article-table figcaption{
    font-size:12.5px;
    margin-top:2px;
  }
}