/* ===== Variables ===== */
:root{
    --pink:#f39aa1;
    --pink-d:#d26c74;
    --green:#b9ecb2;
    --green-d:#7dc173;
    --blue:#b7d9e6;
    --blue-d:#6aa7bd;
    --head:#3b3b3b;
    --grid:#5d5d5d;
  }
  
  /* ===== Base ===== */
  *{ box-sizing:border-box; }
  body{
    margin:0;
    background:#eae9e9;
  }
  
  /* ===== Tableau ===== */
  table{
    width:min(980px,95vw);
    margin:40px auto;
    border-collapse:separate;
    border-spacing:8px; /* gouttières */
    background:transparent;
  }
  
  /* ===== Caption style “intégré” ===== */
  caption{
    background:var(--head);
    color:white;
    font-weight:700;
    font-size:1.6rem;
    letter-spacing:0.3px;
    padding:10px;
    border:2px solid var(--grid);
    border-radius:4px 4px 0 0;
    caption-side:top;
    text-align:center;
  }
  
  /* ===== En-tête ===== */
  th{
    background:var(--head);
    color:#fff;
    border:2px solid var(--grid);
    padding:8px 10px;
    font-weight:700;
    text-align:center;
  }
  
  /* ===== Cellules ===== */
  td{
    border:2px solid var(--grid);
    padding:8px 10px;
    line-height:1.3;
  }
  
  /* Colonnes */
  td:nth-child(1){ width:27%; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-weight:700; }
  td:nth-child(2){ width:47%; }
  td:nth-child(3){ width:16%; text-align:center; font-weight:600; }
  td:nth-child(4){ width:10%; text-align:center; font-weight:700; }
  
  /* ===== Bandes colorées ===== */
  
  /* 1) Pseudo-éléments (lignes 2 → 5) */
  tbody tr:nth-child(n+2):nth-child(-n+5) td{ background:var(--pink); }
  tbody tr:nth-child(n+2):nth-child(-n+5) td:nth-child(3){ background:var(--pink-d); color:#fff; }
  
  /* 2) Sélecteurs d’attribut (lignes 6 → 12) */
  tbody tr:nth-child(n+6):nth-child(-n+12) td{ background:var(--green); }
  tbody tr:nth-child(n+6):nth-child(-n+12) td:nth-child(3){ background:var(--green-d); color:#fff; }
  
  /* 3) Pseudo-classes de structure (lignes 13 → fin) */
  tbody tr:nth-child(n+13) td{ background:var(--blue); }
  tbody tr:nth-child(n+13) td:nth-child(3){ background:var(--blue-d); color:#fff; }
  
  /* Survol léger */
  tbody tr:hover td{ filter:brightness(.97); }