/* ===============================
   PALETTE & BASE
   =============================== */
:root{
  --cpts-white:#ffffff;
  --cpts-blue-dark:#0f2a43;   /* titres, tooltips, entêtes T2 */
  --cpts-blue:#2e88ff;        /* bleu vif (hover cellule T2) */
  --cpts-yellow:#ffcc00;
  --cpts-orange:#f39c12;
  --cpts-red:#e03a3a;
  --cpts-magenta:#80539d;
  --bord:#e5e7eb;

  /* Teintes claires (fonds cellules) */
  --t-yellow:#fff5bf;
  --t-orange:#ffe3bf;
  --t-red:#ffd4d4;
  --t-magenta:#efe3f6;
  --t-blue:#e8f3ff;
}

html, body{
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #111827;
  background: #f6f8fc;
}

/* Espacement cohérent entre sections */
.table-head,
.titre,
.comparatif,
.comparatif2,
.foot{
  margin: 24px auto 0;
  width: min(1100px, 94%);
}

/* ===============================
   BANDEAU LOGOS (table-head)
   =============================== */
.table-head{
  border-collapse: collapse;
  text-align: center;
}
.table-head th{
  border: none;
  padding: 8px 16px;
  background: transparent;
}
.table-head img{
  max-height: 80px;
  max-width: 180px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  filter: grayscale(18%);
  transition: transform .2s ease, filter .2s ease;
}
.table-head img:hover{
  transform: scale(1.05);
  filter: none;
}

/* ===============================
   TITRE PRINCIPAL
   =============================== */
.titre{
  width: 100%; 
  text-align: center;
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--cpts-white);
  padding: 12px 20px;
  background: var(--cpts-blue-dark);
  display: block;
  letter-spacing: 0.5px;
}

/* ===============================
   TABLEAU 1 (comparatif) – Survol COLONNE
   =============================== */
