/* ══════════════════════════════════════════════════════════════════════
   Comparer les offres (page 3)

   Une table, pas un tableau de bord : on vient y chercher un billet et
   lire trois prix côte à côte. La colonne CE Premium porte le rose et le
   gras ; les deux autres restent en gris, lisibles mais en retrait. L'œil
   va d'abord au bon prix, puis vérifie les autres.
   ══════════════════════════════════════════════════════════════════════ */

.cmp__panneau{ width:912px; height:500px; }

/* ---- la barre d'outils ---- */
.cmp__outils{
  flex:none; display:flex; align-items:center; gap:12px;
  padding:12px 20px 11px; border-bottom:1px solid var(--line);
}
.cmp__recherche{
  flex:0 1 330px; display:flex; align-items:center; gap:7px;
  height:30px; padding:0 11px; border:1px solid var(--line); border-radius:15px;
  background:#fff; cursor:text;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.cmp__recherche:focus-within{
  border-color:var(--rose); box-shadow:0 0 0 2.5px rgba(255,10,78,.12);
}
.cmp__recherche svg{
  flex:none; width:12px; height:12px; fill:none; stroke:var(--grey);
  stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;
}
.cmp__recherche input{
  flex:1 1 auto; min-width:0; height:100%; border:0; outline:none; background:none;
  font-family:var(--font-alt); font-size:10px; color:var(--navy);
}
.cmp__recherche input::placeholder{ color:var(--muted, #9aa3b2); }

.cmp__compte{
  margin-left:auto; flex:none;
  font-family:var(--font-alt); font-size:8.5px; color:var(--grey);
}

/* ---- la table ---- */
.cmp__corps{ flex:1 1 auto; min-height:0; overflow:auto; background:var(--bg); }
.cmp__table{ width:100%; border-collapse:separate; border-spacing:0; }

.cmp__table thead th{
  position:sticky; top:0; z-index:1;
  padding:9px 12px 8px; background:#fff; border-bottom:1px solid var(--line);
  text-align:left; white-space:nowrap; cursor:pointer; user-select:none;
  font-size:7.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted, #9aa3b2);
}
.cmp__table thead th:hover{ color:var(--navy); }
.cmp__table thead th.est-trie{ color:var(--navy); }
/* la flèche de tri, dessinée plutôt que chargée */
.cmp__table thead th::after{
  content:""; display:inline-block; margin-left:5px; vertical-align:1px;
  border-left:3px solid transparent; border-right:3px solid transparent;
  border-bottom:4px solid currentColor; opacity:0;
}
.cmp__table thead th.est-trie::after{ opacity:1; }
.cmp__table thead th.est-decroissant::after{ border-bottom:0; border-top:4px solid currentColor; }
.cmp__table thead th.cmp__col--cep{ color:var(--rose); }

.cmp__table td{
  padding:9px 12px; border-bottom:1px solid #eef0f4; vertical-align:middle;
  font-family:var(--font-alt); font-size:9.5px; line-height:13px; color:var(--grey);
}
.cmp__table tbody tr:nth-child(even) td{ background:rgba(255,255,255,.55); }
.cmp__table tbody tr:hover td{ background:#fff5f8; }

.cmp__col--offre{ width:24%; }
.cmp__col--tarif{ width:37%; }
.cmp__col--prix{ width:13%; text-align:right !important; white-space:nowrap; }

td.cmp__col--offre b{
  display:block; font-family:var(--font); font-size:10px; font-weight:800; color:var(--navy);
}
td.cmp__col--tarif{ color:var(--navy); }

td.cmp__col--prix{
  font-family:var(--font); font-weight:700; color:var(--grey);
  font-variant-numeric:tabular-nums;
}
td.cmp__col--cep span{ font-size:11.5px; font-weight:800; color:var(--rose); }
td.cmp__col--public{ text-decoration:line-through; text-decoration-color:rgba(107,114,128,.45); }
.cmp__ecart{
  display:block; margin-top:1px; font-style:normal;
  font-size:7.5px; font-weight:700; color:#2fae53; white-space:nowrap;
}
.cmp__vide{ color:var(--muted, #9aa3b2); font-weight:400; text-decoration:none; }

.cmp__rien{
  margin:0; padding:40px 20px; text-align:center;
  font-family:var(--font-alt); font-size:10.5px; color:var(--grey);
}

/* Tant que la liste n'est pas là, le bouton reste une image. */
.s03__cmp.est-muet{ cursor:default; }