/* Page gamme - tableau des modèles : un vrai tableau, en cartes sous 760 px */
.mt{width:100%;border-collapse:collapse;border-top:2px solid var(--navy);background:#fff}
.mt caption{text-align:left}
.mt th,.mt td{padding:18px 16px;text-align:left;border-bottom:1px solid var(--line);
  vertical-align:middle}
.mt thead th{font-family:var(--ui);font-weight:700;font-size:.72rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--mute);padding-block:14px;background:var(--wash)}
.mt tbody th{font-family:var(--ui);font-weight:800;font-size:1.5rem;letter-spacing:-.03em;
  white-space:nowrap}
/* Le lien couvre toute la case (code et nom complet) : aucun texte voisin dont il faudrait le distinguer */
.mt tbody th a{display:block;color:var(--navy)}
.mt tbody th a:hover{color:var(--blue);text-decoration:none}
.mt tbody th small{display:block;font-family:var(--tx);font-weight:500;font-size:.84rem;
  letter-spacing:0;color:var(--mute);margin-top:3px;white-space:normal}
.mt td{font-variant-numeric:tabular-nums;color:var(--body)}
.mt td b{font-family:var(--ui);font-weight:800;color:var(--navy);font-size:1.06rem}
.mt tbody tr{transition:background .14s}
.mt tbody tr:hover{background:var(--wash)}
.mt .num{text-align:right}
.mt__e svg{display:block;height:72px;width:auto;max-width:100%}
.mt__e rect{fill:var(--steel);stroke:var(--blue);stroke-width:1.5}
.mt__e line{stroke:var(--blue);stroke-width:1;stroke-dasharray:3 3}
/* La maquette aligne ce lien à droite ; « .mt td » l'emportait sur « .mt__l » et le laissait à gauche de sa cellule */
.mt td.mt__l{white-space:nowrap;text-align:right}
/* Modèle sans code (« Coffret 230V / 16A ») : le nom tient lieu de désignation, il peut passer à la ligne */
.mt tbody th.mt__nom{font-size:1.1rem;letter-spacing:-.01em;white-space:normal}

@media (max-width:760px){
  .mt thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .mt,.mt tbody,.mt tr,.mt th,.mt td{display:block;width:100%}
  .mt tbody tr{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;padding:18px 0;
    border-bottom:1px solid var(--line)}
  .mt th,.mt td{border:0;padding:4px 0}
  .mt tbody th{grid-column:1/-1;padding-bottom:8px}
  .mt .num{text-align:left}
  .mt td[data-l]::before{content:attr(data-l);display:block;font-family:var(--ui);font-weight:700;
    font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-bottom:2px}
  .mt td:empty{display:none}
  .mt__e{grid-column:1/-1;padding-top:10px !important}
  .mt td.mt__l{grid-column:1/-1;text-align:left;padding-top:10px !important}
}
