/* ==========================================================================
   Comparaison de TOB — UNE feuille pour tous les parcours (2026-10-02)
   motor3, health5, housing, expat2, travel4 chargent ce fichier et le gabarit
   views/mods/tobcompare.php. Reference visuelle : la modale de motor3.
   Ne pas redefinir ces classes dans une vue : c'est ce qui avait fait
   diverger les cinq copies.
   ========================================================================== */

/* ---- Bouton « Compare » sur une carte de plan ----
   Actif = case cochee + bordure noire epaisse + gras : jamais une teinte seule
   (Remi est daltonien). */
.tobcmp-toggle { display:inline-flex; align-items:center; gap:4px; font-family:var(--tg-body-font-family);
    font-size:11px; font-weight:600; line-height:1.2; color:var(--tg-theme-primary-400); cursor:pointer;
    padding:4px 9px; border-radius:20px; border:1.5px solid #cfcad6; background:#fff;
    transition:border-color .2s, color .2s; user-select:none; white-space:nowrap; }
.tobcmp-toggle .material-icons { font-size:15px; }
.tobcmp-toggle .tobcmp-tick { display:none; }
.tobcmp-toggle:hover { border-color:#777; color:var(--tg-theme-primary-800); }
.tobcmp-toggle.active { border:2.5px solid #111; padding:3px 8px; color:#111; font-weight:800; }
.tobcmp-toggle.active .tobcmp-box  { display:none; }
.tobcmp-toggle.active .tobcmp-tick { display:inline; }
/* Variante coin haut-droit (cartes verticales : motor, travel, expat, housing) */
/* top:22px : sous les badges « Most Popular / Best Value » poses a cheval sur le bord (travel, expat) */
.tobcmp-toggle--corner { position:absolute; top:22px; right:12px; z-index:2; }

/* ---- Barre flottante ---- */
.compare-bar { position:fixed; bottom:-80px; left:50%; transform:translateX(-50%); z-index:100;
    background:var(--tg-theme-primary-800); color:#fff; border-radius:50px; padding:12px 16px 12px 22px;
    display:flex; align-items:center; gap:14px; box-shadow:0 8px 32px rgba(0,0,0,0.25);
    transition:bottom 0.35s cubic-bezier(.4,0,.2,1); white-space:nowrap; }
.compare-bar.visible { bottom:28px; }
.compare-bar__label { font-family:var(--tg-body-font-family); font-size:14px; font-weight:600; }
.compare-bar__count { display:inline-flex; align-items:center; justify-content:center;
    background:var(--tg-theme-secondary-500); color:var(--tg-theme-primary-800); font-weight:800;
    border-radius:50%; width:22px; height:22px; font-size:13px; margin-left:4px; }
.compare-bar__btn { background:var(--tg-theme-secondary-500); color:var(--tg-theme-primary-800); border:none;
    border-radius:50px; padding:9px 20px; font-family:var(--tg-body-font-family); font-size:14px;
    font-weight:700; cursor:pointer; }
.compare-bar__btn:hover { background:var(--tg-theme-secondary-600); }
.compare-bar__clear { background:none; border:none; color:rgba(255,255,255,0.7); cursor:pointer;
    font-family:var(--tg-body-font-family); font-size:13px; padding:0; }
.compare-bar__clear:hover { color:#fff; }
@media (max-width:480px) {
    .compare-bar { padding:10px 12px 10px 16px; gap:10px; }
    .compare-bar__label { font-size:13px; }
    .compare-bar__btn { padding:8px 14px; font-size:13px; }
}

/* ---- Modale ---- */
.cmp-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:200;
    align-items:flex-end; justify-content:center; }
.cmp-overlay.open { display:flex; }
.cmp-modal { background:#fff; width:100%; max-width:580px; max-height:92vh; border-radius:20px 20px 0 0;
    display:flex; flex-direction:column; overflow:hidden; box-shadow:0 0 40px rgba(0,0,0,.18); }
/* 3 plans ou plus : un peu plus large, sinon les colonnes deviennent illisibles */
.cmp-modal--wide { max-width:760px; }
@media(min-width:620px){ .cmp-overlay{align-items:center;} .cmp-modal{border-radius:20px;max-height:88vh;} }
.cmp-topbar { display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:16px 18px 12px; flex-shrink:0; border-bottom:1px solid #f0eeec; }
.cmp-topbar__title { flex:1; text-align:center; font-family:var(--tg-heading-font-family); font-size:19px;
    font-weight:700; color:var(--tg-heading-color); }
.cmp-topbar__btn { background:none; border:none; cursor:pointer; color:var(--tg-theme-primary-800);
    display:flex; align-items:center; padding:4px; width:34px; }
.cmp-topbar__btn .material-icons { font-size:26px; }
.cmp-modal__body { overflow-y:auto; flex:1; -webkit-overflow-scrolling:touch; }
.cmp-planbar { position:sticky; top:0; z-index:5; background:#fff; display:grid; border-bottom:2px solid #eee; }
.cmp-planbar__cell { padding:9px 8px; text-align:center; border-top:3px solid var(--tg-theme-secondary-500);
    font-family:var(--tg-body-font-family); font-size:12px; font-weight:700; color:var(--tg-theme-primary-800);
    line-height:1.2; }
.cmp-planbar__cell small { display:block; font-size:10px; font-weight:500; color:var(--tg-theme-primary-300); margin-top:2px; }
.cmp-benefit { padding:14px 18px; border-bottom:1px solid #f0eeec; }
.cmp-benefit:last-child { border-bottom:none; }
.cmp-benefit__name { font-family:var(--tg-heading-font-family); font-size:14px; font-weight:700; color:#1a1a1a;
    margin-bottom:8px; display:flex; align-items:center; gap:8px; }
/* Definition du benefice (TOB sante : « Libelle <em>definition</em> ») */
.cmp-benefit__name em { display:block; font-family:var(--tg-body-font-family); font-style:italic; font-size:12px;
    font-weight:400; color:var(--tg-theme-primary-300); margin-top:2px; }
.cmp-benefit__vals { display:grid; gap:6px; }
.cmp-benefit__val { border-radius:8px; padding:8px 10px; background:#f7f6f4; font-family:var(--tg-body-font-family);
    font-size:13px; color:var(--tg-theme-primary-500); overflow-wrap:anywhere; }
.cmp-benefit__val-label { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
    color:var(--tg-theme-primary-300); margin-bottom:3px; }
.cmp-cover-yes { color:#2e7d32; font-weight:700; }
.cmp-cover-no  { color:#b71c1c; font-weight:600; }
.cmp-amount { font-family:var(--tg-heading-font-family); font-weight:800; color:var(--tg-theme-primary-800); }
.cmp-diffbar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 18px;
    border-bottom:1px solid #f0eeec; flex-shrink:0; font-family:var(--tg-body-font-family); font-size:12px;
    color:var(--tg-theme-primary-400); }
.cmp-diffbar b { color:var(--tg-theme-secondary-600); }
.cmp-toggle-label { display:inline-flex; align-items:center; gap:8px; cursor:pointer; white-space:nowrap;
    font-weight:600; color:var(--tg-theme-primary-800); user-select:none; }
/* Case masquee mais atteignable au clavier */
.cmp-toggle-label input { position:absolute; opacity:0; width:1px; height:1px; }
.cmp-toggle-label .switch { width:38px; height:20px; border-radius:10px; background:#ddd; position:relative;
    transition:background .2s; flex-shrink:0; }
.cmp-toggle-label .switch::after { content:''; position:absolute; top:2px; left:2px; width:16px; height:16px;
    border-radius:50%; background:#fff; transition:transform .2s; box-shadow:0 1px 3px rgba(0,0,0,.25); }
.cmp-toggle-label input:checked + .switch { background:#111; }
.cmp-toggle-label input:checked + .switch::after { transform:translateX(18px); }
.cmp-toggle-label input:focus-visible + .switch { outline:2px solid #111; outline-offset:2px; }
.cmp-group { display:flex; align-items:center; gap:8px; padding:16px 18px 8px; font-family:var(--tg-heading-font-family);
    font-size:16px; font-weight:700; color:var(--tg-heading-color); background:#faf9f7; border-bottom:1px solid #f0eeec; }
.cmp-group .material-icons { font-size:20px; color:var(--tg-theme-secondary-500); }
.cmp-diffdot { flex-shrink:0; width:8px; height:8px; border-radius:50%; background:var(--tg-theme-secondary-500); display:none; }
.cmp-benefit.is-diff .cmp-diffdot { display:block; }
.cmp-benefit.is-diff .cmp-benefit__val { background:#fff9eb; }
.cmp-empty { text-align:center; padding:48px 20px; color:var(--tg-theme-primary-300); font-family:var(--tg-body-font-family); }
.cmp-empty .material-icons { font-size:52px; color:#2e7d32; display:block; margin-bottom:12px; }