.comparatif{
  border-collapse: separate;
  border-spacing: 8px;
  width: 100%;
  text-align: center;
  border: none;
  table-layout: fixed;
}
.comparatif th,
.comparatif td{
  border: 1px solid var(--bord);
  padding: 10px;
  background: var(--cpts-white);
  vertical-align: top;
  transition: transform .18s ease, box-shadow .18s ease,
              background-color .15s ease, color .15s ease, filter .15s ease;
  will-change: transform;
}
.comparatif tbody th{
  text-align: left;      /* lisibilité des libellés */
  font-weight: 700;
  background: var(--t-blue);
  color: var(--cpts-blue-dark);
  width: 170px;
}
/* En-têtes – couleurs vives */
.comparatif thead th:nth-child(1){ background: #f6f8fc;;  color:#f6f8fc; border: none;}
.comparatif thead th:nth-child(2){ background: var(--cpts-yellow);  color:#fff; }
.comparatif thead th:nth-child(3){ background: var(--cpts-orange);  color:#fff; }
.comparatif thead th:nth-child(4){ background: var(--cpts-red);     color:#fff; }
.comparatif thead th:nth-child(5){ background: var(--cpts-magenta); color:#fff; }
.comparatif thead th:nth-child(6){ background: var(--cpts-blue); color:#fff; }
.comparatif thead th:nth-child(7){ background: var(--cpts-yellow); color:#fff; }
/* Corps – teintes claires coordonnées */
.comparatif tbody td:nth-child(2){ background: var(--t-yellow);  color:#4a3b00; }
.comparatif tbody td:nth-child(3){ background: var(--t-orange);  color:#5a2f00; }
.comparatif tbody td:nth-child(4){ background: var(--t-red);     color:#5a0000; }
.comparatif tbody td:nth-child(5){ background: var(--t-magenta); color:#2e2140; }
.comparatif tbody td:nth-child(6){ background: var(--t-blue); color:#0f2a43; }
.comparatif tbody td:nth-child(7){ background: var(--t-yellow); color:#4a3b00; }
/* Titres internes éventuels */
.comparatif .sigle{ display:block; font-weight:700; font-size:1.05rem; }
.comparatif .sous-titre{ display:block; font-size:.85rem; opacity:.9; margin-top:4px; line-height:1.2; }

/* Survol par colonne */
.comparatif:has(td:nth-child(2):hover) td:nth-child(2),
.comparatif:has(th:nth-child(2):hover) td:nth-child(2),
.comparatif:has(td:nth-child(2):hover) thead th:nth-child(2),
.comparatif:has(th:nth-child(2):hover) thead th:nth-child(2){
  filter: none; background: var(--cpts-yellow); color:#fff;
  transform: perspective(900px) rotateY(-6deg);
  z-index: 1;
}
.comparatif:has(td:nth-child(3):hover) td:nth-child(3),
.comparatif:has(th:nth-child(3):hover) td:nth-child(3),
.comparatif:has(td:nth-child(3):hover) thead th:nth-child(3),
.comparatif:has(th:nth-child(3):hover) thead th:nth-child(3){
  filter: none; background: var(--cpts-orange); color:#fff;
  transform: perspective(900px) rotateY(-6deg);
  z-index: 1;
}
#cell-void {
    display: none;
}
.comparatif:has(td:nth-child(4):hover) td:nth-child(4),
.comparatif:has(th:nth-child(4):hover) td:nth-child(4),
.comparatif:has(td:nth-child(4):hover) thead th:nth-child(4),
.comparatif:has(th:nth-child(4):hover) thead th:nth-child(4){
  filter: none; background: var(--cpts-red); color:#fff;
  transform: perspective(900px) rotateY(-6deg);
  z-index: 1;
}
.comparatif:has(td:nth-child(5):hover) td:nth-child(5),
.comparatif:has(th:nth-child(5):hover) td:nth-child(5),
.comparatif:has(td:nth-child(5):hover) thead th:nth-child(5),
.comparatif:has(th:nth-child(5):hover) thead th:nth-child(5){
  filter: none; background: var(--cpts-magenta); color:#fff;
  transform: perspective(900px) rotateY(-6deg);
  z-index: 1;
}
.comparatif:has(td:nth-child(6):hover) td:nth-child(6),
.comparatif:has(th:nth-child(6):hover) td:nth-child(6),
.comparatif:has(td:nth-child(6):hover) thead th:nth-child(6),
.comparatif:has(th:nth-child(6):hover) thead th:nth-child(6){
  filter: none; background: var(--cpts-blue); color:#fff;
  transform: perspective(900px) rotateY(-6deg);
  z-index: 1;
}
.comparatif:has(td:nth-child(7):hover) td:nth-child(7),
.comparatif:has(th:nth-child(7):hover) td:nth-child(7),
.comparatif:has(td:nth-child(7):hover) thead th:nth-child(7),
.comparatif:has(th:nth-child(7):hover) thead th:nth-child(7){
  filter: none; background: var(--cpts-yellow); color:#fff;
  transform: perspective(900px) rotateY(-6deg);
  z-index: 1;
}

/* Tooltips (thead uniquement, au-dessus) */
.comparatif thead th{ position: relative; }
.comparatif thead th::after{
  content: "Cliquez pour plus d'information";
  position: absolute;
  left: 50%; top: -30px; transform: translateX(-50%);
  background: var(--cpts-blue-dark); color:#fff;
  font-size: .8rem; padding: 6px 10px; border-radius: 6px;
  white-space: nowrap; box-shadow: 0 4px 10px rgba(0,0,0,.15);
  opacity: 0; pointer-events: none; transition: opacity .15s ease; z-index: 10;
}
.comparatif:has(td:nth-child(2):hover) thead th:nth-child(2)::after,
.comparatif:has(th:nth-child(2):hover) thead th:nth-child(2)::after,
.comparatif:has(td:nth-child(3):hover) thead th:nth-child(3)::after,
.comparatif:has(th:nth-child(3):hover) thead th:nth-child(3)::after,
.comparatif:has(td:nth-child(4):hover) thead th:nth-child(4)::after,
.comparatif:has(th:nth-child(4):hover) thead th:nth-child(4)::after,
.comparatif:has(td:nth-child(5):hover) thead th:nth-child(5)::after,
.comparatif:has(th:nth-child(5):hover) thead th:nth-child(5)::after{ opacity: 1; }

/* Liens lisibles */
.comparatif a{ color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.comparatif strong{ font-weight: 700; }

/* ===============================
   TABLEAU 2 (comparatif2) – Survol CELLULE
   =============================== */
.comparatif2{
  border-collapse: separate;
  border-spacing: 8px;
  width: 100%;
  text-align: center;
  border: none;
  table-layout: fixed;
}
.comparatif2 th,
.comparatif2 td{
  border: 1px solid var(--bord);
  padding: 10px;
  background: var(--t-blue);       /* bleu clair uniforme */
  color: #0b315a;
  vertical-align: top;
  transition: box-shadow .18s ease, background-color .15s ease, color .15s ease, filter .15s ease;
  position: relative;              /* pour tooltip */
  border-radius: 0;                /* bords carrés */
}
/* 1ʳᵉ ligne d’en-têtes (catégories) – non affectée au hover */
.comparatif2 thead th{
  background: var(--t-blue);
  color: var(--cpts-blue-dark); font-weight: 700; font-size: 1rem; border-radius: 0;
}
/* Survol d’une cellule (pas d’agrandissement) */
.comparatif2 td:hover{
  background: var(--cpts-blue); color:#fff;
  box-shadow: 0 8px 18px rgba(46,136,255,.35);
  z-index: 2; filter: none;
}

/* Tooltip cellule (au-dessus) */
.comparatif2 td::after{
  content: "Cliquez pour plus d'information";
  position: absolute;
  left: 50%; bottom: -32px; transform: translateX(-50%);
  background: var(--cpts-blue-dark); color:#fff;
  font-size: .8rem; padding: 6px 10px; border-radius: 6px;
  white-space: nowrap; box-shadow: 0 4px 10px rgba(0,0,0,.15);
  opacity: 0; pointer-events: none; transition: opacity .15s ease; z-index: 10;
}
.comparatif2 td:hover::after{ opacity: 1; }

/* Liens & contenus dans T2 */
.comparatif2 a{ color: inherit; display: block; text-decoration: none; }
.comparatif2 strong{ font-weight: 700; }
/* Logos homogènes */
.comparatif2 .icon{
  width: 60px; height: 60px; margin: 0 auto 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--t-white); overflow: hidden; border: 1px solid var(--bord);
}
.comparatif2 .icon img{
  max-width: 80%; max-height: 80%; object-fit: contain; display: block;
}

/* ===============================
   CLAUSE (foot)
   =============================== */
.foot{
  text-align: center;
  color: var(--cpts-blue-dark);
  padding: 16px 20px;
  background: #f6f8fc;
  font-size: .95rem;
}
.foot strong{ font-weight: 700; color: var(--cpts-blue-dark); }